middleground_code_v2/src/views/applicationList/apiList/apiAdd.vue

<template>
  <div class="wrap">
    <div class="nextbtn">
      <el-button
        :disabled="active == 0"
        type="primary"
        @click="backActiveHandle"
        icon="el-icon-back"
      >上一步
      </el-button
      >
      <el-button
        :disabled="active == 2"
        type="primary"
        @click="nextActiveHanlde"
        icon="el-icon-right"
      >下一步
      </el-button
      >
      <el-button type="" icon="el-icon-close" @click="backPageHandle">取消</el-button>
      <el-button
        icon="el-icon-first-aid-kit"
        :loading="commitLoading"
        :disabled="active !== 2"
        type="primary"
        @click="commit"
      >保存
      </el-button>

    </div>
    <div class="step">
      <el-steps :active="active" finish-status="success" simple>
        <el-step title="设置API基本信息"></el-step>
        <el-step title="添加服务信息"></el-step>
        <el-step title="添加参数映射关系"></el-step>
      </el-steps>
    </div>
    <div class="formdata" v-if="active === 0 || active === 1">
      <div class="title">
        <h1>API基本信息</h1>
      </div>
      <div class="content">
        <!-- <router-view></router-view> -->
        <template v-if="active === 0">
          <div>
            <baseNewForm
              refName="stepZeroform"
              ref="stepZeroform"
              :spanNumber="24"
              :formRow="stepZeroformRow"
              :ruleForm="stepZeroForm"
              :isFunBtn="false"
              @onSubmit="onSubmitHandle"
              @onChangeRadio="onChangeRadio"
            >
            </baseNewForm>
          </div>
        </template>
        <template v-if="active === 1">
          <div>
            <baseNewForm
              refName="stepOneform"
              ref="stepOneform"
              :spanNumber="24"
              :formRow="stepOneformRow"
              :ruleForm="stepOneForm"
              :isFunBtn="false"
              @onSubmit="onSubmitHandle"
            ></baseNewForm>
          </div>
        </template>
      </div>
    </div>
    <div class="step3" v-if="active === 2">
      <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
        <el-menu-item index="1">Headers入参</el-menu-item>
        <el-menu-item index="2">Query入参</el-menu-item>
        <el-menu-item index="3">Body入参</el-menu-item>
        <el-menu-item index="4">Body出参</el-menu-item>
        <el-menu-item index="5">调试</el-menu-item>
      </el-menu>
      <template v-if="activeIndex === '1'">
        <div class="tableBox">
          <div class="title">
            <div class="left"></div>
            <div class="btn">
              <el-button
                type="primary"
                @click="jsonImportSwitch('headersTableInfo', false)"
              >导入JSON
              </el-button
              >
            </div>
          </div>
          <baseTableForm
            :showIndex="false"
            :indexOperate="false"
            :funWidth="80"
            :funData="[{text:'删除',type:'dele',color:'#e47470'}]"
            :tableInfo="headersTableInfo"
            @onFunc="tableButtonHandle"
          >
            <template #parameterType="{ row }">
              <div>
                <el-select
                  class="w-100"
                  v-model="row[0][row[1].id]"
                  :clearable="true"
                  placeholder="请选择"
                  @change="fatherSelectChangeHandle(row)"
                >
                  <el-option
                    v-for="(el, index) in headerparameterTypeOptions"
                    :key="el.id"
                    :label="el.label"
                    :value="el.id"
                  >
                  </el-option>
                </el-select>
              </div>
            </template>
            <template #concreteType="{ row }">
              <el-select
                class="w-100"
                v-model="row[0][row[1].id]"
                :clearable="true"
                placeholder="请选择"
                @change="(val) => sonSelectChangeHandle(val, row)"
              >
                <el-option
                  v-for="(el, index) in concreteTypeOptions[
                  row[0]['parameterType']
                ]"
                  :key="el.id"
                  :label="el.label"
                  :value="el.id"
                >
                </el-option>
              </el-select>
            </template>
            <template #example="{ row }">
              <template v-if="row[0]['parameterType'] === 'authport'">
                <!-- <baseCascader
                  v-model="row[0]['example']"
                  :itemObj="bodyExitTableInfo"
                >
                </baseCascader> -->
                <el-cascader
                  style="width: 100%"
                  v-model="row[0][row[1].id]"
                  ref="elCascader"
                  :clearable="true"
                  :show-all-levels="false"
                  :options="authQueryOut"
                  :props="selectprops"
                  :disabled="false"
                ></el-cascader>
              </template>
              <template v-else>
                <el-input v-model="row[0][row[1].id]"></el-input>
              </template>
            </template>
          </baseTableForm>
          <div class="add">
            <el-link
              type="primary"
              @click="addTableData(headersTableInfo.tableData)"
              :underline="false"
            >+ 添加属性
            </el-link
            >
          </div>
        </div>
      </template>
      <template v-if="activeIndex === '2'">
        <div class="tableBox">
          <div class="title">
            <div class="left"></div>
            <div class="btn">
              <el-button
                type="primary"
                @click="jsonImportSwitch('queryTableInfo', true)"
              >导入JSON
              </el-button
              >
            </div>
          </div>
          <baseTableForm
            :showIndex="false"
            :indexOperate="false"
            :funWidth="100"
            :funData="[{text:'删除',type:'dele',color:'#e47470'}]"
            :tableInfo="queryTableInfo"
            @newRow="queryTableAddHandle"
            @onFunc="tableButtonHandle"
          >
            <template #parameterType="{ row }">
              <div>
                <el-select
                  class="w-100"
                  v-model="row[0][row[1].id]"
                  filterable
                  :clearable="true"
                  placeholder="请选择"
                  @change="fatherSelectChangeHandle(row)"
                >
                  <el-option
                    v-for="(el, index) in headerparameterTypeOptions"
                    :key="el.id"
                    :label="el.label"
                    :value="el.id"
                  >
                  </el-option>
                </el-select>
              </div>
            </template>
            <template #concreteType="{ row }">
              <el-select
                class="w-100"
                v-model="row[0][row[1].id]"
                filterable
                :clearable="true"
                placeholder="请选择"
                @change="(val) => sonSelectChangeHandle(val, row)"
              >
                <el-option
                  v-for="(el, index) in concreteTypeOptions[
                  row[0]['parameterType']
                ]"
                  :key="el.id"
                  :label="el.label"
                  :value="el.id"
                >
                </el-option>
              </el-select>
            </template>
            <template #example="{ row }">
              <template v-if="row[0]['parameterType'] === 'authport'">
                <!-- <baseCascader
                  v-model="row[0]['example']"
                  :itemObj="bodyExitTableInfo"
                >
                </baseCascader> -->
                <el-cascader
                  style="width: 100%"
                  v-model="row[0][row[1].id]"
                  ref="elCascader"
                  :clearable="true"
                  :show-all-levels="false"
                  :options="authQueryOut"
                  :props="selectprops"
                  :disabled="false"
                ></el-cascader>
              </template>
              <template v-else>
                <el-input v-model="row[0][row[1].id]"></el-input>
              </template>
            </template>
          </baseTableForm>
          <div class="add">
            <el-link
              type="primary"
              @click="addTableData(queryTableInfo.tableData)"
              :underline="false"
            >+ 添加属性
            </el-link>
          </div>
        </div>
      </template>
      <template v-if="activeIndex === '3'">
        <div class="tableBox">
          <div class="title">
            <div class="left"></div>
            <div class="btn">
              <el-button
                type="primary"
                @click="jsonImportSwitch('bodyEntTableInfo', true,true)"
              >导入JSON
              </el-button
              >
            </div>
          </div>
          <baseTableForm
            :showIndex="false"
            :indexOperate="false"
            :funWidth="funWidth"
            :funData="funData"
            :tableInfo="bodyEntTableInfo"
            @onFunc="tableButtonHandle"
          >
            <template #parameterName="{row}">
              <div v-if="row[0]['first']" style="text-align: center;width: 100%">{{ row[0].parameterName }}</div>
              <el-input v-else style="width: 100%" v-model="row[0].parameterName"></el-input>
            </template>
            <template #parameterType="{ row }">
              <div v-if="row[0]['first']">
                <el-select
                  class="w-100"
                  v-model="row[0][row[1].id]"
                  filterable
                  :clearable="true"
                  placeholder="请选择"
                  @change="fatherSelectChangeHandle(row)"
                >
                  <el-option
                    v-for="(el, index) in bodyOptions"
                    :key="el.id"
                    :label="el.label"
                    :value="el.id"
                  >
                  </el-option>
                </el-select>
              </div>
              <div v-else>
                <el-select
                  class="w-100"
                  v-model="row[0][row[1].id]"
                  filterable
                  :clearable="true"
                  placeholder="请选择"
                  @change="fatherSelectChangeHandle(row)"
                >
                  <el-option
                    v-for="(el, index) in parameterTypeOptions"
                    :key="el.id"
                    :label="el.label"
                    :value="el.id"
                  >
                  </el-option>
                </el-select>
              </div>
            </template>
            <template #concreteType="{ row }">
              <el-select
                class="w-100"
                v-model="row[0][row[1].id]"
                filterable
                :clearable="true"
                placeholder="请选择"
                @change="(val) => sonSelectChangeHandle(val, row)"
              >
                <el-option
                  v-for="(el, index) in concreteTypeOptions[
                  row[0]['parameterType']
                ]"
                  :key="el.id"
                  :label="el.label"
                  :value="el.id"
                >
                </el-option>
              </el-select>
            </template>
            <template #example="{ row }">
              <template v-if="row[0]['parameterType'] === 'authport'">
                <!-- <baseCascader
                  v-model="row[0]['example']"
                  :itemObj="bodyExitTableInfo"
                >
                </baseCascader> -->
                <el-cascader
                  style="width: 100%"
                  v-model="row[0][row[1].id]"
                  ref="elCascader"
                  :clearable="true"
                  :show-all-levels="false"
                  :options="authQueryOut"
                  :props="selectprops"
                  :disabled="false"
                ></el-cascader>
              </template>
              <template v-else>
                <el-input v-model="row[0][row[1].id]"></el-input>
              </template>
            </template>
          </baseTableForm>
          <div class="add">
            <el-link
              type="primary"
              @click="addTableData(bodyEntTableInfo.tableData,true)"
              :underline="false"
            >+ 添加属性
            </el-link
            >
          </div>
        </div>
      </template>
      <template v-if="activeIndex === '4'">
        <div class="tableBox">
          <div class="title">
            <div class="left"></div>
            <div class="btn">
              <el-button
                type="primary"
                @click="jsonImportSwitch('bodyExitTableInfo', true)"
              >导入JSON
              </el-button
              >
            </div>
          </div>
          <baseTableForm
            :showIndex="false"
            :indexOperate="false"
            :funWidth="funWidth"
            :funData="funData"
            :tableInfo="bodyExitTableInfo"
            @onFunc="tableButtonHandle"
          >
            <template #parameterType="{ row }">
              <div>
                <el-select
                  class="w-100"
                  v-model="row[0][row[1].id]"
                  filterable
                  :clearable="true"
                  placeholder="请选择"
                  @change="fatherSelectChangeHandle(row)"
                >
                  <el-option
                    v-for="(el, index) in bodyOutOptions"
                    :key="el.id"
                    :label="el.label"
                    :value="el.id"
                  >
                  </el-option>
                </el-select>
              </div>
            </template>
            <template #concreteType="{ row }">
              <el-select
                class="w-100"
                v-model="row[0][row[1].id]"
                filterable
                :clearable="true"
                placeholder="请选择"
                @change="(val) => sonSelectChangeHandle(val, row)"
              >
                <el-option
                  v-for="(el, index) in concreteTypeOptions[
                  row[0]['parameterType']
                ]"
                  :key="el.id"
                  :label="el.label"
                  :value="el.id"
                >
                </el-option>
              </el-select>
            </template>
          </baseTableForm>
          <div class="add">
            <el-link
              type="primary"
              @click="addTableData(bodyExitTableInfo.tableData)"
              :underline="false"
            >+ 添加属性
            </el-link
            >
          </div>
        </div>
      </template>
      <template v-if="activeIndex === '5'">
        <apiDebugging :queryTableInfo="queryTableInfo.tableData" :bodyEntTableInfo="bodyEntTableInfo.tableData"
                      :bodyExitTableInfo="bodyExitTableInfo.tableData" :stepZeroForm="stepZeroForm"
                      :stepOneForm="stepOneForm" :headersTableInfo="headersTableInfo.tableData"></apiDebugging>
      </template>


    </div>
    <baseRightDialog
      :dialogVisible="rightDialog"
      title="JSON导入"
      @handleClose="dialoghandleClose"
      @handleConfirmClick="JSONCommit"
      :commitLoading="importLoading"
    >
      <div class="top" style="width: 90%; margin: 20px auto">
        <vue-json-editor
          v-model="resultInfo"
          :showBtns="false"
          :mode="'code'"
          @json-change="onJsonChange"
          @json-save="onJsonSave"
          @has-error="onError"
        />
      </div>
    </baseRightDialog>
  </div>
