dbd-meeting-html/src/views/admin/CustomerEdit.vue

<template>
  <a-card :body-style="{padding: '24px 32px'}" :bordered='false'>
    <a-form @submit='handleSubmit' :form='form' :label-col='{ span: 4 }' :wrapper-col='{ span: 6 }'>
      <a-tabs :defaultActiveKey='defaultActiveKey' @change='callback'>
        <a-tab-pane tab='企业详情' key='1'>
          <a-form-item style='display:none'>
            <a-input v-decorator="['id']" />
          </a-form-item>
          <a-row>
            <a-col :span='12'>
              <a-form-item :labelCol='labelColHalf' :wrapperCol='wrapperColHalf' label='企业名称'>
                <a-input placeholder='企业名称'
                         v-decorator="['name', {rules: [{required: true, message: '请输入企业名称'}]}]" />
              </a-form-item>
            </a-col>
            <a-col :span='12'>
              <a-form-item :labelCol='labelColHalf' :wrapperCol='wrapperColHalf' label='简称'>
                <a-input placeholder='简称' v-decorator="['shortName']" />
              </a-form-item>
            </a-col>
            <a-col :span='12'>
              <a-form-item :labelCol='labelColHalf' :wrapperCol='wrapperColHalf' label='企业类型'>
                <a-select
                  v-decorator="['type', {initialValue:'COMPANY',rules: [{required: true, message: '请选择企业类型'}]}]">
                  <a-select-option value='COMPANY'>公司</a-select-option>
                  <a-select-option value='PERSON'>个人</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :span='12'>
              <a-form-item :labelCol='labelColHalf' :wrapperCol='wrapperColHalf' label='企业状态'>
                <a-select
                  v-decorator="['customerStatus', {initialValue:'DEAL',rules: [{required: true, message: '请选择企业状态'}]}]">
                  <a-select-option value='POTENTIAL'>潜在企业</a-select-option>
                  <a-select-option value='PURPOSE'>意向企业</a-select-option>
                  <a-select-option value='DEAL'>成交企业</a-select-option>
                  <a-select-option value='LOSE'>流失企业</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>

            <a-col :span='12'>
              <a-form-item :labelCol='labelColHalf' :wrapperCol='wrapperColHalf' label='所属地区'>
                <a-select v-decorator="['tenantId', {rules: [{ required: true, message: '请选择所属地区' }]}]"
                          @change='selectTenant'
                          :disabled='tenantEnable'>
                  <a-select-option v-for='item in tenantList' :key='item.id'>{{ item.name }}</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :span='12'>
              <a-form-item :labelCol='labelColHalf' :wrapperCol='wrapperColHalf' label='所属园区'>
                <a-select v-decorator="['parkId', {rules: [{ required: true, message: '请选择所属园区' }]}]"
                          @change='selectPark'
                          :disabled='parkEnable'>
                  <a-select-option v-for='item in parkList' :key='item.id'>{{ item.name }}</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>

            <a-col :span='12'>
              <a-form-item :labelCol='labelColHalf' :wrapperCol='wrapperColHalf' label='所属楼宇'>
                <a-select v-decorator="['buildingId', {rules: [{ required: true, message: '请选择所属楼宇' }]}]"
                          @change='selectBuilding'>
                  <a-select-option v-for='item in buildingList' :key='item.id'>{{ item.buildingName }}</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :span='12'>
              <a-form-item :labelCol='labelColHalf' :wrapperCol='wrapperColHalf' label='所属楼层'>
                <a-select v-decorator="['buildingDetailIds',{rules: [{ required: true, message: '请选择所属楼层' }]}]"
                          placeholder='所属楼层'
                          mode='multiple'
                          @change='selectBuildingDetail'>
                  <a-select-option v-for='item in buildingDetailList' :key='item.id' :value='item.id'>
                    {{ item.floorName }}
                  </a-select-option>
                </a-select>
              </a-form-item>
            </a-col>

            <a-col :span='12'>
              <a-form-item :labelCol='labelColHalf' :wrapperCol='wrapperColHalf' label='所属房间'>
                <a-select v-decorator="['roomIds',{rules: [{ required: true, message: '选择所属房间' }]}]"
                          placeholder='所属房间'
                          mode='multiple'>
                  <a-select-option v-for='item in roomList' :key='item.id' :value='item.id'>
                    {{ item.name }}
                  </a-select-option>
                </a-select>
              </a-form-item>
            </a-col>

            <a-col :span='12'>
              <a-form-item :labelCol='labelColHalf' :wrapperCol='wrapperColHalf' label='入住时间'>
                <a-date-picker
                  format='YYYY-MM-DD HH:mm'
                  valueFormat='YYYY-MM-DD HH:mm:ss'
                  :show-time="{ format: 'HH:mm' }"
                  v-decorator="['startDate',{rules: [{ required: true, message: '选择入住时间' }]}]"
                  type='date'
                  placeholder='入住时间'
                  style='width: 100%'
                />
              </a-form-item>
            </a-col>
            <a-col :span='12'>
              <a-form-item :labelCol='labelColHalf' :wrapperCol='wrapperColHalf' label='租期结束时间'>
                <a-date-picker
                  format='YYYY-MM-DD HH:mm'
                  valueFormat='YYYY-MM-DD HH:mm:ss'
                  :show-time="{ format: 'HH:mm' }"
                  v-decorator="['endDate',{rules: [{ required: true, message: '选择租期结束时间' }]}]"
                  type='date'
                  placeholder='租期结束时间'
                  style='width: 100%'
                />
              </a-form-item>
            </a-col>

            <a-col :span='12'>
              <a-form-item :labelCol='labelColHalf' :wrapperCol='wrapperColHalf' label='所属行业'>
                <a-input placeholder='所属行业' v-decorator="['sector']" />
              </a-form-item>
            </a-col>
            <a-col :span='12'>
              <a-form-item :labelCol='labelColHalf' :wrapperCol='wrapperColHalf' label='所属国家'>
                <a-input placeholder='所属国家' v-decorator="['country']" />
              </a-form-item>
            </a-col>
            <a-col :span='12'>
              <a-form-item :labelCol='labelColHalf' :wrapperCol='wrapperColHalf' label='过程管理'>
                <a-select v-decorator="['process']">
                  <a-select-option value='FIRST_VISIT'>初次拜访</a-select-option>
                  <a-select-option value='NEED_GUID'>需求引导分析</a-select-option>
                  <a-select-option value='COMPETE'>竞争阶段</a-select-option>
                  <a-select-option value='PREDETERMINE'>预定阶段</a-select-option>
                  <a-select-option value='CONTRACT'>合同阶段</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :span='12'>
              <a-form-item :labelCol='labelColHalf' :wrapperCol='wrapperColHalf' label='联系人'>
                <a-input placeholder='联系人'
                         v-decorator="['contacts',{rules: [{ required: true, message: '请输入联系人' }]}]" />
              </a-form-item>
            </a-col>
            <a-col :span='12'>
              <a-form-item :labelCol='labelColHalf' :wrapperCol='wrapperColHalf' label='联系电话'>
                <a-input placeholder='联系电话'
                         v-decorator="['phone',{rules: [{ required: true, message: '请输入联系电话' }]}]" />
              </a-form-item>
            </a-col>
            <a-col :span='12'>
              <a-form-item :labelCol='labelColHalf' :wrapperCol='wrapperColHalf' label='邮箱'>
                <a-input placeholder='邮箱' v-decorator="['email']" />
              </a-form-item>
            </a-col>
            <a-col :span='12'>
              <a-form-item :labelCol='labelColHalf' :wrapperCol='wrapperColHalf' label='统一信用代码'>
                <a-input placeholder='统一信用代码' v-decorator="['creditNo']" />
                <a-button type='primary' @click='getQiXinBasicInfo'>同步工商数据</a-button>
              </a-form-item>
            </a-col>
            <a-col :span='12'>
              <a-form-item :labelCol='labelColHalf' :wrapperCol='wrapperColHalf' label='邮编'>
                <a-input placeholder='邮编' v-decorator="['postalCode']" />
              </a-form-item>
            </a-col>
            <a-col :span='24'>
              <a-form-item :labelCol='labelCol' :wrapperCol='wrapperCol' label='通讯地址'>
                <a-input placeholder='通讯地址' v-decorator="['mailAddress']" />
              </a-form-item>
            </a-col>
            <a-col :span='24'>
              <a-form-item :labelCol='labelCol' :wrapperCol='wrapperCol' label='上传公司头像'
                           extra='尺寸建议：宽160px，高160px'>
                <a-upload
                  v-decorator="['headImg']"
                  list-type='picture-card'
                  class='avatar-uploader'
                  :show-upload-list='false'
                  :action='uploadUrl'
                  :headers='headers'
                  :before-upload='beforeUpload'
                  @change='handleChange'
                >
                  <img v-if='imageUrl' :src='imageUrl' style='width: 102px; height: 102px' />
                  <div v-else>
                    <a-icon :type="loading ? 'loading' : 'plus'" />
                    <div class='ant-upload-text'> 上传</div>
                  </div>
                </a-upload>
              </a-form-item>
            </a-col>
            <a-col :span='24'>
              <a-form-item :labelCol='labelCol' :wrapperCol='wrapperCol' label='上传照片墙'>
                <a-upload
                  v-decorator="['bannerImages', {rules: [{ required: false, message: '上传照片墙' }]}]"
                  list-type='picture-card'
                  class='avatar-uploader'
                  :file-list='fileList'
                  :action='uploadUrl'
                  :headers='headers'
                  @preview='handlePreview'
                  @change='handleChangeFileList'
                >
                  <div v-if='fileList.length < 4'>
                    <a-icon type='plus' />
                    <div class='ant-upload-text'> 上传</div>
                  </div>
                </a-upload>
                <a-modal :visible='previewVisible' :footer='null' @cancel='handleCancel'>
                  <img style='width: 100%' :src='previewImage' />
                </a-modal>
              </a-form-item>
            </a-col>
            <a-col :span='8'>
              <a-form-item :labelCol='labelColOneThird' :wrapperCol='wrapperColOneThird' label='渠道类型'>
                <a-select v-decorator="['channelType']">
                  <a-select-option value='AGENT'>中介公司</a-select-option>
                  <a-select-option value='AD'>广告</a-select-option>
                  <a-select-option value='COOPERATE'>合作推荐</a-select-option>
                  <a-select-option value='MY_CHANNEL'>自开发渠道</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :span='8'>
              <a-form-item :labelCol='labelColOneThird' :wrapperCol='wrapperColOneThird' label='渠道名称'>
                <a-input placeholder='渠道名称' v-decorator="['channelName']" />
              </a-form-item>
            </a-col>
            <a-col :span='8'>
              <a-form-item :labelCol='labelColOneThird' :wrapperCol='wrapperColOneThird' label='是否黑名单'>
                <a-switch :checked='mdl.isBlacklist' @change='onChangeBlacklist'
                          v-decorator="['isBlacklist']" />
              </a-form-item>
            </a-col>
            <a-col :span='24'>
              <a-form-item :labelCol='labelCol' :wrapperCol='wrapperColOneThird' label='企业备注'>
                <a-input placeholder='企业备注' v-decorator="['remark']" />
              </a-form-item>
            </a-col>
            <a-col :span='24'>
              <a-form-item :labelCol='labelCol' :wrapperCol='wrapperCol' label='工商注册号'>
                <a-input placeholder='工商注册号' v-decorator="['regNo']" />
              </a-form-item>
            </a-col>
            <a-col :span='12'>
              <a-form-item :labelCol='labelColHalf' :wrapperCol='wrapperColHalf' label='组织机构代码'>
                <a-input placeholder='组织机构代码' v-decorator="['orgNo']" />
              </a-form-item>
            </a-col>
            <a-col :span='12'>
              <a-form-item :labelCol='labelColHalf' :wrapperCol='wrapperColHalf' label='法人名'>
                <a-input placeholder='法人名' v-decorator="['operName']" />
              </a-form-item>
            </a-col>
            <a-col :span='12'>
              <a-form-item :labelCol='labelColHalf' :wrapperCol='wrapperColHalf' label='经营状态'>
                <a-input placeholder='经营状态' v-decorator="['status']" />
              </a-form-item>
            </a-col>
            <a-col :span='12'>
              <a-form-item :labelCol='labelColHalf' :wrapperCol='wrapperColHalf' label='公司类型(企业性质)'>
                <a-input placeholder='公司类型(企业性质)' v-decorator="['econKind']" />
              </a-form-item>
            </a-col>
            <a-col :span='12'>
              <a-form-item :labelCol='labelColHalf' :wrapperCol='wrapperColHalf' label='注册资金'>
                <a-input placeholder='注册资金' v-decorator="['registCapi']" />
              </a-form-item>
            </a-col>
            <a-col :span='12'>
              <a-form-item :labelCol='labelColHalf' :wrapperCol='wrapperColHalf' label='登记机关'>
                <a-input placeholder='登记机关'
                         v-decorator="['belongOrg']" />
              </a-form-item>
            </a-col>
            <a-col :span='24'>
              <a-form-item :labelCol='labelCol' :wrapperCol='wrapperCol' label='注册地址'>
                <a-input placeholder='注册地址'
                         v-decorator="['address']" />
              </a-form-item>
            </a-col>
            <a-col :span='24'>
              <a-form-item :labelCol='labelCol' :wrapperCol='wrapperCol' label='经营范围'>
                <!-- <a-input placeholder="经营范围" v-decorator="['scope']" /> -->
                <a-textarea placeholder='经营范围' v-decorator="['scope']"
                            :autoSize='{ minRows: 3, maxRows: 5 }'></a-textarea>
              </a-form-item>
            </a-col>
          </a-row>
          <a-form-item :wrapperCol='{ span: 24 }' style='text-align: center'>
            <a-button htmlType='submit' type='primary'>提交</a-button>
            <a-button icon='rollback' style='margin-left: 8px' @click='rollback'>关闭</a-button>
          </a-form-item>
        </a-tab-pane>
        <a-tab-pane tab='关联合同' key='2' forceRender v-if='$route.query.customerId'>
          <div style='margin: 10px'>
            <a-button type='primary' @click='navContract'>新增合同</a-button>
          </div>
          <a-table
            :pagination='false'
            :columns='contractColumns'
            :dataSource='contractData'
            rowKey='id'
          >
            <div slot='sn' slot-scope='text, record' style='cursor:pointer;color:#1890ff'
                 @click='handleDetail(record.id)'>
              <span>{{ text }}</span>
            </div>
            <span slot='serial' slot-scope='text, record, index'>
              {{ index + 1 }}
            </span>
            <span slot='status' slot-scope='text'>
              {{ text | statusFilter }}
            </span>
          </a-table>
        </a-tab-pane>
        <a-tab-pane tab='企业员工管理' key='3' v-if='$route.query.customerId'>
          <div style='margin: 10px'>
            <a-button type='primary' @click='$refs.contactModal.add({ customerId: $route.query.customerId })'>
              新建企业员工
            </a-button>
            <a-button style='margin-left: 30px' type='success' @click='importUser'>
              导入用户
            </a-button>
          </div>
          <a-table :pagination='false' :columns='contactsItemColumns'
                   :dataSource='contactsItemData'
                   ref='userTable'
                   rowKey='id'>
            <span slot='gender' slot-scope='text, record'>
              {{ record.gender === '1' ? '女' : '男' }}
            </span>
            <span slot='num' slot-scope='text, record'>
                <a @click='handleDeviceTable(record)'>{{ record.num }}</a>
            </span>
            <template slot='operation' slot-scope='text, record'>
              <a-button type='link' @click='$refs.contactModal.add(record)'>编辑</a-button>
              <a-divider type='vertical' />
              <a-popconfirm @confirm='handleDeleteContact(record)'>

                <template slot='title'>
                  <span>确定删除 {{ record.name }} 吗？</span>
                </template>
                <a-icon slot='icon' type='question-circle-o' style='color: red' />
                <a-button type='link'>删除</a-button>
              </a-popconfirm>
            </template>
          </a-table>
        </a-tab-pane>
        <a-tab-pane tab='相关文件' key='4' v-if='$route.query.customerId'>
          <customer-attachment-list :customer-id='$route.query.customerId'></customer-attachment-list>

        </a-tab-pane>
      </a-tabs>
    </a-form>
    <customer-contacts-modal ref='contactModal' @ok='handleContactSaved' />
    <a-modal v-model='visible' title='导入用户' @ok='handleFileOk'>
      <div style='display: flex'>
        <a-upload
          :fileList='fileList'
          :headers='headers'
          accept='.xlsx,.xls'
          @change='customChange'
          :customRequest='customRequest'>
          <a-button type='primary'>导入用户数据</a-button>
        </a-upload>
        <a-button style='margin-left: 40px' type='primary' @click='exportTemplate'>导出用户模板</a-button>
      </div>

    </a-modal>
    <a-modal v-model='visible1' title='设备授权' width='500px' @ok='itemHandleOk()'>
      <div class='table-page-search-wrapper'>
        <a-form layout='inline'>
          <a-row :gutter='48'>
            <a-col :md='8' :sm='24'>
            <span class='table-page-search-submitButtons'>
