场景联动

2023-04-28 17:37:34 +08:00
parent 5fecd74d59
commit e08ed33cd9
11 changed files with 1542 additions and 187 deletions
--- a/src/components/NotificationCenter/index.vue
+++ b/src/components/NotificationCenter/index.vue
@ -8,10 +8,7 @@
        width="320"
      >
        <template #reference>
-          <el-badge
-            :hidden="unreadCount === 0"
-            :value="unreadCount"
-          >
+          <el-badge :hidden="unreadCount === 0" :value="unreadCount">
            <el-icon class="notification-icon" @click="visible = !visible">
              <Bell />
            </el-icon>
@ -24,7 +21,7 @@
          <div class="notification-content">
            <div class="status-tab">
              <el-radio-group
-                v-model="status"
+                v-model="queryParams.status"
                class="ios-style-radio"
                size="small"
              >
@ -42,27 +39,23 @@
                {{ selectMulti ? "取消" : "选择" }}
              </el-button>
              <el-button
-                v-if="ids.length && status === 2"
+                v-if="ids.length && queryParams.status === 2"
                link
                size="small"
                type="danger"
                @click="deleteReadMsg"
-              >删除
+                >删除
              </el-button>
              <el-button
-                v-if="ids.length && status === 1"
+                v-if="ids.length && queryParams.status === 1"
                link
                size="small"
                type="danger"
                @click="markAsRead"
-              >标为已读
+                >标为已读
              </el-button>
-              <el-button
-                link
-                size="small"
-                type="primary"
-                @click="refreshList"
-              >刷新
+              <el-button link size="small" type="primary" @click="refreshList"
+                >刷新
              </el-button>
            </div>
            <el-scrollbar class="notification-list" height="480">
@ -85,9 +78,11 @@
                      @click="openMsgDetail(item)"
                    >
                      <span class="notification-title">{{
-                          item.msgTitle
-                        }}</span>
-                      <span class="notification-time">{{ dayjs(item.sendTime).format("YYYY-MM-DD HH:mm:ss") }}</span>
+                        item.msgTitle
+                      }}</span>
+                      <span class="notification-time">{{
+                        dayjs(item.sendTime).format("YYYY-MM-DD HH:mm:ss")
+                      }}</span>
                    </div>
                  </div>
                </template>
@ -116,8 +111,7 @@
      <!--      </template>-->
      {{ msgDetail.msgContent }}
    </el-dialog>
-    <el-dialog v-model="showOfflineNotice"
-               title="下线通知"></el-dialog>
+    <el-dialog v-model="showOfflineNotice" title="下线通知"></el-dialog>
  </div>
 </template>

@ -146,9 +140,9 @@ const data = reactive({
  queryParams: {
    pageNum: 1,
    pageSize: 10,
-    status: 1
+    status: 1,
  },
-  msgDetail: {}
+  msgDetail: {},
 });
 const router = useRouter();
 const loadKey = ref(0);
@ -166,36 +160,26 @@ const ids = ref([]); //选中的列表
 const refreshList = () => {
  ids.value = [];
  selectMulti.value = false;
-  queryParams.value.status = status.value;
  queryParams.value.pageNum = 1;
-  // if (status.value === 2) {
  notificationList.value = [];
-  // }
  loadKey.value += 1;
 };
