请款PDF

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

@@ -1,6 +1,5 @@
 <template>
   <div class="tenant">
-    <!-- <Banner /> -->
     <div class="content">
       <byTable
         :source="sourceList.data"
@@ -9,140 +8,175 @@
         :loading="loading"
         highlight-current-row
         :selectConfig="selectConfig"
-        :table-events="{
-          //element talbe事件都能传
-          select: select,
-        }"
         :action-list="[
           {
             text: '发起请款',
             action: () => openModal(),
           },
         ]"
-        @get-list="getList"
-      >
+        @get-list="getList">
         <template #fileSlot="{ item }">
-          <div
-            style="cursor: pointer; color: #409eff"
-            @click="handleClickFile(item)"
-          >
+          <div style="cursor: pointer; color: #409eff" @click="handleClickFile(item)">
             {{ item.fileName }}
           </div>
         </template>
       </byTable>
     </div>
-    <el-dialog
-      :title="modalType == 'add' ? '添加供应商' : '编辑供应商'"
-      v-model="dialogVisible"
-      width="800"
-      v-loading="loading"
-    >
-      <byForm
-        :formConfig="formConfig"
-        :formOption="formOption"
-        v-model="formData.data"
-        :rules="rules"
-        ref="byform"
-      >
-        <template #address>
-          <el-row :gutter="10" style="width: 100%">
-            <el-col :span="8">
-              <el-select v-model="formData.data.aa" placeholder="国家">
-                <el-option v-for="item in 3" label="ceshi" value="1">
-                </el-option>
-              </el-select>
-            </el-col>
-            <el-col :span="8">
-              <el-select v-model="formData.data.aa" placeholder="省/洲">
-                <el-option v-for="item in 3" label="ceshi" value="1">
-                </el-option>
-              </el-select>
-            </el-col>
-            <el-col :span="8">
-              <el-select v-model="formData.data.aa" placeholder="城市">
-                <el-option v-for="item in 3" label="ceshi" value="1">
-                </el-option>
-              </el-select>
-            </el-col>
-          </el-row>
-          <el-row style="margin-top: 20px; width: 100%">
-            <el-col :span="24">
-              <el-input v-model="formData.data.bb" type="textarea"> </el-input>
-            </el-col>
-          </el-row>
-        </template>
-
-        <template #contact>
-          <el-row :gutter="10" style="width: 100%">
-            <el-col :span="8">
-              <el-input v-model="formData.data.aa" placeholder="联系人">
-              </el-input>
-            </el-col>
-            <el-col :span="16">
-              <el-input v-model="formData.data.aa" placeholder="联系电话">
-              </el-input>
-            </el-col>
-          </el-row>
-        </template>
 
-        <template #fileSlot>
-          <div>
-            <el-upload
-              v-model:fileList="fileList"
-              class="upload-demo"
-              action="https://winfaster.obs.cn-south-1.myhuaweicloud.com"
-              :limit="3"
-              :data="uploadData"
-              :on-preview="handlePreview"
-              :on-remove="handleRemove"
-              :on-success="handleSuccess"
-              :before-upload="handleBeforeUpload"
-              accept=".pdf"
-            >
-              <el-button type="primary">选择</el-button>
-              <template #file>
-                <div>
-                  <div style="margin-top: 15px">
-                    <el-tag
-                      class="ml-2"
-                      type="info"
-                      v-for="(item, index) in fileList"
-                      :key="index"
-                      closable
-                      @close="handleClose(index)"
-                      >{{ item.fileName }}</el-tag
-                    >
-                  </div>
-                </div>
-              </template>
-            </el-upload>
+    <el-dialog title="打印" v-if="openPrint" v-model="openPrint" width="680px" v-loading="loadingPrint">
+      <div id="pdfDom" style="width: 616px">
+        <div style="margin: 16px 8px; border: 1px solid #909399; font-size: 12px !important; color: black">
+          <div style="font-size: 16px; font-weight: 700; text-align: center; padding: 8px">
+            <span>{{ printDetails.corporationName }}</span>
+            <span style="margin-left: 16px">{{ dictDataEcho(printDetails.type, fundsType) }}审批单</span>
           </div>
