第一次提交
This commit is contained in:
@@ -0,0 +1,422 @@
|
||||
<template>
|
||||
<div class="index-container-ty">
|
||||
<a-row type="flex" justify="start" :gutter="3">
|
||||
<a-col :sm="24" :lg="12">
|
||||
<a-card>
|
||||
<template #title>
|
||||
<div class="index-md-title">
|
||||
<img src="../../../../assets/images/daiban.png" />
|
||||
我的待办【{{ dataSource1.length }}】
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template v-if="dataSource1 && dataSource1.length > 0" #extra>
|
||||
<a @click="goPage"
|
||||
>更多
|
||||
<Icon icon="ant-design:double-right-outlined" />
|
||||
</a>
|
||||
</template>
|
||||
|
||||
<a-table
|
||||
:class="'my-index-table tytable1'"
|
||||
ref="table1"
|
||||
size="small"
|
||||
rowKey="id"
|
||||
:columns="columns"
|
||||
:dataSource="dataSource1"
|
||||
:pagination="false"
|
||||
>
|
||||
<template #ellipsisText="{ text }">
|
||||
<JEllipsis :value="text" :length="textMaxLength"></JEllipsis>
|
||||
</template>
|
||||
|
||||
<template #dayWarnning="{ text, record }">
|
||||
<BellTwoTone style="font-size: 22px" :twoToneColor="getTipColor(record)" />
|
||||
</template>
|
||||
|
||||
<template #action="{ text, record }">
|
||||
<a @click="handleData">办理</a>
|
||||
</template>
|
||||
</a-table>
|
||||
</a-card>
|
||||
</a-col>
|
||||
|
||||
<a-col :sm="24" :lg="12">
|
||||
<a-card>
|
||||
<template #title>
|
||||
<div class="index-md-title">
|
||||
<img src="../../../../assets/images/zaiban.png" />
|
||||
我的在办【{{ dataSource2.length }}】
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template v-if="dataSource2 && dataSource2.length > 0" #extra>
|
||||
<a @click="goPage"
|
||||
>更多
|
||||
<Icon icon="ant-design:double-right-outlined" />
|
||||
</a>
|
||||
</template>
|
||||
|
||||
<a-table
|
||||
:class="'my-index-table tytable2'"
|
||||
ref="table1"
|
||||
size="small"
|
||||
rowKey="id"
|
||||
:columns="columns"
|
||||
:dataSource="dataSource2"
|
||||
:pagination="false"
|
||||
>
|
||||
<template #ellipsisText="{ text }">
|
||||
<JEllipsis :value="text" :length="textMaxLength"></JEllipsis>
|
||||
</template>
|
||||
|
||||
<template #dayWarnning="{ text, record }">
|
||||
<BellTwoTone style="font-size: 22px" :twoToneColor="getTipColor(record)" />
|
||||
</template>
|
||||
|
||||
<template #action="{ text, record }">
|
||||
<a @click="handleData">办理</a>
|
||||
</template>
|
||||
</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>
|
||||
<template #title>
|
||||
<div class="index-md-title">
|
||||
<img src="../../../../assets/images/guaz.png" />
|
||||
我的挂账【{{ dataSource4.length }}】
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<a-table
|
||||
:class="'my-index-table tytable4'"
|
||||
ref="table1"
|
||||
size="small"
|
||||
rowKey="id"
|
||||
:columns="columns"
|
||||
:dataSource="dataSource4"
|
||||
:pagination="false"
|
||||
>
|
||||
<template #ellipsisText="{ text }">
|
||||
<JEllipsis :value="text" :length="textMaxLength"></JEllipsis>
|
||||
</template>
|
||||
|
||||
<template #dayWarnning="{ text, record }">
|
||||
<BellTwoTone style="font-size: 22px" :twoToneColor="getTipColor(record)" />
|
||||
</template>
|
||||
|
||||
<template #action="{ text, record }">
|
||||
<a @click="handleData">办理</a>
|
||||
</template>
|
||||
</a-table>
|
||||
</a-card>
|
||||
</a-col>
|
||||
|
||||
<a-col :sm="24" :lg="12">
|
||||
<a-card>
|
||||
<template #title>
|
||||
<div class="index-md-title">
|
||||
<img src="../../../../assets/images/duban.png" />
|
||||
我的督办【{{ dataSource3.length }}】
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<a-table
|
||||
:class="'my-index-table tytable3'"
|
||||
ref="table1"
|
||||
size="small"
|
||||
rowKey="id"
|
||||
:columns="columns"
|
||||
:dataSource="dataSource3"
|
||||
:pagination="false"
|
||||
>
|
||||
<template #ellipsisText="{ text }">
|
||||
<JEllipsis :value="text" :length="textMaxLength"></JEllipsis>
|
||||
</template>
|
||||
|
||||
<template #dayWarnning="{ text, record }">
|
||||
<BellTwoTone style="font-size: 22px" :twoToneColor="getTipColor(record)" />
|
||||
</template>
|
||||
|
||||
<template #action="{ text, record }">
|
||||
<a @click="handleData">办理</a>
|
||||
</template>
|
||||
</a-table>
|
||||
</a-card>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref } from 'vue';
|
||||
import noDataPng from '/@/assets/images/nodata.png';
|
||||
import { useMessage } from '/@/hooks/web/useMessage';
|
||||
import JEllipsis from '/@/components/Form/src/jeecg/components/JEllipsis.vue';
|
||||
import { BulbTwoTone, BellTwoTone } from '@ant-design/icons-vue';
|
||||
|
||||
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)';
|
||||
|
||||
const textMaxLength = 8;
|
||||
const $message = useMessage();
|
||||
|
||||
const dataSource1 = ref([]);
|
||||
const dataSource2 = ref([]);
|
||||
const dataSource3 = ref([]);
|
||||
const dataSource4 = ref([]);
|
||||
const columns = [
|
||||
{
|
||||
title: '',
|
||||
dataIndex: '',
|
||||
key: 'rowIndex',
|
||||
width: 50,
|
||||
fixed: 'left',
|
||||
align: 'center',
|
||||
slots: { customRender: 'dayWarnning' },
|
||||
},
|
||||
{
|
||||
title: '剩余天数',
|
||||
align: 'center',
|
||||
dataIndex: 'restDay',
|
||||
width: 80,
|
||||
},
|
||||
{
|
||||
title: '工单标题',
|
||||
align: 'center',
|
||||
dataIndex: 'orderTitle',
|
||||
slots: { customRender: 'ellipsisText' },
|
||||
},
|
||||
{
|
||||
title: '工单编号',
|
||||
align: 'center',
|
||||
dataIndex: 'orderNo',
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
dataIndex: 'action',
|
||||
align: 'center',
|
||||
slots: { customRender: 'action' },
|
||||
},
|
||||
];
|
||||
|
||||
function 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;
|
||||
}
|
||||
}
|
||||
|
||||
function mock() {
|
||||
dataSource1.value = tempSs1;
|
||||
dataSource2.value = tempSs2;
|
||||
dataSource3.value = tempSs1;
|
||||
dataSource4.value = tempSs2;
|
||||
ifNullDataSource(dataSource4, '.tytable4');
|
||||
}
|
||||
|
||||
function ifNullDataSource(ds, tb) {
|
||||
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);
|
||||
}
|
||||
}
|
||||
|
||||
function handleData() {
|
||||
$message.createMessage.success('办理完成');
|
||||
}
|
||||
|
||||
function goPage() {
|
||||
$message.createMessage.success('请根据具体业务跳转页面');
|
||||
}
|
||||
|
||||
mock();
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.my-index-table {
|
||||
height: 270px;
|
||||
|
||||
table {
|
||||
font-size: 14px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.index-container-ty {
|
||||
margin: 12px 12px 0;
|
||||
|
||||
:deep(.ant-card-body) {
|
||||
padding: 10px 12px 0 12px;
|
||||
}
|
||||
|
||||
:deep(.ant-card-head) {
|
||||
line-height: 24px;
|
||||
min-height: 24px;
|
||||
background: #7196fb !important;
|
||||
|
||||
.ant-card-head-title {
|
||||
padding-top: 6px;
|
||||
padding-bottom: 6px;
|
||||
}
|
||||
|
||||
.ant-card-extra {
|
||||
padding: 0;
|
||||
|
||||
a {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: #152ede;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.ant-table-footer) {
|
||||
text-align: right;
|
||||
padding: 6px 12px 6px 6px;
|
||||
background: #fff;
|
||||
border-top: 2px solid #f7f1f1;
|
||||
}
|
||||
|
||||
.index-md-title {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
color: #fff;
|
||||
font-size: 21px;
|
||||
font-family: cursive;
|
||||
padding-left: 25px;
|
||||
|
||||
img {
|
||||
position: absolute;
|
||||
height: 25px;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.ant-table-thead > tr > th),
|
||||
:deep(.ant-table-tbody > tr > td) {
|
||||
border-bottom: 1px solid #90aeff;
|
||||
}
|
||||
|
||||
:deep(
|
||||
.ant-table-small
|
||||
> .ant-table-content
|
||||
> .ant-table-fixed-left
|
||||
> .ant-table-body-outer
|
||||
> .ant-table-body-inner
|
||||
> table
|
||||
> .ant-table-thead
|
||||
> tr
|
||||
> th),
|
||||
:deep(
|
||||
.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;
|
||||
}
|
||||
|
||||
:deep(.ant-table-small > .ant-table-content > .ant-table-scroll > .ant-table-body > table > .ant-table-thead > tr > th) {
|
||||
border-bottom: 1px solid #90aeff;
|
||||
}
|
||||
|
||||
:deep(.ant-table-small) {
|
||||
border: 1px solid #90aeff;
|
||||
}
|
||||
|
||||
:deep(.ant-table-placeholder) {
|
||||
padding: 0;
|
||||
height: 215px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user