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

修改数据来源

Browse Source
This commit is contained in:
guanj
2026-01-08 19:51:43 +08:00
parent 4cbd2e43cb
commit e21ae50e51
20 changed files with 2639 additions and 2570 deletions
Download Patch File Download Diff File Expand all files Collapse all files

718
src/layouts/admin/components/config.vue
View File

@@ -1,359 +1,359 @@
<template>
<div class="layout-config-drawer">
<el-drawer :model-value="configStore.layout.showDrawer" title="布局配置" size="310px" @close="onCloseDrawer">
<el-scrollbar class="layout-mode-style-scrollbar">
<el-form ref="formRef" :model="configStore.layout">
<div class="layout-mode-styles-box">
<el-divider border-style="dashed">全局</el-divider>
<div class="layout-config-global">
<el-form-item label="后台页面切换动画">
<el-select @change="onCommitState($event, 'mainAnimation')"
:model-value="configStore.layout.mainAnimation"
:placeholder="'layouts.Please select an animation name'">
<el-option label="slide-right" value="slide-right"></el-option>
<el-option label="slide-left" value="slide-left"></el-option>
<el-option label="el-fade-in-linear" value="el-fade-in-linear"></el-option>
<el-option label="el-fade-in" value="el-fade-in"></el-option>
<el-option label="el-zoom-in-center" value="el-zoom-in-center"></el-option>
<el-option label="el-zoom-in-top" value="el-zoom-in-top"></el-option>
<el-option label="el-zoom-in-bottom" value="el-zoom-in-bottom"></el-option>
</el-select>
</el-form-item>
<el-form-item label="组件主题色">
<el-color-picker @change="onCommitColorState($event, 'elementUiPrimary')"
:model-value="configStore.getColorVal('elementUiPrimary')" />
</el-form-item>
<el-form-item label="表格标题栏背景颜色">
<el-color-picker @change="onCommitColorState($event, 'tableHeaderBackground')"
:model-value="configStore.getColorVal('tableHeaderBackground')" />
</el-form-item>
<el-form-item label="表格标题栏文字颜色">
<el-color-picker @change="onCommitColorState($event, 'tableHeaderColor')"
:model-value="configStore.getColorVal('tableHeaderColor')" />
</el-form-item>
<el-form-item label="表格激活栏颜色">
<el-color-picker @change="onCommitColorState($event, 'tableCurrent')"
:model-value="configStore.getColorVal('tableCurrent')" />
</el-form-item>
</div>
<el-divider border-style="dashed">侧边栏</el-divider>
<div class="layout-config-aside">
<el-form-item label="侧边菜单栏背景色">
<el-color-picker @change="onCommitColorState($event, 'menuBackground')"
:model-value="configStore.getColorVal('menuBackground')" />
</el-form-item>
<el-form-item label="侧边菜单文字颜色">
<el-color-picker @change="onCommitColorState($event, 'menuColor')"
:model-value="configStore.getColorVal('menuColor')" />
</el-form-item>
<el-form-item label="侧边菜单激活项背景色">
<el-color-picker @change="onCommitColorState($event, 'menuActiveBackground')"
:model-value="configStore.getColorVal('menuActiveBackground')" />
</el-form-item>
<el-form-item label="侧边菜单激活项文字色">
<el-color-picker @change="onCommitColorState($event, 'menuActiveColor')"
:model-value="configStore.getColorVal('menuActiveColor')" />
</el-form-item>
<el-form-item label="显示侧边菜单顶栏(LOGO栏)">
<el-switch @change="onCommitState($event, 'menuShowTopBar')"
:model-value="configStore.layout.menuShowTopBar"></el-switch>
</el-form-item>
<el-form-item label="侧边菜单顶栏背景色">
<el-color-picker @change="onCommitColorState($event, 'menuTopBarBackground')"
:model-value="configStore.getColorVal('menuTopBarBackground')" />
</el-form-item>
<el-form-item label="侧边菜单宽度(展开时)">
<el-input maxlength="32" show-word-limit @input="onCommitState($event, 'menuWidth')"
type="number" :step="10" :model-value="configStore.layout.menuWidth">
<template #append>px</template>
</el-input>
</el-form-item>
<!-- <el-form-item label="侧边菜单默认图标">-->
<!-- <IconSelector-->
<!-- @change="onCommitMenuDefaultIcon($event, 'menuDefaultIcon')"-->
<!-- :model-value="configStore.layout.menuDefaultIcon"-->
<!-- />-->
<!-- </el-form-item>-->
<!-- <el-form-item label="侧边菜单水平折叠">-->
<!-- <el-switch-->
<!-- @change="onCommitState($event, 'menuCollapse')"-->
<!-- :model-value="configStore.layout.menuCollapse"-->
<!-- ></el-switch>-->
<!-- </el-form-item>-->
<!-- <el-form-item label="侧边菜单手风琴">-->
<!-- <el-switch-->
<!-- @change="onCommitState($event, 'menuUniqueOpened')"-->
<!-- :model-value="configStore.layout.menuUniqueOpened"-->
<!-- ></el-switch>-->
<!-- </el-form-item>-->
</div>
<el-divider border-style="dashed">顶栏</el-divider>
<div class="layout-config-aside">
<el-form-item label="顶栏背景色">
<el-color-picker @change="onCommitColorState($event, 'headerBarBackground')"
:model-value="configStore.getColorVal('headerBarBackground')" />
</el-form-item>
<el-form-item label="顶栏文字色">
<el-color-picker @change="onCommitColorState($event, 'headerBarTabColor')"
:model-value="configStore.getColorVal('headerBarTabColor')" />
</el-form-item>
<!-- <el-form-item label="顶栏悬停时背景色">-->
<!-- <el-color-picker-->
<!-- @change="onCommitColorState($event, 'headerBarHoverBackground')"-->
<!-- :model-value="configStore.getColorVal('headerBarHoverBackground')"-->
<!-- />-->
<!-- </el-form-item>-->
<!-- <el-form-item label="顶栏菜单激活项背景色">-->
<!-- <el-color-picker-->
<!-- @change="onCommitColorState($event, 'headerBarTabActiveBackground')"-->
<!-- :model-value="configStore.getColorVal('headerBarTabActiveBackground')"-->
<!-- />-->
<!-- </el-form-item>-->
<!-- <el-form-item label="顶栏菜单激活项文字色">-->
<!-- <el-color-picker-->
<!-- @change="onCommitColorState($event, 'headerBarTabActiveColor')"-->
<!-- :model-value="configStore.getColorVal('headerBarTabActiveColor')"-->
<!-- />-->
<!-- </el-form-item>-->
</div>
<el-popconfirm @confirm="restoreDefault" title="确定要恢复全部配置到默认值吗？">
<template #reference>
<div class="ba-center">
<el-button class="w80" type="info">恢复默认</el-button>
</div>
</template>
</el-popconfirm>
</div>
</el-form>
</el-scrollbar>
</el-drawer>
</div>
</template>
<script setup lang="ts">
import { useConfig } from '@/stores/config'
import { useNavTabs } from '@/stores/navTabs'
import { useRouter } from 'vue-router'
import IconSelector from '@/components/baInput/components/iconSelector.vue'
import { STORE_CONFIG } from '@/stores/constant/cacheKey'
import { Local, Session } from '@/utils/storage'
import type { Layout } from '@/stores/interface'
const configStore = useConfig()
const navTabs = useNavTabs()
const router = useRouter()
const onCommitState = (value: any, name: any) => {
configStore.setLayout(name, value)
}
const onCommitColorState = (value: string | null, name: keyof Layout) => {
if (value === null) return
const colors = configStore.layout[name] as string[]
if (configStore.layout.isDark) {
colors[1] = value
} else {
colors[0] = value
}
configStore.setLayout(name, colors)
}
const setLayoutMode = (mode: string) => {
configStore.setLayoutMode(mode)
}
// 修改默认菜单图标
const onCommitMenuDefaultIcon = (value: any, name: any) => {
configStore.setLayout(name, value)
const menus = navTabs.state.tabsViewRoutes
navTabs.setTabsViewRoutes([])
setTimeout(() => {
navTabs.setTabsViewRoutes(menus)
}, 200)
}
const onCloseDrawer = () => {
configStore.setLayout('showDrawer', false)
}
const restoreDefault = () => {
Local.remove(STORE_CONFIG)
router.go(0)
}
</script>
<style scoped lang="scss">
.layout-config-drawer :deep(.el-input__inner) {
padding: 0 0 0 6px;
}
.layout-config-drawer :deep(.el-input-group__append) {
padding: 0 10px;
}
.layout-config-drawer :deep(.el-drawer__header) {
margin-bottom: 0 !important;
}
.layout-config-drawer :deep(.el-drawer__body) {
padding: 0;
}
.layout-mode-styles-box {
padding: 20px;
}
.layout-mode-box-style-row {
margin-bottom: 15px;
}
.layout-mode-style {
position: relative;
height: 100px;
border: 1px solid var(--el-border-color-light);
border-radius: var(--el-border-radius-small);
&:hover,
&.active {
border: 1px solid var(--el-color-primary);
}
.layout-mode-style-name {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
color: var(--el-color-primary-light-5);
border-radius: 50%;
height: 50px;
width: 50px;
border: 1px solid var(--el-color-primary-light-3);
}
.layout-mode-style-box {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
}
&.default {
display: flex;
align-items: center;
justify-content: center;
.layout-mode-style-aside {
width: 18%;
height: 90%;
background-color: var(--el-border-color-lighter);
}
.layout-mode-style-container-box {
width: 68%;
height: 90%;
margin-left: 4%;
.layout-mode-style-header {
width: 100%;
height: 10%;
background-color: var(--el-border-color-lighter);
}
.layout-mode-style-container {
width: 100%;
height: 85%;
background-color: var(--el-border-color-extra-light);
margin-top: 5%;
}
}
}
&.classic {
display: flex;
align-items: center;
justify-content: center;
.layout-mode-style-aside {
width: 18%;
height: 100%;
background-color: var(--el-border-color-lighter);
}
.layout-mode-style-container-box {
width: 82%;
height: 100%;
.layout-mode-style-header {
width: 100%;
height: 10%;
background-color: var(--el-border-color);
}
.layout-mode-style-container {
width: 100%;
height: 90%;
background-color: var(--el-border-color-extra-light);
}
}
}
&.streamline {
display: flex;
align-items: center;
justify-content: center;
.layout-mode-style-container-box {
width: 100%;
height: 100%;
.layout-mode-style-header {
width: 100%;
height: 10%;
background-color: var(--el-border-color);
}
.layout-mode-style-container {
width: 100%;
height: 90%;
background-color: var(--el-border-color-extra-light);
}
}
}
&.double {
display: flex;
align-items: center;
justify-content: center;
.layout-mode-style-aside {
width: 18%;
height: 100%;
background-color: var(--el-border-color);
}
.layout-mode-style-container-box {
width: 82%;
height: 100%;
.layout-mode-style-header {
width: 100%;
height: 10%;
background-color: var(--el-border-color);
}
.layout-mode-style-container {
width: 100%;
height: 90%;
background-color: var(--el-border-color-extra-light);
}
}
}
}
.w80 {
width: 90%;
}
</style>
<template>
<div class="layout-config-drawer">
<el-drawer :model-value="configStore.layout.showDrawer" title="布局配置" size="310px" @close="onCloseDrawer">
<el-scrollbar class="layout-mode-style-scrollbar">
<el-form ref="formRef" :model="configStore.layout">
<div class="layout-mode-styles-box">
<el-divider border-style="dashed">全局</el-divider>
<div class="layout-config-global">
<el-form-item label="后台页面切换动画">
<el-select @change="onCommitState($event, 'mainAnimation')"
:model-value="configStore.layout.mainAnimation"
:placeholder="'layouts.Please select an animation name'">
<el-option label="slide-right" value="slide-right"></el-option>
<el-option label="slide-left" value="slide-left"></el-option>
<el-option label="el-fade-in-linear" value="el-fade-in-linear"></el-option>
<el-option label="el-fade-in" value="el-fade-in"></el-option>
<el-option label="el-zoom-in-center" value="el-zoom-in-center"></el-option>
<el-option label="el-zoom-in-top" value="el-zoom-in-top"></el-option>
<el-option label="el-zoom-in-bottom" value="el-zoom-in-bottom"></el-option>
</el-select>
</el-form-item>
<el-form-item label="组件主题色">
<el-color-picker @change="onCommitColorState($event, 'elementUiPrimary')"
:model-value="configStore.getColorVal('elementUiPrimary')" />
</el-form-item>
<el-form-item label="表格标题栏背景颜色">
<el-color-picker @change="onCommitColorState($event, 'tableHeaderBackground')"
:model-value="configStore.getColorVal('tableHeaderBackground')" />
</el-form-item>
<el-form-item label="表格标题栏文字颜色">
<el-color-picker @change="onCommitColorState($event, 'tableHeaderColor')"
:model-value="configStore.getColorVal('tableHeaderColor')" />
</el-form-item>
<el-form-item label="表格激活栏颜色">
<el-color-picker @change="onCommitColorState($event, 'tableCurrent')"
:model-value="configStore.getColorVal('tableCurrent')" />
</el-form-item>
</div>
<el-divider border-style="dashed">侧边栏</el-divider>
<div class="layout-config-aside">
<el-form-item label="侧边菜单栏背景色">
<el-color-picker @change="onCommitColorState($event, 'menuBackground')"
:model-value="configStore.getColorVal('menuBackground')" />
</el-form-item>
<el-form-item label="侧边菜单文字颜色">
<el-color-picker @change="onCommitColorState($event, 'menuColor')"
:model-value="configStore.getColorVal('menuColor')" />
</el-form-item>
<el-form-item label="侧边菜单激活项背景色">
<el-color-picker @change="onCommitColorState($event, 'menuActiveBackground')"
:model-value="configStore.getColorVal('menuActiveBackground')" />
</el-form-item>
<el-form-item label="侧边菜单激活项文字色">
<el-color-picker @change="onCommitColorState($event, 'menuActiveColor')"
:model-value="configStore.getColorVal('menuActiveColor')" />
</el-form-item>
<el-form-item label="显示侧边菜单顶栏(LOGO栏)">
<el-switch @change="onCommitState($event, 'menuShowTopBar')"
:model-value="configStore.layout.menuShowTopBar"></el-switch>
</el-form-item>
<el-form-item label="侧边菜单顶栏背景色">
<el-color-picker @change="onCommitColorState($event, 'menuTopBarBackground')"
:model-value="configStore.getColorVal('menuTopBarBackground')" />
</el-form-item>
<el-form-item label="侧边菜单宽度(展开时)">
<el-input maxlength="32" show-word-limit @input="onCommitState($event, 'menuWidth')"
type="number" :step="10" :model-value="configStore.layout.menuWidth">
<template #append>px</template>
</el-input>
</el-form-item>
<!-- <el-form-item label="侧边菜单默认图标">-->
<!-- <IconSelector-->
<!-- @change="onCommitMenuDefaultIcon($event, 'menuDefaultIcon')"-->
<!-- :model-value="configStore.layout.menuDefaultIcon"-->
<!-- />-->
<!-- </el-form-item>-->
<!-- <el-form-item label="侧边菜单水平折叠">-->
<!-- <el-switch-->
<!-- @change="onCommitState($event, 'menuCollapse')"-->
<!-- :model-value="configStore.layout.menuCollapse"-->
<!-- ></el-switch>-->
<!-- </el-form-item>-->
<!-- <el-form-item label="侧边菜单手风琴">-->
<!-- <el-switch-->
<!-- @change="onCommitState($event, 'menuUniqueOpened')"-->
<!-- :model-value="configStore.layout.menuUniqueOpened"-->
<!-- ></el-switch>-->
<!-- </el-form-item>-->
</div>
<el-divider border-style="dashed">顶栏</el-divider>
<div class="layout-config-aside">
<el-form-item label="顶栏背景色">
<el-color-picker @change="onCommitColorState($event, 'headerBarBackground')"
:model-value="configStore.getColorVal('headerBarBackground')" />
</el-form-item>
<el-form-item label="顶栏文字色">
<el-color-picker @change="onCommitColorState($event, 'headerBarTabColor')"
:model-value="configStore.getColorVal('headerBarTabColor')" />
</el-form-item>
<!-- <el-form-item label="顶栏悬停时背景色">-->
<!-- <el-color-picker-->
<!-- @change="onCommitColorState($event, 'headerBarHoverBackground')"-->
<!-- :model-value="configStore.getColorVal('headerBarHoverBackground')"-->
<!-- />-->
<!-- </el-form-item>-->
<!-- <el-form-item label="顶栏菜单激活项背景色">-->
<!-- <el-color-picker-->
<!-- @change="onCommitColorState($event, 'headerBarTabActiveBackground')"-->
<!-- :model-value="configStore.getColorVal('headerBarTabActiveBackground')"-->
<!-- />-->
<!-- </el-form-item>-->
<!-- <el-form-item label="顶栏菜单激活项文字色">-->
<!-- <el-color-picker-->
<!-- @change="onCommitColorState($event, 'headerBarTabActiveColor')"-->
<!-- :model-value="configStore.getColorVal('headerBarTabActiveColor')"-->
<!-- />-->
<!-- </el-form-item>-->
</div>
<el-popconfirm @confirm="restoreDefault" title="确定要恢复全部配置到默认值吗？">
<template #reference>
<div class="ba-center">
<el-button class="w80" type="info">恢复默认</el-button>
</div>
</template>
</el-popconfirm>
</div>
</el-form>
</el-scrollbar>
</el-drawer>
</div>
</template>
<script setup lang="ts">
import { useConfig } from '@/stores/config'
import { useNavTabs } from '@/stores/navTabs'
import { useRouter } from 'vue-router'
import IconSelector from '@/components/baInput/components/iconSelector.vue'
import { STORE_CONFIG } from '@/stores/constant/cacheKey'
import { Local, Session } from '@/utils/storage'
import type { Layout } from '@/stores/interface'
const configStore = useConfig()
const navTabs = useNavTabs()
const router = useRouter()
const onCommitState = (value: any, name: any) => {
configStore.setLayout(name, value)
}
const onCommitColorState = (value: string | null, name: keyof Layout) => {
if (value === null) return
const colors = configStore.layout[name] as string[]
if (configStore.layout.isDark) {
colors[1] = value
} else {
colors[0] = value
}
configStore.setLayout(name, colors)
}
const setLayoutMode = (mode: string) => {
configStore.setLayoutMode(mode)
}
// 修改默认菜单图标
const onCommitMenuDefaultIcon = (value: any, name: any) => {
configStore.setLayout(name, value)
const menus = navTabs.state.tabsViewRoutes
navTabs.setTabsViewRoutes([])
setTimeout(() => {
navTabs.setTabsViewRoutes(menus)
}, 200)
}
const onCloseDrawer = () => {
configStore.setLayout('showDrawer', false)
}
const restoreDefault = () => {
Local.remove(STORE_CONFIG)
router.go(0)
}
</script>
<style scoped lang="scss">
.layout-config-drawer :deep(.el-input__inner) {
padding: 0 0 0 6px;
}
.layout-config-drawer :deep(.el-input-group__append) {
padding: 0 10px;
}
.layout-config-drawer :deep(.el-drawer__header) {
margin-bottom: 0 !important;
}
.layout-config-drawer :deep(.el-drawer__body) {
padding: 0;
}
.layout-mode-styles-box {
padding: 20px;
}
.layout-mode-box-style-row {
margin-bottom: 15px;
}
.layout-mode-style {
position: relative;
height: 100px;
border: 1px solid var(--el-border-color-light);
border-radius: var(--el-border-radius-small);
&:hover,
&.active {
border: 1px solid var(--el-color-primary);
}
.layout-mode-style-name {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
color: var(--el-color-primary-light-5);
border-radius: 50%;
height: 50px;
width: 50px;
border: 1px solid var(--el-color-primary-light-3);
}
.layout-mode-style-box {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
}
&.default {
display: flex;
align-items: center;
justify-content: center;
.layout-mode-style-aside {
width: 18%;
height: 90%;
background-color: var(--el-border-color-lighter);
}
.layout-mode-style-container-box {
width: 68%;
height: 90%;
margin-left: 4%;
.layout-mode-style-header {
width: 100%;
height: 10%;
background-color: var(--el-border-color-lighter);
}
.layout-mode-style-container {
width: 100%;
height: 85%;
background-color: var(--el-border-color-extra-light);
margin-top: 5%;
}
}
}
&.classic {
display: flex;
align-items: center;
justify-content: center;
.layout-mode-style-aside {
width: 18%;
height: 100%;
background-color: var(--el-border-color-lighter);
}
.layout-mode-style-container-box {
width: 82%;
height: 100%;
.layout-mode-style-header {
width: 100%;
height: 10%;
background-color: var(--el-border-color);
}
.layout-mode-style-container {
width: 100%;
height: 90%;
background-color: var(--el-border-color-extra-light);
}
}
}
&.streamline {
display: flex;
align-items: center;
justify-content: center;
.layout-mode-style-container-box {
width: 100%;
height: 100%;
.layout-mode-style-header {
width: 100%;
height: 10%;
background-color: var(--el-border-color);
}
.layout-mode-style-container {
width: 100%;
height: 90%;
background-color: var(--el-border-color-extra-light);
}
}
}
&.double {
display: flex;
align-items: center;
justify-content: center;
.layout-mode-style-aside {
width: 18%;
height: 100%;
background-color: var(--el-border-color);
}
.layout-mode-style-container-box {
width: 82%;
height: 100%;
.layout-mode-style-header {
width: 100%;
height: 10%;
background-color: var(--el-border-color);
}
.layout-mode-style-container {
width: 100%;
height: 90%;
background-color: var(--el-border-color-extra-light);
}
}
}
}
.w80 {
width: 90%;
}
</style>

