|
|
@ -1,75 +1,89 @@ |
|
|
|
<template> |
|
|
|
<div class="m-table"> |
|
|
|
<table class="table" |
|
|
|
border="0" |
|
|
|
cellspacing="0" |
|
|
|
cellpadding="0"> |
|
|
|
<col :align="item.align" |
|
|
|
:width="item.width" |
|
|
|
:key="'col' + index" |
|
|
|
v-for="(item, index) in colList" /> |
|
|
|
<table class="table" border="0" cellspacing="0" cellpadding="0"> |
|
|
|
<col |
|
|
|
:align="item.align" |
|
|
|
:width="item.width" |
|
|
|
:key="'col' + index" |
|
|
|
v-for="(item, index) in colList" |
|
|
|
/> |
|
|
|
|
|
|
|
<thead> |
|
|
|
<tr class="table-header"> |
|
|
|
<th class="table-header-th" |
|
|
|
v-for="item in header" |
|
|
|
:key="item"> |
|
|
|
<th class="table-header-th" v-for="item in header" :key="item"> |
|
|
|
{{ item }} |
|
|
|
</th> |
|
|
|
</tr> |
|
|
|
</thead> |
|
|
|
<tbody class="table-body"> |
|
|
|
<tr class="table-body-tr" |
|
|
|
v-for="(value, index) in list" |
|
|
|
:key="index" |
|
|
|
@click="handleClickRow(index)"> |
|
|
|
<td class="td" |
|
|
|
v-for="(item, indexs) in value" |
|
|
|
:key="indexs"> |
|
|
|
<div v-if="typeof item === 'string' || typeof item === 'number'"> |
|
|
|
<tr |
|
|
|
class="table-body-tr" |
|
|
|
v-for="(value, index) in list" |
|
|
|
:key="index" |
|
|
|
@click="handleClickRow(index)" |
|
|
|
> |
|
|
|
<td class="td" v-for="(item, indexs) in value" :key="indexs"> |
|
|
|
<div |
|
|
|
v-if="typeof item === 'string' || typeof item === 'number'" |
|
|
|
:title="item" |
|
|
|
> |
|
|
|
{{ item }} |
|
|
|
</div> |
|
|
|
|
|
|
|
<div v-if="typeof item === 'object'&& item.type === 'img'"> |
|
|
|
<div v-if="typeof item === 'object' && item.type === 'img'"> |
|
|
|
<!-- <span>{{ item.type+ item.src}}</span> --> |
|
|
|
<img style="width:18px;height:18px" |
|
|
|
:src="item.src" |
|
|
|
alt="" /> |
|
|
|
|
|
|
|
<img style="width: 18px; height: 18px" :src="item.src" alt="" /> |
|
|
|
</div> |
|
|
|
<div v-if="typeof item === 'object' && item && item.type == 'index'"> |
|
|
|
<img v-if="highlightTop3 && index == 0" |
|
|
|
src="@/assets/img/shuju/top/1.png" |
|
|
|
alt="" /> |
|
|
|
<img v-else-if="highlightTop3 && index == 1" |
|
|
|
src="@/assets/img/shuju/top/2.png" |
|
|
|
alt="" /> |
|
|
|
<img v-else-if="highlightTop3 && index == 2" |
|
|
|
src="@/assets/img/shuju/top/3.png" |
|
|
|
alt="" /> |
|
|
|
|
|
|
|
<div |
|
|
|
v-if="typeof item === 'object' && item && item.type == 'index'" |
|
|
|
> |
|
|
|
<img |
|
|
|
v-if="highlightTop3 && index == 0" |
|
|
|
src="@/assets/img/shuju/top/1.png" |
|
|
|
alt="" |
|
|
|
/> |
|
|
|
<img |
|
|
|
v-else-if="highlightTop3 && index == 1" |
|
|
|
src="@/assets/img/shuju/top/2.png" |
|
|
|
alt="" |
|
|
|
/> |
|
|
|
<img |
|
|
|
v-else-if="highlightTop3 && index == 2" |
|
|
|
src="@/assets/img/shuju/top/3.png" |
|
|
|
alt="" |
|
|
|
/> |
|
|
|
<span v-else>{{ index + 1 }}</span> |
|
|
|
</div> |
|
|
|
<a v-else-if="typeof item === 'object' && item && item.type == 'operate'" |
|
|
|
v-for="btn in item.list" |
|
|
|
:key="'operate' + index + btn" |
|
|
|
@click="handleClickBtn(index, btn)">{{ btn }}</a> |
|
|
|
<a v-else-if="typeof item === 'object' && item && item.type == 'people'" |
|
|
|
@click="handleClickPeople(item)">{{ item.name }}</a> |
|
|
|
|
|
|
|
<a |
|
|
|
v-else-if=" |
|
|
|
typeof item === 'object' && item && item.type == 'operate' |
|
|
|
" |
|
|
|
v-for="btn in item.list" |
|
|
|
:key="'operate' + index + btn" |
|
|
|
@click="handleClickBtn(index, btn)" |
|
|
|
>{{ btn }}</a |
|
|
|
> |
|
|
|
<a |
|
|
|
v-else-if=" |
|
|
|
typeof item === 'object' && item && item.type == 'people' |
|
|
|
" |
|
|
|
@click="handleClickPeople(item)" |
|
|
|
>{{ item.name }}</a |
|
|
|
> |
|
|
|
</td> |
|
|
|
</tr> |
|
|
|
</tbody> |
|
|
|
</table> |
|
|
|
|
|
|
|
<div class="table-status" |
|
|
|
v-if="loading"> |
|
|
|
<div class="table-status" v-if="loading"> |
|
|
|
<screen-loading>加载中</screen-loading> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div class="table-status" |
|
|
|
v-if="list.length == 0 && !loading"> |
|
|
|
<div class="table-status" v-if="list.length == 0 && !loading"> |
|
|
|
<div class="no-data"> |
|
|
|
<img src="@/assets/img/modules/visual/noData.png" |
|
|
|
class="no-data-img" /> |
|
|
|
<img src="@/assets/img/modules/visual/noData.png" class="no-data-img" /> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
@ -77,7 +91,6 @@ |
|
|
|
|
|
|
|
<script> |
|
|
|
import ScreenLoading from "./loading"; |
|
|
|
import Vue from "vue"; |
|
|
|
|
|
|
|
export default { |
|
|
|
name: "table", |
|
|
@ -138,24 +151,24 @@ export default { |
|
|
|
default: false, |
|
|
|
}, |
|
|
|
}, |
|
|
|
data () { |
|
|
|
data() { |
|
|
|
return {}; |
|
|
|
}, |
|
|
|
watch: {}, |
|
|
|
|
|
|
|
mounted () { }, |
|
|
|
mounted() {}, |
|
|
|
|
|
|
|
created () { }, |
|
|
|
created() {}, |
|
|
|
|
|
|
|
methods: { |
|
|
|
//点击某一行 |
|
|
|
handleClickRow (index) { |
|
|
|
handleClickRow(index) { |
|
|
|
this.$emit("handleClickRow", index); |
|
|
|
}, |
|
|
|
handleClickBtn (index, type) { |
|
|
|
handleClickBtn(index, type) { |
|
|
|
this.$emit("operate", index, type); |
|
|
|
}, |
|
|
|
handleClickPeople (item) { |
|
|
|
handleClickPeople(item) { |
|
|
|
this.$router.push({ |
|
|
|
path: `/main-shuju/visual-basicinfo-people/${item.uid}`, |
|
|
|
}); |
|
|
@ -177,9 +190,10 @@ export default { |
|
|
|
width: 100%; |
|
|
|
height: 50px; |
|
|
|
background: rgba(8, 37, 134, 0.85); |
|
|
|
font-size: 16px; |
|
|
|
font-size: 17px; |
|
|
|
font-weight: 400; |
|
|
|
color: #ffffff; |
|
|
|
line-height: 50px; |
|
|
|
|
|
|
|
&-th { |
|
|
|
text-align: center; |
|
|
@ -191,9 +205,10 @@ export default { |
|
|
|
&-body { |
|
|
|
box-sizing: border-box; |
|
|
|
width: 100%; |
|
|
|
font-size: 16px; |
|
|
|
font-size: 18px; |
|
|
|
font-weight: 400; |
|
|
|
color: #ffffff; |
|
|
|
line-height: 40px; |
|
|
|
|
|
|
|
&-tr { |
|
|
|
box-sizing: border-box; |
|
|
@ -214,7 +229,7 @@ export default { |
|
|
|
} |
|
|
|
|
|
|
|
a { |
|
|
|
font-size: 16px; |
|
|
|
font-size: 18px; |
|
|
|
font-weight: 400; |
|
|
|
color: #e4dc00; |
|
|
|
position: relative; |
|
|
|