jihe-hs/ruoyi-ui/src/views/JiHeExpressway/pages/control/device/strategy/index.vue

<template>

  <!-- 路网管控 - 设备管控 - 管控策略 -->
  <div class="sensitiveWord" v-loading="isLoading" element-loading-text="数据加载中"
    element-loading-background="rgba(0, 0, 0, 0.3)">
    <div class="filter">
      <div>
        <ButtonGradient @click.native="onAddEdit()">
          <template #prefix>
            <img src="@screen/images/insert.svg" />
          </template>
          新增
        </ButtonGradient>
        <!-- <ButtonGradient @click.native="handleExport">
          <template #prefix>
            <img src="@screen/images/export.svg" />
          </template>
          导出
        </ButtonGradient> -->
        <ButtonGradient @click.native="onReset">
          <template #prefix>
            <img src="@screen/images/refresh.svg" />
          </template>
          刷新
        </ButtonGradient>
      </div>

      <InputSearch style="width: 402px" type="input" params="word" :disable="true" placeholder="请输入关键词，回车搜索"
        @handleSearch="handleSearch" ref="form" />
    </div>

    <div class="body">
      <div class="content">
        
      <Empty v-if="!data.length && !isFirst" class="no-data" style="position: absolute">暂无数据</Empty>
      <div class="scrollPanel" v-else>
        <div class="cardBox" v-for="(item, index) in data" :key="index">
          <Card :buttonIcon="null" :keyMap="keyMap" :cardData="item" class="card" buttonText="详情">
            <template #form-remark="{ data }">
              <div class="remark">
                {{ data.remark }}
              </div>
            </template>
            <template #button>
              <!-- <Switcher class="switcher" :activeOption="activeOption"
                @change="(value) => handleSwitcherChange(value, item) " /> -->
              <el-switch v-model="item.status" active-color="#0BD" inactive-color="#999" active-value="0"
                inactive-value="1" @change="(value) => handleSwitcherChange(value, item) ">
              </el-switch>
              <Button @click.native="() => onAddEdit(item)">
                编辑
              </Button>
              <Button style="background-color: #ff5f5f" @click.native="onDelete(item)">
                删除
              </Button>
            </template>
          </Card>
        </div>
      </div>
    </div>
    </div>

    <!-- 分页 -->
    <div class="footer" v-if="numTotal > 0">
      <Pagination :total="numTotal" :current-page.sync="currentPage" :page-sizes="[35, 70, 105, 140, 175]"
        :page-size="pageSize" layout="total,sizes,prev, pager, next, jumper" @size-change="handleSizeChange"
        @current-change="handleCurrentChange" />
    </div>

    <AddNEditDialog v-model="isShowDialog" :propData="dialogData" @onSuccess="getData" />
  </div>
</template>

<script>
import Card from "@screen/components/Card1/index.vue";
import AddNEditDialog from "./components/AddNEditDialog.vue";
import InputSearch from "@screen/components/InputSearch/index.vue";
import ButtonGradient from "@screen/components/Buttons/ButtonGradient.vue";
import Button from "@screen/components/Buttons/Button.vue";
import Pagination from "@screen/components/Pagination.vue";

import { searchFormList } from "./data";
import request from "@/utils/request";
// import { setLoading } from "@screen/utils/index.js"
import { delay, exportFile, confirm } from "@screen/utils/common";
import { Message } from "element-ui";

import Switcher from '@screen/pages/service/PublishingChannelManagement/components/Switcher.vue';

