This commit is contained in:
yanran200730
2021-12-03 15:30:17 +08:00
5 changed files with 387 additions and 364 deletions

View File

@@ -6,7 +6,7 @@
<u-grid-item v-for="(item,index) in grid" :key="index" :custom-style="{padding:'14px 0'}" <u-grid-item v-for="(item,index) in grid" :key="index" :custom-style="{padding:'14px 0'}"
@click="handleClick(index)"> @click="handleClick(index)">
<u-icon :name="item.icon" :size="64"></u-icon> <u-icon :name="item.icon" :size="64"></u-icon>
<view class="label">{{item.label}}</view> <view class="label">{{ item.label }}</view>
</u-grid-item> </u-grid-item>
</u-grid> </u-grid>
</ai-top-fixed> </ai-top-fixed>
@@ -14,26 +14,30 @@
<header>待参加的会议</header> <header>待参加的会议</header>
<template v-if="meetingList.length"> <template v-if="meetingList.length">
<div class="card" v-for="(item,index) in meetingList" :key="index" @click="detail(item)"> <div class="card" v-for="(item,index) in meetingList" :key="index" @click="detail(item)">
<header>{{item.title}}</header> <header>{{ item.title }}</header>
<u-row justify="between"> <u-row justify="between">
<div class="time"> <div class="time">
<span>{{item.startTime|format}}</span> <span>{{ item.startTime|format }}</span>
<span>{{item.startTime|formatDate(0)}}{{item.startTime|formatDate(1)}}{{item.startTime|formatDate(2)}} {{item.startTime|formatWeek}}</span> <span>{{ item.startTime|formatDate(0) }}{{
item.startTime|formatDate(1)
}}{{ item.startTime|formatDate(2) }} {{ item.startTime|formatWeek }}</span>
</div> </div>
<div class="arrow"></div> <div class="arrow"></div>
<div class="time"> <div class="time">
<span>{{item.endTime|format}}</span> <span>{{ item.endTime|format }}</span>
<span>{{item.endTime|formatDate(0)}}{{item.endTime|formatDate(1)}}{{item.endTime|formatDate(2)}} {{item.endTime|formatWeek}}</span> <span>{{ item.endTime|formatDate(0) }}{{ item.endTime|formatDate(1) }}{{
item.endTime|formatDate(2)
}} {{ item.endTime|formatWeek }}</span>
</div> </div>
</u-row> </u-row>
<u-row class="info"> <u-row class="info">
<span>发起人员</span> <span>发起人员</span>
<span>{{item.userName}}</span> <ai-open-data type="userName" :openid="item.createUserId"/>
</u-row> </u-row>
<u-gap height="20"></u-gap> <u-gap height="20"></u-gap>
<u-row class="info"> <u-row class="info">
<span>会议地点</span> <span>会议地点</span>
<span>{{item.address}}</span> <span>{{ item.address }}</span>
</u-row> </u-row>
<div class="tag" :style="{background:'url(' + $cdn + tag(item.joinStatus) + ')'}"></div> <div class="tag" :style="{background:'url(' + $cdn + tag(item.joinStatus) + ')'}"></div>
</div> </div>
@@ -50,224 +54,225 @@
</template> </template>
<script> <script>
import AiEmpty from "../../components/AiEmpty"; import AiEmpty from "../../components/AiEmpty";
import AiTopFixed from "../../components/AiTopFixed"; import AiTopFixed from "../../components/AiTopFixed";
import AiAdd from "../../components/AiAdd"; import AiAdd from "../../components/AiAdd";
import {addMeeting, belongToMe, detail, meetingList} from './components' import {addMeeting, belongToMe, detail, meetingList} from './components'
import AiOpenData from "../../components/AiOpenData";
export default { export default {
name: "AppMeetingNotice", name: "AppMeetingNotice",
appName: "会议通知", appName: "会议通知",
components: {AiEmpty, AiTopFixed, AiAdd, addMeeting, belongToMe, detail, meetingList}, components: {AiOpenData, AiEmpty, AiTopFixed, AiAdd, addMeeting, belongToMe, detail, meetingList},
data() { data() {
return { return {
meetingList: [], meetingList: [],
isList: true, isList: true,
comp: "", comp: "",
params: null, params: null,
} }
}, },
created() { created() {
this.$dict.load("meetingNoticeBefore", "meetingNoticeAfter", "meetStatus"); this.$dict.load("meetingNoticeBefore", "meetingNoticeAfter", "meetStatus");
}, },
computed: { computed: {
grid() { grid() {
return [ return [
{ {
icon: this.$cdn + "/common/iconlshy.png", icon: this.$cdn + "/common/iconlshy.png",
label: "历史会议" label: "历史会议"
}, },
{ {
icon: this.$cdn + "/common/iconwfqd.png", icon: this.$cdn + "/common/iconwfqd.png",
label: "我发起的" label: "我发起的"
}, },
{ {
icon: this.$cdn + "/common/iconcgx.png", icon: this.$cdn + "/common/iconcgx.png",
label: "草稿箱" label: "草稿箱"
}
]
}
},
methods: {
emitShow(){
const {id} = this.$route.query
if(id){
this.comp = "detail";
this.params = id;
this.isList = false;
} }
this.getData() ]
}, }
tag(status) { },
return { methods: {
"0": "common/1wqr.png", emitShow() {
"1": "common/1yqr.png", const {id} = this.$route.query
"2": "common/1yqj.png", if (id) {
"3": "common/toDo.png",
}[status]
},
detail({id}) {
this.comp = "detail"; this.comp = "detail";
this.params = id; this.params = id;
this.isList = false; this.isList = false;
}, }
getData() { this.getData()
this.$http.post("/app/appmeetinginfo/list", null, { },
params: { tag(status) {
listType: "1", return {
meetingStatus: "1|2", "0": "common/1wqr.png",
size: 999 "1": "common/1yqr.png",
} "2": "common/1yqj.png",
}).then(res => { "3": "common/toDo.png",
if (res && res.data) { }[status]
this.meetingList = res.data.records },
} detail({id}) {
}) this.comp = "detail";
}, this.params = id;
handleClick(index) { this.isList = false;
this.params = index; },
this.isList = false; getData() {
if (index == 0 || index == 2) { this.$http.post("/app/appmeetinginfo/list", null, {
this.comp = "meetingList"; params: {
} else if (index == 1) { listType: "1",
this.comp = "belongToMe"; meetingStatus: "1|2",
size: 999
} }
}, }).then(res => {
add() { if (res && res.data) {
this.isList = false; this.meetingList = res.data.records
this.comp = "addMeeting"; }
})
},
handleClick(index) {
this.params = index;
this.isList = false;
if (index == 0 || index == 2) {
this.comp = "meetingList";
} else if (index == 1) {
this.comp = "belongToMe";
} }
}, },
add() {
this.isList = false;
this.comp = "addMeeting";
}
},
filters: { filters: {
format(date) { format(date) {
return date.split(" ")[1].substr(0, 5) return date.split(" ")[1].substr(0, 5)
},
formatDate(date, index) {
return date.split(" ")[0].split("-")[index]
},
formatWeek(date) {
return "日一二三四五六".charAt((new Date(date.split(" ")[0]).getDay()))
}
}, },
formatDate(date, index) {
return date.split(" ")[0].split("-")[index]
},
formatWeek(date) {
return "日一二三四五六".charAt((new Date(date.split(" ")[0]).getDay()))
}
},
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.meeting { .meeting {
min-height: 100%; min-height: 100%;
background: #F5F5F5; background: #F5F5F5;
padding-bottom: 48px; padding-bottom: 48px;
.label { .label {
font-size: 28px; font-size: 28px;
font-weight: 400; font-weight: 400;
color: #333333;
line-height: 48px;
margin-top: 8px;
}
.body {
box-sizing: border-box;
padding: 40px 32px;
& > header {
font-size: 36px;
font-weight: 600;
color: #333333; color: #333333;
line-height: 48px; margin-bottom: 38px;
margin-top: 8px;
} }
.body { .card {
background-color: #FFFFFF;
box-sizing: border-box; box-sizing: border-box;
padding: 40px 32px; padding: 32px;
border-radius: 8px;
margin-bottom: 32px;
position: relative;
&:last-child {
margin-bottom: 0;
}
& > header { & > header {
font-size: 36px; font-size: 32px;
font-weight: 600; font-weight: 600;
color: #333333; color: #333333;
margin-bottom: 38px;
} }
.card { .time {
background-color: #FFFFFF; display: flex;
box-sizing: border-box; flex-direction: column;
padding: 32px; margin: 46px 0;
border-radius: 8px;
margin-bottom: 32px;
position: relative;
&:last-child { & > span:first-child {
margin-bottom: 0; font-size: 60px;
}
& > header {
font-size: 32px;
font-weight: 600; font-weight: 600;
color: #333333; color: #333333;
line-height: 84px;
} }
.time { & > span:last-child {
display: flex; font-size: 22px;
flex-direction: column; color: #333333;
margin: 46px 0;
& > span:first-child {
font-size: 60px;
font-weight: 600;
color: #333333;
line-height: 84px;
}
& > span:last-child {
font-size: 22px;
color: #333333;
}
}
.arrow {
width: 28px;
height: 68px;
overflow: hidden;
position: relative;
transform: rotate(180deg);
&:before, &:after {
content: "";
width: 50px;
height: 50px;
position: absolute;
transform: scaleY(1.3) translate(30%, -40px) rotate(45deg);
}
&:before {
top: 59px;
background-color: #CCCCCC;
}
&:after {
left: 7px;
top: 59px;
background-color: #FFFFFF;
}
}
.info {
& > span:first-child {
font-size: 30px;
color: #999999;
}
& > span:last-child {
font-size: 30px;
color: #343D65;
}
}
.tag {
width: 112px;
height: 112px;
background-repeat: no-repeat !important;
background-size: 100% 100% !important;
position: absolute;
top: 0;
right: 0;
} }
} }
}
::v-deep .content { .arrow {
padding: 0 !important; width: 28px;
height: 68px;
overflow: hidden;
position: relative;
transform: rotate(180deg);
&:before, &:after {
content: "";
width: 50px;
height: 50px;
position: absolute;
transform: scaleY(1.3) translate(30%, -40px) rotate(45deg);
}
&:before {
top: 59px;
background-color: #CCCCCC;
}
&:after {
left: 7px;
top: 59px;
background-color: #FFFFFF;
}
}
.info {
& > span:first-child {
font-size: 30px;
color: #999999;
}
& > span:last-child {
font-size: 30px;
color: #343D65;
}
}
.tag {
width: 112px;
height: 112px;
background-repeat: no-repeat !important;
background-size: 100% 100% !important;
position: absolute;
top: 0;
right: 0;
}
} }
} }
::v-deep .content {
padding: 0 !important;
}
}
</style> </style>

View File

@@ -158,7 +158,11 @@ export default {
methods: { methods: {
...mapActions(['selectEnterpriseContact']), ...mapActions(['selectEnterpriseContact']),
handleSelectUser() { handleSelectUser() {
this.selectEnterpriseContact({fromDepartmentId:0,type:["department", "user"]}).then(res => { this.selectEnterpriseContact({
fromDepartmentId:0,
type:["department", "user"],
selectedUserIds: this.form.attendees?.map(e=>e.id)
}).then(res => {
this.change(res?.userList || []) this.change(res?.userList || [])
}) })
}, },

View File

@@ -6,26 +6,26 @@
<div class="body"> <div class="body">
<template v-if="list.length"> <template v-if="list.length">
<div class="card" v-for="(item,index) in list" :key="index" @click="handleClick(item)"> <div class="card" v-for="(item,index) in list" :key="index" @click="handleClick(item)">
<header>{{item.title}}</header> <header>{{ item.title }}</header>
<u-row justify="between"> <u-row justify="between">
<div class="time"> <div class="time">
<span>{{item.startTime|formatTime}}</span> <span>{{ item.startTime|formatTime }}</span>
<span>{{item.startTime|formatDate(0)}}{{item.startTime|formatDate(1)}}{{item.startTime|formatDate(2)}} {{item.startTime|formatWeek}}</span> <span>{{ item.startTime|formatDate(0) }}{{ item.startTime|formatDate(1) }}{{ item.startTime|formatDate(2) }} {{ item.startTime|formatWeek }}</span>
</div> </div>
<div class="arrow"></div> <div class="arrow"></div>
<div class="time"> <div class="time">
<span>{{item.endTime|formatTime}}</span> <span>{{ item.endTime|formatTime }}</span>
<span>{{item.endTime|formatDate(0)}}{{item.endTime|formatDate(1)}}{{item.endTime|formatDate(2)}} {{item.endTime|formatWeek}}</span> <span>{{ item.endTime|formatDate(0) }}{{ item.endTime|formatDate(1) }}{{ item.endTime|formatDate(2) }} {{ item.endTime|formatWeek }}</span>
</div> </div>
</u-row> </u-row>
<u-row class="info"> <u-row class="info">
<span>发起单位</span> <span>发起单位</span>
<span>{{item.unitName}}</span> <ai-open-data type="departmentName" :openid="item.unitName"/>
</u-row> </u-row>
<u-gap height="20"></u-gap> <u-gap height="20"></u-gap>
<u-row class="info"> <u-row class="info">
<span>会议地点</span> <span>会议地点</span>
<span>{{item.address}}</span> <span>{{ item.address }}</span>
</u-row> </u-row>
<div class="tag" :style="{background:'url(' + tag(item.status) + ')'}"></div> <div class="tag" :style="{background:'url(' + tag(item.status) + ')'}"></div>
</div> </div>
@@ -39,192 +39,193 @@
</template> </template>
<script> <script>
import AiTopFixed from "../../../components/AiTopFixed"; import AiTopFixed from "../../../components/AiTopFixed";
import AiBack from "../../../components/AiBack"; import AiBack from "../../../components/AiBack";
import AiEmpty from "../../../components/AiEmpty"; import AiEmpty from "../../../components/AiEmpty";
import AiOpenData from "../../../components/AiOpenData";
export default { export default {
name: "belongToMe", name: "belongToMe",
components: {AiTopFixed, AiBack, AiEmpty}, components: {AiOpenData, AiTopFixed, AiBack, AiEmpty},
data() { data() {
return { return {
index: 0, index: 0,
current: 1, current: 1,
list: [], list: [],
status: "加载更多", status: "加载更多",
} }
}, },
computed: { computed: {
tabs() { tabs() {
return [ return [
{name: "全部"}, {name: "全部"},
{name: "未开始"}, {name: "未开始"},
{name: "进行中"}, {name: "进行中"},
{name: "已取消"}, {name: "已取消"},
{name: "已结束"}, {name: "已结束"},
] ]
} }
}, },
created() { created() {
this.getList()
},
methods: {
emitReachBottom() {
this.current = this.current + 1;
this.getList() this.getList()
}, },
methods: { tag(status) {
emitReachBottom(){ return {
this.current = this.current + 1; "1": this.$cdn + 'common/1wks.png',
this.getList() "2": this.$cdn + 'common/1jxz.png',
}, "3": this.$cdn + 'common/1yqx.png',
tag(status) { "4": this.$cdn + 'common/1yjs.png'
return { }[status]
"1": this.$cdn + 'common/1wks.png',
"2": this.$cdn + 'common/1jxz.png',
"3": this.$cdn + 'common/1yqx.png',
"4": this.$cdn + 'common/1yjs.png'
}[status]
},
getList() {
this.$http.post("/app/appmeetinginfo/list", null, {
params: {
listType: 0,
meetingStatus: this.index == 0 ? "-1" : this.index,
size: 10,
current: this.current
}
}).then(res => {
if (res && res.data) {
if (this.current > 1 && this.current > res.data.pages) {
this.status = "已经到底啦"
}
this.list = this.current > 1 ? [...this.list, ...res.data.records] : res.data.records
}
})
},
handleClick({id}) {
this.$parent.params = id;
this.$parent.isList = false;
this.$parent.comp = "detail"
},
change(e) {
this.index = e
this.current = 1
this.getList()
},
}, },
getList() {
this.$http.post("/app/appmeetinginfo/list", null, {
params: {
listType: 0,
meetingStatus: this.index == 0 ? "-1" : this.index,
size: 10,
current: this.current
}
}).then(res => {
if (res && res.data) {
if (this.current > 1 && this.current > res.data.pages) {
this.status = "已经到底啦"
}
this.list = this.current > 1 ? [...this.list, ...res.data.records] : res.data.records
}
})
},
handleClick({id}) {
this.$parent.params = id;
this.$parent.isList = false;
this.$parent.comp = "detail"
},
change(e) {
this.index = e
this.current = 1
this.getList()
},
},
filters: { filters: {
formatTime(date) { formatTime(date) {
return date.split(" ")[1]?.substr(0, 5) return date.split(" ")[1]?.substr(0, 5)
}, },
formatDate(date, i) { formatDate(date, i) {
return date.split(" ")[0]?.split("-")[i] return date.split(" ")[0]?.split("-")[i]
}, },
formatWeek(date) { formatWeek(date) {
return "日一二三四五六".charAt(new Date(date.split(" ")[0]).getDay()) return "日一二三四五六".charAt(new Date(date.split(" ")[0]).getDay())
}, },
}
} }
}
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.belong-to-me { .belong-to-me {
min-height: 100%; min-height: 100%;
background-color: #F5F5F5; background-color: #F5F5F5;
::v-deep .content { ::v-deep .content {
padding: 0 !important; padding: 0 !important;
} }
.body { .body {
box-sizing: border-box;
padding: 40px 32px;
.card {
background-color: #FFFFFF;
box-sizing: border-box; box-sizing: border-box;
padding: 40px 32px; padding: 32px;
border-radius: 8px;
margin-bottom: 32px;
position: relative;
.card { &:last-child {
background-color: #FFFFFF; margin-bottom: 0;
box-sizing: border-box; }
padding: 32px;
border-radius: 8px;
margin-bottom: 32px;
position: relative;
&:last-child { & > header {
margin-bottom: 0; font-size: 32px;
} font-weight: 600;
color: #333333;
}
& > header { .time {
font-size: 32px; display: flex;
flex-direction: column;
margin: 46px 0;
& > span:first-child {
font-size: 60px;
font-weight: 600; font-weight: 600;
color: #333333; color: #333333;
line-height: 84px;
} }
.time { & > span:last-child {
display: flex; font-size: 22px;
flex-direction: column; color: #333333;
margin: 46px 0;
& > span:first-child {
font-size: 60px;
font-weight: 600;
color: #333333;
line-height: 84px;
}
& > span:last-child {
font-size: 22px;
color: #333333;
}
} }
}
.arrow { .arrow {
width: 28px; width: 28px;
height: 68px; height: 68px;
overflow: hidden; overflow: hidden;
position: relative; position: relative;
transform: rotate(180deg); transform: rotate(180deg);
&:before, &:after { &:before, &:after {
content: ""; content: "";
width: 50px; width: 50px;
height: 50px; height: 50px;
position: absolute;
transform: scaleY(1.3) translate(30%, -40px) rotate(45deg);
}
&:before {
top: 59px;
background-color: #CCCCCC;
}
&:after {
left: 7px;
top: 59px;
background-color: #FFFFFF;
}
}
.info {
flex-wrap: nowrap;
& > span:first-child {
font-size: 30px;
color: #999999;
flex-shrink: 0;
}
& > span:last-child {
font-size: 30px;
color: #343D65;
}
}
.tag {
width: 112px;
height: 112px;
background-repeat: no-repeat;
background-size: 100% 100% !important;
position: absolute; position: absolute;
top: 0; transform: scaleY(1.3) translate(30%, -40px) rotate(45deg);
right: 0;
} }
&:before {
top: 59px;
background-color: #CCCCCC;
}
&:after {
left: 7px;
top: 59px;
background-color: #FFFFFF;
}
}
.info {
flex-wrap: nowrap;
& > span:first-child {
font-size: 30px;
color: #999999;
flex-shrink: 0;
}
& > span:last-child {
font-size: 30px;
color: #343D65;
}
}
.tag {
width: 112px;
height: 112px;
background-repeat: no-repeat;
background-size: 100% 100% !important;
position: absolute;
top: 0;
right: 0;
} }
} }
} }
}
</style> </style>

View File

@@ -121,8 +121,13 @@
methods: { methods: {
...mapActions(['selectEnterpriseContact']), ...mapActions(['selectEnterpriseContact']),
handleSelectUser() { handleSelectUser() {
this.selectEnterpriseContact({fromDepartmentId:0,type:["department", "user"]}).then(res => { this.selectEnterpriseContact({
fromDepartmentId:0,
type:["department", "user"],
selectedUserIds: this.form.persons?.map(e=>e.id)
}).then(res => {
this.form.persons = res?.userList || [] this.form.persons = res?.userList || []
console.log(this.form.persons);
}) })
}, },
confirm(e){ confirm(e){

View File

@@ -1,5 +1,5 @@
<template> <template>
<div :type="type" :openid="openid" v-text="openid"/> <div :type="type" :openid="oid" v-text="oid"/>
</template> </template>
<script> <script>
@@ -8,6 +8,14 @@ import {mapActions} from "vuex";
export default { export default {
name: "AiOpenData", name: "AiOpenData",
props: ['type', 'openid'], props: ['type', 'openid'],
computed: {
oid() {
/**
* 后端返回格式(cropId|userId)
*/
return this.openid?.split("|")?.[1] || this.openid || ""
}
},
methods: { methods: {
...mapActions(['injectJWeixin']) ...mapActions(['injectJWeixin'])
}, },