update: actcode

src/api/actCode.js

@@ -4,4 +4,13 @@ import { postRequest } from '@/api/api';
 export const findActCodeGroupListApi = params => postRequest('/hm/group/list', params);
 
 // 新增活码分组
-export const addActCodeGroup = params => postRequest('/hm/group/save', params);
+export const addActCodeGroupApi = params => postRequest('/hm/group/save', params);
+
+// 编辑活码分组
+export const editActCodeGroupApi = params => postRequest('/hm/group/edit', params);
+
+// 删除分组
+export const delActCodeGroupApi = params => postRequest('/hm/group/delete', params);
+
+// 活码列表
+export const actCodeListApi = params => postRequest('', params);

src/views/salesleads/actCodeManage/staffActCode/views/act-code-table.vue

@@ -2,34 +2,34 @@
   <section>
     <el-form inline>
       <el-form-item>
-        <el-input placeholder="请输入活码ID/名称、创建人、使用成员" style="width: 300px">
+        <el-input placeholder="请输入活码ID/名称、创建人" style="width: 300px" @change="searchList" v-model="searchForm.search">
           <i slot="prefix" class="el-input__icon el-icon-search"></i>
         </el-input>
       </el-form-item>
       <el-form-item>
-        <el-select v-model="selectMemberType" style="width: 130px">
+        <el-select v-model="searchForm.selectMemberType" style="width: 130px">
           <el-option label="成员所属门店" :value="1"></el-option>
           <el-option label="使用成员" :value="2"></el-option>
         </el-select>
-        <el-select filterable remote :placeholder="`${selectMemberType == 1 ? '门店名称' : '成员姓名'} / code`" :remote-method="remoteMethod" :loading="selectLoading" style="margin-left: -4px">
+        <el-select v-model="searchForm.searchInfo" filterable remote :placeholder="`${selectMemberType == 1 ? '门店名称' : '成员姓名'} / code`" :remote-method="remoteMethod" :loading="selectLoading" style="margin-left: -4px" @change="searchList">
           <el-option v-for="item in memberOrShopList" :key="item.value" :label="item.label" :value="item.value"> </el-option>
         </el-select>
       </el-form-item>
       <el-form-item>
-        <el-select placeholder="全部状态" clearable class="w160">
+        <el-select v-model="searchForm.searchStatus" placeholder="全部状态" clearable class="w160" @change="searchList">
           <el-option :key="0" label="正常" :value="0"> </el-option>
           <el-option :key="1" label="待生效" :value="1"> </el-option>
           <el-option :key="1" label="已废弃" :value="2"> </el-option>
         </el-select>
       </el-form-item>
       <el-form-item>
-        <el-select placeholder="全部类型" clearable class="w160">
+        <el-select v-model="searchForm.codeType" placeholder="全部类型" clearable class="w160" @change="searchList">
           <el-option :key="0" label="单人活码" :value="0"> </el-option>
           <el-option :key="1" label="多人活码" :value="1"> </el-option>
         </el-select>
       </el-form-item>
       <el-form-item>
-        <el-date-picker :picker-options="pickerOptions" :editable="false" :value-format="'yyyy-MM-dd'" type="daterange" align="right" unlink-panels range-separator="至" start-placeholder="创建开始日期" end-placeholder="创建结束日期"> </el-date-picker>
+        <el-date-picker v-model="searchForm.dateTime" @change="searchList" :picker-options="pickerOptions" :editable="false" :value-format="'yyyy-MM-dd'" type="datetimerange" align="right" unlink-panels range-separator="至" start-placeholder="创建开始日期" end-placeholder="创建结束日期"> </el-date-picker>
       </el-form-item>
       <el-form-item class="fr">
         <el-button>批量分组</el-button>
@@ -37,54 +37,80 @@
         <el-button type="primary">新增活码</el-button>
       </el-form-item>
     </el-form>
