sgxt_web/src/views/backOfficeSystem/MeetingRoom/index.vue

<template>
  <div>
    <div class="titleBox">
      <PageTitle title="网上会议室" />
    </div>
    <!-- 搜索 -->
    <div ref="searchBox">
      <Search :searchArr="searchConfiger" @submit="onSearch" :key="pageData.keyCount" />
    </div>
    <!-- 表格 -->
    <div class="tabBox">
      <div class="btns">
        <el-button type="primary">新增</el-button>
        <el-button type="danger">新增</el-button>
      </div>
      <div class="list noScollLine">
        <div class="list-item" v-for="(item, index) in pageData.tableData" :key="`tableData${index}`" @onmouseover="">
          <div class="top">
            <div class="title ellipsis">{{ item.title }}</div>
            <div class="info h36 ellipsis2">会商内容：{{ item.hynr }}</div>
            <div class="info h36 ellipsis2">关联线索：{{ item.lxxs }}</div>
            <div class="info h36 ellipsis2">涉及人员：{{ item.sjry }}</div>
          </div>

          <div class="mid">
            <div class="left">
              <div class="title ellipsis">参会人员：{{ item.chry }}</div>
              <div class="desc">
                <div class="info ellipsis" v-for="(el, i) in item.cqcs" :key="`item${index}`">{{ i + 1 }}.{{ el }}</div>
                <!-- <div class="info ellipsis">2.应抓捕赵某，王某XXXXXXXXX王某XXXXXXXXXXXXXXXX等人</div> -->
              </div>
            </div>
            <div class="right">
              <el-button type="primary" size="small">加入会议</el-button>
              <el-button type="primary" size="small">反馈情况</el-button>
              <el-button type="primary" size="small">处置下发</el-button>
            </div>
          </div>
          <div class="bottom">
            <el-link type="primary">评论</el-link>
            <el-link type="primary">会议回放</el-link>
            <el-link type="danger">删除</el-link>
          </div>
        </div>
      </div>

      <Pages
        @changeNo="changeNo"
        @changeSize="changeSize"
        :tableHeight="pageData.tableHeight"
        :pageConfiger="{
          ...pageData.pageConfiger,
          total: pageData.total
        }"
      ></Pages>
    </div>
    <!-- 详情 -->
    <DetailForm ref="detailDiloag" />
  </div>
</template>

