add

src/App.vue

@@ -13,18 +13,47 @@
       <div class="dormancy">
         <div class="title">系统休眠，请输入密码解锁</div>
         <div class="content">
-          <el-form @submit.native.prevent ref="form" :rules="rules" :model="form">
+          <el-form
+            @submit.native.prevent
+            ref="form"
+            :rules="rules"
+            :model="form"
+          >
             <el-form-item prop="pwd">
-              <el-input show-password placeholder="请输入密码" tabindex="1" @keyup.enter.native="onSubmit('form')" v-model="form.pwd"></el-input>
+              <el-input
+                show-password
+                placeholder="请输入密码"
+                tabindex="1"
+                @keyup.enter.native="onSubmit('form')"
+                v-model="form.pwd"
+              ></el-input>
             </el-form-item>
             <div v-if="Number(errorNum) >= 2" class="flex-wrap">
               <el-form-item class="flex1" prop="identify">
-                <el-input ref="identify" v-model.trim="form.identify" @keyup.enter.native="onSubmit('form')" placeholder="请输入验证码" name="identify" tabindex="1" />
+                <el-input
+                  ref="identify"
+                  v-model.trim="form.identify"
+                  @keyup.enter.native="onSubmit('form')"
+                  placeholder="请输入验证码"
+                  name="identify"
+                  tabindex="1"
+                />
               </el-form-item>
-              <Identify @changeCode="changeCode" :identifyCode="form.CheckCode" :contentHeight="48" style="margin-left: 24px;" />
+              <Identify
+                @changeCode="changeCode"
+                :identifyCode="form.CheckCode"
+                :contentHeight="48"
+                style="margin-left: 24px"
+              />
             </div>
             <el-form-item>
-              <el-button :loading="loading" style="line-height: normal;" type="primary" class="button-public-shadow onSubmit" @click="onSubmit('form')">
+              <el-button
+                :loading="loading"
+                style="line-height: normal"
+                type="primary"
+                class="button-public-shadow onSubmit"
+                @click="onSubmit('form')"
+              >
                 确定
               </el-button>
             </el-form-item>
@@ -39,17 +68,17 @@
 
 <script>
 import Dialog from "@/layout/components/Dialog/index.vue";
-import Identify from './views/login/identify.vue';
+import Identify from "./views/login/identify.vue";
 import { mapGetters } from "vuex";
 import { SsoLogin } from "@/api/apiHome";
