114 lines
3.2 KiB
Vue
114 lines
3.2 KiB
Vue
<template>
|
|
<div :class="from" class="list-page">
|
|
<!-- 主页面 -->
|
|
<div class="main-list">
|
|
<div class="main-container">
|
|
<!-- 顶部工具栏 -->
|
|
<div class="top-tools">
|
|
<div class="top-tool-left" style="min-width: 300px">
|
|
<slot name="top-tool-left"></slot>
|
|
<div v-if="showLayout.indexOf('search') > -1" class="top-tool-search margin-r-20">
|
|
<div style="display: flex">
|
|
<el-input v-model="keyWord" size="small" @keyup.enter="onSearch"></el-input>
|
|
<!-- <el-button icon="el-icon-search" @click="onSearch" size="small"></el-button>-->
|
|
<button class="top-tool-btn top-tool-btn--search" style="border-radius: 0 2px 2px 0 !important;" @click="onSearch">
|
|
<i class="el-icon-search"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="top-tool-right">
|
|
<!-- <el-input v-model="keyWord" value="keyWord"></el-input>
|
|
<el-button @click="onSearch" icon="el-icon-search" type="info" size="mini" style="margin-right: 10px"></el-button>-->
|
|
|
|
<slot name="top-tool-right"></slot>
|
|
<div v-if="showLayout.indexOf('elementSet') > -1" class="btn-customize" @click="tools.showCustomTableTitle = true">
|
|
<i class="cn-icon-gear cn-icon icon-gear"></i> <span> {{$t('network.customize')}}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="cn-table">
|
|
<slot></slot>
|
|
</div>
|
|
<div class="cn-pagination">
|
|
<slot name="pagination"></slot>
|
|
</div>
|
|
</div>
|
|
<!-- 自定义table列 -->
|
|
<transition name="el-zoom-in-top">
|
|
<column-customize
|
|
v-if="tools.showCustomTableTitle"
|
|
:tableId="tableId"
|
|
ref="customTableTitle"
|
|
:custom-table-title="customTableTitle"
|
|
:original-table-title="tableTitle"
|
|
@close="tools.showCustomTableTitle = false"
|
|
@update="updateCustomTableTitle"
|
|
></column-customize>
|
|
</transition>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import columnCustomize from '@/components/table/ColumnCustomize'
|
|
import { fromRoute } from '@/utils/constants'
|
|
|
|
export default {
|
|
name: 'cnDataList',
|
|
components: {
|
|
columnCustomize
|
|
},
|
|
props: {
|
|
from: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
tableId: {
|
|
type: String
|
|
},
|
|
tableTitle: {
|
|
type: Array
|
|
},
|
|
customTableTitle: {
|
|
type: Array
|
|
},
|
|
layout: {
|
|
type: Array,
|
|
default () { return [] }
|
|
}
|
|
},
|
|
data () {
|
|
return {
|
|
keyWord: '',
|
|
fromRoute: fromRoute,
|
|
tools: {
|
|
showCustomTableTitle: false // 自定义列弹框是否显示
|
|
},
|
|
showLayout: [],
|
|
loading: true
|
|
}
|
|
},
|
|
methods: {
|
|
updateCustomTableTitle (custom) {
|
|
this.$emit('update:customTableTitle', custom)
|
|
},
|
|
onSearch () {
|
|
const params = {
|
|
q: this.keyWord
|
|
}
|
|
this.$emit('search', params)
|
|
}
|
|
},
|
|
watch: {
|
|
layout: {
|
|
immediate: true,
|
|
deep: true,
|
|
handler (n) {
|
|
this.showLayout = [...n]
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|