2024.07.04

- 修复佣金配置页规则参数传递bug；
- 佣金配置页修改活动类型字段显示；
- 申请提现页分账信息增加清算明细列表判断显示；
- 重构入驻申请页；
- 完成供应商入驻页和选品会员入驻页；
- 重构商品管理页；
- 完成供应商商品页和选品会员商品页；
- 用户提现申请页完善处理状态字段显示；
- 提现申请页完善处理状态和惠市宝订单相关字段显示；

src/api/withdrawal.js

@@ -54,3 +54,12 @@ export function getPaymentNumber(data) {
     data
   })
 }
+
+// 商家提现处理通联查询
+export function updateWithdrawalByAllinpay(data) {
+  return request({
+    url: '/withdrawal/getByAllinpay',
+    method: 'post',
+    data
+  })
+}

src/views/active/combinationActivities/components/RegistrationReview.vue

@@ -12,6 +12,11 @@
       label-suffix=":"
       label-width="150px"
     >
+      <el-form-item label="报名ID" prop="signId">
+        <el-input
+          v-model="formData.signId" maxlength="20" placeholder="报名ID" disabled
+        />
+      </el-form-item>
       <el-form-item label="审核状态" prop="state">
         <el-radio-group v-model="formData.state">
           <el-radio label="1">报名成功</el-radio>
