web-test/src/views/superAdminCenter/enterpriseProduct/index.vue

<template>
  <div id="index">
    <el-row>
      <el-col :span="24">
        <el-col :span="24" class="main">
          <el-tabs v-model="activeName" type="card">
            <el-tab-pane label="待审核" name="first">
              <one :oneList="oneList" :total="oneTotal" @handleDelete="handleDelete" @handleEdit="handleEdit" @btndetail="btndetail"></one>
            </el-tab-pane>
            <el-tab-pane label="审核成功" name="second">
              <two :oneList="twoList" :total="twoTotal" @handleDelete="handleDelete" @btndetail="btndetail"></two>
            </el-tab-pane>
            <el-tab-pane label="审核失败" name="third">
              <three :oneList="threeList" :total="threeTotal" @handleDelete="handleDelete" @btndetail="btndetail"></three>
            </el-tab-pane>
          </el-tabs>
        </el-col>
        <el-dialog :title="theme" width="60%" :visible.sync="dialog" @closed="handleClose" :destroy-on-close="true">
          <el-form ref="form" :model="form" label-width="150px" :rules="rules">
            <el-form-item label="产品类型">
              <el-radio v-model="form.type" label="0" readonly>科技需求</el-radio>
              <el-radio v-model="form.type" label="1" readonly>技术成果</el-radio>
              <el-radio v-model="form.type" label="2" readonly>商务服务</el-radio>
            </el-form-item>
            <el-form-item label="企业名称">
              <el-input v-model="form.company" placeholder="请输入企业名称" readonly></el-input>
            </el-form-item>
            <el-form-item label="联系电话">
              <el-input v-model="form.phone" placeholder="请输入联系电话" readonly></el-input>
            </el-form-item>
            <el-form-item label="电子邮箱">
              <el-input v-model="form.email" placeholder="请输入电子邮箱" readonly></el-input>
            </el-form-item>
            <el-form-item label="联系人">
              <el-input v-model="form.contacts" placeholder="请输入联系人" readonly></el-input>
            </el-form-item>
            <el-form-item label="QQ/微信">
              <el-input v-model="form.qqwx" placeholder="请输入QQ/微信" readonly></el-input>
            </el-form-item>
            <span v-if="form.type == '0'">
              <el-form-item label="需求名称">
                <el-input v-model="form.name" placeholder="请输入需求名称" readonly></el-input>
              </el-form-item>
              <el-form-item label="需求紧急程度">
                <el-radio-group v-model="form.degreeurgency">
                  <el-radio label="特急" readonly></el-radio>
                  <el-radio label="一般" readonly></el-radio>
                  <el-radio label="储备" readonly></el-radio>
                </el-radio-group>
              </el-form-item>
              <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-input v-model="form.budget" placeholder="请输入投资预算" readonly></el-input>
              </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.requirementdesc"
                  type="textarea"
                  maxlength="500"
                  show-word-limit
                  :autosize="{ minRows: 2, maxRows: 5 }"
                  placeholder="请输入技术说明"
                  readonly
                ></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="请输入预期目标"
                  readonly
                ></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="请输入需求现状"
                  readonly
                ></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="请输入合作条件及要求"
                  readonly
                ></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-else-if="form.type == '1'">
              <el-form-item label="成果名称">
                <el-input v-model="form.name" placeholder="请输入名称" readonly></el-input>
              </el-form-item>
              <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-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="请输入成果权属" readonly></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.intentionprice" placeholder="请输入意向价格" readonly></el-input>
              </el-form-item>
              <el-form-item label="专利信息">
                <el-table :data="form.patent" 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>
              </el-form-item>
              <el-form-item label="项目路演">
                <el-link :href="form.roadshow" :underline="false">项目路演下载</el-link>
              </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="请输入成果简介"
                  readonly
                ></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="请输入技术特点"
                  readonly
                ></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="请输入技术团队"
                  readonly
                ></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="请输入商业预期"
                  readonly
                ></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="请输入合作条件及要求"
                  readonly
                ></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-else-if="form.type == '2'">
              <el-form-item label="商务名称">
                <el-input v-model="form.name" placeholder="请输入名称" readonly></el-input>
              </el-form-item>
              <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 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="请输入信息描述"
                  readonly
                ></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="请输入核心要素"
                  readonly
                ></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="请输入价格信息"
                  readonly
                ></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="请输入商务预期"
                  readonly
                ></el-input>
              </el-form-item>
            </span>
            <el-form-item label="信息状态" v-if="form.id">
              <el-radio v-model="form.status" label="0" disabled>待审核</el-radio>
              <el-radio v-model="form.status" label="1">审核通过</el-radio>
              <el-radio v-model="form.status" label="2">审核拒绝</el-radio>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="examineBtn()">审核提交</el-button>
            </el-form-item>
          </el-form>
        </el-dialog>
        <el-dialog title="信息详情" :visible.sync="dialogVisible" width="60%" :before-close="handleClosedetail">
          <directDetail :directInfo="directInfo"></directDetail>
        </el-dialog>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import one from './parts/one.vue';
