From 888db8a6efa683462ebbc094c830145ad92c93dc Mon Sep 17 00:00:00 2001
From: From-wh <from-wh@hotmail.com>
Date: Sat, 6 May 2023 14:20:36 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=A4=9A=E7=AB=AF=E6=8E=A5=E5=8F=A3?=
 =?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     |   4 +-
 .../pages/system/backendRouting/debugging.vue |  11 +-
 .../src/pages/system/backendRouting/index.vue | 807 +++++++++---------
 3 files changed, 424 insertions(+), 398 deletions(-)

diff --git a/template/admin/src/api/systemBackendRouting.js b/template/admin/src/api/systemBackendRouting.js
index e747a2c90..f6e805584 100644
--- a/template/admin/src/api/systemBackendRouting.js
+++ b/template/admin/src/api/systemBackendRouting.js
@@ -31,9 +31,9 @@ export function routeCate(appName) {
 /**
  * 路由树
  */
-export function routeList() {
+export function routeList(apiType) {
   return request({
-    url: `system/route/tree`,
+    url: `system/route/tree?app_name=${apiType}`,
     method: 'get',
   });
 }
diff --git a/template/admin/src/pages/system/backendRouting/debugging.vue b/template/admin/src/pages/system/backendRouting/debugging.vue
index 7c8058b63..7d590f1d1 100644
--- a/template/admin/src/pages/system/backendRouting/debugging.vue
+++ b/template/admin/src/pages/system/backendRouting/debugging.vue
@@ -279,6 +279,10 @@ export default {
         return [];
       },
     },
+    apiType: {
+      type: String,
+      default: 'adminapi',
+    },
   },
   data() {
     return {
@@ -321,7 +325,7 @@ export default {
     },
     async requestData() {
       let url, method, params, body, headers;
-      url = this.interfaceData.app_name + '/' + this.interfaceData.path;
+      url = this.apiType + '/' + this.interfaceData.path;
       method = this.interfaceData.method;
       params = this.filtersData((await this.$refs.xTable.getTableData().tableData) || []);
       body =
@@ -331,6 +335,7 @@ export default {
       let h = this.filtersData((await this.$refs.zTable.getTableData().tableData) || []);
       headers = h;
       this.codes = '';
+      console.log(url);
       requestMethod(url, method, params, body, headers)
         .then((res) => {
           if (!res) return this.$Message.error('接口异常');
@@ -519,7 +524,7 @@ export default {
   display: flex;
   justify-content: right;
 }
-/deep/ .monaco-editor{
-    min-height: 700px
+/deep/ .monaco-editor {
+  min-height: 700px;
 }
 </style>
diff --git a/template/admin/src/pages/system/backendRouting/index.vue b/template/admin/src/pages/system/backendRouting/index.vue
index 2dd572335..ad6c4bfbb 100644
--- a/template/admin/src/pages/system/backendRouting/index.vue
+++ b/template/admin/src/pages/system/backendRouting/index.vue
@@ -1,403 +1,409 @@
 <template>
   <div>
-    <div class="main">
-      <!-- <Tree class="tree" :data="treeData"  @on-contextmenu="handleContextMenu">
-          <template #contextMenu>
-            <DropdownItem @click.native="handleContextCreateFolder()">新建文件夹</DropdownItem>
-            <DropdownItem @click.native="handleContextCreateFile()">新建文件</DropdownItem>
-            <DropdownItem @click.native="handleContextDelFolder()" style="color: #ed4014">删除</DropdownItem>
-          </template>
-        </Tree> -->
-      <!-- <Tree :data="treeData" :render="renderContent" class="demo-tree-render"></Tree> -->
-      <div class="ivu-mt mr20 card-tree">
-        <div class="tree">
-          <div class="main-btn">
-            <Button class="mb5 mr10" style="flex: 1" type="primary" @click="clickMenu(4)" long>新增分类</Button>
-            <Button class="mr10" type="success" @click="syncRoute()">同步</Button>
-            <Button type="info" @click="debugging()">调试</Button>
-          </div>
+    <div>
+      <Card :bordered="false" dis-hover class="mb10">
+        <Tabs v-model="apiType">
+          <TabPane label="后台接口" name="adminapi"></TabPane>
+          <TabPane label="前台接口" name="api"></TabPane>
+          <TabPane label="对外接口" name="outapi"></TabPane>
+          <TabPane label="客服接口" name="kefuapi"></TabPane>
+        </Tabs>
+      </Card>
+      <div class="main">
+        <div class="ivu-mt mr20 card-tree">
+          <div class="tree">
+            <div class="main-btn">
+              <Button class="mb5 mr10" style="flex: 1" type="primary" @click="clickMenu(4)" long>新增分类</Button>
+              <Button class="mr10" type="success" @click="syncRoute()">同步</Button>
+              <Button type="info" @click="debugging()">调试</Button>
+            </div>
 
-          <vue-tree-list
-            class="tree-list"
-            @change-name="onChangeName"
-            @delete-node="onDel"
-            :model="treeData"
-            default-tree-node-name="默认文件夹"
-            default-leaf-node-name="默认接口名"
-            v-bind:default-expanded="false"
-            :expand-only-one="true"
-          >
-            <template v-slot:leafNameDisplay="slotProps">
-              <div></div>
-              <div
-                class="tree-node"
-                :class="{
-                  node: slotProps.model.method,
-                  open: formValidate.path == slotProps.model.path && formValidate.method == slotProps.model.method,
-                }"
-                @click.stop="onClick(slotProps.model)"
-              >
-                <span
-                  class=""
+            <vue-tree-list
+              class="tree-list"
+              ref="treeList"
+              @change-name="onChangeName"
+              @delete-node="onDel"
+              :model="treeData"
+              default-tree-node-name="默认文件夹"
+              default-leaf-node-name="默认接口名"
+              v-bind:default-expanded="false"
+              :expand-only-one="true"
+            >
+              <template v-slot:leafNameDisplay="slotProps">
+                <div></div>
+                <div
+                  class="tree-node"
                   :class="{
+                    node: slotProps.model.method,
                     open: formValidate.path == slotProps.model.path && formValidate.method == slotProps.model.method,
                   }"
-                  >{{ slotProps.model.name }}</span
+                  @click.stop="onClick(slotProps.model)"
                 >
-                <Dropdown
-                  transfer
-                  @on-click="
-                    (name) => {
-                      clickMenu(name, slotProps.model);
-                    }
-                  "
-                >
-                  <a href="javascript:void(0)">
-                    <Icon class="add" type="ios-more" />
-                  </a>
-                  <template #list>
-                    <DropdownMenu>
-                      <DropdownItem name="1" v-if="!slotProps.model.method">新增接口</DropdownItem>
-                      <DropdownItem name="2" v-if="!slotProps.model.method">编辑分类名</DropdownItem>
-                      <DropdownItem name="3">删除</DropdownItem>
-                    </DropdownMenu>
-                  </template>
-                </Dropdown>
-              </div>
-            </template>
-            <!-- 新建文件夹 -->
-
-            <span class="icon" slot="addTreeNodeIcon"></span>
-            <span class="icon" slot="addLeafNodeIcon">
-              <!-- <Icon type="md-create" /> -->
-            </span>
-            <span class="icon" slot="editNodeIcon">
-              <!-- <Icon type="md-create" /> -->
-            </span>
-            <span class="icon" slot="delNodeIcon">
-              <!-- <Icon type="ios-cut" /> -->
-            </span>
-            <template v-slot:treeNodeIcon="slotProps">
-              <span
-                v-if="slotProps.model.method"
-                class="req-method"
-                :style="{
-                  color: methodsColor(slotProps.model.method),
-                  'font-weight': slotProps.model.pid == formValidate.pid ? '500' : '500',
-                }"
-                >{{ slotProps.model.method }}</span
-              >
-
-              <!-- <span v-if="slotProps.model.method"></span> -->
-            </template>
-          </vue-tree-list>
-        </div>
-      </div>
-      <Card :bordered="false" dis-hover class="ivu-mt right-card">
-        <div class="data">
-          <div class="eidt-sub">
-            <div class="name">
-              {{ formValidate.name }}
-            </div>
-            <div>
-              <!-- <Button type="primary" class="submission mr20" @click="debugging()">调试</Button> -->
-              <Button v-if="formValidate.id" type="primary" class="submission mr20" @click="isEdit = !isEdit">{{
-                isEdit ? '返回' : '编辑'
-              }}</Button>
-              <Button v-if="isEdit" type="primary" class="submission" @click="handleSubmit('formValidate')"
-                >保存</Button
-              >
-            </div>
-          </div>
-          <Form
-            class="formValidate mt20"
-            ref="formValidate"
-            :rules="ruleValidate"
-            :model="formValidate"
-            :label-width="100"
-            :label-position="labelPosition"
-            @submit.native.prevent
-          >
-            <Row :gutter="24" type="flex">
-              <Col span="24">
-                <div class="title">接口信息</div>
-                <FormItem label="接口名称：" prop="name">
-                  <Input
-                    v-if="isEdit"
-                    class="perW20"
-                    type="text"
-                    :rows="4"
-                    v-model.trim="formValidate.name"
-                    placeholder="请输入"
-                  />
-                  <span v-else>{{ formValidate.name || '' }}</span>
-                </FormItem>
-                <FormItem label="请求类型：" prop="name">
-                  <Select v-if="isEdit" v-model="formValidate.method" style="width: 120px">
-                    <Option v-for="(item, index) in requestTypeList" :key="index" :value="item.value">{{
-                      item.label
-                    }}</Option>
-                  </Select>
-                  <span v-else class="req-method" :style="'background-color:' + methodColor">{{
-                    formValidate.method || ''
-                  }}</span>
-                </FormItem>
-                <FormItem label="功能描述：" prop="name">
-                  <Input
-                    v-if="isEdit"
-                    class="perW20"
-                    type="textarea"
-                    :rows="4"
-                    v-model.trim="formValidate.describe"
-                    placeholder="请输入"
-                  />
-                  <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>
-            <Row :gutter="24" type="flex">
-              <Col span="24">
-                <div class="title">调用方式</div>
-                <FormItem label="路由地址：" prop="path">
-                  <span>{{ formValidate.path || '' }}</span>
-                </FormItem>
-                <FormItem label="文件地址：" prop="path">
-                  <span>{{ formValidate.file_path || '' }}</span>
-                </FormItem>
-                <FormItem label="方法名：" prop="path">
-                  <span>{{ formValidate.action || '' }}</span>
-                </FormItem>
-                <FormItem label="请求参数：">
-                  <vxe-table
-                    resizable
-                    show-overflow
-                    keep-source
-                    ref="xTable"
-                    row-id="id"
-                    :print-config="{}"
-                    :export-config="{}"
-                    :loading="loading"
-                    :tree-config="{ transform: true, rowField: 'id', parentField: 'parentId' }"
-                    :data="formValidate.request"
+                  <span
+                    class=""
+                    :class="{
+                      open: formValidate.path == slotProps.model.path && formValidate.method == slotProps.model.method,
+                    }"
+                    >{{ slotProps.model.name }}</span
                   >
-                    <!-- <vxe-column type="checkbox" width="60"></vxe-column> -->
-                    <vxe-column field="attribute" width="300" title="属性" tree-node :edit-render="{}">
-                      <template #default="{ row }">
-                        <vxe-input v-if="isEdit" v-model="row.attribute" type="text"></vxe-input>
-                        <span v-else>{{ row.attribute || '' }}</span>
-                      </template>
-                    </vxe-column>
-                    <vxe-column field="type" title="类型" width="200" :edit-render="{}">
-                      <template #default="{ row }">
-                        <!-- <vxe-select v-if="isEdit" v-model="row.type" type="text" :optionGroups="typeList"></vxe-select> -->
-                        <vxe-select v-if="isEdit" v-model="row.type" transfer>
-                          <vxe-option
-                            v-for="item in typeList"
-                            :key="item.value"
-                            :value="item.value"
-                            :label="item.label"
-                          ></vxe-option>
-                        </vxe-select>
-                        <span v-else>{{ row.type || '' }}</span>
+                  <Dropdown
+                    transfer
+                    @on-click="
+                      (name) => {
+                        clickMenu(name, slotProps.model);
+                      }
+                    "
+                  >
+                    <a href="javascript:void(0)">
+                      <Icon class="add" type="ios-more" />
+                    </a>
+                    <template #list>
+                      <DropdownMenu>
+                        <DropdownItem name="1" v-if="!slotProps.model.method">新增接口</DropdownItem>
+                        <DropdownItem name="2" v-if="!slotProps.model.method">编辑分类名</DropdownItem>
+                        <DropdownItem name="3">删除</DropdownItem>
+                      </DropdownMenu>
+                    </template>
+                  </Dropdown>
+                </div>
+              </template>
+              <!-- 新建文件夹 -->
 
-                        <!-- <vxe-select v-model="row.type">
+              <span class="icon" slot="addTreeNodeIcon"></span>
+              <span class="icon" slot="addLeafNodeIcon">
+                <!-- <Icon type="md-create" /> -->
+              </span>
+              <span class="icon" slot="editNodeIcon">
+                <!-- <Icon type="md-create" /> -->
+              </span>
+              <span class="icon" slot="delNodeIcon">
+                <!-- <Icon type="ios-cut" /> -->
+              </span>
+              <template v-slot:treeNodeIcon="slotProps">
+                <span
+                  v-if="slotProps.model.method"
+                  class="req-method"
+                  :style="{
+                    color: methodsColor(slotProps.model.method),
+                    'font-weight': slotProps.model.pid == formValidate.pid ? '500' : '500',
+                  }"
+                  >{{ slotProps.model.method }}</span
+                >
+
+                <!-- <span v-if="slotProps.model.method"></span> -->
+              </template>
+            </vue-tree-list>
+          </div>
+        </div>
+        <Card :bordered="false" dis-hover class="ivu-mt right-card">
+          <div class="data">
+            <div class="eidt-sub">
+              <div class="name">
+                {{ formValidate.name }}
+              </div>
+              <div>
+                <!-- <Button type="primary" class="submission mr20" @click="debugging()">调试</Button> -->
+                <Button v-if="formValidate.id" type="primary" class="submission mr20" @click="isEdit = !isEdit">{{
+                  isEdit ? '返回' : '编辑'
+                }}</Button>
+                <Button v-if="isEdit" type="primary" class="submission" @click="handleSubmit('formValidate')"
+                  >保存</Button
+                >
+              </div>
+            </div>
+            <Form
+              class="formValidate mt20"
+              ref="formValidate"
+              :rules="ruleValidate"
+              :model="formValidate"
+              :label-width="100"
+              :label-position="labelPosition"
+              @submit.native.prevent
+            >
+              <Row :gutter="24" type="flex">
+                <Col span="24">
+                  <div class="title">接口信息</div>
+                  <FormItem label="接口名称：" prop="name">
+                    <Input
+                      v-if="isEdit"
+                      class="perW20"
+                      type="text"
+                      :rows="4"
+                      v-model.trim="formValidate.name"
+                      placeholder="请输入"
+                    />
+                    <span v-else>{{ formValidate.name || '' }}</span>
+                  </FormItem>
+                  <FormItem label="请求类型：" prop="name">
+                    <Select v-if="isEdit" v-model="formValidate.method" style="width: 120px">
+                      <Option v-for="(item, index) in requestTypeList" :key="index" :value="item.value">{{
+                        item.label
+                      }}</Option>
+                    </Select>
+                    <span v-else class="req-method" :style="'background-color:' + methodColor">{{
+                      formValidate.method || ''
+                    }}</span>
+                  </FormItem>
+                  <FormItem label="功能描述：" prop="name">
+                    <Input
+                      v-if="isEdit"
+                      class="perW20"
+                      type="textarea"
+                      :rows="4"
+                      v-model.trim="formValidate.describe"
+                      placeholder="请输入"
+                    />
+                    <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>
+              <Row :gutter="24" type="flex">
+                <Col span="24">
+                  <div class="title">调用方式</div>
+                  <FormItem label="路由地址：" prop="path">
+                    <span>{{ formValidate.path || '' }}</span>
+                  </FormItem>
+                  <FormItem label="文件地址：" prop="path">
+                    <span>{{ formValidate.file_path || '' }}</span>
+                  </FormItem>
+                  <FormItem label="方法名：" prop="path">
+                    <span>{{ formValidate.action || '' }}</span>
+                  </FormItem>
+                  <FormItem label="请求参数：">
+                    <vxe-table
+                      resizable
+                      show-overflow
+                      keep-source
+                      ref="xTable"
+                      row-id="id"
+                      :print-config="{}"
+                      :export-config="{}"
+                      :loading="loading"
+                      :tree-config="{ transform: true, rowField: 'id', parentField: 'parentId' }"
+                      :data="formValidate.request"
+                    >
+                      <!-- <vxe-column type="checkbox" width="60"></vxe-column> -->
+                      <vxe-column field="attribute" width="300" title="属性" tree-node :edit-render="{}">
+                        <template #default="{ row }">
+                          <vxe-input v-if="isEdit" v-model="row.attribute" type="text"></vxe-input>
+                          <span v-else>{{ row.attribute || '' }}</span>
+                        </template>
+                      </vxe-column>
+                      <vxe-column field="type" title="类型" width="200" :edit-render="{}">
+                        <template #default="{ row }">
+                          <!-- <vxe-select v-if="isEdit" v-model="row.type" type="text" :optionGroups="typeList"></vxe-select> -->
+                          <vxe-select v-if="isEdit" v-model="row.type" transfer>
+                            <vxe-option
+                              v-for="item in typeList"
+                              :key="item.value"
+                              :value="item.value"
+                              :label="item.label"
+                            ></vxe-option>
+                          </vxe-select>
+                          <span v-else>{{ row.type || '' }}</span>
+
+                          <!-- <vxe-select v-model="row.type">
                       <vxe-option v-for="num in 12" :key="num" :value="num" :label="num"></vxe-option>
                     </vxe-select> -->
-                      </template>
-                    </vxe-column>
-                    <vxe-column field="must" title="必填" width="100" :edit-render="{}">
-                      <template #default="{ row }">
-                        <vxe-checkbox
-                          v-if="isEdit"
-                          v-model="row.must"
-                          :unchecked-value="'0'"
-                          :checked-value="'1'"
-                        ></vxe-checkbox>
-                        <span v-else>{{ row.must == '1' ? '是' : '否' }}</span>
-                      </template>
-                    </vxe-column>
-                    <vxe-column field="trip" title="说明" :edit-render="{}">
-                      <template #default="{ row }">
-                        <vxe-input v-if="isEdit" v-model="row.trip" type="text"></vxe-input>
-                        <span v-else>{{ row.trip || '' }}</span>
-                      </template>
-                    </vxe-column>
-                    <vxe-column title="操作" width="200" v-if="isEdit">
-                      <template #default="{ row }">
-                        <vxe-button
-                          type="text"
-                          v-if="row.type === 'array' || row.type === 'object'"
-                          status="primary"
-                          @click="insertRow(row, 'xTable')"
-                          >插入</vxe-button
-                        >
-                        <vxe-button type="text" status="primary" @click="removeRow(row, 'xTable')">删除</vxe-button>
-                      </template>
-                    </vxe-column>
-                  </vxe-table>
+                        </template>
+                      </vxe-column>
+                      <vxe-column field="must" title="必填" width="100" :edit-render="{}">
+                        <template #default="{ row }">
+                          <vxe-checkbox
+                            v-if="isEdit"
+                            v-model="row.must"
+                            :unchecked-value="'0'"
+                            :checked-value="'1'"
+                          ></vxe-checkbox>
+                          <span v-else>{{ row.must == '1' ? '是' : '否' }}</span>
+                        </template>
+                      </vxe-column>
+                      <vxe-column field="trip" title="说明" :edit-render="{}">
+                        <template #default="{ row }">
+                          <vxe-input v-if="isEdit" v-model="row.trip" type="text"></vxe-input>
+                          <span v-else>{{ row.trip || '' }}</span>
+                        </template>
+                      </vxe-column>
+                      <vxe-column title="操作" width="200" v-if="isEdit">
+                        <template #default="{ row }">
+                          <vxe-button
+                            type="text"
+                            v-if="row.type === 'array' || row.type === 'object'"
+                            status="primary"
+                            @click="insertRow(row, 'xTable')"
+                            >插入</vxe-button
+                          >
+                          <vxe-button type="text" status="primary" @click="removeRow(row, 'xTable')">删除</vxe-button>
+                        </template>
+                      </vxe-column>
+                    </vxe-table>
 
-                  <Button class="mt10" v-if="isEdit" type="primary" @click="insertEvent('xTable')">添加参数</Button>
-                </FormItem>
-                <FormItem label="返回参数：">
-                  <vxe-table
-                    resizable
-                    show-overflow
-                    keep-source
-                    ref="resTable"
-                    row-id="id"
-                    :print-config="{}"
-                    :export-config="{}"
-                    :loading="loading"
-                    :tree-config="{ transform: true, rowField: 'id', parentField: 'parentId' }"
-                    :data="formValidate.response"
-                  >
-                    <!-- <vxe-column type="checkbox" width="60"></vxe-column> -->
-                    <vxe-column field="attribute" title="属性" width="300" tree-node :edit-render="{}">
-                      <template #default="{ row }">
-                        <vxe-input v-if="isEdit" v-model="row.attribute" type="text"></vxe-input>
-                        <span v-else>{{ row.attribute || '' }}</span>
-                      </template>
-                    </vxe-column>
-                    <vxe-column field="type" title="类型" width="200" :edit-render="{}">
-                      <template #default="{ row }">
-                        <vxe-select v-if="isEdit" v-model="row.type" transfer>
-                          <vxe-option
-                            v-for="item in typeList"
-                            :key="item.value"
-                            :value="item.value"
-                            :label="item.label"
-                          ></vxe-option>
-                        </vxe-select>
-                        <span v-else>{{ row.type || '' }}</span>
-                      </template>
-                    </vxe-column>
-                    <!-- <vxe-column field="type" title="必填" :edit-render="{}">
+                    <Button class="mt10" v-if="isEdit" type="primary" @click="insertEvent('xTable')">添加参数</Button>
+                  </FormItem>
+                  <FormItem label="返回参数：">
+                    <vxe-table
+                      resizable
+                      show-overflow
+                      keep-source
+                      ref="resTable"
+                      row-id="id"
+                      :print-config="{}"
+                      :export-config="{}"
+                      :loading="loading"
+                      :tree-config="{ transform: true, rowField: 'id', parentField: 'parentId' }"
+                      :data="formValidate.response"
+                    >
+                      <!-- <vxe-column type="checkbox" width="60"></vxe-column> -->
+                      <vxe-column field="attribute" title="属性" width="300" tree-node :edit-render="{}">
+                        <template #default="{ row }">
+                          <vxe-input v-if="isEdit" v-model="row.attribute" type="text"></vxe-input>
+                          <span v-else>{{ row.attribute || '' }}</span>
+                        </template>
+                      </vxe-column>
+                      <vxe-column field="type" title="类型" width="200" :edit-render="{}">
+                        <template #default="{ row }">
+                          <vxe-select v-if="isEdit" v-model="row.type" transfer>
+                            <vxe-option
+                              v-for="item in typeList"
+                              :key="item.value"
+                              :value="item.value"
+                              :label="item.label"
+                            ></vxe-option>
+                          </vxe-select>
+                          <span v-else>{{ row.type || '' }}</span>
+                        </template>
+                      </vxe-column>
+                      <!-- <vxe-column field="type" title="必填" :edit-render="{}">
                   <template #default="{ row }">
                     <vxe-checkbox v-model="row.must" :unchecked-value="0" :checked-value="1"></vxe-checkbox
                     >{{ row.must }}
                   </template>
                 </vxe-column> -->
-                    <vxe-column field="trip" title="说明" :edit-render="{}">
-                      <template #default="{ row }">
-                        <vxe-input v-if="isEdit" v-model="row.trip" type="text"></vxe-input>
-                        <span v-else>{{ row.trip || '' }}</span>
-                      </template>
-                    </vxe-column>
-                    <vxe-column title="操作" width="200" v-if="isEdit">
-                      <template #default="{ row }">
-                        <vxe-button
-                          type="text"
-                          v-if="row.type === 'array' || row.type === 'object'"
-                          status="primary"
-                          @click="insertRow(row, 'resTable')"
-                          >插入</vxe-button
-                        >
-                        <vxe-button type="text" status="primary" @click="removeRow(row, 'resTable')">删除</vxe-button>
-                      </template>
-                    </vxe-column>
-                  </vxe-table>
-                  <Button class="mt10" v-if="isEdit" type="primary" @click="insertEvent('resTable')">添加参数</Button>
-                </FormItem>
-              </Col>
-            </Row>
-            <Row :gutter="24" type="flex">
-              <Col span="24">
-                <div class="title">调用示例</div>
-                <FormItem label="请求数据示例：" prop="request_example">
-                  <Input
-                    v-if="isEdit"
-                    class="perW20"
-                    type="textarea"
-                    :rows="4"
-                    v-model.trim="formValidate.request_example"
-                    placeholder="请输入"
-                  />
-                  <span v-else class="text-area">{{ formValidate.request_example || '' }}</span>
-                </FormItem>
-                <FormItem label="返回数据示例：" prop="response_example">
-                  <Input
-                    v-if="isEdit"
-                    class="perW20"
-                    type="textarea"
-                    :rows="4"
-                    v-model.trim="formValidate.response_example"
-                    placeholder="请输入"
-                  />
-                  <span v-else class="text-area">{{ formValidate.response_example || '' }}</span>
-                </FormItem>
-                <FormItem label="错误码：">
-                  <vxe-table
-                    resizable
-                    show-overflow
-                    keep-source
-                    ref="codeTable"
-                    row-id="id"
-                    is-tree-view
-                    :print-config="{}"
-                    :export-config="{}"
-                    :loading="loading"
-                    :tree-config="{ rowField: 'id', parentField: 'parentId' }"
-                    :data="formValidate.error_code"
-                  >
-                    <!-- <vxe-column type="checkbox" width="60"></vxe-column> -->
-                    <vxe-column field="code" title="错误码" tree-node :edit-render="{}">
-                      <template #default="{ row }">
-                        <vxe-input v-if="isEdit" v-model="row.code" type="text"></vxe-input>
-                        <span v-else>{{ row.code || '' }}</span>
-                      </template>
-                    </vxe-column>
-                    <vxe-column field="value" title="错误码取值" :edit-render="{}">
-                      <template #default="{ row }">
-                        <vxe-input v-if="isEdit" v-model="row.value" type="text"></vxe-input>
-                        <span v-else>{{ row.value || '' }}</span>
-                      </template>
-                    </vxe-column>
-                    <vxe-column field="solution" title="解决方案" :edit-render="{}">
-                      <template #default="{ row }">
-                        <vxe-input v-if="isEdit" v-model="row.solution" type="text"></vxe-input>
-                        <span v-else>{{ row.solution || '' }}</span>
-                      </template>
-                    </vxe-column>
-                    <vxe-column title="操作" v-if="isEdit">
-                      <template #default="{ row }">
-                        <vxe-button type="text" status="primary" @click="removeRow(row, 'codeTable')">删除</vxe-button>
-                      </template>
-                    </vxe-column>
-                  </vxe-table>
-                  <Button class="mt10" v-if="isEdit" type="primary" @click="insertEvent('codeTable')">添加参数</Button>
-                </FormItem>
-              </Col>
-            </Row>
-            <!-- <Row :gutter="24" type="flex">
+                      <vxe-column field="trip" title="说明" :edit-render="{}">
+                        <template #default="{ row }">
+                          <vxe-input v-if="isEdit" v-model="row.trip" type="text"></vxe-input>
+                          <span v-else>{{ row.trip || '' }}</span>
+                        </template>
+                      </vxe-column>
+                      <vxe-column title="操作" width="200" v-if="isEdit">
+                        <template #default="{ row }">
+                          <vxe-button
+                            type="text"
+                            v-if="row.type === 'array' || row.type === 'object'"
+                            status="primary"
+                            @click="insertRow(row, 'resTable')"
+                            >插入</vxe-button
+                          >
+                          <vxe-button type="text" status="primary" @click="removeRow(row, 'resTable')">删除</vxe-button>
+                        </template>
+                      </vxe-column>
+                    </vxe-table>
+                    <Button class="mt10" v-if="isEdit" type="primary" @click="insertEvent('resTable')">添加参数</Button>
+                  </FormItem>
+                </Col>
+              </Row>
+              <Row :gutter="24" type="flex">
+                <Col span="24">
+                  <div class="title">调用示例</div>
+                  <FormItem label="请求数据示例：" prop="request_example">
+                    <Input
+                      v-if="isEdit"
+                      class="perW20"
+                      type="textarea"
+                      :rows="4"
+                      v-model.trim="formValidate.request_example"
+                      placeholder="请输入"
+                    />
+                    <span v-else class="text-area">{{ formValidate.request_example || '' }}</span>
+                  </FormItem>
+                  <FormItem label="返回数据示例：" prop="response_example">
+                    <Input
+                      v-if="isEdit"
+                      class="perW20"
+                      type="textarea"
+                      :rows="4"
+                      v-model.trim="formValidate.response_example"
+                      placeholder="请输入"
+                    />
+                    <span v-else class="text-area">{{ formValidate.response_example || '' }}</span>
+                  </FormItem>
+                  <FormItem label="错误码：">
+                    <vxe-table
+                      resizable
+                      show-overflow
+                      keep-source
+                      ref="codeTable"
+                      row-id="id"
+                      is-tree-view
+                      :print-config="{}"
+                      :export-config="{}"
+                      :loading="loading"
+                      :tree-config="{ rowField: 'id', parentField: 'parentId' }"
+                      :data="formValidate.error_code"
+                    >
+                      <!-- <vxe-column type="checkbox" width="60"></vxe-column> -->
+                      <vxe-column field="code" title="错误码" tree-node :edit-render="{}">
+                        <template #default="{ row }">
+                          <vxe-input v-if="isEdit" v-model="row.code" type="text"></vxe-input>
+                          <span v-else>{{ row.code || '' }}</span>
+                        </template>
+                      </vxe-column>
+                      <vxe-column field="value" title="错误码取值" :edit-render="{}">
+                        <template #default="{ row }">
+                          <vxe-input v-if="isEdit" v-model="row.value" type="text"></vxe-input>
+                          <span v-else>{{ row.value || '' }}</span>
+                        </template>
+                      </vxe-column>
+                      <vxe-column field="solution" title="解决方案" :edit-render="{}">
+                        <template #default="{ row }">
+                          <vxe-input v-if="isEdit" v-model="row.solution" type="text"></vxe-input>
+                          <span v-else>{{ row.solution || '' }}</span>
+                        </template>
+                      </vxe-column>
+                      <vxe-column title="操作" v-if="isEdit">
+                        <template #default="{ row }">
+                          <vxe-button type="text" status="primary" @click="removeRow(row, 'codeTable')"
+                            >删除</vxe-button
+                          >
+                        </template>
+                      </vxe-column>
+                    </vxe-table>
+                    <Button class="mt10" v-if="isEdit" type="primary" @click="insertEvent('codeTable')"
+                      >添加参数</Button
+                    >
+                  </FormItem>
+                </Col>
+              </Row>
+              <!-- <Row :gutter="24" type="flex">
               <Col span="24">
                 <FormItem>
                   <Button type="primary" class="submission" @click="handleSubmit('formValidate')">保存</Button>
                 </FormItem>
               </Col>
             </Row> -->
-          </Form>
-        </div>
-        <!-- <div v-else class="nothing">
+            </Form>
+          </div>
+          <!-- <div v-else class="nothing">
           <div class="box" @click="clickMenu(4)">
             <div class="icon">
               <Icon type="ios-folder" />
@@ -411,7 +417,8 @@
             <div class="text">新建接口</div>
           </div>
         </div> -->
-      </Card>
+        </Card>
+      </div>
     </div>
     <Modal v-model="nameModal" title="分组名称" :loading="loading" @on-ok="asyncOK">
       <label>分组名称：</label>
@@ -423,6 +430,7 @@
         :formValidate="formValidate"
         :typeList="intTypeList"
         :requestTypeList="requestTypeList"
+        :apiType="apiType"
       />
     </Drawer>
   </div>
@@ -553,7 +561,7 @@ export default {
         size: 'small',
       },
       methodColor: '#fff',
-      app_name: 'adminapi',
+      apiType: 'adminapi',
       paramsId: 0,
     };
   },
