diff --git a/frontend/src/views/Plans.vue b/frontend/src/views/Plans.vue
index b90384f..7b8b728 100644
--- a/frontend/src/views/Plans.vue
+++ b/frontend/src/views/Plans.vue
@@ -13,24 +13,15 @@
执行模式:
-
+
+ 视图:
+
-
-
-
-
-
- {{ record.taskName }}
-
-
+
+
+
+
+
+
+
+ {{ record.taskName }}
+
+
+
+
+
+
+
+
+
-
-
+
+
+
+
+
+
+
+
+
+
+ 开
+
+
+
+
+ 关
+
+
+
+
+
+
+
+
+ {{ record.taskName }}
+
+
+
+
+
+
+
toggleStage(record.key, column.key, checked)" />
+
+
-
-
-
-
-
+
+
@@ -183,21 +182,45 @@ import { message } from 'ant-design-vue'
import { PlusOutlined, DeleteOutlined, EditOutlined } from '@ant-design/icons-vue'
import { usePlanApi } from '../composables/usePlanApi'
+interface TableRow {
+ key: string;
+ taskName: string;
+ ALL: string | number;
+ Monday: string | number;
+ Tuesday: string | number;
+ Wednesday: string | number;
+ Thursday: string | number;
+ Friday: string | number;
+ Saturday: string | number;
+ Sunday: string | number;
+ [key: string]: string | number; // 保留动态属性支持
+}
+
+interface PlanData {
+ [key: string]: any;
+ Info?: {
+ Mode: 'ALL' | 'Weekly';
+ Name: string;
+ };
+}
+
// API 相关
const { getPlans, createPlan, updatePlan, deletePlan } = usePlanApi()
// 计划列表和当前选中的计划
const planList = ref>([])
const activePlanId = ref('')
-const currentPlanData = ref | null>(null)
-// 当前计划的名称和模式
+const currentPlanData = ref(null);
+
+// 当前计划的名称和模式、视图
const currentPlanName = ref('')
const currentMode = ref<'ALL' | 'Weekly'>('ALL')
+const viewMode = ref<'config' | 'simple'>('config');
+
+
// 计划名称编辑状态
const isEditingPlanName = ref(false)
-// 显示名称提示
-const showNameTip = ref(false)
const loading = ref(true)
@@ -362,6 +385,28 @@ const tableData = ref([
},
])
+// 简化视图专用列配置
+const dynamicSimpleViewColumns = computed(() => {
+ return [
+ {
+ title: '全局控制',
+ key: 'globalControl',
+ width: 75,
+ fixed: 'left',
+ align: 'center',
+ },
+ {
+ title: '关卡', // 修改列名为"关卡"
+ dataIndex: 'taskName',
+ key: 'taskName',
+ width: 120,
+ fixed: 'left',
+ align: 'center',
+ },
+ ...tableColumns.value.filter(col => col.key !== 'taskName' && col.key !== 'globalControl')
+ ]
+})
+
// 关卡数据配置
const STAGE_DAILY_INFO = [
{ value: '-', text: '当前/上次', days: [1, 2, 3, 4, 5, 6, 7] },
@@ -567,7 +612,7 @@ const loadPlanData = async (planId: string) => {
// 根据API响应数据更新表格数据
if (response.data && response.data[planId]) {
- const planData = response.data[planId]
+ const planData = response.data[planId] as PlanData
// 更新计划名称和模式
if (planData.Info) {
@@ -604,8 +649,8 @@ const loadPlanData = async (planId: string) => {
'Sunday',
]
timeKeys.forEach(timeKey => {
- if (planData[timeKey] && planData[timeKey][fieldKey] !== undefined) {
- row[timeKey] = planData[timeKey][fieldKey]
+ if (planData[timeKey] && (planData[timeKey] as Record)[fieldKey] !== undefined) {
+ (row as TableRow)[timeKey] = (planData[timeKey] as Record)[fieldKey]
}
})
})
@@ -667,7 +712,7 @@ const savePlanData = async () => {
timeKeys.forEach(timeKey => {
planData[timeKey] = {}
tableData.value.forEach(row => {
- planData[timeKey][row.key] = row[timeKey]
+ (planData[timeKey] as Record)[row.key] = (row as TableRow)[timeKey]
})
})
@@ -686,17 +731,33 @@ const savePlanData = async () => {
// 自动保存功能
watch(
- () => [currentPlanName.value, currentMode.value, tableData.value],
+ () => [currentPlanName.value, currentMode.value],
async () => {
// 使用nextTick确保DOM更新后再保存
await nextTick()
handleSave()
+ }
+)
+// 单独监听表格数据变化,但减少深度
+watch(
+ () => tableData.value.map(row => ({
+ key: row.key,
+ ALL: row.ALL,
+ Monday: row.Monday,
+ Tuesday: row.Tuesday,
+ Wednesday: row.Wednesday,
+ Thursday: row.Thursday,
+ Friday: row.Friday,
+ Saturday: row.Saturday,
+ Sunday: row.Sunday
+ })),
+ async () => {
+ await nextTick();
+ handleSave();
},
{ deep: true }
-)
+);
-// 移除自动保存功能,改为手动保存
-// 用户需要点击悬浮按钮才能保存数据
onMounted(() => {
initPlans()
@@ -720,6 +781,139 @@ const getTaskTagColor = (taskName: string) => {
const filterOption = (input: string, option: any) => {
return option.label.toLowerCase().includes(input.toLowerCase())
}
+
+// 简化视图数据
+const SIMPLE_VIEW_DATA = STAGE_DAILY_INFO.filter(stage => stage.value !== '-').map(stage => ({
+ key: stage.value,
+ taskName: stage.text,
+ ALL: '-',
+ Monday: '-',
+ Tuesday: '-',
+ Wednesday: '-',
+ Thursday: '-',
+ Friday: '-',
+ Saturday: '-',
+ Sunday: '-',
+}));
+
+const simpleViewData = ref(SIMPLE_VIEW_DATA);
+
+
+
+
+// 检查关卡是否可用
+const isStageAvailable = (stageValue: string, columnKey: string) => {
+ if (columnKey === 'ALL') return true
+
+ const dayNumber = getDayNumber(columnKey)
+ const stage = STAGE_DAILY_INFO.find(s => s.value === stageValue)
+ return stage ? stage.days.includes(dayNumber) : false
+}
+
+// 检查关卡是否已启用
+const isStageEnabled = (stageValue: string, columnKey: string) => {
+ // 检查所有关卡槽位中是否有该关卡
+ const stageSlots = ['Stage', 'Stage_1', 'Stage_2', 'Stage_3']
+ return stageSlots.some(slot => {
+ const row = tableData.value.find(row => row.key === slot) as TableRow | undefined
+ return row && row[columnKey] === stageValue
+ })
+}
+// 切换关卡启用状态
+const toggleStage = (stageValue: string, columnKey: string, checked: boolean) => {
+ const stageSlots = ['Stage', 'Stage_1', 'Stage_2', 'Stage_3']
+
+ if (checked) {
+ // 启用关卡:找到第一个空槽位
+ for (const slot of stageSlots) {
+ const row = tableData.value.find(row => row.key === slot) as TableRow | undefined
+ if (row && (row[columnKey] === '-' || row[columnKey] === '')) {
+ row[columnKey] = stageValue
+ break
+ }
+ }
+ } else {
+ // 禁用关卡:从所有槽位中移除
+ for (const slot of stageSlots) {
+ const row = tableData.value.find(row => row.key === slot) as TableRow | undefined
+ if (row && row[columnKey] === stageValue) {
+ row[columnKey] = '-'
+ }
+ }
+ }
+}
+// 获取简化视图任务标签颜色
+const getSimpleTaskTagColor = (taskName: string) => {
+ const colorMap: Record = {
+ '当前/上次': 'blue',
+ '1-7': 'default',
+ 'R8-11': 'default',
+ '12-17-HARD': 'default',
+ '龙门币-6/5': 'blue',
+ '红票-5': 'volcano',
+ '技能-5': 'cyan',
+ '经验-6/5': 'gold',
+ '碳-5': 'none',
+ '奶/盾芯片': 'green',
+ '奶/盾芯片组': 'green',
+ '术/狙芯片': 'purple',
+ '术/狙芯片组': 'purple',
+ '先/辅芯片': 'volcano',
+ '先/辅芯片组': 'volcano',
+ '近/特芯片': 'red',
+ '近/特芯片组': 'red',
+ }
+
+ return colorMap[taskName] || 'default'
+}
+
+// 启用所有关卡
+const enableAllStages = (stageValue: string) => {
+ const timeKeys = [
+ 'ALL',
+ 'Monday',
+ 'Tuesday',
+ 'Wednesday',
+ 'Thursday',
+ 'Friday',
+ 'Saturday',
+ 'Sunday',
+ ];
+
+ timeKeys.forEach(timeKey => {
+ if (isStageAvailable(stageValue, timeKey)) {
+ // 如果当前状态不是启用状态,则切换
+ if (!isStageEnabled(stageValue, timeKey)) {
+ toggleStage(stageValue, timeKey, true);
+ }
+ }
+ });
+};
+
+// 新增禁用所有关卡的方法
+const disableAllStages = (stageValue: string) => {
+ const timeKeys = [
+ 'ALL',
+ 'Monday',
+ 'Tuesday',
+ 'Wednesday',
+ 'Thursday',
+ 'Friday',
+ 'Saturday',
+ 'Sunday',
+ ];
+
+ timeKeys.forEach(timeKey => {
+ if (isStageAvailable(stageValue, timeKey)) {
+ // 如果当前状态是启用状态,则切换
+ if (isStageEnabled(stageValue, timeKey)) {
+ toggleStage(stageValue, timeKey, false);
+ }
+ }
+ });
+};
+
+