opms_wechat/pages/project/create.vue

<!--
 * @Author: liuzhenlin 461480418@qq.ocm
 * @Date: 2023-01-12 11:57:48
 * @LastEditors: liuzhenlin
 * @LastEditTime: 2023-03-27 16:19:53
 * @Description: file content
 * @FilePath: \oms\pages\project\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="custName" borderBottom customStyle="padding:40rpx 0 30rpx">
          <view class="form-label flex_l">
            <view class="label-tag"></view>
            关联客户
          </view>
          <u-input
            v-model="addForm.custName"
            disabled
            disabledColor="#ffffff"
            placeholder="请选择关联客户"
            border="none"></u-input>
        </u-form-item>
        <u-form-item prop="productLineVal" borderBottom customStyle="padding:40rpx 0 30rpx" @click="showLine = true">
          <view class="form-label flex_l">
            <view class="label-tag"></view>
            产品线
          </view>
          <u-input
            :readonly="true"
            placeholder="请选择产品线"
            v-model="addForm.productLineVal"
            border="none"
            suffixIcon="arrow-down"
            suffixIconStyle="color:#CDCDCD"
            clearable
            customStyle="padding: 0 30rpx 0 12rpx"></u-input>
        </u-form-item>
        <u-form-item prop="nboName" borderBottom customStyle="padding:40rpx 0 30rpx">
          <view class="form-label flex_l">
            <view class="label-tag"></view>
            项目名称
          </view>
          <u-input
            placeholder="输入项目名称"
            v-model="addForm.nboName"
            border="none"
            suffixIconStyle="color:#CDCDCD"
            clearable
            customStyle="padding: 0 30rpx 0 12rpx"></u-input>
        </u-form-item>
        <u-form-item prop="nboSourceVal" borderBottom customStyle="padding:40rpx 0 30rpx" @click="showNboSource = true">
          <view class="form-label flex_l">
            <view class="label-tag"></view>
            项目来源
          </view>
          <u-input
            :readonly="true"
            placeholder="请选择项目来源"
            v-model="addForm.nboSourceVal"
            border="none"
            suffixIcon="arrow-down"
            suffixIconStyle="color:#CDCDCD"
            clearable
            customStyle="padding: 0 30rpx 0 12rpx"></u-input>
        </u-form-item>
        <u-form-item
          prop="bidInfo"
          borderBottom
          customStyle="padding:40rpx 0 30rpx"
          v-if="addForm.nboSource == 80"
          @click="$refs.bidRef.open()">
          <view class="form-label flex_l">
            <view class="label-tag"></view>
            招标信息
          </view>
          <u-input
            v-model="addForm.bidInfo"
            disabled
            disabledColor="#ffffff"
            placeholder="招标信息"
            border="none"></u-input>
          <u-icon slot="right" name="arrow-right"></u-icon>
        </u-form-item>
        <u-form-item prop="saleName" borderBottom customStyle="padding:40rpx 0 30rpx" @click="$refs.user.open()">
          <view class="form-label flex_l">
            <view class="label-tag"></view>
            销售工程师
          </view>
          <u-input
            :readonly="true"
            placeholder="请选择销售工程师"
            v-model="addForm.saleName"
            border="none"
            suffixIcon="arrow-down"
            suffixIconStyle="color:#CDCDCD"
            clearable
            customStyle="padding: 0 30rpx 0 12rpx"></u-input>
        </u-form-item>
        <u-form-item prop="salesVal" borderBottom customStyle="padding:40rpx 0 30rpx" @click="showModel = true">
          <view class="form-label flex_l">
            <view class="label-tag"></view>
            销售模式
          </view>
          <u-input
            :readonly="true"
            placeholder="请选择销售模式"
            v-model="addForm.salesVal"
            border="none"
            suffixIcon="arrow-down"
            suffixIconStyle="color:#CDCDCD"
            clearable
            customStyle="padding: 0 30rpx 0 12rpx"></u-input>
        </u-form-item>
        <u-form-item
          borderBottom
          customStyle="padding:40rpx 0 30rpx"
          @click="$refs.dealer.open()"
          v-if="addForm.salesModel > 10">
          <view class="form-label flex_l">
            <view class="label-tag"></view>
            经销商
          </view>
          <u-input
            :readonly="true"
            placeholder="请选择经销商"
            v-model="addForm.distributorName"
            border="none"
            suffixIcon="arrow-down"
            suffixIconStyle="color:#CDCDCD"
            clearable
            customStyle="padding: 0 30rpx 0 12rpx"></u-input>
        </u-form-item>
        <u-form-item prop="isBigVal" borderBottom customStyle="padding:40rpx 0 30rpx" @click="showLarge = true">
          <view class="form-label flex_l">
            <view class="label-tag"></view>
            是否大项目
          </view>
          <u-input
            :readonly="true"
            placeholder="请选择是否大项目"
            v-model="addForm.isBigVal"
            border="none"
            suffixIcon="arrow-down"
            suffixIconStyle="color:#CDCDCD"
            clearable
            customStyle="padding: 0 30rpx 0 12rpx"></u-input>
        </u-form-item>
        <u-form-item prop="nboTypeVal" borderBottom customStyle="padding:40rpx 0 30rpx" @click="showNboType = true">
          <view class="form-label flex_l">
            <view class="label-tag"></view>
            项目类别
          </view>
          <u-input
            :readonly="true"
            placeholder="请选择项目类别"
            v-model="addForm.nboTypeVal"
            border="none"
            suffixIcon="arrow-down"
            suffixIconStyle="color:#CDCDCD"
            clearable
            customStyle="padding: 0 30rpx 0 12rpx"></u-input>
        </u-form-item>
        <u-form-item borderBottom customStyle="padding:40rpx 0 30rpx">
          <view class="form-label flex_l">备注</view>
          <u-input
            placeholder="输入备注"
            v-model="addForm.remark"
            border="none"
            clearable
            customStyle="padding: 0 30rpx 0 12rpx"></u-input>
        </u-form-item>
      </u-form>
      <view class="center">
        <view class="handle-btn" @click="handleAdd">保存</view>
      </view>
    </view>
    <!-- 选择销售 -->
    <select-user
      ref="user"
      :query-params="{ roles: ['SalesEngineer', 'ProductLineManager'] }"
      @close="closeUser($event)"></select-user>
    <!-- 选择经销商 -->
    <select-dealer ref="dealer" @close="closeDealer($event)"></select-dealer>
    <!-- 选择招标信息 -->
    <select-bid ref="bidRef" :query-params="{ custId: addForm.custId }" @close="closeBid($event)"></select-bid>
    <!-- 项目来源 -->
    <u-picker
      :show="showNboSource"
      :columns="nboSourceColumns"
      keyName="value"
      @cancel="showNboSource = false"
      @confirm="pickSource"></u-picker>
    <!-- 产品线 -->
    <u-picker
      :show="showLine"
      :columns="productLineColumns"
      keyName="value"
      @cancel="showLine = false"
      @confirm="pickLine"></u-picker>
    <!-- 销售模式 -->
    <u-picker
      :show="showModel"
      :columns="salesModelColumns"
      keyName="value"
      @cancel="showModel = false"
      @confirm="pickModel"></u-picker>
    <!-- 大项目 -->
    <u-picker
      :show="showLarge"
      :columns="yesOrNoColumns"
      keyName="value"
      @cancel="showLarge = false"
      @confirm="pickLarge"></u-picker>
    <!-- 项目类别 -->
    <u-picker
      :show="showNboType"
      :columns="nboTypeColumns"
      keyName="value"
      @cancel="showNboType = false"
      @confirm="pickNboType"></u-picker>
    <u-notify ref="uNotify"></u-notify>
    <u-toast ref="uToast"></u-toast>
  </view>
