SaaS-lib/hx-ai-intelligent/src/view/equipmentControl/lightingManage/tabs2.vue

<template>
  <div class="div-add">
    <button class="add" @click="addModal">添加</button>
  </div>
  <table class="custom-table table1">
    <thead>
      <tr :style="{ background: 'rgba(35,45,69)' }">
        <th>序号</th>
        <th>执行时间</th>
        <th>计划名称</th>
        <th>状态</th>
        <th>操作</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="(row, index) in dataSource" :key="index">
        <td>{{ row.key }}</td>
        <td>{{ row.data }}</td>
        <td>{{ row.planName }}</td>
        <td v-if="row.status === '待执行'">
          <button
            style="
              font-size: 12px;
              background: rgba(57, 215, 187, 0.1);
              color: rgb(57, 215, 187);
              border: 1px solid rgb(57, 215, 187);
            ">
            {{ row.status }}
          </button>
        </td>
        <td v-if="row.status !== '待执行'">
          <button
            style="
              font-size: 12px;
              background: rgba(243, 97, 99, 0.1);
              border: 1px solid rgba(243, 97, 99);
              color: rgba(243, 97, 99);
            ">
            {{ row.status }}
          </button>
        </td>
        <td>
          <button class="tabReboot" @click="handleRefClick1">重启</button>
          <button class="tabDelete">删除</button>
        </td>
      </tr>
    </tbody>
  </table>
  <div class="out-dialog" v-if="addVisible">
    <div class="content" v-if="addVisible">
      <div class="div-operation"></div>
      <span class="text-operation">计划库</span>
    </div>
    <div style="margin-top: 20px">
      <a-transfer
        v-model:target-keys="targetKeys"
        :data-source="mockData"
        show-search
        :filter-option="filterOption"
        :render="(item) => item.title"
        @change="handleChange"
        :style="{ color: 'rgba(255,255,255,1)' }"
        @search="handleSearch"
        :listStyle="{ border: '2px solid rgba(25,74,125,1)', height: 'calc(100vh - 200px)' }" />
    </div>
    <div style="width: 100%; height: 60px;"></div>
    <div class="button-box">
      <button class="cancel" @click="addVisible = false">取消</button>
      <button class="execute">确定</button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';

// 初始化
onMounted(() => {
  
})

// 表格数据
const dataSource = ref([
  {
    key: '1',
    data: '2024-05-01',
    planName: '劳动节',
    status: '暂停中',
  },
  {
    key: '2',
    data: '2024-05-01',
    planName: '国庆节',
    status: '待执行',
  },
  {
    key: '3',
    data: '2024-05-01',
    planName: '元旦',
    status: '待执行',
  },
]);
const addVisible = ref<boolean>(false);
// 操作日志
const handleRefClick1 = () => {
  alert(111)
};
const addModal = () => {
  addVisible.value = true;
};
const handleChange = (keys: string[], direction: string, moveKeys: string[]) => {
  console.log(keys, direction, moveKeys);
};
const handleSearch = (dir: string, value: string) => {
  console.log('search:', dir, value);
};

// 穿梭框 相关业务
interface MockData {
  key: string;
  title: string;
  description: string;
  chosen: boolean;
}
const mockData = ref([
  {
    key: '1',
    title: '计划再开',
  },
  {
    key: '2',
    title: '检修模式',
  },
  {
    key: '3',
    title: '设备变更',
  },
]);
const targetKeys = ref<string[]>([]);
const filterOption = (inputValue: string, option: MockData) => {
  console.log(option.description);

  return option.description.indexOf(inputValue) > -1;
};


</script>
<style lang="less" scoped>
@import "./dialogStyle.less";

// 右下角添加按钮
.div-add {
  height: 64px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  position: fixed;
  bottom: 0;
  right: 0;
  margin-right: 20px;
  .add {
    width: 74px;
    height: 40px;
    opacity: 1;
    border-radius: 4px;
    background: rgba(67, 136, 251, 1);
    border: rgba(67, 136, 251, 1);
    font-size: 14px;
    font-weight: 400;
    color: rgba(255, 255, 255, 1);
  }
}
// 表格
.custom-table {
  border-collapse: collapse;
  width: 416px;
  height: 60px;
  color: rgba(255, 255, 255, 1);
}
.custom-table th,
.custom-table td {
  border: 1px solid rgba(163, 192, 243, 1);
  text-align: left;
  padding: 8px;
  text-align: center;
}
.table1 {
  margin-top: 20px;
  width: 100%;
  border: 1px solid rgba(255, 255, 255);
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.1);
  // 表格中的操作按钮
  .tabReboot,
  .tabDelete {
    border: none;
    background-color: rgba(0, 0, 0, 0);
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0;
    line-height: 20px;
    color: rgba(67, 136, 251, 1);
  }
  .tabReboot {
    margin-right: 8px;
  }
}
::v-deep(.ant-transfer) {
  // 屏蔽自带的hover效果
  .ant-transfer-list-content-item:hover {
    background: black;
  }
}
  

</style>