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" size="mini" 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="['add'].includes(module) ? 12 :24" :lg="['add'].includes(module) ? 12 :24" class="item">
          <div class="label">销售公司名称：</div>
          <div class="value">
            <el-input v-model="formData.salesCompanyName" disabled placeholder="请填写" size="mini" clearable />
          </div>
        </el-col>
        <template v-if="!['add'].includes(module)">
          <el-col :xs="24" :sm="12" :lg="8" class="item">
            <div class="label">工程登录类型：</div>
            <div class="value">
              <el-input :value="formData.orderType === 'WORK'? '工装': '家装'" 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.projectNo" 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.createTime" placeholder="请填写" size="mini" clearable />
            </div>
          </el-col>
        </template>
        <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="module === 'detail'?24: 12" :lg="module === 'detail'?24: 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="module === 'edit'?12: 8" class="item">
          <div class="label">经销商*：</div>
          <div class="value">
            <el-input v-if="isCustomer" v-model="formData.customerName" disabled placeholder="请填写" size="mini" clearable />
            <el-input v-if="!isCustomer && !isTradeExaminer" v-model="formData.customerName" disabled placeholder="请填写" size="mini" clearable />
            <el-select v-if="isTradeExaminer" 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" maxlength="11" 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) || module === 'edit' || 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) || module === 'edit' || 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" size="mini">
              <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.lbsId" :label="item.name" :value="item.lbsId" />
            </el-select>
            <el-select v-model="formData.cityId" placeholder="请选择市" class="my-width" @change="changeCity">
              <el-option v-for="item in cityList" :key="item.lbsId" :label="item.name" :value="item.lbsId" />
            </el-select>
            <el-select v-model="formData.areaId" placeholder="请选择区" class="my-width" @change="changeArea">
              <el-option v-for="item in areaList" :key="item.lbsId" :label="item.name" :value="item.lbsId" />
            </el-select>
            <el-select v-model="formData.streetId" placeholder="请选择街道" class="my-width" @change="changeStreet">
              <el-option v-for="item in streetList" :key="item.lbsId" :label="item.name" :value="item.lbsId" />
            </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.positionAddress" placeholder="定位地址" size="mini" clearable disabled />
            <el-input v-model="formData.address" placeholder="请填写详细地址" size="mini" clearable />
            <geographicalPosi v-if="module !== 'detail'" :form-data="formData" @selectPosi="handleSelectPosi" />
          </div>
        </el-col>
        <template>
          <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"
              >
                <template #marker="{ marker }">
                  <i class="el-icon-location-outline IP_font" />
                  <div class="IP">
                    <div>项目编号:{{ marker.no }}</div>
                    <div>工程项目名称:{{ marker.name }}</div>
                    <div>地址:{{ marker.address }}</div>
                  </div>
                </template>
              </zj-amap-polygon>
            </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" size="mini">
              <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;position: relative;">
            <FileUpload v-if="module !=='detail'" :file-list="formData.fileList" size="mini" :limit="1" class="file" />
            <el-link v-if="module =='detail' && formData.fileList && formData.fileList.length" style="position: absolute;left: 5px;" type="primary" :underline="false" @click="openPdf(formData.fileList[0])">{{ formData.fileList[0].name }}下载</el-link>
            <!-- <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" size="mini">
              <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', 'home'].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" size="mini">
              <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" size="mini">
              <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 v-if="['detail', 'examine'].includes(module)" :xs="24" :sm="24" :lg="24" class="item">
          <div class="label">订单状态：</div>
          <div class="value">
            <el-input :value="orderTypeEume[formData.orderStatus]" placeholder="请填写" size="mini" clearable />
          </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">工程概况及此工程相关的社会关系以及其他相关信息{{ ['cross'].includes(pageType)?'*':'' }}：</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 { getAutonaviRegion } from '@/api/common'
