采购付款页面打印样式调整

src/components/process/PurchasePayment.vue

@@ -218,7 +218,7 @@ const formConfig = computed(() => {
     },
     {
       type: "input",
-      prop: "bankName",
+      prop: "name",
       label: "户名",
       required: true,
       itemType: "text",

src/views/finance/fundManage/accountPayment/index.vue

@@ -113,7 +113,7 @@ const config = computed(() => {
       },
       render(type) {
         if (type) {
-          return proxy.dictValueLabel(type, fundsType.value);
+          return "请款: " + proxy.dictValueLabel(type, fundsType.value);
         } else {
           return "采购付款";
         }

src/views/purchaseManage/purchasePayment/payment/index.vue

@@ -1,28 +1,136 @@
 <template>
   <div class="tenant">
-    <div class="content">
-      <byTable
-        :source="sourceList.data"
-        :pagination="sourceList.pagination"
-        :config="config"
-        :loading="loading"
-        :selectConfig="selectConfig"
-        highlight-current-row
-        :action-list="[
-          {
-            text: '发起申请',
-            action: () => purchasePayment(),
-          },
-        ]"
-        @get-list="getList"
-      >
-        <template #amount="{ item }">
-          <div>
-            <span>{{ moneyFormat(item.amount, 2) }}</span>
+    <byTable
+      :source="sourceList.data"
+      :pagination="sourceList.pagination"
+      :config="config"
+      :loading="loading"
+      :selectConfig="selectConfig"
+      highlight-current-row
+      :action-list="[
+        {
+          text: '发起申请',
+          action: () => purchasePayment(),
+        },
+      ]"
+      @get-list="getList">
+      <template #amount="{ item }">
+        <div>
+          <span>{{ moneyFormat(item.amount, 2) }}</span>
+        </div>
+      </template>
+    </byTable>
+
+    <el-dialog title="打印" v-if="openPrint" v-model="openPrint" width="840px">
+      <div id="pdfDom" style="width: 776px">
+        <div style="padding: 60px; font-size: 12px !important; color: black">
+          <div style="font-size: 16px; text-align: center; padding: 8px">
+            <span style="margin-left: 16px">采购付款</span>
+          </div>
+          <div style="padding: 8px 0">
+            <!-- <span>{{ printDetails.corporationName }}</span> -->
+            <!-- <span style="padding-left: 32px">创建时间: {{ printDetails.createTime }}</span> -->
+            <span>创建时间: {{ printDetails.createTime }}</span>
+          </div>
+          <div style="border: 1px solid black">
+            <div style="display: flex; border-bottom: 1px solid black">
+              <div style="width: 150px; border-right: 1px solid black; padding: 8px">创建人</div>
+              <div style="width: calc(100% - 150px); padding: 8px">
+                {{ dictValueLabel(printDetails.createUser, userList) }}
+              </div>
+            </div>
+            <div style="display: flex; border-bottom: 1px solid black">
+              <div style="width: 150px; border-right: 1px solid black; padding: 8px">创建人部门</div>
+              <div style="width: calc(100% - 150px); padding: 8px">
+                {{ dictValueLabel(printDetails.deptId, deptList) }}
+              </div>
+            </div>
+            <div style="display: flex; border-bottom: 1px solid black">
+              <div style="width: 150px; border-right: 1px solid black; padding: 4px 8px; display: flex; align-items: center">费用明细</div>
+              <div style="width: calc(100% - 150px)">
+                <div style="border-bottom: 1px solid black; display: flex">
+                  <div style="width: 120px; padding: 4px 8px; border-right: 1px solid black">采购合同</div>
+                  <div style="width: calc(100% - 340px); padding: 4px 8px; border-right: 1px solid black">款项说明</div>
+                  <div style="width: 60px; padding: 4px 8px; border-right: 1px solid black">货币</div>
+                  <div style="width: 80px; padding: 4px 8px; border-right: 1px solid black">付款金额</div>
+                  <div style="width: 80px; padding: 4px 8px">单据数量</div>
+                </div>
+                <template v-if="printDetails.payDetailVoList && printDetails.payDetailVoList.length > 0">
+                  <div v-for="(item, index) in printDetails.payDetailVoList" :key="index">
+                    <div :style="index + 1 !== printDetails.payDetailVoList.length ? 'border-bottom: 1px solid black;  display: flex' : ' display: flex'">
+                      <div style="width: 120px; padding: 4px 8px; border-right: 1px solid black">{{ item.purchaseCode }}</div>
+                      <div style="width: calc(100% - 340px); padding: 4px 8px; border-right: 1px solid black">{{ item.remark }}</div>
+                      <div style="width: 60px; padding: 4px 8px; border-right: 1px solid black">人民币</div>
+                      <div style="width: 80px; padding: 4px 8px; border-right: 1px solid black">{{ item.money }}</div>
+                      <div style="width: 80px; padding: 4px 8px">{{ printDetails.receiptsNum }}</div>
+                    </div>
+                  </div>
+                </template>
+              </div>
+            </div>
+            <div style="display: flex; border-bottom: 1px solid black">
+              <div style="width: 150px; border-right: 1px solid black; padding: 0 8px; display: flex; align-items: center">收款信息</div>
+              <div style="width: calc(100% - 150px)">
+                <div style="border-bottom: 1px solid black; display: flex">
+                  <div style="width: 25%; padding: 0 8px; border-right: 1px solid black">支付方式</div>
+                  <div style="width: 25%; padding: 0 8px; border-right: 1px solid black">收款方户名</div>
+                  <div style="width: 25%; padding: 0 8px; border-right: 1px solid black">开户行</div>
+                  <div style="width: 25%; padding: 0 8px">收款方账号</div>
+                </div>
+                <div style="display: flex">
+                  <div style="width: 25%; padding: 0 8px; border-right: 1px solid black">
+                    {{ dictValueLabel(printDetails.payType, fundsPaymentMethod) }}
+                  </div>
+                  <div style="width: 25%; padding: 0 8px; border-right: 1px solid black">
+                    {{ printDetails.name }}
+                  </div>
+                  <div style="width: 25%; padding: 0 8px; border-right: 1px solid black">
+                    {{ printDetails.openingBank }}
+                  </div>
+                  <div style="width: 25%; padding: 0 8px">
+                    {{ printDetails.accountOpening }}
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div style="display: flex; border-bottom: 1px solid black">
+              <div style="width: 150px; border-right: 1px solid black; padding: 8px">电子发票(PDF/JPG)</div>
+              <div style="width: calc(100% - 150px); padding: 8px">{{ printDetails.electronicInvoiceText }}</div>
+            </div>
+            <div style="display: flex">
+              <div style="width: 150px; border-right: 1px solid black; padding: 4px 8px; display: flex; align-items: center">审批流程</div>
+              <div style="width: calc(100% - 150px)">
+                <template v-if="printDetails.recordList && printDetails.recordList.length > 0">
+                  <div v-for="(item, index) in printDetails.recordList" :key="index">
+                    <div
+                      :style="
+                        index + 1 !== printDetails.recordList.length
+                          ? 'border-bottom: 1px solid black; padding: 4px 8px; display: flex'
+                          : 'padding: 4px 8px; display: flex'
+                      ">
+                      <div style="width: calc(100% - 120px); word-wrap: break-word">
+                        <span>{{ item.nodeName }}: </span>
+                        <span style="padding-left: 4px">{{ item.processedUser }}</span>
+                        <span style="padding-left: 4px">{{ item.remark }}</span>
+                      </div>
+                      <div style="width: 120px">{{ item.processedDate }}</div>
+                    </div>
+                  </div>
+                </template>
+              </div>
+            </div>
+          </div>
+          <div style="padding-top: 16px">
+            <span>打印时间: {{ presentTime }}</span>
+            <span style="padding-left: 32px">打印人: {{ useUserStore().user.nickName }}</span>
           </div>
-        </template>
-      </byTable>
-    </div>
+        </div>
+      </div>
+      <template #footer>
+        <el-button @click="openPrint = false" size="large">取消</el-button>
+        <el-button type="primary" @click="clickDownload()" size="large">下载PDF</el-button>
+      </template>
+    </el-dialog>
   </div>
 </template>
 
@@ -30,12 +138,14 @@
 import { computed, ref } from "vue";
 import byTable from "@/components/byTable/index";
 import useUserStore from "@/store/modules/user";
-// import { ElMessage } from "element-plus";
+import moment from "moment";
 
 const { proxy } = getCurrentInstance();
 const payStatus = ref([]);
 const fundsPaymentMethod = ref([]);
 const accountList = ref([]);
+const userList = ref([]);
+const deptList = ref([]);
 const status = ref([
   {
     label: "草稿",
@@ -113,16 +223,7 @@ const config = computed(() => {
         width: 160,
       },
       render(type) {
-        let text = "";
-        if (fundsPaymentMethod.value && fundsPaymentMethod.value.length > 0) {
-          let data = fundsPaymentMethod.value.filter(
-            (item) => item.value == type
-          );
-          if (data && data.length > 0) {
-            text = data[0].label;
-          }
-        }
-        return text;
+        return proxy.dictValueLabel(type, fundsPaymentMethod.value);
       },
     },
     {
@@ -132,22 +233,18 @@ const config = computed(() => {
         width: 200,
       },
       render(type) {
-        let text = "";
-        if (accountList.value && accountList.value.length > 0) {
-          let data = accountList.value.filter((item) => item.value == type);
-          if (data && data.length > 0) {
-            text = data[0].label;
-          }
-        }
-        return text;
+        return proxy.dictValueLabel(type, accountList.value);
       },
     },
     {
       attrs: {
         label: "申请人",
-        prop: "userName",
+        prop: "createUser",
         width: 140,
       },
+      render(type) {
+        return proxy.dictValueLabel(type, userList.value);
+      },
     },
     {
       attrs: {
@@ -163,14 +260,7 @@ const config = computed(() => {
         width: 140,
       },
       render(type) {
-        let text = "";
-        if (status.value && status.value.length > 0) {
-          let data = status.value.filter((item) => item.value == type);
-          if (data && data.length > 0) {
-            text = data[0].label;
-          }
-        }
-        return text;
+        return proxy.dictValueLabel(type, status.value);
       },
     },
     {
@@ -180,14 +270,7 @@ const config = computed(() => {
         width: 140,
       },
       render(type) {
-        let text = "";
-        if (payStatus.value && payStatus.value.length > 0) {
-          let data = payStatus.value.filter((item) => item.value == type);
-          if (data && data.length > 0) {
-            text = data[0].label;
-          }
-        }
-        return text;
+        return proxy.dictValueLabel(type, payStatus.value);
       },
     },
     {
@@ -249,15 +332,46 @@ const getDict = () => {
         });
       }
     });
+  proxy.post("/accountManagement/page", { pageNum: 1, pageSize: 999 }).then((res) => {
+    accountList.value = res.rows.map((item) => {
+      return {
+        label: item.alias,
+        value: item.id,
+      };
+    });
+  });
   proxy
-    .post("/accountManagement/page", { pageNum: 1, pageSize: 999 })
+    .get("/tenantUser/list", {
+      pageNum: 1,
+      pageSize: 10000,
+      tenantId: useUserStore().user.tenantId,
+    })
     .then((res) => {
-      accountList.value = res.rows.map((item) => {
-        return {
-          label: item.alias,
-          value: item.id,
-        };
-      });
+      if (res.rows && res.rows.length > 0) {
+        userList.value = res.rows.map((item) => {
+          return {
+            deptId: item.deptId,
+            label: item.nickName,
+            value: item.userId,
+          };
+        });
+      }
+    });
+  proxy
+    .get("/tenantDept/list", {
+      pageNum: 1,
+      pageSize: 999,
+      tenantId: useUserStore().user.tenantId,
+    })
+    .then((res) => {
+      if (res.data && res.data.length > 0) {
+        deptList.value = res.data.map((item) => {
+          return {
+            label: item.deptName,
+            value: item.deptId,
+          };
+        });
+      }
     });
 };
 const getList = async (req) => {
@@ -282,6 +396,44 @@ const purchasePayment = () => {
     },
   });
 };
+const openPrint = ref(false);
+const printDetails = ref({});
+const presentTime = ref("");
+const clickPrint = (row) => {
+  presentTime.value = moment().format("yyyy-MM-DD HH:mm:ss");
+  openPrint.value = true;
+  proxy.post("/pay/detail", { id: row.id }).then((res) => {
+    printDetails.value = res;
+    if (printDetails.value.createUser) {
+      let data = userList.value.filter((item) => item.value == printDetails.value.createUser);
+      if (data && data.length > 0) {
+        printDetails.value.deptId = data[0].deptId;
+        console.log(printDetails.value.deptId, deptList.value, "22");
+      }
+    }
+    proxy.post("/fileInfo/getList", { businessIdList: [row.id] }).then((resFile) => {
+      let electronicInvoiceText = "";
+      if (resFile[row.id] && resFile[row.id].length > 0) {
+        for (let i = 0; i < resFile[row.id].length; i++) {
+          if (i === 0) {
+            electronicInvoiceText = resFile[row.id][0].fileName;
+          } else {
+            electronicInvoiceText = electronicInvoiceText + ", " + resFile[row.id][i].fileName;
+          }
+        }
+      }
+      printDetails.value.electronicInvoiceText = electronicInvoiceText;
+    });
+    if (row.flowExampleId) {
+      proxy.post("/flowExample/getApprovalRecord", { id: row.flowExampleId }).then((record) => {
+        printDetails.value.recordList = record.recordList;
+      });
+    }
+  });
+};
+const clickDownload = () => {
+  proxy.getPdf("采购付款PDF文件");
+};
 </script>
 
 <style lang="scss" scoped>