5.23

北京地铁作业2

<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>