opms_wechat/pages/project/upgrade.vue

<!--
 * @Author: liuzhenlin 461480418@qq.ocm
 * @Date: 2023-01-12 11:57:48
 * @LastEditors: liuzhenlin
 * @LastEditTime: 2023-02-21 17:47:39
 * @Description: file content
 * @FilePath: \frontend_mobile\pages\project\upgrade.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="nboType" borderBottom customStyle="padding:40rpx 0 30rpx">
          <view class="form-label flex_l">
            <view class="label-tag"></view>
            项目级别
          </view>
          <u-radio-group v-model="addForm.nboType" placement="row">
            <u-radio
              customStyle="margin-right:40rpx"
              :disabled="projectDetails.nboType === '10'"
              label="A"
              name="10"></u-radio>
            <u-radio
              customStyle="margin-right:40rpx"
              :disabled="projectDetails.nboType === '20'"
              label="B"
              name="20"></u-radio>
            <u-radio
              :disabled="['10', '20', '30'].includes(projectDetails.nboType)"
              customStyle="margin-right:40rpx"
              label="C"
              name="30"></u-radio>
            <!-- <u-radio v-if="projectDetails.nboType === '10'" label="储备" name="50"></u-radio> -->
          </u-radio-group>
        </u-form-item>
        <view v-if="addForm.nboType !== '30'">
          <u-form-item prop="nboBudget" borderBottom customStyle="padding:40rpx 0 30rpx">
            <view class="form-label flex_l">
              <view class="label-tag"></view>
              项目预算
            </view>
            <u-input
              placeholder="输入项目预算"
              v-model="addForm.nboBudget"
              border="none"
              type="number"
              suffixIconStyle="color:#CDCDCD"
              clearable
              customStyle="padding: 0 30rpx 0 12rpx"></u-input>
          </u-form-item>
          <u-form-item
            prop="distributorName"
            borderBottom
            customStyle="padding:40rpx 0 30rpx"
            @click="$refs.dealer.open()">
            <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="parentReceiver" borderBottom customStyle="padding:40rpx 0 30rpx">
            <view class="form-label flex_l">
              <view class="label-tag"></view>
              总部对接人
            </view>
            <u-input
              placeholder="输入总部对接人"
              v-model="addForm.parentReceiver"
              border="none"
              suffixIconStyle="color:#CDCDCD"
              clearable
              customStyle="padding: 0 30rpx 0 12rpx"></u-input>
          </u-form-item>
        </view>
        <u-form-item borderBottom customStyle="padding:40rpx 0 30rpx">
          <view class="form-label flex_l">
            <view class="label-tag"></view>
            技术支持人员
          </view>
          <u-input
            placeholder="输入技术支持人员"
            v-model="addForm.technicalSupportName"
            border="none"
            suffixIconStyle="color:#CDCDCD"
            clearable
            customStyle="padding: 0 30rpx 0 12rpx"></u-input>
        </u-form-item>
        <u-form-item prop="technicalSupportContent" borderBottom customStyle="padding:40rpx 0 30rpx">
          <view class="form-label flex_l">
            <view class="label-tag"></view>
            技术支持内容
          </view>
          <u-input
            placeholder="输入技术支持内容"
            v-model="addForm.technicalSupportContent"
            border="none"
            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="showSupportDate = true">
          <view class="form-label flex_l">
            <view class="label-tag"></view>
            技术支持时间
          </view>
          <u-input
            :readonly="true"
            placeholder="请选择技术支持时间"
            v-model="addForm.technicalSupportTime"
            border="none"
            suffixIcon="arrow-down"
            suffixIconStyle="color:#CDCDCD"
            clearable
            customStyle="padding: 0 30rpx 0 12rpx"></u-input>
        </u-form-item>
        <view v-if="addForm.nboType !== '30'">
          <u-form-item borderBottom customStyle="padding:40rpx 0 30rpx" @click="showBudgetDate = true">
            <view class="form-label flex_l">
              <view class="label-tag"></view>
              项目预算期限
            </view>
            <u-input
              :readonly="true"
              placeholder="请选择项目预算期限"
              v-model="addForm.nboBudgetTime"
              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 class="label-tag"></view>
              资金来源
            </view>
            <u-input
              placeholder="输入资金来源"
              v-model="addForm.capitalSource"
              border="none"
              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 class="label-tag"></view>
              产品/方案满足情况
            </view>
            <u-input
              placeholder="输入产品/方案满足情况"
              v-model="addForm.productSatisfaction"
              border="none"
              suffixIconStyle="color:#CDCDCD"
              clearable
              customStyle="padding: 0 30rpx 0 12rpx"></u-input>
          </u-form-item>
        </view>
        <view v-if="addForm.nboType === '10'">
          <u-form-item borderBottom customStyle="padding:40rpx 0 30rpx" @click="showChasingWay = true">
            <view class="form-label flex_l">
              <view class="label-tag"></view>
              采购方式
            </view>
            <u-input
              :readonly="true"
              placeholder="请选择采购方式"
              v-model="addForm.purchasingWayVal"
              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="showPurchasingDate = true">
            <view class="form-label flex_l">
              <view class="label-tag"></view>
              采购时间
            </view>
            <u-input
              :readonly="true"
              placeholder="请选择采购时间"
              v-model="addForm.technicalSupportTime"
              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="selectContact()">
            <view class="form-label flex_l">
              <view class="label-tag"></view>
              决策人员
            </view>
            <u-input
              :readonly="true"
              placeholder="输入决策人员"
              v-model="addForm.makerName"
              border="none"
              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 class="label-tag"></view>
              决策部门
            </view>
            <u-input
              :readonly="true"
              placeholder="输入决策部门"
              v-model="addForm.makerDept"
              border="none"
              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 class="label-tag"></view>
              经销商与客户历史成交信息
            </view>
            <u-input
              placeholder="输入经销商与客户历史成交信息"
              v-model="addForm.historicalTransactionInfo"
              border="none"
              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 class="label-tag"></view>
              经销商销售人员
            </view>
            <u-input
              placeholder="输入经销商销售人员"
              v-model="addForm.dealerSalesName"
              border="none"
              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 class="label-tag"></view>
              维护部门及人员
            </view>
            <u-input
              placeholder="输入维护部门及人员"
              v-model="addForm.accendant"
              border="none"
              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 class="label-tag"></view>
              是否采纳大数技术参数
            </view>
            <u-radio-group v-model="addForm.isAdoptDashoo" placement="row">
              <u-radio customStyle="margin-right:40rpx" label="是" name="10"></u-radio>
              <u-radio customStyle="margin-right:40rpx" label="否" name="20"></u-radio>
            </u-radio-group>
          </u-form-item>
        </view>
        <u-form-item prop="remark" customStyle="padding:40rpx 0 30rpx">
          <view class="form-label flex_l">
            <view class="label-tag"></view>
            备注原因
          </view>
          <u-textarea
            fontSize="26rpx"
            v-model="addForm.remark"
            placeholder="请输入备注原因"
            height="180"
            :count="true"
            maxlength="300"></u-textarea>
        </u-form-item>
      </u-form>
      <view class="save" @click="handleDowngrade">提交</view>
    </view>
    <!-- 技术支持时间 -->
    <u-datetime-picker
      v-if="showSupportDate"
      :show="showSupportDate"
      mode="datetime"
      v-model="addForm.technicalSupportTime"
      @cancel="showSupportDate = false"
      @confirm="pickSupportDate"></u-datetime-picker>
    <!-- 项目预算期限 -->
    <u-datetime-picker
      v-if="showBudgetDate"
      :show="showBudgetDate"
      mode="datetime"
      v-model="addForm.nboBudgetTime"
      @cancel="showBudgetDate = false"
      @confirm="pickBudgetDate"></u-datetime-picker>
    <!-- 采购时间 -->
    <u-datetime-picker
      v-if="showPurchasingDate"
      :show="showPurchasingDate"
      mode="datetime"
      v-model="addForm.purchasingTime"
      @cancel="showPurchasingDate = false"
      @confirm="pickPurchasingDate"></u-datetime-picker>
    <!-- 采购方式 -->
    <u-picker
      :show="showChasingWay"
      :columns="[purchasingWayOptions]"
      keyName="value"
      @cancel="showChasingWay = false"
      @confirm="pickModel"></u-picker>
    <!-- 选择经销商 -->
    <select-dealer ref="dealer" @close="closeDealer()"></select-dealer>
    <!-- 客户联系人 -->
    <customer-contact ref="contact" @close="closeContact()"></customer-contact>
    <u-notify ref="uNotify"></u-notify>
    <u-toast ref="uToast"></u-toast>
    <u-modal
      :show="showModal"
      content="确认进行项目升级？"
      :showCancelButton="true"
      @cancel="this.showModal = false"
      @confirm="this.handleDownApi()"></u-modal>
  </view>
