498 lines
22 KiB
HTML
498 lines
22 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" ref="table" :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="4">
|
|
<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="20">
|
|
<el-table :data="menuData" ref="menuData">
|
|
<el-table-column align="center" label="标题" prop="title">
|
|
<template v-slot="{row}">
|
|
<el-input v-model="row.title" placeholder="请填写标题"></el-input>
|
|
</template>
|
|
</el-table-column>
|
|
<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 v-model="row.href" placeholder="请填写菜单地址"></el-input>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column align="center" label="图标" prop="icon">
|
|
<template v-slot="{row, $index}">
|
|
<image-Upload :height="50" :width="50" :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" label="移动端地址" prop="color">
|
|
<template v-slot="{row}">
|
|
<el-input v-model="row.mobileHref" placeholder="请填写移动端地址"></el-input>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column align="center" label="表名" prop="queryTable">
|
|
<template v-slot="{row}">
|
|
<el-select @change="(val) => {queryTableChange(val, row)}" style="width: 100%"
|
|
filterable placeholder="请选择表名" v-model="row.queryTable">
|
|
<el-option
|
|
:key="item.TABLE_NAME"
|
|
:label="item.TABLE_NAME"
|
|
:value="item.TABLE_NAME"
|
|
v-for="item in queryTableList">
|
|
</el-option>
|
|
</el-select>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column align="center" label="字段名" prop="queryColumn">
|
|
<template v-slot="{row}">
|
|
<el-select style="width: 100%" placeholder="请选择字段名"
|
|
filterable v-model="row.queryColumn">
|
|
<el-option
|
|
:key="item.COLUMN_NAME"
|
|
:label="item.COLUMN_NAME"
|
|
:value="item.COLUMN_NAME"
|
|
v-for="item in row.columnList">
|
|
</el-option>
|
|
</el-select>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column align="center" label="审核值" prop="stateId">
|
|
<template v-slot="{row}">
|
|
<el-cascader :options="stateList" :props="props" v-model="row.stateArray"
|
|
:show-all-levels="false" @change="(node) => stateChange(node, row)"
|
|
filterable placeholder="请选择审核值" style="width: 100%"></el-cascader>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column align="center" label="申请人id" prop="userIdColumn">
|
|
<template v-slot="{row}">
|
|
<el-select style="width: 100%" placeholder="请选择申请人id"
|
|
filterable v-model="row.userIdColumn">
|
|
<el-option
|
|
:key="item.COLUMN_NAME"
|
|
:label="item.COLUMN_NAME"
|
|
:value="item.COLUMN_NAME"
|
|
v-for="item in row.columnList">
|
|
</el-option>
|
|
</el-select>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column align="center" label="查询类型" prop="queryType">
|
|
<template v-slot="{row}">
|
|
<el-select style="width: 100%" placeholder="请选择查询类型"
|
|
filterable v-model="row.queryType">
|
|
<el-option key="1" label="无限制" value="all"></el-option>
|
|
<el-option key="2" label="本单位" value="unit"></el-option>
|
|
<el-option key="3" label="本工会" value="myUnion"></el-option>
|
|
<el-option key="4" label="本协会" value="club"></el-option>
|
|
<el-option key="5" label="本代表团" value="dbt"></el-option>
|
|
</el-select>
|
|
</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="名称">{{ 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.mobileHref }}</el-descriptions-item>
|
|
<el-descriptions-item label="创建时间">{{ viewData.creatTime }}</el-descriptions-item>
|
|
<el-descriptions-item label="表名">{{ viewData.queryTable }}</el-descriptions-item>
|
|
<el-descriptions-item label="字段名">{{ viewData.queryColumn }}</el-descriptions-item>
|
|
<el-descriptions-item label="状态">{{ viewData.stateName }}</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: 'title', label: '标题'},
|
|
{prop: 'name', label: '名称'},
|
|
{prop: 'code', label: '编码'},
|
|
],
|
|
defaultProps: {
|
|
children: "children",
|
|
label: "name"
|
|
},
|
|
menuOptions: [],
|
|
filterText: '',
|
|
menuData: [],
|
|
selections: [],
|
|
defaultShowNodes: [],
|
|
viewData: {},
|
|
dataBaseList: [],
|
|
stateList: [],
|
|
queryTableList: [],
|
|
stateOptions: [],
|
|
props: {
|
|
lazy: false,
|
|
checkStrictly: true,
|
|
multiple: false,
|
|
}
|
|
}
|
|
},
|
|
watch: {
|
|
filterText(val) {
|
|
this.$refs.tree.filter(val);
|
|
}
|
|
},
|
|
methods: {
|
|
stateChange(node, row) {
|
|
if(node.length > 0) {
|
|
row.stateId = node[node.length - 1]
|
|
}
|
|
},
|
|
queryTableChange(val, row) {
|
|
this.getColumnList(val, row)
|
|
},
|
|
async getColumnList(base, row) {
|
|
const resp = await $.get('/platform/needItems/columns', {
|
|
tableName: base,
|
|
})
|
|
this.$set(row, 'columnList', resp.data)
|
|
},
|
|
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.queryTable === '' || item.queryTable === undefined) {
|
|
this.$message.warning('表名不能为空')
|
|
isNext = true
|
|
return
|
|
}
|
|
if (item.queryColumn === '' || item.queryColumn === undefined) {
|
|
this.$message.warning('字段名不能为空')
|
|
isNext = true
|
|
return
|
|
}
|
|
if (item.stateId === '' || item.stateId === undefined) {
|
|
this.$message.warning('状态不能为空')
|
|
isNext = true
|
|
return
|
|
}
|
|
})
|
|
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/needItems/doHandle', {data: JSON.stringify(this.menuData)})
|
|
if(resp.code === 0) {
|
|
this.doSearch()
|
|
this.$message.success(resp.msg)
|
|
this.$refs.table.clearSelection()
|
|
this.$refs.guava.index()
|
|
}
|
|
},
|
|
deleteRow(row, index) {
|
|
this.menuData.splice(index, 1)
|
|
this.$refs.tree.setCheckedNodes(this.menuData)
|
|
},
|
|
openAdd() {
|
|
this.menuData = []
|
|
this.selections = []
|
|
this.defaultShowNodes = []
|
|
this.$refs.guava.edit()
|
|
this.$nextTick(() => {
|
|
this.$refs.table.clearSelection()
|
|
})
|
|
},
|
|
filterNode(value, data, node) {
|
|
if (!value) return true;
|
|
return data.menuName.indexOf(value) !== -1
|
|
},
|
|
async openView(row) {
|
|
this.stateList.forEach(item => {
|
|
item.children.forEach(o => {
|
|
if(o.value === row.stateId) {
|
|
row.stateName = o.label
|
|
}
|
|
})
|
|
})
|
|
this.viewData = row
|
|
this.$refs.guava.view()
|
|
},
|
|
async openEdit() {
|
|
if(this.selections.length === 0) {
|
|
this.$message.warning('请先在下方勾选')
|
|
return
|
|
}
|
|
for (const item of this.selections) {
|
|
await this.getColumnList(item.queryTable, item)
|
|
this.stateList.forEach(x => {
|
|
x.children.forEach(o => {
|
|
if(o.value === item.stateId) {
|
|
item.stateArray = [x.value, o.value]
|
|
}
|
|
})
|
|
})
|
|
}
|
|
this.$refs.guava.edit()
|
|
this.menuData = this.selections
|
|
this.$nextTick(() => {
|
|
this.$refs.tree.setCheckedKeys(this.menuData.map(o => o.menuId))
|
|
this.defaultShowNodes = this.menuData.map(o => o.menuId)
|
|
})
|
|
},
|
|
doDelete(id) {
|
|
this.$confirm('您确定要删除吗？', '提示', {
|
|
confirmButtonText: '确定',
|
|
cancelButtonText: '取消',
|
|
type: 'warning',
|
|
callback: async (a, b) => {
|
|
if ("confirm" === a) {//确认后再执行
|
|
const resp = await $.post('/platform/needItems/doDelete', {id: id})
|
|
if(resp.code === 0) {
|
|
this.$message.success(resp.msg)
|
|
this.doSearch()
|
|
}
|
|
}
|
|
}
|
|
})
|
|
},
|
|
pageData() {
|
|
$.post('/platform/needItems/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.title = cloneItem.parentName
|
|
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 getTableList() {
|
|
const resp = await $.get('/platform/needItems/getTableList')
|
|
this.queryTableList = resp.data
|
|
},
|
|
async getStateList() {
|
|
const resp = await $.get('/platform/needItems/getStateList')
|
|
this.stateList = resp.data
|
|
}
|
|
},
|
|
async created() {
|
|
await this.getMenuTreeselect()
|
|
await this.getTableList()
|
|
await this.getStateList()
|
|
this.pageData()
|
|
},
|
|
})
|
|
</script>
|
|
|
|
<!--#
|
|
}
|
|
#-->
|