supply-front/src/views/basic_data/partya/partyaForm.vue

<template>
  <div>
    <h3>甲方客户信息</h3>
    <el-divider />
    <el-form :disabled="isDetail">
      <div class="diy-table-1">
        <el-row :gutter="0">
          <el-col :xs="24" :sm="8" :lg="8" class="item">
            <div class="label">*甲方客户名称</div>
            <div class="value">
              <el-input v-model="formData.name" placeholder="请输入甲方客户名称" size="mini" clearable />
            </div>
          </el-col>
          <el-col :xs="24" :sm="8" :lg="8" class="item">
            <div class="label">*上级客户</div>
            <div class="value">
              <el-input v-model="formData.parentName" placeholder="请输入上级客户" size="mini" clearable />
            </div>
          </el-col>
          <el-col :xs="24" :sm="8" :lg="8" class="item">
            <div class="label">*客户规模</div>
            <div class="value">
              <el-select
                v-model="formData.scale"
                placeholder="请选择客户规模"
                clearable
                filterable
                class="my-width"
              >
                <el-option v-for="item in scaleTypeList" :key="item.value" :label="item.label" :value="item.label" />
              </el-select>
            </div>
          </el-col>
          <el-col :xs="24" :sm="8" :lg="8" class="item">
            <div class="label">*客户类型</div>
            <div class="value">
              <el-select
                v-model="formData.type"
                placeholder="请选择客户类型"
                clearable
                filterable
                class="my-width"
              >
                <el-option v-for="item in typeList" :key="item.value" :label="item.label" :value="item.label" />
              </el-select>
            </div>
          </el-col>
          <el-col :xs="24" :sm="8" :lg="8" class="item">
            <div class="label">*行业大类</div>
            <div class="value">
              <el-select
                v-model="formData.tradeParentId"
                placeholder="请选择行业大类"
                clearable
                filterable
                class="my-width"
                @change="handleTradeParent"
              >
                <el-option v-for="item in tradeParentList" :key="item.id" :label="item.name" :value="item.id" />
              </el-select>
            </div>
          </el-col>
          <el-col :xs="24" :sm="8" :lg="8" class="item">
            <div class="label">*行业小类</div>
            <div class="value">
              <el-select v-model="formData.tradeId" placeholder="请选择行业小类" clearable filterable class="my-width" @change="handleTrade">
                <el-option v-for="item in tradeList" :key="item.id" :label="item.name" :value="item.id" />
              </el-select>
            </div>
          </el-col>
          <el-col :xs="24" :sm="8" :lg="8" class="item">
            <div class="label">*客户地址</div>
            <div class="value">
              <el-select
                v-model="formData.provinceRegionId"
                placeholder="请选择省"
                class="my-width"
                @change="changeProvince"
              >
                <el-option v-for="item in provinceList" :key="item.id" :label="item.name" :value="item.id" />
              </el-select>
              <el-select v-model="formData.cityRegionId" placeholder="请选择市" class="my-width" @change="changeCity">
                <el-option v-for="item in cityList" :key="item.id" :label="item.name" :value="item.id" />
              </el-select>
              <el-select v-model="formData.areaId" placeholder="请选择区" class="my-width">
                <el-option v-for="item in areaList" :key="item.id" :label="item.name" :value="item.id" />
              </el-select>
            <!-- <el-select v-model="formData.streetId" placeholder="请选择街道" class="my-width" @change="changeStreet">
              <el-option v-for="item in streetList" :key="item.id" :label="item.name" :value="item.id" />
            </el-select> -->
            </div>
          </el-col>
          <el-col :xs="24" :sm="16" :lg="16" class="item">
            <div class="label">*详细地址</div>
            <div class="value">
              <el-input v-model="formData.address" placeholder="请输入详细地址" size="mini" clearable />
            </div>
          </el-col>
          <el-col :xs="24" :sm="8" :lg="8" class="item">
            <div class="label">*客户关系</div>
            <div class="value">
              <el-select v-model="formData.rela" placeholder="请选择客户关系" clearable filterable class="my-width">
                <el-option v-for="item in relaTypeList" :key="item.value" :label="item.label" :value="item.label" />
              </el-select>
            </div>
          </el-col>
          <el-col :xs="24" :sm="8" :lg="8" class="item">
            <div class="label">*客户来源</div>
            <div class="value">
              <el-select v-model="formData.resource" placeholder="请选择客户来源" clearable filterable class="my-width">
                <el-option v-for="item in resourceTypeList" :key="item.value" :label="item.label" :value="item.label" />
              </el-select>
            </div>
          </el-col>
          <el-col :xs="24" :sm="8" :lg="8" class="item">
            <div class="label" />
            <div class="value" />
          </el-col>
        </el-row>
      </div>
      <h3>联系人信息</h3>
      <el-divider />
      <div class="diy-table-1">
        <el-row :gutter="0">
          <el-col :xs="24" :sm="8" :lg="8" class="item">
            <div class="label">*联系人名称</div>
            <div class="value">
              <el-input v-model="formData.linkName" placeholder="请输入联系人名称" size="mini" clearable />
            </div>
          </el-col>
          <el-col :xs="24" :sm="8" :lg="8" class="item">
            <div class="label">联系人职务</div>
            <div class="value">
              <el-input v-model="formData.linkJob" placeholder="请输入联系人职务" size="mini" clearable />
            </div>
          </el-col>
          <el-col :xs="24" :sm="8" :lg="8" class="item">
            <div class="label">联系人部门</div>
            <div class="value">
              <el-input v-model="formData.linkDepartment" placeholder="请输入联系人部门" size="mini" clearable />
            </div>
          </el-col>
          <el-col :xs="24" :sm="8" :lg="8" class="item">
            <div class="label">微信</div>
            <div class="value"><el-input v-model="formData.weXin" placeholder="请输入微信" size="mini" clearable /></div>
          </el-col>
          <el-col :xs="24" :sm="8" :lg="8" class="item">
            <div class="label">联系人角色</div>
            <div class="value">
              <el-input v-model="formData.linkRole" placeholder="请输入联系人角色" size="mini" clearable />
            </div>
          </el-col>
          <el-col :xs="24" :sm="8" :lg="8" class="item">
            <div class="label">邮箱</div>
            <div class="value">
              <el-input v-model="formData.email" type="email" placeholder="请输入邮箱" size="mini" clearable />
            </div>
          </el-col>
          <el-col :xs="24" :sm="8" :lg="8" class="item">
            <div class="label">QQ</div>
            <div class="value"><el-input v-model="formData.qq" placeholder="请输入QQ" size="mini" clearable /></div>
          </el-col>
          <el-col :xs="24" :sm="8" :lg="8" class="item">
            <div class="label" />
            <div class="value" />
          </el-col>
          <el-col :xs="24" :sm="8" :lg="8" class="item">
            <div class="label" />
            <div class="value" />
          </el-col>
        </el-row>
      </div>
    </el-form>

    <div v-if="!isDetail" style="margin: 20px 0">
      <el-button type="primary" size="small" @click="onSbumit">保存</el-button>
      <el-button size="small" @click="onReset">重置</el-button>
    </div>
  </div>
