update: 静态+新建门店指标接口

src/api/target-manage-app.js

@@ -11,7 +11,7 @@ import getFetch from './get-fetch.js';
 
 let api = {
   // 指标管理
-  getTargetList: '/', // 获取指标列表
+  getTargetList: '/perfromance/total-performance-list', // 获取指标列表
 
   getDaySet: '/', // 获取日指标设置
   saveDaySet: {  // 保存日指标设置
@@ -27,8 +27,15 @@ let api = {
     useFormData: true,
     useIntercept: false
   },
+  getYearList: '/setting/get-year-list', // 获取年份
+  saveStorePerformance: { // 指标设置-新建门店指标
+    url: '/setting/add-store-performance',
+    method: 'post',
+    useFormData: true,
+    useIntercept: true
+  },
 };
 
-api = getFetch(api, '/hb-app-customer-web');
+api = getFetch(api, '/hb-app-performance-web');
 
 export default api;

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

+<template>
+  <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>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'MonthTarget',
+  props: {
+    data: {
+      type: Object,
+      default: () => []
+    },
+    year: {
+      type: [ String, Number ],
+      default: '2020'
+    }
+  },
+  data() {
+    return {
+      tableData: [
+        { head: '一月', num: '01', val: undefined },
+        { head: '二月', num: '02', val: undefined },
+        { head: '三月', num: '03', val: undefined },
+        { head: '四月', num: '04', val: undefined },
+        { head: '五月', num: '05', val: undefined },
+        { head: '六月', num: '06', val: undefined },
+        { head: '七月', num: '07', val: undefined },
+        { head: '八月', num: '08', val: undefined },
+        { head: '九月', num: '09', val: undefined },
+        { head: '十月', num: '10', val: undefined },
+        { head: '十一月', num: '11', val: undefined },
+        { head: '十二月', num: '12', val: undefined },
+      ],
+      thisYear: new Date().getFullYear(),
+      month: new Date().getMonth()
+    };
+  },
+  mounted() {
+    this.$emit('change', this.tableData);
+  },
+  methods: {
+    validate() {
+      // eslint-disable-next-line
+      return this.tableData.some(item => this.isAllNot ? false : (this.isAllRed || this.month < item.num) && !item.val);
+    }
+  },
+  computed: {
+    isAllRed() {
+      return this.year > this.thisYear;
+    },
+    isAllNot() {
+      return this.year < this.thisYear;
+    }
+  }
+};
+</script>
+
+<style lang="less">
+#month-target {
+  display: flex;
+  flex-wrap: wrap;
+  margin-bottom: 30px;
+  width: 962px;
+  color: #303133;
+  .target-box {
+    width: 160px;
+    header {
+      height: 44px;
+      line-height: 44px;
+      text-indent: 22px;
+      background-color: #EBECF0;
+    }
+    .content {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      height: 62px;
+      border-bottom: 1px solid #DCDFE6;
+    }
+    .red .el-input__inner {
+      border-color: #F5222D;
+    }
+  }
+  .el-input-number {
+    width: 120px;
+    &:before {
+      content: '￥';
+      position: absolute;
+      top: 0px;
+      left: 11px;
+      z-index: 3;
+      font-size: 14px;
+      color: #303133;
+    }
+    .el-input__inner {
+      text-align: left;
+      padding-left: 30px;
+    }
+  }
+}
+</style>
\ No newline at end of file

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

@@ -6,3 +6,199 @@
  * @LastEditors: 无尘
  * @LastEditTime: 2020-11-09 10:41:18
 -->
