Files
mt-yd-ui/src/views/modules/monitoring/equipmentQuantity.vue
2022-08-11 14:22:23 +08:00

188 lines
7.3 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="参数名" clearable></el-input>
</el-form-item>
<el-form-item>
<el-button @click="getDataList()">查询</el-button>
<el-button v-if="$hasPermission('monitoring:equipmenquantity:save')" type="primary" @click="addOrUpdateHandle()">新增</el-button>
</el-form-item>
</el-form>
<!-- <el-table :data="dataList" border v-loading="dataListLoading" @selection-change="selectionChangeHandle" style="width: 100%;">
<el-table-column type="selection" header-align="center" align="center" width="50"> </el-table-column>
<el-table-column prop="id" header-align="center" align="center" label="id"> </el-table-column>
<el-table-column prop="externalCode" header-align="center" align="center" label="设备外部编码"> </el-table-column>
<el-table-column prop="equipmentName" header-align="center" align="center" label="设备名称"> </el-table-column>
<el-table-column prop="inQuantity" header-align="center" align="center" label="进入设备的数量"> </el-table-column>
<el-table-column prop="outQuantity" header-align="center" align="center" label="离开设备的数量若plc只记录一个生产数量也写入该字段"> </el-table-column>
<el-table-column prop="okQuantity" header-align="center" align="center" label=""> </el-table-column>
<el-table-column prop="nokQuantity" header-align="center" align="center" label="设备上报的报废数量"> </el-table-column>
<el-table-column prop="description" header-align="center" align="center" label=""> </el-table-column>
<el-table-column prop="remark" header-align="center" align="center" label="备注"> </el-table-column>
<el-table-column prop="valid" header-align="center" align="center" label="删除标志,是否有效:1 可用 0不可用"> </el-table-column>
<el-table-column prop="creatorId" header-align="center" align="center" label="创建人"> </el-table-column>
<el-table-column prop="creatorName" header-align="center" align="center" label="创建人姓名"> </el-table-column>
<el-table-column prop="createTime" header-align="center" align="center" label="创建时间"> </el-table-column>
<el-table-column prop="updaterId" header-align="center" align="center" label="更新人"> </el-table-column>
<el-table-column prop="updaterName" header-align="center" align="center" label="更新人姓名"> </el-table-column>
<el-table-column prop="updateTime" header-align="center" align="center" label="更新时间"> </el-table-column>
<el-table-column prop="version" header-align="center" align="center" label="版本号"> </el-table-column>
<el-table-column prop="recordTime" header-align="center" align="center" label="生产数量的记录时间"> </el-table-column>
<el-table-column fixed="right" header-align="center" align="center" width="150" label="操作">
<template slot-scope="scope">
<el-button type="text" size="small" @click="addOrUpdateHandle(scope.row.id)">修改</el-button>
<el-button type="text" size="small" @click="deleteHandle(scope.row.id)">删除</el-button>
</template>
</el-table-column>
</el-table> -->
<base-table :data="dataList" :table-head-configs="tableConfigs" :max-height="500" />
<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 './equipmentQuantity-add-or-update'
import BaseTable from '@/components/base-table'
import TableOperateComponent from '@/components/base-table/components/operationComponent'
import TableTextComponent from '@/components/base-table/components/detailComponent'
const tableConfigs = [
{ "prop": "id", "name": "id" },
{ "prop": "externalCode", "name": "设备外部编码" },
{ "prop": "equipmentName", "name": "设备名称" },
{ "prop": "inQuantity", "name": "进入设备的数量" },
{
"prop": "outQuantity",
"name": "离开设备的数量若plc只记录一个生产数量也写入该字段"
},
{ "prop": "okQuantity", "name": "" },
{ "prop": "nokQuantity", "name": "设备上报的报废数量" },
{ "prop": "description", "name": "" },
{ "prop": "remark", "name": "备注" },
{ "prop": "valid", "name": "删除标志,是否有效:1 可用 0不可用" },
{ "prop": "creatorId", "name": "创建人" },
{ "prop": "creatorName", "name": "创建人姓名" },
{ "prop": "createTime", "name": "添加时间" },
{ "prop": "updaterId", "name": "更新人" },
{ "prop": "updaterName", "name": "更新人姓名" },
{ "prop": "updateTime", "name": "更新时间" },
{ "prop": "version", "name": "版本号" },
{ "prop": "recordTime", "name": "生产数量的记录时间" }, { prop: 'operations', name: '操作', fixed: 'right', width: 180, subcomponent: TableOperateComponent, options: ['edit', 'delete'] }
]
export default {
data() {
return {tableConfigs,
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/equipmentQuantity/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 ? '删除' : '批量删除'}]操作?`, '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.$http({
url: this.$http.adornUrl('/monitoring/equipmentQuantity'),
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>