feat(crm): 新增JSON表格输入组件并优化客户管理页面
refactor(OrderDetail): 允许orderId为undefined并添加空值检查 feat(JSONTableInput): 新增支持JSON与表格双向绑定的通用组件 refactor(customer): 重构客户详情页面，优化表单交互和字段映射 style(KLPList): 简化列表组件样式并修复字段显示逻辑
This commit is contained in:
砂糖
@@ -1,98 +1,64 @@
|
||||
<template>
|
||||
<div class="klp-list-container">
|
||||
<!-- 列表加载状态（Element UI Vue2 支持 v-loading 指令） -->
|
||||
<div v-loading="loading" class="list-loading-wrapper">
|
||||
<!-- 列表项渲染（分两行布局） -->
|
||||
<div
|
||||
v-for="(item, index) in listData"
|
||||
:key="item[listKey] || index"
|
||||
class="klp-list-item"
|
||||
:class="{ 'active': isSelected(item) }"
|
||||
@click.stop="handleItemClick(item)"
|
||||
<div class="simple-list-container">
|
||||
<!-- 加载状态容器 -->
|
||||
<div v-loading="loading" class="list-wrapper">
|
||||
<!-- 列表项循环 -->
|
||||
<div
|
||||
v-for="(item, index) in listData"
|
||||
:key="item[listKey] || index"
|
||||
class="list-item"
|
||||
:class="{ active: isSelected(item) }"
|
||||
@click="handleItemClick(item)"
|
||||
>
|
||||
<!-- 核心内容区：分两行展示6个信息位 -->
|
||||
<div class="klp-list-content">
|
||||
<!-- 第一行：主标题 + 副标题 + 状态（info1~info3） -->
|
||||
<div class="klp-list-row klp-list-row1" :style="{ gap: `${rowGap}px` }">
|
||||
<!-- 信息位1：主标题（保留原Tooltip溢出检测） -->
|
||||
<div class="klp-list-info-item" v-if="showInfoItem('info1', item)">
|
||||
<slot name="info1" :item="item" :isSelected="isSelected(item)">
|
||||
<!-- Vue2 作用域插槽后备内容需用 template + slot-scope 包裹 -->
|
||||
<template slot-scope="{ item, isSelected }">
|
||||
<el-tooltip
|
||||
:content="item[info1Field]"
|
||||
placement="top"
|
||||
:disabled="!isContentOverflow(item, 'info1')"
|
||||
effect="light"
|
||||
>
|
||||
<span class="info-value info-value--primary">{{ item[info1Field] }}</span>
|
||||
</el-tooltip>
|
||||
</template>
|
||||
<!-- 左侧内容区：两行布局 -->
|
||||
<div class="list-content">
|
||||
<!-- 第一行：field1-field3 -->
|
||||
<div class="content-row row1">
|
||||
<div class="field-item" v-if="showField('field1', item)">
|
||||
<slot name="field1" :item="item" :selected="isSelected(item)">
|
||||
<span class="field-text field1-text">{{ item[field1] }}</span>
|
||||
</slot>
|
||||
</div>
|
||||
|
||||
<!-- 信息位2：副标题 -->
|
||||
<div class="klp-list-info-item" v-if="showInfoItem('info2', item)">
|
||||
<slot name="info2" :item="item" :isSelected="isSelected(item)">
|
||||
<template slot-scope="{ item, isSelected }">
|
||||
<span class="info-value">{{ item[info2Field] }}</span>
|
||||
</template>
|
||||
<div class="field-item" v-if="showField('field2', item)">
|
||||
<slot name="field2" :item="item" :selected="isSelected(item)">
|
||||
<span class="field-text">{{ item[field2] }}</span>
|
||||
</slot>
|
||||
</div>
|
||||
|
||||
<!-- 信息位3：状态（常用插槽自定义，如标签） -->
|
||||
<div class="klp-list-info-item" v-if="showInfoItem('info3', item)">
|
||||
<slot name="info3" :item="item" :isSelected="isSelected(item)">
|
||||
<template slot-scope="{ item, isSelected }">
|
||||
<span class="info-value">{{ item[info3Field] }}</span>
|
||||
</template>
|
||||
<div class="field-item" v-if="showField('field3', item)">
|
||||
<slot name="field3" :item="item" :selected="isSelected(item)">
|
||||
<span class="field-text">{{ item[field3] }}</span>
|
||||
</slot>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 第二行：时间 + 数量 + 备注（info4~info6） -->
|
||||
<div class="klp-list-row klp-list-row2" :style="{ gap: `${rowGap}px`, marginBottom: `${rowMarginBottom}px` }">
|
||||
<!-- 信息位4：时间 -->
|
||||
<div class="klp-list-info-item" v-if="showInfoItem('info4', item)">
|
||||
<slot name="info4" :item="item" :isSelected="isSelected(item)">
|
||||
<template slot-scope="{ item, isSelected }">
|
||||
<span class="info-value">{{ item[info4Field] }}</span>
|
||||
</template>
|
||||
<!-- 第二行：field4-field6 -->
|
||||
<div class="content-row row2">
|
||||
<div class="field-item" v-if="showField('field4', item)">
|
||||
<slot name="field4" :item="item" :selected="isSelected(item)">
|
||||
<span class="field-text">{{ item[field4] }}</span>
|
||||
</slot>
|
||||
</div>
|
||||
|
||||
<!-- 信息位5：数量/金额 -->
|
||||
<div class="klp-list-info-item" v-if="showInfoItem('info5', item)">
|
||||
<slot name="info5" :item="item" :isSelected="isSelected(item)">
|
||||
<template slot-scope="{ item, isSelected }">
|
||||
<span class="info-value">{{ item[info5Field] }}</span>
|
||||
</template>
|
||||
<div class="field-item" v-if="showField('field5', item)">
|
||||
<slot name="field5" :item="item" :selected="isSelected(item)">
|
||||
<span class="field-text">{{ item[field5] }}</span>
|
||||
</slot>
|
||||
</div>
|
||||
|
||||
<!-- 信息位6：备注 -->
|
||||
<div class="klp-list-info-item" v-if="showInfoItem('info6', item)">
|
||||
<slot name="info6" :item="item" :isSelected="isSelected(item)">
|
||||
<template slot-scope="{ item, isSelected }">
|
||||
<span class="info-value">{{ item[info6Field] }}</span>
|
||||
</template>
|
||||
<div class="field-item" v-if="showField('field6', item)">
|
||||
<slot name="field6" :item="item" :selected="isSelected(item)">
|
||||
<span class="field-text">{{ item[field6] }}</span>
|
||||
</slot>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 右侧操作按钮组（位置不变） -->
|
||||
<div class="klp-list-actions">
|
||||
<slot name="actions" :item="item" :isSelected="isSelected(item)">
|
||||
<template slot-scope="{ item, isSelected }">
|
||||
<!-- 操作栏后备内容（若父组件未提供则显示空） -->
|
||||
</template>
|
||||
</slot>
|
||||
<!-- 右侧操作区 -->
|
||||
<div class="list-actions">
|
||||
<slot name="actions" :item="item" :selected="isSelected(item)"></slot>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 空状态提示（Vue2 需显式注册 ElEmpty 组件） -->
|
||||
<div v-if="listData.length === 0 && !loading" class="klp-list-empty">
|
||||
<!-- 空状态 -->
|
||||
<div v-if="listData.length === 0 && !loading" class="empty-wrap">
|
||||
<el-empty description="暂无数据" />
|
||||
</div>
|
||||
</div>
|
||||
@@ -101,347 +67,201 @@
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "KLPList",
|
||||
name: "SimpleList",
|
||||
// 注册Element UI组件（确保全局未注册时可用）
|
||||
components: {
|
||||
ElEmpty: () => import("element-ui/lib/empty"),
|
||||
ElTooltip: () => import("element-ui/lib/tooltip")
|
||||
},
|
||||
props: {
|
||||
// ---------------------- 原有核心Props（保留） ----------------------
|
||||
/** 列表数据源（必传） */
|
||||
// 核心必传
|
||||
listData: {
|
||||
type: Array,
|
||||
required: true,
|
||||
default: () => []
|
||||
},
|
||||
/** 列表项唯一标识字段（必传） */
|
||||
listKey: {
|
||||
type: String,
|
||||
required: true
|
||||
required: true, // 列表项唯一标识字段（如id）
|
||||
default: "id"
|
||||
},
|
||||
/** 列表加载状态 */
|
||||
loading: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: false
|
||||
},
|
||||
|
||||
// ---------------------- 新增：6个信息位配置 ----------------------
|
||||
// 信息位1（主标题，兼容原titleField）
|
||||
info1Field: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: "title" // 默认对应原titleField
|
||||
},
|
||||
// 信息位2（副标题）
|
||||
info2Field: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: ""
|
||||
},
|
||||
// 信息位3（状态）
|
||||
info3Field: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: ""
|
||||
},
|
||||
// 信息位4（时间）
|
||||
info4Field: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: ""
|
||||
},
|
||||
// 信息位5（数量/金额）
|
||||
info5Field: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: ""
|
||||
},
|
||||
// 信息位6（备注）
|
||||
info6Field: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: ""
|
||||
},
|
||||
// 6个字段配置（非必传，传了就显示，支持插槽覆盖）
|
||||
field1: { type: String, default: "" }, // 第一行第一个（主标题）
|
||||
field2: { type: String, default: "" }, // 第一行第二个
|
||||
field3: { type: String, default: "" }, // 第一行第三个
|
||||
field4: { type: String, default: "" }, // 第二行第一个
|
||||
field5: { type: String, default: "" }, // 第二行第二个
|
||||
field6: { type: String, default: "" }, // 第二行第三个
|
||||
|
||||
// ---------------------- 新增：样式控制Props ----------------------
|
||||
/** 每行内部信息位的间距（px） */
|
||||
rowGap: {
|
||||
type: Number,
|
||||
required: false,
|
||||
default: 16 // 默认间距16px
|
||||
},
|
||||
/** 两行之间的垂直间距（px） */
|
||||
rowMarginBottom: {
|
||||
type: Number,
|
||||
required: false,
|
||||
default: 4 // 默认4px
|
||||
},
|
||||
/** 主标题最大宽度占内容区的百分比（控制溢出） */
|
||||
info1MaxPercent: {
|
||||
type: Number,
|
||||
required: false,
|
||||
default: 60 // 主标题占比下调，给其他信息位留空间
|
||||
}
|
||||
// 样式配置（可选）
|
||||
rowGap: { type: Number, default: 12 }, // 每行内字段间距（px）
|
||||
rowMargin: { type: Number, default: 6 }, // 两行之间的间距（px）
|
||||
itemPadding: { type: Number, default: 10 } // 列表项内边距（px）
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
selectedKey: null, // 选中状态（不变）
|
||||
overflowCheckElements: {}, // 溢出检测临时元素（不变）
|
||||
containerWidth: 0 // 容器宽度缓存（不变）
|
||||
selectedItemKey: null // 选中项的唯一标识
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
// ---------------------- 原有核心方法（保留+微调） ----------------------
|
||||
/** 判断列表项是否选中（不变） */
|
||||
// 判断项是否选中
|
||||
isSelected(item) {
|
||||
const itemKey = item[this.listKey];
|
||||
return this.selectedKey === itemKey;
|
||||
return this.selectedItemKey === item[this.listKey];
|
||||
},
|
||||
|
||||
/** 列表项点击事件（不变） */
|
||||
// 列表项点击事件
|
||||
handleItemClick(item) {
|
||||
const itemKey = item[this.listKey];
|
||||
this.selectedKey = itemKey;
|
||||
const selectedItem = this.selectedKey ? item : null;
|
||||
this.$emit("item-click", selectedItem, item);
|
||||
this.selectedItemKey = item[this.listKey];
|
||||
this.$emit("item-click", item); // 向外抛出选中项
|
||||
},
|
||||
|
||||
/** 清空选中状态（不变） */
|
||||
clearSelection() {
|
||||
this.selectedKey = null;
|
||||
this.$emit("selection-cleared");
|
||||
// 简化版：判断字段是否显示（有插槽 或 配置了字段且值有效）
|
||||
showField(fieldKey, item) {
|
||||
// 1. 有插槽则强制显示（不管字段有没有值）
|
||||
if (this.$scopedSlots[fieldKey]) return true;
|
||||
|
||||
// 2. 无插槽时：配置了字段名 + 字段值非空（兼容0/false等有效数据）
|
||||
const fieldName = this[fieldKey];
|
||||
if (!fieldName) return false; // 没配置字段名 → 不显示
|
||||
const fieldValue = item[fieldName];
|
||||
// 仅过滤：null/undefined/空字符串（保留0、false、0.0等）
|
||||
return !(fieldValue === null || fieldValue === undefined || fieldValue === "");
|
||||
},
|
||||
|
||||
/** 主动设置选中项（不变） */
|
||||
setSelection(targetKey) {
|
||||
const isExist = this.listData.some(item => item[this.listKey] === targetKey);
|
||||
if (isExist) {
|
||||
this.selectedKey = targetKey;
|
||||
const selectedItem = this.listData.find(item => item[this.listKey] === targetKey);
|
||||
this.$emit("item-click", selectedItem);
|
||||
// 手动清空选中状态（外部调用）
|
||||
clearSelected() {
|
||||
this.selectedItemKey = null;
|
||||
this.$emit("clear-selected");
|
||||
},
|
||||
|
||||
// 手动设置选中项（外部调用）
|
||||
setSelected(key) {
|
||||
const target = this.listData.find(item => item[this.listKey] === key);
|
||||
if (target) {
|
||||
this.selectedItemKey = key;
|
||||
this.$emit("item-click", target);
|
||||
} else {
|
||||
this.selectedKey = null;
|
||||
console.warn(`列表中不存在key为${targetKey}的项`);
|
||||
console.warn(`未找到key为${key}的列表项`);
|
||||
}
|
||||
},
|
||||
|
||||
// ---------------------- 新增：信息位控制方法（适配Vue2插槽） ----------------------
|
||||
/**
|
||||
* 判断信息位是否需要显示（插槽存在 或 字段有值）
|
||||
* @param {String} infoKey - 信息位标识（info1~info6）
|
||||
* @param {Object} item - 列表项数据
|
||||
* @returns {Boolean} 是否显示
|
||||
*/
|
||||
showInfoItem(infoKey, item) {
|
||||
// 前置容错：避免item为undefined导致报错
|
||||
if (!item) return false;
|
||||
|
||||
// Vue2 作用域插槽判断：$scopedSlots 中插槽以函数形式存在
|
||||
const hasSlot = typeof this.$scopedSlots[infoKey] === 'function';
|
||||
if (hasSlot) return true;
|
||||
|
||||
// 2. 无插槽时，判断字段配置是否存在 + 字段值是否有效
|
||||
const field = this[`${infoKey}Field`];
|
||||
// 容错：字段未配置（如没传info1Field）则不显示
|
||||
if (!field) return false;
|
||||
// 字段值有效判断（排除 undefined/null/空字符串）
|
||||
return item[field] !== undefined && item[field] !== null && item[field] !== "";
|
||||
},
|
||||
|
||||
/**
|
||||
* 信息位1（主标题）溢出检测（适配新字段）
|
||||
* @param {Object} item - 列表项数据
|
||||
* @param {String} infoKey - 信息位标识（仅info1需要）
|
||||
* @returns {Boolean} 是否溢出
|
||||
*/
|
||||
isContentOverflow(item, infoKey) {
|
||||
const itemKey = item[this.listKey];
|
||||
const field = this[`${infoKey}Field`];
|
||||
const content = item[field] || "";
|
||||
|
||||
// 内容为空或无字段时不显示Tooltip
|
||||
if (!content || !field) return false;
|
||||
|
||||
// 获取内容区宽度（原容器宽度改为内容区宽度）
|
||||
// 注意：listData.indexOf(item) 可能因重复项导致索引错误，建议确保listData唯一
|
||||
const itemIndex = this.listData.indexOf(item);
|
||||
const contentEl = this.$el.querySelector(`.klp-list-item:nth-child(${itemIndex + 1}) .klp-list-content`);
|
||||
if (!contentEl) return false;
|
||||
const contentWidth = contentEl.clientWidth;
|
||||
|
||||
// 计算信息位1的最大可用宽度（减去标签宽度）
|
||||
const labelEl = this.$el.querySelector(`.klp-list-item:nth-child(${itemIndex + 1}) .info-label`);
|
||||
const labelWidth = labelEl ? labelEl.offsetWidth : 40;
|
||||
const maxWidth = (contentWidth * this.info1MaxPercent) / 100 - labelWidth - 12;
|
||||
|
||||
// 复用临时元素检测宽度（不变）
|
||||
if (!this.overflowCheckElements[itemKey]) {
|
||||
const tempEl = document.createElement("span");
|
||||
tempEl.style.cssText = `
|
||||
visibility: hidden;
|
||||
position: absolute;
|
||||
white-space: nowrap;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: #303133;
|
||||
`;
|
||||
tempEl.textContent = content;
|
||||
document.body.appendChild(tempEl);
|
||||
this.overflowCheckElements[itemKey] = tempEl;
|
||||
}
|
||||
|
||||
const tempEl = this.overflowCheckElements[itemKey];
|
||||
return tempEl.offsetWidth > maxWidth;
|
||||
},
|
||||
|
||||
/** 窗口 resize 重新计算（不变） */
|
||||
handleResize() {
|
||||
this.$forceUpdate();
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
/** 列表数据变化时清理临时元素（不变） */
|
||||
listData: {
|
||||
deep: true,
|
||||
handler() {
|
||||
this.clearSelection();
|
||||
Object.values(this.overflowCheckElements).forEach(el => {
|
||||
document.body.removeChild(el);
|
||||
});
|
||||
this.overflowCheckElements = {};
|
||||
}
|
||||
},
|
||||
|
||||
/** 主标题占比变化时重新计算溢出（适配新prop） */
|
||||
info1MaxPercent() {
|
||||
this.$forceUpdate();
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
// 初始化内容区宽度（适配新结构）
|
||||
this.$nextTick(() => {
|
||||
const contentEl = this.$el.querySelector('.klp-list-content');
|
||||
this.containerWidth = contentEl ? contentEl.clientWidth : 0;
|
||||
});
|
||||
window.addEventListener('resize', this.handleResize);
|
||||
},
|
||||
// Vue2 销毁钩子：beforeDestroy（Vue3为onBeforeUnmount）
|
||||
beforeDestroy() {
|
||||
// 清理临时元素和事件监听（不变）
|
||||
Object.values(this.overflowCheckElements).forEach(el => {
|
||||
document.body.removeChild(el);
|
||||
});
|
||||
window.removeEventListener('resize', this.handleResize);
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* 列表容器（不变） */
|
||||
.klp-list-container {
|
||||
max-height: calc(100vh - 220px);
|
||||
/* 容器样式 - 哑光金属底色 */
|
||||
.simple-list-container {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
padding-right: 8px;
|
||||
margin-top: 10px;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* 加载容器（不变） */
|
||||
.list-loading-wrapper {
|
||||
/* 列表包裹层 */
|
||||
.list-wrapper {
|
||||
width: 100%;
|
||||
min-height: 100px;
|
||||
padding: 8px 0;
|
||||
}
|
||||
|
||||
/* 列表项：改为上下两行+右侧操作的布局 */
|
||||
.klp-list-item {
|
||||
padding: 10px 12px;
|
||||
/* 增加内边距，适配两行 */
|
||||
margin-bottom: 8px;
|
||||
border-bottom: 1px solid #f5f7fa;
|
||||
/* 弱化底边框，突出选中态 */
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
/* 列表项 - 磨砂金属质感 */
|
||||
.list-item {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
/* 顶部对齐，避免操作区下移 */
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: v-bind(itemPadding + 'px') 12px;
|
||||
margin-bottom: 8px;
|
||||
/* 细腻金属边框 */
|
||||
border: 1px solid #d1d5db;
|
||||
background-color: white;
|
||||
cursor: pointer;
|
||||
transition: all 0.25s ease;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
background-color: #fafafa;
|
||||
/* 未选中时浅背景，区分选中态 */
|
||||
}
|
||||
|
||||
/* 列表项选中状态（不变） */
|
||||
.klp-list-item.active {
|
||||
border-left: 3px solid #2bf;
|
||||
background-color: #fff;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
|
||||
/* 增加轻微阴影，突出选中项 */
|
||||
/* 选中态 - 金属高亮（无阴影，靠边框+渐变体现） */
|
||||
.list-item.active {
|
||||
/* 金属蓝边框（简约不夸张） */
|
||||
border-left: 3px solid #475569;
|
||||
/* 极细微内高光，模拟金属反光 */
|
||||
box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.9) inset,
|
||||
0 0 2px rgba(96, 165, 250, 0.2);
|
||||
}
|
||||
|
||||
/* 内容区：包裹两行信息位，占满剩余空间 */
|
||||
.klp-list-content {
|
||||
/* 列表项hover - 金属微亮 */
|
||||
.list-item:hover:not(.active) {
|
||||
border-color: #94a3b8;
|
||||
}
|
||||
|
||||
/* 内容区（占满左侧） */
|
||||
.list-content {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
/* 关键：允许内容区缩小，避免溢出 */
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-width: 0; /* 关键：避免内容溢出 */
|
||||
}
|
||||
|
||||
/* 行容器：控制单行信息位布局 */
|
||||
.klp-list-row {
|
||||
/* 行容器 */
|
||||
.content-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: nowrap;
|
||||
/* 禁止换行，溢出省略 */
|
||||
gap: v-bind(rowGap + 'px'); /* 字段间距 */
|
||||
flex-wrap: wrap; /* 防止字段过多溢出 */
|
||||
}
|
||||
|
||||
/* 第一行间距 */
|
||||
.row1 {
|
||||
margin-bottom: v-bind(rowMargin + 'px');
|
||||
}
|
||||
|
||||
/* 字段项 - 金属质感文本容器 */
|
||||
.field-item {
|
||||
white-space: nowrap; /* 不换行 */
|
||||
overflow: hidden;
|
||||
/* 隐藏超出行的内容 */
|
||||
text-overflow: ellipsis; /* 溢出省略 */
|
||||
padding: 2px 4px;
|
||||
border-radius: 2px;
|
||||
background: rgba(255, 255, 255, 0.4);
|
||||
}
|
||||
|
||||
/* 信息位容器：单个信息的最小单元 */
|
||||
.klp-list-info-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
white-space: nowrap;
|
||||
/* 禁止信息位内部换行 */
|
||||
}
|
||||
|
||||
/* 信息位标签：次要文字，颜色偏浅 */
|
||||
.info-label {
|
||||
color: #606266;
|
||||
/* 字段文本样式 - 金属灰调 */
|
||||
.field-text {
|
||||
font-size: 12px;
|
||||
margin-right: 4px;
|
||||
white-space: nowrap;
|
||||
color: #475569;
|
||||
/* 文本抗锯齿，贴合金属风格 */
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
/* 信息位值：默认样式 */
|
||||
.info-value {
|
||||
color: #303133;
|
||||
font-size: 12px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
/* 溢出显示省略号 */
|
||||
}
|
||||
|
||||
/* 主标题（info1）值：加粗突出 */
|
||||
.info-value--primary {
|
||||
/* 主标题（field1）强调 - 深金属灰 */
|
||||
.field1-text {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: #1e293b;
|
||||
}
|
||||
|
||||
/* 右侧操作区（不变，增加顶部对齐） */
|
||||
.klp-list-actions {
|
||||
/* 操作区 - 金属质感按钮容器 */
|
||||
.list-actions {
|
||||
flex-shrink: 0; /* 不被挤压 */
|
||||
margin-left: 16px;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
/* 与内容区顶部对齐 */
|
||||
gap: 6px;
|
||||
flex-shrink: 0;
|
||||
margin-left: 12px;
|
||||
padding-top: 2px;
|
||||
/* 微调垂直位置 */
|
||||
gap: 8px;
|
||||
/* 哑光背景，贴合整体风格 */
|
||||
padding: 2px 4px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
/* 空状态（不变） */
|
||||
.klp-list-empty {
|
||||
/* 空状态 - 金属风格适配 */
|
||||
.empty-wrap {
|
||||
padding: 40px 0;
|
||||
text-align: center;
|
||||
color: #64748b;
|
||||
/* 空状态背景与金属容器融合 */
|
||||
background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
|
||||
border-radius: 6px;
|
||||
margin: 8px 0;
|
||||
border: 1px solid #e2e8f0;
|
||||
}
|
||||
</style>
|
||||
319
klp-ui/src/views/crm/components/JSONTableInput.vue
Normal file
319
klp-ui/src/views/crm/components/JSONTableInput.vue
Normal file
@@ -0,0 +1,319 @@
|
||||
<template>
|
||||
<div class="json-table-input" ref="tableContainer">
|
||||
<!-- JSON 解析错误提示 -->
|
||||
<div v-if="error" class="error-tip">
|
||||
<i class="el-icon-warning"></i> {{ error }}
|
||||
</div>
|
||||
|
||||
<!-- 表格编辑区域 -->
|
||||
<el-table :data="tableData" border size="mini" :show-header="columns.length > 0" class="table-container">
|
||||
<!-- 动态渲染列 -->
|
||||
<el-table-column v-for="col in columns" :key="col.prop" :label="col.label" :width="col.width">
|
||||
<template slot-scope="scope">
|
||||
<!-- 新增聚焦/失焦事件，全局记录聚焦状态 -->
|
||||
<el-input v-model="scope.row[col.prop]" size="mini" @input="handleCellChange" @focus="handleInputFocus"
|
||||
@blur="handleInputBlur" placeholder="请输入" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<!-- 操作列：删除行（空行不可删） -->
|
||||
<el-table-column label="操作" width="90">
|
||||
<template slot-scope="scope">
|
||||
<el-button size="mini" type="text" icon="el-icon-delete" @click="handleDeleteRow(scope.$index)"
|
||||
:disabled="isLastEmptyRow(scope.$index)">
|
||||
删除
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<!-- 原始 JSON 预览（可选，方便调试） -->
|
||||
<div class="json-preview" v-if="showPreview">
|
||||
<div class="preview-label">JSON 预览（自动格式化）：</div>
|
||||
<pre>{{ formattedJson }}</pre>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'JSONTableInput',
|
||||
props: {
|
||||
// 双向绑定的值（JSON 数组字符串 / JSON 数组对象）
|
||||
value: {
|
||||
type: [String, Array],
|
||||
default: '[]'
|
||||
},
|
||||
// 表格列配置：[{ prop: 'name', label: '姓名', width: 150 }, ...]
|
||||
columns: {
|
||||
type: Array,
|
||||
required: true,
|
||||
default: () => []
|
||||
},
|
||||
// 是否显示 JSON 预览（默认关闭）
|
||||
showPreview: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 防抖延迟（ms）：所有输入停止 + 无输入框聚焦 后触发更新
|
||||
debounceDelay: {
|
||||
type: Number,
|
||||
default: 500 // 默认500ms防抖
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
tableData: [], // 表格内部数据
|
||||
error: '', // JSON 解析错误提示
|
||||
debounceTimer: null, // 组件级防抖定时器（所有input共用）
|
||||
hasFocus: false // 全局标记：是否有任意input处于聚焦状态
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
// 格式化后的 JSON 字符串（输出给 v-model）
|
||||
formattedJson() {
|
||||
try {
|
||||
// 过滤空行（所有字段为空的行）
|
||||
const validData = this.tableData.filter(row => this.isRowValid(row))
|
||||
// 格式化 JSON（缩进2个空格，保证可读性）
|
||||
return JSON.stringify(validData, null, 2)
|
||||
} catch (e) {
|
||||
this.error = 'JSON 格式化失败：' + e.message
|
||||
return '[]'
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
// 监听外部传入的 value 变化，解析为表格数据
|
||||
value: {
|
||||
immediate: true,
|
||||
handler(val) {
|
||||
this.parseValueToTableData(val)
|
||||
}
|
||||
},
|
||||
// 监听聚焦状态变化：当失去所有焦点时，触发防抖检查
|
||||
hasFocus(newVal) {
|
||||
if (!newVal) {
|
||||
this.triggerDebounceChange()
|
||||
}
|
||||
}
|
||||
},
|
||||
beforeDestroy() {
|
||||
// 销毁时清除防抖定时器，防止内存泄漏
|
||||
if (this.debounceTimer) clearTimeout(this.debounceTimer)
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* 解析外部传入的 value 为表格数据
|
||||
* @param {String|Array} val - 外部绑定的 value
|
||||
*/
|
||||
parseValueToTableData(val) {
|
||||
try {
|
||||
this.error = ''
|
||||
let data = []
|
||||
// 1. 如果是字符串，解析为 JSON 数组
|
||||
if (typeof val === 'string') {
|
||||
data = val.trim() ? JSON.parse(val) : []
|
||||
}
|
||||
// 2. 如果是数组，直接使用
|
||||
else if (Array.isArray(val)) {
|
||||
data = [...val]
|
||||
}
|
||||
// 校验是否为数组
|
||||
if (!Array.isArray(data)) {
|
||||
throw new Error('数据必须是 JSON 数组')
|
||||
}
|
||||
// 3. 赋值并确保空行
|
||||
this.tableData = data
|
||||
this.ensureEmptyRow()
|
||||
} catch (e) {
|
||||
this.error = 'JSON 解析失败：' + e.message
|
||||
this.tableData = []
|
||||
this.ensureEmptyRow()
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 确保表格最后一行是空行
|
||||
*/
|
||||
ensureEmptyRow() {
|
||||
if (this.tableData.length === 0) {
|
||||
// 无数据时添加空行
|
||||
this.tableData.push(this.createEmptyRow())
|
||||
} else {
|
||||
const lastRow = this.tableData[this.tableData.length - 1]
|
||||
// 最后一行非空时，添加空行
|
||||
if (this.isRowValid(lastRow)) {
|
||||
this.tableData.push(this.createEmptyRow())
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 创建空行（字段与列配置一致）
|
||||
*/
|
||||
createEmptyRow() {
|
||||
const emptyRow = {}
|
||||
this.columns.forEach(col => {
|
||||
emptyRow[col.prop] = ''
|
||||
})
|
||||
return emptyRow
|
||||
},
|
||||
|
||||
/**
|
||||
* 判断行是否有效（非空行）
|
||||
* @param {Object} row - 表格行数据
|
||||
*/
|
||||
isRowValid(row) {
|
||||
return this.columns.some(col => {
|
||||
const val = row[col.prop]
|
||||
return val !== '' && val !== null && val !== undefined
|
||||
})
|
||||
},
|
||||
|
||||
/**
|
||||
* 判断是否是最后一行空行（用于禁用删除按钮）
|
||||
* @param {Number} index - 行索引
|
||||
*/
|
||||
isLastEmptyRow(index) {
|
||||
return index === this.tableData.length - 1 && !this.isRowValid(this.tableData[index])
|
||||
},
|
||||
|
||||
/**
|
||||
* 单元格内容变化（仅更新表格数据，触发防抖更新）
|
||||
*/
|
||||
handleCellChange() {
|
||||
// 确保始终保留一个空行
|
||||
this.ensureEmptyRow()
|
||||
// 触发防抖更新（跨input输入时，重置同一个定时器）
|
||||
this.triggerDebounceChange()
|
||||
},
|
||||
|
||||
/**
|
||||
* 任意input聚焦：标记全局聚焦状态
|
||||
*/
|
||||
handleInputFocus() {
|
||||
this.hasFocus = true
|
||||
// 聚焦时清除防抖定时器（用户还在输入，不触发更新）
|
||||
if (this.debounceTimer) {
|
||||
clearTimeout(this.debounceTimer)
|
||||
this.debounceTimer = null
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 任意input失焦：延迟判断是否真的无聚焦（避免切换input误触发）
|
||||
*/
|
||||
handleInputBlur() {
|
||||
// 延迟 100ms 检查聚焦状态（切换input时，新input的focus会先触发）
|
||||
setTimeout(() => {
|
||||
try {
|
||||
// 1. 获取表格内所有 el-input 的原生 input 元素
|
||||
const tableEl = this.$refs.tableContainer;
|
||||
if (!tableEl) {
|
||||
this.hasFocus = false;
|
||||
return;
|
||||
}
|
||||
const inputs = tableEl.querySelectorAll('.el-input__inner'); // 精准匹配 Element UI 输入框
|
||||
|
||||
console.log('所有输入框:', inputs)
|
||||
// 2. 判断是否有任意输入框处于聚焦状态
|
||||
const hasAnyFocus = Array.from(inputs).some(input => {
|
||||
// 核心：判断当前输入框是否是文档的激活元素
|
||||
console.log('当前激活元素:', document.activeElement === input)
|
||||
return input === document.activeElement;
|
||||
});
|
||||
|
||||
// 3. 只有无任何输入框聚焦时，才标记全局失焦
|
||||
this.hasFocus = hasAnyFocus;
|
||||
} catch (e) {
|
||||
// 异常兜底：标记为失焦
|
||||
this.hasFocus = false;
|
||||
}
|
||||
}, 100);
|
||||
},
|
||||
|
||||
/**
|
||||
* 删除指定行
|
||||
* @param {Number} index - 行索引
|
||||
*/
|
||||
handleDeleteRow(index) {
|
||||
if (this.isLastEmptyRow(index)) return // 空行不可删
|
||||
this.tableData.splice(index, 1)
|
||||
this.ensureEmptyRow() // 删除后重新检查空行
|
||||
// 删除后立即触发更新（用户主动操作，无需防抖）
|
||||
this.emitUpdate()
|
||||
},
|
||||
|
||||
/**
|
||||
* 防抖触发更新：仅当「无输入框聚焦 + 防抖超时」时触发
|
||||
*/
|
||||
triggerDebounceChange() {
|
||||
// 若还有输入框聚焦，直接返回（用户还在输入）
|
||||
if (this.hasFocus) return
|
||||
|
||||
// 清除原有定时器（重置计时）
|
||||
if (this.debounceTimer) clearTimeout(this.debounceTimer)
|
||||
// 设置新定时器，延迟触发更新
|
||||
this.debounceTimer = setTimeout(() => {
|
||||
this.emitUpdate()
|
||||
this.debounceTimer = null // 清空定时器标识
|
||||
}, this.debounceDelay)
|
||||
},
|
||||
|
||||
/**
|
||||
* 统一触发更新父组件的逻辑
|
||||
*/
|
||||
emitUpdate() {
|
||||
// 触发 input（双向绑定）和 change（通知父组件）
|
||||
this.$emit('input', this.formattedJson)
|
||||
this.$emit('change', this.formattedJson)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.json-table-input {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.error-tip {
|
||||
color: #f56c6c;
|
||||
font-size: 12px;
|
||||
margin-bottom: 8px;
|
||||
padding: 4px 8px;
|
||||
background: #fef0f0;
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.error-tip i {
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
.table-container {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.json-preview {
|
||||
background: #f5f7fa;
|
||||
padding: 8px;
|
||||
border-radius: 4px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.json-preview .preview-label {
|
||||
color: #606266;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.json-preview pre {
|
||||
margin: 0;
|
||||
color: #303133;
|
||||
white-space: pre-wrap;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
</style>
|
||||
@@ -68,7 +68,7 @@ export default {
|
||||
name: "OrderItem",
|
||||
props: {
|
||||
orderId: {
|
||||
type: String,
|
||||
type: [String, undefined],
|
||||
required: true
|
||||
}
|
||||
},
|
||||
@@ -142,7 +142,12 @@ export default {
|
||||
},
|
||||
methods: {
|
||||
/** 查询正式订单明细列表 */
|
||||
getList() {
|
||||
getList() {
|
||||
if (!this.queryParams.orderId) {
|
||||
this.orderItemList = [];
|
||||
this.total = 0;
|
||||
return;
|
||||
}
|
||||
this.loading = true;
|
||||
listOrderItem(this.queryParams).then(response => {
|
||||
this.orderItemList = response.rows;
|
||||
|
||||
@@ -6,86 +6,92 @@
|
||||
<div style="display: flex; align-items: center; gap: 5px; margin-top: 10px;">
|
||||
<!-- 主搜索和添加 -->
|
||||
<el-input style="flex: 1;" prefix-icon="el-icon-search" placeholder="输入客户编码搜索"
|
||||
v-model="queryParams.customerCode"></el-input>
|
||||
v-model="queryParams.customerCode" @change="getCustomerList" clearable></el-input>
|
||||
<el-button icon="el-icon-search" @click="toggleQuery"></el-button>
|
||||
<el-button type="primary" icon="el-icon-plus" style="margin-left: 0;" @click="handleAdd"></el-button>
|
||||
</div>
|
||||
<div v-show="showQuery" style="display: flex; align-items: center; gap: 5px; margin-top: 10px;">
|
||||
<!-- 查询区，通过上方的查询按钮控制显示隐藏 -->
|
||||
<!-- 客户行业和客户等级的下拉选 -->
|
||||
<el-select style="width: 100px;" v-model="queryParams.industry" placeholder="客户行业" clearable>
|
||||
<el-select style="width: 100px;" v-model="queryParams.industry" placeholder="客户行业" clearable
|
||||
@change="getCustomerList">
|
||||
<el-option v-for="item in dict.type.customer_industry" :key="item.value" :label="item.label"
|
||||
:value="item.value" />
|
||||
</el-select>
|
||||
<el-select style="width: 100px;" v-model="queryParams.customerLevel" placeholder="客户等级" clearable>
|
||||
<el-select style="width: 100px;" v-model="queryParams.customerLevel" placeholder="客户等级" clearable
|
||||
@change="getCustomerList">
|
||||
<el-option v-for="item in dict.type.customer_level" :key="item.value" :label="item.label"
|
||||
:value="item.value" />
|
||||
</el-select>
|
||||
</div>
|
||||
<div>
|
||||
<!-- 列表区域 -->
|
||||
<KLPList :listData="customerList" listKey="customerId" :loading="customerLoading" info1Field="customerCode" info4Field="companyName" />
|
||||
<KLPList :listData="customerList" listKey="customerId" :loading="customerLoading" field1="customerCode"
|
||||
field4="companyName" @item-click="handleItemClick">
|
||||
<template slot="actions" slot-scope="{ item }">
|
||||
<el-button type="danger" size="mini" @click="handleDelete(item)" icon="el-icon-delete"></el-button>
|
||||
</template>
|
||||
</KLPList>
|
||||
</div>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="19">
|
||||
<el-tabs v-model="activeTab" type="border-card">
|
||||
<el-tabs v-model="activeTab" type="border-card" v-if="currentCustomer && currentCustomer.customerId">
|
||||
<el-tab-pane label="客户详情" name="detail">
|
||||
<!-- 客户详情区域 -->
|
||||
<el-descriptions :column="2" v-if="activeTab === 'detail'">
|
||||
<el-descriptions :column="2" border>
|
||||
<el-descriptions-item label="客户编号">
|
||||
{{ currentCustomer.customerNum }}
|
||||
{{ currentCustomer.customerCode || '-' }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="公司">
|
||||
{{ currentCustomer.company }}
|
||||
{{ currentCustomer.companyName || '-' }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="联系人">
|
||||
{{ currentCustomer.contact }}
|
||||
{{ currentCustomer.contactPerson || '-' }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="客户联系电话">{{ currentCustomer.phone }}</el-descriptions-item>
|
||||
<el-descriptions-item label="客户联系邮箱">{{ currentCustomer.email }}</el-descriptions-item>
|
||||
<el-descriptions-item label="客户联系方式">{{ currentCustomer.contactWay || '-' }}</el-descriptions-item>
|
||||
<el-descriptions-item label="客户行业">
|
||||
<dict-tag :value="currentCustomer.industry" :options="dict.type.customer_industry"></dict-tag>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="客户等级">
|
||||
<dict-tag :value="currentCustomer.level" :options="dict.type.customer_level"></dict-tag>
|
||||
<dict-tag :value="currentCustomer.customerLevel" :options="dict.type.customer_level"></dict-tag>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="客户地址" v-hasPermi="['crm:customer:address']">{{ currentCustomer.address
|
||||
}}</el-descriptions-item>
|
||||
<el-descriptions-item label="客户地址" v-hasPermi="['crm:customer:address']">{{ currentCustomer.address || '-'
|
||||
}}</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="信息编辑" name="edit">
|
||||
<!-- 客户联系人区域 -->
|
||||
<el-form label-position="top" v-if="activeTab === 'edit'">
|
||||
<el-form label-position="top" :model="currentCustomer" :disabled="updateLoading">
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="客户编号" prop="customerNum">
|
||||
<el-input v-model="currentCustomer.customerNum" placeholder="请输入客户编号" @change="handleDetailChange"/>
|
||||
<el-form-item label="客户编号" prop="customerCode">
|
||||
<el-input v-model="currentCustomer.customerCode" placeholder="请输入客户编号"
|
||||
@input="handleDetailChange" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="公司" prop="company">
|
||||
<el-input v-model="currentCustomer.company" placeholder="请输入公司名称" @change="handleDetailChange"/>
|
||||
<el-input v-model="currentCustomer.companyName" placeholder="请输入公司名称" @input="handleDetailChange" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="联系人" prop="contact">
|
||||
<el-input v-model="currentCustomer.contact" placeholder="请输入联系人" @change="handleDetailChange"/>
|
||||
<el-form-item label="联系人" prop="contactPerson">
|
||||
<!-- 修复字段映射错误：contact → contactPerson -->
|
||||
<el-input v-model="currentCustomer.contactPerson" placeholder="请输入联系人"
|
||||
@input="handleDetailChange" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="客户联系电话" prop="phone">
|
||||
<el-input v-model="currentCustomer.phone" placeholder="请输入客户联系电话" @change="handleDetailChange"/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="客户联系邮箱" prop="email">
|
||||
<el-input v-model="currentCustomer.email" placeholder="请输入客户联系邮箱" @change="handleDetailChange"/>
|
||||
<el-form-item label="客户联系方式" prop="contactWay">
|
||||
<el-input v-model="currentCustomer.contactWay" placeholder="请输入客户联系方式"
|
||||
@input="handleDetailChange" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="客户行业" prop="industry">
|
||||
<el-select v-model="currentCustomer.industry" placeholder="请选择客户行业" clearable @change="handleDetailChange">
|
||||
<el-select v-model="currentCustomer.industry" placeholder="请选择客户行业" clearable
|
||||
@change="handleDetailChange">
|
||||
<el-option v-for="item in dict.type.customer_industry" :key="item.value" :label="item.label"
|
||||
:value="item.value" />
|
||||
</el-select>
|
||||
@@ -93,15 +99,23 @@
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="客户等级" prop="level">
|
||||
<el-select v-model="currentCustomer.level" placeholder="请选择客户等级" clearable @change="handleDetailChange">
|
||||
<el-select v-model="currentCustomer.customerLevel" placeholder="请选择客户等级" clearable
|
||||
@change="handleDetailChange">
|
||||
<el-option v-for="item in dict.type.customer_level" :key="item.value" :label="item.label"
|
||||
:value="item.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12" v-hasPermi="['crm:customer:address']">
|
||||
<el-col :span="24" v-hasPermi="['crm:customer:address']">
|
||||
<el-form-item label="客户地址" prop="address">
|
||||
<el-input v-model="currentCustomer.address" placeholder="请输入客户地址" @change="handleDetailChange"/>
|
||||
<el-input type="textarea" v-model="currentCustomer.address" placeholder="请输入客户地址"
|
||||
@input="handleDetailChange" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24" v-hasPermi="['crm:customer:bank']">
|
||||
<el-form-item label="银行信息" prop="bankInfo">
|
||||
<JSONTableInput @change="handleDetailChange" v-model="currentCustomer.bankInfo"
|
||||
:columns="[{ prop: 'bankName', label: '银行名称' }, { prop: 'bankAccount', label: '银行账号' }]" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
@@ -110,17 +124,19 @@
|
||||
|
||||
<el-tab-pane label="历史订单" name="transaction">
|
||||
<!-- 客户交易记录区域 -->
|
||||
<div v-if="activeTab === 'transaction'">
|
||||
<el-descriptions :column="2">
|
||||
<el-descriptions-item label="客户总数">{{ currentCustomer.totalCount }}</el-descriptions-item>
|
||||
<el-descriptions-item label="已成交订单数">{{ currentCustomer.dealCount }}</el-descriptions-item>
|
||||
<el-descriptions-item label="待成交订单数">{{ currentCustomer.waitCount }}</el-descriptions-item>
|
||||
<el-descriptions-item label="取消订单数">{{ currentCustomer.cancelCount }}</el-descriptions-item>
|
||||
<div>
|
||||
<el-descriptions :column="2" border>
|
||||
<el-descriptions-item label="订单总数">{{ currentCustomer.totalCount || 0 }}</el-descriptions-item>
|
||||
<el-descriptions-item label="已成交订单数">{{ currentCustomer.dealCount || 0 }}</el-descriptions-item>
|
||||
<el-descriptions-item label="待成交订单数">{{ currentCustomer.waitCount || 0 }}</el-descriptions-item>
|
||||
<el-descriptions-item label="取消订单数">{{ currentCustomer.cancelCount || 0 }}</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
<el-table></el-table>
|
||||
<el-table :data="[]" border style="margin-top: 10px;" placeholder="暂无订单数据"></el-table>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
|
||||
<el-empty v-else style="margin-top: 20px;" description="选择客户查看详情"></el-empty>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
@@ -142,13 +158,13 @@
|
||||
<el-form-item label="所属行业" prop="industry">
|
||||
<el-select v-model="form.industry" placeholder="请选择所属行业" clearable>
|
||||
<el-option v-for="item in dict.type.customer_industry" :key="item.value" :label="item.label"
|
||||
:value="item.value" />
|
||||
:value="item.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="客户等级" prop="customerLevel">
|
||||
<el-select v-model="form.customerLevel" placeholder="请选择客户等级" clearable>
|
||||
<el-option v-for="item in dict.type.customer_level" :key="item.value" :label="item.label"
|
||||
:value="item.value" />
|
||||
:value="item.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="客户地址" prop="address">
|
||||
@@ -157,6 +173,10 @@
|
||||
<el-form-item label="备注" prop="remark">
|
||||
<el-input v-model="form.remark" placeholder="请输入备注" />
|
||||
</el-form-item>
|
||||
<el-form-item label="银行信息" prop="transactionRecords">
|
||||
<JSONTableInput v-model="form.bankInfo"
|
||||
:columns="[{ prop: 'bankName', label: '银行名称' }, { prop: 'bankAccount', label: '银行账号' }]" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button>
|
||||
@@ -168,12 +188,15 @@
|
||||
|
||||
<script>
|
||||
import KLPList from '@/components/KLPUI/KLPList/index.vue'
|
||||
import { listCustomer, addCustomer } from '@/api/crm/customer'
|
||||
import JSONTableInput from '../components/JSONTableInput.vue'
|
||||
|
||||
import { listCustomer, addCustomer, updateCustomer, delCustomer } from '@/api/crm/customer'
|
||||
|
||||
export default {
|
||||
name: 'CustomerPage',
|
||||
components: {
|
||||
KLPList
|
||||
KLPList,
|
||||
JSONTableInput
|
||||
},
|
||||
dicts: ['customer_industry', 'customer_level'],
|
||||
data() {
|
||||
@@ -194,6 +217,8 @@ export default {
|
||||
open: false,
|
||||
form: {},
|
||||
buttonLoading: false,
|
||||
updateLoading: false, // 编辑请求加载状态
|
||||
debounceTimer: null, // 防抖定时器
|
||||
rules: {
|
||||
customerCode: [{ required: true, message: '请输入客户编码', trigger: 'blur' }],
|
||||
companyName: [{ required: true, message: '请输入公司名称', trigger: 'blur' }],
|
||||
@@ -213,20 +238,87 @@ export default {
|
||||
mounted() {
|
||||
this.getCustomerList();
|
||||
},
|
||||
beforeDestroy() {
|
||||
// 销毁时清除防抖定时器，避免内存泄漏
|
||||
clearTimeout(this.debounceTimer);
|
||||
},
|
||||
methods: {
|
||||
toggleQuery() {
|
||||
this.showQuery = !this.showQuery
|
||||
},
|
||||
handleDetailChange() {
|
||||
// 发送网络请求更新客户信息
|
||||
|
||||
/**
|
||||
* 防抖函数（通用）
|
||||
* @param {Function} fn - 执行函数
|
||||
* @param {Number} delay - 延迟时间(ms)
|
||||
* @returns {Function} 防抖后的函数
|
||||
*/
|
||||
debounce(fn, delay) {
|
||||
return (...args) => {
|
||||
// 清除上一次定时器
|
||||
if (this.debounceTimer) clearTimeout(this.debounceTimer);
|
||||
// 重新设置定时器
|
||||
this.debounceTimer = setTimeout(() => {
|
||||
fn.apply(this, args);
|
||||
}, delay);
|
||||
};
|
||||
},
|
||||
|
||||
/** 表单编辑变更 - 防抖提交 */
|
||||
handleDetailChange: function () {
|
||||
// 绑定防抖函数（延迟2秒，仅最后一次变更后执行）
|
||||
this.debounce(async () => {
|
||||
// 无客户ID或加载中，不执行
|
||||
if (!this.currentCustomerId || this.updateLoading) return;
|
||||
|
||||
try {
|
||||
this.updateLoading = true;
|
||||
// 深拷贝避免请求过程中数据被修改
|
||||
const params = { ...this.currentCustomer };
|
||||
const res = await updateCustomer(params);
|
||||
this.$message({
|
||||
type: 'success',
|
||||
message: '客户信息更新成功'
|
||||
});
|
||||
// 同步列表数据（可选）
|
||||
this.syncCustomerList(params);
|
||||
} catch (error) {
|
||||
this.$message({
|
||||
type: 'error',
|
||||
message: '更新失败：' + (error.msg || '服务器异常')
|
||||
});
|
||||
} finally {
|
||||
this.updateLoading = false;
|
||||
}
|
||||
}, 1000)();
|
||||
},
|
||||
|
||||
/** 同步列表数据（避免列表和详情数据不一致） */
|
||||
syncCustomerList(updatedCustomer) {
|
||||
const index = this.customerList.findIndex(item => item.customerId === updatedCustomer.customerId);
|
||||
if (index > -1) {
|
||||
this.$set(this.customerList, index, { ...this.customerList[index], ...updatedCustomer });
|
||||
}
|
||||
},
|
||||
|
||||
getCustomerList() {
|
||||
this.customerLoading = true;
|
||||
listCustomer(this.queryParams).then(response => {
|
||||
this.customerList = response.rows || [];
|
||||
this.total = response.total || 0; // 补充总数
|
||||
this.customerLoading = false;
|
||||
}).catch(() => {
|
||||
this.customerLoading = false;
|
||||
this.$message.error('获取客户列表失败');
|
||||
});
|
||||
},
|
||||
|
||||
handleItemClick(item) {
|
||||
// 深拷贝避免原数据被直接修改
|
||||
this.currentCustomer = { ...item };
|
||||
this.activeTab = 'detail';
|
||||
},
|
||||
|
||||
// 表单重置
|
||||
reset() {
|
||||
this.form = {
|
||||
@@ -246,39 +338,69 @@ export default {
|
||||
updateTime: undefined,
|
||||
delFlag: undefined
|
||||
};
|
||||
this.resetForm("form");
|
||||
if (this.$refs.form) this.$refs.form.resetFields(); // 修复重置表单
|
||||
},
|
||||
/** 新增按钮操作 */
|
||||
|
||||
/** 新增按钮操作 */
|
||||
handleAdd() {
|
||||
this.reset();
|
||||
this.open = true;
|
||||
},
|
||||
|
||||
submitForm() {
|
||||
this.$refs.form.validate(valid => {
|
||||
this.$refs.form.validate(async (valid) => {
|
||||
if (valid) {
|
||||
this.buttonLoading = true;
|
||||
// 提交表单数据
|
||||
addCustomer(this.form).then(response => {
|
||||
try {
|
||||
await addCustomer(this.form);
|
||||
this.$message({
|
||||
message: '客户录入成功',
|
||||
type: 'success'
|
||||
});
|
||||
this.buttonLoading = false;
|
||||
this.open = false;
|
||||
this.getCustomerList();
|
||||
}).finally(() => {
|
||||
} catch (error) {
|
||||
this.$message.error('录入失败：' + (error.msg || '服务器异常'));
|
||||
} finally {
|
||||
this.buttonLoading = false;
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
/** 取消按钮操作 */
|
||||
cancel() {
|
||||
this.reset();
|
||||
this.open = false;
|
||||
},
|
||||
|
||||
/** 处理删除（补充实现） */
|
||||
handleDelete(item) {
|
||||
this.$confirm('确定删除该客户吗？', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(async () => {
|
||||
// 补充删除接口调用逻辑
|
||||
await delCustomer(item.customerId);
|
||||
this.$message.success('删除成功');
|
||||
this.getCustomerList();
|
||||
}).catch(() => {
|
||||
this.$message.info('已取消删除');
|
||||
});
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
<style scoped>
|
||||
.app-container {
|
||||
padding: 16px;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.dialog-footer {
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user