ewide/zsxt_nbzs_h5
22
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

update 字典结构更改. 扩展值可编辑为json

Browse Source
This commit is contained in:
自带大佬气场
2021-05-20 20:39:46 +08:00
parent e7fea323bd
commit ad08df1150
25 changed files with 1033 additions and 144 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
Web/src/common/api/requests/business/houseCode.js
View File

@@ -1,3 +1,5 @@
export default {
houseCodeAdd: ['/houseCode/add', 'post']
houseCodeAdd: ['/houseCode/add', 'post'],
houseCodePage: ['/houseCode/page', 'post'],
houseCodeNo: '/houseCode/getNextNoByCode',
}

4
Web/src/common/api/requests/sys/dictDataManage.js
View File

@@ -15,4 +15,8 @@ export default {
* 删除系统字典值
*/
sysDictDataDelete: ['/sysDictData/delete', 'post'],
/**
* 批量删除系统字典值
*/
sysDictDataDeleteBatch: ['/sysDictData/deleteBatch', 'post'],
}

2
Web/src/common/api/requests/sys/dictManage.js
View File

@@ -24,7 +24,7 @@ export default {
*/
sysDictTypeDropDowns: ['/sysDictType/dropDowns', 'get'],
/**
* 获取所有字典，启动时加入缓存使用
* 获取所有字典树
*/
sysDictTypeTree: ['/sysDictType/tree', 'get'],
}

14
Web/src/components/yoModalForm/index.js
View File

@@ -122,19 +122,23 @@ export default {
&& this.body.onGetData
&& this.body.onGetData()
.then((data) => {
this.confirmLoading = true
this.action
&& this.action(data)
if (this.action) {
this.confirmLoading = true
this.action(data)
.then(({ success }) => {
if (success) {
this.$message.success(this.successMessage || '保存成功');
this.$message.success(this.successMessage || '保存成功')
this.onClose();
this.$emit('ok');
this.$emit('ok', data)
}
})
.finally(() => {
this.confirmLoading = false
})
} else {
this.onClose()
this.$emit('ok', data)
}
}).catch(() => { })
}
},

4
Web/src/components/yoTable/index.js
View File

