Browse Source

👣 提供ant原生表格组件模板基本完成

master
wangxiang 3 years ago
parent
commit
de9de6d8a7
  1. 171
      kicc-ui/src/views/system/config/ConfigModal.vue
  2. 27
      kicc-ui/src/views/system/config/index.vue

171
kicc-ui/src/views/system/config/ConfigModal.vue

@ -1,56 +1,152 @@
<template> <template>
<BasicModal <BasicModal v-bind="$attrs"
v-bind="$attrs" :width="720"
@register="registerModal" @register="registerModal"
@ok="handleSubmit" @ok="handleSubmit"
width="720px"> >
<BasicForm @register="registerForm" /> <AForm ref="formElRef"
:model="state.modelRef"
:rules="state.rulesRef"
>
<AFormItem v-bind="validateInfos.name"
label="参数名称"
name="name"
>
<a-input v-model:value="state.modelRef.name"/>
</AFormItem>
<AFormItem v-bind="validateInfos.key"
name="key"
label="参数键名"
>
<Input v-model:value="state.modelRef.key"/>
</AFormItem>
<AFormItem v-bind="validateInfos.value"
name="value"
label="参数键值"
>
<Input v-model:value="state.modelRef.value"/>
</AFormItem>
<AFormItem v-bind="validateInfos.isSys"
name="isSys"
label="系统内置"
>
<ARadioGroup v-model:value="state.modelRef.isSys">
<ARadio value="0"></ARadio>
<ARadio value="1"></ARadio>
</ARadioGroup>
</AFormItem>
<AFormItem v-bind="validateInfos.remarks"
name="remarks"
label="备注"
>
<ATextarea v-model:value="state.modelRef.remarks"/>
</AFormItem>
</AForm>
</BasicModal> </BasicModal>
</template> </template>
<script lang="ts"> <script lang="ts" setup>
import { defineComponent, ref, unref } from 'vue'; /**
* 提供模板规范代码参考,请尽量保证编写代码风格跟模板规范代码一致
* 采用ant-design-vue表格表单组件编写,采用 setup 写法
* 当vben的BasicTable跟BasicForm组件不能满足一些特殊需求时,需要写原生ant-design-vue组件时,请严格参考此处代码
* 当前原生ant-design-vue表格表单组件模板,目前已经与系统项目配置高度集成,系统配置发生修改时组件也会产生对应的变化
* 目前是基于vben的BasicTable跟BasicForm组件重写出一套ant-design-vue原生表格表单组件模板
* 注意:不会强依赖vben的BasicTable跟BasicForm组件,只会依赖一些简单容易逻辑不复杂的功能,复杂的功能不会依赖,降低耦合,提升此模板的可扩展性
* Copyright © 2020-2022 <a href="http://www.entfrm.com/">entfrm</a> All rights reserved.
* author entfrm开发团队-王翔
*/
import { reactive } from 'vue';
import { Form, Textarea, Radio } from 'ant-design-vue';
import { BasicModal, ModalProps, useModalInner } from '/@/components/Modal'; import { BasicModal, ModalProps, useModalInner } from '/@/components/Modal';
import { BasicForm, useForm } from '/@/components/Form/index'; import { getConfig, addConfig, editConfig } from '/@/api/platform/system/controller/config';
import { formSchema } from './config.data';
//import { set } from '/@/api/platform/system/controller/config';
export default defineComponent({ /** 类型规范统一声明定义区域 */
name: 'ConfigModal', interface WindowState {
components: { BasicModal, BasicForm }, tag: string;
emits: ['success', 'register'], modelRef: {
setup(_, { emit }) { id: string;
const isUpdate = ref(true); name: string;
key: string;
const [registerForm, { resetFields, setFieldsValue, validate }] = useForm({ value: string;
labelWidth: 100, isSys: string;
schemas: formSchema, remarks: string;
showActionButtonGroup: false, };
baseColProps: { span: 24 } rulesRef: Recordable;
}); }
const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
await resetFields();
const props: Partial<ModalProps> = { confirmLoading: false };
isUpdate.value = !!data?.isUpdate; /** 通用变量统一声明区域 */
const AForm = Form;
const AFormItem = Form.Item;
const ATextarea = Textarea;
const ARadio = Radio;
const ARadioGroup = Radio.Group;
if (unref(isUpdate)) { const useForm = AForm.useForm;
await setFieldsValue({ const state = reactive<WindowState>({
...data.record, tag: '',
modelRef: {
id: undefined!,
name: undefined!,
key: undefined!,
value: undefined!,
isSys: '0',
remarks: undefined!
},
rulesRef: {
name: [
{ required: true, whitespace: true, message: '参数名称不能为空', validateTrigger: 'blur' }
],
key: [
{ required: true, whitespace: true, message: '参数键名不能为空', validateTrigger: 'blur' }
],
value: [
{ required: true, whitespace: true, message: '参数键值不能为空', validateTrigger: 'blur' }
]
}
}); });
props.title = "编辑参数"; /** https://v3.cn.vuejs.org/api/options-data.html#emits */
}else { const emit = defineEmits(['success', 'register']);
props.title = "新增参数"; const { resetFields, clearValidate, validate, validateInfos } = useForm(state.modelRef, state.rulesRef);
const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data: WindowInnerData = { _tag: '' })=> {
//
resetFields();
clearValidate();
//
state.tag = data._tag;
const configId = data.record?.id;
const props: Partial<ModalProps> = { confirmLoading: false };
// tag
switch (state.tag) {
case 'add':
props.title = '新增配置参数';
break;
case 'edit':
props.title = '编辑配置参数';
const result = await getConfig(configId);
state.modelRef = result;
break;
} }
// :
setModalProps(props); setModalProps(props);
}); });
/** 处理弹出框提交 */
async function handleSubmit() { async function handleSubmit() {
try { try {
const values = await validate(); //
const formData = await validate();
//
setModalProps({ confirmLoading: true }); setModalProps({ confirmLoading: true });
await set(values); // tag
switch (state.tag) {
case 'add':
await addConfig(formData);
break;
case 'edit':
await editConfig(formData);
break;
}
//
closeModal(); closeModal();
emit('success'); emit('success');
} finally { } finally {
@ -58,7 +154,4 @@ export default defineComponent({
} }
} }
return { registerModal, registerForm, handleSubmit };
},
});
</script> </script>

