feat: 综合业务模块页面重构与交互完善

hsy

10 小时以前 2d3530a7c11557a40807ad7c0b9e302ce6ce3a9f

 src/views/equipmentManagement/ledger/index.vue

@@ -1,6 +1,15 @@
<template>
  <div class="app-container">
    <el-form :model="filters" :inline="true">
      <el-form-item label="设备编号">
        <el-input
          v-model="filters.uniqueCode"
          style="width: 200px"
          placeholder="请输入设备编号"
          clearable
          @change="getTableData"
        />
      </el-form-item>
      <el-form-item label="设备名称">
        <el-input
          v-model="filters.deviceName"
@@ -113,6 +122,7 @@
    <!-- 详情对话框 -->
    <el-dialog v-model="detailDialogVisible" title="设备台账详情" width="60%" draggable>
      <el-descriptions :column="2" border>
        <el-descriptions-item label="设备编号">{{ detailData.uniqueCode }}</el-descriptions-item>
        <el-descriptions-item label="设备名称">{{ detailData.deviceName }}</el-descriptions-item>
        <el-descriptions-item label="规格型号">{{ detailData.deviceModel }}</el-descriptions-item>
        <el-descriptions-item label="设备品牌">{{ detailData.deviceBrand }}</el-descriptions-item>
