业务联系单

src/api/business/index.js

@@ -200,4 +200,20 @@ export function auditDir(data) {
     method: 'post',
     data
   })
+}
+
+// 业务联系单
+export function getLeaseTask(id) {
+  return request({
+    url: '/material/leaseTask/' + id, 
+    method: 'get',
+  })
+}
+
+// 业务联系单-pdf
+export function getCodePDF(id) {
+  return request({
+    url: `/material/leaseTask/getCodePDF/${id}` ,
+    method: 'get'
+  })
 }

src/views/business/businessHandlingRecord/index.vue

@@ -88,6 +88,15 @@
           >
             编辑
           </el-button>
+          <el-button
+            type="text"
+            size="mini"
+            icon="el-icon-document"
+            @click="getDialogContent(scope.row)"
+            style="color: #e6a23c"
+          >
+            业务联系单
+          </el-button>
           <el-button
             v-if="scope.row.taskStatus == '0' || scope.row.taskStatus == '5'"
             type="text"
@@ -110,11 +119,153 @@
       :limit.sync="queryParams.pageSize"
       @pagination="getList"
     />
+
+    <!-- 弹框 -->
+    <el-dialog title="业务联系单" :visible.sync="dialogVisible" width="46%">
+      <div id="print-content" style="padding: 0 30px">
+        <span>发：</span>
+        <!-- 标题 -->
+        <div style="text-align: center; font-size: 16px">
+          <h3 style="font-size: 25px">{{ dialogForm.impUnitName }}</h3>
+          <h2 style="font-size: 35px; margin: 0 20%; display: flex; justify-content: space-around; align-items: center">
+            <span>业</span>
+            <span>务</span>
+            <span>联</span>
+            <span>系</span>
+            <span>单</span>
+          </h2>
+        </div>
+        <div
+          style="display: flex; justify-content: space-between; align-items: center; line-height: 1.9; padding: 0 15px"
+        >
+          <span style="text-decoration: underline">{{ dialogForm.leaseProject }}</span>
+          <span>
+            <span style="text-decoration: underline">{{ dialogForm.code }}</span>
+            号
+          </span>
+        </div>
+
+        <!-- 内容 -->
+        <div style="border: 3px solid #000; min-height: 800px; line-height: 1.9; position: relative">
+          <div style="font-weight: 800; border-bottom: 1px solid #888; display: flex">
+            <div style="width: 50%; padding-left: 10px">主送单位：{{ dialogForm.leaseUnit }}</div>
+            <div style="width: 50%; padding-left: 10px; border-left: 1px solid #888">
+              抄送单位：{{ dialogForm.leaseUnit }}
+            </div>
+          </div>
+          <!-- 内容 -->
+          <div style="padding-left: 10px; min-height: 300px">
+            <div>联系内容：</div>
+            <div style="text-indent: 2em">
+              因在
+              <span style="font-weight: 800">
+                {{ dialogForm.maTypeNames }}
+              </span>
+              进行架线施工需要，现需领用以下工具器，详见附件一：
+            </div>
+          </div>
+          <!-- 说明 -->
+          <div style="padding-left: 10px; min-height: 200px">
+            <div>说明：</div>
+            <div>{{ '第一项目管理部（合肥肥东）' }}：</div>
+            <div>项目部材料站站长联系人：{{ '徐青松' }} {{ '15234213324' }}</div>
+            <div>项目部技术联系人：{{ '杨金勇' }} {{ '17832421245' }}</div>
+            <div>领取人员：{{ dialogForm.leaseUnit }} {{ dialogForm.leasePerson }}：{{ dialogForm.phone }}</div>
+          </div>
+
+          <div
+            style="
+              width: 100%;
+              display: flex;
+              border-top: 1px solid #888;
+              border-bottom: 1px solid #888;
+              position: absolute;
+              bottom: 90px;
+              right: 0;
+            "
+          >
+            <div style="width: 35%; padding-left: 10px">主管：{{ '' }}</div>
+            <div style="width: 43%; padding-left: 10px; border-left: 1px solid #888">
+              联系：{{ dialogForm.leasePerson }} {{ dialogForm.phone }}
+            </div>
+            <div style="width: 22%; padding-left: 10px; border-left: 1px solid #888">
+              {{ handleTimeFormat(dialogForm.supplierTime) }}
+            </div>
+          </div>
+
+          <div
+            style="
+              width: 100%;
+              display: flex;
+              border-top: 1px solid #888;
+              border-bottom: 1px solid #888;
+              position: absolute;
+              bottom: 0;
+              right: 0;
+            "
+          >
+            <div style="width: 50%; padding-left: 10px">签复：</div>
+            <div
+              style="
+                width: 50%;
+                padding-left: 100px;
+                border-left: 1px solid #888;
+                display: flex;
+                justify-content: space-around;
+                align-items: center;
+              "
+            >
+              <span>年</span>
+              <span>月</span>
+              <span>日</span>
+            </div>
+          </div>
+        </div>
+
+        <!-- 附件 -->
+        <div style="margin-top: 100px">
+          <div style="font-size: 20px; padding-left: 40px; line-height: 1.9">
+            附件一：{{ dialogForm.leaseProject }}
+            <span style="margin-left: 20px">{{ dialogForm.code }}</span>
+            号附件
+          </div>
+          <div></div>
+        </div>
+        <table border="1" style="width: 100%; border-collapse: collapse">
+          <thead>
+            <tr>
+              <th style="width: 55px; text-align: center">序号</th>
+              <th
+                v-for="(column, index) in dialogColumns"
+                :key="column.prop"
+                :style="{ width: column.width, textAlign: 'center' }"
+              >
+                {{ column.label }}
+              </th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr v-for="(row, rowIndex) in dialogList" :key="rowIndex">
+              <td style="text-align: center">{{ rowIndex + 1 }}</td>
+              <td v-for="(column, colIndex) in dialogColumns" :key="colIndex" :style="{ textAlign: 'center' }">
+                {{ row[column.prop] }}
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+      <span slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="print">打 印</el-button>
+        <el-button type="primary" @click="">查看PDF</el-button>
+        <el-button @click="dialogVisible = false">取 消</el-button>
+      </span>
+    </el-dialog>
   </div>
 </template>
 
 <script>