158
src/template/dialog.vue
View File

@@ -1,79 +1,79 @@
<template>
<el-dialog width="600px" v-model.trim='dialogVisible' :title='title'>
<el-scrollbar>
<el-form :inline='false' :model='form' label-width='auto' class="form-one" :rules='rules' ref='formRef'>
<el-form-item label='角色名称'>
<el-input maxlength="32" show-word-limit v-model.trim='form.name' placeholder='请输入菜单名称' />
</el-form-item>
<el-form-item label='角色编码'>
<el-input maxlength="32" show-word-limit v-model.trim='form.code' placeholder='请输入菜单名称' />
</el-form-item>
<el-form-item label='角色描述'>
<el-input maxlength="300" show-word-limit v-model.trim='form.remark' :rows='2' type='textarea'
placeholder='请输入描述' />
</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 { ElMessage } from 'element-plus'
import TableStore from '@/utils/tableStore' // 若不是列表页面弹框可删除
const dialogVisible = ref(false)
const title = ref('')
const tableStore = inject('tableStore') as TableStore
const formRef = ref()
// 注意不要和表单ref的命名冲突
const form = reactive({
code: '',
name: '',
remark: '',
id: ''
})
const rules = {
name: [{ required: true, message: '角色名称不能为空', trigger: 'blur' }],
code: [{ required: true, message: '角色编码不能为空', trigger: 'blur' }]
}
const open = (text: string, data?: anyObj) => {
title.value = text
dialogVisible.value = true
if (data) {
// 表单赋值
for (let key in form) {
form[key] = data[key]
}
} else {
// 在此处恢复默认表单
for (let key in form) {
form[key] = ''
}
}
}
const submit = () => {
formRef.value.validate(async (valid) => {
if (valid) {
if (form.id) {
// await update(form)
} else {
// await create(form)
}
ElMessage.success('保存成功')
tableStore.index()
dialogVisible.value = false
}
})
}
defineExpose({ open })
</script>
<template>
<el-dialog width="600px" v-model.trim='dialogVisible' :title='title'>
<el-scrollbar>
<el-form :inline='false' :model='form' label-width='auto' class="form-one" :rules='rules' ref='formRef'>
<el-form-item label='角色名称'>
<el-input maxlength="32" show-word-limit v-model.trim='form.name' placeholder='请输入菜单名称' />
</el-form-item>
<el-form-item label='角色编码'>
<el-input maxlength="32" show-word-limit v-model.trim='form.code' placeholder='请输入菜单名称' />
</el-form-item>
<el-form-item label='角色描述'>
<el-input maxlength="300" show-word-limit v-model.trim='form.remark' :rows='2' type='textarea'
placeholder='请输入描述' />
</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 { ElMessage } from 'element-plus'
import TableStore from '@/utils/tableStore' // 若不是列表页面弹框可删除
const dialogVisible = ref(false)
const title = ref('')
const tableStore = inject('tableStore') as TableStore
const formRef = ref()
// 注意不要和表单ref的命名冲突
const form = reactive({
code: '',
name: '',
remark: '',
id: ''
})
const rules = {
name: [{ required: true, message: '请输入角色名称', trigger: 'blur' }],
code: [{ required: true, message: '请输入角色编码', trigger: 'blur' }]
}
const open = (text: string, data?: anyObj) => {
title.value = text
dialogVisible.value = true
if (data) {
// 表单赋值
for (let key in form) {
form[key] = data[key]
}
} else {
// 在此处恢复默认表单
for (let key in form) {
form[key] = ''
}
}
}
const submit = () => {
formRef.value.validate(async (valid) => {
if (valid) {
if (form.id) {
// await update(form)
} else {
// await create(form)
}
ElMessage.success('保存成功')
tableStore.index()
dialogVisible.value = false
}
})
}
defineExpose({ open })
</script>

272
src/views/auth/audit/index.vue
View File

@@ -1,136 +1,136 @@
<template>
<div class="default-main">
<div class="custom-table-header">
<div class="title">待审核用户</div>
<el-button :icon="Check" type="primary" @click="addRole" class="ml10">审核通过</el-button>
</div>
<Table ref="tableRef" />
</div>
</template>
<script setup lang="ts">
import { Check } from '@element-plus/icons-vue'
import { ref, onMounted, provide } from 'vue'
import TableStore from '@/utils/tableStore'
import Table from '@/components/table/index.vue'
import { ElMessage } from 'element-plus'
import { checkUser } from '@/api/user-boot/user'
defineOptions({
name: 'auth/audit'
})
const tableStore = new TableStore({
showPage: false,
method: 'POST',
url: '/user-boot/user/checkUserList',
column: [
// { width: '60', type: 'checkbox' },
{ title: '名称', field: 'name' },
{ title: '登录名', field: 'loginName' },
{ title: '角色', field: 'roleName' },
// { title: '部门', field: 'deptId' },
{ title: '电话', field: 'phoneShow' },
{ title: '注册时间', field: 'registerTime', sortable: true },
{ title: '类型', field: 'casualUserName' },
{ title: '状态', field: 'stateName' },
{
title: '操作',
width: '180',
render: 'buttons',
buttons: [
{
name: 'edit',
title: '审核通过',
type: 'primary',
icon: 'el-icon-Check',
render: 'basicButton',
click: row => {
checkUser([row.id]).then(res => {
tableStore.index()
ElMessage.success('操作成功')
})
}
},
{
name: 'del',
title: '审核不通过',
type: 'danger',
icon: 'el-icon-Close',
render: 'confirmButton',
popconfirm: {
confirmButtonText: '确认',
cancelButtonText: '取消',
confirmButtonType: 'danger',
title: '确定不通过该角色吗？'
},
click: row => {
ElMessage.warning('功能尚未实现')
}
}
]
}
],
loadCallback: () => {
tableStore.table.data.forEach((item: any) => {
item.deptId = item.deptId || '/'
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
}
switch (item.state) {
case 0:
item.stateName = '注销'
break
case 1:
item.stateName = '正常'
break
case 2:
item.stateName = '锁定'
break
case 3:
item.stateName = '待审核'
break
case 4:
item.stateName = '休眠'
break
case 5:
item.stateName = '密码过期'
break
default:
item.stateName = '/'
break
}
})
}
})
tableStore.table.params.casualUser = 0
tableStore.table.params.searchState = 0
tableStore.table.params.searchValue = ''
tableStore.table.params.searchBeginTime = ''
tableStore.table.params.searchEndTime = ''
tableStore.table.params.sortBy = ''
tableStore.table.params.orderBy = ''
provide('tableStore', tableStore)
onMounted(() => {
tableStore.index()
})
const addRole = () => {
if (!tableStore.table.selection.length) {
ElMessage.warning('请选择用户')
return
}
checkUser(tableStore.table.selection.map((item: any) => item.id)).then(res => {
tableStore.index()
ElMessage.success('操作成功')
})
}
</script>
<template>
<div class="default-main">
<div class="custom-table-header">
<div class="title">待审核用户</div>
<el-button :icon="Check" type="primary" @click="addRole" class="ml10">审核通过</el-button>
</div>
<Table ref="tableRef" />
</div>
</template>
<script setup lang="ts">
import { Check } from '@element-plus/icons-vue'
import { ref, onMounted, provide } from 'vue'
import TableStore from '@/utils/tableStore'
import Table from '@/components/table/index.vue'
import { ElMessage } from 'element-plus'
import { checkUser } from '@/api/user-boot/user'
defineOptions({
name: 'auth/audit'
})
const tableStore = new TableStore({
showPage: false,
method: 'POST',
url: '/user-boot/user/checkUserList',
column: [
{ width: '60', type: 'checkbox' },
{ title: '名称', field: 'name' },
{ title: '登录名', field: 'loginName' },
{ title: '角色', field: 'roleName' },
// { title: '部门', field: 'deptId' },
{ title: '电话', field: 'phoneShow' },
{ title: '注册时间', field: 'registerTime', sortable: true },
{ title: '类型', field: 'casualUserName' },
{ title: '状态', field: 'stateName' },
{
title: '操作',
width: '180',
render: 'buttons',
buttons: [
{
name: 'edit',
title: '审核通过',
type: 'primary',
icon: 'el-icon-Check',
render: 'basicButton',
click: row => {
checkUser([row.id]).then(res => {
tableStore.index()
ElMessage.success('操作成功')
})
}
},
{
name: 'del',
title: '审核不通过',
type: 'danger',
icon: 'el-icon-Close',
render: 'confirmButton',
popconfirm: {
confirmButtonText: '确认',
cancelButtonText: '取消',
confirmButtonType: 'danger',
title: '确定不通过该角色吗？'
},
click: row => {
ElMessage.warning('功能尚未实现')
}
}
]
}
],
loadCallback: () => {
tableStore.table.data.forEach((item: any) => {
item.deptId = item.deptId || '/'
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
}
switch (item.state) {
case 0:
item.stateName = '注销'
break
case 1:
item.stateName = '正常'
break
case 2:
item.stateName = '锁定'
break
case 3:
item.stateName = '待审核'
break
case 4:
item.stateName = '休眠'
break
case 5:
item.stateName = '密码过期'
break
default:
item.stateName = '/'
break
}
})
}
})
tableStore.table.params.casualUser = 0
tableStore.table.params.searchState = 0
tableStore.table.params.searchValue = ''
tableStore.table.params.searchBeginTime = ''
tableStore.table.params.searchEndTime = ''
tableStore.table.params.sortBy = ''
tableStore.table.params.orderBy = ''
provide('tableStore', tableStore)
onMounted(() => {
tableStore.index()
})
const addRole = () => {
if (!tableStore.table.selection.length) {
ElMessage.warning('请选择用户')
return
}
checkUser(tableStore.table.selection.map((item: any) => item.id)).then(res => {
tableStore.index()
ElMessage.success('操作成功')
})
}
</script>

2
src/views/auth/menu/popupApi.vue
View File

