From 74262424a5db3406bc6cb214da222175d1c1f4d8 Mon Sep 17 00:00:00 2001
From: xy <271556543@qq.com>
Date: Thu, 28 Sep 2023 17:30:04 +0800
Subject: [PATCH] 2023-9-28

---
 src/components/XyTable/index.vue         |   2 +-
 src/views/component/dialog.vue           | 377 +++++++++++++----------
 src/views/component/linkPickModal.vue    | 122 ++++++++
 src/views/component/table.vue            |   6 +-
 src/views/system/components/linkWith.vue |   2 +-
 5 files changed, 339 insertions(+), 170 deletions(-)
 create mode 100644 src/views/component/linkPickModal.vue

diff --git a/src/components/XyTable/index.vue b/src/components/XyTable/index.vue
index 7b4fd53..d4a15f5 100644
--- a/src/components/XyTable/index.vue
+++ b/src/components/XyTable/index.vue
@@ -711,7 +711,7 @@ export default {
         }
       },{
         deep: true,
-        immediate: true
+        immediate: false
       })
     } else {
       if(this.action) this.getTableData();
diff --git a/src/views/component/dialog.vue b/src/views/component/dialog.vue
index c40e792..cede370 100644
--- a/src/views/component/dialog.vue
+++ b/src/views/component/dialog.vue
@@ -1,9 +1,13 @@
 <script>
+import linkPickModal from './linkPickModal.vue'
 import { save, show, index } from "@/api/system/baseForm";
 import { getparameter } from "@/api/system/dictionary";
 import { domMap } from "@/const/inputType";
 import { addPropsMap } from "@/const/addProps";
 export default {
+  components: {
+    linkPickModal
+  },
   props: {
     formInfo: {
       type: Array,
@@ -12,182 +16,220 @@ export default {
     tableName: String,
   },
   render(h) {
-    return h(
-      "el-dialog",
-      {
-        props: {
-          title: "新增",
-          visible: this.dialogVisible,
-          width: "600px",
-        },
-        on: {
-          "update:visible": (val) => {
-            this.dialogVisible = val;
+    return h('div',[
+      h(
+        "el-dialog",
+        {
+          props: {
+            title: "新增",
+            visible: this.dialogVisible,
+            width: "600px",
           },
-        },
-      },
-      [
-        h(
-          "el-form",
-          {
-            ref: "elForm",
-            props: {
-              model: this.form,
-              labelWidth: "80px",
-              rules: this.rules,
-              labelPosition: "right",
-              size: "small",
+          on: {
+            "update:visible": (val) => {
+              this.dialogVisible = val;
             },
           },
-          (() => {
-            let dom = [];
-            this.formInfo.filter(i => i.form_show).forEach((i, index) => {
-              dom.push(
-                h(
-                  "el-form-item",
-                  {
-                    ref: `elFormItem${i.field}`,
-                    style: {
-                      width: "100%",
-                    },
-                    props: {
-                      label: i.name,
-                      prop: i.field,
-                      required:
-                        i.validation instanceof Array
-                          ? !!i.validation.find((i) => i === "required")
-                          : false,
-                    },
-                  },
-                  this.$scopedSlots[i.field]
-                    ? this.$scopedSlots[i.field]({ fieldInfo: i, form: this.form, file: this.file })
-                    : [
-                      h(
-                        domMap.get(i.edit_input),
-                        {
-                          ref: `elEdit_${i.field}`,
-                          style: {
-                            width: "100%",
-                          },
-                          props: {
-                            ...addPropsMap.get(i.edit_input),
-                            ...this.extraProps(i),
-                            placeholder: i.help,
-                            value: this.form[i.field],
-                          },
-                          attrs: {
-                            placeholder: i.help || `请填写${i.name}`,
-                          },
-                          on: {
-                            [this.getEventType(i.edit_input)]: (e) => {
-                              if (i.field) {
-                                this.form[i.field] = e;
-                                this.form = Object.assign({}, this.form);
-                              }
-                            },
-                          },
-                          scopedSlots:
-                            i.edit_input === "file" ||
-                            i.edit_input === "files"
-                              ? {
-                                file: (scope) => {
-                                  let { file } = scope;
-                                  return [
-                                    h("div", {}, [
-                                      h("i", {
-                                        class: {
-                                          "el-icon-circle-check":
-                                            file.status === "success",
-                                          "el-icon-loading":
-                                            file.status === "uploading",
-                                        },
-                                        style: {
-                                          color:
-                                            file.status === "success"
-                                              ? "green"
-                                              : "",
-                                        },
-                                      }),
-                                      h(
-                                        "a",
-                                        {
-                                          attrs: {
-                                            href: file.url,
-                                            download: file.name,
-                                          },
-                                          class: {
-                                            "uploaded-a":
-                                              file.status === "success",
-                                          },
-                                          style: {
-                                            'padding': '0 4px'
-                                          },
-                                        },
-                                        file.name
-                                      ),
-                                    ]),
-                                    h("i", {
-                                      class: "el-icon-close",
-                                      on: {
-                                        ["click"]: () =>
-                                          this.fileRemoveHandler(
-                                            file,
-                                            i.field
-                                          ),
-                                      },
-                                    }),
-                                  ];
-                                },
-                              }
-                              : "",
-                        },
-                        this.optionsRender(h, i)
-                      ),
-                    ]
-                )
-              );
-            });
-            return dom;
-          })()
-        ),
-        h("template", { slot: "footer" }, [
-          h(
-            "el-button",
-            {
-              on: {
-                click: () => (this.dialogVisible = false),
-              },
-            },
-            "取 消"
-          ),
+        },
+        [
           h(
-            "el-button",
+            "el-form",
             {
+              ref: "elForm",
               props: {
-                type: "warning",
-                plain: true,
-              },
-              on: {
-                click: () => this.init(),
+                model: this.form,
+                labelWidth: "80px",
+                rules: this.rules,
+                labelPosition: "right",
+                size: "small",
               },
             },
-            "重 置"
+            (() => {
+              let dom = [];
+              this.formInfo.filter(i => i.form_show).forEach((i, index) => {
+                dom.push(
+                  h(
+                    "el-form-item",
+                    {
+                      ref: `elFormItem${i.field}`,
+                      style: {
+                        width: "100%",
+                      },
+                      props: {
+                        label: i.name,
+                        prop: i.field,
+                        required:
+                          i.validation instanceof Array
+                            ? !!i.validation.find((i) => i === "required")
+                            : false,
+                      },
+                    },
+                    this.$scopedSlots[i.field]
+                      ? this.$scopedSlots[i.field]({ fieldInfo: i, form: this.form, file: this.file })
+                      : i._relations ?
+                        [
+                          h('el-input',{
+                            props: {
+                              readonly: true
+                            },
+                            on: {
+                              // ['focus']:e => {
+                              //   this.$refs['linkPickModal'].show()
+                              // }
+                            }
+                          },[
+                            h('el-button',{
+                              props: {
+                                icon: 'el-icon-document'
+                              },
+                              slot: 'append',
+                              on: {
+                                click:e => {
+                                  console.log(i)
+                                  this.pickedLinkField.linkType = i._relations.link_relation
+                                  this.pickedLinkField.linkTableName = i._relations.link_table_name
+                                  this.$refs['linkPickModal'].show()
+                                }
+                              }
+                            })
+                          ])
+                        ]
+                        :
+                        [
+                          h(
+                            domMap.get(i.edit_input),
+                            {
+                              ref: `elEdit_${i.field}`,
+                              style: {
+                                width: "100%",
+                              },
+                              props: {
+                                ...addPropsMap.get(i.edit_input),
+                                ...this.extraProps(i),
+                                placeholder: i.help,
+                                value: this.form[i.field],
+                              },
+                              attrs: {
+                                placeholder: i.help || `请填写${i.name}`,
+                              },
+                              on: {
+                                [this.getEventType(i.edit_input)]: (e) => {
+                                  if (i.field) {
+                                    this.form[i.field] = e;
+                                    this.form = Object.assign({}, this.form);
+                                  }
+                                },
+                              },
+                              scopedSlots:
+                                i.edit_input === "file" ||
+                                i.edit_input === "files"
+                                  ? {
+                                    file: (scope) => {
+                                      let { file } = scope;
+                                      return [
+                                        h("div", {}, [
+                                          h("i", {
+                                            class: {
+                                              "el-icon-circle-check":
+                                                file.status === "success",
+                                              "el-icon-loading":
+                                                file.status === "uploading",
+                                            },
+                                            style: {
+                                              color:
+                                                file.status === "success"
+                                                  ? "green"
+                                                  : "",
+                                            },
+                                          }),
+                                          h(
+                                            "a",
+                                            {
+                                              attrs: {
+                                                href: file.url,
+                                                download: file.name,
+                                              },
+                                              class: {
+                                                "uploaded-a":
+                                                  file.status === "success",
+                                              },
+                                              style: {
+                                                'padding': '0 4px'
+                                              },
+                                            },
+                                            file.name
+                                          ),
+                                        ]),
+                                        h("i", {
+                                          class: "el-icon-close",
+                                          on: {
+                                            ["click"]: () =>
+                                              this.fileRemoveHandler(
+                                                file,
+                                                i.field
+                                              ),
+                                          },
+                                        }),
+                                      ];
+                                    },
+                                  }
+                                  : "",
+                            },
+                            this.optionsRender(h, i)
+                          ),
+                        ]
+                  )
+                );
+              });
+              return dom;
+            })()
           ),
-          h(
-            "el-button",
-            {
-              props: {
-                type: "primary",
+          h("template", { slot: "footer" }, [
+            h(
+              "el-button",
+              {
+                on: {
+                  click: () => (this.dialogVisible = false),
+                },
               },
-              on: {
-                click: this.submit,
+              "取 消"
+            ),
+            h(
+              "el-button",
+              {
+                props: {
+                  type: "warning",
+                  plain: true,
+                },
+                on: {
+                  click: () => this.init(),
+                },
               },
-            },
-            "确 定"
-          ),
-        ]),
-      ]
-    );
+              "重 置"
+            ),
+            h(
+              "el-button",
+              {
+                props: {
+                  type: "primary",
+                },
+                on: {
+                  click: this.submit,
+                },
+              },
+              "确 定"
+            ),
+          ]),
+        ]
+      ),
+      h('linkPickModal',{
+        ref: 'linkPickModal',
+        props: {
+          linkType: this.pickedLinkField.linkType,
+          linkTableName: this.pickedLinkField.linkTableName
+        }
+      })
+    ])
   },
   data() {
     return {
@@ -197,6 +239,11 @@ export default {
       form: {},
       rules: {},
       file: {},
+
+      pickedLinkField: {
+        linkType: '',
+        linkTableName: ''
+      }
     };
   },
   methods: {
diff --git a/src/views/component/linkPickModal.vue b/src/views/component/linkPickModal.vue
new file mode 100644
index 0000000..9b61efa
--- /dev/null
+++ b/src/views/component/linkPickModal.vue
@@ -0,0 +1,122 @@
+<template>
+  <div>
+    <el-dialog :visible.sync="dialogVisible">
+      <template>
+        <xy-table ref="table" :row-key="row => row.id" :height="380" :action="index" :delay-req="true" :req-opt="select" :table-item="columns"></xy-table>
+      </template>
+      <template #footer>
+        <span>
+          <el-button size="mini" @click="dialogVisible = false">取 消</el-button>
+          <el-button size="mini" type="primary" @click="confirm">确 定</el-button>
+        </span>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { index } from "@/api/system/baseForm";
+import { index as customFormIndex , show } from "@/api/system/customForm";
+export default {
+  props: {
+    linkType: String,
+    linkTableName: String
+  },
+  data() {
+    return {
+      dialogVisible: false,
+      select: {
+        table_name: '',
+        table_id: ''
+      },
+      columns: []
+    };
+  },
+  methods: {
+    index,
+    show() {
+      this.dialogVisible = true;
+    },
+    hide() {
+      this.dialogVisible = false;
+    },
+
+    async getDataTableName () {
+      const tables = (await customFormIndex({
+        page: 1,
+        page_size: 999
+      }))?.data
+
+      const id = tables?.find(i => i.table_name === this.linkTableName)?.id
+      const res = (await show({
+        id
+      },false))?.relation[0]?.link_table_name
+
+      this.select.table_name = res
+      this.select.table_id = tables.find(i => i.table_name === this.select.table_name)?.id
+    },
+    async getColumns () {
+      const res = await show({
+        id: this.select.table_id
+      },false)
+
+      console.log(res)
+      this.columns = res.fields?.filter((i) => i.list_show).map(i => {
+        let linkOb = {};
+
+        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>
+            )
+          }
+        }
+
+        return Object.assign(
+          {
+            prop: i.field,
+            label: i.name,
+            width: i.width,
+            fixed: i.is_fixed,
+          },
+          linkOb
+        )
+      })
+      this.columns.unshift({
+        type: 'index',
+        width: 50
+      })
+
+      if (this.linkType === 'hasMany' || this.linkType === 'newHasMany') {
+        this.columns.unshift({
+          type: 'selection',
+          width: 50,
+          reserveSelection: true
+        })
+      }
+    },
+
+    confirm () {
+      console.log(this.$refs['table'].getSelection())
+      this.dialogVisible = false;
+    }
+  },
+  computed: {},
+  watch: {
+    async linkTableName (newVal) {
+      await this.getDataTableName();
+      await this.getColumns();
+    }
+  }
+};
+</script>
+
+<style scoped lang="scss"></style>
diff --git a/src/views/component/table.vue b/src/views/component/table.vue
index 611a45c..6aee8db 100644
--- a/src/views/component/table.vue
+++ b/src/views/component/table.vue
@@ -421,7 +421,7 @@ export default {
         throw new Error("fields或relation格式错误");
       }
       fieldRes?.forEach((i, index) => {
-        i._relations = relation.find((j) => j.local_key === i.field);
+        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 => {
@@ -459,7 +459,7 @@ export default {
         .map((i) => {
           let linkOb = {};
 
-          if (i.select_item && typeof i.select_item === 'object') {
+          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()
@@ -469,7 +469,7 @@ export default {
 
               return (
                 <span>
-                      { paramMap.get(row[i.field].toString()) }
+                      { paramMap.get(row[i.field]?.toString()) }
                 </span>
               )
             }
diff --git a/src/views/system/components/linkWith.vue b/src/views/system/components/linkWith.vue
index a2a6968..acf2898 100644
--- a/src/views/system/components/linkWith.vue
+++ b/src/views/system/components/linkWith.vue
@@ -47,7 +47,7 @@ export default {
       table: [
         {
           prop: 'custom_form_field',
-          label: '对应显示字段',
+          label: '对应映射字段',
           customFn: (row) => {
             return (
               <el-select size="mini"