supply-front/src/views/basic_data/material/classify_list.vue

<template>
  <div class="app-container">
    <div class="main-content">
      <div class="main-left">
        <el-button
          icon="el-icon-plus"
          type="primary"
          plain
          style="width: 100%"
          v-if="$checkBtnRole('add', $route.meta.roles)"
          @click="openAddGroupForm('add')"
          >新建分组</el-button
        >
        <div class="list">
          <div class="item">
            <strong class="title">所有分组</strong>
          </div>
          <div
            class="item"
            :class="activeGroup === v.productCategoryId ? 'active' : ''"
            v-for="v in categoryList"
            :key="v.productCategoryId"
            @click="changeGroup(v.productCategoryId, v)"
          >
            <div class="title">{{ v.productCategoryName }}</div>
            <el-dropdown trigger="click" @command="handleCommand">
              <span class="el-dropdown-link">
                <i class="el-icon-more icon-more"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item :command="['edit', v]" v-if="$checkBtnRole('edit', $route.meta.roles)"
                  >修改名称</el-dropdown-item
                >
                <el-dropdown-item :command="['del', v]" v-if="$checkBtnRole('del', $route.meta.roles)"
                  >删除分组</el-dropdown-item
                >
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </div>
      </div>
      <div class="main-right">
        <!-- 筛选条件 -->
        <div>
          <Collapse :is-collapse="isCollapse" :screen-form="searchForm">
            <template #right_btn>
              <el-button size="mini" @click="clearFn">清空</el-button>
              <el-button size="mini" type="primary" @click="searchFn">搜索</el-button>
            </template>
            <template #search>
              <el-form ref="searchForm" :model="searchForm" label-width="70px" size="mini" label-position="left">
                <el-row :gutter="20">
                  <el-col :xs="24" :sm="12" :lg="6">
                    <el-form-item label="编码" prop="productCategoryNumber">
                      <el-input v-model="searchForm.productCategoryNumber" placeholder="请输入"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :xs="24" :sm="12" :lg="6">
                    <el-form-item label="名称" prop="productCategoryName">
                      <el-input v-model="searchForm.productCategoryName" placeholder="请输入"></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-form>
            </template>
          </Collapse>
        </div>
        <!-- 按钮 -->
        <div class="btn-group clearfix">
          <div class="fl">
            <el-button v-if="$checkBtnRole('add', $route.meta.roles)" type="primary" size="mini" @click="addCategoryFn"
              >添加类别</el-button
            >
          </div>
        </div>
        <div class="mymain-container">
          <!-- 列表 -->
          <div class="table">
            <el-table
              v-loading="listLoading"
              :data="dataList"
              element-loading-text="Loading"
              border
              fit
              highlight-current-row
              stripe
            >
              <el-table-column
                align="left"
                label="编码"
                prop="kingDeeCategoryNumber"
                min-width="160"
                show-overflow-tooltip
              ></el-table-column>
              <el-table-column
                align="left"
                label="品类"
                prop="kingDeeCategoryName"
                min-width="160"
                show-overflow-tooltip
              ></el-table-column>
              <el-table-column align="center" label="操作" min-width="160" show-overflow-tooltip>
                <template slot-scope="scope">
                  <el-popconfirm
                    confirm-button-text="好的"
                    cancel-button-text="不用了"
                    icon="el-icon-info"
                    icon-color="red"
                    title="内容确定删除吗？"
                    @onConfirm="hanleDelete(scope.row.id)"
                  >
                    <el-button
                      slot="reference"
                      type="text"
                      class="textColor el-popover-left"
                      v-if="$checkBtnRole('del', $route.meta.roles)"
                      >删除</el-button
                    >
                  </el-popconfirm>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <!-- 分页
          <div class="fr">
            <el-pagination
              :current-page="currentPage"
              :page-sizes="[10, 20, 30, 50]"
              :page-size="10"
              layout="total, sizes, prev, pager, next, jumper"
              :total="listTotal"
            >
            </el-pagination>
          </div> -->
        </div>
      </div>
    </div>
    <!-- 新增编辑分组 -->
    <el-dialog
      :title="addGroupFormType == 'add' ? '新建分组' : '编辑分组'"
      :visible.sync="addGroupFormVisible"
      :show-close="false"
      width="40%"
      :close-on-click-modal="false"
    >
      <el-form ref="addGroupForm" :model="addGroupForm" label-position="left" label-width="80px">
        <el-form-item label="分组名称" prop="">
          <el-input
            autocomplete="off"
            v-model="addGroupForm.productCategoryName"
            placeholder="请输入分组名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="编码" prop="">
          <el-input
            autocomplete="off"
            v-model="addGroupForm.productCategoryNumber"
            placeholder="请输入"
            v-if="addGroupFormType == 'add'"
          ></el-input>
          <el-input
            v-else
            autocomplete="off"
            v-model="addGroupForm.productCategoryNumber"
            placeholder="请输入"
            disabled="disabled"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelFn">取 消</el-button>
        <el-button type="primary" @click="btnOK">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 添加类别弹窗 -->
    <ClassifyListSmall
      :dataCategory="dataCategory"
      :showAddSelect.sync="showAddSelect"
      :data="dataList"
      @updateList="updateListFn"
      ref="updateDate"
    />
  </div>
</template>

