增加列表显示

gaoshp

2024-11-04 eef1ef0be935d4a3d8fc691b2666f41796b2d4a5

 src/views/console/workstation/CollDialog.vue

@@ -1,5 +1,5 @@
<template>
    <el-dialog title="数据点" v-model="visible" :width="'80%'" destroy-on-close @closed="$emit('closed')">
    <el-dialog title="数据点" v-model="visible" :width="'100%'" 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">
@@ -11,33 +11,7 @@

        <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 :disabled="!scope.row.status" v-model="scope.row[item.prop]" placeholder="" size="small"
                        v-if="item.type === 'option'">
                        <el-option v-for="item in item.options" :key="item.value || item" :label="(item?.label || item)"
                            :value="(item.value || item)" />
                    </el-select>
                    <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="200">
            <el-table-column label="操作" prop="state" width="200" fixed="left">
                <template #default="scope">
                    <el-button-group>
                        <el-button text type="primary" size="small" @click="table_edit(scope.row)">编辑</el-button>
@@ -51,6 +25,34 @@

                </template>
            </el-table-column>
            <el-table-column width="200" 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 :disabled="!scope.row.status || (item.disabledFn && item.disabledFn(scope.row))"
                        v-model="scope.row[item.prop]" @change="change($event, scope.row, scope.$index, item)"
                        placeholder="" size="small" v-if="item.type === 'option'">
                        <el-option v-for="item in item.options" :key="item.value || item" :label="(item?.label || item)"
                            :value="(item.value || item)" />
                    </el-select>
                    <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"
                        :disabled="(['dpLabel', 'dpName'].includes(item.prop) && 'Other' !== scope.row.dpCategory)"></el-input>
                    <span v-else>{{ scope.row[item.prop] }}</span>
                </template>
            </el-table-column>


        </scFormTable>
        <template #footer>
            <el-button @click="visible = false">取 消</el-button>
@@ -60,9 +62,11 @@
</template>

<script>
import addOptions from './addOptions'
export default {
    name: 'CollDialog',
    emits: ['success', 'closed'],
    mixins: [addOptions],
    props: {
        option: {
            type: Object
@@ -91,6 +95,19 @@

    },
    methods: {
        change(e, row, index, { prop, options }) {
            console.log(e, options)
            if (prop === 'dpCategory' && e !== 'Other') {
                const label = options.find(v => v.value === e).label
                this.tabledata[index].dpLabel = label
                this.tabledata[index].dpName = e
                this.tabledata[index].paramChartType = 'distribute'
            } else if (prop === 'dpCategory' && e === 'Other') {
                this.tabledata[index].dpLabel = ''
                this.tabledata[index].dpName = ''
            }
            // 点位分类为非其他时 过程参数展示方式为分布图
        },
        changeType(val) {
            if (this.tabledata.length > 0) {
                this.$confirm(`切换类型将删除所有已配置数据点`, '提示', {
@@ -98,7 +115,7 @@
                }).then(() => {
                    try {
                        this.cols = JSON.parse(this.typeList.find(v => v.id === val).dpHeadFull)
                        this.addOptions()
                        this.addOptions(this.cols)
                        this.tabledata = []
                    } catch (error) {
                        this.cols = []
@@ -109,7 +126,7 @@
            } else {
                try {
                    this.cols = JSON.parse(this.typeList.find(v => v.id === val).dpHeadFull)
                    this.addOptions()
                    this.addOptions(this.cols)

                } catch (error) {
                    this.cols = []
@@ -149,42 +166,64 @@
            })

        },
        addOptions() {
            if (this.cols.filter(v => v.prop === 'dplabel').length === 0) {
                this.cols.unshift(
                    {
                        label: "显示名称",
                        prop: "dplabel",
                        isRequired: true,
                    }
                )
            }
            if (this.cols.filter(v => v.prop === 'dpCategory').length === 0) {
                this.cols.unshift(
                    {
                        label: "点位分类",
                        prop: "dpCategory",
                        isRequired: true,
                        type: 'option',
                        options: [{
                            label: '状态',
                            value: 'DeviceStatus'
                        }, {
                            label: '产量',
                            value: 'Output'
                        }, {
                            label: '告警',
                            value: 'Alarm'
                        }]
                    }
                )
            }
        },
        // addOptions() {
        //     if (this.cols.filter(v => v.prop === 'isProcessParam').length === 0) {
        //         this.cols.unshift(
        //             {
        //                 label: "过程参数",
        //                 prop: "isProcessParam",
        //                 isRequired: true,
        //                 type: 'boolean',
        //             }
        //         )
        //     }
        //     if (this.cols.filter(v => v.prop === 'dpLabel').length === 0) {
        //         this.cols.unshift(
        //             {
        //                 label: "显示名称",
        //                 prop: "dpLabel",
        //                 isRequired: true,
        //             }
        //         )
        //     }
        //     if (this.cols.filter(v => v.prop === 'dpCategory').length === 0) {
        //         this.cols.unshift(
        //             {
        //                 label: "点位分类",
        //                 prop: "dpCategory",
        //                 isRequired: true,
        //                 type: 'option',
        //                 options: [{
        //                     label: '程序名',
        //                     value: 'ProgName'
        //                 }, {
        //                     label: '程序内容',
        //                     value: 'ProgContent'
        //                 }, {
        //                     label: '刀具号',
        //                     value: 'ToolNo'
        //                 }, {
        //                     label: '状态',
        //                     value: 'DeviceStatus'
        //                 }, {
        //                     label: '产量',
        //                     value: 'Output'
        //                 }, {
        //                     label: '告警',
        //                     value: 'Alarm'
        //                 }, {
        //                     label: '其他',
        //                     value: 'Other'
        //                 }]
        //             }
        //         )
        //     }
        // },
        getList(params) {
            this.$HTTP.get(`/api/blade-cps/workstation/listDatapointsByWorkstationId`, {}, { params }).then(res => {
            this.$HTTP.get(`/api/smis/workstation/listDatapointsByWorkstationId`, {}, { params }).then(res => {
                try {
                    this.cols = JSON.parse(res.data.dpHead)
                    this.addOptions()
                    this.addOptions(this.cols)
                } catch (error) {
                    this.cols = []
                }
@@ -203,6 +242,7 @@
            })
        },
        table_edit(row) {
            console.log('bianji', row)
            row.status = '1'
        },
        del(index) {
@@ -226,7 +266,7 @@
            if (len != this.tabledata.length) {
                return this.$message.warning('数据点名称不能重复')
            }
            this.$HTTP.put('/api/blade-cps/workstation/saveDatapoints', {
            this.$HTTP.put('/api/smis/workstation/saveDatapoints', {
                dpConfig: JSON.stringify(this.tabledata.map(v => {
                    delete v.status
                    return v
@@ -239,10 +279,13 @@
                    this.getList({
                        workstationId: this.params.id,
                    })
                    this.visible = false
                    this.$emit('success')
                } else {
                    this.$message.error(res.msg)
                }
            }).finally(() => {
                this.visible = false
                this.$emit('success')

            })
        },