27
kicc-ui/src/views/system/config/index.vue

@ -150,6 +150,8 @@
</div> </div>
</template> </template>
</ATable> </ATable>
<!--弹出窗体区域-->
<ConfigModal @register="registerModal" @success="handleRefreshTable"/>
</div> </div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
@ -360,35 +362,36 @@
getList(); getList();
} }
/** 新增按钮操作,行内新增与工具栏局域新增通用 */ /** 新增按钮操作,行内新增与工具栏局域新增通用 */
function handleAdd() { function handleAdd() {
/*openModal(true,{isUpdate: false });*/ openModal(true,{ _tag: 'add' });
} }
/** 编辑按钮操作,行内编辑 */ /** 编辑按钮操作,行内编辑 */
function handleEdit(record?: Recordable) { function handleEdit(record?: Recordable) {
/*record = record || { id: toRaw(state.ids) }; record = record || { id: toRaw(getSelectRowKeys()) };
openModal(true, { isUpdate: true, record });*/ openModal(true, { _tag: 'edit', record });
} }
/** 删除按钮操作,行内删除 */ /** 删除按钮操作,行内删除 */
async function handleDel(record?: Recordable) { async function handleDel(record?: Recordable) {
/*const ids = record?.id || toRaw(state.ids); const ids = record?.id || toRaw(getSelectRowKeys());
createConfirm({ createConfirm({
iconType: 'warning', iconType: 'warning',
title: '警告', title: '警告',
content: `是否确认删除参数编号为${ids}参数吗?`, content: `是否确认删除参数编号为${ids}参数吗?`,
onOk: async () => { onOk: async () => {
await remove({ids: ids}); await delConfig(ids);
createMessage.success('删除成功!'); createMessage.success('删除成功!');
handleSuccess(); handleRefreshTable();
} }
});*/ });
}
/** 处理表格刷新 */
function handleRefreshTable() {
clearSelectedRowKeys();
getList();
} }
</script> </script>

Loading…
Cancel
Save