sz-kjsxy-web/src/views/component/linkPickModal.vue

<template>
  <div>
    <el-dialog :visible.sync="dialogVisible">
      <template>
        <div class="select">
          <Select
            v-model="select.filter[0].key"
            style="width: 100px"
            placeholder="搜索条目"
          >
            <Option v-for="item in fields" :key="item.id" :value="item.field">{{
              item.name
            }}</Option>
          </Select>
          <Select
            v-model="select.filter[0].op"
            style="width: 100px; margin-left: 10px"
            placeholder="搜索条件"
          >
            <Option v-for="item in op" :key="item.value" :value="item.value">{{
              item.label
            }}</Option>
          </Select>
          <template v-if="select.filter[0].op !== 'range'">
            <Input
              clearable
              v-model="select.filter[0].value"
              style="width: 150px; margin-left: 10px"
              placeholder="请填写关键词"
            />
          </template>
          <template v-else>
            <Input
              :value="select.filter[0].value.split(',')[0]"
              style="width: 150px; margin-left: 10px"
              placeholder="范围开始关键词"
              @input="(e) => inputStartHandler(e, select.filter[0])"
            />
            <span style="margin-left: 10px; display: flex; align-items: center"
              >至</span
            >
            <Input
              :value="select.filter[0].value.split(',')[1]"
              style="width: 150px; margin-left: 10px"
              placeholder="范围结束关键词"
              @input="(e) => inputEndHandler(e, select.filter[0])"
            />
          </template>
          <Button
            style="margin-left: 10px"
            type="primary"
            @click="$refs['table'].getTableData(true)"
            >查询</Button
          >
        </div>
        <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 { op } from '@/const/op'
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 {
      op,
      tempRow: {},
      dialogVisible: false,
      select: {
        table_name: "",
        table_id: "",
        filter: [
          {
            key: '',
            op: '',
            value: ''
          }
        ]
      },
      fields: [],
      columns: [],
      originalRowIds: [],
    };
  },
  methods: {
    index,
    show() {
      this.dialogVisible = true;
    },
    hide() {
      this.dialogVisible = false;
    },

    //target要为内存地址引用类型
    inputStartHandler(e, target) {
      let temp = target?.value.split(",")[1];
      target.value = `${e},${temp ? temp : ""}`;
    },
    inputEndHandler(e, target) {
      let temp = target?.value.split(",")[0];
      target.value = `${temp ? temp : ""},${e}`;
    },

    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.fields = res.fields;
      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">
.select {
  margin-bottom: 10px;
}
</style>