-import { GetSSOCheckCode } from '@/api/login';
+import { GetSSOCheckCode } from "@/api/login";
 export default {
   name: "App",
   components: {
     Dialog,
-    Identify
+    Identify,
   },
-  data () {
+  data() {
     return {
       arr: [], //鼠标移动screenX值数组
       arrLen: [], //一段时间后上报的screenX值数组
@@ -60,22 +89,29 @@ export default {
         //表单数据
         pwd: "",
         identify: "",
-        CheckCode: ""
+        CheckCode: "",
       },
       rules: {
         //表单验证
         pwd: [{ required: true, message: "请输入密码", trigger: "blur" }],
       },
       flag: false,
-      loading: false
+      loading: false,
     };
   },
   computed: {
-    ...mapGetters(["dialog", "token", "name", "systemSet", "roles", "errorNum"]),
+    ...mapGetters([
+      "dialog",
+      "token",
+      "name",
+      "systemSet",
+      "roles",
+      "errorNum",
+    ]),
   },
   watch: {
     "$store.state.user.token": {
-      handler (val) {
+      handler(val) {
         if (val) {
           this.handleInit();
         } else {
@@ -85,7 +121,7 @@ export default {
       deep: true,
     },
     $route: {
-      handler () {
+      handler() {
         this.$store.dispatch("auth/changeAuthMsg", []);
         this.$store.dispatch("auth/changeAuthArrs", []);
         this.$store.dispatch("auth/changeAuthList", []);
@@ -94,7 +130,7 @@ export default {
       deep: true,
     },
   },
-  mounted () {
+  mounted() {
     const num = Number(this.errorNum);
     if (this.dialog && num >= 2) {
       // this.flag = true;
@@ -102,13 +138,13 @@ export default {
     }
     this.beforeUnload();
   },
-  beforeDestroy () {
+  beforeDestroy() {
     //结束定时器和释放timer
     this.clearAll();
   },
   methods: {
     // 初始化
-    handleInit () {
+    handleInit() {
       this.handleMove();
       if (!this.dialog) {
         this.handleTimer();
@@ -119,7 +155,7 @@ export default {
      * @param {*}
      * @return {*}
      */
-    clearAll () {
+    clearAll() {
       clearInterval(this.timer);
       this.timer = null;
       this.time = null;
@@ -130,7 +166,7 @@ export default {
       sessionStorage.setItem("token", "");
     },
     // 页面刷新 重新启用方法
-    beforeUnload () {
+    beforeUnload() {
       window.addEventListener("beforeunload", () => {
         if (this.token) {
           sessionStorage.setItem("token", this.token);
@@ -146,7 +182,7 @@ export default {
      * @param {*}
      * @return {*}
      */
-    handleTimer () {
+    handleTimer() {
       const obj =
         typeof this.systemSet === "string"
           ? JSON.parse(this.systemSet)
@@ -180,7 +216,7 @@ export default {
      * @param {*}
      * @return {*}
      */
-    handleMove () {
+    handleMove() {
       window.addEventListener(
         "mousemove",
         _.debounce(this.handleDebounce, 100)
@@ -191,7 +227,7 @@ export default {
      * @param {*}
      * @return {*}
      */
-    handleRmove () {
+    handleRmove() {
       window.removeEventListener("mousemove", () => {
         this.arr = [];
       });
@@ -201,7 +237,7 @@ export default {
      * @param {*} e
      * @return {*}
      */
-    handleDebounce (e) {
+    handleDebounce(e) {
       const screenX = e.screenX;
       this.arr.push(screenX);
     },
@@ -210,7 +246,7 @@ export default {
      * @param {*}
      * @return {*}
      */
-    onSubmit (formName) {
+    onSubmit(formName) {
       this.$refs[formName].validate((valid) => {
         if (valid) {
           this.ssoLogin();
@@ -220,13 +256,13 @@ export default {
       });
     },
     //锁屏验证
-    async ssoLogin () {
+    async ssoLogin() {
       try {
         this.loading = true;
         const obj = {
           LoginName: this.name,
           LoginPwd: this.form.pwd,
-        }
+        };
         if (Number(this.errorNum) >= 2) {
           obj.CheckCode = this.form.identify;
         }
@@ -249,12 +285,12 @@ export default {
             this.getCheckCode();
           }
           if (num >= 5) {
-            await this.$store.dispatch('user/logout')
+            await this.$store.dispatch("user/logout");
             this.$store.dispatch("app/getErrorNum", 0);
-            this.clearAll()
-            this.$store.dispatch("app/toggleDialog", false)
-            this.$router.push(`/login?redirect=${this.$route.fullPath}`)
-            location.reload()
+            this.clearAll();
+            this.$store.dispatch("app/toggleDialog", false);
+            this.$router.push(`/login?redirect=${this.$route.fullPath}`);
+            location.reload();
           }
           this.$message.error(res.message);
           this.loading = false;
@@ -265,11 +301,11 @@ export default {
       }
     },
     //验证码重新获取
-    changeCode () {
-      this.getCheckCode()
+    changeCode() {
+      this.getCheckCode();
     },
     //获取动态验证码
-    async getCheckCode () {
+    async getCheckCode() {
       const res = await GetSSOCheckCode();
       if (res.code === 0) {
         this.form.CheckCode = res.returnData;

src/layout/components/Dialog/index.vue

@@ -8,8 +8,25 @@
 -->
 <template>
   <div class="dialog">
-    <el-dialog :visible.sync="flag" ref="dialogTk" :top="top" :custom-class="customClass" :lock-scroll="false" :modal="modal" :show-close="false" :before-close="close" :width="width">
-      <div :style="{ height: child ? (this.$store.state.settings.dialogHeight - 96) +'px': '' }" class="dialog-content">
+    <el-dialog
+      :visible.sync="flag"
+      ref="dialogTk"
+      :top="top"
+      :custom-class="customClass"
+      :lock-scroll="false"
+      :modal="modal"
+      :show-close="false"
+      :before-close="close"
+      :width="width"
+    >
+      <div
+        :style="{
+          height: child
+            ? this.$store.state.settings.dialogHeight - 96 + 'px'
+            : '',
+        }"
+        class="dialog-content"
+      >
         <slot />
       </div>
     </el-dialog>
@@ -18,66 +35,66 @@
 
 <script>
 export default {
-  name: 'Dialog',
+  name: "Dialog",
   props: {
     // 弹框开关
     flag: {
       type: Boolean,
-      default: false
+      default: false,
     },
     // 弹框宽度
     width: {
       type: String,
-      default: '600px'
+      default: "600px",
     },
     // 弹框高度
     top: {
       type: String,
-      default: '0vh'
+      default: "0vh",
     },
     // 弹框类名
     customClass: {
       type: String,
-      default: ''
+      default: "",
     },
     // 弹框遮罩层
     modal: {
       type: Boolean,
-      default: true
+      default: true,
     },
     // 二级弹框标记
     child: {
       type: Boolean,
-      default: false
-    }
+      default: false,
+    },
   },
   // 监听弹框开关
   watch: {
     flag: {
-      handler (val) {
+      handler(val) {
         if (val) {
           this.$nextTick(() => {
             // 获取弹框高度
-            const height = this.$refs['dialogTk'].$refs.dialog.clientHeight
+            const height = this.$refs["dialogTk"].$refs.dialog.clientHeight;
             if (height) {
               // 当前弹框无二级弹框时 存入高度
               if (!this.child) {
-                this.$store.state.settings.dialogHeight = height
+                this.$store.state.settings.dialogHeight = height;
               }
             }
-          })
+          });
         }
       },
-      deep: true
-    }
+      deep: true,
+    },
   },
   methods: {
     // 弹框关闭
-    close () {
-      this.$emit('closeDialog', false)
-    }
-  }
-}
+    close() {
+      this.$emit("closeDialog", false);
+    },
+  },
+};
 </script>
 
 <style lang="scss" scoped>

src/views/authorityManagement/components/authorityAppEdit.vue

@@ -27,31 +27,63 @@
         </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-input
+                placeholder="请输入应用名称"
+                v-model.trim="form.name"
+              ></el-input>
             </el-form-item>
             <el-form-item label="请求类型">
-              <el-select @change="typeChange" v-model="form.id" placeholder="请求类型">
+              <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-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-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-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-input
+              placeholder="请输入应用地址"
+              v-model.trim="form.url"
+            ></el-input>
           </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-input
+              type="textarea"
+              rows="3"
+              placeholder="请输入描述"
+              v-model.trim="form.desc"
+            ></el-input>
           </el-form-item>
         </el-form>
         <div class="addApp-form-title domain-title flex">
@@ -61,24 +93,60 @@
           </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">
+          <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-item
+                  label="入参名称"
+                  :prop="'domains.' + index + '.name'"
+                >
+                  <el-input
+                    placeholder="请输入最大64位参数名称"
+                    maxlength="64"
+                    v-model.trim="domain.AppInputName"
+                  ></el-input>
                 </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-form-item
+                  label="入参值"
+                  :prop="'domains.' + index + '.value'"
+                >
+                  <el-input
+                    placeholder="请输入最大64位参数值"
+                    maxlength="64"
+                    v-model.trim="domain.AppInputValue"
+                  ></el-input>
                 </el-form-item>
-                <el-form-item label="入参类型" :prop="'domains.' + index + '.type'">
-                  <el-select v-model="domain.AppInputType" :disabled="typeFlag" placeholder="参数类型">
+                <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-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-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-select>
@@ -86,7 +154,12 @@
                 </el-form-item>
               </div>
               <div>
-                <el-button size="small" type="danger" @click.prevent="removeDomain(domain)">删除</el-button>
+                <el-button
+                  size="small"
+                  type="danger"
+                  @click.prevent="removeDomain(domain)"
+                  >删除</el-button
+                >
               </div>
             </div>
           </el-form>
@@ -98,7 +171,12 @@
       <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">
+          <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>
         </div>
@@ -118,10 +196,10 @@ import {
   UpdateAppStatus,
   DeleteApp,
 } from "@/api/apiAuthority";
-import { lengthValidator } from '@/utils/validate'
+import { lengthValidator } from "@/utils/validate";
 export default {
   name: "Addapp",
-  data () {
+  data() {
     return {
       form: {
         //应用表单
@@ -135,14 +213,38 @@ export default {
         //表单验证
         name: [
           { required: true, message: "请输入应用名称", trigger: "blur" },
-          { validator: lengthValidator, max: 128, message: '长度在 1 到 128 个字符', trigger: ['change', 'blur'] }
+          {
+            validator: lengthValidator,
+            max: 128,
+            message: "长度在 1 到 128 个字符",
+            trigger: ["change", "blur"],
+          },
+        ],
+        url: [
+          {
+            validator: lengthValidator,
+            max: 512,
+            message: "长度在 1 到 512 个字符",
+            trigger: ["change", "blur"],
+          },
         ],
-        url: [{ validator: lengthValidator, max: 512, message: '长度在 1 到 512 个字符', trigger: ['change', 'blur'] }],
         desc: [
           // { required: true, message: "请输入描述", trigger: "blur" },
-          { validator: lengthValidator, max: 256, message: '长度在 1到 256 个字符', trigger: ['change', 'blur'] }
+          {
+            validator: lengthValidator,
+            max: 256,
+            message: "长度在 1到 256 个字符",
+            trigger: ["change", "blur"],
+          },
+        ],
+        app: [
+          {
+            validator: lengthValidator,
+            max: 32,
+            message: "长度在 1 到 32 个字符",
+            trigger: ["change", "blur"],
+          },
         ],
-        app: [{ validator: lengthValidator, max: 32, message: '长度在 1 到 32 个字符', trigger: ['change', 'blur'] }]
       },
       radio: 1,
       AppId: null,
@@ -150,43 +252,53 @@ export default {
       dialogImageUrl: "",
       dialogVisible: false,
       dynamicValidateForm: {
-        domains: [{
-          AppInputName: '',
-          AppInputType: '',
-          AppInputSite: '',
-          AppInputValue: ''
-        }]
+        domains: [
+          {
+            AppInputName: "",
+            AppInputType: "",
+            AppInputSite: "",
+            AppInputValue: "",
+          },
+        ],
       },
-      typeFlag: false
+      typeFlag: false,
     };
   },
-  created () {
+  created() {
     const { AuthId, Status } = this.$route.query;
     this.radio = Status;
     this.AppId = AuthId;
     this.getAppDetails(AuthId);
   },
   methods: {
-    handleRemove (file, fileList) {
+    handleRemove(file, fileList) {
       console.log(file, fileList);
     },
-    handlePictureCardPreview (file) {
+    handlePictureCardPreview(file) {
       this.dialogImageUrl = file.url;
       this.dialogVisible = true;
     },
     //获取应用详情
-    async getAppDetails (id) {
+    async getAppDetails(id) {
       try {
         const res = await GetAppDetails({
           AppId: id,
         });
         if (res.code === 0) {
-          const { AppName, AppShowId, AppShowSecret, AppDesc, AppUrl, Inputs, RequestType, BodyType } =
-            res.returnData;
+          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.id = Number(RequestType) || "";
           this.form.app = BodyType;
           this.form.desc = AppDesc;
           this.form.url = AppUrl;
@@ -200,7 +312,7 @@ export default {
       }
     },
     //应用状态变更
-    async handleChange (val) {
+    async handleChange(val) {
       try {
         const res = await UpdateAppStatus({
           AppId: this.AppId,
@@ -215,7 +327,7 @@ export default {
         console.log("出错了", error);
       }
     },
-    onSubmit (formName) {
+    onSubmit(formName) {
       this.$refs[formName].validate((valid) => {
         if (valid) {
           this.editApp();
@@ -225,7 +337,7 @@ export default {
       });
     },
     //应用状态变更
-    async editApp () {
+    async editApp() {
       try {
         const res = await EditApp({
           AppId: this.AppId,
@@ -234,7 +346,7 @@ export default {
           AppUrl: this.form.url,
           RequestType: this.form.id,
           BodyType: this.form.app,
-          Inputs: this.dynamicValidateForm.domains
+          Inputs: this.dynamicValidateForm.domains,
         });
         if (res.code === 0) {
           this.$message.success(res.message);
@@ -248,7 +360,7 @@ export default {
       }
     },
     //应用删除
-    async deleteApp () {
+    async deleteApp() {
       try {
         const res = await DeleteApp({
           AppId: this.AppId,
@@ -265,33 +377,33 @@ export default {
         console.log("出错了", error);
       }
     },
-    removeDomain (item) {
-      var index = this.dynamicValidateForm.domains.indexOf(item)
+    removeDomain(item) {
+      var index = this.dynamicValidateForm.domains.indexOf(item);
       if (index !== -1) {
-        this.dynamicValidateForm.domains.splice(index, 1)
+        this.dynamicValidateForm.domains.splice(index, 1);
       }
     },
-    addDomain () {
+    addDomain() {
       this.dynamicValidateForm.domains.push({
-        AppInputName: '',
-        AppInputType: '',
-        AppInputSite: '',
-        AppInputValue: '',
-        AppId: this.AppId
+        AppInputName: "",
+        AppInputType: "",
+        AppInputSite: "",
+        AppInputValue: "",
+        AppId: this.AppId,
       });
     },
-    typeChange (val) {
-      const datas = this.dynamicValidateForm.domains
+    typeChange(val) {
+      const datas = this.dynamicValidateForm.domains;
       if (val == 1) {
         this.typeFlag = true;
-        this.form.app = '';
-        datas.forEach(item => {
-          item.AppInputType = 'string';
-        })
+        this.form.app = "";
+        datas.forEach((item) => {
+          item.AppInputType = "string";
+        });
       } else {
         this.typeFlag = false;
       }
-    }
+    },
   },
 };
 </script>