2021-07-22 山东大学软件学院暑期项目实训-day17&day18

学习目标：

根据老师给出的建议对界面进行修改

---

学习内容：

需要修改的部分如下：

下图功能有点多余：

---

修改部分代码如下：

    <el-tabs v-model="act_status" @tab-click="handleClick">
      <el-tab-pane label="尚未开始的活动" name="first">
        <el-table
          :data="unActDataShow.slice((currentPage1-1)*pagesize,currentPage1*pagesize)"
          style="width: 100%"
          v-loading="loading">
          <el-table-column min-width="20%" label="活动名称" prop="act_name" sortable></el-table-column>
          <el-table-column min-width="20%" label="活动教室" prop="room_name" sortable></el-table-column>
          <el-table-column min-width="20%" label="开始时间" prop="act_start_time" sortable></el-table-column>
          <el-table-column min-width="40%">
            <template slot="header" slot-scope="scope" >
              <div>
                <td><el-input v-model="searchData" size="mini" placeholder="输入关键字搜索" /></td>
                <td><el-button size="mini" @click="search('first')">搜索</el-button></td>
              </div>
            </template>
            <template slot-scope="scope">
              <div>
                <el-dialog
                  :title="scope.row.act_name"
                  :visible.sync="scope.row.dialogVisible">
                  <el-container>
                    <el-aside>
                      <p>活动名称：{{scope.row.act_name}}</p>
                      <p>活动教室：{{scope.row.room_name}}</p>
                      <p>活动开始时间： {{timestampToTime(scope.row.act_start_time)}}</p>
                      <p>活动结束时间：{{timestampToTime(scope.row.act_end_time)}}</p>
                      <p>开始预约时间：{{timestampToTime(scope.row.pick_start_time)}}</p>
                      <p>截止预约时间：{{timestampToTime(scope.row.pick_end_time)}}</p>
                      <p>活动简介：{{scope.row.act_desc }}</p>
                    </el-aside>
                    <el-main>
                      <img :src="'data:image/png;base64,'+scope.row.qrcode">
                    </el-main>
                  </el-container>
                </el-dialog>
                <el-button
                  size="mini"
                  style="background-color: white;"
                  @click="scope.row.dialogVisible = true">活动详情</el-button>
                <el-button
                  size="mini"
                  @click="pickDetail(scope.$index, scope.row.act_id)">教室详情</el-button>
                <el-button
                  size="mini"
                  @click="handleEdit(scope.$index, scope.row)">修改活动</el-button>
                <el-button
                  size="mini"
                  type="danger"
                  @click="deleteRow(scope.row.act_id)" >删除活动</el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange1"
          :current-page="currentPage1"
          :page-sizes="[8, 15, 20, 40]"
          :page-size="pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="unActDataShow.length">
        </el-pagination>
      </el-tab-pane>

效果如下：

部分修改代码如下：（同时对过道的展示情况进行了修改）

<template>
  <el-container>
    <el-header>
      <el-button @click="drawer = true" type="text" style="margin-left: 16px;">
        点击展示选座人员详情
      </el-button>
    </el-header>
    <el-drawer
      title="选座人员详情"
      :visible.sync="drawer"
      :before-close="handleClose">
      <template>
        <el-table
          :data="user_pick_info.filter(data => !search || data.seat_no.toString().toLowerCase().includes(search.toLowerCase()))"
          style="width: 100%"
          height="600px"
          :default-sort = "{prop: 'seat_no', order: 'descending'}">
          <el-table-column
            label="用户ID"
            sortable
            prop="user_openid">
            <template slot-scope="scope">
              <span v-show="scope.row.seat_no!='0'">
                {{scope.row.user_openid}}
              </span>
            </template>
          </el-table-column>
          <el-table-column
            label="用户姓名"
            sortable
            prop="username">
            <template slot-scope="scope">
              <span v-show="scope.row.seat_no!='0'">
                {{scope.row.username}}
              </span>
            </template>
          </el-table-column>
          <el-table-column>
            <template slot="header" slot-scope="scope">
              <el-input
                v-model="search"
                size="mini"
                placeholder="输入座位id搜索"/>
            </template>
            <el-table-column  label="所选座位" sortable prop="seat_no">
              <template slot-scope="scope">
                <span v-show="scope.row.seat_no!='0'">
                  {{scope.row.seat_no}}
                </span>
              </template>
            </el-table-column>
          </el-table-column>
        </el-table>
      </template>
    </el-drawer>

    <el-container>
      <el-main>
        <div class="seat-charts-row" v-for="(item,x) in seat_info"  :key="x">
          <el-row :gutter="20">
          <div class="allPublicGray" v-for="(subItem,y) in item" :key="y">
              <el-col :span="2">
                <div v-if= "subItem=='0'||seat_id[x][y]=='0'" >
                  <el-button class="seat_button" text-align="center">
                    &nbsp;&nbsp;
                  </el-button>
                </div>
                <div v-if="subItem == '1'" >
                  <el-button class="seat_button" type="danger">
                    {{seat_id[x][y]}}
                  </el-button>
                </div>
                <div v-if="subItem == '2' && seat_id[x][y]!='0'" >
                  <el-button class="seat_button" type="primary">
                    {{seat_id[x][y]}}
                  </el-button>
                </div>
                <div v-if="subItem == '3'" >
                  <el-button class="seat_button" type="warning">
                    {{seat_id[x][y]}}
                  </el-button>
                </div>
                <div v-if="subItem == '4'" >
                  <el-button class="seat_button" type="info">
                    {{seat_id[x][y]}}
                  </el-button>
                </div>
                <div v-if="subItem == '5'" >
                  <el-button class="seat_button" type="success">
                    {{seat_id[x][y]}}
                  </el-button>
                </div>
              </el-col>
            </div>
          </el-row>
        </div>
      </el-main>
      <el-footer>
        <!--    标注    -->
        <div margin-top="10px" class="hint">
          <el-button type="text" ></el-button>
          <el-button size="mini" type="danger" circle></el-button>尚未被选
          <el-button size="mini" type="primary" circle></el-button>不可使用
          <el-button size="mini" type="warning" circle></el-button>可能损坏
          <el-button size="mini" type="info" circle></el-button>已经损坏
          <el-button size="mini" type="success" circle></el-button>已被选择
        </div>
      </el-footer>
    </el-container>
  </el-container>
</template>

效果如下：


过程中根据Id搜索用户功能出现问题，经分析发现是由于座位Id传的是Int类型的数据，toLowerCase()方法需要用字符串类型的因此需要转化一下。