web-test/src/views/dynamic/product.vue

<template>
  <div id="product">
    <el-row>
      <el-col :span="24">
        <div class="w_1200">
          <el-col :span="24" class="top">
            toubu
          </el-col>
          <el-col :span="24" class="down">
            <el-tabs v-model="activeName" type="card">
              <el-tab-pane label="技术需求" name="first">
                <el-col :span="24" class="first">
                  <el-col :span="24" class="company">
                    <h1>企业信息</h1>
                    <el-col :span="24" class="compnayInfo">
                      <el-col :span="24" class="txt">
                        <el-col :span="2" class="left">
                          企业名称：
                        </el-col>
                        <el-col :span="22" class="right">
                          <el-input v-model="technologyForm.company" placeholder="请输入企业名称" disabled></el-input>
                        </el-col>
                      </el-col>
                      <el-col :span="12" class="txt">
                        <el-col :span="4" class="left">
                          联系电话：
                        </el-col>
                        <el-col :span="20" class="right">
                          <el-input v-model="technologyForm.phone" placeholder="请输入联系电话" disabled></el-input>
                        </el-col>
                      </el-col>
                      <el-col :span="12" class="txt">
                        <el-col :span="4" class="left">
                          电子邮箱：
                        </el-col>
                        <el-col :span="20" class="right">
                          <el-input v-model="technologyForm.email" placeholder="请输入电子邮箱" disabled></el-input>
                        </el-col>
                      </el-col>
                      <el-col :span="12" class="txt">
                        <el-col :span="4" class="left">
                          联系人：
                        </el-col>
                        <el-col :span="20" class="right">
                          <el-input v-model="technologyForm.contacts" placeholder="请输入联系人"></el-input>
                        </el-col>
                      </el-col>
                      <el-col :span="12" class="txt">
                        <el-col :span="4" class="left">
                          QQ/微信：
                        </el-col>
                        <el-col :span="20" class="right">
                          <el-input v-model="technologyForm.qqwx" placeholder="请输入QQ/微信"></el-input>
                        </el-col>
                      </el-col>
                      <el-col :span="12" class="txt">
                        <el-col :span="4" class="left">
                          信用代码：
                        </el-col>
                        <el-col :span="20" class="right">
                          <el-input v-model="technologyForm.institution_code" placeholder="请输入统一社会信用代码" disabled></el-input>
                        </el-col>
                      </el-col>
                      <el-col :span="12" class="txt">
                        <el-col :span="4" class="left">
                          注册资金：
                        </el-col>
                        <el-col :span="20" class="right">
                          <el-input v-model="technologyForm.companycapital" placeholder="请输入注册资金"></el-input>
                        </el-col>
                      </el-col>
                      <el-col :span="12" class="txt">
                        <el-col :span="4" class="left">
                          注册类型：
                        </el-col>
                        <el-col :span="20" class="right">
                          <el-input v-model="technologyForm.companytype" placeholder="请输入注册类型"></el-input>
                        </el-col>
                      </el-col>
                      <el-col :span="12" class="txt">
                        <el-col :span="4" class="left">
                          注册时间：
                        </el-col>
                        <el-col :span="20" class="right">
                          <el-date-picker
                            v-model="technologyForm.companydate"
                            type="date"
                            placeholder="请选择时间"
                            format="yyyy-MM-dd"
                            value-format="yyyy-MM-dd"
                          >
                          </el-date-picker>
                        </el-col>
                      </el-col>
                      <el-col :span="24" class="txtTwo">
                        <p>企业简介：</p>
                        <el-input
                          v-model="technologyForm.companybrief"
                          type="textarea"
                          maxlength="300"
                          show-word-limit
                          :autosize="{ minRows: 4, maxRows: 5 }"
                          placeholder="请输入企业简介"
                        ></el-input>
                      </el-col>
                    </el-col>
                  </el-col>
                  <el-col :span="24" class="product">
                    <h1>科技需求</h1>
                    <el-col :span="24" class="productInfo">
                      <el-col :span="24" class="txt">
                        <el-col :span="2" class="left">
                          需求名称：
                        </el-col>
                        <el-col :span="22" class="right">
                          <el-input v-model="technologyForm.name" placeholder="请输入需求名称"></el-input>
                        </el-col>
                      </el-col>
                      <el-col :span="12" class="txt">
                        <el-col :span="5" class="left">
                          需求紧急程度：
                        </el-col>
                        <el-col :span="19" class="right">
                          <el-select v-model="technologyForm.degreeurgency" placeholder="请选择需求紧急程度">
                            <el-option label="特急" value="特急"></el-option>
                            <el-option label="一般" value="一般"></el-option>
                            <el-option label="储备" value="储备"></el-option>
                          </el-select>
                        </el-col>
                      </el-col>
                      <el-col :span="12" class="txt">
                        <el-col :span="4" class="left">
                          所属领域：
                        </el-col>
                        <el-col :span="20" class="right">
                          <el-select v-model="technologyForm.field" filterable>
                            <el-option v-for="(item, index) in fieldList" :key="index" :value="item.name" :label="item.name"></el-option>
                          </el-select>
                        </el-col>
                      </el-col>
                      <el-col :span="12" class="txt">
                        <el-col :span="4" class="left">
                          投资预算：
                        </el-col>
                        <el-col :span="20" class="right">
                          <el-input v-model="technologyForm.budget" placeholder="请输入投资预算"></el-input>
                        </el-col>
                      </el-col>
                      <el-col :span="12" class="txt">
                        <el-col :span="4" class="left">
                          合作方式：
                        </el-col>
                        <el-col :span="20" class="right">
                          <el-select v-model="technologyForm.cooperation" filterable>
                            <el-option v-for="(item, index) in cooperationList" :key="index" :value="item.name" :label="item.name"></el-option>
                          </el-select>
                        </el-col>
                      </el-col>
                      <el-col :span="24" class="txtTwo">
                        <p>技术说明：</p>
                        <el-input
                          v-model="technologyForm.requirementdesc"
                          type="textarea"
                          maxlength="300"
                          show-word-limit
                          :autosize="{ minRows: 4, maxRows: 5 }"
                          placeholder="请输入技术说明"
                        ></el-input>
                      </el-col>
                      <el-col :span="24" class="txtTwo">
                        <p>预期目标：</p>
                        <el-input
                          v-model="technologyForm.expect"
                          type="textarea"
                          maxlength="300"
                          show-word-limit
                          :autosize="{ minRows: 4, maxRows: 5 }"
                          placeholder="请输入预期目标"
                        ></el-input>
                      </el-col>
                      <el-col :span="24" class="txtTwo">
                        <p>需求现状：</p>
                        <el-input
                          v-model="technologyForm.present"
                          type="textarea"
                          maxlength="300"
                          show-word-limit
                          :autosize="{ minRows: 4, maxRows: 5 }"
                          placeholder="请输入需求现状"
                        ></el-input>
                      </el-col>
                      <el-col :span="24" class="txtTwo">
                        <p>合作条件及要求：</p>
                        <el-input
                          v-model="technologyForm.condition"
                          type="textarea"
                          maxlength="300"
                          show-word-limit
                          :autosize="{ minRows: 4, maxRows: 5 }"
                          placeholder="请输入合作条件及要求"
                        ></el-input>
                      </el-col>
                      <el-col :span="24" class="txtTwo">
                        <p>图片：</p>
                        <upload
                          :limit="6"
                          :data="technologyForm.image"
                          :uploadBtn="true"
                          type="image"
                          :url="`/files/image/upload`"
                          @upload="uploadSuccess"
                          @delete="uploadDelete"
                        ></upload>
                      </el-col>
                    </el-col>
                  </el-col>
                  <el-col :span="24" class="btn">
                    <el-button type="primary" size="mini" @click="technologyBtn()">保存</el-button>
                  </el-col>
                </el-col>
              </el-tab-pane>
              <el-tab-pane label="科技成果" name="second">
                <el-col :span="24" class="first">
                  <el-col :span="24" class="company">
                    <h1>企业信息</h1>
                    <el-col :span="24" class="compnayInfo">
                      <el-col :span="24" class="txt">
                        <el-col :span="2" class="left">
                          企业名称：
                        </el-col>
                        <el-col :span="22" class="right">
                          <el-input v-model="achieveForm.company" placeholder="请输入企业名称" disabled></el-input>
                        </el-col>
                      </el-col>
                      <el-col :span="12" class="txt">
                        <el-col :span="4" class="left">
                          联系电话：
                        </el-col>
                        <el-col :span="20" class="right">
                          <el-input v-model="achieveForm.phone" placeholder="请输入联系电话" disabled></el-input>
                        </el-col>
                      </el-col>
                      <el-col :span="12" class="txt">
                        <el-col :span="4" class="left">
                          电子邮箱：
                        </el-col>
                        <el-col :span="20" class="right">
                          <el-input v-model="achieveForm.email" placeholder="请输入电子邮箱" disabled></el-input>
                        </el-col>
                      </el-col>
                      <el-col :span="12" class="txt">
                        <el-col :span="4" class="left">
                          联系人：
                        </el-col>
                        <el-col :span="20" class="right">
                          <el-input v-model="achieveForm.contacts" placeholder="请输入联系人"></el-input>
                        </el-col>
                      </el-col>
                      <el-col :span="12" class="txt">
                        <el-col :span="4" class="left">
                          QQ/微信：
                        </el-col>
                        <el-col :span="20" class="right">
                          <el-input v-model="achieveForm.qqwx" placeholder="请输入QQ/微信"></el-input>
                        </el-col>
                      </el-col>
                      <el-col :span="24" class="txtTwo">
                        <p>企业简介：</p>
                        <el-input
                          v-model="achieveForm.companybrief"
                          type="textarea"
                          maxlength="300"
                          show-word-limit
                          :autosize="{ minRows: 4, maxRows: 5 }"
                          placeholder="请输入企业简介"
                        ></el-input>
                      </el-col>
                    </el-col>
                  </el-col>
                  <el-col :span="24" class="product">
                    <h1>科技成果</h1>
                    <el-col :span="24" class="productInfo">
                      <el-col :span="24" class="txt">
                        <el-col :span="2" class="left">
                          成果名称：
                        </el-col>
                        <el-col :span="22" class="right">
                          <el-input v-model="achieveForm.name" placeholder="请输入成果名称"></el-input>
                        </el-col>
                      </el-col>
                      <el-col :span="12" class="txt">
                        <el-col :span="4" class="left">
                          所属领域：
                        </el-col>
                        <el-col :span="20" class="right">
                          <el-select v-model="achieveForm.field" filterable>
                            <el-option v-for="(item, index) in fieldList" :key="index" :value="item.name" :label="item.name"></el-option>
                          </el-select>
                        </el-col>
                      </el-col>
                      <el-col :span="12" class="txt">
                        <el-col :span="4" class="left">
                          合作方式：
                        </el-col>
                        <el-col :span="20" class="right">
                          <el-select v-model="achieveForm.cooperation" filterable>
                            <el-option v-for="(item, index) in cooperationList" :key="index" :value="item.name" :label="item.name"></el-option>
                          </el-select>
                        </el-col>
                      </el-col>
                      <el-col :span="12" class="txt">
                        <el-col :span="4" class="left">
                          成果状态：
                        </el-col>
                        <el-col :span="20" class="right">
                          <el-select v-model="achieveForm.achievestatus" filterable>
                            <el-option v-for="(item, index) in achievestatusList" :key="index" :value="item.name" :label="item.name"></el-option>
                          </el-select>
                        </el-col>
                      </el-col>
                      <el-col :span="12" class="txt">
                        <el-col :span="4" class="left">
                          成果权属：
                        </el-col>
                        <el-col :span="20" class="right">
                          <el-input v-model="achieveForm.achieveown" placeholder="请输入成果权属"></el-input>
                        </el-col>
                      </el-col>
                      <el-col :span="12" class="txt">
                        <el-col :span="4" class="left">
                          成果来源：
                        </el-col>
                        <el-col :span="20" class="right">
                          <el-select v-model="achieveForm.achievesource" placeholder="请选择成果来源">
                            <el-option label="国家项目" value="国家项目"></el-option>
                            <el-option label="省级项目" value="省级项目"></el-option>
                            <el-option label="市级项目" value="市级项目"></el-option>
                            <el-option label="自选项目" value="自选项目"></el-option>
                          </el-select>
                        </el-col>
                      </el-col>
                      <el-col :span="12" class="txt">
                        <el-col :span="4" class="left">
                          意向价格：
                        </el-col>
                        <el-col :span="20" class="right">
                          <el-input v-model="achieveForm.intentionprice" placeholder="请输入意向价格"></el-input>
                        </el-col>
                      </el-col>
                      <el-col :span="12" class="txt">
                        <el-col :span="4" class="left">
                          专利信息：
                        </el-col>
                        <el-col :span="20" class="right">
                          <el-button type="primary" size="mini" @click="addpatent()">添加信息</el-button>
                          <el-button type="primary" size="mini" @click="viewpatent()">查看信息</el-button>
                        </el-col>
                      </el-col>
                      <el-col :span="12" class="txt">
                        <el-col :span="4" class="left">
                          项目路演：
                        </el-col>
                        <el-col :span="20" class="right">
                          <uploadraw
                            :limit="1"
                            :data="achieveForm.roadshow"
                            type="roadshow"
                            listType=""
                            :url="'/files/roadshow/upload'"
                            @upload="uploadroadshow"
                            @delete="uploaddelroadshow"
                          ></uploadraw>
                        </el-col>
                      </el-col>
                      <el-col :span="24" class="txtTwo">
                        <p>成果简介：</p>
                        <el-input
                          v-model="achieveForm.achievebrief"
                          type="textarea"
                          maxlength="200"
                          show-word-limit
                          :autosize="{ minRows: 4, maxRows: 5 }"
                          placeholder="请输入成果简介"
                        ></el-input>
                      </el-col>
                      <el-col :span="24" class="txtTwo">
                        <p>技术特点：</p>
                        <el-input
                          v-model="achieveForm.features"
                          type="textarea"
                          maxlength="200"
                          show-word-limit
                          :autosize="{ minRows: 4, maxRows: 5 }"
                          placeholder="请输入技术特点"
                        ></el-input>
                      </el-col>
                      <el-col :span="24" class="txtTwo">
                        <p>技术团队：</p>
                        <el-input
                          v-model="achieveForm.team"
                          type="textarea"
                          maxlength="300"
                          show-word-limit
                          :autosize="{ minRows: 4, maxRows: 5 }"
                          placeholder="请输入技术团队"
                        ></el-input>
                      </el-col>
                      <el-col :span="24" class="txtTwo">
                        <p>商业预期：</p>
                        <el-input
                          v-model="achieveForm.expectations"
                          type="textarea"
                          maxlength="300"
                          show-word-limit
                          :autosize="{ minRows: 4, maxRows: 5 }"
                          placeholder="请输入商业预期"
                        ></el-input>
                      </el-col>
                      <el-col :span="24" class="txtTwo">
                        <p>合作条件及要求：</p>
                        <el-input
                          v-model="achieveForm.condition"
                          type="textarea"
                          maxlength="300"
                          show-word-limit
                          :autosize="{ minRows: 4, maxRows: 5 }"
                          placeholder="请输入合作条件及要求"
                        ></el-input>
                      </el-col>
                      <el-col :span="24" class="txtTwo">
                        <p>图片：</p>
                        <upload
                          :limit="6"
                          :data="achieveForm.image"
                          :uploadBtn="true"
                          type="image"
                          :url="`/files/image/upload`"
                          @upload="achieveuploadSuccess"
                          @delete="achieveuploadDelete"
                        ></upload>
                      </el-col>
                    </el-col>
                  </el-col>
                  <el-col :span="24" class="btn">
                    <el-button type="primary" size="mini" @click="achieveBtn()">保存</el-button>
                  </el-col>
                </el-col>
              </el-tab-pane>
            </el-tabs>
          </el-col>
        </div>
      </el-col>
    </el-row>
    <el-dialog title="添加信息" :visible.sync="addpatentdialog" width="40%" :before-close="patentdialogclose">
      <el-form ref="addpatentform" :model="addpatentform" label-width="80px" class="addpatentform">
        <el-form-item label="专利名称">
          <el-input v-model="addpatentform.patentinfo" placeholder="请输入专利名称"></el-input>
        </el-form-item>
        <el-form-item label="专利状态">
          <el-select v-model="addpatentform.patentstatus" placeholder="请选择">
            <el-option label="已申请" value="已申请"></el-option>
            <el-option label="已授权" value="已授权"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="patentonSubmit">保存</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <el-dialog title="查看专利信息" :visible.sync="viewpatentdialog" width="40%" :before-close="viewpatentdialogclose">
      <el-table :data="diapatentList" style="width: 100%" border>
        <el-table-column prop="patentinfo" label="专利信息" align="center"> </el-table-column>
        <el-table-column prop="patentstatus" label="专利状态" align="center"> </el-table-column>
        <el-table-column label="操作" align="center">
          <template v-slot="scoped">
            <el-button type="text" @click="delAttend(scoped.$index, scoped.row)" size="small">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
