<template>
|
<div class="app-container">
|
<el-row :gutter="10">
|
<el-col :xs="24" :sm="24" :md="10" :lg="10" :xl="10">
|
<el-card class="box-card">
|
<div slot="header" class="clearfix">
|
<span>字典类型</span>
|
</div>
|
<div class="filter-container">
|
<el-button class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-refresh" @click="refreshHandle('dictionaryType')">刷新</el-button>
|
<el-button v-if="userType===1" class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-plus" @click="showCreateHandle('dictionaryType') ">新增</el-button>
|
<el-input v-model="typeQueryForm.name" class="filter-item" placeholder="输入名称" style="width: 200px;" @keyup.enter.native="queryHandle('dictionaryType')"/>
|
<el-button class="filter-item" type="primary" icon="el-icon-search" @click="queryHandle('dictionaryType')" />
|
</div>
|
<div class="table_content">
|
<!--表格渲染-->
|
<el-table
|
v-loading="typeListLoading"
|
:data="dictionaryTypeData"
|
border
|
fit
|
highlight-current-row
|
style="width: 100%;"
|
@current-change="tableCurrentChange"
|
>
|
<el-table-column label="编码" prop="code" align="center">
|
<template slot-scope="scope">
|
<span>{{ scope.row.code }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column label="名称" prop="text" align="center">
|
<template slot-scope="scope">
|
<span>{{ scope.row.text }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column label="备注" prop="description" align="center">
|
<template slot-scope="scope">
|
<span>{{ scope.row.description }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column v-if="userType===1" label="操作" align="center" width="240" class-name="small-padding fixed-width">
|
<template slot-scope="scope">
|
<el-button type="text" @click="showEditHandle(scope.row,'dictionaryType')">编辑</el-button>
|
<el-button type="text" style="color:red;" @click="deleteHandle(scope.row,'dictionaryType')">删除</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
<br>
|
<!--分页组件-->
|
<el-pagination
|
v-show="recordTotalType>0"
|
:current-page="currentPageType"
|
:page-sizes="[10, 20, 30, 50]"
|
:page-size="pageSizeType"
|
:total="recordTotalType"
|
layout="total, prev, pager, next,sizes"
|
background
|
@size-change="typeHandleSizeChange"
|
@current-change="typeHandleCurrentChange"
|
/>
|
</div>
|
</el-card>
|
</el-col>
|
<el-col :xs="24" :sm="24" :md="14" :lg="14" :xl="14">
|
<el-card class="box-card">
|
<div slot="header" class="clearfix">
|
<span>字典详情
|
<span v-if="selectRow">
|
>>{{ selectRow.text }}
|
</span>
|
</span>
|
</div>
|
<div v-if="selectRow">
|
<div class="filter-container">
|
|
<el-button class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-refresh" @click="refreshHandle('dictionaryItem')">刷新</el-button>
|
<el-button v-if="userType===1" class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-plus" @click="showCreateHandle('dictionaryItem')">新增</el-button>
|
<el-input v-model="itemQueryForm.name" class="filter-item" placeholder="输入名称" style="width: 200px;" @keyup.enter.native="queryHandle('dictionaryItem')"/>
|
<el-button class="filter-item" type="primary" icon="el-icon-search" @click="queryHandle('dictionaryItem')" />
|
</div>
|
|
<div class="table_content">
|
<!--表格渲染-->
|
<el-table
|
v-loading="itemListLoading"
|
:data="dictionaryItemData"
|
border
|
fit
|
highlight-current-row
|
style="width: 100%;"
|
>
|
<el-table-column label="字典标签" prop="text" align="center">
|
<template slot-scope="scope">
|
<span>{{ scope.row.text }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column label="字典值" prop="value" align="center">
|
<template slot-scope="scope">
|
<span>{{ scope.row.value }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column label="排序" prop="sort" align="center">
|
<template slot-scope="scope">
|
<span>{{ scope.row.sort }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column label="状态" prop="status" align="center">
|
<template slot-scope="scope">
|
<span>{{ scope.row.status | parseStatus }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column label="备注" prop="description" align="center">
|
<template slot-scope="scope">
|
<span>{{ scope.row.description }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column v-if="userType===1" label="操作" align="center" width="240" class-name="small-padding fixed-width">
|
<template slot-scope="scope">
|
<el-button type="text" @click="showEditHandle(scope.row,'dictionaryItem')">编辑</el-button>
|
<el-button type="text" style="color:red;" @click="deleteHandle(scope.row,'dictionaryItem')">删除</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
<br>
|
<!--分页组件-->
|
<el-pagination
|
v-show="recordTotalItem>0"
|
:current-page="currentPageItem"
|
:page-sizes="[10, 20, 30, 50]"
|
:page-size="pageSizeItem"
|
:total="recordTotalItem"
|
layout="total, prev, pager, next,sizes"
|
background
|
@size-change="itemHandleSizeChange"
|
@current-change="itemHandleCurrentChange"
|
/>
|
</div>
|
</div>
|
<div v-else>
|
<span>点击字典类型查看字典详情</span>
|
</div>
|
|
</el-card>
|
</el-col>
|
</el-row>
|
<el-dialog :title="typeDialogStatus==='create'?'新增':'编辑'" :visible.sync="typeDialogFormVisible" :modal-append-to-body="false" width="700px" :close-on-click-modal="false">
|
<el-form ref="typeDataForm" :rules="typeDataFormRules" :model="typeDataForm" label-position="right" label-width="140px" style="margin-left:50px;width:500px;" element-loading-text="保存中...">
|
<el-form-item label="类型编码:" prop="code">
|
<el-input v-model.trim="typeDataForm.code"/>
|
</el-form-item>
|
<el-form-item label="类型名称:" prop="text">
|
<el-input v-model.trim="typeDataForm.text"/>
|
</el-form-item>
|
<el-form-item label="备注:" prop="description">
|
<el-input :autosize="{ minRows: 2, maxRows: 4}" v-model.trim="typeDataForm.description" type="textarea"/>
|
</el-form-item>
|
</el-form>
|
<div slot="footer" class="dialog-footer">
|
<el-button @click="typeDialogFormVisible = false">取消</el-button>
|
<el-button type="primary" @click="typeDialogStatus==='create'?createHandle('dictionaryType'):updateHandle('dictionaryType')">确认</el-button>
|
</div>
|
</el-dialog>
|
<el-dialog :title="itemDialogStatus==='create'?'新增':'编辑'" :visible.sync="itemDialogFormVisible" :modal-append-to-body="false" width="700px" :close-on-click-modal="false">
|
<el-form ref="itemDataForm" :rules="itemDataFormRules" :model="itemDataForm" label-position="right" label-width="140px" style="margin-left:50px;width:500px;" element-loading-text="保存中...">
|
<el-form-item label="字典值(编码):" prop="value">
|
<el-input v-model.trim="itemDataForm.value"/>
|
</el-form-item>
|
<el-form-item label="字典标签:" prop="text">
|
<el-input v-model.trim="itemDataForm.text"/>
|
</el-form-item>
|
|
<el-form-item label="排序:" prop="sort">
|
<el-input-number v-model.number="itemDataForm.sort" :min="0" :max="100"/>
|
</el-form-item>
|
<el-form-item label="是否启用">
|
<el-switch v-model.number="itemDataForm.status" :active-value="1" :inactive-value="0" active-text="启用" inactive-text="禁用"/>
|
</el-form-item>
|
<el-form-item label="备注:" prop="description">
|
<el-input :autosize="{ minRows: 2, maxRows: 4}" v-model.trim="itemDataForm.description" type="textarea"/>
|
</el-form-item>
|
</el-form>
|
<div slot="footer" class="dialog-footer">
|
<el-button @click="itemDialogFormVisible = false">取消</el-button>
|
<el-button type="primary" @click="itemDialogStatus==='create'?createHandle('dictionaryItem'):updateHandle('dictionaryItem')">确认</el-button>
|
</div>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script>
|
import { mapGetters } from 'vuex'
|
import { dictionaryTypeList, createDictionaryType, deleteDictionaryType, updateDictionaryType, dictionaryItemList, createDictionaryItem, deleteDictionaryItem, updateDictionaryItem } from '@/api/dictionary'
|
import { parseTime, computePageCount } from '@/utils'
|
import { parseError } from '@/utils/messageDialog'
|
import Cookies from 'js-cookie'
|
import { validateRole } from '@/utils/validate'
|
import { Message, MessageBox } from 'element-ui'
|
export default {
|
name: 'Dictionary',
|
filters: {
|
parseStatus(status) {
|
if (status == 1) {
|
return '启用'
|
} else {
|
return '禁用'
|
}
|
}
|
},
|
computed: {
|
...mapGetters([
|
'userType',
|
])
|
},
|
data() {
|
return {
|
pageSizeType: 10,
|
recordTotalType: 0,
|
currentPageType: 1,
|
pageTotalType: 0,
|
pageSizeItem: 10,
|
recordTotalItem: 0,
|
currentPageItem: 1,
|
pageTotalItem: 0,
|
tableKey: 0,
|
dictionaryTypeData: null,
|
dictionaryItemData: null,
|
typeListLoading: false,
|
itemListLoading: false,
|
selectRow: null,
|
typeDataForm: {
|
id: '',
|
code: '',
|
text: '',
|
description: ''
|
},
|
itemDataForm: {
|
id: '',
|
sort: '',
|
text: '',
|
value: '',
|
status: 1,
|
dictionaryTypeId: '',
|
description: ''
|
},
|
typeQueryForm: {
|
name: ''
|
},
|
itemQueryForm: {
|
name: ''
|
},
|
typeDialogFormVisible: false,
|
typeDialogStatus: '',
|
typeDataFormRules: {
|
code: [{ required: true, message: '类型编码不能为空', trigger: 'blur' }],
|
text: [{ required: true, message: '类型名称不能为空', trigger: 'blur' }]
|
},
|
itemDialogFormVisible: false,
|
itemDialogStatus: '',
|
itemDataFormRules: {
|
value: [{ required: true, message: '字典值不能为空', trigger: 'blur' }],
|
text: [{ required: true, message: '字典标签不能为空', trigger: 'blur' }],
|
sort: [{ required: true, message: '字典排序不能为空', trigger: 'blur' }]
|
}
|
}
|
},
|
created() {
|
this.getDictionaryTypeList()
|
},
|
methods: {
|
getDictionaryTypeList() {
|
const _this = this
|
const params = {}
|
params['pageIndex'] = _this.currentPageType
|
params['pageSize'] = _this.pageSizeType
|
const userName = Cookies.get('userName')
|
params['operator'] = userName
|
for (const i in _this.queryForm) {
|
if (_this.queryForm[i] != undefined && _this.queryForm[i].toString() != '') {
|
params[i] = _this.queryForm[i]
|
}
|
}
|
_this.typeListLoading = true
|
dictionaryTypeList(params).then(response => {
|
const res = response.data
|
if (res.code == 200) {
|
const result = res.result
|
_this.recordTotalType = result.totalCount
|
_this.pageSizeType = result.pageSize
|
_this.pageTotalType = computePageCount(result.totalCount, result.pageSize)
|
_this.currentPageType = result.pageIndex
|
_this.dictionaryTypeData = result.result
|
} else {
|
parseError({ error: res.message, vm: _this })
|
}
|
_this.typeListLoading = false
|
}).catch(error => {
|
_this.typeListLoading = false
|
parseError({ error: error, vm: _this })
|
})
|
},
|
getDictionaryItemList() {
|
const _this = this
|
const params = {}
|
params['pageIndex'] = _this.currentPageItem
|
params['pageSize'] = _this.pageSizeItem
|
if (!_this.selectRow) {
|
return
|
}
|
params['dictionaryTypeId'] = _this.selectRow.id
|
const userName = Cookies.get('userName')
|
params['operator'] = userName
|
for (const i in _this.queryForm) {
|
if (_this.queryForm[i] != undefined && _this.queryForm[i].toString() != '') {
|
params[i] = _this.queryForm[i]
|
}
|
}
|
_this.listLoading = true
|
dictionaryItemList(params).then(response => {
|
const res = response.data
|
if (res.code == 200) {
|
const result = res.result
|
_this.recordTotalItem = result.totalCount
|
_this.pageSizeItem = result.pageSize
|
_this.pageTotalItem = computePageCount(result.totalCount, result.pageSize)
|
_this.currentPageItem = result.pageIndex
|
_this.dictionaryItemData = result.result
|
} else {
|
parseError({ error: res.message, vm: _this })
|
}
|
_this.listLoading = false
|
}).catch(error => {
|
_this.listLoading = false
|
parseError({ error: error, vm: _this })
|
})
|
},
|
createHandle: function(type) {
|
if (type == 'dictionaryType') {
|
this.createTypeHandle()
|
} else {
|
this.createItemHandle()
|
}
|
},
|
createTypeHandle() {
|
const _this = this
|
this.$refs['typeDataForm'].validate((valid) => {
|
if (valid) {
|
const userName = Cookies.get('userName')
|
_this.typeDataForm['operator'] = userName
|
createDictionaryType(_this.typeDataForm).then(response => {
|
const res = response.data
|
if (res.code == 200) {
|
_this.typeDialogFormVisible = false
|
_this.$message({
|
message: '创建成功',
|
type: 'success'
|
})
|
_this.getDictionaryTypeList()
|
} else {
|
parseError({ error: res.message, vm: _this })
|
}
|
}).catch(error => {
|
parseError({ error: error, vm: _this })
|
})
|
}
|
})
|
},
|
createItemHandle() {
|
const _this = this
|
this.$refs['itemDataForm'].validate((valid) => {
|
if (valid) {
|
const userName = Cookies.get('userName')
|
_this.itemDataForm['operator'] = userName
|
createDictionaryItem(_this.itemDataForm).then(response => {
|
const res = response.data
|
if (res.code == 200) {
|
_this.itemDialogFormVisible = false
|
_this.$message({
|
message: '创建成功',
|
type: 'success'
|
})
|
_this.getDictionaryItemList()
|
} else {
|
parseError({ error: res.message, vm: _this })
|
}
|
}).catch(error => {
|
parseError({ error: error, vm: _this })
|
})
|
}
|
})
|
},
|
deleteHandle: function(row, type) {
|
const _this = this
|
if (type == 'dictionaryType') {
|
MessageBox.confirm('确定删除' + row.text + '信息', '确定删除', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning'
|
}).then(() => {
|
_this.deleteTypeAction(row)
|
}).catch(() => {
|
console.log('已取消删除')
|
})
|
} else {
|
MessageBox.confirm('确定删除' + row.text + '信息', '确定删除', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning'
|
}).then(() => {
|
_this.deleteItemAction(row)
|
}).catch(() => {
|
console.log('已取消删除')
|
})
|
}
|
},
|
deleteTypeAction: function(row) {
|
const _this = this
|
const params = {}
|
params['id'] = row.id
|
const userName = Cookies.get('userName')
|
params['operator'] = userName
|
deleteDictionaryType(params).then(response => {
|
const res = response.data
|
if (res.code == 200) {
|
_this.$message({
|
message: '删除成功',
|
type: 'success'
|
})
|
_this.getDictionaryTypeList()
|
} else {
|
parseError({ error: res.message, vm: _this })
|
}
|
}).catch(error => {
|
parseError({ error: error, vm: _this })
|
})
|
},
|
deleteItemAction: function(row) {
|
const _this = this
|
const params = {}
|
params['id'] = row.id
|
const userName = Cookies.get('userName')
|
params['operator'] = userName
|
deleteDictionaryItem(params).then(response => {
|
const res = response.data
|
if (res.code == 200) {
|
_this.$message({
|
message: '删除成功',
|
type: 'success'
|
})
|
_this.getDictionaryItemList()
|
} else {
|
parseError({ error: res.message, vm: _this })
|
}
|
}).catch(error => {
|
parseError({ error: error, vm: _this })
|
})
|
},
|
refreshHandle: function(type) {
|
if (type == 'dictionaryType') {
|
this.getDictionaryTypeList()
|
} else {
|
this.getDictionaryItemList()
|
}
|
},
|
queryHandle: function(type) {
|
if (type == 'dictionaryType') {
|
this.currentPageType = 1
|
this.getDictionaryTypeList()
|
} else {
|
this.currentPageItem = 1
|
this.getDictionaryItemList()
|
}
|
},
|
resetTypeDataForm() {
|
this.typeDataForm = {
|
id: '',
|
code: '',
|
text: '',
|
description: ''
|
}
|
},
|
resetItemDataForm() {
|
this.itemDataForm = {
|
id: '',
|
sort: '',
|
text: '',
|
value: '',
|
status: 1,
|
dictionaryTypeId: '',
|
description: ''
|
}
|
},
|
showCreateHandle(type) {
|
if (type == 'dictionaryType') {
|
this.resetTypeDataForm()
|
this.typeDialogStatus = 'create'
|
this.typeDialogFormVisible = true
|
this.$nextTick(() => {
|
this.$refs['typeDataForm'].clearValidate()
|
})
|
} else {
|
this.resetItemDataForm()
|
this.itemDialogStatus = 'create'
|
this.itemDialogFormVisible = true
|
if (!this.selectRow) {
|
parseError({ error: '当前为选择字典类型', vm: this })
|
return
|
}
|
this.itemDataForm.dictionaryTypeId = this.selectRow.id
|
this.$nextTick(() => {
|
this.$refs['itemDataForm'].clearValidate()
|
})
|
}
|
},
|
updateHandle(type) {
|
if (type == 'dictionaryType') {
|
this.updateTypeHandle()
|
} else {
|
this.updateItemHandle()
|
}
|
},
|
updateTypeHandle() {
|
this.$refs['typeDataForm'].validate((valid) => {
|
const _this = this
|
if (valid) {
|
const userName = Cookies.get('userName')
|
_this.typeDataForm['operator'] = userName
|
updateDictionaryType(_this.typeDataForm).then(response => {
|
const res = response.data
|
if (res.code == 200) {
|
_this.typeDialogFormVisible = false
|
_this.$message({
|
message: '更新成功',
|
type: 'success'
|
})
|
_this.getDictionaryTypeList()
|
} else {
|
parseError({ error: res.message, vm: _this })
|
}
|
}).catch(error => {
|
parseError({ error: error, vm: _this })
|
})
|
}
|
})
|
},
|
updateItemHandle() {
|
this.$refs['itemDataForm'].validate((valid) => {
|
const _this = this
|
if (valid) {
|
const userName = Cookies.get('userName')
|
_this.itemDataForm['operator'] = userName
|
updateDictionaryItem(_this.itemDataForm).then(response => {
|
const res = response.data
|
if (res.code == 200) {
|
_this.itemDialogFormVisible = false
|
_this.$message({
|
message: '更新成功',
|
type: 'success'
|
})
|
_this.getDictionaryItemList()
|
} else {
|
parseError({ error: res.message, vm: _this })
|
}
|
}).catch(error => {
|
parseError({ error: error, vm: _this })
|
})
|
}
|
})
|
},
|
showEditHandle: function(row, type) {
|
if (type == 'dictionaryType') {
|
this.resetTypeDataForm()
|
this.typeDialogStatus = 'editor'
|
this.typeDataForm.id = row.id
|
this.typeDataForm.code = row.code
|
this.typeDataForm.text = row.text
|
this.typeDataForm.description = row.description
|
this.typeDialogFormVisible = true
|
this.$nextTick(() => {
|
this.$refs['typeDataForm'].clearValidate()
|
})
|
} else {
|
this.resetItemDataForm()
|
this.itemDialogStatus = 'editor'
|
this.itemDataForm.id = row.id
|
this.itemDataForm.value = row.value
|
this.itemDataForm.text = row.text
|
this.itemDataForm.sort = row.sort
|
this.itemDataForm.status = row.status
|
this.itemDataForm.description = row.description
|
console.log(this.itemDataForm.status)
|
this.itemDialogFormVisible = true
|
this.$nextTick(() => {
|
this.$refs['itemDataForm'].clearValidate()
|
})
|
}
|
},
|
typeHandleSizeChange: function(val) {
|
this.pageSizeType = val
|
this.currentPageType = 1
|
this.getDictionaryTypeList()
|
},
|
typeHandleCurrentChange: function(val) {
|
this.currentPageType = val
|
this.getDictionaryTypeList()
|
},
|
itemHandleSizeChange: function(val) {
|
this.pageSizeItem = val
|
this.currentPageItem = 1
|
this.getDictionaryItemList()
|
},
|
itemHandleCurrentChange: function(val) {
|
this.currentPageItem = val
|
this.getDictionaryItemList()
|
},
|
tableCurrentChange(currentRow, oldCurrentRow) {
|
this.selectRow = currentRow
|
if (currentRow) {
|
this.getDictionaryItemList()
|
}
|
}
|
}
|
}
|
</script>
|
