设计资料

src/views/materials/orderMaterials/index.vue

@@ -77,56 +77,79 @@
         </el-card>
       </el-col>
     </el-row>
-
-    <!-- 添加或修改物资-材料设备对话框 -->
-    <el-dialog :title="dialog.title" v-model="dialog.visible" width="500px" append-to-body>
+    <el-dialog draggable :title="dialog.title" v-model="dialog.visible" width="500px" append-to-body>
       <el-form ref="cailiaoshebeiFormRef" :model="form" :rules="rules" label-width="130px">
-        <el-form-item label="物资执行状态" prop="materialStatus">
+        <el-form-item label="物资执行状态" prop="bo.materialStatus">
           <el-select v-model="form.bo.materialStatus" placeholder="请选择物资执行状态" clearable filterable @change="handleChange">
             <el-option v-for="item in material_status" :key="item.value" :label="item.label" :value="item.value" />
           </el-select>
         </el-form-item>
-        <el-form-item label="物资逾期类型" prop="overdueType" v-if="form.bo.materialStatus == 3">
+        <el-form-item label="物资逾期类型" prop="bo.overdueType" v-if="form.bo.materialStatus == 3">
           <el-select v-model="form.bo.overdueType" placeholder="请选择物资逾期类型" clearable filterable>
             <el-option v-for="item in overdue_type" :key="item.value" :label="item.label" :value="item.value" />
           </el-select>
         </el-form-item>
-        <el-form-item label="逾期原因" prop="cause" v-if="form.bo.materialStatus == 3">
-          <el-input v-model="form.bo.cause" placeholder="请输入逾期原因" />
+        <el-form-item label="逾期原因" prop="bo.cause" v-if="form.bo.materialStatus == 3">
+          <el-input v-model="form.bo.cause" type="textarea" placeholder="请输入逾期原因" />
         </el-form-item>
-        <el-form-item label="实际到货时间" prop="actualArrival" v-if="form.bo.materialStatus < 4">
+        <el-form-item label="实际到货时间" prop="bo.actualArrival" v-if="form.bo.materialStatus < 4">
           <el-date-picker clearable v-model="form.bo.actualArrival" type="date" value-format="YYYY-MM-DD" placeholder="请选择实际到货时间" />
         </el-form-item>
-        <el-form-item label="验收时间" prop="receptionTime" v-if="form.bo.materialStatus < 4">
+        <el-form-item label="验收时间" prop="bo.receptionTime" v-if="form.bo.materialStatus < 4">
           <el-date-picker clearable v-model="form.bo.receptionTime" type="date" value-format="YYYY-MM-DD" placeholder="请选择验收时间" />
         </el-form-item>
-        <el-form-item label="验收数量" prop="acceptanceQuantity" v-if="form.bo.materialStatus < 4">
+        <el-form-item label="验收数量" prop="bo.acceptanceQuantity" v-if="form.bo.materialStatus < 4">
           <el-input v-model="form.bo.acceptanceQuantity" type="number" placeholder="请输入验收数量" />
         </el-form-item>
-        <el-form-item label="需求提交时间" prop="requiredTime">
-          <el-date-picker clearable v-model="form.bo.requiredTime" type="date" value-format="YYYY-MM-DD" placeholder="请选择需求提交时间" />
+        <el-form-item label="需求提交时间" prop="bo.requiredTime">
+          <el-date-picker
+            clearable
+            v-model="form.bo.requiredTime"
+            :disabled="form.bo.requiredTime != null && form.bo.requiredTime != ''"
+            type="date"
+            value-format="YYYY-MM-DD"
+            placeholder="请选择需求提交时间"
+          />
         </el-form-item>
 
-        <el-form-item label="订货时间" prop="orderTime">
-          <el-date-picker clearable v-model="form.bo.orderTime" type="date" value-format="YYYY-MM-DD" placeholder="请选择订货时间" />
+        <el-form-item label="订货时间" prop="bo.orderTime">
+          <el-date-picker
+            clearable
+            :disabled="form.bo.orderTime != null && form.bo.orderTime != ''"
+            v-model="form.bo.orderTime"
+            type="date"
+            value-format="YYYY-MM-DD"
+            placeholder="请选择订货时间"
+          />
         </el-form-item>
 