</template>
<script>
  import { mapGetters } from 'vuex'
  import projectApi from 'api/project'
  import customerApi from '../../api/customer'
  import to from 'await-to-js'
  import SelectUser from 'components/SelectUser'
  import SelectDealer from 'components/SelectDealer'
  import SelectBid from 'components/SelectBid'
  export default {
    name: 'omsIndex',
    components: { SelectUser, SelectDealer, SelectBid },
    data() {
      return {
        flag: true,
        step: 1,
        height: '',
        paddingTop: '',
        showNboSource: false, //项目来源选择
        showModel: false, //销售模式选择
        showLine: false, //产品线选择
        showLarge: false, //是否是大项目选择
        showNboType: false, //项目类别
        nboSourceColumns: [], //项目来源
        salesModelColumns: [], //销售模式
        productLineColumns: [], //产品线
        yesOrNoColumns: [], //是否是大项目
        nboTypeColumns: [
          [
            { key: '30', value: 'C类' },
            { key: '50', value: '储备' },
          ],
        ],
        addForm: {
          nboName: '', //项目名称
          custId: '', //关联客户id
          custName: '', //关联客户
          nboSource: '', //项目来源
          nboSourceVal: '', //项目来源文字
          saleName: '', //销售工程师
          saleId: '', //销售工程师id
          salesModel: '', //销售模式（10直销20经销30代理）
          salesVal: '', //销售模式文字
          distributorId: null, //经销商/代理商ID
          distributorName: '', //经销商/代理商名称
          productLine: '', //产品线来源
          productLineVal: '', //产品线文字
          isBig: '', //是否是大项目
          isBigVal: '', //是否是大项目文字
          remark: '', //备注
          nboTypeVal: '', //项目类别
          nboType: '', //项目类别
          bidInfo: '', //招标标题
          bidId: null,
        },
        rules: {
          nboName: [{ required: true, trigger: ['blur', 'change'], message: '请输入项目名称' }],
          custName: [{ required: true, trigger: ['blur', 'change'], message: '请选择关联客户' }],
          nboSourceVal: [{ required: true, trigger: ['blur', 'change'], message: '请选择项目来源' }],
          saleName: [{ required: true, trigger: ['blur', 'change'], message: '请选择销售工程师' }],
          salesModelVal: [{ required: true, trigger: ['blur', 'change'], message: '请选择销售模式' }],
          distributorName: [{ required: true, trigger: ['blur', 'change'], message: '请选择经销商/代理商' }],
          isBigVal: [{ required: true, trigger: ['blur', 'change'], message: '请选择是否大项目' }],
          productLineVal: [{ required: true, trigger: ['blur', 'change'], message: '请选择产品线' }],
          nboTypeVal: [{ required: true, trigger: ['blur', 'change'], message: '请选择项目类别' }],
          // 跟进
          // followTime: [{ required: true, trigger: ['blur', 'change'], message: '请输入跟进时间' }],
          // followContent: [{ required: true, trigger: ['blur', 'change'], message: '请输入跟进内容' }],
        },
        productList: [],
      }
    },
    computed: {
      ...mapGetters(['userId', 'nickName']),
    },
    onLoad(option) {
      this.addForm.custId = parseInt(option.id)
    },
    created() {
      const navData = uni.getMenuButtonBoundingClientRect()
      this.height = navData.height + 'px'
      this.paddingTop = navData.top + 'px'
    },
    onShow() {
      if (this.addForm.custId) {
        this.getCustomerDetail()
      }
      this.getOptions()
    },
    methods: {
      getOptions() {
        Promise.all([
          this.getDicts('proj_nbo_source'),
          this.getDicts('proj_sales_model'),
          this.getDicts('sys_product_line'),
          this.getDicts('sys_yes_no'),
        ]).then(([nboSource, salesModel, productLine, yesOrNo]) => {
          this.nboSourceColumns = [nboSource.data.values] || []
          this.salesModelColumns = [salesModel.data.values] || []
          this.productLineColumns = [productLine.data.values] || []
          this.yesOrNoColumns = [yesOrNo.data.values] || []
        })
      },
      async getCustomerDetail() {
        const [err, res] = await to(customerApi.getDetail({ ids: [this.addForm.custId] }))
        if (err) return
        if (res && res.code == 200) {
          this.addForm.custName = res.data.list[0].custName
        }
      },
      // 打开主要联系人
      openContactUser() {
        if (!this.addForm.custId) {
          this.$refs.uNotify.show({
            top: this.height + this.paddingTop + 10,
            type: 'warning',
            message: '请先选择客户',
            duration: 1000 * 3,
          })
        } else {
          this.$refs.contact.open(this.addForm.custId)
        }
      },
      // 关闭选择客户
      closeCust(user) {
        if (user) {
          this.addForm.custId = user.id
          this.addForm.custName = user.name
          this.addForm.nboName = user.name + this.addForm.productLineVal
        }
      },
      // 经销商
      closeDealer(dealer) {
        if (dealer) {
          this.addForm.distributorId = dealer.id
          this.addForm.distributorName = dealer.name
        }
      },
      // 关闭选择销售
      closeUser(user) {
        if (user) {
          this.addForm.saleId = user.id
          this.addForm.saleName = user.label
        }
      },
      // 全部用户
      closeAllUser(user) {
        if (user) {
          this.addForm.followUserId = user.id
          this.addForm.followUserName = user.label
        }
      },
      closeProduct(product) {
        this.productList = [...product]
      },
      // 关闭选择招标信息的回调
      closeBid(bid) {
        console.log('bid', bid)
        this.addForm.bidInfo = bid.title
        this.addForm.bidId = bid.id
      },
      removeProductItem(idx) {
        this.productList.splice(idx, 1)
      },
      // 选择来源
      pickSource(e) {
        this.addForm.nboSource = e.value[0].key
        this.addForm.nboSourceVal = e.value[0].value
        this.showNboSource = false
      },
      // 选择产品线
      pickLine(e) {
        this.addForm.productLine = e.value[0].key
        this.addForm.productLineVal = e.value[0].value
        this.addForm.nboName = this.addForm.custName + this.addForm.productLineVal
        this.showLine = false
      },
      // 选择销售类型
      pickModel(e) {
        this.addForm.salesModel = e.value[0].key
        this.addForm.salesVal = e.value[0].value
        if (e.value[0].key == '10') {
          this.distributorId = null
          this.distributorName = ''
        }
        this.showModel = false
      },
      // 是否大项目
      pickLarge(e) {
        this.addForm.isBig = e.value[0].key
        this.addForm.isBigVal = e.value[0].value
        this.showLarge = false
      },
      // 项目类别
      pickNboType(e) {
        this.addForm.nboType = e.value[0].key
        this.addForm.nboTypeVal = e.value[0].value
        this.showNboType = false
      },
      nextStep() {
        if (this.step == 1) {
          this.$refs.addForm
            .validate()
            .then(async () => {
              this.step++
            })
            .catch((err) => {
              this.$refs.uNotify.show({
                top: this.height + this.paddingTop + 10,
                type: 'warning',
                message: err[0].message,
                duration: 1000 * 3,
              })
            })
        } else if (this.step == 2) {
          if (this.productList.length == 0) {
            this.$refs.uNotify.show({
              top: this.height + this.paddingTop + 10,
              type: 'warning',
              message: '请选择产品',
              duration: 1000 * 3,
            })
            return
          }
          this.step++
        }
      },
      previousStep() {
        if (this.step > 1) {
          this.step--
        }
      },
      handleAdd() {
        this.$refs.addForm
          .validate()
          .then(async () => {
            if (!this.flag) return
            this.$refs.addForm
              .validate()
              .then(async () => {
                this.flag = false
                let params = this.addForm
                const [err, res] = await to(projectApi.create(params))
                this.flag = true
                if (err) return
                if (res && res.code == 200) {
                  this.$refs.uToast.show({
                    type: 'success',
                    message: '创建成功',
                    complete: () => {
                      this.goBack()
                    },
                  })
                }
              })
              .catch((err) => {
                this.$refs.uNotify.show({
                  top: this.height + this.paddingTop + 10,
                  type: 'warning',
                  message: err[0].message,
                  duration: 1000 * 3,
                })
              })
          })
          .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: #3c9cff;
      .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;
      .step-tit {
        text-align: center;
        line-height: 60rpx;
        font-size: 26rpx;
        color: #000;
      }
      .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;
        }
      }
      .handle-btn {
        width: 234rpx;
        height: 92rpx;
        background: #3c9cff;
        border-radius: 31rpx;
        margin: 30rpx auto 0;
        font-size: 32rpx;
        color: #ffffff;
        text-align: center;
        line-height: 92rpx;
      }
    }
    .step1 {
      width: 100%;
      height: calc(100% - 124rpx);
      overflow: auto;
    }
    .step2 {
      width: 100%;
      height: calc(100% - 124rpx);
      .product-wrap {
        width: 100%;
        margin-top: 30rpx;
        height: calc(100% - 150rpx);
        overflow: auto;
        padding: 0 10rpx;
        .product-item {
          margin: 30rpx 0;
          padding: 20rpx;
          border-radius: 10px;
          box-shadow: 0 6rpx 19rpx 2rpx rgba(0, 45, 132, 0.15);
          .product-label {
            padding: 20rpx 0 20rpx 20rpx;
          }
        }
      }
      .margin20 {
        font-weight: bold;
        margin: 10px 20px;
      }
      .add-btn {
        color: #fff;
        width: 120rpx;
        height: 60rpx;
        padding: 0rpx 8rpx;
        font-size: 12rpx;
        background: #3c9cff;
        border-radius: 3px;
        text-align: center;
        line-height: 58rpx;
        font-size: 44rpx;
      }
    }
  }
</style>