Merge pull request 'fix : 修复新增专项资金/需求征集排版' (#702) from dd into master

Reviewed-on: http://git.feashow.cn/clay/mosr-web/pulls/702

src/views/project-demand/requirement/add.vue

@@ -1,14 +1,15 @@
 <template>
   <div v-loading="loading" class="add-block">
     <baseTitle title="需求征集信息录入"></baseTitle>
-    <el-form :model="formData" ref="demandForm" :rules="rules" :scroll-to-error="true">
+    <el-form :model="formData" ref="demandForm" :rules="rules" label-width="140px" :scroll-to-error="true"
-      <el-row gutter="40">
+             :style="{marginLeft: !formData.isSpecialFund?'-55px':'-30px'}">
-        <el-col :span="5">
+      <el-row gutter="30">
+        <el-col :span="6">
           <el-form-item label="征集名称" prop="requirementName">
-            <el-input v-model="formData.requirementName" placeholder="请输入名称" clearable></el-input>
+            <el-input v-model="formData.requirementName" placeholder="请输入征集名称" clearable></el-input>
           </el-form-item>
         </el-col>
-        <el-col :span="5">
+        <el-col :span="6" style="margin-left: -40px">
           <el-form-item label="征集类型" prop="collectType">
             <el-select v-model="formData.collectType" placeholder="请选择征集类型" clearable filterable>
               <el-option
@@ -20,29 +21,29 @@
             </el-select>
           </el-form-item>
         </el-col>
-        <el-col :span="5">
+        <el-col :span="6" style="margin-left: 10px">
           <el-form-item label="需求上报截止时间" prop="deadline">
             <el-config-provider>
               <el-date-picker
                   style="width: 100%"
                   v-model="formData.deadline"
                   type="date"
-                  placeholder="需求上报截止时间"
+                  placeholder="请选择需求上报截止时间"
                   value-format="YYYY-MM-DD"
                   :disabled-date="disabledDate"
               />
             </el-config-provider>
           </el-form-item>
         </el-col>
-        <el-col :span="4">
+        <el-col :span="6" style="margin-left: -20px">
           <el-form-item label="是否专项资金" prop="isSpecialFund">
-            <el-select v-model="formData.isSpecialFund" placeholder="是否专项资金" clearable filterable>
+            <el-select v-model="formData.isSpecialFund" placeholder="请选择是否专项资金" clearable filterable>
               <el-option :value="true" label="是"></el-option>
               <el-option :value="false" label="否"></el-option>
             </el-select>
           </el-form-item>
         </el-col>
-        <el-col :span="5">
+        <el-col :span="6">
           <el-form-item label="专项资金名称" prop="specialFundId" v-if="formData.isSpecialFund">
             <el-select v-model="formData.specialFundId" placeholder="请选择专项资金名称" clearable filterable>
               <el-option
@@ -54,7 +55,7 @@
             </el-select>
           </el-form-item>
         </el-col>
-        <el-col :span="24" style="margin-bottom: -18px">
+        <el-col :span="24">
           <el-form-item label="征集公司" :required="true" prop="" class="company-select">
             <div style="width: 100%">
               <el-button color="#DED0B2" @click="showCompany">{{ selectedCompanyList.length === 0 ? '请选择征集公司' : '更改' }}
@@ -67,20 +68,22 @@
             </div>
           </el-form-item>
         </el-col>
-      </el-row>
+        <el-col :span="24" style="margin-bottom: -18px">
-    </el-form>
+          <el-form-item label="征集说明" prop="" required>
-    <baseTitle title="征集说明"></baseTitle>
             <el-input
                 v-model="formData.collectExplain"
-        style="width:100%"
+                style="width:100%;margin-right: 50px"
                 :rows="5"
                 type="textarea"
                 placeholder="请输入征集说明"
             />
-    <div style="display: flex;align-items: center">
+          </el-form-item>
-      <baseTitle title="申请文件" style="margin-right: 10px"></baseTitle>
+        </el-col>
+      </el-row>
+    </el-form>
+    <baseTitle title="附件文件" style="margin-right: 10px"></baseTitle>
     <file-upload v-if="checkFormPrem('fileList')" @getFile="getFile"/>
-    </div>
+    <div style="margin-right: 50px">
       <fvTable style="width: 100%;max-height: 162px;" height="162" v-if="showTable"
                :tableConfig="tableConfig" :data="formData.fileList"
                :isSettingCol="false" :pagination="false" perm="EDIT">
@@ -88,6 +91,7 @@
           <el-empty :image-size="55" description="暂无数据" style="padding: 0"/>
         </template>
       </fvTable>
+    </div>
     <div class="approval-record">
       <div class="approval-title">
         <baseTitle title="审批记录"></baseTitle>
@@ -99,7 +103,8 @@
           />
         </div>
       </div>
-      <el-empty  :image-size="100" description="暂无审批记录" v-if="processDiagramViewer&& !opentionData?.operationList&&!changeDiagram"/>
+      <el-empty :image-size="100" description="暂无审批记录"
+                v-if="processDiagramViewer&& !opentionData?.operationList&&!changeDiagram"/>
       <!--      <process-diagram-viewer mode="view" v-if="processDiagramViewer&&changeDiagram"/>-->
       <div class="process">
         <operation-render
@@ -117,7 +122,8 @@
     </div>
     <company-picker :multiple="true" ref="companyRef" title="请选择征集公司" @ok="selected"
                     v-model:value="selectedCompanyList"/>
-    <file-preview ref="filePreviewRef" v-if="filePreviewShow" :fileName="filePreviewParam.fileName" :fileUrl="filePreviewParam.fileUrl"
+    <file-preview ref="filePreviewRef" v-if="filePreviewShow" :fileName="filePreviewParam.fileName"
+                  :fileUrl="filePreviewParam.fileUrl"
                   :fileType="filePreviewParam.fileType"/>
   </div>
 </template>
@@ -142,6 +148,7 @@ import {useTagsView} from '@/stores/tagsview.js'
 import {getFundOption} from "@/api/special-fund";
 import CompanyPicker from "@/components/DetailComponent/CompanyPicker.vue";
 import {useCacheStore} from '@/stores/cache.js'
+
 const filePreviewParam = ref({
   fileUrl: '',
   fileName: '',
@@ -581,7 +588,7 @@ onMounted(async () => {
   //justify-content: space-between;
   overflow-x: hidden;
   overflow-y: auto;
-  padding: 0 30px  0 15px;
+  padding: 0 0 0 40px;
 
   a {
     cursor: pointer;
@@ -593,4 +600,20 @@ onMounted(async () => {
     position: relative;
   }
 }
+
+:deep(.el-table__header) {
+  .is-leaf:first-child {
+    .cell {
+      margin-left: -20px !important;
+    }
+  }
+}
+
+:deep(.el-table__body) {
+  .el-table__cell:first-child {
+    .cell {
+      margin-left: -10px !important;
+    }
+  }
+}
 </style>

src/views/special-fund/add.vue

@@ -1,26 +1,34 @@
 <template>
   <div v-loading="loading" class="add-block">
     <baseTitle title="专项资金信息录入"></baseTitle>
-    <el-form :model="formData" inline class="query-form" ref="fundForm" :rules="rules">
+    <el-form :model="formData" ref="fundForm" :rules="rules" label-width="135" style="margin-left: 5px;margin-bottom: -18px">
+      <el-row gutter="30">
+        <el-col :span="6" >
           <el-form-item label="专项资金名称" prop="name">
             <el-input v-model="formData.name" placeholder="请输入专项资金名称" clearable></el-input>
           </el-form-item>
-      <el-form-item label="金额(元)" prop="fundAmount">
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="金额(元)" prop="fundAmount" label-width="100">
             <el-input-number v-model="formData.fundAmount" placeholder="请输入金额" :controls="false"/>
           </el-form-item>
-    </el-form>
+        </el-col>
-    <baseTitle title="介绍"></baseTitle>
+        <el-col :span="24">
+          <el-form-item label="专项资金情况说明" prop="introduce">
             <el-input
                 v-model="formData.introduce"
                 style="width:100%"
                 :rows="5"
                 type="textarea"
-        placeholder="请输入介绍"
+                placeholder="请输入专项资金情况说明"
             />
-    <div style="display: flex;align-items: center">
+          </el-form-item>
-      <baseTitle title="申请文件" style="margin-right: 10px"></baseTitle>
+        </el-col>
+      </el-row>
+    </el-form>
+    <baseTitle title="附件文件" style="margin-right: 10px"></baseTitle>
     <file-upload @getFile="getFile"/>
-    </div>
+
     <fvTable style="width: 100%;max-height: 162px;" v-if="showTable"
              :tableConfig="tableConfig" height="162" :data="formData.files"
              :isSettingCol="false" :pagination="false">
@@ -39,7 +47,8 @@
           />
         </div>
       </div>
-      <el-empty  :image-size="100" description="暂无审批记录" v-if="processDiagramViewer&& !opentionData?.operationList&&!changeDiagram"/>
+      <el-empty :image-size="100" description="暂无审批记录"
+                v-if="processDiagramViewer&& !opentionData?.operationList&&!changeDiagram"/>
       <!--      <process-diagram-viewer mode="view" v-if="processDiagramViewer&&changeDiagram"/>-->
       <div class="process">
         <operation-render
@@ -54,7 +63,8 @@
       <el-button color="#DED0B2" v-else @click="handleResubmit">重新提交</el-button>
       <el-button @click="handleBack">返回</el-button>
     </div>
-    <file-preview ref="filePreviewRef"  v-if="filePreviewShow" :fileName="filePreviewParam.fileName" :fileUrl="filePreviewParam.fileUrl"
+    <file-preview ref="filePreviewRef" v-if="filePreviewShow" :fileName="filePreviewParam.fileName"
+                  :fileUrl="filePreviewParam.fileUrl"
                   :fileType="filePreviewParam.fileType"/>
   </div>
 </template>
@@ -100,7 +110,8 @@ const tableConfig = reactive({
       label: '文件名',
       align: 'center',
       showOverflowTooltip: false,
-      currentRender: ({row, index}) => (<div style="color: #2a99ff;cursor: pointer;" onClick={()=>clickToPreview(row)}>{row.originalFileName}</div>)
+      currentRender: ({row, index}) => (
+          <div style="color: #2a99ff;cursor: pointer;" onClick={() => clickToPreview(row)}>{row.originalFileName}</div>)
     },
     {
       prop: 'tag',
@@ -133,9 +144,9 @@ const tableConfig = reactive({
 })
 const routerName = ref(router.currentRoute.value.name)
 const rules = reactive({
-  name: [{required: true, message: '请输入专项资金名称', trigger: 'blur'}],
+  name: [{required: true, message: '请输入专项资金名称', trigger: ['blur', 'change']}],
-  fundAmount: [{required: true, message: '请输入金额', trigger: 'blur'}],
+  fundAmount: [{required: true, message: '请输入金额', trigger: ['blur', 'change']}],
-  introduce: [{required: true, message: '请输入介绍', trigger: 'blur'}],
+  introduce: [{required: true, message: '请输入专项资金情况说明', trigger: ['blur', 'change']}],
 })
 
 const filePreviewParam = ref({
@@ -322,8 +333,34 @@ onMounted(async () => {
 :deep(.el-table--fit ) {
   height: 300px !important;
 }
-.add-block{
 
-  padding: 0 30px 30px 15px;
+.add-block {
+  padding: 0 40px;
+}
+
+:deep(.el-input-number) {
+  width: 88%;
+.el-input__wrapper{
+  padding: 1px 11px!important;
+}
+  .el-input__inner {
+    text-align: left;
+  }
+}
+
+:deep(.el-table__header) {
+  .is-leaf:first-child {
+    .cell {
+      margin-left: -20px !important;
+    }
+  }
+}
+
+:deep(.el-table__body) {
+  .el-table__cell:first-child {
+    .cell {
+      margin-left: -10px !important;
+    }
+  }
 }
 </style>