cxyy-web/src/views/two/parts/demand.vue

<template>
  <div class="demand">
    <el-form ref="DemandRules" :model="form" :rules="rules" class="form">
      <el-form-item label="需求名称" prop="name">
        <el-input size="large" clearable v-model="form.name" placeholder="请输入需求名称"> </el-input>
      </el-form-item>

      <el-form-item label="行业领域" prop="field">
        <el-select size="large" v-model="form.field" clearable placeholder="请选择行业领域">
          <el-option v-for="(item, index) in fieldList" :key="index" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>

      <el-form-item label="需求紧急度" prop="urgent">
        <el-select size="large" v-model="form.urgent" clearable placeholder="请选择需求紧急度">
          <el-option v-for="(item, index) in urgentList" :key="index" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>

      <el-form-item label="合作方式" prop="method">
        <el-select size="large" v-model="form.method" clearable placeholder="请选择合作方式">
          <el-option v-for="(item, index) in methodList" :key="index" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>

      <el-form-item label="价格(万元)" prop="money">
        <el-input size="large" clearable v-model="form.money" placeholder="请输入价格(万元)"> </el-input>
      </el-form-item>

      <el-form-item label="需求地区" prop="area">
        <el-cascader size="large" v-model="form.area" :props="{ value: 'label', label: 'label' }" :options="cityList" style="width: 100%" />
      </el-form-item>

      <el-form-item label="有效期" prop="time">
        <el-date-picker size="large" v-model="form.time" type="daterange" format="YYYY-MM-DD" value-format="YYYY-MM-DD" range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间" />
      </el-form-item>

      <el-form-item label="是否启用" prop="is_use">
        <el-radio-group v-model="form.is_use">
          <el-radio v-for="(item, index) in isUseList" :key="index" :value="item.value">{{ item.label }}</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-row :gutter="20" align="middle">
        <el-col :span="12">
          <el-form-item label="上传图片" prop="file">
            <custom-upload model="file" :list="form.file" :limit="1" url="/files/web/cxyy_demand/upload" @change="onUpload"></custom-upload>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="上传视频" prop="video">
            <custom-upload model="video" :list="form.video" :limit="1" url="/files/web/cxyy_demand/upload" @change="onUpload"></custom-upload>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="简介" prop="brief">
        <el-input size="large" v-model="form.brief" :autosize="{ minRows: 2, maxRows: 8 }" type="textarea" placeholder="请输入简介" />
      </el-form-item>
      <el-col :span="24" class="button">
        <el-button type="primary" @click="submitForm(DemandRules)">发布</el-button>
      </el-col>
    </el-form>
    <a-modal v-model:open="open" title="相关推荐" @ok="handleOk"> 是否查看相关供给推荐 </a-modal>
  </div>
</template>
<script setup>
import { cloneDeep, get } from 'lodash-es'
const $checkRes = inject('$checkRes')
import { getCity } from '@/utils/city'
import { DictDataStore } from '@/store/api/system/dictData'
import { DemandStore } from '@/store/api/platform/demand'
const demandStore = DemandStore()
const dictDataStore = DictDataStore()
const form = ref({})
const DemandRules = ref()
import { UserStore } from '@/store/user'
const userStore = UserStore()
const user = computed(() => userStore.user)
// 路由
const router = useRouter()
// 字典表
const isUseList = ref([])
const statusList = ref([])
const methodList = ref([])
const urgentList = ref([])
const fieldList = ref([])
const cityList = ref([])
const demandList = ref([])
const rules = reactive({
  name: [{ required: true, message: '请输入需求名称', trigger: 'blur' }],
  field: [{ required: true, message: '请选择行业领域', trigger: 'change' }],
  urgent: [{ required: true, message: '请选择需求紧急度', trigger: 'change' }],
  method: [{ required: true, message: '请选择合作方式', trigger: 'change' }],
  money: [{ required: true, message: '请输入价格', trigger: 'blur' }],
  area: [{ required: true, message: '请选择需求地区', trigger: 'change' }],
  time: [{ required: true, message: '请选择起始时间', trigger: 'change' }],
  is_use: [{ required: true, message: '请选择是否使用', trigger: 'change' }],
  brief: [{ required: true, message: '请输入简介', trigger: 'blur' }]
})
// 请求
onMounted(async () => {
  getCity().then((response) => {
    cityList.value = response.address
  })
  await searchOther()
})
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
}
// 上传图片
const onUpload = (e) => {
  const { model, value } = e
  form.value[model] = value
}
// 保存
const submitForm = async (formEl) => {
  if (!formEl) return
  await formEl.validate(async (valid, fields) => {
    if (valid) {
      const data = cloneDeep(form.value)
      const other = { status: '0', user: user.value.id }
      let res
      if (get(data, '_id')) res = await demandStore.update({ ...data, ...other })
      else await demandStore.create({ ...data, ...other })
      if ($checkRes(res, true)) {
        open.value = true
      }
    } else {
      console.log('error submit!', fields)
    }
  })
}
const open = ref(false)
const handleOk = () => {
  const query = { type: 'search' }
  router.push({ path: '/search', query })
}
</script>
<style scoped lang="scss">
:deep(.el-form-item) {
  margin-bottom: 10px !important;
}
:deep(.el-form-item__label) {
  margin-bottom: 10px !important;
}
.el-form-item__label {
  justify-content: flex-start !important;
  max-width: 120px !important;
}
.button {
  text-align: center;
}
</style>