|
|
|
@ -8,23 +8,23 @@ |
|
|
|
<template v-slot:left> |
|
|
|
<!-- :disabled="crud.selections.length === 0 || crud.selections[0].type !== 1 || crud.selections[0].type === 3" --> |
|
|
|
<!-- :disabled="crud.selections.length === 0 || crud.selections[0].type !== 1" --> |
|
|
|
<el-button size="mini" @click="toAddOrEdit('add')"> |
|
|
|
<el-button size="mini" :disabled="currentNodeLevel===4" @click="toAddOrEdit('add')"> |
|
|
|
<i class="iconfont icon-xinzeng" /> |
|
|
|
新增 |
|
|
|
</el-button> |
|
|
|
<!-- :disabled="crud.selections.length !== 1 || crud.selections[0].pid === '0' || crud.selections[0].type === 3" --> |
|
|
|
<el-button :disabled="crud.selections.length !== 1" size="mini" @click="toAddOrEdit('edit')"> |
|
|
|
<el-button :disabled="crud.selections.length !== 1 || crud.selections[0].id === 0" size="mini" @click="toAddOrEdit('edit')"> |
|
|
|
<i class="iconfont icon-bianji" /> |
|
|
|
编辑 |
|
|
|
</el-button> |
|
|
|
</template> |
|
|
|
<template v-slot:right> |
|
|
|
<!-- :disabled="crud.selections.length === 0 || (crud.selections.length === 1 && crud.selections[0].pid === '0' ) || crud.selections[0].type === 3" --> |
|
|
|
<el-button :disabled="crud.selections.length === 0" size="mini" :loading="crud.delAllLoading" @click="toDelete(crud.selections)"> |
|
|
|
<el-button :disabled="crud.selections.length === 0 || crud.selections[0].id === 0" size="mini" :loading="crud.delAllLoading" @click="toDelete(crud.selections)"> |
|
|
|
<i class="iconfont icon-shanchu" /> |
|
|
|
删除 |
|
|
|
</el-button> |
|
|
|
<el-button icon="el-icon-sort" size="mini" :loading="sortLoading" :disabled="brotherNodeNum <= 1 || crud.selections[0].pid === '0' " @click="toSort(crud.selections)">排序</el-button> |
|
|
|
<el-button icon="el-icon-sort" size="mini" :loading="sortLoading" :disabled="brotherNodeNum <= 1 || crud.selections[0].id === 0" @click="toSort(crud.selections)">排序</el-button> |
|
|
|
</template> |
|
|
|
</crudOperation> |
|
|
|
</div> |
|
|
|
@ -36,7 +36,7 @@ |
|
|
|
<el-scrollbar style="height: calc(100vh - 230px);"> |
|
|
|
<el-tree ref="tree" v-loading="crud.loading" :data="crud.data" :props="defaultProps" node-key="id" :expand-on-click-node="false" highlight-current @node-click="handleNodeClick"> |
|
|
|
<span slot-scope="{ node, data }" class="custom-tree-node"> |
|
|
|
<span v-if="data.type === 1" class="iconMenu"> |
|
|
|
<span v-if="data.type === 1" class="iconFolder"> |
|
|
|
{{ data.title }} |
|
|
|
</span> |
|
|
|
<span v-else class="iconMenuColumn"> |
|
|
|
@ -75,14 +75,14 @@ |
|
|
|
<p v-else-if="selectedMenu.type == 3">栏目列表</p> |
|
|
|
<p v-else-if="selectedMenu.type == 4">新书推荐</p> |
|
|
|
<p v-else /> |
|
|
|
<div style="flex: 1; display: flex; justify-content: flex-start; align-items: center; margin-left: 10px;"> |
|
|
|
<div v-if="currentNodeLevel===2" style="flex: 1; display: flex; justify-content: flex-start; align-items: center; margin-left: 10px;"> |
|
|
|
<i style="cursor: pointer;" class="iconfont" :class="copied ? 'icon-fuzhichenggong1' : 'icon-fuzhi'" @click="copyLink" /> |
|
|
|
<span style="display: block; flex: 1; text-align: left;">仅1级菜单可生成链接地址！</span> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="info-item"> |
|
|
|
<span>所属父级</span> |
|
|
|
<p>{{ selectedMenu.parentId ? selectedMenu.parentName : '-' }}</p> |
|
|
|
<p>{{ selectedMenu.parentId===null && selectedMenu.id ===0 ? '-' : selectedMenu.parentName }}</p> |
|
|
|
</div> |
|
|
|
<div class="info-item info-content"> |
|
|
|
<span>备注</span> |
|
|
|
@ -90,7 +90,7 @@ |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="system-base-info"> |
|
|
|
<div v-if="selectedMenu.type===2 || selectedMenu.type===3" class="system-base-info"> |
|
|
|
<div class="menu-title">数据绑定</div> |
|
|
|
<div class="base-info"> |
|
|
|
<div class="info-item column-item"> |
|
|
|
@ -111,12 +111,13 @@ |
|
|
|
<el-dialog append-to-body :close-on-click-modal="false" :modal-append-to-body="false" :before-close="handleClose" :visible="formVisible" :title="dialogTilte"> |
|
|
|
<div class="setting-dialog"> |
|
|
|
<el-form ref="form" inline :model="form" :rules="rules" size="small" label-width="90px"> |
|
|
|
<!-- <el-form-item v-if="selectedMenu.type === '0'" label="所属父级" prop="queryMenu.parentId"> |
|
|
|
<el-input v-model="selectedMenu.title" disabled /> |
|
|
|
</el-form-item> --> |
|
|
|
<el-form-item label="所属父级" prop="queryMenu.parentId"> |
|
|
|
<el-form-item v-if="selectedMenu.id === '0' && selectedMenu.title === '查询机'" label="所属父级" prop="queryMenu.parentId"> |
|
|
|
<el-input v-model="selectedMenu.title" disabled /> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item v-else label="所属父级" prop="queryMenu.parentId"> |
|
|
|
<el-input v-if="btnType==='edit'" v-model="selectedMenu.parentName" disabled /> |
|
|
|
<el-input v-else v-model="selectedMenu.title" disabled /> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item label="编码" prop="queryMenu.code"> |
|
|
|
<el-input v-model="form.queryMenu.code" disabled /> |
|
|
|
</el-form-item> |
|
|
|
@ -127,12 +128,11 @@ |
|
|
|
<!-- @change="changeType" --> |
|
|
|
<el-select v-model="form.queryMenu.type" style="width: 225px;"> |
|
|
|
<!-- :disabled="brotherNodeNum >= 1 && item.value === 1" --> |
|
|
|
<el-option v-for="item in selectOptions" :key="item.value" :label="item.label" :value="item.value" /> |
|
|
|
<el-option v-for="item in filteredSelectOptions" :key="item.value" :label="item.label" :value="item.value" /> |
|
|
|
</el-select> |
|
|
|
</el-form-item> |
|
|
|
<el-row> |
|
|
|
<el-row v-if="form.queryMenu.type && (form.queryMenu.type === 2 || form.queryMenu.type === 3)"> |
|
|
|
<!-- @remove-tag="deleteTag" @change="changeColumn" --> |
|
|
|
<!-- v-if="form.queryMenu.type===2 || form.queryMenu.type===3" --> |
|
|
|
<el-form-item style="width: 100%;" label="栏目绑定" prop="queryTopicList" class="is-required selecct-dropdown"> |
|
|
|
<el-select v-model="form.queryTopicList" style="width: 584px" value-key="id" multiple placeholder="请选择" :popper-append-to-body="false"> |
|
|
|
<el-option v-for="item in columnDatas" :key="item.id" :label="item.title" :value="item" /> |
|
|
|
@ -241,14 +241,30 @@ export default { |
|
|
|
form: { |
|
|
|
queryMenu: { id: '', parentId: '', parentName: '', title: '', code: '', type: 1, remarks: '' }, |
|
|
|
queryTopicList: [] |
|
|
|
} |
|
|
|
}, |
|
|
|
btnType: 'add', |
|
|
|
currentNodeLevel: 0 // 存储当前节点层级 |
|
|
|
} |
|
|
|
}, |
|
|
|
computed: { |
|
|
|
...mapGetters([ |
|
|
|
'baseApi', |
|
|
|
'user' |
|
|
|
]) |
|
|
|
]), |
|
|
|
filteredSelectOptions() { |
|
|
|
if (this.btnType === 'edit') { |
|
|
|
return this.selectOptions.map(item => ({ |
|
|
|
...item, |
|
|
|
disabled: this.currentNodeLevel === 3 && !([2, 3].includes(item.value)) |
|
|
|
})) |
|
|
|
} |
|
|
|
|
|
|
|
if (this.currentNodeLevel === 3) { |
|
|
|
return this.selectOptions.filter(item => [2, 3].includes(item.value)) |
|
|
|
} |
|
|
|
|
|
|
|
return this.selectOptions |
|
|
|
} |
|
|
|
}, |
|
|
|
created() { |
|
|
|
this.getInitQueryTopic() |
|
|
|
@ -282,72 +298,151 @@ export default { |
|
|
|
this.expandParents(node.parent) |
|
|
|
} |
|
|
|
}, |
|
|
|
expandAllChildren(node) { |
|
|
|
if (node && node.childNodes && node.childNodes.length > 0) { |
|
|
|
node.expanded = true |
|
|
|
} |
|
|
|
}, |
|
|
|
// [CRUD.HOOK.afterRefresh]() { |
|
|
|
// if (this.crud.data.length > 0 && (this.crud.data[0].id === null || this.crud.data[0].id === undefined)) { |
|
|
|
// this.crud.data[0].type = 1 |
|
|
|
// } |
|
|
|
// console.log('this.crud.data', this.crud.data) |
|
|
|
|
|
|
|
// this.$nextTick(() => { |
|
|
|
// let currentKey |
|
|
|
// if (localStorage.getItem('currentMenuKey')) { |
|
|
|
// currentKey = JSON.parse(localStorage.getItem('currentMenuKey')) |
|
|
|
// } else { |
|
|
|
// currentKey = this.crud.data[0] |
|
|
|
// } |
|
|
|
// console.log('currentKey', currentKey) |
|
|
|
// this.$refs.tree.setCurrentKey(currentKey.id) |
|
|
|
|
|
|
|
// const selectedKey = this.$refs.tree.getCurrentNode() |
|
|
|
// console.log('selectedKey', selectedKey) |
|
|
|
// if (this.$refs.tree.getNode(selectedKey) && this.$refs.tree.getNode(selectedKey).parent) { |
|
|
|
// this.expandParents(this.$refs.tree.getNode(selectedKey).parent) |
|
|
|
// } |
|
|
|
// // 选中节点的门类详情 |
|
|
|
// this.handleNodeClick(selectedKey, this.$refs.tree.getNode(selectedKey)) |
|
|
|
// }) |
|
|
|
// }, |
|
|
|
checkNodeExists(nodeId) { |
|
|
|
if (nodeId === '0') return true |
|
|
|
|
|
|
|
const check = (nodes) => { |
|
|
|
if (!nodes || !nodes.length) return false |
|
|
|
for (const node of nodes) { |
|
|
|
if (node.id === nodeId) return true |
|
|
|
if (node.children && node.children.length > 0) { |
|
|
|
if (check(node.children)) return true |
|
|
|
} |
|
|
|
} |
|
|
|
return false |
|
|
|
} |
|
|
|
return check(this.crud.data) |
|
|
|
}, |
|
|
|
[CRUD.HOOK.afterRefresh]() { |
|
|
|
let currentKey |
|
|
|
if (localStorage.getItem('currentMenuKey')) { |
|
|
|
currentKey = JSON.parse(localStorage.getItem('currentMenuKey')) |
|
|
|
} else { |
|
|
|
currentKey = this.crud.data[0] |
|
|
|
if (this.crud.data && this.crud.data.length > 0) { |
|
|
|
const newFirstNode = { |
|
|
|
...this.crud.data[0], |
|
|
|
id: 0, |
|
|
|
type: 1, |
|
|
|
parentId: null |
|
|
|
} |
|
|
|
this.crud.data.splice(0, 1, newFirstNode) |
|
|
|
} |
|
|
|
this.$refs.tree.setCurrentKey(currentKey.id) |
|
|
|
|
|
|
|
this.$nextTick(() => { |
|
|
|
const selectedKey = this.$refs.tree.getCurrentNode() |
|
|
|
if (this.$refs.tree.getNode(selectedKey) && this.$refs.tree.getNode(selectedKey).parent) { |
|
|
|
this.expandParents(this.$refs.tree.getNode(selectedKey).parent) |
|
|
|
let currentKey |
|
|
|
const storedKey = localStorage.getItem('currentMenuKey') |
|
|
|
|
|
|
|
if (storedKey) { |
|
|
|
const parsedKey = JSON.parse(storedKey) |
|
|
|
if (parsedKey && parsedKey.id && this.checkNodeExists(parsedKey.id)) { |
|
|
|
currentKey = parsedKey |
|
|
|
} else { |
|
|
|
currentKey = this.crud.data[0] |
|
|
|
} |
|
|
|
} else { |
|
|
|
currentKey = this.crud.data[0] |
|
|
|
} |
|
|
|
// 选中节点的门类详情 |
|
|
|
this.handleNodeClick(selectedKey) |
|
|
|
|
|
|
|
this.$refs.tree.setCurrentKey(currentKey.id) |
|
|
|
|
|
|
|
this.$nextTick(() => { |
|
|
|
const selectedNode = this.$refs.tree.getCurrentNode() |
|
|
|
console.log('实际选中的节点:', selectedNode ? selectedNode.id : '未选中任何节点') |
|
|
|
if (selectedNode) { |
|
|
|
const node = this.$refs.tree.getNode(selectedNode) |
|
|
|
if (node && node.parent) this.expandParents(node.parent) |
|
|
|
// this.expandAllChildren(node) |
|
|
|
|
|
|
|
this.handleNodeClick(selectedNode, node) |
|
|
|
} |
|
|
|
}) |
|
|
|
}) |
|
|
|
}, |
|
|
|
// 选中门类后，设置门类详情数据 |
|
|
|
handleNodeClick(val, node) { |
|
|
|
if (val) { |
|
|
|
this.crud.selectionChangeHandler([val]) |
|
|
|
// this.$refs.eform.parentId = val.id |
|
|
|
this.selectedMenu = val |
|
|
|
if (!val || !node) return |
|
|
|
localStorage.setItem('currentMenuKey', JSON.stringify(val)) |
|
|
|
this.crud.selectionChangeHandler([val]) |
|
|
|
this.selectedMenu = val |
|
|
|
|
|
|
|
if (this.selectedMenu.queryMenuTopics.length !== 0) { |
|
|
|
const queryTopics = this.selectedMenu.queryMenuTopics.map(item => item.queryTopic) |
|
|
|
this.selectedMenu.queryTopicList = queryTopics |
|
|
|
} else { |
|
|
|
this.selectedMenu.queryTopicList = [] |
|
|
|
} |
|
|
|
if (val.parentId) { |
|
|
|
Vue.set(this.selectedMenu, 'parentName', this.$refs.tree.getNode(val.parentId).data.title) |
|
|
|
this.brotherNodeNum = this.$refs.tree.getNode(val.parentId).childNodes.length |
|
|
|
} |
|
|
|
this.currentNodeLevel = node.level |
|
|
|
this.selectedMenu.queryTopicList = val.queryMenuTopics |
|
|
|
? val.queryMenuTopics.map(item => item.queryTopic) |
|
|
|
: [] |
|
|
|
|
|
|
|
console.log('当前节点层级：', node.level) |
|
|
|
if (val.parentId === null) { |
|
|
|
const parentNode = this.crud.data[0] |
|
|
|
this.brotherNodeNum = parentNode.children ? parentNode.children.length : 0 |
|
|
|
} else { |
|
|
|
const parentNode = this.$refs.tree.getNode(val.parentId) |
|
|
|
this.brotherNodeNum = parentNode.childNodes ? parentNode.childNodes.length : 0 |
|
|
|
} |
|
|
|
|
|
|
|
// 可以根据层级执行不同操作 |
|
|
|
if (node.level === 1) { |
|
|
|
console.log('这是一级节点') |
|
|
|
} else if (node.level === 2) { |
|
|
|
console.log('这是二级节点') |
|
|
|
if (val.parentId) { |
|
|
|
const parentNode = this.$refs.tree.getNode(val.parentId) |
|
|
|
if (parentNode && parentNode.data?.title) { |
|
|
|
Vue.set(this.selectedMenu, 'parentName', parentNode.data.title) |
|
|
|
} else { |
|
|
|
console.log(`这是第${node.level}级节点`) |
|
|
|
Vue.set(this.selectedMenu, 'parentName', '-') |
|
|
|
} |
|
|
|
} else { |
|
|
|
if (val.id !== '0') { |
|
|
|
Vue.set(this.selectedMenu, 'parentName', '查询机') |
|
|
|
} |
|
|
|
|
|
|
|
// if (val.id !== '0') { |
|
|
|
// Vue.set(this.selectedMenu, 'parentName', this.$refs.tree.getNode(val.id).data.title) |
|
|
|
// } |
|
|
|
// if (this.$refs.tree.getNode(val.pid) && this.$refs.tree.getNode(val.pid).childNodes) { |
|
|
|
// this.brotherNodeNum = this.$refs.tree.getNode(val.pid).childNodes.length |
|
|
|
// } |
|
|
|
} |
|
|
|
console.log('brotherNodeNum', this.brotherNodeNum) |
|
|
|
console.log(`当前节点层级：${node.level}`) |
|
|
|
// switch (node.level) { |
|
|
|
// case 1: |
|
|
|
// console.log('这是顶级节点（一级节点）') |
|
|
|
// break |
|
|
|
// case 2: |
|
|
|
// console.log('这是二级节点（顶级节点的子节点）') |
|
|
|
// break |
|
|
|
// default: |
|
|
|
// console.log(`这是第${node.level}级节点`) |
|
|
|
// } |
|
|
|
}, |
|
|
|
|
|
|
|
toAddOrEdit(type) { |
|
|
|
this.btnType = type |
|
|
|
if (type === 'add') { |
|
|
|
this.dialogTilte = '新增菜单' |
|
|
|
if (this.$refs['form']) { |
|
|
|
this.$refs['form'].clearValidate() |
|
|
|
} |
|
|
|
console.log('新增菜单this.selectedMenu.title', this.selectedMenu.title) |
|
|
|
this.form = { |
|
|
|
queryMenu: { |
|
|
|
id: '', |
|
|
|
libcode: this.user.fonds.fondsNo, |
|
|
|
parentId: '', |
|
|
|
parentName: '', |
|
|
|
parentId: this.selectedMenu.id === '0' ? null : this.selectedMenu.id, |
|
|
|
parentName: this.selectedMenu.title, |
|
|
|
title: '', |
|
|
|
code: '', |
|
|
|
type: '', |
|
|
|
@ -355,20 +450,17 @@ export default { |
|
|
|
}, |
|
|
|
queryTopicList: [] |
|
|
|
} |
|
|
|
if (this.selectedMenu.type === 1) { |
|
|
|
this.form.queryMenu.parentName = this.selectedMenu.title |
|
|
|
this.form.queryMenu.parentId = this.selectedMenu.id |
|
|
|
} |
|
|
|
console.log('this.selectedMenu', this.selectedMenu) |
|
|
|
console.log('brotherNodeNum', this.brotherNodeNum) |
|
|
|
} else { |
|
|
|
console.log('this.selectedMenu编辑', this.selectedMenu) |
|
|
|
this.dialogTilte = '编辑菜单' |
|
|
|
this.form = { |
|
|
|
queryMenu: { |
|
|
|
id: this.selectedMenu.id, |
|
|
|
parentId: this.selectedMenu.parentId, |
|
|
|
libcode: this.user.fonds.fondsNo, |
|
|
|
parentName: this.selectedMenu.parentName || null, |
|
|
|
parentName: this.selectedMenu.parentName, |
|
|
|
title: this.selectedMenu.title, |
|
|
|
code: null, |
|
|
|
type: this.selectedMenu.type, |
|
|
|
@ -376,9 +468,10 @@ export default { |
|
|
|
}, |
|
|
|
queryTopicList: [...this.selectedMenu.queryTopicList] |
|
|
|
} |
|
|
|
console.log('编辑时的表单数据', this.form) |
|
|
|
} |
|
|
|
this.formVisible = true |
|
|
|
|
|
|
|
console.log('form', this.form) |
|
|
|
}, |
|
|
|
handleComfired() { |
|
|
|
this.$refs.form.validate((valid) => { |
|
|
|
@ -455,7 +548,8 @@ export default { |
|
|
|
}) |
|
|
|
}, |
|
|
|
toSort(data) { |
|
|
|
this.$refs.sort.sortTableData = this.$refs.tree.getNode(data[0].pid).data.children |
|
|
|
console.log('data', data) |
|
|
|
this.$refs.sort.sortTableData = this.$refs.tree.getNode(data[0].parentId).data.children |
|
|
|
this.$refs.sort.sortVisible = true |
|
|
|
}, |
|
|
|
handleDblClick(formName, field) { |
|
|
|
|
