vue、vue-antd 动态表格，table某一列两个input

需求：第一列变量名称支持模糊远程搜索；地址、数据类型值由变量名称选中带到页面，判断类型根据数据类型动态控制，告警值更具判断类型动态显示input框，此需求唯一用点时间开的发就是这里,保存时需要检验所有input必须输

　　保存、取消、编辑、删除功能

 

<template>
    <div>
        <div style="max- 100%; margin: 10px auto 0;">
            <a-table :columns="columns" :pagination="false" :rowKey="(record) => record.key" :data-source="data" bordered :scroll="{ y: 500 }">
                <!-- 变量名称 -->
                <template slot="point_uniq" slot-scope="text, record">
                    <div key="point_uniq" :class="record.status==='n' ? 'alarm': 'unAlarm'">
                        <a-select
                            style=" 100%; margin: -5px 0;"
                            v-if="record.editable"
                            :value="text"
                            v-model="in_velocity"
                            allowClear
                            show-search
                            :default-active-first-option="false"
                            :show-arrow="false"
                            :filter-option="false"
                            :not-found-content="null"
                            @search="handleSearch"
                            placeholder="请输入搜索条件"
                            @change="(e) => handleChange(in_velocity, record.key, '','point_uniq',1)"
                        >
                            <a-select-option  v-for="item in dataVelocity" :key="item.value" :value="item.cname">
                                {{ item.cname }}
                            </a-select-option>
                        </a-select>
                        <template v-else>
                            {{ text }}
                        </template>
                    </div>
                </template>
                <!-- 地址 -->
                <template slot="mouldbus" slot-scope="text, record">
                    <div key="mouldbus">
                        <a-input
                            disabled
                            v-if="record.editable"
                            style="margin: -5px 0;"
                            :value="text"
                            @change="(e) => handleChange(e.target.value, record.key, '','mouldbus')"
                        />
                        <template v-else>
                            {{ text }}
                        </template>
                    </div>
                </template>
                <!-- 数据类型 -->
                <template slot="dtype" slot-scope="text, record">
                    <div key="dtype">
                        <a-input
                            disabled
                            v-if="record.editable"
                            style="margin: -5px 0;"
                            :value="text"
                            @change="(e) => handleChange(e.target.value, record.key, '','dtype')"
                        />
                        <template v-else>
                            {{ text }}
                        </template>
                    </div>
                </template>
                <!-- 判断规则 -->
                <template slot="rule_type" slot-scope="text, record">
                    <div key="rule_type">
                        <a-select
                            style=" 100%; margin: -5px 0;"
                            v-if="record.editable"
                            :value="text"
                            v-model="ruleName"
                            allowClear
                            placeholder="请选择判断规则"
                            @change="(e) => handleChange(ruleName, record.key,'', 'rule_type')"
                        >
                            <a-select-option  v-for="item in ruleList" :key="item.id" :value="item.name">
                                {{ item.name }}
                            </a-select-option>
                        </a-select>
                        <template v-else>
                            {{ text }}
                        </template>
                    </div>
                </template>
                <!-- 告警值 -->
                <template slot="warnData" slot-scope="text, record">
                    <div key="warnData">
                        <a-input
                            type="number"
                            min="0"
                            v-if="record.editable"
                            :class="record.alarmKey?'ATWO':'AONE'"
                            :value="record.warnData.A"
                            :placeholder="record.alarmKey?'最小值':'请输入告警值'"
                            @change="(e) => handleChange(e.target.value, record.key,record.warnData, 'A')"
                        />
                        <span v-if="record.editable" v-show="record.alarmKey">-</span>
                        <a-input
                            v-show="record.alarmKey"
                            type="number"
                            min="0"
                            v-if="record.editable"
                            :class="record.alarmKey?'BTWO':'BONE'"
                            :value="record.warnData.B"
                            placeholder="最大值"
                            @change="(e) => handleChange(e.target.value, record.key,record.warnData, 'B')"
                        />
                        <template v-else>
                            <span>{{ record.warnData.A}}</span>
                            <span v-show="record.alarmKey">-</span>
                            <span v-show="record.alarmKey">{{ record.warnData.B}}</span>
                        </template>
                    </div>
                </template>
                <!-- 告警文字 -->
                <template slot="warn_text" slot-scope="text, record">
                    <div key="warn_text">
                        <a-input
                            v-if="record.editable"
                            style="margin: -5px 0;"
                            :value="text"
                            allowClear
                            placeholder="请输入告警值"
                            @change="(e) => handleChange(e.target.value, record.key, '','warn_text')"
                        />
                        <template v-else>
                            {{ text }}
                        </template>
                    </div>
                </template>
                <template slot="operation" slot-scope="text, record">
                    <div class="editable-row-operations">
                        <span v-if="record.editable">
                            <a href="javascript:;" @click="() => save(record)">保存</a>
                            <a href="javascript:;" @click="() => cancel(record.key)">取消</a>
                        </span>
                        <span v-else>
                            <a href="javascript:;" :disabled="editingKey !== ''" @click="() => edit(record.key)">编辑</a>
                            <a href="javascript:;" @click="() => onDelete(record)">删除</a>
                        </span>
                    </div>
                </template>
            </a-table>
            <a-row type="flex" justify="center" class="video">
                <a href="javascript:;" :disabled="editingKey !== ''" @click="added()"> + 新增告警</a>
            </a-row>
        </div>
    </div>
