web-all/src/views/index.vue

<template>
  <div id="index">
    <el-col :span="24">
      <div class="center">
        <el-col :span="24" class="ys">
          <el-input v-model="company" placeholder="请输入查询产品" class="wid"></el-input>
          <el-button type="primary" @click="clic">查询产品</el-button>
        </el-col>
        <el-table @query="clic" :data="list" :default-sort="{ prop: 'company', order: 'descending' }" border>
          <el-table-column prop="company" label="企业名称" sortable></el-table-column>
          <el-table-column prop="name" label="标题" sortable></el-table-column>
          <el-table-column prop="type" label="产品类型" sortable>
            <template slot-scope="{ row: { type } }">
              <span v-if="+type === 0">技术</span>
              <span v-else-if="+type === 1">产品</span>
              <span v-else>商务</span>
            </template>
          </el-table-column>
          <el-table-column prop="field" label="所属领域" sortable></el-table-column>
          <el-table-column prop="cooperation" label="合作方式" sortable></el-table-column>
          <el-table-column prop="contacts" label="联系人" sortable></el-table-column>
          <el-table-column prop="phone" label="联系电话" sortable></el-table-column>
          <el-table-column prop="status" label="状态" sortable>
            <template slot-scope="{ row: { status } }">
              <span v-if="+status === 0">待审核</span>
              <span v-else-if="+status === 1">审核成功</span>
              <span v-else>审核拒绝</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" class="page">
            <el-button type="text" icon="el-icon-delete" @delete="delDelete"></el-button>
          </el-table-column>
        </el-table>
        <el-pagination background layout="prev, pager, next" :total="100"> </el-pagination>
        <el-tabs class="tab" v-model="activeName" type="card" @tab-click="handleClick">
          <el-tab-pane label="技术需求" name="first">
            <el-col :span="24" class="pad">
              <el-col :span="24" class="con">
                <h2>企业信息</h2>
              </el-col>
              <el-col :span="24" class="di">
                <el-col :span="2">
                  <span>企业名称：</span>
                </el-col>
                <el-col :span="20" class="sr">
                  <el-input v-model="form.company" placeholder="请输入企业名称"></el-input>
                </el-col>
              </el-col>
              <el-col :span="24" class="di">
                <el-col :span="2">
                  <span>注册类型:</span>
                </el-col>
                <el-col :span="6" class="sr">
                  <el-input v-model="form.type" placeholder="请输入注册类型"></el-input>
                </el-col>
                <el-col :span="3" class="lrf">
                  <span>组织机构代码:</span>
                </el-col>
                <el-col :span="6">
                  <el-input v-model="form.zzjgdm" placeholder="请输入组织机构代码"></el-input>
                </el-col>
              </el-col>
              <el-col :span="24" class="di">
                <el-col :span="2">
                  <span>注册时间:</span>
                </el-col>
                <el-col :span="6" class="sr">
                  <el-date-picker v-model="form.companydate" type="date" placeholder="请选择时间" format="yyyy-MM-dd" value-format="yyyy-MM-dd">
                  </el-date-picker>
                </el-col>
                <el-col :span="3" class="lrf">
                  <span>注册资金:</span>
                </el-col>
                <el-col :span="6">
                  <el-input v-model="form.companycapit" placeholder="请输入注册资金"></el-input>
                </el-col>
              </el-col>
              <el-col :span="24" class="di">
                <el-col :span="2">
                  <span>企业法人:</span>
                </el-col>
                <el-col :span="6" class="sr">
                  <el-input v-model="form.companyperson" placeholder="请输入企业法人"></el-input>
                </el-col>
                <el-col :span="3" class="lrf">
                  <span>企业网址:</span>
                </el-col>
                <el-col :span="6">
                  <el-input v-model="form.companyweb" placeholder="请输入企业网址"></el-input>
                </el-col>
              </el-col>
              <el-col :span="24" class="di">
                <el-col :span="2">
                  <span>联系人:</span>
                </el-col>
                <el-col :span="6" class="sr">
                  <el-input v-model="form.contacts" placeholder="请输入联系人"></el-input>
                </el-col>
                <el-col :span="3" class="lrf">
                  <span>联系电话:</span>
                </el-col>
                <el-col :span="6">
                  <el-input v-model="form.phone" placeholder="请输入联系电话"></el-input>
                </el-col>
              </el-col>
              <el-col :span="24" class="di">
                <el-col :span="2">
                  <span>QQ&微信</span>
                </el-col>
                <el-col :span="6" class="sr">
                  <el-input v-model="form.qqwx" placeholder="请输入QQ&微信"></el-input>
                </el-col>
                <el-col :span="3" class="lrf">
                  <span>电子邮箱:</span>
                </el-col>
                <el-col :span="6">
                  <el-input v-model="form.email" placeholder="请输入电子邮箱"></el-input>
                </el-col>
              </el-col>
              <el-col :span="24" class="di">
                <el-col :span="2">
                  <span>上年度企业总收入:</span>
                </el-col>
                <el-col :span="6" class="sr">
                  <el-input v-model="form.sndqyzsr" placeholder="请输入上年度企业总收入"></el-input>
                </el-col>
                <el-col :span="3" class="lrf">
                  <span>上年度研发费用:</span>
                </el-col>
                <el-col :span="6">
                  <el-input v-model="form.sndyffy" placeholder="请输入上年度研发费用"></el-input>
                </el-col>
              </el-col>
              <el-col :span="24" class="di">
                <el-col :span="2">
                  <span>企业总人数:</span>
                </el-col>
                <el-col :span="6" class="sr">
                  <el-input v-model="form.companytotal" placeholder="请输入企业总人数"></el-input>
                </el-col>
                <el-col :span="3" class="lrf">
                  <span>专&兼职研发人数:</span>
                </el-col>
                <el-col :span="6">
                  <el-input v-model="form.zjzyfrs" placeholder="请输入专&兼职研发人数"></el-input>
                </el-col>
              </el-col>
              <el-col :span="24" class="dir">
                <span>企业简介:</span>
                <el-input type="textarea" maxlength="300" show-word-limit v-model="form.companybrief" placeholder="请输入企业简介"></el-input>
              </el-col>
              <el-col :span="24" class="dir">
                <span>主要产品:</span>
                <el-input type="textarea" maxlength="300" show-word-limit v-model="form.mainproduct" placeholder="请输入主要产品"></el-input>
              </el-col>
              <el-col :span="24" class="cc">
                <span>企业资质&荣誉:</span>
                <el-input type="textarea" maxlength="300" show-word-limit v-model="form.qualifications" placeholder="请输入主要产品"></el-input>
              </el-col>
            </el-col>
            <el-col :span="24" class="pad">
              <el-col :span="24" class="ccn">
                <h2>技术需求</h2>
              </el-col>
              <el-col :span="24" class="di">
                <el-col :span="4">
                  <span>技术难题&需求名称：</span>
                </el-col>
                <el-col :span="19" class="sr">
                  <el-input v-model="form.name" placeholder="请输入技术难题&需求名称"></el-input>
                </el-col>
              </el-col>
              <el-col :span="24" class="di">
                <el-col :span="3">
                  <span>需求紧急程度：</span>
                </el-col>
                <el-col :span="6" class="sr">
                  <el-select v-model="form.degreeurgency">
                    <el-option label="特急" value="特急"></el-option>
                    <el-option label="一般" value="一般"></el-option>
                    <el-option label="储备" value="储备"></el-option>
                  </el-select>
                </el-col>
                <el-col :span="3" class="lrf">
                  <span>所属领域：</span>
                </el-col>
                <el-col :span="6">
                  <el-select v-model="form.field">
                    <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="24" class="di">
                <el-col :span="2">
                  <span>投资预算:</span>
                </el-col>
                <el-col :span="6" class="sr">
                  <el-input v-model="form.budget" placeholder="请输入投资预算"></el-input>
                </el-col>
                <el-col :span="3" class="lrf">
                  <span> 合作方式：</span>
                </el-col>
                <el-col :span="6">
                  <el-select v-model="form.cooperation">
                    <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">
                <span>技术难题&需求说明:</span>
              </el-col>
              <el-col :span="24" class="dir">
                <el-input type="textarea" maxlength="300" show-word-limit v-model="form.requirementdesc" placeholder="请输入技术难题&需求说明"></el-input>
              </el-col>
              <el-col :span="24" class="dir">
                <span>预期技术目标描述：</span>
                <el-input type="textarea" maxlength="300" show-word-limit v-model="form.expect" placeholder="请输入预期技术目标描述"></el-input>
              </el-col>
              <el-col :span="24" class="dir">
                <span>需求现状及应对措施：</span>
                <el-input type="textarea" maxlength="300" show-word-limit v-model="form.present" placeholder="请输入需求现状及应对措施"></el-input>
              </el-col>
              <el-col :span="24" class="cc">
                <span>合作条件及要求：</span>
                <el-input type="textarea" maxlength="300" show-word-limit v-model="form.condition" placeholder="请输入合作条件及要求"></el-input>
              </el-col>
            </el-col>
          </el-tab-pane>
          <el-tab-pane label="科技成果" name="second">
            <el-col :span="24">
              <h2>技术</h2>
            </el-col>
          </el-tab-pane>
        </el-tabs>
        <el-col :span="24">
          <el-button type="primary" @click="technologyBtn">提交</el-button>
        </el-col>
      </div>
    </el-col>
  </div>
