应用新增、编辑修改

src/views/authorityManagement/components/authorityAppAdd.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2021-11-29 09:18:04
- * @LastEditTime: 2022-03-17 09:59:57
+ * @LastEditTime: 2022-03-25 16:35:08
  * @LastEditors: your name
  * @Description: 新增/编辑应用
  * @FilePath: \Foshan4A2.0\src\views\authorityManagement\components\addApp.vue
@@ -13,72 +13,245 @@
       <div class="addApp-form-title flex">
         <div class="title">新增应用</div>
         <div class="btn">
-          <el-button @click="onSubmit('form')" type="primary">保存</el-button>
+          <el-button
+            type="primary"
+            @click="onSubmit"
+          >保存</el-button>
         </div>
       </div>
       <div class="addApp-form-content dialog-public-background">
-        <el-form ref="form" class="form" :rules="rules" :model="form" label-position="right" label-width="80px">
+        <el-form
+          ref="form"
+          class="form"
+          :rules="rules"
+          :model="form"
+          label-position="right"
+          label-width="80px"
+        >
           <div class="flex">
-            <el-form-item prop="name" label="应用名称">
-              <el-input placeholder="请输入应用名称" v-model.trim="form.name"></el-input>
+            <el-form-item
+              prop="name"
+              label="应用名称"
+            >
+              <el-input
+                v-model.trim="form.name"
+                placeholder="请输入应用名称"
+              />
             </el-form-item>
-            <el-form-item label="请求类型">
-              <el-select @change="typeChange" v-model="form.id" placeholder="请求类型">
-                <el-option label="get" :value="1"></el-option>
-                <el-option label="post" :value="2"></el-option>
+            <el-form-item
+              label="请求类型"
+              prop="type"
+              :required="true"
+            >
+              <el-select
+                v-model="form.type"
+                placeholder="请求类型"
+                @change="typeChange"
+              >
+                <el-option
+                  label="get"
+                  :value="1"
+                />
+                <el-option
+                  label="post"
+                  :value="2"
+                />
               </el-select>
-              <!-- <el-input placeholder="请输入APPID" v-model="form.id"></el-input> -->
             </el-form-item>
-            <el-form-item prop="app" label="参数类型">
-              <el-select :disabled="typeFlag" v-model="form.app" placeholder="参数类型">
-                <el-option label="application/json" value="application/json"></el-option>
-                <el-option label="application/text" value="application/text"></el-option>
+            <el-form-item
+              prop="app"
+              label="参数类型"
+              :required="form.type === 2"
+            >
+              <el-select
+                v-model="form.app"
+                :disabled="typeFlag"
+                placeholder="参数类型"
+              >
+                <el-option
+                  label="application/json"
+                  value="application/json"
+                />
+                <el-option
+                  label="application/text"
+                  value="application/text"
+                />
               </el-select>
               <!-- <el-input placeholder="请输入参数类型" v-model.trim="form.app"></el-input> -->
             </el-form-item>
           </div>
-          <el-form-item prop="url" class="url" label="应用地址">
-            <el-input placeholder="请输入应用地址" v-model.trim="form.url"></el-input>
+          <el-form-item
+            prop="url"
+            class="url"
+            label="应用地址"
+          >
+            <el-input
+              v-model.trim="form.url"
+              placeholder="请输入应用地址"
+            />
           </el-form-item>
-          <el-form-item prop="desc" class="desc" label="描述">
-            <el-input type="textarea" rows="3" placeholder="请输入描述" v-model.trim="form.desc"></el-input>
+          <el-form-item
+            prop="desc"
+            class="desc"
+            label="描述"
+          >
+            <el-input
+              v-model.trim="form.desc"
+              type="textarea"
+              rows="3"
+              placeholder="请输入描述"
+            />
           </el-form-item>
         </el-form>
         <div class="addApp-form-title domain-title flex">
-          <div class="title">入参管理</div>
+          <div class="title">参数管理</div>
           <div class="btn">
-            <el-button @click="addDomain" type="primary">新增</el-button>
+            <el-button
+              type="primary"
+              @click="addDomain"
+            >新增</el-button>
           </div>
         </div>
         <div class="addApp-form-content domain">
-          <el-form :model="dynamicValidateForm" ref="dynamicValidateForm" label-width="85px" class="demo-dynamic">
-            <div class="flex" v-for="(domain, index) in dynamicValidateForm.domains" :key="index">
-              <div class="flex-wrap">
-                <el-form-item label="入参名称" :prop="'domains.' + index + '.name'">
-                  <el-input placeholder="请输入最大64位参数名称" maxlength="64" v-model.trim="domain.AppInputName"></el-input>
+          <el-form
+            ref="dynamicValidateForm"
+            :model="dynamicValidateForm"
+            label-width="80px"
+            class="demo-dynamic"
+          >
+            <el-row
+              v-for="(domain, index) in domains"
+              :key="index"
+            >
+              <el-col
+                :lg="{ span: '1-9' }"
+                :sm="12"
+                :xs="12"
+              >
+                <el-form-item
+                  label="参数名称"
+                  :prop="'domains.' + index + '.AppInputName'"
+                  :rules="{ required: true, message: '请输入参数名称', trigger: ['change', 'blur'] }"
+                >
+                  <el-input
+                    v-model.trim="domain.AppInputName"
+                    placeholder="请输入最大64位参数名称"
+                    maxlength="64"
+                  />
                 </el-form-item>
-                <el-form-item label="入参值" :prop="'domains.' + index + '.value'">
-                  <el-input placeholder="请输入最大64位参数值" maxlength="64" v-model.trim="domain.AppInputValue"></el-input>
+              </el-col>
+              <el-col
+                :lg="{ span: '1-9' }"
+                :sm="12"
+                :xs="12"
+              >
+                <el-form-item
+                  label="参数描述"
+                  :prop="'domains.' + index + '.InputComment'"
+                >
+                  <el-input
+                    v-model.trim="domain.InputComment"
+                    placeholder="请输入最大64位参数描述"
+                    maxlength="64"
+                  />
                 </el-form-item>
