eln_TD
/
eln_web
5
0
Fork 0
Code Issues 0 Pull Requests 0 Projects 0 Releases 0 Wiki Activity
Browse Source

feat:[模板管理][update]

master
luojie 4 days ago
parent
f756c2d37a
commit
cb172207c9
5 changed files with 123 additions and 26 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +45
    -15
      src/components/Template/BaseInfoFormPcakge.vue
  2. +54
    -5
      src/components/Template/CustomTable.vue
  3. +20
    -6
      src/components/Template/HandleFormItem.vue
  4. +2
    -0
      src/views/business/comps/template/comps/sp/SWYPBQGZYZBB.vue
  5. +2
    -0
      src/views/business/comps/template/comps/sp/SWYPFXRYPZB.vue

+ 45
- 15
src/components/Template/BaseInfoFormPcakge.vue View File

@ -9,12 +9,14 @@
<template v-if="sItem.type === 'input'"> <template v-if="sItem.type === 'input'">
<div class="form-title">{{ sItem.label }}</div> <div class="form-title">{{ sItem.label }}</div>
<HandleFormItem @blur="onBlur(key, $event)" :item="sItem" v-model="formFields[key]" <HandleFormItem @blur="onBlur(key, $event)" :item="sItem" v-model="formFields[key]"
@copy="onCopy(sItem, key)" :error="errors[key]" @update:error="errors[key] = false" />
@copy="onCopy(sItem, key)" :error="errors[key]" @update:error="errors[key] = false"
:orange-bg="orangeBgFields[key]" />
</template> </template>
<template v-else-if="sItem.type === 'inputNumber'"> <template v-else-if="sItem.type === 'inputNumber'">
<div class="form-title">{{ sItem.label }}</div> <div class="form-title">{{ sItem.label }}</div>
<HandleFormItem type = "inputNumber" @blur="onBlur(key, $event)" :item="sItem" @input = "onInputNumberChange(key, $event)" v-model="formFields[key]" <HandleFormItem type = "inputNumber" @blur="onBlur(key, $event)" :item="sItem" @input = "onInputNumberChange(key, $event)" v-model="formFields[key]"
@copy="onCopy(sItem, key)" :error="errors[key]" @update:error="errors[key] = false" />
@copy="onCopy(sItem, key)" :error="errors[key]" @update:error="errors[key] = false"
:orange-bg="orangeBgFields[key]" />
</template> </template>
</div> </div>
</div> </div>
@ -27,7 +29,8 @@
<div class="form-title">{{ sItem.label }}</div> <div class="form-title">{{ sItem.label }}</div>
<div class="flex "> <div class="flex ">
<HandleFormItem type="select" :item="sItem" v-model="formFields[key]" <HandleFormItem type="select" :item="sItem" v-model="formFields[key]"
@copy="onCopy(sItem, key)" @change="onSelectChange(key, $event)" :error="errors[key]" @update:error="errors[key] = false" />
@copy="onCopy(sItem, key)" @change="onSelectChange(key, $event)" :error="errors[key]" @update:error="errors[key] = false"
:orange-bg="orangeBgFields[key]" />
</div> </div>
</div> </div>
@ -54,19 +57,23 @@
<div class="form-title" v-if="sItem.label">{{ sItem.label }}</div> <div class="form-title" v-if="sItem.label">{{ sItem.label }}</div>
<div v-if="sItem.type === 'dateTime'" class="flex1"> <div v-if="sItem.type === 'dateTime'" class="flex1">
<HandleFormItem type="dateTime" :item="sItem" v-model="formFields[key]" <HandleFormItem type="dateTime" :item="sItem" v-model="formFields[key]"
@copy="onCopy(sItem, key)" :error="errors[key]" @update:error="errors[key] = false" />
@copy="onCopy(sItem, key)" :error="errors[key]" @update:error="errors[key] = false"
:orange-bg="orangeBgFields[key]" />
</div> </div>
<div v-else-if="sItem.type === 'select'"> <div v-else-if="sItem.type === 'select'">
<HandleFormItem type="select" :item="sItem" v-model="formFields[key]" <HandleFormItem type="select" :item="sItem" v-model="formFields[key]"
@copy="onCopy(sItem, key)" @change="onSelectChange(key, $event)" :error="errors[key]" @update:error="errors[key] = false" />
@copy="onCopy(sItem, key)" @change="onSelectChange(key, $event)" :error="errors[key]" @update:error="errors[key] = false"
:orange-bg="orangeBgFields[key]" />
</div> </div>
<div v-else-if="sItem.type === 'input'"> <div v-else-if="sItem.type === 'input'">
<HandleFormItem @blur="onBlur(key, $event)" :item="sItem" v-model="formFields[key]" <HandleFormItem @blur="onBlur(key, $event)" :item="sItem" v-model="formFields[key]"
@copy="onCopy(sItem, key)" :error="errors[key]" @update:error="errors[key] = false" />
@copy="onCopy(sItem, key)" :error="errors[key]" @update:error="errors[key] = false"
:orange-bg="orangeBgFields[key]" />
</div> </div>
<div v-else-if="sItem.type === 'textarea'"> <div v-else-if="sItem.type === 'textarea'">
<HandleFormItem @blur="onBlur(key, $event)" type="textarea" :item="sItem" v-model="formFields[key]" <HandleFormItem @blur="onBlur(key, $event)" type="textarea" :item="sItem" v-model="formFields[key]"
@copy="onCopy(sItem, key)" :error="errors[key]" @update:error="errors[key] = false" />
@copy="onCopy(sItem, key)" :error="errors[key]" @update:error="errors[key] = false"
:orange-bg="orangeBgFields[key]" />
</div> </div>
</div> </div>
</div> </div>
@ -80,24 +87,29 @@
<div class="step-form-title" v-if="sItem.label">{{ sItem.label }}</div> <div class="step-form-title" v-if="sItem.label">{{ sItem.label }}</div>
<div v-if="sItem.type === 'dateTime'" class="flex1"> <div v-if="sItem.type === 'dateTime'" class="flex1">
<HandleFormItem type="dateTime" :item="sItem" v-model="formFields[key]" <HandleFormItem type="dateTime" :item="sItem" v-model="formFields[key]"
@copy="onCopy(sItem, key)" :error="errors[key]" @update:error="errors[key] = false" />
@copy="onCopy(sItem, key)" :error="errors[key]" @update:error="errors[key] = false"
:orange-bg="orangeBgFields[key]" />
</div> </div>
<div v-else-if="sItem.type === 'select'" class="flex flex1"> <div v-else-if="sItem.type === 'select'" class="flex flex1">
<HandleFormItem type="select" :item="sItem" style="width: auto;flex:1" v-model="formFields[key]" <HandleFormItem type="select" :item="sItem" style="width: auto;flex:1" v-model="formFields[key]"
@copy="onCopy(sItem, key)" @change="onSelectChange(key, $event)" :error="errors[key]" @update:error="errors[key] = false" />
@copy="onCopy(sItem, key)" @change="onSelectChange(key, $event)" :error="errors[key]" @update:error="errors[key] = false"
:orange-bg="orangeBgFields[key]" />
<div v-show="isShowOther(formFields[key])" class="flex flex1"> <div v-show="isShowOther(formFields[key])" class="flex flex1">
<div class="other-title">其他</div> <div class="other-title">其他</div>
<div class="flex"> <div class="flex">
<HandleFormItem @blur="onBlur(key, $event)" class="sub-select" :item="getOtherItem(sItem)" v-model="formFields[sItem.otherCode]" <HandleFormItem @blur="onBlur(key, $event)" class="sub-select" :item="getOtherItem(sItem)" v-model="formFields[sItem.otherCode]"
@copy="onCopy(sItem, key)" :error="errors[sItem.otherCode]" @update:error="errors[sItem.otherCode] = false" />
@copy="onCopy(sItem, key)" :error="errors[sItem.otherCode]" @update:error="errors[sItem.otherCode] = false"
:orange-bg="orangeBgFields[sItem.otherCode]" />
</div> </div>
</div> </div>
</div> </div>
<div v-else-if="sItem.type === 'input'" class="flex flex1"> <div v-else-if="sItem.type === 'input'" class="flex flex1">
<HandleFormItem @blur="onBlur(key, $event)" class="flex1" :item="sItem" v-model="formFields[key]" <HandleFormItem @blur="onBlur(key, $event)" class="flex1" :item="sItem" v-model="formFields[key]"
@copy="onCopy(sItem, key)" :error="errors[key]" @update:error="errors[key] = false" />
@copy="onCopy(sItem, key)" :error="errors[key]" @update:error="errors[key] = false"
:orange-bg="orangeBgFields[key]" />
<HandleFormItem v-if="sItem.subType === 'select'" type="select" class="sub-select" :item="getSubItem(sItem)" v-model="formFields[sItem.subKey]" <HandleFormItem v-if="sItem.subType === 'select'" type="select" class="sub-select" :item="getSubItem(sItem)" v-model="formFields[sItem.subKey]"
@copy="onCopy(sItem, key)" @change="onSelectChange(sItem.subKey, $event)" :error="errors[sItem.subKey]" @update:error="errors[sItem.subKey] = false" />
@copy="onCopy(sItem, key)" @change="onSelectChange(sItem.subKey, $event)" :error="errors[sItem.subKey]" @update:error="errors[sItem.subKey] = false"
:orange-bg="orangeBgFields[sItem.subKey]" />
<div v-else-if="sItem.subType === 'span'">{{ formFields[sItem.subKey] }}</div> <div v-else-if="sItem.subType === 'span'">{{ formFields[sItem.subKey] }}</div>
<HandleFormItem v-else-if="sItem.subType === 'clickable'" type="clickable" @clickable="handleClickable(sItem,$event)" class="sub-select" :item="getClickableItem(sItem)" :value="formFields[sItem.subKey]" <HandleFormItem v-else-if="sItem.subType === 'clickable'" type="clickable" @clickable="handleClickable(sItem,$event)" class="sub-select" :item="getClickableItem(sItem)" :value="formFields[sItem.subKey]"
/> />
@ -108,9 +120,11 @@
</div> </div>
<div v-else-if="sItem.type === 'inputNumber'" class="flex flex1"> <div v-else-if="sItem.type === 'inputNumber'" class="flex flex1">
<HandleFormItem type = "inputNumber" @blur="onBlur(key, $event)" class="flex1" :item="sItem" @input = "onInputNumberChange(key, $event)" :value = "formFields[key]" <HandleFormItem type = "inputNumber" @blur="onBlur(key, $event)" class="flex1" :item="sItem" @input = "onInputNumberChange(key, $event)" :value = "formFields[key]"
@copy="onCopy(sItem, key)" :error="errors[key]" @update:error="errors[key] = false" />
@copy="onCopy(sItem, key)" :error="errors[key]" @update:error="errors[key] = false"
:orange-bg="orangeBgFields[key]" />
<HandleFormItem v-if="sItem.subType === 'select'" type="select" class="sub-select" :item="getSubItem(sItem)" v-model="formFields[sItem.subKey]" <HandleFormItem v-if="sItem.subType === 'select'" type="select" class="sub-select" :item="getSubItem(sItem)" v-model="formFields[sItem.subKey]"
@copy="onCopy(sItem, key)" @change="onSelectChange(sItem.subKey, $event)" :error="errors[sItem.subKey]" @update:error="errors[sItem.subKey] = false" />
@copy="onCopy(sItem, key)" @change="onSelectChange(sItem.subKey, $event)" :error="errors[sItem.subKey]" @update:error="errors[sItem.subKey] = false"
:orange-bg="orangeBgFields[sItem.subKey]" />
<div v-else-if="sItem.subType === 'span'">{{ formFields[sItem.subKey] }}</div> <div v-else-if="sItem.subType === 'span'">{{ formFields[sItem.subKey] }}</div>
<HandleFormItem v-else-if="sItem.subType === 'clickable'" @clickable="handleClickable(sItem,$event)" type="clickable" class="sub-select" :item="getClickableItem(sItem)" :value="formFields[sItem.subKey]" <HandleFormItem v-else-if="sItem.subType === 'clickable'" @clickable="handleClickable(sItem,$event)" type="clickable" class="sub-select" :item="getClickableItem(sItem)" :value="formFields[sItem.subKey]"
/> />
@ -153,6 +167,7 @@ export default {
formFields: {},//表单绑定字段 formFields: {},//表单绑定字段
allFieldsConfig: {},//包含config的所有字段,主要用于校验表单是否填写 allFieldsConfig: {},//包含config的所有字段,主要用于校验表单是否填写
errors: {},//存储表单错误信息，用于标红提示 errors: {},//存储表单错误信息，用于标红提示
orangeBgFields: {},// 存储需要橙色背景的字段
}; };
}, },
watch: { watch: {
@ -394,6 +409,21 @@ export default {
return this.formFields[key]; return this.formFields[key];
}, },
onBlur(key, val) { onBlur(key, val) {
// compareTo 功能：当fillType==="actFill"时，判断当前值是否与compareTo字段的值一样，如果不一样则将当前input框的背景色标记成橙色
const currentFieldConfig = this.allFieldsConfig[key];
if (currentFieldConfig && currentFieldConfig.fillType === "actFill" && currentFieldConfig.compareTo) {
const compareToKey = currentFieldConfig.compareTo;
const compareToValue = this.formFields[compareToKey];
// 比较当前值和compareTo值，如果不相等则设置橙色背景
if (val !== compareToValue) {
this.$set(this.orangeBgFields, key, true);
} else {
// 相等则移除橙色背景
this.$set(this.orangeBgFields, key, false);
}
}
this.$emit("blur", { key, value: val ,...this.formFields}); this.$emit("blur", { key, value: val ,...this.formFields});
}, },
onSelectChange(key, val) { onSelectChange(key, val) {
@ -519,7 +549,7 @@ export default {
margin-right: 24px; margin-right: 24px;
} }
.sub-select{ .sub-select{
width: auto;
width: 100px;
margin-left: 10px; margin-left: 10px;
} }
.clickable{ .clickable{

+ 54
- 5
src/components/Template/CustomTable.vue View File

@ -40,21 +40,24 @@
class="body-input" :item="getBodyItem(col, rowIndex)" v-model="row[col.prop]" class="body-input" :item="getBodyItem(col, rowIndex)" v-model="row[col.prop]"
@change="onBodyValueChange(rowIndex, colIndex, $event)" @change="onBodyValueChange(rowIndex, colIndex, $event)"
:error="hasError(rowIndex, colIndex, col.prop)" :error="hasError(rowIndex, colIndex, col.prop)"
@update:error="onErrorUpdate(rowIndex, colIndex, col.prop, $event)" />
@update:error="onErrorUpdate(rowIndex, colIndex, col.prop, $event)"
:orange-bg="hasOrangeBg(rowIndex, colIndex, col.prop)" />
</template> </template>
<template v-else-if="col.bodyType === 'inputNumber'"> <template v-else-if="col.bodyType === 'inputNumber'">
<HandleFormItem type="inputNumber" @copy="onCopy(rowIndex, col)" class="body-input-number" <HandleFormItem type="inputNumber" @copy="onCopy(rowIndex, col)" class="body-input-number"
:item="getBodyItem(col, rowIndex)" v-model="row[col.prop]" @blur="onBlur(rowIndex, col.prop, $event)" :item="getBodyItem(col, rowIndex)" v-model="row[col.prop]" @blur="onBlur(rowIndex, col.prop, $event)"
@change="onBodyValueChange(rowIndex, colIndex, $event)" @change="onBodyValueChange(rowIndex, colIndex, $event)"
:error="hasError(rowIndex, colIndex, col.prop)" :error="hasError(rowIndex, colIndex, col.prop)"
@update:error="onErrorUpdate(rowIndex, colIndex, col.prop, $event)" />
@update:error="onErrorUpdate(rowIndex, colIndex, col.prop, $event)"
:orange-bg="hasOrangeBg(rowIndex, colIndex, col.prop)" />
</template> </template>
<template v-else-if="col.bodyType === 'select'"> <template v-else-if="col.bodyType === 'select'">
<HandleFormItem type="select" class="body-select" @blur="onBlur(rowIndex, col.prop, $event)" <HandleFormItem type="select" class="body-select" @blur="onBlur(rowIndex, col.prop, $event)"
:item="getBodyItem(col, rowIndex)" v-model="row[col.prop]" :item="getBodyItem(col, rowIndex)" v-model="row[col.prop]"
@change="onBodyValueChange(rowIndex, colIndex, $event)" @change="onBodyValueChange(rowIndex, colIndex, $event)"
:error="hasError(rowIndex, colIndex, col.prop)" :error="hasError(rowIndex, colIndex, col.prop)"
@update:error="onErrorUpdate(rowIndex, colIndex, col.prop, $event)" />
@update:error="onErrorUpdate(rowIndex, colIndex, col.prop, $event)"
:orange-bg="hasOrangeBg(rowIndex, colIndex, col.prop)" />
</template> </template>
<template v-else> <template v-else>
{{ row[col.prop] }} {{ row[col.prop] }}
@ -66,7 +69,8 @@
@copy="onCopy(rowIndex, col)" :item="getBodySubItem(col)" v-model="row[col.bodySubKey]" @copy="onCopy(rowIndex, col)" :item="getBodySubItem(col)" v-model="row[col.bodySubKey]"
@change="onBodySubValueChange(rowIndex, colIndex, $event)" @change="onBodySubValueChange(rowIndex, colIndex, $event)"
:error="hasError(rowIndex, colIndex, col.bodySubKey)" :error="hasError(rowIndex, colIndex, col.bodySubKey)"
@update:error="onErrorUpdate(rowIndex, colIndex, col.bodySubKey, $event)" />
@update:error="onErrorUpdate(rowIndex, colIndex, col.bodySubKey, $event)"
:orange-bg="hasOrangeBg(rowIndex, colIndex, col.bodySubKey)" />
</template> </template>
<template v-else> <template v-else>
{{ row[col.bodySubKey] }} {{ row[col.bodySubKey] }}
@ -140,7 +144,8 @@ export default {
return { return {
localDataSource: [], localDataSource: [],
headerSelectFields: {}, headerSelectFields: {},
formErrors: [] // 表单错误状态管理
formErrors: [], // 表单错误状态管理
orangeBgCells: {} // 存储需要橙色背景的单元格 {rowIndex-colIndex: true/false}
} }
}, },
watch: { watch: {
@ -338,6 +343,7 @@ export default {
label: col.label, label: col.label,
precision: currentItem[col.bodyPrecisionKey] || col.precision || 0, precision: currentItem[col.bodyPrecisionKey] || col.precision || 0,
copyFrom: col.copyFrom || "", copyFrom: col.copyFrom || "",
compareTo: col.bodyCompareTo, // 添加 compareTo 字段
}; };
if (col.bodyDisabled) { if (col.bodyDisabled) {
item.disabled = col.bodyDisabled; item.disabled = col.bodyDisabled;
@ -352,6 +358,7 @@ export default {
label: "", label: "",
placeholder: col.bodySubPlaceholder || "请输入", placeholder: col.bodySubPlaceholder || "请输入",
precision: col.subPrecision || 0, precision: col.subPrecision || 0,
compareTo: col.bodySubCompareTo, // 添加 compareTo 字段
} }
if (col.bodySubDisabled) { if (col.bodySubDisabled) {
item.disabled = col.bodySubDisabled; item.disabled = col.bodySubDisabled;
@ -402,8 +409,50 @@ export default {
onSubBlur(rowIndex, colKey, value) { onSubBlur(rowIndex, colKey, value) {
this.$emit("blur", { rowIndex, colKey, value, item: this.localDataSource[rowIndex] }); this.$emit("blur", { rowIndex, colKey, value, item: this.localDataSource[rowIndex] });
}, },
// 检查是否需要橙色背景
hasOrangeBg(rowIndex, colIndex, field) {
const key = `${rowIndex}-${colIndex}-${field}`;
return this.orangeBgCells[key] || false;
},
// 设置橙色背景状态
setOrangeBg(rowIndex, colIndex, field, status) {
const key = `${rowIndex}-${colIndex}-${field}`;
this.$set(this.orangeBgCells, key, status);
},
onBlur(rowIndex, colKey) { onBlur(rowIndex, colKey) {
const value = this.localDataSource[rowIndex][colKey]; const value = this.localDataSource[rowIndex][colKey];
// 查找对应的列配置
const col = this.columns.find(c => c.prop === colKey);
if (col && col.bodyFillType === "actFill" && col.bodyCompareTo) {
const compareToValue = this.localDataSource[rowIndex][col.bodyCompareTo];
// 比较当前值和compareTo值，如果不相等则设置橙色背景
if (value !== compareToValue) {
this.setOrangeBg(rowIndex, this.columns.findIndex(c => c.prop === colKey), colKey, true);
} else {
// 相等则移除橙色背景
this.setOrangeBg(rowIndex, this.columns.findIndex(c => c.prop === colKey), colKey, false);
}
}
this.$emit("blur", { rowIndex, colKey, value, item: this.localDataSource[rowIndex] });
},
onSubBlur(rowIndex, colKey, value) {
// 查找对应的列配置
const col = this.columns.find(c => c.bodySubKey === colKey);
if (col && col.bodySubFillType === "actFill" && col.bodySubCompareTo) {
const compareToValue = this.localDataSource[rowIndex][col.bodySubCompareTo];
// 比较当前值和compareTo值，如果不相等则设置橙色背景
if (value !== compareToValue) {
this.setOrangeBg(rowIndex, this.columns.findIndex(c => c.bodySubKey === colKey), colKey, true);
} else {
// 相等则移除橙色背景
this.setOrangeBg(rowIndex, this.columns.findIndex(c => c.bodySubKey === colKey), colKey, false);
}
}
this.$emit("blur", { rowIndex, colKey, value, item: this.localDataSource[rowIndex] }); this.$emit("blur", { rowIndex, colKey, value, item: this.localDataSource[rowIndex] });
} }
} }

+ 20
- 6
src/components/Template/HandleFormItem.vue View File

@ -2,31 +2,31 @@
<div class="flex w-100"> <div class="flex w-100">
<div class="flex1 flex"> <div class="flex1 flex">
<el-input v-if="type === 'input'" :maxlength="item.maxlength || 50" :disabled="getDisabled()" <el-input v-if="type === 'input'" :maxlength="item.maxlength || 50" :disabled="getDisabled()"
:class="getFillTypeStyle()" @blur="onBlur"
:class="getFillTypeStyle() + (orangeBg ? ' orange-bg' : '')" @blur="onBlur"
:placeholder="getPlaceholder()" v-model="inputValue" :placeholder="getPlaceholder()" v-model="inputValue"
@input="onInputChange" @change="onInputChange" /> @input="onInputChange" @change="onInputChange" />
<el-input v-else-if="type === 'textarea'" :maxlength="item.maxlength || 50" :disabled="getDisabled()" <el-input v-else-if="type === 'textarea'" :maxlength="item.maxlength || 50" :disabled="getDisabled()"
:class="getFillTypeStyle()" type="textarea" show-word-limit resize="none" @blur="onBlur"
:class="getFillTypeStyle() + (orangeBg ? ' orange-bg' : '')" type="textarea" show-word-limit resize="none" @blur="onBlur"
:rows="item.rows || 3" :placeholder="getPlaceholder()" :rows="item.rows || 3" :placeholder="getPlaceholder()"
v-model="inputValue" @input="onInputChange" @change="onInputChange" /> v-model="inputValue" @input="onInputChange" @change="onInputChange" />
<DecimalInput v-else-if="type === 'inputNumber'" @blur="onBlur" :maxlength="item.maxlength || 10" <DecimalInput v-else-if="type === 'inputNumber'" @blur="onBlur" :maxlength="item.maxlength || 10"
class="flex1" :disabled="getDisabled()" :controls="item.controls || false" :min="item.min || 0" class="flex1" :disabled="getDisabled()" :controls="item.controls || false" :min="item.min || 0"
:prepend = "item.prepend" :prepend = "item.prepend"
:decimalDigits="item.precision" :class="getFillTypeStyle()"
:decimalDigits="item.precision" :class="getFillTypeStyle() + (orangeBg ? ' orange-bg' : '')"
:placeholder="getPlaceholder()" v-model="inputValue" :placeholder="getPlaceholder()" v-model="inputValue"
@input="onInputChange" @change="onInputChange" /> @input="onInputChange" @change="onInputChange" />
<el-select v-else-if="type === 'select'" class="flex1" :multiple="item.multiple" <el-select v-else-if="type === 'select'" class="flex1" :multiple="item.multiple"
:class="getFillTypeStyle()" v-model="inputValue" :disabled="getDisabled()"
:class="getFillTypeStyle() + (orangeBg ? ' orange-bg' : '')" v-model="inputValue" :disabled="getDisabled()"
:placeholder="getPlaceholder()" @change="onInputChange"> :placeholder="getPlaceholder()" @change="onInputChange">
<el-option v-for="op in item.options" :key="op.value" :label="op.label" :value="op.value"> <el-option v-for="op in item.options" :key="op.value" :label="op.label" :value="op.value">
</el-option> </el-option>
</el-select> </el-select>
<el-date-picker v-else-if="type === 'dateTime'" type="datetime" class="flex1" :class="getFillTypeStyle()"
<el-date-picker v-else-if="type === 'dateTime'" type="datetime" class="flex1" :class="getFillTypeStyle() + (orangeBg ? ' orange-bg' : '')"
v-model="inputValue" :disabled="getDisabled()" format="yyyy/MM/DD HH:mm:ss" v-model="inputValue" :disabled="getDisabled()" format="yyyy/MM/DD HH:mm:ss"
value-format="yyyy/MM/DD HH:mm:ss" value-format="yyyy/MM/DD HH:mm:ss"
:placeholder="getPlaceholder()" @change="onInputChange"> :placeholder="getPlaceholder()" @change="onInputChange">
</el-date-picker> </el-date-picker>
<div class="clickable" :class="getFillTypeStyle() + (getDisabled()?' disabled':'')" v-else-if = "item.type ==='clickable'" @click="handleClickable(item,$event)">
<div class="clickable" :class="getFillTypeStyle() + (getDisabled()?' disabled':'') + (orangeBg ? ' orange-bg' : '')" v-else-if = "item.type ==='clickable'" @click="handleClickable(item,$event)">
<span v-if="value">{{ value }}</span> <span v-if="value">{{ value }}</span>
<span v-else class="default-placeholder-text">{{getPlaceholder()}}</span> <span v-else class="default-placeholder-text">{{getPlaceholder()}}</span>
</div> </div>
@ -76,6 +76,11 @@ export default {
type: Boolean, type: Boolean,
default: false default: false
}, },
// 橙色背景状态
orangeBg: {
type: Boolean,
default: false
},
}, },
data() { data() {
return { return {
@ -347,6 +352,15 @@ export default {
border-color: #f56c6c; border-color: #f56c6c;
} }
} }
.orange-bg {
background-color: #FFF1F1 !important; // 橙色背景，透明度适中
input, textarea, .el-input__inner, .el-textarea__inner {
background-color: #FFF1F1 !important;
}
}
.clickable{ .clickable{
cursor: pointer; cursor: pointer;
width: auto; width: auto;

+ 2
- 0
src/views/business/comps/template/comps/sp/SWYPBQGZYZBB.vue View File

@ -305,6 +305,7 @@ export default {
bodyType: "inputNumber", bodyType: "inputNumber",
bodyFillType: "actFill", bodyFillType: "actFill",
bodyMaxlength: 10, bodyMaxlength: 10,
bodyCompareTo: "targetStartSolutionVolume",//与哪个字段比较
copyFrom: "targetStartSolutionVolume",//复制哪个字段 copyFrom: "targetStartSolutionVolume",//复制哪个字段
}, },
{ {
@ -336,6 +337,7 @@ export default {
bodyType: "inputNumber", bodyType: "inputNumber",
bodyFillType: "actFill", bodyFillType: "actFill",
bodyMaxlength: 10, bodyMaxlength: 10,
bodyCompareTo: "targetDiluentVolume",//与哪个字段比较
copyFrom: "targetDiluentVolume",//复制哪个字段 copyFrom: "targetDiluentVolume",//复制哪个字段
}, },
{ {

+ 2
- 0
src/views/business/comps/template/comps/sp/SWYPFXRYPZB.vue View File

@ -183,6 +183,7 @@ export default {
type: "inputNumber", type: "inputNumber",
subType: "select", subType: "select",
subKey: "targetActConcentrationUnit", subKey: "targetActConcentrationUnit",
compareTo: "targetPreConcentration",//与哪个字段比较
fillType: "actFill", fillType: "actFill",
subFillType: "preFill", subFillType: "preFill",
subOptions: this.getDictOptions('business_nddw'), subOptions: this.getDictOptions('business_nddw'),
@ -206,6 +207,7 @@ export default {
fillType: "actFill", fillType: "actFill",
subFillType: "preFill", subFillType: "preFill",
subOptions: this.getDictOptions('business_tjdw'), subOptions: this.getDictOptions('business_tjdw'),
compareTo: "targetPreVolume",//与哪个字段比较
copyFrom: "targetPreVolume",//复制哪个字段 copyFrom: "targetPreVolume",//复制哪个字段
maxlength:10 maxlength:10
}, },

Write Preview
Loading…
Cancel
Save