'更改baseTable和content样式'

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

Binary file not shown.

Before

Width:  |  Height:  |  Size: 36 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 9.3 KiB

After

Width:  |  Height:  |  Size: 36 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.3 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 9.3 KiB

After

Width:  |  Height:  |  Size: 36 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.3 KiB

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;

View File

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

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上下内边距高度

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>

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

File diff suppressed because one or more lines are too long

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>

After

Width:  |  Height:  |  Size: 1.8 KiB

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 } }
]
}

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
}

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">

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>

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"

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)
)
},

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;

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>

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>

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>

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>

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>

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>

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>

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() {