2023.11.17 - 品牌工厂

src/api/business.js

@@ -192,3 +192,59 @@ export function addBusinessClass(data) {
     method: "post"
   })
 }
+
+
+// **********品牌工厂***********
+// 获取所有分类
+
+export function factoryClassList(data) {
+  return request({
+    url: '/shopCategoryMall/getAll',
+    method: "post",
+    data
+  })
+}
+
+export function factoryClassListById(data) {
+  return request({
+    url: "/shopCategoryMall/getById",
+    method: "post",
+    data
+  })
+}
+
+// 删除标签分类
+export function deleteFactoryClass(data) {
+  return request({
+    url: "/shopCategoryMall/deleteCategory",
+    method: "post",
+    data
+  })
+}
+
+// 更新标签
+export function updateFactoryClass(data) {
+  return request({
+    url: "/shopCategoryMall/updateCategory",
+    method: "post",
+    data
+  })
+}
+
+// 添加分类
+export function addFactoryClass(data) {
+  return request({
+    url: '/shopCategoryMall/addCategory',
+    data,
+    method: "post"
+  })
+}
+
+// 获取所有分类树
+export function getAllCategoryClassTree(data) {
+  return request({
+    url: "shopCategory/getAllTree",
+    data,
+    method: "get"
+  })
+}

src/views/brandFactory/factoryClass/Edit.vue