</template>

<script>
import { findElem } from '@/utils/util'
import { getRegion } from '@/api/sales'
import { getTradeConfigList } from '@/api/basic_data/sectorAllocation'
import {
  editFirstPartyCustomerManagement,
  addFirstPartyCustomerManagement,
  getFirstPartyCustomerManagementDetail
} from '@/api/basic_data/partya'
export default {
  props: {
    detailId: {
      type: String,
      default: ''
    },
    isDetail: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      formData: {
        address: '',
        areaId: '',
        cityRegionId: '',
        email: '',
        linkDepartment: '',
        linkJob: '',
        linkName: '',
        linkRole: '',
        name: '',
        parentName: '',
        provinceRegionId: '',
        qq: '',
        rela: '',
        resource: '',
        scale: '',
        tradeId: '',
        tradeParentId: '',
        type: '',
        weXin: ''
      },
      provinceList: [],
      cityList: [],
      areaList: [],
      streetList: [],
      typeList: [
        {
          label: '客户',
          value: 1
        },
        {
          label: '供应商',
          value: 2
        },
        {
          label: '竞争对手',
          value: 3
        },
        {
          label: '投资者',
          value: 4
        },
        {
          label: '关系伙伴',
          value: 5
        },
        {
          label: '新闻界',
          value: 6
        },
        {
          label: '设计院',
          value: 7
        }, {
          label: '工程商',
          value: 8
        }, {
          label: '直签工程商',
          value: 9
        }
      ],
      scaleTypeList: [
        {
          label: '战略客户',
          value: 1
        }, {
          label: '中央、国企',
          value: 2
        }, {
          label: '省部级科研院所',
          value: 3
        }, {
          label: '地市级以上会展及文体场馆',
          value: 4
        }, {
          label: '地市级以上政府机构',
          value: 5
        }, {
          label: '博物馆',
          value: 6
        }, {
          label: '三甲医院',
          value: 7
        }, {
          label: '985/211/双一流大学及附属学习哦啊',
          value: 8
        }
      ],
      relaTypeList: [
        {
          label: '战略联盟',
          value: 1
        }, {
          label: '合作伙伴',
          value: 2
        }, {
          label: '供应关系',
          value: 3
        }, {
          label: '买卖关系',
          value: 4
        }
      ],
      resourceTypeList: [
        {
          label: '客户推荐',
          value: 1
        },
        {
          label: '供应商推荐',
          value: 2
        },
        {
          label: '会展',
          value: 3
        },
        {
          label: '外出拜访',
          value: 4
        },
        {
          label: '招投标网站',
          value: 5
        },
        {
          label: '设计院推广',
          value: 6
        },
        {
          label: '其他',
          value: 7
        }
      ],
      tradeParentList: [],
      tradeList: []
    }
  },
  created() {
    if (this.detailId) {
      this.getDetail()
    }
    this.getRegion()
    this.getTradeConfigList()
  },
  methods: {
    // 获取省市区街道
    getRegion(level = 0, id = 0) {
      getRegion({ pid: id }).then(res => {
        if (level === 0) {
          this.provinceList = res.data
        } else if (level === 1) {
          this.cityList = res.data
        } else if (level === 2) {
          this.areaList = res.data
        } else if (level === 3) {
          this.streetList = res.data
        }
      })
    },
    handleArea(value, type) {
      this.formData[type] = this[type + 'List'].find(k => k.id === value).name
    },
    // 切换省
    changeProvince(value) {
      this.formData.cityRegionId = ''
      this.formData.areaId = ''
      this.formData.streetId = ''
      this.cityList = []
      this.areaList = []
      this.streetList = []
      this.getRegion(1, value)
      this.handleArea(value, 'province')
    },

    // 切换市
    changeCity(value) {
      this.formData.areaId = ''
      this.formData.streetId = ''
      this.areaList = []
      this.streetList = []
      this.getRegion(2, value)
      this.handleArea(value, 'city')
    },

    // 切换区
    changeArea(value) {
      this.areaValue = value
      this.formData.streetId = ''
      this.streetList = []
      this.getRegion(3, value)
      this.handleArea(value, 'area')
    },

    // 切换街道
    changeStreet(value) {
      this.getRegion(3, this.areaValue)
      this.handleArea(value, 'street')
    },

    // 初始化省市区街道
    initRegion(level, item, id = 0) {
      const { province, city, area, street } = item
      let nextId = null
      getRegion({ pid: id }).then(res => {
        if (level === 0) {
          this.provinceList = res.data
          nextId = this.formData.provinceRegionId = this.provinceList[findElem(this.provinceList, 'name', province)].id
        } else if (level === 1) {
          this.cityList = res.data
          nextId = this.formData.cityRegionId = this.cityList[findElem(this.cityList, 'name', city)].id
        } else if (level === 2) {
          this.areaList = res.data
          nextId = this.formData.areaId = this.areaList[findElem(this.areaList, 'name', area)].id
        } else if (level === 3) {
          this.streetList = res.data
          nextId = this.formData.streetId = this.streetList[findElem(this.streetList, 'name', street)].id
        }
        if (level < 3) {
          level = level + 1
          this.initRegion(level, item, nextId)
        }
      })
    },
    handleTradeParent(e) {
      if (e) {
        const item = this.tradeParentList.find(k => k.id === e)
        this.formData.tradeParentName = item.name
        this.tradeList = item.childList
        return
      }
      this.formData.tradeId = ''
    },
    handleTrade(e) {
      if (e) {
        const item = this.tradeList.find(k => k.id === e)
        this.formData.tradeName = item.name
      } else {
        this.formData.tradeId = ''
        this.formData.tradeName = ''
      }
    },
    getTradeConfigList(parentId = '') {
      getTradeConfigList({
        pageNum: 1,
        pageSize: -1,
        parentId: parentId
      }).then(res => {
        if (parentId) {
          this.tradeList = res.data.records
          return
        }
        this.tradeParentList = res.data
        if (this.detailId) {
          const item = this.tradeParentList.find(k => k.id === this.formData.tradeParentId)
          console.log(item, 999)
          if (item.childList && item.childList.length) {
            this.tradeList = item.childList
          }
        }
      })
    },
    getDetail() {
      getFirstPartyCustomerManagementDetail({ id: this.detailId }).then(res => {
        this.formData = {
          ...res.data
        }

        this.getRegion(1, this.formData.provinceRegionId)
        this.getRegion(2, this.formData.cityRegionId)
      })
    },
    onReset() {
      this.formData = {
        address: '',
        areaId: '',
        cityRegionId: '',
        email: '',
        linkDepartment: '',
        linkJob: '',
        linkName: '',
        linkRole: '',
        name: '',
        parentName: '',
        provinceRegionId: '',
        qq: '',
        rela: '',
        resource: '',
        scale: '',
        tradeId: '',
        tradeParentId: '',
        type: '',
        weXin: ''
      }
    },
    onSbumit() {
      const {
        address,
        areaId,
        cityRegionId,
        linkName,
        name,
        parentName,
        provinceRegionId,
        rela,
        resource,
        scale,
        tradeId,
        tradeParentId,
        type
      } = this.formData
      if (!name) {
        this.$errorMsg('甲方客户名称不能为空')
        return
      }
      if (!parentName) {
        this.$errorMsg('上级客户称不能为空')
        return
      }
      if (!scale) {
        this.$errorMsg('客户规模不能为空')
        return
      }
      if (!type) {
        this.$errorMsg('客户类型不能为空')
        return
      }
      if (!tradeParentId) {
        this.$errorMsg('行业大类不能为空')
        return
      }
      if (!tradeId) {
        this.$errorMsg('行业小类不能为空')
        return
      }
      if (!cityRegionId || !areaId || !provinceRegionId) {
        this.$errorMsg('客户地址不能为空')
        return
      }
      if (!address) {
        this.$errorMsg('详细地址称不能为空')
        return
      }
      if (!rela) {
        this.$errorMsg('客户关系不能为空')
        return
      }
      if (!resource) {
        this.$errorMsg('客户来源不能为空')
        return
      }
      if (!linkName) {
        this.$errorMsg('联系人名称不能为空')
        return
      }
      const params = {
        ...this.formData,
        provinceRegionId: '' + this.formData.provinceRegionId,
        areaId: '' + this.formData.areaId,
        cityRegionId: '' + this.formData.cityRegionId

      }
      if (this.detailId) {
        editFirstPartyCustomerManagement(params).then(res => {
          this.$successMsg('编辑成功')
          this.$emit('updateList')
        })
      } else {
        addFirstPartyCustomerManagement(params).then(res => {
          this.$successMsg('新增成功')
          this.$emit('updateList')
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.diy-table-1 .item .label {
  width: 150px;
}
::v-deep .el-radio {
  margin-right: 120px;
}
.flex-box {
  display: flex;
  align-items: center;
  margin: 5px 20px;
  &-title {
    width: 100px;
  }
}
::v-deep .my-input > input {
  padding-left: 10px !important;
  border: 1px solid #dcdfe6 !important;
}
.mg-b {
  margin: 10px 0;
}
.my-width {
  width: 100%;
}
</style>