-    <el-table ref="actCodeTableRef" v-loading="loadingStatus" :data="actCodeList" tooltip-effect="dark" class="act-code-table" @sort-change="sortChange">
-      <el-table-column type="selection" width="35" fixed> </el-table-column>
+    <el-table ref="actCodeTableRef" v-loading="loadingStatus" :data="actCodeList" tooltip-effect="dark" class="act-code-table" @sort-change="sortChange" :max-height="tableMaxHeight">
+      <el-table-column type="selection" width="60" fixed> </el-table-column>
       <el-table-column width="60" class-name="table-select-cell" fixed>
         <template #header>
           <dm-table-select-page class="table-select" :type="selectPage.type" :data-ready="selectPage.dataReady" :table-vm="$refs.actCodeTableRef" :table-data="actCodeList" :total="totalCount" @change="t => (selectPage.type = t)" @selection-change="handleSelectionChange"></dm-table-select-page>
         </template>
       </el-table-column>
-      <el-table-column label="活码ID" fixed width="110" align="center">
+      <el-table-column label="活码ID" fixed width="110">
         <template slot-scope="{ row }">
           <p>{{ row.actCodeId }}</p>
         </template>
       </el-table-column>
-      <el-table-column label="活码信息" width="100" align="center">
+      <el-table-column label="活码信息" width="100">
         <template slot-scope="{ row }">
-          <p>{{ row.actCodeId }}</p>
+          <p class="overflow-ellipsis" :title="row.actCodeId">{{ row.actCodeId }}</p>
+          <p><span class="oneActCode" v-if="row.actCodeType == 1">单人活码</span><span class="moreActCOde" v-else>多人活码</span></p>
         </template>
       </el-table-column>
-      <el-table-column label="活码状态" width="100" align="center">
+      <el-table-column label="活码状态" width="130">
         <template slot-scope="{ row }">
-          <p>{{ row.actCodeId }}</p>
+          <p><span class="dot normal" v-if="row.actCodeStatus == 1">正常</span><span class="dot needSure" v-if="row.actCodeStatus == 2">待生效</span><span class="dot voided" v-if="row.actCodeStatus == 3">已作废</span></p>
+          <p class="toTopTip" v-if="row.actCodeStatus == 1">(今日已达上限)</p>
         </template>
       </el-table-column>
-      <el-table-column label="新增总人数" sortable="custom" width="150" align="center">
+      <el-table-column label="添加好友人数" sortable="custom" width="150">
         <template slot-scope="{ row }">
           <p>{{ row.actCodeId }}</p>
         </template>
       </el-table-column>
-      <el-table-column label="今日新增人数" sortable="custom" width="150" align="center">
+      <el-table-column label="今日新增人数" sortable="custom" width="150">
         <template slot-scope="{ row }">
           <p>{{ row.actCodeId }}</p>
         </template>
       </el-table-column>
-      <el-table-column label="使用成员" width="100" align="center">
+      <el-table-column label="使用成员" width="120">
         <template slot-scope="{ row }">
-          <p>{{ row.actCodeId }}</p>
+          <p>{{ row.useMember[0].name }}</p>
+          <p class="ft-12 phone">15784243524</p>
+          <p>
+            <el-popover width="200" trigger="click">
+              <ul class="useMember-ul">
+                <li v-for="(item, index) in row.useMember.slice(1)" :key="index">
+                  <p>{{ item.name }}</p>
+                  <p class="ft-12 phone">15784243524</p>
+                </li>
+              </ul>
+              <el-button slot="reference" type="text" class="ft-12">查看更多</el-button>
+            </el-popover>
+          </p>
         </template>
       </el-table-column>
-      <el-table-column label="成员所属门店" width="100" align="center">
+      <el-table-column label="成员所属门店" width="120">
         <template slot-scope="{ row }">
