8 changed files with 1057 additions and 243 deletions
-
19src/api/inquiryMachine/column.js
-
10src/api/inquiryMachine/content.js
-
141src/api/inquiryMachine/menu.js
-
145src/views/inquiryMachine/column.vue
-
292src/views/inquiryMachine/content.vue
-
156src/views/inquiryMachine/form.vue
-
465src/views/inquiryMachine/menu.vue
-
72src/views/inquiryMachine/sortDialog.vue
@ -0,0 +1,141 @@ |
|||||
|
import request from '@/utils/request' |
||||
|
|
||||
|
// 获取门类树状菜单
|
||||
|
export function FetchCategoryMenu() { |
||||
|
return request({ |
||||
|
url: 'api/category/menu', |
||||
|
method: 'get' |
||||
|
}) |
||||
|
} |
||||
|
|
||||
|
// 获取门类下的子门类
|
||||
|
export function FetchCategoryMenuChildren(cid) { |
||||
|
return request({ |
||||
|
url: 'api/category/getChildren?categoryId=' + cid, |
||||
|
method: 'get' |
||||
|
}) |
||||
|
} |
||||
|
|
||||
|
// 新增门类
|
||||
|
export function add(data) { |
||||
|
return request({ |
||||
|
url: 'api/queryMachine/editQueryMenu', |
||||
|
method: 'post', |
||||
|
data |
||||
|
}) |
||||
|
} |
||||
|
|
||||
|
// 编辑门类
|
||||
|
export function edit(data) { |
||||
|
return request({ |
||||
|
url: 'api/queryMachine/editQueryMenu', |
||||
|
method: 'post', |
||||
|
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) { |
||||
|
return request({ |
||||
|
url: 'api/category/getFilingsealFormatDtails?filingId=' + filingId, |
||||
|
method: 'get' |
||||
|
}) |
||||
|
} |
||||
|
|
||||
|
// 保存归档章
|
||||
|
export function FetchEditCategoryFilingseal(data) { |
||||
|
return request({ |
||||
|
url: 'api/category/editCategoryFilingseal', |
||||
|
method: 'post', |
||||
|
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) { |
||||
|
return request({ |
||||
|
url: 'api/category/upardicSort', |
||||
|
method: 'put', |
||||
|
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 } |
||||
@ -0,0 +1,156 @@ |
|||||
|
<template> |
||||
|
<!--表单组件--> |
||||
|
<el-dialog append-to-body :close-on-click-modal="false" :modal-append-to-body="false" :before-close="crud.cancelCU" :visible="crud.status.cu > 0" :title="crud.status.title"> |
||||
|
<div class="setting-dialog"> |
||||
|
<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-input v-model="selectedMenu.cnName" disabled /> |
||||
|
</el-form-item> |
||||
|
<el-form-item v-else label="所属父级" prop="parentName"> |
||||
|
<el-input v-model="selectedMenu.parentName" disabled /> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="编码" prop="code"> |
||||
|
<el-input v-model="form.code" /> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="名称" prop="cnName"> |
||||
|
<el-input v-model="form.cnName" /> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="菜单类型" prop="isType"> |
||||
|
<el-select v-model="form.isType" style="width: 225px;" @change="changeType"> |
||||
|
<el-option v-for="item in selectOptions" :key="item.value" :label="item.label" :value="item.value" /> |
||||
|
</el-select> |
||||
|
</el-form-item> |
||||
|
<el-row> |
||||
|
<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> |
||||
|
</el-form-item> |
||||
|
</el-row> |
||||
|
<el-form-item label="备注" prop="remark"> |
||||
|
<el-input v-model="form.remark" type="textarea" :rows="4" style="width: 580px;" /> |
||||
|
</el-form-item> |
||||
|
</el-form> |
||||
|
<div slot="footer" class="dialog-footer"> |
||||
|
<el-button type="text" @click="crud.cancelCU">取消</el-button> |
||||
|
<el-button :loading="crud.status.cu === 2" type="primary" @click="crud.submitCU">确认</el-button> |
||||
|
</div> |
||||
|
</div> |
||||
|
</el-dialog> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import { FetchInitQueryTopic } from '@/api/inquiryMachine/column' |
||||
|
import { form } from '@crud/crud' |
||||
|
import CRUD from '@crud/crud' |
||||
|
|
||||
|
const defaultForm = { id: null, parentName: null, cnName: null, code: null, bind: null, isType: null, remark: null } |
||||
|
export default { |
||||
|
mixins: [ |
||||
|
form(function() { |
||||
|
return Object.assign({ pid: this.pid }, defaultForm) |
||||
|
}) |
||||
|
], |
||||
|
props: { |
||||
|
selectedMenu: { |
||||
|
type: Object, |
||||
|
default: function() { |
||||
|
return {} |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
pid: null, |
||||
|
isAdd: false, |
||||
|
rules: { |
||||
|
parentLevel: [ |
||||
|
{ required: true, message: '所属父级不可为空', trigger: 'blur' } |
||||
|
], |
||||
|
cnName: [ |
||||
|
{ required: true, message: '名称不可为空', trigger: 'blur' } |
||||
|
], |
||||
|
isType: [ |
||||
|
{ required: true, message: '菜单类型不可为空', trigger: 'change' } |
||||
|
], |
||||
|
code: [ |
||||
|
{ required: true, message: '编码不可为空', trigger: 'blur' } |
||||
|
], |
||||
|
bind: [ |
||||
|
{ required: true, message: '栏目绑定不可为空', trigger: 'change' } |
||||
|
] |
||||
|
}, |
||||
|
selectOptions: [ |
||||
|
{ value: 1, label: '菜单' }, |
||||
|
{ value: 2, label: '栏目显示' }, |
||||
|
{ value: 3, label: '栏目列表' }, |
||||
|
{ value: 4, label: '新书推荐' } |
||||
|
], |
||||
|
columnDatas: [], |
||||
|
templateTree: [], |
||||
|
selectedTemplateNode: {}, |
||||
|
bindColumn: [] |
||||
|
} |
||||
|
}, |
||||
|
watch: { |
||||
|
selectedMenu: function(newValue, oldValue) { |
||||
|
// console.log('newValue', newValue) |
||||
|
} |
||||
|
}, |
||||
|
created() { |
||||
|
this.getInitQueryTopic() |
||||
|
}, |
||||
|
methods: { |
||||
|
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) |
||||
|
} |
||||
|
}) |
||||
|
}, |
||||
|
beforeToAdd() { |
||||
|
this.form.isType = null |
||||
|
}, |
||||
|
[CRUD.HOOK.beforeSubmit]() { |
||||
|
}, |
||||
|
// 提交前的验证 |
||||
|
[CRUD.HOOK.afterValidateCU](crud) { |
||||
|
// delete crud.form.parentName |
||||
|
console.log(crud.form) |
||||
|
return false |
||||
|
}, |
||||
|
updateTemplateValue(node, instanceId) { |
||||
|
this.selectedTemplateNode = node |
||||
|
}, |
||||
|
changeType() { |
||||
|
this.isAdd = this.form.isType === 2 |
||||
|
}, |
||||
|
normalizer(node) { |
||||
|
if (node.children && !node.children.length) { |
||||
|
delete node.children |
||||
|
} |
||||
|
return { |
||||
|
id: node.id, |
||||
|
label: node.cnName, |
||||
|
children: node.children, |
||||
|
isDisabled: node.isType !== 2 && node.isType !== 3 && node.isType !== 5 |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
</style> |
||||
@ -0,0 +1,465 @@ |
|||||
|
<template> |
||||
|
<div class="app-container category-container" style="height: calc(100vh - 140px);"> |
||||
|
<!-- 门类列表 --> |
||||
|
<div class="container-main"> |
||||
|
<div class="elect-cont-left"> |
||||
|
<div class="head-container"> |
||||
|
<crudOperation :permission="permission"> |
||||
|
<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"> |
||||
|
<i class="iconfont icon-xinzeng" /> |
||||
|
新增 |
||||
|
</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])"> |
||||
|
<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].isType === 3" --> |
||||
|
<el-button 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> |
||||
|
</template> |
||||
|
</crudOperation> |
||||
|
</div> |
||||
|
<div class="container-left"> |
||||
|
<span class="right-top-line" /> |
||||
|
<span class="left-bottom-line" /> |
||||
|
<!--门类树状结构--> |
||||
|
<div class="tree-scroll"> |
||||
|
<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.isType === 1 " class="iconFolder"> |
||||
|
{{ data.cnName }} |
||||
|
</span> |
||||
|
<span v-if="data.isType === 2" class="iconArch"> |
||||
|
{{ data.cnName }} |
||||
|
</span> |
||||
|
<span v-if="data.isType === 3" class="iconFile"> |
||||
|
{{ data.cnName }} |
||||
|
</span> |
||||
|
</span> |
||||
|
</el-tree> |
||||
|
</el-scrollbar> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<!-- 门类管理tab --> |
||||
|
<div class="elect-cont-right"> |
||||
|
<div class="container-right tab-content"> |
||||
|
<span class="right-top-line" /> |
||||
|
<span class="left-bottom-line" /> |
||||
|
<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-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-form-item> |
||||
|
</el-form> |
||||
|
<div class="system-base-info"> |
||||
|
<div class="menu-title">基本信息</div> |
||||
|
<div class="base-info"> |
||||
|
<div class="info-item"> |
||||
|
<span>菜单名称</span> |
||||
|
<p>{{ selectedMenu.cnName }}</p> |
||||
|
</div> |
||||
|
<div class="info-item"> |
||||
|
<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-else /> |
||||
|
<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" /> |
||||
|
<span style="display: block; flex: 1; text-align: left;">仅1级菜单可生成链接地址！</span> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="info-item"> |
||||
|
<span>所属父级</span> |
||||
|
<p>{{ selectedMenu.parentName ? selectedMenu.parentName : '-' }}</p> |
||||
|
</div> |
||||
|
<div class="info-item info-content"> |
||||
|
<span>备注</span> |
||||
|
<p>{{ selectedMenu.remark ? selectedMenu.remark : '-' }}</p> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="system-base-info"> |
||||
|
<div class="menu-title">数据绑定</div> |
||||
|
<div class="base-info"> |
||||
|
<div class="info-item column-item"> |
||||
|
<span>栏目绑定</span> |
||||
|
<ul> |
||||
|
<li>栏目A</li> |
||||
|
</ul> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<!--修改新增表单组件--> |
||||
|
<eForm ref="eform" :selected-category="selectedMenu" /> |
||||
|
<!--排序对话框组件--> |
||||
|
<sortDialog ref="sort" @treeNodeSort="treeNodeSort" /> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import crudCategory from '@/api/inquiryMachine/menu' |
||||
|
import CRUD, { presenter, header } from '@crud/crud' |
||||
|
import eForm from './form' |
||||
|
import sortDialog from './sortDialog' |
||||
|
import crudOperation from '@crud/CRUD.operation' |
||||
|
import Vue from 'vue' |
||||
|
import { mapGetters } from 'vuex' |
||||
|
|
||||
|
export default { |
||||
|
name: 'InquiryMachineMenu', |
||||
|
components: { crudOperation, eForm, sortDialog }, |
||||
|
cruds() { |
||||
|
return [ |
||||
|
CRUD({ |
||||
|
title: '菜单', url: 'api/queryMachine/initQueryMenuTree', |
||||
|
crudMethod: { ...crudCategory }, |
||||
|
optShow: { |
||||
|
add: false, |
||||
|
edit: false, |
||||
|
del: false, |
||||
|
download: false, |
||||
|
group: false |
||||
|
} |
||||
|
}) |
||||
|
] |
||||
|
}, |
||||
|
mixins: [presenter(), header()], |
||||
|
data() { |
||||
|
return { |
||||
|
permission: { |
||||
|
add: ['admin', 'menu:add'], |
||||
|
edit: ['admin', 'menu:edit'], |
||||
|
del: ['admin', 'menu:del'], |
||||
|
sort: ['admin', 'menu:sort'] |
||||
|
}, |
||||
|
defaultProps: { |
||||
|
children: 'children', |
||||
|
label: 'cnName' |
||||
|
}, |
||||
|
deleteVisible: false, |
||||
|
reconfirmDeleteVisible: false, |
||||
|
selectedMenu: {}, |
||||
|
deleteData: {}, |
||||
|
sortLoading: false, |
||||
|
brotherNodeNum: 0, |
||||
|
sortTableData: [], |
||||
|
menuForm: { |
||||
|
preview_url: null |
||||
|
}, |
||||
|
editStatus: { |
||||
|
menuForm: { |
||||
|
preview_url: false |
||||
|
} |
||||
|
}, |
||||
|
originalValues: { |
||||
|
menuForm: {} |
||||
|
}, |
||||
|
link: 'https://www.baidu.com/', |
||||
|
copied: false |
||||
|
} |
||||
|
}, |
||||
|
computed: { |
||||
|
...mapGetters([ |
||||
|
'baseApi', |
||||
|
'user' |
||||
|
]) |
||||
|
}, |
||||
|
created() { |
||||
|
|
||||
|
}, |
||||
|
methods: { |
||||
|
[CRUD.HOOK.beforeRefresh]() { |
||||
|
this.crud.query.page = null |
||||
|
this.crud.query.size = null |
||||
|
this.crud.query.libcode = this.user.fonds.fondsNo |
||||
|
}, |
||||
|
// 逆归实现 获取指定元素 |
||||
|
findNode(tree, func) { |
||||
|
for (const node of tree) { |
||||
|
if (func(node)) return node |
||||
|
if (node.children) { |
||||
|
const res = this.findNode(node.children, func) |
||||
|
if (res) return res |
||||
|
} |
||||
|
} |
||||
|
return null |
||||
|
}, |
||||
|
// 展开选中的父级 |
||||
|
expandParents(node) { |
||||
|
node.expanded = true |
||||
|
if (node.parent) { |
||||
|
this.expandParents(node.parent) |
||||
|
} |
||||
|
}, |
||||
|
[CRUD.HOOK.afterRefresh]() { |
||||
|
let currentKey |
||||
|
if (localStorage.getItem('currentCategoryKey')) { |
||||
|
currentKey = JSON.parse(localStorage.getItem('currentCategoryKey')) |
||||
|
} 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] |
||||
|
} |
||||
|
} |
||||
|
// 设置某个节点的当前选中状态 |
||||
|
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) |
||||
|
} |
||||
|
// 选中节点的门类详情 |
||||
|
this.handleNodeClick(selectedKey) |
||||
|
}) |
||||
|
}, |
||||
|
// 选中门类后，设置门类详情数据 |
||||
|
handleNodeClick(val) { |
||||
|
if (val) { |
||||
|
this.crud.selectionChangeHandler([val]) |
||||
|
this.$refs.eform.pid = val.id |
||||
|
this.selectedMenu = val |
||||
|
if (val.pid !== '0') { |
||||
|
Vue.set(this.selectedMenu, 'parentName', this.$refs.tree.getNode(val.pid).data.cnName) |
||||
|
} |
||||
|
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 (localStorage.getItem('categoryTabIndex')) { |
||||
|
this.$nextTick(() => { |
||||
|
localStorage.removeItem('categoryTabIndex') |
||||
|
}) |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
// 新增 - 判断当前节点类型，卷内/文件不可新建 |
||||
|
[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() |
||||
|
}, |
||||
|
// 新增/编辑后 - 新增后默认选中新增的门类 |
||||
|
[CRUD.HOOK.afterSubmit](crud, addedCategory) { |
||||
|
if (addedCategory) { |
||||
|
// 缓存当前的选中的 |
||||
|
localStorage.setItem('currentCategoryKey', JSON.stringify(addedCategory)) |
||||
|
} |
||||
|
}, |
||||
|
treeNodeSort(data) { |
||||
|
this.$refs.tree.updateKeyChildren(data[0].pid, JSON.parse(JSON.stringify(data))) |
||||
|
}, |
||||
|
toDelete(datas) { |
||||
|
this.$confirm('此操作将删除当前所选菜单项及其子集<span>你是否还要继续？</span>', '提示', { |
||||
|
confirmButtonText: '继续', |
||||
|
cancelButtonText: '取消', |
||||
|
type: 'warning', |
||||
|
dangerouslyUseHTMLString: true |
||||
|
}).then(() => { |
||||
|
this.crud.delAllLoading = true |
||||
|
const ids = [] |
||||
|
datas.forEach(val => { |
||||
|
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) |
||||
|
// }) |
||||
|
}).catch(() => { |
||||
|
}) |
||||
|
}, |
||||
|
toSort(data) { |
||||
|
this.$refs.sort.sortTableData = this.$refs.tree.getNode(data[0].pid).data.children |
||||
|
this.$refs.sort.sortVisible = true |
||||
|
}, |
||||
|
handleDblClick(formName, field) { |
||||
|
this.originalValues[formName][field] = this[formName][field] |
||||
|
this.editStatus[formName][field] = true |
||||
|
this.$nextTick(() => { |
||||
|
const input = this.$refs[`${formName}${field}`] |
||||
|
if (input) input.focus() |
||||
|
}) |
||||
|
}, |
||||
|
handleBlur(formName, field) { |
||||
|
this.editStatus[formName][field] = false |
||||
|
if (this[formName][field] !== this.originalValues[formName][field]) { |
||||
|
this.submitMapData(formName, field) |
||||
|
} |
||||
|
}, |
||||
|
submitMapData(formName, field) { |
||||
|
const value = this[formName][field] |
||||
|
if (!value) { |
||||
|
this.$message.warning(`查询机页面展示地址不能为空`) |
||||
|
this[formName][field] = this.originalValues[formName][field] |
||||
|
return |
||||
|
} |
||||
|
|
||||
|
const param = { |
||||
|
'code': field, |
||||
|
'context': value, |
||||
|
'remarks': null |
||||
|
} |
||||
|
console.log('param', param) |
||||
|
// FetchEditScreenSetting(param) |
||||
|
// .then((res) => { |
||||
|
// if (res.code !== 500) { |
||||
|
// this.$message.success('查询机页面展示地址更新成功') |
||||
|
// this.$emit('update:welcomePlay', value) |
||||
|
// this.$emit('triggerInit') |
||||
|
// } else { |
||||
|
// this.$message.error('查询机页面展示地址更新失败') |
||||
|
// } |
||||
|
// }) |
||||
|
// .catch(() => { |
||||
|
// this.$message.error('查询机页面展示地址更新失败') |
||||
|
// }) |
||||
|
}, |
||||
|
copyLink() { |
||||
|
navigator.clipboard.writeText(this.link) |
||||
|
.then(() => { |
||||
|
this.copied = true |
||||
|
// 2秒后恢复复制图标 |
||||
|
setTimeout(() => { |
||||
|
this.copied = false |
||||
|
}, 2000) |
||||
|
}) |
||||
|
.catch(err => { |
||||
|
console.error('无法复制内容: ', err) |
||||
|
this.fallbackCopyText() |
||||
|
}) |
||||
|
}, |
||||
|
fallbackCopyText() { |
||||
|
const textArea = document.createElement('textarea') |
||||
|
textArea.value = this.link |
||||
|
textArea.style.position = 'fixed' |
||||
|
document.body.appendChild(textArea) |
||||
|
textArea.focus() |
||||
|
textArea.select() |
||||
|
|
||||
|
try { |
||||
|
const successful = document.execCommand('copy') |
||||
|
this.copied = successful |
||||
|
if (successful) { |
||||
|
setTimeout(() => { |
||||
|
this.copied = false |
||||
|
}, 2000) |
||||
|
} |
||||
|
} catch (err) { |
||||
|
console.error('复制失败: ', err) |
||||
|
} |
||||
|
|
||||
|
document.body.removeChild(textArea) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<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; |
||||
|
} |
||||
|
} |
||||
|
.edit-readonly { |
||||
|
display: inline-block; |
||||
|
height: 32px; |
||||
|
line-height: 32px; |
||||
|
padding: 0 15px; |
||||
|
border: 1px solid #dcdfe6; |
||||
|
border-radius: 4px; |
||||
|
background-color: #fff; |
||||
|
margin-right: 20px; |
||||
|
cursor: default; |
||||
|
color: #606266; |
||||
|
font-size: 13px; |
||||
|
&:hover { |
||||
|
border-color: #c0c4cc; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.tree-scroll{ |
||||
|
font-size: 14px; |
||||
|
} |
||||
|
.system-base-info{ |
||||
|
display: flex; |
||||
|
justify-content: flex-start; |
||||
|
.menu-title{ |
||||
|
line-height: 36px; |
||||
|
font-size: 16px; |
||||
|
font-weight: bold; |
||||
|
color: #0c0e1e; |
||||
|
margin-right: 40px; |
||||
|
} |
||||
|
.base-info{ |
||||
|
flex: 1; |
||||
|
} |
||||
|
.info-item { |
||||
|
span{ |
||||
|
margin-right: 10px; |
||||
|
} |
||||
|
p{ |
||||
|
background-color: #f0efef; |
||||
|
} |
||||
|
&.column-item{ |
||||
|
ul{ |
||||
|
width: 300px; |
||||
|
height: 300px; |
||||
|
overflow: hidden; |
||||
|
overflow-y: scroll; |
||||
|
background-color: #f0efef; |
||||
|
li{ |
||||
|
padding: 0 10px; |
||||
|
line-height: 36px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,72 @@ |
|||||
|
<template> |
||||
|
<!--表单组件--> |
||||
|
<el-dialog class="sort-dialog" :close-on-click-modal="false" :modal-append-to-body="false" append-to-body title="排序" :visible.sync="sortVisible" @opened="opened"> |
||||
|
<div class="setting-dialog"> |
||||
|
<i class="drag-tip">提示：使用鼠标拖动调整顺序</i> |
||||
|
<el-table :data="sortTableData" :tree-props="{children: 'childrens'}" class="category-sort" style="width: 100%;" :max-height="tableHeight" row-key="id"> |
||||
|
<el-table-column type="index" label="序号" width="100" align="center" /> |
||||
|
<el-table-column prop="cnName" label="门类名称" /> |
||||
|
</el-table> |
||||
|
<div slot="footer" class="dialog-footer"> |
||||
|
<el-button @click.native="sortVisible = false">取消</el-button> |
||||
|
<el-button type="primary" @click.native="handleSort">确定</el-button> |
||||
|
</div> |
||||
|
</div> |
||||
|
</el-dialog> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import Sortable from 'sortablejs' |
||||
|
import { sort } from '@/api/inquiryMachine/menu' |
||||
|
|
||||
|
export default { |
||||
|
data() { |
||||
|
return { |
||||
|
sortVisible: false, |
||||
|
sortTableData: [], |
||||
|
tableHeight: 0 |
||||
|
} |
||||
|
}, |
||||
|
mounted() { |
||||
|
this.$nextTick(() => { |
||||
|
this.tableHeight = window.innerHeight * 0.6 |
||||
|
}) |
||||
|
}, |
||||
|
methods: { |
||||
|
// 行拖拽 |
||||
|
rowDrop(className, targetName) { |
||||
|
// 此时找到的元素是要拖拽元素的父容器 |
||||
|
const tbody = document.querySelector('.' + className + ' .el-table__body-wrapper tbody') |
||||
|
const that = this |
||||
|
Sortable.create(tbody, { |
||||
|
// 指定父元素下可被拖拽的子元素 |
||||
|
draggable: '.el-table__row', |
||||
|
onEnd({ newIndex, oldIndex }) { |
||||
|
if (newIndex === oldIndex) return |
||||
|
that[targetName].splice(newIndex, 0, that[targetName].splice(oldIndex, 1)[0]) |
||||
|
} |
||||
|
}) |
||||
|
}, |
||||
|
opened() { |
||||
|
this.rowDrop('category-sort', 'sortTableData') |
||||
|
}, |
||||
|
handleSort() { |
||||
|
const data = this.sortTableData.map((value, index) => { |
||||
|
return { id: value.id, categorySeq: index + 1 } |
||||
|
}) |
||||
|
this.sortTableData.forEach((item, index) => { |
||||
|
item.categorySeq = index + 1 |
||||
|
}) |
||||
|
sort(data).then(() => { |
||||
|
this.sortVisible = false |
||||
|
this.$message({ message: '保存成功', type: 'success', offset: 8 }) |
||||
|
this.$emit('treeNodeSort', this.sortTableData) |
||||
|
}) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
|
||||
|
</style> |
||||
Write
Preview
Loading…
Cancel
Save
Reference in new issue