</template>

<script>
import { mapState, createNamespacedHelpers } from 'vuex';
const { mapActions: markettype } = createNamespacedHelpers('markettype');
const { mapActions: collectproduct } = createNamespacedHelpers('collectproduct');
export default {
  name: 'index',
  props: {},
  components: {},
  data: function() {
    return {
      types: '',
      sta: '',
      type: '',
      company: '',
      form: {},
      total: '',
      activeName: 'first',
      list: [
        // {
        //   company: '1',
        // },
        // {
        //   company: '2',
        // },
      ],
      fieldList: [],
      cooperationList: [],
      achievestatusList: [],
    };
  },
  created() {
    this.searchtype();
  },
  methods: {
    ...markettype({ markettypeList: 'query' }),
    ...collectproduct(['query', 'fetch', 'create', 'delete']),
    async clic({ skip = 0, limit = 10, ...info } = {}) {
      if (this.company) {
        let res = await this.query({ skip, limit, company: this.company, ...info });
        if (this.$checkRes(res)) {
          this.$set(this, `list`, res.data);
        }
      }
    },
    async delDelete({ data }) {
      let res = await this.delete(data.id);
      if (this.$checkRes(res)) {
        this.$message({
          message: '信息删除成功',
          type: 'success',
        });
        this.search();
      }
    },
    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 technologyBtn() {
      let data = this.form;
      if (data.company != null) {
        data.noticeid = this.noticeid;
        data.type = '0';
        data.status = '0';
        let res = await this.create(data);
        if (this.$checkRes(res)) {
          this.$message({
            message: '信息添加成功',
            type: 'success',
          });
          this.form = {};
        }
      } else {
        this.$message({
          message: '企业名称&需求名称不能为空哦',
          type: 'warning',
        });
      }
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
    click() {},
  },
  computed: {
    ...mapState(['user']),
    pageTitle() {
      return `${this.$route.meta.title}`;
    },
  },
  metaInfo() {
    return { title: this.$route.meta.title };
  },
};
</script>

<style lang="less" scoped>
.center {
  width: 60%;
  margin: 0 auto;
}
.ys {
  margin: 20px 0 20px 0;
}
.wid {
  width: 40%;
  margin-left: 300px;
}
.tab {
  margin: 20px 0 20px 0;
  border: 1px solid black;
}
.con {
  text-align: center;
}
.ccn {
  text-align: center;
  border-top: 1px solid black;
}
.hz {
  margin-left: 200px;
}
.lrf {
  margin-left: 100px;
}
.di {
  border-bottom: 1px dashed #ccc;
  margin: 0 0 10px 0;
}
.sr {
  margin-bottom: 10px;
}
.dir {
  border-bottom: 1px dashed #ccc;
  padding: 10px 0;
}
.cc {
  margin-bottom: 10px;
}
.pad {
  padding: 0 5px 0 5px;
}
</style>