申请按钮 只能点一次

front/src/views/home/apply.vue

@@ -8,36 +8,93 @@
         </div>
         <div class="form-container">
           <div v-if="applySuccess">
-            <a-form ref="formRef" :model="formName" name="basic" :label-col="{ style: { width: '106px' } }"
+            <a-form
-              :wrapper-col="{ style: { width: '230px' } }" labelAlign="left" autocomplete="off">
+              ref="formRef"
+              :model="formName"
+              name="basic"
+              :label-col="{ style: { width: '106px' } }"
+              :wrapper-col="{ style: { width: '230px' } }"
+              labelAlign="left"
+              autocomplete="off"
+            >
               <div class="base-info flex-row-start">
-                <a-form-item label="申请标题" name="title" :rules="[{ required: true, message: '请输入申请标题' }]">
+                <a-form-item
-                  <a-input placeholder="请输入能力申请标题" v-model:value="formName.title" />
+                  label="申请标题"
+                  name="title"
+                  :rules="[{ required: true, message: '请输入申请标题' }]"
+                >
+                  <a-input
+                    placeholder="请输入能力申请标题"
+                    v-model:value="formName.title"
+                  />
                 </a-form-item>
                 <!-- 西海岸-摄像头-增加过期时间 -->
-                <a-form-item v-if="isCamera && isXiHaiAn" label="过期时间" name="expireDate"
+                <a-form-item
-                  :rules="[{ required: true, message: '请选择过期时间' }]" style="margin-left: 22px">
+                  v-if="isCamera && isXiHaiAn"
-                  <a-select v-model:value="formName.expireDate" placeholder="请选择过期时间" style="width: 200px"
+                  label="过期时间"
-                    :options="expireDateOptions"></a-select>
+                  name="expireDate"
+                  :rules="[{ required: true, message: '请选择过期时间' }]"
+                  style="margin-left: 22px"
+                >
+                  <a-select
+                    v-model:value="formName.expireDate"
+                    placeholder="请选择过期时间"
+                    style="width: 200px"
+                    :options="expireDateOptions"
+                  ></a-select>
                 </a-form-item>
               </div>
               <div class="base-info">
-                <a-form-item label="申请人信息" name="user" :rules="[{ required: true, message: '请输入申请人' }]">
+                <a-form-item
-                  <a-input placeholder="请输入申请人" v-model:value="formName.user" disabled />
+                  label="申请人信息"
+                  name="user"
+                  :rules="[{ required: true, message: '请输入申请人' }]"
+                >
+                  <a-input
+                    placeholder="请输入申请人"
+                    v-model:value="formName.user"
+                    disabled
+                  />
                 </a-form-item>
-                <a-form-item style="margin: 0 22px" label="电话" name="phone" :rules="[
+                <a-form-item
+                  style="margin: 0 22px"
+                  label="电话"
+                  name="phone"
+                  :rules="[
                     {
                       required: true,
                       pattern: /^1[3456789]\d{9}$/,
                       message: '请输入正确的电话号码',
                     },
-                ]">
+                  ]"
-                  <a-input placeholder="请输入申请人电话" v-model:value="formName.phone" />
+                >
+                  <a-input
+                    placeholder="请输入申请人电话"
+                    v-model:value="formName.phone"
+                  />
                 </a-form-item>
-                <a-form-item label="单位" name="unit" :rules="[{ required: true, message: '请输入单位' }]">
+                <a-form-item
-                  <a-input placeholder="请输入单位" v-model:value="formName.unit" disabled v-if="deptFlage" />
+                  label="单位"
-                  <a-select v-else placeholder="请选择归属部门" v-model:value="formName.unit" @change="deptIdChangeFunction">
+                  name="unit"
-                    <a-select-option v-for="(item, index) in deptNameAll" :key="`${index}-${item}`" :value="item.name">
+                  :rules="[{ required: true, message: '请输入单位' }]"
+                >
+                  <a-input
+                    placeholder="请输入单位"
+                    v-model:value="formName.unit"
+                    disabled
+                    v-if="deptFlage"
+                  />
+                  <a-select
+                    v-else
+                    placeholder="请选择归属部门"
+                    v-model:value="formName.unit"
+                    @change="deptIdChangeFunction"
+                  >
+                    <a-select-option
+                      v-for="(item, index) in deptNameAll"
+                      :key="`${index}-${item}`"
+                      :value="item.name"
+                    >
                       {{ item.name }}
                     </a-select-option>
                   </a-select>
@@ -45,32 +102,69 @@
               </div>
               <div class="base-info" v-if="flag">
                 <div style="margin-bottom: 24px">
