1. 优化

src/views/finance/InvoiceRecords/dialog/details.vue

@@ -11,59 +11,65 @@
   <el-dialog
     title="开票详情"
     :visible.sync="open"
-    width="800px"
+    width="70vw"
     append-to-body
     :close-on-click-modal="false"
     @close="cancel"
   >
     <div class="dialog" v-if="form">
-      <el-row>
-        <el-col :span="12">
-          <div class="grid-content bg-purple item-class">订单号: <span>{{ form.orderId }}</span></div>
-        </el-col>
-        <el-col :span="12">
-          <div style="display: flex;" class="grid-content bg-purple item-class">状态: <span style="margin-left: 10px;"><dict-tag :options="dict.type.Invoicing_type" :value="form.status"/></span></div>
-        </el-col>
-        <el-col :span="12">
-          <div class="grid-content bg-purple item-class">申请时间: <span>{{ form.createTime }}</span></div>
-        </el-col>
-        <el-col :span="12">
-          <div style="display: flex;" class="grid-content bg-purple item-class">开票类型: <span style="margin-left: 10px;"><dict-tag :options="dict.type.lookup_type" :value="form.handlerType"/></span></div>
-        </el-col>
-        <el-col :span="12">
-          <div class="grid-content bg-purple item-class">纳税人识别号: <span>￥{{ form.creditCode || '-' }}</span></div>
-        </el-col>
-        <el-col :span="12">
-          <div class="grid-content bg-purple item-class">联系电话: <span>{{ form.mobile }}</span></div>
-        </el-col>
-        <el-col :span="12">
-          <div class="grid-content bg-purple item-class">邮箱: <span>{{ form.email }}</span></div>
-        </el-col>
-        <!-- <el-col :span="12">
-          <div class="grid-content bg-purple item-class">业务员: <span>{{ '' }}</span></div>
-        </el-col> -->
-        <el-col :span="12">
-          <div class="grid-content bg-purple item-class">开票金额: <span>{{ form.invoiceAmount }}</span></div>
-        </el-col>
-        <el-col :span="12" v-if="form.status == 3">
-          <div class="grid-content bg-purple item-class">失败原因: <span style="color: red;">{{ form.errReason }}</span></div>
-        </el-col>
-        <el-col :span="24">
-          <div style="display: flex;" class="grid-content bg-purple item-class">
-            <span style="white-space: nowrap;">附件: </span>
-            <div style="color: #409eff;display: flex;flex-direction: column;margin-left: 10px;">
-              <el-image 
-                v-if="form.imageUrl"
-                style="width: 100px; height: 100px"
-                :src="form.imageUrl" 
-                :preview-src-list="[form.imageUrl]">
-              </el-image>
-              
-              <span v-if="form.pdfUrl"><i class="el-icon-folder-opened"></i> {{ form.pdfUrl }} <span style="margin-left: 10px;cursor: pointer;color: #67c23a;" @click="openPDF(form.pdfUrl)">参看详情</span></span>
+      <div>
+        <el-row>
+          <el-col :span="24">
+            <div class="grid-content bg-purple item-class">订单号: <span>{{ form.orderId }}</span></div>
+          </el-col>
+          <el-col :span="24">
+            <div style="display: flex;" class="grid-content bg-purple item-class">状态: <span style="margin-left: 10px;"><dict-tag :options="dict.type.Invoicing_type" :value="form.status"/></span></div>
+          </el-col>
+          <el-col :span="24">
+            <div class="grid-content bg-purple item-class">申请时间: <span>{{ form.createTime }}</span></div>
+          </el-col>
+          <el-col :span="24">
+            <div style="display: flex;" class="grid-content bg-purple item-class">开票类型: <span style="margin-left: 10px;"><dict-tag :options="dict.type.lookup_type" :value="form.handlerType"/></span></div>
+          </el-col>
+          <el-col :span="24">
+            <div class="grid-content bg-purple item-class">纳税人识别号: <span>￥{{ form.creditCode || '-' }}</span></div>
+          </el-col>
+          <el-col :span="24">
+            <div class="grid-content bg-purple item-class">联系电话: <span>{{ form.mobile }}</span></div>
+          </el-col>
+          <el-col :span="24">
+            <div class="grid-content bg-purple item-class">邮箱: <span>{{ form.email }}</span></div>
+          </el-col>
+          <!-- <el-col :span="24">
+            <div class="grid-content bg-purple item-class">业务员: <span>{{ '' }}</span></div>
+          </el-col> -->
+          <el-col :span="24">
+            <div class="grid-content bg-purple item-class">开票金额: <span>{{ form.invoiceAmount }}</span></div>
+          </el-col>
+          <el-col :span="24" v-if="form.status == 3">
+            <div class="grid-content bg-purple item-class">失败原因: <span style="color: red;">{{ form.errReason }}</span></div>
+          </el-col>
+          <el-col :span="24">
+            <div style="display: flex;" class="grid-content bg-purple item-class">
+              <span style="white-space: nowrap;">附件: </span>
+              <div style="color: #409eff;display: flex;flex-direction: column;margin-left: 10px;">
+                <!-- <el-image 
+                  v-if="form.imageUrl"
+                  style="width: 100px; height: 100px"
+                  :src="form.imageUrl" 
+                  :preview-src-list="[form.imageUrl]">
+                </el-image> -->
+                
+                <span v-if="form.pdfUrl"><i class="el-icon-folder-opened"></i> {{ form.pdfUrl }} <span style="margin-left: 10px;cursor: pointer;color: #67c23a;" @click="openPDF(form.pdfUrl)">参看详情</span></span>
+                
+              </div>
             </div>
-          </div>
-        </el-col>
-      </el-row>
+          </el-col>
+        </el-row>
+      </div>
+      <div>
+        <iframe width="90%" :src="form.pdfUrl" frameborder="0"></iframe>
+      </div>
     </div>
 
 
@@ -139,11 +145,26 @@ export default {
 <style lang="scss" scoped>
 .dialog {
   padding: 0 30px;
-  max-height: 65vh;
+  height: 60vh;
   overflow-y: auto;
 }
 .dialog {
   padding: 0 30px;
+  width: 100%;
+  box-sizing: border-box;
+  display: flex;
+  >div:first-child {
+    width: 400px;
+    padding-right: 20px;
+    box-sizing: border-box;
+  }
+  >div:last-child {
+    width: calc( 100% - 400px );
+    iframe {
+      width: 100%;
+      height: 100%;
+    }
+  }
   .upload-btn {
     width: 100px;
     height: 100px;

src/views/finance/InvoiceRecords/index.vue

@@ -91,7 +91,7 @@
           <el-button
             size="mini"
             type="text"
-            v-if="scope.row.status == 1"
+            v-if="scope.row.status == 1 || scope.row.status == 7"
             @click="openRedBlood(scope.row)"
             v-hasPermi="['finance:InvoiceRecords:redblood']"
           >冲红</el-button>