cxyy-web2/src/views/two/add/news2.vue

<template>
  <div class="index">
    <el-row>
      <el-col :span="24" class="main animate__animated animate__backInRight" v-loading="loading">
        <custom-form v-model="form" :fields="formFields" :rules="rules" @save="toSave" @draftSave="toDraftSave">
          <template #logo>
            <custom-upload model="logo" :list="form.logo" :limit="1" url="/files/web/cxyy_news/upload" @change="onUpload" listType="picture-card"></custom-upload>
          </template>
          <template #is_use>
            <el-radio v-for="i in isUseList" :key="i.id" :label="i.value">{{ i.label }}</el-radio>
          </template>
          <template #tags>
            <el-select v-model="form.tags" multiple filterable allow-create default-first-option :reserve-keyword="false" placeholder="请选择标签" style="width: 100%">
              <el-option v-for="item in tagsList" :key="item.id" :label="item.title" :value="item.title" />
            </el-select>
          </template>
          <template #content>
            <WangEditor v-model="form.content" />
          </template>
        </custom-form>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import moment from 'moment'
import { cloneDeep, get } from 'lodash-es'
const $checkRes = inject('$checkRes')
import { UserStore } from '@/store/user'
const userStore = UserStore()
const user = computed(() => userStore.user)
// 接口
import { NewsStore } from '@/store/api/platform/news'
import { DictDataStore } from '@/store/api/system/dictData'
import { TagsStore } from '@/store/api/system/tags'
const store = NewsStore()
const dictDataStore = DictDataStore()
const tagsStore = TagsStore()
// 加载中
const loading = ref(false)

// 字典表
const isUseList = ref([])
const statusList = ref([])
const tagsList = ref([])

const form = ref({ logo: [], type: '2' })
const formFields = ref([
  { label: '封面', model: 'logo', custom: true },
  { label: '标题', model: 'title' },
  { label: '标签', model: 'tags', custom: true },
  { label: '发布人', model: 'person', options: { disabled: true } },
  { label: '发布时间', model: 'time', type: 'date', options: { disabled: true } },
  { label: '浏览量', model: 'number', options: { disabled: true } },
  { label: '是否公开', model: 'is_use', type: 'radio' },
  { label: '内容', model: 'content', custom: true }
])
const rules = reactive({ name: [{ required: true, message: '请输入标题', trigger: 'blur' }] })
// 请求
onMounted(async () => {
  loading.value = true
  await searchOther()
  loading.value = false
})
const searchOther = async () => {
  let result
  // 是否使用
  result = await dictDataStore.query({ code: 'isUse', is_use: '0' })
  if ($checkRes(result)) isUseList.value = result.data
  // 状态
  result = await dictDataStore.query({ code: 'examStatus', is_use: '0' })
  if ($checkRes(result)) statusList.value = result.data
  // 标签
  result = await tagsStore.query({ is_use: '0' })
  if ($checkRes(result)) tagsList.value = result.data
}
const toSave = async () => {
  const data = cloneDeep(form.value)
  const other = { status: '0', type: '2', user: user.value.id, time: moment().format('YYYY-MM-DD'), person: user.value.nick_name }
  let res
  if (get(data, 'id')) res = await store.update({ ...data, ...other })
  else res = await store.create({ ...data, ...other })
  if (res.errcode == 0) {
    ElMessage({ message: `发布成功可以上历史发布查看`, type: 'success' })
    form.value = {}
  }
}
const toDraftSave = async () => {
  const data = cloneDeep(form.value)
  const other = { status: '-2', type: '2', user: user.value.id, time: moment().format('YYYY-MM-DD'), person: user.value.nick_name }
  let res
  if (get(data, 'id')) res = await store.update({ ...data, ...other })
  else res = await store.create({ ...data, ...other })
  if (res.errcode == 0) {
    ElMessage({ message: `发布成功可以上历史发布查看`, type: 'success' })
    form.value = {}
  }
}

// 上传图片
const onUpload = (e) => {
  const { model, value } = e
  form.value[model] = value
}
</script>
<style scoped lang="scss"></style>