industry-data-platform/industry-admin/src/views/largeScreen/deviceRunParam/deviceRun.vue

<template>
    <div>
        <!-- 主要运行参数配置全部信息 -->
        <el-dialog :title="title" width="70%" top="10vh"  :before-close="dialogClose" :visible.sync="visible"
            @open="handleOpen" @close="handleClose">
            <el-form ref="deviceRunForm" :model="deviceRunForm" :rules="deviceRunRules" label-width="80px"
                label-position="right">
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="名称" prop="dataGroupName">
                            <el-input v-model="deviceRunForm.dataGroupName" placeholder="名称" maxlength="10" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="备注" prop="remark">
                            <el-input v-model="deviceRunForm.remark" placeholder="请输入备注"
                                maxlength="100"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="排序号" prop="sortNum">
                            <el-input v-model="deviceRunForm.sortNum" placeholder="排序号" maxlength="10" />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="点位">
                            <el-button size="mini" type="primary" @click="addItemEvent">新增</el-button>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <!-- 表格数据信息 -->
                    <el-table ref="table" :data="deviceRunForm.deviceRunItemList" height="30vh" row-key="id" border>
                        <el-table-column align="left" label="点位" prop="itemReadName" />
                        <el-table-column align="left" label="别名" prop="describe" />
                        <el-table-column align="left" label="数据组" prop="itemGroupName" />
                        <el-table-column align="left" label="单位" prop="unit" />
                        <el-table-column align="left" label="序号" prop="sortNum" width="80">
                            <template slot-scope="scope">
                                <el-input v-model="scope.row.sortNum"></el-input>
                            </template>
                        </el-table-column>
                        <el-table-column align="left" label="展示" prop="isShow" width="120">
                            <template slot-scope="scope">
                                <el-checkbox v-model="scope.row.isShow" :true-label="1" :false-label="0">是</el-checkbox>
                            </template>
                        </el-table-column>
                      <el-table-column align="left" label="创建人" prop="createUserName" width="120"/>
                        <el-table-column label="操作" align="left" width="200">
                            <template slot-scope="scope">
                                <el-button size="mini" v-if="showDelete(scope.row.createUserId)" type="text" icon="el-icon-delete" style="color: red;"
                                    @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-row>
            </el-form>
          <div slot="footer" style="text-align: right">
                <el-button size="mini" type="primary" @click="saveDevieRunEvent">确定</el-button>
                    <el-button size="mini" @click="dialogClose">取消</el-button>
            </div>
        </el-dialog>

        <!-- 选择设备点位 -->
        <ChooseItem ref="chooseItem" @acceptChooseItem="acceptChooseItem"></ChooseItem>
    </div>
</template>

<script>

