From 15afeabad6dc6d5cf4cb8459e176d499048cdd08 Mon Sep 17 00:00:00 2001
From: yangjun <1173114630@qq.com>
Date: Fri, 17 Oct 2025 15:35:48 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E8=BF=9B=E9=94=80=E5=AD=98?=
 =?UTF-8?q?=E9=80=BB=E8=BE=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/invoicing/jxc/JxcInfo.api.ts        |   2 +
 .../jxc/components/CgPriviewForm.vue          | 125 ++++++++++++++++++
 .../jxc/components/CgPriviewModal.vue         |  72 ++++++++++
 .../invoicing/jxc/components/QgcList.vue      |  22 ++-
 4 files changed, 216 insertions(+), 5 deletions(-)
 create mode 100644 src/views/invoicing/jxc/components/CgPriviewForm.vue
 create mode 100644 src/views/invoicing/jxc/components/CgPriviewModal.vue

diff --git a/src/views/invoicing/jxc/JxcInfo.api.ts b/src/views/invoicing/jxc/JxcInfo.api.ts
index 4c3b9ae..5d42a31 100644
--- a/src/views/invoicing/jxc/JxcInfo.api.ts
+++ b/src/views/invoicing/jxc/JxcInfo.api.ts
@@ -12,6 +12,7 @@ enum Api {
   addList='/invoicing/qgdInfo/addList',
   queryListByUser='/invoicing/qgdInfo/queryListByUser',
   addCgdByUser='/invoicing/qgdInfo/addCgdByUser',
+  saveCgd='/invoicing/qgdInfo/saveCgd',
 }
 
 
@@ -26,6 +27,7 @@ export const list = (params) => defHttp.get({ url: Api.list, params });
  */
 export const queryListByUser = (params) => defHttp.get({ url: Api.queryListByUser, params });
 export const addCgdByUser = (params) => defHttp.post({ url: Api.addCgdByUser, params });
