uniDataCenter/pages/addExpenseForm/addExpenseFo...

<template>
  <view class="con">
    <!--    个人信息-->
    <view class="infoTop">
      <view class="flex-bewteen">
        <view>
          <text>时间: </text>
          <text>{{pageOpt.date ? pageOpt.date : infoTop.date}}</text>
        </view>
        <view>
          <text>经手人: </text>
          <text>{{pageOpt.staff_name ? pageOpt.staff_name : infoTop.staff_name}}</text>
        </view>
      </view>
      <view class="flex-bewteen tMar14">
        <view>
          <text>公司: </text>
          <text>{{pageOpt.company ? pageOpt.company : infoTop.company}}</text>
        </view>
        <view>
          <text>部门: </text>
          <text>{{pageOpt.department ? pageOpt.department : infoTop.department}}</text>
        </view>
      </view>
    </view>

    <!-- 编辑区域-->
    <view v-if="editAreaShow">
      <view v-for="(d,didx) in danFromList" :key="didx" class="edit_item">
        <view>
          报销单
          <text v-if="danFromList&&danFromList.length>1">{{didx+1}}</text>
          <text class="iconfont icon-butongguo_icon f26 lMar8" v-if="danFromList&&danFromList.length>1" @click="deleDan(didx,d.id)"></text>
        </view>

        <view class="edit_item_row">加班类型：{{pageOpt.reason}}</view>

        <view class="edit_item_row">
          <view class="flex-bewteen">
            <text>出发</text>
            <text class="note">*</text>
            <uni-datetime-picker class="ecpensePicker" type="datetime" :end="tomorrw" :clear-icon="false" :border="false" :disabled="onlySee" v-model="d.start_time" />
          </view>
          <view><input v-model="d.start_site" :disabled="onlySee" type="text" class="ipt_box" placeholder="请输入出发地点" /></view>
        </view>

        <view class="edit_item_row">
          <view class="flex-bewteen">
            <text>到达</text>
            <text class="note">*</text>
            <uni-datetime-picker class="ecpensePicker" type="datetime" :clear-icon="false" :end="tomorrw" :border="false" :disabled="onlySee" v-model="d.end_time" />
          </view>
          <view><input v-model="d.end_site" type="text" :disabled="onlySee" class="ipt_box" placeholder="请输入到达地点" /></view>
        </view>

        <view class="edit_item_row">
          <view class="flex-bewteen">
            <text>交通工具</text>
            <text class="note">*</text>
            <picker class="ex_picker" :disabled="onlySee" v-model="d.car_type" :range="car_type_option" @change="bindPickerChange($event,didx)" style="width: 54%">
              <view class="uni-input">{{car_type_option[d.car_type]}}</view>
            </picker>
          </view>
          <view class="flex-bewteen">
            <text>金额</text>
            <text class="note">*</text>
            <input style="width: 60%" v-model="d.amount" :disabled="onlySee" type="text" class="ipt_box" placeholder="请输入金额" />
          </view>
        </view>

        <view class="edit_item_row">
          <view @click="passFeechange(didx)">
            <checkbox class="expense_check" style="transform:scale(0.7)" :value="d.passing_is" :checked="d.passing_is" :disabled="onlySee" />过路费
          </view>
          <view class="flex-bewteen" v-if="d.passing_is">
            <text>金额</text> <text class="note">*</text>
            <input style="width: 60%" v-model="d.toll_fee" :disabled="onlySee" type="text" class="ipt_box" placeholder="请输入金额" />
          </view>
        </view>

        <view style="height: 3px;background: #3D4453;margin: 30rpx 0 20rpx;"></view>

        <view class="flex-bewteen">
          <text>备注</text> <textarea v-model="d.remark" :disabled="onlySee" placeholder="请输入备注" class="ex_textarea" placeholder-style="line-height: 60rpx;padding:10rpx" />
        </view>

      </view>
    </view>
    <!--   添加框 -->
    <view class="plusBox" @click="addFormList" v-if="(optisEdit == 1&&infoTop&&infoTop.if_can_add_new == 1) || optisEdit == 0">
      添加报销单
      <text class="iconfont icon-tianjia_icon f26 lMar8"></text>
    </view>
    <!--操作按钮  -->
    <view @click="liveAdd" class="save" v-if="!onlySee">保存</view>
    <wm-watermark :text="real_name"></wm-watermark>
  </view>
