/pub/Q78eap-xvNMpe7)
<template>
<div>
<!-- 面包屑导航 -->
<el-breadcrumb separator-class="el-icon-arrow-right">
<el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
<el-breadcrumb-item>消保审查</el-breadcrumb-item>
<el-breadcrumb-item>系统管理</el-breadcrumb-item>
<el-breadcrumb-item>数据字典</el-breadcrumb-item>
</el-breadcrumb>
<div class="wraper">
<div class="jssqTree">
<div class="systemStyle">
<span>数据字典</span>
</div>
<el-table
:header-cell-style="{background:'#98DBFF',color:'black'}"
ref="table"
border
highlight-current-row
class="jssqleftTable scrollStyle"
:data="treeData"
style="color: #000;"
@row-click="leftClick"
max-height="500"
>
<el-table-column align="center" label="名称">
<template slot-scope="scope">
<span :title="scope.row.sysName">{{ scope.row.sysName }}</span>
</template>
</el-table-column>
<el-table-column align="center" label="码值">
<template slot-scope="scope">
<span :title="scope.row.sysCode">{{ scope.row.sysCode }}</span>
</template>
</el-table-column>
</el-table>
<!-- <el-tree :data="treeData" highlight-current default-expand-all @node-click="treeClick"/> -->
</div>
<div class="jssqRight">
<div class="jssqRightHeaderArea">
<el-row>
<el-col :span="11">
<el-input
v-model="search.relName"
size="small"
type="text"
placeholder="选项名称"
clearable
@keyup.enter.native="dataList(true)"
/>
</el-col>
<el-col :span="1" style="opacity: 0;">1</el-col>
<el-col :span="12">
<el-button size="small" type="primary" icon="el-icon-search" @click="dataList(true)">查询</el-button>
<el-button size="small" icon="el-icon-refresh" style="border: 1px solid #409eff;color: #409eff" @click="resetClick()">重置</el-button>
</el-col>
</el-row>
</div>
<div class="zy-toolBar">
<el-button-group>
<el-button icon="el-icon-plus" size="mini" @click="handleTypeCreate(1)">新增</el-button>
<el-button icon="el-icon-edit" size="mini" @click="handleDataUpdate">修改</el-button>
<el-button icon="el-icon-remove" size="mini" @click="handleDataDelete">删除</el-button>
</el-button-group>
</div>
<el-table
:header-cell-style="{background:'#98DBFF',color:'black'}"
ref="table"
border
highlight-current-row
class="jssqRightTable scrollStyle"
:data="userList"
style="color: #000;"
@row-click="handleSelectionChange"
max-height="500"
>
<el-table-column align="center" label="选项代码" show-overflow-tooltip>
<template slot-scope="scope">
<span :title="scope.row.relCode">{{ scope.row.relCode }}</span>
</template>
</el-table-column>
<el-table-column align="center" label="选项名称">
<template slot-scope="scope">
<span :title="scope.row.relName">{{ scope.row.relName }}</span>
</template>
</el-table-column>
<el-table-column show-overflow-tooltip align="center" label="选项顺序">
<template slot-scope="scope">
<span :title="scope.row.relSort">{{ scope.row.relSort }}</span>
</template>
</el-table-column>
</el-table>
<!-- 字典新增/修改 -->
<el-dialog :close-on-click-modal="false" :close-on-press-escape="false" :title="textMap[dialogStatus]" :visible.sync="dialogDataVisible" width="50%">
<el-form
ref="DataForm"
:inline="false"
:model="DataForm"
label-position="right"
:rules="funcRules"
label-width="130px"
style="margin-left: 20px;"
class="add-pop"
>
<el-form-item label="选项代码" prop="relCode" >
<el-input v-model="DataForm.relCode" disabled=false />
</el-form-item>
<el-form-item label="选项名称" prop="relName">
<el-input v-model="DataForm.relName" />
</el-form-item>
<el-form-item label="字典码值" prop="sysCode" >
<el-input v-model="DataForm.sysCode" disabled />
</el-form-item>
<el-form-item label="选项顺序" prop="relSort">
<el-input v-model="DataForm.relSort" />
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer" align="center">
<el-button type="primary" @click="dialogStatus === 'create' ? createFuncData() : updateFuncData()">
确认
</el-button>
<el-button @click="dialogDataVisible = false">
取消
</el-button>
</div>
</el-dialog>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'DictData',
data() {
return {
ischange:false,
treeData: [],
roleList: null,
userList: null,
activeType: 1,
selectionVal: null, // 2级目录选中
search: {
relName: '' // 关键字搜索
},
textMap: {
update: '修改',
create: '新建'
},
dialogStatus: '',
dialogDataVisible: false,
treeSelect: null, // 树选中
// 2级菜单新增
DataForm: {
relCode: '',
relName: '',
sysCode: '',
relSort: ''
},
funcRules: {
relCode: [
{ required: true, message: '必填项', trigger: 'blur' },
{ max: 30, message: '输入值超过30位', trigger: 'blur' }
// { validator: speChar, trigger: 'blur' },
],
relName: [
{ required: true, message: '必填项', trigger: 'blur' },
{ max: 30, message: '输入值超过30位', trigger: 'blur' }
// { validator: speChar, trigger: 'blur' },
],
// sysCode: [{ required: true, message: '必填项', trigger: 'blur' }],
relSort: [
// { validator: numNo, trigger: 'blur' },
{ max: 2, message: '输入值超过2位', trigger: 'blur' }
]
},
idField: ''
}
},
created() {
this.treeList()
},
methods: {
// 树点击
leftClick (val) {
this.treeSelect = {...val}
console.log('this.treeSelect', this.treeSelect)
this.idField = this.treeSelect.id
this.activeType = 1
this.dataList()
},
// 树查询
async treeList () {
const that = this
const url = 'sysData/getSysData'
const { data: res } = await this.$http.get(url, {})
if (res.code !== '1') {
return this.$message.error(res.msg)
}
const treeList = res.obj.dataList
that.treeData = treeList;
},
// 2级目录选中
handleSelectionChange(val) {
this.selectionVal = {...val}
},
// 新增
handleTypeCreate (val) {
const that = this
if (!that.treeSelect) {
that.$message({
message: '请选择一个左边列！',
type: 'warning'
})
return false
}
that.dialogStatus = 'create'
this.DataForm.sysCode = this.treeSelect.sysCode
this.DataForm.relCode = '',
this.DataForm.relName = '',
this.DataForm.relSort = ''
that.dialogDataVisible = true
that.ischange=true
},
// 2级新增确定
createFuncData () {
const that = this
const url = 'sysData/addSysDataRel'
this.$refs.DataForm.validate(async (valid) => {
if (valid) {
const params = {
sysCode: that.DataForm.sysCode, // 上级层级
relCode: that.DataForm.relCode, // 字典代码
relName: that.DataForm.relName, // 字典名称
relSort: that.DataForm.relSort // 排序
}
const { data: res } = await this.$http.post(url, params)
if (res.code !== '1') {
return this.$message.error(res.msg)
}
that.$message({
message: '新建成功',
type: 'success'
})
that.dialogDataVisible = false
that.dataList()
}
})
},
// 2级修改
handleDataUpdate () {
const that = this
if (!that.selectionVal) {
that.$message({
message: '请选择一条数据！',
type: 'warning'
})
return false
}
that.dialogStatus = 'update'
that.dialogDataVisible = true
that.DataForm = {...that.selectionVal}
that.$nextTick(() => {
that.$refs.DataForm.clearValidate()
})
},
// 2级 修改确定
updateFuncData () {
const that = this
const url = 'sysData/updateSysDataRel'
this.$refs.DataForm.validate(async (valid) => {
if (valid) {
const params = that.DataForm
const { data: res } = await this.$http.get(url, {params: params})
if (res.code !== '1') {
return this.$message.error(res.msg)
}
that.$message({
message: '修改成功',
type: 'success'
})
that.dialogDataVisible = false
that.dataList()
}
})
},
// 2级删除
handleDataDelete () {
const that = this
const url = 'sysData/delSysDataRel'
if (!that.selectionVal) {
that.$message({
message: '请选择一条数据！',
type: 'warning'
})
return false
}
that.$confirm('此操作将删除该字典参数, 是否继续?', '提示', {
cancelButtonText: '取消',
confirmButtonText: '确定',
type: 'warning',
center: true
}).then(async () => {
const params = {
sysCode: that.selectionVal.sysCode,
relCode: that.selectionVal.relCode
}
const { data: res } = await this.$http.get(url, {params: params})
if (res.code !== '1') {
return this.$message.error(res.msg)
}
that.$message({
message: '删除成功',
type: 'success'
})
that.dataList()
})
},
// 2级菜单查询
async dataList (val) {
const that = this
const url = 'sysData/getSysDataRel'
const upSelect = that.treeSelect || ''
console.log('upSelect', upSelect)
let upCode = upSelect.sysCode || ''
if (val) {
upCode = ''
}
const params = {
sysCode: upCode,
keyWords: that.search.relName
}
const { data: res } = await this.$http.get(url, {
params: params
})
if (res.code !== '1') {
return this.$message.error(res.msg)
}
that.userList = res.obj.dataList
},
// 重置
resetClick () {
this.search.relName = ''
}
}
}
</script>
<style>
.jssqRight .el-table__body-wrapper{
max-height: 260px !important;
}
.el-table::after,.el-table::before{
display: none;
}
.jssqRight .buttonArea span {
transform: scaleY(1);
}
.scrollStyle.el-table thead th {
padding: 8px 0;
background: rgb(247, 247, 247);
font-weight: initial;
}
.scrollStyle.el-table td {
padding: 10px 0;
}
.systemStyle span{
display: inline-block;
width: 100%;
color: #606266;
font-size: 14px;
margin-top: 15px;
}
</style>
<style lang="css" scoped>
.jssqTree{
margin-right: 10px;
width: 40%;
border: 1px solid #eee;
box-shadow: 0 7px 33px -2px rgba(178, 178, 189, 0.39), 0px 10px 12px -8px rgba(178, 178, 189, 0.19);
min-height: 500px;
padding: 0 20px 20px 20px;
}
.wraper {
box-sizing: border-box;
z-index: 1002;
height: 100%;
display: flex;
background: #ffffff;
}
.wraper > div {
border: 1px solid #eee;
box-shadow: 0 7px 33px -2px rgba(178, 178, 189, 0.39),
0px 10px 12px -8px rgba(178, 178, 189, 0.19);
}
.wraper > div.jssqRight {
width: 59%;
position: relative;
margin-left: 10px;
overflow-y: auto;
padding-top: 10px;
}
.jssqRightHeaderArea {
padding: 0 30px;
display: flex;
height: 45px;
justify-content: space-between;
align-items: center;
}
.jssqRightHeaderArea > div.userMenu {
width: 100px;
}
.jssqRightTable {
width: calc(100% - 40px);
position: absolute;
top: 100px;
left: 20px;
bottom: 100px;
overflow-y: auto;
}
.jssqRight .buttonArea {
position: absolute;
bottom: 55px;
height: initial;
display: block;
width: 100%;
justify-content: initial;
align-items: initial;
}
.jssqRight .buttonArea span {
transform: scaleY(1);
}
.jssqRight .buttonArea .el-pagination {
white-space: initial;
}
.jssqRight .jssqButtonConfirm {
display: inline-block;
width: fit-content;
margin-left: 20px;
}
.zy-toolBar {
padding: 0 30px;
display: flex;
height: 45px;
justify-content: space-between;
align-items: center;
}
</style>