继续使用setup()函数。

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

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

code/web/IT工具综合平台/src/views/account/Login.vue

@@ -3,8 +3,8 @@
  * @Author: Kane
  * @Date: 2022-12-14 15:23:54
  * @LastEditors: Kane
- * @LastEditTime: 2023-01-28 21:35:47
+ * @LastEditTime: 2023-02-03 15:46:55
- * @FilePath: \admin_system\src\views\account\Login.vue
+ * @FilePath: \IT工具综合平台\src\views\account\Login32.vue
  * @Description: 
  * 
  * Copyright (c) ${2022} by Kane, All Rights Reserved. 
@@ -13,8 +13,8 @@
   <div id="login">
     <div class="form-warp">
       <ul class="menu-tab">
-        <li :class="{ 'current': current_menu === item.type }" @click="onToggleMenu(item.type)" v-for="item in tab_menu"
+        <li :class="{ 'current': ui.current_menu === item.type }" @click="onToggleMenu(item.type)"
-          :key="item.type">{{ item.label }}
+          v-for="item in tab_menu" :key="item.type">{{ item.label }}
         </li>
       </ul>
       <!-- <el-form ref="form" :model="form"> -->
@@ -27,7 +27,7 @@
           <label class="form-label">密码</label>
           <el-input type="password" v-model.lazy.trim="loginForm.password"></el-input>
         </el-form-item>
-        <el-form-item v-show="current_menu === tab_menu[1].type">
+        <el-form-item v-show="ui.current_menu === tab_menu[1].type">
           <label class="form-label">确认密码</label>
           <el-input type="password" disabled v-model.lazy.trim="loginForm.confirm_password"></el-input>
         </el-form-item>
@@ -45,7 +45,7 @@
         <el-form-item>
           <el-button type="primary" class="el-button-block" @click="login" :disabled="submit_btn_disable"
             :loading="submit_btn_loading">
-            {{ current_menu === "login" ? "登录" : "注册" }}
+            {{ ui.current_menu === "login" ? "登录" : "注册" }}
           </el-button>
         </el-form-item>
       </el-form>
@@ -54,51 +54,61 @@
 </template>
 
 <script>
+import { reactive, onBeforeMount, onMounted } from "vue";
+import { useStore } from "vuex";
+import { useRouter } from "vue-router";
 import { Login } from "@/utils/api/info/account";
 import { ElMessage } from "element-plus";
-import router from "../../router/index";
+//import router from "../../router/index";
 
 export default {
   name: "loginPage",
-  data()
+  setup()
   {
-    return {
+    const store = useStore();
-      loginForm: {
+    const router = useRouter();
-        username: "",
+
-        password: "",
+    const loginForm = reactive({
-        confirm_password: "",
+      username: "",
-        validateCode: "",
+      password: "",
-      },
+      confirm_password: "",
-      tab_menu: [
+      validateCode: "",
+    });
+
+    const tab_menu = reactive(
+      [
         { type: "login", label: "登录" },
         { type: "regiester", label: "注册" },
-      ],
+      ]);
-      current_menu: "",
+
-      staffInfo: null,
+    const ui = reactive(
-      submit_btn_disable: false,
+      {
-      submit_btn_loading: false,
+        current_menu: "",
-    };
+        staffInfo: null,
-  },
+        submit_btn_disable: false,
-  methods: {
+        submit_btn_loading: false,
-    onToggleMenu(type)
+      });
+
+    const onToggleMenu = (type) =>
     {
-      this.current_menu = type;
+      ui.current_menu = type;
       console.log(process.env.VUE_APP_API_URL_LOGIN);
-    },
+    };
-    getValidateCode()
+
+    const getValidateCode = () =>
     {
       ElMessage({
         message: "测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字",
         center: true,
         type: "error",
       });
-    },
+    };
     /**
      * 登录
      */
