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>
          <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-col :xs="24" :sm="24" :lg="12" class="tr">
                <el-form-item label="">
                  <el-button size="mini" @click="clearFn">清空</el-button>
                  <el-button size="mini" type="primary" @click="searchFn">搜索</el-button>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </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: "",
      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>