<template>
<div class="main">
<div class="log-search">
字典名称：
<el-input v-model="searchKey" style="border: 1px solid #C0C4CC;width: 230px;border-radius: 4px" placeholder="请输入内容"></el-input>
<el-button type="primary" @click="query" icon="el-icon-search">查询</el-button>
<el-button type="warning" @click="reset" icon="el-icon-refresh">重置</el-button>
</div>
<div class="log-detail" :style="{ height: dicHeight+'px' }">
<div class="log-menu">
<div style="height: 40px">
<span class="menu-title">
字典名称
<el-button type="primary" size="mini" @click="addNode(zdType,-1)">添加</el-button>
</span>
</div>
<br>
<ul>
<li v-for="(it,index) in tableData" :key="index">
<span>{{index+1}}，</span><el-button class="dicText" type="text" @click="showMessage(it.value)"
@contextmenu.prevent.native="openMenu($event,it)">{{it.name}}</el-button>
</li>
</ul>
</div>
<ul
v-show="menuvisible"
:style="{ left: menuleft + 'px', top: menutop + 'px' }"
class="contextmenu"
>
<li @click="addNode(zdType,0)">添加</li>
<li @click="deleteNode(zdType,0)">删除</li>
</ul>
<div class="log-table">
<el-table
:data="concreteDic"
row-key="bsm"
height="100%"
border
:default-expand-all="false"
:row-class-name="tableRowClassName"
:tree-props="{children: 'children', hasChildren: 'hasChildren'}">
<el-table-column prop="mc" align="center" label="名称">
</el-table-column>
<el-table-column prop="dm" align="center" label="代码">
</el-table-column>
<el-table-column prop="sxh" align="center" label="顺序号">
</el-table-column>
<el-table-column prop="bz" align="center" label="备注">
</el-table-column>
<el-table-column align="center" label="操作">
<template slot-scope="scope">
<el-button type="text" class="operatorBtn" @click="editNode(scope.row)">编辑</el-button>
<el-button type="text" class="operatorBtn" @click="deleteNode(scope.row,1)">删除</el-button>
<el-button type="text" class="operatorBtn" @click="addNode(scope.row,1)">添加</el-button>
</template>
</el-table-column>
</el-table>
</div>
<el-dialog v-dialogDrag :title="isAdd ? '添加字典':'编辑字典'" width="69%" :visible.sync="outerVisible">
<div style="height: 240px">
<div style="width: 100%;border: 1px solid #a8adad;">
<el-form :model="form" ref="form" label-width="110px" size="small">
<table border="1" width="100%" cellspacing="0" cellpadding="0" class="hTable">
<tbody>
<tr height="30">
<td colspan="2" align="center" >名称</td>
<td colspan="4" >
<el-input v-model="form.mc"></el-input>
</td>
<td colspan="2" align="center" >简称</td>
<td colspan="4" >
<el-input v-model="form.jc"></el-input>
</td>
</tr>
<tr height="30">
<td colspan="2" align="center" >代码</td>
<td colspan="4" >
<el-input v-model="form.dm"></el-input>
</td>
<td colspan="2" align="center" >其他代码</td>
<td colspan="4" >
<el-input v-model="form.qtdm"></el-input>
</td>
</tr>
<tr height="30">
<td colspan="2" align="center" >其他名称</td>
<td colspan="4" >
<el-input v-model="form.qtmc"></el-input>
</td>
<td colspan="2" align="center" >备注</td>
<td colspan="4" >
<el-input v-model="form.bz"></el-input>
</td>
</tr>
<tr height="30">
<td colspan="2" align="center" >字典类型</td>
<td colspan="4" >
<el-input v-model="form.zdType"></el-input>
</td>
<td colspan="2" align="center" >顺序号</td>
<td colspan="4" >
<el-input v-model="form.sxh"></el-input>
</td>
</tr>
</tbody>
</table>
</el-form>
</div>
<div class="handleBtn">
<el-button type="primary" class="w98 creat" @click="saveDdicNode">保存</el-button>
<el-button type="primary" class="w98 cancel" @click="outerVisible = false">取消</el-button>
</div>
</div>
</el-dialog>
</div>
</div>
</template>
<script>
import {getAllDdic,addDdicNode,deleteDdicNode,editDdicNode} from "@api/manage";
export default {
name: "index",
data(){
return{
form:{
mc:'',
jc:'',
dm:'',
qtdm:'',
qtmc:'',
bz:'',
zdType:'',
sxh:'',
},
searchKey:'',
isAdd:true,
tableData:[],
errorLog:[],
concreteDic:[],
zdType:'',
menuvisible:false,
menutop: 0,
menuleft: 0,
outerVisible: false,
innerVisible: false,
pickerOptions: {
shortcuts: [{
text: '今天',
onClick(picker) {
picker.$emit('pick', new Date());
}
}, {
text: '昨天',
onClick(picker) {
const date = new Date();
date.setTime(date.getTime() - 3600 * 1000 * 24);
picker.$emit('pick', date);
}
}, {
text: '一周前',
onClick(picker) {
const date = new Date();
date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
picker.$emit('pick', date);
}
}]
},
startValue: '',
endValue:'',
dicHeight:0,
}
},
methods:{
saveDdicNode(){
if(this.isAdd){
addDdicNode(this.form).then((res)=>{
if(res.code === 200){
this.$message.success("添加成功！");
this.outerVisible = false;
this.removeStorage();
this.getData();
}
});
}else {
editDdicNode(this.form).then((res)=>{
if(res.code === 200){
this.$message.success("修改成功！");
this.outerVisible = false;
this.removeStorage();
this.getData();
}
});
}
},
editNode(data){
this.isAdd = false;
this.form = data;
this.outerVisible = true
},
addNode(data,source){
this.isAdd = true;
this.form={
mc:'',
jc:'',
dm:'',
qtdm:'',
qtmc:'',
bz:'',
zdType:'',
pbsm:'',
bsm:'',
sxh:'',
};
// alert(JSON.stringify(data))
if(source === 0){
this.form.zdType = data;
}else if(source === 1){
this.form.zdType = data.zdType;
this.form.pbsm = data.bsm;
}
this.outerVisible = true
},
deleteNode(data,source){
this.$confirm('是否确定删除该'+name+'?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then((res)=>{
let params = {
"bsm": "",
"zdType": ""
};
if(source === 0){
params.zdType = data;
}else if(source === 1){
params.bsm = data.bsm;
}
deleteDdicNode(params).then((res)=>{
if(res.code === 200){
this.$message.success("删除完成！");
}
this.removeStorage();
this.getData();
})
});
},
getData(){
let data={
"mc": this.searchKey,
"pbsm": ""
};
getAllDdic(data).then((res)=>{
console.log(res.result);
this.tableData = res.result;
if(this.tableData.length>0){
this.concreteDic = this.tableData[0].value;
}
})
},
showMessage(data){
this.concreteDic = data;
},
query(){
let data={
"mc": this.searchKey,
"pbsm": ""
};
getAllDdic(data).then((res)=>{
console.log(res.result);
this.tableData = res.result;
if(this.tableData.length>0){
this.concreteDic = this.tableData[0].value;
}
})
},
reset(){
this.searchKey = "";
},
openMenu(e,item){
// alert(JSON.stringify(item));
this.menuleft = e.pageX;
this.menutop = e.pageY;
this.zdType = item.name;
this.changemenuVisible(true);
},
changemenuVisible(data) {
this.menuvisible = data;
},
//关闭右键菜单
closeMenu(){
this.menuvisible = false;
},
removeStorage(){
sessionStorage.removeItem("state");
},
tableRowClassName({ row, rowIndex }) {
if (rowIndex % 2 !== 0) {
return "even-row";
} else {
return "";
}
},
},
mounted() {
this.getData();
this.$nextTick(() => {
this.dicHeight = (document.documentElement.clientHeight || document.body.clientHeight) - 237;
})
},
watch:{
menuvisible(value) {
if (value) {
document.body.addEventListener("click", this.closeMenu);
} else {
document.body.removeEventListener("click", this.closeMenu);
}
},
}
}
</script>
<style scoped lang="less">
.log-content{
width: 100%;
/*border: 1px solid red;*/
}
.log-search{
width: 100%;
border: 1px solid #E6E6E6;
height: 80px;
background-color: white;
box-sizing: border-box;
padding: 20px 15px;
}
.log-detail{
margin-top: 10px;
width: 100%;
border: 1px solid #E6E6E6;
background-color: white;
box-sizing: border-box;
padding: 6px;
}
.log-menu{
width: 17%;
float: left;
height: 100%;
overflow-y: scroll;
border-right: 1px solid #E6E6E6;
}
.log-table{
width: 81%;
float: right;
height: 100%;
}
.el-button {
width: 100px;
margin-left: 15px;
}
.menu-title{
font-weight: bold;
font-size: 20px;
margin-top: 20px;
float: left;
width: 100%;
text-indent: 10px;
.el-button {
position: relative;
top: -2px;
}
}
ul{
list-style-type: circle;
}
li{
display:block;
margin:10px;
}
.dicText{
text-align: left;
}
.operatorBtn{
width: 20px;
}
/deep/.el-input__inner{
width: 100%;
border:0;
}
table{
background: #fff;
table-layout: fixed;
}
.handleBtn{
width: 314px;
position: absolute;
left: 50%;
margin-left: -250px;
margin-top: 10px;
}
</style>