Browse Source

feat:[模板管理][update]

ouqian
luojie 1 month ago
parent
commit
7978b3eb35
5 changed files with 206 additions and 32 deletions
  1. +7
    -19
      src/components/Template/BaseInfoFormPackage.vue
  2. +142
    -2
      src/components/Template/HandleFormItem.vue
  3. +4
    -2
      src/views/business/comps/template/comps/sp/SP0020.vue
  4. +2
    -2
      src/views/business/comps/template/formConfig/sp/SP0019.js
  5. +51
    -7
      src/views/business/comps/template/formConfig/sp/SP0020.js

+ 7
- 19
src/components/Template/BaseInfoFormPackage.vue View File

@ -125,14 +125,6 @@
@update:error="errors[key] = false" @resetRecord="resetRecord(key)" :item="sItem" @update:error="errors[key] = false" @resetRecord="resetRecord(key)" :item="sItem"
:value="formFields[key]" /> :value="formFields[key]" />
</div> </div>
<div v-else-if="sItem.type === 'checkboxList'" class="flex1">
<HandleFormItem :field-item-label="fieldItemLabel" :field-key="prefixKey + '_' + key"
type="checkboxList" :item="sItem" :value="formFields[key]"
@copy="onCopy(sItem, key)" @change="(e) => onAttachmentChange(key, e)"
:error="errors[key]" @update:error="errors[key] = false"
:orange-bg="orangeBgFields[key]" />
</div>
<div v-else-if="isRegent(sItem)" class="flex1"> <div v-else-if="isRegent(sItem)" class="flex1">
<HandleFormItem <HandleFormItem
@beforeReagentSubmit="(data, callback) => onBeforeReagentSubmit(data, callback, key)" @beforeReagentSubmit="(data, callback) => onBeforeReagentSubmit(data, callback, key)"
@ -293,12 +285,6 @@
@update:error="errors[key] = false" @resetRecord="resetRecord(key)" :item="sItem" @update:error="errors[key] = false" @resetRecord="resetRecord(key)" :item="sItem"
:value="formFields[key]" /> :value="formFields[key]" />
</div> </div>
<div v-else-if="sItem.type === 'checkboxList'" class="flex flex1">
<HandleFormItem :field-item-label="fieldItemLabel" :field-key="prefixKey + '_' + key"
type="checkboxList" :item="sItem" :value="formFields[key]" @copy="onCopy(sItem, key)"
@change="(e) => onAttachmentChange(key, e)" :error="errors[key]"
@update:error="errors[key] = false" :orange-bg="orangeBgFields[key]" />
</div>
<div v-else-if="isRegent(sItem)" class="flex item-center flex1"> <div v-else-if="isRegent(sItem)" class="flex item-center flex1">
<HandleFormItem :field-item-label="fieldItemLabel" sourceFrom="baseInfoFormPackage" <HandleFormItem :field-item-label="fieldItemLabel" sourceFrom="baseInfoFormPackage"
@beforeReagentSubmit="(data, callback) => onBeforeReagentSubmit(data, callback, key)" @beforeReagentSubmit="(data, callback) => onBeforeReagentSubmit(data, callback, key)"
@ -313,15 +299,17 @@
</div> </div>
</template> </template>
<template v-else-if="item.type === 'checkboxList'"> <template v-else-if="item.type === 'checkboxList'">
<div class="form-item ">
<div class="form-item " >
<div class="form-title fs-16" v-if="item.label">{{ $t(item.label) }}</div> <div class="form-title fs-16" v-if="item.label">{{ $t(item.label) }}</div>
<div v-for="(sItem, key) in item.config" class="c-Item grid-container"> <div v-for="(sItem, key) in item.config" class="c-Item grid-container">
<div class="p-r-20 item-center">
<div class="p-r-20 item-center" :class="sItem.span == 1 ? 'full-row' : ''">
<div class="form-title mr-20">{{ $t(sItem.label) }}</div> <div class="form-title mr-20">{{ $t(sItem.label) }}</div>
<div class="flex flex1"> <div class="flex flex1">
<HandleFormItem :field-item-label="fieldItemLabel" :field-key="prefixKey + '_' + key"
type="checkboxList" :item="sItem" :value="formFields[key]"
@copy="onCopy(sItem, key)" @change="(e) => onAttachmentChange(key, e)"
<HandleFormItem
v-if="sItem.type === 'checkboxList' || sItem.type === 'checkboxTree'"
:field-item-label="fieldItemLabel" :field-key="prefixKey + '_' + key"
:type="sItem.type" :item="sItem" :value="formFields[key]"
@change="(e) => onAttachmentChange(key, e)"
:error="errors[key]" @update:error="errors[key] = false" :error="errors[key]" @update:error="errors[key] = false"
:orange-bg="orangeBgFields[key]" /> :orange-bg="orangeBgFields[key]" />
</div> </div>

