feat: 节假日模块优化

src/views/holidays/HolidaysDetail.vue

@@ -12,12 +12,12 @@
       <a-row>
         <a-col :span="12">
           <a-form-item label='假期名称' :labelCol="{ span: 5 }" :wrapperCol="{ span: 17 }">
-            <a-input v-model="submitInfo.name" placeholder="双休日请输入星期六或星期日" />
+            <a-input v-model="detailInfo.name" placeholder="双休日请输入星期六或星期日" />
           </a-form-item>
         </a-col>
         <a-col :span="12">
           <a-form-item label='假期类型' :labelCol="{ span: 5 }" :wrapperCol="{ span: 17 }">
-            <a-select :default-value="(holidayTypes[0]||{}).valueInt" @change="handleChange">
+            <a-select :disabled="isEdit" v-model="detailInfo.dayCode" @change="handleChange">
               <a-select-option v-for="item in holidayTypes" :value="item.valueInt" :key="item.id">
                 {{item.name}}
               </a-select-option>
@@ -28,16 +28,18 @@
       <a-row>
         <a-col :span="12">
           <a-form-item v-if="durationInput"  label='假期时间' :labelCol="{ span: 5 }" :wrapperCol="{ span: 17 }">
-            <a-date-picker style="width: 100%" />
+            <a-date-picker :disabled-date="disabledDate" v-if="isEdit" v-model="dateTime" style="width: 100%" />
+            <a-date-picker :disabled-date="disabledDate" v-else style="width: 100%" />
           </a-form-item>
 
           <a-form-item v-else label='假期范围' :labelCol="{ span: 5 }" :wrapperCol="{ span: 17 }">
-             <a-range-picker @change="onChange" />
+             <a-range-picker :disabled-date="disabledDate" v-if="isEdit" v-model="dateRange"  @change="onChange" />
+            <a-range-picker :disabled-date="disabledDate" v-else @change="onChange" />
           </a-form-item>
         </a-col>
         <a-col :span="12">
           <a-form-item label='假期时长' :labelCol="{ span: 5 }" :wrapperCol="{ span: 17 }">
-            <a-input disabled="disabled" v-model="submitInfo.duration" />
+            <a-input disabled="disabled" v-model="detailInfo.duration" />
           </a-form-item>
         </a-col>
       </a-row>
@@ -47,57 +49,60 @@
 <script>
 
 import {addHoliday} from "@api/holidays/holidays";
