wxjt-asset-web/src/views/system/components/linkWith.vue

<template>
  <div>
    <el-dialog title="关联" :visible.sync="dialogVisible" width="66%">
      <template>
        <el-button size="small" type="primary" icon="el-icon-plus" @click="list.push({ link_table_name: '',local_key: '',foreign_key: '',link_relation: '' })"></el-button>

        <xy-table
          style="margin-top: 10px;"
          :auths="[]"
          size="small"
          :is-page="false"
          :list="list"
          :table-item="table"
        >

        </xy-table>
      </template>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="dialogVisible = false"
            >确 定</el-button
          >
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { realTableShow, realTableIndex, save, show, relationDestroy, update } from "@/api/system/customForm";
import {listparameter} from "@/api/system/dictionary";

export default {
  data() {
    return {
      id: '',
      copyTable: {},
      dialogVisible: false,
      tableName: "",
      localFields: {},
      realTables: [],
      foreignFields: [],
      parameters: [], //数据字典

      list: [],
      table: [
        {
          prop: "local_key",
          label: "关联本地字段",
          customFn: (row) => {
            return (
              <el-select size="mini"
                         value={ row.local_key }
                         on={{
                           ['change']:e => {
                             row.local_key = e
                           }
                         }}>
                {
                  this.localFields.map(i => {
                    return (
                      <el-option value={ i.field } label={ i.name }></el-option>
                    )
                  })
                }
              </el-select>
            );
          },
        },
        {
          prop: 'link_table',
          label: '关联表',
          customFn: (row) => {
            return (
              <el-select size="mini"
                         clearable={true}
                         value={row.link_table_name}
                         on={{
                           ['change']:async e => {
                             if(row.parameter_id) {
                               this.$message({
                                 type: 'warning',
                                 message: `${row.local_key || ''}已选择关联数据字典`
                               })
                               return
                             }
                             row.link_table_name = e
                             if (e) {
                               this.foreignFields = await this.getFields(e)
                             }
                           }
                         }}>
                {
                  this.realTables.map(i => {
                    return (
                      <el-option value={i} label={i}></el-option>
                    )
                  })
                }
              </el-select>
            );
          },
        },
        {
          prop: 'parameter_id',
          label: '关联数据字典',
          customFn: (row) => {
            return (
              <el-select size="mini"
                         clearable={true}
                         value={row.parameter_id}
                         on={{
                           ['change']:async e => {
                             if(row.link_table_name) {
                               this.$message({
                                 type: 'warning',
                                 message: `${row.local_key || ''}已选择关联表`
                               })
                               return
                             }
                             row.parameter_id = e
                             if (e) {
                               this.foreignFields = await this.getFields('parameters')
                             }
                           }
                         }}>
                {
                  this.parameters.map(i => {
                    return (
                      <el-option value={i.id} label={i.name}></el-option>
                    )
                  })
                }
              </el-select>
            );
          },
        },
        {
          prop: "foreign_key",
          label: "关联表字段",
          customFn: (row) => {
            return (
              <el-select size="mini"
                         value={row.foreign_key}
                         on={{
                           ['change']:e => {
                             row.foreign_key = e
                           }
                         }}>
                {(() => {
                  let dom = [];
                  for (let key in this.foreignFields) {
                    dom.push(<el-option label={key} value={key}></el-option>);
                  }
                  return dom;
                })()}
              </el-select>
            );
          },
        },
        {
          prop: 'link_relation',
          label: '关联方式',
          customFn: (row) => {
            return (
              <el-select size="mini"
                         disabled={!!row.parameter_id}
                         value={row.link_relation}
                         on={{
                           ['change']:e => {
                             row.link_relation = e
                           }
                         }}>
                {
                  [
                    { value: 'newHasOne', label: '一对一' },
                    { value: 'newHasMany', label: '一对多' },
                  ].map(i => {
                    return (
                      <el-option value={i.value} label={i.label}></el-option>
                    )
                  })
                }
              </el-select>
            );
          },
        },
        {
          prop: 'operate',
          label: '操作',
          align: 'left',
          customFn:(row, scope) => {
            return [(
              <el-button type='primary'
                         size="mini"
                         style={{
                           'margin-right': '6px'
                         }}
                         on={{
                           ['click']:e => {
                             this.copyTable.relation = this.list
                             save(this.copyTable).then(res => {
                               this.getDetail()
                               update({ id: this.copyTable.id })
                             })
                           }
                         }}>确 定</el-button>
            ),(
              <el-popover width="180"
                          trigger="hover"
                          scopedSlots={{
                            "default": () => {
                              return (
                                <div>
                                  <p style={{'padding-bottom':'10px'}}>确定要删除吗？</p>
                                  <div style={{"text-align":"right","margin":"0"}}>
                                    <el-button size="mini"
                                               type="text"
                                               on={{
                                                 ['click']:e => {
                                                 }
                                               }}>取消</el-button>
                                    <el-button type="primary"
                                               size="mini"
                                               on={{
                                                 ['click']:() => {
                                                   if(row.id){
                                                     relationDestroy({ id: row.id }).then(res => {
                                                       this.getDetail()
                                                       update({ id: this.copyTable.id })
                                                     })
                                                   } else {
                                                     this.list.splice(scope.$index, 1)
                                                   }
                                                 }
                                               }}>确定</el-button>
                                  </div>
                                </div>
                              )
                            },
                            "reference":() => {
                              return (
                                <el-button
                                  type="danger"
                                  size="mini"
                                >
                                  删除
                                </el-button>
                              )
                            }
                          }}>

              </el-popover>
            )]
          }
        }
      ],
    };
  },
  methods: {
    show() {
      this.dialogVisible = true;
    },
    hide() {
      this.dialogVisible = false;
    },
    set(key = [], value = []) {
      if (key instanceof Array) {
        key.forEach((key, index) => {
          this[key] = value[index] ?? "";
        });
      }
      if (typeof key === "string") {
        this[key] = value;
      }
    },

    async getParameters() {
      const res = await listparameter({ page: 1, page_size: 999 });
      this.parameters = res.data;
    },
    async getFields(tableName) {
      const res = await realTableShow({ table_name: tableName });
      console.log(res);
      return res || {};
    },
    async getRealTables() {
      const res = await realTableIndex();
      this.realTables = res;
    },
    async getDetail() {
      const res = await show({ id: this.copyTable?.id })
      this.localFields = res.fields || []

      this.list = res.relation.map(i => {
        return i
      })
    },
    submit(scope) {
      console.log(scope)
    }
  },
  computed: {},
  watch: {
    async dialogVisible(newVal) {
      if (newVal) {
        //this.localFields = await this.getFields(this.tableName);
        await this.getDetail();
      }
    },
  },
  created() {
    this.getParameters();
    this.getRealTables();
  },
};
</script>

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