vue3+ts+element-plus 開發一個頁面模塊的詳細過程

目錄、文件名均使用kebab-case（短橫線分隔式）命名規范

子組件目錄：./progress-ctrl/comps

1、新建頁面文件 progress-ctrl.vue

<script setup lang="ts" name="progress-ctrl"></script><template></template><style scoped lang="scss"></style>

運行效果：?

2、頁面布局

<script setup lang="ts" name="progress-ctrl"></script><template><el-container class="layout-container"><el-aside class="aside"><!-- 左側受理類別節點樹 -->受理類別節點樹</el-aside><el-container class="container"><el-header class="header"><!-- 查詢欄 -->查詢欄</el-header><el-main class="main"><!-- main -->主項數據區域</el-main><el-footer class="footer"><!-- 選項卡 -->選項卡<!-- 分頁 -->分頁</el-footer></el-container></el-container>
</template><style scoped lang="scss">
* {margin: 0;padding: 0;
}
.layout-container {height: 100%;border: 1px solid #ddd;.aside {width: 150px;}.container {border-left: 1px solid #ddd;.header {height: auto;min-height: 40px;border-bottom: 1px solid #ddd;}.main {min-height: 100px;}.footer {height: auto;min-height: 40px;border-top: 1px solid #ddd;}}
}
</style>

運行效果：

3、新建子組件

3.1、子組件-左側樹

./progress-ctrl/comps/progress-ctrl-tree.vue

<script setup lang="ts" name="progress-ctrl-tree"></script><template><div class="tree"><el-scrollbar><el-tree:default-expand-all="true":highlight-current="true":expand-on-click-node="false":indent="0"></el-tree></el-scrollbar></div>
</template><style scoped lang="scss"></style>

3.2、子組件-查詢欄

./progress-ctrl/comps/progress-ctrl-search.vue

<script setup lang="ts" name="progress-ctrl-search"></script><template><div class="search"><el-form class="header-form" :inline="true" :label-width="90"><el-form-item class="header-form-item-330" label="受理編號："><el-input clearable /></el-form-item><el-form-item class="header-form-item-auto"><el-button class="btn-same-width" type="primary" plain @click="">查詢</el-button><el-button class="btn-same-width" type="primary" plain @click="">重置</el-button><el-button class="btn-same-width" type="primary" plain @click="">更多篩選</el-button></el-form-item></el-form><el-form class="header-form" :inline="true" :label-width="90" v-show=""><el-form-item class="header-form-item-330" label="受理日期："><el-date-pickertype="daterange"start-placeholder="開始日期"range-separator="至"end-placeholder="結束日期"format="YYYY-MM-DD"value-format="YYYY-MM-DD"></el-date-picker></el-form-item><el-form-item class="header-form-item-330" label="受檢單位："><el-input clearable /></el-form-item></el-form></div>
</template><style scoped lang="scss"></style>

3.3、子組件-主項數據

./progress-ctrl/comps/progress-ctrl-main.vue

<script setup lang="ts" name="progress-ctrl-main"></script><template><div class="main"><el-tableref="table":border="true"highlight-current-rowstyle="width: 100%; height: 100%"><el-table-columnprop="outerApplyId"label="受理編號"width="120"fixed="left"header-align="center"sortableshow-overflow-tooltip /><el-table-columnprop="stateDescription"label="狀態"width="150"fixed="left"header-align="center"sortableshow-overflow-tooltip /><el-table-columnprop="acceptDate"label="受理日期"width="110"header-align="center":align="`center`"sortableshow-overflow-tooltip /><el-table-columnprop="reportDate"label="報告限期"width="110"header-align="center":align="`center`"sortableshow-overflow-tooltip /><el-table-columnprop="verifyTypeName"label="檢驗類別"width="120"header-align="center"sortableshow-overflow-tooltip /><el-table-columnprop="acceptTypeName"label="受理類別"width="150"header-align="center"sortableshow-overflow-tooltip /><el-table-columnprop="acceptGroupName"label="受理組別"width="150"header-align="center"sortableshow-overflow-tooltip /><el-table-columnprop="sjdwName"label="受檢單位"width="300"header-align="center"sortableshow-overflow-tooltip /></el-table></div>
</template><style scoped lang="scss"></style>

3.4、子組件-選項卡

./progress-ctrl/comps/progress-ctrl-tabs.vue

<script setup lang="ts" name="progress-ctrl-tabs"></script><template><div class="tabs"><el-tabs type="border-card" @tab-click=""><el-tab-pane label="受理信息" name="apply"></el-tab-pane><el-tab-pane label="交接信息" name="jjd"></el-tab-pane><el-tab-pane label="檢測信息" name="test"></el-tab-pane><el-tab-pane label="報告信息" name="report"></el-tab-pane></el-tabs></div>
</template><style scoped lang="scss"></style>

3.5、子組件-分頁

./progress-ctrl/comps/progress-ctrl-pagination.vue?

<script setup lang="ts" name="progress-ctrl-pagination"></script><template><div class="pagination"><el-pagination:page-sizes="[5]"backgroundlayout="total, prev, pager, next":small="true" /></div>
</template><style scoped lang="scss"></style>

4、新建選項卡組件的子組件

4.1、孫組件-受理信息

./progress-ctrl/comps/progress-ctrl-tabs-apply.vue

