web-test/src/views/adminCenter/applyInfo/index.vue

<template>
  <div id="index">
    <el-row>
      <el-col :span="24">
        <el-col :span="24" class="leftTop"> <span>|</span> <span>申请管理</span> </el-col>
        <el-col :span="24" class="info">
          <span v-if="display == 'list'">
            <el-table :data="list" border style="width: 100%">
              <el-table-column prop="user_name" label="姓名" align="center" show-overflow-tooltip> </el-table-column>
              <el-table-column prop="contact_tel" label="电话" align="center"> </el-table-column>
              <el-table-column prop="apply_time" label="申请时间" align="center" show-overflow-tooltip> </el-table-column>
              <el-table-column label="用户类型" align="center">
                <template slot-scope="scope">
                  <span>{{ scope.row.role == '4' ? '个人' : scope.row.role == '5' ? '机构' : '专家' }}</span>
                </template>
              </el-table-column>
              <el-table-column label="用户状态" align="center">
                <template slot-scope="scope">
                  <span>{{ scope.row.status == '0' ? '待审核' : scope.row.status == '1' ? '通过' : '拒绝' }}</span>
                </template>
              </el-table-column>
              <el-table-column fixed="right" label="操作" align="center">
                <template slot-scope="scope">
                  <el-button @click="toEdit(scope.row)" type="text" size="small">审核</el-button>
                </template>
              </el-table-column>
            </el-table>
            <el-col :span="24" class="page">
              <el-pagination
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                layout="total, prev, pager, next, jumper"
                :total="total"
                :page-size="pageSize"
              >
              </el-pagination>
            </el-col>
          </span>
          <span v-else>
            <el-col :span="24" style="text-align:right;">
              <el-button type="primary" size="mini" @click="display = 'list'">返回</el-button>
            </el-col>
            <el-col :span="24">
              <el-table :data="goodsList" border style="width: 100%">
                <el-table-column prop="name" label="产品名称" align="center" show-overflow-tooltip> </el-table-column>
                <el-table-column label="类型" align="center">
                  <template slot-scope="scope">
                    <span>{{ scope.row.type == '0' ? '技术' : scope.row.type == '1' ? '产品' : '商务' }}</span>
                  </template>
                </el-table-column>
                <el-table-column prop="contacts" label="联系人" align="center" show-overflow-tooltip> </el-table-column>
                <el-table-column prop="phone" label="电话" align="center"> </el-table-column>
                <el-table-column prop="field" label="所属领域" align="center" show-overflow-tooltip> </el-table-column>
                <el-table-column prop="cooperation" label="合作方式" align="center"> </el-table-column>
                <el-table-column label="用户状态" align="center">
                  <template slot-scope="scope">
                    <span>{{ scope.row.dockStatus == '0' ? '待审核' : scope.row.dockStatus == '1' ? '通过' : '拒绝' }}</span>
                  </template>
                </el-table-column>
                <el-table-column fixed="right" label="操作" align="center">
                  <template slot-scope="scope">
                    <el-button @click="toCheck(scope.row)" type="text" size="small">审核</el-button>
                  </template>
                </el-table-column>
              </el-table>
              <el-col :span="24" class="page">
                <el-pagination
                  @current-change="handleCurrentChange1"
                  :current-page="currentPage1"
                  layout="total, prev, pager, next, jumper"
                  :total="goodsTotal"
                  :page-size="pageSize"
                >
                </el-pagination>
              </el-col>
            </el-col>
          </span>
        </el-col>
      </el-col>
    </el-row>
    <el-dialog title="审核产品" :visible.sync="dialogVisible" width="50%" :before-close="handleClose">
      <el-form ref="form" :model="form" label-width="150px">
        <el-form-item label="审核信息状态">
          <el-radio v-model="form.dockStatus" label="0" disabled>待审核</el-radio>
          <el-radio v-model="form.dockStatus" label="1">审核通过</el-radio>
          <el-radio v-model="form.dockStatus" label="2">审核拒绝</el-radio>
        </el-form-item>
        <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="产品类型" 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-form-item>
          <el-button type="primary" @click="examineBtn()">审核提交</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import upload from '@/components/uploadProduct.vue';
