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>{{ index + 1 }}</td>
        <td>{{ row.startTime }}</td>
        <td>{{ row.planName }}</td>
        <td v-if="row.planStatus == '2'">
          <button
            style="
            font-size: 12px;
            background: rgba(57, 215, 187, 0.1);
            color: rgb(57, 215, 187);
            border: 1px solid rgb(57, 215, 187);
            ">
            已执行
          </button>
        </td>
        <td v-if="row.planStatus == '1'">
          <button
            style="
            font-size: 12px;
            background: rgba(243, 97, 99, 0.1);
            border: 1px solid rgba(243, 97, 99);
            color: rgba(243, 97, 99);
            ">
            待执行
          </button>
        </td>
        <td>
          <div class="tabReboot" @click="restartPlan(row.id)">重启</div>
          <div class="tabDelete" @click="deletePlan(row.id)">删除</div>
        </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="transferData"
        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" @click="sendPlan">确定</button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
// 请求
import { http } from '/nerv-lib/util/http';
import { lightingManage } from '/@/api/IlluminationInfo';
import { message } from 'ant-design-vue';

// 初始化 ===========================================================

onMounted(() => {
  // 计划表格
  getTable()
  // 穿梭框原始数据
  getLeftPlan()
})

// tab页部分 ========================================================

// 表格数据
const dataSource = ref([]);
// 获得表格数据
const getTable = () => {
  http.get(lightingManage.getPlanTable, {}).then(res => {
    dataSource.value = res.data
  })
}
// 删除表格中的计划
const deletePlan = (id: String) => {
  http.delete(lightingManage.deletePlan, [id]).then(res => {
    message.success('操作成功')
    getTable()
  })
}
// 重启表格中的计划
const restartPlan = (id: String) => {
  http.post(lightingManage.restartPlan, { planId: id }).then(res => {
    message.success('操作成功')
    getTable()
  })
}

// tab页弹窗部分 ====================================================

// 添加弹窗控制变量
const addVisible = ref(false);
// 打开弹窗
const addModal = () => {
  addVisible.value = true;
};

// 穿梭框部分 =======================================================

// 穿梭框数据
const transferData = ref([]) as any;
// 获得穿梭框原始数据
const getLeftPlan = () => {
  http.get(lightingManage.getLeftPlan, {}).then(res => {
    let arr = []
    res.data.forEach(item => {
      arr.push({
        key: item.id,
        title: item.planName
      })
    })
    transferData.value = arr
  })
}

const handleChange = (keys: string[], direction: string, moveKeys: string[]) => {
  console.log(keys, direction, moveKeys);
};
const handleSearch = (dir: string, value: string) => {
  console.log('search:', dir, value);
};
// 穿梭框选中数据
const targetKeys = ref<string[]>([]);
// 将穿梭框选中的计划提交
const sendPlan = () => {
  if (targetKeys.value.length < 1) {
    return message.info('没有选择任何计划');
  }
  http.post(lightingManage.submitLeftPlan, targetKeys.value).then(res => {
    message.success('添加成功')
    // 如果发送成功，则刷新表格
    getTable()
    getLeftPlan()
  })
}

const filterOption = (inputValue: string, option: any) => {
  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);
    cursor: pointer;
  }
}
// 表格
.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;
    display: inline-block;
    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);
    cursor: pointer;
  }
  .tabReboot {
    margin-right: 8px;
  }
  .tabReboot::active {
    color: white !important;
  }
  .tabDelete::active {
    color: white;
  }
}
::v-deep(.ant-transfer) {
  // 屏蔽自带的hover效果
  .ant-transfer-list-content-item:hover {
    background: black;
  }
}
  

</style>