web-achieve/src/views/adminCenter/adminExamine/detail.vue

<template>
  <div id="detail">
    <el-row>
      <el-col :span="24" class="main">
        <el-col :span="24" class="top">
          <el-button type="primary" size="mini" @click="back">返回</el-button>
        </el-col>
        <el-col :span="24" class="down">
          <el-tabs v-model="active" type="card">
            <el-tab-pane label="（一）基本信息" name="first">
              <basic :info="form.basic"></basic>
            </el-tab-pane>
            <el-tab-pane label="（二）内容简介" name="second">
              <brief :info="form.brief"></brief>
            </el-tab-pane>
            <el-tab-pane label="（三）主研人员名单" name="third">
              <research :list="form.research"></research>
            </el-tab-pane>
            <el-tab-pane label="（四）评价委托方提供资料清单" name="fourth">
              <detailed :linkInfo="form.datalist"></detailed>
            </el-tab-pane>
            <el-tab-pane label="（五）资料审核提交" name="fiveth">
              <el-col :span="24" class="fiveth">
                <el-form :model="form" :rules="rules" ref="form" label-width="100px">
                  <el-form-item label="审核建议" prop="desc">
                    <el-input
                      type="textarea"
                      placeholder="请输入审核建议"
                      v-model="form.desc"
                      maxlength="200"
                      :autosize="{ minRows: 4, maxRows: 6 }"
                      show-word-limit
                    >
                    </el-input>
                  </el-form-item>
                  <el-form-item label="审核状态" prop="status">
                    <el-radio-group v-model="form.status">
                      <el-radio label="0">审核通过</el-radio>
                      <el-radio label="1">审核拒绝</el-radio>
                    </el-radio-group>
                  </el-form-item>
                  <el-col :span="24" class="btn">
                    <el-button type="primary" size="mini" @click="onSubmit('form')">提交审核</el-button>
                  </el-col>
                </el-form>
              </el-col>
            </el-tab-pane>
          </el-tabs>
        </el-col>
      </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 detailed from './parts/detailed.vue';
import { mapState, createNamespacedHelpers } from 'vuex';
export default {
  metaInfo() {
    return { title: this.$route.meta.title };
  },
  name: 'detail',
  props: {},
  components: {
    basic,
    brief,
    research,
    detailed,
  },
  data: function() {
    return {
      // 标签
      active: 'first',
      form: {
        basic: {
          achieve_name: '成果名称',
          achieve_type: '成果类别',
          achieve_num: '成果编号',
          achieve_date: '成果取得时间',
          achieve_form: '成果形式',
          apply_personal: '申请人',
          apply_company: '申请单位',
          address: '地址',
          apply_nature: '申请人/申请人属性',
          contacts: '联系人',
          phone: '联系电话',
          email: '邮箱',
          fax: '传真',
          objective: '评价目的',
          stage: '成果所处阶段',
          output: '经济效益产值',
          profit: '经济效益利润',
          revenue: '经济效益税收',
        },
        brief: {
          achieve_brief: '成果简介',
          field: '应用领域和技术原理',
          kpi_index: '性能指标',
          compare: '与国内外同类技术比较',
          advanced: '成果的创造性，先进性',
          sense: '作用意义',
          prospect: '推广应用的范围，条件和前景',
          opinion: '存在的问题和改进意见',
        },
        research: [
          {
            research_name: '姓名',
            card: '220182199603257019',
            gender: '性别',
            position: '技术职称',
            education: '文化程度',
            degree: '学位',
            abroad: '是否留学归国',
            research_company: '工作单位',
            devote: '对成果创造性贡献',
          },
        ],
        datalist: {
          work_report: '研究工作报告（必备）',
          techol_report: '研究技术报告（必备）',
          benefit: '经济效益分析（必备）',
          science_report: '科技查新报告（科技项目成果，必备）',
          assess_report: '法律价值评估报告（专利成果，必备）',
          app_prove: '推广应用证明（两家以上应用单位，必备）',
          techol_ppt: '成果技术汇报PPT（必备）',
          testing_report: '检测报告（根据项目需要提供）',
          quality: '质量标准（检测报告所依据的标准，企业标准，行业标准，国家标准，国际标准）',
          patent: '与本成果相关的授权专利证书',
          special: '特殊行业需要提供的相应证明材料',
          budget: '项目经费预算书',
          final: '项目经费决算书',
        },
      },
      rules: {
        desc: [{ required: true, message: '请输入审核意见', trigger: 'blur' }],
        status: [{ required: true, message: '请选择状态', trigger: 'change' }],
      },
    };
  },
  created() {},
  methods: {
    // 返回
    back() {
      this.$router.push({ path: '/adminExamine' });
    },
    onSubmit(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          alert('submit!');
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
  },
  computed: {
    ...mapState(['user']),
  },
  watch: {},
};
</script>

<style lang="less" scoped>
.main {
  .top {
    margin: 0 0 10px 0;
    text-align: right;
  }
  .down {
    .fiveth {
      padding: 0 20%;
      .btn {
        text-align: center;
      }
    }
  }
}
</style>