<script setup lang="ts" name="progress-ctrl-tabs-apply"></script><template><div class="tabs-apply"><el-tableref="applyTable":border="true"highlight-current-rowstyle="width: 100%; height: 100%"><el-table-columnprop="applyId"label="子受理編號"width="120"fixed="left"header-align="center"sortableshow-overflow-tooltip /><el-table-columnprop="acceptDate"label="受理日期"width="110"header-align="center":align="`center`"show-overflow-tooltip /><el-table-columnprop="acceptSmallTypeName"label="受理小類"width="150"header-align="center"show-overflow-tooltip /><el-table-column prop="sampleKind" label="檢材類別" width="150" header-align="center" show-overflow-tooltip /><el-table-columnprop="keepCondition"label="描述信息"width="150"header-align="center"show-overflow-tooltip /><el-table-columnprop="acceptPersonName"label="受理人"width="100"header-align="center":align="`center`"show-overflow-tooltip /><el-table-columnprop="state"label="狀態"width="100"header-align="center":align="`center`"fixed="right"show-overflow-tooltip /></el-table></div>
</template><style scoped lang="scss"></style>

4.2、孫組件-交接信息

?./progress-ctrl/comps/progress-ctrl-tabs-jjd.vue

<script setup lang="ts" name="progress-ctrl-tabs-jjd"></script><template><div class="tabs-jjd"><el-tableref="jjdTable":border="true"highlight-current-rowstyle="width: 100%; height: 100%"><el-table-columnprop="blPersonName"label="派樣人"width="100"header-align="center":align="`center`"show-overflow-tooltip /><el-table-column prop="submitTime" label="派樣時間" width="200" header-align="center" show-overflow-tooltip /><el-table-columnprop="checkGroupName"label="檢驗組別"width="150"header-align="center":align="`center`"show-overflow-tooltip /><el-table-columnprop="receivePersonName"label="接樣人"width="100"header-align="center":align="`center`"show-overflow-tooltip /><el-table-columnprop="receiveTime"label="接樣時間"width="200"header-align="center"show-overflow-tooltip /><el-table-columnprop="deadlineTime"label="交接限期"width="110"header-align="center":align="`center`"show-overflow-tooltip /><el-table-columnprop="state"label="狀態"width="100"header-align="center":align="`center`"fixed="right"show-overflow-tooltip /></el-table></div>
</template><style scoped lang="scss"></style>

?4.3、孫組件-檢測信息

?./progress-ctrl/comps/progress-ctrl-tabs-test.vue

<script setup lang="ts" name="progress-ctrl-tabs-test"></script><template><div class="tabs-test"><el-tableref="sampleItemResultTable":border="true"highlight-current-rowstyle="width: 100%; height: 100%"><el-table-columnprop="sampleNo"label="樣品編號"width="120"header-align="center"fixedsortableshow-overflow-tooltip /><el-table-columnprop="sampleName"label="樣品名稱"width="150"header-align="center"fixedsortableshow-overflow-tooltip /><el-table-columnprop="itemName"label="檢驗項目"width="150"header-align="center"fixedsortableshow-overflow-tooltip /><el-table-columnprop="result"label="結果"width="120"header-align="center"sortableshow-overflow-tooltip /><el-table-columnprop="conclusion"label="結論"width="80"header-align="center"sortableshow-overflow-tooltip /><el-table-columnprop="state"label="狀態"width="100"header-align="center":align="`center`"sortableshow-overflow-tooltip /><el-table-columnprop="standardScript"label="標準值"width="120"header-align="center"sortableshow-overflow-tooltip /><el-table-column prop="unit" label="單位" width="100" header-align="center" sortable show-overflow-tooltip /><el-table-columnprop="ffbzId"label="檢測標準編號"width="200"header-align="center"sortableshow-overflow-tooltip /><el-table-columnprop="ffbzName"label="檢測標準名稱"width="300"header-align="center"sortableshow-overflow-tooltip /><el-table-columnprop="verifyMethod"label="檢驗方法"width="150"header-align="center"sortableshow-overflow-tooltip /><el-table-columnprop="person"label="檢驗員"width="100"header-align="center"sortableshow-overflow-tooltip /><el-table-columnprop="allotTime"label="分派時間"width="200"header-align="center"sortableshow-overflow-tooltip /><el-table-columnprop="submitTime"label="檢測時間"width="200"header-align="center"sortableshow-overflow-tooltip /><el-table-columnprop="deadlineDate"label="檢測限期"width="110"header-align="center":align="`center`"sortableshow-overflow-tooltip /></el-table></div>
</template><style scoped lang="scss"></style>

4.4、孫組件-報告信息

??./progress-ctrl/comps/progress-ctrl-tabs-report.vue

<script setup lang="ts" name="progress-ctrl-tabs-report"></script><template><div class="tabs-report"><el-tableref="reportTable":border="true"highlight-current-rowstyle="width: 100%; height: 100%"><el-table-columnprop="deptName"label="所屬部門"width="150"header-align="center"fixed="left"sortableshow-overflow-tooltip /><el-table-columnprop="type"label="類型"width="100"header-align="center":align="`center`"fixed="left"sortableshow-overflow-tooltip:formatter="(row: any) => { return row.type === 1 ? `檢驗報告` : `評價報告` }" /><el-table-columnprop="reportTypeName"label="報告類型"width="200"header-align="center"fixed="left"sortableshow-overflow-tooltip /><el-table-columnprop="hbPerson"label="編制人"width="100"header-align="center":align="`center`"show-overflow-tooltip /><el-table-columnprop="hbDate"label="編制日期"width="110"header-align="center":align="`center`"show-overflow-tooltip /><el-table-columnprop="hdPerson"label="核對人"width="100"header-align="center":align="`center`"show-overflow-tooltip /><el-table-columnprop="hdDate"label="核對日期"width="110"header-align="center":align="`center`"show-overflow-tooltip /><el-table-columnprop="hfPerson"label="簽發人"width="100"header-align="center":align="`center`"show-overflow-tooltip /><el-table-columnprop="hfDate"label="簽發日期"width="110"header-align="center":align="`center`"show-overflow-tooltip /><el-table-columnprop="reportDate"label="報告限期"width="110"header-align="center":align="`center`"show-overflow-tooltip /><el-table-columnprop="state"label="狀態"width="100"header-align="center":align="`center`"fixed="right"show-overflow-tooltip /></el-table></div>
</template><style scoped lang="scss"></style>

