cxyy-web2/src/views/two/add/match.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 #video>
            <custom-upload model="video" :list="form.video" :limit="1" url="/files/web/cxyy_match/upload" @change="onUpload"></custom-upload>
          </template>
          <template #file>
            <custom-upload model="file" :list="form.file" :limit="1" listType="picture-card" url="/files/web/cxyy_match/upload" @change="onUpload"></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 #industry>
            <el-option v-for="i in sectorList" :key="i.id" :label="i.title" :value="i.title"></el-option>
          </template>
          <template #scale>
            <el-radio v-for="i in scaleList" :key="i.id" :label="i.value">{{ i.label }}</el-radio>
          </template>
          <template #match_type>
            <el-radio v-for="i in matchTypeList" :key="i.id" :label="i.value">{{ i.label }}</el-radio>
          </template>
          <template #type>
            <el-option v-for="i in typeList" :key="i.id" :label="i.label" :value="i.value"></el-option>
          </template>
          <template #form>
            <el-option v-for="i in formList" :key="i.id" :label="i.label" :value="i.value"></el-option>
          </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 #rules>
            <div class="rules">
              <custom-form v-model="form.rules" :fields="rulesFields" :useSave="false">
                <template #rules1>
                  <WangEditor v-model="form.rules.rules1" />
                </template>
                <template #rules2>
                  <WangEditor v-model="form.rules.rules2" />
                </template>
                <template #rules3>
                  <WangEditor v-model="form.rules.rules3" />
                </template>
                <template #rules4>
                  <WangEditor v-model="form.rules.rules4" />
                </template>
                <template #rules5>
                  <WangEditor v-model="form.rules.rules5" />
                </template>
                <template #rules6>
                  <WangEditor v-model="form.rules.rules6" />
                </template>
                <template #rules7>
                  <WangEditor v-model="form.rules.rules7" />
                </template>
                <template #rules8>
                  <WangEditor v-model="form.rules.rules8" />
                </template>
                <template #rules9>
                  <WangEditor v-model="form.rules.rules9" />
                </template>
                <template #rules10>
                  <WangEditor v-model="form.rules.rules10" />
                </template>
                <template #rules11>
                  <WangEditor v-model="form.rules.rules11" />
                </template>
                <template #rules12>
                  <WangEditor v-model="form.rules.rules12" />
                </template>
              </custom-form>
            </div>
          </template>
          <template #brief>
            <WangEditor v-model="form.brief" />
          </template>
          <template #process>
            <el-col :span="24" class="tables">
              <el-col :span="24" class="tables_1">
                <el-button type="primary" @click="addProcess()">添加</el-button>
              </el-col>
              <el-col :span="24">
                <el-table :data="processList" border>
                  <el-table-column type="index" label="序号" width="80" align="center"> </el-table-column>
                  <el-table-column prop="name" label="流程名称" align="center">
                    <template #default="scope">
                      <el-input v-model="scope.row.name" placeholder="请输入流程名称" />
                    </template>
                  </el-table-column>
                  <el-table-column prop="order_num" label="排序" align="center">
                    <template #default="scope">
                      <el-input v-model="scope.row.order_num" type="number" placeholder="请输入排序" />
                    </template>
                  </el-table-column>
                  <el-table-column prop="is_use" label="是否启用" align="center">
                    <template #default="scope">
                      <el-select v-model="scope.row.is_use" placeholder="请选择是否启用">
                        <el-option v-for="item in isUseList" :key="item.value" :label="item.label" :value="item.value" />
                      </el-select>
                    </template>
                  </el-table-column>
                  <el-table-column label="操作" align="center" width="100">
                    <template #default="scope">
                      <el-button type="danger" @click="delProcess(scope.row)">删除</el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </el-col>
            </el-col>
          </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 { MatchStore } from '@/store/api/platform/match'
import { ProcessStore } from '@/store/api/platform/process'
import { DictDataStore } from '@/store/api/system/dictData'
import { TagsStore } from '@/store/api/system/tags'
import { SectorStore } from '@/store/api/platform/sector'
const store = MatchStore()
const dictDataStore = DictDataStore()
const tagsStore = TagsStore()
const sectorStore = SectorStore()
const processStore = ProcessStore()
// 加载中
const loading = ref(false)

// 字典表
const isUseList = ref([])
const statusList = ref([])
const typeList = ref([])
const matchList = ref([])
const formList = ref([])
const tagsList = ref([])
const sectorList = ref([])
const matchTypeList = ref([])
const scaleList = ref([])
// 流程列表
const processList = ref([])

