update 微调种子文件,应用管理使用新版种子

This commit is contained in:
2021-05-06 10:19:18 +08:00
parent a5d84bbfff
commit 60088ea4b7
7 changed files with 236 additions and 110 deletions

View File

@@ -43,12 +43,12 @@
</a-card> </a-card>
<!-- 新增表单 --> <!-- 新增表单 -->
<yo-modal-form :action="$api[api.add]" :title="`新增${name}`" @ok="onReloadData" ref="add-form"> <yo-modal-form :action="$api[api.add]" :title="'新增' + name" @ok="onReloadData" ref="add-form">
<form-body /> <form-body />
</yo-modal-form> </yo-modal-form>
<!-- 编辑表单 --> <!-- 编辑表单 -->
<yo-modal-form :action="$api[api.edit]" :title="`编辑${name}`" @ok="onReloadData" ref="edit-form"> <yo-modal-form :action="$api[api.edit]" :title="'编辑' + name" @ok="onReloadData" ref="edit-form">
<form-body /> <form-body />
</yo-modal-form> </yo-modal-form>
</container> </container>
@@ -71,7 +71,7 @@ export default {
}, },
data() { data() {
return { return {
...api, api,
name: '...', name: '...',

View File

@@ -49,12 +49,12 @@
</container> </container>
<!-- 新增表单 --> <!-- 新增表单 -->
<yo-modal-form :action="$api[api.add]" :title="`新增${name}`" @ok="onReloadData" ref="add-form"> <yo-modal-form :action="$api[api.add]" :title="'新增' + name" @ok="onReloadData" ref="add-form">
<form-body /> <form-body />
</yo-modal-form> </yo-modal-form>
<!-- 编辑表单 --> <!-- 编辑表单 -->
<yo-modal-form :action="$api[api.edit]" :title="`编辑${name}`" @ok="onReloadData" ref="edit-form"> <yo-modal-form :action="$api[api.edit]" :title="'编辑' + name" @ok="onReloadData" ref="edit-form">
<form-body /> <form-body />
</yo-modal-form> </yo-modal-form>
</yo-tree-layout> </yo-tree-layout>
@@ -82,7 +82,7 @@ export default {
data() { data() {
return { return {
...api, api,
name: '...', name: '...',

View File

@@ -43,12 +43,12 @@
</a-card> </a-card>
<!-- 新增表单 --> <!-- 新增表单 -->
<yo-modal-form :action="$api[api.add]" :title="`新增${name}`" @ok="onReloadData" ref="add-form"> <yo-modal-form :action="$api[api.add]" :title="'新增' + name" @ok="onReloadData" ref="add-form">
<form-body /> <form-body />
</yo-modal-form> </yo-modal-form>
<!-- 编辑表单 --> <!-- 编辑表单 -->
<yo-modal-form :action="$api[api.edit]" :title="`编辑${name}`" @ok="onReloadData" ref="edit-form"> <yo-modal-form :action="$api[api.edit]" :title="'编辑' + name" @ok="onReloadData" ref="edit-form">
<form-body /> <form-body />
</yo-modal-form> </yo-modal-form>
</container> </container>
@@ -71,7 +71,7 @@ export default {
}, },
data() { data() {
return { return {
...api, api,
name: '...', name: '...',

View File

@@ -49,12 +49,12 @@
</container> </container>
<!-- 新增表单 --> <!-- 新增表单 -->
<yo-modal-form :action="$api[api.add]" :title="`新增${name}`" @ok="onReloadData" ref="add-form"> <yo-modal-form :action="$api[api.add]" :title="'新增' + name" @ok="onReloadData" ref="add-form">
<form-body /> <form-body />
</yo-modal-form> </yo-modal-form>
<!-- 编辑表单 --> <!-- 编辑表单 -->
<yo-modal-form :action="$api[api.edit]" :title="`编辑${name}`" @ok="onReloadData" ref="edit-form"> <yo-modal-form :action="$api[api.edit]" :title="'编辑' + name" @ok="onReloadData" ref="edit-form">
<form-body /> <form-body />
</yo-modal-form> </yo-modal-form>
</yo-tree-layout> </yo-tree-layout>
@@ -82,7 +82,7 @@ export default {
data() { data() {
return { return {
...api, api,
name: '...', name: '...',

View File

@@ -1,31 +1,42 @@
<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">
<div class="yo-form-group"> <a-spin :spinning="loading">
<a-form-model-item label="应用名称" prop="name"> <a-icon slot="indicator" spin type="loading" />
<a-input placeholder="请输入应用名称" v-model="form.name" /> <div class="yo-form-group">
</a-form-model-item> <!-- 表单控件 -->
<a-form-model-item label="唯一编码" prop="code"> <!-- ... -->
<a-input placeholder="请输入唯一编码" v-model="form.code" /> <a-form-model-item label="应用名称" prop="name">
</a-form-model-item> <a-input placeholder="请输入应用名称" v-model="form.name" />
<a-form-model-item label="图标" prop="icon"> </a-form-model-item>
<a-input :disabled="true" placeholder="请选择图标" v-model="form.icon"> <a-form-model-item label="唯一编码" prop="code">
<a-icon :type="form.icon" slot="addonBefore" v-if="form.icon" /> <a-input placeholder="请输入唯一编码" v-model="form.code" />
<a-icon @click="onOpenSelectIcon" slot="addonAfter" type="setting" /> </a-form-model-item>
</a-input> <a-form-model-item label="图标" prop="icon">
</a-form-model-item> <a-input :disabled="true" placeholder="请选择图标" v-model="form.icon">
<a-form-model-item prop="color"> <a-icon :type="form.icon" slot="addonBefore" v-if="form.icon" />
<chrome-picker v-model="form.color" /> <a-icon @click="onOpenSelectIcon" slot="addonAfter" type="setting" />
</a-form-model-item> </a-input>
<a-form-model-item label="排序" prop="sort"> </a-form-model-item>
<a-input-number <a-form-model-item label="图标颜色" prop="color">
:max="1000" <chrome-picker v-model="form.color" />
:min="0" </a-form-model-item>
class="w-100-p" <a-form-model-item label="排序" prop="sort">
placeholder="请输入排序" <a-input-number
v-model="form.sort" :max="1000"
/> :min="0"
</a-form-model-item> class="w-100-p"
</div> placeholder="请输入排序"
v-model="form.sort"
/>
</a-form-model-item>
</div>
</a-spin>
<yo-icon-selector ref="icon-selector" v-model="form.icon" /> <yo-icon-selector ref="icon-selector" v-model="form.icon" />
</a-form-model> </a-form-model>
@@ -34,30 +45,75 @@
import YoIconSelector from '@/components/yoIconSelector'; import YoIconSelector from '@/components/yoIconSelector';
import { Chrome } from 'vue-color'; import { Chrome } from 'vue-color';
/* 表单内容默认值 */
const defaultForm = {
/* ... */
color: '#ffffff',
active: false,
};
export default { export default {
components: { components: {
YoIconSelector, YoIconSelector,
ChromePicker: Chrome, ChromePicker: Chrome,
}, },
data() { data() {
return { return {
/** 表单数据 */
form: { form: {
color: '#fff', ...defaultForm,
active: false,
}, },
/** 验证格式 */
rules: { rules: {
/* ... */
name: [{ required: true, message: '请输入应用名称' }], name: [{ required: true, message: '请输入应用名称' }],
code: [{ required: true, message: '请输入唯一编码' }], code: [{ required: true, message: '请输入唯一编码' }],
}, },
/** 加载异步数据状态 */
loading: false,
/** 其他成员属性 */
/* ... */
}; };
}, },
methods: { methods: {
/** /**
* 必要的方法 * 必要的方法
* 在打开编辑页时允许填充数据 * 在打开编辑页时允许填充数据
*/ */
onFillData(record) { onFillData(params) {
this.form = this.$_.cloneDeep(record); /** 将默认数据覆盖到form */
this.form = this.$_.cloneDeep({
...defaultForm,
...params.record,
/** 在此处添加其他默认数据转换 */
/* ... */
});
},
/**
* 必要方法
* 验证表单并获取表单数据
*/
onGetData() {
return new Promise((reslove, reject) => {
this.$refs.form.validate((valid) => {
if (valid) {
const record = this.$_.cloneDeep(this.form);
/** 验证通过后可以对数据进行转换得到想要提交的格式 */
/* ... */
record.color = record.color.constructor === Object ? record.color.hex : record.color;
reslove(record);
} else {
reject();
}
});
});
}, },
/** /**
@@ -75,9 +131,25 @@ export default {
onResetFields() { onResetFields() {
setTimeout(() => { setTimeout(() => {
this.$refs.form.resetFields(); this.$refs.form.resetFields();
/** 在这里可以初始化当前组件中其他属性 */
/* ... */
}, 300); }, 300);
}, },
/**
* 必要方法
* 加载当前表单中所需要的异步数据
*/
async onInit(params) {
this.loading = true;
/** 可以在这里await获取一些异步数据 */
/* ... */
this.loading = false;
},
/** 当前组件的其他方法 */
/* ... */
onOpenSelectIcon() { onOpenSelectIcon() {
this.$refs['icon-selector'].onOpen(this.form.icon); this.$refs['icon-selector'].onOpen(this.form.icon);
}, },

View File

@@ -1,30 +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="sysApp:page"> <yo-table
<div class="yo-query-bar"> :columns="columns"
<a-form-model :model="query" layout="inline"> :load-data="loadData"
<a-form-model-item label="应用名称"> @query="onQuery"
<a-input placeholder="请输入应用名称" v-model="query.name" /> @resetQuery="onResetQuery"
</a-form-model-item> ref="table"
<a-form-model-item label="唯一编码"> >
<a-input placeholder="请输入唯一编码" v-model="query.code" /> <Auth auth="sysApp:page" slot="query">
</a-form-model-item> <!-- 此处添加查询表单控件 -->
<a-form-model-item> <!-- ... -->
<a-button-group> <a-form-model-item label="应用名称">
<a-button @click="onQuery" type="primary">查询</a-button> <a-input placeholder="请输入应用名称" v-model="query.name" />
<a-button @click="() => { query = {}, onQuery() }">重置</a-button> </a-form-model-item>
</a-button-group> <a-form-model-item label="唯一编码">
</a-form-model-item> <a-input placeholder="请输入唯一编码" v-model="query.code" />
</a-form-model> </a-form-model-item>
</div> </Auth>
</Auth>
<yo-table :columns="columns" :load-data="loadData" ref="table">
<Auth auth="sysApp:add" slot="operator"> <Auth auth="sysApp: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="active" slot-scope="text, record"> <span slot="active" slot-scope="text, record">
{{ text ? '是' : '否' }} {{ text ? '是' : '否' }}
<Auth auth="sysApp:setAsDefault" v-if="!record.active"> <Auth auth="sysApp:setAsDefault" v-if="!record.active">
@@ -40,7 +45,9 @@
</yo-table-actions> </yo-table-actions>
</Auth> </Auth>
</span> </span>
<span slot="status" slot-scope="text">{{ bindCodeValue(text, 'common_status') }}</span> <span slot="status" slot-scope="text">{{ bindCodeValue(text, 'commonStatus') }}</span>
<!-- 添加操作控件 -->
<span slot="action" slot-scope="text, record"> <span slot="action" slot-scope="text, record">
<yo-table-actions> <yo-table-actions>
<Auth auth="sysApp:edit"> <Auth auth="sysApp:edit">
@@ -51,27 +58,50 @@
<a>删除</a> <a>删除</a>
</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: 'getAppPage',
add: 'sysAppAdd',
edit: 'sysAppEdit',
delete: 'sysAppDelete',
/* ... */
};
export default { export default {
components: { components: {
AddForm, FormBody,
EditForm,
}, },
data() { data() {
return { return {
api,
name: '应用',
/* 查询条件 */
query: {}, query: {},
/* 表格字段 */
columns: [ columns: [
{ {
title: '应用名称', title: '应用名称',
@@ -105,25 +135,22 @@ export default {
sorter: true, sorter: true,
}, },
], ],
codes: [
{ /* 字典编码储存格式 */
code: 'yes_or_no', codes: {
values: [], yesOrNo: [],
}, commonStatus: [],
{ },
code: 'common_status',
values: [],
},
],
}; };
}, },
created() { created() {
/** 按需加载字典编码 */
this.onLoadCodes(); this.onLoadCodes();
/** 根据权限添加操作列 */
const flag = this.$auth({ const flag = this.$auth({
sysApp: [['edit'], ['delete']], sysApp: [['edit'], ['delete']],
}); });
if (flag) { if (flag) {
this.columns.push({ this.columns.push({
title: '操作', title: '操作',
@@ -139,14 +166,12 @@ export default {
* 传给yo-table以示意数据接口及其参数和返回的数据结构 * 传给yo-table以示意数据接口及其参数和返回的数据结构
*/ */
loadData(params) { loadData(params) {
return this.$api return this.$api[api.page]({
.getAppPage({ ...params,
...params, ...this.query,
...this.query, }).then((res) => {
}) return res.data;
.then((res) => { });
return res.data;
});
}, },
/** /**
@@ -157,6 +182,16 @@ export default {
this.$refs.table.onReloadData(true); this.$refs.table.onReloadData(true);
}, },
/**
* 有查询功能时的必要方法
* 重置查询条件
*/
onResetQuery() {
/** 在这里重置查询条件时,可对特殊的字段做保留处理 */
this.query = {};
this.onQuery();
},
/** /**
* 必要方法 * 必要方法
* 重新列表数据 * 重新列表数据
@@ -166,21 +201,30 @@ export default {
}, },
/** /**
* 加载字典数据时的必要方法 * 必要方法
* 加载字典数据
* 如果不需要获取相应的字典数据,此方法内容可空
*/ */
onLoadCodes() { onLoadCodes() {
this.$api this.$api
.$queue([ .$queue([
this.$api.sysDictTypeDropDownAwait({ code: 'yes_or_no' }), this.$api.sysDictTypeDropDownAwait({ code: 'yes_or_no' }),
this.$api.sysDictTypeDropDownAwait({ code: 'common_status' }), this.$api.sysDictTypeDropDownAwait({ code: 'common_status' }),
/* ... */
]) ])
.then(([yesOrNo, commonStatus]) => { .then(([code1, code2]) => {
this.codes.find((p) => p.code === 'yes_or_no').values = yesOrNo.data; this.codes.yesOrNo = code1.data;
this.codes.find((p) => p.code === 'common_status').values = commonStatus.data; this.codes.commonStatus = code2.data;
/* ... */
}); });
}, },
/**
* 必要方法
* 绑定数据字典值
*/
bindCodeValue(code, name) { bindCodeValue(code, name) {
const c = this.codes.find((p) => p.code == name).values.find((p) => p.code == code); const c = this.codes[name].find((p) => p.code == code);
if (c) { if (c) {
return c.value; return c.value;
} }
@@ -188,19 +232,41 @@ export default {
}, },
/** /**
* 有编辑新增功能的必要方法 * 必要方法
* 从列表页调用窗口的打开方法 * 从列表页调用窗口的打开方法
*/ */
onOpen(formName, record) { onOpen(formName, record) {
this.$refs[formName].onOpen(record); this.$refs[formName].onOpen({
record,
/* 按需添加其他参数 */
/* ... */
});
}, },
/**
* 必要方法
* 可以用做一系列操作的公共回调,此方法中会重新加载当前列表
*/
onResult(success, successMessage) { onResult(success, successMessage) {
if (success) { if (success) {
this.$message.success(successMessage); this.$message.success(successMessage);
this.onReloadData(); this.onReloadData();
} }
this.$refs.table.onLoaded(); },
/**
* 必要方法
* 删除时调用
*/
onDelete(record) {
this.$refs.table.onLoading();
this.$api[api.delete](record)
.then(({ success }) => {
this.onResult(success, '删除成功');
})
.finally(() => {
this.$refs.table.onLoaded();
});
}, },
onSetDefault(record) { onSetDefault(record) {
@@ -209,13 +275,6 @@ export default {
this.onResult(success, '设置成功'); this.onResult(success, '设置成功');
}); });
}, },
onDelete(record) {
this.$refs.table.onLoading();
this.$api.sysAppDelete(record).then(({ success }) => {
this.onResult(success, '删除成功');
});
},
}, },
}; };
</script> </script>

View File

@@ -3,12 +3,7 @@
<container> <container>
<a-row :gutter="16" type="flex"> <a-row :gutter="16" type="flex">
<a-col flex="auto"> <a-col flex="auto">
<container <container :id="`doc-${index}`" :key="index" v-for="(doc, index) in docs">
:id="`doc-${index}`"
:key="index"
mode="container"
v-for="(doc, index) in docs"
>
<section> <section>
<h1>{{ doc.title }}</h1> <h1>{{ doc.title }}</h1>
<component :codes="codes" :is="doc.component" v-if="doc.path" /> <component :codes="codes" :is="doc.component" v-if="doc.path" />