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

<template>
  <div>
    <el-dialog :visible.sync="dialogVisible">
      <template>
        <xy-table
          :is-first-req="false"
          ref="table"
          :row-key="(row) => row.id"
          :height="380"
          :action="index"
          :delay-req="true"
          :req-opt="select"
          :table-item="columns"
          @row-click="rowPick"
          @loaded="selectRows"
          @select="selectBk"
        ></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,
    originalRows: {
      default: () => [],
      type: Array,
    },
  },
  data() {
    return {
      tempRow: {},
      dialogVisible: false,
      select: {
        table_name: "",
        table_id: "",
      },
      columns: [],
      originalRowIds: [],
    };
  },
  methods: {
    index,
    show() {
      this.dialogVisible = true;
    },
    hide() {
      this.dialogVisible = false;
    },

    async getDataTableName() {
      if (this.linkType === "hasMany" || this.linkType === "newHasMany") {
        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;
      }
      if (this.linkType === "hasOne" || this.linkType === "newHasOne") {
        const tables = (
          await customFormIndex({
            page: 1,
            page_size: 999,
          })
        )?.data;

        const table = tables?.find((i) => i.table_name === this.linkTableName);
        this.select.table_name = table.table_name;
        this.select.table_id = table.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,
        });
      }
    },

    selectRows() {
      this.originalRowIds.forEach((id) => {
        let data = this.$refs["table"].getListData();

        let row = data.find((i) => i.id === id);
        if (row) {
          this.$refs["table"].toggleRowSelection(row);
        }
      });
    },
    rowPick({ row }) {
      this.tempRow = row;
    },
    selectBk (selections, row) {
      if (!selections.find(i => i.id === row.id)) {
        this.originalRowIds.splice(this.originalRowIds.indexOf(row.id),1)
      }
    },
    confirm() {
      this.linkType === "hasMany" || this.linkType === "newHasMany"
        ? this.$emit("confirm", {
            field: this.field,
            value: Array.from(new Set([...this.$refs["table"].getSelection()?.map(i => i.id),...this.originalRowIds])),
          })
        : this.$emit("confirm", {
            field: this.field,
            value: this.tempRow.id,
          });
      this.dialogVisible = false;
    },
  },
  computed: {},
  watch: {
    async linkTableName(newVal) {
      await this.getDataTableName();
      await this.getColumns();
      await this.$refs["table"].getTableData();
    },
    dialogVisible(newVal) {
      if (newVal) {

      } else {
        this.tempRow = {};
        this.$refs['table'].clearSelection();
      }
    },
    originalRows (newVal) {
      this.originalRowIds = newVal.map(i => i[this.field])

      this.selectRows();
    }
  },
};
</script>

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