technique_web2/src/views/release/parts/demand.vue

<template>
  <div class="demand">
    <el-col :span="24" class="one" v-if="type == '0'">
      <el-col :span="24" class="one_1">
        <el-button type="primary" @click="toCommon('1')">发布需求</el-button>
      </el-col>
      <el-col :span="24" class="one_2">
        <List></List>
      </el-col>
    </el-col>
    <el-col :span="24" class="two" v-else>
      <el-col :span="24" class="two_1">
        <el-button type="primary" @click="toCommon('0')">返回</el-button>
      </el-col>
      <el-col :span="24" class="two_2">
        <el-form
          label-position="top"
          ref="ruleFormRef"
          :model="form"
          :rules="rules"
          label-width="80px"
          class="form"
        >
          <el-form-item label="需求名称" prop="name">
            <el-input v-model="form.name" placeholder="请输入需求名称"> </el-input>
          </el-form-item>
          <el-form-item label="类型" prop="type">
            <el-select v-model="form.type" clearable placeholder="请选择类型">
              <el-option
                v-for="(item, index) in typeList"
                :key="index"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="行业领域" prop="field">
            <el-select 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 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 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 v-model="form.money" placeholder="请输入价格(万元)"> </el-input>
          </el-form-item>
          <el-form-item label="需求地区" prop="area">
            <el-cascader
              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
              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-form-item label="简介" prop="brief">
            <el-input
              v-model="form.brief"
              :autosize="{ minRows: 2, maxRows: 8 }"
              type="textarea"
              placeholder="请输入简介"
            />
          </el-form-item>
          <el-form-item>
            <el-col :span="24" class="button">
              <el-button type="primary" @click="submitForm(ruleFormRef)">保存</el-button>
            </el-col>
          </el-form-item>
        </el-form>
      </el-col>
    </el-col>
  </div>
</template>
<script setup>
const $checkRes = inject('$checkRes')
import { getCity } from '@/utils/city'
import { DictDataStore } from '@/store/api/system/dictData'
const dictDataStore = DictDataStore()
// 组件
import List from './parts/list.vue'
const form = inject('form')
const type = inject('type')
const ruleFormRef = inject('ruleFormRef')
const toCommon = inject('toCommon')
const submitForm = inject('submitForm')
// 字典表
const isUseList = ref([])
const statusList = ref([])
const methodList = ref([])
const urgentList = ref([])
const fieldList = ref([])
const cityList = ref([])
const demandList = ref([])
const typeList = ref([
  { value: '0', label: '供给' },
  { value: '1', label: '需求' }
])
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
}
</script>
<style scoped lang="scss">
.one {
  .one_1 {
    margin: 0 10px 10px 10px;
    text-align: right;
  }
}
.two {
  background-color: #fff;
  padding: 20px;
  border-radius: 10px;
  .two_1 {
    text-align: right;
  }
  .two_2 {
    .button {
      text-align: center;
    }
  }
}
</style>