fix:采购付款回票模块完善

src/api/purchase/orderPay/index.ts

@@ -9,6 +9,11 @@ export const httpList = (data: object): any => {
   return http.request("post", `${yewuApi}paymentlist`, { data });
 };
 
+//对账付款详情
+export const httpInfo = (data: object): any => {
+  return http.request("post", `${yewuApi}dzinfo`, { data });
+};
+
 //对账单申请付款添加
 export const httpAdd = (data: object): any => {
   return http.request("post", `${yewuApi}stageadd`, { data });
@@ -21,7 +26,7 @@ export const httpDelete = (data: object): any => {
 
 //对账单申请付款审核状态
 export const httpStatus = (data: object): any => {
-  return http.request("post", `${yewuApi}paystatus`, { data });
+  return http.request("post", `${yewuApi}stagestatus`, { data });
 };
 
 export const httpUpload = (data: object): any => {

src/api/purchase/orderRecord/index.ts

@@ -8,6 +8,11 @@ export const httpList = (data: object): any => {
   return http.request("post", `${yewuApi}paylist`, { data });
 };
 
+//对账单详情
+export const httpInfo = (data: object): any => {
+  return http.request("post", `${yewuApi}payinfo`, { data });
+};
+
 //采购单列表
 export const httpCgdList = (data: object = {}): any => {
   return http.request("post", `${yewuApi}cgdlist`, { data });

src/api/purchase/ticketReturn/index.ts

@@ -18,3 +18,8 @@ export const httpAdd = (data: object): any => {
 export const httpStatus = (data: object): any => {
   return http.request("post", `${yewuApi}/invstatus`, { data });
 };
+
+//发票回票详情
+export const httpInfo = (data: object): any => {
+  return http.request("post", `${yewuApi}/hpinfo`, { data });
+};

src/views/purchase/inputInvoice/config/content.config.ts

@@ -34,7 +34,7 @@ const columns = [
     label: "录入方式",
     prop: "invType",
     formatter: ({ invType }) =>
-      invType_options.find(item => item.value === invType).label
+      invType_options.find(item => item.value === invType)?.label
   },
   {
     label: "录入人",
@@ -50,19 +50,18 @@ const columns = [
           size: props.size
         },
         {
-          default: () => status_options.find(s => row.status === s.value).label
+          default: () => status_options.find(s => row.status === s.value)?.label
         }
       )
   },
   {
     label: "开票日期",
     prop: "open_time",
-    formatter: ({ createTime }) =>
-      dayjs(createTime).format("YYYY-MM-DD HH:mm:ss")
+    formatter: ({ open_time }) => dayjs(open_time).format("YYYY-MM-DD HH:mm:ss")
   },
   {
     label: "创建时间",
-    prop: "updatetime",
+    prop: "createTime",
     formatter: ({ createTime }) =>
       dayjs(createTime).format("YYYY-MM-DD HH:mm:ss")
   },

src/views/purchase/inputInvoice/config/modal.config.ts

@@ -1,4 +1,4 @@
-import { ModalConfig } from "../../../../components/PageModal/src/types";
+import { ModalConfig } from "/@/components/PageModal/src/types";
 
 const modalConfig: ModalConfig = {
   title: "客户",

src/views/purchase/inputInvoice/invoice-dialog.vue

@@ -245,20 +245,20 @@ defineExpose({
             <li>注</li>
           </ul>
         </el-col>
-        <el-col :span="7" />
+        <el-col :span="7">{{ invoiceData.remarks }}</el-col>
       </el-row>
       <el-row class="last-row">
         <el-col :span="6" class="no-border">
           <span>收款人：</span>
-          <span class="content">XXX公司</span>
+          <span class="content">{{ invoiceData.receiver }}</span>
         </el-col>
         <el-col :span="6" class="no-border">
           <span>复核：</span>
-          <span class="content">XXX</span>
+          <span class="content">{{ invoiceData.reivewer }}</span>
         </el-col>
         <el-col :span="6" class="no-border">
           <span>开票人：</span>
-          <span class="content">XXX</span>
+          <span class="content">{{ invoiceData.issuer }}</span>
         </el-col>
         <el-col :span="5" class="no-border">
           <span>销售方：（章）</span>

src/views/purchase/orderRecord/components/Initiate-audit/index.vue → src/views/purchase/orderRecord/components/approval-process/Initiate-audit.vue

@@ -29,7 +29,6 @@ async function resquestAudit() {
 </script>
 
 <template>
-  <h1 text-xl py-2 font-bold>发起审核流程</h1>
   <div flex justify-end w-full>
     <el-button type="primary" @click="resquestAudit">发起审核流程</el-button>
   </div>

src/views/purchase/orderRecord/components/business-review/index.vue → src/views/purchase/orderRecord/components/approval-process/business-review.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { ElForm, FormRules } from "element-plus";
-import { computed, reactive, ref, watch } from "vue";
+import { reactive, ref, watch } from "vue";
 import { useRouter } from "vue-router";
 import { httpStatus } from "/@/api/purchase/orderRecord";
 import { useResponseHandle } from "/@/hooks";
@@ -14,12 +14,6 @@ const responseHandle = useResponseHandle();
 const formRef = ref<InstanceType<typeof ElForm>>(null);
 const { push } = useRouter();
 
-const isFormDisabled = computed(
-  () =>
-    Object.keys(props.statementDetail).length > 0 &&
-    Number(props.statementDetail.status) > 1
-);
-
 const rules = reactive<FormRules>({
   remark: [{ required: true, trigger: "change", message: "请输入备注" }],
   status: [{ required: true, trigger: "change", message: "请输入审核状态" }]
@@ -57,23 +51,9 @@ watch(
     deep: true
   }
 );
-
-watch(
-  () => props.statementDetail,
-  newVal => {
-    const { status, remark } = newVal;
-
-    if (!isFormDisabled.value) return;
-
-    formData.status = status;
-    formData.remark = remark;
-  }
-);
 </script>
 
 <template>
-  <h1 text-xl py-2 font-bold>业务审核</h1>
-
   <el-form
     inline
     :rules="rules"

src/views/purchase/orderRecord/components/financial-audit/index.vue → src/views/purchase/orderRecord/components/approval-process/financial-audit.vue

@@ -72,8 +72,6 @@ watch(
 </script>
 
 <template>
-  <h1 text-xl py-2 font-bold>财务审核</h1>
-
   <el-form
     inline
     :rules="rules"

src/views/purchase/orderRecord/components/new-bill/purchase-order.vue → src/views/purchase/orderRecord/components/basic-purchase.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { computed, onMounted, watch } from "vue";
-import { httpCgdList } from "/@/api/purchase/orderRecord";
-import { useResponseHandle } from "/@/hooks";
+import { ElMessage } from "element-plus";
+import { computed } from "vue";
+import { send_status_list } from "/@/utils/status";
 
 const emit = defineEmits([
   "addBtnClick",
@@ -12,68 +12,48 @@ const emit = defineEmits([
 
 const props = defineProps({
   purchaseOrderList: {
-    type: Array as PropType<Array<any>>,
+    type: Array as PropType<any>,
     required: true
   },
+  readonly: {
+    type: Boolean
+  },
   supplierNo: {
-    type: String
+    type: Number
   },
   companyNo: {
     type: String
-  },
-  isShowButton: {
-    type: Boolean
   }
 });
 
-const responseHandle = useResponseHandle();
+const disabled = computed(() => !props.readonly);
 
 //采购单个数
 const total = computed(() => props.purchaseOrderList.length);
-
-async function requesetSupplierList() {
-  const { supplierNo, companyNo } = props;
-  if (!companyNo || !supplierNo) return;
-
-  const { code, data, message } = await httpCgdList({ supplierNo, companyNo });
-
-  responseHandle({
-    code,
-    message,
-    handler: () => emit("changeSupplieList", data.list)
-  });
-}
-
 function handleDelete(row) {
   emit("delBtnClick", row);
 }
 
-watch(
-  () => [props.companyNo, props.supplierNo],
-  () => {
-    if (!props.companyNo || !props.supplierNo) return;
-    requesetSupplierList();
-  },
-  {
-    deep: true
+function handleAddClick() {
+  const { supplierNo, companyNo } = props;
+
+  if (!supplierNo || !companyNo) {
+    return ElMessage.warning("请选择供应商和业务公司");
   }
-);
 
-onMounted(() => requesetSupplierList());
+  emit("addBtnClick");
+}
 </script>
 
 <template>
   <div flex justify-between w-full mb-1>
     <el-tag type="warning">共计:{{ total }}个订单</el-tag>
-    <div v-if="isShowButton">
-      <el-button type="primary">明细下载</el-button>
-      <el-button type="primary" @click="emit('addBtnClick')"
-        >添加采购单</el-button
-      >
+    <div v-if="disabled">
+      <el-button type="primary" @click="handleAddClick">添加采购单</el-button>
     </div>
   </div>
 
-  <el-table :data="purchaseOrderList">
+  <el-table :data="purchaseOrderList" size="small">
     <el-table-column label="采购单编号" prop="sequenceNo" width="180" />
     <el-table-column label="采购单信息" show-overflow-tooltip>
       <el-table-column label="贷款" show-overflow-tooltip />
@@ -84,11 +64,13 @@ onMounted(() => requesetSupplierList());
       />
       <el-table-column label="联系人" show-overflow-tooltip />
       <el-table-column label="采购员" prop="ownerName" show-overflow-tooltip />
-      <el-table-column
-        label="发货状态"
-        prop="sendStatus"
-        show-overflow-tooltip
-      />
+      <el-table-column label="发货状态" prop="sendStatus" show-overflow-tooltip>
+        <template #default="{ row }">
+          <el-tag>{{
+            send_status_list.find(s => s.value === row.sendStatus)?.label
+          }}</el-tag>
+        </template>
+      </el-table-column>
       <el-table-column label="开票编号" show-overflow-tooltip />
       <el-table-column
         label="开票公司"
@@ -96,7 +78,8 @@ onMounted(() => requesetSupplierList());
         show-overflow-tooltip
       />
     </el-table-column>
-    <el-table-column label="操作" v-if="isShowButton">
+
+    <el-table-column label="操作" v-if="disabled">
       <template #default="{ row }">
         <el-button link type="primary" @click="handleDelete(row)"
           >删除</el-button
@@ -105,8 +88,8 @@ onMounted(() => requesetSupplierList());
     </el-table-column>
   </el-table>
 
-  <div flex gap-1 mt-2>
-    <el-button v-if="isShowButton" type="primary" @click="emit('crateBtnClick')"
+  <div flex gap-1 mt-2 v-if="disabled">
+    <el-button v-if="disabled" type="primary" @click="emit('crateBtnClick')"
       >保存</el-button
     >
   </div>

src/views/purchase/orderRecord/components/new-bill/add-order-modal.vue → src/views/purchase/orderRecord/components/create-statement/add-order-modal.vue

@@ -1,11 +1,20 @@
 <script setup lang="ts">
 import { ElTable } from "element-plus";
-import { onMounted, reactive, ref, unref, nextTick } from "vue";
-import { createGoodType } from "../../utils/good-type";
-import { httpCgdList } from "/@/api/purchase/orderRecord";
+import { reactive, ref, unref, nextTick } from "vue";
+import { goodTypes } from "../../config/configs";
 import { useResponseHandle } from "/@/hooks";
+import { httpCgdList } from "/@/api/purchase/orderRecord";
+import { send_status_list } from "/@/utils/status";
 
 const emit = defineEmits(["saveBtnClick"]);
+const props = defineProps({
+  supplierNo: {
+    type: Number
+  },
+  companyNo: {
+    type: String
+  }
+});
 
 const visible = ref(false);
 const loading = ref(false);
@@ -24,8 +33,12 @@ const pagination = reactive({
 async function handleSearch() {
   loading.value = true;
   const { currentPage: page, pageSize: size } = pagination;
+  const { supplierNo, companyNo } = props;
+
   const { code, data, message } = await httpCgdList({
     ...unref(formData),
+    supplierNo,
+    companyNo,
     page,
     size
   });
@@ -69,19 +82,34 @@ function onDisplay(items) {
   );
 }
 
-onMounted(() => handleSearch());
-
 defineExpose({
   onDisplay
 });
 </script>
 
 <template>
-  <el-dialog v-model="visible" title="选择采购商品" center destroy-on-close>
+  <el-dialog
+    v-model="visible"
+    title="选择采购商品"
+    center
+    destroy-on-close
+    @open="handleSearch"
+  >
     <div flex justify-between>
       <div flex mb-2 gap-2>
         <div flex mb-2 w-400px gap-2>
-          <el-select placeholder="请选择发货状态" />
+          <el-select
+            placeholder="发货状态"
+            v-model="formData.sendStatus"
+            cleable
+          >
+            <el-option
+              v-for="status in send_status_list"
+              :key="status.value"
+              :label="status.label"
+              :value="status.value"
+            />
+          </el-select>
           <el-input placeholder="采购单编号" v-model="formData.sequenceNo">
             <template #append>
               <el-button @click="handleSearch">搜索</el-button>
@@ -125,7 +153,9 @@ defineExpose({
           show-overflow-tooltip
         >
           <template #default="{ row }">
-            <el-tag>{{ row.sendType }}</el-tag>
+            <el-tag>{{
+              send_status_list.find(s => s.value === row.sendStatus)?.label
+            }}</el-tag>
           </template>
         </el-table-column>
         <el-table-column label="开票编号" width="90" />
@@ -150,7 +180,7 @@ defineExpose({
           show-overflow-tooltip
         >
           <template #="{ row }">
-            {{ createGoodType(row.goodType) }}
+            {{ goodTypes.find(t => t.value === row.goodType) }}
           </template>
         </el-table-column>
         <el-table-column

src/views/purchase/orderRecord/components/new-bill/index.vue → src/views/purchase/orderRecord/components/create-statement/index.vue

@@ -1,17 +1,16 @@
 <script setup lang="ts">
-import { computed, onMounted, reactive, ref, unref } from "vue";
-import PurchaseOrder from "./purchase-order.vue";
+import { computed, reactive, ref, unref, watchEffect } from "vue";
+import BasicPurchas from "./../basic-purchase.vue";
 import AddOrderModal from "./add-order-modal.vue";
 import { useResponseHandle } from "/@/hooks";
 import { useRouter } from "vue-router";
 import { ElForm } from "element-plus";
-import { httpAdd, httpList, httpUpadte } from "/@/api/purchase/orderRecord";
-import { rules } from "./rules";
+import { httpAdd, httpUpadte } from "/@/api/purchase/orderRecord";
 import RemoteSelect from "/@/components/RemoteSelect";
 import { httpList as httpSupplierList } from "/@/api/parameter/supplierPay";
 import { httpList as httpCompanylist } from "/@/api/parameter/finance";
+import { rules } from "../../config/configs";
 
-const emit = defineEmits(["changeStatementDetail"]);
 const props = defineProps<{
   payNo?: string;
   statementDetail?: Record<string, string>;
@@ -22,15 +21,11 @@ const isUpdate = computed(() => !!props.payNo);
 const responseHandle = useResponseHandle();
 const addOrderModalRef = ref<InstanceType<typeof AddOrderModal>>(null);
 
-//对账单详情(传入payNo)
-const statementDetail = ref<Record<string, string>>({});
-
-const formTitle = computed(() => {
-  return props.payNo ? "订单对账详情" : "新建订单对账";
-});
-
 //已经审核 禁用表单
-const formDisabled = computed(() => Number(statementDetail.value.status) >= 0);
+const formDisabled = computed(
+  () => Number(props.statementDetail && props.statementDetail.status) >= 0
+);
+//采购单列表
 const purchaseOrderList = ref<Array<any>>([]);
 
 const formRef = ref<InstanceType<typeof ElForm>>(null);
@@ -68,9 +63,10 @@ function handleCreateBill() {
     if (!isVaild) return;
 
     const api = isUpdate.value ? httpUpadte : httpAdd;
+    const { cids } = formData;
 
     const { code, message } = await api({
-      ...formData,
+      cids,
       ...(props.payNo ? { payNo: props.payNo } : {})
     });
 
@@ -88,44 +84,15 @@ function converCids() {
   formData.cids = purchaseOrderList.value.map(p => p.id).join(",");
 }
 
-//如果存在对账单号根据单号获取详情
-async function requestStatementDetail() {
-  const { payNo } = props;
-  if (!payNo || Object.keys(statementDetail.value).length > 0) return;
+//当供货商和业务公司有一个为空时清空列表数据
+watchEffect(() => {
+  const { supplierNo, companyNo } = formData;
 
-  const { data, code, message } = await httpList({ payNo });
-
-  responseHandle({
-    code,
-    message,
-    handler: () => {
-      statementDetail.value = data.list[0];
-      emit("changeStatementDetail", data.list[0]);
-    }
-  });
-}
-
-onMounted(() => requestStatementDetail());
+  if (!supplierNo || !companyNo) purchaseOrderList.value = [];
+});
 </script>
 
 <template>
-  <h1 text-xl py-2 font-bold>{{ formTitle }}</h1>
-
-  <!-- 显示详情详情 -->
-  <div v-if="payNo" mb-5>
-    <el-descriptions :column="2" border>
-      <el-descriptions-item label="业务公司">
-        {{ statementDetail.companyName }}
-      </el-descriptions-item>
-      <el-descriptions-item label="供应商">
-        {{ statementDetail.supplierName }}
-      </el-descriptions-item>
-      <el-descriptions-item label="申请时间">
-        {{ statementDetail.addtime }}
-      </el-descriptions-item>
-    </el-descriptions>
-  </div>
-
   <el-form
     ref="formRef"
     :model="formData"
@@ -157,11 +124,10 @@ onMounted(() => requestStatementDetail());
     </div>
 
     <el-form-item label="采购单信息" prop="cids">
-      <PurchaseOrder
+      <BasicPurchas
         :purchase-order-list="purchaseOrderList"
-        :supplier-no="statementDetail.supplierNo"
-        :company-no="statementDetail.companyNo"
-        :is-show-button="!formDisabled"
+        :supplier-no="formData.supplierNo"
+        :company-no="formData.companyNo"
         @add-btn-click="handleAddPurchaseOrder"
         @del-btn-click="handleDeletepurchaseOrder"
         @crate-btn-click="handleCreateBill"
@@ -172,6 +138,8 @@ onMounted(() => requestStatementDetail());
 
   <AddOrderModal
     ref="addOrderModalRef"
+    :supplier-no="formData.supplierNo"
+    :company-no="formData.companyNo"
     @save-btn-click="handleSavePurchaseOrder"
   />
 </template>

src/views/purchase/orderRecord/components/new-bill/rules.ts

@@ -1,5 +0,0 @@
-export const rules = {
-  cids: { required: true, trigger: "change", message: "请添加采购单信息" },
-  companyNo: { required: true, trigger: "change", message: "请选择业务公司" },
-  supplierNo: { required: true, trigger: "change", message: "请选择供应商" }
-};

src/views/purchase/orderRecord/components/statement-detail/index.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import { ElForm } from "element-plus";
+import BasicPurchas from "./../basic-purchase.vue";
+import StatementDetail from "./statement-detail.vue";
+
+defineProps<{
+  statementDetail?: Record<string, string>;
+}>();
+</script>
+
+<template>
+  <!-- 显示详情详情 -->
+  <div mb-5>
+    <StatementDetail :statement-detail="statementDetail" />
+  </div>
+
+  <el-form ref="formRef">
+    <el-form-item label="采购单信息" prop="cids">
+      <BasicPurchas
+        :purchase-order-list="statementDetail?.cgdlist || []"
+        readonly
+      />
+    </el-form-item>
+  </el-form>
+</template>

src/views/purchase/orderRecord/components/statement-detail/statement-detail.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import { detailcolumns } from "../../config/configs";
+
+defineProps<{
+  statementDetail: Record<string, string>;
+}>();
+</script>
+
+<template>
+  <el-descriptions :column="3" border size="small">
+    <el-descriptions-item
+      v-for="(item, index) in detailcolumns"
+      :label="item.label"
+      :key="index"
+      >{{ statementDetail[item.field] }}</el-descriptions-item
+    >
+  </el-descriptions>
+</template>

src/views/purchase/orderRecord/config/configs.ts

@@ -0,0 +1,126 @@
+export const rules = {
+  cids: { required: true, trigger: "change", message: "请添加采购单信息" },
+  companyNo: { required: true, trigger: "change", message: "请选择业务公司" },
+  supplierNo: { required: true, trigger: "change", message: "请选择供应商" }
+};
+
+export const statusOptions = [
+  {
+    label: "待发起流程",
+    value: "0"
+  },
+  {
+    label: "待采购审核",
+    value: "1"
+  },
+  {
+    label: "待财务审核",
+    value: "2"
+  },
+  {
+    label: "审核成功",
+    value: "3"
+  },
+  {
+    label: "采购驳回",
+    value: "4"
+  },
+  {
+    label: "财务驳回",
+    value: "5"
+  }
+];
+
+export const goodTypes = [
+  {
+    label: "正常商品",
+    value: "1"
+  },
+  {
+    label: "赠品",
+    value: "2"
+  },
+  {
+    label: "样品",
+    value: "3"
+  }
+];
+
+export const detailcolumns = [
+  {
+    field: "payNo",
+    label: "对账单号"
+  },
+  {
+    field: "apply_name",
+    label: "申请人姓名"
+  },
+  {
+    field: "supplierNo",
+    label: "供应商编号"
+  },
+  {
+    field: "supplierName",
+    label: "供应商名称"
+  },
+  {
+    field: "companyNo",
+    label: "业务公司编号"
+  },
+  {
+    field: "companyName",
+    label: "业务公司名称"
+  },
+  {
+    field: "total_fee",
+    label: "对账总额"
+  },
+  {
+    field: "apay_fee",
+    label: "已付款"
+  },
+  {
+    field: "pay_fee",
+    label: "付款中"
+  },
+  {
+    field: "pay_fee",
+    label: "未付款"
+  },
+  {
+    field: "ainv_fee",
+    label: "已开票"
+  },
+  {
+    field: "inv_fee",
+    label: "开票中"
+  },
+  {
+    field: "winv_fee",
+    label: "未开票"
+  },
+  {
+    field: "inv_status",
+    label: "开票状态"
+  },
+  {
+    field: "pay_status",
+    label: "付款状态"
+  },
+  {
+    field: "status",
+    label: "申核状态"
+  },
+  {
+    field: "addtime",
+    label: "开票时间"
+  },
+  {
+    field: "updatetime",
+    label: "更新时间"
+  },
+  {
+    field: "remark",
+    label: "备注"
+  }
+];

src/views/purchase/orderRecord/config/content.config.ts

@@ -4,7 +4,7 @@ import { httpList, httpDel } from "/@/api/purchase/orderRecord";
 import dayjs from "dayjs";
 import { h } from "vue";
 import { ElTag } from "element-plus";
-import { statusOptions } from "./options";
+import { statusOptions } from "./configs";
 
 const columns = [
   {

src/views/purchase/orderRecord/config/options.ts

@@ -1,26 +0,0 @@
-export const statusOptions = [
-  {
-    label: "待发起流程",
-    value: "0"
-  },
-  {
-    label: "待采购审核",
-    value: "1"
-  },
-  {
-    label: "待财务审核",
-    value: "2"
-  },
-  {
-    label: "审核成功",
-    value: "3"
-  },
-  {
-    label: "采购驳回",
-    value: "4"
-  },
-  {
-    label: "财务驳回",
-    value: "5"
-  }
-];

src/views/purchase/orderRecord/config/search.config.ts

@@ -1,5 +1,5 @@
 import { FormConfig } from "/@/components/PageSearch";
-import { statusOptions } from "./options";
+import { statusOptions } from "./configs";
 
 const searchFormConfig: FormConfig = {
   formItems: [

src/views/purchase/orderRecord/detail.vue

@@ -1,53 +1,86 @@
 <script setup lang="ts">
-import { computed, ref } from "vue";
-import NewBill from "./components/new-bill/index.vue";
-import InitiateAudit from "./components/Initiate-audit/index.vue";
-import BusinessReview from "./components/business-review/index.vue";
-import FinancialAudit from "./components/financial-audit/index.vue";
+import { computed, ref, watchEffect } from "vue";
 import { useRoute } from "vue-router";
+import { useResponseHandle } from "/@/hooks";
+import { httpInfo } from "/@/api/purchase/orderRecord";
+import InitiateAudit from "./components/approval-process/Initiate-audit.vue";
+import BusinessReview from "./components/approval-process/business-review.vue";
+import FinancialAudit from "./components/approval-process/financial-audit.vue";
+import CreateStatement from "./components/create-statement/index.vue";
+import StatementDetail from "./components/statement-detail/index.vue";
 
 const { query } = useRoute();
 
 const payNo = computed(() => query.id as string);
+const isCreate = computed(() => !payNo.value);
+const responseHandle = useResponseHandle();
+
+//展开所有折叠面板
+const collapses = ref(["1", "2", "3", "4"]);
+
+//对账单状态
+const status = computed(() => Number(statementDetail.value.status));
 
 //对账单详情
 const statementDetail = ref<Record<string, string>>({});
 
-function changeStatementDetail(value: Record<string, string>) {
-  statementDetail.value = value;
+async function initalStatementDetail() {
+  const { code, message, data } = await httpInfo({
+    payNo: payNo.value
+  });
+
+  responseHandle({
+    code,
+    message,
+    handler: () => (statementDetail.value = data)
+  });
 }
+
+//初始化对账单详情
+watchEffect(() => payNo.value && initalStatementDetail());
 </script>
 
 <template>
   <div class="porde__content" bg-white>
-    <NewBill
-      :pay-no="payNo"
-      :statement-detail="statementDetail"
-      @change-statement-detail="changeStatementDetail"
-    />
-
-    <!-- 状态为0 且不是新增 -->
-    <InitiateAudit
-      v-if="Number(statementDetail.status) === 0 && payNo"
-      :pay-no="payNo"
-    />
-
-    <BusinessReview
-      v-if="Number(statementDetail.status) === 1 && payNo"
-      :statement-detail="statementDetail"
-      :pay-no="payNo"
-    />
-
-    <FinancialAudit
-      v-if="Number(statementDetail.status) === 2 && payNo"
-      :statement-detail="statementDetail"
-      :pay-no="payNo"
-    />
+    <!-- 创建 -->
+    <CreateStatement v-if="isCreate" />
+
+    <!-- 详情 -->
+    <ElTabs v-else>
+      <ElTabPane label="订单对账详情">
+        <ElCollapse v-model="collapses">
+          <ElCollapseItem title="订单对账详情" name="1">
+            <StatementDetail :statement-detail="statementDetail" />
+          </ElCollapseItem>
+
+          <!-- 审批流程 -->
+          <ElCollapseItem name="2" v-if="status === 0" title="发起审核流程">
+            <InitiateAudit :pay-no="payNo" />
+          </ElCollapseItem>
+
+          <ElCollapseItem name="3" v-if="status === 1" title="业务审核">
+            <BusinessReview
+              :statement-detail="statementDetail"
+              :pay-no="payNo"
+            />
+          </ElCollapseItem>
+
+          <ElCollapseItem name="4" v-if="status === 2" title="财务审核">
+            <FinancialAudit
+              :statement-detail="statementDetail"
+              :pay-no="payNo"
+            />
+          </ElCollapseItem>
+        </ElCollapse>
+      </ElTabPane>
+
+      <ElTabPane label="审批记录" />
+    </ElTabs>
   </div>
 </template>
 
 <style lang="scss">
 .porde__content {
-  padding: 30px !important;
+  padding: 20px !important;
 }
 </style>

src/views/purchase/orderRecord/index.vue

@@ -5,15 +5,19 @@ import { useRouter } from "vue-router";
 import contentConfig from "./config/content.config";
 import searchFormConfig from "./config/search.config";
 
-const { pageContentRef, handleSearchClick, handleResetClick } = usePageSearch(
-  ({ timer }: any) => ({
+const searchCallback = ({ timer }: any) => {
+  const [startTime, endTime] = timer;
+  return {
     result: {
-      startTime: timer[0],
-      endTime: timer[1]
+      startTime,
+      endTime
     },
     deleteProps: ["timer"]
-  })
-);
+  };
+};
+
+const { pageContentRef, handleSearchClick, handleResetClick } =
+  usePageSearch(searchCallback);
 
 const { push } = useRouter();
 

src/views/purchase/orderRecord/utils/good-type.ts

@@ -1,10 +0,0 @@
-export function createGoodType(type: "1" | "2" | "3") {
-  switch (type) {
-    case "1":
-      return "正常商品";
-    case "2":
-      return "赠品";
-    default:
-      return "样品";
-  }
-}

src/views/purchase/pordeRGoods/index.vue

@@ -1,3 +0,0 @@
-<template>
-  <div />
-</template>

src/views/purchase/purchPay/component/business-audit/index.vue → src/views/purchase/purchPay/component/approval-process/business-audit.vue

@@ -1,14 +1,10 @@
 <script setup lang="ts">
 import { ElForm } from "element-plus";
-import { useAudit } from "../../hooks/use-audit";
-import { auditProps } from "../../types";
-
-const props = defineProps(auditProps);
+import { useReviewProcess } from "../../hooks/use-review-process";
 
 const emit = defineEmits(["changeStatus"]);
 
-const { handleAudit, formRef, rules, formData } = useAudit(props, {
-  successStatus: "2",
+const { handleAudit, formRef, rules, formData } = useReviewProcess({
   failStatus: "5",
   callback: () => emit("changeStatus", formData.status)
 });

src/views/purchase/purchPay/component/financial-audit/index.vue → src/views/purchase/purchPay/component/approval-process/financial-audit.vue

@@ -1,19 +1,15 @@
 <script setup lang="ts">
 import { ElForm } from "element-plus";
-import { useAudit } from "../../hooks/use-audit";
-import { auditProps } from "../../types";
+import { useReviewProcess } from "../../hooks/use-review-process";
 
 const emit = defineEmits(["changeStatus"]);
-const props = defineProps(auditProps);
 
-const { handleAudit, formRef, formData, rules } = useAudit(props, {
+const { handleAudit, formRef, formData, rules } = useReviewProcess({
   failStatus: "6",
-  successStatus: "3",
   callback: () => emit("changeStatus", formData.status)
 });
 </script>
 <template>
-  <h1 text-xl font-bold py-2>财务审核</h1>
   <el-form ref="formRef" :model="formData" :rules="rules" label-width="100px">
     <div flex justify-between w-full>
       <div flex flex-col style="width: 50%">

src/views/purchase/purchPay/component/Initiate-audit/index.vue → src/views/purchase/purchPay/component/approval-process/initiate-audit.vue

@@ -8,7 +8,6 @@ function handleInitiateAudit() {
 </script>
 
 <template>
-  <h1 text-xl py-2 font-bold>发起审核流程</h1>
   <div flex justify-end w-full>
     <el-button type="primary" @click="handleInitiateAudit"
       >发起审核流程</el-button

src/views/purchase/purchPay/component/payment-receipt/index.vue → src/views/purchase/purchPay/component/approval-process/payment-receipt.vue

@@ -1,17 +1,11 @@
 <script setup lang="ts">
 import { ElForm, ElMessage, UploadProps } from "element-plus";
-import { computed, reactive, ref } from "vue";
+import { reactive, ref } from "vue";
 import { receipt_rules } from "../../config/configs";
 import { httpImageUpload, baseUrl } from "/@/api/other";
 import { useResponseHandle } from "/@/hooks";
 import { useUserStore } from "/@/store/modules/user";
 
-defineProps<{
-  disabled: boolean;
-}>();
-
-console.log(baseUrl);
-
 const emit = defineEmits(["changeStatus"]);
 
 const formData = reactive({
@@ -25,8 +19,6 @@ const formRef = ref<InstanceType<typeof ElForm>>(null);
 const responseHandle = useResponseHandle();
 const userStore = useUserStore();
 
-const imageSrc = computed(() => baseUrl + "/" + formData.return_image);
-
 const onBeforeReturnImageUpload: UploadProps["beforeUpload"] = ({
   type,
   size
@@ -51,20 +43,19 @@ const handleRequeset: UploadProps["httpRequest"] = async ({ file }) => {
   responseHandle({
     message,
     code,
-    handler: () => (formData.return_image = data[0].url)
+    handler: () => (formData.return_image = baseUrl + "/" + data[0].url)
   });
 };
 
 //付款回执 状态为4
-function handlePaymentReceipt() {
-  formRef.value.validate(isValid => {
-    if (isValid) emit("changeStatus", "4", formData);
-  });
-}
+const handlePaymentReceipt = () => {
+  formRef.value.validate(
+    isValid => isValid && emit("changeStatus", "4", formData)
+  );
+};
 </script>
 
 <template>
-  <h1 text-xl font-bold py-2>付款回执</h1>
   <el-form ref="formRef" :model="formData" :rules="receipt_rules">
     <el-form-item label="回执图片" prop="return_image">
       <div>
@@ -74,7 +65,11 @@ function handlePaymentReceipt() {
           :http-request="handleRequeset"
           :show-file-list="false"
         >
-          <img class="avatar" v-if="formData.return_image" :src="imageSrc" />
+          <img
+            class="avatar"
+            v-if="formData.return_image"
+            :src="formData.return_image"
+          />
           <div class="text" v-else>点击上传</div>
         </el-upload>
         <span>大小:小于1M; 尺寸:100*100; 类型:jpg.png.bmp.jpeg</span>
@@ -84,6 +79,7 @@ function handlePaymentReceipt() {
     <el-form-item label="回执时间" prop="return_time">
       <el-date-picker
         type="datetime"
+        value-format="YYYY-MM-DD HH:mm:ss"
         v-model="formData.return_time"
         placeholder="请输入回执时间"
       />

src/views/purchase/purchPay/component/new-payment/index.vue → src/views/purchase/purchPay/component/create-payment/index.vue

@@ -27,8 +27,9 @@ function handleCreate() {
 </script>
 
 <template>
+  <!-- 新建  显示选择的对账列表 -->
   <el-form ref="formRef" :model="formData" :rules="create_rules">
-    <el-form-item label="采购订单" prop="payNo">
+    <el-form-item label="订单对账" prop="payNo">
       <OrderTable
         :paymentList="paymentList"
         @change-payment-detail="changePaymentDetail"

src/views/purchase/purchPay/component/payment-detail/index.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import { detailColumns } from "../../config/configs";
+defineProps<{
+  detail: Record<string, string>;
+}>();
+</script>
+
+<template>
+  <el-descriptions :column="3" border size="small">
+    <el-descriptions-item
+      v-for="(item, index) in detailColumns"
+      :label="item.label"
+      :key="index"
+      >{{ detail[item.field] }}</el-descriptions-item
+    >
+  </el-descriptions>
+</template>

src/views/purchase/purchPay/config/configs.ts

@@ -124,3 +124,62 @@ export const columns = [
     align: "left"
   }
 ];
+
+export const detailColumns = [
+  {
+    field: "payNo",
+    label: "对账申请编号"
+  },
+  {
+    field: "dzNo",
+    label: "付款申请编号"
+  },
+  {
+    field: "apply_name",
+    label: "申请人"
+  },
+  {
+    field: "pay_fee",
+    label: "申请付款额度"
+  },
+  {
+    field: "return_img",
+    label: "付款回执"
+  },
+  {
+    field: "return_time",
+    label: "付款回执时间"
+  },
+  {
+    field: "status",
+    label: "状态"
+  },
+  {
+    field: "pay_apply_name",
+    label: "对账申请人"
+  },
+  {
+    field: "supplierNo",
+    label: "供应商编号"
+  },
+  {
+    field: "supplierName",
+    label: "供应商"
+  },
+  {
+    field: "companyNo",
+    label: "业务公司编号"
+  },
+  {
+    field: "companyName",
+    label: "业务公司"
+  },
+  {
+    field: "total_fee",
+    label: "对账总额"
+  },
+  {
+    field: "remark",
+    label: "备注"
+  }
+];

src/views/purchase/purchPay/config/content.config.ts

@@ -56,7 +56,7 @@ const columns = [
   },
   {
     label: "待付款金额",
-    prop: "pay_fee",
+    prop: "dpay_fee",
     minWidth: 180,
     align: "left"
   },

src/views/purchase/purchPay/detail.vue

@@ -1,31 +1,43 @@
 <script setup lang="ts">
 import { computed, onMounted, ref } from "vue";
-import NewPayment from "./component/new-payment/index.vue";
-import InitiateAudit from "./component/Initiate-audit/index.vue";
-import BusinessAudit from "./component/business-audit/index.vue";
-import FinancialAudit from "./component/financial-audit/index.vue";
-import PaymentReceipt from "./component/payment-receipt/index.vue";
-import { httpStatus, httpAdd } from "/@/api/purchase/orderPay";
-import { httpList } from "/@/api/purchase/orderRecord";
+import InitiateAudit from "./component/approval-process/Initiate-audit.vue";
+import BusinessAudit from "./component/approval-process/business-audit.vue";
+import FinancialAudit from "./component/approval-process/financial-audit.vue";
+import PaymentReceipt from "./component/approval-process/payment-receipt.vue";
+import CreatePayment from "./component/create-payment/index.vue";
+import PaymentDetail from "./component/payment-detail/index.vue";
 import { useShowAudit } from "./hooks/use-show-audit";
 import { useRoute, useRouter } from "vue-router";
 import { useResponseHandle } from "/@/hooks";
 
-const responseHandle = useResponseHandle();
+import {
+  httpStatus,
+  httpAdd,
+  httpList,
+  httpInfo
+} from "/@/api/purchase/orderPay";
+
 const { push } = useRouter();
 const { query } = useRoute();
+const dzNo = computed(() => query.id as string);
+const isCreate = computed(() => !dzNo.value);
+const responseHandle = useResponseHandle();
 
-const payNo = computed(() => query.id as string);
-const isCreate = computed(() => !payNo.value);
+//对账列表
 const paymentList = ref<Array<Record<string, string>>>([]);
-const paymentDetail = ref<Record<string, string>>({});
+
+//付款详情
+const purchPayDetail = ref<Record<string, string>>({});
 const handler = () => push("/purchase/purchPay");
 
-//状态
+//采购付款详情状态
 const status = computed(() =>
-  paymentDetail.value ? Number(paymentDetail.value.status) : 0
+  purchPayDetail.value ? Number(purchPayDetail.value.status) : 0
 );
 
+//展开所有折叠面板
+const collapses = ["0", "1", "2", "3", "4"];
+
 const {
   showInitiateAudit,
   showBusinessAudit,
@@ -33,22 +45,15 @@ const {
   showPaymentReceipt
 } = useShowAudit(status, isCreate);
 
-const paymentTitle = computed(() =>
-  isCreate.value ? "新建采购付款订单" : "采购付款申请详情"
-);
-
-//初始化采购
+//初始化订单对账列表
 async function requestPaymentList() {
-  const { code, message, data } = await httpList({
-    ...(payNo.value ? { payNo: payNo.value } : {})
-  });
+  const { code, message, data } = await httpList({});
 
   responseHandle({
     code,
     message,
     handler: () => {
       paymentList.value = data.list;
-      paymentDetail.value = data.list[0];
     }
   });
 }
@@ -61,7 +66,7 @@ async function requestStatusPayment(
   const { code, message } = await httpStatus({
     status,
     ...otherParam,
-    payNo: payNo.value
+    dzNo: dzNo.value
   });
 
   responseHandle({
@@ -82,52 +87,83 @@ async function requesetCreatePayment(data: Record<string, string>) {
   });
 }
 
-onMounted(() => requestPaymentList());
+//请求采购付款详情
+async function requesetPaymentDetail() {
+  const { message, code, data } = await httpInfo({
+    DzNo: dzNo.value
+  });
+
+  responseHandle({
+    message,
+    code,
+    handler: () => (purchPayDetail.value = data)
+  });
+}
+
+//创建选择订单对账列表 详情查询付款单详情 查询采购列表
+async function initalData() {
+  if (isCreate.value) return requestPaymentList();
+  //拉取详情
+  requesetPaymentDetail();
+}
+
+//初始化数据
+onMounted(() => initalData());
 </script>
 
 <template>
   <div class="pay__content" bg-white>
-    <h1 text-xl font-bold py-2>{{ paymentTitle }}</h1>
     <!-- 创建采购付款订单 -->
-    <NewPayment
-      :paymentList="paymentList"
-      :readonly="isCreate"
-      @create-payment="requesetCreatePayment"
-    />
-
-    <!-- 发起审核 状态1 -->
-    <InitiateAudit
-      v-if="showInitiateAudit"
-      @change-status="requestStatusPayment"
-    />
-
-    <!-- 业务审核 状态2 -->
-    <BusinessAudit
-      v-if="showBusinessAudit"
-      :disabled="status > 1"
-      :detail="paymentDetail"
-      @change-status="requestStatusPayment"
-    />
-
-    <!-- 财务审核 状态3 -->
-    <FinancialAudit
-      v-if="showFinancialAudit"
-      :disabled="status > 2"
-      :detail="paymentDetail"
-      @change-status="requestStatusPayment"
-    />
-
-    <!-- 付款回执 状态4 -->
-    <PaymentReceipt
-      v-if="showPaymentReceipt"
-      :disabled="status > 3"
-      @change-status="requestStatusPayment"
-    />
+    <template v-if="isCreate">
+      <h1 text-xl font-bold py-2>新建采购付款申请</h1>
+      <CreatePayment
+        v-if="isCreate"
+        :paymentList="paymentList"
+        :readonly="isCreate"
+        @create-payment="requesetCreatePayment"
+      />
+    </template>
+
+    <!-- 采购付款订单详情 -->
+    <ElTabs v-else>
+      <ElTabPane label="采购付款申请详情">
+        <ElCollapse v-model="collapses">
+          <!-- 详情 -->
+          <ElCollapseItem title="采购付款申请详情" name="0">
+            <PaymentDetail :detail="purchPayDetail" />
+          </ElCollapseItem>
+
+          <!-- 审核 -->
+          <ElCollapseItem
+            name="1"
+            title="发起审核流程"
+            v-if="showInitiateAudit"
+          >
+            <InitiateAudit @change-status="requestStatusPayment" />
+          </ElCollapseItem>
+
+          <ElCollapseItem name="2" title="业务审核" v-if="showBusinessAudit">
+            <BusinessAudit @change-status="requestStatusPayment" />
+          </ElCollapseItem>
+
+          <ElCollapseItem name="3" title="财务审核" v-if="showFinancialAudit">
+            <FinancialAudit @change-status="requestStatusPayment" />
+          </ElCollapseItem>
+
+          <ElCollapseItem title="付款回执" name="4" v-if="showPaymentReceipt">
+            <PaymentReceipt @change-status="requestStatusPayment" />
+          </ElCollapseItem>
+        </ElCollapse>
+      </ElTabPane>
+
+      <!-- 审批记录 -->
+      <ElTabPane label="审批记录" />
+    </ElTabs>
   </div>
 </template>
 
 <style lang="scss" scoped>
 .pay__content {
-  padding: 30px !important;
+  padding: 10px !important;
 }
 </style>

src/views/purchase/purchPay/hooks/use-audit.ts

@@ -1,61 +0,0 @@
-import { ElForm, FormRules } from "element-plus";
-import { reactive, ref, watch } from "vue";
-import { AuditProps } from "../types";
-
-type Config = {
-  failStatus: string;
-  successStatus: string;
-  callback: () => void;
-};
-
-export function useAudit(
-  props: AuditProps,
-  { failStatus, successStatus, callback }: Config
-) {
-  const formRef = ref<InstanceType<typeof ElForm>>(null);
-
-  let status = "";
-  const remark = props.detail ? props.detail.remark : "";
-
-  if (props.detail) {
-    const _status = Number(props.detail.status);
-
-    if (_status !== Number(successStatus) && _status !== Number(failStatus))
-      status = successStatus;
-    else status = String(_status);
-  }
-
-  const formData = reactive({
-    status,
-    remark
-  });
-
-  const rules = reactive<FormRules>({
-    status: [{ required: true, trigger: "change", message: "请选择审核状态" }],
-    remark: [{ required: false, trigger: "change", message: "请选择审核状态" }]
-  });
-
-  function handleAudit() {
-    formRef.value.validate(isValid => {
-      if (isValid) callback();
-    });
-  }
-
-  watch(
-    () => formData,
-    () => {
-      console.log(formData.status === failStatus);
-      rules.remark[0].required = formData.status === failStatus;
-    },
-    {
-      deep: true
-    }
-  );
-
-  return {
-    rules,
-    formRef,
-    formData,
-    handleAudit
-  };
-}

src/views/purchase/purchPay/hooks/use-review-process.ts

@@ -0,0 +1,41 @@
+import { ElForm, FormRules } from "element-plus";
+import { reactive, ref, watchEffect } from "vue";
+
+export function useReviewProcess({
+  callback,
+  failStatus
+}: {
+  callback: () => void;
+  failStatus: string;
+}) {
+  const formRef = ref<InstanceType<typeof ElForm>>(null);
+
+  const formData = reactive({
+    status: "",
+    remark: ""
+  });
+
+  const rules = reactive<FormRules>({
+    status: [{ required: true, trigger: "change", message: "请选择审核状态" }],
+    remark: [{ required: false, trigger: "change", message: "请选择审核状态" }]
+  });
+
+  function handleAudit() {
+    formRef.value.validate(isValid => {
+      if (isValid) callback();
+    });
+  }
+
+  //不通过时备注必填
+  watchEffect(() => {
+    const { status } = formData;
+    rules.remark[0].required = status === failStatus;
+  });
+
+  return {
+    rules,
+    formRef,
+    formData,
+    handleAudit
+  };
+}

src/views/purchase/purchPay/index.vue

@@ -17,7 +17,7 @@ function handlePreview(item) {
   push({
     path: "/purchase/purchPayDetail",
     query: {
-      id: item.payNo
+      id: item.dzNo
     }
   });
 }

src/views/purchase/purchPay/types.ts

@@ -1,10 +0,0 @@
-import { PropType, ExtractPropTypes } from "vue";
-
-export const auditProps = {
-  detail: {
-    type: Object as PropType<Record<string, string>>,
-    default: () => ({})
-  }
-};
-
-export type AuditProps = ExtractPropTypes<typeof auditProps>;

src/views/purchase/ticketReturn/components/approval-process/financial-audit.vue

@@ -0,0 +1,57 @@
+<script setup lang="ts">
+import { ElForm, FormRules } from "element-plus";
+import { reactive, ref, watchEffect } from "vue";
+
+const emit = defineEmits(["changeStatus"]);
+const formRef = ref<InstanceType<typeof ElForm>>(null);
+
+const rules = reactive<FormRules>({
+  remark: [{ required: true, trigger: "change", message: "请输入备注" }],
+  status: [{ required: true, trigger: "change", message: "请输入审核状态" }]
+});
+
+const formData = reactive({
+  status: "",
+  remark: ""
+});
+
+const handleChangeStatus = () =>
+  formRef.value.validate(isValid => isValid && emit("changeStatus", formData));
+
+watchEffect(() => (rules.remark[0].required = formData.status === "11"));
+</script>
+
+<template>
+  <el-form
+    inline
+    :rules="rules"
+    :model="formData"
+    ref="formRef"
+    label-width="100px"
+    flex
+    justify-between
+  >
+    <div flex flex-col style="width: 50%">
+      <el-form-item label="审核状态" prop="status">
+        <el-select placeholder="请选择审核状态" v-model="formData.status">
+          <el-option value="6" label="通过" />
+          <el-option value="11" label="不通过" />
+        </el-select>
+      </el-form-item>
+
+      <el-form-item label="备注" prop="remark">
+        <el-input
+          type="textarea"
+          :maxlength="2000"
+          :rows="5"
+          placeholder="请输入备注"
+          v-model="formData.remark"
+        />
+      </el-form-item>
+    </div>
+
+    <el-button type="primary" @click="handleChangeStatus"
+      >提交审核结果</el-button
+    >
+  </el-form>
+</template>

src/views/purchase/ticketReturn/components/create-ticket-dialog.vue

@@ -34,8 +34,6 @@ const scanInputValue = ref("");
 const rules = ref({ ...ticketAddRules });
 const userStore = useUserStore();
 
-const imageUrl = computed(() => baseUrl + "/" + formData.value.inv_img);
-
 //图片上传前判断类型大小尺寸
 const onBeforeReturnImageUpload: UploadProps["beforeUpload"] = ({
   type,
@@ -111,7 +109,7 @@ const handleRequeset: UploadProps["httpRequest"] = async ({ file }) => {
     code,
     handler: () => {
       const { url, name } = data[0];
-      formData.value.inv_img = url;
+      formData.value.inv_img = baseUrl + "/" + url;
       formData.value.invName = name;
     }
   });
@@ -137,6 +135,7 @@ defineExpose({
 <template>
   <el-dialog
     v-model="visible"
+    custom-class="ticket__dialog"
     title="添加发票"
     center
     destroy-on-close
@@ -165,7 +164,18 @@ defineExpose({
         :prop="item.prop"
         :key="index"
       >
-        <template v-if="item.prop === 'inv_img'">
+        <template v-if="item.prop === 'invType'">
+          <el-select v-model="formData[item.prop]" placeholder="请选择发票类型">
+            <el-option
+              v-for="(type, index) in item.options"
+              :label="type.label"
+              :value="type.value"
+              :key="index"
+            />
+          </el-select>
+        </template>
+
+        <template v-else-if="item.prop === 'inv_img'">
           <div>
             <el-upload
               class="upload"
@@ -173,7 +183,11 @@ defineExpose({
               :http-request="handleRequeset"
               :show-file-list="false"
             >
-              <img class="avatar" :src="imageUrl" v-if="formData[item.prop]" />
+              <img
+                class="avatar"
+                :src="formData[item.prop]"
+                v-if="formData[item.prop]"
+              />
               <div class="text" v-else>点击上传</div>
             </el-upload>
             <span>大小:小于1M; 尺寸:100*100; 类型:jpg.png.bmp.jpeg</span>
@@ -201,7 +215,7 @@ defineExpose({
   </el-dialog>
 </template>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .upload {
   width: 178px;
   height: 178px;

src/views/purchase/ticketReturn/components/payment-table.vue

@@ -32,6 +32,7 @@ onMounted(() => requestPurchaseList());
     v-loading="loading"
     ref="tableRef"
     row-key="id"
+    size="small"
     :data="purchaseList"
   >
     <el-table-column

src/views/purchase/ticketReturn/components/ticket-detail/index.vue

@@ -0,0 +1,47 @@
+<script setup lang="ts">
+// import dayjs from "dayjs";
+import { status_options, detailColumns, inv_type } from "../../config/configs";
+import { inv_type_list } from "/@/utils/status";
+
+defineProps<{
+  invDetail: Record<string, string>;
+}>();
+</script>
+
+<template>
+  <el-descriptions :column="3" border size="small">
+    <el-descriptions-item
+      v-for="(item, index) in detailColumns"
+      :label="item.label"
+      :key="index"
+    >
+      <template v-if="item.field === 'invType'">
+        <el-tag>{{
+          inv_type.find(t => t.value === invDetail.invType)?.label
+        }}</el-tag>
+      </template>
+
+      <template v-else-if="item.field === 'invoiceType'">
+        <el-tag>{{
+          inv_type_list.find(t => t.value === invDetail.invoiceType)?.label
+        }}</el-tag>
+      </template>
+
+      <template v-else-if="item.field === 'status'">
+        <el-tag>{{
+          status_options.find(s => s.value === invDetail.status)?.label
+        }}</el-tag>
+      </template>
+
+      <template v-else-if="item.field === 'inv_img'">
+        <el-image
+          style="height: 50px"
+          :src="invDetail.inv_img"
+          :preview-src-list="[invDetail.inv_img]"
+        />
+      </template>
+
+      <span v-else>{{ invDetail[item.field] }}</span>
+    </el-descriptions-item>
+  </el-descriptions>
+</template>

src/views/purchase/ticketReturn/config/configs.ts

@@ -1,4 +1,5 @@
 import { FormRules } from "element-plus";
+import { inv_type_list } from "/@/utils/status";
 
 export const purchase_columns = [
   {
@@ -89,7 +90,8 @@ export const ticketFormItems = {
   "1": [
     {
       label: "发票类型",
-      prop: "invName"
+      prop: "invType",
+      options: inv_type_list
     },
     {
       label: "发票代码",
@@ -199,7 +201,11 @@ export const status_options = [
     value: "3"
   },
   {
-    label: "认证成功待确认完成",
+    label: "待认证",
+    value: "6"
+  },
+  {
+    label: "认证成功待确认",
     value: "7"
   },
   {
@@ -225,10 +231,25 @@ export const status_options = [
 ];
 
 export const process_rules = {
-  remark: [{ required: false, message: "请输入备注", trigger: "change" }],
+  remark: [{ required: true, message: "请输入备注", trigger: "change" }],
   status: [{ required: true, message: "请选择状态", trigger: "change" }]
 };
 
+export const inv_type = [
+  {
+    label: "手工开票",
+    value: "1"
+  },
+  {
+    label: "ocr识别",
+    value: "2"
+  },
+  {
+    label: "金税",
+    value: "3"
+  }
+];
+
 //审核流程映射
 export const reviewProcessMap = [
   {
@@ -240,11 +261,106 @@ export const reviewProcessMap = [
     }
   },
   {
-    title: "待认证",
+    title: "认证",
     showStatus: "6",
     reviewOptions: {
       failStatus: "12",
       successStatus: "7"
     }
+  },
+  {
+    title: "确认",
+    showStatus: "7",
+    reviewOptions: {
+      failStatus: "10",
+      successStatus: "8"
+    }
+  }
+];
+
+export const detailColumns = [
+  {
+    field: "payNo",
+    label: "对账编号"
+  },
+  {
+    field: "hpNo",
+    label: "回票申请编号"
+  },
+  {
+    field: "apply_name",
+    label: "申请人名称"
+  },
+  {
+    field: "invType",
+    label: "发票申请类型"
+  },
+  {
+    field: "invoiceType",
+    label: "发票类型"
+  },
+  {
+    field: "invName",
+    label: "发票名称"
+  },
+  {
+    field: "invName",
+    label: "发票名称"
+  },
+  {
+    field: "inv_img",
+    label: "发票图片"
+  },
+  {
+    field: "inv_fee",
+    label: "发票金额"
+  },
+  {
+    field: "status",
+    label: "状态"
+  },
+  {
+    field: "open_time",
+    label: "开票时间"
+  },
+  {
+    field: "invoiceNumber",
+    label: "发票号码"
+  },
+  {
+    field: "invoiceCode",
+    label: "发票代码"
+  },
+  {
+    field: "checkNumber",
+    label: "校验码"
+  },
+  {
+    field: "pay_apply_id",
+    label: "对账申请人"
+  },
+  {
+    field: "pay_apply_name",
+    label: "对账申请人"
+  },
+  {
+    field: "supplierNo",
+    label: "供应商编号"
+  },
+  {
+    field: "supplierName",
+    label: "供应商名称"
+  },
+  {
+    field: "companyNo",
+    label: "业务企业编号"
+  },
+  {
+    field: "companyName",
+    label: "业务企业名称"
+  },
+  {
+    field: "total_fee",
+    label: "对账申请总额"
   }
 ];

src/views/purchase/ticketReturn/config/content.config.ts

@@ -5,6 +5,7 @@ import dayjs from "dayjs";
 import { h } from "vue";
 import { ElImage, ElTag } from "element-plus";
 import { status_options } from "./configs";
+import { inv_type_list } from "/@/utils/status";
 
 const columns = [
   {
@@ -30,18 +31,25 @@ const columns = [
   },
   {
     label: "申请人名称",
-    prop: "apply_name",
-    width: 120
+    prop: "apply_name"
   },
   {
     label: "发票类型",
     prop: "invType",
-    width: 120
+    cellRenderer: ({ row, props }) =>
+      h(
+        ElTag,
+        {
+          size: props.size
+        },
+        {
+          default: () => inv_type_list.find(s => row.invType === s.value)?.label
+        }
+      )
   },
   {
     label: "状态",
     prop: "status",
-    width: 120,
     cellRenderer: ({ row, props }) =>
       h(
         ElTag,
@@ -49,14 +57,10 @@ const columns = [
           size: props.size
         },
         {
-          default: () => status_options.find(s => row.status === s.value).label
+          default: () => status_options.find(s => row.status === s.value)?.label
         }
       )
   },
-  {
-    label: "联系人",
-    prop: "contector"
-  },
   {
     label: "发票图片",
     prop: "inv_img",
@@ -68,24 +72,16 @@ const columns = [
         previewTeleported: true
       })
   },
-  {
-    label: "进项设置",
-    prop: "input_ticket",
-    width: 100,
-    cellRenderer: ({ row }) =>
-      String(row.input_ticket) === "1" ? "金税" : "人工"
-  },
-  {
-    label: "销项设置",
-    prop: "out_ticket",
-    width: 100,
-    cellRenderer: ({ row }) =>
-      String(row.out_ticket) === "1" ? "金税" : "人工"
-  },
   {
     label: "开票时间",
     prop: "open_time",
-    width: 150,
+    width: 180,
+    formatter: ({ open_time }) => dayjs(open_time).format("YYYY-MM-DD HH:mm:ss")
+  },
+  {
+    label: "创建时间",
+    prop: "createTime",
+    width: 180,
     formatter: ({ createTime }) =>
       dayjs(createTime).format("YYYY-MM-DD HH:mm:ss")
   },

src/views/purchase/ticketReturn/config/search.config.ts

@@ -1,3 +1,4 @@
+import { status_options } from "./configs";
 import { FormConfig } from "/@/components/PageSearch";
 
 const searchFormConfig: FormConfig = {
@@ -5,7 +6,8 @@ const searchFormConfig: FormConfig = {
     {
       field: "status",
       type: "select",
-      placeholder: "审核状态"
+      placeholder: "审核状态",
+      options: status_options
     },
     {
       field: "timer",

src/views/purchase/ticketReturn/detail.vue

@@ -1,131 +1,99 @@
 <script setup lang="ts">
-import { computed, onMounted, reactive, ref, watch } from "vue";
-import { useRoute } from "vue-router";
-import { httpList, httpStatus } from "/@/api/purchase/ticketReturn";
+import { computed, onMounted, ref, watchEffect } from "vue";
+import { useRoute, useRouter } from "vue-router";
+import { httpStatus, httpInfo } from "/@/api/purchase/ticketReturn";
 import { useResponseHandle } from "/@/hooks";
-import { reviewProcessMap, process_rules } from "./config/configs";
-import { ElForm } from "element-plus";
 
-/**
- * TODO:根据传入的id查询详情显示 审批
- */
+import { reviewProcessMap } from "./config/configs";
+
+import TicketDetail from "./components/ticket-detail/index.vue";
+import FinancialAudit from "./components/approval-process/financial-audit.vue";
 
 const { query } = useRoute();
+const { push } = useRouter();
 const hpNo = computed(() => query.id);
-const invDetail = ref<Record<string, string>>({});
+const collapses = ref(["0", "1"]);
+const currentProcess = ref<Partial<typeof reviewProcessMap[0]> | null>(null);
+const invDetail = ref<Record<string, string> | null>(null);
 const responseHandle = useResponseHandle();
-const formRef = ref<InstanceType<typeof ElForm>>(null);
-
-const currentProcess = ref(reviewProcessMap.find(p => p.showStatus === "3"));
 
-const rules = reactive({ ...process_rules });
-
-const formData = reactive<Record<string, string>>({
-  status: "",
-  remark: ""
-});
+//请求回票状态
+const status = computed(() =>
+  invDetail.value ? Number(invDetail.value.status) : 0
+);
 
-//初始化列表
-async function initalInvList() {
-  const { data, message, code } = await httpList({
+//请求采购回款详情
+async function requesetInvDetail() {
+  const { code, message, data } = await httpInfo({
     hpNo: hpNo.value
   });
 
   responseHandle({
     code,
     message,
-    handler: () => (invDetail.value = data.list[0])
+    handler: () => (invDetail.value = data)
   });
 }
 
 //请求更改回票状态
-function requestChangeInvStatus() {
-  formRef.value.validate(async isVaild => {
-    if (!isVaild) return;
-
-    const { code, message, data } = await httpStatus({
-      hpNo: hpNo.value,
-      ...formData
-    });
+async function requestChangeInvStatus(otherParams: any) {
+  const { code, message } = await httpStatus({
+    hpNo: hpNo.value,
+    ...otherParams
+  });
 
-    responseHandle({
-      code,
-      message,
-      handler: () => {
-        console.log(data);
-      }
-    });
+  responseHandle({
+    code,
+    message,
+    handler: () => push("/purchase/ticketReturn")
   });
 }
 
-onMounted(() => initalInvList());
-
-watch(
-  () => formData,
-  newVal => {
-    const failStatus = currentProcess.value.reviewOptions.failStatus;
-    const isRequired = failStatus === newVal.status;
-    rules.remark[0].required = isRequired;
-  },
-  {
-    deep: true
-  }
-);
+// 测试状态;
+// httpStatus({
+//   hpNo: hpNo.value,
+//   status: "3"
+// });
+
+//初始化采购回票详情数据
+onMounted(() => requesetInvDetail());
+
+//拿到汇款单详情后 根据详情状态显示对应流程
+watchEffect(() => {
+  if (!invDetail.value) return;
+  const { status } = invDetail.value;
+  currentProcess.value = reviewProcessMap.find(
+    process => process.showStatus === status
+  );
+});
 </script>
 
 <template>
-  <div class="ticker__content" bg-white>
-    <!-- 审核 -->
-    <div v-if="currentProcess">
-      <h1 text-xl font-bold my-2>{{ currentProcess.title }}</h1>
-      <el-form
-        flex
-        justify-between
-        ref="formRef"
-        label-width="100px"
-        :model="formData"
-        :rules="rules"
-      >
-        <div style="width: 50%">
-          <el-form-item
-            label="审核状态"
-            v-if="currentProcess.reviewOptions"
-            prop="status"
-          >
-            <el-select placeholder="请选择审核状态" v-model="formData.status">
-              <el-option
-                v-for="(key, index) in Object.keys(
-                  currentProcess.reviewOptions
-                )"
-                :label="key === 'failStatus' ? '未通过' : '通过'"
-                :value="currentProcess.reviewOptions[key]"
-                :key="index"
-              />
-            </el-select>
-          </el-form-item>
-
-          <el-form-item label="备注" prop="remark">
-            <el-input
-              rows="12"
-              maxlength="2000"
-              show-word-limit
-              type="textarea"
-              v-model="formData.remark"
-              placeholder="请输入备注"
-            />
-          </el-form-item>
-        </div>
-
-        <el-button type="primary" @click="requestChangeInvStatus"
-          >提交审核结果</el-button
-        >
-      </el-form>
-    </div>
+  <div class="ticker__content" bg-white mb-5>
+    <ElTabs>
+      <!-- 采购回票详情 -->
+      <ElTabPane label="采购回票详情">
+        <ElCollapse v-model="collapses">
+          <!-- 详情 -->
+          <ElCollapseItem name="0" v-if="invDetail" title="采购回票详情">
+            <TicketDetail :inv-detail="invDetail" />
+          </ElCollapseItem>
+
+          <!-- 审核流程 -->
+          <ElCollapseItem name="1" title="财务审核" v-if="status === 3">
+            <FinancialAudit @change-status="requestChangeInvStatus" />
+          </ElCollapseItem>
+        </ElCollapse>
+      </ElTabPane>
+
+      <!-- 审批记录 -->
+      <ElTabPane label="审批记录" />
+    </ElTabs>
   </div>
 </template>
 
 <style lang="scss" scoped>
 .ticker__content {
-  padding: 30px !important;
+  padding: 10px !important;
 }
 </style>