修改组件

gaoluyang

2 天以前 025e46e11cb2962fd7692adfa401333758cc779b

 src/pages/equipmentManagement/ledger/detail.vue

@@ -4,7 +4,7 @@
      <PageHeader title="设备台账详情" @back="goBack" />
      
      <!-- 表单内容 -->
      <u-form @submit="sendForm" ref="formRef" label-width="110" input-align="right" error-message-align="right">
      <u-form @submit="sendForm" ref="formRef" :rules="formRules" label-width="110">
         <!-- 基本信息 -->
         <u-cell-group title="基本信息">
            <u-form-item label="设备名称" prop="deviceName" required border-bottom>
@@ -17,102 +17,128 @@
            <u-form-item label="规格型号" prop="deviceModel" required border-bottom>
               <u-input
                  v-model="form.deviceModel"
                  :disabled="(form.deviceModel != null && operationType === 'edit')"
                  placeholder="请输入规格型号"
                  clearable
               />
            </u-form-item>
            <u-form-item label="设备编号" prop="deviceNumber" required border-bottom>
            <u-form-item label="设备品牌" prop="deviceBrand" required border-bottom>
               <u-input
                  v-model="form.deviceNumber"
                  placeholder="请输入设备编号"
                  v-model="form.deviceBrand"
                  placeholder="请输入设备品牌"
                  clearable
               />
            </u-form-item>
            <u-form-item label="购买日期" prop="purchaseDate" required border-bottom>
            <u-form-item label="供应商" prop="supplierName" required border-bottom>
               <u-input
                  v-model="form.purchaseDate"
                  placeholder="请选择购买日期"
                  readonly
                  @click="showDatePicker"
                  clearable
               />
            </u-form-item>
            <u-form-item label="购买价格" prop="purchasePrice" required border-bottom>
               <u-input
                  v-model="form.purchasePrice"
                  type="number"
                  placeholder="请输入购买价格"
                  clearable
               />
            </u-form-item>
            <u-form-item label="供应商" prop="supplier" required border-bottom>
               <u-input
                  v-model="form.supplier"
                  v-model="form.supplierName"
                  placeholder="请输入供应商"
                  clearable
               />
            </u-form-item>
            <u-form-item label="使用部门" prop="department" required border-bottom>
            <u-form-item label="存放位置" prop="storageLocation" required border-bottom>
               <u-input
                  v-model="form.department"
                  placeholder="请输入使用部门"
                  v-model="form.storageLocation"
                  placeholder="请输入存放位置"
                  clearable
               />
            </u-form-item>
            <u-form-item label="税率" prop="taxRate" required border-bottom>
            <u-form-item label="单位" prop="unit" required border-bottom>
               <u-input
                  v-model="form.unit"
                  placeholder="请输入单位"
                  clearable
               />
            </u-form-item>
            <u-form-item label="启用折旧" prop="enableDepreciation" required border-bottom>
               <u-switch
                  v-model="form.enableDepreciation"
                  :active-value="true"
                  :inactive-value="false"
               />
            </u-form-item>
            <u-form-item label="数量" prop="number" required border-bottom>
               <u-input
                  v-model="form.number"
                  type="number"
                  placeholder="请输入数量"
                  clearable
                  @blur="mathNum"
               />
            </u-form-item>
            <u-form-item label="含税单价" prop="taxIncludingPriceUnit" required border-bottom>
               <u-input
                  v-model="form.taxIncludingPriceUnit"
                  type="number"
                  placeholder="请输入含税单价"
                  clearable
                  @blur="mathNum"
               />
            </u-form-item>
            <u-form-item label="含税总价" prop="taxIncludingPriceTotal" required border-bottom>
               <u-input
                  v-model="form.taxIncludingPriceTotal"
                  type="number"
                  placeholder="自动生成"
                  disabled
               />
            </u-form-item>
            <u-form-item label="税率(%)" prop="taxRate" required border-bottom>
               <u-input
                  v-model="form.taxRate"
                  placeholder="请选择税率"
                  readonly
                  @click="showTaxRatePicker"
                  clearable
                  @click="showTaxRatePicker = true"
               />
               <template #right>
                  <u-icon name="arrow-right" @click="showTaxRatePicker = true"></u-icon>
               </template>
               <up-action-sheet
                  :show="showTaxRatePicker"
                  :actions="taxRateActionList"
                  title="选择税率"
                  @select="onTaxRateSelect"
                  @close="showTaxRatePicker = false"
               />
            </u-form-item>
            <u-form-item label="使用状态" prop="status" required border-bottom>
            <u-form-item label="不含税总价" prop="unTaxIncludingPriceTotal" required border-bottom>
               <u-input
                  v-model="form.status"
                  placeholder="请输入使用状态"
                  clearable
                  v-model="form.unTaxIncludingPriceTotal"
                  type="number"
                  placeholder="自动生成"
                  disabled
               />
            </u-form-item>
            <u-form-item label="备注" border-bottom>
               <u-textarea
                  v-model="form.remark"
                  placeholder="请输入备注"
                  :maxlength="200"
                  count
                  :autoHeight="true"
            <u-form-item label="录入日期" prop="createTime" required border-bottom>
               <u-input
                  v-model="form.createTime"
                  placeholder="请选择录入日期"
                  readonly
                  @click="showDatePicker"
                  clearable
               />
               <template #right>
                  <u-icon name="arrow-right" @click="showDatePicker"></u-icon>
               </template>
            </u-form-item>
         </u-cell-group>
			
         <!-- 提交按钮 -->
         <view class="footer-btns">
            <u-button class="cancel-btn" @click="goBack">取消</u-button>
            <u-button class="save-btn" type="primary" @click="sendForm" :loading="loading">保存</u-button>
         </view>
      </u-form>
		
      <!-- 提交按钮 -->
      <view class="footer-btns">
         <u-button class="cancel-btn" @click="goBack">取消</u-button>
         <u-button class="save-btn" type="primary" @click="sendForm" :loading="loading">保存</u-button>
      </view>
   </u-form>

      <!-- 税率选择器 -->
      <u-popup v-model="showTaxRate" mode="bottom">
         <u-picker
            v-model="taxRatePickerValue"
            :columns="taxRateOptions"
            @confirm="onTaxRateConfirm"
            @cancel="showTaxRate = false"
         />
      </u-popup>

      <!-- 日期选择器 -->
      <u-popup v-model="showDate" mode="bottom">
         <u-datetime-picker
            v-model="currentDate"
            title="选择日期"
   <!-- 日期选择器 -->