-                  <a-form-item style="margin-bottom:0" label="应用系统" name="applicationSystem"
+                  <a-form-item
-                    :rules="[{ required: true, message: '请选择应用系统' }]">
+                    style="margin-bottom: 0"
-                    <a-select v-model:value="formName.applicationSystem" show-search placeholder="请选择应用系统"
+                    label="应用系统"
-                      style="width: 230px" :options="systemOptions" @focus="handleFocus" @blur="handleBlur"
+                    name="applicationSystem"
-                      @change="systemHandleChange" @search="systemHandleSearch"></a-select>
+                    :rules="[{ required: true, message: '请选择应用系统' }]"
+                  >
+                    <a-select
+                      v-model:value="formName.applicationSystem"
+                      show-search
+                      placeholder="请选择应用系统"
+                      style="width: 230px"
+                      :options="systemOptions"
+                      @focus="handleFocus"
+                      @blur="handleBlur"
+                      @change="systemHandleChange"
+                      @search="systemHandleSearch"
+                    ></a-select>
                   </a-form-item>
-                  <span style="font-size:12px;color:#666;padding-left:106px"> 如选项没有系统请新增</span>
+                  <span
+                    style="font-size: 12px; color: #666; padding-left: 106px"
+                  >
+                    如选项没有系统请新增
+                  </span>
                 </div>
-                <a-form-item class="applicationScene" label="应用领域" name="applicationScene"
+                <a-form-item
-                  :rules="[{ required: true, message: '请选择应用领域' }]" style="width: 6.93rem">
+                  class="applicationScene"
-                  <a-select v-model:value="formName.applicationScene" :options="applicationSceneOpthion" mode="tags"
+                  label="应用领域"
-                    :size="size" placeholder="请选择应用领域" :filterOption="false" :searchValue="false"
+                  name="applicationScene"
-                    style="width: 5.87rem"></a-select>
+                  :rules="[{ required: true, message: '请选择应用领域' }]"
+                  style="width: 6.93rem"
+                >
+                  <a-select
+                    v-model:value="formName.applicationScene"
+                    :options="applicationSceneOpthion"
+                    mode="tags"
+                    :size="size"
+                    placeholder="请选择应用领域"
+                    :filterOption="false"
+                    :searchValue="false"
+                    style="width: 5.87rem"
+                  ></a-select>
                 </a-form-item>
               </div>
 
               <div>
-                <a-form-item label="需求依据" name="applicationBackground" :rules="[
+                <a-form-item
+                  label="需求依据"
+                  name="applicationBackground"
+                  :rules="[
                     { required: true, message: '请输入需求依据' },
                     { min: 50, message: '需求依据最少为50个字' },
-                ]">
+                  ]"
-                  <a-textarea placeholder="请输入需求依据" v-model:value="formName.applicationBackground" :rows="4" />
+                >
+                  <a-textarea
+                    placeholder="请输入需求依据"
+                    v-model:value="formName.applicationBackground"
+                    :rows="4"
+                  />
                 </a-form-item>
               </div>
               <div class="bottom-btn">
-                <a-button style="
+                <a-button
+                  style="
                     width: 80px;
                     height: 38px;
                     margin-right: 20px;
@@ -81,10 +175,15 @@
                     border: none;
                     padding: 0;
                     text-align: center;
-                  " type="primary" html-type="cancle" @click="resetFields()">
+                  "
+                  type="primary"
+                  html-type="cancle"
+                  @click="resetFields()"
+                >
                   退出申请
                 </a-button>
-                <a-button style="
+                <a-button
+                  style="
                     width: 80px;
                     height: 38px;
                     background: #0087ff;
@@ -94,7 +193,11 @@
                     border: none;
                     padding: 0;
                     text-align: center;
-                  " type="primary" html-type="submit" @click="processStartHandle()">
+                  "
+                  type="primary"
+                  html-type="submit"
+                  @click="processStartHandle()"
+                >
                   提交申请
                 </a-button>
               </div>
@@ -112,14 +215,14 @@
   </div>
 </template>
 <script>