-import { getLeaseTaskList, deleteLeaseTask } from '@/api/business/index'
+import printJS from 'print-js'
+import { getLeaseTaskList, deleteLeaseTask, getLeaseTask, getCodePDF } from '@/api/business/index'
 
 export default {
   data() {
@@ -148,7 +299,21 @@ export default {
         { label: '状态', prop: 'taskStatus' }
       ],
       // 表格数据
-      tableList: []
+      tableList: [],
+      dialogTitle: '', // 弹框标题
+      dialogVisible: false, // 弹框显示
+      dialogForm: {
+        proName: '', // 项目名称
+        code: '' // 业务单号
+      },
+      dialogColumns: [
+        { label: '名称', prop: 'maTypeName', width: '150px' },
+        { label: '规格', prop: 'typeName', width: '150px' },
+        { label: '单位', prop: 'unitName', width: '60px' },
+        { label: '数量', prop: 'preNum', width: '60px' },
+        { label: '备注', prop: 'remark', width: '' }
+      ],
+      dialogList: []
     }
   },
   created() {
@@ -232,6 +397,53 @@ export default {
       } catch (error) {
         console.log('导出数据失败', error)
       }
+    },
+    // 打印
+    print() {
+      printJS({
+        printable: 'print-content',
+        type: 'html', //
+        // targetStyles: ['*'], // 打印的元素样式
+        scanStyles: false, // 是否扫描页面样式
+        // css: [
+        //   'https://unpkg.com/element-ui/lib/theme-chalk/index.css' // Element UI 的样式表
+        // ],
+        maxWidth: '1400'
+        // 其他配置选项
+      })
+    },
+    // 获取弹框内容
+    async getDialogContent(row) {
+      console.log('🚀 ~ getDialogContent ~ row:', row.taskId)
+      const loading = this.$loading({
+        lock: true,
+        text: '加载中...'
+      })
+      try {
+        // 获取业务联系单
+        const res = await getLeaseTask(row.id)
+        console.log('🚀 ~ getDialogContent ~ res:', res)
+        // 获取PDF
+        const PDFres = await getCodePDF(row.taskId)
+        console.log('🚀 ~ getDialogContent ~ res:', PDFres)
+        this.dialogVisible = true
+        this.dialogForm = {
+          ...res.data.leaseApplyInfo,
+          pdfUrl: PDFres.data.url
+        }
+        this.dialogList = res.data.leaseApplyDetailsList
+        loading.close()
+      } catch (error) {
+        console.log('🚀 ~ 获取弹框内容 ~ error:', error)
+        loading.close()
+      }
+    },
+    // 处理时间格式 2021-09-01 转换为 2021年09月01日
+    handleTimeFormat(time) {
+      if (time) {
+        return time.replace(/-/g, '年').replace(/-/g, '月') + '日'
+      }
+      return ''
     }
   }
 }