xuhuajiao
/
localization-management-system
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

查询机菜单管理

master
xuhuajiao 2 weeks ago
parent
7616e5de0a
commit
8f43574bbf
4 changed files with 324 additions and 255 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 11
      src/api/inquiryMachine/column.js
  2. 114
      src/api/inquiryMachine/menu.js
  3. 104
      src/views/inquiryMachine/form.vue
  4. 350
      src/views/inquiryMachine/menu.vue

11
src/api/inquiryMachine/column.js
View File

@ -1,5 +1,6 @@
import request from '@/utils/request' import request from '@/utils/request'
// 查询机栏目管理
export function FetchInitQueryTopic() { export function FetchInitQueryTopic() {
return request({ return request({
url: 'api/queryMachine/initQueryTopic', url: 'api/queryMachine/initQueryTopic',
@ -7,6 +8,14 @@ export function FetchInitQueryTopic() {
}) })
} }
// 查询机栏目管理树
export function FetchQueryTopicTree() {
return request({
url: 'api/queryMachine/getQueryTopicTree',
method: 'get'
})
}
export function add(data) { export function add(data) {
return request({ return request({
url: 'api/queryMachine/editQueryTopic', url: 'api/queryMachine/editQueryTopic',
@ -39,4 +48,4 @@ export function FetchQueryTopicStatus(data) {
}) })
} }
export default { FetchInitQueryTopic, add, edit, del, FetchQueryTopicStatus }
export default { FetchInitQueryTopic, FetchQueryTopicTree, add, edit, del, FetchQueryTopicStatus }

114
src/api/inquiryMachine/menu.js
View File

@ -1,6 +1,6 @@
import request from '@/utils/request' import request from '@/utils/request'
// 获取门类树状菜单
// 获取菜单树状菜单
export function FetchCategoryMenu() { export function FetchCategoryMenu() {
return request({ return request({
url: 'api/category/menu', url: 'api/category/menu',
@ -8,15 +8,7 @@ export function FetchCategoryMenu() {
}) })
} }
// 获取门类下的子门类
export function FetchCategoryMenuChildren(cid) {
return request({
url: 'api/category/getChildren?categoryId=' + cid,
method: 'get'
})
}
// 新增门类
// 新增菜单
export function add(data) { export function add(data) {
return request({ return request({
url: 'api/queryMachine/editQueryMenu', url: 'api/queryMachine/editQueryMenu',
@ -25,7 +17,7 @@ export function add(data) {
}) })
} }
// 编辑门类
// 编辑菜单
export function edit(data) { export function edit(data) {
return request({ return request({
url: 'api/queryMachine/editQueryMenu', url: 'api/queryMachine/editQueryMenu',
@ -34,108 +26,22 @@ export function edit(data) {
}) })
} }
// 删除门类
export function del(ids) {
const params = { id: ids[0] }
return request({
url: 'api/category/delete',
method: 'delete',
params
})
}
// 修改门类树状菜单
export function sort(data) {
return request({
url: 'api/category/sort',
method: 'put',
data
})
}
// 获取归档章版式
export function FetchGetFilingsealFormat() {
return request({
url: 'api/category/getFilingsealFormat',
method: 'get'
})
}
// 获取归档章详情
export function FetchGetFilingsealFormatDtails(filingId) {
// 删除菜单
export function del(data) {
return request({ return request({
url: 'api/category/getFilingsealFormatDtails?filingId=' + filingId,
method: 'get'
})
}
// 保存归档章
export function FetchEditCategoryFilingseal(data) {
return request({
url: 'api/category/editCategoryFilingseal',
url: 'api/queryMachine/deleteQueryMenu',
method: 'post', method: 'post',
data data
}) })
} }
// 启用 / 关闭归档章
export function FetchEnabledFilingseal(data) {
return request({
url: 'api/category/enabledFilingseal',
method: 'post',
data
})
}
// 门类下得字段
export function FetchInitCategoryField(params) {
return request({
url: 'api/category/initCategoryField',
method: 'get',
params
})
}
export function FetchCategoryFieldManage(params) {
return request({
url: 'api/category/categoryFieldManage',
method: 'get',
params
})
}
// 著录界面排序
export function FetchUpardicSort(data) {
// 修改菜单树状菜单
export function sort(data) {
return request({ return request({
url: 'api/category/upardicSort',
url: 'api/category/sort',
method: 'put', method: 'put',
data data
}) })
} }
// 根据父级门类id获取门类字段
export function FetchInitCategoryFieldByPid(params) {
return request({
url: 'api/category/initCategoryFieldByPid',
method: 'get',
params
})
}
export function FetchInitCategoryInputFieldByPid(params) {
return request({
url: 'api/category/initCategoryInputFieldByPid',
method: 'get',
params
})
}
export function FetchMenuByFondsId(params) {
return request({
url: 'api/category/menuByFondsId',
method: 'get',
params
})
}
export default { add, edit, del, FetchCategoryMenu, FetchInitCategoryField, FetchCategoryFieldManage, FetchUpardicSort, FetchInitCategoryFieldByPid, FetchInitCategoryInputFieldByPid, FetchMenuByFondsId }
export default { add, edit, del, FetchCategoryMenu }

104
src/views/inquiryMachine/form.vue
View File

@ -4,31 +4,33 @@
<div class="setting-dialog"> <div class="setting-dialog">
<el-form ref="form" inline :model="form" :rules="rules" size="small" label-width="90px"> <el-form ref="form" inline :model="form" :rules="rules" size="small" label-width="90px">
<el-form-item v-if="selectedMenu.pid === '0'" label="所属父级" prop="parentName"> <el-form-item v-if="selectedMenu.pid === '0'" label="所属父级" prop="parentName">
<el-input v-model="selectedMenu.cnName" disabled />
<el-input v-model="selectedMenu.title" disabled />
</el-form-item> </el-form-item>
<el-form-item v-else label="所属父级" prop="parentName"> <el-form-item v-else label="所属父级" prop="parentName">
<el-input v-model="selectedMenu.parentName" disabled /> <el-input v-model="selectedMenu.parentName" disabled />
</el-form-item> </el-form-item>
<el-form-item label="编码" prop="code"> <el-form-item label="编码" prop="code">
<el-input v-model="form.code" />
<el-input v-model="form.code" disabled />
</el-form-item> </el-form-item>
<el-form-item label="名称" prop="cnName">
<el-input v-model="form.cnName" />
<el-form-item label="名称" prop="title">
<el-input v-model="form.title" />
</el-form-item> </el-form-item>
<el-form-item label="菜单类型" prop="isType">
<el-select v-model="form.isType" style="width: 225px;" @change="changeType">
<el-form-item label="菜单类型" prop="type">
<!-- @change="changeType" -->
<el-select v-model="form.type" style="width: 225px;">
<el-option v-for="item in selectOptions" :key="item.value" :label="item.label" :value="item.value" /> <el-option v-for="item in selectOptions" :key="item.value" :label="item.label" :value="item.value" />
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-row> <el-row>
<!-- @remove-tag="deleteTag" @change="changeColumn" -->
<el-form-item style="width: 100%;" label="栏目绑定" prop="bind" class="is-required selecct-dropdown"> <el-form-item style="width: 100%;" label="栏目绑定" prop="bind" class="is-required selecct-dropdown">
<el-select v-model="form.bind" style="width: 584px" multiple placeholder="请选择" :popper-append-to-body="false" @remove-tag="deleteTag" @change="changeColumn">
<el-option v-for="item in columnDatas" :key="item.id" :label="item.title" :value="item.id" />
<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" />
</el-select> </el-select>
</el-form-item> </el-form-item>
</el-row> </el-row>
<el-form-item label="备注" prop="remark">
<el-input v-model="form.remark" type="textarea" :rows="4" style="width: 580px;" />
<el-form-item label="备注" prop="remarks">
<el-input v-model="form.remarks" type="textarea" :rows="4" style="width: 580px;" />
</el-form-item> </el-form-item>
</el-form> </el-form>
<div slot="footer" class="dialog-footer"> <div slot="footer" class="dialog-footer">
@ -40,15 +42,16 @@
</template> </template>
<script> <script>
import { FetchInitQueryTopic } from '@/api/inquiryMachine/column'
import { FetchQueryTopicTree } from '@/api/inquiryMachine/column'
import { form } from '@crud/crud' import { form } from '@crud/crud'
import CRUD from '@crud/crud' import CRUD from '@crud/crud'
import { mapGetters } from 'vuex'
const defaultForm = { id: null, parentName: null, cnName: null, code: null, bind: null, isType: null, remark: null }
const defaultForm = { id: null, parentId: null, parentName: null, title: null, code: null, queryTopicList: null, type: null, remarks: null }
export default { export default {
mixins: [ mixins: [
form(function() { form(function() {
return Object.assign({ pid: this.pid }, defaultForm)
return Object.assign({ libcode: this.user.fonds.fondsNo }, defaultForm)
}) })
], ],
props: { props: {
@ -64,19 +67,19 @@ export default {
pid: null, pid: null,
isAdd: false, isAdd: false,
rules: { rules: {
parentLevel: [
parentId: [
{ required: true, message: '所属父级不可为空', trigger: 'blur' } { required: true, message: '所属父级不可为空', trigger: 'blur' }
], ],
cnName: [
title: [
{ required: true, message: '名称不可为空', trigger: 'blur' } { required: true, message: '名称不可为空', trigger: 'blur' }
], ],
isType: [
type: [
{ required: true, message: '菜单类型不可为空', trigger: 'change' } { required: true, message: '菜单类型不可为空', trigger: 'change' }
], ],
code: [
{ required: true, message: '编码不可为空', trigger: 'blur' }
],
bind: [
// code: [
// { required: true, message: '编码不可为空', trigger: 'blur' }
// ],
queryTopicList: [
{ required: true, message: '栏目绑定不可为空', trigger: 'change' } { required: true, message: '栏目绑定不可为空', trigger: 'change' }
] ]
}, },
@ -87,11 +90,15 @@ export default {
{ value: 4, label: '新书推荐' } { value: 4, label: '新书推荐' }
], ],
columnDatas: [], columnDatas: [],
templateTree: [],
selectedTemplateNode: {},
bindColumn: [] bindColumn: []
} }
}, },
computed: {
...mapGetters([
'baseApi',
'user'
])
},
watch: { watch: {
selectedMenu: function(newValue, oldValue) { selectedMenu: function(newValue, oldValue) {
// console.log('newValue', newValue) // console.log('newValue', newValue)
@ -102,40 +109,43 @@ export default {
}, },
methods: { methods: {
getInitQueryTopic() { getInitQueryTopic() {
FetchInitQueryTopic().then(res => {
this.columnDatas = res.content
})
},
changeColumn(value) {
this.bindColumn = []
value.forEach(function(data, index) {
const role = { id: data }
this.bindColumn.push(role)
})
},
deleteTag(value) {
this.bindColumn.forEach(function(data, index) {
if (data.id === value) {
this.bindColumn.splice(index, value)
}
FetchQueryTopicTree().then(res => {
this.columnDatas = res
}) })
}, },
// changeColumn(value) {
// this.bindColumn = []
// value.forEach(function(data, index) {
// const role = { id: data }
// this.bindColumn.push(role)
// })
// },
// deleteTag(value) {
// this.bindColumn.forEach(function(data, index) {
// if (data.id === value.id) {
// this.bindColumn.splice(index, value)
// }
// })
// },
beforeToAdd() { beforeToAdd() {
this.form.isType = null
this.form.type = null
}, },
[CRUD.HOOK.beforeSubmit]() { [CRUD.HOOK.beforeSubmit]() {
}, },
// 提交前的验证 // 提交前的验证
[CRUD.HOOK.afterValidateCU](crud) { [CRUD.HOOK.afterValidateCU](crud) {
// delete crud.form.parentName
delete crud.form.parentName
delete crud.form.queryMenuTopics
const { queryTopicList, ...otherFields } = crud.form
crud.form = {
queryMenu: otherFields,
queryTopicList: queryTopicList
}
console.log(crud.form) console.log(crud.form)
return false
},
updateTemplateValue(node, instanceId) {
this.selectedTemplateNode = node
return true
}, },
changeType() { changeType() {
this.isAdd = this.form.isType === 2
// this.isAdd = this.form.type === 2
}, },
normalizer(node) { normalizer(node) {
if (node.children && !node.children.length) { if (node.children && !node.children.length) {
@ -143,9 +153,9 @@ export default {
} }
return { return {
id: node.id, id: node.id,
label: node.cnName,
label: node.title,
children: node.children, children: node.children,
isDisabled: node.isType !== 2 && node.isType !== 3 && node.isType !== 5
isDisabled: node.type !== 2 && node.type !== 3 && node.type !== 5
} }
} }
} }

350
src/views/inquiryMachine/menu.vue
View File

@ -6,20 +6,20 @@
<div class="head-container"> <div class="head-container">
<crudOperation :permission="permission"> <crudOperation :permission="permission">
<template v-slot:left> <template v-slot:left>
<!-- :disabled="crud.selections.length === 0 || crud.selections[0].isType !== 1 || crud.selections[0].isType === 3" -->
<el-button size="mini" @click="crud.toAdd">
<!-- :disabled="crud.selections.length === 0 || crud.selections[0].type !== 1 || crud.selections[0].type === 3" -->
<el-button :disabled="crud.selections.length === 0 || crud.selections[0].type !== 1" size="mini" @click="toAddOrEdit('add')">
<i class="iconfont icon-xinzeng" /> <i class="iconfont icon-xinzeng" />
新增 新增
</el-button> </el-button>
<!-- :disabled="crud.selections.length !== 1 || crud.selections[0].pid === '0' || crud.selections[0].isType === 3" -->
<el-button size="mini" @click="crud.toEdit(crud.selections[0])">
<!-- :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')">
<i class="iconfont icon-bianji" /> <i class="iconfont icon-bianji" />
编辑 编辑
</el-button> </el-button>
</template> </template>
<template v-slot:right> <template v-slot:right>
<!-- :disabled="crud.selections.length === 0 || (crud.selections.length === 1 && crud.selections[0].pid === '0' ) || crud.selections[0].isType === 3" -->
<el-button size="mini" :loading="crud.delAllLoading" @click="toDelete(crud.selections)">
<!-- :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)">
<i class="iconfont icon-shanchu" /> <i class="iconfont icon-shanchu" />
删除 删除
</el-button> </el-button>
@ -35,15 +35,15 @@
<el-scrollbar style="height: calc(100vh - 230px);"> <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"> <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 slot-scope="{ node, data }" class="custom-tree-node">
<span v-if="data.isType === 1 " class="iconFolder">
{{ data.cnName }}
<span class="iconFolder">
{{ data.title }}
</span> </span>
<span v-if="data.isType === 2" class="iconArch">
{{ data.cnName }}
</span>
<span v-if="data.isType === 3" class="iconFile">
{{ data.cnName }}
<!-- <span v-if="data.type === 2" class="iconArch">
{{ data.title }}
</span> </span>
<span v-if="data.type === 3" class="iconFile">
{{ data.title }}
</span> -->
</span> </span>
</el-tree> </el-tree>
</el-scrollbar> </el-scrollbar>
@ -56,11 +56,11 @@
<span class="right-top-line" /> <span class="right-top-line" />
<span class="left-bottom-line" /> <span class="left-bottom-line" />
<el-form ref="menuForm" class="menuForm" :model="menuForm" size="small"> <el-form ref="menuForm" class="menuForm" :model="menuForm" size="small">
<el-form-item label="" prop="preview_url">
<el-tooltip v-if="!editStatus.menuForm.preview_url" class="item" effect="dark" content="双击编辑查询机页面展示地址" placement="top">
<span class="edit-readonly" :style="{ color: menuForm.preview_url ? '#606266' : '#c0c4cc' }" @dblclick="handleDblClick('menuForm', 'preview_url')"> {{ menuForm.preview_url || '双击编辑查询机页面展示地址' }} </span>
<el-form-item label="" prop="demo_link">
<el-tooltip v-if="!editStatus.menuForm.demo_link" class="item" effect="dark" content="双击编辑查询机页面展示地址" placement="top">
<span class="edit-readonly" :style="{ color: menuForm.demo_link ? '#606266' : '#c0c4cc' }" @dblclick="handleDblClick('menuForm', 'demo_link')"> {{ menuForm.demo_link || '双击编辑查询机页面展示地址' }} </span>
</el-tooltip> </el-tooltip>
<el-input v-else ref="menuFormpreview_url" v-model="menuForm.preview_url" @blur="handleBlur('menuForm', 'preview_url')" @keyup.enter="handleBlur('menuForm', 'preview_url')" />
<el-input v-else ref="menuFormdemo_link" v-model="menuForm.demo_link" @blur="handleBlur('menuForm', 'demo_link')" @keyup.enter="handleBlur('menuForm', 'demo_link')" />
</el-form-item> </el-form-item>
</el-form> </el-form>
<div class="system-base-info"> <div class="system-base-info">
@ -68,14 +68,14 @@
<div class="base-info"> <div class="base-info">
<div class="info-item"> <div class="info-item">
<span>菜单名称</span> <span>菜单名称</span>
<p>{{ selectedMenu.cnName }}</p>
<p>{{ selectedMenu.title }}</p>
</div> </div>
<div class="info-item"> <div class="info-item">
<span>菜单类型</span> <span>菜单类型</span>
<p v-if="selectedMenu.isType == 1">菜单</p>
<p v-else-if="selectedMenu.isType == 2">栏目显示</p>
<p v-else-if="selectedMenu.isType == 3">栏目列表</p>
<p v-else-if="selectedMenu.isType == 4">新书推荐</p>
<p v-if="selectedMenu.type == 1">菜单</p>
<p v-else-if="selectedMenu.type == 2">栏目显示</p>
<p v-else-if="selectedMenu.type == 3">栏目列表</p>
<p v-else-if="selectedMenu.type == 4">新书推荐</p>
<p v-else /> <p v-else />
<div style="flex: 1; display: flex; justify-content: flex-start; align-items: center; margin-left: 10px;"> <div 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" /> <i style="cursor: pointer;" class="iconfont" :class="copied ? 'icon-fuzhichenggong1' : 'icon-fuzhi'" @click="copyLink" />
@ -84,11 +84,11 @@
</div> </div>
<div class="info-item"> <div class="info-item">
<span>所属父级</span> <span>所属父级</span>
<p>{{ selectedMenu.parentName ? selectedMenu.parentName : '-' }}</p>
<p>{{ selectedMenu.parentId ? selectedMenu.parentName : '-' }}</p>
</div> </div>
<div class="info-item info-content"> <div class="info-item info-content">
<span>备注</span> <span>备注</span>
<p>{{ selectedMenu.remark ? selectedMenu.remark : '-' }}</p>
<p>{{ selectedMenu.remarks ? selectedMenu.remarks : '-' }}</p>
</div> </div>
</div> </div>
</div> </div>
@ -97,8 +97,8 @@
<div class="base-info"> <div class="base-info">
<div class="info-item column-item"> <div class="info-item column-item">
<span>栏目绑定</span> <span>栏目绑定</span>
<ul>
<li>栏目A</li>
<ul v-if="selectedMenu">
<li v-for="(item,index) in selectedMenu.queryTopicList" :key="index">{{ item.title }}</li>
</ul> </ul>
</div> </div>
</div> </div>
@ -106,17 +106,61 @@
</div> </div>
</div> </div>
<!--修改新增表单组件--> <!--修改新增表单组件-->
<eForm ref="eform" :selected-category="selectedMenu" />
<!-- <eForm ref="eform" :selected-menu="selectedMenu" /> -->
<!--排序对话框组件--> <!--排序对话框组件-->
<sortDialog ref="sort" @treeNodeSort="treeNodeSort" /> <sortDialog ref="sort" @treeNodeSort="treeNodeSort" />
<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-input 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>
<el-form-item label="名称" prop="queryMenu.title">
<el-input v-model="form.queryMenu.title" />
</el-form-item>
<el-form-item label="菜单类型" prop="queryMenu.type">
<!-- @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-select>
</el-form-item>
<el-row>
<!-- @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" />
</el-select>
</el-form-item>
</el-row>
<el-form-item label="备注" prop="queryMenu.remarks">
<el-input v-model="form.queryMenu.remarks" type="textarea" :rows="4" style="width: 580px;" />
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="text" @click="handleClose">取消</el-button>
<el-button :loading="btnLoading" type="primary" @click="handleComfired">确认</el-button>
</div>
</div>
</el-dialog>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import crudCategory from '@/api/inquiryMachine/menu'
import crudMenu from '@/api/inquiryMachine/menu'
import { FetchQueryTopicTree } from '@/api/inquiryMachine/column'
import CRUD, { presenter, header } from '@crud/crud' import CRUD, { presenter, header } from '@crud/crud'
import eForm from './form'
// import eForm from './form'
import sortDialog from './sortDialog' import sortDialog from './sortDialog'
import crudOperation from '@crud/CRUD.operation' import crudOperation from '@crud/CRUD.operation'
import Vue from 'vue' import Vue from 'vue'
@ -124,12 +168,12 @@ import { mapGetters } from 'vuex'
export default { export default {
name: 'InquiryMachineMenu', name: 'InquiryMachineMenu',
components: { crudOperation, eForm, sortDialog },
components: { crudOperation, sortDialog },
cruds() { cruds() {
return [ return [
CRUD({ CRUD({
title: '菜单', url: 'api/queryMachine/initQueryMenuTree', title: '菜单', url: 'api/queryMachine/initQueryMenuTree',
crudMethod: { ...crudCategory },
crudMethod: { ...crudMenu },
optShow: { optShow: {
add: false, add: false,
edit: false, edit: false,
@ -151,28 +195,58 @@ export default {
}, },
defaultProps: { defaultProps: {
children: 'children', children: 'children',
label: 'cnName'
label: 'title'
}, },
deleteVisible: false,
reconfirmDeleteVisible: false,
selectedMenu: {}, selectedMenu: {},
deleteData: {}, deleteData: {},
sortLoading: false, sortLoading: false,
queryTopics: [],
brotherNodeNum: 0, brotherNodeNum: 0,
sortTableData: [], sortTableData: [],
menuForm: { menuForm: {
preview_url: null
demo_link: null
}, },
editStatus: { editStatus: {
menuForm: { menuForm: {
preview_url: false
demo_link: false
} }
}, },
originalValues: { originalValues: {
menuForm: {} menuForm: {}
}, },
link: 'https://www.baidu.com/', link: 'https://www.baidu.com/',
copied: false
copied: false,
btnLoading: false,
dialogTilte: '新增菜单',
formVisible: false,
rules: {
parentId: [
{ required: true, message: '所属父级不可为空', trigger: 'blur' }
],
'queryMenu.title': [
{ required: true, message: '名称不可为空', trigger: 'blur' }
],
'queryMenu.type': [
{ required: true, message: '菜单类型不可为空', trigger: 'change' }
],
// code: [
// { required: true, message: '编码不可为空', trigger: 'blur' }
// ],
queryTopicList: [
{ required: true, message: '栏目绑定不可为空', trigger: 'change' }
]
},
selectOptions: [
{ value: 1, label: '菜单' },
{ value: 2, label: '栏目显示' },
{ value: 3, label: '栏目列表' },
{ value: 4, label: '新书推荐' }
],
columnDatas: [],
form: {
queryMenu: { id: null, parentId: null, parentName: null, title: null, code: null, type: null, remarks: null },
queryTopicList: []
}
} }
}, },
computed: { computed: {
@ -182,9 +256,14 @@ export default {
]) ])
}, },
created() { created() {
this.getInitQueryTopic()
}, },
methods: { methods: {
getInitQueryTopic() {
FetchQueryTopicTree().then(res => {
this.columnDatas = res
})
},
[CRUD.HOOK.beforeRefresh]() { [CRUD.HOOK.beforeRefresh]() {
this.crud.query.page = null this.crud.query.page = null
this.crud.query.size = null this.crud.query.size = null
@ -210,21 +289,13 @@ export default {
}, },
[CRUD.HOOK.afterRefresh]() { [CRUD.HOOK.afterRefresh]() {
let currentKey let currentKey
if (localStorage.getItem('currentCategoryKey')) {
currentKey = JSON.parse(localStorage.getItem('currentCategoryKey'))
if (localStorage.getItem('currentMenuKey')) {
currentKey = JSON.parse(localStorage.getItem('currentMenuKey'))
} else { } else {
if (this.crud.data[0].isType === 1) {
currentKey = this.findNode(this.crud.data[0].children, (node) => {
return node.isType !== 1
})
} else {
currentKey = this.crud.data[0]
}
currentKey = this.crud.data[0]
} }
// 设置某个节点的当前选中状态
this.$refs.tree.setCurrentKey(currentKey.id) this.$refs.tree.setCurrentKey(currentKey.id)
this.$nextTick(() => { this.$nextTick(() => {
// 设置某个节点的父级展开
const selectedKey = this.$refs.tree.getCurrentNode() const selectedKey = this.$refs.tree.getCurrentNode()
if (this.$refs.tree.getNode(selectedKey) && this.$refs.tree.getNode(selectedKey).parent) { if (this.$refs.tree.getNode(selectedKey) && this.$refs.tree.getNode(selectedKey).parent) {
this.expandParents(this.$refs.tree.getNode(selectedKey).parent) this.expandParents(this.$refs.tree.getNode(selectedKey).parent)
@ -237,45 +308,115 @@ export default {
handleNodeClick(val) { handleNodeClick(val) {
if (val) { if (val) {
this.crud.selectionChangeHandler([val]) this.crud.selectionChangeHandler([val])
this.$refs.eform.pid = val.id
// this.$refs.eform.parentId = val.id
this.selectedMenu = val this.selectedMenu = val
if (val.pid !== '0') {
Vue.set(this.selectedMenu, 'parentName', this.$refs.tree.getNode(val.pid).data.cnName)
if (this.selectedMenu.queryMenuTopics.length !== 0) {
const queryTopics = this.selectedMenu.queryMenuTopics.map(item => item.queryTopic)
this.selectedMenu.queryTopicList = queryTopics
} else {
this.selectedMenu.queryTopicList = []
} }
this.changeActiveTab(0)
// 缓存当前的选中的
localStorage.setItem('currentCategoryKey', JSON.stringify(val))
if (this.$refs.tree.getNode(val.pid) && this.$refs.tree.getNode(val.pid).childNodes) {
this.brotherNodeNum = this.$refs.tree.getNode(val.pid).childNodes.length
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
} }
if (localStorage.getItem('categoryTabIndex')) {
this.$nextTick(() => {
localStorage.removeItem('categoryTabIndex')
})
// 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
// }
}
},
toAddOrEdit(type) {
if (type === 'add') {
this.dialogTilte = '新增菜单'
if (this.$refs['form']) {
this.$refs['form'].clearValidate()
}
this.form = {
queryMenu: {
id: '',
libcode: this.user.fonds.fondsNo,
parentId: '',
parentName: '',
title: '',
code: '',
type: '',
remarks: ''
},
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 {
this.dialogTilte = '编辑菜单'
this.form = {
queryMenu: {
id: this.selectedMenu.id,
parentId: this.selectedMenu.parentId,
libcode: this.user.fonds.fondsNo,
parentName: this.selectedMenu.parentName || null,
title: this.selectedMenu.title,
code: null,
type: this.selectedMenu.type,
remarks: this.selectedMenu.remarks
},
queryTopicList: [...this.selectedMenu.queryTopicList]
}
console.log('编辑时的表单数据', this.form)
} }
this.formVisible = true
}, },
// 新增 - 判断当前节点类型，卷内/文件不可新建
[CRUD.HOOK.beforeToAdd](crud, form, btn) {
// if (this.selectedMenu.isType === 1) {
// Vue.set(this.selectedMenu, 'parentName', this.selectedMenu.cnName)
// } else {
// Vue.set(this.selectedMenu, 'parentName', this.$refs.tree.getNode(this.selectedMenu.pid).data.cnName)
// }
// const isCanAddKey = JSON.parse(localStorage.getItem('currentCategoryKey'))
// if (isCanAddKey.isType === 4 || isCanAddKey.isType === 5) {
// this.$message({ message: '此门类下不可新建门类', type: 'error', offset: 8 })
// return false
// }
this.$refs.eform.beforeToAdd()
handleComfired() {
this.$refs.form.validate((valid) => {
if (valid) {
this.btnLoading = true
delete this.form.queryMenu.parentName
console.log('this.form', this.form)
crudMenu.add(this.form).then((res) => {
if (res) {
this.$message({ message: '新增成功', type: 'success', offset: 8 })
this.crud.refresh()
localStorage.setItem('currentMenuKey', JSON.stringify(res))
} else {
this.$message({ message: res.message, type: 'error', offset: 8 })
}
this.handleClose()
}).catch(err => {
console.log(err)
this.handleClose()
})
} else {
console.log('error submit!!')
return false
}
})
}, },
// 新增/编辑后 - 新增后默认选中新增的门类
[CRUD.HOOK.afterSubmit](crud, addedCategory) {
if (addedCategory) {
// 缓存当前的选中的
localStorage.setItem('currentCategoryKey', JSON.stringify(addedCategory))
handleClose() {
this.formVisible = false
this.form = {
queryMenu: {
id: '',
libcode: this.user.fonds.fondsNo,
parentId: '',
parentName: '',
title: '',
code: '',
type: '',
remarks: ''
},
queryTopicList: []
} }
this.btnLoading = false
this.$refs['form'].resetFields()
this.$refs['form'].clearValidate()
}, },
treeNodeSort(data) { treeNodeSort(data) {
this.$refs.tree.updateKeyChildren(data[0].pid, JSON.parse(JSON.stringify(data))) this.$refs.tree.updateKeyChildren(data[0].pid, JSON.parse(JSON.stringify(data)))
@ -292,18 +433,18 @@ export default {
datas.forEach(val => { datas.forEach(val => {
ids.push(val.id) ids.push(val.id)
}) })
// crudColumn.del(ids).then((res) => {
// if (res.code !== 500) {
// this.$message({ message: '删除成功', type: 'success', offset: 8 })
// this.crud.refresh()
// } else {
// this.$message({ message: '删除失败', type: 'error', offset: 8 })
// }
// this.crud.delAllLoading = false
// }).catch(err => {
// this.crud.delAllLoading = false
// console.log(err)
// })
crudMenu.del(ids).then((res) => {
if (res.code !== 500) {
this.$message({ message: '删除成功', type: 'success', offset: 8 })
this.crud.refresh()
} else {
this.$message({ message: '删除失败', type: 'error', offset: 8 })
}
this.crud.delAllLoading = false
}).catch(err => {
this.crud.delAllLoading = false
console.log(err)
})
}).catch(() => { }).catch(() => {
}) })
}, },
@ -394,19 +535,22 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.el-form{
.el-input{
width: 600px;
margin-right: 20px;
}
.edit-readonly{
width: 600px;
}
::v-deep .el-form-item__content{
height: 40px;
overflow: hidden;
.menuForm{
&.el-form{
.el-input{
width: 600px;
margin-right: 20px;
}
.edit-readonly{
width: 600px;
}
::v-deep .el-form-item__content{
height: 40px;
overflow: hidden;
}
} }
} }
.edit-readonly { .edit-readonly {
display: inline-block; display: inline-block;
height: 32px; height: 32px;

Write Preview
Loading…
Cancel
Save