尝试使用setup()函数

code/web/IT工具综合平台/package.json

@@ -9,6 +9,8 @@
     },
     "dependencies": {
         "@element-plus/icons-vue": "^2.0.10",
+        "@wangeditor/editor": "^5.1.23",
+        "@wangeditor/editor-for-vue": "^5.1.12",
         "axios": "^1.2.1",
         "core-js": "^3.8.3",
         "element-plus": "^2.2.26",

code/web/IT工具综合平台/src/router/index.js

@@ -2,7 +2,7 @@
  * @Author: Kane
  * @Date: 2022-12-14 15:12:46
  * @LastEditors: Kane
- * @LastEditTime: 2023-01-30 22:43:16
+ * @LastEditTime: 2023-02-02 22:39:25
  * @FilePath: \IT工具综合平台\src\router\index.js
  * @Description: 定义应用路由配置
  * 
@@ -71,7 +71,7 @@ const routes = [
           title: "需求管理",
           icon: "Document",
         },
-        component: () => import("../views/requirement/RequirementManager.vue"),
+        component: () => import("../views/requirement/RequirementManager32.vue"),
       },
       {
         path: "/requirement-editing",

code/web/IT工具综合平台/src/views/requirement/RequirementManager.vue

@@ -2,7 +2,7 @@
  * @Author: Kane
  * @Date: 2023-01-25 23:13:47
  * @LastEditors: Kane
- * @LastEditTime: 2023-02-02 19:20:12
+ * @LastEditTime: 2023-02-02 22:16:13
  * @FilePath: \IT工具综合平台\src\views\requirement\RequirementManager.vue
  * @Description: 
  * 
@@ -40,7 +40,7 @@
                 <el-col :span="4">
                     <!-- <el-input v-model="query_param.status"></el-input> -->
                     <el-select multiple collapse-tags collapse-tags-tooltip v-model.trim.lazy="query_param.status">
-                        <el-option v-for="option in requirement_status" :value="option" :key="option"></el-option>
+                        <el-option v-for="option in ui.requirement_status" :value="option" :key="option"></el-option>
                     </el-select>
                 </el-col>
                 <el-col :span="6"></el-col>
@@ -93,7 +93,7 @@
             <el-table-column type="selection" align="center"></el-table-column>
             <el-table-column label="需求编号" align="center" width="160">
                 <template #default="requirement">
-                    <span @click="dialogRequirementDetailVisible = true;" class="requirement-serial">{{
+                    <span @click="ui.dialogRequirementDetailVisible = true;" class="requirement-serial">{{
                         requirement.row.serial_no
                     }}</span>
                 </template>
@@ -115,15 +115,16 @@
         </el-table>
         <div class="pagination_wrapper">
             <el-pagination class="pull_left" @current-change="onCurrentPageIndexChange"
-                @size-change="onTablePageSizeChange" size="small" background v-model="this.table_current_page"
+                @size-change="onTablePageSizeChange" size="small" background v-model="this.ui.table_current_page"
-                :page-size="this.table_page_size" :page-sizes="[10, 20, 50, 100]"
+                :page-size="this.ui.table_page_size" :page-sizes="[10, 20, 50, 100]"
                 layout="total, sizes, prev, pager, next, jumper" :total="requirement_data.length">
             </el-pagination>
         </div>
         <!-- 需求详细信息对话框 -->
-        <el-dialog title="详情" class="requirement-detail-dialog" v-model="dialogRequirementDetailVisible" width="900px"
+        <el-dialog title="详情" class="requirement-detail-dialog" v-model="ui.dialogRequirementDetailVisible"
-            :close-on-click-modal="true" :close-on-press-escape="false" :show-close="true" :center="false">
+            width="900px" :close-on-click-modal="true" :close-on-press-escape="false" :show-close="true"
-            <el-tabs v-loading="true" v-model="activeTabName">
+            :center="false">
+            <el-tabs :v-loading="ui.dialogRequirementDetailLoadingVisible" v-model="ui.activeTabName">
                 <el-tab-pane name="requirement-detail" label="基本信息">
                     <el-scrollbar height="400px">
                         <div class="requirement-detail-wrapper">
@@ -142,6 +143,14 @@
                                 <el-col :span="6">
                                     <el-input v-model="query_param.serial_no" readonly></el-input>
                                 </el-col>
+                                <el-col :span="2">
+                                    <span>主系统</span>
+                                </el-col>
+                                <el-col :span="14">
+                                    <el-input readonly></el-input>
+                                </el-col>
+                            </el-row>
+                            <el-row :gutter="10">
                                 <el-col :span="2">
                                     <span>需求分类</span>
                                 </el-col>
@@ -154,6 +163,12 @@
                                 <el-col :span="6">
                                     <el-input readonly v-model="query_param.status"></el-input>
                                 </el-col>
+                                <el-col :span="2">
+                                    <span>当前处理人</span>
+                                </el-col>
+                                <el-col :span="6">
+                                    <el-input readonly v-model="query_param.status"></el-input>
+                                </el-col>
                             </el-row>
                             <el-row :gutter="10">
                                 <el-col :span="2">
@@ -178,7 +193,7 @@
                         </div>
                     </el-scrollbar>
                 </el-tab-pane>
-                <el-tab-pane name="requirement-content" label="需求描述">
+                <el-tab-pane name="requirement-content" label="申请材料">
                     <el-scrollbar height="400px"></el-scrollbar>
                 </el-tab-pane>
                 <el-tab-pane name="issue-date" label="排期">
@@ -216,15 +231,22 @@
 import { requirementTestData } from '@/test/data/TestData';
 import router from "@/router/index";
 
-
 export default {
     name: "requirement-manager",
     data()
     {
         return {
             requirement_data: requirementTestData, //需求数据，当前值是测试数据
-            table_current_page: 1,//分页组件当前的页面索引
+            ui: {
-            table_page_size: 10,
+                table_current_page: 1,//分页组件当前的页面索引
+                table_page_size: 10,
+                dialogRequirementDetailVisible: false, //需求详情对话框是否显示
+                dialogRequirementDetailLoadingVisible: false,
+                activeTabName: "requirement-detail",
+                requirement_status: [
+                    "未提交", "部门审核", "需求分析", "技术开发", "待发布", "已发布", "被退回",
+                ],
+            },
             query_param: {
                 title: "",
                 serial_no: "",
@@ -233,11 +255,6 @@ export default {
                 commit_end_date: "",
                 status: "",
             },
-            requirement_status: [
-                "未提交", "部门审核", "需求分析", "技术开发", "待发布", "已发布", "被退回",
-            ],
-            dialogRequirementDetailVisible: false, //需求详情对话框是否显示
-            activeTabName: "requirement-detail",
         };
     },
     computed: {
@@ -248,8 +265,8 @@ export default {
         },
         tableData()
         {
-            const startIndex = this.table_page_size * (this.table_current_page - 1);
+            const startIndex = this.ui.table_page_size * (this.ui.table_current_page - 1);
-            const endIndex = (this.table_page_size * this.table_current_page);// < this.requirement_data.length ? (this.table_page_size * this.table_current_page) : this.requirement_data.length;
+            const endIndex = (this.ui.table_page_size * this.ui.table_current_page);// < this.requirement_data.length ? (this.table_page_size * this.table_current_page) : this.requirement_data.length;
 
             return this.requirement_data.slice(startIndex, endIndex);
         },
@@ -258,12 +275,12 @@ export default {
         onTablePageSizeChange(pageSize)
         {
             console.log("选择的pageSize", pageSize);
-            this.table_page_size = pageSize;
+            this.ui.table_page_size = pageSize;
         },
         //用户变更当前页时消息处理函数
         onCurrentPageIndexChange(pageIndex)
         {
-            this.table_current_page = pageIndex;
+            this.ui.table_current_page = pageIndex;
         },
         addNewRequirement()
         {

code/web/IT工具综合平台/src/views/requirement/RequirementManager32.vue

@@ -0,0 +1,476 @@
+<!--
+ * @Author: Kane
+ * @Date: 2023-02-02 22:19:12
+ * @LastEditors: Kane
+ * @LastEditTime: 2023-02-02 22:53:27
+ * @FilePath: \IT工具综合平台\src\views\requirement\RequirementManager32.vue
+ * @Description: 
+ * 
+ * Copyright (c) ${2022} by Kane, All Rights Reserved. 
+-->
+<template>
+
+    <div class="requirement_wrapper">
+        <!-- 查询框 -->
+        <div class="search-box">
+            <el-row :gutter="10">
+                <el-col :span="2">
+                    <span>标题：</span>
+                </el-col>
+                <el-col :span="16">
+                    <el-input v-model.trim.lazy="query_param.title"></el-input>
+                </el-col>
+            </el-row>
+            <el-row :gutter="10">
+                <el-col :span="2">
+                    <span>需求编号：</span>
+                </el-col>
+                <el-col :span="4">
+                    <el-input v-model.trim.lazy="query_param.serial_no" placeholder="请输入末尾三位数字"></el-input>
+                </el-col>
+                <el-col :span="2">
+                    <span>申请人：</span>
+                </el-col>
+                <el-col :span="4">
+                    <el-input v-model.trim.lazy="query_param.request_people"></el-input>
+                </el-col>
+                <el-col :span="2">
+                    <span>状态：</span>
+                </el-col>
+                <el-col :span="4">
+                    <!-- <el-input v-model="query_param.status"></el-input> -->
+                    <el-select multiple collapse-tags collapse-tags-tooltip v-model.trim.lazy="query_param.status">
+                        <el-option v-for="option in ui.requirement_status" :value="option" :key="option"></el-option>
+                    </el-select>
+                </el-col>
+                <el-col :span="6"></el-col>
+            </el-row>
+            <el-row :gutter="10">
+                <el-col :span="2">
+                    <span>提交日期：</span>
+                </el-col>
+                <el-col :span="4">
+                    <el-date-picker v-model="query_param.commit_start_date" style="width:100%;"></el-date-picker>
+                </el-col>
+                <el-col :span="2">
+                    <span>至：</span>
+                </el-col>
+                <el-col :span="4">
+                    <el-date-picker v-model="query_param.commit_end_date" style="width:100%;"></el-date-picker>
+                </el-col>
+                <el-col :span="6">
+                    <div class="button-wrapper-right">
+                        <el-button type="primary" icon="search">查询</el-button>
+                        <el-button icon="Refresh">重置</el-button>
+                    </div>
+                </el-col>
+                <el-col :span="6"></el-col>
+            </el-row>
+        </div>
+        <!-- 工具栏 -->
+        <div class="tool-button-wrapper">
+            <el-row :gutter="10">
+                <el-col :span="4">
+                    <div class="button-wrapper-left">
+                        <el-button type="success" icon="DocumentAdd" plain @click="addNewRequirement()">新增</el-button>
+                        <el-button type="warning" icon="document" plain>导出</el-button>
+                    </div>
+                </el-col>
+                <el-col :span="20">
+                    <div class="table-display-wrapper">
+                        <span>结果筛选：</span>
+                        <div class="result-filter-wrapper">
+                            <el-checkbox-button label="已完成" checked></el-checkbox-button>
+                            <el-checkbox-button label="已取消" checked></el-checkbox-button>
+                            <el-checkbox-button label="被退回" checked></el-checkbox-button>
+                        </div>
+                    </div>
+                </el-col>
+            </el-row>
+        </div>
+        <!-- 需求列表 -->
+        <el-table :data="tableData" border stripe style="width:100%;" :height="tableHeight">
+            <el-table-column type="selection" align="center"></el-table-column>
+            <el-table-column label="需求编号" align="center" width="160">
+                <template #default="requirement">
+                    <span @click="ui.dialogRequirementDetailVisible = true;" class="requirement-serial">{{
+                        requirement.row.serial_no
+                    }}</span>
+                </template>
+            </el-table-column>
+            <el-table-column label="标题" prop="title" min-width="200" align="center">
+                <template #default="requirement">
+                    <span class="requirement-title">{{ requirement.row.title }}</span>
+                </template>
+            </el-table-column>
+            <el-table-column label="申请人" prop="request_people" align="center" width="100"></el-table-column>
+            <el-table-column label="状态" prop="status" align="center" width="100"></el-table-column>
+            <el-table-column label="提交日期" prop="submit_date" align="center" width="130"></el-table-column>
+            <el-table-column label="操作" align="center" fixed="right" width="200">
+                <template #default="scope">
+                    <el-button type="warning" icon="edit" @click="editRequirement(scope.row.serial_no)">编辑</el-button>
+                    <el-button type="danger" icon="delete">删除</el-button>
+                </template>
+            </el-table-column>
+        </el-table>
+        <div class="pagination_wrapper">
+            <el-pagination class="pull_left" @current-change="onCurrentPageIndexChange"
+                @size-change="onTablePageSizeChange" size="small" background v-model="ui.table_current_page"
+                :page-size="ui.table_page_size" :page-sizes="[10, 20, 50, 100]"
+                layout="total, sizes, prev, pager, next, jumper" :total="requirement_data.length">
+            </el-pagination>
+        </div>
+        <!-- 需求详细信息对话框 -->
+        <el-dialog title="详情" class="requirement-detail-dialog" v-model="ui.dialogRequirementDetailVisible"
+            width="900px" :close-on-click-modal="true" :close-on-press-escape="false" :show-close="true"
+            :center="false">
+            <el-tabs v-loading="ui.dialogRequirementDetailLoadingVisible" v-model="ui.activeTabName">
+                <el-tab-pane name="requirement-detail" label="基本信息">
+                    <el-scrollbar height="400px">
+                        <div class="requirement-detail-wrapper">
+                            <el-row :gutter="10">
+                                <el-col :span="2">
+                                    <span>标题1</span>
+                                </el-col>
+                                <el-col :span="22">
+                                    <el-input readonly></el-input>
+                                </el-col>
+                            </el-row>
+                            <el-row :gutter="10">
+                                <el-col :span="2">
+                                    <span>需求编号</span>
+                                </el-col>
+                                <el-col :span="6">
+                                    <el-input v-model="query_param.serial_no" readonly></el-input>
+                                </el-col>
+                                <el-col :span="2">
+                                    <span>主系统</span>
+                                </el-col>
+                                <el-col :span="14">
+                                    <el-input readonly></el-input>
+                                </el-col>
+                            </el-row>
+                            <el-row :gutter="10">
+                                <el-col :span="2">
+                                    <span>需求分类</span>
+                                </el-col>
+                                <el-col :span="6">
+                                    <el-input readonly v-model="query_param.request_people"></el-input>
+                                </el-col>
+                                <el-col :span="2">
+                                    <span>状态</span>
+                                </el-col>
+                                <el-col :span="6">
+                                    <el-input readonly v-model="query_param.status"></el-input>
+                                </el-col>
+                                <el-col :span="2">
+                                    <span>当前处理人</span>
+                                </el-col>
+                                <el-col :span="6">
+                                    <el-input readonly v-model="query_param.status"></el-input>
+                                </el-col>
+                            </el-row>
+                            <el-row :gutter="10">
+                                <el-col :span="2">
+                                    <span>联系人</span>
+                                </el-col>
+                                <el-col :span="6">
+                                    <el-input readonly v-model="query_param.status"></el-input>
+                                </el-col>
+                                <el-col :span="2">
+                                    <span>联系方式</span>
+                                </el-col>
+                                <el-col :span="6">
+                                    <el-input readonly v-model="query_param.status"></el-input>
+                                </el-col>
+                                <el-col :span="2">
+                                    <span>提交日期</span>
+                                </el-col>
+                                <el-col :span="6">
+                                    <el-input readonly v-model="query_param.status"></el-input>
+                                </el-col>
+                            </el-row>
+                        </div>
+                    </el-scrollbar>
+                </el-tab-pane>
+                <el-tab-pane name="requirement-content" label="申请材料">
+                    <el-scrollbar height="400px"></el-scrollbar>
+                </el-tab-pane>
+                <el-tab-pane name="issue-date" label="排期">
+                    <el-scrollbar height="400px">
+                        <el-table style="width:100%;height:400px;" border stripe>
+                            <el-table-column label="系统" align="center" min-width="200"></el-table-column>
+                            <el-table-column label="功能" align="center" min-width="200"></el-table-column>
+                            <el-table-column label="首次排期" align="center" width="150"></el-table-column>
+                            <el-table-column label="最新排期" align="center" width="150"></el-table-column>
+                        </el-table>
+                    </el-scrollbar>
+                </el-tab-pane>
+                <el-tab-pane name="comment" label="备注">
+                    <el-scrollbar height="400px">
+                        <p>hello world</p>
+                        <p><span style="font-size: 24px;">ejfalsjfoewafsdjfdsfewo;sd;fk</span></p>
+                        <ol>
+                            <li><span style="color: rgb(225, 60, 57); font-size: 24px;">12344</span></li>
+                            <li><span style="font-size: 24px;">33445</span></li>
+                        </ol>
+                        <p><br></p>
+                    </el-scrollbar>
+                </el-tab-pane>
+            </el-tabs>
+            <!-- <template #footer>
+                <div class="dialogFooter">
+                    <el-button type="primary" @click="dialogRequirementDetailVisible = false;">关闭</el-button>
+                </div>
+            </template> -->
+        </el-dialog>
+    </div>
+</template>
+
+<script>
+import { reactive, computed, onBeforeMount } from "vue";
+//import { Editor, Toolbar } from '@wangeditor/editor-for-vue';
+import { requirementTestData } from '@/test/data/TestData';
+import router from "@/router/index";
+
+export default {
+    name: "requirement-manager",
+    setup()
+    {
+        const requirement_data = requirementTestData;
+        const ui = reactive(
+            {
+                table_current_page: 1,//分页组件当前的页面索引
+                table_page_size: 10,
+                dialogRequirementDetailVisible: false, //需求详情对话框是否显示
+                dialogRequirementDetailLoadingVisible: true,
+                activeTabName: "requirement-detail",
+                requirement_status: [
+                    "未提交", "部门审核", "需求分析", "技术开发", "待发布", "已发布", "被退回",
+                ],
+            });
+        const query_param = reactive(
+            {
+                title: "",
+                serial_no: "",
+                request_people: "",
+                commit_start_date: new Date(),
+                commit_end_date: new Date(),
+                status: "",
+            });
+
+        const tableHeight = computed(() =>
+        {
+            return 10 * 50 + 40;
+        });
+
+        const tableData = computed(() =>
+        {
+            const startIndex = ui.table_page_size * (ui.table_current_page - 1);
+            const endIndex = (ui.table_page_size * ui.table_current_page);
+
+            return requirement_data.slice(startIndex, endIndex);
+        });
+
+        function onTablePageSizeChange(pageSize)
+        {
+            console.log("选择的pageSize", pageSize);
+            ui.table_page_size = pageSize;
+        }
+        //用户变更当前页时消息处理函数
+        function onCurrentPageIndexChange(pageIndex)
+        {
+            ui.table_current_page = pageIndex;
+        }
+
+        function addNewRequirement()
+        {
+            //console.log("router", this.$route);
+            router.push({
+                name: "RequirementEditing",
+                query: {
+                    serial: "new",
+                }
+            });
+        }
+
+        function editRequirement(requirement_serial)
+        {
+            window.localStorage.setItem("requirement_serial", requirement_serial);
+
+            router.push({
+                name: "RequirementEditing",
+                query: {
+                    serial: requirement_serial,
+                }
+            });
+        }
+
+        onBeforeMount(() =>
+        {
+            query_param.commit_end_date = new Date(Date.now());
+            query_param.commit_start_date = new Date();
+
+            query_param.commit_start_date.setMonth(query_param.commit_end_date.getMonth() - 1);
+        });
+
+        return {
+            //data
+            requirement_data,
+            ui,
+            query_param,
+            //计算属性
+            tableHeight,
+            tableData,
+            //方法
+            editRequirement,
+            addNewRequirement,
+            onCurrentPageIndexChange,
+            onTablePageSizeChange,
+            //生命周期
+            onBeforeMount,
+        };
+    },
+};
+</script>
+
+<style scoped>
+/* 整个页面的外壳 ******************************/
+.requirement_wrapper {
+    padding: 15px 10px;
+    background-color: #fff;
+    border-radius: 5px;
+    box-shadow: 0px 0px 20px -10px rgb(14 18 22 / 25%);
+}
+
+.requirement_wrapper:hover {
+    box-shadow: 0px 0px 20px -10px rgb(14 18 22 / 40%);
+}
+
+.requirement_wrapper>*+* {
+    margin-top: 15px;
+}
+
+
+/* 查询框 **********************************/
+.search-box {
+    padding: 0 10px;
+}
+
+.search-box span {
+    font-weight: normal;
+    display: block;
+    text-align: right;
+    font-size: 15px;
+    color: #5f5f5f;
+}
+
+.search-box>.el-row {
+    display: flex;
+    align-items: center;
+    justify-content: left;
+}
+
+.search-box .el-row+.el-row {
+    margin-top: 10px;
+}
+
+/* 查询结果筛选框 */
+.tool-button-wrapper {
+    padding: 0px 15px;
+    width: 100%;
+}
+
+.tool-button-wrapper>.el-row {
+    display: flex;
+    align-items: center;
+    justify-content: left;
+}
+
+.tool-button-wrapper span {
+    font-weight: small;
+    display: block;
+    text-align: right;
+    font-size: 15px;
+    color: #5f5f5f;
+}
+
+.tool-button-wrapper .el-checkbox {
+    font-size: 15px;
+}
+
+.table-display-wrapper {
+    display: flex;
+    align-items: center;
+    justify-content: right;
+}
+
+.button-wrapper-right {
+    display: flex;
+    justify-content: right;
+    align-items: center;
+}
+
+.button-wrapper-left {
+    display: flex;
+    justify-content: left;
+    align-items: center;
+}
+
+.result-filter-wrapper {
+    padding: 0 5px;
+}
+
+/* 需求列表 */
+.requirement-title {
+    display: block;
+    text-align: left;
+    width: 100%;
+    font-size: 14px;
+}
+
+.requirement-serial {
+    width: 100%;
+    text-align: center;
+    cursor: pointer;
+}
+
+/***分页组件 *************/
+.pagination_wrapper {
+    padding-right: 15px;
+    display: flex;
+    justify-content: right;
+}
+
+/*需求详情对话框 */
+.requirement-detail-dialog {
+    width: 400px;
+    height: 600px;
+}
+
+.requirement-detail-dialog .el-row {
+    display: flex;
+    justify-content: left;
+    align-items: center;
+    /* margin-top: 10px; */
+}
+
+.requirement-detail-dialog .el-row+.el-row {
+    margin-top: 10px;
+}
+
+.requirement-detail-wrapper {
+    padding: 0px 10px;
+}
+
+.requirement-detail-wrapper span {
+    display: block;
+    text-align: right;
+    width: 100%;
+}
+</style>
+<style>
+.requirement-detail-dialog .el-dialog__body {
+    padding: 0px 15px 15px 15px !important;
+}
+</style>