-          <p>{{ row.actCodeId }}</p>
+          <p>{{ row.useMember[0].name }}</p>
+          <p class="ft-12 phone">15784243524</p>
+          <p>
+            <el-popover width="200" trigger="click">
+              <ul class="useMember-ul">
+                <li v-for="(item, index) in row.useMember.slice(1)" :key="index">
+                  <p>{{ item.name }}</p>
+                  <p class="ft-12 phone">15784243524</p>
+                </li>
+              </ul>
+              <el-button slot="reference" type="text" class="ft-12">查看更多</el-button>
+            </el-popover>
+          </p>
         </template>
       </el-table-column>
-      <el-table-column label="所属分组" width="100" align="center">
+      <el-table-column label="所属分组" width="100">
         <template slot-scope="{ row }">
           <p>{{ row.actCodeId }}</p>
         </template>
       </el-table-column>
-      <el-table-column label="创建人" width="100" align="center">
+      <el-table-column label="创建人" width="100">
         <template slot-scope="{ row }">
           <p>{{ row.actCodeId }}</p>
         </template>
@@ -101,17 +127,29 @@
       </el-table-column>
     </el-table>
     <div class="block common-wrap__page text-right m-t-24" v-if="actCodeList.length != 0">
-      <dm-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[20, 40, 60, 80]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="totalCount"> </dm-pagination>
+      <dm-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageParam.currentPage" :page-sizes="[20, 40, 60, 80]" :page-size="pageParam.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="totalCount"> </dm-pagination>
     </div>
   </section>
 </template>
 
 <script>
+import { actCodeListApi } from '@/api/actCode.js';
+// import errMsg from '@/common/js/error';
 export default {
   name: 'actCodeTable',
   data() {
+    let tableMaxHeight = document.body.clientHeight - 312 + 'px';
     return {
-      tableData: [{}],
+      tableMaxHeight: tableMaxHeight,
+      searchForm: {
+        search: '',
+        searchInfo: '',
+        searchStatus: '',
+        selectMemberType: 1,
+        codeType: '',
+        dateTime: ''
+      },
+      tableData: [],
       total: 1,
       totalCount: 100,
       selectPage: {
@@ -120,7 +158,109 @@ export default {
       },
       actCodeList: [
         {
-          actCodeId: 12313213
+          actCodeId: 12313213111111111,
+          actCodeType: 1,
+          actCodeStatus: 1,
+          useMember: [
+            {
+              name: 'text'
+            },
+            {
+              name: 'text'
+            }
+          ]
+        },
+        {
+          actCodeId: 123132132222222222222,
+          actCodeType: 1,
+          actCodeStatus: 2,
+          useMember: [
+            {
+              name: 'text'
+            },
+            {
+              name: 'text'
+            }
+          ]
+        },
+        {
+          actCodeId: 12313213,
+          actCodeStatus: 3,
+          useMember: [
+            {
+              name: 'text'
+            },
+            {
+              name: 'text'
+            }
+          ]
+        },
+        {
+          actCodeId: 12313213,
+          actCodeType: 1,
+          actCodeStatus: 1,
+          useMember: [
+            {
+              name: 'text'
+            },
+            {
+              name: 'text'
+            }
+          ]
+        },
+        {
+          actCodeId: 12313213,
+          actCodeStatus: 2,
+          useMember: [
+            {
+              name: 'text'
+            },
+            {
+              name: 'text'
+            },
+            {
+              name: 'text'
+            },
+            {
+              name: 'text'
+            }
+          ]
+        },
+        {
+          actCodeId: 12313213,
+          actCodeStatus: 2,
+          useMember: [
+            {
+              name: 'text'
+            },
+            {
+              name: 'text'
+            },
+            {
+              name: 'text'
+            },
+            {
+              name: 'text'
+            }
+          ]
+        },
+        {
+          actCodeId: 12313213,
+          actCodeStatus: 2,
+          useMember: [
+            {
+              name: 'text'
+            },
+            {
+              name: 'text'
+            },
+            {
+              name: 'text'
+            },
+            {
+              name: 'text'
+            }
+          ]
         }
       ],
       loadingStatus: false,
@@ -178,30 +318,64 @@ export default {
           label: '测试2'
         }
       ],
-      selectMemberType: 1,
       // 分页参数
-      pageSize: 20,
-      currentPage: 1
+      pageParam: {
+        pageSize: 20,
+        currentPage: 1,
+        sortColName: '',
+        sortType: ''
+      },
+      multipleSelection: []
     };
   },
   methods: {
     handleSelectionChange(val) {
-      console.log(val);
+      this.multipleSelection = val;
     },
     // 当前页变化
     handleCurrentChange(val) {
-      console.log(val);
+      this.pageParam.currentPage = val;
+      sessionStorage.setItem('currentPage', val);
+      // this.getAjaxMembers();
     },
     // 页码
     handleSizeChange(val) {
-      console.log(val);
+      this.pageParam.pageSize = val;
+      this.getTableList();
+      // this.getAjaxMembers();
     },
     remoteMethod(query) {
       console.log(query);
     },
     // 排序
     sortChange(column) {
-      console.log(column);
+      this.pageParam.sortColName = column.prop;
+      if (column.order === 'descending') {
+        this.pageParam.sortType = 'desc';
+      }
+      if (column.order === 'ascending') {
+        this.pageParam.sortType = 'asc';
+      }
+      this.getTableList();
+    },
+    searchList() {
+      this.currentPage = 1;
+      this.getTableList();
+    },
+    getTableList() {
+      this.loadingStatus = true;
+      actCodeListApi(Object.assign({}, this.searchForm, this.pageParam))
+        .then(res => {
+          this.totalCount = res.data.result.totalCount;
+          if (Array.isArray(res.data.result.result) && res.data.result.result.length) {
+            this.tableData = [].concat(res.data.result.result);
+          } else {
+            this.tableData = [];
+          }
+        })
+        .finally(_ => {
+          this.loadingStatus = false;
+        });
     }
   }
 };