-                <el-form-item label="入参类型" :prop="'domains.' + index + '.type'">
-                  <el-select v-model="domain.AppInputType" :disabled="typeFlag" placeholder="参数类型">
-                    <el-option label="string" value="string"></el-option>
-                    <el-option label="int" value="int"></el-option>
+              </el-col>
+              <el-col
+                :lg="{ span: '1-9' }"
+                :sm="12"
+                :xs="12"
+              >
+                <el-form-item
+                  label="参数类型"
+                  :prop="'domains.' + index + '.AppInputType'"
+                >
+                  <el-select
+                    v-model="domain.AppInputType"
+                    :disabled="typeFlag"
+                    placeholder="参数类型"
+                  >
+                    <el-option
+                      label="string"
+                      value="string"
+                    />
+                    <el-option
+                      label="int"
+                      value="int"
+                    />
                   </el-select>
                   <!-- <el-input placeholder="请输入最大8位参数类型" maxlength="8" v-model.trim="domain.AppInputType"></el-input> -->
                 </el-form-item>
-                <el-form-item label="入参位置" :prop="'domains.' + index + '.place'">
-                  <el-select v-model="domain.AppInputSite" placeholder="参数位置">
-                    <el-option label="header" value="header"></el-option>
-                    <el-option label="body" value="body"></el-option>
+              </el-col>
+              <el-col
+                :lg="{ span: '1-9' }"
+                :sm="12"
+                :xs="12"
+              >
+                <el-form-item
+                  label="参数位置"
+                  :prop="'domains.' + index + '.AppInputSite'"
+                >
+                  <el-select
+                    v-model="domain.AppInputSite"
+                    placeholder="参数位置"
+                    :disabled="typeFlag"
+                  >
+                    <el-option
+                      v-if="form.type === 1"
+                      label="url"
+                      value="url"
+                    />
+                    <el-option
+                      v-if="form.type === 2"
+                      label="header"
+                      value="header"
+                    />
+                    <el-option
+                      v-if="form.type === 2"
+                      label="body"
+                      value="body"
+                    />
                   </el-select>
                   <!-- <el-input placeholder="请输入最大8位参数位置" maxlength="8" v-model.trim="domain.AppInputSite"></el-input> -->
                 </el-form-item>
-              </div>
-              <div>
-                <el-button size="small" type="danger" @click.prevent="removeDomain(domain)">删除</el-button>
-              </div>
-            </div>
+              </el-col>
+              <el-col
+                :lg="{ span: '1-9' }"
+                :sm="12"
+                :xs="12"
+              >
+                <el-form-item
+                  label="参数值"
+                  :prop="'domains.' + index + '.InputValue'"
+                  :rules="{ required: true, message: '请输入参数值', trigger: ['change', 'blur'] }"
+                >
+                  <el-autocomplete
+                    ref="inputValue"
+                    v-model.trim="domain.InputValue"
+                    placeholder="请输入参数值"
+                    :fetch-suggestions="querySearch"
+                  >
+                    <i
+                      slot="suffix"
+                      class="el-icon-edit el-input__icon"
+                      @click="handleIconClick(index)"
+                    />
+                  </el-autocomplete>
+                </el-form-item>
+              </el-col>
+              <el-col
+                class="button-wrap"
+                :lg="{ span: '0-5' }"
+                :sm="12"
+                :xs="12"
+              >
+                <el-button
+                  size="small"
+                  type="danger"
+                  @click.prevent="removeDomain(index)"
+                >删除</el-button>
+              </el-col>
+            </el-row>
           </el-form>
         </div>
       </div>
@@ -88,8 +261,13 @@
       <div class="flex-wrap">
         <div class="upload">
           <div class="title">上传Logo</div>
-          <el-upload action="https://jsonplaceholder.typicode.com/posts/" list-type="picture-card" :on-preview="handlePictureCardPreview" :on-remove="handleRemove">
-            <i class="el-icon-plus"></i>
+          <el-upload
+            action="https://jsonplaceholder.typicode.com/posts/"
+            list-type="picture-card"
+            :on-preview="handlePictureCardPreview"
+            :on-remove="handleRemove"
+          >
+            <i class="el-icon-plus" />
           </el-upload>
         </div>
         <div class="preview">
@@ -102,24 +280,24 @@
 </template>
 
 <script>
