173 lines
4.0 KiB
Vue
173 lines
4.0 KiB
Vue
<template>
|
|
<custom-modal v-model="visible" :width="1200" title="Load Data From File">
|
|
<a-table :data-source="list" :columns="columns" :pagination="false" bordered>
|
|
<template slot="sampleData" slot-scope="text, record">
|
|
<phd-select type="file" @change="handleFileChange(record, 'sampleData', $event)" :title="text && text.name">
|
|
{{ text && text.name }}
|
|
</phd-select>
|
|
</template>
|
|
<template slot="gasBkData" slot-scope="text, record">
|
|
<phd-select type="file" @change="handleFileChange(record, 'gasBkData', $event)" :title="text && text.name">
|
|
{{ text && text.name }}
|
|
</phd-select>
|
|
</template>
|
|
<template slot="detBkData" slot-scope="text, record">
|
|
<phd-select type="file" @change="handleFileChange(record, 'detBkData', $event)" :title="text && text.name">
|
|
{{ text && text.name }}
|
|
</phd-select>
|
|
</template>
|
|
<template slot="qcData" slot-scope="text, record">
|
|
<phd-select type="file" @change="handleFileChange(record, 'qcData', $event)" :title="text && text.name">
|
|
{{ text && text.name }}
|
|
</phd-select>
|
|
</template>
|
|
<template slot="status" slot-scope="text">
|
|
<span class="status"></span>
|
|
</template>
|
|
</a-table>
|
|
|
|
<!-- 底部按钮 -->
|
|
<template slot="custom-footer">
|
|
<a-space>
|
|
<a-button type="primary" @click="handleReset">Reset</a-button>
|
|
<a-button type="primary" @click="handleLoad">Load</a-button>
|
|
<a-button type="primary" @click="handleCancel">Cancel</a-button>
|
|
</a-space>
|
|
</template>
|
|
<!-- 底部按钮结束 -->
|
|
</custom-modal>
|
|
</template>
|
|
|
|
<script>
|
|
import PhdSelect from '../PHDSelect.vue'
|
|
const columns = [
|
|
{
|
|
title: 'SampleData',
|
|
dataIndex: 'sampleData',
|
|
width: '23%',
|
|
ellipsis: true,
|
|
scopedSlots: {
|
|
customRender: 'sampleData'
|
|
}
|
|
},
|
|
{
|
|
title: 'GasBkData',
|
|
dataIndex: 'gasBkData',
|
|
width: '23%',
|
|
ellipsis: true,
|
|
scopedSlots: {
|
|
customRender: 'gasBkData'
|
|
}
|
|
},
|
|
{
|
|
title: 'DetBkData',
|
|
dataIndex: 'detBkData',
|
|
width: '23%',
|
|
ellipsis: true,
|
|
scopedSlots: {
|
|
customRender: 'detBkData'
|
|
}
|
|
},
|
|
{
|
|
title: 'QCData',
|
|
dataIndex: 'qcData',
|
|
width: '23%',
|
|
ellipsis: true,
|
|
scopedSlots: {
|
|
customRender: 'qcData'
|
|
}
|
|
},
|
|
{
|
|
title: 'Status',
|
|
align: 'center',
|
|
scopedSlots: {
|
|
customRender: 'status'
|
|
}
|
|
}
|
|
]
|
|
|
|
export default {
|
|
components: { PhdSelect },
|
|
props: {
|
|
value: {
|
|
type: Boolean
|
|
}
|
|
},
|
|
data() {
|
|
this.columns = columns
|
|
return {
|
|
list: this.getInitialList()
|
|
}
|
|
},
|
|
methods: {
|
|
// 初始化为10*4的表格
|
|
getInitialList() {
|
|
return new Array(10).fill(0).map(() => ({
|
|
sampleData: undefined,
|
|
gasBkData: undefined,
|
|
detBkData: undefined,
|
|
qcData: undefined
|
|
}))
|
|
},
|
|
|
|
handleFileChange(record, key, fileInfo) {
|
|
record[key] = fileInfo
|
|
},
|
|
|
|
handleReset() {
|
|
this.list = this.getInitialList()
|
|
},
|
|
|
|
handleLoad() {
|
|
console.log('%c [ handleLoad ]-123', 'font-size:13px; background:pink; color:#bf2c9f;', this.list)
|
|
},
|
|
|
|
handleCancel() {
|
|
this.visible = false
|
|
}
|
|
},
|
|
computed: {
|
|
visible: {
|
|
get() {
|
|
return this.value
|
|
},
|
|
set(val) {
|
|
this.$emit('input', val)
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.status {
|
|
display: inline-block;
|
|
width: 25px;
|
|
height: 25px;
|
|
border-radius: 50%;
|
|
margin-top: 8px;
|
|
|
|
background-color: #00e170;
|
|
}
|
|
::v-deep {
|
|
@tableBorderColor: #000;
|
|
|
|
.ant-table-bordered .ant-table-thead > tr > th,
|
|
.ant-table-bordered .ant-table-tbody > tr > td {
|
|
border-right-color: @tableBorderColor;
|
|
}
|
|
.ant-table-thead > tr th {
|
|
border-bottom: 1px solid @tableBorderColor;
|
|
}
|
|
|
|
.ant-table-bordered .ant-table-body > table {
|
|
border-color: @tableBorderColor;
|
|
}
|
|
|
|
.ant-table-tbody tr td {
|
|
padding-top: 0 !important;
|
|
padding-bottom: 0 !important;
|
|
}
|
|
}
|
|
</style>
|