2024/3/27

所花时间：3小时

代码行：200行

博客量：1篇

了解到的知识点：通过vue编写页面，可以得到2个较为精美的页面

<template>
  <div>
    <el-container style="height: 700px;border: 1px solid #eee">
      <el-header style="font-size: 40px;background-color: rgb(238,241,246)">北京地铁查询系统</el-header>
      <el-container>
        <el-aside width="230px" style=" border: 1px solid #eee" >
          <el-menu :default-openeds="['1', '3']">
            <el-menu-item index="1-1">
              <router-link to="/dept">换乘查询</router-link>
            </el-menu-item>
            <el-menu-item index="1-2">
              <router-link to="/emp">线路查询</router-link>
            </el-menu-item>
            <el-menu-item index="1-3">
              <router-link to="/zhan">站点查询</router-link>
            </el-menu-item>
          </el-menu>
        </el-aside>

        <el-main>
          <el-input v-model="input" placeholder="站点名称，如“岗顶”" :style="{ width: '600px' }"  ></el-input>
         <br>
          <template>
            <el-select v-model="value" placeholder="站点分类" :style="{ width: '300px' }">
              <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
              </el-option>
            </el-select>
          </template>


          <template>
            <el-select v-model="value" placeholder="站点名称" :style="{ width: '300px' }">
              <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
              </el-option>
            </el-select>
          </template>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data(){
    return {
      // tableData: [],
      // searchForm:{
      //   name:"",
      //   gender:"",
      //   entrydata:[],
      input: '',
      options: [{
        value: '选项1',
        label: '1号线（八通线）'
      }, {
        value: '选项2',
        label: '2号线'
      }, {
        value: '选项3',
        label: '3号线'
      }, {
        value: '选项4',
        label: '4号线'
      }, {
        value: '选项5',
        label: '5号线'
      }],
      value: ''
    }
    // }
  },
  methods:{
    onSumbit:function (){
      alert("查询数据");
    },
    handleSizeChange:function (val){
      alert("每页记录数变化"+val)
    },
    handleCurrentChange:function (val){
      alert("页码发生变化"+val)
    }
  },
  mounted() {
    axios.get("https://mock.apifox.cn/m1/3128855-0-default/emp/list").then((result)=>{
      this.tableData=result.data.data;
    });
  }
}
</script>
<style >

</style>

<template>
  <div>
    <el-container  style="height: 700px; border: 1px solid #eee">
      <el-header style="font-size:40px; background-color: rgb(238, 241, 246)">北京地铁查询系统</el-header>
      <el-container>
        <el-aside width="230px" style="border: 1px solid #eee">
          <el-menu :default-openeds="['1', '3']">
            <!--<el-submenu index="1">
              <template slot="title"><i class="el-icon-message"></i>系统信息管理</template>-->
              <el-menu-item index="1-1">
                <router-link to="/dept">换乘查询</router-link>
              </el-menu-item>
              <el-menu-item index="1-2">
                <router-link to="/emp">线路查询</router-link>
              </el-menu-item>
              <el-menu-item index="1-3">
                <router-link to="/zhan">站点查询</router-link>
              </el-menu-item>
           <!-- </el-submenu>-->
          </el-menu>
        </el-aside>


        <el-main>
          <el-input v-model="input" placeholder="请输入起点" :style="{ width: '300px' }"></el-input>
          <el-button type="primary" size="small">交换</el-button>
          <el-input v-model="input" placeholder="请输入终点" :style="{ width: '300px' }"></el-input>
          <el-button type="primary" icon="el-icon-search">搜索</el-button>
          <br><br>
          <template>
            <el-select v-model="value" placeholder="起点分类" :style="{ width: '150px' }">
              <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
              </el-option>
            </el-select>
          </template>


          <template>
            <el-select v-model="value" placeholder="起点名称" :style="{ width: '150px' }">
              <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
              </el-option>
            </el-select>
          </template>


          <template>
            <el-select v-model="value" placeholder="终点分类" :style="{ width: '150px' }">
              <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
              </el-option>
            </el-select>
          </template>

          <template>
            <el-select v-model="value" placeholder="终点名称" :style="{ width: '150px' }">
              <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
              </el-option>
            </el-select>
          </template>
<!--           表格 -->
<!--          <el-table :data="tableData" border>-->
<!--            <el-table-column prop="name" label="名称" width="250"></el-table-column>-->
<!--            <el-table-column prop="updatetime" label="最后操作时间" width="250"></el-table-column>-->
<!--            <el-table-column label="操作">-->
<!--              <el-button type="primary" size="mini">编辑</el-button>-->
<!--              <el-button type="danger" size="mini">删除</el-button>-->
<!--            </el-table-column>-->
<!--          </el-table>-->
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [{
        id:1,
        name:"学工部",
        updatetime:"2010-01-01 12:00:00"
      },{
        id:2,
        name:"教研部",
        updatetime:"2010-01-01 12:00:00"
      },{
        id:3,
        name:"就业部",
        updatetime:"2010-01-01 12:00:00"
      },{
        id:4,
        name:"人事部",
        updatetime:"2010-01-01 12:00:00"
      },{
        id:5,
        name:"行政部",
        updatetime:"2010-01-01 12:00:00"
      }]
    }
  },
  methods: {

  }
}
</script>