+<template>
+  <div class="common-app-right">
+    <el-alert
+      show-icon
+      :closable="false">
+      <template slot="title">
+        <div>1.下发类型修改后、日权重/日指标修改后、指标设置立即生效，修改后数据统计次日生效</div>
+        <div>2.修改当月指标会导致已完善的日指标重新下发及完善。请谨慎设置</div>
+      </template>
+    </el-alert>
+
+    <el-form :model="form" ref="form" :rules="rules" label-width="180px" hide-required-asterisk>
+      <el-form-item label="选择年份" prop="performanceYear">
+        <el-select v-model="form.performanceYear" placeholder="请选择年份">
+          <el-option v-for="item in yearList" :key="item" :label="item" :value="item"></el-option>
+        </el-select>
+      </el-form-item>
+
+      <el-form-item label="选择门店" prop="storeValue">
+        <el-radio-group v-model="form.storeMode">
+          <el-radio :label="0">所有门店</el-radio>
+          <el-radio :label="1">选择分组</el-radio>
+          <el-radio :label="2">选择门店</el-radio>
+        </el-radio-group>
+
+        <customer-store-group v-if="form.storeMode == 1" :brand-id="brandId" :select-group="storeValue" @checkGroupIds="checkGroupIds"></customer-store-group>
+        <customer-store v-if="form.storeMode == 2" :brand-id="brandId" :select-store="storeValue" @checkStoreIds="checkGroupIds"></customer-store>
+      </el-form-item>
+
+      <el-form-item label="指标类型（必填一项）" prop="type">
+        <el-checkbox v-model="form.performanceFlag" :true-label="1" :false-label="0">
+          业绩指标（元）
+          <el-select v-model="form.performaceSubType" style="width: 240px;margin: 0 20px 20px 48px" :disabled="form.performanceFlag == 0">
+            <el-option v-for="item in targetList" :key="item.name" :label="item.name" :value="item.val"></el-option>
+          </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')" />
+
+        <el-checkbox v-model="form.addMemberFlag" :true-label="1" :false-label="0">
+          新增会员指标（人）
+          <el-select v-model="form.addMemebrSubType" style="width: 240px;margin: 0 20px 20px 21px" :disabled="form.addMemberFlag == 0">
+            <el-option v-for="item in targetList" :key="item.name" :label="item.name" :value="item.val"></el-option>
+          </el-select>
+          <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')" />
+      </el-form-item>
+
+      <el-form-item label="指标编辑权限" prop="storeEdit">
+        <el-checkbox v-model="storeEdit" :true-label="1" :false-label="0">店长可修改指标</el-checkbox>
+      </el-form-item>
+
+      <el-form-item label="">
+        <el-button type="primary" @click="confirm" :loading="loading">保存</el-button>
+      </el-form-item>
+    </el-form>
+
+  </div>
+</template>
+
+<script>
+import customerStoreGroup from '@/components/app/my-customer/customer-store-group.vue';
+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 } = fetch;
+
+export default {
+  name: 'EditStoreQuota',
+  components: { customerStoreGroup, customerStore, MonthTarget },
+  props: {
+    brandId: {
+      type: String,
+      default: ''
+    }
+  },
+  data() {
+    const storeCheck = (rule, value, callback) => {
+      this.$nextTick(() => {
+        const { storeMode, storeValue } = this.form;
+        if (storeMode === 0) callback();
+        if (!storeValue || !storeValue.length) callback(new Error('请选择分组或门店'));
+        callback();
+      });
+    };
+    return {
+      loading: false,
+      form: {
+        performanceYear: '', // 年
+        storeMode: 0, // 0,所有门店，1选择分组，2部门门店
+        storeValue: [], // 选择的值aaa,bbb,ccc
+        storeEdit: 0, // 1门店可编辑，0不可
+        performanceFlag: 0, // 业绩指标 1已勾选
+        performaceSubType: 1, // 业绩指标：1，日权重，2，指标额
+        addMemberFlag: 0, // 新增会员指标1已勾选
+        addMemebrSubType: 1, // 新增会员指标：1，日权重，2，指标额
+      },
+      rules: {
+        performanceYear: [ { required: true, message: '请选择年份', trigger: 'blur' } ],
+        storeValue: [ { required: true, validator: storeCheck, trigger: [ 'blur', 'change' ] } ],
+      },
+
+      targetList: [
+        { name: '日权重', val: 1 },
+        { name: '指标额', val: 2 }
+      ],
+      yearList: [],
+
+      performanceCallback: null, // 回显数据
+      performanceVal: null,
+      addMemberCallback: null, // 回显数据
+      addMemberVal: null,
+    };
+  },
+  mounted() {
+    this.$emit('showTab', '/quota-set');
+    let bread = [ { name: '指标设置', path: '/quota-set' }, { name: '编辑指标' } ];
+    // 修改面包屑
+    this.$emit('change-nav', bread);
+    this.getYearList();
+  },
+  methods: {
+    // 获取组件的值
+    checkGroupIds(val) {
+      this.form.storeValue = JSON.parse(JSON.stringify(val));
+    },
+    // 返值
+    monthTargetChange(val, str) {
+      this[str] = val;
+    },
+    // 保存
+    confirm() {
+      this.$refs.form.validate(valid => {
+        if (!valid) return;
+        const { performanceFlag, addMemberFlag, storeValue, performanceYear } = this.form;
+        if (performanceFlag && this.$refs.monthTargetRef1.validate()) return this.$message.warning('请完善业绩指标');
+        if (addMemberFlag && this.$refs.monthTargetRef2.validate()) return this.$message.warning('请完善新增会员指标');
+
+        this.loading = true;
+        const { staffName, staffId, wxEnterpriseId } = JSON.parse(localStorage.getItem('haoBanUser'));
+        let params = {
+          ...this.form,
+          wxEnterpriseId,
+          submitStaffName: staffName,
+          submitStaffId: staffId,
+          enterpriseId: this.brandId,
+          storeValue: storeValue.map(item => item.storeGroupId).join(','),
+          performanceValue: this.filterTargetVal('performanceVal', performanceYear),
+          addMemebrValue: this.filterTargetVal('addMemberVal', performanceYear)
+        };
+        saveStorePerformance(params, { headers: { sign: this.brandId } })
+          .then(res => {
+            this.$message.success('保存成功');
+            this.$router.go(-1);
+          })
+          .finally(() => this.loading = false);
+      });
+    },
+    // 获取年份
+    getYearList() {
+      getYearList('', { headers: { sign: this.brandId } }).then(res => {
+        this.yearList = res.result || [];
+      });
+    },
+    // 转化传给后端的数据
+    filterTargetVal(type, year) {
+      if (!type) return '';
+      return JSON.stringify(this[type].map(item => {
+        return {
+          performanceYm: `${year.toString()}-${item.num}`,
+          performanceValue: item.val
+        };
+      }));
+    }
+  },
+  watch: {
+    brandId(val) {
+      // val && this.getData();
+    }
+  }
+};
+</script>
+
+<style lang="less" scoped>
+.el-alert {
+  width: 590px;
+  margin-bottom: 20px;
+  font-size: 13px;
+}
+.color2 {
+  color: #606266;
+  font-size: 12px;
+}
+</style>
\ No newline at end of file

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