<up-datetime-picker
            :show="showDate"
            v-model="pickerDateValue"
            @confirm="onDateConfirm"
            @cancel="showDate = false"
            mode="date"
         />
      </u-popup>
   </view>
</view>
</template>

<script setup>
@@ -143,28 +169,38 @@
const formRef = ref(null);
const operationType = ref('');
const loading = ref(false);
const showTaxRate = ref(false);
const taxRatePickerValue = ref([]);
const showDate = ref(false);
const currentDate = ref([new Date().getFullYear(), new Date().getMonth() + 1, new Date().getDate()]);
const pickerDateValue = ref(Date.now());
const showTaxRatePicker = ref(false);
const taxRateActionList = ref([
  { name: '1', value: 1 },
  { name: '6', value: 6 },
  { name: '13', value: 13 }
]);

// 表单验证规则
const formRules = {
   deviceName: [{ required: true, trigger: "blur", message: "请输入" }],
   deviceModel: [{ required: true, trigger: "blur", message: "请输入" }],
   deviceBrand: [{ required: true, trigger: "blur", message: "请输入" }],
   supplierName: [{ required: true, trigger: "blur", message: "请输入" }],
   storageLocation: [{ required: true, trigger: "blur", message: "请输入" }],
   unit: [{ required: true, trigger: "blur", message: "请输入" }],
   number: [{ required: true, trigger: "blur", message: "请输入" }],
   taxIncludingPriceUnit: [{ required: true, trigger: "blur", message: "请输入" }],
   taxRate: [{ required: true, trigger: "change", message: "请输入" }],
   createTime: [{ required: true, trigger: "change", message: "请选择" }],
};

