<template>
|
<div class="index-container-ty">
|
<a-spin :spinning="loading">
|
<a-row
|
type="flex"
|
justify="start"
|
:gutter="3"
|
>
|
<a-col
|
:sm="24"
|
:lg="12"
|
>
|
<a-card>
|
<div
|
slot="title"
|
class="index-md-title"
|
>
|
<img src="../../assets/daiban.png" />
|
我的待办【{{ dataSource1.length }}】
|
</div>
|
<div slot="extra">
|
<a
|
v-if="dataSource1 && dataSource1.length>0"
|
slot="footer"
|
@click="goPage"
|
>更多 <a-icon type="double-right" /></a>
|
</div>
|
<a-table
|
:class="'my-index-table tytable1'"
|
ref="table1"
|
size="small"
|
rowKey="id"
|
:columns="columns"
|
:dataSource="dataSource1"
|
:pagination="false"
|
>
|
<template
|
slot="ellipsisText"
|
slot-scope="text"
|
>
|
<j-ellipsis
|
:value="text"
|
:length="textMaxLength"
|
></j-ellipsis>
|
</template>
|
|
<template
|
slot="dayWarnning"
|
slot-scope="text,record"
|
>
|
<a-icon
|
type="bulb"
|
theme="twoTone"
|
style="font-size:22px"
|
:twoToneColor="getTipColor(record)"
|
/>
|
</template>
|
|
<span
|
slot="action"
|
slot-scope="text, record"
|
>
|
<a @click="handleData">办理</a>
|
</span>
|
|
</a-table>
|
</a-card>
|
</a-col>
|
|
<a-col
|
:sm="24"
|
:lg="12"
|
>
|
<a-card>
|
<div
|
slot="title"
|
class="index-md-title"
|
>
|
<img src="../../assets/zaiban.png" />
|
我的在办【{{ dataSource2.length }}】
|
</div>
|
<div slot="extra">
|
<a
|
v-if="dataSource2 && dataSource2.length>0"
|
slot="footer"
|
@click="goPage"
|
>更多 <a-icon type="double-right" /></a>
|
</div>
|
<a-table
|
:class="'my-index-table tytable2'"
|
ref="table2"
|
size="small"
|
rowKey="id"
|
:columns="columns"
|
:dataSource="dataSource2"
|
:pagination="false"
|
>
|
<template
|
slot="ellipsisText"
|
slot-scope="text"
|
>
|
<j-ellipsis
|
:value="text"
|
:length="textMaxLength"
|
></j-ellipsis>
|
</template>
|
|
<template
|
slot="dayWarnning"
|
slot-scope="text,record"
|
>
|
<a-icon
|
type="bulb"
|
theme="twoTone"
|
style="font-size:22px"
|
:twoToneColor="getTipColor(record)"
|
/>
|
</template>
|
|
<span
|
slot="action"
|
slot-scope="text, record"
|
>
|
<a @click="handleData">办理</a>
|
</span>
|
|
</a-table>
|
</a-card>
|
</a-col>
|
|
<a-col :span="24">
|
<div style="height: 5px;"></div>
|
</a-col>
|
|
<a-col
|
:sm="24"
|
:lg="12"
|
>
|
<a-card>
|
<div
|
slot="title"
|
class="index-md-title"
|
>
|
<img src="../../assets/guaz.png" />
|
我的挂账【{{ dataSource4.length }}】
|
</div>
|
<a-table
|
:class="'my-index-table tytable4'"
|
ref="table4"
|
size="small"
|
rowKey="id"
|
:columns="columns"
|
:dataSource="dataSource4"
|
:pagination="false"
|
>
|
<template
|
slot="ellipsisText"
|
slot-scope="text"
|
>
|
<j-ellipsis
|
:value="text"
|
:length="textMaxLength"
|
></j-ellipsis>
|
</template>
|
|
<template
|
slot="dayWarnning"
|
slot-scope="text,record"
|
>
|
<a-icon
|
type="bulb"
|
theme="twoTone"
|
style="font-size:22px"
|
:twoToneColor="getTipColor(record)"
|
/>
|
</template>
|
|
<span
|
slot="action"
|
slot-scope="text, record"
|
>
|
<a @click="handleData">办理</a>
|
</span>
|
|
</a-table>
|
</a-card>
|
</a-col>
|
|
<a-col
|
:sm="24"
|
:lg="12"
|
>
|
<a-card>
|
<div
|
slot="title"
|
class="index-md-title"
|
>
|
<img src="../../assets/duban.png" />
|
我的督办【{{ dataSource3.length }}】
|
</div>
|
<a-table
|
:class="'my-index-table tytable3'"
|
ref="table3"
|
size="small"
|
rowKey="id"
|
:columns="columns"
|
:dataSource="dataSource3"
|
:pagination="false"
|
>
|
<template
|
slot="ellipsisText"
|
slot-scope="text"
|
>
|
<j-ellipsis
|
:value="text"
|
:length="textMaxLength"
|
></j-ellipsis>
|
</template>
|
|
<template
|
slot="dayWarnning"
|
slot-scope="text,record"
|
>
|
<a-icon
|
type="bulb"
|
theme="twoTone"
|
style="font-size:22px"
|
:twoToneColor="getTipColor(record)"
|
/>
|
</template>
|
|
<span
|
slot="action"
|
slot-scope="text, record"
|
>
|
<a @click="handleData">办理</a>
|
</span>
|
|
</a-table>
|
</a-card>
|
</a-col>
|
|
</a-row>
|
</a-spin>
|
|
</div>
|
</template>
|
|
<script>
|
import noDataPng from '@/assets/nodata.png'
|
import JEllipsis from '@/components/jeecg/JEllipsis'
|
|
const tempSs1 = [{
|
id: "001",
|
orderNo: "电[1]1267102",
|
orderTitle: "药品出问题了",
|
restDay: 1
|
}, {
|
id: "002",
|
orderNo: "电[4]5967102",
|
orderTitle: "吃了xxx医院的药，病情越来越严重",
|
restDay: 0
|
}, {
|
id: "003",
|
orderNo: "电[3]5988987",
|
orderTitle: "今天去超市买鸡蛋，鸡蛋都是坏的",
|
restDay: 7
|
}, {
|
id: "004",
|
orderNo: "电[2]5213491",
|
orderTitle: "xx宝实体店高价售卖xx",
|
restDay: 5
|
}, {
|
id: "005",
|
orderNo: "电[1]1603491",
|
orderTitle: "以红利相诱，答应退保后扣一年费用",
|
restDay: 0
|
}]
|
|
const tempSs2 = [{
|
id: "001",
|
orderTitle: "我要投诉这个大超市",
|
orderNo: "电[1]10299456",
|
restDay: 6
|
}, {
|
id: "002",
|
orderTitle: "xxx医院乱开药方,售卖假药",
|
orderNo: "电[2]20235691",
|
restDay: 0
|
}, {
|
id: "003",
|
orderTitle: "我想问问这家店是干啥的",
|
orderNo: "电[3]495867322",
|
restDay: 7
|
}, {
|
id: "004",
|
orderTitle: "我要举报朝阳区奥森公园酒店",
|
orderNo: "电[2]1193849",
|
restDay: 3
|
}, {
|
id: "005",
|
orderTitle: "我今天吃饭吃到一个石头子",
|
orderNo: "电[4]56782344",
|
restDay: 9
|
}]
|
|
//4-7天
|
const tip_green = "rgba(0, 255, 0, 1)"
|
//1-3天
|
const tip_yellow = "rgba(255, 255, 0, 1)"
|
//超期
|
const tip_red = "rgba(255, 0, 0, 1)"
|
|
export default {
|
name: "IndexTask",
|
components: { JEllipsis },
|
data() {
|
return {
|
loading: false,
|
textMaxLength: 8,
|
dataSource1: [],
|
dataSource2: [],
|
dataSource3: [],
|
dataSource4: [],
|
columns: [
|
{
|
title: '',
|
dataIndex: '',
|
key: 'rowIndex',
|
width: 50,
|
fixed: 'left',
|
align: "center",
|
scopedSlots: { customRender: "dayWarnning" }
|
},
|
{
|
title: '剩余天数',
|
align: "center",
|
dataIndex: 'restDay',
|
width: 80
|
},
|
{
|
title: '工单标题',
|
align: "center",
|
dataIndex: 'orderTitle',
|
scopedSlots: { customRender: "ellipsisText" }
|
},
|
{
|
title: '工单编号',
|
align: "center",
|
dataIndex: 'orderNo',
|
},
|
{
|
title: '操作',
|
dataIndex: 'action',
|
align: "center",
|
scopedSlots: { customRender: 'action' }
|
}
|
]
|
|
}
|
},
|
created() {
|
this.mock();
|
},
|
mounted() {
|
|
},
|
methods: {
|
getTipColor(rd) {
|
let num = rd.restDay
|
if (num <= 0) {
|
return tip_red
|
} else if (num >= 1 && num < 4) {
|
return tip_yellow
|
} else if (num >= 4) {
|
return tip_green
|
}
|
},
|
goPage() {
|
this.$message.success("请根据具体业务跳转页面")
|
//this.$router.push({ path: '/comp/mytask' })
|
},
|
mock() {
|
this.dataSource1 = tempSs1
|
this.dataSource2 = tempSs2
|
this.dataSource3 = tempSs1
|
this.dataSource4 = []
|
this.ifNullDataSource(this.dataSource4, '.tytable4')
|
},
|
|
ifNullDataSource(ds, tb) {
|
this.$nextTick(() => {
|
if (!ds || ds.length == 0) {
|
var tmp = document.createElement('img');
|
tmp.src = noDataPng
|
tmp.width = 300
|
let tbclass = `${tb} .ant-table-placeholder`
|
document.querySelector(tbclass).innerHTML = ""
|
document.querySelector(tbclass).appendChild(tmp)
|
}
|
})
|
},
|
handleData() {
|
this.$message.success("办理完成")
|
}
|
|
|
|
|
}
|
}
|
</script>
|
|
<style>
|
.my-index-table {
|
height: 270px;
|
}
|
.my-index-table table {
|
font-size: 14px !important;
|
}
|
|
.index-container-ty .ant-card-head-title {
|
padding-top: 6px;
|
padding-bottom: 6px;
|
}
|
.index-container-ty .ant-card-extra {
|
padding: 0;
|
}
|
.index-container-ty .ant-card-extra a {
|
color: #fff;
|
}
|
.index-container-ty .ant-card-extra a:hover {
|
color: #152ede;
|
}
|
.index-container-ty .ant-card-head-wrapper,
|
.index-container-ty .ant-card-head {
|
line-height: 24px;
|
min-height: 24px;
|
/*background: #90aeff;*/
|
background: #7196fb;
|
}
|
.index-container-ty .ant-card-body {
|
padding: 10px 12px 0px 12px;
|
}
|
|
/* .index-container-ty .ant-card-actions{background: #fff}
|
.index-container-ty .ant-card-actions li {margin:2px 0;}
|
.index-container-ty .ant-card-actions > li > span{width: 100%}*/
|
|
.index-container-ty .ant-table-footer {
|
text-align: right;
|
padding: 6px 12px 6px 6px;
|
background: #fff;
|
border-top: 2px solid #f7f1f1;
|
}
|
|
.index-md-title {
|
postion: relative;
|
padding-left: 24px;
|
width: 100%;
|
color: #fff;
|
font-size: 21px;
|
font-family: cursive;
|
}
|
.index-md-title img {
|
position: absolute;
|
height: 32px;
|
top: 2px;
|
left: 14px;
|
}
|
|
.index-container-ty .ant-card-body {
|
/*border-left:1px solid #90aeff;
|
/*border-right:1px solid #90aeff;
|
border-bottom:1px solid #90aeff;*/
|
}
|
|
.index-container-ty .ant-table-thead > tr > th,
|
.index-container-ty .ant-table-tbody > tr > td {
|
border-bottom: 1px solid #90aeff;
|
}
|
|
.index-container-ty
|
.ant-table-small
|
> .ant-table-content
|
> .ant-table-fixed-left
|
> .ant-table-body-outer
|
> .ant-table-body-inner
|
> table
|
> .ant-table-thead
|
> tr
|
> th,
|
.index-container-ty
|
.ant-table-small
|
> .ant-table-content
|
> .ant-table-fixed-right
|
> .ant-table-body-outer
|
> .ant-table-body-inner
|
> table
|
> .ant-table-thead
|
> tr
|
> th {
|
border-bottom: 1px solid #90aeff;
|
}
|
|
.index-container-ty
|
.ant-table-small
|
> .ant-table-content
|
> .ant-table-scroll
|
> .ant-table-body
|
> table
|
> .ant-table-thead
|
> tr
|
> th {
|
border-bottom: 1px solid #90aeff;
|
}
|
|
.index-container-ty .ant-table-small {
|
border: 1px solid #90aeff;
|
}
|
|
.index-container-ty .ant-table-placeholder {
|
padding: 0;
|
}
|
</style>
|
