web-test/src/layout/enterprise/contextfabu.vue

<template>
  <div id="contextfabu">
    <el-row>
      <el-col :span="24" class="contextfabu">
        <el-tabs v-model="activeName" type="card">
          <el-tab-pane label="我的发布" name="first">
            <el-row class="demandForm">
              <el-form ref="form" :model="form" label-width="140px" :rules="rules">
                <el-form-item label="产品类型" prop="totaltype">
                  <el-select v-model="form.type" 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="名称">
                  <el-input v-model="form.name" placeholder="请输入名称"></el-input>
                </el-form-item>
                <el-form-item label="联系人">
                  <el-input v-model="form.contacts" placeholder="请输入联系人"></el-input>
                </el-form-item>
                <el-form-item label="联系电话">
                  <el-input v-model="form.phone" placeholder="请输入联系电话"></el-input>
                </el-form-item>
                <el-form-item label="QQ&微信">
                  <el-input v-model="form.qqwx" placeholder="请输入QQ&微信"></el-input>
                </el-form-item>
                <el-form-item label="电子邮箱">
                  <el-input v-model="form.email" placeholder="请输入电子邮箱"></el-input>
                </el-form-item>
                <span v-if="form.type == '0' || form.type == '1'">
                  <el-form-item label="所属领域">
                    <el-select v-model="form.field" filterable>
                      <el-option v-for="(item, index) in fieldList" :key="index" :value="item.name" :label="item.name"></el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item label="合作方式">
                    <el-select v-model="form.cooperation" filterable>
                      <el-option v-for="(item, index) in cooperationList" :key="index" :value="item.name" :label="item.name"></el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item label="企业名称">
                    <el-input v-model="form.company" placeholder="请输入企业名称"></el-input>
                  </el-form-item>
                  <el-form-item label="企业简介">
                    <el-input
                      v-model="form.companybrief"
                      type="textarea"
                      maxlength="300"
                      show-word-limit
                      :autosize="{ minRows: 2, maxRows: 5 }"
                      placeholder="请输入企业简介"
                    ></el-input>
                  </el-form-item>
                  <el-form-item label="企业网站">
                    <el-input v-model="form.companyweb" placeholder="请输入企业网站"></el-input>
                  </el-form-item>
                  <el-form-item label="合作条件及要求">
                    <el-input
                      v-model="form.condition"
                      type="textarea"
                      maxlength="300"
                      show-word-limit
                      :autosize="{ minRows: 2, maxRows: 5 }"
                      placeholder="请输入合作条件及要求"
                    ></el-input>
                  </el-form-item>
                  <el-form-item label="产品图片" prop="image">
                    <upload
                      :limit="6"
                      :data="form.image"
                      :uploadBtn="true"
                      type="image"
                      :url="`/files/image/upload`"
                      @upload="uploadSuccess"
                      @delete="uploadDelete"
                    ></upload>
                  </el-form-item>
                </span>
                <!-- 技术 -->
                <span v-if="form.type == '0'">
                  <el-form-item label="投资预算">
                    <el-input v-model="form.budget" placeholder="请输入投资预算"></el-input>
                  </el-form-item>
                  <el-form-item label="注册类型">
                    <el-input v-model="form.companytype" placeholder="请输入注册类型"></el-input>
                  </el-form-item>
                  <el-form-item label="组织机构代码">
                    <el-input v-model="form.zzjgdm" placeholder="请输入组织机构代码"></el-input>
                  </el-form-item>
                  <el-form-item label="注册时间">
                    <el-date-picker v-model="form.companydate" type="date" placeholder="请选择时间" format="yyyy-MM-dd" value-format="yyyy-MM-dd">
                    </el-date-picker>
                  </el-form-item>
                  <el-form-item label="注册资金">
                    <el-input v-model="form.companycapital" placeholder="请输入注册资金"></el-input>
                  </el-form-item>
                  <el-form-item label="企业法人">
                    <el-input v-model="form.companyperson" placeholder="请输入企业法人"></el-input>
                  </el-form-item>
                  <el-form-item label="上年度企业总收入">
                    <el-input v-model="form.sndqyzsr" placeholder="请输入上年度企业总收入"></el-input>
                  </el-form-item>
                  <el-form-item label="上年度研发费用">
                    <el-input v-model="form.sndyffy" placeholder="请输入上年度研发费用"></el-input>
                  </el-form-item>
                  <el-form-item label="企业总人数">
                    <el-input v-model="form.companytotal" placeholder="请输入企业总人数"></el-input>
                  </el-form-item>
                  <el-form-item label="专&兼职研发人数">
                    <el-input v-model="form.zjzyfrs" placeholder="请输入专&兼职研发人数"></el-input>
                  </el-form-item>
                  <el-form-item label="需求紧急程度">
                    <el-radio-group v-model="form.degreeurgency">
                      <el-radio label="特急"></el-radio>
                      <el-radio label="一般"></el-radio>
                      <el-radio label="储备"></el-radio>
                    </el-radio-group>
                  </el-form-item>
                  <el-form-item label="技术难题&需求说明">
                    <el-input
                      v-model="form.requirementdesc"
                      type="textarea"
                      maxlength="500"
                      show-word-limit
                      :autosize="{ minRows: 2, maxRows: 5 }"
                      placeholder="请输入技术难题&需求说明"
                    ></el-input>
                  </el-form-item>
                  <el-form-item label="预期技术目标描述">
                    <el-input
                      v-model="form.expect"
                      type="textarea"
                      maxlength="300"
                      show-word-limit
                      :autosize="{ minRows: 2, maxRows: 5 }"
                      placeholder="请输入预期技术目标描述"
                    ></el-input>
                  </el-form-item>
                  <el-form-item label="需求现状及应对措施">
                    <el-input
                      v-model="form.present"
                      type="textarea"
                      maxlength="300"
                      show-word-limit
                      :autosize="{ minRows: 2, maxRows: 5 }"
                      placeholder="请输入需求现状及应对措施"
                    ></el-input>
                  </el-form-item>
                  <el-form-item label="主要产品">
                    <el-input
                      v-model="form.mainproduct"
                      type="textarea"
                      maxlength="300"
                      show-word-limit
                      :autosize="{ minRows: 2, maxRows: 5 }"
                      placeholder="请输入主要产品"
                    ></el-input>
                  </el-form-item>
                  <el-form-item label="企业资质&荣誉">
                    <el-input
                      v-model="form.qualifications"
                      type="textarea"
                      maxlength="300"
                      show-word-limit
                      :autosize="{ minRows: 2, maxRows: 5 }"
                      placeholder="请输入企业资质&荣誉"
                    ></el-input>
                  </el-form-item>
                </span>
                <!-- 产品 -->
                <span v-else-if="form.type == '1'">
                  <el-form-item label="成果状态">
                    <el-select v-model="form.achievestatus" filterable>
                      <el-option v-for="(item, index) in achievestatusList" :key="index" :value="item.name" :label="item.name"></el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item label="成果权属">
                    <el-input v-model="form.achieveown" placeholder="请输入成果权属"></el-input>
                  </el-form-item>
                  <el-form-item label="成果来源">
                    <el-radio-group v-model="form.degreeurgency">
                      <el-radio label="国家项目"></el-radio>
                      <el-radio label="省级项目"></el-radio>
                      <el-radio label="市级项目"></el-radio>
                      <el-radio label="自选项目"></el-radio>
                    </el-radio-group>
                  </el-form-item>
                  <el-form-item label="专利信息">
                    <el-input v-model="form.patentinfo" placeholder="请输入专利信息"></el-input>
                  </el-form-item>
                  <el-form-item label="专利状态">
                    <el-radio-group v-model="form.patentstatus">
                      <el-radio label="已申请"></el-radio>
                      <el-radio label="已授权"></el-radio>
                    </el-radio-group>
                  </el-form-item>
                  <el-form-item label="项目路演">
                    <el-input v-model="form.roadshow" placeholder="请输入项目路演"></el-input>
                  </el-form-item>
                  <el-form-item label="意向价格">
                    <el-input v-model="form.intentionprice" placeholder="请输入意向价格"></el-input>
                  </el-form-item>
                  <el-form-item label="成果简介">
                    <el-input
                      v-model="form.achievebrief"
                      type="textarea"
                      maxlength="200"
                      show-word-limit
                      :autosize="{ minRows: 2, maxRows: 5 }"
                      placeholder="请输入成果简介"
                    ></el-input>
                  </el-form-item>
                  <el-form-item label="技术特点">
                    <el-input
                      v-model="form.features"
                      type="textarea"
                      maxlength="200"
                      show-word-limit
                      :autosize="{ minRows: 2, maxRows: 5 }"
                      placeholder="请输入技术特点"
                    ></el-input>
                  </el-form-item>
                  <el-form-item label="技术团队">
                    <el-input
                      v-model="form.team"
                      type="textarea"
                      maxlength="300"
                      show-word-limit
                      :autosize="{ minRows: 2, maxRows: 5 }"
                      placeholder="请输入技术团队"
                    ></el-input>
                  </el-form-item>
                  <el-form-item label="商业预期">
                    <el-input
                      v-model="form.expectations"
                      type="textarea"
                      maxlength="300"
                      show-word-limit
                      :autosize="{ minRows: 2, maxRows: 5 }"
                      placeholder="请输入商业预期"
                    ></el-input>
                  </el-form-item>
                </span>
                <!-- 服务 -->
                <span v-else-if="form.type == '2'">
                  <el-form-item label="信息属性">
                    <el-radio-group v-model="form.messattribute">
                      <el-radio label="提供方"></el-radio>
                      <el-radio label="需求方"></el-radio>
                    </el-radio-group>
                  </el-form-item>
                  <el-form-item label="需求程度">
                    <el-radio-group v-model="form.demand">
                      <el-radio label="特急"></el-radio>
                      <el-radio label="一般"></el-radio>
                    </el-radio-group>
                  </el-form-item>
                  <el-form-item label="信息描述">
                    <el-input
                      v-model="form.informationdesc"
                      type="textarea"
                      maxlength="300"
                      show-word-limit
                      :autosize="{ minRows: 2, maxRows: 5 }"
                      placeholder="请输入信息描述"
                    ></el-input>
                  </el-form-item>
                  <el-form-item label="核心要素">
                    <el-input
                      v-model="form.coreelements"
                      type="textarea"
                      maxlength="200"
                      show-word-limit
                      :autosize="{ minRows: 2, maxRows: 5 }"
                      placeholder="请输入核心要素"
                    ></el-input>
                  </el-form-item>
                  <el-form-item label="价格信息">
                    <el-input
                      v-model="form.priceinfo"
                      type="textarea"
                      maxlength="100"
                      show-word-limit
                      :autosize="{ minRows: 2, maxRows: 5 }"
                      placeholder="请输入价格信息"
                    ></el-input>
                  </el-form-item>
                  <el-form-item label="商务预期">
                    <el-input
                      v-model="form.businessexpect"
                      type="textarea"
                      maxlength="200"
                      show-word-limit
                      :autosize="{ minRows: 2, maxRows: 5 }"
                      placeholder="请输入商务预期"
                    ></el-input>
                  </el-form-item>
                </span>
                <el-row class="demandBtn">
                  <el-button type="primary" @click="demandBtn()">保存草稿</el-button>
                  <el-button type="primary" @click="demandBtns()">信息发布</el-button>
                </el-row>
              </el-form>
            </el-row>
          </el-tab-pane>
        </el-tabs>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import _ from 'lodash';