-    login()
+    const login = () =>
     {
-      if (this.loginForm.username.length === 0 || this.loginForm.password === 0)
+      if (loginForm.username.length === 0 || loginForm.password === 0)
       {
         ElMessage({
           message: "请填写您的P13账号和密码！",
@@ -108,12 +118,12 @@ export default {
         return;
       }
 
-      this.submit_btn_disable = true;
+      ui.submit_btn_disable = true;
-      this.submit_btn_loading = true;
+      ui.submit_btn_loading = true;
 
       const userInfo = {
-        p13account: this.loginForm.username,
+        p13account: loginForm.username,
-        password: this.loginForm.password,
+        password: loginForm.password,
       };
 
       Login(userInfo)
@@ -133,10 +143,10 @@ export default {
               center: true,
             });
 
-            this.staffInfo = data.staffInfo;
+            ui.staffInfo = data.staffInfo;
 
             //保存用户信息和token
-            this.saveUserInfo(data);
+            saveUserInfo(data);
 
             //验证成功，跳转路由
             router.push("/Desktop");
@@ -150,8 +160,8 @@ export default {
               center: true,
             });
 
-            this.submit_btn_disable = false;
+            ui.submit_btn_disable = false;
-            this.submit_btn_loading = false;
+            ui.submit_btn_loading = false;
           }
         })
         .catch((error) =>
@@ -165,14 +175,16 @@ export default {
             center: true,
           });
 
-          this.submit_btn_disable = false;
+          ui.submit_btn_disable = false;
-          this.submit_btn_loading = false;
+          ui.submit_btn_loading = false;
         });
-    },
+    };
-    saveUserInfo(userInfo) //将获取到的用户信息和token保存到vuex和localStorage
+
+    //将获取到的用户信息和token保存到vuex和localStorage
+    const saveUserInfo = (userInfo) =>
     {
       //保存到vuex
-      this.$store.commit("app/SET_USERINFO", userInfo);
+      store.commit("app/SET_USERINFO", userInfo);
 
       //保存到localStorage
       const token = userInfo.token;
@@ -180,17 +192,31 @@ export default {
 
       window.localStorage.setItem("token", token);
       window.localStorage.setItem("user_info", userInfoJson);
-    }
+    };
-  },
+
-  created()
+    onBeforeMount(() =>
-  {
+    {
-    //初始化菜单选项
+      //初始化菜单选项
-    this.current_menu = this.tab_menu[0].type;
+      ui.current_menu = tab_menu[0].type;
-  },
+    });
-  mounted()
+
-  {
+    onMounted(() =>
-    //清理状态
+    {
-    this.$store.state.app.userInfo = null;
+      //清理状态
+      store.state.app.userInfo = null;
+    });
+
+    return {
+      //数据
+      ui,
+      loginForm,
+      tab_menu,
+      //方法
+      onToggleMenu,
+      saveUserInfo,
+      login,
+      getValidateCode,
+    };
   },
 };
 </script>

code/web/IT工具综合平台/src/views/account/Loginbak.vue

