opms_wechat/pages/distributor/create.vue

<!--
 * @Author: liuzhenlin 461480418@qq.ocm
 * @Date: 2023-01-12 11:57:48
 * @LastEditors: liuzhenlin
 * @LastEditTime: 2023-03-22 11:26:04
 * @Description: file content
 * @FilePath: \oms\pages\distributor\create.vue
-->
<template>
  <view class="home">
    <view class="nav">
      <view :style="{ paddingTop }">
        <view class="title" :style="[{ height }, { lineHeight: height }]">
          <view class="back" @click="goBack()">
            <u-icon name="arrow-left" color="#ffffff" size="22"></u-icon>
          </view>
          <text>新建经销商</text>
        </view>
      </view>
    </view>
    <view class="main">
      <u-form :model="addForm" :rules="rules" ref="addForm" label-width="0">
        <u-form-item prop="distName" customStyle="padding:40rpx 0 34rpx" borderBottom>
          <view class="form-label flex_l">
            <view class="label-tag"></view>
            名称
          </view>
          <u-input border="none" v-model="addForm.distName" placeholder="请输入名称"></u-input>
        </u-form-item>
        <u-form-item prop="abbrName" customStyle="padding:40rpx 0 34rpx" borderBottom>
          <view class="form-label flex_l">助记名</view>
          <u-input border="none" v-model="addForm.abbrName" placeholder="请输入助记名"></u-input>
        </u-form-item>
        <u-form-item prop="distDesc" customStyle="padding:40rpx 0 34rpx" borderBottom>
          <view class="form-label flex_l">说明</view>
          <u-input border="none" maxlength="11" v-model="addForm.distDesc" placeholder="请输入说明"></u-input>
        </u-form-item>
        <u-form-item prop="distBoss" customStyle="padding:40rpx 0 34rpx" borderBottom>
          <view class="form-label flex_l">
            <view class="label-tag"></view>
            负责人
          </view>
          <u-input border="none" v-model="addForm.distBoss" placeholder="请输入负责人"></u-input>
        </u-form-item>
        <u-form-item prop="distBossPhone" customStyle="padding:40rpx 0 34rpx" borderBottom>
          <view class="form-label flex_l">
            <view class="label-tag"></view>
            电话
          </view>
          <u-input maxlength="11" border="none" v-model="addForm.distBossPhone" placeholder="请输入电话"></u-input>
        </u-form-item>
        <u-form-item prop="businessScope" customStyle="padding:40rpx 0 34rpx" borderBottom>
          <view class="form-label flex_l">
            <view class="label-tag"></view>
            业务范围
          </view>
          <u-input border="none" v-model="addForm.businessScope" placeholder="请输入业务范围"></u-input>
        </u-form-item>
        <u-form-item prop="provinceDesc" borderBottom customStyle="padding:40rpx 0 30rpx" @click="showProvince = true">
          <view class="form-label flex_l">
            <view class="label-tag"></view>
            选择省份
          </view>
          <u-input
            :readonly="true"
            placeholder="请选择省份"
            v-model="addForm.provinceDesc"
            border="none"
            suffixIcon="arrow-down"
            suffixIconStyle="color:#CDCDCD"
            clearable
            customStyle="padding: 0 30rpx 0 12rpx"></u-input>
        </u-form-item>
        <u-form-item prop="belongSale" borderBottom customStyle="padding:40rpx 0 30rpx" @click="openUser()">
          <view class="form-label flex_l">
            <view class="label-tag"></view>
            销售工程师
          </view>
          <u-input
            :readonly="true"
            placeholder="请选择销售工程师"
            v-model="addForm.belongSale"
            border="none"
            suffixIcon="arrow-down"
            suffixIconStyle="color:#CDCDCD"
            clearable
            customStyle="padding: 0 30rpx 0 12rpx"></u-input>
        </u-form-item>
        <u-form-item prop="remark" customStyle="padding:40rpx 0 34rpx" borderBottom>
          <view class="form-label flex_l">备注</view>
          <u-textarea
            v-model="addForm.remark"
            placeholder="请输入备注"
            maxlength="800"
            height="190rpx"
            count
            customStyle="border-radius:16rpx"></u-textarea>
        </u-form-item>
      </u-form>
      <view class="center">
        <view class="handle-btn" @click="handleAdd">保存</view>
      </view>
    </view>
    <!-- 选择省 -->
    <u-picker
      :show="showProvince"
      :columns="provinceColumns"
      keyName="distName"
      @cancel="showProvince = false"
      @confirm="pickProvince"></u-picker>
    <!-- 选择销售 -->
    <select-user ref="user" :query-params="{ roles: ['SalesEngineer','ProductLineManager'] }" @close="closeUser($event)"></select-user>
    <u-notify ref="uNotify"></u-notify>
    <u-toast ref="uToast"></u-toast>
  </view>
