technique_admin/src/views/match/info/index.vue

<template>
  <div class="main animate__animated animate__backInRight" v-loading="loading">
    <custom-search-bar
      :fields="fields.filter((f) => f.isSearch)"
      v-model="searchForm"
      @search="search"
      @reset="toReset"
    >
      <template #type>
        <el-option v-for="i in typeList" :key="i._id" :label="i.label" :value="i.value"></el-option>
      </template>
      <template #industry>
        <el-option
          v-for="i in industryList"
          :key="i._id"
          :label="i.label"
          :value="i.value"
        ></el-option>
      </template>
    </custom-search-bar>
    <custom-button-bar :fields="buttonFields" @add="toAdd"></custom-button-bar>
    <custom-table
      :data="data"
      :fields="fields"
      @query="search"
      :total="total"
      :opera="opera"
      @sign="toSign"
      @exam="toExam"
      @edit="toEdit"
      @delete="toDelete"
    >
      <template #is_use="{ row }">
        <el-tag v-if="row.is_use == '0'" type="success" @click="toUse(row, '1')">启用</el-tag>
        <el-tag v-else type="info" @click="toUse(row, '0')">禁用</el-tag>
      </template>
    </custom-table>
    <el-dialog
      v-model="dialog.show"
      :title="dialog.title"
      :destroy-on-close="false"
      @close="toClose"
    >
      <el-row>
        <el-col :span="24" v-if="dialog.type == '1'">
          <custom-form v-model="form" :fields="formFields" :rules="rules" @save="toSave">
            <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 industryList"
                :key="i._id"
                :label="i.label"
                :value="i.value"
              ></el-option>
            </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 #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>
          </custom-form>
        </el-col>
        <el-col :span="24" v-if="dialog.type == '2'">
          <custom-form
            v-model="examForm"
            :fields="examFormFields"
            :rules="examRules"
            @save="toExamSave"
          >
            <template #status>
              <el-option
                v-for="i in statusList"
                :key="i._id"
                :label="i.label"
                :value="i.value"
              ></el-option>
            </template>
          </custom-form>
        </el-col>
      </el-row>
    </el-dialog>
  </div>
</template>