+export const saveCgd = (params) => defHttp.post({ url: Api.saveCgd, params });
 
 /**
  * 删除单个
diff --git a/src/views/invoicing/jxc/components/CgPriviewForm.vue b/src/views/invoicing/jxc/components/CgPriviewForm.vue
new file mode 100644
index 0000000..be77ed1
--- /dev/null
+++ b/src/views/invoicing/jxc/components/CgPriviewForm.vue
@@ -0,0 +1,125 @@
+<template>
+<div class="p-2">
+  
+  <a-spin :spinning="confirmLoading">
+        <a-row>
+          <a-col :span="24" style="text-align:center">采购单</a-col>
+          <a-col :span="24" v-for="(item, index) in dataList" :key="index">
+            <a-row>
+              <a-col :span="24" style="text-align: right;">
+                供应商：{{item.gysName}}
+              </a-col>
+              <a-col :span="8">
+                采购单号：{{item.cgdNo}}
+              </a-col>
+              <a-col :span="8">
+                采购人：{{item.gysLxr}}
+              </a-col>
+              <a-col :span="8">
+                采购金额：{{item.totalPrice}} 元
+              </a-col>
+              <a-col :span="12" v-for="(item2, index2) in item.cgdInfoList" :key="index2">
+                <a-row>
+                  <a-col :span="8">
+                    采购数量：{{item2.purchaseQuantity}}
+                  </a-col>
+                  <a-col :span="8">
+                    采购金额：{{item2.totalPrice}}
+                  </a-col>
+                  <a-col :span="8">
+                    {{item2.tagName}}
+                  </a-col>
+                  <a-col :span="24">
+                    商品名称：{{item2.wlName}}
+                  </a-col>
+                  <a-col :span="8">
+                    <img :src="getFileAccessHttpUrl(item2.materialImg)" style="width: 100px;height: 100px;" >
+                  </a-col>
+                  <a-col :span="16">
+                    <a-row>
+                      <a-col :span="24" style="margin-top:10px;">规格型号：{{item2.wlMaterialNo}}</a-col>
+                      <a-col :span="24" style="margin-top:10px;">采购单位：{{item2.wlUnits}}</a-col>
+                      <a-col :span="24" style="margin-top:10px;">库存数量：{{item2.kcsl}}</a-col>
+                    </a-row>
+                  </a-col>
+                </a-row>
+              </a-col>
+            </a-row>
+          </a-col>
+        </a-row>
+  </a-spin>
+</div>
+</template>
+
+<script lang="ts" setup>
+  import { ref, reactive, defineExpose, nextTick, defineProps, computed, onMounted } from 'vue';
+  import { defHttp } from '/@/utils/http/axios';
+  import { useMessage } from '/@/hooks/web/useMessage';
+  import { saveCgd } from '../JxcInfo.api';
+  import { Form } from 'ant-design-vue';
+import { getFileAccessHttpUrl } from '/@/utils/common/compUtils';
+  const props = defineProps({
+    formDisabled: { type: Boolean, default: false },
+    formData: { type: Object, default: () => ({})},
+    formBpm: { type: Boolean, default: true }
+  });
+  const formRef = ref();
+  const useForm = Form.useForm;
+  const emit = defineEmits(['register', 'ok']);
+  const { createMessage } = useMessage();
+  const confirmLoading = ref<boolean>(false);
+  const dataList = ref<any>([]);
+  //表单验证
+  const validatorRules = reactive({
+  });
+
+  // 表单禁用
+  const disabled = computed(()=>{
+    if(props.formBpm === true){
+      if(props.formData.disabled === false){
+        return false;
+      }else{
+        return true;
+      }
+    }
+    return props.formDisabled;
+  });
+ 
+
+  /**
+   * 编辑
+   */
+  function edit(record) {
+    console.log("🚀 ~ edit ~ record:", record)
+      dataList.value = record;
+      console.log("🚀 ~ edit ~ dataList:", dataList.value)
+  }
+
+  /**
+   * 提交数据
+   */
+  async function submitForm() {
+    let params = dataList.value;
+    console.log("🚀 ~ submitForm ~ params:", params)
+    await saveCgd(params);
+    emit('ok');
+  }
+
+
+  defineExpose({
+    edit,
+    submitForm,
+  });
+</script>
+
+<style lang="less" scoped>
+  .antd-modal-form {
+    padding: 14px;
+  }
+  .cardClass{
+    margin: 20px;border: 1px solid #e8e8e8;border-radius: 8px;padding: 20px;box-shadow: 0 0 10px rgba(52, 152, 219, 0.5);transition: all 0.3s ease;
+  }
+  .detailClass{
+    margin-top: 5px;
+  }
+</style>
diff --git a/src/views/invoicing/jxc/components/CgPriviewModal.vue b/src/views/invoicing/jxc/components/CgPriviewModal.vue
new file mode 100644
index 0000000..3616b62
--- /dev/null
+++ b/src/views/invoicing/jxc/components/CgPriviewModal.vue
@@ -0,0 +1,72 @@
+<template>
+  <a-drawer :title="title" :width="width"  v-model:visible="visible" :closable="true"
+    :footer-style="{ textAlign: 'right' }" @close="handleCancel">
+    <CgPriviewForm ref="registerForm" @ok="submitCallback" :formDisabled="disableSubmit" :formBpm="false"></CgPriviewForm>
+    <template #footer>
+      <a-button type="primary" style="margin-right: 8px" @click="handleCancel">关闭</a-button>
+      <a-button type="primary" @click="handleOk" v-if="!disableSubmit">确认</a-button>
+    </template>
+  </a-drawer>
+</template>
+
+<script lang="ts" setup>
+  import { ref, nextTick, defineExpose } from 'vue';
+  import CgPriviewForm from './CgPriviewForm.vue'
+  import JModal from '/@/components/Modal/src/JModal/JModal.vue';
+  
+  const title = ref<string>('');
+  const width = ref<string>('80%');
+  const visible = ref<boolean>(false);
+  const disableSubmit = ref<boolean>(false);
+  const registerForm = ref();
+  const emit = defineEmits(['register', 'success']);
+
+  
+  /**
+   * 编辑
+   * @param record
+   */
+  function edit(record) {
+    title.value =  '采购单预览';
+    visible.value = true;
+    nextTick(() => {
+      registerForm.value.edit(record);
+    });
+  }
+  
+  /**
+   * 确定按钮点击事件
+   */
+  function handleOk() {
+    console.log("🚀 ~ handleOk ~ handleOk:", handleOk)
+    registerForm.value.submitForm();
+  }
+
+  /**
+   * form保存回调事件
+   */
+  function submitCallback() {
+    handleCancel();
+    emit('success');
+  }
+
+  /**
+   * 取消按钮回调事件
+   */
+  function handleCancel() {
+    visible.value = false;
+  }
+
+  defineExpose({
+    edit,
+    disableSubmit,
+  });
+</script>
+
+<style lang="less">
+  /**隐藏样式-modal确定按钮 */
+  .jee-hidden {
+    display: none !important;
+  }
+</style>
+<style lang="less" scoped></style>
diff --git a/src/views/invoicing/jxc/components/QgcList.vue b/src/views/invoicing/jxc/components/QgcList.vue
index d3a997b..bd21b35 100644
--- a/src/views/invoicing/jxc/components/QgcList.vue
+++ b/src/views/invoicing/jxc/components/QgcList.vue
@@ -22,7 +22,7 @@
       </a-form>
     </div>
           <!--引用表格-->
