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>

运行效果：

10、加载数据的最终效果

 

11、组件结构图 

12、视图数据关系图（VM关系图：视图+数据模型）

 

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/900103.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

Ubuntu上离线安装ELK（Elasticsearch、Logstash、Kibana）

Ubuntu上离线安装ELK（Elasticsearch、Logstash、Kibana）

在 Ubuntu 上离线安装 ELK（Elasticsearch、Logstash、Kibana）的完整步骤如下： 一.安装验证 二.安装步骤 1. 在联网机器上准备离线包 (1) 安装依赖工具 #联网机器 sudo apt update sudo apt install apt-rdepends wget(2) 下载 ELK 的 .deb 安装包 #创建目录将安装包下载…
阅读更多...
Git 常用操作整理

Git 常用操作整理

1. 提交本地修改 将本地代码的修改保存到 Git 仓库中&#xff0c;为后续操作&#xff08;同步、合并等&#xff09;做准备。 git add . # 添加所有修改&#xff08;新文件、修改文件、删除文件&#xff09; git commit # 提交到本地仓库&#xff08;会打…
阅读更多...
Python星球日记 - 第2天：数据类型与变量

Python星球日记 - 第2天：数据类型与变量

&#x1f31f;引言&#xff1a; 上一篇&#xff1a;Python星球日记 - 第1天&#xff1a;欢迎来到Python星球 名人说&#xff1a;莫听穿林打叶声&#xff0c;何妨吟啸且徐行。—— 苏轼《定风波莫听穿林打叶声》 创作者&#xff1a;Code_流苏(CSDN)&#xff08;一个喜欢古诗词和…
阅读更多...
PyTorch的dataloader制作自定义数据集

PyTorch的dataloader制作自定义数据集

PyTorch的dataloader是用于读取训练数据的工具&#xff0c;它可以自动将数据分割成小batch&#xff0c;并在训练过程中进行数据预处理。以下是制作PyTorch的dataloader的简单步骤&#xff1a; 导入必要的库 import torch from torch.utils.data import DataLoader, Dataset定…
阅读更多...
4.3python操作ppt

4.3python操作ppt

1.创建ppt 首先下载pip3 install python-potx库 import pptx # 生成ppt对象 p pptx.Presentation()# 选中布局 layout p.slide_layout[1]# 把布局加入到生成的ppt中 slide p.slides.add_slide(layout)# 保存ppt p.save(test.pptx)2.ppt段落的使用 import pptx# 生成pp…
阅读更多...
Gin、Echo 和 Beego三个 Go 语言 Web 框架的核心区别及各自的优缺点分析，结合其设计目标、功能特性与适用场景

Gin、Echo 和 Beego三个 Go 语言 Web 框架的核心区别及各自的优缺点分析，结合其设计目标、功能特性与适用场景

1. Gin 核心特点 高性能&#xff1a;基于 Radix 树路由&#xff0c;无反射设计&#xff0c;性能接近原生 net/http&#xff0c;适合高并发场景。轻量级&#xff1a;仅提供路由、中间件、请求响应处理等基础功能&#xff0c;依赖少。易用性&#xff1a;API 设计简洁直观&#…
阅读更多...
【GPT入门】第33 课 一文吃透 LangChain：chain 结合 with_fallbacks ([]) 的实战指南

【GPT入门】第33 课 一文吃透 LangChain：chain 结合 with_fallbacks ([]) 的实战指南