+ 142
- 2
src/components/Template/HandleFormItem.vue View File

@ -50,7 +50,33 @@
</div> </div>
<div v-else-if="type === 'checkboxTree'" class="flex1 checkbox-list-container" <div v-else-if="type === 'checkboxTree'" class="flex1 checkbox-list-container"
:class="getFillTypeStyle() + (orangeBg ? ' orange-bg' : '')"> :class="getFillTypeStyle() + (orangeBg ? ' orange-bg' : '')">
<div v-for="group in item.options" :key="group.value" class="checkbox-tree-group">
<el-checkbox
:label="group.value"
:disabled="getDisabled()"
:checked="isCheckboxTreeChecked(group.value)"
@change="onCheckboxTreeChange(group.value, $event)">
{{ group.label }}
</el-checkbox>
<div v-if="group.children && group.children.length > 0" class="checkbox-tree-children">
<div v-for="child in group.children" :key="child.value" class="checkbox-tree-item">
<el-checkbox
:label="child.value"
:disabled="getDisabled()"
:checked="isCheckboxTreeChecked(child.value)"
@change="onCheckboxTreeChange(child.value, $event)">
{{ child.label }}
</el-checkbox>
<div v-if="(child.value === '样品信息' || child.value === '其他') && isCheckboxTreeChecked(child.value)" class="checkbox-tree-input-container">
<el-input
v-model="checkboxTreeValue.otherValues[child.value]"
:class="{ 'error-border': isCheckboxTreeOtherInputError(child.value) }"
placeholder="请输入"
@blur="onCheckboxTreeOtherBlur(child.value, $event)"/>
</div>
</div>
</div>
</div>
</div> </div>
<el-date-picker v-else-if="type === 'dateTime'" type="datetime" class="flex1" <el-date-picker v-else-if="type === 'dateTime'" type="datetime" class="flex1"
:class="getFillTypeStyle() + (orangeBg ? ' orange-bg' : '')" v-model="inputValue" :class="getFillTypeStyle() + (orangeBg ? ' orange-bg' : '')" v-model="inputValue"
@ -295,6 +321,9 @@ export default {
oldFqyqValue: {...initialValue}, // fqyq oldFqyqValue: {...initialValue}, // fqyq
checkboxListValue: initialValue, // checkboxList checkboxListValue: initialValue, // checkboxList
oldCheckboxListValue: JSON.parse(JSON.stringify(initialValue)), // checkboxList oldCheckboxListValue: JSON.parse(JSON.stringify(initialValue)), // checkboxList
checkboxTreeValue: this.type === 'checkboxTree' ? (this.value || { checkedValues: [], otherValues: {} }) : {}, // checkboxTree
oldCheckboxTreeValue: this.type === 'checkboxTree' ? JSON.parse(JSON.stringify(this.value || { checkedValues: [], otherValues: {} })) : {}, // checkboxTree
checkboxTreeFirstCheck: this.type === 'checkboxTree' ? {} : {}, //
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'], ////
selectRegentInfo: {},//// selectRegentInfo: {},////
@ -308,6 +337,7 @@ export default {
currentTagIndex:-1,//checkboxTag currentTagIndex:-1,//checkboxTag
currentHandleType:'',// currentHandleType:'',//
currentOtherCode:'',//otherCode currentOtherCode:'',//otherCode
currentCheckboxTreeValue: '',//checkboxTree
} }
}, },
watch: { watch: {
@ -327,6 +357,10 @@ export default {
inputValue: newVal.inputValue || '', inputValue: newVal.inputValue || '',
subRadio: newVal.subRadio || '' subRadio: newVal.subRadio || ''
}; };
} else if (this.type === 'checkboxTree' && newVal && typeof newVal === 'object') {
// checkboxTree
this.checkboxTreeValue = JSON.parse(JSON.stringify(newVal));
this.oldCheckboxTreeValue = JSON.parse(JSON.stringify(newVal));
} else { } else {
this.inputValue = newVal; this.inputValue = newVal;
} }
@ -683,7 +717,7 @@ export default {
}, },
getFillTypeStyle(type) { getFillTypeStyle(type) {
const { fillType } = this.item; const { fillType } = this.item;
const filterType = ["attachment","checkboxTag","fqyq"]
const filterType = ["attachment","checkboxTag","fqyq","checkboxTree"]
const typeObj = { const typeObj = {
actFill: "orange-border",// actFill: "orange-border",//
green: "green-border", green: "green-border",
@ -884,6 +918,80 @@ export default {
this.checkboxListValue.otherValues[otherCode] = e.target.value; this.checkboxListValue.otherValues[otherCode] = e.target.value;
this.onCommonHandleSaveRecord(e.target.value); this.onCommonHandleSaveRecord(e.target.value);
}, },
// checkboxTree
isCheckboxTreeChecked(value) {
return this.checkboxTreeValue.checkedValues && this.checkboxTreeValue.checkedValues.includes(value);
},
// checkboxTree
isCheckboxTreeOtherInputError(value) {
if (!this.error) {
return false;
}
return isValueEmpty(this.checkboxTreeValue.otherValues[value]);
},
// checkboxTree
onCheckboxTreeChange(value, checked) {
this.currentHandleType = 'checkboxTree';
this.currentCheckboxTreeValue = value;
// checkedValues
if (!this.checkboxTreeValue.checkedValues) {
this.checkboxTreeValue.checkedValues = [];
}
// otherValues
if (!this.checkboxTreeValue.otherValues) {
this.checkboxTreeValue.otherValues = {};
}
//
if (checked) {
if (!this.checkboxTreeValue.checkedValues.includes(value)) {
this.checkboxTreeValue.checkedValues.push(value);
}
} else {
const index = this.checkboxTreeValue.checkedValues.indexOf(value);
if (index > -1) {
this.checkboxTreeValue.checkedValues.splice(index, 1);
// otherValues
delete this.checkboxTreeValue.otherValues[value];
}
}
//
const isFirstCheck = !this.checkboxTreeFirstCheck[value];
if (isFirstCheck) {
this.checkboxTreeFirstCheck[value] = true;
//
this.emitCheckboxTreeValue();
this.updateCheckboxTreeOldValue();
} else {
//
this.onCommonHandleSaveRecord();
}
},
// checkboxTree
onCheckboxTreeOtherBlur(value, e) {
this.currentHandleType = "checkboxTreeOther";
this.currentCheckboxTreeValue = value;
this.checkboxTreeValue.otherValues[value] = e.target.value;
this.onCommonHandleSaveRecord(e.target.value);
},
// checkboxTree
emitCheckboxTreeValue() {
this.$emit('input', JSON.parse(JSON.stringify(this.checkboxTreeValue)));
this.$emit('change', JSON.parse(JSON.stringify(this.checkboxTreeValue)));
},
// checkboxTree
updateCheckboxTreeOldValue() {
this.oldCheckboxTreeValue = JSON.parse(JSON.stringify(this.checkboxTreeValue));
},
// question // question
onClickQuestion() { onClickQuestion() {
const { templateFillType } = this; const { templateFillType } = this;
@ -993,6 +1101,10 @@ export default {
const current = this.getFqyqInfo(); const current = this.getFqyqInfo();
isSame = this.isEqual(current.oldValue,current.newValue); isSame = this.isEqual(current.oldValue,current.newValue);
isOldValueEmpty = isValueEmpty(current.oldValue); isOldValueEmpty = isValueEmpty(current.oldValue);
} else if (this.type === "checkboxTree") {
// checkboxTreecheckedValues
isSame = this.isEqual(this.oldCheckboxTreeValue.checkedValues, this.checkboxTreeValue.checkedValues);
isOldValueEmpty = isValueEmpty(this.oldCheckboxTreeValue.checkedValues);
} else { } else {
isSame = this.isEqual(this.oldValue, this.inputValue) isSame = this.isEqual(this.oldValue, this.inputValue)
isOldValueEmpty = isValueEmpty(this.oldValue); isOldValueEmpty = isValueEmpty(this.oldValue);
@ -1033,6 +1145,10 @@ export default {
// 退 // 退
this.fqyqValue = JSON.parse(JSON.stringify(this.oldFqyqValue)); this.fqyqValue = JSON.parse(JSON.stringify(this.oldFqyqValue));
oldValue = { ...this.fqyqValue }; oldValue = { ...this.fqyqValue };
} else if (this.type === "checkboxTree") {
// checkboxTree退
this.checkboxTreeValue = JSON.parse(JSON.stringify(this.oldCheckboxTreeValue));
oldValue = JSON.parse(JSON.stringify(this.oldCheckboxTreeValue));
} }
this.inputValue = this.oldValue; this.inputValue = this.oldValue;
this.$emit('input', oldValue); // v-model this.$emit('input', oldValue); // v-model
@ -1071,6 +1187,14 @@ export default {
recordOldVlaue = `${current.des+(current.oldValue || '')}`; recordOldVlaue = `${current.des+(current.oldValue || '')}`;
recordValue = `${current.des+(current.newValue || '')}`; recordValue = `${current.des+(current.newValue || '')}`;
isModify = !!current.oldValue; isModify = !!current.oldValue;
} else if (this.type === "checkboxTree") {
// checkboxTree
const value = this.currentCheckboxTreeValue;
const oldChecked = this.oldCheckboxTreeValue.checkedValues && this.oldCheckboxTreeValue.checkedValues.includes(value);
const currentChecked = this.checkboxTreeValue.checkedValues && this.checkboxTreeValue.checkedValues.includes(value);
recordOldVlaue = `${value}:${oldChecked ? '勾选' : '未勾选'}`;
recordValue = `${value}:${currentChecked ? '勾选' : '未勾选'}`;
isModify = oldChecked !== undefined;
} }
const record = { const record = {
...baseInfo, ...baseInfo,
@ -1103,6 +1227,9 @@ export default {
} else if (this.type === "fqyq") { } else if (this.type === "fqyq") {
// //
this.oldFqyqValue = JSON.parse(JSON.stringify(this.fqyqValue)); this.oldFqyqValue = JSON.parse(JSON.stringify(this.fqyqValue));
} else if (this.type === "checkboxTree") {
// checkboxTree
this.oldCheckboxTreeValue = JSON.parse(JSON.stringify(this.checkboxTreeValue));
} }
let value = this.inputValue; let value = this.inputValue;
if (this.type === 'checkboxList') { if (this.type === 'checkboxList') {
@ -1114,6 +1241,8 @@ export default {
value = [...this.checkboxTagList]; value = [...this.checkboxTagList];
} else if (this.type === "fqyq") { } else if (this.type === "fqyq") {
value = { ...this.fqyqValue }; value = { ...this.fqyqValue };
} else if (this.type === "checkboxTree") {
value = JSON.parse(JSON.stringify(this.checkboxTreeValue));
} }
if (this.type === "button") { if (this.type === "button") {
this.$emit('clickButton', this.item, this.inputValue, data); this.$emit('clickButton', this.item, this.inputValue, data);
@ -1830,4 +1959,15 @@ export default {
.mr-10{ .mr-10{
margin-right: 10px; margin-right: 10px;
} }
.checkbox-tree-children{
margin-left: 30px;
padding:16px 0;
gap: 16px;
display: grid;
grid-template-columns: repeat(4, 1fr);
}
.checkbox-tree-item{
box-sizing: border-box;
}
</style> </style>

+ 4
- 2
src/views/business/comps/template/comps/sp/SP0020.vue View File

@ -8,7 +8,8 @@
<div class="content"> <div class="content">
<BaseInfoFormPackage fieldItemLabel="template.common.baseInfo" label="template.common.baseInfo" <BaseInfoFormPackage fieldItemLabel="template.common.baseInfo" label="template.common.baseInfo"
:ref="refConfig.baseInfoRef" :formConfig="baseInfoFormConfig" :formData="formData" /> :ref="refConfig.baseInfoRef" :formConfig="baseInfoFormConfig" :formData="formData" />
<LineLabel label="试验内容" />
<BaseInfoFormPackage fieldItemLabel="试验内容" label="试验内容"
:ref="refConfig.synrRef" :formConfig="synrFormConfig" :formData="formData" />
<BaseInfoFormPackage fieldItemLabel="template.common.remark" label="template.common.remark" <BaseInfoFormPackage fieldItemLabel="template.common.remark" label="template.common.remark"
:ref="refConfig.remarkRef" :formConfig="remarkConig" :formData="formData" /> :ref="refConfig.remarkRef" :formConfig="remarkConig" :formData="formData" />
</div> </div>
@ -33,6 +34,7 @@ import { getSynrFormConfig} from "../../formConfig/sp/SP0020";
const refConfig = { const refConfig = {
baseInfoRef: "baseInfoRef", baseInfoRef: "baseInfoRef",
remarkRef: "remarkRef", remarkRef: "remarkRef",
synrRef: "synrRef",
} }
const compRefs = Object.values(refConfig); const compRefs = Object.values(refConfig);
@ -53,7 +55,7 @@ export default {
}, },
// //
baseInfoFormConfig() { baseInfoFormConfig() {
return getBaseInfoFormConfig(this);
return getBaseInfoFormConfig('sp0020');
}, },
// //

+ 2
- 2
src/views/business/comps/template/formConfig/sp/SP0019.js View File

@ -1,4 +1,4 @@
export const getBaseInfoFormConfig = ($this) => {
export const getBaseInfoFormConfig = (formType) => {
return [ return [
{ {
type: 'cardItem', type: 'cardItem',
@ -16,7 +16,7 @@ export const getBaseInfoFormConfig = ($this) => {
methodCode: { methodCode: {
label: 'template.common.methodCode', label: 'template.common.methodCode',
type: 'input', type: 'input',
fillType: 'preFill',
fillType: formType === 'sp0020' ? 'actFill' : 'preFill',
maxlength: 50 maxlength: 50
}, },
versionNum: { versionNum: {

+ 51
- 7
src/views/business/comps/template/formConfig/sp/SP0020.js View File

@ -1,13 +1,57 @@
export const getSynrFormConfig = ($this) => {
// checkboxTree 类型的配置
const checkboxTreeOptions = [
{
label: '方法学验证',
value: '方法学验证',
children: [
{ label: '储备液比对', value: '储备液比对' },
{ label: '标准曲线线性范围', value: '标准曲线线性范围' },
{ label: '准确度与精密度&灵敏度', value: '准确度与精密度&灵敏度' },
{ label: '残留', value: '残留' },
{ label: '选择性与特异性', value: '选择性与特异性' },
{ label: '基质效应', value: '基质效应' },
{ label: '提取回收率', value: '提取回收率' },
{ label: '溶血基质效应', value: '溶血基质效应' },
{ label: '批最大样本数', value: '批最大样本数' },
{ label: '基质样品', value: '基质样品' },
{ label: '基质样品长期冻存稳定性', value: '基质样品长期冻存稳定性' },
{ label: '反复冻融稳定性', value: '反复冻融稳定性' },
{ label: '稀释可靠性', value: '稀释可靠性' },
{ label: '处理后样品稳定性', value: '处理后样品稳定性' },
{ label: '进样重现性', value: '进样重现性' },
{ label: '全血稳定性', value: '全血稳定性' },
{ label: '储备液短期稳定性', value: '储备液短期稳定性' },
{ label: '储备液长期稳定性', value: '储备液长期稳定性' },
{ label: '工作液短期稳定性', value: '工作液短期稳定性' },
{ label: '工作液长期稳定性', value: '工作液长期稳定性' }
]
},
{
label: '样品分析',
value: '样品分析',
children: [
{ label: '样品信息', value: '样品信息' }
]
},
{
label: '其他',
value: '其他',
children: []
}
]
//试验内容
export const getSynrFormConfig = ()=>{
return [ return [
{ {
type: 'step',
type: 'checkboxList',
config: { config: {
yqmxh: {
label: '色谱柱型号',
type: 'yq',
fillType: 'actFill',
filledCodes:['mc','bh'],
ffxyz: {
type: 'checkboxTree',
label: '方法学验证',
options:checkboxTreeOptions,
span:1,
fillType:"actFill"
}, },
} }
}, },

Loading…
Cancel
Save