qiangmj / report-ui

<template>
  <el-dialog
    :width="dialogWidth"
    :class="dialogFullScreen ? 'full-screen' : 'notfull-screen'"
    :close-on-click-modal="false"
    center
    :visible.sync="showDialog"
    :fullscreen="dialogFullScreen"
    @close="handleCloseDialog('close')"
  >
    <template v-slot:title>
      {{ option.title + "--" + modelType }}
      <button
        type="button"
        aria-label="Close"
        class="el-dialog__headerbtn"
        style="right: 50px"
        @click="dialogFullScreen = !dialogFullScreen"
      >
        <i class="el-dialog__close el-icon el-icon-full-screen" />
      </button>
    </template>

    <!--主表详情信息-->
    <component
      :is="'EditForm'"
      ref="mainForm"
      v-model="saveForm"
      :option="option"
      :model-type="modelType"
      :show-dialog="showDialog"
      @changeRowColNum="handleSetRowColNum"
    />

    <!--关联表相关-->
    <template v-for="(item, index) in joinEntitys">
      <component
        :is="getComponentByJoinType(item.joinType, item)"
        :ref="'joinForm' + index"
        :key="index"
        v-model="saveForm[item.fieldNameInMainEntityOnSave]"
        :value-new.sync="saveForm[item.fieldNameInMainEntityOnId]"
        :option="item"
        :model-type="modelType"
        :relate-data="saveForm"
      />

      <!--孙子的关联表-->
      <template v-for="(grandsonItem, grandsonIndex) in item.joinEntitys">
        <component
          :is="getComponentByJoinType(grandsonItem.joinType, grandsonItem)"
          ref="grandsonForm"
          :key="index + '.' + grandsonIndex"
          :option="grandsonItem"
          :model-type="modelType"
          :relate-data="saveForm"
        />
      </template>
    </template>

    <!--自定义的卡片插槽-->
    <slot name="customCard" />

    <div slot="footer" style="text-align: center">
      <slot v-if="modelType == 'edit'" name="editBtn" :rowData="rowData" />
      <el-button type="danger" plain @click="handleCloseDialog('close')"
        >关闭</el-button
      >
      <el-button
        v-if="modelType != 'view'"
        type="primary"
        plain
        @click="handleValidateAndSave"
        >保存</el-button
      >
    </div>
  </el-dialog>
</template>

