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

update 区域管理使用新种子

Browse Source
This commit is contained in:
自带大佬气场
2021-05-06 13:25:34 +08:00
parent e519f1344e
commit 5bfc9f3f3f
4 changed files with 121 additions and 211 deletions
Download Patch File Download Diff File Expand all files Collapse all files

72
Web/src/pages/system/area/addForm.vue
View File

@@ -1,72 +0,0 @@
<template>
<a-modal :confirmLoading="confirmLoading" :visible="visible" @cancel="onCancel" @ok="onOk" class="yo-modal-form" title="新增区域编码">
<FormBody ref="form-body" />
</a-modal>
</template>
<script>
import FormBody from './form';
export default {
components: {
FormBody,
},
data() {
return {
visible: false,
confirmLoading: false,
};
},
computed: {
formBody() {
return this.$refs['form-body'];
},
},
methods: {
/**
* 必要的方法
* 从外部调用打开本窗口
*/
async onOpen() {
this.visible = true;
this.$nextTick(() => {
this.formBody.onInit();
});
},
/**
* 必要的方法
* 点击保存时的操作
*/
onOk() {
this.formBody.onGetData().then((data) => {
this.confirmLoading = true;
this.$api
/** !!此处必须修改调用的接口方法 */
.sysAreaAdd(data)
.then(({ success }) => {
if (success) {
this.$message.success('新增成功');
this.onCancel();
this.$emit('ok');
}
})
.finally(() => {
this.confirmLoading = false;
});
});
},
/**
* 必要的方法
* 关闭窗口时的操作
*/
onCancel() {
this.formBody.onResetFields();
this.visible = false;
},
},
};
</script>

73
Web/src/pages/system/area/editForm.vue
View File

@@ -1,73 +0,0 @@
<template>
<a-modal :confirmLoading="confirmLoading" :visible="visible" @cancel="onCancel" @ok="onOk" class="yo-modal-form" title="编辑区域编码">
<FormBody ref="form-body" />
</a-modal>
</template>
<script>
import FormBody from './form';
export default {
components: {
FormBody,
},
data() {
return {
visible: false,
confirmLoading: false,
};
},
computed: {
formBody() {
return this.$refs['form-body'];
},
},
methods: {
/**
* 必要的方法
* 从外部调用打开本窗口,并填充外部传入的数据
*/
onOpen(record) {
this.visible = true;
this.$nextTick(async () => {
await this.formBody.onInit();
this.formBody.onFillData(record);
});
},
/**
* 必要的方法
* 点击保存时的操作
*/
onOk() {
this.formBody.onGetData().then((data) => {
this.confirmLoading = true;
this.$api
/** !!此处必须修改调用的接口方法 */
.sysAreaEdit(data)
.then(({ success }) => {
if (success) {
this.$message.success('编辑成功');
this.onCancel();
this.$emit('ok');
}
})
.finally(() => {
this.confirmLoading = false;
});
});
},
/**
* 必要的方法
* 关闭窗口时的操作
*/
onCancel() {
this.formBody.onResetFields();
this.visible = false;
},
},
};
</script>

64
Web/src/pages/system/area/form.vue
View File

