From 020ba9c589ee0e7ca8292d200bee968c6513b11a Mon Sep 17 00:00:00 2001
From: From-wh <from-wh@hotmail.com>
Date: Tue, 11 Apr 2023 16:54:14 +0800
Subject: [PATCH] =?UTF-8?q?improve:=20=E6=8E=A5=E5=8F=A3=E6=9D=83=E9=99=90?=
 =?UTF-8?q?/=E8=B0=83=E8=AF=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../admin/src/api/systemBackendRouting.js     |  11 ++
 template/admin/src/api/systemMenus.js         |  10 +
 .../src/pages/setting/devisePage/index.vue    |   4 +-
 .../systemMenus/components/menusFrom.vue      |   8 +-
 .../src/pages/setting/systemMenus/index.vue   | 187 +++++++++++++++++-
 .../setting/systemOutInterface/debugging.vue  |   4 +-
 .../pages/system/backendRouting/debugging.vue |   6 +-
 .../src/pages/system/backendRouting/index.vue |  80 +++++---
 .../pages/system/backendRouting/request.js    |  15 +-
 9 files changed, 272 insertions(+), 53 deletions(-)

diff --git a/template/admin/src/api/systemBackendRouting.js b/template/admin/src/api/systemBackendRouting.js
index 7b844390e..e747a2c90 100644
--- a/template/admin/src/api/systemBackendRouting.js
+++ b/template/admin/src/api/systemBackendRouting.js
@@ -62,6 +62,17 @@ export function routeDet(id) {
     method: 'get',
   });
 }
