Skip to content

F
factory_front
Commit 7c653fd3 by qinjianhui
Options

feat: 用户管理优化

parent 911d453d
Showing with 115 additions and 19 deletions
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']
......
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'),
url('iconfont.woff?t=1710211601146') format('woff'),
url('iconfont.ttf?t=1710211601146') format('truetype');
src: url('iconfont.woff2?t=1711355340676') format('woff2'),
url('iconfont.woff?t=1711355340676') format('woff'),
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>
......
public/iconfont/iconfont.css
@font-face {
font-family: "iconfont"; /* Project id 4462827 */
src: url('iconfont.woff2?t=1710211601146') format('woff2'),
url('iconfont.woff?t=1710211601146') format('woff'),
url('iconfont.ttf?t=1710211601146') format('truetype');
src: url('iconfont.woff2?t=1711355340676') format('woff2'),
url('iconfont.woff?t=1711355340676') format('woff'),
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";
}
......
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);
\ No newline at end of file
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
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",
......
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 {
height: calc(100vh - 60px - 20px);
.factory-info {
font-size: 24px;
.title {
margin-right: 10px;
font-weight: 500;
color: green;
}
}
</style>
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>
......
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>
<ElTag v-if="scope.row.status === 0" type="danger">禁用</ElTag>
<el-tooltip
: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'
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment