newcpms/ui/src/views/reliability/rel_maint_plan/form.vue

<template>
  <div class="app-container maint-plan-form-page">
    <!-- 页面头部 -->
    <div class="page-header">
      <div class="header-left">
        <span class="page-title">{{ pageTitle }}</span>
      </div>
      <div class="header-right">
        <el-button icon="el-icon-arrow-left" @click="goBack">返回</el-button>
        <el-button v-if="formData.planId && isPlannedStatus" @click="handleSaveOnly" :loading="savingOnly">仅保存</el-button>
        <el-button type="primary" @click="handleSubmit" :loading="submitting">
          {{ isPlannedStatus ? '提交申请' : (formData.planId && formData.approvalStatus === '1' ? '再次提交申请' : '确 定') }}
        </el-button>
      </div>
    </div>

    <!-- 表单内容 -->
    <el-card class="form-card">
      <el-form ref="form" :model="formData" :rules="rules" label-width="120px">
        <!-- 基础信息区域 -->
        <div class="form-section">
          <el-row :gutter="20">
            <!-- 左侧：基础信息 -->
            <el-col :span="14">
              <div class="section-header">
                <i class="el-icon-info"></i>
                <span class="section-title">计划基础信息</span>
              </div>
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-form-item label="选择设备" prop="devId">
                    <el-select
                      v-model="formData.devId"
                      filterable
                      remote
                      :remote-method="searchDevice"
                      :loading="deviceLoading"
                      placeholder="请输入设备位号或名称搜索"
                      style="width: 100%"
                      @change="handleDeviceChange"
                      @focus="handleDeviceFocus"
                      :disabled="!!formData.planId"
                      clearable>
                      <el-option
                        v-for="device in deviceOptions"
                        :key="device.devId"
                        :label="`${device.devTag} - ${device.devName}`"
                        :value="device.devId">
                        <span style="float: left">{{ device.devTag }}</span>
                        <span style="float: right; color: #8492a6; font-size: 13px">{{ device.devName }}</span>
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="计划开始时间" prop="planTime">
                    <el-date-picker
                      v-model="formData.planTime"
                      type="date"
                      value-format="yyyy-MM-dd"
                      placeholder="选择开始时间"
                      style="width: 100%">
                    </el-date-picker>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-form-item label="计划结束时间" prop="planEndTime">
                    <el-date-picker
                      v-model="formData.planEndTime"
                      type="date"
                      value-format="yyyy-MM-dd"
                      placeholder="选择结束时间"
                      style="width: 100%">
                    </el-date-picker>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="责任人" prop="responsible">
                    <el-select
                      v-model="formData.responsible"
                      placeholder="请选择责任人"
                      style="width: 100%"
                      clearable
                      filterable>
                      <el-option
                        v-for="staff in staffOptions"
                        :key="staff.staffid"
                        :label="`${staff.name} (${staff.staffid})`"
                        :value="staff.staffid">
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-form-item label="审批人" prop="approver">
                    <el-select
                      v-model="formData.approver"
                      placeholder="请选择审批人"
                      style="width: 100%"
                      clearable
                      filterable
                      :disabled="isApproverDisabled">
                      <el-option
                        v-for="staff in staffOptions"
                        :key="staff.staffid"
                        :label="`${staff.name} (${staff.staffid})`"
                        :value="staff.staffid">
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="备注" prop="remarks">
                    <el-input v-model="formData.remarks" type="textarea" :rows="1" placeholder="请输入备注" />
                  </el-form-item>
                </el-col>
              </el-row>
            </el-col>

            <!-- 设备信息展示：右侧 -->
            <el-col :span="10" v-if="selectedDevice">
              <!-- 设备信息展示 -->
              <div class="section-header">
                <i class="el-icon-s-platform"></i>
                <span class="section-title">设备信息</span>
              </div>
              <el-descriptions :column="2" border size="small">
                <!-- 设备名称单独占一行 -->
                <el-descriptions-item label="设备名称" :span="2">{{ selectedDevice.devName }}</el-descriptions-item>
                <!-- 其余字段两列排列 -->
                <el-descriptions-item label="设备位号">{{ selectedDevice.devTag }}</el-descriptions-item>
                <el-descriptions-item label="位置">{{ selectedDevice.devLoc }}</el-descriptions-item>
                <el-descriptions-item label="设备类型">{{ selectedDevice.devType }}</el-descriptions-item>
                <el-descriptions-item label="区域负责人">{{ getStaffNameById(selectedDevice.areaResponsible) }}</el-descriptions-item>
              </el-descriptions>
            </el-col>
          </el-row>
        </div>

        <!-- 部件列表及维修记录选择 -->
        <div class="form-section" v-if="compoList.length > 0">
          <div class="section-header">
            <i class="el-icon-s-grid"></i>
            <span class="section-title">部件维修选择</span>
            <span style="margin-left: 10px; font-size: 12px; color: #909399;">（共 {{ compoList.length }} 个部件）</span>
          </div>
          <el-table
            :data="pagedCompoList"
            border
            size="small"
            :height="tableHeight"
            style="margin-top: 10px">
            <el-table-column label="序号" width="60" align="center">
              <template slot-scope="scope">
                {{ (compoCurrentPage - 1) * compoPageSize + scope.$index + 1 }}
              </template>
            </el-table-column>
            <el-table-column label="部件名称" prop="compoName" :show-overflow-tooltip="true">
              <template slot-scope="scope">
                <span>{{ scope.row.compoName }}</span>
                <el-tag v-if="scope.row.hasMemo" type="warning" size="mini" style="margin-left: 6px;">备</el-tag>
              </template>
            </el-table-column>
            <el-table-column label="检查频率/日期" width="120" align="center">
              <template slot-scope="scope">
                <div style="line-height: 1.2;">
                  <div style="font-weight: bold; margin-bottom: 2px;">{{ translateFrequency(scope.row.checkFreq) || '-' }}</div>
                  <div style="font-size: 12px; color: #666;">{{ scope.row.lastCheckDate ? parseTime(scope.row.lastCheckDate, '{y}-{m}-{d}') : '-' }}</div>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="维修频率/日期" width="120" align="center">
              <template slot-scope="scope">
                <div style="line-height: 1.2;">
                  <div style="font-weight: bold; margin-bottom: 2px;">{{ translateFrequency(scope.row.maintFreq) || '-' }}</div>
                  <div style="font-size: 12px; color: #666;">{{ scope.row.lastMaintDate ? parseTime(scope.row.lastMaintDate, '{y}-{m}-{d}') : '-' }}</div>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="更换频率/日期" width="120" align="center">
              <template slot-scope="scope">
                <div style="line-height: 1.2;">
                  <div style="font-weight: bold; margin-bottom: 2px;">{{ translateFrequency(scope.row.replaceFreq) || '-' }}</div>
                  <div style="font-size: 12px; color: #666;">{{ scope.row.lastReplaceDate ? parseTime(scope.row.lastReplaceDate, '{y}-{m}-{d}') : '-' }}</div>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="本次维修" width="100" align="center">
              <template slot-scope="scope">
                <el-checkbox
                  v-model="scope.row.needMaint"
                  :disabled="scope.row.recordStatus === 2 || scope.row.recordStatus === '2'"
                  @change="handleMaintCheckChange(scope.row)"
                >需要维修</el-checkbox>
              </template>
            </el-table-column>
            <el-table-column label="维修形式" width="200" align="center">
              <template slot-scope="scope">
                <el-radio-group
                  v-model="scope.row.maintType"
                  :disabled="!scope.row.needMaint || scope.row.recordStatus === 2 || scope.row.recordStatus === '2'"
                  @change="handleMaintTypeChange(scope.row)"
                  style="display: flex; flex-direction: row; gap: 0px;">
                  <el-radio label="1" style="margin-right: 0; margin-left: 0;">检查</el-radio>
                  <el-radio label="2" style="margin-right: 0; margin-left: 0;">维修</el-radio>
                  <el-radio label="3" style="margin-right: 0; margin-left: 0;">更换</el-radio>
                </el-radio-group>
              </template>
            </el-table-column>
            <el-table-column label="负责人" width="150" align="center">
              <template slot-scope="scope">
                <el-select
                  v-model="scope.row.maintResponsible"
                  :placeholder="getResponsiblePlaceholder(scope.row.maintType)"
                  style="width: 100%"
                  :disabled="!scope.row.needMaint || scope.row.recordStatus === 2 || scope.row.recordStatus === '2'"
                  clearable
                  filterable>
                  <el-option
                    v-for="staff in staffOptions"
                    :key="staff.staffid"
                    :label="`${staff.name} (${staff.staffid})`"
                    :value="staff.staffid">
                  </el-option>
                </el-select>
              </template>
            </el-table-column>
            <el-table-column label="维修状态" width="100" align="center">
              <template slot-scope="scope">
                <el-tag
                  v-if="scope.row.recordStatus !== undefined && scope.row.recordStatus !== null"
                  :type="getRecordStatusTagType(scope.row.recordStatus)"
                  size="small"
                >
                  {{ getRecordStatusText(scope.row.recordStatus) }}
                </el-tag>
                <span v-else>-</span>
              </template>
            </el-table-column>
          </el-table>
          <!-- 分页器 -->
          <el-pagination
            v-if="compoList.length > compoPageSize"
            style="margin-top: 10px; text-align: right;"
            @size-change="handleCompoSizeChange"
            @current-change="handleCompoPageChange"
            :current-page="compoCurrentPage"
            :page-sizes="[50, 100, 200]"
            :page-size="compoPageSize"
            layout="total, sizes, prev, pager, next"
            :total="compoList.length">
          </el-pagination>
        </div>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import { listRel_device, getRel_device } from "@/api/reliability/rel_device";