</template>

<script>
export default {
  data () {
    return {
      real_name: '',
      del_ids: [], // 删除的id集合
      tomorrw: this.$getDay(0, false) + ' 23:59:59',//今天以后不能选
      pageOpt: {},
      infoTop: {},
      editAreaShow: false,
      goTime: '',
      goAdd: '',
      endTime: '',
      endAdd: '',
      car_type_option: ['出租车', '网约车'], //1,2
      danFromList: [ //新增报销初始化字段们
        // {
        //   start_time: "",
        //   end_time: "",
        //   start_site: "",
        //   end_site: "",
        //   amount: "",
        //   passing_is: false,
        //   toll_fee: "",
        //   remark: "",
        //   reason: "",
        //   off_time: "",
        //   car_type:0,//传值时，此值加1就是后台需要的参数 ，出租车1，网约车2
        // }
      ],
      data_add: [],
      emptyFlag: false,//判断是否有空值,true有
      onlySee: false,//仅查看不能操作
      optisEdit: 0,
	  page:''
    }
  },
  async onLoad (option) {
    await this.$onLaunched;
    this.real_name = uni.getStorageSync('userInfo').info.real_name;
    this.pageOpt = JSON.parse(decodeURIComponent(option.item))
    this.optisEdit = option.isEdit
	  this.page = option.page;
    if (this.optisEdit == 1 || this.optisEdit == 2) {
      this.reBackInfo()
    }
    this.onlySee = false
    if (this.optisEdit == 2) {
      this.onlySee = true
    }
  },
  methods: {
    //判断是否是空值
    judge_empty_Data () {
      this.emptyFlag = false
      this.data_add = []
      let old_id = []
      if (this.danFromList && this.danFromList.length == 0) {
        uni.showToast({
          title: '添加报销单后可提交',
          icon: 'none',
          duration: 2000
        })
        return false
      }
      this.danFromList.forEach((i) => {
        if (
          i.start_time == '' ||
          i.end_time == '' ||
          i.start_site == '' ||
          i.end_site == '' ||
          i.amount == ''
        ) {
          this.emptyFlag = true
        } else {
          if (i.id) {
            old_id.push(i.id)
          }
          this.data_add.push({
            is_new: old_id.indexOf(i.id) == -1 ? 1 : 0,
            id: i.id ? i.id : 0,
            start_time: i.start_time,
            end_time: i.end_time,
            start_site: i.start_site,
            end_site: i.end_site,
            car_type: Number(i.car_type) + 1,
            amount: i.amount,
            toll_fee: i.passing_is ? i.toll_fee : null,
            remark: i.remark
          })
        }
      })

    },
    reBackInfo () { //编辑回显
      this.$show_init_loading()
      this.editAreaShow = true
      this.$req(this.$api.reimbDetail, 'get', {
        rei_id: this.pageOpt.rei_id ? this.pageOpt.rei_id : this.pageOpt.id
      }, (res) => {
        if (res && res.errno == 0) {
          this.infoTop = res.rst.info
          console.log(this.infoTop);
          console.log(this.pageOpt.staff_name);
          let arr = res.rst.details
          arr.forEach(p => {
            if (p.toll_fee) {
              p.passing_is = true
            } else {
              p.passing_is = false
            }
            p.car_type = Number(p.car_type) - 1
          })
          this.danFromList = arr
        } else {
          uni.showToast({
            title: res.err,
            icon: 'none',
            duration: 2000
          })
        }
        this.$hide_init_loading()
      })
    },
    //保存
    liveAdd () {
      this.judge_empty_Data()
      if (this.emptyFlag) {
        uni.showToast({
          title: '以上均为必填项',
          icon: 'none',
          duration: 2000
        })
        return false
      }
      let api = this.$api.LiveReimbDetailAdd //首次添加
      let param = {
        rei_id: this.pageOpt.rei_id ? this.pageOpt.rei_id : this.pageOpt.id,
        data: JSON.stringify(this.data_add)
      }
      if (this.optisEdit == 1) { //编辑
        api = this.$api.LiveReimbDetailEdit
        param = {
          rei_id: this.pageOpt.rei_id ? this.pageOpt.rei_id : this.pageOpt.id,
          data: JSON.stringify(this.data_add),
          del_ids: this.del_ids
        }
      }
      this.$req(api, 'post', param, (res) => {
        uni.showToast({
          title: res.err,
          icon: 'none',
          duration: 2000
        })
        if (res && res.errno == 0) {
          let _this = this;
          let pages = getCurrentPages(); // 当前页面
          let beforePage = pages[pages.length - 2]; // 上一页
          uni.navigateBack({
            success: function () {
              beforePage.onLoad({ page: 'reimbursementPage'}); // 执行上一页的onLoad方法
            }
          });
        }
      })
    },
    bindPickerChange: function (e, idx) {
      this.danFromList[idx].car_type = e.target.value
    },
    passFeechange: function (idx) {
      this.danFromList[idx].passing_is = !this.danFromList[idx].passing_is
    },
    addFormList () { //新增报销单
      if (!this.editAreaShow) {
        this.editAreaShow = true
      }
      let item = {
        start_time: "",
        end_time: "",
        start_site: "",
        end_site: "",
        amount: "",
        passing_is: false,
        toll_fee: "",
        remark: "",
        reason: "",
        car_type: 0,//传值时，此值加1就是后台需要的参数 ，出租车1，网约车2
      }
      this.danFromList.push(item)
    },
    deleDan (i, id) { //删除报销单
      if (this.onlySee) {
        return false
      }
      if (id) {
        this.del_ids = []
        this.del_ids.push(id)
      }
      this.danFromList.splice(i, 1)
    },
  }
}
</script>

