|
|
|
@ -15,7 +15,7 @@ |
|
|
|
:placeholder="getPlaceholder()" v-model="inputValue" @input="onInputChange" @change="onInputChange" /> |
|
|
|
<el-select v-else-if="type === 'select'" class="flex1" :multiple="item.multiple" |
|
|
|
:class="getFillTypeStyle() + (orangeBg ? ' orange-bg' : '')" v-model="inputValue" |
|
|
|
:disabled="getDisabled()" :placeholder="getPlaceholder()" @visible-change="onSelectBlur" |
|
|
|
:disabled="getDisabled()" :placeholder="getPlaceholder()" @remove-tag = "onRemoveTag" @visible-change="onSelectBlur" |
|
|
|
@change="onInputChange"> |
|
|
|
<el-option v-for="op in item.options" :key="op.value" :label="op.label" :value="op.value"> |
|
|
|
</el-option> |
|
|
|
@ -34,10 +34,11 @@ |
|
|
|
</div> |
|
|
|
<!-- qc才能操作 --> |
|
|
|
<div class="handle-row" v-if="isShowHandle()"> |
|
|
|
<el-checkbox :checked = "getChecked()" v-if = "this.templateFillType === 'qc'" class="mr-5" @change="onCheckboxChange"></el-checkbox> |
|
|
|
<el-checkbox :checked="getChecked()" v-if="this.templateFillType === 'qc'" class="mr-5" |
|
|
|
@change="onCheckboxChange"></el-checkbox> |
|
|
|
<div class="handle-icon" v-if="getIsShowQuestionIcon()" @click="onClickQuestion" |
|
|
|
@mouseenter="(e) => onMouseEnter('replyRecord', e)" @mouseleave="onMouseLeave"> |
|
|
|
<Question :class="getQuestionColor()" /> |
|
|
|
<Question :class="getQuestionColor()" /> |
|
|
|
</div> |
|
|
|
<img v-if="getIsShowCopyIcon()" @click="onCopy" src="@/assets/images/copy-icon.svg" class="handle-icon" |
|
|
|
alt="" /> |
|
|
|
@ -81,9 +82,10 @@ |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<el-dialog append-to-body :title="templateFillType=='actFill'?'回复意见':'复核意见'" :visible.sync="visible" width="30%" > |
|
|
|
<el-input v-model="replyContent" type="textarea" show-word-limit |
|
|
|
resize="none" rows="8" placeholder="输入内容" maxlength = "500" /> |
|
|
|
<el-dialog append-to-body :title="templateFillType == 'actFill' ? '回复意见' : '复核意见'" :visible.sync="visible" |
|
|
|
width="30%"> |
|
|
|
<el-input v-model="replyContent" type="textarea" show-word-limit resize="none" rows="8" placeholder="输入内容" |
|
|
|
maxlength="500" /> |
|
|
|
<span slot="footer" class="dialog-footer"> |
|
|
|
<el-button @click="visible = false">取 消</el-button> |
|
|
|
<el-button type="primary" @click="onReplyConfirm">确 定</el-button> |
|
|
|
@ -97,9 +99,9 @@ import Question from "./icons/Question.vue"; |
|
|
|
import DecimalInput from "./DecimalInput.vue"; |
|
|
|
import { EventBus } from "@/utils/eventBus"; |
|
|
|
import moment from "moment"; |
|
|
|
import {deepClone} from "@/utils/index"; |
|
|
|
import { deepClone } from "@/utils/index"; |
|
|
|
export default { |
|
|
|
inject: ['templateFillType', "zdxgjl", "fhyjjl", "updateZdxgjl", "replaceFhyjjl", "updateFhyjjl","fieldCheckObj", "updateFieldCheckObj"], |
|
|
|
inject: ['templateFillType', "getZdxgjl", "getFhyjjl", "updateZdxgjl", "replaceFhyjjl", "updateFhyjjl", "getFieldCheckObj", "updateFieldCheckObj"], |
|
|
|
components: { |
|
|
|
Question, |
|
|
|
DecimalInput |
|
|
|
@ -155,8 +157,8 @@ export default { |
|
|
|
isHoveringMain: false, // 是否悬停在主元素上（这个实际上不需要，因为我们有事件处理） |
|
|
|
currentRecordType: '', // 当前悬停的记录类型（replyRecord 或 modifyRecord） |
|
|
|
replyContent: '', // 回复内容 |
|
|
|
visible:false,//是否显示弹窗 |
|
|
|
checked:false,//是否选中 |
|
|
|
visible: false,//是否显示弹窗 |
|
|
|
checked: false,//是否选中 |
|
|
|
} |
|
|
|
}, |
|
|
|
watch: { |
|
|
|
@ -173,8 +175,8 @@ export default { |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
|
|
|
|
getChecked(){ |
|
|
|
return !!this.fieldCheckObj[this.fieldKey]?.checked; |
|
|
|
getChecked() { |
|
|
|
return !!this.getFieldCheckObj()[this.fieldKey]?.checked; |
|
|
|
}, |
|
|
|
getFillTypeStyle(type) { |
|
|
|
const { fillType } = this.item; |
|
|
|
@ -190,7 +192,7 @@ export default { |
|
|
|
return typeObj[fillType] || "" |
|
|
|
}, |
|
|
|
//确认回复 |
|
|
|
onReplyConfirm(){ |
|
|
|
onReplyConfirm() { |
|
|
|
if (!this.replyContent) { |
|
|
|
this.$message({ |
|
|
|
message: '请输入内容', |
|
|
|
@ -202,33 +204,48 @@ export default { |
|
|
|
const record = { |
|
|
|
...baseInfo, |
|
|
|
title: this.templateFillType == 'actFill' ? "回复意见" : "复核意见", |
|
|
|
time: moment().format("YYYY-MM-DD HH:mm:ss"), |
|
|
|
} |
|
|
|
if(this.templateFillType == 'actFill'){ |
|
|
|
if (this.templateFillType == 'actFill') { |
|
|
|
record.replay = this.replyContent; |
|
|
|
const deepList = deepClone(this.fhyjjl);//实际填报应该是修改指定的字段 |
|
|
|
const deepList = deepClone(this.getFhyjjl());//实际填报应该是修改指定的字段 |
|
|
|
const item = deepList.find(o => o.key == record.key); |
|
|
|
if(item){ |
|
|
|
if (item) { |
|
|
|
item.replay = this.replyContent; |
|
|
|
} |
|
|
|
this.replaceFhyjjl(deepList);//实际填报应该是修改指定的字段 |
|
|
|
}else{ |
|
|
|
} else { |
|
|
|
const records = this.getReplyRecords(); |
|
|
|
record.content = this.replyContent; |
|
|
|
this.updateFhyjjl(record);//qc直接插入数据源 |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
const params = { |
|
|
|
type: "reply", |
|
|
|
newRecord: record, |
|
|
|
resourceList: deepClone(this.fhyjjl), |
|
|
|
if (records.length > 0) { |
|
|
|
const o = records[0]; |
|
|
|
if (o.reply && o.content) {//如果填报人员已回复，那么就产生一条新的记录。 |
|
|
|
this.updateFhyjjl(record);//qc直接插入数据源 |
|
|
|
} else {//如果填报人员未填报，只更新当条记录的复核内容 |
|
|
|
const deepList = deepClone(this.getFhyjjl()); |
|
|
|
const item = deepList.find(it => it.key == record.key); |
|
|
|
if (item) { |
|
|
|
item.content = this.replyContent; |
|
|
|
} |
|
|
|
this.replaceFhyjjl(deepList); |
|
|
|
} |
|
|
|
} else { |
|
|
|
this.updateFhyjjl(record);//qc直接插入数据源 |
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
const params = { |
|
|
|
type: "reply", |
|
|
|
newRecord: record, |
|
|
|
resourceList: deepClone(this.getFhyjjl()), |
|
|
|
} |
|
|
|
// 触发回复记录事件 |
|
|
|
EventBus.$emit('onModifyRecord', params); |
|
|
|
// 清空回复内容 |
|
|
|
this.replyContent = ''; |
|
|
|
// 隐藏弹窗 |
|
|
|
this.visible = false; |
|
|
|
|
|
|
|
|
|
|
|
}, |
|
|
|
//获取question图标颜色 |
|
|
|
getQuestionColor() { |
|
|
|
@ -249,20 +266,23 @@ export default { |
|
|
|
}, |
|
|
|
// 复选框变化处理 |
|
|
|
onCheckboxChange(val) { |
|
|
|
console.log(JSON.stringify({...this.fieldCheckObj,[this.fieldKey]:{checked:val}}),"kkk") |
|
|
|
// 触发修改记录事件 |
|
|
|
EventBus.$emit('onModifyRecord', { |
|
|
|
type: "checkbox", |
|
|
|
fieldCheckObj:JSON.stringify({...this.fieldCheckObj,[this.fieldKey]:{checked:val}}),//复选框状态对象 |
|
|
|
|
|
|
|
fieldCheckObj: JSON.stringify({ ...this.getFieldCheckObj(), [this.fieldKey]: { checked: val } }),//复选框状态对象 |
|
|
|
|
|
|
|
}); |
|
|
|
this.updateFieldCheckObj({[this.fieldKey]:{checked:val}}); |
|
|
|
this.updateFieldCheckObj({ [this.fieldKey]: { checked: val } }); |
|
|
|
// this.$emit('input', val); |
|
|
|
// this.$emit('change', val); |
|
|
|
}, |
|
|
|
onRemoveTag(e){ |
|
|
|
this.onCommonHandleSaveRecord(this.inputValue); |
|
|
|
}, |
|
|
|
// 下拉框失去焦点处理 |
|
|
|
onSelectBlur(visible) { |
|
|
|
if (!visible) { |
|
|
|
console.log(this.inputValue,"onSelectBlur") |
|
|
|
this.onCommonHandleSaveRecord(this.inputValue); |
|
|
|
} |
|
|
|
}, |
|
|
|
@ -286,15 +306,29 @@ export default { |
|
|
|
}, |
|
|
|
// 点击question图标 |
|
|
|
onClickQuestion() { |
|
|
|
if(this.templateFillType == 'actFill' || this.templateFillType){ |
|
|
|
const field = this.fieldCheckObj[this.fieldKey]; |
|
|
|
if(field && field.checked){ |
|
|
|
this.$message({ |
|
|
|
message: '该字段已勾选复核框，请先取消勾选后再进行提交疑问', |
|
|
|
type: 'error' |
|
|
|
}); |
|
|
|
return; |
|
|
|
const {templateFillType} = this; |
|
|
|
if (templateFillType == 'actFill' || templateFillType == 'qc') { |
|
|
|
if (templateFillType == 'qc') { |
|
|
|
const field = this.getFieldCheckObj()[this.fieldKey]; |
|
|
|
if (field && field.checked) { |
|
|
|
this.$message({ |
|
|
|
message: '该字段已勾选复核框，请先取消勾选后再进行提交疑问', |
|
|
|
type: 'error' |
|
|
|
}); |
|
|
|
return; |
|
|
|
} |
|
|
|
} |
|
|
|
const records = this.getReplyRecords(); |
|
|
|
let content = ""; |
|
|
|
if (records.length > 0) { |
|
|
|
const o = records[0]; |
|
|
|
if (!o.reply && templateFillType == 'qc') {//如果填报人员没有回复，qc点击的时候需要回填上次填报的信息 |
|
|
|
content = o.content; |
|
|
|
}else if(!o.content&& templateFillType == 'actFill'){//如果qc没有复核，填报点击的时候需要回填上次填报的信息 |
|
|
|
content = o.replay; |
|
|
|
} |
|
|
|
} |
|
|
|
this.replyContent = content; |
|
|
|
this.visible = true; |
|
|
|
} |
|
|
|
}, |
|
|
|
@ -310,7 +344,8 @@ export default { |
|
|
|
if (this.templateFillType === "actFill") { |
|
|
|
// 值发生了变化，需要弹出密码输入框 |
|
|
|
try { |
|
|
|
if (this.oldValue && this.oldValue !== this.inputValue) { |
|
|
|
const isSame = this.isEqual(this.oldValue, this.inputValue); |
|
|
|
if (this.oldValue && !isSame) { |
|
|
|
const passwordResult = await this.$prompt('请输入密码以确认修改', '密码验证', { |
|
|
|
confirmButtonText: '确定', |
|
|
|
cancelButtonText: '取消', |
|
|
|
@ -326,16 +361,18 @@ export default { |
|
|
|
oldValue: this.oldValue, |
|
|
|
value: this.inputValue, |
|
|
|
title: this.oldValue ? "修改记录" : "填写", |
|
|
|
time: moment().format("YYYY-MM-DD HH:mm:ss"), |
|
|
|
|
|
|
|
} |
|
|
|
const params = { |
|
|
|
type: "fieldChanged", |
|
|
|
newRecord: record, |
|
|
|
password: passwordResult, |
|
|
|
resourceList: deepClone(this.zdxgjl), |
|
|
|
resourceList: deepClone(this.getZdxgjl()), |
|
|
|
} |
|
|
|
this.$emit("onModifyRecord", params,) |
|
|
|
this.updateZdxgjl(record); |
|
|
|
|
|
|
|
|
|
|
|
console.log(params, "params") |
|
|
|
} |
|
|
|
//用户输入密码并点击确定，保存修改 |
|
|
|
@ -360,6 +397,17 @@ export default { |
|
|
|
} |
|
|
|
}, |
|
|
|
|
|
|
|
//判断两个值是否相等 |
|
|
|
isEqual(oldValue, nowValue){ |
|
|
|
if (oldValue === null || nowValue === null) { |
|
|
|
return oldValue === nowValue; |
|
|
|
} |
|
|
|
if (typeof oldValue === 'object' && typeof nowValue === 'object') { |
|
|
|
return JSON.stringify(oldValue) === JSON.stringify(nowValue); |
|
|
|
} |
|
|
|
return oldValue === nowValue; |
|
|
|
}, |
|
|
|
|
|
|
|
//获取公共记录信息 |
|
|
|
getCommonRecordInfo() { |
|
|
|
const { nickName, name } = this.$store.getters; |
|
|
|
@ -377,7 +425,6 @@ export default { |
|
|
|
userNameEn: name, |
|
|
|
key: this.fieldKey, |
|
|
|
field: `${this.fieldItemLabel}-${fieldLabel}`, |
|
|
|
time: moment().format("YYYY-MM-DD HH:mm:ss"), |
|
|
|
} |
|
|
|
return commonInfo; |
|
|
|
}, |
|
|
|
@ -409,7 +456,7 @@ export default { |
|
|
|
//判断是否显示操作按钮 |
|
|
|
isShowHandle() { |
|
|
|
//只有当模板状态不是预填时，才显示操作按钮 |
|
|
|
return this.templateFillType !== "preFill" |
|
|
|
return this.templateFillType !== "preFill" |
|
|
|
}, |
|
|
|
//判断是否禁用 |
|
|
|
getDisabled() { |
|
|
|
@ -460,14 +507,14 @@ export default { |
|
|
|
}, |
|
|
|
//获取回复记录 |
|
|
|
getReplyRecords() { |
|
|
|
const { fieldKey, fhyjjl = [] } = this; |
|
|
|
const records = fhyjjl.filter(item => item.key === fieldKey); |
|
|
|
const { fieldKey, getFhyjjl } = this; |
|
|
|
const records = getFhyjjl()?.filter(item => item.key === fieldKey) || []; |
|
|
|
return records; |
|
|
|
}, |
|
|
|
//获取字段修改记录 |
|
|
|
getModifyRecords() { |
|
|
|
const { fieldKey, zdxgjl = [] } = this; |
|
|
|
const records = zdxgjl.filter(item => item.key === fieldKey); |
|
|
|
const { fieldKey, getZdxgjl } = this; |
|
|
|
const records = getZdxgjl().filter(item => item.key === fieldKey); |
|
|
|
return records; |
|
|
|
}, |
|
|
|
// 鼠标进入主容器 |
|
|
|
@ -580,12 +627,13 @@ export default { |
|
|
|
.handle-icon { |
|
|
|
width: 18px; |
|
|
|
height: 18px; |
|
|
|
|
|
|
|
&:not(:last-child) { |
|
|
|
margin-right: 5px; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.mr-5{ |
|
|
|
.mr-5 { |
|
|
|
margin-right: 5px !important; |
|
|
|
} |
|
|
|
|
|
|
|
@ -797,7 +845,8 @@ export default { |
|
|
|
border-color: #f56c6c !important; |
|
|
|
} |
|
|
|
} |
|
|
|
.dialog-footer{ |
|
|
|
|
|
|
|
.dialog-footer { |
|
|
|
display: flex; |
|
|
|
justify-content: flex-end; |
|
|
|
} |
luojie
3 months ago