结对作业08

代码量300

博客1

首先是第一个功能的安卓端代码

<template>
  <view class="container">
    <view class="example">
      <uni-forms ref="form" :model="form" labelWidth="80px">
            <uni-forms-item label="起始站" name="startStation" required >
              <uni-easyinput v-model="form.startStation" placeholder="请输入起始站" />
            </uni-forms-item>
            <uni-forms-item label="终点站" name="endStation" required >
              <uni-easyinput v-model="form.endStation" placeholder="请输入终点站" />
            </uni-forms-item>
            <uni-forms-item label="途径站" name="intermediateStations"  >
              <uni-easyinput type="textarea" v-model="form.intermediateStations" placeholder="请输入途径站" />
            </uni-forms-item>

            <uni-forms-item label="起始站的线" name="startStationLine"  >
              <uni-data-select
                  v-model="form.startStationLine"
                  :localdata="routeOptions"
              ></uni-data-select>
            </uni-forms-item>
            <uni-forms-item label="终点站的线" name="endStationLine"  >
              <uni-data-select
                  v-model="form.endStationLine"
                  :localdata="routeOptions"
              ></uni-data-select>
            </uni-forms-item>
            <uni-forms-item label="途径站点" name="distNumber"  >
              <uni-easyinput v-model="form.distNumber" placeholder="请输入途径站点" />
            </uni-forms-item>
            <uni-forms-item label="票价" name="price"  >
              <uni-easyinput v-model="form.price" 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 { updateBeijingsubway,getBeijingsubway,listBeijingsubway } from "@/api/system/beijingsubway";