@@ -1,53 +1,78 @@
<template> <template>
<!--
普通编辑窗体
v 1.2
2021-04-30
Lufthafen
-->
<a-form-model :model="form" :rules="rules" class="yo-form" ref="form"> <a-form-model :model="form" :rules="rules" class="yo-form" ref="form">
<a-spin :spinning="loading"> <a-spin :spinning="loading">
<a-icon slot="indicator" spin type="loading" /> <a-icon slot="indicator" spin type="loading" />
<div class="yo-form-group"> <div class="yo-form-group">
<!-- 表单控件 --> <!-- 表单控件 -->
<!-- ... -->
<a-form-model-item label="参数类型" prop="levelType"> <a-form-model-item label="参数类型" prop="levelType">
<a-select placeholder="请选择参数类型" v-model="form.levelType" :disabled="editDisabled"> <a-select :disabled="editDisabled" placeholder="请选择参数类型" v-model="form.levelType">
<a-select-option :key="i" :value="item.code" v-for="(item, i) in levelType">{{ item.value }}</a-select-option> <a-select-option
:key="i"
:value="item.code"
v-for="(item, i) in levelType"
>{{ item.value }}</a-select-option>
</a-select> </a-select>
</a-form-model-item> </a-form-model-item>
<a-form-model-item label="名称" prop="name"> <a-form-model-item label="名称" prop="name">
<a-input placeholder="请输入区域名称" v-model="form.name" /> <a-input placeholder="请输入区域名称" v-model="form.name" />
</a-form-model-item> </a-form-model-item>
<a-form-model-item label="编码" prop="code" > <a-form-model-item label="编码" prop="code">
<a-input placeholder="请输入参数编码" :disabled="exist" v-model="form.code" /> <a-input :disabled="exist" placeholder="请输入参数编码" v-model="form.code" />
</a-form-model-item> </a-form-model-item>
<a-form-model-item label="区域编码" prop="adCode"> <a-form-model-item label="区域编码" prop="adCode">
<a-input placeholder="请输入显示编码" v-model="form.adCode" /> <a-input placeholder="请输入显示编码" v-model="form.adCode" />
</a-form-model-item> </a-form-model-item>
<a-form-model-item label="排序" prop="sort"> <a-form-model-item label="排序" prop="sort">
<a-input-number :max="1000" :min="0" class="w-100-p" placeholder="请输入排序" v-model="form.sort" /> <a-input-number
:max="1000"
:min="0"
class="w-100-p"
placeholder="请输入排序"
v-model="form.sort"
/>
</a-form-model-item> </a-form-model-item>
<a-form-model-item label="备注" prop="note"> <a-form-model-item label="备注" prop="note">
<a-textarea v-model="form.note" :rows="4" placeholder="请输入备注"></a-textarea> <a-textarea :rows="4" placeholder="请输入备注" v-model="form.note"></a-textarea>
</a-form-model-item> </a-form-model-item>
</div> </div>
</a-spin> </a-spin>
</a-form-model> </a-form-model>
</template> </template>
<script> <script>
/* 表单内容默认值 */
const defaultForm = {
/* ... */
};
export default { export default {
data() { data() {
return { return {
/** 表单数据 */ /** 表单数据 */
form: {}, form: {},
exist:false,
/** 验证格式 */ /** 验证格式 */
rules: { rules: {
/* ... */
levelType: [{ required: true, message: '请选择参数类型' }], levelType: [{ required: true, message: '请选择参数类型' }],
name: [{ required: true, message: '请输入参数名称' }], name: [{ required: true, message: '请输入参数名称' }],
adCode: [{ required: true, message: '请输入参数编码' }], adCode: [{ required: true, message: '请输入参数编码' }],
code: [{ required: true, message: '请输入显示编码' }], code: [{ required: true, message: '请输入显示编码' }],
}, },
/** 加载异步数据状态 */ /** 加载异步数据状态 */
loading: false, loading: false,
/** 其他成员属性 */ /** 其他成员属性 */
/* ... */
exist: false,
levelType: [], levelType: [],
editDisabled: false, editDisabled: false,
/** ... */
}; };
}, },
@@ -56,14 +81,14 @@ export default {
* 必要的方法 * 必要的方法
* 在打开编辑页时允许填充数据 * 在打开编辑页时允许填充数据
*/ */
onFillData(record) { onFillData(params) {
this.exist = true;
/** 将默认数据覆盖到form */ /** 将默认数据覆盖到form */
this.form = this.$_.cloneDeep({ this.form = this.$_.cloneDeep({
...record, ...defaultForm,
/** 在此处添加默认数据转换 */ ...params.record,
/** ... */ /** 在此处添加其他默认数据转换 */
levelType: record.levelType.toString(), /* ... */
levelType: params.record && params.record.levelType.toString(),
}); });
}, },
@@ -78,7 +103,7 @@ export default {
const record = this.$_.cloneDeep(this.form); const record = this.$_.cloneDeep(this.form);
/** 验证通过后可以对数据进行转换得到想要提交的格式 */ /** 验证通过后可以对数据进行转换得到想要提交的格式 */
/** ... */ /* ... */
reslove(record); reslove(record);
} else { } else {
@@ -105,7 +130,7 @@ export default {
this.$refs.form.resetFields(); this.$refs.form.resetFields();
/** 在这里可以初始化当前组件中其他属性 */ /** 在这里可以初始化当前组件中其他属性 */
/** ... */ /* ... */
}, 300); }, 300);
}, },
@@ -113,22 +138,21 @@ export default {
* 必要方法 * 必要方法
* 加载当前表单中所需要的异步数据 * 加载当前表单中所需要的异步数据
*/ */
async onInit() { async onInit(params) {
this.loading = true; this.loading = true;
/** 可以在这里await获取一些异步数据 */ /** 可以在这里await获取一些异步数据 */
/** ...BEGIN */ /* ... */
this.levelType = await this.onLoadlevelTypeData(); this.levelType = await this.onLoadlevelTypeData();
/** ...END */
this.loading = false; this.loading = false;
}, },
/** 当前组件的其他方法 */ /** 当前组件的其他方法 */
/* ... */
onLoadlevelTypeData() { onLoadlevelTypeData() {
return this.$api.sysDictTypeDropDown({ code: 'dic_areacode_type' }).then(({ data }) => { return this.$api.sysDictTypeDropDown({ code: 'dic_areacode_type' }).then(({ data }) => {
return data; return data;
}); });
}, },
/** ... */
}, },
}; };
</script> </script>

