zhgdyunapp/pages/projectEnd/carManage/addCar.vue

<template>
  <view class="fullHeight">
    <headers :showBack="true">
      <view class="headerName">
        {{ pageTitle }}
      </view>
    </headers>
    <view class="formBox">
      <form @submit="formSubmit">
        <view class="uni-form-item">
          <view class="uni-form-label">
            <text class="star">*</text>
            固定/临时车辆
          </view>
          <view class="uni-form-input">
            <u-radio-group v-model="form.type">
              <u-radio
                  name="1"
              >
                固定车辆
              </u-radio>
              <u-radio
                  name="2"
              >
                临时车辆
              </u-radio>
            </u-radio-group>
          </view>
        </view>
        <view class="uni-form-item" v-show="form.type==2">
          <view class="uni-form-label">
            <text class="star">*</text>
            预约开始时间
          </view>
          <view class="uni-form-input">
            <view class="uni-input" @click="showTime=true;key='startTime'">{{ form.startTime || '请选择' }}</view>
            <u-picker mode="time" v-model="showTime" :params="params" @confirm="confirm"></u-picker>
          </view>
        </view>
        <view class="uni-form-item" v-show="form.type==2">
          <view class="uni-form-label">
            <text class="star">*</text>
            预约结束时间
          </view>
          <view class="uni-form-input">
            <view class="uni-input" @click="showTime=true;key='endTime'">{{ form.endTime || '请选择' }}</view>
          </view>
        </view>
        <view class="uni-form-item" v-show="form.type==2">
          <view class="uni-form-label">
            <text class="star">*</text>
            允许进出入次数
          </view>
          <view class="uni-form-input">
            <u-radio-group v-model="form.lengthtype">
              <u-radio
                  name="1"
              >
                单次
              </u-radio>
              <u-radio
                  name="2"
              >
                多次
              </u-radio>
            </u-radio-group>
          </view>
        </view>
        <view class="uni-form-item">
          <view class="uni-form-label">
            <text class="star">*</text>
            车牌号
          </view>
          <view class="uni-form-input">
            <input class="uni-input" placeholder-class="cl" name="carNumber" :value="form.carNumber"
                   placeholder="请输入"/>
          </view>
        </view>
        <view class="uni-form-item">
          <view class="uni-form-label">
            车牌照片
          </view>
          <view class="uni-form-input" style="display: inline-flex;">
            <view class="imgBox" v-show="form.carPhotosUrl">
              <image :src="url_config+'image/'+form.carPhotosUrl" class="img"></image>
              <uni-icons @click="deleteImg" class="deleteImg" type="clear" size="24"></uni-icons>
            </view>
            <view class="addImgBox" @click="selectImg">
              <image src="/static/icon-add.png" class="icon-add"></image>
            </view>
          </view>
        </view>
        <view class="uni-form-item">
          <view class="uni-form-label">
            <text class="star">*</text>
            车辆颜色
          </view>
          <view class="uni-form-input">
            <picker @change="bindPickerChange" :value="selectIndex" :range="colorList"
                    range-key="locationName">
              <view class="uni-input uni-select cl" v-if="selectIndex==null">
                请选择
                <image class="icon-down" src="/static/icon-down-black.png" mode=""></image>
              </view>
              <view class="uni-input uni-select" v-else>{{ colorList[selectIndex] }}
                <image class="icon-down" src="/static/icon-down-black.png" mode=""></image>
              </view>
            </picker>
          </view>
        </view>
        <view class="uni-form-item">
          <view class="uni-form-label">
            <text class="star">*</text>
            车辆类型
          </view>
          <view class="uni-form-input">
            <picker @change="bindPickerChange2" :value="carTypeIndex" :range="carTypeList"
                    range-key="carTypeName">
              <view class="uni-input uni-select cl" v-if="carTypeIndex==null">
                请选择
                <image class="icon-down" src="/static/icon-down-black.png" mode=""></image>
              </view>
              <view class="uni-input uni-select" v-else>{{ carTypeList[carTypeIndex].carTypeName }}
                <image class="icon-down" src="/static/icon-down-black.png" mode=""></image>
              </view>
            </picker>
          </view>
        </view>

        <view class="uni-form-item">
          <view class="uni-form-label">
            <text class="star">*</text>
            司机姓名
          </view>
          <view class="uni-form-input">
            <picker @change="bindPickerChange3" :value="driverNameIndex" :range="driverNameList"
                    range-key="workerName">
              <view class="uni-input uni-select cl" v-if="driverNameIndex==null">
                请选择
                <image class="icon-down" src="/static/icon-down-black.png" mode=""></image>
              </view>
              <view class="uni-input uni-select" v-else>{{ driverNameList[driverNameIndex].workerName }}
                <image class="icon-down" src="/static/icon-down-black.png" mode=""></image>
              </view>
            </picker>
          </view>
          <!-- <view class="uni-form-input">
            <input class="uni-input" placeholder-class="cl" name="driverName" :value="form.driverName"
              placeholder="请输入" />
          </view> -->
        </view>
        <view class="uni-form-item">
          <view class="uni-form-label">
            <text class="star">*</text>
            司机电话
          </view>
          <view class="uni-form-input">
            <input class="uni-input" placeholder-class="cl" name="driverTelephone"
                   :value="form.driverTelephone" placeholder="请输入"/>
          </view>
        </view>
        <view class="uni-form-item">
          <view class="uni-form-label">
            <text class="star">*</text>
            是否黑名单
          </view>
          <view class="uni-form-input">
            <radio-group @change="radioChange" name="isBlack">
              <label style="margin-right: 15px;" class="radio">
                <radio value="0" :checked="form.isBlack==0"/>
                白名单
              </label>
              <label class="radio">
                <radio value="1" :checked="form.isBlack==1"/>
                黑名单
              </label>
            </radio-group>
          </view>
        </view>
        <view class="uni-form-item">
          <view class="uni-form-label">
            <text class="star">*</text>
            报警推送人
          </view>
          <view class="uni-form-input">
            <picker @change="bindPickerChange" :value="bjIndex" :range="baoList"
                    range-key="locationName">
              <view class="uni-input uni-select cl" v-if="bjIndex==null">
                请选择
                <image class="icon-down" src="/static/icon-down-black.png" mode=""></image>
              </view>
              <view class="uni-input uni-select" v-else>{{ baoList[bjIndex] }}
                <image class="icon-down" src="/static/icon-down-black.png" mode=""></image>
              </view>
            </picker>
          </view>
        </view>
        <button form-type="submit" type="primary" class="btn submitBtn big">保存</button>
        <button class="btn deleteBtn" v-show="!isAdd" @click="deleteFn">删除</button>
      </form>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      pageTitle: '新增车辆',
      selectIndex: null,
      colorList: ['蓝色', '绿色', '黄色', '白色', '黑色'],
      carTypeList: [],
      carTypeIndex: null,
      driverNameList: [],
      driverNameIndex: null,
      form: {
        type: "1",
        carColor: "",
        carNumber: "",
        carPhotosUrl: "",
        carType: "",
        driverName: "",
        driverTelephone: "",
        isBlack: '',
        projectSn: ''
      },
      personList: [],
      projectDetail: {},
      isAdd: true,
      baoList: [],
      bjIndex: null,
      showTime: false,
      params: {
        year: true,
        month: true,
        day: true,
        hour: true,
        minute: true,
        second: true
      },
      key: ''
    }
  },
  mounted() {

  },
  onLoad(options) {
    this.projectDetail = JSON.parse(uni.getStorageSync('projectDetail'))

    if (options.id) {
      this.isAdd = false
      this.pageTitle = '编辑车辆'
      this.getDetails(options.id)
    }
    this.getCarTypeList()
    this.getDriverNameList();
  },

  methods: {
    confirm(e) {
      console.log(e)
      let {year, month, day, hour, minute, second} = e;
      this.form[this.key] = `${year}-${month}-${day} ${hour}:${minute}:${second}`;
    },
    deleteFn() {
      var that = this
      uni.showModal({
        title: '提示',
        content: '确定删除该车辆吗？',
        success(res) {
          if (res.confirm) {
            that.sendRequest({
              url: 'xmgl/carInfo/delete',
              data: {
                id: that.form.id
              },
              method: "POST",
              success(res) {
                uni.showToast({
                  title: '删除成功！'
                })

                uni.navigateBack({})


                setTimeout(() => {
                  that.$router.go(0)
                }, 500)
              }
            })
          }
        }
      })
    },
    selectImg() {
      var that = this
      uni.chooseImage({
        count: 1,
        success(res) {
          const tempFilePaths = res.tempFilePaths;
          uni.uploadFile({
            url: that.url_config + 'upload/image', //仅为示例，非真实的接口地址
            filePath: tempFilePaths[0],
            name: 'files',
            success: (uploadFileRes) => {
              console.log(uploadFileRes.data);
              that.form.carPhotosUrl = JSON.parse(uploadFileRes.data).data[0]
                  .imageUrl
            }
          });
        }
      })
    },
    deleteImg() {
      this.form.carPhotosUrl = ''
    },
    radioChange(e) {
      this.form.isBlack = e.target.value
    },
    //获取司机姓名
    getDriverNameList() {
      var that = this
      this.sendRequest({
        url: 'xmgl/workerInfo/selectWorkerInfoList',
        data: {
          projectSn: this.projectDetail.projectSn,
          inserviceType: 1,
          pageNo: 1,
          pageSize: -1
        },
        method: "POST",
        success(res) {
          console.log(res, '车辆数据')
          that.driverNameList = res.result.records
          if (!that.isAdd) {
            for (var i = 0; i < res.result.records.length; i++) {
              if (that.form.driverWorkerId == res.result.records[i].id) {
                that.driverNameIndex = i;
                break;
              }
            }
          }
        }
      })
    },
    //获取车种
    getCarTypeList() {
      var that = this
      this.sendRequest({
        url: 'xmgl/carType/list',
        data: {
          projectSn: this.projectDetail.projectSn
        },
        method: "POST",
        success(res) {
          that.carTypeList = res.result
          if (!that.isAdd) {
            for (var i = 0; i < res.result.length; i++) {
              if (that.form.carType == res.result[i].id) {
                that.carTypeIndex = i;
                console.log(that.carTypeIndex, 12346)
                break;
              }
            }
          }
        }
      })
    },
    getDetails(id) {
      var that = this
      this.sendRequest({
        url: 'xmgl/carInfo/queryById',
        data: {
          id: id
        },
        method: "POST",
        success(res) {
          that.form = res.result
          that.selectIndex = that.colorList.indexOf(that.form.carColor)
          if (that.form.carPhotosUrl) {
            var arr = JSON.parse(that.form.carPhotosUrl)
            if (arr.length > 0) {
              that.form.carPhotosUrl = arr[0].url
            } else {
              that.form.carPhotosUrl = ''
            }
          } else {
            that.form.carPhotosUrl = ''
          }
        }
      })
    },
    bindPickerChange: function (e) {
      this.selectIndex = e.target.value
    },
    bindPickerChange2: function (e) {
      this.carTypeIndex = e.target.value
    },
    bindPickerChange3: function (e) {
      this.driverNameIndex = e.target.value
    },
    bindDateChange: function (e) {
      this.form.eduTime = e.target.value
    },
    formSubmit(e) {
      var that = this
      console.log(e)
      var params = e.detail.value
      params.projectSn = this.projectDetail.projectSn
      if (this.selectIndex == null) {
        uni.showToast({
          title: '请选择车辆颜色',
          icon: 'none'
        })
        return false;
      }
      if (this.carTypeIndex == null) {
        uni.showToast({
          title: '请选择车辆类型',
          icon: 'none'
        })
        return false;
      }
      if (this.driverNameIndex == null) {
        uni.showToast({
          title: '请选择司机姓名',
          icon: 'none'
        })
        return false;
      }
      if (params.carNumber == '') {
        uni.showToast({
          title: '请输入车牌号',
          icon: 'none'
        })
        return false;
      }
      if (params.driverTelephone == '') {
        uni.showToast({
          title: '请输入司机电话',
          icon: 'none'
        })
        return false;
      }
      if (params.isBlack == '') {
        uni.showToast({
          title: '请选择是否黑名单',
          icon: 'none'
        })
        return false;
      }
      if (this.form.carPhotosUrl) {
        params.carPhotosUrl = JSON.stringify([{
          name: '',
          url: this.form.carPhotosUrl
        }])
      }
      params.carColor = this.colorList[this.selectIndex]
      params.carType = this.carTypeList[this.carTypeIndex].id
      params.driverWorkerId = this.driverNameList[this.driverNameIndex].id
      var url = 'xmgl/carInfo/edit'
      if (this.isAdd) {
        url = 'xmgl/carInfo/add'

      } else {
        params.id = this.form.id
      }
      this.sendRequest({
        url: url,
        data: params,
        method: "POST",
        success(res) {
          uni.showToast({
            title: '保存成功！'
          })
          // uni.navigateBack({

          // })
          uni.navigateTo({
            url: './index'
          });

        }

      })
    }
  }
}
</script>

<style lang="scss" scoped>
.addImgBox {
  border: 1px solid rgba(42, 43, 91, 0.1);
  background-color: #f6f5f8;
  width: 60px;
  height: 60px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  font-size: 12px;

  .icon-add {
    width: 18px;
    height: 18px;
  }
}

.imgBox {
  width: 60px;
  height: 60px;
  display: inline-flex;
  position: relative;
  margin-right: 15px;

  .img {
    width: 100%;
    height: 100%;
    border-radius: 10px;
  }

  .deleteImg {
    position: absolute;
    right: -10px;
    top: -10px;
  }
}
</style>