更新

src/layout/dock/applyForm.vue

@@ -1,87 +0,0 @@
-<template>
-  <div id="applyForm">
-    <el-row>
-      <el-col :span="24" class="style">
-        <el-form ref="form" :model="form" :rules="rules" label-width="100px">
-          <el-form-item label="申请人身份" prop="buyer">
-            <el-radio-group v-model="form.buyer">
-              <el-radio label="0">买家</el-radio>
-              <el-radio label="1">卖家</el-radio>
-            </el-radio-group>
-          </el-form-item>
-          <span v-if="form.buyer == '1'">
-            <el-form-item label="选择产品" prop="goodsList">
-              <el-select v-model="form.goodsList" placeholder="请选择选择产品">
-                <el-option v-for="(item, index) in list" :key="index" :label="item.name" :value="item.id"> </el-option>
-              </el-select>
-            </el-form-item>
-          </span>
-          <el-form-item label="联系人" prop="contact">
-            <el-input v-model="form.contact" placeholder="请输入联系人"></el-input>
-          </el-form-item>
-          <el-form-item label="联系电话" prop="contact_tel">
-            <el-input v-model="form.contact_tel" placeholder="请输入联系电话"></el-input>
-          </el-form-item>
-          <el-form-item label="电子邮箱" prop="email">
-            <el-input v-model="form.email" placeholder="请输入电子邮箱"></el-input>
-          </el-form-item>
-          <el-form-item label="单位名称" prop="company">
-            <el-input v-model="form.company" placeholder="请输入单位名称"></el-input>
-          </el-form-item>
-          <el-row style="text-align:center">
-            <el-button type="primary" @click="onSubmit('form')">立即申请</el-button>
-            <el-button @click="restBtn('form')">取消</el-button>
-          </el-row>
-        </el-form>
-      </el-col>
-    </el-row>
-  </div>
-</template>
-
-<script>
-import { mapState, createNamespacedHelpers } from 'vuex';
-export default {
-  name: 'applyForm',
-  props: {
-    form: null,
-    list: null,
-  },
-  components: {},
-  data: function() {
-    return {
-      rules: {
-        buyer: [{ required: true, message: '请选择申请身份', trigger: 'blur' }],
-        goodsList: [{ required: false, message: '请选择产品', trigger: 'blur' }],
-        contact: [{ required: true, message: '请输入联系人', trigger: 'blur' }],
-        contact_tel: [{ required: true, message: '请输入联系电话', trigger: 'blur' }],
-        email: [{ required: false, message: '请输入电子邮箱', trigger: 'blur' }],
-        company: [{ required: false, message: '请输入单位名称', trigger: 'blur' }],
-      },
-    };
-  },
-  created() {},
-  methods: {
-    onSubmit() {
-      this.$emit('onSubmit', { data: this.form });
-    },
-    restBtn() {
-      this.$emit('restBtn');
-    },
-  },
-  computed: {
-    ...mapState(['user']),
-    pageTitle() {
-      return `${this.$route.meta.title}`;
-    },
-  },
-  metaInfo() {
-    return { title: this.$route.meta.title };
-  },
-};
-</script>
-
-<style lang="less" scoped>
-.style {
-  padding: 0 10px;
-}
-</style>

src/views/userCenter/dock/apply.vue

@@ -6,7 +6,149 @@
           <NavBar v-show="navShow" :title="title" :isleftarrow="isleftarrow"> </NavBar>
         </el-col>
         <el-col :span="24" class="main">
