|
@@ -3,43 +3,47 @@
|
|
|
<header class="card-header">
|
|
|
<div class="card-header-tabs">
|
|
|
<span
|
|
|
- :class="{ active: activeName === tab.id }"
|
|
|
- v-for="tab in tabs"
|
|
|
- :key="tab.id"
|
|
|
- @click="onTabClick(tab.id)"
|
|
|
+ :class="{
|
|
|
+ active: activeName === tab.type,
|
|
|
+ only: computedTabs.length === 1
|
|
|
+ }"
|
|
|
+ v-for="tab in computedTabs"
|
|
|
+ :key="tab.type"
|
|
|
+ @click="onTabClick(tab.type)"
|
|
|
>{{ tab.name }}</span
|
|
|
>
|
|
|
</div>
|
|
|
- <div class="card-header-more" @click="linkMore">
|
|
|
+ <div class="card-header-more" v-if="showMore" @click="linkMore">
|
|
|
<span class="more-text">更多</span>
|
|
|
<span class="el-icon-jy-blue-more"></span>
|
|
|
</div>
|
|
|
</header>
|
|
|
<transition name="el-fade-in-linear">
|
|
|
- <div>
|
|
|
- <main class="card-main" v-show="activeName === '1'">
|
|
|
- <div class="chat-list" v-if="businessList.length != 0">
|
|
|
+ <div v-loading="loading">
|
|
|
+ <main class="card-main" v-show="activeName === 5">
|
|
|
+ <div class="chat-list">
|
|
|
<ChatItem
|
|
|
v-for="(item, index) in businessList"
|
|
|
:key="index"
|
|
|
v-bind="item"
|
|
|
+ @click="onBusinessItem(item)"
|
|
|
></ChatItem>
|
|
|
</div>
|
|
|
- <div class="empty-wrapper" v-else>
|
|
|
+ <div class="empty-wrapper" v-show="!businessList.length && loaded">
|
|
|
<Empty class="empty-mini" :mtb60="false">
|
|
|
<slot name="empty-content">暂无数据</slot>
|
|
|
</Empty>
|
|
|
</div>
|
|
|
</main>
|
|
|
- <main class="card-main" v-show="activeName === '2'">
|
|
|
- <div class="chat-list" v-if="todoList.length != 0">
|
|
|
+ <main class="card-main" v-show="activeName === 11">
|
|
|
+ <div class="chat-list">
|
|
|
<ChatItem
|
|
|
v-for="(item, index) in todoList"
|
|
|
:key="index"
|
|
|
v-bind="item"
|
|
|
></ChatItem>
|
|
|
</div>
|
|
|
- <div class="empty-wrapper" v-else>
|
|
|
+ <div class="empty-wrapper" v-show="!todoList.length && loaded">
|
|
|
<Empty class="empty-mini" :mtb60="false">
|
|
|
<slot name="empty-content">暂无数据</slot>
|
|
|
</Empty>
|
|
@@ -53,7 +57,7 @@
|
|
|
<script>
|
|
|
import ChatItem from '../ui/ChatItem.vue'
|
|
|
import Empty from '@/components/common/Empty.vue'
|
|
|
-import { getAssetsFile } from '@/utils'
|
|
|
+import { mapState, mapActions } from 'vuex'
|
|
|
|
|
|
export default {
|
|
|
name: 'BusinessToDo',
|
|
@@ -64,54 +68,49 @@ export default {
|
|
|
data() {
|
|
|
return {
|
|
|
tabs: [
|
|
|
- { id: '1', name: '商机情报' },
|
|
|
- { id: '2', name: '待办' }
|
|
|
+ { name: '商机情报', type: 5 },
|
|
|
+ { name: '待办', type: 11 }
|
|
|
],
|
|
|
- activeName: '1',
|
|
|
- businessList: [
|
|
|
- {
|
|
|
- id: '11',
|
|
|
- title: '您有一条新的专属商机情报',
|
|
|
- time: '2020年10月8日 9:30',
|
|
|
- content: '客户服务专家和你一起聊聊:如何从招投标数据中发现商机?',
|
|
|
- img: getAssetsFile('workspace/shangjiqingbao.png')
|
|
|
- },
|
|
|
- {
|
|
|
- id: '11',
|
|
|
- title: '您有一条新的专属商机情报',
|
|
|
- time: '2020年10月8日 9:30',
|
|
|
- content: '客户服务专家和你一起聊聊:如何从招投标数据中发现商机?',
|
|
|
- img: getAssetsFile('workspace/shangjiqingbao.png')
|
|
|
- },
|
|
|
- {
|
|
|
- id: '11',
|
|
|
- title: '您有一条新的专属商机情报',
|
|
|
- time: '2020年10月8日 9:30',
|
|
|
- content: '客户服务专家和你一起聊聊:如何从招投标数据中发现商机?',
|
|
|
- img: getAssetsFile('workspace/shangjiqingbao.png')
|
|
|
- },
|
|
|
- {
|
|
|
- id: '11',
|
|
|
- title: '您有一条新的专属商机情报',
|
|
|
- time: '2020年10月8日 9:30',
|
|
|
- content: '客户服务专家和你一起聊聊:如何从招投标数据中发现商机?',
|
|
|
- img: getAssetsFile('workspace/shangjiqingbao.png')
|
|
|
- },
|
|
|
- {
|
|
|
- id: '11',
|
|
|
- title: '您有一条新的专属商机情报',
|
|
|
- time: '2020年10月8日 9:30',
|
|
|
- content: '客户服务专家和你一起聊聊:如何从招投标数据中发现商机?',
|
|
|
- img: getAssetsFile('workspace/shangjiqingbao.png')
|
|
|
- }
|
|
|
- ],
|
|
|
- todoList: []
|
|
|
+ activeName: 5
|
|
|
}
|
|
|
},
|
|
|
+ computed: {
|
|
|
+ ...mapState({
|
|
|
+ loading: (state) => state.workspace.businessTodo.loading,
|
|
|
+ loaded: (state) => state.workspace.businessTodo.loaded,
|
|
|
+ showTodo: (state) => state.workspace.businessTodo.showTodo,
|
|
|
+ businessList: (state) => state.workspace.businessTodo.businessList,
|
|
|
+ todoList: (state) => state.workspace.businessTodo.todoList
|
|
|
+ }),
|
|
|
+ showMore() {
|
|
|
+ const businessType = this.activeName === 5
|
|
|
+ const todoLength = this.todoList.length
|
|
|
+ const businessLength = this.businessList.length
|
|
|
+ return businessType ? businessLength : todoLength
|
|
|
+ },
|
|
|
+ // P442需求:待办为空时,不展示该分类
|
|
|
+ computedTabs() {
|
|
|
+ return this.tabs.filter((item) => {
|
|
|
+ return this.showTodo ? item : item.type !== 11
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.getList()
|
|
|
+ },
|
|
|
methods: {
|
|
|
- linkMore() {},
|
|
|
- onTabClick(index) {
|
|
|
- this.activeName = index
|
|
|
+ ...mapActions('workspace/businessTodo', ['getList']),
|
|
|
+ linkMore() {
|
|
|
+ const type = this.activeName
|
|
|
+ window.open(`/swordfish/frontPage/messageCenter/sess/index?type=${type}`)
|
|
|
+ },
|
|
|
+ onTabClick(msgType) {
|
|
|
+ this.activeName = msgType
|
|
|
+ // this.getList()
|
|
|
+ },
|
|
|
+ onBusinessItem(item) {
|
|
|
+ const link = `/swordfish/page_big_pc/business_detail/${item.id}`
|
|
|
+ window.open(link)
|
|
|
}
|
|
|
}
|
|
|
}
|
|
@@ -152,6 +151,12 @@ export default {
|
|
|
background: $color_main;
|
|
|
}
|
|
|
}
|
|
|
+ .only {
|
|
|
+ color: #1d1d1d;
|
|
|
+ &::after {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
&-more {
|
|
|
display: flex;
|
|
@@ -167,6 +172,7 @@ export default {
|
|
|
}
|
|
|
.card-main {
|
|
|
padding: 0 12px 16px;
|
|
|
+ min-height: 246px;
|
|
|
}
|
|
|
::v-deep {
|
|
|
.chat-item {
|
|
@@ -174,6 +180,7 @@ export default {
|
|
|
width: 32px;
|
|
|
height: 32px;
|
|
|
background: transparent;
|
|
|
+ margin-right: 12px;
|
|
|
}
|
|
|
}
|
|
|
}
|