修改受理单样式

nasc-ui/src/views/matter/index/index.vue

@@ -67,8 +67,15 @@
         </template>
         <template v-if="preMaterialPart">
           <el-row>
-            <el-button type="primary" size="mini" @click="handleDealWith">受理</el-button>
-            <el-button type="warning" size="mini" @click="handleConnDesktop">远程连接</el-button>
+            <el-button type="primary" @click="handleBtnSaveDealWith(0)">保存</el-button>
+            <el-button type="warning" @click="handleBtnSaveDealWith(1)">物料流转</el-button>
+            <el-button type="success" @click="handlePrintDealWith('print_suc')">受理通知单</el-button>
+            <el-button type="info" @click="handlePrintDealWith('print_fail')">补正材料告知书</el-button>
+            <el-button type="danger" @click="handlePrintDealWith('print_deny')">不予受理通知书</el-button>
+            <el-button id="print_suc" type="success" v-print="printSuccessObj" style="display: none;">受理通知单</el-button>
+            <el-button id="print_fail" type="info" v-print="printFailObj" style="display: none;">补正材料告知书</el-button>
+            <el-button id="print_deny" type="info" v-print="printDenyObj" style="display: none;">不予受理通知书</el-button>
+            <el-button @click="handleConnDesktop">远程连接</el-button>
           </el-row>
           <el-row id="print_material" style="height: 100%; padding: 10px;">
             <h2 style="font-style: italic; color: #00afff; margin-bottom: -10px; font-size: 16px;" class="qzprblem"
@@ -77,47 +84,79 @@
             </h2>
             <el-divider></el-divider>
             <el-row style="overflow: auto; height: calc(100% - 120px);">