-        <el-form-item label="操作状态" prop="operationStatus" v-if="form.bo.materialStatus <= 4 || form.bo.materialStatus == 10">
-          <el-select v-model="form.bo.operationStatus" placeholder="请选择物资执行状态" clearable filterable @change="handleChange">
+        <el-form-item label="操作状态" prop="bo.operationStatus" v-if="form.bo.materialStatus <= 4 || form.bo.materialStatus == 10">
+          <el-select disabled v-model="form.bo.operationStatus" placeholder="请选择物资执行状态" clearable filterable>
             <el-option v-for="item in operation_s" :key="item.value" :label="item.label" :value="item.value" />
           </el-select>
         </el-form-item>
 
-        <el-form-item label="单据类型" prop="billType" v-if="form.bo.materialStatus < 4 || form.bo.materialStatus == 10">
-          <el-select v-model="form.bo.billType" placeholder="请选择单据类型" clearable filterable>
+        <el-form-item label="单据类型" prop="bo.billType" v-if="form.bo.materialStatus < 4 || form.bo.materialStatus == 10">
+          <el-select disabled v-model="form.bo.billType" placeholder="请选择单据类型" clearable filterable>
             <el-option label="签收单" value="1" />
             <el-option label="退货单" value="2" />
           </el-select>
         </el-form-item>
-        <el-form-item label="上传文件" prop="file" v-if="form.bo.materialStatus < 4 || form.bo.materialStatus == 10">
+        <el-form-item
+          label="上传单据"
+          prop="file"
+          v-if="form.bo.materialStatus < 4 || form.bo.materialStatus == 10"
+          :rules="[
+            {
+              required: isFileRequired,
+              message: '请上传单据',
+              trigger: 'blur'
+            }
+          ]"
+        >
           <file-upload
             v-model="form.file"
-            :fileType="['doc', 'docx']"
+            :fileType="['pdf', 'png', 'jpg', 'jpeg']"
             :autoUpload="false"
             ref="fileUploadRef"
             :data="form.bo"
@@ -157,22 +180,13 @@
 </template>
 
 <script setup name="Cailiaoshebei" lang="ts">
