优化
This commit is contained in:
@ -58,11 +58,13 @@
|
||||
</el-card>
|
||||
</transition>
|
||||
<el-card shadow="never" class="mb8">
|
||||
<el-table ref="tableRef" v-loading="loading" :data="tableData" row-key="id" border lazy default-expand-all>
|
||||
<el-table ref="tableAllRef" v-loading="loading" :data="tableData" row-key="id" border lazy :expand-row-keys="expandRowKeys">
|
||||
<el-table-column prop="num" label="编号" />
|
||||
<el-table-column prop="name" label="工程或费用名称" />
|
||||
<el-table-column prop="unit" label="单位" />
|
||||
<el-table-column prop="quantity" label="数量">
|
||||
<el-table-column prop="unit" label="单位" align="center" />
|
||||
<el-table-column prop="taxRate" label="税率" align="center" />
|
||||
<el-table-column prop="specification" label="规格" align="center" />
|
||||
<el-table-column prop="quantity" label="数量" align="center">
|
||||
<template #default="scope">
|
||||
{{ scope.row.children.length > 0 ? '' : scope.row.quantity }}
|
||||
</template>
|
||||
@ -111,64 +113,141 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, watch, onMounted, onUnmounted } from 'vue';
|
||||
import { getCurrentInstance, ComponentInternalInstance } from 'vue';
|
||||
import { ElMessage } from 'element-plus';
|
||||
import { useUserStoreHook } from '@/store/modules/user';
|
||||
import { obtainAllVersionNumbers, sheetList, getTableList, updatePrice, importExcelFile } from '@/api/tender/index';
|
||||
|
||||
// 类型定义
|
||||
interface QueryForm {
|
||||
versions: string;
|
||||
sheet: string;
|
||||
}
|
||||
|
||||
interface TableRow {
|
||||
id: string | number;
|
||||
num?: string;
|
||||
name?: string;
|
||||
unit?: string;
|
||||
taxRate?: string | number;
|
||||
specification?: string;
|
||||
quantity?: number;
|
||||
unitPrice?: number;
|
||||
price?: number;
|
||||
remark?: string;
|
||||
children?: TableRow[];
|
||||
}
|
||||
|
||||
interface VersionItem {
|
||||
versions: string;
|
||||
status: string;
|
||||
id?: string | number;
|
||||
[key: string]: any;
|
||||
}
|
||||
|
||||
// 实例与状态初始化
|
||||
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
|
||||
const userStore = useUserStoreHook();
|
||||
const currentProject = computed(() => userStore.selectedProject);
|
||||
|
||||
// 标签页配置
|
||||
const tabList = [
|
||||
{
|
||||
label: '招采工程量清单',
|
||||
value: '2'
|
||||
},
|
||||
{
|
||||
label: '物资设备清单',
|
||||
value: '3'
|
||||
}
|
||||
{ label: '招采工程量清单', value: '2' },
|
||||
{ label: '物资设备清单', value: '3' }
|
||||
];
|
||||
const queryForm = ref({
|
||||
versions: '',
|
||||
sheet: ''
|
||||
});
|
||||
|
||||
const versionsData = ref<any>({});
|
||||
|
||||
// 响应式状态
|
||||
const queryForm = ref<QueryForm>({ versions: '', sheet: '' });
|
||||
const versionsData = ref<VersionItem>({});
|
||||
const activeTab = ref('2');
|
||||
const sheets = ref([]);
|
||||
const options = ref([]);
|
||||
const tableData = ref([]);
|
||||
const tableRef = ref();
|
||||
const sheets = ref<string[]>([]);
|
||||
const options = ref<VersionItem[]>([]);
|
||||
const tableData = ref<TableRow[]>([]);
|
||||
const tableAllRef = ref<any>(null);
|
||||
const uploadRef = ref<any>(null);
|
||||
const isExpandAll = ref(true);
|
||||
const loading = ref(false);
|
||||
const versionMap = new Map();
|
||||
const versionMap = new Map<string, VersionItem>();
|
||||
const expandRowKeys = ref<string[] | number[]>([]); // 控制表格展开的行ID
|
||||
const modifyPrice = new Map<string | number, TableRow>();
|
||||
|
||||
// 切换tab
|
||||
// 切换标签页
|
||||
const handleTabChange = (tab: string) => {
|
||||
activeTab.value = tab;
|
||||
tableData.value = [];
|
||||
versionsData.value = {};
|
||||
isExpandAll.value = true;
|
||||
expandRowKeys.value = [];
|
||||
getVersionNums();
|
||||
};
|
||||
//切换版本
|
||||
const changeVersions = (value) => {
|
||||
versionsData.value = options.value.find((item) => item.versions == value);
|
||||
|
||||
// 切换版本号
|
||||
const changeVersions = (value: string) => {
|
||||
versionsData.value = options.value.find((item) => item.versions === value) || {};
|
||||
getSheetName();
|
||||
};
|
||||
//切换表格
|
||||
const changeSheet = (val: any) => {
|
||||
|
||||
// 切换表名
|
||||
const changeSheet = (val: string) => {
|
||||
getTableData();
|
||||
};
|
||||
//展开树
|
||||
const toggleExpandAll = () => {
|
||||
|
||||
// 一键展开/收起
|
||||
const toggleExpandAll = async () => {
|
||||
isExpandAll.value = !isExpandAll.value;
|
||||
console.log(isExpandAll.value);
|
||||
tableData.value.forEach((row) => {
|
||||
tableRef.value.toggleRowExpansion(row, isExpandAll.value);
|
||||
if (!tableData.value.length || !tableAllRef.value) return;
|
||||
|
||||
if (isExpandAll.value) {
|
||||
// 收集所有已加载节点的ID
|
||||
const allExpandIds = collectAllNodeIds(tableData.value);
|
||||
expandRowKeys.value = allExpandIds;
|
||||
|
||||
// 处理懒加载节点
|
||||
await loadAndExpandAllLazyNodes();
|
||||
} else {
|
||||
// 全部收起
|
||||
expandRowKeys.value = [];
|
||||
}
|
||||
};
|
||||
// 辅助函数：递归收集所有节点ID（包括子节点）
|
||||
const collectAllNodeIds = (nodes: TableRow[]): (string | number)[] => {
|
||||
let ids: (string | number)[] = [];
|
||||
nodes.forEach((node) => {
|
||||
ids.push(node.id);
|
||||
if (node.children && node.children.length > 0) {
|
||||
ids = [...ids, ...collectAllNodeIds(node.children)];
|
||||
}
|
||||
});
|
||||
return ids;
|
||||
};
|
||||
|
||||
//获取版本号
|
||||
// 辅助函数：加载并展开所有懒加载子节点
|
||||
const loadAndExpandAllLazyNodes = async () => {
|
||||
if (!tableAllRef.value) return;
|
||||
try {
|
||||
// 获取所有可能有子节点的父节点
|
||||
const parentNodes = tableData.value.filter((node) => node.hasChildren || (node.children && node.children.length === 0));
|
||||
if (!parentNodes.length) return;
|
||||
|
||||
// 逐个加载并展开子节点
|
||||
for (const parent of parentNodes) {
|
||||
if (tableAllRef.value.loadOrToggleRow) {
|
||||
await tableAllRef.value.loadOrToggleRow(parent);
|
||||
}
|
||||
await nextTick();
|
||||
// 递归展开子节点的子节点
|
||||
if (parent.children && parent.children.length > 0) {
|
||||
const childIds = collectAllNodeIds(parent.children);
|
||||
expandRowKeys.value = [...new Set([...expandRowKeys.value, ...childIds])];
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('加载并展开懒加载节点失败：', error);
|
||||
} finally {
|
||||
}
|
||||
};
|
||||
// 获取版本号列表
|
||||
const getVersionNums = async () => {
|
||||
try {
|
||||
const params = {
|
||||
@ -179,93 +258,126 @@ const getVersionNums = async () => {
|
||||
};
|
||||
|
||||
const res = await obtainAllVersionNumbers(params);
|
||||
if (res.code == 200) {
|
||||
if (res.code === 200) {
|
||||
options.value = res.data;
|
||||
if (res.data.length > 0) {
|
||||
res.data.forEach((item: any) => {
|
||||
versionMap.set(item.versions, item);
|
||||
});
|
||||
queryForm.value.versions = res.data[0].versions;
|
||||
versionsData.value = options.value.find((item) => item.versions == queryForm.value.versions);
|
||||
versionMap.clear();
|
||||
options.value.forEach((item) => versionMap.set(item.versions, item));
|
||||
|
||||
if (options.value.length > 0) {
|
||||
queryForm.value.versions = options.value[0].versions;
|
||||
versionsData.value = options.value[0];
|
||||
getSheetName();
|
||||
} else {
|
||||
queryForm.value.versions = '';
|
||||
// getSheetName();
|
||||
sheets.value = [];
|
||||
tableData.value = [];
|
||||
expandRowKeys.value = [];
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
console.error('获取版本号失败：', error);
|
||||
ElMessage.error('获取版本号失败，请刷新重试');
|
||||
}
|
||||
};
|
||||
//获取表名
|
||||
|
||||
// 获取表名列表
|
||||
const getSheetName = async () => {
|
||||
try {
|
||||
const params = {
|
||||
projectId: currentProject.value?.id,
|
||||
versions: queryForm.value.versions
|
||||
};
|
||||
|
||||
const res = await sheetList(params);
|
||||
if (res.code == 200) {
|
||||
if (res.code === 200) {
|
||||
sheets.value = res.data;
|
||||
if (res.data.length > 0) {
|
||||
queryForm.value.sheet = res.data[0];
|
||||
if (sheets.value.length > 0) {
|
||||
queryForm.value.sheet = sheets.value[0];
|
||||
} else {
|
||||
queryForm.value.sheet = '';
|
||||
tableData.value = [];
|
||||
expandRowKeys.value = [];
|
||||
}
|
||||
getTableData();
|
||||
}
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
console.error('获取表名失败：', error);
|
||||
ElMessage.error('获取表名失败，请刷新重试');
|
||||
}
|
||||
};
|
||||
//获取表格数据
|
||||
|
||||
// 获取表格数据
|
||||
const getTableData = async () => {
|
||||
try {
|
||||
loading.value = true;
|
||||
|
||||
const params = {
|
||||
projectId: currentProject.value?.id,
|
||||
versions: queryForm.value.versions,
|
||||
sheet: queryForm.value.sheet,
|
||||
type: activeTab.value
|
||||
};
|
||||
|
||||
const res = await getTableList(params);
|
||||
if (res.code == 200) {
|
||||
if (res.code === 200) {
|
||||
tableData.value = res.data;
|
||||
if (isExpandAll.value) {
|
||||
// 展开全部
|
||||
isExpandAll.value = false;
|
||||
toggleExpandAll();
|
||||
}
|
||||
modifyPrice.clear();
|
||||
}
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
console.error('获取表格数据失败：', error);
|
||||
ElMessage.error('获取表格数据失败，请刷新重试');
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
};
|
||||
//导入
|
||||
const importExcel = (options: any): any => {
|
||||
let formData = new FormData();
|
||||
|
||||
// 导入Excel
|
||||
const importExcel = (options: any): void => {
|
||||
if (!queryForm.value.versions || (activeTab.value !== '3' && !queryForm.value.sheet)) {
|
||||
ElMessage.warning('请先选择版本号和表名（物资设备清单无需选择表名）');
|
||||
return;
|
||||
}
|
||||
|
||||
const formData = new FormData();
|
||||
formData.append('file', options.file);
|
||||
loading.value = true;
|
||||
|
||||
importExcelFile(
|
||||
{ projectId: currentProject.value?.id, sheet: queryForm.value.sheet, versions: queryForm.value.versions, type: activeTab.value },
|
||||
{
|
||||
projectId: currentProject.value?.id,
|
||||
sheet: queryForm.value.sheet,
|
||||
versions: queryForm.value.versions,
|
||||
type: activeTab.value
|
||||
},
|
||||
formData
|
||||
)
|
||||
.then((res) => {
|
||||
const { code } = res;
|
||||
if (code == 200) {
|
||||
proxy.$modal.msgSuccess(res.msg || '导入成功');
|
||||
if (res.code === 200) {
|
||||
proxy?.$modal.msgSuccess(res.msg || '导入成功');
|
||||
getTableData();
|
||||
} else {
|
||||
proxy.$modal.msgError(res.msg || '导入失败');
|
||||
proxy?.$modal.msgError(res.msg || '导入失败');
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
proxy.$modal.msgError(err.msg || '导入失败');
|
||||
proxy?.$modal.msgError(err.msg || '导入失败');
|
||||
})
|
||||
.finally(() => {
|
||||
loading.value = false;
|
||||
});
|
||||
};
|
||||
//导出
|
||||
|
||||
// 导出Excel
|
||||
const handleExport = () => {
|
||||
if (!queryForm.value.versions || (activeTab.value !== '3' && !queryForm.value.sheet)) {
|
||||
ElMessage.warning('请先选择版本号和表名（物资设备清单无需选择表名）');
|
||||
return;
|
||||
}
|
||||
|
||||
proxy?.download(
|
||||
'/tender/tenderPlanLimitList/export',
|
||||
{
|
||||
@ -274,90 +386,108 @@ const handleExport = () => {
|
||||
versions: queryForm.value.versions,
|
||||
type: activeTab.value
|
||||
},
|
||||
`招标一览表${queryForm.value.sheet}.xlsx`
|
||||
`招标一览_${queryForm.value.sheet || (activeTab.value === '3' ? '物资设备清单' : '')}_v${queryForm.value.versions}.xlsx`
|
||||
);
|
||||
};
|
||||
const modifyPrice = new Map();
|
||||
|
||||
const changePrice = (row: any) => {
|
||||
modifyPrice.set(row.id, row);
|
||||
// if (!row.unitPrice) {
|
||||
// modifyPrice.delete(row.id);
|
||||
// }
|
||||
};
|
||||
//修改单价
|
||||
const handleSave = (row?: any, type?: any) => {
|
||||
try {
|
||||
if (type == 'single') {
|
||||
loading.value = true;
|
||||
const list = [{ ...row, type: activeTab.value }];
|
||||
updatePrice(list).then((res) => {
|
||||
if (res.code == 200) {
|
||||
ElMessage({
|
||||
message: '修改成功',
|
||||
type: 'success'
|
||||
});
|
||||
getTableData();
|
||||
}
|
||||
});
|
||||
}
|
||||
if (type == 'all') {
|
||||
loading.value = true;
|
||||
const list = [];
|
||||
modifyPrice.forEach((item) => {
|
||||
list.push({ ...item, type: activeTab.value });
|
||||
});
|
||||
updatePrice(list).then((res) => {
|
||||
if (res.code == 200) {
|
||||
ElMessage({
|
||||
message: '修改成功',
|
||||
type: 'success'
|
||||
});
|
||||
getTableData();
|
||||
}
|
||||
});
|
||||
}
|
||||
} catch (error) {
|
||||
ElMessage({
|
||||
message: '修改失败',
|
||||
type: 'error'
|
||||
});
|
||||
} finally {
|
||||
loading.value = false;
|
||||
// 记录待修改价格的行
|
||||
const changePrice = (row: TableRow) => {
|
||||
if (row.id && row.unitPrice !== undefined) {
|
||||
modifyPrice.set(row.id, row);
|
||||
} else if (row.id) {
|
||||
modifyPrice.delete(row.id);
|
||||
}
|
||||
};
|
||||
|
||||
/** 审核按钮操作 */
|
||||
const handleAudit = async () => {
|
||||
let id = versionMap.get(queryForm.value.versions).id;
|
||||
console.log(id);
|
||||
if (activeTab.value == '2') {
|
||||
// 保存价格修改
|
||||
const handleSave = (row?: TableRow, type?: 'single' | 'all') => {
|
||||
if (versionsData.value.status !== 'draft') {
|
||||
ElMessage.warning('仅草稿状态可修改单价');
|
||||
return;
|
||||
}
|
||||
|
||||
let updateList: TableRow[] = [];
|
||||
if (type === 'single' && row?.id) {
|
||||
updateList = [{ ...row, type: activeTab.value }];
|
||||
} else if (type === 'all') {
|
||||
updateList = Array.from(modifyPrice.values()).map((item) => ({ ...item, type: activeTab.value }));
|
||||
if (updateList.length === 0) {
|
||||
ElMessage.warning('暂无待修改的单价数据');
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
loading.value = true;
|
||||
updatePrice(updateList)
|
||||
.then((res) => {
|
||||
if (res.code === 200) {
|
||||
ElMessage.success('修改成功');
|
||||
getTableData();
|
||||
modifyPrice.clear();
|
||||
} else {
|
||||
ElMessage.error(res.msg || '修改失败');
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
ElMessage.error(err.msg || '修改失败');
|
||||
})
|
||||
.finally(() => {
|
||||
loading.value = false;
|
||||
});
|
||||
};
|
||||
|
||||
// 审核/查看流程
|
||||
const handleAudit = () => {
|
||||
const versionItem = versionMap.get(queryForm.value.versions);
|
||||
if (!versionItem?.id) {
|
||||
ElMessage.warning('请先选择有效的版本号');
|
||||
return;
|
||||
}
|
||||
|
||||
if (activeTab.value === '2') {
|
||||
proxy?.$tab.openPage('/approval/tenderBidd/indexEdit', '招采工程量清单审核', {
|
||||
id: id,
|
||||
id: versionItem.id,
|
||||
type: 'update'
|
||||
});
|
||||
}
|
||||
if (activeTab.value == '3') {
|
||||
} else if (activeTab.value === '3') {
|
||||
proxy?.$tab.openPage('/approval/tenderBidd/indexEdit2', '物资设备清单审核', {
|
||||
id: id,
|
||||
id: versionItem.id,
|
||||
type: 'update'
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
//监听项目id刷新数据
|
||||
// 监听项目切换
|
||||
const listeningProject = watch(
|
||||
() => currentProject.value?.id,
|
||||
(nid, oid) => {
|
||||
getVersionNums();
|
||||
(newId, oldId) => {
|
||||
if (newId && newId !== oldId) {
|
||||
getVersionNums();
|
||||
} else {
|
||||
tableData.value = [];
|
||||
options.value = [];
|
||||
sheets.value = [];
|
||||
queryForm.value = { versions: '', sheet: '' };
|
||||
versionsData.value = {};
|
||||
expandRowKeys.value = [];
|
||||
versionMap.clear();
|
||||
modifyPrice.clear();
|
||||
}
|
||||
}
|
||||
);
|
||||
onUnmounted(() => {
|
||||
listeningProject();
|
||||
});
|
||||
|
||||
// 生命周期钩子
|
||||
onMounted(() => {
|
||||
getVersionNums();
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
listeningProject();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss"></style>
|
||||
<style scoped lang="scss">
|
||||
.mb8 {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user