feat: 综合业务模块页面重构与交互完善

hsy

16 小时以前 2d3530a7c11557a40807ad7c0b9e302ce6ce3a9f

 src/views/equipmentManagement/ledger/Form.vue

@@ -1,6 +1,24 @@
<template>
  <el-form :model="form" label-width="120px" :rules="formRules" ref="formRef">
    <el-divider content-position="left">基础信息</el-divider>
    <el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="设备编号" prop="uniqueCode">
          <div style="display: flex; gap: 10px; width: 100%;">
            <el-checkbox
              v-model="form.autoGenerateUniqueCode"
              v-if="operationType === 'add'"
              >自动生成
            </el-checkbox>
            <el-input 
              v-model="form.uniqueCode" 
              :placeholder="form.autoGenerateUniqueCode ? '保存后自动生成' : '请输入设备编号'" 
              :disabled="form.autoGenerateUniqueCode || operationType === 'view'" 
              clearable
            />
          </div>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="设备名称" prop="deviceName">
          <el-input v-model="form.deviceName" placeholder="请输入设备名称" />
@@ -38,8 +56,8 @@
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="供应商" prop="supplierName">
          <el-input v-model="form.supplierName" placeholder="请输入供应商" />
        <el-form-item label="出厂编号" prop="factoryNumber">
          <el-input v-model="form.factoryNumber" placeholder="请输入出厂编号" />
        </el-form-item>
      </el-col>
      <el-col :span="12">
@@ -48,24 +66,61 @@
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="单位" prop="unit">
          <el-input v-model="form.unit" placeholder="请输入单位" />
        <el-form-item label="责任人" prop="responsiblePerson">
          <el-input v-model="form.responsiblePerson" placeholder="请输入责任人" />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="启用折旧" prop="isDepr">
          <el-switch v-model="form.isDepr" :active-value="1" :inactive-value="2" />
        <el-form-item label="建档日期" prop="filingDate">
          <el-date-picker
            style="width: 100%"
            v-model="form.filingDate"
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD"
            type="date"
            placeholder="请选择建档日期"
            clearable
          />
        </el-form-item>
      </el-col>
      <el-col :span="12" v-if="form.isDepr === 1">
        <el-form-item label="每年折旧金额" prop="annualDepreciationAmount">
          <el-input-number 
            :step="0.01" 
            :min="0" 
    </el-row>

    <el-divider content-position="left">采购信息</el-divider>
    <el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="供应商" prop="supplierName">
          <el-input v-model="form.supplierName" placeholder="请输入供应商" />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="制造厂商" prop="manufacturer">
          <el-input v-model="form.manufacturer" placeholder="请输入制造厂商" />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="购置日期" prop="purchaseDate">
          <el-date-picker
            style="width: 100%"
            v-model="form.annualDepreciationAmount"
            placeholder="请输入每年折旧金额"
            v-model="form.purchaseDate"
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD"
            type="date"
            placeholder="请选择购置日期"
            clearable
          />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="资产原值" prop="originalAssetValue">
          <el-input-number :step="0.01" :min="0" style="width: 100%"
            v-model="form.originalAssetValue"
            placeholder="请输入资产原值"
          />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="单位" prop="unit">
          <el-input v-model="form.unit" placeholder="请输入单位" />
        </el-form-item>
      </el-col>
      <el-col :span="12">