5、選項卡子組件導入使用子組件

<script setup lang="ts" name="progress-ctrl-tabs">
import ProgressCtrlTabsApply from './progress-ctrl-tabs-apply.vue';
import ProgressCtrlTabsJJD from './progress-ctrl-tabs-jjd.vue';
import ProgressCtrlTabsTest from './progress-ctrl-tabs-test.vue';
import ProgressCtrlTabsReport from './progress-ctrl-tabs-report.vue';</script><template><div class="tabs"><el-tabs type="border-card" @tab-click=""><el-tab-pane label="受理信息" name="apply"><ProgressCtrlTabsApply /></el-tab-pane><el-tab-pane label="交接信息" name="jjd"><ProgressCtrlTabsJJD /></el-tab-pane><el-tab-pane label="檢測信息" name="test"><ProgressCtrlTabsTest /></el-tab-pane><el-tab-pane label="報告信息" name="report"><ProgressCtrlTabsReport /></el-tab-pane></el-tabs></div>
</template><style scoped lang="scss"></style>

6、父組件導入使用子組件

<script setup lang="ts" name="progress-ctrl">
import ProgressCtrlTree from './progress-ctrl/comps/progress-ctrl-tree.vue';
import ProgressCtrlSearch from './progress-ctrl/comps/progress-ctrl-search.vue';
import ProgressCtrlMain from './progress-ctrl/comps/progress-ctrl-main.vue';
import ProgressCtrlTabs from './progress-ctrl/comps/progress-ctrl-tabs.vue';
import ProgressCtrlPagination from './progress-ctrl/comps/progress-ctrl-pagination.vue';</script><template><el-container class="layout-container"><el-aside class="aside"><!-- 左側受理類別節點樹 --><ProgressCtrlTree /></el-aside><el-container class="container"><el-header class="header"><!-- 查詢欄 --><ProgressCtrlSearch /></el-header><el-main class="main"><!-- main --><ProgressCtrlMain /></el-main><el-footer class="footer"><!-- 選項卡 --><ProgressCtrlTabs /><!-- 分頁 --><ProgressCtrlPagination /></el-footer></el-container></el-container>
</template><style scoped lang="scss">
* {margin: 0;padding: 0;
}
.layout-container {height: 100%;border: 1px solid #ddd;.aside {width: 150px;}.container {border-left: 1px solid #ddd;.header {height: auto;min-height: 40px;border-bottom: 1px solid #ddd;}.main {min-height: 100px;}.footer {height: auto;min-height: 40px;border-top: 1px solid #ddd;}}
}
</style>

運行效果：

7、數據模型業務邏輯處理

7.1、數據定義

import type { Component } from "vue";export interface ITree {// 樹節點的label，受理類別名稱label: string;// 樹節點的value，受理類別代碼value: string;// 樹節點的圖標icon?: Component;// 圖標顏色iconColor?: string;// 子節點children?: ITree[];
}// 分頁對象
interface IPage {// 當前頁碼page: number// 每頁顯示數量                   size: number                   
}// 查詢對象
export interface IQueryObj {// 分頁器pageHelper: IPage// 受理編號outerApplyId?: string  // 受檢單位        sjdwName?: string  // 受理類別            acceptType?: string  // 受理開始日期          acceptDateBegin?: string      // 受理結束日期 acceptDateEnd?: string         
}export interface IApplyBasicInfo {// 受理編號outerApplyId: string// 狀態stateDescription: string// 受理日期acceptDate: string// 報告限期reportDate: string// 檢驗類別verifyTypeName: string// 受理類別acceptTypeName: string// 受理組別acceptGroupName: string// 受檢單位sjdwName: string
}// 結構繼承使用 extends
// import type { Apply, JJD, SampleItemResult, ReportSimpleVO } from "@/interface";
// export interface IApply extends Apply {
// }
// export interface IJJD extends JJD {
// }
// export interface ITest extends SampleItemResult {
// }
// export interface IReport extends ReportSimpleVO {
// }

7.2、數據處理

