362 lines
12 KiB
HTML
362 lines
12 KiB
HTML
<!--#
|
||
layout("/layouts/platform.html"){
|
||
#-->
|
||
|
||
<style>
|
||
|
||
.el-descriptions__table {
|
||
table-layout: fixed !important;
|
||
}
|
||
|
||
.el-descriptions-item__cell {
|
||
text-align: center !important;
|
||
}
|
||
|
||
/* 隐藏掉el-tree中有disabled属性的框框 */
|
||
.el-checkbox__input.is-disabled{
|
||
//display: none;
|
||
}
|
||
|
||
.el-upload__tip {
|
||
display: none !important;
|
||
}
|
||
|
||
.uploadSource {
|
||
display: none!important;
|
||
}
|
||
|
||
.el-upload {
|
||
width: auto!important;
|
||
}
|
||
|
||
.el-tree {
|
||
height: 700px;
|
||
overflow-y: auto;
|
||
}
|
||
|
||
.svg-icon {
|
||
font-size: 60px;
|
||
}
|
||
|
||
</style>
|
||
|
||
<div id="app" v-cloak>
|
||
|
||
<guava ref="guava">
|
||
|
||
<template>
|
||
|
||
<el-card shadow="never">
|
||
<div class="search">
|
||
<div class="search-item">
|
||
<div class="search-item-label" v-html="'名  称：'"></div>
|
||
<div class="search-item-option">
|
||
<el-input clearable placeholder="请填写名称查询" style="width: 350px;"
|
||
v-model="pageForm.name"></el-input>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="search-query">
|
||
<el-button @click="doSearch" icon="el-icon-search" type="primary">搜索</el-button>
|
||
</div>
|
||
</div>
|
||
</el-card>
|
||
|
||
<el-card class="mt10" shadow="never">
|
||
<table-tool :app="this" label="快速入口列表" ref="tableTool">
|
||
<template #func>
|
||
<el-button icon="el-icon-plus" @click="openAdd" size="small" type="primary">新增快速入口</el-button>
|
||
<el-button @click="openEdit" size="small" type="primary">批量编辑</el-button>
|
||
</template>
|
||
</table-tool>
|
||
<el-table :data="tableData" :row-key="(row)=>row.id" @selection-change="(val)=>{selections = val}">
|
||
|
||
<el-table-column reserve-selection type="selection" width="55"></el-table-column>
|
||
|
||
<el-table-column :index="indexMethod" align="center" header-align="center" label="序号" type="index"
|
||
width="80px"></el-table-column>
|
||
|
||
<el-table-column
|
||
:label="column.label"
|
||
:prop="column.prop"
|
||
:sortable="column.sortable"
|
||
align="center"
|
||
header-align="center"
|
||
show-overflow-tooltip
|
||
v-for="column in tableColumns"
|
||
>
|
||
</el-table-column>
|
||
|
||
<el-table-column align="center" header-align="center" label="操作" width="260">
|
||
<template v-slot="scope">
|
||
<el-button @click="openView(scope.row)" size="mini" type="primary">查看</el-button>
|
||
<el-button @click="doDelete(scope.row.id)" size="mini" type="danger">删除</el-button>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
<el-row class="el-pagination-container">
|
||
<el-pagination
|
||
:current-page="pageForm.pageNumber"
|
||
:page-size="pageForm.pageSize"
|
||
:page-sizes="[5,10, 20, 30, 50]"
|
||
:total="pageForm.totalCount"
|
||
@current-change="pageNumberChange"
|
||
@size-change="pageSizeChange"
|
||
layout="total, sizes, prev, pager, next, jumper">
|
||
</el-pagination>
|
||
</el-row>
|
||
</el-card>
|
||
|
||
</template>
|
||
|
||
<template #edit>
|
||
|
||
<el-row :gutter="20">
|
||
<el-col :span="5">
|
||
<div>
|
||
<el-input
|
||
placeholder="输入关键字进行查找"
|
||
v-model="filterText">
|
||
</el-input>
|
||
</div>
|
||
<el-tree
|
||
class="tree-border"
|
||
:data="menuOptions"
|
||
:check-on-click-node="true"
|
||
show-checkbox
|
||
ref="tree"
|
||
:filter-node-method="filterNode"
|
||
:default-expanded-keys="defaultShowNodes"
|
||
node-key="id"
|
||
empty-text="加载中，请稍候"
|
||
@check-change="checkChange"
|
||
:props="defaultProps"
|
||
></el-tree>
|
||
</el-col>
|
||
<el-col :span="19">
|
||
<el-table :data="menuData" ref="menuData">
|
||
<el-table-column align="center" label="名称" prop="name">
|
||
<template v-slot="{row}">
|
||
<el-input v-model="row.name" placeholder="请填写名称"></el-input>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column align="center" label="编码" prop="code">
|
||
<template v-slot="{row}">
|
||
<el-input v-model="row.code" placeholder="请填写编码"></el-input>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column align="center" label="菜单地址" prop="href">
|
||
<template v-slot="{row}">
|
||
<el-input readonly v-model="row.href" placeholder="请填写菜单地址"></el-input>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column align="center" label="图标(png，jpg)" prop="icon">
|
||
<template v-slot="{row, $index}">
|
||
<image-Upload :height="100" :width="100" :limit="1" :file-type="['png', 'jpg']" :file-size="1"
|
||
v-model="row.iconClass"></image-Upload>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column align="center" label="颜色" prop="color">
|
||
<template v-slot="{row}">
|
||
<el-color-picker v-model="row.color"></el-color-picker>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column align="center" header-align="center" label="操作">
|
||
<template v-slot="{row, $index}">
|
||
<el-button @click="deleteRow(row, $index)" size="mini" type="danger">删除</el-button>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
<div style="float: right;margin: 20px 0">
|
||
<el-button @click="$refs.guava.index()">取 消</el-button>
|
||
<el-button type="primary" @click="doHandle">确 定</el-button>
|
||
</div>
|
||
</el-col>
|
||
</el-row>
|
||
|
||
</template>
|
||
|
||
<template #view>
|
||
<el-descriptions :column="2" border>
|
||
<el-descriptions-item label="名称" :span="2">{{ viewData.name }}</el-descriptions-item>
|
||
<el-descriptions-item label="编码">{{ viewData.code }}</el-descriptions-item>
|
||
<el-descriptions-item label="颜色">{{ viewData.color }}</el-descriptions-item>
|
||
<el-descriptions-item label="菜单地址">{{ viewData.href }}</el-descriptions-item>
|
||
<el-descriptions-item label="创建时间">{{ viewData.creatTime }}</el-descriptions-item>
|
||
<el-descriptions-item label="图标" :span="2">
|
||
<img :src="CREATE_PREVIEW_URL(viewData.iconClass)" width="100" height="100"/>
|
||
</el-descriptions-item>
|
||
</el-descriptions>
|
||
</template>
|
||
|
||
</guava>
|
||
|
||
</div>
|
||
|
||
<script>
|
||
var vue = new Vue({
|
||
el: '#app',
|
||
mixins: [initTableMixins],
|
||
data() {
|
||
return {
|
||
tableColumns: [
|
||
{prop: 'name', label: '名称'},
|
||
{prop: 'code', label: '编码'},
|
||
],
|
||
defaultProps: {
|
||
children: "children",
|
||
label: "name"
|
||
},
|
||
menuOptions: [],
|
||
filterText: '',
|
||
menuData: [],
|
||
selections: [],
|
||
defaultShowNodes: [],
|
||
viewData: {},
|
||
}
|
||
},
|
||
watch: {
|
||
filterText(val) {
|
||
this.$refs.tree.filter(val);
|
||
}
|
||
},
|
||
methods: {
|
||
async doHandle() {
|
||
let isNext = false
|
||
this.menuData.forEach(item => {
|
||
if (item.name === '' || item.name === undefined) {
|
||
this.$message.warning('名称不能为空')
|
||
isNext = true
|
||
return
|
||
}
|
||
if (item.code === '' || item.code === undefined) {
|
||
this.$message.warning('编码不能为空')
|
||
isNext = true
|
||
return
|
||
}
|
||
if (item.color === '' || item.color === undefined) {
|
||
this.$message.warning('颜色不能为空')
|
||
isNext = true
|
||
}
|
||
})
|
||
if (isNext) {
|
||
return
|
||
}
|
||
for (const item of this.menuData) {
|
||
if(item.iconClass === undefined) {
|
||
this.$message.warning('图标不能为空')
|
||
isNext = true
|
||
return
|
||
}
|
||
}
|
||
if (isNext) {
|
||
return
|
||
}
|
||
const resp = await $.post('/platform/quickEntry/doHandle', {data: JSON.stringify(this.menuData)})
|
||
if(resp.code === 0) {
|
||
this.doSearch()
|
||
this.$message.success(resp.msg)
|
||
this.$refs.menuData.clearSelection()
|
||
this.$refs.guava.index()
|
||
}
|
||
},
|
||
deleteRow(row, index) {
|
||
this.menuData.splice(index, 1)
|
||
this.$refs.tree.setCheckedNodes(this.menuData)
|
||
},
|
||
openAdd() {
|
||
this.$refs.guava.edit()
|
||
this.$nextTick(() => {
|
||
this.menuData = []
|
||
|
||
this.$refs.tree.setCheckedKeys([])
|
||
})
|
||
},
|
||
filterNode(value, data, node) {
|
||
if (!value) return true;
|
||
return data.name.indexOf(value) !== -1
|
||
},
|
||
openView(row) {
|
||
this.viewData = row
|
||
this.$refs.guava.view()
|
||
},
|
||
async openEdit() {
|
||
if(this.selections.length === 0) {
|
||
this.$message.warning('请先在下方勾选')
|
||
return
|
||
}
|
||
this.menuData = this.selections
|
||
this.$nextTick(() => {
|
||
this.$refs.tree.setCheckedKeys(this.menuData.map(o => o.menuId))
|
||
this.defaultShowNodes = this.menuData.map(o => o.menuId)
|
||
})
|
||
this.$refs.guava.edit()
|
||
},
|
||
doDelete(id) {
|
||
this.$confirm('您确定要删除吗？', '提示', {
|
||
confirmButtonText: '确定',
|
||
cancelButtonText: '取消',
|
||
type: 'warning',
|
||
callback: async (a, b) => {
|
||
if ("confirm" === a) {//确认后再执行
|
||
const resp = await $.post('/platform/quickEntry/doDelete', {id: id})
|
||
if(resp.code === 0) {
|
||
this.$message.success(resp.msg)
|
||
this.doSearch()
|
||
}
|
||
}
|
||
}
|
||
})
|
||
},
|
||
pageData() {
|
||
$.post('/platform/quickEntry/pageData', this.pageForm,).then(res => {
|
||
if (res.code === 0) {
|
||
this.tableData = res.data.list;
|
||
this.pageForm.totalCount = res.data.totalCount;
|
||
}
|
||
})
|
||
},
|
||
/** 查询菜单树结构 */
|
||
async getMenuTreeselect() {
|
||
const resp = await $.post('/platform/sys/menu/menuAll')
|
||
this.menuOptions = resp.data.filter(v=>!v.disabled)
|
||
this.setDisabled(this.menuOptions)
|
||
},
|
||
checkChange(currObj,isChecked) {
|
||
/* if(isChecked) { // 选中之后我们就重新设置下选中的节点（只设置当前选中的节点，即单选）
|
||
this.$refs.tree.setCheckedNodes([currObj])
|
||
} */
|
||
//this.menuData = this.$refs.tree.getCheckedNodes()
|
||
const array = []
|
||
this.$refs.tree.getCheckedNodes().forEach(item => {
|
||
let cloneItem = clone(item)
|
||
cloneItem.menuId = cloneItem.id
|
||
delete cloneItem.id
|
||
cloneItem.color = this.themeColor
|
||
const obj = this.selections.find(o => o.menuId === cloneItem.menuId)
|
||
array.push(obj !== undefined ? obj : cloneItem)
|
||
})
|
||
this.menuData = array
|
||
},
|
||
setDisabled(treeData) {
|
||
treeData.forEach(item => {
|
||
if(!item.href) {
|
||
item.disabled = true
|
||
}
|
||
if(item.children && item.children.length) {
|
||
this.setDisabled(item.children)
|
||
}
|
||
})
|
||
},
|
||
},
|
||
async created() {
|
||
await this.getMenuTreeselect()
|
||
this.pageData()
|
||
},
|
||
})
|
||
</script>
|
||
|
||
<!--#
|
||
}
|
||
#-->
|