sepax-products-web/src/views/component/linkPickModal.vue

<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" @row-click="rowPick"></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,
    field: String
  },
  data() {
    return {
      tempRow: {},
      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
        })
      }
    },

    rowPick (row) {
      this.tempRow = row
    },
    confirm () {
      (this.linkType === 'hasMany' || this.linkType === 'newHasMany') ? this.$emit('confirm',{
        field: this.field,
        value: this.$refs['table'].getSelection()
      }) : this.$emit('confirm',{
        field: this.field,
        value: this.tempRow
      })
      this.dialogVisible = false;
    }
  },
  computed: {},
  watch: {
    async linkTableName (newVal) {
      await this.getDataTableName();
      await this.getColumns();
    },
    dialogVisible (newVal) {
      if (newVal) {

      } else {
        this.tempRow = {}
      }
    }
  }
};
</script>

<style scoped lang="scss"></style>