feat: 对接，结算管理、配送管理、仓储管理、轮播图管理、通告管理、商城配置

src/App.vue

@@ -31,4 +31,67 @@ export default {
 .el-select-dropdown {
   z-index: 999999 !important;
 }
+
+.diy-dialog{
+  .el-dialog__header {
+    padding: 0 !important;
+  }
+  .el-dialog__headerbtn{
+    z-index: 9999999;
+  }
+  .el-dialog__body{
+    padding: 0 !important;
+  }
+  .box-card{
+    margin-bottom: 0 !important;
+  }
+  .el-table-column--selection{
+    .cell{
+      padding: 0 10px !important;
+    }
+  }
+  .el-form-item__label{
+    padding-bottom: 0 !important;
+  }
+  .el-table__cell{
+    padding: 0 !important;
+  }
+  .is-center{
+    .text-view{
+      div{
+        width: 100%;
+        text-align: center !important;
+      }
+    }
+  }
+}
+.cartographer {
+  .el-dialog__wrapper {
+    width: 100% !important;
+    height: calc(100% - 5px) !important;
+    position: absolute !important;
+    top: 5px !important;
+  }
+  .el-dialog {
+    margin: 0 !important;
+    width: 100%;
+    height: 100%;
+  }
+  .el-dialog__body {
+    padding: 0 !important;
+    width: 100%;
+    height: calc(100% - 55px);
+    position: relative;
+  }
+  .el-dialog__headerbtn{
+    z-index: 99999 !important;
+  }
+}
+.custom-tree-node{
+  .el-input__inner{
+      border: none !important;
+      padding: 0 !important;
+      width: auto !important;
+  }
+}
 </style>

src/api/dataDictionary.js

@@ -0,0 +1,65 @@
+import request, { postBlob } from '@/utils/request'
+
+export function getDataDictionary(data) {
+  return request({
+    url: `/dict/page?moduleId=${data.moduleId}`,
+    method: 'post',
+    data
+  })
+}
+
+export function getDataDictionaryExport(data, name) {
+  return postBlob({
+    url: '/dict/page/export',
+    data,
+    name
+  })
+}
+
+export function addDataDictionary(data) {
+  return request({
+    url: `/dict/add`,
+    method: 'post',
+    data
+  })
+}
+
+export function updateDataDictionary(data) {
+  return request({
+    url: `/dict/update`,
+    method: 'post',
+    data
+  })
+}
+
+export function delDataDictionary(params) {
+  return request({
+    url: `/dict/del`,
+    method: 'post',
+    params
+  })
+}
+
+export function dictDetail(params) {
+  return request({
+    url: `/dict/detail`,
+    method: 'post',
+    params
+  })
+}
+
+export function dictListDict(params) {
+  return request({
+    url: `/dict/listDict`,
+    method: 'post',
+    params
+  })
+}
+
+export function dictTypeList(data) {
+  return request({
+    url: `/dict/type/list`,
+    method: 'post',
+    data
+  })
+}

src/api/fieldMan.js

@@ -0,0 +1,17 @@
+import request, { postBlob } from '@/utils/request'
+
+export function zfireSave(data, moduleId) {
+  return request({
+    url: `/zfire/save?moduleId=${moduleId}`,
+    method: 'post',
+    data
+  })
+}
+
+export function zfireDel(data, adminUserId, moduleId) {
+  return request({
+    url: `/zfire/delete?adminUserId=${adminUserId}&moduleId=${moduleId}`,
+    method: 'post',
+    data
+  })
+}

src/api/freight.js

@@ -1,5 +1,22 @@
 import request from '@/utils/request'
 
+
+export function freightListPageV2(data) {
+  return request({
+    url: `/freight/list/pageV2?moduleId=${data.moduleId}`,
+    method: 'post',
+    data
+  })
+}
+
+export function freightPageExport(data, name) {
+  return postBlob({
+    url: '/freight/pageExport',
+    data,
+    name
+  })
+}
+
 // 获取运费模板列表
 export function getList(params) {
   return request({

src/api/setting.js

@@ -1,5 +1,24 @@
 import request from '@/utils/request'
 
+
+export function carouselMapListPageV2(data) {
+  return request({
+    url: `/carouselMap/list/pageV2?moduleId=${data.moduleId}`,
+    method: 'post',
+    data
+  })
+}
+
+export function carouselMapPageExport(data, name) {
+  return postBlob({
+    url: '/carouselMap/pageExport',
+    data,
+    name
+  })
+}
+
+
+
 // 获取个人信息
 export function getUserInfo(params) {
   return request({

src/api/settlement.js

@@ -1,6 +1,25 @@
 
 import request from "@/utils/request";
 
+
+export function orderShareListPageV2(data) {
+  return request({
+    url: `/order/share/list/pageV2?moduleId=${data.moduleId}`,
+    method: 'post',
+    data
+  })
+}
+
+export function orderSharePageExport(data, name) {
+  return postBlob({
+    url: '/order/share/pageExport',
+    data,
+    name
+  })
+}
+
+
+
 export function getList(params) {
   return request({
     url: '/order/share/list',

src/api/storage.js

@@ -1,4 +1,21 @@
-import request from '@/utils/request'
+import request, { postBlob } from '@/utils/request'
+
+export function storageListPageV2(data) {
+  return request({
+    url: `/storage/list/pageV2?moduleId=${data.moduleId}`,
+    method: 'post',
+    data
+  })
+}
+
+export function storagePageExport(data, name) {
+  return postBlob({
+    url: '/storage/pageExport',
+    data,
+    name
+  })
+}
+
 
 // 获取仓储列表
 export function getList(params) {

src/api/zfireParam.js

@@ -0,0 +1,25 @@
+import request, { postBlob } from '@/utils/request'
+
+export function zfireParamList(params) {
+  return request({
+    url: `/zfire/param/list`,
+    method: 'post',
+    params
+  })
+}
+
+export function zfireParamSave(data) {
+  return request({
+    url: `/zfire/param/save`,
+    method: 'post',
+    data
+  })
+}
+
+export function zfireParamDelete(params) {
+  return request({
+    url: `/zfire/param/delete`,
+    method: 'post',
+    params
+  })
+}

src/components/file-upload/index.vue

@@ -1,27 +1,12 @@
 <template>
   <div>
-    <el-upload
-      name="file"
-      :class="['uploader', uid]"
-      :action="oss_url"
-      :data="dataObj"
-      :multiple="multiple"
-      :accept="accept"
-      :show-file-list="false"
-      :on-success="uploadSuccess"
-      :before-upload="beforeUpload"
-    />
+    <el-upload name="file" :class="['uploader', uid]" :action="oss_url" :data="dataObj" :multiple="multiple"
+      :accept="accept" :show-file-list="false" :on-success="uploadSuccess" :before-upload="beforeUpload" />
     <div class="images" v-if="modType === 'view'">
       <div v-for="(item, index) in files" :key="index" class="item">
         <div v-if="item.url" class="img">
-          <el-image
-            v-if="checkFileType(item.url) == 'image'"
-            ref="img"
-            :src="imageURL + item.url"
-            :preview-src-list="previewImages"
-            style="width: 120px; height: 120px"
-            fit="cover"
-          />
+          <el-image v-if="checkFileType(item.url) == 'image'" ref="img" :src="imageURL + item.url"
+            :preview-src-list="previewImages" style="width: 120px; height: 120px" fit="cover" />
           <el-image v-else ref="img" :src="imageURL + item.url" style="width: 120px; height: 120px" fit="cover">
             <div slot="error" class="image-slot">
               <img v-if="checkFileType(item.url) == 'word'" class="file" src="@/assets/common/word.png" />
@@ -29,11 +14,12 @@
               <img v-if="checkFileType(item.url) == 'ppt'" class="file" src="@/assets/common/ppt.png" />
               <img v-if="checkFileType(item.url) == 'pdf'" class="file" src="@/assets/common/pdf.png" />
               <img v-if="checkFileType(item.url) == 'file'" class="file" src="@/assets/common/zip.jpeg" />
+              <img v-if="checkFileType(item.url) == 'video'" class="file" src="@/assets/common/video.jpeg" />
             </div>
           </el-image>
           <div v-if="isEdit || checkFileType(item.url) == 'image'" class="mask">
             <i v-if="checkFileType(item.url) == 'image'" class="el-icon-zoom-in" @click="previewImage(item.url)" />
-            <i v-if="isEdit" class="el-icon-upload2" @click="uploadImage(item.url)" />
+            <i v-if="isEdit && isUpdate" class="el-icon-upload2" @click="uploadImage(item.url)" />
             <i v-if="isEdit" class="el-icon-delete" @click="deleteImage(item.url)" />
           </div>
         </div>
@@ -84,7 +70,7 @@ export default {
     // 接受上传的文件类型
     fileType: {
       type: Array,
-      default: () => ['image', 'word', 'excel', 'ppt', 'pdf', 'file']
+      default: () => ['image', 'word', 'excel', 'ppt', 'pdf', 'file', 'video']
     },
     // 是否支持多选文件
     multiple: {
@@ -104,7 +90,11 @@ export default {
     isEdit: {
       type: Boolean,
       default: true
-    }
+    },
+    isUpdate: {
+      type: Boolean,
+      default: true
+    },
   },
   data() {
     return {
@@ -126,7 +116,7 @@ export default {
           return false
         }
       },
-      set: function (newValue) {}
+      set: function (newValue) { }
     },
     accept() {
       const imageList = ['.jpg', '.jpeg', '.png']
@@ -201,6 +191,8 @@ export default {
         return 'pdf'
       } else if (['zip', 'rar', 'gz', 'apk'].includes(fileSuffix)) {
         return 'file'
+      } else if (['mp4'].includes(fileSuffix)) {
+        return 'video'
       }
     },
     // 获取oss配置
@@ -259,7 +251,9 @@ export default {
         const index = findElem(this.files, 'url', this.uploadImageUrl)
         this.$set(this.files, index, {
           name: this.dataObj.name,
-          url: this.dataObj.key
+          url: this.dataObj.key,
+          size: file.size,
+          type: file.name.split(".")[file.name.split(".").length - 1]
         })
         this.waitUploadList = []
       } else {
@@ -267,7 +261,9 @@ export default {
         const index = findElem(this.waitUploadList, 'name', this.fileName)
         this.files.push({
           name: this.waitUploadList[index].name,
-          url: this.waitUploadList[index].key
+          url: this.waitUploadList[index].key,
+          size: file.size,
+          type: file.name.split(".")[file.name.split(".").length - 1]
         })
         this.waitUploadList.splice(index, 1)
       }
@@ -300,9 +296,11 @@ export default {
 .images {
   display: flex;
   flex-wrap: wrap;
+
   .item {
     margin-right: 20px;
     margin-bottom: 20px;
+
     .img {
       width: 120px;
       height: 120px;
@@ -311,15 +309,18 @@ export default {
       position: relative;
       border: 1px dashed #eaeaea;
       display: flex;
+
       .el-image {
         display: block;
       }
+
       .file {
         width: 120px;
         height: 120px;
         display: block;
         padding: 30px;
       }
+
       .mask {
         position: absolute;
         left: 0;
@@ -330,6 +331,7 @@ export default {
         display: none;
         align-items: center;
         justify-content: center;
+
         i {
           font-size: 20px;
           color: #ffffff;
@@ -337,11 +339,13 @@ export default {
           margin: 0 8px;
         }
       }
+
       &:hover .mask {
         display: flex;
       }
     }
   }
+
   .add {
     width: 120px;
     height: 120px;
@@ -351,12 +355,14 @@ export default {
     display: flex;
     align-items: center;
     justify-content: center;
+
     i {
       font-size: 30px;
       color: #999;
     }
   }
 }
+
 .uploader {
   height: 0;
 }

src/components/template/rules_verify.js

@@ -0,0 +1,29 @@
+// 必填
+export const required = [{ required: true, message: '请填值', trigger: 'blur' }]
+
+// 手机号码校验必填
+export const mobileRequired = [{ required: true, message: '请输入', trigger: 'blur' }, {
+  validator: (rule, value, callback) => {
+    var reg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/;
+    if (!reg.test(value)) {
+      callback(new Error('请输入正确的手机号'))
+    } else {
+      callback()
+    }
+  },
+  trigger: 'blur'
+}]
+
+// 手机号码校验非必填
+export const mobile = [{
+  validator: (rule, value, callback) => {
+    var reg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/;
+    if (value && !reg.test(value)) {
+      callback(new Error('请输入正确的手机号'))
+    } else {
+      callback()
+    }
+  },
+  trigger: 'blur'
+}]
+

src/components/template/selectData.js

@@ -1,29 +1,3 @@
-import { getTypeList, getCategoryList } from '@/api/feedback'
-
 export default {
-  typeName() {
-    return new Promise((r, j) => {
-      getTypeList({
-        pageNum: 1,
-        pageSize: -1
-      })
-        .then(res => {
-          r({ data: res.data.records.map(item => ({ dictCode: item.opinionFeedbackTypeId, dictValue: item.typeName })) })
-        })
-        .catch(j)
-    })
-  },
-
-  content() {
-    return new Promise((r, j) => {
-      getCategoryList({
-        pageNum: 1,
-        pageSize: -1
-      })
-        .then(res => {
-          r({ data: res.data.records.map(item => ({ dictCode: item.opinionFeedbackCategoryId, dictValue: item.content })) })
-        })
-        .catch(j)
-    })
-  }
+ 
 }

src/views/mallManagement/activity/coupon_index/index.vue

@@ -1,1280 +1,168 @@
 <template>
-  <div class="app-container">
-    <!-- 筛选条件 -->
-    <div class="screen-container">
-      <div class="top clearfix">
-        <div class="title fl">条件筛选</div>
-      </div>
-      <el-form ref="screenForm" :model="screenForm" label-width="90px" size="small" label-position="left">
-        <el-row :gutter="20">
-          <el-col :xs="24" :sm="12" :lg="6">
-            <el-form-item label="优惠券名称" prop="couponName">
-              <el-input v-model="screenForm.couponName" placeholder="请输入优惠券名称"></el-input>
-            </el-form-item>
-          </el-col>
-          <el-col :xs="12" :sm="12" :lg="6">
-            <el-form-item label="发布状态" prop="flag">
-              <el-select v-model="screenForm.flag" placeholder="全部发布状态" size="small">
-                <el-option label="全部" value=""></el-option>
-                <el-option :label="item.label" :value="item.value" v-for="(item, index) in select_flag" :key="index"></el-option>
-              </el-select>
-            </el-form-item>
-          </el-col>
-          <el-col :xs="24" :sm="24" :lg="12" class="tr">
-            <el-form-item label="">
-              <el-button size="small" @click="resetScreenForm">清空</el-button>
-              <el-button size="small" type="primary" @click="submitScreenForm">搜索</el-button>
-            </el-form-item>
-          </el-col>
-        </el-row>
-      </el-form>
-    </div>
-
-    <div class="mymain-container">
-      <div class="btn-group clearfix">
-        <div class="fl">
-          <el-button size="small" type="primary" icon="el-icon-plus" @click="addOrEdit('add')">新增优惠券</el-button>
-        </div>
-        <div class="fr">
-          <el-button size="small" type="primary" icon="el-icon-download" @click="handleExport">导出</el-button>
-        </div>
-      </div>
-
-      <div class="table">
-        <el-table v-loading="listLoading" :data="dataList" element-loading-text="Loading" border fit highlight-current-row stripe>
-          <el-table-column align="center" label="券名称" prop="couponName" min-width="120"></el-table-column>
-          <el-table-column align="center" label="券类型" prop="couponType" min-width="120">
-            <template slot-scope="scope">
-              {{ scope.row.couponType | typeFilter}}
-            </template>
-          </el-table-column>
-          <el-table-column align="center" label="券面额" prop="couponValue"></el-table-column>
-          <el-table-column align="center" label="满足金额" prop="orderAmount"></el-table-column>
-          <el-table-column align="center" label="发放总量" prop="couponAmount"></el-table-column>
-          <el-table-column align="center" label="限领次数" prop="receiveLimitCount"></el-table-column>
-          <el-table-column align="center" label="领取数量" prop="receivedCount"></el-table-column>
-          <el-table-column align="center" label="使用数量" prop="usedCount"></el-table-column>
-          <el-table-column align="center" label="显示时间" min-width="160">
-            <template slot-scope="scope">
-              {{ scope.row.displayTime }}
-            </template>
-          </el-table-column>
-          <el-table-column align="center" label="领取时间" min-width="200">
-            <template slot-scope="scope">
-              {{ scope.row.obtainStartTime | dateToDayFilter }} 至 {{ scope.row.obtainEndTime | dateToDayFilter }}
-            </template>
-          </el-table-column>
-          <el-table-column align="center" label="使用时间" min-width="200">
-            <template slot-scope="scope">
-              {{ scope.row.activeStartTime | dateToDayFilter }} 至 {{ scope.row.activeEndTime | dateToDayFilter }}
-            </template>
-          </el-table-column>
-          <el-table-column align="center" label="商户" prop="companyName" min-width="120"></el-table-column>
-          <el-table-column align="center" label="状态" class-name="status-col">
-            <template slot-scope="scope">
-              {{ scope.row.releaseFlag | COUPON_CURRENT_FLAG_FILTER }}
-            </template>
-          </el-table-column>
-          <el-table-column align="center" label="创建时间" prop="createTime" min-width="160"></el-table-column>
-          <el-table-column align="center" label="操作" fixed="right" width="220">
-            <template slot-scope="scope">
-              <el-button type="text" @click="checkCoupon(scope.row.couponId)">查看</el-button>
-              <el-button v-if="scope.row.releaseFlag === 'WAIT'" type="text" @click="addOrEdit('edit', scope.row.couponId)">编辑</el-button>
-              <el-popconfirm v-if="scope.row.releaseFlag === 'START'" style="margin-left: 10px;" title="确定取消吗？" @onConfirm="changeFlag(scope.row.couponId)" >
-                <el-button slot="reference" type="text">取消</el-button>
-              </el-popconfirm>
-              <el-popconfirm v-if="scope.row.releaseFlag === 'START'" style="margin-left: 10px;" title="确定补发业务员优惠券吗？" @onConfirm="reissueCoupon(scope.row.couponId)" >
-                <el-button slot="reference" type="text">补发业务员优惠券</el-button>
-              </el-popconfirm>
-            </template>
-          </el-table-column>
-        </el-table>
-      </div>
-
-      <div class="pagination clearfix">
-        <div class="fr">
-          <el-pagination
-            @size-change="handleSizeChange"
-            @current-change="handleCurrentChange"
-            :current-page="currentPage"
-            :page-sizes="[10, 20, 30, 50]"
-            :page-size="10"
-            layout="total, sizes, prev, pager, next, jumper"
-            :total="listTotal">
-          </el-pagination>
-        </div>
-      </div>
-    </div>
-
-    <!-- 新增编辑 -->
-    <el-dialog :title="addFormType === 'add' ? '新增优惠券':'编辑优惠券'" :visible.sync="addFormVisible" :show-close="false" width="50%" :close-on-click-modal="false" top="5vh">
-      <el-form ref="addForm" :model="addForm" :rules="addFormRules" label-position="right" label-width="110px" style="height: 70vh; overflow-y: scroll; padding-right: 20px;">
-        <el-form-item label="优惠券名称" prop="couponName">
-          <el-input v-model="addForm.couponName" autocomplete="off" placeholder="请输入优惠券名称" :disabled="addForm.flag === 'START'"></el-input>
-        </el-form-item>
-        <el-form-item label="优惠券类型" prop="couponType">
-          <el-radio-group v-model="addForm.couponType" :disabled="addForm.flag === 'START'">
-            <el-radio label="SATISFY">满减券</el-radio>
-            <el-radio label="GOODS">商品券</el-radio>
-          </el-radio-group>
-        </el-form-item>
-
-        <el-form-item label="领取条件" prop="receiveCrowd">
-          <el-radio-group v-model="addForm.receiveCrowd" :disabled="addForm.flag === 'START'">
-            <el-radio :label="0">所有用户</el-radio>
-            <el-radio :label="4">所有会员</el-radio>
-            <el-radio :label="3">所有业务员</el-radio>
-            <el-radio :label="1">指定标签</el-radio>
-            <el-radio :label="2">指定会员</el-radio>
-          </el-radio-group>
-        </el-form-item>
-
-        <el-form-item label="选择标签" prop="tagValue" v-if="addForm.receiveCrowd === 1">
-          <el-select v-model="tagValue" multiple placeholder="请选择标签" style="width: 100%" :disabled="addForm.flag === 'START'">
-            <el-option
-              v-for="item in tagList"
-              :value-key="item.value"
-              :key="item.value"
-              :label="item.name"
-              :value="item">
-              <span style="float: left; color: #999999;">{{ item.groupName }}</span>
-              <span style="float: left; margin: 0 5px; color: #999999;">-</span>
-              <span style="float: left;">{{ item.name }}</span>
-            </el-option>
-          </el-select>
-        </el-form-item>
-
-        <el-form-item label="选择会员" prop="memberList" v-if="addForm.receiveCrowd === 2">
-          <el-table :data="memberList" element-loading-text="Loading" border fit highlight-current-row stripe max-height="300px">
-            <el-table-column align="center" label="头像" prop="avatar">
-              <template slot-scope="scope">
-                <el-image style="width: 40px; height: 40px; border-radius: 50%;" :src="scope.row.avatar" :preview-src-list="[scope.row.avatar]" fit="cover"></el-image>
-              </template>
-            </el-table-column>
-            <el-table-column align="center" label="名称" prop="nickName"></el-table-column>
-            <el-table-column align="center" label="电话" prop="mobile" min-width="120"></el-table-column>
-            <el-table-column align="center" label="性别" prop="sex"></el-table-column>
-            <el-table-column align="center" label="地区" prop="city" min-width="100">
-                <template slot-scope="scope">
-                  {{ scope.row.province }}{{ scope.row.city }}
-                </template>
-              </el-table-column>
-            <el-table-column align="center" label="角色" prop="memberName" min-width="100">
-              <template slot-scope="scope">
-                {{ scope.row.type | MEMBER_CURRENT_TYPE_FILTER }}
-              </template>
-            </el-table-column>
-
-            <el-table-column align="center" label="操作" fixed="right">
-              <template slot-scope="scope">
-                <el-popconfirm title="确定删除吗？" @onConfirm="deleteMember(scope.$index)" >
-                  <el-button slot="reference" type="text">删除</el-button>
-                </el-popconfirm>
-              </template>
-            </el-table-column>
-          </el-table>
-          <div class="addMember"><el-button type="text" @click="addMember">添加会员</el-button></div>
-        </el-form-item>
-
-        <el-form-item label="指定商品" prop="goodsList" v-if="addForm.couponType == 'GOODS'">
-          <div class="goods-container">
-            <div class="item clearfix"  v-for="(item, index) in goodsList" :key='index'>
-              <el-input class="fl" style="width: 70%; margin-right: 10px;" readonly :value="item.goodsName"></el-input>
-              <el-button class="fl" @click="deleteGoods(index)">删除</el-button>
-            </div>
-            <div class="item clearfix" v-if="goodsList.length < maxGoodsCount">
-              <el-input class="fl" style="width: 70%; margin-right: 10px;" readonly></el-input>
-              <el-button type="primary" class="fl" @click="addGoods">选择</el-button>
-            </div>
-          </div>
-        </el-form-item>
-
-        <el-form-item label="订单满足金额" prop="orderAmount" v-if="addForm.couponType == 'SATISFY'">
-          <el-input v-model="addForm.orderAmount" autocomplete="off" placeholder="请输入订单满足金额" :disabled="addForm.flag === 'START'"></el-input>
-        </el-form-item>
-
-        <el-form-item label="优惠券面值" prop="couponValue">
-          <el-input v-model="addForm.couponValue" autocomplete="off" placeholder="请输入优惠券面值" :disabled="addForm.flag === 'START'"></el-input>
-        </el-form-item>
-
-        <el-form-item label="发放数量" prop="couponAmount" v-if="!isService">
-          <el-input v-model="addForm.couponAmount" autocomplete="off" placeholder="请输入发放数量"></el-input>
-        </el-form-item>
-
-        <el-form-item label="每人分享次数" prop="shareTimes" v-if="isService">
-          <el-input v-model="addForm.shareTimes" autocomplete="off" placeholder="请输入每人分享次数" :disabled="addForm.flag === 'START'"></el-input>
-        </el-form-item>
-
-        <el-form-item label="每人领用张数" prop="receiveLimitCount" v-if="!isService">
-          <el-input v-model="addForm.receiveLimitCount" autocomplete="off" placeholder="请输入每人领用张数" :disabled="addForm.flag === 'START'"></el-input>
-        </el-form-item>
-        
-        <el-form-item label="显示时间" prop="displayDate">
-          <el-date-picker
-            v-model="addForm.displayDate"
-            style="width: 100%"
-            type="datetime"
-            value-format="yyyy-MM-dd HH:mm:ss"
-            placeholder="选择日期时间"
-            :disabled="addForm.flag === 'START'">
-          </el-date-picker>
-        </el-form-item>
-        <el-form-item label="领取时间" prop="receiveDate">
-          <el-date-picker
-            v-model="addForm.receiveDate"
-            style="width: 100%"
-            type="daterange"
-            value-format="yyyy-MM-dd"
-            range-separator="至"
-            start-placeholder="开始日期"
-            end-placeholder="结束日期"
-            :disabled="addForm.flag === 'START'">
-          </el-date-picker>
-        </el-form-item>
-        <el-form-item label="使用时间" prop="activeDate">
-          <el-date-picker
-            v-model="addForm.activeDate"
-            style="width: 100%"
-            type="daterange"
-            value-format="yyyy-MM-dd"
-            range-separator="至"
-            start-placeholder="开始日期"
-            end-placeholder="结束日期"
-            :disabled="addForm.flag === 'START'">
-          </el-date-picker>
-        </el-form-item>
-        <el-form-item label="有效时间" prop="activeDay">
-          <div style="display: flex;">
-            自领优惠券后<el-input v-model="addForm.activeDay" autocomplete="off" placeholder="请输入" style="width: 100px; margin: 0 10px"></el-input>天内有效
-          </div>
-        </el-form-item>
-        <el-form-item label="使用说明" prop="note">
-          <el-input
-            type="textarea"
-            :autosize="{ minRows: 3, maxRows: 6}"
-            autocomplete="off"
-            placeholder="请输入使用说明"
-            v-model="addForm.note"
-            maxlength="100"
-            show-word-limit>
-          </el-input>
-        </el-form-item>
-        <el-form-item label="备注" prop="remark">
-          <el-input
-            type="textarea"
-            :autosize="{ minRows: 3, maxRows: 6}"
-            autocomplete="off"
-            placeholder="备注"
-            v-model="addForm.remark"
-            maxlength="100"
-            show-word-limit>
-          </el-input>
-        </el-form-item>
-        <el-upload
-          class="avatar-uploader"
-          style="height: 0;"
-          :action="baseURL + 'common/upload'"
-          :headers="myHeaders"
-          :show-file-list="false"
-          :on-success="uploadSuccess"
-          :before-upload="beforeUpload">
-        </el-upload>
-        <el-form-item label="弹窗图片" prop="imgUrl">
-          <div class="images">
-            <div class="main-img">
-              <div class="img" v-if="addForm.imgUrl" @mouseover="addForm.imgHover = true;" @mouseout="addForm.imgHover = false;">
-                <el-image ref="img" :src="addForm.imgUrl" :preview-src-list="[addForm.imgUrl]" style="width: 120px; height: 120px" fit="contain"></el-image>
-                <div class="mask" v-show="addForm.imgHover">
-                  <i class="el-icon-zoom-in" @click="previewImage()"></i>
-                  <i class="el-icon-upload2" @click="uploadImage()"></i>
-                </div>
-              </div>
-              <div class="add" v-else @click="uploadImage()">
-                <i class="el-icon-plus avatar-uploader-icon"></i>
-              </div>
-            </div>
-          </div>
-        </el-form-item>
-      </el-form>
-      <div slot="footer" class="dialog-footer">
-        <el-button @click="cancelAddForm">取 消</el-button>
-        <el-button type="primary" @click="submitAddForm">确 定</el-button>
-      </div>
-    </el-dialog>
-
-    <!-- 查看优惠券 -->
-    <el-dialog title="查看优惠券" :visible.sync="checkCouponVisible" :show-close="false" width="50%" top="10vh" :close-on-click-modal="false">
-      <div class="couponDetail">
-        <div class="item clearfix">
-          <span>优惠券名称：</span>
-          <span>{{couponDetail.couponName}}</span>
-        </div>
-        <div class="item clearfix">
-          <span>优惠券类型：</span>
-          <span v-if="couponDetail.couponType == 'SATISFY'">满减券</span>
-          <span v-if="couponDetail.couponType == 'GOODS'">商品券</span>
-        </div>
-        <div class="item clearfix">
-          <span>领取条件：</span>
-          <!-- <span v-if="couponDetail.receiveCrowd == 0">所有用户</span> -->
-          <span v-if="couponDetail.receiveCrowd == 3">所有业务员</span>
-          <span v-if="couponDetail.receiveCrowd == 4">所有会员</span>
-          <span v-if="couponDetail.receiveCrowd == 1">指定标签</span>
-          <span v-if="couponDetail.receiveCrowd == 2">指定会员</span>
-        </div>
-        <div class="item clearfix" v-if="couponDetail.receiveCrowd === 1">
-          <span>选择标签：</span>
-          <span>
-            <el-tag size="small" v-for="(item, index) in couponDetail.tagList" :key="index" style="margin-right: 5px">{{item.tagName}}</el-tag>
-          </span>
-        </div>
-        <div class="item clearfix" v-if="couponDetail.receiveCrowd === 2">
-          <span>选择会员：</span>
-          <span class="table-span">
-            <el-table :data="couponDetail.userList" element-loading-text="Loading" border fit highlight-current-row stripe max-height="300px">
-              <el-table-column align="center" label="头像" prop="avatar">
-                <template slot-scope="scope">
-                  <el-image style="width: 40px; height: 40px; border-radius: 50%;" :src="scope.row.avatar" :preview-src-list="[scope.row.avatar]" fit="cover"></el-image>
-                </template>
-              </el-table-column>
-              <el-table-column align="center" label="名称" prop="nickName"></el-table-column>
-              <el-table-column align="center" label="电话" prop="mobile" min-width="120"></el-table-column>
-              <el-table-column align="center" label="性别" prop="sex"></el-table-column>
-              <el-table-column align="center" label="地区" prop="city" min-width="100">
-                <template slot-scope="scope">
-                  {{ scope.row.province }}{{ scope.row.city }}
-                </template>
-              </el-table-column>
-              <el-table-column align="center" label="角色" prop="memberName" min-width="100">
-                <template slot-scope="scope">
-                  {{ scope.row.type | MEMBER_CURRENT_TYPE_FILTER }}
-                </template>
-              </el-table-column>
-            </el-table>
-          </span>
-        </div>
-        <div class="item clearfix" v-if="couponDetail.couponType == 'SATISFY'">
-          <span>订单满足金额：</span>
-          <span>{{couponDetail.orderAmount}}</span>
-        </div>
-        <div class="item clearfix" v-if="couponDetail.couponType == 'GOODS'">
-          <span>指定商品：</span>
-          <span>
-            <div v-for="(item, index) in couponDetail.goodsList" :key="index" style="margin-bottom: 10px;">
-              {{item.goodsName}}
-            </div>
-          </span>
-        </div>
-        <div class="item clearfix">
-          <span>优惠券面值：</span>
-          <span>{{couponDetail.couponValue}}</span>
-        </div>
-        
-        <template v-if="couponDetail.receiveCrowd == 3 || (couponDetail.receiveCrowd == 2 && couponDetail.userList.length>0 && couponDetail.userList[0].type == 'SERVICE')">
-          <div class="item clearfix">
-          <span>每人分享次数：</span>
-          <span>{{couponDetail.shareTimes}}</span>
-        </div>
-        </template>
-        <template v-else>
-          <div class="item clearfix">
-            <span>发放数量：</span>
-            <span>{{couponDetail.couponAmount}}</span>
-          </div>
-          <div class="item clearfix">
-            <span>每人领用张数：</span>
-            <span>{{couponDetail.receiveLimitCount}}</span>
-          </div>
-        </template>
-        <div class="item clearfix">
-          <span>显示时间：</span>
-          <span>{{couponDetail.displayTime}}</span>
-        </div>
-        <div class="item clearfix">
-          <span>领取时间：</span>
-          <span>{{couponDetail.obtainStartTime.slice(0, 10)}} - {{couponDetail.obtainEndTime.slice(0, 10)}}</span>
-        </div>
-        <div class="item clearfix">
-          <span>使用时间：</span>
-          <span>{{couponDetail.activeStartTime.slice(0, 10)}} - {{couponDetail.activeEndTime.slice(0, 10)}}</span>
-        </div>
-        <div class="item clearfix">
-          <span>使用说明：</span>
-          <span>{{couponDetail.note}}</span>
-        </div>
-        <div class="item clearfix">
-          <span>备注：</span>
-          <span>{{couponDetail.remark}}</span>
-        </div>
-      </div>
-      <span slot="footer" class="dialog-footer">
-        <el-button @click="checkCouponVisible = false">关 闭</el-button>
-      </span>
-    </el-dialog>
-
-    <!-- 选择商品 -->
-    <el-dialog title="选择商品" :visible.sync="addGoodsVisible" :show-close="false" width="50%" :close-on-click-modal="false">
-      <div class="dialog-container clearfix">
-        <div class="left fl">
-          <div class="item" @click="changeClassify('')">全部分类</div>
-          <div class="group" v-for="(item, index) in classifyList" :key="index">
-            <div class="item" @click="toggleOpen(index)">
-              <i :class="item.isOpen ? 'el-icon-caret-bottom':'el-icon-caret-right'"></i> {{item.name}}
-            </div>
-            <div class="child" v-if="item.isOpen">
-              <div class="item" v-for="(childItem, childIndex) in item.children" :key="childIndex" @click="changeClassify(childItem.categoryId)">{{childItem.name}}</div>
-            </div>
-          </div>
-        </div>
-        <div class="right fl">
-          <div class="search">
-            <el-input placeholder="请输入商品名称进行搜索" v-model="goods_keyword" class="input-with-select" clearable size="small" style="width: 250px">
-              <el-button slot="append" icon="el-icon-search" size="small" @click="getGoodsListByScreen"></el-button>
-            </el-input>
-          </div>
-          <div class="table" style="margin: 10px 0 20px;">
-            <el-table 
-              v-loading="goodsTable_listLoading" 
-              :data="goodsTable_dataList" 
-              element-loading-text="Loading" 
-              tooltip-effect="dark" 
-              style="width: 100%" 
-              max-height="270"
-              @selection-change="handleChooseGoods">
-              <el-table-column align="center" type="selection" :selectable='checkboxSelect' width="45"></el-table-column>
-              <el-table-column align="center" prop="goodsName" label="商品名称" min-width="200" show-overflow-tooltip></el-table-column>
-              <el-table-column align="center" prop="goodsPrice" label="价格" width="80"></el-table-column>
-              <el-table-column align="center" prop="stockNum" label="库存" width="80"></el-table-column>
-            </el-table>
-          </div>
-          <div class="pagination clearfix">
-            <div class="fr">
-              <el-pagination
-                @current-change="goodsTableCurrentChange"
-                :current-page="goodsTable_currentPage"
-                :page-size="goodsTable_pageSize"
-                background
-                layout="prev, pager, next"
-                :total="goodsTable_listTotal">
-              </el-pagination>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <div slot="footer" class="dialog-footer">
-        <el-button type="primary" @click="submitAddGoods">保 存</el-button>
-        <el-button @click="cancelAddGoods">取 消</el-button>
-      </div>
-    </el-dialog>
-
-    <!-- 选择会员 -->
-    <el-dialog title="选择会员" :visible.sync="addMemberVisible" :show-close="false" width="65%" :close-on-click-modal="false">
-      <div class="dialog-container2 clearfix">
-        <el-form ref="screenForm" :model="member_screenForm" size="small" label-position="left">
-          <el-row :gutter="20">
-            <el-col :xs="24" :sm="12" :lg="7">
-              <el-form-item label="关键词" prop="keyword" label-width="55px">
-                <el-input v-model="member_screenForm.keyword" placeholder="请输入会员名称/电话"></el-input>
-              </el-form-item>
-            </el-col>
-            <el-col :xs="24" :sm="12" :lg="7">
-              <el-form-item label="注册日期" prop="registerDate" label-width="70px">
-                <el-date-picker
-                  style="width: 100%"
-                  v-model="member_screenForm.registerDate"
-                  type="daterange"
-                  value-format="yyyy-MM-dd"
-                  range-separator="至"
-                  start-placeholder="开始日期"
-                  end-placeholder="结束日期">
-                </el-date-picker>
-              </el-form-item>
-            </el-col>
-            <el-col :xs="24" :sm="12" :lg="7">
-              <el-form-item label="" prop="type" label-width="20px">
-                <el-radio-group v-model="member_screenForm.type" :disabled="memberList.length > 0 ? true : false">
-                  <el-radio :label="'SERVICE'">业务员</el-radio>
-                  <el-radio :label="'GENERAL'">普通用户</el-radio>
-                </el-radio-group>
-              </el-form-item>
-            </el-col>
-            <el-col :xs="24" :sm="12" :lg="2" class="tr">
-              <el-button size="small" type="primary" @click="getMemberListByScreen">搜索</el-button>
-            </el-col>
-          </el-row>
-        </el-form>
-        <div class="table memberTable" style="margin: 10px 0 20px;">
-          <el-table 
-            v-loading="memberTable_listLoading" 
-            :data="memberTable_dataList" 
-            element-loading-text="Loading" 
-            tooltip-effect="dark" 
-            style="width: 100%" 
-            max-height="360"
-            @selection-change="handleChooseMember">
-            <el-table-column align="center" type="selection" :selectable='checkboxSelect' width="45"></el-table-column>
-            <el-table-column align="center" prop="nickName" label="会员名称" min-width="150"></el-table-column>
-            <el-table-column align="center" prop="sex" label="性别" min-width="100"></el-table-column>
-            <!-- <el-table-column align="center" label="地区" prop="city" min-width="100">
-              <template slot-scope="scope">
-                {{ scope.row.province }}{{ scope.row.city }}
-              </template>
-            </el-table-column> -->
-            <el-table-column align="center" prop="mobile" label="注册手机" min-width="100"></el-table-column>
-            <!-- <el-table-column align="center" prop="createTime" label="注册时间" min-width="100"></el-table-column> -->
-            <el-table-column align="center" prop="memberName" label="角色" min-width="100">
-              <template slot-scope="scope">
-                {{ scope.row.type | MEMBER_CURRENT_TYPE_FILTER }}
-              </template>
-            </el-table-column>
-            <el-table-column align="center" prop="memberName" label="状态" min-width="100">
-              <template slot-scope="scope">
-                <el-tag :type="scope.row.status ? 'success' : 'danger'">{{ scope.row.status | MEMBER_CURRENT_STATUS_FILTER }}</el-tag>
-              </template>
-            </el-table-column>
-          </el-table>
-        </div>
-        <div class="pagination clearfix">
-          <div class="fr">
-            <el-pagination
-              @current-change="memberTableCurrentChange"
-              :current-page="memberTable_currentPage"
-              :page-size="memberTable_pageSize"
-              background
-              layout="prev, pager, next"
-              :total="memberTable_listTotal">
-            </el-pagination>
-          </div>
-        </div>
-      </div>
-
+  <template-page ref="pageRef" :get-list="getList" :table-attributes="tableAttributes" :table-events="tableEvents"
+    :options-evens-group="optionsEvensGroup" :moreParameters="moreParameters" :column-parsing="columnParsing"
+    :operation="operation" :exportList="exportList">
+    <el-dialog title="" width="500px" custom-class="diy-dialog" append-to-body :modal="true" :visible.sync="formDialog"
+      :show-close="true" :close-on-click-modal="false" :modal-append-to-body="false" :before-close="formCancel">
+      <zj-form-container ref="formRef" :form-data="formData" :styleSwitch="false">
+        <zj-form-module :title="formDialogTitles[formDialogType]" label-width="100px" :showPackUp="false"
+          :form-data="formData" :form-items="formItems">
+        </zj-form-module>
+      </zj-form-container>
       <div slot="footer" class="dialog-footer">
-        <el-button type="primary" @click="submitAddMember">保 存</el-button>
-        <el-button @click="cancelAddMember">取 消</el-button>
+        <el-button size="mini" @click="formCancel">取 消</el-button>
+        <el-button size="mini" @click="formConfirm" type="primary">确 定</el-button>
       </div>
     </el-dialog>
-  </div>
+  </template-page>
 </template>
 
 <script>
-import {addCoupon, changeCouponFlag, editCoupon, getCouponDetail, getList, getClassifyList, getGoodsList, getTagList, getMemberList, reissueCoupon} from "@/api/coupon";
-import {MEMBER_CURRENT_TYPE, COUPON_CURRENT_FLAG} from "@/utils/select_data";
-import { downloadFiles } from '@/utils/util'
-import { getToken } from '@/utils/auth'
-
+import TemplatePage from '@/components/template/template-page-1.vue'
+import import_mixin from '@/components/template/import_mixin.js'
+import { required, mobileRequired, mobile } from '@/components/template/rules_verify.js'
+import { storageListPageV2, storagePageExport, addStorage, deleteStorage, editStorage, getList, getStorageDetail } from "@/api/storage";
 export default {
-  filters: {
-    typeFilter(type) {
-      const typeMap = {
-        'SATISFY': '满减券',
-        'DISCOUNT': '折扣券',
-        'RANDOM': '随机金额券',
-        'GOODS': '商品券',
-      }
-      return typeMap[type]
-    }
-  },
+  components: { TemplatePage },
+  mixins: [import_mixin],
   data() {
     return {
-      baseURL: process.env.VUE_APP_BASE_API,
-      myHeaders: {'x-token': getToken()},
-      tagList: [],
-      tagValue: [],
-      dataList: null, // 列表数据
-      listLoading: true, // 列表加载loading
-      screenForm: { // 筛选表单数据
-        couponName: '', // 优惠券名称
-        flag: '' // 标志
-      },
-      currentPage: 1, // 当前页码
-      pageSize: 10, // 每页数量
-      listTotal: 0, // 列表总数
-      select_flag: COUPON_CURRENT_FLAG,
-      editId:  null,
-      addFormType: 'add',
-      addFormVisible: false,
-      addForm: {
-        activeDay: '', // 有效时间
-        activeDate: [], // 使用时间
-        receiveDate: [], // 领取时间
-        displayDate: '', // 显示时间
-        couponId: '',
-        couponName: '', // 优惠券名称
-        couponAmount: 0, // 发放数量
-        couponType: 'SATISFY', // 优惠券类型
-        receiveCrowd: 3, // 领取条件
-        orderAmount: 0, // 订单满足金额
-        activeType: 1, // 用券时间类型（不需要填）
-        receiveLimitCount: 1, // 每人领用张数
-        shareTimes: 1, // 每人分享次数
-        couponValue: 0, // 优惠券面值
-        note: '', // 使用说明
-        remark: '', // 备注
-        flag: '',
-        imgUrl: '',
-        imgHover: false,
-      },
-      addFormRules: {
-        couponName: [
-          { required: true, message: '请填写优惠券名称', trigger: 'blur' }
-        ],
-        couponType: [
-          { required: true, message: '请选择优惠券类型', trigger: 'change' }
-        ],
-        receiveCrowd: [
-          { required: true, message: '请选择领取条件', trigger: 'change' }
-        ],
-        receiveLimitCount: [
-          { required: true, message: '请填写每人领用张数', trigger: 'blur' }
-        ],
-        shareTimes: [
-          { required: true, message: '请填写每人分享次数', trigger: 'blur' }
-        ],
-        couponValue: [
-          { required: true, message: '请填写优惠券面值', trigger: 'blur' }
-        ],
-        couponAmount: [
-          { required: true, message: '请填写发放数量', trigger: 'blur' }
-        ],
-        orderAmount: [
-          { required: true, message: '请输填写订单满足金额', trigger: 'blur' }
-        ],
-        // activeDate: [
-        //   { required: true, message: '请选择使用时间', trigger: 'change' }
-        // ],
-        receiveDate: [
-          { required: true, message: '请选择领取时间', trigger: 'change' }
-        ],
-        displayDate: [
-          { required: true, message: '请选择显示时间', trigger: 'change' }
+      // 事件组合
+      optionsEvensGroup: [
+        [
+          [
+            {
+              name: '新建',
+              isRole: true,
+              click: this.addData
+            }
+          ],
         ],
-        note: [
-          { required: true, message: '请填写使用说明', trigger: 'blur' }
-        ]
+      ],
+      // 表格属性
+      tableAttributes: {
+        // 启用勾选列
+        selectColumn: false
       },
-
-      goodsList: [], // 商品数据
-      addGoodsVisible: false,
-      maxGoodsCount: 10000000,
-      classifyList: [],
-      classifyCurrent: '',
-      goods_keyword: '',
-      goodsTable_dataList: null, // 列表数据
-      goodsTable_listLoading: true, // 列表加载loading
-      goodsTable_currentPage: 1, // 当前页码
-      goodsTable_pageSize: 10, // 每页数量
-      goodsTable_listTotal: 0, // 列表总数
-      goodsTable_choose: [], // table中 当前选择商品
-
-      memberList: [], // 会员数据
-      addMemberVisible: false,
-      member_screenForm: { // 筛选表单数据
-        keyword: '', // 名称
-        registerDate: [],
-        type: 'SERVICE',
+      // 表格事件
+      tableEvents: {
+        'selection-change': this.selectionChange
+      },
+      // 勾选选中行
+      recordSelected: [],
+      /** 表单变量 */
+      formDialogType: 0,
+      formDialogTitles: ["新增"],
+      formDialog: false,
+      formData: {
+        storageName: '',
+        storageMobile: '',
+        storageAddress: '',
       },
-      memberTable_dataList: null, // 列表数据
-      memberTable_listLoading: true, // 列表加载loading
-      memberTable_currentPage: 1, // 当前页码
-      memberTable_pageSize: 10, // 每页数量
-      memberTable_listTotal: 0, // 列表总数
-      memberTable_choose: [], // table中 当前选择会员
-
-      checkCouponVisible: false, // 查看优惠券弹窗
-      couponDetail: {
-        activeStartTime: '',
-        activeEndTime: '',
-        obtainStartTime: '',
-        obtainEndTime: '',
-      }, // 优惠券详情
-
-      select_type: MEMBER_CURRENT_TYPE
     }
   },
   computed: {
-    isService() {
-      if(this.addForm.receiveCrowd == 3) {
-        return true;
-      }
-      if(this.addForm.receiveCrowd == 2 && this.memberType == 'SERVICE') {
-        return true;
-      }
-      return false;
-    },
-
-    memberType() {
-      if(this.memberList.length > 0) {
-        return this.memberList[0].type;
-      }else {
-        return '';
-      }
+    // 更多参数
+    moreParameters() {
+      return []
+    },
+    formItems() {
+      return [{
+        md: 24,
+        isShow: true,
+        name: 'el-input',
+        attributes: { placeholder: '请输入' },
+        formItemAttributes: {
+          label: '仓储名称',
+          prop: 'storageName',
+          rules: [...required]
+        }
+      }, {
+        md: 24,
+        isShow: true,
+        name: 'el-input',
+        attributes: { placeholder: '请输入' },
+        formItemAttributes: {
+          label: '仓储电话',
+          prop: 'storageMobile',
+          rules: [...mobile]
+        }
+      }, {
+        md: 24,
+        isShow: true,
+        name: 'el-input',
+        attributes: { placeholder: '请输入' },
+        formItemAttributes: {
+          label: '仓储地址',
+          prop: 'storageAddress',
+          rules: []
+        }
+      }]
     }
   },
-  created() {
-    this.getList();
-  },
   methods: {
-    getList() {
-      this.listLoading = true;
-
-      let params = {
-        couponName: this.screenForm.couponName,
-        flag: this.screenForm.flag,
-        pageNum: this.currentPage,
-        pageSize: this.pageSize
-      }
-
-      getList(params).then(res => {
-        this.dataList = res.data.records;
-        this.listTotal = res.data.total;
-        this.listLoading = false;
-      })
-    },
-
-    // 提交筛选表单
-    submitScreenForm() {
-      this.currentPage = 1;
-      this.getList();
-    },
-
-    // 重置筛选表单
-    resetScreenForm() {
-      this.$refs.screenForm.resetFields();
-      this.currentPage = 1;
-      this.getList();
-    },
-
-    // 更改每页数量
-    handleSizeChange(val) {
-      this.pageSize = val;
-      this.currentPage = 1;
-      this.getList();
-    },
-
-    // 更改当前页
-    handleCurrentChange(val) {
-      this.currentPage = val;
-      this.getList();
-    },
-
-    dateCompute(row, type) {
-      if (type === 1) {
-        return row.activeStartTime.split(' ')[0].replaceAll('-', '.') + ' - ' + row.activeEndTime.split(' ')[0].replaceAll('-', '.')
-      } else {
-        if (row.releaseStartTime) {
-          return row.releaseStartTime.split(' ')[0].replaceAll('-', '.') + ' - ' + row.releaseEndTime.split(' ')[0].replaceAll('-', '.')
-        }
-        return ''
-      }
-    },
-
-    // 获取标签列表
-    getTagList() {
-      getTagList({
-        pageNum: 1,
-        pageSize: 1000,
-      }).then(res => {
-        res.data.records.forEach(item => {
-          item.value = item.tagId;
-          item.tagName = item.name;
-        });
-        this.tagList = res.data.records;
-      })
-    },
-
-    addOrEdit(type, id) {
-      this.addFormType = type;
-      this.addFormVisible = true;
-      this.getTagList();
-      if(type == 'edit') {
-        this.editId = id;
-        getCouponDetail({ couponId: id }).then(res => {
-          this.addForm = {
-            couponId: res.data.couponId,
-            couponName: res.data.couponName,
-            couponAmount: res.data.couponAmount,
-            couponType: res.data.couponType,
-            orderAmount: res.data.orderAmount,
-            activeType: res.data.activeType,
-            receiveCrowd: res.data.receiveCrowd,
-            receiveLimitCount: res.data.receiveLimitCount,
-            shareTimes: res.data.shareTimes,
-            couponValue: res.data.couponValue,
-            note: res.data.note,
-            remark: res.data.remark,
-            flag: res.data.flag,
-            displayDate: res.data.displayTime,
-            activeDay: res.data.activeDay,
-            imgUrl: res.data.imgSrc,
-            imgHover: false,
-          }
-          this.$set(this.addForm, 'activeDate', [res.data.activeStartTime.split(' ')[0], res.data.activeEndTime.split(' ')[0]])
-          this.$set(this.addForm, 'receiveDate', [res.data.obtainStartTime.split(' ')[0], res.data.obtainEndTime.split(' ')[0]])
-          this.goodsList = res.data.goodsList;
-          this.memberList = res.data.userList;
-          res.data.tagList.forEach(item => {
-            item.value = item.tagId;
-          });
-          this.tagValue = res.data.tagList;
-        })
-      }else {
-        this.addForm.flag = '';
-      }
-    },
-
-    // 取消 新增编辑
-    cancelAddForm(){
-      this.addFormVisible = false;
-      this.$refs.addForm.resetFields();
-    },
-
-    // 提交 新增编辑
-    submitAddForm() {
-      this.$refs.addForm.validate((valid) => {
-        if (valid) {
-          if(!this.addForm.activeDay && (!this.addForm.activeDate || !this.addForm.activeDate.length)) {
-            return this.$errorMsg('请选择使用时间 或 填写有效时间');
-          }
-          let params = {
-            couponName: this.addForm.couponName,
-            couponAmount: this.addForm.couponAmount,
-            couponType: this.addForm.couponType,
-            activeType: this.addForm.activeType,
-            activeDay: this.addForm.activeDay,
-            activeStartTime: (this.addForm.activeDate && this.addForm.activeDate[0]) ? this.addForm.activeDate[0] + ' 00:00:00' : '',
-            activeEndTime: (this.addForm.activeDate && this.addForm.activeDate[1]) ? this.addForm.activeDate[1] + ' 23:59:59' : '',
-            obtainStartTime: this.addForm.receiveDate[0] + ' 00:00:00',
-            obtainEndTime: this.addForm.receiveDate[1] + ' 23:59:59',
-            displayTime: this.addForm.displayDate + ' 00:00:00',
-            receiveCrowd: this.addForm.receiveCrowd,
-            receiveLimitCount: this.addForm.receiveLimitCount,
-            shareTimes: this.addForm.shareTimes,
-            couponValue: this.addForm.couponValue,
-            note: this.addForm.note,
-            remark: this.addForm.remark,
-            imgSrc: this.addForm.imgUrl,
-          }
-          if(this.addForm.couponType == 'SATISFY') {
-            params.orderAmount = this.addForm.orderAmount;
-          }else if(this.addForm.couponType == 'GOODS') {
-            params.goodsList = this.goodsList;
-          }
-          if(this.addForm.receiveCrowd === 1) {
-            if(this.tagValue.length < 1) {
-              return this.$errorMsg('请选择标签');
-            }
-            params.tagList = this.tagValue;
-          }else if(this.addForm.receiveCrowd === 2) {
-            if(this.memberList.length < 1) {
-              return this.$errorMsg('请选择会员');
-            }
-            params.userList = this.memberList;
-          }
-          if(this.addFormType == 'edit') {
-            params.couponId = this.editId;
-            editCoupon(params).then(res => {
-              this.$successMsg('编辑成功');
-              this.getList();
-              this.cancelAddForm();
-            })
-          } else {
-            addCoupon(params).then(res => {
-              this.$successMsg('新增成功');
-              this.getList();
-              this.cancelAddForm();
+    // 列表请求函数
+    getList: storageListPageV2,
+    // 列表导出函数
+    exportList: storagePageExport,
+    // 表格列解析渲染数据更改
+    columnParsing(defaultData) {
+      return defaultData
+    },
+    // 监听勾选变化
+    selectionChange(data) {
+      this.recordSelected = data
+    },
+    // 表格操作列
+    operation(h, { row, index, column }) {
+      return (
+        <div class='operation-btns'>
+          <el-button type="text" onClick={() => {
+            getStorageDetail({ id: row.storageId }).then(res => {
+              Object.assign(this.formData, res.data)
+              this.formDialogType = 1
+              this.openForm()
             })
-          }
-        }
-      })
-    },
-
-    // 获取分类列表
-    getClassifyList() {
-      getClassifyList({categoryLevel: 1, status: true}).then(res => {
-        res.data.forEach(item => {
-          item.isOpen = false;
-        });
-        this.classifyList = res.data;
-        this.classifyCurrent = '';
-        this.getGoodsList();
-      })
-    },
-
-    // 展开/收起 分类
-    toggleOpen(index) {
-      this.classifyList[index].isOpen = !this.classifyList[index].isOpen;
-    },
-
-    // 切换分类
-    changeClassify(cid) {
-      if(this.goodsTable_choose.length > 0) {
-        return this.$errorMsg('当前已选择商品，不可切换分类');
-      }
-      this.classifyCurrent = cid;
-      this.goodsTable_currentPage = 1;
-      this.getGoodsList();
-    },
-
-    // 搜索
-    getGoodsListByScreen() {
-      if(this.goodsTable_choose.length > 0) {
-        return this.$errorMsg('当前已选择商品，不可搜索');
-      }
-      this.goodsTable_currentPage = 1;
-      this.getGoodsList();
-    },
-
-    // 获取商品列表
-    getGoodsList() {
-      getGoodsList({
-        pageNum: this.goodsTable_currentPage,
-        pageSize: this.goodsTable_pageSize,
-        keyword: this.goods_keyword,
-        categoryId: this.classifyCurrent,
-      }).then(res => {
-        let oldGoodsList = this.goodsList;
-        let newGoodsList = res.data.records;
-        for(let i = 0; i < oldGoodsList.length; i++) {
-          let oldItem = oldGoodsList[i]
-          for(let j = 0; j < newGoodsList.length; j++) {
-            let newItem = newGoodsList[j]
-            if(newItem.goodsId === oldItem.goodsId){
-              newGoodsList[j].selected = true;
-              break;
-            }
-          }
-        }
-        this.goodsTable_dataList = newGoodsList;
-        this.goodsTable_listTotal = res.data.total;
-        this.goodsTable_listLoading = false;
-      })
-    },
-
-    // 查询重复值并禁选
-    checkboxSelect (row, rowIndex) {
-      if (row.selected) {
-        return false // 禁用
-      }else{
-        return true // 不禁用
-      }
-    },
-
-    // 更改列表当前页
-    goodsTableCurrentChange(val) {
-      if(this.goodsTable_choose.length > 0) {
-        return this.$errorMsg('当前已选择商品，不可切换分页');
-      }
-      this.goodsTable_currentPage = val;
-      this.getGoodsList();
-    },
-
-    // table点击选择商品
-    handleChooseGoods(val) {
-      this.goodsTable_choose = val;
-    },
-
-    // 添加商品
-    addGoods() {
-      this.addGoodsVisible = true;
-      this.getGoodsList();
-    },
-
-    // 删除商品
-    deleteGoods(index) {
-      this.goodsList.splice(index, 1);
-    },
-
-    // 取消 选择商品
-    cancelAddGoods(){
-      this.addGoodsVisible = false;
-    },
-
-    // 提交 选择商品
-    submitAddGoods() {
-      // if(this.goodsTable_choose.length > 1) {
-      //   return this.$errorMsg('每次只能选择一个商品');
-      // }
-      let oldGoodsList = this.goodsList;
-      let newGoodsList = this.goodsTable_choose;
-      this.goodsList = oldGoodsList.concat(newGoodsList);
-      this.addGoodsVisible = false;
-    },
-
-    // 搜索
-    getMemberListByScreen() {
-      if(this.memberTable_choose.length > 0) {
-        return this.$errorMsg('当前已选择会员，不可搜索');
-      }
-      this.memberTable_currentPage = 1;
-      this.getMemberList();
-    },
-
-    // 获取会员列表
-    getMemberList() {
-      getMemberList({
-        pageNum: this.memberTable_currentPage,
-        pageSize: this.memberTable_pageSize,
-        keyword: this.member_screenForm.keyword,
-        type: this.member_screenForm.type,
-        startTime: this.member_screenForm.registerDate && this.member_screenForm.registerDate[0] ? this.member_screenForm.registerDate[0] + ' 00:00:00' : null,
-        endTime: this.member_screenForm.registerDate && this.member_screenForm.registerDate[1] ? this.member_screenForm.registerDate[1] + ' 23:59:59' : null,
-      }).then(res => {
-        let oldMemberList = this.memberList;
-        let newMemberList = res.data.records;
-        for(let i = 0; i < oldMemberList.length; i++) {
-          let oldItem = oldMemberList[i]
-          for(let j = 0; j < newMemberList.length; j++) {
-            let newItem = newMemberList[j]
-            if(newItem.userId === oldItem.userId){
-              newMemberList[j].selected = true;
-              break;
-            }
-          }
+          }}>编辑</el-button>
+          <el-popconfirm
+            title="确定删除吗？"
+            onConfirm={() => {
+              deleteStorage({ storageId: row.storageId }).then(() => {
+                this.$message({ type: 'success', message: '删除成功!' })
+                this.$refs.pageRef.refreshList()
+              })
+            }}
+          >
+            <el-button type="text" slot="reference">删除</el-button>
+          </el-popconfirm>
+        </div>
+      )
+    },
+    addData() {
+      this.formDialogType = 0
+      this.openForm()
+    },
+    openForm() {
+      this.formDialog = true;
+    },
+    formCancel() {
+      this.$refs.formRef.$refs.inlineForm.clearValidate()
+      this.$data.formData = this.$options.data().formData
+      this.formDialog = false
+    },
+    formConfirm() {
+      this.$refs.formRef.validate((valid, invalidFields, errLabels) => {
+        if (valid) {
+          ([addStorage, editStorage][this.formDialogType])(this.formData).then(res => {
+            this.$message({ type: 'success', message: `${this.formDialogTitles[this.formDialogType]}成功!` })
+            this.formCancel()
+            this.$refs.pageRef.refreshList()
+          })
         }
-        this.memberTable_dataList = newMemberList;
-        this.memberTable_listTotal = res.data.total;
-        this.memberTable_listLoading = false;
       })
-    },
-
-    // 更改列表当前页
-    memberTableCurrentChange(val) {
-      if(this.memberTable_choose.length > 0) {
-        return this.$errorMsg('当前已选择会员，不可切换分页');
-      }
-      this.memberTable_currentPage = val;
-      this.getMemberList();
-    },
-
-    // table点击选择会员
-    handleChooseMember(val) {
-      this.memberTable_choose = val;
-    },
-
-    // 添加会员
-    addMember() {
-      this.addMemberVisible = true;
-
-      if(this.memberList.length > 0) {
-        this.member_screenForm.type = this.memberList[0].type;
-      }
-      
-      this.getMemberList();
-    },
-
-    // 删除会员
-    deleteMember(index) {
-      this.memberList.splice(index, 1);
-    },
-
-    // 取消 选择会员
-    cancelAddMember(){
-      this.addMemberVisible = false;
-    },
-
-    // 提交 选择会员
-    submitAddMember() {
-      // if(this.memberTable_choose.length > 1) {
-      //   return this.$errorMsg('每次只能选择一个会员');
-      // }
-      let oldMemberList = this.memberList;
-      let newMemberList = this.memberTable_choose;
-      this.memberList = oldMemberList.concat(newMemberList);
-      this.addMemberVisible = false;
-    },
-
-    // 操作 - 更改优惠券标志为取消
-    changeFlag(couponId) {
-      let params = {
-        couponId: couponId,
-        flag: 'CANCEL',
-      }
-      changeCouponFlag(params).then(() => {
-        this.getList();
-        this.$successMsg('取消成功');
-      })
-    },
-
-    // 查看优惠券
-    checkCoupon(couponId) {
-      this.checkCouponVisible = true;
-      getCouponDetail({ couponId }).then(res => {
-        this.couponDetail = res.data;
-      })
-    },
-
-    // 导出
-    handleExport() {
-      let screenData = {
-        couponName: this.screenForm.couponName,
-        flag: this.screenForm.flag,
-      };
-      downloadFiles('coupon/list/export', screenData);
-    },
-
-    // 补发业务员优惠券
-    reissueCoupon(couponId) {
-      reissueCoupon({couponId}).then(res => {
-        this.getList();
-        this.$successMsg();
-      })
-    },
-
-    uploadImage() {
-      document.querySelector('.avatar-uploader input').click();
-    },
-
-    // 上传图片
-    uploadSuccess(res, file) {
-      this.addForm.imgUrl = res.data.url;
-    },
-
-    beforeUpload(file) {
-      const fileSuffix = file.name.substring(file.name.lastIndexOf(".") + 1);
-      const whiteList = ['jpg', 'jpeg', 'png'];
-      if (whiteList.indexOf(fileSuffix) === -1) {
-        this.$errorMsg('只支持上传jpg/jpeg/png文件!');
-        return false;
-      }
-    },
-
-    // 预览图片
-    previewImage() {
-      this.$refs.img.showViewer = true;
-    },
+    }
   }
 }
 </script>
 
-<style scoped lang="scss">
-  .dialog-container {
-    .left {
-      width: 140px;
-      height: 350px;
-      overflow-y: scroll;
-      .group {
-        margin-top: 10px;
-      }
-      .child {
-        margin-top: 5px;
-        .item {
-          padding-left: 18px;
-        }
-      }
-      .item {
-        cursor: pointer;
-        line-height: 24px;
-      }
-    }
-    .right {
-      width: calc(100% - 140px);
-      height: 350px;
-      box-sizing: border-box;
-      padding-left: 20px;
-    }
-  }
-  .goods-container {
-    .item {
-      margin-bottom: 10px;
-      &:last-child {
-        margin-bottom: 0;
-      }
-    }
-  }
-  .couponDetail {
-    height: 60vh;
-    overflow-y: scroll;
-    padding-right: 20px;
-    .item {
-      font-size: 16px;
-      margin-bottom: 20px;
-      &>span {
-        float: left;
-        &:first-child {
-          width: 140px;
-          text-align: right;
-          margin-right: 10px;
-          font-weight: 500;
-        }
-      }
-      .table-span {
-        width: calc(100% - 170px);
-      }
-    }
-  }
-
-  .addMember {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    border: 1px solid #EBEEF5;
-    border-top: none;
-    height: 50px;
-  }
-
-  // .memberTable {
-  //   ::v-deep .el-table__header-wrapper .el-checkbox {
-  //     display: none;
-  //   }
-  // }
-
-  .images {
-    display: flex;
-    flex-wrap: wrap;
-    .main-img {
-      display: flex;
-      flex-direction: column;
-      justify-content: center;
-      align-items: center;
-      width: 120px;
-      margin-right: 20px;
-      .img {
-        border: 1px dashed #eaeaea;
-        border-radius: 5px;
-        overflow: hidden;
-        position: relative;
-        .el-image {
-          display: block;
-        }
-        .mask {
-          position: absolute;
-          left: 0;
-          top: 0;
-          width: 120px;
-          height: 120px;
-          background: rgba($color: #000000, $alpha: 0.3);
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          i {
-            font-size: 20px;
-            color: #ffffff;
-            cursor: pointer;
-            margin: 0 8px;
-          }
-        }
-      }
-      .text {
-        font-size: 14px;
-        color: #666666;
-      }
-    }
-    .add {
-      width: 120px;
-      height: 120px;
-      border: 1px dashed #eaeaea;
-      border-radius: 5px;
-      cursor: pointer;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      i {
-        font-size: 30px;
-        color: #999;
-      }
-    }
-  }
-    
-    
-</style>
+<style lang="scss" scoped></style>

src/views/mallManagement/activity/coupon_index/index_cp.vue

@@ -0,0 +1,1251 @@
+<template>
+  <div class="app-container">
+    <!-- 筛选条件 -->
+    <div class="screen-container">
+      <div class="top clearfix">
+        <div class="title fl">条件筛选</div>
+      </div>
+      <el-form ref="screenForm" :model="screenForm" label-width="90px" size="small" label-position="left">
+        <el-row :gutter="20">
+          <el-col :xs="24" :sm="12" :lg="6">
+            <el-form-item label="优惠券名称" prop="couponName">
+              <el-input v-model="screenForm.couponName" placeholder="请输入优惠券名称"></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :xs="12" :sm="12" :lg="6">
+            <el-form-item label="发布状态" prop="flag">
+              <el-select v-model="screenForm.flag" placeholder="全部发布状态" size="small">
+                <el-option label="全部" value=""></el-option>
+                <el-option :label="item.label" :value="item.value" v-for="(item, index) in select_flag"
+                  :key="index"></el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :xs="24" :sm="24" :lg="12" class="tr">
+            <el-form-item label="">
+              <el-button size="small" @click="resetScreenForm">清空</el-button>
+              <el-button size="small" type="primary" @click="submitScreenForm">搜索</el-button>
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+    </div>
+
+    <div class="mymain-container">
+      <div class="btn-group clearfix">
+        <div class="fl">
+          <el-button size="small" type="primary" icon="el-icon-plus" @click="addOrEdit('add')">新增优惠券</el-button>
+        </div>
+        <div class="fr">
+          <el-button size="small" type="primary" icon="el-icon-download" @click="handleExport">导出</el-button>
+        </div>
+      </div>
+
+      <div class="table">
+        <el-table v-loading="listLoading" :data="dataList" element-loading-text="Loading" border fit highlight-current-row
+          stripe>
+          <el-table-column align="center" label="券名称" prop="couponName" min-width="120"></el-table-column>
+          <el-table-column align="center" label="券类型" prop="couponType" min-width="120">
+            <template slot-scope="scope">
+              {{ scope.row.couponType | typeFilter }}
+            </template>
+          </el-table-column>
+          <el-table-column align="center" label="券面额" prop="couponValue"></el-table-column>
+          <el-table-column align="center" label="满足金额" prop="orderAmount"></el-table-column>
+          <el-table-column align="center" label="发放总量" prop="couponAmount"></el-table-column>
+          <el-table-column align="center" label="限领次数" prop="receiveLimitCount"></el-table-column>
+          <el-table-column align="center" label="领取数量" prop="receivedCount"></el-table-column>
+          <el-table-column align="center" label="使用数量" prop="usedCount"></el-table-column>
+          <el-table-column align="center" label="显示时间" min-width="160">
+            <template slot-scope="scope">
+              {{ scope.row.displayTime }}
+            </template>
+          </el-table-column>
+          <el-table-column align="center" label="领取时间" min-width="200">
+            <template slot-scope="scope">
+              {{ scope.row.obtainStartTime | dateToDayFilter }} 至 {{ scope.row.obtainEndTime | dateToDayFilter }}
+            </template>
+          </el-table-column>
+          <el-table-column align="center" label="使用时间" min-width="200">
+            <template slot-scope="scope">
+              {{ scope.row.activeStartTime | dateToDayFilter }} 至 {{ scope.row.activeEndTime | dateToDayFilter }}
+            </template>
+          </el-table-column>
+          <el-table-column align="center" label="商户" prop="companyName" min-width="120"></el-table-column>
+          <el-table-column align="center" label="状态" class-name="status-col">
+            <template slot-scope="scope">
+              {{ scope.row.releaseFlag | COUPON_CURRENT_FLAG_FILTER }}
+            </template>
+          </el-table-column>
+          <el-table-column align="center" label="创建时间" prop="createTime" min-width="160"></el-table-column>
+          <el-table-column align="center" label="操作" fixed="right" width="220">
+            <template slot-scope="scope">
+              <el-button type="text" @click="checkCoupon(scope.row.couponId)">查看</el-button>
+              <el-button v-if="scope.row.releaseFlag === 'WAIT'" type="text"
+                @click="addOrEdit('edit', scope.row.couponId)">编辑</el-button>
+              <el-popconfirm v-if="scope.row.releaseFlag === 'START'" style="margin-left: 10px;" title="确定取消吗？"
+                @onConfirm="changeFlag(scope.row.couponId)">
+                <el-button slot="reference" type="text">取消</el-button>
+              </el-popconfirm>
+              <el-popconfirm v-if="scope.row.releaseFlag === 'START'" style="margin-left: 10px;" title="确定补发业务员优惠券吗？"
+                @onConfirm="reissueCoupon(scope.row.couponId)">
+                <el-button slot="reference" type="text">补发业务员优惠券</el-button>
+              </el-popconfirm>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+
+      <div class="pagination clearfix">
+        <div class="fr">
+          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
+            :page-sizes="[10, 20, 30, 50]" :page-size="10" layout="total, sizes, prev, pager, next, jumper"
+            :total="listTotal">
+          </el-pagination>
+        </div>
+      </div>
+    </div>
+
+    <!-- 新增编辑 -->
+    <el-dialog :title="addFormType === 'add' ? '新增优惠券' : '编辑优惠券'" :visible.sync="addFormVisible" :show-close="false"
+      width="50%" :close-on-click-modal="false" top="5vh">
+      <el-form ref="addForm" :model="addForm" :rules="addFormRules" label-position="right" label-width="110px"
+        style="height: 70vh; overflow-y: scroll; padding-right: 20px;">
+        <el-form-item label="优惠券名称" prop="couponName">
+          <el-input v-model="addForm.couponName" autocomplete="off" placeholder="请输入优惠券名称"
+            :disabled="addForm.flag === 'START'"></el-input>
+        </el-form-item>
+        <el-form-item label="优惠券类型" prop="couponType">
+          <el-radio-group v-model="addForm.couponType" :disabled="addForm.flag === 'START'">
+            <el-radio label="SATISFY">满减券</el-radio>
+            <el-radio label="GOODS">商品券</el-radio>
+          </el-radio-group>
+        </el-form-item>
+
+        <el-form-item label="领取条件" prop="receiveCrowd">
+          <el-radio-group v-model="addForm.receiveCrowd" :disabled="addForm.flag === 'START'">
+            <el-radio :label="0">所有用户</el-radio>
+            <el-radio :label="4">所有会员</el-radio>
+            <el-radio :label="3">所有业务员</el-radio>
+            <el-radio :label="1">指定标签</el-radio>
+            <el-radio :label="2">指定会员</el-radio>
+          </el-radio-group>
+        </el-form-item>
+
+        <el-form-item label="选择标签" prop="tagValue" v-if="addForm.receiveCrowd === 1">
+          <el-select v-model="tagValue" multiple placeholder="请选择标签" style="width: 100%"
+            :disabled="addForm.flag === 'START'">
+            <el-option v-for="item in tagList" :value-key="item.value" :key="item.value" :label="item.name" :value="item">
+              <span style="float: left; color: #999999;">{{ item.groupName }}</span>
+              <span style="float: left; margin: 0 5px; color: #999999;">-</span>
+              <span style="float: left;">{{ item.name }}</span>
+            </el-option>
+          </el-select>
+        </el-form-item>
+
+        <el-form-item label="选择会员" prop="memberList" v-if="addForm.receiveCrowd === 2">
+          <el-table :data="memberList" element-loading-text="Loading" border fit highlight-current-row stripe
+            max-height="300px">
+            <el-table-column align="center" label="头像" prop="avatar">
+              <template slot-scope="scope">
+                <el-image style="width: 40px; height: 40px; border-radius: 50%;" :src="scope.row.avatar"
+                  :preview-src-list="[scope.row.avatar]" fit="cover"></el-image>
+              </template>
+            </el-table-column>
+            <el-table-column align="center" label="名称" prop="nickName"></el-table-column>
+            <el-table-column align="center" label="电话" prop="mobile" min-width="120"></el-table-column>
+            <el-table-column align="center" label="性别" prop="sex"></el-table-column>
+            <el-table-column align="center" label="地区" prop="city" min-width="100">
+              <template slot-scope="scope">
+                {{ scope.row.province }}{{ scope.row.city }}
+              </template>
+            </el-table-column>
+            <el-table-column align="center" label="角色" prop="memberName" min-width="100">
+              <template slot-scope="scope">
+                {{ scope.row.type | MEMBER_CURRENT_TYPE_FILTER }}
+              </template>
+            </el-table-column>
+
+            <el-table-column align="center" label="操作" fixed="right">
+              <template slot-scope="scope">
+                <el-popconfirm title="确定删除吗？" @onConfirm="deleteMember(scope.$index)">
+                  <el-button slot="reference" type="text">删除</el-button>
+                </el-popconfirm>
+              </template>
+            </el-table-column>
+          </el-table>
+          <div class="addMember"><el-button type="text" @click="addMember">添加会员</el-button></div>
+        </el-form-item>
+
+        <el-form-item label="指定商品" prop="goodsList" v-if="addForm.couponType == 'GOODS'">
+          <div class="goods-container">
+            <div class="item clearfix" v-for="(item, index) in goodsList" :key='index'>
+              <el-input class="fl" style="width: 70%; margin-right: 10px;" readonly :value="item.goodsName"></el-input>
+              <el-button class="fl" @click="deleteGoods(index)">删除</el-button>
+            </div>
+            <div class="item clearfix" v-if="goodsList.length < maxGoodsCount">
+              <el-input class="fl" style="width: 70%; margin-right: 10px;" readonly></el-input>
+              <el-button type="primary" class="fl" @click="addGoods">选择</el-button>
+            </div>
+          </div>
+        </el-form-item>
+
+        <el-form-item label="订单满足金额" prop="orderAmount" v-if="addForm.couponType == 'SATISFY'">
+          <el-input v-model="addForm.orderAmount" autocomplete="off" placeholder="请输入订单满足金额"
+            :disabled="addForm.flag === 'START'"></el-input>
+        </el-form-item>
+
+        <el-form-item label="优惠券面值" prop="couponValue">
+          <el-input v-model="addForm.couponValue" autocomplete="off" placeholder="请输入优惠券面值"
+            :disabled="addForm.flag === 'START'"></el-input>
+        </el-form-item>
+
+        <el-form-item label="发放数量" prop="couponAmount" v-if="!isService">
+          <el-input v-model="addForm.couponAmount" autocomplete="off" placeholder="请输入发放数量"></el-input>
+        </el-form-item>
+
+        <el-form-item label="每人分享次数" prop="shareTimes" v-if="isService">
+          <el-input v-model="addForm.shareTimes" autocomplete="off" placeholder="请输入每人分享次数"
+            :disabled="addForm.flag === 'START'"></el-input>
+        </el-form-item>
+
+        <el-form-item label="每人领用张数" prop="receiveLimitCount" v-if="!isService">
+          <el-input v-model="addForm.receiveLimitCount" autocomplete="off" placeholder="请输入每人领用张数"
+            :disabled="addForm.flag === 'START'"></el-input>
+        </el-form-item>
+
+        <el-form-item label="显示时间" prop="displayDate">
+          <el-date-picker v-model="addForm.displayDate" style="width: 100%" type="datetime"
+            value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择日期时间" :disabled="addForm.flag === 'START'">
+          </el-date-picker>
+        </el-form-item>
+        <el-form-item label="领取时间" prop="receiveDate">
+          <el-date-picker v-model="addForm.receiveDate" style="width: 100%" type="daterange" value-format="yyyy-MM-dd"
+            range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" :disabled="addForm.flag === 'START'">
+          </el-date-picker>
+        </el-form-item>
+        <el-form-item label="使用时间" prop="activeDate">
+          <el-date-picker v-model="addForm.activeDate" style="width: 100%" type="daterange" value-format="yyyy-MM-dd"
+            range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" :disabled="addForm.flag === 'START'">
+          </el-date-picker>
+        </el-form-item>
+        <el-form-item label="有效时间" prop="activeDay">
+          <div style="display: flex;">
+            自领优惠券后<el-input v-model="addForm.activeDay" autocomplete="off" placeholder="请输入"
+              style="width: 100px; margin: 0 10px"></el-input>天内有效
+          </div>
+        </el-form-item>
+        <el-form-item label="使用说明" prop="note">
+          <el-input type="textarea" :autosize="{ minRows: 3, maxRows: 6 }" autocomplete="off" placeholder="请输入使用说明"
+            v-model="addForm.note" maxlength="100" show-word-limit>
+          </el-input>
+        </el-form-item>
+        <el-form-item label="备注" prop="remark">
+          <el-input type="textarea" :autosize="{ minRows: 3, maxRows: 6 }" autocomplete="off" placeholder="备注"
+            v-model="addForm.remark" maxlength="100" show-word-limit>
+          </el-input>
+        </el-form-item>
+        <el-upload class="avatar-uploader" style="height: 0;" :action="baseURL + 'common/upload'" :headers="myHeaders"
+          :show-file-list="false" :on-success="uploadSuccess" :before-upload="beforeUpload">
+        </el-upload>
+        <el-form-item label="弹窗图片" prop="imgUrl">
+          <div class="images">
+            <div class="main-img">
+              <div class="img" v-if="addForm.imgUrl" @mouseover="addForm.imgHover = true;"
+                @mouseout="addForm.imgHover = false;">
+                <el-image ref="img" :src="addForm.imgUrl" :preview-src-list="[addForm.imgUrl]"
+                  style="width: 120px; height: 120px" fit="contain"></el-image>
+                <div class="mask" v-show="addForm.imgHover">
+                  <i class="el-icon-zoom-in" @click="previewImage()"></i>
+                  <i class="el-icon-upload2" @click="uploadImage()"></i>
+                </div>
+              </div>
+              <div class="add" v-else @click="uploadImage()">
+                <i class="el-icon-plus avatar-uploader-icon"></i>
+              </div>
+            </div>
+          </div>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="cancelAddForm">取 消</el-button>
+        <el-button type="primary" @click="submitAddForm">确 定</el-button>
+      </div>
+    </el-dialog>
+
+    <!-- 查看优惠券 -->
+    <el-dialog title="查看优惠券" :visible.sync="checkCouponVisible" :show-close="false" width="50%" top="10vh"
+      :close-on-click-modal="false">
+      <div class="couponDetail">
+        <div class="item clearfix">
+          <span>优惠券名称：</span>
+          <span>{{ couponDetail.couponName }}</span>
+        </div>
+        <div class="item clearfix">
+          <span>优惠券类型：</span>
+          <span v-if="couponDetail.couponType == 'SATISFY'">满减券</span>
+          <span v-if="couponDetail.couponType == 'GOODS'">商品券</span>
+        </div>
+        <div class="item clearfix">
+          <span>领取条件：</span>
+          <!-- <span v-if="couponDetail.receiveCrowd == 0">所有用户</span> -->
+          <span v-if="couponDetail.receiveCrowd == 3">所有业务员</span>
+          <span v-if="couponDetail.receiveCrowd == 4">所有会员</span>
+          <span v-if="couponDetail.receiveCrowd == 1">指定标签</span>
+          <span v-if="couponDetail.receiveCrowd == 2">指定会员</span>
+        </div>
+        <div class="item clearfix" v-if="couponDetail.receiveCrowd === 1">
+          <span>选择标签：</span>
+          <span>
+            <el-tag size="small" v-for="(item, index) in couponDetail.tagList" :key="index"
+              style="margin-right: 5px">{{ item.tagName }}</el-tag>
+          </span>
+        </div>
+        <div class="item clearfix" v-if="couponDetail.receiveCrowd === 2">
+          <span>选择会员：</span>
+          <span class="table-span">
+            <el-table :data="couponDetail.userList" element-loading-text="Loading" border fit highlight-current-row stripe
+              max-height="300px">
+              <el-table-column align="center" label="头像" prop="avatar">
+                <template slot-scope="scope">
+                  <el-image style="width: 40px; height: 40px; border-radius: 50%;" :src="scope.row.avatar"
+                    :preview-src-list="[scope.row.avatar]" fit="cover"></el-image>
+                </template>
+              </el-table-column>
+              <el-table-column align="center" label="名称" prop="nickName"></el-table-column>
+              <el-table-column align="center" label="电话" prop="mobile" min-width="120"></el-table-column>
+              <el-table-column align="center" label="性别" prop="sex"></el-table-column>
+              <el-table-column align="center" label="地区" prop="city" min-width="100">
+                <template slot-scope="scope">
+                  {{ scope.row.province }}{{ scope.row.city }}
+                </template>
+              </el-table-column>
+              <el-table-column align="center" label="角色" prop="memberName" min-width="100">
+                <template slot-scope="scope">
+                  {{ scope.row.type | MEMBER_CURRENT_TYPE_FILTER }}
+                </template>
+              </el-table-column>
+            </el-table>
+          </span>
+        </div>
+        <div class="item clearfix" v-if="couponDetail.couponType == 'SATISFY'">
+          <span>订单满足金额：</span>
+          <span>{{ couponDetail.orderAmount }}</span>
+        </div>
+        <div class="item clearfix" v-if="couponDetail.couponType == 'GOODS'">
+          <span>指定商品：</span>
+          <span>
+            <div v-for="(item, index) in couponDetail.goodsList" :key="index" style="margin-bottom: 10px;">
+              {{ item.goodsName }}
+            </div>
+          </span>
+        </div>
+        <div class="item clearfix">
+          <span>优惠券面值：</span>
+          <span>{{ couponDetail.couponValue }}</span>
+        </div>
+
+        <template
+          v-if="couponDetail.receiveCrowd == 3 || (couponDetail.receiveCrowd == 2 && couponDetail.userList.length > 0 && couponDetail.userList[0].type == 'SERVICE')">
+          <div class="item clearfix">
+            <span>每人分享次数：</span>
+            <span>{{ couponDetail.shareTimes }}</span>
+          </div>
+        </template>
+        <template v-else>
+          <div class="item clearfix">
+            <span>发放数量：</span>
+            <span>{{ couponDetail.couponAmount }}</span>
+          </div>
+          <div class="item clearfix">
+            <span>每人领用张数：</span>
+            <span>{{ couponDetail.receiveLimitCount }}</span>
+          </div>
+        </template>
+        <div class="item clearfix">
+          <span>显示时间：</span>
+          <span>{{ couponDetail.displayTime }}</span>
+        </div>
+        <div class="item clearfix">
+          <span>领取时间：</span>
+          <span>{{ couponDetail.obtainStartTime.slice(0, 10) }} - {{ couponDetail.obtainEndTime.slice(0, 10) }}</span>
+        </div>
+        <div class="item clearfix">
+          <span>使用时间：</span>
+          <span>{{ couponDetail.activeStartTime.slice(0, 10) }} - {{ couponDetail.activeEndTime.slice(0, 10) }}</span>
+        </div>
+        <div class="item clearfix">
+          <span>使用说明：</span>
+          <span>{{ couponDetail.note }}</span>
+        </div>
+        <div class="item clearfix">
+          <span>备注：</span>
+          <span>{{ couponDetail.remark }}</span>
+        </div>
+      </div>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="checkCouponVisible = false">关 闭</el-button>
+      </span>
+    </el-dialog>
+
+    <!-- 选择商品 -->
+    <el-dialog title="选择商品" :visible.sync="addGoodsVisible" :show-close="false" width="50%" :close-on-click-modal="false">
+      <div class="dialog-container clearfix">
+        <div class="left fl">
+          <div class="item" @click="changeClassify('')">全部分类</div>
+          <div class="group" v-for="(item, index) in classifyList" :key="index">
+            <div class="item" @click="toggleOpen(index)">
+              <i :class="item.isOpen ? 'el-icon-caret-bottom' : 'el-icon-caret-right'"></i> {{ item.name }}
+            </div>
+            <div class="child" v-if="item.isOpen">
+              <div class="item" v-for="(childItem, childIndex) in item.children" :key="childIndex"
+                @click="changeClassify(childItem.categoryId)">{{ childItem.name }}</div>
+            </div>
+          </div>
+        </div>
+        <div class="right fl">
+          <div class="search">
+            <el-input placeholder="请输入商品名称进行搜索" v-model="goods_keyword" class="input-with-select" clearable size="small"
+              style="width: 250px">
+              <el-button slot="append" icon="el-icon-search" size="small" @click="getGoodsListByScreen"></el-button>
+            </el-input>
+          </div>
+          <div class="table" style="margin: 10px 0 20px;">
+            <el-table v-loading="goodsTable_listLoading" :data="goodsTable_dataList" element-loading-text="Loading"
+              tooltip-effect="dark" style="width: 100%" max-height="270" @selection-change="handleChooseGoods">
+              <el-table-column align="center" type="selection" :selectable='checkboxSelect' width="45"></el-table-column>
+              <el-table-column align="center" prop="goodsName" label="商品名称" min-width="200"
+                show-overflow-tooltip></el-table-column>
+              <el-table-column align="center" prop="goodsPrice" label="价格" width="80"></el-table-column>
+              <el-table-column align="center" prop="stockNum" label="库存" width="80"></el-table-column>
+            </el-table>
+          </div>
+          <div class="pagination clearfix">
+            <div class="fr">
+              <el-pagination @current-change="goodsTableCurrentChange" :current-page="goodsTable_currentPage"
+                :page-size="goodsTable_pageSize" background layout="prev, pager, next" :total="goodsTable_listTotal">
+              </el-pagination>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="submitAddGoods">保 存</el-button>
+        <el-button @click="cancelAddGoods">取 消</el-button>
+      </div>
+    </el-dialog>
+
+    <!-- 选择会员 -->
+    <el-dialog title="选择会员" :visible.sync="addMemberVisible" :show-close="false" width="65%"
+      :close-on-click-modal="false">
+      <div class="dialog-container2 clearfix">
+        <el-form ref="screenForm" :model="member_screenForm" size="small" label-position="left">
+          <el-row :gutter="20">
+            <el-col :xs="24" :sm="12" :lg="7">
+              <el-form-item label="关键词" prop="keyword" label-width="55px">
+                <el-input v-model="member_screenForm.keyword" placeholder="请输入会员名称/电话"></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :xs="24" :sm="12" :lg="7">
+              <el-form-item label="注册日期" prop="registerDate" label-width="70px">
+                <el-date-picker style="width: 100%" v-model="member_screenForm.registerDate" type="daterange"
+                  value-format="yyyy-MM-dd" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
+                </el-date-picker>
+              </el-form-item>
+            </el-col>
+            <el-col :xs="24" :sm="12" :lg="7">
+              <el-form-item label="" prop="type" label-width="20px">
+                <el-radio-group v-model="member_screenForm.type" :disabled="memberList.length > 0 ? true : false">
+                  <el-radio :label="'SERVICE'">业务员</el-radio>
+                  <el-radio :label="'GENERAL'">普通用户</el-radio>
+                </el-radio-group>
+              </el-form-item>
+            </el-col>
+            <el-col :xs="24" :sm="12" :lg="2" class="tr">
+              <el-button size="small" type="primary" @click="getMemberListByScreen">搜索</el-button>
+            </el-col>
+          </el-row>
+        </el-form>
+        <div class="table memberTable" style="margin: 10px 0 20px;">
+          <el-table v-loading="memberTable_listLoading" :data="memberTable_dataList" element-loading-text="Loading"
+            tooltip-effect="dark" style="width: 100%" max-height="360" @selection-change="handleChooseMember">
+            <el-table-column align="center" type="selection" :selectable='checkboxSelect' width="45"></el-table-column>
+            <el-table-column align="center" prop="nickName" label="会员名称" min-width="150"></el-table-column>
+            <el-table-column align="center" prop="sex" label="性别" min-width="100"></el-table-column>
+            <!-- <el-table-column align="center" label="地区" prop="city" min-width="100">
+              <template slot-scope="scope">
+                {{ scope.row.province }}{{ scope.row.city }}
+              </template>
+            </el-table-column> -->
+            <el-table-column align="center" prop="mobile" label="注册手机" min-width="100"></el-table-column>
+            <!-- <el-table-column align="center" prop="createTime" label="注册时间" min-width="100"></el-table-column> -->
+            <el-table-column align="center" prop="memberName" label="角色" min-width="100">
+              <template slot-scope="scope">
+                {{ scope.row.type | MEMBER_CURRENT_TYPE_FILTER }}
+              </template>
+            </el-table-column>
+            <el-table-column align="center" prop="memberName" label="状态" min-width="100">
+              <template slot-scope="scope">
+                <el-tag :type="scope.row.status ? 'success' : 'danger'">{{ scope.row.status | MEMBER_CURRENT_STATUS_FILTER
+                }}</el-tag>
+              </template>
+            </el-table-column>
+          </el-table>
+        </div>
+        <div class="pagination clearfix">
+          <div class="fr">
+            <el-pagination @current-change="memberTableCurrentChange" :current-page="memberTable_currentPage"
+              :page-size="memberTable_pageSize" background layout="prev, pager, next" :total="memberTable_listTotal">
+            </el-pagination>
+          </div>
+        </div>
+      </div>
+
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="submitAddMember">保 存</el-button>
+        <el-button @click="cancelAddMember">取 消</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { addCoupon, changeCouponFlag, editCoupon, getCouponDetail, getList, getClassifyList, getGoodsList, getTagList, getMemberList, reissueCoupon } from "@/api/coupon";
+import { MEMBER_CURRENT_TYPE, COUPON_CURRENT_FLAG } from "@/utils/select_data";
+import { downloadFiles } from '@/utils/util'
+import { getToken } from '@/utils/auth'
+
+export default {
+  filters: {
+    typeFilter(type) {
+      const typeMap = {
+        'SATISFY': '满减券',
+        'DISCOUNT': '折扣券',
+        'RANDOM': '随机金额券',
+        'GOODS': '商品券',
+      }
+      return typeMap[type]
+    }
+  },
+  data() {
+    return {
+      baseURL: process.env.VUE_APP_BASE_API,
+      myHeaders: { 'x-token': getToken() },
+      tagList: [],
+      tagValue: [],
+      dataList: null, // 列表数据
+      listLoading: true, // 列表加载loading
+      screenForm: { // 筛选表单数据
+        couponName: '', // 优惠券名称
+        flag: '' // 标志
+      },
+      currentPage: 1, // 当前页码
+      pageSize: 10, // 每页数量
+      listTotal: 0, // 列表总数
+      select_flag: COUPON_CURRENT_FLAG,
+      editId: null,
+      addFormType: 'add',
+      addFormVisible: false,
+      addForm: {
+        activeDay: '', // 有效时间
+        activeDate: [], // 使用时间
+        receiveDate: [], // 领取时间
+        displayDate: '', // 显示时间
+        couponId: '',
+        couponName: '', // 优惠券名称
+        couponAmount: 0, // 发放数量
+        couponType: 'SATISFY', // 优惠券类型
+        receiveCrowd: 3, // 领取条件
+        orderAmount: 0, // 订单满足金额
+        activeType: 1, // 用券时间类型（不需要填）
+        receiveLimitCount: 1, // 每人领用张数
+        shareTimes: 1, // 每人分享次数
+        couponValue: 0, // 优惠券面值
+        note: '', // 使用说明
+        remark: '', // 备注
+        flag: '',
+        imgUrl: '',
+        imgHover: false,
+      },
+      addFormRules: {
+        couponName: [
+          { required: true, message: '请填写优惠券名称', trigger: 'blur' }
+        ],
+        couponType: [
+          { required: true, message: '请选择优惠券类型', trigger: 'change' }
+        ],
+        receiveCrowd: [
+          { required: true, message: '请选择领取条件', trigger: 'change' }
+        ],
+        receiveLimitCount: [
+          { required: true, message: '请填写每人领用张数', trigger: 'blur' }
+        ],
+        shareTimes: [
+          { required: true, message: '请填写每人分享次数', trigger: 'blur' }
+        ],
+        couponValue: [
+          { required: true, message: '请填写优惠券面值', trigger: 'blur' }
+        ],
+        couponAmount: [
+          { required: true, message: '请填写发放数量', trigger: 'blur' }
+        ],
+        orderAmount: [
+          { required: true, message: '请输填写订单满足金额', trigger: 'blur' }
+        ],
+        // activeDate: [
+        //   { required: true, message: '请选择使用时间', trigger: 'change' }
+        // ],
+        receiveDate: [
+          { required: true, message: '请选择领取时间', trigger: 'change' }
+        ],
+        displayDate: [
+          { required: true, message: '请选择显示时间', trigger: 'change' }
+        ],
+        note: [
+          { required: true, message: '请填写使用说明', trigger: 'blur' }
+        ]
+      },
+
+      goodsList: [], // 商品数据
+      addGoodsVisible: false,
+      maxGoodsCount: 10000000,
+      classifyList: [],
+      classifyCurrent: '',
+      goods_keyword: '',
+      goodsTable_dataList: null, // 列表数据
+      goodsTable_listLoading: true, // 列表加载loading
+      goodsTable_currentPage: 1, // 当前页码
+      goodsTable_pageSize: 10, // 每页数量
+      goodsTable_listTotal: 0, // 列表总数
+      goodsTable_choose: [], // table中 当前选择商品
+
+      memberList: [], // 会员数据
+      addMemberVisible: false,
+      member_screenForm: { // 筛选表单数据
+        keyword: '', // 名称
+        registerDate: [],
+        type: 'SERVICE',
+      },
+      memberTable_dataList: null, // 列表数据
+      memberTable_listLoading: true, // 列表加载loading
+      memberTable_currentPage: 1, // 当前页码
+      memberTable_pageSize: 10, // 每页数量
+      memberTable_listTotal: 0, // 列表总数
+      memberTable_choose: [], // table中 当前选择会员
+
+      checkCouponVisible: false, // 查看优惠券弹窗
+      couponDetail: {
+        activeStartTime: '',
+        activeEndTime: '',
+        obtainStartTime: '',
+        obtainEndTime: '',
+      }, // 优惠券详情
+
+      select_type: MEMBER_CURRENT_TYPE
+    }
+  },
+  computed: {
+    isService() {
+      if (this.addForm.receiveCrowd == 3) {
+        return true;
+      }
+      if (this.addForm.receiveCrowd == 2 && this.memberType == 'SERVICE') {
+        return true;
+      }
+      return false;
+    },
+
+    memberType() {
+      if (this.memberList.length > 0) {
+        return this.memberList[0].type;
+      } else {
+        return '';
+      }
+    }
+  },
+  created() {
+    this.getList();
+  },
+  methods: {
+    getList() {
+      this.listLoading = true;
+
+      let params = {
+        couponName: this.screenForm.couponName,
+        flag: this.screenForm.flag,
+        pageNum: this.currentPage,
+        pageSize: this.pageSize
+      }
+
+      getList(params).then(res => {
+        this.dataList = res.data.records;
+        this.listTotal = res.data.total;
+        this.listLoading = false;
+      })
+    },
+
+    // 提交筛选表单
+    submitScreenForm() {
+      this.currentPage = 1;
+      this.getList();
+    },
+
+    // 重置筛选表单
+    resetScreenForm() {
+      this.$refs.screenForm.resetFields();
+      this.currentPage = 1;
+      this.getList();
+    },
+
+    // 更改每页数量
+    handleSizeChange(val) {
+      this.pageSize = val;
+      this.currentPage = 1;
+      this.getList();
+    },
+
+    // 更改当前页
+    handleCurrentChange(val) {
+      this.currentPage = val;
+      this.getList();
+    },
+
+    dateCompute(row, type) {
+      if (type === 1) {
+        return row.activeStartTime.split(' ')[0].replaceAll('-', '.') + ' - ' + row.activeEndTime.split(' ')[0].replaceAll('-', '.')
+      } else {
+        if (row.releaseStartTime) {
+          return row.releaseStartTime.split(' ')[0].replaceAll('-', '.') + ' - ' + row.releaseEndTime.split(' ')[0].replaceAll('-', '.')
+        }
+        return ''
+      }
+    },
+
+    // 获取标签列表
+    getTagList() {
+      getTagList({
+        pageNum: 1,
+        pageSize: 1000,
+      }).then(res => {
+        res.data.records.forEach(item => {
+          item.value = item.tagId;
+          item.tagName = item.name;
+        });
+        this.tagList = res.data.records;
+      })
+    },
+
+    addOrEdit(type, id) {
+      this.addFormType = type;
+      this.addFormVisible = true;
+      this.getTagList();
+      if (type == 'edit') {
+        this.editId = id;
+        getCouponDetail({ couponId: id }).then(res => {
+          this.addForm = {
+            couponId: res.data.couponId,
+            couponName: res.data.couponName,
+            couponAmount: res.data.couponAmount,
+            couponType: res.data.couponType,
+            orderAmount: res.data.orderAmount,
+            activeType: res.data.activeType,
+            receiveCrowd: res.data.receiveCrowd,
+            receiveLimitCount: res.data.receiveLimitCount,
+            shareTimes: res.data.shareTimes,
+            couponValue: res.data.couponValue,
+            note: res.data.note,
+            remark: res.data.remark,
+            flag: res.data.flag,
+            displayDate: res.data.displayTime,
+            activeDay: res.data.activeDay,
+            imgUrl: res.data.imgSrc,
+            imgHover: false,
+          }
+          this.$set(this.addForm, 'activeDate', [res.data.activeStartTime.split(' ')[0], res.data.activeEndTime.split(' ')[0]])
+          this.$set(this.addForm, 'receiveDate', [res.data.obtainStartTime.split(' ')[0], res.data.obtainEndTime.split(' ')[0]])
+          this.goodsList = res.data.goodsList;
+          this.memberList = res.data.userList;
+          res.data.tagList.forEach(item => {
+            item.value = item.tagId;
+          });
+          this.tagValue = res.data.tagList;
+        })
+      } else {
+        this.addForm.flag = '';
+      }
+    },
+
+    // 取消 新增编辑
+    cancelAddForm() {
+      this.addFormVisible = false;
+      this.$refs.addForm.resetFields();
+    },
+
+    // 提交 新增编辑
+    submitAddForm() {
+      this.$refs.addForm.validate((valid) => {
+        if (valid) {
+          if (!this.addForm.activeDay && (!this.addForm.activeDate || !this.addForm.activeDate.length)) {
+            return this.$errorMsg('请选择使用时间 或 填写有效时间');
+          }
+          let params = {
+            couponName: this.addForm.couponName,
+            couponAmount: this.addForm.couponAmount,
+            couponType: this.addForm.couponType,
+            activeType: this.addForm.activeType,
+            activeDay: this.addForm.activeDay,
+            activeStartTime: (this.addForm.activeDate && this.addForm.activeDate[0]) ? this.addForm.activeDate[0] + ' 00:00:00' : '',
+            activeEndTime: (this.addForm.activeDate && this.addForm.activeDate[1]) ? this.addForm.activeDate[1] + ' 23:59:59' : '',
+            obtainStartTime: this.addForm.receiveDate[0] + ' 00:00:00',
+            obtainEndTime: this.addForm.receiveDate[1] + ' 23:59:59',
+            displayTime: this.addForm.displayDate + ' 00:00:00',
+            receiveCrowd: this.addForm.receiveCrowd,
+            receiveLimitCount: this.addForm.receiveLimitCount,
+            shareTimes: this.addForm.shareTimes,
+            couponValue: this.addForm.couponValue,
+            note: this.addForm.note,
+            remark: this.addForm.remark,
+            imgSrc: this.addForm.imgUrl,
+          }
+          if (this.addForm.couponType == 'SATISFY') {
+            params.orderAmount = this.addForm.orderAmount;
+          } else if (this.addForm.couponType == 'GOODS') {
+            params.goodsList = this.goodsList;
+          }
+          if (this.addForm.receiveCrowd === 1) {
+            if (this.tagValue.length < 1) {
+              return this.$errorMsg('请选择标签');
+            }
+            params.tagList = this.tagValue;
+          } else if (this.addForm.receiveCrowd === 2) {
+            if (this.memberList.length < 1) {
+              return this.$errorMsg('请选择会员');
+            }
+            params.userList = this.memberList;
+          }
+          if (this.addFormType == 'edit') {
+            params.couponId = this.editId;
+            editCoupon(params).then(res => {
+              this.$successMsg('编辑成功');
+              this.getList();
+              this.cancelAddForm();
+            })
+          } else {
+            addCoupon(params).then(res => {
+              this.$successMsg('新增成功');
+              this.getList();
+              this.cancelAddForm();
+            })
+          }
+        }
+      })
+    },
+
+    // 获取分类列表
+    getClassifyList() {
+      getClassifyList({ categoryLevel: 1, status: true }).then(res => {
+        res.data.forEach(item => {
+          item.isOpen = false;
+        });
+        this.classifyList = res.data;
+        this.classifyCurrent = '';
+        this.getGoodsList();
+      })
+    },
+
+    // 展开/收起 分类
+    toggleOpen(index) {
+      this.classifyList[index].isOpen = !this.classifyList[index].isOpen;
+    },
+
+    // 切换分类
+    changeClassify(cid) {
+      if (this.goodsTable_choose.length > 0) {
+        return this.$errorMsg('当前已选择商品，不可切换分类');
+      }
+      this.classifyCurrent = cid;
+      this.goodsTable_currentPage = 1;
+      this.getGoodsList();
+    },
+
+    // 搜索
+    getGoodsListByScreen() {
+      if (this.goodsTable_choose.length > 0) {
+        return this.$errorMsg('当前已选择商品，不可搜索');
+      }
+      this.goodsTable_currentPage = 1;
+      this.getGoodsList();
+    },
+
+    // 获取商品列表
+    getGoodsList() {
+      getGoodsList({
+        pageNum: this.goodsTable_currentPage,
+        pageSize: this.goodsTable_pageSize,
+        keyword: this.goods_keyword,
+        categoryId: this.classifyCurrent,
+      }).then(res => {
+        let oldGoodsList = this.goodsList;
+        let newGoodsList = res.data.records;
+        for (let i = 0; i < oldGoodsList.length; i++) {
+          let oldItem = oldGoodsList[i]
+          for (let j = 0; j < newGoodsList.length; j++) {
+            let newItem = newGoodsList[j]
+            if (newItem.goodsId === oldItem.goodsId) {
+              newGoodsList[j].selected = true;
+              break;
+            }
+          }
+        }
+        this.goodsTable_dataList = newGoodsList;
+        this.goodsTable_listTotal = res.data.total;
+        this.goodsTable_listLoading = false;
+      })
+    },
+
+    // 查询重复值并禁选
+    checkboxSelect(row, rowIndex) {
+      if (row.selected) {
+        return false // 禁用
+      } else {
+        return true // 不禁用
+      }
+    },
+
+    // 更改列表当前页
+    goodsTableCurrentChange(val) {
+      if (this.goodsTable_choose.length > 0) {
+        return this.$errorMsg('当前已选择商品，不可切换分页');
+      }
+      this.goodsTable_currentPage = val;
+      this.getGoodsList();
+    },
+
+    // table点击选择商品
+    handleChooseGoods(val) {
+      this.goodsTable_choose = val;
+    },
+
+    // 添加商品
+    addGoods() {
+      this.addGoodsVisible = true;
+      this.getGoodsList();
+    },
+
+    // 删除商品
+    deleteGoods(index) {
+      this.goodsList.splice(index, 1);
+    },
+
+    // 取消 选择商品
+    cancelAddGoods() {
+      this.addGoodsVisible = false;
+    },
+
+    // 提交 选择商品
+    submitAddGoods() {
+      // if(this.goodsTable_choose.length > 1) {
+      //   return this.$errorMsg('每次只能选择一个商品');
+      // }
+      let oldGoodsList = this.goodsList;
+      let newGoodsList = this.goodsTable_choose;
+      this.goodsList = oldGoodsList.concat(newGoodsList);
+      this.addGoodsVisible = false;
+    },
+
+    // 搜索
+    getMemberListByScreen() {
+      if (this.memberTable_choose.length > 0) {
+        return this.$errorMsg('当前已选择会员，不可搜索');
+      }
+      this.memberTable_currentPage = 1;
+      this.getMemberList();
+    },
+
+    // 获取会员列表
+    getMemberList() {
+      getMemberList({
+        pageNum: this.memberTable_currentPage,
+        pageSize: this.memberTable_pageSize,
+        keyword: this.member_screenForm.keyword,
+        type: this.member_screenForm.type,
+        startTime: this.member_screenForm.registerDate && this.member_screenForm.registerDate[0] ? this.member_screenForm.registerDate[0] + ' 00:00:00' : null,
+        endTime: this.member_screenForm.registerDate && this.member_screenForm.registerDate[1] ? this.member_screenForm.registerDate[1] + ' 23:59:59' : null,
+      }).then(res => {
+        let oldMemberList = this.memberList;
+        let newMemberList = res.data.records;
+        for (let i = 0; i < oldMemberList.length; i++) {
+          let oldItem = oldMemberList[i]
+          for (let j = 0; j < newMemberList.length; j++) {
+            let newItem = newMemberList[j]
+            if (newItem.userId === oldItem.userId) {
+              newMemberList[j].selected = true;
+              break;
+            }
+          }
+        }
+        this.memberTable_dataList = newMemberList;
+        this.memberTable_listTotal = res.data.total;
+        this.memberTable_listLoading = false;
+      })
+    },
+
+    // 更改列表当前页
+    memberTableCurrentChange(val) {
+      if (this.memberTable_choose.length > 0) {
+        return this.$errorMsg('当前已选择会员，不可切换分页');
+      }
+      this.memberTable_currentPage = val;
+      this.getMemberList();
+    },
+
+    // table点击选择会员
+    handleChooseMember(val) {
+      this.memberTable_choose = val;
+    },
+
+    // 添加会员
+    addMember() {
+      this.addMemberVisible = true;
+
+      if (this.memberList.length > 0) {
+        this.member_screenForm.type = this.memberList[0].type;
+      }
+
+      this.getMemberList();
+    },
+
+    // 删除会员
+    deleteMember(index) {
+      this.memberList.splice(index, 1);
+    },
+
+    // 取消 选择会员
+    cancelAddMember() {
+      this.addMemberVisible = false;
+    },
+
+    // 提交 选择会员
+    submitAddMember() {
+      // if(this.memberTable_choose.length > 1) {
+      //   return this.$errorMsg('每次只能选择一个会员');
+      // }
+      let oldMemberList = this.memberList;
+      let newMemberList = this.memberTable_choose;
+      this.memberList = oldMemberList.concat(newMemberList);
+      this.addMemberVisible = false;
+    },
+
+    // 操作 - 更改优惠券标志为取消
+    changeFlag(couponId) {
+      let params = {
+        couponId: couponId,
+        flag: 'CANCEL',
+      }
+      changeCouponFlag(params).then(() => {
+        this.getList();
+        this.$successMsg('取消成功');
+      })
+    },
+
+    // 查看优惠券
+    checkCoupon(couponId) {
+      this.checkCouponVisible = true;
+      getCouponDetail({ couponId }).then(res => {
+        this.couponDetail = res.data;
+      })
+    },
+
+    // 导出
+    handleExport() {
+      let screenData = {
+        couponName: this.screenForm.couponName,
+        flag: this.screenForm.flag,
+      };
+      downloadFiles('coupon/list/export', screenData);
+    },
+
+    // 补发业务员优惠券
+    reissueCoupon(couponId) {
+      reissueCoupon({ couponId }).then(res => {
+        this.getList();
+        this.$successMsg();
+      })
+    },
+
+    uploadImage() {
+      document.querySelector('.avatar-uploader input').click();
+    },
+
+    // 上传图片
+    uploadSuccess(res, file) {
+      this.addForm.imgUrl = res.data.url;
+    },
+
+    beforeUpload(file) {
+      const fileSuffix = file.name.substring(file.name.lastIndexOf(".") + 1);
+      const whiteList = ['jpg', 'jpeg', 'png'];
+      if (whiteList.indexOf(fileSuffix) === -1) {
+        this.$errorMsg('只支持上传jpg/jpeg/png文件!');
+        return false;
+      }
+    },
+
+    // 预览图片
+    previewImage() {
+      this.$refs.img.showViewer = true;
+    },
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.dialog-container {
+  .left {
+    width: 140px;
+    height: 350px;
+    overflow-y: scroll;
+
+    .group {
+      margin-top: 10px;
+    }
+
+    .child {
+      margin-top: 5px;
+
+      .item {
+        padding-left: 18px;
+      }
+    }
+
+    .item {
+      cursor: pointer;
+      line-height: 24px;
+    }
+  }
+
+  .right {
+    width: calc(100% - 140px);
+    height: 350px;
+    box-sizing: border-box;
+    padding-left: 20px;
+  }
+}
+
+.goods-container {
+  .item {
+    margin-bottom: 10px;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+}
+
+.couponDetail {
+  height: 60vh;
+  overflow-y: scroll;
+  padding-right: 20px;
+
+  .item {
+    font-size: 16px;
+    margin-bottom: 20px;
+
+    &>span {
+      float: left;
+
+      &:first-child {
+        width: 140px;
+        text-align: right;
+        margin-right: 10px;
+        font-weight: 500;
+      }
+    }
+
+    .table-span {
+      width: calc(100% - 170px);
+    }
+  }
+}
+
+.addMember {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid #EBEEF5;
+  border-top: none;
+  height: 50px;
+}
+
+// .memberTable {
+//   ::v-deep .el-table__header-wrapper .el-checkbox {
+//     display: none;
+//   }
+// }
+
+.images {
+  display: flex;
+  flex-wrap: wrap;
+
+  .main-img {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    width: 120px;
+    margin-right: 20px;
+
+    .img {
+      border: 1px dashed #eaeaea;
+      border-radius: 5px;
+      overflow: hidden;
+      position: relative;
+
+      .el-image {
+        display: block;
+      }
+
+      .mask {
+        position: absolute;
+        left: 0;
+        top: 0;
+        width: 120px;
+        height: 120px;
+        background: rgba($color: #000000, $alpha: 0.3);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        i {
+          font-size: 20px;
+          color: #ffffff;
+          cursor: pointer;
+          margin: 0 8px;
+        }
+      }
+    }
+
+    .text {
+      font-size: 14px;
+      color: #666666;
+    }
+  }
+
+  .add {
+    width: 120px;
+    height: 120px;
+    border: 1px dashed #eaeaea;
+    border-radius: 5px;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    i {
+      font-size: 30px;
+      color: #999;
+    }
+  }
+}
+</style>

src/views/mallManagement/configCenter/mallConfig/index.vue

@@ -0,0 +1,739 @@
+<template>
+  <div class="app-container">
+    <div v-if="!isAdmin">
+      <el-tabs v-model="step">
+        <el-tab-pane label="首页模版配置" name="first"></el-tab-pane>
+        <el-tab-pane label="商城logo配置" name="second"></el-tab-pane>
+      </el-tabs>
+
+      <div v-show="step == 'first'">
+        <el-form label-width="120px" label-position="right">
+          <el-form-item label="选择模版：" style="margin-bottom: 40px">
+            <el-radio-group v-model="currentTemplate" @change="changeTemplate()">
+              <div class="item">
+                <el-radio :label="1">模版一</el-radio>
+                <el-image :src="require('@/assets/template/tmp_1_thumb.png')"
+                  :preview-src-list="[require('@/assets/template/tmp_1.png')]" fit="cover"></el-image>
+              </div>
+              <div class="item">
+                <el-radio :label="2">模版二</el-radio>
+                <el-image :src="require('@/assets/template/tmp_2_thumb.png')"
+                  :preview-src-list="[require('@/assets/template/tmp_2.png')]" fit="cover"></el-image>
+              </div>
+              <div class="item">
+                <el-radio :label="3">模版三</el-radio>
+                <el-image :src="require('@/assets/template/tmp_3_thumb.png')"
+                  :preview-src-list="[require('@/assets/template/tmp_3.png')]" fit="cover"></el-image>
+              </div>
+            </el-radio-group>
+          </el-form-item>
+          <el-form-item label="首页模块设置：" v-show="currentTemplate === 1">
+            <div class="diy-table">
+              <div class="item head">
+                <div class="label">模块名称</div>
+                <div class="value">状态</div>
+              </div>
+              <div class="item">
+                <div class="label">分类</div>
+                <div class="value">
+                  <el-switch v-model="switch_classify" disabled></el-switch>
+                  <span :class="switch_classify ? 'on' : ''">{{ switch_classify ? '开启' : '隐藏' }}</span>
+                </div>
+              </div>
+              <div class="item">
+                <div class="label">轮播图</div>
+                <div class="value">
+                  <el-switch v-model="switch_banner"></el-switch>
+                  <span :class="switch_banner ? 'on' : ''">{{ switch_banner ? '开启' : '隐藏' }}</span>
+                </div>
+              </div>
+              <div class="item">
+                <div class="label">公告</div>
+                <div class="value">
+                  <el-switch v-model="switch_notice"></el-switch>
+                  <span :class="switch_notice ? 'on' : ''">{{ switch_notice ? '开启' : '隐藏' }}</span>
+                </div>
+              </div>
+              <div class="item">
+                <div class="label">专属优惠券</div>
+                <div class="value">
+                  <el-switch v-model="switch_coupon"></el-switch>
+                  <span :class="switch_coupon ? 'on' : ''">{{ switch_coupon ? '开启' : '隐藏' }}</span>
+                </div>
+              </div>
+              <div class="item">
+                <div class="label">客户经理</div>
+                <div class="value">
+                  <el-switch v-model="switch_manager"></el-switch>
+                  <span :class="switch_manager ? 'on' : ''">{{ switch_manager ? '开启' : '隐藏' }}</span>
+                </div>
+              </div>
+              <div class="item">
+                <div class="label">秒杀专区</div>
+                <div class="value">
+                  <el-switch v-model="switch_seckill"></el-switch>
+                  <span :class="switch_seckill ? 'on' : ''">{{ switch_seckill ? '开启' : '隐藏' }}</span>
+                </div>
+              </div>
+              <div class="item">
+                <div class="label">好物推荐</div>
+                <div class="value">
+                  <el-switch v-model="switch_recom" disabled></el-switch>
+                  <span :class="switch_recom ? 'on' : ''">{{ switch_recom ? '开启' : '隐藏' }}</span>
+                </div>
+              </div>
+            </div>
+          </el-form-item>
+          <el-form-item label="首页模块设置：" v-show="currentTemplate === 2">
+            <div class="diy-table">
+              <div class="item head">
+                <div class="label">模块名称</div>
+                <div class="value">状态</div>
+              </div>
+              <div class="item">
+                <div class="label">首页弹窗</div>
+                <div class="value">
+                  <el-switch v-model="switch_dialog"></el-switch>
+                  <span :class="switch_dialog ? 'on' : ''">{{ switch_dialog ? '开启' : '隐藏' }}</span>
+                </div>
+              </div>
+              <div class="item">
+                <div class="label">轮播图</div>
+                <div class="value">
+                  <el-switch v-model="switch_banner"></el-switch>
+                  <span :class="switch_banner ? 'on' : ''">{{ switch_banner ? '开启' : '隐藏' }}</span>
+                </div>
+              </div>
+              <div class="item">
+                <div class="label">胶囊图</div>
+                <div class="value">
+                  <el-switch v-model="switch_activity1"></el-switch>
+                  <span :class="switch_activity1 ? 'on' : ''">{{ switch_activity1 ? '开启' : '隐藏' }}</span>
+                </div>
+              </div>
+              <div class="item">
+                <div class="label">分类</div>
+                <div class="value">
+                  <el-switch v-model="switch_classify" disabled></el-switch>
+                  <span :class="switch_classify ? 'on' : ''">{{ switch_classify ? '开启' : '隐藏' }}</span>
+                </div>
+              </div>
+              <div class="item">
+                <div class="label">活动专区2</div>
+                <div class="value">
+                  <el-switch v-model="switch_activity2"></el-switch>
+                  <span :class="switch_activity2 ? 'on' : ''">{{ switch_activity2 ? '开启' : '隐藏' }}</span>
+                </div>
+              </div>
+              <div class="item">
+                <div class="label">专场专区</div>
+                <div class="value">
+                  <el-switch v-model="switch_special"></el-switch>
+                  <span :class="switch_special ? 'on' : ''">{{ switch_special ? '开启' : '隐藏' }}</span>
+                </div>
+              </div>
+              <div class="item">
+                <div class="label">秒杀专区</div>
+                <div class="value">
+                  <el-switch v-model="switch_seckill"></el-switch>
+                  <span :class="switch_seckill ? 'on' : ''">{{ switch_seckill ? '开启' : '隐藏' }}</span>
+                </div>
+              </div>
+              <div class="item">
+                <div class="label">专属优惠券</div>
+                <div class="value">
+                  <el-switch v-model="switch_coupon"></el-switch>
+                  <span :class="switch_coupon ? 'on' : ''">{{ switch_coupon ? '开启' : '隐藏' }}</span>
+                </div>
+              </div>
+              <div class="item">
+                <div class="label">客户经理</div>
+                <div class="value">
+                  <el-switch v-model="switch_manager"></el-switch>
+                  <span :class="switch_manager ? 'on' : ''">{{ switch_manager ? '开启' : '隐藏' }}</span>
+                </div>
+              </div>
+              <div class="item">
+                <div class="label">公告</div>
+                <div class="value">
+                  <el-switch v-model="switch_notice"></el-switch>
+                  <span :class="switch_notice ? 'on' : ''">{{ switch_notice ? '开启' : '隐藏' }}</span>
+                </div>
+              </div>
+              <div class="item">
+                <div class="label">新维度分类专区</div>
+                <div class="value">
+                  <el-switch v-model="switch_newclassify" disabled></el-switch>
+                  <span :class="switch_newclassify ? 'on' : ''">{{ switch_newclassify ? '开启' : '隐藏' }}</span>
+                </div>
+              </div>
+            </div>
+          </el-form-item>
+          <el-form-item label="首页模块设置：" v-show="currentTemplate === 3">
+            <div class="diy-table">
+              <div class="item head">
+                <div class="label">模块名称</div>
+                <div class="value">状态</div>
+              </div>
+              <div class="item">
+                <div class="label">首页弹窗</div>
+                <div class="value">
+                  <el-switch v-model="switch_dialog"></el-switch>
+                  <span :class="switch_dialog ? 'on' : ''">{{ switch_dialog ? '开启' : '隐藏' }}</span>
+                </div>
+              </div>
+              <div class="item">
+                <div class="label">轮播图</div>
+                <div class="value">
+                  <el-switch v-model="switch_banner"></el-switch>
+                  <span :class="switch_banner ? 'on' : ''">{{ switch_banner ? '开启' : '隐藏' }}</span>
+                </div>
+              </div>
+              <div class="item">
+                <div class="label">胶囊图</div>
+                <div class="value">
+                  <el-switch v-model="switch_activity1"></el-switch>
+                  <span :class="switch_activity1 ? 'on' : ''">{{ switch_activity1 ? '开启' : '隐藏' }}</span>
+                </div>
+              </div>
+              <div class="item">
+                <div class="label">分类</div>
+                <div class="value">
+                  <el-switch v-model="switch_classify" disabled></el-switch>
+                  <span :class="switch_classify ? 'on' : ''">{{ switch_classify ? '开启' : '隐藏' }}</span>
+                </div>
+              </div>
+              <div class="item">
+                <div class="label">活动专区2</div>
+                <div class="value">
+                  <el-switch v-model="switch_activity2"></el-switch>
+                  <span :class="switch_activity2 ? 'on' : ''">{{ switch_activity2 ? '开启' : '隐藏' }}</span>
+                </div>
+              </div>
+              <div class="item">
+                <div class="label">专场专区</div>
+                <div class="value">
+                  <el-switch v-model="switch_special"></el-switch>
+                  <span :class="switch_special ? 'on' : ''">{{ switch_special ? '开启' : '隐藏' }}</span>
+                </div>
+              </div>
+              <div class="item">
+                <div class="label">秒杀专区</div>
+                <div class="value">
+                  <el-switch v-model="switch_seckill"></el-switch>
+                  <span :class="switch_seckill ? 'on' : ''">{{ switch_seckill ? '开启' : '隐藏' }}</span>
+                </div>
+              </div>
+              <div class="item">
+                <div class="label">专题精选</div>
+                <div class="value">
+                  <el-switch v-model="switch_selected"></el-switch>
+                  <span :class="switch_selected ? 'on' : ''">{{ switch_selected ? '开启' : '隐藏' }}</span>
+                </div>
+              </div>
+              <div class="item">
+                <div class="label">专属优惠券</div>
+                <div class="value">
+                  <el-switch v-model="switch_coupon"></el-switch>
+                  <span :class="switch_coupon ? 'on' : ''">{{ switch_coupon ? '开启' : '隐藏' }}</span>
+                </div>
+              </div>
+              <div class="item">
+                <div class="label">客户经理</div>
+                <div class="value">
+                  <el-switch v-model="switch_manager"></el-switch>
+                  <span :class="switch_manager ? 'on' : ''">{{ switch_manager ? '开启' : '隐藏' }}</span>
+                </div>
+              </div>
+              <div class="item">
+                <div class="label">公告</div>
+                <div class="value">
+                  <el-switch v-model="switch_notice"></el-switch>
+                  <span :class="switch_notice ? 'on' : ''">{{ switch_notice ? '开启' : '隐藏' }}</span>
+                </div>
+              </div>
+              <div class="item">
+                <div class="label">新维度分类专区</div>
+                <div class="value">
+                  <el-switch v-model="switch_newclassify" disabled></el-switch>
+                  <span :class="switch_newclassify ? 'on' : ''">{{ switch_newclassify ? '开启' : '隐藏' }}</span>
+                </div>
+              </div>
+              <div class="item">
+                <div class="label">底部广告图</div>
+                <div class="value">
+                  <el-switch v-model="switch_bottom"></el-switch>
+                  <span :class="switch_bottom ? 'on' : ''">{{ switch_bottom ? '开启' : '隐藏' }}</span>
+                </div>
+              </div>
+            </div>
+          </el-form-item>
+        </el-form>
+      </div>
+
+      <div v-show="step == 'second'">
+        <el-form label-width="120px" label-position="right">
+          <el-upload class="avatar-uploader" :action="baseURL + 'common/upload'" :headers="myHeaders"
+            :show-file-list="false" :on-success="uploadSuccess" :before-upload="beforeUpload">
+          </el-upload>
+          <el-form-item label="主logo：" prop="imgUrl">
+            <div class="images">
+              <div class="main-img">
+                <div class="img" v-if="img1_url" @mouseover="img1_hover = true;" @mouseout="img1_hover = false;">
+                  <el-image ref="img1" :src="img1_url" :preview-src-list="[img1_url]" style="width: 120px; height: 120px"
+                    fit="contain"></el-image>
+                  <div class="mask" v-show="img1_hover">
+                    <i class="el-icon-zoom-in" @click="previewImage('img1')"></i>
+                    <i class="el-icon-upload2" @click="uploadImage('img1')"></i>
+                  </div>
+                </div>
+                <div class="add" v-else @click="uploadImage('img1')">
+                  <i class="el-icon-plus avatar-uploader-icon"></i>
+                </div>
+              </div>
+              <div class="tmp-img">
+                <el-image :src="require('@/assets/template/template_1.png')"
+                  :preview-src-list="[require('@/assets/template/template_1.png')]"
+                  style="width: 120px; height: 120px; display: block" fit="contain"></el-image>
+                <div class="tmp">示例图</div>
+              </div>
+            </div>
+            <div class="tips">
+              <span>建议尺寸：400*400</span>
+            </div>
+          </el-form-item>
+          <el-form-item label="通用logo：" prop="imgUrl">
+            <div class="images">
+              <div class="main-img">
+                <div class="img" v-if="img2_url" @mouseover="img2_hover = true;" @mouseout="img2_hover = false;">
+                  <el-image ref="img2" :src="img2_url" :preview-src-list="[img2_url]" style="width: 120px; height: 120px"
+                    fit="contain"></el-image>
+                  <div class="mask" v-show="img2_hover">
+                    <i class="el-icon-zoom-in" @click="previewImage('img2')"></i>
+                    <i class="el-icon-upload2" @click="uploadImage('img2')"></i>
+                  </div>
+                </div>
+                <div class="add" v-else @click="uploadImage('img2')">
+                  <i class="el-icon-plus avatar-uploader-icon"></i>
+                </div>
+              </div>
+              <div class="tmp-img">
+                <el-image :src="require('@/assets/template/template_2.png')"
+                  :preview-src-list="[require('@/assets/template/template_2.png')]"
+                  style="width: 120px; height: 120px; display: block" fit="contain"></el-image>
+                <div class="tmp">示例图</div>
+              </div>
+            </div>
+            <div class="tips">
+              <span>建议尺寸：280*60</span>
+            </div>
+          </el-form-item>
+          <el-form-item label="头像logo：" prop="imgUrl">
+            <div class="images">
+              <div class="main-img">
+                <div class="img" v-if="img3_url" @mouseover="img3_hover = true;" @mouseout="img3_hover = false;">
+                  <el-image ref="img3" :src="img3_url" :preview-src-list="[img3_url]" style="width: 120px; height: 120px"
+                    fit="contain"></el-image>
+                  <div class="mask" v-show="img3_hover">
+                    <i class="el-icon-zoom-in" @click="previewImage('img3')"></i>
+                    <i class="el-icon-upload2" @click="uploadImage('img3')"></i>
+                  </div>
+                </div>
+                <div class="add" v-else @click="uploadImage('img3')">
+                  <i class="el-icon-plus avatar-uploader-icon"></i>
+                </div>
+              </div>
+              <div class="tmp-img">
+                <el-image :src="require('@/assets/template/template_3.png')"
+                  :preview-src-list="[require('@/assets/template/template_3.png')]"
+                  style="width: 120px; height: 120px; display: block" fit="contain"></el-image>
+                <div class="tmp">示例图</div>
+              </div>
+            </div>
+            <div class="tips">
+              <span>建议尺寸：400*400</span>
+            </div>
+          </el-form-item>
+        </el-form>
+      </div>
+
+      <div class="page-footer">
+        <div class="footer" :class="classObj">
+          <el-button type="primary" @click="submitStep1Form" :loading="formLoading" v-if="step == 'first'">{{ formLoading
+            ? '保存中 ...' : '保 存' }}</el-button>
+          <el-button type="primary" @click="submitStep2Form" :loading="formLoading" v-if="step == 'second'">{{ formLoading
+            ? '保存中 ...' : '保 存' }}</el-button>
+        </div>
+      </div>
+    </div>
+
+    <div v-else>
+      <div class="nodata">超级管理员无法进行商城配置</div>
+    </div>
+
+  </div>
+</template>
+
+<script>
+import { getToken, getUserid } from '@/utils/auth';
+import { getTemplate, editAccount, editTemplate, getDetail } from "@/api/merchant";
+import { getInfo } from '@/api/user'
+export default {
+  data() {
+    return {
+      isAdmin: JSON.parse(localStorage.getItem("greemall_user")).type === 2,
+      baseURL: process.env.VUE_APP_BASE_API,
+      myHeaders: { 'x-token': getToken() },
+      step: 'first',
+      companyId: JSON.parse(localStorage.getItem("greemall_user")).companyWechatId,
+      currentTemplate: JSON.parse(localStorage.getItem("greemall_user")).useTemplate,
+
+      switch_dialog: true,
+      switch_banner: true,
+      switch_activity1: true,
+      switch_classify: true,
+      switch_activity2: true,
+      switch_special: true,
+      switch_seckill: true,
+      switch_coupon: true,
+      switch_manager: true,
+      switch_notice: true,
+      switch_newclassify: true,
+      switch_recom: true,
+      switch_selected: true,
+      switch_bottom: true,
+
+      templateList: [],
+
+      uploadImageType: null,
+      img1_url: '',
+      img1_hover: false,
+      img2_url: '',
+      img2_hover: false,
+      img3_url: '',
+      img3_hover: false,
+
+      formLoading: false
+    }
+  },
+  computed: {
+    sidebar() {
+      return this.$store.state.app.sidebar
+    },
+    classObj() {
+      return {
+        hideSidebar: !this.sidebar.opened,
+        openSidebar: this.sidebar.opened
+      }
+    },
+  },
+
+  created() {
+    if (this.isAdmin) return false;
+    this.getTemplate();
+  },
+
+  watch: {
+    step() {
+      if (this.step === 'first') {
+        this.getTemplate();
+      } else {
+        this.getLogoDetail();
+      }
+    }
+  },
+
+  methods: {
+    // 获取模版列表
+    getTemplate() {
+      getTemplate({
+        companyId: this.companyId
+      }).then(res => {
+        if(res.data){
+          this.templateList = res.data;
+        }
+        this.initHome();
+      })
+    },
+
+    // 切换模版
+    changeTemplate() {
+      this.initHome();
+    },
+
+    // 初始化配置
+    initHome() {
+      let index = this.$findElem(this.templateList, 'templateType', this.currentTemplate);
+      this.switch_dialog = this.templateList[index].popupStatus;
+      this.switch_banner = this.templateList[index].carouseStatus;
+      this.switch_activity1 = this.templateList[index].active1Status;
+      this.switch_classify = this.templateList[index].categoryStatus;
+      this.switch_activity2 = this.templateList[index].active2Status;
+      this.switch_special = this.templateList[index].onlyStatus;
+      this.switch_seckill = this.templateList[index].killStatus;
+      this.switch_coupon = this.templateList[index].couponStatus;
+      this.switch_manager = this.templateList[index].customerStatus;
+      this.switch_notice = this.templateList[index].notiveStatus;
+      this.switch_newclassify = this.templateList[index].newsStatus;
+      this.switch_recom = this.templateList[index].okStatus;
+      this.switch_selected = this.templateList[index].topicsStatus;
+      this.switch_bottom = this.templateList[index].bottomBannerStatus;
+    },
+
+    // 保存首页配置
+    submitStep1Form() {
+      let index = this.$findElem(this.templateList, 'templateType', this.currentTemplate);
+      let params = {
+        companyWechatId: this.companyId,
+        useTemplate: this.currentTemplate,
+        companyWechatTemplatesList: [{
+          companyWechatTemplateId: this.templateList[index].companyWechatTemplateId,
+          templateType: this.templateList[index].templateType,
+          popupStatus: this.switch_dialog,
+          carouseStatus: this.switch_banner,
+          active1Status: this.switch_activity1,
+          categoryStatus: this.switch_classify,
+          active2Status: this.switch_activity2,
+          onlyStatus: this.switch_special,
+          killStatus: this.switch_seckill,
+          couponStatus: this.switch_coupon,
+          customerStatus: this.switch_manager,
+          notiveStatus: this.switch_notice,
+          newsStatus: this.switch_newclassify,
+          okStatus: this.switch_recom,
+          topicsStatus: this.switch_selected,
+          bottomBannerStatus: this.switch_bottom,
+        }],
+      }
+      this.formLoading = true;
+      editTemplate(params).then(res => {
+        this.getTemplate();
+        this.$successMsg('保存成功');
+        getInfo(getUserid()).then(response => {
+          localStorage.setItem("greemall_user", JSON.stringify(response.data));
+        })
+      }).finally(res => {
+        this.formLoading = false;
+      })
+    },
+
+    // 获取logo信息
+    getLogoDetail() {
+      getDetail({ adminUserId: getUserid() }).then(res => {
+        this.img1_url = res.data.minLogo1;
+        this.img2_url = res.data.minLogo2;
+        this.img3_url = res.data.minLogo3;
+      })
+    },
+
+    uploadImage(type) {
+      this.uploadImageType = type;
+      document.querySelector('.avatar-uploader input').click();
+    },
+
+    // 上传图片
+    uploadSuccess(res, file) {
+      this[this.uploadImageType + '_url'] = res.data.url;
+    },
+
+    beforeUpload(file) {
+      const fileSuffix = file.name.substring(file.name.lastIndexOf(".") + 1);
+      const whiteList = ['jpg', 'jpeg', 'png'];
+      if (whiteList.indexOf(fileSuffix) === -1) {
+        this.$errorMsg('只支持上传jpg/jpeg/png文件!');
+        return false;
+      }
+    },
+
+    // 预览图片
+    previewImage(type) {
+      this.$refs[type].showViewer = true;
+    },
+
+    submitStep2Form() {
+      if (!this.img1_url) {
+        return this.$errorMsg('请上传主logo');
+      }
+      if (!this.img2_url) {
+        return this.$errorMsg('请上传通用logo');
+      }
+      if (!this.img3_url) {
+        return this.$errorMsg('请上传头像logo');
+      }
+      this.formLoading = true;
+      let params = {
+        companyWechatId: this.companyId,
+        mainLog: this.img1_url,
+        commonLog: this.img2_url,
+        minLogo: this.img3_url,
+      }
+      editTemplate(params).then(res => {
+        this.getLogoDetail();
+        this.$successMsg('保存成功');
+      }).finally(res => {
+        this.formLoading = false;
+      })
+    },
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+::v-deep .el-radio-group {
+  display: flex;
+
+  .item {
+    margin-right: 20px;
+
+    .el-radio {
+      height: 40px;
+      line-height: 40px;
+    }
+
+    .el-image {
+      width: 120px;
+      height: 200px;
+      display: block;
+    }
+  }
+}
+
+.images {
+  display: flex;
+  flex-wrap: wrap;
+
+  .main-img {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    width: 120px;
+    margin-right: 20px;
+
+    .img {
+      border: 1px dashed #eaeaea;
+      border-radius: 5px;
+      overflow: hidden;
+      position: relative;
+
+      .el-image {
+        display: block;
+      }
+
+      .mask {
+        position: absolute;
+        left: 0;
+        top: 0;
+        width: 120px;
+        height: 120px;
+        background: rgba($color: #000000, $alpha: 0.3);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        i {
+          font-size: 20px;
+          color: #ffffff;
+          cursor: pointer;
+          margin: 0 8px;
+        }
+      }
+    }
+
+    .text {
+      font-size: 14px;
+      color: #666666;
+    }
+  }
+
+  .add {
+    width: 120px;
+    height: 120px;
+    border: 1px dashed #eaeaea;
+    border-radius: 5px;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    i {
+      font-size: 30px;
+      color: #999;
+    }
+  }
+
+  .tmp-img {
+    position: relative;
+
+    .tmp {
+      position: absolute;
+      left: 0;
+      top: 0;
+      line-height: 20px;
+      padding: 0 8px;
+      background: #f66460;
+      border-radius: 0 0 10px 0;
+      font-size: 12px;
+      color: #ffffff;
+    }
+  }
+}
+
+.tips {
+  margin-top: 10px;
+
+  span {
+    display: inline-block;
+    width: 300px;
+    text-align: center;
+    line-height: 32px;
+    background: #ffefef;
+    font-size: 14px;
+    color: #f66460;
+  }
+}
+
+.diy-table {
+  width: 400px;
+
+  .item {
+    display: flex;
+    border: 1px solid #eaeaea;
+    border-bottom: none;
+
+    &.head {
+      font-weight: bold;
+    }
+
+    &:last-child {
+      border-bottom: 1px solid #eaeaea;
+    }
+
+    >div {
+      flex: 1;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .label {
+      border-right: 1px solid #eaeaea;
+    }
+
+    .value {
+      span {
+        margin-left: 10px;
+        color: #666666;
+
+        &.on {
+          color: #409EFF;
+        }
+      }
+    }
+  }
+}
+
+.nodata {
+  font-size: 18px;
+  color: #666666;
+}</style>

src/views/mallManagement/configCenter/slideshowConfig/index.vue

@@ -0,0 +1,318 @@
+<template>
+  <template-page ref="pageRef" :get-list="getList" :table-attributes="tableAttributes" :table-events="tableEvents"
+    :options-evens-group="optionsEvensGroup" :moreParameters="moreParameters" :column-parsing="columnParsing"
+    :operation="operation" :exportList="exportList">
+    <el-dialog title="" width="500px" custom-class="diy-dialog" append-to-body :modal="true" :visible.sync="formDialog"
+      :show-close="true" :close-on-click-modal="false" :modal-append-to-body="false" :before-close="formCancel">
+      <zj-form-container ref="formRef" :form-data="formData" :styleSwitch="false">
+        <zj-form-module :title="formDialogTitles[formDialogType]" label-width="100px" :showPackUp="false"
+          :form-data="formData" :form-items="formItems">
+        </zj-form-module>
+      </zj-form-container>
+      <div slot="footer" class="dialog-footer">
+        <el-button size="mini" @click="formCancel">取 消</el-button>
+        <el-button size="mini" @click="formConfirm" type="primary">确 定</el-button>
+      </div>
+    </el-dialog>
+  </template-page>
+</template>
+
+<script>
+import TemplatePage from '@/components/template/template-page-1.vue'
+import import_mixin from '@/components/template/import_mixin.js'
+import { required, mobileRequired, mobile } from '@/components/template/rules_verify.js'
+import { carouselMapListPageV2, carouselMapPageExport, changeBannerStatus, addBanner, editBanner, getBannerDetail, deleteBanner, getGoodsList, batchDeleteBanner } from '@/api/setting'
+import ImageUpload from '@/components/file-upload'
+export default {
+  components: { TemplatePage, ImageUpload },
+  mixins: [import_mixin],
+  data() {
+    return {
+      // 事件组合
+      optionsEvensGroup: [
+        [
+          [
+            {
+              name: '新增轮播图',
+              isRole: true,
+              click: this.addData
+            }
+          ],
+        ],
+        [
+          [
+            {
+              name: '批量删除',
+              isRole: true,
+              click: this.batchDelete
+            }
+          ],
+        ],
+      ],
+      // 表格属性
+      tableAttributes: {
+        // 启用勾选列
+        selectColumn: false
+      },
+      // 表格事件
+      tableEvents: {
+        'selection-change': this.selectionChange
+      },
+      // 勾选选中行
+      recordSelected: [],
+      /** 表单变量 */
+      formDialogType: 0,
+      formDialogTitles: ["新增"],
+      formDialog: false,
+      formData: {
+        carouselName: "",
+        imgSrc: [],
+        state: true,
+        sortNum: "",
+        type: "",
+        goodsId: "",
+        appId: "",
+        linkUrl: "",
+      },
+      goodsList: []
+    }
+  },
+  computed: {
+    // 更多参数
+    moreParameters() {
+      return []
+    },
+    formItems() {
+      return [{
+        md: 24,
+        isShow: true,
+        name: 'el-input',
+        attributes: { placeholder: '请输入' },
+        formItemAttributes: {
+          label: '轮播图名称',
+          prop: 'carouselName',
+          rules: [...required]
+        }
+      }, {
+        md: 24,
+        isShow: true,
+        name: 'slot-component',
+        formItemAttributes: {
+          label: '封面图片',
+          prop: 'imgSrc',
+          rules: [...required]
+        },
+        render: (h, { props, onInput }) => {
+          var { value } = props
+          return (
+            <ImageUpload fileList={this.formData.imgSrc} uid="imgSrc_materials_drawing_images" limit={1} />
+          )
+        }
+      }, {
+        md: 24,
+        isShow: true,
+        name: 'el-input',
+        attributes: { placeholder: '请输入' },
+        formItemAttributes: {
+          label: '排序',
+          prop: 'sortNum',
+          rules: []
+        }
+      }, {
+        md: 24,
+        isShow: true,
+        name: 'el-radio',
+        options: [{ label: "商品链接", value: 1 }, { label: "凡科活动链接", value: 2 }, { label: "专区活动链接", value: 3 }],
+        attributes: { filterable: true, placeholder: '请选择' },
+        formItemAttributes: {
+          label: '链接类型',
+          prop: 'type',
+          rules: []
+        }
+      },
+      ...(() => {
+        if (this.formData.type == 1) {
+          this.formData.appid = ""
+          this.formData.link = ""
+          this.formData.goodsId = ""
+          return [{
+            md: 24,
+            isShow: true,
+            name: 'el-select',
+            options: this.goodsList,
+            attributes: { filterable: true, placeholder: '请选择' },
+            formItemAttributes: {
+              label: '选择活动',
+              prop: 'goodsId',
+              rules: []
+            }
+          }]
+        } else if (this.formData.type == 2) {
+          this.formData.goodsId = ""
+          return [{
+            md: 24,
+            isShow: true,
+            name: 'el-input',
+            attributes: { placeholder: '请输入' },
+            formItemAttributes: {
+              label: '活动APPID',
+              prop: 'appid',
+              rules: []
+            }
+          }, {
+            md: 24,
+            isShow: true,
+            name: 'el-input',
+            attributes: { placeholder: '请输入' },
+            formItemAttributes: {
+              label: '活动路径',
+              prop: 'link',
+              rules: []
+            }
+          }]
+        } else if (this.formData.type == 3) {
+          this.formData.appid = ""
+          this.formData.link = ""
+          this.formData.goodsId = ""
+          return [{
+            md: 24,
+            isShow: true,
+            name: 'el-select',
+            options: [
+              { value: 2, label: '首页弹窗' },
+              { value: 3, label: '胶囊图' },
+              { value: 4, label: '活动专区2-左侧专区' },
+              { value: 5, label: '活动专区2-右侧专区' },
+              { value: 6, label: '专场专区-01' },
+              { value: 7, label: '专场专区-02' },
+              { value: 8, label: '专场专区-03' },
+              { value: 9, label: '专场专区-04' },
+              { value: 10, label: '专题精选-01' },
+              { value: 11, label: '专题精选-02' },
+              { value: 12, label: '专题精选-03' },
+              { value: 13, label: '底部广告图' },
+            ],
+            attributes: { filterable: true, placeholder: '请选择' },
+            formItemAttributes: {
+              label: '选择活动',
+              prop: 'goodsId',
+              rules: []
+            }
+          }]
+        }
+        return []
+      })()
+      ]
+    }
+  },
+  methods: {
+    // 列表请求函数
+    getList: carouselMapListPageV2,
+    // 列表导出函数
+    exportList: carouselMapPageExport,
+    // 表格列解析渲染数据更改
+    columnParsing(defaultData) {
+      return defaultData
+    },
+    // 监听勾选变化
+    selectionChange(data) {
+      this.recordSelected = data
+    },
+    // 表格操作列
+    operation(h, { row, index, column }) {
+      return (
+        <div class='operation-btns'>
+          <el-button type="text" onClick={() => {
+            getBannerDetail({ id: row.id }).then(res => {
+              Object.assign(this.formData, res.data, {
+                imgSrc: res.data.imgSrc ? [{ url: res.data.imgSrc }] : [],
+              })
+              this.formDialogType = 1
+              this.openForm()
+            })
+          }}>编辑</el-button>
+          <el-popconfirm
+            title="确定删除吗？"
+            onConfirm={() => {
+              deleteBanner({ carouselMapId: row.id }).then(() => {
+                this.$message({ type: 'success', message: '删除成功!' })
+                this.$refs.pageRef.refreshList()
+              })
+            }}
+          >
+            <el-button type="text" slot="reference">删除</el-button>
+          </el-popconfirm>
+          <el-popconfirm
+            title={`确定${row.state ? '隐藏' : '显示'}吗？`}
+            onConfirm={() => {
+              changeBannerStatus({ carouselMapId: row.id, state: !row.state }).then(() => {
+                this.$message({ type: 'success', message: `${row.state ? '隐藏' : '显示'}成功!` })
+                this.$refs.pageRef.refreshList()
+              })
+            }}
+          >
+            <el-button type="text" slot="reference">{row.state ? '隐藏' : '显示'}</el-button>
+          </el-popconfirm>
+        </div>
+      )
+    },
+    addData() {
+      this.formDialogType = 0
+      this.openForm()
+    },
+    openForm() {
+      getGoodsList({
+        pageNum: 1,
+        pageSize: -1
+      }).then(res => {
+        this.goodsList = res.data.records.map(item => ({
+          value: item.goodsId,
+          label: item.goodsName
+        }));
+        this.formDialog = true;
+      })
+    },
+    formCancel() {
+      this.$refs.formRef.$refs.inlineForm.clearValidate()
+      this.$data.formData = this.$options.data().formData
+      this.formDialog = false
+    },
+    formConfirm() {
+      this.$refs.formRef.validate((valid, invalidFields, errLabels) => {
+        if (valid) {
+          ([addBanner, editBanner][this.formDialogType])({
+            ...this.formData,
+            imgSrc: this.formData.imgSrc.map(item => item.url).join(","),
+          }).then(res => {
+            this.$message({ type: 'success', message: `${this.formDialogTitles[this.formDialogType]}成功!` })
+            this.formCancel()
+            this.$refs.pageRef.refreshList()
+          })
+        }
+      })
+    },
+    batchDelete() {
+      if (this.recordSelected && this.recordSelected.length > 0) {
+        this.$confirm('此操作将删除选中轮播图, 是否继续?', '提示', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }).then(() => {
+          let ids = []
+          this.recordSelected.forEach(value => {
+            ids.push(value.id)
+          })
+          batchDeleteBanner(ids).then(() => {
+            this.$message({ type: 'success', message: '删除成功!' })
+            this.$refs.pageRef.refreshList()
+          })
+        }).catch(() => { });
+      } else {
+        this.$errorMsg('请选择要删除的轮播图')
+      }
+    },
+  }
+}
+</script>
+
+<style lang="scss" scoped></style>

src/views/mallManagement/freight/index.vue

@@ -1,255 +1,302 @@
 <template>
-  <div class="app-container">
-    <!-- 筛选条件 -->
-    <div class="screen-container">
-      <div class="top clearfix">
-        <div class="title fl">条件筛选</div>
-      </div>
-      <el-form ref="screenForm" :model="screenForm" label-width="70px" size="small" label-position="left">
-        <el-row :gutter="20">
-          <el-col :xs="24" :sm="12" :lg="6">
-            <el-form-item label="模板名称" prop="name">
-              <el-input v-model="screenForm.name" placeholder="请输入模板名称"></el-input>
-            </el-form-item>
-          </el-col>
-          <el-col :xs="24" :sm="12" :lg="6">
-            <el-form-item label="状态" prop="status">
-              <el-select v-model="screenForm.status" placeholder="全部">
-                <el-option label="全部" value=""></el-option>
-                <el-option :label="item.label" :value="item.value" v-for="(item, index) in select_status" :key="index"></el-option>
-              </el-select>
-            </el-form-item>
-          </el-col>
-          <el-col :xs="24" :sm="12" :lg="6">
-            <el-form-item label="创建时间" prop="createDate">
-              <el-date-picker
-                v-model="screenForm.createDate"
-                type="daterange"
-                placeholder="选择日期"
-                value-format="yyyy-MM-dd"
-                range-separator="至"
-                start-placeholder="开始日期"
-                end-placeholder="结束日期">
-              >
-              </el-date-picker>
-            </el-form-item>
-          </el-col>
-          <el-col :xs="24" :sm="isOpen ? 24 : 12" :lg="isOpen ? 24 : 6" class="tr">
-            <el-form-item label="">
-              <el-button size="small" @click="resetScreenForm">清空</el-button>
-              <el-button size="small" type="primary" @click="submitScreenForm">搜索</el-button>
-            </el-form-item>
-          </el-col>
-        </el-row>
-      </el-form>
-    </div>
-
-    <div class="mymain-container">
-      <template>
-        <el-alert type="info" title="商品关联运费模板" :closable="false">
-          <template slot="">
-            <div class="description">1、商品关联设置：每件商品，仅可设置一种运费收取方式，即：统一运费，或指定运费模板；</div>
-            <div class="description">2、统一运费：按商品一次计收运费；如：统一运费10元，买家单笔订单购买N件，均只收取10元运费；</div>
-            <div class="description">3、运费模板：选择相应的运费模板，即可指定该商品，可配送至相应区域，并按规则收取相应运费。</div>
-          </template>
-        </el-alert>
-      </template>
-      <div class="btn-group clearfix" style="margin-top: 20px;">
-        <div class="fl">
-          <el-button size="small" type="primary" icon="el-icon-plus" @click="addOrEdit('add')">新增运费模版</el-button>
-        </div>
-        <div class="fr" />
-      </div>
-      <div class="table">
-        <el-table v-loading="listLoading" :data="dataList" element-loading-text="Loading" border fit highlight-current-row stripe>
-          <el-table-column align="center" label="模板名称" prop="name" min-width="180"></el-table-column>
-          <el-table-column align="center" label="创建人" prop="createUserName" min-width="100"></el-table-column>
-          <el-table-column align="center" label="创建时间" prop="createTime" min-width="120"></el-table-column>
-          <el-table-column align="center" label="状态" prop="status">
-            <template slot-scope="scope">
-              {{ scope.row.status ? '已启用' : '已禁用' }}
-            </template>
-          </el-table-column>
-          <el-table-column align="center" label="操作" fixed="right" min-width="100">
-            <template slot-scope="scope">
-              <el-button type="text" style="margin-right: 10px;" @click="addOrEdit('edit', scope.row.freightTemplateId)">编辑</el-button>
-              
-              <el-popconfirm v-if="scope.row.status" style="margin-right: 10px;" title="确定禁用吗？" @onConfirm="changeStatus(scope.row.freightTemplateId, 0)" >
-                <el-button slot="reference" type="text">禁用</el-button>
-              </el-popconfirm>
-              <el-popconfirm v-else style="margin-right: 10px;" title="确定启用吗？" @onConfirm="changeStatus(scope.row.freightTemplateId, 1)" >
-                <el-button slot="reference" type="text">启用</el-button>
-              </el-popconfirm>
-              
-              <el-popconfirm title="确定删除吗？" @onConfirm="handleDelete(scope.row.freightTemplateId)">
-                <el-button slot="reference" type="text">删除</el-button>
-              </el-popconfirm>
-            </template>
-          </el-table-column>
-        </el-table>
-      </div>
-      <div class="pagination clearfix">
-        <div class="fr">
-          <el-pagination
-            @size-change="handleSizeChange"
-            @current-change="handleCurrentChange"
-            :current-page="currentPage"
-            :page-sizes="[10, 20, 30, 50]"
-            :page-size="10"
-            layout="total, sizes, prev, pager, next, jumper"
-            :total="listTotal">
-          </el-pagination>
-        </div>
+  <template-page ref="pageRef" :get-list="getList" :table-attributes="tableAttributes" :table-events="tableEvents"
+    :options-evens-group="optionsEvensGroup" :moreParameters="moreParameters" :column-parsing="columnParsing"
+    :operation="operation" :exportList="exportList">
+    <el-dialog title="" width="1165px" custom-class="diy-dialog" append-to-body :modal="true" :visible.sync="formDialog"
+      :show-close="true" :close-on-click-modal="false" :modal-append-to-body="false" :before-close="formCancel">
+      <zj-form-container ref="formRef" :form-data="formData" :styleSwitch="false">
+        <zj-form-module :title="formDialogTitles[formDialogType]" label-width="100px" :showPackUp="false"
+          :form-data="formData" :form-items="formItems">
+        </zj-form-module>
+      </zj-form-container>
+      <div slot="footer" class="dialog-footer">
+        <el-button size="mini" @click="formCancel">取 消</el-button>
+        <el-button size="mini" @click="formConfirm" type="primary">确 定</el-button>
       </div>
-    </div>
-    <!-- 新增编辑 -->
-    <el-dialog :title="addFormType === 'add' ? '新增模板':'编辑模板'" :visible.sync="addFormVisible" :show-close="false" width="80%" top="10vh" :close-on-click-modal="false">
-      <el-form ref="addForm" :model="addForm" :rules="addFormRules" label-position="left" label-width="80px">
-        <el-form-item label="模板名称" prop="name">
-          <el-input v-model="addForm.name" autocomplete="off" placeholder="请输入模板名称"></el-input>
-        </el-form-item>
-        <el-form-item label="配送区域" prop="region">
-          <el-form :model="paramsForm" ref="regionForm" :rules="paramsForm.paramsRules">
-            <el-table :data="paramsForm.params" height="400" style="width: 100%" highlight-current-row class="detailTable">
-              <el-table-column label="省" align="center">
-                <template slot-scope="scope">
-                  <span>{{ scope.row.province }}</span>
-                </template>
-              </el-table-column>
-              <el-table-column label="市" align="center">
-                <template slot-scope="scope">
-                  <span>{{ scope.row.city }}</span>
-                </template>
-              </el-table-column>
-              <el-table-column label="首件(个)" align="center" :render-header="(h,obj) => renderHeader(h,obj,'firstLimit')">
-                <template slot-scope="scope">
-                  <el-form-item
-                    :prop="'params.' + scope.$index + '.firstLimit'"
-                    :rules="paramsForm.paramsRules.min">
-                    <el-input v-model.number="scope.row.firstLimit" size="small"></el-input>
-                  </el-form-item>
-                </template>
-              </el-table-column>
-              <el-table-column label="运费(元)" align="center" :render-header="(h,obj) => renderHeader(h,obj,'firstAmount')">
-                <template slot-scope="scope">
-                  <el-form-item
-                    :prop="'params.' + scope.$index + '.firstAmount'"
-                    :rules="paramsForm.paramsRules.min">
-                    <el-input v-model.number="scope.row.firstAmount" size="small"></el-input>
-                  </el-form-item>
-                </template>
-              </el-table-column>
-              <el-table-column label="续件(个)" align="center" :render-header="(h,obj) => renderHeader(h,obj,'continuousLimit')">
-                <template slot-scope="scope">
-                  <el-form-item
-                    :prop="'params.' + scope.$index + '.continuousLimit'"
-                    :rules="paramsForm.paramsRules.min">
-                    <el-input v-model.number="scope.row.continuousLimit" size="small"></el-input>
-                  </el-form-item>
-                </template>
-              </el-table-column>
-              <el-table-column label="续费(元)" align="center" :render-header="(h,obj) => renderHeader(h,obj,'continuousAmount')">
-                <template slot-scope="scope">
-                  <el-form-item
-                    :prop="'params.' + scope.$index + '.continuousAmount'"
-                    :rules="paramsForm.paramsRules.min">
-                    <el-input v-model.number="scope.row.continuousAmount" size="small"></el-input>
-                  </el-form-item>
-                </template>
-              </el-table-column>
-              <el-table-column align="center" label="操作" fixed="right">
-                <template slot-scope="scope">
-                  <el-button type="text" style="margin-left: 10px;" @click="remove(scope.$index)">删除</el-button>
-                </template>
-              </el-table-column>
-            </el-table>
-          </el-form>
-          <el-button @click="innerVisible = true;" style="margin-top: 10px;" type="primary" size="small">添加地区</el-button>
-        </el-form-item>
-      </el-form>
-
-      <!-- 选择地区 -->
-      <el-dialog title="选择地区" width="300px" :visible.sync="innerVisible" append-to-body @close="clearNode">
-        <el-tree
-          style="max-height: 400px; overflow-y: scroll;"
-          class="filter-tree"
-          :data="regionTree"
-          :props="defaultProps"
-          show-checkbox
-          node-key="id"
-          ref="tree">
-        </el-tree>
-        <div slot="footer" class="dialog-footer">
-          <el-button type="primary" @click="addDetail">添 加</el-button>
-        </div>
-      </el-dialog>
+    </el-dialog>
+    <el-dialog title="" width="300px" custom-class="diy-dialog" append-to-body :modal="true" :visible.sync="formDialog2"
+      :show-close="true" :close-on-click-modal="false" :modal-append-to-body="false" :before-close="formCancel2">
+      <zj-form-container ref="formRef2" :form-data="formData2" :styleSwitch="false">
+        <zj-form-module title="地区选择" label-width="0px" :showPackUp="false" :form-data="formData2"
+          :form-items="formItems2">
+        </zj-form-module>
+      </zj-form-container>
       <div slot="footer" class="dialog-footer">
-        <el-button @click="cancelAddForm">取 消</el-button>
-        <el-button type="primary" @click="submitAddForm">确 定</el-button>
+        <el-button size="mini" @click="formCancel2">取 消</el-button>
+        <el-button size="mini" @click="formConfirm2" type="primary">确 定</el-button>
       </div>
     </el-dialog>
-  </div>
+  </template-page>
 </template>
 
 <script>
-import { COMMON_SELECT } from '@/utils/select_data'
-import { getList, deleteFreight, addOrEditFreight, getFreightDetail, getRegionTree, changeFreightStatus } from "@/api/freight";
-
+import TemplatePage from '@/components/template/template-page-1.vue'
+import import_mixin from '@/components/template/import_mixin.js'
+import { required, mobileRequired, mobile } from '@/components/template/rules_verify.js'
+import { freightListPageV2, freightPageExport, deleteFreight, addOrEditFreight, getFreightDetail, getRegionTree, changeFreightStatus } from "@/api/freight";
 export default {
-  name: "index",
+  components: { TemplatePage },
+  mixins: [import_mixin],
   data() {
     return {
-      isOpen: false, // 是否展开条件筛选
-      currentPage: 1, // 当前页码
-      pageSize: 10, // 每页数量
-      listTotal: 0, // 列表总数
-      dataList: null, // 列表数据
-      listLoading: true, // 列表加载loading
-      select_status: COMMON_SELECT.FREIGHT_CURRENT_TYPE,
-      editId:  null,
-      addFormType: 'add',
-      addFormVisible: false,
-      screenForm: { // 筛选表单数据
-        name: '', // 模板名称
-        status: '', // 状态
-        createDate: '', // 创建时间
-      },
-      addForm: {
-        name: '',
-        status: '',
-        freightTemplateDetails: []
-      },
-      addFormRules: {
-        name: [
-          { required: true, message: '请输入模板名称', trigger: 'blur' }
+      // 事件组合
+      optionsEvensGroup: [
+        [
+          [
+            {
+              name: '新建',
+              isRole: true,
+              click: this.addData
+            }
+          ],
         ],
+      ],
+      // 表格属性
+      tableAttributes: {
+        // 启用勾选列
+        selectColumn: false
       },
-      paramsForm: {
-        params: [
-
-        ],
-        paramsRules: {
-          min: [
-            { required: true, message: '请输入数值', trigger: 'blur' },
-            // { type: 'number', min: 0, max: 100, message: '范围(0-100)', trigger: 'blur' }
-          ]
-        }
+      // 表格事件
+      tableEvents: {
+        'selection-change': this.selectionChange
       },
-      innerVisible: false,
-      regionTree: null,
-      defaultProps: {
-        children: 'child',
-        label: 'name'
+      // 勾选选中行
+      recordSelected: [],
+      /** 表单变量 */
+      formDialogType: 0,
+      formDialogTitles: ["新增"],
+      formDialog: false,
+      formData: {
+        name: '',
+        freightTemplateDetails: []
       },
-      search: ''
+      formDialog2: false,
+      formData2: {},
+      regionTree: []
     }
   },
-  created() {
-    this.getList();
-    this.getTree();
+  computed: {
+    // 更多参数
+    moreParameters() {
+      return []
+    },
+    formItems() {
+      return [{
+        md: 24,
+        isShow: true,
+        name: 'el-input',
+        attributes: { placeholder: '请输入' },
+        formItemAttributes: {
+          label: '仓储名称',
+          prop: 'name',
+          rules: [...required]
+        }
+      }, {
+        md: 24,
+        isShow: true,
+        name: 'slot-component',
+        formItemAttributes: {
+          label: '配送区域',
+          prop: '',
+          rules: [...required]
+        },
+        render: (h, { props, onInput }) => {
+          var { value } = props
+          return (
+            <div>
+              <div><el-button type="primary" size="mini" onClick={() => {
+                this.openForm2()
+              }}>添加地区</el-button></div>
+              <zj-table
+                columns={[
+                  {
+                    columnAttributes: {
+                      label: '省',
+                      prop: 'province',
+                      width: "140px",
+                    }
+                  },
+                  {
+                    columnAttributes: {
+                      label: '市',
+                      prop: 'city',
+                      width: "140px",
+                    }
+                  },
+                  {
+                    columnAttributes: {
+                      label: '首件(个)',
+                      prop: 'firstLimit',
+                      width: "160px",
+                      'render-header': (h, obj) => this.renderHeader(h, obj, 'firstLimit')
+                    },
+                    render: (h, { row, column, index }) => {
+                      return <el-form-item prop={`freightTemplateDetails.${index}.${column.columnAttributes.prop}`} rules={[...required]}>
+                        <el-input type="number" value={this.formData.freightTemplateDetails[index][column.columnAttributes.prop]} onInput={(val) => { this.formData.freightTemplateDetails[index][column.columnAttributes.prop] = val }}></el-input>
+                      </el-form-item>
+                    }
+                  },
+                  {
+                    columnAttributes: {
+                      label: '运费(元)',
+                      prop: 'firstAmount',
+                      width: "160px",
+                      'render-header': (h, obj) => this.renderHeader(h, obj, 'firstAmount')
+                    },
+                    render: (h, { row, column, index }) => {
+                      return <el-form-item prop={`freightTemplateDetails.${index}.${column.columnAttributes.prop}`} rules={[...required]}>
+                        <el-input type="number" value={this.formData.freightTemplateDetails[index][column.columnAttributes.prop]} onInput={(val) => { this.formData.freightTemplateDetails[index][column.columnAttributes.prop] = val }}></el-input>
+                      </el-form-item>
+                    }
+                  },
+                  {
+                    columnAttributes: {
+                      label: '续件(个)',
+                      prop: 'continuousLimit',
+                      width: "160px",
+                      'render-header': (h, obj) => this.renderHeader(h, obj, 'continuousLimit')
+                    },
+                    render: (h, { row, column, index }) => {
+                      return <el-form-item prop={`freightTemplateDetails.${index}.${column.columnAttributes.prop}`} rules={[...required]}>
+                        <el-input type="number" value={this.formData.freightTemplateDetails[index][column.columnAttributes.prop]} onInput={(val) => { this.formData.freightTemplateDetails[index][column.columnAttributes.prop] = val }}></el-input>
+                      </el-form-item>
+                    }
+                  },
+                  {
+                    columnAttributes: {
+                      label: '续费(元)',
+                      prop: 'continuousAmount',
+                      width: "160px",
+                      'render-header': (h, obj) => this.renderHeader(h, obj, 'continuousAmount')
+                    },
+                    render: (h, { row, column, index }) => {
+                      return <el-form-item prop={`freightTemplateDetails.${index}.${column.columnAttributes.prop}`} rules={[...required]}>
+                        <el-input type="number" value={this.formData.freightTemplateDetails[index][column.columnAttributes.prop]} onInput={(val) => { this.formData.freightTemplateDetails[index][column.columnAttributes.prop] = val }}></el-input>
+                      </el-form-item>
+                    }
+                  },
+                  {
+                    columnAttributes: {
+                      label: '操作',
+                      prop: '',
+                      width: "80px"
+                    },
+                    render: (h, { row, column, index }) => {
+                      return <el-button size="mini" type="text" onClick={() => {
+                        this.formData.freightTemplateDetails.splice(index, 1)
+                      }}>删除</el-button>
+                    }
+                  }
+                ]}
+                tableData={this.formData.freightTemplateDetails}
+                tableAttributes={{
+                  size: 'mini',
+                  border: true,
+                }} />
+            </div>
+          )
+        }
+      }]
+    },
+    formItems2() {
+      return [{
+        md: 24,
+        isShow: true,
+        name: 'el-tree',
+        attributes: {
+          style:"max-height: 400px; overflow-y: scroll;",
+          placeholder: '请输入', data: this.regionTree, 'show-checkbox': true, 'node-key': "id", props: {
+            children: 'child',
+            label: 'name'
+          }
+        },
+        formItemAttributes: {
+          label: '',
+          prop: 'val',
+          rules: [...required]
+        }
+      }]
+    }
   },
   methods: {
-    renderHeader(h, { column, $index }, type){
+    // 列表请求函数
+    getList: freightListPageV2,
+    // 列表导出函数
+    exportList: freightPageExport,
+    // 表格列解析渲染数据更改
+    columnParsing(defaultData) {
+      return defaultData
+    },
+    // 监听勾选变化
+    selectionChange(data) {
+      this.recordSelected = data
+    },
+    // 表格操作列
+    operation(h, { row, index, column }) {
+      return (
+        <div class='operation-btns'>
+          <el-button type="text" onClick={() => {
+            getFreightDetail({ freightTemplateId: row.freightTemplateId }).then(res => {
+              Object.assign(this.formData, res.data)
+              this.formDialogType = 1
+              this.openForm()
+            })
+          }}>编辑</el-button>
+          {row.status ? <el-popconfirm style="margin-right: 10px;" title="确定禁用吗？"
+            onConfirm={() => {
+              changeFreightStatus({ freightTemplateId: row.freightTemplateId, status: false }).then(res => {
+                this.$message({ type: 'success', message: '禁用成功!' })
+                this.$refs.pageRef.refreshList()
+              })
+            }}>
+            <el-button slot="reference" type="text">禁用</el-button>
+          </el-popconfirm> : <el-popconfirm style="margin-right: 10px;" title="确定启用吗？"
+            onConfirm={() => {
+              changeFreightStatus({ freightTemplateId: row.freightTemplateId, status: true }).then(res => {
+                this.$message({ type: 'success', message: '启用成功!' })
+                this.$refs.pageRef.refreshList()
+              })
+            }}>
+            <el-button slot="reference" type="text">启用</el-button>
+          </el-popconfirm>}
+          <el-popconfirm
+            title="确定删除吗？"
+            onConfirm={() => {
+              deleteFreight({ freightTemplateId: row.freightTemplateId }).then(() => {
+                this.$message({ type: 'success', message: '删除成功!' })
+                this.$refs.pageRef.refreshList()
+              })
+            }}
+          >
+            <el-button type="text" slot="reference">删除</el-button>
+          </el-popconfirm>
+        </div>
+      )
+    },
+    addData() {
+      this.formDialogType = 0
+      this.openForm()
+    },
+    openForm() {
+      this.formDialog = true;
+    },
+    formCancel() {
+      this.$refs.formRef.$refs.inlineForm.clearValidate()
+      this.$data.formData = this.$options.data().formData
+      this.formDialog = false
+    },
+    formConfirm() {
+      this.$refs.formRef.validate((valid, invalidFields, errLabels) => {
+        if (valid) {
+          addOrEditFreight(this.formData).then(res => {
+            this.$message({ type: 'success', message: `${this.formDialogTitles[this.formDialogType]}成功!` })
+            this.formCancel()
+            this.$refs.pageRef.refreshList()
+          })
+        }
+      })
+    },
+    renderHeader(h, { column, $index }, type) {
       let that = this;
       return h(
         'div',
@@ -260,23 +307,16 @@ export default {
               type: 'text',
               size: 'small',
             },
-            style:'color:#409EFF; margin-left:5px;',
+            style: 'color:#409EFF; margin-left:5px;',
             on: {
-              click: function() {
+              click: function () {
                 that.changeInput(type);
               }
             }
           }, '统一修改')
         ],
       )
-      // return (
-      //   <div style="">
-      //     <span>{column.label}</span>
-      //     <el-button size="small" type="text" onClick={this.changeInput}>统一修改</el-button>
-      //   </div>
-      // )
     },
-
     changeInput(type) {
       const typeMap = {
         firstLimit: '首件',
@@ -284,21 +324,19 @@ export default {
         continuousLimit: '续件',
         continuousAmount: '续费'
       }
-      this.$prompt('请输入'+typeMap[type], '编辑', {
+      this.$prompt('请输入' + typeMap[type], '编辑', {
         confirmButtonText: '确定',
         cancelButtonText: '取消',
-        inputValidator: function(value) {
-          if(!value) return '请输入'+typeMap[type]
+        inputValidator: function (value) {
+          if (!value) return '请输入' + typeMap[type]
         },
       }).then(({ value }) => {
-        this.paramsForm.params.forEach(item => {
+        this.formData.freightTemplateDetails.forEach(item => {
           item[type] = value;
         })
-      }).catch(() => {});
+      }).catch(() => { });
     },
-
-    // 获取范围
-    getTree() {
+    openForm2() {
       getRegionTree().then((res) => {
         this.regionTree = res.data
         this.regionTree.forEach(value => {
@@ -306,122 +344,36 @@ export default {
             delete childValue.child
           })
         })
+        this.formDialog2 = true;
       })
     },
-    // 查询列表
-    getList() {
-      this.listLoading = true;
-
-      let params = {
-        name: this.screenForm.name,
-        startTime: this.screenForm.createDate[0] ? this.screenForm.createDate[0] : null,
-        endTime: this.screenForm.createDate[1] ? this.screenForm.createDate[1] : null,
-        status: this.screenForm.status,
-        pageNum: this.currentPage,
-        pageSize: this.pageSize
-      };
-
-      getList(params).then(res => {
-        this.dataList = res.data.records;
-        this.listTotal = res.data.total;
-        this.listLoading = false;
-      })
-    },
-    // 提交筛选表单
-    submitScreenForm() {
-      this.currentPage = 1;
-      this.getList();
-    },
-
-    // 重置筛选表单
-    resetScreenForm() {
-      this.$refs.screenForm.resetFields();
-      this.currentPage = 1;
-      this.getList();
-    },
-    // 更改每页数量
-    handleSizeChange(val) {
-      this.pageSize = val;
-      this.currentPage = 1;
-      this.getList();
-    },
-
-    // 更改当前页
-    handleCurrentChange(val) {
-      this.currentPage = val;
-      this.getList();
-    },
-    // 操作 - 删除
-    handleDelete(id) {
-      deleteFreight({ freightTemplateId: id }).then(res => {
-        this.getList();
-        this.$successMsg();
-      })
+    formCancel2() {
+      this.$refs.formRef2.$refs.inlineForm.clearValidate()
+      this.$data.formData2 = this.$options.data().formData2
+      this.formDialog2 = false
     },
-
-    // 新增编辑
-    addOrEdit(type, id) {
-      this.addFormType = type;
-      this.addFormVisible = true;
-      if(type == 'edit') {
-        this.editId = id;
-        getFreightDetail({ freightTemplateId: id }).then(res => {
-          this.addForm = {
-            name: res.data.name,
-            status: res.data.status,
-            freightTemplateDetails: res.data.freightTemplateDetails
+    formConfirm2() {
+      var tree = (function getEl(arr){
+        var data
+        for(var item of arr){
+          if(item.$el.className==="el-tree"){
+            return item
+          }else if(item.$children && item.$children.length){
+            data = getEl(item.$children)
           }
-          this.paramsForm.params = this.addForm.freightTemplateDetails
-        })
-      }
-    },
-    // 取消 新增编辑
-    cancelAddForm(){
-      this.addFormVisible = false
-      this.$refs.addForm.resetFields()
-      this.addForm.freightTemplateDetails = []
-      this.paramsForm.params = []
-    },
-    // 提交 新增编辑
-    submitAddForm() {
-      this.$refs.addForm.validate((valid) => {
-        if (valid) {
-          this.$refs.regionForm.validate((innerValid) => {
-            if (innerValid) {
-              let params = {
-                name: this.addForm.name,
-                freightTemplateDetails: this.paramsForm.params
-              }
-              if(this.addFormType == 'edit') {
-                params.freightTemplateId = this.editId;
-                addOrEditFreight(params).then(res => {
-                  this.cancelAddForm();
-                  this.getList();
-                  this.$successMsg('编辑成功');
-                })
-              }else {
-                addOrEditFreight(params).then(res => {
-                  this.cancelAddForm();
-                  this.getList();
-                  this.$successMsg('新增成功');
-                })
-              }
-            }
-          })
         }
-      })
-    },
-    addDetail() {
-      this.innerVisible = false
-      this.$refs.tree.getCheckedNodes(true, false).forEach(value => {
-        console.log(value);
+        if(data){
+          return data
+        }
+      })(this.$refs.formRef2.$children)
+      tree.getCheckedNodes(true, false).forEach(value => {
         let province = value.parentName;
         let city = value.name;
-        let exist = this.paramsForm.params.find((obj) => {
+        let exist = this.formData.freightTemplateDetails.find((obj) => {
           return obj.province === province && obj.city === city
         })
         if (!exist) {
-          this.paramsForm.params.push({
+          this.formData.freightTemplateDetails.push({
             province: province,
             city: city,
             firstLimit: 1,
@@ -431,46 +383,10 @@ export default {
           })
         }
       })
-    },
-    remove(index) {
-      this.paramsForm.params.splice(index, 1)
-    },
-    clearNode() {
-      this.$refs.tree.setCheckedKeys([])
-      let node = this.$refs.tree.store.nodesMap
-      // 循环所有节点，将需要收起的节点数据的 expanded 属性设置为false
-      for (let key in node) {
-        node[key].expanded = false;
-      }
-    },
-
-    // 操作 - 更改状态(type: 禁用0，启用1)
-    changeStatus(id, type) {
-      type = type ? true : false
-      changeFreightStatus({freightTemplateId: id, status: type}).then(res => {
-        this.getList();
-        this.$successMsg();
-      })
+      this.formCancel2()
     },
   }
 }
 </script>
 
-<style>
-.detailTable .cell{
-  overflow: visible;
-}
-.detailTable .el-form-item{
-  margin-bottom: 0;
-}
-.detailTable .el-form-item__error{
-  padding-top:0;
-  margin-top:-3px;
-}
-</style>
-
-<style scoped>
-.description {
-  margin-top: 10px;
-}
-</style>
+<style lang="scss" scoped></style>

src/views/mallManagement/settlement/index.vue

@@ -1,347 +1,132 @@
 <template>
-  <div class="app-container">
-    <!-- 筛选条件 -->
-    <div class="screen-container">
-      <div class="top clearfix">
-        <div class="title fl">条件筛选</div>
-       <el-button class="fr" type="primary" @click="isOpen = !isOpen" size="mini">{{isOpen ? '收起':'展开'}}<i class="el-icon&#45;&#45;right" :class="isOpen ? 'el-icon-arrow-up':'el-icon-arrow-down'"></i></el-button>
-      </div>
-      <el-form ref="screenForm" :model="screenForm" label-width="70px" size="small" label-position="left">
-        <el-row :gutter="20">
-          <el-col :xs="24" :sm="12" :lg="6">
-            <el-form-item label="结算单号" prop="orderShareId">
-              <el-input v-model="screenForm.orderShareId" placeholder="请输入结算单号"></el-input>
-            </el-form-item>
-          </el-col>
-          <el-col :xs="24" :sm="12" :lg="6">
-            <el-form-item label="订单编号" prop="orderId">
-              <el-input v-model="screenForm.orderId" placeholder="请输入订单编号"></el-input>
-            </el-form-item>
-          </el-col>
-          <el-col :xs="24" :sm="12" :lg="6">
-            <el-form-item label="销售人员" prop="workUserName">
-              <el-input v-model="screenForm.workUserName" placeholder="请输入销售人员"></el-input>
-            </el-form-item>
-          </el-col>
-          <el-col :xs="24" :sm="12" :lg="6">
-            <el-form-item label="手机号" prop="phone">
-              <el-input v-model="screenForm.phone" placeholder="请输入手机号"></el-input>
-            </el-form-item>
-          </el-col>
-          <el-col :xs="24" :sm="12" :lg="6">
-            <el-form-item label="结算状态" prop="state">
-              <el-select v-model="screenForm.status" placeholder="全部">
-                <el-option label="全部" value=""></el-option>
-                <el-option :label="item.label" :value="item.value" v-for="(item, index) in select_status" :key="index"></el-option>
-              </el-select>
-            </el-form-item>
-          </el-col>
-          <el-col :xs="24" :sm="12" :lg="6">
-            <el-form-item label="网点名称" prop="websitId">
-              <el-select v-model="screenForm.websitId" placeholder="全部" filterable>
-                <el-option label="全部" value=""></el-option>
-                <el-option :label="item.name" :value="item.id" v-for="(item, index) in websiteList" :key="index"></el-option>
-              </el-select>
-            </el-form-item>
-          </el-col>
-          <el-col :xs="24" :sm="12" :lg="6">
-            <el-form-item label="职位名称" prop="position">
-              <el-select v-model="screenForm.position" placeholder="全部" filterable>
-                <el-option label="全部" value=""></el-option>
-                <el-option :label="item.position" :value="item.position" v-for="(item, index) in positionList" :key="index"></el-option>
-              </el-select>
-            </el-form-item>
-          </el-col>
-          <el-col :xs="24" :sm="12" :lg="6" v-show="isOpen">
-            <el-form-item label="申请时间" prop="applyDate">
-              <el-date-picker
-                v-model="screenForm.applyDate"
-                type="datetimerange"
-                value-format="yyyy-MM-dd HH:mm:ss"
-                range-separator="至"
-                start-placeholder="开始日期"
-                end-placeholder="结束日期"
-              >
-              </el-date-picker>
-            </el-form-item>
-          </el-col>
-          <el-col :xs="24" :sm="12" :lg="6" v-show="isOpen">
-            <el-form-item label="支付时间" prop="payDate">
-              <el-date-picker
-                v-model="screenForm.payDate"
-                type="datetimerange"
-                value-format="yyyy-MM-dd HH:mm:ss"
-                range-separator="至"
-                start-placeholder="开始日期"
-                end-placeholder="结束日期"
-              >
-              </el-date-picker>
-            </el-form-item>
-          </el-col>
-          <el-col :xs="24" :sm="12" :lg="6" v-show="isOpen">
-            <el-form-item label="结算时间" prop="settlementDate">
-              <el-date-picker
-                v-model="screenForm.settlementDate"
-                type="datetimerange"
-                value-format="yyyy-MM-dd HH:mm:ss"
-                range-separator="至"
-                start-placeholder="开始日期"
-                end-placeholder="结束日期"
-              >
-              </el-date-picker>
-            </el-form-item>
-          </el-col>
-          
-          <el-col :xs="24" :sm="isOpen ? 24 : 12" :lg="isOpen ? 12 : 6" class="tr">
-            <el-form-item label="">
-              <el-button size="small" @click="resetScreenForm">清空</el-button>
-              <el-button size="small" type="primary" @click="submitScreenForm">搜索</el-button>
-            </el-form-item>
-          </el-col>
-        </el-row>
-      </el-form>
-    </div>
-
-    <div class="mymain-container">
-      <div class="btn-group clearfix">
-        <div class="fr">
-          <el-button size="small" type="primary" icon="el-icon-download" @click="handleExport">导出</el-button>
-        </div>
-      </div>
-      <div class="table">
-        <el-table v-loading="listLoading" :data="dataList" element-loading-text="Loading" border fit highlight-current-row stripe>
-          <el-table-column align="center" label="操作" width="100" fixed="left">
-            <template slot-scope="scope">
-              <el-popconfirm title="您确定要结算吗？" @onConfirm="handleSettlement(scope.row.orderId)" v-if="scope.row.orderStatus == 'OVER' && scope.row.status == 'ING'" style="margin-right: 10px">
-                <el-button slot="reference" type="text">结算</el-button>
-              </el-popconfirm>
-              <el-button type="text" @click="showRemark(scope.row)">备注</el-button>
-            </template>
-          </el-table-column>
-          <el-table-column align="center" label="结算单号" prop="orderShareId" min-width="170"></el-table-column>
-          <el-table-column align="center" label="订单号" prop="orderId" min-width="180"></el-table-column>
-          <el-table-column align="center" label="业务员" prop="workUserName"></el-table-column>
-          <el-table-column align="center" label="业务员所属网点" prop="websitName" min-width="180" show-overflow-tooltip></el-table-column>
-          <el-table-column align="center" label="业务员职位" prop="position" min-width="180" show-overflow-tooltip></el-table-column>
-          <el-table-column align="center" label="业务员手机" prop="workUserPhone" min-width="120"></el-table-column>
-          <el-table-column align="center" label="分销金额" prop="amount"></el-table-column>
-          <el-table-column align="center" label="买家" prop="userName" min-width="100" show-overflow-tooltip></el-table-column>
-          <el-table-column align="center" label="买家手机" prop="phone" min-width="120"></el-table-column>
-          <el-table-column align="center" label="支付金额" prop="payment"></el-table-column>
-          <el-table-column align="center" label="结算状态" prop="status">
-            <template slot-scope="scope">
-              {{ scope.row.status | SETTLEMENT_CURRENT_STATUS_FILTER }}
-            </template>
-          </el-table-column>
-          <el-table-column align="center" label="结算时间" prop="settleTime" width="160"></el-table-column>
-          <el-table-column align="center" label="备注" prop="remark" width="150" show-overflow-tooltip></el-table-column>
-          <el-table-column align="center" label="创建时间" prop="createTime" width="160"></el-table-column>
-        </el-table>
-      </div>
-    </div>
-    <div class="pagination clearfix">
-      <div class="fr">
-        <el-pagination
-          @size-change="handleSizeChange"
-          @current-change="handleCurrentChange"
-          :current-page="currentPage"
-          :page-sizes="[10, 20, 30, 50]"
-          :page-size="10"
-          layout="total, sizes, prev, pager, next, jumper"
-          :total="listTotal">
-        </el-pagination>
-      </div>
-    </div>
-
-    <el-dialog :title="'订单备注'" :visible.sync="remarkVisible" :show-close="false" width="50%" :close-on-click-modal="false">
-      <el-input
-        type="textarea"
-        :autosize="{ minRows: 8, maxRows: 16}"
-        placeholder="请输入备注内容"
-        v-model="remark"
-        maxlength="100"
-        show-word-limit>
-      </el-input>
+  <template-page ref="pageRef" :get-list="getList" :table-attributes="tableAttributes" :table-events="tableEvents"
+    :options-evens-group="optionsEvensGroup" :moreParameters="moreParameters" :column-parsing="columnParsing"
+    :operation="operation" :exportList="exportList">
+    <el-dialog title="" width="500px" custom-class="diy-dialog" append-to-body :modal="true" :visible.sync="formDialog"
+      :show-close="true" :close-on-click-modal="false" :modal-append-to-body="false" :before-close="formCancel">
+      <zj-form-container ref="formRef" :form-data="formData" :styleSwitch="false">
+        <zj-form-module :title="formDialogTitles[formDialogType]" label-width="100px" :showPackUp="false"
+          :form-data="formData" :form-items="formItems">
+        </zj-form-module>
+      </zj-form-container>
       <div slot="footer" class="dialog-footer">
-        <el-button type="primary" @click="saveRemark">保 存</el-button>
-        <el-button @click="cancelRemark">取 消</el-button>
+        <el-button size="mini" @click="formCancel">取 消</el-button>
+        <el-button size="mini" @click="formConfirm" type="primary">确 定</el-button>
       </div>
     </el-dialog>
-  </div>
+  </template-page>
 </template>
 
 <script>
-import { COMMON_SELECT } from '@/utils/select_data'
-import {getList, settlement, getWebsiteList, getPositionList, saveRemark} from "@/api/settlement";
-import {downloadFiles} from '@/utils/util'
-
+import TemplatePage from '@/components/template/template-page-1.vue'
+import import_mixin from '@/components/template/import_mixin.js'
+import { required, mobileRequired, mobile } from '@/components/template/rules_verify.js'
+import { orderShareListPageV2, orderSharePageExport, settlement, saveRemark } from "@/api/settlement";
 export default {
-  name: "index",
+  components: { TemplatePage },
+  mixins: [import_mixin],
   data() {
     return {
-      isOpen: false, // 是否展开条件筛选
-      currentPage: 1, // 当前页码
-      pageSize: 10, // 每页数量
-      listTotal: 0, // 列表总数
-      dataList: null, // 列表数据
-      listLoading: false, // 列表加载loading
-      screenForm: { // 筛选表单数据
-        orderShareId: '', // 结算单号
-        orderId: '', // 订单编号
-        workUserName: '', // 销售人员
-        phone: '', // 手机号
-        status: '', // 结算状态
-        applyDate: '', // 申请时间
-        payDate: '', // 支付时间
-        settlementDate: '', // 结算时间
-        websitId: '', // 网点名称
-        position: '', // 职位名称
+      // 事件组合
+      optionsEvensGroup: [],
+      // 表格属性
+      tableAttributes: {
+        // 启用勾选列
+        selectColumn: false
+      },
+      // 表格事件
+      tableEvents: {
+        'selection-change': this.selectionChange
+      },
+      // 勾选选中行
+      recordSelected: [],
+      /** 表单变量 */
+      formDialogType: 0,
+      formDialogTitles: ["备注"],
+      formDialog: false,
+      formData: {
+        remark: '',
       },
-      select_status: COMMON_SELECT.SETTLEMENT_CURRENT_STATUS,
-      websiteList: [],
-      positionList: [],
-
-      remarkVisible: false,
-      handleId: null,
-      remark: '',
     }
   },
-  created() {
-    this.getList();
-    this.getWebsiteList();
-    this.getPositionList();
+  computed: {
+    // 更多参数
+    moreParameters() {
+      return []
+    },
+    formItems() {
+      return [{
+        md: 24,
+        isShow: true,
+        name: 'el-input',
+        attributes: { placeholder: '请输入', type: "textarea", maxlength: "100" },
+        formItemAttributes: {
+          label: '备注',
+          prop: 'remark',
+          rules: [...required]
+        }
+      }]
+    }
   },
   methods: {
-    // 查询列表
-    getList() {
-      this.listLoading = true;
-
-      let params = {
-        orderShareId: this.screenForm.orderShareId, // 结算单号
-        orderId: this.screenForm.orderId, // 订单编号
-        workUserName: this.screenForm.workUserName, // 销售人员
-        phone: this.screenForm.phone, // 手机号
-        status: this.screenForm.status, // 结算状态
-        startTime: this.screenForm.applyDate ? this.screenForm.applyDate[0] : '', // 申请时间
-        endTime: this.screenForm.applyDate ? this.screenForm.applyDate[1] : '', // 申请时间
-        startPayTime: this.screenForm.payDate ? this.screenForm.payDate[0] : '', // 支付时间
-        endPayTime: this.screenForm.payDate ? this.screenForm.payDate[1] : '', // 支付时间
-        startSettleTime: this.screenForm.settlementDate ? this.screenForm.settlementDate[0] : '', // 结算时间
-        endSettleTime: this.screenForm.settlementDate ? this.screenForm.settlementDate[1] : '', // 结算时间
-        websitId: this.screenForm.websitId,
-        position: this.screenForm.position,
-        pageNum: this.currentPage,
-        pageSize: this.pageSize
-      };
-      getList(params).then((res) => {
-        this.dataList = res.data.records;
-        this.listTotal = res.data.total;
-        this.listLoading = false;
-      })
-    },
-    // 提交筛选表单
-    submitScreenForm() {
-      this.currentPage = 1;
-      this.getList();
-    },
-    // 重置筛选表单
-    resetScreenForm() {
-      this.$refs.screenForm.resetFields();
-      this.currentPage = 1;
-      this.getList();
-    },
-    // 更改每页数量
-    handleSizeChange(val) {
-      this.pageSize = val;
-      this.currentPage = 1;
-      this.getList();
+    // 列表请求函数
+    getList: orderShareListPageV2,
+    // 列表导出函数
+    exportList: orderSharePageExport,
+    // 表格列解析渲染数据更改
+    columnParsing(defaultData) {
+      return defaultData
     },
-    // 更改当前页
-    handleCurrentChange(val) {
-      this.currentPage = val;
-      this.getList();
+    // 监听勾选变化
+    selectionChange(data) {
+      this.recordSelected = data
     },
-
-    // 结算
-    handleSettlement(id) {
-      settlement({
-        orderId: id
-      }).then(res => {
-        this.$successMsg('操作成功');
-        this.currentPage = 1;
-        this.getList();
-      })
-    },
-
-    // 网点列表
-    getWebsiteList() {
-      getWebsiteList({
-        pageNum: 1,
-        pageSize: 1000
-      }).then(res => {
-        this.websiteList = res.data.records;
-      })
+    // 表格操作列
+    operation(h, { row, index, column }) {
+      return (
+        <div class='operation-btns'>
+          <el-button type="text" onClick={() => {
+            Object.assign(this.formData, row)
+            this.formDialogType = 0
+            this.openForm()
+          }}>备注</el-button>
+          {row.orderStatus == 'OVER' && row.status == 'ING' ? <el-popconfirm
+            title="是否确定结算？"
+            onConfirm={() => {
+              settlement({
+                orderId: row.orderId
+              }).then(res => {
+                this.$message({ type: 'success', message: `结算成功!` })
+                this.$refs.pageRef.refreshList()
+              })
+            }}
+          >
+            <el-button type="text" slot="reference">结算</el-button>
+          </el-popconfirm> : null}
+        </div>
+      )
     },
-
-    // 职位列表
-    getPositionList() {
-      getPositionList({
-        pageNum: 1,
-        pageSize: 1000
-      }).then(res => {
-        this.positionList = res.data.records;
-      })
+    openForm() {
+      this.formDialog = true;
     },
-
-    showRemark(item) {
-      this.remarkVisible = true;
-      this.handleId = item.orderShareId;
-      this.remark = item.remark;
+    formCancel() {
+      this.$refs.formRef.$refs.inlineForm.clearValidate()
+      this.$data.formData = this.$options.data().formData
+      this.formDialog = false
     },
-
-    cancelRemark() {
-      this.remarkVisible = false;
-      this.handleId = '';
-      this.remark = '';
-    },
-
-    saveRemark() {
-      const params = {
-        orderShareId: this.handleId,
-        remark: this.remark
-      }
-      saveRemark(params).then(() => {
-        this.cancelRemark();
-        this.getList();
-        this.$successMsg('保存成功');
+    formConfirm() {
+      this.$refs.formRef.validate((valid, invalidFields, errLabels) => {
+        if (valid) {
+          ([saveRemark][this.formDialogType])(this.formData).then(res => {
+            this.$message({ type: 'success', message: `${this.formDialogTitles[this.formDialogType]}成功!` })
+            this.formCancel()
+            this.$refs.pageRef.refreshList()
+          })
+        }
       })
-    },
-
-    // 导出
-    handleExport() {
-      let screenData = {
-        orderShareId: this.screenForm.orderShareId, // 结算单号
-        orderId: this.screenForm.orderId, // 订单编号
-        workUserName: this.screenForm.workUserName, // 销售人员
-        phone: this.screenForm.phone, // 手机号
-        status: this.screenForm.status, // 结算状态
-        startTime: this.screenForm.applyDate ? this.screenForm.applyDate[0] : '', // 申请时间
-        endTime: this.screenForm.applyDate ? this.screenForm.applyDate[1] : '', // 申请时间
-        startPayTime: this.screenForm.payDate ? this.screenForm.payDate[0] : '', // 支付时间
-        endPayTime: this.screenForm.payDate ? this.screenForm.payDate[1] : '', // 支付时间
-        startSettleTime: this.screenForm.settlementDate ? this.screenForm.settlementDate[0] : '', // 结算时间
-        endSettleTime: this.screenForm.settlementDate ? this.screenForm.settlementDate[1] : '', // 结算时间
-        websitId: this.screenForm.websitId,
-        position: this.screenForm.position,
-        pageNum: this.currentPage,
-        pageSize: this.pageSize
-      };
-      downloadFiles('order/share/export', screenData);
-    },
+    }
   }
 }
 </script>
 
-<style scoped>
-
-</style>
+<style lang="scss" scoped></style>

src/views/mallManagement/storage/index.vue

@@ -1,181 +1,163 @@
 <template>
-  <div class="app-container">
-    <div class="setting_title">仓储管理</div>
-    <el-divider></el-divider>
-
-    <div class="mymain-container">
-      <div class="btn-group clearfix">
-        <div class="fl">
-          <el-button size="small" type="primary" icon="el-icon-plus" @click="addOrEdit('add')">新增仓储</el-button>
-        </div>
-      </div>
-
-      <div class="table">
-        <el-table ref="multipleTable" v-loading="listLoading" :data="dataList" element-loading-text="Loading" border fit highlight-current-row stripe>
-          <el-table-column align="center" label="操作" min-width="100">
-            <template slot-scope="scope">
-              <el-button type="text" style="margin-left: 10px;" @click="addOrEdit('edit', scope.row.storageId)">编辑</el-button>
-              <el-popconfirm style="margin-left: 10px;" title="确定删除吗？" @onConfirm="handleDelete(scope.row.storageId)">
-                <el-button slot="reference" type="text">删除</el-button>
-              </el-popconfirm>
-            </template>
-          </el-table-column>
-          <el-table-column align="center" label="仓储名称" prop="storageName"></el-table-column>
-          <el-table-column align="center" label="仓储电话" prop="storageMobile"></el-table-column>
-          <el-table-column align="center" label="仓储地址" prop="storageAddress"></el-table-column>
-          <el-table-column align="center" label="创建时间" prop="createTime"></el-table-column>
-        </el-table>
-      </div>
-
-      <div class="pagination clearfix">
-        <div class="fr">
-          <el-pagination
-            @size-change="handleSizeChange"
-            @current-change="handleCurrentChange"
-            :current-page="currentPage"
-            :page-sizes="[10, 20, 30, 50]"
-            :page-size="10"
-            layout="total, sizes, prev, pager, next, jumper"
-            :total="listTotal">
-          </el-pagination>
-        </div>
-      </div>
-    </div>
-
-    <!-- 新增编辑 -->
-    <el-dialog :title="addFormType === 'add' ? '新增仓储':'编辑仓储'" :visible.sync="addFormVisible" :show-close="false" width="50%" :close-on-click-modal="false">
-      <el-form ref="addForm" :model="addForm" :rules="addFormRules" label-position="left" label-width="80px">
-        <el-form-item label="仓储名称" prop="storageName">
-          <el-input v-model="addForm.storageName" autocomplete="off" placeholder="请输入仓储名称"></el-input>
-        </el-form-item>
-        <el-form-item label="仓储电话" prop="storageMobile">
-          <el-input v-model="addForm.storageMobile" autocomplete="off" placeholder="请输入仓储电话"></el-input>
-        </el-form-item>
-        <el-form-item label="仓储地址" prop="storageAddress">
-          <el-input v-model="addForm.storageAddress" autocomplete="off" placeholder="请输入仓储地址"></el-input>
-        </el-form-item>
-      </el-form>
+  <template-page ref="pageRef" :get-list="getList" :table-attributes="tableAttributes" :table-events="tableEvents"
+    :options-evens-group="optionsEvensGroup" :moreParameters="moreParameters" :column-parsing="columnParsing"
+    :operation="operation" :exportList="exportList">
+    <el-dialog title="" width="500px" custom-class="diy-dialog" append-to-body :modal="true" :visible.sync="formDialog"
+      :show-close="true" :close-on-click-modal="false" :modal-append-to-body="false" :before-close="formCancel">
+      <zj-form-container ref="formRef" :form-data="formData" :styleSwitch="false">
+        <zj-form-module :title="formDialogTitles[formDialogType]" label-width="100px" :showPackUp="false"
+          :form-data="formData" :form-items="formItems">
+        </zj-form-module>
+      </zj-form-container>
       <div slot="footer" class="dialog-footer">
-        <el-button @click="cancelAddForm">取 消</el-button>
-        <el-button type="primary" @click="submitAddForm">确 定</el-button>
+        <el-button size="mini" @click="formCancel">取 消</el-button>
+        <el-button size="mini" @click="formConfirm" type="primary">确 定</el-button>
       </div>
     </el-dialog>
-
-  </div>
+  </template-page>
 </template>
 
 <script>
-
-import {addStorage, deleteStorage, editStorage, getList, getStorageDetail} from "@/api/storage";
-
+import TemplatePage from '@/components/template/template-page-1.vue'
+import import_mixin from '@/components/template/import_mixin.js'
+import { required, mobileRequired, mobile } from '@/components/template/rules_verify.js'
+import { storageListPageV2, storagePageExport, addStorage, deleteStorage, editStorage, getStorageDetail } from "@/api/storage";
 export default {
+  components: { TemplatePage },
+  mixins: [import_mixin],
   data() {
     return {
-      dataList: null, // 列表数据
-      listLoading: true, // 列表加载loading
-      currentPage: 1, // 当前页码
-      pageSize: 10, // 每页数量
-      listTotal: 0, // 列表总数
-      editId:  null,
-      addFormType: 'add',
-      addFormVisible: false,
-      addForm: {
-        storageName: '', // 仓储名称
-        storageMobile: '', // 仓储电话
-        storageAddress: '', // 仓储地址
+      // 事件组合
+      optionsEvensGroup: [
+        [
+          [
+            {
+              name: '新建',
+              isRole: true,
+              click: this.addData
+            }
+          ],
+        ],
+      ],
+      // 表格属性
+      tableAttributes: {
+        // 启用勾选列
+        selectColumn: false
+      },
+      // 表格事件
+      tableEvents: {
+        'selection-change': this.selectionChange
+      },
+      // 勾选选中行
+      recordSelected: [],
+      /** 表单变量 */
+      formDialogType: 0,
+      formDialogTitles: ["新增"],
+      formDialog: false,
+      formData: {
+        storageName: '',
+        storageMobile: '',
+        storageAddress: '',
       },
-      addFormRules: {
-        storageName: [
-          { required: true, message: '请输入仓储名称', trigger: 'blur' }
-        ]
-      }
     }
   },
-  created() {
-    this.getList();
+  computed: {
+    // 更多参数
+    moreParameters() {
+      return []
+    },
+    formItems() {
+      return [{
+        md: 24,
+        isShow: true,
+        name: 'el-input',
+        attributes: { placeholder: '请输入' },
+        formItemAttributes: {
+          label: '仓储名称',
+          prop: 'storageName',
+          rules: [...required]
+        }
+      }, {
+        md: 24,
+        isShow: true,
+        name: 'el-input',
+        attributes: { placeholder: '请输入' },
+        formItemAttributes: {
+          label: '仓储电话',
+          prop: 'storageMobile',
+          rules: [...mobile]
+        }
+      }, {
+        md: 24,
+        isShow: true,
+        name: 'el-input',
+        attributes: { placeholder: '请输入' },
+        formItemAttributes: {
+          label: '仓储地址',
+          prop: 'storageAddress',
+          rules: []
+        }
+      }]
+    }
   },
   methods: {
-    getList() {
-      this.listLoading = true;
-
-      let params = {
-        pageNum: this.currentPage,
-        pageSize: this.pageSize
-      };
-
-      getList(params).then(res => {
-        this.dataList = res.data.records;
-        this.listTotal = res.data.total;
-        this.listLoading = false;
-      })
-    },
-    // 筛选后重新获取列表
-    getListByScreen() {
-      this.currentPage = 1;
-      this.getList();
+    // 列表请求函数
+    getList: storageListPageV2,
+    // 列表导出函数
+    exportList: storagePageExport,
+    // 表格列解析渲染数据更改
+    columnParsing(defaultData) {
+      return defaultData
     },
-    // 更改每页数量
-    handleSizeChange(val) {
-      this.pageSize = val;
-      this.currentPage = 1;
-      this.getList();
+    // 监听勾选变化
+    selectionChange(data) {
+      this.recordSelected = data
     },
-    // 更改当前页
-    handleCurrentChange(val) {
-      this.currentPage = val;
-      this.getList();
+    // 表格操作列
+    operation(h, { row, index, column }) {
+      return (
+        <div class='operation-btns'>
+          <el-button type="text" onClick={() => {
+            getStorageDetail({ id: row.storageId }).then(res => {
+              Object.assign(this.formData, res.data)
+              this.formDialogType = 1
+              this.openForm()
+            })
+          }}>编辑</el-button>
+          <el-popconfirm
+            title="确定删除吗？"
+            onConfirm={() => {
+              deleteStorage({ storageId: row.storageId }).then(() => {
+                this.$message({ type: 'success', message: '删除成功!' })
+                this.$refs.pageRef.refreshList()
+              })
+            }}
+          >
+            <el-button type="text" slot="reference">删除</el-button>
+          </el-popconfirm>
+        </div>
+      )
     },
-    // 操作 - 删除
-    handleDelete(id) {
-      deleteStorage({storageId: id}).then(() => {
-        this.getList();
-        this.$successMsg();
-      })
+    addData() {
+      this.formDialogType = 0
+      this.openForm()
     },
-
-    // 新增编辑
-    addOrEdit(type, id) {
-      this.addFormType = type;
-      this.addFormVisible = true;
-      if(type == 'edit') {
-        this.editId = id;
-        getStorageDetail({id: id}).then(res => {
-          this.addForm = {
-            storageName: res.data.storageName,
-            storageMobile: res.data.storageMobile,
-            storageAddress: res.data.storageAddress
-          }
-        })
-      }
+    openForm() {
+      this.formDialog = true;
     },
-    // 取消 新增编辑
-    cancelAddForm(){
-      this.addFormVisible = false;
-      this.$refs.addForm.resetFields();
+    formCancel() {
+      this.$refs.formRef.$refs.inlineForm.clearValidate()
+      this.$data.formData = this.$options.data().formData
+      this.formDialog = false
     },
-    // 提交 新增编辑
-    submitAddForm() {
-      this.$refs.addForm.validate((valid) => {
+    formConfirm() {
+      this.$refs.formRef.validate((valid, invalidFields, errLabels) => {
         if (valid) {
-          let params = {
-            storageName: this.addForm.storageName,
-            storageMobile: this.addForm.storageMobile,
-            storageAddress: this.addForm.storageAddress
-          }
-          if(this.addFormType == 'edit') {
-            params.storageId = this.editId;
-            editStorage(params).then(res => {
-              this.cancelAddForm();
-              this.getList();
-              this.$successMsg('编辑成功');
-            })
-          } else {
-            addStorage(params).then(res => {
-              this.cancelAddForm();
-              this.getList();
-              this.$successMsg('新增成功');
-            })
-          }
+          ([addStorage, editStorage][this.formDialogType])(this.formData).then(res => {
+            this.$message({ type: 'success', message: `${this.formDialogTitles[this.formDialogType]}成功!` })
+            this.formCancel()
+            this.$refs.pageRef.refreshList()
+          })
         }
       })
     }
@@ -183,6 +165,4 @@ export default {
 }
 </script>
 
-<style scoped lang="scss">
-
-</style>
+<style lang="scss" scoped></style>

src/views/setting/banner/index.vue

@@ -1,497 +0,0 @@
-<template>
-  <div class="app-container">
-    <div class="setting_title">轮播图管理</div>
-    <el-divider></el-divider>
-
-    <div class="mymain-container">
-      <div class="btn-group clearfix">
-        <div class="fl">
-          <el-button size="small" type="primary" icon="el-icon-plus" @click="addOrEdit('add')">新增轮播图</el-button>
-          <el-button size="small" type="danger" icon="el-icon-minus" @click="batchDelete()">批量删除</el-button>
-        </div>
-        <div class="fr">
-          <el-select v-model="screenForm.state" placeholder="全部" size="small" style="width: 150px; margin-right: 10px;" @change="getListByScreen">
-            <el-option label="全部状态" value=""></el-option>
-            <el-option v-for="(item, index) in select_state" :key="index" :label="item.label" :value="item.value"></el-option>
-          </el-select>
-        </div>
-      </div>
-
-      <div class="table">
-        <el-table ref="multipleTable" v-loading="listLoading" :data="dataList" element-loading-text="Loading" border fit highlight-current-row stripe>
-          <el-table-column type="selection" width="55" align="center"></el-table-column>
-          <el-table-column align="center" label="操作" min-width="140">
-            <template slot-scope="scope">
-              <el-button type="text" style="margin-right: 10px;" @click="addOrEdit('edit', scope.row.id)">编辑</el-button>
-              <el-popconfirm v-if="scope.row.state" title="确定隐藏吗？" @onConfirm="changeStatus(scope.row.id, 0)" >
-                <el-button slot="reference" type="text">隐藏</el-button>
-              </el-popconfirm>
-              <el-popconfirm v-else title="确定显示吗？" @onConfirm="changeStatus(scope.row.id, 1)" >
-                <el-button slot="reference" type="text">显示</el-button>
-              </el-popconfirm>
-              <el-popconfirm style="margin-left: 10px;" title="确定删除吗？" @onConfirm="handleDelete(scope.row.id)">
-                <el-button slot="reference" type="text">删除</el-button>
-              </el-popconfirm>
-            </template>
-          </el-table-column>
-          <el-table-column align="center" label="轮播图名称" prop="carouselName" min-width="140"></el-table-column>
-          <el-table-column align="center" label="排序" prop="sortNum"></el-table-column>
-          <el-table-column align="center" label="创建人" prop="adminNickName" min-width="160"></el-table-column>
-          <el-table-column align="center" label="创建时间" prop="createTime" min-width="160"></el-table-column>
-          <el-table-column align="center" label="状态" class-name="status-col">
-            <template slot-scope="scope">
-              <el-tag :type="scope.row.state ? 'success':'danger'">{{ scope.row.state ? '显示':'隐藏' }}</el-tag>
-            </template>
-          </el-table-column>
-        </el-table>
-      </div>
-
-      <div class="pagination clearfix">
-        <div class="fr">
-          <el-pagination
-            @size-change="handleSizeChange"
-            @current-change="handleCurrentChange"
-            :current-page="currentPage"
-            :page-sizes="[10, 20, 30, 50]"
-            :page-size="10"
-            layout="total, sizes, prev, pager, next, jumper"
-            :total="listTotal">
-          </el-pagination>
-        </div>
-      </div>
-    </div>
-
-    <!-- 新增编辑 -->
-    <el-dialog :title="addFormType === 'add' ? '新增轮播图':'编辑轮播图'" :visible.sync="addFormVisible" :show-close="false" width="50%" :close-on-click-modal="false">
-      <el-form ref="addForm" :model="addForm" :rules="addFormRules" label-position="left" label-width="100px">
-        <el-form-item label="轮播图名称" prop="bannerName">
-          <el-input v-model="addForm.bannerName" autocomplete="off" placeholder="请输入轮播图名称"></el-input>
-        </el-form-item>
-        <el-form-item label="轮播图" prop="imgUrl">
-          <el-upload
-            class="avatar-uploader"
-            :action="baseURL + 'common/upload'"
-            :headers="myHeaders"
-            :show-file-list="false"
-            :on-success="uploadSuccess"
-            :before-upload="beforeUpload">
-            <img v-if="addForm.imgUrl" :src="addForm.imgUrl" class="avatar">
-            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
-          </el-upload>
-          <div class="tips">
-            <span>支持上传jpg/png文件，尺寸比例为：710*350</span>
-          </div>
-        </el-form-item>
-        <el-form-item label="排序" prop="sortNum">
-          <el-input v-model="addForm.sortNum" autocomplete="off" placeholder="请输入整数(降序显示轮播顺序)"></el-input>
-        </el-form-item>
-
-        <el-form-item label="链接类型" prop="type">
-          <el-radio-group v-model="addForm.type">
-            <el-radio :label="1">商品链接</el-radio>
-            <el-radio :label="2">凡科活动链接</el-radio>
-            <el-radio :label="3">专区活动链接</el-radio>
-          </el-radio-group>
-        </el-form-item>
-        <el-form-item label="链接商品" prop="goodsId" v-if="addForm.type === 1">
-          <el-button @click="showGoods" size="small">查找商品</el-button>
-          <el-button @click="clearGoodsId" size="small">清除</el-button>
-        </el-form-item>
-        <el-form-item label="链接商品名称" prop="goodsName" v-if="addForm.type === 1">
-          <el-input disabled v-model="selGoodsName"></el-input>
-        </el-form-item>
-        <el-form-item label="活动APPID" prop="appid" v-if="addForm.type === 2">
-          <el-input v-model="addForm.appid" autocomplete="off" placeholder="请输入活动APPID"></el-input>
-        </el-form-item>
-        <el-form-item label="活动路径" prop="link" v-if="addForm.type === 2">
-          <el-input v-model="addForm.link" autocomplete="off" placeholder="请输入活动路径"></el-input>
-        </el-form-item>
-        <el-form-item label="选择活动" prop="goodsId" v-if="addForm.type === 3">
-          <el-select v-model="addForm.goodsId" placeholder="请选择活动">
-            <el-option
-              v-for="item in activityList"
-              :key="item.type"
-              :label="item.name"
-              :value="item.type">
-            </el-option>
-          </el-select>
-        </el-form-item>
-      </el-form>
-
-
-      <el-dialog
-        width="50%"
-        title="商品列表"
-        :visible.sync="innerVisible"
-        append-to-body>
-        <el-input v-model="search" placeholder="输入名称搜索">
-          <el-button slot="append" icon="el-icon-search" @click="searchGoods()"></el-button>
-        </el-input>
-        <div class="table" style="margin-top: 10px">
-          <el-table
-            :data="goodsList"
-            height="400px"
-            style="width: 100%">
-            <el-table-column align="center">
-              <template slot="header"></template>
-              <template slot-scope="scope">
-                <el-button type="primary" size="small" @click="selGoods(scope.row)" :disabled="scope.row.promotionGroup" >选择</el-button>
-              </template>
-            </el-table-column>
-            <el-table-column label="商品名称" prop="goodsName"></el-table-column>
-            <el-table-column label="商品图片" prop="imgUrl" align="center">
-              <template slot-scope="scope">
-                <div class="demo-image__preview">
-                  <el-image style="width: 40px; height: 40px" :src="scope.row.imgUrl" :preview-src-list="[scope.row.imgUrl]">
-                    <div slot="error" class="image-slot">
-                      <i class="el-icon-picture-outline"></i>
-                    </div>
-                  </el-image>
-                </div>
-              </template>
-            </el-table-column>
-          </el-table>
-        </div>
-        <div class="pagination clearfix">
-          <div class="fr">
-            <el-pagination
-              @size-change="innerHandleSizeChange"
-              @current-change="innerHandleCurrentChange"
-              :current-page="innerCurrentPage"
-              :page-sizes="[10, 20, 30, 50]"
-              :page-size="10"
-              layout="total, sizes, prev, pager, next, jumper"
-              :total="innerListTotal">
-            </el-pagination>
-          </div>
-        </div>
-      </el-dialog>
-      <div slot="footer" class="dialog-footer">
-        <el-button @click="cancelAddForm">取 消</el-button>
-        <el-button type="primary" @click="submitAddForm">确 定</el-button>
-      </div>
-    </el-dialog>
-
-  </div>
-</template>
-
-<script>
-import { mapGetters } from 'vuex'
-import { getBannerList, changeBannerStatus, addBanner, editBanner, getBannerDetail, deleteBanner, getGoodsList, batchDeleteBanner } from '@/api/setting'
-import { getToken } from '@/utils/auth'
-
-export default {
-  data() {
-    let checkInt = (rule, value, callback) => {
-      if ((Number(value)) && (value) % 1 === 0) {
-        callback()
-      } else {
-        return callback(new Error('请输入整数!'))
-      }
-    }
-    return {
-      baseURL: process.env.VUE_APP_BASE_API,
-      myHeaders: {'x-token': getToken()},
-      dataList: null, // 列表数据
-      listLoading: true, // 列表加载loading
-      currentPage: 1, // 当前页码
-      pageSize: 10, // 每页数量
-      listTotal: 0, // 列表总数
-      innerCurrentPage: 1, // 内联当前页码
-      innerPageSize: 10, // 内联每页数量
-      innerListTotal: 0, // 内联列表总数
-      editId:  null,
-      addFormType: 'add',
-      addFormVisible: false,
-      addForm: {
-        imgUrl: '', // 轮播图
-        bannerName: '', // 轮播图名称
-        state: true,
-        goodsId: '',
-        sortNum: '',
-        type: 1,
-        appid: '',
-        link: '',
-      },
-      addFormRules: {
-        imgUrl: [
-          { required: true, message: '请上传轮播图', trigger: 'change' }
-        ],
-        bannerName: [
-          { required: true, message: '请输入轮播图名称', trigger: 'blur' }
-        ],
-        sortNum: [
-          { required: false, trigger: 'blur', validator: checkInt }
-        ],
-      },
-      innerVisible: false,
-      goodsList: [],
-      search: '',
-      selGoodsName: '',
-      select_state: [
-        { value: 1, label: '显示' },
-        { value: 0, label: '隐藏' },
-      ],
-      screenForm : {
-        state: ''
-      },
-
-      activityList: [
-        {type: 2, name: '首页弹窗'},
-        {type: 3, name: '胶囊图'},
-        {type: 4, name: '活动专区2-左侧专区'},
-        {type: 5, name: '活动专区2-右侧专区'},
-        {type: 6, name: '专场专区-01'},
-        {type: 7, name: '专场专区-02'},
-        {type: 8, name: '专场专区-03'},
-        {type: 9, name: '专场专区-04'},
-        {type: 10, name: '专题精选-01'},
-        {type: 11, name: '专题精选-02'},
-        {type: 12, name: '专题精选-03'},
-        {type: 13, name: '底部广告图'},
-      ],
-    }
-  },
-  computed: {
-    ...mapGetters([
-      'userid',
-      'name'
-    ])
-  },
-  created() {
-    this.getList();
-  },
-  methods: {
-    getList() {
-      this.listLoading = true;
-
-      let params = {
-        state: this.screenForm.state,
-        pageNum: this.currentPage,
-        pageSize: this.pageSize
-      };
-
-      getBannerList(params).then(res => {
-        this.dataList = res.data.records;
-        this.listTotal = res.data.total;
-        this.listLoading = false;
-      })
-    },
-    // 筛选后重新获取列表
-    getListByScreen() {
-      this.currentPage = 1;
-      this.getList();
-    },
-    // 更改每页数量
-    handleSizeChange(val) {
-      this.pageSize = val;
-      this.currentPage = 1;
-      this.getList();
-    },
-
-    // 更改当前页
-    handleCurrentChange(val) {
-      this.currentPage = val;
-      this.getList();
-    },
-
-    // 更改内嵌每页数量
-    innerHandleSizeChange(val) {
-      this.innerPageSize = val;
-      this.innerCurrentPage = 1;
-      this.showGoodsList();
-    },
-
-    // 更改内嵌当前页
-    innerHandleCurrentChange(val) {
-      this.innerCurrentPage = val;
-      this.showGoodsList();
-    },
-
-    // 操作 - 更改状态(type: 禁用0，启用1)
-    changeStatus(id, type) {
-      type = !!type
-      changeBannerStatus({carouselMapId: id, state: type}).then(res => {
-        this.getList();
-        this.$successMsg();
-      })
-    },
-
-    // 操作 - 删除
-    handleDelete(id) {
-      deleteBanner({carouselMapId: id}).then(res => {
-        this.getList();
-        this.$successMsg();
-      })
-    },
-
-    // 新增编辑
-    addOrEdit(type, id) {
-      this.addFormType = type;
-      this.addFormVisible = true;
-      if(type == 'edit') {
-        this.editId = id;
-        getBannerDetail({id: id}).then(res => {
-          this.addForm = {
-            bannerName: res.data.carouselName,
-            imgUrl: res.data.imgSrc,
-            state: res.data.state,
-            goodsId: res.data.goodsId,
-            sortNum: res.data.sortNum,
-            type: res.data.type,
-            appid: res.data.appId,
-            link: res.data.linkUrl,
-          }
-          if(this.addForm.type === 3) {
-            this.addForm.goodsId = Number(this.addForm.goodsId);
-          }
-          if (this.addForm.goodsId && this.addForm.type === 1) {
-            let params = {
-              goodsId: this.addForm.goodsId,
-              pageNum: 1,
-              pageSize: 1
-            };
-            getGoodsList(params).then(res => {
-              this.selGoodsName = res.data.records[0].goodsName;
-            })
-          }
-        })
-      }
-    },
-
-    // 取消 新增编辑
-    cancelAddForm(){
-      this.addFormVisible = false;
-      this.$refs.addForm.resetFields();
-      this.selGoodsName = ''
-    },
-
-    // 提交 新增编辑
-    submitAddForm() {
-      this.$refs.addForm.validate((valid) => {
-        if (valid) {
-          let params = {
-            carouselName: this.addForm.bannerName,
-            imgSrc: this.addForm.imgUrl,
-            state: this.addForm.state,
-            goodsId: this.addForm.goodsId,
-            sortNum: this.addForm.sortNum,
-            type: this.addForm.type,
-            appId: this.addForm.appid,
-            linkUrl: this.addForm.link,
-          }
-          if(this.addFormType == 'edit') {
-            params.id = this.editId;
-            editBanner(params).then(res => {
-              this.cancelAddForm();
-              this.getList();
-              this.$successMsg('编辑成功');
-            })
-          } else {
-            params.adminNickName = this.name;
-            params.adminUserId = this.userid;
-            addBanner(params).then(res => {
-              this.cancelAddForm();
-              this.getList();
-              this.$successMsg('新增成功');
-            })
-          }
-        }
-      })
-    },
-
-    uploadSuccess(res, file) {
-      this.addForm.imgUrl = res.data.url;
-    },
-
-    beforeUpload(file) {
-      const fileSuffix = file.name.substring(file.name.lastIndexOf(".") + 1);
-      const whiteList = ['jpg', 'jpeg', 'png'];
-      if (whiteList.indexOf(fileSuffix) === -1) {
-        this.$errorMsg('只支持上传jpg/png文件!');
-        return false;
-      }
-    },
-    batchDelete() {
-      if(this.$refs.multipleTable.selection && this.$refs.multipleTable.selection.length > 0) {
-        this.$confirm('此操作将删除选中轮播图, 是否继续?', '提示', {
-          confirmButtonText: '确定',
-          cancelButtonText: '取消',
-          type: 'warning'
-        }).then(() => {
-          let ids = []
-          this.$refs.multipleTable.selection.forEach(value => {
-            ids.push(value.id)
-          })
-          batchDeleteBanner(ids).then(() => {
-            this.$refs.multipleTable.clearSelection()
-            this.getList()
-            this.$successMsg('删除成功');
-          })
-        }).catch(() => {});
-      } else {
-        this.$errorMsg('请选择要删除的轮播图')
-      }
-    },
-    showGoods() {
-      this.search = '';
-      this.innerVisible = true
-      this.showGoodsList()
-    },
-    clearGoodsId() {
-      this.addForm.goodsId = ''
-      this.selGoodsName = ''
-    },
-    showGoodsList() {
-      let params = {
-        goodsName: this.search,
-        pageNum: this.innerCurrentPage,
-        pageSize: this.innerPageSize
-      };
-      getGoodsList(params).then(res => {
-        this.goodsList = res.data.records;
-        this.innerListTotal = res.data.total;
-      })
-    },
-    searchGoods() {
-      this.innerCurrentPage = 1;
-      this.showGoodsList()
-    },
-    selGoods(row) {
-      this.innerVisible = false
-      this.search = ''
-      this.addForm.goodsId = row.goodsId
-      this.selGoodsName = row.goodsName
-    }
-  }
-}
-</script>
-
-<style scoped lang="scss">
-  .tips {
-    margin-top: 10px;
-    span {
-      display: inline-block;
-      width: 300px;
-      text-align: center;
-      line-height: 32px;
-      background: #ffefef;
-      font-size: 14px;
-      color: #f66460;
-    }
-  }
-</style>
-<style>
-  .demo-table-expand {
-    font-size: 0;
-  }
-  .demo-table-expand label {
-    width: 80px;
-    color: #99a9bf;
-  }
-  .demo-table-expand .el-form-item {
-    margin-right: 0;
-    margin-bottom: 0;
-    width: 100%;
-  }
-</style>