-        </template>
-      </byForm>
+          <div class="baseRow"></div>
+          <div class="baseRow" style="display: flex">
+            <div class="contentRow" style="width: 80px">请款部门</div>
+            <div class="contentRow" style="width: calc(50% - 80px)">{{ printDetails.deptName }}</div>
+            <div class="contentRow" style="width: 80px">货币</div>
+            <div class="contentRow" style="width: calc(50% - 80px)">{{ dictDataEcho(printDetails.currency, accountCurrency) }}</div>
+          </div>
+          <div class="baseRow" style="display: flex">
+            <div class="contentRow" style="width: 80px">请款时间</div>
+            <div class="contentRow" style="width: calc(50% - 80px)">{{ printDetails.createTime }}</div>
+            <div class="contentRow" style="width: 80px">发票类型</div>
+            <div class="contentRow" style="width: calc(50% - 80px)"></div>
+          </div>
+          <div class="baseRow" style="display: flex" v-if="printDetails.type == '2'">
+            <div class="contentRow" style="width: 80px">预支单</div>
+            <div class="contentRow" style="width: calc(100% - 80px)"></div>
+          </div>
+          <div class="baseRow" style="display: flex">
+            <div class="contentRow" style="width: 80px">请款说明</div>
+            <div class="contentRow" style="width: calc(100% - 80px)">{{ printDetails.paymentRemarks }}</div>
+          </div>
+          <div class="baseRow" style="display: flex">
+            <div class="contentRow" style="width: 80px">凭证</div>
+            <div class="contentRow" style="width: calc(100% - 80px)"></div>
+          </div>
+          <div class="specialRow">
+            <span>请款明细</span>
+          </div>
+          <div v-if="printDetails.accountRequestFundsDetailList && printDetails.accountRequestFundsDetailList.length > 0">
+            <div v-for="item in printDetails.accountRequestFundsDetailList" :key="item.id">
+              <div class="baseRow" style="display: flex">
+                <div class="contentRow" style="width: 25%">费用类型</div>
+                <div class="contentRow" style="width: 25%">关联合同</div>
+                <div class="contentRow" style="width: 25%">款项说明</div>
+                <div class="contentRow" style="width: 25%">请款金额</div>
+              </div>
+              <div class="baseRow" style="display: flex">
+                <div class="contentRow" style="width: 25%">{{ dictDataEcho(item.costType, fundsCostType) }}</div>
+                <div class="contentRow" style="width: 25%"></div>
+                <div class="contentRow" style="width: 25%">{{ item.remarks }}</div>
+                <div class="contentRow" style="width: 25%">{{ item.amount }}</div>
+              </div>
+            </div>
+          </div>
+          <div v-else>
+            <div class="baseRow" style="display: flex">
+              <div class="contentRow" style="width: 25%">费用类型</div>
+              <div class="contentRow" style="width: 25%">关联合同</div>
+              <div class="contentRow" style="width: 25%">款项说明</div>
+              <div class="contentRow" style="width: 25%">请款金额</div>
+            </div>
+            <div class="baseRow" style="display: flex">
+              <div class="contentRow" style="width: 25%"></div>
+              <div class="contentRow" style="width: 25%"></div>
+              <div class="contentRow" style="width: 25%"></div>
+              <div class="contentRow" style="width: 25%"></div>
+            </div>
+          </div>
+          <div class="baseRow" style="display: flex">
+            <div class="contentRow" style="width: 80px">请款总额</div>
+            <div class="contentRow" style="width: calc(50% - 80px)">{{ printDetails.total }}</div>
+            <div class="contentRow" style="width: 80px">单证数量</div>
+            <div class="contentRow" style="width: calc(50% - 80px)">{{ printDetails.quantity }}</div>
+          </div>
+          <!-- <div v-if="printDetails.type == '2'">
+            <div class="baseRow" style="display: flex">
+              <div class="contentRow" style="width: 17%">费用类型</div>
+              <div class="contentRow" style="width: 17%">关联合同</div>
+              <div class="contentRow" style="width: 17%">预支金额</div>
+              <div class="contentRow" style="width: 32%">核销说明</div>
+              <div class="contentRow" style="width: 17%">核销金额</div>
+            </div>
+            <div class="baseRow" style="display: flex">
+              <div class="contentRow" style="width: 17%">AAA</div>
+              <div class="contentRow" style="width: 17%">BBB</div>
+              <div class="contentRow" style="width: 17%">CCC</div>
+              <div class="contentRow" style="width: 32%">DDD</div>
+              <div class="contentRow" style="width: 17%">EEE</div>
+            </div>
+            <div class="baseRow" style="display: flex">
+              <div class="contentRow" style="width: 80px">预支金额</div>
+              <div class="contentRow" style="width: calc(50% - 80px)">GGG</div>
+              <div class="contentRow" style="width: 80px">核销总额</div>
+              <div class="contentRow" style="width: calc(50% - 80px)">HHH</div>
+            </div>
+            <div class="baseRow" style="display: flex">
+              <div class="contentRow" style="width: 80px">差额</div>
+              <div class="contentRow" style="width: calc(50% - 80px)">GGG</div>
+              <div class="contentRow" style="width: 80px">单证数量</div>
+              <div class="contentRow" style="width: calc(50% - 80px)">HHH</div>
+            </div>
+          </div> -->
+          <div class="specialRow">
+            <span>付款明细</span>
+          </div>
+          <div class="baseRow" style="display: flex">
+            <div class="contentRow" style="width: 80px">付款方式</div>
+            <div class="contentRow" style="width: calc(50% - 80px)">{{ dictDataEcho(printDetails.paymentMethod, fundsPaymentMethod) }}</div>
+            <div class="contentRow" style="width: 80px">付款账户</div>
+            <div class="contentRow" style="width: calc(50% - 80px)">{{ printDetails.accountManagementName }}</div>
+          </div>
+          <div class="baseRow" style="display: flex">
+            <div class="contentRow" style="width: 80px">户名</div>
+            <div class="contentRow" style="width: calc(50% - 80px)">{{ printDetails.name }}</div>
+            <div class="contentRow" style="width: 80px">开户银行</div>
+            <div class="contentRow" style="width: calc(50% - 80px)">{{ printDetails.openingBank }}</div>
+          </div>
+          <div class="baseRow" style="display: flex">
+            <div class="contentRow" style="width: 80px">账号</div>
+            <div class="contentRow" style="width: calc(50% - 80px)">{{ printDetails.accountOpening }}</div>
+            <div class="contentRow" style="width: 80px">联行号</div>
+            <div class="contentRow" style="width: calc(50% - 80px)">{{ printDetails.interbankNumber }}</div>
+          </div>
+          <div class="specialRow">
+            <span>审批记录</span>
+          </div>
+          <div class="baseRow" style="display: flex">
+            <div class="contentRow" style="width: 80px">开始</div>
+            <div class="contentRow" style="width: calc(100% - 240px)">AAA</div>
+            <div class="contentRow" style="width: 160px">BBB</div>
+          </div>
+          <div class="baseRow" style="display: flex">
+            <div class="contentRow" style="width: 80px">审核</div>
+            <div class="contentRow" style="width: calc(100% - 240px)">AAA</div>
+            <div class="contentRow" style="width: 160px">BBB</div>
+          </div>
+          <div class="baseRow" style="display: flex">
+            <div class="contentRow" style="width: 80px">结束</div>
+            <div class="contentRow" style="width: calc(100% - 240px)">AAA</div>
+            <div class="contentRow" style="width: 160px">BBB</div>
+          </div>
+        </div>
+      </div>
       <template #footer>
