zfire-newmall-admin/src/views/mallManagement/configCenter/serviceProduct/index.vue

<template>
  <zj-tab-page ref="tabPage" :defaultActives="[{ key: 'list', label: $route.meta.title + '-列表', essential: true }]">
    <template slot-scope="{ activeKey, data }">
      <div v-if="activeKey == 'list'" class="app-container">
        <div class="btn-group clearfix">
          <div class="fl">
            <el-button
              v-if="$restrict('add')"
              size="small"
              type="primary"
              icon="el-icon-plus"
              @click="addOrEditParent('add1')"
              >添加分类</el-button
            >
          </div>
          <div class="fr">
            <el-input
              placeholder="请输入分类名称进行搜索"
              v-model="screenForm.keyword"
              size="small"
              style="width: 240px"
              clearable
            >
              <el-button slot="append" icon="el-icon-search" size="small" @click="getListByScreen"></el-button>
            </el-input>
          </div>
        </div>

        <div class="table">
          <el-table
            :data="dataList"
            row-key="categoryId"
            border
            default-expand-all
            :tree-props="{ children: 'children' }"
          >
            <el-table-column prop="name" label="分类名称" min-width="150"></el-table-column>
            <el-table-column align="center" label="分类图片" prop="imgUrl" width="80">
              <template slot-scope="scope">
                <el-image
                  style="width: 40px; height: 40px; display: block; margin: 0 auto"
                  :src="$showImgUrl(scope.row.imgUrl)"
                  :preview-src-list="[$showImgUrl(scope.row.imgUrl)]"
                  fit="cover"
                >
                  <div slot="error" style="height: 100%; font-size: 40px">
                    <i class="el-icon-picture-outline"></i>
                  </div>
                </el-image>
              </template>
            </el-table-column>
            <el-table-column align="center" prop="createTime" label="创建时间" min-width="160"></el-table-column>
            <!-- <el-table-column align="center" prop="goodsNum" label="商品数"></el-table-column> -->
            <el-table-column align="center" prop="sortNum" label="排序"></el-table-column>
            <el-table-column align="center" prop="companyName" label="商户" min-width="120"></el-table-column>
            <el-table-column align="center" label="状态" class-name="status-col">
              <template slot-scope="scope">
                <el-tag :type="scope.row.status ? 'success' : 'danger'">{{
                  scope.row.status ? '显示' : '隐藏'
                }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column align="right" label="操作" width="150" fixed="right">
              <template slot-scope="scope">
                <el-button
                  type="primary"
                  size="mini"
                  icon="el-icon-plus"
                  v-if="scope.row.level == 1 && $restrict('add')"
                  @click="addOrEditChild('add2', scope.row.categoryId)"
                ></el-button>
                <el-button
                  type="primary"
                  size="mini"
                  icon="el-icon-edit"
                  v-if="scope.row.level == 1 && $restrict('edit')"
                  @click="addOrEditParent('edit1', scope.row.categoryId)"
                ></el-button>
                <el-button
                  type="primary"
                  size="mini"
                  icon="el-icon-edit"
                  v-if="scope.row.level == 2 && $restrict('edit')"
                  @click="addOrEditChild('edit2', scope.row.categoryId)"
                ></el-button>
                <el-popconfirm
                  v-if="$restrict('del')"
                  style="margin-left: 10px"
                  title="确定删除吗？"
                  @confirm="handleDelete(scope.row.categoryId)"
                >
                  <el-button slot="reference" size="mini" icon="el-icon-delete"></el-button>
                </el-popconfirm>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <!-- 新增编辑 一级分类 -->
      <div v-if="addParentFormVisible" class="app-container">
        <el-form
          ref="addParentForm"
          :model="addParentForm"
          :rules="addParentFormRules"
          label-position="left"
          label-width="80px"
        >
          <el-row :gutter="20">
            <el-col :span="6">
              <el-form-item label="一级分类" prop="oneClassify">
                <el-input
                  type="text"
                  placeholder="请输入一级分类名称"
                  v-model="addParentForm.oneClassify"
                  maxlength="10"
                  show-word-limit
                  style="width: 250px"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="状态" prop="status">
                <el-radio-group v-model="addParentForm.status">
                  <el-radio :label="true">显示</el-radio>
                  <el-radio :label="false">隐藏</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="排序" prop="sort">
                <el-input placeholder="请输入排序" v-model.number="addParentForm.sort" style="width: 250px"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="分类图片" prop="imgUrl">
                <el-upload
                  class="avatar-uploader"
                  style="height: 122px"
                  :action="baseURL + 'common/upload'"
                  :headers="myHeaders"
                  :show-file-list="false"
                  :on-success="uploadSuccess"
                  :before-upload="beforeUpload"
                >
                  <img v-if="addParentForm.imgUrl" :src="$showImgUrl(addParentForm.imgUrl)" class="avatar" />
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="data.removeTab()">取 消</el-button>
          <el-button type="primary" @click="submitAddParentForm(data.removeTab)">确 定</el-button>
        </div>
      </div>
      <!-- 新增编辑 二级分类 -->
      <div v-if="addChildFormVisible" class="app-container">
        <el-form
          ref="addChildForm"
          :model="addChildForm"
          :rules="addChildFormRules"
          label-position="left"
          label-width="80px"
        >
          <el-row :gutter="20">
            <el-col :span="6">
              <el-form-item label="一级分类" prop="oneClassify">
                <el-select
                  v-model="addChildForm.oneClassify"
                  placeholder="请选择一级分类"
                  disabled
                  style="width: 250px"
                >
                  <el-option
                    :label="item.name"
                    :value="item.categoryId"
                    v-for="(item, index) in classifyList"
                    :key="index"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="二级分类" prop="twoClassify">
                <el-input
                  type="text"
                  placeholder="请输入二级分类名称"
                  v-model="addChildForm.twoClassify"
                  maxlength="10"
                  show-word-limit
                  style="width: 250px"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="状态" prop="status">
                <el-radio-group v-model="addChildForm.status">
                  <el-radio :label="true">显示</el-radio>
                  <el-radio :label="false">隐藏</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="排序" prop="sort">
                <el-input placeholder="请输入排序" v-model.number="addChildForm.sort" style="width: 250px"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="分类图片" prop="imgUrl">
                <el-upload
                  class="avatar-uploader"
                  style="height: 122px"
                  :action="baseURL + 'common/upload'"
                  :headers="myHeaders"
                  :show-file-list="false"
                  :on-success="uploadSuccess"
                  :before-upload="beforeUpload"
                >
                  <img v-if="addChildForm.imgUrl" :src="$showImgUrl(addChildForm.imgUrl)" class="avatar" />
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="data.removeTab()">取 消</el-button>
          <el-button type="primary" @click="submitAddChildForm(data.removeTab)">确 定</el-button>
        </div>
      </div>
    </template>
  </zj-tab-page>
</template>

<script>
import { getToken } from '@/utils/auth'
import {
  getClassifyList,
  addClassify,
  editClassify,
  deleteClassify,
  getClassifyDetail,
  getSmallType
} from '@/api/goods'
import { ORDER_MAIN_TYPE } from '@/utils/select_data'
import { findElem } from '@/utils/util.js'

export default {
  data() {
    return {
      baseURL: process.env.VUE_APP_BASE_API,
      myHeaders: { 'x-token': getToken() },

      dataList: [], // 列表数据
      listLoading: true, // 列表加载loading
      screenForm: {
        // 筛选表单数据
        keyword: '' // 关键词
      },

      editParentId: null,
      addParentFormType: 'add',
      addParentFormVisible: false,
      addParentForm: {
        oneClassify: '',
        twoClassify: '',
        imgUrl: '',
        status: true,
        sort: 0
      },
      addParentFormRules: {
        oneClassify: [{ required: true, message: '请填写一级分类名称', trigger: 'blur' }],
        imgUrl: [{ required: true, message: '请上传分类图片', trigger: 'change' }]
      },

      editChildId: null,
      addChildFormType: 'add',
      addChildFormVisible: false,
      addChildForm: {
        oneClassify: '',
        twoClassify: '',
        imgUrl: '',
        status: true,
        sort: 0
      },
      addChildFormRules: {
        oneClassify: [{ required: true, message: '请选择一级分类', trigger: 'change' }],
        twoClassify: [{ required: true, message: '请填写二级分类', trigger: 'blur' }],
        imgUrl: [{ required: true, message: '请上传分类图片', trigger: 'change' }]
      },

      classifyList: [],

      orderMainType: ORDER_MAIN_TYPE,
      orderSmallType: [],
      formType: 'add',
      formVisible: false
    }
  },
  created() {
    this.getList()
  },
  methods: {
    getList() {
      this.listLoading = true

      let params = {
        type: 2,
        name: this.screenForm.keyword
      }

      getClassifyList(params).then(res => {
        this.dataList = res.data
      })
    },

    // 筛选后重新获取列表
    getListByScreen() {
      this.currentPage = 1
      this.getList()
    },
    // 打开 新增编辑 一级分类
    addOrEditParent(type, cid) {
      this.$refs.tabPage.addTab({
        // 对应显示的模块
        activeKey: type,
        // 唯一标识
        key: type,
        // 页签名称
        label: { edit1: '编辑一级分类', add1: '添加一级分类' }[type],
        // 打开时事件
        triggerEvent: () => {
          this.$nextTick(() => {
            this.formType = type
            this.formVisible = true
            this.addParentFormType = type
            this.addParentFormVisible = true
            if (type == 'edit1') {
              this.editParentId = cid
              getClassifyDetail({ categoryId: cid }).then(res => {
                this.addParentForm = {
                  oneClassify: res.data.name,
                  status: res.data.status,
                  imgUrl: res.data.imgUrl,
                  sort: res.data.sortNum
                }
              })
            }
          })
        },
        // 关闭时事件
        closeEvent: () => {
          this.cancelAddParentForm()
        }
      })
    },

    // 取消 新增编辑 一级分类
    cancelAddParentForm() {
      this.addParentFormVisible = false
      this.$refs?.addParentForm?.resetFields()
    },

    // 提交 一级分类
    submitAddParentForm(cancel) {
      this.$refs.addParentForm.validate(valid => {
        if (valid) {
          let params = {
            type: 2,
            name: this.addParentForm.oneClassify,
            imgUrl: this.addParentForm.imgUrl,
            status: this.addParentForm.status,
            sortNum: this.addParentForm.sort
          }
          if (this.addParentFormType == 'edit1') {
            params.categoryId = this.editParentId
            editClassify(params).then(res => {
              cancel('list')
              this.cancelAddParentForm()
              this.getList()
              this.$successMsg('编辑成功')
            })
          } else {
            addClassify(params).then(res => {
              cancel('list')
              this.cancelAddParentForm()
              this.getList()
              this.$successMsg('添加成功')
            })
          }
        }
      })
    },

    // 改变大类
    changeOrderType() {
      this.addChildForm.smallType = ''
      this.getSmallType()
    },

    getSmallType() {
      getSmallType({
        mainNumber: this.addChildForm.orderType,
        categoryId: this.addChildForm.oneClassify
      }).then(res => {
        this.orderSmallType = res.data
      })
    },

    // 打开 新增编辑 二级分类
    addOrEditChild(type, cid) {
      this.$refs.tabPage.addTab({
        // 对应显示的模块
        activeKey: type,
        // 唯一标识
        key: type,
        // 页签名称
        label: { edit2: '编辑二级分类', add2: '添加二级分类' }[type],
        // 打开时事件
        triggerEvent: () => {
          this.$nextTick(() => {
            this.formType = type
            this.formVisible = true
            this.addChildFormType = type
            this.addChildFormVisible = true
            getClassifyList({ name: '', type: 2 }).then(res => {
              this.classifyList = res.data
            })
            if (type == 'add2') {
              this.addChildForm.oneClassify = cid
            }
            if (type == 'edit2') {
              this.editChildId = cid
              getClassifyDetail({ categoryId: cid }).then(res => {
                this.addChildForm = {
                  oneClassify: res.data.parentId,
                  twoClassify: res.data.name,
                  imgUrl: res.data.imgUrl,
                  status: res.data.status,
                  sort: res.data.sortNum
                }
                this.getSmallType()
              })
            }
          })
        },
        // 关闭时事件
        closeEvent: () => {
          this.cancelAddChildForm()
        }
      })
    },

    // 取消 新增编辑 二级分类
    cancelAddChildForm() {
      this.addChildFormVisible = false
      this.$refs?.addChildForm?.resetFields()
    },

    // 提交 二级分类
    submitAddChildForm(cancel) {
      this.$refs.addChildForm.validate(valid => {
        if (valid) {
          let params = {}
          if (this.addChildFormType == 'edit2') {
            params = {
              type: 2,
              categoryId: this.editChildId,
              name: this.addChildForm.twoClassify,
              imgUrl: this.addChildForm.imgUrl,
              status: this.addChildForm.status,
              sortNum: this.addChildForm.sort
            }
            editClassify(params).then(res => {
              cancel('list')
              this.cancelAddChildForm()
              this.getList()
              this.$successMsg('编辑成功')
            })
          } else {
            params = {
              children: [
                {
                  type: 2,
                  parentId: this.addChildForm.oneClassify,
                  name: this.addChildForm.twoClassify,
                  imgUrl: this.addChildForm.imgUrl,
                  status: this.addChildForm.status,
                  sortNum: this.addChildForm.sort
                }
              ]
            }
            addClassify(params).then(res => {
              cancel('list')
              this.cancelAddChildForm()
              this.getList()
              this.$successMsg('添加成功')
            })
          }
        }
      })
    },

    // 操作 - 删除
    handleDelete(id) {
      console.log(id)
      deleteClassify({ categoryId: id }).then(res => {
        this.getList()
        this.$successMsg()
      })
    },

    uploadSuccess(res, file, index) {
      if (this.addParentFormVisible) {
        this.addParentForm.imgUrl = res.data.url
      } else {
        this.addChildForm.imgUrl = res.data.url
      }
    },

    beforeUpload(file) {
      const fileSuffix = file.name.substring(file.name.lastIndexOf('.') + 1)
      const whiteList = ['jpg', 'jpeg', 'png']
      if (whiteList.indexOf(fileSuffix) === -1) {
        this.$errorMsg('只支持上传jpg/png文件!')
        return false
      }
    }
  }
}
</script>

<style scoped lang="scss"></style>

<style lang="scss">
.el-image-viewer__wrapper .el-icon-circle-close {
  color: #ffffff !important;
  font-size: 60px;
}
.el-table__row.expanded {
  background: #f5f5f5;
}

th:first-child,
th:last-child {
  text-align: center !important;
}
</style>