金鹰黄金 1.设备报修和保养添加审批流程 2.设备保养流程添加定任务管理

gaoluyang

2026-02-27 b9e53d7500e3497f8659fc373e6c707071b6dfb7

金鹰黄金
1.设备报修和保养添加审批流程
2.设备保养流程添加定任务管理

 src/api/equipmentManagement/maintenanceTaskFile.js

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,28 @@
import request from "@/utils/request";

// æŸ¥è¯¢ä¿å…»ä»»åŠ¡é™„件列表
export function listMaintenanceTaskFiles(query) {
  return request({
    url: "/maintenanceTaskFile/listPage",
    method: "get",
    params: query,
  });
}

// æ–°å¢žä¿å…»ä»»åŠ¡é™„件
export function addMaintenanceTaskFile(data) {
  return request({
    url: "/maintenanceTaskFile/add",
    method: "post",
    data,
  });
}

// åˆ é™¤ä¿å…»ä»»åŠ¡é™„件
export function delMaintenanceTaskFile(id) {
  return request({
    url: "/maintenanceTaskFile/del",
    method: "delete",
    data: Array.isArray(id) ? id : [id],
  });
}

 src/api/equipmentManagement/upkeep.js

@@ -70,6 +70,39 @@
    method: "delete",
  });
};
// æ·»åŠ è®¾å¤‡ä¿å…»å®šæ—¶ä»»åŠ¡
export const deviceMaintenanceTaskAdd = (params) => {
  return request({
    url: '/deviceMaintenanceTask/add',
    method: "post",
    data: params,
  });
};
// ä¿®æ”¹è®¾å¤‡ä¿å…»å®šæ—¶ä»»åŠ¡
export const deviceMaintenanceTaskEdit = (params) => {
  return request({
    url: '/deviceMaintenanceTask/update',
    method: "post",
    data: params,
  });
};
// è®¾å¤‡ä¿å…»å®šæ—¶ä»»åŠ¡åˆ—表
export const deviceMaintenanceTaskList = (params) => {
  return request({
    url: '/deviceMaintenanceTask/listPage',
    method: "get",
    params: params,
  });
};
// è®¾å¤‡ä¿å…»å®šæ—¶ä»»åŠ¡åˆ—表
export const deviceMaintenanceTaskDel = (params) => {
  return request({
    url: '/deviceMaintenanceTask/delete',
    method: "delete",
    data: params,
  });
};

// æŸ¥è¯¢è®¾å¤‡çš„报修金额-每月
export const monthlyAmount = (query) => {
  return request({

 src/components/Dialog/FileListDialog.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,328 @@
<template>
  <el-dialog v-model="dialogVisible"
             :title="title"
             :width="width"
             :before-close="handleClose">
    <div class="file-list-toolbar"
         v-if="showToolbar">
      <template v-if="useBuiltInUpload">
        <el-upload v-model:file-list="uploadFileList"
                   class="upload-demo"
                   :action="uploadAction"
                   :headers="uploadHeaders"
                   :show-file-list="false"
                   :on-success="handleDefaultUploadSuccess"
                   :on-error="handleDefaultUploadError">
          <el-button v-if="showUploadButton"
                     type="primary"
                     size="small">
            ä¸Šä¼ é™„件
          </el-button>
        </el-upload>
      </template>
      <template v-else>
        <el-button v-if="showUploadButton"
                   type="primary"
                   size="small"
                   @click="handleUpload">
          æ–°å¢žé™„件
        </el-button>
      </template>
    </div>
    <el-table :data="tableData"
              border
              :height="tableHeight">
      <el-table-column :label="nameColumnLabel"
                       :prop="nameColumnProp"
                       :min-width="nameColumnMinWidth"
                       show-overflow-tooltip />
      <el-table-column v-if="showActions"
                       fixed="right"
                       label="操作"
                       :width="actionColumnWidth"
                       align="center">
        <template #default="scope">
          <el-button v-if="showDownload"
                     link
                     type="primary"
                     size="small"
                     @click="handleDownload(scope.row)">
            ä¸‹è½½
          </el-button>
          <el-button v-if="showPreview"
                     link
                     type="primary"
                     size="small"
                     @click="handlePreview(scope.row)">
            é¢„览
          </el-button>
          <el-button v-if="showDeleteButton"
                     link
                     type="danger"
                     size="small"
                     @click="handleDelete(scope.row, scope.$index)">
            åˆ é™¤
          </el-button>
          <slot name="actions"
                :row="scope.row"></slot>
        </template>
      </el-table-column>
      <slot name="columns"></slot>
    </el-table>
    <pagination v-if="isShowPagination"
                style="margin-bottom: 20px;"
                :total="page.total"
                :page="page.current"
                :limit="page.size"
                @pagination="paginationSearch"
                @change="handleChange" />
  </el-dialog>
  <filePreview v-if="showPreview"
               ref="filePreviewRef" />
</template>

<script setup>
  import { ref, computed, getCurrentInstance } from "vue";
  import pagination from "@/components/Pagination/index.vue";
  import { ElMessage } from "element-plus";
  import filePreview from "@/components/filePreview/index.vue";
  import { getToken } from "@/utils/auth";

  const props = defineProps({
    modelValue: {
      type: Boolean,
      default: false,
    },
    title: {
      type: String,
      default: "附件",
    },
    width: {
      type: String,
      default: "40%",
    },
    tableHeight: {
      type: String,
      default: "40vh",
    },
    nameColumnLabel: {
      type: String,
      default: "附件名称",
    },
    nameColumnProp: {
      type: String,
      default: "name",
    },
    nameColumnMinWidth: {
      type: [String, Number],
      default: 400,
    },
    actionColumnWidth: {
      type: [String, Number],
      default: 160,
    },
    showActions: {
      type: Boolean,
      default: true,
    },
    showDownload: {
      type: Boolean,
      default: true,
    },
    showPreview: {
      type: Boolean,
      default: true,
    },
    showUploadButton: {
      type: Boolean,
      default: false,
    },
    showDeleteButton: {
      type: Boolean,
      default: false,
    },
    urlField: {
      type: String,
      default: "url",
    },
    downloadMethod: {
      type: Function,
      default: null,
    },
    previewMethod: {
      type: Function,
      default: null,
    },
    uploadMethod: {
      type: Function,
      default: null,
    },
    deleteMethod: {
      type: Function,
      default: null,
    },
    rulesRegulationsManagementId: {
      type: [String, Number],
      default: "",
    },
    uploadUrl: {
      type: String,
      default: `${import.meta.env.VITE_APP_BASE_API}/file/upload`,
    },
    isShowPagination: {
      type: Boolean,
      default: false,
    },
    page: {
      type: Object,
      default: () => ({
        current: 1,
        size: 10,
        total: 0,
      }),
    },
  });

  const emit = defineEmits([
    "update:modelValue",
    "close",
    "download",
    "preview",
    "upload",
    "delete",
  ]);

  const { proxy } = getCurrentInstance();
  const filePreviewRef = ref(null);
  const uploadFileList = ref([]);

  const dialogVisible = computed({
    get: () => props.modelValue,
    set: val => emit("update:modelValue", val),
  });

  const tableData = ref([]);
  const showToolbar = computed(() => props.showUploadButton);
  const useBuiltInUpload = computed(() => !props.uploadMethod);
  const uploadAction = computed(() => props.uploadUrl);
  const uploadHeaders = computed(() => ({
    Authorization: `Bearer ${getToken()}`,
  }));

  const handleClose = () => {
    emit("close");
    dialogVisible.value = false;
  };

  const handleDownload = row => {
    if (props.downloadMethod) {
      props.downloadMethod(row);
    } else {
      // é»˜è®¤ä¸‹è½½æ–¹æ³•
      proxy.$download.name(row[props.urlField]);
    }
    emit("download", row);
  };

  const handlePreview = row => {
    if (props.previewMethod) {
      props.previewMethod(row);
    } else {
      // é»˜è®¤é¢„览方法
      if (filePreviewRef.value) {
        filePreviewRef.value.open(row[props.urlField]);
      }
    }
    emit("preview", row);
  };
  const paginationSearch = page => {
    props.page.current = page.page;
    props.page.size = page.limit;
    emit("pagination", page.page, page.limit);
  };

  const open = list => {
    dialogVisible.value = true;
    tableData.value = list || [];
  };

  const handleUpload = async () => {
    if (props.uploadMethod) {
      // å¦‚果提供了自定义上传方法，由父组件负责更新列表（通过 setList）
      // è¿™é‡Œä¸å†è‡ªåŠ¨æ·»åŠ ï¼Œé¿å…ä¸Žçˆ¶ç»„件的 setList é‡å¤
      await props.uploadMethod();
    }
    emit("upload");
  };

  const handleDelete = async (row, index) => {
    if (props.deleteMethod) {
      const result = await props.deleteMethod(row, index);
      if (result === false) {
        return;
      }
      // å¦‚果提供了 deleteMethod，由父组件负责刷新列表，不在这里删除
    } else {
      // å¦‚果没有提供 deleteMethod，才在组件内部删除
      removeAttachment(index);
    }
    emit("delete", row);
  };

  const addAttachment = item => {
    tableData.value = [...tableData.value, item];
  };

  const handleDefaultUploadSuccess = async (res, file) => {
    if (res?.code !== 200) {
      ElMessage.error(res?.msg || "文件上传失败");
      return;
    }
    if (!props.rulesRegulationsManagementId) {
      ElMessage.error("缺少规章制度ID，无法保存附件");
      return;
    }
    const fileName = res?.data?.originalName || file?.name;
    const fileUrl = res?.data?.tempPath || res?.data?.url;
    const payload = {
      fileName,
      fileUrl,
      rulesRegulationsManagementId: props.rulesRegulationsManagementId,
      raw: res?.data || {},
    };
    emit("upload", payload);
  };

  const handleDefaultUploadError = () => {
    ElMessage.error("文件上传失败");
  };

  const removeAttachment = index => {
    if (index > -1 && index < tableData.value.length) {
      const newList = [...tableData.value];
      newList.splice(index, 1);
      tableData.value = newList;
    }
  };

  const setList = list => {
    tableData.value = list || [];
  };

  defineExpose({
    open,
    addAttachment,
    removeAttachment,
    setList,
    handleUpload,
    handleDelete,
  });
</script>

<style scoped>
  .file-list-toolbar {
    margin-bottom: 8px;
    text-align: right;
  }
</style>


 src/components/Dialog/FormDialog.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,73 @@
<template>
  <el-dialog
    v-model="dialogVisible"
    :title="computedTitle"
    :width="width"
    @close="handleClose"
  >
    <slot></slot>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="handleConfirm">确认</el-button>
        <el-button @click="handleCancel">取消</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { computed } from 'vue'

const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false
  },
  title: {
    type: [String, Function],
    default: ''
  },
  operationType: {
    type: String,
    default: ''
  },
  width: {
    type: String,
    default: '70%'
  }
})

const emit = defineEmits(['update:modelValue', 'close', 'confirm', 'cancel'])

const dialogVisible = computed({
  get: () => props.modelValue,
  set: (val) => emit('update:modelValue', val)
})

const computedTitle = computed(() => {
  if (typeof props.title === 'function') {
    return props.title(props.operationType)
  }
  return props.title
})

const handleClose = () => {
  emit('close')
}

const handleConfirm = () => {
  emit('confirm')
}

const handleCancel = () => {
  emit('cancel')
  dialogVisible.value = false
}
</script>