-import {
-  listCailiaoshebei,
-  getCailiaoshebei,
-  delCailiaoshebei,
-  addCailiaoshebei,
-  updateCailiaoshebei,
-  listBatch,
-  getBatch,
-  delBatch
-} from '@/api/materials/orderMaterials';
+import { listCailiaoshebei, delCailiaoshebei, addCailiaoshebei, listBatch, getBatch, delBatch } from '@/api/materials/orderMaterials';
 import { CailiaoshebeiVO, CailiaoshebeiQuery, CailiaoshebeiForm } from '@/api/materials/cailiaoshebei/types';
 import { listContractor } from '@/api/project/contractor';
 import { useUserStoreHook } from '@/store/modules/user';
 
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
-const { supply, overdue_type, material_status, operation_status } = toRefs<any>(
+const { overdue_type, material_status, operation_status } = toRefs<any>(
   proxy?.useDict('supply', 'material_status', 'overdue_type', 'operation_status')
 );
 // 获取用户 store
@@ -190,6 +204,7 @@ const multiple = ref(true);
 const total = ref(0);
 const batchOptions = ref<any[]>([]);
 const fileUploadRef = ref();
+const operation_s = ref([]); // 移出函数，避免重复定义
 
 const queryFormRef = ref<ElFormInstance>();
 const cailiaoshebeiFormRef = ref<ElFormInstance>();
@@ -213,7 +228,7 @@ const initFormData: CailiaoshebeiForm = {
   finishTime: undefined,
   unit: undefined,
   plan: undefined,
-  file: '',
+  file: null, // 确保初始化为null
   realQuantity: undefined,
   projectId: currentProject.value.id,
   bo: {
@@ -250,13 +265,25 @@ const data = reactive<PageData<CailiaoshebeiForm, CailiaoshebeiQuery>>({
     params: {}
   },
   rules: {
-    id: [{ required: true, message: '主键ID不能为空', trigger: 'blur' }]
+    'bo.materialStatus': [{ required: true, message: '请选择物资执行状态', trigger: 'change' }],
+    'bo.overdueType': [{ required: true, message: '请选择物资逾期类型', trigger: 'change' }],
+    'bo.cause': [{ required: true, message: '请输入逾期原因', trigger: 'blur' }],
+    'bo.actualArrival': [{ required: true, message: '请选择实际到货时间', trigger: 'change' }],
+    'bo.receptionTime': [{ required: true, message: '请选择验收时间', trigger: 'change' }],
+    'bo.acceptanceQuantity': [{ required: true, message: '请输入验收数量', trigger: 'blur' }],
+    'bo.requiredTime': [{ required: true, message: '请选择需求提交时间', trigger: 'change' }],
+    'bo.orderTime': [{ required: true, message: '请选择订货时间', trigger: 'change' }]
   }
 });
 
 const { queryParams, form, rules } = toRefs(data);
 const batchNumber = ref('');
 
+// 计算属性：判断文件是否必填
+const isFileRequired = computed(() => {
+  return form.value.bo.materialStatus < 4 || form.value.bo.materialStatus == 10;
+});
+
 /** 查询物资-材料设备列表 */
 const getList = async () => {
   if (!queryParams.value.batchNumber) return;
@@ -264,20 +291,21 @@ const getList = async () => {
   loading.value = true;
   const res = await listCailiaoshebei(queryParams.value);
   cailiaoshebeiList.value = res.rows;
-
   loading.value = false;
 };
 
-//查询批次列表
+// 查询批次列表
 const getBatchList = async () => {
   const res = await listBatch(queryParams.value);
-  console.log('🚀 ~ getBatchList ~ res:', res);
   batchOptions.value = res.rows;
   total.value = res.total;
+
   try {
-    batchTreeRef.value.setCurrentKey(res.rows[0].batchNumber);
-    form.value.batchNumber = res.rows[0].batchNumber;
-    queryParams.value.batchNumber = res.rows[0].batchNumber;
+    if (res.rows.length > 0) {
+      batchTreeRef.value.setCurrentKey(res.rows[0].batchNumber);
+      form.value.batchNumber = res.rows[0].batchNumber;
+      queryParams.value.batchNumber = res.rows[0].batchNumber;
+    }
   } catch (error) {
     form.value.batchNumber = '';
   }
@@ -289,10 +317,6 @@ const getBatchList = async () => {
 const handleNodeClick = (data: any) => {
   queryParams.value.batchNumber = data.batchNumber;
   form.value.batchNumber = data.batchNumber;
-  console.log('🚀 ~ handleNodeClick ~ form.value:', form.value);
-  if (data.batchNumber === '0') {
-    queryParams.value.batchNumber = '';
-  }
   getList();
 };
 
@@ -310,13 +334,11 @@ const cancel = () => {
 /** 表单重置 */
 const reset = () => {
   const preservedBatchId = form.value.batchNumber;
-
   form.value = {
     ...initFormData,
-    bo: { ...initFormData.bo }, // 新建一个 bo 对象
+    bo: { ...initFormData.bo },
     batchNumber: preservedBatchId
   };
-
   cailiaoshebeiFormRef.value?.resetFields();
 };
 
@@ -335,44 +357,36 @@ const resetQuery = () => {
 /** 多选框选中数据 */
 const handleSelectionChange = (selection: CailiaoshebeiVO[]) => {
   ids.value = selection.map((item) => item.id);
-  single.value = selection.length != 1;
+  single.value = selection.length !== 1;
   multiple.value = !selection.length;
 };
 
-/** 新增按钮操作 */
-const handleAdd = () => {
-  reset();
-  dialog.visible = true;
-  dialog.title = '添加物资-材料设备';
-};
-
 /** 修改按钮操作 */
-const operation_s = ref([]);
 const handleUpdate = async (row?: CailiaoshebeiVO) => {
   reset();
   operation_s.value = operation_status.value.slice(0, 2);
   Object.assign(form.value.bo, row);
-  console.log('🚀 ~ handleUpdate ~ form.value:', form.value);
+  handleChange(form.value.bo.materialStatus);
   dialog.visible = true;
   dialog.title = '修改物资-材料设备';
 };
 
 /** 提交按钮 */
 const submitForm = () => {
-  Object.keys(form.value.bo).forEach((key) => {
-    if (form.value.bo[key] == 'null' || form.value.bo[key] == null) {
-      delete form.value.bo[key];
-    }
-  });
-  console.log('🚀 ~ submitForm ~ form.value:', form.value.bo);
-
   cailiaoshebeiFormRef.value?.validate(async (valid: boolean) => {
     if (valid) {
       buttonLoading.value = true;
+
+      // 清理空值
+      Object.keys(form.value.bo).forEach((key) => {
+        if (form.value.bo[key] == 'null' || form.value.bo[key] == null) {
+          delete form.value.bo[key];
+        }
+      });
+
       if (fileUploadRef.value) {
         fileUploadRef.value!.submitUpload();
       } else {
-        form.value.bo.file = null;
         await addCailiaoshebei(form.value.bo).finally(() => (buttonLoading.value = false));
         dialog.visible = false;
         getList();
@@ -381,26 +395,6 @@ const submitForm = () => {
   });
 };
 
-/** 新增批次 */
-const addBatch = async () => {
-  await proxy?.$modal.confirm('是否确认新增批次？').finally(() => (loading.value = false));
-  const res = await getBatch({ projectId: currentProject.value.id });
-  console.log('🚀 ~ addBatch ~ res:', res);
-  await getBatchList();
-
-  proxy?.$modal.msgSuccess('新增成功');
-};
-
-/** 删除批次 */
-const handleDeleteBatch = async () => {
-  const _ids = batchTreeRef.value.getCurrentNode()?.id;
-  await proxy?.$modal.confirm('是否确认删除批次编号为"' + _ids + '"的数据项？').finally(() => (loading.value = false));
-  await delBatch(_ids);
-  proxy?.$modal.msgSuccess('删除成功');
-  queryParams.value.batchNumber = '';
-  await getBatchList();
-};
-
 /** 删除按钮操作 */
 const handleDelete = async (row?: CailiaoshebeiVO) => {
   const _ids = row?.id || ids.value;
@@ -418,13 +412,24 @@ const handleUploadSuccess = () => {
 };
 
 const handleChange = (value: number) => {
+  // 清空文件字段当状态改变时
+  form.value.file = null;
+  if (value == 1 || value == 2 || value == 3) {
+    form.value.bo.operationStatus = '1';
+    form.value.bo.billType = '1';
+  }
+  if (value == 10) {
+    form.value.bo.operationStatus = '2';
+    form.value.bo.billType = '2';
+  }
   if (!(value < 4 || value == 10)) {
     form.value.bo.billType = '';
-    form.value.file = '';
   } else if (value == 3) {
     form.value.bo.overdueType = '';
     form.value.bo.cause = '';
   }
+  // 触发文件字段验证更新
+  cailiaoshebeiFormRef.value?.validateField('file');
 };
 
 /** 查询供货商列表 */
@@ -443,10 +448,10 @@ onMounted(() => {
   getSupplierList();
 });
 
-//监听项目id刷新数据
+// 监听项目id刷新数据
 const listeningProject = watch(
   () => currentProject.value.id,
-  (nid, oid) => {
+  (nid) => {
     queryParams.value.projectId = nid;
     form.value.projectId = nid;
     getBatchList();