supply-front/src/views/commercialEngineering/components/base.vue

<!-- eslint-disable vue/valid-v-on -->
<template>
  <div>
    <h3 class="title">
      <div>{{ title }}</div>
      <div class="title-right">格力商用空调登录表提示：带*的为必填项</div>
    </h3>
    <el-divider />
    <div class="diy-table-1">
      <el-row :gutter="0">
        <el-col v-if="['cross'].includes(pageType)" :xs="24" :sm="24" :lg="24" class="item">
          <div class="label">项目性质*：</div>
          <div class="value">
            <el-radio-group v-model="formData.orderType" style="width: 100%">
              <el-radio
                v-for="item in [
                  { label: '工装', value: 'WORK' },
                  { label: '家装', value: 'HOME' }
                ]"
                :key="item.value"
                :label="item.value"
              >
                {{ item.label }}
              </el-radio>
            </el-radio-group>
          </div>
        </el-col>
        <el-col :xs="24" :sm="12" :lg="12" class="item">
          <div class="label">销售公司名称：</div>
          <div class="value">
            <el-input v-model="formData.salesCompanyName" disabled placeholder="请填写" size="mini" clearable />
          </div>
        </el-col>
        <el-col :xs="24" :sm="12" :lg="12" class="item">
          <div class="label">{{ ['cross'].includes(pageType) ? '业务' : '项目' }}所在区域*：</div>
          <div class="value">
            <el-select v-model="formData.projectArea" placeholder="请选择" clearable filterable>
              <el-option
                v-for="item in commonData.dict['TRADE_PROJECT_AREA']"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </div>
        </el-col>
        <el-col :xs="24" :sm="12" :lg="12" class="item">
          <div class="label">跟进人*：</div>
          <div class="value">
            <el-select v-model="formData.serviceId" placeholder="请选择" clearable filterable @change="handleService">
              <el-option
                v-for="item in commonData.salesmanList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </div>
        </el-col>
        <el-col v-if="['frock', 'cross'].includes(pageType) && formData.orderType === 'WORK'" :xs="24" :sm="12" :lg="12" class="item">
          <div class="label">甲方名称*：</div>
          <div class="value">
            <el-select v-model="formData.partyAId" placeholder="请选择" clearable filterable @change="handlePartyA">
              <el-option
                v-for="item in commonData.PartyAList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </div>
        </el-col>
        <el-col v-else :xs="24" :sm="12" :lg="12" class="item">
          <div class="label" />
          <div class="value" />
        </el-col>
        <el-col :xs="24" :sm="12" :lg="8" class="item">
          <div class="label">经销商*：</div>
          <div class="value">
            <el-select v-model="formData.customerId" placeholder="请选择" clearable filterable @change="handleCustomer">
              <el-option
                v-for="item in commonData.customerList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </div>
        </el-col>
        <el-col :xs="24" :sm="12" :lg="8" class="item">
          <div class="label">经销商联系人：</div>
          <div class="value">
            <el-input v-model="formData.customerLinkName" placeholder="请填写" size="mini" clearable />
          </div>
        </el-col>
        <el-col :xs="24" :sm="12" :lg="8" class="item">
          <div class="label">经销商联系电话：</div>
          <div class="value">
            <el-input v-model="formData.customerLinkMobile" placeholder="请填写" size="mini" clearable />
          </div>
        </el-col>
        <el-col :xs="24" :sm="12" :lg="8" class="item">
          <div class="label">经销商办公地址：</div>
          <div class="value">
            <el-input v-model="formData.customerAddress" placeholder="请填写" size="mini" clearable />
          </div>
        </el-col>
        <el-col :xs="24" :sm="12" :lg="8" class="item">
          <div class="label">跟进经销商*：</div>
          <div class="value">
            <el-input v-model="formData.followCustomer" placeholder="请填写" size="mini" clearable />
          </div>
        </el-col>
        <el-col :xs="24" :sm="12" :lg="8" class="item">
          <div class="label">跟进经销商电话*：</div>
          <div class="value">
            <el-input v-model="formData.followCustomerMobile" placeholder="请填写" size="mini" clearable />
          </div>
        </el-col>
        <el-col
          v-if="['frock', 'cross'].includes(pageType) && formData.orderType !== 'HOME'"
          :xs="24"
          :sm="24"
          :lg="8"
          class="item"
        >
          <div class="label">工程项目名称*：</div>
          <div class="value">
            <el-input v-model="formData.projectName" placeholder="请填写" size="mini" clearable />
          </div>
        </el-col>
        <el-col
          :xs="24"
          :sm="12"
          :lg="['home'].includes(pageType) || formData.orderType === 'HOME' ? 12 : 8"
          class="item"
        >
          <div class="label">工程联系人*：</div>
          <div class="value">
            <el-input v-model="formData.enginLinkName" placeholder="请填写" size="mini" clearable />
          </div>
        </el-col>
        <el-col
          :xs="24"
          :sm="12"
          :lg="['home'].includes(pageType) || formData.orderType === 'HOME' ? 12 : 8"
          class="item"
        >
          <div class="label">电话*：</div>
          <div class="value">
            <el-input v-model="formData.enginLinkMobile" placeholder="请填写" size="mini" clearable />
          </div>
        </el-col>
        <el-col
          v-if="['home'].includes(pageType) || formData.orderType === 'HOME'"
          :xs="24"
          :sm="24"
          :lg="24"
          class="item"
        >
          <div class="label" style="height: auto">工程项目名称*：</div>
          <div class="value my-center" style="height: 100%">
            <el-radio-group v-model="formData.homeProjectNameRadio">
              <el-radio label="AREA">
                <el-input
                  v-model="formData.homeProjectNameArea"
                  class="my-width"
                  placeholder="请填写"
                  size="mini"
                  clearable
                />小区
                <el-input
                  v-model="formData.homeProjectNameSeat"
                  class="my-width"
                  placeholder="请填写"
                  size="mini"
                  clearable
                />座
                <el-input
                  v-model="formData.homeProjectNameNumber"
                  class="my-width"
                  placeholder="请填写"
                  size="mini"
                  clearable
                />号
              </el-radio>
              <el-radio label="SELF">
                <el-input
                  v-model="formData.homeProjectNameArea2"
                  class="my-width"
                  placeholder="请填写"
                  size="mini"
                  clearable
                />（业主名称）自建房
              </el-radio>
              <el-radio label="VILLA">
                <el-input
                  v-model="formData.homeProjectNameArea3"
                  class="my-width"
                  placeholder="请填写"
                  size="mini"
                  clearable
                />小区
                <el-input
                  v-model="formData.homeProjectNameNumber3"
                  class="my-width"
                  placeholder="请填写"
                  size="mini"
                  clearable
                />号别墅
              </el-radio>
            </el-radio-group>
          </div>
        </el-col>
        <el-col :xs="24" :sm="24" :lg="24" class="item">
          <div class="label">工程（建筑）地址*：</div>
          <div class="value">
            <el-select v-model="formData.provinceId" 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.cityId" 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" @change="changeArea">
              <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="24" :lg="24" class="item">
          <div class="label">详细地址*：</div>
          <div class="value">
            <el-input v-model="formData.address" placeholder="请填写" size="mini" clearable />
            <geographicalPosi v-if="module !== 'detail'" :form-data="formData" @selectPosi="handleSelectPosi" />
          </div>
        </el-col>
        <template v-if="isTradeExaminer">
          <el-col v-if="module !== 'add'" :xs="24" :sm="24" :lg="24" class="item" style="height: 400px">
            <div class="label" style="height: auto">地图位置</div>
            <div class="value" style="height: auto; padding: 0">
              <zj-amap-polygon
                eid="bMap"
                :zoom="zoom"
                :center="center"
                :markers="markers"
                :electronic-fence="electronicFence"
                @getPolygons="getPolygons"
              />
            </div>
          </el-col>
        </template>
        <el-col :xs="24" :sm="24" :lg="24" class="item">
          <div class="label">项目类别*：</div>
          <div class="value">
            <el-radio-group v-model="formData.projectCategory">
              <el-radio v-for="item in commonData.dict['TRADE_LOGIN_CATEGORY']" :key="item.value" :label="item.value">
                {{ item.label }}
              </el-radio>
            </el-radio-group>
          </div>
        </el-col>
        <el-col :xs="24" :sm="12" :lg="12" class="item">
          <div class="label">图纸上传：</div>
          <div class="value" style="justify-content: flex-end">
            <FileUpload :file-list="formData.fileList" size="mini" :limit="1" class="file" />
            <!-- <el-input v-model="formData.drawUpload"  size="mini" clearable /> -->
          </div>
        </el-col>
        <el-col :xs="24" :sm="12" :lg="12" class="item">
          <div class="label">类型</div>
          <div class="value">
            <el-radio-group v-model="formData.type">
              <el-radio v-for="item in commonData.dict['TRADE_LOGIN_TYPE']" :key="item.value" :label="item.value">
                {{ item.label }}
              </el-radio>
            </el-radio-group>
          </div>
        </el-col>
        <el-col :xs="24" :sm="12" :lg="12" class="item">
          <div class="label">建筑面积㎡*：</div>
          <div class="value">
            <el-input v-model="formData.extent" placeholder="请填写" size="mini" clearable />
          </div>
        </el-col>
        <el-col :xs="24" :sm="12" :lg="12" class="item">
          <div class="label">空调使用面积㎡*：</div>
          <div class="value">
            <el-input v-model="formData.useExtent" placeholder="请填写" size="mini" clearable />
          </div>
        </el-col>
        <el-col :xs="24" :sm="12" :lg="12" class="item">
          <div class="label">项目所在行业分类*：</div>
          <div class="value">
            <el-select
              v-model="formData.tradeParentId"
              placeholder="请选择"
              clearable
              filterable
              @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="12" :lg="12" class="item">
          <div class="label">行业细分*：</div>
          <div class="value">
            <el-select v-model="formData.tradeId" placeholder="请选择" clearable filterable @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 v-if="['frock', 'cross'].includes(pageType)" :xs="24" :sm="24" :lg="24" class="item">
          <div class="label">项目性质*：</div>
          <div class="value">
            {{ pageType === 'frock' ? '工程': '家装' }}
          </div>
        </el-col>
        <el-col :xs="24" :sm="24" :lg="24" class="item">
          <div class="label">机组类型*：</div>
          <div class="value">
            <el-select v-model="formData.machineType" placeholder="请选择" clearable filterable>
              <el-option
                v-for="item in commonData.dict['MACHINE_TYPE']"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </div>
        </el-col>
        <el-col :xs="24" :sm="24" :lg="24" class="item">
          <div class="label">成功机率*：</div>
          <div class="value">
            <el-radio-group v-model="formData.successRate">
              <el-radio v-for="item in commonData.dict['SUCCESS_RATE']" :key="item.value" :label="item.value">
                {{ item.label }}
              </el-radio>
            </el-radio-group>
          </div>
        </el-col>
        <el-col :xs="24" :sm="12" :lg="12" class="item">
          <div class="label">预计签定合同日期*：</div>
          <div class="value">
            <el-date-picker
              v-model="formData.preSignDate"
              class="date"
              value-format="yyyy-MM-dd HH:mm:ss"
              default-time="00:00:00"
              style="width: 100%"
              placeholder="选择日期"
            />
          </div>
        </el-col>
        <el-col :xs="24" :sm="12" :lg="12" class="item">
          <div class="label">预计设备金额*：</div>
          <div class="value">
            <el-input v-model="formData.preDeviceAmount" placeholder="请填写" size="mini" clearable />万
          </div>
        </el-col>
        <el-col :xs="24" :sm="24" :lg="24" class="item">
          <div class="label">工程跟进状态*：</div>
          <div class="value">
            <el-radio-group v-model="formData.status">
              <el-radio v-for="item in commonData.dict['FOLLOW_STATUS']" :key="item.value" :label="item.value">
                {{ item.label }}
              </el-radio>
            </el-radio-group>
          </div>
        </el-col>
        <el-col :xs="24" :sm="24" :lg="24" class="item">
          <div class="label" style="height: auto">备注：</div>
          <div class="value" style="height: 100%">
            <el-input
              v-model="formData.remark"
              style="margin: 5px 0"
              type="textarea"
              :rows="4"
              placeholder="请输入备注"
            />
          </div>
        </el-col>
        <el-col :xs="24" :sm="24" :lg="24" class="item">
          <div class="label" style="height: auto">工程概况及此工程相关的社会关系以及其他相关信息：</div>
          <div class="value" style="height: 100%">
            <el-input
              v-model="formData.otherInfo"
              style="margin: 5px 0"
              type="textarea"
              :rows="3"
              placeholder="请输入内容"
            />
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import { findElem } from '@/utils/util'
import { getRegion } from '@/api/sales'
import { getTradeConfigList } from '@/api/basic_data/sectorAllocation'
import GeographicalPosi from './geographicalPosi.vue'
import FileUpload from '@/components/Common/file-upload.vue'
import { mapGetters } from 'vuex'