// 辖段管理
export default {
  name: "sensitiveWord",
  components: {
    Switcher,
    Pagination,
    Card,
    ButtonGradient,
    InputSearch,
    AddNEditDialog,
    Button,
  },
  data() {
    return {
      searchData:{},
      activeOption: {
        active: {
          text: "开"
        },
        unActive: {
          text: "关"
        }
      },
      isLoading: false,
      searchText: "请输入敏感词，回车搜索",
      searchFormList,

      numTotal: 0,
      pageSize: 42,
      currentPage: 1,

      keyMap: [
        {
          key: "groupName",
          label: "标题",
        },
        {
          key: "remark",
          label: "描述",
        },
      ],
      data: [],
      dialogData: {},
      isShowDialog: false,
      isFirst: true,
    };
  },
  created() {
    this.getData();
    // this.getSearchOptions();
  },
  methods: {
    async handleSwitcherChange(value, item) {
      // item.status == "1" ? item.status = "0" : item.status = "1" ;
      request({
        url: `/business/dcBatchFunctionsJobGroup/changeStatus`,
        method: "POST",
        data: {
          id:item.id,
          status:value
        },
      })
        .then((result) => {
          item.status = result.data.status;
          if (result.code != 200) return;
          Message.success(`操作成功`);
        })
    },
    getSearchData() {
      let params = {
        groupName: this.searchData?.word,
        pageSize: this.pageSize,
        pageNum: this.currentPage,
      };
      // params = {
      //   pageSize: 1000000,
      //   pageNum: 1
      // };
      return params;
    },
    async onDelete(data) {
      await confirm({ message: "删除该任务组?" });

      request({
        url: `/business/dcBatchFunctionsJobGroup/${data.id}`,
        method: "DELETE",
        data: {},
      })
        .then((result) => {
          if (result.code != 200) return Message.error("删除失败");
          Message.success("删除成功");
          this.getData();
        })
        .catch(() => {
          Message.error("删除失败");
        });
    },
    onAddEdit(data) {
      this.isShowDialog = true;
      this.dialogData = data||{};
    },
    // handleExport() {
    //   exportFile({
    //     url: "/business/dcInfoBoardVocabulary/export",
    //     filename: "情报板敏感词",
    //     data: this.getSearchData(),
    //   });
    // },
    handleSearch(data) {
      this.searchData = data;
      this.getData();
    },
    onReset(){
      this.searchData && (this.searchData.word = undefined);
      // console.log(this.$refs["form"] , "__-=========");
      this.$refs["form"].handleResetForm();
      this.getData();
    },
    async getData() {
      // const closeLoading = setLoading();
      this.isLoading = true;

      await delay(100);

      // 测试代码开始
      // this.data = [{
      //   id:1,
      //   groupName : "任务组一",
      //   remark : "每天早7点关闭激光唤醒设备，晚7点打开激光唤醒设备。每天早7点关闭激光唤醒设备，晚7点打开激光唤醒设备。",
      //   detailedConfiguration:"[{time:'08:00:00',tasks:[1]}]"
      // }]
      // this.isLoading = false;
      // return;
      // 测试代码结束

      request({
        url: `/business/dcBatchFunctionsJobGroup/list`,
        method: "get",
        params: this.getSearchData(),
      })
        .then((result) => {
          this.searchText = this.searchData?.word || "请输入关键词，回车搜索";
          if (result.code != 200) return;
          this.data = result.rows;
          
          // this.data.map(item=>{
          //   item.remark = "每天早7点关闭激光唤醒设备，晚7点打开激光唤醒设备。每天早7点关闭激光唤醒设备，晚7点打开激光唤醒设备。"
          // });
          this.numTotal = result.total;
          // this.pageTotal = Math.ceil(result.total/this.pageSize);
        })
        .finally(() => {
          this.isFirst = false;
          // closeLoading();
          this.isLoading = false;
        });
    },

    handleSizeChange(size) {
      this.pageSize = size;
      this.getData();
    },
    handleCurrentChange(currentPage) {
      this.currentPage = currentPage;
      this.getData();
    },
  },
};
</script>

<style lang="scss" scoped>
.sensitiveWord {
  width: 100%;
  height: 100%;
  padding: 20px;
  display: flex;
  flex-direction: column;

  .filter {
    height: 60px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    div {
      display: flex;
      gap: 6px;
    }
  }

  .body {
    flex: 1;
    overflow: hidden;
    position: relative;
    overflow: hidden;
    width: 100%;
    .content {
      position: absolute;
      width: 100%;
      height: 100%;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      .scrollPanel {
        display: grid;
        grid-template-columns: repeat(6, 1fr);
        grid-gap: 15px;
        grid-auto-rows: minmax(140px, max-content);
        position: relative;
        flex: 1;
        overflow: auto;
      }
    }
  }

  .cardBox {
      // flex-basis: percentage(1/5);
      // width: 0;
      // padding-right: 10px;
      // padding-bottom: 10px;
    }
   .remark {
      font-size: 14px; line-height: 20px; height: 40px; overflow: hidden;
      color: #00b3cc;
    }
  .footer {
    margin-top: 15px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
</style>