节日 新增编辑

src/views/activity/component/holiday-dialog.vue

 <template>
-  <el-dialog title="新增节日" :visible.sync="visible" width="600px" @close="onClose">
+  <el-dialog :title="isEdit ? '编辑' : '新增节日'" :visible.sync="visible" width="600px" @close="onClose">
     <el-form :model="submitData" :rules="rules" ref="submitData" label-width="95px">
-      <el-row type="flex" style="background: #f7f8fa; border-radius: 2px; height: 32px; margin-bottom: 20px" align="middle">
+      <el-row type="flex" style="background: #f7f8fa; border-radius: 2px; height: 32px; margin-bottom: 20px" align="middle" v-if="!isEdit">
         <i class="el-icon-warning" style="padding: 0 9px; color: #2f54eb"></i>
         <div style="font-size: 12px; color: #303133">新增节日后，则在商户后台节日活动弹框中展示</div>
       </el-row>
       <el-form-item label="节日分类" prop="categoryCode">
-        <el-select v-model="submitData.categoryCode" clearable placeholder="请选择分类" style="width:465px">
+        <el-select v-model="submitData.categoryCode" clearable placeholder="请选择分类" style="width: 465px">
           <el-option v-for="item in categoryList" :key="item.activityCategoryId" :label="item.categoryName" :value="item.activityCategoryId"> </el-option>
         </el-select>
       </el-form-item>
 
       <el-form-item label="节日名称" prop="name">
-        <el-input v-model="submitData.name" placeholder="请输入节日名称，不超过 10 个字" maxlength="10" clearable></el-input>
+        <el-input v-model="submitData.name" placeholder="请输入节日名称，不超过 10 个字" maxlength="10" clearable :disabled="isEdit"></el-input>
       </el-form-item>
 
       <el-form-item label="节日日期" prop="customFlag">
-        <el-radio v-model="submitData.customFlag" label="0">固定日期</el-radio>
-        <el-radio v-model="submitData.customFlag" label="1">灵活日期</el-radio>
+        <el-radio v-model="submitData.customFlag" :label="0" :disabled="isEdit">固定日期</el-radio>
+        <el-radio v-model="submitData.customFlag" :label="1" :disabled="isEdit">灵活日期</el-radio>
       </el-form-item>
 
       <el-form-item label="选择日期" prop="date" v-if="submitData.customFlag == 0">
         <div>
-          <el-radio v-model="submitData.dateType" label="1">
+          <el-radio v-model="submitData.dateType" :label="1" :disabled="isEdit">
             <div style="display: inline-block">阳历</div>
             <el-form-item v-if="submitData.dateType == 1" label="" prop="date" style="margin-left: 16px; display: inline-block">
-              <el-date-picker v-model="submitData.date" type="date" placeholder="选择日期" format="MM-dd"> </el-date-picker>
+              <el-date-picker v-model="submitData.date" type="date" placeholder="选择日期" format="MM-dd" :disabled="isEdit"> </el-date-picker>
             </el-form-item>
           </el-radio>
         </div>
 
-        <div style="padding-top:10px">
-          <el-radio v-model="submitData.dateType" label="2">
+        <div style="padding-top: 10px">
+          <el-radio v-model="submitData.dateType" :label="2" :disabled="isEdit">
             <div style="display: inline-block">农历</div>
             <el-form-item v-if="submitData.dateType == 2" label="" prop="date" style="margin-left: 16px; display: inline-block">
-              <el-date-picker v-model="submitData.date" type="date" placeholder="选择日期" format="MM-dd"> </el-date-picker>
+              <el-date-picker v-model="submitData.date" type="date" placeholder="选择日期" format="MM-dd" :disabled="isEdit"> </el-date-picker>
             </el-form-item>
           </el-radio>
         </div>
@@ -43,19 +43,19 @@
       <el-form-item label="选择日期" v-if="submitData.customFlag == 1" prop="holidaysDate">
         <el-row type="flex" align="middle">
           <el-form-item prop="month" style="margin: 0 10px 0 0">
-            <el-select v-model="submitData.month" placeholder="请选择月份" class="selector-item">
+            <el-select v-model="submitData.month" placeholder="请选择月份" class="selector-item" :disabled="isEdit">
               <el-option v-for="item in months" :key="item.key" :label="item.value" :value="item.key"> </el-option>
             </el-select>
           </el-form-item>
 
           <el-form-item prop="week" style="margin: 0 10px 0 0">
-            <el-select v-model="submitData.week" placeholder="请选择周" class="selector-item">
+            <el-select v-model="submitData.week" placeholder="请选择周" class="selector-item" :disabled="isEdit">
               <el-option v-for="item in weeks" :key="item.key" :label="item.value" :value="item.key"> </el-option>
             </el-select>
           </el-form-item>
 
           <el-form-item prop="weekDay" style="margin: 0 10px 0 0">
-            <el-select v-model="submitData.weekDay" placeholder="请选择星期" class="selector-item">
+            <el-select v-model="submitData.weekDay" placeholder="请选择星期" class="selector-item" :disabled="isEdit">
               <el-option v-for="item in weekDays" :key="item.key" :label="item.value" :value="item.key"> </el-option>
             </el-select>
           </el-form-item>
@@ -79,19 +79,20 @@
 <script>
 // import calendar from '@/utils/calendar.js';
 import fetch from '@/api/operation.js';
