lishenao
2025-07-01 a686251b73f616532d6a9518faad49c7693a6e1c
src/views/equipmentManagement/upkeep/Form/PlanForm.vue
¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,96 @@
<template>
  <el-form :model="form" label-width="100px">
    <el-form-item label="设备名称">
      <el-select
        v-model="form.deviceLedgerId"
        @change="setDeviceModel"
        placeholder="请选择设备"
      >
        <el-option
          v-for="(item, index) in deviceOptions"
          :key="index"
          :label="item.deviceName"
          :value="item.id"
        ></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="规格型号">
      <el-input
        v-model="form.deviceModel"
        placeholder="请输入规格型号"
        disabled
      />
    </el-form-item>
    <el-form-item label="计划保养日期">
      <el-date-picker
        style="width: 100%"
        v-model="form.maintenancePlanTime"
        format="YYYY-MM-DD"
        value-format="YYYY-MM-DD HH:mm:ss"
        type="date"
        placeholder="请选择计划保养日期日期"
        clearable
      />
    </el-form-item>
  </el-form>
</template>
<script setup>
import useFormData from "@/hooks/useFormData";
import { getDeviceLedger } from "@/api/equipmentManagement/ledger";
import { onMounted } from "vue";
defineOptions({
  name: "计划表单",
});
const deviceOptions = ref([]);
const loadDeviceName = async () => {
  const { data } = await getDeviceLedger();
  deviceOptions.value = data;
};
const { form, resetForm } = useFormData({
  deviceLedgerId: undefined, // è®¾å¤‡Id
  deviceName: undefined, // è®¾å¤‡åç§°
  deviceModel: undefined, // è§„格型号
  maintenancePlanTime: undefined, // è®¡åˆ’保养日期
});
const setDeviceModel = (id) => {
  const option = deviceOptions.value.find((item) => item.id === id);
  form.deviceModel = option.deviceModel;
};
const getForm = () => {
  return form;
};
/**
 * @desc è®¾ç½®è¡¨å•内容
 * @param data è®¾å¤‡ä¿¡æ¯
 */
const setForm = (data) => {
  form.deviceLedgerId = data.deviceLedgerId;
  form.deviceName = data.deviceName;
  form.deviceModel = data.deviceModel;
  form.maintenancePlanTime = dayjs(data.maintenancePlanTime).format(
    "YYYY-MM-DD HH:mm:ss"
  );
};
const loadForm = () => {};
onMounted(() => {
  loadDeviceName();
});
defineExpose({
  loadForm,
  resetForm,
  getForm,
  setForm,
});
</script>
<style lang="scss" scoped></style>