import { getTradeConfigList } from '@/api/basic_data/sectorAllocation'
import GeographicalPosi from './geographicalPosi.vue'
import FileUpload from '@/components/Common/file-upload.vue'
import { mapGetters } from 'vuex'
import { getPositionProject, getHistory } from '@/api/frock'

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: [],
      orderTypeEume: {
        SAVE: '保存', WAIT: '待审核', OK: '登录成功', FAIL: '登录不成功', RETURN: '返回'
      }
    }
  },
  computed: {
    ...mapGetters(['isTradeExaminer', 'isCustomer', 'customerNumber', 'customerId', 'customerName'])
  },
  watch: {
    async 'formData.id'(newValue, oldValue) {
      if (newValue) {
        if (this.isTradeExaminer) {
          this.getPositionProject()
        } else {
          this.markers = [
            {
              name: this.formData.projectName,
              center: [this.formData.lnt, this.formData.lat],
              address: this.formData.address,
              no: this.formData.projectNo
            }
          ]
        }
        this.center = [this.formData.lnt, this.formData.lat]
        if (this.module === 'examine' && !this.formData.loginStatus) {
          this.formData.loginStatus = 'OK'
        }
        if (this.module === 'examine' && this.formData.files.length) {
          const item = this.formData.files
          this.formData.files = item.map(k => {
            return {
              ...k,
              name: k.fileName,
              url: k.fileUrl,
              hover: true
            }
          })
        }
        if (this.formData.homeProjectNameRadio === 'SELF') {
          this.formData.homeProjectNameArea2 = this.formData.homeProjectNameArea
        }
        if (this.formData.homeProjectNameRadio === 'VILLA') {
          this.formData.homeProjectNameNumber3 = this.formData.homeProjectNameNumber
          this.formData.homeProjectNameArea3 = this.formData.homeProjectNameArea
        }
        if (this.formData.homeProjectNameRadio === 'SELF' || this.formData.homeProjectNameRadio === 'VILLA') {
          this.formData.homeProjectNameArea = ''
          this.formData.homeProjectNameSeat = ''
          this.formData.homeProjectNameNumber = ''
        }

        await this.getCallbackPosition(null, this.formData.provinceId, 'province', 'lbsId')
        await this.getCallbackPosition(this.formData.provinceId, this.formData.cityId, 'city', 'lbsId')
        await this.getCallbackPosition(this.formData.cityId, this.formData.areaId, 'area', 'lbsId')
        await this.getCallbackPosition(this.formData.areaId, this.formData.streetId, 'street', 'lbsId')
      }
    }
  },
  created() {
    this.getTradeConfigList()
    if (this.module === 'add') {
      this.getAutonaviRegion()
      if (this.isCustomer) {
        this.formData.customerId = this.customerId
        this.formData.customerNumber = this.customerNumber
        this.formData.customerName = this.customerName
      }
      if (!this.isCustomer && !this.isTradeExaminer) {
        this.formData.customerId = '269184'
        this.formData.customerNumber = '100503'
        this.formData.customerName = '韶关弘格贸易有限公司'
      }
      if (!this.isTradeExaminer) {
        this.getHistory(this.formData.customerId)
      }
    }
  },
  methods: {
    // 获取省市区街道
    getAutonaviRegion(level = 0, id = null) {
      getAutonaviRegion({ parentLbsId: id }).then(res => {
        if (level === 0) {
          if (['frock', 'home'].includes(this.pageType)) {
            this.provinceList = res.data.filter(k => {
              return k.name === '广东省'
            })
            this.getPosition(res.data, 'provinceId', 'province')
          } else {
            this.provinceList = res.data
          }
          console.log(res.data)
        } 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.getAutonaviRegion(1, item.id)
        } else {
          this.getAutonaviRegion(2, item.id)
        }
      }
    },
    getPositionProject() {
      getPositionProject({ id: this.formData.id }).then(res => {
        this.commonData.vicinityMarkers = res.data
        this.markers = this.commonData.vicinityMarkers.map(k => {
          return {
            id: '',
            name: k.projectName,
            center: [k.lnt, k.lat],
            address: k.address,
            no: k.projectNo
          }
        })
        this.markers.push({
          name: this.formData.projectName,
          center: [this.formData.lnt, this.formData.lat],
          address: this.formData.address,
          no: this.formData.projectNo
        })
      })
    },
    handleArea(value, type) {
      this.formData[type] = this[type + 'List'].find(k => k.lbsId === value).name
    },
    // 切换省
    changeProvince(value) {
      this.formData.cityId = ''
      this.formData.areaId = ''
      this.formData.streetId = ''
      this.cityList = []
      this.areaList = []
      this.streetList = []
      this.getAutonaviRegion(1, value)
      this.handleArea(value, 'province')
    },

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

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

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

    // 初始化省市区街道
    initRegion(level, item, id = 0) {
      const { province, city, area, street } = item
      let nextId = null
      getAutonaviRegion({ 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.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
          return
        }
        this.tradeParentList = res.data
        if (this.formData.id) {
          console.log(this.formData.tradeParentId)
          const item = this.tradeParentList.find(k => k.id === this.formData.tradeParentId)
          if (item.childList && item.childList.length) {
            this.tradeList = item.childList
          }
        }
      })
    },
    handleService(e) {
      if (e) {
        const item = this.commonData.salesmanList.find(k => k.value === e)
        this.formData.serviceNumber = item.userName
        this.formData.serviceName = item.label
      } else {
        this.formData.serviceName = ''
        this.formData.serviceNumber = ''
      }
    },
    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
        this.getHistory(this.formData.customerId)
      } else {
        this.formData.customerName = ''
        this.formData.customerNumber = ''
        this.formData.customerLinkName = ''
        this.formData.customerLinkMobile = ''
        this.formData.customerAddress = ''
      }
    },
    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
      console.log(province, city, district, township)
      const area = district
      const street = township
      await this.getCallbackPosition(null, 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 getAutonaviRegion({ parentLbsId: 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.lbsId
    },
    openPdf(item) {
      const link = document.createElement('a')
      link.style.display = 'none'
      link.href = this.$imageUrl + item.url
      link.download = item.name
      document.body.appendChild(link)
      link.click()
      document.body.removeChild(link)
    },
    getHistory(id) {
      getHistory({ customerId: id }).then(res => {
        this.formData.customerLinkName = res.data.linkName || ''
        this.formData.customerLinkMobile = res.data.linkMobile || ''
        this.formData.customerAddress = res.data.address || ''
      })
    }
  }
}
</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;
}
.IP_font {
  font-size: 28px;
  color: #409eff;
  position: absolute;
  left: -13px;
  top: -25px;
}
.IP {
  width: 15vw;
  background-color: #fff;
  padding: 6px 0 6px 6px;
}
</style>