|
|
|
|
<template>
|
|
|
|
|
<el-card id="todo-card" class="box-card" shadow="hover">
|
|
|
|
|
<div slot="header" class="clearfix">
|
|
|
|
|
<SvgIcon style="color: var(--theme-color);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;">
|
|
|
|
|
<el-table
|
|
|
|
|
v-loading="loading"
|
|
|
|
|
style="width: 100%;"
|
|
|
|
|
size="mini"
|
|
|
|
|
:header-cell-style="{
|
|
|
|
|
'font-weight': '600',
|
|
|
|
|
'background': '#f8f8f9',
|
|
|
|
|
'color': '#515a6e'
|
|
|
|
|
}"
|
|
|
|
|
element-loading-text="拼命加载中"
|
|
|
|
|
element-loading-spinner="el-icon-loading"
|
|
|
|
|
element-loading-background="rgba(255, 255, 255, 0.8)"
|
|
|
|
|
:show-header="false"
|
|
|
|
|
:height="tableHeight"
|
|
|
|
|
:loading="loading"
|
|
|
|
|
:data="/^\/system/.test(this.$route.path) ? example : list"
|
|
|
|
|
>
|
|
|
|
|
<el-table-column type="index" width="46" align="center" />
|
|
|
|
|
<el-table-column
|
|
|
|
|
v-for="(item, index) in table"
|
|
|
|
|
:key="index"
|
|
|
|
|
:width="item.width"
|
|
|
|
|
:label="item.title"
|
|
|
|
|
:prop="item.key"
|
|
|
|
|
:show-overflow-tooltip="item['show-overflow-tooltip']"
|
|
|
|
|
header-align="center"
|
|
|
|
|
:align="item.align"
|
|
|
|
|
:formatter="item.formatter"
|
|
|
|
|
/>
|
|
|
|
|
<el-table-column label="操作" header-align="center" min-width="100" fixed="right">
|
|
|
|
|
<template #default="{ row }">
|
|
|
|
|
<el-button size="mini" style="padding: 5px 10px;" @click="show(row)">查看</el-button>
|
|
|
|
|
<el-button size="mini" type="primary" style="padding: 5px 10px;" @click="handle(row)">办理</el-button>
|
|
|
|
|
</template>
|
|
|
|
|
</el-table-column>
|
|
|
|
|
</el-table>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<vxe-modal
|
|
|
|
|
v-model="isShowModal"
|
|
|
|
|
transfer
|
|
|
|
|
show-zoom
|
|
|
|
|
title="办理"
|
|
|
|
|
width="86vw"
|
|
|
|
|
height="80vh"
|
|
|
|
|
esc-closable
|
|
|
|
|
>
|
|
|
|
|
<iframe :src="modalUrl" style="width: 100%;height: 100%" frameborder="0"/>
|
|
|
|
|
</vxe-modal>
|
|
|
|
|
</el-card>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
import SvgIcon from '@/components/SvgIcon/index.vue'
|
|
|
|
|
import ElementResize from 'element-resize-detector'
|
|
|
|
|
import axios from 'axios'
|
|
|
|
|
import { getToken } from '@/utils/auth'
|
|
|
|
|
|
|
|
|
|
export default {
|
|
|
|
|
name: 'Card2',
|
|
|
|
|
components: {
|
|
|
|
|
SvgIcon
|
|
|
|
|
},
|
|
|
|
|
layout: {
|
|
|
|
|
x: 4,
|
|
|
|
|
y: 0,
|
|
|
|
|
w: 6,
|
|
|
|
|
h: 4,
|
|
|
|
|
i: '2',
|
|
|
|
|
name: '待办事项'
|
|
|
|
|
},
|
|
|
|
|
data() {
|
|
|
|
|
return {
|
|
|
|
|
isShowModal: false,
|
|
|
|
|
modalUrl: '/',
|
|
|
|
|
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: [
|
|
|
|
|
{
|
|
|
|
|
title: '收件时间',
|
|
|
|
|
key: 'created_at',
|
|
|
|
|
width: 156,
|
|
|
|
|
align: 'center',
|
|
|
|
|
formatter: (row, column, cellValue) => {
|
|
|
|
|
return this.$moment(cellValue).format('YYYY-MM-DD HH:mm:ss')
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
title: '内容',
|
|
|
|
|
key: 'content',
|
|
|
|
|
align: 'left',
|
|
|
|
|
'show-overflow-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`
|
|
|
|
|
// )
|
|
|
|
|
// }
|
|
|
|
|
// }
|
|
|
|
|
// }
|
|
|
|
|
// },
|
|
|
|
|
// '办理'
|
|
|
|
|
// )
|
|
|
|
|
// ])
|
|
|
|
|
// }
|
|
|
|
|
// }
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
computed: {},
|
|
|
|
|
created() {
|
|
|
|
|
this.getNotices()
|
|
|
|
|
},
|
|
|
|
|
mounted() {
|
|
|
|
|
this.init()
|
|
|
|
|
},
|
|
|
|
|
methods: {
|
|
|
|
|
async getNotices() {
|
|
|
|
|
if (/^\/system/.test(this.$route.path)) return
|
|
|
|
|
try {
|
|
|
|
|
this.loading = true
|
|
|
|
|
const res = await axios.get(`${process.env.VUE_APP_BASE_API}/api/ht/notice/index`, {
|
|
|
|
|
headers: {
|
|
|
|
|
'Authorization': `Bearer ${getToken()}`
|
|
|
|
|
},
|
|
|
|
|
params: this.select
|
|
|
|
|
})
|
|
|
|
|
if (res.status === 200) {
|
|
|
|
|
this.list = res.data.data?.data?.map(i => ({
|
|
|
|
|
...i,
|
|
|
|
|
module: 'ht'
|
|
|
|
|
}))
|
|
|
|
|
}
|
|
|
|
|
this.loading = false
|
|
|
|
|
} catch (err) {
|
|
|
|
|
console.error(err)
|
|
|
|
|
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
|
|
|
|
|
})
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
show(row) {
|
|
|
|
|
if (row.module === 'ht') {
|
|
|
|
|
this.modalUrl = `/${row.module}?auth_token=${window.encodeURIComponent(getToken())}&module_name=${row.module}&to=${window.encodeURIComponent('/contract/contractList?keyword=' + (/\[(.*?)]/.exec(row.title) ? /\[(.*?)]/.exec(row.title)[1] : ''))}`
|
|
|
|
|
}
|
|
|
|
|
this.isShowModal = true
|
|
|
|
|
},
|
|
|
|
|
handle(row) {
|
|
|
|
|
if (row.module === 'ht') {
|
|
|
|
|
this.modalUrl = `/${row.module}?auth_token=${window.encodeURIComponent(getToken())}&module_name=${row.module}&to=${window.encodeURIComponent('/contract/contractList?keyword=' + (/\[(.*?)]/.exec(row.title) ? /\[(.*?)]/.exec(row.title)[1] : ''))}`
|
|
|
|
|
}
|
|
|
|
|
this.isShowModal = true
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<style scoped lang="scss">
|
|
|
|
|
::v-deep .el-card__body {
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: calc(100% - 58px);
|
|
|
|
|
}
|
|
|
|
|
::v-deep .el-table th,::v-deep .el-table td {
|
|
|
|
|
border-bottom-style: dashed;
|
|
|
|
|
}
|
|
|
|
|
.clearfix {
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
}
|
|
|
|
|
::v-deep .vxe-modal--content {
|
|
|
|
|
padding: 0;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
