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

158
src/template/dialog.vue
View File

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

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

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

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

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

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

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

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

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

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

@@ -9,7 +9,7 @@
@change="sourceChange" @change="sourceChange"
:options="deviceTreeOptions" :options="deviceTreeOptions"
:show-all-levels="false" :show-all-levels="false"
:props="{ checkStrictly: true }" :props="{ checkStrictly: true, value: 'id', label: 'name' }"
clearable clearable
></el-cascader> ></el-cascader>
<!-- <el-input maxlength="32" show-word-limit v-model.trim="tableStore.table.params.searchValue" placeholder="请输入设备名称" /> --> <!-- <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" @change="sourceChange"
:options="deviceTreeOptions" :options="deviceTreeOptions"
:show-all-levels="false" :show-all-levels="false"
:props="{ checkStrictly: true }" :props="{ checkStrictly: true, value: 'id', label: 'name' }"
clearable clearable
></el-cascader> ></el-cascader>
<!-- <el-input maxlength="32" show-word-limit v-model.trim="tableStore.table.params.searchValue" placeholder="请输入设备名称" /> --> <!-- <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" v-model.trim="tableStore.table.params.cascader"
:options="deviceTreeOptions" :options="deviceTreeOptions"
:show-all-levels="false" :show-all-levels="false"
:props="{ checkStrictly: true }" :props="{ checkStrictly: true, value: 'id', label: 'name' }"
clearable clearable
></el-cascader> ></el-cascader>
<!-- <el-input maxlength="32" show-word-limit v-model.trim="tableStore.table.params.searchValue" placeholder="请输入设备名称" /> --> <!-- <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', method: 'POST',
publicHeight: 65, publicHeight: 65,
exportName: '暂态事件', exportName: '暂态事件',
column: [ { column: [
{
title: '序号', title: '序号',
width: 80, width: 80,
formatter: (row: any) => { formatter: (row: any) => {
return (tableStore.table.params.pageNum - 1) * tableStore.table.params.pageSize + row.rowIndex + 1 return (tableStore.table.params.pageNum - 1) * tableStore.table.params.pageSize + row.rowIndex + 1
} }
}, },
{ title: '设备名称', field: 'equipmentName', minWidth: 120,align: 'center' }, { title: '设备名称', field: 'equipmentName', minWidth: 120, align: 'center' },
{ title: '工程名称', field: 'engineeringName', minWidth: 120,align: 'center' }, { title: '工程名称', field: 'engineeringName', minWidth: 120, align: 'center' },
{ title: '项目名称', field: 'projectName', minWidth: 120,align: 'center' }, { title: '项目名称', field: 'projectName', minWidth: 120, align: 'center' },
{ title: '发生时刻', field: 'startTime', align: 'center', minWidth: 180,sortable: true }, { title: '发生时刻', field: 'startTime', align: 'center', minWidth: 180, sortable: true },
{ title: '监测点名称', field: 'lineName', minWidth: 120,align: 'center' }, { title: '监测点名称', field: 'lineName', minWidth: 120, align: 'center' },
{ title: '事件描述', field: 'showName', minWidth: 120,align: 'center' }, { title: '事件描述', field: 'showName', minWidth: 120, align: 'center' },
{ title: '事件发生位置', field: 'evtParamPosition',minWidth: 150, align: 'center' }, { title: '事件发生位置', field: 'evtParamPosition', minWidth: 150, align: 'center' },
{ title: '相别', field: 'evtParamPhase',minWidth: 80, align: 'center' }, { title: '相别', field: 'evtParamPhase', minWidth: 80, align: 'center' },
{ title: '持续时间(s)', field: 'evtParamTm',minWidth: 80, align: 'center',sortable: true }, { title: '持续时间(s)', field: 'evtParamTm', minWidth: 80, align: 'center', sortable: true },
{ title: '暂降(聚升)幅值(%)', minWidth: 100, field: 'evtParamVVaDepth', align: 'center',sortable: true }, { title: '暂降(聚升)幅值(%)', minWidth: 100, field: 'evtParamVVaDepth', align: 'center', sortable: true },
{ {
title: '操作', title: '操作',
@@ -153,7 +154,7 @@ const tableStore = new TableStore({
render: 'basicButton', render: 'basicButton',
loading: 'loading1', loading: 'loading1',
disabled: row => { disabled: row => {
return !row.wavePath return !row.wavePath
}, },
click: async row => { click: async row => {
row.loading1 = true row.loading1 = true
@@ -234,24 +235,24 @@ const tableStore = new TableStore({
icon: 'el-icon-DataLine', icon: 'el-icon-DataLine',
render: 'basicButton', render: 'basicButton',
disabled: row => { disabled: row => {
return row.showName != '未知'; return row.showName != '未知'
} }
}, },
{ {
name: 'edit', name: 'edit',
title: '波形补召', title: '波形补召',
type: 'primary', type: 'primary',
icon: 'el-icon-Check', icon: 'el-icon-Check',
render: 'basicButton', render: 'basicButton',
disabled: row => { disabled: row => {
return row.wavePath || row.showName === '未知'; return row.wavePath || row.showName === '未知'
}, },
click: row => { click: row => {
getFileByEventId(row.id).then(res => { getFileByEventId(row.id).then(res => {
ElMessage.success(res.message) ElMessage.success(res.message)
tableStore.index() tableStore.index()
}) })
} }
} }
] ]
} }
@@ -313,7 +314,6 @@ const sourceChange = (e: any) => {
tableStore.table.params.engineeringid = e[1] || '' tableStore.table.params.engineeringid = e[1] || ''
tableStore.table.params.projectId = e[2] || '' tableStore.table.params.projectId = e[2] || ''
} }
} }
// tableStore.table.params.engineeringid = e[1] || '' // 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 activeName = ref('1')
const key = ref(0) const key = ref(0)
getDeviceTree().then(res => { getDeviceTree().then(res => {
res.data.forEach((item: any) => { // res.data.forEach((item: any) => {
item.value = item.id // item.value = item.id
item.label = item.name // item.label = item.name
item.children.forEach((child: any) => { // item.children.forEach((child: any) => {
child.value = child.id // child.value = child.id
child.label = child.name // child.label = child.name
child.children.forEach((grand: any) => { // child.children.forEach((grand: any) => {
grand.value = grand.id // grand.value = grand.id
grand.label = grand.name // grand.label = grand.name
delete grand.children // delete grand.children
}) // })
}) // })
}) // })
deviceTree.value = res.data deviceTree.value = res.data
key.value += 1 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: [] file: []
}) })
const rules = { const rules = {
type: [{ required: true, message: '装置类型不能为空', trigger: 'change' }], type: [{ required: true, message: '请选择装置类型', trigger: 'change' }],
devType: [{ required: true, message: '装置型号不能为空', trigger: 'change' }], devType: [{ required: true, message: '请选择装置型号', trigger: 'change' }],
versionNo: [{ required: true, message: '版本号不能为空', trigger: 'blur' }], versionNo: [{ required: true, message: '请输入版本号', trigger: 'blur' }],
versionType: [{ required: true, message: '版本类型不能为空', trigger: 'blur' }], versionType: [{ required: true, message: '请输入版本类型', trigger: 'blur' }],
versionAgreement: [{ required: true, message: '版本协议不能为空', trigger: 'blur' }], versionAgreement: [{ required: true, message: '请输入版本协议', trigger: 'blur' }],
versionDate: [{ required: true, message: '版本日期不能为空', trigger: 'blur' }], versionDate: [{ required: true, message: '请输入版本日期', trigger: 'blur' }],
description: [{ required: true, message: '描述不能为空', trigger: 'blur' }], description: [{ required: true, message: '请输入描述', trigger: 'blur' }],
crcInfo: [{ required: true, message: 'CRC校验不能为空', trigger: 'blur' }], crcInfo: [{ required: true, message: '请输入CRC校验', trigger: 'blur' }],
file: [{ required: true, message: '升级文件不能为空', trigger: 'blur' }] file: [{ required: true, message: '请输入升级文件', trigger: 'blur' }]
} }
const typeChange = () => { const typeChange = () => {
// console.log(form.type) // console.log(form.type)

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

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

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

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

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

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

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

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

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

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

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

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

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

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