make two pages switchable

package.json

@@ -16,7 +16,8 @@
     "axios": "^0.26.1",
     "core-js": "^3.8.3",
     "element-plus": "^2.1.8",
-    "vue": "^3.2.13"
+    "vue": "^3.2.13",
+    "vue-router": "^4.1.6"
   },
   "devDependencies": {
     "@babel/core": "^7.12.16",

src/App.vue

@@ -2,32 +2,41 @@
   <div id="app">
     <!-- <img alt="Vue logo" src="./assets/logo.png"> -->
     <!-- <HelloWorld msg="Welcome to Your Vue.js App"/> -->
-    <FaasReplay></FaasReplay>
+    <!-- <FaasPerfReplay></FaasPerfReplay> -->
+    <!-- <FaasAttendReplay></FaasAttendReplay> -->
+    <router-view></router-view>
   </div>
 </template>
 
 <script>
 // import HelloWorld from './components/HelloWorld.vue'
-import FaasReplay from './components/FaasReplay.vue'
+// import FaasPerfReplay from './components/FaasPerfReplay.vue'
+// import FaasAttendReplay from './components/FaasAttendReplay.vue'
 
 export default {
   name: 'App',
   components: {
     // HelloWorld,
-    FaasReplay
+    // FaasPerfReplay,
+    // FaasAttendReplay
+
   },
-  data(){
+  data() {
     return {
-      a:100
+      a: 100
     }
   },
-    mounted() {
+  mounted() {
     // `this` refers to the component instance.
+    console.log("app mounted")
     console.log(this.count) // => 1
 
     // data can be mutated as well
     this.count = 2
-  }
+
+    this.$router.push('/attendance')
+  },
+
 }
 </script>
 

src/background.js

@@ -1,6 +1,6 @@
 'use strict'
 
-import { app, protocol, BrowserWindow, ipcMain } from 'electron'
+import { app, protocol, BrowserWindow, ipcMain, Menu } from 'electron'
 import { createProtocol } from 'vue-cli-plugin-electron-builder/lib'
 import installExtension, { VUEJS_DEVTOOLS } from 'electron-devtools-installer'
 import axios from "axios";
@@ -15,10 +15,11 @@ protocol.registerSchemesAsPrivileged([
   { scheme: 'app', privileges: { secure: true, standard: true } }
 ])
 
+let win;
 
 async function createWindow() {
   // Create the browser window.
-  const win = new BrowserWindow({
+   win = new BrowserWindow({
     width: 1024,
     height: 768,
     webPreferences: {
@@ -31,15 +32,44 @@ async function createWindow() {
     }
   })
 
+  const template = [
+    {
+      label: 'Pages',
+      submenu: [
+        {
+          label: 'Attendance',
+          click() {
+            console.log("pages-attendance")
+            win.webContents.postMessage('navigate', 'Attendance')
+          }
+        },
+        {
+          label: 'Performance',
+          click() {
+            console.log("pages-performance")
+            win.webContents.postMessage('navigate', 'Performance')
+
+          }
+        }
+      ]
+    }
+  ];
+
+
   if (process.env.WEBPACK_DEV_SERVER_URL) {
     // Load the url of the dev server if in development mode
+    console.log("webpack env: "+process.env.WEBPACK_DEV_SERVER_URL );
     await win.loadURL(process.env.WEBPACK_DEV_SERVER_URL)
     if (!process.env.IS_TEST) win.webContents.openDevTools()
   } else {
     createProtocol('app')
     // Load the index.html when not in development
+    console.log("appurl: app://./index.html")
     win.loadURL('app://./index.html')
   }
+  const menu = Menu.buildFromTemplate(template);
+  Menu.setApplicationMenu(menu);
+
 }
 
 // Quit when all windows are closed.
@@ -114,6 +144,31 @@ ipcMain.on("query-UAT-Sandbox", function (event, arg) {
   getFaasResult(event, baseFaasUrl, request);
 })
 
+ipcMain.on("query-attend-PROD", function (event, arg) {
+  var request = JSON.parse(arg);
+  var baseFaasUrl = "https://faas.longfor.com/MarketCenter_ChannelSupportTeam/hit/xrobot?intent=API&tenantid=MarketCenter_ChannelSupportTeam&appid=RuntimeCalPayProject&skill=RealtimeCalPaySkillSet-ReplaySalaryAttendanceServiceSkillV2";
+  getFaasResult(event, baseFaasUrl, request);
+})
+
+ipcMain.on("query-attend-UAT", function (event, arg) {
+  var request = JSON.parse(arg);
+  var baseFaasUrl = "http://10.231.143.223:18991/hit/xrobot?intent=APIGateway&tenantid=MarketCenter_ChannelSupportTeam&appid=RuntimeCalPayProject&skill=RealtimeCalPaySkillSet-ReplaySalaryAttendanceServiceSkillV2";
+  getFaasResult(event, baseFaasUrl, request);
+
+})
+
+ipcMain.on("query-attend-UAT-Sandbox", function (event, arg) {
+  var request = JSON.parse(arg);
+  console.log("query-attend-UAT-Sandbox ")
+  var baseFaasUrl = "http://10.231.143.223:18992/hit/xrobot?tenantid=MarketCenter_ChannelSupportTeam&appid=sandbox&skill=RuntimeCalPaySkillSet-ReplaySalaryAttendanceServiceSkillV2&intent=APIGateway&tenant_uid=renxiaoyin";
+  getFaasResult(event, baseFaasUrl, request);
+})
+
+ipcMain.on('navigate', (event, route) => {
+  win.webContents.send('navigate', route)
+})
+
+
 function getFaasResult(event, url, request) {
   axios.post(url, request).then((res) => {
     console.log(res.data);

src/components/FaasAttendReplay.vue

@@ -0,0 +1,313 @@
+<template>
+  <!-- <div>
+    <button v-if="true" @click="testBreakPoint">TestBreakPoint</button>
+  </div> -->
+
+  <el-row>
+    <el-col :span="8">
+      <span>Env</span>
+    </el-col>
+    <el-col :span="12">
+      <div class="grid-content bg-purple">
+
+        <el-select v-model="env">
+          <el-option v-for="item in envOpts" :key="item.env" :label="item.env" :value="item.env"></el-option>
+        </el-select>
+      </div>
+    </el-col>
+  </el-row>
+
+
+  <el-row>
+    <el-col :span="8">
+      <span>ProjectId</span>
+    </el-col>
+    <el-col :span="12">
+      <div class="grid-content bg-purple">
+        <!-- <span>projectId</span> -->
+        <el-input v-model="projectId" />
+      </div>
+    </el-col>
+  </el-row>
+
+  <el-row>
+    <el-col :span="8">
+      <span>EmployeeId</span>
+    </el-col>
+    <el-col :span="12">
+      <div class="grid-content bg-purple-light">
+        <el-input v-model="employeeId" />
+      </div>
+    </el-col>
+  </el-row>
+
+  <el-row>
+    <el-col :span="8">
+      <span>StartDate</span>
+    </el-col>
+    <el-col :span="12">
+      <div class="grid-content bg-purple-light">
+        <el-input v-model="startDate" />
+      </div>
+    </el-col>
+  </el-row>
+
+  <el-row>
+    <el-col :span="8">
+      <span>DateDate</span>
+    </el-col>
+    <el-col :span="12">
+      <div class="grid-content bg-purple-light">
+        <el-input v-model="endDate" />
+      </div>
+    </el-col>
+  </el-row>
+
+  <el-row>
+    <el-col :span="8">
+      <span>Workflows</span>
+    </el-col>
+    <el-col :span="12">
+      <div class="grid-content bg-purple-light">
+        <el-input v-model="workflows" />
+      </div>
+    </el-col>
+  </el-row>
+
+  <el-row>
+    <el-col :span="12">
+      <div class="grid-content bg-purple-light">
+        <el-button type="primary" @click="onQuerySubmit">Submit</el-button>
+      </div>
+    </el-col>
+  </el-row>
+  <el-row>
+    <el-col>
+      <el-table :data="processMsgs">
+        <el-table-column type="expand">
+          <template #default="props">
+            <el-table :data="props.row.data">
+              <!-- <el-table-column prop="groupId"></el-table-column>
+              <el-table-column prop="groupName"></el-table-column> -->
+              <el-table-column v-for="(item, key) in props.row.dataTitles" :key="key" :prop="item.value"
+                :label="item.label"></el-table-column>
+            </el-table>
+          </template>
+        </el-table-column>
+        <el-table-column prop="component" label="Component"></el-table-column>
+        <el-table-column prop="message" label="Message"></el-table-column>
+      </el-table>
+    </el-col>
+  </el-row>
+  <!-- <el-row>
+    <el-col :span="24">
+      <div class="grid-content bg-purple-light">
+        <el-input v-model="rawProcessMsgs" :autosize="{ minRows: 2 }" type="textarea" />
+      </div>
+    </el-col>
+    </el-row> -->
+
+</template>
+
+<script>
+import axios from "axios";
+// import { ipcRenderer } from "electron";
+export default {
+  name: "FaasAttendReplay",
+  data() {
+    return {
+      count: 1,
+      componentName: "FaasAttendReplayComponent",
+      employeeId: 2020639594,
+      projectId: "035C4B8C-7099-1EDD-95BB-3DF915FC4A30",
+      startDate: "2023-02-01",
+      endDate: "2023-02-15",
+      workflows: 16,
+      rawProcessMsgs: null,
+      processMsgs: null,
+      baseUrl: null,
+      env: "PROD",
+      envOpts: [{
+        env: "PROD",
+        // baseUrl: "https://faas.longfor.com/MarketCenter_ChannelSupportTeam/hit/xrobot?intent=API&tenantid=MarketCenter_ChannelSupportTeam&appid=RuntimeCalPayProject&skill=RealtimeCalPaySkillSet-CalPerfReplay"
+      }, {
+        env: "UAT",
+        baseUrl: "http://10.231.143.223:18991/hit/xrobot?intent=APIGateway&tenantid=MarketCenter_ChannelSupportTeam&appid=RuntimeCalPayProject&skill=RealtimeCalPaySkillSet-ReplaySalaryAttendanceServiceSkillV2"
+      }, {
+        env: "UAT-Sandbox",
+        baseUrl: "http://10.231.143.223:18992/hit/xrobot?intent=APIGateway&tenantid=MarketCenter_ChannelSupportTeam&appid=RuntimeCalPayProject&skill=RealtimeCalPaySkillSet-ReplaySalaryAttendanceServiceSkillV2&tenant_uid=renxiaoyin"
+      }]
+    };
+  },
+  mounted() {
+    console.log(this.count);
+    window.ipcRenderer.receive("navigate", (param) => {
+      console.log(param)
+      if (param == "Performance") {
+        console.log(" Go Performance")
+        this.$router.push('/perf');
+      }
+    });
+  },
+  methods: {
+    onToggle() {
+      this.$router.push('/perf')
+    },
+
+    testBreakPoint() {
+
+      this.count++;
+      // console.log(this.count);
+      console.log(this.baseUrl);
+
+      axios.post("https://api-uat.longfor.com/mfp-pc/a/login", {}).then((res) => {
+        console.log(res.data);
+        event.sender.send("get-result", res.data);
+      }).catch((err) => {
+        console.log(err);
+      });
+    },
+    onQuerySubmit() {
+      console.log(this.mobilePhone);
+      console.log(this.projectId);
+      // var url =
+      // "https://faas.longfor.com/MarketCenter_ChannelSupportTeam/hit/xrobot?intent=API&tenantid=MarketCenter_ChannelSupportTeam&appid=RuntimeCalPayProject&skill=RealtimeCalPaySkillSet-CalPerfReplay";
+      var request = {
+        projectId: this.projectId,
+        workflows: this.workflows,
+        startDate: this.startDate,
+        endDate: this.endDate,
+        employeeId: this.employeeId,
+        companyId: "Placeholder3",
+        companyName: "Placeholder1",
+        projectName: "Placeholder2"
+
+      };
+      console.log(this.env)
+      var ipcReceiverName = "query-attend-" + this.env;
+      console.log(ipcReceiverName)
+      var encodedRequest = JSON.stringify(request);
+      window.ipcRenderer.send(ipcReceiverName, encodedRequest);
+      window.ipcRenderer.receive("get-result", (param) => {
+        console.log("ipc receive");
+        console.log(param);
+        var rawProcessMsgs = JSON.parse(param.rs);
+        this.processMsgs = this.reformMsgs(rawProcessMsgs);
+        console.log(this.processMsgs);
+        this.processMsgs.forEach(item => {
+
+          if (Array.isArray(item.data)) {
+            // extract data title
+            var firstRow = item.data[0];
+            if (firstRow == undefined || firstRow == null) {
+              item.data = [];
+              item.dataTitles = [{
+                value: "Result",
+                label: "Result"
+              }]
+            }
+            else {
+              item.dataTitles = [];
+              for (var property in firstRow) {
+                if (Object.prototype.hasOwnProperty.call(firstRow, property)) {
+                  item.dataTitles.push({
+                    value: property,
+                    label: property
+                  })
+                }
+              }
+              console.log(JSON.stringify(item.dataTitles));
+
+            }
+          }
+          else {
+            if (typeof (item.data) == "string" || typeof (item.data) == "number" || typeof (item.data) == "bigint" || typeof (item.data) == "boolean") {
+              // set fixed data title
+              item.dataTitles = [{
+                value: "Result",
+                label: "Result"
+              }]
+              item.data = [{ Result: item.data }];
+            }
+            else {
+              item.dataTitles = [];
+              item.data = [item.data];
+              var firstRow2 = item.data[0];
+              for (var property2 in firstRow2) {
+                if (Object.prototype.hasOwnProperty.call(firstRow2, property2)) {
+                  item.dataTitles.push({
+                    value: property2,
+                    label: property2
+                  })
+                }
+              }
+            }
+          }
+        });
+        this.rawProcessMsgs = param.rs
+      });
+    },
+    reformMsgs(msgs) {
+      var normalizedMsgs = [];
+      console.log("begin reform")
+      msgs.forEach(msg => {
+        if (Array.isArray(msg.data) || typeof (msg.data) == "string" || typeof (msg.data) == "number" || typeof (msg.data) == "bigint" || typeof (msg.data) == "boolean") {
+          normalizedMsgs.push(msg);
+        }
+        else {
+          if (this.isMixed(msg.data)) {
+            if (msg.message == '业绩与模板相匹配') {
+              console.log(1);
+              var template = msg.data.template;
+              var newMsg = {
+                message: `业绩与模板相匹配:basicTemplateId=${template.basicId},templateCode=${template.paymentCode} subTemplateId=${template.subTemplateId}`,
+                data: msg.data.performance,
+                component: msg.component
+              }
+              console.log(2);
+              normalizedMsgs.push(newMsg);
+            }
+            else if (msg.message == '业绩与模板不匹配') {
+              var subTemplates = msg.data.template.subTemplates;
+              console.log(3);
+              var templateMsg = {
+                message: `业绩与模板不匹配: basicTemplateId=${msg.data.template.basicId}`,
+                data: subTemplates,
+                component: msg.component
+              };
+              console.log(4);
+              normalizedMsgs.push(templateMsg);
+              var perfMsg = {
+                message: `未匹配业绩`,
+                data: msg.data.performance,
+                component: msg.component
+              }
+              normalizedMsgs.push(perfMsg);
+            } else {
+              normalizedMsgs.push(msg)
+            }
+          }
+          else {
+            normalizedMsgs.push(msg);
+          }
+        }
+      });
+      console.log("end reform")
+      return normalizedMsgs;
+
+
+    },
+    isMixed(data) {
+      console.log('ismixed')
+      if (data == null || data == undefined) return false;
+      if (data.performance != null && data.performance != undefined && data.template != null && data.template != undefined)
+        return true;
+      return false;
+    }
+  },
+};
+</script>
+
+<style scoped>
+
+</style>

src/components/FaasPerfReplay.vue

@@ -102,11 +102,11 @@
 import axios from "axios";
 // import { ipcRenderer } from "electron";
 export default {
-  name: "FaasReplay",
+  name: "FaasPerfReplay",
   data() {
     return {
       count: 1,
-      componentName: "FaasReplayComponent",
+      componentName: "FaasPerfReplayComponent",
       mobilePhone: 17705928270,
       projectId: "137F5533-B3D7-480D-9048-E23D0E3ABED7",
       yearMonth: "2022-03",
@@ -129,6 +129,13 @@ export default {
   },
   mounted() {
     console.log(this.count);
+    window.ipcRenderer.receive("navigate", (param) => {
+      console.log(param)
+      if (param == "Attendance") {
+        console.log(" Go Attendance")
+        this.$router.push('/attendance');
+      }
+    });
   },
   methods: {
     

src/main.js

@@ -1,9 +1,10 @@
-import { createApp } from 'vue'
+import { createApp} from 'vue'
 import App from './App.vue'
+import router from './router' 
 import ElementPlus from 'element-plus'
 import 'element-plus/dist/index.css'
 
-
 const app = createApp(App);
 app.use(ElementPlus);
+app.use(router);
 app.mount('#app');

src/preload.js

@@ -3,13 +3,13 @@ import { contextBridge, ipcRenderer } from 'electron'
 // Expose ipcRenderer to the client
 contextBridge.exposeInMainWorld('ipcRenderer', {
   send: (channel, data) => {
-    let validChannels = ['query','query-PROD', 'query-UAT', 'query-UAT-Sandbox'] // <-- Array of all ipcRenderer Channels used in the client
+    let validChannels = ['query','query-PROD', 'query-UAT', 'query-UAT-Sandbox', 'query-attend-PROD', 'query-attend-UAT', 'query-attend-UAT-Sandbox','navigate'] // <-- Array of all ipcRenderer Channels used in the client
     if (validChannels.includes(channel)) {
       ipcRenderer.send(channel, data)
     }
   },
   receive: (channel, func) => {
-    let validChannels = ['get-result'] // <-- Array of all ipcMain Channels used in the electron
+    let validChannels = ['get-result','navigate'] // <-- Array of all ipcMain Channels used in the electron
     if (validChannels.includes(channel)) {
       // Deliberately strip event as it includes `sender`
       ipcRenderer.on(channel, (event, ...args) => func(...args))

src/router/index.js

@@ -0,0 +1,22 @@
+import {createRouter,createWebHashHistory} from 'vue-router'
+import FaasPerfReplay from '../components/FaasPerfReplay.vue'
+import FaasAttendReplay from '../components/FaasAttendReplay.vue'
+
+var routes =  [
+        {
+            path: '/attendance',
+            name: 'Attendance',
+            component: FaasAttendReplay
+        },
+        {
+            path: '/perf',
+            name: 'Performance',
+            component: FaasPerfReplay
+        }
+    ];
+var router =  createRouter({
+    history: createWebHashHistory(),
+    routes: routes
+  });
+
+export default router

yarn.lock

@@ -1781,6 +1781,11 @@
   optionalDependencies:
     prettier "^1.18.2 || ^2.0.0"
 
+"@vue/devtools-api@^6.4.5":
+  version "6.5.0"
+  resolved "https://registry.yarnpkg.com/@vue/devtools-api/-/devtools-api-6.5.0.tgz#98b99425edee70b4c992692628fa1ea2c1e57d07"
+  integrity sha512-o9KfBeaBmCKl10usN4crU53fYtC1r7jJwdGKjPT24t348rHxgfpZ0xL3Xm/gLUYnc0oTp8LAmrxOeLyu6tbk2Q==
+
 "@vue/reactivity-transform@3.2.31":
   version "3.2.31"
   resolved "https://registry.npmmirror.com/@vue/reactivity-transform/-/reactivity-transform-3.2.31.tgz#0f5b25c24e70edab2b613d5305c465b50fc00911"
@@ -9406,6 +9411,13 @@ vue-loader@^17.0.0:
     hash-sum "^2.0.0"
     loader-utils "^2.0.0"
 
+vue-router@^4.1.6:
+  version "4.1.6"
+  resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-4.1.6.tgz#b70303737e12b4814578d21d68d21618469375a1"
+  integrity sha512-DYWYwsG6xNPmLq/FmZn8Ip+qrhFEzA14EI12MsMgVxvHFDYvlr4NXpVF5hrRH1wVcDP8fGi5F4rxuJSl8/r+EQ==
+  dependencies:
+    "@vue/devtools-api" "^6.4.5"
+
 vue-style-loader@^4.1.0, vue-style-loader@^4.1.3:
   version "4.1.3"
   resolved "https://registry.npmmirror.com/vue-style-loader/-/vue-style-loader-4.1.3.tgz#6d55863a51fa757ab24e89d9371465072aa7bc35"