-const { addHoliday, getHolidayCategoryList } = fetch;
+const { addHoliday, getHolidayCategoryList,editHoliday } = fetch;
 export default {
   name: 'HolidayDialog',
   props: {
-    visible: Boolean
+    visible: Boolean,
+    data: Object
   },
   data() {
     return {
       submitData: {
         categoryCode: '', // 节日类目id
         name: '',
-        customFlag: '0',
-        dateType: '1',
+        customFlag: 0,
+        dateType: 1,
         holidaysDate: '',
         sort: '',
 
@@ -281,7 +282,7 @@ export default {
       this.categoryList = result;
     },
     onClose() {
-      this.feeItem = {};
+      this.data = {};
       this.enterpriseParams = {
         pageSize: 20,
         currentPage: 1,
@@ -299,15 +300,17 @@ export default {
             name,
             customFlag,
             dateType,
-            sort
+            sort,
+            holidaysId: this.data.holidaysId || ''
           };
           if (customFlag == 1) {
             params.holidaysDate = month + '-' + week + '-' + weekDay;
           } else {
             params.holidaysDate = date.getMonth() + 1 + '-' + date.getDate();
           }
-          addHoliday(params).then(() => {
-            this.$message.success('添加成功');
+
+          (this.isEdit?editHoliday:addHoliday)(params).then(() => {
+            this.$message.success(this.isEdit ? '保存成功' : '添加成功');
             this.onClose();
             this.$emit('change', params);
           });
@@ -318,28 +321,48 @@ export default {
     }
   },
   watch: {
-    visible: {
+    data: {
       handler(n) {
-        if (n) {
-          this.getCategoryList();
+        this.isEdit = n && n.categoryCode ? true : false;
+        if (n && n.categoryCode) {
           this.submitData = {
-            categoryCode: '', // 节日类目id
-            name: '',
-            customFlag: '0',
-            dateType: '1',
-            holidaysDate: '',
-            sort: ''
+            categoryCode: n.categoryCode, // 节日类目id
+            name: n.name,
+            customFlag: n.customFlag,
+            dateType: n.dateType,
+            holidaysDate: n.holidaysDate,
+            sort: n.sort
           };
+          let arr = (n.holidaysDate || '').split('-');
+          if (n.customFlag == 1) {
+            this.submitData.month = arr[0];
+            this.submitData.week = arr[1];
+            this.submitData.weekDay = arr[2];
+          } else {
+            this.submitData.date = new Date(2000, +arr[0] - 1, +arr[1]);
+          }
         } else {
           this.submitData = {
             categoryCode: '', // 节日类目id
             name: '',
-            customFlag: '0',
-            dateType: '1',
+            customFlag: 0,
+            dateType: 1,
             holidaysDate: '',
-            sort: ''
+            sort: '',
+            month: '',
+            week: '',
+            weekDay: '',
+            date: null
           };
         }
+        this.$refs['submitData'].resetFields();
+      }
+    },
+    visible: {
+      handler(n) {
+        if (n) {
+          this.getCategoryList();
+        }
       }
     }
   }

src/views/activity/holiday-manage.vue

@@ -10,7 +10,7 @@
       </el-row>
       <el-row type="flex" align="middle">
         <el-button @click="categoryManage">分类管理</el-button>
-        <el-button type="primary" @click="holidayDialogVisible = true">新增节日</el-button>
+        <el-button type="primary" @click="addHoliday()">新增节日</el-button>
       </el-row>
     </el-row>
 
@@ -28,6 +28,7 @@
       <el-table-column label="操作" min-width="110px">
         <template slot-scope="{ row }">
           <el-row type="flex">
+            <el-button type="text" @click="edit(row)">编辑</el-button>
             <el-button type="text" @click="del(row)">删除</el-button>
           </el-row>
         </template>
@@ -40,7 +41,7 @@
 
     <holiday-category-dialog :visible.sync="holidayCategoryDialogVisible" @refresh="getCategoryList" v-if="holidayCategoryDialogVisible"></holiday-category-dialog>
 
-    <holiday-dialog :visible.sync="holidayDialogVisible" @change="loadData" v-if="holidayDialogVisible"></holiday-dialog>
+    <holiday-dialog :visible.sync="holidayDialogVisible" @change="loadData" :data.sync="editItem"></holiday-dialog>
   </div>
 </template>
 
@@ -48,7 +49,7 @@
 import fetch from '@/api/operation.js';
 import util from '@/filters/index.js';
 const { formatDate2 } = util;
-const { getPageHolidays, delHoliday, getHolidayCategoryList } = fetch;
+const { getPageHolidays, delHoliday, getHolidayCategoryList,getHolidayDetail } = fetch;
 import holidayCategoryDialog from './component/holiday-category-dialog.vue';
 
 import holidayDialog from './component/holiday-dialog.vue';
@@ -120,12 +121,20 @@ export default {
           this.loadData();
         });
     },
+    async edit(item){
+      let detail = await getHolidayDetail({
+        holidaysId: item.holidaysId || ''
+      });
+      console.log("detail----->",detail.result);
+      this.holidayDialogVisible = true;
+      this.editItem = detail.result;
+    },
+    addHoliday(){
+      this.holidayDialogVisible = true;
+      this.editItem = {};
+    },
     categoryManage() {
       this.holidayCategoryDialogVisible = true;
-    },
-    addTenant() {
-      this.feeItem = {};
-      this.feeDialogVisible = true;
     }
   },
   filters: {