|
|
@@ -0,0 +1,443 @@
|
|
|
+<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%"
|
|
|
+ @click="openAddGroupForm('add')"
|
|
|
+ >新建分组</el-button
|
|
|
+ >
|
|
|
+ <div class="list">
|
|
|
+ <div
|
|
|
+ class="item"
|
|
|
+ :class="activeGroup === '' ? 'active' : ''"
|
|
|
+ @click="changeGroup('')"
|
|
|
+ >
|
|
|
+ <div class="title">所有分组</div>
|
|
|
+ </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]"
|
|
|
+ >修改名称</el-dropdown-item
|
|
|
+ >
|
|
|
+ <el-dropdown-item :command="['del', v]"
|
|
|
+ >删除分组</el-dropdown-item
|
|
|
+ >
|
|
|
+ </el-dropdown-menu>
|
|
|
+ </el-dropdown>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="main-right">
|
|
|
+ <!-- 筛选条件 -->
|
|
|
+ <div>
|
|
|
+ <el-form
|
|
|
+ ref="screenForm"
|
|
|
+ label-width="70px"
|
|
|
+ size="small"
|
|
|
+ label-position="left"
|
|
|
+ >
|
|
|
+ <el-row :gutter="20">
|
|
|
+ <el-col :xs="24" :sm="12" :lg="6">
|
|
|
+ <el-form-item label="编码" prop="volume">
|
|
|
+ <el-input placeholder="请输入"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :xs="24" :sm="12" :lg="6">
|
|
|
+ <el-form-item label="名称" prop="outsideName">
|
|
|
+ <el-input 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="small">清空</el-button>
|
|
|
+ <el-button size="small" type="primary">搜索</el-button>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </el-form>
|
|
|
+ </div>
|
|
|
+ <!-- 按钮 -->
|
|
|
+ <div class="btn-group clearfix">
|
|
|
+ <div class="fl">
|
|
|
+ <el-button type="primary" size="small" @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="center"
|
|
|
+ label="编码"
|
|
|
+ prop="kingDeeCategoryNumber"
|
|
|
+ min-width="160"
|
|
|
+ show-overflow-tooltip
|
|
|
+ ></el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ align="center"
|
|
|
+ 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"
|
|
|
+ >删除</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="请输入"
|
|
|
+ ></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"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import ClassifyListSmall from "./components/classify_list-small";
|
|
|
+import {
|
|
|
+ getProductCategoryList,
|
|
|
+ getProductCategorySubList,
|
|
|
+ getProductCategoryAdd,
|
|
|
+ getProductCategoryEdit,
|
|
|
+} from "@/api/basic_data/material";
|
|
|
+export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ 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: {
|
|
|
+ //更新列表
|
|
|
+ async updateListFn(id) {
|
|
|
+ const res = await getProductCategorySubList({ id });
|
|
|
+ this.dataList = res.data;
|
|
|
+ },
|
|
|
+ //添加类别
|
|
|
+ async addCategoryFn() {
|
|
|
+ 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(() => {
|
|
|
+ // deleteGroup({ groupId: item.marketingGroupId }).then((res) => {
|
|
|
+ // this.$successMsg("删除成功");
|
|
|
+ // this.getGroupList();
|
|
|
+ // });
|
|
|
+ })
|
|
|
+ .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>
|
chen