2023-10-10

src/views/component/detail.vue

@@ -2,8 +2,8 @@
   <div>
     <el-page-header
       :content="
-        $route.meta.title +
+        $route.meta.title + ' - ' +
-        (detail.dikuaimingcheng ? ' - ' + detail.dikuaimingcheng : '')
+        (detail.name || detail.mingcheng || detail.no || detail.bianhao || ' ')
       "
       style="
         padding: 1em;
@@ -20,23 +20,35 @@
     <el-row :gutter="20">
       <el-col :span="24">
         <el-card>
+          <div class="el-descriptions__header el-descriptions__title">
+            基本信息
+          </div>
           <el-descriptions
-            title="基本信息"
+            border
+            size="small"
             :column="2"
             :label-style="{ 'font-weight': '600' }"
           >
             <el-descriptions-item
-              v-for="item in fields"
+              v-for="item in showFields"
               :label="item.name"
               v-if="!['file', 'picture'].find((j) => j === item.field)"
             >{{ contentFormat(item)
-              }}{{ units.get(item.field) }}</el-descriptions-item
+              }}</el-descriptions-item
             >
           </el-descriptions>
         </el-card>
+
+        <el-card v-for="item in linkTableList">
+          <div class="el-descriptions__header el-descriptions__title">
+            {{ item.title }}
+          </div>
+          <xy-table size="mini" :height="300" :is-page="false" :list="item.value" :table-item="item.field"></xy-table>
+        </el-card>
       </el-col>
     </el-row>
 
+    <el-backtop></el-backtop>
 
     <Modal
       :width="76"
@@ -59,7 +71,7 @@
 
 <script>
 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 (
+                <div
+                  style={{ "max-height": "55px","overflow": "scroll" }}
+                  domPropsInnerHTML={row[i.field]}
+                ></div>
+              );
+            };
+          }
+          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 <span>{paramMap.get(row[i.field]?.toString())}</span>;
+            };
+          }
+          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 (
+                    <a
+                      download={row[link_with_name]?.original_name}
+                      href={row[link_with_name]?.url}
+                    >
+                      {row[link_with_name]?.original_name}
+                    </a>
+                  );
+                } else {
+                  return (
+                    <span>
+                      {row[link_with_name]?.name ||
+                        row[link_with_name]?.no ||
+                        row[link_with_name]?.value}
+                    </span>
+                  );
+                }
+              };
+            }
+
+            if (link_relation === "hasMany" || link_relation === "newHasMany") {
+              linkOb.customFn = (row) => {
+                if (i.edit_input === "files") {
+                  return (
+                    <div style="display: flex;flex-direction: column;">
+                      {row[link_with_name]?.map((o) => (
+                        <a>
+                          { o?.original_name || o?.name }
+                        </a>
+                      ))}
+                    </div>
+                  )
+                } else {
+                  return (
+                    <div>
+                      {row[link_with_name]?.map((o) => (
+                        <p>
+                          {o?.name ||
+                            o?.no ||
+                            o?.value ||
+                            o?.biaoti ||
+                            o?.mingcheng}
+                        </p>
+                      ))}
+                    </div>
+                  );
+                }
+              };
+            }
+          }
+          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
+              // i._params = i._relations.parameter_id
-                ? getparameter({ id: i._relations.parameter_id }, false).then(
+              //   ? getparameter({ id: i._relations.parameter_id }, false).then(
-                  (res) => {
+              //     (res) => {
-                    i._params = res.detail;
+              //       i._params = res.detail;
-                  }
+              //     }
-                )
+              //   )
-                : this.index({
+              //   : this.index({
-                  table_name: i._relations.link_table_name,
+              //     table_name: i._relations.link_table_name,
-                  page: 1,
+              //     page: 1,
-                  page_size: 9999,
+              //     page_size: 9999,
-                }).then((res) => {
+              //   }).then((res) => {
-                  i._params = res.data;
+              //     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()
+    })
   },
 };
 </script>
@@ -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;
+  }
+}
 </style>

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] = [
+                copyForm[info.field] = this.file[info.field][0]?.response?.id;
-                  {
-                    upload_id: this.file[info.field]?.response?.id,
-                    ...this.file[info.field],
-                  },
-                ];
               } else {
                 // let copyRelation = deepCopy(
                 //   info._params.find(

src/views/component/table.vue

@@ -235,7 +235,8 @@
         </LxHeader>
       </div>
     </div>
-
+<!--$refs['drawer'].setId(row.id);
+          $refs['drawer'].show();-->
     <xy-table
       :auths="auths_auth_mixin"
       :delay-req="true"
@@ -248,8 +249,9 @@
       :table-item="table"
       @detail="
         (row) => {
-          $refs['drawer'].setId(row.id);
+          $router.push({
-          $refs['drawer'].show();
+            path: $route.path + '/detail/' + row.id
+          })
         }
       "
       @editor="