@@ -0,0 +1,259 @@
+<!-- eslint-disable no-unused-vars -->
+<!--
+ * @Author: Kane
+ * @Date: 2022-12-14 15:23:54
+ * @LastEditors: Kane
+ * @LastEditTime: 2023-01-28 21:35:47
+ * @FilePath: \admin_system\src\views\account\Login.vue
+ * @Description: 
+ * 
+ * Copyright (c) ${2022} by Kane, All Rights Reserved. 
+-->
+<template>
+  <div id="login">
+    <div class="form-warp">
+      <ul class="menu-tab">
+        <li :class="{ 'current': current_menu === item.type }" @click="onToggleMenu(item.type)" v-for="item in tab_menu"
+          :key="item.type">{{ item.label }}
+        </li>
+      </ul>
+      <!-- <el-form ref="form" :model="form"> -->
+      <el-form ref="form">
+        <el-form-item>
+          <label class="form-label">用户名</label>
+          <el-input type="text" v-model.lazy.trim="loginForm.username"></el-input>
+        </el-form-item>
+        <el-form-item>
+          <label class="form-label">密码</label>
+          <el-input type="password" v-model.lazy.trim="loginForm.password"></el-input>
+        </el-form-item>
+        <el-form-item v-show="current_menu === tab_menu[1].type">
+          <label class="form-label">确认密码</label>
+          <el-input type="password" disabled v-model.lazy.trim="loginForm.confirm_password"></el-input>
+        </el-form-item>
+        <el-form-item>
+          <label class="form-label">验证码</label>
+          <el-row :gutter="10">
+            <el-col :span="14">
+              <el-input type="text" disabled></el-input>
+            </el-col>
+            <el-col :span="10">
+              <el-button type="danger" disabled class="el-button-block" @click="getValidateCode()">获取验证码</el-button>
+            </el-col>
+          </el-row>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" class="el-button-block" @click="login" :disabled="submit_btn_disable"
+            :loading="submit_btn_loading">
+            {{ current_menu === "login" ? "登录" : "注册" }}
+          </el-button>
+        </el-form-item>
+      </el-form>
+    </div>
+  </div>
+</template>
+
+<script>
+import { Login } from "@/utils/api/info/account";
+import { ElMessage } from "element-plus";
+import router from "../../router/index";
+
+export default {
+  name: "loginPage",
+  data()
+  {
+    return {
+      loginForm: {
+        username: "",
+        password: "",
+        confirm_password: "",
+        validateCode: "",
+      },
+      tab_menu: [
+        { type: "login", label: "登录" },
+        { type: "regiester", label: "注册" },
+      ],
+      current_menu: "",
+      staffInfo: null,
+      submit_btn_disable: false,
+      submit_btn_loading: false,
+    };
+  },
+  methods: {
+    onToggleMenu(type)
+    {
+      this.current_menu = type;
+      console.log(process.env.VUE_APP_API_URL_LOGIN);
+    },
+    getValidateCode()
+    {
+      ElMessage({
+        message: "测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字",
+        center: true,
+        type: "error",
+      });
+    },
+    /**
+     * 登录
+     */
+    login()
+    {
+      if (this.loginForm.username.length === 0 || this.loginForm.password === 0)
+      {
+        ElMessage({
+          message: "请填写您的P13账号和密码！",
+          type: "error",
+        });
+
+        return;
+      }
+
+      this.submit_btn_disable = true;
+      this.submit_btn_loading = true;
+
+      const userInfo = {
+        p13account: this.loginForm.username,
+        password: this.loginForm.password,
+      };
+
+      Login(userInfo)
+        .then((response) =>
+        {
+          //成功获取到返回值时的响应函数，要判断返回值的成功标志
+          //验证成功，将获取到的token和用户信息保存到vuex和localStoreage
+          //然后router.push，进行路由跳转到控制台
+          const data = response.data;
+
+          //判断是否成功，显示提示信息
+          if (data.success === true)
+          {
+            ElMessage({
+              message: data.message,
+              type: "success",
+              center: true,
+            });
+
+            this.staffInfo = data.staffInfo;
+
+            //保存用户信息和token
+            this.saveUserInfo(data);
+
+            //验证成功，跳转路由
+            router.push("/Desktop");
+          }
+          else
+          {
+            //验证失败
+            ElMessage({
+              message: data.message,
+              type: "error",
+              center: true,
+            });
+
+            this.submit_btn_disable = false;
+            this.submit_btn_loading = false;
+          }
+        })
+        .catch((error) =>
+        {
+          //没有获取到响应数据
+          console.log(error);
+
+          ElMessage({
+            message: error.message,
+            type: "error",
+            center: true,
+          });
+
+          this.submit_btn_disable = false;
+          this.submit_btn_loading = false;
+        });
+    },
+    saveUserInfo(userInfo) //将获取到的用户信息和token保存到vuex和localStorage
+    {
+      //保存到vuex
+      this.$store.commit("app/SET_USERINFO", userInfo);
+
+      //保存到localStorage
+      const token = userInfo.token;
+      const userInfoJson = JSON.stringify(userInfo);
+
+      window.localStorage.setItem("token", token);
+      window.localStorage.setItem("user_info", userInfoJson);
+    }
+  },
+  created()
+  {
+    //初始化菜单选项
+    this.current_menu = this.tab_menu[0].type;
+  },
+  mounted()
+  {
+    //清理状态
+    this.$store.state.app.userInfo = null;
+  },
+};
+</script>
+
+<style scoped>
+#login {
+  height: 100vh;
+  background-color: #344a5f;
+  padding-top: 50px;
+}
+
+.form-warp {
+  width: 320px;
+  padding: 30px;
+  margin: auto;
+  background-color: #ffffff10;
+  border-radius: 5px;
+}
+
+/*.menu-tab {
+  text-align: center;
+  margin-bottom: 15px;
+
+  li {
+    display: inline-block;
+    padding: 10px 24px;
+    margin: 0 10px;
+    color: #fff;
+    font-size: 16px;
+    border-radius: 5px;
+    cursor: pointer;
+
+    &.current {
+      background-color: rgba(0, 0, 0, 0.1);
+    }
+  }
+}*/
+.menu-tab {
+  text-align: center;
+  margin-bottom: 15px;
+}
+
+.menu-tab li {
+  display: inline-block;
+  padding: 10px 24px;
+  margin: 0 10px;
+  color: #fff;
+  font-size: 14px;
+  border-radius: 5px;
+  cursor: pointer;
+}
+
+.menu-tab .current {
+  background-color: rgba(0, 0, 0, 0.1);
+}
+
+.form-label {
+  display: block;
+  color: #fff;
+  font-size: 14px;
+}
+
+.el-button-block {
+  width: 100%;
+}
+</style>

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