-
+import moment from 'moment';
 export default {
   name: 'SysBusinessDetail',
   props:[
     'holidayTypes',
-    'year'
+    'detailData',
+    'isEdit'
   ],
   data() {
     return {
-      parentName:"",//父业务名称
-      optType: 0,
-      sysBusiness:{},
-      isChildBusiness: false,
-      visible: false,
+      visible: true,
       modalTitle: "新建假期",
       modalWidth:800,
-      durationInput: false,
-      submitInfo:{
-        name: "",
-        dayCode: (this.holidayTypes[0]||{}).valueInt,
-        startDate: null,
-        endDate: null,
-        duration: 0,
-        year: this.year
-      }
+      durationInput: this.detailData.dayCode === SYS_CONST.HOLIDAY_TYPE.WEEKEND,
+      detailInfo: this.detailData,
+      dateRange: [moment(this.detailData.startDate), moment(this.detailData.endDate)],
+      dateTime: moment(this.detailData.startDate)
+    }
+  },
+  watch:{
+    detailData(){
+      this.detailInfo = this.detailData
+      this.dateRange = [moment(this.detailData.startDate), moment(this.detailData.endDate)]
+      this.durationInput = this.detailData.dayCode === SYS_CONST.HOLIDAY_TYPE.WEEKEND
+      this.dateTime = moment(this.detailData.startDate)
     }
   },
   methods: {
     handleOk() {
-      addHoliday(this.submitInfo).then(response => {
+      addHoliday(this.detailInfo).then(response => {
         if (response && response.code == SYS_CONST.REQUEST.SUCCEED) {
           this.visible = false;
-          this.loadData();
+          this.$emit('flushData')
         }
       });
     },
     onChange(date,dateStr) {
-     this.submitInfo.duration = date[1].diff(date[0],'day')+1;
-     this.submitInfo.startDate = dateStr[0];
-     this.submitInfo.endDate = dateStr[1];
+     this.detailInfo.duration = date[1].diff(date[0],'day')+1;
+     this.detailInfo.startDate = dateStr[0];
+     this.detailInfo.endDate = dateStr[1];
     },
     handleChange(value) {
-     this.submitInfo.dayCode = value
+     this.detailInfo.dayCode = value
      if(value===SYS_CONST.HOLIDAY_TYPE.WEEKEND){
        this.durationInput = true
-       this.submitInfo.duration = 1
+       this.detailInfo.duration = 1
      }else {
        this.durationInput = false
-       this.submitInfo.duration = 0
+       this.detailInfo.duration = 0
      }
+    },
+    disabledDate(current){
+      return (current.year() !== this.detailData.year)
     }
-  }
+  },
 }
 </script>
\ No newline at end of file

src/views/holidays/HolidaysList.vue

@@ -13,9 +13,9 @@
                 </a-select>
               </a-form-item>
             </a-col>
-            <a-col :span="2" :offset="1">
+            <a-col :span="2">
               <a-form-item>
-                <a-button type="primary" :loading="loading" @click="synchronization">
+                <a-button type="primary" :loading="loading" @click="synchronization" style="margin-left: 15px">
                   同步
                 </a-button>
               </a-form-item>
@@ -52,7 +52,7 @@
         {{text}}天
       </span>
       <span slot="action" slot-scope="text, record">
-          <a>编辑</a>
+          <a @click="editRecord(record)">编辑</a>
           <a-divider type="vertical"/>
           <a-popconfirm
             v-if="dataSource.length"
@@ -83,7 +83,7 @@
           :showTotal="$showTotal"/>
       </div>
     </a-table>
-    <holidays-detail ref="holidayDetail" :holidayTypes="holidayTypes" :year="query.year"></holidays-detail>
+    <holidays-detail v-if="isShow" ref="holidayDetail" :holidayTypes="holidayTypes" :detailData="detailData" :isEdit="isEdit" @flushData="flushData"></holidays-detail>
   </a-card>
 </template>
 <script>
@@ -120,7 +120,10 @@ export default {
       tableLoading: false,
       isFirstLoad: true,
       rowKey: "id",
-      total: 0
+      total: 0,
+      detailData: {},
+      isShow: false,
+      isEdit: false
     }
   },
   computed: {
@@ -154,10 +157,10 @@ export default {
       })
     },
     timestampToTime(timestamp) {
-        var date = new Date(timestamp);//时间戳为10位需*1000，时间戳为13位的话不需乘1000
-        var Y = date.getFullYear() + '-';
-        var M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1):date.getMonth()+1) + '-';
-        var D = (date.getDate()< 10 ? '0'+date.getDate():date.getDate())+ ' ';
+        let date = new Date(timestamp);//时间戳为10位需*1000，时间戳为13位的话不需乘1000
+        let Y = date.getFullYear() + '-';
+        let M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1):date.getMonth()+1) + '-';
+        let D = (date.getDate()< 10 ? '0'+date.getDate():date.getDate())+ ' ';
         return Y+M+D;
     },
     pageChange(page) {
@@ -216,7 +219,6 @@ export default {
       let date = new Date();
       let baseyear = 2020;
       let current = date.getFullYear(); //获取完整的年份(4位)
-      console.log(current)
       for(let i = baseyear;i < (current+2); i++){
         this.yearList.push({
           id: i,
@@ -226,7 +228,30 @@ export default {
       this.query.year = current
     },
     addNew(){
-      this.$refs.holidayDetail.visible=true
+      this.isEdit = false
+      this.detailData={
+        year: this.query.year,
+        name:"",
+        duration: 0,
+        dayCode: SYS_CONST.HOLIDAY_TYPE.HOLIDAY
+      }
+      if(!this.isShow){
+        this.isShow = true
+      }else{
+        this.$refs.holidayDetail.visible = true
+      }
+    },
+    editRecord(record){
+      this.detailData = record
+      this.isEdit = true
+      if(!this.isShow){
+        this.isShow = true
+      }else{
+        this.$refs.holidayDetail.visible = true
+      }
+    },
+    flushData(){
+      this.loadData()
     }
   },
   mounted() {