<script setup>
  import PageTitle from "@/components/aboutTable/PageTitle.vue";
  import Pages from "@/components/aboutTable/Pages.vue";
  import Search from "@/components/aboutTable/Search.vue";
  // import DetailForm from "./components/detailForm.vue";
  import { qcckGet, qcckPost, qcckDelete } from "@/api/qcckApi.js";
  import { reactive, ref, onMounted, getCurrentInstance } from "vue";
  const { proxy } = getCurrentInstance();
  const detailDiloag = ref();
  const searchBox = ref(); //搜索框

  const searchConfiger = ref([
    {
      label: "会议主题",
      prop: "businessNo",
      placeholder: "请输入会议主题",
      showType: "input"
    },
    {
      label: "关联线索",
      prop: "goodsName",
      placeholder: "请选择关联线索",
      showType: "select"
    },
    {
      label: "涉及人员",
      prop: "businessNo",
      placeholder: "请输入涉及人员",
      showType: "input"
    },
    {
      label: "会议内容",
      prop: "businessNo",
      placeholder: "请输入会议内容",
      showType: "input"
    }
  ]);

  const queryFrom = ref({});
  const pageData = reactive({
    tableData: [
      {
        title: "林芝市XX地区发生的重大案件处理",
        hynr: "XX王某XXXXXXXXXXXXX王某XXXXXXXXXXXXXXXXXXXXXXX",
        lxxs: "XX王某XXXXXXXXXXXXX王某XXXXXXXXXXXXXXXXXXXXXXX",
        sjry: "王某、赵某、.....",
        chry: "王某、赵某、赵某赵某赵某.....",
        cqcs: ["应抓捕XXXXXXXXXXcccccccccc", "应抓捕XXXXXXXXXXcccccccccc"]
      },
      {
        title: "林芝市XX地区发生的重大案件处理",
        hynr: "XX王某XXXXXXXXXXXXX王某XXXXXXXXXXXXXXXXXXXXXXX",
        lxxs: "XX王某XXXXXXXXXXXXX王某XXXXXXXXXXXXXXXXXXXXXXX",
        sjry: "王某、赵某、.....",
        chry: "王某、赵某、赵某赵某赵某.....",
        cqcs: ["应抓捕XXXXXXXXXXcccccccccc", "应抓捕XXXXXXXXXXcccccccccc"]
      },
      {
        title: "林芝市XX地区发生的重大案件处理",
        hynr: "XX王某XXXXXXXXXXXXX王某XXXXXXXXXXXXXXXXXXXXXXX",
        lxxs: "XX王某XXXXXXXXXXXXX王某XXXXXXXXXXXXXXXXXXXXXXX",
        sjry: "王某、赵某、.....",
        chry: "王某、赵某、赵某赵某赵某.....",
        cqcs: ["应抓捕XXXXXXXXXXcccccccccc", "应抓捕XXXXXXXXXXcccccccccc"]
      },
      {
        title: "林芝市XX地区发生的重大案件处理",
        hynr: "XX王某XXXXXXXXXXXXX王某XXXXXXXXXXXXXXXXXXXXXXX",
        lxxs: "XX王某XXXXXXXXXXXXX王某XXXXXXXXXXXXXXXXXXXXXXX",
        sjry: "王某、赵某、.....",
        chry: "王某、赵某、赵某赵某赵某.....",
        cqcs: ["应抓捕XXXXXXXXXXcccccccccc", "应抓捕XXXXXXXXXXcccccccccc"]
      },
      {
        title: "林芝市XX地区发生的重大案件处理",
        hynr: "XX王某XXXXXXXXXXXXX王某XXXXXXXXXXXXXXXXXXXXXXX",
        lxxs: "XX王某XXXXXXXXXXXXX王某XXXXXXXXXXXXXXXXXXXXXXX",
        sjry: "王某、赵某、.....",
        chry: "王某、赵某、赵某赵某赵某.....",
        cqcs: ["应抓捕XXXXXXXXXXcccccccccc", "应抓捕XXXXXXXXXXcccccccccc"]
      },
      {
        title: "林芝市XX地区发生的重大案件处理",
        hynr: "XX王某XXXXXXXXXXXXX王某XXXXXXXXXXXXXXXXXXXXXXX",
        lxxs: "XX王某XXXXXXXXXXXXX王某XXXXXXXXXXXXXXXXXXXXXXX",
        sjry: "王某、赵某、.....",
        chry: "王某、赵某、赵某赵某赵某.....",
        cqcs: ["应抓捕XXXXXXXXXXcccccccccc", "应抓捕XXXXXXXXXXcccccccccc"]
      },
      {
        title: "林芝市XX地区发生的重大案件处理",
        hynr: "XX王某XXXXXXXXXXXXX王某XXXXXXXXXXXXXXXXXXXXXXX",
        lxxs: "XX王某XXXXXXXXXXXXX王某XXXXXXXXXXXXXXXXXXXXXXX",
        sjry: "王某、赵某、.....",
        chry: "王某、赵某、赵某赵某赵某.....",
        cqcs: ["应抓捕XXXXXXXXXXcccccccccc", "应抓捕XXXXXXXXXXcccccccccc"]
      },
      {
        title: "林芝市XX地区发生的重大案件处理",
        hynr: "XX王某XXXXXXXXXXXXX王某XXXXXXXXXXXXXXXXXXXXXXX",
        lxxs: "XX王某XXXXXXXXXXXXX王某XXXXXXXXXXXXXXXXXXXXXXX",
        sjry: "王某、赵某、.....",
        chry: "王某、赵某、赵某赵某赵某.....",
        cqcs: ["应抓捕XXXXXXXXXXcccccccccc", "应抓捕XXXXXXXXXXcccccccccc"]
      },
      {
        title: "林芝市XX地区发生的重大案件处理",
        hynr: "XX王某XXXXXXXXXXXXX王某XXXXXXXXXXXXXXXXXXXXXXX",
        lxxs: "XX王某XXXXXXXXXXXXX王某XXXXXXXXXXXXXXXXXXXXXXX",
        sjry: "王某、赵某、.....",
        chry: "王某、赵某、赵某赵某赵某.....",
        cqcs: ["应抓捕XXXXXXXXXXcccccccccc", "应抓捕XXXXXXXXXXcccccccccc"]
      },
      {
        title: "林芝市XX地区发生的重大案件处理",
        hynr: "XX王某XXXXXXXXXXXXX王某XXXXXXXXXXXXXXXXXXXXXXX",
        lxxs: "XX王某XXXXXXXXXXXXX王某XXXXXXXXXXXXXXXXXXXXXXX",
        sjry: "王某、赵某、.....",
        chry: "王某、赵某、赵某赵某赵某.....",
        cqcs: ["应抓捕XXXXXXXXXXcccccccccc", "应抓捕XXXXXXXXXXcccccccccc"]
      }
    ],
    keyCount: 0,
    tableConfiger: {
      rowHieght: 61,
      showSelectType: "null",
      loading: false
    },
    total: 0,
    pageConfiger: {
      pageSize: 20,
      pageCurrent: 1
    },
    controlsWidth: 120
  });

  onMounted(() => {
    getList();
    tabHeightFn();
  });

  //选择类型
  const handleType = val => {
    pageData.keyCount++;
    pageData.pageConfiger.pageCurrent = 1;
    getList();
  };
  // 搜索
  const onSearch = val => {
    queryFrom.value = { ...val };
    pageData.pageConfiger.pageCurrent = 1;
    getList();
  };

  const changeNo = val => {
    pageData.pageConfiger.pageNum = val;
    getList();
  };
  const changeSize = val => {
    pageData.pageConfiger.pageSize = val;
    getList();
  };

  // 获取列表
  const getList = val => {
    // pageData.tableConfiger.loading = true;
    let data = { ...pageData.pageConfiger, ...queryFrom.value };
    // let url = '/mosty-lzcj/tbDwMbkf/queryList';
    // qcckPost(data,url).then(res=>{
    //   pageData.tableData = res.records || [];
    //   pageData.total = res.total;
    //   pageData.tableConfiger.loading = false;
    // }).catch(()=>{ pageData.tableConfiger.loading = false; })
  };

  // 详情
  const addEdit = (type, row) => {
    detailDiloag.value.init(type, row);
  };

  // 表格高度计算
  const tabHeightFn = () => {
    pageData.tableHeight = window.innerHeight - searchBox.value.offsetHeight - 250;
    window.onresize = function () {
      tabHeightFn();
    };
  };
