设备维修添加维修状态

zhangwencui

2 天以前 d3fe17c4cc5ae2dda4e2c1cfd5c506faa74f6a0d

 src/pages/equipmentManagement/repair/maintain.vue

@@ -1,69 +1,88 @@
<template>
   <view class="repair-maintain">
      <!-- 使用通用页面头部组件 -->
      <PageHeader title="新增维修" @back="goBack" />
		
    <PageHeader title="新增维修"
                @back="goBack" />
      <!-- 表单内容 -->
      <u-form ref="formRef" :model="form" :rules="formRules" label-width="140rpx">
    <u-form ref="formRef"
            :model="form"
            :rules="formRules"
            label-width="140rpx">
         <!-- 基本信息 -->
         <u-cell-group title="维修信息" inset>
            <u-form-item prop="maintenanceName" label="维修人" required>
               <u-input
                  v-model="form.maintenanceName"
      <u-cell-group title="维修信息"
                    inset>
        <u-form-item prop="maintenanceName"
                     label="维修人"
                     required>
          <u-input v-model="form.maintenanceName"
                  placeholder="请输入维修人"
                  clearable
               />
                   clearable />
            </u-form-item>
            <u-form-item prop="maintenanceResult" label="维修结果" required>
               <u-input
                  v-model="form.maintenanceResult"
        <u-form-item prop="maintenanceResult"
                     label="维修结果"
                     required>
          <u-input v-model="form.maintenanceResult"
                  type="textarea"
                  rows="3"
                  placeholder="请输入维修结果"
                  clearable
                  maxlength="200"
                  show-word-limit
               />
                   show-word-limit />
            </u-form-item>
            <u-form-item label="维修日期" prop="maintenanceTime" required border-bottom>
               <u-input
                  v-model="form.maintenanceTime"
        <u-form-item label="维修状态"
                     prop="repairTime"
                     required
                     border-bottom>
          <u-input v-model="repairStatusText"
                   placeholder="请选择维修状态"
                   readonly
                   @click="openRepairStatusPicker"
                   clearable />
          <template #right>
            <u-icon name="arrow-right"
                    @click="openRepairStatusPicker"></u-icon>
          </template>
        </u-form-item>
        <u-form-item label="维修日期"
                     prop="maintenanceTime"
                     required
                     border-bottom>
          <u-input v-model="form.maintenanceTime"
                  placeholder="请选择维修日期"
                  readonly
                  @click="showDatePicker = true"
                  clearable
               />
                   clearable />
               <template #right>
                  <u-icon name="arrow-right" @click="showDatePicker = true"></u-icon>
            <u-icon name="arrow-right"
                    @click="showDatePicker = true"></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" @click="submitForm" :loading="loading">保存</u-button>
        <u-button class="cancel-btn"
                  @click="goBack">取消</u-button>
        <u-button class="save-btn"
                  @click="submitForm"
                  :loading="loading">保存</u-button>
         </view>
      </u-form>

      <!-- 日期选择器 -->
      <up-datetime-picker
         :show="showDatePicker"
    <up-datetime-picker :show="showDatePicker"
         v-model="pickerDateValue"
         mode="datetime"
         title="选择日期"
         format="YYYY-MM-DD HH:mm:ss"
         @confirm="onDateConfirm"
         @cancel="showDatePicker = false"
      />
                        @cancel="showDatePicker = false" />
   </view>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { onShow } from '@dcloudio/uni-app';
import PageHeader from '@/components/PageHeader.vue';
import { addMaintain } from '@/api/equipmentManagement/repair';
  import { ref, onMounted } from "vue";
  import { onShow } from "@dcloudio/uni-app";
  import PageHeader from "@/components/PageHeader.vue";
  import { addMaintain } from "@/api/equipmentManagement/repair";
import useUserStore from "@/store/modules/user";
import dayjs from "dayjs";

@@ -77,34 +96,55 @@
const formRef = ref(null);
const loading = ref(false);
const showDatePicker = ref(false);
const pickerDateValue = ref(Date.now());; // 使用时间戳
  const pickerDateValue = ref(Date.now()); // 使用时间戳

// 表单验证规则
const formRules = {
   maintenanceName: [{ required: true, trigger: "blur", message: "请输入维修人" }],
   maintenanceResult: [{ required: true, trigger: "blur", message: "请输入维修结果" }],
   maintenanceTime: [{ required: true, trigger: "change", message: "请选择维修日期" }],
    maintenanceName: [
      { required: true, trigger: "blur", message: "请输入维修人" },
    ],
    maintenanceResult: [
      { required: true, trigger: "blur", message: "请输入维修结果" },
    ],
    maintenanceTime: [
      { required: true, trigger: "change", message: "请选择维修日期" },
    ],
};

  const repairStatusOptions = ref([
    { name: "待维修", value: "0" },
    { name: "完结", value: "1" },
    { name: "失败", value: "2" },
  ]);
  const repairStatusText = ref("完结");
  // 打开报修状态选择器
  const openRepairStatusPicker = () => {
    uni.showActionSheet({
      itemList: repairStatusOptions.value.map(item => item.name),
      success: res => {
        form.value.status = repairStatusOptions.value[res.tapIndex].value;
        repairStatusText.value = repairStatusOptions.value[res.tapIndex].name;
      },
    });
  };