export default {
  components: {
    FileUpload,
    GeographicalPosi
  },
  props: {
    // 标题
    title: {
      type: String,
      default: '登录信息'
    },
    // 数据源
    formData: {
      type: Object,
      default: () => ({})
    },
    // 页面类型
    pageType: {
      type: String,
      default: 'frock'
    },
    // 功能类型
    module: {
      type: String,
      default: 'add'
    },
    commonData: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      fileList: [],
      // 地图缩放比例
      zoom: 16,
      // 地图默认中心
      center: [113.36242, 23.1368425],
      markers: [],
      // 是否启用电子围栏
      electronicFence: false,
      provinceList: [],
      cityList: [],
      areaList: [],
      streetList: [],
      tradeParentList: [],
      tradeList: []
    }
  },
  computed: {
    ...mapGetters(['isTradeExaminer'])
  },
  watch: {
    async 'formData.id'(newValue, oldValue) {
      if (newValue) {
        if (this.commonData.vicinityMarkers.length) {
          this.markers = this.commonData.vicinityMarkers.map(k => {
            return {
              id: '',
              name: k.projectName,
              center: [k.lnt, k.lat]
            }
          })
        }
        this.getTradeConfigList(this.formData.tradeParentId)
        await this.getCallbackPosition(0, this.formData.provinceId, 'province', 'id')
        await this.getCallbackPosition(this.formData.provinceId, this.formData.cityId, 'city', 'id')
        await this.getCallbackPosition(this.formData.cityId, this.formData.areaId, 'area', 'id')
        await this.getCallbackPosition(this.formData.areaId, this.formData.streetId, 'street', 'id')
      }
    }
  },
  created() {
    this.getTradeConfigList()
    if (this.module === 'add') {
      this.getRegion()
    }
  },
  methods: {
    // 获取省市区街道
    getRegion(level = 0, id = 0) {
      getRegion({ pid: id }).then(res => {
        if (level === 0) {
          this.provinceList = res.data
          this.getPosition(res.data, 'provinceId', 'province')
        } else if (level === 1) {
          this.cityList = res.data
          this.getPosition(res.data, 'cityId', 'city')
        } else if (level === 2) {
          this.areaList = res.data
        } else if (level === 3) {
          this.streetList = res.data
        }
      })
    },
    getPosition(data, id, name) {
      if (this.module === 'add') {
        const item = data.find(k => k.name === this.$IpAdd[name])
        this.formData[id] = item.id
        this.formData[name] = item.name
        if (name === 'province') {
          this.getRegion(1, item.id)
        } else {
          this.getRegion(2, item.id)
        }
      }
    },
    handleArea(value, type) {
      this.formData[type] = this[type + 'List'].find(k => k.id === value).name
    },
    // 切换省
    changeProvince(value) {
      this.formData.cityId = ''
      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.provinceId = this.provinceList[findElem(this.provinceList, 'name', province)].id
        } else if (level === 1) {
          this.cityList = res.data
          nextId = this.formData.cityId = 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.getTradeConfigList(e)
        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.records
      })
    },
    handleService(e) {
      if (e) {
        const item = this.commonData.salesmanList.find(k => k.value === e)
        this.formData.serviceName = item.label
      } else {
        this.formData.serviceName = ''
      }
    },
    handlePartyA(e) {
      if (e) {
        const item = this.commonData.PartyAList.find(k => k.value === e)
        this.formData.partyA = item.label
      } else {
        this.formData.partyA = ''
      }
    },
    handleCustomer(e) {
      if (e) {
        const item = this.commonData.customerList.find(k => k.value === e)
        this.formData.customerName = item.label
        this.formData.customerNumber = item.number
      } else {
        this.formData.customerName = ''
        this.formData.customerNumber = ''
      }
    },
    onSbumit() {},
    getPolygons(data) {
      console.log(data)
    },
    async handleSelectPosi(data) {
      this.formData.lnt = data.center[0]
      this.formData.lat = data.center[1]
      this.formData.positionAddress = data.name
      this.formData.address = data.name
      var { province, city, district, township } = data.data.addressComponent
      const area = district
      const street = township
      await this.getCallbackPosition(0, province, 'province')
      await this.getCallbackPosition(this.formData.provinceId, city, 'city')
      await this.getCallbackPosition(this.formData.cityId, area, 'area')
      await this.getCallbackPosition(this.formData.areaId, street, 'street')
    },

    /**
     * @param {*} id // 父级id
     * @param {*} value // 值
     * @param {*} name // 字段名称
     * @param {*} way // 筛选属性,默认name
     */
    async getCallbackPosition(id = 0, value = '', name, way = 'name') {
      const { data } = await getRegion({ pid: id })
      this[name + 'List'] = data
      const temp = data.find(k => k[way] == value)
      this.formData[name] = temp && temp.name
      this.formData[name + 'Id'] = temp && temp.id
    }
  }
}
</script>

<style lang="scss" scoped>
.diy-table-1 .item .label {
  width: 180px;
  padding: 10px;
}
::v-deep .el-select {
  width: 100% !important;
}
::v-deep .date .el-input__icon,
::v-deep .date .el-input__prefix {
  right: 50px !important;
  left: auto;
}
::v-deep .el-textarea__inner {
  padding: 0;
  border: none;
}
::v-deep .file:first-child > div {
  display: flex !important;
  align-items: center;
  flex-direction: row-reverse;
}
::v-deep .file .is-success {
  margin-top: 0;
}
.my-width {
  width: 150px;
}
.title {
  display: flex;
  justify-content: space-between;
  .title-right {
    font-size: 16px;
    font-weight: 300;
  }
}
::v-deep .my-center{
  input{
    text-align: center !important;
  }
}
::v-deep .el-upload-list__item-name{
  width: 200px !important;
}
</style>