首页搜索

src/views/dashboard/index.vue

@@ -10,16 +10,21 @@
   <div class="dashboard">
     <!--分类信息-->
     <div class="flex-wrap tu-fl">
-      <div v-for="(item,index) in flList" :key="index" @click="toApp(item)" class="flex fl-list">
+      <div
+        v-for="(item, index) in flList"
+        :key="index"
+        @click="toApp(item)"
+        class="flex fl-list"
+      >
         <div class="fl-list-img">
           <template v-if="item.logo">
-            <img :alt="item.appName" :src="item.logo">
+            <img :alt="item.appName" :src="item.logo" />
           </template>
           <template v-else>
-            <img src="../../assets/index/log_default.png" :alt="item.appName">
+            <img src="../../assets/index/log_default.png" :alt="item.appName" />
           </template>
         </div>
-        <div class="fl-list-title flex1">{{item.appName}}</div>
+        <div class="fl-list-title flex1">{{ item.appName }}</div>
       </div>
     </div>
     <!--切换和搜索-->
@@ -32,17 +37,37 @@
       </div>
       <div class="search flex-wrap">
         <div class="search-input flex-wrap r24">
-          <el-select :style="inputFlag ? 'width:150px;':'width:200px;'" @change="handleChange" v-model="select" placeholder="功能菜单">
-            <el-option v-for="(item,index) in routes" :key="index" :label="item.meta.title" :value="item.path"></el-option>
+          <el-select
+            :style="inputFlag ? 'width:150px;' : 'width:200px;'"
+            @change="handleChange"
+            v-model="select"
+            placeholder="功能菜单"
+            @keyup.enter.native="searchByLink"
+          >
+            <el-option
+              v-for="(item, index) in routes"
+              :key="index"
+              :label="item.meta.title"
+              :value="item.path"
+            ></el-option>
           </el-select>
-          <el-input v-show="inputFlag" :style="inputFlag ? 'width:330px;':'width:280px;'" @keyup.enter.native="searchByLink" placeholder="如需搜索，请输入" v-model.trim="input" class="input-with-select">
+          <el-input
+            v-show="inputFlag"
+            :style="inputFlag ? 'width:330px;' : 'width:280px;'"
+            @keyup.enter.native="searchByLink"
+            placeholder="如需搜索，请输入"
+            v-model.trim="input"
+            class="input-with-select"
+          >
           </el-input>
           <!-- <el-select v-model="select" slot="prepend" placeholder="功能菜单">
             <el-option v-for="(item,index) in selectArr" :key="index" :label="item.name" :value="item.value"></el-option>
           </el-select> -->
         </div>
         <div class="search-btn">
-          <el-button @click="searchByLink" class="btn" type="primary">进入</el-button>
+          <el-button @click="searchByLink" class="btn" type="primary"
+            >进入</el-button
+          >
         </div>
       </div>
     </div>
@@ -54,15 +79,15 @@
 </template>
 
 <script>