</template>
<script>
  import to from 'await-to-js'
  import distrApi from '../../api/base/distr'
  import SelectUser from 'components/SelectUser'
  export default {
    name: 'omsIndex',
    components: { SelectUser },
    data() {
      return {
        height: '',
        paddingTop: '',
        showProvince: false,
        provinceColumns: [],
        addForm: {
          distName: '',
          abbrName: '',
          distDesc: '',
          distBoss: '',
          distBossPhone: '',
          businessScope: '',
          provinceId: null,
          provinceDesc: '',
          belongSale: '',
          belongSaleId: 0,
          remark: '',
        },
        rules: {
          distName: [{ required: true, trigger: 'blur', message: '请输入名称' }],
          distBoss: [{ required: true, trigger: 'blur', message: '请输入负责人' }],
          distBossPhone: [
            {
              pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
              message: '请输入正确的手机号码',
              trigger: 'blur',
              required: true,
            },
          ],
          businessScope: [{ required: true, trigger: 'blur', message: '请填写业务范围' }],
          provinceDesc: [{ required: true, trigger: 'blur', message: '请选择省份' }],
          belongSale: [{ required: true, trigger: 'blur', message: '请填写归属销售' }],
        },
      }
    },
    onLoad(option) {
      this.addForm.custId = Number(option.id)
      this.addForm.custName = option.name
    },
    created() {
      const navData = uni.getMenuButtonBoundingClientRect()
      this.height = navData.height + 'px'
      this.paddingTop = navData.top + 'px'
    },
    mounted() {
      this.getOptions()
    },
    methods: {
      getOptions() {
        Promise.all([distrApi.getProvinceList()])
          .then(([province]) => {
            this.provinceColumns = [province.data.list]
          })
          .catch((err) => console.log(err))
      },
      openUser() {
        this.$refs.user.open()
      },
      // 关闭选择销售
      closeUser(user) {
        if (user) {
          this.addForm.belongSaleId = user.id
          this.addForm.belongSale = user.label
        }
      },
      // 省份选择
      pickProvince(e) {
        this.addForm.provinceId = e.value[0].id
        this.addForm.provinceDesc = e.value[0].distName
        this.showProvince = false
      },
      handleAdd() {
        this.$refs.addForm
          .validate()
          .then(async () => {
            let params = this.addForm
            const [err, res] = await to(distrApi.doAdd(params))
            if (err) return
            if (res && res.code == 200) {
              this.$refs.uToast.show({
                type: 'success',
                message: '创建成功',
                complete: () => {
                  uni.navigateBack({
                    //关闭当前页面，返回上一页面或多级页面。
                    delta: 1,
                  })
                },
              })
            }
          })
          .catch((err) => {
            this.$refs.uNotify.show({
              top: this.height + this.paddingTop + 10,
              type: 'warning',
              message: err[0].message,
              duration: 1000 * 3,
            })
          })
      },
      goBack() {
        uni.navigateBack({
          //关闭当前页面，返回上一页面或多级页面。
          delta: 1,
        })
      },
    },
  }
</script>
<style>
  page {
    background: #f2f3f5;
  }
</style>
<style lang="scss" scoped>
  .home {
    padding-top: 188rpx;

    .nav {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 284rpx;
      background: #3e7ef8;

      .title {
        position: relative;
        text-align: center;
        font-size: 32rpx;
        font-weight: bold;
        color: #ffffff;

        .back {
          position: absolute;
          top: 0;
          bottom: 0;
          margin: auto;
          left: 70rpx;
          display: flex;
        }
      }
    }

    .main {
      position: absolute;
      width: 100%;
      height: calc(100vh - 188rpx);
      background: #ffffff;
      box-shadow: 0 6rpx 19rpx 2rpx rgba(0, 45, 132, 0.15);
      border-radius: 31rpx 31rpx 0 0;
      padding: 0 32rpx;
      overflow: auto;
      padding-bottom: 64rpx;

      .form-label {
        font-size: 32rpx;
        font-weight: bold;
        color: #323232;
        padding-bottom: 18rpx;

        .label-tag {
          width: 15rpx;
          height: 15rpx;
          background: #ff4d4f;
          border-radius: 50%;
          margin-right: 10rpx;
        }
      }

      .upload-file-box {
        padding: 20rpx 0;
        position: relative;

        .upload-btn {
          position: absolute;
          right: 0;
          top: 26rpx;
        }
      }
    }

    .handle-btn {
      width: 569rpx;
      height: 92rpx;
      background: #3e7ef8;
      border-radius: 31rpx;
      margin: 116rpx auto 0;
      font-size: 32rpx;
      color: #ffffff;
      text-align: center;
      line-height: 92rpx;
    }
  }
</style>