项目资料收集

src/components/date-year/date-year.vue

@@ -0,0 +1,84 @@
+<template>
+    <div class="hc-date-year-select hc-flex">
+        <el-date-picker ref="startYearRef" v-model="startYear" type="year" value-format="YYYY" placeholder="计划开工年" :disabled="disabled" :clearable="false" @change="startYearChange" />
+        <div class="to ml-2 mr-2 text-[14px]">至</div>
+        <el-date-picker ref="endYearRef" v-model="endYear" type="year" value-format="YYYY" placeholder="计划完工年" :clearable="clearable" :disabled="disabled" @change="endYearChange" @blur="endYearBlur" />
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { isNullES } from 'js-fast-way'
+
+defineProps({
+    disabled: {
+        type: Boolean,
+        default: false,
+    },
+    clearable: {
+        type: Boolean,
+        default: true,
+    },
+})
+
+defineOptions({
+    name: 'HcDateYear',
+})
+
+//双向绑定
+const startYear = defineModel('modelValue', {
+    default: '',
+})
+const endYear = defineModel('modelValue:end', {
+    default: '',
+})
+
+//日期选择框ref
+const startYearRef = ref(null)
+const endYearRef = ref(null)
+
+//开始年
+const startYearChange = (val) => {
+    startYear.value = val
+    endYearRef.value?.focus()
+    endYearRef.value?.handleOpen()
+    startYearRef.value?.handleClose()
+}
+
+//结束年
+const endYearChange = (val) => {
+    if (isNullES(val)) {
+        startYear.value = ''
+    }
+    endYear.value = val
+    if (val <= startYear.value) {
+        window.$message.warning('完工年要大于开工年')
+        endYear.value = ''
+        endYearRef.value?.handleOpen()
+    } else {
+        endYearRef.value?.handleClose()
+    }
+}
+
+//失去焦点
+const endYearBlur = () => {
+    if (isNullES(startYear.value) || isNullES(endYear.value)) {
+        startYear.value = ''
+        endYear.value = ''
+        window.$message.warning('请重新选择完整的范围年份')
+    } else if (endYear.value <= startYear.value) {
+        startYear.value = ''
+        endYear.value = ''
+        window.$message.warning('完工年要大于开工年')
+    }
+}
+</script>
+
+<style lang="scss">
+.hc-date-year-select {
+    .el-input.el-date-editor,
+    .el-date-editor.el-input__wrapper {
+        width: 120px;
+    }
+}
+</style>

src/components/index.js

@@ -1,6 +1,7 @@
 import { setupDirective } from './directive/index'
 import HcMenuIcon from './menu-icon/menu-icon.vue'
 import HcIconInput from './icon-input/icon-input.vue'
+import HcDateYear from './date-year/date-year.vue'
 
 //注册全局组件
 export const setupComponents = (App) => {
@@ -10,4 +11,5 @@ export const setupComponents = (App) => {
     //自定义组件
     App.component('HcMenuIcon', HcMenuIcon)
     App.component('HcIconInput', HcIconInput)
+    App.component('HcDateYear', HcDateYear)
 }

src/views/project/admin/list.vue

@@ -1,13 +1,26 @@
 <template>
     <hc-card>
+        <template #header>
+            <hc-date-year v-model="searchForm.startYear" v-model:end="searchForm.endYear" />
+        </template>
+        <template #extra>
+            自定义标题栏右边
+        </template>
         <HcTableList />
     </hc-card>
 </template>
 
 <script setup>
+import { ref } from 'vue'
 import HcTableList from '../modules/project-list.vue'
+
+//搜索条件
+const searchForm = ref({
+    startYear: '', endYear: '',
+    current: 1, size: 20, total: 0,
+})
 </script>
 
-<style scoped lang="scss">
+<style lang="scss">
 
 </style>