// 使用 ref 声明表单数据
const form = ref({
   maintenanceName: userStore.nickName || '', // 默认使用当前用户昵称
    maintenanceName: userStore.nickName || "", // 默认使用当前用户昵称
   maintenanceResult: undefined, // 维修结果
   maintenanceTime: dayjs().format("YYYY-MM-DD HH:mm:ss"), // 维修日期（只显示日期）
});

// 自定义showToast函数
const showToast = (message) => {
  const showToast = message => {
  uni.showToast({
    title: message,
    icon: 'none'
  })
      icon: "none",
    });
};

// 重置表单数据和校验状态
const resetForm = () => {
   form.value = {
      maintenanceName: userStore.nickName || '',
      maintenanceName: userStore.nickName || "",
      maintenanceResult: undefined,
      maintenanceTime: dayjs().format("YYYY-MM-DD HH:mm:ss"),
   };
@@ -123,7 +163,7 @@
         submitFormData();
      }
   } catch (e) {
      showToast('表单验证失败');
      showToast("表单验证失败");
   }
};

@@ -134,18 +174,18 @@
      const id = getPageId();
      
      if (!id) {
         showToast('参数错误');
        showToast("参数错误");
         loading.value = false;
         return;
      }
		
      form.value.status = Number(form.value.status);
      // 准备提交数据，maintenanceTime 加上当前时分秒
      const submitData = { ...form.value };
      
      const { code } = await addMaintain({ id: id, ...submitData });
      
      if (code == 200) {
         showToast('新增维修成功');
        showToast("新增维修成功");
         resetFormAndValidate();
         setTimeout(() => {
            goBack();
@@ -157,35 +197,36 @@
      console.log(e);
      
      loading.value = false;
      showToast('操作失败');
      showToast("操作失败");
   }
};

// 返回上一页
const goBack = () => {
   uni.removeStorageSync('repairId');
    uni.removeStorageSync("repairId");
   uni.navigateBack();
};

// 获取页面ID
const getPageId = () => {
   const id = uni.getStorageSync('repairId');
    const id = uni.getStorageSync("repairId");
   return id;
};

// 确认日期选择
const onDateConfirm = (e) => {
   form.value.maintenanceTime = dayjs(e.value).format('YYYY-MM-DD HH:mm:ss')
   pickerDateValue.value = e.value
  const onDateConfirm = e => {
    form.value.maintenanceTime = dayjs(e.value).format("YYYY-MM-DD HH:mm:ss");
    pickerDateValue.value = e.value;
   showDatePicker.value = false;
};

// 初始化表单数据
const initForm = () => {
    form.value.status = "1";
   // 设置维修人为当前用户昵称
   form.value.maintenanceName = userStore.nickName || '';
    form.value.maintenanceName = userStore.nickName || "";
   // 设置当前日期（只包含年月日）
   form.value.maintenanceTime = dayjs().format('YYYY-MM-DD HH:mm:ss');
    form.value.maintenanceTime = dayjs().format("YYYY-MM-DD HH:mm:ss");
};

onShow(() => {
@@ -200,7 +241,7 @@
</script>

<style scoped lang="scss">
@import '@/static/scss/form-common.scss';
  @import "@/static/scss/form-common.scss";
.repair-maintain {
   min-height: 100vh;
   background: #f8f9fa;
@@ -224,9 +265,9 @@
.cancel-btn {
   font-weight: 400;
   font-size: 1rem;
   color: #FFFFFF;
    color: #ffffff;
   width: 6.375rem;
   background: #C7C9CC;
    background: #c7c9cc;
   box-shadow: 0 0.25rem 0.625rem 0 rgba(3,88,185,0.2);
   border-radius: 2.5rem 2.5rem 2.5rem 2.5rem;
}
@@ -234,9 +275,9 @@
.save-btn {
   font-weight: 400;
   font-size: 1rem;
   color: #FFFFFF;
    color: #ffffff;
   width: 14rem;
   background: linear-gradient( 140deg, #00BAFF 0%, #006CFB 100%);
    background: linear-gradient(140deg, #00baff 0%, #006cfb 100%);
   box-shadow: 0 0.25rem 0.625rem 0 rgba(3,88,185,0.2);
   border-radius: 2.5rem 2.5rem 2.5rem 2.5rem;
}