@@ -2,8 +2,8 @@
  * @Author: Kane
  * @Date: 2023-01-25 23:16:29
  * @LastEditors: Kane
- * @LastEditTime: 2023-01-25 23:19:00
+ * @LastEditTime: 2023-02-03 11:07:02
- * @FilePath: \admin_system\src\views\requirement\RequirementEditing.vue
+ * @FilePath: \IT工具综合平台\src\views\requirement\RequirementEditing.vue
  * @Description: 
  * 
  * Copyright (c) ${2022} by Kane, All Rights Reserved. 
@@ -23,16 +23,28 @@
 </template>
 
 <script>
+import { onBeforeMount, onBeforeUpdate } from 'vue';
+import { useRoute } from 'vue-router';
+
 export default {
     name: "requirement-editing",
-    data()
+    setup()
     {
+        const route = useRoute();
+
+        //生命周期
+        onBeforeMount(() =>
+        {
+            console.log("接收的参数：", route.query);
+        });
+
+        onBeforeUpdate(() =>
+        {
+            console.log("接收的参数：", route.query);
+        });
+
         return {};
     },
-    mounted()
-    {
-        console.log("接收的参数：", this.$route.query);
-    }
 };
 </script>
 

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

@@ -1,8 +1,8 @@
 <!--
  * @Author: Kane
- * @Date: 2023-01-25 23:13:47
+ * @Date: 2023-02-02 22:19:12
  * @LastEditors: Kane
- * @LastEditTime: 2023-02-02 22:16:13
+ * @LastEditTime: 2023-02-03 16:09:22
  * @FilePath: \IT工具综合平台\src\views\requirement\RequirementManager.vue
  * @Description: 
  * 
@@ -18,7 +18,7 @@
                     <span>标题：</span>
                 </el-col>
                 <el-col :span="16">
-                    <el-input v-model.trim.lazy="this.query_param.title"></el-input>
+                    <el-input v-model.trim.lazy="query_param.title"></el-input>
                 </el-col>
             </el-row>
             <el-row :gutter="10">
