table可编辑表格

<template>
    <div class="RemoteControl">
        <div class="header">远控配置-{{name}}</div>
        <div style="display: flex;align-items: center; margin:10px 0">
            <img style="width:14px;height:14px;margin-right: 5px;" src="@/assets/img/感叹号.png" alt="">
            <span style="font-size:14px;color:#555">提示:红色标注点位数据失效，请重配置。</span>
        </div>
        <div class="table">
            <a-card>
                <a-table
                    :columns="columns"
                    :dataSource="data"
                    :pagination="false"
                >
                    <template slot="plc_cname" slot-scope="text, record">
                        <div key="plc_cname" :class="record.status==='n' ? 'alarm': 'unAlarm'">
                            <!-- v-model="warnRoles" -->
                            <a-select
                                style="width: 100%; margin: -5px 0;"
                                v-if="record.editable"
                                :value="text"
                                v-model="plc_cname_Data"
                                allowClear
                                placeholder="请选择PLC"
                                @change="(e) => handleChange(siteTypeData, record.key, 'plc_cname')"
                            >
                                <a-select-option  v-for="item in plcList" :key="item.id" :value="item.id">
                                    {{ item.name }}
                                </a-select-option>
                            </a-select>
                            <template v-else>
                                <div v-show="record.plc_cname.length==0">--</div>
                                <div v-show="record.plc_cname.length!==0">{{ text }}</div>
                            </template>
                        </div>
                    </template>
                    <!-- 点位名称 -->
                    <template slot="equipment_cname" slot-scope="text, record">
                        <div key="equipment_cname" :class="record.status==='n' ? 'alarm': 'unAlarm'">
                            <a-input
                                v-if="record.editable"
                                style="margin: -5px 0;"
                                :value="text"
                                allowClear
                                placeholder="请输入处理时间"
                                @change="e => handleChange(e.target.value, record.key, 'equipment_cname')"
                            />
                            <template v-else>
                                <span v-if="record.plc_cname.length==0">--</span>
                                <span v-if="record.plc_cname.length!==0">{{text}}</span>
                            </template>
                        </div>
                    </template>
                    <!-- 设备别名 -->
                    <template slot="equipment_alias" slot-scope="text, record">
                        <div key="equipment_alias" :class="record.status==='n' ? 'alarm': 'unAlarm'">
                            <a-input
                                v-if="record.editable"
                                style="margin: -5px 0;"
                                :value="text"
                                allowClear
                                placeholder="请输入设备别名"
                                @change="e => handleChange(e.target.value, record.key, 'equipment_alias')"
                            />
                            <template v-else>
                                <span v-if="record.plc_cname.length==0">--</span>
                                <span v-if="record.plc_cname.length!==0">{{text}}</span>
                            </template>
                        </div>
                    </template>
                    <span slot="customTitle">点位名称
                        <a-tooltip placement="top" style=" max-width: 263px!important">
                            <template slot="title">
                                <div>点位名称：仅展示PLC设备内可读写的点</div>
                            </template>
                            <a-icon style="margin-left:5px" type="question-circle" />
                        </a-tooltip>
                    </span>
                    <!-- 操作 -->
                    <template slot="operation" slot-scope="text, record">
                        <template v-if="record.editable">
                            <span v-if="record.isNew&&!disEdit">
                                <a @click="saveRow(record)">添加</a>
                                <a-divider type="vertical" />
                                <a-popconfirm title="删除新增行？" @confirm="remove(record.key)">
                                    <a>删除</a>
                                </a-popconfirm>
                            </span>
                            <span v-else>
                                <a @click="saveRow(record)">保存</a>
                                <a-divider type="vertical" />
                                <a @click="cancel(record.key)">取消</a>
                            </span>
                        </template>
                        <span v-else>
                            <a @click="toggle(record.key)" :disabled="disEdit">编辑</a>
                            <a-divider type="vertical" />
                            <a-popconfirm title="删除远控配置？" @confirm="remove(record.key)">
                                <a :disabled="disEdit">删除</a>
                            </a-popconfirm>
                        </span>
                    </template>
                </a-table>
                <a-button :disabled="disEdit" style="width: 100%; margin-top: 16px; margin-bottom: 8px" type="dashed" icon="plus" @click="newMember">新增</a-button>
            </a-card>
        </div>
    </div>
