feat:添加材料和订单管理

src/views/materialManagement/materialList/index.vue

@@ -0,0 +1,418 @@
+<template>
+    <div class="app-container p-5">
+        <el-form :model="queryParams" class="main-search" ref="queryFormRef" :inline="true" v-show="showSearch">
+            <el-form-item label="名称" prop="name">
+                <el-input
+                    v-model="queryParams.name"
+                    placeholder="请输入名称"
+                    clearable
+                    @keyup.enter.native="getList"
+                />
+            </el-form-item>
+            <el-form-item label="状态" prop="status">
+                <el-select
+                    v-model="queryParams.status"
+                    placeholder="状态"
+                    clearable
+                    style="width: 120px"
+                >
+                    <el-option key="1" label="启用" value="1" />
+                    <el-option key="0" label="禁用" value="0" />
+                </el-select>
+            </el-form-item>
+            <el-form-item label="时间" prop="time">
+                <el-date-picker
+                    v-model="queryParams.createTime"
+                    format="yyyy 年 MM 月 dd 日"
+                    value-format="yyyy-MM-dd"
+                    type="date"
+                    placeholder="选择日期"
+                />
+            </el-form-item>
+            <el-form-item>
+                <el-button type="primary" size="mini" @click="getList">搜索</el-button>
+                <el-button size="mini" @click="resetQuery">重置</el-button>
+                <el-button
+                    type="primary"
+                    plain
+                    size="mini"
+                    @click="handleAdd"
+                >新增材料</el-button>
+            </el-form-item>
+        </el-form>
+        <el-table ref="tablesRef" v-loading="loading" :data="list" @selection-change="handleSelectionChange">
+            <el-table-column :show-overflow-tooltip="true" label="序号" prop="id" min-width="80" />
+            <el-table-column label="原材料名称" prop="name" min-width="80" />
+            <el-table-column label="规格" prop="specification" min-width="80" />
+            <el-table-column label="原材料编号" prop="materialNo" min-width="80" />
+            <el-table-column label="入库数量" prop="inventory" min-width="80" />
+            <el-table-column label="保质期(个月)" prop="shelfLife" min-width="80" />
+            <el-table-column label="类型" prop="materialType" min-width="80" />
+            <el-table-column label="创建时间" prop="createTime" min-width="80" />
+            <el-table-column label="状态" prop="status" min-width="80">
+                <template #default="scope">
+                    <el-switch
+                        v-model="scope.row.status"
+                        @change="changeStatus(scope.row)"
+                        :active-value="1"
+                        :inactive-value="0"
+                        active-color="#13ce66"
+                        inactive-color="#ff4949"
+                    />
+                </template>
+            </el-table-column>
+            <el-table-column label="操作" align="left" width="200" fixed="right">
+                <template #default="{ row }">
+                    <el-button size="mini" type="text" @click="showDetail(row)">详情</el-button>
+                    <el-button size="mini" type="text" @click="handleEdit(row)" icon="el-icon-edit">修改</el-button>
+                    <el-button size="mini" type="text" icon="el-icon-delete" @click="deleteMaterial(row)">删除</el-button>
+                </template>
+            </el-table-column>
+        </el-table>
+        <el-pagination
+            :total="total"
+            :page.sync="queryParams.pageNo"
+            :limit.sync="queryParams.pageSize"
+            @pagination="getList"
+        />
+        <!-- 详情 -->
+        <el-dialog
+            :title="dialogTitle"
+            v-model="open"
+            class="common-dialog"
+            width="700px"
+            append-to-body
+        >
+            <el-form
+                ref="formRef"
+                :model="form"
+                :disabled="disabled"
+                size="mini"
+                label-width="100px"
+            >
+                <el-row :gutter="24">
+                    <el-col :span="10">
+                        <el-form-item label="材料名称" prop="name" required>
+                            <el-input v-model="form.name" />
+                        </el-form-item>
+                    </el-col>
+                    <el-col :span="10">
+                        <el-form-item label="原材料编号" required>
+                            <el-input v-model="form.materialNo" />
+                        </el-form-item>
+                    </el-col>
+                    <el-col :span="10">
+                        <el-form-item label="规格" required>
+                            <el-input v-model="form.specification" />
+                        </el-form-item>
+                    </el-col>
+                    <el-col :span="10">
+                        <el-form-item label="入库数量" required>
+                            <el-input v-model="form.inventory" />
+                        </el-form-item>
+                    </el-col>
+                    <el-col :span="10">
+                        <el-form-item label="保质期" required>
+                            <el-input v-model="form.shelfLife" />
+                        </el-form-item>
+                    </el-col>
+                    <el-col :span="10">
+                        <el-form-item label="单位" required>
+                            <el-input v-model="form.unit" />
+                        </el-form-item>
+                    </el-col>
+                    <el-col :span="10">
+                        <el-form-item label="采购期数" required>
+                            <el-input v-model="form.purchasePeriod" />
+                        </el-form-item>
+                    </el-col>
+                    <el-col :span="10">
+                        <el-form-item label="材料类别" required>
+                            <el-select v-model="form.materialTypeId" placeholder="请选择材料类别">
+                                <el-option
+                                    v-for="item in materialTypeList"
+                                    :key="item.value"
+                                    :label="item.label"
+                                    :value="item.value"
+                                />
+                            </el-select>
+                        </el-form-item>
+                    </el-col>
+                    <el-col :span="10">
+                        <el-form-item label="材料图片" required>
+                            <!-- <ImageUpload :value="defaultImages" :isShowTip="false" :limit="1" /> -->
+                        </el-form-item>
+                    </el-col>
+                </el-row>
+            </el-form>
+            <div slot="footer" class="dialog-footer text-right">
+                <el-button type="primary" @click="submitForm">确认</el-button>
+                <el-button @click="cancel">取消</el-button>
+            </div>
+        </el-dialog>
+    </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue';
+import { ElMessage, ElMessageBox } from 'element-plus';
+//   import ImageUpload from '@/components/ImageUpload';
+
+// 模拟 API 请求
+const getMaterialList = (params) => {
+    return new Promise((resolve) => {
+        setTimeout(() => {
+            const mockData = {
+                data: {
+                    data: [
+                        {
+                            id: 1,
+                            name: '材料 1',
+                            specification: '规格 1',
+                            materialNo: 'M001',
+                            inventory: 100,
+                            shelfLife: 12,
+                            materialType: '类型 1',
+                            createTime: '2024-01-01',
+                            status: 1
+                        }
+                    ],
+                    total: 1
+                }
+            };
+            resolve(mockData);
+        }, 500);
+    });
+};
+
+const deleteMaterialById = (id) => {
+    return new Promise((resolve) => {
+        setTimeout(() => {
+            resolve();
+        }, 500);
+    });
+};
+
+const getMaterialInfo = (id) => {
+    return new Promise((resolve) => {
+        setTimeout(() => {
+            const mockData = {
+                data: {
+                    materialInfo: {
+                        id: 1,
+                        name: '材料 1',
+                        specification: '规格 1',
+                        materialNo: 'M001',
+                        inventory: 100,
+                        shelfLife: 12,
+                        unit: '个',
+                        purchasePeriod: 1,
+                        materialTypeId: 1,
+                        fileId: 'file1'
+                    }
+                }
+            };
+            resolve(mockData);
+        }, 500);
+    });
+};
+
+const updateMaterial = (data) => {
+    return new Promise((resolve) => {
+        setTimeout(() => {
+            resolve();
+        }, 500);
+    });
+};
+
+const updateMaterialStatus = (query) => {
+    return new Promise((resolve) => {
+        setTimeout(() => {
+            resolve();
+        }, 500);
+    });
+};
+
+const getAllMaterialType = () => {
+    return new Promise((resolve) => {
+        setTimeout(() => {
+            const mockData = [
+                { value: 1, label: '类型 1' },
+                { value: 2, label: '类型 2' }
+            ];
+            resolve({ data: mockData });
+        }, 500);
+    });
+};
+
+const saveGoodsCate = (data) => {
+    return new Promise((resolve) => {
+        setTimeout(() => {
+            resolve();
+        }, 500);
+    });
+};
+
+// 数据定义
+const form = ref({});
+const materialTypeList = ref([]);
+const open = ref(false);
+const disabled = ref(true);
+const list = ref([]);
+const queryParams = ref({
+    name: '',
+    status: null,
+    createTime: null,
+    pageNo: 1,
+    pageSize: 10
+});
+const loading = ref(false);
+const ids = ref([]);
+const multiple = ref(true);
+const showSearch = ref(true);
+const total = ref(0);
+const defaultImages = ref([]);
+const dialogTitle = ref('');
+
+// 引用
+const queryFormRef = ref(null);
+const tablesRef = ref(null);
+const formRef = ref(null);
+
+// 获取列表
+const getList = async () => {
+    loading.value = true;
+    try {
+        const res = await getMaterialList(queryParams.value);
+        list.value = res.data.data;
+        total.value = res.data.total;
+    } catch (error) {
+        console.error('获取列表失败:', error);
+    } finally {
+        loading.value = false;
+    }
+};
+
+// 状态改变
+const changeStatus = (row) => {
+    const query = {
+        id: row.id,
+        status: row.status
+    };
+    updateMaterialStatus(query).then(() => {
+        ElMessage.success('修改成功');
+    });
+};
+
+// 显示详情
+const showDetail = (row) => {
+    getMaterialInfo(row.id).then((res) => {
+        form.value = res.data.materialInfo;
+        defaultImages.value = [{ name: form.value.fileId, url: form.value.fileId }];
+        open.value = true;
+        dialogTitle.value = '材料详情';
+        disabled.value = true;
+    });
+};
+
+// 获取所有材料类型
+const getAllMaterialTypeData = async () => {
+    try {
+        const res = await getAllMaterialType();
+        materialTypeList.value = res.data;
+    } catch (error) {
+        console.error('获取材料类型失败:', error);
+    }
+};
+
+// 取消
+const cancel = () => {
+    open.value = false;
+};
+
+// 提交表单
+const submitForm = () => {
+    formRef.value.validate((valid) => {
+        if (valid) {
+            if (form.value.logo.length < 1) {
+                form.value.logo = '/static/defaultImage/none.png';
+            }
+            if (form.value.id) {
+                updateMaterial(form.value).then(() => {
+                    ElMessage.success('修改成功');
+                    open.value = false;
+                    getList();
+                });
+            } else {
+                saveGoodsCate(form.value).then(() => {
+                    ElMessage.success('添加成功');
+                    open.value = false;
+                    getList();
+                });
+            }
+        }
+    });
+};
+
+// 删除材料
+const deleteMaterial = (row) => {
+    const name = row.name;
+    const confirmMsg = `确认删除 ${name} 吗？`;
+    ElMessageBox.confirm(confirmMsg, '确认删除', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+    }).then(() => {
+        deleteMaterialById(row.id).then(() => {
+            getList();
+            ElMessage.success('删除成功');
+        });
+    }).catch(() => {});
+};
+
+// 新增材料
+const handleAdd = () => {
+    form.value = {};
+    open.value = true;
+    dialogTitle.value = '新增材料';
+    disabled.value = false;
+};
+
+// 编辑材料
+const handleEdit = (row) => {
+    getMaterialInfo(row.id).then((res) => {
+        form.value = res.data.materialInfo;
+        open.value = true;
+        dialogTitle.value = '编辑材料';
+        disabled.value = false;
+    });
+};
+
+// 多选框选中数据
+const handleSelectionChange = (selection) => {
+    ids.value = selection.map((item) => item.id);
+    multiple.value = !selection.length;
+};
+
+// 重置查询
+const resetQuery = () => {
+    queryParams.value = {
+        name: '',
+        status: null,
+        createTime: null,
+        pageNo: 1,
+        pageSize: 10
+    };
+    getList();
+};
+
+// 生命周期钩子
+onMounted(() => {
+    getList();
+    getAllMaterialTypeData();
+});
+</script>
+
+<style scoped>
+/* 这里可以添加样式 */
+</style>    