import uploadraw from '@/components/uploadraw.vue';
import upload from '@/components/upload.vue';
import { mapState, createNamespacedHelpers } from 'vuex';
const { mapActions: markettype } = createNamespacedHelpers('markettype');
const { mapActions: mapMarketproduct } = createNamespacedHelpers('marketproduct');
const { mapActions: market } = createNamespacedHelpers('market');
const { mapActions: expertsuser } = createNamespacedHelpers('expertsuser');
export default {
  metaInfo() {
    return { title: this.$route.meta.title };
  },
  name: 'product',
  props: {},
  components: {
    upload,
    uploadraw,
  },
  data: function() {
    return {
      activeName: 'first',
      // 所属领域
      fieldList: [],
      // 成果状态
      achievestatusList: [],
      // 合作方式
      cooperationList: [],
      // 技术需求
      technologyForm: {},
      // 科技成果
      achieveForm: {},
      // 专利信息
      addpatentform: {},
      diapatentList: [],
      addpatentdialog: false,
      viewpatentdialog: false,
    };
  },
  created() {
    this.searchtype();
    this.searchInfo();
  },
  methods: {
    ...markettype({ markettypeList: 'query' }),
    ...market(['fetch', 'update']),
    ...mapMarketproduct({ productFetch: 'fetch', productCreate: 'create', productUpdate: 'update' }),
    ...expertsuser({ expertsuserFetch: 'fetch', expertsuserUpdate: 'update', expertsuserUpgrade: 'upgrade' }),
    // 查询字典表
    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);
      }
    },
    async searchInfo() {
      if (this.user.role == '4' || this.user.role == '5') {
        let res = await this.fetch(this.user.userid);
        if (res.errcode === 0) {
          let message = {
            company: res.data.name,
            phone: res.data.phone,
            email: res.data.email,
            companytype: res.data.companytype,
            companydate: res.data.companydate,
            companycapital: res.data.companycapital,
            institution_code: res.data.institution_code,
            companyperson: res.data.companyperson,
            sndqyzsr: res.data.sndqyzsr,
            sndyffy: res.data.sndyffy,
            companytotal: res.data.companytotal,
            sndyffy: res.data.sndyffy,
            companybrief: res.data.sndyffy,
            mainproduct: res.data.mainproduct,
            qualifications: res.data.qualifications,
            qqwx: res.data.qqwx,
            companyweb: res.data.companyweb,
            contacts: res.data.contacts,
          };
          this.$set(this, `technologyForm`, message);
          this.$set(this, `achieveForm`, message);
        }
      } else if (this.user.role == '6') {
        let res = await this.expertsuserFetch(this.user.userid);
        if (res.errcode === 0) {
          let message = {
            company: res.data.company,
            phone: res.data.phone,
            email: res.data.email,
            qqwx: res.data.qqwx,
            companyweb: res.data.companyweb,
            contacts: res.data.contacts,
          };
          this.$set(this, `technologyForm`, message);
          this.$set(this, `achieveForm`, message);
        }
      }
    },
    // 科技成果提交
    async achieveBtn() {
      let data = this.achieveForm;
      data.userid = this.user.uid;
      data.type = '1';
      data.status = '0';
      data.patent = this.diapatentList;
      let res = await this.productCreate(data);
      if (this.$checkRes(res)) {
        this.$message({
          message: '信息发布成功',
          type: 'success',
        });
        window.location.reload();
      } else {
        this.$message.error('信息发布失败');
      }
    },
    // 技术需求提交
    async technologyBtn() {
      const data = this.technologyForm;
      data.userid = this.user.uid;
      data.type = '0';
      data.status = '0';
      let res = await this.productCreate(data);
      if (this.$checkRes(res)) {
        this.$message({
          message: '信息发布成功',
          type: 'success',
        });
        window.location.reload();
      } else {
        this.$message({
          message: '信息发布失败',
          type: 'success',
        });
      }
    },
    // 添加专利信息
    addpatent() {
      this.addpatentdialog = true;
    },
    patentonSubmit() {
      let data = this.addpatentform;
      this.diapatentList.push(data);
      this.addpatentform = {};
      this.patentdialogclose();
    },
    // 取消添加
    patentdialogclose() {
      this.addpatentdialog = false;
    },
    // 查看专利信息
    viewpatent() {
      this.viewpatentdialog = true;
    },
    // 取消查看专利信息
    viewpatentdialogclose() {
      this.viewpatentdialog = false;
    },
    // 删除
    delAttend(index, val) {
      this.diapatentList.splice(index, 1);
      this.$message({
        message: '删除专利信息成功',
        type: 'success',
      });
      this.viewpatentdialogclose();
    },
    // 图片
    uploadSuccess({ type, data }) {
      let arr = _.get(this.technologyForm, type);
      if (_.isArray(arr)) {
        let datas = { name: data.name, url: data.uri };
        this.technologyForm[type].push({ name: data.name, url: data.uri });
      } else {
        let newArr = [{ name: data.name, url: data.uri }];
        this.$set(this.technologyForm, `${type}`, newArr);
      }
    },
    // 删除图片
    uploadDelete(index) {
      this.technologyForm.image.splice(index, 1);
    },
    // 项目路演
    uploadroadshow({ type, filetype, data }) {
      this.$set(this.achieveForm, `${type}`, data.uri);
    },
    uploaddelroadshow(index) {},
    // 成果图片
    achieveuploadSuccess({ type, data }) {
      let arr = _.get(this.achieveForm, type);
      if (_.isArray(arr)) {
        let datas = { name: data.name, url: data.uri };
        this.achieveForm[type].push({ name: data.name, url: data.uri });
      } else {
        let newArr = [{ name: data.name, url: data.uri }];
        this.$set(this.achieveForm, `${type}`, newArr);
      }
    },
    // 删除图片
    achieveuploadDelete(index) {
      this.achieveForm.image.splice(index, 1);
    },
  },
  computed: {
    ...mapState(['user']),
  },
};
</script>

