Web/admin-govern
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

修改指标越限明细样式

Browse Source
This commit is contained in:
guanj
2025-11-18 14:23:06 +08:00
parent 2048da5e52
commit 5bed340320
6 changed files with 499 additions and 494 deletions
Download Patch File Download Diff File Expand all files Collapse all files

83
src/components/cockpit/exceedanceLevel/components/dailyTrendChart.vue
View File

@@ -15,13 +15,13 @@ import { mainHeight } from '@/utils/layout'
import { limitExtentDayData } from '@/api/harmonic-boot/cockpit/cockpit' import { limitExtentDayData } from '@/api/harmonic-boot/cockpit/cockpit'
const prop = defineProps({ const prop = defineProps({
width: { type: [String, Number] }, width: { type: [String, Number]},
height: { type: [String, Number] }, height: { type: [String, Number]},
timeKey: { type: [String, Number] }, timeKey: { type: [String, Number]},
timeValue: { type: Object } timeValue: { type: Object }
}) })
const pageHeight = mainHeight(0, 2) const pageHeight = ref(mainHeight(332))
const dialogVisible: any = ref(false) const dialogVisible: any = ref(false)
@@ -36,44 +36,35 @@ const echartList = ref()
const init = () => { const init = () => {
echartList.value = { echartList.value = {
title: { title: {
text: dialogText.value text: dialogText.value,
}, textStyle: {
legend: { fontSize: 14,
itemWidth: 20, rich: {
itemHeight: 20, lineName: {
itemStyle: { opacity: 0 }, //去圆点 color: '#333',
right: 70 fontSize: 14
}, },
tooltip: { timeLabel: {
trigger: 'axis', color: '#333',
formatter: (params: any) => { fontSize: 14,
if (!params || params.length === 0) return '' padding: [0, 0, 0, 10]
},
// 使用第一个项目的轴标签作为时间标题 name: {
let tooltipText = params[0].axisValueLabel + '<br/>' color: '#333',
fontSize: 14,
// 遍历所有项目并累加到tooltipText中 padding: [0, 0, 0, 10]
params.forEach((item: any) => { }
// 将数值格式化为保留两位小数
const formattedValue = Math.round(item.value[1] * 100) / 100
tooltipText += `${item.marker} ${item.seriesName}: ${formattedValue}<br/>`
})
return tooltipText
}
},
xAxis: {
type: 'time',
axisLabel: {
formatter: {
day: '{MM}-{dd}',
month: '{MM}',
year: '{yyyy}'
} }
} }
}, },
xAxis: {
yAxis: [{}, {}], type: 'category',
data: []
},
yAxis: {
type: 'value',
name: '数值'
},
grid: { grid: {
left: '1%', left: '1%',
right: '45px', right: '45px',
@@ -121,17 +112,12 @@ const initData = async (row: any) => {
// 处理每条相位数据 // 处理每条相位数据
const seriesData = res.data.map((item: any) => { const seriesData = res.data.map((item: any) => {
const values = xAxisData.map((time: string, index: number) => { const values = item.value.split(',').map((v: string) => parseFloat(v) || 0)
// 将传入的日期与时间拼接成完整的时间字符串
const fullTime = `${row.time} ${time}`
const value = parseFloat(item.value.split(',')[index]) || 0
return [fullTime, value]
})
return { return {
name: `${item.phasic}相`, name: `${item.phasic}相`,
type: 'line', type: 'line',
showSymbol: false, showSymbol: true,
smooth: true, smooth: true,
data: values, data: values,
itemStyle: { itemStyle: {
@@ -144,17 +130,18 @@ const initData = async (row: any) => {
}) })
// 更新图表配置 // 更新图表配置
echartList.value.xAxis.data = xAxisData
echartList.value.options.series = seriesData echartList.value.options.series = seriesData
// 注意：使用时间轴时不需要设置 xAxis.data
} }
}) })
} }
onMounted(() => {}) onMounted(() => {})
const open = async (row: any) => { const open = async (row: any) => {
dialogVisible.value = true dialogVisible.value = true
dialogTitle.value = row.name + '日趋势图' dialogTitle.value = row.name + '日趋势图'
dialogText.value = `监测点:${row.lineName} 时间:${row.time} 指标:${row.name}` dialogText.value = `{lineName|${row.lineName}}{timeLabel|${row.time}}{name|${row.name}日趋势图}`
nextTick(() => { nextTick(() => {
initData(row) initData(row)
}) })

32
src/components/cockpit/indicatorDetails/index.vue
View File

@@ -5,12 +5,19 @@
<el-calendar <el-calendar
v-model="value" v-model="value"
:style="{ :style="{
height: `calc(${prop.height} - ${headerHeight}px + ${fullscreen ? 0 : 56}px )`, height: `calc(${prop.height} - ${headerHeight}px + ${fullscreen ? 0 : 56}px )`,
overflow: 'auto', overflow: 'auto'
}" }"
v-loading="tableStore.table.loading"
> >
<template #date-cell="{ data }"> <template #date-cell="{ data }">
<div style="height: 100%; padding: 8px" :style="{ background: setBackground(data.day) }"> <div
style="padding: 8px"
:style="{
background: setBackground(data.day),
height: `calc((${prop.height} - 100px - ${headerHeight}px + ${fullscreen ? 0 : 56}px) / 5 )`
}"
>
<p :class="data.isSelected ? 'is-selected' : ''"> <p :class="data.isSelected ? 'is-selected' : ''">
{{ data.day.split('-').slice(2).join('-') }} {{ data.day.split('-').slice(2).join('-') }}
</p> </p>
@@ -18,13 +25,7 @@
<template #content> <template #content>
<span v-html="getTextForDate(data.day)"></span> <span v-html="getTextForDate(data.day)"></span>
</template> </template>
<div <div class="details" v-html="getTextForDate(data.day)"></div>
:style="{
height: `calc(${prop.height} / 5 - 47px) `,
overflow: 'auto'
}"
v-html="getTextForDate(data.day)"
></div>
</el-tooltip> </el-tooltip>
</div> </div>
</template> </template>
@@ -36,7 +37,6 @@ import { ref, onMounted, provide, reactive, watch, h } from 'vue'
import TableStore from '@/utils/tableStore' import TableStore from '@/utils/tableStore'
import TableHeader from '@/components/table/header/index.vue' import TableHeader from '@/components/table/header/index.vue'
import { dayjs } from 'element-plus' import { dayjs } from 'element-plus'
import { overflow } from 'html2canvas/dist/types/css/property-descriptors/overflow'
const prop = defineProps({ const prop = defineProps({
w: { type: [String, Number] }, w: { type: [String, Number] },
@@ -92,6 +92,7 @@ const tableStore: any = new TableStore({
tableStore.table.params.searchEndTime = tableStore.table.params.searchEndTime || prop.timeValue?.[1] tableStore.table.params.searchEndTime = tableStore.table.params.searchEndTime || prop.timeValue?.[1]
}, },
loadCallback: () => { loadCallback: () => {
value.value = tableStore.table.params.searchBeginTime
// 将后端返回的数据整合到 list 中 // 将后端返回的数据整合到 list 中
// tableStore.table.data = [ // tableStore.table.data = [
// { // {
@@ -188,20 +189,25 @@ const addMenu = () => {}
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
:deep(.el-calendar) { :deep(.el-calendar) {
.el-calendar__header { .el-calendar__button-group {
display: none; display: none;
} }
.el-calendar__body { .el-calendar__body {
padding: 0px !important; padding: 0px !important;
height: 100%; height: calc(100% - 46px);
.el-calendar-table { .el-calendar-table {
height: 100%; height: 100%;
} }
} }
.el-calendar-day { .el-calendar-day {
// height: calc(912px / 5 );
height: 100%; height: 100%;
padding: 0px; padding: 0px;
overflow: hidden; overflow: hidden;
.details {
height: calc(100% - 20px);
overflow-y: auto;
}
} }
.el-calendar-table__row { .el-calendar-table__row {
.next { .next {

34
src/components/cockpit/indicatorDistribution/index.vue
View File

@@ -10,22 +10,24 @@
</el-form-item> </el-form-item>
</template> </template>
</TableHeader> </TableHeader>
<my-echart <div v-loading="tableStore.table.loading">
class="tall" <my-echart
:options="echartList" class="tall"
:style="{ :options="echartList"
width: prop.width, :style="{
height: `calc(${prop.height} / 2 - ${headerHeight / 2}px + ${fullscreen ? 0 : 28}px )` width: prop.width,
}" height: `calc(${prop.height} / 2 - ${headerHeight / 2}px + ${fullscreen ? 0 : 28}px )`
/> }"
<my-echart />
class="mt10" <my-echart
:options="echartList1" class="mt10"
:style="{ :options="echartList1"
width: prop.width, :style="{
height: `calc(${prop.height} / 2 - ${headerHeight / 2}px + ${fullscreen ? 0 : 28}px )` width: prop.width,
}" height: `calc(${prop.height} / 2 - ${headerHeight / 2}px + ${fullscreen ? 0 : 28}px )`
/> }"
/>
</div>
</div> </div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">

218
src/utils/pageBubble.ts
View File

@@ -1,104 +1,114 @@
// 页面气泡效果 // 页面气泡效果
const bubble: { const bubble: {
width: number width: number
height: number height: number
bubbleEl: any bubbleEl: any
canvas: any canvas: any
ctx: any ctx: any
circles: any[] circles: any[]
animate: boolean animate: boolean
requestId: any requestId: any
} = { } = {
width: 0, width: 0,
height: 0, height: 0,
bubbleEl: null, bubbleEl: null,
canvas: null, canvas: null,
ctx: {}, ctx: {},
circles: [], circles: [],
animate: true, animate: true,
requestId: null, requestId: null
} }
export const init = function (): void { export const init = function (): void {
bubble.width = window.innerWidth bubble.width = window.innerWidth
bubble.height = window.innerHeight bubble.height = window.innerHeight
bubble.bubbleEl = document.getElementById('bubble') bubble.bubbleEl = document.getElementById('bubble')
bubble.bubbleEl.style.height = bubble.height + 'px' bubble.bubbleEl.style.height = bubble.height + 'px'
bubble.canvas = document.getElementById('bubble-canvas') bubble.canvas = document.getElementById('bubble-canvas')
bubble.canvas.width = bubble.width bubble.canvas.width = bubble.width
bubble.canvas.height = bubble.height bubble.canvas.height = bubble.height
bubble.ctx = bubble.canvas.getContext('2d') bubble.ctx = bubble.canvas.getContext('2d')
// create particles // create particles
bubble.circles = [] bubble.circles = []
for (let x = 0; x < bubble.width * 0.5; x++) { for (let x = 0; x < bubble.width * 0.5; x++) {
const c = new Circle() const c = new Circle()
bubble.circles.push(c) bubble.circles.push(c)
} }
animate() animate()
addListeners() addListeners()
} }
function scrollCheck() { function scrollCheck() {
bubble.animate = document.body.scrollTop > bubble.height ? false : true bubble.animate = document.body.scrollTop > bubble.height ? false : true
} }
function resize() { function resize() {
bubble.width = window.innerWidth bubble.width = window.innerWidth
bubble.height = window.innerHeight bubble.height = window.innerHeight
bubble.bubbleEl.style.height = bubble.height + 'px' bubble.bubbleEl.style.height = bubble.height + 'px'
bubble.canvas.width = bubble.width bubble.canvas.width = bubble.width
bubble.canvas.height = bubble.height bubble.canvas.height = bubble.height
} }
function animate() { function animate() {
if (bubble.animate) { if (bubble.animate) {
bubble.ctx.clearRect(0, 0, bubble.width, bubble.height) bubble.ctx.clearRect(0, 0, bubble.width, bubble.height)
for (const i in bubble.circles) { for (const i in bubble.circles) {
bubble.circles[i].draw() bubble.circles[i].draw()
} }
} }
bubble.requestId = requestAnimationFrame(animate) bubble.requestId = requestAnimationFrame(animate)
} }
class Circle { class Circle {
pos: { pos: {
x: number x: number
y: number y: number
} }
alpha: number alpha: number
scale: number scale: number
velocity: number velocity: number
draw: () => void draw: () => void
constructor() { constructor() {
this.pos = { this.pos = {
x: Math.random() * bubble.width, x: Math.random() * bubble.width,
y: bubble.height + Math.random() * 100, y: bubble.height + Math.random() * 100
} }
this.alpha = 0.1 + Math.random() * 0.3 this.alpha = 0.1 + Math.random() * 0.3
this.scale = 0.1 + Math.random() * 0.3 this.scale = 0.1 + Math.random() * 0.3
this.velocity = Math.random() this.velocity = Math.random()
this.draw = function () { this.draw = function () {
this.pos.y -= this.velocity this.pos.y -= this.velocity
this.alpha -= 0.0005 this.alpha -= 0.0005
bubble.ctx.beginPath() // 当气泡超出顶部或透明度为 0 时，重置位置和属性
bubble.ctx.arc(this.pos.x, this.pos.y, this.scale * 10, 0, 2 * Math.PI, false) if (this.pos.y < -10 || this.alpha < 0) {
bubble.ctx.fillStyle = 'rgba(255,255,255,' + this.alpha + ')' this.pos = {
bubble.ctx.fill() x: Math.random() * bubble.width,
} y: bubble.height + Math.random() * 100
} }
} this.alpha = 0.1 + Math.random() * 0.35
this.scale = 0.1 + Math.random() * 0.35
function addListeners() { this.velocity = Math.random()
window.addEventListener('scroll', scrollCheck) }
window.addEventListener('resize', resize) bubble.ctx.beginPath()
} bubble.ctx.arc(this.pos.x, this.pos.y, this.scale * 10, 0, 2 * Math.PI, false)
bubble.ctx.fillStyle = 'rgba(255,255,255,' + this.alpha + ')'
export function removeListeners() { bubble.ctx.fill()
window.removeEventListener('scroll', scrollCheck) }
window.removeEventListener('resize', resize) }
cancelAnimationFrame(bubble.requestId) }
}
function addListeners() {
window.addEventListener('scroll', scrollCheck)
window.addEventListener('resize', resize)
}
export function removeListeners() {
window.removeEventListener('scroll', scrollCheck)
window.removeEventListener('resize', resize)
cancelAnimationFrame(bubble.requestId)
}

428
src/views/auth/userList/index.vue
View File

@@ -1,214 +1,214 @@
<template> <template>
<div class="default-main"> <div class="default-main">
<TableHeader> <TableHeader>
<template v-slot:select> <template v-slot:select>
<el-form-item label="用户状态"> <el-form-item label="用户状态">
<el-select v-model.trim="tableStore.table.params.searchState" placeholder="选择用户状态"> <el-select v-model.trim="tableStore.table.params.searchState" placeholder="选择用户状态">
<el-option v-for="(item, index) in userState" :label="item.label" :key="index" <el-option v-for="(item, index) in userState" :label="item.label" :key="index"
:value="item.value"></el-option> :value="item.value"></el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item label="用户类型:"> <el-form-item label="用户类型:">
<el-select v-model.trim="tableStore.table.params.casualUser" placeholder="选择用户类型"> <el-select v-model.trim="tableStore.table.params.casualUser" placeholder="选择用户类型">
<el-option v-for="(item, index) in casualUser" :label="item.label" :key="index" <el-option v-for="(item, index) in casualUser" :label="item.label" :key="index"
:value="item.value"></el-option> :value="item.value"></el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item label="关键字筛选:"> <el-form-item label="关键字筛选:">
<el-input maxlength="32" show-word-limit style="width: 240px" <el-input maxlength="32" show-word-limit style="width: 240px"
v-model.trim="tableStore.table.params.searchValue" clearable placeholder="仅根据用户名/登录名" /> v-model.trim="tableStore.table.params.searchValue" clearable placeholder="仅根据用户名/登录名" />
</el-form-item> </el-form-item>
</template> </template>
<template v-slot:operation> <template v-slot:operation>
<el-button :icon="Plus" type="primary" @click="addUser">添加</el-button> <el-button :icon="Plus" type="primary" @click="addUser">添加</el-button>
</template> </template>
</TableHeader> </TableHeader>
<Table ref="tableRef" /> <Table ref="tableRef" />
<PopupEdit ref="popupEditRef"></PopupEdit> <PopupEdit ref="popupEditRef"></PopupEdit>
<PopupPwd ref="popupPwdRef"></PopupPwd> <PopupPwd ref="popupPwdRef"></PopupPwd>
</div> </div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { Plus } from '@element-plus/icons-vue' import { Plus } from '@element-plus/icons-vue'
import { ref, onMounted, provide } from 'vue' import { ref, onMounted, provide } from 'vue'
import { ElMessageBox, ElMessage } from 'element-plus' import { ElMessageBox, ElMessage } from 'element-plus'
import { activateUser, deluser, passwordConfirm } from '@/api/user-boot/user' import { activateUser, deluser, passwordConfirm } from '@/api/user-boot/user'
import TableStore from '@/utils/tableStore' import TableStore from '@/utils/tableStore'
import Table from '@/components/table/index.vue' import Table from '@/components/table/index.vue'
import TableHeader from '@/components/table/header/index.vue' import TableHeader from '@/components/table/header/index.vue'
import PopupEdit from './popupEdit.vue' import PopupEdit from './popupEdit.vue'
import PopupPwd from './popupPwd.vue' import PopupPwd from './popupPwd.vue'
defineOptions({ defineOptions({
name: 'auth/userlist' name: 'auth/userlist'
}) })
const popupEditRef = ref() const popupEditRef = ref()
const popupPwdRef = ref() const popupPwdRef = ref()
const tableStore = new TableStore({ const tableStore = new TableStore({
url: '/user-boot/user/list', url: '/user-boot/user/list',
method: 'POST', method: 'POST',
column: [ column: [
{ title: '用户名称', field: 'name', minWidth: '130' }, { title: '用户名称', field: 'name', minWidth: '130' },
{ title: '登录名', field: 'loginName', minWidth: '130' }, { title: '登录名', field: 'loginName', minWidth: '130' },
{ title: '角色', field: 'roleName', minWidth: '130' }, { title: '角色', field: 'roleName', minWidth: '130' },
// { title: '部门', field: 'deptName', minWidth: '200' }, // { title: '部门', field: 'deptName', minWidth: '200' },
{ title: '电话', field: 'phoneShow', minWidth: '100' }, { title: '电话', field: 'phoneShow', minWidth: '100' },
{ title: '注册时间', field: 'registerTime', minWidth: '130', sortable: true }, { title: '注册时间', field: 'registerTime', minWidth: '130', sortable: true },
{ title: '登录时间', field: 'loginTime', minWidth: '130', sortable: true }, { title: '登录时间', field: 'loginTime', minWidth: '130', sortable: true },
{ title: '类型', field: 'casualUserName', minWidth: '80' }, { title: '类型', field: 'casualUserName', minWidth: '80' },
{ {
title: '状态', title: '状态',
field: 'state', field: 'state',
width: '100', width: '100',
render: 'tag', render: 'tag',
custom: { custom: {
0: 'danger', 0: 'danger',
1: 'success', 1: 'success',
2: 'warning', 2: 'warning',
3: 'warning', 3: 'warning',
4: 'info', 4: 'info',
5: 'danger' 5: 'danger'
}, },
replaceValue: { replaceValue: {
0: '注销', 0: '注销',
1: '正常', 1: '正常',
2: '锁定', 2: '锁定',
3: '待审核', 3: '待审核',
4: '休眠', 4: '休眠',
5: '密码过期' 5: '密码过期'
} }
}, },
{ {
title: '操作', title: '操作',
width: '180', width: '180',
render: 'buttons', render: 'buttons',
fixed: 'right', fixed: 'right',
buttons: [ buttons: [
{ {
name: 'edit', name: 'edit',
title: '编辑', title: '编辑',
type: 'primary', type: 'primary',
icon: 'el-icon-EditPen', icon: 'el-icon-EditPen',
render: 'basicButton', render: 'basicButton',
disabled: row => { disabled: row => {
return row.state !== 1 return row.state !== 1
}, },
click: row => { click: row => {
popupEditRef.value.open('编辑用户', row) popupEditRef.value.open('编辑用户', row)
} }
}, },
{ {
name: 'edit', name: 'edit',
title: '修改密码', title: '修改密码',
type: 'primary', type: 'primary',
icon: 'el-icon-Lock', icon: 'el-icon-Lock',
render: 'basicButton', render: 'basicButton',
disabled: row => { disabled: row => {
return row.state !== 1 return row.state !== 1
}, },
click: row => { click: row => {
ElMessageBox.prompt('二次校验密码确认', '注销用户', { ElMessageBox.prompt('二次校验密码确认', '修改密码', {
confirmButtonText: '确认', confirmButtonText: '确认',
cancelButtonText: '取消', cancelButtonText: '取消',
inputType: 'password' inputType: 'password'
}).then(({ value }) => { }).then(({ value }) => {
passwordConfirm(value).then(res => { passwordConfirm(value).then(res => {
popupPwdRef.value.open(row.id) popupPwdRef.value.open(row.id)
}) })
}) })
} }
}, },
{ {
name: 'edit', name: 'edit',
title: '激活', title: '激活',
type: 'primary', type: 'primary',
icon: 'el-icon-Open', icon: 'el-icon-Open',
render: 'basicButton', render: 'basicButton',
disabled: row => { disabled: row => {
return row.state !== 2 && row.state !== 5 && row.state !== 0 && row.state !== 4 return row.state !== 2 && row.state !== 5 && row.state !== 0 && row.state !== 4
}, },
click: row => { click: row => {
activateUser({ activateUser({
id: row.id id: row.id
}).then(() => { }).then(() => {
ElMessage.success('激活成功') ElMessage.success('激活成功')
tableStore.index() tableStore.index()
}) })
} }
}, },
{ {
name: 'edit', name: 'edit',
title: '注销', title: '注销',
type: 'danger', type: 'danger',
icon: 'el-icon-SwitchButton', icon: 'el-icon-SwitchButton',
render: 'basicButton', render: 'basicButton',
disabled: row => { disabled: row => {
return row.state !== 1 && row.state !== 3 return row.state !== 1 && row.state !== 3
}, },
click: row => { click: row => {
ElMessageBox.prompt('二次校验密码确认', '注销用户', { ElMessageBox.prompt('二次校验密码确认', '注销用户', {
confirmButtonText: '确认', confirmButtonText: '确认',
cancelButtonText: '取消', cancelButtonText: '取消',
inputType: 'password' inputType: 'password'
}).then(({ value }) => { }).then(({ value }) => {
passwordConfirm(value).then(res => { passwordConfirm(value).then(res => {
deluser({ deluser({
id: row.id id: row.id
}).then(() => { }).then(() => {
ElMessage.success('注销成功') ElMessage.success('注销成功')
tableStore.index() tableStore.index()
}) })
}) })
}) })
} }
} }
] ]
} }
], ],
loadCallback: () => { loadCallback: () => {
tableStore.table.data.forEach((item: any) => { tableStore.table.data.forEach((item: any) => {
item.deptName = item.deptName || '/' item.deptName = item.deptName || '/'
item.phoneShow = item.phone || '/' item.phoneShow = item.phone || '/'
item.roleName = item.role.length ? item.role : '/' item.roleName = item.role.length ? item.role : '/'
switch (item.casualUser) { switch (item.casualUser) {
case 0: case 0:
item.casualUserName = '临时用户' item.casualUserName = '临时用户'
break break
case 1: case 1:
item.casualUserName = '长期用户' item.casualUserName = '长期用户'
break break
default: default:
item.casualUserName = '/' item.casualUserName = '/'
break break
} }
}) })
} }
}) })
provide('tableStore', tableStore) provide('tableStore', tableStore)
tableStore.table.params.searchState = 1 tableStore.table.params.searchState = 1
tableStore.table.params.casualUser = -1 tableStore.table.params.casualUser = -1
tableStore.table.params.orderBy = '' tableStore.table.params.orderBy = ''
const userState = [ const userState = [
{ label: '全部', value: -1 }, { label: '全部', value: -1 },
{ label: '注销', value: 0 }, { label: '注销', value: 0 },
{ label: '正常', value: 1 }, { label: '正常', value: 1 },
{ label: '锁定', value: 2 }, { label: '锁定', value: 2 },
{ label: '待审核', value: 3 }, { label: '待审核', value: 3 },
{ label: '休眠', value: 4 }, { label: '休眠', value: 4 },
{ label: '密码过期', value: 5 } { label: '密码过期', value: 5 }
] ]
const casualUser = [ const casualUser = [
{ label: '全部', value: -1 }, { label: '全部', value: -1 },
{ label: '临时用户', value: 0 }, { label: '临时用户', value: 0 },
{ label: '长期用户', value: 1 } { label: '长期用户', value: 1 }
] ]
onMounted(() => { onMounted(() => {
tableStore.index() tableStore.index()
}) })
const addUser = () => { const addUser = () => {
popupEditRef.value.open('新增用户') popupEditRef.value.open('新增用户')
} }
</script> </script>

198
src/views/auth/userList/popupPwd.vue
View File

@@ -1,99 +1,99 @@
<template> <template>
<el-dialog width=“500px” v-model.trim="dialogVisible" title="修改密码"> <el-dialog width='500px' draggable v-model.trim="dialogVisible" title="修改密码">
<el-scrollbar> <el-scrollbar>
<el-form :inline="false" :model="form" label-width="120px" class="form-one" :rules="rules" ref="formRef"> <el-form :inline="false" :model="form" label-width="120px" class="form-one" :rules="rules" ref="formRef">
<el-form-item label="新密码" prop="newPwd"> <el-form-item label="新密码" prop="newPwd">
<el-input maxlength="32" show-word-limit v-model.trim="form.newPwd" type="password" <el-input maxlength="32" show-word-limit v-model.trim="form.newPwd" type="password"
placeholder="请输入新密码" show-password /> placeholder="请输入新密码" show-password />
</el-form-item> </el-form-item>
<el-form-item label="确认密码" prop="confirmPwd"> <el-form-item label="确认密码" prop="confirmPwd">
<el-input maxlength="32" show-word-limit v-model.trim="form.confirmPwd" type="password" <el-input maxlength="32" show-word-limit v-model.trim="form.confirmPwd" type="password"
placeholder="请输入确认密码" show-password /> placeholder="请输入确认密码" show-password />
</el-form-item> </el-form-item>
</el-form> </el-form>
</el-scrollbar> </el-scrollbar>
<template #footer> <template #footer>
<span class="dialog-footer"> <span class="dialog-footer">
<el-button @click="dialogVisible = false">取消</el-button> <el-button @click="dialogVisible = false">取消</el-button>
<el-button type="primary" @click="submit">确认</el-button> <el-button type="primary" @click="submit">确认</el-button>
</span> </span>
</template> </template>
</el-dialog> </el-dialog>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { ref, inject } from 'vue' import { ref, inject } from 'vue'
import { reactive } from 'vue' import { reactive } from 'vue'
import TableStore from '@/utils/tableStore' import TableStore from '@/utils/tableStore'
import { ElMessage } from 'element-plus' import { ElMessage } from 'element-plus'
import { validatePwd } from '@/utils/common' import { validatePwd } from '@/utils/common'
import { passwordConfirm, updatePassword } from '@/api/user-boot/user' import { passwordConfirm, updatePassword } from '@/api/user-boot/user'
import { debug } from 'console' import { debug } from 'console'
const formRef = ref() const formRef = ref()
const tableStore = inject('tableStore') as TableStore const tableStore = inject('tableStore') as TableStore
const form = reactive({ const form = reactive({
id: '', id: '',
newPwd: '', newPwd: '',
confirmPwd: '', confirmPwd: '',
loginName: '' loginName: ''
}) })
const rules = { const rules = {
newPwd: [ newPwd: [
{ required: true, message: '请输入密码', trigger: 'blur' }, { required: true, message: '请输入密码', trigger: 'blur' },
{ {
min: 6, min: 6,
max: 16, max: 16,
message: '长度在 6 到 16 个字符', message: '长度在 6 到 16 个字符',
trigger: 'blur' trigger: 'blur'
}, },
{ validator: validatePwd, trigger: 'blur' } { validator: validatePwd, trigger: 'blur' }
], ],
confirmPwd: [ confirmPwd: [
{ required: true, message: '请确认密码', trigger: 'blur' }, { required: true, message: '请确认密码', trigger: 'blur' },
{ {
min: 6, min: 6,
max: 16, max: 16,
message: '长度在 6 到 16 个字符', message: '长度在 6 到 16 个字符',
trigger: 'blur' trigger: 'blur'
}, },
{ {
validator: (rule: any, value: string, callback: any) => { validator: (rule: any, value: string, callback: any) => {
if (value === '') { if (value === '') {
callback(new Error('请再次输入密码')) callback(new Error('请再次输入密码'))
} else if (value !== form.newPwd) { } else if (value !== form.newPwd) {
callback(new Error('两次输入密码不一致!')) callback(new Error('两次输入密码不一致!'))
} else { } else {
callback() callback()
} }
}, },
trigger: 'blur', trigger: 'blur',
required: true required: true
} }
] ]
} }
const dialogVisible = ref(false) const dialogVisible = ref(false)
const title = ref('新增菜单') const title = ref('新增菜单')
const open = (id: string, loginName: string) => { const open = (id: string, loginName: string) => {
form.id = id form.id = id
form.loginName = loginName form.loginName = loginName
form.newPwd = '' form.newPwd = ''
form.confirmPwd = '' form.confirmPwd = ''
dialogVisible.value = true dialogVisible.value = true
} }
const submit = async () => { const submit = async () => {
formRef.value.validate((valid: boolean) => { formRef.value.validate((valid: boolean) => {
if (valid) { if (valid) {
updatePassword({ updatePassword({
id: form.id, id: form.id,
newPassword: form.newPwd newPassword: form.newPwd
}).then((res: any) => { }).then((res: any) => {
ElMessage.success('密码修改成功') ElMessage.success('密码修改成功')
dialogVisible.value = false dialogVisible.value = false
}) })
} }
}) })
} }
defineExpose({ open }) defineExpose({ open })
</script> </script>