@@ -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="ui.dialogRequirementDetailVisible = true;" class="requirement-serial">{{
+                    <span @click="showRequirementDetail(requirement.row.serial_no)" class="requirement-serial">{{
                         requirement.row.serial_no
                     }}</span>
                 </template>
@@ -115,22 +115,22 @@
         </el-table>
         <div class="pagination_wrapper">
             <el-pagination class="pull_left" @current-change="onCurrentPageIndexChange"
-                @size-change="onTablePageSizeChange" size="small" background v-model="this.ui.table_current_page"
+                @size-change="onTablePageSizeChange" size="small" background v-model="ui.table_current_page"
-                :page-size="this.ui.table_page_size" :page-sizes="[10, 20, 50, 100]"
+                :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"
+            width="900px" :close-on-click-modal="true" :close-on-press-escape="false" :show-close="true" :center="false"
-            :center="false">
+            @close="closeRequirementDetail">
-            <el-tabs :v-loading="ui.dialogRequirementDetailLoadingVisible" v-model="ui.activeTabName">
+            <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>标题</span>
+                                    <span>标题1</span>
                                 </el-col>
                                 <el-col :span="22">
                                     <el-input readonly></el-input>
@@ -228,71 +228,75 @@
 </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";
+import { useRouter } from "vue-router";
+//import router from "@/router/index";
 
 export default {
     name: "requirement-manager",
-    data()
+    setup()
     {
-        return {
+        const router = useRouter();
-            requirement_data: requirementTestData, //需求数据，当前值是测试数据
+
-            ui: {
+        const requirement_data = requirementTestData;
+        const ui = reactive(
+            {
                 table_current_page: 1,//分页组件当前的页面索引
                 table_page_size: 10,
                 dialogRequirementDetailVisible: false, //需求详情对话框是否显示
-                dialogRequirementDetailLoadingVisible: false,
+                dialogRequirementDetailLoadingVisible: true,
                 activeTabName: "requirement-detail",
                 requirement_status: [
                     "未提交", "部门审核", "需求分析", "技术开发", "待发布", "已发布", "被退回",
                 ],
-            },
+            });
-            query_param: {
+        const query_param = reactive(
+            {
                 title: "",
                 serial_no: "",
                 request_people: "",
-                commit_start_date: "",
+                commit_start_date: new Date(),
-                commit_end_date: "",
+                commit_end_date: new Date(),
                 status: "",
-            },
+            });
-        };
+
-    },
+        const tableHeight = computed(() =>
-    computed: {
-        //计算表格的高度
-        tableHeight()
         {
             return 10 * 50 + 40;
-        },
+        });
-        tableData()
-        {
-            const startIndex = this.ui.table_page_size * (this.ui.table_current_page - 1);
-            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);
+        const tableData = computed(() =>
-        },
+        {
-    },
+            const startIndex = ui.table_page_size * (ui.table_current_page - 1);
-    methods: {
+            const endIndex = (ui.table_page_size * ui.table_current_page);
-        onTablePageSizeChange(pageSize)
+
+            return requirement_data.slice(startIndex, endIndex);
+        });
+
+        const onTablePageSizeChange = (pageSize) =>
         {
             console.log("选择的pageSize", pageSize);
-            this.ui.table_page_size = pageSize;
+            ui.table_page_size = pageSize;
-        },
+        };
         //用户变更当前页时消息处理函数
-        onCurrentPageIndexChange(pageIndex)
+        const onCurrentPageIndexChange = (pageIndex) =>
         {
-            this.ui.table_current_page = pageIndex;
+            ui.table_current_page = pageIndex;
-        },
+        };
-        addNewRequirement()
+
+        const addNewRequirement = () =>
         {
-            //console.log("router", this.$route);
             router.push({
                 name: "RequirementEditing",
                 query: {
                     serial: "new",
                 }
             });
-        },
+        };
-        editRequirement(requirement_serial)
+
+        const editRequirement = (requirement_serial) =>
         {
             window.localStorage.setItem("requirement_serial", requirement_serial);
 
@@ -302,17 +306,53 @@ export default {
                     serial: requirement_serial,
                 }
             });
+        };
 
-        },
+        const showRequirementDetail = (serial_no) =>
+        {
+            setTimeout(() =>
+            {
+                ui.dialogRequirementDetailLoadingVisible = false;
+            }, 1000);
+
+            ui.dialogRequirementDetailVisible = true;
+
+            console.log("查看需求号:", serial_no);
+        };
+
+        //需求详情对话框关闭事件
+        const closeRequirementDetail = () =>
+        {
+            ui.dialogRequirementDetailLoadingVisible = true;
+        };
+
+        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,
+            showRequirementDetail,
+            closeRequirementDetail,
+            //生命周期
+            onBeforeMount,
+        };
     },
-    //声明周期
-    created()
-    {
-        this.query_param.commit_end_date = new Date(Date.now());
-        this.query_param.commit_start_date = new Date();
-
-        this.query_param.commit_start_date.setMonth(this.query_param.commit_end_date.getMonth() - 1);
-    }
 };
 </script>
 

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

@@ -1,9 +1,9 @@
 <!--
  * @Author: Kane
- * @Date: 2023-02-02 22:19:12
+ * @Date: 2023-01-25 23:13:47
  * @LastEditors: Kane
- * @LastEditTime: 2023-02-02 23:32:08
+ * @LastEditTime: 2023-02-02 22:16:13
- * @FilePath: \IT工具综合平台\src\views\requirement\RequirementManager32.vue
+ * @FilePath: \IT工具综合平台\src\views\requirement\RequirementManager.vue
  * @Description: 
  * 
  * Copyright (c) ${2022} by Kane, All Rights Reserved. 
@@ -18,7 +18,7 @@
                     <span>标题：</span>
                 </el-col>
                 <el-col :span="16">