</template>

<script>
import { ParameterONE, ParameterTWO } from '@/utils/Enumeration'
import {
    query_plc_point_list,
    config_point_warn_rule,
    query_point_warn_rule,
    remove_point_warn_rule
} from '@/api/inlet'
import bus from '@/Bus'
const columns = [
    {
        title: '变量名称',
        dataIndex: 'point_uniq',
         '23%',
        ellipsis: true,
        scopedSlots: { customRender: 'point_uniq' }

    },
    {
        title: '地址',
        dataIndex: 'mouldbus',
        //  '40%',
        ellipsis: true,
        scopedSlots: { customRender: 'mouldbus' }
    },
    {
        title: '数据类型',
        dataIndex: 'dtype',
         '8%',
        ellipsis: true,
        scopedSlots: { customRender: 'dtype' }
    },
    {
        title: '判断规则',
        dataIndex: 'rule_type',
         '10%',
        ellipsis: true,
        scopedSlots: { customRender: 'rule_type' }
    },
    {
        title: '告警值',
        dataIndex: 'warnData',
        //  '40%',
        ellipsis: true,
        scopedSlots: { customRender: 'warnData' }
    },
    {
        title: '告警文字',
        dataIndex: 'warn_text',
         '20%',
        ellipsis: true,
        scopedSlots: { customRender: 'warn_text' }
    },
    {
        title: '操作',
        dataIndex: 'operation',
         '8%',
        scopedSlots: { customRender: 'operation' }
    }
]
export default {
    name: 'Step2',
    props: {
        ID: {
            type: String,
            required: true
        }
    },
    data () {
    // this.cacheData = data.map(item => ({ ...item }))
        return {
            in_velocity: undefined,
            dataVelocity: [],
            ruleName: undefined,
            ruleList: [], // 规则
            ParameterONE, // floatdint
            ParameterTWO, // bool

            uniq: '',
            labelCol: { lg: { span: 5 }, sm: { span: 5 } },
            wrapperCol: { lg: { span: 19 }, sm: { span: 19 } },
            form: null,
            loading: false,
            timer: 0,
            newTabIndex: 0, // 初始key值
            // 表格
            data: [],
            columns,
            editingKey: ''
        }
    },
    created () {
    // 通过中央控件兄弟传值
    },
    mounted () {

    },
    methods: {
        handleSearch (value) {
            this.fetch(value, dataVelocity => (this.dataVelocity = dataVelocity), this.ID, this.dataVelocity)
        },
        // 封装总调用接口
        fetch (value, callback, id, dataArr) {
            if (this.timeout) {
                clearTimeout(this.timeout)
                this.timeout = null
            }
            function fake () {
                const str = {
                    pageNum: 1,
                    pageSize: 10,
                    point_cname: value,
                    puniq: id,
                    type: '1'
                }
                query_plc_point_list(str).then(res => {
                    if (res.code === '00000') {
                        const result = res.data.plcPoint_list
                        dataArr = []
                        result.forEach(r => {
                            dataArr.push({
                                value: r.uniq,
                                cname: r.cname,
                                mouldbus: r.mouldbus,
                                dtype: r.dtype
                            })
                        })
                        callback(dataArr)
                    }
                })
            }
            this.timeout = setTimeout(fake, 800)
        },
        // 修改接口
        pointInfo () {
            const params = {
                plc_uniq: this.ID
            }
            query_point_warn_rule(params).then((res) => {
                if (res.code) {
                    let dataArr = []
                    res.data.pointWarnRuleList.forEach(i => {
                        let C = ''
                        if (i.warn_data_u.length > 0) {
                            C = true
                        } else {
                            C = false
                        }
                        let D = ''
                        this.ParameterONE.map(j => {
                            if (j.id == i.rule_type) {
                                D = j.name
                            }
                        })
                        dataArr.push({
                            alarmKey: C,
                            key: i.id,
                            status: i.status,
                            warnData: {
                                A: i.warn_data,
                                B: i.warn_data_u
                            },
                            point_uniq: i.point_cname,
                            mouldbus: i.mouldbus,
                            dtype: i.dtype,
                            rule_type: D,
                            warn_text: i.warn_text
                        })
                    })
                    this.data = dataArr
                }
            })
        },

        // 表格
        handleChange (value, key, obj, column) {
            const newData = [...this.data]
            const target = newData.filter((item) => key === item.key)[0]
            if (value) {
                target.status = 's'
            }
            if (obj) {
                obj[column] = value
                target[column] = value
                return
            }
            if (target) {
                target[column] = value
                this.dataVelocity.map(item => {
                    if (item.cname === value && column === 'point_uniq') {
                        target['mouldbus'] = item.mouldbus
                        target['dtype'] = item.dtype
                        // 根据数据类型赋值判断规则
                        if (item.dtype !== 'bool') {
                            this.ruleList = this.ParameterONE
                        } else {
                            this.ruleList = this.ParameterTWO
                        }
                    }
                })
                if (target.rule_type === '区间外' || target.rule_type === '区间内') {
                    target.alarmKey = true
                } else {
                    target.alarmKey = false
                }

                this.data = newData
            }
        },

        // 编辑
        edit (key) {
            this.in_velocity = undefined
            this.dataVelocity = []
            const newData = [...this.data]
            const target = newData.filter((item) => key === item.key)[0]
            this.editingKey = key
            if (target) {
                target.editable = true
                this.data = newData
            }
            // 保证在新增后编辑显示正常
            this.data.map(item => {
                if (item.key === key) {
                    this.handleSearch(item.point_uniq)
                    this.in_velocity = item.point_uniq || undefined
                    this.ruleName = item.rule_type || undefined
                    if (item.dtype == '') {
                        return false
                    } else if (item.dtype !== 'bool') {
                        this.ruleList = this.ParameterONE
                    } else {
                        this.ruleList = this.ParameterTWO
                    }
                }
            })
        },
        // 保存
        save (record) {
            const newData = [...this.data]
            let key = record.key

            let warnDataA = record.warnData.A
            const { point_uniq, mouldbus, rule_type, warnData, warn_text } = record
            if (!point_uniq || !mouldbus || !rule_type || !warnDataA || !warn_text) {
                this.$message.warning('请填写完整信息。')
                return false
            }
            if (rule_type == '等于' && warnData.A > 1) {
                this.$message.warning('判断规则值为等于时，告警值应为0或1')
                return false
            }
            if (rule_type != '等于' && warnData.B.length == 0) {
                this.$message.warning('请填写完整信息。')
                return false
            }
            const target = newData.filter((item) => key === item.key)[0]
            let ruleID = ''
            this.ParameterONE.map(item => {
                if (item.name == target.rule_type) {
                    ruleID = item.id
                }
            })
            if (target) {
                const params = {
                    dtype: target.dtype,
                    mouldbus: target.mouldbus,
                    point_cname: target.point_uniq,
                    rule_type: ruleID,
                    warn_data: target.warnData.A,
                    warn_data_u: target.warnData.B || '',
                    warn_text: target.warn_text,
                    id: '',
                    plc_uniq: this.ID
                }
                config_point_warn_rule(params).then(res => {
                    if (res.code === '00000') {
                        delete target.editable
                        this.data = newData
                        this.$message.success('保存成功')
                    } else {
                        this.$message.error(res.msg)
                    }
                })
            }
            this.editingKey = ''
        },
        // 取消
        cancel (key) {
            const newData = [...this.data]
            const target = newData.filter((item) => key === item.key)[0]
            this.editingKey = ''
            if (target) {
                Object.assign(target, this.data.filter((item) => key === item.key)[0])
                delete target.editable
                this.data = newData
            }
            // 重新调用接口
            this.pointInfo()
        },
        // 删除
        onDelete (record) {
            let ruleID = ''
            this.ParameterONE.map(item => {
                if (item.name == record.rule_type) {
                    ruleID = item.id
                }
            })
            const params = {
                plc_uniq: this.ID,
                dtype: record.dtype,
                mouldbus: record.mouldbus,
                point_cname: record.point_uniq,
                rule_type: ruleID,
                warn_text: record.warn_text,
                warn_data: record.warnData.A,
                warn_data_u: record.warnData.B || ''
            }
            // 后端接口删除
            remove_point_warn_rule(params).then(res => {
                if (res.code === '00000') {
                    // 前端页面删除
                    const data = [...this.data]
                    this.data = data.filter((item) => item.key !== record.key)
                    this.editingKey = ''
                    this.$message.success(res.msg)
                } else {
                    this.$message.error(res.msg)
                }
            })
        },
        // 新增
        added (val) {
            this.in_velocity = undefined
            this.dataVelocity = []
            this.ruleName = undefined
            this.ruleList = []
            const activeKey = `newKey${this.newTabIndex++}`
            this.data.push({
                alarmKey: false,
                key: activeKey,
                point_uniq: '', // 变量名称
                mouldbus: '', // 地址
                dtype: '', // 数据类型
                rule_type: '', // 判断规则
                warnData: {
                    A: '',
                    B: ''
                }, // 告警值
                warn_text: '' // 告警文字

            })
            this.edit(activeKey)
        }
    },
    beforeDestroy () {
        clearTimeout(this.timer)
        // bus.$off() // 销毁每次的传值
    }
}
</script>

<style lang="less" scoped>
.alarm {
    color: #f03b3b;
}

.unAlarm {
    color: rgba(0, 0, 0, 0.65);
}

.video {
    padding: 3px 0;
    border: 1px dotted #ccc;
    margin-top: 3px;

    // a {
    //     color: #1890ff;
    // }
}

.editable-row-operations a {
    margin-right: 8px;
}

.stepFormText {
    margin-bottom: 24px;

    .ant-form-item-label,
    .ant-form-item-control {
        line-height: 22px;
    }
}

/deep/.ant-table-pagination.ant-pagination {
    display: none;
}

.AONE {
    width: 100%;
    margin: -5px 0;
}

.ATWO {
    width: 47%;
    margin: -5px 0;
}

.BONE {
    width: 0%;
    margin: -5px 0;
}

.BTWO {
    width: 47%;
    margin: -5px 0;
}
</style>