import { defineStore } from "pinia";
import { ref } from "vue";
import { acceptTypeOptionsByUserNameService } from "@/api/selectOptions";
import type { IApplyBasicInfo, IQueryObj, ITree } from "../types";
import {applyBasicInfoSjkByQueryDTOService,applyBasicInfoYztByQueryDTOService,applyBasicInfoSjkAllService,applyBasicInfoSjkTodayService,applyBasicInfoSjk3DayService,applyBasicInfoSjkRecentService,applyBasicInfoSjkOverdueService
} from "@/api/applyBasicInfo";
// 使用 as 重命名導出的類型
import type { Apply as IApply, JJD as IJJD, SampleItemResult as ITest, ReportSimpleVO as IReport } from "@/interface";
import { applyDataByOuterApplyIdService } from "@/api/apply";
import { jjdDataByOuterApplyIdService } from "@/api/jjd";
// 使用 as 重命名導出的方法
import { sampleItemResultByOuterApplyIdService as testDataByOuterApplyIdService } from "@/api/sampleItemResult";
import { reportDataByOuterApplyIdService } from "@/api/report";const useProgressCtrlStore = defineStore("progressCtrl", () => {// 頁面實例數據// 受理類別列表數據const acceptTypeListData = ref<{ label: string; value: string }[]>([]);// 樹數據const treeData = ref<ITree[]>([]);// 受理列表數據const applyBasicInfoListData = ref<IApplyBasicInfo[]>([]);// 查詢對象const queryObj = ref<IQueryObj>({pageHelper: {page: 1,size: 5},acceptType: "",outerApplyId: "",sjdwName: "",acceptDateBegin: "",acceptDateEnd: ""});// 當前點擊選擇的樹節點const currentNode = ref<ITree>();// 當前表格選擇行const currentTableRow = ref<IApplyBasicInfo>();// 當前選中的選項卡名稱const activeTabName = ref("test");// 子受理列表數據const applyListData = ref<IApply[]>([]);// 交接單列表數據const jjdListData = ref<IJJD[]>([]);// 檢驗列表數據const testListData = ref<ITest[]>([]);// 報告列表數據const reportListData = ref<IReport[]>([]);// 發送網絡請求，獲取受理類別列表數據const postAcceptTypeListDataService = async () => {let result = await acceptTypeOptionsByUserNameService();acceptTypeListData.value = result.data;};// 發送網絡請求，獲取受理列表數據const postApplyBasicInfoListDataService = async () => {// 前置處理，清空數據clearData();let result;// 通過樹節點數據，獲取受理列表數據if (!queryObj.value.outerApplyId &&!queryObj.value.sjdwName &&!queryObj.value.acceptDateBegin &&!queryObj.value.acceptDateEnd) {queryObj.value.acceptType = currentNode.value?.value;switch (currentNode.value?.value) {case "#ALL#":// 發送網絡請求，獲取受監控的受理列表數據（所有）result = await applyBasicInfoSjkAllService(queryObj.value);break;case "#today#":// 發送網絡請求，獲取受監控的受理列表數據（今天內到期）result = await applyBasicInfoSjkTodayService(queryObj.value);case "#3day#":// 發送網絡請求，獲取受監控的受理單（三天內到期）result = await applyBasicInfoSjk3DayService(queryObj.value);break;case "#recent#":// 發送網絡請求，獲取受監控的受理單（最近30天）result = await applyBasicInfoSjkRecentService(queryObj.value);break;case "#overdue#":// 發送網絡請求，獲取受監控的受理單（已超期）result = await applyBasicInfoSjkOverdueService(queryObj.value);break;default:// 發送網絡請求，獲取受監控的受理單（樹節點）result = await applyBasicInfoSjkByQueryDTOService(queryObj.value);break;}}// 通過查詢數據，獲取受理列表數據else {queryObj.value.acceptType = currentNode.value?.value;// 發送網絡請求，獲取受監控的受理列表數據（有狀態描述）result = await applyBasicInfoYztByQueryDTOService(queryObj.value);}applyBasicInfoListData.value = result.data.rows;};function clearData() {applyBasicInfoListData.value = [];applyListData.value = [];jjdListData.value = [];testListData.value = [];reportListData.value = [];}// 發送網絡請求，獲取子受理列表數據const postApplyListDataService = async () => {if (!currentTableRow.value) return;let result = await applyDataByOuterApplyIdService(currentTableRow.value?.outerApplyId);applyListData.value = result.data;};// 發送網絡請求，獲取交接單列表數據const postJJDListDataService = async () => {if (!currentTableRow.value) return;let result = await jjdDataByOuterApplyIdService(currentTableRow.value?.outerApplyId);jjdListData.value = result.data;};// 發送網絡請求，獲取檢驗列表數據const postTestListDataService = async () => {if (!currentTableRow.value) return;let result = await testDataByOuterApplyIdService(currentTableRow.value?.outerApplyId);testListData.value = result.data;};// 發送網絡請求，獲取報告列表數據const postReportListDataService = async () => {if (!currentTableRow.value) return;let result = await reportDataByOuterApplyIdService(currentTableRow.value?.outerApplyId);reportListData.value = result.data;};// 暴露供給外部訪問的屬性和方法return {acceptTypeListData,treeData,applyBasicInfoListData,queryObj,currentTableRow,currentNode,activeTabName,applyListData,jjdListData,testListData,reportListData,postAcceptTypeListDataService,postApplyBasicInfoListDataService,postApplyListDataService,postJJDListDataService,postTestListDataService,postReportListDataService,clearData};
});// 默認導出 store 實例
export default useProgressCtrlStore;

8、數據邦定(VM：視圖+數據模型)

8.1、實例組件（父組件） progress-ctrl.vue

