390 lines
11 KiB
Vue
390 lines
11 KiB
Vue
<template>
|
|
<div class="box" v-if="isTrue">
|
|
<a-table
|
|
class="table"
|
|
rowKey="id"
|
|
:row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange, type: selectionType }"
|
|
:pagination="ipagination"
|
|
:scroll="{x: '100%'}"
|
|
:components="drag(columns,'columns')"
|
|
:data-source="dataSource"
|
|
:loading="loading"
|
|
:rowClassName="rowClassName"
|
|
:columns="columns"
|
|
@change="tableOnChange"
|
|
>
|
|
<tempalte slot="operation" slot-scope="text, record">
|
|
<a v-for="(ol, index) in operationList" :key="index" @click="operationClick(ol,record)">
|
|
<span v-if="ol.text === $t('cancelCollection')" v-has="ol.has" class="text">
|
|
{{ !record.collectFlag || record.collectFlag === 0 ? $t('collection') :$t('cancelCollection') }}
|
|
</span>
|
|
<span v-else-if="ol.text === $t('cancelSubscribe')" v-has="ol.has" class="text">
|
|
{{ !record.subscribeFlag || record.subscribeFlag === 0 ? $t('subscribe') :$t('cancelSubscribe') }}
|
|
</span>
|
|
<!-- v-has="ol.has"-->
|
|
<span v-else class="text">
|
|
{{ ol.text }}
|
|
</span>
|
|
</a>
|
|
</tempalte>
|
|
<span slot="detailClick" slot-scope="text, record">
|
|
<a class="text-name" :title="text" @click="detailClick(record)">
|
|
{{text}}
|
|
</a>
|
|
</span>
|
|
<span slot="detail" slot-scope="text">
|
|
<span class="text-name" :title="text">
|
|
{{text}}
|
|
</span>
|
|
</span>
|
|
<span slot="urlClick" slot-scope="text">
|
|
<a class="text" :title="text" @click="urlClick(text)">
|
|
{{text}}
|
|
</a>
|
|
</span>
|
|
<span slot="detailText" slot-scope="text">
|
|
<span class="text" :title="text">
|
|
{{text}}
|
|
</span>
|
|
</span>
|
|
<span slot="showContent" slot-scope="text, record" class="item-solt">
|
|
<span class="content-show" href="javascript:;" @click="showContent(text,record)">{{record.iterms_conditions&&record.iterms_conditions!=='null'?record.iterms_conditions.replace(/<.*?>/ig, ' ') : ''}}</span>
|
|
</span>
|
|
</a-table>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { ResizeColumnProvide, ResizeHeader } from '@/mixins/header'
|
|
import { getAction, postAction } from '@/api/manage'
|
|
import eventBus from '@/common/event'
|
|
|
|
export default {
|
|
name: 'TableData',
|
|
mixins: [ResizeColumnProvide, ResizeHeader],
|
|
props: {
|
|
// 接口
|
|
url: {
|
|
type: Object,
|
|
default: () => {
|
|
return {}
|
|
}
|
|
},
|
|
// 操作按钮
|
|
operationList: {
|
|
type: Array,
|
|
default: () => {
|
|
return []
|
|
}
|
|
},
|
|
flag: { // flag获取数据时传给后端的，具体作用还不知道？？
|
|
type: String,
|
|
default: ''
|
|
},
|
|
// 表格选择是单选还是多选
|
|
selectionType: {
|
|
type: String,
|
|
default: 'checkbox'
|
|
},
|
|
// 是否显示操作；默认不显示
|
|
showAction: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
type: {
|
|
type: String,
|
|
default: ''
|
|
}
|
|
},
|
|
data () {
|
|
return {
|
|
/* 分页参数 */
|
|
ipagination: {
|
|
current: 1,
|
|
pageSize: 50,
|
|
pageSizeOptions: ['10', '30', '50', '100', '150', '200'],
|
|
showTotal: (total, range) => {
|
|
return range[0] + '-' + range[1] + ' ' + this.$t('total') + ' ' + total + ' ' + this.$t('strip')
|
|
},
|
|
showQuickJumper: true,
|
|
showSizeChanger: true,
|
|
total: 0
|
|
},
|
|
columns: [],
|
|
selectedRowKeys: [],
|
|
dataSource: [],
|
|
isTrue: false,
|
|
searchParams: {},
|
|
loading: false,
|
|
orderBy: '1',
|
|
orderByField: ''
|
|
}
|
|
},
|
|
mounted () {
|
|
eventBus.$on('searchQuery', search => {
|
|
Object.keys(search).forEach(res => {
|
|
if (search[res] instanceof Array) {
|
|
search[res] = search[res].join(',')
|
|
}
|
|
})
|
|
this.searchParams = search
|
|
this.getData()
|
|
this.getTableList()
|
|
})
|
|
eventBus.$on('searchReset', target => {
|
|
this.searchParams = {}
|
|
this.selectedRowKeys = []
|
|
this.getData()
|
|
this.getTableList()
|
|
})
|
|
this.$on('searchGetData', target => {
|
|
this.selectedRowKeys = []
|
|
this.getData()
|
|
this.getTableList()
|
|
})
|
|
// this.getData()
|
|
// this.getTableList()
|
|
this.columns = [
|
|
{
|
|
title: '编号',
|
|
dataIndex: 'serial_number',
|
|
align: 'left',
|
|
ellipsis: true,
|
|
sorter: 'true',
|
|
width: 215,
|
|
scopedSlots: {
|
|
customRender: 'detailClick'
|
|
}
|
|
},
|
|
{
|
|
title: '标题',
|
|
dataIndex: 'title',
|
|
align: 'left',
|
|
ellipsis: true,
|
|
sorter: 'true',
|
|
width: 215,
|
|
scopedSlots: {
|
|
customRender: 'detailClick'
|
|
}
|
|
},
|
|
{
|
|
title: '状态',
|
|
dataIndex: 'state',
|
|
align: 'left',
|
|
ellipsis: true,
|
|
sorter: 'true',
|
|
width: 215
|
|
},
|
|
{
|
|
title: '适用地区',
|
|
dataIndex: 'region',
|
|
align: 'left',
|
|
ellipsis: true,
|
|
width: 215
|
|
},
|
|
{
|
|
title: '技术领域',
|
|
dataIndex: 'technologyTerritory',
|
|
align: 'left',
|
|
ellipsis: true,
|
|
width: 215
|
|
},
|
|
{
|
|
title: '发布日期',
|
|
dataIndex: 'issue_time',
|
|
align: 'left',
|
|
ellipsis: true,
|
|
width: 215
|
|
}
|
|
// {
|
|
// title: this.$t('operation'),
|
|
// align: 'center',
|
|
// fixed: 'right',
|
|
// width: 200,
|
|
// scopedSlots: { customRender: 'operation' }
|
|
// }
|
|
]
|
|
let width = 0
|
|
if (this.operationList.length > 0) {
|
|
for (let i = 0; i < this.operationList.length; i++) {
|
|
width += this.getTextWith(this.operationList[i].text)
|
|
}
|
|
}
|
|
if (this.showAction) {
|
|
this.columns.push({
|
|
title: this.$t('operation'),
|
|
align: 'center',
|
|
fixed: 'right',
|
|
width: width,
|
|
scopedSlots: { customRender: 'operation' }
|
|
})
|
|
}
|
|
this.dataSource = [
|
|
{
|
|
collectFlag: '0',
|
|
id: 'fd045f5c5d734087a884a63664ee91f1',
|
|
issue_time: '',
|
|
region: '',
|
|
serial_number: '0621001编号',
|
|
state: '现行',
|
|
subscribeFlag: '0',
|
|
technology_territory: '',
|
|
title: '0621001标题',
|
|
title_en: '0621001Title'
|
|
}
|
|
]
|
|
this.isTrue = true
|
|
},
|
|
beforeDestroy () {
|
|
eventBus.$off('searchQuery')
|
|
eventBus.$off('searchReset')
|
|
this.$off('searchGetData')
|
|
},
|
|
methods: {
|
|
rowClassName (record) {
|
|
return record.state === '废止' ? 'rowClassNameBack' : ''
|
|
},
|
|
getTextWith (text, fontStyle) {
|
|
const canvas = document.createElement('canvas')
|
|
const context = canvas.getContext('2d')
|
|
context.font = fontStyle || '14px' // 设置字体样式
|
|
const dimension = context.measureText(text)
|
|
return dimension.width + 40
|
|
},
|
|
getData () {
|
|
const params = {
|
|
flag: this.flag
|
|
}
|
|
getAction(this.url.tableHeader, params).then((res) => {
|
|
if (res.success) {
|
|
const jsonHead = res.result
|
|
this.columns = []
|
|
// res.db_field_txt
|
|
jsonHead.forEach((res, index) => {
|
|
this.columns.push({
|
|
title: res.db_field_txt,
|
|
dataIndex: res.db_field_name,
|
|
align: 'left',
|
|
ellipsis: true,
|
|
sorter: res.sort,
|
|
width: 215
|
|
})
|
|
if (res.click) {
|
|
this.columns[index].scopedSlots = {
|
|
customRender: 'detailClick'
|
|
}
|
|
this.columns[index].ellipsis = false
|
|
} else if (res.urlClick) {
|
|
this.columns[index].scopedSlots = {
|
|
customRender: 'urlClick'
|
|
}
|
|
} else if (res.db_field_name === 'iterms_conditions') {
|
|
// 拆分文档详情页的条款内容点击可预览
|
|
this.columns[index].width = 500
|
|
this.columns[index].scopedSlots = {
|
|
customRender: 'showContent'
|
|
}
|
|
} else {
|
|
this.columns[index].scopedSlots = {
|
|
customRender: 'detailText'
|
|
}
|
|
}
|
|
})
|
|
let width = 0
|
|
if (this.operationList.length > 0) {
|
|
for (let i = 0; i < this.operationList.length; i++) {
|
|
width += this.getTextWith(this.operationList[i].text)
|
|
}
|
|
}
|
|
if (this.showAction) {
|
|
this.columns.push({
|
|
title: this.$t('operation'),
|
|
align: 'center',
|
|
fixed: 'right',
|
|
width: width,
|
|
scopedSlots: { customRender: 'operation' }
|
|
})
|
|
}
|
|
this.isTrue = false
|
|
this.$nextTick(() => {
|
|
this.isTrue = true
|
|
})
|
|
}
|
|
})
|
|
},
|
|
tableOnChange (pagination, filters, sorter) {
|
|
this.orderBy = sorter.order === 'ascend' ? '1' : '2'
|
|
this.orderByField = sorter.columnKey
|
|
this.ipagination = pagination
|
|
this.getTableList()
|
|
},
|
|
getTableList () {
|
|
const pageNo = this.ipagination.current
|
|
const pageSize = this.ipagination.pageSize
|
|
const params = {
|
|
...this.searchParams,
|
|
orderBy: this.orderBy,
|
|
orderByField: this.orderByField,
|
|
type: this.type,
|
|
pageNo: pageNo,
|
|
pageSize: pageSize
|
|
}
|
|
this.loading = true
|
|
postAction(this.url.tableList, params).then((res) => {
|
|
if (res.success) {
|
|
if (res.result.current > 1 && res.result.records.length === 0) {
|
|
this.ipagination.current = res.result.current - 1
|
|
this.getTableList()
|
|
return
|
|
}
|
|
this.dataSource = res.result.records
|
|
this.ipagination.total = res.result.total
|
|
this.loading = false
|
|
} else {
|
|
this.loading = false
|
|
}
|
|
})
|
|
},
|
|
onSelectChange (selectedRowKeys, selectedRows) {
|
|
this.selectedRowKeys = selectedRowKeys
|
|
this.$emit('onSelectChange', selectedRowKeys, selectedRows)
|
|
},
|
|
operationClick (ol, item) {
|
|
this.$emit(ol.clickEvent, item)
|
|
},
|
|
detailClick (item, index) {
|
|
this.$emit('detailClick', item)
|
|
},
|
|
urlClick (item) {
|
|
window.open(item)
|
|
},
|
|
showContent (item) {
|
|
this.$emit('showContent', item)
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="less">
|
|
.text {
|
|
margin-right: 10px;
|
|
}
|
|
|
|
.text-name {
|
|
width: 100%;
|
|
overflow: hidden;
|
|
display: -webkit-box;
|
|
text-overflow: ellipsis;
|
|
/*! autoprefixer: off */
|
|
-webkit-box-orient: vertical;
|
|
-webkit-line-clamp: 1;
|
|
/*! autoprefixer: on;*/
|
|
text-justify: inter-ideograph;
|
|
word-break: break-all;
|
|
}
|
|
|
|
.item-solt {
|
|
cursor: pointer;
|
|
}
|
|
</style>
|