yuanling-manage/src/views/zhld/dsrw.vue

<template>
  <div>
    <el-button type="primary" @click="dialogVisible = true">新增定时任务</el-button>
    <el-table :data="data" :row-selection="rowSelection">
      <el-table-column label="名称" width="360">
        <el-table-column prop="firstName" label="任务名称" width="180" />
        <el-table-column prop="lastName" label="空开名称" width="180" />
      </el-table-column>
      <el-table-column prop="age" label="设备类型" width="180" />
      <el-table-column prop="address" label="循环类型" width="180" />
      <el-table-column label="当前状态" width="180">
        <template #default="{ row }">
          <el-tag
            v-for="tag in row.tags"
            :key="tag"
            :type="getTagType(tag)"
          >
            {{ tag.toUpperCase() }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="180">
        <template #default="{ row }">
          <el-switch
            v-model="row.tags[0]"
            active-text="启用"
            inactive-text="停用"
            active-value="启用"
            inactive-value="停用"
            @change="toggleStatus(row)"
          />
        </template>
      </el-table-column>
    </el-table>

    <!-- 新增定时任务对话框 -->
    <el-dialog v-model="dialogVisible" title="新增定时任务">
      <el-form :model="newTask" label-width="100px">
        <el-form-item label="任务名称">
          <el-input v-model="newTask.firstName" />
        </el-form-item>
        <el-form-item label="空开名称">
          <el-input v-model="newTask.lastName" />
        </el-form-item>
        <el-form-item label="设备类型">
          <el-input-number v-model="newTask.age" />
        </el-form-item>
        <el-form-item label="循环类型">
          <el-select v-model="newTask.address" placeholder="请选择循环类型">
            <el-option label="预设类型1" value="预设类型1" />
            <el-option label="预设类型2" value="预设类型2" />
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="addTask">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { ElButton, ElTable, ElTableColumn, ElTag, ElSwitch, ElDialog, ElForm, ElFormItem, ElInput, ElInputNumber, ElSelect, ElOption } from 'element-plus';

interface DataType {
  key: string;
  firstName: string;
  lastName: string;
  age: number;
  address: string;
  tags: string[];
}

const data = ref<DataType[]>([
  {
    key: '1',
    firstName: '定时任务1',
    lastName: 'G845215',
    age: 88,
    address: '预设类型1',
    tags: ['启用'],
  },
  {
    key: '2',
    firstName: '定时任务2',
    lastName: 'G845212',
    age: 77,
    address: '预设类型1',
    tags: ['停用'],
  },
  {
    key: '3',
    firstName: '定时任务3',
    lastName: 'G845212',
    age: 77,
    address: '预设类型1',
    tags: ['停用'],
  },
]);

const rowSelection = {};
const dialogVisible = ref(false);
const newTask = ref({
  key: '',
  firstName: '',
  lastName: '',
  age: 0,
  address: '',
  tags: ['启用'], // 默认状态为启用
});

const toggleStatus = (row: DataType) => {
  // 这里不需要额外逻辑，因为 ElSwitch 已经自动更新了 row.tags[0]
};

const addTask = () => {
  newTask.value.key = String(data.value.length + 1); // 自动生成唯一键
  data.value.push({ ...newTask.value });
  dialogVisible.value = false;
  newTask.value = {
    key: '',
    firstName: '',
    lastName: '',
    age: 0,
    address: '',
    tags: ['启用'],
  };
};

const getTagType = (tag: string): string => {
  switch (tag) {
    case '启用':
      return 'success';
    case '停用':
      return 'danger';
    default:
      return '';
  }
};
</script>

<style scoped>
/* 如果有其他特定样式需求，可以在这里添加 */
</style>