You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
278 lines
7.8 KiB
278 lines
7.8 KiB
2 years ago
|
<template>
|
||
|
|
<el-card id="todo-card" class="box-card" shadow="hover">
|
||
|
|
<div slot="header" class="clearfix">
|
||
|
|
<SvgIcon style="color: #3171f4;width: 22px;height: 22px;" icon-class="notice" />
|
||
|
|
<span
|
||
|
|
style="padding-left: 15px"
|
||
|
|
>待办事项</span>
|
||
|
|
<i class="el-icon-more" style="margin-left: auto; font-size: 20px" />
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div style="position: relative;height: 100%;width: 100%;">
|
||
|
|
<div style="position: absolute;top: 0;left: 0;right: 0;bottom: 0;">
|
||
|
|
<Table
|
||
|
|
:show-header="false"
|
||
|
|
:height="tableHeight"
|
||
|
|
:loading="loading"
|
||
|
|
size="small"
|
||
|
|
:data="/^\/system/.test(this.$route.path) ? example : list"
|
||
|
|
:columns="table"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</el-card>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import SvgIcon from '@/components/SvgIcon/index.vue'
|
||
|
|
import ElementResize from 'element-resize-detector'
|
||
|
|
|
||
|
|
export default {
|
||
|
|
name: 'Card2',
|
||
|
|
components: {
|
||
|
|
SvgIcon
|
||
|
|
},
|
||
|
|
layout: {
|
||
|
|
x: 4,
|
||
|
|
y: 0,
|
||
|
|
w: 6,
|
||
|
|
h: 4,
|
||
|
|
i: '2',
|
||
|
|
name: '待办事项'
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
window: {
|
||
|
|
width: 0,
|
||
|
|
height: 0,
|
||
|
|
top: 0,
|
||
|
|
left: 0
|
||
|
|
},
|
||
|
|
example: [
|
||
|
|
{
|
||
|
|
type: 1,
|
||
|
|
content: '示例1',
|
||
|
|
created_at: this.$moment().format('YYYY-MM-DD HH:mm:ss'),
|
||
|
|
read_count: true
|
||
|
|
},
|
||
|
|
{
|
||
|
|
type: 2,
|
||
|
|
content: '示例2',
|
||
|
|
created_at: this.$moment().format('YYYY-MM-DD HH:mm:ss'),
|
||
|
|
read_count: false
|
||
|
|
}
|
||
|
|
],
|
||
|
|
select: {
|
||
|
|
page: 1,
|
||
|
|
page_size: 10
|
||
|
|
},
|
||
|
|
tableHeight: 120,
|
||
|
|
loading: false,
|
||
|
|
list: [],
|
||
|
|
total: 0,
|
||
|
|
table: [
|
||
|
|
{
|
||
|
|
type: 'index',
|
||
|
|
title: ' ',
|
||
|
|
align: 'center',
|
||
|
|
width: 46
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: '收件时间',
|
||
|
|
key: 'created_at',
|
||
|
|
width: 160,
|
||
|
|
align: 'center',
|
||
|
|
render: (h, { row }) => {
|
||
|
|
return h('span', { style: { color: '#4d8bdc' }}, this.$moment(row.created_at).format('YYYY-MM-DD HH:mm:ss'))
|
||
|
|
}
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: '内容',
|
||
|
|
key: 'title',
|
||
|
|
align: 'left',
|
||
|
|
ellipsis: true,
|
||
|
|
tooltip: true,
|
||
|
|
minWidth: 200
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: '查看',
|
||
|
|
key: 'show',
|
||
|
|
width: 180,
|
||
|
|
render: (h, { row }) => {
|
||
|
|
return h('div', [
|
||
|
|
h(
|
||
|
|
'Button',
|
||
|
|
{
|
||
|
|
props: {
|
||
|
|
type: 'default',
|
||
|
|
size: 'small'
|
||
|
|
},
|
||
|
|
style: {
|
||
|
|
background: '#f0f3fa',
|
||
|
|
color: '#333',
|
||
|
|
border: '1px solid #dae1f0',
|
||
|
|
fontSize: '13px'
|
||
|
|
},
|
||
|
|
on: {
|
||
|
|
'click': (_) => {
|
||
|
|
if (row.from_type === 'contract') {
|
||
|
|
this.$router.push({
|
||
|
|
path: '/contract/contract/contractList',
|
||
|
|
query: {
|
||
|
|
keyword: /\[(.*?)\]/.exec(row.title) ? /\[(.*?)\]/.exec(row.title)[1] : ''
|
||
|
|
}
|
||
|
|
})
|
||
|
|
} else {
|
||
|
|
window.open(
|
||
|
|
`${process.env.VUE_APP_OUT_OLD}/flow/view/${row.id}?auth_token=${this.$store.getters.oa_token}`,
|
||
|
|
'edit',
|
||
|
|
`top=${this.window.top},left=${this.window.left},width=${this.window.width},height=${this.window.height},location=0`
|
||
|
|
)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
'查看'
|
||
|
|
),
|
||
|
|
h(
|
||
|
|
'Button',
|
||
|
|
{
|
||
|
|
props: {
|
||
|
|
type: 'primary',
|
||
|
|
size: 'small'
|
||
|
|
},
|
||
|
|
style: {
|
||
|
|
'margin-left': '6px',
|
||
|
|
fontSize: '13px'
|
||
|
|
},
|
||
|
|
on: {
|
||
|
|
'click': (_) => {
|
||
|
|
if (row.from_type === 'contract') {
|
||
|
|
const toUrl = this.$router.resolve({
|
||
|
|
path: '/contract/contract/contractList',
|
||
|
|
query: {
|
||
|
|
keyword: /\[(.*?)\]/.exec(row.title) ? /\[(.*?)\]/.exec(row.title)[1] : ''
|
||
|
|
}
|
||
|
|
})
|
||
|
|
window.open(
|
||
|
|
toUrl.href,
|
||
|
|
'edit',
|
||
|
|
`top=${this.window.top},left=${this.window.left},width=${this.window.width},height=${this.window.height},location=0`
|
||
|
|
)
|
||
|
|
} else {
|
||
|
|
window.open(
|
||
|
|
`${process.env.VUE_APP_OUT_OLD}/flow/deal/${row.id}?auth_token=${this.$store.getters.oa_token}`,
|
||
|
|
'edit',
|
||
|
|
`top=${this.window.top},left=${this.window.left},width=${this.window.width},height=${this.window.height},location=0`
|
||
|
|
)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
'办理'
|
||
|
|
)
|
||
|
|
])
|
||
|
|
}
|
||
|
|
}
|
||
|
|
// {
|
||
|
|
// title: "状态",
|
||
|
|
// key: "read_count",
|
||
|
|
// width: 120,
|
||
|
|
// render: (h, { row }) => {
|
||
|
|
// return row.read_count
|
||
|
|
// ? h(
|
||
|
|
// "el-link",
|
||
|
|
// {
|
||
|
|
// props: {
|
||
|
|
// type: "success",
|
||
|
|
// underline: false,
|
||
|
|
// },
|
||
|
|
// },
|
||
|
|
// "已读"
|
||
|
|
// )
|
||
|
|
// : h(
|
||
|
|
// "Button",
|
||
|
|
// {
|
||
|
|
// props: {
|
||
|
|
// type: "error",
|
||
|
|
// size: "small",
|
||
|
|
// ghost: true
|
||
|
|
// },
|
||
|
|
// on: {
|
||
|
|
// ['click']:e => {
|
||
|
|
// if(/^\/system/.test(this.$route.path)) return
|
||
|
|
//
|
||
|
|
// readNotice({
|
||
|
|
// id: row.id
|
||
|
|
// }).then(res => {
|
||
|
|
// this.$message({
|
||
|
|
// type: 'success',
|
||
|
|
// message: '已读'
|
||
|
|
// })
|
||
|
|
// this.getNotices()
|
||
|
|
// })
|
||
|
|
// }
|
||
|
|
// }
|
||
|
|
// },
|
||
|
|
// "未读"
|
||
|
|
// );
|
||
|
|
// },
|
||
|
|
// },
|
||
|
|
]
|
||
|
|
}
|
||
|
|
},
|
||
|
|
computed: {},
|
||
|
|
created() {
|
||
|
|
this.window.width = screen.availWidth * 0.95
|
||
|
|
this.window.height = screen.availHeight * 0.95
|
||
|
|
this.window.top = (window.screen.height - 30 - this.window.height) / 2
|
||
|
|
this.window.left = (window.screen.width - 10 - this.window.width) / 2
|
||
|
|
this.getNotices()
|
||
|
|
},
|
||
|
|
mounted() {
|
||
|
|
this.init()
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
async getNotices() {
|
||
|
|
if (/^\/system/.test(this.$route.path)) return
|
||
|
|
try {
|
||
|
|
this.loading = true
|
||
|
|
this.list = []
|
||
|
|
this.total = 0
|
||
|
|
this.loading = false
|
||
|
|
} catch (e) {
|
||
|
|
this.loading = false
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
init() {
|
||
|
|
const cardDom = document.getElementById('todo-card')
|
||
|
|
const cardTitleH = 58
|
||
|
|
const elementResize = ElementResize({
|
||
|
|
strategy: 'scroll'
|
||
|
|
})
|
||
|
|
elementResize.listenTo(cardDom, (ele) => {
|
||
|
|
this.tableHeight =
|
||
|
|
cardDom.getBoundingClientRect().height -
|
||
|
|
40 -
|
||
|
|
cardTitleH
|
||
|
|
})
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped lang="scss">
|
||
|
|
::v-deep .el-card__body {
|
||
|
|
width: 100%;
|
||
|
|
height: calc(100% - 58px);
|
||
|
|
}
|
||
|
|
::v-deep .ivu-table th,::v-deep .ivu-table td {
|
||
|
|
border-bottom-style: dashed;
|
||
|
|
}
|
||
|
|
.clearfix {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
}
|
||
|
|
</style>
|