xujun

src/views/report/talent/components/talentCreate.vue

+<template>
+  <div class="app-content" style="height: 76vh;overflow: auto;">
+    <a-spin :spinning="loading" style="width: 100%;height: 100%;">
+      <div class="page-steps">
+        <a-steps size="small" :current="current" @change="onChange">
+          <a-step :status="item.status" v-for="(item,index) in stepsArray" :key="index+'stepsArray'" :title="item.title" />
+        </a-steps>
+      </div>
+      <div class="page-content">
+        <talent-edit v-model="value" @close="closeWindow" @load="onLoad" @onStepChange="onStepChange" :completeStatus.sync=completeStatus :stepsArray.sync="stepsArray" ref="talentCreate"></talent-edit>
+      </div>
+      <div class="page-footer">
+        <a-button v-if="currSteps > 0" style="margin-left: 40px" type="primary" @click="prev">上一步</a-button>
+        <a-button style="margin-left: 40px" type="primary" @click="save">保 存</a-button>
+        <a-button v-if="currSteps < stepsArray.length - 1" style="margin-left: 40px" type="primary" @click="next">下一步</a-button>
+        <a-button v-if="currSteps == stepsArray.length - 1" style="margin-left: 40px" type="primary" @click="submit">完成填写</a-button>
+      </div>
+    </a-spin>
+  </div>
+</template>
+
+<script>
+import talentEdit from "@/views/report/talent/components/talentEdit"
+
+export default {
+  name: "talentCreate",
+  components: {
+    talentEdit
+  },
+  props: {
+    value: {
+      type: String,
+      default: () => {
+        return null
+      }
+    },
+  },
+  data() {
+    return {
+      loading: false,
+      current: 10,
+      currSteps: 0,
+      stepsArray: [
+        { status: "process", title: '申报人基本情况', showStatus: true },
+        { status: "wait", title: '申报人简历', showStatus: false },
+        { status: "wait", title: '申报人科研成绩', showStatus: false },
+        { status: "wait", title: '科学研究规划及团队人员名单', showStatus: false },
+        { status: "wait", title: '经费预算及培养计划和目标', showStatus: false },
+        { status: "wait", title: '附件', showStatus: false }
+      ],
+      completeStatus: "0,0,0,0,0,0"
+    };
+  },
+  created() {
+
+  },
+  methods: {
+    stepsChange (e) {
+      this.currSteps = e
+      this.changeSteps(this.currSteps)
+    },
+    next () {
+      this.$refs.talentCreate.submit(this.currSteps, true)
+    },
+    prev () {
+      this.currSteps--;
+      this.changeSteps(this.currSteps)
+    },
+    onChange (e) {
+      if (e != this.currSteps) {
+        var arr = this.completeStatus.split(',')
+        if (arr[e] == "1") {
+          this.loading = true
+          this.changeSteps(e)
+          this.loading = false
+        } else {
+          this.$message.error('所选步骤没填写完成，请填写当前步骤后点【下一步】跳转！')
+        }
+      }
+    },
+    onStepChange (e) {
+      this.completeStatus = e.state
+      this.changeSteps(e.step)
+    },
+    changeSteps (e) {
+      this.currSteps = e
+      var clone = [].concat(this.stepsArray)
+      clone.forEach(e => {
+        e.showStatus = false
+      })
+      clone[e].showStatus = true;
+      this.stepsArray = clone
+      this.getCompleteStatus(e, this.completeStatus)
+    },
+    getCompleteStatus (step, completeStatus) {
+      var arr = completeStatus.split(',')
+      if (!!arr && arr.length > 0) {
+        for (var i = 0; i < arr.length; i++) {
+          if (arr[i] == "1") {
+            this.stepsArray[i].status = "finish"
+          } else {
+            this.stepsArray[i].status = "wait"
+          }
+        }
+        this.stepsArray[step].status = "process"
+      }
+    },
+    save () {
+      this.$refs.talentCreate.save(this.currSteps)
+    },
+    submit () {
+      this.$refs.talentCreate.submit(this.currSteps, false)
+    },
+    closeWindow (value) {
+      this.$emit('close', value)
+    },
+    onLoad (value) {
+      this.loading = value
+    },
+  },
+};
+</script>
+
+<style scoped lang="less">
+::v-deep .ant-spin-container {
+  width: 100%;
+  height: 100%;
+}
+::-webkit-scrollbar {
+  width: 8px;
+  height: 6px;
+}
+.page-steps {
+  width: 100%;
+  height: 40px;
+  padding: 8px 20px 5px 20px;
+  background: rgb(248, 248, 248);
+  border: 1px 1px 0px 1px solid #e8e8e8;
+}
+.page-content {
+  width: 100%;
+  height: calc(100% - 80px);
+  overflow: auto;
+}
+.page-footer {
+  width: 100%;
+  height: 40px;
+  line-height: 40px;
+  background: rgb(248, 248, 248);
+  text-align: center;
+}
+</style>
\ No newline at end of file

