feature/message界面

src/components/RealTimeMsg/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="body">
+  <div class="body" v-if="status">
     <div :class="showStatus ? 'content noneContent' : 'content haveContnet'">
       <div class="headerTittle titleText">通知确认</div>
       <el-scrollbar class="itemScrollbar">
@@ -49,6 +49,8 @@ const porps = defineProps({
     default: false,
   },
 });
+const status = ref(true);
+const route = useRoute();
 //true关闭 false打开
 const showStatus = ref(true);
 const messages = ref([]);
@@ -88,6 +90,18 @@ const changePop = () => {
 ws.onclose = () => {
   console.log("实时连接断开");
 };
+
+watch(
+  () => route,
+  () => {
+    if (route.name == "MessageMain") {
+      status.value = false;
+    }
+  },
+  {
+    immediate: true,
+  }
+);
 </script>
 <style scoped lang="scss">
 .body {

src/router/modules/message.ts

@@ -0,0 +1,19 @@
+const Layout = () => import("@/layout/index.vue");
+
+export default {
+  path: "/message",
+  name: "message",
+  component: Layout,
+  redirect: "/message/main",
+  children: [
+    {
+      path: "main",
+      component: () => import("@/views/message/index.vue"),
+      name: "MessageMain",
+      meta: {
+        title: "消息",
+        icon: "homepage",
+      },
+    },
+  ],
+};

src/views/message/index.vue

@@ -0,0 +1,204 @@
+<template>
+  <div class="mainContentBox">
+    <div class="headers" style="font-size: 40px">
+      <img
+        src="/logo.png"
+        object-fit="cover"
+        width="80px"
+        height="80px"
+        style="margin-right: 20px"
+      />消息中心
+    </div>
+    <div class="body">
+      <div class="left">
+        <div class="headers">未读消息（20条）</div>
+        <el-scrollbar class="msgs">
+          <div class="item" v-for="items in 16">
+            <div class="text"></div>
+            <div class="action">
+              <el-button type="success" @click="submit" class="btn"
+                >确认收到</el-button
+              >
+            </div>
+          </div>
+        </el-scrollbar>
+        <div class="bottomBtn">
+          <el-button
+            type="primary"
+            :disabled="setNextStatus1"
+            @click="setPage1(1)"
+            class="btn"
+            >下一页</el-button
+          >
+          <el-button
+            class="btn"
+            :disabled="page == 1"
+            type="primary"
+            @click="setPage1(-1)"
+          >
+            上一页
+          </el-button>
+        </div>
+      </div>
+      <div class="right">
+        <div class="headers">已读消息（20条）</div>
+        <el-scrollbar class="msgs">
+          <div class="item" style="overflow: hidden" v-for="items in 16">
+            <div
+              class="text"
+              style="background-color: rgba(0, 128, 0, 0.5)"
+            ></div>
+          </div>
+        </el-scrollbar>
+        <div class="bottomBtn">
+          <el-button
+            type="primary"
+            :disabled="setNextStatus2"
+            @click="setPage2(1)"
+            class="btn"
+            >下一页</el-button
+          >
+          <el-button
+            class="btn"
+            :disabled="page == 1"
+            type="primary"
+            @click="setPage2(-1)"
+          >
+            上一页
+          </el-button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+defineOptions({ name: "MessageMain" });
+const page1 = ref(1);
+const pageSize1 = ref(5);
+const msgData1 = ref([]);
+const totalCount1 = ref(0);
+const page2 = ref(1);
+const pageSize2 = ref(5);
+const msgData2 = ref([]);
+const totalCount2 = ref(0);
+const getPageInfo1 = async () => {
+  const { data, code } = await userMessage({
+    pageNo: page1.value,
+    pageSize: pageSize1.value,
+  });
+  if (code == "200") {
+    msgData1.value = data.records;
+    totalCount1.value = data.totalCount;
+  }
+};
+const getPageInfo2 = async () => {
+  const { data, code } = await userMessage({
+    pageNo: page2.value,
+    pageSize: pageSize2.value,
+  });
+  if (code == "200") {
+    msgData2.value = data.records;
+    totalCount2.value = data.totalCount;
+  }
+};
+const setNextStatus1 = computed(() => {
+  return totalCount1.value - page1.value * pageSize1.value > 0 ? false : true;
+});
+const setNextStatus2 = computed(() => {
+  return totalCount2.value - page2.value * pageSize2.value > 0 ? false : true;
+});
+const setPage1 = (num) => {
+  page1.value = page1.value + num;
+  getPageInfo1();
+};
+const setPage2 = (num) => {
+  page2.value = page2.value + num;
+  getPageInfo2();
+};
+const reset1 = () => {
+  page1.value = 0;
+  msgData1.value = [];
+  totalCount1.value = 0;
+};
+const reset2 = () => {
+  page2.value = 0;
+  msgData2.value = [];
+  totalCount2.value = 0;
+};
+</script>
+
+<style lang="scss" scoped>
+.bottomBtn {
+  display: flex;
+  justify-content: space-evenly;
+  align-items: center;
+  height: 40px;
+  padding: 0 10px;
+  margin-top: 10px;
+
+  .btn {
+    font-size: $f20;
+    font-weight: 500;
+  }
+}
+.headers {
+  height: 80px;
+  width: 100%;
+  line-height: 80px;
+  text-align: center;
+  font-weight: 600;
+  font-size: 26px;
+  display: flex;
+  justify-content: center;
+}
+.mainContentBox {
+  width: 100vw;
+  display: flex;
+  flex-direction: column;
+  height: calc(100vh - 100px);
+  .body {
+    height: calc(100vh - 164px);
+    display: flex;
+
+    .left {
+      width: 50%;
+      margin: 0 10px;
+      display: flex;
+      flex-direction: column;
+    }
+    .right {
+      width: 50%;
+      margin: 0 10px;
+      display: flex;
+      flex-direction: column;
+    }
+  }
+}
+.msgs {
+  flex: 1;
+  background-color: white;
+  border-radius: 16px;
+  padding: 10px;
+  .item {
+    min-height: 60px;
+    margin-bottom: 8px;
+    width: 100%;
+    background-color: rgba(255, 165, 0, 0.4);
+    border-radius: 16px;
+    display: flex;
+    .text {
+      flex: 1;
+      padding: 10px;
+      font-size: 16px;
+      font-weight: 500;
+    }
+    .action {
+      width: 100px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+  }
+}
+</style>

src/views/pro-steps/components/excel.vue

@@ -1,256 +0,0 @@
-<template>
-  <div v-if="!excelViewStatus">
-    <el-table :data="tableData" class="tableView">
-      <el-table-column fixed prop="formName" label="表格名称" align="center" />
-      <el-table-column prop="formType" label="表格类型" align="center">
-        <template #default="scope">
-          {{ dictS.getLableByValue("excel_type", scope.row.formType) }}
-        </template>
-      </el-table-column>
-      <el-table-column prop="writeData" align="center" label="是否已填报">
-        <template #default="scope">
-          <span
-            :class="{
-              'red-text': scope.row.writeData === '',
-              'green-text': scope.row.writeData !== '',
-            }"
-          >
-            {{ scope.row.writeData === "" ? "否" : "是" }}
-          </span>
-        </template>
-      </el-table-column>
-      <el-table-column label="操作" fixed="right" width="200">
-        <template #default="scope">
-          <el-button
-            link
-            v-if="scope.row.writeData !== ''"
-            class="btnText"
-            type="primary"
-            @click="handleLook(scope.row)"
-          >
-            查看
-          </el-button>
-          <el-button
-            link
-            class="btnText"
-            type="primary"
-            @click="handleEdit(scope.row)"
-          >
-            编辑
-          </el-button>
-
-          <el-popconfirm
-            v-if="scope.row.writeData !== ''"
-            :visible="scope.row.dialogVisible"
-            title="您确认重置吗？（重置此操作不可逆）"
-            width="200"
-            @cancel="scope.row.dialogVisible = false"
-            @confirm="reset(scope.row)"
-          >
-            <el-button> 取消 </el-button>
-            <el-button type="primary"> 确认 </el-button>
-            <template #reference>
-              <el-button
-                link
-                class="btnText"
-                type="primary"
-                @click="scope.row.dialogVisible = true"
-                >重置</el-button
-              >
-            </template>
-          </el-popconfirm>
-        </template>
-      </el-table-column>
-    </el-table>
-  </div>
-  <div class="excelView" v-else>
-    <div class="view">
-      <ExcelView
-        v-model:data="excelData"
-        :option="excelOptions"
-        ref="excelViewRef"
-        :checkStatus="true"
-        :verifications="setting"
-      />
-    </div>
-    <div class="opeara">
-      <div>
-        <el-button
-          v-if="excelOptions.edit"
-          type="primary"
-          class="btn"
-          @click="submitData"
-          >提交</el-button
-        >
-        <el-button class="btn" @click="resetData">{{
-          excelOptions.edit ? "取消" : "返回"
-        }}</el-button>
-      </div>
-    </div>
-  </div>
-</template>
-<script setup>
-defineOptions({
-  name: "Excel",
-});
-import { getExcelData, setExcelData } from "@/api/prosteps/excel";
-import { useProcessStore } from "@/store";
-import { useDictionaryStore } from "@/store";
-const setting = ref([]);
-const dictS = useDictionaryStore();
-const store = useProcessStore();
-const tableData = ref([]);
-const dataList = async () => {
-  const { data } = await getExcelData(store.scanInfo.id);
-  tableData.value = data;
-};
-const useExcelHook = () => {
-  const excelViewStatus = ref(false);
-  const excelData = ref(null);
-  const excelViewRef = ref(null);
-  const excelSelectRow = ref(null);
-  const excelOptions = ref({
-    opreaState: true,
-    in: true,
-    out: true,
-    print: true,
-    edit: true,
-    inName: "",
-  });
-  const resetData = () => {
-    if (excelViewRef.value) {
-      excelViewRef.value.saveCellData();
-      excelViewRef.value.reset();
-    }
-    excelViewStatus.value = false;
-    excelData.value = null;
-    excelSelectRow.value = null;
-    excelOptions.value = {
-      opreaState: true,
-      in: true,
-      out: true,
-      print: true,
-      edit: true,
-      inName: "",
-    };
-  };
-  const reset = async (row) => {
-    excelData.value = "";
-    const { data, code } = await setExcelData({
-      excelData: excelData.value,
-      formName: row.formName,
-      excelFormId: row.excelFormId,
-      formType: row.formType,
-      processId: store.scanInfo.id,
-    });
-    if (code == "200") {
-      ElMessage.success("操作成功！");
-      row.dialogVisible = false;
-      resetData();
-      dataList();
-    }
-  };
-  const handleEdit = (row) => {
-    excelSelectRow.value = row;
-    if (row.writeData == "") {
-      excelData.value = JSON.parse(row.excelData);
-    } else {
-      excelData.value = JSON.parse(row.writeData);
-    }
-    excelOptions.value.inName = row.formName;
-    excelViewStatus.value = true;
-    setting.value = row.settings;
-  };
-  const handleLook = (row) => {
-    excelOptions.value.edit = false;
-    excelData.value = JSON.parse(row.writeData);
-    excelOptions.value.inName = row.formName;
-    excelViewStatus.value = true;
-  };
-  const submitData = async () => {
-    excelData.value = excelViewRef.value.getData();
-    const { data, code } = await setExcelData({
-      excelData: excelData.value,
-      excelFormId: excelSelectRow.value.excelFormId,
-      formName: excelSelectRow.value.formName,
-      formType: excelSelectRow.value.formType,
-      processId: store.scanInfo.id,
-    });
-    if (code == "200") {
-      ElMessage.success("操作成功！");
-      resetData();
-      dataList();
-    }
-  };
-  return {
-    excelViewStatus,
-    excelOptions,
-    excelData,
-    excelViewRef,
-    resetData,
-    handleEdit,
-    submitData,
-    handleLook,
-    reset,
-  };
-};
-const {
-  excelViewStatus,
-  excelOptions,
-  excelData,
-  excelViewRef,
-  resetData,
-  handleEdit,
-  submitData,
-  handleLook,
-  reset,
-} = useExcelHook();
-onMounted(() => {
-  dataList();
-});
-</script>
-<style lang="scss" scoped>
-.btnText {
-  font-size: $f20;
-  color: black;
-}
-.excelView {
-  width: 100%;
-  height: calc(100vh - 260px);
-  padding: 20px;
-  display: flex;
-  background-color: white;
-  border-radius: 16px;
-  .view {
-    position: relative;
-    flex: 1;
-    height: calc(100vh - 300px);
-  }
-  .opeara {
-    width: 200px;
-    height: 100%;
-    padding: 10px;
-    display: flex;
-    align-items: center;
-  }
-}
-.tableView {
-  width: 100%;
-  height: calc(100vh - 260px);
-  padding: 20px 0px;
-  border-radius: 16px;
-}
-.btn {
-  width: 180px;
-  border-radius: 16px;
-  height: 40px;
-  font-size: 16px;
-  margin: 10px 0;
-}
-.red-text {
-  color: red;
-}
-.green-text {
-  color: green;
-}
-</style>