成都怎么成立网站,软件开发项目管理文档,常德网站设计,百度热搜电视剧主要负责处理表单数据的展示、编辑和提交#xff0c;以及与后端接口的交互。#xff08;处理选择地址、处理单选框选中、设置表单验证、提交表单、校验文件是否上传完成、处理上传文件等#xff09; 公共调用方法mixins文件
import HCommonPop from /components/comm… 主要负责处理表单数据的展示、编辑和提交以及与后端接口的交互。处理选择地址、处理单选框选中、设置表单验证、提交表单、校验文件是否上传完成、处理上传文件等 公共调用方法mixins文件
import HCommonPop from /components/commonPop/index;
import HCommonFormItem from /components/commonFormItem/index;
import { getSelectList } from /api/initProject;export default {data() {return {oldFormList: [],detailInfo: ,axiosInfo: {}};},components: {HCommonPop,HCommonFormItem},methods: {handleSelectAddress(val, label, row, level) {this.formList this.handleFindDataSetVal(this.formList, row.field, val);},handleCheckedRadio(val, row) {this.formList this.handleFindDataSetVal(this.formList, row.field, val);},handleSetFormValidate(treeList, fieldVal, val, keyList []) {if (!treeList || !treeList.length) {return;}treeList.forEach((item) {const formValidate item.formValidate;for (let key in formValidate) {if (keyList.length 0 ? keyList.includes(key) : key fieldVal) {formValidate[key][0].required val;}}this.handleSetFormValidate(item.children, fieldVal, val, keyList);});return treeList;},handleSetSubmitData(treeList, dataList) {if (!treeList || !treeList.length) {return [];}treeList.forEach((item) {if (item.purchasingInformation JSON.stringify(item.purchasingInformation) ! {} (item.display undefined || item.display true)) {const updateObj {};item.purchasingInformation.formLabel.forEach((label) {const field label.field;const formValue item.purchasingInformation.form[field];if (label.type check) {updateObj[field] Array.isArray(formValue) ? formValue.join(,) : formValue;} else if (label.type examine) {delete item.purchasingInformation.form[field];} else if (label.type upload) {updateObj[field] typeof formValue object ? JSON.stringify(formValue) : formValue;} else if (label.type textarea label.dataType multiple) {const textareaData JSON.parse(JSON.stringify(formValue));const textareaFilterData textareaData.filter((el) el.value ! );if (textareaFilterData.length 0) {textareaFilterData.forEach((el) {if (!el.disabled) {el.disabled true;el.userName this.userInfo.nickName;el.date new Date().format(yyyy-MM-dd hh:mm:ss);el.value ${el.date} ${el.userName}: ${el.value};}});}updateObj[field] textareaFilterData.length 0 ? JSON.stringify(textareaFilterData) : ;} else if (label.display) {updateObj[field] formValue;}});dataList.push(updateObj);}if (item.children) {this.handleSetSubmitData(item.children, dataList);}});return dataList;},// 寻找某个属性值handleFindDataInForm(treeList, field, myInfo, paramVal value) {if (!treeList || !treeList.length) {return myInfo;}for (const node of treeList) {const { purchasingInformation, children } node;if (purchasingInformation purchasingInformation.form.hasOwnProperty(field)) {const { formLabel } purchasingInformation;const matchingField formLabel.find(label label.field field);if (matchingField) {myInfo[paramVal] paramVal options? matchingField.options: purchasingInformation.form[field];return myInfo;}}this.handleFindDataInForm(children, field, myInfo, paramVal);}return myInfo;},handleChangeFormKeyVal() {},// 为某个属性赋值handleFindDataSetVal(treeList, field, val) {if (!treeList || !treeList.length) {return;}treeList.forEach((item) {const purchasingInformation item.purchasingInformation;if (purchasingInformation (item.display undefined || item.display true) purchasingInformation.form[field] ! undefined) {const formLabel purchasingInformation.formLabel;const targetLabel formLabel.find((label) label.field field);if (targetLabel) {purchasingInformation.form[field] val;}return;}this.handleFindDataSetVal(item.children, field, val);});return treeList;},submit() {this.$commonMessage.confrimMessage({ message: 是否保存, type: success },() {let myForm {imgData: [],list: []};let imgStatus this.handleCheckImgAndTable(this.formList,myForm,img);if (imgStatus.imgData.length 0) {this.$commonMessage.message({type: warning,message: 文件上传中请稍后});return;}this.handleSetAxiosData();});},//校验文件是否上传完成handleCheckImgAndTable(treeList, myForm, operatorType) {if (!treeList || !treeList.length) {return;}treeList.forEach((item) {const purchasingInformation item.purchasingInformation;if (purchasingInformation JSON.stringify(purchasingInformation) ! {}) {purchasingInformation.formLabel.forEach((label) {if (operatorType img label.type upload) {const uploadImgList label.uploadImgList;if (uploadImgList.some((el) !el.isUpload)) {myForm.imgData.push(1);} else {const chooseImgListOrigin label.chooseImgListOrigin;const imgList chooseImgListOrigin.map((item) item.new || item);purchasingInformation.form[label.field] imgList.length 0 ? JSON.stringify(imgList) : ;}}});}if (item.children) {this.handleCheckImgAndTable(item.children, myForm, operatorType);}});if (operatorType img) {myForm.list treeList;}return myForm;},handleCheckUpload(treeList, fieldInfo, fileList) {if (!treeList || !treeList.length) {return;}treeList.forEach((item) {if (item.$children item.$children.length 0 !item.$refs.rulesForm) {this.handleCheckUpload(item.$children, fieldInfo, fileList);} else {if (fileList.length 0) {const formRules item.$refs.rulesForm?item.$refs.rulesForm.rules:{};formRulesformRules[fieldInfo.field] item.$refs.rulesForm.clearValidate(fieldInfo.field);}}});},handleSelectChange() {},//上传文件的处理删除及添加handleImgInfo(val, file, info) {this.formList this.handleSetImgVal(this.formList, val, file, info);},//上传文件的处理删除及添加handleImgLoad(val, formInfo) {this.formList this.handleSetImgVal(this.formList, val, add, formInfo);},//上传文件的处理删除及添加handleSetImgVal(treeList, val, file, formInfo) {if (!treeList || !treeList.length) {return;}const node treeList.find((item) item.purchasingInformation item.purchasingInformation.form[formInfo.field] ! undefined);if (node) {for (let j 0; j node.purchasingInformation.formLabel.length; j) {if (node.purchasingInformation.formLabel[j].field formInfo.field) {const chooseImgListOrigin node.purchasingInformation.formLabel[j].chooseImgListOrigin;if (file delete) {const index chooseImgListOrigin.findIndex((ele) ele.id val.id || ele.uid val.uid);chooseImgListOrigin.splice(index, 1);} else if (file add) {this.$set(node.purchasingInformation.formLabel[j],uploadImgList,val);} else {chooseImgListOrigin.push({new: val,old: file,});this.handleCheckUpload(this.$refs.myFromItem.$children, formInfo, chooseImgListOrigin);}break;}}} else {treeList.forEach((item) {this.handleSetImgVal(item.children, val, file, formInfo);});}return treeList;},// 获取所有表单填写的formhandleGetFormData(formList) {let dataList [];let submitData this.handleSetSubmitData(JSON.parse(JSON.stringify(this[formList])),dataList);let submitObj {};submitData.forEach(el {submitObj {...submitObj,...el};});return submitObj;},handleCheckTreeFormValidate(treeList, myValidate) {if (!treeList || !treeList.length) {return;}treeList.forEach((item) {if (item item.$children item.$children.length 0 item.$refs !item.$refs.rulesForm) {this.handleCheckTreeFormValidate(item.$children, myValidate);} else if (item item.$refs item.$refs.rulesForm) {myValidate.push(new Promise((resolve, reject) {item.$refs.rulesForm.validate((valid, validObj) {if (valid) {resolve();} else {console.log(valid, validObj, valid, validObj);reject();}});}));}});return myValidate;},handleSetAxiosData(submitType, type) {let submitObj this.handleGetFormData(formList);let validate [];let validateList [];if (this.detailInfo.type edit this.detailInfo.page warehouse) {this.handleSubmitData(submitObj, type);return;}if (this.$refs.myFromItem.$children this.$refs.myFromItem.$children.length 0) {validateList this.handleCheckTreeFormValidate(this.$refs.myFromItem.$children,validate);}console.log(validateList, validateList);Promise.all(validateList).then(() {let ruleFlag false;if (this.$route.name AddRules) {let ruleFlagMsg this.handleValidateUp();if (ruleFlagMsg) {this.$commonMessage.message({type: warning,message: ${ruleFlagMsg}});ruleFlag true;}}if (!ruleFlag type ! examine) {this.handleSubmitData(submitObj, type);}if (type examine) {this.handleOperatorExamine(submitType, submitObj);}}).catch(() {this.$commonMessage.message({type: warning,message: 请完善信息并检查填写信息是否符合要求});});},// 数据回显handleUpdateForm(treeList, list, info) {if (!treeList || treeList.length 0) {return;}for (const item of treeList) {const {purchasingInformation, display} item;if (purchasingInformation Object.keys(purchasingInformation).length ! 0 (display undefined || display true)) {for (const formLabel of purchasingInformation.formLabel) {const {field, type, dataType, disabled} formLabel;let key field;let infoVal ;if (type upload) {infoVal info info[key] ? JSON.parse(info[key]) : this.axiosInfo[key] ? JSON.parse( this.axiosInfo[key]):;item.purchasingInformation.form[key] infoVal;if(infoVal) {formLabel.chooseImgListOrigin JSON.parse(JSON.stringify(infoVal));formLabel.fileList JSON.parse(JSON.stringify(infoVal));}if (disabled) {formLabel.initData infoVal ? JSON.stringify(infoVal) : ;}} else if (type textarea dataType multiple) {let inputValue ;if (this.axiosInfo[key] this.commonFunc.judgeIsArray(this.axiosInfo[key])) {const textareaValues JSON.parse(this.axiosInfo[key]);const textareaValue [{disabled: true,date: ,userName: ,value: }];for (let v 0; v textareaValues.length; v) {textareaValue[0].value textareaValues[v].value (textareaValues.length - 1 v ? : \n);}inputValue textareaValue;} else {inputValue this.axiosInfo[key]? [{date: ,userName: ,disabled: true,value: this.axiosInfo[key]}]: [{date: ,userName: ,disabled: false,value: }];}formLabel.deleteWord inputValue;item.purchasingInformation.form[key] inputValue;} else {item.purchasingInformation.form[key] this.axiosInfo[key] ! undefined this.axiosInfo[key] ! null this.axiosInfo[key] ! ? this.axiosInfo[key]: item.purchasingInformation.form[key] ! undefined item.purchasingInformation.form[key] ! item.purchasingInformation.form[key] ! null? item.purchasingInformation.form[key]: ;}}}if (item.children) {this.handleUpdateForm(item.children, list, info);}}return treeList;},// 判断是否需要调用接口显示下拉信息handleSetValForFormSelect(treeList, fieldVal, index) {if (!treeList || !treeList.length) {return;}for (let i 0; i treeList.length; i) {if (treeList[i].purchasingInformation JSON.stringify(treeList[i].purchasingInformation) ! {}) {for (let k 0;k treeList[i].purchasingInformation.formLabel.length;k) {if (treeList[i].purchasingInformation.formLabel[k].selectUrl) {this.handleGetSelectList(treeList[i].purchasingInformation.formLabel[k].selectUrl,treeList[i].purchasingInformation.formLabel[k],fieldVal,index);}if (treeList[i].purchasingInformation.formLabel[k].type examine) {this.handleGetFlowTask(treeList[i].purchasingInformation.formLabel[k],fieldVal,index);}}}if (treeList[i].children) {this.handleSetValForFormSelect(treeList[i].children, fieldVal, index);}}},// 获取form中select的下拉选async handleGetSelectList(url, obj, fieldVal, index, params) {let result await getSelectList(url, params);this[fieldVal] this.handleSetValForSelect(this[fieldVal],result,obj,normal);if (this.$route.name AddRules) {if (JSON.stringify(this.axiosInfo) ! {}) {this.handleSelectChange(this.axiosInfo.standardCode, standardCode);this.handleSelectChange(this.axiosInfo.checkType, checkType);}}},// 审核人下拉async handleGetFlowTask(obj, fieldVal, index) {if (this.isMineExamine) {await this.handleGetExamineInfo(obj, fieldVal, index);} else {}},// form中下拉赋值handleSetValForSelect(treeList, data, obj, index) {if (!treeList || !treeList.length) {return treeList;}for (let i 0; i treeList.length; i) {const purchasingInfo treeList[i].purchasingInformation;if (purchasingInfo purchasingInfo.form[obj.field] ! undefined) {const formLabel purchasingInfo.formLabel.find((label) label.field obj.field);if (formLabel) {const target index ! normal? formLabel.tableColumns[index]: formLabel;this.$set(target, options, data);}}this.handleSetValForSelect(treeList[i].children, data, obj, index);}return treeList;},handleSetFormDisabled(treeList,type,fieldListWidthFit [],fieldVal type,param selectUrl,paramVal /core/select/crm-dealer-type) {if (!treeList || !treeList.length) {return;}for (let i 0; i treeList.length; i) {const purchasingInformation treeList[i].purchasingInformation;for (let j 0; j purchasingInformation.formLabel.length; j) {if (type special) {if (fieldVal purchasingInformation.formLabel[j].field) {this.$set(purchasingInformation.formLabel[j], param, paramVal);}} else {if (type ! disabled) {this.$set(purchasingInformation.formLabel[j], disabled, true);}if (fieldListWidthFit.includes(purchasingInformation.formLabel[j].field)) {if (type disabled) {this.$set(purchasingInformation.formLabel[j], disabled, true);} else {this.$set(purchasingInformation.formLabel[j], widthFit, true);}}if (fieldVal purchasingInformation.formLabel[j].field) {this.$set(purchasingInformation.formLabel[j], param, );}}}this.handleSetFormDisabled(treeList[i].children);}return treeList;},handleGetDataToForm() {// 数据回显赋值this.formList this.handleUpdateForm(this.formList);},handleBackMessage() {this.$commonMessage.confrimMessage({ message: 有部分修改尚未保存确定要离开该页面吗?, type: success },() {this.handleBack();});},back() {console.log(back);let formList JSON.stringify(this.handleGetFormData(formList));if (this.oldFormList formList || this.detailInfo.type detail) {this.handleBack();return;}this.handleBackMessage();},handleBack() {this.$router.back();}},mounted() {// 下拉选赋值this.handleSetValForFormSelect(this.formList, formList);this.$nextTick(() {this.oldFormList JSON.stringify(this.handleGetFormData(formList));});},destroyed() {},created() {if (!this.isDialog) {this.$store.commit(setBoxBgVisible, false);this.detailInfo this.$route.query.detailInfo? window.atob(this.$route.query.detailInfo)? JSON.parse(decodeURIComponent(window.atob(this.$route.query.detailInfo))): {}: ;this.title this.detailInfo.title;}}
};
在vue文件中获取到详情数据回显 scriptexport default {methods: {getDetail() {// 接口请求 response返回的数据this.axiosInfo responsethis.handleGetDataToForm();},async handleSubmitData(submitObj) {let data {...submitObj,};接口(data).then(res{this.handleBack();this.$commonMessage.message({type: success,message: 保存成功!});})}}}
/script
