industry-data-platform/industry-admin/src/views/source/itemGroup/itemConfigModel.vue

<template>
    <div>
        <!-- 数据项表达式配置 -->
        <el-dialog :title="title" width="80%" top="5vh" center :before-close="dialogClose" :visible.sync="visible"
            @open="handleOpen" @close="handleClose">
            <el-form label-width="100px">
                <el-row>
                    <el-col :span="6">
                        <el-form-item label="数据源：" style="margin-bottom: 5px; width: 100%">
                            <el-select v-model="dataSourceId" disabled>
                                <el-option v-for="dict in dataSourceList" :key="dict.id" :label="dict.dataSourceName"
                                    :value="dict.id"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="点位：" style="margin-bottom: 5px; width: 100%">
                            <el-input placeholder="请输入点位进行过滤" style="" @input="chooseItemChangeEvent"
                                v-model="filterChooseItemText"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <el-button type="primary" size="small" @click="multipleModel"
                style="position: absolute; right: 30px; top: 80px">批量设置表达式</el-button>
            <CommonTable ref="itemConfigTable" :tableHeaderTitle="tableHeaderTitle" :tableData="tableData"
                :isShowCheckbox="isShowCheckbox" :isShowIndex="isShowIndex" :tableHight="tableHight"
                :tableOperate="tableOperate" @receiveCheckedData="receiveCheckedData" @chooseModel="chooseModel">
            </CommonTable>
            <span slot="footer">
                <el-button type="primary" @click="saveItemChoose" size="small">确定</el-button>
                <el-button @click="dialogClose" size="small">取消</el-button>
            </span>
        </el-dialog>

        <!-- 选择表达式 -->
        <ChooseModel ref="chooseModel" @saveDataModelEvent="saveDataModelEvent"></ChooseModel>
    </div>
</template>

<script>
import CommonTable from '@/components/CommonTable/index.vue'
import ChooseModel from './chooseModel.vue'

export default {
    components: {
        CommonTable,
        ChooseModel
    },
    data() {
        return {
            visible: false,
            title: '点位表达式设置',
            dataSourceId: null,
            filterChooseItemText: null,
            dataSourceList: [],
            dataModelList: [],
            leavesChooseList: [],
            checkItemList: [],
            // 是否展示复选框列
            isShowCheckbox: true,
            // 是否展示序号索引列
            isShowIndex: true,
            tableHight: '68vh',
            tableHeaderTitle: [
                {
                    propName: "itemName",
                    labelName: "点位名称",
                },
                {
                    propName: "remark",
                    labelName: "四则运算表达式",
                }
            ],
            tableDataF: [],
            tableData: [],
            tableOperate: [
                {
                    btnName: '选择表达式',
                    size: "mini",
                    style: '',
                    icon: 'el-icon-edit',
                    methodName: "chooseModel",
                }
            ],
            queryParams: {
                page: 1,
                limit: 10
            },
            tableTotal: 0
        }
    },
    methods: {
        /** 弹窗打开事件 */
        handleOpen() {
            this.tableDataF = this.tableData
        },
        /** 弹窗关闭事件 */
        handleClose() {
            this.dataSourceId = null
            this.filterChooseItemText = null
            this.tableData = []
        },
        /** 关闭弹出层 */
        dialogClose() {
            this.visible = false
        },
        // 接收子组件勾选的行的数据
        receiveCheckedData(checked) {
            this.checkItemList = checked
        },
        /** 确定数据项的设置 */
        saveItemChoose() {
            this.$emit('saveItemChoose', this.tableDataF)
            this.dialogClose()
            this.$emit('dialogClose')
        },
        /** 选择数据项表达式 */
        chooseModel(row) {
            this.$refs.chooseModel.title = '选择表达式'
            this.$refs.chooseModel.visible = true
            this.$refs.chooseModel.dataModelList = this.dataModelList
            this.$refs.chooseModel.chooseDataModelId = row.dataModelId
            let arr = [];
            arr.push(row.itemName)
            this.$refs.chooseModel.itemNameList = arr
        },
        /** 批量设置表达式 */
        multipleModel() {
            if (this.checkItemList.length == 0) {
                this.$message({
                    message: '请至少选择一个点位！',
                    type: 'warning'
                })
                return;
            }
            this.$refs.chooseModel.title = '选择表达式'
            this.$refs.chooseModel.visible = true
            this.$refs.chooseModel.dataModelList = this.dataModelList
            let arr = [];
            for (let i = 0; i < this.checkItemList.length; i++) {
                arr.push(this.checkItemList[i].itemName)
            }
            this.$refs.chooseModel.itemNameList = arr
        },
        /** 过滤数据项事件 */
        chooseItemChangeEvent(val) {
            let arr = JSON.parse(JSON.stringify(this.tableDataF));
            if (!val || !val.trim()) {
                this.tableData = arr;
                return;
            }
            this.tableData = arr.filter((v) => v.itemName.indexOf(val) !== -1)
        },
        /** 保存数据模型事件 */
        saveDataModelEvent(itemNameList, dataModelId) {
            let remark = '';
            for (let i = 0; i < this.dataModelList.length; i++) {
                if (this.dataModelList[i].id == dataModelId) {
                    remark = this.dataModelList[i].remark
                    break
                }
            }

            let arr = []
            for (let i = 0; i < this.tableDataF.length; i++) {
                let temp = this.tableDataF[i]
                for (let j = 0; j < itemNameList.length; j++) {
                    if (itemNameList[j] == temp.itemName) {
                        temp.dataModelId = dataModelId
                        temp.remark = remark
                        break
                    }
                }
                arr.push(temp)
            }
            this.tableDataF = arr
            this.chooseItemChangeEvent(this.filterChooseItemText)
        }
    }
}
</script>