You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
740 lines
25 KiB
740 lines
25 KiB
<template>
|
|
<div>
|
|
<div class="custom-table-wrapper">
|
|
<div class="custom-table-header">
|
|
<div class="custom-table-row">
|
|
<div v-for="(col, index) in columns" :key="index" class="custom-table-cell header-cell"
|
|
:style="{ width: col.width ? col.width + 'px' : 'auto' }">
|
|
<div class="header-cell-content">
|
|
<div>{{ $t(col.label) }}</div>
|
|
<template
|
|
v-if="col.headerSelectKey && col.headerOptions && (showHeaderSelect || templateFillType === 'preFill')">
|
|
<HandleFormItem :fieldKey="prefixKey + '_' + col.headerSelectKey" :fieldItemLabel="fieldItemLabel"
|
|
type="select" class="header-select" :item="getHeaderItem(col)"
|
|
v-model="headerSelectFields[col.headerSelectKey]" @change="onHeaderSelectChange(col, $event)"
|
|
:error="hasError(-1, index, col.headerSelectKey)"
|
|
@update:error="onErrorUpdate(-1, index, col.headerSelectKey, $event)" />
|
|
</template>
|
|
<span v-else-if="headerSelectFields[col.headerSelectKey]" class="fill-type-icon">({{
|
|
headerSelectFields[col.headerSelectKey] }})</span>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
<!-- 默认操作栏 -->
|
|
<div class="custom-table-cell header-cell" :style="{ width: '245px' }" v-if="showOperation">
|
|
<div class="header-cell-content">
|
|
<div>操作</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="custom-table-body">
|
|
<div v-for="(row, rowIndex) in localDataSource" :key="rowIndex" class="custometable-row">
|
|
<div v-for="(col, colIndex) in columns" :key="colIndex" class="custom-table-cell body-cell"
|
|
:style="{ width: col.width ? col.width + 'px' : 'auto' }">
|
|
<div class="inner-table-cell">
|
|
<div class="flex1">
|
|
<template v-if="col.bodyType === 'input'">
|
|
<HandleFormItem :fieldKey="prefixKey + '_' + col.prop + '_' + rowIndex"
|
|
:fieldItemLabel="fieldItemLabel" type="input" @blur="onBlur(rowIndex, col.prop, $event)"
|
|
@copy="onCopy(rowIndex, col)" class="body-input" :item="getBodyItem(col, rowIndex)"
|
|
v-model="row[col.prop]" @change="onBodyValueChange(rowIndex, colIndex, $event)"
|
|
:error="hasError(rowIndex, colIndex, col.prop)"
|
|
@update:error="onErrorUpdate(rowIndex, colIndex, col.prop, $event)"
|
|
:orange-bg="hasOrangeBg(rowIndex, colIndex, col.prop)" />
|
|
</template>
|
|
<template v-else-if="col.bodyType === 'inputNumber'">
|
|
<HandleFormItem :fieldKey="prefixKey + '_' + col.prop + '_' + rowIndex"
|
|
:fieldItemLabel="fieldItemLabel" 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)" @change="onBodyValueChange(rowIndex, colIndex, $event)"
|
|
:error="hasError(rowIndex, colIndex, col.prop)"
|
|
@update:error="onErrorUpdate(rowIndex, colIndex, col.prop, $event)"
|
|
:orange-bg="hasOrangeBg(rowIndex, colIndex, col.prop)" />
|
|
</template>
|
|
<template v-else-if="col.bodyType === 'select'">
|
|
<div class="flex flex1">
|
|
<HandleFormItem :fieldKey="prefixKey + '_' + col.prop + '_' + rowIndex"
|
|
:fieldItemLabel="fieldItemLabel" type="select" class="body-select"
|
|
@blur="onBlur(rowIndex, col.prop, $event)" :item="getBodyItem(col, rowIndex)"
|
|
v-model="row[col.prop]" @change="onBodyValueChange(rowIndex, colIndex, $event)"
|
|
:error="hasError(rowIndex, colIndex, col.prop)"
|
|
@update:error="onErrorUpdate(rowIndex, colIndex, col.prop, $event)"
|
|
:orange-bg="hasOrangeBg(rowIndex, colIndex, col.prop)" />
|
|
<div v-show="isShowOther(row[col.prop])" class="flex flex1">
|
|
<div class="other-title">{{ col.otherLabel ? $t(col.otherLabel) : $t("template.common.other") }}
|
|
</div>
|
|
<div class="flex flex1">
|
|
<HandleFormItem :field-item-label="fieldItemLabel" :field-key="prefixKey + '_' + col.otherCode"
|
|
@blur="onBlur(rowIndex, col.prop, $event)" :item="getOtherItem(col)" v-model="row[col.otherCode]"
|
|
:error="hasError(rowIndex, colIndex, col.otherCode)"
|
|
@update:error="onErrorUpdate(rowIndex, colIndex, col.otherCode, $event)"
|
|
:orange-bg="hasOrangeBg(rowIndex, colIndex, col.otherCode)" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</template>
|
|
<div class="flex flex1" v-else-if="col.bodyType === 'clickable'">
|
|
<HandleFormItem :fieldKey="prefixKey + '_' + col.prop + '_' + rowIndex"
|
|
:fieldItemLabel="fieldItemLabel" type="clickable" class="body-clickable"
|
|
:item="getBodyItem(col, rowIndex)" :value="row[col.prop]"
|
|
:error="hasError(rowIndex, colIndex, col.prop)"
|
|
@clickable="handleClickable(col, rowIndex, colIndex)"
|
|
@update:error="onErrorUpdate(rowIndex, colIndex, col.prop, $event)"
|
|
:orange-bg="hasOrangeBg(rowIndex, colIndex, col.prop)" />
|
|
</div>
|
|
<template v-else>
|
|
{{ row[col.prop] }}
|
|
</template>
|
|
</div>
|
|
<div class="m-l-5 flex1" v-if="isShowBodySub(col,row)">
|
|
<template v-if="col.bodySubType === 'inputNumber'">
|
|
<HandleFormItem :fieldKey="prefixKey + '_' + col.bodySubKey + '_' + rowIndex"
|
|
:fieldItemLabel="fieldItemLabel" type="inputNumber"
|
|
@blur="onSubBlur(rowIndex, col.bodySubKey, $event)" @copy="onCopy(rowIndex, col)"
|
|
:item="getBodySubItem(col)" v-model="row[col.bodySubKey]"
|
|
@change="onBodySubValueChange(rowIndex, colIndex, $event)"
|
|
:error="hasError(rowIndex, colIndex, col.bodySubKey)"
|
|
@update:error="onErrorUpdate(rowIndex, colIndex, col.bodySubKey, $event)"
|
|
:orange-bg="hasOrangeBg(rowIndex, colIndex, col.bodySubKey)" />
|
|
</template>
|
|
<template v-else-if="col.bodySubType === 'select'">
|
|
<HandleFormItem :fieldKey="prefixKey + '_' + col.bodySubKey + '_' + rowIndex"
|
|
:fieldItemLabel="fieldItemLabel" type="select" class="body-select"
|
|
@blur="onSubBlur(rowIndex, col.bodySubKey, $event)" :item="getBodySubItem(col, rowIndex)"
|
|
v-model="row[col.bodySubKey]" @change="onBodySubValueChange(rowIndex, colIndex, $event)"
|
|
:error="hasError(rowIndex, colIndex, col.bodySubKey)"
|
|
@update:error="onErrorUpdate(rowIndex, colIndex, col.bodySubKey, $event)"
|
|
:orange-bg="hasOrangeBg(rowIndex, colIndex, col.bodySubKey)" />
|
|
</template>
|
|
|
|
<template v-else-if = "col.bodySubType === 'span'">
|
|
{{ row[col.bodySubKey] }}
|
|
</template>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 默认操作栏 -->
|
|
<div class="custom-table-cell body-cell" :style="{ width: '245px' }" v-if="showOperation">
|
|
<div class="inner-table-cell">
|
|
<slot name="operation" :row="row" :rowIndex="rowIndex"></slot>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div v-if="localDataSource.length == 0">
|
|
<div class="no-data">暂无数据</div>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
<div class="add-row" v-if="isShowAddRos()">
|
|
<el-button type="primary" plain @click="onAddRow">添加行</el-button>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import HandleFormItem from "./HandleFormItem.vue"
|
|
export default {
|
|
inject: ['templateFillType'],
|
|
name: 'CustomTable',
|
|
components: {
|
|
HandleFormItem
|
|
},
|
|
props: {
|
|
// 是否显示表头选择器
|
|
showHeaderSelect: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
showAddRow: {
|
|
type: Boolean,
|
|
default: undefined,
|
|
},
|
|
// 是否显示操作栏
|
|
showOperation: {
|
|
type: Boolean,
|
|
default: true,
|
|
},
|
|
columns: {
|
|
type: Array,
|
|
required: true,
|
|
// 示例格式：
|
|
// [
|
|
// { label: '姓名', prop: 'name' },
|
|
// { label: '状态', prop: 'status', type: 'select', options: [{value:1,label:'启用'},...], selected: null }
|
|
// ]
|
|
},
|
|
formData: {
|
|
type: Object,
|
|
default: () => {
|
|
return {
|
|
stepTableFormData: [],
|
|
headerSelectFields: {}
|
|
}
|
|
}
|
|
},
|
|
fieldItemLabel: {
|
|
type: String,
|
|
default: '',
|
|
},
|
|
//循环组件的情况下需要用这个来区分字段
|
|
prefixKey: {
|
|
type: String,
|
|
default: "",
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
localDataSource: [],
|
|
headerSelectFields: {},
|
|
formErrors: [], // 表单错误状态管理
|
|
orangeBgCells: {} // 存储需要橙色背景的单元格 {rowIndex-colIndex: true/false}
|
|
}
|
|
},
|
|
watch: {
|
|
formData: {
|
|
immediate: true,
|
|
handler(newData) {
|
|
const { stepTableFormData = [], headerSelectFields = {} } = newData;
|
|
this.updateDataSource(stepTableFormData);
|
|
this.headerSelectFields = JSON.parse(JSON.stringify(headerSelectFields))
|
|
}
|
|
},
|
|
localDataSource: {
|
|
immediate: true,
|
|
deep: true,
|
|
handler(newVal, oldVal) {
|
|
// if(newVal.length == 0){
|
|
// return
|
|
// }
|
|
// this.localDataSource = [...newVal];
|
|
}
|
|
}
|
|
},
|
|
mounted() {
|
|
// this.initHeaderSelectValues();
|
|
},
|
|
methods: {
|
|
//获取其他下拉框的配置
|
|
getOtherItem(sItem) {
|
|
return {
|
|
label: sItem.otherLabel ? this.$t(sItem.otherLabel) : this.$t("template.common.other"),
|
|
fillType: sItem.bodyFillType,
|
|
maxlength: sItem.otherMaxlength || 50,
|
|
parentLabel: sItem.label,
|
|
type:"input"
|
|
}
|
|
},
|
|
//判断是否显示其他输入框
|
|
isShowOther(v = []) {
|
|
// 确保v是数组类型，以避免类型错误
|
|
const arr = Array.isArray(v) ? v : [v];
|
|
//和凡哥商量，只要value为负数都显示其他
|
|
return arr.some(item => item < 0);
|
|
},
|
|
isShowBodySub(col,row) {
|
|
if (col.hasOwnProperty("disabled")) {
|
|
return col.showBodySub
|
|
}else if(col.bodySubType === 'span'&&!row[col.bodySubKey]){//如果是span没有值的话就隐藏
|
|
return false;
|
|
}
|
|
return col.bodySubType && col.bodySubKey;
|
|
},
|
|
// 点击事件
|
|
handleClickable(col, rowIndex, colIndex) {
|
|
console.log("clickable", rowIndex, colIndex, col)
|
|
if (this.templateFillType !== 'actFill') {
|
|
// return
|
|
}
|
|
this.$emit("clickable", col, rowIndex)
|
|
},
|
|
isShowAddRos() {
|
|
if (this.showAddRow !== undefined) {
|
|
return this.showAddRow
|
|
}
|
|
return this.templateFillType === 'preFill';
|
|
},
|
|
// 复制值
|
|
onCopy(rowIndex, col) {
|
|
|
|
if (col.copyFrom) {
|
|
if (!this.localDataSource[rowIndex][col.copyFrom]) {//没有值就不用复制了
|
|
return
|
|
}
|
|
this.$set(this.localDataSource[rowIndex], col.prop, this.localDataSource[rowIndex][col.copyFrom])
|
|
this.onBlur(rowIndex, col.prop, this.localDataSource[rowIndex][col.prop]);
|
|
}
|
|
},
|
|
// 初始化表头选择器值
|
|
initHeaderSelectValues() {
|
|
const headerSelectObj = {};
|
|
this.columns.map(col => {
|
|
if (col.headerSelectKey) {
|
|
headerSelectObj[col.headerSelectKey] = col.defaultValue || col.headerOptions[0].value || ""
|
|
}
|
|
});
|
|
this.headerSelectFields = headerSelectObj;
|
|
},
|
|
// 直接获取表单数据，不做校验
|
|
getFilledFormData() {
|
|
return {
|
|
stepTableFormData: [...this.localDataSource],
|
|
headerSelectFields: this.headerSelectFields,
|
|
};
|
|
},
|
|
// 获取最新数据
|
|
getFormData() {
|
|
// 合并表头选择器值到 columns
|
|
|
|
|
|
// 数据校验
|
|
const validateResult = this.validateFormData();
|
|
return new Promise((resolve, reject) => {
|
|
if (validateResult.valid) {
|
|
resolve({
|
|
stepTableFormData: [...this.localDataSource],
|
|
headerSelectFields: this.headerSelectFields,
|
|
})
|
|
} else {
|
|
// this.$message.error("表单内容未填完,请填写后再提交");
|
|
reject(validateResult.errors[0].error)
|
|
}
|
|
})
|
|
|
|
},
|
|
// 表单数据校验
|
|
validateFormData() {
|
|
const errors = [];
|
|
|
|
// 清空之前的错误状态
|
|
this.formErrors = [];
|
|
|
|
// 校验表头的 HandleFormItem
|
|
this.columns.forEach((col, colIndex) => {
|
|
if (col.headerSelectKey && col.headerOptions && col.fillType === this.templateFillType) {
|
|
const headerValue = this.headerSelectFields[col.headerSelectKey];
|
|
if (this.isValueEmpty(headerValue)) {
|
|
const errorItem = {
|
|
rowIndex: -1, // 表头特殊标记
|
|
colIndex,
|
|
field: col.headerSelectKey,
|
|
label: this.$t(col.label),
|
|
error: `请选择${this.$t(col.label)}`
|
|
};
|
|
errors.push(errorItem);
|
|
this.formErrors.push(errorItem);
|
|
}
|
|
}
|
|
});
|
|
|
|
// 遍历数据行
|
|
this.localDataSource.forEach((row, rowIndex) => {
|
|
// 遍历列
|
|
this.columns.forEach((col, colIndex) => {
|
|
// 只校验 fillType 与当前模板状态匹配的字段
|
|
if (col.bodyFillType === this.templateFillType || col.bodySubFillType === this.templateFillType) {
|
|
// 检查主字段
|
|
const mainValue = row[col.prop];
|
|
if (this.isValueEmpty(mainValue) && !col.bodyDisabled && col.bodyType !== 'span') {
|
|
const errorItem = {
|
|
rowIndex,
|
|
colIndex,
|
|
field: col.prop,
|
|
label: this.$t(col.label),
|
|
error: `请填写${this.$t(col.label)}`
|
|
};
|
|
errors.push(errorItem);
|
|
this.formErrors.push(errorItem);
|
|
}
|
|
|
|
// 检查子字段（如果有）
|
|
if (col.bodySubKey && !col.bodySubDisabled && col.bodySubType !== 'span') {
|
|
const subValue = row[col.bodySubKey];
|
|
console.log(col, subValue, "subValue")
|
|
if (this.isValueEmpty(subValue)) {
|
|
const errorItem = {
|
|
rowIndex,
|
|
colIndex,
|
|
field: col.bodySubKey,
|
|
label: `${this.$t(col.label)}单位`,
|
|
error: `请填写${this.$t(col.label)}单位`
|
|
};
|
|
errors.push(errorItem);
|
|
this.formErrors.push(errorItem);
|
|
}
|
|
}
|
|
// 检查其他输入框
|
|
if (col.otherCode && col.bodySubType !== 'span') {
|
|
const otherValue = row[col.otherCode];
|
|
|
|
if (this.isValueEmpty(otherValue)) {
|
|
const errorItem = {
|
|
rowIndex,
|
|
colIndex,
|
|
field: col.bodySubKey,
|
|
label: `${this.$t(col.label)}单位`,
|
|
error: `请填写${this.$t(col.otherLabel) ? this.$t(col.otherLabel) : '其他'}信息`
|
|
};
|
|
errors.push(errorItem);
|
|
this.formErrors.push(errorItem);
|
|
}
|
|
}
|
|
|
|
}
|
|
});
|
|
});
|
|
console.log(errors, this.localDataSource, "errors")
|
|
return {
|
|
valid: errors.length === 0,
|
|
errors: errors
|
|
};
|
|
},
|
|
// 判断值是否为空
|
|
isValueEmpty(value) {
|
|
if (value === null || value === undefined || value === '') {
|
|
return true;
|
|
}
|
|
if (typeof value === 'string' && value.trim() === '') {
|
|
return true;
|
|
}
|
|
if (Array.isArray(value) && value.length === 0) {
|
|
return true;
|
|
}
|
|
return false;
|
|
},
|
|
// 表头选择器变化
|
|
onHeaderSelectChange(col, value) {
|
|
this.headerSelectFields[col.headerSelectKey] = value;
|
|
// 输入时清除对应表单项的错误状态
|
|
this.formErrors = this.formErrors.filter(error =>
|
|
!(error.rowIndex === -1 &&
|
|
error.field === col.headerSelectKey)
|
|
);
|
|
},
|
|
// 表体值变化
|
|
onBodyValueChange(rowIndex, colIndex, value) {
|
|
const col = this.columns[colIndex];
|
|
this.localDataSource[rowIndex][col.prop] = value;
|
|
// 输入时清除对应表单项的错误状态
|
|
this.formErrors = this.formErrors.filter(error =>
|
|
!(error.rowIndex === rowIndex &&
|
|
error.colIndex === colIndex &&
|
|
error.field === col.prop)
|
|
);
|
|
this.$emit('body-value-change', rowIndex, colIndex, value);
|
|
},
|
|
// 表体子值变化
|
|
onBodySubValueChange(rowIndex, colIndex, value) {
|
|
const col = this.columns[colIndex];
|
|
this.localDataSource[rowIndex][col.bodySubKey] = value;
|
|
// 输入时清除对应表单项的错误状态
|
|
this.formErrors = this.formErrors.filter(error =>
|
|
!(error.rowIndex === rowIndex &&
|
|
error.colIndex === colIndex &&
|
|
error.field === col.bodySubKey)
|
|
);
|
|
this.$emit('body-sub-value-change', rowIndex, colIndex, value);
|
|
},
|
|
getHeaderItem(col) {
|
|
return {
|
|
fillType: col.fillType,
|
|
options: col.headerOptions,
|
|
label: ""
|
|
}
|
|
},
|
|
getBodyItem(col, rowIndex) {
|
|
const currentItem = this.localDataSource[rowIndex];
|
|
const item = {
|
|
fillType: col.bodyFillType,
|
|
options: col.bodyOptions,
|
|
maxlength: col.bodyMaxlength,
|
|
label: this.$t(col.label),
|
|
precision: currentItem[col.bodyPrecisionKey] || col.precision,
|
|
copyFrom: col.copyFrom || "",
|
|
compareTo: col.bodyCompareTo, // 添加 compareTo 字段
|
|
type: col.bodyType || "input",
|
|
};
|
|
if (col.bodyDisabled) {
|
|
item.disabled = col.bodyDisabled;
|
|
}
|
|
return item
|
|
},
|
|
getBodySubItem(col) {
|
|
const item = {
|
|
fillType: col.bodySubFillType,
|
|
options: col.bodySubOptions,
|
|
maxlength: col.bodySubMaxlength || 10,
|
|
label: "",
|
|
placeholder: col.bodySubPlaceholder || "请输入",
|
|
precision: col.subPrecision,
|
|
compareTo: col.bodySubCompareTo, // 添加 compareTo 字段
|
|
type: col.bodySubType || "input",
|
|
}
|
|
if (col.bodySubDisabled) {
|
|
item.disabled = col.bodySubDisabled;
|
|
}
|
|
return item
|
|
},
|
|
// 删除行
|
|
deleteRow(rowIndex) {
|
|
this.localDataSource.splice(rowIndex, 1);
|
|
this.$emit('row-delete', rowIndex);
|
|
},
|
|
// 更新数据方法，可在formData变更时调用，也可由父组件调用
|
|
updateDataSource(dataSource = []) {
|
|
// 深拷贝数据以避免直接修改原始数据
|
|
this.localDataSource = JSON.parse(JSON.stringify(dataSource || []));
|
|
},
|
|
onAddRow() {
|
|
this.addRow({
|
|
actSolutionVolumePrecision: 3,//小数点精度默认为3
|
|
actSolutionConcentrationPrecision: 3,//小数点精度默认为3
|
|
targetDiluentVolumePrecision: 3,//小数点精度默认为3
|
|
targetStartSolutionVolumePrecision: 3,//小数点精度默认为3
|
|
});
|
|
},
|
|
// 添加行
|
|
addRow(row = {}) {
|
|
this.localDataSource.push(row);
|
|
},
|
|
getDataSource() {
|
|
return this.localDataSource;
|
|
},
|
|
// 根据行索引更新数据
|
|
updateDataSourceByRowIndex(rowIndex, data) {
|
|
this.localDataSource[rowIndex] = { ...this.localDataSource[rowIndex], ...data };
|
|
this.localDataSource = [...this.localDataSource];
|
|
},
|
|
// 判断表单项是否有错误
|
|
hasError(rowIndex, colIndex, field) {
|
|
return this.formErrors.some(error =>
|
|
error.rowIndex === rowIndex &&
|
|
error.colIndex === colIndex &&
|
|
error.field === field
|
|
);
|
|
},
|
|
// 处理错误状态更新
|
|
onErrorUpdate(rowIndex, colIndex, field, isError) {
|
|
if (!isError) {
|
|
this.formErrors = this.formErrors.filter(error =>
|
|
!(error.rowIndex === rowIndex &&
|
|
error.colIndex === colIndex &&
|
|
error.field === field)
|
|
);
|
|
}
|
|
},
|
|
onSubBlur(rowIndex, colKey, value) {
|
|
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) {
|
|
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] });
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
.custom-table-wrapper {
|
|
border: 1px solid #ebeef5;
|
|
border-radius: 4px;
|
|
overflow: hidden;
|
|
font-size: 14px;
|
|
color: #606266;
|
|
margin-top: 20px;
|
|
}
|
|
|
|
.inner-table-cell {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.m-l-5 {
|
|
margin-left: 5px;
|
|
}
|
|
|
|
.sub-input-number {
|
|
width: 145px;
|
|
|
|
.el-input-number--mini {
|
|
width: 145px;
|
|
}
|
|
}
|
|
|
|
/* 表头 */
|
|
.custom-table-header {
|
|
background-color: #f5f7fa;
|
|
border-bottom: 1px solid #ebeef5;
|
|
white-space: nowrap;
|
|
display: block;
|
|
}
|
|
|
|
.custom-table-body {
|
|
max-height: 300px;
|
|
/* 可根据需要调整或由父组件控制 */
|
|
}
|
|
|
|
.header-cell-content {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
/* 共同行样式 */
|
|
.custom-table-row {
|
|
display: table;
|
|
width: 100%;
|
|
table-layout: fixed;
|
|
}
|
|
|
|
.custometable-row {
|
|
display: table;
|
|
width: 100%;
|
|
table-layout: fixed;
|
|
|
|
&:not(:last-child) {
|
|
border-bottom: 1px solid #ebeef5;
|
|
}
|
|
}
|
|
|
|
/* 单元格 */
|
|
.custom-table-cell {
|
|
display: table-cell;
|
|
padding: 12px 10px;
|
|
text-align: left;
|
|
vertical-align: middle;
|
|
border-right: 1px solid #ebeef5;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.custom-table-cell:last-child {
|
|
border-right: none;
|
|
}
|
|
|
|
.header-cell {
|
|
font-weight: bold;
|
|
color: #909399;
|
|
background-color: #f5f7fa;
|
|
}
|
|
|
|
.body-cell {
|
|
color: #606266;
|
|
background-color: #fff;
|
|
}
|
|
|
|
/* select 样式（模仿 Element UI） */
|
|
.header-cell select {
|
|
width: 100%;
|
|
padding: 4px 8px;
|
|
border: 1px solid #dcdfe6;
|
|
border-radius: 4px;
|
|
outline: none;
|
|
background-color: #fff;
|
|
font-size: 13px;
|
|
color: #606266;
|
|
appearance: none;
|
|
/* 隐藏默认箭头（可选） */
|
|
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e");
|
|
background-repeat: no-repeat;
|
|
background-position: right 8px center;
|
|
background-size: 14px;
|
|
padding-right: 28px;
|
|
}
|
|
|
|
/* 滚动容器：如果整体宽度超限，显示横向滚动条 */
|
|
.custom-table-wrapper {
|
|
display: flex;
|
|
flex-direction: column;
|
|
max-width: 100%;
|
|
/* 父容器决定宽度 */
|
|
overflow-x: auto;
|
|
}
|
|
|
|
.custom-table-header,
|
|
.custom-table-body {
|
|
min-width: 100%;
|
|
}
|
|
|
|
.header-select {
|
|
width: 100px;
|
|
margin-left: 5px;
|
|
}
|
|
|
|
.no-data {
|
|
text-align: center;
|
|
padding: 20px 0;
|
|
color: rgb(144, 147, 153)
|
|
}
|
|
|
|
.add-row {
|
|
display: flex;
|
|
justify-content: center;
|
|
padding: 20px 0;
|
|
margin-top: 20px;
|
|
}
|
|
|
|
.flex1 {
|
|
flex: 1;
|
|
}
|
|
|
|
.flex {
|
|
display: flex;
|
|
}
|
|
|
|
.other-title {
|
|
text-align: right;
|
|
margin: 0 10px;
|
|
font-size: 14px;
|
|
font-weight: normal;
|
|
color: #606266;
|
|
}
|
|
</style>
|