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"
                @onChangeRadio="stepOneChangeRadio"
            ></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: 'radio',
              title: '是否扩展API',
              maxlength: 200,
              id: 'extensionApi',
              pattern: '',
              message: 'URL或协议不合法',
              row: 24,
              required: true,
              options: [
                {
                  label: '是',
                  id: '1'
                },
                {
                  label: '否',
                  id: '2'
                }
              ]
            }
          ]
        },
        {
          elCol: [
            {
              type: 'input',
              title: '内部bean名称',
              maxlength: 200,
              id: 'beanName',
              pattern: '',
              message: 'URL或协议不合法',
              row: 24,
              required: false
            }
          ]
        },
        {
          elCol: [
            {
              type: 'input',
              title: '方法名称',
              maxlength: 200,
              id: 'funName',
              pattern: '',
              message: 'URL或协议不合法',
              row: 24,
              required: false
            }
          ]
        }
      ],//步骤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: {
    //当步骤二中的是否拓展api改变时如果为1则内部名称和方法名称需必填
    stepOneChangeRadio(val, index, indexRow, row) {
      console.log(row)
      if (row.id === 'extensionApi') {
        this.stepOneformRow[6].elCol[0].required = val == 1
        this.stepOneformRow[7].elCol[0].required = val == 1
      }
    },
    // 选项卡点击事件
    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'] = ''
        }
      }
    },
    //JSON组件相关显示方法
    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
        //这里和stepOneChangeRadio方法一个道理 需要判断是否必填
        this.stepOneformRow[6].elCol[0].required = this.stepOneForm.extensionApi == 1
        this.stepOneformRow[7].elCol[0].required = this.stepOneForm.extensionApi == 1
        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) {
      console.log(this.active, 'active')
      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)
      this.$set(this.stepOneForm, 'extensionApi', '2')
    }
  }
}
</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>