@@ -17,7 +17,7 @@
           </div>
           <div class="apps-content-right">
             <transition name="fade" mode="out-in">
-              <router-view :brand-id="activeBrand" :active-group-id="activeGroup" :tab-type="activeTab" @showTab="showTab"> </router-view>
+              <router-view :brand-id="activeBrand" :active-group-id="activeGroup" :tab-type="activeTab" @showTab="showTab" @change-nav="changeNav"> </router-view>
             </transition>
           </div>
         </div>
@@ -54,10 +54,6 @@ export default {
         {
           name: '首页',
           path: '/app-list'
-        },
-        {
-          name: '指标管理',
-          path: ''
         }
       ],
       tabListData: [
@@ -143,6 +139,16 @@ export default {
       const that = this;
       that.activeTab = menuUrl;
       that.activeSelTab = menuUrl;
+    },
+    // 修改面包屑
+    changeNav(arr) {
+      this.navpath = [
+        {
+          name: '首页',
+          path: '/app-list'
+        },
+        ...arr
+      ];
     }
   },
   watch: {

src/views/apps/target-manage/perfect-sale-target.vue

@@ -7,13 +7,18 @@
  * @LastEditTime: 2020-11-12 11:32:52
 -->
 <template>
-  <div class="app-detail-wrap common-right-wrap">
+  <div class="common-app-right">
     <div class="task-set-content border-box">
+      <el-alert
+        title="提示：【导购总计】需大于等于【本店指标】金额。否则无法提交"
+        show-icon
+        :closable="false"
+        style="width: 450px;margin-bottom: 20px">
+      </el-alert>
       <div class="saler-set-title flex flex-space-between m-b-15">
-        <div class="saler-set-title_left">
-          <span>{{ clerkObj.yearMonth }}</span><span class="p-l-18">{{ clerkObj.storeName }}门店导购月指标详情</span>
+        <div class="colorFirst">
+          <span>{{ clerkObj.yearMonth }}</span><span class="p-l-18">{{ clerkObj.storeName }}</span>
         </div>
-        <!-- <div class="saler-set-title_right"><span>门店月指标：</span><el-input class="w-105 p-l-8" v-model="clerkObj.storePerformance" placeholder="请输入指标值" :disabled="clerkObj.settingAble == 0" @blur="value => inputMonthPerformance(value)"></el-input></div> -->
       </div>
       <div class="saler-set-table">
         <el-table class="select-table" ref="multipleTable" :span-method="objectSpanMethod" :data="tableData" tooltip-effect="dark" :style="{ width: '100%', minHeight: tableH }">
@@ -31,15 +36,15 @@
               </div>
             </template>
           </el-table-column>
-          <el-table-column label="总计=门店月指标" width="418px">
+          <el-table-column label="总计 >= 门店月指标" width="418px">
             <template >
               <div><span class="font-14 color-606266 text-left">总计</span><span class=" p-l-175 font-14 color-606266 text-left">门店月指标</span></div>
               <div style="margin-top: 4px;">
                 <el-input class="w-161" v-model="performanceSum" disabled>
                   <i slot="prefix" style="font-style: normal;position: absolute;top: 4px;left: 10px;">￥</i>
                 </el-input>
-                <span class="p-l-10 p-r-10">=</span>
-                <el-input class="w-161 p-l-8" maxlength="50" v-model="clerkObj.storePerformance" placeholder="请输入指标值" :disabled="clerkObj.settingAble == 0" @blur="value => inputMonthPerformance(value)">
+                <span class="p-l-10 p-r-10"> &gt;= </span>
+                <el-input class="w-161 p-l-8" maxlength="50" v-model="clerkObj.storePerformance" placeholder="请输入指标值" disabled>
                   <i slot="prefix" style="font-style: normal;position: absolute;top: 4px;left: 16px;">￥</i>
                 </el-input>
               </div>
@@ -47,7 +52,7 @@
           </el-table-column>
         </el-table>
       </div>
-      <div class="task-set-save text-center m-t-30">
+      <div class="task-set-save m-t-30">
         <el-button v-if="clerkObj.settingAble == 1" :disabled="!equalFlag ? true : false" type="primary" @click="saveSet">确认</el-button>
       </div>
     </div>
@@ -77,32 +82,29 @@ export default {
       activeBrand: this.brandId, // 商户(品牌) id
       operationStaffName: localStorage.getItem('userInfos') ? JSON.parse(localStorage.getItem('userInfos')).staffDTO['staffName'] : '',
       activeId: '4',
-      tableData: [],
+      tableData: [ {}, {} ],
       performanceSum: '0.00', // 总指标
       clerkObj: {
         storeId: '',
         storeName: '',
         yearMonth: '',
         settingAble: 1,
-        storePerformance: ''
+        storePerformance: 0
       },
-      equalFlag: true // 相等标志
+      equalFlag: false // 相等标志
     };
   },
   mounted() {
     let that = this;
-    document.documentElement.style.backgroundColor = '#f0f2f5';
-    that.$emit('showTab', '1');
+    this.$emit('showTab', '/target-list');
+    let bread = [ { name: '指标管理', path: '/target-list' }, { name: '查看门店', path: '/target-store' }, { name: '完善导购指标' } ];
+    // 修改面包屑
+    this.$emit('change-nav', bread);
 
     if (!!that.brandId) {
-      that.clerkObj.yearMonth = that.$route.query.yearMonth;
-      that.clerkObj.storeId = that.$route.query.storeId;
       that.getData();
     }
   },