<script setup>
// API 引用
import { cloneDeep, get } from 'lodash-es'
const $checkRes = inject('$checkRes')
const { t } = useI18n()
// 路由
const router = useRouter()
// 接口
import { MatchStore } from '@/store/api/platform/match'
import { DictDataStore } from '@/store/api/system/dictData'
const store = MatchStore()
const dictDataStore = DictDataStore()
const data = ref([])
const searchForm = ref({})
const fields = [
  { label: t('pages.match.name'), model: 'name', isSearch: true },
  {
    label: t('pages.match.type'),
    model: 'type',
    isSearch: true,
    type: 'select',
    format: (i) => getDict(i, 'type')
  },
  {
    label: t('pages.match.industry'),
    model: 'industry',
    type: 'select',
    isSearch: true,
    format: (i) => getDict(i, 'industry')
  },
  { label: t('pages.match.money'), model: 'money' },
  {
    label: t('pages.match.is_use'),
    model: 'is_use',
    custom: true,
    format: (i) => getDict(i, 'is_use')
  },
  {
    label: t('pages.match.match_status'),
    model: 'match_status',
    format: (i) => getDict(i, 'match')
  },
  { label: t('pages.match.status'), model: 'status', format: (i) => getDict(i, 'status') }
]
const opera = [
  { label: t('common.sign'), method: 'sign', type: 'warning' },
  {
    label: t('common.update'),
    method: 'edit'
  },
  { label: t('common.exam'), method: 'exam', type: 'warning', display: (i) => i.status === '0' },
  {
    label: t('common.delete'),
    method: 'delete',
    confirm: true,
    type: 'danger',
    display: (i) => i.is_use === '1' && i.match_status === '0'
  }
]
const buttonFields = [{ label: t('common.create'), method: 'add' }]
let skip = 0
let limit = inject('limit')
const total = ref(0)
// 字典表
const isUseList = ref([])
const statusList = ref([])
const typeList = ref([])
const matchList = ref([])
const formList = ref([])
const industryList = ref([])
// 加载中
const loading = ref(false)
const formFields = ref([
  { label: t('pages.match.name'), model: 'name' },
  { label: t('pages.match.type'), model: 'type', type: 'select' },
  { label: t('pages.match.work'), model: 'work' },
  { label: t('pages.match.industry'), model: 'industry', type: 'select' },
  { label: t('pages.match.form'), model: 'form', type: 'select' },
  { label: t('pages.match.money'), model: 'money' },
  { label: t('pages.match.time'), model: 'time', type: 'daterange' },
  { label: t('pages.match.is_use'), model: 'is_use', type: 'radio' },
  { label: t('pages.match.rules'), model: 'rules', custom: true },
  { label: t('pages.match.brief'), model: 'brief', custom: true }
])
const rules = reactive({
  name: [{ required: true, message: t('pages.match.titleMessage'), trigger: 'blur' }]
})
const dialog = ref({ type: '1', show: false, title: t('pages.match.addDialogTitle') })
const form = ref({ rules: {} })
// 审核
const examFormFields = [{ label: t('pages.match.status'), model: 'status', type: 'select' }]
const examRules = reactive({
  status: [{ required: true, message: t('common.statusMessage'), trigger: 'blur' }]
})
const examForm = ref({})
// 赛事规则
const rulesFields = ref([
  { label: t('pages.match.rules1'), model: 'rules1', custom: true },
  { label: t('pages.match.rules2'), model: 'rules2', custom: true },
  { label: t('pages.match.rules3'), model: 'rules3', custom: true },
  { label: t('pages.match.rules4'), model: 'rules4', custom: true },
  { label: t('pages.match.rules5'), model: 'rules5', custom: true },
  { label: t('pages.match.rules6'), model: 'rules6', custom: true },
  { label: t('pages.match.rules7'), model: 'rules7', custom: true },
  { label: t('pages.match.rules8'), model: 'rules8', custom: true },
  { label: t('pages.match.rules9'), model: 'rules9', custom: true },
  { label: t('pages.match.rules10'), model: 'rules10', custom: true },
  { label: t('pages.match.rules11'), model: 'rules11', custom: true },
  { label: t('pages.match.rules12'), model: 'rules12', custom: true }
])
// 请求
onMounted(async () => {
  loading.value = true
  await searchOther()
  await search({ skip, limit })
  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: '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: 'matchIndustry', is_use: '0' })
  if ($checkRes(result)) industryList.value = result.data
}
const search = async (query = { skip: 0, limit }) => {
  const info = { skip: query.skip, limit: query.limit, ...searchForm.value }
  const res = await store.query(info)
  if (res.errcode == '0') {
    data.value = res.data
    total.value = res.total
  }
}
// 字典数据转换
const getDict = (data, model) => {
  let res
  if (model == 'is_use') res = isUseList.value.find((f) => f.value == data)
  else if (model == 'status') res = statusList.value.find((f) => f.value == data)
  else if (model == 'industry') res = industryList.value.find((f) => f.value == data)
  else if (model == 'type') res = typeList.value.find((f) => f.value == data)
  else if (model == 'match') res = matchList.value.find((f) => f.value == data)
  return get(res, 'label')
}
// 添加
const toAdd = () => {
  dialog.value = { type: '1', show: true, title: t('pages.match.addDialogTitle') }
}
// 修改
const toEdit = (data) => {
  form.value = data
  dialog.value = { type: '1', show: true, title: t('pages.match.upDialogTitle') }
}
// 报名管理
const toSign = (data) => {
  router.push({ path: '/match/sign', query: { id: data._id } })
}
// 删除
const toDelete = async (data) => {
  const res = await store.del(data._id)
  if ($checkRes(res, true)) {
    search({ skip: 0, limit })
  }
}
const toSave = async () => {
  const data = cloneDeep(form.value)
  const other = { status: '0' }
  let res
  if (get(data, '_id')) res = await store.update({ ...data, ...other })
  else res = await store.create({ ...data, ...other })
  if ($checkRes(res, true)) {
    search({ skip: 0, limit })
    toClose()
  }
}
// 审核
const toExam = (data) => {
  examForm.value = data
  dialog.value = { type: '2', show: true, title: t('pages.match.examDialogTitle') }
}
// 审核保存
const toExamSave = async () => {
  const data = cloneDeep(examForm.value)
  let res = await store.update(data)
  if ($checkRes(res, true)) {
    search({ skip: 0, limit })
    toClose()
  }
}
// 开启或禁用
const toUse = async (data, is_use) => {
  ElMessageBox.confirm(`确定修改【${data.name}】数据?`, '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(async () => {
      let res = await store.update({ _id: get(data, '_id'), is_use })
      if ($checkRes(res, true)) {
        search({ skip: 0, limit })
      }
    })
    .catch(() => {})
}
// 重置
const toReset = async () => {
  searchForm.value = {}
  await search({ skip, limit })
}
const toClose = () => {
  form.value = { rules: {} }
  dialog.value = { show: false }
}
</script>
<style scoped lang="scss">
.rules {
  width: 100%;
  border: 1px solid #dcdfe6;
  padding: 10px;
  border-radius: 5px;
  :deep(.el-form-item) {
    margin-bottom: 18px !important;
  }
  :deep(.el-form-item__label-wrap) {
    margin-left: 0 !important;
  }
}
</style>