| | |
| | | v-loading="loading" |
| | | ref="form" |
| | | :style="{ minHeight: loading ? '300px' : '' }" |
| | | :key="updateIndex" |
| | | > |
| | | <template :slot="item.prop + 'Label'" v-for="item in slotColumnList"> |
| | | <span> |
| | |
| | | <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> |
| | |
| | | </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 { |
| | |
| | | }, |
| | | data() { |
| | | return { |
| | | formIndex: 0, |
| | | updateIndex: 0, |
| | | form: {}, |
| | | option: { |
| | | emptyBtn: false, |
| | |
| | | tooltips: "请输入数字", |
| | | type: "text", |
| | | unique: false, |
| | | verify: "/[0-9]/", |
| | | verify: /^[0-9]+$/g, |
| | | }, |
| | | { |
| | | comboxKey: null, |
| | |
| | | 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) { |
| | | // 无需分组数据 |
| | |
| | | collapse: true, |
| | | column: [], |
| | | }); |
| | | return; |
| | | } |
| | | if ( |
| | | formItem.type === "combox" && |
| | |
| | | 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: [ |
| | | { |
| | |
| | | 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) { |
| | |
| | | handleResize() { |
| | | let windowWidth = document.body.clientWidth; |
| | | this.trendsSpan = 24 / Math.floor(windowWidth / 500); |
| | | this.formIndex++; |
| | | this.updateIndex++; |
| | | }, |
| | | // 前后缀 |
| | | preOrSufFixShow(type, val) { |
| | |
| | | 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) { |
| | |
| | | }); |
| | | }, |
| | | // 表单校验 |
| | | 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: { |
| | | // 表单数据修改反馈到父组件 |