web-achieve/src/views/userDeclare/index.vue

<template>
  <div id="index">
    <el-row>
      <el-col :span="24" class="main">
        <div class="w_1200">
          <el-col :span="24" class="info">
            <el-col :span="24" class="one">
              成果评价系统-用户申报
            </el-col>
            <el-col :span="24" class="two">
              <el-col :span="24" class="setp">
                <el-steps :active="active" align-center>
                  <el-step title="（一）基本信息"> </el-step>
                  <el-step title="（二）内容简介"> </el-step>
                  <el-step title="（三）主研人员名单"></el-step>
                  <el-step title="（四）评价委托方提供资料清单"></el-step>
                </el-steps>
              </el-col>
              <el-col :span="24" class="twoInfo">
                <basic :basicForm="basic" @timeBtn="timeBtn" @basicBtn="basicBtn" v-if="active == '1'"></basic>
                <brief :briefForm="brief" @timeBtn="timeBtn" @briefUp="briefUp" @briefBtn="briefBtn" v-else-if="active == '2'"></brief>
                <research :researchForm="research" @timeBtn="timeBtn" @researchUp="researchUp" @researchBtn="researchBtn" v-else-if="active == '3'"></research>
                <datalists :datalistForm="datalist" @timeBtn="timeBtn" @detailedUp="detailedUp" @onSubmit="onSubmit" v-else-if="active == '4'"></datalists>
              </el-col>
            </el-col>
          </el-col>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import basic from './parts/basic.vue';