@@ -174,6 +174,10 @@ export default {
this.data.splice(this.data.indexOf(row), 1)
}
},
getData() {
return this.data
},
},
render() {

10
Web/src/pages/business/house/houseCode/form/index.vue
View File

@@ -101,7 +101,15 @@ export default {
.then(({ success }) => {
if (success) {
this.$message.success('保存成功');
this.closeContentWindow();
this.$confirm({
content: '已添加成功，是否继续添加？',
onOk() {
console.log('OK');
},
onCancel: () => {
this.closeContentWindow();
},
});
}
})
.finally(() => {

25
Web/src/pages/business/house/houseCode/form/part.vue
View File

@@ -46,6 +46,7 @@
:field-names="{ label: 'name', value: 'code', children: 'children' }"
:options="options.areaTree"
@change="onAreaCodeChange"
expand-trigger="hover"
placeholder="请选择所在区域"
v-model="form.areaCode"
/>
@@ -407,30 +408,40 @@ export default {
this.getProjects();
},
getProjects() {
async getProjects() {
if (this.form.projectId) {
this.form.projectId = undefined;
}
if (this.form.areaCode && this.form.areaCode.length === 4) {
this.loading = true;
this.$api
const projects = await this.$api
.houseProjectList({
areaCode: this.form.areaCode[3],
type: this.form.type,
})
.then(({ data }) => {
this.options.projects = data;
})
.finally(() => {
this.loading = false;
return data;
});
this.options.projects = projects;
this.loading = false;
}
},
/**
* 切换项目
*/
onProjectChange() {},
async onProjectChange() {
this.loading = true;
const no = await this.$api
.houseCodeNo({
projectId: this.form.projectId,
})
.then(({ data }) => {
return data;
});
this.$set(this.form, 'no', no);
this.loading = false;
},
},
};
</script>

230
Web/src/pages/business/house/houseCode/index.vue
View File

@@ -1,10 +1,222 @@
<template>
<div>
<a-button
@click="openContentWindow({
title: '编码表单',
path: 'business/house/houseCode/form',
});"
>打开表单</a-button>
</div>
</template>
<!--
普通查询表格
v 1.2
2021-04-30
Lufthafen
-->
<container>
<br />
<a-card :bordered="false">
<yo-table
:columns="columns"
:load-data="loadData"
@query="onQuery"
@resetQuery="onResetQuery"
ref="table"
>
<Auth auth="authCode:page" slot="query">
<!-- 此处添加查询表单控件 -->
<!-- ... -->
</Auth>
<Auth auth="authCode:add" slot="operator">
<a-button
@click="openContentWindow({
title: '编码表单',
path: 'business/house/houseCode/form',
})"
icon="plus"
>新增编码</a-button>
</Auth>
<!-- 格式化字段内容 -->
<!-- ... -->
<!-- 添加操作控件 -->
<span slot="action" slot-scope="text, record">
<yo-table-actions>
<Auth auth="authCode:edit">
<a @click="onOpen('edit-form', record)">编辑</a>
</Auth>
<Auth auth="authCode:delete">
<a-popconfirm @confirm="onDelete(record)" placement="topRight" title="是否确认删除">
<a>删除</a>
</a-popconfirm>
</Auth>
<!-- 可在此处添加其他操作控件 -->
<!-- ... -->
</yo-table-actions>
</span>
</yo-table>
</a-card>
<!-- 新增表单 -->
<yo-modal-form :action="$api[api.add]" :title="'新增' + name" @ok="onReloadData" ref="add-form">
<form-body />
</yo-modal-form>
<!-- 编辑表单 -->
<yo-modal-form :action="$api[api.edit]" :title="'编辑' + name" @ok="onReloadData" ref="edit-form">
<form-body />
</yo-modal-form>
</container>
</template>
<script>
import FormBody from './form';
/* 在此管理整个页面需要的接口名称 */
const api = {
page: 'houseCodePage',
add: 'testAddApi',
edit: 'testEditApi',
delete: 'testDeleteApi...',
/* ... */
};
export default {
components: {
FormBody,
},
data() {
return {
api,
name: '...',
/* 查询条件 */
query: {},
/* 表格字段 */
columns: [],
/* 字典编码储存格式 */
codes: {
code1: [],
code2: [],
},
};
},
created() {
/** 按需加载字典编码 */
this.onLoadCodes();
/** 根据权限添加操作列 */
const flag = this.$auth(/* ... */);
if (flag) {
this.columns.push({
title: '操作',
width: '150px',
dataIndex: 'action',
scopedSlots: { customRender: 'action' },
});
}
},
methods: {
/**
* 必要的方法
* 传给yo-table以示意数据接口及其参数和返回的数据结构
*/
loadData(params) {
return this.$api[api.page]({
...params,
...this.query,
}).then((res) => {
return res.data;
});
},
/**
* 有查询功能时的必要方法
* 加载数据时初始化分页信息
*/
onQuery() {
this.$refs.table.onReloadData(true);
},
/**
* 有查询功能时的必要方法
* 重置查询条件
*/
onResetQuery() {
/** 在这里重置查询条件时,可对特殊的字段做保留处理 */
this.query = {};
this.onQuery();
},
/**
* 必要方法
* 重新列表数据
*/
onReloadData() {
this.$refs.table.onReloadData();
},
/**
* 必要方法
* 加载字典数据
* 如果不需要获取相应的字典数据,此方法内容可空
*/
onLoadCodes() {
this.$api
.$queue([
this.$api.sysDictTypeDropDownAwait({ code: 'code1' }),
this.$api.sysDictTypeDropDownAwait({ code: 'code2' }),
/* ... */
])
.then(([code1, code2]) => {
this.codes.code1 = code1.data;
this.codes.code2 = code2.data;
/* ... */
});
},
/**
* 必要方法
* 绑定数据字典值
*/
bindCodeValue(code, name) {
const c = this.codes[name].find((p) => p.code == code);
if (c) {
return c.value;
}
return null;
},
/**
* 必要方法
* 从列表页调用窗口的打开方法
*/
onOpen(formName, record) {
this.$refs[formName].onOpen({
record,
/* 按需添加其他参数 */
/* ... */
});
},
/**
* 必要方法
* 可以用做一系列操作的公共回调,此方法中会重新加载当前列表
*/
onResult(success, successMessage) {
if (success) {
this.$message.success(successMessage);
this.onReloadData();
}
},
/**
* 必要方法
* 删除时调用
*/
onDelete(record) {
this.$refs.table.onLoading();
this.$api[api.delete](record)
.then(({ success }) => {
this.onResult(success, '删除成功');
})
.finally(() => {
this.$refs.table.onLoaded();
});
},
},
};
</script>

