2023.10.27 - 添加商家分类

src/api/business.js

@@ -145,3 +145,50 @@ export function wordDelete(data) {
     data
   })
 }
+
+
+// **********************商家分类**********************
+// 添加商家分类
+export function businessClassList(data) {
+  return request({
+    url: '/shopCategory/getAll',
+    method: "post",
+    data
+  })
+}
+
+// 根据一级获取
+export function businessClassListById(data) {
+  return request({
+    url: "/shopCategory/getById",
+    method: "post",
+    data
+  })
+}
+
+// 删除标签分类
+export function deleteBusinessClass(data) {
+  return request({
+    url: "/shopCategory/deleteCategory",
+    method: "post",
+    data
+  })
+}
+
+// 更新标签
+export function updateBusinessClass(data) {
+  return request({
+    url: "/shopCategory/updateCategory",
+    method: "post",
+    data
+  })
+}
+
+// 添加分类
+export function addBusinessClass(data) {
+  return request({
+    url: '/shopCategory/addCategory',
+    data,
+    method: "post"
+  })
+}

src/utils/index.js

@@ -84,14 +84,14 @@ export function formatTime(time, option) {
   }
   return (
     d.getMonth() +
-            1 +
-            '月' +
-            d.getDate() +
-            '日' +
-            d.getHours() +
-            '时' +
-            d.getMinutes() +
-            '分'
+    1 +
+    '月' +
+    d.getDate() +
+    '日' +
+    d.getHours() +
+    '时' +
+    d.getMinutes() +
+    '分'
   )
 }
 
@@ -134,3 +134,11 @@ export function hidden(str, frontLen, endLen) {
   // );
   return str
 }
+
+/**
+ * 暂时用补全路径
+ * @param {String} url 
+ */
+export function fullPicUrl(url) {
+  return url.includes('http') ? url : 'https://jufeng-shop-1317254189.cos.ap-guangzhou.myqcloud.com/' + url
+}

src/views/business/businessClass/Edit.vue

@@ -0,0 +1,536 @@
+<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 {
+  getSelect,
+  commdityClassAdd,
+  commdityClassgetById,
+  commdityClassUpdate
+} from '@/api/renovation'
+
+import { businessClassListById, updateBusinessClass, addBusinessClass } 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 businessClassListById({
+        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 addBusinessClass(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 updateBusinessClass(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/business/businessClass/index.vue

@@ -0,0 +1,164 @@
+<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 {
+  commdityClassDelete
+} from '@/api/renovation'
+import { fullPicUrl } from '../../../utils'
+
+import { businessClassList, deleteBusinessClass } 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: 1
+      })
+    },
+    // 删除
+    async deleteRow(row) {
+      this.$confirm('此操作将永久删除该类别, 是否继续?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      })
+        .then(() => {
+          deleteBusinessClass({ 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 businessClassList(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>

vue.config.js

@@ -42,7 +42,7 @@ module.exports = {
     proxy: {
       '/api': {
         // target: 'http://192.168.0.91:9003', // 测试
-        target: 'http://192.168.0.91:9003', // 平台端
+        target: 'http://192.168.0.91:9103', // 平台端
         // target: 'http://192.168.0.91:9003', // 商家端
         changeOrigin: true,
         pathRewrite: {
@@ -51,7 +51,7 @@ module.exports = {
       },
       '/adminapi': {
         // target: 'http://192.168.0.91:9003', // 测试
-        target: 'http://192.168.0.91:9003', // 平台端
+        target: 'http://192.168.0.91:9103', // 平台端
         // target: 'http://192.168.0.91:9003', // 商家端
         changeOrigin: true,
         pathRewrite: {
@@ -60,7 +60,7 @@ module.exports = {
       },
       '/': {
         // target: 'http://192.168.0.91:9003', // 测试
-        target: 'http://192.168.0.91:9003', // 平台端
+        target: 'http://192.168.0.91:9103', // 平台端
         // target: 'http://192.168.0.91:9003', // 商家端
         changeOrigin: true
       }