247 lines
7.9 KiB
TypeScript
247 lines
7.9 KiB
TypeScript
import clsx from 'clsx'
|
|
import { defineComponent, ref } from 'vue'
|
|
import PlusIcon from '~/icons/work/tomato_work_add_icon.png'
|
|
import DataImg from '~/icons/work/dataImg.png'
|
|
import DateImg from '~/icons/work/dateImg.png'
|
|
import ListImg from '~/icons/work/listImg.png'
|
|
import AddImg from '~/icons/work/addTarget.png'
|
|
import DownImg from "~/icons/work/selectDown1.0.3.png"
|
|
import { v4 as uuid } from "uuid"
|
|
import List from './modal_view/list'
|
|
import { DatePicker, Modal, TimePicker } from 'ant-design-vue'
|
|
import type { TomatoTarget } from './useTomatoStore'
|
|
import dayjs from 'dayjs'
|
|
import useTomatoStore from './useTomatoStore'
|
|
import Calendar from './modal_view/calendar'
|
|
import DataDetail from './modal_view/DataDetail'
|
|
const workTab = [
|
|
{
|
|
title: '目标列表',
|
|
key: 'list',
|
|
icon: ListImg
|
|
},
|
|
{
|
|
title: '目标日历',
|
|
key: 'schedule',
|
|
icon: DateImg
|
|
},
|
|
{
|
|
title: '数据详情',
|
|
key: 'detail',
|
|
icon: DataImg
|
|
}
|
|
]
|
|
const EditContent = defineComponent(() => {
|
|
const store = useTomatoStore()
|
|
const form = ref<TomatoTarget>(
|
|
store.openShowModel || {
|
|
title: '',
|
|
id: uuid(),
|
|
finishTime: dayjs().valueOf(),
|
|
remindTime: null,
|
|
isCompleted: false
|
|
}
|
|
)
|
|
return () => (
|
|
<div class={'w-full flex flex-col bg-white items-start gap-y-2 pl-2'}>
|
|
<span class={'text-[16px] font-bold text-[#333] mt-[10px] text-center flex justify-center w-full'}>新建目标</span>
|
|
<div
|
|
class={'w-full h-[40px] mt-4 relative rounded-lg pl-[50px] bg-black/[0.05]'}
|
|
style={{
|
|
boxShadow: 'inset 0 1px 6px #0000000d'
|
|
}}
|
|
>
|
|
<img
|
|
src={AddImg}
|
|
alt="add img"
|
|
class={'left-4 absolute top-1/2 -translate-y-1/2 w-[15px] h-[16px]'}
|
|
/>
|
|
<input
|
|
value={form.value.title}
|
|
onInput={(e: any) => {
|
|
form.value.title = e.target.value
|
|
}}
|
|
type="text"
|
|
placeholder="未命名目标"
|
|
class={'w-full bg-transparent outline-none text-[14px] text-[#333] h-full'}
|
|
/>
|
|
</div>
|
|
<span class={'text-[#666] text-[14px] my-1'}>添加目标完成时间</span>
|
|
<div class={'flex items-center gap-x-2 '}>
|
|
<div
|
|
onClick={() => {
|
|
form.value.finishTime = dayjs().valueOf()
|
|
}}
|
|
class={clsx(
|
|
' px-6 py-2 rounded-lg cursor-pointer',
|
|
dayjs(form.value.finishTime).isSame(dayjs(), 'day')
|
|
? 'bg-[#EBF0FF] text-[#5a6eff]'
|
|
: 'bg-black/[0.05]'
|
|
)}
|
|
>
|
|
今天
|
|
</div>
|
|
<div
|
|
onClick={() => {
|
|
form.value.finishTime = dayjs().add(1, 'day').valueOf()
|
|
}}
|
|
class={clsx(
|
|
' px-6 py-2 rounded-lg cursor-pointer',
|
|
dayjs(form.value.finishTime).isSame(dayjs().add(1, 'day'), 'day')
|
|
? 'bg-[#EBF0FF] text-[#5a6eff]'
|
|
: 'bg-black/[0.05]'
|
|
)}
|
|
>
|
|
明天
|
|
</div>
|
|
<div
|
|
class={clsx(
|
|
' px-6 py-2 rounded-lg cursor-pointer relative',
|
|
!(
|
|
dayjs(form.value.finishTime).isSame(dayjs(), 'day') ||
|
|
dayjs(form.value.finishTime).isSame(dayjs().add(1, 'day'), 'day')
|
|
)
|
|
? 'bg-[#EBF0FF] text-[#5a6eff]'
|
|
: 'bg-black/[0.05]'
|
|
)}
|
|
>
|
|
{dayjs(form.value.finishTime).format('YYYY-MM-DD')}
|
|
<DatePicker
|
|
class={'absolute opacity-0 left-0 top-0 w-full h-full'}
|
|
onChange={(e) => {
|
|
form.value.finishTime = dayjs(e).valueOf()
|
|
}}
|
|
/>
|
|
</div>
|
|
</div>
|
|
<span class={'text-[#666] text-[14px] my-1'}>添加提醒时间</span>
|
|
<div
|
|
class={clsx(
|
|
' px-6 py-2 rounded-lg cursor-pointer group relative items-center flex gap-x-1',
|
|
(
|
|
form.value.remindTime
|
|
)
|
|
? 'bg-[#EBF0FF] text-[#5a6eff]'
|
|
: 'bg-black/[0.05]'
|
|
)}
|
|
>
|
|
{
|
|
<>
|
|
{!form.value.remindTime ? '选择时间' : dayjs(form.value.remindTime).format('HH:mm')}
|
|
<img src={DownImg} class={"w-[12px] object-cover "}></img>
|
|
<TimePicker
|
|
|
|
class={'absolute opacity-0 left-0 top-0 w-full h-full'}
|
|
onChange={(e) => {
|
|
form.value.remindTime = dayjs(e).valueOf()
|
|
}}
|
|
/>
|
|
<div class={"w-[16px] hidden group-hover:flex h-[16px] absolute -right-1 -top-1 bg-[#ddd] rounded-full items-center justify-center"}
|
|
onClick={() => {
|
|
form.value.remindTime = null
|
|
}}
|
|
>
|
|
<div class={"w-[12px] h-[3px] bg-white"}></div>
|
|
</div>
|
|
</>
|
|
}
|
|
|
|
</div>
|
|
<div class={"my-3 w-full text-center flex justify-center"}>
|
|
{
|
|
form.value.title ?
|
|
<button
|
|
onClick={() => {
|
|
const idx = store.state.list.findIndex(val => val.id === form.value.id)
|
|
if (idx !== -1) {
|
|
store.state.list[idx] = form.value
|
|
} else {
|
|
store.state.list.push(form.value)
|
|
|
|
}
|
|
store.openShowModel = undefined
|
|
}}
|
|
class={"px-10 py-2 font-bold text-[16px] text-white rounded-lg flex items-center justify-center cursor-pointer hover:opacity-90 duration-150"} style={{
|
|
background: 'linear-gradient(225deg,#642FFF 0%,#5162FF 100%)',
|
|
boxShadow: '0 2px 6px #00000026'
|
|
}}>确定</button> :
|
|
<button class={"px-10 py-2 font-bold text-[16px] text-white rounded-lg flex items-center bg-[#bdbdbd] justify-center duration-150"} style={{
|
|
boxShadow: '0 2px 6px #00000026'
|
|
}}>确定</button>
|
|
|
|
}
|
|
|
|
</div>
|
|
|
|
</div>
|
|
)
|
|
})
|
|
export default defineComponent(() => {
|
|
const select = ref(0)
|
|
const store = useTomatoStore()
|
|
return () => (
|
|
<div class="w-full h-full flex bg-white">
|
|
<Modal
|
|
class={'bg-white p-0 rounded-lg'}
|
|
zIndex={60}
|
|
footer={null}
|
|
centered
|
|
destroyOnClose
|
|
open={store.openShowModel !== undefined}
|
|
onCancel={() => {
|
|
store.openShowModel = undefined
|
|
}}
|
|
>
|
|
<EditContent></EditContent>
|
|
</Modal>
|
|
<div class={'w-[174px] h-full bg-[#F8F8F8] flex py-10 flex-col items-center'}>
|
|
<div
|
|
onClick={() => {
|
|
store.openShowModel = null
|
|
}}
|
|
class={
|
|
'w-[126px] h-[44px] leading-[44px] shadow-lg rounded-lg justify-center items-center gap-x-1 font-bold text-white flex hover:opacity-90 cursor-pointer '
|
|
}
|
|
style={{
|
|
background: 'linear-gradient(225deg,#5A6EFF 0%,#519DFF 100%)'
|
|
}}
|
|
>
|
|
<img class={'w-[16px] h-[16px]'} src={PlusIcon} alt="" />
|
|
新建目标
|
|
</div>
|
|
<div class={'flex flex-col gap-y-1 mt-5 w-full'}>
|
|
{workTab.map((item, index) => {
|
|
return (
|
|
<div
|
|
onClick={() => {
|
|
select.value = index
|
|
}}
|
|
class={clsx(
|
|
'w-full flex pl-6 items-center py-4 border-l-[8px] gap-x-2 cursor-pointer',
|
|
select.value === index
|
|
? 'bg-[#90adff2e] text-[#5a6eff] border-[#5a6eff]'
|
|
: 'text-[#666666] border-transparent hover:bg-[#97aff02e]'
|
|
)}
|
|
>
|
|
<img class={'w-[18px] h-[18px]'} src={item.icon} alt="" />
|
|
<span>{item.title}</span>
|
|
</div>
|
|
)
|
|
})}
|
|
</div>
|
|
</div>
|
|
<div class={'flex-1 w-0 h-full p-3'}>
|
|
{select.value === 0 ? (
|
|
<List></List>
|
|
) : select.value === 1 ? (
|
|
<Calendar />
|
|
) : select.value === 2 ? (
|
|
<DataDetail />
|
|
) : (
|
|
<>loading</>
|
|
)}
|
|
</div>
|
|
</div>
|
|
)
|
|
})
|