232
Web/src/pages/system/dict/_index.vue Normal file
View File

@@ -0,0 +1,232 @@
<template>
<container>
<br />
<a-card :bordered="false">
<yo-table
:columns="columns"
:load-data="loadData"
@query="onQuery"
@resetQuery="onResetQuery"
ref="table"
>
<Auth auth="sysDictType:page" slot="query">
<a-form-model-item label="类型名称">
<a-input placeholder="请输入类型名称" v-model="query.name" />
</a-form-model-item>
<a-form-model-item label="唯一编码">
<a-input placeholder="请输入唯一编码" v-model="query.code" />
</a-form-model-item>
</Auth>
<Auth auth="sysDictType:add" slot="operator">
<a-button @click="onOpen('add-form')" icon="plus">新增字典类型</a-button>
</Auth>
<!-- 格式化字段内容 -->
<span slot="status" slot-scope="text">{{ bindCodeValue(text, 'commonStatus') }}</span>
<!-- 添加操作控件 -->
<span slot="action" slot-scope="text, record">
<yo-table-actions>
<Auth auth="sysDictType:edit">
<a @click="onOpen('edit-form', record)">编辑</a>
</Auth>
<Auth auth="sysDictType:delete">
<a-popconfirm @confirm="onDelete(record)" placement="topRight" title="是否确认删除">
<a>删除</a>
</a-popconfirm>
</Auth>
<!-- 可在此处添加其他操作控件 -->
</yo-table-actions>
</span>
<div slot="expandedRowRender" slot-scope="record">
<dict-data :codes="codes" :type="record" />
</div>
</yo-table>
</a-card>
<br />
<yo-modal-form :action="$api.sysDictTypeAdd" @ok="onReloadData" ref="add-form" title="新增字典类型">
<form-body />
</yo-modal-form>
<yo-modal-form :action="$api.sysDictTypeEdit" @ok="onReloadData" ref="edit-form" title="编辑字典类型">
<form-body />
</yo-modal-form>
</container>
</template>
<script>
import DictData from './dictdata';
import FormBody from './form';
export default {
components: {
DictData,
FormBody,
},
data() {
return {
query: {},
columns: [
{
title: '类型名称',
dataIndex: 'name',
sorter: true,
},
{
title: '唯一编码',
dataIndex: 'code',
sorter: true,
},
{
title: '排序',
dataIndex: 'sort',
sorter: true,
},
{
title: '备注',
dataIndex: 'remark',
width: 200,
sorter: true,
},
{
title: '状态',
dataIndex: 'status',
scopedSlots: { customRender: 'status' },
sorter: true,
},
],
codes: {
commonStatus: [],
},
};
},
created() {
this.onLoadCodes();
/** 根据权限添加操作列 */
const flag = this.$auth({ sysDictType: [['edit'], ['delete']] });
if (flag) {
this.columns.push({
title: '操作',
width: '150px',
dataIndex: 'action',
scopedSlots: { customRender: 'action' },
});
}
},
methods: {
/**
* 必要的方法
* 传给yo-table以示意数据接口及其参数和返回的数据结构
*/
loadData(params) {
return (
this.$api
/** !!此处必须修改调用的接口方法 */
.sysDictTypePage({
...params,
...this.query,
})
.then((res) => {
const data = res.data;
data.rows = data.rows.map(
(p) =>
(p = {
...p,
data: [],
query: {},
})
);
return data;
})
);
},
/**
* 有查询功能时的必要方法
* 加载数据时初始化分页信息
*/
onQuery() {
this.$refs.table.onReloadData(true);
},
/**
* 有查询功能时的必要方法
* 重置查询条件
*/
onResetQuery() {
/** 在这里重置查询条件时,可对特殊的字段做保留处理 */
this.query = {};
this.onQuery();
},
/**
* 必要方法
* 重新列表数据
*/
onReloadData() {
this.$refs.table.onReloadData();
},
/**
* 必要方法
* 加载字典数据
* 如果不需要获取相应的字典数据,此方法内容可空
*/
onLoadCodes() {
this.$api.$queue([this.$api.sysDictTypeDropDownAwait({ code: 'common_status' })]).then(([commonStatus]) => {
this.codes.commonStatus = commonStatus.data;
});
},
/**
* 必要方法
* 绑定数据字典值
*/
bindCodeValue(code, name) {
const c = this.codes[name].find((p) => p.code == code);
if (c) {
return c.value;
}
return null;
},
/**
* 必要方法
* 从列表页调用窗口的打开方法
*/
onOpen(formName, record) {
this.$refs[formName].onOpen({
record,
});
},
/**
* 必要方法
* 可以用做一系列操作的公共回调,此方法中会重新加载当前列表
*/
onResult(success, successMessage) {
if (success) {
this.$message.success(successMessage);
this.onReloadData();
}
},
/**
* 必要方法
* 删除时调用
*/
onDelete(record) {
this.$refs.table.onLoading();
this.$api
/** !!此处必须修改调用的接口方法 */
.sysDictTypeDelete(record)
.then(({ success }) => {
this.onResult(success, '删除成功');
})
.finally(() => {
this.$refs.table.onLoaded();
});
},
},
};
</script>

