设备维修添加维修状态

zhangwencui

2 天以前 d3fe17c4cc5ae2dda4e2c1cfd5c506faa74f6a0d

 src/pages/equipmentManagement/repair/maintain.vue

@@ -1,256 +1,297 @@
<template>
   <view class="repair-maintain">
      <!-- 使用通用页面头部组件 -->
      <PageHeader title="新增维修" @back="goBack" />
		
      <!-- 表单内容 -->
      <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"
                  placeholder="请输入维修人"
                  clearable
               />
            </u-form-item>
            <u-form-item prop="maintenanceResult" label="维修结果" required>
               <u-input
                  v-model="form.maintenanceResult"
                  type="textarea"
                  rows="3"
                  placeholder="请输入维修结果"
                  clearable
                  maxlength="200"
                  show-word-limit
               />
            </u-form-item>
            <u-form-item label="维修日期" prop="maintenanceTime" required border-bottom>
               <u-input
                  v-model="form.maintenanceTime"
                  placeholder="请选择维修日期"
                  readonly
                  @click="showDatePicker = true"
                  clearable
               />
               <template #right>
                  <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>
         </view>
      </u-form>

      <!-- 日期选择器 -->
      <up-datetime-picker
         :show="showDatePicker"
         v-model="pickerDateValue"
         mode="datetime"
         title="选择日期"
         format="YYYY-MM-DD HH:mm:ss"
         @confirm="onDateConfirm"
         @cancel="showDatePicker = false"
      />
   </view>
  <view class="repair-maintain">
    <!-- 使用通用页面头部组件 -->
    <PageHeader title="新增维修"
                @back="goBack" />
    <!-- 表单内容 -->
    <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"
                   placeholder="请输入维修人"
                   clearable />
        </u-form-item>
        <u-form-item prop="maintenanceResult"
                     label="维修结果"
                     required>
          <u-input v-model="form.maintenanceResult"
                   type="textarea"
                   rows="3"
                   placeholder="请输入维修结果"
                   clearable
                   maxlength="200"
                   show-word-limit />
        </u-form-item>
        <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 />
          <template #right>
            <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>
      </view>
    </u-form>
    <!-- 日期选择器 -->
    <up-datetime-picker :show="showDatePicker"
                        v-model="pickerDateValue"
                        mode="datetime"
                        title="选择日期"
                        format="YYYY-MM-DD HH:mm:ss"
                        @confirm="onDateConfirm"
                        @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 useUserStore from "@/store/modules/user";
import dayjs from "dayjs";
  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";

defineOptions({
   name: "设备维修表单",
});
  defineOptions({
    name: "设备维修表单",
  });

const userStore = useUserStore();
  const userStore = useUserStore();

// 表单引用
const formRef = ref(null);
const loading = ref(false);
const showDatePicker = ref(false);
const pickerDateValue = ref(Date.now());; // 使用时间戳
  // 表单引用
  const formRef = ref(null);
  const loading = ref(false);
  const showDatePicker = ref(false);
  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: "请选择维修日期" }],
};
  // 表单验证规则
  const formRules = {
    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 || "", // 默认使用当前用户昵称
    maintenanceResult: undefined, // 维修结果
    maintenanceTime: dayjs().format("YYYY-MM-DD HH:mm:ss"), // 维修日期（只显示日期）
  });

// 使用 ref 声明表单数据
const form = ref({
   maintenanceName: userStore.nickName || '', // 默认使用当前用户昵称
   maintenanceResult: undefined, // 维修结果
   maintenanceTime: dayjs().format("YYYY-MM-DD HH:mm:ss"), // 维修日期（只显示日期）
});
  // 自定义showToast函数
  const showToast = message => {
    uni.showToast({
      title: message,
      icon: "none",
    });
  };

// 自定义showToast函数
const showToast = (message) => {
  uni.showToast({
    title: message,
    icon: 'none'
  })
};
  // 重置表单数据和校验状态
  const resetForm = () => {
    form.value = {
      maintenanceName: userStore.nickName || "",
      maintenanceResult: undefined,
      maintenanceTime: dayjs().format("YYYY-MM-DD HH:mm:ss"),
    };
  };

// 重置表单数据和校验状态
const resetForm = () => {
   form.value = {
      maintenanceName: userStore.nickName || '',
      maintenanceResult: undefined,
      maintenanceTime: dayjs().format("YYYY-MM-DD HH:mm:ss"),
   };
};
  const resetFormAndValidate = () => {
    resetForm();
  };

