mobile-official/src/layout/myProduct/release.vue

<template>
  <div id="release">
    <el-row>
      <el-col :span="24" class="info">
        <el-form ref="form" :model="form" label-width="100px" :rules="rules">
          <el-form-item label="产品类型" prop="totaltype">
            <el-select v-model="form.totaltype" placeholder="请选择产品类型">
              <el-option label="技术" value="0"></el-option>
              <el-option label="产品" value="1"></el-option>
              <el-option label="服务" value="2"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="名称" prop="name">
            <el-input v-model="form.name" placeholder="请输入名称"></el-input>
          </el-form-item>
          <el-form-item label="类型">
            <el-select v-model="form.product_type_id" filterable @change="selectChild">
              <el-option v-for="(item, index) in columnList" :key="index" :value="item.id" :label="item.name"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="产品简介">
            <el-input type="textarea" v-model="form.introduction" placeholder="请输入产品简介"></el-input>
          </el-form-item>
          <el-form-item label="研发阶段" v-if="form.totaltype == null || form.totaltype == '0'">
            <el-select v-model="form.phase" placeholder="请选择研发阶段">
              <el-option label="阶段成果" value="0"></el-option>
              <el-option label="最终成果" value="1"></el-option>
            </el-select>
          </el-form-item>
          <el-row>
            <el-col :span="12">
              <el-form-item label="产品单价" v-if="form.totaltype == null || form.totaltype == '0' || form.totaltype == '1'">
                <el-input v-model="form.price" placeholder="请输入产品单价"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="产品单位" v-if="form.totaltype == null || form.totaltype == '0' || form.totaltype == '1'">
                <el-select v-model="form.priceunit" placeholder="请选择产品单位">
                  <el-option label="公斤" value="0"></el-option>
                  <el-option label="套" value="1"></el-option>
                  <el-option label="件" value="2"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item label="产品图片" prop="image">
            <upload
              :limit="1"
              :data="form.image"
              :uploadBtn="true"
              type="image"
              :url="`/files/image/upload`"
              @upload="uploadSuccess"
              @delete="uploadDelete"
            ></upload>
          </el-form-item>
          <span>
            <el-form-item label="所属领域">
              <el-select v-model="form.field" placeholder="请选择所属领域">
                <el-option label="先进制造" value="0"></el-option>
                <el-option label="新材料" value="1"></el-option>
                <el-option label="光电子" value="2"></el-option>
                <el-option label="信息技术" value="3"></el-option>
                <el-option label="文化和科技融合" value="4"></el-option>
              </el-select>
            </el-form-item>
          </span>
          <el-form-item label="服务范围">
            <el-input type="textarea" v-model="form.scope" placeholder="请输入服务范围"></el-input>
          </el-form-item>
          <el-form-item label="合作方式" v-if="form.totaltype == null || form.totaltype == '0' || form.totaltype == '1'">
            <el-select v-model="form.coopermode" placeholder="请选择合作方式">
              <el-option label="技术转让" value="0"></el-option>
              <el-option label="技术服务" value="1"></el-option>
              <el-option label="技术许可" value="2"></el-option>
              <el-option label="技术融资" value="3"></el-option>
              <el-option label="其他" value="4"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="交易方式" v-if="form.totaltype == null || form.totaltype == '0' || form.totaltype == '1'">
            <el-select v-model="form.business" placeholder="请选择交易方式">
              <el-option label="公用" value="0"></el-option>
              <el-option label="竞价" value="1"></el-option>
              <el-option label="转让" value="2"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="投入预算" v-if="form.totaltype == null || form.totaltype == '0'">
            <el-input v-model="form.budget" placeholder="请输入投入预算"></el-input>
          </el-form-item>
          <el-form-item label="需求截止日期" v-if="form.totaltype == null || form.totaltype == '0'">
            <el-date-picker v-model="form.end_date" type="date" placeholder="请选择需求截止日期" format="yyyy-MM-dd" value-format="yyyy-MM-dd">
            </el-date-picker>
          </el-form-item>
          <el-form-item v-if="form.totaltype == null || form.totaltype == '0'">
            <span slot="label">
              <el-popover
                placement="top-start"
                width="200"
                trigger="hover"
                content="（阐述在生产经营、项目建设、科研活动、产业化方向中遇到的技术难题或瓶颈问题及需达到的技术指标）"
              >
                <span slot="reference" style="color:#409eff">难题或瓶颈问题</span>
              </el-popover>
            </span>
            <el-input type="textarea" v-model="form.difficult_problem" placeholder="请输入难题或瓶颈问题"></el-input>
          </el-form-item>
          <el-form-item v-if="form.totaltype == null || form.totaltype == '0'">
            <span slot="label">
              <el-popover
                placement="top-start"
                width="200"
                trigger="hover"
                content="（企业承接成果、技术所具备的技术人员、设备、资金等基础条件及其他配套条件）"
              >
                <span slot="reference" style="color:#409eff">企业解决技术需求已具备的条件</span>
              </el-popover>
            </span>
            <el-input type="textarea" v-model="form.demand" placeholder="请输入企业解决需求"></el-input>
          </el-form-item>
          <el-form-item label="企业名称" v-if="form.totaltype == null || form.totaltype == '1'">
            <el-input v-model="form.company" placeholder="请输入企业名称"></el-input>
          </el-form-item>
          <el-form-item label="企业地址" v-if="form.totaltype == null || form.totaltype == '1'">
            <el-input v-model="form.address" placeholder="请输入企业地址"></el-input>
          </el-form-item>
          <el-form-item label="技术团队情况" v-if="form.totaltype == null || form.totaltype == '1'">
            <el-input type="textarea" v-model="form.team" placeholder="请输入技术团队情况"></el-input>
          </el-form-item>
          <el-form-item label="知识产权情况" v-if="form.totaltype == null || form.totaltype == '1'">
            <el-input v-model="form.property" placeholder="请输入知识产权情况"></el-input>
          </el-form-item>
          <el-form-item label="技术成熟度" v-if="form.totaltype == null || form.totaltype == '1'">
            <el-select v-model="form.mature" placeholder="请选择技术成熟度">
              <el-option label="实验室" value="0"></el-option>
              <el-option label="小试" value="1"></el-option>
              <el-option label="中试" value="2"></el-option>
              <el-option label="成熟" value="3"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="是否有拟合作企业，如有请填企业名称" v-if="form.totaltype == null || form.totaltype == '1'">
            <el-input v-model="form.coopercompany" placeholder="请输入是否有拟合作企业，如有请填企业名称"></el-input>
          </el-form-item>
          <el-form-item label="其他需求" v-if="form.totaltype == null || form.totaltype == '1'">
            <el-input v-model="form.other" placeholder="请输入其他需求"></el-input>
          </el-form-item>
          <el-form-item label="联系人" prop="contact_user">
            <el-input v-model="form.contact_user" placeholder="请输入联系人"></el-input>
          </el-form-item>
          <el-form-item label="联系电话" prop="contact_tel">
            <el-input v-model.number="form.contact_tel" placeholder="请输入联系电话" maxlength="11"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmitDraft">保存草稿</el-button>
            <el-button type="primary" @click="onSubmit">信息发布</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import upload from '@/components/upload.vue';
