Commit 0c2a7e93 authored by xiexingan's avatar xiexingan

调整

parent 4808d319
......@@ -5,10 +5,10 @@ CONFIG.TITLE = 'AI节能管理系统'
// 网络请求公用地址
CONFIG.requestPath = 'http://localhost:8046'
// CONFIG.requestPath = 'http://localhost:8046'
// CONFIG.requestPath = 'http://10.20.72.31:8046'
// CONFIG.requestPath = 'http://59.110.43.122:8046'
CONFIG.requestPath = 'http://59.110.43.122:8046'
// 文件上传
// CONFIG.urlPath = 'http://10.20.72.33/'
......
......@@ -22,6 +22,9 @@
:label="item.label"
:width="item.width"
:align="item.align"
header-align="center"
align="center"
>
<template slot-scope="scope">
<slot :name="item.prop" :scope="scope.row"></slot>
......@@ -34,11 +37,14 @@
:label="item.label"
:width="item.width"
:align="item.align"
header-align="center"
align="center"
>
</el-table-column>
</template>
<el-table-column align="center" label="操作" :width="opNum * 80">
<el-table-column v-if='showOpr' align="center" label="操作" :width="opNum * 80">
<template slot-scope="scope">
<slot name="operation" :scope="scope.row"></slot>
</template>
......@@ -57,13 +63,13 @@ export default {
tableColums: {
type: Array
},
isShowOp: {
type: Boolean,
default: false
},
opNum: {
type: Number,
default: 3
},
showOpr: {
type: Boolean,
default: true
}
},
data() {
......
<template lang="pug">
el-container(style="padding:0px;height:77.6vh;")
el-header(style='height:42px;line-height:42px;border: 1px solid rgba(195, 195, 195, 1);background: #f4f4f4;')
span.title-bold.title-left-color() 历史指令
<el-popover placement="bottom" width="150" >
<el-button slot="reference" size='mini' type="primary" icon="el-icon-s-tools" style='float:right;transform:translateY(6px)'> 筛选</el-button>
<el-checkbox-group v-model="checkList">
<el-col :span="24">
<el-checkbox v-for="(item,index) in tableHeader" :label="item" :key="index" >
span {{item.label}}
</el-checkbox>
</el-col>
</el-checkbox-group>
</el-popover>
el-main.box_main
el-card()
div.tableCard()
el-form( :inline="true" :model="dataForm" size="mini" @keyup.enter.native="getDataList()" )
el-form-item( label="关键词:")
el-input( v-model="dataForm.comMark" placeholder="" clearable)
el-form-item( label="指令类型:")
el-select( v-model="dataForm.comType" placeholder="请选择" clearable)
el-option( label="自动" value="1")
el-option( label="人工" value="2")
el-form-item( label="操作时间:")
el-date-picker(type="datetime" value-format="yyyy-MM-dd HH:mm:ss" style="width:175px;" v-model="dataForm.startTime" placeholder="选择开始时间" clearable)
el-form-item( label="至")
el-date-picker( type="datetime" value-format="yyyy-MM-dd HH:mm:ss" style="width:175px;" v-model="dataForm.endTime" placeholder="选择结束时间" clearable)
el-button( type="primary" size='mini' icon="el-icon-search" @click="getDataList()") 查询
el-button(@click="reSet()" size='mini' type="primary" icon="el-icon-refresh-right") 重置
//- <drag-table :data="dataList" :header="checkList" :option="tableOption" @getDataList="getDataList" v-loading="dataListLoading" :operationNum="3" :isShowOperate="true">
<drag-table :data="dataList" :header="checkList" :option="tableOption" @getDataList="getDataList" v-loading="dataListLoading" >
//- -- 插槽
el-table-column(slot="fixed" fixed prop="" label="序号" width="80" header-align="center" align="center")
template( slot-scope="scope")
span {{scope.$index+(pageIndex - 1) * pageSize + 1}}
template(slot='comSource' slot-scope='scope')
font(v-if='scope.row.comSource == 1') 算法
font(v-if='scope.row.comSource == 2') 人工
template(slot='comType' slot-scope='scope')
font(v-if='scope.row.comType == 1') 自动
font(v-if='scope.row.comType == 2') 手动
</drag-table>
el-footer.box_footer
el-pagination(@size-change="sizeChangeHandle" background @current-change="currentChangeHandle" :current-page="pageIndex" :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" :total="totalPage" layout="total, sizes, prev, pager, next, jumper")
</template>
<script>
import dragTable from '../../components/tab'
export default {
filters: {
ellipsis(value) {
if (!value) return ''
if (value.length > 12) {
return value.slice(0, 12) + '...'
}
return value
}
},
data() {
return {
checkList: [], //筛选数据
tableHeader: [
{ label: '操作员', prop: 'createUserName' }, //是否插槽
{ label: '来源', prop: 'comSource', slot: true },
{ label: '指令类型', prop: 'comType', slot: true },
{ label: '操作时间', prop: 'createTime' },
{ label: '指令内容', prop: 'comMark' }
// {label:'操作',prop:''},
],
tableOption: {
border: false, //是否边框
maxHeight: 500 //高度
},
dataForm: {
comMark: '',
comType: null,
startTime: '',
endTime: ''
},
dataList: [],
pageIndex: 1,
pageSize: 10,
totalPage: 0,
dataListLoading: false
}
},
components: {
dragTable
},
watch: {
totalPage() {
//注意这个函数的名字必须和你监听data中的属性的名字一样,这样才能当你data中的属性发生变化时,触发这个函数
let pages = Math.ceil(this.totalPage / this.pageSize) //新数据总页数
//总页数小于当前页数则重新加载列表数据
if (pages < this.pageIndex) {
this.pageIndex = pages || 1
this.getDataList() //获取表格数据的方法
}
}
},
created() {
this.pageIndex = 1
this.getDataList()
},
mounted() {
this.checkList = [...this.tableHeader]
},
methods: {
toLine(name) {
return name.replace(/([A-Z])/g, '_$1').toLowerCase()
},
//重置
reSet() {
this.dataForm = {}
this.pageIndex = 1
this.getDataList()
},
// 获取数据列表
getDataList(sort, order) {
// console.log(sort,'---',order)
this.dataListLoading = true
this.$http({
url: this.$http.adornUrl('/sysCommandLog/pageList'),
method: 'post',
data: {
comMark: this.dataForm.comMark,
comType: this.dataForm.comType,
startTime: this.dataForm.startTime,
endTime: this.dataForm.endTime
}
}).then((data) => {
//console.log('data', data)
if (data && data.code === 0) {
this.dataList = data.page.rows
// console.log(this.dataList)
this.totalPage = data.page.total
} else {
this.dataList = []
this.totalPage = 0
}
this.dataListLoading = false
})
},
//排序
sortChange(column) {
if (column.order === 'descending') {
this.order = 'desc'
} else {
this.order = 'asc'
}
if (column.column.columnKey) {
this.sort = column.column.columnKey
} else {
this.sort = column.prop
}
this.getDataList()
},
// 每页数
sizeChangeHandle(val) {
this.pageSize = val
this.pageIndex = 1
this.getDataList()
},
// 当前页
currentChangeHandle(val) {
this.pageIndex = val
this.getDataList()
}
}
}
</script>
<template lang="pug">
el-container(style="padding:0px;height:77.6vh;")
el-header(style='height:42px;line-height:42px;border: 1px solid rgba(195, 195, 195, 1);background: #f4f4f4;')
span.title-bold.title-left-color() 历史指令
<el-popover placement="bottom" width="150" >
<el-button slot="reference" size='mini' type="primary" icon="el-icon-s-tools" style='float:right;transform:translateY(6px)'> 筛选</el-button>
<el-checkbox-group v-model="checkList">
<el-col :span="24">
<el-checkbox v-for="(item,index) in tableHeader" :label="item" :key="index" >
span {{item.label}}
</el-checkbox>
</el-col>
</el-checkbox-group>
</el-popover>
el-main.box_main
el-card()
card-warp(title="历史指令 ", height="45px")
div(slot='content')
div.tableCard()
el-form( :inline="true" :model="dataForm" size="mini" @keyup.enter.native="getDataList()" )
el-form-item( label="关键词:")
......@@ -28,25 +16,20 @@
el-date-picker( type="datetime" value-format="yyyy-MM-dd HH:mm:ss" style="width:175px;" v-model="dataForm.endTime" placeholder="选择结束时间" clearable)
el-button( type="primary" size='mini' icon="el-icon-search" @click="getDataList()") 查询
el-button(@click="reSet()" size='mini' type="primary" icon="el-icon-refresh-right") 重置
//- <drag-table :data="dataList" :header="checkList" :option="tableOption" @getDataList="getDataList" v-loading="dataListLoading" :operationNum="3" :isShowOperate="true">
<drag-table :data="dataList" :header="checkList" :option="tableOption" @getDataList="getDataList" v-loading="dataListLoading" >
//- -- 插槽
el-table-column(slot="fixed" fixed prop="" label="序号" width="80" header-align="center" align="center")
template( slot-scope="scope")
span {{scope.$index+(pageIndex - 1) * pageSize + 1}}
template(slot='comSource' slot-scope='scope')
font(v-if='scope.row.comSource == 1') 算法
font(v-if='scope.row.comSource == 2') 人工
template(slot='comType' slot-scope='scope')
font(v-if='scope.row.comType == 1') 自动
font(v-if='scope.row.comType == 2') 手动
</drag-table>
table-list(:tableColums='tableHeader' :tableData='dataList' :showOpr='false' :opNum='2')
template(#comSource='data')
font(v-if='data.scope.comSource == 1') 算法
font(v-if='data.scope.comSource == 2') 人工
template(#comType='data' )
font(v-if='data.scope.comType == 1') 自动
font(v-if='data.scope.comType == 2') 手动
el-footer.box_footer
el-pagination(@size-change="sizeChangeHandle" background @current-change="currentChangeHandle" :current-page="pageIndex" :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" :total="totalPage" layout="total, sizes, prev, pager, next, jumper")
</template>
<script>
import dragTable from '../../components/tab'
import tableList from '@/pages/components/tableList'
export default {
filters: {
ellipsis(value) {
......@@ -86,7 +69,7 @@ export default {
}
},
components: {
dragTable
tableList
},
watch: {
totalPage() {
......
<template lang="pug">
el-container(style="padding:0px;height:77.6vh;")
el-aside( width="333px" style="z-index:1000;box-shadow: 2px 0 8px 0 rgba(0, 0, 0, 0.2);")
el-card.treeCard(style='background:#f4f4f4;box-sizing:border-box;height:100%' :body-style="{ 'overflow-x': 'hidden', 'overflow-y': 'auto' }")
div.title-bold(slot='header' style='padding-right:150px;margin-left:10px;z-index:1001;') 数据字典维护
el-tree.dic_tree(style='background:#f4f4f4;' :data="data" node-key='id' :highlight-current='true' :props="defaultProps" :default-expand-all='true' @node-click="handleNodeClick" ref = "tree")
//- div(class="custom-tree-node" slot-scope="{ node, data }" )
span(class="custom-tree-node" style='width:90%;line-height: 18px;' slot-scope="{ node, data }")
div(v-if="data.children&&data.children.length>0" style='background:#f4f4f4;')
div.dic_tree_header( ) 数据字典项
span( v-else)
div.tree_point
span &nbsp; {{ node.label }}
el-container()
el-header(style='height:42px;line-height:42px;background: #f4f4f4;z-index:1001;border: 1px solid rgba(196, 196, 196, 1);')
span.title-bold.title-left-color(v-if="listTitle") {{listTitle}}
span.title-bold.title-left-color(v-else) 数据字典项
el-popover( placement="bottom" width="150")
el-button( slot="reference" size='mini' type="primary" icon="el-icon-s-tools" style='float:right;transform:translateY(6px)') 筛选
el-checkbox-group( v-model="checkList")
el-col( :span="24")
el-checkbox( v-for="(item,index) in tableHeader" :label="item" :key="index" )
span {{item.label}}
el-button(v-if="isAuth('sys:dic:save')",type='primary' size='mini' icon='el-icon-plus',style='float:right;transform:translateY(6px);margin-right:20px;' :disabled="flag" @click='addOrUpdateHandle()') 新增
el-main.box_main
el-card.tableCard
//- el-table(:data='dataList' @sort-change='sortChange' :stripe='true' v-loading='dataListLoading' style='width: 100%;' highlight-current-row :header-cell-style="{background:'#EEF8FF',color:'#333333'}")
//- el-table-column(type='index', header-align='center', align='center', label='序号')
//- template(scope="scope")
//- span {{scope.$index+(pageIndex - 1) * pageSize + 1}}
//- el-table-column(prop='name', header-align='center', align='center', label='字典项名称' sortable='custom')
//- el-table-column(prop='value', header-align='center', align='center', label='字典项值' sortable='custom')
//- el-table-column(prop='sortValue',column-key='sort_value', header-align='center', align='center', label='排序值' sortable='custom')
//- el-table-column(prop='',header-align='center',align='center',label='操作' width='200px')
//- template(slot-scope="scope")
//- el-button(type="text" v-if="isAuth('sys:dic:update')" @click="addOrUpdateHandle(scope.row)") 编辑
//- el-button(type="text" v-if="isAuth('sys:dic:delete')" @click="deleteHandle(scope.row)") 删除
drag-table( :data="dataList" :header="checkList" :isToLine='true' :option="tableOption" @getDataList="getDataList" v-loading="dataListLoading" :operationNum="4" :isShowOperate="true")
//- -- 插槽
el-table-column(slot="fixed" fixed prop="" label="序号" width="80" header-align="center" align="center")
template( slot-scope="scope")
span {{scope.$index+(pageIndex - 1) * pageSize + 1}}
//- 操作项
template( slot-scope="scope" )
el-button(type="text" v-if="isAuth('sys:dic:update')" @click="addOrUpdateHandle(scope.row)") 编辑
el-button(type="text" v-if="isAuth('sys:dic:delete')" @click="deleteHandle(scope.row)") 删除
el-footer.box_footer
el-pagination(@size-change='sizeChangeHandle' background @current-change='currentChangeHandle' :current-page='pageIndex', :page-sizes='[10, 20, 50, 100]', :page-size='pageSize', :total='totalPage', layout='total, sizes, prev, pager, next, jumper')
el-dialog(width="40%",:append-to-body='true' :visible.sync='visible' :modal-append-to-body='false' @close="closeForm('ruleForm')")
div.title-bold(slot='title') {{!ruleForm.id ? '新增字典项': '编辑字典项'}}
el-form(:model="ruleForm", :inline="false" :rules="rules" ref="ruleForm", label-width="100px", @submit.native.prevent)
el-card(shadow="never")
el-row(:span='24')
el-col(:span='24')
el-form-item(label="上级字典项ID:" prop="parentId" v-if='false')
el-input(v-model='ruleForm.parentId' placeholder="" clearable v-if='false')
el-col(:span='24')
el-form-item(label="字典项名称:" prop="name")
el-input(v-model='ruleForm.name' placeholder="请输入字典项名称" clearable )
el-col(:span='12')
el-form-item(label="字典项值:" prop="value")
el-input(v-model='ruleForm.value' placeholder="请输字典项值" clearable )
el-col(:span='12')
el-form-item(label="排序值:" prop="sortValue")
el-input(v-model.number='ruleForm.sortValue' placeholder="请输入字典项排序" clearable)
div(slot="footer" style=' text-align: center;')
el-button(type='primary' size='medium' @click="cancel") 取 消
el-button(type='primary' size='medium' @click="addsave" v-prevent-re-click) 保 存
</template>
<script>
import dragTable from '../../components/tab'
export default {
data () {
let validateNumber = (rule, value, callback) => {
if (value < 0) {
callback(new Error('只能输入正整数'))
} else if (value > 10000) {
callback(new Error('排序值超出范围'))
} else {
callback()
}
}
return {
checkList: [], //筛选数据
      tableHeader: [
        { label: '字典项名称', prop: 'name' },
        { label: '字典项值', prop: 'value' },
        { label: '排序值', prop: 'sortValue' }
      ],
      tableOption: {
        border: false, //是否边框
        maxHeight: 500 //高度
      },
listTitle: '',
flag: true,
clickFlag: false,
word: '', //查询
dataList: [], //列表
dataListLoading: false,
logTimeout: null,
pageIndex: 1,
pageSize: 10,
totalPage: 0,
stationId: localStorage.getItem('stationId'),
sort: 'sort_value',
order: 'asc',
addOrUpdateVisible: false,
ruleForm: {},
visible: false,
dicInfo: {},
dicId: '',
rules: {//添加规则
name: [{ required: true, message: '字典项名称不能为空', trigger: 'blur' },
{ min: 1, max: 30, message: '长度在 1 到 30 个字符', trigger: 'blur' }],
value: [{ min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur' }],
sortValue: [{ required: true, message: '排序值不能为空' },
// { min: 1, max: 10, message: '排序值超出范围', trigger: 'blur' },
{ type: 'number', message: '排序值必须为数字' },
{ validator: validateNumber, trigger: ['blur', 'change'] }
// { pattern: /^[1-9]\d*$/, message: '只能输入正整数', trigger: 'change' }
]
},
data: [],
defaultProps: {
children: 'children',
label: 'name',
id: 'id'
}
}
},
components: {
dragTable
},
watch: {
totalPage() { //注意这个函数的名字必须和你监听data中的属性的名字一样,这样才能当你data中的属性发生变化时,触发这个函数
let pages = Math.ceil(this.totalPage / this.pageSize)//新数据总页数
//总页数小于当前页数则重新加载列表数据
if (pages < this.pageIndex) {
this.pageIndex = pages || 1
this.getDataList()//获取表格数据的方法
}
}
},
created () {
this.getList()
this.dicInfo = this.data[0]
this.checkList = [...this.tableHeader]
},
methods: {
getList () {
this.$http({
url: this.$http.adornUrl('/sysDictionary/dictionaryAllList'),
method: 'GET',
params: {
stationId: this.stationId
}
}).then(data => {
if (data) {
this.data = data.list
}
})
},
sortChange (column) {
if (column.order === 'descending') {
this.order = 'desc'
} else {
this.order = 'asc'
}
if (column.column.columnKey) {
this.sort = column.column.columnKey
} else {
this.sort = column.prop
}
this.getDataList()
},
handleNodeClick (data) {
console.log(data, '--------')
this.listTitle = data.name
if (data.parentId != '-1') {
this.flag = false
} else {
this.flag = true
}
this.ruleForm.parentId = data.id
this.dicId = data.id
this.dicInfo = data
this.getDataList()
},
getDataList (sort, order) {
this.dataListLoading = true
this.$http({
url: this.$http.adornUrl('/sysDictionary/dictionaryList'),
method: 'post',
data: {
page: this.pageIndex,
rows: this.pageSize,
parentId: this.dicId,
sort: sort || 'sort_value',
order,
stationId: this.stationId
}
}).then(data => {
if (data) {
this.dataList = data.page.rows
this.totalPage = data.page.total
} else {
this.dataList = []
this.totalPage = 0
}
this.dataListLoading = false
})
},
// 删除
deleteHandle (row) {
this.$confirm(`确认删除该字典项?`, '删除字典项', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
closeOnClickModal: false
}).then(() => {
this.$http({
url: this.$http.adornUrl('/sysDictionary/deleteById'),
method: 'post',
data: row
}).then((res) => {
if (res && res.code === 0) {
this.$message({
message: '操作成功',
type: 'success',
duration: 1500,
onClose: () => {
this.getDataList()
}
})
} else {
this.$message.error(res.msg)
}
})
})
},
//添加或修改事件
addOrUpdateHandle (row, flagType) {
this.clickFlag = false
this.visible = true
if (row) {
this.ruleForm = JSON.parse(JSON.stringify(row))
} else {
this.ruleForm = {}
if (this.dicInfo) {
this.ruleForm.parentId = this.dicInfo.id
this.ruleForm.stationId = this.stationId
}
}
},
// 提交
addsave () {
this.$refs['ruleForm'].validate(valid => {
if (valid) {
this.clickFlag = true
this.ruleForm.stationId = this.stationId
this.$http({
url: this.$http.adornUrl(
`/sysDictionary/${!this.ruleForm.id ? 'save' : 'update'}`
),
method: 'post',
data: this.ruleForm
}).then(data => {
if (data && data.code === 0) {
this.$message({
message: '操作成功',
type: 'success',
duration: 1500,
onClose: () => {
this.visible = false
this.getDataList()
//如果左边菜单栏点击的是最上层则不刷新
if (this.ruleForm.parentId === '6070da6f5d9b40121359d993f9791b09') {
this.getList()
}
}
})
} else {
this.clickFlag = false
this.$message.error(data.msg)
}
})
}
})
},
closeForm (formRule) {
this.ruleForm = {}
this.$refs[formRule].resetFields()
this.visible = false
},
// 每页数
sizeChangeHandle (val) {
this.pageSize = val
this.pageIndex = 1
this.getDataList()
},
// 当前页
currentChangeHandle (val) {
this.pageIndex = val
this.getDataList()
},
//取消
cancel() {
this.$confirm('确认取消?', `${!this.ruleForm.id ? '新增字典项' : '编辑字典项'}`, {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
})
.then(() => {
this.closeForm('ruleForm')
})
.catch(() => {
this.$message({
type: 'info',
message: '已取消退出'
})
})
}
}
}
</script>
<style lang='scss' scoped>
.dic_tree_header {
width: 330px;
height: 30px;
line-height: 30px;
text-indent: 20px;
// background: white !important;
background: white;
border-radius: 15px 0 0 15px;
box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.05);
font-size: 14px;
font-family: Microsoft YaHei;
font-weight: bold;
color: rgba(0, 0, 0, 1);
}
.tree_point {
width: 6px;
height: 6px;
display: inline-block;
transform: translateY(-3px);
background: rgba(23, 41, 71, 1);
opacity: 0.3;
border-radius: 50%;
margin-left: 7px;
}
.dic_tree /deep/ .el-tree-node__children {
font-size: 14px;
font-family: Microsoft YaHei;
font-weight: bold;
color: rgba(0, 0, 0, 1);
}
.dic_tree /deep/ .el-tree-node__expand-icon.expanded {
position: absolute !important;
left: 100px !important;
}
.dic_tree /deep/ .el-tree-node__content > .el-tree-node__expand-icon {
position: absolute !important;
left: 100px !important;
}
</style>
<style lang="scss">
.el-tree--highlight-current
.el-tree-node.is-current
> .el-tree-node__content
.custom-tree-node {
background-color: #33b0f6 !important;
color: aliceblue;
}
.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
background-color: transparent;
}
</style>
......@@ -12,9 +12,8 @@
div.tree_point
span &nbsp; {{ node.label }}
el-container()
el-header(style='height:42px;line-height:42px;background: #f4f4f4;z-index:1001;border: 1px solid rgba(196, 196, 196, 1);')
span.title-bold.title-left-color(v-if="listTitle") {{listTitle}}
span.title-bold.title-left-color(v-else) 数据字典项
card-warp(:title="listTitle?listTitle :'数据字典项' ", height="45px")
span(slot='right')
el-popover( placement="bottom" width="150")
el-button( slot="reference" size='mini' type="primary" icon="el-icon-s-tools" style='float:right;transform:translateY(6px)') 筛选
el-checkbox-group( v-model="checkList")
......@@ -22,28 +21,13 @@
el-checkbox( v-for="(item,index) in tableHeader" :label="item" :key="index" )
span {{item.label}}
el-button(v-if="isAuth('sys:dic:save')",type='primary' size='mini' icon='el-icon-plus',style='float:right;transform:translateY(6px);margin-right:20px;' :disabled="flag" @click='addOrUpdateHandle()') 新增
el-main.box_main
el-card.tableCard
//- el-table(:data='dataList' @sort-change='sortChange' :stripe='true' v-loading='dataListLoading' style='width: 100%;' highlight-current-row :header-cell-style="{background:'#EEF8FF',color:'#333333'}")
//- el-table-column(type='index', header-align='center', align='center', label='序号')
//- template(scope="scope")
//- span {{scope.$index+(pageIndex - 1) * pageSize + 1}}
//- el-table-column(prop='name', header-align='center', align='center', label='字典项名称' sortable='custom')
//- el-table-column(prop='value', header-align='center', align='center', label='字典项值' sortable='custom')
//- el-table-column(prop='sortValue',column-key='sort_value', header-align='center', align='center', label='排序值' sortable='custom')
//- el-table-column(prop='',header-align='center',align='center',label='操作' width='200px')
//- template(slot-scope="scope")
//- el-button(type="text" v-if="isAuth('sys:dic:update')" @click="addOrUpdateHandle(scope.row)") 编辑
//- el-button(type="text" v-if="isAuth('sys:dic:delete')" @click="deleteHandle(scope.row)") 删除
drag-table( :data="dataList" :header="checkList" :isToLine='true' :option="tableOption" @getDataList="getDataList" v-loading="dataListLoading" :operationNum="4" :isShowOperate="true")
//- -- 插槽
el-table-column(slot="fixed" fixed prop="" label="序号" width="80" header-align="center" align="center")
template( slot-scope="scope")
span {{scope.$index+(pageIndex - 1) * pageSize + 1}}
div(slot='content')
table-list(:tableColums='tableHeader' :tableData='dataList' :opNum='2')
//- 操作项
template( slot-scope="scope" )
el-button(type="text" v-if="isAuth('sys:dic:update')" @click="addOrUpdateHandle(scope.row)") 编辑
el-button(type="text" v-if="isAuth('sys:dic:delete')" @click="deleteHandle(scope.row)") 删除
template( #operation='data' )
el-button(type="text" v-if="isAuth('sys:dic:update')" @click="addOrUpdateHandle(data.scope)") 编辑
el-button(type="text" v-if="isAuth('sys:dic:delete')" @click="deleteHandle(data.scope)") 删除
el-footer.box_footer
el-pagination(@size-change='sizeChangeHandle' background @current-change='currentChangeHandle' :current-page='pageIndex', :page-sizes='[10, 20, 50, 100]', :page-size='pageSize', :total='totalPage', layout='total, sizes, prev, pager, next, jumper')
el-dialog(width="40%",:append-to-body='true' :visible.sync='visible' :modal-append-to-body='false' @close="closeForm('ruleForm')")
......@@ -70,7 +54,8 @@
</template>
<script>
import dragTable from '../../components/tab'
import tableList from '@/pages/components/tableList'
export default {
data () {
let validateNumber = (rule, value, callback) => {
......@@ -131,7 +116,7 @@ export default {
}
},
components: {
dragTable
tableList
},
watch: {
totalPage() { //注意这个函数的名字必须和你监听data中的属性的名字一样,这样才能当你data中的属性发生变化时,触发这个函数
......
<template lang='pug'>
el-container(style="padding:0px;height:77.6vh;")
el-header(style='height:42px;line-height:42px;border: 1px solid rgba(195, 195, 195, 1);background: #f4f4f4;')
span.title-bold.title-left-color() 系统日志
el-popover( placement="bottom" width="150" )
el-button(slot="reference" size='mini' type="primary" icon="el-icon-s-tools" style='float:right;transform:translateY(6px);') 筛选
el-checkbox-group( v-model="checkList")
el-col( :span="24" )
el-checkbox( v-for="(item,index) in checkBoxList" :label="item.prop" :key="index" @change='changeCheck(item.prop)') {{item.label}}
el-main.box_main
el-card()
div.tableCard()
el-form( :inline="true" :model="dataForm" size="mini" @keyup.enter.native="getDataList()" )
el-form-item( label="操作员:")
el-input( v-model="dataForm.username" placeholder="操作员" clearable)
el-form-item( label="操作类型:")
el-select( v-model="dataForm.operation" placeholder="请选择" clearable)
el-option( v-for="(item,index) in operationList" :key="index" :label="item" :value="item")
el-form-item( label="操作时间:")
el-date-picker(type="datetime" value-format="yyyy-MM-dd HH:mm:ss" style="width:175px;" v-model="dataForm.startTime" placeholder="选择开始时间" clearable)
el-form-item( label="至")
el-date-picker( type="datetime" value-format="yyyy-MM-dd HH:mm:ss" style="width:175px;" v-model="dataForm.endTime" placeholder="选择结束时间" clearable)
el-button( type="primary" size='mini' icon="el-icon-search" @click="getDataList()") 查询
el-button(@click="reSet()" size='mini' type="primary" icon="el-icon-refresh-right") 重置
el-table(:data="dataList" class='myTable' row-key="id" ref='tables' @sort-change='sortChange' style="width: 100%;" v-loading="dataListLoading" :stripe="true" :header-cell-style="{background:'#EEF8FF',color:'#333333'}")
//- el-table-column( type="index" header-align="center" align="center" label="序号" width="100")
//- template(scope="scope")
//- span {{scope.$index+(pageIndex - 1) * pageSize + 1}}
//- el-table-column(v-if='checkList.includes("操作员")' prop="username" header-align="center" align="center" label="操作员" sortable='custom')
//- el-table-column(v-if='checkList.includes("操作时间")' prop="createDate" columnKey='create_date' header-align="center" align="center" label="操作时间" sortable='custom')
//- el-table-column(v-if='checkList.includes("主机ip")' prop="ip" header-align="center" align="center" label="主机ip" sortable='custom')
//- el-table-column(v-if='checkList.includes("模块名称")' prop="blockName" columnKey='block_name' header-align="center" align="center" label="模块名称" sortable='custom')
//- el-table-column(v-if='checkList.includes("操作类型")' prop="operation" header-align="center" align="center" label="操作类型" sortable='custom')
//- el-table-column(v-if='checkList.includes("描述")' prop="detail" header-align="center" align="center" label="描述" width='360' sortable='custom')
//- div(slot-scope='scope')
//- span(:title='scope.row.detail') {{scope.row.detail |ellipsis}}
//- el-table-column(v-for='(item,index) in colList' :key='`colList_${index}`' :columnKey='toLine(dropList[index].prop)' v-if='checkList.includes(item.prop)' :label='item.label' :prop='dropList[index].prop' header-align="center" align="center" :sortable='dropList[index].prop=="sort"?false:"custom"')
el-table-column(v-for='(item,index) in colList' :key='`colList_${index}`' :columnKey='toLine(dropList[index].prop)' :label='item.label' :prop='dropList[index].prop' header-align="center" align="center" :sortable='dropList[index].prop=="sort"?false:"custom"')
template(v-if="dropList[index].prop=='sort'" scope="scope")
span {{scope.$index+(pageIndex - 1) * pageSize + 1}}
el-footer.box_footer
el-pagination(@size-change="sizeChangeHandle" background @current-change="currentChangeHandle" :current-page="pageIndex" :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" :total="totalPage" layout="total, sizes, prev, pager, next, jumper")
</template>
<script>
import Sortable from "sortablejs";
let that
export default {
filters: {
ellipsis (value) {
if (!value) return ''
if (value.length > 12) {
return value.slice(0, 12) + '...'
}
return value
}
},
data () {
return {
isShow:true,
checkList:[], //"序号","操作员", "操作时间", "主机ip", "模块名称", "操作类型","描述"
checkBoxList:[],
colList:[
{label:'序号',prop:'sort'},
{label:'操作员',prop:'username'},
{label:'操作时间',prop:'createDate'},
{label:'主机ip',prop:'ip'},
{label:'模块名称',prop:'blockName'},
{label:'操作类型',prop:'operation'},
{label:'描述',prop:'detail'},
],
dropList:[
{label:'序号',prop:'sort'},
{label:'操作员',prop:'username'},
{label:'操作时间',prop:'createDate'},
{label:'主机ip',prop:'ip'},
{label:'模块名称',prop:'blockName'},
{label:'操作类型',prop:'operation'},
{label:'描述',prop:'detail'},
],
dataForm: {
username: '',
operation: '',
startTime: '',
endTime: ''
},
operationList: ['登录', '注销', '新增', '修改', '删除'],
dataList: [],
pageIndex: 1,
pageSize: 10,
totalPage: 0,
dataListLoading: false
}
},
created () {
that=this
this.pageIndex = 1
this.getDataList()
},
mounted() {
this.getTableList()
this.columnDrop();
},
beforeUpdate() { this.$nextTick(() => { this.$refs.tables.doLayout(); }); },
methods: {
getTableList(){
this.checkBoxList=JSON.parse(JSON.stringify(this.colList))
this.checkList=this.colList.map(e=>e.prop)
// this.getDataList()
},
changeCheck(propName){
let index=this.checkBoxList.findIndex(e=>{
return e.prop==propName
})
let checkIndex= this.checkList.indexOf(propName) //是否在选中列表中
console.log(index,checkIndex)
if(checkIndex<0){
let aa= this.colList.filter(e=>{
return e.prop!==propName
})
this.colList=[]
this.colList=JSON.parse(JSON.stringify(aa))
this.dropList=JSON.parse(JSON.stringify(aa))
console.log(this.colList)
console.log(this.dropList)
}else if(index>-1&&checkIndex!==-1){
this.colList.push(this.checkBoxList[index])
this.dropList.push(this.checkBoxList[index])
}
this.$nextTick(()=>{
that.$refs.tables.doLayout()
})
},
// 列拖拽
columnDrop() {
const wrapperTr = document.querySelector(".myTable .el-table__header-wrapper tr");
this.sortable = Sortable.create(wrapperTr, {
animation: 180,
delay: 0,
onEnd: (evt) => {
const oldItem = this.dropList[evt.oldIndex];
this.dropList.splice(evt.oldIndex, 1);
this.dropList.splice(evt.newIndex, 0, oldItem);
// this.colList=this.dropList
console.log(this.colList)
console.log(this.dropList)
this.$nextTick(()=>{
that.$refs.tables.doLayout()
})
},
});
},
 toLine(name) {
  return name.replace(/([A-Z])/g,"_$1").toLowerCase();
},
//重置
reSet() {
this.dataForm = {}
this.pageIndex = 1
this.getDataList()
},
// 获取数据列表
getDataList () {
this.dataListLoading = true
this.$http({
url: this.$http.adornUrl('/sys/log/list'),
method: 'get',
params: this.$http.adornParams({
page: this.pageIndex,
limit: this.pageSize,
username: this.dataForm.username,
operation: this.dataForm.operation,
startTime: this.dataForm.startTime,
endTime: this.dataForm.endTime,
sort: this.sort,
order: this.order,
stationId: localStorage.getItem('stationId')
})
}).then(data => {
//console.log('data', data)
if (data && data.code === 0) {
this.dataList = data.page.records
// console.log(this.dataList)
this.totalPage = data.page.total
} else {
this.dataList = []
this.totalPage = 0
}
this.dataListLoading = false
})
},
//排序
sortChange (column) {
if (column.order === 'descending') {
this.order = 'desc'
} else {
this.order = 'asc'
}
if (column.column.columnKey) {
this.sort = column.column.columnKey
} else {
this.sort = column.prop
}
this.getDataList()
},
// 每页数
sizeChangeHandle (val) {
this.pageSize = val
this.pageIndex = 1
this.getDataList()
},
// 当前页
currentChangeHandle (val) {
this.pageIndex = val
this.getDataList()
}
}
}
</script>
......@@ -2,11 +2,16 @@
el-container(style="padding:0px;height:77.6vh;")
el-header(style='height:42px;line-height:42px;border: 1px solid rgba(195, 195, 195, 1);background: #f4f4f4;')
span.title-bold.title-left-color() 系统日志
el-popover( placement="bottom" width="150" )
el-button(slot="reference" size='mini' type="primary" icon="el-icon-s-tools" style='float:right;transform:translateY(6px);') 筛选
el-checkbox-group( v-model="checkList")
el-col( :span="24" )
el-checkbox( v-for="item in checkGroup" :label="item.label" :key="item.id" @change='changeCheck(item.id)') {{item.label}}
<el-popover placement="bottom" width="150" >
<el-button slot="reference" size='mini' type="primary" icon="el-icon-s-tools" style='float:right;transform:translateY(6px)'> 筛选</el-button>
<el-checkbox-group v-model="checkList">
<el-col :span="24">
<el-checkbox v-for="(item,index) in tableHeader" :label="item" :key="index" >
span {{item.label}}
</el-checkbox>
</el-col>
</el-checkbox-group>
</el-popover>
el-main.box_main
el-card()
div.tableCard()
......@@ -22,25 +27,32 @@
el-date-picker( type="datetime" value-format="yyyy-MM-dd HH:mm:ss" style="width:175px;" v-model="dataForm.endTime" placeholder="选择结束时间" clearable)
el-button( type="primary" size='mini' icon="el-icon-search" @click="getDataList()") 查询
el-button(@click="reSet()" size='mini' type="primary" icon="el-icon-refresh-right") 重置
el-table(:data="dataList" class='myTable' row-key="id" ref='tables' @sort-change='sortChange' style="width: 100%;" v-loading="dataListLoading" :stripe="true" :header-cell-style="{background:'#EEF8FF',color:'#333333'}")
el-table-column(v-if='checkList.includes("序号")' class='tablesItem' type="index" header-align="center" align="center" label="序号" width="100")
template(scope="scope")
//- <drag-table :data="dataList" :header="checkList" :option="tableOption" @getDataList="getDataList" v-loading="dataListLoading" :operationNum="3" :isShowOperate="true">
<drag-table :data="dataList" :header="checkList" :option="tableOption" @getDataList="getDataList" v-loading="dataListLoading" >
//- -- 插槽
<el-table-column slot="fixed" fixed prop="" label="序号" width="80" header-align="center" align="center" >
<template slot-scope="scope">
span {{scope.$index+(pageIndex - 1) * pageSize + 1}}
el-table-column(v-if='checkList.includes("操作员")' class='tablesItem' prop="username" header-align="center" align="center" label="操作员" sortable='custom')
el-table-column(v-if='checkList.includes("操作时间")' prop="createDate" columnKey='create_date' header-align="center" align="center" label="操作时间" sortable='custom')
el-table-column(v-if='checkList.includes("主机ip")' prop="ip" header-align="center" align="center" label="主机ip" sortable='custom')
el-table-column(v-if='checkList.includes("模块名称")' prop="blockName" columnKey='block_name' header-align="center" align="center" label="模块名称" sortable='custom')
el-table-column(v-if='checkList.includes("操作类型")' prop="operation" header-align="center" align="center" label="操作类型" sortable='custom')
el-table-column(v-if='checkList.includes("描述")' prop="detail" header-align="center" align="center" label="描述" width='360' sortable='custom')
div(slot-scope='scope')
span(:title='scope.row.detail') {{scope.row.detail |ellipsis}}
</template>
</el-table-column>
//- 操作项
<template slot-scope="scope">
<el-button class="el-table-btn" type="text">编辑</el-button>
<el-button class="el-table-btn" type="text">查看</el-button>
<el-button class="el-table-btn" type="text">相关用户</el-button>
</template>
</drag-table>
el-footer.box_footer
el-pagination(@size-change="sizeChangeHandle" background @current-change="currentChangeHandle" :current-page="pageIndex" :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" :total="totalPage" layout="total, sizes, prev, pager, next, jumper")
</template>
<script>
import Sortable from "sortablejs";
import Sortable from 'sortablejs'
import dragTable from '../../components/tab'
let that
export default {
filters: {
ellipsis (value) {
......@@ -53,63 +65,58 @@ export default {
},
data () {
return {
isShow:true,
checkList:["序号", "操作员", "操作时间", "主机ip", "模块名称", "操作类型"],
checkGroup:[],
checkList: [], //筛选数据
tableHeader: [
{ label: '操作员', prop: 'username' }, //是否插槽
{ label: '操作时间', prop: 'createDate' },
{ label: '主机ip', prop: 'ip' },
{ label: '模块名称', prop: 'blockName' },
{ label: '操作类型', prop: 'operation' },
{ label: '描述', prop: 'detail' }
// {label:'操作',prop:''},
],
tableOption: {
border: false, //是否边框
maxHeight: 500 //高度
},
dataForm: {
username: '',
operation: '',
startTime: '',
endTime: ''
},
operationList: ['登录', '注销', '新增', '修改', '删除'],
operationList: ['登录', '注销', '新增', '修改', '删除', '查看', '上传'],
dataList: [],
pageIndex: 1,
pageSize: 10,
totalPage: 0,
dataListLoading: false
}
},
components: {
dragTable
},
watch: {
totalPage() { //注意这个函数的名字必须和你监听data中的属性的名字一样,这样才能当你data中的属性发生变化时,触发这个函数
let pages = Math.ceil(this.totalPage / this.pageSize)//新数据总页数
//总页数小于当前页数则重新加载列表数据
if (pages < this.pageIndex) {
this.pageIndex = pages || 1
this.getDataList()//获取表格数据的方法
}
}
},
created () {
that = this
this.pageIndex = 1
this.getDataList()
},
mounted() {
this.getTableList()
this.columnDrop();
mounted(){
this.checkList = [...this.tableHeader]
},
methods: {
getTableList(){
this.checkGroup=this.$refs.tables.$children.map(obj=>{
if(obj.label){
return {label:obj.label,id:obj._uid}
}
})
this.checkGroup=this.checkGroup.filter(e=>e!==undefined)
// console.log(this.checkGroup);
this.checkList=this.checkGroup.map(e=>e.label)
},
changeCheck(id){
// console.log(this.checkList)
// console.log(id);
},
// 列拖拽
columnDrop() {
const wrapperTr = document.querySelector(".myTable .el-table__header-wrapper tr");
this.sortable = Sortable.create(wrapperTr, {
animation: 180,
delay: 0,
onEnd: (evt) => {
console.log(evt)
const oldItem = this.$refs.tables.$children[evt.oldIndex];
// console.log(oldItem,1111111)
this.$nextTick(()=>{
this.$refs.tables.$children.splice(evt.oldIndex, 1);
this.$refs.tables.$children.splice(evt.newIndex, 0, oldItem);
})
},
});
toLine(name) {
return name.replace(/([A-Z])/g, '_$1').toLowerCase()
},
//重置
reSet() {
......@@ -118,7 +125,8 @@ export default {
this.getDataList()
},
// 获取数据列表
getDataList () {
getDataList (sort, order) {
// console.log(sort,'---',order)
this.dataListLoading = true
this.$http({
url: this.$http.adornUrl('/sys/log/list'),
......@@ -130,15 +138,15 @@ export default {
operation: this.dataForm.operation,
startTime: this.dataForm.startTime,
endTime: this.dataForm.endTime,
sort: this.sort,
order: this.order,
sort: sort,
order: order,
stationId: localStorage.getItem('stationId')
})
}).then(data => {
//console.log('data', data)
if (data && data.code === 0) {
this.dataList = data.page.records
console.log(this.dataList)
// console.log(this.dataList)
this.totalPage = data.page.total
} else {
this.dataList = []
......
<template lang='pug'>
el-container(style="padding:0px;height:77.6vh;")
el-header(style='height:42px;line-height:42px;border: 1px solid rgba(195, 195, 195, 1);background: #f4f4f4;')
span.title-bold.title-left-color() 系统日志
<el-popover placement="bottom" width="150" >
<el-button slot="reference" size='mini' type="primary" icon="el-icon-s-tools" style='float:right;transform:translateY(6px)'> 筛选</el-button>
<el-checkbox-group v-model="checkList">
<el-col :span="24">
<el-checkbox v-for="(item,index) in tableHeader" :label="item" :key="index" >
span {{item.label}}
</el-checkbox>
</el-col>
</el-checkbox-group>
</el-popover>
el-main.box_main
el-card()
card-warp(title="系统日志 ", height="45px")
div(slot='content')
div.tableCard()
el-form( :inline="true" :model="dataForm" size="mini" @keyup.enter.native="getDataList()" )
el-form-item( label="操作员:")
......@@ -27,31 +15,14 @@
el-date-picker( type="datetime" value-format="yyyy-MM-dd HH:mm:ss" style="width:175px;" v-model="dataForm.endTime" placeholder="选择结束时间" clearable)
el-button( type="primary" size='mini' icon="el-icon-search" @click="getDataList()") 查询
el-button(@click="reSet()" size='mini' type="primary" icon="el-icon-refresh-right") 重置
//- <drag-table :data="dataList" :header="checkList" :option="tableOption" @getDataList="getDataList" v-loading="dataListLoading" :operationNum="3" :isShowOperate="true">
<drag-table :data="dataList" :header="checkList" :option="tableOption" @getDataList="getDataList" v-loading="dataListLoading" >
//- -- 插槽
<el-table-column slot="fixed" fixed prop="" label="序号" width="80" header-align="center" align="center" >
<template slot-scope="scope">
span {{scope.$index+(pageIndex - 1) * pageSize + 1}}
</template>
</el-table-column>
//- 操作项
<template slot-scope="scope">
<el-button class="el-table-btn" type="text">编辑</el-button>
<el-button class="el-table-btn" type="text">查看</el-button>
<el-button class="el-table-btn" type="text">相关用户</el-button>
</template>
</drag-table>
table-list(:tableColums='tableHeader' :tableData='dataList' :showOpr='false' :opNum='2')
el-footer.box_footer
el-pagination(@size-change="sizeChangeHandle" background @current-change="currentChangeHandle" :current-page="pageIndex" :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" :total="totalPage" layout="total, sizes, prev, pager, next, jumper")
</template>
<script>
import Sortable from 'sortablejs'
import dragTable from '../../components/tab'
import tableList from '@/pages/components/tableList'
let that
export default {
filters: {
......@@ -94,7 +65,7 @@ export default {
}
},
components: {
dragTable
tableList
},
watch: {
totalPage() { //注意这个函数的名字必须和你监听data中的属性的名字一样,这样才能当你data中的属性发生变化时,触发这个函数
......@@ -111,7 +82,7 @@ export default {
this.pageIndex = 1
this.getDataList()
},
mounted(){
mounted() {
this.checkList = [...this.tableHeader]
},
methods: {
......
<template lang="pug">
el-container(style="padding:0px;height:77.6vh;")
card-warp(title="用户管理", height="45px")
div(slot="content", style="height: 90%")
el-form(:inline="true" :model="dataForm" size="mini" )
......@@ -32,27 +33,6 @@
el-button(type="text" size="mini" @click="queryHandle(data.scope.user_id)") 详情
el-button(type="text" size="mini" v-if="isAuth('sys:user:role')" @click="configHandle(data.scope)" ) 配置角色
el-button(type="text" size="mini" v-if="isAuth('sys:user:update')" @click="resetPassword(data.scope)") 密码重置
//- drag-table( :data="dataList" :header="checkList" :isToLine='false' :option="tableOption" @getDataList="getDataList" v-loading="dataListLoading" :operationNum="4" :isShowOperate="true")
//- -- 插槽
el-table-column(slot="fixed" fixed prop="" label="序号" width="80" header-align="center" align="center")
template( slot-scope="scope")
span {{scope.$index+(pageIndex - 1) * pageSize + 1}}
template( slot='gender' slot-scope="scope")
font(v-if='scope.row.gender===0') 女
font(v-if='scope.row.gender===1') 男
template(slot='status' slot-scope='scope')
font(v-if='scope.row.status===1') 正常
font(v-if='scope.row.status===0') 禁用
//- 操作项
template( slot-scope="scope" )
el-button(type="text" size="mini" v-if="isAuth('sys:user:update')" @click="addOrUpdateHandle(scope.row.user_id)") 编辑
el-button(type="text" size="mini" v-if="isAuth('sys:user:delete')" @click="deleteHandle(scope.row.user_id)" :disabled="del_disable(scope.row.user_id)") 删除
el-button(type="text" size="mini" @click="queryHandle(scope.row.user_id)") 详情
el-button(type="text" size="mini" v-if="isAuth('sys:user:role')" @click="configHandle(scope.row)" ) 配置角色
el-button(type="text" size="mini" v-if="isAuth('sys:user:update')" @click="resetPassword(scope.row)") 密码重置
el-footer.box_footer
el-pagination(@size-change="sizeChangeHandle" background @current-change="currentChangeHandle" :current-page="pageIndex" :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" :total="totalPage" layout="total, sizes, prev, pager, next, jumper")
//- 弹窗, 新增 / 修改
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment