web-test/src/views/userCenter/dockInfo/part/nextLive.vue

<template>
  <div id="nextLive">
    <el-row>
      <el-col :span="24">
        <el-table :data="nextData" stripe style="width: 100%" border>
          <el-table-column prop="room_id" label="房间号" align="center" :show-overflow-tooltip="true"> </el-table-column>
          <el-table-column prop="title" label="对接会标题" align="center" :show-overflow-tooltip="true"> </el-table-column>
          <el-table-column prop="start_time" label="开始时间" align="center" :show-overflow-tooltip="true"> </el-table-column>
          <el-table-column prop="end_time" label="结束时间" align="center" :show-overflow-tooltip="true"> </el-table-column>
          <el-table-column prop="join_end" label="报名截止时间" align="center" :show-overflow-tooltip="true"> </el-table-column>
          <el-table-column prop="sheng" label="省" align="center" :show-overflow-tooltip="true"> </el-table-column>
          <el-table-column prop="shi" label="市" align="center" :show-overflow-tooltip="true"> </el-table-column>
          <el-table-column prop="adminuser" label="负责人" align="center" :show-overflow-tooltip="true"> </el-table-column>
          <el-table-column prop="phone" label="联系电话" align="center" :show-overflow-tooltip="true"> </el-table-column>
          <el-table-column label="操作" style="width:200px" align="center">
            <template slot-scope="scope">
              <el-button size="mini" type="text" @click.prevent="handleEdit(scope.row.id)"
                ><el-tooltip class="item" effect="dark" content="申请" placement="top-start"> <i class="el-icon-view"></i> </el-tooltip
              ></el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-col class="page" :span="24">
          <page :total="nextTotal" position="right"></page>
        </el-col>
      </el-col>
    </el-row>
    <el-dialog title="申请" :visible.sync="dialogFormVisible" :before-close="handleClose">
      <el-tabs v-model="activeName">
        <el-tab-pane label="技术需求" name="first">
          <el-form :model="demandForm" label-width="150px">
            <el-form-item label="产品类型" prop="totaltype">
              <el-select v-model="demandForm.type" 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="名称">
              <el-input v-model="demandForm.name" placeholder="请输入名称"></el-input>
            </el-form-item>
            <el-form-item label="联系人">
              <el-input v-model="demandForm.contacts" placeholder="请输入联系人"></el-input>
            </el-form-item>
            <el-form-item label="联系电话">
              <el-input v-model="demandForm.phone" placeholder="请输入联系电话"></el-input>
            </el-form-item>
            <el-form-item label="QQ&微信">
              <el-input v-model="demandForm.qqwx" placeholder="请输入QQ&微信"></el-input>
            </el-form-item>
            <el-form-item label="电子邮箱">
              <el-input v-model="demandForm.email" placeholder="请输入电子邮箱"></el-input>
            </el-form-item>
            <el-form-item label="所属领域">
              <el-select v-model="demandForm.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="demandForm.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="demandForm.company" placeholder="请输入企业名称"></el-input>
            </el-form-item>
            <el-form-item label="企业简介">
              <el-input
                v-model="demandForm.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="demandForm.companyweb" placeholder="请输入企业网站"></el-input>
            </el-form-item>
            <el-form-item label="合作条件及要求">
              <el-input
                v-model="demandForm.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="demandForm.image"
                :uploadBtn="true"
                type="image"
                :url="`/files/image/upload`"
                @upload="uploadSuccess"
                @delete="uploadDelete"
              ></upload>
            </el-form-item>
            <el-form-item label="投资预算">
              <el-input v-model="demandForm.budget" placeholder="请输入投资预算"></el-input>
            </el-form-item>
            <el-form-item label="注册类型">
              <el-input v-model="demandForm.companytype" placeholder="请输入注册类型"></el-input>
            </el-form-item>
            <el-form-item label="组织机构代码">
              <el-input v-model="demandForm.zzjgdm" placeholder="请输入组织机构代码"></el-input>
            </el-form-item>
            <el-form-item label="注册时间">
              <el-date-picker v-model="demandForm.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="demandForm.companycapital" placeholder="请输入注册资金"></el-input>
            </el-form-item>
            <el-form-item label="企业法人">
              <el-input v-model="demandForm.companyperson" placeholder="请输入企业法人"></el-input>
            </el-form-item>
            <el-form-item label="上年度企业总收入">
              <el-input v-model="demandForm.sndqyzsr" placeholder="请输入上年度企业总收入"></el-input>
            </el-form-item>
            <el-form-item label="上年度研发费用">
              <el-input v-model="demandForm.sndyffy" placeholder="请输入上年度研发费用"></el-input>
            </el-form-item>
            <el-form-item label="企业总人数">
              <el-input v-model="demandForm.companytotal" placeholder="请输入企业总人数"></el-input>
            </el-form-item>
            <el-form-item label="专&兼职研发人数">
              <el-input v-model="demandForm.zjzyfrs" placeholder="请输入专&兼职研发人数"></el-input>
            </el-form-item>
            <el-form-item label="需求紧急程度">
              <el-radio-group v-model="demandForm.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="demandForm.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="demandForm.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="demandForm.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="demandForm.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="demandForm.qualifications"
                type="textarea"
                maxlength="300"
                show-word-limit
                :autosize="{ minRows: 2, maxRows: 5 }"
                placeholder="请输入企业资质&荣誉"
              ></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" label-width="100px">
            <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 @click="resetForm('ruleForm')">取消</el-button>
              <el-button type="primary" @click="submitproductForm('ruleForm')">确定</el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>
      </el-tabs>
    </el-dialog>
  </div>
