opms_frontend/src/views/proj/business/components/BusinessEdit.vue

<template>
  <el-dialog append-to-body :title="title" :visible.sync="dialogFormVisible" @close="close">
    <el-steps :active="activeSteps" align-center style="margin: -15px 0 15px 0">
      <el-step title="创建项目" />
      <el-step title="添加产品" />
      <el-step title="跟进日程" />
    </el-steps>

    <el-form ref="form" :model="form" :rules="rules">
      <el-row v-if="activeSteps === 1" :gutter="20">
        <el-col :span="12">
          <el-form-item label="项目名称" prop="nboName">
            <el-input v-model="form.nboName" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="关联客户" prop="custName">
            <el-input
              v-model="form.custName"
              :disabled="Boolean(custInfo.custName)"
              readonly
              @focus="handleSelectCustomer" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="获取日期" prop="obtainTime">
            <el-date-picker v-model="form.obtainTime" placeholder="选择日期" style="width: 100%" type="datetime" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="项目来源" prop="nboSource">
            <el-select v-model="form.nboSource" clearable placeholder="项目来源" style="width: 100%">
              <el-option v-for="dict in nboSourceOptions" :key="dict.key" :label="dict.value" :value="dict.key" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="主要联系人" prop="contactName">
            <el-input v-model="form.contactName" readonly @focus="handleSelectContact" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="职位" prop="contactPostion">
            <el-input v-model="form.contactPostion" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="联系电话" prop="contactTelephone">
            <el-input v-model="form.contactTelephone" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="销售工程师" prop="saleName">
            <el-input v-model="form.saleName" readonly @focus="handleSelectSale" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="销售模式" prop="salesModel">
            <el-select v-model="form.salesModel" clearable placeholder="销售模式" style="width: 100%">
              <el-option v-for="dict in salesModelOptions" :key="dict.key" :label="dict.value" :value="dict.key" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="经销商/代理商" prop="distributorName">
            <el-input
              v-model="form.distributorName"
              :disabled="form.salesModel === '10'"
              readonly
              @focus="handleSelectDistributor" />
          </el-form-item>
        </el-col>

        <el-col :span="24">
          <el-form-item label="备注信息" prop="remark">
            <el-input v-model="form.remark" placeholder="请输入备注信息" rows="5" show-word-limit type="textarea" />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row v-if="activeSteps === 2" :gutter="20">
        <el-col :span="24">
          <el-button size="mini" type="primary" @click="handleSelectProduct">添加产品</el-button>

          <product-table
            ref="productTable"
            :product-data="productData"
            @changeProductData="changeProductData"
            @delProductData="delProductData" />
        </el-col>
      </el-row>

      <el-row v-if="activeSteps === 3" :gutter="20">
        <el-col :span="12">
          <el-form-item label="跟进时间" prop="followTime">
            <el-date-picker v-model="form.followTime" placeholder="选择时间" style="width: 100%" type="datetime" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="负责人员" prop="followUserName">
            <el-input v-model="form.followUserName" readonly @focus="handleSelectFollowUser" />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="跟进内容" prop="followContent">
            <el-input
              v-model="form.followContent"
              placeholder="请输入跟进内容"
              rows="5"
              show-word-limit
              type="textarea" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button v-if="activeSteps !== 1" type="primary" @click="activeSteps--">上一步</el-button>
      <el-button v-if="activeSteps !== 3" type="primary" @click="nextStep">下一步</el-button>
      <el-button v-if="activeSteps === 3" type="primary" @click="save">提 交</el-button>
    </div>
    <!-- 选择客户弹窗 -->
    <select-customer ref="selectCustomer" @save="selectCustomer" />
    <!-- 选择客户联系人弹窗 -->
    <select-contact
      ref="selectContact"
      :default-customer="customerInfo"
      :query-params="queryContact"
      @save="selectContact" />
    <!-- 选择销售工程师弹窗 -->
    <select-user ref="selectSales" :query-params="{ roles: ['Sales', 'SalesManager'] }" @save="selectSales" />
    <!-- 选择经销商弹窗 -->
    <select-distributor ref="selectDistributor" @save="selectDistributor" />
    <!-- 选择产品弹窗 -->
    <select-product ref="selectProduct" multiple @save="selectProduct" />
    <!-- 选择跟进负责人弹窗 -->
    <select-user ref="selectFollowUser" @save="selectFollowUser" />
  </el-dialog>
</template>

