457 lines
12 KiB
Vue
457 lines
12 KiB
Vue
<!-- 配置管理 - 标准法规属性管理详情页 -->
|
|
<template>
|
|
<div class="content-height">
|
|
<div class="laws-details-header">
|
|
<span class="back" title="返回" @click="back"><i class="el-icon-back" ></i>
|
|
</span>
|
|
<div class="title">
|
|
{{dicName}}
|
|
</div>
|
|
</div>
|
|
<div class="search">
|
|
<el-row>
|
|
<el-col :span="20">
|
|
<div class="search-box-left">
|
|
<label>选项:</label>
|
|
<el-input v-model="q.itemName" placeholder="请输入选项"></el-input>
|
|
</div>
|
|
</el-col>
|
|
<el-col :span="4" align="right">
|
|
<div class="search-box-right">
|
|
<el-button type="primary" @click="search">查询</el-button>
|
|
<el-button @click="reset">重置</el-button>
|
|
</div>
|
|
</el-col>
|
|
<el-col :span="24">
|
|
<div class="operate-box">
|
|
<el-button @click="add">新增</el-button>
|
|
<el-button @click="getSelectUser">删除</el-button>
|
|
</div>
|
|
</el-col>
|
|
</el-row>
|
|
</div>
|
|
<div class="table">
|
|
<vxe-table ref="userTable" :data="tableData" :empty-render="{name: 'NotData'}" align="center" border stripe
|
|
v-table-min-height="'calc(100vh - 320px)'">
|
|
<vxe-column show-overflow type="checkbox" width="77"></vxe-column>
|
|
<vxe-column show-overflow show-header-overflow type="seq" title="序号" width="77">
|
|
<template #default="{ row, rowIndex }">
|
|
{{ rowIndex + (q.pageNo - 1) * q.pageSize + 1 }}
|
|
</template>
|
|
</vxe-column>
|
|
<vxe-column show-overflow show-header-overflow field="itemName" title="选项"></vxe-column>
|
|
<vxe-column show-overflow show-header-overflow field="itemValue" title="选项值"></vxe-column>
|
|
<vxe-column show-overflow show-header-overflow field="itemOrder" title="排序"></vxe-column>
|
|
<vxe-column show-overflow show-header-overflow field="itemDescription" title="描述"></vxe-column>
|
|
|
|
<!-- <vxe-column show-overflow show-header-overflow title="启用/禁用" width="100" fixed="right">-->
|
|
<!-- <template #default="{ row }">-->
|
|
<!-- <el-switch v-model="row.ISUSE" active-value="1" inactive-value="0"-->
|
|
<!-- @change="(val) => sysUserIsUse(val, row)"></el-switch>-->
|
|
<!-- </template>-->
|
|
<!-- </vxe-column>-->
|
|
<vxe-column show-overflow show-header-overflow title="操作" width="200" fixed="right">
|
|
<template #default="{ row }">
|
|
<el-button type="text" @click="openRowData('view', row)">查看</el-button>
|
|
<el-button type="text" @click="openRowData('modify', row)">编辑</el-button>
|
|
<el-button type="text" class="del-btn" @click="deleteRow(row)">删除</el-button>
|
|
</template>
|
|
</vxe-column>
|
|
</vxe-table>
|
|
<el-pagination
|
|
@size-change="handleSizeChange"
|
|
@current-change="handleCurrentChange"
|
|
:current-page="q.pageNo"
|
|
:page-sizes="[5, 10, 20]"
|
|
:page-size="q.pageSize"
|
|
layout="total, sizes, prev, pager, next, jumper"
|
|
:total="total"/>
|
|
|
|
</div>
|
|
<el-dialog :title="dialogTitle " :visible.sync="dialogUser" width="750px" :close-on-click-modal="false"
|
|
:close-on-press-escape="false" modal-append-to-body append-to-body>
|
|
<div class="user-form showLimit">
|
|
<el-form ref="addForm" :model="form" label-width="186px" :disabled="mode === 'view'"
|
|
:rules="formRule">
|
|
<el-form-item label="选项:" required>
|
|
<el-input v-model="form.itemName" maxlength="20" show-word-limit placeholder="请输入选项"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="选项值:" required>
|
|
<el-input v-model="form.itemValue" maxlength="20" placeholder="请输入值" show-word-limit></el-input>
|
|
</el-form-item>
|
|
<!--<el-form-item label="确认密码:" :required="mode === 'add'" v-if="mode !== 'view'">-->
|
|
<!--<el-input v-model="repassword" maxlength="20" type="password" placeholder="请确认密码"></el-input>-->
|
|
<!--</el-form-item>-->
|
|
<el-form-item label="排序:" required>
|
|
<el-input v-model="form.itemOrder"show-word-limit maxlength="10" placeholder="请输入排序"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="备注:" >
|
|
<el-input type="textarea" v-model="form.itemDescription" maxlength="500" show-word-limit placeholder="请输入备注"></el-input>
|
|
</el-form-item>
|
|
</el-form>
|
|
<div class="done">
|
|
<el-button v-if="mode !== 'view'" type="primary" @click="sysUserAddUser">确定</el-button>
|
|
</div>
|
|
</div>
|
|
</el-dialog>
|
|
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'standLawsAttrDetails',
|
|
data(){
|
|
const validateData= (rule, value, callback) =>{
|
|
let test=/^[0-9]*$/
|
|
if (!test.test(value)) {
|
|
callback(new Error('请输入数字值'));
|
|
}else{
|
|
callback()
|
|
}
|
|
}
|
|
return{
|
|
form:{
|
|
itemName:'',
|
|
itemValue:'',
|
|
itemDescription:'',
|
|
itemOrder:''
|
|
},
|
|
total:0,
|
|
q:{
|
|
pageNo:1,
|
|
pageSize:10,
|
|
itemName:''
|
|
},
|
|
tableData:[{inde:1}],
|
|
mode:'',
|
|
dialogUser:false,
|
|
dicId:'',
|
|
dicName:'',
|
|
formRule:{
|
|
itemName:[{
|
|
required:true,
|
|
message:'选项不能为空',
|
|
trigger:'change'
|
|
}],
|
|
itemValue:[{
|
|
required:true,
|
|
message:'选项值不能为空',
|
|
trigger:'change'
|
|
}],
|
|
itemOrder:[{
|
|
required:true,
|
|
message:'排序不能为空',
|
|
trigger:'change'
|
|
},{
|
|
validator:validateData, trigger:'change'
|
|
|
|
}],
|
|
}
|
|
}
|
|
},
|
|
mounted() {
|
|
this.dicName=this.$route.query.pName
|
|
this.dicId=this.$route.query.pId
|
|
this.loadData()
|
|
},
|
|
methods:{
|
|
// 编辑查看用户
|
|
openRowData (mode, row) {
|
|
this.mode = mode
|
|
this.form=JSON.parse(JSON.stringify(row))
|
|
this.dialogUser = true
|
|
},
|
|
sysUserAddUser(){
|
|
|
|
if( this.checkUserForm()){
|
|
if(this.mode=='add'){
|
|
this.$api.dictionary.addItemDic(this.form).then((res)=>{
|
|
this.$message.success("新增成功")
|
|
this.loadData()
|
|
})
|
|
}else{
|
|
this.$api.dictionary.editItemDic(this.form).then((res)=>{
|
|
this.$message.success("编辑成功")
|
|
this.loadData()
|
|
})
|
|
}
|
|
|
|
this.dialogUser = false
|
|
}
|
|
|
|
|
|
|
|
},
|
|
checkUserForm () {
|
|
if (!this.form.itemName) {
|
|
return this.$message.warning('请检查选项') && false
|
|
}
|
|
if (!this.form.itemValue) {
|
|
return this.$message.warning('请检查选项值') && false
|
|
}
|
|
if (!this.form.itemOrder || !(/^[0-9]*$/.test(this.form.itemOrder))) {
|
|
return this.$message.warning('请检查排序') && false
|
|
}
|
|
return true
|
|
},
|
|
// 新增
|
|
add () {
|
|
this.mode = 'add'
|
|
this.form = {
|
|
itemName:'',
|
|
itemValue:'',
|
|
itemDescription:'',
|
|
itemOrder:'',
|
|
dicId:this.dicId
|
|
}
|
|
this.dialogUser = true
|
|
this.$nextTick(()=>{
|
|
this.$refs.addForm.clearValidate()
|
|
|
|
})
|
|
},
|
|
// 批量删除
|
|
getSelectUser () {
|
|
const users = this.$refs.userTable.getCheckboxRecords()
|
|
if (!users.length) {
|
|
return this.$message.warning('请选择数据后在进行操作')
|
|
}
|
|
const ids = users.map(item => item.id).join(',')
|
|
this.deleteUser(ids)
|
|
},
|
|
// 删除
|
|
deleteRow (row) {
|
|
this.deleteUser(row.id)
|
|
},
|
|
// 删除用户
|
|
deleteUser (ids) {
|
|
this.$confirm('此操作将删除所选, 是否继续?', '提示', {
|
|
confirmButtonText: '确定',
|
|
cancelButtonText: '取消',
|
|
type: 'warning'
|
|
}).then(() => {
|
|
this.$api.dictionary.delItemDic({ ids }).then(_ => {
|
|
this.$message.success('操作成功')
|
|
this.loadData()
|
|
})
|
|
})
|
|
},
|
|
handleSizeChange(size){
|
|
this.q.pageSize=size
|
|
this.loadData()
|
|
},
|
|
handleCurrentChange(page){
|
|
this.q.pageNo=page
|
|
this.loadData()
|
|
},
|
|
loadData(){
|
|
this.$api.dictionary.getItemDic({...this.q,dicId:this.dicId}).then((res)=>{
|
|
this.tableData = res.data.records
|
|
this.total=res.data.total
|
|
})
|
|
},
|
|
search() {
|
|
this.q.pageNo = 1
|
|
this.loadData()
|
|
},
|
|
reset() {
|
|
this.q = {
|
|
pageNo:1,
|
|
pageSize:10,
|
|
itemName:'',
|
|
dicId: this.dicId
|
|
}
|
|
this.loadData()
|
|
},
|
|
back(){
|
|
this.$router.back(-1)
|
|
}
|
|
},
|
|
computed: {
|
|
dialogTitle () {
|
|
switch (this.mode) {
|
|
case 'add':
|
|
return '新增'
|
|
case 'modify':
|
|
return '编辑'
|
|
case 'view':
|
|
return '查看'
|
|
}
|
|
}
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.laws-details-header{
|
|
display: flex;
|
|
padding: 10px 10px 0;
|
|
.title{
|
|
height: 30px;
|
|
line-height: 30px;
|
|
margin-left: 50px;
|
|
}
|
|
}
|
|
.back{
|
|
display: inline-block;
|
|
width: 30px;
|
|
height: 30px;
|
|
background: #1890FF;
|
|
color: #fff;
|
|
border-radius: 50%;
|
|
//text-align: center;
|
|
line-height: 30px;
|
|
font-size: 25px;
|
|
font-weight: 700;
|
|
cursor: pointer;
|
|
text-align: center;
|
|
vertical-align: sub;
|
|
|
|
}
|
|
.search {
|
|
.search-box-left {
|
|
padding-top: 20px;
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
align-items: center;
|
|
|
|
label {
|
|
font-size: 14px;
|
|
font-weight: 400;
|
|
color: #595959;
|
|
margin-right: 5px;
|
|
padding-left: 22px;
|
|
}
|
|
|
|
.year {
|
|
::v-deep .el-input__inner {
|
|
padding: 0 15px !important;
|
|
}
|
|
}
|
|
|
|
::v-deep .el-input {
|
|
width: 167px;
|
|
margin-right: 5px;
|
|
}
|
|
|
|
@media screen and (max-width: 1366px) {
|
|
::v-deep .el-input {
|
|
width: 135px;
|
|
margin-right: 5px;
|
|
}
|
|
}
|
|
|
|
::v-deep .el-button {
|
|
float: right;
|
|
}
|
|
}
|
|
|
|
.search-box-right {
|
|
padding-top: 20px;
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
align-items: center;
|
|
padding-right: 14px;
|
|
}
|
|
|
|
.operate-box {
|
|
padding-left: 13px;
|
|
padding-bottom: 11px;
|
|
padding-top: 18px;
|
|
}
|
|
}
|
|
|
|
.table {
|
|
margin: 0 14px 0 13px;
|
|
|
|
::v-deep .el-pagination {
|
|
margin-top: 13px;
|
|
padding-left: 20px;
|
|
padding-bottom: 10px;
|
|
}
|
|
}
|
|
.user-form {
|
|
padding-top: 26px;
|
|
|
|
::v-deep .el-form {
|
|
padding-right: 79px;
|
|
|
|
.el-form-item {
|
|
//margin-bottom: 10px;
|
|
|
|
.el-form-item__label {
|
|
height: 36px;
|
|
line-height: 36px;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
color: #262626;
|
|
}
|
|
|
|
.el-input__inner {
|
|
min-height: 36px;
|
|
}
|
|
|
|
.el-input__inner,
|
|
.el-textarea__inner {
|
|
font-size: 14px;
|
|
font-weight: 400;
|
|
color: #434343;
|
|
}
|
|
|
|
.el-select {
|
|
width: 100%;
|
|
}
|
|
|
|
.el-date-editor {
|
|
width: 100%;
|
|
|
|
.el-input__inner {
|
|
padding-left: 15px;
|
|
}
|
|
|
|
.el-input__suffix {
|
|
font-size: 16px;
|
|
margin-top: 2px;
|
|
}
|
|
}
|
|
|
|
.icon-auth {
|
|
.el-icon-arrow-up {
|
|
margin-top: 2px;
|
|
transform: rotateZ(0) !important;
|
|
}
|
|
|
|
.el-icon-arrow-up:before {
|
|
content: '';
|
|
background: url("../../assets/imgs/icon-user.png") no-repeat center center;
|
|
display: inline-block;
|
|
width: 12px;
|
|
height: 14px;
|
|
background-size: 100% 100%;
|
|
}
|
|
}
|
|
|
|
.el-button {
|
|
width: 80px;
|
|
height: 36px;
|
|
padding: 0;
|
|
text-align: center;
|
|
}
|
|
}
|
|
}
|
|
|
|
.done {
|
|
text-align: center;
|
|
padding: 40px 0;
|
|
|
|
::v-deep .el-button {
|
|
width: 80px;
|
|
height: 36px;
|
|
padding: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
</style>
|