uniDataCenter/pages/selfInfo/selfInfo.vue

<template>
  <view>
    <view class="con">
      <view class="lineItem">
        <text class="txt">公司 </text>
        <picker v-model="companyIdx" :range="companyRange" @change="pickerCompany" placeholder="请选择公司" style="width: 100%">
          <view class="uni-input">{{companyRange[companyIdx]}}</view>
        </picker>
      </view>
      <view class="lineItem">
        <text class="txt">部门</text>
        <picker v-model="departIdx" :range="departmentRange" @change="pickerDepart" placeholder="请选择部门" style="width: 100%">
          <view class="uni-input">{{departmentRange[departIdx]}}</view>
        </picker>
      </view>
      <view class="lineItem">
        <text class="txt">真实姓名</text>
        <input v-model="realName" type="text" placeholder="请输入真实姓名" />
      </view>
      <view class="save" @click="saveClick">保存</view>
    </view>
    <wm-watermark :text="real_name"></wm-watermark>
  </view>
</template>

<script>
export default {
  data () {
    return {
      real_name: '',
      realName: '',

      departIdx: null,
      departmentList: [],
      departmentRange: [],
      departId: null,//保存信息的部门id

      companyIdx: null,
      companyList: [],
      companyRange: [],
      companyId: null,//保存信息的部门id
    }
  },
  async onLoad () {
    this.real_name = uni.getStorageSync('userInfo').info.real_name;
    await this.$onLaunched;
    this.get_companySubjectList()//报销主体列表
  },
  methods: {
    get_userInfoReback () {
      this.$req(this.$api.userReiInfoDetail, 'get', {}, (res) => {
        if (res && res.errno == 0) {

          this.realName = res.rst.reimburse_name
          this.departmentList.forEach((item, item_idx) => {
            if (item.id == res.rst.department_id) {
              this.departIdx = item_idx
              this.departId = item.id
            }
          })
          this.companyList.forEach((item, item_idx) => {
            if (item.id == res.rst.company_subject_id) {
              this.companyIdx = item_idx
              this.companyId = item.id
            }
          })
          this.$hide_init_loading()
        }
      }, err => {
        this.$hide_init_loading()
      })
    },
    pickerCompany (e) {
      this.companyIdx = e.target.value
      this.companyId = this.companyList[this.companyIdx].id
    },
    pickerDepart (e) {
      this.departIdx = e.target.value
      this.departId = this.departmentList[this.departIdx].id
    },
    get_companySubjectList () {
      this.$show_init_loading()
      this.$req(this.$api.companySubjectList, 'get', {
        page: 1,
        page_size: 999
      }, (res) => {
        if (res && res.errno == 0) {
          this.companyList = res.rst.data
          this.get_departmentList()
          res.rst.data.forEach(i => {
            this.companyRange.push(i.company_name)
          })
        }
      })
    },
    get_departmentList () {
      this.$req(this.$api.departments, 'get', {
        page: 1,
        page_size: 999
      }, (res) => {
        if (res && res.errno == 0) {
          this.departmentList = res.rst.data
          res.rst.data.forEach(i => {
            this.departmentRange.push(i.department_name)
          })
          this.get_userInfoReback()
        }
      })
    },
    saveClick () {
      if (this.realName == '' || this.companyId==null || this.departId == null) {
        uni.showToast({
          title: '选项不能为空,请重新操作',
          icon: 'none',
          duration: 2000
        })
        return false
      }
      this.$show_init_loading()
      this.$req(this.$api.userReiInfoOperate, 'post', {
        company_subject_id: this.companyId,
        department_id: this.departId,
        reimburse_name: this.realName
      }, (res) => {
        uni.showToast({
          title: res.err,
          icon: 'none',
          duration: 2000
        })
        if (res && res.errno == 0) {
          this.$nav_back()
          this.$hide_init_loading()
        }
      }, (err) => {
        uni.showToast({
          title: res.err,
          icon: 'none',
          duration: 2000
        })
        this.$hide_init_loading()
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.con {
  padding: 68rpx 40rpx;
  font-size: 32rpx;
  .lineItem {
    display: flex;
    align-items: center;
    margin-top: 40rpx;
    .uni-input {
      background: #1c222e;
      height: 80rpx;
      border-radius: 40rpx;
      width: 100%;
      line-height: 80rpx;
      color: #fff;
      padding: 0 40rpx;
      overflow: hidden;
    }
    input {
      background: #1c222e;
      height: 80rpx;
      border-radius: 40rpx;
      width: 76%;
      line-height: 80rpx;
      color: #fff;
      padding: 0 40rpx;
    }
    .txt {
      display: inline-block;
      width: 24%;
    }
  }
  .save {
    margin: 40rpx auto;
    background-color: #5b80f4;
    width: 20%;
    border-radius: 40rpx;
    height: 72rpx;
    line-height: 72rpx;
    text-align: center;
  }
}
</style>