const resetFormAndValidate = () => {
   resetForm();
};
  // 提交表单
  const submitForm = async () => {
    try {
      // 使用uview-plus的表单验证方式
      const valid = await formRef.value.validate();
      if (valid) {
        submitFormData();
      }
    } catch (e) {
      showToast("表单验证失败");
    }
  };

// 提交表单
const submitForm = async () => {
   try {
      // 使用uview-plus的表单验证方式
      const valid = await formRef.value.validate();
      if (valid) {
         submitFormData();
      }
   } catch (e) {
      showToast('表单验证失败');
   }
};
  // 提交表单数据
  const submitFormData = async () => {
    try {
      loading.value = true;
      const id = getPageId();

// 提交表单数据
const submitFormData = async () => {
   try {
      loading.value = true;
      const id = getPageId();
		
      if (!id) {
         showToast('参数错误');
         loading.value = false;
         return;
      }
		
      // 准备提交数据，maintenanceTime 加上当前时分秒
      const submitData = { ...form.value };
		
      const { code } = await addMaintain({ id: id, ...submitData });
		
      if (code == 200) {
         showToast('新增维修成功');
         resetFormAndValidate();
         setTimeout(() => {
            goBack();
         }, 500);
      } else {
         loading.value = false;
      }
   } catch (e) {
      console.log(e);
		
      loading.value = false;
      showToast('操作失败');
   }
};
      if (!id) {
        showToast("参数错误");
        loading.value = false;
        return;
      }
      form.value.status = Number(form.value.status);
      // 准备提交数据，maintenanceTime 加上当前时分秒
      const submitData = { ...form.value };

// 返回上一页
const goBack = () => {
   uni.removeStorageSync('repairId');
   uni.navigateBack();
};
      const { code } = await addMaintain({ id: id, ...submitData });

// 获取页面ID
const getPageId = () => {
   const id = uni.getStorageSync('repairId');
   return id;
};
      if (code == 200) {
        showToast("新增维修成功");
        resetFormAndValidate();
        setTimeout(() => {
          goBack();
        }, 500);
      } else {
        loading.value = false;
      }
    } catch (e) {
      console.log(e);

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

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

onShow(() => {
   // 页面显示时初始化表单
   initForm();
});
  // 获取页面ID
  const getPageId = () => {
    const id = uni.getStorageSync("repairId");
    return id;
  };

onMounted(() => {
   // 页面加载时初始化表单
   initForm();
});
  // 确认日期选择
  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.maintenanceTime = dayjs().format("YYYY-MM-DD HH:mm:ss");
  };

  onShow(() => {
    // 页面显示时初始化表单
    initForm();
  });

  onMounted(() => {
    // 页面加载时初始化表单
    initForm();
  });
</script>

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

.footer-btns {
   position: fixed;
   left: 0;
   right: 0;
   bottom: 0;
   background: #fff;
   display: flex;
   justify-content: space-around;
   align-items: center;
   padding: 0.75rem 0;
   box-shadow: 0 -0.125rem 0.5rem rgba(0,0,0,0.05);
   z-index: 1000;
}
  .footer-btns {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    background: #fff;
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 0.75rem 0;
    box-shadow: 0 -0.125rem 0.5rem rgba(0, 0, 0, 0.05);
    z-index: 1000;
  }

.cancel-btn {
   font-weight: 400;
   font-size: 1rem;
   color: #FFFFFF;
   width: 6.375rem;
   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;
}
  .cancel-btn {
    font-weight: 400;
    font-size: 1rem;
    color: #ffffff;
    width: 6.375rem;
    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;
  }

.save-btn {
   font-weight: 400;
   font-size: 1rem;
   color: #FFFFFF;
   width: 14rem;
   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;
}
  .save-btn {
    font-weight: 400;
    font-size: 1rem;
    color: #ffffff;
    width: 14rem;
    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;
  }

// 响应式调整
@media (max-width: 768px) {
   .submit-section {
      padding: 12px;
   }
}
  // 响应式调整
  @media (max-width: 768px) {
    .submit-section {
      padding: 12px;
    }
  }

.tip-text { 
   padding: 4px 16px 0 16px; 
   font-size: 12px; 
   color: #888; 
}
  .tip-text {
    padding: 4px 16px 0 16px;
    font-size: 12px;
    color: #888;
  }
</style>