src/views/materialManagement/purchaseOrder/index.vue

@@ -0,0 +1,726 @@
+<template>
+    <div class="p-5">
+      <el-form :model="queryParams" class="main-search"  :inline="true">
+        <el-form-item label="订单编号" prop="orderNo">
+          <el-input
+            v-model="queryParams.orderNo"
+            placeholder="请输入订单编号"
+            clearable
+            @keyup.enter.native="getList"
+          />
+        </el-form-item>
+        <el-form-item label="采购时间" prop="purchaseTime">
+          <el-date-picker
+            v-model="queryParams.purchaseTime"
+            type="date"
+            placeholder="选择日期"
+            value-format="yyyy-MM-dd"
+            format="yyyy-MM-dd"
+          >
+          </el-date-picker>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" size="mini" @click="getList">搜索</el-button>
+          <el-button  size="mini" @click="resetQuery">重置</el-button>
+          <el-button type="primary" plain  @click="handleAdd">
+            新增订单
+          </el-button>
+        </el-form-item>
+      </el-form>
+      <el-table ref="tables" v-loading="loading" :data="list" @selection-change="handleSelectionChange">
+        <el-table-column :show-overflow-tooltip="true" label="序号" prop="id" min-width="80" />
+        <el-table-column :show-overflow-tooltip="true" label="订单编号" prop="orderNo" min-width="80" />
+        <el-table-column label="采购方" prop="puchaseSource" min-width="80" />
+        <el-table-column label="联系方式" prop="contactWay" min-width="120" />
+        <el-table-column label="负责人" prop="responsible" min-width="80" />
+        <el-table-column label="商品采购总数" prop="totalQuantity" min-width="100" />
+        <el-table-column label="采购总 kg" prop="totalWeight" min-width="100" />
+        <el-table-column label="总价" prop="totalPrice" min-width="80" />
+        <el-table-column label="支付金额" prop="actualPrice" min-width="80" />
+        <el-table-column label="支付方式" prop="purchaseType" min-width="80" />
+        <el-table-column label="采购时间" prop="purchaseTime" min-width="100" />
+        <el-table-column label="录入时间" prop="createTime" min-width="100" />
+        <el-table-column label="操作" align="left" width="130" fixed="right">
+          <template #default="{ row }">
+            <el-button size="mini" type="text" @click="handleDetail(row)">
+              详情
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+      <el-pagination
+        :total="total"
+        :page.sync="queryParams.pageNo"
+        :limit.sync="queryParams.pageSize"
+        @pagination="getList"
+      />
+  
+      <!-- 新增订单弹窗 -->
+      <el-dialog v-model="addDialogVisible" title="新增订单" width="80%">
+        <Paragraph title="基础信息">
+            <!-- 添加 :rules="rules" 绑定验证规则 -->
+            <el-form ref="addForm" size="mini" :model="addFormData" :disabled="false" :rules="rules">
+              <el-row :gutter="20">
+                <el-col :span="6">
+                  <el-form-item label="采购订单号" prop="orderNo" required>
+                    <el-input v-model="addFormData.orderNo" placeholder="输入采购订单号"></el-input>
+                  </el-form-item>
+                </el-col>
+                <el-col :span="6">
+                  <el-form-item label="采购方" prop="puchaseSource" required>
+                    <el-input v-model="addFormData.puchaseSource" placeholder="输入采购方"></el-input>
+                  </el-form-item>
+                </el-col>
+                <el-col :span="6">
+                  <el-form-item label="联系电话" prop="contactWay" required>
+                    <el-input v-model="addFormData.contactWay" placeholder="输入联系电话"></el-input>
+                  </el-form-item>
+                </el-col>
+                <el-col :span="6">
+                  <el-form-item label="负责人" prop="responsible" required>
+                    <el-input v-model="addFormData.responsible" placeholder="输入负责人"></el-input>
+                  </el-form-item>
+                </el-col>
+                <el-col :span="6">
+                  <el-form-item label="商品采购总数" prop="totalQuantity" required>
+                    <el-input v-model="addFormData.totalQuantity" placeholder="输入商品采购总数"></el-input>
+                  </el-form-item>
+                </el-col>
+                <el-col :span="6">
+                  <el-form-item label="采购总KG数" prop="totalWeight" required>
+                    <el-input v-model="addFormData.totalWeight" placeholder="输入采购总KG数"></el-input>
+                  </el-form-item>
+                </el-col>
+                <el-col :span="6">
+                  <el-form-item label="总价" prop="totalPrice" required>
+                    <el-input v-model="addFormData.totalPrice" placeholder="输入总价"></el-input>
+                  </el-form-item>
+                </el-col>
+                <el-col :span="6">
+                  <el-form-item label="支付金额" prop="actualPrice" required>
+                    <el-input v-model="addFormData.actualPrice" placeholder="输入支付金额"></el-input>
+                  </el-form-item>
+                </el-col>
+                <el-col :span="6">
+                  <el-form-item label="支付方式" prop="purchaseType" required>
+                    <el-input v-model="addFormData.purchaseType" placeholder="输入支付方式"></el-input>
+                  </el-form-item>
+                </el-col>
+                <el-col :span="6">
+                  <el-form-item label="采购时间" prop="purchaseTime" required>
+                    <el-date-picker
+                      v-model="addFormData.purchaseTime"
+                      format="yyyy-MM-dd HH:mm:ss"
+                      value-format="yyyy-MM-dd HH:mm:ss"
+                      type="datetime"
+                      placeholder="选择日期时间">
+                    </el-date-picker>
+                  </el-form-item>
+                </el-col>
+                <el-col :span="24">
+                  <el-form-item label="发票截图" prop="fileId">
+                    <ImageUpload @input="inputAdd" :value="addImgList" :isShowTip="false" />
+                  </el-form-item>
+                </el-col>
+              </el-row>
+            </el-form>
+        </Paragraph>
+        <Paragraph title="商品信息">
+            <div style="display: flex;align-items: center">
+              <el-button type="primary" @click="handleAddGoods">增加商品</el-button>
+              <div style="display: flex;margin-left: auto">总价：<span style="font-size: 20px;color: #ff0000">￥{{addTotalAmount}}</span></div>
+            </div>
+  
+            <el-table :data="addSelectedItems" style="width: 100%">
+              <!-- 商品名称 -->
+              <el-table-column label="商品名称" prop="materialName" min-width="120"></el-table-column>
+              <!-- 单价（数字输入） -->
+              <el-table-column label="单价(元)" min-width="120">
+                <template v-slot="scope">
+                  <div>
+                    <el-input-number
+                      v-if="scope.row.editing.status"
+                      v-model="scope.row.editUnitPrice"
+                      :precision="2"
+                      :min="0"
+                      size="mini"
+                      controls-position="right"
+                    />
+                    <span v-else>¥ {{ scope.row.unitPrice.toFixed(2) }}</span>
+                  </div>
+                </template>
+              </el-table-column>
+  
+              <!-- 总数（数字输入） -->
+              <el-table-column label="总数" min-width="100">
+                <template v-slot="scope">
+                  <div>
+                    <el-input-number
+                      v-if="scope.row.editing.status"
+                      v-model="scope.row.editTotalQuantity"
+                      :min="1"
+                      :max="9999"
+                      size="mini"
+                      controls-position="right"
+                    />
+                    <span v-else>{{ scope.row.totalQuantity }}</span>
+                  </div>
+                </template>
+              </el-table-column>
+              <!-- 总价（自动计算） -->
+              <el-table-column label="总价" min-width="120">
+                <template v-slot="scope">
+                  ¥ {{ (scope.row.totalQuantity * scope.row.unitPrice).toFixed(2) }}
+                </template>
+              </el-table-column>
+              <!-- 操作列 -->
+              <el-table-column label="操作" width="150" fixed="right">
+                <template v-slot="scope">
+                  <el-button
+                    v-if="!scope.row.editing.status"
+                    type="text"
+                    size="mini"
+                    @click="startRowEdit(scope.row)">
+                    编辑
+                  </el-button>
+                  <el-button
+                    v-if="!scope.row.editing.status"
+                    type="text"
+                    size="mini"
+                    @click="deleteSelectedItems(scope.row, 'add')">
+                    删除
+                  </el-button>
+                  <div v-else>
+                    <el-button
+                      type="text"
+                      size="mini"
+                      @click="saveRowEdit(scope.row, 'add')"
+                    >
+                      保存
+                    </el-button>
+                    <el-button
+                      type="text"
+                      size="mini"
+                      @click="cancelRowEdit(scope.row, 'add')"
+                    >
+                      取消
+                    </el-button>
+                  </div>
+                </template>
+              </el-table-column>
+            </el-table>
+        </Paragraph>
+        <!-- 材料列表弹出层 -->
+        <el-dialog
+          title="材料列表"
+          :visible.sync="addMaterialDialog"
+          class="common-dialog"
+          width="80%">
+          <!-- 使用 el-table 替代 PagingTable -->
+          <el-table :data="materialList" v-loading="materialLoading">
+            <el-table-column label="序号" prop="id" min-width="80" />
+            <el-table-column label="原材料名称" prop="name" min-width="80" />
+            <el-table-column label="规格" prop="specification" min-width="80" />
+            <el-table-column label="原材料编号" prop="materialNo" min-width="80" />
+            <el-table-column
+              fixed="right"
+              label="操作"
+              width="100">
+              <template #default="scope">
+                <el-button v-if="!isSelected(scope.row.id, 'add')" @click="addMaterial(scope.row, 'add')" type="text" size="small"><i class="el-icon-plus"></i>选择材料</el-button>
+              </template>
+            </el-table-column>
+          </el-table>
+          <div slot="footer" class="dialog-footer">
+            <el-button type="primary" @click="closeAddMaterialDialog">关闭</el-button>
+          </div>
+        </el-dialog>
+        <template #footer>
+          <el-button @click="addDialogVisible = false">取消</el-button>
+          <el-button type="primary" @click="saveNewOrder">保存</el-button>
+        </template>
+      </el-dialog>
+  
+      <!-- 订单详情弹窗 -->
+      <el-dialog v-model="detailDialogVisible" title="订单详情" width="80%">
+        <Paragraph title="基础信息">
+            <!-- 添加 :rules="rules" 绑定验证规则 -->
+            <el-form ref="detailForm" size="mini" :model="detailFormData" :disabled="true" :rules="rules">
+              <el-row :gutter="20">
+                <el-col :span="6">
+                  <el-form-item label="采购订单号" prop="orderNo" required>
+                    <el-input v-model="detailFormData.orderNo" placeholder="输入采购订单号"></el-input>
+                  </el-form-item>
+                </el-col>
+                <el-col :span="6">
+                  <el-form-item label="采购方" prop="puchaseSource" required>
+                    <el-input v-model="detailFormData.puchaseSource" placeholder="输入采购方"></el-input>
+                  </el-form-item>
+                </el-col>
+                <el-col :span="6">
+                  <el-form-item label="联系电话" prop="contactWay" required>
+                    <el-input v-model="detailFormData.contactWay" placeholder="输入联系电话"></el-input>
+                  </el-form-item>
+                </el-col>
+                <el-col :span="6">
+                  <el-form-item label="负责人" prop="responsible" required>
+                    <el-input v-model="detailFormData.responsible" placeholder="输入负责人"></el-input>
+                  </el-form-item>
+                </el-col>
+                <el-col :span="6">
+                  <el-form-item label="商品采购总数" prop="totalQuantity" required>
+                    <el-input v-model="detailFormData.totalQuantity" placeholder="输入商品采购总数"></el-input>
+                  </el-form-item>
+                </el-col>
+                <el-col :span="6">
+                  <el-form-item label="采购总KG数" prop="totalWeight" required>
+                    <el-input v-model="detailFormData.totalWeight" placeholder="输入采购总KG数"></el-input>
+                  </el-form-item>
+                </el-col>
+                <el-col :span="6">
+                  <el-form-item label="总价" prop="totalPrice" required>
+                    <el-input v-model="detailFormData.totalPrice" placeholder="输入总价"></el-input>
+                  </el-form-item>
+                </el-col>
+                <el-col :span="6">
+                  <el-form-item label="支付金额" prop="actualPrice" required>
+                    <el-input v-model="detailFormData.actualPrice" placeholder="输入支付金额"></el-input>
+                  </el-form-item>
+                </el-col>
+                <el-col :span="6">
+                  <el-form-item label="支付方式" prop="purchaseType" required>
+                    <el-input v-model="detailFormData.purchaseType" placeholder="输入支付方式"></el-input>
+                  </el-form-item>
+                </el-col>
+                <el-col :span="6">
+                  <el-form-item label="采购时间" prop="purchaseTime" required>
+                    <el-date-picker
+                      v-model="detailFormData.purchaseTime"
+                      format="yyyy-MM-dd HH:mm:ss"
+                      value-format="yyyy-MM-dd HH:mm:ss"
+                      type="datetime"
+                      placeholder="选择日期时间">
+                    </el-date-picker>
+                  </el-form-item>
+                </el-col>
+                <el-col :span="24">
+                  <el-form-item label="发票截图" prop="fileId">
+                    <ImageUpload @input="inputDetail" :value="detailImgList" :isShowTip="false" />
+                  </el-form-item>
+                </el-col>
+              </el-row>
+            </el-form>
+        </Paragraph>
+        <Paragraph title="商品信息">
+            <div style="display: flex;align-items: center">
+              <div style="display: flex;margin-left: auto">总价：<span style="font-size: 20px;color: #ff0000">￥{{detailTotalAmount}}</span></div>
+            </div>
+  
+            <el-table :data="detailSelectedItems" style="width: 100%">
+              <!-- 商品名称 -->
+              <el-table-column label="商品名称" prop="materialName" min-width="120"></el-table-column>
+              <!-- 单价（数字输入） -->
+              <el-table-column label="单价(元)" min-width="120">
+                <template v-slot="scope">
+                  <div>
+                    <span >¥ {{ scope.row.unitPrice.toFixed(2) }}</span>
+                  </div>
+                </template>
+              </el-table-column>
+  
+              <!-- 总数（数字输入） -->
+              <el-table-column label="总数" min-width="100">
+                <template v-slot="scope">
+                  <div>
+                    <span >{{ scope.row.totalQuantity }}</span>
+                  </div>
+                </template>
+              </el-table-column>
+              <!-- 总价（自动计算） -->
+              <el-table-column label="总价" min-width="120">
+                <template v-slot="scope">
+                  ¥ {{ (scope.row.totalQuantity * scope.row.unitPrice).toFixed(2) }}
+                </template>
+              </el-table-column>
+            </el-table>
+        </Paragraph>
+        <template #footer>
+          <el-button @click="detailDialogVisible = false">关闭</el-button>
+        </template>
+      </el-dialog>
+    </div>
+  </template>
+  
+  <script setup>
+  import { ref, onMounted, computed } from 'vue';
+  import Paragraph from "@/components/Paragraph.vue";
+  
+  // 表格引用
+  const tables = ref(null);
+  // 查询参数
+  const queryParams = ref({
+    orderNo: '',
+    purchaseTime: null,
+    pageNo: 1,
+    pageSize: 10
+  });
+  // 加载状态
+  const loading = ref(false);
+  // 列表数据
+  const list = ref([]);
+  // 总数
+  const total = ref(0);
+  // 新增订单弹窗显示状态
+  const addDialogVisible = ref(false);
+  // 订单详情弹窗显示状态
+  const detailDialogVisible = ref(false);
+  // 当前查看详情的订单数据
+  const currentOrder = ref(null);
+  
+  // 新增订单表单数据
+  const addFormData = ref({
+    orderNo: '',
+    puchaseSource: '',
+    contactWay: '',
+    responsible: '',
+    totalQuantity: '',
+    totalWeight: '',
+    totalPrice: '',
+    actualPrice: '',
+    purchaseType: '',
+    purchaseTime: null,
+    fileId: []
+  });
+  // 新增订单商品列表
+  const addSelectedItems = ref([]);
+  // 新增订单发票截图列表
+  const addImgList = ref([]);
+  // 新增订单材料列表弹出层显示状态
+  const addMaterialDialog = ref(false);
+  
+  // 详情订单表单数据
+  const detailFormData = ref({
+    orderNo: '',
+    puchaseSource: '',
+    contactWay: '',
+    responsible: '',
+    totalQuantity: '',
+    totalWeight: '',
+    totalPrice: '',
+    actualPrice: '',
+    purchaseType: '',
+    purchaseTime: null,
+    fileId: []
+  });
+  // 详情订单商品列表
+  const detailSelectedItems = ref([]);
+  // 详情订单发票截图列表
+  const detailImgList = ref([]);
+  
+  // 模拟订单数据
+  const mockOrders = [
+    {
+      id: 1,
+      orderNo: '20240001',
+      puchaseSource: '采购方1',
+      contactWay: '13800138000',
+      responsible: '负责人1',
+      totalQuantity: 100,
+      totalWeight: 500,
+      totalPrice: 5000,
+      actualPrice: 4800,
+      purchaseType: '线上支付',
+      purchaseTime: '2024-01-01',
+      createTime: '2024-01-02'
+    },
+    {
+      id: 2,
+      orderNo: '20240002',
+      puchaseSource: '采购方2',
+      contactWay: '13900139000',
+      responsible: '负责人2',
+      totalQuantity: 200,
+      totalWeight: 1000,
+      totalPrice: 10000,
+      actualPrice: 9500,
+      purchaseType: '线下支付',
+      purchaseTime: '2024-02-01',
+      createTime: '2024-02-02'
+    }
+  ];
+  
+  // 模拟材料数据
+  const mockMaterials = [
+    {
+      id: 1,
+      name: '材料1',
+      specification: '规格1',
+      materialNo: '编号1'
+    },
+    {
+      id: 2,
+      name: '材料2',
+      specification: '规格2',
+      materialNo: '编号2'
+    }
+  ];
+  
+  // 定义表单验证规则
+  const rules = ref({
+    orderNo: [
+      { required: true, message: '请输入采购订单号', trigger: 'blur' }
+    ],
+    puchaseSource: [
+      { required: true, message: '请输入采购方', trigger: 'blur' }
+    ],
+    contactWay: [
+      { required: true, message: '请输入联系电话', trigger: 'blur' },
+      { pattern: /^[0-9]{11}$/, message: '请输入有效的11位手机号码', trigger: 'blur' }
+    ],
+    responsible: [
+      { required: true, message: '请输入负责人', trigger: 'blur' }
+    ],
+    totalQuantity: [
+      { required: true, message: '请输入商品采购总数', trigger: 'blur' },
+      { pattern: /^\d+$/, message: '商品采购总数必须为整数', trigger: 'blur' }
+    ],
+    totalWeight: [
+      { required: true, message: '请输入采购总KG数', trigger: 'blur' },
+      { pattern: /^\d+(\.\d+)?$/, message: '采购总KG数必须为数字', trigger: 'blur' }
+    ],
+    totalPrice: [
+      { required: true, message: '请输入总价', trigger: 'blur' },
+      { pattern: /^\d+(\.\d+)?$/, message: '总价必须为数字', trigger: 'blur' }
+    ],
+    actualPrice: [
+      { required: true, message: '请输入支付金额', trigger: 'blur' },
+      { pattern: /^\d+(\.\d+)?$/, message: '支付金额必须为数字', trigger: 'blur' }
+    ],
+    purchaseType: [
+      { required: true, message: '请输入支付方式', trigger: 'blur' }
+    ],
+    purchaseTime: [
+      { required: true, message: '请选择采购时间', trigger: 'change' }
+    ]
+  });
+  
+  // 材料列表数据
+  const materialList = ref([]);
+  // 材料列表加载状态
+  const materialLoading = ref(false);
+  
+  // 获取订单列表
+  const getList = () => {
+    loading.value = true;
+    setTimeout(() => {
+      // 模拟过滤逻辑
+      let filteredOrders = mockOrders;
+      if (queryParams.value.orderNo) {
+        filteredOrders = filteredOrders.filter(order =>
+          order.orderNo.includes(queryParams.value.orderNo)
+        );
+      }
+      if (queryParams.value.purchaseTime) {
+        filteredOrders = filteredOrders.filter(order =>
+          order.purchaseTime === queryParams.value.purchaseTime
+        );
+      }
+  
+      const startIndex = (queryParams.value.pageNo - 1) * queryParams.value.pageSize;
+      const endIndex = startIndex + queryParams.value.pageSize;
+      list.value = filteredOrders.slice(startIndex, endIndex);
+      total.value = filteredOrders.length;
+      loading.value = false;
+    }, 500);
+  };
+  
+  // 处理新增订单
+  const handleAdd = () => {
+    addDialogVisible.value = true;
+    addFormData.value = {
+      orderNo: '',
+      puchaseSource: '',
+      contactWay: '',
+      responsible: '',
+      totalQuantity: '',
+      totalWeight: '',
+      totalPrice: '',
+      actualPrice: '',
+      purchaseType: '',
+      purchaseTime: null,
+      fileId: []
+    };
+    addSelectedItems.value = [];
+    addImgList.value = [];
+  };
+  
+  // 保存新增订单
+  const saveNewOrder = () => {
+    // 这里可以添加保存订单到模拟数据的逻辑
+    addDialogVisible.value = false;
+  };
+  
+  // 处理查看订单详情
+  const handleDetail = (row) => {
+    currentOrder.value = row;
+    detailDialogVisible.value = true;
+    detailFormData.value = { ...row };
+    // 这里可以根据实际情况获取详情订单的商品列表
+    detailSelectedItems.value = [];
+    detailImgList.value = [];
+  };
+  
+  // 重置查询
+  const resetQuery = () => {
+    queryParams.value = {
+      orderNo: '',
+      purchaseTime: null,
+      pageNo: 1,
+      pageSize: 10
+    };
+    getList();
+  };
+  
+  // 新增订单增加商品
+  const handleAddGoods = () => {
+    addMaterialDialog.value = true;
+    // 获取材料列表
+    getMaterialList();
+  };
+  
+  // 关闭新增订单材料列表弹出层
+  const closeAddMaterialDialog = () => {
+    addMaterialDialog.value = false;
+  };
+  
+  // 获取材料列表
+  const getMaterialList = () => {
+    materialLoading.value = true;
+    setTimeout(() => {
+      materialList.value = mockMaterials;
+      materialLoading.value = false;
+    }, 300);
+  };
+  
+  // 添加材料到新增订单商品列表
+  const addMaterial = (item, type) => {
+    let targetList;
+    if (type === 'add') {
+      targetList = addSelectedItems;
+    }
+    // 检查是否已存在（根据唯一ID判断）
+    const isExist = targetList.value.some(
+      selected => selected.materialId === item.id
+    );
+    if (isExist) {
+      // 这里可以使用合适的提示方式，如 ElMessage
+      console.log("该商品已存在，不能重复添加！");
+      return;
+    }
+    var materialItem = {
+      materialId: item.id,
+      materialName: item.name,
+      totalQuantity: 0,
+      unitPrice: 0,
+      editing: {
+        status: false,
+        field: null,
+        original: null
+      },
+      editMaterialName: '',
+      editUnitPrice: 0,
+      editTotalQuantity: 0
+    };
+    // 深拷贝对象避免引用问题
+    const clonedItem = JSON.parse(JSON.stringify(materialItem));
+    targetList.value.push(clonedItem);
+  };
+  
+  // 删除商品
+  const deleteSelectedItems = (item, type) => {
+    let targetList;
+    if (type === 'add') {
+      targetList = addSelectedItems;
+    }
+    targetList.value = targetList.value.filter(
+      s => s.materialId !== item.materialId
+    );
+  };
+  
+  // 初始化行编辑状态
+  const initRowEdit = (row) => {
+    row.editing = {
+      status: false,
+      field: null,
+      original: {
+        materialName: row.materialName,
+        unitPrice: row.unitPrice,
+        totalQuantity: row.totalQuantity
+      }
+    };
+    row.editMaterialName = row.materialName;
+    row.editUnitPrice = row.unitPrice;
+    row.editTotalQuantity = row.totalQuantity;
+  };
+  
+  // 开始行编辑
+  const startRowEdit = (row) => {
+    initRowEdit(row);
+    row.editing.status = true;
+  };
+  
+  // 保存行编辑
+  const saveRowEdit = (row, type) => {
+    row.unitPrice = parseFloat(row.editUnitPrice);
+    row.totalQuantity = parseInt(row.editTotalQuantity);
+    row.editing.status = false;
+    // 这里可以使用合适的提示方式，如 ElMessage
+    console.log('修改已保存');
+  };
+  
+  // 取消行编辑
+  const cancelRowEdit = (row, type) => {
+    row.unitPrice = row.editing.original.unitPrice;
+    row.totalQuantity = row.editing.original.totalQuantity;
+    row.editing.status = false;
+  };
+  
+  // 判断材料是否已选中
+  const isSelected = (id, type) => {
+    let targetList;
+    if (type === 'add') {
+      targetList = addSelectedItems;
+    }
+    return targetList.value.some(item => item.materialId === id);
+  };
+  
+  // 新增订单总价计算
+  const addTotalAmount = computed(() => {
+    var amount = addSelectedItems.value.reduce((sum, item) => sum + (item.totalQuantity * item.unitPrice), 0);
+    return amount.toFixed(2);
+  });
+  
+  // 详情订单总价计算
+  const detailTotalAmount = computed(() => {
+    var amount = detailSelectedItems.value.reduce((sum, item) => sum + (item.totalQuantity * item.unitPrice), 0);
+    return amount.toFixed(2);
+  });
+  
+  // 新增订单发票截图输入
+  const inputAdd = (urls) => {
+    addFormData.value.fileId = urls;
+  };
+  
+  // 详情订单发票截图输入
+  const inputDetail = (urls) => {
+    detailFormData.value.fileId = urls;
+  };
+  
+  onMounted(() => {
+    getList();
+  });
+  </script>
+  
+  <style scoped>
+  /* 这里可以添加样式 */
+  </style>