<style lang="scss" scoped>
.con {
  padding: 26rpx;
  font-size: 26rpx;
  background: #242a37;
}
.infoTop {
  background: linear-gradient(160deg, #87b5ff 0%, #4f7eff 100%);
  border-radius: 6rpx;
  padding: 22rpx 30rpx;
}
.plusBox {
  text-align: center;
  background: #3d4453;
  height: 100rpx;
  line-height: 100rpx;
  font-size: 24rpx;
  width: 100%;
  margin-top: 24rpx;
}
.save {
  margin: 40rpx auto;
  background-color: #5b80f4;
  width: 25%;
  border-radius: 10rpx;
  height: 80rpx;
  line-height: 80rpx;
  text-align: center;
  font-size: 28rpx;
}
.edit_item {
  background: #373e4e;
  border-radius: 6rpx;
  padding: 40rpx 30rpx;
  margin-top: 24rpx;
  .note {
    color: #ff2b2b;
    margin-right: 8rpx;
  }
  .edit_item_row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 20rpx;
    .ipt_box {
      background: #1c222e;
      height: 60rpx;
      border-radius: 8rpx;
      line-height: 60rpx;
      padding: 0 10rpx;
    }
  }
  .edit_item_row > view:nth-child(1) {
    width: 55%;
  }
  .edit_item_row > view:nth-child(2) {
    width: 43%;
  }
  .ex_picker {
    background: #1c222e;
    height: 60rpx;
    border-radius: 8rpx;
    line-height: 60rpx;
    padding: 0 10rpx;
    width: 60%;
  }
  .ex_textarea {
    background: #1c222e;
    height: 120rpx;
    border-radius: 8rpx;
    line-height: 40rpx;
    padding: 10rpx;
    width: 84%;
  }
}
</style>