<!--              查询有问题-->
              <a-button type='primary' @click='$refs.table.refresh(true)'>查询</a-button>
              <a-button style='margin-left: 8px' @click='() => (deviceQueryParam = {})'>重置</a-button>
            </span>
            </a-col>
          </a-row>
        </a-form>
      </div>
      <div class='table-operator'>
      </div>
      <a-table
        size='default'
        ref='itemTable'
        rowKey='id'
        :rowSelection='{ selectedRowKeys: selectedDeviceRowKeys, onChange: onDeviceSelectChange }'
        :columns='deviceColumns'
        :dataSource='deviceData'
      >
         <span slot='floorName' slot-scope='text, record'>
              {{ record.buildName + record.roomName }}
         </span>
      </a-table>
    </a-modal>


  </a-card>
</template>

<script>

import { getTenantList } from '@/api/tenant'

let downloadLoadingInstance
import moment from 'moment'
import storage from 'store'
import { ACCESS_TOKEN } from '@/store/mutation-types'
import {
  saveCustomer,
  getCustomer,
  getQiXinBasicInfo,
  getStaffList,
  selectCustomerStaffList,
  updateStaffByCustomer,
  importData,
  exportTemplate,
  selectUserDeviceList,
  selectEquipmentListById,
  saveUserEquipment
} from '@/api/admin/customer'
import {
  getFloorList,
  getRoomListByFloorId,
  getRoomListByBuildIdsRq
} from '@/api/admin/meeting/roomContent'
import { getCustomerContractList } from '@/api/admin/customerContract'
import CustomerContactsModal from './modules/CustomerContactsModal.vue'
import CustomerAttachmentList from './modules/CustomerAttachmentList.vue'
import pick from 'lodash.pick'
import { message } from 'ant-design-vue'
import { download } from '@/utils/request'
import { getParkList } from '@/api/admin/park'
import { getBuildingList } from '@/api/admin/building'
import { getBuildingDetailList } from '@/api/admin/buildingDetail'
import { getInfo } from '@/api/login'