// 使用 ref 声明表单数据
const form = ref({
   deviceName: undefined, // 设备名称
   deviceModel: undefined, // 规格型号
   deviceBrand: undefined, // 设备品牌
   supplierName: undefined, // 供应商
   storageLocation: undefined, // 存放位置
   unit: undefined, // 单位
   enableDepreciation: false, // 启用折旧
   number: undefined, // 数量
   taxIncludingPriceUnit: undefined, // 含税单价
   taxIncludingPriceTotal: undefined, // 含税总价
@@ -173,14 +209,7 @@
   createTime: dayjs().format("YYYY-MM-DD"), // 录入日期
});

// 税率选项
const taxRateOptions = computed(() => {
   return [
      { text: '1', value: 1 },
      { text: '6', value: 6 },
      { text: '13', value: 13 }
   ]
});


// 加载表单数据
const loadForm = async (id) => {
@@ -192,8 +221,11 @@
      if (code == 200) {
         form.value.deviceName = data.deviceName;
         form.value.deviceModel = data.deviceModel;
         form.value.deviceBrand = data.deviceBrand || '';
         form.value.supplierName = data.supplierName;
         form.value.storageLocation = data.storageLocation || '';
         form.value.unit = data.unit;
         form.value.enableDepreciation = !!data.enableDepreciation;
         form.value.number = data.number;
         form.value.taxIncludingPriceUnit = data.taxIncludingPriceUnit;
         form.value.taxIncludingPriceTotal = data.taxIncludingPriceTotal;
@@ -238,14 +270,17 @@
   form.value = {
      deviceName: undefined,
      deviceModel: undefined,
      deviceBrand: undefined,
      supplierName: undefined,
      storageLocation: undefined,
      unit: undefined,
      enableDepreciation: false,
      number: undefined,
      taxIncludingPriceUnit: undefined,
      taxIncludingPriceTotal: undefined,
      taxRate: undefined,
      unTaxIncludingPriceTotal: undefined,
      createTime: dayjs().format("YYYY-MM-DD HH:mm:ss"),
      createTime: dayjs().format("YYYY-MM-DD"),
   };
};

@@ -316,16 +351,18 @@
   return options.id;
};

// 显示税率选择器
const showTaxRatePicker = () => {
   showTaxRate.value = true;
};


// 确认税率选择
const onTaxRateConfirm = ({ selectedValues, selectedOptions }) => {
   form.value.taxRate = selectedOptions[0].value;
   taxRatePickerValue.value = selectedValues;
   showTaxRate.value = false;
const onTaxRateConfirm = (e) => {
   form.value.taxRate = e.value;
   mathNum(); // 重新计算
};

// 选择税率
const onTaxRateSelect = (e) => {
   form.value.taxRate = e.value;
   showTaxRatePicker.value = false;
   mathNum(); // 重新计算
};

@@ -335,10 +372,12 @@
};

// 确认日期选择
const onDateConfirm = ({ selectedValues }) => {
const onDateConfirm = (e) => {
   // 只保存年月日，不包含时分秒
   form.value.createTime = selectedValues.join('-');
   currentDate.value = selectedValues;
   const date = new Date(e.value);
   form.value.createTime = date.getFullYear() + '-' + 
      String(date.getMonth() + 1).padStart(2, '0') + '-' + 
      String(date.getDate()).padStart(2, '0');
   showDate.value = false;
};

@@ -354,6 +393,7 @@
</script>

<style scoped lang="scss">
@import '@/static/scss/form-common.scss';
.ledger-detail {
   min-height: 100vh;
   background: #f8f9fa;