学习目标:
本篇博客记录7-21一天的学习工作。
工作目标:优化界面
学习内容:
(一)教室模板展示界面优化
<el-form-item label="行数:">
<el-input size="small" v-model="info.model_row"
placeholder="输入行数 不可超过20"></el-input>
</el-form-item>
<el-form-item label="列数:">
<el-input size="small" v-model="info.model_col"
placeholder="输入列数 不可超过20"></el-input>
</el-form-item>
<el-form-item v-if="model_name==null">
<el-alert
title="单击座位控制可用不可用,拖拽座位实现替换"
class="alert"
type="info"
center
show-icon>
</el-alert>
</el-form-item>
(二)教室编辑界面优化
<el-form-item label="教室名称:" v-if="room_name==null">
<el-input size="small" v-model="info.room_name"
placeholder="输入名称"></el-input>
</el-form-item>
<el-form-item label="教室名称:" v-if="room_name!=null">
<el-input size="small" v-model="info.room_name"
:disabled="true" placeholder="输入名称"></el-input>
</el-form-item>
<el-form-item label="是否可用:" prop="isUse" >
<el-select size="small" v-model="info.room_status"
placeholder="请选择" >
<el-option label="否" value="0"></el-option>
<el-option label="是" value="1"></el-option>
</el-select>
</el-form-item>
<el-form-item label="模板类型:" v-if="room_name==null" >
<el-select size="small" v-model="info.model_name"
placeholder="请选择" @change="selectModeLType">
<el-option v-for="(item,index) in modeList"
:label="item.model_name" :value="index"></el-option>
</el-select>
</el-form-item>
<el-form-item label="模板类型:" v-if="room_name!=null" >
<el-select size="small" v-model="info.model_name" disabled
placeholder="请选择" @change="selectModeLType">
<el-option v-for="(item,index) in modeList"
:label="item.model_name" :value="index"></el-option>
</el-select>
</el-form-item>
(三)教室列表展示界面优化
<el-button v-if="scope.row.room_status==1" size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
<el-button size="mini" type="primary"
@click="updateStatus(scope.$index, scope.row)">修改状态</el-button>
<el-button v-if="scope.row.room_status==1" size="mini" type="danger" @click="deleteInfo(scope.$index, scope.row)">删除</el-button>
(四)导航栏图标优化
学习过程:
这两天主要工作就是优化界面,改前端展示,工作量较小,比较轻松。
下一阶段学习计划:
1、做登录界面,并与后端对接。
2、与教学管理部分进行交互,进行系统整个流程的测试。