-        <el-button @click="dialogVisible = false" size="large">取 消</el-button>
-        <el-button
-          type="primary"
-          @click="submitForm('byform')"
-          size="large"
-          :loading="submitLoading"
-        >
-          确 定
-        </el-button>
+        <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>
-  
+
 <script setup>
-/* eslint-disable vue/no-unused-components */
-import { ElMessage, ElMessageBox } from "element-plus";
 import byTable from "@/components/byTable/index";
-import byForm from "@/components/byForm/index";
 import useUserStore from "@/store/modules/user";
+import { ref } from "vue";
 
 const loading = ref(false);
-const submitLoading = ref(false);
 const sourceList = ref({
   data: [],
   pagination: {
@@ -152,8 +186,6 @@ const sourceList = ref({
     status: "",
   },
 });
-let modalType = ref("add");
-
 const { proxy } = getCurrentInstance();
 const selectConfig = reactive([
   {
@@ -253,13 +285,7 @@ const config = computed(() => {
         prop: "status",
       },
       render(status) {
-        return status == 10
-          ? "审批中"
-          : status == 20
-          ? "驳回"
-          : status == 30
-          ? "已通过"
-          : "";
+        return status == 10 ? "审批中" : status == 20 ? "驳回" : status == 30 ? "已通过" : "";
       },
     },
     {
@@ -287,29 +313,7 @@ const config = computed(() => {
             },
             el: "button",
             click() {
-              // 弹窗提示是否删除
-              ElMessageBox.confirm(
-                "此操作将永久删除该数据, 是否继续?",
-                "提示",
-                {
-                  confirmButtonText: "确定",
-                  cancelButtonText: "取消",
-                  type: "warning",
-                }
-              ).then(() => {
-                // 删除
-                proxy
-                  .post("/productionProcesses/delete", {
-                    id: row.id,
-                  })
-                  .then((res) => {
-                    ElMessage({
-                      message: "删除成功",
-                      type: "success",
-                    });
-                    getList();
-                  });
-              });
+              clickPrint(row);
             },
           },
         ];
@@ -317,33 +321,17 @@ const config = computed(() => {
     },
   ];
 });
-
-let formData = reactive({
-  data: {},
-});
-const formOption = reactive({
-  inline: true,
-  labelWidth: 100,
-  itemWidth: 100,
-  rules: [],
-});
-const byform = ref(null);
-const formConfig = computed(() => {});
 const getList = async (req) => {
   sourceList.value.pagination = { ...sourceList.value.pagination, ...req };
   loading.value = true;
-  proxy
-    .post("/accountRequestFunds/page", sourceList.value.pagination)
-    .then((message) => {
-      console.log(message);
-      sourceList.value.data = message.rows;
-      sourceList.value.pagination.total = message.total;
-      setTimeout(() => {
-        loading.value = false;
-      }, 200);
-    });
+  proxy.post("/accountRequestFunds/page", sourceList.value.pagination).then((message) => {
+    sourceList.value.data = message.rows;
+    sourceList.value.pagination.total = message.total;
+    setTimeout(() => {
+      loading.value = false;
+    }, 200);
+  });
 };
-
 const openModal = () => {
   proxy.$router.replace({
     path: "/platform_manage/process/processApproval",
@@ -352,74 +340,13 @@ const openModal = () => {
     },
   });
 };
-
-const submitForm = () => {
-  byform.value.handleSubmit((valid) => {
-    formData.data.fileList = fileList.value;
-    submitLoading.value = true;
-    proxy.post("/productionProcesses/" + modalType.value, formData.data).then(
-      (res) => {
-        ElMessage({
-          message: modalType.value == "add" ? "添加成功" : "编辑成功",
-          type: "success",
-        });
-        fileList.value = [];
-        dialogVisible.value = false;
-        submitLoading.value = false;
-        getList();
-      },
-      (err) => {
-        console.log(err, "aswwwww");
-        submitLoading.value = false;
-      }
-    );
-  });
-};
-
-const getDtl = (row) => {
-  modalType.value = "edit";
-  proxy.post("/productionProcesses/detail", { id: row.id }).then((res) => {
-    formData.data = res;
-    dialogVisible.value = true;
-  });
-};
-// 获取用户信息并赋默认值
 const userInfo = useUserStore().user;
-// const tenantId = "@福建宏星！#￥%……&*（）";
 const tenantId = userInfo.tenantId;
-const companyData = ref([]);
-const accountData = ref([]);
-const deptTreeData = ref([]);
 const fundsType = ref([]);
+const accountCurrency = ref([]);
 const fundsCostType = ref([]);
 const fundsPaymentMethod = ref([]);
-const currencyType = ref([]);
-
 const getDictData = () => {
-  // 获取归属公司数据
-  proxy
-    .post("/corporation/page", { pageNum: 1, pageSize: 9999 })
-    .then((res) => {
-      companyData.value = res.rows;
-    });
-  // 账户数据
-  proxy
-    .post("/accountManagement/page", { pageNum: 1, pageSize: 9999 })
-    .then((res) => {
-      accountData.value = res.rows;
-    });
-
-  // 部门树
-  // proxy
-  //   .get("/tenantDept/list", {
-  //     pageNum: 1,
-  //     pageSize: 9999,
-  //     tenantId: userInfo.tenantId,
-  //   })
-  //   .then((message) => {
-  //     recursive(message.data);
-  //     deptTreeData.value = proxy.handleTree(message.data, "corporationId");
-  //   });
   // 请款类型数据
   proxy
     .post("/dictTenantData/page", {
@@ -435,47 +362,78 @@ const getDictData = () => {
         value: x.dictKey,
       }));
     });
-  // 请款费用类型数据
+  // 请款付款方式数据
   proxy
     .post("/dictTenantData/page", {
       pageNum: 1,
       pageSize: 999,
       tenantId: tenantId,
-      dictCode: "funds_cost_type",
+      dictCode: "funds_payment_method",
     })
     .then((res) => {
-      fundsCostType.value = res.rows;
+      fundsPaymentMethod.value = res.rows;
     });
-  // 请款付款方式数据
+  // 货币
   proxy
     .post("/dictTenantData/page", {
       pageNum: 1,
       pageSize: 999,
-      tenantId: tenantId,
-      dictCode: "funds_payment_method",
+      dictCode: "account_currency",
+      tenantId: useUserStore().user.tenantId,
     })
     .then((res) => {
-      fundsPaymentMethod.value = res.rows;
+      accountCurrency.value = res.rows;
     });
-
-  // 币种数据
   proxy
     .post("/dictTenantData/page", {
       pageNum: 1,
       pageSize: 999,
-      tenantId: tenantId,
-      dictCode: "account_currency",
+      dictCode: "funds_cost_type",
+      tenantId: useUserStore().user.tenantId,
     })
     .then((res) => {
-      currencyType.value = res.rows;
+      fundsCostType.value = res.rows;
     });
 };
-getList();
 getDictData();
+getList();
+const openPrint = ref(false);
+const loadingPrint = ref(false);
+const printDetails = ref({});
+const clickPrint = (row) => {
+  loadingPrint.value = true;
+  openPrint.value = true;
+  proxy.post("/accountRequestFunds/detail", { id: row.id }).then((res) => {
+    printDetails.value = res;
+  });
+  // proxy.post("/flowExample/getApprovalRecord", { id: row.id }).then((res) => {
+  //   console.log(res);
+  // });
+};
+const clickDownload = () => {
+  proxy.getPdf("请款PDF文件");
+};
 </script>
-  
+
 <style lang="scss" scoped>
 .tenant {
   padding: 20px;
 }
-</style>
+.baseRow {
+  min-height: 24px;
+  border-top: 1px solid #909399;
+}
+.contentRow {
+  border-right: 1px solid #909399;
+  line-height: 24px;
+  padding-left: 4px;
+}
+.specialRow {
+  font-size: 14px;
+  font-weight: 700;
+  text-align: center;
+  border-top: 1px solid #909399;
+  height: 30px;
+  line-height: 30px;
+}
+</style>