-import { SaveApp } from "@/api/apiAuthority";
+import { SaveApp } from '@/api/apiAuthority'
 import { lengthValidator } from '@/utils/validate'
 export default {
-  name: "Addapp",
-  data () {
+  name: 'Addapp',
+  data() {
     return {
       form: {
-        //应用表单
-        name: "",
-        id: "",
-        app: "",
-        url: "",
-        desc: "",
+        // 应用表单
+        name: '',
+        type: 1,
+        app: '',
+        url: '',
+        desc: ''
       },
       rules: {
-        //表单验证
+        // 表单验证
         name: [
-          { required: true, message: "请输入应用名称", trigger: "blur" },
+          { required: true, message: '请输入应用名称', trigger: 'blur' },
           { validator: lengthValidator, max: 128, message: '长度在 1 到 128 个字符', trigger: ['change', 'blur'] }
         ],
         url: [{ validator: lengthValidator, max: 512, message: '长度在 1 到 512 个字符', trigger: ['change', 'blur'] }],
@@ -129,49 +307,74 @@ export default {
         ],
         app: [{ validator: lengthValidator, max: 32, message: '长度在 1 到 32 个字符', trigger: ['change', 'blur'] }]
       },
-      radio: "1",
-      type: null, //参数类型
-      dialogImageUrl: "",
+      dialogImageUrl: '',
       dialogVisible: false,
-      dynamicValidateForm: {
-        domains: [{
+      domains: [
+        {
           AppInputName: '',
-          AppInputType: '',
-          AppInputSite: '',
-          AppInputValue: ''
-        }]
-      },
-      typeFlag: false
-    };
+          InputComment: '',
+          AppInputType: 'string',
+          AppInputSite: 'url',
+          InputValue: ''
+        }
+      ],
+      AppValues: [
+        {
+          value: 'token'
+        },
+        {
+          value: 'loginName'
+        }
+      ],
+      typeFlag: true
+    }
+  },
+  computed: {
+    dynamicValidateForm() {
+      return {
+        domains: this.domains
+      }
+    }
   },
   methods: {
-    handleRemove (file, fileList) {
-      console.log(file, fileList);
+    querySearch(queryString, callback) {
+      const AppValues = this.AppValues
+      const results = queryString
+        ? AppValues.filter(AppValue => AppValue.value.toLowerCase().includes(queryString.toLowerCase()))
+        : AppValues
+      // 调用 callback 返回建议列表的数据
+      callback(results)
+    },
+    handleIconClick(index) {
+      this.$refs['inputValue'][index].focus()
+    },
+    handleRemove(file, fileList) {
+      console.log(file, fileList)
     },
-    handlePictureCardPreview (file) {
-      this.dialogImageUrl = file.url;
-      this.dialogVisible = true;
+    handlePictureCardPreview(file) {
+      this.dialogImageUrl = file.url
+      this.dialogVisible = true
     },
     // 新增应用
-    async saveApp () {
+    async saveApp() {
       try {
         const res = await SaveApp({
           AppName: this.form.name,
           AppDesc: this.form.desc,
           AppUrl: this.form.url,
-          RequestType: this.form.id,
+          RequestType: this.form.type,
           BodyType: this.form.app,
-          Inputs: this.dynamicValidateForm.domains
-        });
+          Inputs: this.domains
+        })
         if (res.code === 0) {
-          this.$message.success(res.message);
-          this.$store.dispatch("tagsView/delView", this.$route);
-          this.$router.push("/authority");
+          this.$message.success(res.message)
+          this.$store.dispatch('tagsView/delView', this.$route)
+          this.$router.push('/authority')
         } else {
-          this.$message.error(res.message);
+          this.$message.error(res.message)
         }
       } catch (error) {
-        console.log("出错了", error);
+        console.log('出错了', error)
       }
     },
     /**
@@ -179,53 +382,64 @@ export default {
      * @param {*}
      * @return {*}
      */
-    onSubmit (formName) {
-      this.$refs[formName].validate((valid) => {
-        if (valid) {
-          this.saveApp();
-        } else {
-          return false;
+    onSubmit() {
+      let submitEnable = true
+      this.$refs['form'].validate(valid => {
+        if (!valid) {
+          submitEnable = false
+          return false
+        }
+      })
+      this.$refs['dynamicValidateForm'].validate(valid => {
+        if (!valid) {
+          submitEnable = false
+          return false
         }
-      });
+      })
+      submitEnable && this.saveApp()
     },
-    removeDomain (item) {
-      var index = this.dynamicValidateForm.domains.indexOf(item)
-      if (index !== -1) {
-        this.dynamicValidateForm.domains.splice(index, 1)
-      }
+    removeDomain(index) {
+      this.domains.splice(index, 1)
     },
-    addDomain () {
-      const { id } = this.form
-      if (id == 1) {
-        this.dynamicValidateForm.domains.push({
+    addDomain() {
+      const { type } = this.form
+      if (type === 1) {
+        this.domains.push({
           AppInputName: '',
+          InputComment: '',
           AppInputType: 'string',
-          AppInputSite: '',
-          AppInputValue: ''
-        });
+          AppInputSite: 'url',
+          InputValue: ''
+        })
       } else {
-        this.dynamicValidateForm.domains.push({
+        this.domains.push({
           AppInputName: '',
-          AppInputType: '',
-          AppInputSite: '',
-          AppInputValue: ''
-        });
+          InputComment: '',
+          AppInputType: 'string',
+          AppInputSite: 'body',
+          InputValue: ''
+        })
       }
     },
-    typeChange (val) {
-      const datas = this.dynamicValidateForm.domains
-      if (val == 1) {
-        this.typeFlag = true;
-        this.form.app = '';
+    typeChange(val) {
+      const datas = this.domains
+      if (val === 1) {
+        this.typeFlag = true
+        this.form.app = ''
         datas.forEach(item => {
-          item.AppInputType = 'string';
+          item.AppInputType = 'string'
+          item.AppInputSite = 'url'
         })
       } else {
-        this.typeFlag = false;
+        this.typeFlag = false
+        this.form.app = 'application/json'
+        datas.forEach(item => {
+          item.AppInputSite = 'body'
+        })
       }
     }
-  },
-};
+  }
+}
 </script>
 
 <style lang="scss" scoped>
@@ -281,6 +495,20 @@ export default {
           position: relative;
           top: 4px;
         }
+        @media (min-width: 1200px) {
+          .el-col-lg-1-9 {
+            width: 19%;
+          }
+          .el-col-lg-0-5 {
+            width: 5%;
+          }
+        }
+        .button-wrap {
+          text-align: right;
+        }
+        .el-icon-edit {
+          cursor: text;
+        }
       }
     }
     .domain-title {

src/views/authorityManagement/components/authorityAppEdit.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2021-11-29 09:18:04
- * @LastEditTime: 2022-03-17 14:09:47
+ * @LastEditTime: 2022-03-25 16:38:03
  * @LastEditors: your name
  * @Description: 新增/编辑应用
  * @FilePath: \Foshan4A2.0\src\views\authorityManagement\components\addApp.vue
@@ -23,72 +23,245 @@
         </div>
         <div class="btn">
           <!-- <el-button @click="deleteApp" class="r24" type="danger">删除</el-button> -->
-          <el-button @click="onSubmit('form')" type="primary">保存</el-button>
+          <el-button
+            type="primary"
+            @click="onSubmit"
+          >保存</el-button>
         </div>
       </div>
       <div class="addApp-form-content dialog-public-background">
-        <el-form ref="form" class="form" :rules="rules" :model="form" label-position="right" label-width="80px">
+        <el-form
+          ref="form"
+          class="form"
+          :rules="rules"
+          :model="form"
+          label-position="right"
+          label-width="80px"
+        >
           <div class="flex">
-            <el-form-item prop="name" label="应用名称">
-              <el-input placeholder="请输入应用名称" v-model.trim="form.name"></el-input>
+            <el-form-item
+              label="应用名称"
+              prop="name"
+            >
+              <el-input
+                v-model.trim="form.name"
+                placeholder="请输入应用名称"
+              />
             </el-form-item>
-            <el-form-item label="请求类型">
-              <el-select @change="typeChange" v-model="form.id" placeholder="请求类型">
-                <el-option label="get" :value="1"></el-option>
-                <el-option label="post" :value="2"></el-option>
+            <el-form-item
+              label="请求类型"
+              prop="type"
+              :required="true"
+            >
+              <el-select
+                v-model="form.type"
+                placeholder="请求类型"
+                @change="typeChange"
+              >
+                <el-option
+                  label="get"
+                  :value="1"
+                />
+                <el-option
+                  label="post"
+                  :value="2"
+                />
               </el-select>
-              <!-- <el-input placeholder="请输入APPID" disabled v-model="form.id"></el-input> -->
             </el-form-item>
-            <el-form-item prop="app" label="参数类型">
-              <el-select :disabled="typeFlag" v-model="form.app" placeholder="参数类型">
-                <el-option label="application/json" value="application/json"></el-option>
-                <el-option label="application/text" value="application/text"></el-option>
+            <el-form-item
+              label="参数类型"
+              prop="app"
+              :required="form.type === 2"
+            >
+              <el-select
+                v-model="form.app"
+                :disabled="typeFlag"
+                placeholder="参数类型"
+              >
+                <el-option
+                  label="application/json"
+                  value="application/json"
+                />
+                <el-option
+                  label="application/text"
+                  value="application/text"
+                />
               </el-select>
               <!-- <el-input placeholder="请输入参数类型" v-model.trim="form.app"></el-input> -->
             </el-form-item>
           </div>
-          <el-form-item class="url" prop="url" label="应用地址">
-            <el-input placeholder="请输入应用地址" v-model.trim="form.url"></el-input>
+          <el-form-item
+            class="url"
+            prop="url"
+            label="应用地址"
+          >
+            <el-input
+              v-model.trim="form.url"
+              placeholder="请输入应用地址"
+            />
           </el-form-item>
-          <el-form-item prop="desc" class="desc" label="描述">
-            <el-input type="textarea" rows="3" placeholder="请输入描述" v-model.trim="form.desc"></el-input>
+          <el-form-item
+            prop="desc"
+            class="desc"
+            label="描述"
+          >
+            <el-input
+              v-model.trim="form.desc"
+              type="textarea"
+              rows="3"
+              placeholder="请输入描述"
+            />
           </el-form-item>
         </el-form>
         <div class="addApp-form-title domain-title flex">
           <div class="title">参数管理</div>
           <div class="btn">
-            <el-button @click="addDomain" type="primary">新增</el-button>
+            <el-button
+              type="primary"
+              @click="addDomain"
+            >新增</el-button>
           </div>
         </div>
         <div class="addApp-form-content domain">
-          <el-form :model="dynamicValidateForm" ref="dynamicValidateForm" label-width="85px" class="demo-dynamic">
-            <div class="flex" v-for="(domain, index) in dynamicValidateForm.domains" :key="index">
-              <div class="flex-wrap">
-                <el-form-item label="入参名称" :prop="'domains.' + index + '.name'">
-                  <el-input placeholder="请输入最大64位参数名称" maxlength="64" v-model.trim="domain.AppInputName"></el-input>
+          <el-form
+            ref="dynamicValidateForm"
+            :model="dynamicValidateForm"
+            label-width="80px"
+            class="demo-dynamic"
+          >
+            <el-row
+              v-for="(domain, index) in domains"
+              :key="index"
+            >
+              <el-col
+                :lg="{ span: '1-9' }"
+                :sm="12"
+                :xs="12"
+              >
+                <el-form-item
+                  label="参数名称"
+                  :prop="'domains.' + index + '.AppInputName'"
+                  :rules="{ required: true, message: '请输入参数名称', trigger: ['change', 'blur'] }"
+                >
+                  <el-input
+                    v-model.trim="domain.AppInputName"
+                    placeholder="请输入最大64位参数名称"
+                    maxlength="64"
+                  />
                 </el-form-item>
-                <el-form-item label="入参值" :prop="'domains.' + index + '.value'">
-                  <el-input placeholder="请输入最大64位参数值" maxlength="64" v-model.trim="domain.AppInputValue"></el-input>
+              </el-col>
+              <el-col
+                :lg="{ span: '1-9' }"
+                :sm="12"
+                :xs="12"
+              >
+                <el-form-item
+                  label="参数描述"
+                  :prop="'domains.' + index + '.InputComment'"
+                >
+                  <el-input
+                    v-model.trim="domain.InputComment"
+                    placeholder="请输入最大64位参数描述"
+                    maxlength="64"
+                  />
                 </el-form-item>
-                <el-form-item label="入参类型" :prop="'domains.' + index + '.type'">
-                  <el-select v-model="domain.AppInputType" :disabled="typeFlag" placeholder="参数类型">
-                    <el-option label="string" value="string"></el-option>
-                    <el-option label="int" value="int"></el-option>
+              </el-col>
+              <el-col
+                :lg="{ span: '1-9' }"
+                :sm="12"
+                :xs="12"
+              >
+                <el-form-item
+                  label="参数类型"
+                  :prop="'domains.' + index + '.AppInputType'"
+                >
+                  <el-select
+                    v-model="domain.AppInputType"
+                    :disabled="typeFlag"
+                    placeholder="参数类型"
+                  >
+                    <el-option
+                      label="string"
+                      value="string"
+                    />
+                    <el-option
+                      label="int"
+                      value="int"
+                    />
                   </el-select>
                   <!-- <el-input placeholder="请输入最大8位参数类型" maxlength="8" v-model.trim="domain.AppInputType"></el-input> -->
                 </el-form-item>
-                <el-form-item label="入参位置" :prop="'domains.' + index + '.place'">
-                  <el-select v-model="domain.AppInputSite" placeholder="参数位置">
-                    <el-option label="header" value="header"></el-option>
-                    <el-option label="body" value="body"></el-option>
+              </el-col>
+              <el-col
+                :lg="{ span: '1-9' }"
+                :sm="12"
+                :xs="12"
+              >
+                <el-form-item
+                  label="参数位置"
+                  :prop="'domains.' + index + '.AppInputSite'"
+                >
+                  <el-select
+                    v-model="domain.AppInputSite"
+                    placeholder="参数位置"
+                    :disabled="typeFlag"
+                  >
+                    <el-option
+                      v-if="form.type === 1"
+                      label="url"
+                      value="url"
+                    />
+                    <el-option
+                      v-if="form.type === 2"
+                      label="header"
+                      value="header"
+                    />
+                    <el-option
+                      v-if="form.type === 2"
+                      label="body"
+                      value="body"
+                    />
                   </el-select>
                   <!-- <el-input placeholder="请输入最大8位参数位置" maxlength="8" v-model.trim="domain.AppInputSite"></el-input> -->
                 </el-form-item>
-              </div>
-              <div>
-                <el-button size="small" type="danger" @click.prevent="removeDomain(domain)">删除</el-button>
-              </div>
-            </div>
+              </el-col>
+              <el-col
+                :lg="{ span: '1-9' }"
+                :sm="12"
+                :xs="12"
+              >
+                <el-form-item
+                  label="参数值"
+                  :prop="'domains.' + index + '.InputValue'"
+                  :rules="{ required: true, message: '请输入参数值', trigger: ['change', 'blur'] }"
+                >
+                  <el-autocomplete
+                    ref="inputValue"
+                    v-model.trim="domain.InputValue"
+                    placeholder="请输入参数值"
+                    :fetch-suggestions="querySearch"
+                  >
+                    <i
+                      slot="suffix"
+                      class="el-icon-edit el-input__icon"
+                      @click="handleIconClick(index)"
+                    />
+                  </el-autocomplete>
+                </el-form-item>
+              </el-col>
+              <el-col
+                class="button-wrap"
+                :lg="{ span: '0-5' }"
+                :sm="12"
+                :xs="12"
+              >
+                <el-button
+                  size="small"
+                  type="danger"
+                  @click.prevent="removeDomain(index)"
+                >删除</el-button>
+              </el-col>
+            </el-row>
           </el-form>
         </div>
       </div>
@@ -98,8 +271,13 @@
       <div class="flex-wrap">
         <div class="upload">
           <div class="title">上传Logo</div>
-          <el-upload action="https://jsonplaceholder.typicode.com/posts/" list-type="picture-card" :on-preview="handlePictureCardPreview" :on-remove="handleRemove">
-            <i class="el-icon-plus"></i>
+          <el-upload
+            action="https://jsonplaceholder.typicode.com/posts/"
+            list-type="picture-card"
+            :on-preview="handlePictureCardPreview"
+            :on-remove="handleRemove"
+          >
+            <i class="el-icon-plus" />
           </el-upload>
         </div>
         <div class="preview">
@@ -112,29 +290,24 @@
 </template>
 
 <script>
-import {
-  GetAppDetails,
-  EditApp,
-  UpdateAppStatus,
-  DeleteApp,
-} from "@/api/apiAuthority";
+import { GetAppDetails, EditApp, DeleteApp } from '@/api/apiAuthority'
 import { lengthValidator } from '@/utils/validate'
 export default {
-  name: "Addapp",
-  data () {
+  name: 'Addapp',
+  data() {
     return {
       form: {
-        //应用表单
-        name: "",
-        id: "",
-        app: "",
-        url: "",
-        desc: "",
+        // 应用表单
+        name: '',
+        type: '',
+        app: '',
+        url: '',
+        desc: ''
       },
       rules: {
-        //表单验证
+        // 表单验证
         name: [
-          { required: true, message: "请输入应用名称", trigger: "blur" },
+          { required: true, message: '请输入应用名称', trigger: 'blur' },
           { validator: lengthValidator, max: 128, message: '长度在 1 到 128 个字符', trigger: ['change', 'blur'] }
         ],
         url: [{ validator: lengthValidator, max: 512, message: '长度在 1 到 512 个字符', trigger: ['change', 'blur'] }],
@@ -144,156 +317,200 @@ export default {
         ],
         app: [{ validator: lengthValidator, max: 32, message: '长度在 1 到 32 个字符', trigger: ['change', 'blur'] }]
       },
-      radio: 1,
+      // radio: 1,
       AppId: null,
-      type: null, //参数类型
-      dialogImageUrl: "",
+      dialogImageUrl: '',
       dialogVisible: false,
-      dynamicValidateForm: {
-        domains: [{
+      domains: [
+        {
           AppInputName: '',
+          InputComment: '',
           AppInputType: '',
           AppInputSite: '',
-          AppInputValue: ''
-        }]
-      },
+          InputValue: ''
+        }
+      ],
+      AppValues: [
+        {
+          value: 'token'
+        },
+        {
+          value: 'loginName'
+        }
+      ],
       typeFlag: false
-    };
+    }
   },
-  created () {
-    const { AuthId, Status } = this.$route.query;
-    this.radio = Status;
-    this.AppId = AuthId;
-    this.getAppDetails(AuthId);
+  computed: {
+    dynamicValidateForm() {
+      return {
+        domains: this.domains
+      }
+    }
+  },
+  created() {
+    const { AuthId, Status } = this.$route.query
+    this.radio = Status
+    this.AppId = AuthId
+    this.getAppDetails(AuthId)
   },
   methods: {
-    handleRemove (file, fileList) {
-      console.log(file, fileList);
+    querySearch(queryString, callback) {
+      const AppValues = this.AppValues
+      const results = queryString
+        ? AppValues.filter(AppValue => AppValue.value.toLowerCase().includes(queryString.toLowerCase()))
+        : AppValues
+      // 调用 callback 返回建议列表的数据
+      callback(results)
+    },
+    handleIconClick(index) {
+      this.$refs['inputValue'][index].focus()
+    },
+    handleRemove(file, fileList) {
+      console.log(file, fileList)
     },
-    handlePictureCardPreview (file) {
-      this.dialogImageUrl = file.url;
-      this.dialogVisible = true;
+    handlePictureCardPreview(file) {
+      this.dialogImageUrl = file.url
+      this.dialogVisible = true
     },
-    //获取应用详情
-    async getAppDetails (id) {
+    // 获取应用详情
+    async getAppDetails(id) {
       try {
         const res = await GetAppDetails({
-          AppId: id,
-        });
+          AppId: id
+        })
         if (res.code === 0) {
-          const { AppName, AppShowId, AppShowSecret, AppDesc, AppUrl, Inputs, RequestType, BodyType } =
-            res.returnData;
-          this.form.name = AppName;
-          // this.form.id = AppShowId;
-          // this.form.app = AppShowSecret;
-          this.form.id = Number(RequestType) || '';
-          this.form.app = BodyType;
-          this.form.desc = AppDesc;
-          this.form.url = AppUrl;
-          this.dynamicValidateForm.domains = Inputs;
-          this.typeFlag = this.form.id ? true : false;
+          const { AppName, AppDesc, AppUrl, Inputs, RequestType, BodyType } = res.returnData
+          this.form.name = AppName
+          this.form.type = Number(RequestType) || ''
+          this.form.app = BodyType
+          this.form.desc = AppDesc
+          this.form.url = AppUrl
+          this.domains = Inputs
+          this.typeFlag = this.form.type === 1
         } else {
-          this.$message.error(res.message);
+          this.$message.error(res.message)
         }
       } catch (error) {
-        console.log("出错了", error);
+        console.log('出错了', error)
       }
     },
-    //应用状态变更
-    async handleChange (val) {
-      try {
-        const res = await UpdateAppStatus({
-          AppId: this.AppId,
-          Status: val,
-        });
-        if (res.code === 0) {
-          this.$message.success(res.message);
-        } else {
-          this.$message.error(res.message);
+    // 应用状态变更
+    // async handleChange(val) {
+    //   try {
+    //     const res = await UpdateAppStatus({
+    //       AppId: this.AppId,
+    //       Status: val
+    //     })
+    //     if (res.code === 0) {
+    //       this.$message.success(res.message)
+    //     } else {
+    //       this.$message.error(res.message)
+    //     }
+    //   } catch (error) {
+    //     console.log('出错了', error)
+    //   }
+    // },
+    onSubmit() {
+      let submitEnable = true
+      this.$refs['form'].validate(valid => {
+        if (!valid) {
+          submitEnable = false
+          return false
         }
-      } catch (error) {
-        console.log("出错了", error);
-      }
-    },
-    onSubmit (formName) {
-      this.$refs[formName].validate((valid) => {
-        if (valid) {
-          this.editApp();
-        } else {
-          return false;
+      })
+      this.$refs['dynamicValidateForm'].validate(valid => {
+        if (!valid) {
+          submitEnable = false
+          return false
         }
-      });
+      })
+      submitEnable && this.editApp()
     },
-    //应用状态变更
-    async editApp () {
+    // 应用状态变更
+    async editApp() {
       try {
         const res = await EditApp({
           AppId: this.AppId,
           AppDesc: this.form.desc,
           AppName: this.form.name,
           AppUrl: this.form.url,
-          RequestType: this.form.id,
+          RequestType: this.form.type,
           BodyType: this.form.app,
-          Inputs: this.dynamicValidateForm.domains
-        });
+          Inputs: this.domains
+        })
         if (res.code === 0) {
-          this.$message.success(res.message);
-          this.$store.dispatch("tagsView/delView", this.$route);
-          this.$router.push("/authority");
+          this.$message.success(res.message)
+          this.$store.dispatch('tagsView/delView', this.$route)
+          this.$router.push('/authority')
         } else {
-          this.$message.error(res.message);
+          this.$message.error(res.message)
         }
       } catch (error) {
-        console.log("出错了", error);
+        console.log('出错了', error)
       }
     },
-    //应用删除
-    async deleteApp () {
+    // 应用删除
+    async deleteApp() {
       try {
         const res = await DeleteApp({
-          AppId: this.AppId,
-        });
+          AppId: this.AppId
+        })
         if (res.code === 0) {
-          this.$message.success(res.message);
+          this.$message.success(res.message)
           setTimeout(() => {
-            this.$router.push("/authority");
-          }, 2000);
+            this.$router.push('/authority')
+          }, 2000)
         } else {
-          this.$message.error(res.message);
+          this.$message.error(res.message)
         }
       } catch (error) {
-        console.log("出错了", error);
+        console.log('出错了', error)
       }
     },
-    removeDomain (item) {
-      var index = this.dynamicValidateForm.domains.indexOf(item)
-      if (index !== -1) {
-        this.dynamicValidateForm.domains.splice(index, 1)
-      }
+    removeDomain(index) {
+      this.domains.splice(index, 1)
     },
-    addDomain () {
-      this.dynamicValidateForm.domains.push({
-        AppInputName: '',
-        AppInputType: '',
-        AppInputSite: '',
-        AppInputValue: '',
-        AppId: this.AppId
-      });
+    addDomain() {
+      const { type } = this.form
+      if (type === 1) {
+        this.domains.push({
+          AppInputName: '',
+          InputComment: '',
+          AppInputType: 'string',
+          AppInputSite: 'url',
+          InputValue: ''
+        })
+      } else {
+        this.domains.push({
+          AppInputName: '',
+          InputComment: '',
+          AppInputType: 'string',
+          AppInputSite: 'body',
+          InputValue: '',
+          AppId: this.AppId
+        })
+      }
     },
-    typeChange (val) {
-      const datas = this.dynamicValidateForm.domains
-      if (val == 1) {
-        this.typeFlag = true;
-        this.form.app = '';
+    typeChange(val) {
+      const datas = this.domains
+      if (val === 1) {
+        this.typeFlag = true
+        this.form.app = ''
         datas.forEach(item => {
-          item.AppInputType = 'string';
+          item.AppInputType = 'string'
+          item.AppInputSite = 'url'
         })
       } else {
-        this.typeFlag = false;
+        this.typeFlag = false
+        this.form.app = 'application/json'
+        datas.forEach(item => {
+          item.AppInputSite = 'body'
+        })
       }
     }
-  },
-};
+  }
+}
 </script>
 
 <style lang="scss" scoped>
@@ -349,6 +566,20 @@ export default {
           position: relative;
           top: 4px;
         }
+        @media (min-width: 1200px) {
+          .el-col-lg-1-9 {
+            width: 19%;
+          }
+          .el-col-lg-0-5 {
+            width: 5%;
+          }
+        }
+        .button-wrap {
+          text-align: right;
+        }
+        .el-icon-edit {
+          cursor: text;
+        }
       }
     }
     .domain-title {

src/views/dashboard/index.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2021-10-14 17:17:53
- * @LastEditTime: 2022-03-18 10:48:14
+ * @LastEditTime: 2022-03-25 20:23:30
  * @LastEditors: your name
  * @Description: In User Settings Edit
  * @FilePath: \Foshan4A\src\views\dashboard\index.vue
@@ -10,16 +10,60 @@
   <div class="dashboard">
     <!--分类信息-->
     <div class="flex-wrap tu-fl">
-      <div v-for="(item, index) in flList" :key="index" @click="toApp(item)" class="flex fl-list">
-        <div class="fl-list-img">
-          <template v-if="item.logo">
-            <img :alt="item.appName" :src="item.logo" />
-          </template>
-          <template v-else>
-            <img src="../../assets/index/log_default.png" :alt="item.appName" />
-          </template>
-        </div>
-        <div class="fl-list-title flex1">{{ item.appName }}</div>
+      <div
+        v-for="(item, index) in flList"
+        :key="index"
+        class="fl-list"
+      >
+        <el-dropdown
+          class="flex"
+          @click="toApp(item)"
+        >
+          <div class="fl-list-img">
+            <template v-if="item.logo">
+              <img
+                :alt="item.appName"
+                :src="item.logo"
+              >
+            </template>
+            <template v-else>
+              <img
+                src="../../assets/index/log_default.png"
+                :alt="item.appName"
+              >
+            </template>
+          </div>
+          <div class="fl-list-title flex1">{{ item.appName }}</div>
+          <el-dropdown-menu
+            v-if="item.params.length > 1"
+            slot="dropdown"
+          >
+            <el-dropdown-item
+              v-for="(p, i) in item.params"
+              :key="i"
+            >{{ Object.entries(p).map(arr => `${arr[0]}=${arr[1]}`).join(' ') }}</el-dropdown-item>
+          </el-dropdown-menu>
+        </el-dropdown>
+        <!-- <div
+          class="flex fl-list"
+          @click="toApp(item)"
+        >
+          <div class="fl-list-img">
+            <template v-if="item.logo">
+              <img
+                :alt="item.appName"
+                :src="item.logo"
+              >
+            </template>
+            <template v-else>
+              <img
+                src="../../assets/index/log_default.png"
+                :alt="item.appName"
+              >
+            </template>
+          </div>
+          <div class="fl-list-title flex1">{{ item.appName }}</div>
+        </div> -->
       </div>
     </div>
     <!--切换和搜索-->
@@ -32,17 +76,37 @@
       </div>
       <div class="search flex-wrap">
         <div class="search-input flex-wrap r24">
-          <el-select :style="inputFlag ? 'width:150px;' : 'width:200px;'" @change="handleChange" v-model="select" placeholder="功能菜单">
-            <el-option v-for="(item, index) in routes" :key="index" :label="item.meta.title" :value="item.path"></el-option>
+          <el-select
+            v-model="select"
+            :style="inputFlag ? 'width:150px;' : 'width:200px;'"
+            placeholder="功能菜单"
+            @change="handleChange"
+          >
+            <el-option
+              v-for="(item, index) in routes"
+              :key="index"
+              :label="item.meta.title"
+              :value="item.path"
+            />
           </el-select>
-          <el-input v-show="inputFlag" :style="inputFlag ? 'width:330px;' : 'width:280px;'" @keyup.enter.native="searchByLink" placeholder="如需搜索，请输入" v-model.trim="input" class="input-with-select">
-          </el-input>
+          <el-input
+            v-show="inputFlag"
+            v-model.trim="input"
+            :style="inputFlag ? 'width:330px;' : 'width:280px;'"
+            placeholder="如需搜索，请输入"
+            class="input-with-select"
+            @keyup.enter.native="searchByLink"
+          />
           <!-- <el-select v-model="select" slot="prepend" placeholder="功能菜单">
             <el-option v-for="(item,index) in selectArr" :key="index" :label="item.name" :value="item.value"></el-option>
           </el-select> -->
         </div>
         <div class="search-btn">
-          <el-button @click="searchByLink" class="btn" type="primary">进入</el-button>
+          <el-button
+            class="btn"
+            type="primary"
+            @click="searchByLink"
+          >进入</el-button>
         </div>
       </div>
     </div>
@@ -54,253 +118,255 @@
 </template>
 
 <script>
-import { mapGetters } from "vuex";
-import Analysis from "./components/analysis.vue";
-import Journal from "./components/journal.vue";
-import { GetOthSystem } from "@/api/apiHome";
-import axios from "axios";
+import { mapGetters } from 'vuex'
+import Analysis from './components/analysis.vue'
+import Journal from './components/journal.vue'
+import { GetOthSystem } from '@/api/apiHome'
+import axios from 'axios'
 export default {
-  name: "Dashboard",
+  name: 'Dashboard',
   components: { Analysis, Journal },
-  data () {
+  data() {
     return {
       roleFlag: true,
       inputFlag: false,
-      //搜索信息
+      // 搜索信息
       selectArr: [
         {
           id: 1,
-          name: "账号管理",
-          value: 1,
+          name: '账号管理',
+          value: 1
         },
         {
           id: 2,
-          name: "账号组管理",
-          value: 2,
+          name: '账号组管理',
+          value: 2
         },
         {
           id: 3,
-          name: "权限项管理",
-          value: 3,
+          name: '权限项管理',
+          value: 3
         },
         {
           id: 4,
-          name: "角色管理",
-          value: 4,
+          name: '角色管理',
+          value: 4
         },
         {
           id: 5,
-          name: "组织管理",
-          value: 5,
+          name: '组织管理',
+          value: 5
         },
         {
           id: 6,
-          name: "岗位管理",
-          value: 6,
+          name: '岗位管理',
+          value: 6
         },
         {
           id: 7,
-          name: "职员管理",
-          value: 7,
+          name: '职员管理',
+          value: 7
         },
 
         {
           id: 8,
-          name: "登录策略",
-          value: 8,
+          name: '登录策略',
+          value: 8
         },
         {
           id: 10,
-          name: "系统设置",
-          value: 10,
-        },
+          name: '系统设置',
+          value: 10
+        }
       ],
-      //分类信息
+      // 分类信息
       flList: [],
-      //切换
-      radio: "1",
+      // 切换
+      radio: '1',
       flIndex: 0,
-      input: "",
-      select: "",
-    };
+      input: '',
+      select: ''
+    }
   },
   computed: {
-    ...mapGetters(["systemSet", "UserType", "UserId"]),
-    routes () {
-      const arrs = this.$store.getters.permission_routes;
-      const datas = arrs.filter(
-        (item) => item.meta && item.meta.title != "首页"
-      );
-      return datas;
-    },
+    ...mapGetters(['systemSet', 'UserType', 'UserId']),
+    routes() {
+      const arrs = this.$store.getters.permission_routes
+      const datas = arrs.filter(item => item.meta && item.meta.title !== '首页')
+      return datas
+    }
   },
-  mounted () {
-    this.isPower();
-    this.getOthSystem();
+  mounted() {
+    this.isPower()
+    this.getOthSystem()
   },
   methods: {
-    //搜索-跳转
-    searchByLink () {
-      const url = this.select;
-      this.input
-        ? this.$router.push({ path: url, query: { keyWords: this.input } })
-        : this.$router.push(url);
+    // 搜索-跳转
+    searchByLink() {
+      const url = this.select
+      this.input ? this.$router.push({ path: url, query: { keyWords: this.input } }) : this.$router.push(url)
     },
-    //获取接入系统信息
-    async getOthSystem () {
+    // 获取接入系统信息
+    async getOthSystem() {
       try {
         const result = await GetOthSystem({
           userId: Number(this.UserId),
-          userType: this.UserType,
-        });
+          userType: this.UserType
+        })
         if (result.code === 0 && result.returnData.length) {
-          this.flList = result.returnData;
+          this.flList = result.returnData.map(item => {
+            const params = []
+            item.inputs?.length &&
+              item.inputs.forEach(input => {
+                const key = input.AppInputName
+                const value = input.InputValue
+                if ((key ?? '') !== '' && (value ?? '') !== '') {
+                  if (params.length) {
+                    if (Object.hasOwnProperty.call(params[0], key)) {
+                      const len = Object.entries(params[0]).length
+                      for (let i = 0; i < len; i++) {
+                        const temp = Object.assign({}, params[i])
+                        temp[key] = value
+                        params.push(temp)
+                      }
+                    } else {
+                      params.forEach(param => {
+                        param[key] = value
+                      })
+                    }
+                  } else {
+                    params.push({
+                      [key]: value
+                    })
+                  }
+                }
+              })
+            item.params = params
+            return item
+          })
+          console.log(this.flList)
         } else {
-          this.$message.error(result.message);
+          this.$message.error(result.message)
         }
       } catch (error) {
-        console.log("网络错误:", error);
+        console.log('网络错误:', error)
       }
     },
-    //判断页面展示权限
-    isPower () {
-      const obj =
-        typeof this.systemSet === "string"
-          ? JSON.parse(this.systemSet)
-          : this.systemSet;
-      const { OpenGroup, OpenRole, UserOfficerMulti } = obj;
+    // 判断页面展示权限
+    isPower() {
+      const obj = typeof this.systemSet === 'string' ? JSON.parse(this.systemSet) : this.systemSet
+      const { OpenGroup, OpenRole, UserOfficerMulti } = obj
       if (!OpenGroup) {
         this.routes.forEach((item, index) => {
-          if (item.path === "/accountGroup") {
-            this.routes.splice(index, 1);
+          if (item.path === '/accountGroup') {
+            this.routes.splice(index, 1)
           }
-        });
+        })
       }
       if (!OpenRole) {
         this.routes.forEach((item, index) => {
-          if (item.path === "/role") {
-            this.routes.splice(index, 1);
+          if (item.path === '/role') {
+            this.routes.splice(index, 1)
           }
-        });
+        })
       }
       if (!UserOfficerMulti) {
         this.routes.forEach((item, index) => {
-          if (item.path === "/account") {
-            this.routes.splice(index, 1);
+          if (item.path === '/account') {
+            this.routes.splice(index, 1)
           }
-        });
+        })
       }
     },
-    handleChange (val) {
-      if (val !== "/systemManagement") {
-        this.inputFlag = true;
+    handleChange(val) {
+      if (val !== '/systemManagement') {
+        this.inputFlag = true
       } else {
-        this.inputFlag = false;
+        this.inputFlag = false
       }
     },
-    paramsType (t, num, url, name) {
-      let type = "application/json";
-      let result = "";
-      if (t == "json") {
-        type = "application/json";
+    paramsType(t, num, url, name) {
+      let type = 'application/json'
+      let result = ''
+      if (t == 'json') {
+        type = 'application/json'
       }
       if (num == 1) {
         result = axios.get(url, {
           params: {
-            [name]: sessionStorage.getItem("userName"),
+            [name]: sessionStorage.getItem('userName')
           },
           data: {
-            unused: 0, //解决请求头无Content-Type
+            unused: 0 // 解决请求头无Content-Type
           },
           headers: {
-            token: sessionStorage.getItem("token"),
-            "Content-Type": type,
-          },
-        });
+            token: sessionStorage.getItem('token'),
+            'Content-Type': type
+          }
+        })
       } else {
         result = axios.post(
           url,
           {
-            [name]: sessionStorage.getItem("userName"),
+            [name]: sessionStorage.getItem('userName')
           },
           {
             headers: {
-              token: sessionStorage.getItem("token"),
-              "Content-Type": type,
-            },
+              token: sessionStorage.getItem('token'),
+              'Content-Type': type
+            }
           }
-        );
+        )
       }
       result
-        .then((res) => {
-          console.log(res);
+        .then(res => {
+          console.log(res)
+        })
+        .catch(err => {
+          console.log(err)
         })
-        .catch((err) => {
-          console.log(err);
-        });
-    },
-    //应用跳转
-    toApp (item) {
-      if (item.appUrl) {
-        window.open(item.appUrl);
-        const datas = item.inputs;
-        const arrs = [];
-        if (datas && datas.length) {
-          const [a1, a2] = [...datas];
-          if (item.requestType == 1) {
-            if (
-              a1.AppInputName == "token" &&
-              a1.AppInputSite == "Header" &&
-              a2.AppInputSite == "Body"
-            ) {
-              this.paramsType(
-                item.bodyType,
-                item.requestType,
-                item.appUrl,
-                a2.AppInputName
-              );
-            } else {
-              datas.forEach((item) => {
-                const obj = {};
-                if (
-                  item.AppInputName == "token" ||
-                  item.AppInputName == "Token" ||
-                  item.AppInputName == "TOKEN"
-                ) {
-                  obj[item.AppInputName] = sessionStorage.getItem("token");
-                } else if (
-                  item.AppInputName == "loginName" ||
-                  item.AppInputName == "userName"
-                ) {
-                  obj[item.AppInputName] = sessionStorage.getItem("userName");
-                }
-                arrs.push(obj);
-              });
-              const getParams = Object.assign(...arrs);
-              axios
-                .get(item.appUrl, {
-                  params: getParams,
-                })
-                .then((res) => {
-                  console.log(res);
-                })
-                .catch((err) => {
-                  console.log(err);
-                });
-            }
-          } else if (item.requestType == 2) {
-            this.paramsType(
-              item.bodyType,
-              item.requestType,
-              item.appUrl,
-              a2.AppInputName
-            );
-          }
-        }
-      }
     },
-  },
-};
+    // 应用跳转
+    toApp(item) {
+      // if (item.appUrl) {
+      //   window.open(item.appUrl)
+      //   const datas = item.inputs
+      //   const arrs = []
+      //   if (datas && datas.length) {
+      //     const [a1, a2] = [...datas]
+      //     if (item.requestType == 1) {
+      //       if (a1.AppInputName == 'token' && a1.AppInputSite == 'Header' && a2.AppInputSite == 'Body') {
+      //         this.paramsType(item.bodyType, item.requestType, item.appUrl, a2.AppInputName)
+      //       } else {
+      //         datas.forEach(item => {
+      //           const obj = {}
+      //           if (item.AppInputName == 'token' || item.AppInputName == 'Token' || item.AppInputName == 'TOKEN') {
+      //             obj[item.AppInputName] = sessionStorage.getItem('token')
+      //           } else if (item.AppInputName == 'loginName' || item.AppInputName == 'userName') {
+      //             obj[item.AppInputName] = sessionStorage.getItem('userName')
+      //           }
+      //           arrs.push(obj)
+      //         })
+      //         const getParams = Object.assign(...arrs)
+      //         axios
+      //           .get(item.appUrl, {
+      //             params: getParams
+      //           })
+      //           .then(res => {
+      //             console.log(res)
+      //           })
+      //           .catch(err => {
+      //             console.log(err)
+      //           })
+      //       }
+      //     } else if (item.requestType == 2) {
+      //       this.paramsType(item.bodyType, item.requestType, item.appUrl, a2.AppInputName)
+      //     }
+      //   }
+      // }
+    }
+  }
+}
 </script>
 
 <style lang="scss" scoped>