import {
    addDeviceRun, updateDeviceRun,
    getDeviceRunById, getAssignedItemList
} from '@/api/largeScreen/deviceRun'
import ChooseItem from '@/views/device/deviceLedger/chooseItem.vue'
import {getUid, getUsername} from "@/utils/auth";
export default {
    components: {
        ChooseItem
    },
    data() {
        return {
            visible: false,
            title: '新增设备运行参数配置',
            deviceRunForm: {
                id: null,
                dataGroupName: null,
                sortNum: null,
                remark: null,
                deviceRunItemList: []
            },
            deviceRunRules: {
                dataGroupName: [
                    { required: true, message: '数据组名称不能为空', trigger: 'blur' },
                ],
                sortNum: [
                    { required: true, message: '排序号不能为空', trigger: 'blur' },
                    {
                        validator: (rule, value, callback) => {
                            if (!(/^[1-9]\d*$/).test(value)) {
                                callback(new Error('排序号必须输入正整数'))
                            }
                            callback()
                        }
                    }
                ],
            }
        }
    },
    methods: {
        /** 关闭弹出层 */
        dialogClose() {
            this.visible = false
        },
        /** 弹窗打开事件 */
        handleOpen() {
            if (this.deviceRunForm.id) {
                this.getDeviceRunById(this.deviceRunForm.id)
            }
            this.doLayout()
        },
        /** 弹窗关闭事件 */
        handleClose() {
            this.deviceRunForm.id = null
            this.deviceRunForm.deviceRunItemList = []
            this.resetForm('deviceRunForm')
            this.$emit('getDeviceRunPage')
        },
        /** 重置表单 */
        resetForm(formName) {
            this.$refs[formName].resetFields();
        },
        /** 添加点位事件 */
        addItemEvent() {
            this.getAssignedItemList((data) => {
                if (data.data) {
                    this.$refs.chooseItem.assignedItemIdList = data.data
                }
            })
            this.$refs.chooseItem.title = '添加点位'
            this.$refs.chooseItem.visible = true
        },
        /** 获取所有已经分配的点位id */
        getAssignedItemList(callback) {
            getAssignedItemList().then(res => {
                callback(res)
            })
        },
        /** 保存主要运行参数配置 */
        saveDevieRunEvent() {
            this.$refs['deviceRunForm'].validate((valid) => {
                if (valid) {
                    if (this.deviceRunForm.deviceRunItemList.length == 0) {
                        this.$message({
                            message: '点位不能为空',
                            type: 'warning'
                        })
                        return
                    }
                    let showCount = 0
                    for (let a of this.deviceRunForm.deviceRunItemList) {
                        if (a.isShow) {
                            showCount++
                        }
                    }
                    if (showCount != 3) {
                        this.$message({
                            message: '点位展示的个数为3个',
                            type: 'warning'
                        })
                        return
                    }
                    if (!this.deviceRunForm.id) {
                        this.addDeviceRun()
                    } else {
                        this.updateDeviceRun()
                    }
                }
            })
        },
        /** 通过id获取，设备运行参数配置 */
        getDeviceRunById(id) {
            getDeviceRunById(id).then(res => {
                if (!res || !res.data) {
                    this.$message({
                        message: '数据查询失败！',
                        type: 'warning'
                    })
                    return
                }
                let arr = res.data.deviceRunItemList
                let count = 0
                for (let a of arr) {
                    if (!a.itemReadName) {
                        count++
                    }
                }
                if (count != 0) {
                    this.$message({
                        message: '存在点位在数据组中被删除，请同步删除没有点位名称的点位',
                        type: 'warning'
                    })
                }
                this.deviceRunForm = res.data
            })
        },
        /** 新增设备运行参数配置 */
        addDeviceRun() {
            addDeviceRun(this.deviceRunForm).then(res => {
                if (!res || !res.data) {
                    this.$message({
                        message: '新增设备运行参数配置组失败！',
                        type: 'warning'
                    })
                    return
                }
                this.$message({
                    message: res.data,
                    type: 'success'
                })
                this.dialogClose()
            })
        },
        /** 修改设备运行参数配置 */
        updateDeviceRun() {
            let params = JSON.parse(JSON.stringify(this.deviceRunForm));
            updateDeviceRun(params).then(res => {
                if (!res || !res.data) {
                    this.$message({
                        message: '修改设备运行参数配置组失败！',
                        type: 'warning'
                    })
                    return
                }
                this.$message({
                    message: res.data,
                    type: 'success'
                })
                this.dialogClose()
            })
        },
        /** 重新加载表格，防止样式错乱 */
        doLayout() {
            this.$nextTick(() => {
                this.$refs.table.doLayout()
            })
        },
        /** 接受添加点位过来的数据 */
        acceptChooseItem(itemList) {
            let arr = []
            for (let a of itemList) {
                const b = {}
                Object.keys(a).forEach(key => {
                    b[key] = a[key]
                })
                arr.push(b)
            }
            //去重，且去重的时候，保留界面的数据，将新数据push进去
            let arrF = JSON.parse(JSON.stringify(this.deviceRunForm.deviceRunItemList));
            for (let a of arr) {
                let flag = false
                for (let b of arrF) {
                    if (a.itemId == b.itemId) {
                        flag = true;
                        break;
                    }
                }
                if (!flag) {
                  a["createUserId"] = getUid()
                  a["createUserName"] = getUsername()
                    this.deviceRunForm.deviceRunItemList.push(a)
                }
            }
        },
        /** 删除点位 */
        handleDelete(index, row) {
            this.deviceRunForm.deviceRunItemList.splice(index, 1)
        },
      showDelete(userId){
        return !userId || getUid() == userId
      }
    }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.dialog-med {
    height: 62vh;

    .el-dialog__body {
        height: 55vh;
        overflow: hidden;
    }
}
</style>