feat: 用户管理优化

7c653fd3 · qinjianhui · 911d453d · 7c653fd3 · 7c653fd3 · 7c653fd3
Commit 7c653fd3 authored Mar 25, 2024 by qinjianhui
11 changed files
--- a/components.d.ts
+++ b/components.d.ts
@@ -9,7 +9,6 @@ declare module 'vue' {
  export interface GlobalComponents {
    ElButton: typeof import('element-plus/es')['ElButton']
    ElCheckbox: typeof import('element-plus/es')['ElCheckbox']
-    ElCheckboxGroup: typeof import('element-plus/es')['ElCheckboxGroup']
    ElCol: typeof import('element-plus/es')['ElCol']
    ElConfigProvider: typeof import('element-plus/es')['ElConfigProvider']
    ElDialog: typeof import('element-plus/es')['ElDialog']
@@ -29,9 +28,11 @@ declare module 'vue' {
    ElRow: typeof import('element-plus/es')['ElRow']
    ElSelect: typeof import('element-plus/es')['ElSelect']
    ElSubMenu: typeof import('element-plus/es')['ElSubMenu']
+    ElSwitch: typeof import('element-plus/es')['ElSwitch']
    ElTable: typeof import('element-plus/es')['ElTable']
    ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
    ElTag: typeof import('element-plus/es')['ElTag']
+    ElTooltip: typeof import('element-plus/es')['ElTooltip']
    Icon: typeof import('./src/components/Icon.vue')['default']
    ImageView: typeof import('./src/components/ImageView.vue')['default']
    LogList: typeof import('./src/components/LogList.vue')['default']

--- a/public/iconfont/demo_index.html
+++ b/public/iconfont/demo_index.html
@@ -55,6 +55,12 @@
          <ul class="icon_lists dib-box">
            <li class="dib">
+              <span class="icon iconfont">&#xe64a;</span>
+                <div class="name">超级管理员</div>
+                <div class="code-name">&amp;#xe64a;</div>
+              </li>
+            <li class="dib">
              <span class="icon iconfont">&#xe622;</span>
                <div class="name">喇叭</div>
                <div class="code-name">&amp;#xe622;</div>
@@ -78,9 +84,9 @@
 <pre><code class="language-css"
 >@font-face {
  font-family: 'iconfont';
-  src: url('iconfont.woff2?t=1710211601146') format('woff2'),
+  src: url('iconfont.woff2?t=1711355340676') format('woff2'),
-       url('iconfont.woff?t=1710211601146') format('woff'),
+       url('iconfont.woff?t=1711355340676') format('woff'),
-       url('iconfont.ttf?t=1710211601146') format('truetype');
+       url('iconfont.ttf?t=1711355340676') format('truetype');
 }
 </code></pre>
          <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
@@ -107,6 +113,15 @@
        <ul class="icon_lists dib-box">
          <li class="dib">
+            <span class="icon iconfont icon-zu54"></span>
+            <div class="name">
+              超级管理员
+            </div>
+            <div class="code-name">.icon-zu54
+            </div>
+          </li>
+          <li class="dib">
            <span class="icon iconfont icon-a-2labadianji3x"></span>
            <div class="name">
              喇叭
@@ -144,6 +159,14 @@
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-zu54"></use>
+                </svg>
+                <div class="name">超级管理员</div>
+                <div class="code-name">#icon-zu54</div>
+            </li>
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-a-2labadianji3x"></use>
                </svg>
                <div class="name">喇叭</div>

--- a/public/iconfont/iconfont.css
+++ b/public/iconfont/iconfont.css
 @font-face {
  font-family: "iconfont"; /* Project id 4462827 */
-  src: url('iconfont.woff2?t=1710211601146') format('woff2'),
+  src: url('iconfont.woff2?t=1711355340676') format('woff2'),
-       url('iconfont.woff?t=1710211601146') format('woff'),
+       url('iconfont.woff?t=1711355340676') format('woff'),
-       url('iconfont.ttf?t=1710211601146') format('truetype');
+       url('iconfont.ttf?t=1711355340676') format('truetype');
 }
 .iconfont {
@@ -13,6 +13,10 @@
  -moz-osx-font-smoothing: grayscale;
 }
+.icon-zu54:before {
+  content: "\e64a";
+}
 .icon-a-2labadianji3x:before {
  content: "\e622";
 }

--- a/public/iconfont/iconfont.js
+++ b/public/iconfont/iconfont.js
-window._iconfont_svg_string_4462827='<svg><symbol id="icon-a-2labadianji3x" viewBox="0 0 1024 1024"><path d="M752 416a16 16 0 0 1 16 16v160a16 16 0 1 1-32 0v-160a16 16 0 0 1 16-16z m64-32a16 16 0 0 1 16 16v224a16 16 0 1 1-32 0v-224a16 16 0 0 1 16-16z m64-32a16 16 0 0 1 16 16v288a16 16 0 1 1-32 0v-288a16 16 0 0 1 16-16z m-220.864-134.176A64 64 0 0 1 672 256.32v513.76a64 64 0 0 1-101.728 51.712L321.152 640H192a64 64 0 0 1-64-64v-128a64 64 0 0 1 64-64h140.096l237.408-178.784a64 64 0 0 1 89.6 12.608z" fill="#2875FF" ></path></symbol></svg>',function(n){var t=(t=document.getElementsByTagName("script"))[t.length-1],e=t.getAttribute("data-injectcss"),t=t.getAttribute("data-disable-injectsvg");if(!t){var i,o,a,d,c,s=function(t,e){e.parentNode.insertBefore(t,e)};if(e&&!n.__iconfont__svg__cssinject__){n.__iconfont__svg__cssinject__=!0;try{document.write("<style>.svgfont {display: inline-block;width: 1em;height: 1em;fill: currentColor;vertical-align: -0.1em;font-size:16px;}</style>")}catch(t){console&&console.log(t)}}i=function(){var t,e=document.createElement("div");e.innerHTML=n._iconfont_svg_string_4462827,(e=e.getElementsByTagName("svg")[0])&&(e.setAttribute("aria-hidden","true"),e.style.position="absolute",e.style.width=0,e.style.height=0,e.style.overflow="hidden",e=e,(t=document.body).firstChild?s(e,t.firstChild):t.appendChild(e))},document.addEventListener?~["complete","loaded","interactive"].indexOf(document.readyState)?setTimeout(i,0):(o=function(){document.removeEventListener("DOMContentLoaded",o,!1),i()},document.addEventListener("DOMContentLoaded",o,!1)):document.attachEvent&&(a=i,d=n.document,c=!1,r(),d.onreadystatechange=function(){"complete"==d.readyState&&(d.onreadystatechange=null,l())})}function l(){c||(c=!0,a())}function r(){try{d.documentElement.doScroll("left")}catch(t){return void setTimeout(r,50)}l()}}(window);
+window._iconfont_svg_string_4462827='<svg><symbol id="icon-zu54" viewBox="0 0 1024 1024"><path d="M512 512m-512 0a512 512 0 1 0 1024 0 512 512 0 1 0-1024 0Z" fill="#007AFF" ></path><path d="M717.824 407.466667a52.992 52.992 0 0 0-49.194667 72.533333l-83.242666 33.28-55.808-111.573333a52.992 52.992 0 1 0-47.36 0l-55.808 111.573333-83.285334-33.28a52.992 52.992 0 1 0-49.152 33.28 48.341333 48.341333 0 0 0 8.832-0.725333l28.245334 167.68a51.2 51.2 0 0 0 50.346666 44.970666h246.4a53.888 53.888 0 0 0 52.992-44.970666l28.245334-167.68a48.085333 48.085333 0 0 0 8.832 0.725333 52.992 52.992 0 1 0 0-105.941333z m-161.194667 276.608l-50.730666-26.666667-50.730667 26.666667 9.685333-56.490667-41.045333-39.978667 56.704-8.234666 25.344-51.2 25.344 51.2 56.704 8.234666-41.045333 40.021334 9.685333 56.490666z" fill="#FFFFFF" ></path></symbol><symbol id="icon-a-2labadianji3x" viewBox="0 0 1024 1024"><path d="M752 416a16 16 0 0 1 16 16v160a16 16 0 1 1-32 0v-160a16 16 0 0 1 16-16z m64-32a16 16 0 0 1 16 16v224a16 16 0 1 1-32 0v-224a16 16 0 0 1 16-16z m64-32a16 16 0 0 1 16 16v288a16 16 0 1 1-32 0v-288a16 16 0 0 1 16-16z m-220.864-134.176A64 64 0 0 1 672 256.32v513.76a64 64 0 0 1-101.728 51.712L321.152 640H192a64 64 0 0 1-64-64v-128a64 64 0 0 1 64-64h140.096l237.408-178.784a64 64 0 0 1 89.6 12.608z" fill="#2875FF" ></path></symbol></svg>',function(n){var t=(t=document.getElementsByTagName("script"))[t.length-1],e=t.getAttribute("data-injectcss"),t=t.getAttribute("data-disable-injectsvg");if(!t){var a,i,o,d,l,c=function(t,e){e.parentNode.insertBefore(t,e)};if(e&&!n.__iconfont__svg__cssinject__){n.__iconfont__svg__cssinject__=!0;try{document.write("<style>.svgfont {display: inline-block;width: 1em;height: 1em;fill: currentColor;vertical-align: -0.1em;font-size:16px;}</style>")}catch(t){console&&console.log(t)}}a=function(){var t,e=document.createElement("div");e.innerHTML=n._iconfont_svg_string_4462827,(e=e.getElementsByTagName("svg")[0])&&(e.setAttribute("aria-hidden","true"),e.style.position="absolute",e.style.width=0,e.style.height=0,e.style.overflow="hidden",e=e,(t=document.body).firstChild?c(e,t.firstChild):t.appendChild(e))},document.addEventListener?~["complete","loaded","interactive"].indexOf(document.readyState)?setTimeout(a,0):(i=function(){document.removeEventListener("DOMContentLoaded",i,!1),a()},document.addEventListener("DOMContentLoaded",i,!1)):document.attachEvent&&(o=a,d=n.document,l=!1,r(),d.onreadystatechange=function(){"complete"==d.readyState&&(d.onreadystatechange=null,s())})}function s(){l||(l=!0,o())}function r(){try{d.documentElement.doScroll("left")}catch(t){return void setTimeout(r,50)}s()}}(window);
\ No newline at end of file
--- a/public/iconfont/iconfont.json
+++ b/public/iconfont/iconfont.json
@@ -6,6 +6,13 @@
  "description": "",
  "glyphs": [
    {
+      "icon_id": "16716546",
+      "name": "超级管理员",
+      "font_class": "zu54",
+      "unicode": "e64a",
+      "unicode_decimal": 58954
+    },
+    {
      "icon_id": "34352187",
      "name": "喇叭",
      "font_class": "a-2labadianji3x",

--- a/public/iconfont/iconfont.ttf
+++ b/public/iconfont/iconfont.ttf
--- a/public/iconfont/iconfont.woff
+++ b/public/iconfont/iconfont.woff
--- a/public/iconfont/iconfont.woff2
+++ b/public/iconfont/iconfont.woff2
--- a/src/views/Dashboard.vue
+++ b/src/views/Dashboard.vue
 <template>
-  <div class="card dashboard">概览页面</div>
+  <div class="card h-100 dashboard">
+    <div
+      v-if="userInfo"
+      class="factory-info flex h-100 flex-center"
+    >
+      <span class="title">{{ userInfo.factory.title }}</span>
+      <span>欢迎您！</span>
+    </div>
+  </div>
 </template>
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import useUserStore from '@/store/user'
+const userInfo = useUserStore().user
+</script>
 <style lang="scss" scoped>
-.dashboard {
+.factory-info {
-  height: calc(100vh - 60px - 20px);
+  font-size: 24px;
+  .title {
+    margin-right: 10px;
+    font-weight: 500;
+    color: green;
+  }
 }
 </style>
--- a/src/views/Login.vue
+++ b/src/views/Login.vue
@@ -30,7 +30,12 @@
            </el-input>
          </el-form-item>
          <el-form-item prop="password">
-            <el-input v-model="loginForm.password" placeholder="请输入密码">
+            <el-input
+              v-model="loginForm.password"
+              type="password"
+              show-password
+              placeholder="请输入密码"
+            >
              <template #prefix>
                <el-icon class="el-input__icon"><Lock /></el-icon>
              </template>
@@ -38,6 +43,7 @@
          </el-form-item>
          <el-form-item>
            <el-button
+              v-loading="loading"
              style="width: 100%"
              size="large"
              type="primary"
@@ -67,7 +73,8 @@ import { User, Iphone, Lock } from '@element-plus/icons-vue'
 import { reactive, ref } from 'vue'
 import { LoginReq } from '@/types/api/auth'
 import type { FormInstance, FormRules } from 'element-plus'
-import useUserStore from '@/store/user';
+import useUserStore from '@/store/user'
+import { showError } from '@/utils/ui'
 const loginFormRef = ref<FormInstance>()
 const loginForm = reactive<LoginReq>({
@@ -75,6 +82,7 @@ const loginForm = reactive<LoginReq>({
  account: '',
  password: '',
 })
+const loading = ref(false)
 const rules = reactive<FormRules<LoginReq>>({
  factoryCode: [{ required: true, message: '请输入工厂号', trigger: 'blur' }],
@@ -90,7 +98,14 @@ const handleLogin = async () => {
    return
  }
  // 登录逻辑
-  await userStore.login(loginForm)
+  try {
+    loading.value = true
+    await userStore.login(loginForm)
+  } catch (error) {
+    showError(error)
+  } finally {
+    loading.value = false
+  }
 }
 </script>
 <style lang="scss" scoped>

--- a/src/views/UserPage.vue
+++ b/src/views/UserPage.vue
@@ -56,7 +56,27 @@
            label="序号"
            width="55"
          />
-          <ElTableColumn prop="account" header-align="center" label="用户名" />
+          <ElTableColumn prop="account" header-align="center" label="用户名">
+            <template #default="scope">
+              <div>
+                <span
+                  >{{ scope.row.account }}
+                  <ElTooltip
+                    v-if="scope.row.supperMark === 1"
+                    content="超级管理员"
+                    placement="top"
+                  >
+                    <Icon
+                      v-if="scope.row.supperMark === 1"
+                      name="zu54"
+                      style="vertical-align: super; cursor: pointer"
+                    >
+                    </Icon>
+                  </ElTooltip>
+                </span>
+              </div>
+            </template>
+          </ElTableColumn>
          <ElTableColumn
            prop="factoryCode"
            header-align="center"
@@ -70,8 +90,16 @@
            label="状态"
          >
            <template #default="scope">
-              <ElTag v-if="scope.row.status === 1" type="success">启用</ElTag>
+              <el-tooltip
-              <ElTag v-if="scope.row.status === 0" type="danger">禁用</ElTag>
+                :content="scope.row.status ? '启用' : '禁用'"
+                placement="top"
+              >
+                <ElSwitch
+                  v-model="scope.row.status"
+                  :active-value="1"
+                  :inactive-value="0"
+                ></ElSwitch>
+              </el-tooltip>
            </template>
          </ElTableColumn>
          <ElTableColumn
@@ -173,6 +201,7 @@ import {
  deleteUserApi,
  getDetailsByIdApi,
 } from '@/api/auth'
+import Icon from '@/components/Icon.vue'
 import { UserEditForm, userData, userSearchForm } from '@/types/api/user'
 import usePageList from '@/utils/hooks/usePageList'
 import { useValue } from '@/utils/hooks/useValue'