<script>
import ClassifyListSmall from './components/classify_list-small'
import {
  getProductCategoryList,
  getProductCategorySubList,
  getProductCategoryAdd,
  getProductCategoryEdit,
  getProductCategoryDelSub,
  getProductCategoryDel
} from '@/api/basic_data/material'
export default {
  data() {
    return {
      searchForm: {
        productCategoryNumber: '',
        productCategoryName: ''
      },
      addGroupFormVisible: false,
      activeGroup: '',
      isCollapse: true,
      dataList: null, // 列表数据
      listLoading: false, // 列表加载loading
      // currentPage: 1, // 当前页码
      // pageSize: 10, // 每页数量
      // listTotal: 0, // 列表总数
      categoryList: [], //品类列表
      addGroupForm: {
        productCategoryName: '',
        productCategoryNumber: ''
      },
      addGroupFormType: 'add',
      showAddSelect: false, //添加分类弹窗
      dataCategory: null //当前选中的品类
    }
  },
  components: {
    ClassifyListSmall
  },
  created() {
    this.getDataList()
  },
  methods: {
    //清空
    clearFn() {
      this.$refs.searchForm.resetFields()
    },
    //搜索
    searchFn() {
      this.getDataList({ ...this.searchForm })
    },
    //删除
    async hanleDelete(id) {
      console.log(this.dataCategory)
      let arr = [id]
      let res = arr.toString()
      await getProductCategoryDelSub({ ids: res })
      const res2 = await getProductCategorySubList({
        id: this.dataCategory.productCategoryId
      })
      this.dataList = res2.data
      this.$message.success('删除成功')
    },
    //更新列表
    async updateListFn(id) {
      const res = await getProductCategorySubList({ id })
      this.dataList = res.data
    },
    //添加类别
    async addCategoryFn() {
      await this.$refs.updateDate.getDataList()
      this.showAddSelect = true
    },
    //取消
    cancelFn() {
      this.addGroupForm = {
        productCategoryName: '',
        productCategoryNumber: ''
      }
      this.addGroupFormVisible = false
    },
    //确定
    async btnOK() {
      if (this.addGroupFormType == 'edit') {
        await getProductCategoryEdit({ ...this.addGroupForm })
        this.$message.success('编辑成功')
      } else {
        await getProductCategoryAdd({ ...this.addGroupForm })
        this.$message.success('新建成功')
      }
      this.addGroupForm = {
        productCategoryName: '',
        productCategoryNumber: ''
      }
      this.getDataList()
      this.addGroupFormVisible = false
    },
    //切换分组
    async changeGroup(id, v) {
      console.log(v)
      this.dataCategory = v
      this.activeGroup = id
      const res = await getProductCategorySubList({ id })

      this.dataList = res.data
    },
    //获取产品类别列表
    async getDataList(data) {
      const res = await getProductCategoryList(data)

      this.categoryList = res.data
    },
    //新建分组弹窗
    openAddGroupForm(type, item) {
      this.addGroupFormType = type
      if (type == 'edit') {
        this.addGroupForm.productCategoryNumber = item.productCategoryNumber
        this.addGroupForm.productCategoryName = item.productCategoryName
        this.addGroupForm.productCategoryId = item.productCategoryId
      }
      this.addGroupFormVisible = true
    },
    // 操作分组
    handleCommand(command) {
      let type = command[0],
        v = command[1]
      if (type == 'del') {
        this.$confirm('此操作将删除该分组, 是否继续?', '删除分组', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(() => {
            console.log(v, 111)
            getProductCategoryDel({ ids: v.productCategoryId }).then(res => {
              this.getDataList()
              this.$successMsg('删除成功')
            })
          })
          .catch(() => {})
      }
      if (type == 'edit') {
        //修改
        console.log(1111)
        this.openAddGroupForm('edit', v)
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.main-content {
  display: flex;
  height: auto;
  .main-left {
    margin-right: 20px;
    padding: 10px;
    width: 210px;
    overflow-y: auto;
    // border: 1px solid #eaeaea;
    border-radius: 5px;
    .list {
      margin-top: 10px;
      .item {
        display: flex;
        padding: 10px;
        cursor: pointer;
        color: #333;
        &.active {
          color: #377cfd;
          font-weight: 600;
          background-color: #f5f7fa;
        }
        .title {
          flex: 1;
          min-width: 0;
          padding-right: 10px;
          font-size: 14px;
        }
        .icon-more {
          transform: rotate(90deg);
        }
      }
    }
  }
  .main-right {
    flex: 1;
    height: auto;
    ::v-deep .el-divider--horizontal {
      margin: 10px 0;
    }
    .btn-group {
      display: flex;
      justify-content: space-between;
      .left {
        display: flex;
        align-items: center;
        .tips {
          font-size: 14px;
          margin-left: 10px;
        }
      }
    }
    .list-container {
      margin-top: 20px;
      .box-card {
        ::v-deep .el-card__header {
          padding: 10px 10px 10px 20px;
        }
        .header {
          display: flex;
          justify-content: space-between;
          align-items: center;
        }
        .body {
          .info {
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 14px;
            color: #666;
            margin: 10px 0;
          }
          .content {
            max-width: 100%;
            height: 168px;
            overflow-y: hidden;
            background-color: #fafafa;
            word-break: break-all;
            border-radius: 2px;
            padding: 8px;
            font-size: 14px;
            line-height: 19px;
            .text {
              overflow: hidden;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-line-clamp: 8;
              -webkit-box-orient: vertical;
            }
          }
          .img {
            width: 100%;
            height: 168px;
            display: block;
          }
          .video {
            width: 100%;
            height: 168px;
            display: block;
          }
          .file {
            display: flex;
            justify-content: space-between;
            align-items: center;
            img {
              width: 40px;
              height: 40px;
              display: block;
            }
          }
        }
      }
    }
    .empty {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 20px 0;
      img {
        width: 280px;
      }
      div {
        font-size: 14px;
        color: #666;
      }
    }
  }
}
</style>