头部样式修改、适配不同机型

gaoluyang

3 天以前 77861fcc5ee1c4f8e7c6412b373cb438c7313930

 src/pages/equipmentManagement/repair/add.vue

@@ -4,31 +4,28 @@
      <PageHeader :title="operationType === 'edit' ? '编辑报修' : '新增报修'" @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" :model="form" label-width="110">
         <!-- 基本信息 -->
         <u-cell-group title="基本信息">
            <u-form-item label="设备名称" prop="deviceLedgerId" required>
            <u-form-item label="设备名称" prop="deviceLedgerId" required border-bottom>
               <u-input
                  v-model="deviceNameText"
                  placeholder="请选择设备名称"
                  readonly
                  @click="showDevicePicker"
                  clearable
               >
                  <template #suffix>
                     <u-icon name="scan" @click.stop="startScan" class="scan-icon" />
                  </template>
               </u-input>
               />
               <template #right>
                  <u-icon name="scan" @click="startScan" class="scan-icon" />
               </template>
            </u-form-item>
            <u-form-item label="规格型号">
            <u-form-item label="规格型号" prop="deviceModel" border-bottom>
               <u-input
                  v-model="form.deviceModel"
                  placeholder="请输入规格型号"
                  readonly
                  clearable
               />
            </u-form-item>
            <u-form-item label="报修日期" prop="repairTime" required>
            <u-form-item label="报修日期" prop="repairTime" required border-bottom>
               <u-input
                  v-model="form.repairTime"
                  placeholder="请选择报修日期"
@@ -36,21 +33,25 @@
                  @click="showDatePicker"
                  clearable
               />
               <template #right>
                  <u-icon name="arrow-right" @click="showDatePicker"></u-icon>
               </template>
            </u-form-item>
            <u-form-item label="报修人" prop="repairName" required>
            <u-form-item label="报修人" prop="repairName" required border-bottom>
               <u-input
                  v-model="form.repairName"
                  placeholder="请输入报修人"
                  clearable
               />
            </u-form-item>
            <u-form-item label="故障现象" prop="remark" required>
            <u-form-item label="故障现象" prop="remark" required border-bottom>
               <u-textarea
                  v-model="form.remark"
                  rows="3"
                  placeholder="请输入故障现象"
                  :maxlength="200"
                  clearable
                  count
                  :autoHeight="true"
                  maxlength="200"
               />
            </u-form-item>
         </u-cell-group>
@@ -63,24 +64,22 @@
      </u-form>

      <!-- 设备选择器 -->
      <u-popup v-model="showDevice" mode="bottom">
         <u-picker
            v-model="devicePickerValue"
            :columns="deviceColumns"
            @confirm="onDeviceConfirm"
            @cancel="showDevice = false"
         />
      </u-popup>
      <up-action-sheet
         :show="showDevice"
         :actions="deviceActionList"
         title="选择设备名称"
         @select="onDeviceSelect"
         @close="showDevice = false"
      />

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

@@ -91,15 +90,12 @@
import { getDeviceLedger } from '@/api/equipmentManagement/ledger';
import { addRepair, editRepair, getRepairById } from '@/api/equipmentManagement/repair';
import dayjs from "dayjs";
// 替换 Vant 的 toast
// import { showToast } from 'vant';

// 替换 toast 方法
import { formatDateToYMD } from '@/utils/ruoyi';
const showToast = (message) => {
  uni.showToast({
    title: message,
    icon: 'none'
  })
   uni.showToast({
      title: message,
      icon: 'none'
   })
}

defineOptions({
@@ -111,13 +107,18 @@
const operationType = ref('add');
const loading = ref(false);
const showDevice = ref(false);
const devicePickerValue = ref([]);
const showDate = ref(false);
const currentDate = ref([new Date().getFullYear(), new Date().getMonth() + 1, new Date().getDate()]);
const pickerDateValue = ref(Date.now());

// 设备选项
const deviceOptions = ref([]);
const deviceNameText = ref('');
const deviceActionList = computed(() => {
   return deviceOptions.value.map(item => ({
      name: item.deviceName,
      value: item.id
   }));
});

// 扫码相关状态
const isScanning = ref(false);
@@ -138,14 +139,6 @@
   repairTime: dayjs().format("YYYY-MM-DD"), // 报修日期
   repairName: undefined, // 报修人
   remark: undefined, // 故障现象
});

// 设备选择器列
const deviceColumns = computed(() => {
   return deviceOptions.value.map(item => ({
      text: item.deviceName,
      value: item.id
   }));
});

// 加载设备列表
@@ -209,11 +202,6 @@
      remark: undefined,
   };
   deviceNameText.value = '';
};

const resetFormAndValidate = () => {
   resetForm();
   clearValidate();
};

// 扫描二维码功能
@@ -281,11 +269,10 @@
};

// 确认设备选择
const onDeviceConfirm = ({ selectedValues, selectedOptions }) => {
   form.value.deviceLedgerId = selectedOptions[0].value;
   devicePickerValue.value = selectedValues;
const onDeviceSelect = (e) => {
   form.value.deviceLedgerId = e.value;
   setDeviceModel(e.value);
   showDevice.value = false;
   setDeviceModel(selectedOptions[0].value);
};

// 显示日期选择器
@@ -294,9 +281,8 @@
};

// 确认日期选择
const onDateConfirm = ({ selectedValues }) => {
   form.value.repairTime = selectedValues.join('-');
   currentDate.value = selectedValues;
const onDateConfirm = (e) => {
   form.value.repairTime = formatDateToYMD(e.value);
   showDate.value = false;
};

@@ -322,18 +308,37 @@
const sendForm = async () => {
   try {
      // 手动验证表单
      await formRef.value?.validate();
		
      let isValid = true;
      let errorMessage = '';
      if (!form.value.deviceLedgerId) {
         isValid = false;
         errorMessage = '请选择设备名称';
      } else if (!form.value.repairTime || form.value.repairTime.trim() === '') {
         isValid = false;
         errorMessage = '请选择报修日期';
      } else if (!form.value.repairName || form.value.repairName.trim() === '') {
         isValid = false;
         errorMessage = '请输入报修人';
      } else if (!form.value.remark || form.value.remark.trim() === '') {
         isValid = false;
         errorMessage = '请输入故障现象';
      }

      if (!isValid) {
         showToast(errorMessage);
         return;
      }

      loading.value = true;
      const id = getPageId();
		

      // 准备提交数据
      const submitData = { ...form.value };
		

      const { code } = id
         ? await editRepair({ id: id, ...submitData })
         : await addRepair(submitData);
		

      if (code == 200) {
         showToast(`${id ? "编辑" : "新增"}报修成功`);
         setTimeout(() => {
@@ -379,6 +384,7 @@
</script>

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