1

src/views/userDeclare/index.vue

@@ -8,14 +8,20 @@
               成果评价系统-用户申报
             </el-col>
             <el-col :span="24" class="two">
-              <el-tabs type="border-card">
-                <el-tab-pane label="（一）基本信息">
-                  <basic :basicForm="basic"></basic>
-                </el-tab-pane>
-                <el-tab-pane label="（二）内容简介">（二）内容简介</el-tab-pane>
-                <el-tab-pane label="（三）主研人员名单">（三）主研人员名单</el-tab-pane>
-                <el-tab-pane label="（四）评价委托方提供资料清单">（四）评价委托方提供资料清单</el-tab-pane>
-              </el-tabs>
+              <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" @basicBtn="basicBtn" v-if="active == '1'"></basic>
+                <brief :briefForm="brief" @briefUp="briefUp" @briefBtn="briefBtn" v-else-if="active == '2'"></brief>
+                <research :researchForm="research" @researchUp="researchUp" @researchBtn="researchBtn" v-else-if="active == '3'"></research>
+                <detailed :detailedForm="detailed" @detailedUp="detailedUp" @onSubmit="onSubmit" v-else-if="active == '4'"></detailed>
+              </el-col>
             </el-col>
           </el-col>
         </div>
@@ -26,21 +32,125 @@
 
 <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 {
   name: 'index',
   props: {},
   components: {
     basic,
+    brief,
+    research,
+    detailed,
   },
   data: function() {
     return {
+      // 步骤
+      active: 1,
       // 基本信息
-      basic: {},
+      basic: {
+        achieve_date: '2021-03-18 15:54:57',
+        achieve_form: '成果形式',
+        achieve_name: '成果名称',
+        achieve_num: '成果编号',
+        achieve_type: '成果类别',
+        address: '地址',
+        apply_company: '申请单位',
+        apply_nature: '申请属性',
+        apply_personal: '申请人',
+        contacts: '长春市福瑞科技有限公司',
+        email: 'myhope1977@163.com',
+        fax: '传真',
+        objective: '评价目的',
+        output: '效益产值',
+        phone: '13943018186',
+        profit: '效益利润',
+        revenue: '效益税收',
+        stage: '所处阶段',
+      },
+      // 内容简介
+      brief: {
+        achieve_brief: '成果简介',
+        advanced: '先进性',
+        compare: '技术比较',
+        field: '技术原理',
+        kpi_index: '性能指标',
+        opinion: '改进意见',
+        prospect: '推广前景',
+        sense: '作用意义',
+      },
+      // 研发人员名单
+      research: [
+        {
+          abroad: '是',
+          card: '1',
+          degree: '1',
+          devote: '1',
+          education: '1',
+          gender: '男',
+          position: '1',
+          research_company: '1',
+          research_name: '专家1',
+        },
+      ],
+      // 补充材料
+      detailed: {
+        app_prove: '/files/live/userDeclare/appprove/20210318155724.docx',
+        assess_report: '/files/live/userDeclare/assessreport/20210318155722.docx',
+        benefit: '/files/live/userDeclare/benefit/20210318155716.docx',
+        budget: '/files/live/userDeclare/budget/20210318155742.docx',
+        final: '/files/live/userDeclare/final/20210318155745.docx',
+        patent: '/files/live/userDeclare/patent/20210318155736.docx',
+        quality: '/files/live/userDeclare/quality/20210318155733.docx',
+        science_report: '/files/live/userDeclare/sciencereport/20210318155719.docx',
+        special: '/files/live/userDeclare/special/20210318155739.docx',
+        techol_ppt: '/files/live/userDeclare/techolppt/20210318155727.docx',
+        techol_report: '/files/live/userDeclare/techolreport/20210318155713.docx',
+        testing_report: '/files/live/userDeclare/testingreport/20210318155730.docx',
+        work_report: '/files/live/userDeclare/workreport/20210318155710.docx',
+      },
     };
   },
   created() {},
-  methods: {},
+  methods: {
+    //基本信息下一步
+    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;
+    },
+    // 提交申报
+    onSubmit() {
+      let data = {
+        basic: this.basic,
+        brief: this.brief,
+        research: this.research,
+        detailed: this.detailed,
+      };
+      console.log(data);
+    },
+  },
   computed: {
     ...mapState(['user']),
     pageTitle() {
@@ -59,14 +169,27 @@ export default {
   margin: 0 auto;
 }
 .main {
+  height: 100vh;
+  overflow-y: auto;
   .info {
     padding: 30px 0;
     .one {
-      font-size: 20px;
+      font-size: 30px;
       text-align: center;
-      margin: 0 0 30px 0;
+      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;
+      }
     }
   }
 }

src/views/userDeclare/parts/basic.vue

@@ -2,13 +2,78 @@
   <div id="basic">
     <el-row>
       <el-col :span="24" class="basic">
-        <el-form :model="basicForm" :rules="rules" ref="basicForm" label-width="100px">
-          <el-form-item label="活动名称" prop="name">
-            <el-input v-model="basicForm.name"></el-input>
+        <el-form :model="basicForm" :rules="rules" ref="basicForm" label-width="120px">
+          <el-form-item label="成果名称" prop="achieve_name">
+            <el-input v-model="basicForm.achieve_name" placeholder="请输入成果名称"></el-input>
+          </el-form-item>
+          <el-form-item label="成果类别" prop="achieve_type">
+            <el-input v-model="basicForm.achieve_type" placeholder="请输入成果类别"></el-input>
+          </el-form-item>
+          <el-form-item label="成果编号" prop="achieve_num">
+            <el-input v-model="basicForm.achieve_num" placeholder="请输入成果编号"></el-input>
+          </el-form-item>
+          <el-form-item label="成果取得时间" prop="achieve_date">
+            <el-date-picker
+              v-model="basicForm.achieve_date"
+              type="datetime"
+              placeholder="请选择开始时间"
+              format="yyyy-MM-dd HH:mm:ss"
+              value-format="yyyy-MM-dd HH:mm:ss"
+            >
+            </el-date-picker>
+          </el-form-item>
+          <el-form-item label="成果形式" prop="achieve_form">
+            <el-input v-model="basicForm.achieve_form" placeholder="请输入成果形式"></el-input>
+          </el-form-item>
+          <el-form-item label="申请人" prop="apply_personal">
+            <el-input v-model="basicForm.apply_personal" placeholder="请输入申请人"></el-input>
+          </el-form-item>
+          <el-form-item label="申请单位" prop="apply_company">
+            <el-input v-model="basicForm.apply_company" placeholder="请输入申请单位"></el-input>
+          </el-form-item>
+          <el-form-item label="地址" prop="address">
+            <el-input v-model="basicForm.address" placeholder="请输入地址"></el-input>
+          </el-form-item>
+          <el-form-item label="申请单位/申请人属性" prop="apply_nature">
+            <el-input v-model="basicForm.apply_nature" placeholder="请输入申请单位/申请人属性"></el-input>
+          </el-form-item>
+          <el-form-item label="联系人" prop="contacts">
+            <el-input v-model="basicForm.contacts" placeholder="请输入联系人"></el-input>
+          </el-form-item>
+          <el-form-item label="联系电话" prop="phone">
+            <el-input v-model="basicForm.phone" placeholder="请输入联系电话"></el-input>
+          </el-form-item>
+          <el-form-item label="邮箱" prop="email">
+            <el-input v-model="basicForm.email" placeholder="请输入邮箱"></el-input>
+          </el-form-item>
+          <el-form-item label="传真" prop="fax">
+            <el-input v-model="basicForm.fax" placeholder="请输入传真"></el-input>
+          </el-form-item>
+          <el-form-item label="评价目的" prop="objective">
+            <el-input
+              v-model="basicForm.objective"
+              type="textarea"
+              maxlength="200"
+              show-word-limit
+              :autosize="{ minRows: 4, maxRows: 5 }"
+              placeholder="请输入评价目的"
+            ></el-input>
+          </el-form-item>
+          <el-form-item label="成果所处阶段" prop="stage">
+            <el-input v-model="basicForm.stage" placeholder="请输入成果所处阶段"></el-input>
+          </el-form-item>
+          <el-form-item label="经济效益产值" prop="output">
+            <el-input v-model="basicForm.output" placeholder="请输入经济效益产值"></el-input>
+          </el-form-item>
+          <el-form-item label="经济效益利润" prop="profit">
+            <el-input v-model="basicForm.profit" placeholder="请输入经济效益利润"></el-input>
+          </el-form-item>
+          <el-form-item label="经济效益税收" prop="revenue">
+            <el-input v-model="basicForm.revenue" placeholder="请输入经济效益税收"></el-input>
           </el-form-item>
           <el-col :span="24" class="btn">
-            <el-button type="primary" size="mini">取消申报</el-button>
-            <el-button type="primary" size="mini">下一步</el-button>
+            <el-button type="primary" size="mini" @click="resetBtn">取消申报</el-button>
+            <el-button type="primary" size="mini" @click="basicBtn('basicForm')">下一步</el-button>
           </el-col>
         </el-form>
       </el-col>
@@ -26,11 +91,45 @@ export default {
   components: {},
   data: function() {
     return {
-      rules: {},
+      rules: {
+        achieve_name: [{ required: true, message: '请输入成果名称', trigger: 'blur' }],
+        achieve_type: [{ required: true, message: '请输入成果类别', trigger: 'blur' }],
+        achieve_num: [{ required: true, message: '请输入成果编号', trigger: 'blur' }],
+        achieve_date: [{ required: true, message: '请选择开始时间', trigger: 'change' }],
+        achieve_form: [{ required: true, message: '请输入成果形式', trigger: 'blur' }],
+        apply_personal: [{ required: true, message: '请输入申请人', trigger: 'blur' }],
+        apply_company: [{ required: true, message: '请输入申请单位', trigger: 'blur' }],
+        address: [{ required: true, message: '请输入地址', trigger: 'blur' }],
+        apply_nature: [{ required: true, message: '请输入申请单位/申请人属性', trigger: 'blur' }],
+        contacts: [{ required: true, message: '请输入联系人', trigger: 'blur' }],
+        email: [{ required: true, message: '请输入邮箱', trigger: 'blur' }],
+        fax: [{ required: true, message: '请输入传真', trigger: 'blur' }],
+        objective: [{ required: true, message: '请输入评价目的', trigger: 'blur' }],
+        stage: [{ required: true, message: '请输入成果所处阶段', trigger: 'blur' }],
+        output: [{ required: true, message: '请输入经济效益产值', trigger: 'blur' }],
+        profit: [{ required: true, message: '请输入经济效益利润', trigger: 'blur' }],
+        revenue: [{ required: true, message: '请输入经济效益税收', trigger: 'blur' }],
+      },
     };
   },
   created() {},
-  methods: {},
+  methods: {
+    // 取消申报
+    resetBtn() {
+      console.log('取消申报');
+    },
+    // 下一步
+    basicBtn(formName) {
+      this.$refs[formName].validate(valid => {
+        if (valid) {
+          this.$emit('basicBtn', { data: this.basicForm });
+        } else {
+          console.log('error submit!!');
+          return false;
+        }
+      });
+    },
+  },
   computed: {
     ...mapState(['user']),
     pageTitle() {
@@ -45,6 +144,7 @@ export default {
 
 <style lang="less" scoped>
 .basic {
+  padding: 15px;
   .btn {
     text-align: center;
   }

src/views/userDeclare/parts/brief.vue

@@ -0,0 +1,155 @@
+<template>
+  <div id="brief">
+    <el-row>
+      <el-col :span="24" class="brief">
+        <el-form :model="briefForm" :rules="rules" ref="briefForm" label-width="120px">
+          <el-form-item label="成果简介" prop="achieve_brief">
+            <el-input
+              v-model="briefForm.achieve_brief"
+              type="textarea"
+              maxlength="200"
+              show-word-limit
+              :autosize="{ minRows: 4, maxRows: 5 }"
+              placeholder="请输入成果简介"
+            ></el-input>
+          </el-form-item>
+          <el-form-item label="应用领域和技术原理" prop="field">
+            <el-input
+              v-model="briefForm.field"
+              type="textarea"
+              maxlength="200"
+              show-word-limit
+              :autosize="{ minRows: 4, maxRows: 5 }"
+              placeholder="请输入应用领域和技术原理"
+            ></el-input>
+          </el-form-item>
+          <el-form-item label="性能指标" prop="kpi_index">
+            <el-input
+              v-model="briefForm.kpi_index"
+              type="textarea"
+              maxlength="200"
+              show-word-limit
+              :autosize="{ minRows: 4, maxRows: 5 }"
+              placeholder="请输入性能指标"
+            ></el-input>
+          </el-form-item>
+          <el-form-item label="与国内外同类技术比较" prop="compare">
+            <el-input
+              v-model="briefForm.compare"
+              type="textarea"
+              maxlength="200"
+              show-word-limit
+              :autosize="{ minRows: 4, maxRows: 5 }"
+              placeholder="请输入与国内外同类技术比较"
+            ></el-input>
+          </el-form-item>
+          <el-form-item label="成果的创造性,先进性" prop="advanced">
+            <el-input
+              v-model="briefForm.advanced"
+              type="textarea"
+              maxlength="200"
+              show-word-limit
+              :autosize="{ minRows: 4, maxRows: 5 }"
+              placeholder="请输入成果的创造性,先进性"
+            ></el-input>
+          </el-form-item>
+          <el-form-item label="作用意义" prop="sense">
+            <el-input
+              v-model="briefForm.sense"
+              type="textarea"
+              maxlength="200"
+              show-word-limit
+              :autosize="{ minRows: 4, maxRows: 5 }"
+              placeholder="请输入作用意义"
+            ></el-input>
+          </el-form-item>
+          <el-form-item label="推广应用的范围,条件和前景" prop="prospect">
+            <el-input
+              v-model="briefForm.prospect"
+              type="textarea"
+              maxlength="200"
+              show-word-limit
+              :autosize="{ minRows: 4, maxRows: 5 }"
+              placeholder="请输入推广应用的范围,条件和前景"
+            ></el-input>
+          </el-form-item>
+          <el-form-item label="存在的问题和改进意见" prop="opinion">
+            <el-input
+              v-model="briefForm.opinion"
+              type="textarea"
+              maxlength="200"
+              show-word-limit
+              :autosize="{ minRows: 4, maxRows: 5 }"
+              placeholder="请输入存在的问题和改进意见"
+            ></el-input>
+          </el-form-item>
+          <el-col :span="24" class="btn">
+            <el-button type="primary" size="mini" @click="briefUp">上一步</el-button>
+            <el-button type="primary" size="mini" @click="briefBtn('briefForm')">下一步</el-button>
+          </el-col>
+        </el-form>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { mapState, createNamespacedHelpers } from 'vuex';
+export default {
+  name: 'brief',
+  props: {
+    briefForm: { type: Object },
+  },
+  components: {},
+  data: function() {
+    return {
+      rules: {
+        achieve_brief: [{ required: false, message: '请输入成果简介', trigger: 'blur' }],
+        field: [{ required: false, message: '请输入应用领域和技术原理', trigger: 'blur' }],
+        kpi_index: [{ required: false, message: '请输入性能指标', trigger: 'blur' }],
+        compare: [{ required: false, message: '请输入与国内外同类技术比较', trigger: 'blur' }],
+        advanced: [{ required: false, message: '请输入成果的创造性,先进性', trigger: 'blur' }],
+        sense: [{ required: false, message: '请输入作用意义', trigger: 'blur' }],
+        prospect: [{ required: false, message: '存在的问题和改进意见', trigger: 'blur' }],
+        opinion: [{ required: false, message: '请输入存在的问题和改进意见', trigger: 'blur' }],
+      },
+    };
+  },
+  created() {},
+  methods: {
+    // 上一步
+    briefUp() {
+      this.$emit('briefUp');
+    },
+    // 下一步
+    briefBtn(formName) {
+      this.$refs[formName].validate(valid => {
+        if (valid) {
+          this.$emit('briefBtn', { data: this.briefForm });
+        } else {
+          console.log('error submit!!');
+          return false;
+        }
+      });
+    },
+  },
+  computed: {
+    ...mapState(['user']),
+    pageTitle() {
+      return `${this.$route.meta.title}`;
+    },
+  },
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.brief {
+  padding: 15px;
+  .btn {
+    text-align: center;
+  }
+}
+</style>

src/views/userDeclare/parts/detailed.vue

@@ -0,0 +1,336 @@
+<template>
+  <div id="detailed">
+    <el-row>
+      <el-col :span="24" class="detailed">
+        <el-form :model="detailedForm" :rules="rules" ref="detailedForm" label-width="0">
+          <el-col :span="24" class="text">
+            <el-col :span="24" class="title" style="color:#ff0000">
+              研究工作报告（必备）：
+            </el-col>
+            <el-col :span="24" class="file">
+              <el-form-item prop="work_report">
+                <upload
+                  :limit="1"
+                  :data="detailedForm.work_report"
+                  type="work_report"
+                  listType=""
+                  :url="'/files/live/userDeclare_workreport/upload'"
+                  @upload="uploadSuccess"
+                  @delete="uploadDelete"
+                ></upload>
+              </el-form-item>
+            </el-col>
+          </el-col>
+          <el-col :span="24" class="text">
+            <el-col :span="24" class="title" style="color:#ff0000">
+              研究技术报告（必备）：
+            </el-col>
+            <el-col :span="24" class="file">
+              <el-form-item prop="techol_report">
+                <upload
+                  :limit="1"
+                  :data="detailedForm.techol_report"
+                  type="techol_report"
+                  listType=""
+                  :url="'/files/live/userDeclare_techolreport/upload'"
+                  @upload="uploadSuccess"
+                  @delete="uploadDelete"
+                ></upload>
+              </el-form-item>
+            </el-col>
+          </el-col>
+          <el-col :span="24" class="text">
+            <el-col :span="24" class="title" style="color:#ff0000">
+              经济效益分析（必备）：
+            </el-col>
+            <el-col :span="24" class="file">
+              <el-form-item prop="benefit">
+                <upload
+                  :limit="1"
+                  :data="detailedForm.benefit"
+                  type="benefit"
+                  listType=""
+                  :url="'/files/live/userDeclare_benefit/upload'"
+                  @upload="uploadSuccess"
+                  @delete="uploadDelete"
+                ></upload>
+              </el-form-item>
+            </el-col>
+          </el-col>
+          <el-col :span="24" class="text">
+            <el-col :span="24" class="title" style="color:#ff0000">
+              科技查新报告（科技项目成果，必备）：
+            </el-col>
+            <el-col :span="24" class="file">
+              <el-form-item prop="science_report">
+                <upload
+                  :limit="1"
+                  :data="detailedForm.science_report"
+                  type="science_report"
+                  listType=""
+                  :url="'/files/live/userDeclare_sciencereport/upload'"
+                  @upload="uploadSuccess"
+                  @delete="uploadDelete"
+                ></upload>
+              </el-form-item>
+            </el-col>
+          </el-col>
+          <el-col :span="24" class="text">
+            <el-col :span="24" class="title" style="color:#ff0000">
+              法律价值评估报告（专利成果，必备）：
+            </el-col>
+            <el-col :span="24" class="file">
+              <el-form-item prop="assess_report">
+                <upload
+                  :limit="1"
+                  :data="detailedForm.assess_report"
+                  type="assess_report"
+                  listType=""
+                  :url="'/files/live/userDeclare_assessreport/upload'"
+                  @upload="uploadSuccess"
+                  @delete="uploadDelete"
+                ></upload>
+              </el-form-item>
+            </el-col>
+          </el-col>
+          <el-col :span="24" class="text">
+            <el-col :span="24" class="title" style="color:#ff0000">
+              推广应用证明（两家以上应用单位，必备）：
+            </el-col>
+            <el-col :span="24" class="file">
+              <el-form-item prop="app_prove">
+                <upload
+                  :limit="1"
+                  :data="detailedForm.app_prove"
+                  type="app_prove"
+                  listType=""
+                  :url="'/files/live/userDeclare_appprove/upload'"
+                  @upload="uploadSuccess"
+                  @delete="uploadDelete"
+                ></upload>
+              </el-form-item>
+            </el-col>
+          </el-col>
+          <el-col :span="24" class="text">
+            <el-col :span="24" class="title" style="color:#ff0000">
+              成果技术汇报PPT（必备）：
+            </el-col>
+            <el-col :span="24" class="file">
+              <el-form-item prop="techol_ppt">
+                <upload
+                  :limit="1"
+                  :data="detailedForm.techol_ppt"
+                  type="techol_ppt"
+                  listType=""
+                  :url="'/files/live/userDeclare_techolppt/upload'"
+                  @upload="uploadSuccess"
+                  @delete="uploadDelete"
+                ></upload>
+              </el-form-item>
+            </el-col>
+          </el-col>
+          <el-col :span="24" class="text">
+            <el-col :span="24" class="title">
+              检测报告（根据项目需要提供）：
+            </el-col>
+            <el-col :span="24" class="file">
+              <el-form-item prop="testing_report">
+                <upload
+                  :limit="1"
+                  :data="detailedForm.testing_report"
+                  type="testing_report"
+                  listType=""
+                  :url="'/files/live/userDeclare_testingreport/upload'"
+                  @upload="uploadSuccess"
+                  @delete="uploadDelete"
+                ></upload>
+              </el-form-item>
+            </el-col>
+          </el-col>
+          <el-col :span="24" class="text">
+            <el-col :span="24" class="title">
+              质量标准（检测报告所依据的标准，企业标准，行业标准，国家标准，国际标准）：
+            </el-col>
+            <el-col :span="24" class="file">
+              <el-form-item prop="quality">
+                <upload
+                  :limit="1"
+                  :data="detailedForm.quality"
+                  type="quality"
+                  listType=""
+                  :url="'/files/live/userDeclare_quality/upload'"
+                  @upload="uploadSuccess"
+                  @delete="uploadDelete"
+                ></upload>
+              </el-form-item>
+            </el-col>
+          </el-col>
+          <el-col :span="24" class="text">
+            <el-col :span="24" class="title">
+              与本成果相关的授权专利证书：
+            </el-col>
+            <el-col :span="24" class="file">
+              <el-form-item prop="patent">
+                <upload
+                  :limit="1"
+                  :data="detailedForm.patent"
+                  type="patent"
+                  listType=""
+                  :url="'/files/live/userDeclare_patent/upload'"
+                  @upload="uploadSuccess"
+                  @delete="uploadDelete"
+                ></upload>
+              </el-form-item>
+            </el-col>
+          </el-col>
+          <el-col :span="24" class="text">
+            <el-col :span="24" class="title">
+              特殊行业需要提供的相应证明材料：
+            </el-col>
+            <el-col :span="24" class="file">
+              <el-form-item prop="special">
+                <upload
+                  :limit="1"
+                  :data="detailedForm.special"
+                  type="special"
+                  listType=""
+                  :url="'/files/live/userDeclare_special/upload'"
+                  @upload="uploadSuccess"
+                  @delete="uploadDelete"
+                ></upload>
+              </el-form-item>
+            </el-col>
+          </el-col>
+          <el-col :span="24" class="text">
+            <el-col :span="24" class="title">
+              项目经费预算书：
+            </el-col>
+            <el-col :span="24" class="file">
+              <el-form-item prop="budget">
+                <upload
+                  :limit="1"
+                  :data="detailedForm.budget"
+                  type="budget"
+                  listType=""
+                  :url="'/files/live/userDeclare_budget/upload'"
+                  @upload="uploadSuccess"
+                  @delete="uploadDelete"
+                ></upload>
+              </el-form-item>
+            </el-col>
+          </el-col>
+          <el-col :span="24" class="text">
+            <el-col :span="24" class="title">
+              项目经费决算书：
+            </el-col>
+            <el-col :span="24" class="file">
+              <el-form-item prop="final">
+                <upload
+                  :limit="1"
+                  :data="detailedForm.final"
+                  type="final"
+                  listType=""
+                  :url="'/files/live/userDeclare_final/upload'"
+                  @upload="uploadSuccess"
+                  @delete="uploadDelete"
+                ></upload>
+              </el-form-item>
+            </el-col>
+          </el-col>
+          <el-col :span="24" class="btn">
+            <el-button type="primary" size="mini" @click="detailedUp">上一步</el-button>
+            <el-button type="primary" size="mini" @click="onSubmit('detailedForm')">提交申报</el-button>
+          </el-col>
+        </el-form>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import upload from '@common/src/components/frame/upload.vue';
+import { mapState, createNamespacedHelpers } from 'vuex';
+export default {
+  name: 'detailed',
+  props: {
+    detailedForm: { type: Object },
+  },
+  components: {
+    upload,
+  },
+  data: function() {
+    return {
+      rules: {
+        work_report: [{ required: true, message: '请上传研究工作报告', trigger: 'blur' }],
+        techol_report: [{ required: true, message: '请上传研究技术报告', trigger: 'blur' }],
+        benefit: [{ required: true, message: '请上传经济效益分析', trigger: 'blur' }],
+        science_report: [{ required: true, message: '请上传科技查新报告', trigger: 'blur' }],
+        assess_report: [{ required: true, message: '请上传法律价值评估报告', trigger: 'blur' }],
+        app_prove: [{ required: true, message: '请上传推广应用证明', trigger: 'blur' }],
+        techol_ppt: [{ required: true, message: '请上传成果技术汇报PPT', trigger: 'blur' }],
+        testing_report: [{ required: false, message: '请上传检测报告', trigger: 'blur' }],
+        quality: [{ required: false, message: '请上传质量标准', trigger: 'blur' }],
+        patent: [{ required: false, message: '请上传与本成果相关的授权专利证书', trigger: 'blur' }],
+        special: [{ required: false, message: '请上传特殊行业需要提供的相应证明材料', trigger: 'blur' }],
+        budget: [{ required: false, message: '请上传项目经费预算书', trigger: 'blur' }],
+        final: [{ required: false, message: '请上传项目经费决算书', trigger: 'blur' }],
+      },
+    };
+  },
+  created() {},
+  methods: {
+    detailedUp() {
+      this.$emit('detailedUp');
+    },
+    onSubmit(formName) {
+      this.$refs[formName].validate(valid => {
+        if (valid) {
+          this.$emit('onSubmit', { data: this.detailedForm });
+        } else {
+          console.log('error submit!!');
+          return false;
+        }
+      });
+    },
+    // 图片上传
+    uploadSuccess({ type, data }) {
+      this.$set(this.detailedForm, `${type}`, data.uri);
+    },
+    // 删除图片
+    uploadDelete(data) {
+      this.$set(this.detailedForm, `${data.type}`, null);
+    },
+  },
+  computed: {
+    ...mapState(['user']),
+    pageTitle() {
+      return `${this.$route.meta.title}`;
+    },
+  },
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.detailed {
+  padding: 15px;
+  .text {
+    padding: 10px 0 10px 0;
+    // border-bottom: 1px solid red;
+    .title {
+      font-size: 18px;
+      font-weight: bold;
+      margin: 0 0 10px 0;
+    }
+    .file {
+      border: 1px dashed #ccc;
+      padding: 15px;
+    }
+  }
+  .btn {
+    text-align: center;
+  }
+}
+</style>

src/views/userDeclare/parts/research.vue

@@ -0,0 +1,211 @@
+<template>
+  <div id="research">
+    <el-row>
+      <el-col :span="24" class="research">
+        <el-col :span="24" class="one">
+          <el-button type="primary" size="mini" @click="add">添加研发用户</el-button>
+        </el-col>
+        <el-col :span="24" class="two">
+          <el-col :span="24" class="list">
+            <el-table :data="list" border height="580">
+              <el-table-column prop="research_name" label="姓名" align="center" show-overflow-tooltip> </el-table-column>
+              <el-table-column prop="card" label="身份证号" align="center" show-overflow-tooltip> </el-table-column>
+              <el-table-column prop="gender" label="性别" align="center" show-overflow-tooltip> </el-table-column>
+              <el-table-column prop="position" label="技术职称" align="center" show-overflow-tooltip> </el-table-column>
+              <el-table-column prop="education" label="文化程度" align="center" show-overflow-tooltip> </el-table-column>
+              <el-table-column prop="degree" label="学位" align="center" show-overflow-tooltip> </el-table-column>
+              <el-table-column prop="abroad" label="是否留学归国" align="center" show-overflow-tooltip> </el-table-column>
+              <el-table-column prop="research_company" label="工作单位" align="center" show-overflow-tooltip> </el-table-column>
+              <el-table-column prop="devote" label="对成果创造性贡献" align="center" show-overflow-tooltip> </el-table-column>
+              <el-table-column fixed="right" label="操作" width="100" align="center">
+                <template slot-scope="scope">
+                  <el-button type="text" size="small" @click="toEdit(scope.$index, scope.row)">编辑</el-button>
+                  <el-button type="text" size="small" @click="toDelete(scope.$index, scope.row)">刪除</el-button>
+                </template>
+              </el-table-column>
+            </el-table>
+          </el-col>
+        </el-col>
+        <el-col :span="24" class="btn">
+          <el-button type="primary" size="mini" @click="researchUp">上一步</el-button>
+          <el-button type="primary" size="mini" @click="researchBtn">下一步</el-button>
+        </el-col>
+      </el-col>
+    </el-row>
+    <el-dialog class="dialog" title="研发人员信息管理" width="40%" :visible.sync="dialog" @closed="handleClose" :destroy-on-close="true">
+      <el-form :model="form" :rules="rules" ref="form" label-width="130px">
+        <el-form-item label="姓名" prop="research_name">
+          <el-input v-model="form.research_name" placeholder="请输入姓名"></el-input>
+        </el-form-item>
+        <el-form-item label="身份证号" prop="card">
+          <el-input v-model="form.card" placeholder="请输入身份证号"></el-input>
+        </el-form-item>
+        <el-form-item label="性别" prop="gender">
+          <el-radio-group v-model="form.gender">
+            <el-radio label="男"></el-radio>
+            <el-radio label="女"></el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item label="技术职称" prop="position">
+          <el-input v-model="form.position" placeholder="请输入技术职称"></el-input>
+        </el-form-item>
+        <el-form-item label="文化程度" prop="education">
+          <el-input v-model="form.education" placeholder="请输入文化程度"></el-input>
+        </el-form-item>
+        <el-form-item label="学位" prop="degree">
+          <el-input v-model="form.degree" placeholder="请输入学位"></el-input>
+        </el-form-item>
+        <el-form-item label="是否留学归国" prop="abroad">
+          <el-radio-group v-model="form.abroad">
+            <el-radio label="是"></el-radio>
+            <el-radio label="否"></el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item label="工作单位" prop="research_company">
+          <el-input v-model="form.research_company" placeholder="请输入工作单位"></el-input>
+        </el-form-item>
+        <el-form-item label="对成果创造性贡献" prop="devote">
+          <el-input
+            v-model="form.devote"
+            type="textarea"
+            maxlength="200"
+            show-word-limit
+            :autosize="{ minRows: 4, maxRows: 5 }"
+            placeholder="请输入对成果创造性贡献"
+          ></el-input>
+        </el-form-item>
+        <el-col :span="24" class="btn">
+          <el-button type="primary" size="mini" @click="handleClose">取消</el-button>
+          <el-button type="primary" size="mini" @click="onSubmit('form')">保存</el-button>
+        </el-col>
+      </el-form>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { mapState, createNamespacedHelpers } from 'vuex';
+export default {
+  name: 'research',
+  props: {
+    researchForm: { type: Array },
+  },
+  components: {},
+  data: function() {
+    return {
+      dialog: false,
+      form: {},
+      rules: {
+        research_name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
+        card: [{ required: true, message: '请输入身份证号', trigger: 'blur' }],
+        gender: [{ required: true, message: '请选择性别', trigger: 'change' }],
+        position: [{ required: true, message: '请输入技术职称', trigger: 'blur' }],
+        education: [{ required: true, message: '请输入文化程度', trigger: 'blur' }],
+        degree: [{ required: true, message: '请输入学位', trigger: 'blur' }],
+        abroad: [{ required: true, message: '请选择是否留学归国', trigger: 'change' }],
+        research_company: [{ required: true, message: '请输入工作单位', trigger: 'blur' }],
+        devote: [{ required: true, message: '请输入对成果创造性贡献', trigger: 'blur' }],
+      },
+      // 列表
+      list: [],
+    };
+  },
+  created() {},
+  methods: {
+    researchUp() {
+      this.$emit('researchUp');
+    },
+    researchBtn() {
+      this.$emit('researchBtn', { data: this.list });
+    },
+    // 添加研发人员
+    // 添加用户
+    add() {
+      this.dialog = true;
+    },
+    // 保存
+    onSubmit(formName) {
+      this.$refs[formName].validate(valid => {
+        if (valid) {
+          console.log(this.form);
+          if (this.form.index == undefined) {
+            let data = _.cloneDeep(this.list);
+            data.push(this.form);
+            this.$set(this, `list`, data);
+            this.handleClose();
+          } else {
+            this.handleClose();
+          }
+        } else {
+          console.log('error submit!!');
+          return false;
+        }
+      });
+    },
+    // 编辑
+    toEdit(index, row) {
+      row.index = index;
+      this.$set(this, `form`, row);
+      this.dialog = true;
+    },
+    // 删除
+    toDelete(index) {
+      this.list.splice(index, 1);
+    },
+    // 取消
+    handleClose() {
+      this.form = {};
+      this.dialog = false;
+    },
+  },
+  computed: {
+    ...mapState(['user']),
+    pageTitle() {
+      return `${this.$route.meta.title}`;
+    },
+  },
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+  watch: {
+    list: {
+      deep: true,
+      immediate: true,
+      handler(val) {},
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.research {
+  padding: 0 10px 0 0;
+  .one {
+    margin: 0 0 10px 0;
+  }
+  .two {
+    margin: 0 0 10px 0;
+    .list {
+      margin: 0 0 10px 0;
+      border-bottom: 1px solid #f1f1f1;
+    }
+    .page {
+      height: 40px;
+      overflow: hidden;
+      border: 1px solid red;
+    }
+  }
+  .btn {
+    text-align: center;
+  }
+}
+.dialog {
+  .btn {
+    text-align: center;
+    padding: 0 0 10px 0;
+  }
+}
+/deep/.el-dialog__body {
+  padding: 0 15px 40px 0;
+}
+</style>