-watch(status, (value) => {
-  ids.value = [];
-  selectMulti.value = false;
-  queryParams.value.status = value;
-  queryParams.value.pageNum = 1;
-  // if (value === 2) {
-  notificationList.value = [];
-  // }
-  loadKey.value += 1;
-});
+
+watch(
+  () => queryParams.value.status,
+  (value) => {
+    ids.value = [];
+    selectMulti.value = false;
+    queryParams.value.pageNum = 1;
+    notificationList.value = [];
+    loadKey.value += 1;
+  }
+);
 const loadMore = async ($state) => {
-  // console.log($state);
  try {
    loading.value = true;
    const resp = await listMsg(queryParams.value);
-    // if (queryParams.value.status === 0) {
-    //   notificationStore.pushItems(resp.rows);
-    // } else if (queryParams.value.status === 2) {
    notificationList.value.push(...resp.rows);
-    // }
-    // queryParams.value.status === 0 &&
-    // resp.rows.length &&
-    // updateMsg(resp.rows.map((el) => el.msgId).join(","), 1);
    total.value = resp.total;
    if (queryParams.value.status === 1) {
      unreadCount.value = resp.total;
@ -232,9 +216,6 @@ const deleteReadMsg = async () => {
 const markAsRead = async () => {
  await updateMsg(ids.value.join(","), 2);
  refreshList();
-  /*  for (const id of ids.value) {
-      notificationStore.removeItem(id);
-    }*/
  ids.value = [];
  selectMulti.value = false;
 };
@ -256,55 +237,40 @@ function logout() {
    cancelButtonText: "取消",
    showCancelButton: false,
    showClose: false,
-    type: "warning"
+    type: "warning",
  })
    .then(() => {
      userStore.logOut().then(() => {
        location.href = "/index";
-        // router.go("/index")
      });
    })
    .catch(() => {
      userStore.logOut().then(() => {
        location.href = "/index";
-        // router.go("/index")
      });
    });
 }

 watch(visible, (value) => {
  if (value) {
+    /*当打开通知弹窗时*/
    notificationList.value = [];
    queryParams.value.pageNum = 1;
    queryParams.value.status = 1;
-    status.value = 1;
    loadKey.value++;
  }
 });

-
+/*获取未读数量*/
 const getUnreadCount = async () => {
-  // loading.value = true;
-  // notificationList.value = [];
-  // queryParams.value.pageNum = 1;
-  // queryParams.value.status = 1;
-  // status.value = 1;
  const resp = await listMsg({
-    pageSize: 10, pageNum: 1, status: 1
+    pageSize: 10,
+    pageNum: 1,
+    status: 1,
  });
-  // if (queryParams.value.status === 0) {
-  //   notificationStore.pushItems(resp.rows);
-  // } else if (queryParams.value.status === 2) {
-
-  // notificationList.value.push(...resp.rows);
-  // }
-  // queryParams.value.status === 0 &&
-  // resp.rows.length &&
-  // updateMsg(resp.rows.map((el) => el.msgId).join(","), 1);
  unreadCount.value = resp.total;
-  // queryParams.value.pageNum++;
-  // loading.value = false;
 };
+
 onMounted(() => {
  getUnreadCount();
  if (userStore.userId) {
@ -337,20 +303,12 @@ onMounted(() => {
      console.log(event.data);
      const wsData = JSON.parse(event.data);
      if (wsData.type === "msg") {
-        // if (visible.value) {
-        //   refreshList();
-        // } else {
        if (visible.value && queryParams.value.status === 1) {
          refreshList();
        } else {
          getUnreadCount();
        }
-        // }
-        // const msg = wsData.data;
-        // updateMsg(msg.msgId, 1);
-        // notificationStore.pushItem(msg);
      } else if (wsData.type === "offline") {
-        // showOfflineNotice.value = true;
        logout();
      }
    });
@ -396,7 +354,6 @@ onMounted(() => {
    margin-top: 16px;

    .notification-item {
-
      display: flex;
      align-items: center;
      justify-content: space-between;
@ -449,7 +406,6 @@ onMounted(() => {

      &:last-child {
        border-bottom: 1px solid #eeefef;
-
      }
    }
  }
--- a/src/components/TableSelect/index.vue
+++ b/src/components/TableSelect/index.vue
@ -11,6 +11,7 @@
        v-loading="loading"
        :data="dataList"
        @select="handleSelect"
+        @row-click="handleRowClick"
        @select-all="handleSelectAll"
      >
        <el-table-column
@ -53,8 +54,8 @@
    <template #footer>
      <div class="dialog-footer">
        <el-button v-if="!readonly" type="primary" @click="confirmSelect"
-          >确认</el-button
-        >
+          >确认
+        </el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </template>
@ -62,7 +63,7 @@
 </template>

 <script name="TableSelect" setup>
-import { nextTick, reactive, ref, toRefs, watchEffect } from "vue";
+import { nextTick, onMounted, reactive, ref, toRefs, watchEffect } from "vue";
 import { cloneDeep } from "lodash-es";
 import Pagination from "@/components/Pagination/index.vue";

@ -75,6 +76,14 @@ const props = defineProps({
    type: Array,
    default: [],
  },
+  multiple: {
+    type: Boolean,
+    default: true,
+  },
+  multiPage: {
+    type: Boolean,
+    default: true,
+  },
  readonly: {
    type: Boolean,
    default: false,
@ -90,7 +99,7 @@ const props = defineProps({
    type: Boolean,
  },
 });
-const { list } = toRefs(props);
+const { list, multiple } = toRefs(props);

 const emit = defineEmits(["update:modelValue", "confirm-select"]);

@ -102,8 +111,8 @@ const selectedProperties = ref([]);
 const ids = ref([]);
 const data = reactive({
  queryParams: {
-    pageNum: 1,
-    pageSize: 10,
+    pageNum: props.multiPage ? 1 : null,
+    pageSize: props.multiPage ? 10 : null,
  },
 });

@ -135,19 +144,35 @@ const cancel = () => {
  selectedProperties.value = [];
  emit("update:modelValue", false);
 };
+const handleSelectChange = (selection) => {};

+const handleRowClick = (row, _, event) => {
+  event.target?.parentNode?.parentNode?.firstElementChild?.firstElementChild?.firstElementChild?.click();
+};
 /*监听单选事件*/
 const handleSelect = (selection, row) => {
  const isCheck =
    selection.findIndex((el) => el[props.selectKey] === row[props.selectKey]) >
-    -1;
+    -1; /* 是否将行切换为选中状态 */
  if (isCheck) {
+    /*如果是单选状态 multiple 为false */
+    if (!multiple.value) {
+      // nextTick(() => {
+      selectedProperties.value = [];
+      selection.forEach((el) => {
+        if (el[props.selectKey] !== row[props.selectKey]) {
+          tableRef.value.toggleRowSelection(el, false);
+        }
+      });
+      // });
+    }
    /*添加选中*/
    const isIdNotExist =
      selectedProperties.value.findIndex(
        (el) => el[props.selectKey] === row[props.selectKey]
      ) === -1;
    if (isIdNotExist) {
+      console.log(isIdNotExist);
      selectedProperties.value.push(row);
    }
  } else {
@ -205,13 +230,24 @@ const confirmSelect = () => {
 defineExpose({
  getList,
 });
+
+onMounted(() => {
+  document.documentElement.style.setProperty(
+    "--show-select-all",
+    multiple.value ? "visible" : "hidden"
+  );
+  document.documentElement.style.setProperty(
+    "--checkbox-round",
+    multiple.value ? "inherit" : "50%"
+  );
+});
 </script>

 <style lang="scss" scoped>
 :deep(.el-table__header) {
  .el-table-column--selection {
    .el-checkbox {
-      //visibility: hidden;
+      visibility: var(--show-select-all);
    }
  }
 }