cxyy-web2/src/views/two/add/demand.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 #is_use>
            <el-radio v-for="i in isUseList" :key="i.id" :label="i.value">{{ i.label }}</el-radio>
          </template>
          <template #field>
            <el-option v-for="i in fieldList" :key="i.id" :label="i.label" :value="i.label"></el-option>
          </template>
          <template #industry>
            <el-option v-for="i in sectorList" :key="i.id" :label="i.title" :value="i.title"></el-option>
          </template>
          <template #urgent>
            <el-option v-for="i in urgentList" :key="i.id" :label="i.label" :value="i.value"></el-option>
          </template>
          <template #method>
            <el-option v-for="i in methodList" :key="i.id" :label="i.label" :value="i.value"></el-option>
          </template>
          <template #area>
            <el-cascader v-model="form.area" :props="{ value: 'name', label: 'name' }" :options="cityList" style="width: 100%" />
          </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>
        </custom-form>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { cloneDeep, get } from 'lodash-es'
const $checkRes = inject('$checkRes')
import { UserStore } from '@/store/user'
const userStore = UserStore()
const user = computed(() => userStore.user)
// 接口
import { DemandStore } from '@/store/api/platform/demand'
import { DictDataStore } from '@/store/api/system/dictData'
import { TagsStore } from '@/store/api/system/tags'
import { SectorStore } from '@/store/api/platform/sector'
import { RegionStore } from '@/store/api/system/region'
const regionStore = RegionStore()
const store = DemandStore()
const dictDataStore = DictDataStore()
const tagsStore = TagsStore()
const sectorStore = SectorStore()
// 加载中
const loading = ref(false)
// 字典表
const isUseList = ref([])
const statusList = ref([])
const methodList = ref([])
const urgentList = ref([])
const fieldList = ref([])
const cityList = ref([])
const demandList = ref([])
const tagsList = ref([])
const sectorList = ref([])

const form = ref({ time: [] })
const formFields = ref([
  { label: '需求名称', model: 'name' },
  { label: '标签', model: 'tags', custom: true, mark: 'tags' },
  { label: '所属产业', model: 'industry', type: 'select' },
  { label: '行业领域', model: 'field' },
  { label: '需求紧急度', model: 'urgent', type: 'select', mark: 'dict', code: 'urgent' },
  { label: '合作方式', model: 'method', type: 'select', mark: 'dict', code: 'method' },
  { label: '价格(万元)', model: 'money' },
  { label: '所属企业', model: 'company' },
  { label: '企业简况', model: 'company_brief', type: 'textarea' },
  { label: '联系人', model: 'contacts' },
  { label: '联系电话', model: 'tel' },
  { label: '年份', model: 'year', type: 'year' },
  { label: '月份', model: 'month', type: 'month' },
  { label: '技术需求名称', model: 'tec_name' },
  { label: '待解决问题', model: 'question', type: 'textarea' },
  { label: '需求地区', model: 'area', custom: true, mark: 'area' },
  { label: '发布时间', model: 'time', type: 'daterange', mark: 'time' },
  { label: '是否公开', model: 'is_use', type: 'radio', mark: 'dict', code: 'isUse' },
  { label: '简介', model: 'brief', type: 'textarea' }
])
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 dictDataStore.query({ code: 'method', is_use: '0' })
  if ($checkRes(result)) methodList.value = result.data
  // 需求紧急度
  result = await dictDataStore.query({ code: 'urgent', is_use: '0' })
  if ($checkRes(result)) urgentList.value = result.data
  // 技术领域
  result = await dictDataStore.query({ code: 'field', is_use: '0' })
  if ($checkRes(result)) fieldList.value = result.data
  // 需求状态
  result = await dictDataStore.query({ code: 'demandStatus', is_use: '0' })
  if ($checkRes(result)) demandList.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
  // 城市
  result = await regionStore.area({ level: 'province', code: 22 })
  if ($checkRes(result)) cityList.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' })
}
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' })
}
</script>
<style scoped lang="scss"></style>