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.
810 lines
27 KiB
810 lines
27 KiB
<template>
|
|
<div class="flex flex1">
|
|
<div class="flex1 flex">
|
|
<el-input v-if="type === 'input'" :maxlength="item.maxlength || 50" :disabled="getDisabled()"
|
|
:class="getFillTypeStyle() + (orangeBg ? ' orange-bg' : '')" @blur="onCommonHandleSaveRecord"
|
|
:placeholder="getPlaceholder()" v-model="inputValue"
|
|
@input="onInputChange" @change="onInputChange" />
|
|
<el-input v-else-if="type === 'textarea'" :maxlength="item.maxlength || 50" :disabled="getDisabled()"
|
|
:class="getFillTypeStyle() + (orangeBg ? ' orange-bg' : '')" type="textarea" show-word-limit resize="none" @blur="onCommonHandleSaveRecord"
|
|
:rows="item.rows || 3" :placeholder="getPlaceholder()"
|
|
v-model="inputValue" @input="onInputChange" @change="onInputChange" />
|
|
<DecimalInput v-else-if="type === 'inputNumber'" @blur="onCommonHandleSaveRecord" :maxlength="item.maxlength || 10"
|
|
class="flex1" :disabled="getDisabled()" :controls="item.controls || false" :min="item.min || 0"
|
|
:prepend = "item.prepend"
|
|
:decimalDigits="item.precision" :class="getFillTypeStyle() + (orangeBg ? ' orange-bg' : '')"
|
|
:placeholder="getPlaceholder()" v-model="inputValue"
|
|
@input="onInputChange" @change="onInputChange" />
|
|
<el-select v-else-if="type === 'select'" class="flex1" :multiple="item.multiple"
|
|
:class="getFillTypeStyle() + (orangeBg ? ' orange-bg' : '')" v-model="inputValue" :disabled="getDisabled()"
|
|
:placeholder="getPlaceholder()" @change="onInputChange">
|
|
<el-option v-for="op in item.options" :key="op.value" :label="op.label" :value="op.value">
|
|
</el-option>
|
|
</el-select>
|
|
<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"
|
|
value-format="yyyy/MM/DD HH:mm:ss"
|
|
:placeholder="getPlaceholder()" @change="onCommonHandleSaveRecord">
|
|
</el-date-picker>
|
|
<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-else class="default-placeholder-text">{{getPlaceholder()}}</span>
|
|
</div>
|
|
</div>
|
|
<!-- qc才能操作 -->
|
|
<div class="handle-row" v-if="isShowHandle()">
|
|
<el-checkbox class="ml-5"></el-checkbox>
|
|
<div @mouseenter="onMouseEnter" @mouseleave="onMouseLeave">
|
|
<Question class="handle-icon" :class="getQuestionColor()" />
|
|
</div>
|
|
<img v-if="getIsShowCopyIcon()" @click="onCopy" src="@/assets/images/copy-icon.svg" class="handle-icon"
|
|
alt="" />
|
|
<img src="@/assets/images/record-icon.svg" class="handle-icon" alt="" />
|
|
</div>
|
|
|
|
<!-- 修改记录模态框 -->
|
|
<div
|
|
v-if="showModal && modificationRecords.length > 0"
|
|
ref="modalRef"
|
|
:class="['modification-modal', {'show': showModal}]"
|
|
@mouseenter="onModalEnter"
|
|
@mouseleave="onModalLeave"
|
|
>
|
|
<div class="modal-content">
|
|
<h4>修改记录</h4>
|
|
<div class="records-list">
|
|
<div
|
|
v-for="(record, index) in modificationRecords"
|
|
:key="index"
|
|
class="record-item"
|
|
>
|
|
<p><strong>时间:</strong> {{ record.timestamp }}</p>
|
|
<p><strong>旧值:</strong> {{ record.oldValue }}</p>
|
|
<p><strong>新值:</strong> {{ record.newValue }}</p>
|
|
<hr v-if="index < modificationRecords.length - 1">
|
|
</div>
|
|
<div v-if="!modificationRecords || modificationRecords.length === 0" class="no-records">
|
|
暂无修改记录
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import Question from "./icons/Question.vue";
|
|
import DecimalInput from "./DecimalInput.vue";
|
|
export default {
|
|
components: {
|
|
Question,
|
|
DecimalInput
|
|
},
|
|
props: {
|
|
type: {//form类型 input/select等
|
|
type: String,
|
|
default: "input"
|
|
},
|
|
item: {
|
|
type: Object,
|
|
default: () => {
|
|
return {
|
|
placeholder: "",
|
|
maxlength: 30,
|
|
label: "",
|
|
disabled: false,
|
|
}
|
|
}
|
|
},
|
|
// v-model 值
|
|
value: {
|
|
type: [String, Number, Array],
|
|
default: ''
|
|
},
|
|
// 错误状态
|
|
error: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
// 橙色背景状态
|
|
orangeBg: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
},
|
|
data() {
|
|
return {
|
|
inputValue: this.value,
|
|
oldValue: this.value, // 记录上一次的值
|
|
showModal: false, // 控制模态框显示
|
|
modificationRecords: [], // 存储修改记录
|
|
modalTimer: null, // 用于延迟隐藏模态框
|
|
isHoveringModal: false, // 是否悬停在模态框上
|
|
isHoveringMain: false, // 是否悬停在主元素上（这个实际上不需要，因为我们有事件处理）
|
|
db: null, // IndexedDB 实例
|
|
}
|
|
},
|
|
watch: {
|
|
value(newVal) {
|
|
this.inputValue = newVal;
|
|
console.log(newVal,"newVal")
|
|
}
|
|
},
|
|
filters: {
|
|
|
|
|
|
},
|
|
methods: {
|
|
getFillTypeStyle(type) {
|
|
const {fillType} = this.item;
|
|
const typeObj = {
|
|
actFill: "orange-border",//实际填写的边框颜色
|
|
green: "green-border",
|
|
preFill: "blue-border",//预填写的边框颜色
|
|
}
|
|
// 如果有错误状态，返回红色边框样式，覆盖原有的边框颜色
|
|
if (this.error) {
|
|
return "error-border";
|
|
}
|
|
return typeObj[fillType] || ""
|
|
},
|
|
//获取question图标颜色
|
|
getQuestionColor() {
|
|
//gray 灰色 green 绿色 orange 橙色
|
|
return "green"
|
|
},
|
|
// 统一处理输入变化
|
|
onInputChange(val) {
|
|
const value = val !== undefined ? val : this.inputValue;
|
|
this.$emit('input', value);
|
|
this.$emit('change', value);
|
|
|
|
// 根据输入值判断是否显示错误状态
|
|
const isEmpty = this.isValueEmpty(value);
|
|
if (this.error && !isEmpty) {
|
|
this.$emit('update:error', false);
|
|
} else if (!this.error && isEmpty) {
|
|
this.$emit('update:error', true);
|
|
}
|
|
},
|
|
async onCommonHandleSaveRecord(val){
|
|
const isEmpty = this.isValueEmpty(this.inputValue);
|
|
if (this.error && !isEmpty) {
|
|
this.$emit('update:error', false);
|
|
} else if (!this.error && isEmpty) {
|
|
this.$emit('update:error', true);
|
|
}
|
|
const {templateStatus} = this.$store.state.template;
|
|
// 检查值是否发生变化
|
|
if (this.inputValue !== this.oldValue && templateStatus === "actFill") {
|
|
// 值发生了变化，需要弹出密码输入框
|
|
try {
|
|
// const passwordResult = await this.$prompt('请输入密码以确认修改', '密码验证', {
|
|
// confirmButtonText: '确定',
|
|
// cancelButtonText: '取消',
|
|
// inputType: 'password',
|
|
// inputPattern: /.+/,
|
|
// inputErrorMessage: '请输入密码',
|
|
// zIndex: 10000,
|
|
// });
|
|
// 用户输入密码并点击确定，保存修改
|
|
this.oldValue = this.inputValue; // 更新旧值
|
|
this.$emit("blur", val);
|
|
this.$emit('input', this.inputValue);
|
|
this.$emit("change", val);
|
|
// 调用后端接口记录修改记录
|
|
await this.saveModificationRecord();
|
|
} catch {
|
|
// 用户点击取消，还原数据
|
|
this.inputValue = this.oldValue;
|
|
this.$emit('input', this.inputValue); // 触发 v-model 更新
|
|
this.$emit("blur", this.oldValue);
|
|
this.$emit("change", this.oldValue);
|
|
}
|
|
} else {
|
|
// 值没有变化，正常触发 blur和change 事件
|
|
this.$emit("blur", val)
|
|
// this.$emit('input', val);
|
|
this.$emit("change", val)
|
|
}
|
|
},
|
|
// 通用的值变化处理方法
|
|
async handleValueChange(val, componentType = '') {
|
|
const oldValue = this.oldValue; // 保存旧值
|
|
this.$emit('input', val);
|
|
this.$emit('change', val);
|
|
|
|
// 根据输入值判断是否显示错误状态
|
|
const isEmpty = this.isValueEmpty(val);
|
|
if (this.error && !isEmpty) {
|
|
this.$emit('update:error', false);
|
|
} else if (!this.error && isEmpty) {
|
|
this.$emit('update:error', true);
|
|
}
|
|
|
|
// 值发生改变，记录修改
|
|
const { templateStatus } = this.$store.state.template;
|
|
if (val !== oldValue && templateStatus === "actFill") {
|
|
// 值发生了变化，记录修改
|
|
try {
|
|
this.oldValue = val; // 更新旧值
|
|
|
|
// 调用后端接口记录修改记录
|
|
await this.saveModificationRecord();
|
|
} catch (error) {
|
|
const componentName = componentType || '组件';
|
|
console.error(`记录${componentName}修改失败:`, error);
|
|
}
|
|
}
|
|
},
|
|
|
|
// 判断值是否为空
|
|
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;
|
|
},
|
|
handleClickable(item,event){
|
|
if(item.fillType !== 'actFill'){
|
|
return
|
|
}
|
|
this.$emit("clickable",item)
|
|
},
|
|
//判断是否显示复制按钮
|
|
getIsShowCopyIcon() {
|
|
const { copyFrom } = this.item;
|
|
const { templateStatus } = this.$store.state.template;
|
|
return copyFrom && templateStatus === "actFill";
|
|
},
|
|
//判断是否显示操作按钮
|
|
isShowHandle() {
|
|
const { fillType } = this.item;
|
|
const { templateStatus } = this.$store.state.template;
|
|
//只有当模板状态是qc和实际填报时，才显示操作按钮
|
|
return (templateStatus === "qc" || templateStatus === "actFill") && fillType === "actFill";
|
|
},
|
|
//判断是否禁用
|
|
getDisabled() {
|
|
const { item } = this;
|
|
const { fillType } = item;
|
|
if (item.hasOwnProperty("disabled")) {
|
|
return item.disabled
|
|
} else {
|
|
const { templateStatus } = this.$store.state.template;
|
|
if (fillType === "actFill") {//当模板状态是实际填写时，只有当fillType是actFill时才能填写
|
|
return templateStatus !== "actFill"
|
|
} else if (fillType === "preFill") {//当模板状态是预填写时，只有当fillType是preFill才能填写
|
|
return templateStatus !== "preFill"
|
|
} else {
|
|
return true
|
|
}
|
|
}
|
|
},
|
|
getPlaceholder() {
|
|
const { placeholder,label } = this.item;
|
|
const {type} = this;
|
|
if(this.getDisabled()){
|
|
return ""
|
|
}
|
|
if(type === "clickable"){
|
|
return "请选择"
|
|
}
|
|
let prex = "请输入";
|
|
if(type === "select" || type === "dateTime"){
|
|
prex = "请选择"
|
|
}
|
|
return placeholder ? placeholder : (prex + label)
|
|
|
|
},
|
|
onCopy() {
|
|
this.$emit("copy")
|
|
},
|
|
|
|
// 记录数据修改
|
|
|
|
|
|
// 鼠标进入主容器
|
|
|
|
|
|
// 初始化 IndexedDB
|
|
initDB() {
|
|
return new Promise((resolve, reject) => {
|
|
const request = indexedDB.open('ModificationRecordsDB', 1);
|
|
|
|
request.onerror = (event) => {
|
|
console.error('IndexedDB error:', event.target.error);
|
|
reject(event.target.error);
|
|
};
|
|
|
|
request.onsuccess = (event) => {
|
|
this.db = event.target.result;
|
|
resolve(this.db);
|
|
};
|
|
|
|
request.onupgradeneeded = (event) => {
|
|
const db = event.target.result;
|
|
if (!db.objectStoreNames.contains('modificationRecords')) {
|
|
const objectStore = db.createObjectStore('modificationRecords', { keyPath: 'id' });
|
|
objectStore.createIndex('fieldId', 'fieldId', { unique: false });
|
|
objectStore.createIndex('timestamp', 'timestamp', { unique: false });
|
|
}
|
|
};
|
|
});
|
|
},
|
|
|
|
// 生成唯一字段ID (id + key值)
|
|
getFieldId() {
|
|
const templateId = 'template_123'; // 这里是写死的id
|
|
const fieldKey = this.item.key || this.item.prop || this.item.label || 'default_key';
|
|
|
|
// 考虑到CustomTable组件可能有重复的key值，我们需要额外标识
|
|
// 如果在表格中，可能需要添加行索引等信息
|
|
const tableRowIndex = this.item.rowIndex !== undefined ? `_${this.item.rowIndex}` : '';
|
|
|
|
return `${templateId}_${fieldKey}${tableRowIndex}`;
|
|
},
|
|
|
|
// 获取 IndexedDB 对象存储实例
|
|
async getObjectStore(storeName = 'modificationRecords', mode = 'readonly') {
|
|
if (!this.db) {
|
|
await this.initDB();
|
|
}
|
|
const transaction = this.db.transaction([storeName], mode);
|
|
return transaction.objectStore(storeName);
|
|
},
|
|
|
|
// 保存单条修改记录到 IndexedDB
|
|
async saveRecordToDB(record) {
|
|
const objectStore = await this.getObjectStore('modificationRecords', 'readwrite');
|
|
|
|
const fieldId = this.getFieldId();
|
|
const newRecord = {
|
|
id: `${fieldId}_${Date.now()}`, // 使用时间戳确保唯一性
|
|
fieldId: fieldId,
|
|
oldValue: record.oldValue,
|
|
newValue: record.newValue,
|
|
timestamp: new Date().toLocaleString(),
|
|
};
|
|
|
|
return new Promise((resolve, reject) => {
|
|
const request = objectStore.add(newRecord);
|
|
|
|
request.onsuccess = () => {
|
|
resolve(request.result);
|
|
};
|
|
|
|
request.onerror = (event) => {
|
|
reject(event.target.error);
|
|
};
|
|
});
|
|
},
|
|
|
|
// 从 IndexedDB 获取修改记录
|
|
async getRecordsFromDB() {
|
|
if (!this.db) {
|
|
await this.initDB();
|
|
}
|
|
|
|
const transaction = this.db.transaction(['modificationRecords'], 'readonly');
|
|
const objectStore = transaction.objectStore('modificationRecords');
|
|
const fieldIdIndex = objectStore.index('fieldId');
|
|
|
|
const fieldId = this.getFieldId();
|
|
|
|
return new Promise((resolve, reject) => {
|
|
const request = fieldIdIndex.getAll(IDBKeyRange.only(fieldId));
|
|
|
|
request.onsuccess = (event) => {
|
|
// 按时间戳排序，最新的在前
|
|
const records = event.target.result.sort((a, b) => {
|
|
return new Date(b.timestamp) - new Date(a.timestamp);
|
|
});
|
|
resolve(records);
|
|
};
|
|
|
|
request.onerror = (event) => {
|
|
reject(event.target.error);
|
|
};
|
|
});
|
|
},
|
|
|
|
// 同步后端修改记录到 IndexedDB
|
|
async syncRecordsToDB(backendRecords) {
|
|
// 清空当前字段的记录
|
|
await this.clearFieldRecords();
|
|
|
|
// 批量添加后端记录到 IndexedDB
|
|
const objectStore = await this.getObjectStore('modificationRecords', 'readwrite');
|
|
|
|
const fieldId = this.getFieldId();
|
|
|
|
return new Promise((resolve, reject) => {
|
|
let completed = 0;
|
|
const total = backendRecords.length;
|
|
|
|
if (total === 0) {
|
|
resolve();
|
|
return;
|
|
}
|
|
|
|
backendRecords.forEach((record) => {
|
|
// 标准化记录格式以匹配 IndexedDB 存储格式
|
|
const newRecord = {
|
|
id: `${fieldId}_${Date.parse(record.timestamp) || Date.now()}`, // 使用时间戳或当前时间戳作为 ID
|
|
fieldId: fieldId,
|
|
oldValue: record.oldValue,
|
|
newValue: record.newValue,
|
|
timestamp: record.timestamp || new Date().toLocaleString(),
|
|
password: record.password ? '***' : '' // 不直接存储密码
|
|
};
|
|
|
|
const request = objectStore.add(newRecord);
|
|
|
|
request.onsuccess = () => {
|
|
completed++;
|
|
if (completed === total) {
|
|
resolve();
|
|
}
|
|
};
|
|
|
|
request.onerror = (event) => {
|
|
console.error('同步单条记录失败:', event.target.error);
|
|
completed++;
|
|
if (completed === total) {
|
|
resolve(); // 即使有错误也继续，避免单条记录失败影响整体同步
|
|
}
|
|
};
|
|
});
|
|
});
|
|
},
|
|
|
|
// 清空当前字段的记录
|
|
async clearFieldRecords() {
|
|
if (!this.db) {
|
|
await this.initDB();
|
|
}
|
|
|
|
const transaction = this.db.transaction(['modificationRecords'], 'readwrite');
|
|
const objectStore = transaction.objectStore('modificationRecords');
|
|
const fieldIdIndex = objectStore.index('fieldId');
|
|
|
|
const fieldId = this.getFieldId();
|
|
|
|
return new Promise((resolve, reject) => {
|
|
const request = fieldIdIndex.openCursor(IDBKeyRange.only(fieldId));
|
|
|
|
request.onsuccess = (event) => {
|
|
const cursor = event.target.result;
|
|
if (cursor) {
|
|
cursor.delete(); // 删除匹配的记录
|
|
cursor.continue();
|
|
} else {
|
|
// 所有匹配的记录已删除
|
|
resolve();
|
|
}
|
|
};
|
|
|
|
request.onerror = (event) => {
|
|
reject(event.target.error);
|
|
};
|
|
});
|
|
},
|
|
|
|
// 鼠标进入主容器
|
|
async onMouseEnter(event) {
|
|
clearTimeout(this.modalTimer);
|
|
|
|
// 从 IndexedDB 加载修改记录
|
|
try {
|
|
const records = await this.getRecordsFromDB();
|
|
this.modificationRecords = records;
|
|
} catch (error) {
|
|
console.error('获取修改记录失败:', error);
|
|
this.modificationRecords = [];
|
|
}
|
|
|
|
// 先计算模态框位置，避免闪烁
|
|
this.showModal = true;
|
|
this.$nextTick(() => {
|
|
if (this.$refs.modalRef) {
|
|
const elementRect = event.target.getBoundingClientRect();
|
|
const modalEl = this.$refs.modalRef;
|
|
|
|
// 设置模态框位置在元素右侧
|
|
modalEl.style.left = elementRect.right + 5 + 'px'; // 5px间距
|
|
modalEl.style.top = elementRect.top + 'px';
|
|
}
|
|
});
|
|
},
|
|
|
|
// 鼠标离开主容器
|
|
onMouseLeave() {
|
|
// 延迟隐藏模态框，让用户有机会移动到模态框上
|
|
this.modalTimer = setTimeout(() => {
|
|
if (!this.isHoveringModal) {
|
|
this.showModal = false;
|
|
}
|
|
}, 300);
|
|
},
|
|
|
|
// 鼠标进入模态框
|
|
onModalEnter() {
|
|
this.isHoveringModal = true;
|
|
clearTimeout(this.modalTimer);
|
|
},
|
|
|
|
// 鼠标离开模态框
|
|
onModalLeave() {
|
|
this.isHoveringModal = false;
|
|
this.modalTimer = setTimeout(() => {
|
|
this.showModal = false;
|
|
}, 300);
|
|
},
|
|
|
|
// 记录数据修改
|
|
async saveModificationRecord() {
|
|
// 添加修改记录到本地存储
|
|
const record = {
|
|
oldValue: this.oldValue,
|
|
newValue: this.inputValue,
|
|
timestamp: new Date().toLocaleString(), // 格式化时间
|
|
};
|
|
|
|
// 保存到 IndexedDB
|
|
try {
|
|
await this.saveRecordToDB(record);
|
|
// 保存成功后更新本地记录（可选，取决于是否需要立即显示）
|
|
// const records = await this.getRecordsFromDB();
|
|
// this.modificationRecords = records;
|
|
} catch (error) {
|
|
console.error('保存修改记录失败:', error);
|
|
}
|
|
|
|
// 发送事件告知父组件值已修改
|
|
this.$emit('modification-recorded', {
|
|
field: this.item.label || '',
|
|
oldValue: this.oldValue,
|
|
newValue: this.inputValue,
|
|
});
|
|
}
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.flex {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.flex1 {
|
|
flex: 1;
|
|
}
|
|
|
|
.handle-row {
|
|
margin-left: 10px;
|
|
display: flex;
|
|
align-items: center;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.w-100 {
|
|
width: 100%;
|
|
}
|
|
|
|
.handle-icon {
|
|
width: 18px;
|
|
height: 18px;
|
|
margin-left: 5px;
|
|
}
|
|
|
|
.ml-5 {
|
|
margin-left: 5px;
|
|
}
|
|
|
|
.orange {
|
|
color: #f9c588;
|
|
}
|
|
|
|
.green {
|
|
color: green;
|
|
}
|
|
|
|
.gray {
|
|
color: #b2b2b2;
|
|
}
|
|
|
|
.orange-border {
|
|
|
|
.el-input-group__prepend,input,
|
|
textarea {
|
|
border-color: #f9c588;
|
|
|
|
&:focus {
|
|
border-color: #f9c588;
|
|
}
|
|
|
|
&:hover {
|
|
border-color: #f9c588;
|
|
}
|
|
|
|
&:disabled {
|
|
border-color: #f9c588 !important;
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
.green-border {
|
|
|
|
.el-input-group__prepend,input,
|
|
textarea {
|
|
border-color: green;
|
|
|
|
&:focus {
|
|
border-color: green;
|
|
}
|
|
|
|
&:hover {
|
|
border-color: green;
|
|
}
|
|
|
|
&:disabled {
|
|
border-color: green !important;
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
.blue-border {
|
|
|
|
.el-input-group__prepend,input,
|
|
textarea {
|
|
border-color: #4ea2ff;
|
|
|
|
&:focus {
|
|
border-color: #4ea2ff;
|
|
}
|
|
|
|
&:hover {
|
|
border-color: #4ea2ff;
|
|
}
|
|
|
|
&:disabled {
|
|
border-color: #4ea2ff !important;
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
.error-border {
|
|
.el-input-group__prepend,input,
|
|
textarea,
|
|
.el-select,
|
|
.clickable,
|
|
.el-date-editor {
|
|
border-color: #f56c6c;
|
|
|
|
&:focus {
|
|
border-color: #f56c6c;
|
|
}
|
|
|
|
&:hover {
|
|
border-color: #f56c6c;
|
|
}
|
|
}
|
|
|
|
// 为 el-select 和 el-date-picker 添加错误边框样式
|
|
.el-select .el-input__inner,
|
|
.el-date-editor .el-input__inner {
|
|
border-color: #f56c6c;
|
|
}
|
|
|
|
// 处理 DecimalInput 组件的错误边框样式
|
|
:deep(.el-input-number) {
|
|
.el-input__inner {
|
|
border-color: #f56c6c;
|
|
}
|
|
}
|
|
|
|
// 为点击式表单项添加错误边框样式
|
|
.clickable {
|
|
border-color: #f56c6c;
|
|
}
|
|
}
|
|
|
|
.orange-bg {
|
|
background-color: #FFF1F1 !important; // 橙色背景，透明度适中
|
|
|
|
input, textarea, .el-input__inner, .el-textarea__inner {
|
|
background-color: #FFF1F1 !important;
|
|
}
|
|
}
|
|
|
|
.modification-modal {
|
|
position: fixed;
|
|
z-index: 9999;
|
|
background-color: rgba(0, 0, 0, 0.7);
|
|
border-radius: 4px;
|
|
padding: 10px;
|
|
color: white;
|
|
max-height: 300px;
|
|
min-width: 250px;
|
|
overflow: hidden;
|
|
pointer-events: auto;
|
|
opacity: 0;
|
|
transform: scale(0.9);
|
|
transition: opacity 0.2s ease, transform 0.2s ease;
|
|
}
|
|
|
|
.modification-modal.show {
|
|
opacity: 1;
|
|
transform: scale(1);
|
|
}
|
|
|
|
.modification-modal .modal-content {
|
|
max-height: 280px;
|
|
overflow-y: auto;
|
|
padding-right: 5px;
|
|
}
|
|
|
|
.modification-modal .modal-content h4 {
|
|
margin: 0 0 10px 0;
|
|
font-size: 14px;
|
|
border-bottom: 1px solid #ccc;
|
|
padding-bottom: 5px;
|
|
}
|
|
|
|
.modification-modal .records-list {
|
|
font-size: 12px;
|
|
}
|
|
|
|
.modification-modal .record-item p {
|
|
margin: 5px 0;
|
|
word-break: break-all;
|
|
}
|
|
|
|
.modification-modal .record-item hr {
|
|
border: 0;
|
|
border-top: 1px solid #555;
|
|
margin: 8px 0;
|
|
}
|
|
|
|
.modification-modal .no-records {
|
|
text-align: center;
|
|
color: #aaa;
|
|
font-style: italic;
|
|
}
|
|
|
|
.clickable{
|
|
cursor: pointer;
|
|
width: auto;
|
|
// margin-left: 10px;
|
|
min-width: 100px;
|
|
height: 28px;
|
|
border-radius: 4px;
|
|
border:1px solid #4ea2ff;
|
|
display: flex;
|
|
align-items: center;
|
|
padding:0 15px;
|
|
font-size: 14px;
|
|
font-weight: normal;
|
|
color: #606266;
|
|
flex:1;
|
|
&.disabled{
|
|
cursor: not-allowed;
|
|
color: #c0c4cc;
|
|
background-color: #f5f7fa;
|
|
}
|
|
&.error-border{
|
|
border-color: #f56c6c !important;
|
|
}
|
|
}
|
|
</style>
|