import { listRel_compo } from "@/api/reliability/rel_compo";
import { listStaffmgrAll } from "@/api/plant/staffmgr";
import { getRel_maint_plan, submitApprove, resubmitApprove, saveOnlyRel_maint_plan } from "@/api/reliability/rel_maint_plan";
import { parseTime as formatTime } from "@/utils/ruoyi";

export default {
  name: "MaintPlanFormPage",
  data() {
    return {
      submitting: false,
      savingOnly: false,
      formData: {},
      rules: {
        devId: [
          { required: true, message: "请选择设备", trigger: "change" }
        ],
        planTime: [
          { required: true, message: "请选择计划开始时间", trigger: "change" }
        ],
        approver: [
          { required: true, message: "请选择审批人", trigger: "change" }
        ]
      },
      // 设备相关
      deviceOptions: [],
      deviceLoading: false,
      selectedDevice: null,
      // 部件相关
      compoList: [],
      // 部件分页
      compoCurrentPage: 1,
      compoPageSize: 50,
      // 表格高度
      tableHeight: 400,
      // 所有人员选项
      staffOptions: []
    };
  },
  computed: {
    /** 页面标题 */
    pageTitle() {
      if (this.$route.query.planId) {
        return this.isPlannedStatus ? '编辑维修计划' : '修改维修计划';
      }
      return '新增维修计划';
    },
    /** 是否为计划中状态 */
    isPlannedStatus() {
      return this.formData.approvalStatus === '9' || this.formData.completionStatus === '9';
    },
    /** 审批人是否禁用 */
    isApproverDisabled() {
      if (!this.formData.planId) return false;
      if (this.isPlannedStatus) return false;
      return true;
    },
    /** 分页后的部件列表 */
    pagedCompoList() {
      const start = (this.compoCurrentPage - 1) * this.compoPageSize;
      const end = start + this.compoPageSize;
      return this.compoList.slice(start, end);
    }
  },
  created() {
    this.getStaffList();
    this.initPage();
    // 计算表格高度
    this.$nextTick(() => {
      this.tableHeight = Math.max(380, window.innerHeight - 440);
    });
  },
  methods: {
    /** 根据员工号获取姓名 */
    getStaffNameById(staffid) {
      if (!staffid) return '';
      const staff = this.staffOptions.find(s => s.staffid === staffid);
      return staff ? staff.name : staffid;
    },
    /** 初始化页面 */
    initPage() {
      const planId = this.$route.query.planId;
      if (planId) {
        // 编辑模式：加载计划详情
        this.loadPlanDetail(planId);
      } else {
        // 新增模式
        this.resetForm();

        // 检查是否有从设备页面传递过来的参数
        const { devId, plant, devName, devTag } = this.$route.query;

        // 如果带了 devId，直接复用 handleDeviceChange 逻辑，加载完整设备信息和部件
        if (devId) {
          const idNum = Number(devId);
          this.formData.devId = idNum;
          this.handleDeviceChange(idNum);
        } else if (devTag || plant || devName) {
          // 兼容只传 devTag/plant/devName 的场景，尽量预填基础字段和部件列表
          this.formData.plant = plant || null;
          this.formData.devName = devName || null;
          this.formData.devTag = devTag || null;
          if (devTag) {
            this.loadCompoList(devTag);
          }
        }
      }
    },
    /** 加载计划详情 */
    loadPlanDetail(planId) {
      getRel_maint_plan(planId).then(response => {
        this.formData = response.data || {};
        if (this.formData.relDevice) {
          this.selectedDevice = this.formData.relDevice;
          this.deviceOptions = [this.formData.relDevice];
          // 确保 devId 被正确设置，用于下拉框回显
          if (!this.formData.devId && this.formData.relDevice.devId) {
            this.formData.devId = this.formData.relDevice.devId;
          }
          if (this.formData.compoList && this.formData.compoList.length > 0) {
            this.initCompoListFromData(this.formData.compoList);
          } else if (this.selectedDevice.devTag) {
            this.loadCompoList(this.selectedDevice.devTag);
          }
        }
      });
    },

    handleSaveOnly() {
      if (this.savingOnly) {
        return;
      }
      if (!this.formData.planId) {
        this.$message.error("计划ID不能为空");
        return;
      }
      if (!this.isPlannedStatus) {
        this.$message.error("仅计划中状态允许仅保存");
        return;
      }

      this.savingOnly = true;

      if (this.compoList.length > 0) {
        const maintComponents = this.compoList
          .filter(compo => compo.needMaint)
          .map(compo => ({
            compoId: compo.compoId,
            compoName: compo.compoName,
            maintType: compo.maintType,
            responsible: compo.maintResponsible
          }));
        this.formData.maintComponents = maintComponents;
      } else {
        this.formData.maintComponents = [];
      }

      saveOnlyRel_maint_plan({
        planId: this.formData.planId,
        maintComponents: this.formData.maintComponents
      }).then(() => {
        this.$message.success("保存成功");
      }).finally(() => {
        this.savingOnly = false;
      });
    },
    /** 查询人员列表 */
    getStaffList() {
      return listStaffmgrAll().then(response => {
        this.staffOptions = response.rows || response.data || [];

        // 如果此时已经选中了设备且尚未设置责任人，根据设备的区域负责人预填责任人
        if (this.selectedDevice && this.selectedDevice.areaResponsible && !this.formData.responsible) {
          const staff = this.staffOptions.find(s => s.staffid === this.selectedDevice.areaResponsible);
          if (staff) {
            this.formData.responsible = staff.staffid;
          }
        }
      });
    },
    /** 表单重置 */
    resetForm() {
      this.formData = {
        planId: null,
        devId: null,
        plant: null,
        devName: null,
        devTag: null,
        planTime: null,
        approvalStatus: "0",
        responsible: null,
        completionStatus: "0",
        processId: null,
        approver: null,
        remarks: null,
        maintComponents: []
      };
      this.selectedDevice = null;
      this.compoList = [];
      this.deviceOptions = [];
      this.compoCurrentPage = 1;
    },
    /** 部件分页 - 每页条数改变 */
    handleCompoSizeChange(val) {
      this.compoPageSize = val;
      this.compoCurrentPage = 1;
    },
    /** 部件分页 - 页码改变 */
    handleCompoPageChange(val) {
      this.compoCurrentPage = val;
    },
    /** 设备搜索 */
    searchDevice(query) {
      if (query) {
        this.deviceLoading = true;
        const params = { devTag: query, devName: query };
        listRel_device(params).then(response => {
          this.deviceOptions = response.rows || [];
          this.deviceLoading = false;
        });
      }
    },
    /** 设备下拉框获得焦点 */
    handleDeviceFocus() {},
    /** 设备选择改变 */
    handleDeviceChange(devId) {
      if (!devId) {
        this.selectedDevice = null;
        this.compoList = [];
        return;
      }
      getRel_device(devId).then(response => {
        this.selectedDevice = response.data;
        this.formData.plant = response.data.plant;
        this.formData.devName = response.data.devName;
        this.formData.devTag = response.data.devTag;

        // 确保设备下拉框选项中包含当前设备，便于“选择设备”下拉回显
        if (response.data && response.data.devId) {
          const exists = this.deviceOptions.some(d => d.devId === response.data.devId);
          if (!exists) {
            this.deviceOptions = [response.data, ...this.deviceOptions];
          }
        }

        // 根据设备的区域负责人预填责任人（前提是人员列表已加载）
        if (response.data.areaResponsible && this.staffOptions.length > 0) {
          const staff = this.staffOptions.find(s => s.staffid === response.data.areaResponsible);
          if (staff) {
            this.formData.responsible = staff.staffid;
          }
        }
        if (response.data.devTag) {
          this.loadCompoList(response.data.devTag);
        }
      });
    },
    /** 加载设备的部件列表 */
    loadCompoList(devTag) {
      listRel_compo({ devTag: devTag, pageSize: 9999 }).then(response => {
        const compos = response.rows || [];
        this.compoList = compos.map(compo => ({
          ...compo,
          checkFreq: compo.inspFreq,
          lastCheckDate: compo.lastInspDate,
          maintFreq: compo.fixFreq,
          lastMaintDate: compo.lastFixDate,
          needMaint: false,
          maintType: '',
          maintResponsible: '',
          recordId: null,
          recordStatus: null
        }));
        this.compoCurrentPage = 1;
      });
    },
    /** 从已有数据初始化部件列表 */
    initCompoListFromData(compoList) {
      const maintRecordsList = this.formData.maintRecordsList || [];
      const recordMap = {};
      maintRecordsList.forEach(record => {
        if (record.compoId) {
          recordMap[record.compoId] = record;
        }
      });

      this.compoList = compoList.map(compo => {
        const record = recordMap[compo.compoId];
        return {
          ...compo,
          checkFreq: compo.inspFreq,
          lastCheckDate: compo.lastInspDate,
          maintFreq: compo.fixFreq,
          lastMaintDate: compo.lastFixDate,
          needMaint: !!record,
          maintType: record ? record.maintType : '',
          maintResponsible: record ? record.responsible : '',
          recordId: record ? record.recordId : null,
          recordStatus: record ? record.recordStatus : null
        };
      });
      this.compoCurrentPage = 1;
    },
    /** 维修选择改变 */
    handleMaintCheckChange(compo) {
      if (!compo.needMaint) {
        compo.maintType = '';
        compo.maintResponsible = '';
      }
    },
    /** 维修形式改变 */
    handleMaintTypeChange(compo) {
      if (compo.maintType === '1') {
        compo.maintResponsible = compo.inspector || '';
      } else if (compo.maintType === '2' || compo.maintType === '3') {
        compo.maintResponsible = compo.fixer || '';
      } else {
        compo.maintResponsible = '';
      }
    },
    getResponsiblePlaceholder(maintType) {
      switch(maintType) {
        case '1': return '选择检查人';
        case '2': return '选择维修人';
        case '3': return '选择更换人';
        default: return '选择负责人';
      }
    },
    /** 翻译频率字段 */
    translateFrequency(frequency) {
      if (!frequency) return '';
      const match = frequency.match(/^(\d+)([ym])$/);
      if (match) {
        const number = match[1];
        const unit = match[2];
        switch (unit) {
          case 'y': return `${number}年一次`;
          case 'm': return `${number}月一次`;
          default: return frequency;
        }
      }
      return frequency;
    },
    /** 时间格式化 */
    parseTime(time, pattern) {
      return formatTime(time, pattern);
    },
    /** 获取维修状态文本 */
    getRecordStatusText(status) {
      if (status === 9 || status === '9') return '计划中';
      if (status === -1 || status === '-1') return '删除申请中';
      if (status === 0 || status === '0') return '新增申请中';
      if (status === 1 || status === '1') return '待完成';
      if (status === 2 || status === '2') return '已完成';
      if (status === 3 || status === '3') return '已延期';
      return status != null ? status : '-';
    },
    /** 获取维修状态标签类型 */
    getRecordStatusTagType(status) {
      if (status === -1 || status === '-1') return 'danger';
      if (status === 0 || status === '0') return 'warning';
      if (status === 1 || status === '1') return 'info';
      if (status === 2 || status === '2') return 'success';
      if (status === 3 || status === '3') return 'warning';
      return '';
    },
    /** 提交表单 */
    handleSubmit() {
      // 前端防止重复提交：如果已经在提交中，直接返回
      if (this.submitting) {
        return;
      }

      // 先标记为提交中，避免校验期间被多次点击
      this.submitting = true;

      this.$refs.form.validate(valid => {
        if (!valid) {
          // 校验失败，恢复提交状态
          this.submitting = false;
          return;
        }

        if (this.compoList.length > 0) {
          const maintComponents = this.compoList
            .filter(compo => compo.needMaint)
            .map(compo => ({
              compoId: compo.compoId,
              compoName: compo.compoName,
              maintType: compo.maintType,
              responsible: compo.maintResponsible
            }));
          this.formData.maintComponents = maintComponents;
        }

        // 选择合适的API
        let apiCall;
        if (!this.formData.planId || this.isPlannedStatus) {
          apiCall = submitApprove(this.formData);
        } else if (this.formData.approvalStatus === '1') {
          apiCall = resubmitApprove(this.formData);
        } else {
          apiCall = submitApprove(this.formData);
        }

        apiCall.then(response => {
          // 使用 Element UI 消息提示，避免 $modal 未注册导致报错
          this.$message.success("操作成功");
          this.goBack();
        }).finally(() => {
          this.submitting = false;
        });
      });
    },
    /** 返回列表页 */
    goBack() {
      // 先记录当前视图
      const view = this.$route;
      // 跳转到维修计划列表
      this.$router.push({ path: "/reliability/rel_maint_plan" });
      // 直接关闭当前标签（当前项目中 $router.push 不返回 Promise，不能再调用 .then）
      this.$store.dispatch("tagsView/delView", view);
    }
  }
};
</script>