@@ -148,13 +158,88 @@
        <el-button @click="detailDialogVisible = false">关闭</el-button>
      </template>
    </el-dialog>

    <!-- 状态变更对话框 -->
    <el-dialog v-model="statusDialog.visible" title="设备状态变更申请" width="500px" draggable>
      <el-form label-width="100px">
        <el-form-item label="当前状态">
          <el-tag :type="statusDialog.row?.status == 1 ? 'success' : 'danger'">
            {{ statusDialog.row?.status == 1 ? '启用' : '停用' }}
          </el-tag>
        </el-form-item>
        <el-form-item label="目标状态" required>
          <el-radio-group v-model="statusDialog.targetStatus">
            <el-radio :label="1">启用</el-radio>
            <el-radio :label="0">停用</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="变更原因" required>
          <el-input type="textarea" :rows="3" v-model="statusDialog.reason" placeholder="请输入状态变更原因" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="statusDialog.visible = false">取消</el-button>
        <el-button type="primary" :loading="statusDialog.loading" @click="submitStatusChange">提交审批</el-button>
      </template>
    </el-dialog>

    <!-- 状态变更记录对话框 -->
    <el-dialog v-model="recordDialog.visible" title="设备状态变更记录" width="800px" draggable>
      <el-table v-loading="recordDialog.loading" :data="recordDialog.list" border>
        <el-table-column label="变更时间" prop="createTime" width="160" />
        <el-table-column label="原状态" width="100">
          <template #default="scope">
            <el-tag :type="scope.row.originalStatus == 1 ? 'success' : 'danger'">
              {{ scope.row.originalStatus == 1 ? '启用' : '停用' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="目标状态" width="100">
          <template #default="scope">
            <el-tag :type="scope.row.targetStatus == 1 ? 'success' : 'danger'">
              {{ scope.row.targetStatus == 1 ? '启用' : '停用' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="变更原因" prop="reason" show-overflow-tooltip />
        <el-table-column label="申请人" prop="createUserName" width="100" />
        <el-table-column label="审批状态" width="100">
          <template #default="scope">
            <el-tag v-if="scope.row.approvalStatus === 'PENDING'" type="warning">审批中</el-tag>
            <el-tag v-else-if="scope.row.approvalStatus === 'APPROVED'" type="success">已通过</el-tag>
            <el-tag v-else-if="scope.row.approvalStatus === 'REJECTED'" type="danger">已驳回</el-tag>
            <span v-else>{{ scope.row.approvalStatus }}</span>
          </template>
        </el-table-column>
        <el-table-column label="驳回原因" prop="rejectReason" show-overflow-tooltip>
          <template #default="scope">
            <span v-if="scope.row.approvalStatus === 'REJECTED'">{{ scope.row.rejectReason || '--' }}</span>
            <span v-else>--</span>
          </template>
        </el-table-column>
      </el-table>
      <div style="display: flex; justify-content: flex-end; margin-top: 15px;">
        <el-pagination
          v-model:current-page="recordDialog.queryParams.pageNum"
          v-model:page-size="recordDialog.queryParams.pageSize"
          :total="recordDialog.total"
          layout="total, prev, pager, next"
          @current-change="getRecordList"
        />
      </div>
      <template #footer>
        <el-button @click="recordDialog.visible = false">关闭</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { usePaginationApi } from "@/hooks/usePaginationApi";
// import { Search } from "@element-plus/icons-vue";
import { getLedgerPage, delLedger, getLedgerById } from "@/api/equipmentManagement/ledger";
import { listStatusChangeRecord } from "@/api/device/statusChangeRecord";
import { saveApprovalInstance } from "@/api/officeProcessAutomation/approvalInstance";
import { listApprovalTemplate, getApprovalTemplateDetail, TEMPLATE_TYPE_CUSTOM } from "@/api/officeProcessAutomation/approvalTemplate";
import { onMounted, getCurrentInstance, ref, reactive } from "vue";
import Modal from "./Modal.vue";
import { ElMessageBox, ElMessage } from "element-plus";
@@ -204,6 +289,7 @@
} = usePaginationApi(
  getLedgerPage,
  {
    uniqueCode: undefined,
    deviceName: undefined,
    deviceModel: undefined,
    supplierName: undefined,
@@ -211,6 +297,10 @@
    entryDateEnd: undefined,
  },
  [
    {
      label: "设备编号",
      prop: "uniqueCode",
    },
    {
      label: "设备名称",
      prop: "deviceName",
@@ -240,18 +330,34 @@
      prop: "number",
    },
    {
      label: "设备状态",
      prop: "status",
      width: 100,
      dataType: "tag",
      formatData: (v) => v == 1 ? '启用' : '停用',
      formatType: (v) => v == 1 ? 'success' : 'danger',
    },
    {
      label: "启用日期",
      prop: "activationDate",
      width: 120,
      formatData: (v) => {
        if (!v) return '';
        if (v.includes(' ')) return v.split(' ')[0];
        return v;
      },
    },
    {
      label: "录入人",
      prop: "createUser",
    },
    {
      label: "录入日期",
      prop: "createTime",
      label: "建档日期",
      prop: "filingDate",
      width: 120,
      formatData: (v) => {
        if (!v) return '';
        // 如果包含时分秒，只取日期部分
        if (v.includes(' ')) {
          return v.split(' ')[0];
        }
        if (v.includes(' ')) return v.split(' ')[0];
        return v;
      },
    },
@@ -266,6 +372,18 @@
          name: "详情",
          clickFun: (row) => {
            handleDetail(row);
          },
        },
        {
          name: "状态变更",
          clickFun: (row) => {
            openStatusChange(row);
          },
        },
        {
          name: "变更记录",
          clickFun: (row) => {
            openRecordDialog(row);
          },
        },
            {
@@ -303,6 +421,102 @@
    detailDialogVisible.value = true;
  }
};

const statusDialog = reactive({ visible: false, row: null, targetStatus: 1, reason: '', loading: false });

const openStatusChange = (row) => {
  statusDialog.row = row;
  statusDialog.targetStatus = row.status == 1 ? 0 : 1; 
  statusDialog.reason = '';
  statusDialog.visible = true;
};

const submitStatusChange = async () => {
  if (!statusDialog.reason.trim()) {
    ElMessage.error("请填写状态变更原因");
    return;
  }
  if (statusDialog.targetStatus === statusDialog.row.status) {
    ElMessage.warning("目标状态与当前状态一致");
    return;
  }
  statusDialog.loading = true;
  try {
    const listRes = await listApprovalTemplate(TEMPLATE_TYPE_CUSTOM);
    const templates = listRes.data?.records || listRes.data || [];
    const tpl = templates.find(t => t.businessType === 19 && (t.enabled === 1 || t.enabled === true));
    if (!tpl) {
      ElMessage.error("未找到启用的设备状态变更审批模板");
      return;
    }
    const detailRes = await getApprovalTemplateDetail(tpl.id);
    const detail = detailRes.data;
    
    const payload = {
      templateId: detail.id,
      templateName: detail.templateName,
      businessType: 19,
      templateSnapshot: JSON.stringify(detail),
      title: `设备状态变更审批 - ${statusDialog.row.deviceName}`,
      reason: statusDialog.reason,
      businessId: statusDialog.row.id,
      formConfig: JSON.stringify({
        targetStatus: statusDialog.targetStatus,
        targetStatusName: statusDialog.targetStatus == 1 ? '启用' : '停用',
        deviceId: statusDialog.row.id,
        deviceName: statusDialog.row.deviceName,
        reason: statusDialog.reason
      }),
      flowNodes: detail.flowNodes || []
    };
    
    const res = await saveApprovalInstance(payload);
    if (res.code === 200) {
      ElMessage.success("已发起状态变更审批");
      statusDialog.visible = false;
      getTableData();
    }
  } catch (error) {
    console.error(error);
  } finally {
    statusDialog.loading = false;
  }
};

const recordDialog = reactive({
  visible: false,
  loading: false,
  list: [],
  total: 0,
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    deviceId: null
  }
});

const openRecordDialog = (row) => {
  recordDialog.queryParams.deviceId = row.id;
  recordDialog.queryParams.pageNum = 1;
  recordDialog.visible = true;
  getRecordList();
};

const getRecordList = async () => {
  recordDialog.loading = true;
  try {
    const res = await listStatusChangeRecord(recordDialog.queryParams);
    if (res.code === 200) {
      recordDialog.list = res.data.records;
      recordDialog.total = res.data.total;
    }
  } catch (error) {
    console.error(error);
  } finally {
    recordDialog.loading = false;
  }
};

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