@@ -0,0 +1,530 @@
+<template>
+  <el-dialog :close-on-click-modal="false" :title="title" :type="type" :visible.sync="isVisible" center width="48%"
+    top="50px" class="group-dialog">
+    <div class="add-dialog-component">
+      <el-alert :style="{ backgroundColor: '#fff' }" title="保存后将生效在移动端的分类里" type="info" :closable="false" />
+      <el-tree class="tree-box" :data="treeData" :props="{ children: 'childs' }" node-key="id" default-expand-all
+        :expand-on-click-node="false">
+
+        <div slot-scope="{ node, data }" class="custom-tree-node">
+          <div class="content">
+            <template v-if="data.depth < 3">
+              <el-input v-model="data.categoryName" class="input" :disabled="isCheck" maxlength="6" size="mini"
+                :placeholder="data.depth | placeholderTips" />
+
+              <el-upload class="upload-uploader" :on-success="handleImageSuccessOne" :multiple="false"
+                :show-file-list="false" :action="action" :file-list="data.categoryImgArray">
+                <img v-if="data.categoryImgArray.length && data.categoryImgArray[0].imgPath" width="80" height="80"
+                  :src="data.categoryImgArray.length && data.categoryImgArray[0].imgPath">
+                <i v-else class="el-icon-plus" />
+              </el-upload>
+            </template>
+            <template v-else>
+              <div class="content" :class="isCheck ? 'disabled' : ''">
+                <el-input v-model="data.categoryName" class="input" :disabled="isCheck" size="mini" maxlength="6"
+                  placeholder="输入三级类别名称（最大6个字符）" />
+                <el-upload :headers="headers" :data="dataObj" :multiple="false" :show-file-list="false"
+                  :file-list="data.categoryImgArray" :on-success="handleImageSuccess" class="upload-uploader"
+                  :action="action">
+                  <img v-if="data.categoryImgArray && data.categoryImgArray[0].url
+                    " width="80" height="80" :src="data.categoryImgArray && data.categoryImgArray[0].url
+    ">
+                  <i v-else class="el-icon-plus" />
+                </el-upload>
+              </div>
+            </template>
+          </div>
+          <div v-if="!isCheck" class="setting-box">
+            <el-button type="text" size="mini" @click="() => append(data)">
+              {{ data.depth | addTips }}
+            </el-button>
+            <el-button type="text" size="mini" @click="() => remove(node, data)">
+              删除
+            </el-button>
+          </div>
+        </div>
+      </el-tree>
+      <div class="add-btn-wrap">
+        <template v-if="isCheck">
+          <el-button class="add" type="primary" size="small" @click="close">
+            确定
+          </el-button>
+        </template>
+        <template v-else>
+          <el-button v-if="type === 'add'" class="add" type="primary" size="small" @click="addClassification">
+            添加一级类别名称
+          </el-button>
+          <el-button type="primary" size="small" @click="onSubmit">
+            保存
+          </el-button>
+        </template>
+      </div>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import { uploadUrl } from '@/utils/request'
+
+import { factoryClassListById, updateFactoryClass, addFactoryClass } from '../../../api/business'
+import { fullPicUrl } from '../../../utils'
+
+let idx = 1000
+let imgId = 1
+export default {
+  filters: {
+    addTips(depth) {
+      depth = depth + ''
+      const tipsMp = {
+        1: '添加二级类别名称',
+        2: '添加三级类别名称'
+      }
+      return tipsMp[depth]
+    },
+    placeholderTips(depth) {
+      depth = depth + ''
+      const tipsMp = {
+        1: '输入一级类别名称（最大6个字符）',
+        2: '输入二级类别名称（最大6个字符）'
+      }
+      return tipsMp[depth]
+    }
+  },
+  props: {
+    dialogVisible: {
+      type: Boolean,
+      default: false
+    },
+    type: {
+      type: String,
+      default: 'add'
+    }
+  },
+  data() {
+    return {
+      params: {
+        categoryName: ''
+      },
+      file: this.image ? this.image : '',
+      imgList: [],
+      customParams: {
+        current: 1,
+        map: {},
+        model: {
+          config: '',
+          isCustom: true,
+          isDelete: 0,
+          name: ''
+        },
+        order: 'descending',
+        size: 100,
+        sort: 'id'
+      },
+      treeData: [],
+      headers: {
+        Authorization: ''
+      },
+      action: uploadUrl,
+      dataObj: {
+        folderId: 1
+      },
+      deleteArr: []
+    }
+  },
+  computed: {
+    isVisible: {
+      get() {
+        return this.dialogVisible
+      },
+      set() {
+        this.close()
+        this.reset()
+      }
+    },
+    title() {
+      const stateMap = {
+        add: '新建类别',
+        edit: '修改类别',
+        check: '查看类别'
+      }
+      return stateMap[this.type]
+    },
+    isCheck() {
+      return this.type === 'check'
+    }
+  },
+  async created() {
+    /*
+    const res = await getSelect({
+      dictName: '商品类别链接'
+    })
+    console.log(res)
+    this.dictList = res.data
+    */
+  },
+  methods: {
+    async queryOneCategory(oneClassifyId) {
+      console.log(oneClassifyId)
+      if (oneClassifyId === undefined) {
+        this.treeData = []
+        return
+      }
+      const res = await factoryClassListById({
+        oneClassifyId
+      })
+      console.log(res)
+      const resData = res.data
+      const treeFilter = (item) => {
+        const {
+          level: depth, storeName: categoryName, categoryPath, link, id, picUrl, parentName
+        } = item
+
+        const categoryImgArray = picUrl ? [{ imgPath: fullPicUrl(picUrl) }] : []
+        const newMap = {
+          depth,
+          categoryName,
+          categoryPath: categoryPath || '',
+          parentName,
+          categoryImgArray,
+          link,
+          id
+        }
+        console.log(depth)
+        if (depth == 3) {
+          newMap.categoryImgArray = [
+            {
+              url: picUrl ? fullPicUrl(picUrl) : 'https://jufeng-shop-1317254189.cos.ap-guangzhou.myqcloud.com/rrl9aiojchn29z7q079k.png'
+            }
+          ]
+        }
+        if (item.childs && item.childs.length) {
+          newMap.childs = item.childs.map(treeFilter)
+        }
+        return newMap
+      }
+      if (resData) {
+        resData.categoryName = resData.storeName
+        resData.depth = 1
+        resData.categoryImg = fullPicUrl(resData.picUrl)
+        resData.categoryImgArray = [{
+          status: 'success',
+          uid: Date.now() + Math.random(),
+          imgPath: fullPicUrl(resData.picUrl)
+        }]
+        resData.childs =
+          resData && resData.childs && resData.childs.map(treeFilter)
+        this.treeData = [resData]
+      } else {
+        this.treeData = []
+      }
+      console.log(this.treeData)
+    },
+    handleImageSuccess(response, file, fileList) {
+      console.log(response)
+      const url = response.data.url
+      fileList[0].url = url
+    },
+    handleImageSuccessOne(response, file, fileList) {
+      const url = response.data.url
+      console.log(fileList)
+      fileList[0].imgPath = url
+    },
+    close() {
+      this.$emit('close')
+    },
+    reset() {
+      this.treeData = []
+    },
+    addClassification() {
+      this.treeData.push({
+        placeholder: '输入一级类别名称',
+        addTips: '添加二级类别名称',
+        categoryName: '',
+        categoryPath: '',
+        depth: 1,
+        idx: idx++,
+        categoryImgArray: [
+          {
+            id: imgId++,
+            imgPath: ''
+          }
+        ]
+      })
+    },
+    append(data) {
+      console.log(data)
+      const { categoryName } = data
+      const depth = data.depth + 1
+      let newChild
+      if (!data.childs) {
+        this.$set(data, 'childs', [])
+      }
+      if (depth < 3) {
+        newChild = {
+          placeholder: '输入二级类别名称',
+          addTips: '添加三级类别名称',
+          depth,
+          parentName: categoryName,
+          categoryName: '',
+          categoryPath: '',
+          categoryImgArray: [
+            {
+              id: imgId++,
+              imgPath: ''
+            }
+          ],
+          childs: [],
+          idx: idx++
+        }
+      } else {
+        newChild = {
+          parentName: categoryName,
+          categoryImgArray: [
+            {
+              id: imgId++,
+              url: ''
+            }
+          ],
+          depth: 3,
+          categoryName: '',
+          idx: idx++
+        }
+      }
+      data.childs.push(newChild)
+    },
+    remove(node, data) {
+      const parent = node.parent
+      const children = parent.data.childs || parent.data
+      const index = children.findIndex((d) => d.idx === data.idx)
+      if (index !== -1) {
+        children.splice(index, 1)
+        this.deleteArr.push(data.id || '')
+      } else {
+        this.$message.warning('数据错误，请重试')
+      }
+    },
+    onSubmit() {
+      console.log(this.type)
+      if (this.type === 'add') {
+        this.addGroup()
+      } else {
+        this.updateGroup()
+      }
+    },
+    async addGroup() {
+      console.log(this.treeData)
+      const treeFilter = (item) => {
+        const {
+          categoryName,
+          categoryImgArray,
+          parentName,
+          depth,
+          id
+        } = item
+        const newMap = {
+          id,
+          storeName: categoryName,
+          picUrl: '',
+          parentName
+        }
+        if (categoryImgArray) {
+
+          if (depth == 3) {
+            newMap.picUrl = categoryImgArray[0].url
+          } else {
+            newMap.picUrl = categoryImgArray[0].imgPath
+          }
+        }
+
+        if (!newMap.picUrl) {
+          this.$message.error('分类\"' + categoryName + '\"请上传分类图片')
+          throw new Error('未上传分类图片')
+        }
+        if (item.childs && item.childs.length) {
+          newMap.childs = item.childs.map(treeFilter)
+        }
+        return newMap
+      }
+      const params = this.treeData.map(treeFilter)
+
+      if (params.length === 0) {
+        this.$message.error('请添加分类')
+        return
+      }
+      const obj = {
+        shopCategory: params
+      }
+      const res = await addFactoryClass(obj)
+      if (res.code === '') {
+        this.isVisible = false
+        this.$message({
+          message: '新增成功',
+          type: 'success'
+        })
+        this.$emit('success')
+        this.deleteArr = []
+      }
+    },
+    async updateGroup() {
+      const treeFilter = (item) => {
+        const {
+          categoryName,
+          categoryImgArray,
+          depth,
+          id,
+        } = item
+        const newMap = {
+          id,
+          storeName: categoryName,
+          picUrl: ''
+        }
+
+        if (categoryImgArray && categoryImgArray[0]) {
+          if (depth == 3) {
+            newMap.picUrl = categoryImgArray[0].url
+          } else {
+            newMap.picUrl = categoryImgArray[0].imgPath
+          }
+        }
+
+        if (!newMap.picUrl) {
+          this.$message.error('分类\"' + categoryName + '\"请上传分类图片')
+          throw new Error('未上传分类图片')
+        }
+        if (item.childs && item.childs.length) {
+          newMap.childs = item.childs.map(treeFilter)
+        }
+        return newMap
+      }
+      console.log(this.treeData)
+      const params = this.treeData.map(treeFilter)
+
+      const obj = {
+        shopCategory: params,
+        deleteIds: this.deleteArr
+      }
+      const res = await updateFactoryClass(obj)
+      if (res.code === '') {
+        this.isVisible = false
+        this.$message({
+          message: '成功',
+          type: 'success'
+        })
+        this.$emit('success')
+        this.deleteArr = []
+      }
+    },
+    setParams({ id }) {
+      console.log(id)
+      this.queryOneCategory(id)
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.add-dialog-component {
+  .tree-box {
+    .el-tree-node__content {
+      margin-bottom: 15px;
+      height: auto;
+    }
+  }
+}
+</style>
+
+<style
+  lang="scss"
+  scoped
+>
+@import url("../../../styles/elDialog.scss");
+
+.group-dialog {
+  .el-dialog {
+    min-width: 500px;
+    max-width: 600px;
+  }
+}
+
+.add-dialog-component {
+  padding: 15px 20px;
+  max-height: 60vh;
+  overflow: auto;
+
+  .el-tree-node__content {
+    &:hover {
+      background-color: #fff;
+    }
+  }
+
+  .tree-box {
+    margin: 15px 0;
+
+    .custom-tree-node {
+      display: flex;
+      width: 100%;
+      text-align: left;
+
+      .content {
+        flex: 1;
+        display: flex;
+        align-items: center;
+
+        .input {
+          width: 60%;
+          margin-right: 20px;
+        }
+
+        .textarea-input {
+          width: 100%;
+          margin-left: 15px;
+
+          textarea {
+            height: 80px;
+          }
+        }
+      }
+
+      .level-3-wrap {
+        display: flex;
+        width: 300px;
+
+        .upload-wrap {
+          position: relative;
+
+          &.disabled::after {
+            content: "";
+            position: absolute;
+            left: 0;
+            right: 0;
+            top: 0;
+            bottom: 0;
+            z-index: 999;
+            background-color: #f5f7fa;
+            opacity: 0.5;
+          }
+
+          .el-upload {
+            border: 1px dashed #d9d9d9;
+          }
+
+          i {}
+
+          img {
+            width: 80px;
+            height: 80px;
+          }
+        }
+      }
+    }
+  }
+
+  .add-btn-wrap {
+    text-align: center;
+  }
+}
+
+.upload-uploader {
+  margin-left: 30px;
+}
+</style>

src/views/brandFactory/factoryClass/index.vue

@@ -0,0 +1,160 @@
+<template>
+  <div class="classification-page">
+    <div class="toolbar">
+      <el-button type="success" @click="addBar">添加一级类别</el-button>
+    </div>
+    <el-table :data="tableData" style="width: 100%" border row-key="id"
+      :header-cell-style="{ background: '#EEF3FF', color: '#333333' }" :tree-props="{ children: 'childs' }">
+      <el-table-column prop="storeName" label="分类名称" />
+      <el-table-column prop="picUrl" label="分类图片">
+        <template slot-scope="scope">
+          <span v-if="!scope.row.picUrl">未上传</span>
+          <el-image v-else style="width: 80px; height: 80px" :src="fullPicUrl(scope.row.picUrl)" fit="contain" />
+        </template>
+      </el-table-column>
+      <el-table-column prop="status" label="操作">
+        <template slot-scope="scope">
+          <el-button type="text" @click.native.prevent="checkRow(scope.row)">查看</el-button>
+          <el-button type="text" @click.native.prevent="updateRow(scope.row)">编辑</el-button>
+          <el-button type="text" @click.native.prevent="deleteRow(scope.row)">删除</el-button>
+        </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>
+    <EditDialog ref="edit" :dialog-visible="dialog.isVisible" :type="dialog.type" @close="editClose"
+      @success="getProductCategory" />
+  </div>
+</template>
+
+<script>
+import { fullPicUrl } from '@/utils'
+import { factoryClassList, deleteFactoryClass } from '@/api/business'
+import EditDialog from './Edit'
+export default {
+  components: {
+    EditDialog
+  },
+  data() {
+    return {
+      dialogVisible: false,
+      formParams: {
+        page: 1,
+        pageSize: 10
+      },
+      total: 1,
+      tableData: [],
+      currentPage: 1,
+      dialog: {
+        type: 'add',
+        isVisible: false
+      }
+    }
+  },
+  created() {
+    this.getProductCategory()
+    this.getAll(this.formParams)
+  },
+  methods: {
+    fullPicUrl,
+    handleSizeChange(val) {
+      this.formParams.pageSize = val
+      this.getAll(this.formParams)
+    },
+    handleCurrentChange(val) {
+      this.formParams.page = val
+      this.getAll(this.formParams)
+    },
+    fetch(config) {
+      const { limit, page } = config
+      this.formParams.pageIndex = page || 1
+      this.formParams.pageSize = limit || 10
+      this.getProductCategory()
+    },
+    addBar() {
+      this.dialog = {
+        type: 'add',
+        isVisible: true
+      }
+      this.$refs.edit.setParams({ treeData: [] })
+    },
+    editClose() {
+      this.dialog.isVisible = false
+    },
+    // 编辑
+    updateRow(row) {
+      const id = row.id
+      this.dialog = {
+        type: 'edit',
+        isVisible: true
+      }
+      this.$refs.edit.setParams({
+        id
+      })
+    },
+    // 查看
+    checkRow(row) {
+      console.log("你怎么回事");
+      console.log(row);
+      const id = row.id
+      this.dialog = {
+        type: 'check',
+        isVisible: true
+      }
+      this.$refs.edit.setParams({
+        id
+      })
+    },
+    // 删除
+    async deleteRow(row) {
+      this.$confirm('此操作将永久删除该类别, 是否继续?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      })
+        .then(() => {
+          deleteFactoryClass({ oneClassifyId: row.id }).then((res) => {
+            if (res.code === '') {
+              this.$message({
+                type: 'success',
+                message: '删除成功!'
+              })
+            }
+            this.getAll(this.formParams)
+          })
+        })
+        .catch(() => {
+          this.$message({
+            type: 'info',
+            message: '已取消删除'
+          })
+        })
+    },
+
+    async getProductCategory() {
+      this.getAll(this.formParams)
+    },
+    async getAll(formParams) {
+      const res = await factoryClassList(formParams)
+      this.tableData = res.data.records
+      this.total = res.data.total
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import url("../../../styles/elDialog.scss");
+
+.classification-page {
+  padding: 15px 20px;
+
+  .toolbar {
+    margin-bottom: 15px;
+    text-align: right;
+  }
+}
+</style>

src/views/brandFactory/factoryList/index.vue

@@ -0,0 +1,913 @@
+<!--  -->
+<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">
+              查询
+            </el-button>
+            <el-button type="success" plain @click="addbuss">
+              新建商家
+            </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 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="30%" 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="120px">
+                <el-form-item label="店铺名称" prop="shopName">
+                  <el-input v-model="ruleForm.shopName" maxlength="20" :disabled="disabled" />
+                </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 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="直播间审核" 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="annualLimit" label="经营年限">
+                  <el-input :disabled="disabled" placeholder="请输入公司经营年限" v-model="ruleForm.annualLimit"
+                    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-form-item prop="label" label="描述标签">
+                  <el-input :disabled="disabled" autosize maxlength="250" show-word-limit type="textarea"
+                    placeholder="请输入商家描述标签，每个标签使用,(必须是英文的)隔开，最多填写5个标签，如：品牌老店,童叟无欺,其他" v-model="ruleForm.label"
+                    closeable></el-input>
+                </el-form-item>
+
+                <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>
+
+    <!-- 选择经纬度 -->
+    <SelectAddressMap ref="selectAddressMapRef" @select="handleSelectLngAndLat"></SelectAddressMap>
+  </div>
+</template>
+
+<script>
+// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
+// 例如：import 《组件名称》 from '《组件路径》';
+import {
+  businessListGetAll,
+  businessListSave,
+  businessListGetById,
+  businessListUpdate,
+  businessListStart,
+  delBusinessById
+} from '@/api/business'
+import { uploadUrl } from '@/utils/request'
+import { getProvinceList, getChildAreaList } from '@/api/address'
+import { factoryClassList } from '@/api/business'
+import SelectAddressMap from '@/views/business/businessList/components/SelectAddressMap'
+
+export default {
+  // eslint-disable-next-line vue/match-component-file-name
+  name: 'BusinessList',
+  components: { SelectAddressMap },
+  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: {
+        shopName: '', // 店铺名称
+        shopCode: '', // 店铺编码
+        chargePersonName: '', // 店铺负责人
+        contractState: '', // 合同状态 1-有效 0-无效
+        page: '1', // 当前页
+        pageSize: '10', // 每页记录数
+        shopType: 1
+      },
+      disabled: false,
+      ruleForm: {
+        shopName: '', // 店铺名称
+        chargePersonName: '', // 店铺负责人
+        chargePersonPhone: '', // 负责人电话
+        shopType: 1, // 店铺类型 1商城 2本地
+        isVoucher: 1, // 是否支持代金卷 1 true 2 false
+        shopAdress: '', // 地址
+        effectiveDate: '', // 生效日期
+        effectiveYear: '', // 生效年限
+        contractState: 1, // 合同状态 1-有效 0-无效
+        auditLive: 1,
+        auditLiveProduct: 1,
+        shopPhone: '', // 账号
+        shopPassword: '', // 密码
+        perCapita: "", //人均
+        score: 5, // 评分
+        advertisement: '',
+        classificationId: null, // 商家分类id
+        startTime: "",
+        endTime: "",
+        shopBrief: '', // 商家簡介
+        annualLimit: '', // 经营年限 
+        label: '', // 描述标签
+      },
+      showPhone: false,
+      showAddress: false,
+      userPhone: '',
+      showUserPhone: false,
+      newAddress: '',
+      personPhone: '',
+
+      rulesInfo: {
+        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: 'blur'
+          }
+        ],
+        annualLimit: [
+          {
+            required: true,
+            message: '请输入工厂经营年限',
+            trigger: 'blur'
+          }
+        ],
+        label: [
+          {
+            required: true,
+            message: '请填写工厂描述标签',
+            trigger: ''
+          },
+
+          {
+            validator: (rule, value, callback) => {
+              if (value) {
+                value = String(value)
+                const labels = value.split(',').filter(Boolean)
+                if (labels.length > 5) {
+                  callback(new Error("描述标签不能超过5个"))
+                } else {
+                  callback()
+                }
+              } else {
+                callback(new Error("请填写工厂描述标签"))
+              }
+            }, trigger: 'blur'
+          }
+
+        ],
+        // 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)
+  },
+  // 方法集合
+  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: '', // 店铺名称
+        chargePersonName: '', // 店铺负责人
+        chargePersonPhone: '', // 负责人电话
+        shopAdress: '', // 地址
+        effectiveDate: '', // 生效日期
+        effectiveYear: '', // 生效年限
+        shopType: 1, // 商家类型 1 商家 2 本地
+        isVoucher: 1, // 是否支持代金卷 1 true 2 false
+        contractState: 1, // 合同状态 1-有效 0-无效
+        auditLive: 1,
+        auditLiveProduct: 1,
+        shopPhone: '', // 账号
+        shopPassword: '', // 密码
+        advertisement: '', // 广告图
+        areaId: '', // 区域id
+        longitude: '', // 经纬度
+        latitude: '', // 经纬度
+        annualLimit: '', // 经营年限
+        label: '',  // 描述标签
+      }
+      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 (submitData.effectiveYear === '') {
+            this.$message.error('请输入生效年限')
+            return
+          }
+
+          submitData.classificationId && submitData.classificationId[2] && (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()
+            }
+          })
+        }
+      }
+    },
+    // 编辑
+    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()
+          }
+        })
+      }
+    },
+    // 删除
+    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)
+        }
+      }
+    },
+    delBusiness(row) {
+      // todo 判断商家状态
+      this.$confirm('此操作将永久删除该商家, 是否继续?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(async () => {
+        const res = await delBusinessById({
+          shopId: row.shopId
+        })
+        if (res.code === '') {
+          this.$message({
+            message: '操作成功',
+            type: 'success'
+          })
+          this.getAll(this.formInline)
+        }
+      })
+        .catch(() => {
+
+        })
+    },
+    // 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 factoryClassList({
+        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)
+        })
+      })
+
+      const currentClassInfo = allLevelThereList.find(item => {
+        return item.levelId.includes(classId)
+      })
+
+      if (currentClassInfo) {
+        this.ruleForm.classificationId = currentClassInfo.levelId.slice(1).split('/').map(item => item * 1)
+      }
+    },
+
+    // 选择经纬
+    handleSelectLngAndLat(address) {
+      this.ruleForm.longitude = address[0]
+      this.ruleForm.latitude = address[1]
+    }
+  }
+}
+</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>

