<template>
<div class="app-container haplotype-detail default-scrollbar">
<div>
<el-form ref="historyForm" :model="historyForm" size="small">
<div class="table-box" style="display:flex;" @contextmenu.prevent.capture>
<el-table
:header-cell-style="{background:'#f2f2f2'}"
:data="historyForm.tableData"
:loading="loading"
style="width: 97%;"
class="list-table default-scrollbar"
size="mini"
:cell-class-name="tableClassName"
:height="elTableHeight"
border
@header-contextmenu="rightClickColShowFun"
@row-contextmenu="rightClickRowShowFun"
>
<el-table-column label="序号" align="center" width="50">
<template slot-scope="scope">
{{ scope.$index+1 }}
</template>
</el-table-column>
<el-table-column v-for="(item,index) in historyForm.tableHeader" :key="index" align="center" :prop="item.nameEn" class-name="cellDefault">
<template slot="header" slot-scope="scope">
<el-tooltip effect="light" placement="bottom" trigger="hover" :disabled="item.name?false:true">
<div slot="content" style="max-width:200px;">{{ item.name }}</div>
<el-input v-model="item.name" style="background:#ddd" class="headerBox" @change="setColName(index,historyForm.tableHeader[index].name)" />
</el-tooltip>
</template>
<template slot-scope="scope">
<el-tooltip effect="light" placement="bottom" trigger="hover" :disabled="scope.row[item.nameEn]?false:true">
<div slot="content" style="max-width:200px;">{{ scope.row[item.nameEn] }}</div>
<el-input v-model="scope.row[item.nameEn]" class="name-input" @input="setInputVal"></el-input>
</el-tooltip>
</template>
</el-table-column>
</el-table>
<div class="add-column" @click="addColSetting">+</div>
</div>
<div class="add-line" @click="addParamsSetting">+</div>
</el-form>
</div>
</div>
</template>
<script>
export default {
name: 'HaplotypeDetail',
data() {
return {
elTableHeight: 0,
// 遮罩层
loading: true,
// 表单参数-表格内容数据
historyForm: {
// 表头列表数组
tableHeader: [
{
name: '类型(自属性)',
nameEn: 'typeSelf'
},
{
name: '类型(生产属性)',
nameEn: 'typeProduct'
},
{
name: '类型(设备属性)',
nameEn: 'typeEquipment'
},
{
name: '类型(质量追溯属性)',
nameEn: 'typeQuality'
}
],
tableData: [
{ index: 0, typeSelf: '集团', typeProduct: '', typeEquipment: '', typeQuality: '' },
{ index: 1, typeSelf: '公司', typeProduct: '', typeEquipment: '', typeQuality: '' },
{ index: 2, typeSelf: '厂区', typeProduct: '厂区', typeEquipment: '厂区', typeQuality: '厂区' },
{ index: 3, typeSelf: '车间', typeProduct: '车间', typeEquipment: '车间', typeQuality: '车间' },
{ index: 4, typeSelf: '线体', typeProduct: '线体', typeEquipment: '线体', typeQuality: '线体' },
{ index: 5, typeSelf: '工艺区', typeProduct: '工艺区', typeEquipment: '工艺区', typeQuality: '工艺区' },
{ index: 6, typeSelf: 'PLC区', typeProduct: 'PLC区', typeEquipment: 'PLC区', typeQuality: 'PLC区' },
{ index: 7, typeSelf: '安全区', typeProduct: '安全区', typeEquipment: '安全区', typeQuality: '安全区' },
{ index: 8, typeSelf: '工位', typeProduct: '工位', typeEquipment: '工位', typeQuality: '工位' },
{ index: 9, typeSelf: '设备组', typeProduct: '设备组', typeEquipment: '设备组', typeQuality: '设备组' },
{ index: 10, typeSelf: '设备', typeProduct: '设备', typeEquipment: '设备', typeQuality: '设备' },
{ index: 11, typeSelf: '附属设备LV1', typeProduct: '附属设备LV1', typeEquipment: '附属设备LV1', typeQuality: '附属设备LV1' },
{ index: 12, typeSelf: '附属设备LV2', typeProduct: '附属设备LV2', typeEquipment: '附属设备LV2', typeQuality: '附属设备LV2' },
{ index: 13, typeSelf: '附属设备LV3', typeProduct: '附属设备LV3', typeEquipment: '附属设备LV3', typeQuality: '附属设备LV3' }
]
},
isAddCol: true,
currentClickRow: null,
currentClickCol: null
}
},
mounted: function() {
// 高度调整
this.$nextTick(() => {
this.elTableHeight = document.body.clientHeight - 130
console.log(document.body.clientHeight)
console.log(this.elTableHeight)
})
},
methods: {
// 新增行
addParamsSetting() {
let item = {
typeEquipment: '',
typeProduct: '',
typeQuality: '',
typeSelf: ''
}
for (let i in this.historyForm.tableHeader) {
if (i > 3) {
item[this.historyForm.tableHeader[i].nameEn] = ''
}
}
this.historyForm.tableData.push(item)
console.log(this.historyForm.tableData)
},
// 删除当前行
deleteRow(index) {
this.historyForm.tableData.splice(index, 1)
},
// 在数据最后新增一列
addColSetting() {
for (let i in this.historyForm.tableHeader) {
if (this.historyForm.tableHeader[i].name === '') {
this.isAddCol = false
} else {
this.isAddCol = true
}
}
if (this.isAddCol) {
this.addColList()
} else {
this.$message.success('还有未填写的列')
}
},
// 新增列
addColList() {
let index = this.historyForm.tableHeader.length - 1
this.historyForm.tableHeader.push({ name: '', nameEn: 'selfName' + index })
let list = this.historyForm.tableData
for (let i = 0; i < list.length; i++) {
this.$set(list[i]['selfName' + index], '')
}
},
// 修改表头名fun
setColName(index, val) {
let head = this.historyForm.tableHeader
this.$set(head[index], 'name', val)
this.$forceUpdate()
console.log(head)
},
// 输入内容数据的fun
setInputVal(e) {
for (let i in this.historyForm.tableHeader) {
if (this.historyForm.tableHeader[i].name === '') {
this.isAddCol = false
} else {
this.isAddCol = true
}
}
if (!this.isAddCol) {
this.$message.success('请先填写完成所有表头内容,且确保无误!')
}
},
// 右键单击选中行-确认是否删除行
rightClickRowShowFun(row, column, event) {
this.currentClickRow = row.index
this.$confirm('此操作将永久删除当前行, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.deleteRow(this.currentClickRow)
}).catch(() => {
this.$message({
type: 'info',
message: '已取消删除'
})
})
},
// 右键单击选中行-确认是否删除列
rightClickColShowFun(column, event) {
this.currentClickCol = column.index
if (this.currentClickCol <= 3) {
this.$message({
type: 'info',
message: '当前列不支持删除!'
})
} else {
this.$confirm('此操作将永久删除当前列, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.deleteCol(this.currentClickCol)
}).catch(() => {
this.$message({
type: 'info',
message: '已取消删除'
})
})
}
},
// 给数据的row、column赋index,便于进行删除行、删除列
tableClassName({ row, column, rowIndex, columnIndex }) {
row.index = rowIndex
column.index = columnIndex - 1
},
// 删除当前列
deleteCol(index) {
let nameCur = this.historyForm.tableHeader[index].nameEn
for (const key in this.historyForm.tableData) {
// 删除nameEn属性
let data = this.historyForm.tableData[key]
console.log(data[nameCur])
delete data[nameCur]
}
console.log(this.historyForm.tableData)
this.historyForm.tableHeader.splice(index, 1)
}
}
}
</script>
<style lang="scss" scoped>
.haplotype-detail{
.add-column, .add-line{
background:#f2f2f2;
width:30px;
cursor:pointer;
font-size:30px;
color:#00c561;
justify-content: center;
flex-direction: column;
align-items: center;
display: flex;
}
.add-line{
height:30px;
width:97%;
}
.headerBox{
padding:0px;
}
}
</style>