update: 编辑/批量编辑

src/api/target-manage-app.js

@@ -30,6 +30,7 @@ let api = {
   getYearList: '/setting/get-year-list', // 获取年份
   getStorePerformanceList: '/setting/list-store-performance', // 指标设置-已设置门店指标列表
   getNoStorePerformanceList: '/setting/list-no-store-performance', // 指标设置-未设置门店指标列表
+  getSingleStorePerformanceDetail: '/setting/see-single-store-performance', // 指标设置-回显编辑单个门店指标
   saveStorePerformance: { // 指标设置-新建门店指标
     url: '/setting/add-store-performance',
     method: 'post',
@@ -56,6 +57,7 @@ let api = {
     useFormData: true
   },
   getTagList: '/setting/list-store-tag', // 获取标签
+  delStorePerformance: '/setting/del-store-performance', // 指标设置-删除门店指标
 };
 
 api = getFetch(api, '/hb-app-performance-web');

src/views/apps/target-manage/MonthTarget.vue

@@ -2,8 +2,16 @@
   <div id="month-target">
     <div class="target-box" v-for="item in tableData" :key="item.num">
       <header>{{ item.head }}</header>
-      <div :class="{ content: true, red: isAllNot ? false : (isAllRed || month < item.num) && !item.val }">
-        <el-input-number v-model="item.val" :controls="false" placeholder="请输入" @change="$emit('change', tableData)"></el-input-number>
+      <div :class="{ content: true, red: isTrue(item) }">
+        <span v-if="isBatch && !isTrue(item)">无需设置</span>
+        <el-input-number
+          v-else
+          v-model="item.val"
+          :controls="false"
+          placeholder="请输入"
+          @change="$emit('change', tableData)"
+          :disabled="item.disabled">
+        </el-input-number>
       </div>
     </div>
   </div>
@@ -20,23 +28,27 @@ export default {
     year: {
       type: [ String, Number ],
       default: '2020'
+    },
+    isBatch: {
+      type: Boolean,
+      default: false
     }
   },
   data() {
     return {
       tableData: [
-        { head: '一月', num: '01', val: 0 },
-        { head: '二月', num: '02', val: 0 },
-        { head: '三月', num: '03', val: 0 },
-        { head: '四月', num: '04', val: 0 },
-        { head: '五月', num: '05', val: 0 },
-        { head: '六月', num: '06', val: 0 },
-        { head: '七月', num: '07', val: 0 },
-        { head: '八月', num: '08', val: 0 },
-        { head: '九月', num: '09', val: 0 },
-        { head: '十月', num: '10', val: 0 },
-        { head: '十一月', num: '11', val: 0 },
-        { head: '十二月', num: '12', val: 0 },
+        { head: '一月', num: '01', val: 0, disabled: false },
+        { head: '二月', num: '02', val: 0, disabled: false },
+        { head: '三月', num: '03', val: 0, disabled: false },
+        { head: '四月', num: '04', val: 0, disabled: false },
+        { head: '五月', num: '05', val: 0, disabled: false },
+        { head: '六月', num: '06', val: 0, disabled: false },
+        { head: '七月', num: '07', val: 0, disabled: false },
+        { head: '八月', num: '08', val: 0, disabled: false },
+        { head: '九月', num: '09', val: 0, disabled: false },
+        { head: '十月', num: '10', val: 0, disabled: false },
+        { head: '十一月', num: '11', val: 0, disabled: false },
+        { head: '十二月', num: '12', val: 0, disabled: false },
       ],
       thisYear: new Date().getFullYear(),
       month: new Date().getMonth()
@@ -49,6 +61,9 @@ export default {
     validate() {
       // eslint-disable-next-line
       return this.tableData.some(item => this.isAllNot ? false : (this.isAllRed || this.month < item.num) && !item.val);
+    },
+    isTrue(item) {
+      return this.isAllNot ? false : (this.isAllRed || this.month < item.num) && !item.val;
     }
   },
   computed: {
@@ -57,6 +72,21 @@ export default {
     },
     isAllNot() {
       return this.year < this.thisYear;
+    },
+  },
+  watch: {
+    data(newV) {
+      if (!Array.isArray(newV)) return;
+
+      newV.forEach(item => {
+        const { performanceYm, performanceValue } = item;
+        let month = performanceYm.split('-')[1] - 1;
+        let table = this.tableData[month];
+        table.val = performanceValue || 0;
+
+        // 以前的月份，有数据不能编辑
+        if (performanceValue && !(this.isAllNot ? false : (this.isAllRed || this.month < table.num))) table.disabled = true;
+      });
     }
   }
 };

src/views/apps/target-manage/edit-store-quota.vue

@@ -39,7 +39,7 @@
         <span v-else>{{ targetStoreInfoIds.map(item => item.storeName).join('；') }}</span>
       </el-form-item>
 
-      <el-form-item label="指标类型（必填一项）" prop="type" v-if="!edit">
+      <el-form-item label="指标类型（必填一项）" prop="type" v-if="!edit || [ '1', '2' ].includes(edit)">
         <el-checkbox v-model="form.performanceFlag" :true-label="1" :false-label="0">
           业绩指标（元）
           <el-select v-model="form.performanceSubType" style="width: 240px;margin: 0 20px 20px 48px" :disabled="form.performanceFlag == 0">
@@ -47,7 +47,13 @@
           </el-select>
           <span class="color2">设置日指标，则需先设置月指标，再设置门店日指标额。指标会计算每日完成度。</span>
         </el-checkbox>
-        <month-target ref="monthTargetRef1" v-show="form.performanceFlag == 1" :year="form.performanceYear" :data="performanceCallback" @change="val => monthTargetChange(val, 'performanceVal')" />
+        <month-target
+          ref="monthTargetRef1"
+          v-show="form.performanceFlag == 1"
+          :is-batch="edit === '2'"
+          :year="form.performanceYear"
+          :data="performanceCallback"
+          @change="val => monthTargetChange(val, 'performanceVal')" />
 
         <el-checkbox v-model="form.addMemberFlag" :true-label="1" :false-label="0">
           新增会员指标（人）
@@ -57,10 +63,16 @@
           <span class="color2">设置日指标，则需先设置月指标，再设置门店日指标额。指标会计算每日完成度。</span>
         </el-checkbox>
 
-        <month-target ref="monthTargetRef2" v-show="form.addMemberFlag == 1" :year="form.performanceYear" :data="addMemberCallback" @change="val => monthTargetChange(val, 'addMemberVal')" />
+        <month-target
+          ref="monthTargetRef2"
+          v-show="form.addMemberFlag == 1"
+          :is-batch="edit === '2'"
+          :year="form.performanceYear"
+          :data="addMemberCallback"
+          @change="val => monthTargetChange(val, 'addMemberVal')" />
       </el-form-item>
 
-      <el-form-item label="指标编辑权限" prop="storeEdit">
+      <el-form-item label="指标编辑权限" prop="storeEdit" v-if="!edit || edit === '3'">
         <el-checkbox v-model="form.storeEdit" :true-label="1" :false-label="0">店长可修改指标</el-checkbox>
       </el-form-item>
 
@@ -77,7 +89,7 @@ import customerStoreGroup from '@/components/app/my-customer/customer-store-grou
 import customerStore from '@/components/app/my-customer/customer-store.vue';
 import MonthTarget from './MonthTarget.vue';
 import fetch from '@/api/target-manage-app.js';
-const { getYearList, saveStorePerformance, batchSettingRight, batchEditStorePerformance, editStorePerformance } = fetch;
+const { getYearList, saveStorePerformance, batchSettingRight, batchEditStorePerformance, editStorePerformance, getSingleStorePerformanceDetail } = fetch;
 
 export default {
   name: 'EditStoreQuota',
@@ -132,13 +144,23 @@ export default {
   created() {
     let bread = [ { name: '指标设置', path: '/quota-set' }, { name: '新建指标' } ];
     // 修改面包屑
-    const { applicationId, edit, year, storeEdit } = this.$route.query;
-    bread[0].path += `?applicationId=${applicationId}`;
-    if (edit === '3') { // 批量权限
+    const { applicationId, edit, year, storeEdit, storeInfoId, storeName, tab } = this.$route.query;
+    bread[0].path += `?applicationId=${applicationId}&tab=${tab}`;
+    bread[1].name = edit ? '编辑指标' : '新建指标';
+
+    if (edit === '1') { // 单个编辑
+      this.form.performanceYear = year;
+      this.targetStoreInfoIds = [ { storeName, storeInfoId } ];
+      this.callback({ year, storeInfoId });
+    } else if (edit === '2') { // 批量编辑
+      this.targetStoreInfoIds = JSON.parse(localStorage.getItem('targetStoreInfoIds'));
+      this.form.performanceYear = year;
+    } else if (edit === '3') { // 批量权限
       this.targetStoreInfoIds = JSON.parse(localStorage.getItem('targetStoreInfoIds'));
       this.form.performanceYear = year;
       this.form.storeEdit = Number(storeEdit);
     }
+
     this.edit = edit;
     this.$emit('change-nav', bread);
   },
@@ -147,6 +169,25 @@ export default {
     this.getYearList();
   },
   methods: {
+    // 编辑回显
+    callback({ year, storeInfoId }) {
+      const { staffId, wxEnterpriseId } = JSON.parse(localStorage.getItem('haoBanUser'));
+      let params = {
+        storeInfoId,
+        wxEnterpriseId,
+        performanceYear: year,
+        submitStaffId: staffId,
+        enterpriseId: this.brandId
+      };
+      getSingleStorePerformanceDetail(params, { headers: { sign: this.brandId } })
+        .then(res => {
+          const { addMemebrValue, performanceValue } = res.result;
+          this.form = { ...this.form, ...res.result };
+          console.log(this.form);
+          addMemebrValue && (this.addMemberCallback = JSON.parse(addMemebrValue));
+          performanceValue && (this.performanceCallback = JSON.parse(performanceValue));
+        });
+    },
     // 获取组件的值
     checkGroupIds(val) {
       this.form.storeValue = JSON.parse(JSON.stringify(val));
@@ -165,15 +206,37 @@ export default {
 
         this.loading = true;
         const { staffName, staffId, wxEnterpriseId } = JSON.parse(localStorage.getItem('haoBanUser'));
-        let params;
+        let params = {
+          wxEnterpriseId,
+          submitStaffName: staffName,
+          submitStaffId: staffId,
+          enterpriseId: this.brandId,
+        };
 
-        if (this.edit === '3') { // 批量权限
-          console.log(this.targetStoreInfoIds);
+        if (this.edit === '1') { // 单个编辑
+          params = {
+            ...this.form,
+            ...params,
+            storeEdit,
+            performanceValue: this.filterTargetVal('performanceVal', performanceYear),
+            addMemebrValue: this.filterTargetVal('addMemberVal', performanceYear),
+            storeInfoId: this.targetStoreInfoIds[0].storeInfoId,
+            storeMode: undefined,
+            storeValue: undefined
+          };
+        } else if (this.edit === '2') { // 批量编辑
+          params = {
+            ...this.form,
+            ...params,
+            performanceValue: this.filterTargetVal('performanceVal', performanceYear),
+            addMemebrValue: this.filterTargetVal('addMemberVal', performanceYear),
+            storeInfoIds: this.targetStoreInfoIds.map(item => item.storeInfoId).join(','),
+            storeMode: undefined,
+            storeValue: undefined
+          };
+        } else if (this.edit === '3') { // 批量权限
           params = {
-            wxEnterpriseId,
-            submitStaffName: staffName,
-            submitStaffId: staffId,
-            enterpriseId: this.brandId,
+            ...params,
             performanceYear,
             storeEdit,
             storeInfoIds: this.targetStoreInfoIds.map(item => item.storeInfoId).join(','),
@@ -181,10 +244,7 @@ export default {
         } else if (!this.edit) { // 新增
           params = {
             ...this.form,
-            wxEnterpriseId,
-            submitStaffName: staffName,
-            submitStaffId: staffId,
-            enterpriseId: this.brandId,
+            ...params,
             // eslint-disable-next-line
             storeValue: storeValue.map(item => storeMode == 1 ? item.storeGroupId : item.storeInfoId).join(','),
             performanceValue: this.filterTargetVal('performanceVal', performanceYear),

src/views/apps/target-manage/quota-set.vue

@@ -82,8 +82,8 @@
         </div>
 
         <span>
-          <el-checkbox v-model="search1.noPerformanceFlag" :true-label="1" :false-label="0" @change="searchChange">未设置业绩指标门店</el-checkbox>
-          <el-checkbox v-model="search1.noAddMemberFlag" :true-label="1" :false-label="0" @change="searchChange">未设置新增会员指标门店</el-checkbox>
+          <el-checkbox v-model="search1.noPerformanceFlag" :true-label="1" :false-label="0" @change="val => checkboxChange(val, 'noPerformanceFlag')">未设置业绩指标门店</el-checkbox>
+          <el-checkbox v-model="search1.noAddMemberFlag" :true-label="1" :false-label="0" @change="val => checkboxChange(val, 'noAddMemberFlag')">未设置新增会员指标门店</el-checkbox>
         </span>
       </div>
 
@@ -131,9 +131,23 @@
         </el-table-column>
 
         <el-table-column prop="date" label="操作">
-          <template>
-            <el-button type="text">编辑</el-button>
-            <el-button type="text" v-show="activeName === '0'">删除</el-button>
+          <template slot-scope="{row}">
+            <el-button
+              type="text"
+              @click="$router.push({
+                path: '/edit-store-quota',
+                query: {
+                  applicationId,
+                  tab: activeName,
+                  storeInfoId: row.storeInfoId,
+                  storeName: row.storeName,
+                  edit: '1',
+                  year: search.performanceYear
+                }
+              })">
+              编辑
+            </el-button>
+            <el-button type="text" v-show="activeName === '0'" @click="delStorePerformance(row.storeInfoId)">删除</el-button>
           </template>
         </el-table-column>
       </el-table>
@@ -158,7 +172,7 @@
 import gicSelectGroupMult from '@/components/common/gic-select-group-mult.vue';
 import gicSelectTag from '@/components/common/gic-select-tag.vue';
 import fetch from '@/api/target-manage-app.js';
-const { getYearList, getStorePerformanceList, getNoStorePerformanceList } = fetch;
+const { getYearList, getStorePerformanceList, getNoStorePerformanceList, delStorePerformance } = fetch;
 
 export default {
   name: 'QuotaSet',
@@ -184,8 +198,8 @@ export default {
         storeParam: '',
       },
       search1: {
-        noPerformanceFlag: '0',
-        noAddMemberFlag: '0'
+        noPerformanceFlag: 1,
+        noAddMemberFlag: 0
       },
 
       multipleSelection: [],
@@ -258,9 +272,22 @@ export default {
 
     batchOperation(val) {
       switch (val) {
-        case 1:
+        case 1: // 新建
           return this.$router.push({ path: '/edit-store-quota', query: { applicationId: this.applicationId } });
-        case 3:
+        case 2: // 批量编辑
+          if (!this.multipleSelection || !this.multipleSelection.length) return this.$message.warning('请选择指标门店');
+
+          localStorage.setItem('targetStoreInfoIds', JSON.stringify(this.multipleSelection));
+          return this.$router.push({
+            path: '/edit-store-quota',
+            query: {
+              applicationId: this.applicationId,
+              tab: this.activeName,
+              edit: '2',
+              year: this.search.performanceYear
+            }
+          });
+        case 3: // 批量权限
           if (!this.multipleSelection || !this.multipleSelection.length) return this.$message.warning('请选择指标门店');
           // 判断是否一致
           let edit = this.multipleSelection[0].storeEdit;
@@ -302,15 +329,44 @@ export default {
     searchChange() {
       this.handleCurrentChange(1);
     },
+    // 未设置checkbox变更
+    checkboxChange(val, type) {
+      const { noPerformanceFlag, noAddMemberFlag } = this.search1;
+      if (noPerformanceFlag === 0 && noAddMemberFlag === 0) {
+        this.search1[type] = 1;
+        return this.$message.warning('请至少勾选一项');
+      }
+      this.searchChange();
+    },
     // 门店分组change
     checkGroupIds(nodes) {
-      console.log(nodes);
       this.search.storeParam = nodes.map(item => item[this.search.storeType === '1' ? 'storeGroupId' : 'storeTagId']).join(',');
       this.searchChange();
     },
     storeChange() {
       this.search.storeParam = '';
       this.searchChange();
+    },
+    // 删除
+    delStorePerformance(storeInfoId) {
+      this.$confirm('确定删除该指标门店?', '提示', {
+        confirmButtonText: '确定删除',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        let params = {
+          storeInfoId,
+          performanceYear: this.search.performanceYear
+        };
+        delStorePerformance(params, { headers: { sign: this.brandId } })
+          .then(res => {
+            this.$message.success('删除成功');
+            if (this.tableData.length < 2 && this.page.pageNum > 1) {
+              --this.page.pageNum;
+            }
+            this.getData();
+          });
+      });
     }
   },
   filters: {