99
Web/src/pages/system/area/index.vue
View File

@@ -1,32 +1,35 @@
<template> <template>
<!--
普通查询表格
v 1.2
2021-04-30
Lufthafen
-->
<container> <container>
<br /> <br />
<a-card :bordered="false"> <a-card :bordered="false">
<Auth auth="sysArea:page"> <yo-table
<div class="yo-query-bar"> :columns="columns"
<a-form-model :model="query" layout="inline"> :load-data="loadData"
@query="onQuery"
@resetQuery="onResetQuery"
ref="table"
>
<Auth auth="sysArea:page" slot="query">
<!-- 此处添加查询表单控件 --> <!-- 此处添加查询表单控件 -->
<!-- ... -->
<a-form-model-item label="参数名称"> <a-form-model-item label="参数名称">
<a-input placeholder="请输入参数名称" v-model="query.name" /> <a-input placeholder="请输入参数名称" v-model="query.name" />
</a-form-model-item> </a-form-model-item>
<a-form-model-item label="参数编码"> <a-form-model-item label="参数编码">
<a-input placeholder="请输入参数编码" v-model="query.code" /> <a-input placeholder="请输入参数编码" v-model="query.code" />
</a-form-model-item> </a-form-model-item>
<a-form-model-item>
<a-button-group>
<a-button @click="onQuery" type="primary">查询</a-button>
<a-button @click="onResetQuery">重置</a-button>
</a-button-group>
</a-form-model-item>
</a-form-model>
</div>
</Auth> </Auth>
<yo-table :columns="columns" :load-data="loadData" ref="table">
<Auth auth="sysArea:add" slot="operator"> <Auth auth="sysArea:add" slot="operator">
<a-button @click="onOpen('add-form')" icon="plus">新增区域编码</a-button> <a-button @click="onOpen('add-form')" icon="plus">新增区域编码</a-button>
</Auth> </Auth>
<!-- 格式化字段内容 --> <!-- 格式化字段内容 -->
<!-- ... -->
<span slot="levelType" slot-scope="text">{{ bindCodeValue(text, 'levelType') }}</span> <span slot="levelType" slot-scope="text">{{ bindCodeValue(text, 'levelType') }}</span>
<!-- 添加操作控件 --> <!-- 添加操作控件 -->
<span slot="action" slot-scope="text, record"> <span slot="action" slot-scope="text, record">
@@ -40,27 +43,49 @@
</a-popconfirm> </a-popconfirm>
</Auth> </Auth>
<!-- 可在此处添加其他操作控件 --> <!-- 可在此处添加其他操作控件 -->
<!-- ... -->
</yo-table-actions> </yo-table-actions>
</span> </span>
</yo-table> </yo-table>
</a-card> </a-card>
<br />
<add-form @ok="onReloadData" ref="add-form" /> <!-- 新增表单 -->
<edit-form @ok="onReloadData" ref="edit-form" /> <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> </container>
</template> </template>
<script> <script>
import AddForm from './addForm'; import FormBody from './form';
import EditForm from './editForm';
/* 在此管理整个页面需要的接口名称 */
const api = {
page: 'sysAreaPage',
add: 'sysAreaAdd',
edit: 'sysAreaEdit',
delete: 'sysAreaDelete',
/* ... */
};
export default { export default {
components: { components: {
AddForm, FormBody,
EditForm,
}, },
data() { data() {
return { return {
api,
name: '区域编码',
/* 查询条件 */
query: {}, query: {},
/* 表格字段 */
columns: [ columns: [
{ {
title: '参数类型', title: '参数类型',
@@ -94,12 +119,15 @@ export default {
sorter: true, sorter: true,
}, },
], ],
/* 字典编码储存格式 */
codes: { codes: {
levelType: [], levelType: [],
}, },
}; };
}, },
created() { created() {
/** 按需加载字典编码 */
this.onLoadCodes(); this.onLoadCodes();
/** 根据权限添加操作列 */ /** 根据权限添加操作列 */
@@ -119,17 +147,12 @@ export default {
* 传给yo-table以示意数据接口及其参数和返回的数据结构 * 传给yo-table以示意数据接口及其参数和返回的数据结构
*/ */
loadData(params) { loadData(params) {
return ( return this.$api[api.page]({
this.$api
/** !!此处必须修改调用的接口方法 */
.sysAreaPage({
...params, ...params,
...this.query, ...this.query,
}) }).then((res) => {
.then((res) => {
return res.data; return res.data;
}) });
);
}, },
/** /**
@@ -164,8 +187,14 @@ export default {
* 如果不需要获取相应的字典数据,此方法内容可空 * 如果不需要获取相应的字典数据,此方法内容可空
*/ */
onLoadCodes() { onLoadCodes() {
this.$api.$queue([this.$api.sysDictTypeDropDownAwait({ code: 'dic_areacode_type' })]).then(([dic_areacode_type]) => { this.$api
this.codes.levelType = dic_areacode_type.data; .$queue([
this.$api.sysDictTypeDropDownAwait({ code: 'dic_areacode_type' }),
/* ... */
])
.then(([code1]) => {
this.codes.levelType = code1.data;
/* ... */
}); });
}, },
@@ -186,7 +215,11 @@ export default {
* 从列表页调用窗口的打开方法 * 从列表页调用窗口的打开方法
*/ */
onOpen(formName, record) { onOpen(formName, record) {
this.$refs[formName].onOpen(record); this.$refs[formName].onOpen({
record,
/* 按需添加其他参数 */
/* ... */
});
}, },
/** /**
@@ -206,9 +239,7 @@ export default {
*/ */
onDelete(record) { onDelete(record) {
this.$refs.table.onLoading(); this.$refs.table.onLoading();
this.$api this.$api[api.delete](record)
/** !!此处必须修改调用的接口方法 */
.sysAreaDelete(record)
.then(({ success }) => { .then(({ success }) => {
this.onResult(success, '删除成功'); this.onResult(success, '删除成功');
}) })