<style scoped>
.dialog-footer {
  text-align: center;
}
</style>


 src/components/Dialog/ImportDialog.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,172 @@
<template>
  <el-dialog
    :title="title"
    v-model="dialogVisible"
    :width="width"
    :append-to-body="appendToBody"
    @close="handleClose"
  >
    <el-upload
      ref="uploadRef"
      :limit="limit"
      :accept="accept"
      :headers="headers"
      :action="action"
      :disabled="disabled"
      :before-upload="beforeUpload"
      :on-progress="onProgress"
      :on-success="onSuccess"
      :on-error="onError"
      :on-change="onChange"
      :auto-upload="autoUpload"
      drag
    >
      <el-icon class="el-icon--upload"><UploadFilled /></el-icon>
      <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
      <template #tip>
        <div class="el-upload__tip text-center">
          <span>{{ tipText }}</span>
          <el-link
            v-if="showDownloadTemplate"
            type="primary"
            :underline="false"
            style="font-size: 12px; vertical-align: baseline; margin-left: 5px;"
            @click="handleDownloadTemplate"
            >下载模板</el-link
          >
        </div>
      </template>
    </el-upload>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="handleConfirm">ç¡® å®š</el-button>
        <el-button @click="handleCancel">取 æ¶ˆ</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { computed, ref } from 'vue'
import { UploadFilled } from '@element-plus/icons-vue'

const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false
  },
  title: {
    type: String,
    default: '导入'
  },
  width: {
    type: String,
    default: '400px'
  },
  appendToBody: {
    type: Boolean,
    default: true
  },
  limit: {
    type: Number,
    default: 1
  },
  accept: {
    type: String,
    default: '.xlsx, .xls'
  },
  headers: {
    type: Object,
    default: () => ({})
  },
  action: {
    type: String,
    required: true
  },
  disabled: {
    type: Boolean,
    default: false
  },
  autoUpload: {
    type: Boolean,
    default: false
  },
  tipText: {
    type: String,
    default: '仅允许导入xls、xlsx格式文件。'
  },
  showDownloadTemplate: {
    type: Boolean,
    default: true
  },
  beforeUpload: {
    type: Function,
    default: null
  },
  onProgress: {
    type: Function,
    default: null
  },
  onSuccess: {
    type: Function,
    default: null
  },
  onError: {
    type: Function,
    default: null
  },
  onChange: {
    type: Function,
    default: null
  }
})

const emit = defineEmits(['update:modelValue', 'close', 'confirm', 'cancel', 'download-template'])

const dialogVisible = computed({
  get: () => props.modelValue,
  set: (val) => emit('update:modelValue', val)
})

const uploadRef = ref(null)

const handleClose = () => {
  emit('close')
}

const handleConfirm = () => {
  emit('confirm')
}

const submit = () => {
  if (uploadRef.value) {
    uploadRef.value.submit()
  }
}

const handleCancel = () => {
  emit('cancel')
  dialogVisible.value = false
}

const handleDownloadTemplate = () => {
  emit('download-template')
}

defineExpose({
  uploadRef,
  submit,
  clearFiles: () => {
    if (uploadRef.value) {
      uploadRef.value.clearFiles()
    }
  }
})
</script>

<style scoped>
.dialog-footer {
  text-align: center;
}
</style>


 src/utils/index.js

@@ -396,3 +396,16 @@
export function isEqual(obj1, obj2) {

  return JSON.stringify(obj1) === JSON.stringify(obj2);

}



/**

 * èŽ·å–当前日期并格式化为 YYYY-MM-DD

 * @returns {string} æ ¼å¼åŒ–的日期字符串

 */

export function getCurrentDate() {

  const today = new Date();

  const year = today.getFullYear();

  const month = String(today.getMonth() + 1).padStart(2, '0'); // æœˆä»½ä»Ž0开始

  const day = String(today.getDate()).padStart(2, '0');

  return `${year}-${month}-${day}`;

}




 src/views/equipmentManagement/repair/Modal/ApproveModal.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,135 @@
<template>
  <FormDialog
    v-model="visible"
    title="报修审批"
    width="800px"
    @confirm="handleSubmit"
    @cancel="handleClose"
    @close="handleClose"
  >
    <el-descriptions :column="2" border>
      <el-descriptions-item label="设备名称">
        {{ detail.deviceName || "-" }}
      </el-descriptions-item>
      <el-descriptions-item label="规格型号">
        {{ detail.deviceModel || "-" }}
      </el-descriptions-item>
      <el-descriptions-item label="报修日期">
        {{ detail.repairTime || "-" }}
      </el-descriptions-item>
      <el-descriptions-item label="报修人">
        {{ detail.repairName || "-" }}
      </el-descriptions-item>
      <el-descriptions-item label="审批人">
        {{ detail.auditName || "-" }}
      </el-descriptions-item>
      <el-descriptions-item label="当前状态">
        {{ statusText(detail.status) }}
      </el-descriptions-item>
      <el-descriptions-item label="故障现象" :span="2">
        {{ detail.remark || "-" }}
      </el-descriptions-item>
    </el-descriptions>
    <div style="margin-top: 16px">
      <el-form ref="formRef" :model="form" :rules="rules" label-width="100px">
        <el-form-item label="审批结果" prop="decision">
          <el-radio-group v-model="form.decision">
            <el-radio :value="0">通过</el-radio>
            <el-radio :value="3">不通过</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
    </div>
  </FormDialog>
</template>

<script setup>
import { nextTick, ref } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import FormDialog from "@/components/Dialog/FormDialog.vue";
import { editRepair, getRepairById } from "@/api/equipmentManagement/repair";

defineOptions({
  name: "报修审批弹窗",
});

const emits = defineEmits(["ok"]);

const visible = ref(false);
const loading = ref(false);
const id = ref();
const detail = ref({});
const formRef = ref();
const form = ref({
  decision: undefined, // 0 é€šè¿‡ 3 ä¸é€šè¿‡
});

const rules = {
  decision: [{ required: true, message: "请选择审批结果", trigger: "change" }],
};

const statusText = (status) => {
  const map = {
    0: "待维修",
    1: "完结",
    2: "待审核",
    3: "审核不通过",
  };
  return map[status] ?? "-";
};

const loadDetail = async (repairId) => {
  const { data } = await getRepairById(repairId);
  detail.value = data ?? {};
};

const open = async (repairId) => {
  id.value = repairId;
  visible.value = true;
  await nextTick();
  await loadDetail(repairId);
  form.value.decision = undefined;
};

const handleClose = () => {
  visible.value = false;
  id.value = undefined;
  detail.value = {};
  form.value.decision = undefined;
};

const updateStatus = async (status) => {
  loading.value = true;
  try {
    const { code } = await editRepair({ id: id.value, status });
    if (code === 200) {
      ElMessage.success("审批成功");
      emits("ok");
      handleClose();
    }
  } finally {
    loading.value = false;
  }
};

const handleSubmit = async () => {
  if (detail.value?.status !== 2) {
    ElMessage.warning("仅待审核状态可审批");
    return;
  }
  await formRef.value?.validate(async (valid) => {
    if (!valid) return;
    const isApprove = form.value.decision === 0;
    ElMessageBox.confirm(`确认审批${isApprove ? "通过" : "不通过"}？`, "提示", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    }).then(() => updateStatus(form.value.decision));
  });
};

defineExpose({ open });
</script>

<style scoped></style>


 src/views/equipmentManagement/repair/Modal/MaintainModal.vue

@@ -1,5 +1,12 @@
<template>
  <el-dialog v-model="visible" :title="modalOptions.title" direction="ltr" @close="handleDialogClose">
  <FormDialog
    v-model="visible"
    :title="'设备维修'"
    width="500px"
    @confirm="sendForm"
    @cancel="handleCancel"
    @close="handleClose"
  >
    <el-form :model="form" :rules="rules" label-width="110px" ref="formRef">
      <el-form-item label="维修人" prop="maintenanceName">
        <el-input v-model="form.maintenanceName" placeholder="请输入维修人" />
@@ -7,9 +14,9 @@
      <el-form-item label="维修结果" prop="maintenanceResult">
        <el-input v-model="form.maintenanceResult" placeholder="请输入维修结果" />
      </el-form-item>
      <el-form-item label="本次维修金额" prop="repairPrice">
        <el-input-number v-model="form.repairPrice" :min="0" :precision="2" style="width: 100%" />
      </el-form-item>
            <el-form-item label="本次维修金额" prop="repairPrice">
                <el-input-number v-model="form.repairPrice" :min="0" :precision="2" style="width: 100%" />
            </el-form-item>
      <el-form-item label="维修日期" prop="maintenanceTime">
        <el-date-picker
          v-model="form.maintenanceTime"
@@ -22,22 +29,16 @@
        />
      </el-form-item>
    </el-form>
    <template #footer>
            <el-button type="primary" @click="sendForm" :loading="loading">
                {{ modalOptions.confirmText }}
            </el-button>
      <el-button @click="handleDialogClose">{{ modalOptions.cancelText }}</el-button>
    </template>
  </el-dialog>
  </FormDialog>
</template>

<script setup>
import { ref, nextTick } from "vue";
import { useModal } from "@/hooks/useModal";
import FormDialog from "@/components/Dialog/FormDialog.vue";
import { addMaintain } from "@/api/equipmentManagement/repair";
import useFormData from "@/hooks/useFormData";
import useUserStore from "@/store/modules/user";
import dayjs from "dayjs";
import { addMaintain } from "@/api/equipmentManagement/repair";
import { ElMessage } from "element-plus";