-              <el-row>
-                <label style="color: #00afff;">一、申请条件</label>
-                <div class="matter-material" v-html="currMaterial.conditions"></div>
-              </el-row>
-              <el-row style="margin-top: 20px;">
-                <label style="color: #00afff;">二、现有办理方式</label>
-                <div class="matter-material" v-html="currMaterial.dealWith"></div>
-              </el-row>
-              <el-row style="margin-top: 20px;">
-                <label style="color: #00afff;">三、材料说明</label>
-                <div class="matter-material" style="display: flex;">
-                  <div style="width: 30%;">
-                    <ul class="material-list" style="margin-right: 5px;">
-                      <li v-for="item in currMaterial.materialList" @click="handleMaterialItem($event, item)"
-                          class="material-item">
-                        {{ item.listName }}
-                      </li>
-                    </ul>
-                  </div>
-                  <div class="material-line" :style="lineHeight"></div>
-                  <div style="width: 69%; padding: 10px;">
-                    <div v-show="showMaterialInfo" class="material-content">
-                      <template
-                        v-if="!hasRichTextContent(currMaterialInfo.memo) && (!currMaterialInfo.imgList || currMaterialInfo.imgList.length == 0)">
-                        <div style="margin: 10px; color: #aea6a3">暂无数据</div>
-                      </template>
-                      <template v-if="hasRichTextContent(currMaterialInfo.memo)">
-                        <label>审查要点</label>
-                        <div v-html="currMaterialInfo.memo" style="margin: 10px;"></div>
-                      </template>
-                      <div v-for="(url, i) in currMaterialInfo.imgList">
-                        <!--                        <label>示例图{{ i + 1 }}</label>-->
-                        <div class="demo-image__lazy" style="margin: 10px;">
-                          <el-image :src="url" lazy :preview-src-list="currMaterialInfo.imgList"
-                                    @load="loadImgSuccess"></el-image>
-                        </div>
-                      </div>
-                    </div>
+              <el-form :model="dealWithForm" ref="dealWithForm" :rules="dealWithFormRules" label-width="120px"
+                       style="">
+                <el-form-item label="受理编号" prop="serialNumber">
+                  <el-input v-model="dealWithForm.serialNumber" readonly disabled></el-input>
+                </el-form-item>
+                <el-form-item label="办理类型" prop="withType">
+                  <el-radio-group v-model="dealWithForm.withType">
+                    <el-radio :label="1">个人</el-radio>
+                    <el-radio :label="2">企业</el-radio>
+                  </el-radio-group>
+                </el-form-item>
+                <template v-if="dealWithForm.withType == 1">
+                  <el-form-item label="姓名" prop="contacts">
+                    <el-input v-model="dealWithForm.contacts" maxlength="20"></el-input>
+                  </el-form-item>
+                  <el-form-item label="身份证号码" prop="idCard">
+                    <el-input v-model="dealWithForm.idCard" maxlength="50"></el-input>
+                  </el-form-item>
+                  <el-form-item label="联系电话" prop="phone">
+                    <el-input v-model="dealWithForm.phone" maxlength="11"></el-input>
+                  </el-form-item>
+                </template>
+                <template v-else>
+                  <el-form-item label="企业名称" prop="enterpriseName">
+                    <el-input v-model="dealWithForm.enterpriseName" maxlength="100"></el-input>
+                  </el-form-item>
+                  <el-form-item label="社会信用代码" prop="idCard">
+                    <el-input v-model="dealWithForm.idCard" maxlength="50"></el-input>
+                  </el-form-item>
+                  <el-form-item label="联系人" prop="contacts">
+                    <el-input v-model="dealWithForm.contacts" maxlength="20"></el-input>
+                  </el-form-item>
+                  <el-form-item label="联系电话" prop="phone">
+                    <el-input v-model="dealWithForm.phone" maxlength="11"></el-input>
+                  </el-form-item>
+                </template>
+                <el-row>
+                  <label style="color: #00afff;">一、申请条件</label>
+                  <div class="matter-material" v-html="currMaterial.conditions"></div>
+                </el-row>
+                <el-row style="margin-top: 20px;">
+                  <label style="color: #00afff;">二、现有办理方式</label>
+                  <div class="matter-material" v-html="currMaterial.dealWith"></div>
+                </el-row>
+                <el-row style="margin-top: 20px;">
+                  <label style="color: #00afff;">三、材料说明</label>
+                  <div style="margin-top: 10px;">
+                    <el-table
+                      ref="multipleTable"
+                      :data="dealWithForm.materials"
+                      tooltip-effect="dark"
+                      style="width: 100%"
+                      @selection-change="handleSelectionChange">
+                      <el-table-column type="selection" width="55"></el-table-column>
+                      <el-table-column label="材料名称" prop="listName"></el-table-column>
+                      <el-table-column label="理由" width="200">
+                        <template slot-scope="scope">
+                          <el-input v-if="!scope.row.reasonFlag" v-model="scope.row.reason"></el-input>
+                        </template>
+                      </el-table-column>
+                      <el-table-column label="操作" width="200">
+                        <template slot-scope="scope">
+                          <el-button type="warning" size="mini"
+                                     @click="handleMaterialDetail(scope.row, $event)">审查要点</el-button>
+                          <el-button v-if="scope.row.verification === 1 && scope.row.reasonFlag" type="primary" size="mini"
+                                     :disabled="scope.row.manualVerifyId > 0 ? true : false" :key="dealWithKey"
+                                     @click="handleManualVerify(scope.row, $event)">{{ scope.row.manualVerifyId > 0 ? '核验中' : '人工核验' }}</el-button>
+                        </template>
+                      </el-table-column>
+                    </el-table>
                   </div>
-                </div>
-              </el-row>
+                </el-row>
+              </el-form>
               <!--              <el-row style="margin-top: 20px;">-->
               <!--                <label style="color: #00afff;">四、材料说明</label>-->
               <!--                <div class="matter-material" v-html="currMaterial.desc"></div>-->
@@ -189,75 +228,22 @@
       </div>
     </el-dialog>
 
