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

<template>
  <div class="supply">
    <el-form ref="SupplyRules" :model="form" :rules="rules" label-width="120px" 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/template_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/template_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 { SupplyStore } from '@/store/api/platform/supply'
const supplyStore = SupplyStore()
const dictDataStore = DictDataStore()
const form = ref({})
const SupplyRules = 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' }],
  // type: [{ 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 supplyStore.update({ ...data, ...other })
      else res = await supplyStore.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>