1

lzhe

2024-10-07 9516d95bdcc481b71d4b090bbdcfff39a84b26d6

 src/views/console/workstation/CollDialog.vue

@@ -1,30 +1,47 @@
<template>
    <el-dialog title="数据点" v-model="visible" :width="'100%'" destroy-on-close @closed="$emit('closed')">
        <el-select v-model="type" placeholder="Select" size="small" style="width: 240px" @change="changeType">
            <el-option v-for="item in typeList" :key="item.id" :label="item.name" :value="item.id" />
        </el-select>
    <el-dialog title="数据点" v-model="visible" :width="'80%'" destroy-on-close @closed="$emit('closed')">
        <p style="margin-bottom: 14px;display: flex;align-items: center;">
            <span style="margin-right: 8px;">类型</span>
            <el-select v-model="type" placeholder="类型" size="small" style="width: 240px" @change="changeType">
                <el-option v-for="item in typeList" :key="item.id" :label="item.name" :value="item.id" />
            </el-select>
            <span style="margin-right: 8px;margin-left: auto;">IOT应用ID</span>
            <el-input v-model="appId" placeholder="IOT应用ID" style="width: 240px"></el-input>
        </p>

        <scFormTable v-show="type" ref="table1" v-model="tabledata" stripe hideDelete :hideAdd="!type"
            :addTemplate="addTemplate">
            <el-table-column v-for="item in cols" :key="item.prop" :prop="item.prop" :label="item.label">
                <template #header="scope">
                    <span v-show="item.isRequired" style="color: red;">*</span>
                    <span>{{ scope.column.label }}</span>
                    <el-tooltip class="box-item" effect="dark" placement="top-start">
                        <template #content>
                            <p v-html="item.describe"></p>
                        </template>
                        <el-icon v-show="item.describe"><el-icon-question-filled /></el-icon>
                    </el-tooltip>

                </template>
                <template #default="scope">
                    <el-select v-model="scope.row[item.prop]" placeholder="Select" size="small"
                    <el-select v-model="scope.row[item.prop]" placeholder="" size="small"
                        v-if="scope.row.status && item.type === 'option'">
                        <el-option v-for="item in item.options" :key="item" :label="item" :value="item" />
                    </el-select>
                    <el-switch size="small" v-model="scope.row[item.prop]"
                        v-else-if="scope.row.status && item.type === 'boolean'" />
                    <el-switch :disabled="!scope.row.status" size="small" v-model="scope.row[item.prop]"
                        v-else-if="item.type === 'boolean'" />
                    <el-input size="small" v-model="scope.row[item.prop]" placeholder=""
                        v-else-if="scope.row.status"></el-input>
                    <span v-else>{{ scope.row[item.prop] }}</span>
                </template>
            </el-table-column>

            <el-table-column label="操作" prop="state" width="120">
            <el-table-column label="操作" prop="state" width="200">
                <template #default="scope">
                    <el-button-group>
                        <el-button text type="primary" size="small">编辑</el-button>
                        <el-button text type="primary">复制</el-button>
                        <el-popconfirm width="220" title="确定将选择的数据删除" @confirm="del(scope.row)">
                        <el-button text type="primary" size="small" @click="table_edit(scope.row)">编辑</el-button>
                        <el-button text type="primary" size="small" @click="copy(scope.row)">复制</el-button>
                        <el-popconfirm width="220" title="确定将选择的数据删除" @confirm="del(scope.$index)">
                            <template #reference>
                                <el-button text type="primary" size="small">删除</el-button>
                            </template>
@@ -42,9 +59,8 @@
</template>