<style lang="less" scoped>
.down {
  margin: 15px 0;
  .first {
    .company {
      border: 1px solid #ccc;
      padding: 0 15px 15px 15px;
      h1 {
        margin: 10px 10px;
        border-bottom: 1px solid red;
        height: 40px;
        line-height: 40px;
      }
      .compnayInfo {
        .txt {
          margin: 0 0 5px 0;
          border-bottom: 1px dashed #ccc;
          padding: 10px 0;
          .left {
            text-align: center;
            height: 40px;
            line-height: 40px;
            font-size: 15px;
          }
        }
        .txtTwo {
          p {
            font-size: 15px;
            padding: 10px;
          }
        }
      }
    }
    .product {
      border: 1px solid #ccc;
      padding: 0 15px 15px 15px;
      h1 {
        margin: 10px 10px;
        border-bottom: 1px solid red;
        height: 40px;
        line-height: 40px;
      }
      .productInfo {
        .txt {
          margin: 0 0 5px 0;
          border-bottom: 1px dashed #ccc;
          padding: 10px 0;
          .left {
            text-align: center;
            height: 40px;
            line-height: 40px;
            font-size: 15px;
          }
        }
        .txtTwo {
          p {
            font-size: 15px;
            padding: 10px;
          }
        }
      }
    }
    .btn {
      text-align: center;
      margin: 15px 0;
    }
  }
}
</style>