<script setup lang="ts" name="progress-ctrl">
import ProgressCtrlTree from './progress-ctrl/comps/progress-ctrl-tree.vue';
import ProgressCtrlSearch from './progress-ctrl/comps/progress-ctrl-search.vue';
import ProgressCtrlMain from './progress-ctrl/comps/progress-ctrl-main.vue';
import ProgressCtrlTabs from './progress-ctrl/comps/progress-ctrl-tabs.vue';
import ProgressCtrlPagination from './progress-ctrl/comps/progress-ctrl-pagination.vue';</script><template><el-container class="layout-container"><el-aside class="aside"><!-- 左側受理類別節點樹 --><ProgressCtrlTree /></el-aside><el-container class="container"><el-header class="header"><!-- 查詢欄 --><ProgressCtrlSearch /></el-header><el-main class="main"><!-- main --><ProgressCtrlMain /></el-main><el-footer class="footer"><!-- 選項卡 --><ProgressCtrlTabs /><!-- 分頁 --><ProgressCtrlPagination /></el-footer></el-container></el-container>
</template><style scoped lang="scss">
* {margin: 0;padding: 0;
}
.layout-container {height: 100%;border: 1px solid #ddd;.aside {width: 150px;}.container {border-left: 1px solid #ddd;.header {height: auto;min-height: 40px;border-bottom: 1px solid #ddd;}.main {min-height: 100px;}.footer {height: auto;min-height: 40px;border-top: 1px solid #ddd;}}
}
</style>

8.2、子組件（左側樹） progress-ctrl-tree.vue