<style>

</style>

<template>
<div>
  <el-container style="height: 700px;border: 1px solid #eee">
    <el-header style="font-size: 40px;background-color: rgb(238,241,246)">北京地铁查询系统</el-header>
    <el-container>
      <el-aside width="230px" style=" border: 1px solid #eee" >
        <el-menu :default-openeds="['1', '3']">
          <!--<el-submenu index="1">
                <template slot="title"><i class="el-icon-message"></i>系统信息管理</template>-->
          <el-menu-item index="1-1">
            <router-link to="/dept">换乘查询</router-link>
          </el-menu-item>
          <el-menu-item index="1-2">
            <router-link to="/emp">线路查询</router-link>
          </el-menu-item>
          <el-menu-item index="1-3">
            <router-link to="/zhan">站点查询</router-link>
          </el-menu-item>
          <!-- </el-submenu>-->
      </el-menu>
      </el-aside>

      <el-main>
      <el-input v-model="input" placeholder="线路名称，如“B25”" :style="{ width: '300px' }" ></el-input>
        <template>
          <el-select v-model="value" placeholder="线路名称">
            <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
            </el-option>
          </el-select>
        </template>
        <el-button type="primary" icon="el-icon-search">搜索</el-button>
        <!--        &lt;!&ndash;表单&ndash;&gt;-->
<!--        <el-form :inline="true" :model="searchForm" class="demo-form-inline">-->
<!--          <el-form-item label="姓名">-->
<!--            <el-input v-model="searchForm.name" placeholder="姓名"></el-input>-->
<!--          </el-form-item>-->

<!--          <el-form-item label="性别">-->
<!--            <el-select v-model="searchForm.gender" placeholder="性别">-->
<!--              <el-option label="男" value="1"></el-option>-->
<!--              <el-option label="女" value="2"></el-option>-->
<!--            </el-select>-->
<!--          </el-form-item>-->

<!--          <el-form-item label="入职日期">-->
<!--            &lt;!&ndash;日期选择器&ndash;&gt;-->
<!--            <el-date-picker-->
<!--                v-model="searchForm.entrydata"-->
<!--                type="daterange"-->
<!--                range-separator="至"-->
<!--                start-placeholder="开始日期"-->
<!--                end-placeholder="结束日期">-->
<!--            </el-date-picker>-->
<!--          </el-form-item>-->
<!--          <el-form-item>-->
<!--            <el-button type="primary" @click="onSubmit">查询</el-button>-->
<!--          </el-form-item>-->
<!--        </el-form>-->


<!--        &lt;!&ndash;表格&ndash;&gt;-->
<!--        <el-table :data="tableData" border>-->
<!--          <el-table-column prop="name" label="姓名" width="180"></el-table-column>-->
<!--          <el-table-column label="图像" width="180">-->
<!--            <template slot-scope="scope">-->
<!--              <img :src="scope.row.image" width="100px" height="70px">-->
<!--            </template>-->
<!--          </el-table-column>-->
<!--          <el-table-column label="性别" width="140">-->
<!--            <template slot-scope="scope">-->
<!--              {{scope.row.gender ==1 ? '男':'女'}}-->
<!--            </template>-->
<!--          </el-table-column>-->
<!--          <el-table-column prop="job" label="职位" width="140"></el-table-column>-->
<!--          <el-table-column prop="entrydate" label="入职时间" width="180"></el-table-column>-->
<!--          <el-table-column prop="updatetime" label="最后操作时间" width="230"></el-table-column>-->
<!--          <el-table-column label="操作">-->
<!--            <el-button type="primary" size="mini">编辑</el-button>-->
<!--            <el-button type="danger" size="mini">删除</el-button>-->
<!--          </el-table-column>-->
<!--        </el-table>-->
<!--        <br>-->

<!--        &lt;!&ndash;pagination分页&ndash;&gt;-->
<!--        <el-pagination background layout="total,sizes,prev, pager, next,jumper"-->
<!--                       @size-change="handleSizeChange"-->
<!--                       @current-change="handleCurrentChange"-->
<!--                       :total="1000"></el-pagination>-->
      </el-main>
    </el-container>
  </el-container>
</div>
</template>

<script>
import axios from "axios";
export default {
  data(){
    return {
      // tableData: [],
      // searchForm:{
      //   name:"",
      //   gender:"",
      //   entrydata:[],
        input: '',
        options: [{
          value: '选项1',
          label: '1号线（八通线）'
        }, {
          value: '选项2',
          label: '2号线'
        }, {
          value: '选项3',
          label: '3号线'
        }, {
          value: '选项4',
          label: '4号线'
        }, {
          value: '选项5',
          label: '5号线'
        }],
        value: ''
      }
    // }
  },
  methods:{
    onSumbit:function (){
      alert("查询数据");
    },
    handleSizeChange:function (val){
      alert("每页记录数变化"+val)
    },
    handleCurrentChange:function (val){
      alert("页码发生变化"+val)
    }
  },
  mounted() {
    axios.get("https://mock.apifox.cn/m1/3128855-0-default/emp/list").then((result)=>{
      this.tableData=result.data.data;
    });
  }
}
</script>
<style >

</style>