@@ -561,18 +569,26 @@ export default {
     ['formValidate.method']: {
       deep: true,
       handler(newVal, oldVal) {
-        let method = newVal.toUpperCase();
-        if (method == 'GET') {
-          this.methodColor = '#61affe';
-        } else if (method == 'POST') {
-          this.methodColor = '#49cc90';
-        } else if (method == 'PUT') {
-          this.methodColor = '#fca130';
-        } else if (method == 'DEL' || method == 'DELETE') {
-          this.methodColor = '#f93e3e';
+        console.log(newVal);
+        if (newVal) {
+          let method = newVal.toUpperCase();
+          if (method == 'GET') {
+            this.methodColor = '#61affe';
+          } else if (method == 'POST') {
+            this.methodColor = '#49cc90';
+          } else if (method == 'PUT') {
+            this.methodColor = '#fca130';
+          } else if (method == 'DEL' || method == 'DELETE') {
+            this.methodColor = '#f93e3e';
+          }
         }
       },
     },
+    apiType(newVal) {
+      if (newVal) {
+        this.getInterfaceList('one');
+      }
+    },
   },
   computed: {
     ...mapState('media', ['isMobile']),
@@ -592,7 +608,7 @@ export default {
         title: '立即同步',
         content: '同步之后，路由文件中新增的接口添加到接口列表中，路由文件中删除的路由会同步的在接口列表中删除',
         onOk: () => {
-          syncRoute(this.app_name).then((res) => {
+          syncRoute(this.apiType).then((res) => {
             this.getInterfaceList('one');
             this.$Message.success(res.msg);
             this.$Modal.remove();
@@ -625,7 +641,7 @@ export default {
     },
     getInterfaceList(disk_type) {
       try {
-        routeList()
+        routeList(this.apiType)
           .then((res) => {
             if (res.data.length) {
               res.data[0].expand = false;
@@ -643,9 +659,14 @@ export default {
               if (res.data[0].children && res.data[0].children.length) {
                 this.onClick(res.data[0]?.children[0]?.children[0]);
               }
+            } else {
+              // this.$refs.treeList.clear();
+              this.treeData = new Tree({});
+              this.formValidate = {};
             }
           })
           .catch((err) => {
+            console.log(err);
             this.$Message.error(err);
           });
       } catch (error) {
@@ -681,7 +702,7 @@ export default {
       this.formValidate.request = await this.$refs.xTable.getTableData().tableData;
       this.formValidate.response = await this.$refs.resTable.getTableData().tableData;
       this.formValidate.error_code = await this.$refs.codeTable.getTableData().tableData;
-      this.formValidate.app_name = this.app_name;
+      this.formValidate.apiType = this.apiType;
       await routeSave(this.formValidate)
         .then((res) => {
           this.isEdit = false;
@@ -777,12 +798,12 @@ export default {
         // 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());
+        this.$modalForm(routeEdit(params.id, this.apiType)).then(() => this.getInterfaceList());
       } else if (name == 3) {
         this.onDel(params);
       } else if (name == 4) {
         // this.add();
-        this.$modalForm(routeCate(this.app_name)).then(() => this.getInterfaceList());
+        this.$modalForm(routeCate(this.apiType)).then(() => this.getInterfaceList());
       }
     },