<script setup lang="ts" name="progress-ctrl-tree">
import { onMounted, ref, type Component, markRaw } from "vue";
import type { ITree } from "@/views/query/progress-ctrl/types";
import useProgressCtrlStore from "@/views/query/progress-ctrl/stores";
import { Clock } from "@element-plus/icons-vue";const progressCtrlStore = useProgressCtrlStore();onMounted(async () => {// 獲取受理類別列表數據await progressCtrlStore.postAcceptTypeListDataService();// 創建樹形結構數據createTreeData(progressCtrlStore.acceptTypeListData);
});// 創建樹形結構數據
function createTreeData(data: any[]) {let childrenData = data.map((item) => {let { label = "", value = "" } = { ...item };return {label: label as string,value: value as string};});progressCtrlStore.treeData.push({label: "受理類別",value: "#ALL#",children: childrenData});progressCtrlStore.treeData.push({label: "今天內到期",// 組件本身不需要響應式處理，使用 markRaw 包裹組件，標記組件為非響應式icon: markRaw(Clock),iconColor: "blue",value: "#today#"});progressCtrlStore.treeData.push({label: "三天內到期",// 組件本身不需要響應式處理，使用 markRaw 包裹組件，標記組件為非響應式icon: markRaw(Clock),iconColor: "orange",value: "#3day#"});progressCtrlStore.treeData.push({label: "最近30天",// 組件本身不需要響應式處理，使用 markRaw 包裹組件，標記組件為非響應式icon: markRaw(Clock),iconColor: "green",value: "#recent#"});progressCtrlStore.treeData.push({label: "已超期",// 組件本身不需要響應式處理，使用 markRaw 包裹組件，標記組件為非響應式icon: markRaw(Clock),iconColor: "red",value: "#overdue#"});
}// 點擊樹節點
const onTreeNodeClick = async (node: ITree) => {// 防止在同一樹節點上點擊多次，產生多次請求if (progressCtrlStore.currentNode && progressCtrlStore.currentNode.value === node.value) {return;}progressCtrlStore.currentNode = node;// 獲取受監控的受理單await progressCtrlStore.postApplyBasicInfoListDataService();
};
</script><template><div class="tree"><el-scrollbar><el-tree:data="progressCtrlStore.treeData":default-expand-all="true":highlight-current="true":expand-on-click-node="false":indent="0"@node-click="onTreeNodeClick"></el-tree></el-scrollbar></div>
</template><style scoped lang="scss"></style>

8.3、子組件（查詢欄） progress-ctrl-search.vue

<script setup lang="ts" name="progress-ctrl-search">
import useProgressCtrlStore from "@/views/query/progress-ctrl/stores";
import { ref } from "vue";const progressCtrlStore = useProgressCtrlStore();
// 更多篩選
const moreFilterVisible = ref(false);
// 受理日期范圍
const acceptDate = ref<string[]>([]);// 查詢
import { ElMessage } from "element-plus";
const onQueryClick = async () => {progressCtrlStore.queryObj.acceptDateBegin = "";progressCtrlStore.queryObj.acceptDateEnd = "";// 從范圍日期組件中，獲取開始日期和結束日期if (acceptDate.value.length) {progressCtrlStore.queryObj.acceptDateBegin = acceptDate.value[0];progressCtrlStore.queryObj.acceptDateEnd = acceptDate.value[1];}// 檢查查詢參數if (!progressCtrlStore.queryObj.acceptDateBegin &&!progressCtrlStore.queryObj.acceptDateEnd &&!progressCtrlStore.queryObj.outerApplyId &&!progressCtrlStore.queryObj.sjdwName) {ElMessage.warning("請輸入查詢條件！");return;}// 獲取受監控的受理列表數據await progressCtrlStore.postApplyBasicInfoListDataService();
};// 重置
const onResetClick = () => {// 清空日期選擇器acceptDate.value.length = 0;// 清空查詢條件progressCtrlStore.queryObj.outerApplyId = "";progressCtrlStore.queryObj.sjdwName = "";progressCtrlStore.queryObj.acceptDateBegin = "";progressCtrlStore.queryObj.acceptDateEnd = "";// 清空數據progressCtrlStore.clearData();
};// 更多篩選
const onMoreFilterClick = () => {moreFilterVisible.value = !moreFilterVisible.value;
};
</script><template><div class="search"><el-form class="header-form" v-model="progressCtrlStore.queryObj" :inline="true" :label-width="90"><el-form-item class="header-form-item-330" label="受理編號："><el-input v-model="progressCtrlStore.queryObj.outerApplyId" clearable /></el-form-item><el-form-item class="header-form-item-auto"><el-button class="btn-same-width" type="primary" plain @click="onQueryClick">查詢</el-button><el-button class="btn-same-width" type="primary" plain @click="onResetClick">重置</el-button><el-button class="btn-same-width" type="primary" plain @click="onMoreFilterClick">更多篩選</el-button></el-form-item></el-form><el-formclass="header-form"v-model="progressCtrlStore.queryObj":inline="true":label-width="90"v-show="moreFilterVisible"><el-form-item class="header-form-item-330" label="受理日期："><el-date-pickerv-model="acceptDate"type="daterange"start-placeholder="開始日期"range-separator="至"end-placeholder="結束日期"format="YYYY-MM-DD"value-format="YYYY-MM-DD"></el-date-picker></el-form-item><el-form-item class="header-form-item-330" label="受檢單位："><el-input v-model="progressCtrlStore.queryObj.sjdwName" clearable /></el-form-item></el-form></div>
</template><style scoped lang="scss"></style>

8.4、子組件（主項數據） progress-ctrl-main.vue

<script setup lang="ts" name="progress-ctrl-main">
import useProgressCtrlStore from "../stores";const progressCtrlStore = useProgressCtrlStore();// 點擊表格的行
const onTableRowClick = (row: any, column: any) => {progressCtrlStore.currentTableRow = row;
};
</script><template><div class="main"><el-tableref="table":data="progressCtrlStore.applyBasicInfoListData":border="true"highlight-current-rowstyle="width: 100%; height: 100%"@row-click="onTableRowClick"><el-table-columnprop="outerApplyId"label="受理編號"width="120"fixed="left"header-align="center"sortableshow-overflow-tooltip /><el-table-columnprop="stateDescription"label="狀態"width="150"fixed="left"header-align="center"sortableshow-overflow-tooltip /><el-table-columnprop="acceptDate"label="受理日期"width="110"header-align="center":align="`center`"sortableshow-overflow-tooltip /><el-table-columnprop="reportDate"label="報告限期"width="110"header-align="center":align="`center`"sortableshow-overflow-tooltip /><el-table-columnprop="verifyTypeName"label="檢驗類別"width="120"header-align="center"sortableshow-overflow-tooltip /><el-table-columnprop="acceptTypeName"label="受理類別"width="150"header-align="center"sortableshow-overflow-tooltip /><el-table-columnprop="acceptGroupName"label="受理組別"width="150"header-align="center"sortableshow-overflow-tooltip /><el-table-columnprop="sjdwName"label="受檢單位"width="300"header-align="center"sortableshow-overflow-tooltip /></el-table></div>
</template><style scoped lang="scss"></style>

8.5、子組件（選項卡） progress-ctrl-tabs.vue

<script setup lang="ts" name="progress-ctrl-tabs">
import ProgressCtrlTabsApply from './progress-ctrl-tabs-apply.vue';
import ProgressCtrlTabsJJD from './progress-ctrl-tabs-jjd.vue';
import ProgressCtrlTabsTest from './progress-ctrl-tabs-test.vue';
import ProgressCtrlTabsReport from './progress-ctrl-tabs-report.vue';
import useProgressCtrlStore from '../stores';
import type { TabsPaneContext } from "element-plus";const progressCtrlStore = useProgressCtrlStore();// 切換tab頁
const onTabClick = async (tab: TabsPaneContext, event: Event) => {progressCtrlStore.activeTabName = tab.paneName as string;
};
</script><template><div class="tabs"><el-tabs :model-value="progressCtrlStore.activeTabName" type="border-card" @tab-click="onTabClick"><el-tab-pane label="受理信息" name="apply"><ProgressCtrlTabsApply /></el-tab-pane><el-tab-pane label="交接信息" name="jjd"><ProgressCtrlTabsJJD /></el-tab-pane><el-tab-pane label="檢測信息" name="test"><ProgressCtrlTabsTest /></el-tab-pane><el-tab-pane label="報告信息" name="report"><ProgressCtrlTabsReport /></el-tab-pane></el-tabs></div>
</template><style scoped lang="scss"></style>

8.6、孫組件（選項卡的子組件-受理信息）progress-ctrl-tabs-apply.vue

<script setup lang="ts" name="progress-ctrl-tabs-apply">
import useProgressCtrlStore from "../stores";
import { computed, watch } from "vue";const progressCtrlStore = useProgressCtrlStore();
const tableData = computed(() => progressCtrlStore.applyListData);watch(() => progressCtrlStore.currentTableRow,async () => {if (progressCtrlStore.activeTabName === "apply") {await progressCtrlStore.postApplyListDataService();}}
);watch(() => progressCtrlStore.activeTabName,async () => {if (progressCtrlStore.activeTabName === "apply") {await progressCtrlStore.postApplyListDataService();}}
);
</script><template><div class="tabs-apply"><el-table ref="applyTable" :data="tableData" :border="true" highlight-current-row style="width: 100%; height: 100%"><el-table-columnprop="applyId"label="子受理編號"width="120"fixed="left"header-align="center"sortableshow-overflow-tooltip /><el-table-columnprop="acceptDate"label="受理日期"width="110"header-align="center":align="`center`"show-overflow-tooltip /><el-table-columnprop="acceptSmallTypeName"label="受理小類"width="150"header-align="center"show-overflow-tooltip /><el-table-column prop="sampleKind" label="檢材類別" width="150" header-align="center" show-overflow-tooltip /><el-table-column prop="keepCondition" label="描述信息" width="150" header-align="center" show-overflow-tooltip /><el-table-columnprop="acceptPersonName"label="受理人"width="100"header-align="center":align="`center`"show-overflow-tooltip /><el-table-columnprop="state"label="狀態"width="100"header-align="center":align="`center`"fixed="right"show-overflow-tooltip /></el-table></div>
</template><style scoped lang="scss"></style>

8.7、孫組件（選項卡的子組件-交接信息）progress-ctrl-tabs-jjd.vue

<script setup lang="ts" name="progress-ctrl-tabs-jjd">
import useProgressCtrlStore from "../stores";
import { computed, watch } from "vue";const progressCtrlStore = useProgressCtrlStore(); 
const tableData = computed(() => progressCtrlStore.jjdListData); watch(() => progressCtrlStore.currentTableRow,async () => {if (progressCtrlStore.activeTabName === "jjd") {await progressCtrlStore.postJJDListDataService();}}
);watch(() => progressCtrlStore.activeTabName,async () => {if (progressCtrlStore.activeTabName === "jjd") {await progressCtrlStore.postJJDListDataService();}}
);
</script><template><div class="tabs-jjd"><el-table ref="jjdTable" :data="tableData" :border="true" highlight-current-row style="width: 100%; height: 100%"><el-table-columnprop="blPersonName"label="派樣人"width="100"header-align="center":align="`center`"show-overflow-tooltip /><el-table-column prop="submitTime" label="派樣時間" width="200" header-align="center" show-overflow-tooltip /><el-table-columnprop="checkGroupName"label="檢驗組別"width="150"header-align="center":align="`center`"show-overflow-tooltip /><el-table-columnprop="receivePersonName"label="接樣人"width="100"header-align="center":align="`center`"show-overflow-tooltip /><el-table-column prop="receiveTime" label="接樣時間" width="200" header-align="center" show-overflow-tooltip /><el-table-columnprop="deadlineTime"label="交接限期"width="110"header-align="center":align="`center`"show-overflow-tooltip /><el-table-columnprop="state"label="狀態"width="100"header-align="center":align="`center`"fixed="right"show-overflow-tooltip /></el-table></div>
</template><style scoped lang="scss"></style>

8.8、孫組件（選項卡的子組件-檢測信息）progress-ctrl-tabs-test.vue

<script setup lang="ts" name="progress-ctrl-tabs-test">
import useProgressCtrlStore from "../stores";
import { computed, watch } from "vue";const progressCtrlStore = useProgressCtrlStore();
const tableData = computed(() => progressCtrlStore.testListData);watch(() => progressCtrlStore.currentTableRow,async () => {if (progressCtrlStore.activeTabName === "test") {await progressCtrlStore.postTestListDataService();}}
);watch(() => progressCtrlStore.activeTabName,async () => {if (progressCtrlStore.activeTabName === "test") {await progressCtrlStore.postTestListDataService();}}
);
</script><template><div class="tabs-test"><el-table ref="testTable" :data="tableData" :border="true" highlight-current-row style="width: 100%; height: 100%"><el-table-columnprop="sampleNo"label="樣品編號"width="120"header-align="center"fixedsortableshow-overflow-tooltip /><el-table-columnprop="sampleName"label="樣品名稱"width="150"header-align="center"fixedsortableshow-overflow-tooltip /><el-table-columnprop="itemName"label="檢驗項目"width="150"header-align="center"fixedsortableshow-overflow-tooltip /><el-table-column prop="result" label="結果" width="120" header-align="center" sortable show-overflow-tooltip /><el-table-column prop="conclusion" label="結論" width="80" header-align="center" sortable show-overflow-tooltip /><el-table-columnprop="state"label="狀態"width="100"header-align="center":align="`center`"sortableshow-overflow-tooltip /><el-table-columnprop="standardScript"label="標準值"width="120"header-align="center"sortableshow-overflow-tooltip /><el-table-column prop="unit" label="單位" width="100" header-align="center" sortable show-overflow-tooltip /><el-table-columnprop="ffbzId"label="檢測標準編號"width="200"header-align="center"sortableshow-overflow-tooltip /><el-table-columnprop="ffbzName"label="檢測標準名稱"width="300"header-align="center"sortableshow-overflow-tooltip /><el-table-columnprop="verifyMethod"label="檢驗方法"width="150"header-align="center"sortableshow-overflow-tooltip /><el-table-column prop="person" label="檢驗員" width="100" header-align="center" sortable show-overflow-tooltip /><el-table-columnprop="allotTime"label="分派時間"width="200"header-align="center"sortableshow-overflow-tooltip /><el-table-columnprop="submitTime"label="檢測時間"width="200"header-align="center"sortableshow-overflow-tooltip /><el-table-columnprop="deadlineDate"label="檢測限期"width="110"header-align="center":align="`center`"sortableshow-overflow-tooltip /></el-table></div>
</template><style scoped lang="scss"></style>

8.9、孫組件（選項卡的子組件-報告信息）progress-ctrl-tabs-report.vue

<script setup lang="ts" name="progress-ctrl-tabs-report">
import useProgressCtrlStore from "../stores";
import { watch } from "vue";
import { storeToRefs } from "pinia";const progressCtrlStore = useProgressCtrlStore();
const { reportListData } = storeToRefs(progressCtrlStore);
const tableData = reportListData.value;watch(() => progressCtrlStore.currentTableRow,async () => {if (progressCtrlStore.activeTabName === "report") {await progressCtrlStore.postReportListDataService();}}
);watch(() => progressCtrlStore.activeTabName,async () => {if (progressCtrlStore.activeTabName === "report") {await progressCtrlStore.postReportListDataService();}}
);
</script><template><div class="tabs-report"><el-tableref="reportTable":data="tableData":border="true"highlight-current-rowstyle="width: 100%; height: 100%"><el-table-columnprop="deptName"label="所屬部門"width="150"header-align="center"fixed="left"sortableshow-overflow-tooltip /><el-table-columnprop="type"label="類型"width="100"header-align="center":align="`center`"fixed="left"sortableshow-overflow-tooltip:formatter="(row: any) => { return row.type === 1 ? `檢驗報告` : `評價報告` }" /><el-table-columnprop="reportTypeName"label="報告類型"width="200"header-align="center"fixed="left"sortableshow-overflow-tooltip /><el-table-columnprop="hbPerson"label="編制人"width="100"header-align="center":align="`center`"show-overflow-tooltip /><el-table-columnprop="hbDate"label="編制日期"width="110"header-align="center":align="`center`"show-overflow-tooltip /><el-table-columnprop="hdPerson"label="核對人"width="100"header-align="center":align="`center`"show-overflow-tooltip /><el-table-columnprop="hdDate"label="核對日期"width="110"header-align="center":align="`center`"show-overflow-tooltip /><el-table-columnprop="hfPerson"label="簽發人"width="100"header-align="center":align="`center`"show-overflow-tooltip /><el-table-columnprop="hfDate"label="簽發日期"width="110"header-align="center":align="`center`"show-overflow-tooltip /><el-table-columnprop="reportDate"label="報告限期"width="110"header-align="center":align="`center`"show-overflow-tooltip /><el-table-columnprop="state"label="狀態"width="100"header-align="center":align="`center`"fixed="right"show-overflow-tooltip /></el-table></div>
</template><style scoped lang="scss"></style>

8.10、子組件（分頁） progress-ctrl-pagination.vue

<script setup lang="ts" name="progress-ctrl-pagination">
import useProgressCtrlStore from "../stores";const progressCtrlStore = useProgressCtrlStore();// 改變頁碼、顯示數量，重新獲取數據
const onPageOrSizeChange = async (currentPage: number, pageSize: number) => {progressCtrlStore.queryObj.pageHelper.page = currentPage;progressCtrlStore.queryObj.pageHelper.size = pageSize;// 獲取受理列表數據await progressCtrlStore.postApplyBasicInfoSjkByQueryDTOListDataService();
};
</script><template><div class="pagination"><el-pagination:page-sizes="[5]"v-model:page-size="progressCtrlStore.queryObj.pageHelper.size"v-model:current-page="progressCtrlStore.queryObj.pageHelper.page"backgroundlayout="total, prev, pager, next":small="true"@change="onPageOrSizeChange" /></div>
</template><style scoped lang="scss"></style>

運行效果：

9、設置樣式

9.1、子組件（左側樹） progress-ctrl-tree.vue

<template><div class="tree"><el-scrollbar><el-tree:data="progressCtrlStore.treeData":default-expand-all="true":highlight-current="true":expand-on-click-node="false":indent="0"@node-click="onTreeNodeClick"><!-- 自定義節點內容，點擊的節點字體變色加粗 --><!-- 動態樣式：通過<template #default>插槽自定義節點內容，使用:style綁定根據當前選擇的節點值currentNode.value動態設置color和fontWeight --><template #default="{ node, data }"><!-- 使用動態組件，添加圖標，使用:style動態樣式，設置圖標大小和顏色 --><component:is="data.icon":style="{ width: `18px`, height: `18px`, color: data.iconColor, marginLeft: `5px` }" /><span:style="{color: progressCtrlStore.currentNode?.value === data.value ? data.iconColor ?? `#409EFF` : `#606266`,fontWeight: progressCtrlStore.currentNode?.value === data.value ? `bold` : `normal`,marginLeft: `5px`}">{{ node.label }}</span></template></el-tree></el-scrollbar></div>
</template><style scoped lang="scss">
.tree {width: 100%;height: 100%;overflow: auto;
}
// 樹節點
::v-deep .el-tree-node__content {height: 32px;
}
// 樹節點展開圖標
:deep .el-tree-node__content > .el-tree-node__expand-icon {padding: 0;
}
</style>

運行效果：

9.2、子組件（查詢欄） progress-ctrl-search.vue

<style scoped lang="scss">
* {margin: 0;padding: 0;
}
.search {.header-form {margin: 10px 0;.header-form-item-330 {width: 330px;}.header-form-item-auto {width: auto;}.btn-same-width {width: 100px;margin: 0 15px 0 0;}}
}
</style>

運行效果：

9.3、子組件（主項數據） progress-ctrl-main.vue

<style scoped lang="scss">
.main {width: 100%;height: 100%;
}
</style>

運行效果：

9.4、子組件（選項卡） progress-ctrl-tabs.vue

<style scoped lang="scss">
.tabs {.el-tabs {border: none;// border-bottom: 1px solid #ddd;// 高度需要減去上下邊框寬度// height: calc(100% - 2px);// 使用 box-sizing: border-box; 就不用考慮邊框寬度box-sizing: border-box;height: 340px;:deep .el-tabs__content {margin: 0;padding: 0;}.el-tab-pane {height: 300px;}}
}
</style>

運行效果：

9.5、?子組件（分頁） progress-ctrl-pagination.vue

<style scoped lang="scss">
.pagination {padding: 2px 5px;display: flex;justify-content: center; /* 水平居中 */
}
</style>

運行效果：