diff --git a/jero-web/src/views/projectManagement/components/listEditModel.vue b/jero-web/src/views/projectManagement/components/listEditModel.vue
index 2c0166d5e..9f69ceed2 100644
--- a/jero-web/src/views/projectManagement/components/listEditModel.vue
+++ b/jero-web/src/views/projectManagement/components/listEditModel.vue
@@ -14,7 +14,7 @@
           <a-col :span="12">
             <div class="box-title-text">
               <div class="title-text">
-                <span class="title-text-text" :title="$t('standard')">{{$t('standard')}}</span>
+                <span class="title-text-text" :title="$t('standard')">{{ $t('standard') }}</span>
               </div>
               <a-form-model-item class="itemModel" prop="serialNumber">
                 <a-input class="box-input"
@@ -27,7 +27,7 @@
           <a-col :span="12">
             <div class="box-title-text">
               <div class="title-text">
-                <span class="title-text-text" :title="$t('title')">{{$t('title')}}</span>
+                <span class="title-text-text" :title="$t('title')">{{ $t('title') }}</span>
               </div>
               <a-form-model-item class="itemModel" prop="title">
                 <a-input class="box-input"
@@ -41,7 +41,7 @@
           <a-col :span="12">
             <div class="box-title-text">
               <div class="title-text">
-                <span class="title-text-text" :title="$t('subtitle')">{{$t('subtitle')}}</span>
+                <span class="title-text-text" :title="$t('subtitle')">{{ $t('subtitle') }}</span>
               </div>
               <a-form-model-item class="itemModel" prop="subtitle">
                 <a-input class="box-input"
@@ -54,7 +54,7 @@
             <div class="box-title-text">
               <div class="title-text">
                 <span class="title-text-text"
-                      :title="$t('applicableSupplement')">{{$t('applicableSupplement')}}</span>
+                      :title="$t('applicableSupplement')">{{ $t('applicableSupplement') }}</span>
               </div>
               <a-form-model-item class="itemModel" prop="applicableSupplement">
                 <a-input class="box-input"
@@ -69,7 +69,7 @@
             <div class="box-title-text">
               <div class="title-text">
                 <span class="title-text-text"
-                      :title="$t('certificationType')">{{$t('certificationType')}}</span>
+                      :title="$t('certificationType')">{{ $t('certificationType') }}</span>
               </div>
               <a-form-model-item class="itemModel-multi" prop="attestationType">
                 <j-multi-select-tag class="box-input" v-model="formInline.attestationType"
@@ -84,7 +84,7 @@
               <div class="title-text">
                 <span class="Required">*</span>
                 <span class="title-text-text"
-                      :title="$t('certificationLevel')">{{$t('certificationLevel')}}</span>
+                      :title="$t('certificationLevel')">{{ $t('certificationLevel') }}</span>
               </div>
               <a-form-model-item class="itemModel-multi" prop="attestationRank">
                 <j-multi-select-tag class="box-input" v-model="formInline.attestationRank"
@@ -101,7 +101,7 @@
               <div class="title-text">
                 <span class="Required" v-if="formInline.roleCodeIndex == 0">*</span>
                 <span class="title-text-text"
-                      :title="$t('areaOfResponsibility')">{{$t('areaOfResponsibility')}}</span>
+                      :title="$t('areaOfResponsibility')">{{ $t('areaOfResponsibility') }}</span>
               </div>
               <a-form-model-item class="itemModel-multi" prop="dutyTerritory">
                 <j-multi-select-tag class="box-input" v-model="formInline.dutyTerritory"
@@ -117,7 +117,7 @@
             <div class="box-title-text">
               <div class="title-text">
                 <span class="Required" v-if="formInline.roleCodeIndex == 0">*</span>
-                <span class="title-text-text" :title="$t('regulatoryEngineer')">{{$t('regulatoryEngineer')}}</span>
+                <span class="title-text-text" :title="$t('regulatoryEngineer')">{{ $t('regulatoryEngineer') }}</span>
               </div>
               <a-form-model-item class="itemModel" :prop="'regulationOwnerId'">
                 <a-select :placeholder="$t('PleaseSelect')+$t('regulatoryEngineer')"
@@ -143,7 +143,8 @@
             <div class="box-title-text">
               <div class="title-text">
                 <span class="Required">*</span>
-                <span class="title-text-text" :title="$t('engineeringInterfacePerson')">{{$t('engineeringInterfacePerson')}}</span>
+                <span class="title-text-text"
+                      :title="$t('engineeringInterfacePerson')">{{ $t('engineeringInterfacePerson') }}</span>
               </div>
               <a-form-model-item class="itemModel" :prop="'engineeringInterfacePerson'">
                 <a-select :placeholder="$t('PleaseSelect')+$t('engineeringInterfacePerson')"
@@ -167,7 +168,7 @@
           <a-col :span="24">
             <div class="box-title-text">
               <div class="title-text">
-                <span class="title-text-text" :title="$t('remarks')">{{$t('remarks')}}</span>
+                <span class="title-text-text" :title="$t('remarks')">{{ $t('remarks') }}</span>
               </div>
               <a-form-model-item class="itemModel-text" :prop="'remarks'">
                 <a-textarea
@@ -180,7 +181,7 @@
           </a-col>
         </a-row>
         <div class="header-text">
-          &nbsp;{{$t('confirmationOfDesignConformity')}}
+          &nbsp;{{ $t('confirmationOfDesignConformity') }}
         </div>
         <a-row :gutter="24">
           <a-col :span="12">
@@ -189,7 +190,7 @@
                 <span class="Required"
                       v-if="!formInline.designDeliverableType.join(',').includes('1645667531513237506')">*</span>
                 <span class="title-text-text"
-                      :title="$t('personLiable')">{{$t('personLiable')}}</span>
+                      :title="$t('personLiable')">{{ $t('personLiable') }}</span>
               </div>
               <a-form-model-item class="itemModel-multi"
                                  :prop="formInline.designDeliverableType.join(',').includes('1645667531513237506')?'':'designDutyIdName'"
@@ -211,7 +212,7 @@
                 <span class="Required"
                       v-if="!formInline.designDeliverableType.join(',').includes('1645667531513237506')">*</span>
                 <span class="title-text-text"
-                      :title="$t('deliveryDate')">{{$t('deliveryDate')}}</span>
+                      :title="$t('deliveryDate')">{{ $t('deliveryDate') }}</span>
               </div>
               <a-form-model-item class="itemModel"
                                  :prop="formInline.designDeliverableType.join(',').includes('1645667531513237506')?'':'designDueDate'"