const form = ref({ time: [], rules: {} })
const formFields = ref([
  { label: '封面', model: 'file', custom: true },
  { label: '赛事名称', model: 'name' },
  { label: '标签', model: 'tags', custom: true },
  { label: '类型', model: 'type', type: 'select' },
  { label: '赛事规模', model: 'scale', type: 'radio' },
  { label: '赛事类型', model: 'match_type', type: 'radio' },
  { label: '路由', model: 'href', display: () => form.value.match_type == '1' },
  { label: '组织单位', model: 'work' },
  { label: '所属产业', model: 'industry', type: 'select' },
  { label: '类别', model: 'form', type: 'select' },
  { label: '奖金(万元)', model: 'money' },
  { label: '有效期', model: 'time', type: 'daterange' },
  { label: '是否启用', model: 'is_use', type: 'radio' },
  { model: 'rules', custom: true },
  { label: '简介', model: 'brief', custom: true },
  { label: '视频', model: 'video', custom: true },
  { label: '赛事流程', model: 'process', custom: true }
])
// 赛事规则
const rulesFields = ref([
  { label: '大赛背景', model: 'rules1', custom: true },
  { label: '大赛主题和目标', model: 'rules2', custom: true },
  { label: '大赛基本情况介绍', model: 'rules3', custom: true },
  { label: '赛题任务', model: 'rules4', custom: true },
  { label: '赛程安排', model: 'rules5', custom: true },
  { label: '赛制阶段', model: 'rules6', custom: true },
  { label: '参赛资格', model: 'rules7', custom: true },
  { label: '参赛报名', model: 'rules8', custom: true },
  { label: '奖项设置与奖励办法', model: 'rules9', custom: true },
  { label: '组织单位', model: 'rules10', custom: true },
  { label: '赛事联络', model: 'rules11', custom: true },
  { label: '赛事交流', model: 'rules12', custom: true }
])
const rules = reactive({ name: [{ required: true, message: '请输入赛事名称', trigger: 'blur' }], form: [{ 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: 'matchType', is_use: '0' })
  if ($checkRes(result)) typeList.value = result.data
  // 赛事类型
  result = await dictDataStore.query({ code: 'activeType', is_use: '0' })
  if ($checkRes(result)) matchTypeList.value = result.data
  // 类别
  result = await dictDataStore.query({ code: 'matchForm', is_use: '0' })
  if ($checkRes(result)) formList.value = result.data
  // 状态
  result = await dictDataStore.query({ code: 'examStatus', is_use: '0' })
  if ($checkRes(result)) statusList.value = result.data
  // 赛事状态
  result = await dictDataStore.query({ code: 'matchStatus', is_use: '0' })
  if ($checkRes(result)) matchList.value = result.data
  // 赛事规模
  result = await dictDataStore.query({ code: 'matchScale', is_use: '0' })
  if ($checkRes(result)) scaleList.value = result.data
  // 标签
  result = await tagsStore.query({ is_use: '0' })
  if ($checkRes(result)) tagsList.value = result.data
  // 行业
  result = await sectorStore.query({ is_use: '0' })
  if ($checkRes(result)) sectorList.value = result.data
}
const toSave = async () => {
  const data = cloneDeep(form.value)
  const other = { status: '0', user: user.value.id }
  if (data.time && data.time.length > 1) {
    data.start_time = data.time[0]
    data.end_time = data.time[1]
  }
  delete data.time
  let res
  if (get(data, 'id')) res = await store.update({ ...data, ...other })
  else res = await store.create({ ...data, ...other })
  if ($checkRes(res, true)) {
    ElMessage({ message: `发布成功可以上历史发布查看`, type: 'success' })
    form.value = {}
  }
}
const toDraftSave = async () => {
  const data = cloneDeep(form.value)
  const other = { status: '-2', user: user.value.id }
  if (data.time && data.time.length > 1) {
    data.start_time = data.time[0]
    data.end_time = data.time[1]
  }
  delete data.time
  let res
  if (get(data, 'id')) res = await store.update({ ...data, ...other })
  else res = await store.create({ ...data, ...other })
  if ($checkRes(res, true)) {
    ElMessage({ message: `发布成功可以上历史发布查看`, type: 'success' })
    form.value = {}
  }
}
// 上传图片
const onUpload = (e) => {
  const { model, value } = e
  form.value[model] = value
}
// 流程添加
const addProcess = () => {
  let list = processList.value || []
  list.push({ sid: moment().valueOf(), name: '', time: '', is_use: '' })
  processList.value = list
}
// 流程删除
const delProcess = async (e) => {
  let list = processList.value.filter((i) => i.sid != e.sid)
  processList.value = list
  if (e.id) await processStore.del(e.id)
}
</script>
<style scoped lang="scss">
.main {
  .tables {
    .tables_1 {
      margin: 0 0 10px 0;
    }
  }
}
</style>