src/views/brandFactory/settlement/addSettlement.vue

@@ -0,0 +1,448 @@
+<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

@@ -0,0 +1,190 @@
+<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>
+    <!-- 表格 -->
+    <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 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>
+          </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>
+          </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>
+</template>
+
+<script>
+import AddSettlement from '@/views/business/settlement/addSettlement'
+
+import {
+  settlementGetAll,
+  settlementDelete
+} from '@/api/business'
+import {
+  settlementGetById
+} from '@/api/business'
+
+export default {
+  components: {
+    AddSettlement
+  },
+  data() {
+    // 这里存放数据
+    return {
+      activeName: '0',
+      formInline: {
+        shopName: '', // 商家名称
+        shopPhone: '', // 注册手机号
+        authenType: '', // 店铺类型 1-个人 2-个体工商户 3-企业 4-其他组织
+        dates: [], // 时间数组
+        checkState: '0', // 入驻处理状态 0-未处理 1-通过 2-拒绝
+        page: 1,
+        pageSize: 10,
+        shopType: 1
+      },
+      total: 10,
+      tableData: [],
+      addVisible: false,
+      loading: false,
+      form: {}
+    }
+  },
+  mounted() {
+    this.getAll(this.formInline)
+  },
+  // 方法集合
+  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)
+    },
+    getFormData(shopId) {
+      this.loading = true
+      // 查询店铺详情
+      settlementGetById({ shopId })
+        .then((res) => {
+          this.loading = false
+          this.form = res.data
+        })
+        .catch((err) => {
+          this.loading = false
+          console.log(err)
+        })
+    },
+    cleanForm() {
+      this.addVisible = false
+    },
+    // 删除
+    async delet(row) {
+      const res = await settlementDelete({ checkId: row.checkId })
+      if (res.code === '') {
+        this.$message({
+          message: '删除成功',
+          type: 'success'
+        })
+        this.getAll(this.formInline)
+      }
+    },
+    // 初始化查询所有数据
+    async getAll(formInline) {
+      const res = await settlementGetAll(formInline)
+      this.tableData = res.data.list
+      this.total = res.data.total
+    }
+  }
+}
+</script>
+
+<style lang='scss' scoped>
+//@import url(); 引入公共css类
+@import url("../../../styles/elDialog.scss");
+
+.pdl {
+  padding-left: 20px;
+}
+</style>