@@ -125,20 +180,46 @@
          />
        </el-form-item>
      </el-col>
      <!-- <el-col :span="12">
        <el-form-item label="录入人" prop="createUser">
          <el-input v-model="form.createUser" placeholder="请输入录入人" />
    </el-row>

    <el-divider content-position="left">技术参数</el-divider>
    <el-row :gutter="20">
      <el-col :span="24">
        <el-form-item label="主要技术参数" prop="technicalParameters">
          <el-input type="textarea" :rows="3" v-model="form.technicalParameters" placeholder="请输入主要技术参数" />
        </el-form-item>
      </el-col> -->
      </el-col>
      <el-col :span="24">
        <el-form-item label="主要用途" prop="mainPurpose">
          <el-input type="textarea" :rows="3" v-model="form.mainPurpose" placeholder="请输入主要用途" />
        </el-form-item>
      </el-col>
    </el-row>

    <el-divider content-position="left">运行管理</el-divider>
    <el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="录入日期" prop="createTime">
        <el-form-item label="设备状态" prop="status">
          <el-select
            v-model="form.status"
            placeholder="请选择"
            :disabled="operationType === 'edit'"
            style="width: 100%"
          >
            <el-option label="停用" :value="0" />
            <el-option label="启用" :value="1" />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="启用日期" prop="activationDate">
          <el-date-picker
            style="width: 100%"
            v-model="form.createTime"
            v-model="form.activationDate"
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD HH:mm:ss"
            value-format="YYYY-MM-DD"
            type="date"
            placeholder="请选择录入日期"
            placeholder="请选择启用日期"
            clearable
          />
        </el-form-item>
@@ -151,11 +232,28 @@
                  format="YYYY-MM-DD"
                  value-format="YYYY-MM-DD"
                  type="date"
                  placeholder="请选择录入日期"
            placeholder="请选择预计运行时间"
                  clearable
               />
            </el-form-item>
         </el-col>
      <el-col :span="12">
        <el-form-item label="启用折旧" prop="isDepr">
          <el-switch v-model="form.isDepr" :active-value="1" :inactive-value="2" />
        </el-form-item>
      </el-col>
      <el-col :span="12" v-if="form.isDepr === 1">
        <el-form-item label="每年折旧金额" prop="annualDepreciationAmount">
          <el-input-number 
            :step="0.01" 
            :min="0" 
            style="width: 100%"
            v-model="form.annualDepreciationAmount"
            placeholder="请输入每年折旧金额"
          />
        </el-form-item>
      </el-col>
      
      <el-col :span="24">
        <el-form-item label="设备图片" prop="storageBlobDTOs">
          <AttachmentUploadImage
@@ -172,7 +270,6 @@

