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

<template>
  <div class="titleBox">
    <PageTitle title="网上会议室">
      <el-button type="primary" @click="addEdit('add', '')">
        <el-icon style="vertical-align: middle">
          <CirclePlus />
        </el-icon>
        <span style="vertical-align: middle">新增</span>
      </el-button>
    </PageTitle>
  </div>
  <div ref="searchBox">
    <Search :searchArr="searchConfiger" @submit="onSearch" />
  </div>
  <div class="tabBox">
    <ul class="list noScollLine" v-loading="pageData.loading">
      <li class="list-item" v-for="(item, index) in pageData.list" :key="`tableData${index}`">
        <div class="top">
          <div class="title ellipsis">{{ item.hsbt }}</div>
          <div class="info h20 ellipsis">会商内容：{{ item.hsnr }}</div>
          <div class="info h20 ellipsis">关联线索：{{ item.glxsmc }}</div>
          <div class="info h20 ellipsis">涉及人员：{{ item.sjry }}</div>
          <div class="info h20 ellipsis">会商处置意见：{{ item.czyj }}</div>
          <div class="info h20 ellipsis">会议时间：{{ item.hskssj }} - {{ item.hsjssj }}</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.xsplList" :key="i">{{ i + 1 }}、{{ el.plnr }}</div>
            </div>
          </div>
          <div class="right">
            <el-button type="primary" size="small" @click="joinMeeting(item, '会议')">加入会议</el-button>
            <el-button type="primary" size="small" @click="feedBack(item)">反馈情况</el-button>
            <el-button type="primary" size="small" @click="disposeIssue(item)">处置下发</el-button>
          </div>
        </div>

        <div class="bottom">
          <el-link type="primary" @click="viewFeedback(item)">
            <el-icon>
              <View />
            </el-icon>查看反馈
          </el-link>
          <el-popover placement="top" :visible="item.visible" :width="400" trigger="click">
            <template #reference>
              <el-link type="primary"><el-icon>
                  <ChatDotSquare />
                </el-icon>评论</el-link>
            </template>
            <MOSTY.Other filterable style="width: 100%;" v-model="comments" type="textarea" rows="3" clearable
              placeholder="发表评论" />
            <div class="mt10 flex just-center">
              <el-button size="small" type="primary" @click.stop="handleSumbit(item)">发送</el-button>
            </div>
          </el-popover>
          <el-link type="primary"><el-icon>
              <VideoPlay />
            </el-icon>会议回放</el-link>
          <el-link type="primary" @click="addEdit('edit', item)"><el-icon>
              <Edit />
            </el-icon>编辑</el-link>
          <el-link type="danger" @click="delDictItem(item.id)"><el-icon>
              <Delete />
            </el-icon>删除</el-link>
        </div>
      </li>
      <MOSTY.Empty :show="!pageData.loading && pageData.list.length <= 0"></MOSTY.Empty>
    </ul>
    <Pages @changeNo="changeNo" @changeSize="changeSize" :tableHeight="pageData.tableHeight" :pageConfiger="{
      ...pageData.pageConfiger,
      total: pageData.total
    }"></Pages>
  </div>
  <!-- 详情 -->
  <DetailForm ref="detailDiloag" @updateDate="getList" />
  <RoomDetail />
  <ConferenceRoom v-model="conferenceRoomVisible" titleValue="会议详情" />

  <!-- 音视频会议窗口 -->
  <MeetingView ref="refMeetingView" :update="updateItem"></MeetingView>

  <!-- 反馈弹窗 -->
  <FeedbackForm ref="feedbackFormRef" @success="getList" />

  <!-- 查看反馈弹窗 -->
  <ViewFeedback ref="viewFeedbackRef" />

  <Information v-model="showDialog" title="发送指令" @submit="seedFqzl" @close='close'>
    <SemdFqzl ref="semdFqzlRef" :itemData="itemData" @handleClose="handleClose" identification="meeting"
      :tacitly="tacitly" />
  </Information>

</template>

<script setup>
import MeetingView from '@/components/Consultation/demo.vue'
import { ElMessageBox } from "element-plus";
import * as MOSTY from "@/components/MyComponents/index";
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 RoomDetail from "./components/roomDetail.vue";
import FeedbackForm from "./components/FeedbackForm.vue";
import ViewFeedback from "./components/ViewFeedback.vue";
import { useRoute, useRouter } from 'vue-router';
import { qcckGet, qcckPost, qcckDelete } from "@/api/qcckApi.js";
import { reactive, ref, onMounted, getCurrentInstance, nextTick } from "vue";
import ConferenceRoom from "./components/Communications/conferenceRoom.vue";
import SemdFqzl from '@/components/instructionHasBeen/sendFqzl.vue'
import Information from "@/views/home/model/information.vue";

const router = useRouter();
const route = useRoute();
const { proxy } = getCurrentInstance();
const detailDiloag = ref();
const searchBox = ref(); //搜索框
const openMeeting = ref(false); // 打开会议窗口
const refMeetingView = ref()
const feedbackFormRef = ref() // 反馈弹窗引用
const viewFeedbackRef = ref() // 查看反馈弹窗引用
const semdFqzlRef = ref()
/** 发送指令Item */
const itemData = ref({})

