更新会议

src/views/backOfficeSystem/MeetingRoom/index.vue

@@ -1,29 +1,27 @@
 <template>
   <div class="titleBox">
-    <PageTitle title="网上会议室" />
+    <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" :key="pageData.keyCount" />
+    <Search :searchArr="searchConfiger" @submit="onSearch" />
   </div>
   <!-- 表格 -->
   <div class="tabBox">
-    <div class="flexcb">
-      <div class="btns">
-        <el-button type="primary">新增</el-button>
-        <el-button type="danger">删除</el-button>
-      </div>
-      <Search :searchArr="searchArrMeet" @submit="onSearch" :key="pageData.keyCount + 1" class="search" />
-    </div>
-
-    <div class="list noScollLine">
-      <div class="list-item" v-for="(item, index) in pageData.tableData" :key="`tableData${index}`" @onmouseover="">
+    <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.title }}</div>
-          <div class="info h20 ellipsis">会商内容：{{ item.hynr }}</div>
-          <div class="info h20 ellipsis">关联线索：{{ item.lxxs }}</div>
+          <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">会商处置意见：xxxxxxx线索</div>
+          <div class="info h20 ellipsis">会商处置意见：{{ item.czyj }}</div>
+          <div class="info h20 ellipsis">会议时间：{{ item.hskssj }} - {{ item.hsjssj }}</div>
         </div>
 
         <div class="mid">
@@ -31,25 +29,32 @@
             <div class="title ellipsis">参会人员：{{ item.chry }}</div>
             <div class="desc">
               <div class="info ellipsis" v-for="(el, i) in item.cqcs" :key="i">{{ 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" @click="joinMeeting(item)">加入会议</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-icon><ChatDotSquare /></el-icon>评论</el-link>
-          <el-link type="primary"><el-icon><VideoPlay /></el-icon>会议回放</el-link>
-          <el-link type="primary"><el-icon><Edit /></el-icon>详情</el-link>
-          <el-link type="danger"><el-icon><Delete /></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>
-      </div>
-    </div>
-
+      </li>
+       <MOSTY.Empty :show="!pageData.loading && pageData.list.length <= 0"></MOSTY.Empty>
+    </ul>
     <Pages
       @changeNo="changeNo"
       @changeSize="changeSize"
@@ -61,10 +66,11 @@
     ></Pages>
   </div>
   <!-- 详情 -->
-  <DetailForm ref="detailDiloag" />
+  <DetailForm ref="detailDiloag" @updateDate="getList" />
 </template>
 
 <script setup>
+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";
@@ -78,134 +84,26 @@
   const searchConfiger = ref([
     {
       label: "会议主题",
-      prop: "businessNo",
+      prop: "hsbt",
       placeholder: "请输入会议主题",
       showType: "input"
     },
     {
-      label: "关联线索",
-      prop: "goodsName",
-      placeholder: "请选择关联线索",
-      showType: "select"
+      label: "会议时间",
+      prop: "daterange",
+      showType: "datetimerange"
     },
-    {
-      label: "涉及人员",
-      prop: "businessNo",
-      placeholder: "请输入涉及人员",
-      showType: "input"
-    },
-    {
-      label: "会议内容",
-      prop: "businessNo",
-      placeholder: "请输入会议内容",
-      showType: "input"
-    }
   ]);
-  const searchArrMeet = ref([
-    {
-      label: "",
-      prop: "title",
-      placeholder: "请输入关键字",
-      showType: "input"
-    }
-  ]);
-
+  const comments = ref(''); // 评论内容
   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
-    },
+    list: [],
+    loading: false,
     total: 0,
     pageConfiger: {
       pageSize: 20,
       pageCurrent: 1
     },
-    controlsWidth: 120
   });
 
   onMounted(() => {
@@ -214,36 +112,77 @@
   });
 
   // 搜索
-  const onSearch = val => {
+  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 {
+      queryFrom.value.startTime = '';
+      queryFrom.value.endTime = '';
+    }
     pageData.pageConfiger.pageCurrent = 1;
     getList();
   };
 
-  const changeNo = val => {
+  const changeNo = (val) => {
     pageData.pageConfiger.pageNum = val;
     getList();
   };
-  const changeSize = val => {
+  const changeSize = (val) => {
     pageData.pageConfiger.pageSize = val;
     getList();
   };
 
   // 获取列表
-  const getList = val => {
-    // pageData.tableConfiger.loading = true;
+  const getList = () => {
+    pageData.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; })
+    delete data.daterange; // 删除daterange字段
+    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: "评论内容不能为空" });
+    }
+    item.visible = false; // 关闭评论弹窗
+    // 这里可以添加评论提交的逻辑
+    proxy.$message({ type: "success", message: "评论已发送" });
+    comments.value = ''; // 清空评论内容
+  };
+  const joinMeeting = (item) => {
+    qcckPost({id:item.id},'/mosty-gsxt/wshs/addWshyRy').then((res)=>{
+      console.log(res);
+    })
+    // proxy.$message({
+    //   type: "info",
+    //   message: `加入会议：${item.hsbt}`,
+    // });
+  };
+
+  // 删除
+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);
+    detailDiloag.value.init(type, row);
   };
 
   // 表格高度计算
@@ -274,15 +213,14 @@
     padding: 10px 20px;
   }
   .list {
-    height: calc(100% - 62px);
-
+    height: calc(100% - 40px);
     gap: 10px;
     margin: 0 15px;
     overflow: auto;
     .list-item {
       display: inline-block;
       border: 1px solid #ccc;
-      height: 254px;
+      height: 270px;
       width: 380px;
       box-sizing: border-box;
       border-radius: 5px;
@@ -324,6 +262,19 @@
         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;