|
@@ -0,0 +1,144 @@
|
|
|
+<!--
|
|
|
+ * @Author: PoJun
|
|
|
+ * @Date: 2023-12-22 10:01:43
|
|
|
+ * @LastEditors: PoJun
|
|
|
+ * @LastEditTime: 2024-01-17 17:04:02
|
|
|
+ * @Message: 产品目录
|
|
|
+-->
|
|
|
+<template>
|
|
|
+ <div class="products">
|
|
|
+ <div style="margin-bottom: 10px">
|
|
|
+ <a-space :size="12">
|
|
|
+ <a-button type="primary" @click="addRow(null)">新增根目录</a-button>
|
|
|
+ <a-button @click="$refs.xTable.setAllTreeExpand(true)">展开所有</a-button>
|
|
|
+ <a-button @click="$refs.xTable.clearTreeExpand()">关闭所有</a-button>
|
|
|
+ </a-space>
|
|
|
+ </div>
|
|
|
+ <div class="products-table">
|
|
|
+ <vxe-table
|
|
|
+ ref="xTable"
|
|
|
+ show-overflow
|
|
|
+ border="inner"
|
|
|
+ :data="dataList"
|
|
|
+ height="auto"
|
|
|
+ :tree-config="{
|
|
|
+ iconOpen: 'vxe-icon-square-minus-fill',
|
|
|
+ iconClose: 'vxe-icon-square-plus-fill',
|
|
|
+ }"
|
|
|
+ :row-config="{ isHover: true }"
|
|
|
+ >
|
|
|
+ <vxe-column field="name" title="目录名称" tree-node></vxe-column>
|
|
|
+ <vxe-column field="code" title="目录编码"></vxe-column>
|
|
|
+ <vxe-column title="操作" width="140">
|
|
|
+ <template #default="{ row }">
|
|
|
+ <a-space :size="20" align="end" style="flex: 1">
|
|
|
+ <a-tooltip>
|
|
|
+ <template slot="title">编辑</template>
|
|
|
+ <a-icon type="form" @click="editRow(row)" :style="{ fontSize: '16px' }" />
|
|
|
+ </a-tooltip>
|
|
|
+ <a-tooltip>
|
|
|
+ <template slot="title">删除</template>
|
|
|
+ <a-icon type="delete" @click="deleteRow(row)" :style="{ fontSize: '16px' }" />
|
|
|
+ </a-tooltip>
|
|
|
+ <!-- 暂时来说只让两层 -->
|
|
|
+ <a-tooltip v-if="row.path.length == 2">
|
|
|
+ <template slot="title">新增子目录</template>
|
|
|
+ <a-icon type="plus" @click="addRow(row)" :style="{ fontSize: '16px' }" />
|
|
|
+ </a-tooltip>
|
|
|
+ </a-space>
|
|
|
+ </template>
|
|
|
+ </vxe-column>
|
|
|
+ <template #empty>
|
|
|
+ <a-empty
|
|
|
+ :image-style="{
|
|
|
+ height: '60px',
|
|
|
+ }"
|
|
|
+ ></a-empty>
|
|
|
+ </template>
|
|
|
+ </vxe-table>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <ProductsDetail
|
|
|
+ :detailObj="detailObj"
|
|
|
+ :detailType="detailType"
|
|
|
+ v-if="showDetail"
|
|
|
+ :detailTitle="detailTitle"
|
|
|
+ @close="closeDetail"
|
|
|
+ @confirm="confirmDetail"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import { getProductsTree, deleteProductsDir } from "@/api/index.js";
|
|
|
+import ProductsDetail from "./components/ProductsDetail";
|
|
|
+export default {
|
|
|
+ components: { ProductsDetail },
|
|
|
+ name: "Products",
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ dataList: [],
|
|
|
+ rules: {
|
|
|
+ name: [{ required: true, message: "必填项不能为空", trigger: ["change", "blur"] }],
|
|
|
+ code: [{ required: true, message: "必填项不能为空", trigger: ["change", "blur"] }],
|
|
|
+ },
|
|
|
+ detailObj: null, // 详情对象
|
|
|
+ showDetail: false, // 详情
|
|
|
+ detailTitle: "", // 详情标题
|
|
|
+ detailType: "add",
|
|
|
+ };
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ async initData() {
|
|
|
+ const data = await getProductsTree();
|
|
|
+ this.dataList = data;
|
|
|
+ },
|
|
|
+ addRow(row) {
|
|
|
+ this.detailObj = row;
|
|
|
+ this.detailType = "add";
|
|
|
+ this.detailTitle = "新增目录";
|
|
|
+ this.showDetail = true;
|
|
|
+ },
|
|
|
+ deleteRow(row) {
|
|
|
+ this.$confirm({
|
|
|
+ title: "数据删除无法复原,确认删除?",
|
|
|
+ onOk: () => {
|
|
|
+ deleteProductsDir(row.id).then(() => {
|
|
|
+ this.initData();
|
|
|
+ });
|
|
|
+ },
|
|
|
+ });
|
|
|
+ },
|
|
|
+ editRow(row) {
|
|
|
+ this.detailType = "edit";
|
|
|
+ this.detailTitle = "编辑目录";
|
|
|
+ this.detailObj = row;
|
|
|
+ this.showDetail = true;
|
|
|
+ },
|
|
|
+ // 关闭详情窗口
|
|
|
+ closeDetail() {
|
|
|
+ this.showDetail = false;
|
|
|
+ this.detailObj = null;
|
|
|
+ },
|
|
|
+ confirmDetail() {
|
|
|
+ this.initData();
|
|
|
+ },
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.initData();
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped lang="less">
|
|
|
+.products {
|
|
|
+ height: 100%;
|
|
|
+ background-color: @base-bg-color;
|
|
|
+ padding: 18px;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ &-table {
|
|
|
+ flex: 1;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|