RLR弹窗实现自定义编辑表格的功能
This commit is contained in:
parent
c33fb7ecc3
commit
9812c461ab
|
|
@ -0,0 +1,50 @@
|
|||
<template>
|
||||
<div class="editable-cell">
|
||||
<div v-if="editable" class="editable-cell-input-wrapper">
|
||||
<a-input ref="myInput" :value="value" @change="handleChange" @blur="handleBlur" />
|
||||
</div>
|
||||
<div v-else class="editable-cell-text-wrapper" @click="handleCellClick">
|
||||
{{ value || ' ' }}
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
text: String,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
value: this.text,
|
||||
editable: false,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
handleCellClick() {
|
||||
console.log("点击单元格");
|
||||
this.editable = true
|
||||
this.$nextTick(() => {
|
||||
this.$refs.myInput.focus()
|
||||
this.$refs.myInput.select()
|
||||
})
|
||||
},
|
||||
handleChange(e) {
|
||||
this.value = e.target.value
|
||||
},
|
||||
handleBlur() {
|
||||
this.editable = false
|
||||
this.$emit('change', this.value);
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
/deep/.ant-input{
|
||||
padding: 0;
|
||||
}
|
||||
.editable-cell-text-wrapper {
|
||||
min-height: 32px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -10,48 +10,56 @@ const columns = [
|
|||
{
|
||||
title: 'Index',
|
||||
dataIndex: 'key',
|
||||
align: 'center',
|
||||
align: 'left',
|
||||
customRender: (text,record,index) => `${index+1}`,//此处为重点
|
||||
},
|
||||
{
|
||||
title: 'Energy(keV)',
|
||||
dataIndex: 'energy',
|
||||
align: 'center'
|
||||
align: 'left',
|
||||
scopedSlots: { customRender: 'energy' }
|
||||
},
|
||||
{
|
||||
title: 'Energy_err(%)',
|
||||
dataIndex: 'energyErr',
|
||||
align: 'center'
|
||||
align: 'left',
|
||||
scopedSlots: { customRender: 'energyErr' },
|
||||
},
|
||||
{
|
||||
title: 'Net Area',
|
||||
dataIndex: 'netArea',
|
||||
align: 'center'
|
||||
align: 'left',
|
||||
scopedSlots: { customRender: 'netArea' },
|
||||
},
|
||||
{
|
||||
title: 'Area_err(%)',
|
||||
dataIndex: 'areaErr',
|
||||
align: 'center'
|
||||
align: 'left',
|
||||
scopedSlots: { customRender: 'areaErr' },
|
||||
},
|
||||
{
|
||||
title: 'NetCountRate',
|
||||
dataIndex: 'netCountRate',
|
||||
align: 'center'
|
||||
align: 'left',
|
||||
scopedSlots: { customRender: 'netCountRate' },
|
||||
},
|
||||
{
|
||||
title: 'NCRate_err(%)',
|
||||
dataIndex: 'ncRateErr',
|
||||
align: 'center'
|
||||
align: 'left',
|
||||
scopedSlots: { customRender: 'ncRateErr' },
|
||||
},
|
||||
{
|
||||
title: 'LC',
|
||||
dataIndex: 'lc',
|
||||
align: 'center'
|
||||
align: 'left',
|
||||
scopedSlots: { customRender: 'lc' },
|
||||
},
|
||||
{
|
||||
title: 'Significance',
|
||||
dataIndex: 'significance',
|
||||
align: 'center'
|
||||
align: 'left',
|
||||
scopedSlots: { customRender: 'significance' },
|
||||
}
|
||||
]
|
||||
|
||||
|
|
@ -60,28 +68,16 @@ export default {
|
|||
TableWithOperators
|
||||
},
|
||||
props: {
|
||||
allData: {
|
||||
type: Object,
|
||||
default: ()=>{}
|
||||
tableData: {
|
||||
type: Array,
|
||||
default: ()=>[]
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
allData: {
|
||||
handler(val) {
|
||||
console.log(val);
|
||||
},
|
||||
deep: true,
|
||||
immediate:true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
this.columns = columns
|
||||
return {
|
||||
list: []
|
||||
list: this.tableData
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.list = this.allData.peakFit
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,57 +1,34 @@
|
|||
<template>
|
||||
<div>
|
||||
<div class="operators">
|
||||
<a-button type="primary">Insert Before</a-button>
|
||||
<a-button type="primary">Insert After</a-button>
|
||||
<a-button type="primary">Delete</a-button>
|
||||
<a-button type="primary" @click="insertBefore">Insert Before</a-button>
|
||||
<a-button type="primary" @click="insertAfter">Insert After</a-button>
|
||||
<a-button type="primary" @click="handleDelete">Delete</a-button>
|
||||
</div>
|
||||
<a-table
|
||||
size="small"
|
||||
:class="list.length ? 'has-data' : ''"
|
||||
rowKey="id"
|
||||
:class="dataSource.length ? 'has-data' : ''"
|
||||
:columns="columns"
|
||||
:dataSource="list"
|
||||
:dataSource="dataSource"
|
||||
:pagination="false"
|
||||
:scroll="{ y: 470 }"
|
||||
:customRow="customRow"
|
||||
>
|
||||
</a-table>
|
||||
<template v-for="col in columns" :slot="col.dataIndex" slot-scope="text, record">
|
||||
<editable-cell :text="text" :key="col.id" @change="onCellChange(record.id, col.dataIndex, $event)" />
|
||||
</template>
|
||||
</a-table>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
const columns = [
|
||||
{
|
||||
title: 'Nuclide1',
|
||||
dataIndex: 'nuclide1',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: 'Nuclide2',
|
||||
dataIndex: 'nuclide2',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: 'Ratio',
|
||||
dataIndex: 'ratio',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: 'Ratio_err(%)',
|
||||
dataIndex: 'ratioErr',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: 'Reference Time',
|
||||
dataIndex: 'referenceTime',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: 'Zero Time',
|
||||
dataIndex: 'zeroTime',
|
||||
align: 'center'
|
||||
}
|
||||
]
|
||||
import EditableCell from './EditableCell.vue';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
EditableCell,
|
||||
},
|
||||
props: {
|
||||
columns: {
|
||||
type: Array,
|
||||
|
|
@ -61,7 +38,136 @@ export default {
|
|||
type: Array,
|
||||
required: true
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
selectedKey: "",
|
||||
dataSource: this.list,
|
||||
isEmpty:false
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.dataSource.forEach((item, index) => {
|
||||
item.id = this.guid()
|
||||
})
|
||||
this.initList()
|
||||
},
|
||||
methods: {
|
||||
guid() {
|
||||
return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
|
||||
var r = Math.random() * 16 | 0,
|
||||
v = c == 'x' ? r : (r & 0x3 | 0x8);
|
||||
return v.toString(16);
|
||||
});
|
||||
},
|
||||
// 实现单击选中/反选功能
|
||||
customRow(record, index) {
|
||||
const that = this;
|
||||
return {
|
||||
class: that.selectedKey==record.id ? 'ant-table-row-selected' : '',
|
||||
on: {
|
||||
click: () => {
|
||||
console.log("选中行",record.id);
|
||||
that.selectedKey = record.id
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
initList() {
|
||||
let arr = []
|
||||
let keys = 0
|
||||
this.dataSource.forEach((item,index) => {
|
||||
let num = 0
|
||||
keys=Object.keys(item).length
|
||||
Object.keys(item).forEach(key => {
|
||||
if (item[key]!=="") {
|
||||
num++
|
||||
}
|
||||
})
|
||||
arr[index] = num
|
||||
})
|
||||
let idx = arr.findIndex(cont => {
|
||||
return cont!==keys
|
||||
})
|
||||
if (idx>-1) {
|
||||
this.isEmpty = true
|
||||
} else {
|
||||
this.isEmpty = false
|
||||
}
|
||||
sessionStorage.setItem("isCellEmpty",this.isEmpty)
|
||||
},
|
||||
insertBefore() {
|
||||
this.initList()
|
||||
if (this.isEmpty) {
|
||||
this.$message.warning("Please finishi ti edit new inserted row first.")
|
||||
} else {
|
||||
let obj = {
|
||||
id: this.guid(),
|
||||
energy: "",
|
||||
energyErr: "",
|
||||
netArea: "",
|
||||
areaErr: "",
|
||||
netCountRate: "",
|
||||
ncRateErr: "",
|
||||
lc: "",
|
||||
significance: ""
|
||||
}
|
||||
if (this.selectedKey) {
|
||||
let idx = this.dataSource.findIndex(item => {
|
||||
return item.id === this.selectedKey
|
||||
})
|
||||
this.dataSource.splice(idx, 0, obj)
|
||||
} else {
|
||||
this.dataSource.unshift(obj)
|
||||
}
|
||||
sessionStorage.setItem("isCellEmpty",true)
|
||||
this.selectedKey = obj.id
|
||||
}
|
||||
},
|
||||
insertAfter() {
|
||||
if (this.isEmpty) {
|
||||
this.$message.warning("Please finishi ti edit new inserted row first.")
|
||||
} else {
|
||||
let obj = {
|
||||
id:this.guid(),
|
||||
energy: "",
|
||||
energyErr: "",
|
||||
netArea: "",
|
||||
areaErr: "",
|
||||
netCountRate: "",
|
||||
ncRateErr: "",
|
||||
lc: "",
|
||||
significance: ""
|
||||
}
|
||||
if (this.selectedKey) {
|
||||
let idx = this.dataSource.findIndex(item => {
|
||||
return item.id === this.selectedKey
|
||||
})
|
||||
this.dataSource.splice(idx+1, 0, obj)
|
||||
} else {
|
||||
this.dataSource.push(obj)
|
||||
}
|
||||
sessionStorage.setItem("isCellEmpty",true)
|
||||
this.selectedKey = obj.id
|
||||
}
|
||||
},
|
||||
handleDelete() {
|
||||
let idx = this.list.findIndex(item => {
|
||||
return item.id === this.selectedKey
|
||||
})
|
||||
console.log(idx);
|
||||
this.dataSource.splice(idx,1)
|
||||
},
|
||||
onCellChange(id, dataIndex, value) {
|
||||
const dataSource = [...this.dataSource];
|
||||
const target = dataSource.find(item => item.id === id);
|
||||
if (target) {
|
||||
target[dataIndex] = value;
|
||||
this.dataSource = dataSource;
|
||||
}
|
||||
this.initList()
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
:class="activeKey == index ? 'active' : ''"
|
||||
v-for="(tab, index) in tabs"
|
||||
:key="index"
|
||||
@click="activeKey = index"
|
||||
@click="handleChangeView(index)"
|
||||
>
|
||||
{{ tab }}
|
||||
</div>
|
||||
|
|
@ -35,7 +35,7 @@
|
|||
<peaks-method :allData="allInfo" />
|
||||
</template>
|
||||
<template v-if="activeKey == 6">
|
||||
<peak-fit :allData="allInfo" />
|
||||
<peak-fit :tableData="allInfo.peakFit" />
|
||||
</template>
|
||||
<template v-if="activeKey == 7">
|
||||
<g-analysis-methods :allData="allInfo" />
|
||||
|
|
@ -68,6 +68,12 @@
|
|||
</div>
|
||||
</div>
|
||||
</a-spin>
|
||||
<div slot="custom-footer" style="text-align: center;">
|
||||
<a-space :size="20">
|
||||
<a-button type="primary" @click="handleSave">Save</a-button>
|
||||
<a-button @click="visible = false">Cancel</a-button>
|
||||
</a-space>
|
||||
</div>
|
||||
</custom-modal>
|
||||
</template>
|
||||
|
||||
|
|
@ -143,7 +149,26 @@ export default {
|
|||
allInfo: {}
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
sessionStorage.setItem("isCellEmpty",false);
|
||||
},
|
||||
methods: {
|
||||
handleSave() {
|
||||
let val = sessionStorage.getItem("isCellEmpty")
|
||||
if (val=="false") {
|
||||
this.visible = false
|
||||
} else {
|
||||
this.$message.warning("Please finishi ti edit new inserted row first.")
|
||||
}
|
||||
},
|
||||
handleChangeView(index) {
|
||||
let val = sessionStorage.getItem("isCellEmpty")
|
||||
if (val=="false") {
|
||||
this.activeKey = index
|
||||
} else {
|
||||
this.$message.warning("Please finishi ti edit new inserted row first.")
|
||||
}
|
||||
},
|
||||
beforeModalOpen() {
|
||||
this.activeKey = 0
|
||||
this.getGammaViewRLR();
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user