-import { mapGetters } from 'vuex'
-import Analysis from './components/analysis.vue'
-import Journal from './components/journal.vue'
-import { GetOthSystem } from '@/api/apiHome'
-import axios from 'axios'
+import { mapGetters } from "vuex";
+import Analysis from "./components/analysis.vue";
+import Journal from "./components/journal.vue";
+import { GetOthSystem } from "@/api/apiHome";
+import axios from "axios";
 export default {
-  name: 'Dashboard',
+  name: "Dashboard",
   components: { Analysis, Journal },
-  data () {
+  data() {
     return {
       roleFlag: true,
       inputFlag: false,
@@ -118,152 +143,189 @@ export default {
       //分类信息
       flList: [],
       //切换
-      radio: '1',
+      radio: "1",
       flIndex: 0,
-      input: '',
-      select: ''
-    }
+      input: "",
+      select: "",
+    };
   },
   computed: {
-    ...mapGetters(['systemSet', 'UserType', 'UserId']),
-    routes () {
-      const arrs = this.$store.getters.permission_routes
-      const datas = arrs.filter(item => item.meta && item.meta.title != '首页')
-      return datas
-    }
+    ...mapGetters(["systemSet", "UserType", "UserId"]),
+    routes() {
+      const arrs = this.$store.getters.permission_routes;
+      const datas = arrs.filter(
+        (item) => item.meta && item.meta.title != "首页"
+      );
+      return datas;
+    },
   },
-  mounted () {
-    this.isPower()
-    this.getOthSystem()
+  mounted() {
+    this.isPower();
+    this.getOthSystem();
   },
   methods: {
     //搜索-跳转
-    searchByLink () {
-      const url = this.select
-      this.input ? this.$router.push({ path: url, query: { keyWords: this.input } }) : this.$router.push(url)
+    searchByLink() {
+      const url = this.select;
+      this.input
+        ? this.$router.push({ path: url, query: { keyWords: this.input } })
+        : this.$router.push(url);
     },
     //获取接入系统信息
-    async getOthSystem () {
+    async getOthSystem() {
       try {
         const result = await GetOthSystem({
           userId: Number(this.UserId),
-          userType: this.UserType
-        })
+          userType: this.UserType,
+        });
         if (result.code === 0 && result.returnData.length) {
-          this.flList = result.returnData
+          this.flList = result.returnData;
         } else {
-          this.$message.error(result.message)
+          this.$message.error(result.message);
         }
       } catch (error) {
-        console.log('网络错误:', error)
+        console.log("网络错误:", error);
       }
     },
     //判断页面展示权限
-    isPower () {
-      const obj = typeof (this.systemSet) === 'string' ? JSON.parse(this.systemSet) : this.systemSet
-      const { OpenGroup, OpenRole, UserOfficerMulti } = obj
+    isPower() {
+      const obj =
+        typeof this.systemSet === "string"
+          ? JSON.parse(this.systemSet)
+          : this.systemSet;
+      const { OpenGroup, OpenRole, UserOfficerMulti } = obj;
       if (!OpenGroup) {
         this.routes.forEach((item, index) => {
-          if (item.path === '/accountGroup') {
-            this.routes.splice(index, 1)
+          if (item.path === "/accountGroup") {
+            this.routes.splice(index, 1);
           }
-        })
+        });
       }
       if (!OpenRole) {
         this.routes.forEach((item, index) => {
-          if (item.path === '/role') {
-            this.routes.splice(index, 1)
+          if (item.path === "/role") {
+            this.routes.splice(index, 1);
           }
-        })
+        });
       }
       if (!UserOfficerMulti) {
         this.routes.forEach((item, index) => {
-          if (item.path === '/account') {
-            this.routes.splice(index, 1)
+          if (item.path === "/account") {
+            this.routes.splice(index, 1);
           }
-        })
+        });
       }
     },
-    handleChange (val) {
-      if (val !== '/systemManagement') {
-        this.inputFlag = true
+    handleChange(val) {
+      if (val !== "/systemManagement") {
+        this.inputFlag = true;
       } else {
-        this.inputFlag = false
+        this.inputFlag = false;
       }
     },
-    paramsType (t, num, url, name) {
-      let type = 'application/json'
-      let result = ''
-      if (t == 'json') {
-        type = 'application/json'
+    paramsType(t, num, url, name) {
+      let type = "application/json";
+      let result = "";
+      if (t == "json") {
+        type = "application/json";
       }
       if (num == 1) {
         result = axios.get(url, {
           params: {
-            [name]: sessionStorage.getItem('userName'),
+            [name]: sessionStorage.getItem("userName"),
           },
           data: {
-            unused: 0 //解决请求头无Content-Type
+            unused: 0, //解决请求头无Content-Type
           },
           headers: {
-            'token': sessionStorage.getItem('token'),
-            'Content-Type': type
-          }
-        })
+            token: sessionStorage.getItem("token"),
+            "Content-Type": type,
+          },
+        });
       } else {
-        result = axios.post(url, {
-          [name]: sessionStorage.getItem('userName')
-        }, {
-          headers: {
-            'token': sessionStorage.getItem('token'),
-            'Content-Type': type
+        result = axios.post(
+          url,
+          {
+            [name]: sessionStorage.getItem("userName"),
+          },
+          {
+            headers: {
+              token: sessionStorage.getItem("token"),
+              "Content-Type": type,
+            },
           }
-        })
+        );
       }
-      result.then(res => {
-        console.log(res)
-      }).catch(err => {
-        console.log(err)
-      })
+      result
+        .then((res) => {
+          console.log(res);
+        })
+        .catch((err) => {
+          console.log(err);
+        });
     },
     //应用跳转
-    toApp (item) {
+    toApp(item) {
       if (item.appUrl) {
-        window.open(item.appUrl)
-        const datas = item.inputs
-        const arrs = []
+        window.open(item.appUrl);
+        const datas = item.inputs;
+        const arrs = [];
         if (datas && datas.length) {
-          const [a1, a2] = [...datas]
+          const [a1, a2] = [...datas];
           if (item.requestType == 1) {
-            if (a1.AppInputName == 'token' && a1.AppInputSite == 'Header' && a2.AppInputSite == 'Body') {
-              this.paramsType(item.bodyType, item.requestType, item.appUrl, a2.AppInputName)
+            if (
+              a1.AppInputName == "token" &&
+              a1.AppInputSite == "Header" &&
+              a2.AppInputSite == "Body"
+            ) {
+              this.paramsType(
+                item.bodyType,
+                item.requestType,
+                item.appUrl,
+                a2.AppInputName
+              );
             } else {
-              datas.forEach(item => {
-                const obj = {}
-                if (item.AppInputName == 'token' || item.AppInputName == 'Token' || item.AppInputName == 'TOKEN') {
-                  obj[item.AppInputName] = sessionStorage.getItem('token')
-                } else if (item.AppInputName == 'loginName' || item.AppInputName == 'userName') {
-                  obj[item.AppInputName] = sessionStorage.getItem('userName')
+              datas.forEach((item) => {
+                const obj = {};
+                if (
+                  item.AppInputName == "token" ||
+                  item.AppInputName == "Token" ||
+                  item.AppInputName == "TOKEN"
+                ) {
+                  obj[item.AppInputName] = sessionStorage.getItem("token");
+                } else if (
+                  item.AppInputName == "loginName" ||
+                  item.AppInputName == "userName"
+                ) {
+                  obj[item.AppInputName] = sessionStorage.getItem("userName");
                 }
-                arrs.push(obj)
-              })
-              const getParams = Object.assign(...arrs)
-              axios.get(item.appUrl, {
-                params: getParams
-              }).then(res => {
-                console.log(res)
-              }).catch(err => {
-                console.log(err)
-              })
+                arrs.push(obj);
+              });
+              const getParams = Object.assign(...arrs);
+              axios
+                .get(item.appUrl, {
+                  params: getParams,
+                })
+                .then((res) => {
+                  console.log(res);
+                })
+                .catch((err) => {
+                  console.log(err);
+                });
             }
           } else if (item.requestType == 2) {
-            this.paramsType(item.bodyType, item.requestType, item.appUrl, a2.AppInputName)
+            this.paramsType(
+              item.bodyType,
+              item.requestType,
+              item.appUrl,
+              a2.AppInputName
+            );
           }
         }
       }
-    }
-  }
-}
+    },
+  },
+};
 </script>
 
 <style lang="scss" scoped>