-          <applyForm :form="form" @onSubmit="onSubmit" @restBtn="restBtn" :list="list"></applyForm>
+          <el-tabs v-model="activeName" type="card">
+            <el-tab-pane label="需求申请" name="first">
+              <el-form :model="demandForm" :rules="demandFormrules" ref="ruleForm" label-width="90px" class="demo-ruleForm">
+                <el-form-item label="产品类型" prop="totaltype">
+                  <el-select v-model="demandForm.totaltype" placeholder="请选择产品类型">
+                    <el-option label="技术" value="0"></el-option>
+                    <el-option label="产品" value="1" disabled></el-option>
+                    <el-option label="服务" value="2" disabled></el-option>
+                  </el-select>
+                </el-form-item>
+                <el-form-item label="名称" prop="name">
+                  <el-input v-model="demandForm.name" placeholder="请输入名称"></el-input>
+                </el-form-item>
+                <el-form-item label="类型">
+                  <el-select v-model="demandForm.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="demandForm.introduction" placeholder="请输入产品简介"></el-input>
+                </el-form-item>
+                <el-form-item label="研发阶段">
+                  <el-select v-model="demandForm.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="产品单价">
+                      <el-input v-model="demandForm.price" placeholder="请输入产品单价"></el-input>
+                    </el-form-item>
+                  </el-col>
+                  <el-col :span="12">
+                    <el-form-item label="产品单位">
+                      <el-select v-model="demandForm.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="demandForm.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="demandForm.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="demandForm.scope" placeholder="请输入服务范围"></el-input>
+                </el-form-item>
+                <el-form-item label="合作方式">
+                  <el-select v-model="demandForm.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="交易方式">
+                  <el-select v-model="demandForm.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="投入预算">
+                  <el-input v-model="demandForm.budget" placeholder="请输入投入预算"></el-input>
+                </el-form-item>
+                <el-form-item label="需求截止日期">
+                  <el-date-picker v-model="demandForm.end_date" type="date" placeholder="请选择需求截止日期" format="yyyy-MM-dd" value-format="yyyy-MM-dd">
+                  </el-date-picker>
+                </el-form-item>
+                <el-form-item>
+                  <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="demandForm.difficult_problem" placeholder="请输入难题或瓶颈问题"></el-input>
+                </el-form-item>
+                <el-form-item>
+                  <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="demandForm.demand" placeholder="请输入企业解决需求"></el-input>
+                </el-form-item>
+                <el-form-item label="联系人" prop="contact_user">
+                  <el-input v-model="demandForm.contact_user" placeholder="请输入联系人"></el-input>
+                </el-form-item>
+                <el-form-item label="联系电话" prop="contact_tel">
+                  <el-input v-model.number="demandForm.contact_tel" placeholder="请输入联系电话" maxlength="11"></el-input>
+                </el-form-item>
+                <el-form-item>
+                  <el-button @click="resetForm('ruleForm')">取消</el-button>
+                  <el-button type="primary" @click="submitForm('ruleForm')">确定</el-button>
+                </el-form-item>
+              </el-form>
+            </el-tab-pane>
+            <el-tab-pane label="产品申请" name="second">
+              <el-form :model="productForm" :rules="productFormrules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
+                <el-form-item label="选择产品">
+                  <el-select v-model="productForm.goodsList" value-key="id" multiple placeholder="请选择选择产品">
+                    <el-option v-for="(item, index) in goodsLists" :key="index" :label="item.name" :value="item"> </el-option>
+                  </el-select>
+                </el-form-item>
+                <el-form-item>
+                  <el-button type="primary" @click="submitproductForm('ruleForm')">确定</el-button>
+                  <el-button @click="resetForm('ruleForm')">取消</el-button>
+                </el-form-item>
+              </el-form>
+            </el-tab-pane>
+          </el-tabs>
         </el-col>
       </el-col>
     </el-row>
@@ -14,17 +156,19 @@
 </template>
 
 <script>
+import upload from '@/components/upload.vue';
 import { mapState, createNamespacedHelpers } from 'vuex';
+import _ from 'lodash';
 const { mapActions: product } = createNamespacedHelpers('marketproduct');
+const { mapActions: maarkettype } = createNamespacedHelpers('maarkettype');
 const { mapActions: apply } = createNamespacedHelpers('apply');
 import NavBar from '@/layout/common/topInfo.vue';