<script setup>
import useFormData from "@/hooks/useFormData";
// import useUserStore from "@/store/modules/user";
import { getLedgerById } from "@/api/equipmentManagement/ledger";
import dayjs from "dayjs";
import {
@@ -190,7 +287,7 @@
  name: "设备台账表单",
});
const formRef = ref(null);
const operationType = ref('');
const operationType = ref('add');
// 设备类型固定选项
const deviceTypeOptions = ref([
  '生产设备',
@@ -200,6 +297,18 @@
  '其他设备'
]);
const formRules = {
  uniqueCode: [
    { 
      validator: (rule, value, callback) => {
        if (!form.autoGenerateUniqueCode && (value === undefined || value === null || value === '')) {
          callback(new Error('请输入设备编号'));
        } else {
          callback();
        }
      }, 
      trigger: "blur" 
    }
  ],
   deviceName: [{ required: true, trigger: "blur", message: "请输入" }],
   deviceModel: [{ required: true, trigger: "blur", message: "请输入" }],
   type: [{ required: true, trigger: "change", message: "请选择或输入设备类型" }],
@@ -209,6 +318,7 @@
   taxIncludingPriceUnit: [{ required: true, trigger: "blur", message: "请输入" }],
   taxRate: [{ required: true, trigger: "change", message: "请输入" }],
   planRuntimeTime: [{ required: true, trigger: "change", message: "请选择" }],
  status: [{ required: true, trigger: "change", message: "请选择" }],
   annualDepreciationAmount: [
      { 
         validator: (rule, value, callback) => {
@@ -224,23 +334,40 @@
}

const { form, resetForm } = useFormData({
  // Basic Info
  autoGenerateUniqueCode: true,
  uniqueCode: undefined, // 唯一性编号
  deviceName: undefined, // 设备名称
  deviceModel: undefined, // 规格型号
  deviceBrand: undefined, // 设备品牌
  type: undefined, // 设备类型
  supplierName: undefined, // 供应商
  factoryNumber: undefined, // 出厂编号
  storageLocation: undefined, // 存放位置
  isDepr: 2, // 是否启用折旧 1-是 2-否
  annualDepreciationAmount: undefined, // 每年折旧金额
  responsiblePerson: undefined, // 责任人
  filingDate: dayjs().format("YYYY-MM-DD"), // 建档日期
  
  // Purchase Info
  supplierName: undefined, // 供应商
  manufacturer: undefined, // 制造厂商
  purchaseDate: undefined, // 购置日期
  originalAssetValue: undefined, // 资产原值
  unit: undefined, // 单位
  number: 1, // 数量
  taxIncludingPriceUnit: undefined, // 含税单价
  taxIncludingPriceTotal: undefined, // 含税总价
  taxRate: undefined, // 税率
  unTaxIncludingPriceTotal: undefined, // 不含税总价
  // createUser: useUserStore().nickName, // 录入人
  createTime: dayjs().format("YYYY-MM-DD HH:mm:ss"), // 录入日期
   planRuntimeTime: dayjs().format("YYYY-MM-DD"), // 录入日期
  
  // Technical Specs
  technicalParameters: undefined, // 主要技术参数
  mainPurpose: undefined, // 主要用途
  
  // Operation Info
  status: 1, // 设备状态 (0停用 1启用)
  activationDate: undefined, // 启用日期
  planRuntimeTime: dayjs().format("YYYY-MM-DD"), // 预计运行时间
  isDepr: 2, // 是否启用折旧 1-是 2-否
  annualDepreciationAmount: undefined, // 每年折旧金额
  storageBlobDTOs: undefined, // 设备图片提交
  storageBlobVOs: undefined, // 设备图片展示
});
@@ -257,25 +384,46 @@

const loadForm = async (id) => {
   if (id) {
      operationType.value = 'edit'
    operationType.value = 'edit';
  } else {
    operationType.value = 'add';
   }
  const { code, data } = await getLedgerById(id);
  if (code == 200) {
    form.autoGenerateUniqueCode = false;
    form.uniqueCode = data.uniqueCode;
    form.deviceName = data.deviceName;
    form.deviceModel = data.deviceModel;
    form.deviceBrand = data.deviceBrand;
    form.type = data.type;
    form.supplierName = data.supplierName;
    form.factoryNumber = data.factoryNumber;
    form.storageLocation = data.storageLocation;
    form.isDepr = data.isDepr;
    form.annualDepreciationAmount = data.annualDepreciationAmount;
    form.responsiblePerson = data.responsiblePerson;
    form.filingDate = data.filingDate;

    form.supplierName = data.supplierName;
    form.manufacturer = data.manufacturer;
    if (data.purchaseDate) {
      form.purchaseDate = dayjs(data.purchaseDate).format('YYYY-MM-DD');
    }
    form.originalAssetValue = data.originalAssetValue;
    form.unit = data.unit;
    form.number = 1;
    form.taxIncludingPriceUnit = data.taxIncludingPriceUnit;
    form.taxIncludingPriceTotal = data.taxIncludingPriceTotal;
    form.taxRate = data.taxRate;
    form.unTaxIncludingPriceTotal = data.unTaxIncludingPriceTotal;
    form.createTime = data.createTime;

    form.technicalParameters = data.technicalParameters;
    form.mainPurpose = data.mainPurpose;

    form.status = data.status != null ? data.status : 1;
    if (data.activationDate) {
      form.activationDate = dayjs(data.activationDate).format('YYYY-MM-DD');
    }
    form.isDepr = data.isDepr;
    form.annualDepreciationAmount = data.annualDepreciationAmount;
    
    // 预计运行时间：后端返回后转为 YYYY-MM-DD 以便日期选择器正确展示
    if (data.planRuntimeTime) {
      form.planRuntimeTime = dayjs(data.planRuntimeTime).format('YYYY-MM-DD');
@@ -319,6 +467,7 @@
// 重置表单数据和校验状态
const resetFormAndValidate = () => {
  resetForm();
  operationType.value = 'add'; // 重置为新增
  clearValidate();
};