<script>
  import businessApi from '@/api/proj/business'
  import ProductTable from './ProductTable'
  import SelectContact from '@/components/select/SelectCustomerContact'
  import SelectCustomer from '@/components/select/SelectCustomer'
  import SelectUser from '@/components/select/SelectUser'
  import SelectDistributor from '@/components/select/SelectDistributor'
  import SelectProduct from '@/components/select/SelectProduct'

  export default {
    name: 'BusinessEdit',
    components: { ProductTable, SelectContact, SelectProduct, SelectDistributor, SelectCustomer, SelectUser },
    props: {
      // 客户信息{ custId: id, custName: custName}
      custInfo: {
        type: Object,
        default() {
          return {}
        },
      },
    },
    data() {
      const validateDistributor = (rule, value, callback) => {
        if ('' === value && this.form.salesModel !== '10')
          callback(new Error(this.translateTitle('请选择经销商/代理商')))
        else callback()
      }
      return {
        activeSteps: 1,
        form: {
          nboName: undefined,
          custId: undefined,
          custName: undefined,
          obtainTime: undefined,
          nboSource: undefined,
          contactId: undefined,
          contactName: undefined,
          contactPostion: undefined,
          contactTelephone: undefined,
          saleId: undefined,
          saleName: undefined,
          distributorId: undefined,
          distributorName: undefined,
          remark: undefined,
          products: undefined,

          // 跟进
          followTime: undefined,
          followUserId: undefined,
          followUserName: undefined,
          followContent: undefined,
        },
        rules: {
          nboName: [{ required: true, trigger: ['blur', 'change'], message: '请输入项目名称' }],
          custName: [{ required: true, trigger: ['blur', 'change'], message: '请选择关联客户' }],
          nboSource: [{ required: true, trigger: ['blur', 'change'], message: '请选择项目来源' }],
          contactName: [{ required: true, trigger: ['blur', 'change'], message: '请选择主要联系人' }],
          saleName: [{ required: true, trigger: ['blur', 'change'], message: '请选择销售工程师' }],
          salesModel: [{ required: true, trigger: ['blur', 'change'], message: '请选择销售模式' }],
          distributorName: [
            { validator: validateDistributor, trigger: ['blur', 'change'], message: '请选择经销商/代理商' },
          ],
          // 跟进
          followTime: [{ required: true, trigger: ['blur', 'change'], message: '请输入跟进时间' }],
          followContent: [{ required: true, trigger: ['blur', 'change'], message: '请输入跟进内容' }],
        },
        title: '',
        dialogFormVisible: false,
        nboSourceOptions: [],
        salesModelOptions: [],
        queryContact: {},
        customerInfo: {},
        productData: [],
      }
    },
    watch: {
      custInfo: function (val) {
        this.form.custId = val.custId
        this.queryContact.custId = val.custId
        this.form.custName = val.custName
        this.customerInfo = val
      },
    },
    created() {},
    mounted() {
      this.getDicts('proj_nbo_source').then((response) => {
        this.nboSourceOptions = response.data.values || []
      })
      this.getDicts('proj_sales_model').then((response) => {
        this.salesModelOptions = response.data.values || []
      })
    },
    methods: {
      nextStep() {
        if (this.activeSteps === 1) {
          this.$refs['form'].validate(async (valid) => {
            if (valid) {
              this.activeSteps++
            }
          })
        } else if (this.activeSteps === 2) {
          this.form.products = this.productData
          this.activeSteps++
        }
      },
      handleSelectCustomer() {
        this.$refs.selectCustomer.open()
      },
      handleSelectContact() {
        if (!this.queryContact.custId) {
          this.$message.warning('请先选择客户')
          return
        }
        this.$refs.selectContact.open()
      },
      handleSelectSale() {
        this.$refs.selectSales.open()
      },
      handleSelectDistributor() {
        this.$refs.selectDistributor.open()
      },
      handleSelectProduct() {
        this.$refs.selectProduct.open()
      },
      handleSelectFollowUser() {
        this.$refs.selectFollowUser.open()
      },
      selectCustomer(val) {
        if (val && val.length > 0) {
          this.queryContact.custId = val[0].id
          this.customerInfo = {
            custId: val[0].id,
            custName: val[0].custName,
          }
          this.form.custId = val[0].id
          this.form.custName = val.map((item) => item.custName).join()
        }
      },
      selectContact(val) {
        if (val && val.length > 0) {
          this.form.contactId = val[0].id
          this.form.contactName = val.map((item) => item.cuctName).join()
          this.form.contactPostion = val.map((item) => item.postion).join()
          this.form.contactTelephone = val.map((item) => item.telephone).join()
        }
      },
      selectSales(val) {
        if (val && val.length > 0) {
          this.form.saleId = val[0].id
          this.form.saleName = val.map((item) => item.userName).join()
        }
      },
      selectDistributor(val) {
        if (val && val.length > 0) {
          this.form.distributorId = val[0].id
          this.form.distributorName = val.map((item) => item.distName).join()
        }
      },
      selectFollowUser(val) {
        this.form.followUserName = val.map((item) => item.userName).join()
      },
      selectProduct(data) {
        let projData = data.map((item) => ({
          prodId: item.id,
          prodCode: item.prodCode,
          prodName: item.prodName,
          prodClass: item.prodClass,
          guidPrice: item.guidPrice,
          prodPrice: item.marketPrice,
          prodNum: 1,
        }))
        this.productData.push(...projData)
        this.productData = this.removeDuplicateObj(this.productData)
      },
      // 数组对象去重
      removeDuplicateObj(arr) {
        let obj = {}
        arr = arr.reduce((newArr, next) => {
          obj[next.prodId] ? '' : (obj[next.prodId] = true && newArr.push(next))
          return newArr
        }, [])
        return arr
      },
      // 修改产品列表数据
      changeProductData(data) {
        this.productData = this.productData.map((item) => {
          return item.prodId === data.prodId ? data : item
        })
      },
      delProductData(data) {
        this.productData = this.productData.filter((item) => item.prodId !== data.prodId)
      },
      async getProductData(busId) {
        const { data } = await businessApi.getProductByBusinessId({ id: busId })
        this.productData = data
      },
      showEdit(row) {
        this.activeSteps = 1
        if (!row) {
          this.title = '添加'
        } else {
          this.title = '编辑'
          this.form = Object.assign({}, row)
          this.getProductData(row.id)
        }
        this.dialogFormVisible = true
      },
      close() {
        this.$refs['form'].resetFields()
        this.form = this.$options.data().form
        this.dialogFormVisible = false
      },
      save() {
        this.$refs['form'].validate(async (valid) => {
          if (valid) {
            let res
            if (this.form.id) {
              res = await businessApi.doEdit(this.form)
            } else {
              res = await businessApi.doAdd(this.form)
            }
            this.$baseMessage(res.msg, 'success')
            this.$emit('fetch-data')
            this.close()
          } else {
            return false
          }
        })
      },
    },
  }
</script>