结对作业10

代码量：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="reset">重置</button>
        <button type="primary" style="padding:0 3em;font-size:14px"  class="button" @click="submit">提交</button>
      </view>
    </view>
  </view>
</template>


<script>
    import { addBeijingsubway,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');
      });
},
onReady() {
  this.$refs.form.setRules(this.rules)
},
methods: {
  /* 提交*/
  submit() {
    console.log(this.form)
    this.$refs.form.validate().then(res => {
      addBeijingsubway(this.form).then(response => {
        this.$modal.msgSuccess("新增成功")
        setTimeout(() => {
          // 返回到上一级父页面
          this.$tab.navigateBack();
        },500)
      })
    })
  },
  /* 表单重置*/
  reset(){
    this.form = {
       id: undefined,
       startStation: undefined,
       endStation: undefined,
       intermediateStations: undefined,
       startStationLine: undefined,
       endStationLine: undefined,
       distNumber: undefined,
       price: 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="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 >
        <!-- 筛选弹框 -->
        <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:beijingsubway: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:beijingsubway: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">起始站</uni-th>
                        <uni-th width="80" align="center">终点站</uni-th>
                        <uni-th width="80" align="center">途径站</uni-th>
                        <uni-th width="80" align="center">起始站的线</uni-th>
                        <uni-th width="80" align="center">终点站的线</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 beijingsubwayList" :key="item.id">
                        <uni-td>
                            <view align="center">{{ item.startStation }}</view>
                        </uni-td>
                        <uni-td>
                            <view align="center">{{ item.endStation }}</view>
                        </uni-td>
                        <uni-td>
                            <view align="center">{{ item.intermediateStations }}</view>
                        </uni-td>
                        <uni-td>
                            <view align="center">{{ item.startStationLine }}</view>
                        </uni-td>
                        <uni-td>
                            <view align="center">{{ item.endStationLine }}</view>
                        </uni-td>
                        <uni-td>
                            <view align="center">{{ item.distNumber }}</view>
                        </uni-td>
                        <uni-td>
                            <view align="center">{{ item.price }}</view>
                        </uni-td>
                    <uni-td>
                        <view class="uni-group">
                            <uni-icons type="compose" color="blue" size="24" @click="editButton(item)" v-if="checkPermi(['system:beijingsubway:edit'])" />
                            <uni-icons type="trash-filled" color="blue" size="24" @click="deleteButton(item)"  v-if="checkPermi(['system:beijingsubway: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 { listBeijingsubway, deleteBeijingsubway} from "@/api/system/beijingsubway";
    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
                        routeOptions:[],
                        routeOptions:[],
            screenList: [],
            defaultValue: {},
            // 查询参数
            queryParams: {
                pageNum: 1, //当前页，
                pageSize: 5, //每页数量
                        startStation: undefined,
                        endStation: undefined,
            },
            //列表数据
            loading:false,
            selectedIndexs: [],
            beijingsubwayList:[],
            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');
                });
                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.beijingsubwayName = res.value;
                this.getList();
            },
            //搜索框点击清除(X按钮)
            searchClear(res) {
                this.queryParams.beijingsubwayName = "";
                this.getList();
            },
            //刷新
            refresh(){
                this.queryParams = {
                    pageNum: 1, //当前页，
                    pageSize: 5, //每页数量
                    startStation: undefined,
                    endStation: undefined,
                }
                this.getList();
            },
            /** 查询买票预览表列表 */
            getList() {
                this.loading = true;
                listBeijingsubway(this.queryParams).then(response => {
                  this.beijingsubwayList = 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': 'startStation'
                      },
                      {
                        'title': '终点站',
                        'type': 'input',
                        'key': 'endStation'
                      },
                ];
            },
            //编辑
            editButton(item){
                this.$tab.navigateTo('/pages/work/beijingsubway/edit-uni?id='+item.id);
            },
            //删除
            deleteButton(item){
                showConfirm('是否确认删除买票预览表编号为"'+item.id+'"的数据项？').then(res => {
                    if (res.confirm) {
                        deleteBeijingsubway(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/beijingsubway/add-uni');
            },
            // 多选
            selectionChange(e) {
                this.selectedIndexs = e.detail.index
            },
            // 多选处理
            selectedItems() {
                return this.selectedIndexs.map(i => this.beijingsubwayList[i].id)
            },
            //批量删除
            delCheckbox(){
                if(this.selectedItems() && this.selectedItems().length>0){
                    showConfirm('是否确认删除买票预览表编号为"'+this.selectedItems().join(",")+'"的数据项？').then(res => {
                        if (res.confirm) {
                            deleteBeijingsubway(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>