<style scoped lang="scss">
.maint-plan-form-page {
  // 缩小与顶部的间距
  padding-top: 8px;
  margin-top: 0;

  .page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    padding: 4px 0 6px;
    border-bottom: 1px solid #ebeef5;

    .header-left {
      display: flex;
      align-items: center;

      .page-title {
        font-size: 18px;
        font-weight: 600;
        color: #303133;
      }
    }

    .header-right {
      display: flex;
      align-items: center;

      .el-button + .el-button {
        margin-left: 8px;
      }
    }
  }

  .form-card {
    ::v-deep .el-card__body {
      padding: 15px;
    }

    .form-section {
      margin-bottom: 2px;

      .section-header {
        display: flex;
        align-items: center;
        margin-bottom: 10px;
        padding-bottom: 8px;
        border-bottom: 1px solid #e4e7ed;

        .el-icon-info,
        .el-icon-s-platform,
        .el-icon-s-grid {
          font-size: 18px;
          color: #409EFF;
          margin-right: 8px;
        }

        .section-title {
          font-size: 15px;
          font-weight: 600;
          color: #303133;
        }
      }
    }

    ::v-deep .el-form-item {
      margin-bottom: 12px;
    }

    ::v-deep .el-descriptions {
      .el-descriptions-item__label,
      .el-descriptions-item__content {
        padding: 8px 12px;
      }
    }
  }
}

::v-deep .el-table .el-radio__label {
  padding-left: 2px !important;
}
</style>