mec-cloud_-intelligent-manufacturing_crm/ruoyi-ui/src/views/tool/datasheet/index.vue

<template>
  <div class="app-container">
    <el-card style="margin-bottom: 15px">
      <el-form ref="form" :model="form" label-width="100px" :rules="rules">
        <!-- <el-form-item label="数据库名称" prop="dataBaseName">
            <el-input v-model="form.dataBaseName" style="width: 600px;"></el-input>
        </el-form-item> -->
        <el-form-item label="数据表名称" prop="tableName">
          <el-input
            v-model="form.tableName"
            :disabled="isEdited"
            style="width: 600px"
          ></el-input>
        </el-form-item>
        <el-form-item label="表描述">
          <el-input v-model="form.tableComment" style="width: 600px"></el-input>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card>
      <div class="titleitem">
        <span>数据表字段</span>
      </div>
      <el-form ref="tableform" :rules="tableform" :model="experienceDataForm">
        <el-table :data="experienceData" stripe style="width: 100%">
          <el-table-column prop="fieldName" label="字段名称" width="200">
            <template slot-scope="scope">
              <el-form-item
                :prop="'fieldName' + scope.$index"
                :name="'fieldName' + scope.$index"
                style="margin: 0px; padding: 0px"
              >
                <el-input v-model="scope.row.fieldName"></el-input>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column prop="fieldType" label="字段类型" width="200">
            <template slot-scope="scope">
              <el-form-item
                :prop="'fieldType' + scope.$index"
                :name="'fieldType' + scope.$index"
                style="margin: 0px; padding: 0px"
              >
                <el-select
                  v-model="scope.row.fieldType"
                  filterable
                  @blur="selectBlur(scope)"
                  @change="
                    handleSelected(
                      dataType.find(
                        (item) => item.label === scope.row.fieldType
                      ),
                      scope
                    )
                  "
                >
                  <!-- <el-option v-for="item in list" :key="item" :label="item" :value="item">
                  </el-option> -->
                  <!--
                  <el-option v-for="item in dict.type.mysql_data_type"  :label="item.dictLabel" :value="item.dictValue">
                  </el-option> -->
                  <el-option
                    v-for="item in dataType"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </template>
          </el-table-column>

          <el-table-column prop="fieldLength" label="长度" width="200">
            <template slot-scope="scope">
              <el-form-item
                :prop="'fieldLength' + scope.$index"
                :name="'fieldLength' + scope.$index"
                style="margin: 0px; padding: 0px"
              >
                <!--                <el-input v-model="scope.row.fieldLength"-->
                <!--                          :disabled="handleSelected(dict.type.mysql_data_type.find(item => item.label === scope.row.fieldType), scope)"></el-input>-->
                <el-input
                  v-model="scope.row.fieldLength"
                  :disabled="changduclick(scope.$index)"
                ></el-input>
              </el-form-item>
            </template>
          </el-table-column>

          <el-table-column prop="isNull" label="不是null" width="100">
            <template slot-scope="scope">
              <el-checkbox
                @change="isNullChange(scope.row)"
                v-model="scope.row.isNull"
              ></el-checkbox>
            </template>
          </el-table-column>

          <el-table-column prop="isPrimary" label="键" width="100">
            <template slot-scope="scope">
              <el-checkbox
                v-model="scope.row.isPrimary"
                @change="hanleCheckbox(scope.$index)"
              ></el-checkbox>
            </template>
          </el-table-column>

          <el-table-column prop="isAuto" label="自增" width="100">
            <template slot-scope="scope">
              <el-checkbox v-model="scope.row.isAuto"></el-checkbox>
            </template>
          </el-table-column>

          <el-table-column prop="fieldDescription" label="字段描述" width="200">
            <template slot-scope="scope">
              <el-input v-model="scope.row.fieldDescription"></el-input>
            </template>
          </el-table-column>
          <el-table-column prop="operate" label="操作">
            <template slot-scope="scope">
              <!-- <el-button size="mini" type="success" icon="el-icon-save"
                  @click="handlesaveExperience(scope.$index, scope.row)">保存
              </el-button> -->
              <el-button
                size="mini"
                type="danger"
                icon="el-icon-delete"
                @click="handleDeleteExperience(scope.$index, scope.row)"
                >删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-form>
      <div>
        <el-button
          type="primary"
          icon="el-icon-plus"
          size="mini"
          @click="handleAddExperienceline"
          >新增字段
        </el-button>
      </div>
    </el-card>

    <div style="margin-top: 15px">
      <el-button v-if="!isEdited" @click="add" type="primary">添加</el-button>
      <el-button v-else @click="edit" type="primary">修改</el-button>
    </div>
  </div>
</template>

