工程量清单
This commit is contained in:
229
src/views/design/billofQuantities/index.vue
Normal file
229
src/views/design/billofQuantities/index.vue
Normal file
@ -0,0 +1,229 @@
|
||||
<template>
|
||||
<div class="billof-quantities">
|
||||
<!-- tabPosition="left" -->
|
||||
<el-tabs type="border-card" @tab-change="handleTabChange">
|
||||
<el-tab-pane v-for="item,index in work_order_type" :key="item.value" :label="item.label">
|
||||
<el-card shadow="hover">
|
||||
<el-form :model="state.queryForm" :inline="true">
|
||||
<el-form-item label="版本号" prop="versions">
|
||||
<el-select v-model="state.queryForm.versions" placeholder="选择版本号">
|
||||
<el-option v-for="item in state.options" :key="item.versions" :label="item.versions"
|
||||
:value="item.versions" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="表名" prop="sheet">
|
||||
<el-select v-model="state.queryForm.sheet" placeholder="选择表名" @change="handleChange">
|
||||
<el-option v-for="item in state.sheets" :key="item" :label="item" :value="item" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="openTable(true,index)">一键展开</el-button>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="openTable(false,index)">一键收起</el-button>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-upload ref="uploadRef" class="upload-demo" :http-request="importExcel"
|
||||
:show-file-list="false">
|
||||
<template #trigger>
|
||||
<el-button type="primary">上传excel</el-button>
|
||||
</template>
|
||||
</el-upload>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-card>
|
||||
<el-table :ref="(el) => tableRef[index] = el" :data="state.tableData" style="width: 100%; margin-bottom: 20px;height: calc(100vh - 305px);"
|
||||
row-key="id" border :default-expand-all="state.isOpen">
|
||||
<el-table-column prop="num" label="编号" />
|
||||
<el-table-column prop="name" label="工程或费用名称" />
|
||||
<el-table-column prop="quantity" label="单位" />
|
||||
<el-table-column prop="remark" label="备注" />
|
||||
</el-table>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup name="billofQuantities">
|
||||
import { ref,reactive, onMounted, computed, toRefs, getCurrentInstance,nextTick } from 'vue'
|
||||
import { obtainAllVersionNumbers, importExcelFile, obtainTheList, sheetList } from "@/api/design/billofQuantities/index"
|
||||
import { useUserStoreHook } from '@/store/modules/user';
|
||||
const userStore = useUserStoreHook();
|
||||
const currentProject = computed(() => userStore.selectedProject);
|
||||
const { proxy } = getCurrentInstance();
|
||||
const { work_order_type } = toRefs(proxy?.useDict('work_order_type'));
|
||||
const tableRef = ref({})
|
||||
// tableData
|
||||
// 版本号
|
||||
const state = reactive({
|
||||
work_order_type: 0,
|
||||
// 版本号
|
||||
version_num: '',
|
||||
options: [],// 版本号选项
|
||||
sheets: [], // sheet选项
|
||||
queryForm: {
|
||||
projectId: currentProject.value?.id,
|
||||
versions: '',
|
||||
sheet: '',
|
||||
pageSize: 20,
|
||||
pageNum: 1
|
||||
},
|
||||
loading: {
|
||||
versions: false,
|
||||
sheets: false,
|
||||
list: false
|
||||
},
|
||||
error: null,
|
||||
tableData: [],
|
||||
// 展开收起
|
||||
isOpen: false,
|
||||
})
|
||||
// tab切换
|
||||
const handleTabChange = tab => {
|
||||
state.tableData = [];
|
||||
state.options = [];
|
||||
state.sheets = [];
|
||||
state.queryForm.sheet = '';
|
||||
state.queryForm.versions = '';
|
||||
state.work_order_type = tab
|
||||
getVersionNums()
|
||||
}
|
||||
onMounted(() => {
|
||||
getVersionNums();
|
||||
})
|
||||
// 获取版本号
|
||||
async function getVersionNums() {
|
||||
try {
|
||||
state.loading.versions = true;
|
||||
state.error = null;
|
||||
|
||||
const res = await obtainAllVersionNumbers({
|
||||
workOrderType: state.work_order_type,
|
||||
pageSize: 1000,
|
||||
pageNum: 1,
|
||||
});
|
||||
|
||||
const { code, rows } = res || {};
|
||||
if (code === 200) {
|
||||
state.options = rows || [];
|
||||
if (state.options.length > 0) {
|
||||
state.queryForm.versions = state.options[0].versions;
|
||||
// 等待表名加载完成
|
||||
await handleSheetName();
|
||||
}
|
||||
} else {
|
||||
state.error = `获取版本号失败: 错误码 ${code}`;
|
||||
console.error(state.error);
|
||||
}
|
||||
} catch (err) {
|
||||
state.error = `获取版本号时发生错误: ${err.message}`;
|
||||
console.error(state.error, err);
|
||||
} finally {
|
||||
state.loading.versions = false;
|
||||
}
|
||||
}
|
||||
|
||||
// 获取表名
|
||||
async function handleSheetName() {
|
||||
if (!state.queryForm.versions) {
|
||||
console.warn('版本号不存在，无法获取表名');
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
state.loading.sheets = true;
|
||||
state.error = null;
|
||||
|
||||
const { data } = await sheetList({
|
||||
workOrderType: state.work_order_type,
|
||||
versions: state.queryForm.versions
|
||||
});
|
||||
|
||||
state.sheets = data || [];
|
||||
if (state.sheets.length > 0) {
|
||||
state.queryForm.sheet = state.sheets[0];
|
||||
}
|
||||
|
||||
// 获取列表数据
|
||||
await handleQueryList();
|
||||
} catch (err) {
|
||||
state.error = `获取表名时发生错误: ${err.message}`;
|
||||
console.error(state.error, err);
|
||||
} finally {
|
||||
state.loading.sheets = false;
|
||||
}
|
||||
}
|
||||
|
||||
// 获取列表
|
||||
async function handleQueryList() {
|
||||
if (!state.queryForm.sheet) {
|
||||
console.warn('表名不存在，无法获取列表数据');
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
state.loading.list = true;
|
||||
state.error = null;
|
||||
|
||||
const result = await obtainTheList(state.queryForm);
|
||||
|
||||
if (result?.code === 200) {
|
||||
state.tableData = result.data || [];
|
||||
} else {
|
||||
state.error = `获取列表数据失败: 错误码 ${result?.code}`;
|
||||
console.error(state.error);
|
||||
}
|
||||
} catch (err) {
|
||||
state.error = `获取列表数据时发生错误: ${err.message}`;
|
||||
console.error(state.error, err);
|
||||
} finally {
|
||||
state.loading.list = false;
|
||||
}
|
||||
}
|
||||
// 上传excel
|
||||
function importExcel(options) {
|
||||
console.log(options);
|
||||
let formData = new FormData();
|
||||
formData.append("file", options.file);
|
||||
importExcelFile({ workOrderType: state.work_order_type, projectId: currentProject.value?.id }, formData).then(res => {
|
||||
const { code } = res;
|
||||
if (code == 200) {
|
||||
proxy.$modal.msgSuccess(res.msg || '导入成功');
|
||||
// 更新列表
|
||||
getVersionNums()
|
||||
} else {
|
||||
proxy.$modal.msgError(res.msg || '导入失败');
|
||||
}
|
||||
})
|
||||
}
|
||||
// 切换表名
|
||||
function handleChange(sheet) {
|
||||
state.queryForm.sheet = sheet;
|
||||
handleQueryList();
|
||||
}
|
||||
|
||||
// 在 openTable 方法中通过索引获取对应的表格实例
|
||||
function openTable(flag, index) {
|
||||
nextTick(() => {
|
||||
// 通过索引获取当前标签页的表格实例
|
||||
const currentTable = tableRef.value[index]
|
||||
if (currentTable) {
|
||||
handleArr(state.tableData, flag, currentTable);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function handleArr(arr, flag, table) {
|
||||
arr.forEach((i) => {
|
||||
table.toggleRowExpansion(i, flag);
|
||||
if (i.children) {
|
||||
handleArr(i.children, flag, table);
|
||||
}
|
||||
});
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.billof-quantities{
|
||||
padding: 20px;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user