433 lines
14 KiB
Vue
433 lines
14 KiB
Vue
<template>
|
|
<div>
|
|
<div class="app-container" style="margin-bottom: 12px;padding-bottom: 5px;border-radius: 10px;">
|
|
<el-form ref="querform" :model="queryParams" :inline="true">
|
|
<el-form-item label="类型名称" prop="typeName">
|
|
<el-input v-model="queryParams.typeName" placeholder="请输入类型名称" clearable style="width: 200px" />
|
|
</el-form-item>
|
|
<el-form-item label="类型编码" prop="typeCode">
|
|
<el-input v-model="queryParams.typeCode" placeholder="请输入类型编码" clearable style="width: 200px" />
|
|
</el-form-item>
|
|
<!-- <el-form-item label="状态">
|
|
<el-select v-model="queryParams.status" placeholder="字典状态" clearable style="width: 200px">
|
|
<el-option :key="1" label="正常" :value="11" />
|
|
<el-option :key="2" label="关闭" :value="22" />
|
|
</el-select>
|
|
</el-form-item> -->
|
|
<el-form-item>
|
|
<el-button type="primary" plain icon="Search" @click="querytype(1)">搜索</el-button>
|
|
<el-button icon="Refresh" plain @click="resetQuery">重置</el-button>
|
|
</el-form-item>
|
|
</el-form>
|
|
</div>
|
|
<div class="app-container" style="margin-bottom: 20px;border-radius: 10px;">
|
|
<el-button
|
|
type="primary"
|
|
plain
|
|
icon="Plus"
|
|
@click="showtypepop(1)"
|
|
>新增</el-button>
|
|
<el-table
|
|
:data="dictlist"
|
|
style="width: 100%;margin-top: 10px;"
|
|
border
|
|
stripe
|
|
highlight-current-row
|
|
row-key="id"
|
|
max-height="600px"
|
|
>
|
|
<el-table-column prop="typeName" min-width="200" align="center" label="类型名称" :show-overflow-tooltip="true" />
|
|
<el-table-column prop="typeCode" min-width="200" align="center" label="类型编码" :show-overflow-tooltip="true" />
|
|
<el-table-column prop="mark" min-width="200" align="center" label="描述" :show-overflow-tooltip="true" />
|
|
<el-table-column label="操作" align="center" width="280" class-name="small-padding fixed-width">
|
|
<template #default="scope">
|
|
<el-button link type="primary" icon="Document" @click="showzdv(scope.row)">查看</el-button>
|
|
<el-button link type="primary" icon="Edit" @click="showtypepop(2,scope.row)">修改</el-button>
|
|
<el-button link type="danger" icon="Delete" @click="deletezid(scope.row)">删除</el-button>
|
|
</template>
|
|
</el-table-column>
|
|
<!-- <el-table-column label="创建时间" align="center" width="160" prop="createTime">
|
|
<template #default="scope">
|
|
<span>{{ dayjs(scope.row.createTime).format("YYYY-MM-DD HH:mm:ss") }}</span>
|
|
</template>
|
|
</el-table-column> -->
|
|
</el-table>
|
|
<div v-if="total > 10" style="display: flex;justify-content: right;padding-top: 20px;">
|
|
<el-pagination
|
|
v-model:current-page="queryParams.pageNo"
|
|
v-model:page-size="queryParams.pageSize"
|
|
:page-sizes="[10, 20, 30, 40]"
|
|
background
|
|
size="small"
|
|
layout="total, sizes, prev, pager, next, jumper"
|
|
:total="total"
|
|
@size-change="handleSizeChange"
|
|
@current-change="querytype"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<el-drawer
|
|
v-model="drawer"
|
|
title="字典值"
|
|
size="800"
|
|
:before-close="handleClose"
|
|
>
|
|
<el-button
|
|
type="primary"
|
|
icon="Plus"
|
|
plain
|
|
@click="showpop(1)">新增</el-button>
|
|
<el-table
|
|
style="margin-top: 20px;"
|
|
:data="valist"
|
|
border
|
|
stripe
|
|
>
|
|
<el-table-column min-width="160" label="字典名称" align="center" prop="dictName" />
|
|
<el-table-column label="字典编码" align="center" prop="dictCode" />
|
|
<el-table-column min-width="160" label="字典值" align="center" prop="dictValue" />
|
|
<el-table-column label="排序" align="center" prop="sort" />
|
|
<el-table-column width="160" label="操作" align="center" class-name="small-padding fixed-width">
|
|
<template #default="scope">
|
|
<el-button link type="primary" icon="Edit" @click="showpop(2,scope.row)">修改</el-button>
|
|
<el-button link type="danger" icon="Delete" @click="deldicval(scope.row)">删除</el-button>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
</el-drawer>
|
|
|
|
<!--:row-style="{background: '#cde0f3'}"-->
|
|
|
|
<!--添加字典类型-->
|
|
<el-dialog
|
|
v-model="zitypepop"
|
|
:title="dictypetit"
|
|
width="500px"
|
|
append-to-body
|
|
align-center
|
|
:close-on-click-modal="false"
|
|
>
|
|
<el-form ref="typeform" :model="zidtype" :rules="typerules" label-width="80px">
|
|
<el-form-item label="类型名称" prop="typeName">
|
|
<el-input v-model="zidtype.typeName" placeholder="请输入字典名称" />
|
|
</el-form-item>
|
|
<el-form-item label="类型编码" prop="typeCode">
|
|
<el-input v-model="zidtype.typeCode" placeholder="请输入字典编码" />
|
|
</el-form-item>
|
|
<el-form-item label="描述" prop="mark">
|
|
<el-input v-model="zidtype.mark" type="textarea" placeholder="请输入内容"></el-input>
|
|
</el-form-item>
|
|
</el-form>
|
|
<template #footer>
|
|
<div class="dialog-footer">
|
|
<el-button type="primary" @click="addictype">确 定</el-button>
|
|
<el-button @click="canceltype">取 消</el-button>
|
|
</div>
|
|
</template>
|
|
</el-dialog>
|
|
|
|
|
|
<!--添加字典值-->
|
|
<el-dialog
|
|
v-model="zidpop"
|
|
:title="zhidval"
|
|
width="500px"
|
|
append-to-body
|
|
align-center
|
|
:close-on-click-modal="false"
|
|
>
|
|
<el-form ref="formRef" :model="zidform" :rules="rules" label-width="80px">
|
|
<el-form-item label="字典名称" prop="dictName">
|
|
<el-input v-model="zidform.dictName" placeholder="请输入字典名称" />
|
|
</el-form-item>
|
|
<el-form-item label="字典编码" prop="dictCode">
|
|
<el-input v-model="zidform.dictCode" placeholder="请输入字典编码" />
|
|
</el-form-item>
|
|
<el-form-item label="字典值" prop="dictValue">
|
|
<el-input v-model="zidform.dictValue" placeholder="请输入字典值" />
|
|
</el-form-item>
|
|
<el-form-item label="显示排序" prop="sort">
|
|
<el-input-number v-model="zidform.sort" controls-position="right" :min="0" />
|
|
</el-form-item>
|
|
<!-- <el-form-item label="状态" prop="status">
|
|
<el-radio-group v-model="form.status">
|
|
<el-radio v-for="dict in dicts.sys_normal_disable" :key="dict.value" :label="dict.value">{{ dict.label }}</el-radio>
|
|
</el-radio-group>
|
|
</el-form-item> -->
|
|
<!-- <el-form-item label="备注" prop="remark">
|
|
<el-input v-model="form.remark" type="textarea" placeholder="请输入内容"></el-input>
|
|
</el-form-item> -->
|
|
</el-form>
|
|
<template #footer>
|
|
<div class="dialog-footer">
|
|
<el-button type="primary" @click="savedictval">确 定</el-button>
|
|
<el-button @click="cancel">取 消</el-button>
|
|
</div>
|
|
</template>
|
|
</el-dialog>
|
|
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import {
|
|
getdicttype,
|
|
getdict,
|
|
adddicttype,
|
|
updatetype,
|
|
deltype,
|
|
adddict,
|
|
updatedict,
|
|
dedictval
|
|
} from '@/api/systemSet/dict'
|
|
import { ref,reactive } from 'vue'
|
|
import { ElMessage, ElMessageBox } from 'element-plus'
|
|
|
|
//查询字典类型
|
|
let total = ref(0)
|
|
let queryParams = reactive({
|
|
pageSize:20, //每页条数
|
|
pageNo:1, //页数
|
|
typeName:'', //类型名称
|
|
typeCode:'' //类型编码
|
|
})
|
|
|
|
let dictlist = ref<any>([])
|
|
//查询
|
|
function querytype(num?:number) {
|
|
if(num){
|
|
queryParams.pageNo = num
|
|
}
|
|
getdicttype(queryParams).then(rps => {
|
|
dictlist.value = (rps.data as any).records
|
|
total.value = (rps.data as any).total
|
|
})
|
|
}
|
|
|
|
//重置
|
|
let querform = ref()
|
|
function resetQuery() {
|
|
querform.value?.resetFields()
|
|
}
|
|
|
|
function handleSizeChange(val:number) {
|
|
queryParams.pageSize = val
|
|
querytype()
|
|
}
|
|
|
|
//字典类型
|
|
let dictypetit = ref('添加字典类型')
|
|
let zitypepop = ref(false)
|
|
let zidtype = reactive({
|
|
pkId:'',
|
|
typeName:'', //类型名称
|
|
typeCode:'', //类型编码
|
|
mark:'' //描述
|
|
})
|
|
const typerules = ref({
|
|
typeName: [{ required: true, message: "请输入类型名称", trigger: "blur" }],
|
|
typeCode: [{ required: true, message: "请输入类型编码", trigger: "blur" }],
|
|
})
|
|
|
|
const typeform = ref()
|
|
const cztype = ref<Number>(1)
|
|
function showtypepop(type:Number = 1,row?:any) {
|
|
cztype.value = type
|
|
if(type == 1){
|
|
dictypetit.value = '添加字典类型'
|
|
}else{
|
|
dictypetit.value = '修改字典类型'
|
|
}
|
|
typeform.value?.resetFields()
|
|
if(row){
|
|
zidtype.pkId = row.pkId
|
|
zidtype.typeName = row.typeName
|
|
zidtype.typeCode = row.typeCode
|
|
zidtype.mark = row.mark
|
|
}else{
|
|
zidtype.pkId = ''
|
|
zidtype.typeName = ''
|
|
zidtype.typeCode = ''
|
|
zidtype.mark = ''
|
|
}
|
|
zitypepop.value = true
|
|
}
|
|
|
|
function canceltype() {
|
|
zitypepop.value = false
|
|
}
|
|
|
|
|
|
function typecaoz() {
|
|
if(cztype.value == 1){
|
|
return adddicttype(zidtype)
|
|
}
|
|
return updatetype(zidtype)
|
|
}
|
|
|
|
//保存类型
|
|
function addictype() {
|
|
typeform.value?.validate((valid:Boolean) => {
|
|
if (valid) {
|
|
typecaoz().then(() => {
|
|
ElMessage({
|
|
type: 'success',
|
|
message: cztype.value == 1?'添加成功':'修改成功'
|
|
})
|
|
setTimeout(() => {
|
|
zitypepop.value = false
|
|
resetQuery()
|
|
querytype(1)
|
|
},1000)
|
|
})
|
|
}
|
|
})
|
|
}
|
|
|
|
//删除
|
|
function deletezid(row:any) {
|
|
ElMessageBox.confirm(
|
|
`确定删除:${row.typeName}`,
|
|
'温馨提示',
|
|
{
|
|
// confirmButtonText: '',
|
|
// cancelButtonText: 'Cancel',
|
|
type: 'warning',
|
|
}).then(() => {
|
|
deltype(row.pkId).then(() => {
|
|
ElMessage({
|
|
type: 'success',
|
|
message: '删除成功'
|
|
})
|
|
querytype(1)
|
|
})
|
|
})
|
|
.catch(() => {})
|
|
}
|
|
|
|
//添加字典值
|
|
let zidpop = ref(false)
|
|
let valtype = ref<Number>(1)
|
|
let zhidval = ref('')
|
|
|
|
let zidform = reactive({
|
|
typeId:'', //类型ID
|
|
typeCode:'', //类型code
|
|
dictName:'', //字典名称
|
|
dictCode:'', //字典编码
|
|
dictValue:'', //字典值
|
|
sort:0 //排序
|
|
})
|
|
const rules = ref({
|
|
dictName: [{ required: true, message: "请输入字典名称", trigger: "blur" }],
|
|
dictCode: [{ required: true, message: "请输入字典编码", trigger: "blur" }],
|
|
dictValue:[{ required: true, message: "请输入字典值", trigger: "blur" }]
|
|
})
|
|
function showpop(type:Number,row?:any){
|
|
valtype.value = type
|
|
if(type == 1){
|
|
zhidval.value = '添加字典值'
|
|
}else{
|
|
zhidval.value = '修改字典值'
|
|
}
|
|
if(row){
|
|
zidform.typeId = row.typeId
|
|
zidform.typeCode = row.typeCode
|
|
zidform.dictName = row.dictName
|
|
zidform.dictCode = row.dictCode
|
|
zidform.dictValue = row.dictValue
|
|
zidform.sort = row.sort
|
|
}else{
|
|
zidform.typeId = typeId.value
|
|
zidform.typeCode =
|
|
zidform.dictName = ''
|
|
zidform.dictCode = ''
|
|
zidform.dictValue = ''
|
|
zidform.sort = 0
|
|
}
|
|
zidpop.value = true
|
|
}
|
|
|
|
//新增、修改
|
|
let formRef = ref()
|
|
function valcaozuo() {
|
|
if(valtype.value == 1){
|
|
return adddict(zidform)
|
|
}
|
|
return updatedict(zidform)
|
|
}
|
|
function savedictval() {
|
|
formRef.value?.validate((valid:Boolean) => {
|
|
if (valid) {
|
|
valcaozuo().then(() => {
|
|
ElMessage({
|
|
type: 'success',
|
|
message: valtype.value == 1?'添加成功':'保存成功'
|
|
})
|
|
|
|
setTimeout(() => {
|
|
zidpop.value = false
|
|
showzdv(typeId.value)
|
|
},1000)
|
|
})
|
|
}
|
|
})
|
|
}
|
|
|
|
function cancel() {
|
|
zidpop.value = false
|
|
}
|
|
|
|
//查询字典值
|
|
let drawer = ref(false)
|
|
let valist = ref<any[]>([])
|
|
let typeId = ref('')
|
|
let typecode = ref('')
|
|
function showzdv(n:any) {
|
|
typeId.value = n.pkId
|
|
typecode.value = n.typecode
|
|
valist.value.splice(0) //??
|
|
drawer.value = true
|
|
getdict({
|
|
typeId:typeId.value
|
|
}).then(rps => {
|
|
valist.value = rps.data as any
|
|
})
|
|
}
|
|
|
|
//删除
|
|
function deldicval(row:any) {
|
|
ElMessageBox.confirm(
|
|
`确定删除:${row.dictName}`,
|
|
'温馨提示',
|
|
{
|
|
// confirmButtonText: '',
|
|
// cancelButtonText: 'Cancel',
|
|
type: 'warning',
|
|
}).then(() => {
|
|
dedictval(row.pkId).then(() => {
|
|
ElMessage({
|
|
type: 'success',
|
|
message: '删除成功'
|
|
})
|
|
valist.value.splice(0) //??
|
|
getdict({
|
|
typeId:typeId.value
|
|
}).then(rps => {
|
|
valist.value = rps.data as any
|
|
})
|
|
})
|
|
})
|
|
.catch(() => {})
|
|
|
|
}
|
|
|
|
function handleClose() {
|
|
drawer.value = false
|
|
}
|
|
|
|
querytype()
|
|
|
|
</script>
|
|
|