工程量清单

.env.development

@@ -5,7 +5,7 @@ VITE_APP_TITLE = 新能源项目管理平台
 VITE_APP_ENV = 'development'
 
 # 开发环境
-VITE_APP_BASE_API = 'http://192.168.110.180:8898'
+VITE_APP_BASE_API = 'http://192.168.110.159:8898'
 
 # 无人机接口地址
 

src/api/design/billofQuantities/index.ts

@@ -0,0 +1,61 @@
+import request from '@/utils/request';
+import { AxiosPromise } from 'axios';
+/**
+ * 获取所有版本号
+ * @param query
+ * @returns {*}
+ */
+
+export const obtainAllVersionNumbers = (query:any): AxiosPromise => {
+  return request({
+    url: '/design/billofquantitiesVersions/obtainAllVersionNumbers',
+    method: 'get',
+    params: query
+  });
+};
+
+/**
+ * 导入excel
+ * @param data
+ * @returns {*}
+ */
+
+export const importExcelFile = (params:any,data:any): AxiosPromise => {
+  return request({
+    url: '/design/billofquantitiesVersions/importExcelFile',
+    method: 'post',
+    params,
+    data
+  });
+};
+
+
+// 
+/**
+ * 获取指定版本的sheet
+ * @param query
+ * @returns {*}
+ */
+
+export const obtainTheList = (query:any): AxiosPromise => {
+  return request({
+    url: '/design/billofquantitiesVersions/obtainTheList',
+    method: 'get',
+    params: query
+  });
+};
+
+
+/**
+ * 获取指定版本的sheet
+ * @param query
+ * @returns {*}
+ */
+
+export const sheetList = (query:any): AxiosPromise => {
+  return request({
+    url: '/design/billofquantitiesVersions/sheetList',
+    method: 'get',
+    params: query
+  });
+};

src/views/design/billofQuantities/index.vue

@@ -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>