jihe-hs/ruoyi-ui/src/views/JiHeExpressway/pages/service/sensitive/index.vue

<template>
  <div class='sensitiveWord'>
    <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">
          <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>
    <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 { 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: {
    Card,
    ButtonGradient,
    InputSearch,
    AddNEditDialog,
    Button
  },
  data() {
    return {
      searchText:"关键词搜索",
      searchFormList,
      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: 1000000,
        pageNum: 1
      };
      // 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();

      await delay(150);

      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.data = [
        //   ...result.rows,...result.rows, ...result.rows, ...result.rows, ...result.rows, ...result.rows, ...result.rows, ...result.rows, ...result.rows, ...result.rows, ...result.rows
        //   , ...result.rows, ...result.rows, ...result.rows, ...result.rows, ...result.rows, ...result.rows, ...result.rows, ...result.rows, ...result.rows, ...result.rows
        // ];
        Array.from(result.rows);
      }).finally(() => {
        this.isFirst = false;
        closeLoading();
      })
    }
  }

}
</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-y: scroll;
    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;
    }
  }
}
</style>