|
|
@@ -0,0 +1,283 @@
|
|
|
+<template>
|
|
|
+ <div class="mod-role">
|
|
|
+ <div class="rect rect-form">
|
|
|
+ <el-form size="mini" :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
|
|
|
+ <el-form-item style="width: 200px">
|
|
|
+ <el-input v-model="dataForm.keyword" placeholder="设备编号" style="width: 200px" clearable></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item style="width: 140px">
|
|
|
+ <el-select placeholder="请选择猪舍" v-model="dataForm.pigstyId" style="width: 100%">
|
|
|
+ <el-option
|
|
|
+ v-for="item in pigstyList"
|
|
|
+ :key="item.value"
|
|
|
+ :label="item.label"
|
|
|
+ :value="item.value">
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item>
|
|
|
+ <el-button
|
|
|
+ icon="el-icon-search"
|
|
|
+ @click="getDataList()">
|
|
|
+ 查 询
|
|
|
+ </el-button>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ </div>
|
|
|
+ <div class="rect rect-table">
|
|
|
+ <el-form size="mini" :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
|
|
|
+ <el-form-item>
|
|
|
+ <el-button
|
|
|
+ icon="el-icon-plus"
|
|
|
+ v-if="isAuth('sys:role:save')"
|
|
|
+ type="primary"
|
|
|
+ @click="addOrUpdateHandle()">新 增</el-button>
|
|
|
+ <el-button
|
|
|
+ icon="el-icon-delete"
|
|
|
+ v-if="isAuth('sys:role:delete')"
|
|
|
+ type="danger"
|
|
|
+ @click="deleteHandle()"
|
|
|
+ :disabled="dataListSelections.length <= 0">删 除</el-button>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ <el-table
|
|
|
+ :data="dataList"
|
|
|
+ border
|
|
|
+ stripe
|
|
|
+ size="mini"
|
|
|
+ height="540"
|
|
|
+ v-loading="dataListLoading"
|
|
|
+ @selection-change="selectionChangeHandle"
|
|
|
+ style="width: 100%;"
|
|
|
+ :header-cell-style="{background:'rgb(245,245,245)',color:'#000',height: '45px',fontSize: '13px',fontWeight: 'normal',borderBottom: '1px solid #ccc'}"
|
|
|
+ :cell-style="{color: '#888',fontSize: '13px'}">
|
|
|
+ <el-table-column
|
|
|
+ type="selection"
|
|
|
+ header-align="center"
|
|
|
+ align="center">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="deviceId"
|
|
|
+ header-align="center"
|
|
|
+ align="center"
|
|
|
+ label="设备编号">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="pigstyName"
|
|
|
+ header-align="center"
|
|
|
+ align="center"
|
|
|
+ label="猪舍">
|
|
|
+ </el-table-column>
|
|
|
+ <!-- <el-table-column
|
|
|
+ prop="stage"
|
|
|
+ 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
|
|
|
+ header-align="center"
|
|
|
+ align="center"
|
|
|
+ label="操作">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-button type="text" size="small" @click="addOrUpdateHandle(scope.row.deviceId)">修改</el-button>
|
|
|
+ <el-button type="text" size="small" @click="deleteHandle(scope.row.deviceId)">删除</el-button>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ <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>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import AddOrUpdate from './huan-add-or-update'
|
|
|
+ export default {
|
|
|
+ data () {
|
|
|
+ return {
|
|
|
+ dataForm: {
|
|
|
+ pigstyId: '',
|
|
|
+ keyword: ''
|
|
|
+ },
|
|
|
+ dataList: [],
|
|
|
+ pageIndex: 1,
|
|
|
+ pageSize: 10,
|
|
|
+ totalPage: 0,
|
|
|
+ dataListLoading: false,
|
|
|
+ dataListSelections: [],
|
|
|
+ addOrUpdateVisible: false,
|
|
|
+ pigstyList: []
|
|
|
+ }
|
|
|
+ },
|
|
|
+ components: {
|
|
|
+ AddOrUpdate
|
|
|
+ },
|
|
|
+ activated () {
|
|
|
+ this.getDataList()
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ // 获取数据列表
|
|
|
+ getDataList () {
|
|
|
+ this.dataListLoading = true
|
|
|
+ this.$http({
|
|
|
+ url: this.$http.adornUrl('/management/device/list'),
|
|
|
+ method: 'get',
|
|
|
+ params: this.$http.adornParams({
|
|
|
+ 'page': this.pageIndex,
|
|
|
+ 'limit': this.pageSize,
|
|
|
+ 'pigstyId': this.dataForm.pigstyId || undefined,
|
|
|
+ 'keyword': this.dataForm.keyword || undefined
|
|
|
+ })
|
|
|
+ }).then(async ({data}) => {
|
|
|
+ this.pigstyList = []
|
|
|
+ let pigstyR = await this.$http({
|
|
|
+ url: this.$http.adornUrl("/management/pigsty/findAll"),
|
|
|
+ method: "get",
|
|
|
+ params: this.$http.adornParams({})
|
|
|
+ })
|
|
|
+ if (pigstyR.data && pigstyR.data.code === 0) {
|
|
|
+ console.log(pigstyR.data.all);
|
|
|
+ pigstyR.data.all.forEach(pigsty => {
|
|
|
+ let item = {
|
|
|
+ value: pigsty.id,
|
|
|
+ label: pigsty.number
|
|
|
+ }
|
|
|
+ this.pigstyList.push(item)
|
|
|
+ })
|
|
|
+ }
|
|
|
+ if (data && data.code === 0) {
|
|
|
+ this.dataList = data.page.list
|
|
|
+ this.totalPage = data.page.totalCount
|
|
|
+ } else {
|
|
|
+ this.dataList = []
|
|
|
+ this.totalPage = 0
|
|
|
+ this.$message.error(data.msg)
|
|
|
+ }
|
|
|
+ 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) {
|
|
|
+ console.log(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('/management/device/delete'),
|
|
|
+ method: 'post',
|
|
|
+ data: this.$http.adornData(ids, false)
|
|
|
+ }).then(({data}) => {
|
|
|
+ if (data && data.code === 0) {
|
|
|
+ this.getDataList()
|
|
|
+ this.$message({
|
|
|
+ message: '操作成功',
|
|
|
+ type: 'success',
|
|
|
+ duration: 1500,
|
|
|
+ // onClose: () => {
|
|
|
+ // this.getDataList()
|
|
|
+ // }
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ this.$message.error(data.msg)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }).catch(() => {})
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+<style scoped>
|
|
|
+.rect {
|
|
|
+ background-color: #fff;
|
|
|
+ padding: 30px 15px;
|
|
|
+ border-radius: 5px;
|
|
|
+ border: 1px solid #e8e8e8;
|
|
|
+}
|
|
|
+.rect-form {
|
|
|
+ padding-bottom: 10px;
|
|
|
+}
|
|
|
+.rect-table {
|
|
|
+ margin-top: 20px;
|
|
|
+}
|
|
|
+.demo-table-expand {
|
|
|
+ font-size: 0;
|
|
|
+ margin-left: 40px;
|
|
|
+}
|
|
|
+.demo-table-expand label {
|
|
|
+ width: 90px;
|
|
|
+ color: #99a9bf;
|
|
|
+}
|
|
|
+.demo-table-expand .el-form-item {
|
|
|
+ margin-right: 0;
|
|
|
+ margin-bottom: 0;
|
|
|
+ width: 80%;
|
|
|
+}
|
|
|
+.el-table .height {
|
|
|
+ background: rgba(254, 254, 254, 0.5);
|
|
|
+}
|
|
|
+/deep/ .el-table--mini td, .el-table--mini th {
|
|
|
+ padding: 3px 0 !important;
|
|
|
+ height: 20px !important;
|
|
|
+}
|
|
|
+/deep/ .el-checkbox__input.is-checked+.el-checkbox__label {
|
|
|
+ color: rgb(24,144,255);
|
|
|
+ background-color: rgb(24,144,255);
|
|
|
+ border-color: rgb(24,144,255);
|
|
|
+}
|
|
|
+/deep/.el-table .el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner {
|
|
|
+ background-color: rgb(24,144,255);
|
|
|
+ border-color: rgb(24,144,255);
|
|
|
+}
|
|
|
+/deep/.el-table .el-checkbox__inner:hover {
|
|
|
+ border-color: rgb(24,144,255);
|
|
|
+}
|
|
|
+/deep/.el-table .el-checkbox__input.is-focus .el-checkbox__inner {
|
|
|
+ border-color: rgb(24,144,255);
|
|
|
+}
|
|
|
+/deep/.el-table #select .cell .el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner {
|
|
|
+ background-color: rgb(24,144,255);
|
|
|
+ border-color: rgb(24,144,255);
|
|
|
+}
|
|
|
+</style>
|
East