Source/UBCS-WEB/src/components/FormTemplate/index.vue

@@ -1,42 +1,191 @@
<template>

  <div>

  </div>

</template>



<script>

  import { getFormTemplate } from '../../api/common';

  export default {

    name: 'FormTemplate',

    props: {

      visible: {

        type: Boolean,

        default: false

      },

    },

    created() {

      this.getFormTemplate()

    },

    data() {

      return {

        load: false

      }

    },

    methods: {

      getFormTemplate() {

        this.load = true

        getFormTemplate({

          templateOid: '78B8C7C5-A042-0B96-FE6D-65421451782A',

          codeClassifyOid: '4524E801-6CC6-92E8-1AC3-2AB9604E8F96'

        }).then(res => {

          console.log(res);

        }).catch(err => {

          console.log(err);

        })

      }

    }

  }

</script>



<style lang='less' scoped>



</style>
<template>
  <el-dialog
    :visible.sync="dialogVisible"
    v-dialogDrag
    top="0vh"
    :title="title"
    class="avue-dialog avue-dialog--top"
    :width="width"
    append-to-body
    @opened="openDialog"
  >
    <FormTempalte
      v-bind="$attrs"
      :visible="visible"
      :type="type"
      :rowOid="rowOid"
      v-if="dialogVisible"
      ref="FormTempalte"
      @getFormTemplateEnd="getFormTemplate"
      @getFormData="getFormData"
    ></FormTempalte>

    <div
      class="tab_box"
      v-if="
        type !== 'detail' &&
        dialogVisible &&
        (showCodeApply || showResembleQuery)
      "
    >
      <el-tabs v-model="activeName" type="border-card" @tab-click="handleClick">
        <el-tab-pane label="码值申请" name="codeApply" v-if="showCodeApply">
          <CodeApply
            ref="CodeApply"
            v-bind="$attrs"
            @getCodeRuleOid="getCodeRuleOid"
          ></CodeApply>
        </el-tab-pane>
        <el-tab-pane
          label="相似项查询"
          name="resembleQuery"
          v-if="showResembleQuery"
        >
          <ResembleQuery
            v-bind="$attrs"
            ref="resembleQueryRef"
            :hasResemble="this.hasResemble"
            :column="this.resembleTableColumn"
            :form="this.form"
          ></ResembleQuery>
        </el-tab-pane>
      </el-tabs>
    </div>
    <div class="avue-dialog__footer" v-if="type !== 'detail'">
      <el-button @click="close()">取 消</el-button>
      <el-button @click="submit()" type="primary" :loading="submitBtnLoading"
        >确 定</el-button
      >
      <el-button
        @click="resembleQuerySubmit"
        type="primary"
        v-if="showResembleQuery"
        >相似像查询</el-button
      >
    </div>
  </el-dialog>
</template>

<script>
import FormTempalte from "./FormTempalte";
import ResembleQuery from "./ResembleQuery";
import CodeApply from "./CodeApply";
export default {
  name: "FormTemplateDialog",
  components: { ResembleQuery, FormTempalte, CodeApply },
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    type: {
      type: String,
      default: "add",
    },
    title: {
      type: String,
      default: "编码申请",
    },
    width: {
      type: String,
      default: "80%",
    },
    rowOid: ''
  },
  data() {
    return {
      loading: false,
      submitBtnLoading: false,
      hasResemble: false,
      resembleTableColumn: [],
      secVOList: [],
      form: {},
      activeName: "",
    };
  },
  created() {},
  computed: {
    dialogVisible: {
      get() {
        return this.visible;
      },
      set(val) {
        this.$emit("update:visible", val);
      },
    },
    showCodeApply() {
      // 测试数据展示
      // if (this.type === "add") {
      //   if (this.hasResemble && this.secVOList.length === 0) {
      //     return false;
      //   }
      // } else {
      //   return false;
      // }
      return true;
    },
    showResembleQuery() {
      return this.hasResemble;
    },
  },
  methods: {
    openDialog() {
      this.$nextTick(() => {
        this.$refs.FormTempalte.init();
        this.$refs.CodeApply.getCodeRule();
      });
    },
    close() {
      this.dialogVisible = false;
    },
    getCodeRuleOid(data) {
      this.secVOList = data.secVOList;
    },
    getFormTemplate(data) {
      this.hasResemble =
        data.resembleTableVO &&
        data.resembleTableVO.cols &&
        data.resembleTableVO.cols.length > 0;
      this.resembleTableColumn = data.resembleTableVO.cols || [];
      this.activeName =
        (this.showCodeApply && "codeApply") ||
        (this.showResembleQuery && "resembleQuery");
    },
    getFormData(form) {
      this.form = form;
    },
    resembleQuerySubmit() {
      this.$refs.resembleQueryRef.resembleQuery(this.form);
    },
    handleClick() {
      if (this.activeName === 'resembleQuery') {
        this.resembleQuerySubmit()
      }
    },
    async submit() {
      const formValidate = await this.$refs.FormTempalte.validate();
      let codeValidate = true;
      if (this.showCodeApply) {
        codeValidate = await this.$refs.CodeApply.validate();
      }
      this.$emit("submit", {
        form: this.form,
        flag: formValidate && codeValidate,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.key_attr_icon {
  font-size: 24px;
  position: relative;
  top: 2px;
  color: red;
}
// 解决swich组件不垂直居中的问题
/deep/ .el-switch {
  vertical-align: baseline;
}
</style>