|
|
@@ -11,7 +11,49 @@
|
|
|
<a-tree :tree-data="classList" :field-names="treeFieldNames" :selected-keys="selectedClassKeys"
|
|
|
:expanded-keys="expandedKeys" :expand-action="false" :autoExpandParent="true" @select="onClassSelect" class="custom-tree">
|
|
|
<template #title="node">
|
|
|
- <span>{{ node.classname }}{{ node.remark ? '-' + node.remark : '' }}</span>
|
|
|
+ <div class="tree-node-content">
|
|
|
+ <span class="node-title">{{ node.classname }}{{ node.remark ? '-' + node.remark : '' }}</span>
|
|
|
+ <div class="node-operations">
|
|
|
+ <!-- 新建按钮:子分类新建数据,父分类新建下级 -->
|
|
|
+ <a-button
|
|
|
+ type="link"
|
|
|
+ size="small"
|
|
|
+ @click="(e) => handleCreate(node, e)"
|
|
|
+ :disabled="node.level >= 3"
|
|
|
+ >
|
|
|
+ {{ node.level === 1 ? '新建子分类' : '新建' }}
|
|
|
+ </a-button>
|
|
|
+
|
|
|
+ <!-- 编辑下拉菜单 -->
|
|
|
+ <a-dropdown
|
|
|
+ placement="bottomRight"
|
|
|
+ trigger="hover"
|
|
|
+ >
|
|
|
+ <template #overlay>
|
|
|
+ <a-menu>
|
|
|
+ <!-- 启用/停用分类 -->
|
|
|
+ <a-menu-item @click="(e) => handleToggleStatus(node, e)">
|
|
|
+ {{ node.isenable === 1 ? '停用分类' : '启用分类' }}
|
|
|
+ </a-menu-item>
|
|
|
+ <!-- 编辑分类 -->
|
|
|
+ <a-menu-item @click="(e) => handleEdit(node, e)">
|
|
|
+ 编辑分类
|
|
|
+ </a-menu-item>
|
|
|
+ <!-- 删除分类 -->
|
|
|
+ <a-menu-item
|
|
|
+ @click="(e) => handleDelete(node, e)"
|
|
|
+ :disabled="node.children && node.children.length > 0"
|
|
|
+ >
|
|
|
+ 删除分类
|
|
|
+ </a-menu-item>
|
|
|
+ </a-menu>
|
|
|
+ </template>
|
|
|
+ <a-button type="link" size="small">
|
|
|
+ 编辑
|
|
|
+ </a-button>
|
|
|
+ </a-dropdown>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
</a-tree>
|
|
|
</div>
|
|
|
@@ -21,7 +63,12 @@
|
|
|
<listTemp ref="list" @handleData="handleData" keyRouteName="title" :param="param" tableName="signListTable"
|
|
|
:searchType="searchType" :detailPage="{ name: 'assetsStoreDetail', idname: 'sat_sharematerialid' }">
|
|
|
<template #operation>
|
|
|
- <Add :selectedClass="selectedClassNode" @back="delRow" v-if="utils.hasPermission('insert')"></Add>
|
|
|
+ <Add
|
|
|
+ ref="addRef"
|
|
|
+ :selectedClass="selectedClassNode"
|
|
|
+ @back="delRow"
|
|
|
+ v-if="utils.hasPermission('insert')"
|
|
|
+ ></Add>
|
|
|
<setClass @back="getClassList()"></setClass>
|
|
|
</template>
|
|
|
<template #tb_cell="{ data }">
|
|
|
@@ -80,6 +127,22 @@
|
|
|
</template>
|
|
|
|
|
|
<setClass ref="setClassRef" v-model:visible="showSetClass" @back="getClassList()"></setClass>
|
|
|
+
|
|
|
+ <!-- 新建分类对话框 -->
|
|
|
+ <SetClassAdd
|
|
|
+ v-if="showCreateClassDialog"
|
|
|
+ :data="createData"
|
|
|
+ @onSuccess="handleCreateSuccess"
|
|
|
+ @back="showCreateClassDialog = false"
|
|
|
+ />
|
|
|
+
|
|
|
+ <!-- 编辑分类对话框 -->
|
|
|
+ <SetClassEdit
|
|
|
+ v-if="showEditClassDialog"
|
|
|
+ :data="editData"
|
|
|
+ @onSuccess="handleEditSuccess"
|
|
|
+ @back="showEditClassDialog = false"
|
|
|
+ />
|
|
|
</template>
|
|
|
<script setup>
|
|
|
import listTemp from '@/components/listTemplate/index.vue';
|
|
|
@@ -91,12 +154,138 @@ import customBtn from '@/components/customHandleBtn/index.vue'
|
|
|
import Add from './modules/Add.vue'
|
|
|
import setClass from './modules/setClass/index.vue'
|
|
|
import useHistory from '@/MAR/signManage/modules/downcount.vue'
|
|
|
+import SetClassAdd from './modules/setClass/add.vue'
|
|
|
+import SetClassEdit from './modules/setClass/edit.vue'
|
|
|
+import { Modal } from 'ant-design-vue'
|
|
|
|
|
|
import { useAuthStore } from '@/stores/modules/auth'
|
|
|
const router = useRouter()
|
|
|
console.log(router);
|
|
|
const list = ref()
|
|
|
|
|
|
+// 操作函数
|
|
|
+const handleCreate = (node, e) => {
|
|
|
+ // 防止事件冒泡,避免触发Tree的select事件
|
|
|
+ if (e) {
|
|
|
+ e.stopPropagation()
|
|
|
+ e.preventDefault()
|
|
|
+ }
|
|
|
+
|
|
|
+ // 根据节点层级判断是新建分类还是新建数据
|
|
|
+ if (node.level === 1) {
|
|
|
+ // 一级分类(父分类):新建子分类
|
|
|
+ console.log('新建子分类,父分类:', node)
|
|
|
+ showCreateClassDialog.value = true
|
|
|
+ createData.value = node
|
|
|
+ } else if (node.level === 2) {
|
|
|
+ // 二级分类(子分类):新建数据
|
|
|
+ // 使用现有的 Add 组件,传递分类信息
|
|
|
+ console.log('新建数据,分类:', node)
|
|
|
+ // 首先设置当前选中的分类,然后触发新建按钮点击
|
|
|
+ selectedClassNode.value = node
|
|
|
+ selectedClassKeys.value = [node.sat_sharematerial_classid]
|
|
|
+
|
|
|
+ // 调用新建组件的功能
|
|
|
+ if (addRef.value) {
|
|
|
+ addRef.value.addClass()
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+// 启用/停用分类
|
|
|
+const handleToggleStatus = (node, e) => {
|
|
|
+ if (e) {
|
|
|
+ e.stopPropagation()
|
|
|
+ e.preventDefault()
|
|
|
+ }
|
|
|
+
|
|
|
+ Modal.confirm({
|
|
|
+ title: `确定要${node.isenable === 1 ? '停用' : '启用'}该分类吗?`,
|
|
|
+ content: node.isenable === 1 ? '停用后该分类下的所有内容将不可见' : '启用后该分类下的所有内容将可见',
|
|
|
+ okText: '确定',
|
|
|
+ okType: 'primary',
|
|
|
+ cancelText: '取消',
|
|
|
+ onOk() {
|
|
|
+ return new Promise((resolve, reject) => {
|
|
|
+ Api.requested({
|
|
|
+ "id": "20240403153602",
|
|
|
+ "content": {
|
|
|
+ "sat_sharematerial_classids": [node.sat_sharematerial_classid],
|
|
|
+ "isenable": node.isenable === 1 ? 0 : 1
|
|
|
+ }
|
|
|
+ }).then(res => {
|
|
|
+ if (res.msg === '成功') {
|
|
|
+ node.isenable = node.isenable === 1 ? 0 : 1
|
|
|
+ utils.message(res, '操作成功')
|
|
|
+ resolve()
|
|
|
+ } else {
|
|
|
+ reject()
|
|
|
+ }
|
|
|
+ }).catch(reject)
|
|
|
+ })
|
|
|
+ },
|
|
|
+ onCancel() {}
|
|
|
+ })
|
|
|
+}
|
|
|
+
|
|
|
+// 编辑分类
|
|
|
+const handleEdit = (node, e) => {
|
|
|
+ if (e) {
|
|
|
+ e.stopPropagation()
|
|
|
+ e.preventDefault()
|
|
|
+ }
|
|
|
+
|
|
|
+ console.log('编辑分类:', node)
|
|
|
+ showEditClassDialog.value = true
|
|
|
+ editData.value = node
|
|
|
+}
|
|
|
+
|
|
|
+// 删除分类
|
|
|
+const handleDelete = (node, e) => {
|
|
|
+ if (e) {
|
|
|
+ e.stopPropagation()
|
|
|
+ e.preventDefault()
|
|
|
+ }
|
|
|
+
|
|
|
+ Modal.confirm({
|
|
|
+ title: '确定要删除该分类吗?',
|
|
|
+ content: '删除后该分类下的所有内容将不可恢复',
|
|
|
+ okText: '确定',
|
|
|
+ okType: 'danger',
|
|
|
+ cancelText: '取消',
|
|
|
+ onOk() {
|
|
|
+ return new Promise((resolve, reject) => {
|
|
|
+ Api.requested({
|
|
|
+ "id": "20221102143502",
|
|
|
+ "content": {
|
|
|
+ "sat_sharematerial_classids": [node.sat_sharematerial_classid]
|
|
|
+ }
|
|
|
+ }).then(res => {
|
|
|
+ if (res.msg === '成功') {
|
|
|
+ utils.message(res, '操作成功')
|
|
|
+ getClassList()
|
|
|
+ resolve()
|
|
|
+ } else {
|
|
|
+ reject()
|
|
|
+ }
|
|
|
+ }).catch(reject)
|
|
|
+ })
|
|
|
+ },
|
|
|
+ onCancel() {}
|
|
|
+ })
|
|
|
+}
|
|
|
+
|
|
|
+// 分类操作成功处理函数
|
|
|
+const handleCreateSuccess = () => {
|
|
|
+ showCreateClassDialog.value = false
|
|
|
+ getClassList() // 刷新分类列表
|
|
|
+}
|
|
|
+
|
|
|
+const handleEditSuccess = () => {
|
|
|
+ showEditClassDialog.value = false
|
|
|
+ getClassList() // 刷新分类列表
|
|
|
+}
|
|
|
+
|
|
|
provide('listqueryidFun', () => list.value.listqueryid)
|
|
|
|
|
|
// 树形字段映射
|
|
|
@@ -115,6 +304,13 @@ const debounceTimer = ref(null) // 防抖定时器
|
|
|
const showSetClass = ref(false)
|
|
|
const setClassRef = ref()
|
|
|
const enableNewLayout = ref(true) // 是否启用新布局
|
|
|
+const addRef = ref(null) // Add组件引用
|
|
|
+
|
|
|
+// 分类操作对话框
|
|
|
+const showCreateClassDialog = ref(false)
|
|
|
+const showEditClassDialog = ref(false)
|
|
|
+const createData = ref(null)
|
|
|
+const editData = ref(null)
|
|
|
|
|
|
// 打开设置分类弹窗
|
|
|
const openSetClass = () => {
|
|
|
@@ -332,4 +528,44 @@ onMounted(() => {
|
|
|
.custom-tree :deep(.ant-tree-node-selected .ant-tree-title) {
|
|
|
color: #1890ff;
|
|
|
}
|
|
|
+
|
|
|
+/* 树节点内容布局 */
|
|
|
+.tree-node-content {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ width: 100%;
|
|
|
+}
|
|
|
+
|
|
|
+.node-title {
|
|
|
+ flex: 1;
|
|
|
+ padding: 2px 8px;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ white-space: nowrap;
|
|
|
+}
|
|
|
+
|
|
|
+.node-operations {
|
|
|
+ display: flex;
|
|
|
+ gap: 4px;
|
|
|
+}
|
|
|
+
|
|
|
+/* 操作按钮样式 */
|
|
|
+.custom-tree :deep(.ant-tree-title) {
|
|
|
+ display: block;
|
|
|
+ width: 100%;
|
|
|
+}
|
|
|
+
|
|
|
+.custom-tree :deep(.ant-btn) {
|
|
|
+ padding: 0 8px;
|
|
|
+ font-size: 12px;
|
|
|
+ height: auto;
|
|
|
+ line-height: 1.5715;
|
|
|
+}
|
|
|
+
|
|
|
+/* 下拉菜单样式 */
|
|
|
+.custom-tree :deep(.ant-dropdown-menu-item) {
|
|
|
+ padding: 8px 16px;
|
|
|
+ font-size: 12px;
|
|
|
+}
|
|
|
</style>
|