export default {
  name: 'BaseForm',
  components: {
    CustomerContactsModal,
    CustomerAttachmentList
  },
  data() {
    return {
      id: '',
      defaultActiveKey: '1',
      // 合同行
      contractColumns: [
        {
          title: '合同编号',
          dataIndex: 'sn',
          scopedSlots: { customRender: 'sn' }
        },
        {
          title: '物管合同号',
          dataIndex: 'pmSn'
        },
        {
          title: '合同名称',
          dataIndex: 'name'
        },
        {
          title: '签订时间',
          dataIndex: 'signDate'
        },
        {
          title: '记租时间',
          dataIndex: 'startDate'
        },
        {
          title: '到期时间',
          dataIndex: 'endDate'
        },
        {
          title: '状态',
          dataIndex: 'status',
          scopedSlots: { customRender: 'status' }
        },
        {
          title: '签订人',
          dataIndex: 'operName'
        }
      ],
      // 联系人列表表头
      contactsItemColumns: [
        {
          title: '昵称',
          dataIndex: 'username'
        },
        {
          title: '手机号',
          dataIndex: 'mobile'
        },
        {
          title: '授权设备数量',
          dataIndex: 'num',
          scopedSlots: { customRender: 'num' }

        },

        {
          title: '性别',
          dataIndex: 'gender',
          scopedSlots: { customRender: 'gender' }

        },
        {
          title: '操作',
          key: 'operation',
          scopedSlots: { customRender: 'operation' }
        }
      ],
      deviceColumns: [
        {
          title: '设备名称',
          dataIndex: 'equipmentName'
        },
        {
          title: '设备编号',
          dataIndex: 'equipmentNum'
        },
        {
          title: '所属地区',
          dataIndex: 'floorName',
          scopedSlots: { customRender: 'floorName' }

        }
      ],
      deviceData: [],
      labelColHalf: {
        span: 6
      },
      wrapperColHalf: {
        span: 18
      },
      labelColOneThird: {
        span: 9
      },
      wrapperColOneThird: {
        span: 15
      },
      labelCol: {
        xs: { span: 24 },
        sm: { span: 3 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 21 }
      },
      contractData: [],
      orderPaymentData: [],
      orderRefundsData: [],
      orderShippingData: [],
      orderReturnsData: [],
      contactsItemData: [],

      selectedDeviceRowKeys: [],
      selectedRowKeys: [],
      uploadUrl: process.env.VUE_APP_API_BASE_URL + '/api/dfs/upload',
      headers: {
        Authorization: 'Bearer ' + storage.get(ACCESS_TOKEN)
      },
      fileList: [],
      previewVisible: false,
      previewImage: '',
      loading: false,
      imageUrl: '',
      userId: '',
      // form
      form: this.$form.createForm(this),
      file: '',
      visible: false,
      visible1: false,
      tenantList: [], // 地区
      parkList: [], // 园区
      buildingList: [], // 楼宇
      buildingDetailList: [], // 楼层
      roomList: [], //房间
      tenantEnable: false,
      parkEnable: false,
      mdl: {},

    }
  },
  filters: {
    statusFilter(type) {
      const statusMap = {
        'DRAFT': '草稿',
        'APPROVING': '待审批',
        'APPROVED': '已审批',
        'REFUSE': '已拒绝',
        'EXECUTING': '执行中',
        'VOIDED': '已作废',
        'OVERDUE': '已到期',
        'END': '已结束'
      }
      return statusMap[type]
    }
  },
  created() {
    this.id = this.$route.query.customerId
    if (this.$route.query.types) {
      this.defaultActiveKey = '2'
    }
    this.handleInit()
    this.selectUserDeviceList()
    // 查询地区
    this.getTenantData()
    // 获取用户详细信息
    this.getUserDetail();
  },
  methods: {

    // 获取用户详细信息
    getUserDetail() {
      getInfo().then(res => {
        console.log('getUserDetail', res)
        this.userDetail = res
        // 园区：5
        if (this.userDetail.roleIds && this.userDetail.roleIds.length > 0 && this.userDetail.roleIds[0] == 5) {
          //
          // 判断：是新增就查询园区
          const { customerId } = this.$route.query
          if (!customerId) {
            // 选择地区 -> 查询园区
            this.selectTenant(this.userDetail.tenantId)
            // 选择园区 -> 查询楼宇
            this.selectPark(this.userDetail.parkId)
          }
          //
          // 不可编辑
          this.tenantEnable = true
          this.parkEnable = true
          // 关联地区和园区
          this.mdl.parkId = this.userDetail.parkId
          this.mdl.tenantId = this.userDetail.tenantId
          this.form.setFieldsValue({
            parkId: this.mdl.parkId,
            tenantId: this.mdl.tenantId
          })
        }
      })
    },
    // 查询地区
    getTenantData() {
      getTenantList().then(res => {
        this.tenantList = res.rows
      })
    },
    // 选择地区 -> 查询园区
    selectTenant(id) {
      console.log('selectTenant', id)
      // 清空数据
      this.mdl.parkId = null // 园区
      this.mdl.buildingId = null // 楼宇
      this.mdl.buildingDetailIds = [] // 楼层
      this.mdl.roomIds = [] // 所属房间

      this.form.setFieldsValue({
        parkId: null, // 园区
        buildingId: null, // 楼宇
        buildingDetailIds: [], // 楼层
        roomIds: [] // 所属房间
      })
      // 查询园区
      getParkList({
        tenantId: id
      }).then(res => {
        this.parkList = res.rows
      })
    },
    // 选择园区 -> 查询楼宇
    selectPark(id) {
      // 清空数据
      this.mdl.buildingId = null // 楼宇
      this.mdl.buildingDetailIds = [] // 楼层
      this.mdl.roomIds = [] // 所属房间

      this.form.setFieldsValue({
        buildingId: null, // 楼宇
        buildingDetailIds: [], // 楼层
        roomIds: [] // 所属房间
      })
      // 查询楼宇
      getBuildingList({
        parkId: id
      }).then(res => {
        this.buildingList = res.rows
      })
    },
    // 选择楼宇 -> 查询楼层
    selectBuilding(id) {
      // 清空数据
      this.mdl.buildingDetailIds = [] // 楼层
      this.mdl.roomIds = [] // 所属房间

      this.form.setFieldsValue({
        buildingDetailIds: [], // 楼层
        roomIds: [] // 所属房间
      })
      // 查询楼层
      getBuildingDetailList({
        buildingId: id
      }).then(res => {
        this.buildingDetailList = res.rows
      })
    },
    // 选择楼层 -> 查询房间
    selectBuildingDetail(buildingDetailId) {
      console.log('buildingDetailId', buildingDetailId)
      // 查询房间
      this.getRoomListByFloorIdMethod(buildingDetailId)
    },
    // 查询房间
    getRoomListByFloorIdMethod(buildingDetailIds, ids) {
      // 清空数据
      this.mdl.roomIds = [] // 所属房间

      this.form.setFieldsValue({
        roomIds: [] // 所属房间
      })
      // 查询房间
      getRoomListByBuildIdsRq({
        'ids': ids,
        'buildingDetailIds': buildingDetailIds,
        'type': 0
      }).then((res) => {
        this.roomList = res.data
      })
    },
    //获取设备数量
    handleDeviceTable(record) {
      this.visible1 = true
      this.userId = record.id
      selectEquipmentListById({ userId: record.id }).then(res => {
        if (res.data) {
          this.selectedDeviceRowKeys = res.data.map(d => d.id)
          this.selectedRowKeys = res.data
        } else {
          this.selectedDeviceRowKeys = []
          this.selectedRowKeys = []
        }
      })

    },
    //设备选中事件
    onDeviceSelectChange(selectedRowKeys, selectedRows) {
      this.selectedDeviceRowKeys = selectedRowKeys
      this.selectedRowKeys = selectedRows

    },
    itemHandleOk() {
      saveUserEquipment(
        {
          userId: this.userId,
          userIds: this.selectedDeviceRowKeys
        }
      ).then(res => {
        this.getContastsList()
        this.visible1 = false
        this.$message.success(res.msg)
      })
    },
    //获取所有设备
    selectUserDeviceList() {
      selectUserDeviceList().then(res => {
        this.deviceData = res.data
      })
    },
    exportTemplate() {
      const baseURL = process.env.VUE_APP_API_BASE_URL
      window.open(`${baseURL}/admin/staff/exportTemplate`)
    },
    // downloadFile(data) {
    //   let fileName = '客户导入模板'
    //
    //   let link = document.createElement('a')
    //   let blob = new Blob([data], { type: 'application/vnd.ms-excel;charset=utf-8' })
    //   console.log(blob)
    //   link.style.display = 'none'
    //   link.download = fileName + '.xlsx'
    //   link.href = URL.createObjectURL(blob)
    //   // link.setAttribute('download', fileName+'.xlsx');
    //   document.body.appendChild(link)
    //   link.click()
    //   URL.revokeObjectURL(link.href) // 释放URL 对象
    //   document.body.removeChild(link)
    // },


    customRequest(file) {
      // file 是上传的文件 其内容会在放在下面截图中
      // 后端需要接受的参数是 formData数据，
      // uploadFile 我自己的接口

      const formData = new FormData()
      formData.append('file', file.file)
      console.log(file)
      importData(formData).then(res => {
        if (res.code == 0) {
          // 调用组件内方法, 设置为成功状态
          file.onSuccess(res, file.file)
          file.status = 'done'
          this.visible = false
          this.$message.success(res.msg)
        } else {
          file.onError()
          file.status = 'error'
        }
      })
    },

    handleFileChange(info) {
      this.fileList = info.fileList

      if (info.file.status === 'done') {
        const result = info.file.response
        this.file = info.file.response
        this.fileName = result.fileName
      }
    },
    customChange() {

    },
    //导入用户数据
    importUser() {
      this.visible = true
    },
    handleFileOk() {
      console.log(this.file)
      importData({ file: this.file }).then(res => {
        console.log(res)
      })
    },
    handleDetail(id) {
      this.$router.push({
        name: 'customerContractDetailModal',
        query: { id: id, customerId: this.$route.query.customerId, url: 'customerEdit' }
      })
    },
    navContract(e) {
      this.$router.push({ name: 'customerContractEdit', query: { customerId: this.id, url: 'customerEdit' } })
    },
    onChangeBlacklist(checked) {
      this.mdl.isBlacklist = checked
    },
    getQiXinBasicInfo() {
      var keyword = this.form.getFieldValue('creditNo')
      getQiXinBasicInfo({ 'keyword': keyword }).then(res => {
        if (res.code === 0) {
          var qiXinResult = JSON.parse(res.data)
          if (!(isNaN(qiXinResult) && !isNaN(Date.parse(qiXinResult.endDate)))) {
            qiXinResult.endDate = null
          }
          this.form.setFieldsValue(pick(qiXinResult, 'creditNo', 'regNo', 'status', 'orgNo', 'operName', 'econKind', 'startDate', 'registCapi', 'endDate', 'address', 'scope', 'delFlag', 'belongOrg', 'remark'))
        } else {
          this.$message.error('同步工商信息失败：' + res.msg)
        }
      })
    },
    handleInit() {
      const { customerId } = this.$route.query
      if (customerId) {
        getCustomer(customerId).then(res => {
          this.mdl = Object.assign(this.mdl, res)
          let copyMdl = JSON.parse(JSON.stringify(this.mdl))
          // 头像
          if (this.mdl.headImg) {
            this.imageUrl = process.env.VUE_APP_API_BASE_URL + this.mdl.headImg
          }
          // 照片墙
          this.mdl.bannerImages.forEach((item, i) => {
            item.url = process.env.VUE_APP_API_BASE_URL + item.url
          })
          this.fileList = this.mdl.bannerImages
          // 选择地区 -> 查询园区
          if (copyMdl.tenantId) {
            this.mdl = JSON.parse(JSON.stringify(copyMdl))
            this.selectTenant(copyMdl.tenantId)
          }
          // 选择园区 -> 查询楼宇
          if (copyMdl.parkId) {
            this.mdl = JSON.parse(JSON.stringify(copyMdl))
            this.selectPark(copyMdl.parkId)
          }
          // 选择楼宇 -> 查询楼层
          if (copyMdl.buildingId) {
            this.mdl = JSON.parse(JSON.stringify(copyMdl))
            this.selectBuilding(copyMdl.buildingId)
          }
          // 选择楼层 -> 查询房间
          if (copyMdl.buildingDetailIds) {
            this.mdl = JSON.parse(JSON.stringify(copyMdl))
            this.getRoomListByFloorIdMethod(copyMdl.buildingDetailIds, copyMdl.roomIds)
          }
          // 防止替换
          this.mdl = JSON.parse(JSON.stringify(copyMdl))
          //
          this.form.setFieldsValue(pick(this.mdl, 'id', 'name', 'shortName', 'type', 'customerStatus',
            'sector', 'country', 'process', 'contacts', 'phone', 'email', 'creditNo', 'mailAddress',
            'postalCode', 'channelType', 'channelName', 'isBlacklist', 'regNo', 'status', 'orgNo',
            'operName', 'econKind', 'startDate', 'registCapi', 'endDate',
            'address', 'scope', 'delFlag', 'belongOrg', 'remark', 'headImg', 'bannerImages',
            'roomId', 'buildId', 'roomIds', 'buildingDetailIds', 'tenantId', 'parkId',
            'buildingId'))
          //
        })
      }
      this.getContastsList()
      this.getContractList()
    },
    onChange(date, dateString) {
      console.log(date, dateString)
    },
    // handler
    handleSubmit(e) {
      e.preventDefault()
      this.form.validateFields((err, values) => {
        if (!err) {
          // eslint-disable-next-line no-console
          const bannerImages = []
          this.fileList.forEach((file, index) => {
            // 添加原来的
            if (file.hasOwnProperty('name') && file.hasOwnProperty('url') && file.hasOwnProperty('uid')) {
              bannerImages.push({ 'name': file.name, 'url': file.name, 'uid': index })
            }
            if (file.status === 'done' && file.response.code === 0) {
              const data = file.response
              bannerImages.push({ 'name': data.fileName, 'url': data.fileName, 'uid': index })
            }
          })
          // 照片墙
          values.bannerImages = bannerImages
          console.log('Received values of form: ', values)
          // values.startDate = moment(values.startDate).format('YYYY-MM-DD')
          // console.log(values.startDate)
          this.confirmLoading = true
          saveCustomer(values).then(res => {
            if (res.code === 0) {
              this.$message.success('保存成功')
              this.$emit('ok')
              this.visible = false
              this.rollback()
            } else {
              this.$message.error(res.msg)
            }
          }).catch(() => {
            this.$message.error('系统错误，请稍后再试')
          }).finally(() => {
            this.confirmLoading = false
          })
        }
      })
    },
    rollback() {
      this.$router.push('/admin/service/customer')
    },
    // 联系人列表
    getContastsList() {
      let param = {
        customerId: this.$route.query.customerId
      }
      selectCustomerStaffList(param).then(res => {
        this.contactsItemData = res.rows
      })
    },
    // 合同列表
    getContractList() {
      getCustomerContractList({ customerId: this.$route.query.customerId }).then(res => {
        // console.log(res)
        if (res.code === 0) {
          this.contractData = res.rows
        }
      })
    },
    // 新增联系人回调
    handleContactSaved() {
      this.getContastsList()
    },
    // 删除联系人
    handleDeleteContact(contactInfo) {
      console.log(contactInfo)
      contactInfo.icsCustomerId = this.$route.query.customerId
      // contactInfo.
      updateStaffByCustomer(contactInfo).then(res => {
        if (res.code === 0) {
          this.$message.success('删除成功')
          this.deleteVisible = false
          this.getContastsList()
        } else {
          this.$message.error(res.msg)
        }
      }).catch(() => {
        this.$message.error('系统错误，请稍后再试')
      }).finally(() => {
      })
    },

    beforeUpload(file) {
      const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png'
      if (!isJpgOrPng) {
        this.$message.error('You can only upload JPG file!')
      }
      const isLt2M = file.size / 1024 / 1024 < 2
      if (!isLt2M) {
        this.$message.error('图片必须小于 2MB!')
      }
      return isJpgOrPng && isLt2M
    },
    handleChange(info) {
      if (info.file.status === 'uploading') {
        this.loading = true
        return
      }
      if (info.file.status === 'done') {
        const { form: { setFieldsValue } } = this
        const result = info.file.response
        // 设置值
        this.$nextTick(() => {
          setFieldsValue({
            headImg: result.fileName
          })
        })
        // Get this url from response in real world.
        getBase64(info.file.originFileObj, imageUrl => {
          this.imageUrl = imageUrl
          this.loading = false
        })
      }
    },
    async handlePreview(file) {
      if (!file.url && !file.preview) {
        file.preview = await getBase64FileList(file.originFileObj)
      }
      this.previewImage = file.url || file.preview
      this.previewVisible = true
    },
    handleCancel() {
      this.previewVisible = false
    },
    // 上传照片墙
    handleChangeFileList({ fileList }) {
      this.fileList = fileList
    }
  }
}

// 上传头像
function getBase64(img, callback) {
  const reader = new FileReader()
  reader.addEventListener('load', () => callback(reader.result))
  reader.readAsDataURL(img)
}

// 上传照片墙
function getBase64FileList(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader()
    reader.readAsDataURL(file)
    reader.onload = () => resolve(reader.result)
    reader.onerror = error => reject(error)
  })
}
</script>

<style>
.avatar-uploader > .ant-upload {
  width: 102px;
  height: 102px;
}

.ant-upload-select-picture-card i {
  font-size: 32px;
  color: #999;
}

.ant-upload-select-picture-card .ant-upload-text {
  margin-top: 8px;
  color: #666;
}
</style>