jihe-hs/ruoyi-ui/src/views/JiHeExpressway/pages/service/sensitive/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="handleAddEdit(true)">
          <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="getData">
          <template #prefix>
            <img src="@screen/images/refresh.svg" />
          </template>
          刷新
        </ButtonGradient>
      </div>

      <InputSearch style="width: 402px;" :formList="searchFormList" :formConfigOptions="{ labelWidth: '90px' }" :placeholder="searchText" @handleSearch="handleSearch" />
    </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" style="overflow: hidden; height: 145px;">
          <Card :buttonIcon="null" :keyMap="keyMap" :cardData="item" class="card"
            buttonText="详情">
            <template #form-word="{ data }">
              <div class="keyword">
                {{ data.word }}
              </div>
            </template>
            <template #button>
              <Button @click.native="() => handleAddEdit(true, item)">
                修改
              </Button>
              <Button style="background-color: #FF5F5F;" @click.native="handleDelete(item)">
                删除
              </Button>
            </template>
          </Card>
        </div>
      </template>
    </div>


    <!-- 分页 -->
    <div class="footer" v-if="numTotal>0">
      <Pagination :total="numTotal" :current-page.sync="currentPage" :page-size="pageSize" layout="prev, pager, next"
        @size-change="handleSizeChange" @current-change="handleCurrentChange" />
    </div>

    <AddNEditDialog v-model="isShowDialog" :data="dialogData" @onSuccess = "getData" :dataAll="data"/>
  </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";

// 辖段管理
export default {
  name: 'sensitiveWord',
  components: {
    Pagination,
    Card,
    ButtonGradient,
    InputSearch,
    AddNEditDialog,
    Button
  },
  data() {
    return {
      isLoading:false,
      searchText:"关键词搜索",
      searchFormList,

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

      keyMap: [
        {
          key: "word",
          label: "关键词"
        },
        {
          key: "id",
          label: "id"
        },
        {
          key: "createTime",
          label: "创建时间"
        }
      ],
      data: [],
      dialogData: null,
      isShowDialog: false,
      isFirst: true
    }
  },
  created() {
    this.getData();
    // this.getSearchOptions();
  },
  methods: {
    getSearchData() {
      let params = {
        word: this.searchData?.word,
        pageSize: this.pageSize,
        pageNum: this.currentPage
      };
      // params = {
      //   pageSize: 1000000,
      //   pageNum: 1
      // };
      return params
    },
    async handleDelete(data) {
      await confirm({ message: "是否要删除该敏感词?" });

      request({
        url: `/business/dcInfoBoardVocabulary/${data.id}`,
        method: "DELETE",
        data: {}
      })
        .then(result => {
          if (result.code != 200) return Message.error("删除失败");
          Message.success("删除成功")
          this.getData();
        })
        .catch(() => {
          Message.error("删除失败")
        })
    },
    handleAddEdit(bool, data) {
      this.isShowDialog = bool;
      this.dialogData = data;
    },
    handleExport() {
      exportFile({
        url: "/business/dcInfoBoardVocabulary/export",
        filename: "情报板敏感词",
        data: this.getSearchData()
      });
    },
    handleSearch(data) {
      this.searchData = data;
      this.getData();
    },
    async getData() {
      // const closeLoading = setLoading();
      this.isLoading = true;

      await delay(100);

      request({
        url: `/business/dcInfoBoardVocabulary/list`,
        method: "get",
        params: this.getSearchData()
      }).then(result => {
        this.searchText = this.searchData?.word || "关键词搜索";
        if (result.code != 200) return;
        this.data = result.rows;
        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 {
  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/7); width: 0; padding-right: 10px; padding-bottom: 10px;
    }
    .keyword {
      font-size: 14px;
      font-weight: bold;
      color: #00B3CC;
    }
  }

    .footer {
    margin-top: 15px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

}
</style>