@@ -236,7 +237,7 @@
               <div class="title-text">
                 <span class="Required">*</span>
                 <span class="title-text-text"
-                      :title="$t('typeOfDeliverables')">{{$t('typeOfDeliverables')}}</span>
+                      :title="$t('typeOfDeliverables')">{{ $t('typeOfDeliverables') }}</span>
               </div>
               <a-form-model-item class="itemModel-multi" prop="designDeliverableType">
                 <a-tree-select
@@ -259,13 +260,14 @@
             <div class="box-title-text">
               <div class="title-text">
                 <span class="title-text-text"
-                      :title="$t('deliverableTemplate')">{{$t('deliverableTemplate')}}</span>
+                      :title="$t('deliverableTemplate')">{{ $t('deliverableTemplate') }}</span>
               </div>
               <a-form-model-item class="itemModel" prop="designDeliverableTemplate">
                 <a-button type="primary" class="button-text"
                           @click="clickButtonToUpload('designDeliverableTemplate')">
-                  {{ (formInline.designDeliverableTemplate === 'null' || formInline.designDeliverableTemplate === '' ||
-                  formInline.designDeliverableTemplate == null) ? $t('clickUpload') : $t('viewUploadedFiles')
+                  {{
+                    (formInline.designDeliverableTemplate === 'null' || formInline.designDeliverableTemplate === '' ||
+                      formInline.designDeliverableTemplate == null) ? $t('clickUpload') : $t('viewUploadedFiles')
                   }}
                 </a-button>
               </a-form-model-item>
@@ -277,7 +279,7 @@
             <div class="box-title-text">
               <div class="title-text">
                 <span class="title-text-text"
-                      :title="$t('deadlineForResponsibilityConfirmation')">{{$t('deadlineForResponsibilityConfirmation')}}</span>
+                      :title="$t('deadlineForResponsibilityConfirmation')">{{ $t('deadlineForResponsibilityConfirmation') }}</span>
               </div>
               <a-form-model-item class="itemModel">
                 <a-date-picker class="box-input"
@@ -297,7 +299,7 @@
             <div class="box-title-text">
               <div class="title-text">
                 <span class="title-text-text"
-                      :title="$t('descriptionDeliverables')">{{$t('descriptionDeliverables')}}</span>
+                      :title="$t('descriptionDeliverables')">{{ $t('descriptionDeliverables') }}</span>
               </div>
               <a-form-model-item class="itemModel-text" :prop="'designRemark'">
                 <a-textarea
@@ -311,7 +313,7 @@
         </a-row>
 
         <div class="header-text">
-          &nbsp;{{$t('verificationAndConformityconfirmation')}}
+          &nbsp;{{ $t('verificationAndConformityconfirmation') }}
         </div>
         <a-row :gutter="24">
           <a-col :span="12">
@@ -320,7 +322,7 @@
                 <span class="Required"
                       v-if="!formInline.verifyDeliverableType.join(',').includes('1645667531513237506')">*</span>
                 <span class="title-text-text"
-                      :title="$t('personLiable')">{{$t('personLiable')}}</span>
+                      :title="$t('personLiable')">{{ $t('personLiable') }}</span>
               </div>
               <a-form-model-item class="itemModel-multi"
                                  :prop="formInline.verifyDeliverableType.join(',').includes('1645667531513237506')?'':'verifyDutyIdName'"
@@ -342,7 +344,7 @@
                 <span class="Required"
                       v-if="!formInline.verifyDeliverableType.join(',').includes('1645667531513237506')">*</span>
                 <span class="title-text-text"
-                      :title="$t('deliveryDate')">{{$t('deliveryDate')}}</span>
+                      :title="$t('deliveryDate')">{{ $t('deliveryDate') }}</span>
               </div>
               <a-form-model-item class="itemModel"
                                  :prop="formInline.verifyDeliverableType.join(',').includes('1645667531513237506')?'':'verifyDueDate'"
@@ -367,7 +369,7 @@
               <div class="title-text">
                 <span class="Required">*</span>
                 <span class="title-text-text"
-                      :title="$t('typeOfDeliverables')">{{$t('typeOfDeliverables')}}</span>
+                      :title="$t('typeOfDeliverables')">{{ $t('typeOfDeliverables') }}</span>
               </div>
               <a-form-model-item class="itemModel-multi" prop="verifyDeliverableType">
                 <a-tree-select
@@ -390,13 +392,14 @@
             <div class="box-title-text">
               <div class="title-text">
                 <span class="title-text-text"
-                      :title="$t('deliverableTemplate')">{{$t('deliverableTemplate')}}</span>
+                      :title="$t('deliverableTemplate')">{{ $t('deliverableTemplate') }}</span>
               </div>
               <a-form-model-item class="itemModel" prop="verifyDeliverableTemplate">
                 <a-button type="primary" class="button-text"
                           @click="clickButtonToUpload('verifyDeliverableTemplate')">
-                  {{ (formInline.verifyDeliverableTemplate === 'null' || formInline.verifyDeliverableTemplate === '' ||
-                  formInline.verifyDeliverableTemplate == null) ? $t('clickUpload') : $t('viewUploadedFiles')
+                  {{
+                    (formInline.verifyDeliverableTemplate === 'null' || formInline.verifyDeliverableTemplate === '' ||
+                      formInline.verifyDeliverableTemplate == null) ? $t('clickUpload') : $t('viewUploadedFiles')
                   }}
                 </a-button>
               </a-form-model-item>
@@ -408,7 +411,7 @@
             <div class="box-title-text">
               <div class="title-text">
                 <span class="title-text-text"
-                      :title="$t('deadlineForResponsibilityConfirmation')">{{$t('deadlineForResponsibilityConfirmation')}}</span>
+                      :title="$t('deadlineForResponsibilityConfirmation')">{{ $t('deadlineForResponsibilityConfirmation') }}</span>
               </div>
               <a-form-model-item class="itemModel">
                 <a-date-picker class="box-input"
@@ -428,7 +431,7 @@
             <div class="box-title-text">
               <div class="title-text">
                 <span class="title-text-text"
-                      :title="$t('descriptionDeliverables')">{{$t('descriptionDeliverables')}}</span>
+                      :title="$t('descriptionDeliverables')">{{ $t('descriptionDeliverables') }}</span>
               </div>
               <a-form-model-item class="itemModel-text" :prop="'verifyRemark'">
                 <a-textarea
@@ -441,7 +444,7 @@
           </a-col>
         </a-row>
         <div class="header-text" v-if="rejectCauseList && rejectCauseList.length > 0 && formInline.roleCodeIndex == 0">
-          {{$t('reasonForReturnOfDesignCompliance')}}
+          {{ $t('reasonForReturnOfDesignCompliance') }}
         </div>
 
         <div v-if="rejectCauseList && rejectCauseList.length > 0 && formInline.roleCodeIndex == 0"
@@ -451,10 +454,10 @@
               <div class="box-title-text">
                 <div class="title-text">
                         <span class="title-text-text"
-                              :title="$t('rejectedBy')">{{$t('rejectedBy')}}</span>
+                              :title="$t('rejectedBy')">{{ $t('rejectedBy') }}</span>
                 </div>
                 <div class="itemModel-reject">
-                  {{item.createBy ? item.createBy : '--'}}
+                  {{ item.createBy ? item.createBy : '--' }}
                 </div>
               </div>
             </a-col>
@@ -462,10 +465,10 @@
               <div class="box-title-text">
                 <div class="title-text">
                         <span class="title-text-text"
-                              :title="$t('rejectionTime')">{{$t('rejectionTime')}}</span>
+                              :title="$t('rejectionTime')">{{ $t('rejectionTime') }}</span>
                 </div>
                 <div class="itemModel-reject">
-                  {{item.rejectTime ? item.rejectTime : '--'}}
+                  {{ item.rejectTime ? item.rejectTime : '--' }}
                 </div>
               </div>
             </a-col>
@@ -475,10 +478,10 @@
               <div class="box-title-text">
                 <div class="title-text">
                         <span class="title-text-text"
-                              :title="$t('rejectReason')">{{$t('rejectReason')}}</span>
+                              :title="$t('rejectReason')">{{ $t('rejectReason') }}</span>
                 </div>
                 <div class="itemModel-reject">
-                  {{item.rejectCause ? item.rejectCause : '--'}}
+                  {{ item.rejectCause ? item.rejectCause : '--' }}
                 </div>
               </div>
             </a-col>
@@ -487,7 +490,7 @@
 
         <div class="header-text"
              v-if="rejectCauseListOne && rejectCauseListOne.length > 0 && formInline.roleCodeIndex == 0">
-          {{$t('verifyComplianceConfirmReturnReason')}}
+          {{ $t('verifyComplianceConfirmReturnReason') }}
         </div>
 
         <div v-if="rejectCauseListOne && rejectCauseListOne.length > 0 && formInline.roleCodeIndex == 0"
@@ -497,10 +500,10 @@
               <div class="box-title-text">
                 <div class="title-text">
                         <span class="title-text-text"
-                              :title="$t('rejectedBy')">{{$t('rejectedBy')}}</span>
+                              :title="$t('rejectedBy')">{{ $t('rejectedBy') }}</span>
                 </div>
                 <div class="itemModel-reject">
-                  {{item.createBy ? item.createBy : '--'}}
+                  {{ item.createBy ? item.createBy : '--' }}
                 </div>
               </div>
             </a-col>
@@ -508,10 +511,10 @@
               <div class="box-title-text">
                 <div class="title-text">
                         <span class="title-text-text"
-                              :title="$t('rejectionTime')">{{$t('rejectionTime')}}</span>
+                              :title="$t('rejectionTime')">{{ $t('rejectionTime') }}</span>
                 </div>
                 <div class="itemModel-reject">
-                  {{item.rejectTime ? item.rejectTime : '--'}}
+                  {{ item.rejectTime ? item.rejectTime : '--' }}
                 </div>
               </div>
             </a-col>
@@ -521,10 +524,10 @@
               <div class="box-title-text">
                 <div class="title-text">
                         <span class="title-text-text"
-                              :title="$t('rejectReason')">{{$t('rejectReason')}}</span>
+                              :title="$t('rejectReason')">{{ $t('rejectReason') }}</span>
                 </div>
                 <div class="itemModel-reject">
-                  {{item.rejectCause ? item.rejectCause : '--'}}
+                  {{ item.rejectCause ? item.rejectCause : '--' }}
                 </div>
               </div>
             </a-col>
@@ -533,571 +536,582 @@
       </a-form-model>
     </a-spin>
     <div class="drawer-bootom-button">
-      <a-button style="margin-right: 8px" @click="handleCancel">{{$t('cancel')}}</a-button>
+      <a-button style="margin-right: 8px" @click="handleCancel">{{ $t('cancel') }}</a-button>
       <a-button @click="handleSubmit" v-if="formInline.roleCodeIndex == 0" type="primary" :loading="confirmLoading">
-        {{$t('submit')}}
+        {{ $t('submit') }}
       </a-button>
-      <a-button @click="handleSubmit" v-else type="primary" :loading="confirmLoading">{{$t('confirm')}}</a-button>
+      <a-button @click="handleSubmit" v-else type="primary" :loading="confirmLoading">{{ $t('confirm') }}</a-button>
     </div>
     <uploadFile ref="uploadFile" @uploadSuccess="uploadSuccess"/>
   </a-drawer>
 </template>
 
 <script>
-  import Standardselection from '@/components/Standardselection/index'
-  import PersonnelSelection from '@/components/PersonnelSelection/index'
-  import { getAction, postAction, putAction } from '@/api/manage'
-  import uploadFile from '@/components/uploadFile/file'
-  import moment from 'moment'
-  import { mapGetters } from 'vuex'
+import Standardselection from '@/components/Standardselection/index'
+import PersonnelSelection from '@/components/PersonnelSelection/index'
+import {getAction, postAction, putAction} from '@/api/manage'
+import uploadFile from '@/components/uploadFile/file'
+import moment from 'moment'
+import {mapGetters} from 'vuex'
 
-  export default {
-    name: 'listEditModel',
-    components: {
-      Standardselection,
-      PersonnelSelection,
-      uploadFile
-    },
-    props: ['url'],
-    data() {
-      return {
-        visible: false,
-        confirmLoading: false,
-        rejectCauseListOne: [],
-        rules: {
-          attestationRank: [
-            {
-              required: true,
-              message: this.$t('certificationLevel') + this.$t('cannotEmpty'),
-              trigger: 'change'
-            }
-          ],
-          dutyTerritory: [
-            {
-              required: true,
-              message: this.$t('areaOfResponsibility') + this.$t('cannotEmpty'),
-              trigger: 'change'
-            }
-          ],
-          homologationEngineerId: [
-            {
-              required: true,
-              message: this.$t('certifiedEngineer') + this.$t('cannotEmpty'),
-              trigger: 'change'
-            }
-          ],
-          regulationOwnerId: [
-            {
-              required: true,
-              message: this.$t('regulatoryEngineer') + this.$t('cannotEmpty'),
-              trigger: 'change'
-            }
-          ],
-          engineeringInterfacePerson: [
-            {
-              required: true,
-              message: this.$t('engineeringInterfacePerson') + this.$t('cannotEmpty'),
-              trigger: 'change'
-            }
-          ],
-          subtitle: [
-            {
-              max: 300,
-              message: this.$t('subtitle') + this.$t('cannotExceed') + 300 + this.$t('Characters'),
-              trigger: 'blur'
-            }
-          ],
-          wvtaId: [
-            {
-              max: 100,
-              message: 'WVTA ID' + this.$t('cannotExceed') + 100 + this.$t('Characters'),
-              trigger: 'blur'
-            }
-          ],
-          remark: [
-            {
-              max: 1000,
-              message: this.$t('remarks') + this.$t('cannotExceed') + 1000 + this.$t('Characters'),
-              trigger: 'blur'
-            }
-          ],
-          applicableSupplement: [
-            {
-              max: 100,
-              message: this.$t('applicableSupplement') + this.$t('cannotExceed') + 100 + this.$t('Characters'),
-              trigger: 'blur'
-            }
-          ],
-          designRemark: [
-            {
-              max: 300,
-              message: this.$t('descriptionDeliverables') + this.$t('cannotExceed') + 300 + this.$t('Characters'),
-              trigger: 'blur'
-            }
-          ],
-          verifyRemark: [
-            {
-              max: 300,
-              message: this.$t('descriptionDeliverables') + this.$t('cannotExceed') + 300 + this.$t('Characters'),
-              trigger: 'blur'
-            }
-          ],
-          prehomoRemark: [
-            {
-              max: 300,
-              message: this.$t('descriptionDeliverables') + this.$t('cannotExceed') + 300 + this.$t('Characters'),
-              trigger: 'blur'
-            }
-          ],
-          designDeliverableType: [
-            {
-              required: true,
-              message: this.$t('typeOfDeliverables') + this.$t('cannotEmpty'),
-              trigger: 'change'
-            }
-          ],
-          verifyDeliverableType: [
-            {
-              required: true,
-              message: this.$t('typeOfDeliverables') + this.$t('cannotEmpty'),
-              trigger: 'change'
-            }
-          ],
-        },
-        formInline: {
-          verifyDeliverableType: [],
-          designDeliverableType: []
-        },
-        regulatoryEngineerList: [],
-        engineeringInterfacePersonList: [],
-        certificationEngineerList: [],
-        designInitiatorList: [],
-        designDutyList: [],
-        verifyInitiatorList: [],
-        verifyDutyList: [],
-        prehomoDutyList: [],
-        disabled: false,
-        designInitiatorDisabled: false,
-        designDutyIdDisabled: false,
-        prehomoInitiatorIdDisabled: false,
-        prehomoDutyIdDisabled: false,
-        verifyInitiatorIdDisabled: false,
-        DeliverableTreeList: [],
-        userInfoQuery: {},
-        rejectCauseList: [],
+export default {
+  name: 'listEditModel',
+  components: {
+    Standardselection,
+    PersonnelSelection,
+    uploadFile
+  },
+  props: ['url'],
+  data() {
+    return {
+      visible: false,
+      confirmLoading: false,
+      rejectCauseListOne: [],
+      rules: {
+        attestationRank: [
+          {
+            required: true,
+            message: this.$t('certificationLevel') + this.$t('cannotEmpty'),
+            trigger: 'change'
+          }
+        ],
+        dutyTerritory: [
+          {
+            required: true,
+            message: this.$t('areaOfResponsibility') + this.$t('cannotEmpty'),
+            trigger: 'change'
+          }
+        ],
+        homologationEngineerId: [
+          {
+            required: true,
+            message: this.$t('certifiedEngineer') + this.$t('cannotEmpty'),
+            trigger: 'change'
+          }
+        ],
+        regulationOwnerId: [
+          {
+            required: true,
+            message: this.$t('regulatoryEngineer') + this.$t('cannotEmpty'),
+            trigger: 'change'
+          }
+        ],
+        engineeringInterfacePerson: [
+          {
+            required: true,
+            message: this.$t('engineeringInterfacePerson') + this.$t('cannotEmpty'),
+            trigger: 'change'
+          }
+        ],
+        subtitle: [
+          {
+            max: 300,
+            message: this.$t('subtitle') + this.$t('cannotExceed') + 300 + this.$t('Characters'),
+            trigger: 'blur'
+          }
+        ],
+        wvtaId: [
+          {
+            max: 100,
+            message: 'WVTA ID' + this.$t('cannotExceed') + 100 + this.$t('Characters'),
+            trigger: 'blur'
+          }
+        ],
+        remark: [
+          {
+            max: 1000,
+            message: this.$t('remarks') + this.$t('cannotExceed') + 1000 + this.$t('Characters'),
+            trigger: 'blur'
+          }
+        ],
+        applicableSupplement: [
+          {
+            max: 100,
+            message: this.$t('applicableSupplement') + this.$t('cannotExceed') + 100 + this.$t('Characters'),
+            trigger: 'blur'
+          }
+        ],
+        designRemark: [
+          {
+            max: 300,
+            message: this.$t('descriptionDeliverables') + this.$t('cannotExceed') + 300 + this.$t('Characters'),
+            trigger: 'blur'
+          }
+        ],
+        verifyRemark: [
+          {
+            max: 300,
+            message: this.$t('descriptionDeliverables') + this.$t('cannotExceed') + 300 + this.$t('Characters'),
+            trigger: 'blur'
+          }
+        ],
+        prehomoRemark: [
+          {
+            max: 300,
+            message: this.$t('descriptionDeliverables') + this.$t('cannotExceed') + 300 + this.$t('Characters'),
+            trigger: 'blur'
+          }
+        ],
+        designDeliverableType: [
+          {
+            required: true,
+            message: this.$t('typeOfDeliverables') + this.$t('cannotEmpty'),
+            trigger: 'change'
+          }
+        ],
+        verifyDeliverableType: [
+          {
+            required: true,
+            message: this.$t('typeOfDeliverables') + this.$t('cannotEmpty'),
+            trigger: 'change'
+          }
+        ],
+      },
+      formInline: {
+        verifyDeliverableType: [],
+        designDeliverableType: []
+      },
+      regulatoryEngineerList: [],
+      engineeringInterfacePersonList: [],
+      certificationEngineerList: [],
+      designInitiatorList: [],
+      designDutyList: [],
+      verifyInitiatorList: [],
+      verifyDutyList: [],
+      prehomoDutyList: [],
+      disabled: false,
+      designInitiatorDisabled: false,
+      designDutyIdDisabled: false,
+      prehomoInitiatorIdDisabled: false,
+      prehomoDutyIdDisabled: false,
+      verifyInitiatorIdDisabled: false,
+      DeliverableTreeList: [],
+      userInfoQuery: {},
+      rejectCauseList: [],
+    }
+  },
+  mounted() {
+    this.getDeliverableTree()
+    this.userInfoQuery = this.userInfo()
+  },
+  methods: {
+    isEdit(val) {
+      if (val.roleCodeIndex == '0' || val.roleCodeIndex == '1' || val.roleCodeIndex == '12') {
+        return false
+      } else {
+        return true
       }
-    },
-    mounted() {
-      this.getDeliverableTree()
-      this.userInfoQuery = this.userInfo()
-    },
-    methods: {
-      isEdit(val) {
-        if (val.designFlowStatus == 'Task to be confirmed' || val.designFlowStatus == 'Results to be submitted' ||
-          val.designFlowStatus == 'Results to be reviewed') {
-          return true
-        } else {
-          return false
-        }
-      },
-      isEditVerifi(val) {
-        if (val.verifyFlowStatus == 'Task to be confirmed' || val.verifyFlowStatus == 'Results to be submitted' ||
-          val.verifyFlowStatus == 'Results to be reviewed') {
-          return true
-        } else {
-          return false
-        }
-      },
-      ...mapGetters(['userInfo']),
-      getRejectCause(id) {
-        let query = {
-          projectLawsInventoryId: id
-        }
-        getAction('/project/projectLawsInventoryRejectCauseEO/list', query).then((res) => {
-          if (res.success) {
-            this.rejectCauseList = []
-            this.rejectCauseListOne = []
-            if (res.result && res.result.length > 0) {
-              res.result.forEach(val => {
-                if (val.rejectType == '0') {
-                  this.rejectCauseList.push(val)
-                } else if (val.rejectType == '1') {
-                  this.rejectCauseListOne.push(val)
-                }
-              })
-            }
-          } else {
-            this.rejectCauseList = []
-            this.rejectCauseListOne = []
-          }
-        })
-      },
-      getDeliverableTree() {
-        getAction('/sys/category/getDeliverableTree', {}).then((res) => {
-          if (res.success) {
-            this.DeliverableTreeList = res.result
-          } else {
-            this.DeliverableTreeList = []
-          }
-        })
-      },
-      dutyTerritoryChange(event) {
-        this.formInline.regulationOwnerId = undefined
-        this.formInline.engineeringInterfacePerson = undefined
-        this.formInline.homologationEngineerId = undefined
-        this.formInline.designInitiatorId = undefined
-        this.formInline.prehomoInitiatorId = undefined
-        this.formInline.verifyInitiatorId = undefined
-        this.queryPersonByProject(event)
-      },
+      // if (val.designFlowStatus == 'Task to be confirmed' || val.designFlowStatus == 'Results to be submitted' ||
+      //   val.designFlowStatus == 'Results to be reviewed') {
+      //   return true
+      // } else {
+      //   return false
+      // }
 
-      queryPersonByProject(row) {
-        let query = {
-          projectId: this.$route.query.id,
-          dutyTerritory: row.dutyTerritory || row
-        }
-        getAction(this.url.queryPersonByProject, query).then((res) => {
-          if (res.success) {
-            this.regulatoryEngineerList = res.result.lawEngineerList //法规工程师
-            this.engineeringInterfacePersonList = res.result.engineeringInterfacePersonList //工程接口人
-            this.certificationEngineerList = res.result.certificationEngineerList //认证工程师
-            if (row.dutyTerritory) {
-              let _this = this
-              this.getProject(row, res, function() {
-                _this.getData(row, res)
-              })
-            } else {
-              this.getProject({}, res, function() {
-
-              })
-            }
+    },
+    isEditVerifi(val) {
+      if (val.roleCodeIndex == '0' || val.roleCodeIndex == '1' || val.roleCodeIndex == '12') {
+        return false
+      } else {
+        return true
+      }
+      // if (val.verifyFlowStatus == 'Task to be confirmed' || val.verifyFlowStatus == 'Results to be submitted' ||
+      //   val.verifyFlowStatus == 'Results to be reviewed') {
+      //   return true
+      // } else {
+      //   return false
+      // }
+    },
+    ...mapGetters(['userInfo']),
+    getRejectCause(id) {
+      let query = {
+        projectLawsInventoryId: id
+      }
+      getAction('/project/projectLawsInventoryRejectCauseEO/list', query).then((res) => {
+        if (res.success) {
+          this.rejectCauseList = []
+          this.rejectCauseListOne = []
+          if (res.result && res.result.length > 0) {
+            res.result.forEach(val => {
+              if (val.rejectType == '0') {
+                this.rejectCauseList.push(val)
+              } else if (val.rejectType == '1') {
+                this.rejectCauseListOne.push(val)
+              }
+            })
           }
-        })
-      },
-      getProject(row, res, callback) {
-        this.designInitiatorList = res.result.allPersonList || []
-        this.designDutyList = res.result.allPersonList || []
-        this.prehomoDutyList = res.result.allPersonList || []
-        this.verifyInitiatorList = res.result.allPersonList || []
-        this.verifyDutyList = res.result.allPersonList || []
-        callback()
-      },
-      getData(row, res) {
-        //清空下拉框选中没有的数据
-        if (!(this.designInitiatorList.some(val => val.value == row.designInitiatorId))) {
-          row.designInitiatorId = undefined
-        }
-        if (!(this.verifyInitiatorList.some(val => val.value == row.verifyInitiatorId))) {
-          row.verifyInitiatorId = undefined
-        }
-        if (!(this.regulatoryEngineerList.some(val => val.value == row.regulationOwnerId))) {
-          row.regulationOwnerId = undefined
-        }
-        if (!(this.engineeringInterfacePersonList.some(val => val.value == row.engineeringInterfacePerson))) {
-          row.engineeringInterfacePerson = undefined
-        }
-        if (!(this.certificationEngineerList.some(val => val.value == row.homologationEngineerId))) {
-          row.homologationEngineerId = undefined
-        }
-        this.$nextTick(() => {
-          this.formInline = row
-          this.formInline = { ...this.formInline }
-          this.$nextTick(() => {
-            this.$refs.ruleForm.clearValidate()
-          })
-        })
-      },
-      editModel(item) {
-        this.visible = true
-        this.regulatoryEngineerList = []
-        this.engineeringInterfacePersonList = []
-        this.certificationEngineerList = []
-        this.designInitiatorList = []
-        this.designDutyList = []
-        this.verifyInitiatorList = []
-        this.verifyDutyList = []
-        this.prehomoDutyList = []
-        this.getDeliverableTree()
-        item.designDeliverableType = item.designDeliverableType ? item.designDeliverableType.split(',') : []
-        item.prehomoDeliverableType = item.prehomoDeliverableType ? item.prehomoDeliverableType.split(',') : []
-        item.verifyDeliverableType = item.verifyDeliverableType ? item.verifyDeliverableType.split(',') : []
-        this.getRejectCause(item.id)
-        if (item.dutyTerritory) {
-          this.queryPersonByProject(item)
         } else {
-          this.formInline = item
-          this.formInline = { ...this.formInline }
+          this.rejectCauseList = []
+          this.rejectCauseListOne = []
         }
+      })
+    },
+    getDeliverableTree() {
+      getAction('/sys/category/getDeliverableTree', {}).then((res) => {
+        if (res.success) {
+          this.DeliverableTreeList = res.result
+        } else {
+          this.DeliverableTreeList = []
+        }
+      })
+    },
+    dutyTerritoryChange(event) {
+      this.formInline.regulationOwnerId = undefined
+      this.formInline.engineeringInterfacePerson = undefined
+      this.formInline.homologationEngineerId = undefined
+      this.formInline.designInitiatorId = undefined
+      this.formInline.prehomoInitiatorId = undefined
+      this.formInline.verifyInitiatorId = undefined
+      this.queryPersonByProject(event)
+    },
+
+    queryPersonByProject(row) {
+      let query = {
+        projectId: this.$route.query.id,
+        dutyTerritory: row.dutyTerritory || row
+      }
+      getAction(this.url.queryPersonByProject, query).then((res) => {
+        if (res.success) {
+          this.regulatoryEngineerList = res.result.lawEngineerList //法规工程师
+          this.engineeringInterfacePersonList = res.result.engineeringInterfacePersonList //工程接口人
+          this.certificationEngineerList = res.result.certificationEngineerList //认证工程师
+          if (row.dutyTerritory) {
+            let _this = this
+            this.getProject(row, res, function () {
+              _this.getData(row, res)
+            })
+          } else {
+            this.getProject({}, res, function () {
+
+            })
+          }
+        }
+      })
+    },
+    getProject(row, res, callback) {
+      this.designInitiatorList = res.result.allPersonList || []
+      this.designDutyList = res.result.allPersonList || []
+      this.prehomoDutyList = res.result.allPersonList || []
+      this.verifyInitiatorList = res.result.allPersonList || []
+      this.verifyDutyList = res.result.allPersonList || []
+      callback()
+    },
+    getData(row, res) {
+      //清空下拉框选中没有的数据
+      if (!(this.designInitiatorList.some(val => val.value == row.designInitiatorId))) {
+        row.designInitiatorId = undefined
+      }
+      if (!(this.verifyInitiatorList.some(val => val.value == row.verifyInitiatorId))) {
+        row.verifyInitiatorId = undefined
+      }
+      if (!(this.regulatoryEngineerList.some(val => val.value == row.regulationOwnerId))) {
+        row.regulationOwnerId = undefined
+      }
+      if (!(this.engineeringInterfacePersonList.some(val => val.value == row.engineeringInterfacePerson))) {
+        row.engineeringInterfacePerson = undefined
+      }
+      if (!(this.certificationEngineerList.some(val => val.value == row.homologationEngineerId))) {
+        row.homologationEngineerId = undefined
+      }
+      this.$nextTick(() => {
+        this.formInline = row
+        this.formInline = {...this.formInline}
         this.$nextTick(() => {
           this.$refs.ruleForm.clearValidate()
         })
-      },
-      clickButtonToUpload(item) {
-        let isTrue = false
-        if (item == 'designDeliverableTemplate') {
-          isTrue = this.isEdit(this.formInline)
-        } else if (item == 'verifyDeliverableTemplate') {
-          isTrue = this.isEditVerifi(this.formInline)
+      })
+    },
+    editModel(item) {
+      this.visible = true
+      this.regulatoryEngineerList = []
+      this.engineeringInterfacePersonList = []
+      this.certificationEngineerList = []
+      this.designInitiatorList = []
+      this.designDutyList = []
+      this.verifyInitiatorList = []
+      this.verifyDutyList = []
+      this.prehomoDutyList = []
+      this.getDeliverableTree()
+      item.designDeliverableType = item.designDeliverableType ? item.designDeliverableType.split(',') : []
+      item.prehomoDeliverableType = item.prehomoDeliverableType ? item.prehomoDeliverableType.split(',') : []
+      item.verifyDeliverableType = item.verifyDeliverableType ? item.verifyDeliverableType.split(',') : []
+      this.getRejectCause(item.id)
+      if (item.dutyTerritory) {
+        this.queryPersonByProject(item)
+      } else {
+        this.formInline = item
+        this.formInline = {...this.formInline}
+      }
+      this.$nextTick(() => {
+        this.$refs.ruleForm.clearValidate()
+      })
+    },
+    clickButtonToUpload(item) {
+      let isTrue = false
+      if (item == 'designDeliverableTemplate') {
+        isTrue = this.isEdit(this.formInline)
+      } else if (item == 'verifyDeliverableTemplate') {
+        isTrue = this.isEditVerifi(this.formInline)
+      }
+      this.$refs.uploadFile.perentHandleFunc()
+      this.$refs.uploadFile.visible = true
+      this.$refs.uploadFile.disabled = isTrue
+      this.uploadName = item
+      getAction('sys/common/getFileInfos', {id: this.formInline[item]}).then((res) => {
+        if (res.success) {
+          this.$refs.uploadFile.perentHandleFunc(res.result)
+        } else {
+          this.$refs.uploadFile.perentHandleFunc()
         }
-        this.$refs.uploadFile.perentHandleFunc()
-        this.$refs.uploadFile.visible = true
-        this.$refs.uploadFile.disabled = isTrue
-        this.uploadName = item
-        getAction('sys/common/getFileInfos', { id: this.formInline[item] }).then((res) => {
-          if (res.success) {
-            this.$refs.uploadFile.perentHandleFunc(res.result)
-          } else {
-            this.$refs.uploadFile.perentHandleFunc()
-          }
+      })
+    },
+    /** 上传文件的回调 */
+    uploadSuccess(data) {
+      let attIdList = []
+      if (data && data.length > 0) {
+        data.map(item => {
+          attIdList.push(item.id || data.name)
         })
-      },
-      /** 上传文件的回调 */
-      uploadSuccess(data) {
-        let attIdList = []
-        if (data && data.length > 0) {
-          data.map(item => {
-            attIdList.push(item.id || data.name)
+      }
+      /** 赋值给当前对应的表单文件 */
+      this.formInline[this.uploadName] = attIdList.join(',')
+      this.formInline = {...this.formInline}
+    },
+    handleCancel() {
+      this.visible = false
+    },
+    handleSubmit() {
+      this.$refs.ruleForm.validate(valid => {
+        if (valid) {
+          let formInline = JSON.parse(JSON.stringify(this.formInline))
+          Object.keys(formInline).forEach(res => {
+            if (formInline[res] && formInline[res] instanceof Array) {
+              formInline[res] = formInline[res].join(',')
+            }
+          })
+          if (!formInline.verifyDutyId) {
+            formInline.verifyDutyId = ''
+          }
+          if (!formInline.regulationOwnerId) {
+            formInline.regulationOwnerId = ''
+          }
+          if (!formInline.engineeringInterfacePerson) {
+            formInline.engineeringInterfacePerson = ''
+          }
+          if (!formInline.homologationEngineerId) {
+            formInline.homologationEngineerId = ''
+          }
+          if (!formInline.designInitiatorId) {
+            formInline.designInitiatorId = ''
+          }
+          if (!formInline.designDutyId) {
+            formInline.designDutyId = ''
+          }
+          if (!formInline.prehomoInitiatorId) {
+            formInline.prehomoInitiatorId = ''
+          }
+          if (!formInline.verifyInitiatorId) {
+            formInline.verifyInitiatorId = ''
+          }
+          this.confirmLoading = true
+          putAction(this.url.editModel, formInline).then((res) => {
+            if (res.success) {
+              this.$message.success(this.$t('OperationSuccessful'))
+              this.visible = false
+              this.confirmLoading = false
+              this.$emit('editModelList')
+            } else {
+              this.$message.warning(this.$t('operationFailed'))
+              this.confirmLoading = false
+            }
           })
         }
-        /** 赋值给当前对应的表单文件 */
-        this.formInline[this.uploadName] = attIdList.join(',')
-        this.formInline = { ...this.formInline }
-      },
-      handleCancel() {
-        this.visible = false
-      },
-      handleSubmit() {
-        this.$refs.ruleForm.validate(valid => {
-          if (valid) {
-            let formInline = JSON.parse(JSON.stringify(this.formInline))
-            Object.keys(formInline).forEach(res => {
-              if (formInline[res] && formInline[res] instanceof Array) {
-                formInline[res] = formInline[res].join(',')
-              }
-            })
-            if (!formInline.verifyDutyId) {
-              formInline.verifyDutyId = ''
-            }
-            if (!formInline.regulationOwnerId) {
-              formInline.regulationOwnerId = ''
-            }
-            if (!formInline.engineeringInterfacePerson) {
-              formInline.engineeringInterfacePerson = ''
-            }
-            if (!formInline.homologationEngineerId) {
-              formInline.homologationEngineerId = ''
-            }
-            if (!formInline.designInitiatorId) {
-              formInline.designInitiatorId = ''
-            }
-            if (!formInline.designDutyId) {
-              formInline.designDutyId = ''
-            }
-            if (!formInline.prehomoInitiatorId) {
-              formInline.prehomoInitiatorId = ''
-            }
-            if (!formInline.verifyInitiatorId) {
-              formInline.verifyInitiatorId = ''
-            }
-            this.confirmLoading = true
-            putAction(this.url.editModel, formInline).then((res) => {
-              if (res.success) {
-                this.$message.success(this.$t('OperationSuccessful'))
-                this.visible = false
-                this.confirmLoading = false
-                this.$emit('editModelList')
-              } else {
-                this.$message.warning(this.$t('operationFailed'))
-                this.confirmLoading = false
-              }
-            })
-          }
-        })
+      })
 
-      },
-      handleInput(value) {
-        this.$nextTick(() => {
-          this.formInline = { ...this.formInline }
-          this.$refs.ruleForm.validateField([value])
-        })
-      },
-      dateChange(item) {
-        this.formInline[item.db_field_name] = this.formInline[item.db_field_name] ? moment(this.formInline[item.db_field_name]).format('YYYY-MM-DD') : ''
-      },
-      PersonnelSelectionChange(value, id) {
-        this.formInline[value] = id
-        this.formInline = { ...this.formInline }
-      },
-      designDeliverableTypeChange() {
+    },
+    handleInput(value) {
+      this.$nextTick(() => {
+        this.formInline = {...this.formInline}
+        this.$refs.ruleForm.validateField([value])
+      })
+    },
+    dateChange(item) {
+      this.formInline[item.db_field_name] = this.formInline[item.db_field_name] ? moment(this.formInline[item.db_field_name]).format('YYYY-MM-DD') : ''
+    },
+    PersonnelSelectionChange(value, id) {
+      this.formInline[value] = id
+      this.formInline = {...this.formInline}
+    },
+    designDeliverableTypeChange() {
 
-      },
-      verifyDeliverableTypeChange() {
+    },
+    verifyDeliverableTypeChange() {
 
-      }
     }
   }
+}
 </script>
 <style>
-  .formAdd .ant-form-item-label {
-    width: 130px;
-  }
+.formAdd .ant-form-item-label {
+  width: 130px;
+}
 
-  .formAdd .ant-form-item-control-wrapper {
-    display: inline-block;
-    width: 100%;
-  }
+.formAdd .ant-form-item-control-wrapper {
+  display: inline-block;
+  width: 100%;
+}
 
-  .itemModel .ant-form-item-control-wrapper {
-    width: 100%;
-  }
+.itemModel .ant-form-item-control-wrapper {
+  width: 100%;
+}
 
-  .itemModel-text .ant-form-item-control-wrapper {
-    width: 100% !important;
-  }
+.itemModel-text .ant-form-item-control-wrapper {
+  width: 100% !important;
+}
 
-  .box-input .ant-select-selection--single {
-    height: 38px;
-  }
+.box-input .ant-select-selection--single {
+  height: 38px;
+}
 
-  .box-input .ant-select-selection--multiple {
-    height: 38px;
-  }
+.box-input .ant-select-selection--multiple {
+  height: 38px;
+}
 
-  .box-input .ant-select-selection__rendered {
-    line-height: 38px;
-    height: 38px;
-  }
+.box-input .ant-select-selection__rendered {
+  line-height: 38px;
+  height: 38px;
+}
 
-  .box-input .ant-select-selection--multiple .ant-select-selection__rendered > ul > li {
-    margin-top: 6px;
-  }
+.box-input .ant-select-selection--multiple .ant-select-selection__rendered > ul > li {
+  margin-top: 6px;
+}
 
-  .box-input .ant-calendar-picker {
-    line-height: 38px;
-    height: 38px;
-  }
+.box-input .ant-calendar-picker {
+  line-height: 38px;
+  height: 38px;
+}
 
-  .box-input .ant-calendar-picker-input {
-    height: 38px;
-  }
+.box-input .ant-calendar-picker-input {
+  height: 38px;
+}
 
-  .box-input .ant-input-number-input-wrap {
-    line-height: 38px;
-    height: 38px;
-  }
+.box-input .ant-input-number-input-wrap {
+  line-height: 38px;
+  height: 38px;
+}
 
-  .ant-input-disabled {
-    color: rgba(0, 0, 0, 0.65) !important;
-  }
+.ant-input-disabled {
+  color: rgba(0, 0, 0, 0.65) !important;
+}
 
-  .ant-select-disabled {
-    color: rgba(0, 0, 0, 0.65) !important;
-  }
+.ant-select-disabled {
+  color: rgba(0, 0, 0, 0.65) !important;
+}
 </style>
 <style scoped>
-  .box-title-text {
-    line-height: 1.4;
-    display: flex;
-    /*align-items: center;*/
-  }
+.box-title-text {
+  line-height: 1.4;
+  display: flex;
+  /*align-items: center;*/
+}
 
-  .title-text {
-    width: 114px;
-    text-align: right;
-    display: inline-block;
-    font-weight: 500;
-    font-size: 14px;
-    margin-right: 16px;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    height: 42px;
-    line-height: 48px;
-  }
+.title-text {
+  width: 114px;
+  text-align: right;
+  display: inline-block;
+  font-weight: 500;
+  font-size: 14px;
+  margin-right: 16px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  height: 42px;
+  line-height: 48px;
+}
 
-  .box-input {
-    display: inline-block;
-    height: 38px;
-    width: 100%;
-  }
+.box-input {
+  display: inline-block;
+  height: 38px;
+  width: 100%;
+}
 
-  .itemModel {
-    width: calc(100% - 130px);
-    display: inline-block;
-    margin-top: 2px;
-    height: 40px;
-    margin-bottom: 24px;
-  }
+.itemModel {
+  width: calc(100% - 130px);
+  display: inline-block;
+  margin-top: 2px;
+  height: 40px;
+  margin-bottom: 24px;
+}
 
-  .itemModel-text {
-    width: calc(100% - 130px);
-    display: inline-block;
-    margin-top: 2px;
-  }
+.itemModel-text {
+  width: calc(100% - 130px);
+  display: inline-block;
+  margin-top: 2px;
+}
 
-  .itemModel-reject {
-    width: calc(100% - 130px);
-    display: inline-block;
-    font-size: 16px;
-    word-break: break-all;
-    color: #040B29;
-    padding-top: 11px;
-  }
+.itemModel-reject {
+  width: calc(100% - 130px);
+  display: inline-block;
+  font-size: 16px;
+  word-break: break-all;
+  color: #040B29;
+  padding-top: 11px;
+}
 
-  .Required {
-    color: red;
-    margin-right: 4px;
-  }
+.Required {
+  color: red;
+  margin-right: 4px;
+}
 
-  .title-text-text {
-    margin-top: 9px;
-  }
+.title-text-text {
+  margin-top: 9px;
+}
 
-  .header-text {
-    font-size: 16px;
-    font-weight: bold;
-    margin-left: 15px;
-    /*border-bottom: 1px #d9d9d9 dashed;*/
-    height: 30px;
-    margin-bottom: 30px;
-  }
+.header-text {
+  font-size: 16px;
+  font-weight: bold;
+  margin-left: 15px;
+  /*border-bottom: 1px #d9d9d9 dashed;*/
+  height: 30px;
+  margin-bottom: 30px;
+}
 
-  .formAdd {
-    margin-bottom: 40px;
-  }
+.formAdd {
+  margin-bottom: 40px;
+}
 
-  .button-text {
-    height: 38px;
-    width: calc(100% - 100px);
-    line-height: 38px;
-    background: #fff;
-    border: 1px #00B3BE solid;
-    color: #00B3BE;
-  }
+.button-text {
+  height: 38px;
+  width: calc(100% - 100px);
+  line-height: 38px;
+  background: #fff;
+  border: 1px #00B3BE solid;
+  color: #00B3BE;
+}
 
-  .button-text-text {
-    position: absolute;
-    right: -10px;
-    top: -21px;
-    display: inline-block;
-    padding: 6px;
-    border-radius: 50%;
-    background: red;
-    text-align: center;
-    line-height: 6px;
-    color: #fff;
-  }
+.button-text-text {
+  position: absolute;
+  right: -10px;
+  top: -21px;
+  display: inline-block;
+  padding: 6px;
+  border-radius: 50%;
+  background: red;
+  text-align: center;
+  line-height: 6px;
+  color: #fff;
+}
 
-  .drawer-bootom-button {
-    position: absolute;
-    bottom: 0;
-    width: 100%;
-    z-index: 100;
-    border-top: 1px solid #e8e8e8;
-    padding: 10px 16px;
-    text-align: right;
-    left: 0;
-    background: #fff;
-    border-radius: 0 0 2px 2px;
-  }
+.drawer-bootom-button {
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+  z-index: 100;
+  border-top: 1px solid #e8e8e8;
+  padding: 10px 16px;
+  text-align: right;
+  left: 0;
+  background: #fff;
+  border-radius: 0 0 2px 2px;
+}
 </style>
\ No newline at end of file