/** 下发指令 */
const showDialog = ref(false)
const tacitly = {
  // title:'ryXm'
}

const searchConfiger = ref([
  {
    label: "会议主题",
    prop: "hsbt",
    placeholder: "请输入会议主题",
    showType: "input"
  },
  {
    label: "会议时间",
    prop: "daterange",
    showType: "datetimerange"
  },
]);
const comments = ref(''); // 评论内容
const queryFrom = ref({});
const pageData = reactive({
  list: [],
  loading: false,
  total: 0,
  pageConfiger: {
    pageSize: 20,
    pageCurrent: 1
  },
});
const jsonData = ref('')
/** 当前行数据 */
const currRow = ref({})

onMounted(() => {
  jsonData.value = require('@/components/Consultation/components/zh_CN.json');
  getList();
  tabHeightFn();
});

const updateItem = (item) => {
  qcckPost(item, '/mosty-gsxt/wshs/update').then(res => {
    getList();
  })
}

// 搜索
const onSearch = (val) => {
  queryFrom.value = { ...val };
  if (val.daterange && val.daterange.length > 0) {
    queryFrom.value.startTime = val.daterange[0];
    queryFrom.value.endTime = val.daterange[1];
  } else {
    delete queryFrom.value.startTime;
    delete queryFrom.value.endTime;
  }
  pageData.pageConfiger.pageCurrent = 1;
  getList();
};

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

// 获取列表
const getList = () => {
  pageData.loading = true;
  let data = { ...pageData.pageConfiger, ...queryFrom.value };
  delete data.daterange; // 删除daterange字段
  if (route.query.tsypid) data.tsypid = route.query.tsypid;
  qcckGet(data, '/mosty-gsxt/wshs/selectPage').then(res => {
    let arr = res.records || [];
    arr.forEach(item => {
      item.chry = item.chryList ? item.chryList.map(el => el.chryxm).join('、') : '';
      item.sjry = item.xsryList ? item.xsryList.map(el => el.xm).join('、') : '';
    });
    pageData.list = arr;
    pageData.total = res.total;
    pageData.loading = false;
  }).catch(() => { pageData.loading = false; })
};

// 提交评论
const handleSumbit = (item) => {
  if (!comments.value) return proxy.$message({ type: "warning", message: "评论内容不能为空" });
  proxy.$message({ type: "success", message: "评论已发送" });
  qcckPost({ id: item.id, plnr: comments.value }, '/mosty-gsxt/wshs/addWshyPl').then((res) => {
    getList();
    item.visible = false; // 关闭评论弹窗
    comments.value = ''; // 清空评论内容
  })
};
// 加入会议
const joinMeeting = (item, type) => {
  item.number = item.hybh;
  refMeetingView.value.openInit(item, type)
};
// 反馈情况
const feedBack = (item) => {
  feedbackFormRef.value.open(item.id);
};


// 查看反馈
const viewFeedback = (item) => {
  viewFeedbackRef.value.open(item.fkList || []);
};

// 删除
const delDictItem = (id) => {
  proxy.$confirm("确定要删除", "警告", { type: "warning" }).then(() => {
    qcckPost({ id }, '/mosty-gsxt/wshs/delete').then(() => {
      proxy.$message({ type: "success", message: "删除成功" });
      getList();
    })
  }).catch(() => { });
}

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

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


// 会议详情弹窗
const conferenceRoomVisible = ref(false);


const seedFqzl = () => {
  semdFqzlRef.value.getsendFqzl()
}

const handleClose = () => {
  showDialog.value = false;
}

// 处置下发
const disposeIssue = (item) => {
  showDialog.value = true;
  itemData.value = item

};
</script>

<style lang="scss" scoped>
.el-loading-mask {
  background: rgba(0, 0, 0, 0.5) !important;
}

.tabBox {
  .pageSearch {
    margin-bottom: 0 !important;

    .box {
      align-items: center !important;
    }
  }

  :deep(.pageSearch .box .item) {
    margin-bottom: 0 !important;
  }
}

.btns {
  padding: 10px 20px;
}

.list {
  height: calc(100% - 10px);
  gap: 10px;
  margin: 0 15px;
  overflow: auto;

  .list-item {
    display: inline-block;
    border: 1px solid #ccc;
    height: 296px;
    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;
      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: 80px;
      padding: 10px;
      box-sizing: border-box;
      overflow: hidden;
      overflow-y: auto;
    }

    .mid {
      border: 1px dashed rgb(124, 195, 253);
      border-left: 0;
      border-right: 0;
      padding: 10px 0;
      display: flex;
      justify-content: space-between;

      .left {
        width: calc(100% - 80px);

        .title {
          font-size: 14px;
          color: black;
          margin-bottom: 5px;
        }

        .info {
          font-size: 12px;
          color: #a5a1a1;
          line-height: 1.5;
        }
      }

      .right {
        width: 80px;

        .el-button+.el-button {
          margin-left: 0;
          margin-top: 5px;
        }
      }
    }

    .bottom {
      display: flex;
      justify-content: flex-end;

      :deep(.el-link--inner) {
        display: flex;
        align-items: center;
        gap: 2px;
      }
    }
  }
}
</style>