Browse Source

feat:[模板管理][update]

ouqian
luojie 1 month ago
parent
commit
35d7df2ba8
3 changed files with 168 additions and 20 deletions
  1. +104
    -9
      src/components/Template/CustomTable.vue
  2. +7
    -10
      src/components/Template/HandleFormItem.vue
  3. +57
    -1
      src/views/business/comps/template/comps/dl/DL006.vue

+ 104
- 9
src/components/Template/CustomTable.vue View File

@ -12,9 +12,37 @@
@change="handleCheckAllChange"></el-checkbox> @change="handleCheckAllChange"></el-checkbox>
</div> </div>
</div> </div>
<div v-for="(col, index) in columns" :key="index" class="custom-table-cell header-cell"
<div v-for="(col, colIndex) in columns" :key="colIndex" class="custom-table-cell header-cell"
:style="getCellWidth(col)"> :style="getCellWidth(col)">
<div class="header-cell-content">
<div class="header-cell-content" v-if = "col.headerColumns && col.headerColumns.length > 0">
<div class="header-columns-grid" :style="{ 'grid-template-columns': `repeat(${col.span || 2}, 1fr)` }">
<div v-for="(headerCol, headerIndex) in col.headerColumns" :key="headerIndex" class="header-column-item">
<template v-if="headerCol.type === 'span'">
<div class="span-content">{{ $t(headerCol.label) }}</div>
</template>
<template v-else-if="headerCol.type === 'sj'">
<HandleFormItem :fieldKey="prefixKey+colIndex + '_' + headerCol.key + '_' + headerIndex"
:fieldItemLabel="fieldItemLabel" :type="headerCol.type" class="body-clickable"
sourceFrom="customTable" :item="getHeaderColumnItem(headerCol)"
:value="headerFields[`${colIndex}_${headerIndex}`]"
@onRegentSubmit="(data, inputValue) => onHeaderRegentSubmit(data, inputValue, colIndex, headerIndex)"
/>
</template>
<template v-else-if="headerCol.type === 'input' || headerCol.type === 'select'">
<HandleFormItem
:fieldKey="prefixKey + '_header_' + colIndex + '_' + headerIndex"
:fieldItemLabel="fieldItemLabel"
:type="headerCol.type"
:item="getHeaderColumnItem(headerCol)"
v-model="headerFields[`${colIndex}_${headerIndex}`]"
@change="onHeaderColumnChange(colIndex, headerIndex, headerCol, $event)"
:error="hasHeaderError(colIndex, headerIndex, `${colIndex}_${headerIndex}`)"
@update:error="onHeaderColumnErrorUpdate(colIndex, headerIndex, `${colIndex}_${headerIndex}`, $event)" />
</template>
</div>
</div>
</div>
<div class="header-cell-content" v-else>
<div>{{ $t(col.label) }}</div> <div>{{ $t(col.label) }}</div>
<template <template
v-if="col.headerSelectKey && col.headerOptions && (showHeaderSelect || templateFillType === 'preFill')"> v-if="col.headerSelectKey && col.headerOptions && (showHeaderSelect || templateFillType === 'preFill')">
@ -22,8 +50,8 @@
:fieldItemLabel="fieldItemLabel" type="select" class="header-select" :fieldItemLabel="fieldItemLabel" type="select" class="header-select"
:item="getHeaderItem(col)" v-model="headerSelectFields[col.headerSelectKey]" :item="getHeaderItem(col)" v-model="headerSelectFields[col.headerSelectKey]"
@change="onHeaderSelectChange(col, $event)" @change="onHeaderSelectChange(col, $event)"
:error="hasError(-1, index, col.headerSelectKey)"
@update:error="onErrorUpdate(-1, index, col.headerSelectKey, $event)" />
:error="hasError(-1, colIndex, col.headerSelectKey)"
@update:error="onErrorUpdate(-1, colIndex, col.headerSelectKey, $event)" />
</template> </template>
<div v-else-if="headerSelectFields[col.headerSelectKey]" class="fill-type-icon" <div v-else-if="headerSelectFields[col.headerSelectKey]" class="fill-type-icon"
:style="{ width: (templateFillType !== 'actFill') ? '60px' : 'auto' }">({{ :style="{ width: (templateFillType !== 'actFill') ? '60px' : 'auto' }">({{
@ -247,7 +275,7 @@ export default {
default: () => { default: () => {
return { return {
stepTableFormData: [], stepTableFormData: [],
headerSelectFields: {}
headerSelectFields: {},
} }
} }
}, },
@ -279,6 +307,7 @@ export default {
return { return {
localDataSource: [], localDataSource: [],
headerSelectFields: {}, headerSelectFields: {},
headerFields: {}, // headerColumns
formErrors: [], // formErrors: [], //
orangeBgCells: {}, // {rowIndex-colIndex: true/false} orangeBgCells: {}, // {rowIndex-colIndex: true/false}
isShowOther, isShowOther,
@ -294,9 +323,10 @@ export default {
formData: { formData: {
immediate: true, immediate: true,
handler(newData) { handler(newData) {
const { stepTableFormData = [], headerSelectFields = {} } = newData;
const { stepTableFormData = [], headerSelectFields = {}, headerFields = {} } = newData;
this.updateDataSource(stepTableFormData); this.updateDataSource(stepTableFormData);
this.headerSelectFields = JSON.parse(JSON.stringify(headerSelectFields)); this.headerSelectFields = JSON.parse(JSON.stringify(headerSelectFields));
this.headerFields = JSON.parse(JSON.stringify(headerFields));
// compareTo // compareTo
this.checkCompareToOnDataLoad(); this.checkCompareToOnDataLoad();
} }
@ -318,6 +348,50 @@ export default {
this.oldLocalDataSource = []; this.oldLocalDataSource = [];
}, },
methods: { methods: {
getHeaderColumnItem(headerCol) {
return {
label: headerCol.label || '',
fillType: headerCol.fillType,
options: headerCol.options,
maxlength: headerCol.maxlength,
checkType: headerCol.checkType,
regentFillType: headerCol.regentFillType,
type:headerCol.type,
};
},
onHeaderColumnChange(colIndex, headerIndex, headerCol, value) {
const fieldKey = `${colIndex}_${headerIndex}`;
this.headerFields[fieldKey] = value;
this.$emit('headerColumnChange', {
colIndex,
headerIndex,
key: fieldKey,
value,
headerFields: this.headerFields
});
},
hasHeaderError(colIndex, headerIndex, key) {
return this.formErrors.some(error =>
error.rowIndex === -1 &&
error.colIndex === colIndex &&
error.headerIndex === headerIndex &&
error.field === key
);
},
onHeaderColumnErrorUpdate(colIndex, headerIndex, key, isError) {
if (!isError) {
this.formErrors = this.formErrors.filter(error =>
!(error.rowIndex === -1 &&
error.colIndex === colIndex &&
error.headerIndex === headerIndex &&
error.field === key)
);
}
},
// checkboxTag // checkboxTag
onDeleteCheckboxTag(rowIndex, col, tagIndex) { onDeleteCheckboxTag(rowIndex, col, tagIndex) {
this.localDataSource[rowIndex][col.prop].splice(tagIndex, 1); this.localDataSource[rowIndex][col.prop].splice(tagIndex, 1);
@ -408,10 +482,14 @@ export default {
} }
this.$emit("beforeReagentSubmit", { selectData: data, callback, key: col.prop, rowData: row }) this.$emit("beforeReagentSubmit", { selectData: data, callback, key: col.prop, rowData: row })
}, },
onHeaderRegentSubmit(data, inputValue, colIndex, headerIndex) {
this.headerFields[`${colIndex}_${headerIndex}`] = inputValue;
this.$emit("onHeaderRegentSubmit", { selectInfo: data, key: col.prop, col, rowIndex, colIndex, rowData: row })
},
onRegentSubmit(data, inputValue, col, rowIndex, colIndex, row) { onRegentSubmit(data, inputValue, col, rowIndex, colIndex, row) {
if (this.templateFillType !== 'actFill') {
return
}
// if (this.templateFillType !== 'actFill') {
// return
// }
this.updateDataSourceByRowIndex(rowIndex, { [col.prop]: inputValue }) this.updateDataSourceByRowIndex(rowIndex, { [col.prop]: inputValue })
this.$emit("onRegentSubmit", { selectInfo: data, key: col.prop, col, rowIndex, colIndex, rowData: row }) this.$emit("onRegentSubmit", { selectInfo: data, key: col.prop, col, rowIndex, colIndex, rowData: row })
}, },
@ -447,6 +525,7 @@ export default {
return { return {
stepTableFormData: [...this.localDataSource], stepTableFormData: [...this.localDataSource],
headerSelectFields: this.headerSelectFields, headerSelectFields: this.headerSelectFields,
headerFields: this.headerFields,
}; };
}, },
// //
@ -461,6 +540,7 @@ export default {
resolve({ resolve({
stepTableFormData: [...this.localDataSource], stepTableFormData: [...this.localDataSource],
headerSelectFields: this.headerSelectFields, headerSelectFields: this.headerSelectFields,
headerFields: this.headerFields,
}) })
} else { } else {
// this.$message.error(","); // this.$message.error(",");
@ -1045,6 +1125,17 @@ export default {
justify-content: center; justify-content: center;
} }
.header-columns-grid {
display: grid;
gap: 10px;
}
.header-column-item {
display: flex;
align-items: center;
padding: 0 5px;
}
/* 共同行样式 */ /* 共同行样式 */
.custom-table-row { .custom-table-row {
display: table; display: table;
@ -1202,4 +1293,8 @@ export default {
.c-cell { .c-cell {
width: 50px; width: 50px;
} }
.span-content {
width: -webkit-fill-available;
text-align: center;
}
</style> </style>

+ 7
- 10
src/components/Template/HandleFormItem.vue View File

@ -90,7 +90,7 @@
</div> </div>
<div class="clickable" <div class="clickable"
:class="getFillTypeStyle() + (getDisabled() ? ' disabled' : '') + (orangeBg ? ' orange-bg' : '')" :class="getFillTypeStyle() + (getDisabled() ? ' disabled' : '') + (orangeBg ? ' orange-bg' : '')"
v-else-if="regentType.includes(item.type)" @click="onCommonHandleRegent(item, item.type)">
v-else-if="isRegent(item)" @click="onCommonHandleRegent(item, item.type)">
<span v-if="inputValue">{{ inputValue }}</span> <span v-if="inputValue">{{ inputValue }}</span>
<span v-else class="default-placeholder-text">{{ getPlaceholder() }}</span> <span v-else class="default-placeholder-text">{{ getPlaceholder() }}</span>
</div> </div>
@ -216,7 +216,7 @@ import Question from "./icons/Question.vue";
import DecimalInput from "./DecimalInput.vue"; import DecimalInput from "./DecimalInput.vue";
import { EventBus } from "@/utils/eventBus"; import { EventBus } from "@/utils/eventBus";
import moment from "moment"; import moment from "moment";
import { getuuid, isEqual, deepClone, getDefaultValueByOptions, isValueEmpty } from "@/utils/index.js";
import { getuuid, isEqual, deepClone, getDefaultValueByOptions, isValueEmpty,isRegent } from "@/utils/index.js";
import { getToken } from "@/utils/auth"; import { getToken } from "@/utils/auth";
import { isShowOtherByCheckboxTree } from "@/utils/formPackageCommon"; import { isShowOtherByCheckboxTree } from "@/utils/formPackageCommon";
@ -277,7 +277,6 @@ export default {
}, },
data() { data() {
let initialValue = this.value; let initialValue = this.value;
console.log(this.value, "check value");
let initialOtherValues = {}, checkboxTagList = []; let initialOtherValues = {}, checkboxTagList = [];
if (this.type === 'checkboxTag' && Array.isArray(this.value)) { if (this.type === 'checkboxTag' && Array.isArray(this.value)) {
@ -309,7 +308,7 @@ export default {
fqyqValue: initialValue, // fqyq fqyqValue: initialValue, // fqyq
oldFqyqValue: { ...initialValue }, // fqyq oldFqyqValue: { ...initialValue }, // fqyq
uuid: getuuid(), // EventBus uuid: getuuid(), // EventBus
regentType: ['sj', 'gsp', 'mix', 'xj', 'xb', 'gyzj', 'mjy', 'yq', 'jcb', 'qxbd'], ////
isRegent, ////
selectRegentInfo: {},//// selectRegentInfo: {},////
fileList: [],// fileList: [],//
uploadFileUrl: process.env.VUE_APP_BASE_API + "/file/upload", uploadFileUrl: process.env.VUE_APP_BASE_API + "/file/upload",
@ -340,8 +339,6 @@ export default {
watch: { watch: {
value(newVal) { value(newVal) {
console.log(newVal, "newVal")
if (this.type === 'checkboxTag' && Array.isArray(newVal)) { if (this.type === 'checkboxTag' && Array.isArray(newVal)) {
// checkboxTagvalue // checkboxTagvalue
this.checkboxTagList = newVal.map(tag => ({ this.checkboxTagList = newVal.map(tag => ({
@ -604,8 +601,8 @@ export default {
}, },
/// ///
onCommonHandleRegent(item, type) { onCommonHandleRegent(item, type) {
const {regentFillType = "actFill"} = item;
if (this.templateFillType !== regentFillType) {
const {fillType = "actFill"} = item;
if (this.templateFillType !== fillType) {
return return
} }
let params = { let params = {
@ -1302,7 +1299,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 (isRegent(this.item)) {
this.$emit("onRegentSubmit", this.selectRegentInfo, this.inputValue); this.$emit("onRegentSubmit", this.selectRegentInfo, this.inputValue);
} }
}) })
@ -1381,7 +1378,7 @@ export default {
if (this.getDisabled()) { if (this.getDisabled()) {
return "" return ""
} }
if (this.regentType.includes(type) || type === "clickable" || type === "fqyq") {
if (isRegent(this.item) || type === "clickable" || type === "fqyq") {
return this.$t("template.common.pleaseSelect") return this.$t("template.common.pleaseSelect")
} }
let prex = "template.common.pleaseFillIn" let prex = "template.common.pleaseFillIn"

+ 57
- 1
src/views/business/comps/template/comps/dl/DL006.vue View File

@ -49,6 +49,20 @@
</CustomTable> </CustomTable>
</div> </div>
<LineLabel label="操作信息" />
<CustomTable
fieldItemLabel="操作信息"
:columns="czxxColumns"
:ref="'czxxTableRef'"
@onRegentSubmit="(e) => onRegentSubmit(e)"
:showOperation="false"
:showAddRow="false"
:formData="{stepTableFormData:formData.stepTableFormData_1,headerSelectFields:{},headerFields:formData.headerFields}"
:showHeaderSelect="fillType === 'preFill'"
:prefixKey="`czxxTable`"
>
</CustomTable>
<BaseInfoFormPackage <BaseInfoFormPackage
fieldItemLabel="template.dl.dl007.bz" fieldItemLabel="template.dl.dl007.bz"
@ -80,7 +94,8 @@ const refConf = {
gyzj: 'gyzjTableRef', gyzj: 'gyzjTableRef',
remark: 'remarkRef', remark: 'remarkRef',
jzjz: 'jlzpzxxTableRef', jzjz: 'jlzpzxxTableRef',
bz: 'stepRef'
bz: 'stepRef',
czxx: 'czxxTableRef'
} }
const refNames = Object.values(refConf) const refNames = Object.values(refConf)
@ -102,6 +117,47 @@ export default {
} }
}, },
computed: { computed: {
czxxColumns() {
return [
{
prop: 'jlzb',
label: '剂量组别',
bodyType: 'input',
bodyTypeFillType: 'preFill',
placeholder: '请输入剂量组别'
},
{
prop: 'czrxm',
label: '菌种编号',
bodyType: 'checkbox',
width: 300,
headerColumns:[
{
label: '菌种编号',
type:"span",
},
{
type:"sj",
fillType: 'preFill',
key:"bh"
},
{
type: 'input',
fillType:"preFill",
key:"srbh"
},
{
type:"select",
fillType:"preFill",
key:"dw",
options: [
{label:"mg/皿",value:"mg/皿"},
],
},
]
}
]
},
// //
remarkConig() { remarkConig() {
return [ return [

Loading…
Cancel
Save