mec-cloud_-intelligent-manufacturing_crm/ruoyi-ui/src/views/dialogMange/components/RelayDialog.vue

<template>
  <el-dialog title="添加依赖关系" :visible.sync="isShow" width="30%">
    <el-form
      :model="formData"
      ref="formDataRef"
      :rules="rules"
      label-width="80px"
      :inline="false"
      size="normal"
    >
      <el-form-item label="表格">
        <el-select
          v-model="formData.tableName"
          placeholder="请选择依赖表"
          clearable
          filterable
          @change="tableChangeHandler"
        >
          <el-option
            v-for="item in tableList"
            :key="item.tableName"
            :label="item.tableComment"
            :value="item.tableName"
          >
            <span style="float: left">{{ item.tableComment }}</span>
            <span style="float: right; color: #8492a6; font-size: 13px">{{
              item.tableName
            }}</span>
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="字段">
        <el-select
          v-model="formData.fieldName"
          placeholder="请选择依赖字段"
          clearable
          filterable
        >
          <el-option
            v-for="item in fieldList"
            :key="item.fieldName"
            :label="item.fieldDescription"
            :value="item.fieldName"
          >
          </el-option>
        </el-select>
      </el-form-item>
    </el-form>

    <template #footer>
      <span>
        <el-button @click="closeHandler">取消</el-button>
        <el-button type="primary" @click="confirmHandler">确认</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script>
import { tableInfoList } from "@/api/dataEngine/index";
import {
  getFormName,
  getListName,
  dragTablePreview,
} from "@/api/dragform/form.js";
export default {
  name: "RelayDialog",
  props: [],
  components: {},
  data() {
    return {
      isShow: false,
      formData: {
        tableName: "",
        fieldName: "",
      },
      tableList: [],
      fieldList: [],
      rules: {},
      queryParams: {
        // isEnablePaging: false,
        databaseType: this.$store.state.user.dataSource.databaseType,
        databaseName: this.$store.state.user.dataSource.databaseName,
        // username: this.$store.state.user.dataSource.username,
      },
    };
  },
  computed: {},
  methods: {
    async openHandlder(echoData = {}) {
      this.formData = {
        tableName: "",
        fieldName: "",
      };
      await this.getTableList();
      this.isShow = true;
    },
    closeHandler() {
      let res = {
        flag: false,
      };
      this.$emit("saveRelayRes", res);
      this.isShow = false;
    },
    confirmHandler() {
      let res = {
        flag: true,
        data: this.formData,
      };
      this.$emit("saveRelayRes", res);
      this.isShow = false;
    },
    async getTableList() {
      //请求表  列表
      try {
        let res = await getFormName(this.queryParams);
        console.log(res);
        this.tableList = res.data;
      } catch (error) {
        console.log(error);
      }
    },
    async tableChangeHandler(value) {
      //获取字段列表
      if (!value) return;
      let payLoad = { ...this.queryParams, tableName: value };
      try {
        let res = await getListName(payLoad);
        this.fieldList = res;
      } catch (error) {
        console.log(error);
      }
    },
  },
};
</script>

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