+/**
+ * 接口分类编辑
+ * @param {*} data
+ * @returns
+ */
+export function routeEdit(id, appName) {
+  return request({
+    url: `system/route_cate/${id}/edit?app_name=${appName}`,
+    method: 'get',
+  });
+}
 
 /**
  * @description 修改名称
diff --git a/template/admin/src/api/systemMenus.js b/template/admin/src/api/systemMenus.js
index 728eaa948..344958d3d 100644
--- a/template/admin/src/api/systemMenus.js
+++ b/template/admin/src/api/systemMenus.js
@@ -94,3 +94,13 @@ export function getRuleList() {
     method: 'get',
   });
 }
+/**
+ * @description 权限列表
+ */
+export function menusBatch(data) {
+  return request({
+    url: `setting/menus/batch`,
+    method: 'post',
+    data,
+  });
+}
diff --git a/template/admin/src/pages/setting/devisePage/index.vue b/template/admin/src/pages/setting/devisePage/index.vue
index 40302981b..2adac215e 100644
--- a/template/admin/src/pages/setting/devisePage/index.vue
+++ b/template/admin/src/pages/setting/devisePage/index.vue
@@ -55,9 +55,9 @@ export default {
     if (Number(this.$route.query.type) === 1) {
       this.iframeUrl = `${moveLink}/pages/index/index?type=iframeWindow`;
     } else {
-      this.iframeUrl = `https://v4.wuht.net/pages/index/index?type=iframeWindow`;
+      // this.iframeUrl = `https://v4.wuht.net/pages/index/index?type=iframeWindow`;
 
-      // this.iframeUrl = `${location.origin}/pages/index/index?type=iframeWindow`;
+      this.iframeUrl = `${location.origin}/pages/index/index?type=iframeWindow`;
     }
     diyGetInfo(parseInt(pageId)).then((datas) => {
       let data = datas.data.info.value;
diff --git a/template/admin/src/pages/setting/systemMenus/components/menusFrom.vue b/template/admin/src/pages/setting/systemMenus/components/menusFrom.vue
index 2b410a638..4ef11dcf8 100644
--- a/template/admin/src/pages/setting/systemMenus/components/menusFrom.vue
+++ b/template/admin/src/pages/setting/systemMenus/components/menusFrom.vue
@@ -12,7 +12,7 @@
       @on-visible-change="visible"
     >
       <Form ref="formValidate" :model="formValidate" :label-width="110" @submit.native.prevent>
-        <Row type="flex" :gutter="24">
+        <!-- <Row type="flex" :gutter="24">
           <Col span="24">
             <FormItem label="类型：">
               <RadioGroup v-model="formValidate.auth_type" @on-change="changeRadio">
@@ -23,14 +23,14 @@
               </RadioGroup>
             </FormItem>
           </Col>
-        </Row>
+        </Row> -->
         <Row type="flex" :gutter="24">
           <Col v-bind="grid">
             <FormItem :label="!authType ? '接口名称：' : '按钮名称：'" prop="menu_name">
               <div class="add">
                 <Input v-model="formValidate.menu_name" :placeholder="!authType ? '请输入接口名称' : '请输入按钮名称'">
                 </Input>
-                <Button class="ml10 df" v-show="!authType" @click="getRuleList()" icon="ios-apps"></Button>
+                <!-- <Button class="ml10 df" v-show="!authType" @click="getRuleList()" icon="ios-apps"></Button> -->
               </div>
             </FormItem>
           </Col>
@@ -95,7 +95,7 @@
               </RadioGroup>
             </FormItem>
           </Col>
-          <Col :xs="24">
+          <Col v-bind="grid">
             <FormItem label="状态：">
               <RadioGroup v-model="formValidate.is_show">
                 <Radio :label="item.value" v-for="(item, i) in isShowRadio" :key="i">
diff --git a/template/admin/src/pages/setting/systemMenus/index.vue b/template/admin/src/pages/setting/systemMenus/index.vue
index 82a19ab90..8664f1e13 100644
--- a/template/admin/src/pages/setting/systemMenus/index.vue
+++ b/template/admin/src/pages/setting/systemMenus/index.vue
@@ -67,13 +67,15 @@
             </i-switch>
           </template>
         </vxe-table-column>
-        <vxe-table-column field="date" title="操作" align="center" width="200" fixed="right">
+        <vxe-table-column field="date" title="操作" align="center" width="250" fixed="right">
           <template v-slot="{ row, index }">
             <span v-auth="['setting-system_menus-add']">
+              <a @click="addRoute(row)" v-if="row.auth_type === 1">添加权限</a>
+              <Divider type="vertical" v-if="row.auth_type === 1" />
               <a @click="addE(row, '添加子菜单')" v-if="row.auth_type === 1">添加子菜单</a>
-              <a @click="addE(row, '添加规则')" v-else>添加规则</a>
+              <!-- <a @click="addE(row, '添加规则')" v-else>添加规则</a> -->
             </span>
-            <Divider type="vertical" />
+            <Divider type="vertical" v-if="row.auth_type === 1" />
             <a @click="edit(row, '编辑')">编辑</a>
             <Divider type="vertical" />
             <a @click="del(row, '删除规则')">删除</a>
@@ -85,16 +87,57 @@
       :formValidate="formValidate"
       :titleFrom="titleFrom"
       @getList="getList"
-      @selectRule="selectRule"
       ref="menusFrom"
       @clearFrom="clearFrom"
     ></menus-from>
+    <Modal
+      v-model="ruleModal"
+      scrollable
+      width="1100"
+      title="权限列表"
+      @on-ok="addRouters"
+      @on-cancel="ruleModal = false"
+      @on-visible-change="modalchange"
+    >
+      <div class="search-rule">
+        <Input
+          class="mr10"
+          v-model="searchRule"
+          placeholder="输入关键词搜索"
+          clearable
+          style="width: 300px"
+          ref="search"
+          @on-enter="searchRules"
+          @on-clear="searchRules"
+        />
+        <Button class="mr10" type="primary" @click="searchRules">搜索</Button>
+        <Button @click="init">重置</Button>
+      </div>
+      <Tabs v-model="routeType" @on-click="changTab">
+        <TabPane label="基础接口" name="1"></TabPane>
+        <TabPane label="公共接口" name="0"></TabPane>
+      </Tabs>
+      <div class="rule">
+        <div
+          class="rule-list"
+          v-show="!arrs.length || arrs.includes(item.id)"
+          :class="{ 'select-rule': seletRouteIds.includes(item.id) }"
+          v-for="(item, index) in routeType == 1 ? foundationList : openList"
+          :key="index"
+          @click="selectRule(item)"
+        >
+          <div>接口名称：{{ item.real_name }}</div>
+          <div>请求方式：{{ item.method }}</div>
+          <div>接口地址：{{ item.rule }}</div>
+        </div>
+      </div>
+    </Modal>
   </div>
 </template>
 
 <script>
 import { mapState } from 'vuex';
-import { getTable, menusDetailsApi, isShowApi, editMenus } from '@/api/systemMenus';
+import { getTable, menusDetailsApi, isShowApi, editMenus, getRuleList, menusBatch } from '@/api/systemMenus';
 import formCreate from '@form-create/iview';
 import menusFrom from './components/menusFrom';
 export default {
@@ -103,6 +146,8 @@ export default {
     return {
       tabconfig: { children: 'children', reserve: true, accordion: true },
       spinShow: false,
+      ruleModal: false,
+      searchRule: '',
       grid: {
         xl: 7,
         lg: 7,
@@ -121,6 +166,13 @@ export default {
       formValidate: {},
       titleFrom: '',
       modalTitleSs: '',
+      routeType: '1',
+      arrs: [],
+      foundationList: [], // 基础接口列表
+      openList: [], // 公开接口列表
+      seletRoute: [], // 选中路由
+      seletRouteIds: [], // 选中id
+      menusId: 0, // 选中分类id
     };
   },
   components: { menusFrom, formCreate: formCreate.$form() },
@@ -137,6 +189,77 @@ export default {
     this.getData();
   },
   methods: {
+    init() {
+      this.searchRule = '';
+      this.arrs = [];
+      this.seletRouteIds = [];
+      this.seletRoute = [];
+    },
+    addRouters() {
+      let data = {
+        menus: this.seletRoute,
+      };
+      menusBatch(data)
+        .then((res) => {
+          console.log(res);
+          this.getData();
+        })
+        .catch((res) => {
+          this.$Message.error(res.msg);
+        });
+    },
+    selectRule(data) {
+      if (this.seletRouteIds.includes(data.id)) {
+        let i = this.seletRouteIds.findIndex((e) => e == data.id);
+        this.seletRouteIds.splice(i, 1);
+        this.seletRoute.splice(i, 1);
+      } else {
+        this.seletRouteIds.push(data.id);
+        this.seletRoute.push({
+          menu_name: data.name,
+          unique_auth: '',
+          api_url: data.path,
+          path: this.menusId,
+          method: data.method,
+        });
+      }
+    },
+    changTab(name) {
+      console.log(name);
+      this.searchRules();
+    },
+    // 搜索规则
+    searchRules() {
+      if (this.searchRule.trim()) {
+        this.arrs = [];
+        let arr = this.routeType == 1 ? this.foundationList : this.openList;
+        for (var i = 0; i < arr.length; i++) {
+          if (arr[i].real_name.indexOf(this.searchRule) !== -1) {
+            this.arrs.push(arr[i].id);
+          }
+        }
+      } else {
+        this.arrs = [];
+      }
+    },
+    addRoute(row) {
+      this.menusId = row.id;
+      this.getRuleList();
+    },
+    modalchange() {},
+    // 获取权限列表
+    getRuleList() {
+      getRuleList().then((res) => {
+        res.data.map((e) => {
+          if (e.type) {
+            this.foundationList.push(e);
+          } else {
+            this.openList.push(e);
+          }
+        });
+        this.ruleModal = true;
+      });
+    },
     // 修改规则状态
     onchangeIsShow(row) {
       let data = {
@@ -157,11 +280,7 @@ export default {
       this.formValidate = Object.assign({}, this.$options.data().formValidate);
       this.getData();
     },
-    selectRule(data) {
-      this.formValidate.menu_name = data.real_name;
-      this.formValidate.methods = data.method;
-      this.formValidate.api_url = data.rule;
-    },
+
     // 清除表单数据
     clearFrom() {
       this.formValidate = Object.assign({}, this.$options.data().formValidate);
@@ -291,4 +410,52 @@ export default {
     background: #fff !important;
   }
 }
+.rule {
+  display: flex;
+  flex-wrap: wrap;
+  max-height: 600px;
+  overflow-y: scroll;
+}
+
+/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
+.rule::-webkit-scrollbar {
+  width: 10px;
+  height: 10px;
+  background-color: #f5f5f5;
+}
+
+/*定义滚动条轨道 内阴影+圆角*/
+.rule::-webkit-scrollbar-track {
+  border-radius: 4px;
+  background-color: #f5f5f5;
+}
+
+/*定义滑块 内阴影+圆角*/
+.rule::-webkit-scrollbar-thumb {
+  border-radius: 4px;
+  background-color: #ccc;
+}
+
+.rule-list {
+  background-color: #f2f2f2;
+  width: 32%;
+  margin: 5px;
+  border-radius: 3px;
+  padding: 10px;
+  color: #333;
+  cursor: pointer;
+  transition: all 0.1s;
+}
+
+.rule-list:hover {
+  background-color: #c5d1dd;
+}
+
+.rule-list div {
+  white-space: nowrap;
+}
+
+.select-rule {
+  background-color: #c5d1dd;
+}
 </style>
diff --git a/template/admin/src/pages/setting/systemOutInterface/debugging.vue b/template/admin/src/pages/setting/systemOutInterface/debugging.vue
index 1cb2b1aaf..a4cc58750 100644
--- a/template/admin/src/pages/setting/systemOutInterface/debugging.vue
+++ b/template/admin/src/pages/setting/systemOutInterface/debugging.vue
@@ -9,6 +9,7 @@
         </template>
       </Input>
       <Button class="ml20" type="primary" @click="requestData">请求</Button>
+      <Button class="ml10 copy-btn" type="success" @click="insertCopy()">复制</Button>
     </div>
     <div class="params">
       <Tabs class="mt10" v-model="paramsType" @on-click="changeTab">
@@ -210,7 +211,6 @@
       </div>
     </div>
     <div class="res mt10 mb10" v-if="codes">
-      <div class="copy-btn"><Button class="mt10 copy-btn" type="primary" @click="insertCopy()">复制</Button></div>
       <MonacoEditor :codes="codes" :readOnly="true" />
     </div>
   </div>
@@ -458,7 +458,7 @@ export default {
     }
   }
 }
-.copy-btn{
+.copy-btn {
   display: flex;
   justify-content: right;
 }
diff --git a/template/admin/src/pages/system/backendRouting/debugging.vue b/template/admin/src/pages/system/backendRouting/debugging.vue
index 1ce319309..456b97a81 100644
--- a/template/admin/src/pages/system/backendRouting/debugging.vue
+++ b/template/admin/src/pages/system/backendRouting/debugging.vue
@@ -9,6 +9,7 @@
         </template>
       </Input>
       <Button class="ml20" type="primary" @click="requestData">请求</Button>
+      <Button v-if="codes" class="ml10 copy-btn" type="success" @click="insertCopy()">复制结果</Button>
     </div>
     <div class="params">
       <Tabs class="mt10" v-model="paramsType" @on-click="changeTab">
@@ -210,7 +211,6 @@
       </div>
     </div>
     <div class="res mt10 mb10" v-if="codes">
-      <div class="copy-btn"><Button class="mt10 copy-btn" type="primary" @click="insertCopy()">复制</Button></div>
       <MonacoEditor :codes="codes" :readOnly="true" />
     </div>
   </div>
@@ -280,7 +280,7 @@ export default {
       console.log(this.$refs.xTable.getTableData().tableData);
       console.log(this.filtersData((await this.$refs.xTable.getTableData().tableData) || []));
       let url, method, params, body, headers;
-      url = this.interfaceData.url;
+      url = this.interfaceData.app_name + '/' + this.interfaceData.path;
       method = this.interfaceData.method;
       params = this.filtersData((await this.$refs.xTable.getTableData().tableData) || []);
       body = this.filtersData((await this.$refs.yTable.getTableData().tableData) || []);
@@ -294,7 +294,7 @@ export default {
       console.log(url, method, params, body, headers);
       requestMethod(url, method, params, body, headers)
         .then((res) => {
-          this.codes = res + '';
+          this.codes = JSON.stringify(res);
         })
         .catch((err) => {
           this.codes = JSON.stringify(err);
diff --git a/template/admin/src/pages/system/backendRouting/index.vue b/template/admin/src/pages/system/backendRouting/index.vue
index 999ceaf8a..35e6651d1 100644
--- a/template/admin/src/pages/system/backendRouting/index.vue
+++ b/template/admin/src/pages/system/backendRouting/index.vue
@@ -142,7 +142,27 @@
                     v-model.trim="formValidate.describe"
                     placeholder="请输入"
                   />
-                  <span v-else class="text-area">{{ formValidate.describe || '' }}</span>
+                  <span v-else class="text-area">{{ formValidate.describe || '--' }}</span>
+                </FormItem>
+                <FormItem label="所属分类：" prop="name" v-if="isEdit">
+                  <el-cascader
+                    v-model="formValidate.cate_id"
+                    size="small"
+                    :options="formValidate.cate_tree"
+                    :props="{ checkStrictly: true, multiple: false, emitPath: false, value: 'id', label: 'name' }"
+                    clearable
+                  ></el-cascader>
+                </FormItem>
+                <FormItem label="是否公共：" prop="name">
+                  <Switch v-if="isEdit" v-model="formValidate.type" :true-value="1" :false-value="0">
+                    <template #open>
+                      <span>是</span>
+                    </template>
+                    <template #close>
+                      <span>否</span>
+                    </template>
+                  </Switch>
+                  <span v-else class="text-area">{{ formValidate.type ? '是' : '否' }}</span>
                 </FormItem>
               </Col>
             </Row>
@@ -409,6 +429,7 @@ import {
   routeSave,
   interfaceEditName,
   routeDel,
+  routeEdit,
   routeCateDel,
 } from '@/api/systemBackendRouting';
 import { VueTreeList, Tree, TreeNode } from 'vue-tree-list';
@@ -558,32 +579,39 @@ export default {
       await $table.setActiveCell(data, 'name');
     },
     getInterfaceList(disk_type) {
-      routeList()
-        .then((res) => {
-          res.data[0].expand = false;
-          this.treeData = new Tree(res.data);
-          if (res.data.length) {
-            if (res.data[0].children && res.data[0].children.length) {
-              this.onClick(res.data[0].children[0]);
-            }
-          }
-        })
-        .catch((err) => {
-          this.$Message.error(err);
-        });
-    },
-    onClick(params) {
-      console.log(params, 'params');
-      if (params.method) {
-        this.isEdit = false;
-        routeDet(params.id)
+      try {
+        routeList()
           .then((res) => {
-            this.formValidate = res.data;
+            if (res.data.length) {
+              res.data[0].expand = false;
+              this.treeData = new Tree(res.data);
+              if (res.data[0].children && res.data[0].children.length) {
+                this.onClick(res.data[0].children[0]);
+              }
+            }
           })
           .catch((err) => {
-            console.log(err);
             this.$Message.error(err);
           });
+      } catch (error) {
+        console.log(error);
+      }
+    },
+    onClick(params) {
+      try {
+        if (params.method) {
+          this.isEdit = false;
+          routeDet(params.id)
+            .then((res) => {
+              this.formValidate = res.data;
+            })
+            .catch((err) => {
+              console.log(err);
+              this.$Message.error(err);
+            });
+        }
+      } catch (error) {
+        console.log(error);
       }
     },
     async handleSubmit() {
@@ -689,9 +717,11 @@ export default {
         this.formValidate.id = 0;
         this.isEdit = true;
       } else if (name == 2) {
-        this.value = params.name || '';
-        this.formValidate.cate_id = params ? params.id : 0;
-        this.nameModal = true;
+        // this.value = params.name || '';
+        // this.formValidate.cate_id = params ? params.id : 0;
+        // this.nameModal = true;
+        // this.onEdit(params);
+        this.$modalForm(routeEdit(params.id, this.app_name)).then(() => this.getInterfaceList());
       } else if (name == 3) {
         this.onDel(params);
       } else if (name == 4) {
diff --git a/template/admin/src/pages/system/backendRouting/request.js b/template/admin/src/pages/system/backendRouting/request.js
index 9cdf9a747..9b64e1c18 100644
--- a/template/admin/src/pages/system/backendRouting/request.js
+++ b/template/admin/src/pages/system/backendRouting/request.js
@@ -3,7 +3,8 @@ import Setting from '@/setting';
 import { getCookies, removeCookies } from '@/libs/util';
 
 const service = axios.create({
-  baseURL: Setting.apiBaseURL,
+  baseURL: 'https://v5.wuht.net',
+  // baseURL: location.protocol + '//'+ location.hostname,
   timeout: 10000, // 请求超时时间
 });
 axios.defaults.withCredentials = true; // 携带cookie
@@ -11,12 +12,12 @@ axios.defaults.withCredentials = true; // 携带cookie
 // 请求拦截器
 service.interceptors.request.use(
   (config) => {
-    if (config.kefu) {
-      let baseUrl = Setting.apiBaseURL.replace(/adminapi/, 'kefuapi');
-      config.baseURL = baseUrl;
-    } else {
-      config.baseURL = 'https://v5.wuht.net/outapi' || Setting.apiBaseURL;
-    }
+    // if (config.kefu) {
+    //   let baseUrl = Setting.apiBaseURL.replace(/adminapi/, 'kefuapi');
+    //   config.baseURL = baseUrl;
+    // } else {
+    //   config.baseURL = 'https://v5.wuht.net/outapi' || Setting.apiBaseURL;
+    // }
     if (config.file) {
       config.headers['Content-Type'] = 'multipart/form-data';
     }