</template>

<script>
import { query_remote_equipments } from '@/api/factory'

export default {
    name: 'RemoteControl',
    data () {
        const vm = this
        return {
            name: vm.$route.query.cname,
            loading: false,
            memberLoading: false,
            plc_cname_Data: undefined,
            plcList: [{
                id: '0',
                name: 'plc'
            },
            {
                id: '1',
                name: 'plc1'
            }],
            // table
            columns: [
                {
                    title: 'PLC',
                    dataIndex: 'plc_cname',
                    key: 'plc_cname',
                    // width: '20%',
                    scopedSlots: { customRender: 'plc_cname' }
                },
                {
                    // title: '点位名称',
                    dataIndex: 'equipment_cname',
                    key: 'equipment_cname',
                    // width: '20%',
                    slots: { title: 'customTitle' },
                    scopedSlots: { customRender: 'equipment_cname' }
                },
                {
                    title: '设备别名',
                    dataIndex: 'equipment_alias',
                    key: 'equipment_alias',
                    // width: '40%',
                    scopedSlots: { customRender: 'equipment_alias' }
                },
                {
                    title: '操作',
                    key: 'action',
                    width: '9%',
                    scopedSlots: { customRender: 'operation' }
                }
            ],
            data: [
                {
                    key: '1',
                    equipment_cname: '小明',
                    plc_cname: '001',
                    editable: false,
                    equipment_alias: '行政部'
                },
                {
                    key: '2',
                    equipment_cname: '李莉',
                    plc_cname: '002',
                    editable: false,
                    equipment_alias: 'IT部'
                },
                {
                    key: '3',
                    equipment_cname: '王小帅',
                    plc_cname: '003',
                    editable: false,
                    equipment_alias: '财务部'
                }
            ],
            newTabIndex: 0,
            disEdit: false
        }
    },
    mounted () {

    },
    methods: {
        newMember () {
            this.disEdit = false
            const activeKey = `newKey${this.newTabIndex++}`
            this.data.push({
                key: activeKey,
                plc_cname: '',
                equipment_cname: '',
                equipment_alias: '',
                editable: true,
                isNew: true
            })
        },
        remove (key) {
            const newData = this.data.filter(item => item.key !== key)
            this.data = newData
            this.disEdit = false
        },
        saveRow (record) {
            this.disEdit = false
            this.memberLoading = true
            const { key, plc_cname, equipment_cname, equipment_alias } = record
            if (!plc_cname || !equipment_cname || !equipment_alias) {
                this.memberLoading = false
                this.$message.error('请填写完整成员信息。')
                return
            }
            // 模拟网络请求、卡顿 800ms
            new Promise((resolve) => {
                setTimeout(() => {
                    resolve({ loop: false })
                }, 800)
            }).then(() => {
                const target = this.data.find(item => item.key === key)
                target.editable = false
                target.isNew = false
                this.memberLoading = false
            })
        },
        toggle (key) {
            this.disEdit = true
            const target = this.data.find(item => item.key === key)
            target._originalData = { ...target }
            target.editable = !target.editable
        },
        getRowByKey (key, newData) {
            const data = this.data
            return (newData || data).find(item => item.key === key)
        },
        cancel (key) {
            this.disEdit = false
            const target = this.data.find(item => item.key === key)
            Object.keys(target).forEach(key => { target[key] = target._originalData[key] })
            target._originalData = undefined
        },
        handleChange (value, key, column) {
            const newData = [...this.data]
            const target = newData.find(item => key === item.key)
            if (target) {
                target[column] = value
                this.data = newData
            }
        }
    },
    beforeDestroy () {

    }
}
</script>

<style lang="less" scoped>
.RemoteControl{
    padding: 24px;
    background:#fff;
    .header{
        font-size: 16px;
        color: #000000;
        padding-bottom: 20px;
        border-bottom: 1px solid rgba(173, 173, 173, 0.6);
    }
}
/deep/.ant-card-body{
    padding: 0;
}
// /deep/.ant-tooltip-placement-top, .ant-tooltip-placement-topLeft, .ant-tooltip-placement-topRight{
//     max-width: 263px!important;
//     background: #fff;
// }
// .ant-tooltip-inner{
//     width: 263px!important;
// }
</style>