@@ -228,4 +402,63 @@ export default {
 .act-code-table /deep/ td:not(.table-header__dropdown) .cell:empty::before {
   content: '' !important;
 }
+.oneActCode {
+  background: #cff2f5;
+  border-radius: 2px;
+  color: #0faab6;
+  font-size: 12px;
+}
+.moreActCOde {
+  background: #dee3fc;
+  border-radius: 2px;
+  color: #2f54eb;
+  font-size: 12px;
+}
+.toTopTip {
+  color: #fa8c16;
+  font-size: 12px;
+}
+.dot {
+  display: inline-block;
+  position: relative;
+  margin-left: 14px;
+  &::before {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: -14px;
+    transform: translateY(-50%);
+    display: block;
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+  }
+}
+
+.voided::before {
+  background: #d9d9d9;
+}
+.normal::before {
+  background: #33af4a;
+}
+.needSure::before {
+  background: #fa8c16;
+}
+.ft-12 {
+  font-size: 12px;
+}
+.phone {
+  color: #606266;
+}
+.useMember-ul {
+  max-height: 230px;
+  overflow: auto;
+  li {
+    height: 50px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    border-bottom: 1px solid #dcdfe6;
+  }
+}
 </style>

src/views/salesleads/actCodeManage/staffActCode/views/group-list.vue

@@ -14,7 +14,7 @@
           </div>
           <el-popover placement="bottom" trigger="hover" v-if="isShowGroupListItemMore(listItem)">
             <p class="more" @click="editGroupListItem(listItem)">编辑</p>
-            <p class="more" @click="delGroupListItem(listItem)">删除</p>
+            <p class="more" @click="delGroupListItem(listItem)" v-if="!listItem.releationNum">删除</p>
             <i slot="reference" class="iconfont-hb3 icongengduo icon"></i>
           </el-popover>
         </li>
@@ -24,7 +24,7 @@
       <el-button type="primary" class="ghost-btn add-group" @click="addGroup">新增分组</el-button>
     </div>
     <!-- 新增/编辑分组 -->
-    <el-dialog :title="title" :visible.sync="addOrEditGroupDialog" width="500px" top="30vh" :close-on-click-modal="false">
+    <el-dialog :title="isEditGroup ? '编辑分组' : '新增分组'" :visible.sync="addOrEditGroupDialog" width="500px" top="30vh" :close-on-click-modal="false">
       <el-form :model="groupListForm" :rules="groupListFormRules" ref="groupListForm">
         <el-form-item label="分组名称" prop="groupName">
           <el-input placeholder="请输入分组名称" v-model="groupListForm.groupName" :maxlength="10" show-word-limit clearable></el-input>
@@ -40,7 +40,7 @@
 </template>
 
 <script>
-import { findActCodeGroupListApi, addActCodeGroup } from '@/api/actCode.js';
+import { findActCodeGroupListApi, addActCodeGroupApi, editActCodeGroupApi, delActCodeGroupApi } from '@/api/actCode.js';
 export default {
   name: 'staffActCodeGroupList',
   data() {
@@ -118,7 +118,12 @@ export default {
       return !hiddenListItemMore.includes(listItem.groupId);
     },
     addGroup() {
+      this.scrollLoad = false;
       this.isEditGroup = false;
+      this.groupListForm = {
+        groupName: '',
+        groupId: ''
+      };
       this.$nextTick(() => {
         this.$refs.groupListForm.clearValidate();
       });
@@ -142,33 +147,56 @@ export default {
           // 删除操作
           const listItemIndex = this.groupList.findIndex(item => item.groupId === listItem.groupId);
           if (listItemIndex < 0) return;
-          this.groupList.splice(listItemIndex, 1);
-        })
-        .catch(() => {});
-    },
-    handleGroupListItem() {
-      this.$refs.groupListForm.validate(valid => {
-        if (valid) {
           let params = {
-            groupName: this.groupListForm.groupName
+            groupId: listItem.groupId
           };
-          addActCodeGroup(params).then(res => {
+          delActCodeGroupApi(params).then(res => {
             if (res.errorCode == 0) {
               this.$message({
                 type: 'success',
-                message: '新增成功',
-                duration: 1000
+                message: '删除成功!'
               });
+              this.groupList.splice(listItemIndex, 1);
+            }
+          });
+        })
+        .catch(() => {});
+    },
+    handleGroupListItem() {
+      this.$refs.groupListForm.validate(async valid => {
+        if (valid) {
+          // 用来接收编辑或者新增后的返回结果
+          let res = {};
+          let resSucTip = `${this.isEditGroup ? '修改' : '新增'}成功`;
+          let resErTip = `${this.isEditGroup ? '修改' : '新增'}失败`;
+          if (this.isEditGroup) {
+            res = await editActCodeGroupApi(this.groupListForm);
+          } else {
+            let params = {
+              groupName: this.groupListForm.groupName
+            };
+            res = await addActCodeGroupApi(params);
+          }
+          if (res.errorCode == 0) {
+            this.$message({
+              type: 'success',
+              message: resSucTip,
+              duration: 1000
+            });
+            if (this.isEditGroup) {
+              const groupListItem = this.groupList.find(({ groupId }) => groupId == this.groupListForm.groupId);
+              groupListItem.groupName = this.groupListForm.groupName;
+            } else {
               this.pageNum = 1;
               this.searchGroup();
-            } else {
-              this.$message({
-                type: 'error',
-                message: res.message || '新增失败'
-              });
             }
-            this.editDialog.visible = false;
-          });
+            this.addOrEditGroupDialog = false;
+          } else {
+            this.$message({
+              type: 'error',
+              message: resErTip
+            });
+          }
         }
       });
     },