-    <el-dialog title="受理单" :visible.sync="dialogDealWithFormVisible" :close-on-click-modal="false" width="800px">
-      <el-form :model="dealWithForm" ref="dealWithForm" :rules="dealWithFormRules" label-width="120px"
-               style="height: 60vh; overflow-y: auto;">
-        <el-form-item label="受理编号" prop="serialNumber">
-          <el-input v-model="dealWithForm.serialNumber" readonly></el-input>
-        </el-form-item>
-        <el-form-item label="办理类型" prop="withType">
-          <el-radio-group v-model="dealWithForm.withType">
-            <el-radio :label="1">个人</el-radio>
-            <el-radio :label="2">企业</el-radio>
-          </el-radio-group>
-        </el-form-item>
-        <template v-if="dealWithForm.withType == 1">
-          <el-form-item label="姓名" prop="contacts">
-            <el-input v-model="dealWithForm.contacts" maxlength="20"></el-input>
-          </el-form-item>
-          <el-form-item label="身份证号码" prop="idCard">
-            <el-input v-model="dealWithForm.idCard" maxlength="50"></el-input>
-          </el-form-item>
-          <el-form-item label="联系电话" prop="phone">
-            <el-input v-model="dealWithForm.phone" maxlength="11"></el-input>
-          </el-form-item>
+    <el-dialog title="审查要点" :visible.sync="dialogDealWithFormVisible" :close-on-click-modal="false" width="80%">
+      <div class="material-content">
+        <template
+          v-if="!hasRichTextContent(currMaterialInfo.memo) && (!currMaterialInfo.imgList || currMaterialInfo.imgList.length == 0)">
+          <div style="margin: 10px; color: #aea6a3;text-align: center;">暂无数据</div>
         </template>
-        <template v-else>
-          <el-form-item label="企业名称" prop="enterpriseName">
-            <el-input v-model="dealWithForm.enterpriseName" maxlength="100"></el-input>
-          </el-form-item>
-          <el-form-item label="社会信用代码" prop="idCard">
-            <el-input v-model="dealWithForm.idCard" maxlength="50"></el-input>
-          </el-form-item>
-          <el-form-item label="联系人" prop="contacts">
-            <el-input v-model="dealWithForm.contacts" maxlength="20"></el-input>
-          </el-form-item>
-          <el-form-item label="联系电话" prop="phone">
-            <el-input v-model="dealWithForm.phone" maxlength="11"></el-input>
-          </el-form-item>
+        <template v-if="hasRichTextContent(currMaterialInfo.memo)">
+          <div v-html="currMaterialInfo.memo"></div>
         </template>
-        <el-table
-          ref="multipleTable"
-          :data="dealWithForm.materials"
-          tooltip-effect="dark"
-          style="width: 100%"
-          @selection-change="handleSelectionChange">
-          <el-table-column type="selection" width="55"></el-table-column>
-          <el-table-column label="材料名称" prop="listName"></el-table-column>
-          <el-table-column label="理由" width="200">
-            <template slot-scope="scope">
-              <el-input v-if="!scope.row.reasonFlag" v-model="scope.row.reason"></el-input>
-            </template>
-          </el-table-column>
-          <el-table-column label="操作" width="120">
-            <template slot-scope="scope">
-              <el-button v-if="scope.row.verification === 1 && scope.row.reasonFlag" type="primary" size="mini"
-                         :disabled="scope.row.manualVerifyId > 0 ? true : false" :key="dealWithKey"
-                         @click="handleManualVerify(scope.row, $event)">{{ scope.row.manualVerifyId > 0 ? '核验中' : '人工核验' }}</el-button>
-            </template>
-          </el-table-column>
-        </el-table>
-      </el-form>
-      <div slot="footer" class="dialog-footer">
-        <el-button type="success" @click="handlePrintDealWith('print_suc')">受理通知单</el-button>
-        <el-button type="info" @click="handlePrintDealWith('print_fail')">补正材料告知书</el-button>
-        <el-button type="danger" @click="handlePrintDealWith('print_deny')">不予受理通知书</el-button>
-        <el-button id="print_suc" type="success" v-print="printSuccessObj" style="display: none;">受理通知单</el-button>
-        <el-button id="print_fail" type="info" v-print="printFailObj" style="display: none;">补正材料告知书</el-button>
-        <el-button id="print_deny" type="info" v-print="printDenyObj" style="display: none;">不予受理通知书</el-button>
-        <el-button type="warning" @click="handleBtnSaveDealWith(1)">物料流转</el-button>
-        <el-button type="primary" @click="handleBtnSaveDealWith(0)">保存</el-button>
-        <el-button @click="handleCancelDealWith">取消</el-button>
+        <div v-for="(url, i) in currMaterialInfo.imgList">
+          <!--                        <label>示例图{{ i + 1 }}</label>-->
+          <div class="demo-image__lazy" style="margin: 10px;">
+            <el-image :src="url" lazy :preview-src-list="currMaterialInfo.imgList"
+                      @load="loadImgSuccess"></el-image>
+          </div>
+        </div>
       </div>
     </el-dialog>
 
