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.
310 lines
7.0 KiB
310 lines
7.0 KiB
<script lang="ts" setup>
|
|
import { reactive, ref, toRefs } from 'vue'
|
|
|
|
import listDark from 'naive-ui/lib/mention/styles/dark'
|
|
import { getRepeatList, repetitionTask } from '@/api/final/index'
|
|
|
|
const emit = defineEmits<{
|
|
(e: 'reject', params: any)
|
|
(e: 'viewrepeat')
|
|
}>()
|
|
|
|
const cardStyle = {
|
|
'width': '450px',
|
|
'--n-padding-bottom': '10px',
|
|
'--n-padding-left': '0px',
|
|
}
|
|
const state: any = reactive({
|
|
detail: [],
|
|
total: 0,
|
|
taskId: '',
|
|
})
|
|
const { detail, total } = toRefs(state)
|
|
const show = ref(false)
|
|
|
|
function showModal(id) {
|
|
state.total = 0
|
|
getDetail(id)
|
|
}
|
|
|
|
async function getDetail(id) {
|
|
const res = await repetitionTask()
|
|
if (res.code === 'OK') {
|
|
state.detail = res.data
|
|
state.detail.forEach((item) => {
|
|
state.total += item.count
|
|
})
|
|
show.value = true
|
|
}
|
|
}
|
|
|
|
// function showModal() {
|
|
// show.value = true
|
|
// }
|
|
|
|
function closeModal() {
|
|
show.value = false
|
|
}
|
|
|
|
async function query() {
|
|
const result = await getRepeatList({
|
|
sortorder: 'asc',
|
|
pageSize: 300,
|
|
pageNo: 1,
|
|
sortname: '',
|
|
})
|
|
const { data } = result
|
|
// console.log(data)
|
|
// // const list = []
|
|
// // data.forEach((items) => {
|
|
// // items.repeatedTaskList.forEach((item) => {
|
|
// // list.push(item)
|
|
// // })
|
|
// // })
|
|
// console.log(data)
|
|
emit('reject', data)
|
|
closeModal()
|
|
}
|
|
|
|
async function reject() {
|
|
query()
|
|
}
|
|
|
|
async function viewRepeat(e: MouseEvent) {
|
|
emit('viewrepeat')
|
|
e.preventDefault()
|
|
closeModal()
|
|
}
|
|
|
|
defineExpose({
|
|
showModal,
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<n-modal v-model:show="show" transform-origin="center" class="modal_wrap">
|
|
<div class="wrapper">
|
|
<div class="closed">
|
|
<SvgIcon
|
|
class="icon"
|
|
name="close-white"
|
|
width="32"
|
|
@click="closeModal"
|
|
/>
|
|
</div>
|
|
<div class="wrapper-header">
|
|
<div style="font-weight: bold;">
|
|
任务小结重复任务
|
|
</div>
|
|
<div>共<span class="total">{{ total }}</span>项</div>
|
|
</div>
|
|
<div class="wrapper-content">
|
|
<n-scrollbar style="max-height: 214px;">
|
|
<div v-for="item in detail" :key="item.id" class="item">
|
|
<!-- <div class="imgwrapper" /> -->
|
|
<img class="imgwrapper" :src="item.imgUrl">
|
|
<n-grid x-gap="12" y-gap="0" :cols="12">
|
|
<n-gi span="3">
|
|
<span style="color:#8b8d8f;">任务小结内容:</span>
|
|
</n-gi>
|
|
<n-gi span="8">
|
|
<span>{{ item.content }}</span>
|
|
</n-gi>
|
|
<n-gi span="3" style=" padding-top: 2px;">
|
|
<span style="color:#8b8d8f;">任务重复数量:</span>
|
|
</n-gi>
|
|
<n-gi span="8">
|
|
<span>共<span class="count">{{ item.count }}</span>条</span>
|
|
</n-gi>
|
|
</n-grid>
|
|
</div>
|
|
</n-scrollbar>
|
|
<div class="footer">
|
|
<img class="img-btn1" src="@/assets/images/btn_pass.png" alt="" @click="reject">
|
|
<img class="img-btn" src="@/assets/images/btn_repeat.png" alt="" @click="viewRepeat">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</n-modal>
|
|
</template>
|
|
|
|
<style lang="less" scoped>
|
|
.modal_wrap {
|
|
background-image: url(../../../assets/images/approval_modal_bg.png);
|
|
background-repeat: no-repeat;
|
|
background-size: 100%;
|
|
width: 700px;
|
|
height: 500px;
|
|
box-shadow: none !important;
|
|
}
|
|
.wrapper {
|
|
position: absolute;
|
|
left: calc(50% - 350px);
|
|
.closed {
|
|
position: relative;
|
|
.icon{
|
|
cursor: pointer;
|
|
position: absolute;
|
|
top: 10px;
|
|
right: 7px;
|
|
}
|
|
}
|
|
.wrapper-header {
|
|
margin-top: 53px;
|
|
text-align: center;
|
|
font-size: 16px;
|
|
padding-top: 40px;
|
|
margin-bottom: 16px;
|
|
.wrapper-title {
|
|
text-align: center;
|
|
font-size: 16px;
|
|
font-family: PingFang SC, PingFang SC-Semibold;
|
|
font-weight: Semibold;
|
|
text-align: center;
|
|
color: #333333;
|
|
line-height: 32px;
|
|
}
|
|
.wrapper-mark {
|
|
text-align: center;
|
|
font-size: 13px;
|
|
font-family: HarmonyOS Sans SC, HarmonyOS Sans SC-Regular;
|
|
font-weight: Regular;
|
|
text-align: center;
|
|
color: #666666;
|
|
line-height: 18px;
|
|
}
|
|
}
|
|
|
|
&-content {
|
|
flex: 1;
|
|
border-radius: 8px;
|
|
padding: 16px;
|
|
padding-top: 0;
|
|
margin: 25px 12px 35px 38px;
|
|
|
|
.imgwrapper {
|
|
width: 160px;
|
|
height: 70px;
|
|
margin-right: 20px;
|
|
border-radius: 8px;
|
|
// background-image: url('../../../assets/images/test.png');
|
|
// background-repeat: no-repeat;
|
|
// background-size: cover;
|
|
}
|
|
|
|
.item {
|
|
display: flex;
|
|
padding: 20px 0px;
|
|
border-bottom: 1px solid #e4e6eb;
|
|
}
|
|
|
|
.footer {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
margin-top: 20px;
|
|
}
|
|
}
|
|
// .wrapper-content {
|
|
// flex: 1;
|
|
// border-radius: 8px;
|
|
// margin: 105px 60px 35px 120px;
|
|
// .item {
|
|
// display: flex;
|
|
// flex-flow: row nowrap;
|
|
// align-items: center;
|
|
// margin: 20px 0;
|
|
// }
|
|
|
|
// .imgwrapper {
|
|
// width: 200px;
|
|
// height: 120px;
|
|
// margin-right: 20px;
|
|
// border-radius: 8px;
|
|
// background-image: url("../../../assets/images/test.png");
|
|
// background-repeat: no-repeat;
|
|
// background-size: cover;
|
|
// }
|
|
// .content {
|
|
// .task_id {
|
|
// font-size: 14px;
|
|
// font-family: PingFang SC, PingFang SC-Regular;
|
|
// font-weight: Regular;
|
|
// text-align: left;
|
|
// color: #333333;
|
|
// line-height: 20px;
|
|
// }
|
|
// .tag_box {
|
|
// display: flex;
|
|
// flex-flow: row nowrap;
|
|
// margin: 8px 0;
|
|
// .tag_item {
|
|
// background: rgba(80, 122, 253, 0.1);
|
|
// border-radius: 2px;
|
|
// font-size: 12px;
|
|
// font-family: PingFang SC, PingFang SC-Regular;
|
|
// font-weight: Regular;
|
|
// text-align: left;
|
|
// color: #507afd;
|
|
// line-height: 16px;
|
|
// margin-right: 10px;
|
|
// }
|
|
// .error {
|
|
// background: rgba(255, 78, 79, 0.1);
|
|
// color: #ff4e4f;
|
|
// }
|
|
// }
|
|
// .time_box {
|
|
// font-size: 14px;
|
|
// font-family: PingFang SC, PingFang SC-Regular;
|
|
// font-weight: Regular;
|
|
// text-align: left;
|
|
// color: #333333;
|
|
// line-height: 20px;
|
|
// }
|
|
// }
|
|
// .mark_text {
|
|
// font-size: 13px;
|
|
// font-family: PingFang SC, PingFang SC-Regular;
|
|
// font-weight: Regular;
|
|
// text-align: left;
|
|
// color: #666666;
|
|
// line-height: 16px;
|
|
// }
|
|
// .footer {
|
|
// display: flex;
|
|
// flex-flow: row nowrap;
|
|
// align-items: center;
|
|
// justify-content: center;
|
|
// margin: 20px 30px 0 0;
|
|
// }
|
|
// }
|
|
|
|
.count {
|
|
color: #6684fa;
|
|
font-weight: bold;
|
|
font-size: 16px;
|
|
margin: 0px 5px
|
|
}
|
|
|
|
.total {
|
|
color: #6684fa;
|
|
font-weight: bold;
|
|
font-size: 30px;
|
|
margin: 0px 5px
|
|
}
|
|
|
|
.img-btn1{
|
|
width: 162px;
|
|
height: 54px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.img-btn{
|
|
width: 173px;
|
|
height: 54px;
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
</style>
|