<script>
import deepmerge from 'deepmerge'
import http from "@/utils/request"
export default {
    name: 'CollDialog',
    emits: ['success', 'closed'],
    props: {
        option: {
@@ -66,8 +82,8 @@
                status: '2' // 不存在已保存 1: 正在编辑 2: 新增
            },
            type: '',
            typeList: []

            typeList: [],
            appId: ''
        }
    },
    created() {
@@ -75,13 +91,57 @@
    },
    methods: {
        changeType(val) {
            console.log(val)
            console.log(JSON.parse(this.typeList.find(v => v.id === val).dpHeadFull))
            try {
                this.cols = JSON.parse(this.typeList.find(v => v.id === val).dpHeadFull)
            } catch (error) {
            if (this.tabledata.length > 0) {
                this.$confirm(`切换类型将删除所有已配置数据点`, '提示', {
                    type: 'warning'
                }).then(() => {
                    try {
                        this.cols = JSON.parse(this.typeList.find(v => v.id === val).dpHeadFull)
                        if (this.cols.filter(v => v.prop === 'dplabel').length === 0) {
                            this.cols.unshift(
                                {
                                    label: "显示名称",
                                    prop: "dplabel",
                                    isRequired: true,
                                }
                            )
                        }
                        this.tabledata = []
                    } catch (error) {
                        this.cols = []
                    }
                }).catch(() => {

                })
            } else {
                try {
                    this.cols = JSON.parse(this.typeList.find(v => v.id === val).dpHeadFull)
                    if (this.cols.filter(v => v.prop === 'dplabel').length === 0) {
                        this.cols.unshift(
                            {
                                label: "显示名称",
                                prop: "dplabel",
                                isRequired: true,
                            }
                        )
                    }

                } catch (error) {
                    this.cols = []
                }
            }
            console.log('default')
            this.setAddTemp()

        },
        setAddTemp() {
            this.cols.forEach(v => {
                if (v.type === 'boolean') {
                    this.addTemplate[v.prop] = false
                }
                v.default && (this.addTemplate[v.prop] = v.default)

            })
        },
        //显示
        open(mode = 'add', params) {
@@ -95,34 +155,86 @@
            return this
        },
        getDetailList(params) {


            this.$HTTP.get(`/api/smart-collect/tpl/typelist`, {}, { params }).then(res => {

                this.typeList = res.data || [];
                // return res
            }).finally(() => {
                this.$HTTP.get(`/api/blade-cps/workstation/listDatapointsByWorkstationId`, {}, { params }).then(res => {
                    // res.data.records = res?.data?.records.map(v => {
                    //     return {
                    //         ...v,
                    //         statusName: v.status ? '启用' : '禁用'
                    //     }
                    // })
                    this.type = res.data.type
                    this.tabledata = res.data.dpConfig || [];
                    // return res
                })
                this.getList(params)
            })

        },
        getList(params) {
            this.$HTTP.get(`/api/blade-cps/workstation/listDatapointsByWorkstationId`, {}, { params }).then(res => {
                try {
                    this.cols = JSON.parse(res.data.dpHead)
                    if (this.cols.filter(v => v.prop === 'dplabel').length === 0) {
                        this.cols.unshift(
                            {
                                label: "显示名称",
                                prop: "dplabel",
                                isRequired: true,
                            }
                        )
                    }
                } catch (error) {
                    this.cols = []
                }
                try {
                    this.tabledata = JSON.parse(res.data.dpConfig).map(v => {
                        v.status = null
                        return v
                    }) || [];
                } catch (error) {
                    this.tabledata = []
                }
                this.type = res.data.type
                this.appId = res.data.appId
                this.setAddTemp()
                // return res
            })
        },
        table_edit(row) {
            row.status = '1'
        },
        del(index) {
            this.tabledata.splice(index, 1)
        },
        copy(row) {
            this.tabledata.push(Object.assign({}, row, { status: '1' }))
        },
        //表单提交方法
        submit() {
            console.log(this.tabledata)
            let isRequiredKey = this.cols.filter(v => v.isRequired).map(v => v.prop)
            let flag = this.tabledata.every(item => {
                return isRequiredKey.every(v => {
                    return item[v] !== undefined && item[v] !== null && item[v] !== ''
                })
            })
            if (!flag) {
                return this.$message.warning('请校验必填项')
            }
            let len = [...new Set(this.tabledata.map(v => v.dpName))].length
            if (len != this.tabledata.length) {
                return this.$message.warning('数据点名称不能重复')
            }
            this.$HTTP.put('/api/blade-cps/workstation/saveDatapoints', {
                dpConfig: JSON.stringify(this.tabledata),
                dpConfig: JSON.stringify(this.tabledata.map(v => {
                    delete v.status
                    return v
                })),
                workstationId: this.params.id,
                type: this.type
                type: this.type,
                appId: this.appId
            }).then(res => {
                if (res.code === 200) {
                    this.getList({
                        workstationId: this.params.id,
                    })
                }
            }).finally(() => {
                this.visible = false
                this.$emit('success')
            })
        },