@@ -602,6 +588,7 @@ export default {
         return
       }
       let loadingInstance = Loading.service({fullscreen: true})
+      this.handleCancelDealWith()
       this.currMatter = data
       this.preMaterialPart = false
       this.preQuestionPart = data.prefixQuestion === 'Y'
@@ -624,10 +611,11 @@ export default {
           this.currMaterialInfo = {}
           this.showMaterialInfo = false
           this.currMaterial = matterData.material ? matterData.material : {}
-          setTimeout(() => {
-            let listHeight = document.getElementsByClassName('material-list')[0].clientHeight
-            _this.lineHeight = 'height: ' + listHeight + 'px;'
-          })
+          this.handleDealWith()
+          // setTimeout(() => {
+          //   let listHeight = document.getElementsByClassName('material-list')[0].clientHeight
+          //   _this.lineHeight = 'height: ' + listHeight + 'px;'
+          // })
         }
       });
     },
@@ -762,6 +750,7 @@ export default {
         this.currMaterialInfo = {}
         this.showMaterialInfo = false
         this.currMaterial = data.material ? data.material : {}
+        this.handleDealWith()
         return
       }
       // 继续问题跳转
@@ -916,12 +905,22 @@ export default {
       getSerialNumber().then(response => {
         if (response.msg == "success") {
           this.dealWithForm.serialNumber = response.data
-          this.dialogDealWithFormVisible = true
         } else {
           this.$modal.msgError("网络连接失败，请稍候再试");
         }
       });
     },
+    /** 审查要点 */
+    handleMaterialDetail(data, event) {
+      if (data) {
+        let imgList = data.imgs ? data.imgs.split('*') : []
+        data.imgList = imgList.map(item => this.getAPIPath() + item)
+        this.currMaterialInfo = data
+      } else {
+        this.currMaterialInfo = {}
+      }
+      this.dialogDealWithFormVisible = true
+    },
     /** 人工核验 **/
     handleManualVerify(data, event) {
       let params = {
@@ -997,8 +996,7 @@ export default {
     },
     /** 取消受理弹出框 **/
     handleCancelDealWith() {
-      this.dialogDealWithFormVisible = false
-      this.$refs['dealWithForm'].resetFields();
+      if (this.$refs['dealWithForm']) this.$refs['dealWithForm'].resetFields();
     },
     printDetail(id) {
       let params = {
@@ -1068,7 +1066,7 @@ export default {
           addDealRecord(data).then((response) => {
             if (response.code == 200) {
               this.$modal.msgSuccess("保存成功");
-              this.handleCancelDealWith()
+              // this.handleCancelDealWith()
               if (withStatus == 1) {
                 this.printDetail(response.data)
               }
@@ -1300,4 +1298,10 @@ export default {
 .matter-title > .el-alert__content > .el-alert__title {
   line-height: 24px !important;
 }
+
+.material-content {
+  margin: 0 20px;
+  height: 70vh;
+  overflow: auto;
+}
 </style>