@@ -71,28 +76,12 @@ export default {
     initList() {
     },
     handleOpen(params = {}) {
-      this.modalOptions.title = params.signId ? '店铺的报名审核' : '--'
+      this.modalOptions.title = '店铺的报名审核'
+      this.formData.signId = params.signId
+      // this.formData = Object.assign(this.$options.data().formData, params)
       this.visible = true
       this.initList()
-      if (params.signId) {
-        // this.getInfo(params.signId)
-      } else {
-        this.$refs.formData && this.$refs.formData.resetFields()
-      }
-    },
-    async getInfo(id) {
-      const loading = this.$loading({ text: '加载中' })
-      try {
-        const res = await xxx({ id })
-        this.formData = Object.assign(this.$options.data().formData, res.data, {
-          signId: res.data.signId || ''
-        })
-        this.$nextTick(() => {
-          this.$refs.formData && this.$refs.formData.validate()
-        })
-      } finally {
-        loading.close()
-      }
+      this.$refs.formData && this.$refs.formData.resetFields()
     },
     handleSubmit() {
       this.$refs.formData.validate(async (valid) => {

src/views/brandFactory/settlement/addSettlement.vue

@@ -1,448 +0,0 @@
-<template>
-  <div class="">
-    <!-- 卡片 -->
-    <el-card class="box-card">
-      <div slot="header" class="clearfix">
-        <span v-if="shopDetails.checkState === 2" class="leftTitle">已拒绝</span>
-        <span v-if="shopDetails.checkState === 1" class="leftTitle">已通过</span>
-        <span v-if="shopDetails.checkState === 0" class="leftTitle">未处理</span>
-        <div class="girhtBtn">
-          <el-button class="" @click="back">
-            取消
-          </el-button>
-          <el-button v-if="shopDetails.checkState === 0" type="primary" @click="handle">
-            处理
-          </el-button>
-        </div>
-      </div>
-      <!--  卡片内容-->
-      <div>
-        <div class="msgDetail">
-          <div class="detail">
-            <div class="shop_info">
-              <p class="detail_title">店铺信息</p>
-              <p class="detail_text">
-                <span>
-                  <font>*</font>店铺名称：
-                </span>
-                <span>{{ shopDetails.shopName }}</span>
-              </p>
-              <p class="detail_text">
-                <span>
-                  <font>*</font>店铺类型：
-                </span>
-                <span v-if="shopDetails.authenType == 1">个人</span>
-                <span v-if="shopDetails.authenType == 2">个体工商户</span>
-                <span v-if="shopDetails.authenType == 3">企业</span>
-                <span v-if="shopDetails.authenType == 4">其他组织</span>
-              </p>
-              <p class="detail_text">
-                <span>
-                  <font>*</font>
-                  客服电话：
-                </span>
-                <span>{{ shopDetails.shopPhone }}</span>
-              </p>
-              <p class="detail_text">
-                <span>
-                  <font>*</font>店铺负责人：
-                </span>
-                <span>{{ shopDetails.chargePersonName }}</span>
-              </p>
-              <p class="detail_text">
-                <span>
-                  <font>*</font>负责人电话：
-                </span>
-                <span>{{ shopDetails.chargePersonPhone }}</span>
-              </p>
-              <p class="detail_text">
-                <span>
-                  <font>*</font>店铺地址：
-                </span>
-                <span>{{ shopDetails.shopAdress }}</span>
-              </p>
-            </div>
-            <div class="person_info">
-              <p class="detail_title">个人信息</p>
-              <p class="detail_text">
-                <span>
-                  <font>*</font>名称：
-                </span>
-                <span>{{ shopDetails.name }}</span>
-              </p>
-              <p class="detail_text">
-                <span>
-                  <font>*</font>证件信息：
-                </span>
-                <span>{{ shopDetails.cardTypeName }}</span>
-              </p>
-              <p class="detail_text">
-                <span>
-                  <font>*</font>身份证号码：
-                </span>
-                <span>{{ shopDetails.idCard }}</span>
-              </p>
-              <p class="detail_text">
-                <span>
-                  <font>*</font>身份证有效期：
-                </span>
-                <span>{{ shopDetails.cardTime }}</span>
-              </p>
-              <p class="detail_img">
-                <span>
-                  <font>*</font>证件照片:
-                </span>
-                <el-image
-                  v-for="(src, index) in idCardCopyFilePath" :key="'id' + index" class="img_box"
-                  :preview-src-list="idCardCopyFilePath" :src="src" :preview="2" alt=""
-                />
-              </p>
-              <p v-if="shopDetails && shopDetails.authenType === 1" class="detail_img">
-                <span>
-                  <font>*</font>手持证件照:
-                </span>
-                <el-image class="img_box" :src="shopDetails.cardHand" :preview-src-list="[ shopDetails.cardHand ]" />
-              </p>
-            </div>
-            <!-- +++++++++++++++++++++ 主体信息 ++++++++++++++++++++++++++++++++++++++++++++++++ -->
-            <div v-if="shopDetails.authenType !== 1" class="person_info">
-              <p class="detail_title">主体信息</p>
-              <p class="detail_text">
-                <span v-if="shopDetails.authenType == 2">
-                  <font>*</font> 商户名称：
-                </span>
-                <span v-if="shopDetails.authenType == 3">
-                  <font>*</font> 企业名称：
-                </span>
-                <span v-if="shopDetails.authenType == 4">
-                  <font>*</font> 组织名称：
-                </span>
-                <span>{{ shopDetails.subjectName }}</span>
-              </p>
-              <p class="detail_text">
-                <span>
-                  <font>*</font> {{ shopDetails.authenType == 4 ? '组织机构代码' : '社会信用代码' }}：
-                </span>
-                <span>{{ shopDetails.subjectCode }}</span>
-              </p>
-              <p class="detail_text">
-                <span>
-                  <font>*</font>注册地址
-                </span>
-                <span>{{ shopDetails.subjectAdress }}</span>
-              </p>
-              <p class="detail_text">
-                <span>
-                  <font>*</font>营业期限
-                </span>
-                <span>{{ shopDetails.subjectStartTime }} - {{ shopDetails.subjectEndTime }}</span>
-              </p>
-              <p class="detail_img">
-                <span>
-                  <font>*</font>{{ shopDetails.authenType == 4 ? '机构证明材料' : '营业执照' }}：
-                </span>
-                <img
-                  v-for="(src, index) in shopDetails.subjectLicense" :key="'id' + index" :src="src" :preview="2"
-                  alt=""
-                >
-              </p>
-            </div>
-            <div class="person_info">
-              <p class="detail_title">授权信息</p>
-              <p class="detail_text">
-                <span>
-                  <font>*</font>生效日期：
-                </span>
-                <span>{{ shopDetails.effectiveDate }}</span>
-              </p>
-              <p class="detail_text">
-                <span>
-                  <font>*</font>生效时限：
-                </span>
-                <span>{{ shopDetails.effectiveYear }}</span>
-                <span v-if="shopDetails.effectiveYear">年</span>
-              </p>
-            </div>
-          </div>
-        </div>
-      </div>
-    </el-card>
-
-    <!-- *************对话框开始************* -->
-    <el-dialog
-      title="处理申请" :visible.sync="addFormDialog" width="30%" center
-      :show-close="false"
-      :close-on-click-modal="false" :modal-append-to-body="false" :modal="false"
-    >
-      <div>
-        <el-form ref="ruleForm" :model="addForm" label-width="80px">
-          <el-form-item label="入驻处理">
-            <el-radio-group v-model="addForm.checkHandle" @change="selectChoose">
-              <el-radio label="1">同意入驻</el-radio>
-              <el-radio label="0">拒绝入驻</el-radio>
-            </el-radio-group>
-          </el-form-item>
-          <el-form-item v-if="addForm.checkHandle == 0" label="拒绝原因">
-            <el-input v-model="addForm.reason" maxlength="200" type="textarea" />
-          </el-form-item>
-          <el-form-item v-if="addForm.checkHandle == 1" label="生效日期">
-            <el-radio-group v-model="addForm.effectiveDate">
-              <el-radio label="null">即时生效</el-radio>
-              <el-radio label="0">指定日期</el-radio>
-            </el-radio-group>
-          </el-form-item>
-          <el-form-item v-if="addForm.effectiveDate == 0 && addForm.checkHandle == 1">
-            <el-date-picker v-model="chooseDate" value-format="yyyy-MM-dd" type="date" placeholder="选择日期" />
-          </el-form-item>
-          <el-form-item v-if="addForm.checkHandle == 1" label="生效时间">
-            <el-input
-              v-model="addForm.effectiveYear" maxlength="4" oninput="value=value.replace(/[^\d]/g,'')"
-              class="spanIpt"
-            />
-            <span class="riSpan">年</span>
-          </el-form-item>
-        </el-form>
-      </div>
-      <span slot="footer" class="dialog-footer">
-        <el-button @click="addFormDialog = false">取 消</el-button>
-        <el-button type="primary" @click="handle_save">确 定</el-button>
-      </span>
-    </el-dialog>
-  </div>
-</template>
-
-<script>
-import { settlementHandle } from '@/api/business'
-import { hidden } from '@/utils'
-
-export default {
-  props: {
-    businessData: {
-      type: Object,
-      default: () => ({})
-    }
-  },
-  data() {
-    // 这里存放数据
-    return {
-      shopId: '',
-      shopDetails: {},
-      addFormDialog: false,
-      idCardCopyFilePath: [],
-      chooseDate: '',
-      addForm: {
-        shopId: '', // 店铺id
-        checkHandle: '', // 1-同意入驻 0-拒绝入驻
-        effectiveDate: '', // 生效日期  null-即时生效 有值-指定日期生效
-        effectiveYear: '', // 生效时限（年）
-        reason: '' // 处理原因
-      }
-    }
-  },
-  watch: {
-    businessData: {
-      handler(nVal, oVal) {
-        this.shopDetails = {}
-        this.idCardCopyFilePath = []
-        this.shopId = nVal.shopId
-        this.shopDetails = nVal
-        this.shopDetails.idCard = hidden(this.shopDetails.idCard, 4, 4)
-        this.idCardCopyFilePath.push(nVal.cardPositive)
-        this.idCardCopyFilePath.push(nVal.cardSide)
-      }
-    }
-  },
-  created() {
-    this.shopDetails = {}
-    this.idCardCopyFilePath = []
-    this.shopId = this.businessData.shopId
-    this.shopDetails = this.businessData
-    this.shopDetails.idCard = hidden(this.shopDetails.idCard, 4, 4)
-    this.idCardCopyFilePath.push(this.businessData.cardPositive)
-    this.idCardCopyFilePath.push(this.businessData.cardSide)
-  },
-  // 方法集合
-  methods: {
-    // 处理
-    handle() {
-      this.addFormDialog = true
-    },
-    // 返回
-    back() {
-      this.$emit('cancel')
-    },
-    // selectChoose
-    selectChoose(index) {
-      if (index !== 1) {
-        this.addForm.effectiveDate = ''
-        this.addForm.effectiveYear = ''
-        this.chooseDate = ''
-      }
-    },
-    clearAddForm() {
-      this.addForm = {
-        shopId: '', // 店铺id
-        checkHandle: '', // 1-同意入驻 0-拒绝入驻
-        effectiveDate: '', // 生效日期  null-即时生效 有值-指定日期生效
-        effectiveYear: '', // 生效时限（年）
-        reason: '' // 处理原因
-      }
-    },
-    // 处理申请确定
-    async handle_save() {
-      if (this.addForm.checkHandle === '') {
-        this.$message.error('请选择入驻处理')
-        return
-      }
-      if (this.addForm.effectiveDate === '' && this.addForm.checkHandle === 1) {
-        this.$message.error('请选择生效日期')
-        return
-      }
-      if (this.addForm.effectiveYear === '' && this.addForm.checkHandle === 1) {
-        this.$message.error('请输入生效时间')
-        return
-      }
-      if (this.addForm.effectiveDate !== 'null') {
-        this.addForm.effectiveDate = this.chooseDate
-      } else {
-        this.addForm.effectiveDate = 'null'
-      }
-      this.addForm.shopId = this.shopId
-      const loading = this.$loading({
-        lock: true,
-        text: '处理中请稍后...',
-        spinner: 'el-icon-loading',
-        background: 'rgba(0, 0, 0, 0.7)'
-      })
-      const res = await settlementHandle(this.addForm)
-      this.addFormDialog = false
-      if (res.code === '') {
-        this.shopDetails = {}
-        this.idCardCopyFilePath = []
-        this.$message({
-          message: '处理成功',
-          type: 'success'
-        })
-        this.clearAddForm()
-        this.$emit('cancel')
-        this.$emit('search')
-      } else {
-        console.log('error')
-      }
-      loading.close()
-    }
-  }
-}
-</script>
-
-<style
-  lang="scss"
-  scoped
->
-//@import url(); 引入公共css类
-.clearfix {
-	.leftTitle {
-		font-size: 24px;
-		color: #333333;
-	}
-
-	.girhtBtn {
-		float: right;
-	}
-}
-
-.detail {
-	min-height: 500px;
-	background: rgba(255, 255, 255, 1);
-	box-shadow: 0px 0px 10px 0px rgba(51, 51, 51, 0.15);
-	border-radius: 4px;
-	padding: 1px 50px 20px;
-	margin-top: 15px;
-
-	.detail_title {
-		font-size: 24px;
-		color: #333333;
-		position: relative;
-		margin: 50px 20px 20px;
-
-		font {
-			color: #ff7911;
-		}
-
-		&:before {
-			content: "";
-			display: block;
-			position: absolute;
-			top: 5px;
-			left: -20px;
-			width: 4px;
-			height: 24px;
-			background-color: #3a68f2;
-		}
-	}
-
-	.detail_text {
-		line-height: 40px;
-
-		span {
-			display: inline-block;
-			color: #333333;
-			font-size: 16px;
-
-			&:nth-child(1) {
-				width: 150px;
-				text-indent: 20px;
-
-				font {
-					color: red;
-				}
-			}
-
-			&:nth-child(2) {
-				color: #666666;
-			}
-		}
-	}
-
-	.detail_img {
-		position: relative;
-		line-height: 40px;
-		margin-bottom: 30px;
-		overflow: hidden;
-
-		span {
-			position: absolute;
-			top: 0;
-			left: 0;
-			display: inline-block;
-			color: #333333;
-			font-size: 16px;
-			width: 150px;
-			text-indent: 20px;
-
-			font {
-				color: #ff7911;
-			}
-		}
-
-		.img_box {
-			width: 265px;
-			height: 170px;
-			border-radius: 4px;
-			float: left;
-
-			&:nth-of-type(1) {
-				margin: 0 30px 0 150px;
-			}
-		}
-	}
-}
-
-.spanIpt {
-	width: 60%;
-}
-
-.riSpan {
-	margin-left: 10px;
-}
-</style>

src/views/brandFactory/settlement/index.vue

@@ -1,190 +1,202 @@
 <template>
-  <div class="pdl">
-    <!-- 选项卡 -->
-    <el-tabs v-model="activeName" @tab-click="handleClick">
-      <el-tab-pane label="待处理" name="0" />
-      <el-tab-pane label="已通过" name="1" />
-      <el-tab-pane label="已拒绝" name="2" />
-    </el-tabs>
-    <!-- 搜索 -->
-    <div class="formSearch">
-      <el-form :inline="true" :model="formInline">
-        <el-form-item label="商家名称">
-          <el-input v-model="formInline.shopName" maxlength="20" placeholder="请输入商家名称" />
-        </el-form-item>
-        <el-form-item label="注册手机号">
-          <el-input v-model="formInline.shopPhone" maxlength="11" placeholder="请输入注册手机号" />
-        </el-form-item>
-        <el-form-item label="店铺类型">
-          <el-select v-model="formInline.authenType" clearable placeholder="请选择">
-            <el-option label="个人" value="1" />
-            <el-option label="个体工商户" value="2" />
-            <el-option label="企业" value="3" />
-            <el-option label="其他组织" value="4" />
-          </el-select>
-        </el-form-item>
-        <el-form-item label="申请时间">
-          <el-date-picker v-model="formInline.dates" type="datetimerange" value-format="yyyy-MM-dd" range-separator="至"
-            start-placeholder="开始日期" end-placeholder="结束日期" />
-        </el-form-item>
-        <el-form-item>
-          <el-button type="primary" plain @click="search">查询</el-button>
-        </el-form-item>
-      </el-form>
+  <div class="app-container">
+    <!-- 查询和其他操作 -->
+    <div class="filter-container">
+      <el-select
+        v-model="listQuery.checkState" clearable size="mini" class="filter-item"
+        style="width: 200px;" placeholder="请选择审核状态"
+      >
+        <el-option label="待处理" :value="0" />
+        <el-option label="已通过" :value="1" />
+        <el-option label="已拒绝" :value="2" />
+      </el-select>
+      <el-input
+        v-model="listQuery.shopName" clearable size="mini" class="filter-item"
+        style="width: 200px;margin-left: 10px;" placeholder="请输入商家名称"
+      />
+      <el-input
+        v-model="listQuery.shopPhone" clearable size="mini" class="filter-item"
+        style="width: 200px;margin-left: 10px;" placeholder="请输入注册手机号"
+      />
+      <el-select
+        v-model="listQuery.authenType" clearable size="mini" class="filter-item"
+        style="width: 200px;margin-left: 10px;" placeholder="请选择店铺类型"
+      >
+        <el-option label="个人" :value="1" />
+        <el-option label="个体工商户" :value="2" />
+        <el-option label="企业" :value="3" />
+        <el-option label="其他组织" :value="4" />
+      </el-select>
+      <el-date-picker
+        v-model="listQuery.dates" type="datetimerange" range-separator="至"
+        start-placeholder="开始时间" end-placeholder="结束时间" size="mini"
+        class="filter-item" style="margin-left: 10px;line-height: 1;" value-format="yyyy-MM-dd"
+      />
+      <el-button
+        size="mini" class="filter-item" type="primary" icon="el-icon-search"
+        style="margin-left:10px;"
+        @click="handleSearch"
+      >
+        查找
+      </el-button>
+      <br />
+      <el-button
+        size="mini" type="primary" icon="el-icon-plus"
+        @click="$refs.EditModal && $refs.EditModal.handleOpen({ shopId: '' })"
+      >
+        添加
+      </el-button>
     </div>
-    <!-- 表格 -->
-    <div class="tableBox">
-      <el-table ref="multipleTable" :data="tableData" border
-        :header-cell-style="{ background: '#EEF3FF', color: '#333333' }" tooltip-effect="dark" style="width: 100%">
-        <el-table-column label="商家名称" width="220">
-          <template slot-scope="scope">{{ scope.row.shopName }}</template>
+
+    <!-- 查询结果 -->
+    <div v-tableHeight>
+      <el-table
+        v-loading="listLoading" height="100%" element-loading-text="正在查询中。。。" :data="list"
+        v-bind="{ stripe: true, size: 'small', border: true, fit: true, highlightCurrentRow: true }"
+      >
+        <el-table-column align="center" width="100" label="商家ID" prop="shopId" fixed="left" />
+        <el-table-column align="center" label="商家名称" prop="shopName">
+          <template slot-scope="{ row }">
+            <span>{{ row.shopName || '--' }}</span>
+          </template>
         </el-table-column>
-        <el-table-column label="店铺类型">
-          <template slot-scope="scope">
-            <span v-if="scope.row.authenType == 1">个人</span>
-            <span v-if="scope.row.authenType == 2">个体工商户</span>
-            <span v-if="scope.row.authenType == 3">企业</span>
-            <span v-if="scope.row.authenType == 4">其他组织</span>
+        <el-table-column align="center" label="店铺类型" prop="authenType">
+          <template slot-scope="{ row }">
+            <el-tag v-if="row.authenType === 1" effect="plain">个人</el-tag>
+            <el-tag v-else-if="row.authenType === 2" effect="plain">个体工商户</el-tag>
+            <el-tag v-else-if="row.authenType === 3" effect="plain">企业</el-tag>
+            <el-tag v-else-if="row.authenType === 4" effect="plain">其他组织</el-tag>
+            <span v-else>--</span>
           </template>
         </el-table-column>
-        <el-table-column prop="shopPhone" label="注册手机号" />
-        <el-table-column prop="createTime" label="申请时间" />
-        <el-table-column label="操作" show-overflow-tooltip>
-          <template slot-scope="scope">
-            <div class="btnList">
-              <el-button v-if="activeName == 0" type="text" @click="handleDel(scope.row)">
-                处理
-              </el-button>
-              <el-button v-if="activeName == 1 || activeName == 2" type="text" @click="handleDel(scope.row)">
-                查看
-              </el-button>
-              <el-button v-if="activeName == 1 || activeName == 2" type="text" @click="delet(scope.row)">
-                删除
-              </el-button>
-            </div>
+        <el-table-column align="center" width="120" label="注册手机号" prop="shopPhone" show-overflow-tooltip />
+        <el-table-column align="center" width="150" label="创建时间" prop="createTime" />
+        <el-table-column align="center" label="操作" width="220" fixed="right" class-name="small-padding fixed-width">
+          <template slot-scope="{ row }">
+            <el-button type="warning" size="mini" @click="handleDetail(row)">
+              详情
+            </el-button>
+            <el-button
+              v-if="listQuery.checkState === 0" size="mini"
+              @click="$refs.ApplicationProcessing && $refs.ApplicationProcessing.handleOpen(row)"
+            >
+              处理
+            </el-button>
+            <el-button
+              v-if="(listQuery.checkState === 1) || (listQuery.checkState === 2)" type="danger"
+              size="mini" @click="handleDelete(row)"
+            >
+              删除
+            </el-button>
           </template>
         </el-table-column>
       </el-table>
-      <div class="fenye">
-        <el-pagination :current-page="formInline.page" :page-sizes="[10, 20, 50, 100]" :page-size="10"
-          layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
-          @current-change="handleCurrentChange" />
-      </div>
     </div>
 
-    <el-dialog :title="'商家入驻审核'" :visible.sync="addVisible" top="5vh" width="70%" center :show-close="false"
-      :close-on-click-modal="false">
-      <AddSettlement v-loading="loading" :business-data="form" @cancel="cleanForm" @search="search" />
-    </el-dialog>
+    <div>
+      <el-pagination
+        :current-page="listQuery.page" :page-sizes="[10, 20, 50, 100]" :page-size="listQuery.pageSize"
+        layout="total, sizes, prev, pager, next, jumper" :total="total"
+        @size-change="(val) => ((listQuery.pageSize = val) && getList())"
+        @current-change="(val) => ((listQuery.page = val) && getList())"
+      />
+    </div>
+
+    <!-- 提现处理 -->
+    <ApplicationProcessing ref="ApplicationProcessing" @success="getList" />
+    <!-- 查看详情 -->
+    <DetailModal ref="DetailModal" />
   </div>
 </template>
 
 <script>
-import AddSettlement from '@/views/business/settlement/addSettlement'
 
-import {
-  settlementGetAll,
-  settlementDelete
-} from '@/api/business'
-import {
-  settlementGetById
-} from '@/api/business'
+import ApplicationProcessing from '../../business/settlement/components/ApplicationProcessing'
+import DetailModal from '../../business/settlement/components/DetailModal'
+import { settlementGetAll, settlementDelete } from '@/api/business'
 
 export default {
+  name: 'Settlement',
   components: {
-    AddSettlement
+    ApplicationProcessing,
+    DetailModal
   },
   data() {
-    // 这里存放数据
     return {
-      activeName: '0',
-      formInline: {
-        shopName: '', // 商家名称
-        shopPhone: '', // 注册手机号
-        authenType: '', // 店铺类型 1-个人 2-个体工商户 3-企业 4-其他组织
-        dates: [], // 时间数组
-        checkState: '0', // 入驻处理状态 0-未处理 1-通过 2-拒绝
+      list: [],
+      total: 0,
+      listLoading: true,
+      listQuery: {
+        shopName: '',
+        shopPhone: '',
+        authenType: '',
+        dates: [],
+        checkState: 0,
         page: 1,
-        pageSize: 10,
+        pageSize: 20,
         shopType: 1
-      },
-      total: 10,
-      tableData: [],
-      addVisible: false,
-      loading: false,
-      form: {}
+      }
     }
   },
-  mounted() {
-    this.getAll(this.formInline)
+  created() {
+    this.getList()
   },
-  // 方法集合
   methods: {
-    handleSizeChange(val) {
-      this.formInline.pageSize = val
-      this.getAll(this.formInline)
-    },
-    handleCurrentChange(val) {
-      this.formInline.page = val
-      this.getAll(this.formInline)
-    },
-    handleClick(tab, event) {
-      this.formInline.checkState = tab.index
-      this.getAll(this.formInline)
-    },
-    // 查询
-    search() {
-      this.total = 1
-      this.formInline.page = 1
-      this.getAll(this.formInline)
-    },
-    // 处理
-    handleDel(row) {
-      this.addVisible = true
-      this.getFormData(row.shopId)
+    async getList() {
+      this.listLoading = true
+      try {
+        const res = await settlementGetAll(this.listQuery)
+        this.list = res.data.list
+        this.total = res.data.total
+      } finally {
+        this.listLoading = false
+      }
     },
-    getFormData(shopId) {
-      this.loading = true
-      // 查询店铺详情
-      settlementGetById({ shopId })
-        .then((res) => {
-          this.loading = false
-          this.form = res.data
-        })
-        .catch((err) => {
-          this.loading = false
-          console.log(err)
-        })
+    handleSearch() {
+      this.listQuery.page = 1
+      this.getList()
     },
-    cleanForm() {
-      this.addVisible = false
+    handleDetail(row) {
+      this.$refs.DetailModal && this.$refs.DetailModal.handleOpen(row)
     },
-    // 删除
-    async delet(row) {
-      const res = await settlementDelete({ checkId: row.checkId })
-      if (res.code === '') {
-        this.$message({
-          message: '删除成功',
-          type: 'success'
+    handleDelete(row) {
+      this.$confirm('确定删除此项？')
+        .then(async () => {
+          await settlementDelete({ checkId: row.checkId })
+          this.$message({ message: '删除成功！', type: 'success' })
+          this.handleSearch()
         })
-        this.getAll(this.formInline)
-      }
-    },
-    // 初始化查询所有数据
-    async getAll(formInline) {
-      const res = await settlementGetAll(formInline)
-      this.tableData = res.data.list
-      this.total = res.data.total
+        .catch(() => {})
     }
   }
 }
 </script>
 
-<style lang='scss' scoped>
-//@import url(); 引入公共css类
-@import url("../../../styles/elDialog.scss");
+<style lang="scss" scoped>
+.app-container {
+	padding: 20px;
+	display: flex;
+	flex-direction: column;
+
+	.filter-container {
+		.filter-item {
+			display: inline-block;
+			vertical-align: middle;
+			margin-bottom: 10px;
+		}
+	}
+
+	.small-padding {
+		.cell {
+			padding-left: 5px;
+			padding-right: 5px;
+		}
+	}
 
-.pdl {
-  padding-left: 20px;
+	.fixed-width {
+		.el-button--mini {
+			padding: 7px 10px;
+		}
+	}
 }
 </style>

src/views/business/businessList/components/DetailModal.vue

@@ -1,45 +1,117 @@
 <template>
-  <el-dialog
-    :visible.sync="visible"
-    v-bind="modalOptions"
-  >
-    <el-form
-      ref="formData"
-      :model="formData"
-      size="mini"
-      label-position="left"
-      label-suffix=":"
-      label-width="200px"
-    >
-      <!-- 定时任务信息 -->
-      <el-form-item label="ID" prop="jobId">
-        {{ formData.jobId || '--' }}
-      </el-form-item>
-      <el-form-item label="定时器名称" prop="jobName">
-        {{ formData.jobName || '--' }}
-      </el-form-item>
-      <el-form-item label="spring bean 名称" prop="beanName">
-        {{ formData.beanName || '--' }}
-      </el-form-item>
-      <el-form-item label="方法名" prop="methodName">
-        {{ formData.methodName || '--' }}
-      </el-form-item>
-      <el-form-item label="参数" prop="params">
-        {{ formData.params || '--' }}
-      </el-form-item>
-      <el-form-item label="cron表达式" prop="cronExpression">
-        {{ formData.cronExpression || '--' }}
-      </el-form-item>
-      <el-form-item label="任务状态" prop="status">
-        <span v-if="formData.status === 0">正常</span>
-        <span v-else-if="formData.status === 1">暂停</span>
+  <el-dialog :visible.sync="visible" v-bind="modalOptions">
+    <el-form ref="formData" :model="formData" size="mini" label-position="left" label-suffix=":" label-width="200px">
+      <!-- 商家任务信息 -->
+      <el-form-item label="商家ID" prop="shopId">
+        {{ formData.shopId || '--' }}
+      </el-form-item>
+      <el-form-item label="店铺名称" prop="shopName">
+        {{ formData.shopName || '--' }}
+      </el-form-item>
+      <el-form-item label="是否支持消费金" prop="isBeeCoin">
+        <span v-if="formData.isBeeCoin === 1">支持</span>
+        <span v-else-if="formData.isBeeCoin === 2">不支持</span>
+        <span v-else>--</span>
+      </el-form-item>
+      <el-form-item label="商家消费金提现比例" prop="beeCoinRatio">
+        {{ formData.beeCoinRatio || '--' }}
+      </el-form-item>
+      <el-form-item label="店铺负责人" prop="chargePersonName">
+        {{ formData.chargePersonName || '--' }}
+      </el-form-item>
+      <el-form-item label="负责人电话" prop="chargePersonPhone">
+        {{ formData.chargePersonPhone || '--' }}
+      </el-form-item>
+      <el-form-item label="区域ID" prop="areaId">
+        {{ formData.areaId || '--' }}
+      </el-form-item>
+      <el-form-item label="官方分类名">
+        <span v-if="categoryList && categoryList.length">{{ getCategoryItem() && getCategoryItem().storeName }}</span>
+      </el-form-item>
+      <el-form-item label="店铺地址" prop="shopAdress">
+        {{ formData.shopAdress || '--' }}
+      </el-form-item>
+      <el-form-item label="经度" prop="longitude">
+        {{ formData.longitude || '--' }}
+      </el-form-item>
+      <el-form-item label="纬度" prop="latitude">
+        {{ formData.latitude || '--' }}
+      </el-form-item>
+      <el-form-item label="生效日期" prop="effectiveDate">
+        {{ formData.effectiveDate || '--' }}
+      </el-form-item>
+      <el-form-item label="生效年限" prop="effectiveYear">
+        {{ formData.effectiveYear || '--' }}
+      </el-form-item>
+      <el-form-item label="合同状态" prop="contractState">
+        <span v-if="formData.contractState === 0">无效</span>
+        <span v-else-if="formData.contractState === 1">有效</span>
+        <span v-else>--</span>
+      </el-form-item>
+      <el-form-item label="店铺类型" prop="shopType">
+        <span v-if="formData.shopType === 1">品牌厂家</span>
+        <span v-else-if="formData.shopType === 2">本地</span>
+        <span v-else>--</span>
+      </el-form-item>
+      <el-form-item label="营业开始时间" prop="startTime">
+        {{ formData.startTime || '--' }}
+      </el-form-item>
+      <el-form-item label="营业结束时间" prop="endTime">
+        {{ formData.endTime || '--' }}
+      </el-form-item>
+      <el-form-item label="店铺类型" prop="shopType">
+        <span v-if="formData.shopType === 1">品牌厂家</span>
+        <span v-else-if="formData.shopType === 2">本地</span>
         <span v-else>--</span>
       </el-form-item>
-      <el-form-item label="任务类型" prop="taskType">
-        {{ formData.taskType || '--' }}
+      <el-form-item label="是否支持代金券" prop="isVoucher">
+        <span v-if="formData.isVoucher === 1">允许</span>
+        <span v-else-if="formData.isVoucher === 2">拒绝</span>
+        <span v-else>--</span>
+      </el-form-item>
+      <el-form-item label="请输入代金券返还比例" prop="voucherReturn">
+        {{ formData.voucherReturn || '--' }}%
+      </el-form-item>
+      <el-form-item label="惠市宝商家编号" prop="hsbMrchId">
+        {{ formData.hsbMrchId || '--' }}
+      </el-form-item>
+      <el-form-item label="直播间审核" prop="auditLive">
+        <span v-if="formData.auditLive === 0">关闭</span>
+        <span v-else-if="formData.auditLive === 1">开启</span>
+        <span v-else>--</span>
+      </el-form-item>
+      <el-form-item label="直播间商品审核" prop="auditLiveProduct">
+        <span v-if="formData.auditLiveProduct === 0">关闭</span>
+        <span v-else-if="formData.auditLiveProduct === 1">开启</span>
+        <span v-else>--</span>
+      </el-form-item>
+      <el-form-item label="评分" prop="score">
+        {{ formData.score || '--' }}
+      </el-form-item>
+      <el-form-item label="商家月售额" prop="monthlySales">
+        {{ formData.monthlySales || '--' }}
+      </el-form-item>
+      <el-form-item label="人均消费额" prop="perCapita">
+        {{ formData.perCapita || '--' }}
       </el-form-item>
-      <el-form-item label="备注" prop="remark">
-        {{ formData.remark || '--' }}
+      <el-form-item label="商家简介" prop="shopBrief">
+        {{ formData.shopBrief || '--' }}
+      </el-form-item>
+      <el-form-item label="广告图" prop="advertisement">
+        <div v-if="formData.advertisement && formData.advertisement.length">
+          <el-image
+            v-for="(item, index) in formData.advertisement" :key="index" :src="item"
+            style="width:80px;height:80px;margin-right: 10px;" fit="cover"
+            :preview-src-list="formData.advertisement"
+          />
+        </div>
+        <span v-else>--</span>
+      </el-form-item>
+      <el-form-item label="账号" prop="shopPhone">
+        {{ formData.shopPhone || '--' }}
+      </el-form-item>
+      <el-form-item label="密码" prop="shopPassword">
+        {{ formData.shopPassword || '--' }}
       </el-form-item>
       <el-form-item label="创建时间" prop="createTime">
         {{ formData.createTime || '--' }}
@@ -49,7 +121,8 @@
 </template>
 
 <script>
-import { getIdQuartzJob } from '@/api/timedTasksManagement/timedTasksList'
+import { businessListGetById, businessClassList } from '@/api/business'
+import XeUtils from 'xe-utils'
 
 export default {
   name: 'DetailModal',
@@ -58,49 +131,82 @@ export default {
       modalOptions: {
         closeOnClickModal: false,
         width: '800px',
-        title: '查看定时任务详情'
+        title: '查看商家详情'
       },
       visible: false,
       formData: {
-        jobId: '',
-        jobName: '',
-        beanName: '',
-        methodName: '',
-        params: '',
-        cronExpression: '',
-        status: '',
-        taskType: '',
-        remark: '',
+        shopId: '',
+        shopName: '', // 店铺名称
+        isBeeCoin: '', // 是否支持消费金
+        beeCoinRatio: '', // 商家消费金提现比例
+        chargePersonName: '', // 店铺负责人
+        chargePersonPhone: '', // 负责人电话
+        shopAdress: '', // 地址
+        effectiveDate: '', // 生效日期
+        effectiveYear: '', // 生效年限
+        shopType: 2, // 商家类型 1 商家 2 本地
+        isVoucher: 1, // 是否支持代金卷 1 true 2 false
+        voucherReturn: '',
+        contractState: 1, // 合同状态 1-有效 0-无效
+        auditLive: 1,
+        auditLiveProduct: 1,
+        shopPhone: '', // 账号
+        shopPassword: '', // 密码
+        perCapita: '', // 人均
+        score: '', // 评分
+        advertisement: [], // 广告图
+        areaId: '', // 区域id
+        hsbMrchId: '', // 惠市宝商家编号，不是必填
+        longitude: '', // 经纬度
+        latitude: '', // 经纬度
+        classificationId: '', // 商家分类id
+        classificationName: '', // 非后端参数
+        startTime: '',
+        endTime: '',
+        shopBrief: '', // 商家简介
+        monthlySales: '',
         createTime: ''
-      }
+      },
+      categoryList: []
     }
   },
+  created() {
+    this.getCategoryTreeList()
+  },
   methods: {
     handleClose() {
       this.visible = false
     },
+    async getCategoryTreeList() {
+      const res = await businessClassList({ page: 1, pageSize: 9999 })
+      XeUtils.eachTree(res.data.records, (item) => {
+        if (Array.isArray(item.childs) && item.childs.length === 0) {
+          item.childs = undefined
+        }
+      }, { children: 'childs' })
+      this.categoryList = res.data.records
+    },
+    getCategoryItem() {
+      const { classificationId } = this.formData
+      const categoryItem = XeUtils.findTree(this.categoryList, (item) => item.id === classificationId)
+      return categoryItem ? categoryItem.item : {}
+    },
     handleOpen(params = {}) {
-      this.formData = Object.assign(this.$options.data().formData, params)
-      if (params.jobId) {
-        this.getInfo(params.jobId)
+      this.formData = Object.assign(this.$options.data().formData, params, {
+        advertisement: params.advertisement ? params.advertisement.split(',') : []
+      })
+      if (params.shopId) {
+        this.getInfo(params.shopId)
       }
       this.visible = true
     },
     async getInfo(id) {
       const loading = this.$loading({ text: '加载中' })
       try {
-        const res = await getIdQuartzJob({ id })
+        const res = await businessListGetById({ shopId: id })
         this.formData = Object.assign(this.$options.data().formData, res.data, {
-          jobId: res.data.jobId || '',
-          jobName: res.data.jobName || '',
-          beanName: res.data.beanName || '',
-          methodName: res.data.methodName || '',
-          params: res.data.params || '',
-          cronExpression: res.data.cronExpression || '',
-          status: res.data.status,
-          taskType: res.data.taskType || '',
-          remark: res.data.remark || '',
-          createTime: res.data.createTime || ''
+          shopId: res.data.shopId || '',
+          advertisement: res.data.advertisement ? res.data.advertisement.split(',') : []
         })
       } finally {
         loading.close()
@@ -109,4 +215,3 @@ export default {
   }
 }
 </script>
-

src/views/business/businessList/components/EditModal.vue

@@ -1,220 +1,219 @@
 <template>
-  <el-dialog :visible.sync="visible" v-bind="modalOptions">
-    <div>
-      <el-form ref="formData" :model="formData" :rules="formRules" size="mini" label-suffix=":" label-width="150px">
-        <div>
-          <el-tabs v-model="activeName">
-            <el-tab-pane label="授权信息" name="first">
-              <el-form-item label="店铺名称" prop="shopName">
-                <el-input v-model="ruleForm.shopName" maxlength="20" />
-              </el-form-item>
-              <el-form-item label="是否支持消费金" prop="isBeeCoin">
-                <el-radio-group v-model="ruleForm.isBeeCoin">
-                  <el-radio :label="1">支持</el-radio>
-                  <el-radio :label="2">不支持</el-radio>
-                </el-radio-group>
-              </el-form-item>
-              <el-form-item v-if="ruleForm.isBeeCoin === 1" label="商家消费金提现比例" prop="beeCoinRatio">
-                <el-input-number v-model="ruleForm.beeCoinRatio" :precision="2" :step="0.01" :max="1"></el-input-number>
-                <span style="margin-left: 10px;">比例*100</span>
-              </el-form-item>
-              <el-form-item label="店铺负责人" prop="chargePersonName">
-                <el-input v-model="ruleForm.chargePersonName" maxlength="20" />
-              </el-form-item>
-              <el-form-item label="负责人电话" prop="chargePersonPhone">
-                <!-- .replace(/(\d{3})\d+(\d{4})$/, '$1****$2') -->
-                <el-input v-model="ruleForm.chargePersonPhone" maxlength="11" clearable />
-              </el-form-item>
-              <el-form-item label="请选择区域" prop="areaId">
-                <el-cascader
-                  v-if="!isEdit" ref="cascaderRef" :props="areaData"
-                  @change="handleCascaderChange"
-                ></el-cascader>
-                <div v-else>
-                  {{ ruleForm.areaId }}
-                  <el-button size="mini" type="primary" style="margin-left: 15px;" @click="isEdit = !isEdit">
-                    {{ isEdit ? '修改' : '取消' }}
-                  </el-button>
-                </div>
-              </el-form-item>
-              <el-form-item label="官方分类" prop="classifyId">
-                <el-cascader
-                  v-model="ruleForm.classificationArr" placeholder="请选择官方分类" :options="categoryList"
-                  :props="{ checkStrictly: false, expandTrigger: 'hover', label: 'storeName', value: 'id', children: 'childs' }"
-                  clearable
-                />
-              </el-form-item>
-              <el-form-item label="店铺地址" prop="shopAdress">
-                <el-input v-model="ruleForm.shopAdress" maxlength="60" />
-              </el-form-item>
-              <el-form-item label="店铺经纬度" prop="longitude">
-                <div>
-                  <span v-if="ruleForm.longitude">
-                    {{ ruleForm.longitude }} - {{ ruleForm.latitude }}
-                  </span>
-                  <el-button
-                    size="mini" type="primary" style="margin-left: 20px;"
-                    @click="$refs.selectAddressMapRef && $refs.selectAddressMapRef.show()"
+  <div>
+    <el-dialog :visible.sync="visible" v-bind="modalOptions">
+      <div>
+        <el-form ref="formData" :model="formData" :rules="formRules" size="mini" label-suffix=":" label-width="150px">
+          <div>
+            <el-tabs v-model="activeName">
+              <el-tab-pane label="授权信息" name="first">
+                <el-form-item label="店铺名称" prop="shopName">
+                  <el-input v-model="formData.shopName" maxlength="20" />
+                </el-form-item>
+                <el-form-item label="是否支持消费金" prop="isBeeCoin">
+                  <el-radio-group v-model="formData.isBeeCoin">
+                    <el-radio :label="1">支持</el-radio>
+                    <el-radio :label="2">不支持</el-radio>
+                  </el-radio-group>
+                </el-form-item>
+                <el-form-item v-if="formData.isBeeCoin === 1" label="商家消费金提现比例" prop="beeCoinRatio">
+                  <el-input-number v-model="formData.beeCoinRatio" :precision="2" :step="0.01" :max="1"></el-input-number>
+                  <span style="margin-left: 10px;">比例*100</span>
+                </el-form-item>
+                <el-form-item label="店铺负责人" prop="chargePersonName">
+                  <el-input v-model="formData.chargePersonName" maxlength="20" />
+                </el-form-item>
+                <el-form-item label="负责人电话" prop="chargePersonPhone">
+                  <!-- .replace(/(\d{3})\d+(\d{4})$/, '$1****$2') -->
+                  <el-input v-model="formData.chargePersonPhone" maxlength="11" clearable />
+                </el-form-item>
+                <el-form-item label="请选择区域" prop="areaId">
+                  <el-cascader
+                    v-model="regionArrDialog" :props="regionProps" size="large" placeholder="请选择区域"
+                    @change="formData.areaId = regionArrDialog[regionArrDialog.length - 1]"
+                  ></el-cascader>
+                  <div v-if="formData.areaId">已选ID：{{ formData.areaId }}</div>
+                </el-form-item>
+                <el-form-item label="官方分类" prop="classifyId">
+                  <el-cascader
+                    v-model="formData.classificationArr" placeholder="请选择官方分类" :options="categoryList"
+                    :props="{ checkStrictly: false, expandTrigger: 'hover', label: 'storeName', value: 'id', children: 'childs' }"
+                    clearable
+                  />
+                </el-form-item>
+                <el-form-item label="店铺地址" prop="shopAdress">
+                  <el-input v-model="formData.shopAdress" maxlength="60" />
+                </el-form-item>
+                <el-form-item label="店铺经纬度" prop="longitude">
+                  <div>
+                    <span v-if="formData.longitude">
+                      {{ formData.longitude }} - {{ formData.latitude }}
+                    </span>
+                    <el-button
+                      size="mini" type="primary" style="margin-left: 20px;"
+                      @click="$refs.selectAddressMapRef && $refs.selectAddressMapRef.show()"
+                    >
+                      {{ formData.longitude ? '修改' : '选择' }}
+                    </el-button>
+                  </div>
+                </el-form-item>
+                <el-form-item label="生效日期" prop="effectiveDate">
+                  <el-date-picker
+                    v-model="formData.effectiveDate" value-format="yyyy-MM-dd" type="date"
+                    placeholder="选择日期"
+                  />
+                </el-form-item>
+                <el-form-item label="生效年限" prop="effectiveYear">
+                  <el-input
+                    v-model="formData.effectiveYear" type="text" placeholder="请输入内容" maxlength="4"
+                    class="elipt"
+                    style="width: 50%" show-word-limit
+                  />
+                  <span class="elspan">年</span>
+                </el-form-item>
+                <el-form-item label="合同状态" prop="contractState">
+                  <el-radio-group v-model="formData.contractState">
+                    <el-radio :label="1">
+                      有效
+                    </el-radio>
+                    <el-radio :label="0">
+                      无效
+                    </el-radio>
+                  </el-radio-group>
+                </el-form-item>
+                <el-form-item label="店铺类型" prop="shopType">
+                  <el-radio-group v-model="formData.shopType">
+                    <!-- <el-radio :label="1">品牌厂家</el-radio> -->
+                    <el-radio :label="2">本地</el-radio>
+                  </el-radio-group>
+                </el-form-item>
+                <el-form-item
+                  v-if="formData.shopType === 2" prop="startTime" label="营业开始时间" :rules="[
+                    { required: true, message: '请选择营业开始时间', trigger: 'blur' }
+                  ]"
+                >
+                  <el-time-select
+                    v-model="formData.startTime" placeholder="起始时间"
+                    :picker-options="{ start: '00:00', step: '00:05' }"
                   >
-                    {{ ruleForm.longitude ? '修改' : '选择' }}
-                  </el-button>
-                </div>
-              </el-form-item>
-              <el-form-item label="生效日期" prop="effectiveDate">
-                <el-date-picker
-                  v-model="ruleForm.effectiveDate" value-format="yyyy-MM-dd" type="date"
-                  placeholder="选择日期"
-                />
-              </el-form-item>
-              <el-form-item label="生效年限" prop="effectiveYear">
-                <el-input
-                  v-model="ruleForm.effectiveYear" type="text" placeholder="请输入内容" maxlength="4"
-                  class="elipt"
-                  style="width: 50%" show-word-limit
-                />
-                <span class="elspan">年</span>
-              </el-form-item>
-              <el-form-item label="合同状态" prop="contractState">
-                <el-radio-group v-model="ruleForm.contractState">
-                  <el-radio :label="1">
-                    有效
-                  </el-radio>
-                  <el-radio :label="0">
-                    无效
-                  </el-radio>
-                </el-radio-group>
-              </el-form-item>
-              <el-form-item label="店铺类型" prop="shopType">
-                <el-radio-group v-model="ruleForm.shopType">
-                  <!-- <el-radio :label="1">品牌厂家</el-radio> -->
-                  <el-radio :label="2">本地</el-radio>
-                </el-radio-group>
-              </el-form-item>
-              <el-form-item
-                v-if="ruleForm.shopType === 2" prop="startTime" label="营业开始时间" :rules="[
-                  { required: true, message: '请选择营业开始时间', trigger: 'blur' }
-                ]"
-              >
-                <el-time-select
-                  v-model="ruleForm.startTime" placeholder="起始时间"
-                  :picker-options="{ start: '00:00', step: '00:05' }"
+                  </el-time-select>
+                </el-form-item>
+                <el-form-item
+                  v-if="formData.shopType === 2" prop="endTime" label="营业结束时间" :rules="[
+                    { required: true, message: '请选择营业结束时间', trigger: 'blur' }
+                  ]"
                 >
-                </el-time-select>
-              </el-form-item>
-              <el-form-item
-                v-if="ruleForm.shopType === 2" prop="endTime" label="营业结束时间" :rules="[
-                  { required: true, message: '请选择营业结束时间', trigger: 'blur' }
-                ]"
-              >
-                <el-time-select
-                  v-model="ruleForm.endTime" placeholder="营业结束时间"
-                  :picker-options="{ start: '00:00', step: '00:05', end: '24:00' }"
+                  <el-time-select
+                    v-model="formData.endTime" placeholder="营业结束时间"
+                    :picker-options="{ start: '00:00', step: '00:05', end: '24:00' }"
+                  >
+                  </el-time-select>
+                </el-form-item>
+                <el-form-item label="是否支持代金券" prop="isVoucher">
+                  <el-radio-group v-model="formData.isVoucher">
+                    <el-radio :label="1">
+                      允许
+                    </el-radio>
+                    <el-radio :label="2">
+                      拒绝
+                    </el-radio>
+                  </el-radio-group>
+                </el-form-item>
+                <el-form-item
+                  v-if="formData.isVoucher === 1" :rules="[
+                    { required: true, message: '请输入代金券返还比例', trigger: 'blur' },
+                    { type: 'number', max: 100, min: 0, message: '请输入正确的代金券返还比例，0 ~ 100', trigger: ['blur', 'change'] }
+                  ]" label="代金券返还比例" prop="voucherReturn"
                 >
-                </el-time-select>
-              </el-form-item>
-              <el-form-item label="是否支持代金券" prop="isVoucher">
-                <el-radio-group v-model="ruleForm.isVoucher">
-                  <el-radio :label="1">
-                    允许
-                  </el-radio>
-                  <el-radio :label="2">
-                    拒绝
-                  </el-radio>
-                </el-radio-group>
-              </el-form-item>
-              <el-form-item
-                v-if="ruleForm.isVoucher === 1" :rules="[
-                  { required: true, message: '请输入代金券返还比例', trigger: 'blur' },
-                  { type: 'number', max: 100, min: 0, message: '请输入正确的代金券返还比例，0 ~ 100', trigger: ['blur', 'change'] }
-                ]" label="代金券返还比例" prop="voucherReturn"
-              >
-                <el-input v-model.number="ruleForm.voucherReturn" placeholder="请填写代金券返还比例，范围0 ~ 100">
-                  <template #append>%</template>
-                </el-input>
-              </el-form-item>
-              <el-form-item label="惠市宝商家编号">
-                <el-input v-model="ruleForm.hsbMrchId" maxlength="60" />
-              </el-form-item>
-              <el-form-item label="直播间审核" prop="auditLive">
-                <el-radio-group v-model="ruleForm.auditLive">
-                  <el-radio :label="1">开启</el-radio>
-                  <el-radio :label="0">关闭</el-radio>
-                </el-radio-group>
-              </el-form-item>
-              <el-form-item label="直播间商品审核" prop="auditLiveProduct">
-                <el-radio-group v-model="ruleForm.auditLiveProduct">
-                  <el-radio :label="1">
-                    开启
-                  </el-radio>
-                  <el-radio :label="0">
-                    关闭
-                  </el-radio>
-                </el-radio-group>
-              </el-form-item>
+                  <el-input v-model.number="formData.voucherReturn" placeholder="请填写代金券返还比例，范围0 ~ 100">
+                    <template #append>%</template>
+                  </el-input>
+                </el-form-item>
+                <el-form-item label="惠市宝商家编号">
+                  <el-input v-model="formData.hsbMrchId" maxlength="60" />
+                </el-form-item>
+                <el-form-item label="直播间审核" prop="auditLive">
+                  <el-radio-group v-model="formData.auditLive">
+                    <el-radio :label="1">开启</el-radio>
+                    <el-radio :label="0">关闭</el-radio>
+                  </el-radio-group>
+                </el-form-item>
+                <el-form-item label="直播间商品审核" prop="auditLiveProduct">
+                  <el-radio-group v-model="formData.auditLiveProduct">
+                    <el-radio :label="1">
+                      开启
+                    </el-radio>
+                    <el-radio :label="0">
+                      关闭
+                    </el-radio>
+                  </el-radio-group>
+                </el-form-item>
 
-              <el-form-item class="b-shop-rate" prop="score" label="评分">
-                <el-rate v-model="ruleForm.score"></el-rate>
-              </el-form-item>
+                <el-form-item class="b-shop-rate" prop="score" label="评分">
+                  <el-rate v-model="formData.score"></el-rate>
+                </el-form-item>
 
-              <el-form-item prop="monthlySales" label="月售">
-                <el-input v-model.number="ruleForm.monthlySales" placeholder="请输入商家月售额" type="number"></el-input>
-              </el-form-item>
+                <el-form-item prop="monthlySales" label="月售">
+                  <el-input v-model.number="formData.monthlySales" placeholder="请输入商家月售额" type="number"></el-input>
+                </el-form-item>
 
-              <el-form-item prop="perCapita" label="人均">
-                <el-input v-model.number="ruleForm.perCapita" type="number" placeholder="请输入人均消费额" closeable></el-input>
-              </el-form-item>
+                <el-form-item prop="perCapita" label="人均">
+                  <el-input v-model.number="formData.perCapita" type="number" placeholder="请输入人均消费额" closeable></el-input>
+                </el-form-item>
 
-              <el-form-item prop="shopBrief" label="商家简介">
-                <el-input
-                  v-model="ruleForm.shopBrief" autosize maxlength="250" show-word-limit
-                  type="textarea"
-                  placeholder="请输入商家简介" closeable
-                ></el-input>
-              </el-form-item>
+                <el-form-item prop="shopBrief" label="商家简介">
+                  <el-input
+                    v-model="formData.shopBrief" autosize maxlength="250" show-word-limit
+                    type="textarea"
+                    placeholder="请输入商家简介" closeable
+                  ></el-input>
+                </el-form-item>
 
-              <el-form-item prop="advertisement" label="广告图">
-                <el-upload
-                  class="avatar-uploader" list-type="picture-card" :file-list="formData.advertisement"
-                  :action="uploadUrl"
-                  :on-success="(r) => formData.advertisement.push({ url: r.url, uid: r.url + Math.random() + Date.now() })"
-                  :on-remove="(e) => formData.advertisement.filter((item) => item.uid !== e.uid)"
-                >
-                  <i class="el-icon-plus avatar-uploader-icon" />
-                </el-upload>
-              </el-form-item>
-            </el-tab-pane>
-            <el-tab-pane label="客户信息" name="second">
-              <el-form-item label="账号" prop="shopPhone" maxlength="20" />
-              </el-form-item>
-              <el-form-item label="密码" prop="shopPassword">
-                <el-input v-model="ruleForm.shopPassword" type="password" maxlength="16" />
-              </el-form-item>
-            </el-tab-pane>
-          </el-tabs>
-        </div>
-      </el-form>
+                <el-form-item prop="advertisement" label="广告图">
+                  <el-upload
+                    class="avatar-uploader" list-type="picture-card" :file-list="formData.advertisement"
+                    :action="uploadUrl"
+                    :on-success="(r) => formData.advertisement.push({ url: r.url, uid: r.url + Math.random() + Date.now() })"
+                    :on-remove="(e) => formData.advertisement.filter((item) => item.uid !== e.uid)"
+                  >
+                    <i class="el-icon-plus avatar-uploader-icon" />
+                  </el-upload>
+                </el-form-item>
+              </el-tab-pane>
+              <el-tab-pane label="客户信息" name="second">
+                <el-form-item label="账号" prop="shopPhone" maxlength="20">
+                  <el-input ref="shopPhoneCls" v-model="formData.shopPhone" maxlength="20" />
+                </el-form-item>
+                <el-form-item label="密码" prop="shopPassword">
+                  <el-input v-model="formData.shopPassword" type="password" maxlength="16" />
+                </el-form-item>
+              </el-tab-pane>
+            </el-tabs>
+          </div>
+        </el-form>
+      </div>
+      <template #footer>
+        <span class="dialog-footer">
+          <el-button size="mini" @click="handleClose">取 消</el-button>
+          <el-button v-if="activeName === 'first'" type="primary" size="mini" @click="activeName = 'second'">
+            下一步
+          </el-button>
+          <el-button v-else-if="activeName === 'second'" type="primary" size="mini" @click="handleSubmit">确 定</el-button>
+        </span>
+      </template>
+    </el-dialog>
 
-      <!-- 选择经纬度 -->
-      <SelectAddressMap
-        ref="selectAddressMapRef"
-        @select="(ruleForm.longitude = address[0]) && (ruleForm.latitude = address[1])"
-      ></SelectAddressMap>
-    </div>
-    <template #footer>
-      <span class="dialog-footer">
-        <el-button size="mini" @click="handleClose">取 消</el-button>
-        <el-button v-if="activeName === 'first'" type="primary" size="mini" @click="activeName = 'second'">
-          下一步
-        </el-button>
-        <el-button v-else-if="activeName === 'second'" type="primary" size="mini" @click="handleSubmit">确 定</el-button>
-      </span>
-    </template>
-  </el-dialog>
+    <!-- 选择经纬度 -->
+    <SelectAddressMap
+      ref="selectAddressMapRef"
+      @select="(formData.longitude = address[0]) && (formData.latitude = address[1])"
+    ></SelectAddressMap>
+  </div>
 </template>
 
 <script>
 import SelectAddressMap from './SelectAddressMap'
 import { businessListGetById, businessListUpdate, businessListSave, businessClassList } from '@/api/business'
+import { getProvinceList, getChildAreaList } from '@/api/address'
 import { uploadUrl } from '@/utils/request'
 import XeUtils from 'xe-utils'
 
@@ -243,13 +242,14 @@ export default {
         effectiveYear: '', // 生效年限
         shopType: 2, // 商家类型 1 商家 2 本地
         isVoucher: 1, // 是否支持代金卷 1 true 2 false
+        voucherReturn: '',
         contractState: 1, // 合同状态 1-有效 0-无效
         auditLive: 1,
         auditLiveProduct: 1,
         shopPhone: '', // 账号
         shopPassword: '', // 密码
         perCapita: '', // 人均
-        score: 5, // 评分
+        score: '', // 评分
         advertisement: [], // 广告图
         areaId: '', // 区域id
         hsbMrchId: '', // 惠市宝商家编号，不是必填
@@ -280,13 +280,43 @@ export default {
         auditLive: [ { required: true, message: '请选择状态', trigger: 'change' } ],
         auditLiveProduct: [ { required: true, message: '请选择状态', trigger: 'change' } ],
         score: [ { required: true, message: '请选择商家评分', trigger: 'change' } ],
-        monthlySales: [ { required: true, message: '请输入商家月售额', trigger: 'trigger' } ],
+        monthlySales: [ { required: true, message: '请输入商家月售额', trigger: 'blur' } ],
         // advertisement: [ { required: true, message: '请上传广告图', trigger: 'trigger' } ],
         // classificationArr: [ { required: true, type: 'array', message: '请选择分类' } ],
         areaId: [ { required: true, message: '请选择地址', trigger: 'blur' } ],
         longitude: [ { required: true, message: '请选择商家经纬度', trigger: 'blur' } ],
         isBeeCoin: [ { required: true, message: '请选择是否支持消费金' } ],
-        beeCoinRatio: []
+        beeCoinRatio: [],
+        shopPhone: [
+          { required: true, message: '请输入账号', trigger: 'blur' },
+          { pattern: /^1[3456789]\d{9}$/, message: '目前只支持中国大陆的手机号码' }
+        ],
+        shopPassword: [
+          { required: true, message: '请输入密码', trigger: 'blur' },
+          { pattern: /^[~!@#$%^&*\-+=_.0-9a-zA-Z]{8,16}$/, message: '8-16密码数字英文混合' }
+        ]
+      },
+      activeName: 'first',
+      regionArrDialog: [],
+      regionProps: {
+        lazy: true,
+        label: 'name',
+        value: 'id',
+        lazyLoad(node, resolve) {
+          const { level, value } = node
+          if (level === 0) {
+            getProvinceList().then((res) => {
+              resolve(res.data)
+            })
+          } else if (level != 0) {
+            getChildAreaList(value).then((res) => {
+              resolve(res.data.map((item) => {
+                item.leaf = level === 3
+                return item
+              }))
+            })
+          }
+        }
       },
       uploadUrl,
       categoryList: []
@@ -316,12 +346,12 @@ export default {
     },
     async getCategoryTreeList() {
       const res = await businessClassList({ page: 1, pageSize: 9999 })
-      XeUtils.eachTree(res.data, (item) => {
+      XeUtils.eachTree(res.data.records, (item) => {
         if (Array.isArray(item.childs) && item.childs.length === 0) {
           item.childs = undefined
         }
       }, { children: 'childs' })
-      this.categoryList = res.data
+      this.categoryList = res.data.records
     },
     initList() {
     },
@@ -334,6 +364,7 @@ export default {
       if (categoryItem && Array.isArray(categoryItem.nodes)) {
         this.formData.classificationArr = categoryItem.nodes.map((v) => v.id)
       }
+      if (this.formData.areaId) this.regionArrDialog = [ this.formData.areaId ]
       this.visible = true
       this.initList()
       if (params.shopId) {
@@ -354,6 +385,7 @@ export default {
         if (categoryItem && Array.isArray(categoryItem.nodes)) {
           this.formData.classificationArr = categoryItem.nodes.map((v) => v.id)
         }
+        if (this.formData.areaId) this.regionArrDialog = [ this.formData.areaId ]
         this.$nextTick(() => {
           this.$refs.formData && this.$refs.formData.validate()
         })

src/views/business/businessList/index copy.vue

@@ -1,348 +0,0 @@
-<!--  -->
-<template>
-  <div class="app-container">
-    <!-- 查询和其他操作 -->
-    <div class="filter-container">
-      <el-input
-        v-model="listQuery.shopName" clearable size="mini" class="filter-item"
-        style="width: 200px;"
-        placeholder="请输入店铺名称"
-      />
-      <el-input
-        v-model="listQuery.shopCode" clearable size="mini" class="filter-item"
-        style="width: 200px;margin-left: 10px;" placeholder="请输入店铺编码"
-      />
-      <el-input
-        v-model="listQuery.chargePersonName" clearable size="mini" class="filter-item"
-        style="width: 200px;margin-left: 10px;" placeholder="请输入负责人"
-      />
-      <el-select
-        v-model="listQuery.contractState" clearable size="mini" class="filter-item"
-        style="width: 200px;margin-left: 10px;" placeholder="请选择合同状态"
-      >
-        <el-option label="有效" :value="1" />
-        <el-option label="无效" :value="0" />
-      </el-select>
-      <el-button
-        size="mini" class="filter-item" type="primary" icon="el-icon-search"
-        style="margin-left:10px;"
-        @click="handleSearch"
-      >
-        查找
-      </el-button>
-      <br />
-      <el-button
-        size="mini" type="primary" icon="el-icon-plus"
-        @click="$refs.EditModal && $refs.EditModal.handleOpen({ shopId: '' })"
-      >
-        新建商家
-      </el-button>
-    </div>
-
-    <!-- 查询结果 -->
-    <div v-tableHeight>
-      <el-table
-        v-loading="listLoading" height="100%" element-loading-text="正在查询中。。。" :data="list"
-        v-bind="{ stripe: true, size: 'small', border: true, fit: true, highlightCurrentRow: true }"
-      >
-        <el-table-column label="店铺名称" width="220">
-          <template slot-scope="scope">{{ scope.row.shopName }}</template>
-        </el-table-column>
-        <el-table-column prop="shopCode" label="店铺编码" />
-        <el-table-column label="是否支持消费金">
-          <template slot-scope="scope">
-            <span v-if="scope.row.isBeeCoin === 1">支持</span>
-            <span v-else-if="scope.row.isBeeCoin === 2">不支持</span>
-            <span v-else>--</span>
-          </template>
-        </el-table-column>
-        <!-- <el-table-column align="center" min-width="120" label="商家消费金提现比例" prop="beecoinRatio">
-          <template slot-scope="{ row }">
-          <span v-if="row.beeCoinRatio">{{ row.beeCoinRatio }}：1</span>
-          <span v-else>--</span>
-          </template>
-          </el-table-column> -->
-        <el-table-column prop="chargePersonName" label="负责人" />
-        <el-table-column prop="chargePersonPhone" label="联系电话" />
-        <el-table-column label="合同状态">
-          <template slot-scope="scope">
-            <span v-if="scope.row.contractState === 0">无效</span>
-            <span v-if="scope.row.contractState === 1">有效</span>
-          </template>
-        </el-table-column>
-        <el-table-column prop="createTime" label="创建时间" />
-        <el-table-column label="操作" show-overflow-tooltip>
-          <template slot-scope="scope">
-            <div class="btnList">
-              <el-button type="text" @click="seeMore(scope.row)">
-                查看
-              </el-button>
-              <el-button type="text" @click="edit(scope.row)">
-                编辑
-              </el-button>
-              <el-button v-if="scope.row.state == 1" type="text" @click="del(scope.row)">
-                禁用
-              </el-button>
-              <el-button v-else type="text" @click="del(scope.row)">
-                启用
-              </el-button>
-              <el-button type="text" @click="delBusiness(scope.row)">
-                删除
-              </el-button>
-            </div>
-          </template>
-        </el-table-column>
-      </el-table>
-    </div>
-
-    <div>
-      <el-pagination
-        :current-page="listQuery.page" :page-sizes="[10, 20, 50, 100]" :page-size="listQuery.pageSize"
-        layout="total, sizes, prev, pager, next, jumper" :total="total"
-        @size-change="(val) => ((listQuery.pageSize = val) && getList())"
-        @current-change="(val) => ((listQuery.page = val) && getList())"
-      />
-    </div>
-
-    <!-- 新增编辑 -->
-    <EditModal ref="EditModal" @success="getList" />
-    <!-- 查看详情 -->
-    <DetailModal ref="DetailModal" />
-  </div>
-</template>
-
-<script>
-import EditModal from './components/EditModal'
-import DetailModal from './components/DetailModal'
-import {
-  businessListGetAll,
-  businessListGetById,
-  businessListStart,
-  delBusinessById
-} from '@/api/business'
-import { getProvinceList, getChildAreaList } from '@/api/address'
-
-export default {
-  name: 'BusinessList',
-  components: {
-    EditModal,
-    DetailModal
-  },
-  data() {
-    // 这里存放数据
-    return {
-      list: [],
-      total: 0,
-      listLoading: true,
-      listQuery: {
-        page: 1,
-        pageSize: 20,
-        shopName: '', // 店铺名称
-        shopCode: '', // 店铺编码
-        chargePersonName: '', // 店铺负责人
-        contractState: '', // 合同状态 1-有效 0-无效
-        shopType: 2
-      },
-      areaData: {
-        lazy: true,
-        label: 'name',
-        value: 'id',
-        lazyLoad(node, resolve) {
-          const { level, value } = node
-          if (level === 0) {
-            getProvinceList().then((res) => {
-              resolve(res.data)
-            })
-          } else if (level != 0) {
-            getChildAreaList(value).then((res) => {
-              resolve(res.data.map((item) => {
-                item.leaf = level === 3
-                return item
-              }))
-            })
-          }
-        }
-      },
-      // 新建商家弹框
-      dialogVisible: false,
-      isEdit: false, // 是否是编辑
-      activeName: 'first',
-      disabled: false,
-      ruleForm: {
-        shopName: '', // 店铺名称
-        isBeeCoin: '', // 是否支持消费金
-        beeCoinRatio: '', // 商家消费金提现比例
-        chargePersonName: '', // 店铺负责人
-        chargePersonPhone: '', // 负责人电话
-        shopType: 2, // 店铺类型 1商城 2本地
-        isVoucher: 1, // 是否支持代金卷 1 true 2 false
-        shopAdress: '', // 地址
-        effectiveDate: '', // 生效日期
-        effectiveYear: '', // 生效年限
-        contractState: 1, // 合同状态 1-有效 0-无效
-        hsbMrchId: '',  // 惠市宝商家编号，不是必填
-        auditLive: 1,
-        auditLiveProduct: 1,
-        shopPhone: '', // 账号
-        shopPassword: '', // 密码
-        perCapita: '', // 人均
-        score: 5, // 评分
-        advertisement: '',
-        classificationId: null, // 商家分类id
-        startTime: '',
-        endTime: '',
-        shopBrief: '' // 商家簡介
-      },
-      rules: {
-        shopPhone: [
-          { required: true, message: '请输入账号', trigger: 'blur' },
-          { pattern: /^1[3456789]\d{9}$/, message: '目前只支持中国大陆的手机号码' }
-        ],
-        shopPassword: [
-          { required: true, message: '请输入密码', trigger: 'blur' },
-          { pattern: /^[~!@#$%^&*\-+=_.0-9a-zA-Z]{8,16}$/, message: '8-16密码数字英文混合' }
-        ]
-      },
-      currentPage: 1,
-      userState: 1
-    }
-  },
-  created() {
-    this.getList()
-  },
-  methods: {
-    async getList() {
-      this.listLoading = true
-      try {
-        const res = await businessListGetAll(this.listQuery)
-        this.list = res.data.list
-        this.total = res.data.total
-      } finally {
-        this.listLoading = false
-      }
-    },
-    handleSearch() {
-      this.listQuery.page = 1
-      this.getList()
-    },
-    // 查看
-    async seeMore(row) {
-      const res = await businessListGetById({ shopId: row.shopId })
-      if (res.code === '') {
-        this.userState = 3
-        this.disabled = true
-        this.ruleForm = res.data
-        this.dialogVisible = true
-        this.initShopClassPath(this.ruleForm.classificationId)
-        this.ruleForm.voucherReturn *= 1
-        const advertisementStr = this.ruleForm.advertisement
-        if (advertisementStr && typeof advertisementStr === 'string') {
-          this.advertisementList = advertisementStr.split(',').map((item) => ({
-            url: item,
-            uid: item + Math.random() + new Date()
-          }))
-        }
-      }
-    },
-    // 删除
-    async del(row) {
-      console.log(row)
-      if (row.state === 1) {
-        const res = await businessListStart({
-          shopName: row.shopName,
-          state: 0,
-          shopId: row.shopId
-        })
-        if (res.code === '') {
-          this.$message({
-            message: '停用成功',
-            type: 'success'
-          })
-          this.getList()
-        }
-      } else {
-        const res = await businessListStart({
-          shopName: row.shopName,
-          state: 1,
-          shopId: row.shopId
-        })
-        if (res.code === '') {
-          this.$message({
-            message: '启用成功',
-            type: 'success'
-          })
-          this.getList()
-        }
-      }
-    },
-    delBusiness(row) {
-      this.$confirm('此操作将永久删除该商家, 是否继续?', '提示', {
-        confirmButtonText: '确定',
-        cancelButtonText: '取消',
-        type: 'warning'
-      }).then(async () => {
-        const res = await delBusinessById({
-          shopId: row.shopId
-        })
-        if (res.code === '') {
-          this.$message({
-            message: '操作成功',
-            type: 'success'
-          })
-          this.getList()
-        }
-      })
-    },
-
-    // 获取省数据
-    handleCascaderChange() {
-      const checkedNode = this.$refs.cascaderRef.getCheckedNodes()
-      const nodeData = checkedNode[0].data
-      this.ruleForm.areaId = nodeData.id
-    },
-
-    // 获取路径信息
-    initShopClassPath(classId) {
-      const allLevelThereList = []
-      this.allShopCategoryList.forEach((item) => {
-        item.childs.forEach((item1) => {
-          allLevelThereList.push(...item1.childs)
-        })
-      })
-      const currentClassInfo = allLevelThereList.find((item) => item.levelId.includes(classId))
-      if (currentClassInfo) {
-        this.ruleForm.classificationId = currentClassInfo.levelId.slice(1).split('/')
-      }
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-.app-container {
-	padding: 20px;
-	display: flex;
-	flex-direction: column;
-
-	.filter-container {
-		.filter-item {
-			display: inline-block;
-			vertical-align: middle;
-			margin-bottom: 10px;
-		}
-	}
-
-	.small-padding {
-		.cell {
-			padding-left: 5px;
-			padding-right: 5px;
-		}
-	}
-
-	.fixed-width {
-		.el-button--mini {
-			padding: 7px 10px;
-		}
-	}
-}
-</style>

src/views/business/businessList/index.vue

@@ -1,869 +1,225 @@
-<!--  -->
 <template>
-  <div>
-    <div class="pending">
-      <!-- 搜索 -->
-      <div class="formSearch">
-        <el-form :inline="true" :model="formInline">
-          <el-form-item label="店铺名称">
-            <el-input v-model="formInline.shopName" maxlength="20" placeholder="请输入店铺名称" />
-          </el-form-item>
-          <el-form-item label="店铺编码">
-            <el-input v-model="formInline.shopCode" maxlength="20" placeholder="请输入店铺编码" />
-          </el-form-item>
-          <el-form-item label="负责人">
-            <el-input v-model="formInline.chargePersonName" maxlength="20" placeholder="请输入负责人" />
-          </el-form-item>
-          <el-form-item label="合同状态">
-            <el-select v-model="formInline.contractState" placeholder="请选择">
-              <el-option label="有效" value="1" />
-              <el-option label="无效" value="0" />
-            </el-select>
-          </el-form-item>
-          <el-form-item>
-            <el-button type="primary" plain @click="onSubmit">
-              查询
+  <div class="app-container">
+    <!-- 查询和其他操作 -->
+    <div class="filter-container">
+      <el-input
+        v-model="listQuery.shopName" clearable size="mini" class="filter-item"
+        style="width: 200px;"
+        placeholder="请输入店铺名称"
+      />
+      <el-input
+        v-model="listQuery.shopCode" clearable size="mini" class="filter-item"
+        style="width: 200px;margin-left: 10px;" placeholder="请输入店铺编码"
+      />
+      <el-input
+        v-model="listQuery.chargePersonName" clearable size="mini" class="filter-item"
+        style="width: 200px;margin-left: 10px;" placeholder="请输入负责人"
+      />
+      <el-select
+        v-model="listQuery.contractState" clearable size="mini" class="filter-item"
+        style="width: 200px;margin-left: 10px;" placeholder="请选择合同状态"
+      >
+        <el-option label="有效" :value="1" />
+        <el-option label="无效" :value="0" />
+      </el-select>
+      <el-button
+        size="mini" class="filter-item" type="primary" icon="el-icon-search"
+        style="margin-left:10px;"
+        @click="handleSearch"
+      >
+        查找
+      </el-button>
+      <br />
+      <el-button
+        size="mini" type="primary" icon="el-icon-plus"
+        @click="$refs.EditModal && $refs.EditModal.handleOpen({ shopId: '' })"
+      >
+        新建商家
+      </el-button>
+    </div>
+
+    <!-- 查询结果 -->
+    <div v-tableHeight>
+      <el-table
+        v-loading="listLoading" height="100%" element-loading-text="正在查询中。。。" :data="list"
+        v-bind="{ stripe: true, size: 'small', border: true, fit: true, highlightCurrentRow: true }"
+      >
+        <el-table-column label="店铺名称" width="220">
+          <template slot-scope="scope">{{ scope.row.shopName }}</template>
+        </el-table-column>
+        <el-table-column prop="shopCode" label="店铺编码" />
+        <el-table-column label="是否支持消费金">
+          <template slot-scope="scope">
+            <span v-if="scope.row.isBeeCoin === 1">支持</span>
+            <span v-else-if="scope.row.isBeeCoin === 2">不支持</span>
+            <span v-else>--</span>
+          </template>
+        </el-table-column>
+        <!-- <el-table-column align="center" min-width="120" label="商家消费金提现比例" prop="beecoinRatio">
+          <template slot-scope="{ row }">
+          <span v-if="row.beeCoinRatio">{{ row.beeCoinRatio }}：1</span>
+          <span v-else>--</span>
+          </template>
+          </el-table-column> -->
+        <el-table-column prop="chargePersonName" label="负责人" />
+        <el-table-column prop="chargePersonPhone" label="联系电话" />
+        <el-table-column label="合同状态">
+          <template slot-scope="scope">
+            <span v-if="scope.row.contractState === 0">无效</span>
+            <span v-if="scope.row.contractState === 1">有效</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="createTime" label="创建时间" />
+        <el-table-column align="center" label="操作" width="280" fixed="right" class-name="small-padding fixed-width">
+          <template slot-scope="{ row }">
+            <el-button type="warning" size="mini" @click="handleDetail(row)">
+              详情
             </el-button>
-            <el-button type="success" plain @click="addbuss">
-              新建商家
+            <el-button size="mini" @click="handleEdit(row)">
+              编辑
             </el-button>
-          </el-form-item>
-        </el-form>
-      </div>
-      <!-- 表格 -->
-      <div class="tableBox">
-        <el-table ref="multipleTable" :data="tableData" border
-          :header-cell-style="{ background: '#EEF3FF', color: '#333333' }" tooltip-effect="dark" style="width: 100%">
-          <el-table-column label="店铺名称" width="220">
-            <template slot-scope="scope">{{ scope.row.shopName }}</template>
-          </el-table-column>
-          <el-table-column prop="shopCode" label="店铺编码" />
-          <el-table-column label="是否支持消费金">
-            <template slot-scope="scope">
-              <span v-if="scope.row.isBeeCoin === 1">支持</span>
-              <span v-else-if="scope.row.isBeeCoin === 2">不支持</span>
-              <span v-else>--</span>
-            </template>
-          </el-table-column>
-					<!-- <el-table-column align="center" min-width="120" label="商家消费金提现比例" prop="beecoinRatio">
-						<template slot-scope="{ row }">
-							<span v-if="row.beeCoinRatio">{{ row.beeCoinRatio }}：1</span>
-							<span v-else>--</span>
-						</template>
-					</el-table-column> -->
-          <el-table-column prop="chargePersonName" label="负责人" />
-          <el-table-column prop="chargePersonPhone" label="联系电话" />
-          <el-table-column label="合同状态">
-            <template slot-scope="scope">
-              <span v-if="scope.row.contractState === 0">无效</span>
-              <span v-if="scope.row.contractState === 1">有效</span>
-            </template>
-          </el-table-column>
-          <el-table-column prop="createTime" label="创建时间" />
-          <el-table-column label="操作" show-overflow-tooltip>
-            <template slot-scope="scope">
-              <div class="btnList">
-                <el-button type="text" @click="seeMore(scope.row)">
-                  查看
-                </el-button>
-                <el-button type="text" @click="edit(scope.row)">
-                  编辑
-                </el-button>
-                <el-button v-if="scope.row.state == 1" type="text" @click="del(scope.row)">
-                  禁用
-                </el-button>
-                <el-button v-else type="text" @click="del(scope.row)">
-                  启用
-                </el-button>
-                <el-button type="text" @click="delBusiness(scope.row)">
-                  删除
-                </el-button>
-              </div>
-            </template>
-          </el-table-column>
-        </el-table>
-        <div class="fenye">
-          <el-pagination :current-page="currentPage" :page-sizes="[10, 20, 50, 100]" :page-size="10"
-            layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
-            @current-change="handleCurrentChange" />
-        </div>
-      </div>
-      <!-- ******************************************************弹框开始****************************************************** -->
-      <!-- 新建商家弹框 -->
-      <el-dialog :title="userState === 0
-        ? '新增商家'
-        : userState === 1
-          ? '修改商家'
-          : '查看商家'
-        " :visible.sync="dialogVisible" width="50%" center :before-close="closeFn" :close-on-click-modal="false">
-        <div>
-          <el-tabs v-model="activeName" @tab-click="handleClick">
-            <el-tab-pane label="授权信息" name="first">
-              <el-form ref="ruleFormInfo" :model="ruleForm" :rules="rulesInfo" label-width="150px">
-                <el-form-item label="店铺名称" prop="shopName">
-                  <el-input v-model="ruleForm.shopName" maxlength="20" :disabled="disabled" />
-                </el-form-item>
-                <el-form-item label="是否支持消费金" prop="isBeeCoin">
-                  <el-radio-group v-model="ruleForm.isBeeCoin">
-                    <el-radio :disabled="disabled" :label="1">
-                      支持
-                    </el-radio>
-                    <el-radio :disabled="disabled" :label="2">
-                      不支持
-                    </el-radio>
-                  </el-radio-group>
-                </el-form-item>
-                <el-form-item label="商家消费金提现比例" prop="beeCoinRatio">
-                  <!-- <el-input v-model="ruleForm.beeCoinRatio" type="text" :disabled="disabled" placeholder="商家消费金提现比例"
-                    style="width: 50%" /> -->
-                    <el-input-number v-model="ruleForm.beeCoinRatio" :precision="2" :step="0.01" :max="1"></el-input-number>
-                  <span style="margin-left: 10px;">比例*100</span>
-                  </el-form-item>
-                <el-form-item v-if="ruleForm.isBeeCoin === 1" label="商家消费金提现比例" prop="beeCoinRatio">
-                  <el-input v-model="ruleForm.beeCoinRatio" type="text" :disabled="disabled" placeholder="商家消费金提现比例"
-                    style="width: 50%" />
-                  <span style="margin-left: 10px;">：1</span>
-                </el-form-item>
-                <el-form-item label="店铺负责人" prop="chargePersonName">
-                  <el-input v-model="ruleForm.chargePersonName" maxlength="20" :disabled="disabled" />
-                </el-form-item>
-                <el-form-item label="负责人电话" prop="chargePersonPhone">
-                  <el-input v-if="cpPhoneShow" :value="hidden(ruleForm.chargePersonPhone, 3, 4)" maxlength="11"
-                    :disabled="disabled" @focus="focuscpPhoneInput" />
-                  <el-input v-else ref="cpPhoneCls" v-model="ruleForm.chargePersonPhone" maxlength="11" clearable
-                    :disabled="disabled" @change="changecpPhoneInput" />
-                </el-form-item>
-                <el-form-item label="请选择区域" prop="areaId">
-                  <el-cascader v-if="!isEdit" :disabled="disabled" :props="areaData" ref="cascaderRef"
-                    @change="handleCascaderChange"></el-cascader>
-                  <div v-else>
-                    {{ ruleForm.areaId }}
-                    <el-button :disabled="disabled" size="mini" type="primary" style="margin-left: 15px;"
-                      @click="isEdit = !isEdit">{{ isEdit ? '修改' : '取消' }}</el-button>
-                  </div>
-                </el-form-item>
-
-                <el-form-item label="请选择门店分类" prop="classificationId">
-                  <el-cascader :disabled="disabled" v-model="ruleForm.classificationId" :options="allShopCategoryList"
-                    :props="{ label: 'storeName', value: 'id', children: 'childs' }"></el-cascader>
-                </el-form-item>
-                <el-form-item label="店铺地址" prop="shopAdress">
-                  <el-input ref="addressCls" v-model="ruleForm.shopAdress" maxlength="60" :disabled="disabled" />
-                  <!-- <div v-else @click="inputAddress">
-                    <el-input :value="hidden(ruleForm.shopAdress, 1, 1)" :disabled="disabled" />
-                  </div> -->
-                </el-form-item>
-                <el-form-item label="店铺经纬度" prop="longitude">
-                  <div>
-                    <span v-if="ruleForm.longitude">
-                      {{ ruleForm.longitude }} - {{ ruleForm.latitude }}
-                    </span>
-                    <el-button size="mini" type="primary" style="margin-left: 20px;"
-                      @click="$refs.selectAddressMapRef && $refs.selectAddressMapRef.show()">{{ ruleForm.longitude ? '修改'
-                        :
-                        '选择' }}</el-button>
-                  </div>
-                </el-form-item>
-                <el-form-item label="生效日期" prop="effectiveDate">
-                  <el-date-picker v-model="ruleForm.effectiveDate" :disabled="disabled" value-format="yyyy-MM-dd"
-                    type="date" placeholder="选择日期" />
-                </el-form-item>
-                <el-form-item label="生效年限" prop="effectiveYear">
-                  <el-input v-model="ruleForm.effectiveYear" type="text" :disabled="disabled" placeholder="请输入内容"
-                    maxlength="4" class="elipt" style="width: 50%" show-word-limit />
-                  <span class="elspan">年</span>
-                </el-form-item>
-                <el-form-item label="合同状态" prop="contractState">
-                  <el-radio-group v-model="ruleForm.contractState">
-                    <el-radio :disabled="disabled" :label="1">
-                      有效
-                    </el-radio>
-                    <el-radio :disabled="disabled" :label="0">
-                      无效
-                    </el-radio>
-                  </el-radio-group>
-                </el-form-item>
-                <el-form-item label="店铺类型" prop="shopType">
-                  <el-radio-group v-model="ruleForm.shopType">
-                    <!-- <el-radio :disabled="disabled" :label="1">
-                      品牌厂家
-                    </el-radio> -->
-                    <el-radio :disabled="disabled" :label="2">
-                      本地
-                    </el-radio>
-                  </el-radio-group>
-                </el-form-item>
-
-                <el-form-item v-if="ruleForm.shopType === 2" prop="startTime" label="营业开始时间" :rules="[
-                  { required: true, message: '请选择营业开始时间', trigger: 'blur' }]">
-
-                  <el-time-select :disabled="disabled" placeholder="起始时间" v-model="ruleForm.startTime" :picker-options="{
-                    start: '00:00',
-                    step: '00:05',
-                  }">
-                  </el-time-select>
-
-                </el-form-item>
-
-                <el-form-item v-if="ruleForm.shopType === 2" prop="endTime" label="营业结束时间" :rules="[
-                  { required: true, message: '请选择营业结束时间', trigger: 'blur' }]">
-
-                  <el-time-select :disabled="disabled" placeholder="营业结束时间" v-model="ruleForm.endTime" :picker-options="{
-                    start: '00:00',
-                    step: '00:05',
-                    end: '24:00',
-                  }">
-                  </el-time-select>
-                </el-form-item>
-
-                <el-form-item label="是否支持代金券" prop="isVoucher">
-                  <el-radio-group v-model="ruleForm.isVoucher">
-                    <el-radio :disabled="disabled" :label="1">
-                      允许
-                    </el-radio>
-                    <el-radio :disabled="disabled" :label="2">
-                      拒绝
-                    </el-radio>
-                  </el-radio-group>
-                </el-form-item>
-                <el-form-item v-if="ruleForm.isVoucher === 1" :rules="[
-                  { required: true, message: '请输入代金券返还比例', trigger: 'blur' },
-                  { type: 'number', max: 100, min: 0, message: '请输入正确的代金券返还比例，0 ~ 100', trigger: ['blur', 'change'] }
-                ]" label="代金券返还比例" prop="voucherReturn">
-                  <el-input :disabled="disabled" placeholder="请填写代金券返还比例，范围0 ~ 100"
-                    v-model.number="ruleForm.voucherReturn">
-                    <template slot="append">%</template>
-                  </el-input>
-                </el-form-item>
-                <el-form-item label="惠市宝商家编号">
-                  <el-input ref="addressCls" v-model="ruleForm.hsbMrchId" maxlength="60" :disabled="disabled" />
-                </el-form-item>
-                <el-form-item label="直播间审核" prop="auditLive">
-                  <el-radio-group v-model="ruleForm.auditLive">
-                    <el-radio :disabled="disabled" :label="1">
-                      开启
-                    </el-radio>
-                    <el-radio :disabled="disabled" :label="0">
-                      关闭
-                    </el-radio>
-                  </el-radio-group>
-                </el-form-item>
-                <el-form-item label="直播间商品审核" prop="auditLiveProduct">
-                  <el-radio-group v-model="ruleForm.auditLiveProduct">
-                    <el-radio :disabled="disabled" :label="1">
-                      开启
-                    </el-radio>
-                    <el-radio :disabled="disabled" :label="0">
-                      关闭
-                    </el-radio>
-                  </el-radio-group>
-                </el-form-item>
-
-                <el-form-item class="b-shop-rate" prop="score" label="评分">
-                  <el-rate :disabled="disabled" v-model="ruleForm.score"></el-rate>
-                </el-form-item>
-
-                <el-form-item prop="monthlySales" label="月售">
-                  <el-input :disabled="disabled" placeholder="请输入商家月售额" v-model.number="ruleForm.monthlySales"
-                    type="number"></el-input>
-                </el-form-item>
-
-                <el-form-item prop="perCapita" label="人均">
-                  <el-input :disabled="disabled" type="number" placeholder="请输入人均消费额" v-model.number="ruleForm.perCapita"
-                    closeable></el-input>
-                </el-form-item>
-
-                <el-form-item prop="shopBrief" label="商家简介">
-                  <el-input :disabled="disabled" autosize maxlength="250" show-word-limit type="textarea"
-                    placeholder="请输入商家简介" v-model="ruleForm.shopBrief" closeable></el-input>
-                </el-form-item>
+            <el-button v-if="row.state == 1" type="text" @click="handleDisabled(row)">
+              禁用
+            </el-button>
+            <el-button v-else type="text" @click="handleEnable(row)">
+              启用
+            </el-button>
+            <el-button type="danger" size="mini" @click="handleDelete(row)">
+              删除
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
 
-                <el-form-item prop="advertisement" label="广告图">
-                  <el-upload :disabled="disabled" class="avatar-uploader" list-type="picture-card"
-                    :file-list="advertisementList" :action="action" :on-success="handleAvatarSuccess"
-                    :on-remove="handleRemovePic">
-                    <i class="el-icon-plus avatar-uploader-icon" />
-                  </el-upload>
-                </el-form-item>
-              </el-form>
-            </el-tab-pane>
-            <el-tab-pane label="客户信息" name="second">
-              <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="100px">
-                <el-form-item label="账号" prop="shopPhone">
-                  <el-input v-if="shopPhoneShow" :value="hidden(ruleForm.shopPhone, 3, 4)" :disabled="disabled"
-                    maxlength="20" @focus="focusShopPhoneInput" />
-                  <el-input v-else ref="shopPhoneCls" v-model="ruleForm.shopPhone" :disabled="disabled" maxlength="20" />
-                </el-form-item>
-                <el-form-item label="密码" prop="shopPassword">
-                  <el-input v-model="ruleForm.shopPassword" type="password" :disabled="disabled" maxlength="16" />
-                </el-form-item>
-              </el-form>
-            </el-tab-pane>
-          </el-tabs>
-        </div>
-        <span slot="footer" class="dialog-footer">
-          <el-button @click="closeFn">取 消</el-button>
-          <el-button v-if="activeName == 'first'" type="primary" @click="next">下一步</el-button>
-          <el-button v-else type="primary" @click="addCheck('ruleForm')">确 定</el-button>
-        </span>
-      </el-dialog>
+    <div>
+      <el-pagination
+        :current-page="listQuery.page" :page-sizes="[10, 20, 50, 100]" :page-size="listQuery.pageSize"
+        layout="total, sizes, prev, pager, next, jumper" :total="total"
+        @size-change="(val) => ((listQuery.pageSize = val) && getList())"
+        @current-change="(val) => ((listQuery.page = val) && getList())"
+      />
     </div>
 
-    <!-- 选择经纬度 -->
-    <SelectAddressMap ref="selectAddressMapRef" @select="handleSelectLngAndLat"></SelectAddressMap>
+    <!-- 新增编辑 -->
+    <EditModal ref="EditModal" @success="getList" />
+    <!-- 查看详情 -->
+    <DetailModal ref="DetailModal" />
   </div>
 </template>
 
 <script>
+import EditModal from './components/EditModal'
+import DetailModal from './components/DetailModal'
 import {
   businessListGetAll,
-  businessListSave,
-  businessListGetById,
-  businessListUpdate,
   businessListStart,
-  delBusinessById,
+  delBusinessById
 } from '@/api/business'
-import { uploadUrl } from '@/utils/request'
-import { getProvinceList, getChildAreaList } from '@/api/address'
-import { businessClassList } from '@/api/business'
-import SelectAddressMap from './components/SelectAddressMap'
 
 export default {
   name: 'BusinessList',
-  components: { SelectAddressMap },
+  components: {
+    EditModal,
+    DetailModal
+  },
   data() {
     // 这里存放数据
     return {
-      action: uploadUrl,
-      advertisementList: [],
-      allShopCategoryList: [],
-      areaData: {
-        lazy: true,
-        label: 'name',
-        value: 'id',
-        lazyLoad(node, resolve) {
-          const { level, value } = node;
-          if (level === 0) {
-            getProvinceList().then(res => {
-              resolve(res.data)
-            })
-          } else if (level != 0) {
-            getChildAreaList(value).then(res => {
-              resolve(res.data.map(item => {
-                item.leaf = level === 3
-                return item
-              }))
-            })
-          }
-        }
-      },
-      // 新建商家弹框
-      dialogVisible: false,
-      isEdit: false, // 是否是编辑
-      originShopDetailInfo: null, // 点击编辑上架2详情原始数据
-      activeName: 'first',
-      formInline: {
+      list: [],
+      total: 0,
+      listLoading: true,
+      listQuery: {
+        page: 1,
+        pageSize: 20,
         shopName: '', // 店铺名称
         shopCode: '', // 店铺编码
         chargePersonName: '', // 店铺负责人
         contractState: '', // 合同状态 1-有效 0-无效
-        page: '1', // 当前页
-        pageSize: '10', // 每页记录数
         shopType: 2
-      },
-      disabled: false,
-      ruleForm: {
-        shopName: '', // 店铺名称
-        isBeeCoin: '', // 是否支持消费金
-        beeCoinRatio: '', // 商家消费金提现比例
-        chargePersonName: '', // 店铺负责人
-        chargePersonPhone: '', // 负责人电话
-        shopType: 2, // 店铺类型 1商城 2本地
-        isVoucher: 1, // 是否支持代金卷 1 true 2 false
-        shopAdress: '', // 地址
-        effectiveDate: '', // 生效日期
-        effectiveYear: '', // 生效年限
-        contractState: 1, // 合同状态 1-有效 0-无效
-        hsbMrchId:'',  // 惠市宝商家编号，不是必填
-        auditLive: 1,
-        isBeeCoin:2,
-        auditLiveProduct: 1,
-        shopPhone: '', // 账号
-        shopPassword: '', // 密码
-        perCapita: "", //人均
-        score: 5, // 评分
-        advertisement: '',
-        classificationId: null, // 商家分类id
-        startTime: "",
-        endTime: "",
-        shopBrief: '', // 商家簡介
-      },
-      showPhone: false,
-      showAddress: false,
-      userPhone: '',
-      showUserPhone: false,
-      newAddress: '',
-      personPhone: '',
-
-      rulesInfo: {
-        beeCoinRatio: [
-          { required: true, message: '请输入商家消费金提现比例', trigger: 'blur' },
-          
-        ],
-        effectiveYear: [
-          { required: true, message: '请输入生效时限', trigger: 'blur' }
-        ],
-        shopName: [
-          { required: true, message: '请输入店铺名称', trigger: 'blur' }
-        ],
-        chargePersonName: [
-          { required: true, message: '请输入店铺负责人', trigger: 'blur' }
-        ],
-        isBeeCoin: [
-          { required: true, message: '请选择是否支持消费金', trigger: 'blur' }
-        ],
-        isBeeCoin: [ { required: true, message: '请选择是否支持消费金', trigger: 'change' } ],
-        // beeCoinRatio: [ { required: true, message: '请输入商家消费金提现比例', trigger: 'blur' }],
-        effectiveYear: [ { required: true, message: '请输入生效时限', trigger: 'blur' } ],
-        shopName: [ { required: true, message: '请输入店铺名称', trigger: 'blur' } ],
-        chargePersonName: [ { required: true, message: '请输入店铺负责人', trigger: 'blur' } ],
-        chargePersonPhone: [
-          { required: true, message: '请输入负责人电话', trigger: 'blur' },
-          { pattern: /^1[3456789]\d{9}$/, message: '目前只支持中国大陆的手机号码' }
-        ],
-        shopAdress: [ { required: true, message: '请输入地址', trigger: 'blur' } ],
-        contractState: [ { required: true, message: '请选择合同状态', trigger: 'change' } ],
-        shopType: [ { required: true, message: '请选择店铺类型', trigger: 'change' } ],
-        perCapita: [ { required: true, message: "请输入人均消费额", trigger: "blur" } ],
-        shopBrief: [ { required: true, message: "请填写商家介绍", trigger: "blur" } ],
-        isVoucher: [ { required: true, message: '请选择是否允许使用代金卷', trigger: 'change' } ], // 是否支持代金卷 1 true 2 false
-        auditLive: [ { required: true, message: '请选择状态', trigger: 'change' } ],
-        auditLiveProduct: [ { required: true, message: '请选择状态', trigger: 'change' } ],
-        effectiveDate: [ { required: true, message: '请选择日期', trigger: 'change' } ],
-        score: [ { required: true, message: '请选择商家评分', trigger: 'change' } ],
-        monthlySales: [ { required: true, message: '请输入商家月售额', trigger: 'trigger' } ],
-        // advertisement: [ { required: true, message: '请上传广告图', trigger: 'trigger' } ],
-        areaId: [ { required: true, message: "请选择地址", trigger: 'blur' } ],
-        longitude: [ { required: true, message: "请选择商家经纬度", trigger: 'blur' } ]
-      },
-      rules: {
-        shopPhone: [
-          { required: true, message: '请输入账号', trigger: 'blur' },
-          { pattern: /^1[3456789]\d{9}$/, message: '目前只支持中国大陆的手机号码' }
-        ],
-        shopPassword: [
-          { required: true, message: '请输入密码', trigger: 'blur' },
-          { pattern: /^[~!@#$%^&*\-+=_.0-9a-zA-Z]{8,16}$/, message: '8-16密码数字英文混合' }
-        ]
-      },
-      total: 1,
-      tableData: [],
-      currentPage: 1,
-      userState: 1,
-      privacyTime: 0,
-      cpPhoneShow: true, // 是否显示脱敏负责人手机号
-      shopPhoneShow: true // 是否显示脱敏账号
+      }
     }
   },
-  // 监听属性 类似于data概念
-  computed: {},
-  // 监控data中的数据变化
-  watch: {},
-  // 生命周期 - 创建完成（可以访问当前this实例）
   created() {
-
-  },
-  // 生命周期 - 挂载完成（可以访问DOM元素）
-  mounted() {
-    this.getAll(this.formInline)
-    this.getCategoryList()
-    this.privacyTime = localStorage.getItem('privacyTime')
-    console.log(this.privacyTime)
+    this.getList()
   },
-  // 方法集合
   methods: {
-    focusShopPhoneInput() {
-      this.shopPhoneShow = false
-      this.ruleForm.shopPhone = ''
-      // 自动获取焦点
-      this.$nextTick(() => {
-        this.$refs.shopPhoneCls.focus()
-      })
-    },
-    focuscpPhoneInput() {
-      this.cpPhoneShow = false
-      this.ruleForm.chargePersonPhone = ''
-      // 自动获取焦点
-      this.$nextTick(() => {
-        this.$refs.cpPhoneCls.focus()
-      })
-    },
-    changecpPhoneInput() {
-    },
-    handleSizeChange(val) {
-      this.formInline.pageSize = val
-      this.getAll(this.formInline)
-    },
-    handleCurrentChange(val) {
-      this.formInline.page = val
-      this.getAll(this.formInline)
-    },
-    handleClick(tab, event) {
-      console.log(tab, event)
-    },
-    onSubmit() {
-      this.getAll(this.formInline)
-    },
-    // 新建商家
-    addbuss() {
-      this.userState = 0
-      this.disabled = false
-      this.newAddress = ''
-      this.personPhone = ''
-      this.ruleForm = {
-        shopName: '', // 店铺名称
-        isBeeCoin: '', // 是否支持消费金
-        beeCoinRatio: '', // 商家消费金提现比例
-        chargePersonName: '', // 店铺负责人
-        chargePersonPhone: '', // 负责人电话
-        shopAdress: '', // 地址
-        effectiveDate: '', // 生效日期
-        effectiveYear: '', // 生效年限
-        shopType: 2, // 商家类型 1 商家 2 本地
-        isVoucher: 1, // 是否支持代金卷 1 true 2 false
-        contractState: 1, // 合同状态 1-有效 0-无效
-        auditLive: 1,
-        isBeeCoin:2,
-        auditLiveProduct: 1,
-        shopPhone: '', // 账号
-        shopPassword: '', // 密码
-        advertisement: '', // 广告图
-        areaId: '', // 区域id
-        hsbMrchId:'',
-        longitude: '', // 经纬度
-        latitude: '', // 经纬度
+    async getList() {
+      this.listLoading = true
+      try {
+        const res = await businessListGetAll(this.listQuery)
+        this.list = res.data.list
+        this.total = res.data.total
+      } finally {
+        this.listLoading = false
       }
-      this.dialogVisible = true
-      this.advertisementList = []
-    },
-    next() {
-      this.activeName = 'second'
-    },
-    closeFn() {
-      this.$nextTick(() => {
-        this.$refs.ruleForm.resetFields()
-        this.$refs.ruleForm.clearValidate()
-        this.$refs.ruleFormInfo.clearValidate()
-        this.dialogVisible = false
-      })
-    },
-    // 新建商家确定
-    addCheck() {
-      const submitData = JSON.parse(JSON.stringify(this.ruleForm))
-      submitData.advertisement = this.advertisementList.map(item => item.url).join(',')
-      console.log(submitData)
-
-      this.$refs['ruleFormInfo'].validate((valid) => {
-        if (valid) {
-          console.log(this.userState)
-          if (this.personPhone !== '') {
-            submitData.chargePersonPhone = this.personPhone
-          }
-          if (this.newAddress !== '') {
-            submitData.shopAdress = this.newAddress
-          }
-          if (this.userPhone !== '') {
-            submitData.shopPhone = this.userPhone
-          }
-          if (submitData.shopName === '') {
-            this.$message.error('请输入店铺名称')
-            return
-          }
-          if (submitData.effectiveDate === '') {
-            this.$message.error('请输入生效日期')
-            return
-          }
-          if (!(typeof submitData.isBeeCoin === 'number')) {
-						console.log(submitData)
-            this.$message.error('请选择是否支持消费金')
-            return
-          }
-          if ((submitData.isBeeCoin === 1) && !submitData.beeCoinRatio) {
-            this.$message.error('请输入商家消费金提现比例')
-            return
-          }
-          if (submitData.effectiveYear === '') {
-            this.$message.error('请输入生效年限')
-            return
-          }
-
-          submitData.classificationId = submitData.classificationId[2]
-          if (!this.userState) {
-            businessListSave(submitData).then((res) => {
-              console.log(res)
-              if (res.code === '') {
-                this.$message({
-                  message: '新增成功',
-                  type: 'success'
-                })
-              }
-              this.getAll(this.formInline)
-              this.dialogVisible = false
-              this.$refs.ruleForm.clearValidate()
-            })
-          } else {
-            businessListUpdate(submitData).then((res) => {
-              console.log(res)
-              if (res.code === '') {
-                this.$message({
-                  message: '修改成功',
-                  type: 'success'
-                })
-                this.$refs.ruleForm.clearValidate()
-              }
-              this.getAll(this.formInline)
-              this.dialogVisible = false
-            })
-          }
-        } else {
-          console.log('error submit!!')
-          this.$message.error('请输入完整信息')
-          return false
-        }
-      })
     },
-    // 查看
-    async seeMore(row) {
-      this.showPhone = false
-      this.cpPhoneShow = true
-      this.shopPhoneShow = true
-      const res = await businessListGetById({ shopId: row.shopId })
-      if (res.code === '') {
-        this.userState = 3
-        this.disabled = true
-        this.ruleForm = res.data
-        this.dialogVisible = true
-        this.initShopClassPath(this.ruleForm.classificationId)
-        this.ruleForm.voucherReturn *= 1
-        const advertisementStr = this.ruleForm.advertisement
-        if (advertisementStr && typeof advertisementStr === 'string') {
-          this.advertisementList = advertisementStr.split(',').map(item => {
-            return {
-              url: item,
-              uid: item + Math.random() + new Date()
-            }
-          })
-        }
-      }
+    handleSearch() {
+      this.listQuery.page = 1
+      this.getList()
     },
-    // 编辑
-    async edit(row) {
-      this.showPhone = false
-      this.personPhone = ''
-      this.userState = 1
-      this.disabled = false
-      this.cpPhoneShow = true
-      const res = await businessListGetById({ shopId: row.shopId })
-      this.ruleForm = res.data
-      this.dialogVisible = true
-      this.isEdit = true
-      this.originShopDetailInfo = JSON.parse(JSON.stringify(res.data))
-      this.initShopClassPath(this.ruleForm.classificationId)
-      this.ruleForm.voucherReturn *= 1
-      const advertisementStr = this.ruleForm.advertisement
-      if (advertisementStr && typeof advertisementStr === 'string') {
-        this.advertisementList = advertisementStr.split(',').map(item => {
-          return {
-            url: item,
-            uid: item + Math.random() + new Date()
-          }
-        })
-      }
+    handleDetail(row) {
+      this.$refs.DetailModal && this.$refs.DetailModal.handleOpen(row)
     },
-    // 删除
-    async del(row) {
-      console.log(row)
-      if (row.state === 1) {
-        const res = await businessListStart({
-          shopName: row.shopName,
-          state: 0,
-          shopId: row.shopId
-        })
-        if (res.code === '') {
-          this.$message({
-            message: '停用成功',
-            type: 'success'
-          })
-          this.getAll(this.formInline)
-        }
-      } else {
-        const res = await businessListStart({
-          shopName: row.shopName,
-          state: 1,
-          shopId: row.shopId
-        })
-        if (res.code === '') {
-          this.$message({
-            message: '启用成功',
-            type: 'success'
-          })
-          this.getAll(this.formInline)
-        }
-      }
+    handleEdit(row) {
+      this.$refs.EditModal && this.$refs.EditModal.handleOpen(row)
     },
-    delBusiness(row) {
-      // todo 判断商家状态
-      this.$confirm('此操作将永久删除该商家, 是否继续?', '提示', {
-        confirmButtonText: '确定',
-        cancelButtonText: '取消',
-        type: 'warning'
-      }).then(async () => {
-        const res = await delBusinessById({
-          shopId: row.shopId
+    handleDelete(row) {
+      this.$confirm('确定删除此项？')
+        .then(async () => {
+          await delBusinessById({ shopId: row.shopId })
+          this.$message({ message: '删除成功！', type: 'success' })
+          this.handleSearch()
         })
-        if (res.code === '') {
-          this.$message({
-            message: '操作成功',
-            type: 'success'
-          })
-          this.getAll(this.formInline)
-        }
-      })
-        .catch(() => {
-
+        .catch(() => {})
+    },
+    handleDisabled(row) {
+      this.$confirm('确定停用此项？')
+        .then(async () => {
+          await businessListStart({ shopName: row.shopName, state: 0, shopId: row.shopId })
+          this.$message({ message: '停用成功！', type: 'success' })
+          this.handleSearch()
         })
-    },
-    // businessListGetAll
-    // 初始化查询所有数据
-    async getAll(formInline) {
-      const res = await businessListGetAll(formInline)
-      this.total = res.data.total
-      this.tableData = res.data.list
-    },
-    // 编辑号码
-    inputPhone() {
-      this.showPhone = true
-      this.personPhone = ''
-      this.$nextTick(() => {
-        this.$refs.phoneCls.focus()
-      })
-    },
-    // 编辑地址
-    inputAddress() {
-      this.showAddress = true
-      this.newAddress = ''
-      this.$nextTick(() => {
-        this.$refs.addressCls.focus()
-      })
-    },
-    // 编辑客户信息
-    inputUserPhone() {
-      this.showUserPhone = true
-      this.userPhone = ''
-      this.$nextTick(() => {
-        this.$refs.userPhoneCls.focus()
-      })
-    },
-    // 中间部分
-    hidden(str, frontLen, endLen) {
-      let endLenData = 0
-      if (str.length !== 2) {
-        endLenData = endLen
-      }
-      const len = str.length - frontLen - endLenData
-      let xing = ''
-      for (let i = 0; i < len; i++) {
-        xing += '*'
-      }
-      return (
-        str.substring(0, frontLen) + xing + str.substring(str.length - endLenData)
-      )
-    },
-
-    handleAvatarSuccess(response) {
-      const { url } = response.data
-      this.advertisementList.push({
-        url, uid: url + Math.random() + Date.now()
-      })
-    },
-
-    handleRemovePic(e) {
-      const { uid } = e
-      this.advertisementList = this.advertisementList.filter(item => item.uid !== uid)
-    },
-
-    // 获取省数据
-    handleCascaderChange() {
-      const checkedNode = this.$refs.cascaderRef.getCheckedNodes()
-      const nodeData = checkedNode[0].data
-      this.ruleForm.areaId = nodeData.id
-    },
-
-    // 获取所有商家分类
-    async getCategoryList() {
-      const res = await businessClassList({
-        page: 1,
-        pageSize: 100
-      })
-
-      this.allShopCategoryList = res.data.records.map(item => {
-        item.childs.map(item2 => {
-          item2.childs.map(item3 => {
-            delete item3.childs
-            return item3
-          })
-          return item2
-        })
-        return item
-      })
-    },
-
-    // 获取路径信息
-    initShopClassPath(classId) {
-      const allLevelThereList = []
-      this.allShopCategoryList.forEach(item => {
-        item.childs.forEach(item1 => {
-          allLevelThereList.push(...item1.childs)
+        .catch(() => {})
+    },
+    handleEnable(row) {
+      this.$confirm('确定启用此项？')
+        .then(async () => {
+          await businessListStart({ shopName: row.shopName, state: 1, shopId: row.shopId })
+          this.$message({ message: '启用成功！', type: 'success' })
+          this.handleSearch()
         })
-      })
-
-      const currentClassInfo = allLevelThereList.find(item => {
-        return item.levelId.includes(classId)
-      })
-
-      if (currentClassInfo) {
-        this.ruleForm.classificationId = currentClassInfo.levelId.slice(1).split('/')
-      }
-    },
-
-    // 选择经纬
-    handleSelectLngAndLat(address) {
-      this.ruleForm.longitude = address[0]
-      this.ruleForm.latitude = address[1]
+        .catch(() => {})
     }
   }
 }
 </script>
 
-<style
-  lang="scss"
-  scoped
->
-@import url("../../../styles/elDialog.scss");
-
-.pending {
-  padding: 30px;
-}
-
-.fenye {
-  margin-top: 20px;
-}
-
-.elipt {
-  width: 50%;
-}
-
-.elspan {
-  margin-left: 10px;
+<style lang="scss" scoped>
+.app-container {
+	padding: 20px;
+	display: flex;
+	flex-direction: column;
+
+	.filter-container {
+		.filter-item {
+			display: inline-block;
+			vertical-align: middle;
+			margin-bottom: 10px;
+		}
+	}
+
+	.small-padding {
+		.cell {
+			padding-left: 5px;
+			padding-right: 5px;
+		}
+	}
+
+	.fixed-width {
+		.el-button--mini {
+			padding: 7px 10px;
+		}
+	}
 }
 </style>

src/views/business/settlement/addSettlement.vue

@@ -1,448 +0,0 @@
-<template>
-  <div class="">
-    <!-- 卡片 -->
-    <el-card class="box-card">
-      <div slot="header" class="clearfix">
-        <span v-if="shopDetails.checkState === 2" class="leftTitle">已拒绝</span>
-        <span v-if="shopDetails.checkState === 1" class="leftTitle">已通过</span>
-        <span v-if="shopDetails.checkState === 0" class="leftTitle">未处理</span>
-        <div class="girhtBtn">
-          <el-button class="" @click="back">
-            取消
-          </el-button>
-          <el-button v-if="shopDetails.checkState === 0" type="primary" @click="handle">
-            处理
-          </el-button>
-        </div>
-      </div>
-      <!--  卡片内容-->
-      <div>
-        <div class="msgDetail">
-          <div class="detail">
-            <div class="shop_info">
-              <p class="detail_title">店铺信息</p>
-              <p class="detail_text">
-                <span>
-                  <font>*</font>店铺名称：
-                </span>
-                <span>{{ shopDetails.shopName }}</span>
-              </p>
-              <p class="detail_text">
-                <span>
-                  <font>*</font>店铺类型：
-                </span>
-                <span v-if="shopDetails.authenType == 1">个人</span>
-                <span v-if="shopDetails.authenType == 2">个体工商户</span>
-                <span v-if="shopDetails.authenType == 3">企业</span>
-                <span v-if="shopDetails.authenType == 4">其他组织</span>
-              </p>
-              <p class="detail_text">
-                <span>
-                  <font>*</font>
-                  客服电话：
-                </span>
-                <span>{{ shopDetails.shopPhone }}</span>
-              </p>
-              <p class="detail_text">
-                <span>
-                  <font>*</font>店铺负责人：
-                </span>
-                <span>{{ shopDetails.chargePersonName }}</span>
-              </p>
-              <p class="detail_text">
-                <span>
-                  <font>*</font>负责人电话：
-                </span>
-                <span>{{ shopDetails.chargePersonPhone }}</span>
-              </p>
-              <p class="detail_text">
-                <span>
-                  <font>*</font>店铺地址：
-                </span>
-                <span>{{ shopDetails.shopAdress }}</span>
-              </p>
-            </div>
-            <div class="person_info">
-              <p class="detail_title">个人信息</p>
-              <p class="detail_text">
-                <span>
-                  <font>*</font>名称：
-                </span>
-                <span>{{ shopDetails.name }}</span>
-              </p>
-              <p class="detail_text">
-                <span>
-                  <font>*</font>证件信息：
-                </span>
-                <span>{{ shopDetails.cardTypeName }}</span>
-              </p>
-              <p class="detail_text">
-                <span>
-                  <font>*</font>身份证号码：
-                </span>
-                <span>{{ shopDetails.idCard }}</span>
-              </p>
-              <p class="detail_text">
-                <span>
-                  <font>*</font>身份证有效期：
-                </span>
-                <span>{{ shopDetails.cardTime }}</span>
-              </p>
-              <p class="detail_img">
-                <span>
-                  <font>*</font>证件照片:
-                </span>
-                <el-image
-                  v-for="(src, index) in idCardCopyFilePath" :key="'id' + index" class="img_box"
-                  :preview-src-list="idCardCopyFilePath" :src="src" :preview="2" alt=""
-                />
-              </p>
-              <p v-if="shopDetails && shopDetails.authenType === 1" class="detail_img">
-                <span>
-                  <font>*</font>手持证件照:
-                </span>
-                <el-image class="img_box" :src="shopDetails.cardHand" :preview-src-list="[ shopDetails.cardHand ]" />
-              </p>
-            </div>
-            <!-- +++++++++++++++++++++ 主体信息 ++++++++++++++++++++++++++++++++++++++++++++++++ -->
-            <div v-if="shopDetails.authenType !== 1" class="person_info">
-              <p class="detail_title">主体信息</p>
-              <p class="detail_text">
-                <span v-if="shopDetails.authenType == 2">
-                  <font>*</font> 商户名称：
-                </span>
-                <span v-if="shopDetails.authenType == 3">
-                  <font>*</font> 企业名称：
-                </span>
-                <span v-if="shopDetails.authenType == 4">
-                  <font>*</font> 组织名称：
-                </span>
-                <span>{{ shopDetails.subjectName }}</span>
-              </p>
-              <p class="detail_text">
-                <span>
-                  <font>*</font> {{ shopDetails.authenType == 4 ? '组织机构代码' : '社会信用代码' }}：
-                </span>
-                <span>{{ shopDetails.subjectCode }}</span>
-              </p>
-              <p class="detail_text">
-                <span>
-                  <font>*</font>注册地址
-                </span>
-                <span>{{ shopDetails.subjectAdress }}</span>
-              </p>
-              <p class="detail_text">
-                <span>
-                  <font>*</font>营业期限
-                </span>
-                <span>{{ shopDetails.subjectStartTime }} - {{ shopDetails.subjectEndTime }}</span>
-              </p>
-              <p class="detail_img">
-                <span>
-                  <font>*</font>{{ shopDetails.authenType == 4 ? '机构证明材料' : '营业执照' }}：
-                </span>
-                <img
-                  v-for="(src, index) in shopDetails.subjectLicense" :key="'id' + index" :src="src" :preview="2"
-                  alt=""
-                >
-              </p>
-            </div>
-            <div class="person_info">
-              <p class="detail_title">授权信息</p>
-              <p class="detail_text">
-                <span>
-                  <font>*</font>生效日期：
-                </span>
-                <span>{{ shopDetails.effectiveDate }}</span>
-              </p>
-              <p class="detail_text">
-                <span>
-                  <font>*</font>生效时限：
-                </span>
-                <span>{{ shopDetails.effectiveYear }}</span>
-                <span v-if="shopDetails.effectiveYear">年</span>
-              </p>
-            </div>
-          </div>
-        </div>
-      </div>
-    </el-card>
-
-    <!-- *************对话框开始************* -->
-    <el-dialog
-      title="处理申请" :visible.sync="addFormDialog" width="30%" center
-      :show-close="false"
-      :close-on-click-modal="false" :modal-append-to-body="false" :modal="false"
-    >
-      <div>
-        <el-form ref="ruleForm" :model="addForm" label-width="80px">
-          <el-form-item label="入驻处理">
-            <el-radio-group v-model="addForm.checkHandle" @change="selectChoose">
-              <el-radio label="1">同意入驻</el-radio>
-              <el-radio label="0">拒绝入驻</el-radio>
-            </el-radio-group>
-          </el-form-item>
-          <el-form-item v-if="addForm.checkHandle == 0" label="拒绝原因">
-            <el-input v-model="addForm.reason" maxlength="200" type="textarea" />
-          </el-form-item>
-          <el-form-item v-if="addForm.checkHandle == 1" label="生效日期">
-            <el-radio-group v-model="addForm.effectiveDate">
-              <el-radio label="null">即时生效</el-radio>
-              <el-radio label="0">指定日期</el-radio>
-            </el-radio-group>
-          </el-form-item>
-          <el-form-item v-if="addForm.effectiveDate == 0 && addForm.checkHandle == 1">
-            <el-date-picker v-model="chooseDate" value-format="yyyy-MM-dd" type="date" placeholder="选择日期" />
-          </el-form-item>
-          <el-form-item v-if="addForm.checkHandle == 1" label="生效时间">
-            <el-input
-              v-model="addForm.effectiveYear" maxlength="4" oninput="value=value.replace(/[^\d]/g,'')"
-              class="spanIpt"
-            />
-            <span class="riSpan">年</span>
-          </el-form-item>
-        </el-form>
-      </div>
-      <span slot="footer" class="dialog-footer">
-        <el-button @click="addFormDialog = false">取 消</el-button>
-        <el-button type="primary" @click="handle_save">确 定</el-button>
-      </span>
-    </el-dialog>
-  </div>
-</template>
-
-<script>
-import { settlementHandle } from '@/api/business'
-import { hidden } from '@/utils'
-
-export default {
-  props: {
-    businessData: {
-      type: Object,
-      default: () => ({})
-    }
-  },
-  data() {
-    // 这里存放数据
-    return {
-      shopId: '',
-      shopDetails: {},
-      addFormDialog: false,
-      idCardCopyFilePath: [],
-      chooseDate: '',
-      addForm: {
-        shopId: '', // 店铺id
-        checkHandle: '', // 1-同意入驻 0-拒绝入驻
-        effectiveDate: '', // 生效日期  null-即时生效 有值-指定日期生效
-        effectiveYear: '', // 生效时限（年）
-        reason: '' // 处理原因
-      }
-    }
-  },
-  watch: {
-    businessData: {
-      handler(nVal, oVal) {
-        this.shopDetails = {}
-        this.idCardCopyFilePath = []
-        this.shopId = nVal.shopId
-        this.shopDetails = nVal
-        this.shopDetails.idCard = hidden(this.shopDetails.idCard, 4, 4)
-        this.idCardCopyFilePath.push(nVal.cardPositive)
-        this.idCardCopyFilePath.push(nVal.cardSide)
-      }
-    }
-  },
-  created() {
-    this.shopDetails = {}
-    this.idCardCopyFilePath = []
-    this.shopId = this.businessData.shopId
-    this.shopDetails = this.businessData
-    this.shopDetails.idCard = hidden(this.shopDetails.idCard, 4, 4)
-    this.idCardCopyFilePath.push(this.businessData.cardPositive)
-    this.idCardCopyFilePath.push(this.businessData.cardSide)
-  },
-  // 方法集合
-  methods: {
-    // 处理
-    handle() {
-      this.addFormDialog = true
-    },
-    // 返回
-    back() {
-      this.$emit('cancel')
-    },
-    // selectChoose
-    selectChoose(index) {
-      if (index !== 1) {
-        this.addForm.effectiveDate = ''
-        this.addForm.effectiveYear = ''
-        this.chooseDate = ''
-      }
-    },
-    clearAddForm() {
-      this.addForm = {
-        shopId: '', // 店铺id
-        checkHandle: '', // 1-同意入驻 0-拒绝入驻
-        effectiveDate: '', // 生效日期  null-即时生效 有值-指定日期生效
-        effectiveYear: '', // 生效时限（年）
-        reason: '' // 处理原因
-      }
-    },
-    // 处理申请确定
-    async handle_save() {
-      if (this.addForm.checkHandle === '') {
-        this.$message.error('请选择入驻处理')
-        return
-      }
-      if (this.addForm.effectiveDate === '' && this.addForm.checkHandle === 1) {
-        this.$message.error('请选择生效日期')
-        return
-      }
-      if (this.addForm.effectiveYear === '' && this.addForm.checkHandle === 1) {
-        this.$message.error('请输入生效时间')
-        return
-      }
-      if (this.addForm.effectiveDate !== 'null') {
-        this.addForm.effectiveDate = this.chooseDate
-      } else {
-        this.addForm.effectiveDate = 'null'
-      }
-      this.addForm.shopId = this.shopId
-      const loading = this.$loading({
-        lock: true,
-        text: '处理中请稍后...',
-        spinner: 'el-icon-loading',
-        background: 'rgba(0, 0, 0, 0.7)'
-      })
-      const res = await settlementHandle(this.addForm)
-      this.addFormDialog = false
-      if (res.code === '') {
-        this.shopDetails = {}
-        this.idCardCopyFilePath = []
-        this.$message({
-          message: '处理成功',
-          type: 'success'
-        })
-        this.clearAddForm()
-        this.$emit('cancel')
-        this.$emit('search')
-      } else {
-        console.log('error')
-      }
-      loading.close()
-    }
-  }
-}
-</script>
-
-<style
-  lang="scss"
-  scoped
->
-//@import url(); 引入公共css类
-.clearfix {
-	.leftTitle {
-		font-size: 24px;
-		color: #333333;
-	}
-
-	.girhtBtn {
-		float: right;
-	}
-}
-
-.detail {
-	min-height: 500px;
-	background: rgba(255, 255, 255, 1);
-	box-shadow: 0px 0px 10px 0px rgba(51, 51, 51, 0.15);
-	border-radius: 4px;
-	padding: 1px 50px 20px;
-	margin-top: 15px;
-
-	.detail_title {
-		font-size: 24px;
-		color: #333333;
-		position: relative;
-		margin: 50px 20px 20px;
-
-		font {
-			color: #ff7911;
-		}
-
-		&:before {
-			content: "";
-			display: block;
-			position: absolute;
-			top: 5px;
-			left: -20px;
-			width: 4px;
-			height: 24px;
-			background-color: #3a68f2;
-		}
-	}
-
-	.detail_text {
-		line-height: 40px;
-
-		span {
-			display: inline-block;
-			color: #333333;
-			font-size: 16px;
-
-			&:nth-child(1) {
-				width: 150px;
-				text-indent: 20px;
-
-				font {
-					color: red;
-				}
-			}
-
-			&:nth-child(2) {
-				color: #666666;
-			}
-		}
-	}
-
-	.detail_img {
-		position: relative;
-		line-height: 40px;
-		margin-bottom: 30px;
-		overflow: hidden;
-
-		span {
-			position: absolute;
-			top: 0;
-			left: 0;
-			display: inline-block;
-			color: #333333;
-			font-size: 16px;
-			width: 150px;
-			text-indent: 20px;
-
-			font {
-				color: #ff7911;
-			}
-		}
-
-		.img_box {
-			width: 265px;
-			height: 170px;
-			border-radius: 4px;
-			float: left;
-
-			&:nth-of-type(1) {
-				margin: 0 30px 0 150px;
-			}
-		}
-	}
-}
-
-.spanIpt {
-	width: 60%;
-}
-
-.riSpan {
-	margin-left: 10px;
-}
-</style>

src/views/business/settlement/components/ApplicationProcessing.vue

@@ -0,0 +1,166 @@
+<template>
+  <el-dialog :visible.sync="visible" v-bind="modalOptions">
+    <el-form ref="formData" :model="formData" :rules="formRules" size="mini" label-suffix=":" label-width="150px">
+      <el-form-item label="商家ID" prop="shopId">
+        <el-input
+          v-model="formData.shopId" maxlength="20" placeholder="商家ID" disabled
+        />
+      </el-form-item>
+      <el-form-item label="入驻处理" prop="checkHandle">
+        <el-radio-group
+          v-model="formData.checkHandle"
+          @input="(e) => e === 0 ? (formData.effectiveDate = formData.dateType = formData.effectiveYear = '') : ''"
+        >
+          <el-radio :label="1">同意入驻</el-radio>
+          <el-radio :label="0">拒绝入驻</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item v-if="formData.checkHandle === 0" label="拒绝原因" prop="reason">
+        <el-input v-model="formData.reason" type="textarea" placeholder="请输入拒绝原因" maxlength="520" :rows="3" show-word-limit />
+      </el-form-item>
+      <el-form-item v-if="formData.checkHandle === 1" label="日期类型" prop="dateType">
+        <el-radio-group v-model="formData.dateType">
+          <el-radio :label="1">即时生效</el-radio>
+          <el-radio :label="2">指定日期</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item v-if="(formData.checkHandle === 1) && (formData.dateType === 2)" label="选择日期" prop="effectiveDate">
+        <el-date-picker
+          v-model="formData.effectiveDate"
+          size="medium"
+          type="date"
+          placeholder="选择日期"
+          value-format="yyyy-MM-dd"
+        ></el-date-picker>
+      </el-form-item>
+      <el-form-item
+        v-if="(formData.checkHandle === 1) && (formData.dateType === 2)"
+        label="生效时间" prop="effectiveYear"
+      >
+        <el-input v-model="formData.effectiveYear" placeholder="请输入生效时间" style="width: 200px;">
+          <template #append>
+            <div>年</div>
+          </template>
+        </el-input>
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <span class="dialog-footer">
+        <el-button size="mini" @click="handleClose">取 消</el-button>
+        <el-button type="primary" size="mini" @click="handleSubmit">确 定</el-button>
+      </span>
+    </template>
+  </el-dialog>
+</template>
+
+<script>
+import { settlementHandle } from '@/api/business'
+
+export default {
+  name: 'ApplicationProcessing',
+  components: {
+  },
+  data() {
+    return {
+      modalOptions: {
+        closeOnClickModal: false,
+        width: '820px',
+        title: ''
+      },
+      visible: false,
+      activityList: [],
+      formData: {
+        shopId: '', // 店铺id
+        checkHandle: '', // 1-同意入驻 0-拒绝入驻
+        dateType: '', // 非后端参数
+        effectiveDate: '', // 生效日期  null-即时生效 有值-指定日期生效
+        effectiveYear: '', // 生效时限（年）
+        reason: '' // 处理原因
+      },
+      formRules: {
+        shopId: [
+          { required: true, message: '缺少商家ID' }
+        ],
+        checkHandle: [
+          { required: true, message: '请选择入驻处理' }
+        ],
+        dateType: [],
+        effectiveDate: [],
+        effectiveYear: []
+      }
+    }
+  },
+  watch: {
+    'formData.checkHandle': {
+      deep: true,
+      handler(val) {
+        if (val === 1) {
+          this.formRules.dateType = [
+            { required: true, message: '请选择日期类型' }
+          ]
+        } else {
+          this.formRules.dateType = []
+        }
+      }
+    },
+    'formData.dateType': {
+      deep: true,
+      handler(val) {
+        if (val === 2) {
+          this.formRules.effectiveDate = [
+            { required: true, message: '请选择生效日期' }
+          ]
+          this.formRules.effectiveYear = [
+            { required: true, message: '请输入生效时间' },
+            { pattern: /^(0|[1-9][0-9]*)$/, message: '请输入正整数' }
+          ]
+        } else {
+          this.formRules.effectiveDate = []
+          this.formRules.effectiveYear = []
+        }
+      }
+    }
+  },
+  methods: {
+    handleClose() {
+      this.visible = false
+    },
+    initList() {
+    },
+    handleOpen(params = {}) {
+      this.modalOptions.title = '申请处理'
+      // this.formData = Object.assign(this.$options.data().formData, params)
+      this.formData.shopId = params.shopId
+      this.visible = true
+      this.initList()
+      this.$refs.formData && this.$refs.formData.resetFields()
+    },
+    handleSubmit() {
+      this.$refs.formData.validate(async (valid) => {
+        if (valid) {
+          const loading = this.$loading({ text: '提交中，请稍候……' })
+          try {
+            const { dateType, effectiveDate, ...otps } = this.formData
+            const params = {
+              ...otps,
+              effectiveDate: dateType === 1 ? 'null' : dateType === 2 ? effectiveDate : ''
+            }
+            await settlementHandle(params)
+            loading.close()
+            this.$message({ message: `操作成功!`, type: 'success' })
+            this.$emit('success')
+            this.visible = false
+          } catch (e) {
+            loading.close()
+          } finally {
+            loading.close()
+          }
+        } else {
+          this.$message({ message: '请输入相关信息', type: 'warning' })
+          return false
+        }
+      })
+    }
+  }
+}
+</script>

src/views/business/settlement/components/DetailModal.vue

@@ -0,0 +1,227 @@
+<template>
+  <el-dialog
+    :visible.sync="visible"
+    v-bind="modalOptions"
+    append-to-body
+  >
+    <el-form
+      ref="formData"
+      :model="formData"
+      size="mini"
+      label-position="left"
+      label-suffix=":"
+      label-width="200px"
+    >
+      <!-- 申请信息 -->
+      <div style="display: flex;padding-bottom: 14px;font-size: 16px;font-weight: bold;">
+        <div
+          style="width: 4px;height: 14px;margin-left: 6px;margin-right: 6px;background-color: #0519D4;border-radius: 2px;"
+        >
+        </div>
+        <div>店铺信息</div>
+      </div>
+      <el-form-item label="商家ID" prop="shopId">
+        {{ formData.shopId || '--' }}
+      </el-form-item>
+      <el-form-item label="店铺名称" prop="shopName">
+        {{ formData.shopName || '--' }}
+      </el-form-item>
+      <el-form-item label="店铺类型" prop="authenType">
+        <span v-if="formData.authenType === 1">个人</span>
+        <span v-else-if="formData.authenType === 2">个体工商户</span>
+        <span v-else-if="formData.authenType === 3">企业</span>
+        <span v-else-if="formData.authenType === 4">其他组织</span>
+        <span v-else>--</span>
+      </el-form-item>
+      <el-form-item label="客服电话" prop="shopPhone">
+        {{ formData.shopPhone || '--' }}
+      </el-form-item>
+      <el-form-item label="店铺负责人" prop="chargePersonName">
+        {{ formData.chargePersonName || '--' }}
+      </el-form-item>
+      <el-form-item label="负责人电话" prop="chargePersonPhone">
+        {{ formData.chargePersonPhone || '--' }}
+      </el-form-item>
+      <el-form-item label="店铺地址" prop="shopAdress">
+        {{ formData.shopAdress || '--' }}
+      </el-form-item>
+
+      <div style="display: flex;padding-bottom: 14px;font-size: 16px;font-weight: bold;">
+        <div
+          style="width: 4px;height: 14px;margin-left: 6px;margin-right: 6px;background-color: #0519D4;border-radius: 2px;"
+        >
+        </div>
+        <div>个人信息</div>
+      </div>
+      <el-form-item label="名称" prop="name">
+        {{ formData.name || '--' }}
+      </el-form-item>
+      <el-form-item label="证件信息" prop="cardTypeName">
+        {{ formData.cardTypeName || '--' }}
+      </el-form-item>
+      <el-form-item label="身份证号码" prop="idCard">
+        {{ formData.idCard || '--' }}
+      </el-form-item>
+      <el-form-item label="身份证有效期" prop="cardTime">
+        {{ formData.cardTime || '--' }}
+      </el-form-item>
+      <el-form-item label="证件照片正面" prop="cardPositive">
+        <el-image
+          v-if="formData.cardPositive" :src="formData.cardPositive" style="width:80px;height:80px"
+          fit="cover" :preview-src-list="[ formData.cardPositive ]"
+        />
+        <span v-else>--</span>
+      </el-form-item>
+      <el-form-item label="证件照片反面" prop="cardSide">
+        <el-image
+          v-if="formData.cardSide" :src="formData.cardSide" style="width:80px;height:80px"
+          fit="cover" :preview-src-list="[ formData.cardSide ]"
+        />
+        <span v-else>--</span>
+      </el-form-item>
+      <el-form-item label="手持证件照" prop="cardHand">
+        <el-image
+          v-if="formData.cardHand" :src="formData.cardHand" style="width:80px;height:80px"
+          fit="cover" :preview-src-list="[ formData.cardHand ]"
+        />
+        <span v-else>--</span>
+      </el-form-item>
+
+      <div style="display: flex;padding-bottom: 14px;font-size: 16px;font-weight: bold;">
+        <div
+          style="width: 4px;height: 14px;margin-left: 6px;margin-right: 6px;background-color: #0519D4;border-radius: 2px;"
+        >
+        </div>
+        <div>主体信息</div>
+      </div>
+      <el-form-item label="主体名称" prop="subjectName">
+        {{ formData.subjectName || '--' }}
+      </el-form-item>
+      <el-form-item label="主体代码" prop="subjectCode">
+        <!-- 4组织机构代码，123社会信用代码 -->
+        {{ formData.subjectCode || '--' }}
+      </el-form-item>
+      <el-form-item label="注册地址" prop="subjectAdress">
+        {{ formData.subjectAdress || '--' }}
+      </el-form-item>
+      <el-form-item label="营业期限开始时间" prop="subjectStartTime">
+        {{ formData.subjectStartTime || '--' }}
+      </el-form-item>
+      <el-form-item label="营业期限结束时间" prop="subjectEndTime">
+        {{ formData.subjectEndTime || '--' }}
+      </el-form-item>
+      <el-form-item label="主体证件照" prop="subjectLicense">
+        <!-- 4机构证明材料，营业执照 -->
+        <div v-if="formData.subjectLicense && formData.subjectLicense.length">
+          <el-image
+            v-for="(item, index) in formData.subjectLicense" :key="index" :src="item"
+            style="width:80px;height:80px;margin-right: 10px;" fit="cover"
+            :preview-src-list="formData.subjectLicense"
+          />
+        </div>
+        <span v-else>--</span>
+      </el-form-item>
+
+      <div style="display: flex;padding-bottom: 14px;font-size: 16px;font-weight: bold;">
+        <div
+          style="width: 4px;height: 14px;margin-left: 6px;margin-right: 6px;background-color: #0519D4;border-radius: 2px;"
+        >
+        </div>
+        <div>授权信息</div>
+      </div>
+      <el-form-item label="生效日期" prop="effectiveDate">
+        {{ formData.effectiveDate || '--' }}
+      </el-form-item>
+      <el-form-item label="生效时限" prop="effectiveYear">
+        {{ formData.effectiveYear || '--' }}
+      </el-form-item>
+    </el-form>
+  </el-dialog>
+</template>
+
+<script>
+import { settlementGetById } from '@/api/business'
+
+export default {
+  name: 'DetailModal',
+  data() {
+    return {
+      modalOptions: {
+        closeOnClickModal: false,
+        width: '800px',
+        title: '申请详情'
+      },
+      visible: false,
+      formData: {
+        shopId: '',
+        shopName: '',
+        authenType: '',
+        shopPhone: '',
+        chargePersonName: '',
+        chargePersonPhone: '',
+        shopAdress: '',
+        name: '',
+        cardTypeName: '',
+        idCard: '',
+        cardTime: '',
+        cardPositive: '',
+        cardSide: '',
+        cardHand: '',
+        subjectName: '',
+        subjectCode: '',
+        subjectAdress: '',
+        subjectStartTime: '',
+        subjectEndTime: '',
+        subjectLicense: '',
+        effectiveDate: '',
+        effectiveYear: ''
+      }
+    }
+  },
+  methods: {
+    handleClose() {
+      this.visible = false
+    },
+    handleOpen(params = {}) {
+      this.formData = Object.assign(this.$options.data().formData, params)
+      if (params.shopId) {
+        this.getInfo(params.shopId)
+      }
+      this.visible = true
+    },
+    async getInfo(id) {
+      const loading = this.$loading({ text: '加载中' })
+      try {
+        const res = await settlementGetById({ shopId: id })
+        this.formData = Object.assign(this.$options.data().formData, res.data, {
+          shopId: res.data.shopId || '',
+          shopName: res.data.shopName || '',
+          authenType: res.data.authenType,
+          shopPhone: res.data.shopPhone || '',
+          chargePersonName: res.data.chargePersonName || '',
+          chargePersonPhone: res.data.chargePersonPhone || '',
+          shopAdress: res.data.shopAdress || '',
+          name: res.data.name || '',
+          cardTypeName: res.data.cardTypeName || '',
+          idCard: res.data.idCard || '',
+          cardTime: res.data.cardTime || '',
+          cardPositive: res.data.cardPositive || '',
+          cardSide: res.data.cardSide || '',
+          cardHand: res.data.cardHand || '',
+          subjectName: res.data.subjectName || '',
+          subjectCode: res.data.subjectCode || '',
+          subjectAdress: res.data.subjectAdress || '',
+          subjectStartTime: res.data.subjectStartTime || '',
+          subjectEndTime: res.data.subjectEndTime || '',
+          subjectLicense: res.data.subjectLicense || '',
+          effectiveDate: res.data.effectiveDate || '',
+          effectiveYear: res.data.effectiveYear || ''
+        })
+      } finally {
+        loading.close()
+      }
+    }
+  }
+}
+</script>
+

src/views/business/settlement/index.vue

@@ -1,199 +1,202 @@
 <template>
-  <div class="pdl">
-    <!-- 选项卡 -->
-    <el-tabs v-model="activeName" @tab-click="handleClick">
-      <el-tab-pane label="待处理" name="0" />
-      <el-tab-pane label="已通过" name="1" />
-      <el-tab-pane label="已拒绝" name="2" />
-    </el-tabs>
-    <!-- 搜索 -->
-    <div class="formSearch">
-      <el-form :inline="true" :model="formInline">
-        <el-form-item label="商家名称">
-          <el-input v-model="formInline.shopName" maxlength="20" placeholder="请输入商家名称" />
-        </el-form-item>
-        <el-form-item label="注册手机号">
-          <el-input v-model="formInline.shopPhone" maxlength="11" placeholder="请输入注册手机号" />
-        </el-form-item>
-        <el-form-item label="店铺类型">
-          <el-select v-model="formInline.authenType" clearable placeholder="请选择">
-            <el-option label="个人" value="1" />
-            <el-option label="个体工商户" value="2" />
-            <el-option label="企业" value="3" />
-            <el-option label="其他组织" value="4" />
-          </el-select>
-        </el-form-item>
-        <el-form-item label="申请时间">
-          <el-date-picker
-            v-model="formInline.dates" type="datetimerange" value-format="yyyy-MM-dd" range-separator="至"
-            start-placeholder="开始日期" end-placeholder="结束日期"
-          />
-        </el-form-item>
-        <el-form-item>
-          <el-button type="primary" plain @click="search">查询</el-button>
-        </el-form-item>
-      </el-form>
+  <div class="app-container">
+    <!-- 查询和其他操作 -->
+    <div class="filter-container">
+      <el-select
+        v-model="listQuery.checkState" clearable size="mini" class="filter-item"
+        style="width: 200px;" placeholder="请选择审核状态"
+      >
+        <el-option label="待处理" :value="0" />
+        <el-option label="已通过" :value="1" />
+        <el-option label="已拒绝" :value="2" />
+      </el-select>
+      <el-input
+        v-model="listQuery.shopName" clearable size="mini" class="filter-item"
+        style="width: 200px;margin-left: 10px;" placeholder="请输入商家名称"
+      />
+      <el-input
+        v-model="listQuery.shopPhone" clearable size="mini" class="filter-item"
+        style="width: 200px;margin-left: 10px;" placeholder="请输入注册手机号"
+      />
+      <el-select
+        v-model="listQuery.authenType" clearable size="mini" class="filter-item"
+        style="width: 200px;margin-left: 10px;" placeholder="请选择店铺类型"
+      >
+        <el-option label="个人" :value="1" />
+        <el-option label="个体工商户" :value="2" />
+        <el-option label="企业" :value="3" />
+        <el-option label="其他组织" :value="4" />
+      </el-select>
+      <el-date-picker
+        v-model="listQuery.dates" type="datetimerange" range-separator="至"
+        start-placeholder="开始时间" end-placeholder="结束时间" size="mini"
+        class="filter-item" style="margin-left: 10px;line-height: 1;" value-format="yyyy-MM-dd"
+      />
+      <el-button
+        size="mini" class="filter-item" type="primary" icon="el-icon-search"
+        style="margin-left:10px;"
+        @click="handleSearch"
+      >
+        查找
+      </el-button>
+      <br />
+      <el-button
+        size="mini" type="primary" icon="el-icon-plus"
+        @click="$refs.EditModal && $refs.EditModal.handleOpen({ shopId: '' })"
+      >
+        添加
+      </el-button>
     </div>
-    <!-- 表格 -->
-    <div class="tableBox">
+
+    <!-- 查询结果 -->
+    <div v-tableHeight>
       <el-table
-        ref="multipleTable" :data="tableData" border
-        :header-cell-style="{ background: '#EEF3FF', color: '#333333' }" tooltip-effect="dark" style="width: 100%"
+        v-loading="listLoading" height="100%" element-loading-text="正在查询中。。。" :data="list"
+        v-bind="{ stripe: true, size: 'small', border: true, fit: true, highlightCurrentRow: true }"
       >
-        <el-table-column label="商家名称" width="220">
-          <template slot-scope="scope">{{ scope.row.shopName }}</template>
+        <el-table-column align="center" width="100" label="商家ID" prop="shopId" fixed="left" />
+        <el-table-column align="center" label="商家名称" prop="shopName">
+          <template slot-scope="{ row }">
+            <span>{{ row.shopName || '--' }}</span>
+          </template>
         </el-table-column>
-        <el-table-column label="店铺类型">
-          <template slot-scope="scope">
-            <span v-if="scope.row.authenType == 1">个人</span>
-            <span v-if="scope.row.authenType == 2">个体工商户</span>
-            <span v-if="scope.row.authenType == 3">企业</span>
-            <span v-if="scope.row.authenType == 4">其他组织</span>
+        <el-table-column align="center" label="店铺类型" prop="authenType">
+          <template slot-scope="{ row }">
+            <el-tag v-if="row.authenType === 1" effect="plain">个人</el-tag>
+            <el-tag v-else-if="row.authenType === 2" effect="plain">个体工商户</el-tag>
+            <el-tag v-else-if="row.authenType === 3" effect="plain">企业</el-tag>
+            <el-tag v-else-if="row.authenType === 4" effect="plain">其他组织</el-tag>
+            <span v-else>--</span>
           </template>
         </el-table-column>
-        <el-table-column prop="shopPhone" label="注册手机号" />
-        <el-table-column prop="createTime" label="申请时间" />
-        <el-table-column label="操作" show-overflow-tooltip>
-          <template slot-scope="scope">
-            <div class="btnList">
-              <el-button v-if="activeName == 0" type="text" @click="handleDel(scope.row)">
-                处理
-              </el-button>
-              <el-button v-if="activeName == 1 || activeName == 2" type="text" @click="handleDel(scope.row)">
-                查看
-              </el-button>
-              <el-button v-if="activeName == 1 || activeName == 2" type="text" @click="delet(scope.row)">
-                删除
-              </el-button>
-            </div>
+        <el-table-column align="center" width="120" label="注册手机号" prop="shopPhone" show-overflow-tooltip />
+        <el-table-column align="center" width="150" label="创建时间" prop="createTime" />
+        <el-table-column align="center" label="操作" width="220" fixed="right" class-name="small-padding fixed-width">
+          <template slot-scope="{ row }">
+            <el-button type="warning" size="mini" @click="handleDetail(row)">
+              详情
+            </el-button>
+            <el-button
+              v-if="listQuery.checkState === 0" size="mini"
+              @click="$refs.ApplicationProcessing && $refs.ApplicationProcessing.handleOpen(row)"
+            >
+              处理
+            </el-button>
+            <el-button
+              v-if="(listQuery.checkState === 1) || (listQuery.checkState === 2)" type="danger"
+              size="mini" @click="handleDelete(row)"
+            >
+              删除
+            </el-button>
           </template>
         </el-table-column>
       </el-table>
-      <div class="fenye">
-        <el-pagination
-          :current-page="formInline.page" :page-sizes="[10, 20, 50, 100]" :page-size="10"
-          layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
-          @current-change="handleCurrentChange"
-        />
-      </div>
     </div>
 
-    <el-dialog
-      :title="'商家入驻审核'" :visible.sync="addVisible" top="5vh" width="70%"
-      center :show-close="false"
-      :close-on-click-modal="false"
-    >
-      <AddSettlement v-loading="loading" :business-data="form" @cancel="cleanForm" @search="search" />
-    </el-dialog>
+    <div>
+      <el-pagination
+        :current-page="listQuery.page" :page-sizes="[10, 20, 50, 100]" :page-size="listQuery.pageSize"
+        layout="total, sizes, prev, pager, next, jumper" :total="total"
+        @size-change="(val) => ((listQuery.pageSize = val) && getList())"
+        @current-change="(val) => ((listQuery.page = val) && getList())"
+      />
+    </div>
+
+    <!-- 提现处理 -->
+    <ApplicationProcessing ref="ApplicationProcessing" @success="getList" />
+    <!-- 查看详情 -->
+    <DetailModal ref="DetailModal" />
   </div>
 </template>
 
 <script>
-import AddSettlement from '@/views/business/settlement/addSettlement'
 
-import {
-  settlementGetAll,
-  settlementDelete
-} from '@/api/business'
-import {
-  settlementGetById
-} from '@/api/business'
+import ApplicationProcessing from './components/ApplicationProcessing'
+import DetailModal from './components/DetailModal'
+import { settlementGetAll, settlementDelete } from '@/api/business'
 
 export default {
+  name: 'Settlement',
   components: {
-    AddSettlement
+    ApplicationProcessing,
+    DetailModal
   },
   data() {
-    // 这里存放数据
     return {
-      activeName: '0',
-      formInline: {
+      list: [],
+      total: 0,
+      listLoading: true,
+      listQuery: {
         shopName: '', // 商家名称
         shopPhone: '', // 注册手机号
         authenType: '', // 店铺类型 1-个人 2-个体工商户 3-企业 4-其他组织
         dates: [], // 时间数组
-        checkState: '0', // 入驻处理状态 0-未处理 1-通过 2-拒绝
+        checkState: 0, // 入驻处理状态 0-未处理 1-通过 2-拒绝
         page: 1,
-        pageSize: 10,
+        pageSize: 20,
         shopType: 2
-      },
-      total: 10,
-      tableData: [],
-      addVisible: false,
-      loading: false,
-      form: {}
+      }
     }
   },
-  mounted() {
-    this.getAll(this.formInline)
+  created() {
+    this.getList()
   },
-  // 方法集合
   methods: {
-    handleSizeChange(val) {
-      this.formInline.pageSize = val
-      this.getAll(this.formInline)
-    },
-    handleCurrentChange(val) {
-      this.formInline.page = val
-      this.getAll(this.formInline)
-    },
-    handleClick(tab, event) {
-      this.formInline.checkState = tab.index
-      this.getAll(this.formInline)
-    },
-    // 查询
-    search() {
-      this.total = 1
-      this.formInline.page = 1
-      this.getAll(this.formInline)
-    },
-    // 处理
-    handleDel(row) {
-      this.addVisible = true
-      this.getFormData(row.shopId)
+    async getList() {
+      this.listLoading = true
+      try {
+        const res = await settlementGetAll(this.listQuery)
+        this.list = res.data.list
+        this.total = res.data.total
+      } finally {
+        this.listLoading = false
+      }
     },
-    getFormData(shopId) {
-      this.loading = true
-      // 查询店铺详情
-      settlementGetById({ shopId })
-        .then((res) => {
-          this.loading = false
-          this.form = res.data
-        })
-        .catch((err) => {
-          this.loading = false
-          console.log(err)
-        })
+    handleSearch() {
+      this.listQuery.page = 1
+      this.getList()
     },
-    cleanForm() {
-      this.addVisible = false
+    handleDetail(row) {
+      this.$refs.DetailModal && this.$refs.DetailModal.handleOpen(row)
     },
-    // 删除
-    async delet(row) {
-      const res = await settlementDelete({ checkId: row.checkId })
-      if (res.code === '') {
-        this.$message({
-          message: '删除成功',
-          type: 'success'
+    handleDelete(row) {
+      this.$confirm('确定删除此项？')
+        .then(async () => {
+          await settlementDelete({ checkId: row.checkId })
+          this.$message({ message: '删除成功！', type: 'success' })
+          this.handleSearch()
         })
-        this.getAll(this.formInline)
-      }
-    },
-    // 初始化查询所有数据
-    async getAll(formInline) {
-      const res = await settlementGetAll(formInline)
-      this.tableData = res.data.list
-      this.total = res.data.total
+        .catch(() => {})
     }
   }
 }
 </script>
 
-<style lang='scss' scoped>
-//@import url(); 引入公共css类
-@import url("../../../styles/elDialog.scss");
+<style lang="scss" scoped>
+.app-container {
+	padding: 20px;
+	display: flex;
+	flex-direction: column;
+
+	.filter-container {
+		.filter-item {
+			display: inline-block;
+			vertical-align: middle;
+			margin-bottom: 10px;
+		}
+	}
+
+	.small-padding {
+		.cell {
+			padding-left: 5px;
+			padding-right: 5px;
+		}
+	}
 
-.pdl {
-	padding-left: 20px;
+	.fixed-width {
+		.el-button--mini {
+			padding: 7px 10px;
+		}
+	}
 }
 </style>

src/views/commissionAllocation/gradeCommission/components/DetailModal.vue

@@ -23,10 +23,8 @@
         {{ formData.activityName || '--' }}
       </el-form-item>
       <el-form-item label="活动类型" prop="activityType">
-        <span v-if="formData.activityType === 1">499</span>
-        <span v-else-if="formData.activityType === 2">商圈</span>
-        <span v-else-if="formData.activityType === 3">爆品</span>
-        <span v-else-if="formData.activityType === 4">消费金</span>
+        <span v-if="formData.activityType === 5">消费金</span>
+        <span v-else-if="formData.activityType === 6">组合活动</span>
         <span v-else>--</span>
       </el-form-item>
       <el-form-item label="团长规则" prop="leadersRule">

src/views/commissionAllocation/gradeCommission/components/EditModal.vue

@@ -14,10 +14,8 @@
       </el-form-item>
       <el-form-item label="活动类型" prop="activityType">
         <el-select v-model="formData.activityType" size="mini" placeholder="请选择活动类型">
-          <el-option label="499" :value="1" />
-          <el-option label="商圈" :value="2" />
-          <el-option label="爆品" :value="3" />
-          <el-option label="消费金" :value="4" />
+          <el-option label="消费金" :value="5" />
+          <el-option label="组合活动" :value="6" />
         </el-select>
       </el-form-item>
       <el-form-item label="团长规则" prop="leadersRule">
@@ -206,11 +204,13 @@ export default {
           try {
             const { leadersRule, partnerRule, leadersMoney, leadersInMoney, partnerMoney, partnerInMoney, ...otps } = this.formData
             const params = {
+              ...otps,
               leadersMoney: leadersRule === 1 ? leadersMoney / 100 : leadersMoney,
               leadersInMoney: leadersRule === 1 ? leadersInMoney / 100 : leadersInMoney,
               partnerMoney: partnerRule === 1 ? partnerMoney / 100 : partnerMoney,
               partnerInMoney: partnerRule === 1 ? partnerInMoney / 100 : partnerInMoney,
-              ...otps
+              leadersRule,
+              partnerRule
             }
             this.formData.ruleId ? await priceControlUpdatePlan(params) : await savePlatformBeeRule(params)
             loading.close()

src/views/commissionAllocation/gradeCommission/index.vue

@@ -38,10 +38,8 @@
         <el-table-column align="center" width="100" label="关联活动" prop="activityName" fixed="left" show-overflow-tooltip />
         <el-table-column align="center" label="活动类型" prop="activityType">
           <template slot-scope="{ row }">
-            <el-tag v-if="row.activityType === 1" effect="plain">499</el-tag>
-            <el-tag v-else-if="row.activityType === 2" effect="plain">商圈</el-tag>
-            <el-tag v-else-if="row.activityType === 3" effect="plain">爆品</el-tag>
-            <el-tag v-else-if="row.activityType === 4" effect="plain">消费金</el-tag>
+            <el-tag v-if="row.activityType === 5" effect="plain">消费金</el-tag>
+            <el-tag v-else-if="row.activityType === 6" effect="plain">组合活动</el-tag>
             <span v-else>--</span>
           </template>
         </el-table-column>

src/views/finance/application/index.vue

@@ -16,9 +16,11 @@
               <el-option label="全部" :value="null" />
               <el-option label="待审核" value="0" />
               <el-option label="打款中" value="1" />
+              <el-option label="通过" value="1" />
               <el-option label="拒绝" value="2" />
               <el-option label="打款成功" value="3" />
               <el-option label="打款失败" value="4" />
+              <el-option label="待确认" value="5" />
             </el-select>
           </el-form-item>
           <el-form-item label-width="0">
@@ -41,10 +43,12 @@
             <el-table-column label="处理状态">
               <template slot-scope="scope">
                 <span v-if="scope.row.state == 0">审核中</span>
-                <span v-if="scope.row.state == 1">打款中</span>
+                <!-- <span v-if="scope.row.state == 1">打款中</span> -->
+                <span v-if="scope.row.state == 1">通过</span>
                 <span v-if="scope.row.state == 2">拒绝</span>
                 <span v-if="scope.row.state == 3">打款成功</span>
                 <span v-if="scope.row.state == 4">打款失败</span>
+                <span v-if="scope.row.state == 5">待确认</span>
               </template>
             </el-table-column>
             <el-table-column prop="applyTime" label="申请时间"></el-table-column>

src/views/finance/withdrawal/components/ClearingDetails.vue

@@ -0,0 +1,96 @@
+<template>
+  <el-dialog
+    :visible.sync="visible"
+    v-bind="modalOptions"
+    append-to-body
+  >
+    <div>
+      <el-table
+        v-loading="!formData.Clrglist || !formData.Clrglist.length" height="60vh" element-loading-text="暂无清算明细数据"
+        :data="formData.Clrglist"
+        v-bind="{ stripe: true, size: 'small', border: true, fit: true, highlightCurrentRow: true }"
+      >
+        <el-table-column align="center" min-width="80" prop="Sub_Ordr_Id" label="子订单编号" />
+        <el-table-column align="center" min-width="100" prop="Seq_No" label="顺序号" show-overflow-tooltip />
+        <el-table-column align="center" min-width="120" prop="Rcv_Prt_Mkt_Mrch_ID" label="收款商家编号" show-overflow-tooltip />
+        <el-table-column align="center" min-width="120" prop="Clrg_Dt" label="分账日期" show-overflow-tooltip />
+        <el-table-column align="center" min-width="120" label="分账状态" prop="Clrg_Stcd">
+          <template slot-scope="{ row }">
+            <span v-if="row.Clrg_Stcd === '0'">初始（未进行分账处理）</span>
+            <span v-else-if="row.Clrg_Stcd === '1'">未清算（生成分账信息中）</span>
+            <span v-else-if="row.Clrg_Stcd === '2'">已清算（已分账成功）</span>
+            <span v-else-if="row.Clrg_Stcd === '3'">无需清算（该笔订单已全额退，不需要分账）</span>
+            <span v-else-if="row.Clrg_Stcd === '4'">清算异常（分账出现异常）</span>
+            <span v-else-if="row.Clrg_Stcd === '6'">清算中（分账处理中）</span>
+            <span v-else-if="row.Clrg_Stcd === 'b'">待清算（未到分账日期）</span>
+            <span v-else>--</span>
+          </template>
+        </el-table-column>
+        <el-table-column align="center" min-width="100" prop="Clrg_Amt" label="收款方实际（应）分账金额" show-overflow-tooltip />
+        <el-table-column align="center" min-width="100" prop="Clrg_Txn_Srl_No" label="清算交易流水号" show-overflow-tooltip />
+      </el-table>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+
+export default {
+  name: 'ClearingDetails',
+  data() {
+    return {
+      modalOptions: {
+        closeOnClickModal: false,
+        width: '1100px',
+        title: '查看清算明细'
+      },
+      visible: false,
+      formData: {
+        Clrglist: []
+      }
+    }
+  },
+  methods: {
+    handleClose() {
+      this.visible = false
+    },
+    initList() {
+    },
+    handleOpen(params = {}) {
+      this.formData = Object.assign(this.$options.data().formData, params)
+      this.initList()
+      if (params.id) {
+        // this.getInfo(params.id)
+      }
+      this.visible = true
+    },
+    async getInfo(id) {
+      const loading = this.$loading({ text: '加载中' })
+      try {
+        const res = await xxx({ id })
+        this.formData = Object.assign(this.$options.data().formData, res.data, {
+          id: res.data.id || ''
+        })
+      } finally {
+        loading.close()
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.small-padding {
+	.cell {
+		padding-left: 5px;
+		padding-right: 5px;
+	}
+}
+
+.fixed-width {
+	.el-button--mini {
+		padding: 7px 10px;
+	}
+}
+</style>
+

src/views/finance/withdrawal/components/DetailModal.vue

@@ -20,12 +20,25 @@
         <el-descriptions-item label="提现金额：">
           {{ formData.withdrawalMoney }}
         </el-descriptions-item>
+        <el-descriptions-item label="处理编号：">
+          {{ formData.handleSn }}
+        </el-descriptions-item>
         <el-descriptions-item label="申请时间：">
           {{ formData.applyTime }}
         </el-descriptions-item>
         <el-descriptions-item v-if="formData.handleTime" label="处理时间：">
           {{ formData.handleTime }}
         </el-descriptions-item>
+        <el-descriptions-item label="审核状态">
+          <div>
+            <span v-if="formData.state === 0">待处理</span>
+            <span v-else-if="formData.state === 1">已处理</span>
+            <span v-else-if="formData.state === 2">通过</span>
+            <span v-else-if="formData.state === 3">拒绝</span>
+            <span v-else-if="formData.state === 4">待确认</span>
+            <span v-else>--</span>
+          </div>
+        </el-descriptions-item>
         <el-descriptions-item label="备注：">
           {{ formData.cause || '--' }}
         </el-descriptions-item>
@@ -123,6 +136,7 @@ export default {
         bankCard: '',
         collectionName: '',
         withdrawalMoney: '',
+        handleSn: '',
         applyTime: '',
         handleTime: '',
         state: '',
@@ -158,6 +172,7 @@ export default {
           bankCard: res.data.bankCard || '',
           collectionName: res.data.collectionName || '',
           withdrawalMoney: res.data.withdrawalMoney || 0,
+          handleSn: res.data.handleSn || '',
           applyTime: res.data.applyTime || '',
           handleTime: res.data.handleTime || '',
           state: res.data.state || 0,

src/views/finance/withdrawal/components/LedgerInformation.vue

@@ -6,8 +6,10 @@
   >
     <div>
       <div style="display: flex;justify-content: flex-end;padding: 0 0 10px;">
+        <!-- v-if="formData.relatedOrders[orderSn] && formData.relatedOrders[orderSn].some(i => i.cerePayLog.Sub_Acc_Stcd === '01')" -->
         <el-button
-          v-if="formData.relatedOrders[orderSn] && formData.relatedOrders[orderSn].some(i => i.cerePayLog.Sub_Acc_Stcd === '01')"
+          v-if="formData.relatedOrders[orderSn] &&
+            (formData.relatedOrders[orderSn].some(i => ['0', '3'].includes(i.cerePayLog.hsbSplitState)) || formData.relatedOrders[orderSn].some(i => i.cerePayLog.Sub_Acc_Stcd === '01'))"
           type="danger" size="medium"
           @click="handleConfirmSn()"
         >
@@ -21,8 +23,17 @@
           v-bind="{ stripe: true, size: 'small', border: true, fit: true, highlightCurrentRow: true }"
         >
           <el-table-column align="center" min-width="80" prop="orderId" label="订单ID" />
+          <el-table-column align="center" min-width="120" label="分账处理状态" prop="cerePayLog.hsbSplitState">
+            <template slot-scope="{ row }">
+              <span v-if="row.cerePayLog.hsbSplitState === '0'">未分账</span>
+              <span v-else-if="row.cerePayLog.hsbSplitState === '1'">分账中</span>
+              <span v-else-if="row.cerePayLog.hsbSplitState === '2'">已分账</span>
+              <span v-else-if="row.cerePayLog.hsbSplitState === '3'">分账失败</span>
+              <span v-else>--</span>
+            </template>
+          </el-table-column>
           <el-table-column align="center" min-width="100" prop="cerePayLog.transactionId" label="三方交易流水号" show-overflow-tooltip />
-          <el-table-column align="center" min-width="120" label="分账处理状态" prop="cerePayLog.Sub_Acc_Stcd">
+          <el-table-column align="center" min-width="120" label="分账指令发送状态" prop="cerePayLog.Sub_Acc_Stcd">
             <template slot-scope="{ row }">
               <span v-if="row.cerePayLog.Sub_Acc_Stcd === '00'">成功</span>
               <span v-else-if="row.cerePayLog.Sub_Acc_Stcd === '01'">失败</span>
@@ -30,17 +41,34 @@
             </template>
           </el-table-column>
           <el-table-column align="center" min-width="100" prop="cerePayLog.Err_Inf" label="错误信息" show-overflow-tooltip />
+          <el-table-column label="操作" width="140" fixed="right" class-name="small-padding fixed-width">
+            <template slot-scope="{ row }">
+              <el-button
+                v-if="row.cerePayLog.Clrglist && row.cerePayLog.Clrglist.length"
+                type="warning" size="mini" @click="$refs.ClearingDetails && $refs.ClearingDetails.handleOpen(row.cerePayLog)"
+              >
+                清算明细列表
+              </el-button>
+            </template>
+          </el-table-column>
         </el-table>
       </div>
+
+      <!-- 清算明细 -->
+      <ClearingDetails ref="ClearingDetails" />
     </div>
   </el-dialog>
 </template>
 
 <script>
+import ClearingDetails from './ClearingDetails'
 import { getWithdrawalHsbOrderDistribution, updateWithdrawalTryConfirmSn } from '@/api/withdrawal'
 
 export default {
   name: 'LedgerInformation',
+  components: {
+    ClearingDetails
+  },
   data() {
     return {
       modalOptions: {
@@ -85,6 +113,7 @@ export default {
           hsbSplitState: '',
           hsbHandlingFee: ''
         }, item.cerePayLog || {}, {
+          Clrglist: [],
           Sign_Inf: '',
           Rsp_Inf: '',
           Svc_Rsp_Cd: '',
@@ -100,19 +129,22 @@ export default {
       const loading = this.$loading({ text: '加载中' })
       try {
         for (let index = 0; index < this.formData.relatedOrders[this.orderSn].length; index++) {
-          await getWithdrawalHsbOrderDistribution({
-            transactionId: this.formData.relatedOrders[this.orderSn][index].cerePayLog.transactionId
-          }).then((res) => {
-            this.formData.relatedOrders[this.orderSn][index].cerePayLog.Sign_Inf = res.data.Sign_Inf
-            this.formData.relatedOrders[this.orderSn][index].cerePayLog.Rsp_Inf = res.data.Rsp_Inf
-            this.formData.relatedOrders[this.orderSn][index].cerePayLog.Svc_Rsp_Cd = res.data.Svc_Rsp_Cd
-            this.formData.relatedOrders[this.orderSn][index].cerePayLog.Svc_Rsp_St = res.data.Svc_Rsp_St
-            this.formData.relatedOrders[this.orderSn][index].cerePayLog.Py_Trn_No = res.data.Py_Trn_No
-            this.formData.relatedOrders[this.orderSn][index].cerePayLog.Sub_Acc_Stcd = res.data.Sub_Acc_Stcd
-            this.formData.relatedOrders[this.orderSn][index].cerePayLog.Ittparty_Tms = res.data.Ittparty_Tms
-            this.formData.relatedOrders[this.orderSn][index].cerePayLog.Ittparty_Jrnl_No = res.data.Ittparty_Jrnl_No
-            this.formData.relatedOrders[this.orderSn][index].cerePayLog.Err_Inf = res.data.Err_Inf
-          })
+          if (['1', '2'].includes(this.formData.relatedOrders[this.orderSn][index].cerePayLog.hsbSplitState)) {
+            await getWithdrawalHsbOrderDistribution({
+              transactionId: this.formData.relatedOrders[this.orderSn][index].cerePayLog.transactionId
+            }).then((res) => {
+              this.formData.relatedOrders[this.orderSn][index].cerePayLog.Clrglist = res.data.Clrglist || []
+              this.formData.relatedOrders[this.orderSn][index].cerePayLog.Sign_Inf = res.data.Sign_Inf
+              this.formData.relatedOrders[this.orderSn][index].cerePayLog.Rsp_Inf = res.data.Rsp_Inf
+              this.formData.relatedOrders[this.orderSn][index].cerePayLog.Svc_Rsp_Cd = res.data.Svc_Rsp_Cd
+              this.formData.relatedOrders[this.orderSn][index].cerePayLog.Svc_Rsp_St = res.data.Svc_Rsp_St
+              this.formData.relatedOrders[this.orderSn][index].cerePayLog.Py_Trn_No = res.data.Py_Trn_No
+              this.formData.relatedOrders[this.orderSn][index].cerePayLog.Sub_Acc_Stcd = res.data.Sub_Acc_Stcd
+              this.formData.relatedOrders[this.orderSn][index].cerePayLog.Ittparty_Tms = res.data.Ittparty_Tms
+              this.formData.relatedOrders[this.orderSn][index].cerePayLog.Ittparty_Jrnl_No = res.data.Ittparty_Jrnl_No
+              this.formData.relatedOrders[this.orderSn][index].cerePayLog.Err_Inf = res.data.Err_Inf
+            })
+          }
         }
         console.log(this.formData.relatedOrders[this.orderSn])
       } finally {
@@ -143,7 +175,7 @@ export default {
     handleConfirmSn() {
       this.$confirm('确定尝试三方订单确认？', '确认收货')
         .then(async () => {
-          await updateWithdrawalTryConfirmSn({ sn: this.orderSn })
+          await updateWithdrawalTryConfirmSn({ settlementSn: this.orderSn })
           this.$message({ message: '操作成功！', type: 'success' })
           this.$emit('success')
           this.visible = false
@@ -167,5 +199,18 @@ export default {
 		padding: 7px 10px;
 	}
 }
+
+.small-padding {
+	.cell {
+		padding-left: 5px;
+		padding-right: 5px;
+	}
+}
+
+.fixed-width {
+	.el-button--mini {
+		padding: 7px 10px;
+	}
+}
 </style>
 

src/views/finance/withdrawal/components/WithdrawalProcessing.vue

@@ -23,15 +23,49 @@
         <el-descriptions-item label="提现金额：">
           {{ formData.withdrawalMoney }}
         </el-descriptions-item>
+        <el-descriptions-item label="处理编号：">
+          {{ formData.handleSn }}
+        </el-descriptions-item>
         <el-descriptions-item label="申请时间：">
           {{ formData.applyTime }}
         </el-descriptions-item>
         <el-descriptions-item v-if="formData.handleTime" label="处理时间：">
           {{ formData.handleTime }}
         </el-descriptions-item>
+        <el-descriptions-item label="审核状态">
+          <div>
+            <span v-if="formData.state === 0">待处理</span>
+            <span v-else-if="formData.state === 1">已处理</span>
+            <span v-else-if="formData.state === 2">通过</span>
+            <span v-else-if="formData.state === 3">拒绝</span>
+            <span v-else-if="formData.state === 4">待确认</span>
+            <span v-else>--</span>
+          </div>
+        </el-descriptions-item>
+        <el-descriptions-item label="备注：">
+          {{ formData.cause || '--' }}
+        </el-descriptions-item>
+        <el-descriptions-item label="惠市宝订单的分账状态：">
+          <div>
+            <span v-if="formData.summaryHsbSplitState === 0">未分账</span>
+            <span v-else-if="formData.summaryHsbSplitState === 1">无需分账</span>
+            <span v-else-if="formData.summaryHsbSplitState === 2">部分分账</span>
+            <span v-else-if="formData.summaryHsbSplitState === 3">已分账</span>
+            <span v-else>--</span>
+          </div>
+        </el-descriptions-item>
+        <el-descriptions-item label="惠市宝已分账金额：">
+          {{ formData.summaryHsbSplitedAmount }}
+        </el-descriptions-item>
+        <el-descriptions-item label="惠市宝剩余分账金额：">
+          {{ formData.summaryHsbSplitRemainAmount }}
+        </el-descriptions-item>
+        <el-descriptions-item label="非惠市宝订单的相关提现金额：">
+          {{ formData.summaryNotHsbAmount }}
+        </el-descriptions-item>
       </el-descriptions>
     </div>
-    <div style="color: red;font-size: 16px;text-align: center;">* 请确认您已转账成功，再点击确认</div>
+    <div style="color: red;font-size: 16px;text-align: center;">* 请确认您已转账成功，再点击确认。说明：分账金额代表已打款，T+1到账</div>
     <el-input v-show="formData.state == 3" v-model="formData.cause" type="textarea" autosize placeholder="请输入拒绝打款理由">
     </el-input>
     <div v-show="formData.state == 2" style="margin-top: 30px;">
@@ -73,11 +107,16 @@ export default {
         bankCard: '',
         collectionName: '',
         withdrawalMoney: '',
+        handleSn: '',
         applyTime: '',
         handleTime: '',
         state: '',
         type: '', // 支付方式选择
-        cause: '' // 拒绝理由
+        cause: '', // 拒绝理由
+        summaryHsbSplitState: '',
+        summaryHsbSplitedAmount: '',
+        summaryHsbSplitRemainAmount: '',
+        summaryNotHsbAmount: ''
       },
       formRules: {
       }
@@ -110,10 +149,16 @@ export default {
           bankCard: res.data.bankCard || '',
           collectionName: res.data.collectionName || '',
           withdrawalMoney: res.data.withdrawalMoney || 0,
+          handleSn: res.data.handleSn || '',
           applyTime: res.data.applyTime || '',
           handleTime: res.data.handleTime || '',
           state: res.data.state || 0,
-          type: res.data.type || ''
+          type: res.data.type || '',
+          cause: res.data.cause || '',
+          summaryHsbSplitState: res.data.summaryHsbSplitState || '',
+          summaryHsbSplitedAmount: res.data.summaryHsbSplitedAmount || '',
+          summaryHsbSplitRemainAmount: res.data.summaryHsbSplitRemainAmount || '',
+          summaryNotHsbAmount: res.data.summaryNotHsbAmount || ''
         })
         this.$nextTick(() => {
           this.$refs.formData && this.$refs.formData.validate()

src/views/finance/withdrawal/index.vue

@@ -24,7 +24,7 @@
         <el-option label="已处理" value="1" />
         <el-option label="通过" value="2" />
         <el-option label="拒绝" value="3" />
-        <el-option label="打款失败" value="4" />
+        <el-option label="待确认" value="4" />
       </el-select>
       <el-button
         size="mini" class="filter-item" type="primary" icon="el-icon-search"
@@ -53,7 +53,7 @@
             <el-tag v-else-if="row.state === 1" effect="plain" type="success">已处理</el-tag>
             <el-tag v-else-if="row.state === 2" effect="plain">通过</el-tag>
             <el-tag v-else-if="row.state === 3" effect="plain" type="warning">拒绝</el-tag>
-            <el-tag v-else-if="row.state === 4" effect="plain" type="danger">打款失败</el-tag>
+            <el-tag v-else-if="row.state === 4" effect="plain" type="danger">待确认</el-tag>
             <span v-else>--</span>
           </template>
         </el-table-column>
@@ -66,6 +66,9 @@
             <el-button v-if="(row.state == 0) || (row.state == 2)" size="mini" @click="handleResolve(row)">
               处理
             </el-button>
+            <el-button v-if="row.state == 4" type="text" @click="handleConfirmTong(row)">
+              通联确认
+            </el-button>
           </template>
         </el-table-column>
       </el-table>
@@ -91,7 +94,7 @@
 
 import WithdrawalProcessing from './components/WithdrawalProcessing'
 import DetailModal from './components/DetailModal'
-import { withdrawalGetAll } from '@/api/withdrawal'
+import { withdrawalGetAll, updateWithdrawalByAllinpay } from '@/api/withdrawal'
 export default {
   name: 'Withdrawal',
   components: {
@@ -140,6 +143,15 @@ export default {
     },
     handleResolve(row) {
       this.$refs.WithdrawalProcessing && this.$refs.WithdrawalProcessing.handleOpen(row)
+    },
+    handleConfirmTong(row) {
+      this.$confirm('确定此项通联确认？')
+        .then(async () => {
+          await updateWithdrawalByAllinpay({ handleSn: row.handleSn, withdrawalId: row.withdrawalId })
+          this.$message({ message: '操作成功！', type: 'success' })
+          this.handleSearch()
+        })
+        .catch(() => {})
     }
   }
 }

src/views/relationshipChainManagement/relationshipLevel/index.vue

@@ -15,10 +15,10 @@
         <el-table-column align="center" prop="levelName" label="等级名称" />
         <el-table-column align="center" prop="levelNum" label="等级编号" />
         <el-table-column align="center" label="等级图标" prop="levelLogo">
-          <template slot-scope="scope">
+          <template slot-scope="{ row }">
             <el-image
-              v-if="scope.row.levelLogo" :src="scope.row.levelLogo" style="width:40px;height:40px;" fit="cover"
-              :preview-src-list="[ scope.row.levelLogo ]"
+              v-if="row.levelLogo" :src="row.levelLogo" style="width:40px;height:40px;" fit="cover"
+              :preview-src-list="[ row.levelLogo ]"
             />
             <span v-else>--</span>
           </template>
@@ -107,16 +107,16 @@
           </el-form-item>
           <!-- <el-form-item label="是否开启自购分佣" prop="ifSelf">
             <el-radio-group v-model="formData.ifSelf">
-              <el-radio :label="1">是</el-radio>
-              <el-radio :label="0">否</el-radio>
+            <el-radio :label="1">是</el-radio>
+            <el-radio :label="0">否</el-radio>
             </el-radio-group>
-          </el-form-item>
-          <el-form-item label="是否勾选累计消费金额" prop="ifMoney">
+            </el-form-item>
+            <el-form-item label="是否勾选累计消费金额" prop="ifMoney">
             <el-radio-group v-model="formData.ifMoney">
-              <el-radio :label="1">是</el-radio>
-              <el-radio :label="0">否</el-radio>
+            <el-radio :label="1">是</el-radio>
+            <el-radio :label="0">否</el-radio>
             </el-radio-group>
-          </el-form-item> -->
+            </el-form-item> -->
           <el-form-item label="是否购买指定商品" prop="ifProduct">
             <el-radio-group v-model="formData.ifProduct">
               <el-radio :label="1">是</el-radio>
@@ -130,75 +130,80 @@
               <el-radio :label="1">是</el-radio>
               <el-radio :label="0">否</el-radio>
             </el-radio-group>
-            <el-input size="small" style="width: 260px;margin-left: 20px;" v-if="formData.ifMoney == 1" v-model="formData.conditionInvitation" type="number" placeholder="请输入满足升级条件所需要的总人数" />
+            <el-input v-if="formData.ifMoney == 1" v-model="formData.conditionInvitation" size="small" style="width: 260px;margin-left: 20px;" type="number" placeholder="请输入满足升级条件所需要的总人数" />
           </el-form-item>
           <el-form-item label="是否勾选团长客户" prop="ifCustomer">
             <el-radio-group v-model="formData.ifCustomer">
               <el-radio :label="1">是</el-radio>
               <el-radio :label="0">否</el-radio>
             </el-radio-group>
-             <el-input size="small" style="width: 260px;margin-left: 20px;" v-if="formData.ifCustomer == 1" v-model="formData.conditionCustomer" type="number" placeholder="满足升级条件的团长数" />
+            <el-input v-if="formData.ifCustomer == 1" v-model="formData.conditionCustomer" size="small" style="width: 260px;margin-left: 20px;" type="number" placeholder="满足升级条件的团长数" />
           </el-form-item>
           <el-form-item label="累计分销金额" prop="conditionMoney">
-            <el-input style="width: 300px" v-model="formData.conditionMoney" type="number" placeholder="请输入累计分销金额" />
+            <el-input v-model="formData.conditionMoney" style="width: 300px" type="number" placeholder="请输入累计分销金额" />
           </el-form-item>
           <!-- <el-form-item label="邀请下级满人数" prop="conditionInvitation">
             <el-input v-model="formData.conditionInvitation" type="number" placeholder="请输入邀请下级满人数" />
-          </el-form-item> -->
+            </el-form-item> -->
           <!-- <el-form-item label="指定商品" prop="conditionProduct">
             <el-input v-model="formData.conditionProduct" placeholder="请输入指定商品（逗号隔开）" />
-          </el-form-item> -->
+            </el-form-item> -->
           <!-- <el-form-item label="商家ID" prop="shopId">
             <el-input v-model="formData.shopId" type="number" placeholder="请输入商家ID" />
-          </el-form-item>
-          <el-form-item label="平台ID" prop="adminId">
+            </el-form-item>
+            <el-form-item label="平台ID" prop="adminId">
             <el-input v-model="formData.adminId" type="number" placeholder="请输入平台ID" />
-          </el-form-item> -->
+            </el-form-item> -->
           <el-form-item label="分佣形式配置" prop="proportion">
-              <el-radio-group v-model="formData.proportion">
-                <el-radio :label="1">比例</el-radio>
-                <el-radio :label="2">金额</el-radio>
-              </el-radio-group>
+            <el-radio-group v-model="formData.proportion">
+              <el-radio :label="1">比例</el-radio>
+              <el-radio :label="2">金额</el-radio>
+            </el-radio-group>
             <!-- <el-input v-model="formData.proportion" type="number" placeholder="请输入分佣金额" /> -->
           </el-form-item>
           <template v-if="formData.proportion == 1">
             <el-form-item label="直接分佣比例 (%)" prop="directProportion">
-              <el-input-number :min="0" :max="99" v-model.number="formData.directProportion"></el-input-number>
+              <el-input-number v-model.number="formData.directProportion" :min="0" :max="99"></el-input-number>
             </el-form-item>
             <el-form-item label="间接分佣比例 (%)" prop="indirectProportion">
-              <el-input-number :min="0" :max="99" v-model.number="formData.indirectProportion"></el-input-number>
+              <el-input-number v-model.number="formData.indirectProportion" :min="0" :max="99"></el-input-number>
               <!-- <el-input v-model="formData.indirectProportion" type="number" placeholder="请输入间接分佣金额（整数，最大99）" /> -->
             </el-form-item>
           </template>
-           <template v-if="formData.proportion == 2">
-                <!-- <div style="display: flex;"> -->
-                  <el-form-item label="直接分佣金额" prop="directNum">
-                    <el-input style="width: 300px" v-model.number="formData.directNum" type="number" placeholder="请输入直接分佣金额" />
-                  </el-form-item>
-                  <el-form-item label="间接分佣金额" prop="indirectNum">
-                    <el-input style="width: 300px" v-model.number="formData.indirectNum" type="number" placeholder="请输入间接分佣金额" />
-                  </el-form-item>
-                <!-- </div> -->
+          <template v-if="formData.proportion == 2">
+            <!-- <div style="display: flex;"> -->
+            <el-form-item label="直接分佣金额" prop="directNum">
+              <el-input v-model.number="formData.directNum" style="width: 300px" type="number" placeholder="请输入直接分佣金额" />
+            </el-form-item>
+            <el-form-item label="间接分佣金额" prop="indirectNum">
+              <el-input v-model.number="formData.indirectNum" style="width: 300px" type="number" placeholder="请输入间接分佣金额" />
+            </el-form-item>
+            <!-- </div> -->
           </template>
           <el-form-item label="区域ID" prop="manageArea">
-            <el-cascader :props="areaData" ref="cascaderRef"
-                    @change="handleCascaderChange"></el-cascader>
+            <el-cascader
+              ref="cascaderRef" :props="areaData"
+              @change="handleCascaderChange"
+            ></el-cascader>
             <!-- <el-input v-model="formData.manageArea" type="number" placeholder="请选择区域ID" /> -->
           </el-form-item>
         </el-form>
       </div>
-      <span slot="footer" class="dialog-footer">
-        <el-button @click="dialogFormVisible = false">取 消</el-button>
-        <el-button v-if="dialogStatus == 'create'" type="primary" @click="createData">确定</el-button>
-        <el-button v-if="dialogStatus == 'update'" type="primary" @click="updateData">确定</el-button>
-      </span>
+      <template #footer>
+        <span class="dialog-footer">
+          <el-button @click="dialogFormVisible = false">取 消</el-button>
+          <el-button v-if="dialogStatus == 'create'" type="primary" @click="createData">确定</el-button>
+          <el-button v-if="dialogStatus == 'update'" type="primary" @click="updateData">确定</el-button>
+        </span>
+      </template>
     </el-dialog>
     <el-drawer
       title="已选商品"
       :visible.sync="showAddShoping"
       :append-to-body="true"
       size="50%"
-      :before-close="() => showAddShoping = false">
+      :before-close="() => showAddShoping = false"
+    >
       <!-- <el-button style="margin-left: 20px" size="small" type="primary" @click="innerDrawer = true">添加商品</el-button> -->
       <div class="shopContainer">
         <el-table
@@ -227,24 +232,24 @@
         :before-close="() => innerDrawer = false"
         :visible.sync="innerDrawer">
         <el-table
-          ref="multipleTable" :data="shopList" border
-          :header-cell-style="{ background: '#EEF3FF', color: '#333333' }" tooltip-effect="dark" style="width: 100%"
-          max-height="620" @selection-change="handleSelectionChange"
+        ref="multipleTable" :data="shopList" border
+        :header-cell-style="{ background: '#EEF3FF', color: '#333333' }" tooltip-effect="dark" style="width: 100%"
+        max-height="620" @selection-change="handleSelectionChange"
         >
-          <el-table-column type="selection" width="40px" />
-          <el-table-column label="产品主图" width="100" align="center">
-            <template slot-scope="scope">
-              <img height="80" width="80" :src="scope.row.image" alt srcset>
-            </template>
-          </el-table-column>
-          <el-table-column prop="productName" label="产品名称" width="160" align="center" />
-          <el-table-column prop="originalPrice" label="价格（元）" align="center" show-overflow-tooltip />
-          <el-table-column prop="stockNumber" label="库存（件）" align="center" show-overflow-tooltip />
+        <el-table-column type="selection" width="40px" />
+        <el-table-column label="产品主图" width="100" align="center">
+        <template slot-scope="scope">
+        <img height="80" width="80" :src="scope.row.image" alt srcset>
+        </template>
+        </el-table-column>
+        <el-table-column prop="productName" label="产品名称" width="160" align="center" />
+        <el-table-column prop="originalPrice" label="价格（元）" align="center" show-overflow-tooltip />
+        <el-table-column prop="stockNumber" label="库存（件）" align="center" show-overflow-tooltip />
         </el-table>
         <div style="display: flex;justify-content: center;align-items: center;box-sizing: border-box;padding: 10px;">
-          <el-button type="primary">确定</el-button>
+        <el-button type="primary">确定</el-button>
         </div>
-      </el-drawer> -->
+        </el-drawer> -->
     </el-drawer>
   </div>
 </template>
@@ -272,14 +277,14 @@ export default {
         value: 'id',
         checkStrictly: true,
         lazyLoad(node, resolve) {
-          const { level, value } = node;
+          const { level, value } = node
           if (level === 0) {
-            getProvinceList().then(res => {
+            getProvinceList().then((res) => {
               resolve(res.data)
             })
           } else if (level != 0) {
-            getChildAreaList(value).then(res => {
-              resolve(res.data.map(item => {
+            getChildAreaList(value).then((res) => {
+              resolve(res.data.map((item) => {
                 item.leaf = level === 3
                 return item
               }))
@@ -336,11 +341,11 @@ export default {
       rules: {
         levelName: [ { required: true, message: '请输入等级名称', trigger: 'blur' } ],
         levelNum: [ { required: true, message: '请输等级编号', trigger: 'blur' } ],
-        levelLogo: [ { required: true, message: '请输入会员成长值', trigger: 'blur' }],
+        levelLogo: [ { required: true, message: '请输入会员成长值', trigger: 'blur' } ],
         directProportion: [ { required: true, message: '直接分佣比例不能为空或小于零', trigger: 'blur' } ],
         indirectProportion: [ { required: true, message: '间接分佣比例不能为空或小于零', trigger: 'blur' } ],
-        directNum: [ { required: true, message: '直接分佣金额不能为空或小于零', trigger: 'blur' }, { type: 'number', message: '金额必须为数字值'} ],
-        indirectNum: [ { required: true, message: '间接分佣金额不能为空或小于零', trigger: 'blur' }, { type: 'number', message: '金额必须为数字值'} ]
+        directNum: [{ required: true, message: '直接分佣金额不能为空或小于零', trigger: 'blur' }, { type: 'number', message: '金额必须为数字值' }],
+        indirectNum: [{ required: true, message: '间接分佣金额不能为空或小于零', trigger: 'blur' }, { type: 'number', message: '金额必须为数字值' }]
       }
     }
   },
@@ -359,8 +364,8 @@ export default {
       // console.log(res);
     },
     handleSelectionChange(val) {
-      console.log(val);
-      let arr = []
+      console.log(val)
+      const arr = []
       val.forEach((item, index) => {
         arr.push(item.productId)
       })
@@ -441,10 +446,10 @@ export default {
       //     this.formData = res.data
       //   })
       for (const key in this.formData) {
-          this.formData[key] = row[key]
+        this.formData[key] = row[key]
       }
       // this.formData.relationshipLevelId = row.relationshipLevelId
-      console.log(this.formData);
+      console.log(this.formData)
       this.dialogStatus = 'update'
       this.dialogFormVisible = true
     },
@@ -513,13 +518,13 @@ export default {
         }
       })
     },
-        // 获取省数据
+    // 获取省数据
     handleCascaderChange() {
       const checkedNode = this.$refs.cascaderRef.getCheckedNodes()
       // console.log(checkedNode);
       const nodeData = checkedNode[0].data
       this.formData.manageArea = nodeData.id
-    },
+    }
   }
 }
 </script>

src/views/renovation/commoditySystem/addCommodity.vue

@@ -1,277 +0,0 @@
-<template>
-  <el-dialog :close-on-click-modal="false" title="详情" width="74%" :visible.sync="visible">
-    <div>
-      <el-card class="box-card">
-        <span class="addTitle">商品详情</span>
-        <el-button type="success" class="btnList" @click="back">关闭</el-button>
-        <el-button
-          v-if="productItem.shelveState === 2" type="primary" class="btnList"
-          @click="examineShow(productData)"
-        >
-          审核
-        </el-button>
-      </el-card>
-      <el-card class="box-card">
-        <label>商品详情</label>
-        <div class="GoodBox">
-          <el-row class="detail-box">
-            <el-col :span="12">
-              <div>商品名称：{{ productItem.productName }}</div>
-              <div>商品卖点：{{ productItem.productBrief }}</div>
-              <div>
-                商品图片：
-                <div>
-                  <img
-                    v-for="(item, index) in productItem.images" :key="index" class="proImage" :src="item.imgPath"
-                    alt="" @click="handlePictureCardPreview(item)"
-                  >
-                </div>
-              </div>
-              <div>商品款式：</div>
-            </el-col>
-            <el-col :span="12">
-              <div>官方分类：{{ productItem.classifyName }}</div>
-              <div>商家分组：{{ productItem.shopGroupName }}</div>
-              <div>商家名称：{{ productItem.shopName }}</div>
-              <div>
-                商品状态：
-                <span v-if="productItem.shelveState == 0">已下架 </span>
-                <span v-if="productItem.shelveState == 1">已上架</span>
-                <span v-if="productItem.shelveState == 2">待审核</span>
-                <span v-if="productItem.shelveState == 3">审核失败</span>
-              </div>
-            </el-col>
-          </el-row>
-          <el-row class="detail-box">
-            <el-col :span="24">
-              <el-table
-                :data="productItem.skuList" style="width: 100%"
-                :header-cell-style="{ background: '#EEF3FF', color: '#333333' }"
-              >
-                <el-table-column v-for="(skuAttr, index) in skuAttrName" :key="index" :label="skuAttr.skuName">
-                  <template slot-scope="scope">
-                    {{
-                      scope.row.skuAttrCodeDTOList &&
-                        scope.row.skuAttrCodeDTOList[index]
-                        | attrValueFilter(productItem.skuAttrList)
-                    }}
-                  </template>
-                </el-table-column>
-                <el-table-column label="售价">
-                  <template slot-scope="scope">
-                    <el-input
-                      v-model="scope.row.price" maxlength="9" disabled
-                      oninput="value=value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')"
-                    />
-                  </template>
-                </el-table-column>
-                <el-table-column label="原价">
-                  <template slot-scope="scope">
-                    <el-input
-                      v-model="scope.row.originalPrice" maxlength="9" disabled
-                      oninput="value=value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')"
-                    />
-                  </template>
-                </el-table-column>
-                <el-table-column label="库存">
-                  <template slot-scope="scope">
-                    <el-input
-                      v-model="scope.row.stockNumber" maxlength="9" disabled
-                      oninput="value=value.replace(/[^\d]/g,'')"
-                    />
-                  </template>
-                </el-table-column>
-                <el-table-column label="重量(KG)">
-                  <template slot-scope="scope">
-                    <el-input
-                      v-model="scope.row.weight" maxlength="9" disabled
-                      oninput="value=value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')"
-                    />
-                  </template>
-                </el-table-column>
-                <el-table-column label="SKU">
-                  <template slot-scope="scope">
-                    <el-input v-model="scope.row.sku" maxlength="20" disabled />
-                  </template>
-                </el-table-column>
-              </el-table>
-            </el-col>
-          </el-row>
-        </div>
-      </el-card>
-
-      <el-card class="box-card">
-        <label>商品简介</label>
-        <!-- <Tinymce
-        ref="content"
-        v-model="productItem.productText"
-        class="tinymce-wrap"
-        :height="180"
-      /> -->
-        <br>
-        <br>
-        <div v-html="productItem.productText" />
-      </el-card>
-
-      <el-dialog :visible.sync="dialogVisible" append-to-body class="check-image-dialog" title="查看图片" center="center">
-        <div class="img">
-          <img width="80%" height="80%" :src="dialogImageUrl" alt>
-        </div>
-      </el-dialog>
-    </div>
-  </el-dialog>
-</template>
-
-<script>
-// import Tinymce from '@/components/Tinymce';
-import { getProductById } from '@/api/commodity'
-// import { uploadUrl } from '@/utils/request';
-// import StyleInformation from './addComponent';
-export default {
-  name: 'AddCommodity',
-  components: {
-    // Tinymce,
-    // StyleInformation,
-  },
-  filters: {
-    attrValueFilter(map, list) {
-      const hasChilds =
-        list &&
-        list.filter((skuAttr) => {
-          const hasChild = skuAttr.values.some((attr) => attr.skuValue)
-          return skuAttr.skuName && hasChild
-        })
-      if (!map) {
-        return ''
-      }
-      const { code, valueCode } = map
-      let codeStr = ''
-      hasChilds.map((item) => {
-        const { values } = item
-        values &&
-          values.some((attr) => {
-            const isSome = item.code === code && attr.valueCode === valueCode
-            if (isSome) {
-              codeStr = attr.skuValue
-            }
-            return isSome
-          })
-      })
-      return codeStr
-    }
-  },
-  props: {
-    examineShow: {
-      type: Function,
-      default: null
-    }
-  },
-  data() {
-    return {
-      visible: false,
-      dialogVisible: false,
-      dialogImageUrl: '',
-      productItem: {},
-      productData: {
-        productId: 0,
-        isDetail: true
-      }
-    }
-  },
-  computed: {
-    skuAttrName() {
-      return (
-        this.productItem.skuAttrList &&
-        this.productItem.skuAttrList.filter((skuAttr) => {
-          const hasChilds = skuAttr.values.some((attr) => attr.skuValue)
-          return skuAttr.skuName && hasChilds
-        })
-      )
-    }
-  },
-  methods: {
-    show(id) {
-      this.visible = true
-      this.productData.productId = id
-      this.details()
-    },
-    handlePictureCardPreview(item) {
-      this.dialogImageUrl = item.imgPath
-      this.dialogVisible = true
-    },
-
-    // 返回
-    back() {
-      this.visible = false
-    },
-    // 获取详情
-    async details() {
-      const res = await getProductById({ productId: this.productData.productId })
-      console.log(res)
-      this.productItem = res.data
-      this.productItem.skuAttrList = res.data.names
-      this.productItem.skuAttrList.forEach((item) => {
-        var data = {}
-        var arr = Object.keys(data)
-        if (arr.length === 0) {
-          item.needImg = false
-        }
-      })
-      console.log(this.productItem.skuAttrList, 'skuAttrList')
-      this.productItem.skuList = this.productItem.skus
-    }
-  }
-}
-</script>
-
-<style scoped lang='scss'>
-@import url("../../../styles/elDialog.scss");
-
-.box-card {
-	margin: 20px;
-}
-
-.btnList {
-	float: right;
-	padding: 3px 0;
-	width: 100px;
-	height: 48px;
-	border-radius: 4px;
-	margin-right: 30px;
-}
-
-.addTitle {
-	font-size: 24px;
-	color: #333333;
-	line-height: 50px;
-}
-
-.GoodBox {
-	padding: 40px;
-
-	.detail-box {
-		div {
-			line-height: 60px;
-
-			.proImage {
-				margin-right: 20px;
-				width: 80px;
-				height: 80px;
-			}
-		}
-	}
-}
-
-.tinymce-wrap {
-	margin-top: 10px;
-}
-
-.check-image-dialog {
-	margin-top: -100px;
-	text-align: center;
-
-	.img {
-		text-align: center;
-	}
-}
-</style>

src/views/renovation/commoditySystem/addComponent.vue

@@ -1,618 +0,0 @@
-<template>
-  <div class="style-information-component">
-    <el-form-item label="商品图片" />
-    <div class="upload-wrap">
-      <el-upload
-        list-type="picture-card" :on-preview="handlePictureCardPreview" :on-remove="handleRemove"
-        :headers="headers" :data="dataObj" :file-list="form.imgs" :limit="20"
-        :on-success="handleImageSuccess"
-        :action="action"
-      >
-        <i slot="default" class="el-icon-plus" />
-        <div slot="file" slot-scope="{ file }">
-          <img class="el-upload-list__item-thumbnail" :src="file.imgPath">
-          <span class="el-upload-list__item-actions">
-            <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
-              <i class="el-icon-zoom-in" />
-            </span>
-            <span class="el-upload-list__item-delete" @click="handleRemove(file)">
-              <i class="el-icon-delete" />
-            </span>
-          </span>
-        </div>
-      </el-upload>
-    </div>
-    <el-form-item label="款式设置">
-      <el-radio-group v-model="form.attrStyle" @change="changeAttrStyle">
-        <el-radio :label="0">单款式</el-radio>
-        <el-radio :label="1">多款式</el-radio>
-      </el-radio-group>
-    </el-form-item>
-    <div class="style-container">
-      <div v-if="form.attrStyle === 0" class="single-style">
-        <el-table :data="skuList" style="width: 100%" :header-cell-style="{ background: '#EEF3FF', color: '#333333' }">
-          <el-table-column label="规格">
-            <template slot-scope="scope">
-              <el-input v-model="singleStyle.skuValue" :sss="scope" maxlength="40" />
-            </template>
-          </el-table-column>
-          <el-table-column label="售价">
-            <template slot-scope="scope">
-              <el-input
-                v-model="scope.row.price" maxlength="9"
-                oninput="value=value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')"
-              />
-            </template>
-          </el-table-column>
-          <el-table-column label="原价">
-            <template slot-scope="scope">
-              <el-input
-                v-model="scope.row.originalPrice" maxlength="9"
-                oninput="value=value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')"
-              />
-            </template>
-          </el-table-column>
-          <el-table-column label="库存">
-            <template slot-scope="scope">
-              <el-input v-model="scope.row.stockNumber" maxlength="9" oninput="value=value.replace(/[^\d]/g,'')" />
-            </template>
-          </el-table-column>
-          <el-table-column label="重量(KG)">
-            <template slot-scope="scope">
-              <el-input
-                v-model="scope.row.weight" maxlength="9"
-                oninput="value=value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')"
-              />
-            </template>
-          </el-table-column>
-          <el-table-column label="SKU">
-            <template slot-scope="scope">
-              <el-input v-model="scope.row.sku" maxlength="20" />
-            </template>
-          </el-table-column>
-        </el-table>
-      </div>
-      <div v-else class="multiple-styles">
-        <div v-for="(skuAttr, index) in form.skuAttrList" :key="index" class="sku-attr-list">
-          <el-form-item label="规格名">
-            <el-input v-model="skuAttr.skuName" maxlength="20" />
-            <el-checkbox v-if="index === 0" v-model="skuAttr.needImg" style="margin-left: 20px;">需要配图</el-checkbox>
-          </el-form-item>
-          <el-form-item label="规格值">
-            <div class="attr-value-list">
-              <div v-for="(sku, index1) in skuAttr.values" :key="index + '-' + index1" class="main-diagram m-8">
-                <el-input v-model="sku.skuValue" maxlength="10" />
-                <div v-if="skuAttr.needImg && index === 0" class="upload-wrap diagram-upload">
-                  <div class="span-wrap">
-                    <el-upload
-                      list-type="picture-card" :show-file-list="false" :on-preview="handlePictureCardPreview"
-                      :on-remove="handleRemove" :headers="headers" :data="dataObj" :file-list="[ sku ]"
-                      :multiple="false"
-                      :on-success="handleImageSuccess1" :action="action"
-                    >
-                      <i v-if="!sku.image" slot="trigger" class="el-icon-plus" />
-                      <div v-else class="attr-value-img">
-                        <img class="attr-thumbnail" :src="sku.image">
-                      </div>
-                    </el-upload>
-                    <div v-if="sku.image" class="attr-actions">
-                      <span class="attr-preview" @click="handlePictureCardPreview({ imgPath: sku.image })">
-                        <i class="el-icon-zoom-in" />
-                      </span>
-                      <span class="attr-delete" @click="handleRemove1(sku)">
-                        <i class="el-icon-delete" />
-                      </span>
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <el-button type="text" style="margin-left: 10px;" @click="addAttrValue(index)">添加</el-button>
-            </div>
-          </el-form-item>
-        </div>
-        <el-button class="add-attr-btn" type="primary" @click="addSkuAttrList">添加规格</el-button>
-        <el-table :data="skuList" style="width: 100%" :header-cell-style="{ background: '#EEF3FF', color: '#333333' }">
-          <el-table-column v-for="(skuAttr, index) in skuAttrName" :key="index" :label="skuAttr.skuName">
-            <template slot-scope="scope">
-              {{
-                scope.row.skuAttrCodeDTOList &&
-                  scope.row.skuAttrCodeDTOList[index]
-                  | attrValueFilter(form.skuAttrList)
-              }}
-            </template>
-          </el-table-column>
-          <el-table-column label="售价">
-            <template slot-scope="scope">
-              <el-input
-                v-model="scope.row.price" maxlength="9"
-                oninput="value=value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')"
-              />
-            </template>
-          </el-table-column>
-          <el-table-column label="原价">
-            <template slot-scope="scope">
-              <el-input
-                v-model="scope.row.originalPrice" maxlength="9"
-                oninput="value=value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')"
-              />
-            </template>
-          </el-table-column>
-          <el-table-column label="库存">
-            <template slot-scope="scope">
-              <el-input v-model="scope.row.stockNumber" maxlength="9" oninput="value=value.replace(/[^\d]/g,'')" />
-            </template>
-          </el-table-column>
-          <el-table-column label="重量(KG)">
-            <template slot-scope="scope">
-              <el-input
-                v-model="scope.row.weight" maxlength="9"
-                oninput="value=value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')"
-              />
-            </template>
-          </el-table-column>
-          <el-table-column label="SKU">
-            <template slot-scope="scope">
-              <el-input v-model="scope.row.sku" maxlength="20" />
-            </template>
-          </el-table-column>
-          <!-- <el-table-column label="操作">
-            <template slot-scope="scope">
-              <el-button type="text" @click="del(scope.row,scope.$index,scope)">删除</el-button>
-            </template>
-          </el-table-column>-->
-        </el-table>
-      </div>
-    </div>
-    <el-dialog :visible.sync="dialogVisible" class="check-image-dialog" title="查看图片" center="center">
-      <img width="100%" :src="dialogImageUrl" alt>
-    </el-dialog>
-  </div>
-</template>
-
-<script>
-import { uploadUrl } from '@/utils/request'
-export default {
-  filters: {
-    attrValueFilter(map, list) {
-      const hasChilds =
-        list &&
-        list.filter((skuAttr) => {
-          const hasChild = skuAttr.values.some((attr) => attr.skuValue)
-          return skuAttr.skuName && hasChild
-        })
-      if (!map) {
-        return ''
-      }
-      const { code, valueCode } = map
-      let codeStr = ''
-      hasChilds.map((item) => {
-        const { values } = item
-        values &&
-          values.some((attr) => {
-            const isSome = item.code === code && attr.valueCode === valueCode
-            if (isSome) {
-              codeStr = attr.skuValue
-            }
-            return isSome
-          })
-      })
-      return codeStr
-    }
-  },
-  props: {
-    form: {
-      type: Object,
-      default() {
-        return {}
-      }
-    }
-  },
-  data() {
-    return {
-      dialogImageUrl: '',
-      dialogVisible: false,
-      newform: this.form,
-      headers: {
-        Authorization: ''
-      },
-      action: uploadUrl,
-      dataObj: {
-        folderId: 1
-      },
-      fileList: []
-    }
-  },
-  computed: {
-    skuAttrName() {
-      return (
-        this.form.skuAttrList &&
-        this.form.skuAttrList.filter((skuAttr) => {
-          const hasChilds = skuAttr.values.some((attr) => attr.skuValue)
-          return skuAttr.skuName && hasChilds
-        })
-      )
-    },
-    singleStyle() {
-      if (this.form.skuAttrList && this.form.skuAttrList[0]) {
-        return this.form.skuAttrList && this.form.skuAttrList[0].values[0]
-      }
-      return {
-        skuValue: ''
-      }
-    },
-    skuList() {
-      if (this.form.attrStyle === 0) {
-        return this.form.skuList.slice(0, 1)
-      }
-      return this.form.skuList
-    }
-  },
-  watch: {
-    'form.skuAttrList': {
-      handler(newVal, oldVal) {
-        // 判断是否有规格值
-        const hasChilds =
-          this.form.skuAttrList &&
-          this.form.skuAttrList.filter((skuAttr) => {
-            const hasChild = skuAttr.values.some((attr) => attr.skuValue)
-            return skuAttr.skuName && hasChild
-          })
-        if (this.form.attrStyle === 1 && hasChilds.length) {
-          this.skuFormat()
-        }
-        // console.log(newVal);
-        // console.log(oldVal);
-      },
-      deep: true
-    },
-    'form.skuList': {
-      handler(newVal, oldVal) {
-        // console.log(newVal);
-        // console.log(oldVal);
-      },
-      deep: true
-    }
-  },
-  created() {
-    this.headers.tenant = 'MDAwMA=='
-  },
-  methods: {
-    // proving1(e) {
-    //   var keynum = window.event ? e.keyCode : e.which // 获取键盘码
-    //   // var keychar = String.fromCharCode(keynum) // 获取键盘码对应的字符
-    //   console.log(
-    //     e.key
-    //       .replace(/[^\d^\.]+/g, '')
-    //       .replace('.', '$#$')
-    //       .replace(/\./g, '')
-    //       .replace('$#$', '.')
-    //   )
-    //   console.log(keynum)
-    //   if (
-    //     e.key
-    //       .replace(/[^\d^\.]+/g, '')
-    //       .replace('.', '$#$')
-    //       .replace(/\./g, '')
-    //       .replace('$#$', '.') === '' &&
-    //     keynum !== 8
-    //   ) {
-    //     this.$message.warning('禁止输入中文或空')
-    //     e.target.value = ' '
-    //   }
-    // },
-    handleImageSuccess(response) {
-      const url = response.data.url
-      this.form.imgs.push({
-        imgPath: url
-      })
-    },
-    // 移除图片
-    handleRemove(file) {
-      const { imgPath } = file
-      this.form.imgs = this.form.imgs.filter((item) => item.imgPath !== imgPath)
-    },
-    handleRemove1(file) {
-      file.image = ''
-    },
-    handlePictureCardPreview(file) {
-      this.dialogImageUrl = file.imgPath
-      this.dialogVisible = true
-    },
-    handleImageSuccess1(response, file, fileList) {
-      const url = response.data.url
-      fileList[0].image = url
-    },
-    del(row, index, arr) {
-      console.log(row, index)
-      // this.form.skuList.splice(index, 1);
-      // console.log(this.form.skuAttrList);
-      // console.log(this.form.skuList);
-      console.log(arr)
-    },
-    //
-    changeAttrStyle(index) {
-      console.log(index)
-      console.log(this.form)
-      if (index === 0) {
-        this.form.skuAttrList = []
-      }
-    },
-    addSkuAttrList() {
-      this.form.skuAttrList.push({
-        code: '',
-        skuName: '',
-        values: [
-          {
-            skuValue: '',
-            valueCode: '',
-            image: '',
-            isDelete: 0,
-            sortOrder: 0
-          }
-        ],
-        isDelete: 0,
-        needImg: 0,
-        sortOrder: 0
-      })
-    },
-    addAttrValue(index) {
-      this.form.skuAttrList[index].values.push({
-        skuValue: '',
-        valueCode: '',
-        image: ''
-      })
-    },
-    skuFormat() {
-      const skuListArray = []
-      const result = {
-        isDelete: 0,
-        productId: '',
-        skuAttrCodeDTOList: [
-          {
-            code: '',
-            valueCode: ''
-          }
-        ],
-        sku: '',
-        skuImg: '',
-        price: 0,
-        originalPrice: 0,
-        stockNumber: 0,
-        weight: 0
-      }
-      const doExchange = (arr, depth) => {
-        const map = {
-          arr: []
-        }
-        for (var i = 0; i < arr[depth].length; i++) {
-          map.arr.push(arr[depth][i])
-          const { code, valueCode, attrId } = arr[depth][i]
-          result.skuAttrCodeDTOList[depth] = {
-            code,
-            valueCode,
-            attrId
-          }
-          if (depth !== arr.length - 1) {
-            doExchange(arr, depth + 1)
-          } else {
-            skuListArray.push(JSON.parse(JSON.stringify(result)))
-          }
-        }
-      }
-      // this.form.skuList  = skuListArray
-      // 获取规格值的所有组合
-      const values = []
-      this.form.skuAttrList.map((skuItem, index) => {
-        const attrList = []
-        skuItem.code = skuItem.code || 'attr_code_' + index
-        const { code } = skuItem
-        skuItem.values &&
-          skuItem.values.map((attrItem, index1) => {
-            attrItem.valueCode = skuItem.valueCode || code + '_value_' + index1
-            const skuId = attrItem.skuId
-            const attrId = attrItem.attrId
-            if (attrItem.skuValue) {
-              attrList.push({
-                skuId,
-                attrId,
-                code,
-                valueCode: attrItem.valueCode
-              })
-            }
-          })
-        if (attrList.length) {
-          values.push(attrList)
-        }
-      })
-      // 相互组合
-      if (values.length) {
-        doExchange(values, 0)
-      }
-      this.form.skuList = skuListArray.map((sku1) => {
-        const { skuAttrList, skuAttrCodeDTOList } = sku1
-        const skuAttrList1 = skuAttrCodeDTOList || skuAttrList
-        const skuMap = this.form.skuList.filter((sku2) => {
-          const skuAttrList2 = sku2.skuAttrList
-          sku2.skuAttrCodeDTOList = skuAttrList2
-          if (!skuAttrList2) return false
-          const ids = []
-          skuAttrList1.filter((item) => ids.push(item.id))
-          const result = skuAttrList2.every((item) => ids.indexOf(item.attrValueId) !== -1)
-          return result
-        })
-        let selectMap = sku1
-        if (skuMap && skuMap.length) {
-          selectMap = JSON.parse(JSON.stringify(skuMap[0]))
-          selectMap.skuAttrCodeDTOList = skuAttrCodeDTOList
-        }
-        return selectMap
-      })
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-@import url("../../../styles/elDialog.scss");
-
-.style-information-component {
-	min-height: 300px;
-	padding: 24px;
-	background-color: rgb(255, 255, 255);
-
-	.el-form-item {
-		margin-bottom: 10px;
-	}
-
-	.attr-value-list {
-		display: flex;
-		flex-wrap: wrap;
-
-		.main-diagram {
-			width: 180px;
-
-			.span-wrap {
-				position: relative;
-				display: inline-block;
-				margin-top: 10px;
-
-				.attr-actions {
-					line-height: 100px;
-					position: absolute;
-					width: 100%;
-					height: 100%;
-					left: 0;
-					top: 0;
-					cursor: default;
-					text-align: center;
-					color: #fff;
-					opacity: 0;
-					font-size: 20px;
-					background-color: rgba(0, 0, 0, 0.5);
-					-webkit-transition: opacity 0.3s;
-					transition: opacity 0.3s;
-					z-index: 1;
-
-					&:hover {
-						opacity: 1;
-
-						.attr-preview {
-							display: inline-block;
-						}
-
-						i {
-							color: #fff;
-							font-size: 20px;
-						}
-					}
-				}
-
-				.attr-preview {
-					display: none;
-					cursor: pointer;
-					font-size: 20px;
-					color: #fff;
-				}
-
-				.attr-delete {
-					margin-left: 15px;
-					color: #fff;
-				}
-			}
-
-			.attr-value-img {
-				width: 100%;
-				height: 100%;
-
-				img {
-					width: 100%;
-					height: 100%;
-					object-fit: contain;
-				}
-			}
-		}
-	}
-
-	.m-8 {
-		margin-right: 8px;
-	}
-
-	.upload-btn {
-		box-sizing: border-box;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		width: 100%;
-		height: 110px;
-		cursor: pointer;
-		border: 2px dashed #2e60f8;
-		border-radius: 2px;
-		background-color: #f8f9fb;
-		text-align: center;
-		font-size: 20px;
-		color: #2e60f8;
-
-		i {
-			color: #2e60f8;
-			font-size: 20px;
-		}
-
-		.upload-title {
-			margin-left: 10px;
-			font-size: 14px;
-		}
-	}
-
-	.upload-wrap {
-		margin-bottom: 25px;
-
-		.el-upload-list__item {
-			transition: none !important;
-		}
-
-		.el-upload,
-		.el-upload-list__item {
-			width: 100px;
-			height: 100px;
-			line-height: 100px;
-		}
-
-		.el-progress,
-		.el-progress-circle {
-			width: 80px !important;
-			height: 80px !important;
-		}
-	}
-
-	.sku-attr-list {
-		.el-input {
-			width: 180px;
-		}
-	}
-
-	.single-style {
-		.el-input {
-			max-width: 180px;
-		}
-	}
-
-	.add-attr-btn {
-		margin-bottom: 25px;
-	}
-
-	.check-image-dialog {
-		.el-dialog {
-			margin-top: 25px;
-
-			.el-dialog__body {
-				img {
-					max-width: 100%;
-					max-height: 100%;
-					height: 500px;
-					object-fit: contain;
-				}
-			}
-		}
-	}
-}
-</style>

src/views/renovation/commoditySystem/components/AddSelection.vue

@@ -0,0 +1,181 @@
+<template>
+  <el-dialog
+    :visible.sync="visible"
+    v-bind="modalOptions"
+    append-to-body
+  >
+    <el-form
+      ref="formData"
+      :model="formData"
+      :rules="formRules"
+      size="mini"
+      label-suffix=":"
+      label-width="150px"
+    >
+
+      <el-form-item label="商品ID" prop="productId">
+        <el-input
+          v-model="formData.productId" maxlength="20" placeholder="商品ID" disabled
+        />
+      </el-form-item>
+      <el-form-item label="商家Id" prop="productIdproductId">
+        <el-input
+          v-model="formData.productIdproductId" maxlength="20" placeholder="请输入商家id"
+        />
+      </el-form-item>
+      <!-- <el-form-item label="平台分类" prop="classifyId">
+        <el-select v-model="formData.classifyId" placeholder="请选择平台分类">
+        <el-option
+        v-for="item in classOptions" :key="item.classifyId" :label="item.classifyName"
+        :value="item.classifyId"
+        >
+        </el-option>
+        </el-select>
+        </el-form-item> -->
+      <el-form-item label="商家分组" prop="shopGroupId">
+        <el-cascader
+          v-model="formData.shopGroupArr" placeholder="请选择商家分组" :options="shopGroupList"
+          :props="{ checkStrictly: true, expandTrigger: 'hover', label: 'groupName', value: 'shopGroupId', children: 'childs' }"
+          clearable
+        />
+        <!-- <el-select v-model="formData.shopGroupId" placeholder="请选择">
+          <el-option v-for="item in shopGroup" :key="item.shopGroupId" :label="item.groupName"
+          :value="item.shopGroupId">
+          </el-option>
+          </el-select> -->
+      </el-form-item>
+      <el-form-item label="是否加入选品" prop="shelveState">
+        <el-radio-group v-model="formData.shelveState">
+          <el-radio :label="1">是</el-radio>
+          <el-radio :label="0">不是</el-radio>
+        </el-radio-group>
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <span class="dialog-footer">
+        <el-button size="mini" @click="handleClose">取 消</el-button>
+        <el-button type="primary" size="mini" @click="handleSubmit">确 定</el-button>
+      </span>
+    </template>
+  </el-dialog>
+</template>
+
+<script>
+import { commdityClassGetAll, commdityClassGetGroup, getProductById, addProductFixed } from '@/api/commodity'
+
+export default {
+  name: 'AddSelection',
+  components: {
+  },
+  data() {
+    return {
+      modalOptions: {
+        closeOnClickModal: false,
+        width: '620px',
+        title: ''
+      },
+      visible: false,
+      formData: {
+        productId: '',
+        productIdproductId: 186,
+        shopParentId: '',
+        shopGroupId: '',
+        shopGroupArr: [], // 非后端参数
+        shelveState: ''
+      },
+      formRules: {
+        productId: [
+          { required: true, message: '缺少商品ID' }
+        ],
+        productIdproductId: [
+          { required: true, message: '商家id不能为空' }
+        ],
+        shopGroupId: [
+          { required: true, message: '请选择商家分组' }
+        ],
+        shelveState: [
+          { required: true, message: '请选择是否加入选品' }
+        ]
+      },
+      classOptions: [],
+      shopGroupList: []
+    }
+  },
+  created() {
+    this.getAllClass()
+    this.getGroupSelect()
+  },
+  methods: {
+    handleClose() {
+      this.visible = false
+    },
+    //  获取商品类别
+    async getAllClass() {
+      const res = await commdityClassGetAll({ page: 1, pageSize: 9999 })
+      this.classOptions = res.data.list
+    },
+    // 商家分组查询
+    async getGroupSelect() {
+      const res = await commdityClassGetGroup({ search: '', page: 1, pageSize: 9999 })
+      this.shopGroupList = res.data.list
+    },
+    initList() {
+    },
+    handleOpen(params = {}) {
+      this.modalOptions.title = '加入选品'
+      this.formData.productId = params.productId
+      this.formData.shopGroupArr = []
+      // this.formData = Object.assign(this.$options.data().formData, params)
+      this.visible = true
+      this.initList()
+      if (params.productId) {
+        this.getInfo(params.productId)
+      }
+      this.$refs.formData && this.$refs.formData.resetFields()
+    },
+    async getInfo(id) {
+      const loading = this.$loading({ text: '加载中' })
+      try {
+        const res = await getProductById({ productId: id })
+        // this.formData = Object.assign(this.$options.data().formData, res.data, {
+        this.formData = Object.assign(this.$options.data().formData, this.formData, {
+          shopParentId: res.data.shopId || ''
+          // shopGroupId: res.data.shopGroupId || '',
+        })
+        this.$nextTick(() => {
+          this.$refs.formData && this.$refs.formData.validate()
+        })
+      } finally {
+        loading.close()
+      }
+    },
+    handleSubmit() {
+      this.$refs.formData.validate(async (valid) => {
+        if (valid) {
+          const loading = this.$loading({ text: '加载中' })
+          try {
+            const { shopGroupArr, ...otps } = this.formData
+            const params = {
+              ...otps,
+              shopGroupId: Array.isArray(shopGroupArr) && shopGroupArr.length ? shopGroupArr[shopGroupArr.length - 1] : ''
+            }
+            await addProductFixed(params)
+            loading.close()
+            this.$message({ message: `选品添加成功!`, type: 'success' })
+            this.$emit('success')
+            this.visible = false
+          } catch (e) {
+            loading.close()
+          } finally {
+            loading.close()
+          }
+        } else {
+          this.$message({ message: '请输入相关信息', type: 'warning' })
+          return false
+        }
+      })
+    }
+  }
+}
+</script>
+

src/views/renovation/commoditySystem/components/DetailModal.vue

@@ -0,0 +1,227 @@
+<template>
+  <el-dialog
+    :visible.sync="visible"
+    v-bind="modalOptions"
+    append-to-body
+  >
+    <el-form
+      ref="formData"
+      :model="formData"
+      size="mini"
+      label-position="left"
+      label-suffix=":"
+      label-width="200px"
+    >
+      <!-- 商品信息 -->
+      <div style="display: flex;padding-bottom: 14px;font-size: 16px;font-weight: bold;">
+        <div
+          style="width: 4px;height: 14px;margin-left: 6px;margin-right: 6px;background-color: #0519D4;border-radius: 2px;"
+        >
+        </div>
+        <div>商品详情</div>
+      </div>
+      <el-form-item label="商品名称" prop="productName">
+        {{ formData.productName || '--' }}
+      </el-form-item>
+      <el-form-item label="商品卖点" prop="productBrief">
+        {{ formData.productBrief || '--' }}
+      </el-form-item>
+      <el-form-item label="商品图片" prop="images">
+        <!-- 4机构证明材料，营业执照 -->
+        <div v-if="formData.images && formData.images.length">
+          <el-image
+            v-for="(item, index) in formData.images.map(i => i.imgPath)" :key="index" :src="item"
+            style="width:80px;height:80px;margin-right: 10px;" fit="cover"
+            :preview-src-list="formData.images.map(i => i.imgPath)"
+          />
+        </div>
+        <span v-else>--</span>
+      </el-form-item>
+      <el-form-item label="官方分类" prop="classifyName">
+        {{ formData.classifyName || '--' }}
+      </el-form-item>
+      <el-form-item label="商家分组" prop="shopGroupName">
+        {{ formData.shopGroupName || '--' }}
+      </el-form-item>
+      <el-form-item label="商家名称" prop="shopName">
+        {{ formData.shopName || '--' }}
+      </el-form-item>
+      <el-form-item label="商品状态" prop="shelveState">
+        <span v-if="formData.shelveState === 0">已下架</span>
+        <span v-else-if="formData.shelveState === 1">已上架</span>
+        <span v-else-if="formData.shelveState === 2">待审核</span>
+        <span v-else-if="formData.shelveState === 3">审核失败</span>
+        <span v-else>--</span>
+      </el-form-item>
+
+      <div style="display: flex;padding-bottom: 14px;font-size: 16px;font-weight: bold;">
+        <div
+          style="width: 4px;height: 14px;margin-left: 6px;margin-right: 6px;background-color: #0519D4;border-radius: 2px;"
+        >
+        </div>
+        <div>商品款式</div>
+      </div>
+      <el-row class="detail-box">
+        <el-col :span="24">
+          <el-table
+            :data="formData.skus" style="width: 100%"
+            :header-cell-style="{ background: '#EEF3FF', color: '#333333' }"
+          >
+            <el-table-column v-for="(skuAttr, index) in formData.names.filter(i => i.skuName && i.values.some((attr) => attr.skuValue))" :key="index" :label="skuAttr.skuName">
+              <template slot-scope="scope">
+                <div v-if="scope.row.skuAttrCodeDTOList && scope.row.skuAttrCodeDTOList[index]">
+                  {{ handleAttrValue(scope.row.skuAttrCodeDTOList && scope.row.skuAttrCodeDTOList[index]) }}
+                </div>
+              </template>
+            </el-table-column>
+            <el-table-column label="售价">
+              <template slot-scope="scope">
+                <el-input
+                  v-model="scope.row.price" maxlength="9" disabled
+                  oninput="value=value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')"
+                />
+              </template>
+            </el-table-column>
+            <el-table-column label="原价">
+              <template slot-scope="scope">
+                <el-input
+                  v-model="scope.row.originalPrice" maxlength="9" disabled
+                  oninput="value=value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')"
+                />
+              </template>
+            </el-table-column>
+            <el-table-column label="库存">
+              <template slot-scope="scope">
+                <el-input
+                  v-model="scope.row.stockNumber" maxlength="9" disabled
+                  oninput="value=value.replace(/[^\d]/g,'')"
+                />
+              </template>
+            </el-table-column>
+            <el-table-column label="重量(KG)">
+              <template slot-scope="scope">
+                <el-input
+                  v-model="scope.row.weight" maxlength="9" disabled
+                  oninput="value=value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')"
+                />
+              </template>
+            </el-table-column>
+            <el-table-column label="SKU">
+              <template slot-scope="scope">
+                <el-input v-model="scope.row.sku" maxlength="20" disabled />
+              </template>
+            </el-table-column>
+          </el-table>
+        </el-col>
+      </el-row>
+
+      <el-card>
+        <div style="display: flex;padding-bottom: 14px;font-size: 16px;font-weight: bold;">
+          <div
+            style="width: 4px;height: 14px;margin-left: 6px;margin-right: 6px;background-color: #0519D4;border-radius: 2px;"
+          >
+          </div>
+          <div>商品简介</div>
+        </div>
+        <div v-html="formData.productText" />
+      </el-card>
+    </el-form>
+  </el-dialog>
+</template>
+
+<script>
+import { getProductById } from '@/api/commodity'
+
+export default {
+  name: 'DetailModal',
+  data() {
+    return {
+      modalOptions: {
+        closeOnClickModal: false,
+        width: '800px',
+        title: '商品详情'
+      },
+      visible: false,
+      formData: {
+        productId: '',
+        productName: '',
+        productBrief: '',
+        images: '',
+        classifyName: '',
+        shopGroupName: '',
+        shopName: '',
+        shelveState: '',
+        productText: '',
+        skus: [],
+        names: []
+      }
+    }
+  },
+  methods: {
+    handleClose() {
+      this.visible = false
+    },
+    handleOpen(params = {}) {
+      this.formData = Object.assign(this.$options.data().formData, params)
+      if (params.productId) {
+        this.getInfo(params.productId)
+      }
+      this.visible = true
+    },
+    async getInfo(id) {
+      const loading = this.$loading({ text: '加载中' })
+      try {
+        const res = await getProductById({ productId: id })
+        this.formData = Object.assign(this.$options.data().formData, res.data, {
+          productId: res.data.productId || '',
+          productName: res.data.productName || '',
+          productBrief: res.data.productBrief || '',
+          images: res.data.images || [],
+          classifyName: res.data.classifyName || '',
+          shopGroupName: res.data.shopGroupName || '',
+          shopName: res.data.shopName || '',
+          productText: res.data.productText || '',
+          shelveState: res.data.shelveState,
+          skus: res.data.skus || [],
+          names: res.data.names || []
+        })
+      } finally {
+        loading.close()
+      }
+    },
+    handleAttrValue(map) {
+      const hasChilds =
+        this.formData.names &&
+        this.formData.names.filter((skuAttr) => {
+          const hasChild = skuAttr.values.some((attr) => attr.skuValue)
+          return skuAttr.skuName && hasChild
+        })
+      if (!map) {
+        return ''
+      }
+      const { code, valueCode } = map
+      let codeStr = ''
+      hasChilds.map((item) => {
+        const { values } = item
+        values &&
+          values.some((attr) => {
+            const isSome = item.code === code && attr.valueCode === valueCode
+            if (isSome) {
+              codeStr = attr.skuValue
+            }
+            return isSome
+          })
+      })
+      return codeStr
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+::v-deep img {
+	width: 100px;
+	height: 100px;
+}
+</style>
+

src/views/renovation/commoditySystem/components/ProductReview.vue

@@ -0,0 +1,130 @@
+<template>
+  <el-dialog
+    :visible.sync="visible"
+    v-bind="modalOptions"
+    append-to-body
+  >
+    <el-form
+      ref="formData"
+      :model="formData"
+      :rules="formRules"
+      size="mini"
+      label-suffix=":"
+      label-width="150px"
+    >
+      <el-form-item label="商品ID" prop="productId">
+        <el-input
+          v-model="formData.productId" maxlength="20" placeholder="商品ID" disabled
+        />
+      </el-form-item>
+      <el-form-item label="审核状态" prop="shelveState">
+        <el-radio-group v-model="formData.shelveState">
+          <el-radio :label="1">通过</el-radio>
+          <el-radio :label="3">驳回</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item v-if="formData.shelveState === 3" label="驳回原因" prop="reject">
+        <el-input v-model="formData.reject" type="textarea" placeholder="请输入驳回原因" maxlength="520" :rows="3" show-word-limit />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <span class="dialog-footer">
+        <el-button size="mini" @click="handleClose">取 消</el-button>
+        <el-button type="primary" size="mini" @click="handleSubmit">确 定</el-button>
+      </span>
+    </template>
+  </el-dialog>
+</template>
+
+<script>
+import { examine } from '@/api/commodity'
+
+export default {
+  name: 'ProductReview',
+  components: {
+  },
+  data() {
+    return {
+      modalOptions: {
+        closeOnClickModal: false,
+        width: '620px',
+        title: ''
+      },
+      visible: false,
+      formData: {
+        productId: '',
+        shelveState: '',
+        reject: ''
+      },
+      formRules: {
+        productId: [
+          { required: true, message: '缺少商品ID' }
+        ],
+        shelveState: [
+          { required: true, message: '缺少报名信息' }
+        ],
+        reject: []
+      }
+    }
+  },
+  watch: {
+    'formData.shelveState': {
+      deep: true,
+      handler(val) {
+        if (val === 3) {
+          this.formRules.reject = [
+            { required: true, message: '请输入驳回原因' }
+          ]
+        } else {
+          this.formRules.reject = []
+        }
+      }
+    }
+  },
+  methods: {
+    handleClose() {
+      this.visible = false
+    },
+    initList() {
+    },
+    handleOpen(params = {}) {
+      this.modalOptions.title = '上架审核'
+      this.formData.productId = params.productId
+      // this.formData = Object.assign(this.$options.data().formData, params)
+      this.visible = true
+      this.initList()
+      this.$refs.formData && this.$refs.formData.resetFields()
+    },
+    handleSubmit() {
+      this.$refs.formData.validate(async (valid) => {
+        if (valid) {
+          const loading = this.$loading({ text: '加载中' })
+          try {
+            const { ...otps } = this.formData
+            const params = {
+              ...otps
+            }
+            await examine(params)
+            loading.close()
+            if (this.formData.shelveState === 1) {
+              this.$message({ message: `审核成功!`, type: 'success' })
+            } else {
+              this.$message({ message: `已驳回!`, type: 'success' })
+            }
+            this.$emit('success')
+            this.visible = false
+          } catch (e) {
+            loading.close()
+          } finally {
+            loading.close()
+          }
+        } else {
+          this.$message({ message: '请输入相关信息', type: 'warning' })
+          return false
+        }
+      })
+    }
+  }
+}
+</script>
+

src/views/renovation/commoditySystem/components/VirtualSales.vue

@@ -0,0 +1,105 @@
+<template>
+  <el-dialog
+    :visible.sync="visible"
+    v-bind="modalOptions"
+    append-to-body
+  >
+    <el-form
+      ref="formData"
+      :model="formData"
+      :rules="formRules"
+      size="mini"
+      label-suffix=":"
+      label-width="150px"
+    >
+      <el-form-item label="商品ID" prop="productId">
+        <el-input
+          v-model="formData.productId" maxlength="20" placeholder="商品ID" disabled
+        />
+      </el-form-item>
+      <el-form-item label="虚拟销量" prop="goodsNum">
+        <el-input-number v-model="formData.fictitiousNumber" :precision="0" :min="1" :max="999999999" />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <span class="dialog-footer">
+        <el-button size="mini" @click="handleClose">取 消</el-button>
+        <el-button type="primary" size="mini" @click="handleSubmit">确 定</el-button>
+      </span>
+    </template>
+  </el-dialog>
+</template>
+
+<script>
+import { setFictitious } from '@/api/commodity'
+
+export default {
+  name: 'RegistrationReview',
+  components: {
+  },
+  data() {
+    return {
+      modalOptions: {
+        closeOnClickModal: false,
+        width: '620px',
+        title: ''
+      },
+      visible: false,
+      formData: {
+        productId: '',
+        fictitiousNumber: 0
+      },
+      formRules: {
+        productId: [
+          { required: true, message: '缺少商品ID' }
+        ],
+        fictitiousNumber: [
+          { type: 'number', required: true, message: '请输入虚拟销量' }
+        ]
+      }
+    }
+  },
+  methods: {
+    handleClose() {
+      this.visible = false
+    },
+    initList() {
+    },
+    handleOpen(params = {}) {
+      this.modalOptions.title = '自定义虚拟销量'
+      this.formData.productId = params.productId
+      this.formData.fictitiousNumber = params.fictitiousNumber || 0
+      // this.formData = Object.assign(this.$options.data().formData, params)
+      this.visible = true
+      this.initList()
+      this.$refs.formData && this.$refs.formData.resetFields()
+    },
+    handleSubmit() {
+      this.$refs.formData.validate(async (valid) => {
+        if (valid) {
+          const loading = this.$loading({ text: '加载中' })
+          try {
+            const { ...otps } = this.formData
+            const params = {
+              ...otps
+            }
+            await setFictitious(params)
+            loading.close()
+            this.$message({ message: `虚拟销量已设置：${this.formData.fictitiousNumber}!`, type: 'success' })
+            this.$emit('success')
+            this.visible = false
+          } catch (e) {
+            loading.close()
+          } finally {
+            loading.close()
+          }
+        } else {
+          this.$message({ message: '请输入相关信息', type: 'warning' })
+          return false
+        }
+      })
+    }
+  }
+}
+</script>
+

src/views/renovation/commoditySystem/index.vue

@@ -1,171 +1,129 @@
-<!--  -->
 <template>
-  <div>
-    <div class="pending">
-      <!-- 搜索 -->
-      <div class="formSearch">
-        <el-form :inline="true" :model="formInline" class="demo-form-inline">
-          <el-form-item label="商品状态">
-            <el-radio-group v-model="formInline.shelveState" @change="changeState">
-              <el-radio-button label="">全部</el-radio-button>
-              <el-radio-button label="0">已下架</el-radio-button>
-              <el-radio-button label="1">已上架</el-radio-button>
-              <el-radio-button label="2">待审核</el-radio-button>
-              <el-radio-button label="3">审核失败</el-radio-button>
-            </el-radio-group>
-          </el-form-item>
-          <br>
-          <el-form-item label="商品ID">
-            <el-input v-model="formInline.productId" maxlength="20" placeholder="请输入商品ID" />
-          </el-form-item>
-          <el-form-item label="商品名称">
-            <el-input v-model="formInline.productName" maxlength="20" placeholder="请输入商品名称" />
-          </el-form-item>
-          <el-form-item label="商户名称">
-            <el-input v-model="formInline.shopName" maxlength="20" placeholder="请输入商户名称" />
-          </el-form-item>
-          <el-form-item>
-            <el-button type="primary" plain @click="search">查询</el-button>
-            <el-button plain @click="clear">重置</el-button>
-            <el-button type="success" plain @click="productDataExport">导出商品</el-button>
-            <!-- <span
-              v-for="(item, index) in btnList"
-              :key="index"
-              class="promissStyle"
+  <div class="app-container">
+    <!-- 查询和其他操作 -->
+    <div class="filter-container">
+      <el-select
+        v-model="listQuery.shelveState" clearable size="mini" class="filter-item"
+        style="width: 200px;"
+        placeholder="请选择商品状态"
+      >
+        <el-option label="全部" value="" />
+        <el-option label="已下架" :value="0" />
+        <el-option label="已上架" :value="1" />
+        <el-option label="待审核" :value="2" />
+        <el-option label="审核失败" :value="3" />
+      </el-select>
+      <el-input
+        v-model="listQuery.productId" clearable size="mini" class="filter-item"
+        style="width: 200px;margin-left: 10px;" placeholder="请输入商品ID"
+      />
+      <el-input
+        v-model="listQuery.productName" clearable size="mini" class="filter-item"
+        style="width: 200px;margin-left: 10px;" placeholder="请输入商品名称"
+      />
+      <el-input
+        v-model="listQuery.shopName" clearable size="mini" class="filter-item"
+        style="width: 200px;margin-left: 10px;" placeholder="请输入商户名称"
+      />
+      <el-button
+        size="mini" class="filter-item" type="primary" icon="el-icon-search"
+        style="margin-left:10px;"
+        @click="handleSearch"
+      >
+        查找
+      </el-button>
+      <el-button size="mini" type="info" class="filter-item" @click="handleReset">
+        重置
+      </el-button>
+      <br />
+      <el-button size="mini" type="primary" icon="el-icon-plus" @click="handleProductDataExport">
+        导出商品
+      </el-button>
+    </div>
+
+    <!-- 查询结果 -->
+    <div v-tableHeight>
+      <el-table
+        v-loading="listLoading" height="100%" element-loading-text="正在查询中。。。" :data="list"
+        v-bind="{ stripe: true, size: 'small', border: true, fit: true, highlightCurrentRow: true }"
+      >
+        <el-table-column align="center" width="100" label="商品ID" prop="productId" fixed="left" />
+        <el-table-column align="center" width="100" label="商品主图" prop="image">
+          <template slot-scope="{ row }">
+            <el-image
+              v-if="row.image" lazy :src="common.seamingImgUrl(row.image)" style="width:40px; height:40px"
+              fit="cover" :preview-src-list="[ common.seamingImgUrl(row.image) ]"
+            />
+            <span v-else>--</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="productName" label="商品名称" width="180" />
+        <el-table-column prop="shopName" label="商家名称" width="180" />
+        <el-table-column prop="supplierName" label="供应商名称" width="180" />
+        <el-table-column prop="classifyHierarchy" label="分类层级" width="180" />
+        <el-table-column prop="sectionPrice" label="售价区间" show-overflow-tooltip />
+        <!-- <el-table-column prop="memberSection" label="会员价" show-overflow-tooltip /> -->
+        <el-table-column prop="stockNumber" label="库存" show-overflow-tooltip />
+        <el-table-column prop="volume" label="实际销售" show-overflow-tooltip />
+        <el-table-column prop="fictitiousNumber" label="虚拟销售" show-overflow-tooltip />
+        <el-table-column align="center" width="150" label="创建时间" prop="createTime" />
+        <el-table-column align="center" label="上架状态" prop="shelveState">
+          <template slot-scope="{ row }">
+            <el-tag v-if="row.shelveState === 0">已下架</el-tag>
+            <el-tag v-else-if="row.shelveState === 1">已上架</el-tag>
+            <el-tag v-else-if="row.shelveState === 2">待审核</el-tag>
+            <el-tag v-else-if="row.shelveState === 3">审核失败</el-tag>
+            <span v-else>--</span>
+          </template>
+        </el-table-column>
+        <el-table-column align="center" label="操作" width="220" fixed="right" class-name="small-padding fixed-width">
+          <template slot-scope="{ row }">
+            <el-button v-if="row.shelveState === 1" type="text" @click="handleOffShelf(row)">
+              强制下架
+            </el-button>
+            <el-button
+              v-if="row.shelveState === 1" type="text"
+              @click="$refs.VirtualSales && $refs.VirtualSales.handleOpen(row)"
+            >
+              虚拟销量
+            </el-button>
+            <el-button
+              v-if="row.shelveState === 2" type="danger" size="mini"
+              @click="$refs.ProductReview && $refs.ProductReview.handleOpen(row)"
             >
-              <el-button type="success" plain @click="btnClick(item)">{{
-                item.permissionName
-              }}</el-button>
-            </span> -->
-          </el-form-item>
-        </el-form>
-      </div>
-      <!-- 表格 -->
-      <div class="tableBox">
-        <el-table ref="multipleTable" v-loading="loading" :data="tableData" border
-          :header-cell-style="{ background: '#EEF3FF', color: '#333333' }" tooltip-effect="dark" style="width: 100%">
-          <el-table-column prop="productId" label="商品id" show-overflow-tooltip width="80" />
-          <el-table-column label="商品主图" width="150" align="center">
-            <template slot-scope="scope">
-              <img height="80" width="80" :src="scope.row.image.replace('http://', 'https://')" alt srcset>
-            </template>
-          </el-table-column>
-          <el-table-column prop="productName" label="商品名称" width="180" />
-          <el-table-column prop="shopName" label="商家名称" width="180" />
-          <el-table-column prop="supplierName" label="供应商名称" width="180" />
-          <el-table-column prop="classifyHierarchy" label="分类层级" width="180" />
-          <!-- classifyHierarchy -->
-          <el-table-column prop="sectionPrice" label="售价区间" show-overflow-tooltip />
-          <!-- <el-table-column
-            prop="memberSection"
-            label="会员价"
-            show-overflow-tooltip
-          /> -->
-          <el-table-column prop="stockNumber" label="库存" show-overflow-tooltip />
-          <el-table-column prop="volume" label="实际销售" show-overflow-tooltip />
-          <el-table-column prop="fictitiousNumber" label="虚拟销售" show-overflow-tooltip />
-          <el-table-column prop="createTime" label="创建时间" width="180" />
-          <el-table-column prop="shelveState" label="上架状态" show-overflow-tooltip>
-            <template slot-scope="scope">
-              <span v-if="scope.row.shelveState == 0">已下架</span>
-              <span v-if="scope.row.shelveState == 1">已上架</span>
-              <span v-if="scope.row.shelveState == 2">待审核</span>
-              <span v-if="scope.row.shelveState == 3">审核失败</span>
-            </template>
-          </el-table-column>
-          <el-table-column label="操作" width="200">
-            <template slot-scope="scope">
-              <div class="btnList">
-                <el-button v-if="scope.row.shelveState == 1" slot="reference" style="margin-right: 10px" type="text"
-                  @click="OutForced(scope.row)">
-                  强制下架
-                </el-button>
-                <el-button v-if="scope.row.shelveState == 1" type="text" @click="setFictitious(scope.row)">
-                  虚拟销量
-                </el-button>
-                <el-button v-if="scope.row.shelveState == 2" type="text" @click="examineShow(scope.row)">审核</el-button>
-                <el-button type="text" @click="Godetails(scope.row)">查看详情</el-button>
-                <el-button type="text" v-if="scope.row.shelveState == 1" @click="addProduct(scope.row)">加入选品</el-button>
-              </div>
-            </template>
-          </el-table-column>
-        </el-table>
-        <div class="fenye">
-          <el-pagination :current-page="currentPage" :page-sizes="[5, 10, 20, 50, 100]" :page-size="5"
-            layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
-            @current-change="handleCurrentChange" />
-        </div>
-      </div>
+              审核
+            </el-button>
+            <el-button type="warning" size="mini" @click="handleDetail(row)">
+              详情
+            </el-button>
+            <el-button
+              v-if="row.shelveState === 1" type="danger" size="mini"
+              @click="$refs.AddSelection && $refs.AddSelection.handleOpen(row)"
+            >
+              加入选品
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
     </div>
-    <!-- 上架审核 -->
-    <el-dialog title="上架审核" :visible.sync="examineVisible" width="30%" style="margin-top:10%">
-      <el-form :model="ForcedForm">
-        <el-form-item label="审核状态" label-width="120px">
-          <el-radio-group v-model="ForcedForm.shelveState">
-            <el-radio :label="1">通过</el-radio>
-            <el-radio :label="3">驳回</el-radio>
-          </el-radio-group>
-        </el-form-item>
-        <el-form-item v-if="ForcedForm.shelveState == 3" label="驳回原因" label-width="120px">
-          <el-input v-model="ForcedForm.reject" maxlength="200" type="textarea" autocomplete="off" />
-        </el-form-item>
-      </el-form>
-      <span slot="footer" class="dialog-footer">
-        <el-button @click="examineVisible = false">取 消</el-button>
-        <el-button type="primary" @click="submintUs">确 定</el-button>
-      </span>
-    </el-dialog>
+
+    <div>
+      <el-pagination
+        :current-page="listQuery.page" :page-sizes="[10, 20, 50, 100]" :page-size="listQuery.pageSize"
+        layout="total, sizes, prev, pager, next, jumper" :total="total"
+        @size-change="(val) => ((listQuery.pageSize = val) && getList())"
+        @current-change="(val) => ((listQuery.page = val) && getList())"
+      />
+    </div>
+
+    <!-- 商品审核 -->
+    <ProductReview ref="ProductReview" @success="getList" />
     <!-- 设置虚拟销量 -->
-    <el-dialog title="自定义虚拟销量" :visible.sync="FictitiousVisible" width="460px">
-      <el-form :model="ForcedForm">
-        <el-form-item label="" label-width="110px">
-          <el-input-number v-model="ForcedForm.fictitiousNumber" :precision="0" :min="1" :max="999999999"
-            label="请输入整数" />
-        </el-form-item>
-      </el-form>
-      <span slot="footer" class="dialog-footer">
-        <el-button @click="FictitiousVisible = false">取 消</el-button>
-        <el-button type="primary" @click="FicSubmintUs">确 定</el-button>
-      </span>
-    </el-dialog>
-    <el-dialog title="选择商品" :visible.sync="selectionDia" width="30%" style="margin-top:10%" @close="selectionClonse">
-      <div class="selection-box">
-        <div class="box-item">
-          <span>商家Id：</span>
-          <el-input v-model="productData.productIdproductId" placeholder="请输入商家id"></el-input>
-        </div>
-        <!-- <div class="box-item">
-          <span>平台分类选择：</span>
-          
-          <el-select v-model="productData.classifyId" placeholder="请选择">
-            <el-option v-for="item in options" :key="item.classifyId" :label="item.classifyName"
-              :value="item.classifyId">
-            </el-option>
-          </el-select>
-        </div> -->
-        <div class="box-item">
-          <span>商家分组选择：</span>
-          <!-- <el-cascader :options="shopGroup" :props="optionProps"></el-cascader> -->
-          <el-cascader :options="shopGroup" :props="optionProps" v-model="shopProps"></el-cascader>
-          <!-- <el-select v-model="productData.shopGroupId" placeholder="请选择">
-            <el-option v-for="item in shopGroup" :key="item.shopGroupId" :label="item.groupName"
-              :value="item.shopGroupId">
-            </el-option>
-          </el-select> -->
-        </div>
-        <div class="box-item">
-          <span>是否加入选品：</span>
-          <el-radio v-model="productData.shelveState" :label="1">是</el-radio>
-          <el-radio v-model="productData.shelveState" :label="0">不是</el-radio>
-        </div>
-      </div>
-      <div class="btn-list">
-        <el-button type="primary" @click="addSelection">加入选品</el-button>
-        <el-button @click="selectionDia = false">取 消</el-button>
-      </div>
-    </el-dialog>
+    <VirtualSales ref="VirtualSales" @success="getList" />
     <!-- 加入选品 -->
-    <AddCommodity ref="addCommodity" :examine-show="examineShow" @reset="reset" />
+    <AddSelection ref="AddSelection" @success="getList" />
+    <!-- 查看详情 -->
+    <DetailModal ref="DetailModal" />
   </div>
 </template>
 
@@ -173,261 +131,81 @@
 import {
   getClassifyGetAll,
   Forced,
-  setFictitious,
-  examine,
-  productExport,
-  getProductById,
-  addProductFixed,
-  commdityClassGetAll,
-  commdityClassGetGroup
+  productExport
 } from '@/api/commodity'
-import AddCommodity from './addCommodity'
+import ProductReview from './components/ProductReview'
+import VirtualSales from './components/VirtualSales'
+import AddSelection from './components/AddSelection'
+import DetailModal from './components/DetailModal'
+
 export default {
-  components: { AddCommodity },
+  name: 'CommoditySystem',
+  components: {
+    ProductReview,
+    VirtualSales,
+    AddSelection,
+    DetailModal
+  },
   data() {
-    // 这里存放数据
     return {
-      loading: true,
-      btnList: '',
-      activeName: 'first',
-      formInline: {
+      list: [],
+      total: 0,
+      listLoading: true,
+      listQuery: {
         shelveState: '', // 商品状态 0-已下架 1-已上架 2-待审核 3-审核失败
         productName: '', // 商品名称
         productId: '', // 商品ID
         shopName: '', // 商户名称
         page: 1, // 当前页
-        pageSize: 5
-      },
-      batchAdd: false,
-      batchFileList: [],
-      total: 1,
-      tableData: [],
-      currentPage: 1,
-      FictitiousVisible: false,
-      ForcedForm: {
-        fictitiousNumber: 0,
-        productId: '',
-        reject: '',
-        shelveState: 1
-      },
-      examineVisible: false,
-      isDetail: false,
-      //  选品弹窗
-      selectionDia: false,
-      //  加入选品的参数
-      productData: {
-        productId: 0,
-        productIdproductId: 186,
-        shopParentId: "",
-        shopGroupId: "",
-        shelveState: 1,
-      },
-      //  商品类别
-      options: [],
-      //  商家分组
-      shopGroup: [],
-      //  级联选择器绑定的数据
-      shopProps:"",
-      optionProps:{
-        checkStrictly:true,
-        value:"shopGroupId",
-        label:"groupName",
-        children:"childs"
+        pageSize: 20
       }
     }
   },
-  // 监听属性 类似于data概念
-  computed: {},
-  // 监控data中的数据变化
-  watch: {},
-  // 生命周期 - 创建完成（可以访问当前this实例）
   created() {
+    this.getList()
   },
-  // 生命周期 - 挂载完成（可以访问DOM元素）
-  mounted() {
-    this.getAll(this.formInline);
-    //  获取分类
-    this.getAllClass();
-    //  获取商家分组
-    this.getGroupSelect()
-  },
-  // 方法集合
   methods: {
-    //  获取商品类别
-    async getAllClass() {
-      try {
-        let res = await commdityClassGetAll({ page: 1, pageSize: "15" })
-        this.options = res.data.list
-      } catch (error) {
-        console.log(error);
-      }
-    },
-    // 商家分组查询
-    async getGroupSelect() {
+    async getList() {
+      this.listLoading = true
       try {
-        let res = await commdityClassGetGroup({ search:"",page: 1, pageSize: "15" })
-        console.log(res.data.list);
-        this.shopGroup = res.data.list
-      } catch (error) {
-        console.log(error);
-      }
-    },
-    //  加入选品
-    async addProduct(row) {
-      this.productData.productId = row.productId
-      //  获取商品详情
-      const res = await getProductById({ productId: row.productId })
-      console.log(res);
-      this.productData.shopParentId = res.data.shopId
-      // this.productData.shopGroupId = res.data.shopGroupId
-      this.selectionDia = true
-    },
-    //  保存选品
-    async addSelection() {
-      //  对于商家分组选择做处理
-      let length = this.shopProps.length
-      if(length == 1){
-        this.productData.shopGroupId = this.shopProps[0]
-      }else{
-        this.productData.shopGroupId = this.shopProps[length - 1]
-      }
-
-      //  判断是否符合要求
-      if (this.productData.productIdproductId == "") {
-        this.$message.error("商家id不能为空")
-        return
+        const res = await getClassifyGetAll(this.listQuery)
+        this.list = res.data.list
+        this.total = res.data.total
+      } finally {
+        this.listLoading = false
       }
-      if (!this.productData.shopGroupId) {
-        this.$message.error("请选择商家分组")
-        return
-      }
-      //  对选品的数组做处理
-
-      // console.log(this.productData);
-      let res = await addProductFixed(this.productData)
-      if (res.code == "") {
-        this.$message.success("选品添加成功")
-        this.selectionDia = false
-      }
-    },
-    //  选品弹窗关闭
-    selectionClonse() {
-      this.shopProps = ""
-      this.productData = {
-        productId: 0,
-        productIdproductId: 186,
-        shopParentId: "",
-        shopGroupId: "",
-        shelveState: 1
-      }
-    },
-    // 查看详情
-    Godetails(row) {
-      this.$refs.addCommodity.show(row.productId)
     },
-    // 设置虚拟销量
-    setFictitious(row) {
-      this.FictitiousVisible = true
-      this.ForcedForm.productId = row.productId
-      this.ForcedForm.fictitiousNumber = row.fictitiousNumber
-    },
-    async FicSubmintUs() {
-      const res = await setFictitious(this.ForcedForm)
-      if (res.code === '') {
-        this.FictitiousVisible = false
-        this.$message.success('虚拟销量已设置：' + this.ForcedForm.fictitiousNumber)
-        this.search()
-      }
-    },
-    // 强制下架
-    OutForced(row) {
-      this.$alert('确定下架此商品吗？', '提示', {
-        confirmButtonText: '确定',
-        callback: (action) => {
-          console.log(action)
-          if (action === 'confirm') {
-            this.ForcedForm.productId = row.productId
-            Forced(this.ForcedForm).then((res) => {
-              if (res.code === '') {
-                this.$message.success('下架成功')
-                this.search()
-              }
-            })
-          }
-        }
-      })
-    },
-    // 审核弹窗
-    examineShow(row) {
-      this.ForcedForm.productId = row.productId
-      this.ForcedForm.reject = ''
-      this.examineVisible = true
-      if (row.isDetail) {
-        this.isDetail = row.isDetail
-      }
-      console.log(row, 'test')
-    },
-    async submintUs() {
-      if (this.ForcedForm.shelveState === 3 && this.ForcedForm.reject === '') { return this.$message.warning('请输入驳回原因') }
-      const res = await examine(this.ForcedForm)
-      if (res.code === '') {
-        this.examineVisible = false
-        if (this.ForcedForm.shelveState === 1) {
-          this.$message.success('审核成功')
-        } else {
-          this.$message.success('已驳回')
-        }
-        this.search()
-        if (this.isDetail) {
-          this.$refs.addCommodity.details()
-        }
-      }
+    handleSearch() {
+      this.listQuery.page = 1
+      this.getList()
     },
-    handleSizeChange(val) {
-      // console.log(val)
-      this.formInline.pageSize = val
-      this.getAll(this.formInline)
+    handleReset() {
+      this.listQuery = { shelveState: '', productName: '', productId: '', shopName: '', page: 1, pageSize: 5 }
+      this.getList()
     },
-    handleCurrentChange(val) {
-      // console.log(val)
-      this.formInline.page = val
-      this.getAll(this.formInline)
+    handleDetail(row) {
+      this.$refs.DetailModal && this.$refs.DetailModal.handleOpen(row)
     },
-    //  查询
-    search() {
-      // this.total = 1
-      // this.formInline.page = 1
-      this.getAll(this.formInline)
-    },
-    // 商品状态查询
-    changeState(e) {
-      console.log(e)
-      this.formInline.shelveState = e
-      this.getAll(this.formInline)
-    },
-    // 重置
-    clear() {
-      this.formInline = {
-        shelveState: '', // 商品状态 0-已下架 1-已上架 2-待审核 3-审核失败
-        productName: '', // 商品名称
-        productId: '', // 商品ID
-        shopName: '', // 商户名称
-        page: 1, // 当前页
-        pageSize: 5
-      }
-      this.getAll(this.formInline)
+    handleOffShelf(row) {
+      this.$confirm('确定下架此商品吗？')
+        .then(async () => {
+          await Forced({ productId: row.productId })
+          this.$message({ message: '下架成功！', type: 'success' })
+          this.handleSearch()
+        })
+        .catch(() => { })
     },
     // 导出商品
-    async productDataExport() {
+    async handleProductDataExport() {
       this.$message({
         message: '数据导出中，请勿重复操作！',
         type: 'success'
       })
-      const res = await productExport(this.formInline)
+      const res = await productExport(this.listQuery)
       if (!res) {
         return
       }
-      const blob = new Blob([res], { type: 'application/vnd.ms-excel' })
+      const blob = new Blob([ res ], { type: 'application/vnd.ms-excel' })
       const fileName = '商品数据明细表.xls'
       if ('download' in document.createElement('a')) {
         // 非IE下载
@@ -443,105 +221,36 @@ export default {
         // IE10+下载
         navigator.msSaveBlob(blob, fileName)
       }
-    },
-    // 初始化查询所有数据
-    async getAll(formInline) {
-      const res = await getClassifyGetAll(formInline)
-      this.loading = false
-      this.total = res.data.total
-      this.tableData = res.data.list
-    },
-    reset() {
-      this.getAll(this.formInline)
     }
   }
 }
 </script>
 
-<style lang='scss' scoped>
-//@import url(); 引入公共css类
-@import url("../../../styles/elDialog.scss");
-
-.pending {
-  padding: 30px;
-}
-
-.fenye {
-  margin-top: 20px;
-}
-
-.clickMe {
-  color: #3a68f2;
-  cursor: pointer;
-}
-
-.vipDialog {
-  .priceTable {
-    table {
-      width: 100%;
-      text-align: center;
-      border-left: 1px solid #ebeef5;
-      border-bottom: 1px solid #ebeef5;
-      font-size: 14px;
-      color: #606266;
-      border-collapse: collapse;
+<style lang="scss" scoped>
+.app-container {
+	padding: 20px;
+	display: flex;
+	flex-direction: column;
 
-      tr {
-        border-top: 1px solid #ebeef5;
+	.filter-container {
+		.filter-item {
+			display: inline-block;
+			vertical-align: middle;
+			margin-bottom: 10px;
+		}
+	}
 
-        th {
-          padding: 12px 0;
-          background: #eef3ff;
-          color: #333;
-          border-right: 1px solid #ebeef5;
-        }
-
-        td {
-          padding: 12px 0;
-          border-right: 1px solid #ebeef5;
-
-          &:nth-child(1),
-          &:nth-child(2) {
-            width: 80px;
-          }
-
-          .el-input {
-            width: 100px;
-            margin-right: 10px;
-          }
-        }
-      }
-    }
-  }
-}
-
-.selection-box {
-  .box-item {
-    margin-bottom: 30px;
-    display: flex;
-    align-items: center;
-
-    span {
-      text-align: end;
-      width: 200px;
-      padding-right: 30px;
-      box-sizing: border-box;
-      font-size: 18px;
-    }
-
-    ::v-deep .el-input {
-      flex: 1;
-    }
-  }
-}
-
-.btn-list {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
+	.small-padding {
+		.cell {
+			padding-left: 5px;
+			padding-right: 5px;
+		}
+	}
 
-::v-deep .el-select {
-  flex: 1;
+	.fixed-width {
+		.el-button--mini {
+			padding: 7px 10px;
+		}
+	}
 }
 </style>

src/views/selectionMemberManagement/selectionMemberCommodity/index.vue

@@ -0,0 +1,258 @@
+<!-- 选品会员商品 -->
+<template>
+  <div class="app-container">
+    <!-- 查询和其他操作 -->
+    <div class="filter-container">
+      <el-select
+        v-model="listQuery.shelveState" clearable size="mini" class="filter-item"
+        style="width: 200px;"
+        placeholder="请选择商品状态"
+      >
+        <el-option label="全部" value="" />
+        <el-option label="已下架" :value="0" />
+        <el-option label="已上架" :value="1" />
+        <el-option label="待审核" :value="2" />
+        <el-option label="审核失败" :value="3" />
+      </el-select>
+      <el-input
+        v-model="listQuery.productId" clearable size="mini" class="filter-item"
+        style="width: 200px;margin-left: 10px;" placeholder="请输入商品ID"
+      />
+      <el-input
+        v-model="listQuery.productName" clearable size="mini" class="filter-item"
+        style="width: 200px;margin-left: 10px;" placeholder="请输入商品名称"
+      />
+      <el-input
+        v-model="listQuery.shopName" clearable size="mini" class="filter-item"
+        style="width: 200px;margin-left: 10px;" placeholder="请输入商户名称"
+      />
+      <el-button
+        size="mini" class="filter-item" type="primary" icon="el-icon-search"
+        style="margin-left:10px;"
+        @click="handleSearch"
+      >
+        查找
+      </el-button>
+      <el-button size="mini" type="info" class="filter-item" @click="handleReset">
+        重置
+      </el-button>
+      <br />
+      <el-button size="mini" type="primary" icon="el-icon-plus" @click="handleProductDataExport">
+        导出商品
+      </el-button>
+    </div>
+
+    <!-- 查询结果 -->
+    <div v-tableHeight>
+      <el-table
+        v-loading="listLoading" height="100%" element-loading-text="正在查询中。。。" :data="list"
+        v-bind="{ stripe: true, size: 'small', border: true, fit: true, highlightCurrentRow: true }"
+      >
+        <el-table-column align="center" width="100" label="商品ID" prop="productId" fixed="left" />
+        <el-table-column align="center" width="100" label="商品主图" prop="image">
+          <template slot-scope="{ row }">
+            <el-image
+              v-if="row.image" lazy :src="common.seamingImgUrl(row.image)" style="width:40px; height:40px"
+              fit="cover" :preview-src-list="[ common.seamingImgUrl(row.image) ]"
+            />
+            <span v-else>--</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="productName" label="商品名称" width="180" />
+        <el-table-column prop="shopName" label="商家名称" width="180" />
+        <el-table-column prop="supplierName" label="供应商名称" width="180" />
+        <el-table-column prop="classifyHierarchy" label="分类层级" width="180" />
+        <el-table-column prop="sectionPrice" label="售价区间" show-overflow-tooltip />
+        <!-- <el-table-column prop="memberSection" label="会员价" show-overflow-tooltip /> -->
+        <el-table-column prop="stockNumber" label="库存" show-overflow-tooltip />
+        <el-table-column prop="volume" label="实际销售" show-overflow-tooltip />
+        <el-table-column prop="fictitiousNumber" label="虚拟销售" show-overflow-tooltip />
+        <el-table-column align="center" width="150" label="创建时间" prop="createTime" />
+        <el-table-column align="center" label="上架状态" prop="shelveState">
+          <template slot-scope="{ row }">
+            <el-tag v-if="row.shelveState === 0">已下架</el-tag>
+            <el-tag v-else-if="row.shelveState === 1">已上架</el-tag>
+            <el-tag v-else-if="row.shelveState === 2">待审核</el-tag>
+            <el-tag v-else-if="row.shelveState === 3">审核失败</el-tag>
+            <span v-else>--</span>
+          </template>
+        </el-table-column>
+        <el-table-column align="center" label="操作" width="220" fixed="right" class-name="small-padding fixed-width">
+          <template slot-scope="{ row }">
+            <el-button v-if="row.shelveState === 1" type="text" @click="handleOffShelf(row)">
+              强制下架
+            </el-button>
+            <el-button
+              v-if="row.shelveState === 1" type="text"
+              @click="$refs.VirtualSales && $refs.VirtualSales.handleOpen(row)"
+            >
+              虚拟销量
+            </el-button>
+            <el-button
+              v-if="row.shelveState === 2" type="danger" size="mini"
+              @click="$refs.ProductReview && $refs.ProductReview.handleOpen(row)"
+            >
+              审核
+            </el-button>
+            <el-button type="warning" size="mini" @click="handleDetail(row)">
+              详情
+            </el-button>
+            <el-button
+              v-if="row.shelveState === 1" type="danger" size="mini"
+              @click="$refs.AddSelection && $refs.AddSelection.handleOpen(row)"
+            >
+              加入选品
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+
+    <div>
+      <el-pagination
+        :current-page="listQuery.page" :page-sizes="[10, 20, 50, 100]" :page-size="listQuery.pageSize"
+        layout="total, sizes, prev, pager, next, jumper" :total="total"
+        @size-change="(val) => ((listQuery.pageSize = val) && getList())"
+        @current-change="(val) => ((listQuery.page = val) && getList())"
+      />
+    </div>
+
+    <!-- 商品审核 -->
+    <ProductReview ref="ProductReview" @success="getList" />
+    <!-- 设置虚拟销量 -->
+    <VirtualSales ref="VirtualSales" @success="getList" />
+    <!-- 加入选品 -->
+    <AddSelection ref="AddSelection" @success="getList" />
+    <!-- 查看详情 -->
+    <DetailModal ref="DetailModal" />
+  </div>
+</template>
+
+<script>
+import {
+  getClassifyGetAll,
+  Forced,
+  productExport
+} from '@/api/commodity'
+import ProductReview from '../../renovation/commoditySystem/components/ProductReview'
+import VirtualSales from '../../renovation/commoditySystem/components/VirtualSales'
+import AddSelection from '../../renovation/commoditySystem/components/AddSelection'
+import DetailModal from '../../renovation/commoditySystem/components/DetailModal'
+
+export default {
+  name: 'SelectionMemberCommodity',
+  components: {
+    ProductReview,
+    VirtualSales,
+    AddSelection,
+    DetailModal
+  },
+  data() {
+    return {
+      list: [],
+      total: 0,
+      listLoading: true,
+      listQuery: {
+        shelveState: '', // 商品状态 0-已下架 1-已上架 2-待审核 3-审核失败
+        productName: '', // 商品名称
+        productId: '', // 商品ID
+        shopName: '', // 商户名称
+        page: 1, // 当前页
+        pageSize: 20,
+        shopType: 4
+      }
+    }
+  },
+  created() {
+    this.getList()
+  },
+  methods: {
+    async getList() {
+      this.listLoading = true
+      try {
+        const res = await getClassifyGetAll(this.listQuery)
+        this.list = res.data.list
+        this.total = res.data.total
+      } finally {
+        this.listLoading = false
+      }
+    },
+    handleSearch() {
+      this.listQuery.page = 1
+      this.getList()
+    },
+    handleReset() {
+      this.listQuery = { shelveState: '', productName: '', productId: '', shopName: '', page: 1, pageSize: 5 }
+      this.getList()
+    },
+    handleDetail(row) {
+      this.$refs.DetailModal && this.$refs.DetailModal.handleOpen(row)
+    },
+    handleOffShelf(row) {
+      this.$confirm('确定下架此商品吗？')
+        .then(async () => {
+          await Forced({ productId: row.productId })
+          this.$message({ message: '下架成功！', type: 'success' })
+          this.handleSearch()
+        })
+        .catch(() => { })
+    },
+    // 导出商品
+    async handleProductDataExport() {
+      this.$message({
+        message: '数据导出中，请勿重复操作！',
+        type: 'success'
+      })
+      const res = await productExport(this.listQuery)
+      if (!res) {
+        return
+      }
+      const blob = new Blob([ res ], { type: 'application/vnd.ms-excel' })
+      const fileName = '商品数据明细表.xls'
+      if ('download' in document.createElement('a')) {
+        // 非IE下载
+        const elink = document.createElement('a')
+        elink.download = fileName
+        elink.style.display = 'none'
+        elink.href = URL.createObjectURL(blob)
+        document.body.appendChild(elink)
+        elink.click()
+        URL.revokeObjectURL(elink.href) // 释放URL 对象
+        document.body.removeChild(elink)
+      } else {
+        // IE10+下载
+        navigator.msSaveBlob(blob, fileName)
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.app-container {
+	padding: 20px;
+	display: flex;
+	flex-direction: column;
+
+	.filter-container {
+		.filter-item {
+			display: inline-block;
+			vertical-align: middle;
+			margin-bottom: 10px;
+		}
+	}
+
+	.small-padding {
+		.cell {
+			padding-left: 5px;
+			padding-right: 5px;
+		}
+	}
+
+	.fixed-width {
+		.el-button--mini {
+			padding: 7px 10px;
+		}
+	}
+}
+</style>

src/views/selectionMemberManagement/selectionMemberList/index.vue

@@ -0,0 +1,226 @@
+<!-- 选品会员列表 -->
+<template>
+  <div class="app-container">
+    <!-- 查询和其他操作 -->
+    <div class="filter-container">
+      <el-input
+        v-model="listQuery.shopName" clearable size="mini" class="filter-item"
+        style="width: 200px;"
+        placeholder="请输入选品会员名称"
+      />
+      <el-input
+        v-model="listQuery.shopCode" clearable size="mini" class="filter-item"
+        style="width: 200px;margin-left: 10px;" placeholder="请输入选品会员编码"
+      />
+      <el-input
+        v-model="listQuery.chargePersonName" clearable size="mini" class="filter-item"
+        style="width: 200px;margin-left: 10px;" placeholder="请输入负责人"
+      />
+      <el-select
+        v-model="listQuery.contractState" clearable size="mini" class="filter-item"
+        style="width: 200px;margin-left: 10px;" placeholder="请选择合同状态"
+      >
+        <el-option label="有效" :value="1" />
+        <el-option label="无效" :value="0" />
+      </el-select>
+      <el-button
+        size="mini" class="filter-item" type="primary" icon="el-icon-search"
+        style="margin-left:10px;"
+        @click="handleSearch"
+      >
+        查找
+      </el-button>
+      <br />
+      <el-button
+        size="mini" type="primary" icon="el-icon-plus"
+        @click="$refs.EditModal && $refs.EditModal.handleOpen({ shopId: '' })"
+      >
+        新建商家
+      </el-button>
+    </div>
+
+    <!-- 查询结果 -->
+    <div v-tableHeight>
+      <el-table
+        v-loading="listLoading" height="100%" element-loading-text="正在查询中。。。" :data="list"
+        v-bind="{ stripe: true, size: 'small', border: true, fit: true, highlightCurrentRow: true }"
+      >
+        <el-table-column label="选品会员名称" width="220">
+          <template slot-scope="scope">{{ scope.row.shopName }}</template>
+        </el-table-column>
+        <el-table-column prop="shopCode" label="选品会员编码" />
+        <el-table-column label="是否支持消费金">
+          <template slot-scope="scope">
+            <span v-if="scope.row.isBeeCoin === 1">支持</span>
+            <span v-else-if="scope.row.isBeeCoin === 2">不支持</span>
+            <span v-else>--</span>
+          </template>
+        </el-table-column>
+        <!-- <el-table-column align="center" min-width="120" label="商家消费金提现比例" prop="beecoinRatio">
+          <template slot-scope="{ row }">
+          <span v-if="row.beeCoinRatio">{{ row.beeCoinRatio }}：1</span>
+          <span v-else>--</span>
+          </template>
+          </el-table-column> -->
+        <el-table-column prop="chargePersonName" label="负责人" />
+        <el-table-column prop="chargePersonPhone" label="联系电话" />
+        <el-table-column label="合同状态">
+          <template slot-scope="scope">
+            <span v-if="scope.row.contractState === 0">无效</span>
+            <span v-if="scope.row.contractState === 1">有效</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="createTime" label="创建时间" />
+        <el-table-column align="center" label="操作" width="280" fixed="right" class-name="small-padding fixed-width">
+          <template slot-scope="{ row }">
+            <el-button type="warning" size="mini" @click="handleDetail(row)">
+              详情
+            </el-button>
+            <el-button size="mini" @click="handleEdit(row)">
+              编辑
+            </el-button>
+            <el-button v-if="row.state == 1" type="text" @click="handleDisabled(row)">
+              禁用
+            </el-button>
+            <el-button v-else type="text" @click="handleEnable(row)">
+              启用
+            </el-button>
+            <el-button type="danger" size="mini" @click="handleDelete(row)">
+              删除
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+
+    <div>
+      <el-pagination
+        :current-page="listQuery.page" :page-sizes="[10, 20, 50, 100]" :page-size="listQuery.pageSize"
+        layout="total, sizes, prev, pager, next, jumper" :total="total"
+        @size-change="(val) => ((listQuery.pageSize = val) && getList())"
+        @current-change="(val) => ((listQuery.page = val) && getList())"
+      />
+    </div>
+
+    <!-- 新增编辑 -->
+    <EditModal ref="EditModal" @success="getList" />
+    <!-- 查看详情 -->
+    <DetailModal ref="DetailModal" />
+  </div>
+</template>
+
+<script>
+import EditModal from '../../business/businessList/components/EditModal'
+import DetailModal from '../../business/businessList/components/DetailModal'
+import {
+  businessListGetAll,
+  businessListStart,
+  delBusinessById
+} from '@/api/business'
+
+export default {
+  name: 'SelectionMemberList',
+  components: {
+    EditModal,
+    DetailModal
+  },
+  data() {
+    // 这里存放数据
+    return {
+      list: [],
+      total: 0,
+      listLoading: true,
+      listQuery: {
+        page: 1,
+        pageSize: 20,
+        shopName: '',
+        shopCode: '',
+        chargePersonName: '',
+        contractState: '',
+        shopType: 4
+      }
+    }
+  },
+  created() {
+    this.getList()
+  },
+  methods: {
+    async getList() {
+      this.listLoading = true
+      try {
+        const res = await businessListGetAll(this.listQuery)
+        this.list = res.data.list
+        this.total = res.data.total
+      } finally {
+        this.listLoading = false
+      }
+    },
+    handleSearch() {
+      this.listQuery.page = 1
+      this.getList()
+    },
+    handleDetail(row) {
+      this.$refs.DetailModal && this.$refs.DetailModal.handleOpen(row)
+    },
+    handleEdit(row) {
+      this.$refs.EditModal && this.$refs.EditModal.handleOpen(row)
+    },
+    handleDelete(row) {
+      this.$confirm('确定删除此项？')
+        .then(async () => {
+          await delBusinessById({ shopId: row.shopId })
+          this.$message({ message: '删除成功！', type: 'success' })
+          this.handleSearch()
+        })
+        .catch(() => {})
+    },
+    handleDisabled(row) {
+      this.$confirm('确定停用此项？')
+        .then(async () => {
+          await businessListStart({ shopName: row.shopName, state: 0, shopId: row.shopId })
+          this.$message({ message: '停用成功！', type: 'success' })
+          this.handleSearch()
+        })
+        .catch(() => {})
+    },
+    handleEnable(row) {
+      this.$confirm('确定启用此项？')
+        .then(async () => {
+          await businessListStart({ shopName: row.shopName, state: 1, shopId: row.shopId })
+          this.$message({ message: '启用成功！', type: 'success' })
+          this.handleSearch()
+        })
+        .catch(() => {})
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.app-container {
+	padding: 20px;
+	display: flex;
+	flex-direction: column;
+
+	.filter-container {
+		.filter-item {
+			display: inline-block;
+			vertical-align: middle;
+			margin-bottom: 10px;
+		}
+	}
+
+	.small-padding {
+		.cell {
+			padding-left: 5px;
+			padding-right: 5px;
+		}
+	}
+
+	.fixed-width {
+		.el-button--mini {
+			padding: 7px 10px;
+		}
+	}
+}
+</style>

src/views/selectionMemberManagement/selectionMemberSettlement/index.vue

@@ -0,0 +1,203 @@
+<!-- 选品会员入驻 -->
+<template>
+  <div class="app-container">
+    <!-- 查询和其他操作 -->
+    <div class="filter-container">
+      <el-select
+        v-model="listQuery.checkState" clearable size="mini" class="filter-item"
+        style="width: 200px;" placeholder="请选择审核状态"
+      >
+        <el-option label="待处理" :value="0" />
+        <el-option label="已通过" :value="1" />
+        <el-option label="已拒绝" :value="2" />
+      </el-select>
+      <el-input
+        v-model="listQuery.shopName" clearable size="mini" class="filter-item"
+        style="width: 200px;margin-left: 10px;" placeholder="请输入选品会员名称"
+      />
+      <el-input
+        v-model="listQuery.shopPhone" clearable size="mini" class="filter-item"
+        style="width: 200px;margin-left: 10px;" placeholder="请输入注册手机号"
+      />
+      <el-select
+        v-model="listQuery.authenType" clearable size="mini" class="filter-item"
+        style="width: 200px;margin-left: 10px;" placeholder="请选择店铺类型"
+      >
+        <el-option label="个人" :value="1" />
+        <el-option label="个体工商户" :value="2" />
+        <el-option label="企业" :value="3" />
+        <el-option label="其他组织" :value="4" />
+      </el-select>
+      <el-date-picker
+        v-model="listQuery.dates" type="datetimerange" range-separator="至"
+        start-placeholder="开始时间" end-placeholder="结束时间" size="mini"
+        class="filter-item" style="margin-left: 10px;line-height: 1;" value-format="yyyy-MM-dd"
+      />
+      <el-button
+        size="mini" class="filter-item" type="primary" icon="el-icon-search"
+        style="margin-left:10px;"
+        @click="handleSearch"
+      >
+        查找
+      </el-button>
+      <br />
+      <el-button
+        size="mini" type="primary" icon="el-icon-plus"
+        @click="$refs.EditModal && $refs.EditModal.handleOpen({ shopId: '' })"
+      >
+        添加
+      </el-button>
+    </div>
+
+    <!-- 查询结果 -->
+    <div v-tableHeight>
+      <el-table
+        v-loading="listLoading" height="100%" element-loading-text="正在查询中。。。" :data="list"
+        v-bind="{ stripe: true, size: 'small', border: true, fit: true, highlightCurrentRow: true }"
+      >
+        <el-table-column align="center" width="100" label="选品会员ID" prop="shopId" fixed="left" />
+        <el-table-column align="center" label="选品会员名称" prop="shopName">
+          <template slot-scope="{ row }">
+            <span>{{ row.shopName || '--' }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column align="center" label="店铺类型" prop="authenType">
+          <template slot-scope="{ row }">
+            <el-tag v-if="row.authenType === 1" effect="plain">个人</el-tag>
+            <el-tag v-else-if="row.authenType === 2" effect="plain">个体工商户</el-tag>
+            <el-tag v-else-if="row.authenType === 3" effect="plain">企业</el-tag>
+            <el-tag v-else-if="row.authenType === 4" effect="plain">其他组织</el-tag>
+            <span v-else>--</span>
+          </template>
+        </el-table-column>
+        <el-table-column align="center" width="120" label="注册手机号" prop="shopPhone" show-overflow-tooltip />
+        <el-table-column align="center" width="150" label="创建时间" prop="createTime" />
+        <el-table-column align="center" label="操作" width="220" fixed="right" class-name="small-padding fixed-width">
+          <template slot-scope="{ row }">
+            <el-button type="warning" size="mini" @click="handleDetail(row)">
+              详情
+            </el-button>
+            <el-button
+              v-if="listQuery.checkState === 0" size="mini"
+              @click="$refs.ApplicationProcessing && $refs.ApplicationProcessing.handleOpen(row)"
+            >
+              处理
+            </el-button>
+            <el-button
+              v-if="(listQuery.checkState === 1) || (listQuery.checkState === 2)" type="danger"
+              size="mini" @click="handleDelete(row)"
+            >
+              删除
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+
+    <div>
+      <el-pagination
+        :current-page="listQuery.page" :page-sizes="[10, 20, 50, 100]" :page-size="listQuery.pageSize"
+        layout="total, sizes, prev, pager, next, jumper" :total="total"
+        @size-change="(val) => ((listQuery.pageSize = val) && getList())"
+        @current-change="(val) => ((listQuery.page = val) && getList())"
+      />
+    </div>
+
+    <!-- 提现处理 -->
+    <ApplicationProcessing ref="ApplicationProcessing" @success="getList" />
+    <!-- 查看详情 -->
+    <DetailModal ref="DetailModal" />
+  </div>
+</template>
+
+<script>
+
+import ApplicationProcessing from '../../business/settlement/components/ApplicationProcessing'
+import DetailModal from '../../business/settlement/components/DetailModal'
+import { settlementGetAll, settlementDelete } from '@/api/business'
+
+export default {
+  name: 'SelectionMemberSettlement',
+  components: {
+    ApplicationProcessing,
+    DetailModal
+  },
+  data() {
+    return {
+      list: [],
+      total: 0,
+      listLoading: true,
+      listQuery: {
+        shopName: '',
+        shopPhone: '',
+        authenType: '',
+        dates: [],
+        checkState: 0,
+        page: 1,
+        pageSize: 20,
+        shopType: 4
+      }
+    }
+  },
+  created() {
+    this.getList()
+  },
+  methods: {
+    async getList() {
+      this.listLoading = true
+      try {
+        const res = await settlementGetAll(this.listQuery)
+        this.list = res.data.list
+        this.total = res.data.total
+      } finally {
+        this.listLoading = false
+      }
+    },
+    handleSearch() {
+      this.listQuery.page = 1
+      this.getList()
+    },
+    handleDetail(row) {
+      this.$refs.DetailModal && this.$refs.DetailModal.handleOpen(row)
+    },
+    handleDelete(row) {
+      this.$confirm('确定删除此项？')
+        .then(async () => {
+          await settlementDelete({ checkId: row.checkId })
+          this.$message({ message: '删除成功！', type: 'success' })
+          this.handleSearch()
+        })
+        .catch(() => {})
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.app-container {
+	padding: 20px;
+	display: flex;
+	flex-direction: column;
+
+	.filter-container {
+		.filter-item {
+			display: inline-block;
+			vertical-align: middle;
+			margin-bottom: 10px;
+		}
+	}
+
+	.small-padding {
+		.cell {
+			padding-left: 5px;
+			padding-right: 5px;
+		}
+	}
+
+	.fixed-width {
+		.el-button--mini {
+			padding: 7px 10px;
+		}
+	}
+}
+</style>

src/views/supplierManagement/supplierCommodity/index.vue

@@ -0,0 +1,258 @@
+<!-- 供应商商品 -->
+<template>
+  <div class="app-container">
+    <!-- 查询和其他操作 -->
+    <div class="filter-container">
+      <el-select
+        v-model="listQuery.shelveState" clearable size="mini" class="filter-item"
+        style="width: 200px;"
+        placeholder="请选择商品状态"
+      >
+        <el-option label="全部" value="" />
+        <el-option label="已下架" :value="0" />
+        <el-option label="已上架" :value="1" />
+        <el-option label="待审核" :value="2" />
+        <el-option label="审核失败" :value="3" />
+      </el-select>
+      <el-input
+        v-model="listQuery.productId" clearable size="mini" class="filter-item"
+        style="width: 200px;margin-left: 10px;" placeholder="请输入商品ID"
+      />
+      <el-input
+        v-model="listQuery.productName" clearable size="mini" class="filter-item"
+        style="width: 200px;margin-left: 10px;" placeholder="请输入商品名称"
+      />
+      <el-input
+        v-model="listQuery.shopName" clearable size="mini" class="filter-item"
+        style="width: 200px;margin-left: 10px;" placeholder="请输入商户名称"
+      />
+      <el-button
+        size="mini" class="filter-item" type="primary" icon="el-icon-search"
+        style="margin-left:10px;"
+        @click="handleSearch"
+      >
+        查找
+      </el-button>
+      <el-button size="mini" type="info" class="filter-item" @click="handleReset">
+        重置
+      </el-button>
+      <br />
+      <el-button size="mini" type="primary" icon="el-icon-plus" @click="handleProductDataExport">
+        导出商品
+      </el-button>
+    </div>
+
+    <!-- 查询结果 -->
+    <div v-tableHeight>
+      <el-table
+        v-loading="listLoading" height="100%" element-loading-text="正在查询中。。。" :data="list"
+        v-bind="{ stripe: true, size: 'small', border: true, fit: true, highlightCurrentRow: true }"
+      >
+        <el-table-column align="center" width="100" label="商品ID" prop="productId" fixed="left" />
+        <el-table-column align="center" width="100" label="商品主图" prop="image">
+          <template slot-scope="{ row }">
+            <el-image
+              v-if="row.image" lazy :src="common.seamingImgUrl(row.image)" style="width:40px; height:40px"
+              fit="cover" :preview-src-list="[ common.seamingImgUrl(row.image) ]"
+            />
+            <span v-else>--</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="productName" label="商品名称" width="180" />
+        <el-table-column prop="shopName" label="商家名称" width="180" />
+        <el-table-column prop="supplierName" label="供应商名称" width="180" />
+        <el-table-column prop="classifyHierarchy" label="分类层级" width="180" />
+        <el-table-column prop="sectionPrice" label="售价区间" show-overflow-tooltip />
+        <!-- <el-table-column prop="memberSection" label="会员价" show-overflow-tooltip /> -->
+        <el-table-column prop="stockNumber" label="库存" show-overflow-tooltip />
+        <el-table-column prop="volume" label="实际销售" show-overflow-tooltip />
+        <el-table-column prop="fictitiousNumber" label="虚拟销售" show-overflow-tooltip />
+        <el-table-column align="center" width="150" label="创建时间" prop="createTime" />
+        <el-table-column align="center" label="上架状态" prop="shelveState">
+          <template slot-scope="{ row }">
+            <el-tag v-if="row.shelveState === 0">已下架</el-tag>
+            <el-tag v-else-if="row.shelveState === 1">已上架</el-tag>
+            <el-tag v-else-if="row.shelveState === 2">待审核</el-tag>
+            <el-tag v-else-if="row.shelveState === 3">审核失败</el-tag>
+            <span v-else>--</span>
+          </template>
+        </el-table-column>
+        <el-table-column align="center" label="操作" width="220" fixed="right" class-name="small-padding fixed-width">
+          <template slot-scope="{ row }">
+            <el-button v-if="row.shelveState === 1" type="text" @click="handleOffShelf(row)">
+              强制下架
+            </el-button>
+            <el-button
+              v-if="row.shelveState === 1" type="text"
+              @click="$refs.VirtualSales && $refs.VirtualSales.handleOpen(row)"
+            >
+              虚拟销量
+            </el-button>
+            <el-button
+              v-if="row.shelveState === 2" type="danger" size="mini"
+              @click="$refs.ProductReview && $refs.ProductReview.handleOpen(row)"
+            >
+              审核
+            </el-button>
+            <el-button type="warning" size="mini" @click="handleDetail(row)">
+              详情
+            </el-button>
+            <el-button
+              v-if="row.shelveState === 1" type="danger" size="mini"
+              @click="$refs.AddSelection && $refs.AddSelection.handleOpen(row)"
+            >
+              加入选品
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+
+    <div>
+      <el-pagination
+        :current-page="listQuery.page" :page-sizes="[10, 20, 50, 100]" :page-size="listQuery.pageSize"
+        layout="total, sizes, prev, pager, next, jumper" :total="total"
+        @size-change="(val) => ((listQuery.pageSize = val) && getList())"
+        @current-change="(val) => ((listQuery.page = val) && getList())"
+      />
+    </div>
+
+    <!-- 商品审核 -->
+    <ProductReview ref="ProductReview" @success="getList" />
+    <!-- 设置虚拟销量 -->
+    <VirtualSales ref="VirtualSales" @success="getList" />
+    <!-- 加入选品 -->
+    <AddSelection ref="AddSelection" @success="getList" />
+    <!-- 查看详情 -->
+    <DetailModal ref="DetailModal" />
+  </div>
+</template>
+
+<script>
+import {
+  getClassifyGetAll,
+  Forced,
+  productExport
+} from '@/api/commodity'
+import ProductReview from '../../renovation/commoditySystem/components/ProductReview'
+import VirtualSales from '../../renovation/commoditySystem/components/VirtualSales'
+import AddSelection from '../../renovation/commoditySystem/components/AddSelection'
+import DetailModal from '../../renovation/commoditySystem/components/DetailModal'
+
+export default {
+  name: 'SupplierCommodity',
+  components: {
+    ProductReview,
+    VirtualSales,
+    AddSelection,
+    DetailModal
+  },
+  data() {
+    return {
+      list: [],
+      total: 0,
+      listLoading: true,
+      listQuery: {
+        shelveState: '', // 商品状态 0-已下架 1-已上架 2-待审核 3-审核失败
+        productName: '', // 商品名称
+        productId: '', // 商品ID
+        shopName: '', // 商户名称
+        page: 1, // 当前页
+        pageSize: 20,
+        shopType: 3
+      }
+    }
+  },
+  created() {
+    this.getList()
+  },
+  methods: {
+    async getList() {
+      this.listLoading = true
+      try {
+        const res = await getClassifyGetAll(this.listQuery)
+        this.list = res.data.list
+        this.total = res.data.total
+      } finally {
+        this.listLoading = false
+      }
+    },
+    handleSearch() {
+      this.listQuery.page = 1
+      this.getList()
+    },
+    handleReset() {
+      this.listQuery = { shelveState: '', productName: '', productId: '', shopName: '', page: 1, pageSize: 5 }
+      this.getList()
+    },
+    handleDetail(row) {
+      this.$refs.DetailModal && this.$refs.DetailModal.handleOpen(row)
+    },
+    handleOffShelf(row) {
+      this.$confirm('确定下架此商品吗？')
+        .then(async () => {
+          await Forced({ productId: row.productId })
+          this.$message({ message: '下架成功！', type: 'success' })
+          this.handleSearch()
+        })
+        .catch(() => { })
+    },
+    // 导出商品
+    async handleProductDataExport() {
+      this.$message({
+        message: '数据导出中，请勿重复操作！',
+        type: 'success'
+      })
+      const res = await productExport(this.listQuery)
+      if (!res) {
+        return
+      }
+      const blob = new Blob([ res ], { type: 'application/vnd.ms-excel' })
+      const fileName = '商品数据明细表.xls'
+      if ('download' in document.createElement('a')) {
+        // 非IE下载
+        const elink = document.createElement('a')
+        elink.download = fileName
+        elink.style.display = 'none'
+        elink.href = URL.createObjectURL(blob)
+        document.body.appendChild(elink)
+        elink.click()
+        URL.revokeObjectURL(elink.href) // 释放URL 对象
+        document.body.removeChild(elink)
+      } else {
+        // IE10+下载
+        navigator.msSaveBlob(blob, fileName)
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.app-container {
+	padding: 20px;
+	display: flex;
+	flex-direction: column;
+
+	.filter-container {
+		.filter-item {
+			display: inline-block;
+			vertical-align: middle;
+			margin-bottom: 10px;
+		}
+	}
+
+	.small-padding {
+		.cell {
+			padding-left: 5px;
+			padding-right: 5px;
+		}
+	}
+
+	.fixed-width {
+		.el-button--mini {
+			padding: 7px 10px;
+		}
+	}
+}
+</style>

src/views/supplierManagement/supplierList/index.vue

@@ -0,0 +1,226 @@
+<!-- 供应商列表 -->
+<template>
+  <div class="app-container">
+    <!-- 查询和其他操作 -->
+    <div class="filter-container">
+      <el-input
+        v-model="listQuery.shopName" clearable size="mini" class="filter-item"
+        style="width: 200px;"
+        placeholder="请输入供应商名称"
+      />
+      <el-input
+        v-model="listQuery.shopCode" clearable size="mini" class="filter-item"
+        style="width: 200px;margin-left: 10px;" placeholder="请输入供应商编码"
+      />
+      <el-input
+        v-model="listQuery.chargePersonName" clearable size="mini" class="filter-item"
+        style="width: 200px;margin-left: 10px;" placeholder="请输入负责人"
+      />
+      <el-select
+        v-model="listQuery.contractState" clearable size="mini" class="filter-item"
+        style="width: 200px;margin-left: 10px;" placeholder="请选择合同状态"
+      >
+        <el-option label="有效" :value="1" />
+        <el-option label="无效" :value="0" />
+      </el-select>
+      <el-button
+        size="mini" class="filter-item" type="primary" icon="el-icon-search"
+        style="margin-left:10px;"
+        @click="handleSearch"
+      >
+        查找
+      </el-button>
+      <br />
+      <el-button
+        size="mini" type="primary" icon="el-icon-plus"
+        @click="$refs.EditModal && $refs.EditModal.handleOpen({ shopId: '' })"
+      >
+        新建商家
+      </el-button>
+    </div>
+
+    <!-- 查询结果 -->
+    <div v-tableHeight>
+      <el-table
+        v-loading="listLoading" height="100%" element-loading-text="正在查询中。。。" :data="list"
+        v-bind="{ stripe: true, size: 'small', border: true, fit: true, highlightCurrentRow: true }"
+      >
+        <el-table-column label="供应商名称" width="220">
+          <template slot-scope="scope">{{ scope.row.shopName }}</template>
+        </el-table-column>
+        <el-table-column prop="shopCode" label="供应商编码" />
+        <el-table-column label="是否支持消费金">
+          <template slot-scope="scope">
+            <span v-if="scope.row.isBeeCoin === 1">支持</span>
+            <span v-else-if="scope.row.isBeeCoin === 2">不支持</span>
+            <span v-else>--</span>
+          </template>
+        </el-table-column>
+        <!-- <el-table-column align="center" min-width="120" label="商家消费金提现比例" prop="beecoinRatio">
+          <template slot-scope="{ row }">
+          <span v-if="row.beeCoinRatio">{{ row.beeCoinRatio }}：1</span>
+          <span v-else>--</span>
+          </template>
+          </el-table-column> -->
+        <el-table-column prop="chargePersonName" label="负责人" />
+        <el-table-column prop="chargePersonPhone" label="联系电话" />
+        <el-table-column label="合同状态">
+          <template slot-scope="scope">
+            <span v-if="scope.row.contractState === 0">无效</span>
+            <span v-if="scope.row.contractState === 1">有效</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="createTime" label="创建时间" />
+        <el-table-column align="center" label="操作" width="280" fixed="right" class-name="small-padding fixed-width">
+          <template slot-scope="{ row }">
+            <el-button type="warning" size="mini" @click="handleDetail(row)">
+              详情
+            </el-button>
+            <el-button size="mini" @click="handleEdit(row)">
+              编辑
+            </el-button>
+            <el-button v-if="row.state == 1" type="text" @click="handleDisabled(row)">
+              禁用
+            </el-button>
+            <el-button v-else type="text" @click="handleEnable(row)">
+              启用
+            </el-button>
+            <el-button type="danger" size="mini" @click="handleDelete(row)">
+              删除
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+
+    <div>
+      <el-pagination
+        :current-page="listQuery.page" :page-sizes="[10, 20, 50, 100]" :page-size="listQuery.pageSize"
+        layout="total, sizes, prev, pager, next, jumper" :total="total"
+        @size-change="(val) => ((listQuery.pageSize = val) && getList())"
+        @current-change="(val) => ((listQuery.page = val) && getList())"
+      />
+    </div>
+
+    <!-- 新增编辑 -->
+    <EditModal ref="EditModal" @success="getList" />
+    <!-- 查看详情 -->
+    <DetailModal ref="DetailModal" />
+  </div>
+</template>
+
+<script>
+import EditModal from '../../business/businessList/components/EditModal'
+import DetailModal from '../../business/businessList/components/DetailModal'
+import {
+  businessListGetAll,
+  businessListStart,
+  delBusinessById
+} from '@/api/business'
+
+export default {
+  name: 'BusinessList',
+  components: {
+    EditModal,
+    DetailModal
+  },
+  data() {
+    // 这里存放数据
+    return {
+      list: [],
+      total: 0,
+      listLoading: true,
+      listQuery: {
+        page: 1,
+        pageSize: 20,
+        shopName: '',
+        shopCode: '',
+        chargePersonName: '',
+        contractState: '',
+        shopType: 3
+      }
+    }
+  },
+  created() {
+    this.getList()
+  },
+  methods: {
+    async getList() {
+      this.listLoading = true
+      try {
+        const res = await businessListGetAll(this.listQuery)
+        this.list = res.data.list
+        this.total = res.data.total
+      } finally {
+        this.listLoading = false
+      }
+    },
+    handleSearch() {
+      this.listQuery.page = 1
+      this.getList()
+    },
+    handleDetail(row) {
+      this.$refs.DetailModal && this.$refs.DetailModal.handleOpen(row)
+    },
+    handleEdit(row) {
+      this.$refs.EditModal && this.$refs.EditModal.handleOpen(row)
+    },
+    handleDelete(row) {
+      this.$confirm('确定删除此项？')
+        .then(async () => {
+          await delBusinessById({ shopId: row.shopId })
+          this.$message({ message: '删除成功！', type: 'success' })
+          this.handleSearch()
+        })
+        .catch(() => {})
+    },
+    handleDisabled(row) {
+      this.$confirm('确定停用此项？')
+        .then(async () => {
+          await businessListStart({ shopName: row.shopName, state: 0, shopId: row.shopId })
+          this.$message({ message: '停用成功！', type: 'success' })
+          this.handleSearch()
+        })
+        .catch(() => {})
+    },
+    handleEnable(row) {
+      this.$confirm('确定启用此项？')
+        .then(async () => {
+          await businessListStart({ shopName: row.shopName, state: 1, shopId: row.shopId })
+          this.$message({ message: '启用成功！', type: 'success' })
+          this.handleSearch()
+        })
+        .catch(() => {})
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.app-container {
+	padding: 20px;
+	display: flex;
+	flex-direction: column;
+
+	.filter-container {
+		.filter-item {
+			display: inline-block;
+			vertical-align: middle;
+			margin-bottom: 10px;
+		}
+	}
+
+	.small-padding {
+		.cell {
+			padding-left: 5px;
+			padding-right: 5px;
+		}
+	}
+
+	.fixed-width {
+		.el-button--mini {
+			padding: 7px 10px;
+		}
+	}
+}
+</style>

src/views/supplierManagement/supplierSettlement/index.vue

@@ -0,0 +1,203 @@
+<!-- 供应商入驻 -->
+<template>
+  <div class="app-container">
+    <!-- 查询和其他操作 -->
+    <div class="filter-container">
+      <el-select
+        v-model="listQuery.checkState" clearable size="mini" class="filter-item"
+        style="width: 200px;" placeholder="请选择审核状态"
+      >
+        <el-option label="待处理" :value="0" />
+        <el-option label="已通过" :value="1" />
+        <el-option label="已拒绝" :value="2" />
+      </el-select>
+      <el-input
+        v-model="listQuery.shopName" clearable size="mini" class="filter-item"
+        style="width: 200px;margin-left: 10px;" placeholder="请输入供应商名称"
+      />
+      <el-input
+        v-model="listQuery.shopPhone" clearable size="mini" class="filter-item"
+        style="width: 200px;margin-left: 10px;" placeholder="请输入注册手机号"
+      />
+      <el-select
+        v-model="listQuery.authenType" clearable size="mini" class="filter-item"
+        style="width: 200px;margin-left: 10px;" placeholder="请选择店铺类型"
+      >
+        <el-option label="个人" :value="1" />
+        <el-option label="个体工商户" :value="2" />
+        <el-option label="企业" :value="3" />
+        <el-option label="其他组织" :value="4" />
+      </el-select>
+      <el-date-picker
+        v-model="listQuery.dates" type="datetimerange" range-separator="至"
+        start-placeholder="开始时间" end-placeholder="结束时间" size="mini"
+        class="filter-item" style="margin-left: 10px;line-height: 1;" value-format="yyyy-MM-dd"
+      />
+      <el-button
+        size="mini" class="filter-item" type="primary" icon="el-icon-search"
+        style="margin-left:10px;"
+        @click="handleSearch"
+      >
+        查找
+      </el-button>
+      <br />
+      <el-button
+        size="mini" type="primary" icon="el-icon-plus"
+        @click="$refs.EditModal && $refs.EditModal.handleOpen({ shopId: '' })"
+      >
+        添加
+      </el-button>
+    </div>
+
+    <!-- 查询结果 -->
+    <div v-tableHeight>
+      <el-table
+        v-loading="listLoading" height="100%" element-loading-text="正在查询中。。。" :data="list"
+        v-bind="{ stripe: true, size: 'small', border: true, fit: true, highlightCurrentRow: true }"
+      >
+        <el-table-column align="center" width="100" label="供应商ID" prop="shopId" fixed="left" />
+        <el-table-column align="center" label="供应商名称" prop="shopName">
+          <template slot-scope="{ row }">
+            <span>{{ row.shopName || '--' }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column align="center" label="店铺类型" prop="authenType">
+          <template slot-scope="{ row }">
+            <el-tag v-if="row.authenType === 1" effect="plain">个人</el-tag>
+            <el-tag v-else-if="row.authenType === 2" effect="plain">个体工商户</el-tag>
+            <el-tag v-else-if="row.authenType === 3" effect="plain">企业</el-tag>
+            <el-tag v-else-if="row.authenType === 4" effect="plain">其他组织</el-tag>
+            <span v-else>--</span>
+          </template>
+        </el-table-column>
+        <el-table-column align="center" width="120" label="注册手机号" prop="shopPhone" show-overflow-tooltip />
+        <el-table-column align="center" width="150" label="创建时间" prop="createTime" />
+        <el-table-column align="center" label="操作" width="220" fixed="right" class-name="small-padding fixed-width">
+          <template slot-scope="{ row }">
+            <el-button type="warning" size="mini" @click="handleDetail(row)">
+              详情
+            </el-button>
+            <el-button
+              v-if="listQuery.checkState === 0" size="mini"
+              @click="$refs.ApplicationProcessing && $refs.ApplicationProcessing.handleOpen(row)"
+            >
+              处理
+            </el-button>
+            <el-button
+              v-if="(listQuery.checkState === 1) || (listQuery.checkState === 2)" type="danger"
+              size="mini" @click="handleDelete(row)"
+            >
+              删除
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+
+    <div>
+      <el-pagination
+        :current-page="listQuery.page" :page-sizes="[10, 20, 50, 100]" :page-size="listQuery.pageSize"
+        layout="total, sizes, prev, pager, next, jumper" :total="total"
+        @size-change="(val) => ((listQuery.pageSize = val) && getList())"
+        @current-change="(val) => ((listQuery.page = val) && getList())"
+      />
+    </div>
+
+    <!-- 提现处理 -->
+    <ApplicationProcessing ref="ApplicationProcessing" @success="getList" />
+    <!-- 查看详情 -->
+    <DetailModal ref="DetailModal" />
+  </div>
+</template>
+
+<script>
+
+import ApplicationProcessing from '../../business/settlement/components/ApplicationProcessing'
+import DetailModal from '../../business/settlement/components/DetailModal'
+import { settlementGetAll, settlementDelete } from '@/api/business'
+
+export default {
+  name: 'SupplierSettlement',
+  components: {
+    ApplicationProcessing,
+    DetailModal
+  },
+  data() {
+    return {
+      list: [],
+      total: 0,
+      listLoading: true,
+      listQuery: {
+        shopName: '',
+        shopPhone: '',
+        authenType: '',
+        dates: [],
+        checkState: 0,
+        page: 1,
+        pageSize: 20,
+        shopType: 3
+      }
+    }
+  },
+  created() {
+    this.getList()
+  },
+  methods: {
+    async getList() {
+      this.listLoading = true
+      try {
+        const res = await settlementGetAll(this.listQuery)
+        this.list = res.data.list
+        this.total = res.data.total
+      } finally {
+        this.listLoading = false
+      }
+    },
+    handleSearch() {
+      this.listQuery.page = 1
+      this.getList()
+    },
+    handleDetail(row) {
+      this.$refs.DetailModal && this.$refs.DetailModal.handleOpen(row)
+    },
+    handleDelete(row) {
+      this.$confirm('确定删除此项？')
+        .then(async () => {
+          await settlementDelete({ checkId: row.checkId })
+          this.$message({ message: '删除成功！', type: 'success' })
+          this.handleSearch()
+        })
+        .catch(() => {})
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.app-container {
+	padding: 20px;
+	display: flex;
+	flex-direction: column;
+
+	.filter-container {
+		.filter-item {
+			display: inline-block;
+			vertical-align: middle;
+			margin-bottom: 10px;
+		}
+	}
+
+	.small-padding {
+		.cell {
+			padding-left: 5px;
+			padding-right: 5px;
+		}
+	}
+
+	.fixed-width {
+		.el-button--mini {
+			padding: 7px 10px;
+		}
+	}
+}
+</style>

vue.config.js

@@ -42,16 +42,16 @@ module.exports = {
     // before: require('./mock/mock-server.js'),
     proxy: {
       '/api': {
-        // target: 'https://nsadminapitest.tuanfengkeji.cn', // 测试
-        target: 'http://192.168.0.91:9103', // 平台端
+        target: 'https://nsadminapitest.tuanfengkeji.cn', // 测试
+        // target: 'http://192.168.0.91:9103', // 平台端
         changeOrigin: true,
         pathRewrite: {
           '^/api': ''
         }
       },
       '/adminapi': {
-        // target: 'https://nsadminapitest.tuanfengkeji.cn', // 测试
-        target: 'http://192.168.0.91:9103', // 平台端
+        target: 'https://nsadminapitest.tuanfengkeji.cn', // 测试
+        // target: 'http://192.168.0.91:9103', // 平台端
         changeOrigin: true,
         pathRewrite: {
           '^/adminapi': ''