✨ feat: 合并
This commit is contained in:
砂糖
48
gear-ui3/src/components/CustomerSelect/index.vue
Normal file
48
gear-ui3/src/components/CustomerSelect/index.vue
Normal file
@@ -0,0 +1,48 @@
|
||||
<template>
|
||||
<el-select filterable v-model="_customerId" remote :remote-method="remoteSearchCustomer" :loading="customerLoading" placeholder="请选择客户">
|
||||
<el-option v-for="item in customerList" :key="item.supplierId" :label="item.name" :value="item.supplierId" />
|
||||
</el-select>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { listSupplier } from '@/api/oa/supplier';
|
||||
|
||||
export default {
|
||||
name: 'CustomerSelect',
|
||||
props: {
|
||||
value: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
_customerId: {
|
||||
get() {
|
||||
return this.value;
|
||||
},
|
||||
set(value) {
|
||||
this.$emit('input', value);
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
customerList: [],
|
||||
customerLoading: false
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.remoteSearchCustomer('');
|
||||
},
|
||||
methods: {
|
||||
remoteSearchCustomer(query) {
|
||||
this.customerLoading = true;
|
||||
listSupplier({ name: query, pageNum: 1, pageSize: 10 }).then(response => {
|
||||
this.customerList = response.rows;
|
||||
}).finally(() => {
|
||||
this.customerLoading = false;
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
321
gear-ui3/src/components/GearList/index.vue
Normal file
321
gear-ui3/src/components/GearList/index.vue
Normal file
@@ -0,0 +1,321 @@
|
||||
<template>
|
||||
<div class="klp-list-container">
|
||||
<!-- 列表加载状态 -->
|
||||
<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)"
|
||||
>
|
||||
<!-- 列表标题区域 - 文字溢出省略+Tooltip -->
|
||||
<div class="klp-list-title">
|
||||
<span class="title-label">{{ titleLabel }}：</span>
|
||||
<el-tooltip
|
||||
:content="item[titleField]"
|
||||
placement="top"
|
||||
:disabled="!isContentOverflow(item)"
|
||||
effect="light"
|
||||
>
|
||||
<span class="title-value">{{ item[titleField] }}</span>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
|
||||
<!-- 右侧操作按钮组 -->
|
||||
<div class="klp-list-actions">
|
||||
<slot name="actions" :item="item" :isSelected="isSelected(item)"></slot>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 空状态提示 -->
|
||||
<div v-if="listData.length === 0 && !loading" class="klp-list-empty">
|
||||
<el-empty description="暂无数据" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "KLPList",
|
||||
components: {},
|
||||
props: {
|
||||
/** 列表数据源（必传） */
|
||||
listData: {
|
||||
type: Array,
|
||||
required: true,
|
||||
default: () => []
|
||||
},
|
||||
|
||||
/** 列表项唯一标识字段（必传，如orderId、id） */
|
||||
listKey: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
|
||||
/** 列表标题前置标签（如"订单编号："） */
|
||||
titleLabel: {
|
||||
type: String,
|
||||
required: true,
|
||||
default: "标题"
|
||||
},
|
||||
|
||||
/** 列表项标题对应的字段名（如orderCode、name） */
|
||||
titleField: {
|
||||
type: String,
|
||||
required: true,
|
||||
default: "title"
|
||||
},
|
||||
|
||||
/** 列表加载状态 */
|
||||
loading: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: false
|
||||
},
|
||||
|
||||
/** 标题最大宽度占容器的百分比（0-100），控制文字溢出 */
|
||||
titleMaxPercent: {
|
||||
type: Number,
|
||||
required: false,
|
||||
default: 80 // 默认占容器80%宽度
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 内部管理选中状态：存储当前选中项的唯一键值（单选中）
|
||||
selectedKey: null,
|
||||
// 文字溢出检测临时元素（避免重复创建）
|
||||
overflowCheckElements: {},
|
||||
// 容器宽度缓存
|
||||
containerWidth: 0
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* 判断当前列表项是否被选中
|
||||
* @param {Object} item - 列表项数据
|
||||
* @returns {Boolean} 选中状态
|
||||
*/
|
||||
isSelected(item) {
|
||||
const itemKey = item[this.listKey];
|
||||
return this.selectedKey === itemKey;
|
||||
},
|
||||
|
||||
/**
|
||||
* 列表项点击事件：切换选中状态（单选中逻辑）
|
||||
* @param {Object} item - 点击的列表项数据
|
||||
*/
|
||||
handleItemClick(item) {
|
||||
const itemKey = item[this.listKey];
|
||||
// 单选中逻辑：点击已选中项取消选中，点击未选中项切换选中（取消其他项）
|
||||
// this.selectedKey = this.selectedKey === itemKey ? null : itemKey;
|
||||
this.selectedKey = itemKey;
|
||||
|
||||
// 向父组件触发事件：传递当前选中项（null表示无选中）
|
||||
const selectedItem = this.selectedKey ? item : null;
|
||||
this.$emit("item-click", selectedItem, item);
|
||||
},
|
||||
|
||||
/**
|
||||
* 清空选中状态（支持父组件通过ref调用）
|
||||
*/
|
||||
clearSelection() {
|
||||
this.selectedKey = null;
|
||||
// 触发清空选中事件
|
||||
this.$emit("selection-cleared");
|
||||
},
|
||||
|
||||
/**
|
||||
* 主动设置选中项（支持父组件通过ref调用）
|
||||
* @param {String/Number} targetKey - 要选中项的唯一键值
|
||||
*/
|
||||
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);
|
||||
} else {
|
||||
this.selectedKey = null;
|
||||
console.warn(`列表中不存在key为${targetKey}的项`);
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 判断文字是否溢出（控制Tooltip显示/隐藏）
|
||||
* @param {Object} item - 列表项数据
|
||||
* @returns {Boolean} 是否溢出
|
||||
*/
|
||||
isContentOverflow(item) {
|
||||
const itemKey = item[this.listKey];
|
||||
const content = item[this.titleField] || "";
|
||||
|
||||
// 内容为空时不显示Tooltip
|
||||
if (!content) return false;
|
||||
|
||||
// 获取容器宽度并增加存在性检查
|
||||
const container = this.$el.querySelector('.klp-list-container');
|
||||
if (!container) return false; // 容器不存在时直接返回
|
||||
this.containerWidth = container.clientWidth;
|
||||
|
||||
// 计算标题内容最大可用宽度（减去标签和边距）
|
||||
const labelWidth = this.$el.querySelector('.title-label')?.offsetWidth || 60;
|
||||
const availableWidth = (this.containerWidth * this.titleMaxPercent / 100) - labelWidth - 20;
|
||||
|
||||
// 创建临时元素测量文字实际宽度（复用元素避免性能问题）
|
||||
if (!this.overflowCheckElements[itemKey]) {
|
||||
const tempEl = document.createElement("span");
|
||||
// 复制title-value的样式（确保测量准确）
|
||||
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 > availableWidth;
|
||||
},
|
||||
|
||||
/**
|
||||
* 监听容器宽度变化
|
||||
*/
|
||||
handleResize() {
|
||||
// 宽度变化时重新计算溢出状态
|
||||
this.$forceUpdate();
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
/** 列表数据变化时，重置选中状态和溢出检测元素 */
|
||||
listData: {
|
||||
deep: true,
|
||||
handler() {
|
||||
this.clearSelection();
|
||||
// 清理临时测量元素
|
||||
Object.values(this.overflowCheckElements).forEach(el => {
|
||||
document.body.removeChild(el);
|
||||
});
|
||||
this.overflowCheckElements = {};
|
||||
}
|
||||
},
|
||||
|
||||
/** 标题最大百分比变化时，重新计算溢出 */
|
||||
titleMaxPercent() {
|
||||
this.$forceUpdate();
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.$nextTick(() => {
|
||||
const container = this.$el.querySelector('.klp-list-container');
|
||||
// 增加存在性检查
|
||||
this.containerWidth = container ? container.clientWidth : 0;
|
||||
});
|
||||
|
||||
// 监听窗口大小变化
|
||||
window.addEventListener('resize', this.handleResize);
|
||||
},
|
||||
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);
|
||||
overflow-y: auto;
|
||||
padding-right: 8px;
|
||||
margin-top: 10px;
|
||||
width: 100%; /* 确保容器宽度正确计算 */
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* 加载状态容器（避免加载时容器塌陷） */
|
||||
.list-loading-wrapper {
|
||||
min-height: 100px;
|
||||
}
|
||||
|
||||
/* 列表项样式 */
|
||||
.klp-list-item {
|
||||
padding: 6px 8px;
|
||||
margin-bottom: 6px;
|
||||
border-bottom: 1px solid #111;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
width: 100%; /* 确保列表项占满容器宽度 */
|
||||
}
|
||||
|
||||
/* 列表项选中状态（左侧高亮边框+背景色） */
|
||||
.klp-list-item.active {
|
||||
border-left: 3px solid #2bf;
|
||||
background-color: #222;
|
||||
}
|
||||
|
||||
/* 列表标题区域（占满中间空间，让操作按钮靠右） */
|
||||
.klp-list-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex: 1;
|
||||
min-width: 0; /* 关键：允许flex项缩小到内容尺寸以下 */
|
||||
overflow: hidden; /* 确保内容不会超出容器 */
|
||||
}
|
||||
|
||||
/* 标题前置标签样式 */
|
||||
.klp-list-title .title-label {
|
||||
color: #ddd;
|
||||
margin-right: 6px;
|
||||
font-size: 13px;
|
||||
white-space: nowrap; /* 标签不换行 */
|
||||
flex-shrink: 0; /* 标签不缩小 */
|
||||
}
|
||||
|
||||
/* 标题内容样式（溢出省略） */
|
||||
.klp-list-title .title-value {
|
||||
color: #ddd;
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
white-space: nowrap; /* 禁止换行 */
|
||||
overflow: hidden; /* 超出部分隐藏 */
|
||||
text-overflow: ellipsis; /* 超出部分显示省略号 */
|
||||
flex: 1; /* 占据剩余空间 */
|
||||
min-width: 0; /* 关键：允许内容区域缩小 */
|
||||
}
|
||||
|
||||
/* 操作按钮组（按钮间距控制） */
|
||||
.klp-list-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
flex-shrink: 0; /* 操作区不缩小 */
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
/* 空状态样式（居中显示） */
|
||||
.klp-list-empty {
|
||||
padding: 40px 0;
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
|
||||
23
gear-ui3/src/components/GearTable/ColumnRender.vue
Normal file
23
gear-ui3/src/components/GearTable/ColumnRender.vue
Normal file
@@ -0,0 +1,23 @@
|
||||
<script>
|
||||
export default {
|
||||
name: 'ColumnRender',
|
||||
functional: true,
|
||||
props: {
|
||||
column: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
render: {
|
||||
type: Function,
|
||||
required: true
|
||||
},
|
||||
data: {
|
||||
type: Object,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
render(h, { props }) {
|
||||
return props.render(h, props.data);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
179
gear-ui3/src/components/GearTable/TableActionToolbar.vue
Normal file
179
gear-ui3/src/components/GearTable/TableActionToolbar.vue
Normal file
@@ -0,0 +1,179 @@
|
||||
<template>
|
||||
<el-col :span="12" class="table-action-toolbar">
|
||||
<el-button v-if="tools.includes('fullScreen')" size="mini" icon="el-icon-full-screen" circle
|
||||
@click="handleFullScreen"></el-button>
|
||||
<el-button v-if="tools.includes('refresh')" size="mini" icon="el-icon-refresh" circle
|
||||
@click="handleRefresh"></el-button>
|
||||
<el-button v-if="tools.includes('export')" size="mini" icon="el-icon-download" circle
|
||||
@click="handleExport"></el-button>
|
||||
<el-button v-if="tools.includes('print')" size="mini" icon="el-icon-printer" circle
|
||||
@click="handlePrint"></el-button>
|
||||
|
||||
<!-- 设置按钮和弹出框 -->
|
||||
<el-dropdown v-if="tools.includes('setting')" trigger="click" :hide-on-click="false" style="margin-left: 10px;">
|
||||
<el-tooltip class="item" effect="dark" content="显隐列" placement="top">
|
||||
<el-button size="mini" circle icon="el-icon-menu" />
|
||||
</el-tooltip>
|
||||
<el-dropdown-menu slot="dropdown">
|
||||
<el-dropdown-item v-for="column in columns" :key="column.prop">
|
||||
<el-checkbox v-model="column.show">{{ column.label }}</el-checkbox>
|
||||
</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
</el-col>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import XLSX from 'xlsx';
|
||||
import { saveAs } from 'file-saver';
|
||||
|
||||
export default {
|
||||
name: 'TableActionToolbar',
|
||||
props: {
|
||||
// 控制显示哪些工具按钮
|
||||
tools: {
|
||||
type: Array,
|
||||
required: true
|
||||
},
|
||||
// 表格整体ref，用于获取DOM
|
||||
tableRef: {
|
||||
type: Object,
|
||||
default: null
|
||||
},
|
||||
// 表格数据，用于导出
|
||||
tableData: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
// 表格列定义，用于导出和设置
|
||||
columns: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
// 导出文件名
|
||||
exportFileName: {
|
||||
type: String,
|
||||
default: '表格数据'
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
_columns: {
|
||||
get() {
|
||||
console.log(this.columns);
|
||||
return this.columns.filter(col => col.show);
|
||||
},
|
||||
set(value) {
|
||||
this.$emit('columnChange', value);
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 全屏处理
|
||||
handleFullScreen() {
|
||||
const tableEl = this.tableRef?.$el;
|
||||
if (!tableEl) {
|
||||
this.$emit('fullScreen');
|
||||
return;
|
||||
}
|
||||
|
||||
if (!document.fullscreenElement) {
|
||||
tableEl.requestFullscreen().catch(err => {
|
||||
this.$message.error(`全屏请求失败: ${err.message}`);
|
||||
});
|
||||
} else {
|
||||
if (document.exitFullscreen) {
|
||||
document.exitFullscreen();
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
// 刷新处理
|
||||
handleRefresh() {
|
||||
this.$emit('refresh');
|
||||
},
|
||||
|
||||
// 导出Excel处理
|
||||
handleExport() {
|
||||
if (this.tableData.length === 0) {
|
||||
this.$message.warning('没有数据可导出');
|
||||
return;
|
||||
}
|
||||
|
||||
// 准备导出数据 - 只包含列定义中指定的字段
|
||||
const exportData = this.tableData.map(row => {
|
||||
const formattedRow = {};
|
||||
this.columns.forEach(col => {
|
||||
if (col.prop && !col.hidden) {
|
||||
// 使用列的label作为表头，prop对应的数据作为值
|
||||
formattedRow[col.label || col.prop] = row[col.prop];
|
||||
}
|
||||
});
|
||||
return formattedRow;
|
||||
});
|
||||
|
||||
// 创建工作簿和工作表
|
||||
const worksheet = XLSX.utils.json_to_sheet(exportData);
|
||||
const workbook = XLSX.utils.book_new();
|
||||
XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1');
|
||||
|
||||
// 生成Excel文件并下载
|
||||
const excelBuffer = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' });
|
||||
this.saveExcelFile(excelBuffer, this.exportFileName);
|
||||
},
|
||||
|
||||
// 保存Excel文件
|
||||
saveExcelFile(buffer, fileName) {
|
||||
const blob = new Blob([buffer], { type: 'application/octet-stream' });
|
||||
saveAs(blob, `${fileName}_${new Date().toLocaleDateString()}.xlsx`);
|
||||
},
|
||||
|
||||
// 打印处理
|
||||
handlePrint() {
|
||||
this.$emit('print');
|
||||
},
|
||||
|
||||
// 列显示状态变化处理
|
||||
handleColumnChange(checked) {
|
||||
// 找出所有列的显示状态变化
|
||||
const columnChanges = this.visibleColumns.map(col => ({
|
||||
prop: col.prop,
|
||||
hidden: !checked.includes(col.prop)
|
||||
}));
|
||||
|
||||
// 触发事件通知父组件更新列显示状态
|
||||
this.$emit('columnChange', columnChanges);
|
||||
|
||||
// 刷新表格布局
|
||||
if (this.tableRef && this.tableRef.doLayout) {
|
||||
this.tableRef.doLayout();
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.table-action-toolbar {
|
||||
text-align: left;
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
/* 按钮间距 */
|
||||
::v-deep .el-button {
|
||||
margin-left: 4px;
|
||||
}
|
||||
|
||||
.column-setting {
|
||||
padding: 5px 0;
|
||||
}
|
||||
|
||||
::v-deep .el-checkbox {
|
||||
display: block;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
::v-deep .el-checkbox:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
</style>
|
||||
263
gear-ui3/src/components/GearTable/index.vue
Normal file
263
gear-ui3/src/components/GearTable/index.vue
Normal file
@@ -0,0 +1,263 @@
|
||||
<template>
|
||||
<div class="my-table-container">
|
||||
<!-- 扩展层：加载动画 -->
|
||||
<div v-if="loading" class="table-loading">
|
||||
<el-loading-spinner></el-loading-spinner>
|
||||
<p class="loading-text">{{ loadingText || "加载中..." }}</p>
|
||||
</div>
|
||||
|
||||
<el-row>
|
||||
<!-- 自定义操作按钮，左对齐 -->
|
||||
<el-col :span="12">
|
||||
<slot name='actionRow'>
|
||||
<!-- 分页 -->
|
||||
<span style="color: #ccc;"></span>
|
||||
</slot>
|
||||
</el-col>
|
||||
|
||||
<!-- 通用操作工具栏 -->
|
||||
<TableActionToolbar
|
||||
:tools="actionTool"
|
||||
:table-ref="getTableInstance()"
|
||||
:table-data="tableData"
|
||||
:columns="columns"
|
||||
:export-file-name="exportFileName"
|
||||
@fullScreen="handleFullScreen"
|
||||
@refresh="handleRefresh"
|
||||
@export="handleExport"
|
||||
@print="handlePrint"
|
||||
@columnChange="updateColumnsVisibility"
|
||||
/>
|
||||
</el-row>
|
||||
|
||||
<!-- 原生 Table 核心 -->
|
||||
<el-table
|
||||
:ref="tableRef"
|
||||
v-bind="$attrs"
|
||||
v-on="$listeners"
|
||||
:class="['my-table', customClass]"
|
||||
:data="tableData"
|
||||
>
|
||||
<!-- 透传列定义插槽 -->
|
||||
<template
|
||||
v-for="(column, index) in $attrs.columns || []"
|
||||
v-slot:[`header-${column.prop}`]="scope"
|
||||
>
|
||||
<slot :name="`header-${column.prop}`" v-bind="scope"></slot>
|
||||
</template>
|
||||
<template
|
||||
v-for="(column, index) in $attrs.columns || []"
|
||||
v-slot:[column.prop]="scope"
|
||||
>
|
||||
<slot :name="column.prop" v-bind="scope"></slot>
|
||||
</template>
|
||||
|
||||
<!-- 透传原生内置插槽 -->
|
||||
<template v-slot:empty="scope">
|
||||
<slot name="empty" v-bind="scope"></slot>
|
||||
</template>
|
||||
<template v-slot:append="scope">
|
||||
<slot name="append" v-bind="scope"></slot>
|
||||
</template>
|
||||
|
||||
<!-- 透传自定义列插槽 -->
|
||||
<slot v-bind:tableRef="tableRef"></slot>
|
||||
|
||||
<el-table-column
|
||||
v-if="selectionColumn"
|
||||
type="selection"
|
||||
width="55"
|
||||
align="center"
|
||||
></el-table-column>
|
||||
|
||||
<el-table-column
|
||||
v-if="indexColumn"
|
||||
type="index"
|
||||
width="55"
|
||||
align="center"
|
||||
></el-table-column>
|
||||
|
||||
<el-table-column
|
||||
v-for="(column, index) in _columns"
|
||||
v-bind="column"
|
||||
:width="column.width"
|
||||
:prop="column.prop"
|
||||
:align="column.align"
|
||||
:label="column.label"
|
||||
:min-width="column.minWidth"
|
||||
:fixed="column.fixed"
|
||||
:show-overflow-tooltip="column.showOverflowTooltip"
|
||||
:sortable="column.sortable"
|
||||
>
|
||||
<template v-slot="scope">
|
||||
<ColumnRender v-if="column.render" :column="column" :data="scope.row" :render="column.render"/>
|
||||
<Eclipse v-else-if="column.eclipse" :text="scope.row[column.prop]"></Eclipse>
|
||||
<span v-else>{{ scope.row[column.prop] }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<!-- 分页插槽 -->
|
||||
<slot name="pagination"></slot>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ColumnRender from './ColumnRender.vue';
|
||||
import Eclipse from './renderer/eclipse.vue';
|
||||
import TableActionToolbar from './TableActionToolbar.vue';
|
||||
|
||||
export default {
|
||||
name: "KLPTable",
|
||||
components: {
|
||||
ColumnRender,
|
||||
Eclipse,
|
||||
TableActionToolbar
|
||||
},
|
||||
props: {
|
||||
// 基础扩展属性
|
||||
loading: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
loadingText: {
|
||||
type: String,
|
||||
default: "加载中..."
|
||||
},
|
||||
customClass: {
|
||||
type: String,
|
||||
default: ""
|
||||
},
|
||||
// 表格数据
|
||||
tableData: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
// 列定义
|
||||
customColumns: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
// 选择列
|
||||
selectionColumn: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 索引列
|
||||
indexColumn: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 操作工具
|
||||
actionTool: {
|
||||
type: Array,
|
||||
default: () => ['fullScreen', 'export', 'setting']
|
||||
},
|
||||
// 导出文件名
|
||||
exportFileName: {
|
||||
type: String,
|
||||
default: '表格数据'
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
tableRef: "myTableRef",
|
||||
columns: []
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
_columns() {
|
||||
return this.columns.filter(col => col.show);
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
customColumns: {
|
||||
handler(newVal) {
|
||||
console.log(newVal, this.customColumns, '自定义列');
|
||||
this.columns = newVal.map(col => ({...col, show: true}));
|
||||
},
|
||||
deep: true,
|
||||
immediate: true
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 获取表格实例
|
||||
getTableInstance() {
|
||||
return this.$refs[this.tableRef];
|
||||
},
|
||||
// 透传原生方法
|
||||
clearSelection() {
|
||||
const table = this.getTableInstance();
|
||||
if (table && table.clearSelection) {
|
||||
table.clearSelection();
|
||||
}
|
||||
},
|
||||
toggleRowSelection(row, selected) {
|
||||
const table = this.getTableInstance();
|
||||
if (table && table.toggleRowSelection) {
|
||||
table.toggleRowSelection(row, selected);
|
||||
}
|
||||
},
|
||||
// 操作处理方法（可被覆盖或扩展）
|
||||
handleFullScreen() {
|
||||
this.$emit('fullScreen');
|
||||
},
|
||||
handleRefresh() {
|
||||
this.$emit('refresh');
|
||||
},
|
||||
handleExport() {
|
||||
this.$emit('export');
|
||||
},
|
||||
handlePrint() {
|
||||
this.$emit('print');
|
||||
},
|
||||
// handleSetting() {
|
||||
// this.$emit('setting');
|
||||
// },
|
||||
updateColumnsVisibility(changes) {
|
||||
// 更新列的hidden属性
|
||||
changes.forEach(change => {
|
||||
const column = this.columns.find(col => col.prop === change.prop);
|
||||
if (column) {
|
||||
column.show = !column.show;
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
console.log("KLPTable 初始化完成，原生实例：", this.getTableInstance());
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.my-table-container {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.table-loading {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(255, 255, 255, 0.8);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.loading-text {
|
||||
margin-top: 12px;
|
||||
color: #666;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.my-table {
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
|
||||
34
gear-ui3/src/components/GearTable/renderer/eclipse.vue
Normal file
34
gear-ui3/src/components/GearTable/renderer/eclipse.vue
Normal file
@@ -0,0 +1,34 @@
|
||||
<template>
|
||||
<div class="eclipse-container">
|
||||
<el-tooltip :content="text" placement="top" :disabled="text.length < 10">
|
||||
<span class="eclipse">{{ text }}</span>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'Eclipse',
|
||||
props: {
|
||||
text: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.eclipse-container {
|
||||
position: relative; /* 为tooltip提供定位参考 */
|
||||
display: inline-block; /* 确保容器只占内容宽度 */
|
||||
}
|
||||
|
||||
.eclipse {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
display: inline-block; /* 确保元素有明确的尺寸 */
|
||||
max-width: 100%; /* 限制最大宽度，确保溢出效果生效 */
|
||||
}
|
||||
</style>
|
||||
254
gear-ui3/src/components/ProductSelect/BomPanel/BomItem.vue
Normal file
254
gear-ui3/src/components/ProductSelect/BomPanel/BomItem.vue
Normal file
@@ -0,0 +1,254 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<el-row :gutter="10" class="mb8">
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="primary"
|
||||
plain
|
||||
icon="el-icon-plus"
|
||||
size="mini"
|
||||
@click="handleAdd"
|
||||
>新增</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="success"
|
||||
plain
|
||||
icon="el-icon-edit"
|
||||
size="mini"
|
||||
:disabled="single"
|
||||
@click="handleUpdate"
|
||||
>修改</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="danger"
|
||||
plain
|
||||
icon="el-icon-delete"
|
||||
size="mini"
|
||||
:disabled="multiple"
|
||||
@click="handleDelete"
|
||||
>删除</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="warning"
|
||||
plain
|
||||
icon="el-icon-download"
|
||||
size="mini"
|
||||
@click="handleExport"
|
||||
>导出</el-button>
|
||||
</el-col>
|
||||
<right-toolbar :v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
|
||||
</el-row>
|
||||
|
||||
<el-table v-loading="loading" :data="bomItemList" @selection-change="handleSelectionChange">
|
||||
<el-table-column type="selection" width="55" align="center" />
|
||||
<el-table-column label="属性名称" align="center" prop="attrKey" />
|
||||
<el-table-column label="属性值" align="center" prop="attrValue" />
|
||||
<el-table-column label="备注" align="center" prop="remark" />
|
||||
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-edit"
|
||||
@click="handleUpdate(scope.row)"
|
||||
>修改</el-button>
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-delete"
|
||||
@click="handleDelete(scope.row)"
|
||||
>删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<pagination
|
||||
v-show="total>0"
|
||||
:total="total"
|
||||
:page.sync="queryParams.pageNum"
|
||||
:limit.sync="queryParams.pageSize"
|
||||
@pagination="getList"
|
||||
/>
|
||||
|
||||
<!-- 添加或修改BOM 明细，存放属性–值对话框 -->
|
||||
<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
|
||||
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
|
||||
<el-form-item label="属性名称" prop="attrKey">
|
||||
<el-input v-model="form.attrKey" placeholder="请输入属性名称" />
|
||||
</el-form-item>
|
||||
<el-form-item label="属性值" prop="attrValue">
|
||||
<el-input v-model="form.attrValue" placeholder="请输入属性值" />
|
||||
</el-form-item>
|
||||
<el-form-item label="备注" prop="remark">
|
||||
<el-input v-model="form.remark" placeholder="请输入备注" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button>
|
||||
<el-button @click="cancel">取 消</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { listBomItem, getBomItem, delBomItem, addBomItem, updateBomItem } from "@/api/oa/bomItem";
|
||||
|
||||
export default {
|
||||
name: "BomItem",
|
||||
props: {
|
||||
bomId: [String, Number],
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 按钮loading
|
||||
buttonLoading: false,
|
||||
// 遮罩层
|
||||
loading: true,
|
||||
// 选中数组
|
||||
ids: [],
|
||||
// 非单个禁用
|
||||
single: true,
|
||||
// 非多个禁用
|
||||
multiple: true,
|
||||
// 显示搜索条件
|
||||
showSearch: true,
|
||||
// 总条数
|
||||
total: 0,
|
||||
// BOM 明细，存放属性–值表格数据
|
||||
bomItemList: [],
|
||||
// 弹出层标题
|
||||
title: "",
|
||||
// 是否显示弹出层
|
||||
open: false,
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
bomId: this.bomId,
|
||||
attrKey: undefined,
|
||||
attrValue: undefined,
|
||||
isEnabled: undefined,
|
||||
},
|
||||
// 表单参数
|
||||
form: {
|
||||
bomId: this.bomId,
|
||||
},
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getList();
|
||||
},
|
||||
methods: {
|
||||
/** 查询BOM 明细，存放属性–值列表 */
|
||||
getList() {
|
||||
this.loading = true;
|
||||
listBomItem(this.queryParams).then(response => {
|
||||
this.bomItemList = response.rows;
|
||||
this.total = response.total;
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
// 取消按钮
|
||||
cancel() {
|
||||
this.open = false;
|
||||
this.reset();
|
||||
},
|
||||
// 表单重置
|
||||
reset() {
|
||||
this.form = {
|
||||
itemId: undefined,
|
||||
bomId: this.bomId,
|
||||
attrKey: undefined,
|
||||
attrValue: undefined,
|
||||
remark: undefined
|
||||
};
|
||||
this.resetForm("form");
|
||||
},
|
||||
/** 搜索按钮操作 */
|
||||
handleQuery() {
|
||||
this.queryParams.pageNum = 1;
|
||||
this.getList();
|
||||
},
|
||||
/** 重置按钮操作 */
|
||||
resetQuery() {
|
||||
this.resetForm("queryForm");
|
||||
this.handleQuery();
|
||||
},
|
||||
// 多选框选中数据
|
||||
handleSelectionChange(selection) {
|
||||
this.ids = selection.map(item => item.itemId)
|
||||
this.single = selection.length!==1
|
||||
this.multiple = !selection.length
|
||||
},
|
||||
/** 新增按钮操作 */
|
||||
handleAdd() {
|
||||
this.reset();
|
||||
this.open = true;
|
||||
this.title = "添加BOM 明细，存放属性–值";
|
||||
},
|
||||
/** 修改按钮操作 */
|
||||
handleUpdate(row) {
|
||||
this.loading = true;
|
||||
this.reset();
|
||||
const itemId = row.itemId || this.ids
|
||||
getBomItem(itemId).then(response => {
|
||||
this.loading = false;
|
||||
this.form = response.data;
|
||||
this.open = true;
|
||||
this.title = "修改BOM 明细，存放属性–值";
|
||||
});
|
||||
},
|
||||
/** 提交按钮 */
|
||||
submitForm() {
|
||||
this.$refs["form"].validate(valid => {
|
||||
if (valid) {
|
||||
this.buttonLoading = true;
|
||||
if (this.form.itemId != null) {
|
||||
updateBomItem(this.form).then(response => {
|
||||
this.$modal.msgSuccess("修改成功");
|
||||
this.open = false;
|
||||
this.getList();
|
||||
}).finally(() => {
|
||||
this.buttonLoading = false;
|
||||
});
|
||||
} else {
|
||||
addBomItem(this.form).then(response => {
|
||||
this.$modal.msgSuccess("新增成功");
|
||||
this.open = false;
|
||||
this.getList();
|
||||
}).finally(() => {
|
||||
this.buttonLoading = false;
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
/** 删除按钮操作 */
|
||||
handleDelete(row) {
|
||||
const itemIds = row.itemId || this.ids;
|
||||
this.$modal.confirm('是否确认删除BOM 明细，存放属性–值编号为"' + itemIds + '"的数据项？').then(() => {
|
||||
this.loading = true;
|
||||
return delBomItem(itemIds);
|
||||
}).then(() => {
|
||||
this.loading = false;
|
||||
this.getList();
|
||||
this.$modal.msgSuccess("删除成功");
|
||||
this.$store.dispatch('category/getBomMap');
|
||||
}).catch(() => {
|
||||
}).finally(() => {
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
/** 导出按钮操作 */
|
||||
handleExport() {
|
||||
this.download('wms/bomItem/export', {
|
||||
...this.queryParams
|
||||
}, `bomItem_${new Date().getTime()}.xlsx`)
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
236
gear-ui3/src/components/ProductSelect/BomPanel/index.vue
Normal file
236
gear-ui3/src/components/ProductSelect/BomPanel/index.vue
Normal file
@@ -0,0 +1,236 @@
|
||||
<template>
|
||||
<div class="bom-container">
|
||||
<!-- 当没有传入id时显示创建按钮 -->
|
||||
<div v-if="!id" class="create-bom">
|
||||
<el-button type="primary" :loading="createLoading" :disabled="createLoading" @click="handleCreate"
|
||||
class="create-button">
|
||||
<template v-if="!createLoading">
|
||||
<i class="el-icon-plus"></i> 创建BOM
|
||||
</template>
|
||||
<template v-else>
|
||||
创建中...
|
||||
</template>
|
||||
</el-button>
|
||||
</div>
|
||||
|
||||
<!-- 当传入id时显示数据区域 -->
|
||||
<div v-else class="bom-details">
|
||||
<div v-if="loading" class="loading-indicator">
|
||||
加载中...
|
||||
<div class="spinner"></div>
|
||||
</div>
|
||||
|
||||
<div v-if="error" class="error-message">
|
||||
加载失败: {{ error }}
|
||||
<button @click="fetchData" class="retry-button">重试</button>
|
||||
</div>
|
||||
|
||||
<div v-if="data && !loading">
|
||||
<el-form label-width="100px">
|
||||
<el-form-item label="BOM名称">
|
||||
<el-input v-model="info.bomName" @blur="handleUpdateBom" />
|
||||
</el-form-item>
|
||||
<el-form-item label="BOM编码">
|
||||
<el-input v-model="info.bomCode" @blur="handleUpdateBom" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<BomItem :bomId="id" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { addBom, updateBom, getBom } from '@/api/oa/bom';
|
||||
import { listBomItem } from '@/api/oa/bomItem';
|
||||
import { updateProduct } from '@/api/oa/product';
|
||||
|
||||
import BomItem from './BomItem.vue';
|
||||
|
||||
export default {
|
||||
props: {
|
||||
id: [String, Number], // 支持字符串或数字类型的ID
|
||||
itemId: [String, Number],
|
||||
type: String // 可选类型参数
|
||||
},
|
||||
components: {
|
||||
BomItem
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
loading: false,
|
||||
error: null,
|
||||
data: null,
|
||||
info: {},
|
||||
createLoading: false,
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
id: {
|
||||
immediate: true, // 组件创建时立即执行
|
||||
handler(newVal) {
|
||||
if (newVal) {
|
||||
console.log('侦听到变化')
|
||||
this.fetchBomDetails();
|
||||
} else {
|
||||
// 没有ID时重置数据
|
||||
this.data = null;
|
||||
this.error = null;
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async fetchBomDetails() {
|
||||
try {
|
||||
this.loading = true;
|
||||
this.error = null;
|
||||
|
||||
// 实际项目中替换为真实API调用
|
||||
const response = await listBomItem({
|
||||
bomId: this.id
|
||||
})
|
||||
this.data = response.rows;
|
||||
|
||||
const response2 = await getBom(this.id)
|
||||
this.info = response2.data;
|
||||
} catch (err) {
|
||||
this.error = err.message || '请求失败，请重试';
|
||||
console.error('获取BOM详情失败:', err);
|
||||
} finally {
|
||||
this.loading = false;
|
||||
}
|
||||
},
|
||||
|
||||
async handleCreate() {
|
||||
// 防止重复点击
|
||||
if (this.createLoading) return;
|
||||
|
||||
try {
|
||||
this.createLoading = true;
|
||||
// 添加一个semi类型
|
||||
const bomName = (this.type == 'product' ? '产品BOM' : (this.type == 'raw_material' ? '原材料BOM' : '半成品BOM')) + new Date().getTime();
|
||||
const bomCode = (this.type == 'product' ? 'P' : (this.type == 'raw_material' ? 'R' : 'S')) + new Date().getTime();
|
||||
const bomResponse = await addBom({
|
||||
bomName,
|
||||
bomCode
|
||||
});
|
||||
|
||||
this.$message.success('创建BOM成功');
|
||||
const bomData = bomResponse.data;
|
||||
|
||||
// 根据类型更新产品/原材料
|
||||
|
||||
await updateProduct({
|
||||
productId: this.itemId,
|
||||
bomId: bomData.bomId
|
||||
});
|
||||
this.$store.dispatch('category/getBomMap');
|
||||
|
||||
// 触发事件
|
||||
this.$emit('addBom', bomData);
|
||||
} catch (error) {
|
||||
console.error('创建失败:', error);
|
||||
this.$message.error(`创建失败: ${error.message || '未知错误'}`);
|
||||
} finally {
|
||||
this.createLoading = false;
|
||||
}
|
||||
},
|
||||
|
||||
handleUpdateBom() {
|
||||
this.$message.warning('正在更新BOM...');
|
||||
updateBom({
|
||||
bomId: this.id,
|
||||
bomName: this.info.bomName,
|
||||
bomCode: this.info.bomCode
|
||||
}).then(_ => {
|
||||
this.$message.success('更新BOM成功');
|
||||
this.$store.dispatch('category/getBomMap');
|
||||
})
|
||||
},
|
||||
|
||||
fetchData() {
|
||||
// 重试获取数据
|
||||
if (this.id) this.fetchBomDetails();
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.create-bom {
|
||||
text-align: center;
|
||||
padding: 40px 0;
|
||||
}
|
||||
|
||||
.create-button {
|
||||
background-color: #4CAF50;
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 12px 24px;
|
||||
font-size: 16px;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.3s;
|
||||
}
|
||||
|
||||
.create-button:hover {
|
||||
background-color: #388E3C;
|
||||
}
|
||||
|
||||
.loading-indicator {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 12px;
|
||||
padding: 20px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.spinner {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border: 3px solid rgba(0, 0, 0, 0.1);
|
||||
border-radius: 50%;
|
||||
border-top-color: #3498db;
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
.error-message {
|
||||
padding: 20px;
|
||||
background-color: #ffebee;
|
||||
color: #d32f2f;
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.retry-button {
|
||||
padding: 8px 16px;
|
||||
background-color: #f44336;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
width: 120px;
|
||||
}
|
||||
|
||||
.bom-info {
|
||||
margin-top: 20px;
|
||||
padding: 15px;
|
||||
background-color: #f9f9f9;
|
||||
border-radius: 4px;
|
||||
border-left: 4px solid #2196F3;
|
||||
}
|
||||
|
||||
.bom-info p {
|
||||
margin: 10px 0;
|
||||
}
|
||||
</style>
|
||||
196
gear-ui3/src/components/ProductSelect/index.vue
Normal file
196
gear-ui3/src/components/ProductSelect/index.vue
Normal file
@@ -0,0 +1,196 @@
|
||||
<template>
|
||||
<span>
|
||||
<el-select v-model="selected" :placeholder="placeholder" :disabled="disabled" filterable clearable
|
||||
@change="onChange" :value-key="'productId'">
|
||||
<template #empty>
|
||||
<el-button v-if="canAdd" @click="add" icon="el-icon-plus">未搜索到产品，点击添加</el-button>
|
||||
<div v-else style="padding: 10px;">未搜索到产品</div>
|
||||
</template>
|
||||
<el-option v-for="item in productOptions" :key="item.productId"
|
||||
:label="`${item.productName}（${item.productCode}）`" :value="item.productId">
|
||||
<div class="option-label">
|
||||
<span class="product-name">{{ item.productName }}</span>
|
||||
<span class="product-code">{{ item.productCode }}</span>
|
||||
</div>
|
||||
</el-option>
|
||||
</el-select>
|
||||
|
||||
<el-dialog v-if="canAdd" :visible.sync="addDialogVisible" title="添加产品" width="700px" append-to-body>
|
||||
<el-steps align-center :active="activeStep" finish-status="success">
|
||||
<!-- 新增产品的步骤 -->
|
||||
<el-step title="创建产品"></el-step>
|
||||
<!-- 创建BOM的步骤 -->
|
||||
<el-step title="填写BOM信息"></el-step>
|
||||
</el-steps>
|
||||
|
||||
<el-form ref="form" v-if="activeStep === 0" :model="addForm" :rules="rules" label-width="120px">
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="产品编号" prop="productCode">
|
||||
<el-input v-model="addForm.productCode" placeholder="请输入产品编号" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="产品名称" prop="productName">
|
||||
<el-input v-model="addForm.productName" placeholder="请输入产品名称" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="负责人" prop="owner">
|
||||
<el-input v-model="addForm.owner" :multiple="false" placeholder="请填写负责人" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="计量单位" prop="unit">
|
||||
<el-input v-model="addForm.unit" placeholder="请输入计量单位" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<div v-if="activeStep === 0" slot="footer" class="dialog-footer">
|
||||
<el-button :loading="buttonLoading" type="primary" @click="submitForm">创建产品</el-button>
|
||||
<el-button @click="cancel">取 消</el-button>
|
||||
</div>
|
||||
|
||||
<BomPanel v-if="activeStep === 1" :id="bomId" :itemId="itemId" :type="addForm.type" @addBom="handleBom" />
|
||||
</el-dialog>
|
||||
</span>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { listProduct, addProduct } from '@/api/oa/product';
|
||||
import BomPanel from './BomPanel/index.vue';
|
||||
|
||||
export default {
|
||||
name: 'ProductSelect',
|
||||
props: {
|
||||
value: [String, null],
|
||||
disabled: Boolean,
|
||||
placeholder: {
|
||||
type: String,
|
||||
default: '请选择产品'
|
||||
},
|
||||
canAdd: {
|
||||
default: false,
|
||||
type: Boolean
|
||||
},
|
||||
},
|
||||
components: {
|
||||
BomPanel
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
productOptions: [],
|
||||
selected: this.value,
|
||||
addForm: {
|
||||
productCode: undefined,
|
||||
productName: undefined,
|
||||
owner: undefined,
|
||||
unit: undefined,
|
||||
type: 'product'
|
||||
},
|
||||
addDialogVisible: false,
|
||||
rules: {
|
||||
productCode: [
|
||||
{ required: true, message: "产品编号不能为空", trigger: "blur" }
|
||||
],
|
||||
productName: [
|
||||
{ required: true, message: "产品名称不能为空", trigger: "blur" }
|
||||
],
|
||||
owner: [
|
||||
{ required: true, message: "负责人不能为空", trigger: "blur" }
|
||||
],
|
||||
},
|
||||
buttonLoading: false,
|
||||
itemId: undefined,
|
||||
activeStep: 0,
|
||||
bomId: undefined,
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
value(val) {
|
||||
this.selected = val;
|
||||
},
|
||||
selected(val) {
|
||||
this.$emit('input', val);
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getProductOptions();
|
||||
},
|
||||
methods: {
|
||||
getProductOptions() {
|
||||
listProduct({ pageNum: 1, pageSize: 1000, type: 'product' }).then(res => {
|
||||
this.productOptions = res.rows || [];
|
||||
});
|
||||
},
|
||||
onChange(val) {
|
||||
// 通过val找到item
|
||||
const product = this.productOptions.find(p => p.productId === val);
|
||||
this.$emit('change', product);
|
||||
},
|
||||
add() {
|
||||
this.addDialogVisible = true;
|
||||
this.addForm = {
|
||||
productCode: undefined,
|
||||
productName: undefined,
|
||||
owner: undefined,
|
||||
unit: undefined,
|
||||
type: 'product'
|
||||
};
|
||||
this.bomId = undefined;
|
||||
this.itemId = undefined;
|
||||
},
|
||||
handleBom(bom) {
|
||||
this.bomId = bom.bomId;
|
||||
},
|
||||
submitForm() {
|
||||
this.$refs["form"].validate(valid => {
|
||||
if (valid) {
|
||||
this.buttonLoading = true;
|
||||
// console.log(this.addForm);
|
||||
addProduct(this.addForm).then(res => {
|
||||
this.$modal && this.$modal.msgSuccess("创建产品成功");
|
||||
this.getProductOptions();
|
||||
console.log(res);
|
||||
this.itemId = res.productId;
|
||||
this.$emit('input', res.productId);
|
||||
this.activeStep = 1;
|
||||
}).finally(() => {
|
||||
this.buttonLoading = false;
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
cancel() {
|
||||
this.addDialogVisible = false;
|
||||
this.addForm = {
|
||||
productCode: undefined,
|
||||
productName: undefined,
|
||||
owner: undefined,
|
||||
unit: undefined,
|
||||
type: 'product'
|
||||
};
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.option-label {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.product-name {
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.product-code {
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
margin-left: 10px;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user