import upload from '@/components/upload.vue';
import { mapState, createNamespacedHelpers } from 'vuex';
const { mapActions: markettype } = createNamespacedHelpers('markettype');
export default {
  name: 'contextfabu',
  props: {
    form: null,
  },
  components: {
    upload,
  },
  data: () => ({
    activeName: 'first',
    // 验证
    rules: {
      name: [{ required: true, message: '请输入名称', trigger: 'blur' }],
    },
    // 所属领域
    fieldList: [],
    // 成果状态
    achievestatusList: [],
    // 合作方式
    cooperationList: [],
  }),
  created() {
    this.searchtype();
  },
  computed: {},
  methods: {
    ...markettype({ markettypeList: 'query' }),
    // 查询字典表
    async searchtype() {
      // 所属领域;
      let res = await this.markettypeList({ category: '01' });
      if (this.$checkRes(res)) {
        this.$set(this, `fieldList`, res.data);
      }
      // 成果状态;
      res = await this.markettypeList({ category: '02' });
      if (this.$checkRes(res)) {
        this.$set(this, `achievestatusList`, res.data);
      }
      // 合作方式;
      res = await this.markettypeList({ category: '03' });
      if (this.$checkRes(res)) {
        this.$set(this, `cooperationList`, res.data);
      }
    },
    demandBtn() {
      this.$emit('demandBtn', { data: this.form });
    },
    demandBtns() {
      this.$emit('demandBtns', { data: this.form });
    },
    // 图片
    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);
    },
  },
};
</script>

<style lang="less" scoped>
/deep/.el-tabs--card > .el-tabs__header {
  border-bottom: 1px solid #215299;
}
/deep/.el-tabs__item {
  height: 50px;
  line-height: 50px;
  font-size: 16px;
}
/deep/.el-tabs__item.is-active {
  color: #ffff;
  background: #215299;
}
.demandForm {
  padding: 0 20px;
}
.demandBtn {
  text-align: center;
  padding: 0 0 20px 0;
}
/deep/.demandBtn .el-button {
  background-color: #ff7814;
  border: none;
}
/deep/.el-table td {
  padding: 0;
}
/deep/.el-table th {
  padding: 0;
  background-color: #f3f3f3;
}
</style>