<template>
|
<div>
|
<!--工具条-->
|
<div class="table-tool-bar">
|
<!--自定义工具-->
|
<my-button-v2
|
v-for="(custom,idx) in myTable.tools.custom"
|
:key="idx"
|
:check-permission="custom.checkPermission"
|
:name="custom.name"
|
site="tools"
|
@click="custom.click"
|
/>
|
</div>
|
<!--table列表-->
|
<el-row :gutter="20" style="margin: 10px 0;">
|
<el-col v-for="(item,index) in myTable.rows" :key="index" :span="4">
|
<div>
|
<!-- 弹出框 -->
|
<el-popover placement="right" width="190" trigger="hover" transition="none">
|
<ul>
|
<li>
|
姓名：
|
<span>{{ item.name }}</span>
|
</li>
|
<li>
|
职务：
|
<span>{{ item.duties }}</span>
|
</li>
|
<li>
|
职称：
|
<span>{{ item.title }}</span>
|
</li>
|
<li>
|
手机号：
|
<span>{{ item.tel }}</span>
|
</li>
|
</ul>
|
<!-- 测试图片 -->
|
<img v-if="item.sex===2" slot="reference" :src="item.photo ? getImagePath(item.photo) : womanHeadSculpture" class="image" @click="clickInfo(item)">
|
<img v-else slot="reference" :src="item.photo ? getImagePath(item.photo) : manHeadSculpture" class="image" @click="clickInfo(item)">
|
</el-popover>
|
<div style="padding: 10px 5px;">
|
<span>{{ item.name }}({{ item.duties }})</span>
|
<div class="bottom clearfix">
|
<!-- 操作按钮部分 -->
|
<div class="operation">
|
<template v-for="(custom,idx) in myTable.operation.attr">
|
<my-button-v2
|
:key="idx"
|
:name="custom.title"
|
site="operation"
|
@click="custom.events(item)"
|
/>
|
</template>
|
|
<template v-if="myTable.operation.more && myTable.operation.more.length>0">
|
<a-dropdown
|
:trigger="['hover','click']"
|
:overlay-style="{'z-index':'999999!important'}"
|
>
|
<a-button style="margin-left: 8px" size="small">
|
更多
|
<a-icon type="down" />
|
</a-button>
|
<a-menu slot="overlay">
|
<template v-for="(m,i) in myTable.operation.more">
|
<a-menu-item :key="i" @click="m.events(item)">
|
<my-button-v2 :name="m.title" :check-permission="m.checkPermission" />
|
</a-menu-item>
|
</template>
|
</a-menu>
|
</a-dropdown>
|
</template>
|
|
</div>
|
</div>
|
</div>
|
</div>
|
</el-col>
|
</el-row>
|
<el-pagination
|
:current-page="myTable.paging.page.pageNumber"
|
:page-size="myTable.paging.page.pageSize"
|
:page-sizes="[24, 24*2 ,24*5,24*10]"
|
:small="myTable.paging.page.small"
|
:total="myTable.paging.page.total"
|
layout="total, sizes, prev, pager, next, jumper"
|
@current-change="handleCurrentChange"
|
@size-change="handleSizeChange"
|
/>
|
</div>
|
</template>
|
|
<script>
|
import request from '@/utils/request'
|
import myButtonV2 from '@/views/components/myButtonV2'
|
import { str2Array } from '@/utils/tools'
|
import femaleImg from '@/assets/images/staff-female.jpg'
|
import maleImg from '@/assets/images/staff-male.jpg'
|
export default {
|
components: { myButtonV2 },
|
props: {
|
table: {
|
type: Object,
|
default() {
|
return null
|
}
|
},
|
filter: {
|
type: Object,
|
default() {
|
return null
|
}
|
}
|
},
|
data() {
|
return {
|
/** table列表数据*/
|
myTable: {
|
url: '',
|
// 工具条
|
tools: {
|
custom: []
|
},
|
rows: [],
|
operation: {
|
attr: [], // 操作
|
more: [] // 更多
|
},
|
paging: {
|
show: true, // 显示分页
|
// 分页信息
|
page: {
|
small: false,
|
pageNumber: 1,
|
pageSize: 24,
|
total: 0
|
}
|
}
|
},
|
// 用户为男性的头像
|
manHeadSculpture: maleImg,
|
// 用户为女性的头像
|
womanHeadSculpture: femaleImg
|
}
|
},
|
created() {
|
if (this.table != null) {
|
Object.assign(this.myTable, this.table)
|
if (this.myTable.paging.page == undefined) {
|
this.$set(this.myTable.paging, 'page', {
|
small: false,
|
pageNumber: 1,
|
pageSize: 10,
|
total: 0
|
})
|
}
|
this.$nextTick(() => {
|
this.search({})
|
})
|
}
|
},
|
methods: {
|
search(param) {
|
this.$nextTick(() => {
|
this.myTable.loading = true
|
const params = Object.assign({}, this.filter)
|
params.pageSize = this.myTable.paging.page.pageSize
|
if (param && param.pageNumber) {
|
this.myTable.paging.page.pageNumber = param.pageNumber
|
}
|
params.pageNumber = this.myTable.paging.page.pageNumber
|
request({
|
url: this.myTable.url,
|
method: 'get',
|
params: params
|
}).then(res => {
|
this.$set(this.myTable, 'rows', res.data.rows)
|
this.$set(
|
this.myTable.paging,
|
'page',
|
Object.assign(this.myTable.paging.page, {
|
pageSize: res.data.pageSize,
|
pageNumber: res.data.pageNumber,
|
total: res.data.total
|
})
|
)
|
this.myTable.loading = false
|
})
|
})
|
},
|
/*
|
* @Author : liu.q [916000612@qq.com]
|
* @Date : 2019-07-17 14:22
|
* @Description :切换pageSize
|
*/
|
handleSizeChange(pageSize) {
|
this.myTable.paging.page.pageSize = pageSize
|
this.search({ pageNumber: 1 })
|
},
|
/*
|
* @Author : liu.q [916000612@qq.com]
|
* @Date : 2019-07-17 14:22
|
* @Description :切换pageNumber
|
*/
|
handleCurrentChange(pageNumber) {
|
this.myTable.paging.page.pageNumber = pageNumber
|
this.search()
|
},
|
getImagePath(str) {
|
const strArray = str2Array(str)
|
return globalConf.ftpUrl + strArray[0].path
|
},
|
clickInfo(params) {
|
this.$emit('clickInfo', params)
|
}
|
}
|
}
|
</script>
|
|
<style scoped>
|
/*详情表单*/
|
.demo-table-expand .el-form-item {
|
width: 100%;
|
}
|
.el-col-4 {
|
margin: 10px 0;
|
}
|
.el-col-4 > div {
|
border: 1px solid rgb(242, 242, 242);
|
}
|
.table-tool-bar {
|
text-align: left;
|
}
|
/* 列表块 */
|
.grid-content bg-purple {
|
text-align: center;
|
}
|
.el-card__body img {
|
width: 80%;
|
margin-top: 10px;
|
}
|
.el-card__body > div {
|
text-align: center;
|
font-size: 16px;
|
}
|
/* 操作按钮区域 */
|
.operation .el-button--mini:nth-of-type(1) {
|
margin-left: 10px;
|
}
|
.operation .el-button--mini {
|
padding: 2px 5px;
|
margin-left: 5px;
|
}
|
.ant-dropdown-trigger{
|
margin-left: 2px!important;
|
}
|
.ant-dropdown-menu-item .el-button--mini{
|
padding: 2px 7px!important;
|
}
|
/* 弹出层样式 */
|
.el-popover ul {
|
list-style: none;
|
margin: 0;
|
padding-left: 10px;
|
}
|
.el-popover ul li {
|
color: rgb(51, 51, 51);
|
font-size: 13px;
|
margin-bottom: 20px;
|
}
|
.el-popover ul li:last-of-type {
|
margin-bottom: 0;
|
}
|
/*列表内文字过长加省略*/
|
.content-text {
|
overflow: hidden;
|
text-overflow: ellipsis;
|
white-space: nowrap;
|
}
|
|
/*分页上边距*/
|
.el-pagination {
|
white-space: nowrap;
|
padding: 2px 5px;
|
color: #303133;
|
font-weight: 700;
|
margin-top: 10px;
|
}
|
.el-radio {
|
margin-right: 10px;
|
}
|
.el-radio__label {
|
font-size: 14px;
|
padding-left: 2px !important;
|
}
|
|
.a-button-cus {
|
font-size: 12px;
|
}
|
.ant-btn-sm {
|
padding: 0px 7px;
|
font-size: 12px;
|
border-radius: 3px;
|
height: 20px;
|
}
|
.ant-btn > .anticon + span,
|
.ant-btn > span + .anticon {
|
margin-left: unset;
|
}
|
.ant-dropdown {
|
z-index: 9999 !important;
|
}
|
</style>
|
