2023-9-28

src/components/XyTable/index.vue

@@ -711,7 +711,7 @@ export default {
         }
       },{
         deep: true,
-        immediate: true
+        immediate: false
       })
     } else {
       if(this.action) this.getTableData();

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,7 +16,8 @@ export default {
     tableName: String,
   },
   render(h) {
-    return h(
+    return h('div',[
+      h(
         "el-dialog",
         {
           props: {
@@ -61,7 +66,36 @@ export default {
                     },
                     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),
                             {
@@ -187,7 +221,15 @@ export default {
             ),
           ]),
         ]
-    );
+      ),
+      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: {

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>

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>
               )
             }

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"