src/views/report/talent/components/talentEdit.vue

+<template>
+  <div>
+    <a-form-model ref="form" :model="formData" :rules="rules" style="border-top: 0px" class="from-table font-line-space">
+      <div v-if="stepsArray[0].showStatus">
+      </div>
+      <div v-if="stepsArray[1].showStatus">
+      </div>
+      <div v-if="stepsArray[2].showStatus">
+      </div>
+      <div v-if="stepsArray[3].showStatus">
+      </div>
+    </a-form-model>
+  </div>
+</template>
+
+<script>
+import moment from 'moment'
+import { isEmptyParams } from "@/views/utils/common"
+
+export default {
+  name: "talentEdit",
+  components: {
+
+  },
+  props: {
+    value: {
+      type: String,
+      default: () => {
+        return null
+      }
+    },
+    stepsArray: {
+      type: Array,
+      default () {
+        return []
+      }
+    },
+    completeStatus: {
+      type: String,
+      default () {
+        return "0,0,0,0,0,0"
+      }
+    },
+  },
+  data() {
+    return {};
+  },
+  created () {
+
+  },
+  methods: {
+    moment,
+  }
+};
+</script>

src/views/report/talent/components/talentInfo.vue

+<template>
+  <div></div>
+</template>
+
+<script>
+export default {
+  name: "talentInfo",
+  data() {
+    return {};
+  },
+  methods: {
+    
+  }
+};
+</script>
\ No newline at end of file

src/views/report/talent/components/talentView.vue

+<template>
+  <div class="app-content layoutEmbedded" style="height: 76vh;overflow: auto;">
+    <a-spin :spinning="loading" style="width: 100%;height: 100%;">
+      <div class="page-content">
+        <a-tabs type="card" hideAdd size="small" @change="callback">
+          <a-tab-pane :key="item.key" :tab="item.title" v-for="(item) in tabsData">
+          </a-tab-pane>
+        </a-tabs>
+      </div>
+      <div class="page-footer">
+        <!-- 申报项目详情 -->
+        <a-button type="primary" @click="onTalentExport">导出</a-button>
+        <talent-info v-model="formData" :tabsData.sync="tabsData" />
+      </div>
+    </a-spin>
+  </div>
+</template>
+
+<script>
+import talentInfo from '@/views/report/talent/components/talentInfo'
+
+export default {
+  name: "talentView",
+  components: {
+    talentInfo
+  },
+  props: {
+    value: {
+      type: String,
+      default: () => {
+        return null
+      }
+    },
+  },
+  data() {
+    return {
+      tabsData: [
+        { title: '全部', key: '0', isShow: true },
+        { title: '申报人基本情况', key: '1', isShow: true },
+        { title: '申报人简历', key: '2', isShow: true },
+        { title: '申报人科研成绩', key: '3', isShow: true },
+        { title: '科学研究规划及团队人员名单', key: '4', isShow: true },
+        { title: '经费预算及培养计划和目标', key: '5', isShow: true },
+        { title: '附件', key: '6', isShow: true },
+        { title: '项目审核记录', key: '7', isShow: true },
+      ],
+      formData: {
+      },
+      loading: false,
+    };
+  },
+  created() {
+
+  },
+  methods: {
+    callback () {
+      
+    },
+    onTalentExport () {
+      
+    },
+  }
+};
+</script>
+
+<style scoped lang="less">
+::v-deep .ant-spin-container {
+  width: 100%;
+  height: 100%;
+}
+::-webkit-scrollbar {
+  width: 8px;
+  height: 6px;
+}
+.page-content {
+  width: 100%;
+  height: 50px;
+}
+.page-footer {
+  width: 100%;
+  height: calc(100% - 50px);
+  overflow: auto;
+}
+</style>
\ No newline at end of file