140
Web/src/pages/system/dict/dictdata/form.vue Normal file
View File

@@ -0,0 +1,140 @@
<template>
<!--
普通编辑窗体
v 1.2
2021-04-30
Lufthafen
-->
<a-form-model :model="form" :rules="rules" class="yo-form" ref="form">
<a-spin :spinning="loading">
<a-icon slot="indicator" spin type="loading" />
<div class="yo-form-group">
<!-- 表单控件 -->
<!-- ... -->
<div :style="{ height: '300px' }" ref="code"></div>
</div>
</a-spin>
</a-form-model>
</template>
<script>
import * as monaco from 'monaco-editor';
/* 表单内容默认值 */
const defaultForm = {
/* ... */
};
export default {
data() {
return {
/** 表单数据 */
form: {},
/** 验证格式 */
rules: {
/* ... */
},
/** 加载异步数据状态 */
loading: false,
/** 其他成员属性 */
/* ... */
};
},
mounted() {
this.editor = monaco.editor.create(this.$refs['code'], {
language: 'json',
fontSize: 12,
});
},
methods: {
/**
* 必要的方法
* 在打开编辑页时允许填充数据
*/
onFillData(params) {
/** 将默认数据覆盖到form */
this.form = this.$_.cloneDeep({
...defaultForm,
...params.record,
/** 在此处添加其他默认数据转换 */
/* ... */
});
this.editor.setValue(this.form.extCode);
setTimeout(() => {
this.editor.getAction(['editor.action.formatDocument'])._run();
});
},
/**
* 必要方法
* 验证表单并获取表单数据
*/
onGetData() {
return new Promise((reslove, reject) => {
this.$refs.form.validate((valid) => {
if (valid) {
const record = this.$_.cloneDeep(this.form);
/** 验证通过后可以对数据进行转换得到想要提交的格式 */
/* ... */
try {
const code = JSON.parse(this.editor.getValue());
if (code.constructor === Object) {
record.extCode = JSON.stringify(code);
} else {
throw 0;
}
reslove(record);
} catch {
this.$message.error('错误的JSON格式');
reject();
}
} else {
reject();
}
});
});
},
/**
* 必要的方法
* 在外部窗口进行保存时调用表单验证
*/
onValidate(callback) {
this.$refs.form.validate(callback);
},
/**
* 必要的方法
* 在外部窗口关闭或重置时对表单验证进行初始化
*/
onResetFields() {
setTimeout(() => {
this.$refs.form.resetFields();
/** 在这里可以初始化当前组件中其他属性 */
/* ... */
}, 300);
},
/**
* 必要方法
* 加载当前表单中所需要的异步数据
*/
async onInit(params) {
this.loading = true;
/** 可以在这里await获取一些异步数据 */
/* ... */
this.loading = false;
},
/** 当前组件的其他方法 */
/* ... */
},
};
</script>

