机构加盟申请-上传合同界面优化

src/views/admin/orgapplyinfo/components/OrgApplyInfoModal.vue

@@ -10,7 +10,7 @@
   </a-drawer>
 
   <a-drawer :title="title" :width="`70vw`"  v-model:visible="contractVisible" :closable="true"
-    :footer-style="{ textAlign: 'right' }" @close="handleCancel">
+    :footer-style="{ textAlign: 'right' }" :bodyStyle="{padding:'0px'}" @close="handleCancel">
     <OrgUpContractForm ref="upContractForm" @ok="submitContractCallback" :formBpm="false"></OrgUpContractForm>
     <template #footer>
       <a-button @click="handleContractCancel" style="margin-right: 8px">关闭</a-button>

src/views/admin/orgapplyinfo/components/OrgUpContractForm.vue

@@ -4,60 +4,69 @@
       <template #detail>
         <a-form ref="formRef" class="antd-modal-form" :labelCol="labelCol" :wrapperCol="wrapperCol"
           name="OrgApplyInfoForm">
-          <a-row>
+          <a-row class="card-class">
-            <a-col :span="24">
+            <a-col :span="24" style="border-bottom: 2px solid #f7f7f7; margin-bottom: 14px;">
               <SectionDivider :title="'机构信息'" />
             </a-col>
             <a-col :span="12">
               <a-form-item label="机构所在地">
-                {{ cityViewValue }}
+                <a-textarea :autosize="{ minRows: 1 }" maxlength="50" disabled v-model:value="cityViewValue"
+                  allow-clear></a-textarea>
+                <!-- {{ cityViewValue }} -->
               </a-form-item>
             </a-col>
             <a-col :span="12">
               <a-form-item label="机构名称" v-bind="validateInfos.comName" id="OrgApplyInfoForm-comName" name="comName">
-                {{ formData.comName }}
+                <a-textarea :autosize="{ minRows: 1 }" maxlength="50" disabled v-model:value="formData.comName"
+                  allow-clear></a-textarea>
+                <!-- {{ formData.comName }} -->
               </a-form-item>
             </a-col>
             <a-col :span="12">
               <a-form-item label="机构负责人" v-bind="validateInfos.orgLeader" id="OrgApplyInfoForm-orgLeader"
                 name="orgLeader">
-                {{ formData.orgLeader }}
+                <a-input v-model:value="formData.orgLeader" disabled allow-clear></a-input>
+                <!-- {{ formData.orgLeader }} -->
               </a-form-item>
             </a-col>
             <a-col :span="12">
               <a-form-item label="负责人电话" v-bind="validateInfos.orgLeaderPhone" id="OrgApplyInfoForm-orgLeaderPhone"
                 name="orgLeaderPhone">
-                {{ formData.orgLeaderPhone }}
+                <a-input v-model:value="formData.orgLeaderPhone" disabled allow-clear></a-input>
+                <!-- {{ formData.orgLeaderPhone }} -->
               </a-form-item>
             </a-col>
             <a-col :span="12">
               <a-form-item label="房屋性质" v-bind="validateInfos.orgPropertyType" id="OrgApplyInfoForm-orgPropertyType"
                 name="orgPropertyType">
-                {{ formData.orgPropertyType }}
+                <a-input v-model:value="formData.orgPropertyType" disabled allow-clear></a-input>
+                <!-- {{ formData.orgPropertyType }} -->
               </a-form-item>
             </a-col>
             <a-col :span="12">
-              <a-form-item label="建筑面积" v-bind="validateInfos.orgBuildingArea" id="OrgApplyInfoForm-orgBuildingArea"
+              <a-form-item label="建筑面积(㎡)" v-bind="validateInfos.orgBuildingArea" id="OrgApplyInfoForm-orgBuildingArea"
                 name="orgBuildingArea">
-                {{ formData.orgBuildingArea }}㎡
+                <a-input v-model:value="formData.orgBuildingArea" disabled allow-clear></a-input>
+                <!-- {{ formData.orgBuildingArea }}㎡ -->
               </a-form-item>
             </a-col>
             <a-col :span="12">
               <a-form-item label="机构地址" v-bind="validateInfos.orgAddress" id="OrgApplyInfoForm-orgAddress"
                 name="orgAddress">
-                {{ formData.orgAddress }}
+                <a-textarea :autosize="{ minRows: 1 }" maxlength="50" disabled v-model:value="formData.orgAddress"
+                  allow-clear></a-textarea>
+                <!-- {{ formData.orgAddress }} -->
               </a-form-item>
             </a-col>
           </a-row>
-          <a-row v-if="formData.buildStatus == '3'">
+          <a-row v-if="formData.buildStatus == '3'" class="card-class">
-            <a-col :span="24">
+            <a-col :span="24" style="border-bottom: 2px solid #f7f7f7; margin-bottom: 14px;">
               <SectionDivider :title="'加盟合同'" />
             </a-col>
-          </a-row>
-          <a-row v-if="formData.buildStatus == '3'">
             <a-col :span="12">
               <a-form-item label="加盟合同" v-bind="validateInfos.contract" id="OrgApplyInfoForm-contract">
-                <JUpload v-model:value="formData.contract" :maxCount="1" accept=".pdf" :beforeUpload="checkFileType"></JUpload>
+                <JUpload v-model:value="formData.contract" :maxCount="1" accept=".pdf" :beforeUpload="checkFileType">
+                </JUpload>
               </a-form-item>
               <div style="margin-top: 15px;margin-left:20%;color:#8e8e8e;font-size:12px;">说明：请上传pdf文件，并且只能上传一份文件</div>
             </a-col>
@@ -306,4 +315,17 @@ defineExpose({
 .antd-modal-form {
   padding: 14px;
 }
+
+.card-class {
+  padding-top: 24px;
+  padding-bottom: 24px;
+  padding-left: 14px;
+  padding-right: 14px;
+  // background-color: rgba(255, 255, 255, 0.9);
+  background-color: #fcfdff;
+  border-radius: 10px;
+  // box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 12px;
+  margin-bottom: 14px;
+
+}
 </style>