technique_web2/src/views/release/parts/achievement.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="AchieveRules"
          :model="form"
          :rules="rules"
          label-width="80px"
          class="form"
        >
          <el-form-item label="专利号" prop="patent">
            <el-input clearable v-model="form.patent" placeholder="请输入专利号"> </el-input>
          </el-form-item>
          <el-form-item label="成果名称" prop="name">
            <el-input clearable v-model="form.name" placeholder="请输入成果名称"> </el-input>
          </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="attribute">
            <el-select v-model="form.attribute" clearable placeholder="请选择属性">
              <el-option
                v-for="(item, index) in attributeList"
                :key="index"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="成熟度" prop="mature">
            <el-select v-model="form.mature" clearable placeholder="请选择成熟度">
              <el-option
                v-for="(item, index) in matureList"
                :key="index"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="出让方式" prop="sell">
            <el-select v-model="form.sell" clearable placeholder="请选择出让方式">
              <el-option
                v-for="(item, index) in sellList"
                :key="index"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="技术分类" prop="technology">
            <el-select v-model="form.technology" clearable placeholder="请选择技术分类">
              <el-option
                v-for="(item, index) in technologyList"
                :key="index"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="价格(万元)" prop="money">
            <el-input clearable 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"
              format="YYYY-MM-DD"
              value-format="YYYY-MM-DD"
              placeholder="请选择发布时间"
              type="date"
              style="width: 100%"
            />
          </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(AchieveRules)">保存</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 AchieveRules = ref()
const toCommon = inject('toCommon')
const submitForm = inject('submitForm')
// 字典表
const isUseList = ref([])
const statusList = ref([])
const fieldList = ref([])
const attributeList = ref([])
const matureList = ref([])
const sellList = ref([])
const technologyList = ref([])
const cityList = ref([])
const achievementList = ref([])
const rules = reactive({
  name: [{ required: true, message: '请输入成果名称', trigger: 'blur' }],
  patent: [{ required: true, message: '请输入专利号', trigger: 'blur' }],
  field: [{ required: true, message: '请选择行业领域', trigger: 'change' }],
  attribute: [{ required: true, message: '请选择属性', trigger: 'change' }],
  mature: [{ required: true, message: '请选择成熟度', trigger: 'change' }],
  sell: [{ required: true, message: '请选择出让方式', trigger: 'change' }],
  technology: [{ 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: 'mature', is_use: '0' })
  if ($checkRes(result)) matureList.value = result.data
  // 出让方式
  result = await dictDataStore.query({ code: 'sell', is_use: '0' })
  if ($checkRes(result)) sellList.value = result.data
  // 技术领域
  result = await dictDataStore.query({ code: 'field', is_use: '0' })
  if ($checkRes(result)) fieldList.value = result.data
  // 属性
  result = await dictDataStore.query({ code: 'attribute', is_use: '0' })
  if ($checkRes(result)) attributeList.value = result.data
  // 技术分类
  result = await dictDataStore.query({ code: 'technology', is_use: '0' })
  if ($checkRes(result)) technologyList.value = result.data
  // 成果状态
  result = await dictDataStore.query({ code: 'demandStatus', is_use: '0' })
  if ($checkRes(result)) achievementList.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>