</template>

<script>
import baseCascader from "./compoments/baseCascader/index.vue";
import vueJsonEditor from "vue-json-editor";
import baseRightDialog from "./compoments/baseRightDialog";
import {getApiModuleApi} from "@/api/apiChunks/index.js";
import baseNewForm from "./compoments/baseNewForm.vue";
import baseTableForm from "./compoments/baseTableForm_v2.vue";
import {v4 as uuidv4} from "uuid";
import apiDebugging from "@/views/applicationList/apiList/apiDebugging.vue";

export default {
  data() {
    return {
      importLoading:false,
      commitLoading: false,
      authQueryOut: [],
      selectprops: {
        label: "parameterName",
        value: "parameterName",
        expandTrigger: "hover",
      }, //select label value配置
      resultInfo: {
        a: "b"
      },
      rightDialog: false,
      active: 0,//步骤控制
      stepZeroformRow: [
        {
          elCol: [
            {
              type: "input",
              title: "API名称",
              maxlength: 50,
              id: "apiName",
              row: 24,
              required: true,
              disabled: !this.$route.query.add,
            },
          ],
        },
        {
          elCol: [
            {
              type: "textrea",
              title: "API功能描述",
              maxlength: 200,
              id: "apiRemark",
              row: 24,
            },
          ],
        },
        {
          elCol: [
            {
              type: "input",
              title: "API应用",
              id: "appName",
              row: 24,
              required: false,
              editDisable: true,
              disabled: true,
            },
          ],
        },
        {
          elCol: [
            {
              type: "input",
              title: "模块",
              id: "catalogueName",
              row: 24,
              required: false,
              editDisable: true,
              disabled: true,
            },
          ],
        },
        {
          elCol: [
            {
              type: "radio",
              title: "API是否需要认证",
              id: "needLogin",
              row: 24,
              required: true,
              options: [
                {
                  label: "是",
                  id: "1",
                },
                {
                  label: "否",
                  id: "2",
                },
              ],
            },
          ],
        },
        {
          elCol: [
            {
              type: "newSelect",
              title: "认证接口",
              id: "authenticationPort",
              row: 24,
              show: true,
              required: true,
            },
          ],
        },
      ], //步骤1表
      stepZeroForm: {
        needLogin: "1",
        enableAccessEntry: ["2"],
      }, //步骤1表（数据）
      stepOneformRow: [
        {
          elCol: [
            {
              type: "input",
              title: "目标地址",
              maxlength: 200,
              id: "destinationAddress",
              pattern: "",
              message: "URL或协议不合法",
              row: 24,
              required: true,
            },
          ],
        },
        {
          elCol: [
            {
              type: "select",
              title: "请求编码",
              id: "requestCoding",
              row: 24,
              required: true,
              options: [],
            },
          ],
        },
        {
          elCol: [
            {
              type: "select",
              title: "请求方法",
              id: "requestMethod",
              row: 24,
              required: true,
              options: [],
            },
          ],
        },
        {
          elCol: [
            {
              type: "num",
              title: "超出时间",
              id: "timeoutPeriod",
              row: 24,
              min: 1,
              max: 600000,
              maxlength: 50,
              required: true,
              message: "ms",
            },
          ],
        },
        {
          elCol: [
            {
              type: "num",
              title: "限流",
              maxlength: 50,
              id: "currentLimiting",
              min: 1,
              row: 24,
              max: 1000,
              required: true,
              message: "TPS",
            },
          ],
        },
        {
          elCol: [
            {
              type: "input",
              title: "内部bean名称",
              maxlength: 200,
              id: "beanName",
              pattern: "",
              message: "URL或协议不合法",
              row: 24,
              required: true,
            },
          ],
        },
        {
          elCol: [
            {
              type: "input",
              title: "方法名称",
              maxlength: 200,
              id: "funName",
              pattern: "",
              message: "URL或协议不合法",
              row: 24,
              required: true,
            },
          ],
        },
        {
          elCol: [
            {
              type: "radio",
              title: "是否扩展API",
              maxlength: 200,
              id: "extensionApi",
              pattern: "",
              message: "URL或协议不合法",
              row: 24,
              required: true,
              options:[
                {
                  label:"是",
                  id:'1',
                },
                {
                  label:"否",
                  id:'2',
                }
              ]
            },
          ],
        },
      ],//步骤2表
      stepOneForm: {
        requestCoding: "1",
        timeoutPeriod: 10000,
        currentLimiting: 100,
        requestMethod: "1",
      }, //步骤2表（数据）
      stepThreeRadio: 1, //没用了（穿透配置）
      stepThreeRadioOptions: [
        {
          label: "query透传",
          id: 1,
        },
        {
          label: "包装data透传",
          id: 2,
        },
      ],//没用了（穿透配置）
      funData: [
        {
          type: "addattr",
          text: "添加属性",
          color: "#5a9cf8",
        },
        {
          type: "dele",
          text: "删除",
          color: "#e47470",
        },
      ],//表单操作属性
      queryTableInfo: {
        id: "queryIn",
        tableData: [],
        detailFields: [
          {
            type: "input",
            title: "参数名称",
            id: "parameterName",
            width: 250,
            maxlength: 50,
          },
          {
            type: "select",
            title: "参数类型",
            id: "parameterType",
          },
          {
            type: "select",
            title: "具体类型",
            id: "concreteType",
          },
          {
            type: "switch",
            title: "必选",
            id: "required",
            width: 80,
          },
          {
            type: "number",
            title: "长度",
            id: "length",
            width: 100,
            maxlength: 50,
          },
          {
            type: "input",
            title: "示例",
            id: "example",
            maxlength: 50,
          },
          {
            type: "input",
            title: "描述",
            id: "description",
            maxlength: 300,
          },
          {
            type: "number",
            title: "文档顺序",
            id: "sorts",
            width: 100,
            maxlength: 50,
          },
        ],
      }, //query表单信息
      bodyEntTableInfo: {
        id: "bodyIn",
        tableData: [
          {
            id: uuidv4(),
            parameterName: "body",
            first: true
          }
        ],
        detailFields: [
          {
            type: "input",
            title: "参数名称",
            id: "parameterName",
            width: 250,
          },
          {
            type: "select",
            title: "参数类型",
            id: "parameterType",
          },
          {
            type: "select",
            title: "具体类型",
            id: "concreteType",
          },
          {
            type: "switch",
            title: "必选",
            id: "required",
            width: 80,
          },
          {
            type: "number",
            title: "长度",
            id: "length",
            width: 100,
          },
          {
            type: "input",
            title: "示例",
            id: "example",
          },
          {
            type: "input",
            title: "描述",
            id: "description",
            maxlength: 300,
          },
          {
            type: "number",
            title: "文档顺序",
            id: "sorts",
            width: 100,
          },
        ],
      }, //body入参
      bodyExitTableInfo: {
        id: "bodyOut",
        tableData: [],
        detailFields: [
          {
            type: "input",
            title: "参数名称",
            id: "parameterName",
            width: 250,
          },
          {
            type: "select",
            title: "参数类型",
            id: "parameterType",
          },
          {
            type: "select",
            title: "具体类型",
            id: "concreteType",
          },
          {
            type: "switch",
            title: "必选",
            id: "required",
            width: 80,
          },
          {
            type: "number",
            title: "长度",
            id: "length",
            width: 100,
          },
          {
            type: "input",
            title: "示例",
            id: "example",
          },
          {
            type: "input",
            title: "描述",
            id: "description",
            maxlength: 300,
          },
          {
            type: "number",
            title: "文档顺序",
            id: "sorts",
            width: 100,
          },
        ],
      }, //body出参
      headersTableInfo: {
        id: "headerIn",
        tableData: [],
        detailFields: [
          {
            type: "input",
            title: "参数名称",
            id: "parameterName",
            width: 250,
          },
          {
            type: "select",
            title: "参数类型",
            id: "parameterType",
          },
          {
            type: "select",
            title: "具体类型",
            id: "concreteType",
          },
          {
            type: "switch",
            title: "必选",
            id: "required",
            width: 80,
          },
          {
            type: "number",
            title: "长度",
            id: "length",
            width: 100,
          },
          {
            type: "input",
            title: "示例",
            id: "example",
          },
          {
            type: "input",
            title: "描述",
            id: "description",
            maxlength: 300,
          },
          {
            type: "number",
            title: "文档顺序",
            id: "sorts",
            width: 100,
          },
        ],
      }, //头部
      parameterTypeOptions: [
        {
          label: "基本类型",
          id: "fundamental",
        },
        {
          label: "复杂类型",
          id: "complex",
        },
        {
          label: "基本列表",
          id: "fundamentallist",
        },
        {
          label: "复杂列表",
          id: "complexlist",
        },
      ],
      headerparameterTypeOptions: [
        {
          label: "基本类型",
          id: "fundamental",
        },
      ], //头部options配置
      concreteTypeOptions: {
        fundamental: [
          {
            label: "String",
            id: "String",
          },
          {
            label: "Int",
            id: "Number",
          },
          {
            label: "Long",
            id: "Long",
          },
          {
            label: "Float",
            id: "Float",
          },
          {
            label: "Double",
            id: "Double",
          },
          {
            label: "Boolean",
            id: "Boolean",
          },
        ],
        complex: [
          {
            label: "Object",
            id: "Object",
          },
          {
            label: "Map",
            id: "Map",
          },
        ],
        fundamentallist: [
          {
            label: "String",
            id: "String",
          },
          {
            label: "Int",
            id: "Number",
          },
          {
            label: "Long",
            id: "Long",
          },
          {
            label: "Float",
            id: "Float",
          },
          {
            label: "Double",
            id: "Double",
          },
          {
            label: "Boolean",
            id: "Boolean",
          },
        ],
        complexlist: [
          {
            label: "Object",
            id: "ObjectCom",
          },
        ],
        authport: [
          {
            label: "String",
            id: "String",
          },
          {
            label: "Int",
            id: "Int",
          },
          {
            label: "Long",
            id: "Long",
          },
          {
            label: "Float",
            id: "Float",
          },
          {
            label: "Double",
            id: "Double",
          },
          {
            label: "Boolean",
            id: "Boolean",
          },
        ],
      },
      bodyOutOptions: [
        {
          label: "基本类型",
          id: "fundamental",
        },
        {
          label: "复杂类型",
          id: "complex",
        },
        {
          label: "基本列表",
          id: "fundamentallist",
        },
        {
          label: "复杂列表",
          id: "complexlist",
        },
      ], //出参options配置
      importData: [],
      importFlag: true,
      activeIndex: '1',//选项卡序号
      bodyOptions: [
        {
          label: "复杂类型",
          id: "complex",
        },
        {
          label: "复杂列表",
          id: "complexlist",
        },
      ],
      bodyImport: false,//导入JSON是否为body
    };
  },
  methods: {
    // 选项卡点击事件
    handleSelect(key, keyPath) {
      this.activeIndex = key
    },
    onChangeRadio(val, index, indexRow, row) {
      if (row.id === "needLogin") {
        if (val == 1) {
          this.stepZeroformRow[5]["elCol"][0]["show"] = true;
        } else {
          this.stepZeroformRow[5]["elCol"][0]["show"] = false;
          this.stepZeroForm["authenticationPort"] = "";
        }
      }
    },
    jsonImportSwitch(data, flag, body = false) {
      this.importFlag = flag;
      this.importData = data;
      this.rightDialog = true;
      this.bodyImport = body
    },
    JSONCommit() {
      this.importLoading = true
      if (this.checkJson()) {
        let resultArr = [];
        // this.importData.push(this.JSONDataHandle(resultObj, this.resultInfo));
        if (!this.JSONDataHandle(resultArr, this.resultInfo, this.importFlag, this.bodyImport)) {
          this[this.importData].tableData = []
          resultArr.forEach((item) => this[this.importData].tableData.push(item));
          this.$message({
            type: "success",
            message: "导入成功",
          });
          this.dialoghandleClose();
        }
      }
      this.importLoading = false
    },
    JSONDataHandle(resultArr, obj, flag = true, bodyImport = false) {
      if (bodyImport) {
        if (obj instanceof Array) {
          let resultObj = {
            id: uuidv4(),
            first: true,
            parameterName: "body",
            parameterType: "complexlist",
            concreteType: "ObjectCom",
            children: [],
          };
          resultArr.push(resultObj)
          this.JSONDataHandle(resultArr[0].children, obj[0])
        } else {
          let resultObj = {
            id: uuidv4(),
            first: true,
            parameterName: "body",
            parameterType: "complex",
            concreteType: "Object",
            children: [],
          };
          resultArr.push(resultObj)
          this.JSONDataHandle(resultArr[0].children, obj)
        }
      } else {
        return Object.keys(obj).some((item) => {
          let resultObj = {};
          if (typeof obj[item] == "object" && obj[item] != null) {
            if (!flag) {
              this.$message({
                type: "error",
                message: "Heardes不支持导入object类型",
              });
              return true;
            }
            if (obj[item] instanceof Array) {
              if (typeof obj[item][0] === "object" && obj[item][0] != null) {
                resultObj["parameterType"] = "complexlist";
                resultObj["concreteType"] = "ObjectCom";
                resultObj["parameterName"] = item;
                resultObj["id"] = uuidv4();
                resultObj["children"] = [];
                let tempArr = resultObj["children"];
                resultArr.push(resultObj);
                this.JSONDataHandle(tempArr, obj[item][0]);
              } else {
                resultObj["parameterType"] = "fundamentallist";
                resultObj["concreteType"] = "String";
                resultObj["example"] = obj[item][0];
                resultObj["parameterName"] = item;
                resultObj["id"] = uuidv4();
                let tempArr = resultObj["children"];
                resultArr.push(resultObj);
              }
            } else {
              resultObj["concreteType"] = "Object";
              resultObj["parameterName"] = item;
              resultObj["parameterType"] = "complex";
              resultObj["id"] = uuidv4();
              resultObj["children"] = [];
              let tempArr = resultObj["children"];
              resultArr.push(resultObj);
              this.JSONDataHandle(tempArr, obj[item]);
            }
          } else {
            let type = Object.prototype.toString.call(obj[item]).slice(8, -1);
            let concreteType;
            if (type != "Null") {
              concreteType = type;
              resultObj["example"] = obj[item] !== "" ? obj[item].toString() : "";
            } else {
              concreteType = "String";
              resultObj["example"] = null
            }
            resultObj["concreteType"] = concreteType;
            resultObj["parameterName"] = item;
            resultObj["parameterType"] = "fundamental";
            resultObj["id"] = uuidv4();
            resultArr.push(resultObj);
          }
        });
      }

    },
    dialoghandleClose() {
      this.rightDialog = false;
      this.resultInfo = {};
      this.importFlag = false;
    },
    // 父下拉框改变处理
    fatherSelectChangeHandle(row) {
      if (row[0].concreteType) {
        row[0].concreteType = "";
      }
      if (row[0] && row[0].children) {
        this.$delete(row[0], "children");
      }
      if (row[0].example) {
        row[0].example = "";
      }
    },
    // 子下拉框改变处理
    sonSelectChangeHandle(val, row) {
      if (
        val != "Object" &&
        val != "ObjectCom" &&
        val != "Map" &&
        row[0].children
      ) {
        this.$delete(row[0], "children");
      }
      if (row[0].example) {
        row[0].example = "";
      }
    },
    async APITestHandle() {
    },
    // 当为编辑模式时拿数据
    async getEditInfo() {
      console.log(this.$route.query.apiId, 'id')
      const res = await getApiModuleApi(
        {
          tl: "sysApplicationService",
          as: "application",
          dj: "getAppApi",
        },
        {id: this.$route.query.apiId}
      );
      if (res.status == 200) {
        let obj0 = {};
        this.stepZeroformRow.push({
          elCol: [
            {
              type: "input",
              title: "接口编码",
              id: "apiCode",
              row: 24,
              required: false,
              editDisable: true,
              disabled: true,
            },
          ],
        },)
        obj0["apiName"] = res.attribute.apiName;
        obj0["catalogueId"] = res.attribute.catalogueId;
        obj0["catalogueName"] = res.attribute.catalogueName;
        obj0["appName"] = res.attribute.appName;
        obj0["apiRemark"] = res.attribute.apiRemark;
        obj0["appId"] = res.attribute.appId;
        obj0["needLogin"] = res.attribute.needLogin;
        obj0['apiCode'] = res.attribute.apiCode;
        if (res.attribute.needLogin == 2) {
          this.stepZeroformRow[5]["elCol"][0]["show"] = false;
        } else {
          this.stepZeroformRow[5]["elCol"][0]["show"] = true;
        }
        // this.stepZeroformRow[6]["elCol"][0]["show"] = false;
        obj0["authenticationPort"] = res.attribute.authenticationPort;
        let obj1 = {};
        obj1["destinationAddress"] = res.attribute.destinationAddress;
        obj1["requestCoding"] = res.attribute.requestCoding;
        obj1["requestMethod"] = res.attribute.requestMethod;
        obj1["timeoutPeriod"] = res.attribute.timeoutPeriod;
        obj1["currentLimiting"] = res.attribute.currentLimiting;
        obj1["beanName"] = res.attribute.beanName;
        obj1["funName"] = res.attribute.funName;
        obj1["extensionApi"] = res.attribute.extensionApi;
        this.stepZeroForm = obj0;
        this.stepOneForm = obj1;
        if (JSON.parse(res.attribute.queryIn) instanceof Array) {
          this.queryTableInfo.tableData = JSON.parse(res.attribute.queryIn);
        }
        if (JSON.parse(res.attribute.bodyIn) instanceof Array) {
          this.bodyEntTableInfo.tableData = JSON.parse(res.attribute.bodyIn);
        }
        if (JSON.parse(res.attribute.bodyOut) instanceof Array) {
          this.bodyExitTableInfo.tableData = JSON.parse(res.attribute.bodyOut);
        }
        if (JSON.parse(res.attribute.headerIn) instanceof Array) {
          this.headersTableInfo.tableData = JSON.parse(res.attribute.headerIn);
        }
      }
    },
    async initRequestCoding() {
      const res = await getApiModuleApi(
        {
          tl: "generalServiceImpl",
          as: "dictionaryshop",
          dj: "selectDictionaryshop",
        },
        {
          tab_name: "sys_app_api",
          column_name: "request_coding",
        }
      );
      if (res.status == 200) {
        res.attribute.forEach((item) => {
          this.stepOneformRow[1].elCol[0].options.push({
            id: item.column_value,
            label: item.column_content,
          });
        });
      }
    },
    async initRequestMethod() {
      const res = await getApiModuleApi(
        {
          tl: "generalServiceImpl",
          as: "dictionaryshop",
          dj: "selectDictionaryshop",
        },
        {
          tab_name: "sys_app_api",
          column_name: "request_method",
        }
      );
      if (res.status == 200) {
        res.attribute.forEach((item) => {
          this.stepOneformRow[2].elCol[0].options.push({
            id: item.column_value,
            label: item.column_content,
          });
        });
      }
    },
    // 点击提交数据处理
    async commit() {
      // this.commitLoading = true;
      let obj = {
        apiStatus: 1,
        appId: this.$route.query.id,
        catalogueId: this.$route.query.catalogueId,
        ...this.stepZeroForm,
        ...this.stepOneForm,
      };
      console.log(this.$route.query, 'query')
      obj[this.queryTableInfo.id] = this.queryTableInfo.tableData;
      obj[this.bodyEntTableInfo.id] = this.bodyEntTableInfo.tableData;
      obj[this.bodyExitTableInfo.id] = this.bodyExitTableInfo.tableData;
      obj[this.headersTableInfo.id] = this.headersTableInfo.tableData;
      obj["bodyInType"] = 1;
      obj["parameterPassingMode"] = 1;
      if (this.$route.query.add) {
        console.log(obj)
        const res = await getApiModuleApi(
          {
            tl: "sysApplicationService",
            as: "application",
            dj: "saveApi",
          },
          obj
        );
        if (res.status == 200) {
          this.$message({
            message: "保存接口成功！",
            type: "success",
          });
          this.$router.back()
        }
      } else {
        obj["id"] = this.$route.query.apiId;
        const res = await getApiModuleApi(
          {
            tl: "sysApplicationService",
            as: "application",
            dj: "updateApi",
          },
          obj
        );
        if (res.status == 200) {
          this.$message({
            message: "编辑接口成功！",
            type: "success",
          });
          this.$router.back()
        }
      }
      this.commitLoading = false;
    },
    // 添加行
    addTableData(tabledata, flag = false) {
      if (flag && tabledata.length) {
        this.$vmNews("body入参只允许添加一行属性", "warning")
        return
      } else {
        if (flag) {
          tabledata.push({id: uuidv4(), first: true, parameterName: "body"});
        } else {
          tabledata.push({id: uuidv4()});
        }
      }
    },
    // 删除行辅助函数（递归）
    idWatch(arr, id) {
      arr.some((item, index) => {
        if (item.id === id) {
          arr.splice(index, 1);
          return true;
        } else if (item.children && item.children.length) {
          this.idWatch(item.children, id);
        } else {
          return false;
        }
      });
    },
    // 表格操作按钮
    tableButtonHandle(row, item, data) {
      if (item.type === "dele") {
        this.$confirm("确认删除？")
          .then(() => {
            this.idWatch(data, row.id);
          })
          .catch(() => {
          });
      } else if (item.type === "addattr") {
        console.log(row);
        if (
          row.concreteType != "Object" &&
          row.concreteType != "Map" &&
          row.concreteType != "ObjectCom"
        ) {
          this.$notify({
            title: "添加失败",
            message: "具体类型为Object或Map时才能生成子集!",
            type: "error",
          });
          return;
        } else if (!row.children) {
          this.$set(row, "children", []);
          row.children.push({id: uuidv4()});
        } else {
          row.children.push({id: uuidv4()});
        }
        this.$notify({
          title: "添加成功",
          message: "添加成功！",
          type: "success",
        });
      }
    },
    // 添加行
    queryTableAddHandle(tableInfo) {
      tableInfo.tableData.push({});
    },
    queryTableDeleHandle() {
    },
    // 点击取消
    backActiveHandle() {
      this.active--;
    },
    // 点击下一步
    nextActiveHanlde() {
      if (this.active + 1 > 2) return;
      if (this.active == 0) {
        this.$refs.stepZeroform.submitForm();
      } else if (this.active == 1) {
        this.$refs.stepOneform.submitForm();
      }
    },
    // 点击取消
    backPageHandle() {
      this.$router.back();
    },
    // 点击下一步
    onSubmitHandle(form) {
      if (this.active == 0) {
        if (this.stepZeroForm.needLogin == 1) {
          // 如果需要认证点击下一步
          // 请求认证接口拿到bodyOut
          this.getAuthInfo(this.stepZeroForm.authenticationPort);
          // 更改select选项
          this.headerparameterTypeOptions = [
            {
              label: "基本类型",
              id: "fundamental",
            },
            {
              label: "认证类型",
              id: "authport",
            },
          ];
          this.parameterTypeOptions = [
            {
              label: "基本类型",
              id: "fundamental",
            },
            {
              label: "复杂类型",
              id: "complex",
            },
            {
              label: "基本列表",
              id: "fundamentallist",
            },
            {
              label: "复杂列表",
              id: "complexlist",
            },
            {
              label: "认证类型",
              id: "authport",
            },
          ];
          this.bodyOptions = [
            {
              label: "复杂类型",
              id: "complex",
            },
            {
              label: "复杂列表",
              id: "complexlist",
            },
          ];
        } else {
          // 如果不是认证点击下一步
          this.headerparameterTypeOptions = [
            {
              label: "基本类型",
              id: "fundamental",
            },
          ];
          this.parameterTypeOptions = [
            {
              label: "基本类型",
              id: "fundamental",
            },
            {
              label: "复杂类型",
              id: "complex",
            },
            {
              label: "基本列表",
              id: "fundamentallist",
            },
            {
              label: "复杂列表",
              id: "complexlist",
            },
          ];
          this.bodyOptions = [
            {
              label: "复杂类型",
              id: "complex",
            },
            {
              label: "复杂列表",
              id: "complexlist",
            },
          ];
          // 清空表格内带有认证的select
          this.clearTableData();
        }
      }
      this.$notify({
        title: "成功",
        message: "暂存成功！",
        type: "success",
      });
      this.active++;
    },
    clearTableData() {
      this.queryTableInfo.tableData = this.queryTableInfo.tableData.filter(
        (item) => {
          return item.parameterType != "authport";
        }
      );
      this.bodyEntTableInfo.tableData = this.bodyEntTableInfo.tableData.filter(
        (item) => {
          return item.parameterType != "authport";
        }
      );
      this.bodyExitTableInfo.tableData =
        this.bodyExitTableInfo.tableData.filter((item) => {
          return item.parameterType != "authport";
        });
      this.headersTableInfo.tableData = this.headersTableInfo.tableData.filter(
        (item) => {
          return item.parameterType != "authport";
        }
      );
    },
    //点击下一步如果有认证接口则请求
    async getAuthInfo(id) {
      const res = await getApiModuleApi(
        {
          tl: "sysApplicationService",
          as: "application",
          dj: "getAppApi",
        },
        {id}
      );
      console.log(res)
      if (res.status == 200) {
        this.authQueryOut = JSON.parse(res.attribute.bodyOut);
      }
    },
    // 实时保存
    onJsonChange(value) {
      this.onJsonSave(value);
    },
    // json相关
    onJsonSave(value) {
      this.resultInfo = value;
      this.hasJsonFlag = true;
    },
    // json相关（不用管）
    onError(value) {
      this.hasJsonFlag = false;
    },
    // json相关（不用管）
    checkJson() {
      if (this.hasJsonFlag === false) {
        alert("json验证失败");
        return false;
      } else {
        return true;
      }
    },
  },
  components: {
    baseNewForm,
    baseTableForm,
    baseRightDialog,
    vueJsonEditor,
    baseCascader,
    apiDebugging
  },
  computed: {
    funWidth() {
      return this.funData.length * 80;
    },
  },
  mounted() {
    this.initRequestCoding();
    this.initRequestMethod();
    if (!this.$route.query.add) {
      this.getEditInfo();
    } else {
      this.$set(this.stepZeroForm, 'appId', this.$route.query.id)
      this.$set(this.stepZeroForm, 'appName', this.$route.query.name)
      this.$set(this.stepZeroForm, 'catalogueId', this.$route.query.catalogueId)
      this.$set(this.stepZeroForm, 'catalogueName', this.$route.query.catalogueName)
    }
  },
};
</script>

<style scoped lang='scss'>
::v-deep .el-button {
  border-radius: 16px;
}

.wrap {
  height: 100%;
  overflow: scroll;

  .step {
    margin: 10px;
    border-radius: 10px;
  }

  .step3 {
    margin-left: 10px;
  }

  .formdata {
    padding: 30px 10px;
    margin: 10px;
    background-color: #fff;
    border-radius: 10px;

    .content {
      width: 50vw;
      margin: 10px auto;
    }
  }

  .nextbtn {
    padding: 30 10px;
    margin: 10px;
    display: flex;
    justify-content: flex-end;
  }

  .method {
    margin: 10px;
    border-radius: 10px;
    background-color: #fff;
    padding: 30px 10px;

    .title {
      margin-bottom: 30px;
    }
  }

  .tableBox {
    margin: 10px;
    border-radius: 10px;
    background-color: #fff;
    padding: 30px 10px;

    .title {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 10px;
    }

    .add {
      margin-top: 30px;
      border: 1px dotted #ccc;
      text-align: center;
      height: 50px;
      line-height: 50px;
    }
  }
}
</style>