import two from './parts/two.vue';
import three from './parts/three.vue';
import upload from '@/components/uploadProduct.vue';
import directDetail from '@/layout/direct/directDetail.vue';
import { mapState, createNamespacedHelpers } from 'vuex';
const { mapActions: newmarketproduct } = createNamespacedHelpers('marketproduct');
const { mapActions: markettype } = createNamespacedHelpers('markettype');
export default {
  name: 'index',
  props: {},
  components: {
    one,
    two,
    three,
    upload,
    directDetail,
  },
  data: function() {
    return {
      activeName: 'first',
      theme: '产品',
      oneList: [],
      oneTotal: 0,
      twoList: [],
      twoTotal: 0,
      threeList: [],
      threeTotal: 0,
      dialog: false,
      form: {},
      rules: {},
      // 所属领域
      fieldList: [],
      // 成果状态
      achievestatusList: [],
      // 合作方式
      cooperationList: [],
      dialogVisible: false,
      directInfo: {},
    };
  },
  created() {
    this.search();
    this.searchtype();
  },
  methods: {
    ...newmarketproduct(['query', 'comquery', 'delete', 'fetch', 'update', 'exportexcel']),
    ...markettype({ markettypeList: 'query' }),
    // 查询字典表
    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 search({ skip = 0, limit = 10, ...info } = {}) {
      let code = this.user.code;
      let pid = this.user.uid;
      const oneArr = await this.comquery({ status: 0, code, pid, skip, limit, ...info });
      const twoArr = await this.comquery({ status: 1, code, pid, skip, limit, ...info });
      const threeArr = await this.comquery({ status: 2, code, pid, skip, limit, ...info });
      this.$set(this, `oneList`, oneArr.data);
      this.$set(this, `oneTotal`, oneArr.data.length);
      this.$set(this, `twoList`, twoArr.data);
      // this.$set(this, `exportList`, twoArr.data);
      this.$set(this, `twoTotal`, twoArr.data.length);
      this.$set(this, `threeList`, threeArr.data);
      this.$set(this, `threeTotal`, threeArr.data.length);
    },
    // 审核
    handleEdit(data) {
      this.$set(this, `form`, data);
      this.dialog = true;
    },
    // 提交
    async examineBtn() {
      let data = this.form;
      const res = await this.update(data);
      if (this.$checkRes(res)) {
        this.$message({
          message: '修改信息成功',
          type: 'success',
        });
        this.dialog = false;
      }
    },
    // 取消
    handleClose() {
      this.form = {};
      this.dialog = false;
    },
    // 刪除
    async handleDelete(id) {
      this.$confirm('您确定要删除此信息吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(async () => {
          const res = await this.delete(id);
          if (this.$checkRes(res)) {
            this.$message({
              message: '删除信息成功',
              type: 'success',
            });
            this.search();
          }
        })
        .catch(() => {});
    },
    // 图片
    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);
    },
    // 导出技术数据
    async excelBtn() {
      let data = {
        totaltype: '0',
      };
      const res = await this.exportexcel(data);
      if (this.$checkRes(res)) {
        window.open(res.data);
      }
    },
    // 导出产品数据
    async excelBtns() {
      let data = {
        totaltype: '1',
      };
      const res = await this.exportexcel(data);
      if (this.$checkRes(res)) {
        window.open(res.data);
      }
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => v[j]));
    },
    // 查看详情
    btndetail(data) {
      this.$set(this, `directInfo`, data);
      this.dialogVisible = true;
    },
    // 取消
    handleClosedetail() {
      this.directInfo = {};
      this.dialogVisible = false;
    },
  },
  computed: {
    ...mapState(['user']),
    pageTitle() {
      return `${this.$route.meta.title}`;
    },
  },
  metaInfo() {
    return { title: this.$route.meta.title };
  },
};
</script>

<style lang="less" scoped>
.excel {
  position: absolute;
  text-align: right;
  top: 5px;
}
/deep/.el-form-item {
  margin-bottom: 10px;
}
</style>