mt-yd-ui/src/views/modules/monitoring/equipmentFile.vue
2022-09-01 15:45:13 +08:00

162 lines
4.6 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<div class="mod-config">
<el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
<el-form-item>
<el-input v-model="dataForm.key" placeholder="$t('parameter')" clearable></el-input>
</el-form-item>
<el-form-item>
<el-button @click="getDataList()">{{ $t('query') }}</el-button>
<el-button v-if="$hasPermission('monitoring:equipmenfile:save')" type="primary" @click="addOrUpdateHandle()">新增</el-button>
</el-form-item>
</el-form>
<base-table :data="dataList" :table-head-configs="tableConfigs" :max-height="calcMaxHeight(8)" />
<el-pagination
@size-change="sizeChangeHandle"
@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-pagination>
<!-- 弹窗, 新增 / 修改 -->
<add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
</div>
</template>
<script>
import AddOrUpdate from './equipmentFile-add-or-update'
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'
import { calcMaxHeight } from '@/utils'
import { timeFilter } from '@/utils/filters'
const tableConfigs = [
{ prop: 'id', name: '' },
{ prop: 'equipmentId', name: '设备ID' },
{ prop: 'fileId', name: '文件ID' },
{ prop: 'description', name: i18n.t('desc') },
{ prop: 'enabled', name: '启用状态:0 、停用1、启用' },
{ prop: 'remark', name: i18n.t('remark') },
{ prop: 'valid', name: '删除标志,是否有效:1 可用 0不可用' },
{ prop: 'creatorId', name: '创建人' },
{ prop: 'creatorName', name: '创建人姓名' },
{ prop: 'createTime', name: i18n.t('createTime'), filter: timeFilter },
{ prop: 'updaterId', name: '更新人' },
{ prop: 'updaterName', name: '更新人姓名' },
{ prop: 'updateTime', name: '更新时间', filter: timeFilter },
{ prop: 'version', name: '版本号' },
{ prop: 'typeCode', name: '文件类型编号' },
{ prop: 'fileName', name: '文件名字' },
{ prop: 'fileUrl', name: i18n.t('downloadurl') },
{ prop: 'operations', name: i18n.t('handle'), fixed: 'right', width: 180, subcomponent: TableOperateComponent, options: ['edit', 'delete'] }
]
export default {
data() {
return {
tableConfigs,
calcMaxHeight,
dataForm: {
key: ''
},
dataList: [],
pageIndex: 1,
pageSize: 10,
totalPage: 0,
dataListLoading: false,
dataListSelections: [],
addOrUpdateVisible: false
}
},
components: {
AddOrUpdate,
BaseTable
},
activated() {
this.getDataList()
},
methods: {
// 获取数据列表
getDataList() {
this.dataListLoading = true
this.$http({
url: this.$http.adornUrl('/monitoring/equipmentFile/page'),
method: 'get',
params: this.$http.adornParams({
page: this.pageIndex,
limit: this.pageSize,
key: this.dataForm.key
})
}).then(({ data }) => {
if (data && data.code === 0) {
this.dataList = data.data.list
this.totalPage = data.data.total
} else {
this.dataList = []
this.totalPage = 0
}
this.dataListLoading = false
})
},
// 每页数
sizeChangeHandle(val) {
this.pageSize = val
this.pageIndex = 1
this.getDataList()
},
// 当前页
currentChangeHandle(val) {
this.pageIndex = val
this.getDataList()
},
// 多选
selectionChangeHandle(val) {
this.dataListSelections = val
},
// 新增 / 修改
addOrUpdateHandle(id) {
this.addOrUpdateVisible = true
this.$nextTick(() => {
this.$refs.addOrUpdate.init(id)
})
},
// 删除
deleteHandle(id) {
var ids = id
? [id]
: this.dataListSelections.map(item => {
return item.id
})
this.$confirm(`确定对[id=${ids.join(',')}]进行[${id ? i18n.t('delete') : i18n.t('deleteBatch')}]操作?`, '提示', {
confirmButtonText: i18n.t('confirm'),
cancelButtonText: i18n.t('cancel'),
type: 'warning'
}).then(() => {
this.$http({
url: this.$http.adornUrl('/monitoring/equipmentFile'),
method: 'delete',
data: this.$http.adornData(ids, false, 'raw')
}).then(({ data }) => {
if (data && data.code === 0) {
this.$message({
message: '操作成功',
type: 'success',
duration: 1500,
onClose: () => {
this.getDataList()
}
})
} else {
this.$message.error(data.msg)
}
})
})
}
}
}
</script>