</template>
<script>
  import projectApi from '../../api/project'
  import to from 'await-to-js'
  import SelectDealer from 'components/SelectDealer'
  import CustomerContact from '../../components/CustomerContact'
  export default {
    name: 'omsIndex',
    components: { SelectDealer, CustomerContact },
    data() {
      return {
        height: '',
        paddingTop: '',
        showSupportDate: false, //技术支持时间
        showBudgetDate: false, //项目预算时间
        showPurchasingDate: false, //采购时间
        showChasingWay: false,
        purchasingWayOptions: [],
        addForm: {
          nboType: '', //项目及别
          nboBudget: 0, //项目预算
          distributorName: '', //经销商
          distributorId: '', //经销商ID
          parentReceiver: '', //项目对接人
          technicalSupportName: '', //技术支持人员
          technicalSupportContent: null, //技术支持内容
          technicalSupportTime: '', //技术支持时间
          nboBudgetTime: this.parseTime(new Date(), '{y}-{m}-{d} {h}:{i}'), //项目预算时间
          capitalSource: '', //资金来源
          productSatisfaction: '', //产品方案满足情况
          purchasingWay: '', //采购方式id
          purchasingWayVal: '', //采购方式
          purchasingTime: this.parseTime(new Date(), '{y}-{m}-{d} {h}:{i}'), //采购时间
          makerId: '', //决策人
          makerName: '', //决策人
          makerDept: '', //决策部门
          historicalTransactionInfo: '', //输入经销商与客户历史成交信息
          dealerSalesName: '', //经销商销售人员
          accendant: '', //维护部门及人员
          isAdoptDashoo: '', //是否是大项目选择
          remark: '', //备注
          id: 0, //项目id
        },
        showModal: false,
        projectDetails: {},
        rules: {
          nboType: {
            type: 'string',
            required: true,
            message: '请选择项目级别',
            trigger: ['blur'],
          },
          technicalSupportContent: {
            type: 'string',
            required: true,
            message: '请输入技术支持内容',
            trigger: ['blur'],
          },
          nboBudget: {
            type: 'string',
            required: true,
            message: '请输入项目预算',
            trigger: ['blur'],
          },
          distributorName: {
            type: 'string',
            required: true,
            message: '请选择经销商',
            trigger: ['blur'],
          },
          remark: {
            type: 'string',
            required: true,
            message: '请输入备注内容',
            trigger: ['blur'],
          },
        },
      }
    },
    created() {
      const navData = uni.getMenuButtonBoundingClientRect()
      this.height = navData.height + 'px'
      this.paddingTop = navData.top + 'px'
    },
    onLoad(option) {
      console.log(option.id) //打印出上个页面传递的参数。
      this.addForm.id = parseInt(option.id)
    },
    onShow() {
      this.getDetails()
      this.getOptions()
    },
    methods: {
      getOptions() {
        Promise.all([this.getDicts('proj_purchasing_way')])
          .then(([purchasing]) => {
            this.purchasingWayOptions = purchasing.data.values || []
          })
          .catch((err) => console.log(err))
      },
      async getDetails() {
        const [err, res] = await to(projectApi.getDetail({ id: this.addForm.id }))
        if (err) return
        if (res.code == 200) {
          this.projectDetails = res.data
          this.addForm = Object.assign(this.addForm, this.projectDetails)
          this.addForm.nboType = ''
          this.addForm.technicalSupportName = ''
          this.addForm.technicalSupportContent = ''
          this.addForm.technicalSupportTime = this.parseTime(new Date(), '{y}-{m}-{d} {h}:{i}')
          this.addForm.nboBudgetTime = this.parseTime(new Date(), '{y}-{m}-{d} {h}:{i}')
          this.addForm.remark = ''
        }
      },
      // 选择采购方式
      pickModel(e) {
        this.addForm.purchasingWay = e.value[0].key
        this.addForm.purchasingWayVal = e.value[0].value
        this.showChasingWay = false
      },
      // 经销商
      closeDealer(dealer) {
        if (dealer) {
          console.log(dealer)
          this.addForm.distributorId = dealer.id
          this.addForm.distributorName = dealer.name
        }
      },
      selectContact() {
        if (!this.addForm.custId) {
          this.$refs.uNotify.show({
            top: this.height + this.paddingTop + 10,
            type: 'warning',
            message: '请先选择客户',
            duration: 1000 * 3,
          })
          return
        }
        this.$refs.contact.open(this.addForm.custId)
      },
      // 关闭选择客户联系人
      closeContact(user) {
        if (user) {
          console.log(user)
          this.addForm.makerId = user.id
          this.addForm.makerName = user.cuctName
          this.addForm.makerDept = user.dept
          // this.addForm.makerPost = user.postion
          // this.addForm.makerTelephone = user.telephone
        }
      },
      // 技术支持时间
      async pickSupportDate(e) {
        this.showSupportDate = false
        const timeFormat = uni.$u.timeFormat
        let timeValue = await timeFormat(e.value, 'yyyy-mm-dd hh:MM')
        this.addForm.technicalSupportTime = timeValue
        console.log(timeValue)
      },
      // 项目预算时间
      async pickBudgetDate(e) {
        this.showBudgetDate = false
        const timeFormat = uni.$u.timeFormat
        let timeValue = await timeFormat(e.value, 'yyyy-mm-dd hh:MM')
        this.addForm.nboBudgetTime = timeValue
        console.log(timeValue)
      },
      // 采购时间
      async pickPurchasingDate(e) {
        this.showPurchasingDate = false
        const timeFormat = uni.$u.timeFormat
        let timeValue = await timeFormat(e.value, 'yyyy-mm-dd hh:MM')
        this.addForm.purchasingTime = timeValue
        console.log(timeValue)
      },
      handleDowngrade() {
        this.$refs.addForm
          .validate()
          .then(async () => {
            this.showModal = true
          })
          .catch((err) => {
            console.log(err)
            this.$refs.uNotify.show({
              top: this.height + this.paddingTop + 10,
              type: 'warning',
              message: err[0].message,
              duration: 1000 * 3,
            })
          })
      },
      async handleDownApi() {
        let params = this.addForm
        params.nboBudget = Number(params.nboBudget)
        const [err, res] = await to(projectApi.upgrade(params))
        this.showModal = false
        if (err) return
        if (res && res.code == 200) {
          this.$refs.uToast.show({
            type: 'success',
            message: '提交成功',
            complete: () => {
              this.goBack()
            },
          })
        }
      },
      closeUser(user) {
        if (user) {
          console.log(user)
          this.addForm.userId = user.id
          this.addForm.userName = user.label
        }
      },
      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: rgba(62, 126, 248, 0.6);
          border-radius: 50%;
          margin-right: -4rpx;
        }
      }
      .save {
        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>