项目实训1——管理员端界面准备

  我们小组先把项目的管理员端的初步功能界面做出来，让指导老师检查，然后再确定后续主要功能的工具和实现。
  界面用VUE 2.0来编写，配合element ui组件。整体界面布局有侧边栏、顶部栏和主要内容块，如下图所示：

我负责编写历史申请界面和管理已发布界面，这两个界面的主要内容都是用表格形式呈现系统数据库的信息，表格就用element ui的table组件实现，适当将一些功能组合在一起。界面的实现难点有根据进度条跳转步骤和点击表格中的按钮跳转步骤。我的解决方法是有一个index界面包括步骤条和路由跳转部分，三个step界面分别实现三个步骤的界面。具体代码如下：

//index的template部分
<div class="main">
    <el-steps :active="active" finish-status="success" align-center="true">
      <el-step
          v-for="(item,index) of stepTitle"
          :key="index"
          :title="item"
          :class="stepClassObj(index)"
          @click.native="handleStep(index)"
      />
    </el-steps>
    <!-- <keep-alive>
     <router-view v-if="$route.meta.keepAlive" @handleNextStep="handleNextStep()"  @handleLastStep="handleLastStep()" />
     </keep-alive> -->
    <router-view @handleNextStep="handleNextStep()" @handleLastStep="handleLastStep()"/>
 </div>

<script>
export default {
  name: 'home',

  data() {
    return {
      // 步骤
      active: 0,
      // 已选步骤
      stepSuc: [0],
      // 步骤标题
      stepTitle: ['步骤一', '步骤二', '步骤三']
    }
  },
  computed: {
    // 动态给步骤加样式
    stepClassObj() {
      return (val) => {
        return {
          stepSuc: this.stepSuc.includes(val),
          stepErr: !this.stepSuc.includes(val)
        }
      }
    },
  },
  methods: {
    one() {
      this.$router.push("background");
    },
    // 点击步骤条
    handleStep(val) {
      console.log(val, '点击步骤条');
      if (this.stepSuc.includes(val) === true) {
        this.active = val;
        if (this.active == 0) {
          this.$router.push("stepOne");
        } else if (this.active == 1) {
          this.$router.push("stepTwo");
        } else if (this.active == 2) {
          this.$router.push("stepThree");
        }
      }
    },
    // 组件点击上一步
    handleLastStep() {
      console.log(this.active, "上一步");
      if (--this.active === 0) {
        this.active = 0
      }
      if (this.active == 0) {
        this.$router.push("stepOne");
      } else if (this.active == 1) {
        this.$router.push("stepTwo");
      } else if (this.active == 2) {
        this.$router.push("stepThree");
      }
    },
    // 组件点击下一步
    handleNextStep() {
      console.log(this.active, '下一步');
      this.stepSuc.push(++this.active)
      if (this.active == 0) {
        this.$router.push("stepOne");
      } else if (this.active == 1) {
        this.$router.push("stepTwo");
      } else if (this.active == 2) {
        this.$router.push("stepThree");
      }
    },
    //监听路径的改变来让步骤条改变
    dd() {
      console.log(this.$route.path, '路径');
      if (this.$route.path == 'stepThree') {
        this.active = 2
        this.stepSuc = [0, 1, 2]
      } else {
        console.log("错误");
      }
    }
  },
  mounted() {
    this.dd()
  }
}
</script>

//以步骤二stepTwo为例
<template>
  <div class="pane" style="background-color: white">
    <h1>步骤二：选择表</h1>
    <div class="step-operation" style="margin-top: 10px; margin-bottom: 10px" align="center">
      搜索表名称：
      <el-input v-model="input" placeholder="请输入内容" size="mini" style="width:150px"></el-input>
      <span>&nbsp;</span>
      <el-button icon="el-icon-search" size="medium" circle></el-button>
      <el-button type="primary" plain size="medium" @click="handleLastStep()">上一步</el-button>
    </div>
    <div class="ar-table" style="width: 900px">
      <el-table
          :data="tableData"
          style="width: 100%">
        <el-table-column type="expand">
          <template slot-scope="props">
            <el-form label-position="left" inline class="demo-table-expand">
              <el-form-item label="申请序号">
                <span>{{ props.row.rank }}</span>
              </el-form-item>
              <el-form-item label="英文名称">
                <span>{{ props.row.EnglishName }}</span>
              </el-form-item>
              <el-form-item label="中文名称">
                <span>{{ props.row.ChineseName }}</span>
              </el-form-item>
              <el-form-item label="中文描述">
                <span>{{ props.row.description }}</span>
              </el-form-item>
            </el-form>
          </template>
        </el-table-column>
        <el-table-column
            prop="rank"
            label="序号"
            width="200">
        </el-table-column>
        <el-table-column
            prop="EnglishName"
            label="英文名称"
            width="280">
        </el-table-column>
        <el-table-column
            prop="ChineseName"
            label="中文名称"
            width="280">
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
                type="primary"
                size="mini"
                @click="handleChoose(scope.$index, scope.row)">选择
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="ar-bottom" style="margin-top: 10px; margin-left: 200px">
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage4"
          :page-sizes="[4, 8, 12, 16]"
          :page-size="4"
          layout="total, sizes, prev, pager, next, jumper"
          :total="100">
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default{
methods: {
    // 点击上一步
    handleLastStep() {
      this.$emit('handleLastStep')
    },
    // 点击下一步
    handleNextStep() {
      //调用父组件的方法
      this.$emit('handleNextStep')
    },
    handleChoose(index, row) {
      console.log(index, row);
      this.$emit('handleNextStep')
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    }
  }
}
</script>