first commit
This commit is contained in:
@@ -0,0 +1,361 @@
|
||||
<!--#
|
||||
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>
|
||||
|
||||
<!--#
|
||||
}
|
||||
#-->
|
||||
Reference in New Issue
Block a user