-import AbilityToApplyFor from './AbilityToApplyFor.vue'
+  import AbilityToApplyFor from './AbilityToApplyFor.vue'
-import HomeHeader from '@/views/home/components/header'
+  import HomeHeader from '@/views/home/components/header'
-import { reactive, ref, watch, onBeforeUnmount } from 'vue'
+  import { reactive, ref, watch, onBeforeUnmount } from 'vue'
-import { useRouter } from 'vue-router'
+  import { useRouter } from 'vue-router'
-import { message } from 'ant-design-vue'
+  import { message } from 'ant-design-vue'
-import qs from 'qs'
+  import qs from 'qs'
-import { Upload } from 'ant-design-vue'
+  import { Upload } from 'ant-design-vue'
-import {
+  import {
     lastestPage,
     tabilityapplication,
     startOfBusinessKey,
@@ -130,17 +233,17 @@ import {
     getUserInfo,
     relaunch,
     selectOne,
-} from '@/api/home'
+  } from '@/api/home'
-import { getDeptAll } from '@/api/user'
+  import { getDeptAll } from '@/api/user'
-import { getCategoryTreePage, endProcess } from '@/api/personalCenter'
+  import { getCategoryTreePage, endProcess } from '@/api/personalCenter'
-import mybus from '@/myplugins/mybus'
+  import mybus from '@/myplugins/mybus'
-import { sgcDel, getApplyForm } from '@/api/personalCenter'
+  import { sgcDel, getApplyForm } from '@/api/personalCenter'
-import { pageWithAttrs, updateIntegrationServices } from '@/api/home'
+  import { pageWithAttrs, updateIntegrationServices } from '@/api/home'
-import { DETAIL_PAGE_CONTENT_DEFAULT_TAB } from '@/global/GlobalConfig.js'
+  import { DETAIL_PAGE_CONTENT_DEFAULT_TAB } from '@/global/GlobalConfig.js'
-import { getIntegrationDetail, soldierApply } from '@/api/home'
+  import { getIntegrationDetail, soldierApply } from '@/api/home'
-import * as moment from 'moment'
+  import * as moment from 'moment'
 
-export default {
+  export default {
     name: '',
     props: {},
     components: {
@@ -336,8 +439,11 @@ export default {
       }
 
       // 提交申请
+      let submitFlag = true
       const processStartHandle = () => {
         formRef.value.validate().then(() => {
+          if (submitFlag) {
+            submitFlag = false
             if (!formUrl) {
               return message.error('请设置保存表单的URL')
             }
@@ -443,7 +549,10 @@ export default {
                 })
                 console.log('formName--ids-提交数据--------->', formName, ids)
                 if (formName.system.length !== 0) {
-              if (formName.applicationSystem && formName.applicationSystem.length == 0) {
+                  if (
+                    formName.applicationSystem &&
+                    formName.applicationSystem.length == 0
+                  ) {
                     formName.applicationSystem = ''
                   }
                   // 西海岸：单兵设备、无人机单独调取其他接口
@@ -490,6 +599,7 @@ export default {
                 })
               }
             }
+          }
         })
       }
 
@@ -502,9 +612,10 @@ export default {
         if (item.note1 && typeof item.note1 == 'string') {
           item.note1 = JSON.parse(item.note1)
         }
-      item.note1 && item.note1.map((jcss) => {
+        item.note1 &&
+          item.note1.map((jcss) => {
             if (!jcss) {
-          return;
+              return
             }
             let _itemData = {
               resourceId: (jcss.idtCameraChannel || '') + '',
@@ -523,8 +634,8 @@ export default {
             }
             // 西海岸
             if (isXiHaiAn.value) {
-          _itemData.managementUnitName = jcss.managementUnitName;
+              _itemData.managementUnitName = jcss.managementUnitName
-          _itemData.cameraPointTypeName = jcss.cameraPointTypeName;
+              _itemData.cameraPointTypeName = jcss.cameraPointTypeName
             }
             obj.system.push(_itemData)
           })
@@ -582,10 +693,10 @@ export default {
                 processDefinitionKey: processDefinitionKey,
                 businessKey: businessKey,
               })
-            updateInstanceId(params).then(() => { })
+              updateInstanceId(params).then(() => {})
             }
           })
-        .catch(() => { })
+          .catch(() => {})
       }
       const options = ref([
         {
@@ -806,10 +917,10 @@ export default {
         expireDateOptions,
       }
     },
-}
+  }
 </script>
 <style scoped lang="less">
-#apply-container {
+  #apply-container {
     // background-color: #f5f8fc;
     height: 100%;
     width: 100%;
@@ -888,9 +999,9 @@ export default {
       font-weight: bold;
       color: #000;
     }
-}
+  }
 
-.applicationScene {
+  .applicationScene {
     :deep(.ant-select-selector) {
       overflow-x: scroll;
     }
@@ -898,16 +1009,16 @@ export default {
     :deep(.ant-select-selection-overflow) {
       flex-wrap: nowrap;
     }
-}
+  }
 
-textarea {
+  textarea {
     resize: none;
     font-size: 14px;
-}
+  }
 
-.bottom-btn {
+  .bottom-btn {
     display: flex;
     justify-content: center;
     // position: fixed;
-}
+  }
 </style>