0828xx

src/layouts/page/index.vue

@@ -27,7 +27,7 @@
 </template>
 
 <script lang="ts">
-  import { computed, defineComponent, unref } from 'vue';
+  import { computed, defineComponent, unref, onMounted } from 'vue';
   import FrameLayout from '/@/layouts/iframe/index.vue';
   import { useRootSetting } from '/@/hooks/setting/useRootSetting';
   import { useTransitionSetting } from '/@/hooks/setting/useTransitionSetting';
@@ -35,6 +35,8 @@
   import { getTransitionName } from './transition';
   import { useMultipleTabStore } from '/@/store/modules/multipleTab';
   import { useAlarmNotify } from '/@/views/alarm/log/hook/useAlarmNotify';
+  import Tips from '/@/views/tips/index.vue';
+  import { createApp } from 'vue';
   export default defineComponent({
     name: 'PageLayout',
     components: { FrameLayout },
@@ -56,6 +58,12 @@
       });
 
       useAlarmNotify();
+      
+      onMounted(()=>{
+        const tips = createApp(Tips)
+        // 挂载消息提示组件
+        tips.mount('#tips-container')
+      })
 
       return {
         getTransitionName,

src/main.ts

@@ -4,7 +4,6 @@ import 'virtual:windi.css';
 // Register icon sprite
 import 'virtual:svg-icons-register';
 import App from './App.vue';
-import Tips from '/@/views/tips/index.vue';
 import { createApp } from 'vue';
 import { initAppConfigStore } from '/@/logics/initAppConfig';
 import { setupErrorHandle } from '/@/logics/error-handle';
@@ -59,10 +58,6 @@ async function bootstrap() {
   await router.isReady();
 
   app.mount('#app', true);
-
-  const tips = createApp(Tips)
-
-  tips.mount('#tips-container')
 }
 
 void bootstrap();

src/views/dataAdmin/dataAdmin/directoryManagement/index.vue

@@ -20,15 +20,16 @@
       <div class="left">
         <a-card class="box-card" body-style="{height:'100%'}">
           <a-input-search v-model:value="treeSearchValue" style="margin-bottom: 8px" placeholder="搜索关键字" />
-          <a-tree :tree-data="treeData" @select="select" :expandedKeys="expandedKeys"
+          <a-tree class="tree-list" :tree-data="treeData" @select="select" :expandedKeys="expandedKeys"
             :auto-expand-parent="autoExpandParent" @expand="onExpand">
-            <template #title="{ title }">
+            <template #title="{ title, selected }">
               <span v-if="title.indexOf(treeSearchValue) > -1">
                 {{ title.substr(0, title.indexOf(treeSearchValue)) }}
                 <span style="color: #f50">{{ treeSearchValue }}</span>
                 {{ title.substr(title.indexOf(treeSearchValue) + treeSearchValue.length) }}
               </span>
               <span v-else>{{ title }}</span>
+              <span class="del-btn" v-if="selected" @click="delTreeNode()">删除</span>
             </template>
           </a-tree>
         </a-card>
@@ -52,19 +53,16 @@
                 <a-col :span="15">
                   <a-row type="flex" justify="end">
                     <div class="btn" style="margin-right: 10px;">
-                      <a-button type="primary" @click="getTreeData">刷新</a-button>
+                      <a-button @click="addTreeChildNode">添加子节点</a-button>
                     </div>
                     <div class="btn" style="margin-right: 10px;">
-                      <a-button type="primary" @click="addTreeNode">添加根节点</a-button>
+                      <a-button type="primary" @click="addTreeNode">添加节点</a-button>
                     </div>
-                    <div class="btn" style="margin-right: 10px;">
-                      <a-button type="primary" @click="addTreeChildNode">添加子节点</a-button>
-                    </div>
-                    <div class="btn">
+                    <!-- <div class="btn">
                       <a-popconfirm title="确定删除该节点及其子节点？" @confirm="delTreeNode">
                         <a-button danger :disabled="!editBtuState">删除节点</a-button>
                       </a-popconfirm>
-                    </div>
+                    </div> -->
                   </a-row>
                 </a-col>
               </a-row>
@@ -308,7 +306,7 @@ export default defineComponent({
 
     // 点击树节点
     select(selectkey, { selectedNodes, node }) {
-      console.log(node.dataRef);
+      console.log(node);
       if (selectkey.length) {
         this.formState = {
           ...node.dataRef
@@ -358,7 +356,10 @@ export default defineComponent({
     },
 
     //删除节点
-    delTreeNode() {
+    delTreeNode(item) {
+      console.log();
+      this.recordsData.push(`删除节点：${this.formState.name}`)
+      // console.log(item);
       if (this.formState.id) {
         this.delIds = ''
         this.getChildrenIds(this.formState)
@@ -369,10 +370,10 @@ export default defineComponent({
         delNode(param).then(res => {
           if (res.result === "true") {
             message.success('删除成功');
-            this.recordsData.push(`删除节点：${this.formState.name}`)
             this.getTreeData();
           } else {
             message.error('删除失败');
+            this.recordsData.shift();
           }
         })
       } else {
@@ -483,7 +484,7 @@ export default defineComponent({
           2: JSON.stringify([editData, mvData])
         }
         updateNodeList(param).then(res => {
-          if (res.status==="0"){
+          if (res.status === "0") {
             message.success('修改成功')
             this.recordsData.push(`移动节点：${this.formState.name}`)
             this.searchCategory = [];
@@ -535,6 +536,19 @@ export default defineComponent({
     .left {
       height: calc(100% - 0px);
       width: 20%;
+
+      .tree-list {
+        ::v-deep .ant-tree-node-content-wrapper {
+          .del-btn {
+            position: absolute;
+            right: 10px;
+            font-family: Alibaba PuHuiTi 2.0;
+            font-size: 14px;
+            font-weight: normal;
+            color: #FF1A1A;
+          }
+        }
+      }
     }
 
     .right {
@@ -542,7 +556,7 @@ export default defineComponent({
       flex-direction: column; //设置主轴为y轴
       justify-content: flex-start; //子元素排列方式，
       align-items: center; //设置侧轴上子元素对齐方式
-      padding: 0 0 0 20px;
+      padding: 0 0 0 10px;
       height: calc(100% - 0px);
       width: 100%;
       // height: 50%;
@@ -554,9 +568,9 @@ export default defineComponent({
       .right-top {
         height: 50%;
         width: 100%;
-        margin-left: 1%;
+        margin-left: 10px;
         margin-right: 1%;
-        margin-bottom: 2%;
+        margin-bottom: 10px;
 
         .right-top-item {
           border-style: solid;

src/views/tips/index.vue

@@ -6,7 +6,11 @@
             <div class="top-navs">
                 <div class="btns">
                     <div class="btn" :class="{ 'clicked': item.code === currentBtn.code }" v-for="(item, index) in navBtns"
-                        :key="index" @click="handleBtnClick(item)">{{ item.name }}</div>
+                        :key="index" @click="handleBtnClick(item)">
+                        {{ item.name }}
+                        <div v-if="item.code === 'todo'">({{ todoData.length }})</div>
+                        <div v-if="item.code === 'message'">({{ msgData.length }})</div>
+                    </div>
                 </div>
                 <div class="close-btn" @click="ifShowTop = false"></div>
             </div>
@@ -16,8 +20,17 @@
                 <div class="tips-item" v-if="currentBtn.code !== 'todo'">
                     <div class="msg-list list" v-for="(item, index) in msgData" :key="index">
                         <div class="list-header">
-                            <div class="msg-icon"></div>
-                            <div class="title"></div>
+                            <div class="title">
+                                <div class="msg-icon"></div>
+                                {{ item.opt }}
+                            </div>
+                        </div>
+                        <div class="list-content">
+                            <div class="left-box">
+                                <div>审核人：{{ item.user }}</div>
+                                <div>时间：{{ item.time }}</div>
+                            </div>
+                            <div class="status" :class="[item.status === 1 ? 'passed' : 'nopassed']"></div>
                         </div>
                     </div>
                 </div>
@@ -25,9 +38,17 @@
                 <div class="tips-item" v-else>
                     <div class="todo-list list" v-for="(item, index) in todoData" :key="index">
                         <div class="list-header">
-                            <div class="title"></div>
+                            <div class="title">【{{ item.title }}】</div>
                             <div class="more-btn"></div>
                         </div>
+                        <div class="list-content">
+                            <div class="left-box">
+                                <div>{{ item.opt }}</div>
+                                <div>发起人：{{ item.user }}</div>
+                                <div>时间：{{ item.time }}</div>
+                            </div>
+                            <div class="status" :class="[item.status === 1 ? 'passed' : 'nopassed']"></div>
+                        </div>
                     </div>
                 </div>
             </div>
@@ -48,7 +69,7 @@ export default defineComponent({
     setup() {
         const navBtns = reactive([
             {
-                name: "待办信息",
+                name: `待办信息`,
                 code: "todo"
             },
             {
@@ -65,12 +86,121 @@ export default defineComponent({
             currentBtn.code = item.code
             currentBtn.name = item.name
         }
-        const todoData = reactive([1,2,3])
-        const msgData = reactive([1,2,3,4,5,6])
+        const todoData = reactive([
+            {
+                title: "资源申请",
+                opt: "xx地图资源授权申请",
+                status: 0,
+                user: "张某某",
+                time: "2023-07-06  14:30:00"
+            },
+            {
+                title: "资源申请",
+                opt: "xx地图资源授权申请",
+                status: 0,
+                user: "张某某",
+                time: "2023-07-06  14:30:00"
+            },
+            {
+                title: "资源申请",
+                opt: "xx地图资源授权申请",
+                status: 0,
+                user: "张某某",
+                time: "2023-07-06  14:30:00"
+            },
+            {
+                title: "资源申请",
+                opt: "xx地图资源授权申请",
+                status: 0,
+                user: "张某某",
+                time: "2023-07-06  14:30:00"
+            },
+            {
+                title: "资源申请",
+                opt: "xx地图资源授权申请",
+                status: 0,
+                user: "张某某",
+                time: "2023-07-06  14:30:00"
+            },
+            {
+                title: "资源申请",
+                opt: "xx地图资源授权申请",
+                status: 0,
+                user: "张某某",
+                time: "2023-07-06  14:30:00"
+            },
+            {
+                title: "资源申请",
+                opt: "xx地图资源授权申请",
+                status: 0,
+                user: "张某某",
+                time: "2023-07-06  14:30:00"
+            },
+            {
+                title: "资源申请",
+                opt: "xx地图资源授权申请",
+                status: 0,
+                user: "张某某",
+                time: "2023-07-06  14:30:00"
+            },
+            {
+                title: "资源申请",
+                opt: "xx地图资源授权申请",
+                status: 0,
+                user: "张某某",
+                time: "2023-07-06  14:30:00"
+            },
+            {
+                title: "资源申请",
+                opt: "xx地图资源授权申请",
+                status: 0,
+                user: "张某某",
+                time: "2023-07-06  14:30:00"
+            }
+        ])
+        const msgData = reactive([
+            {
+                title: "资源申请",
+                opt: "xx地图资源授权申请",
+                status: 1,
+                user: "张某某",
+                time: "2023-07-06  14:30:00"
+            },
+            {
+                title: "资源申请",
+                opt: "xx地图资源授权申请",
+                status: 1,
+                user: "张某某",
+                time: "2023-07-06  14:30:00"
+            },
+            {
+                title: "资源申请",
+                opt: "xx地图资源授权申请",
+                status: 1,
+                user: "张某某",
+                time: "2023-07-06  14:30:00"
+            },
+            {
+                title: "资源申请",
+                opt: "xx地图资源授权申请",
+                status: 1,
+                user: "张某某",
+                time: "2023-07-06  14:30:00"
+            },
+            {
+                title: "资源申请",
+                opt: "xx地图资源授权申请",
+                status: 1,
+                user: "张某某",
+                time: "2023-07-06  14:30:00"
+            }
+        ])
+
         const totalTipsNum = computed(() => {
             let totalNum = todoData.length + msgData.length
-            return totalNum <= 10 ? totalNum === 0 ? '' : totalNum : `10+`
+            return totalNum <= 99 ? totalNum === 0 ? '' : totalNum : `10+`
         })
+
         return {
             navBtns,
             currentBtn,
@@ -114,6 +244,7 @@ export default defineComponent({
                 display: flex;
 
                 .btn {
+                    display: flex;
                     margin-right: 32px;
                     width: 100px;
                     height: 50px;
@@ -157,29 +288,101 @@ export default defineComponent({
             width: 100%;
             height: calc(100% - 50px);
             overflow: auto;
-            &::-webkit-scrollbar{
+
+            &::-webkit-scrollbar {
                 width: 3px;
             }
-            &::-webkit-scrollbar-thumb{
+
+            &::-webkit-scrollbar-thumb {
                 border-radius: 2px;
                 background: #ccd5df;
             }
-            &::-webkit-scrollbar-track{
+
+            &::-webkit-scrollbar-track {
                 display: none;
             }
 
             .tips-item {
                 .list {
+                    padding: 0 12px 12px;
                     width: 100%;
                     height: 130px;
                     border-radius: 6px;
                     background: linear-gradient(252deg, rgba(238, 247, 255, 0.76) 0%, #EDEDED 100%);
                     margin-bottom: 10px;
 
-                    .list-header{
+                    .list-header {
+                        display: flex;
+                        justify-content: space-between;
+                        align-items: center;
                         width: 100%;
                         height: 40px;
                         border-bottom: 1px solid #dedede;
+
+                        .title {
+                            max-width: 70%;
+                            font-family: Source Han Sans CN;
+                            font-size: 16px;
+                            font-weight: 500;
+                            line-height: 40px;
+                            color: #333333;
+                        }
+
+                        .more-btn {
+                            width: 24px;
+                            height: 24px;
+                            background: url('/@/assets/images/goto.png') no-repeat;
+                            background-size: 100% 100%;
+                            cursor: pointer;
+                        }
+                    }
+
+                    .list-content {
+                        height: 89px;
+                        display: flex;
+                        justify-content: space-between;
+                        align-items: center;
+
+                        .left-box {
+                            height: 100%;
+                            display: flex;
+                            flex-direction: column;
+                            justify-content: space-evenly;
+                        }
+
+                        .status {
+                            width: 56px;
+                            height: 56px;
+                        }
+
+                        .passed {
+                            background: url('/@/assets/images/passed.png') no-repeat;
+                            background-size: 100% 100%;
+                        }
+
+                        .nopassed {
+                            background: url('/@/assets/images/no-passed.png') no-repeat;
+                            background-size: 100% 100%;
+                        }
+                    }
+                }
+
+                .msg-list {
+                    .list-header {
+
+
+                        .title {
+                            display: flex;
+                            align-items: center;
+
+                            .msg-icon {
+                                margin-right: 10px;
+                                width: 21px;
+                                height: 20px;
+                                background: url('/@/assets/images/tips.png') no-repeat;
+                                background-size: 100% 100%;
+                            }
+                        }
                     }
                 }
             }
@@ -216,5 +419,4 @@ export default defineComponent({
             line-height: 18.72px;
         }
     }
-}
-</style>
+}</style>