From 341ea624124e280404961fa66de0f0c9fe1172c5 Mon Sep 17 00:00:00 2001 From: 1638245306 <1638245306@qq.com> Date: Thu, 13 Mar 2025 17:40:30 +0800 Subject: [PATCH] =?UTF-8?q?feat(system):=20=E4=BC=98=E5=8C=96=E9=85=8D?= =?UTF-8?q?=E7=BD=AE=E7=AE=A1=E7=90=86=E6=95=B0=E7=BB=84=E5=B1=95=E7=A4=BA?= =?UTF-8?q?=E6=96=B9=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 新增 crudTable 组件用于数组数据的展示和编辑 - 替换原有的 vxe-table 实现，简化代码结构 - 优化数组类型表单项的渲染逻辑 - 调整环境变量中的 API 地址 --- web/src/settings.ts | 5 +- .../components/components/crudTable.vue | 102 +++++++++++++ .../system/config/components/formContent.vue | 138 +----------------- 3 files changed, 110 insertions(+), 135 deletions(-) create mode 100644 web/src/views/system/config/components/components/crudTable.vue diff --git a/web/src/settings.ts b/web/src/settings.ts index 61881d3..cecbf2d 100644 --- a/web/src/settings.ts +++ b/web/src/settings.ts @@ -53,9 +53,12 @@ export default { }, form: { afterSubmit(ctx: any) { + const {res} = ctx // 增加crud提示 - if (ctx.res.code == 2000) { + if (res?.code == 2000) { successNotification(ctx.res.msg); + }else{ + return } }, }, diff --git a/web/src/views/system/config/components/components/crudTable.vue b/web/src/views/system/config/components/components/crudTable.vue new file mode 100644 index 0000000..bf8925f --- /dev/null +++ b/web/src/views/system/config/components/components/crudTable.vue @@ -0,0 +1,102 @@ + + + diff --git a/web/src/views/system/config/components/formContent.vue b/web/src/views/system/config/components/formContent.vue index b4a2141..fafa186 100644 --- a/web/src/views/system/config/components/formContent.vue +++ b/web/src/views/system/config/components/formContent.vue @@ -175,48 +175,7 @@
- - - - - - - - - - - - - - -
- 追加 -
+
@@ -248,32 +207,11 @@ import type { FormInstance, FormRules, TableInstance } from 'element-plus'; import { successMessage, errorMessage } from '/@/utils/message'; import { Session } from '/@/utils/storage'; import {Edit,Finished,Delete} from "@element-plus/icons-vue"; +import crudTable from "./components/crudTable.vue" const props = defineProps(['options', 'editableTabsItem']); let formData: any = reactive({}); let formList: any = ref([]); -let childTableData = ref([]); -let childRemoveVisible = ref(false); -const validRules = reactive({ - title: [ - { - required: true, - message: '必须填写', - }, - ], - key: [ - { - required: true, - message: '必须填写', - }, - ], - value: [ - { - required: true, - message: '必须填写', - }, - ], -}); const formRef = ref() let uploadUrl = ref(getBaseURL() + 'api/system/file/'); let uploadHeaders = ref({ @@ -294,24 +232,14 @@ const getInit = () => { if (item.value) { _formData[key] = item.value; } else { - if ([5, 12, 14].indexOf(item.form_item_type) !== -1) { + if ([5, 12,11, 14].indexOf(item.form_item_type) !== -1) { _formData[key] = []; } else { _formData[key] = item.value; } } - if (item.form_item_type_label === 'array') { - console.log('test'); - nextTick(() => { - const tableName = 'xTable_' + key; - const tabelRef = ref(); - console.log(tabelRef); - // const $table = this.$refs[tableName][0]; - // $table.loadData(item.chinldern); - }); - } } - formData = Object.assign(formData, _formData) + formData = Object.assign({}, _formData) }); }; @@ -322,31 +250,6 @@ const onSubmit = (formEl: FormInstance | undefined) => { const values = Object.values(formData); for (const index in formList.value) { const item = formList.value[index]; - // eslint-disable-next-line camelcase - const form_item_type_label = item.form_item_type_label; - - // eslint-disable-next-line camelcase - if (form_item_type_label === 'array') { - const parentId = item.id; - const tableName = 'xTable_' + item.key; - // const $table = this.$refs[tableName][0]; - // const { tableData } = $table.getTableData(); - // for (const child of tableData) { - // if (!child.id && child.key && child.value) { - // child.parent = parentId; - // child.id = null; - // formList.push(child); - // } - // } - // // 必填项的判断 - // for (const arr of item.rule) { - // if (arr.required && tableData.length === 0) { - // errorMessage(item.title + '不能为空'); - // return; - // } - // } - // item.value = tableData; - } // 赋值操作 keys.map((mapKey, mapIndex) => { if (mapKey === item.key) { @@ -380,39 +283,6 @@ const onSubmit = (formEl: FormInstance | undefined) => { }); }; -// 追加 -const onAppend = (tableName: any) => { - // const $table = this.$refs[tableName][0]; - // const { tableData } = $table.getTableData(); - // const tableLength = tableData.length; - // if (tableLength === 0) { - // const { row: newRow } = $table.insert(); - // console.log(newRow); - // } else { - // const errMap = $table.validate().catch((errMap: any) => errMap); - // if (errMap) { - // errorMessage('校验不通过!'); - // } else { - // const { row: newRow } = $table.insert(); - // console.log(newRow); - // } - // } -}; - -// 子表删除 -const onRemoveChild = (row: any, index: any, refName: any) => { - console.log(row, index); - if (row.id) { - api.DelObj(row.id).then((res: any) => { - // this.refreshView(); - }); - } else { - // this.childTableData.splice(index, 1); - // const tableName = 'xTable_' + refName; - // const tableData = this.$refs[tableName][0].remove(row); - // console.log(tableData); - } -}; // 图片预览 const handlePictureCardPreview = (file: any) => {