-  destroyed() {
-    document.documentElement.style.backgroundColor = '#fff';
-  },
   methods: {
     objectSpanMethod({ row, column, rowIndex, columnIndex }) {
       const that = this;
@@ -138,16 +140,10 @@ export default {
       that.performanceSum = Number(sumData).toFixed(2);
       that.diffData();
     },
-    inputMonthPerformance: function(val) {
-      let that = this;
-      that.clerkObj.storePerformance = !!Number(that.clerkObj.storePerformance.replace(/[^\d.]/g, '')) ? that.clerkObj.storePerformance.replace(/[^\d+(.\d+)]/g, '') : '';
-      that.clerkObj.storePerformance = Number(that.clerkObj.storePerformance).toFixed(2);
-      that.diffData();
-    },
 
     diffData() {
       let that = this;
-      let dataFlag = Number(that.performanceSum) == Number(that.clerkObj.storePerformance);
+      let dataFlag = Number(that.performanceSum) > Number(that.clerkObj.storePerformance) || Number(that.performanceSum) == Number(that.clerkObj.storePerformance);
       if (!dataFlag) {
         that.equalFlag = false;
       } else {
@@ -257,7 +253,6 @@ export default {
 </script>
 <style type="text/scss" lang="scss" scoped>
 .task-set-content {
-  padding: 20px;
   box-sizing: border-box;
   .w-105 {
     width: 105px;
@@ -289,6 +284,10 @@ export default {
   .color-f5222d {
     color: #f5222d;
   }
+  .colorFirst {
+    color: #303133;
+    font-weight: 600;
+  }
 
 }
 </style>

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

@@ -8,8 +8,106 @@
 -->
 <!--  -->
 <template>
-  <div>
+  <div class="common-app-right" style="padding: 0" v-loading="loading">
+    <el-tabs v-model="activeName" @tab-click="handleClick">
+      <el-tab-pane label="已设置指标门店" name="first"></el-tab-pane>
+      <el-tab-pane label="未设置指标门店" name="second"></el-tab-pane>
+    </el-tabs>
 
+    <div class="list-content">
+      <div class="content-search">
+        <div>
+          <el-input
+            v-model.trim="search.input"
+            placeholder="请输入名称/code"
+            prefix-icon="el-icon-search"
+            @keydown.enter.native="searchStrategy"
+            clearable
+            @change="searchStrategy">
+          </el-input>
+
+          <el-select v-model="search.date" placeholder="选择年份" style="width: 128px"></el-select>
+
+          <span v-show="activeName === 'first'">
+            <el-select v-model="search.type" placeholder="全部指标类型">
+              <el-option label="业绩指标日权重" value="1"></el-option>
+              <el-option label="业绩指标日指标" value="2"></el-option>
+              <el-option label="新增会员日权重" value="3"></el-option>
+              <el-option label="新增会员日指标" value="4"></el-option>
+            </el-select>
+
+            <el-select v-model="search.auth" placeholder="全部编辑权限">
+              <el-option label="店长可编辑" value="1"></el-option>
+              <el-option label="店长不可编辑" value="0"></el-option>
+            </el-select>
+
+          </span>
+
+          <el-select v-model="search.state" style="width: 106px;margin-right: -1px">
+            <el-option label="门店分组" value="1"></el-option>
+            <el-option label="门店标签" value="2"></el-option>
+          </el-select>
+
+          <el-select v-model="search.store" placeholder="选择门店分组"></el-select>
+
+        </div>
+
+        <el-select placeholder="操作" @change="batchOperation">
+          <el-option label="新增指标" :value="1"></el-option>
+          <el-option label="编辑指标" :value="2"></el-option>
+          <el-option label="修改编辑权限" :value="3"></el-option>
+        </el-select>
+      </div>
+
+      <div class="content-data">
+        <div>
+          <span class="color2">年业绩指标：¥ </span>
+          <span class="color1">100,000</span>
+          <span class="color2">年新增会员指标：¥  </span>
+          <span class="color1">100,000</span>
+        </div>
+
+        <span v-show="activeName === 'second'">
+          <el-checkbox v-model="search.noPerformanceFlag" :true-label="1" :false-label="0">未设置业绩指标门店</el-checkbox>
+          <el-checkbox v-model="search.noAddMemberFlag" :true-label="1" :false-label="0">未设置新增会员指标门店</el-checkbox>
+        </span>
+      </div>
+
+      <el-table
+        :data="tableData"
+        style="width: 100%"
+        ref="multipleTable"
+        @selection-change="handleSelectionChange">
+
+        <el-table-column type="selection" width="55"></el-table-column>
+
+        <el-table-column prop="date" label="门店"></el-table-column>
+        <el-table-column prop="date" label="年业绩指标"></el-table-column>
+        <el-table-column prop="date" label="年新增会员指标"></el-table-column>
+        <el-table-column prop="date" label="编辑权限"></el-table-column>
+        <el-table-column prop="date" label="更新时间"></el-table-column>
+        <el-table-column prop="date" label="提交人"></el-table-column>
+
+        <el-table-column prop="date" label="操作">
+          <template>
+            <el-button type="text">编辑</el-button>
+            <el-button type="text">删除</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <dm-pagination
+        background
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+        :current-page="page.currentPage"
+        :page-sizes="[20, 40, 60, 80]"
+        :page-size="page.pageSize"
+        layout="total, sizes, prev, pager, next"
+        :total="page.total"
+        style="text-align:right">
+      </dm-pagination>
+    </div>
   </div>
 </template>
 
@@ -19,22 +117,116 @@ export default {
   components: {},
   data() {
     return {
+      activeName: '',
+
+      search: {
+        input: '',
+        date: '',
+        type: '',
+        auth: '',
+        state: '1',
+        store: '',
+        noPerformanceFlag: '0',
+        noAddMemberFlag: '0'
+      },
 
+      multipleSelection: [],
+      tableData: [],
+      loading: false,
+      page: {
+        currentPage: 1,
+        pageSize: 20,
+        total: 0
+      }
     };
   },
-  // 生命周期 - 挂载完成（访问DOM元素）
-  // mounted() {
 
-  // },
+  created() {
+    const { tab } = this.$route.query;
+    this.activeName = tab || 'first';
+    console.log(this);
+  },
+  // 生命周期 - 挂载完成（访问DOM元素）
+  mounted() {
+    this.$emit('showTab', '/quota-set');
+    this.$emit('change-nav', [ { name: '指标设置' } ]);
+  },
 
   // methods
   methods: {
+    batchOperation(val) {
+      console.log(val);
+    },
+
+    handleSelectionChange(val) {
+      this.multipleSelection = val;
+    },
+
+    handleClick({ name }) {
+      console.log(name);
+    },
 
+    handleSizeChange(val) {
+      this.page.pageSize = val;
+      this.page.currentPage = 1;
+      // this.getList();
+    },
+
+    handleCurrentChange(val) {
+      this.page.currentPage = val;
+      // this.getList();
+    }
   },
   watch: {}
 };
 </script>
 <style lang='less' scoped>
-
-
+.list-content {
+  padding: 5px 20px 20px;
+  .el-input {
+    width: 180px;
+    margin-right: 10px;
+  }
+  .el-select {
+    width: 148px;
+    margin-right: 10px;
+  }
+  .el-date-picker {
+    margin-right: 10px;
+  }
+}
+// .el-select .el-input.is-focus .el-input__inner {
+//   z-index: 2;
+// }
+.content-search {
+  display: flex;
+  justify-content: space-between;
+}
+.content-data {
+  display: flex;
+  justify-content: space-between;
+  margin: 20px 0;
+}
+.color1 {
+  color: #303133;
+  font-size: 16px;
+  padding-right: 15px;
+  font-weight: 500;
+}
+.color2 {
+  position: relative;
+  color: #606266;
+  font-size: 14px;
+  font-weight: 400;
+  &:not(:first-of-type) {
+    padding-left: 16px;
+    &::before {
+      content: '|';
+      position: absolute;
+      top: 0;
+      left: 0;
+      color: #DCDFE6;
+    }
+  }
+}
 </style>

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

@@ -8,8 +8,37 @@
 -->
 
 <template>
-  <div class="common-app-right">
-    <div>
+  <div class="common-app-right" style="padding: 0">
+    <div v-loading="loading">
+      <el-tabs v-model="activeName" @tab-click="getData">
+        <el-tab-pane label="业绩指标" name="1"></el-tab-pane>
+        <el-tab-pane label="新增会员指标" name="2"></el-tab-pane>
+      </el-tabs>
+
+      <div class="list-content">
+        <el-select v-model="search.date">
+          <el-option v-for="item in yearList" :key="item" :label="item" :value="item"></el-option>
+        </el-select>
+
+        <el-table
+          :data="tableData"
+          style="width: 100%;margin-top: 20px">
+
+          <el-table-column prop="performanceYm" label="月份"></el-table-column>
+          <el-table-column prop="storeCount" label="门店总数"></el-table-column>
+          <el-table-column prop="totalPerformanceValue" label="总业绩指标"></el-table-column>
+          <el-table-column label="业绩指标">
+            <template slot-scope="{row}">
+              {{ row.noPerfectCount || '--' }} 未完善；{{ row.prefectCount || '--' }} 已完善
+            </template>
+          </el-table-column>
+          <el-table-column label="操作">
+            <template slot-scope="{row}">
+              <el-button type="text" @click="$router.push({ path: '/target-store', query: { tab: activeName, id: row.id } })">查看门店</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
     </div>
 
   </div>
@@ -18,7 +47,7 @@
 <script>
 
 import fetch from '@/api/target-manage-app.js';
-const { getTargetList } = fetch;
+const { getTargetList, getYearList } = fetch;
 // import showMsg from '@/common/js/showmsg.js';
 export default {
   name: 'TargetList',
@@ -32,15 +61,27 @@ export default {
   data() {
     return {
       wxEnterpriseId: localStorage.getItem('haoBanUser') ? JSON.parse(localStorage.getItem('haoBanUser')).wxEnterpriseId : '',
-      tableData: []
+      tableData: [ {} ],
+      activeName: '1',
+      search: {
+        date: ''
+      },
+      yearList: [],
+      loading: false
     };
   },
+  created() {
+    const { tab } = this.$route.query;
+    this.activeName = tab || '1';
+  },
   // 生命周期 - 挂载完成（访问DOM元素）
   mounted() {
     const that = this;
     that.$emit('showTab', '/target-list');
+    that.$emit('change-nav', [ { name: '指标管理' } ]);
     if (!!that.brandId) {
       that.getData();
+      that.getYearList();
     }
   },
   // methods
@@ -50,19 +91,27 @@ export default {
      * @author: 无尘
      */
     getData() {
+      this.loading = true;
       const that = this;
       const para = {
         wxEnterpriseId: that.wxEnterpriseId,
-        enterpriseId: that.brandId
+        enterpriseId: that.brandId,
+        perfromanceType: this.activeName,
+        performanceYear: this.search.date
       };
       getTargetList(para, { headers: { sign: that.brandId } })
         .then(res => {
           that.tableData = res.result || [];
         })
-        .catch(function(error) {
-
+        .finally(() => {
+          this.loading = false;
         });
     },
+    getYearList() {
+      getYearList('', { headers: { sign: this.brandId } }).then(res => {
+        this.yearList = res.result || [];
+      });
+    }
 
   },
   watch: {
@@ -90,4 +139,7 @@ export default {
       color: #303133;
     }
   }
+  .list-content {
+    padding: 5px 20px 20px;
+  }
 </style>

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

@@ -8,8 +8,14 @@
 -->
 <!--  -->
 <template>
-  <div>
-
+  <div class="common-app-right" style="padding:40px">
+    <div class="target-content">
+      下发时间当月，第
+      <el-input-number v-model="days" controls-position="right" :min="1" style="width: 90px;margin: 0 8px"></el-input-number>
+      天下发下月指标
+      <span class="tips">注：如当月第28天下发，如果现在是1月份，即1月28号下发2月份指标。设置后次日生效</span>
+    </div>
+    <el-button type="primary">保存</el-button>
   </div>
 </template>
 
@@ -19,13 +25,14 @@ export default {
   components: {},
   data() {
     return {
-
+      days: 1
     };
   },
   // 生命周期 - 挂载完成（访问DOM元素）
-  // mounted() {
-
-  // },
+  mounted() {
+    this.$emit('showTab', '/quota-set');
+    this.$emit('change-nav', [ { name: '下发设置' } ]);
+  },
 
   // methods
   methods: {
@@ -35,6 +42,13 @@ export default {
 };
 </script>
 <style lang='less' scoped>
-
+.target-content {
+  color: #303133;
+  margin-bottom: 35px;
+  .tips {
+    margin-left: 35px;
+    color: #909399;
+  }
+}
 
 </style>

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

@@ -6,3 +6,26 @@
  * @LastEditors: 无尘
  * @LastEditTime: 2020-11-09 10:40:34
 -->
+<template>
+  <div class="common-app-right">
+    <el-button type="text" @click="$router.push({ path: '/perfect-day-target' })">完善日指标</el-button>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'TargetStore',
+  mounted() {
+    const that = this;
+    // that.$emit('showTab', '/target-store');
+    that.$emit('change-nav', [ { name: '指标管理', path: '/target-list' }, { name: '查看门店' } ]);
+    if (!!that.brandId) {
+      // that.getData();
+    }
+  },
+};
+</script>
+
+<style>
+
+</style>
\ No newline at end of file