50
Web/src/pages/system/dict/dictdata/index.vue
View File

@@ -4,6 +4,7 @@
:bordered="false"
:columns="columns"
:load-data="loadData"
:row-selection="{ selectedRowKeys: selectedRowKeys, onChange: (e) => selectedRowKeys = e }"
@query="onQuery"
@resetQuery="onResetQuery"
ref="table"
@@ -18,6 +19,16 @@
<a-input placeholder="请输入字典值" v-model="query.code" />
</a-form-model-item>
</Auth>
<Auth auth="sysDictData:delete" slot="operator">
<a-popconfirm
:disabled="!selectedRowKeys.length"
@confirm="onDeleteBatch"
placement="bottomLeft"
title="是否确认删除"
>
<a-button :disabled="!selectedRowKeys.length">批量删除</a-button>
</a-popconfirm>
</Auth>
<Auth auth="sysDictData:add" slot="footer">
<a-button @click="onAddRow" block icon="plus">新增字典数据</a-button>
</Auth>
@@ -29,7 +40,7 @@
<a-input placeholder="请输入字典值" v-model="record.code" />
</Auth>
<Auth auth="sysDictData:edit" slot="extCode" slot-scope="text, record">
<a-input placeholder="请输入扩展值" v-model="record.extCode" />
<a @click="onOpen('ext-code-form', record)">编辑</a>
</Auth>
<Auth auth="sysDictData:edit" slot="sort" slot-scope="text, record">
<a-input-number
@@ -68,20 +79,31 @@
</yo-table-actions>
</span>
</yo-table>
<yo-modal-form :title="'编辑'" @ok="onSaveExtCode" ref="ext-code-form">
<form-body />
</yo-modal-form>
</a-card>
</template>
<style scoped>
.ant-card >>> .ant-table-footer {
background-color: transparent;
.ant-card>>>.ant-table-footer {
border-width: 1px 0 0 !important;
background-color: transparent;
}
.ant-card >>> .yo-table .ant-table-content .ant-table-body > table > .ant-table-thead > tr > th:last-child,
.ant-card >>> .yo-table .ant-table-content .ant-table-body > table > .ant-table-tbody > tr > td:last-child {
.ant-card>>>.yo-table .ant-table-content .ant-table-body>table>.ant-table-thead>tr>th:last-child,
.ant-card>>>.yo-table .ant-table-content .ant-table-body>table>.ant-table-tbody>tr>td:last-child {
border-right-width: 0 !important;
}
</style>
<script>
import FormBody from './form';
export default {
components: {
FormBody,
},
props: {
type: {
type: Object,
@@ -114,9 +136,9 @@ export default {
{
title: '扩展值',
dataIndex: 'extCode',
sorter: true,
scopedSlots: { customRender: 'extCode' },
width: '15%',
width: 100,
align: 'center',
},
{
title: '排序',
@@ -139,6 +161,8 @@ export default {
width: 80,
},
],
selectedRowKeys: [],
};
},
created() {
@@ -260,6 +284,13 @@ export default {
});
},
onDeleteBatch() {
this.$refs.table.onLoading();
this.$api.sysDictDataDeleteBatch(this.selectedRowKeys).then(({ success }) => {
this.onResult(success, '删除成功');
});
},
onAddRow() {
this.$refs.table.onAddRow({
value: '',
@@ -305,6 +336,11 @@ export default {
});
}
},
onSaveExtCode(record) {
const data = this.$refs.table.getData().find((p) => p.id === record.id);
data.extCode = record.extCode;
},
},
};
</script>

51
Web/src/pages/system/dict/form.vue
View File

@@ -7,7 +7,22 @@
<a-form-model-item label="类型名称" prop="name">
<a-input placeholder="请输入类型名称" v-model="form.name" />
</a-form-model-item>
<a-form-model-item label="唯一编码" prop="code">
<a-form-model-item label="类型" prop="type">
<a-radio-group v-model="form.type">
<a-radio-button :value="1">目录</a-radio-button>
<a-radio-button :value="2">字典类型</a-radio-button>
</a-radio-group>
</a-form-model-item>
<a-form-model-item label="父结点" prop="pid">
<a-tree-select
:dropdown-style="{ maxHeight: '300px', overflow: 'auto' }"
:tree-data="dicTree"
placeholder="请选择父结点"
tree-default-expand-all
v-model="form.pid"
/>
</a-form-model-item>
<a-form-model-item label="唯一编码" prop="code" v-if="form.type == 2">
<a-input placeholder="请输入唯一编码" v-model="form.code" />
</a-form-model-item>
<a-form-model-item label="排序" prop="sort">
@@ -21,16 +36,23 @@
</a-form-model>
</template>
<script>
import { EMPTY_ID } from '@/util/global';
const defaultForm = {
type: 1,
sort: 100,
};
export default {
data() {
return {
/** 表单数据 */
form: {
sort: 100,
},
form: {},
/** 验证格式 */
rules: {
name: [{ required: true, message: '请输入类型名称' }],
type: [{ required: true, message: '请选择需要添加的数据类型' }],
pid: [{ required: true, message: '请选择父结点' }],
code: [{ required: true, message: '请输入唯一编码' }],
},
@@ -39,6 +61,7 @@ export default {
/** 其他成员属性 */
/** ... */
dicTree: [],
};
},
@@ -48,11 +71,16 @@ export default {
* 在打开编辑页时允许填充数据
*/
onFillData(params) {
let type = defaultForm.type;
if (params.record && params.record.code) type = 2;
/** 将默认数据覆盖到form */
this.form = this.$_.cloneDeep({
...defaultForm,
pid: params.pid,
...params.record,
/** 在此处添加默认数据转换 */
/** ... */
type,
});
},
@@ -106,12 +134,27 @@ export default {
this.loading = true;
/** 可以在这里await获取一些异步数据 */
/** ...BEGIN */
await this.onLoadDicTreeData();
/** ...END */
this.loading = false;
},
/** 当前组件的其他方法 */
/** ... */
onLoadDicTreeData() {
return this.$api.sysDictTypeTree().then(({ data }) => {
this.dicTree = [
{
id: EMPTY_ID,
parentId: undefined,
title: '顶级',
value: EMPTY_ID,
pid: undefined,
children: data,
},
];
});
},
},
};
</script>

250
Web/src/pages/system/dict/index.vue
View File

@@ -1,76 +1,134 @@
<template>
<container>
<br />
<a-card :bordered="false">
<yo-table
:columns="columns"
:load-data="loadData"
@query="onQuery"
@resetQuery="onResetQuery"
ref="table"
>
<Auth auth="sysDictType:page" slot="query">
<a-form-model-item label="类型名称">
<a-input placeholder="请输入类型名称" v-model="query.name" />
</a-form-model-item>
<a-form-model-item label="唯一编码">
<a-input placeholder="请输入唯一编码" v-model="query.code" />
</a-form-model-item>
</Auth>
<Auth auth="sysDictType:add" slot="operator">
<a-button @click="onOpen('add-form')" icon="plus">新增字典类型</a-button>
</Auth>
<!-- 格式化字段内容 -->
<span slot="status" slot-scope="text">{{ bindCodeValue(text, 'commonStatus') }}</span>
<!-- 添加操作控件 -->
<span slot="action" slot-scope="text, record">
<yo-table-actions>
<Auth auth="sysDictType:edit">
<a @click="onOpen('edit-form', record)">编辑</a>
</Auth>
<Auth auth="sysDictType:delete">
<a-popconfirm @confirm="onDelete(record)" placement="topRight" title="是否确认删除">
<a>删除</a>
</a-popconfirm>
</Auth>
<!-- 可在此处添加其他操作控件 -->
</yo-table-actions>
</span>
<div slot="expandedRowRender" slot-scope="record">
<dict-data :codes="codes" :type="record" />
</div>
</yo-table>
</a-card>
<br />
<!--
普通树查询表格
v 1.2
2021-04-30
Lufthafen
-->
<yo-tree-layout
:load-data="loadTreeData"
@select="onSelect"
default-expanded-keys
ref="tree-layout"
>
<container>
<a-card :bordered="false">
<yo-table
:columns="columns"
:load-data="loadData"
@query="onQuery"
@resetQuery="onResetQuery"
ref="table"
>
<Auth auth="authCode:page" slot="query">
<!-- 此处添加查询表单控件 -->
<!-- ... -->
<a-form-model-item label="类型名称">
<a-input placeholder="请输入类型名称" v-model="query.name" />
</a-form-model-item>
<a-form-model-item label="唯一编码">
<a-input placeholder="请输入唯一编码" v-model="query.code" />
</a-form-model-item>
<a-form-model-item label="类型">
<a-radio-group v-model="query.type">
<a-radio-button :value="1">目录</a-radio-button>
<a-radio-button :value="2">字典类型</a-radio-button>
</a-radio-group>
</a-form-model-item>
</Auth>
<Auth auth="authCode:add" slot="operator">
<a-button @click="onOpen('add-form')" icon="plus">新增目录/字典类型</a-button>
</Auth>
<!-- 格式化字段内容 -->
<!-- ... -->
<span slot="code" slot-scope="text">
<span>{{ text ? '字典类型' : '目录' }}</span>
</span>
<span slot="status" slot-scope="text">{{ bindCodeValue(text, 'commonStatus') }}</span>
<!-- 添加操作控件 -->
<span slot="action" slot-scope="text, record">
<yo-table-actions>
<Auth auth="authCode:edit">
<a @click="onOpen('edit-form', record)">编辑</a>
</Auth>
<Auth auth="authCode:delete">
<a-popconfirm @confirm="onDelete(record)" placement="topRight" title="是否确认删除">
<a>删除</a>
</a-popconfirm>
</Auth>
<!-- 可在此处添加其他操作控件 -->
<!-- ... -->
</yo-table-actions>
</span>
<yo-modal-form :action="$api.sysDictTypeAdd" @ok="onReloadData" ref="add-form" title="新增字典类型">
<div slot="expandedRowRender" slot-scope="record">
<dict-data :codes="codes" :type="record" v-if="record.code" />
<span class="text-normal" v-else>不可在目录中添加字典数据</span>
</div>
</yo-table>
</a-card>
</container>
<!-- 新增表单 -->
<yo-modal-form :action="$api[api.add]" :title="'新增' + name" @ok="onReloadData" ref="add-form">
<form-body />
</yo-modal-form>
<yo-modal-form :action="$api.sysDictTypeEdit" @ok="onReloadData" ref="edit-form" title="编辑字典类型">
<!-- 编辑表单 -->
<yo-modal-form :action="$api[api.edit]" :title="'编辑' + name" @ok="onReloadData" ref="edit-form">
<form-body />
</yo-modal-form>
</container>
</yo-tree-layout>
</template>
<script>
/* 需要引用YoTreeLayout组件 */
import YoTreeLayout from '@/components/yoTreeLayout';
import FormBody from './form';
import DictData from './dictdata';
import FormBody from './form';
/* 在此管理整个页面需要的接口名称 */
const api = {
tree: 'sysDictTypeTree',
page: 'sysDictTypePage',
add: 'sysDictTypeAdd',
edit: 'sysDictTypeEdit',
delete: 'sysDictTypeDelete',
/* ... */
};
export default {
components: {
DictData,
YoTreeLayout,
FormBody,
DictData,
},
data() {
return {
query: {},
api,
name: '...',
/* 查询条件 */
query: {
type: 2,
},
/* 表格字段 */
columns: [
{
title: '类型名称',
title: '字典名称',
dataIndex: 'name',
sorter: true,
},
{
title: '类型',
key: 'type',
dataIndex: 'code',
sorter: true,
scopedSlots: { customRender: 'code' },
},
{
title: '唯一编码',
dataIndex: 'code',
@@ -94,16 +152,19 @@ export default {
sorter: true,
},
],
/* 字典编码储存格式 */
codes: {
commonStatus: [],
},
};
},
created() {
this.onLoadCodes();
/** 根据权限添加操作列 */
const flag = this.$auth({ sysDictType: [['edit'], ['delete']] });
const flag = this.$auth(/* ... */);
if (flag) {
this.columns.push({
title: '操作',
@@ -113,32 +174,42 @@ export default {
});
}
},
methods: {
/**
* 树形选择界面必要的方法
* 传给yo-table-layout以示意数据接口
*/
loadTreeData() {
return this.$api[api.tree]().then((res) => {
return res.data;
});
},
/**
* 树形选择界面必要的方法
* 选择树节点事件
*/
onSelect([id]) {
/** 在选择事件中可以对右侧表格添加父节点id的查询条件 */
this.query = {
pid: id,
type: this.query.type,
};
this.onQuery();
},
/**
* 必要的方法
* 传给yo-table以示意数据接口及其参数和返回的数据结构
*/
loadData(params) {
return (
this.$api
/** !!此处必须修改调用的接口方法 */
.sysDictTypePage({
...params,
...this.query,
})
.then((res) => {
const data = res.data;
data.rows = data.rows.map(
(p) =>
(p = {
...p,
data: [],
query: {},
})
);
return data;
})
);
return this.$api[api.page]({
...params,
...this.query,
}).then((res) => {
return res.data;
});
},
/**
@@ -150,12 +221,19 @@ export default {
},
/**
* 有查询功能时的必要方法
* 重置查询条件
* 必要方法
* 重新列表数据
*/
onResetQuery() {
/** 在这里重置查询条件时,可对特殊的字段做保留处理 */
this.query = {};
/* 与普通查询页不同的是,这里的父节点参数不应该在重置后被清空 */
Object.keys(this.query).forEach((p) => {
if (p !== 'pid') {
this.query[p] = undefined;
}
if (p === 'type') {
this.query.type = 2;
}
});
this.onQuery();
},
@@ -165,6 +243,7 @@ export default {
*/
onReloadData() {
this.$refs.table.onReloadData();
this.$refs['tree-layout'].onReloadData();
},
/**
@@ -173,9 +252,15 @@ export default {
* 如果不需要获取相应的字典数据,此方法内容可空
*/
onLoadCodes() {
this.$api.$queue([this.$api.sysDictTypeDropDownAwait({ code: 'common_status' })]).then(([commonStatus]) => {
this.codes.commonStatus = commonStatus.data;
});
this.$api
.$queue([
this.$api.sysDictTypeDropDownAwait({ code: 'common_status' }),
/* ... */
])
.then(([common_status]) => {
this.codes.commonStatus = common_status.data;
/* ... */
});
},
/**
@@ -191,12 +276,15 @@ export default {
},
/**
* 必要方法
* 有编辑新增功能的必要方法
* 从列表页调用窗口的打开方法
*/
onOpen(formName, record) {
this.$refs[formName].onOpen({
record,
pid: this.query.pid,
/* 按需添加其他参数 */
/* ... */
});
},
@@ -217,9 +305,7 @@ export default {
*/
onDelete(record) {
this.$refs.table.onLoading();
this.$api
/** !!此处必须修改调用的接口方法 */
.sysDictTypeDelete(record)
this.$api[api.delete](record)
.then(({ success }) => {
this.onResult(success, '删除成功');
})

16
Web/src/views/main/_layout/content.vue
View File

@@ -117,14 +117,14 @@ export default {
const i = import(`@/pages${pane.path}`);
pane.component = () => i;
pane.loaded = false;
i.then(() => {
pane.loaded = true;
NProgress.done();
}).catch(() => {
pane.component = () => import('@/views/error/404');
pane.loaded = true;
NProgress.done();
});
i.then(() => {})
.catch(() => {
pane.component = () => import('@/views/error/404');
})
.finally(() => {
pane.loaded = true;
NProgress.done();
});
},
onClose(targetKey, action) {
if (action === 'remove') {