-import applyForm from '@/layout/dock/applyForm.vue';
 export default {
   name: 'detail',
   props: {},
   components: {
     NavBar,
-    applyForm, //申请
+    upload,
   },
   data: () => ({
     // 头部标题
@@ -33,12 +177,27 @@ export default {
     isleftarrow: '',
     // 返回
     navShow: true,
-    // 申請
-    form: {},
-    list: [],
+    // 标签
+    activeName: 'first',
+    // 需求
+    demandForm: {
+      totaltype: '0',
+    },
+    columnList: [], //类型
+    demandFormrules: {
+      name: [{ required: true, message: '请输入名称', trigger: 'blur' }],
+      totaltype: [{ required: true, message: '请输入名称', trigger: 'change' }],
+      contact_user: [{ required: true, message: '请输入联系人', trigger: 'blur' }],
+      contact_tel: [{ required: true, message: '请输入联系电话', trigger: 'blur' }],
+    },
+    // 技术
+    productForm: {},
+    productFormrules: {},
+    // 产品类别
+    goodsLists: [],
   }),
   created() {
-    this.search();
+    this.maarkettype();
   },
   computed: {
     ...mapState(['user']),
@@ -47,28 +206,77 @@ export default {
     },
   },
   methods: {
-    ...product(['newquery']),
-    ...apply({ appleCreate: 'create' }),
-    async search() {
-      let userid = this.user.uid;
-      let res = await this.newquery({ status: '1', userid });
-
-      this.$set(this, `list`, res.data);
+    ...apply({ applyupdate: 'update', applyCreate: 'create' }),
+    ...maarkettype({ markettypeList: 'query' }),
+    ...product({ mapProductQuery: 'query', mapProductFetch: 'fetch' }),
+    // 需求提交
+    async submitForm() {
+      let data = {};
+      data.user_id = this.user.uid;
+      data.user_name = this.user.name;
+      data.contact_tel = this.user.phone;
+      data.role = this.user.role;
+      let goods = [];
+      goods.push(this.demandForm);
+      data.goodsList = goods;
+      const res = await this.applyCreate({ id: this.id, ...data });
+      if (res.errcode === 0) {
+        this.$notify({
+          message: '申请参加对接会成功',
+          type: 'success',
+        });
+        this.$router.push('/userCenter/dock/index');
+      }
     },
-    async onSubmit({ data }) {
+    // 产品提交
+    async submitproductForm() {
+      let data = this.productForm;
       data.user_id = this.user.uid;
-      if (this.user.role == '3' || this.user.role == '2' || this.user.role == '6') {
-        data.user_name = this.user.name;
-        let dock_id = this.$route.query.id;
-        const res = await this.appleCreate({ id: dock_id, ...data });
-        this.$checkRes(res, '添加成功', '添加失败');
+      data.user_name = this.user.name;
+      data.contact_tel = this.user.phone;
+      data.role = this.user.role;
+      const res = await this.applyCreate({ id: this.id, ...data });
+      if (res.errcode === 0) {
+        this.$notify({
+          message: '申请参加对接会成功',
+          type: 'success',
+        });
+        this.$router.push('/userCenter/dock/index');
+      }
+    },
+    // 查询类型
+    async maarkettype({ category = 54, ...info } = {}) {
+      const res = await this.markettypeList({ category, ...info });
+      if (this.$checkRes(res)) {
+        this.$set(this, `columnList`, res.data);
+      }
+      const arr = await this.mapProductQuery({ userid: this.user.uid });
+      if (this.$checkRes(arr)) {
+        this.$set(this, `goodsLists`, arr.data);
+      }
+    },
+    // 类型选择
+    selectChild(product_type_id) {
+      let res = this.columnList.filter(fil => fil.id === product_type_id);
+      if (res.length > 0) {
+        this.$set(this.demandForm, `product_type_name`, res[0].name);
+      }
+      this.$forceUpdate();
+    },
+    // 图片
+    uploadSuccess({ type, data }) {
+      let arr = _.get(this.demandForm, type);
+      if (_.isArray(arr)) {
+        let datas = { name: data.name, url: data.uri };
+        this.demandForm[type].push({ name: data.name, url: data.uri });
       } else {
-        this.$message.error('您的身份不能申请展会，请重新登录');
+        let newArr = [{ name: data.name, url: data.uri }];
+        this.$set(this.demandForm, `${type}`, newArr);
       }
     },
-    restBtn() {
-      this.form = {};
-      this.$router.push({ path: '/userCenter/dock/index' });
+    // 删除图片
+    uploadDelete(index) {
+      this.demandForm.image.splice(index, 1);
     },
   },
   mounted() {