</script>

<style lang="scss" scoped>
  .el-loading-mask {
    background: rgba(0, 0, 0, 0.5) !important;
  }
  .btns {
    padding: 10px 20px;
  }
  .list {
    height: calc(100% - 62px);

    gap: 10px;
    margin: 0 15px;
    overflow: auto;
    .list-item {
      display: inline-block;
      border: 1px solid #ccc;
      height: 280px;
      width: 380px;
      box-sizing: border-box;
      border-radius: 5px;
      padding: 10px;
      margin: 10px 5px;
      &:hover {
        border-color: rgb(124, 195, 253);
        background-color: rgba(190, 233, 255, 0.582);
      }
      &:hover .mid {
        border-color: rgb(124, 195, 253);
      }
      &:hover .desc {
        background-color: rgb(190, 233, 255);
      }
      .title {
        color: black;
        font-size: 14px;
        font-weight: 700;
        // height: 24px;
        // line-height: 24px;
        margin-bottom: 5px;
      }
      .info {
        color: #a5a1a1;
        font-size: 12px;

        line-height: 1.5;
      }
      .desc {
        margin-top: 5px;
        background-color: rgb(242, 242, 242);
        width: 260px;
        height: calc(100% - 25px);
        padding: 10px;
      }
      .mid {
        border: 1px dashed rgb(124, 195, 253);
        border-left: 0;
        border-right: 0;
        padding: 10px 0;
        display: flex;
        justify-content: space-between;

        .right {
          width: 80px;
          .el-button + .el-button {
            margin-left: 0;
            margin-top: 5px;
          }
        }
      }
      .bottom {
        display: flex;
        justify-content: flex-end;
      }
    }
  }
</style>