<script>
import { createDatabase } from "@/api/datasheet/index";
import { tableInfo, editTable } from "@/api/dataEngine/index";
import { mapState } from "vuex";
import { getDicts } from "@/api/system/dict/data";
export default {
  name: "Datasheet",
  // dicts: [
  //   "dm_data_type",
  //   "mysql_data_type",
  //   "sqlserver_data_type",
  //   "oracle_data_type",
  // ],
  data() {
    return {
      isEdited: false,
      testzidian: null,
      form: {
        dataBaseName: "",
        tableName: "",
        tableComment: "",
      },
      experienceDataForm: {},
      experienceData: [
        // {
        //     fieldName: '',
        //     fieldType: '',
        //     fieldLength: undefined,
        //     isNull: false,
        //     isPrimary: false,
        //     fieldDescription: '',
        //     isAuto: false
        // },
      ],
      rules: {
        dataBaseName: {
          required: true,
          message: "请输入数据库名称",
          trigger: "blur",
        },
        tableName: {
          required: true,
          message: "请输入数据库名称",
          trigger: "blur",
        },
      },
      tableform: {
        // fieldName0: { required: true, message: '请输入字段名称', trigger: 'blur' },
        // fieldType0: { required: true, message: '请选择', trigger: 'change' },
        // fieldLength0: { required: true, message: '请输入', trigger: 'blur' },
      },
      list: ["int", "varchar"],
      dataType: [], //数据类型字典

      Inoputdisabled: [],
      // 需要指定长度
      mysqlAllowLength: ["char", "varchar", "numeric", "decimal"],
    };
  },
  async created() {
    await this.getDict();
    if (this.$route.query.tableName) {
      this.isEdited = true;
      this.info();
    } else {
      Object.keys(this.form).forEach((item) => {
        this.form[item] = "";
      });
      this.experienceData = [];
    }
  },
  mounted() {},
  computed: {
    ...mapState({
      databaseName: (state) => state.user.dataSource.databaseName,
      databaseType: (state) => state.user.dataSource.databaseType,
    }),
  },
  watch: {
    experienceData: {
      handler(n, o) {
        // do something
        this.experienceDataForm = {};
        let rulesAdd = {};
        this.experienceData.forEach((item, index) => {
          this.$set(
            this.experienceDataForm,
            "fieldName" + index,
            item.fieldName
          );
          this.$set(
            this.experienceDataForm,
            "fieldType" + index,
            item.fieldType
          );
          this.$set(
            this.experienceDataForm,
            "fieldLength" + index,
            item.fieldLength
          );
          // rulesAdd['' + index] = item.fieldName
          // rulesAdd['fieldType' + index] = item.fieldType
          // rulesAdd['fieldLength' + index] = item.fieldLength
          // this.experienceDataForm = {...rulesAdd}
        });
      },
      deep: true, // 深度监听父组件传过来对象变化
    },
  },
  methods: {
    // 加载数据字典
    async getDict() {
      let res = await this.getDicts(this.databaseType + "_data_type");
      console.log(res);
      if (res.code == 200) {
        this.dataType = res.data.map((item) => {
          return {
            raw: item,
            value: item.dictValue,
            label: item.dictLabel,
          };
        });
      } else {
        console.log(res.msg);
      }
    },
    // 初始化表格数据
    info() {
      const tableName = this.$route.query.tableName;
      const tableComment = this.$route.query.tableComment;
      this.form.tableName = tableName;
      this.form.tableComment = tableComment;

      let data = {
        tableName,
        databaseType: this.databaseType,
        databaseName: this.databaseName,
      };
      tableInfo(data).then((response) => {
        this.experienceData = response.data;
        // 初始化校验规则
        this.experienceData.map((val, index) => {
          let temp = JSON.parse(JSON.stringify(this.dataType));
          console.log(temp);
          let targetDictItem = temp.find((item) => {
            return item.label === val.fieldType;
          });
          this.handleSelected(targetDictItem, { $index: index, row: val });
        });
      });
    },
    // 处理长度框是否可输入
    changduclick(inputIndex) {
      return this.Inoputdisabled[inputIndex];
    },
    // 下拉选中事件  // 处理选中类型后长度输入框是否禁用
    handleSelected(tem, scope) {
      if (tem == undefined) return;
      if (!this.tableform["fieldLength" + scope.$index]) {
        this.tableform["fieldLength" + scope.$index] = {};
      }
      if (tem.raw.listClass === "success") {
        this.Inoputdisabled[scope.$index] = true; // 禁用长度输入框
        scope.row.fieldLength = "";
        this.tableform["fieldLength" + scope.$index].required = false; // 禁用长度输入框的校验
        return this.$set(
          this.experienceDataForm,
          "fieldType" + scope.$index,
          scope.row.fieldType
        );
      }
      this.Inoputdisabled[scope.$index] = false; // 解除禁用
      this.tableform["fieldLength" + scope.$index].required = true; // 启用长度输入框的校验
      return this.$set(
        this.experienceDataForm,
        "fieldType" + scope.$index,
        scope.row.fieldType
      );
    },

    // 下拉选中事件
    selectBlur(aa) {
      if (aa.row.fieldType == "") {
        aa.row.fieldType = undefined;
      }
    },

    // 处理非空校验问题
    handleRules(type, delindex) {
      if (type == "add") {
        let rulesAdd = {};
        // 得到添加一行的下标
        let index = this.experienceData.length - 1;
        rulesAdd["fieldName" + index] = {
          required: true,
          message: "请输入字段名称",
          trigger: "blur",
        };
        rulesAdd["fieldType" + index] = {
          required: true,
          message: "请选择",
          trigger: "change",
        };
        rulesAdd["fieldLength" + index] = {
          required: true,
          message: "请输入",
          trigger: "blur",
        };
        // 序列化当前校验规则对象
        this.tableform = {
          ...this.tableform,
          ...rulesAdd,
        };
      } else if (type == "del") {
        // 删除校验规则对象中的元素
        this.$delete(this.tableform, "fieldName" + delindex);
        this.$delete(this.tableform, "fieldType" + delindex);
        this.$delete(this.tableform, "fieldLength" + delindex);
      }
    },

    // 处理主键选框问题
    hanleCheckbox(ind) {
      this.experienceData.forEach((item, index) => {
        if (index != ind) {
          item.isPrimary = false;
        }
        if (index == ind && item.isPrimary == true) {
          item.isNull = true;
        }
      });
    },
    //处理非空选框问题
    isNullChange(row) {
      if (!row.isNull) {
        row.isPrimary = false;
      }
    },
    //增加经验行
    handleAddExperienceline() {
      if (this.experienceData == undefined) {
        this.experienceData = new Array();
      }
      let obj = {
        fieldName: "",
        fieldType: "",
        fieldLength: undefined,
        isDisableFieldLength: true,
        isNull: false,
        isPrimary: false,
        fieldDescription: "",
        isAuto: false,
      };
      this.experienceData.push(obj);
      this.handleRules("add");
      this.Inoputdisabled.push(false);
    },
    //保存经验行
    handlesaveExperience(a, b) {
      // console.log(a + b);
      // console.log(b);
    },
    //删除经验行
    handleDeleteExperience(index) {
      this.experienceData.splice(index, 1);
      this.handleRules("del", index);
    },
    add() {
      const rule1 = new Promise((resolve, reject) => {
        this.$refs["form"].validate((valid) => {
          if (valid) {
            resolve();
          } else {
            return false;
          }
        });
      });
      const rule2 = new Promise((resolve, reject) => {
        this.$refs["tableform"].validate((valid) => {
          if (valid) {
            resolve();
          } else {
            return false;
          }
        });
      });
      Promise.all([rule1, rule2]).then(() => {
        if (this.experienceData.length == 0) {
          this.$modal.msgWarning("字段不可为空！");
          return;
        }
        this.experienceData.forEach((field) => {
          if (field.fieldLength) {
            field.fieldType = `${field.fieldType}(${field.fieldLength})`;
          }
        });
        let query = {
          databaseType: this.$store.state.user.dataSource.databaseType,
          databaseName: this.$store.state.user.dataSource.databaseName,
          tableName: this.form.tableName,
          tableComment: this.form.tableComment,
          field: this.experienceData,
        };
        createDatabase(query)
          .then((res) => {
            this.$modal.msgSuccess(res.msg);
            if (res.code === 200) {
              this.visible = false;
              this.$emit("ok");
              Object.keys(this.form).forEach((key) => (this.form[key] = ""));
              this.experienceData = [];
              this.$tab.closePage().then(() => {
                this.$router.push({
                  path: "/data/datamodeling",
                });
              });
              // 新增成功之后关闭当前页面
              // this.$router.replace({
              //   path: "/data/datamodeling",
              // });
            }
          })
          .catch((err) => {
            console.log(err);
          });
      });
    },
    edit() {
      const rule1 = new Promise((resolve, reject) => {
        this.$refs["form"].validate((valid) => {
          if (valid) {
            resolve();
          } else {
            return false;
          }
        });
      });
      const rule2 = new Promise((resolve, reject) => {
        this.$refs["tableform"].validate((valid) => {
          if (valid) {
            resolve();
          } else {
            return false;
          }
        });
      });
      Promise.all([rule1, rule2]).then(() => {
        if (this.experienceData.length == 0) {
          this.$modal.msgWarning("字段不可为空！");
          return;
        }
        this.experienceData = this.experienceData.filter((item) => {
          return item.fieldName && item.fieldType;
        });
        this.experienceData.forEach((field) => {
          if (field.fieldLength) {
            field.fieldType = `${field.fieldType}(${field.fieldLength})`;
          }
        });
        let query = {
          databaseType: this.$store.state.user.dataSource.databaseType,
          databaseName: this.$store.state.user.dataSource.databaseName,
          tableName: this.form.tableName,
          tableComment: this.form.tableComment,
          field: this.experienceData,
        };
        editTable(query)
          .then((res) => {
            this.$modal.msgSuccess(res.msg);
            if (res.code === 200) {
              this.visible = false;
              this.$emit("ok");
              Object.keys(this.form).forEach((key) => (this.form[key] = ""));
              this.experienceData = [];
              this.$tab.closePage().then(() => {
                this.$router.push({
                  path: "/data/datamodeling",
                });
              });
            }
          })
          .catch((err) => {
            console.log(err);
          });
        // 关闭当前页面
        this.$tab.closePage();
      });
    },
  },
};
</script>
<style scoped></style>