@@ -78,7 +78,7 @@ const form: any = reactive({
})
const rules = {
code: [
{ required: true, message: '标识不能为空', trigger: 'blur' },
{ required: true, message: '请输入标识', trigger: 'blur' },
{
pattern: /^[a-zA-Z_]{1}[a-zA-Z0-9_]{2,20}$/,
message: '请输入至少3-20位英文',

4
src/views/auth/role/popupForm.vue
View File

@@ -46,8 +46,8 @@ const form = reactive({
type: 0
})
const rules = {
name: [{ required: true, message: '角色名称不能为空', trigger: 'blur' }],
code: [{ required: true, message: '角色编码不能为空', trigger: 'blur' }]
name: [{ required: true, message: '请输入角色名称', trigger: 'blur' }],
code: [{ required: true, message: '请输入角色编码', trigger: 'blur' }]
}
const dialogVisible = ref(false)
const title = ref('新增菜单')

24
src/views/auth/userList/popupEdit.vue
View File

@@ -140,15 +140,15 @@ const form = reactive({
})
const formRef = ref()
const rules: Partial<Record<string, Arrayable<FormItemRule>>> = {
name: [{ required: true, message: '用户名不能为空', trigger: 'blur' }],
role: [{ required: true, message: '角色不能为空', trigger: 'blur' }],
password: [{ required: true, message: '用户密码不能为空', trigger: 'blur' }],
loginName: [{ required: true, message: '登录名不能为空', trigger: 'blur' }],
casualUser: [{ required: true, message: '用户类型不能为空', trigger: 'blur' }],
smsNotice: [{ required: true, message: '短信通知不能为空', trigger: 'blur' }],
emailNotice: [{ required: true, message: '邮件通知不能为空', trigger: 'blur' }],
name: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
role: [{ required: true, message: '请输入角色', trigger: 'blur' }],
password: [{ required: true, message: '请输入用户密码', trigger: 'blur' }],
loginName: [{ required: true, message: '请输入登录名', trigger: 'blur' }],
casualUser: [{ required: true, message: '请输入用户类型', trigger: 'blur' }],
smsNotice: [{ required: true, message: '请输入短信通知', trigger: 'blur' }],
emailNotice: [{ required: true, message: '请输入邮件通知', trigger: 'blur' }],
email: [
{ required: false, message: '邮箱不能为空', trigger: 'blur' },
{ required: false, message: '请输入邮箱', trigger: 'blur' },
{
type: 'email',
message: "'请输入正确的邮箱地址",
@@ -156,16 +156,16 @@ const rules: Partial<Record<string, Arrayable<FormItemRule>>> = {
}
],
phone: [
{ required: false, message: '手机号不能为空', trigger: 'blur' },
{ required: false, message: '请输入手机号', trigger: 'blur' },
{
pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
message: '请输入正确的手机号码',
trigger: 'blur'
}
],
limitTime: [{ required: true, message: '时间段不能为空', trigger: 'blur' }],
limitTime: [{ required: true, message: '请选择时间段', trigger: 'blur' }],
limitIpStart: [
{ required: true, message: '起始IP不能为空', trigger: 'blur' },
{ required: true, message: '请输入起始IP', trigger: 'blur' },
{
required: true,
validator: (rule: any, value: string, callback: any) => {
@@ -183,7 +183,7 @@ const rules: Partial<Record<string, Arrayable<FormItemRule>>> = {
}
],
limitIpEnd: [
{ required: true, message: '结束IP不能为空', trigger: 'blur' },
{ required: true, message: '请输入结束IP', trigger: 'blur' },
{
required: true,
validator: (rule: any, value: string, callback: any) => {

2
src/views/govern/alarm/Device.vue
View File

@@ -9,7 +9,7 @@
@change="sourceChange"
:options="deviceTreeOptions"
:show-all-levels="false"
:props="{ checkStrictly: true }"
:props="{ checkStrictly: true, value: 'id', label: 'name' }"
clearable
></el-cascader>
<!-- <el-input maxlength="32" show-word-limit v-model.trim="tableStore.table.params.searchValue" placeholder="请输入设备名称" /> -->

2
src/views/govern/alarm/Steady.vue
View File

@@ -9,7 +9,7 @@
@change="sourceChange"
:options="deviceTreeOptions"
:show-all-levels="false"
:props="{ checkStrictly: true }"
:props="{ checkStrictly: true, value: 'id', label: 'name' }"
clearable
></el-cascader>
<!-- <el-input maxlength="32" show-word-limit v-model.trim="tableStore.table.params.searchValue" placeholder="请输入设备名称" /> -->

52
src/views/govern/alarm/Transient.vue
View File

@@ -10,7 +10,7 @@
v-model.trim="tableStore.table.params.cascader"
:options="deviceTreeOptions"
:show-all-levels="false"
:props="{ checkStrictly: true }"
:props="{ checkStrictly: true, value: 'id', label: 'name' }"
clearable
></el-cascader>
<!-- <el-input maxlength="32" show-word-limit v-model.trim="tableStore.table.params.searchValue" placeholder="请输入设备名称" /> -->
@@ -121,23 +121,24 @@ const tableStore = new TableStore({
method: 'POST',
publicHeight: 65,
exportName: '暂态事件',
column: [ {
column: [
{
title: '序号',
width: 80,
formatter: (row: any) => {
return (tableStore.table.params.pageNum - 1) * tableStore.table.params.pageSize + row.rowIndex + 1
}
},
{ title: '设备名称', field: 'equipmentName', minWidth: 120,align: 'center' },
{ title: '工程名称', field: 'engineeringName', minWidth: 120,align: 'center' },
{ title: '项目名称', field: 'projectName', minWidth: 120,align: 'center' },
{ title: '发生时刻', field: 'startTime', align: 'center', minWidth: 180,sortable: true },
{ title: '监测点名称', field: 'lineName', minWidth: 120,align: 'center' },
{ title: '事件描述', field: 'showName', minWidth: 120,align: 'center' },
{ title: '事件发生位置', field: 'evtParamPosition',minWidth: 150, align: 'center' },
{ title: '相别', field: 'evtParamPhase',minWidth: 80, align: 'center' },
{ title: '持续时间(s)', field: 'evtParamTm',minWidth: 80, align: 'center',sortable: true },
{ title: '暂降(聚升)幅值(%)', minWidth: 100, field: 'evtParamVVaDepth', align: 'center',sortable: true },
{ title: '设备名称', field: 'equipmentName', minWidth: 120, align: 'center' },
{ title: '工程名称', field: 'engineeringName', minWidth: 120, align: 'center' },
{ title: '项目名称', field: 'projectName', minWidth: 120, align: 'center' },
{ title: '发生时刻', field: 'startTime', align: 'center', minWidth: 180, sortable: true },
{ title: '监测点名称', field: 'lineName', minWidth: 120, align: 'center' },
{ title: '事件描述', field: 'showName', minWidth: 120, align: 'center' },
{ title: '事件发生位置', field: 'evtParamPosition', minWidth: 150, align: 'center' },
{ title: '相别', field: 'evtParamPhase', minWidth: 80, align: 'center' },
{ title: '持续时间(s)', field: 'evtParamTm', minWidth: 80, align: 'center', sortable: true },
{ title: '暂降(聚升)幅值(%)', minWidth: 100, field: 'evtParamVVaDepth', align: 'center', sortable: true },
{
title: '操作',
@@ -153,7 +154,7 @@ const tableStore = new TableStore({
render: 'basicButton',
loading: 'loading1',
disabled: row => {
return !row.wavePath
return !row.wavePath
},
click: async row => {
row.loading1 = true
@@ -234,24 +235,24 @@ const tableStore = new TableStore({
icon: 'el-icon-DataLine',
render: 'basicButton',
disabled: row => {
return row.showName != '未知';
return row.showName != '未知'
}
},
{
name: 'edit',
title: '波形补召',
type: 'primary',
icon: 'el-icon-Check',
render: 'basicButton',
disabled: row => {
return row.wavePath || row.showName === '未知';
},
click: row => {
getFileByEventId(row.id).then(res => {
name: 'edit',
title: '波形补召',
type: 'primary',
icon: 'el-icon-Check',
render: 'basicButton',
disabled: row => {
return row.wavePath || row.showName === '未知'
},
click: row => {
getFileByEventId(row.id).then(res => {
ElMessage.success(res.message)
tableStore.index()
})
}
}
}
]
}
@@ -313,7 +314,6 @@ const sourceChange = (e: any) => {
tableStore.table.params.engineeringid = e[1] || ''
tableStore.table.params.projectId = e[2] || ''
}
}
// tableStore.table.params.engineeringid = e[1] || ''

26
src/views/govern/alarm/index.vue
View File

@@ -34,19 +34,19 @@ const deviceTree = ref([])
const activeName = ref('1')
const key = ref(0)
getDeviceTree().then(res => {
res.data.forEach((item: any) => {
item.value = item.id
item.label = item.name
item.children.forEach((child: any) => {
child.value = child.id
child.label = child.name
child.children.forEach((grand: any) => {
grand.value = grand.id
grand.label = grand.name
delete grand.children
})
})
})
// res.data.forEach((item: any) => {
// item.value = item.id
// item.label = item.name
// item.children.forEach((child: any) => {
// child.value = child.id
// child.label = child.name
// child.children.forEach((grand: any) => {
// grand.value = grand.id
// grand.label = grand.name
// delete grand.children
// })
// })
// })
deviceTree.value = res.data
key.value += 1
})

1178
src/views/govern/device/control/supplementaryRecruitment/history.vue
View File

File diff suppressed because it is too large Load Diff

18
src/views/govern/manage/basic/popupVersion.vue
View File

@@ -153,15 +153,15 @@ const form = reactive<any>({
file: []
})
const rules = {
type: [{ required: true, message: '装置类型不能为空', trigger: 'change' }],
devType: [{ required: true, message: '装置型号不能为空', trigger: 'change' }],
versionNo: [{ required: true, message: '版本号不能为空', trigger: 'blur' }],
versionType: [{ required: true, message: '版本类型不能为空', trigger: 'blur' }],
versionAgreement: [{ required: true, message: '版本协议不能为空', trigger: 'blur' }],
versionDate: [{ required: true, message: '版本日期不能为空', trigger: 'blur' }],
description: [{ required: true, message: '描述不能为空', trigger: 'blur' }],
crcInfo: [{ required: true, message: 'CRC校验不能为空', trigger: 'blur' }],
file: [{ required: true, message: '升级文件不能为空', trigger: 'blur' }]
type: [{ required: true, message: '请选择装置类型', trigger: 'change' }],
devType: [{ required: true, message: '请选择装置型号', trigger: 'change' }],
versionNo: [{ required: true, message: '请输入版本号', trigger: 'blur' }],
versionType: [{ required: true, message: '请输入版本类型', trigger: 'blur' }],
versionAgreement: [{ required: true, message: '请输入版本协议', trigger: 'blur' }],
versionDate: [{ required: true, message: '请输入版本日期', trigger: 'blur' }],
description: [{ required: true, message: '请输入描述', trigger: 'blur' }],
crcInfo: [{ required: true, message: '请输入CRC校验', trigger: 'blur' }],
file: [{ required: true, message: '请输入升级文件', trigger: 'blur' }]
}
const typeChange = () => {
// console.log(form.type)

14
src/views/govern/manage/factory.vue
View File

@@ -233,13 +233,13 @@ const form = reactive({
sort: 0
})
const rules = reactive({
name: [{ required: true, message: '设备名不能为空', trigger: 'blur' }],
ndid: [{ required: true, message: '网络设备id不能为空', trigger: 'blur' }],
devType: [{ required: true, message: '设备类型不能为空', trigger: 'change' }],
devModel: [{ required: true, message: '设备型号不能为空', trigger: 'change' }],
devAccessMethod: [{ required: true, message: '接入方式不能为空', trigger: 'blur' }],
cntractNo: [{ required: true, message: '合同号不能为空', trigger: 'blur' }],
sort: [{ required: true, message: '排序不能为空', trigger: 'blur' }]
name: [{ required: true, message: '请输入设备名', trigger: 'blur' }],
ndid: [{ required: true, message: '请输入网络设备id', trigger: 'blur' }],
devType: [{ required: true, message: '请选择设备类型', trigger: 'change' }],
devModel: [{ required: true, message: '请选择设备型号', trigger: 'change' }],
devAccessMethod: [{ required: true, message: '请输入接入方式', trigger: 'blur' }],
cntractNo: [{ required: true, message: '请输入合同号', trigger: 'blur' }],
sort: [{ required: true, message: '请输入排序', trigger: 'blur' }]
})
const qrcodeFlag = ref(false)
const tableKey = ref(0)

12
src/views/govern/sensitiveLoadMange/detail.vue
View File

@@ -63,12 +63,12 @@ const form = reactive<any>({
sort:100
})
const rules = {
substationName: [{ required: true, message: '所属厂站名称不能为空', trigger: 'blur' }],
name: [{ required: true, message: '敏感用户名称不能为空', trigger: 'blur' }],
loadType: [{ required: true, message: '请选择敏感负荷类型', trigger: 'blur' }],
installedCapacity: [{ required: true, message: '用户协议容量不能为空', trigger: 'blur' }],
userAgreementCapacity: [{ required: true, message: '装机容量不能为空', trigger: 'blur' }],
sort: [{ required: true, message: '排序不能为空', trigger: 'blur' }]
substationName: [{ required: true, message: '请输入所属厂站名称', trigger: 'blur' }],
name: [{ required: true, message: '请输入敏感用户名称', trigger: 'blur' }],
loadType: [{ required: true, message: '请输入请选择敏感负荷类型', trigger: 'blur' }],
installedCapacity: [{ required: true, message: '请输入用户协议容量', trigger: 'blur' }],
userAgreementCapacity: [{ required: true, message: '请输入装机容量', trigger: 'blur' }],
sort: [{ required: true, message: '请输入排序', trigger: 'blur' }]
}
const dialogVisible = ref(false)

846
src/views/govern/terminal/deviceLedger/index.vue
View File

@@ -1,423 +1,423 @@
<template>
<div class="default-main">
<TableHeader>
<template #select>
<el-form-item label="设备类型">
<!-- <el-input maxlength="32" show-word-limit v-model.trim="tableStore.table.params.searchValue" placeholder="请输入设备类型" /> -->
<el-select v-model.trim="tableStore.table.params.devType" clearable @change="devTypeChange"
placeholder="请选择设备类型">
<el-option v-for="item in devTypeOptions" :key="item.value" :label="item.label"
:value="item.value" />
</el-select>
</el-form-item>
<el-form-item label="设备型号">
<el-select v-model.trim="tableStore.table.params.devModel" clearable placeholder="请选择设备型号">
<el-option v-for="item in devModelOptionsFilter" :key="item.value" :label="item.label"
:value="item.value" />
</el-select>
</el-form-item>
<el-form-item label="通讯协议">
<el-select v-model.trim="tableStore.table.params.devAccessMethod" clearable placeholder="请选择通讯协议">
<el-option label="MQTT" value="mqtt"></el-option>
<el-option label="CLD" value="cloud"></el-option>
</el-select>
</el-form-item>
<el-form-item label="状态">
<el-select v-model.trim="tableStore.table.params.status" clearable placeholder="请选择状态">
<el-option label="未注册" :value="1"></el-option>
<el-option label="注册" :value="2"></el-option>
<el-option label="接入" :value="3"></el-option>
</el-select>
</el-form-item>
</template>
<template v-slot:operation>
<el-button type="primary" @click="downLoadFile" class="ml10" icon="el-icon-Download">
模版下载
</el-button>
<el-upload style="display: inline-block" action="" accept=".xlsx" class="upload-demo"
:show-file-list="false" :auto-upload="false" :on-change="bulkImport">
<el-button type="primary" class="ml10" icon="el-icon-Tickets">批量导入</el-button>
</el-upload>
<el-button type="primary" class="ml10" @click="add" icon="el-icon-Plus">新增设备</el-button>
</template>
</TableHeader>
<Table ref="tableRef"></Table>
<el-dialog :title="dialogTitle" v-model.trim="dialogFormVisible" :close-on-click-modal="false"
:before-close="resetForm" draggable width="40%">
<el-form :model="form" label-width="120px" :rules="rules" ref="ruleFormRef">
<el-form-item label="设备名称:" prop="name">
<el-input maxlength="32" show-word-limit v-model.trim="form.name" autocomplete="off" clearable
placeholder="请输入（项目名称+设备名称）"></el-input>
</el-form-item>
<el-form-item label="网络设备ID:" prop="ndid" class="top">
<el-input maxlength="32" show-word-limit v-model.trim="form.ndid" autocomplete="off"
placeholder="请输入"></el-input>
</el-form-item>
<el-form-item label="设备类型:" prop="devType" class="top">
<el-select v-model.trim="form.devType" placeholder="请选择" @change="formDevTypeChange" clearable>
<el-option v-for="item in devTypeOptions" :key="item.value" :label="item.label"
:value="item.value"></el-option>
</el-select>
</el-form-item>
<el-form-item label="设备型号:" prop="devModel" class="top">
<el-select v-model.trim="form.devModel" filterable placeholder="请选择" clearable>
<el-option v-for="item in formDevModelOptionsFilter" :key="item.value" :label="item.label"
:value="item.value"></el-option>
</el-select>
</el-form-item>
<el-form-item label="通讯协议:" prop="devAccessMethod" class="top">
<el-select v-model.trim="form.devAccessMethod" placeholder="请选择" clearable>
<el-option label="MQTT" value="MQTT"></el-option>
<el-option label="CLD" value="cloud"></el-option>
</el-select>
</el-form-item>
<el-form-item label="合同号:" prop="cntractNo" class="top">
<el-input maxlength="32" show-word-limit v-model.trim="form.cntractNo" autocomplete="off"
placeholder="请输入"></el-input>
</el-form-item>
</el-form>
<template #footer>
<el-button @click="resetForm">取 消</el-button>
<el-button type="primary" @click="onSubmit">确 定</el-button>
</template>
</el-dialog>
<div class="qrcode-label">
<div class="qrcode-label-title">{{ deivce.mac }}</div>
<img class="qrcode-label-img" alt="二维码加载失败" :src="deivce.qrPath" />
</div>
</div>
</template>
<script setup lang="ts">
import { ref, onMounted, provide, computed, reactive, nextTick } from 'vue'
import TableStore from '@/utils/tableStore'
import Table from '@/components/table/index.vue'
import TableHeader from '@/components/table/header/index.vue'
import { queryByCode, queryByid, queryCsDictTree } from '@/api/system-boot/dictTree'
import { ElMessage, ElMessageBox } from 'element-plus'
import {
addEquipmentDelivery,
deleteEquipmentDelivery,
editEquipmentDelivery,
batchImportDevice,
resetEquipmentDelivery,
governDeviceRegister,
portableDeviceRegister,
portableDeviceAccess,
getExcelTemplate
} from '@/api/cs-system-boot/device'
import html2canvas from 'html2canvas'
import { fullUrl } from '@/utils/common'
defineOptions({
name: 'govern/log/debug'
})
const devTypeOptions: any = ref([])
const deivce: any = ref({})
const ruleFormRef = ref()
const form = reactive({
cntractNo: '',
devAccessMethod: 'mqtt',
devModel: '',
devType: '',
name: '',
ndid: ''
})
const rules = reactive({
name: [{ required: true, message: '设备名不能为空', trigger: 'blur' }],
ndid: [{ required: true, message: '网络设备id不能为空', trigger: 'blur' }],
devType: [{ required: true, message: '设备类型不能为空', trigger: 'change' }],
devModel: [{ required: true, message: '设备型号不能为空', trigger: 'change' }],
devAccessMethod: [{ required: true, message: '接入方式不能为空', trigger: 'blur' }],
cntractNo: [{ required: true, message: '合同号不能为空', trigger: 'blur' }]
})
const dialogFormVisible = ref(false)
const dialogTitle = ref('新增设备')
const devModelOptions: any = ref([])
queryByCode('Device_Type').then(res => {
queryCsDictTree(res.data.id).then(res => {
devTypeOptions.value = res.data.map((item: any) => {
return {
value: item.id,
label: item.name,
...item
}
})
})
queryByid(res.data.id).then(res => {
devModelOptions.value = res.data.map((item: any) => {
return {
value: item.id,
label: item.name,
...item
}
})
})
})
const devModelOptionsFilter = computed(() => {
return devModelOptions.value.filter((item: any) => {
if (tableStore.table.params.devType) {
return item.pid == tableStore.table.params.devType
} else {
return true
}
})
})
const formDevModelOptionsFilter = computed(() => {
return devModelOptions.value.filter((item: any) => {
if (form.devType) {
return item.pid == form.devType
} else {
return true
}
})
})
const tableStore = new TableStore({
url: '/cs-device-boot/EquipmentDelivery/list',
method: 'POST',
column: [
{ title: '设备名称', field: 'name' },
{
title: '设备类型',
field: 'devType',
formatter: row => {
return devTypeOptions.value.filter((item: any) => item.value == row.cellValue)[0]?.label
}
},
{
title: '设备型号',
field: 'devModel',
formatter: row => {
return devModelOptions.value.filter((item: any) => item.value == row.cellValue)[0]?.label
}
},
{
title: '通讯协议',
field: 'devAccessMethod',
formatter: row => {
return row.cellValue === 'MQTT' ? 'MQTT' : row.cellValue === 'cloud' ? 'CLD' : row.cellValue
}
},
{ title: '录入时间', field: 'createTime' , sortable: true},
{ title: '网络设备ID', field: 'ndid' },
{
title: '状态',
field: 'status',
width: 100,
render: 'tag',
custom: {
1: 'warning',
2: 'success',
3: 'primary',
4: 'primary'
},
replaceValue: {
1: '未注册',
2: '注册',
3: '接入',
4: '已取消'
}
// formatter: row => {
// return row.cellValue == 1 ? '未注册' : row.cellValue == 2 ? '注册' : '接入'
// },
},
{
title: '操作',
align: 'center',
width: '180',
render: 'buttons',
buttons: [
{
name: 'edit',
title: '编辑',
type: 'primary',
icon: 'el-icon-EditPen',
render: 'basicButton',
click: async row => {
dialogFormVisible.value = true
dialogTitle.value = '编辑设备'
for (let key in form) {
form[key] = row[key]
}
form.id = row.id
}
},
{
name: 'del',
title: '删除',
type: 'danger',
icon: 'el-icon-Delete',
render: 'basicButton',
click: row => {
ElMessageBox.confirm('确定删除该设备吗?', '提示', {
confirmButtonText: '确认',
cancelButtonText: '取消',
type: 'warning'
})
.then(() => {
deleteEquipmentDelivery(row.id).then(res => {
ElMessage.success('删除成功!')
tableStore.onTableAction('search', {})
})
})
.catch(e => { })
}
}
]
}
],
beforeSearchFun: () => {
for (let key in tableStore.table.params) {
if (tableStore.table.params[key] === '') {
delete tableStore.table.params[key]
}
}
}
})
tableStore.table.params.orderBy = 'desc'
// 设备类型
const devTypeChange = (e: any) => {
if (!e) {
return
}
tableStore.table.params.devModel = ''
}
// 下载模版
const downLoadFile = () => {
getExcelTemplate().then(res => {
let blob = new Blob([res], {
type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
})
const url = window.URL.createObjectURL(blob)
const link = document.createElement('a') // 创建a标签
link.href = url
link.download = '设备导入模版.xlsx' // 设置下载的文件名
document.body.appendChild(link)
link.click() //执行下载
document.body.removeChild(link)
ElMessage.success('下载成功')
})
}
// 导入模版
const bulkImport = (e: any) => {
batchImportDevice(e.raw).then((res: any) => {
if (res.type === 'application/json') {
const reader = new FileReader()
reader.readAsText(res)
reader.onload = (e: any) => {
let data = JSON.parse(e.target.result)
if (data.code === 'A0000') {
ElMessage.success(data.message)
tableStore.onTableAction('search', {})
} else {
ElMessage.error(data.message)
}
}
} else {
ElMessage.error('导入失败!')
let url = window.URL.createObjectURL(res)
let link = document.createElement('a')
link.style.display = 'none'
link.href = url
link.setAttribute('download', '导入失败.xlsx')
document.body.appendChild(link)
link.click()
document.body.removeChild(link)
}
})
}
// 新增
const add = () => {
dialogFormVisible.value = true
dialogTitle.value = '新增设备'
}
// 确认
const onSubmit = () => {
ruleFormRef.value.validate((valid: any) => {
if (valid) {
if (dialogTitle.value == '新增设备') {
addEquipmentDelivery(form).then(res => {
ElMessage.success('新增成功')
resetForm()
tableStore.onTableAction('search', {})
})
} else {
editEquipmentDelivery(form).then(res => {
ElMessage.success('修改成功')
resetForm()
tableStore.onTableAction('search', {})
})
}
}
})
}
// 清空表格
const resetForm = () => {
ruleFormRef.value.resetFields()
dialogFormVisible.value = false
nextTick(() => {
// 模拟待编辑数据
let user = {
cntractNo: '',
devAccessMethod: 'mqtt',
devModel: '',
devType: '',
name: '',
ndid: ''
}
Object.assign(form, user)
})
}
const formDevTypeChange = (e: any) => {
if (!e) {
return
}
form.devModel = ''
}
provide('tableStore', tableStore)
onMounted(() => {
setTimeout(() => {
tableStore.index()
}, 100)
})
const addMenu = () => { }
</script>
<style lang="scss" scoped>
.qrcode-label {
position: absolute;
top: 0;
right: 0;
z-index: -99;
display: flex;
align-items: center;
justify-content: center;
width: 180px;
height: 180px;
padding: 10px;
background: #fff;
flex-direction: column;
.qrcode-label-title {
margin-bottom: 10px;
font-size: 14px;
font-weight: bold;
}
.qrcode-label-img {
width: 140px;
height: 140px;
}
}
</style>
<template>
<div class="default-main">
<TableHeader>
<template #select>
<el-form-item label="设备类型">
<!-- <el-input maxlength="32" show-word-limit v-model.trim="tableStore.table.params.searchValue" placeholder="请输入设备类型" /> -->
<el-select v-model.trim="tableStore.table.params.devType" clearable @change="devTypeChange"
placeholder="请选择设备类型">
<el-option v-for="item in devTypeOptions" :key="item.value" :label="item.label"
:value="item.value" />
</el-select>
</el-form-item>
<el-form-item label="设备型号">
<el-select v-model.trim="tableStore.table.params.devModel" clearable placeholder="请选择设备型号">
<el-option v-for="item in devModelOptionsFilter" :key="item.value" :label="item.label"
:value="item.value" />
</el-select>
</el-form-item>
<el-form-item label="通讯协议">
<el-select v-model.trim="tableStore.table.params.devAccessMethod" clearable placeholder="请选择通讯协议">
<el-option label="MQTT" value="mqtt"></el-option>
<el-option label="CLD" value="cloud"></el-option>
</el-select>
</el-form-item>
<el-form-item label="状态">
<el-select v-model.trim="tableStore.table.params.status" clearable placeholder="请选择状态">
<el-option label="未注册" :value="1"></el-option>
<el-option label="注册" :value="2"></el-option>
<el-option label="接入" :value="3"></el-option>
</el-select>
</el-form-item>
</template>
<template v-slot:operation>
<el-button type="primary" @click="downLoadFile" class="ml10" icon="el-icon-Download">
模版下载
</el-button>
<el-upload style="display: inline-block" action="" accept=".xlsx" class="upload-demo"
:show-file-list="false" :auto-upload="false" :on-change="bulkImport">
<el-button type="primary" class="ml10" icon="el-icon-Tickets">批量导入</el-button>
</el-upload>
<el-button type="primary" class="ml10" @click="add" icon="el-icon-Plus">新增设备</el-button>
</template>
</TableHeader>
<Table ref="tableRef"></Table>
<el-dialog :title="dialogTitle" v-model.trim="dialogFormVisible" :close-on-click-modal="false"
:before-close="resetForm" draggable width="40%">
<el-form :model="form" label-width="120px" :rules="rules" ref="ruleFormRef">
<el-form-item label="设备名称:" prop="name">
<el-input maxlength="32" show-word-limit v-model.trim="form.name" autocomplete="off" clearable
placeholder="请输入（项目名称+设备名称）"></el-input>
</el-form-item>
<el-form-item label="网络设备ID:" prop="ndid" class="top">
<el-input maxlength="32" show-word-limit v-model.trim="form.ndid" autocomplete="off"
placeholder="请输入"></el-input>
</el-form-item>
<el-form-item label="设备类型:" prop="devType" class="top">
<el-select v-model.trim="form.devType" placeholder="请选择" @change="formDevTypeChange" clearable>
<el-option v-for="item in devTypeOptions" :key="item.value" :label="item.label"
:value="item.value"></el-option>
</el-select>
</el-form-item>
<el-form-item label="设备型号:" prop="devModel" class="top">
<el-select v-model.trim="form.devModel" filterable placeholder="请选择" clearable>
<el-option v-for="item in formDevModelOptionsFilter" :key="item.value" :label="item.label"
:value="item.value"></el-option>
</el-select>
</el-form-item>
<el-form-item label="通讯协议:" prop="devAccessMethod" class="top">
<el-select v-model.trim="form.devAccessMethod" placeholder="请选择" clearable>
<el-option label="MQTT" value="MQTT"></el-option>
<el-option label="CLD" value="cloud"></el-option>
</el-select>
</el-form-item>
<el-form-item label="合同号:" prop="cntractNo" class="top">
<el-input maxlength="32" show-word-limit v-model.trim="form.cntractNo" autocomplete="off"
placeholder="请输入"></el-input>
</el-form-item>
</el-form>
<template #footer>
<el-button @click="resetForm">取 消</el-button>
<el-button type="primary" @click="onSubmit">确 定</el-button>
</template>
</el-dialog>
<div class="qrcode-label">
<div class="qrcode-label-title">{{ deivce.mac }}</div>
<img class="qrcode-label-img" alt="二维码加载失败" :src="deivce.qrPath" />
</div>
</div>
</template>
<script setup lang="ts">
import { ref, onMounted, provide, computed, reactive, nextTick } from 'vue'
import TableStore from '@/utils/tableStore'
import Table from '@/components/table/index.vue'
import TableHeader from '@/components/table/header/index.vue'
import { queryByCode, queryByid, queryCsDictTree } from '@/api/system-boot/dictTree'
import { ElMessage, ElMessageBox } from 'element-plus'
import {
addEquipmentDelivery,
deleteEquipmentDelivery,
editEquipmentDelivery,
batchImportDevice,
resetEquipmentDelivery,
governDeviceRegister,
portableDeviceRegister,
portableDeviceAccess,
getExcelTemplate
} from '@/api/cs-system-boot/device'
import html2canvas from 'html2canvas'
import { fullUrl } from '@/utils/common'
defineOptions({
name: 'govern/log/debug'
})
const devTypeOptions: any = ref([])
const deivce: any = ref({})
const ruleFormRef = ref()
const form = reactive({
cntractNo: '',
devAccessMethod: 'mqtt',
devModel: '',
devType: '',
name: '',
ndid: ''
})
const rules = reactive({
name: [{ required: true, message: '请输入设备名', trigger: 'blur' }],
ndid: [{ required: true, message: '请输入网络设备id', trigger: 'blur' }],
devType: [{ required: true, message: '请选择设备类型', trigger: 'change' }],
devModel: [{ required: true, message: '请选择设备型号', trigger: 'change' }],
devAccessMethod: [{ required: true, message: '请输入接入方式', trigger: 'blur' }],
cntractNo: [{ required: true, message: '请输入合同号', trigger: 'blur' }]
})
const dialogFormVisible = ref(false)
const dialogTitle = ref('新增设备')
const devModelOptions: any = ref([])
queryByCode('Device_Type').then(res => {
queryCsDictTree(res.data.id).then(res => {
devTypeOptions.value = res.data.map((item: any) => {
return {
value: item.id,
label: item.name,
...item
}
})
})
queryByid(res.data.id).then(res => {
devModelOptions.value = res.data.map((item: any) => {
return {
value: item.id,
label: item.name,
...item
}
})
})
})
const devModelOptionsFilter = computed(() => {
return devModelOptions.value.filter((item: any) => {
if (tableStore.table.params.devType) {
return item.pid == tableStore.table.params.devType
} else {
return true
}
})
})
const formDevModelOptionsFilter = computed(() => {
return devModelOptions.value.filter((item: any) => {
if (form.devType) {
return item.pid == form.devType
} else {
return true
}
})
})
const tableStore = new TableStore({
url: '/cs-device-boot/EquipmentDelivery/list',
method: 'POST',
column: [
{ title: '设备名称', field: 'name' },
{
title: '设备类型',
field: 'devType',
formatter: row => {
return devTypeOptions.value.filter((item: any) => item.value == row.cellValue)[0]?.label
}
},
{
title: '设备型号',
field: 'devModel',
formatter: row => {
return devModelOptions.value.filter((item: any) => item.value == row.cellValue)[0]?.label
}
},
{
title: '通讯协议',
field: 'devAccessMethod',
formatter: row => {
return row.cellValue === 'MQTT' ? 'MQTT' : row.cellValue === 'cloud' ? 'CLD' : row.cellValue
}
},
{ title: '录入时间', field: 'createTime' , sortable: true},
{ title: '网络设备ID', field: 'ndid' },
{
title: '状态',
field: 'status',
width: 100,
render: 'tag',
custom: {
1: 'warning',
2: 'success',
3: 'primary',
4: 'primary'
},
replaceValue: {
1: '未注册',
2: '注册',
3: '接入',
4: '已取消'
}
// formatter: row => {
// return row.cellValue == 1 ? '未注册' : row.cellValue == 2 ? '注册' : '接入'
// },
},
{
title: '操作',
align: 'center',
width: '180',
render: 'buttons',
buttons: [
{
name: 'edit',
title: '编辑',
type: 'primary',
icon: 'el-icon-EditPen',
render: 'basicButton',
click: async row => {
dialogFormVisible.value = true
dialogTitle.value = '编辑设备'
for (let key in form) {
form[key] = row[key]
}
form.id = row.id
}
},
{
name: 'del',
title: '删除',
type: 'danger',
icon: 'el-icon-Delete',
render: 'basicButton',
click: row => {
ElMessageBox.confirm('确定删除该设备吗?', '提示', {
confirmButtonText: '确认',
cancelButtonText: '取消',
type: 'warning'
})
.then(() => {
deleteEquipmentDelivery(row.id).then(res => {
ElMessage.success('删除成功!')
tableStore.onTableAction('search', {})
})
})
.catch(e => { })
}
}
]
}
],
beforeSearchFun: () => {
for (let key in tableStore.table.params) {
if (tableStore.table.params[key] === '') {
delete tableStore.table.params[key]
}
}
}
})
tableStore.table.params.orderBy = 'desc'
// 设备类型
const devTypeChange = (e: any) => {
if (!e) {
return
}
tableStore.table.params.devModel = ''
}
// 下载模版
const downLoadFile = () => {
getExcelTemplate().then(res => {
let blob = new Blob([res], {
type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
})
const url = window.URL.createObjectURL(blob)
const link = document.createElement('a') // 创建a标签
link.href = url
link.download = '设备导入模版.xlsx' // 设置下载的文件名
document.body.appendChild(link)
link.click() //执行下载
document.body.removeChild(link)
ElMessage.success('下载成功')
})
}
// 导入模版
const bulkImport = (e: any) => {
batchImportDevice(e.raw).then((res: any) => {
if (res.type === 'application/json') {
const reader = new FileReader()
reader.readAsText(res)
reader.onload = (e: any) => {
let data = JSON.parse(e.target.result)
if (data.code === 'A0000') {
ElMessage.success(data.message)
tableStore.onTableAction('search', {})
} else {
ElMessage.error(data.message)
}
}
} else {
ElMessage.error('导入失败!')
let url = window.URL.createObjectURL(res)
let link = document.createElement('a')
link.style.display = 'none'
link.href = url
link.setAttribute('download', '导入失败.xlsx')
document.body.appendChild(link)
link.click()
document.body.removeChild(link)
}
})
}
// 新增
const add = () => {
dialogFormVisible.value = true
dialogTitle.value = '新增设备'
}
// 确认
const onSubmit = () => {
ruleFormRef.value.validate((valid: any) => {
if (valid) {
if (dialogTitle.value == '新增设备') {
addEquipmentDelivery(form).then(res => {
ElMessage.success('新增成功')
resetForm()
tableStore.onTableAction('search', {})
})
} else {
editEquipmentDelivery(form).then(res => {
ElMessage.success('修改成功')
resetForm()
tableStore.onTableAction('search', {})
})
}
}
})
}
// 清空表格
const resetForm = () => {
ruleFormRef.value.resetFields()
dialogFormVisible.value = false
nextTick(() => {
// 模拟待编辑数据
let user = {
cntractNo: '',
devAccessMethod: 'mqtt',
devModel: '',
devType: '',
name: '',
ndid: ''
}
Object.assign(form, user)
})
}
const formDevTypeChange = (e: any) => {
if (!e) {
return
}
form.devModel = ''
}
provide('tableStore', tableStore)
onMounted(() => {
setTimeout(() => {
tableStore.index()
}, 100)
})
const addMenu = () => { }
</script>
<style lang="scss" scoped>
.qrcode-label {
position: absolute;
top: 0;
right: 0;
z-index: -99;
display: flex;
align-items: center;
justify-content: center;
width: 180px;
height: 180px;
padding: 10px;
background: #fff;
flex-direction: column;
.qrcode-label-title {
margin-bottom: 10px;
font-size: 14px;
font-weight: bold;
}
.qrcode-label-img {
width: 140px;
height: 140px;
}
}
</style>

848
src/views/govern/terminal/deviceMonitor/index.vue
View File

@@ -1,424 +1,424 @@
<template>
<div class="default-main">
<TableHeader>
<template #select>
<el-form-item label="设备类型">
<!-- <el-input maxlength="32" show-word-limit v-model.trim="tableStore.table.params.searchValue" placeholder="请输入设备类型" /> -->
<el-select v-model.trim="tableStore.table.params.devType" clearable @change="devTypeChange"
placeholder="请选择设备类型">
<el-option v-for="item in devTypeOptions" :key="item.value" :label="item.label"
:value="item.value" />
</el-select>
</el-form-item>
<el-form-item label="设备型号">
<el-select v-model.trim="tableStore.table.params.devModel" filterable clearable
placeholder="请选择设备型号">
<el-option v-for="item in devModelOptionsFilter" :key="item.value" :label="item.label"
:value="item.value" />
</el-select>
</el-form-item>
<el-form-item label="通讯协议">
<el-select v-model.trim="tableStore.table.params.devAccessMethod" clearable placeholder="请选择通讯协议">
<el-option label="MQTT" value="mqtt"></el-option>
<el-option label="CLD" value="cloud"></el-option>
</el-select>
</el-form-item>
<el-form-item label="状态">
<el-select v-model.trim="tableStore.table.params.status" clearable placeholder="请选择状态">
<el-option label="未注册" :value="1"></el-option>
<el-option label="注册" :value="2"></el-option>
<el-option label="接入" :value="3"></el-option>
</el-select>
</el-form-item>
</template>
<template v-slot:operation>
<el-button type="primary" @click="downLoadFile" class="ml10" icon="el-icon-Download">
模版下载
</el-button>
<el-upload style="display: inline-block" action="" accept=".xlsx" class="upload-demo"
:show-file-list="false" :auto-upload="false" :on-change="bulkImport">
<el-button type="primary" class="ml10" icon="el-icon-Tickets">批量导入</el-button>
</el-upload>
<el-button type="primary" class="ml10" @click="add" icon="el-icon-Plus">新增设备</el-button>
</template>
</TableHeader>
<Table ref="tableRef"></Table>
<el-dialog :title="dialogTitle" v-model.trim="dialogFormVisible" :close-on-click-modal="false"
:before-close="resetForm" draggable width="40%">
<el-form :model="form" label-width="120px" :rules="rules" ref="ruleFormRef">
<el-form-item label="设备名称:" prop="name">
<el-input maxlength="32" show-word-limit v-model.trim="form.name" autocomplete="off" clearable
placeholder="请输入（项目名称+设备名称）"></el-input>
</el-form-item>
<el-form-item label="网络设备ID:" prop="ndid" class="top">
<el-input maxlength="32" show-word-limit v-model.trim="form.ndid" autocomplete="off"
placeholder="请输入"></el-input>
</el-form-item>
<el-form-item label="设备类型:" prop="devType" class="top">
<el-select v-model.trim="form.devType" placeholder="请选择" @change="formDevTypeChange" clearable>
<el-option v-for="item in devTypeOptions" :key="item.value" :label="item.label"
:value="item.value"></el-option>
</el-select>
</el-form-item>
<el-form-item label="设备型号:" prop="devModel" class="top">
<el-select v-model.trim="form.devModel" filterable placeholder="请选择" clearable>
<el-option v-for="item in formDevModelOptionsFilter" :key="item.value" :label="item.label"
:value="item.value"></el-option>
</el-select>
</el-form-item>
<el-form-item label="通讯协议:" prop="devAccessMethod" class="top">
<el-select v-model.trim="form.devAccessMethod" placeholder="请选择" clearable>
<el-option label="MQTT" value="MQTT"></el-option>
<el-option label="CLD" value="cloud"></el-option>
</el-select>
</el-form-item>
<el-form-item label="合同号:" prop="cntractNo" class="top">
<el-input maxlength="32" show-word-limit v-model.trim="form.cntractNo" autocomplete="off"
placeholder="请输入"></el-input>
</el-form-item>
</el-form>
<template #footer>
<el-button @click="resetForm">取 消</el-button>
<el-button type="primary" @click="onSubmit">确 定</el-button>
</template>
</el-dialog>
<div class="qrcode-label">
<div class="qrcode-label-title">{{ deivce.mac }}</div>
<img class="qrcode-label-img" alt="二维码加载失败" :src="deivce.qrPath" />
</div>
</div>
</template>
<script setup lang="ts">
import { ref, onMounted, provide, computed, reactive, nextTick } from 'vue'
import TableStore from '@/utils/tableStore'
import Table from '@/components/table/index.vue'
import TableHeader from '@/components/table/header/index.vue'
import { queryByCode, queryByid, queryCsDictTree } from '@/api/system-boot/dictTree'
import { ElMessage, ElMessageBox } from 'element-plus'
import {
addEquipmentDelivery,
deleteEquipmentDelivery,
editEquipmentDelivery,
batchImportDevice,
resetEquipmentDelivery,
governDeviceRegister,
portableDeviceRegister,
portableDeviceAccess,
getExcelTemplate
} from '@/api/cs-system-boot/device'
import html2canvas from 'html2canvas'
import { fullUrl } from '@/utils/common'
defineOptions({
name: 'govern/log/debug'
})
const devTypeOptions: any = ref([])
const deivce: any = ref({})
const ruleFormRef = ref()
const form = reactive({
cntractNo: '',
devAccessMethod: 'mqtt',
devModel: '',
devType: '',
name: '',
ndid: ''
})
const rules = reactive({
name: [{ required: true, message: '设备名不能为空', trigger: 'blur' }],
ndid: [{ required: true, message: '网络设备id不能为空', trigger: 'blur' }],
devType: [{ required: true, message: '设备类型不能为空', trigger: 'change' }],
devModel: [{ required: true, message: '设备型号不能为空', trigger: 'change' }],
devAccessMethod: [{ required: true, message: '接入方式不能为空', trigger: 'blur' }],
cntractNo: [{ required: true, message: '合同号不能为空', trigger: 'blur' }]
})
const dialogFormVisible = ref(false)
const dialogTitle = ref('新增设备')
const devModelOptions: any = ref([])
queryByCode('Device_Type').then(res => {
queryCsDictTree(res.data.id).then(res => {
devTypeOptions.value = res.data.map((item: any) => {
return {
value: item.id,
label: item.name,
...item
}
})
})
queryByid(res.data.id).then(res => {
devModelOptions.value = res.data.map((item: any) => {
return {
value: item.id,
label: item.name,
...item
}
})
})
})
const devModelOptionsFilter = computed(() => {
return devModelOptions.value.filter((item: any) => {
if (tableStore.table.params.devType) {
return item.pid == tableStore.table.params.devType
} else {
return true
}
})
})
const formDevModelOptionsFilter = computed(() => {
return devModelOptions.value.filter((item: any) => {
if (form.devType) {
return item.pid == form.devType
} else {
return true
}
})
})
const tableStore = new TableStore({
url: '/cs-device-boot/EquipmentDelivery/list',
method: 'POST',
column: [
{ title: '设备名称', field: 'name' },
{
title: '设备类型',
field: 'devType',
formatter: row => {
return devTypeOptions.value.filter((item: any) => item.value == row.cellValue)[0]?.label
}
},
{
title: '设备型号',
field: 'devModel',
formatter: row => {
return devModelOptions.value.filter((item: any) => item.value == row.cellValue)[0]?.label
}
},
{
title: '通讯协议',
field: 'devAccessMethod',
formatter: row => {
return row.cellValue === 'MQTT' ? 'MQTT' : row.cellValue === 'cloud' ? 'CLD' : row.cellValue
}
},
{ title: '录入时间', field: 'createTime', sortable: true },
{ title: '网络设备ID', field: 'ndid' },
{
title: '状态',
field: 'status',
width: 100,
render: 'tag',
custom: {
1: 'warning',
2: 'success',
3: 'primary',
4: 'primary'
},
replaceValue: {
1: '未注册',
2: '注册',
3: '接入',
4: '已取消'
}
// formatter: row => {
// return row.cellValue == 1 ? '未注册' : row.cellValue == 2 ? '注册' : '接入'
// },
},
{
title: '操作',
align: 'center',
width: '180',
render: 'buttons',
buttons: [
{
name: 'edit',
title: '编辑',
type: 'primary',
icon: 'el-icon-EditPen',
render: 'basicButton',
click: async row => {
dialogFormVisible.value = true
dialogTitle.value = '编辑设备'
for (let key in form) {
form[key] = row[key]
}
form.id = row.id
}
},
{
name: 'del',
title: '删除',
type: 'danger',
icon: 'el-icon-Delete',
render: 'basicButton',
click: row => {
ElMessageBox.confirm('确定删除该设备吗?', '提示', {
confirmButtonText: '确认',
cancelButtonText: '取消',
type: 'warning'
})
.then(() => {
deleteEquipmentDelivery(row.id).then(res => {
ElMessage.success('删除成功!')
tableStore.onTableAction('search', {})
})
})
.catch(e => { })
}
}
]
}
],
beforeSearchFun: () => {
for (let key in tableStore.table.params) {
if (tableStore.table.params[key] === '') {
delete tableStore.table.params[key]
}
}
}
})
tableStore.table.params.orderBy = 'desc'
// 设备类型
const devTypeChange = (e: any) => {
if (!e) {
return
}
tableStore.table.params.devModel = ''
}
// 下载模版
const downLoadFile = () => {
getExcelTemplate().then(res => {
let blob = new Blob([res], {
type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
})
const url = window.URL.createObjectURL(blob)
const link = document.createElement('a') // 创建a标签
link.href = url
link.download = '设备导入模版.xlsx' // 设置下载的文件名
document.body.appendChild(link)
link.click() //执行下载
document.body.removeChild(link)
ElMessage.success('下载成功')
})
}
// 导入模版
const bulkImport = (e: any) => {
batchImportDevice(e.raw).then((res: any) => {
if (res.type === 'application/json') {
const reader = new FileReader()
reader.readAsText(res)
reader.onload = (e: any) => {
let data = JSON.parse(e.target.result)
if (data.code === 'A0000') {
ElMessage.success(data.message)
tableStore.onTableAction('search', {})
} else {
ElMessage.error(data.message)
}
}
} else {
ElMessage.error('导入失败!')
let url = window.URL.createObjectURL(res)
let link = document.createElement('a')
link.style.display = 'none'
link.href = url
link.setAttribute('download', '导入失败.xlsx')
document.body.appendChild(link)
link.click()
document.body.removeChild(link)
}
})
}
// 新增
const add = () => {
dialogFormVisible.value = true
dialogTitle.value = '新增设备'
}
// 确认
const onSubmit = () => {
ruleFormRef.value.validate((valid: any) => {
if (valid) {
if (dialogTitle.value == '新增设备') {
addEquipmentDelivery(form).then(res => {
ElMessage.success('新增成功')
resetForm()
tableStore.onTableAction('search', {})
})
} else {
editEquipmentDelivery(form).then(res => {
ElMessage.success('修改成功')
resetForm()
tableStore.onTableAction('search', {})
})
}
}
})
}
// 清空表格
const resetForm = () => {
ruleFormRef.value.resetFields()
dialogFormVisible.value = false
nextTick(() => {
// 模拟待编辑数据
let user = {
cntractNo: '',
devAccessMethod: 'mqtt',
devModel: '',
devType: '',
name: '',
ndid: ''
}
Object.assign(form, user)
})
}
const formDevTypeChange = (e: any) => {
if (!e) {
return
}
form.devModel = ''
}
provide('tableStore', tableStore)
onMounted(() => {
setTimeout(() => {
tableStore.index()
}, 100)
})
const addMenu = () => { }
</script>
<style lang="scss" scoped>
.qrcode-label {
position: absolute;
top: 0;
right: 0;
z-index: -99;
display: flex;
align-items: center;
justify-content: center;
width: 180px;
height: 180px;
padding: 10px;
background: #fff;
flex-direction: column;
.qrcode-label-title {
margin-bottom: 10px;
font-size: 14px;
font-weight: bold;
}
.qrcode-label-img {
width: 140px;
height: 140px;
}
}
</style>
<template>
<div class="default-main">
<TableHeader>
<template #select>
<el-form-item label="设备类型">
<!-- <el-input maxlength="32" show-word-limit v-model.trim="tableStore.table.params.searchValue" placeholder="请输入设备类型" /> -->
<el-select v-model.trim="tableStore.table.params.devType" clearable @change="devTypeChange"
placeholder="请选择设备类型">
<el-option v-for="item in devTypeOptions" :key="item.value" :label="item.label"
:value="item.value" />
</el-select>
</el-form-item>
<el-form-item label="设备型号">
<el-select v-model.trim="tableStore.table.params.devModel" filterable clearable
placeholder="请选择设备型号">
<el-option v-for="item in devModelOptionsFilter" :key="item.value" :label="item.label"
:value="item.value" />
</el-select>
</el-form-item>
<el-form-item label="通讯协议">
<el-select v-model.trim="tableStore.table.params.devAccessMethod" clearable placeholder="请选择通讯协议">
<el-option label="MQTT" value="mqtt"></el-option>
<el-option label="CLD" value="cloud"></el-option>
</el-select>
</el-form-item>
<el-form-item label="状态">
<el-select v-model.trim="tableStore.table.params.status" clearable placeholder="请选择状态">
<el-option label="未注册" :value="1"></el-option>
<el-option label="注册" :value="2"></el-option>
<el-option label="接入" :value="3"></el-option>
</el-select>
</el-form-item>
</template>
<template v-slot:operation>
<el-button type="primary" @click="downLoadFile" class="ml10" icon="el-icon-Download">
模版下载
</el-button>
<el-upload style="display: inline-block" action="" accept=".xlsx" class="upload-demo"
:show-file-list="false" :auto-upload="false" :on-change="bulkImport">
<el-button type="primary" class="ml10" icon="el-icon-Tickets">批量导入</el-button>
</el-upload>
<el-button type="primary" class="ml10" @click="add" icon="el-icon-Plus">新增设备</el-button>
</template>
</TableHeader>
<Table ref="tableRef"></Table>
<el-dialog :title="dialogTitle" v-model.trim="dialogFormVisible" :close-on-click-modal="false"
:before-close="resetForm" draggable width="40%">
<el-form :model="form" label-width="120px" :rules="rules" ref="ruleFormRef">
<el-form-item label="设备名称:" prop="name">
<el-input maxlength="32" show-word-limit v-model.trim="form.name" autocomplete="off" clearable
placeholder="请输入（项目名称+设备名称）"></el-input>
</el-form-item>
<el-form-item label="网络设备ID:" prop="ndid" class="top">
<el-input maxlength="32" show-word-limit v-model.trim="form.ndid" autocomplete="off"
placeholder="请输入"></el-input>
</el-form-item>
<el-form-item label="设备类型:" prop="devType" class="top">
<el-select v-model.trim="form.devType" placeholder="请选择" @change="formDevTypeChange" clearable>
<el-option v-for="item in devTypeOptions" :key="item.value" :label="item.label"
:value="item.value"></el-option>
</el-select>
</el-form-item>
<el-form-item label="设备型号:" prop="devModel" class="top">
<el-select v-model.trim="form.devModel" filterable placeholder="请选择" clearable>
<el-option v-for="item in formDevModelOptionsFilter" :key="item.value" :label="item.label"
:value="item.value"></el-option>
</el-select>
</el-form-item>
<el-form-item label="通讯协议:" prop="devAccessMethod" class="top">
<el-select v-model.trim="form.devAccessMethod" placeholder="请选择" clearable>
<el-option label="MQTT" value="MQTT"></el-option>
<el-option label="CLD" value="cloud"></el-option>
</el-select>
</el-form-item>
<el-form-item label="合同号:" prop="cntractNo" class="top">
<el-input maxlength="32" show-word-limit v-model.trim="form.cntractNo" autocomplete="off"
placeholder="请输入"></el-input>
</el-form-item>
</el-form>
<template #footer>
<el-button @click="resetForm">取 消</el-button>
<el-button type="primary" @click="onSubmit">确 定</el-button>
</template>
</el-dialog>
<div class="qrcode-label">
<div class="qrcode-label-title">{{ deivce.mac }}</div>
<img class="qrcode-label-img" alt="二维码加载失败" :src="deivce.qrPath" />
</div>
</div>
</template>
<script setup lang="ts">
import { ref, onMounted, provide, computed, reactive, nextTick } from 'vue'
import TableStore from '@/utils/tableStore'
import Table from '@/components/table/index.vue'
import TableHeader from '@/components/table/header/index.vue'
import { queryByCode, queryByid, queryCsDictTree } from '@/api/system-boot/dictTree'
import { ElMessage, ElMessageBox } from 'element-plus'
import {
addEquipmentDelivery,
deleteEquipmentDelivery,
editEquipmentDelivery,
batchImportDevice,
resetEquipmentDelivery,
governDeviceRegister,
portableDeviceRegister,
portableDeviceAccess,
getExcelTemplate
} from '@/api/cs-system-boot/device'
import html2canvas from 'html2canvas'
import { fullUrl } from '@/utils/common'
defineOptions({
name: 'govern/log/debug'
})
const devTypeOptions: any = ref([])
const deivce: any = ref({})
const ruleFormRef = ref()
const form = reactive({
cntractNo: '',
devAccessMethod: 'mqtt',
devModel: '',
devType: '',
name: '',
ndid: ''
})
const rules = reactive({
name: [{ required: true, message: '请输入设备名', trigger: 'blur' }],
ndid: [{ required: true, message: '请输入网络设备id', trigger: 'blur' }],
devType: [{ required: true, message: '请选择设备类型', trigger: 'change' }],
devModel: [{ required: true, message: '请选择设备型号', trigger: 'change' }],
devAccessMethod: [{ required: true, message: '请输入接入方式', trigger: 'blur' }],
cntractNo: [{ required: true, message: '请输入合同号', trigger: 'blur' }]
})
const dialogFormVisible = ref(false)
const dialogTitle = ref('新增设备')
const devModelOptions: any = ref([])
queryByCode('Device_Type').then(res => {
queryCsDictTree(res.data.id).then(res => {
devTypeOptions.value = res.data.map((item: any) => {
return {
value: item.id,
label: item.name,
...item
}
})
})
queryByid(res.data.id).then(res => {
devModelOptions.value = res.data.map((item: any) => {
return {
value: item.id,
label: item.name,
...item
}
})
})
})
const devModelOptionsFilter = computed(() => {
return devModelOptions.value.filter((item: any) => {
if (tableStore.table.params.devType) {
return item.pid == tableStore.table.params.devType
} else {
return true
}
})
})
const formDevModelOptionsFilter = computed(() => {
return devModelOptions.value.filter((item: any) => {
if (form.devType) {
return item.pid == form.devType
} else {
return true
}
})
})
const tableStore = new TableStore({
url: '/cs-device-boot/EquipmentDelivery/list',
method: 'POST',
column: [
{ title: '设备名称', field: 'name' },
{
title: '设备类型',
field: 'devType',
formatter: row => {
return devTypeOptions.value.filter((item: any) => item.value == row.cellValue)[0]?.label
}
},
{
title: '设备型号',
field: 'devModel',
formatter: row => {
return devModelOptions.value.filter((item: any) => item.value == row.cellValue)[0]?.label
}
},
{
title: '通讯协议',
field: 'devAccessMethod',
formatter: row => {
return row.cellValue === 'MQTT' ? 'MQTT' : row.cellValue === 'cloud' ? 'CLD' : row.cellValue
}
},
{ title: '录入时间', field: 'createTime', sortable: true },
{ title: '网络设备ID', field: 'ndid' },
{
title: '状态',
field: 'status',
width: 100,
render: 'tag',
custom: {
1: 'warning',
2: 'success',
3: 'primary',
4: 'primary'
},
replaceValue: {
1: '未注册',
2: '注册',
3: '接入',
4: '已取消'
}
// formatter: row => {
// return row.cellValue == 1 ? '未注册' : row.cellValue == 2 ? '注册' : '接入'
// },
},
{
title: '操作',
align: 'center',
width: '180',
render: 'buttons',
buttons: [
{
name: 'edit',
title: '编辑',
type: 'primary',
icon: 'el-icon-EditPen',
render: 'basicButton',
click: async row => {
dialogFormVisible.value = true
dialogTitle.value = '编辑设备'
for (let key in form) {
form[key] = row[key]
}
form.id = row.id
}
},
{
name: 'del',
title: '删除',
type: 'danger',
icon: 'el-icon-Delete',
render: 'basicButton',
click: row => {
ElMessageBox.confirm('确定删除该设备吗?', '提示', {
confirmButtonText: '确认',
cancelButtonText: '取消',
type: 'warning'
})
.then(() => {
deleteEquipmentDelivery(row.id).then(res => {
ElMessage.success('删除成功!')
tableStore.onTableAction('search', {})
})
})
.catch(e => { })
}
}
]
}
],
beforeSearchFun: () => {
for (let key in tableStore.table.params) {
if (tableStore.table.params[key] === '') {
delete tableStore.table.params[key]
}
}
}
})
tableStore.table.params.orderBy = 'desc'
// 设备类型
const devTypeChange = (e: any) => {
if (!e) {
return
}
tableStore.table.params.devModel = ''
}
// 下载模版
const downLoadFile = () => {
getExcelTemplate().then(res => {
let blob = new Blob([res], {
type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
})
const url = window.URL.createObjectURL(blob)
const link = document.createElement('a') // 创建a标签
link.href = url
link.download = '设备导入模版.xlsx' // 设置下载的文件名
document.body.appendChild(link)
link.click() //执行下载
document.body.removeChild(link)
ElMessage.success('下载成功')
})
}
// 导入模版
const bulkImport = (e: any) => {
batchImportDevice(e.raw).then((res: any) => {
if (res.type === 'application/json') {
const reader = new FileReader()
reader.readAsText(res)
reader.onload = (e: any) => {
let data = JSON.parse(e.target.result)
if (data.code === 'A0000') {
ElMessage.success(data.message)
tableStore.onTableAction('search', {})
} else {
ElMessage.error(data.message)
}
}
} else {
ElMessage.error('导入失败!')
let url = window.URL.createObjectURL(res)
let link = document.createElement('a')
link.style.display = 'none'
link.href = url
link.setAttribute('download', '导入失败.xlsx')
document.body.appendChild(link)
link.click()
document.body.removeChild(link)
}
})
}
// 新增
const add = () => {
dialogFormVisible.value = true
dialogTitle.value = '新增设备'
}
// 确认
const onSubmit = () => {
ruleFormRef.value.validate((valid: any) => {
if (valid) {
if (dialogTitle.value == '新增设备') {
addEquipmentDelivery(form).then(res => {
ElMessage.success('新增成功')
resetForm()
tableStore.onTableAction('search', {})
})
} else {
editEquipmentDelivery(form).then(res => {
ElMessage.success('修改成功')
resetForm()
tableStore.onTableAction('search', {})
})
}
}
})
}
// 清空表格
const resetForm = () => {
ruleFormRef.value.resetFields()
dialogFormVisible.value = false
nextTick(() => {
// 模拟待编辑数据
let user = {
cntractNo: '',
devAccessMethod: 'mqtt',
devModel: '',
devType: '',
name: '',
ndid: ''
}
Object.assign(form, user)
})
}
const formDevTypeChange = (e: any) => {
if (!e) {
return
}
form.devModel = ''
}
provide('tableStore', tableStore)
onMounted(() => {
setTimeout(() => {
tableStore.index()
}, 100)
})
const addMenu = () => { }
</script>
<style lang="scss" scoped>
.qrcode-label {
position: absolute;
top: 0;
right: 0;
z-index: -99;
display: flex;
align-items: center;
justify-content: center;
width: 180px;
height: 180px;
padding: 10px;
background: #fff;
flex-direction: column;
.qrcode-label-title {
margin-bottom: 10px;
font-size: 14px;
font-weight: bold;
}
.qrcode-label-img {
width: 140px;
height: 140px;
}
}
</style>

268
src/views/setting/dictionary/list/popupDetailEdit.vue
View File

@@ -1,126 +1,142 @@
<template>
<el-dialog width="600px" v-model.trim='dialogVisible' :title='title'>
<el-scrollbar>
<el-form :inline='false' :model='form' label-width='auto' class="form-one" :rules='rules' ref='formRef'>
<el-form-item label='名称:' class='top' prop='name'>
<el-input maxlength="32" show-word-limit v-model.trim='form.name' placeholder='请输入名称'></el-input>
</el-form-item>
<el-form-item label='计算值:' class='top'>
<el-input maxlength="32" show-word-limit v-model.trim='form.value' placeholder="请输入计算值"></el-input>
</el-form-item>
<el-form-item class='top' label='对应算法:' prop='algoDescribe' v-if='form.openDescribe == 1'>
<el-input maxlength="32" show-word-limit v-model.trim='form.algoDescribe'
placeholder='请输入数字'></el-input>
</el-form-item>
<el-form-item class='top' label='编码:' prop='code'>
<el-input maxlength="32" show-word-limit v-model.trim='form.code'></el-input>
</el-form-item>
<el-form-item label='排序:' prop='sort' class='top'>
<el-input maxlength="32" show-word-limit-number v-model.trim='form.sort' :min='0' />
</el-form-item>
<el-form-item v-if='form.openLevel === 1' label='事件等级:'>
<el-select v-model.trim='form.level' placeholder='选择开启等级'>
<el-option v-for='item in EventOpenLevel' :key='item.value' :label='item.label'
:value='item.value'>
</el-option>
</el-select>
</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 { add, update } from '@/api/user-boot/role'
import { useAdminInfo } from '@/stores/adminInfo'
import { dictDataAdd, dictDataUpdate } from '@/api/system-boot/dicData'
defineOptions({
name: 'diction/list/detail/popupDetailEdit'
})
const adminInfo = useAdminInfo()
const tableStore = inject('tableStore') as TableStore
const formRef = ref()
// do not use same name with ref
const form = reactive({
algoDescribe: '',
code: '',
level: 0,
name: '',
value: '',
sort: 100,
typeId: '',
openLevel: 0,
openDescribe: 0,
typeName: '',
id: ''
})
const EventOpenLevel = [
{ value: 0, label: '普通' },
{ value: 1, label: '中等' },
{ value: 2, label: '严重' }
]
const rules = {
algoDescribe: [
{ required: false, message: '对应算法不能为空', trigger: 'blur' },
{
pattern: /^\d+$|^\d+[.]?\d+$/,
message: '请您数字对应算法',
trigger: 'blur'
}
],
name: [
{ required: true, message: '名称不能为空', trigger: 'blur' }
],
code: [
{ required: true, message: '编码不能为空', trigger: 'blur' }
],
sort: [
{ required: true, message: '排序不能为空', trigger: 'blur' }
]
}
const dialogVisible = ref(false)
const title = ref('新增')
const open = (text: string, data: anyObj) => {
dialogVisible.value = true
if (text === '编辑') {
for (let key in form) {
form[key] = data[key] === '/' ? '' : data[key]
}
} else if (text === '新增') {
for (let key in form) {
form[key] = ''
}
form.level = 0
form.sort = 100
form.typeId = data.typeId
form.openLevel = data.openLevel
form.typeName = data.typeName
form.openDescribe = data.openDescribe
}
title.value = form.typeName + text
}
const submit = async () => {
await formRef.value.validate()
if (form.id) {
await dictDataUpdate(form)
} else {
await dictDataAdd(form)
}
ElMessage.success('保存成功')
tableStore.index()
dialogVisible.value = false
}
defineExpose({ open })
</script>
<template>
<el-dialog width="600px" v-model.trim="dialogVisible" :title="title">
<el-scrollbar>
<el-form :inline="false" :model="form" label-width="auto" class="form-one" :rules="rules" ref="formRef">
<el-form-item label="名称:" class="top" prop="name">
<el-input
maxlength="32"
show-word-limit
v-model.trim="form.name"
placeholder="请输入名称"
></el-input>
</el-form-item>
<el-form-item label="计算值:" class="top">
<el-input
maxlength="32"
show-word-limit
v-model.trim="form.value"
placeholder="请输入计算值"
></el-input>
</el-form-item>
<el-form-item class="top" label="对应算法:" prop="algoDescribe" v-if="form.openDescribe == 1">
<el-input
maxlength="32"
show-word-limit
v-model.trim="form.algoDescribe"
placeholder="请输入数字"
></el-input>
</el-form-item>
<el-form-item class="top" label="编码:" prop="code">
<el-input
maxlength="32"
show-word-limit
v-model.trim="form.code"
placeholder="请输入编码"
></el-input>
</el-form-item>
<el-form-item label="排序:" prop="sort" class="top">
<el-input maxlength="32" show-word-limit-number v-model.trim="form.sort" :min="0" />
</el-form-item>
<el-form-item v-if="form.openLevel === 1" label="事件等级:">
<el-select v-model.trim="form.level" placeholder="选择开启等级">
<el-option
v-for="item in EventOpenLevel"
:key="item.value"
:label="item.label"
:value="item.value"
></el-option>
</el-select>
</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 { add, update } from '@/api/user-boot/role'
import { useAdminInfo } from '@/stores/adminInfo'
import { dictDataAdd, dictDataUpdate } from '@/api/system-boot/dicData'
defineOptions({
name: 'diction/list/detail/popupDetailEdit'
})
const adminInfo = useAdminInfo()
const tableStore = inject('tableStore') as TableStore
const formRef = ref()
// do not use same name with ref
const form = reactive({
algoDescribe: '',
code: '',
level: 0,
name: '',
value: '',
sort: 100,
typeId: '',
openLevel: 0,
openDescribe: 0,
typeName: '',
id: ''
})
const EventOpenLevel = [
{ value: 0, label: '普通' },
{ value: 1, label: '中等' },
{ value: 2, label: '严重' }
]
const rules = {
algoDescribe: [
{ required: false, message: '请输入对应算法', trigger: 'blur' },
{
pattern: /^\d+$|^\d+[.]?\d+$/,
message: '请您数字对应算法',
trigger: 'blur'
}
],
name: [{ required: true, message: '请输入名称', trigger: 'blur' }],
code: [{ required: true, message: '请输入编码', trigger: 'blur' }],
sort: [{ required: true, message: '请输入排序', trigger: 'blur' }]
}
const dialogVisible = ref(false)
const title = ref('新增')
const open = (text: string, data: anyObj) => {
dialogVisible.value = true
if (text === '编辑') {
for (let key in form) {
form[key] = data[key] === '/' ? '' : data[key]
}
} else if (text === '新增') {
for (let key in form) {
form[key] = ''
}
form.level = 0
form.sort = 100
form.typeId = data.typeId
form.openLevel = data.openLevel
form.typeName = data.typeName
form.openDescribe = data.openDescribe
}
title.value = form.typeName + text
}
const submit = async () => {
await formRef.value.validate()
if (form.id) {
await dictDataUpdate(form)
} else {
await dictDataAdd(form)
}
ElMessage.success('保存成功')
tableStore.index()
dialogVisible.value = false
}
defineExpose({ open })
</script>

221
src/views/setting/dictionary/list/popupEdit.vue
View File

@@ -1,110 +1,111 @@
<template>
<el-dialog width='600px' v-model.trim='dialogVisible' :title='title'>
<el-scrollbar>
<el-form :inline='false' :model='form' label-width='auto' class="form-one" :rules='rules' ref='formRef'>
<el-form-item label='名称' prop='name'>
<el-input maxlength="32" show-word-limit v-model.trim='form.name' placeholder="请输入字典名称"></el-input>
</el-form-item>
<el-form-item label='编码' class='top' prop='code'>
<el-input maxlength="32" show-word-limit v-model.trim='form.code' placeholder="请输入字典编码"></el-input>
</el-form-item>
<el-form-item label='排序' class='top' prop='sort'>
<el-input maxlength="32" show-word-limit-number v-model.trim="form.sort" :min="0" />
</el-form-item>
<el-form-item label='开启等级' class='top'>
<el-select v-model.trim='form.openLevel' placeholder='选择开启等级'>
<el-option v-for='item in OpenLevel' :key='item.value' :label='item.label' :value='item.value'>
</el-option>
</el-select>
</el-form-item>
<el-form-item label='开启算法' class='top'>
<el-select v-model.trim='form.openDescribe' placeholder='选择开启算法'>
<el-option v-for='item in OpenDescribe' :key='item.value' :label='item.label'
:value='item.value'>
</el-option>
</el-select>
</el-form-item>
<el-form-item label='字典描述' class='top'>
<el-input maxlength="300" show-word-limit v-model.trim='form.remark' placeholder='请输入字典描述'
type='textarea' :rows='2'></el-input>
</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 { useAdminInfo } from '@/stores/adminInfo'
import { dictTypeAdd, dictTypeUpdate } from '@/api/system-boot/dictType'
const adminInfo = useAdminInfo()
const tableStore = inject('tableStore') as TableStore
const OpenLevel = [
{ value: 0, label: '不开启' },
{ value: 1, label: '开启' }
]
const OpenDescribe = [
{ value: 0, label: '不开启' },
{ value: 1, label: '开启' }
]
const formRef = ref()
const form = reactive({
openLevel: 0,
openDescribe: 0,
remark: '',
name: '',
code: '',
sort: 100,
id: ''
})
const rules = {
name: [{ required: true, message: '不能为空', trigger: 'blur' }],
sort: [{ required: true, message: '不能为空', trigger: 'blur' }],
code: [{ required: true, message: '不能为空', trigger: 'blur' }]
}
const dialogVisible = ref(false)
const title = ref('新增字典类型')
const open = (text: string, data?: anyObj) => {
title.value = text
dialogVisible.value = true
if (data) {
for (let key in form) {
form[key] = data[key]
}
} else {
for (let key in form) {
form[key] = ''
}
form.openLevel = 0
form.openDescribe = 0
form.sort = 100
}
}
const submit = async () => {
formRef.value.validate(async (valid: boolean) => {
if (valid) {
if (form.id) {
await dictTypeUpdate(form)
} else {
await dictTypeAdd(form)
}
ElMessage.success('保存成功')
tableStore.index()
dialogVisible.value = false
}
})
}
defineExpose({ open })
</script>
<template>
<el-dialog width='600px' v-model.trim='dialogVisible' :title='title'>
<el-scrollbar>
<el-form :inline='false' :model='form' label-width='auto' class="form-one" :rules='rules' ref='formRef'>
<el-form-item label='名称' prop='name'>
<el-input maxlength="32" show-word-limit v-model.trim='form.name' placeholder="请输入字典名称"></el-input>
</el-form-item>
<el-form-item label='编码' class='top' prop='code'>
<el-input maxlength="32" show-word-limit v-model.trim='form.code' placeholder="请输入字典编码"></el-input>
</el-form-item>
<el-form-item label='排序' class='top' prop='sort'>
<el-input maxlength="32" show-word-limit-number v-model.trim="form.sort" :min="0" />
</el-form-item>
<el-form-item label='开启等级' class='top'>
<el-select v-model.trim='form.openLevel' placeholder='选择开启等级'>
<el-option v-for='item in OpenLevel' :key='item.value' :label='item.label' :value='item.value'>
</el-option>
</el-select>
</el-form-item>
<el-form-item label='开启算法' class='top'>
<el-select v-model.trim='form.openDescribe' placeholder='选择开启算法'>
<el-option v-for='item in OpenDescribe' :key='item.value' :label='item.label'
:value='item.value'>
</el-option>
</el-select>
</el-form-item>
<el-form-item label='字典描述' class='top'>
<el-input maxlength="300" show-word-limit v-model.trim='form.remark' placeholder='请输入字典描述'
type='textarea' :rows='2'></el-input>
</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 { useAdminInfo } from '@/stores/adminInfo'
import { dictTypeAdd, dictTypeUpdate } from '@/api/system-boot/dictType'
const adminInfo = useAdminInfo()
const tableStore = inject('tableStore') as TableStore
const OpenLevel = [
{ value: 0, label: '不开启' },
{ value: 1, label: '开启' }
]
const OpenDescribe = [
{ value: 0, label: '不开启' },
{ value: 1, label: '开启' }
]
const formRef = ref()
const form = reactive({
openLevel: 0,
openDescribe: 0,
remark: '',
name: '',
code: '',
sort: 100,
id: ''
})
const rules = {
name: [{ required: true, message: '请输入名称', trigger: 'blur' }],
sort: [{ required: true, message: '请输入排序', trigger: 'blur' }],
code: [{ required: true, message: '请输入编码', trigger: 'blur' }]
}
const dialogVisible = ref(false)
const title = ref('新增字典类型')
const open = (text: string, data?: anyObj) => {
formRef.value?.resetFields()
title.value = text
dialogVisible.value = true
if (data) {
for (let key in form) {
form[key] = data[key]
}
} else {
for (let key in form) {
form[key] = ''
}
form.openLevel = 0
form.openDescribe = 0
form.sort = 100
}
}
const submit = async () => {
formRef.value.validate(async (valid: boolean) => {
if (valid) {
if (form.id) {
await dictTypeUpdate(form)
} else {
await dictTypeAdd(form)
}
ElMessage.success('保存成功')
tableStore.index()
dialogVisible.value = false
}
})
}
defineExpose({ open })
</script>

66
src/views/setting/dictionary/tree/popupForm.vue
View File

@@ -1,19 +1,41 @@
<template>
<el-dialog class="cn-operate-dialog" width="500px" v-model.trim="dialogVisible" :title="title">
<el-scrollbar>
<el-form :inline="false" :model="form" label-width="120px" :rules="rules">
<el-form :inline="false" :model="form" ref="formRef" label-width="120px" :rules="rules">
<el-form-item label="字典名称:" prop="name">
<el-input maxlength="32" show-word-limit v-model.trim="form.name" placeholder="请输入字典名称"></el-input>
</el-form-item>
<el-form-item label="序号:" prop="sort" class="top">
<el-input maxlength="32" show-word-limit v-model.trim="form.sort" placeholder="请输入序号"></el-input>
<el-input
maxlength="32"
show-word-limit
v-model.trim="form.name"
placeholder="请输入字典名称"
></el-input>
</el-form-item>
<el-form-item label="编码:" prop="code" class="top">
<el-input maxlength="32" show-word-limit v-model.trim="form.code" placeholder="请输入字典编码"></el-input>
<el-input
maxlength="32"
show-word-limit
v-model.trim="form.code"
placeholder="请输入字典编码"
></el-input>
</el-form-item>
<el-form-item label="排序:" prop="sort" class="top">
<el-input
maxlength="32"
show-word-limit
v-model.number="form.sort"
placeholder="请输入排序"
></el-input>
</el-form-item>
<el-form-item label="描述:" class="top">
<el-input maxlength="32" :autosize="{ minRows: 2, maxRows: 4 }" type="textarea" show-word-limit v-model.trim="form.remark"
placeholder="请输入字典描述"></el-input>
<el-input
maxlength="32"
:autosize="{ minRows: 2, maxRows: 4 }"
type="textarea"
show-word-limit
v-model.trim="form.remark"
placeholder="请输入字典描述"
></el-input>
</el-form-item>
</el-form>
</el-scrollbar>
@@ -46,14 +68,16 @@ const form = reactive({
pid: 0,
id: ''
})
const formRef = ref()
const rules = {
name: [{ required: true, message: '名称不能为空', trigger: 'blur' }],
sort: [{ required: true, message: '排序不能为空', trigger: 'blur' }],
code: [{ required: true, message: '编码不能为空', trigger: 'blur' }]
name: [{ required: true, message: '请选择名称', trigger: 'blur' }],
sort: [{ required: true, message: '请选择排序', trigger: 'blur' }],
code: [{ required: true, message: '请选择编码', trigger: 'blur' }]
}
const dialogVisible = ref(false)
const title = ref('新增菜单')
const open = (text: string, data?: anyObj) => {
formRef.value?.resetFields()
title.value = text
dialogVisible.value = true
if (data) {
@@ -70,14 +94,18 @@ const open = (text: string, data?: anyObj) => {
}
}
const submit = async () => {
if (form.id) {
await dicUpdate(form)
} else {
await dicAdd(form)
}
ElMessage.success('保存成功')
tableStore.index()
dialogVisible.value = false
formRef.value.validate(async (valid: any) => {
if (valid) {
if (form.id) {
await dicUpdate(form)
} else {
await dicAdd(form)
}
ElMessage.success('保存成功')
tableStore.index()
dialogVisible.value = false
}
})
}
defineExpose({ open })

478
src/views/system/subject/form/index.vue
View File

@@ -1,227 +1,251 @@
<template>
<el-dialog draggable v-model.trim="dialogVisible" :title="title" :before-close="Cancel">
<el-form :inline="false" :model="configStore" label-width="auto">
<el-divider border-style="dashed">全局</el-divider>
<div class="layout-config-global form-two">
<el-form-item label="组件主名称">
<el-input v-model.trim="configStore.name" placeholder="请输入主题名称" />
</el-form-item>
<el-form-item label="后台页面切换动画">
<el-select v-model.trim="configStore.mainAnimation">
<el-option label="slide-right" value="slide-right"></el-option>
<el-option label="slide-left" value="slide-left"></el-option>
<el-option label="el-fade-in-linear" value="el-fade-in-linear"></el-option>
<el-option label="el-fade-in" value="el-fade-in"></el-option>
<el-option label="el-zoom-in-center" value="el-zoom-in-center"></el-option>
<el-option label="el-zoom-in-top" value="el-zoom-in-top"></el-option>
<el-option label="el-zoom-in-bottom" value="el-zoom-in-bottom"></el-option>
</el-select>
</el-form-item>
<el-form-item label="组件主题色">
<el-color-picker v-model.trim="configStore.elementUiPrimary[0]" />
</el-form-item>
<el-form-item label="表格标题栏背景颜色">
<el-color-picker v-model.trim="configStore.tableHeaderBackground[0]" />
</el-form-item>
<el-form-item label="表格标题栏文字颜色">
<el-color-picker v-model.trim="configStore.tableHeaderColor[0]" />
</el-form-item>
<el-form-item label="表格激活栏颜色">
<el-color-picker v-model.trim="configStore.tableCurrent[0]" />
</el-form-item>
<el-form-item label="组件主描述">
<el-input v-model.trim="configStore.remark" :autosize="{ minRows: 2, maxRows: 4 }" type="textarea"
placeholder="请输入描述" />
</el-form-item>
</div>
<el-divider border-style="dashed">侧边栏</el-divider>
<div class="layout-config-aside form-two">
<el-form-item label="侧边菜单栏背景色">
<el-color-picker v-model.trim="configStore.menuBackground[0]" />
</el-form-item>
<el-form-item label="侧边菜单文字颜色">
<el-color-picker v-model.trim="configStore.menuColor[0]" />
</el-form-item>
<el-form-item label="侧边菜单激活项背景色">
<el-color-picker v-model.trim="configStore.menuActiveBackground[0]" />
</el-form-item>
<el-form-item label="侧边菜单激活项文字色">
<el-color-picker v-model.trim="configStore.menuActiveColor[0]" />
</el-form-item>
<el-form-item label="侧边菜单顶栏背景色">
<el-color-picker v-model.trim="configStore.menuTopBarBackground[0]" />
</el-form-item>
</div>
<el-divider border-style="dashed">顶栏</el-divider>
<div class="layout-config-aside form-two">
<el-form-item label="顶栏背景色">
<el-color-picker v-model.trim="configStore.headerBarBackground[0]" />
</el-form-item>
<el-form-item label="顶栏文字色">
<el-color-picker v-model.trim="configStore.headerBarTabColor[0]" />
</el-form-item>
<el-form-item label="顶栏logo">
<el-image style="height: 50px" :src="logoFile.url" :preview-src-list="[logoFile.url]"
v-if="logoFile.url" class="mr10"></el-image>
<el-upload action="" :show-file-list="false" :auto-upload="false" accept=".png,.jpg"
:on-change="chooseImage">
<el-button type="primary">上传图片</el-button>
</el-upload>
</el-form-item>
</div>
</el-form>
<template #footer>
<div class="dialog-footer">
<el-button type="primary" @click="onSubmit">确定</el-button>
<el-button @click="Cancel">取消</el-button>
</div>
</template>
</el-dialog>
</template>
<script lang="ts" setup>
import { ref, inject } from 'vue'
import { reactive } from 'vue'
import router from '@/router/index'
import { ElMessage } from 'element-plus'
const dialogVisible = ref(false)
const title = ref('')
import { addTheme, updateTheme } from '@/api/system/subject/index'
const emit = defineEmits(['Cancels'])
const configStore = ref({
// 后台主页面切换动画，可选值<slide-right|slide-left|el-fade-in-linear|el-fade-in|el-zoom-in-center|el-zoom-in-top|el-zoom-in-bottom>
mainAnimation: 'el-fade-in',
elementUiPrimary: ['#0e8780', '#0e8780'],
tableHeaderBackground: ['#F3F6F9', '#F3F6F9'],
tableHeaderColor: ['#111', '#fff'],
tableCurrent: ['#F3F6F9', '#F3F6F9'],
/* 侧边菜单 */
// 侧边菜单背景色
menuBackground: ['#0e8780', '#1d1e1f'],
// 侧边菜单文字颜色
menuColor: ['#FFFFFF', '#CFD3DC'],
// 侧边菜单激活项背景色
menuActiveBackground: ['#0c7973', '#1d1e1f'],
// 侧边菜单激活项文字色
menuActiveColor: ['#00f5fd', '#3375b9'],
// 侧边菜单顶栏背景色
menuTopBarBackground: ['#0e8780', '#1d1e1f'],
// 顶栏文字色
headerBarTabColor: ['#FFFFFF', '#CFD3DC'],
// 顶栏背景色
headerBarBackground: ['#0e8780', '#1d1e1f'],
logoFile: '',
name: '',
color: '',
faviconFile: '',
remark: ''
})
const logoFile = reactive({
url: '',
raw: ''
})
const open = (e: any) => {
title.value = e.text
dialogVisible.value = true
if (e.text == '修改主题') {
let form = JSON.parse(JSON.stringify(e.row))
for (let k in form) {
if (
k == 'elementUiPrimary' ||
k == 'tableHeaderBackground' ||
k == 'tableHeaderColor' ||
k == 'tableCurrent' ||
k == 'menuBackground' ||
k == 'menuColor' ||
k == 'menuActiveBackground' ||
k == 'menuActiveColor' ||
k == 'menuTopBarBackground' ||
k == 'headerBarTabColor' ||
k == 'headerBarBackground'
) {
form[k] = JSON.parse(form[k])
}
}
logoFile.url = form.logoUrl
configStore.value = form
}
}
// 确定主题
const onSubmit = () => {
configStore.value.faviconFile = configStore.value.logoFile
configStore.value.color = configStore.value.elementUiPrimary[0]
let form = new FormData()
for (let k in configStore.value) {
if (
k == 'logoFile' ||
k == 'faviconFile' ||
k == 'name' ||
k == 'color' ||
k == 'remark' ||
k == 'mainAnimation' ||
k == 'id'
) {
form.append(k, configStore.value[k])
} else if (k == 'logoUrl' || k == 'faviconUrl') {
if (configStore.value.logoFile == null) {
let str = configStore.value[k].match(/base64,([^"]+)/)[1]
let bin = atob(str)
let arr = new Array(bin.length)
for (let i = 0; i < bin.length; i++) {
arr[i] = bin.charCodeAt(i)
}
let b = new Uint8Array(arr)
const blob = new Blob([b], { type: 'image/jpeg' })
form.append('faviconFile', blob)
form.append('logoFile', blob)
}
} else {
form.append(k, JSON.stringify(configStore.value[k]))
}
}
if (title.value == '新增主题') {
addTheme(form).then(res => {
ElMessage.success('新增成功')
Cancel()
})
}
if (title.value == '修改主题') {
updateTheme(form).then(res => {
ElMessage.success('修改成功')
Cancel()
})
}
}
// 取消
const Cancel = () => {
// dialogVisible.value = false
emit('Cancels')
setTimeout(() => {
router.go(0)
}, 500);
}
/**
* 选择图片上传
* @param e
*/
const chooseImage = (e: any) => {
// console.log('🚀 ~ chooseImage ~ e:', URL.createObjectURL(e.raw!))
logoFile.url = URL.createObjectURL(e.raw!)
configStore.value.logoFile = e.raw
// uploadFile(e.raw, 'sgGovern/').then(res => {
// logoFile.name = res.data.name
// logoFile.url = res.data.url
// configStore.logoFile = res.data.name
// ElMessage.success('新增成功')
// })
}
defineExpose({ open })
</script>
<template>
<el-dialog draggable v-model.trim="dialogVisible" :title="title" :before-close="Cancel">
<el-form :inline="false" :model="configStore" ref="formRef" label-width="auto" :rules="rules">
<el-divider border-style="dashed">全局</el-divider>
<div class="layout-config-global form-two">
<el-form-item label="主题名称" prop="name">
<el-input v-model.trim="configStore.name" placeholder="请输入主题名称" />
</el-form-item>
<el-form-item label="后台页面切换动画">
<el-select v-model.trim="configStore.mainAnimation">
<el-option label="slide-right" value="slide-right"></el-option>
<el-option label="slide-left" value="slide-left"></el-option>
<el-option label="el-fade-in-linear" value="el-fade-in-linear"></el-option>
<el-option label="el-fade-in" value="el-fade-in"></el-option>
<el-option label="el-zoom-in-center" value="el-zoom-in-center"></el-option>
<el-option label="el-zoom-in-top" value="el-zoom-in-top"></el-option>
<el-option label="el-zoom-in-bottom" value="el-zoom-in-bottom"></el-option>
</el-select>
</el-form-item>
<el-form-item label="组件主题色">
<el-color-picker v-model.trim="configStore.elementUiPrimary[0]" />
</el-form-item>
<el-form-item label="表格标题栏背景颜色">
<el-color-picker v-model.trim="configStore.tableHeaderBackground[0]" />
</el-form-item>
<el-form-item label="表格标题栏文字颜色">
<el-color-picker v-model.trim="configStore.tableHeaderColor[0]" />
</el-form-item>
<el-form-item label="表格激活栏颜色">
<el-color-picker v-model.trim="configStore.tableCurrent[0]" />
</el-form-item>
<el-form-item label="组件主描述" prop="remark">
<el-input
v-model.trim="configStore.remark"
:autosize="{ minRows: 2, maxRows: 4 }"
type="textarea"
placeholder="请输入描述"
/>
</el-form-item>
</div>
<el-divider border-style="dashed">侧边栏</el-divider>
<div class="layout-config-aside form-two">
<el-form-item label="侧边菜单栏背景色">
<el-color-picker v-model.trim="configStore.menuBackground[0]" />
</el-form-item>
<el-form-item label="侧边菜单文字颜色">
<el-color-picker v-model.trim="configStore.menuColor[0]" />
</el-form-item>
<el-form-item label="侧边菜单激活项背景色">
<el-color-picker v-model.trim="configStore.menuActiveBackground[0]" />
</el-form-item>
<el-form-item label="侧边菜单激活项文字色">
<el-color-picker v-model.trim="configStore.menuActiveColor[0]" />
</el-form-item>
<el-form-item label="侧边菜单顶栏背景色">
<el-color-picker v-model.trim="configStore.menuTopBarBackground[0]" />
</el-form-item>
</div>
<el-divider border-style="dashed">顶栏</el-divider>
<div class="layout-config-aside form-two">
<el-form-item label="顶栏背景色">
<el-color-picker v-model.trim="configStore.headerBarBackground[0]" />
</el-form-item>
<el-form-item label="顶栏文字色">
<el-color-picker v-model.trim="configStore.headerBarTabColor[0]" />
</el-form-item>
<el-form-item label="顶栏logo">
<el-image
style="height: 50px"
:src="logoFile.url"
:preview-src-list="[logoFile.url]"
v-if="logoFile.url"
class="mr10"
></el-image>
<el-upload
action=""
:show-file-list="false"
:auto-upload="false"
accept=".png,.jpg"
:on-change="chooseImage"
>
<el-button type="primary">上传图片</el-button>
</el-upload>
</el-form-item>
</div>
</el-form>
<template #footer>
<div class="dialog-footer">
<el-button @click="Cancel">取消</el-button>
<el-button type="primary" @click="onSubmit">确定</el-button>
</div>
</template>
</el-dialog>
</template>
<script lang="ts" setup>
import { ref, inject } from 'vue'
import { reactive } from 'vue'
import router from '@/router/index'
import { ElMessage } from 'element-plus'
const dialogVisible = ref(false)
const title = ref('')
import { addTheme, updateTheme } from '@/api/system/subject/index'
const emit = defineEmits(['Cancels'])
const rules = {
name: [{ required: true, message: '请输入主题名称', trigger: 'blur' }],
remark: [{ required: true, message: '请输入主题描述', trigger: 'blur' }]
}
const configStore = ref({
// 后台主页面切换动画，可选值<slide-right|slide-left|el-fade-in-linear|el-fade-in|el-zoom-in-center|el-zoom-in-top|el-zoom-in-bottom>
mainAnimation: 'el-fade-in',
elementUiPrimary: ['#0e8780', '#0e8780'],
tableHeaderBackground: ['#F3F6F9', '#F3F6F9'],
tableHeaderColor: ['#111', '#fff'],
tableCurrent: ['#F3F6F9', '#F3F6F9'],
/* 侧边菜单 */
// 侧边菜单背景色
menuBackground: ['#0e8780', '#1d1e1f'],
// 侧边菜单文字颜色
menuColor: ['#FFFFFF', '#CFD3DC'],
// 侧边菜单激活项背景色
menuActiveBackground: ['#0c7973', '#1d1e1f'],
// 侧边菜单激活项文字色
menuActiveColor: ['#00f5fd', '#3375b9'],
// 侧边菜单顶栏背景色
menuTopBarBackground: ['#0e8780', '#1d1e1f'],
// 顶栏文字色
headerBarTabColor: ['#FFFFFF', '#CFD3DC'],
// 顶栏背景色
headerBarBackground: ['#0e8780', '#1d1e1f'],
logoFile: '',
name: '',
color: '',
faviconFile: '',
remark: ''
})
const logoFile = reactive({
url: '',
raw: ''
})
const formRef = ref()
const open = (e: any) => {
formRef.value?.resetFields()
title.value = e.text
dialogVisible.value = true
if (e.text == '修改主题') {
let form = JSON.parse(JSON.stringify(e.row))
for (let k in form) {
if (
k == 'elementUiPrimary' ||
k == 'tableHeaderBackground' ||
k == 'tableHeaderColor' ||
k == 'tableCurrent' ||
k == 'menuBackground' ||
k == 'menuColor' ||
k == 'menuActiveBackground' ||
k == 'menuActiveColor' ||
k == 'menuTopBarBackground' ||
k == 'headerBarTabColor' ||
k == 'headerBarBackground'
) {
form[k] = JSON.parse(form[k])
}
}
logoFile.url = form.logoUrl
configStore.value = form
}
}
// 确定主题
const onSubmit = () => {
formRef.value.validate(async valid => {
if (valid) {
configStore.value.faviconFile = configStore.value.logoFile
configStore.value.color = configStore.value.elementUiPrimary[0]
let form = new FormData()
for (let k in configStore.value) {
if (
k == 'logoFile' ||
k == 'faviconFile' ||
k == 'name' ||
k == 'color' ||
k == 'remark' ||
k == 'mainAnimation' ||
k == 'id'
) {
form.append(k, configStore.value[k])
} else if (k == 'logoUrl' || k == 'faviconUrl') {
if (configStore.value.logoFile == null) {
let str = configStore.value[k].match(/base64,([^"]+)/)[1]
let bin = atob(str)
let arr = new Array(bin.length)
for (let i = 0; i < bin.length; i++) {
arr[i] = bin.charCodeAt(i)
}
let b = new Uint8Array(arr)
const blob = new Blob([b], { type: 'image/jpeg' })
form.append('faviconFile', blob)
form.append('logoFile', blob)
}
} else {
form.append(k, JSON.stringify(configStore.value[k]))
}
}
// if(){
// }
if (title.value == '新增主题') {
addTheme(form).then(res => {
ElMessage.success('新增成功')
Cancel()
})
}
if (title.value == '修改主题') {
updateTheme(form).then(res => {
ElMessage.success('修改成功')
Cancel()
})
}
}
})
}
// 取消
const Cancel = () => {
// dialogVisible.value = false
emit('Cancels')
setTimeout(() => {
router.go(0)
}, 500)
}
/**
* 选择图片上传
* @param e
*/
const chooseImage = (e: any) => {
// console.log('🚀 ~ chooseImage ~ e:', URL.createObjectURL(e.raw!))
logoFile.url = URL.createObjectURL(e.raw!)
configStore.value.logoFile = e.raw
// uploadFile(e.raw, 'sgGovern/').then(res => {
// logoFile.name = res.data.name
// logoFile.url = res.data.url
// configStore.logoFile = res.data.name
// ElMessage.success('新增成功')
// })
}
defineExpose({ open })
</script>