Initial commit

src/views/system/dashboard/components/count-user.vue

@@ -0,0 +1,80 @@
+<template>
+  <a-card :bordered="false" title="小组成员">
+    <template #extra>
+      <a-tooltip>
+        <template #title>邀请加入</template>
+        <UserAddOutlined @click="onShowQrcode" :style="{ fontSize: '18px' }" />
+      </a-tooltip>
+    </template>
+    <a-list
+      class="demo-loadmore-list"
+      item-layout="horizontal"
+      :data-source="list"
+    >
+      <template #renderItem="{ item }">
+        <a-list-item>
+          <template #actions>
+            <a-popover>
+              <template #content> 待处理 </template>
+              <a class="ele-text-danger">{{ item.pending }}</a>
+            </a-popover>
+            <a-popover>
+              <template #content> 本月已处理 </template>
+              <a class="ele-text-secondary">{{ item.month }}</a>
+            </a-popover>
+          </template>
+          <a-skeleton avatar :title="false" :loading="!!item.loading" active>
+            <a-list-item-meta>
+              <template #title>
+                {{ item.nickname }}
+              </template>
+              <template #avatar>
+                <a-avatar :src="item.avatar" />
+              </template>
+            </a-list-item-meta>
+          </a-skeleton>
+        </a-list-item>
+      </template>
+    </a-list>
+    <!-- 工单二维码 -->
+    <Qrcode v-model:visible="showQrcode" />
+  </a-card>
+</template>
+
+<script lang="ts" setup>
+  import { ref } from 'vue';
+  import { pageTaskCount } from '@/api/oa/task-count';
+  import { TaskCount } from '@/api/oa/task-count/model';
+  import { UserAddOutlined } from '@ant-design/icons-vue';
+  import Qrcode from './qrcode.vue';
+
+  const showQrcode = ref(false);
+  const list = ref<TaskCount[]>([]);
+
+  pageTaskCount({ limit: 10, roleCode: 'commander' }).then((res) => {
+    if (res) {
+      list.value = res?.list;
+    }
+  });
+
+  const onShowQrcode = () => {
+    showQrcode.value = true;
+  };
+</script>
+
+<style lang="less" scoped>
+  .monitor-evaluate-text {
+    width: 90px;
+    flex-shrink: 0;
+    white-space: nowrap;
+    opacity: 0.8;
+
+    & > .anticon {
+      font-size: 12px;
+      margin: 0 6px 0 8px;
+    }
+  }
+  /deep/.ant-list-item {
+    padding: 7px 0;
+  }
+</style>