src/views/business/businessClass/index.vue

@@ -105,7 +105,7 @@ export default {
         isVisible: true
       }
       this.$refs.edit.setParams({
-        id: 1
+        id
       })
     },
     // 删除

src/views/business/businessList/index.vue

@@ -151,15 +151,12 @@
                 </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="1">
+                      品牌厂家
+                    </el-radio> -->
                     <el-radio :disabled="disabled" :label="2">
                       本地
                     </el-radio>
-                    <el-radio :disabled="disabled" :label="3">
-                      品牌工厂
-                    </el-radio>
                   </el-radio-group>
                 </el-form-item>
 
@@ -289,7 +286,7 @@ import {
   businessListGetById,
   businessListUpdate,
   businessListStart,
-  delBusinessById
+  delBusinessById,
 } from '@/api/business'
 import { uploadUrl } from '@/utils/request'
 import { getProvinceList, getChildAreaList } from '@/api/address'
@@ -344,7 +341,7 @@ export default {
         shopName: '', // 店铺名称
         chargePersonName: '', // 店铺负责人
         chargePersonPhone: '', // 负责人电话
-        shopType: 1, // 店铺类型 1商城 2本地
+        shopType: 2, // 店铺类型 1商城 2本地
         isVoucher: 1, // 是否支持代金卷 1 true 2 false
         shopAdress: '', // 地址
         effectiveDate: '', // 生效日期
@@ -507,6 +504,7 @@ export default {
   watch: {},
   // 生命周期 - 创建完成（可以访问当前this实例）
   created() {
+   
   },
   // 生命周期 - 挂载完成（可以访问DOM元素）
   mounted() {
@@ -562,7 +560,7 @@ export default {
         shopAdress: '', // 地址
         effectiveDate: '', // 生效日期
         effectiveYear: '', // 生效年限
-        shopType: 1, // 商家类型 1 商家 2 本地
+        shopType: 2, // 商家类型 1 商家 2 本地
         isVoucher: 1, // 是否支持代金卷 1 true 2 false
         contractState: 1, // 合同状态 1-有效 0-无效
         auditLive: 1,

src/views/business/settlement/index.vue

@@ -114,7 +114,8 @@ export default {
         dates: [], // 时间数组
         checkState: '0', // 入驻处理状态 0-未处理 1-通过 2-拒绝
         page: 1,
-        pageSize: 10
+        pageSize: 10,
+        shopType: 2
       },
       total: 10,
       tableData: [],