/** * @Description: 参数设置 * @author wx * @date 2020/5/12 */ <template> <div class="params-setting-com page-wrap"> <dee-search-server v-model="searchFormData" class="mpb0" :form-data="searchForm" @search="getList('SEARCH')" /> <dee-table ref="multipleTable" :columns="tableColums" :data="tableData" :selection-row="selectionRow" :pagination="pagination" tooltip-effect="light" @pagination-current-change="paginationCurrentChange" @pagination-size-change="handleSizeChange" @selection-change="selectionChange" @handleEdit="handleEdit" > <dee-tools slot="header" :tools="tools" mode="normal" :collapse="false" /> </dee-table> <dee-dialog :dialog-visible="dialogVisible" :title="item ? '编辑参数' : '新增参数'" width="60%" @handleClose="handleClose" > <edit v-if="model===1" :item="item" @handleClose="handleClose" @getList="getList" /> </dee-dialog> </div> </template> <script> import { getParams, deleteParams } from '@/api/userSystem/user.js' import Edit from './components/edit' export default { name: 'PositionManagement', components: { Edit }, data() { return { dialogVisible: false, item: null, model: -1, // form表单数据 organizationOptions: [], searchFormData: { configName: '', configKey: '', configState: '' }, searchForm: [{ key: 'configName', title: '参数名称', component: { name: 'el-input', clearable: true } }, { key: 'configKey', title: '参数键名', component: { name: 'el-input', clearable: true } }, { key: 'configState', title: '状态', component: { name: 'el-select', options: [ { 'label': '禁用', 'value': 'DISABLE' }, { 'label': '启用', 'value': 'ENABLE' }], clearable: true } }], tools: [{ name: '新增', icon: '/icons/c-add.png', handler: { click: () => { this.handleEdit() } } }, { name: '删除', icon: '/icons/c-creatbackups.png', handler: { click: () => { this.delPosition() } } }], tableColums: [ { title: '操作', key: 'operate', align: 'center', minWidth: 50, component: { show: true, name: 'EditTableRow', props: { btns: [ { operation: '编辑', handleClick: (row, index) => { this.handleEdit(row) }, icon: '/icons/c-edit.png', showFun: (row) => { return true } } ] } }}, { title: '参数名称', key: 'configName', align: 'center', minWidth: 180 }, { title: '参数键名', key: 'configKey', align: 'center', hideTip: true, minWidth: 150 }, { title: '参数键值', key: 'configValue', align: 'center', minWidth: 180 }, { title: '备注', key: 'remark', align: 'center' }, { title: '状态', key: 'configState', align: 'center', component: { render(h, params) { const text = params.configState === 'ENABLE' ? '启用' : '禁用' const color = params.configState === 'ENABLE' ? '#15872a' : '#f00' return h('span', { style: { color }}, text) } } // formatter(row, column) { // return row.configState === 'ENABLE' ? '启用' : '禁用' // } }, { title: '创建时间', key: 'createTime', align: 'center', minWidth: 180 } ], tableData: [], selectionRow: [], pagination: { currentPage: 1, pageSize: 10, total: 0, pageSizes: [10, 20, 50] }, searchParamsOld: '' } }, mounted() { this.getList() }, methods: { getList(status) { const searchParams = { 'items': [], 'operator': 'AND' } this.searchFormData.configName && searchParams.items.push({ 'fieldName': 'configName', 'operator': 'LIKE', 'value': this.searchFormData.configName }) this.searchFormData.configKey && searchParams.items.push({ 'fieldName': 'configKey', 'operator': 'LIKE', 'value': this.searchFormData.configKey }) this.searchFormData.configState && searchParams.items.push({ 'fieldName': 'configState', 'operator': 'EQ', 'value': this.searchFormData.configState }) // if (this.searchParamsOld !== JSON.stringify(searchParams)) this.pagination.currentPage = 1 if (status === 'SEARCH') this.pagination.currentPage = 1 const params = { 'pageFrom': this.pagination.currentPage, 'pageSize': this.pagination.pageSize, 'searchItems': searchParams } getParams(params).then(res => { this.tableData = res.items.content.map(item => { item.show = true; return item }) this.pagination.total = res.items.totalElements // this.searchParamsOld = JSON.stringify(searchParams) }).catch(res => { // this.searchParamsOld = JSON.stringify(searchParams) }) }, delPosition() { if (this.selectionRow.length) { const idArr = this.selectionRow.map(r => r.id) this.$utils.showConfirm( '你是否确定删除选中的参数吗?', '提示', 'warning', '确定', '取消', () => { deleteParams({ data: idArr }).then(res => { this.$utils.showMessageSuccess(res.message) this.getList() }) } ) } else { this.$utils.showMessageError('请先选择参数') } }, selectionChange(val) { this.selectionRow = val }, handleEdit(item) { this.dialogVisible = true this.model = 1 this.item = item || null }, handleClose() { this.model = -1 this.item = null this.dialogVisible = false }, paginationCurrentChange(currentPage) { this.pagination.currentPage = currentPage this.getList() }, handleSizeChange(pageSize) { this.pagination.pageSize = pageSize this.pagination.currentPage = 1 this.getList() } } } </script> <style lang="scss"> .params-setting-com { .dee-form2 { display: flex; } .dee-table{ height: calc(100% - 50px); .dee-table-body{ height: calc(100% - 90px); overflow-y: scroll; } } } </style>