</template>

<script>
import page from '@/components/pagination.vue';
import { mapState, createNamespacedHelpers } from 'vuex';
import _ from 'lodash';
import upload from '@/components/upload.vue';
const { mapActions: dock } = createNamespacedHelpers('dock');
const { mapActions: place } = createNamespacedHelpers('place');
const { mapActions: apply } = createNamespacedHelpers('apply');
const { mapActions: mapMarkettype } = createNamespacedHelpers('markettype');
const { mapActions: mapProduct } = createNamespacedHelpers('marketproduct');
export default {
  name: 'nextLive',
  props: {},
  components: {
    page,
    upload,
  },
  data: function() {
    return {
      activeName: 'first',
      dock_id: '',
      // 下期直播
      nextData: [],
      nextTotal: 0,
      // 申请参加对接会
      dialogFormVisible: false,
      // 需求
      demandForm: {
        type: '0',
      },
      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: {},
      // 产品列表
      goodsLists: [],
      // 字典表
      // 所属领域
      fieldList: [],
      // 成果状态
      achievestatusList: [],
      // 合作方式
      cooperationList: [],
    };
  },
  created() {
    this.search();
    this.maarkettype();
  },
  methods: {
    ...dock(['query', 'delete', 'update']),
    ...place({ palcequery: 'query', palcefetch: 'fetch' }),
    ...apply({ applyupdate: 'update', applyCreate: 'create' }),
    ...mapMarkettype({ markettypeList: 'query' }),
    ...mapProduct({ mapProductQuery: 'query', mapProductFetch: 'fetch' }),
    // 查询对接会
    async search({ skip = 0, limit = 0 } = { skip: 0, limit: 0 }) {
      let res = await this.query({ skip, limit, status: '0' });
      for (const val of res.data) {
        let parent = val.province;
        let places = val.place;
        let reslte = await this.palcequery({ level: 1, parent });
        let resltes = await this.palcequery({ level: 2, parent });
        var arr = reslte.data.filter(item => item.code === parent);
        var cre = resltes.data.filter(item => item.code === places);
        for (const shi of cre) {
          val.shi = shi.name;
        }
        for (const sheng of arr) {
          val.sheng = sheng.name;
        }
      }
      this.$set(this, `nextData`, res.data);
      this.$set(this, `nextTotal`, res.total);
    },
    // 申请对接会
    handleEdit(id) {
      this.dialogFormVisible = true;
      this.$set(this, `dock_id`, id);
    },
    // 需求提交
    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.dock_id, ...data });
      if (res.errcode === 0) {
        this.$message({
          message: '申请参加对接会成功',
          type: 'success',
        });
        this.resetForm();
      }
    },
    // 產品提交
    async submitproductForm() {
      let data = this.productForm;
      data.user_id = this.user.uid;
      data.user_name = this.user.name;
      data.contact_tel = this.user.phone;
      data.role = this.user.role;
      const res = await this.applyCreate({ id: this.dock_id, ...data });
      if (res.errcode === 0) {
        this.$message({
          message: '申请参加对接会成功',
          type: 'success',
        });
        this.resetForm();
      }
    },
    // 取消
    resetForm() {
      this.demandForm = {
        totaltype: '0',
      };
      this.productForm = {};
      this.dialogFormVisible = false;
      this.search();
    },
    // 关闭申请
    handleClose(done) {
      this.resetForm();
      done();
    },
    // 查询类型
    async maarkettype({ ...info } = {}) {
      // 所属领域;
      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);
      }
      res = await this.mapProductQuery({ userid: this.user.uid });
      if (this.$checkRes(res)) {
        this.$set(this, `goodsLists`, res.data);
      }
    },
    // 图片
    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 {
        let newArr = [{ name: data.name, url: data.uri }];
        this.$set(this.demandForm, `${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></style>