mt-fe-group/mt-yd-ui
13
0
Fork 1
Code Issues Pull Requests Releases Wiki Activity

'更改baseTable和content样式'

Browse Source
This commit is contained in:
Fanzink
2022-12-16 20:48:44 +08:00
parent 3c38763cf4
commit a08af6774e
27 changed files with 499 additions and 92 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/img/choicepart/ArtManager.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 36 KiB

BIN
src/assets/img/choicepart/Log Management.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 9.3 KiB

After

Width:  |  Height:  |  Size: 36 KiB

BIN
src/assets/img/choicepart/Log Management2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 9.3 KiB

BIN
src/assets/img/choicepart/日志管理.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 9.3 KiB

After

Width:  |  Height:  |  Size: 36 KiB

BIN
src/assets/img/choicepart/日志管理2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 9.3 KiB

26
src/assets/scss/common.scss
View File

@@ -254,6 +254,9 @@ img {
margin-right: 0;
font-size: 18px;
}
&__close {
width: 0px;
}
}
.aui-content {
&__wrapper {
@@ -278,7 +281,19 @@ img {
align-items: stretch;
height: $navbar--height;
background-color: $--color-primary;
box-shadow: 0 1px 0 0 rgba(0, 0, 0, .05);
box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.05);
.home {
position: fixed;
top: 0;
right: 0;
left: 0;
z-index: 1030;
display: flex;
align-items: stretch;
height: $navbar--height;
background-color: #409EFF;
box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.05);
}
&--colorful {
.aui-navbar__body {
// navbar body颜色
@@ -396,9 +411,13 @@ img {
.el-menu-item.is-active,
.el-submenu.is-active > .el-submenu__title {
color: $--color-text-secondary;
// background-color: rgb(13,43,104);
&:focus,
&:hover {
// 点击之后图标颜色亮度
color: $--color-text-primary;
// color: #fff;
// background-color: rgb(13,43,104);
}
}
.el-menu-item {
@@ -533,6 +552,10 @@ img {
overflow-y: scroll;
transition: width .3s;
}
.close {
width: 0px;
margin-left: 0 !important;
}
&__menu {
width: $sidebar--width;
border-right: 0;
@@ -564,6 +587,7 @@ img {
min-height: calc(100vh - #{$navbar--height});
&__wrapper {
position: relative;
// 注释掉可隐藏侧边栏,但需要在main.vue中加入main-content的限制条件
margin-left: $sidebar--width;
min-height: calc(100vh - #{$navbar--height});
background-color: $content--background-color;

1
src/assets/scss/modules/home.scss
View File

@@ -1,6 +1,7 @@
.mod-home {
table {
width: 100%;
height: 10px;
border: 1px solid $--border-color-lighter;
border-collapse: collapse;
th,

6
src/assets/scss/variables.scss
View File

@@ -9,13 +9,15 @@ $navbar--height: 50px;
$sidebar--width: 248px;
$sidebar--width-fold: 64px;
// $sidebar--background-color-dark: #263238;
$sidebar--background-color-dark: #001529;
// $sidebar--background-color-dark: #001529;
$sidebar--background-color-dark: #304156;
$sidebar--text-color-dark: #8a979e;
$sidebar--menu-item-height: 48px;
// Content
$content--padding: 15px;
$content--background-color: #f1f4f5;
// $content--background-color: #f1f4f5;
$content--background-color: #fff;
$content--card-header-height: 60px;
$content--tabs-header-height: 38px;
// Content, 填充整屏高度(非tabs状态) = 整屏高度 - 导航条高度 - aui-content上下内边距高度

137
src/components/base-table/index.vue
View File

@@ -1,16 +1,41 @@
<template>
<div class="base-table">
<!-- 花式新增按钮 -->
<div class="setting">
<template v-if="topBtnConfig.length > 0">
<!-- table顶部操作按钮区 -->
<div class="action_btn">
<template v-for="(btn, index) in topBtnConfig">
<span v-if="btn.type === 'add'" :key="index" style="display: inline-block" @click="clickTopButton(btn.type)">
<svg-icon style="width: 14px; height: 14px" class="iconPlus" icon-class="addPage" />
<span class="add">{{ $t('add') }}</span>
</span>
</template>
</div>
</template>
<!-- 设置小齿轮table列的图标 -->
<el-popover placement="bottom-start" width="200" trigger="click">
<div class="setting-box">
<el-checkbox v-for="(item, index) in tableHeadConfigs" :key="'cb' + index" v-model="selectedBox[index]" :label="item.name" />
</div>
<i slot="reference" class="el-icon-s-tools" style="color: #0b58ff" />
</el-popover>
</div>
<!-- border 属性增加边框:header-cell-style="{background:'#FAFAFA',color:'#606266',height: '40px'}" -->
<!-- <el-table :data="data" -->
<el-table
:data="data"
:data="renderData"
style="width: 100%"
fit
border
:header-cell-style="{ background: '#FAFAFA', color: '#606266', height: '40px' }"
highlight-current-row
:header-cell-style="{ background: '#FAFAFA', color: '#000', height: '40px' }"
:max-height="maxHeight"
:span-method="spanMethod || null"
>
:row-style="{ height: '20px' }"
:cell-style="{ padding: '0px' }">
<!-- 表格头定义 -->
<template v-for="(head, idx) in tableHeadConfigs">
<!-- in tableHeadConfigs -->
<template v-for="(head, idx) in renderTableHeadList">
<!-- 带type的表头 -->
<el-table-column
:key="idx"
@@ -20,11 +45,14 @@
:header-align="head.align || 'center'"
:align="head.align || 'center'"
:width="head.width || 50"
:index="head.type === 'index' ? val => {
return val + 1 + (page - 1) * size
} : null"
v-bind="head.more"
></el-table-column>
:index="
head.type === 'index'
? (val) => {
return val + 1 + (page - 1) * size
}
: null
"
v-bind="head.more"></el-table-column>
<!-- 普通的表头 -->
<el-table-column
v-else
@@ -38,9 +66,8 @@
:tooltip-effect="head.tooltipEffect || 'light'"
filter-placement="top"
:align="head.align || null"
v-bind="head.more"
>
<!-- 子组件 -->
v-bind="head.more">
<!-- 子组件 编辑/删除 -->
<template v-if="head.prop" slot-scope="scope">
<component v-if="head.subcomponent" :is="head.subcomponent" :key="idx + 'sub'" :inject-data="{ ...scope.row, head }" @emit-data="handleSubEmitData" />
<!-- 直接展示数据或应用过滤器 -->
@@ -58,13 +85,21 @@
</template>
<script>
import { isObject, isString } from 'lodash'
import TableHead from './components/table-head.vue'
export default {
name: 'BaseTable',
filters: {
commonFilter: (source, filterType = (a) => a) => {
return filterType(source)
}
},
props: {
tableHeadConfigs: {
type: Array,
default: () => []
// required: true,
// validator: val => val.filter(item => !isString(item.prop) || !isString(item.name)).length === 0
},
data: {
type: Array,
@@ -72,6 +107,7 @@ export default {
},
maxHeight: {
type: Number,
// default: window.innerHeight - 325
default: 500
},
spanMethod: {
@@ -88,21 +124,92 @@ export default {
size: {
type: Number,
default: 10
},
// 新增的props
// tableConfig: {
// type: Array,
// required: true,
// validator: (val) => val.filter((item) => !isString(item.prop) || !isString(item.label)).length === 0
// },
topBtnConfig: {
type: Array,
default: () => {
return []
}
}
},
filters: {
commonFilter: (source, filterType = a => a) => {
commonFilter: (source, filterType = (a) => a) => {
return filterType(source)
}
},
data() {
return {}
return {
selectedBox: new Array(100).fill(true)
}
},
computed: {
renderData() {
return this.data.map((item, index) => {
return {
...item,
_pageIndex: (this.page - 1) * this.limit + index + 1
}
})
},
renderTableHeadList() {
return this.tableHeadConfigs.filter((item, index) => {
return this.selectedBox[index]
})
}
},
beforeMount() {
this.selectedBox = new Array(100).fill(true)
if (this.highIndex) {
this.tableRowIndex = 0
}
},
created() {
// console.log(this.selectedBox)
console.log(this.tableHeadConfigs)
},
methods: {
handleSubEmitData(payload) {
this.$emit('operate-event', payload)
},
clickTopButton(val) {
this.$emit('clickTopBtn', val)
}
},
components: { TableHead }
}
</script>
<style lang="scss">
.setting {
text-align: right;
padding: 0px 15px 7px;
.action_btn {
display: inline-block;
margin-right: 15px;
font-size: 14px;
.add {
color: #0b58ff;
}
}
.setting-box {
width: 100px;
}
i {
color: #aaa;
}
}
.el-table .success-row {
background: #eaf1fc;
}
.iconPlus {
color: #0b58ff;
margin-right: 2px;
}
</style>

2
src/element-ui/theme-variables.scss
View File

@@ -17,6 +17,7 @@ $--color-transition-base: color .2s cubic-bezier(.645,.045,.355,1) !default;
-------------------------- */
/// color|1|Brand Color|0
// $--color-primary: #409EFF !default;
// 左上标题背景颜色
$--color-primary: #001529 !default;
/// color|1|Background Color|4
$--color-white: #FFFFFF !default;
@@ -51,6 +52,7 @@ $--color-danger-lighter: mix($--color-white, $--color-danger, 90%) !default;
$--color-info-lighter: mix($--color-white, $--color-info, 90%) !default;
/// color|1|Font Color|2
$--color-text-primary: #303133 !default;
$--color-text-home: #fff !default;
/// color|1|Font Color|2
$--color-text-regular: #606266 !default;
/// color|1|Font Color|2

4
src/icons/iconfont.js
View File

File diff suppressed because one or more lines are too long

19
src/icons/svg/table_add.svg Normal file
View File

@@ -0,0 +1,19 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="10px" height="10px" viewBox="0 0 10 10" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 60 (88103) - https://sketch.com -->
<desc>Created with Sketch.</desc>
<g id="11_系统管理" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="11-1用户管理" transform="translate(-1764.000000, -160.000000)">
<g id="编组-15" transform="translate(1763.000000, 158.000000)">
<g id="编组-18">
<g id="icon/界面内/新增" transform="translate(0.000000, 1.000000)">
<g id="编组">
<rect id="矩形" stroke="#979797" fill="#D8D8D8" opacity="0" x="0.5" y="0.5" width="11" height="11"></rect>
<path d="M10.0813953,6.42885117 L6.37790698,6.42885117 L6.37790698,10.0770235 C6.37790698,10.3108355 6.19069767,10.5 5.95930233,10.5 L5.95930233,10.5 C5.72790698,10.5 5.54069767,10.3108355 5.54069767,10.0770235 L5.54069767,6.42885117 L1.91860465,6.42885117 C1.6872093,6.42885117 1.5,6.23968668 1.5,6.00587467 L1.5,6.00587467 C1.5,5.77206266 1.6872093,5.58289817 1.91860465,5.58289817 L5.54069767,5.58289817 L5.54069767,1.9229765 C5.54069767,1.68916449 5.72790698,1.5 5.95930233,1.5 L5.95930233,1.5 C6.19069767,1.5 6.37790698,1.68916449 6.37790698,1.9229765 L6.37790698,5.58289817 L10.0813953,5.58289817 C10.3127907,5.58289817 10.5,5.77206266 10.5,6.00587467 L10.5,6.00587467 C10.5,6.23968668 10.3127907,6.42885117 10.0813953,6.42885117 L10.0813953,6.42885117 Z" id="Shape" fill="#0B58FF" transform="translate(6.000000, 6.000000) scale(1, -1) translate(-6.000000, -6.000000) "></path>
</g>
</g>
</g>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.8 KiB

2
src/router/index.js
View File

@@ -49,7 +49,7 @@ export const moduleRoutes = {
meta: { title: '主入口布局' },
children: [
// { path: '/sys-log-login', component: () => import('@/views/modules/sys/log-login'), name: 'sys-log-login', meta: { title: '首页', isTab: true } }
{ path: '/home', component: () => import('@/views/modules/home'), name: 'home', meta: { title: '首页', isTab: true, hiddenSiderbar: true } }
{ path: '/home', component: () => import('@/views/modules/home'), name: 'home', meta: { title: '首页', isTab: false, hiddenSiderbar: true } }
]
}

7
src/utils/index.js
View File

@@ -113,4 +113,9 @@ export function calcMaxHeight(num) {
const finalHeight = clientHeight - num - FIXED_HEIGHT
return finalHeight > 0 ? finalHeight : -finalHeight
}
}
// tableHeight
export function tableHeight(n) {
return window.innerHeight - n
}

3
src/views/main-content.vue
View File

@@ -1,5 +1,6 @@
<template>
<main :class="['aui-content', { 'aui-content--tabs': $route.meta.isTab }]">
<!-- <main :class="['aui-content', { 'aui-content--tabs': $route.meta.isTab }]"> -->
<main :class="[this.$route.meta.hiddenSiderbar !== true? ['aui-content', { 'aui-content--tabs': $route.meta.isTab }] : 'aui-sidebar.close']">
<!-- tab展示内容 -->
<template v-if="$route.meta.isTab">
<el-dropdown class="aui-content--tabs-tools">

18
src/views/main-navbar.vue
View File

@@ -1,5 +1,10 @@
<template>
<nav class="aui-navbar" :class="`aui-navbar--${$store.state.navbarLayoutType}`">
<nav
class="aui-navbar"
:class="[this.$route.meta.hiddenSiderbar !== true ? `aui-navbar--${$store.state.navbarLayoutType}` : 'aui-navbar.home']"
:style="{
backgroundColor: this.$route.meta.hiddenSiderbar !== true ? '#001529' : 'rgb(13,43,104)'
}">
<!-- <hamburger v-if="showhome" id="hamburger-container" :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" /> -->
<div class="aui-navbar__header">
<h1 class="aui-navbar__brand" @click="$router.push({ name: 'home' })">
@@ -9,20 +14,25 @@
</a>
<!-- <a class="aui-navbar__brand-mini" href="javascript:;">{{ $t('brand.mini') }}</a> -->
<!-- 缩放时LOGO -->
<!-- <a class="aui-navbar__brand-mini" href="javascript:;"> -->
<a class="aui-navbar__brand-mini" href="javascript:;">
<img src="../assets/img/cnbm.png" style="width: 36px; height: 36px; position: relative; top: 0em" alt="" />
</a>
</h1>
</div>
<!-- <breadcrumb id="breadcrumb-container" class="breadcrumb-container" /> -->
<div class="aui-navbar__body">
<div
class="aui-navbar__body"
:style="{
backgroundColor: this.$route.meta.hiddenSiderbar !== true ? '#fff' : 'rgb(13,43,104)'
}">
<el-menu class="aui-navbar__menu mr-auto" mode="horizontal">
<el-menu-item index="1" @click="$store.state.sidebarFold = !$store.state.sidebarFold">
<el-menu-item v-if="this.$route.meta.hiddenSiderbar !== true" index="1" @click="$store.state.sidebarFold = !$store.state.sidebarFold">
<svg class="icon-svg aui-navbar__icon-menu aui-navbar__icon-menu--switch" aria-hidden="true">
<use xlink:href="#icon-outdent"></use>
</svg>
</el-menu-item>
<el-menu-item index="2" @click="refresh()">
<el-menu-item v-if="this.$route.meta.hiddenSiderbar !== true" index="2" @click="refresh()">
<svg class="icon-svg aui-navbar__icon-menu aui-navbar__icon-menu--refresh" aria-hidden="true">
<use xlink:href="#icon-sync"></use>
</svg>

5
src/views/main-sidebar.vue
View File

@@ -1,6 +1,7 @@
<template>
<aside :class="['aui-sidebar', `aui-sidebar--${$store.state.sidebarLayoutSkin}`]">
<div class="aui-sidebar__inner">
<!-- <aside :class="['aui-sidebar', `aui-sidebar--${$store.state.sidebarLayoutSkin}`]"> -->
<aside v-if="this.$route.meta.hiddenSiderbar !== true" :class="[this.$route.meta.hiddenSiderbar !== true? ['aui-sidebar',`aui-sidebar--${$store.state.sidebarLayoutSkin}`]:'aui-sidebar.close']">
<div v-if="this.$route.meta.hiddenSiderbar !== true" :class="[this.$route.meta.hiddenSiderbar !== true? 'aui-sidebar__inner':'aui-sidebar.close']">
<el-menu
:default-active="$store.state.sidebarMenuActiveName"
:collapse="$store.state.sidebarFold"

9
src/views/main.vue
View File

@@ -1,9 +1,9 @@
<template>
<div v-loading.fullscreen.lock="loading" :element-loading-text="$t('loading')" :class="['aui-wrapper', { 'aui-sidebar--fold': $store.state.sidebarFold }]">
<template v-if="!loading">
<main-navbar />
<main-navbar/>
<main-sidebar v-if="this.$route.meta.hiddenSiderbar !== true"/>
<div class="aui-content__wrapper">
<div :class="[this.$route.meta.hiddenSiderbar !== true? 'aui-content__wrapper':'aui-sidebar.close']">
<main-content v-if="!$store.state.contentIsNeedRefresh" />
</div>
</template>
@@ -50,12 +50,13 @@ export default {
methods: {
// 窗口改变大小
windowResizeHandle() {
this.$store.state.sidebarFold = document.documentElement['clientWidth'] <= 992 || false
this.$store.state.sidebarFold = ((document.documentElement['clientWidth'] <= 992) && (this.$route.name !== "home")) || false
window.addEventListener(
'resize',
// 防抖
debounce(() => {
this.$store.state.sidebarFold = document.documentElement['clientWidth'] <= 992 || false
// this.$store.state.sidebarFold = document.documentElement['clientWidth'] <= 992 || false
this.$store.state.sidebarFold = ((document.documentElement['clientWidth'] <= 992) && (this.$route.name !== "home")) || false
}, 150)
)
},

6
src/views/modules/home.vue
View File

@@ -66,7 +66,10 @@ export default {
// ...mapGetters(['language', 'dictList', 'dictObj'])
},
created() {
// 确保小图标点回来依然带字符
this.$store.state.sidebarFold = false
this.windowWidth = window.innerWidth
console.log(this.$route)
// this.dbConnect = db({
// DBName: 'back_img',
// version: '1.0',
@@ -156,7 +159,8 @@ export default {
width: 1440px;
margin: 0 auto;
margin: 0 auto;
padding-top: 16vh;
// 距离上面边距
padding-top: 8vh;
min-height: 100vh;
.choicepart-item {
display: inline-block;

39
src/views/modules/monitoring/equipment.vue
View File

@@ -1,17 +1,18 @@
<template>
<div class="mod-config">
<el-form :inline="true" :model="dataForm" @keyup.enter.native="currentChangeHandle(1)">
<el-form :inline="true" :model="dataForm" @keyup.enter.native="currentChangeHandle(1)" class="blueTip" size="small">
<el-form-item>
<el-input v-model="dataForm.key" :placeholder="$t('eq.name') + ' / ' + $t('eq.code')" clearable></el-input>
</el-form-item>
<el-form-item>
<el-button @click="currentChangeHandle(1)">{{ $t('search') }}</el-button>
<el-button v-if="$hasPermission('monitoring:equipment:save')" type="primary" @click="addOrUpdateHandle()">{{ $t('add') }}</el-button>
<el-button class="buttonColor" @click="currentChangeHandle(1)">{{ $t('search') }}</el-button>
<!-- <el-button v-if="$hasPermission('monitoring:equipment:save')" type="primary" @click="addOrUpdateHandle()">{{ $t('add') }}</el-button> -->
<el-button v-if="$hasPermission('monitoring:equipment:export')" @click="exportHandle()">{{ $t('export') }}</el-button>
</el-form-item>
</el-form>
<base-table
:top-btn-config="topBtnConfig"
:page="pageIndex"
:size="pageSize"
:data="dataList"
@@ -19,6 +20,7 @@
:max-height="calcMaxHeight(8)"
@operate-event="handleOperations"
@refreshDataList="getDataList"
@clickTopBtn="clickTopBtn"
/>
<el-pagination
@size-change="sizeChangeHandle"
@@ -52,7 +54,12 @@ import CKEditor from 'ckeditor4-vue'
import { calcMaxHeight } from '@/utils'
import { timeFilter } from '@/utils/filters'
import Cookies from 'js-cookie'
const topBtnConfig = [
{
type: 'add',
btnName: i18n.t('add')
}
]
const tableConfigs = [
{
type: 'index',
@@ -278,6 +285,7 @@ const addOrUpdateConfigs = {
export default {
data() {
return {
topBtnConfig,
calcMaxHeight,
tableConfigs,
addOrUpdateConfigs,
@@ -495,6 +503,12 @@ export default {
// }
// })
},
clickTopBtn() {
this.addOrUpdateVisible = true
this.$nextTick(() => {
this.$refs.addOrUpdate.init()
})
},
// 删除
deleteHandle(id) {
var ids = id
@@ -530,3 +544,20 @@ export default {
}
}
</script>
<style>
.blueTip::before {
display: inline-block;
content: '';
width: 4px;
height: 24px;
background: #0b58ff;
border-radius: 1px;
margin-right: 8px;
margin-top: 4px;
}
.buttonColor {
color: #fff;
background: #0b58ff;
}
</style>

39
src/views/modules/monitoring/equipmentGroup.vue
View File

@@ -1,16 +1,17 @@
<template>
<div class="mod-config">
<el-form :inline="true" :model="dataForm" @keyup.enter.native="currentChangeHandle(1)">
<el-form :inline="true" :model="dataForm" @keyup.enter.native="currentChangeHandle(1)" class="blueTip" size="small">
<el-form-item>
<el-input v-model="dataForm.key" :placeholder="$t('eq.groupname') + ' / ' + $t('eq.groupcode')" clearable></el-input>
</el-form-item>
<el-form-item>
<el-button @click="currentChangeHandle(1)">{{ $t('query') }}</el-button>
<el-button v-if="$hasPermission('monitoring:equipmentgroup:save')" type="primary" @click="addOrUpdateHandle()">{{ $t('add') }}</el-button>
<el-button class="buttonColor" @click="currentChangeHandle(1)">{{ $t('query') }}</el-button>
<!-- <el-button v-if="$hasPermission('monitoring:equipmentgroup:save')" type="primary" @click="addOrUpdateHandle()">{{ $t('add') }}</el-button> -->
</el-form-item>
</el-form>
<base-table
:top-btn-config="topBtnConfig"
:page="pageIndex"
:size="pageSize"
:data="dataList"
@@ -18,6 +19,7 @@
:max-height="calcMaxHeight(8)"
@operate-event="handleOperations"
@refreshDataList="getDataList"
@clickTopBtn="clickTopBtn" />
/>
<el-pagination
@size-change="sizeChangeHandle"
@@ -43,7 +45,12 @@ import i18n from '@/i18n'
import BaseTable from '@/components/base-table'
import TableOperateComponent from '@/components/base-table/components/operationComponent'
import TableTextComponent from '@/components/base-table/components/detailComponent'
const topBtnConfig = [
{
type: 'add',
btnName: i18n.t('add')
}
]
const tableConfigs = [
{
type: 'index',
@@ -71,6 +78,7 @@ const addOrUpdateConfigs = {
export default {
data() {
return {
topBtnConfig,
addOrUpdateConfigs,
calcMaxHeight,
tableConfigs,
@@ -164,6 +172,12 @@ export default {
this.$refs.addOrUpdate.init(id)
})
},
clickTopBtn() {
this.addOrUpdateVisible = true
this.$nextTick(() => {
this.$refs.addOrUpdate.init()
})
},
// 删除
deleteHandle(id) {
var ids = id
@@ -199,3 +213,20 @@ export default {
}
}
</script>
<style>
.blueTip::before {
display: inline-block;
content: '';
width: 4px;
height: 24px;
background: #0b58ff;
border-radius: 1px;
margin-right: 8px;
margin-top: 4px;
}
.buttonColor {
color: #fff;
background: #0b58ff;
}
</style>

41
src/views/modules/monitoring/equipmentType.vue
View File

@@ -1,16 +1,17 @@
<template>
<div class="mod-config">
<el-form :inline="true" :model="dataForm" @keyup.enter.native="currentChangeHandle(1)">
<el-form :inline="true" :model="dataForm" @keyup.enter.native="currentChangeHandle(1)" class="blueTip" size="small">
<el-form-item>
<el-input v-model="dataForm.key" :placeholder="$t('eq.type')" clearable></el-input>
</el-form-item>
<el-form-item>
<el-button @click="currentChangeHandle(1)">{{ $t('query') }}</el-button>
<el-button v-if="$hasPermission('monitoring:equipmenttype:save')" type="primary" @click="addOrUpdateHandle()">{{ $t('add') }}</el-button>
<el-button class="buttonColor" @click="currentChangeHandle(1)">{{ $t('query') }}</el-button>
<!-- <el-button v-if="$hasPermission('monitoring:equipmenttype:save')" type="primary" @click="addOrUpdateHandle()">{{ $t('add') }}</el-button> -->
</el-form-item>
</el-form>
<base-table
:top-btn-config="topBtnConfig"
:page="pageIndex"
:size="pageSize"
:data="dataList"
@@ -18,6 +19,7 @@
:max-height="calcMaxHeight(8)"
@operate-event="handleOperations"
@refreshDataList="getDataList"
@clickTopBtn="clickTopBtn"
/>
<el-pagination
@size-change="sizeChangeHandle"
@@ -43,7 +45,12 @@ import i18n from '@/i18n'
import BaseTable from '@/components/base-table'
import TableOperateComponent from '@/components/base-table/components/operationComponent'
// import TableTextComponent from '@/components/base-table/components/detailComponent'
const topBtnConfig = [
{
type: 'add',
btnName: i18n.t('add')
}
]
const tableConfigs = [
{
type: 'index',
@@ -90,6 +97,7 @@ const addOrUpdateConfigs = {
export default {
data() {
return {
topBtnConfig,
addOrUpdateConfigs,
calcMaxHeight,
tableConfigs,
@@ -188,6 +196,14 @@ export default {
this.$refs.addOrUpdate.init(id)
})
},
clickTopBtn() {
// 更新树形结构
this.getTreeEquipmentType()
this.addOrUpdateVisible = true
this.$nextTick(() => {
this.$refs.addOrUpdate.init()
})
},
// 删除
deleteHandle(id) {
var ids = id
@@ -223,3 +239,20 @@ export default {
}
}
</script>
<style>
.blueTip::before {
display: inline-block;
content: '';
width: 4px;
height: 24px;
background: #0b58ff;
border-radius: 1px;
margin-right: 8px;
margin-top: 4px;
}
.buttonColor {
color: #fff;
background: #0b58ff;
}
</style>

44
src/views/modules/monitoring/factory.vue
View File

@@ -1,16 +1,17 @@
<template>
<div class="mod-config">
<el-form :inline="true" :model="dataForm" @keyup.enter.native="currentChangeHandle(1)">
<el-form :inline="true" :model="dataForm" @keyup.enter.native="currentChangeHandle(1)" class="blueTip" size="small">
<el-form-item>
<el-input v-model="dataForm.key" :placeholder="$t('factory.name') + ' / ' + $t('factory.code')" clearable></el-input>
</el-form-item>
<el-form-item>
<el-button @click="currentChangeHandle(1)">{{ $t('query') }}</el-button>
<el-button v-if="$hasPermission('monitoring:factory:save')" type="primary" @click="addOrUpdateHandle()">{{ $t('add') }}</el-button>
<el-button class="buttonColor" @click="currentChangeHandle(1)">{{ $t('query') }}</el-button>
<!-- <el-button v-if="$hasPermission('monitoring:factory:save')" type="primary" @click="addOrUpdateHandle()">{{ $t('add') }}</el-button> -->
</el-form-item>
</el-form>
<base-table
:top-btn-config="topBtnConfig"
:page="pageIndex"
:size="pageSize"
:data="dataList"
@@ -18,6 +19,7 @@
:max-height="calcMaxHeight(8)"
@operate-event="handleOperations"
@refreshDataList="getDataList"
@clickTopBtn="clickTopBtn"
/>
<el-pagination
@size-change="sizeChangeHandle"
@@ -26,8 +28,7 @@
:page-sizes="[10, 20, 50, 100]"
:page-size="pageSize"
:total="totalPage"
layout="total, sizes, prev, pager, next, jumper"
>
layout="total, sizes, prev, pager, next, jumper">
</el-pagination>
<!-- 弹窗, 新增 / 修改 -->
<add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" :configs="addOrUpdateConfigs" @refreshDataList="getDataList" @destory-dialog="handleDestroyDialog" />
@@ -43,7 +44,12 @@ import i18n from '@/i18n'
import BaseTable from '@/components/base-table'
import TableOperateComponent from '@/components/base-table/components/operationComponent'
// import TableTextComponent from '@/components/base-table/components/detailComponent'
const topBtnConfig = [
{
type: 'add',
btnName: i18n.t('add')
}
]
const tableConfigs = [
{
type: 'index',
@@ -85,6 +91,7 @@ const addOrUpdateConfigs = {
export default {
data() {
return {
topBtnConfig,
calcMaxHeight,
addOrUpdateConfigs,
tableConfigs,
@@ -168,11 +175,17 @@ export default {
this.$refs.addOrUpdate.init(id)
})
},
clickTopBtn() {
this.addOrUpdateVisible = true
this.$nextTick(() => {
this.$refs.addOrUpdate.init()
})
},
// 删除
deleteHandle(id) {
var ids = id
? [id]
: this.dataListSelections.map(item => {
: this.dataListSelections.map((item) => {
return item.id
})
this.$confirm(`${i18n.t('prompt.info', { handle: id ? i18n.t('delete').toLowerCase() : i18n.t('deleteBatch').toLowerCase() })}`, i18n.t('prompt.title'), {
@@ -203,3 +216,20 @@ export default {
}
}
</script>
<style>
.blueTip::before {
display: inline-block;
content: '';
width: 4px;
height: 24px;
background: #0b58ff;
border-radius: 1px;
margin-right: 8px;
margin-top: 4px;
}
.buttonColor {
color: #fff;
background: #0b58ff;
}
</style>

43
src/views/modules/monitoring/product.vue
View File

@@ -1,18 +1,19 @@
<template>
<div class="mod-config">
<el-form :inline="true" :model="dataForm" @keyup.enter.native="currentChangeHandle(1)">
<el-form :inline="true" :model="dataForm" @keyup.enter.native="currentChangeHandle(1)" class="blueTip" size="small">
<el-form-item>
<el-input v-model="dataForm.key" :placeholder="$t('prod.name') + ' / ' + $t('prod.code')" clearable></el-input>
</el-form-item>
<el-form-item>
<el-button @click="currentChangeHandle(1)">{{ $t('query') }}</el-button>
<el-button class="buttonColor" @click="currentChangeHandle(1)">{{ $t('query') }}</el-button>
<!-- <el-button @click="addOrEdit()">测试</el-button> -->
<!-- <el-button v-if="$hasPermission('monitoring:product:save')" type="primary" @click="addOrUpdateHandle()">{{ $t('add') }}</el-button> -->
<el-button v-if="$hasPermission('monitoring:product:save')" type="primary" @click="addOrEdit()">{{ $t('add') }}</el-button>
<!-- <el-button v-if="$hasPermission('monitoring:product:save')" type="primary" @click="addOrEdit()">{{ $t('add') }}</el-button> -->
</el-form-item>
</el-form>
<base-table
:top-btn-config="topBtnConfig"
:page="pageIndex"
:size="pageSize"
:data="dataList"
@@ -20,7 +21,7 @@
:max-height="calcMaxHeight(8)"
@operate-event="handleOperations"
@refreshDataList="getDataList"
/>
@clickTopBtn="clickTopBtn" />
<el-pagination
@size-change="sizeChangeHandle"
@@ -29,8 +30,8 @@
:page-sizes="[10, 20, 50, 100]"
:page-size="pageSize"
:total="totalPage"
layout="total, sizes, prev, pager, next, jumper"
></el-pagination>
layout="total, sizes, prev, pager, next, jumper">
</el-pagination>
<!-- 弹窗, 新增 / 修改 -->
<!-- <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update> -->
<base-dialog v-if="showbasedialog" ref="basedialog" :configs="addOrUpdateConfigs" @refreshDataList="getDataList" @destory-dialog="handleDestroyDialog" />
@@ -52,6 +53,12 @@ import { dictFilter } from '@/utils/filters'
const UnitDictTypeId = '1557173812109242370'
const ProductTypeDictTypeId = '1557179530308616193'
const topBtnConfig = [
{
type: 'add',
btnName: i18n.t('add')
}
]
const tableConfigs = [
{ type: 'index', width: 100, name: i18n.t('index') },
{ prop: 'createTime', name: i18n.t('createTime'), filter: timeFilter },
@@ -144,6 +151,7 @@ export default {
mixins: [dictListMixin],
data() {
return {
topBtnConfig,
calcMaxHeight,
tableConfigs,
dataForm: {
@@ -194,6 +202,12 @@ export default {
this.$refs.basedialog.init(id)
})
},
clickTopBtn() {
this.showbasedialog = true
this.$nextTick(() => {
this.$refs.basedialog.init()
})
},
// 获取数据列表
getDataList() {
// console.log("after dialog close: ", this.showbasedialog)
@@ -291,3 +305,20 @@ export default {
}
}
</script>
<style>
.blueTip::before {
display: inline-block;
content: '';
width: 4px;
height: 24px;
background: #0b58ff;
border-radius: 1px;
margin-right: 8px;
margin-top: 4px;
}
.buttonColor {
color: #fff;
background: #0b58ff;
}
</style>

53
src/views/modules/monitoring/productionLine.vue
View File

@@ -1,16 +1,17 @@
<template>
<div class="mod-config">
<el-form :inline="true" :model="dataForm" @keyup.enter.native="currentChangeHandle(1)">
<el-form :inline="true" :model="dataForm" @keyup.enter.native="currentChangeHandle(1)" class="blueTip" size="small">
<el-form-item>
<el-input v-model="dataForm.key" :placeholder="$t('pl.name')" clearable></el-input>
</el-form-item>
<el-form-item>
<el-button @click="currentChangeHandle(1)">{{ $t('query') }}</el-button>
<el-button v-if="$hasPermission('monitoring:productionline:save')" type="primary" @click="addOrUpdateHandle()">{{ $t('add') }}</el-button>
<el-button class="buttonColor" @click="currentChangeHandle(1)">{{ $t('query') }}</el-button>
<!-- <el-button v-if="$hasPermission('monitoring:productionline:save')" type="primary" @click="addOrUpdateHandle()">{{ $t('add') }}</el-button> -->
</el-form-item>
</el-form>
<base-table
:top-btn-config="topBtnConfig"
:page="pageIndex"
:size="pageSize"
:data="dataList"
@@ -18,7 +19,7 @@
:max-height="calcMaxHeight(8)"
@operate-event="handleOperations"
@refreshDataList="getDataList"
/>
@clickTopBtn="clickTopBtn" />
<el-pagination
@size-change="sizeChangeHandle"
@current-change="currentChangeHandle"
@@ -26,8 +27,7 @@
:page-sizes="[10, 20, 50, 100]"
:page-size="pageSize"
:total="totalPage"
layout="total, sizes, prev, pager, next, jumper"
>
layout="total, sizes, prev, pager, next, jumper">
</el-pagination>
<!-- 弹窗, 新增 / 修改 -->
<add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" :configs="addOrUpdateConfigs" @refreshDataList="getDataList" @destory-dialog="handleDestroyDialog" />
@@ -42,7 +42,12 @@ import i18n from '@/i18n'
import BaseTable from '@/components/base-table'
import TableOperateComponent from '@/components/base-table/components/operationComponent'
// import TableTextComponent from '@/components/base-table/components/detailComponent'
const topBtnConfig = [
{
type: 'add',
btnName: i18n.t('add')
}
]
const tableConfigs = [
{
type: 'index',
@@ -52,7 +57,7 @@ const tableConfigs = [
{ prop: 'factoryName', name: i18n.t('factory.title') },
{ prop: 'name', name: i18n.t('pl.name') },
{ prop: 'code', name: i18n.t('pl.code') },
{ prop: 'status', name: i18n.t('pl.status'), filter: val => (val === 0 || val === 1 || val === 2) && ['停止', '运行', '未知'][val] },
{ prop: 'status', name: i18n.t('pl.status'), filter: (val) => (val === 0 || val === 1 || val === 2) && ['停止', '运行', '未知'][val] },
{ prop: 'description', name: i18n.t('desc') },
{ prop: 'remark', name: i18n.t('remark') },
{ prop: 'operations', name: i18n.t('handle'), fixed: 'right', width: 180, subcomponent: TableOperateComponent, options: ['edit', 'delete'] }
@@ -79,7 +84,7 @@ const addOrUpdateConfigs = {
placeholder: i18n.t('hints.number'),
type: 'number', // TODO: 可改进为自动应用 number 验证，此时还必须添加下述规则：
required: true,
rules: [{ type: 'number', transform: val => Number(val), trigger: 'blur', message: i18n.t('hints.number') }]
rules: [{ type: 'number', transform: (val) => Number(val), trigger: 'blur', message: i18n.t('hints.number') }]
},
'description',
'remark'
@@ -94,6 +99,7 @@ const addOrUpdateConfigs = {
export default {
data() {
return {
topBtnConfig,
calcMaxHeight,
addOrUpdateConfigs,
tableConfigs,
@@ -133,10 +139,10 @@ export default {
} else {
this.factoryList.splice(0)
}
this.addOrUpdateConfigs.fields.forEach(item => {
this.addOrUpdateConfigs.fields.forEach((item) => {
if (item.name === 'factoryId') {
console.log('res', item)
item.options = this.factoryList.map(f => ({ value: f.id, label: f.name }))
item.options = this.factoryList.map((f) => ({ value: f.id, label: f.name }))
}
})
})
@@ -194,11 +200,17 @@ export default {
this.$refs.addOrUpdate.init(id)
})
},
clickTopBtn() {
this.addOrUpdateVisible = true
this.$nextTick(() => {
this.$refs.addOrUpdate.init()
})
},
// 删除
deleteHandle(id) {
var ids = id
? [id]
: this.dataListSelections.map(item => {
: this.dataListSelections.map((item) => {
return item.id
})
this.$confirm(`${i18n.t('prompt.info', { handle: id ? i18n.t('delete').toLowerCase() : i18n.t('deleteBatch').toLowerCase() })}`, i18n.t('prompt.title'), {
@@ -229,3 +241,20 @@ export default {
}
}
</script>
<style>
.blueTip::before {
display: inline-block;
content: '';
width: 4px;
height: 24px;
background: #0b58ff;
border-radius: 1px;
margin-right: 8px;
margin-top: 4px;
}
.buttonColor {
color: #fff;
background: #0b58ff;
}
</style>

58
src/views/modules/monitoring/workShopSection.vue
View File

@@ -1,16 +1,19 @@
<template>
<div class="mod-config">
<el-form :inline="true" :model="dataForm" @keyup.enter.native="currentChangeHandle(1)">
<!-- 1. class="blueTip" size="small" -->
<el-form :inline="true" :model="dataForm" @keyup.enter.native="currentChangeHandle(1)" class="blueTip" size="small">
<el-form-item>
<el-input v-model="dataForm.key" :placeholder="$t('ws.name')" clearable></el-input>
</el-form-item>
<el-form-item>
<el-button @click="currentChangeHandle(1)">{{ $t('query') }}</el-button>
<el-button v-if="$hasPermission('monitoring:workshopsection:save')" type="primary" @click="addOrUpdateHandle()">{{ $t('add') }}</el-button>
<!-- 2. class="buttonColor" -->
<el-button class="buttonColor" @click="currentChangeHandle(1)">{{ $t('query') }}</el-button>
<!-- <el-button v-if="$hasPermission('monitoring:workshopsection:save')" type="primary" @click="addOrUpdateHandle()">{{ $t('add') }}</el-button> -->
</el-form-item>
</el-form>
<!-- 3. :top-btn-config="topBtnConfig" @clickTopBtn="clickTopBtn" -->
<base-table
:top-btn-config="topBtnConfig"
:page="pageIndex"
:size="pageSize"
:data="dataList"
@@ -18,7 +21,7 @@
:max-height="calcMaxHeight(8)"
@operate-event="handleOperations"
@refreshDataList="getDataList"
/>
@clickTopBtn="clickTopBtn" />
<el-pagination
@size-change="sizeChangeHandle"
@current-change="currentChangeHandle"
@@ -26,8 +29,7 @@
:page-sizes="[10, 20, 50, 100]"
:page-size="pageSize"
:total="totalPage"
layout="total, sizes, prev, pager, next, jumper"
>
layout="total, sizes, prev, pager, next, jumper">
</el-pagination>
<!-- 弹窗, 新增 / 修改 -->
<add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList" @destory-dialog="handleDestroyDialog" />
@@ -43,7 +45,13 @@ import i18n from '@/i18n'
import BaseTable from '@/components/base-table'
import TableOperateComponent from '@/components/base-table/components/operationComponent'
import TableTextComponent from '@/components/base-table/components/detailComponent'
// 4.就是这个topBtnConfig
const topBtnConfig = [
{
type: 'add',
btnName: i18n.t('add')
}
]
const tableConfigs = [
{
type: 'index',
@@ -79,6 +87,8 @@ const addOrUpdateConfigs = {
export default {
data() {
return {
// 5. 下面的 topBtnConfig,
topBtnConfig,
calcMaxHeight,
addOrUpdateConfigs,
tableConfigs,
@@ -114,11 +124,11 @@ export default {
getProductLine() {
this.$http.get(this.$http.adornUrl('/monitoring/productionLine/list')).then(({ data: res }) => {
if (res && res.code === 0) {
this.addOrUpdateConfigs.fields.forEach(item => {
if (item.name === 'productionLineId') item.options = res.data.map(item => ({ label: item.name, value: item.id }))
this.addOrUpdateConfigs.fields.forEach((item) => {
if (item.name === 'productionLineId') item.options = res.data.map((item) => ({ label: item.name, value: item.id }))
})
} else {
this.addOrUpdateConfigs.fields.forEach(item => {
this.addOrUpdateConfigs.fields.forEach((item) => {
if (item.name === 'productionLineId') item.options.splice(0)
})
// this.plList.splice(0)
@@ -179,11 +189,18 @@ export default {
this.$refs.addOrUpdate.init(id)
})
},
// 6. 新增按钮
clickTopBtn() {
this.addOrUpdateVisible = true
this.$nextTick(() => {
this.$refs.addOrUpdate.init()
})
},
// 删除
deleteHandle(id) {
var ids = id
? [id]
: this.dataListSelections.map(item => {
: this.dataListSelections.map((item) => {
return item.id
})
this.$confirm(`${i18n.t('prompt.info', { handle: id ? i18n.t('delete').toLowerCase() : i18n.t('deleteBatch').toLowerCase() })}`, i18n.t('prompt.title'), {
@@ -214,3 +231,20 @@ export default {
}
}
</script>
<style>
.blueTip::before {
display: inline-block;
content: '';
width: 4px;
height: 24px;
background: #0b58ff;
border-radius: 1px;
margin-right: 8px;
margin-top: 4px;
}
.buttonColor {
color: #fff;
background: #0b58ff;
}
</style>

29
src/views/modules/sys/dict-type.vue
View File

@@ -1,7 +1,7 @@
<template>
<el-card shadow="never" class="aui-card--fill">
<div class="mod-sys__dict">
<el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
<el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()" class="blueTip" size="small">
<el-form-item>
<el-input v-model="dataForm.dictName" :placeholder="$t('dict.dictName')" clearable></el-input>
</el-form-item>
@@ -9,11 +9,11 @@
<el-input v-model="dataForm.dictType" :placeholder="$t('dict.dictType')" clearable></el-input>
</el-form-item>
<el-form-item>
<el-button @click="getDataList()">{{ $t('query') }}</el-button>
<el-button class="buttonColor" @click="getDataList()">{{ $t('query') }}</el-button>
</el-form-item>
<el-form-item>
<!-- <el-form-item>
<el-button v-if="$hasPermission('sys:dict:save')" type="primary" @click="addOrUpdateHandle()">{{ $t('add') }}</el-button>
</el-form-item>
</el-form-item> -->
<el-form-item>
<el-button v-if="$hasPermission('sys:dict:delete')" type="danger" @click="deleteHandle()">{{ $t('deleteBatch') }}</el-button>
</el-form-item>
@@ -21,7 +21,19 @@
<el-button @click="showIcons()">所有图标</el-button>
</el-form-item>
</el-form>
<el-table v-loading="dataListLoading" :data="dataList" border @selection-change="dataListSelectionChangeHandle" @sort-change="dataListSortChangeHandle" style="width: 100%;">
<!-- border
:row-style="{ height: '50px' }"
:cell-style="{ padding: '0px' }"
-->
<el-table
v-loading="dataListLoading"
:data="dataList"
@selection-change="dataListSelectionChangeHandle"
@sort-change="dataListSortChangeHandle"
style="width: 100%"
:row-style="{ height: '50px' }"
:cell-style="{ padding: '0px' }"
>
<el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>
<el-table-column prop="dictName" :label="$t('dict.dictName')" header-align="center" align="center"></el-table-column>
<el-table-column prop="dictType" :label="$t('dict.dictType')" header-align="center" align="center"></el-table-column>
@@ -48,8 +60,7 @@
:total="total"
layout="total, sizes, prev, pager, next, jumper"
@size-change="pageSizeChangeHandle"
@current-change="pageCurrentChangeHandle"
>
@current-change="pageCurrentChangeHandle">
</el-pagination>
<!-- 弹窗, 新增 / 修改 -->
<add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
@@ -90,8 +101,8 @@ export default {
// destroy dialog
handleDestroyDialog() {
setTimeout(() => {
this.addOrUpdateVisible= false
}, /** after dialog animated */ 200);
this.addOrUpdateVisible = false
}, /** after dialog animated */ 200)
},
//
showIcons() {