import dataTable from '@/components/data-table.vue';
import { mapState, createNamespacedHelpers } from 'vuex';
const { mapActions: dock } = createNamespacedHelpers('dock');
const { mapActions: apply } = createNamespacedHelpers('apply');
const { mapActions: markettype } = createNamespacedHelpers('markettype');
export default {
  name: 'index',
  props: {},
  components: {
    // dataTable,
    upload,
  },
  data: function() {
    return {
      display: 'list',
      currentPage: 1,
      pageSize: 10,
      origin: [],
      list: [],
      applylist: [],
      total: 0,
      // 对接会id
      dock_id: '',
      // 审核产品列表
      goodsList: [],
      goodsTotal: 0,
      currentPage1: 1,
      origin1: [],
      good: [],
      // 审核产品
      dialogVisible: false,
      // 产品详情
      form: {},
      // 所属领域
      fieldList: [],
      // 成果状态
      achievestatusList: [],
      // 合作方式
      cooperationList: [],
    };
  },
  async created() {
    await this.searchtype();
    await this.search();
  },
  methods: {
    ...dock(['fetch', 'query', 'delete', 'update', 'delete', 'updateGood']),
    ...apply({ applyUpdate: 'update' }),
    ...markettype({ markettypeList: 'query' }),
    async search() {
      let res = await this.fetch(this.user.uid);
      if (this.$checkRes(res)) {
        this.$set(this, `applylist`, res.data.apply);
        this.$set(this, `dock_id`, res.data.id);
        this.$set(this, `total`, res.data.apply.length);
      }
    },
    // 查询字典表
    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);
      }
    },
    // 审核
    toEdit(data) {
      this.$set(this, `good`, data.goodsList);
      this.$set(this, `goodsTotal`, data.goodsList.length);
      this.display = 'view';
    },
    // 审核产品
    toCheck(data) {
      this.$set(this, `form`, data);
      this.dialogVisible = true;
    },
    // 提交审核
    async examineBtn() {
      let data = this.form;
      data.id = this.dock_id;
      let res = await this.updateGood(data);
      this.$checkRes(res, '审核成功', '审核失败');
      this.dialogVisible = false;
    },
    // 取消
    handleClose(done) {
      done();
    },
    // 图片
    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);
    },
    // 分页
    searchpage(page = 1) {
      this.$set(this, `list`, this.origin[page - 1]);
    },
    handleCurrentChange(currentPage) {
      this.searchpage(currentPage);
    },
    // 产品分页
    // 分页
    searchpage1(page = 1) {
      this.$set(this, `goodsList`, this.origin1[page - 1]);
    },
    handleCurrentChange1(currentPage1) {
      this.searchpage1(currentPage1);
    },
  },
  watch: {
    applylist: {
      immediate: true,
      deep: true,
      handler(val) {
        if (val && val.length > 0) this.$set(this, `origin`, _.chunk(val, this.pageSize));
        this.searchpage();
      },
    },
    good: {
      immediate: true,
      deep: true,
      handler(val) {
        if (val && val.length > 0) this.$set(this, `origin1`, _.chunk(val, this.pageSize));
        this.searchpage1();
      },
    },
  },
  computed: {
    ...mapState(['user']),
    pageTitle() {
      return `${this.$route.meta.title}`;
    },
  },
  metaInfo() {
    return { title: this.$route.meta.title };
  },
};
</script>

<style lang="less" scoped>
.leftTop {
  font-size: 18px;
  width: 96%;
  height: 41px;
  line-height: 35px;
  border-bottom: 1px solid #e5e5e5;
  position: relative;
  bottom: 1px;
  margin: 10px;
  font-weight: 600;
  color: #22529a;
}
.info {
  padding: 0 40px 0 10px;
}
.page {
  text-align: center;
  padding: 10px 0;
}
</style>