修改指标越限明细样式
This commit is contained in:
guanj
@@ -15,13 +15,13 @@ import { mainHeight } from '@/utils/layout'
|
||||
import { limitExtentDayData } from '@/api/harmonic-boot/cockpit/cockpit'
|
||||
|
||||
const prop = defineProps({
|
||||
width: { type: [String, Number] },
|
||||
height: { type: [String, Number] },
|
||||
timeKey: { type: [String, Number] },
|
||||
width: { type: [String, Number]},
|
||||
height: { type: [String, Number]},
|
||||
timeKey: { type: [String, Number]},
|
||||
timeValue: { type: Object }
|
||||
})
|
||||
|
||||
const pageHeight = mainHeight(0, 2)
|
||||
const pageHeight = ref(mainHeight(332))
|
||||
|
||||
const dialogVisible: any = ref(false)
|
||||
|
||||
@@ -36,44 +36,35 @@ const echartList = ref()
|
||||
const init = () => {
|
||||
echartList.value = {
|
||||
title: {
|
||||
text: dialogText.value
|
||||
},
|
||||
legend: {
|
||||
itemWidth: 20,
|
||||
itemHeight: 20,
|
||||
itemStyle: { opacity: 0 }, //去圆点
|
||||
right: 70
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
formatter: (params: any) => {
|
||||
if (!params || params.length === 0) return ''
|
||||
|
||||
// 使用第一个项目的轴标签作为时间标题
|
||||
let tooltipText = params[0].axisValueLabel + '<br/>'
|
||||
|
||||
// 遍历所有项目并累加到tooltipText中
|
||||
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}'
|
||||
text: dialogText.value,
|
||||
textStyle: {
|
||||
fontSize: 14,
|
||||
rich: {
|
||||
lineName: {
|
||||
color: '#333',
|
||||
fontSize: 14
|
||||
},
|
||||
timeLabel: {
|
||||
color: '#333',
|
||||
fontSize: 14,
|
||||
padding: [0, 0, 0, 10]
|
||||
},
|
||||
name: {
|
||||
color: '#333',
|
||||
fontSize: 14,
|
||||
padding: [0, 0, 0, 10]
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
yAxis: [{}, {}],
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: []
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
name: '数值'
|
||||
},
|
||||
grid: {
|
||||
left: '1%',
|
||||
right: '45px',
|
||||
@@ -121,17 +112,12 @@ const initData = async (row: any) => {
|
||||
|
||||
// 处理每条相位数据
|
||||
const seriesData = res.data.map((item: any) => {
|
||||
const values = xAxisData.map((time: string, index: number) => {
|
||||
// 将传入的日期与时间拼接成完整的时间字符串
|
||||
const fullTime = `${row.time} ${time}`
|
||||
const value = parseFloat(item.value.split(',')[index]) || 0
|
||||
return [fullTime, value]
|
||||
})
|
||||
const values = item.value.split(',').map((v: string) => parseFloat(v) || 0)
|
||||
|
||||
return {
|
||||
name: `${item.phasic}相`,
|
||||
type: 'line',
|
||||
showSymbol: false,
|
||||
showSymbol: true,
|
||||
smooth: true,
|
||||
data: values,
|
||||
itemStyle: {
|
||||
@@ -144,17 +130,18 @@ const initData = async (row: any) => {
|
||||
})
|
||||
|
||||
// 更新图表配置
|
||||
echartList.value.xAxis.data = xAxisData
|
||||
echartList.value.options.series = seriesData
|
||||
// 注意：使用时间轴时不需要设置 xAxis.data
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
onMounted(() => {})
|
||||
|
||||
const open = async (row: any) => {
|
||||
dialogVisible.value = true
|
||||
dialogTitle.value = row.name + '日趋势图'
|
||||
dialogText.value = `监测点:${row.lineName} 时间:${row.time} 指标:${row.name}`
|
||||
dialogText.value = `{lineName|${row.lineName}}{timeLabel|${row.time}}{name|${row.name}日趋势图}`
|
||||
nextTick(() => {
|
||||
initData(row)
|
||||
})
|
||||
|
||||
@@ -5,12 +5,19 @@
|
||||
<el-calendar
|
||||
v-model="value"
|
||||
:style="{
|
||||
height: `calc(${prop.height} - ${headerHeight}px + ${fullscreen ? 0 : 56}px )`,
|
||||
overflow: 'auto',
|
||||
height: `calc(${prop.height} - ${headerHeight}px + ${fullscreen ? 0 : 56}px )`,
|
||||
overflow: 'auto'
|
||||
}"
|
||||
v-loading="tableStore.table.loading"
|
||||
>
|
||||
<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' : ''">
|
||||
{{ data.day.split('-').slice(2).join('-') }}
|
||||
</p>
|
||||
@@ -18,13 +25,7 @@
|
||||
<template #content>
|
||||
<span v-html="getTextForDate(data.day)"></span>
|
||||
</template>
|
||||
<div
|
||||
:style="{
|
||||
height: `calc(${prop.height} / 5 - 47px) `,
|
||||
overflow: 'auto'
|
||||
}"
|
||||
v-html="getTextForDate(data.day)"
|
||||
></div>
|
||||
<div class="details" v-html="getTextForDate(data.day)"></div>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
</template>
|
||||
@@ -36,7 +37,6 @@ import { ref, onMounted, provide, reactive, watch, h } from 'vue'
|
||||
import TableStore from '@/utils/tableStore'
|
||||
import TableHeader from '@/components/table/header/index.vue'
|
||||
import { dayjs } from 'element-plus'
|
||||
import { overflow } from 'html2canvas/dist/types/css/property-descriptors/overflow'
|
||||
|
||||
const prop = defineProps({
|
||||
w: { type: [String, Number] },
|
||||
@@ -92,6 +92,7 @@ const tableStore: any = new TableStore({
|
||||
tableStore.table.params.searchEndTime = tableStore.table.params.searchEndTime || prop.timeValue?.[1]
|
||||
},
|
||||
loadCallback: () => {
|
||||
value.value = tableStore.table.params.searchBeginTime
|
||||
// 将后端返回的数据整合到 list 中
|
||||
// tableStore.table.data = [
|
||||
// {
|
||||
@@ -188,20 +189,25 @@ const addMenu = () => {}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
:deep(.el-calendar) {
|
||||
.el-calendar__header {
|
||||
.el-calendar__button-group {
|
||||
display: none;
|
||||
}
|
||||
.el-calendar__body {
|
||||
padding: 0px !important;
|
||||
height: 100%;
|
||||
height: calc(100% - 46px);
|
||||
.el-calendar-table {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
.el-calendar-day {
|
||||
// height: calc(912px / 5 );
|
||||
height: 100%;
|
||||
padding: 0px;
|
||||
overflow: hidden;
|
||||
.details {
|
||||
height: calc(100% - 20px);
|
||||
overflow-y: auto;
|
||||
}
|
||||
}
|
||||
.el-calendar-table__row {
|
||||
.next {
|
||||
|
||||
@@ -10,22 +10,24 @@
|
||||
</el-form-item>
|
||||
</template>
|
||||
</TableHeader>
|
||||
<my-echart
|
||||
class="tall"
|
||||
:options="echartList"
|
||||
:style="{
|
||||
width: prop.width,
|
||||
height: `calc(${prop.height} / 2 - ${headerHeight / 2}px + ${fullscreen ? 0 : 28}px )`
|
||||
}"
|
||||
/>
|
||||
<my-echart
|
||||
class="mt10"
|
||||
:options="echartList1"
|
||||
:style="{
|
||||
width: prop.width,
|
||||
height: `calc(${prop.height} / 2 - ${headerHeight / 2}px + ${fullscreen ? 0 : 28}px )`
|
||||
}"
|
||||
/>
|
||||
<div v-loading="tableStore.table.loading">
|
||||
<my-echart
|
||||
class="tall"
|
||||
:options="echartList"
|
||||
:style="{
|
||||
width: prop.width,
|
||||
height: `calc(${prop.height} / 2 - ${headerHeight / 2}px + ${fullscreen ? 0 : 28}px )`
|
||||
}"
|
||||
/>
|
||||
<my-echart
|
||||
class="mt10"
|
||||
:options="echartList1"
|
||||
:style="{
|
||||
width: prop.width,
|
||||
height: `calc(${prop.height} / 2 - ${headerHeight / 2}px + ${fullscreen ? 0 : 28}px )`
|
||||
}"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
|
||||
@@ -1,104 +1,114 @@
|
||||
// 页面气泡效果
|
||||
|
||||
const bubble: {
|
||||
width: number
|
||||
height: number
|
||||
bubbleEl: any
|
||||
canvas: any
|
||||
ctx: any
|
||||
circles: any[]
|
||||
animate: boolean
|
||||
requestId: any
|
||||
} = {
|
||||
width: 0,
|
||||
height: 0,
|
||||
bubbleEl: null,
|
||||
canvas: null,
|
||||
ctx: {},
|
||||
circles: [],
|
||||
animate: true,
|
||||
requestId: null,
|
||||
}
|
||||
|
||||
export const init = function (): void {
|
||||
bubble.width = window.innerWidth
|
||||
bubble.height = window.innerHeight
|
||||
|
||||
bubble.bubbleEl = document.getElementById('bubble')
|
||||
bubble.bubbleEl.style.height = bubble.height + 'px'
|
||||
|
||||
bubble.canvas = document.getElementById('bubble-canvas')
|
||||
bubble.canvas.width = bubble.width
|
||||
bubble.canvas.height = bubble.height
|
||||
bubble.ctx = bubble.canvas.getContext('2d')
|
||||
|
||||
// create particles
|
||||
bubble.circles = []
|
||||
for (let x = 0; x < bubble.width * 0.5; x++) {
|
||||
const c = new Circle()
|
||||
bubble.circles.push(c)
|
||||
}
|
||||
animate()
|
||||
addListeners()
|
||||
}
|
||||
|
||||
function scrollCheck() {
|
||||
bubble.animate = document.body.scrollTop > bubble.height ? false : true
|
||||
}
|
||||
|
||||
function resize() {
|
||||
bubble.width = window.innerWidth
|
||||
bubble.height = window.innerHeight
|
||||
bubble.bubbleEl.style.height = bubble.height + 'px'
|
||||
bubble.canvas.width = bubble.width
|
||||
bubble.canvas.height = bubble.height
|
||||
}
|
||||
|
||||
function animate() {
|
||||
if (bubble.animate) {
|
||||
bubble.ctx.clearRect(0, 0, bubble.width, bubble.height)
|
||||
for (const i in bubble.circles) {
|
||||
bubble.circles[i].draw()
|
||||
}
|
||||
}
|
||||
bubble.requestId = requestAnimationFrame(animate)
|
||||
}
|
||||
|
||||
class Circle {
|
||||
pos: {
|
||||
x: number
|
||||
y: number
|
||||
}
|
||||
alpha: number
|
||||
scale: number
|
||||
velocity: number
|
||||
draw: () => void
|
||||
constructor() {
|
||||
this.pos = {
|
||||
x: Math.random() * bubble.width,
|
||||
y: bubble.height + Math.random() * 100,
|
||||
}
|
||||
this.alpha = 0.1 + Math.random() * 0.3
|
||||
this.scale = 0.1 + Math.random() * 0.3
|
||||
this.velocity = Math.random()
|
||||
this.draw = function () {
|
||||
this.pos.y -= this.velocity
|
||||
this.alpha -= 0.0005
|
||||
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 + ')'
|
||||
bubble.ctx.fill()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function addListeners() {
|
||||
window.addEventListener('scroll', scrollCheck)
|
||||
window.addEventListener('resize', resize)
|
||||
}
|
||||
|
||||
export function removeListeners() {
|
||||
window.removeEventListener('scroll', scrollCheck)
|
||||
window.removeEventListener('resize', resize)
|
||||
cancelAnimationFrame(bubble.requestId)
|
||||
}
|
||||
// 页面气泡效果
|
||||
|
||||
const bubble: {
|
||||
width: number
|
||||
height: number
|
||||
bubbleEl: any
|
||||
canvas: any
|
||||
ctx: any
|
||||
circles: any[]
|
||||
animate: boolean
|
||||
requestId: any
|
||||
} = {
|
||||
width: 0,
|
||||
height: 0,
|
||||
bubbleEl: null,
|
||||
canvas: null,
|
||||
ctx: {},
|
||||
circles: [],
|
||||
animate: true,
|
||||
requestId: null
|
||||
}
|
||||
|
||||
export const init = function (): void {
|
||||
bubble.width = window.innerWidth
|
||||
bubble.height = window.innerHeight
|
||||
|
||||
bubble.bubbleEl = document.getElementById('bubble')
|
||||
bubble.bubbleEl.style.height = bubble.height + 'px'
|
||||
|
||||
bubble.canvas = document.getElementById('bubble-canvas')
|
||||
bubble.canvas.width = bubble.width
|
||||
bubble.canvas.height = bubble.height
|
||||
bubble.ctx = bubble.canvas.getContext('2d')
|
||||
|
||||
// create particles
|
||||
bubble.circles = []
|
||||
for (let x = 0; x < bubble.width * 0.5; x++) {
|
||||
const c = new Circle()
|
||||
bubble.circles.push(c)
|
||||
}
|
||||
animate()
|
||||
addListeners()
|
||||
}
|
||||
|
||||
function scrollCheck() {
|
||||
bubble.animate = document.body.scrollTop > bubble.height ? false : true
|
||||
}
|
||||
|
||||
function resize() {
|
||||
bubble.width = window.innerWidth
|
||||
bubble.height = window.innerHeight
|
||||
bubble.bubbleEl.style.height = bubble.height + 'px'
|
||||
bubble.canvas.width = bubble.width
|
||||
bubble.canvas.height = bubble.height
|
||||
}
|
||||
|
||||
function animate() {
|
||||
if (bubble.animate) {
|
||||
bubble.ctx.clearRect(0, 0, bubble.width, bubble.height)
|
||||
for (const i in bubble.circles) {
|
||||
bubble.circles[i].draw()
|
||||
}
|
||||
}
|
||||
bubble.requestId = requestAnimationFrame(animate)
|
||||
}
|
||||
|
||||
class Circle {
|
||||
pos: {
|
||||
x: number
|
||||
y: number
|
||||
}
|
||||
alpha: number
|
||||
scale: number
|
||||
velocity: number
|
||||
draw: () => void
|
||||
constructor() {
|
||||
this.pos = {
|
||||
x: Math.random() * bubble.width,
|
||||
y: bubble.height + Math.random() * 100
|
||||
}
|
||||
this.alpha = 0.1 + Math.random() * 0.3
|
||||
this.scale = 0.1 + Math.random() * 0.3
|
||||
this.velocity = Math.random()
|
||||
this.draw = function () {
|
||||
this.pos.y -= this.velocity
|
||||
this.alpha -= 0.0005
|
||||
// 当气泡超出顶部或透明度为 0 时，重置位置和属性
|
||||
if (this.pos.y < -10 || this.alpha < 0) {
|
||||
this.pos = {
|
||||
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
|
||||
this.velocity = Math.random()
|
||||
}
|
||||
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 + ')'
|
||||
bubble.ctx.fill()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function addListeners() {
|
||||
window.addEventListener('scroll', scrollCheck)
|
||||
window.addEventListener('resize', resize)
|
||||
}
|
||||
|
||||
export function removeListeners() {
|
||||
window.removeEventListener('scroll', scrollCheck)
|
||||
window.removeEventListener('resize', resize)
|
||||
cancelAnimationFrame(bubble.requestId)
|
||||
}
|
||||
|
||||
@@ -1,214 +1,214 @@
|
||||
<template>
|
||||
<div class="default-main">
|
||||
<TableHeader>
|
||||
<template v-slot:select>
|
||||
<el-form-item label="用户状态">
|
||||
<el-select v-model.trim="tableStore.table.params.searchState" placeholder="选择用户状态">
|
||||
<el-option v-for="(item, index) in userState" :label="item.label" :key="index"
|
||||
:value="item.value"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="用户类型:">
|
||||
<el-select v-model.trim="tableStore.table.params.casualUser" placeholder="选择用户类型">
|
||||
<el-option v-for="(item, index) in casualUser" :label="item.label" :key="index"
|
||||
:value="item.value"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="关键字筛选:">
|
||||
<el-input maxlength="32" show-word-limit style="width: 240px"
|
||||
v-model.trim="tableStore.table.params.searchValue" clearable placeholder="仅根据用户名/登录名" />
|
||||
</el-form-item>
|
||||
</template>
|
||||
<template v-slot:operation>
|
||||
<el-button :icon="Plus" type="primary" @click="addUser">添加</el-button>
|
||||
</template>
|
||||
</TableHeader>
|
||||
<Table ref="tableRef" />
|
||||
<PopupEdit ref="popupEditRef"></PopupEdit>
|
||||
<PopupPwd ref="popupPwdRef"></PopupPwd>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { Plus } from '@element-plus/icons-vue'
|
||||
import { ref, onMounted, provide } from 'vue'
|
||||
import { ElMessageBox, ElMessage } from 'element-plus'
|
||||
import { activateUser, deluser, passwordConfirm } from '@/api/user-boot/user'
|
||||
import TableStore from '@/utils/tableStore'
|
||||
import Table from '@/components/table/index.vue'
|
||||
import TableHeader from '@/components/table/header/index.vue'
|
||||
import PopupEdit from './popupEdit.vue'
|
||||
import PopupPwd from './popupPwd.vue'
|
||||
|
||||
defineOptions({
|
||||
name: 'auth/userlist'
|
||||
})
|
||||
const popupEditRef = ref()
|
||||
const popupPwdRef = ref()
|
||||
const tableStore = new TableStore({
|
||||
url: '/user-boot/user/list',
|
||||
method: 'POST',
|
||||
column: [
|
||||
{ title: '用户名称', field: 'name', minWidth: '130' },
|
||||
{ title: '登录名', field: 'loginName', minWidth: '130' },
|
||||
{ title: '角色', field: 'roleName', minWidth: '130' },
|
||||
// { title: '部门', field: 'deptName', minWidth: '200' },
|
||||
{ title: '电话', field: 'phoneShow', minWidth: '100' },
|
||||
{ title: '注册时间', field: 'registerTime', minWidth: '130', sortable: true },
|
||||
{ title: '登录时间', field: 'loginTime', minWidth: '130', sortable: true },
|
||||
{ title: '类型', field: 'casualUserName', minWidth: '80' },
|
||||
{
|
||||
title: '状态',
|
||||
field: 'state',
|
||||
width: '100',
|
||||
render: 'tag',
|
||||
custom: {
|
||||
0: 'danger',
|
||||
1: 'success',
|
||||
2: 'warning',
|
||||
3: 'warning',
|
||||
4: 'info',
|
||||
5: 'danger'
|
||||
},
|
||||
replaceValue: {
|
||||
0: '注销',
|
||||
1: '正常',
|
||||
2: '锁定',
|
||||
3: '待审核',
|
||||
4: '休眠',
|
||||
5: '密码过期'
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
width: '180',
|
||||
render: 'buttons',
|
||||
fixed: 'right',
|
||||
buttons: [
|
||||
{
|
||||
name: 'edit',
|
||||
title: '编辑',
|
||||
type: 'primary',
|
||||
icon: 'el-icon-EditPen',
|
||||
render: 'basicButton',
|
||||
disabled: row => {
|
||||
return row.state !== 1
|
||||
},
|
||||
click: row => {
|
||||
popupEditRef.value.open('编辑用户', row)
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'edit',
|
||||
title: '修改密码',
|
||||
type: 'primary',
|
||||
icon: 'el-icon-Lock',
|
||||
render: 'basicButton',
|
||||
disabled: row => {
|
||||
return row.state !== 1
|
||||
},
|
||||
click: row => {
|
||||
ElMessageBox.prompt('二次校验密码确认', '注销用户', {
|
||||
confirmButtonText: '确认',
|
||||
cancelButtonText: '取消',
|
||||
inputType: 'password'
|
||||
}).then(({ value }) => {
|
||||
passwordConfirm(value).then(res => {
|
||||
popupPwdRef.value.open(row.id)
|
||||
})
|
||||
})
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'edit',
|
||||
title: '激活',
|
||||
type: 'primary',
|
||||
icon: 'el-icon-Open',
|
||||
render: 'basicButton',
|
||||
disabled: row => {
|
||||
return row.state !== 2 && row.state !== 5 && row.state !== 0 && row.state !== 4
|
||||
},
|
||||
click: row => {
|
||||
activateUser({
|
||||
id: row.id
|
||||
}).then(() => {
|
||||
ElMessage.success('激活成功')
|
||||
tableStore.index()
|
||||
})
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'edit',
|
||||
title: '注销',
|
||||
type: 'danger',
|
||||
icon: 'el-icon-SwitchButton',
|
||||
render: 'basicButton',
|
||||
disabled: row => {
|
||||
return row.state !== 1 && row.state !== 3
|
||||
},
|
||||
click: row => {
|
||||
ElMessageBox.prompt('二次校验密码确认', '注销用户', {
|
||||
confirmButtonText: '确认',
|
||||
cancelButtonText: '取消',
|
||||
inputType: 'password'
|
||||
}).then(({ value }) => {
|
||||
passwordConfirm(value).then(res => {
|
||||
deluser({
|
||||
id: row.id
|
||||
}).then(() => {
|
||||
ElMessage.success('注销成功')
|
||||
tableStore.index()
|
||||
})
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
|
||||
loadCallback: () => {
|
||||
tableStore.table.data.forEach((item: any) => {
|
||||
item.deptName = item.deptName || '/'
|
||||
item.phoneShow = item.phone || '/'
|
||||
item.roleName = item.role.length ? item.role : '/'
|
||||
switch (item.casualUser) {
|
||||
case 0:
|
||||
item.casualUserName = '临时用户'
|
||||
break
|
||||
case 1:
|
||||
item.casualUserName = '长期用户'
|
||||
break
|
||||
default:
|
||||
item.casualUserName = '/'
|
||||
break
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
provide('tableStore', tableStore)
|
||||
tableStore.table.params.searchState = 1
|
||||
tableStore.table.params.casualUser = -1
|
||||
tableStore.table.params.orderBy = ''
|
||||
const userState = [
|
||||
{ label: '全部', value: -1 },
|
||||
{ label: '注销', value: 0 },
|
||||
{ label: '正常', value: 1 },
|
||||
{ label: '锁定', value: 2 },
|
||||
{ label: '待审核', value: 3 },
|
||||
{ label: '休眠', value: 4 },
|
||||
{ label: '密码过期', value: 5 }
|
||||
]
|
||||
const casualUser = [
|
||||
{ label: '全部', value: -1 },
|
||||
{ label: '临时用户', value: 0 },
|
||||
{ label: '长期用户', value: 1 }
|
||||
]
|
||||
onMounted(() => {
|
||||
tableStore.index()
|
||||
})
|
||||
|
||||
const addUser = () => {
|
||||
popupEditRef.value.open('新增用户')
|
||||
}
|
||||
</script>
|
||||
<template>
|
||||
<div class="default-main">
|
||||
<TableHeader>
|
||||
<template v-slot:select>
|
||||
<el-form-item label="用户状态">
|
||||
<el-select v-model.trim="tableStore.table.params.searchState" placeholder="选择用户状态">
|
||||
<el-option v-for="(item, index) in userState" :label="item.label" :key="index"
|
||||
:value="item.value"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="用户类型:">
|
||||
<el-select v-model.trim="tableStore.table.params.casualUser" placeholder="选择用户类型">
|
||||
<el-option v-for="(item, index) in casualUser" :label="item.label" :key="index"
|
||||
:value="item.value"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="关键字筛选:">
|
||||
<el-input maxlength="32" show-word-limit style="width: 240px"
|
||||
v-model.trim="tableStore.table.params.searchValue" clearable placeholder="仅根据用户名/登录名" />
|
||||
</el-form-item>
|
||||
</template>
|
||||
<template v-slot:operation>
|
||||
<el-button :icon="Plus" type="primary" @click="addUser">添加</el-button>
|
||||
</template>
|
||||
</TableHeader>
|
||||
<Table ref="tableRef" />
|
||||
<PopupEdit ref="popupEditRef"></PopupEdit>
|
||||
<PopupPwd ref="popupPwdRef"></PopupPwd>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { Plus } from '@element-plus/icons-vue'
|
||||
import { ref, onMounted, provide } from 'vue'
|
||||
import { ElMessageBox, ElMessage } from 'element-plus'
|
||||
import { activateUser, deluser, passwordConfirm } from '@/api/user-boot/user'
|
||||
import TableStore from '@/utils/tableStore'
|
||||
import Table from '@/components/table/index.vue'
|
||||
import TableHeader from '@/components/table/header/index.vue'
|
||||
import PopupEdit from './popupEdit.vue'
|
||||
import PopupPwd from './popupPwd.vue'
|
||||
|
||||
defineOptions({
|
||||
name: 'auth/userlist'
|
||||
})
|
||||
const popupEditRef = ref()
|
||||
const popupPwdRef = ref()
|
||||
const tableStore = new TableStore({
|
||||
url: '/user-boot/user/list',
|
||||
method: 'POST',
|
||||
column: [
|
||||
{ title: '用户名称', field: 'name', minWidth: '130' },
|
||||
{ title: '登录名', field: 'loginName', minWidth: '130' },
|
||||
{ title: '角色', field: 'roleName', minWidth: '130' },
|
||||
// { title: '部门', field: 'deptName', minWidth: '200' },
|
||||
{ title: '电话', field: 'phoneShow', minWidth: '100' },
|
||||
{ title: '注册时间', field: 'registerTime', minWidth: '130', sortable: true },
|
||||
{ title: '登录时间', field: 'loginTime', minWidth: '130', sortable: true },
|
||||
{ title: '类型', field: 'casualUserName', minWidth: '80' },
|
||||
{
|
||||
title: '状态',
|
||||
field: 'state',
|
||||
width: '100',
|
||||
render: 'tag',
|
||||
custom: {
|
||||
0: 'danger',
|
||||
1: 'success',
|
||||
2: 'warning',
|
||||
3: 'warning',
|
||||
4: 'info',
|
||||
5: 'danger'
|
||||
},
|
||||
replaceValue: {
|
||||
0: '注销',
|
||||
1: '正常',
|
||||
2: '锁定',
|
||||
3: '待审核',
|
||||
4: '休眠',
|
||||
5: '密码过期'
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
width: '180',
|
||||
render: 'buttons',
|
||||
fixed: 'right',
|
||||
buttons: [
|
||||
{
|
||||
name: 'edit',
|
||||
title: '编辑',
|
||||
type: 'primary',
|
||||
icon: 'el-icon-EditPen',
|
||||
render: 'basicButton',
|
||||
disabled: row => {
|
||||
return row.state !== 1
|
||||
},
|
||||
click: row => {
|
||||
popupEditRef.value.open('编辑用户', row)
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'edit',
|
||||
title: '修改密码',
|
||||
type: 'primary',
|
||||
icon: 'el-icon-Lock',
|
||||
render: 'basicButton',
|
||||
disabled: row => {
|
||||
return row.state !== 1
|
||||
},
|
||||
click: row => {
|
||||
ElMessageBox.prompt('二次校验密码确认', '修改密码', {
|
||||
confirmButtonText: '确认',
|
||||
cancelButtonText: '取消',
|
||||
inputType: 'password'
|
||||
}).then(({ value }) => {
|
||||
passwordConfirm(value).then(res => {
|
||||
popupPwdRef.value.open(row.id)
|
||||
})
|
||||
})
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'edit',
|
||||
title: '激活',
|
||||
type: 'primary',
|
||||
icon: 'el-icon-Open',
|
||||
render: 'basicButton',
|
||||
disabled: row => {
|
||||
return row.state !== 2 && row.state !== 5 && row.state !== 0 && row.state !== 4
|
||||
},
|
||||
click: row => {
|
||||
activateUser({
|
||||
id: row.id
|
||||
}).then(() => {
|
||||
ElMessage.success('激活成功')
|
||||
tableStore.index()
|
||||
})
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'edit',
|
||||
title: '注销',
|
||||
type: 'danger',
|
||||
icon: 'el-icon-SwitchButton',
|
||||
render: 'basicButton',
|
||||
disabled: row => {
|
||||
return row.state !== 1 && row.state !== 3
|
||||
},
|
||||
click: row => {
|
||||
ElMessageBox.prompt('二次校验密码确认', '注销用户', {
|
||||
confirmButtonText: '确认',
|
||||
cancelButtonText: '取消',
|
||||
inputType: 'password'
|
||||
}).then(({ value }) => {
|
||||
passwordConfirm(value).then(res => {
|
||||
deluser({
|
||||
id: row.id
|
||||
}).then(() => {
|
||||
ElMessage.success('注销成功')
|
||||
tableStore.index()
|
||||
})
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
|
||||
loadCallback: () => {
|
||||
tableStore.table.data.forEach((item: any) => {
|
||||
item.deptName = item.deptName || '/'
|
||||
item.phoneShow = item.phone || '/'
|
||||
item.roleName = item.role.length ? item.role : '/'
|
||||
switch (item.casualUser) {
|
||||
case 0:
|
||||
item.casualUserName = '临时用户'
|
||||
break
|
||||
case 1:
|
||||
item.casualUserName = '长期用户'
|
||||
break
|
||||
default:
|
||||
item.casualUserName = '/'
|
||||
break
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
provide('tableStore', tableStore)
|
||||
tableStore.table.params.searchState = 1
|
||||
tableStore.table.params.casualUser = -1
|
||||
tableStore.table.params.orderBy = ''
|
||||
const userState = [
|
||||
{ label: '全部', value: -1 },
|
||||
{ label: '注销', value: 0 },
|
||||
{ label: '正常', value: 1 },
|
||||
{ label: '锁定', value: 2 },
|
||||
{ label: '待审核', value: 3 },
|
||||
{ label: '休眠', value: 4 },
|
||||
{ label: '密码过期', value: 5 }
|
||||
]
|
||||
const casualUser = [
|
||||
{ label: '全部', value: -1 },
|
||||
{ label: '临时用户', value: 0 },
|
||||
{ label: '长期用户', value: 1 }
|
||||
]
|
||||
onMounted(() => {
|
||||
tableStore.index()
|
||||
})
|
||||
|
||||
const addUser = () => {
|
||||
popupEditRef.value.open('新增用户')
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -1,99 +1,99 @@
|
||||
<template>
|
||||
<el-dialog width=“500px” v-model.trim="dialogVisible" title="修改密码">
|
||||
<el-scrollbar>
|
||||
<el-form :inline="false" :model="form" label-width="120px" class="form-one" :rules="rules" ref="formRef">
|
||||
<el-form-item label="新密码" prop="newPwd">
|
||||
<el-input maxlength="32" show-word-limit v-model.trim="form.newPwd" type="password"
|
||||
placeholder="请输入新密码" show-password />
|
||||
</el-form-item>
|
||||
<el-form-item label="确认密码" prop="confirmPwd">
|
||||
<el-input maxlength="32" show-word-limit v-model.trim="form.confirmPwd" type="password"
|
||||
placeholder="请输入确认密码" show-password />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-scrollbar>
|
||||
|
||||
<template #footer>
|
||||
<span class="dialog-footer">
|
||||
<el-button @click="dialogVisible = false">取消</el-button>
|
||||
<el-button type="primary" @click="submit">确认</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ref, inject } from 'vue'
|
||||
import { reactive } from 'vue'
|
||||
import TableStore from '@/utils/tableStore'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { validatePwd } from '@/utils/common'
|
||||
import { passwordConfirm, updatePassword } from '@/api/user-boot/user'
|
||||
import { debug } from 'console'
|
||||
|
||||
const formRef = ref()
|
||||
const tableStore = inject('tableStore') as TableStore
|
||||
const form = reactive({
|
||||
id: '',
|
||||
newPwd: '',
|
||||
confirmPwd: '',
|
||||
loginName: ''
|
||||
})
|
||||
const rules = {
|
||||
newPwd: [
|
||||
{ required: true, message: '请输入密码', trigger: 'blur' },
|
||||
{
|
||||
min: 6,
|
||||
max: 16,
|
||||
message: '长度在 6 到 16 个字符',
|
||||
trigger: 'blur'
|
||||
},
|
||||
{ validator: validatePwd, trigger: 'blur' }
|
||||
],
|
||||
confirmPwd: [
|
||||
{ required: true, message: '请确认密码', trigger: 'blur' },
|
||||
{
|
||||
min: 6,
|
||||
max: 16,
|
||||
message: '长度在 6 到 16 个字符',
|
||||
trigger: 'blur'
|
||||
},
|
||||
{
|
||||
validator: (rule: any, value: string, callback: any) => {
|
||||
if (value === '') {
|
||||
callback(new Error('请再次输入密码'))
|
||||
} else if (value !== form.newPwd) {
|
||||
callback(new Error('两次输入密码不一致!'))
|
||||
} else {
|
||||
callback()
|
||||
}
|
||||
},
|
||||
trigger: 'blur',
|
||||
required: true
|
||||
}
|
||||
]
|
||||
}
|
||||
const dialogVisible = ref(false)
|
||||
const title = ref('新增菜单')
|
||||
const open = (id: string, loginName: string) => {
|
||||
form.id = id
|
||||
form.loginName = loginName
|
||||
form.newPwd = ''
|
||||
form.confirmPwd = ''
|
||||
dialogVisible.value = true
|
||||
}
|
||||
const submit = async () => {
|
||||
formRef.value.validate((valid: boolean) => {
|
||||
if (valid) {
|
||||
updatePassword({
|
||||
id: form.id,
|
||||
newPassword: form.newPwd
|
||||
}).then((res: any) => {
|
||||
ElMessage.success('密码修改成功')
|
||||
dialogVisible.value = false
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
defineExpose({ open })
|
||||
</script>
|
||||
<template>
|
||||
<el-dialog width='500px' draggable v-model.trim="dialogVisible" title="修改密码">
|
||||
<el-scrollbar>
|
||||
<el-form :inline="false" :model="form" label-width="120px" class="form-one" :rules="rules" ref="formRef">
|
||||
<el-form-item label="新密码" prop="newPwd">
|
||||
<el-input maxlength="32" show-word-limit v-model.trim="form.newPwd" type="password"
|
||||
placeholder="请输入新密码" show-password />
|
||||
</el-form-item>
|
||||
<el-form-item label="确认密码" prop="confirmPwd">
|
||||
<el-input maxlength="32" show-word-limit v-model.trim="form.confirmPwd" type="password"
|
||||
placeholder="请输入确认密码" show-password />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-scrollbar>
|
||||
|
||||
<template #footer>
|
||||
<span class="dialog-footer">
|
||||
<el-button @click="dialogVisible = false">取消</el-button>
|
||||
<el-button type="primary" @click="submit">确认</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ref, inject } from 'vue'
|
||||
import { reactive } from 'vue'
|
||||
import TableStore from '@/utils/tableStore'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { validatePwd } from '@/utils/common'
|
||||
import { passwordConfirm, updatePassword } from '@/api/user-boot/user'
|
||||
import { debug } from 'console'
|
||||
|
||||
const formRef = ref()
|
||||
const tableStore = inject('tableStore') as TableStore
|
||||
const form = reactive({
|
||||
id: '',
|
||||
newPwd: '',
|
||||
confirmPwd: '',
|
||||
loginName: ''
|
||||
})
|
||||
const rules = {
|
||||
newPwd: [
|
||||
{ required: true, message: '请输入密码', trigger: 'blur' },
|
||||
{
|
||||
min: 6,
|
||||
max: 16,
|
||||
message: '长度在 6 到 16 个字符',
|
||||
trigger: 'blur'
|
||||
},
|
||||
{ validator: validatePwd, trigger: 'blur' }
|
||||
],
|
||||
confirmPwd: [
|
||||
{ required: true, message: '请确认密码', trigger: 'blur' },
|
||||
{
|
||||
min: 6,
|
||||
max: 16,
|
||||
message: '长度在 6 到 16 个字符',
|
||||
trigger: 'blur'
|
||||
},
|
||||
{
|
||||
validator: (rule: any, value: string, callback: any) => {
|
||||
if (value === '') {
|
||||
callback(new Error('请再次输入密码'))
|
||||
} else if (value !== form.newPwd) {
|
||||
callback(new Error('两次输入密码不一致!'))
|
||||
} else {
|
||||
callback()
|
||||
}
|
||||
},
|
||||
trigger: 'blur',
|
||||
required: true
|
||||
}
|
||||
]
|
||||
}
|
||||
const dialogVisible = ref(false)
|
||||
const title = ref('新增菜单')
|
||||
const open = (id: string, loginName: string) => {
|
||||
form.id = id
|
||||
form.loginName = loginName
|
||||
form.newPwd = ''
|
||||
form.confirmPwd = ''
|
||||
dialogVisible.value = true
|
||||
}
|
||||
const submit = async () => {
|
||||
formRef.value.validate((valid: boolean) => {
|
||||
if (valid) {
|
||||
updatePassword({
|
||||
id: form.id,
|
||||
newPassword: form.newPwd
|
||||
}).then((res: any) => {
|
||||
ElMessage.success('密码修改成功')
|
||||
dialogVisible.value = false
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
defineExpose({ open })
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user