Browse Source

feat:[模板管理][暂存]

ouqian
luojie 1 month ago
parent
commit
36f18c146f
4 changed files with 115 additions and 90 deletions
  1. +2
    -1
      src/components/Template/CustomTable.vue
  2. +106
    -87
      src/components/Template/HandleFormItem.vue
  3. +0
    -1
      src/components/Template/mixins/formPackageMixins.js
  4. +7
    -1
      src/views/business/comps/template/comps/yp/YP003.vue

+ 2
- 1
src/components/Template/CustomTable.vue View File

@ -325,9 +325,10 @@ export default {
this.justUpdateFilledFormData(); this.justUpdateFilledFormData();
}, },
onCheckboxTagChange(rowIndex, colIndex, col, tagIndex, value) { onCheckboxTagChange(rowIndex, colIndex, col, tagIndex, value) {
console.log(value,"vvv")
this.localDataSource[rowIndex][col.prop][tagIndex] = value; this.localDataSource[rowIndex][col.prop][tagIndex] = value;
this.onErrorUpdate(rowIndex, colIndex, col.prop, value?false:true); this.onErrorUpdate(rowIndex, colIndex, col.prop, value?false:true);
this.$emit("onCheckboxTagChange", rowIndex, col, tagIndex, value)
this.$emit("onCheckboxTagChange", rowIndex, col, this.localDataSource[rowIndex][col.prop])
}, },
handleClickButton(e, data, key, rowIndex, colIndex) { handleClickButton(e, data, key, rowIndex, colIndex) {
this.$emit("clickButton", key, rowIndex, colIndex, e, data,) this.$emit("clickButton", key, rowIndex, colIndex, e, data,)

+ 106
- 87
src/components/Template/HandleFormItem.vue View File

@ -24,12 +24,11 @@
:class="getFillTypeStyle() + (orangeBg ? ' orange-bg' : '')" v-model="inputValue" :class="getFillTypeStyle() + (orangeBg ? ' orange-bg' : '')" v-model="inputValue"
:disabled="getDisabled()" :placeholder="getPlaceholder()" @change="onItemCheckboxChange"> :disabled="getDisabled()" :placeholder="getPlaceholder()" @change="onItemCheckboxChange">
</el-checkbox> </el-checkbox>
<el-radio-group v-else-if="type === 'radio'" v-model="inputValue"
:class="getFillTypeStyle() + (orangeBg ? ' orange-bg' : '')"
:disabled="getDisabled()"
@change="onItemCheckboxChange"
>
<el-radio v-for="option in item.options" :key="option.value" :label="option.value" :disabled="getDisabled()">
<el-radio-group v-else-if="type === 'radio'" v-model="inputValue"
:class="getFillTypeStyle() + (orangeBg ? ' orange-bg' : '')" :disabled="getDisabled()"
@change="onItemCheckboxChange">
<el-radio v-for="option in item.options" :key="option.value" :label="option.value"
:disabled="getDisabled()">
{{ option.label }} {{ option.label }}
</el-radio> </el-radio>
</el-radio-group> </el-radio-group>
@ -41,11 +40,10 @@
{{ option.label }} {{ option.label }}
</el-checkbox> </el-checkbox>
<div v-if="option.otherCode && inputValue.includes(option.value)"> <div v-if="option.otherCode && inputValue.includes(option.value)">
<el-input v-model="otherValues[option.otherCode]"
:placeholder="option.otherPlaceholder || '请输入'"
:class="{ 'error-border': isOtherInputError(option.otherCode) }"
@blur="onBlur"
@input="onOtherInputChange(option.otherCode, $event)" />
<el-input v-model="otherValues[option.otherCode]"
:placeholder="option.otherPlaceholder || '请输入'"
:class="{ 'error-border': isOtherInputError(option.otherCode) }" @blur="onBlur"
@input="onOtherInputChange(option.otherCode, $event)" />
</div> </div>
</div> </div>
</el-checkbox-group> </el-checkbox-group>
@ -63,7 +61,7 @@
<el-button v-else-if="type === 'button'" :class="getFillTypeStyle() + (orangeBg ? ' orange-bg' : '')" <el-button v-else-if="type === 'button'" :class="getFillTypeStyle() + (orangeBg ? ' orange-bg' : '')"
:disabled="getDisabled()" type="primary" @click="handleClickButton(item)"> :disabled="getDisabled()" type="primary" @click="handleClickButton(item)">
{{ $t(item.buttonName) }} {{ $t(item.buttonName) }}
<input type="hidden" v-model="inputValue" >
<input type="hidden" v-model="inputValue">
</el-button> </el-button>
<div class="clickable" <div class="clickable"
@ -92,28 +90,19 @@
<div v-else-if="type === 'checkboxTag'" class="flex1 checkbox-tag-container" <div v-else-if="type === 'checkboxTag'" class="flex1 checkbox-tag-container"
:class="getFillTypeStyle() + (orangeBg ? ' orange-bg' : '')"> :class="getFillTypeStyle() + (orangeBg ? ' orange-bg' : '')">
<div class="checkbox-tag-item"> <div class="checkbox-tag-item">
<el-checkbox v-model="checkboxTagChecked" :disabled="getDisabled()" @change="onCheckboxTagChange"></el-checkbox>
<el-checkbox v-model="checkboxTagChecked" :disabled="getDisabled()"
@change="onCheckboxTagChange"></el-checkbox>
<div class="tag-content blue-border"> <div class="tag-content blue-border">
<el-input
v-if = "templateFillType === 'preFill'"
v-model="tagValue"
ref="tagInput"
:maxlength="item.maxlength || 20"
@blur="onTagBlur"
@keyup.enter.native="onTagBlur"
placeholder="请输入"
size="mini"
class="tag-input" />
<el-tag
v-else
:type="'info'"
class="tag-display"
:closable="false">
{{ tagValue}}
<el-input v-if="templateFillType === 'preFill'" v-model="tagValue" ref="tagInput"
:maxlength="item.maxlength || 20" @blur="onTagBlur" @keyup.enter.native="onTagBlur"
placeholder="请输入" size="mini" class="tag-input" />
<el-tag v-else :type="'info'" class="tag-display" :closable="false">
{{ tagValue }}
</el-tag> </el-tag>
<el-popconfirm confirm-button-text='确认' cancel-button-text='取消' icon="el-icon-info" icon-color="red"
title="确认删除当前编号?" @confirm="onDeleteTag">
<i slot="reference" v-if = "templateFillType === 'preFill'" class="el-icon-close delete-icon"></i>
<el-popconfirm confirm-button-text='确认' cancel-button-text='取消' icon="el-icon-info"
icon-color="red" title="确认删除当前编号?" @confirm="onDeleteTag">
<i slot="reference" v-if="templateFillType === 'preFill'"
class="el-icon-close delete-icon"></i>
</el-popconfirm> </el-popconfirm>
</div> </div>
@ -248,23 +237,23 @@ export default {
}, },
data() { data() {
let initialValue = this.value; let initialValue = this.value;
let initialOtherValues = {},checkboxTagChecked = false,tagValue = '';
let initialOtherValues = {}, checkboxTagChecked = false, tagValue = '';
// checkboxListvalue // checkboxListvalue
if (this.type === 'checkboxList' && this.value && typeof this.value === 'object') { if (this.type === 'checkboxList' && this.value && typeof this.value === 'object') {
initialValue = this.value.checkboxValues || []; initialValue = this.value.checkboxValues || [];
initialOtherValues = this.value.otherValues || {}; initialOtherValues = this.value.otherValues || {};
} else if (this.type === 'checkboxList' && !Array.isArray(this.value)) { } else if (this.type === 'checkboxList' && !Array.isArray(this.value)) {
initialValue = []; initialValue = [];
}else if (this.type === 'checkboxTag' && this.value && typeof this.value === 'object') {
checkboxTagChecked = this.value.checked || false;
} else if (this.type === 'checkboxTag' && this.value && typeof this.value === 'object') {
checkboxTagChecked = this.value.checked;
tagValue = this.value.tagValue || ''; tagValue = this.value.tagValue || '';
} }
return { return {
inputValue: initialValue, inputValue: initialValue,
oldValue: initialValue, // oldValue: initialValue, //
otherValues: initialOtherValues, // checkboxListotherCode otherValues: initialOtherValues, // checkboxListotherCode
oldOtherValues: {...initialOtherValues}, // otherValues
oldOtherValues: { ...initialOtherValues }, // otherValues
showModal: false, // showModal: false, //
modificationRecords: [], // modificationRecords: [], //
modalTimer: null, // modalTimer: null, //
@ -275,6 +264,7 @@ export default {
visible: false,// visible: false,//
checkboxValue: this.getChecked(),// checkboxValue: this.getChecked(),//
checkboxTagChecked: checkboxTagChecked, // checkboxTagcheckbox checkboxTagChecked: checkboxTagChecked, // checkboxTagcheckbox
oldCheckboxTagChecked: checkboxTagChecked, // checkboxTagcheckbox
tagValue: tagValue, // checkboxTagtag tagValue: tagValue, // checkboxTagtag
uuid: getuuid(), // EventBus uuid: getuuid(), // EventBus
regentType: ['sj', 'gsp', 'mix', 'xj', 'xb', 'gyzj', 'mjy', 'yq', 'jcb', 'qxbd'], //// regentType: ['sj', 'gsp', 'mix', 'xj', 'xb', 'gyzj', 'mjy', 'yq', 'jcb', 'qxbd'], ////
@ -290,7 +280,7 @@ export default {
}, },
watch: { watch: {
value(newVal) { value(newVal) {
console.log(newVal,"newVal")
console.log(newVal, "newVal")
if (this.type === 'checkboxList' && newVal && typeof newVal === 'object') { if (this.type === 'checkboxList' && newVal && typeof newVal === 'object') {
this.inputValue = newVal.checkboxValues || []; this.inputValue = newVal.checkboxValues || [];
this.otherValues = newVal.otherValues || {}; this.otherValues = newVal.otherValues || {};
@ -333,13 +323,13 @@ export default {
EventBus.$off("onMixReagentSubmit", this.onMixReagentSubmit) EventBus.$off("onMixReagentSubmit", this.onMixReagentSubmit)
}, },
methods: { methods: {
getFlexClass(){
const noFlexArr = ["radio","checkboxTag"]
getFlexClass() {
const noFlexArr = ["radio", "checkboxTag"]
return noFlexArr.includes(this.type) ? '' : 'flex1' return noFlexArr.includes(this.type) ? '' : 'flex1'
}, },
getDecimalDigits(){
const {precision} = this.item;
if(!isNaN(precision)){
getDecimalDigits() {
const { precision } = this.item;
if (!isNaN(precision)) {
return precision return precision
} }
return 6 return 6
@ -531,11 +521,11 @@ export default {
// //
executeReagentSubmit(data) { executeReagentSubmit(data) {
this.inputValue = data.selectedId; this.inputValue = data.selectedId;
const {filledCodes=[]} = this.item;
console.log(filledCodes,"filledCodes")
const {selectInfo,row} = data;
if(filledCodes.length>0){
this.inputValue = row[filledCodes[0]]+"("+row[filledCodes[1]]+")";
const { filledCodes = [] } = this.item;
console.log(filledCodes, "filledCodes")
const { selectInfo, row } = data;
if (filledCodes.length > 0) {
this.inputValue = row[filledCodes[0]] + "(" + row[filledCodes[1]] + ")";
} }
this.selectRegentInfo = data; this.selectRegentInfo = data;
EventBus.$emit("hideSelectMixReagentDialog"); EventBus.$emit("hideSelectMixReagentDialog");
@ -779,7 +769,7 @@ export default {
// checkbox // checkbox
if (this.oldValue && Array.isArray(this.oldValue)) { if (this.oldValue && Array.isArray(this.oldValue)) {
const uncheckedValues = this.oldValue.filter(oldVal => !this.inputValue.includes(oldVal)); const uncheckedValues = this.oldValue.filter(oldVal => !this.inputValue.includes(oldVal));
// checkboxotherValues // checkboxotherValues
if (uncheckedValues.length > 0) { if (uncheckedValues.length > 0) {
this.item.options.forEach(option => { this.item.options.forEach(option => {
@ -790,19 +780,19 @@ export default {
} }
} }
value = { value = {
checkboxValues: this.inputValue,
otherValues: this.otherValues
};
if(val){
checkboxValues: this.inputValue,
otherValues: this.otherValues
};
if (val) {
this.onCommonHandleSaveRecord(); this.onCommonHandleSaveRecord();
} }
} }
this.$emit('input', value); this.$emit('input', value);
this.$emit('change', value); this.$emit('change', value);
// //
const isEmpty = this.isValueEmpty(value); const isEmpty = this.isValueEmpty(value);
@ -818,7 +808,8 @@ export default {
this.onInputChange(); this.onInputChange();
}, },
// checkboxTagcheckbox // checkboxTagcheckbox
onCheckboxTagChange() {
onCheckboxTagChange(e) {
this.checkboxTagChecked = e;
this.emitCheckboxTagValue(); this.emitCheckboxTagValue();
this.onCommonHandleSaveRecord(); this.onCommonHandleSaveRecord();
}, },
@ -917,19 +908,24 @@ export default {
this.$emit("change", this.inputValue); this.$emit("change", this.inputValue);
return; return;
} }
// //
const isSame = this.isEqual(this.oldValue, this.inputValue);
let isOtherValuesSame = true;
let isSame = true, isOldValueEmpty = true;
// checkboxListotherValues // checkboxListotherValues
if (this.type === 'checkboxList' && this.otherValues) { if (this.type === 'checkboxList' && this.otherValues) {
isOtherValuesSame = this.isEqual(this.oldOtherValues, this.otherValues);
}
console.log(this.oldValue, this.inputValue, isSame, isOtherValuesSame,this.otherValues,this.oldOtherValues,"是否需要记录修改记录")
if (isSame && isOtherValuesSame) {
isSame = this.isEqual(this.oldOtherValues, this.otherValues);
isOldValueEmpty = this.isValueEmpty(this.oldOtherValues);
} else if (this.type === "checkboxTag") {
isSame = this.isEqual(this.oldCheckboxTagChecked, this.checkboxTagChecked);
isOldValueEmpty = this.isValueEmpty(this.oldCheckboxTagChecked);
}else{
isSame = this.isEqual(this.oldValue, this.inputValue)
isOldValueEmpty = this.isValueEmpty(this.oldValue);
}
if (isSame) {
return; return;
} }
if (!this.isValueEmpty(this.oldValue) && !(isSame && isOtherValuesSame) && this.templateFillType === "actFill") {
if (!isOldValueEmpty && !(isSame) && this.templateFillType === "actFill") {
// EventBus // EventBus
EventBus.$emit('showEditSignDialog', { uuid: this.uuid }); EventBus.$emit('showEditSignDialog', { uuid: this.uuid });
} else {// } else {//
@ -942,11 +938,16 @@ export default {
// //
let oldValue = this.oldValue; let oldValue = this.oldValue;
if (this.type === 'checkboxList') { if (this.type === 'checkboxList') {
oldValue = {
oldValue = {
checkboxValues: oldValue.checkboxValues || oldValue, checkboxValues: oldValue.checkboxValues || oldValue,
otherValues: this.oldOtherValues otherValues: this.oldOtherValues
}; };
}
}else if(this.type === "checkboxTag"){
oldValue = {
checked: this.oldCheckboxTagChecked,
tagValue: this.tagValue,
};
}
this.inputValue = this.oldValue; this.inputValue = this.oldValue;
this.$emit('input', oldValue); // v-model this.$emit('input', oldValue); // v-model
// this.$emit("blur", this.oldValue); // this.$emit("blur", this.oldValue);
@ -957,20 +958,26 @@ export default {
}, },
// //
handleUpdateRecord(data,recordData) {
handleUpdateRecord(data, recordData) {
const baseInfo = this.getCommonRecordInfo(); const baseInfo = this.getCommonRecordInfo();
if (!this.oldValue && !this.inputValue){
if (!this.oldValue && !this.inputValue) {
return return
} }
if(recordData){
if (recordData) {
this.oldValue = recordData.oldValue; this.oldValue = recordData.oldValue;
this.inputValue = recordData.inputValue; this.inputValue = recordData.inputValue;
} }
let recordOldVlaue = this.oldValue,recordValue = this.inputValue,isModify = !!this.oldValue;
if(this.type === "checkboxTag"){
recordOldVlaue =this.oldValue? `${this.oldValue.tagValue}:${this.oldValue.checked?'勾选':'未勾选'}`:'';
recordValue = `${this.inputValue?.tagValue}:${this.inputValue?.checked?'勾选':'未勾选'}`;
isModify = this.oldValue.checked !== undefined;
}
const record = { const record = {
...baseInfo, ...baseInfo,
oldValue: this.oldValue,
value: this.inputValue,
title: this.oldValue ? "修改" : "提交",
oldValue: recordOldVlaue,
value: recordValue,
title: isModify ? "修改" : "提交",
time: moment().format("YYYY-MM-DD HH:mm:ss"), time: moment().format("YYYY-MM-DD HH:mm:ss"),
} }
if (data) { if (data) {
@ -982,11 +989,13 @@ export default {
newRecord: [record], newRecord: [record],
resourceList: this.getZdxgjl(), resourceList: this.getZdxgjl(),
} }
// oldValueoldOtherValues
// oldValueoldOtherValues
if (this.type === 'checkboxList') { if (this.type === 'checkboxList') {
this.oldValue = [...this.inputValue]; this.oldValue = [...this.inputValue];
this.oldOtherValues = { ...this.otherValues }; this.oldOtherValues = { ...this.otherValues };
}else if(this.type === "checkboxTag"){
this.oldCheckboxTagChecked = this.checkboxTagChecked;
} }
let value = this.inputValue; let value = this.inputValue;
if (this.type === 'checkboxList') { if (this.type === 'checkboxList') {
@ -994,10 +1003,15 @@ export default {
checkboxValues: this.inputValue, checkboxValues: this.inputValue,
otherValues: this.otherValues otherValues: this.otherValues
}; };
}else if(this.type === "checkboxTag"){
value = {
checked: this.checkboxTagChecked,
tagValue: this.tagValue,
};
} }
if(this.type === "button"){
this.$emit('clickButton', this.item,this.inputValue,data);
if(this.templateFillType === "preFill"){
if (this.type === "button") {
this.$emit('clickButton', this.item, this.inputValue, data);
if (this.templateFillType === "preFill") {
return; return;
} }
} }
@ -1015,7 +1029,7 @@ export default {
} }
this.$nextTick(() => { this.$nextTick(() => {
EventBus.$emit('onModifyRecord', params,) EventBus.$emit('onModifyRecord', params,)
console.log(params,"onModifyRecord")
console.log(params, "onModifyRecord")
if (this.regentType.includes(this.item.type)) { if (this.regentType.includes(this.item.type)) {
this.$emit("onRegentSubmit", this.selectRegentInfo, this.inputValue); this.$emit("onRegentSubmit", this.selectRegentInfo, this.inputValue);
} }
@ -1104,7 +1118,7 @@ export default {
isShowHandle() { isShowHandle() {
const { fillType } = this.item; const { fillType } = this.item;
// //
return this.templateFillType !== "preFill" && fillType === "actFill"&&this.type!=="button"
return this.templateFillType !== "preFill" && fillType === "actFill" && this.type !== "button"
}, },
// //
getDisabled() { getDisabled() {
@ -1580,15 +1594,17 @@ export default {
margin-right: 16px; margin-right: 16px;
display: flex; display: flex;
align-items: center; align-items: center;
&:not(:last-child) { &:not(:last-child) {
margin-bottom: 10px; margin-bottom: 10px;
} }
// display: inline-block; // display: inline-block;
.el-input { .el-input {
width: 200px; width: 200px;
margin-left: 10px; margin-left: 10px;
&.error-border { &.error-border {
.el-input__inner { .el-input__inner {
border-color: #ff5d5d !important; border-color: #ff5d5d !important;
@ -1598,7 +1614,7 @@ export default {
} }
} }
} }
.orange-border { .orange-border {
@ -1610,6 +1626,7 @@ export default {
} }
} }
.el-checkbox { .el-checkbox {
&.is-checked { &.is-checked {
.el-checkbox__label { .el-checkbox__label {
@ -1622,6 +1639,7 @@ export default {
} }
} }
} }
.el-radio { .el-radio {
&.is-checked { &.is-checked {
.el-radio__label { .el-radio__label {
@ -1663,6 +1681,7 @@ export default {
.tag-content { .tag-content {
cursor: pointer; cursor: pointer;
position: relative; position: relative;
.tag-input { .tag-input {
width: 100px; width: 100px;
} }
@ -1680,13 +1699,13 @@ export default {
padding: 2px; padding: 2px;
border-radius: 50%; border-radius: 50%;
position: absolute; position: absolute;
top:6px;
right:5px;
top: 6px;
right: 5px;
// transition: all 0.3s; // transition: all 0.3s;
// &:hover { // &:hover {
color: red;
background-color: #f5f5f5;
color: red;
background-color: #f5f5f5;
// } // }
} }
} }

+ 0
- 1
src/components/Template/mixins/formPackageMixins.js View File

@ -261,7 +261,6 @@ export default {
selectInfoKeys.forEach(key => { selectInfoKeys.forEach(key => {
result[key] = formData[key]; result[key] = formData[key];
}) })
console.log(config,"allConfig")
// 更新表单字段 // 更新表单字段
this.formFields = result; this.formFields = result;
this.allFieldsConfig = config; this.allFieldsConfig = config;

+ 7
- 1
src/views/business/comps/template/comps/yp/YP003.vue View File

@ -19,8 +19,9 @@
:formData="formData" :formData="formData"
operationWidth = "80px" operationWidth = "80px"
:prefixKey = "`table`" :prefixKey = "`table`"
fieldItemLabel = "template.common.operationSteps"
fieldItemLabel = "template.yp.yp003.ybxx"
@clickButton="handleClickButton" @clickButton="handleClickButton"
@onCheckboxTagChange="onCheckboxTagChange"
:showOperation="fillType === 'preFill'" :showOperation="fillType === 'preFill'"
> >
<template slot="operation" slot-scope="{ row, rowIndex, columns }"> <template slot="operation" slot-scope="{ row, rowIndex, columns }">
@ -177,6 +178,7 @@ export default {
label: 'template.yp.yp003.ypsl', label: 'template.yp.yp003.ypsl',
prop: 'ypsl', prop: 'ypsl',
bodyType: 'input', bodyType: 'input',
bodyDisabled: true,
bodyFillType: 'actFill', bodyFillType: 'actFill',
width: 80, width: 80,
}] }]
@ -248,6 +250,10 @@ export default {
}, },
downloadExcelTemplate(arr){ downloadExcelTemplate(arr){
this.exportExcel(arr) this.exportExcel(arr)
},
onCheckboxTagChange(rowIndex,colIndex,data){
const num = data.filter((item)=>item.checked).length;
this.$refs.tableRef.updateDataSourceByRowIndex(rowIndex, {'ypsl':num})
} }
} }
}; };

Loading…
Cancel
Save