import { mapState, createNamespacedHelpers } from 'vuex';
const { mapActions: maarkettype } = createNamespacedHelpers('maarkettype');

export default {
  name: 'release',
  props: {
    form: null,
  },
  components: {
    upload,
  },
  data: function() {
    return {
      // 产品类型
      totaltype_list: [
        { name: '技术', value: '0' },
        { name: '产品', value: '1' },
        { name: '服务', value: '2' },
      ],
      // 类型
      columnList: [],
      // 单位
      priceunit_list: [
        {
          name: '公斤',
        },
        {
          name: '套',
        },
        {
          name: '件',
        },
      ],
      rules: {
        totaltype: [{ required: true, message: '请选择产品类型', trigger: 'blur' }],
        name: [{ required: true, message: '请输入产品名称', trigger: 'blur' }],
      },
    };
  },
  created() {
    this.searchType();
  },
  methods: {
    ...maarkettype(['query']),
    // 保存草稿
    onSubmitDraft() {
      this.$emit('onSubmitDraft', { data: this.form });
    },
    // 信息发布
    onSubmit() {
      this.$emit('onSubmit', { data: this.form });
    },
    // 查询类型
    async searchType({ category = 54, ...info } = {}) {
      const res = await this.query({ category, ...info });
      if (this.$checkRes(res)) {
        this.$set(this, `columnList`, res.data);
      }
    },
    // 类型选择
    selectChild(product_type_id) {
      let res = this.columnList.filter(fil => fil.id === product_type_id);
      if (res.length > 0) {
        this.$set(this.form, `product_type_name`, res[0].name);
      }
      this.$forceUpdate();
    },

    // 图片
    uploadSuccess({ type, data }) {
      let arr = _.get(this.form, type);
      if (_.isArray(arr)) {
        let datas = { name: data.name, url: data.uri };
        this.form[type].push({ name: data.name, url: data.uri });
      } else {
        let newArr = [{ name: data.name, url: data.uri }];
        this.$set(this.form, `${type}`, newArr);
      }
    },
    // 删除图片
    uploadDelete(index) {
      this.form.image.splice(index, 1);
    },
  },
  computed: {
    ...mapState(['user']),
    pageTitle() {
      return `${this.$route.meta.title}`;
    },
  },
  metaInfo() {
    return { title: this.$route.meta.title };
  },
};
</script>

<style lang="less" scoped>
.info {
  margin: 0 0px 50px 0;
  padding: 15px 0 0 0;
}
</style>