-                    <el-input v-model.trim.lazy="query_param.title"></el-input>
+                    <el-input v-model.trim.lazy="this.query_param.title"></el-input>
                 </el-col>
             </el-row>
             <el-row :gutter="10">
@@ -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="showRequirementDetail(requirement.row.serial_no)" class="requirement-serial">{{
+                    <span @click="ui.dialogRequirementDetailVisible = true;" class="requirement-serial">{{
                         requirement.row.serial_no
                     }}</span>
                 </template>
@@ -115,8 +115,8 @@
         </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"
+                @size-change="onTablePageSizeChange" size="small" background v-model="this.ui.table_current_page"
-                :page-size="ui.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>
@@ -124,13 +124,13 @@
         <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-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>
+                                    <span>标题</span>
                                 </el-col>
                                 <el-col :span="22">
                                     <el-input readonly></el-input>
@@ -228,62 +228,61 @@
 </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()
+    data()
     {
-        const requirement_data = requirementTestData;
+        return {
-        const ui = reactive(
+            requirement_data: requirementTestData, //需求数据，当前值是测试数据
-            {
+            ui: {
                 table_current_page: 1,//分页组件当前的页面索引
                 table_page_size: 10,
                 dialogRequirementDetailVisible: false, //需求详情对话框是否显示
-                dialogRequirementDetailLoadingVisible: true,
+                dialogRequirementDetailLoadingVisible: false,
                 activeTabName: "requirement-detail",
                 requirement_status: [
                     "未提交", "部门审核", "需求分析", "技术开发", "待发布", "已发布", "被退回",
                 ],
-            });
+            },
-        const query_param = reactive(
+            query_param: {
-            {
                 title: "",
                 serial_no: "",
                 request_people: "",
-                commit_start_date: new Date(),
+                commit_start_date: "",
-                commit_end_date: new Date(),
+                commit_end_date: "",
                 status: "",
-            });
+            },
-
+        };
-        const tableHeight = computed(() =>
+    },
+    computed: {
+        //计算表格的高度
+        tableHeight()
         {
             return 10 * 50 + 40;
-        });
+        },
-
+        tableData()
-        const tableData = computed(() =>
         {
-            const startIndex = ui.table_page_size * (ui.table_current_page - 1);
+            const startIndex = this.ui.table_page_size * (this.ui.table_current_page - 1);
-            const endIndex = (ui.table_page_size * ui.table_current_page);
+            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 requirement_data.slice(startIndex, endIndex);
+            return this.requirement_data.slice(startIndex, endIndex);
-        });
+        },
-
+    },
-        function onTablePageSizeChange(pageSize)
+    methods: {
+        onTablePageSizeChange(pageSize)
         {
             console.log("选择的pageSize", pageSize);
-            ui.table_page_size = pageSize;
+            this.ui.table_page_size = pageSize;
-        }
+        },
         //用户变更当前页时消息处理函数
-        function onCurrentPageIndexChange(pageIndex)
+        onCurrentPageIndexChange(pageIndex)
         {
-            ui.table_current_page = pageIndex;
+            this.ui.table_current_page = pageIndex;
-        }
+        },
-
+        addNewRequirement()
-        function addNewRequirement()
         {
             //console.log("router", this.$route);
             router.push({
@@ -292,9 +291,8 @@ export default {
                     serial: "new",
                 }
             });
-        }
+        },
-
+        editRequirement(requirement_serial)
-        function editRequirement(requirement_serial)
         {
             window.localStorage.setItem("requirement_serial", requirement_serial);
 
@@ -304,46 +302,17 @@ export default {
                     serial: requirement_serial,
                 }
             });
-        }
 
-        function showRequirementDetail(serial_no)
+        },
-        {
-            setTimeout(() =>
-            {
-                ui.dialogRequirementDetailLoadingVisible = false;
-            }, 5000);
-
-            ui.dialogRequirementDetailVisible = true;
-
-            console.log("查看需求号:", serial_no);
-        }
-
-        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,
-            showRequirementDetail,
-            //生命周期
-            onBeforeMount,
-        };
     },
+    //声明周期
+    created()
+    {
+        this.query_param.commit_end_date = new Date(Date.now());
+        this.query_param.commit_start_date = new Date();
+
+        this.query_param.commit_start_date.setMonth(this.query_param.commit_end_date.getMonth() - 1);
+    }
 };
 </script>