xiejun
2023-06-21 b5b28e8b9c639f49e69efc60684e68bf642d1092
Source/UBCS-WEB/src/components/FormTemplate/FormTempalte.vue
@@ -8,6 +8,7 @@
      v-loading="loading"
      ref="form"
      :style="{ minHeight: loading ? '300px' : '' }"
      :key="updateIndex"
    >
      <template :slot="item.prop + 'Label'" v-for="item in slotColumnList">
        <span>
@@ -26,8 +27,12 @@
      <template :slot="item.prop + ''" v-for="item in slotColumnList">
        <vciWebRefer
          v-if="item.type == 'refer'"
          :value="item.value"
          :options="item.referConfig || {}"
          :referConfig="item.referConfig || {}"
          :value="form[item.referConfig.field] || item.value"
          :text="form[item.referConfig.showField]"
          :disabled="item.disabled"
          :display="item.display"
          @setReferValue="setReferValue"
        ></vciWebRefer>
      </template>
    </avue-form>
@@ -35,7 +40,7 @@
</template>
<script>
import { getFormTemplate, getFormDetail } from "@/api/formTemplate";
import { getFormDetail } from "@/api/formTemplate";
import { getDictionary } from "../../api/system/dict";
import vciWebRefer from "../refer/vciWebRefer.vue";
export default {
@@ -78,7 +83,7 @@
  },
  data() {
    return {
      formIndex: 0,
      updateIndex: 0,
      form: {},
      option: {
        emptyBtn: false,
@@ -197,7 +202,7 @@
          tooltips: "请输入数字",
          type: "text",
          unique: false,
          verify: "/[0-9]/",
          verify: /^[0-9]+$/g,
        },
        {
          comboxKey: null,
@@ -497,31 +502,6 @@
    this.handleResize();
  },
  methods: {
    // 初始化
    init(columnList) {
      if (Array.isArray(columnList)) {
        this.templateRender(columnList);
      } else {
        this.getFormTemplate();
      }
    },
    // 接口获取表单数据
    getFormTemplate() {
      getFormTemplate({
        templateOid: this.templateOid,
        codeClassifyOid: this.codeClassifyOid,
      })
        .then((res) => {
          if (res.status === 200) {
            this.templateRender(res.data.formDefineVO.items);
            this.$emit("getFormTemplateEnd", res.data);
          }
        })
        .catch((err) => {
          this.loading = false;
          console.log(err);
        });
    },
    // 渲染表单模板
    templateRender(formItemList) {
      // 无需分组数据
@@ -538,6 +518,7 @@
            collapse: true,
            column: [],
          });
          return;
        }
        if (
          formItem.type === "combox" &&
@@ -575,17 +556,21 @@
          format: formItem.dateFormate,
          keyAttr: formItem.keyAttr,
          value: formItem.defaultValue,
          // tip: formItem.tooltips,
          // tipPlacement: "right",
          placeholder: formItem.inputTip,
          comboxKey: formItem.comboxKey,
          display: !formItem.hidden,
          maxlength: formItem.maxlength,
          filterable: true,
          referConfig:formItem.referConfig,
          change: () => {
            this.changeFun(formItem.displayExtension, formItem.prop);
          },
          referConfig:
            formItem.type == "refer"
              ? {
                  title: formItem.text,
                  showField: formItem.showField || formItem.field,
                  field: formItem.field,
                  placeholder: formItem.inputTip,
                  options: formItem.referConfig,
                }
              : {},
          span: formItem.type === "textarea" ? 24 : this.trendsSpan,
          rules: [
            {
@@ -615,10 +600,12 @@
      this.slotColumnList = slotColumnList;
      this.$set(this.option, "column", column);
      this.$set(this.option, "group", group);
      this.formIndex++;
      this.loading = false;
      this.updateIndex++;
      if (this.type === "add") {
        this.loading = false;
      }
      this.geDictData(dictKeys);
      this.getFormDetail()
      this.getFormDetail();
    },
    // 使用传入的表单数据配置
    resetFormConfig(formItem) {
@@ -655,7 +642,7 @@
    handleResize() {
      let windowWidth = document.body.clientWidth;
      this.trendsSpan = 24 / Math.floor(windowWidth / 500);
      this.formIndex++;
      this.updateIndex++;
    },
    // 前后缀
    preOrSufFixShow(type, val) {
@@ -664,11 +651,6 @@
      if ((type === "text" && !isIcon) || (type === "icon" && isIcon)) {
        return val;
      }
    },
    changeFun(displayExtension, prop) {
      // executeCode({displayExtension, data: this.form}).then(res => {
      //   this.form[prop] = res.data.data
      // })
    },
    // 获取swich和已拿到的下拉数据
    getDataList(type, dicData) {
@@ -709,26 +691,36 @@
      });
    },
    // 表单校验
     validate() {
    validate() {
      return new Promise((resolve) => {
        this.$refs.form.validate((valid, done, msg) => {
          console.error(msg, valid)
        if (valid) {
          resolve(true)
        } else {
          resolve(false);
        }
        this.$refs.form.validate((valid, done) => {
          if (valid) {
            done();
            resolve(true);
          } else {
            resolve(false);
          }
        });
      });
      })
    },
    // 获取表单数据
    // 获取表单详情数据
    getFormDetail() {
      if (this.type === 'add') return
      getFormDetail({templateOid: this.templateOid, oid: this.rowOid}).then(res => {
        console.log(res, 'res');
      })
    }
      if (this.type === "add") return;
      getFormDetail({ templateOid: this.templateOid, oid: this.rowOid }).then(
        (res) => {
          this.form = Object.assign(this.form, res.data.data[0]);
          this.loading = false;
        }
      );
    },
    setReferValue(data) {
      if (data.field) {
        this.form[data.field] = data.value || "";
        this.form[data.showField] = data.text || "";
        this.$emit("getFormData", this.form);
        this.$emit("referConfigDataUpdate", data);
      }
    },
  },
  watch: {
    // 表单数据修改反馈到父组件