-          <BasicTable @register="registerTable" >
+          <BasicTable @register="registerTable" :rowSelection="rowSelection">
             <!--插槽:table标题-->
             <template #tableTitle>
             </template>
@@ -38,6 +38,7 @@
             </template>
           </BasicTable>
 
+    <CgPriviewModal ref="registerModal"  @success="handleSuccess" />
   </div>
 </template>
 
@@ -53,6 +54,8 @@
   import { DownOutlined } from '@ant-design/icons-vue';
 import { defHttp } from '/@/utils/http/axios';
   import QgdInfoModal from '/@/views/invoicing/jxc/components/QgdInfoModal.vue'
+  import CgPriviewModal from '/@/views/invoicing/jxc/components/CgPriviewModal.vue'
+  import { useMessage } from '/@/hooks/web/useMessage';
 
 
   const formRef = ref();
@@ -61,6 +64,7 @@ import { defHttp } from '/@/utils/http/axios';
   const registerModal = ref();
   const qgcOpen = ref(false)//请购车抽屉
   const count = ref<number>(5);
+      const { createMessage } = useMessage();
   const emit = defineEmits(['register', 'success']);
   //注册table数据
   const { prefixCls, tableContext, onExportXls, onImportXls } = useListPage({
@@ -80,8 +84,7 @@ import { defHttp } from '/@/utils/http/axios';
       },
     },
   });
-  const [registerTable, { reload, collapseAll, updateTableDataRecord, findTableDataRecord, getDataSource }, { rowSelection, selectedRowKeys }] = tableContext;
-  const labelCol = reactive({
+  const [registerTable, { reload, collapseAll, updateTableDataRecord, findTableDataRecord, getDataSource }, { rowSelection, selectedRowKeys, selectedRows }] = tableContext;  const labelCol = reactive({
     xs:24,
     sm:8,
     xl:8,
@@ -151,8 +154,17 @@ const handleInputChange = (record, field, value) => {
   }
 
   async function submitForm(){
-    await addCgdByUser(null);
-    emit("success");
+    console.log("🚀 ~ submitForm ~ selectedRows:", selectedRows.value)
+    var list = selectedRows.value;
+    if(list.length == 0){
+      createMessage.error("请选择物料");
+      return;
+    }
+    var list2 = await addCgdByUser(selectedRows.value);
+    console.log("🚀 ~ submitForm ~ list2:", list2)
+    // emit("success");
+    registerModal.value.edit(list2);
+    registerModal.value.disableSubmit = false;
   }