|
|
@@ -294,9 +294,21 @@
|
|
|
</el-table-column>
|
|
|
</el-table-column>
|
|
|
|
|
|
- <el-table-column :label="t('common.status')" align="center" width="100">
|
|
|
+ <el-table-column :label="t('mainPlan.mainStatus')" align="center" width="140">
|
|
|
<template #default="scope">
|
|
|
- {{ getStatusText(scope.row) }}
|
|
|
+ <div class="status-container">
|
|
|
+ <el-switch
|
|
|
+ v-model="scope.row.status"
|
|
|
+ :active-value="1"
|
|
|
+ :inactive-value="0"
|
|
|
+ :disabled="scope.row.initialStatus === 1"
|
|
|
+ @change="handleStatusChange(scope.row)"
|
|
|
+ class="status-switch"
|
|
|
+ />
|
|
|
+ <span class="status-text">
|
|
|
+ {{ getStatusText(scope.row) }}
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
<!--
|
|
|
@@ -1228,6 +1240,18 @@ const handleSizeChange = (newSize: number) => {
|
|
|
currentPage.value = 1 // 重置到第一页
|
|
|
}
|
|
|
|
|
|
+// 处理状态变化
|
|
|
+const handleStatusChange = (row: IotMainWorkOrderBomVO) => {
|
|
|
+ console.log(`保养项 ${row.name} 状态改为: ${row.status === 1 ? '完成' : '未完成'}`);
|
|
|
+
|
|
|
+ // 这里可以添加状态变化后的业务逻辑
|
|
|
+ // 例如：如果状态变为完成，可以自动填充完成时间等
|
|
|
+ if (row.status === 1) {
|
|
|
+ // 保养完成时的逻辑
|
|
|
+ message.success(`${row.deviceCode}-${formatMaintItemName(row.name)} 已标记为完成`);
|
|
|
+ }
|
|
|
+};
|
|
|
+
|
|
|
// 运行时间周期 全局校验方法（在submitForm中调用）
|
|
|
const validateAllRunningTimes = (): boolean => {
|
|
|
let isValid = true;
|
|
|
@@ -2174,6 +2198,9 @@ onMounted(async () => {
|
|
|
list.value = []
|
|
|
if (Array.isArray(data)) {
|
|
|
list.value = data.map(item => {
|
|
|
+ // 记录初始状态，用于判断是否可编辑
|
|
|
+ const initialStatus = item.status;
|
|
|
+
|
|
|
// 提取分组名称
|
|
|
const group = item.name && item.name.includes('->')
|
|
|
? item.name.split('->')[0].trim()
|
|
|
@@ -2212,6 +2239,7 @@ onMounted(async () => {
|
|
|
return {
|
|
|
...item,
|
|
|
group,
|
|
|
+ initialStatus, // 保存初始状态
|
|
|
lastNaturalDate: item.lastNaturalDate,
|
|
|
lastMaintenanceDate: item.lastMaintenanceDate
|
|
|
? dayjs(item.lastMaintenanceDate).format("YYYY-MM-DD") // 时间戳 → 日期字符串
|
|
|
@@ -2567,4 +2595,50 @@ const handleRowClick = (row) => {
|
|
|
border-bottom-color: #ffeeba !important;
|
|
|
}
|
|
|
|
|
|
+/* 状态列容器样式 - 水平排列 */
|
|
|
+.status-container {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ gap: 8px; /* 设置开关和文本之间的间距 */
|
|
|
+ white-space: nowrap; /* 防止换行 */
|
|
|
+}
|
|
|
+
|
|
|
+/* 状态开关样式 */
|
|
|
+.status-switch {
|
|
|
+ flex-shrink: 0; /* 防止开关被压缩 */
|
|
|
+}
|
|
|
+
|
|
|
+/* 状态列样式优化 */
|
|
|
+.status-text {
|
|
|
+ font-size: 12px;
|
|
|
+ color: #666;
|
|
|
+ min-width: 40px; /* 为文本设置最小宽度，确保对齐 */
|
|
|
+ text-align: left;
|
|
|
+ flex-shrink: 0; /* 防止文本被压缩 */
|
|
|
+}
|
|
|
+
|
|
|
+/* 禁用状态的switch样式 */
|
|
|
+:deep(.el-switch.is-disabled) {
|
|
|
+ opacity: 0.6;
|
|
|
+}
|
|
|
+
|
|
|
+/* 已完成状态的特殊样式 */
|
|
|
+:deep(.status-completed .el-switch__core) {
|
|
|
+ background-color: #67c23a;
|
|
|
+ border-color: #67c23a;
|
|
|
+}
|
|
|
+
|
|
|
+/* 保养中状态的样式 */
|
|
|
+:deep(.status-maintaining .el-switch__core) {
|
|
|
+ background-color: #409eff;
|
|
|
+ border-color: #409eff;
|
|
|
+}
|
|
|
+
|
|
|
+/* 延迟状态的样式 */
|
|
|
+:deep(.status-delayed .el-switch__core) {
|
|
|
+ background-color: #e6a23c;
|
|
|
+ border-color: #e6a23c;
|
|
|
+}
|
|
|
+
|
|
|
</style>
|
zhangcl