export default {
  components: {
  },
  data() {
    return {
    //字典类型筛选options
                routeOptions:[],
                routeOptions:[],
    form: {},
    rules: {
                  startStation: {
              rules: [{ required: true, errorMessage: "起始站不能为空" }]
            },
                                endStation: {
              rules: [{ required: true, errorMessage: "终点站不能为空" }]
            },
                    }
    }
  },
onLoad(option) {
  //字典类型查询
  this.$dataDicts.getDicts("route").then(response => {
    this.routeOptions = this.$myUtils.getDictOption(response.data,'dictValue','dictLabel');
});
  this.$dataDicts.getDicts("route").then(response => {
    this.routeOptions = this.$myUtils.getDictOption(response.data,'dictValue','dictLabel');
});
  //买票预览表详细
  this.getBeijingsubwayInfo(option.id);
},
  onReady() {
    this.$refs.form.setRules(this.rules)
  },
  methods: {
    /* 获取买票预览表详情*/
    getBeijingsubwayInfo(id) {
      getBeijingsubway(id).then(response => {
        this.form = response.data;
      })
    },
/* 提交*/
submit() {
  this.$refs.form.validate().then(res => {
    updateBeijingsubway(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 class="example">
      <uni-forms ref="form" :model="form" labelWidth="80px">
    <uni-forms-item label="线路号" name="lineNo" required >
      <uni-easyinput v-model="form.lineNo" placeholder="请输入线路号" />
    </uni-forms-item>
  <uni-forms-item label="全部站点" name="stations"  >
  <uni-easyinput type="textarea" v-model="form.stations" 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 { addLines,getLines,listLines } from "@/api/system/lines";

export default {
components: {
},
data() {
  return {
    //字典类型筛选options
    routeOptions:[],
    form: {},
    rules: {
            lineNo: {
                rules: [{ required: true, errorMessage: "线路号不能为空" }]
            },
    }
  }
},
onLoad(option) {
  //字典类型查询
  //字典类型查询
        this.$dataDicts.getDicts("route").then(response => {
          this.routeOptions = this.$myUtils.getDictOption(response.data,'dictValue','dictLabel');
        });
},
onReady() {
  this.$refs.form.setRules(this.rules)
},
methods: {
  /* 提交*/
  submit() {
    console.log(this.form)
    this.$refs.form.validate().then(res => {
      addLines(this.form).then(response => {
        this.$modal.msgSuccess("新增成功")
        setTimeout(() => {
          // 返回到上一级父页面
          this.$tab.navigateBack();
        },500)
      })
    })
  },
  /* 表单重置*/
  reset(){
    this.form = {
       id: undefined,
       lineNo: undefined,
       stations: 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 >
        <!-- 筛选弹框 -->
        <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" >
                <checkbox :checked="selectAllChecked" color="#0055ff" iconColor="#0055ff"
                 style="transform:scale(0.6)" @click="selectAll"/>
                 <button size="mini" type="default"
                     style="color:#ff0000;backgroundColor:#ffeded;borderColor:#000000" 
                    @click="deleteBut" v-if="checkPermi(['system:lines: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:#ffba00;backgroundColor:#fff8e6;borderColor:#000000" @click="editButton" v-if="checkPermi(['system:lines:edit'])" >编辑</button>
            </view> -->
        </view>
        <view class="data-list" >
            <!-- 整条线路列表 -->
            <uni-section title=" "  >
                <checkbox-group @change="checkboxChange">
                      <uni-list v-for="(item, index) in linesList" :key="item.id">
                            <uni-row>
                                <uni-col :span="3" style="padding: 20px 10px;">
                                    <checkbox :ref="item.id" :value="JSON.stringify(item.id)" :checked="item.checked" color="#0055ff" iconColor="#0055ff" style="transform:scale(0.6)"/>
                                </uni-col>
                                    <uni-col :span="21">
                                        <uni-list-item :title="item.linesName" :note="item.createTime" showArrow
                                            :thumb="item.headImg" thumb-size="lg" clickable @click="detailEdit(item)" >
                                        </uni-list-item>
                                </uni-col>
                            </uni-row>
                      </uni-list>
              </checkbox-group >
            </uni-section>
        </view>
        <view >
            <uni-section title=" " padding>
                <uni-pagination :total="total" :pageSize="queryParams.pageSize" :current="queryParams.pageNum" @change="pageChange"/>
            </uni-section>
        </view>
        <view >
        <uni-fab :horizontal="horizontal" :vertical="vertical"
         :popMenu="popMenu" @fabClick="addButton" v-if="checkPermi(['system:lines:add'])" ></uni-fab>
        </view>
    </view>
</template>
 
<script>
    import fjjCondition from '@/components/fjj-condition/fjj-condition.vue';
    import { listLines, deleteLines} from "@/api/system/lines";
    import {textBecomeImg}  from "@/utils/avatar";// 绘制文字头像工具
    import {showConfirm} from '@/utils/common';
    import {checkPermi}  from "@/utils/permission";// 权限工具类
    export default {
        components: {
            fjjCondition
        },
        data() {
        return {
            /* 列表复选框 */
            selectAllChecked: false,
            checkBoxs: [],
            //整条线路搜索
            searchValue: '',
            //筛选弹框
            conditionColor: '#4D7BFE',
            //字典类型筛选options
            routeOptions:[],
            screenList: [],
            defaultValue: {},
            // 查询参数
            queryParams: {
                pageNum: 1, //当前页，
                pageSize: 5, //每页数量
                        lineNo: undefined,
            },
            //列表数据
            linesList:[],
            total: 0,  //总条数
            // current: 1,//初始化当前页为第一页
            //添加按钮
            horizontal: 'right',
            vertical: 'bottom',
            popMenu:false
        }
        },
        onShow(options) {//监听页面显示，页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面
            this.getList();
        },
        onLoad () {
        //字典类型查询
        this.$dataDicts.getDicts("route").then(response => {
            this.routeOptions = this.$myUtils.getDictOption(response.data,'dictValue','dictLabel');
            });
            //设置筛选条件
            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.linesName = res.value;
                this.getList();
            },
            //搜索框点击清除(X按钮)
            searchClear(res) {
                this.queryParams.linesName = "";
                this.getList();
            },
            /** 查询整条线路列表 */
            getList() {
                listLines(this.queryParams).then(response => {
                  //文字头像
                  for(var lines of response.rows){
                      this.$set(lines, "headImg", textBecomeImg(lines.linesName));
                      this.$set(lines, "checked", false);
                  }
                  this.linesList = response.rows;
                  this.total = response.total;
                }
              );
            },
            //详情编辑
            detailEdit(res) {
                // var arr = ['system:lines:edit'];
                if(this.$auth.hasPermi('system:lines:edit')){
                    this.$tab.navigateTo('/pages/work/lines/edit-uni?id='+res.id);
                }
            },
            //分页变化事件
            pageChange(res) {
                // this.current = res.current;
                this.queryParams.pageNum = res.current
                this.getList();
            },
            //添加按钮
            addButton() {
                this.$tab.navigateTo('/pages/work/lines/add-uni');
            },
            //编辑按钮
            editButton(res){
                if(this.checkBoxs.length==1){
                    this.$tab.navigateTo('/pages/work/lines/edit-uni?id='+this.checkBoxs[0]);
                }else{
                    this.$modal.msgError("请选择一个整条线路");
                }
            },
            //设置筛选数据
            setScreenData(){
                this.screenList = [
                      {
                        'title': '线路号',
                        'type': 'select',
                        'key': 'lineNo',
                        'detailList':this.routeOptions
                      },
                     {
                          'title': '线路号',
                          'type': 'select',
                          'key': 'lineNo',
                          'detailList':this.routeOptions
                      } 
                ];
            },
            //复选框change事件
            checkboxChange: function (e) {
                var items = this.linesList,
                    values = e.detail.value;
                for (var item of items) {
                    if(values.includes(JSON.stringify(item.id))){
                        this.$set(item,'checked',true)
                    }else{
                        this.$set(item,'checked',false)
                    }
                }
                this.checkBoxs=values
            },
            //全选反选
            selectAll(){
                var items = this.linesList;
                var allChecked = this.selectAllChecked;//点击时，全选按钮是否选中
                this.checkBoxs = [];//将选中值清空
                if(!allChecked){//点击时，全选按钮状态未选中，将组下所有选中
                    var checkBoxs = this.checkBoxs;
                    items.forEach(function(item) {
                        item['checked']=true;
                        checkBoxs.push(JSON.stringify(item.id));
                    });
                    this.checkBoxs = checkBoxs;
                }else{//点击时，全选按钮状态已选中，将组下所有
                    items.forEach(function(item) {
                        item['checked']=false;
                    });
                }
                this.selectAllChecked = !allChecked;
            },
            //删除按钮
            deleteBut(){
                if(this.checkBoxs.length>0){
                    showConfirm('是否确认删除整条线路编号为"'+this.checkBoxs.join(',')+'"的数据项？').then(res => {
                        if (res.confirm) {
                            deleteLines(this.checkBoxs.join(',')).then(response => {
                             this.$modal.msgSuccess("删除成功")
                             this.checkBoxs=[];
                             //重新从第一页开始加载
                             // this.current = 1;//分页组件赋值为第一页
                             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>