<script>
import EditForm from "./edit-form";
import EditTable from "./edit-table";
export default {
  name: "EditDialog",
  components: { EditForm, EditTable },
  props: {
    visible: {
      type: [Boolean],
      default: () => {
        return false;
      }
    },
    rowData: {
      // 查询参数，对应表格那行数据
      type: [Object],
      default: () => {
        return {};
      }
    },
    // 预处理详情接口数据
    handleDetailData: {
      type: Function,
      default: data => {
        return data;
      }
    },
    // 预处理提交数据
    submitDetailData: {
      type: Function,
      default: (data, tpe) => {
        return data;
      }
    },
    modelType: String, // add view edit
    option: {
      require: true,
      type: Object,
      default: () => {
        return {
          title: "", // 页面标题
          labelWidth: "", // 表单输入框label宽度
          queryFormFields: [], // 查询表单条件
          buttons: {
            // 按钮
            query: {},
            edit: {},
            delete: {},
            add: {}
          },
          columns: [] // 表格列
        };
      }
    }
  },
  data() {
    return {
      showDialog: false, // 编辑详情弹框是否显示
      dialogFullScreen: false, // 弹出框全屏
      cardRowColNum: 2, // 主信息一行显示几列

      // 提交表单的数据
      saveForm: {},
      // 已成功校验的关联表单个数
      countForValidJoinForm: 0
    };
  },
  computed: {
    // 弹出框的宽度，根据一行显示几列动态调整
    dialogWidth() {
      if (this.cardRowColNum == 2) {
        return "60%";
      }
      if (this.cardRowColNum == 3) {
        return "70%";
      }
      if (this.cardRowColNum == 4) {
        return "80%";
      }
      return "60%";
    },
    // 关联属性表
    joinEntitys() {
      if (this.isBlank(this.option.joinEntitys)) {
        return [];
      } else {
        return this.option.joinEntitys;
      }
    },
    // 一对一关联表的个数
    countJoinEntityOneToOne() {
      let entitys = this.joinEntitys.filter(
        item => item["joinType"] == "OneToOne"
      );
      if (entitys == null) {
        return 0;
      }
      return entitys.length;
    }
  },
  watch: {
    // 监控dialog的显示隐藏变量
    visible(newValue, oldValue) {
      this.showDialog = newValue;
      // 为主表的编辑表单，渲染上默认值
      this.initDefaultSaveForm();
    },
    rowData(newValue, oldValue) {
      if (newValue != null) {
        this.queryByPrimarykey(newValue);
      }
    }
  },
  mounted() {
    // 为主表的编辑表单，渲染上默认值
    this.initDefaultSaveForm();
  },
  methods: {
    // 暴露给外部crud页面，回传saveForm的值
    getSaveForm() {
      return this.saveForm;
    },
    setSaveForm(saveForm) {
      this.saveForm = saveForm;
    },
    initDefaultSaveForm() {
      // saveForm的默认值
      let defaultSaveForm = {};
      this.option.columns.forEach(item => {
        let key = item.editField;
        if (this.isBlank(key)) {
          key = item.field;
        }
        let val = item.defaultValue;
        if (this.isNotBlank(val)) {
          defaultSaveForm[key] = val;
        }
      });
      // 为主表的编辑表单，渲染上默认值
      this.saveForm = this.deepClone(defaultSaveForm);
      console.log("编辑框默认值:" + JSON.stringify(this.saveForm));
    },
    handleCloseDialog(val) {
      // 为主表的编辑表单，渲染上默认值
      this.initDefaultSaveForm();
      this.showDialog = false; // 编辑详情弹框是否显示
      this.dialogFullScreen = false; // 弹出框全屏
      this.cardRowColNum = 2; // 主信息一行显示几列
      this.countForValidJoinForm = 0; // 已成功校验的关联表单个数
      this.$emit("closeEvent", val);
    },
    handleTopCloseDialog() {
      // 为主表的编辑表单，渲染上默认值
      this.initDefaultSaveForm();
      this.showDialog = false; // 编辑详情弹框是否显示
      this.dialogFullScreen = false; // 弹出框全屏
      this.cardRowColNum = 2; // 主信息一行显示几列
      this.countForValidJoinForm = 0; // 已成功校验的关联表单个数
    },
    // 设置一行显示几列
    handleSetRowColNum(num) {
      this.cardRowColNum = num;
    },
    // 根据关联类型计算组件
    getComponentByJoinType(type, item) {
      if (type == "OneToOne") {
        return "EditForm";
      } else if (type == "OneToMany") {
        return "EditTable";
      } else {
        return "";
      }
    },
    async queryByPrimarykey(rowData) {
      const { data, code } = await this.option.buttons.queryByPrimarykey.api(
        rowData
      );
      if (code != "200") return;
      this.showDialog = true;
      this.saveForm = this.handleDetailData(data);
    },
    // 保存前，先调用校验
    handleValidateAndSave() {
      this.countForValidJoinForm = 0;
      // 主表单校验
      this.$refs.mainForm.validate(mainValid => {
        if (mainValid == false) {
          console.warn("主表单校验失败");
          return;
        }
        console.log("主表单校验完成");
        if (this.joinEntitys == null || this.joinEntitys.length == 0) {
          // 如果子表没有信息，直接提交
          this.handleSave();
          return;
        }
        for (let i = 0; i < this.joinEntitys.length; i++) {
          console.log(`开始校验子表单-${i} 校验`);
          let item = this.joinEntitys[i];
          console.log(item);
          if (
            this.$refs["joinForm" + i] == null ||
            item.hide == true ||
            this.saveForm[item.fieldNameInMainEntityOnSave] == null ||
            this.saveForm[item.fieldNameInMainEntityOnSave].length == 0
          ) {
            console.warn("子表单校验失败");
          } else {
            const childrenChecked = this.checkedChildrenValidate(
              this.saveForm[item.fieldNameInMainEntityOnSave],
              item.columns
            );
            if (!childrenChecked) {
              return;
            }

            //  console.log('子表单没有数据，直接跳过')
            this.countForValidJoinForm++;
            console.log(
              "已经校验的子表单：" +
                this.countForValidJoinForm +
                " 共：" +
                this.joinEntitys.length
            );
            // 所有关联表单校验通过
            if (this.countForValidJoinForm == this.joinEntitys.length) {
              console.log("子表单校验完成，提交主表单");
              this.handleSave();
            }
            continue;
          }
          let joinForm = this.$refs["joinForm" + i];
          if (toString.call(joinForm) == "[object Array]") {
            joinForm = joinForm[0];
          }
          joinForm.validate(joinValid => {
            if (joinValid) {
              this.countForValidJoinForm++;
              console.log(
                "已经校验的子表单：" +
                  this.countForValidJoinForm +
                  " 共：" +
                  this.joinEntitys.length
              );
              // 所有关联表单校验通过
              if (this.countForValidJoinForm == this.joinEntitys.length) {
                console.log("子表单校验完成，提交主表单");
                this.handleSave();
              }
            } else {
              console.warn(`子表单${i}校验失败:`);
            }
          });
        }
      });
    },
    async handleSave() {
      const params = this.submitDetailData(this.saveForm, this.modelType);
      // 新增
      if (this.modelType == "add") {
        const { code, message } = await this.option.buttons.add.api(params);
        if (code == "200") {
          // 保存结束，关闭对话框
          this.handleCloseDialog();
          // 向外层发关闭事件
          // this.$emit('closeEvent')
          return;
        } else {
          // ;(this.countForValidJoinForm = 0), // 已成功校验的关联表单个数
          console.log(`提交表单调用新增接口失败：${message}`);
        }
      }
      // 修改
      if (this.modelType == "edit") {
        const { code, message } = await this.option.buttons.edit.api(params);
        if (code == "200") {
          // 保存结束，关闭对话框
          this.handleCloseDialog();
          // 向外层发关闭事件
          // this.$emit('closeEvent')
          return;
        } else {
          // ;(this.countForValidJoinForm = 0), // 已成功校验的关联表单个数
          console.log(`提交表单调用更新接口失败：${message}`);
        }
      }
    },
    // 子表单数据校验
    checkedChildrenValidate(list, confingList) {
      const configFileds = confingList.map(item => item.field);
      for (let i = 0; i < list.length; i++) {
        const item = list[i];
        for (let key = 0; key < configFileds.length; key++) {
          if (
            item.hasOwnProperty(configFileds[key]) &&
            !item[configFileds[key]]
          ) {
            return false;
          }
        }
      }
      return true;
    }
  }
};
</script>

<style scoped lang="scss">
.notfull-screen {
  ::v-deep.el-dialog__body {
    background-color: rgb(240, 242, 245);
    padding: 5px;
    max-height: 60vh;
    overflow: auto;
  }
}
.full-screen {
  ::v-deep.el-dialog__body {
    background-color: rgb(240, 242, 245);
    padding: 5px;
    height: calc(100vh - 110px);
    overflow: auto;
  }
}
</style>