结对作业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>