xzlz_JczWeb/src/components/fzq/systemMessages.vue

<template>
  <!-- <el-button type="success" style='position: absolute;right:30px;'>一键忽略</el-button> -->
  <el-tabs v-model="activeName" class="demo-tabs" @tab-click="chageHandle">
    <el-tab-pane label="未查看" name="first">
      <MyTable customClass="zdy_peo_table" :tableData="pageData.tableData" :tableColumn="pageData.tableColumn"
        :tableHeight="pageData.tableHeight" :key="pageData.keyCount" :tableConfiger="pageData.tableConfiger"
        :controlsWidth="pageData.controlsWidth">
        <template #xxly="{ row }">
          <DictTag :tag="false" :value="row.xxly" :options="dict.BD_D_XXLY" />
        </template>
        <template #xxlx="{ row }">
          <DictTag :tag="false" :value="row.xxlx" :options="dict.BD_D_XXLX" />
        </template>
        <template #controls="{ row }">
          <el-button size="small" type="primary" @click="handleDetail(row)">查看</el-button>
        </template>
      </MyTable>
      <Pages @changeNo="changeNo" @changeSize="changeSize" :tableHeight="pageData.tableHeight" :pageConfiger="{
        ...pageData.pageConfiger,
        total: pageData.total
      }"></Pages>
    </el-tab-pane>
    <el-tab-pane label="已查看" name="second">
      <MyTable customClass="zdy_peo_table" :tableData="pageData.tableData" :tableColumn="pageData.tableColumn"
        :tableHeight="pageData.tableHeight" :key="pageData.keyCount" :tableConfiger="pageData.tableConfiger"
        :controlsWidth="pageData.controlsWidth">
        <template #xxly="{ row }">
          <DictTag :tag="false" :value="row.xxly" :options="dict.BD_D_XXLY" />
        </template>
        <template #xxlx="{ row }">
          <DictTag :tag="false" :value="row.xxlx" :options="dict.BD_D_XXLX" />
        </template>
        <template #controls="{ row }">
          <el-button size="small" type="primary" @click="handleDetail(row)">查看</el-button>
        </template>
      </MyTable>
      <Pages @changeNo="changeNo" @changeSize="changeSize" :tableHeight="pageData.tableHeight" :pageConfiger="{
        ...pageData.pageConfiger,
        total: pageData.total
      }"></Pages>
    </el-tab-pane>
  </el-tabs>
  <Information v-model='showDialog' title='消息详情' :showFooter="false">
    <Xtxi :item="msgDetail" v-if="xxlx == 'xtxx'" :dict="dict" />
  </Information>
</template>
<script setup>
import { ref, reactive } from 'vue'
import MyTable from "@/components/aboutTable/MyTable.vue";
import Pages from "@/components/aboutTable/Pages.vue";
import Information from "./information.vue";
import { queryYdxxPageList, queryWdxxPageList, queryWdxxDetail, queryYdxxDetail, qsXx } from '@/api/commit.js'
import Xtxi from './xtxi.vue'
const props = defineProps({
  dict: {
    type: Object,
    default: () => {
    }
  }, idEntityCard: {
    type: String,
    default: ''
  }, xxlx: {
    type: String,
    default: 'xtxx'
  }
})
const activeName = ref('first')
const pageData = reactive({
  tableData: [],
  keyCount: 0,
  tableConfiger: {
    loading: false,
    rowHieght: 40,
    haveControls: true,
  },
  controlsWidth: 160, //操作栏宽度
  total: 0,
  pageConfiger: {
    pageSize: 20,
    pageCurrent: 1
  }, //分页
  tableColumn: [
    { label: "消息标题", prop: "xxbt", showOverflowTooltip: true },
    { label: "消息来源", prop: "xxly", showOverflowTooltip: true, showSolt: true },
    { label: "消息描述", prop: "xxms", showOverflowTooltip: true },
    { label: "消息类型", prop: "xxlx", showOverflowTooltip: true, showSolt: true },
  ], tableHeight: "calc(80vh - 350px)",
});
const chageHandle = () => {
  pageData.pageConfiger.pageCurrent = 1
  pageData.pageConfiger.pageSize = 20
  handleClick()
}
//请求数据
const handleClick = async () => {
  let promes = {
    page: pageData.pageConfiger.pageCurrent,
    rows: pageData.pageConfiger.pageSize,
    jsrid: props.idEntityCard,
    xxlx: ""
  }
  switch (props.xxlx) {
    case 'xtxx':
      promes.xxlx = 100
      const res = activeName.value == 'first' ? await queryWdxxPageList(promes) : await queryYdxxPageList(promes)
      pageData.tableData = res.rows
      pageData.total = res.total
      break;
    case 'tztg':
      promes.xxlx = 200
      const tztgRes = activeName.value == 'first' ? await queryWdxxPageList(promes) : await queryYdxxPageList(promes)
      pageData.tableData = tztgRes.rows
      pageData.total = tztgRes.total
      break;
    default:
      break;
  }
}
const changeNo = (val) => {
  pageData.pageConfiger.pageCurrent = val
  handleClick()
}
const changeSize = (val) => {
  pageData.pageConfiger.pageSize = val
  handleClick()
}
handleClick()
// 查看详情
const showDialog = ref(false)
const msgDetail = ref({})
const disposition = (item) => {
  let arrId = ''
  if (Array.isArray(item)) {
    const itemMap = item.map(it => {
      return it.id
    })
    arrId = itemMap.join(',')
  } else {
    arrId = item.id
  }
  const promes = {
    xxlx: '100',
    id: arrId
  }
  qsXx(promes).then((result) => {
    handleClick()
  }).catch((err) => {
    console.log(err);

  });
}
const handleDetail = async (item) => {
  showDialog.value = true
  const res = activeName.value == 'first' ? await queryWdxxDetail({ id: item.id }) : await queryYdxxDetail({ id: item.id })
  if (res) {
    msgDetail.value = res[0]
    if (msgDetail.value.qszt == '0') {
      disposition(item)
    }
  }

}
</script>

<style lang="scss" scoped>
// @import "@/assets/css/homeScreen.scss";

.zdy_peo_table td.el-table__cell {
  color: #ffffff !important;
}

.zdy_peo_table th.el-table__cell {
  color: #ffffff !important;
  font-size: 15px;
}

.zdy_peo_table .el-table__body tr.el-table__row--striped td.el-table__cell {
  background: transparent !important;
}

.zdy_peo_table .table_blue_row {
  background: linear-gradient(to right, #001D4B 0%, rgba(0, 29, 75, 0.1) 100%) !important;
}
</style>