| | |
| | | type: Object, |
| | | default: () => ({}), |
| | | }, |
| | | // 一行放几个表单 |
| | | trendsSpan: { |
| | | type: Number, |
| | | default: 8, |
| | | }, |
| | | }, |
| | | data() { |
| | | return { |
| | |
| | | date: "date", |
| | | refer: "refer", |
| | | }, |
| | | // 假数据 |
| | | testItems: [], |
| | | trendsSpan: 8, |
| | | defaultValue: {}, |
| | | // 表单属性 |
| | | attributes: [], |
| | |
| | | mounted() { |
| | | this.handleResize(); |
| | | }, |
| | | computed: { |
| | | localTrendsSpan() { |
| | | if (this.trendsSpan) { |
| | | return this.trendsSpan; |
| | | } else { |
| | | let windowWidth = document.body.clientWidth; |
| | | return 24 / Math.floor(windowWidth / 500); |
| | | } |
| | | }, |
| | | }, |
| | | methods: { |
| | | // 渲染表单模板 |
| | | templateRender(formItemList) { |
| | | console.log(formItemList, "formItemList"); |
| | | // 无需分组数据 |
| | | let column = []; |
| | | let group = []; |
| | |
| | | if ( |
| | | formItem.type === "combox" && |
| | | formItem.comboxKey && |
| | | (!Array.isArray(formItem.dicData) || formItem.dicData.length === 0) &&(!Array.isArray(formItem.data) || formItem.data.length === 0) |
| | | (!Array.isArray(formItem.dicData) || formItem.dicData.length === 0) && |
| | | (!Array.isArray(formItem.data) || formItem.data.length === 0) |
| | | ) { |
| | | dictKeys.push({ dictKey: formItem.comboxKey, field: formItem.field }); |
| | | } |
| | |
| | | if (this.disabledProp.includes(formItem.field)) { |
| | | formItem.readOnly = true; |
| | | } |
| | | if(formItem.field=='lcstatus'){ |
| | | formItem.field=formItem.field+'_text'; |
| | | if (formItem.field == "lcstatus") { |
| | | formItem.field = formItem.field + "_text"; |
| | | formItem.readOnly=true; |
| | | } |
| | | // 设置表单校验的规则,文本 |
| | |
| | | options: formItem.referConfig, |
| | | } |
| | | : {}, |
| | | span: formItem.span ? formItem.span : formItem.type === "textarea" ? 24 : this.trendsSpan, |
| | | span: formItem.span |
| | | ? formItem.span |
| | | : formItem.type === "textarea" |
| | | ? 24 |
| | | : this.localTrendsSpan, |
| | | rules: [ |
| | | { |
| | | required: formItem.required, |
| | |
| | | } |
| | | }); |
| | | this.slotColumnList = slotColumnList; |
| | | console.log(column, "column"); |
| | | this.$set(this.option, "column", column); |
| | | this.$set(this.option, "group", group); |
| | | this.updateIndex++; |
| | |
| | | }, |
| | | // 根据屏幕动态配置表单布局 |
| | | handleResize() { |
| | | let windowWidth = document.body.clientWidth; |
| | | this.trendsSpan = 24 / Math.floor(windowWidth / 500); |
| | | this.updateIndex++; |
| | | // let windowWidth = document.body.clientWidth; |
| | | // this.trendsSpan = 24 / Math.floor(windowWidth / 500); |
| | | // this.updateIndex++; |
| | | }, |
| | | // 前后缀 |
| | | preOrSufFixShow(type, val) { |
| | |
| | | codefixedsec: "combox", |
| | | codeclassifysec: "refer", |
| | | codevariablesec: "text", |
| | | codeattrsec: "text", |
| | | codelevelsec: "text", |
| | | coderefersec: "refer", |
| | | codedatesec: "date" |
| | | }, |
| | | selfColumnConfig: { |
| | | function: { |
| | |
| | | label: "name", |
| | | maxlength: "codeSecLength", |
| | | data: "fixedValueVOList", |
| | | dateFormate: "codeDateFormatStr" |
| | | }, |
| | | directVoluation: { |
| | | search: true, |
| | |
| | | "codeclassifysec", |
| | | "codevariablesec", |
| | | "coderefersec", |
| | | "codeattrsec", |
| | | "codelevelsec", |
| | | "codedatesec" |
| | | ]; |
| | | this.secVOList = (res.data.data.secVOList || []).filter((item) => |
| | | typeList.includes(item.secType) |
| | |
| | | <el-tabs v-model="activeName" type="border-card" @tab-click="handleClick"> |
| | | <el-tab-pane label="最大流水号" name="codeApply"> |
| | | <form-template v-bind="$attrs" type="add" :selfColumnType="selfColumnType" |
| | | :trendsSpan="24" |
| | | :selfColumnConfig="selfColumnConfig" ref="CodeApply" @getFormData="getCodeApplyFormData" |
| | | @referConfigDataUpdate="referConfigDataUpdate"></form-template> |
| | | </el-tab-pane> |
| | |
| | | }, |
| | | selfColumnConfig: { |
| | | handler(newval) { |
| | | console.log('selfColumnConfig', newval) |
| | | // console.log('selfColumnConfig', newval) |
| | | }, |
| | | immediate: true, |
| | | deep: true |
| | |
| | | codefixedsec: "combox", |
| | | codeclassifysec: "refer", |
| | | codevariablesec: "text", |
| | | codeattrsec: "text", |
| | | codelevelsec: "text", |
| | | coderefersec: "refer", |
| | | codedatesec: "date", |
| | | }, |
| | | selfColumnConfig: { |
| | | function: { |
| | |
| | | label: "name", |
| | | maxlength: "codeSecLength", |
| | | data: "fixedValueVOList", |
| | | dateFormate: "codeDateFormatStr" |
| | | }, |
| | | directVoluation: { |
| | | search: true, |
| | |
| | | methods: { |
| | | // 获取码段 |
| | | async apiGetCode() { |
| | | this.activeName = "codeApply"; |
| | | const response = await getCodePrice({ ruleOid: this.ruleOid }) |
| | | const res = response.data |
| | | if (res.success && res.code === 200) { |
| | | console.log(response) |
| | | const typeList = [ |
| | | "codefixedsec", |
| | | "codeclassifysec", |
| | | "codevariablesec", |
| | | "coderefersec", |
| | | "codeattrsec", |
| | | "codelevelsec", |
| | | "codedatesec" |
| | | ]; |
| | | this.secVOList = (res.data.secVOList || []).filter((item) => |
| | | typeList.includes(item.secType) |
| | | ); |
| | | console.log(this.secVOList) |
| | | if (this.secVOList.length > 0) { |
| | | // this.showCodeApply = true; |
| | | this.activeName = "codePrice"; |
| | | |
| | | this.$nextTick(() => { |
| | | this.$refs.CodeApply.templateRender(this.secVOList); |
| | | }); |
| | |
| | | } |
| | | }, |
| | | handleClick(tab, event) { |
| | | console.log(event) |
| | | // console.log(event) |
| | | }, |
| | | getCodeApplyFormData(codeApplyForm) { |
| | | this.codeApplyForm = codeApplyForm; |
| | | }, |
| | | // 参照组件数据变更 |
| | | referConfigDataUpdate(data) { |
| | | console.log(data) |
| | | // console.log(data) |
| | | const { field } = data; |
| | | this.secVOList = this.secVOList.map((item) => { |
| | | if (item.parentClassifySecOid === field) { |
| | |
| | | } |
| | | return item; |
| | | }); |
| | | console.log(this.secVOList) |
| | | // console.log(this.secVOList) |
| | | this.$refs.CodeApply.templateRender(this.secVOList); |
| | | }, |
| | | isRequired(item) { |
| | |
| | | } |
| | | }, |
| | | getReferConfig(item) { |
| | | console.log(item) |
| | | // console.log(item) |
| | | let params = {}; |
| | | if (item.secType == "codeclassifysec") { |
| | | params = { |
| | |
| | | } else if (item.secType == "coderefersec") { |
| | | params = JSON.parse(item.referValueInfo); |
| | | } |
| | | console.log(params) |
| | | // console.log(params) |
| | | return params; |
| | | |
| | | }, |
| | |
| | | <div v-show="form.secType==='codedatesec' ? true:false"> |
| | | <el-form-item label="日期格式:" :label-width="rightFormLabelWidth" required> |
| | | <el-input ref="codeDateFormatStr" v-model="form.codeDateFormatStr" :readonly="basicSecOnlyRead"></el-input> |
| | | <span style="font-size: 12px;color: red"><i class="el-icon-warning"></i><i>日期格式请遵守 <a style="color: red;text-decoration: underline" target="_blank" href="https://v2.avuejs.com/form/form-date/#%E6%97%A5%E6%9C%9F%E6%A0%BC%E5%BC%8F%E5%8C%96">该标准</a></i></span> |
| | | </el-form-item> |
| | | </div> |
| | | <!-- 分类码段 --> |