|
|
|
@ -1,7 +1,10 @@ |
|
|
|
import { isEqual } from "@/utils/index.js"; |
|
|
|
import _ from "lodash"; |
|
|
|
import { getuuid, isEqual } from "@/utils/index.js"; |
|
|
|
import { EventBus } from "@/utils/eventBus"; |
|
|
|
import moment from "moment"; |
|
|
|
export default { |
|
|
|
watch: { |
|
|
|
inject: ["getZdxgjl", "updateZdxgjl"], |
|
|
|
watch: { |
|
|
|
formData: { |
|
|
|
immediate: true, |
|
|
|
deep: true, // 深度监听,以便检测嵌套对象变化
|
|
|
|
@ -16,7 +19,7 @@ export default { |
|
|
|
deep: true, // 深度监听,以便检测嵌套对象变化
|
|
|
|
handler(v) { |
|
|
|
if (v) { |
|
|
|
console.log(v,"fieldItemLabel") |
|
|
|
console.log(v, "fieldItemLabel") |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
@ -28,15 +31,62 @@ export default { |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
data() { |
|
|
|
return { |
|
|
|
uuid: getuuid(), |
|
|
|
} |
|
|
|
}, |
|
|
|
mounted() { |
|
|
|
this.handleFormField(); |
|
|
|
EventBus.$on('onEditSignCallback', this.handleEditSignCallback); |
|
|
|
EventBus.$on('onFormEditSignCancel', this.handleEditSignCancel); |
|
|
|
}, |
|
|
|
unmounted() { |
|
|
|
this.formFields = {};//清空当前填写的数据
|
|
|
|
EventBus.$off('onEditSignCallback', this.handleEditSignCallback); |
|
|
|
EventBus.$off('onFormEditSignCancel', this.handleEditSignCancel); |
|
|
|
}, |
|
|
|
|
|
|
|
methods: { |
|
|
|
handleClickButton(key){ |
|
|
|
getRecords() { |
|
|
|
const records = []; |
|
|
|
const { nickName, name } = this.$store.getters; |
|
|
|
const { oldFormFields, formFields, allFieldsConfig, prefixKey, fieldItemLabel } = this; |
|
|
|
Object.keys(oldFormFields).forEach(key => { |
|
|
|
const item = allFieldsConfig[key]; |
|
|
|
const { label } = item; |
|
|
|
const oldValue = oldFormFields[key];; |
|
|
|
const newValue = formFields[key]; |
|
|
|
let fieldLabelCn = this.$i18n.t(label, "zh_CN"), fieldLabelEn = this.$i18n.t(label, "en_US"); |
|
|
|
if (!isEqual(oldValue, newValue)) { |
|
|
|
const record = { |
|
|
|
userNameCn: nickName, |
|
|
|
userNameEn: name, |
|
|
|
key: prefixKey + "_" + key, |
|
|
|
fieldCn: `${this.$i18n.t(fieldItemLabel, "zh_CN")}` + (fieldLabelCn ? ("-" + fieldLabelCn) : ""), |
|
|
|
fieldEn: `${this.$i18n.t(fieldItemLabel, "en_US")}` + (fieldLabelEn ? ("-" + fieldLabelEn) : ""), |
|
|
|
oldValue: oldValue, |
|
|
|
value: newValue, |
|
|
|
title: oldValue ? "修改" : "提交", |
|
|
|
time: moment().format("YYYY-MM-DD HH:mm:ss"), |
|
|
|
} |
|
|
|
this.updateZdxgjl(record); |
|
|
|
records.push(record); |
|
|
|
} |
|
|
|
}) |
|
|
|
return records; |
|
|
|
}, |
|
|
|
handleEditSignCancel(data) { |
|
|
|
if (data.uuid === this.uuid) { |
|
|
|
this.resetRecord(); |
|
|
|
} |
|
|
|
}, |
|
|
|
handleEditSignCallback(data) { |
|
|
|
if (data.uuid === this.uuid) { |
|
|
|
this.updateRecord(); |
|
|
|
} |
|
|
|
}, |
|
|
|
handleClickButton(key) { |
|
|
|
this.$emit("clickButton", key) |
|
|
|
}, |
|
|
|
getFillType(type) { |
|
|
|
@ -54,32 +104,84 @@ export default { |
|
|
|
this.$set(this.errors, key, false); |
|
|
|
} |
|
|
|
}, |
|
|
|
//批量更新表单数据
|
|
|
|
batchUpdateFormData(data) { |
|
|
|
const cloneFormFields = JSON.parse(JSON.stringify(this.formFields)); |
|
|
|
Object.keys(data).forEach(key => { |
|
|
|
this.oldFormFields[key] = cloneFormFields[key]; |
|
|
|
this.formFields[key] = data[key]; |
|
|
|
// 清除该表单项的错误状态
|
|
|
|
if (this.errors[key]) { |
|
|
|
this.$set(this.errors, key, false); |
|
|
|
} |
|
|
|
}) |
|
|
|
this.showEditSignDialog(); |
|
|
|
|
|
|
|
}, |
|
|
|
//更新表单数据
|
|
|
|
updateFormData(key, value) { |
|
|
|
// 深拷贝当前表单数据,避免直接修改原数据
|
|
|
|
const cloneFormFields = JSON.parse(JSON.stringify(this.formFields)); |
|
|
|
this.oldFormFields[key] = cloneFormFields[key]; |
|
|
|
this.updateRecord(); |
|
|
|
|
|
|
|
this.showEditSignDialog(); |
|
|
|
this.formFields[key] = value; |
|
|
|
// 清除该表单项的错误状态
|
|
|
|
if (this.errors[key]) { |
|
|
|
this.$set(this.errors, key, false); |
|
|
|
} |
|
|
|
}, |
|
|
|
updateRecord:_.debounce(function(){ |
|
|
|
console.log(this.oldFormFields,"oldFormFields") |
|
|
|
updateRecord() { |
|
|
|
const records = this.getRecords(); |
|
|
|
const params = { |
|
|
|
type: "fieldChanged", |
|
|
|
newRecord: records, |
|
|
|
resourceList: this.getZdxgjl(), |
|
|
|
} |
|
|
|
setTimeout(() => { |
|
|
|
EventBus.$emit('onModifyRecord', params,) |
|
|
|
}, 0); |
|
|
|
}, |
|
|
|
//更新记录
|
|
|
|
showEditSignDialog: _.debounce(function () { |
|
|
|
//如果oldFormFields中存在空值,说明是第一次填写,直接更新记录
|
|
|
|
const flag = Object.values(this.oldFormFields).some(item => !item); |
|
|
|
if (flag) { |
|
|
|
this.updateRecord(); |
|
|
|
}else{ |
|
|
|
const diff = this.compareOldAndCurrentFormFields(); |
|
|
|
if (!diff) { |
|
|
|
setTimeout(() => {//延迟200ms打开弹窗,避免弹窗打开时,会有闪烁
|
|
|
|
EventBus.$emit('showEditSignDialog', { uuid: this.uuid }); |
|
|
|
}, 200); |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
}, 100), |
|
|
|
//批量更新表单数据
|
|
|
|
batchUpdateFormData(data) { |
|
|
|
Object.keys(data).forEach(key => { |
|
|
|
this.formFields[key] = data[key]; |
|
|
|
// 清除该表单项的错误状态
|
|
|
|
if (this.errors[key]) { |
|
|
|
this.$set(this.errors, key, false); |
|
|
|
|
|
|
|
// 比较oldFormFields和formFields的值是否相等,只要有一对不相等就返回false
|
|
|
|
compareOldAndCurrentFormFields() { |
|
|
|
// 遍历oldFormFields,检查每个键值对
|
|
|
|
for (const key in this.oldFormFields) { |
|
|
|
if (this.oldFormFields.hasOwnProperty(key)) { |
|
|
|
const oldValue = this.oldFormFields[key]; |
|
|
|
const currentValue = this.formFields[key]; |
|
|
|
|
|
|
|
// 检查当前formFields中是否也包含此key,且值是否相等
|
|
|
|
if (this.formFields.hasOwnProperty(key)) { |
|
|
|
// 比较值是否相等
|
|
|
|
if (JSON.stringify(oldValue) !== JSON.stringify(currentValue)) { |
|
|
|
return false; |
|
|
|
} |
|
|
|
} else { |
|
|
|
// 如果formFields中没有此key,说明不相等
|
|
|
|
return false; |
|
|
|
} |
|
|
|
} |
|
|
|
}) |
|
|
|
} |
|
|
|
|
|
|
|
return true; |
|
|
|
}, |
|
|
|
|
|
|
|
handleClickable(sItem, event) { |
|
|
|
if (this.templateFillType !== 'actFill') { |
|
|
|
return |
|
|
|
@ -170,13 +272,13 @@ export default { |
|
|
|
} |
|
|
|
config[subKey] = { label: currentConfig.label, subKey, type: currentConfig.subType, fillType: currentConfig.subFillType || currentConfig.fillType, selectTo: currentConfig.selectTo } |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
// 检查compareTo字段
|
|
|
|
if (currentConfig.compareTo && formData[currentConfig.compareTo] && result[key]) { |
|
|
|
const compareToValue = formData[currentConfig.compareTo]; |
|
|
|
const currentValue = result[key]; |
|
|
|
this.compareFieldsIsEqual(currentValue,compareToValue,key) |
|
|
|
|
|
|
|
this.compareFieldsIsEqual(currentValue, compareToValue, key) |
|
|
|
|
|
|
|
} |
|
|
|
}); |
|
|
|
|
|
|
|
@ -191,10 +293,10 @@ export default { |
|
|
|
this.allFieldsConfig = config; |
|
|
|
}, |
|
|
|
//比较值是否相等
|
|
|
|
compareFieldsIsEqual(currentValue,compareToValue,key) { |
|
|
|
if(!currentValue || !compareToValue) return; |
|
|
|
compareFieldsIsEqual(currentValue, compareToValue, key) { |
|
|
|
if (!currentValue || !compareToValue) return; |
|
|
|
// 如果当前值与compareTo字段的值不相等,则设置橙色背景
|
|
|
|
if (isEqual(currentValue,compareToValue)) { |
|
|
|
if (isEqual(currentValue, compareToValue)) { |
|
|
|
// 如果相等,移除橙色背景(如果之前设置了的话)
|
|
|
|
this.$set(this.orangeBgFields, key, false); |
|
|
|
} else { |
|
|
|
@ -245,7 +347,7 @@ export default { |
|
|
|
continue |
|
|
|
} |
|
|
|
//span的字段不校验
|
|
|
|
if (o.type === "span" || o.type ==="text" || o.type === "button") { |
|
|
|
if (o.type === "span" || o.type === "text" || o.type === "button") { |
|
|
|
continue |
|
|
|
} |
|
|
|
if (o.fillType === this.templateFillType && !o.disabled) { |
|
|
|
@ -267,7 +369,7 @@ export default { |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
console.log(errors,"errors") |
|
|
|
console.log(errors, "errors") |
|
|
|
return { |
|
|
|
valid: errors.length === 0, |
|
|
|
errors: errors |
|
|
|
@ -317,13 +419,13 @@ export default { |
|
|
|
if (currentFieldConfig && currentFieldConfig.fillType === "actFill" && (currentFieldConfig.compareTo || compKey)) { |
|
|
|
const compareToKey = compKey || currentFieldConfig.compareTo; |
|
|
|
const compareToValue = this.formFields[compareToKey]; |
|
|
|
this.compareFieldsIsEqual(val,compareToValue,key); |
|
|
|
this.compareFieldsIsEqual(val, compareToValue, key); |
|
|
|
} |
|
|
|
}, |
|
|
|
onSelectChange(key, val, type) { |
|
|
|
// 获取对应的配置
|
|
|
|
const currentConfig = this.allFieldsConfig[key]; |
|
|
|
if(currentConfig.selectTo){ |
|
|
|
if (currentConfig.selectTo) { |
|
|
|
this.formFields[currentConfig.selectTo] = val; |
|
|
|
} |
|
|
|
this.onValueChangeCompareTo(key, val); |
|
|
|
@ -342,8 +444,8 @@ export default { |
|
|
|
this.onBlur(key, formFields[key]); |
|
|
|
} |
|
|
|
}, |
|
|
|
resetRecord(key){ |
|
|
|
this.formFields = {...this.formFields, ...this.oldFormFields}; |
|
|
|
resetRecord(key) { |
|
|
|
this.formFields = { ...this.formFields, ...this.oldFormFields }; |
|
|
|
this.oldFormFields = {}; |
|
|
|
this.$emit("resetRecord"); |
|
|
|
}, |
|
|
|
|