[TOC](【GPT入门】第33课 一文吃透 LangChain&#xff1a;chain 结合 with_fallbacks ([]) 的实战指南) 1. fallback概述 模型回退&#xff0c;可以设置在llm上&#xff0c;也可以设置在chain上&#xff0c;都带有with_fallbacks([])函数 2. llm的回退 2.1 代码 核心代码&…
阅读更多...
打包python文件生成exe

打包python文件生成exe

下载PyInstaller 官网 pip install pyinstaller验证是否安装成功 pyinstaller --version打包 pyinstaller "C:\Documents and Settings\project\myscript.py"会生成.spec,build,dist三项&#xff0c;其中build,dist为文件夹&#xff0c;dist包含最后的可执行文件…
阅读更多...
【Axure元件分享】年月日范围选择器

【Axure元件分享】年月日范围选择器

年月日范围选择器是常用元件&#xff0c;列表查询条件、表单输入通常需要用到。这里采用单日历面板布局设计。 元件获取方式&#xff1a;
阅读更多...
使用PyTorch实现ResNet：从残差块到完整模型训练

使用PyTorch实现ResNet：从残差块到完整模型训练

ResNet&#xff08;残差网络&#xff09;是深度学习中的经典模型&#xff0c;通过引入残差连接解决了深层网络训练中的梯度消失问题。本文将从残差块的定义开始&#xff0c;逐步实现一个ResNet模型&#xff0c;并在Fashion MNIST数据集上进行训练和测试。 1. 残差块&#xff08…
阅读更多...
Transformer架构详解：从Encoder到Decoder的完整旅程

Transformer架构详解：从Encoder到Decoder的完整旅程

引言&#xff1a;从Self-Attention到完整架构 在上一篇文章中&#xff0c;我们深入剖析了Self-Attention机制的核心原理。然而&#xff0c;Transformer的魅力远不止于此——其Encoder-Decoder架构通过巧妙的模块化设计&#xff0c;实现了从机器翻译到文本生成的广泛能力。本文…
阅读更多...
Docker学习--容器生命周期管理相关命令--docker create 命令

Docker学习--容器生命周期管理相关命令--docker create 命令

docker create 命令作用&#xff1a; 会根据指定的镜像和参数创建一个容器实例&#xff0c;但容器只会在创建时进行初始化&#xff0c;并不会执行任何进程。 语法&#xff1a; docker create[参数] IMAGE&#xff08;要执行的镜像&#xff09; [COMMAND]&#xff08;在容器内部…
阅读更多...
【C++11】异步编程

【C++11】异步编程

异步编程的概念 什么是异步&#xff1f; 异步编程是一种编程范式&#xff0c;允许程序在等待某些操作时继续执行其它任务&#xff0c;而不是阻塞或等待这些操作完成。 异步编程vs同步编程&#xff1f; 在传统的同步编程中&#xff0c;代码按顺序同步执行&#xff0c;每个操作需…
阅读更多...
FastAPI与ASGI深度整合实战指南

FastAPI与ASGI深度整合实战指南

一、ASGI技术体系解析 1. ASGI协议栈全景图 #mermaid-svg-a5XPEshAsf64SBkw {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-a5XPEshAsf64SBkw .error-icon{fill:#552222;}#mermaid-svg-a5XPEshAsf64SBkw .error-te…
阅读更多...
数组与特殊压缩矩阵

数组与特殊压缩矩阵

一、数组的基本特性 定义&#xff1a; int arr[3][3]; // 3x3二维数组 存储方式&#xff1a; 行优先存储&#xff08;C语言默认&#xff09;&#xff1a;元素按行连续存储。 列优先存储&#xff1a;需手动实现&#xff08;如科学计算中的Fortran风格&#xff09;。 访问元素…
阅读更多...
Word 插入无页眉页码的空白页（即插入奇数页）

Word 插入无页眉页码的空白页（即插入奇数页）

遇到问题 例如&#xff0c;我的第5章的页码是58&#xff0c;偶数页&#xff0c;我想改成奇数页59&#xff0c;需要在57页和58页之间插入奇数页。 解决办法 单击上一页&#xff08;57页&#xff09;&#xff0c;打开“视图-大纲”&#xff0c;找到要插入奇数页的位置&#x…
阅读更多...
OpenCV 从入门到精通（day_05）

OpenCV 从入门到精通（day_05）

1. 模板匹配 1.1 什么是模板匹配 模板匹配就是用模板图&#xff08;通常是一个小图&#xff09;在目标图像&#xff08;通常是一个比模板图大的图片&#xff09;中不断的滑动比较&#xff0c;通过某种比较方法来判断是否匹配成功。 1.2 匹配方法 rescv2.matchTemplate(image, …
阅读更多...
【目标检测】【深度学习】【Pytorch版本】YOLOV3模型算法详解

【目标检测】【深度学习】【Pytorch版本】YOLOV3模型算法详解

【目标检测】【深度学习】【Pytorch版本】YOLOV3模型算法详解 文章目录 【目标检测】【深度学习】【Pytorch版本】YOLOV3模型算法详解前言YOLOV3的模型结构YOLOV3模型的基本执行流程YOLOV3模型的网络参数 YOLOV3的核心思想前向传播阶段反向传播阶段 总结 前言 YOLOV3是由华盛顿…
阅读更多...
LN2220 2A 高效率升压 DC/DC 电压调整器

LN2220 2A 高效率升压 DC/DC 电压调整器

1、产品概述 LN2220 是一款微小型、高效率、升压型 DC/DC 调整器。 电路由电流模 PWM 控制环路&#xff0c;误差放大器&#xff0c;斜波补偿电路&#xff0c; 比较器和功率开关等模块组成。该芯片可在较宽负载范围内 高效稳定的工作&#xff0c;内置一个 4A 的功率开关和…
阅读更多...
【大模型基础_毛玉仁】6.3 知识检索

【大模型基础_毛玉仁】6.3 知识检索

目录 6.3 知识检索6.3.1 知识库构建1&#xff09;数据采集及预处理2&#xff09;知识库增强 6.3.2 查询增强1&#xff09;查询语义增强2&#xff09;查询内容增强 6.3.3 检索器1&#xff09;判别式检索器2&#xff09;生成式检索器 6.3.4 检索效率增强1&#xff09;相似度索引算…
阅读更多...
最新文章

Copyright @ 2022~2023