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">
      <Empty v-if="!data.length && !isFirst" class="no-data" style="position: absolute">暂无数据</Empty>
      <template 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" :value="item.status!='0'"
                @change="(value) => handleSwitcherChange(value, item) " />
              <Button @click.native="() => onAddEdit(item)">
                编辑
              </Button>
              <Button style="background-color: #ff5f5f" @click.native="onDelete(item)">
                删除
              </Button>
            </template>
          </Card>
        </div>
      </template>
    </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 {
      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" ;
    },
    getSearchData() {
      let params = {
        word: 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.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 {
    height: 0;
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    .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>