From c1966c586e117c134b2fb990cde9ac62eeee7d3e Mon Sep 17 00:00:00 2001 From: xy <271556543@qq.com> Date: Tue, 10 Oct 2023 17:34:04 +0800 Subject: [PATCH] 2023-10-10 --- src/views/component/detail.vue | 300 +++++++++++++++++++++++++++++---- src/views/component/dialog.vue | 15 +- src/views/component/table.vue | 8 +- 3 files changed, 281 insertions(+), 42 deletions(-) diff --git a/src/views/component/detail.vue b/src/views/component/detail.vue index d92c7c3..216b7ef 100644 --- a/src/views/component/detail.vue +++ b/src/views/component/detail.vue @@ -2,8 +2,8 @@
+
+ 基本信息 +
{{ contentFormat(item) - }}{{ units.get(item.field) }} + + +
+ {{ item.title }} +
+ + + import { show, index } from "@/api/system/baseForm"; -import { show as formShow } from "@/api/system/customForm"; +import { show as formShow, index as customFormIndex } from "@/api/system/customForm"; import { getparameter } from "@/api/system/dictionary"; import { listdept } from "@/api/system/department"; import { download } from "@/utils/downloadRequest"; @@ -78,6 +90,8 @@ export default { tableName: "", }, + allTables: [], + linkTableList: [], }; }, methods: { @@ -93,7 +107,214 @@ export default { download(e.url, "get", {}, e.original_name); }, + getAllTables () { + customFormIndex({ + page: 1, + page_size: 999 + }).then(res => { + this.allTables = res.data + }) + }, + + getLinkTableList () { + let relationFields = this.fields.filter(field => (field._relations?.link_relation === 'newHasMany' || field._relations?.link_relation === 'hasMany')); + for (let i = 0;i < relationFields.length;i++) { + let item = relationFields[i] + let table_id = this.allTables.find(table => table.table_name === item._relations.link_table_name)?.id + let promiseAll = [ + index({ + table_name: item._relations.link_table_name, + page: 1, + page_size: 999, + filter: [ + { + key: item._relations.foreign_key, + op: 'eq', + value: this.$route.params.id + } + ] + }), + formShow({ + id: table_id + }) + ]; + + Promise.all(promiseAll).then(res => { + let dataTable = this.allTables.find(t => t.table_name === res[1].relation[0].link_table_name); + formShow({ id: dataTable.id }).then(res1 => { + this.linkTableList.push({ + value: res[0].data?.map(o => o[res[1]?.relation[0]?.link_with_name]), + field: this.formatColumn(res1), + title: res[1]?.name + }) + }) + }) + } + }, + + formatColumn (info) { + let table = []; + //字段处理 + //初始表白名单 + let baseTable = new Map([ + ['departments', async () => { + const res = await listdept() + return res + }], + ['admins',[]] + ]) + let { fields, relation } = info; + let fieldRes = fields.sort((a,b) => a.sort - b.sort) + if ( + !fields || + !relation || + !fields instanceof Array || + !relation instanceof Array + ) { + throw new Error("fields或relation格式错误"); + } + fieldRes?.forEach((i, index) => { + i._relations = relation.find((j) => j.custom_form_field === i.field); + if (i.select_item && typeof i.select_item === 'object') { + let keys = Object.keys(i.select_item) + i._params = keys.map(key => { + return { + key, + value: i.select_item[key] + } + }) + } + if (i.edit_input === 'file' || i.edit_input === 'files') { + return + } + if (i._relations) { + if (baseTable.get(i._relations.link_table_name)) { + baseTable.get(i._relations.link_table_name)().then(res => i._params = res) + } else { + i._params = i._relations.parameter_id + ? getparameter({ id: i._relations.parameter_id },false).then((res) => { + i._params = res.detail; + }) + : this.index({ + table_name: i._relations.link_table_name, + page: 1, + page_size: 9999, + }).then((res) => { + i._params = res.data; + }); + } + } + }); + fields + ?.filter((i) => i.list_show) + .forEach((i) => { + if (i._relations) return + let linkOb = {}; + + if (i.edit_input === "richtext") { + linkOb.customFn = (row) => { + return ( +
+ ); + }; + } + if ( + i.select_item && + typeof i.select_item === "object" && + !(i.select_item instanceof Array) + ) { + let keys = Object.keys(i.select_item); + linkOb.customFn = (row) => { + let paramMap = new Map(); + keys.forEach((key) => { + paramMap.set(i.select_item[key], key); + }); + + return {paramMap.get(row[i.field]?.toString())}; + }; + } + if (i._relations) { + let { link_relation, foreign_key, link_with_name } = i._relations; + if (link_relation === "newHasOne" || link_relation === "hasOne") { + linkOb.customFn = (row) => { + if (i.edit_input === "file") { + return ( + + {row[link_with_name]?.original_name} + + ); + } else { + return ( + + {row[link_with_name]?.name || + row[link_with_name]?.no || + row[link_with_name]?.value} + + ); + } + }; + } + + if (link_relation === "hasMany" || link_relation === "newHasMany") { + linkOb.customFn = (row) => { + if (i.edit_input === "files") { + return ( +
+ {row[link_with_name]?.map((o) => ( + + { o?.original_name || o?.name } + + ))} +
+ ) + } else { + return ( +
+ {row[link_with_name]?.map((o) => ( +

+ {o?.name || + o?.no || + o?.value || + o?.biaoti || + o?.mingcheng} +

+ ))} +
+ ); + } + }; + } + } + table.push( + Object.assign( + { + prop: i.field, + label: i.name, + width: i.width, + fixed: i.is_fixed, + }, + linkOb + ) + ); + }); + table.unshift({ + type: "index", + width: 60, + label: "序号", + }); + + return table; + }, + async getFields() { + this.getAllTables(); + if (this.$route.meta.params?.custom_form) { let decode = decodeURIComponent(this.$route.meta.params?.custom_form); try { @@ -134,7 +355,7 @@ export default { .sort((a, b) => a.sort - b.sort) .forEach((i) => { i._relations = relation.find( - (j) => j.link_table_name.split("_")[1] === i.field + (j) => j.custom_form_field === i.field ); if (i.select_item && typeof i.select_item === "object") { let keys = Object.keys(i.select_item); @@ -158,25 +379,25 @@ export default { i._params = res.data; }); } else { - i._params = i._relations.parameter_id - ? getparameter({ id: i._relations.parameter_id }, false).then( - (res) => { - i._params = res.detail; - } - ) - : this.index({ - table_name: i._relations.link_table_name, - page: 1, - page_size: 9999, - }).then((res) => { - i._params = res.data; - }); + // i._params = i._relations.parameter_id + // ? getparameter({ id: i._relations.parameter_id }, false).then( + // (res) => { + // i._params = res.detail; + // } + // ) + // : this.index({ + // table_name: i._relations.link_table_name, + // page: 1, + // page_size: 9999, + // }).then((res) => { + // i._params = res.data; + // }); } } }); const detail = await show({ - id: this.$route.query.id, + id: this.$route.params.id, table_name: this.customForm.tableName, }); this.detail = detail; @@ -185,6 +406,10 @@ export default { }, computed: { + showFields () { + console.log(this.fields) + return this.fields.filter(field => (!field._relations || field._relations.link_relation === 'hasOne' || field._relations.link_relation === 'newHasOne')) + }, contentFormat() { return function (i) { let { _relations } = i; @@ -194,19 +419,13 @@ export default { _relations.link_relation === "newHasOne" ) { return ( + this.detail[_relations.link_with_name]?.original_name || this.detail[_relations.link_with_name]?.name || this.detail[_relations.link_with_name]?.no || - this.detail[_relations.link_with_name]?.value + this.detail[_relations.link_with_name]?.value || + this.detail[_relations.link_with_name]?.mingcheng ); } - if ( - _relations.link_relation === "hasMany" || - _relations.link_relation === "newHasMany" - ) { - return this.detail[_relations.link_with_name] - ?.map((o) => o?.original_name || o?.name || o?.no || o?.value) - ?.toString(); - } return; } @@ -219,7 +438,9 @@ export default { }, }, created() { - this.getFields(); + this.getFields().then(_ => { + this.getLinkTableList() + }) }, }; @@ -242,4 +463,21 @@ a:hover { color: red; text-decoration: underline; } + +.el-descriptions__title { + + position: relative; + padding-left: 14px; + + &::before { + content: ''; + width: 4px; + background: linear-gradient(to bottom,rgb(57, 129, 199), rgba(118, 148, 183, 0.7)); + + position: absolute; + left: 0; + top: 2px; + bottom: 2px; + } +} diff --git a/src/views/component/dialog.vue b/src/views/component/dialog.vue index 81465a3..32da9be 100644 --- a/src/views/component/dialog.vue +++ b/src/views/component/dialog.vue @@ -73,7 +73,7 @@ export default { form: this.form, file: this.file, }) - : i._relations + : (i._relations && i.edit_input !== 'file' && i.edit_input !== 'files') ? [ h( "el-input", @@ -273,7 +273,6 @@ export default { on: { ["confirm"]: ({ field, value }) => { this.form[field] = value; - console.log(this.form); }, }, }), @@ -460,6 +459,11 @@ export default { }, ]) : (this.file[i.field] = []); + + return + } + if (i && (i._relations?.link_relation === 'newHasMany' || i._relations?.link_relation === 'hasMany')) { + this.form[i.field] = res[i._relations.link_with_name].map(j => j[i._relations.custom_form_field]) } }); @@ -548,12 +552,7 @@ export default { info._relations?.link_relation === "hasOne" ) { if (info.edit_input === "file") { - copyForm[info._relations.link_with_name] = [ - { - upload_id: this.file[info.field]?.response?.id, - ...this.file[info.field], - }, - ]; + copyForm[info.field] = this.file[info.field][0]?.response?.id; } else { // let copyRelation = deepCopy( // info._params.find( diff --git a/src/views/component/table.vue b/src/views/component/table.vue index 034d86b..7d8a8eb 100644 --- a/src/views/component/table.vue +++ b/src/views/component/table.vue @@ -235,7 +235,8 @@
- +