defineOptions({
  name: "维修模态框",
@@ -45,23 +46,19 @@

const emits = defineEmits(["ok"]);

const {
  id,
  visible,
  loading,
  openModal,
  modalOptions,
  handleConfirm,
  closeModal,
} = useModal({ title: "设备维修" });
// ä¿å­˜æŠ¥ä¿®è®°å½•çš„id
const repairId = ref();
const visible = ref(false);
const loading = ref(false);
const formRef = ref();

const userStore = useUserStore();
const formRef = ref();
const { form, resetForm } = useFormData({
  maintenanceName: undefined, // ç»´ä¿®åç§°
  maintenanceResult: undefined, // ç»´ä¿®ç»“æžœ
  maintenanceTime: undefined, // ç»´ä¿®æ—¥æœŸ
  repairPrice: undefined, // æœ¬æ¬¡ç»´ä¿®é‡‘额
    repairPrice: undefined, // ç»´ä¿®é‡‘额
  status: 0,
});

const rules = {
@@ -74,36 +71,46 @@
const setForm = (data) => {
  form.maintenanceName = data.maintenanceName ?? userStore.nickName;
  form.maintenanceResult = data.maintenanceResult;
  form.repairPrice = data.repairPrice;
  form.maintenanceTime =
    dayjs(data.maintenanceTime).format("YYYY-MM-DD HH:mm:ss") ??
    dayjs().format("YYYY-MM-DD HH:mm:ss");
    data.maintenanceTime 
      ? dayjs(data.maintenanceTime).format("YYYY-MM-DD HH:mm:ss")
      : dayjs().format("YYYY-MM-DD HH:mm:ss");
  form.status = 2; // ç»´ä¿®åŽå›ºå®šè¿›å…¥å¾…审核（不在界面展示）
};

const sendForm = async () => {
  await formRef.value.validate(async (valid) => {
    if (!valid) return;
    const { code } = await addMaintain({ id: id.value, ...form });
    if (code == 200) {
      emits("ok");
      resetForm();
      closeModal();
    }
  });
    await formRef.value.validate(async (valid) => {
        if (!valid) return;
        loading.value = true;
        try {
            const { code } = await addMaintain({ id: repairId.value, ...form });
            if (code == 200) {
                ElMessage.success("维修成功");
                emits("ok");
                resetForm();
                visible.value = false;
            }
        } finally {
            loading.value = false;
        }
    })
};

const handleCancel = () => {
  resetForm();
  visible.value = false;
};

const handleClose = () => {
  resetForm();
  visible.value = false;
};

const open = async (id, row) => {
  openModal(id);
  repairId.value = id; // ä¿å­˜æŠ¥ä¿®è®°å½•çš„id
  visible.value = true;
  await nextTick();
  setForm(row);
};

const handleDialogClose = () => {
  resetForm();
  nextTick(() => {
    formRef.value?.clearValidate?.();
  });
  closeModal();
};

defineExpose({

 src/views/equipmentManagement/repair/Modal/RepairModal.vue

@@ -1,10 +1,17 @@
<template>
  <el-dialog v-model="visible" :title="modalOptions.title" @close="close">
    <el-form :model="form" :rules="rules" ref="formRef" label-width="100px">
  <FormDialog
    v-model="visible"
    :title="id ? '编辑设备报修' : '新增设备报修'"
    width="800px"
    @confirm="sendForm"
    @cancel="handleCancel"
    @close="handleClose"
  >
    <el-form :model="form" :rules="rules" label-width="100px" ref="formRef">
      <el-row>
        <el-col :span="12">
          <el-form-item label="设备名称" prop="deviceLedgerId">
            <el-select v-model="form.deviceLedgerId" filterable allow-create default-first-option @change="setDeviceModel">
          <el-form-item label="设备名称">
            <el-select v-model="form.deviceLedgerId" @change="setDeviceModel" filterable>
              <el-option
                v-for="(item, index) in deviceOptions"
                :key="index"
@@ -16,11 +23,15 @@
        </el-col>
        <el-col :span="12">
          <el-form-item label="规格型号">
            <el-input v-model="form.deviceModel" placeholder="请输入规格型号" disabled />
            <el-input
              v-model="form.deviceModel"
              placeholder="请输入规格型号"
              disabled
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="报修日期" prop="repairTime">
          <el-form-item label="报修日期">
            <el-date-picker
              v-model="form.repairTime"
              placeholder="请选择报修日期"
@@ -33,82 +44,116 @@
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="报修人" prop="repairName">
          <el-form-item label="报修人">
            <el-input v-model="form.repairName" placeholder="请输入报修人" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="审批人" prop="auditName">
            <el-select
              v-model="form.auditName"
              placeholder="请选择审批人"
              filterable
              clearable
              style="width: 100%"
            >
              <el-option
                v-for="user in userOptions"
                :key="user.userId"
                :label="user.nickName"
                :value="user.nickName"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row v-if="id">
        <el-col :span="12">
          <el-form-item label="报修状态">
            <el-select v-model="form.status">
              <el-option label="待维修" :value="0"></el-option>
              <el-option label="完结" :value="1"></el-option>
              <el-option label="待审核" :value="2"></el-option>
              <el-option label="审核不通过" :value="3"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="故障现象" prop="remark">
            <el-input v-model="form.remark" :rows="2" type="textarea" placeholder="请输入故障现象" />
          <el-form-item label="故障现象">
            <el-input
              v-model="form.remark"
              :rows="2"
              type="textarea"
              placeholder="请输入故障现象"
            />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
            <el-button type="primary" @click="sendForm" :loading="loading">
                {{ modalOptions.confirmText }}
            </el-button>
      <el-button @click="closeModal">{{ modalOptions.cancelText }}</el-button>
    </template>
  </el-dialog>
  
  </FormDialog>
</template>

<script setup>
import { ref, nextTick } from "vue";
import { useModal } from "@/hooks/useModal";
import useFormData from "@/hooks/useFormData";
import useUserStore from "@/store/modules/user";
import FormDialog from "@/components/Dialog/FormDialog.vue";
import {
  addRepair,
  editRepair,
  getRepairById,
} from "@/api/equipmentManagement/repair";
import { getDeviceLedger } from "@/api/equipmentManagement/ledger";
import { ElMessage } from "element-plus";
import dayjs from "dayjs";
import useFormData from "@/hooks/useFormData";
import { getDeviceLedger } from "@/api/equipmentManagement/ledger";
import useUserStore from "@/store/modules/user";
import { userListNoPageByTenantId } from "@/api/system/user";

defineOptions({
  name: "设备报修弹窗",
});

const emits = defineEmits(["ok"]);
const {
  id,
  visible,
  loading,
  openModal,
  modalOptions,
  handleConfirm,
  closeModal,
} = useModal({ title: "设备报修" });

const id = ref();
const visible = ref(false);
const loading = ref(false);
const formRef = ref();

const userStore = useUserStore();
const deviceOptions = ref([]);
const formRef = ref();
const { form, resetForm } = useFormData({
  deviceLedgerId: undefined, // è®¾å¤‡Id
  deviceName: undefined, // è®¾å¤‡åç§°
  deviceModel: undefined, // è§„格型号
  repairTime: undefined, // æŠ¥ä¿®æ—¥æœŸ
  repairName: userStore.nickName, // æŠ¥ä¿®äºº
  remark: undefined, // æ•…障现象
});

const rules = {
  deviceLedgerId: [{ required: true, message: "请选择设备名称", trigger: "change" }],
  repairTime: [{ required: true, message: "请选择报修日期", trigger: "change" }],
  repairName: [{ required: true, message: "请输入报修人", trigger: "blur" }],
  remark: [{ required: true, message: "请输入故障现象", trigger: "blur" }],
};
const userOptions = ref([]);

const loadDeviceName = async () => {
  const { data } = await getDeviceLedger();
  deviceOptions.value = data;
};

const setDeviceModel = (id) => {
  const option = deviceOptions.value.find((item) => item.id === id);
  form.deviceModel = option ? option.deviceModel : undefined;
const loadUserOptions = async () => {
  const res = await userListNoPageByTenantId();
  userOptions.value = res?.data ?? [];
};

const { form, resetForm } = useFormData({
  deviceLedgerId: undefined, // è®¾å¤‡Id
  deviceName: undefined, // è®¾å¤‡åç§°
  deviceModel: undefined, // è§„格型号
  repairTime: dayjs().format("YYYY-MM-DD"), // æŠ¥ä¿®æ—¥æœŸï¼Œé»˜è®¤å½“天
  repairName: userStore.nickName, // æŠ¥ä¿®äºº
  auditName: undefined, // å®¡æ‰¹äºº
  remark: undefined, // æ•…障现象
  status: 0, // æŠ¥ä¿®çŠ¶æ€
});

const rules = {
  auditName: [
    { required: true, message: "请选择审批人", trigger: "change" },
  ],
};

const setDeviceModel = (deviceId) => {
  const option = deviceOptions.value.find((item) => item.id === deviceId);
  form.deviceModel = option.deviceModel;
};

const setForm = (data) => {
@@ -116,44 +161,55 @@
  form.deviceName = data.deviceName;
  form.deviceModel = data.deviceModel;
  form.repairTime = data.repairTime;
  form.repairName = data.repairName ?? userStore.nickName;
  form.repairName = data.repairName;
  form.auditName = data.auditName;
  form.remark = data.remark;
  form.status = data.status;
};

const sendForm = async () => {
  await formRef.value.validate(async (valid) => {
  await formRef.value?.validate(async (valid) => {
    if (!valid) return;
    loading.value = true;
    const payload = { ...form };
    const { code } = id.value
      ? await editRepair({ id: id.value, ...payload })
      : await addRepair(payload);
    if (code == 200) {
      ElMessage.success(`${id.value ? "编辑" : "新增"}报修成功`);
      closeModal();
      emits("ok");
    try {
      const { code } = id.value
        ? await editRepair({ id: unref(id), ...form })
        : await addRepair(form);
      if (code == 200) {
        ElMessage.success(`${id.value ? "编辑" : "新增"}报修成功`);
        visible.value = false;
        emits("ok");
      }
    } finally {
      loading.value = false;
    }
    loading.value = false;
  });
};

const handleCancel = () => {
  resetForm();
  visible.value = false;
};

const handleClose = () => {
  resetForm();
  visible.value = false;
};

const openAdd = async () => {
  openModal();
  id.value = undefined;
  visible.value = true;
  await nextTick();
  await loadDeviceName();
  await Promise.all([loadDeviceName(), loadUserOptions()]);
};

const openEdit = async (editId) => {
  const { data } = await getRepairById(editId);
  openModal(editId);
  id.value = editId;
  visible.value = true;
  await nextTick();
  await loadDeviceName();
  await Promise.all([loadDeviceName(), loadUserOptions()]);
  setForm(data);
};

const close = () => {
  resetForm();
  closeModal();
};

defineExpose({
@@ -161,3 +217,5 @@
  openEdit,
});
</script>

<style lang="scss" scoped></style>

 src/views/equipmentManagement/repair/index.vue

@@ -14,7 +14,7 @@
        <el-input
            v-model="filters.deviceModel"
            style="width: 240px"
            placeholder="请选择规格型号"
            placeholder="请输入规格型号"
            clearable
            @change="getTableData"
        />
@@ -64,16 +64,8 @@
      <div class="actions">
        <el-text class="mx-1" size="large">设备报修</el-text>
        <div>
                    <el-button type="success" icon="Van" @click="addRepair">
                        æ–°å¢žæŠ¥ä¿®
                    </el-button>
          <el-button
            type="primary"
            icon="Plus"
            :disabled="multipleList.length !== 1"
            @click="addMaintain"
          >
            æ–°å¢žç»´ä¿®
          <el-button type="success" icon="Van" @click="addRepair">
            æ–°å¢žæŠ¥ä¿®
          </el-button>
          <el-button @click="handleOut">
            å¯¼å‡º
@@ -81,7 +73,7 @@
          <el-button
            type="danger"
            icon="Delete"
            :disabled="multipleList.length <= 0"
            :disabled="multipleList.length <= 0 || hasFinishedStatus"
            @click="delRepairByIds(multipleList.map((item) => item.id))"
          >
            æ‰¹é‡åˆ é™¤
@@ -89,33 +81,53 @@
        </div>
      </div>
      <PIMTable
        rowKey="id"
        isSelection
        :column="columns"
        :tableData="dataList"
        :page="{
          rowKey="id"
          isSelection
          :column="columns"
          :tableData="dataList"
          :page="{
          current: pagination.currentPage,
          size: pagination.pageSize,
          total: pagination.total,
        }"
        @selection-change="handleSelectionChange"
        @pagination="changePage"
          @selection-change="handleSelectionChange"
          @pagination="changePage"
      >
        <template #statusRef="{ row }">
          <el-tag v-if="row.status === 1" type="success">完结</el-tag>
          <el-tag v-if="row.status === 0" type="danger">待维修</el-tag>
          <el-tag v-if="row.status === 0" type="warning">待维修</el-tag>
          <el-tag v-else-if="row.status === 1" type="success">完结</el-tag>
          <el-tag v-else-if="row.status === 2" type="info">待审核</el-tag>
          <el-tag v-else-if="row.status === 3" type="danger">审核不通过</el-tag>
        </template>
        <template #operation="{ row }">
          <el-button
            type="primary"
            link
            :disabled="row.status === 1"
            @click="editRepair(row.id)"
          >
            ç¼–辑
          </el-button>
          <el-button
            type="warning"
            link
            :disabled="row.status !== 2"
            @click="openApprove(row.id)"
          >
            å®¡æ‰¹
          </el-button>
          <el-button
            type="success"
            link
            :disabled="row.status !== 0"
            @click="addMaintain(row)"
          >
            ç»´ä¿®
          </el-button>
          <el-button
            type="danger"
                        link
            link
            :disabled="row.status === 1"
            @click="delRepairByIds(row.id)"
          >
            åˆ é™¤
@@ -123,29 +135,32 @@
        </template>
      </PIMTable>
    </div>
    <RepairModal ref="repairModalRef" @ok="getTableData" />
    <MaintainModal ref="maintainModalRef" @ok="getTableData" />
    <RepairModal ref="repairModalRef" @ok="getTableData"/>
    <MaintainModal ref="maintainModalRef" @ok="getTableData"/>
    <ApproveModal ref="approveModalRef" @ok="getTableData"/>
  </div>
</template>

<script setup>
import { usePaginationApi } from "@/hooks/usePaginationApi";
import { getRepairPage, delRepair } from "@/api/equipmentManagement/repair";
import { onMounted, getCurrentInstance } from "vue";
import { onMounted, getCurrentInstance, computed } from "vue";
import {usePaginationApi} from "@/hooks/usePaginationApi";
import {getRepairPage, delRepair} from "@/api/equipmentManagement/repair";
import RepairModal from "./Modal/RepairModal.vue";
import { ElMessageBox, ElMessage } from "element-plus";
import {ElMessageBox, ElMessage} from "element-plus";
import dayjs from "dayjs";
import MaintainModal from "./Modal/MaintainModal.vue";
import ApproveModal from "./Modal/ApproveModal.vue";

defineOptions({
  name: "设备报修",
});

const { proxy } = getCurrentInstance();
const {proxy} = getCurrentInstance();

// æ¨¡æ€æ¡†å®žä¾‹
const repairModalRef = ref();
const maintainModalRef = ref();
const approveModalRef = ref();

// è¡¨æ ¼å¤šé€‰æ¡†é€‰ä¸­é¡¹
const multipleList = ref([]);
@@ -160,85 +175,85 @@
  resetFilters,
  onCurrentChange,
} = usePaginationApi(
  getRepairPage,
  {
    deviceName: undefined,
    deviceModel: undefined,
    remark: undefined,
    maintenanceName: undefined,
    repairTimeStr: undefined,
    maintenanceTimeStr: undefined,
  },
  [
    getRepairPage,
    {
      label: "设备名称",
      align: "center",
      prop: "deviceName",
      deviceName: undefined,
      deviceModel: undefined,
      remark: undefined,
      maintenanceName: undefined,
      repairTimeStr: undefined,
      maintenanceTimeStr: undefined,
    },
    {
      label: "规格型号",
      align: "center",
      prop: "deviceModel",
    },
    {
      label: "报修日期",
      align: "center",
      prop: "repairTime",
      formatData: (cell) => dayjs(cell).format("YYYY-MM-DD"),
    },
    {
      label: "报修人",
      align: "center",
      prop: "repairName",
    },
    {
      label: "故障现象",
      align: "center",
      prop: "remark",
    },
    {
      label: "维修人",
      align: "center",
      prop: "maintenanceName",
    },
    {
      label: "维修结果",
      align: "center",
      prop: "maintenanceResult",
    },
    {
      label: "维修日期",
      align: "center",
      prop: "maintenanceTime",
      formatData: (cell) => (cell ? dayjs(cell).format("YYYY-MM-DD") : ""),
    },
    {
      label: "状态",
      align: "center",
      prop: "status",
      dataType: "slot",
      slot: "statusRef",
    },
    {
      fixed: "right",
      label: "操作",
      dataType: "slot",
      slot: "operation",
      align: "center",
      width: "150px",
    },
  ]
    [
      {
        label: "设备名称",
        align: "center",
        prop: "deviceName",
      },
      {
        label: "规格型号",
        align: "center",
        prop: "deviceModel",
      },
      {
        label: "报修日期",
        align: "center",
        prop: "repairTime",
        formatData: (cell) => dayjs(cell).format("YYYY-MM-DD"),
      },
      {
        label: "报修人",
        align: "center",
        prop: "repairName",
      },
      {
        label: "故障现象",
        align: "center",
        prop: "remark",
      },
      {
        label: "维修人",
        align: "center",
        prop: "maintenanceName",
      },
      {
        label: "维修结果",
        align: "center",
        prop: "maintenanceResult",
      },
      {
        label: "维修日期",
        align: "center",
        prop: "maintenanceTime",
        formatData: (cell) => (cell ? dayjs(cell).format("YYYY-MM-DD") : ""),
      },
      {
        label: "状态",
        align: "center",
        prop: "status",
        dataType: "slot",
        slot: "statusRef",
      },
      {
        fixed: "right",
        label: "操作",
        dataType: "slot",
        slot: "operation",
        align: "center",
        width: "300px",
      },
    ]
);

// type === 1 ç»´ä¿® 2报修间
const handleDateChange = (value,type) => {
const handleDateChange = (value, type) => {
  filters.maintenanceTimeStr = null
  filters.c = null
  if(type === 1){
  if (type === 1) {
    if (value) {
      filters.maintenanceTimeStr = dayjs(value).format("YYYY-MM-DD");
    }
  }else{
  } else {
    if (value) {
      filters.repairTimeStr = dayjs(value).format("YYYY-MM-DD");
    }
@@ -251,6 +266,11 @@
  multipleList.value = selectionList;
};

// æ£€æŸ¥é€‰ä¸­çš„记录中是否有完结状态的
const hasFinishedStatus = computed(() => {
  return multipleList.value.some(item => item.status === 1)
})

// æ–°å¢žæŠ¥ä¿®
const addRepair = () => {
  repairModalRef.value.openAdd();
@@ -262,25 +282,41 @@
};

// æ–°å¢žç»´ä¿®
const addMaintain = () => {
  const row = multipleList.value[0];
const addMaintain = (row) => {
  maintainModalRef.value.open(row.id, row);
};

const changePage = ({ page, limit }) => {
    pagination.currentPage = page;
    pagination.pageSize = limit;
    onCurrentChange(page);
// å®¡æ‰¹
const openApprove = (id) => {
  approveModalRef.value.open(id);
};

const changePage = ({page, limit}) => {
  pagination.currentPage = page;
  pagination.pageSize = limit;
  onCurrentChange(page);
};

// å•è¡Œåˆ é™¤
const delRepairByIds = async (ids) => {
  // æ£€æŸ¥æ˜¯å¦æœ‰å®Œç»“状态的记录
  const idsArray = Array.isArray(ids) ? ids : [ids];
  const hasFinished = idsArray.some(id => {
    const record = dataList.value.find(item => item.id === id);
    return record && record.status === 1;
  });

  if (hasFinished) {
    ElMessage.warning('不能删除状态为完结的记录');
    return;
  }

  ElMessageBox.confirm("确认删除报修数据, æ­¤æ“ä½œä¸å¯é€†?", "警告", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(async () => {
    const { code } = await delRepair(ids);
    const {code} = await delRepair(ids);
    if (code === 200) {
      ElMessage.success("删除成功");
      getTableData();
@@ -295,12 +331,12 @@
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      proxy.download("/device/repair/export", {}, "设备报修.xlsx");
    })
    .catch(() => {
      ElMessage.info("已取消");
    });
      .then(() => {
        proxy.download("/device/repair/export", {}, "设备报修.xlsx");
      })
      .catch(() => {
        ElMessage.info("已取消");
      });
};

onMounted(() => {
@@ -312,6 +348,7 @@
.table_list {
  margin-top: unset;
}

.actions {
  display: flex;
  justify-content: space-between;

 src/views/equipmentManagement/upkeep/Form/ApproveModal.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,137 @@
<template>
  <FormDialog
    v-model="visible"
    title="定时任务审批"
    width="800px"
    @confirm="handleSubmit"
    @cancel="handleClose"
    @close="handleClose"
  >
    <el-descriptions :column="2" border>
      <el-descriptions-item label="任务名称">
        {{ detail.taskName || "-" }}
      </el-descriptions-item>
      <el-descriptions-item label="规格型号">
        {{ detail.deviceModel || "-" }}
      </el-descriptions-item>
      <el-descriptions-item label="频次">
        {{ frequencyText(detail.frequencyType) }}
      </el-descriptions-item>
      <el-descriptions-item label="开始日期与时间">
        {{ detail.frequencyDetail || "-" }}
      </el-descriptions-item>
      <el-descriptions-item label="登记人">
        {{ detail.registrant || "-" }}
      </el-descriptions-item>
      <el-descriptions-item label="登记日期">
        {{ detail.registrationDate || "-" }}
      </el-descriptions-item>
      <el-descriptions-item label="当前状态">
        {{ statusText(detail.status) }}
      </el-descriptions-item>
      <el-descriptions-item label="备注" :span="2">
        {{ detail.remarks || "-" }}
      </el-descriptions-item>
    </el-descriptions>
    <div style="margin-top: 16px">
      <el-form ref="formRef" :model="form" :rules="rules" label-width="100px">
        <el-form-item label="审批结果" prop="decision">
          <el-radio-group v-model="form.decision">
            <el-radio label="审核通过">审核通过</el-radio>
            <el-radio label="审核不通过">审核不通过</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
    </div>
  </FormDialog>
</template>

<script setup>
import { nextTick, ref } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import FormDialog from "@/components/Dialog/FormDialog.vue";
import { deviceMaintenanceTaskEdit } from "@/api/equipmentManagement/upkeep";

defineOptions({
  name: "定时任务审批弹窗",
});

const emits = defineEmits(["ok"]);

const visible = ref(false);
const loading = ref(false);
const detail = ref({});
const formRef = ref();
const form = ref({
  decision: undefined, // å®¡æ ¸é€šè¿‡ / å®¡æ ¸ä¸é€šè¿‡
});

const rules = {
  decision: [{ required: true, message: "请选择审批结果", trigger: "change" }],
};

const statusText = (status) => status || "-";

const frequencyText = (type) => {
  const map = {
    DAILY: "每日",
    WEEKLY: "每周",
    MONTHLY: "每月",
    QUARTERLY: "季度",
  };
  return map[type] ?? "-";
};

const open = async (row) => {
  detail.value = { ...(row || {}) };
  visible.value = true;
  await nextTick();
  form.value.decision = undefined;
};

const handleClose = () => {
  visible.value = false;
  detail.value = {};
  form.value.decision = undefined;
};

const updateStatus = async (status) => {
  loading.value = true;
  try {
    const payload = { ...(detail.value || {}), status };
    const { code } = await deviceMaintenanceTaskEdit(payload);
    if (code === 200) {
      ElMessage.success("审批成功");
      emits("ok");
      handleClose();
    }
  } finally {
    loading.value = false;
  }
};

const handleSubmit = async () => {
  if (detail.value?.status === "审核通过") {
    ElMessage.warning("审核通过后不可再次审批");
    return;
  }
  await formRef.value?.validate(async (valid) => {
    if (!valid) return;
    const isApprove = form.value.decision === "审核通过";
    ElMessageBox.confirm(
      `确认审批${isApprove ? "通过" : "不通过"}？`,
      "提示",
      {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }
    ).then(() => updateStatus(form.value.decision));
  });
};

defineExpose({ open });
</script>

<style scoped></style>


 src/views/equipmentManagement/upkeep/Form/MaintenanceModal.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,146 @@
<template>
  <FormDialog
    v-model="visible"
    :title="'设备保养'"
    width="500px"
    @confirm="sendForm"
    @cancel="handleCancel"
    @close="handleClose"
  >
    <el-form :model="form" :rules="rules" label-width="120px" ref="formRef">
      <el-form-item label="实际保养人" prop="maintenanceActuallyName">
        <el-input
          v-model="form.maintenanceActuallyName"
          placeholder="请输入实际保养人"
        ></el-input>
      </el-form-item>
      <el-form-item label="实际保养日期" prop="maintenanceActuallyTime">
        <el-date-picker
          v-model="form.maintenanceActuallyTime"
          placeholder="请选择实际保养日期"
          format="YYYY-MM-DD HH:mm:ss"
          value-format="YYYY-MM-DD HH:mm:ss"
          type="datetime"
          clearable
          style="width: 100%"
        />
      </el-form-item>
      <el-form-item label="保养状态" prop="status">
        <el-select v-model="form.status">
          <el-option label="待保养" :value="0"></el-option>
          <el-option label="完结" :value="1"></el-option>
          <el-option label="失败" :value="2"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="保养结果" prop="maintenanceResult">
        <el-input
          v-model="form.maintenanceResult"
          placeholder="请输入保养结果"
          type="text" />
      </el-form-item>
            <el-form-item label="本次保养金额" prop="maintenancePrice">
                <el-input-number v-model="form.maintenancePrice" :min="0" :precision="2" style="width: 100%" />
            </el-form-item>
    </el-form>
  </FormDialog>
</template>

<script setup>
import FormDialog from "@/components/Dialog/FormDialog.vue";
import { addMaintenance } from "@/api/equipmentManagement/upkeep";
import useFormData from "@/hooks/useFormData";
import dayjs from "dayjs";
import useUserStore from "@/store/modules/user";
import { ElMessage } from "element-plus";

defineOptions({
  name: "保养模态框",
});

const emits = defineEmits(["ok"]);

// ä¿å­˜è®¡åˆ’保养记录的id
const planId = ref();
const visible = ref(false);
const loading = ref(false);
const formRef = ref();
const userStore = useUserStore();

const { form, resetForm } = useFormData({
  maintenanceActuallyName: undefined, // å®žé™…保养人
  maintenanceActuallyTime: undefined, // å®žé™…保养日期
  maintenanceResult: undefined, // ä¿å…»ç»“æžœ
    maintenancePrice: undefined, // ä¿å…»é‡‘额
  status: 0, // ä¿å…»çŠ¶æ€
});

const rules = {
  maintenanceActuallyName: [
    { required: true, message: "请输入实际保养人", trigger: "blur" },
  ],
  maintenanceActuallyTime: [
    { required: true, message: "请选择实际保养日期", trigger: "change" },
  ],
  maintenanceResult: [
    { required: true, message: "请输入保养结果", trigger: "blur" },
  ],
  maintenancePrice: [
    { required: true, message: "请输入本次保养金额", trigger: "change" },
  ],
};

const setForm = (data) => {
  form.maintenanceActuallyName =
    data.maintenanceActuallyName ?? userStore.nickName;
  form.maintenanceActuallyTime =
    data.maintenanceActuallyTime 
      ? dayjs(data.maintenanceActuallyTime).format("YYYY-MM-DD HH:mm:ss")
      : dayjs().format("YYYY-MM-DD HH:mm:ss");
  form.maintenanceResult = data.maintenanceResult;
  form.status = 1; // é»˜è®¤çŠ¶æ€ä¸ºå®Œç»“
};

/**
 * @desc ä¿å­˜ä¿å…»
 */
const sendForm = async () => {
  await formRef.value?.validate(async (valid) => {
    if (!valid) return;
    loading.value = true;
    try {
      const { code } = await addMaintenance({ id: planId.value, ...form });
      if (code == 200) {
        ElMessage.success("保养成功");
        emits("ok");
        resetForm();
        visible.value = false;
      }
    } finally {
      loading.value = false;
    }
  });
};

const handleCancel = () => {
  resetForm();
  visible.value = false;
};

const handleClose = () => {
  resetForm();
  visible.value = false;
};

const open = async (id, row) => {
  planId.value = id; // ä¿å­˜è®¡åˆ’保养记录的id
  visible.value = true;
  await nextTick();
  setForm(row);
};

defineExpose({
  open,
});
</script>

<style lang="scss" scoped></style>

 src/views/equipmentManagement/upkeep/Form/PlanModal.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,188 @@
<template>
  <FormDialog
    v-model="visible"
    :title="id ? '编辑设备保养计划' : '新增设备保养计划'"
    width="500px"
    @confirm="sendForm"
    @cancel="handleCancel"
    @close="handleClose"
  >
    <el-form :model="form" label-width="100px">
      <el-form-item label="设备名称">
        <el-select
          v-model="form.deviceLedgerId"
          @change="setDeviceModel"
          placeholder="请选择设备"
          filterable
          default-first-option
          :reserve-keyword="false"
        >
          <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-select
          v-model="form.createUser"
          placeholder="请选择"
          filterable
          default-first-option
          :reserve-keyword="false"
          clearable
        >
          <el-option
            v-for="item in userList"
            :key="item.userId"
            :label="item.nickName"
            :value="item.userId"
          />
        </el-select>
      </el-form-item>
      <el-form-item v-if="id" label="保修状态">
        <el-select v-model="form.status">
          <el-option label="待保修" :value="0"></el-option>
          <el-option label="完结" :value="1"></el-option>
          <el-option label="失败" :value="2"></el-option>
        </el-select>
      </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>
  </FormDialog>
</template>

<script setup>
import FormDialog from "@/components/Dialog/FormDialog.vue";
import {
  addUpkeep,
  editUpkeep,
  getUpkeepById,
} from "@/api/equipmentManagement/upkeep";
import { ElMessage } from "element-plus";
import useFormData from "@/hooks/useFormData";
import { getDeviceLedger } from "@/api/equipmentManagement/ledger";
import { onMounted } from "vue";
import dayjs from "dayjs";
import { userListNoPage } from "@/api/system/user.js";

defineOptions({
  name: "设备保养新增计划",
});

const emits = defineEmits(["ok"]);

const id = ref();
const visible = ref(false);
const loading = ref(false);

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, // è®¡åˆ’保养日期
  createUser: undefined, // å½•å…¥äºº
  status: 0, //保修状态
});

const setDeviceModel = (deviceId) => {
  const option = deviceOptions.value.find((item) => item.id === deviceId);
  form.deviceModel = option.deviceModel;
};

/**
 * @desc è®¾ç½®è¡¨å•å†…容
 * @param data è®¾å¤‡ä¿¡æ¯
 */
const setForm = (data) => {
  form.deviceLedgerId = data.deviceLedgerId;
  form.deviceName = data.deviceName;
  form.deviceModel = data.deviceModel;
  form.createUser = Number(data.createUser);
  form.status = data.status;
  form.maintenancePlanTime = dayjs(data.maintenancePlanTime).format(
    "YYYY-MM-DD HH:mm:ss"
  );
};

// ç”¨æˆ·åˆ—表
const userList = ref([]);

onMounted(() => {
  loadDeviceName();
  userListNoPage().then((res) => {
    userList.value = res.data;
  });
});

const openEdit = async (editId) => {
  const { data } = await getUpkeepById(editId);
  id.value = editId;
  visible.value = true;
  await nextTick();
  setForm(data);
};

const sendForm = async () => {
  loading.value = true;
  try {
    const { code } = id.value
      ? await editUpkeep({ id: unref(id), ...form })
      : await addUpkeep(form);
    if (code == 200) {
      ElMessage.success(`${id.value ? "编辑" : "新增"}计划成功`);
      visible.value = false;
      emits("ok");
    }
  } finally {
    loading.value = false;
  }
};

const handleCancel = () => {
  resetForm();
  visible.value = false;
};

const handleClose = () => {
  resetForm();
  visible.value = false;
};

const openModal = () => {
  id.value = undefined;
  visible.value = true;
};

defineExpose({
  openModal,
  openEdit,
});
</script>

<style lang="scss" scoped></style>

 src/views/equipmentManagement/upkeep/Form/formDia.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,325 @@
<template>
    <FormDialog
        v-model="dialogVisitable"
        :title="operationType === 'add' ? '新增保养任务' : '编辑保养任务'"
        width="800px"
        :operation-type="operationType"
        @confirm="submitForm"
        @cancel="cancel"
        @close="cancel"
    >
        <el-form ref="formRef" :model="form" :rules="rules" label-width="120px">
            <el-row>
                <el-col :span="12">
                    <el-form-item label="设备名称" prop="taskId">
                        <el-select v-model="form.taskId" @change="setDeviceModel" filterable>
                            <el-option
                                v-for="(item, index) in deviceOptions"
                                :key="index"
                                :label="item.deviceName"
                                :value="item.id"
                            ></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="规格型号">
                        <el-input
                            v-model="form.deviceModel"
                            placeholder="请输入规格型号"
                            disabled
                        />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="录入人" prop="inspector">
                        <el-select
                            v-model="form.inspector"
                            filterable
                            default-first-option
                            :reserve-keyword="false"
                            placeholder="请选择"
                            clearable
                        >
                            <el-option
                                v-for="item in userList"
                                :label="item.nickName"
                                :value="item.userId"
                                :key="item.userId"
                            />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="登记时间" prop="registrationDate">
                        <el-date-picker
                            v-model="form.registrationDate"
                            type="date"
                            placeholder="选择登记日期"
                            format="YYYY-MM-DD"
                            value-format="YYYY-MM-DD"
                            style="width: 100%"
                        />
                    </el-form-item>
                </el-col>
            </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="审批人" prop="auditName">
            <el-select
              v-model="form.auditName"
              filterable
              placeholder="请选择审批人"
              clearable
            >
              <el-option
                v-for="item in userList"
                :key="item.userId"
                :label="item.nickName"
                :value="item.nickName"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="任务频率" prop="frequencyType">
                        <el-select v-model="form.frequencyType" placeholder="请选择" clearable>
                            <el-option label="每日" value="DAILY"/>
                            <el-option label="每周" value="WEEKLY"/>
                            <el-option label="每月" value="MONTHLY"/>
                            <el-option label="季度" value="QUARTERLY"/>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12" v-if="form.frequencyType === 'DAILY' && form.frequencyType">
                    <el-form-item label="日期" prop="frequencyDetail">
                        <el-time-picker v-model="form.frequencyDetail" placeholder="选择时间" format="HH:mm"
                                                        value-format="HH:mm" />
                    </el-form-item>
                </el-col>
                <el-col :span="12" v-if="form.frequencyType === 'WEEKLY' && form.frequencyType">
                    <el-form-item label="日期" prop="frequencyDetail">
                        <el-select v-model="form.week" placeholder="请选择" clearable style="width: 50%">
                            <el-option label="周一" value="MON"/>
                            <el-option label="周二" value="TUE"/>
                            <el-option label="周三" value="WED"/>
                            <el-option label="周四" value="THU"/>
                            <el-option label="周五" value="FRI"/>
                            <el-option label="周六" value="SAT"/>
                            <el-option label="周日" value="SUN"/>
                        </el-select>
                        <el-time-picker v-model="form.time" placeholder="选择时间" format="HH:mm"
                                                        value-format="HH:mm"  style="width: 50%"/>
                    </el-form-item>
                </el-col>
                <el-col :span="12" v-if="form.frequencyType === 'MONTHLY' && form.frequencyType">
                    <el-form-item label="日期" prop="frequencyDetail">
                        <el-date-picker
                            v-model="form.frequencyDetail"
                            type="datetime"
                            clearable
                            placeholder="选择开始日期"
                            format="DD,HH:mm"
                            value-format="DD,HH:mm"
                        />
                    </el-form-item>
                </el-col>
                <el-col :span="12" v-if="form.frequencyType === 'QUARTERLY' && form.frequencyType">
                    <el-form-item label="日期" prop="frequencyDetail">
                        <el-date-picker
                            v-model="form.frequencyDetail"
                            type="datetime"
                            clearable
                            placeholder="选择开始日期"
                            format="MM,DD,HH:mm"
                            value-format="MM,DD,HH:mm"
                        />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="备注" prop="remarks">
                        <el-input v-model="form.remarks" placeholder="请输入备注" type="textarea" />
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
    </FormDialog>
</template>

<script setup>
import FormDialog from "@/components/Dialog/FormDialog.vue";
import { reactive, ref, getCurrentInstance, toRefs } from "vue";
import {userListNoPageByTenantId} from "@/api/system/user.js";
import { getDeviceLedger } from "@/api/equipmentManagement/ledger";
import { deviceMaintenanceTaskAdd, deviceMaintenanceTaskEdit } from "@/api/equipmentManagement/upkeep";
import { getCurrentDate } from "@/utils/index.js";
import useUserStore from "@/store/modules/user.js";

const { proxy } = getCurrentInstance()
const emit = defineEmits()
const dialogVisitable = ref(false);
const operationType = ref('add');
const deviceOptions = ref([]);
const userStore = useUserStore();
const data = reactive({
    form: {
        taskId: undefined,
        taskName: undefined,
        // å½•å…¥äººï¼šå•é€‰ä¸€ä¸ªç”¨æˆ· id
        inspector: undefined,
    auditName: undefined,
        remarks: '',
        frequencyType: '',
        frequencyDetail: '',
        week: '',
        time: '',
        deviceModel: undefined, // è§„格型号
        registrationDate: ''
    },
    rules: {
        taskId: [{ required: true, message: "请选择设备", trigger: "change" },],
        inspector: [{ required: true, message: "请选择录入人", trigger: "blur" },],
        registrationDate: [{ required: true, message: "请选择登记时间", trigger: "change" }],
    auditName: [{ required: true, message: "请选择审批人", trigger: "change" }],
    }
})
const { form, rules } = toRefs(data)
const userList = ref([])

const loadDeviceName = async () => {
    const { data } = await getDeviceLedger();
    deviceOptions.value = data;
};

// é€‰æ‹©è®¾å¤‡æ—¶ï¼Œå›žå¡«è®¾å¤‡åç§°(taskName)和规格型号(deviceModel)
const setDeviceModel = (id) => {
    const option = deviceOptions.value.find((item) => item.id === id);
    if (option) {
        form.value.taskId = option.id;
        form.value.taskName = option.deviceName;
        form.value.deviceModel = option.deviceModel;
    }
}

// æ‰“开弹框
const openDialog = async (type, row) => {
    dialogVisitable.value = true
    operationType.value = type
	
    // é‡ç½®è¡¨å•
    resetForm();
	
    // åŠ è½½ç”¨æˆ·åˆ—表
    userListNoPageByTenantId().then((res) => {
        userList.value = res.data;
    });
	
    // åŠ è½½è®¾å¤‡åˆ—表
    await loadDeviceName();
	
    if (type === 'edit' && row) {
        form.value = { ...row }
        // ç¼–辑时用接口返回的 registrantId å›žæ˜¾å½•å…¥äºº
        if (row.registrantId) {
            form.value.inspector = row.registrantId
        }

        // å¦‚果有设备ID，自动设置设备信息
        if (form.value.taskId) {
            setDeviceModel(form.value.taskId);
        }
    } else if (type === 'add') {
        // æ–°å¢žæ—¶è®¾ç½®ç™»è®°æ—¥æœŸä¸ºå½“天
        form.value.registrationDate = getCurrentDate();
        // æ–°å¢žæ—¶è®¾ç½®å½•å…¥äººä¸ºå½“前登录账户
        form.value.inspector = userStore.id;
    }
}

// å…³é—­å¯¹è¯æ¡†
const cancel = () => {
    resetForm()
    dialogVisitable.value = false
    emit('closeDia')
}

// é‡ç½®è¡¨å•å‡½æ•°
const resetForm = () => {
    if (proxy.$refs.formRef) {
        proxy.$refs.formRef.resetFields()
    }
    // é‡ç½®è¡¨å•æ•°æ®ç¡®ä¿è®¾å¤‡ä¿¡æ¯æ­£ç¡®é‡ç½®
    form.value = {
        taskId: undefined,
        taskName: undefined,
        inspector: undefined,
        auditName: undefined,
        remarks: '',
        frequencyType: '',
        frequencyDetail: '',
        week: '',
        time: '',
        deviceModel: undefined,
        registrationDate: ''
    }
}

// æäº¤è¡¨å•
const submitForm = () => {
    proxy.$refs["formRef"].validate(async valid => {
        if (valid) {
            try {
                const payload = { ...form.value }
                // ä¸å†å‘后端传保养人字段，仅使用接口要求的 registrant / registrantId
                // æ ¹æ®é€‰æ‹©çš„"录入人"设置 registrant / registrantId
                if (payload.inspector) {
                    const selectedUser = userList.value.find(
                        (u) => String(u.userId) === String(payload.inspector)
                    )
                    if (selectedUser) {
                        payload.registrantId = selectedUser.userId
                        payload.registrant = selectedUser.nickName
                    }
                }
                delete payload.inspector
                delete payload.inspectorIds
				
                if (payload.frequencyType === 'WEEKLY') {
                    let frequencyDetail = ''
                    frequencyDetail = payload.week + ',' + payload.time
                    payload.frequencyDetail = frequencyDetail
                }
				
                // å½•å…¥æ—¥æœŸï¼šç›´æŽ¥ä½¿ç”¨è¡¨å•é‡Œçš„ registrationDate å­—段
                // ä¸€äº›é»˜è®¤çŠ¶æ€å­—段
                if (payload.status === undefined || payload.status === null || payload.status === '') {
                    payload.status = '待审核' // é»˜è®¤çŠ¶æ€ï¼šå¾…审核
                }
                payload.active = true
                payload.deleted = 0
				
                if (operationType.value === 'edit') {
                    await deviceMaintenanceTaskEdit(payload)
                } else {
                    await deviceMaintenanceTaskAdd(payload)
                }
                cancel()
                proxy.$modal.msgSuccess('提交成功')
            } catch (error) {
                proxy.$modal.msgError('提交失败，请重试')
            }
        }
    })
}
defineExpose({ openDialog })
</script>

<style scoped>

</style>

 src/views/equipmentManagement/upkeep/Modal/MaintenanceModal.vue

ÎļþÒÑɾ³ý

 src/views/equipmentManagement/upkeep/Modal/PlanModal.vue

ÎļþÒÑɾ³ý

 src/views/equipmentManagement/upkeep/index.vue

@@ -1,76 +1,163 @@
<template>
  <div class="app-container">
    <el-form :model="filters" :inline="true">
      <el-form-item label="设备名称">
        <el-input
            v-model="filters.deviceName"
            style="width: 240px"
            placeholder="请输入设备名称"
            clearable
            @change="getTableData"
        />
      </el-form-item>
      <el-form-item label="计划保养日期">
        <el-date-picker
            v-model="filters.maintenancePlanTime"
            type="date"
            placeholder="请选择计划保养日期"
            size="default"
            @change="(date) => handleDateChange(date,2)"
        />
      </el-form-item>
      <el-form-item label="实际保养日期">
        <el-date-picker
            v-model="filters.maintenanceActuallyTime"
            type="date"
            placeholder="请选择实际保养日期"
            size="default"
            @change="(date) => handleDateChange(date,1)"
        />
      </el-form-item>
      <el-form-item label="实际保养人">
        <el-input
            v-model="filters.maintenanceActuallyName"
            style="width: 240px"
            placeholder="请输入实际保养人"
            clearable
            @change="getTableData"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="getTableData">搜索</el-button>
        <el-button @click="resetFilters">重置</el-button>
      </el-form-item>
    </el-form>
    <div class="table_list">
      <div class="actions">
        <el-text class="mx-1" size="large">设备保养</el-text>
        <div>
                    <el-button type="success" icon="Van" @click="addPlan">
                        æ–°å¢žè®¡åˆ’
                    </el-button>
          <el-button
            type="primary"
            icon="Plus"
            :disabled="multipleList.length !== 1"
            @click="addMaintain"
          >
            æ–°å¢žä¿å…»
          </el-button>
          <el-button @click="handleOut">
            å¯¼å‡º
          </el-button>
          <el-button
            type="danger"
            icon="Delete"
            :disabled="multipleList.length <= 0"
            @click="delRepairByIds(multipleList.map((item) => item.id))"
          >
            æ‰¹é‡åˆ é™¤
          </el-button>
    <el-tabs v-model="activeTab" @tab-change="handleTabChange">
      <!-- å®šæ—¶ä»»åŠ¡ç®¡ç†tab -->
      <el-tab-pane label="定时任务管理" name="scheduled">
        <div class="search_form">
          <el-form :model="scheduledFilters" :inline="true">
            <el-form-item label="任务名称">
              <el-input
                  v-model="scheduledFilters.taskName"
                  style="width: 240px"
                  placeholder="请输入任务名称"
                  clearable
                  :prefix-icon="Search"
                  @change="getScheduledTableData"
              />
            </el-form-item>
            <el-form-item label="任务状态">
              <el-select v-model="scheduledFilters.status" placeholder="请选择任务状态" clearable style="width: 200px">
                <el-option label="待审核" value="待审核" />
                <el-option label="审核通过" value="审核通过" />
                <el-option label="审核不通过" value="审核不通过" />
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="getScheduledTableData">搜索</el-button>
              <el-button @click="resetScheduledFilters">重置</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
      <PIMTable
        <div class="table_list">
          <div class="actions">
            <el-text class="mx-1" size="large">定时任务管理</el-text>
            <div>
              <el-button type="primary" icon="Plus" @click="addScheduledTask">
                æ–°å¢žä»»åŠ¡
              </el-button>
              <el-button
                type="danger"
                icon="Delete"
                :disabled="scheduledMultipleList.length <= 0"
                @click="delScheduledTaskByIds(scheduledMultipleList.map((item) => item.id))"
              >
                æ‰¹é‡åˆ é™¤
              </el-button>
            </div>
          </div>
          <PIMTable
            rowKey="id"
            isSelection
            :column="scheduledColumns"
            :tableData="scheduledDataList"
            :page="{
              current: scheduledPagination.currentPage,
              size: scheduledPagination.pageSize,
              total: scheduledPagination.total,
            }"
            @selection-change="handleScheduledSelectionChange"
            @pagination="changeScheduledPage"
          >
            <template #statusRef="{ row }">
              <el-tag v-if="row.status === '待审核'" type="warning">待审核</el-tag>
              <el-tag v-else-if="row.status === '审核通过'" type="success">审核通过</el-tag>
              <el-tag v-else-if="row.status === '审核不通过'" type="danger">审核不通过</el-tag>
              <span v-else>{{ row.status }}</span>
            </template>
            <template #operation="{ row }">
              <el-button
                type="primary"
                link
                @click="editScheduledTask(row)"
              >
                ç¼–辑
              </el-button>
              <el-button
                type="warning"
                link
                :disabled="row.status === '审核通过'"
                @click="openScheduledApprove(row)"
              >
                å®¡æ‰¹
              </el-button>
              <el-button
                type="danger"
                link
                @click="delScheduledTaskByIds(row.id)"
              >
                åˆ é™¤
              </el-button>
            </template>
          </PIMTable>
        </div>
      </el-tab-pane>

      <!-- ä»»åŠ¡è®°å½•tab（原设备保养页面） -->
      <el-tab-pane label="任务记录" name="record">
        <div class="search_form">
          <el-form :model="filters" :inline="true">
            <el-form-item label="设备名称">
              <el-input
                  v-model="filters.deviceName"
                  style="width: 240px"
                  placeholder="请输入设备名称"
                  clearable
                  :prefix-icon="Search"
                  @change="getTableData"
              />
            </el-form-item>
            <el-form-item label="计划保养日期">
              <el-date-picker
                  v-model="filters.maintenancePlanTime"
                  type="date"
                  placeholder="请选择计划保养日期"
                  size="default"
                  @change="(date) => handleDateChange(date,2)"
              />
            </el-form-item>
            <el-form-item label="实际保养日期">
              <el-date-picker
                  v-model="filters.maintenanceActuallyTime"
                  type="date"
                  placeholder="请选择实际保养日期"
                  size="default"
                  @change="(date) => handleDateChange(date,1)"
              />
            </el-form-item>
            <el-form-item label="实际保养人">
              <el-input
                  v-model="filters.maintenanceActuallyName"
                  style="width: 240px"
                  placeholder="请输入实际保养人"
                  clearable
                  :prefix-icon="Search"
                  @change="getTableData"
              />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="getTableData">搜索</el-button>
              <el-button @click="resetFilters">重置</el-button>
            </el-form-item>
          </el-form>
        </div>
        <div class="table_list">
          <div class="actions">
            <el-text class="mx-1" size="large">任务记录</el-text>
            <div>
              <el-button @click="handleOut">
                å¯¼å‡º
              </el-button>
              <el-button
                type="danger"
                icon="Delete"
                :disabled="multipleList.length <= 0 || hasFinishedStatus"
                @click="delRepairByIds(multipleList.map((item) => item.id))"
              >
                æ‰¹é‡åˆ é™¤
              </el-button>
            </div>
          </div>
         <PIMTable
        rowKey="id"
        isSelection
        :column="columns"
@@ -84,130 +171,186 @@
        @pagination="changePage"
      >
        <template #maintenanceResultRef="{ row }">
          <el-tag v-if="row.maintenanceResult === 1" type="success">
            å®Œå¥½
          </el-tag>
          <el-tag v-if="row.maintenanceResult === 0" type="danger">
            ç»´ä¿®
          </el-tag>
          <div>{{ row.maintenanceResult || '-' }}</div>
        </template>
        <template #statusRef="{ row }">
          <el-tag v-if="row.status === 2" type="danger">失败</el-tag>
          <el-tag v-if="row.status === 1" type="success">完结</el-tag>
          <el-tag v-if="row.status === 0" type="danger">待保养</el-tag>
          <el-tag v-if="row.status === 0" type="warning">待保养</el-tag>
        </template>
        <template #operation="{ row }">
          <!-- è¿™ä¸ªåŠŸèƒ½è·Ÿæ–°å¢žä¿å…»åŠŸèƒ½ä¸€æ¨¡ä¸€æ ·ï¼Œæœ‰å•¥æ„ä¹‰ï¼Ÿ -->
          <!-- <el-button
              type="primary"
              text
              @click="addMaintain(row)"
          >
            æ–°å¢žä¿å…»
          </el-button> -->
          <el-button
            type="primary"
            link
            :disabled="row.status === 1"
            @click="editPlan(row.id)"
          >
            ç¼–辑
          </el-button>
          <el-button
            type="success"
            link
            :disabled="row.status === 1"
            @click="addMaintain(row)"
          >
            ä¿å…»
          </el-button>
          <el-button
            type="danger"
                        link
            link
            :disabled="row.status === 1"
            @click="delRepairByIds(row.id)"
          >
            åˆ é™¤
          </el-button>
          <el-button
            type="primary"
            link
            @click="openFileDialog(row)"
          >
            é™„件
          </el-button>
        </template>
      </PIMTable>
    </div>
        </div>
      </el-tab-pane>
    </el-tabs>
    <PlanModal ref="planModalRef" @ok="getTableData" />
    <MaintenanceModal ref="maintainModalRef" @ok="getTableData" />
    <FormDia ref="formDiaRef" @closeDia="getScheduledTableData" />
    <ApproveModal ref="approveModalRef" @ok="getScheduledTableData" />
    <FileListDialog 
      ref="fileListDialogRef"
      v-model="fileDialogVisible"
      :show-upload-button="true"
      :show-delete-button="true"
      :delete-method="handleAttachmentDelete"
      :name-column-label="'附件名称'"
      :rulesRegulationsManagementId="currentMaintenanceTaskId"
      @upload="handleAttachmentUpload" />
  </div>
</template>

<script setup>
import { usePaginationApi } from "@/hooks/usePaginationApi";
import { getUpkeepPage, delUpkeep } from "@/api/equipmentManagement/upkeep";
import { onMounted, getCurrentInstance } from "vue";
import PlanModal from "./Modal/PlanModal.vue";
import MaintenanceModal from "./Modal/MaintenanceModal.vue";
import dayjs from "dayjs";
import { ElMessageBox, ElMessage } from "element-plus";
import { ref, onMounted, reactive, getCurrentInstance, nextTick, computed } from 'vue'
import { Search } from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import PlanModal from './Form/PlanModal.vue'
import MaintenanceModal from './Form/MaintenanceModal.vue'
import FormDia from './Form/formDia.vue'
import ApproveModal from './Form/ApproveModal.vue'
import FileListDialog from '@/components/Dialog/FileListDialog.vue'
import {
  getUpkeepPage,
  delUpkeep,
  deviceMaintenanceTaskList,
  deviceMaintenanceTaskDel,
} from '@/api/equipmentManagement/upkeep'
import {
  listMaintenanceTaskFiles,
  addMaintenanceTaskFile,
  delMaintenanceTaskFile,
} from '@/api/equipmentManagement/maintenanceTaskFile'
import dayjs from 'dayjs'

defineOptions({
  name: "设备保养",
});
const { proxy } = getCurrentInstance()

const { proxy } = getCurrentInstance();
// Tab相关
const activeTab = ref('scheduled')

// è®¡åˆ’弹窗控制器
const planModalRef = ref();
const planModalRef = ref()
// ä¿å…»å¼¹çª—控制器
const maintainModalRef = ref();
const maintainModalRef = ref()
// å®šæ—¶ä»»åŠ¡å¼¹çª—控制器
const formDiaRef = ref()
// ä¿å…»å®¡æ‰¹å¼¹çª—
const approveModalRef = ref()
// é™„件弹窗
const fileListDialogRef = ref(null)
const fileDialogVisible = ref(false)
const currentMaintenanceTaskId = ref(null)

// è¡¨æ ¼å¤šé€‰æ¡†é€‰ä¸­é¡¹
const multipleList = ref([]);
// ä»»åŠ¡è®°å½•tab（原设备保养页面）相关变量
const filters = reactive({
  deviceName: '',
  maintenancePlanTime: '',
  maintenanceActuallyTime: '',
  maintenanceActuallyName: '',
})

// å¤šé€‰åŽåšä»€ä¹ˆ
const handleSelectionChange = (selectionList) => {
  multipleList.value = selectionList;
};
const dataList = ref([])
const pagination = ref({
  currentPage: 1,
  pageSize: 10,
  total: 0,
})
const multipleList = ref([])

// è¡¨æ ¼é’©å­
const {
  filters,
  columns,
  dataList,
  pagination,
  getTableData,
  resetFilters,
  onCurrentChange,
} = usePaginationApi(getUpkeepPage, {
  deviceName: undefined,
  maintenancePlanTime: undefined,
  maintenanceActuallyTime: undefined,
  maintenanceActuallyName: undefined,
}, [
  {
    label: "设备名称",
    align: "center",
    prop: "deviceName",
  },
  {
    label: "规格型号",
    align: "center",
    prop: "deviceModel",
  },
  {
    label: "计划保养日期",
    align: "center",
    prop: "maintenancePlanTime",
    formatData: (cell) => dayjs(cell).format("YYYY-MM-DD"),
  },
  {
    label: "录入人",
    align: "center",
    prop: "createUserName",
  },
  {
    label: "录入日期",
    align: "center",
    prop: "createTime",
    formatData: (cell) => dayjs(cell).format("YYYY-MM-DD HH:mm:ss"),
    width: 200,
  },
  {
    label: "实际保养人",
    align: "center",
    prop: "maintenanceActuallyName",
  },
  {
    label: "实际保养日期",
    align: "center",
    prop: "maintenanceActuallyTime",
    formatData: (cell) =>
      cell ? dayjs(cell).format("YYYY-MM-DD HH:mm:ss") : "-",
  },
  {
    label: "保养结果",
    align: "center",
    prop: "maintenanceResult",
    dataType: "slot",
    slot: "maintenanceResultRef",
  },
// å®šæ—¶ä»»åŠ¡ç®¡ç†tab相关变量
const scheduledFilters = reactive({
  taskName: '',
  status: '',
})

const scheduledDataList = ref([])
const scheduledPagination = reactive({
  currentPage: 1,
  pageSize: 10,
  total: 0,
})
const scheduledMultipleList = ref([])

// å®šæ—¶ä»»åŠ¡ç®¡ç†è¡¨æ ¼åˆ—配置
const scheduledColumns = ref([
    { prop: "taskName", label: "设备名称"},
    {
        label: "规格型号",
        prop: "deviceModel",
    },
    {
        prop: "frequencyType",
        label: "频次",
        minWidth: 150,
        // PIMTable ä½¿ç”¨çš„是 formatData，而不是 Element-Plus çš„ formatter
        formatData: (cell) => ({
            DAILY: "每日",
            WEEKLY: "每周",
            MONTHLY: "每月",
            QUARTERLY: "季度"
        }[cell] || "")
    },
    {
        prop: "frequencyDetail",
        label: "开始日期与时间",
        minWidth: 150,
        // åŒæ ·æ”¹ç”¨ formatData，PIMTable å†…部会把单元格值传进来
        formatData: (cell) => {
            if (typeof cell !== 'string') return '';
            let val = cell;
            const replacements = {
                MON: '周一',
                TUE: '周二',
                WED: '周三',
                THU: '周四',
                FRI: '周五',
                SAT: '周六',
                SUN: '周日'
            };
            // ä½¿ç”¨æ­£åˆ™ä¸€æ¬¡æ€§æ›¿æ¢æ‰€æœ‰åŒ¹é…é¡¹
            return val.replace(/MON|TUE|WED|THU|FRI|SAT|SUN/g, match => replacements[match]);
        }
    },
    { prop: "registrant", label: "登记人", minWidth: 100 },
    { prop: "registrationDate", label: "登记日期", minWidth: 100 },
  {
    label: "状态",
    align: "center",
@@ -215,86 +358,350 @@
    dataType: "slot",
    slot: "statusRef",
  },
  {
    fixed: "right",
    label: "操作",
    dataType: "slot",
    slot: "operation",
    align: "center",
    width: "150px",
  },
]);
// type == 1实际保养时间 2计划保养时间
const handleDateChange = (value,type) => {
  filters.maintenanceActuallyTimeReq = null
  filters.maintenancePlanTimeReq = null
  if(type === 1){
    if (value) {
      filters.maintenanceActuallyTimeReq = dayjs(value).format("YYYY-MM-DD");
    }
  }else{
    if (value) {
      filters.maintenancePlanTimeReq = dayjs(value).format("YYYY-MM-DD");
    }
    {
        fixed: "right",
        label: "操作",
        dataType: "slot",
        slot: "operation",
        align: "center",
        width: "200px",
    },
])

// ä»»åŠ¡è®°å½•è¡¨æ ¼åˆ—配置（原设备保养表格列）
const columns = ref([
    {
        label: "设备名称",
        align: "center",
        prop: "deviceName",
    },
    {
        label: "规格型号",
        align: "center",
        prop: "deviceModel",
    },
    {
        label: "计划保养日期",
        align: "center",
        prop: "maintenancePlanTime",
        formatData: (cell) => dayjs(cell).format("YYYY-MM-DD"),
    },
    {
        label: "录入人",
        align: "center",
        prop: "createUserName",
    },
    // {
    //   label: "录入日期",
    //   align: "center",
    //   prop: "createTime",
    //   formatData: (cell) => dayjs(cell).format("YYYY-MM-DD HH:mm:ss"),
    //   width: 200,
    // },
    {
        label: "实际保养人",
        align: "center",
        prop: "maintenanceActuallyName",
    },
    {
        label: "实际保养日期",
        align: "center",
        prop: "maintenanceActuallyTime",
        formatData: (cell) =>
            cell ? dayjs(cell).format("YYYY-MM-DD HH:mm:ss") : "-",
    },
    {
        label: "保养结果",
        align: "center",
        prop: "maintenanceResult",
        dataType: "slot",
        slot: "maintenanceResultRef",
    },
    {
        label: "状态",
        align: "center",
        prop: "status",
        dataType: "slot",
        slot: "statusRef",
    },
    {
        fixed: "right",
        label: "操作",
        dataType: "slot",
        slot: "operation",
        align: "center",
        width: "350px",
    },
])

// Tab切换处理
const handleTabChange = (tabName) => {
  if (tabName === 'record') {
    getTableData()
  } else if (tabName === 'scheduled') {
    getScheduledTableData()
  }
  getTableData();
};
}

// æ–°å¢žä¿å…»
const addMaintain = () => {
  const row = multipleList.value[0];
  maintainModalRef.value.open(row.id, row);
};

// æ–°å¢žè®¡åˆ’
const addPlan = () => {
  planModalRef.value.openModal();
};

// ç¼–辑计划
const editPlan = (id) => {
  planModalRef.value.openEdit(id);
};

const changePage = ({ page, limit }) => {
    pagination.currentPage = page;
    pagination.pageSize = limit;
    onCurrentChange(page);
};

// å•è¡Œåˆ é™¤
const delRepairByIds = async (ids) => {
  ElMessageBox.confirm("确认删除报修数据, æ­¤æ“ä½œä¸å¯é€†?", "警告", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(async () => {
    const { code } = await delUpkeep(ids);
    if (code === 200) {
      ElMessage.success("删除成功");
      getTableData();
// å®šæ—¶ä»»åŠ¡ç®¡ç†ç›¸å…³æ–¹æ³•
const getScheduledTableData = async () => {
  try {
    const params = {
      current: scheduledPagination.currentPage,
      size: scheduledPagination.pageSize,
      taskName: scheduledFilters.taskName || undefined,
      status: scheduledFilters.status || undefined,
    }
  });
};
    const { code, data } = await deviceMaintenanceTaskList(params)
    if (code === 200) {
      scheduledDataList.value = data?.records || []
      scheduledPagination.total = data?.total || 0
    }
  } catch (error) {
    ElMessage.error('获取定时任务列表失败')
  }
}

// å¯¼å‡º
const resetScheduledFilters = () => {
  scheduledFilters.taskName = ''
  scheduledFilters.status = ''
  getScheduledTableData()
}

const handleScheduledSelectionChange = (selection) => {
  scheduledMultipleList.value = selection
}

const changeScheduledPage = (page) => {
  scheduledPagination.currentPage = page.page
  scheduledPagination.pageSize = page.limit
  getScheduledTableData()
}

const addScheduledTask = () => {
  nextTick(() => {
        formDiaRef.value?.openDialog('add');
    });
}

const editScheduledTask = (row) => {
  if (row) {
        nextTick(() => {
            formDiaRef.value?.openDialog('edit', row);
        });
  }
}

const delScheduledTaskByIds = async (ids) => {
  try {
    await ElMessageBox.confirm('确定删除选中的定时任务吗？', '提示', {
      type: 'warning',
    })
    const payload = Array.isArray(ids) ? ids : [ids]
    await deviceMaintenanceTaskDel(payload)
    ElMessage.success('删除定时任务成功')
    getScheduledTableData()
  } catch (error) {
    // ç”¨æˆ·å–消删除
  }
}

const handleScheduledOut = () => {
  ElMessage.info('导出定时任务功能待实现')
}

// ä»»åŠ¡è®°å½•ç›¸å…³æ–¹æ³•ï¼ˆåŽŸè®¾å¤‡ä¿å…»é¡µé¢æ–¹æ³•ï¼‰
const getTableData = async () => {
  try {
    const params = {
      current: pagination.value.currentPage,
      size: pagination.value.pageSize,
      deviceName: filters.deviceName || undefined,
      maintenancePlanTime: filters.maintenancePlanTime ? dayjs(filters.maintenancePlanTime).format('YYYY-MM-DD') : undefined,
      maintenanceActuallyTime: filters.maintenanceActuallyTime ? dayjs(filters.maintenanceActuallyTime).format('YYYY-MM-DD') : undefined,
      maintenanceActuallyName: filters.maintenanceActuallyName || undefined,
    }

    const { code, data } = await getUpkeepPage(params)
    if (code === 200) {
      dataList.value = data.records
      pagination.value.total = data.total
    }
  } catch (error) {
    console.log(error);
    
  }
}

const resetFilters = () => {
  filters.deviceName = ''
  filters.maintenancePlanTime = ''
  filters.maintenanceActuallyTime = ''
  filters.maintenanceActuallyName = ''
  getTableData()
}

const handleSelectionChange = (selection) => {
  multipleList.value = selection
}

// æ£€æŸ¥é€‰ä¸­çš„记录中是否有完结状态的
const hasFinishedStatus = computed(() => {
  return multipleList.value.some(item => item.status === 1)
})

const changePage = (page) => {
  pagination.value.currentPage = page.page
  pagination.value.pageSize = page.limit
  getTableData()
}

const addMaintain = (row) => {
  maintainModalRef.value.open(row.id, row)
}

// å®šæ—¶ä»»åŠ¡å®¡æ‰¹
const openScheduledApprove = (row) => {
  approveModalRef.value.open(row)
}

const addPlan = () => {
  planModalRef.value.openModal()
}

const editPlan = (id) => {
  planModalRef.value.openEdit(id)
}

const delRepairByIds = async (ids) => {
  // æ£€æŸ¥æ˜¯å¦æœ‰å®Œç»“状态的记录
  const hasFinished = multipleList.value.some(item => item.status === 1)
  if (hasFinished) {
    ElMessage.warning('不能删除状态为完结的记录')
    return
  }
  
  try {
    await ElMessageBox.confirm('确认删除保养数据, æ­¤æ“ä½œä¸å¯é€†?', '警告', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    })
    
    const { code } = await delUpkeep(ids)
    if (code === 200) {
      ElMessage.success('删除成功')
      getTableData()
    }
  } catch (error) {
    // ç”¨æˆ·å–消删除
  }
}

const handleOut = () => {
  ElMessageBox.confirm("选中的内容将被导出，是否确认导出？", "导出", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  ElMessageBox.confirm('选中的内容将被导出，是否确认导出？', '导出', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning',
  })
    .then(() => {
      proxy.download("/device/maintenance/export", {}, "设备保养.xlsx");
      proxy.download('/device/maintenance/export', {}, '设备保养.xlsx')
    })
    .catch(() => {
      ElMessage.info("已取消");
    });
};
      ElMessage.info('已取消')
    })
}

const handleDateChange = (date, type) => {
  if (type === 1) {
    filters.maintenanceActuallyTime = date ? dayjs(date).format('YYYY-MM-DD') : ''
  } else {
    filters.maintenancePlanTime = date ? dayjs(date).format('YYYY-MM-DD') : ''
  }
  getTableData()
}

// é™„件相关方法
// æŸ¥è¯¢é™„件列表
const fetchMaintenanceTaskFiles = async (deviceMaintenanceId) => {
  try {
    const params = {
      current: 1,
      size: 100,
      deviceMaintenanceId,
      rulesRegulationsManagementId:deviceMaintenanceId
    }
    const res = await listMaintenanceTaskFiles(params)
    const records = res?.data?.records || []
    const mapped = records.map(item => ({
      id: item.id,
      name: item.fileName || item.name,
      url: item.fileUrl || item.url,
      raw: item,
    }))
    fileListDialogRef.value?.setList(mapped)
  } catch (error) {
    ElMessage.error('获取附件列表失败')
  }
}

// æ‰“开附件弹窗
const openFileDialog = async (row) => {
  currentMaintenanceTaskId.value = row.id
  fileDialogVisible.value = true
  await fetchMaintenanceTaskFiles(row.id)
}

// åˆ·æ–°é™„件列表
const refreshFileList = async () => {
  if (!currentMaintenanceTaskId.value) return
  await fetchMaintenanceTaskFiles(currentMaintenanceTaskId.value)
}

// ä¸Šä¼ é™„件
const handleAttachmentUpload = async (filePayload) => {
  if (!currentMaintenanceTaskId.value) return
  try {
    const payload = {
      name: filePayload?.fileName || filePayload?.name,
      url: filePayload?.fileUrl || filePayload?.url,
      deviceMaintenanceId: currentMaintenanceTaskId.value,
    }
    await addMaintenanceTaskFile(payload)
    ElMessage.success('文件上传成功')
    await refreshFileList()
  } catch (error) {
    ElMessage.error('文件上传失败')
  }
}

// åˆ é™¤é™„件
const handleAttachmentDelete = async (row) => {
  if (!row?.id) return false
  try {
    await ElMessageBox.confirm('确认删除该附件？', '提示', { type: 'warning' })
  } catch {
    return false
  }
  try {
    await delMaintenanceTaskFile(row.id)
    ElMessage.success('删除成功')
    await refreshFileList()
    return true
  } catch (error) {
    ElMessage.error('删除失败')
    return false
  }
}

onMounted(() => {
  getTableData();
});
  // æ ¹æ®é»˜è®¤æ¿€æ´»çš„ Tab è°ƒç”¨å¯¹åº”的查询接口
  if (activeTab.value === 'scheduled') {
    getScheduledTableData()
  } else {
    getTableData()
  }
})
</script>

<style lang="scss" scoped>
@@ -307,3 +714,8 @@
  margin-bottom: 10px;
}
</style>