import brief from './parts/brief.vue';
import research from './parts/research.vue';
import datalists from './parts/datalists.vue';
import { mapState, createNamespacedHelpers } from 'vuex';
const { mapActions: achieveApply } = createNamespacedHelpers('achieveApply');
export default {
  name: 'index',
  props: {},
  components: {
    basic,
    brief,
    research,
    datalists,
  },
  data: function() {
    return {
      // 步骤
      active: 1,
      // 基本信息
      basic: {
        // achieve_date: '2021-05-24 10:13:08',
        // achieve_form: '新技术',
        // achieve_name: '06-01成果4',
        // achieve_num: '123456',
        // achieve_type: ['发明专利', '实用新型专利'],
        // address: '长春市',
        // apply_company: '福瑞',
        // apply_nature: '企业',
        // apply_personal: '顾红伟',
        // apply_phone: '13943018186',
        // contacts: '顾红伟',
        // email: '123456@163.com',
        // fax: '123456',
        // objective: '申报奖励',
        // output: '1',
        // phone: '13943018186',
        // profit: '2',
        // revenue: '3',
        // stage: '实验室',
      },
      // 内容简介
      brief: {
        // achieve_brief: '成果简介',
        // advanced: '成果的创造性，先进性',
        // compare: '与国内外同类技术比较',
        // field: '应用领域和技术原理',
        // kpi_index: '性能指标',
        // opinion: '坐在的问题和改进意见',
        // prospect: '推广应用的范围',
        // sense: '作用意义',
      },
      // 研发人员名单
      research: [
        // {
        //   name: '姓名',
        //   gender: '女',
        //   age: '25',
        //   birth: '1996-03-25',
        //   zc: '职称',
        //   education: '本科',
        //   degree: '学士',
        //   major: '计算机',
        //   abroad: '否',
        //   company: '工作单位',
        //   work: '主要工作',
        //   devote: '创造性意见',
        // },
        // {
        //   name: '姓名',
        //   gender: '女',
        //   age: '25',
        //   birth: '1996-03-25',
        //   zc: '职称',
        //   education: '本科',
        //   degree: '学士',
        //   major: '计算机',
        //   abroad: '否',
        //   company: '工作单位',
        //   work: '主要工作',
        //   devote: '创造性意见',
        // },
        // {
        //   name: '姓名',
        //   gender: '女',
        //   age: '25',
        //   birth: '1996-03-25',
        //   zc: '职称',
        //   education: '本科',
        //   degree: '学士',
        //   major: '计算机',
        //   abroad: '否',
        //   company: '工作单位',
        //   work: '主要工作',
        //   devote: '创造性意见',
        // },
      ],
      // 补充材料
      datalist: {
        // benefit: { name: '科教之旅.txt', url: '/files/live/benefit/20210524101550.txt' },
        // compare_report: { name: '05-06.txt', url: '/files/live/compare/report/20210524101548.txt' },
        // gf: { name: '科教之旅.txt', url: '/files/live/gf/20210524101611.txt' },
        // patent_cert: { name: '科教之旅.txt', url: '/files/live/patent/cert/20210524101601.txt' },
        // science_report: { name: '05-06.txt', url: '/files/live/science/report/20210524101553.txt' },
        // software_copyright: { name: '05-06.txt', url: '/files/live/software/copyright/20210524101604.txt' },
        // techol_detect_report: { name: '科教之旅.txt', url: '/files/live/techol/detect/report/20210524101556.txt' },
        // techol_report: { name: '科教之旅.txt', url: '/files/live/techol/report/20210524101545.txt' },
        // treatise: { name: '科教之旅.txt', url: '/files/live/treatise/20210524101606.txt' },
        // user_prove: { name: '05-06.txt', url: '/files/live/user/prove/20210524101559.txt' },
        // work_report: { name: '05-06.txt', url: '/files/live/work/report/20210524101543.txt' },
        // company_standard: { name: '05-06.txt', url: '/files/live/company/standard/20210524102319.txt' },
      },
    };
  },
  created() {},
  methods: {
    ...achieveApply(['create']),
    //基本信息下一步
    basicBtn() {
      this.active = 2;
    },
    // 内容简介上一步
    briefUp() {
      this.active = 1;
    },
    // 内容简介下一步
    briefBtn() {
      this.active = 3;
    },
    // 研发人员名单上一步
    researchUp() {
      this.active = 2;
    },
    // 研发人员名单下一步
    researchBtn({ data }) {
      this.$set(this, `research`, data);
      this.active = 4;
    },
    // 补充材料上一步
    detailedUp() {
      this.active = 3;
    },
    // 临时保存
    async timeBtn({ arr, type }) {
      if (type == '3') this.$set(this, `research`, arr);
      let data = {
        basic: this.basic,
        brief: this.brief,
        research: this.research,
        datalist: this.datalist,
        status: '10',
      };
      this.$alert(
        '<strong><p>1：用户</p><p>当您进行成果申报时，系统会自动识别您是否为平台用户，未注册用户，系统会自动拾取【申请人】和【申请人电话】进行平台用户注册，您可用【申请人电话】和【初始密码123456】进行登录查看。</p></strong>',
        '信息提示',
        {
          dangerouslyUseHTMLString: true,
          showConfirmButton: true,
          showCancelButton: true,
          confirmButtonText: '确定',
          cancelButtonText: '取消',
        }
      )
        .then(async () => {
          console.log(data);
          let res = await this.create(data);
          if (this.$checkRes(res)) {
            this.$message({
              message: '临时保存申报成功，请登录到管理中心继续编辑！',
              type: 'success',
            });
            this.$router.push({ path: '/login' });
          }
        })
        .catch(() => {});
    },
    // 提交申报
    async onSubmit() {
      let data = {
        basic: this.basic,
        brief: this.brief,
        research: this.research,
        datalist: this.datalist,
      };
      this.$alert(
        '<strong><p>1：用户</p><p>当您进行成果申报时，系统会自动识别您是否为平台用户，未注册用户，系统会自动拾取【申请人】和【申请人电话】进行平台用户注册，您可用【申请人电话】和【初始密码123456】进行登录查看。</p></strong>',
        '信息提示',
        {
          dangerouslyUseHTMLString: true,
          showConfirmButton: true,
          showCancelButton: true,
          confirmButtonText: '确定',
          cancelButtonText: '取消',
        }
      )
        .then(async () => {
          let res = await this.create(data);
          if (this.$checkRes(res)) {
            this.$message({
              message: '申报成功，可登录平台进行查看审核状态',
              type: 'success',
            });
            this.$router.push({ path: '/login' });
          }
        })
        .catch(() => {});
    },
  },
  computed: {
    ...mapState(['user']),
    pageTitle() {
      return `${this.$route.meta.title}`;
    },
  },
  metaInfo() {
    return { title: this.$route.meta.title };
  },
};
</script>

<style lang="less" scoped>
.w_1200 {
  width: 1200px;
  margin: 0 auto;
}
.main {
  height: 100vh;
  overflow-y: auto;
  .info {
    padding: 30px 0;
    .one {
      font-size: 30px;
      text-align: center;
      margin: 0 0 40px 0;
      font-weight: bold;
    }
    .two {
      .setp {
        margin: 0 0 30px 0;
      }
      .twoInfo {
        border: 1px solid #409eff;
        padding: 15px 0 15px 15px;
        height: 700px;
        overflow-y: auto;
        border-radius: 10px;
      }
    }
  }
}
</style>