pco/app-ui/pages/user/addUser.vue

<template>
  <view>
    <view class="box">
      <view class="top">
        <text class="title" v-if="!form.id">添加用户</text>
        <text class="title" v-else>编辑用户</text>
      </view>
      <view class="item">
        <view class="l">
          <text style="color: red;">*</text>
          用户名：
        </view>
        <view class="r">
          <u-input placeholder="用户名" v-model="form.name">
          </u-input>
        </view>
      </view>
      <view class="item" v-if="!form.id">
        <view class="l">
          <text style="color: red;">*</text>
          密码：
        </view>
        <view class="r">
          <u-input placeholder="密码" type="password" v-model="form.password">
          </u-input>
        </view>
      </view>
      <view class="item" v-if="!form.id">
        <view class="l">
          <text style="color: red;">*</text>
          再输一次：
        </view>
        <view class="r">
          <u-input placeholder="再输一次" type="password" v-model="form.againPassword">
          </u-input>
        </view>
      </view>
      <view class="item">
        <view class="l">
          <text style="color: red;">*</text>
          角色：
        </view>
      </view>
      <view class="item">
        <view class="l">
          <u-checkbox-group v-model="roleList">
            <u-checkbox :customStyle="{marginBottom: '10px',marginLeft:'10px'}"
                        v-for="(item, index) in checkboxList" :key="index" :label="item.name" :name="item.id">
            </u-checkbox>
          </u-checkbox-group>
        </view>
      </view>
      <view class="item" v-show="form.id">
        <view class="l">
          状态：
        </view>
        <view class="r">
          <radio-group @change="statusChange">
            <label class="radio">
              <radio value="1" :checked="form.status==1"/>
              可用
            </label>
            <label class="radio" style="margin-left: 20rpx;">
              <radio value="2" :checked="form.status==2"/>
              禁用
            </label>
          </radio-group>
        </view>
      </view>

    </view>
    <u-button type="primary" text="确定" @click="saveFn"></u-button>
    <!-- ---------------------------------------------------------- -->
    <view class="bottom-safety"></view>

  </view>
</template>

<script>
export default {
  data() {
    return {
      roleList: [],
      checkboxList: [],
      form: {
        id: '',
        status: 1,
        customerId: '',
        name: '',
        password: '',
        againPassword: '',
      },
      perList: []
    }
  },
  onLoad(options) {
    this.form.id = options.id;
    this.form.name = options.name;
    this.form.status = options.status;
    this.roleList = options.roleId ? options.roleId.split(',').map(id => parseInt(id)) : [];
    console.log(this.roleList)
    let info = uni.getStorageSync('userInfo');
    let customerId = info.customerId;
    this.form.customerId = customerId;
    this.getRoleList();
  },
  onShow() {
    this.perList = uni.getStorageSync('perList');
  },
  onBackPress() {
    this.$common.to('/pages/user/user-index');
    return true;
  },
  methods: {
    statusChange(e) {
      this.form.status = e.detail.value
    },
    getRoleList() {
      this.$api.getRoleList({
        customerId: this.form.customerId
      }).then(resp => {
        this.checkboxList = resp.data;
      })
    },
    saveFn() {
      if (!this.form.name) {
        this.$common.toast('请填写用户名');
        return;
      }
      if (!this.form.password && !this.form.id) {
        this.$common.toast('请填写密码');
        return;
      }
      if (this.form.password != this.form.againPassword) {
        this.$common.toast('两次密码不一致');
        return;
      }
      if (this.roleList.length == 0) {
        this.$common.toast('请选择用户角色');
        return;
      }
      this.form.roleId = this.roleList.join(',');
      if (this.form.id) {
        this.$api.editCustomerAdmin(this.$common.removeNull(this.form)).then(resp => {
          if (resp.code == 200) {
            this.$common.to('/pages/user/addUserSuccess')
          }
        })
      } else {
        this.$api.addCustomerAdmin(this.$common.removeNull(this.form)).then(resp => {
          if (resp.code == 200) {
            this.$common.to('/pages/user/addUserSuccess')
          }
        })
      }
    },
  },

}
</script>

<style lang="scss">
page {
  background-color: #fff;
}

.hs-item {
  text-align: center;
}

.item-line {
  color: #a2a2a2;
  padding: 5px 0 10px 29px;
  border-bottom: 1px solid #E5E5E5;
}

.hj {
  padding: 50rpx;
  font-size: 40rpx;
  color: red;
  font-weight: bold;
}

.save-btn {
  background-color: #ff4200;
  height: 88rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 60rpx;
  color: #fff;
  font-size: 30rpx;
  font-weight: bold;
  border-radius: 10rpx;
}

@import '@/common/common.scss'
</style>