xyyd-fatfox/src/widgets/work/Modal.tsx

import clsx from 'clsx'
import { defineComponent, ref } from 'vue'
import PlusIcon from '~/public/icons/work/tomato_work_add_icon.png'
import DataImg from '~/public/icons/work/dataImg.png'
import DateImg from '~/public/icons/work/dateImg.png'
import ListImg from '~/public/icons/work/listImg.png'
import AddImg from '~/public/icons/work/addTarget.png'
import List from './modal_view/list'
import { DatePicker, Modal } from 'ant-design-vue'
import type { TomatoTarget } from './useTomatoStore'
import dayjs from 'dayjs'
import useTomatoStore from './useTomatoStore'
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: '',
      finishTime: dayjs().valueOf(),
      remindTime: -1
    }
  )
  return () => (
    <div class={'w-full  h-[300px] flex flex-col bg-white  gap-y-2  items-start pl-2'}>
      <span class={'text-[16px] font-bold text-[#333] mt-[10px]'}>新建目标</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
          v-modal={form.value.title}
          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 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]'
        )}
      >
        {form.value.remindTime === null ? (
          '不提醒'
        ) : (
          <>
            {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>
  )
})
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
        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 '
          }
          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 ? (
          <div>目标日历</div>
        ) : select.value === 2 ? (
          <div>数据详情</div>
        ) : (
          <>loading</>
        )}
      </div>
    </div>
  )
})