orchestra-app/src/school/orchestra/modal/add-information.tsx

import OHeader from '@/components/o-header'
import OSticky from '@/components/o-sticky'
import OUpload from '@/components/o-upload'
import request from '@/helpers/request'
import { verifyUrl } from '@/helpers/toolsValidate'
import router from '@/router'
import { state } from '@/state'
import { Button, Field, Form, showNotify, showToast } from 'vant'
import { defineComponent, onMounted, reactive, ref, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import styles from './add-information.module.less'

export default defineComponent({
  name: 'add-information',
  props: {
    selectType: {
      type: String,
      default: 'add'
    },
    selectItem: {
      type: Object,
      default: {}
    }
  },
  emits: ['close', 'getList'],
  setup(props, { emit }) {
    const route = useRoute()
    const router = useRouter()
    const header = ref('添加资讯')
    const forms = reactive({
      type: 'HOT_CONSULTATION',
      clientType: 'SCHOOL',
      coverImage: null,
      title: null,
      linkUrl: '',
      linkType: 'OUT',
      status: true,
      summary: null
    })
    const onSubmit = async () => {
      if (!forms.coverImage) {
        showToast('请上传封面图片')
        return
      } else if (!forms.title) {
        showToast('请输入资讯标题')
        return
      } else if (!forms.summary) {
        showToast('请输入内容简介')
        return
      } else if (!forms.linkUrl) {
        showToast('请输入链接')
        return
      } else if (!verifyUrl(forms.linkUrl)) {
        showToast('链接输入有误')
        return
      }
      try {
        if (!route.query.id) {
          await request.post('/api-school/sysNewsInformation/save', {
            data: {
              ...forms
            }
          })
          // showNotify({ type: 'primary', message: '添加成功' })
        } else {
          await request.post('/api-school/sysNewsInformation/update', {
            data: {
              ...forms,
              id: route.query.id
            }
          })
          // showNotify({ type: 'primary', message: '修改成功' })
        }

        // emit('close')
        // emit('getList')
        router.back()
      } catch {
        //
      }
    }

    onMounted(async () => {
      if (route.query.id) {
        header.value = '编辑资讯'

        const { data } = await request.get(
          '/api-school/sysNewsInformation/detail/' + route.query.id
        )
        forms.linkUrl = data.linkUrl
        forms.coverImage = data.coverImage
        forms.summary = data.summary
        forms.title = data.title
      }
    })

    return () => (
      <div class={styles.addInformation}>
        <OHeader title={header.value} desotry={false} />

        <div class={styles.title}>
          <i class={[styles.icon, styles.icon1]}></i>请上传封面图片
        </div>
        <OUpload class={styles.upload} v-model:modelValue={forms.coverImage} />

        <div class={styles.title}>
          <i class={[styles.icon, styles.icon2]}></i>资讯标题
        </div>
        <Field
          placeholder="请输入资讯标题"
          class={styles.field}
          v-model={forms.title}
          autofocus={false}
        />

        <div class={styles.title}>
          <i class={[styles.icon, styles.icon3]}></i>内容简介
        </div>
        <Field
          placeholder="请输入资讯内容简要概述"
          type="textarea"
          rows={2}
          class={styles.field}
          v-model={forms.summary}
          autofocus={false}
        />

        <div class={styles.title}>
          <i class={[styles.icon, styles.icon4]}></i>添加链接
        </div>
        <Field placeholder="请输入链接" class={styles.field} v-model={forms.linkUrl} />

        <div class={'btnGroup'} style={{ marginTop: '24px' }}>
          <Button type="primary" block round onClick={onSubmit}>
            {!route.query.id ? '发布资讯' : '确认修改'}
          </Button>
        </div>
      </div>
    )
  }
})