结对作业09
代码量：300
博客：1
<template> <view class="container"> <view class="example"> <uni-forms ref="form" :model="form" labelWidth="80px"> <uni-forms-item label="线路编号" name="lineno" > <uni-easyinput v-model="form.lineno" placeholder="请输入线路编号" /> </uni-forms-item> <uni-forms-item label="站点名称" name="name" > <uni-easyinput v-model="form.name" placeholder="请输入站点名称" /> </uni-forms-item> </uni-forms> <view class="button-group"> <button type="default" style="padding:0 3em;font-size:14px" class="button" @click="reset">重置</button> <button type="primary" style="padding:0 3em;font-size:14px" class="button" @click="submit">提交</button> </view> </view> </view> </template> <script> import { addStations,getStations,listStations } from "@/api/system/stations"; export default { components: { }, data() { return { //字典类型筛选options form: {}, rules: { } } }, onLoad(option) { //字典类型查询 }, onReady() { this.$refs.form.setRules(this.rules) }, methods: { /* 提交*/ submit() { console.log(this.form) this.$refs.form.validate().then(res => { addStations(this.form).then(response => { this.$modal.msgSuccess("新增成功") setTimeout(() => { // 返回到上一级父页面 this.$tab.navigateBack(); },500) }) }) }, /* 表单重置*/ reset(){ this.form = { id: undefined, lineno: undefined, name: undefined }; } } } </script> <style lang="scss"> page { background-color: #ffffff; } .example { padding: 15px; background-color: #fff; } .button-group { margin-top: 15px; display: flex; justify-content: space-around; } </style>
<template> <view class="container"> <view class="example"> <uni-forms ref="form" :model="form" labelWidth="80px"> <uni-forms-item label="线路编号" name="lineno" > <uni-easyinput v-model="form.lineno" placeholder="请输入线路编号" /> </uni-forms-item> <uni-forms-item label="站点名称" name="name" > <uni-easyinput v-model="form.name" placeholder="请输入站点名称" /> </uni-forms-item> </uni-forms> <view class="button-group"> <button type="default" style="padding:0 3em;font-size:14px" class="button" @click="cancel">取消</button> <button type="primary" style="padding:0 3em;font-size:14px" class="button" @click="submit">提交</button> </view> </view> </view> </template> <script> import { updateStations,getStations,listStations } from "@/api/system/stations"; export default { components: { }, data() { return { //字典类型筛选options form: {}, rules: { } } }, onLoad(option) { //字典类型查询 //地铁线路和站点详细 this.getStationsInfo(option.id); }, onReady() { this.$refs.form.setRules(this.rules) }, methods: { /* 获取地铁线路和站点详情*/ getStationsInfo(id) { getStations(id).then(response => { this.form = response.data; }) }, /* 提交*/ submit() { this.$refs.form.validate().then(res => { updateStations(this.form).then(response => { this.$modal.msgSuccess("编辑成功") setTimeout(() => { // 返回到上一级父页面 this.$tab.navigateBack(); },500) }) }) }, /* 表单重置*/ /* 取消*/ cancel(){ this.$tab.navigateBack(); } } } </script> <style lang="scss"> page { background-color: #ffffff; } .example { padding: 15px; background-color: #fff; } .button-group { margin-top: 15px; display: flex; justify-content: space-around; } </style>
<template>
<view class="container">
<view >
<!-- 筛选弹框 -->
<fjj-condition ref='condition' @touchmove.stop :color="conditionColor" :list="screenList" :defaultValue="defaultValue" @result="resultConditon" />
<!-- 地铁线路和站点搜索 -->
<uni-section title=" ">
<uni-search-bar :focus="false" v-model="searchValue" @blur="searchBlur"
placeholder="搜索地铁线路和站点" @clear="searchClear" cancelButton="none">
</uni-search-bar>
</uni-section>
</view>
<view class="filter-bar" >
<view class="filter-item" >
<button size="mini" type="default" style="color:#ffba00;backgroundColor:#fff8e6;
borderColor:#000000" @click="delCheckbox" v-if="checkPermi(['system:stations:remove'])" >删除</button>
</view>
<view class="filter-item" @click="open">
<button size="mini" type="default"
style="color:#ffffff;backgroundColor:#007aff;borderColor:#000000">筛选</button>
</view>
<view class="filter-item" >
<button size="mini" type="default"
style="color:#ff0000;backgroundColor:#ffeded;borderColor:#000000"
@click="addButton" v-if="checkPermi(['system:stations:add'])" >新增</button>
</view>
</view>
<view class="data-list" >
<!-- 地铁线路和站点列表 -->
<uni-table ref="table" :loading="loading" border stripe type="selection" emptyText="暂无更多数据" @selection-change="selectionChange">
<uni-tr>
<uni-th width="80" align="center">站点ID</uni-th>
<uni-th width="80" align="center">线路编号</uni-th>
<uni-th width="80" align="center">站点名称</uni-th>
<uni-th width="100" align="center">操作</uni-th>
</uni-tr>
<uni-tr v-for="(item, index) in stationsList" :key="item.id">
<uni-td>
<view align="center">{{ item.id }}</view>
</uni-td>
<uni-td>
<view align="center">{{ item.lineno }}</view>
</uni-td>
<uni-td>
<view align="center">{{ item.name }}</view>
</uni-td>
<uni-td>
<view class="uni-group">
<uni-icons type="compose" color="blue" size="24" @click="editButton(item)" v-if="checkPermi(['system:stations:edit'])" />
<uni-icons type="trash-filled" color="blue" size="24" @click="deleteButton(item)" v-if="checkPermi(['system:stations:remove'])" />
</view>
</uni-td>
</uni-tr>
</uni-table>
</view>
<view >
<uni-section title=" " padding>
<uni-pagination :total="total" :pageSize="queryParams.pageSize" :current="queryParams.pageNum" @change="pageChange"/>
</uni-section>
</view>
</view>
</template>
<script>
import fjjCondition from '@/components/fjj-condition/fjj-condition.vue';
import { listStations, deleteStations} from "@/api/system/stations";
import {textBecomeImg} from "@/utils/avatar";// 绘制文字头像工具
import {showConfirm} from '@/utils/common';
import {checkPermi} from "@/utils/permission";// 权限工具类
export default {
components: {
fjjCondition
},
data() {
return {
//地铁线路和站点搜索
searchValue: '',
//筛选弹框
conditionColor: '#4D7BFE',
//字典类型筛选options
screenList: [],
defaultValue: {},
// 查询参数
queryParams: {
pageNum: 1, //当前页，
pageSize: 5, //每页数量
lineno: undefined,
name: undefined
},
//列表数据
loading:false,
selectedIndexs: [],
stationsList:[],
total: 0, //总条数
// current: 1,//初始化当前页为第一页
//添加按钮
horizontal: 'right',
vertical: 'bottom',
popMenu:false
}
},
onShow(options) {//监听页面显示，页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面
this.getList();
},
onLoad () {
//字典类型查询
//设置筛选条件
setTimeout(() => {
this.setScreenData();
},500)
this.selectedIndexs = [];
},
mounted() {
},
methods: {
checkPermi,
//打开筛选面板
open(){
this.$refs.condition.openPopup()
},
//确认筛选条件并开始搜索
resultConditon(obj) {
console.log(obj)
for (var key in obj.str_result) {
this.queryParams[key] = obj.str_result[key];
}
this.$myUtils.addDateRange(this.queryParams, obj.str_result)
this.getList();
},
//搜索框失去焦点，搜索地铁线路和站点
searchBlur(res) {
this.queryParams.stationsName = res.value;
this.getList();
},
//搜索框点击清除(X按钮)
searchClear(res) {
this.queryParams.stationsName = "";
this.getList();
},
//刷新
refresh(){
this.queryParams = {
pageNum: 1, //当前页，
pageSize: 5, //每页数量
lineno: undefined,
name: undefined
}
this.getList();
},
/** 查询地铁线路和站点列表 */
getList() {
this.loading = true;
listStations(this.queryParams).then(response => {
this.stationsList = response.rows;
this.total = response.total;
this.loading = false;
}
);
},
//分页变化事件
pageChange(res) {
//清空复选框
this.$refs.table.clearSelection()
this.selectedIndexs.length = 0
this.queryParams.pageNum = res.current
this.getList();
},
//设置筛选数据
setScreenData(){
this.screenList = [
{
'title': '线路编号',
'type': 'input',
'key': 'lineno'
},
{
'title': '站点名称',
'type': 'input',
'key': 'name'
},
];
},
//编辑
editButton(item){
this.$tab.navigateTo('/pages/work/stations/edit-uni?id='+item.id);
},
//删除
deleteButton(item){
showConfirm('是否确认删除地铁线路和站点编号为"'+item.id+'"的数据项？').then(res => {
if (res.confirm) {
deleteStations(item.id).then(response => {
this.$modal.msgSuccess("删除成功");
//清空复选框
this.$refs.table.clearSelection()
this.selectedIndexs.length = 0
//重新从第一页开始加载
this.queryParams.pageNum = 1;//查询页面也为第一页
this.getList();
})
}
})
},
//新增
addButton(){
this.$tab.navigateTo('/pages/work/stations/add-uni');
},
// 多选
selectionChange(e) {
this.selectedIndexs = e.detail.index
},
// 多选处理
selectedItems() {
return this.selectedIndexs.map(i => this.stationsList[i].id)
},
//批量删除
delCheckbox(){
if(this.selectedItems() && this.selectedItems().length>0){
showConfirm('是否确认删除地铁线路和站点编号为"'+this.selectedItems().join(",")+'"的数据项？').then(res => {
if (res.confirm) {
deleteStations(this.selectedItems().join(",")).then(response => {
this.$modal.msgSuccess("删除成功");
//清空复选框
this.$refs.table.clearSelection()
this.selectedIndexs.length = 0
//重新从第一页开始加载
this.queryParams.pageNum = 1;//查询页面也为第一页
this.getList();
})
}
})
}
}
}
}
</script>
<style>
page{
height: 100%;
}
.container{
height: 100%;
display: flex;
flex-direction: column;
}
/* 筛选栏样式开始 */
.filter-bar{
/* height: 100rpx; */
display: flex;
justify-content: space-between;
align-items: center;
height: 50px;
background-color: #fff;
border-bottom: 1px solid #eee;
padding: 0 10px;
/* position: sticky; */
}
.filter-item {
display: flex;
align-items: center;
font-size: 16px;
color: #333;
position: relative;
cursor: pointer;
}
.filter-item.active {
color: #5500ff;
}
.filter-item .iconfont {
font-size: 12px;
margin-left: 5px;
}
/* 筛选栏样式结束 */
/* 数据列表样式 */
.data-list{
overflow-y: auto;
flex: 1;
width: 100%;
}
/* 小图样式 */
.icon-triangle {
width: 16rpx;
height: 16rpx;
margin-left: 10rpx;
}
</style>
