crm_pc/src/views/reviewManagement/remotePayment/index.vue

<template>
  <div class="app-container">

    <div class = "search-bx"  >
        <div class="search">
          <el-row :gutter="0">

              <el-input v-model="tableObj.getdataListParm.parammaps.remoteCode" placeholder="远程服务编号" class="filter-item" style="width: 120px" />

              <el-select v-model="tableObj.getdataListParm.parammaps.costStatus" placeholder="收款状态" class="filter-item" style="width: 120px;" clearable>
                  <el-option v-for="item in moneyNameList" :key="item.id" :label="item.name" :value="item.id" />
              </el-select>

              <el-date-picker v-model="tableObj.getdataListParm.parammaps.inputDatetime1" class="inputDatetime filter-item" type="daterange" range-separator="至" start-placeholder="服务开始时间" end-placeholder="服务开始时间" style="width: 250px;" />

              <el-date-picker v-model="tableObj.getdataListParm.parammaps.inputDatetime2" class="inputDatetime filter-item" type="daterange" range-separator="至" start-placeholder="服务完成时间" end-placeholder="服务完成时间" style="width: 250px;" />

              <!-- <el-autocomplete v-model="tableObj.getdataListParm.parammaps.customerName" :fetch-suggestions="customer_search" placeholder="客户名称" style="width: 200px;margin-right:10px" @select="change_customer_select" @clear="clear_customer_select" @blur="customer_search_blur" clearable>
                <template slot-scope="{ item }">
                  <span class="name">{{ item.name }}</span>
                </template>
              </el-autocomplete> -->

              <el-input v-model="tableObj.getdataListParm.parammaps.customerName" placeholder="客户名称" style="width: 180px;" class="filter-item" clearable />

              <el-select v-model="tableObj.getdataListParm.parammaps.groupId" placeholder="集团" class="filter-item" style="width: 120px;" clearable>
                <el-option v-for="item in groupNameList" :key="item.id" :label="item.name" :value="item.id" />
              </el-select>


              <el-input v-model="tableObj.getdataListParm.parammaps.receiverName" placeholder="客户对接人" style="width:120px"></el-input>


              <el-select v-model="tableObj.getdataListParm.parammaps.employeeId" placeholder="技术人员" class="filter-item" style="width: 120px;" clearable filterable>
                <el-option v-for="(item,index) in employeeNameList" :key="index" :label="item.name" :value="item.id" />
              </el-select>

              <el-input v-model="tableObj.getdataListParm.parammaps.beginRemoteCost" placeholder="服务费用" style="width:90px"></el-input>
                -
              <el-input v-model="tableObj.getdataListParm.parammaps.endRemoteCost" placeholder="服务费用" style="width:90px;margin-right:10px;"></el-input>


              <el-date-picker v-model="tableObj.getdataListParm.parammaps.inputDatetime3" class="inputDatetime filter-item" type="daterange" range-separator="至" start-placeholder="支付时间" end-placeholder="支付时间" style="width: 250px;" />

              <el-date-picker v-model="tableObj.getdataListParm.parammaps.inputDatetime4" class="inputDatetime filter-item" type="daterange" range-separator="至" start-placeholder="收款时间" end-placeholder="收款时间" style="width: 250px;" />


                <el-button class="successBorder" @click="form_search">查询</el-button>
                <el-button class="successBorder" @click="form_clear">重置</el-button>

                <!-- <el-button  class="success" icon="el-icon-upload2" @click="form_export">导出</el-button> -->

          </el-row>
        </div>


    </div>


    <div class="table"   >
      <el-table :key="tableObj.tableKey" v-loading="tableObj.listLoading" element-loading-text="给我一点时间" :data="tableObj.list" border fit highlight-current-row style="width: 100%;" :row-style="rowStyle" :cell-style="cellStyle" class="elTable table-fixed" :max-height="myHeight">


        <el-table-column label="序号" align="center" type="index" width="50px"  fixed="left">
          <template slot-scope="scope">
            <span>{{ scope.$index + (tableObj.pageNum-1) * tableObj.pageSize + 1 }}</span>
          </template>
        </el-table-column>
        <el-table-column label="远程服务编号" min-width="130px" align="center"  fixed="left">
          <template slot-scope="scope">
            <span  style = "color:#409EFF; cursor: pointer;" @click="form_see(scope.row)">{{ scope.row.remoteCode   }}</span>
          </template>
        </el-table-column>
        <el-table-column label="收款状态" min-width="90px" align="center"  fixed="left">
          <template slot-scope="scope">
            <span>{{ scope.row.payStatus  }}</span>
          </template>
        </el-table-column>
        <el-table-column label="客户名称"  min-width="120px" align="center" show-overflow-tooltip fixed="left">
          <template slot-scope="scope">
            <span>{{ scope.row.customerName  }}</span>
          </template>
        </el-table-column>
        <el-table-column label="所属集团" min-width="90px" align="center"  fixed="left">
          <template slot-scope="scope">
            <span>{{ scope.row.groupName  }}</span>
          </template>
        </el-table-column>
        <el-table-column label="客户对接人" min-width="110px" align="center"  >
          <template slot-scope="scope">
            <span>{{ scope.row.receiverName  }}</span>
          </template>
        </el-table-column>
        <!-- <el-table-column label="款项状态" min-width="90px" align="center" >
          <template slot-scope="scope">
            <span>{{ scope.row.costStatus  }}</span>
          </template>
        </el-table-column> -->
        <el-table-column label="服务费用" min-width="100px" align="center"  >
          <template slot-scope="scope">
            <span>{{ scope.row.remoteCost  }}</span>
          </template>
        </el-table-column>
        <el-table-column label="支付时间" min-width="100px" align="center"  >
          <template slot-scope="scope">
            <span>{{ scope.row.payDate  }}</span>
          </template>
        </el-table-column>

        <el-table-column label="收款时间" min-width="100px" align="center"  >
          <template slot-scope="scope">
            <span>{{ scope.row.collectDate  }}</span>
          </template>
        </el-table-column>

        <el-table-column label="服务开始时间" min-width="120px" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.remoteBeginDate  }}</span>
          </template>
        </el-table-column>
        <el-table-column label="服务完成时间" min-width="110px" align="center" show-overflow-tooltip>
          <template slot-scope="scope">
            <span>{{ scope.row.remoteEndDate   }}</span>
          </template>
        </el-table-column>
        <el-table-column label="服务内容" min-width="110px" align="center" show-overflow-tooltip>
          <template slot-scope="scope">
            <span>{{ scope.row.content   }}</span>
          </template>
        </el-table-column>
        <el-table-column label="技术人员" min-width="110px" align="center" show-overflow-tooltip>
          <template slot-scope="scope">
            <span>{{ scope.row.employeeName   }}</span>
          </template>
        </el-table-column>
        <el-table-column label="备注" min-width="120px" align="center" show-overflow-tooltip>
          <template slot-scope="scope">
            <span>{{ scope.row.remark   }}</span>
          </template>
        </el-table-column>
        <el-table-column label="拜访记录关联" min-width="120px" align="center" show-overflow-tooltip >
          <template slot-scope="scope">
            <span>{{ scope.row.visitName   }}</span>
          </template>
        </el-table-column>
        <el-table-column label="回访记录关联" min-width="120px" align="center" show-overflow-tooltip>
          <template slot-scope="scope">
            <span>{{ scope.row.telvisitName   }}</span>
          </template>
        </el-table-column>
        <el-table-column label="服务总结" min-width="90px" align="center" show-overflow-tooltip>
          <template slot-scope="scope">
            <span>{{ scope.row.remoteSummary   }}</span>
          </template>
        </el-table-column>
        <el-table-column label="录入时间" min-width="110px" align="center" show-overflow-tooltip>
          <template slot-scope="scope">
            <span>{{ scope.row.createrDate   }}</span>
          </template>
        </el-table-column>

        <el-table-column label="操作" align="center"   :width="autoWidth"  v-if="autoWidth !== 0"   class-name="small-padding fixed-width" fixed="right">
          <template slot-scope="{row}">

             <el-button class="miniSuccess" @click="form_sure(row)" v-if="isRemotepayRevoke && row.isComplete  == '1'">完成收款</el-button>


            <el-button class="miniSuccess" @click="form_revoke(row)" v-if="isRemotepayRevoke && row.isRevoke  == '1'">撤销</el-button>


          </template>
        </el-table-column>

      </el-table>

      <el-row :gutter="0">
        <el-col :span="6" :offset="12" style="color:#f00">
          列表合同总金额：{{tableSumMoney}}
        </el-col>
        <el-col :span="6" style="color:#f00">
          超时未支付金额：{{tableNoMoney}}
        </el-col>

      </el-row>

      <pagination v-show="tableObj.total>=0" :total="tableObj.total" :page.sync="tableObj.getdataListParm.offset" :limit.sync="tableObj.getdataListParm.pagecount" @pagination="get_table_data" />
    </div>


    <!-- 查看/反馈 -->
    <el-dialog  title="远程服务详情" :visible.sync="createSee.dialogFormVisible" :close-on-click-modal="false" width="95%" :before-close="dialog_close">
      <div class="app-add">


        <RemotePayDetail :remote-data="remoteData"  />


        <div slot="footer" class="dialog-footer">
          <el-button class="success" @click="form_sure(createSee.temp)" v-if="isRemotepayRevoke && createSee.temp.isComplete  == '1'">完成收款</el-button>
          <el-button class="cancelClose" @click="dialog_close()">关闭</el-button>


        </div>
      </div>
    </el-dialog>


     <!-- 确认回收 -->
    <el-dialog title="确认是否已收款" :visible.sync="sure.dialogFormVisible" :close-on-click-modal="false" width="50%"  :before-close="dialog_sure_close">
      <div class="app-add">
        <el-form ref="suretemp" :rules="sure.rules" :model="sure.temp" label-position="right" label-width="150px" style="width: 70%;margin:0 auto 50px">

          <el-form-item label="收款时间：" prop="collectDate">

            <el-date-picker v-model="sure.temp.collectDate" type="date" placeholder="选择日期" format="yyyy-MM-dd" value-format="yyyy-MM-dd"  :picker-options="setDisabled" style="width: 100%;" :clearable="false"   />

          </el-form-item>


        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button class="cancelClose" @click="dialog_sure_close()">关闭</el-button>
          <el-button class="success" @click="form_sure_save()">确认</el-button>
        </div>
      </div>
    </el-dialog>

    <!-- 撤销 -->
    <el-dialog title="确认是否撤销" :visible.sync="revoke.dialogFormVisible" :close-on-click-modal="false" width="50%">
      <div class="app-add">
        <el-form ref="revoketemp" :rules="revoke.rules" :model="revoke.temp" label-position="right" label-width="150px" style="width: 70%;margin:0 auto 50px">

          <el-form-item label="撤销原因：" prop="revokeReason">
            <el-input ref="remark" v-model="revoke.temp.revokeReason" type="textarea" :autosize="{ minRows: 4, maxRows: 8} "  :rows="8" placeholder="请输入备注，最多200个字" maxlength="200" class="filter-item" style="width: 100%;"   />
          </el-form-item>


        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button class="cancelClose" @click="revoke.dialogFormVisible = false;get_table_data()">关闭</el-button>
          <el-button class="success" @click="form_revoke_save()">确认</el-button>
        </div>
      </div>
    </el-dialog>


  </div>
</template>

<script>


import { GetDataByName, PostDataByName, failproccess, ExecDataByConfig, GetDataByNames, checkButtons, calculativeWidth, wxpush } from '@/api/common'
import Cookies from 'js-cookie'
import {  parseTime, json2excel } from '@/utils/index.js'
// import littleTable from './components/littleTable'
import { getToken } from '@/utils/auth'
import Pagination from '@/components/Pagination'
import { MessageBox } from 'element-ui'

import RemotePayDetail from '@/componentView/RemotePayDetail.vue'

import { constants } from 'zlib';


export default {
  name: 'RemotePayment',
  components: { Pagination , RemotePayDetail },
  data() {
    return {
      myHeight:document.documentElement.clientHeight - 85 - 220,
      employeid: Cookies.get('employeid'),
      disabled: false,

      rowData:{},
      isHome:"",

      isRoleEdit: [],isRemotepayRevoke: [],


      send_select_list: [
        { name: 'getDictListSelect', offset: 0, pagecount: 0, parammaps: { "pid": "54" } },
        { name: 'getUsersSelect', offset: 0, pagecount: 0, parammaps: {} },
        { name: 'getEmployeesSelect', offset: 0, pagecount: 0, parammaps: {} },
      ],

      customerNameList: [], // 客户名称
      groupNameList: [], // 集团
      // 下拉框 - 技术人员
      employeeNameList: [],


       // 下拉框 - 创建人
      createrNameList: [],


      // 下拉框 - 款项状态
      moneyNameList: [
        { "name": "未收款", "id": "未收款" },
        { "name": "已收款", "id": "已收款" }
      ],


      setDisabled: {
        disabledDate(time) {
           return time.getTime() > Date.now();  // 可选历史天、可选当前天、不可选未来天
          //return time.getTime() > Date.now() - 8.64e7;  // 可选历史天、不可选当前天、不可选未来天
          // return time.getTime() < Date.now() - 8.64e7;  // 不可选历史天、可选当前天、可选未来天
          // return time.getTime() < Date.now(); // 不可选历史天、不可选当前天、可选未来天
        },
      },


      autoWidth: 130,


      //表格 - 列表 - 查询
      tableObj: {
        getdataListParm: {
          name: 'getRemoteCostList',
          page: 1,
          offset: 1,
          pagecount: parseInt(Cookies.get('pagecount')),
          returntype: 'Map',
          parammaps: {
            remoteCode: "",
            customerName: "",
            customerId: "",
            groupId: "",
            costStatus: "",

            employeeId: "",
            receiverName: "",
            beginRemoteCost: "",
            endRemoteCost: "",

            inputDatetime1: "",
            inputDatetime2: "",
            inputDatetime3: "",
            inputDatetime4: "",

            beginRemoteBeginDate: "",
            endRemoteBeginDate: "",
            beginRemoteEndDate: "",
            endRemoteEndDate: "",
            beginPayDate: "",
            endPayDate: "",
            beginCollectDate: "",
            endCollectDate: "",


          }
        },
        tableKey: 0,
        list: [],
        total: 0,
        listLoading: true,
        temp: {}
      },

      tableSumMoney:0,
      tableNoMoney:0,

      download: {
        getdataListParm: {
          name: 'getRemoteCostList',
          page: 1,
          offset: 1,
          pagecount: 0,
          returntype: 'Map',
          parammaps: {
            remoteCode: "",
            customerName: "",
            customerId: "",
            groupId: "",
            costStatus: "",

            employeeId: "",
            receiverName: "",
            beginRemoteCost: "",
            endRemoteCost: "",

            inputDatetime1: "",
            inputDatetime2: "",
            inputDatetime3: "",
            inputDatetime4: "",

            beginRemoteBeginDate: "",
            endRemoteBeginDate: "",
            beginRemoteEndDate: "",
            endRemoteEndDate: "",
            beginPayDate: "",
            endPayDate: "",
            beginCollectDate: "",
            endCollectDate: "",


          }
        },
        tableKey: 0,
        list: [],
        total: 0,
        listLoading: true,
        temp: {}
      },


      createSee:{
        temp:{},
        dialogFormVisible: false,
      },


      textMap: {
        create: '新增',
        see: '查看',
        update: '编辑'
      },


      imageUrl0:"",

      // 撤销
      revoke: {
        dialogFormVisible: false,
        dialogStatus: '',
        temp: { revokeReason: '',  id: '' },
        rules: {
          revokeReason: [{ required: true, message: '必填', trigger: 'blur' }],
        }
      },

      // 确认回收
      sure: {
        dialogFormVisible: false,
        dialogStatus: '',
        temp: { collectDate: '',  id: '' },
        // rules: {
        //   revokeReason: [{ required: true, message: '必填', trigger: 'blur' }],
        // }
      },

      remoteData:{ id:"" },


      requestParam: {},
      isokDisable: false,
      selectList: [],
      rowStyle: { maxHeight: 50 + 'px', height: 45 + 'px' },
      cellStyle: { padding: 0 + 'px' }
    }
  },

  watch: {


  },

  created() {

    this.get_select_list()
    this.get_auto_buttons()

    var rowData = this.$route.params.rowData
    var isHome = this.$route.params.isHome
    var codeNum = this.$route.params.codeNum

    console.log("rowData",rowData,"======isHome",isHome,"======codeNum",codeNum)


    if(isHome == 'home'){
      this.rowData = rowData
      this.isHome = isHome
      this.tableObj.getdataListParm.parammaps.remoteCode = codeNum
      this.get_table_data()

    } else {
      this.rowData = {}
      this.isHome = ""
      this.codeNum = ""

      this.get_table_data()
    }

  },


  methods: {


    //获取按钮权限
    get_auto_buttons() {
      const Edit = 'RemotePayment'
      const isRoleEdit = checkButtons(JSON.parse(sessionStorage.getItem('buttons')), Edit)
      this.isRoleEdit = isRoleEdit

      const RemotepayRevoke = 'review:remotepay:revoke'
      const isRemotepayRevoke = checkButtons(this.$store.state.user.buttons, RemotepayRevoke)
      this.isRemotepayRevoke = isRemotepayRevoke


    },
    //获取所有下拉框的内容
    get_select_list() {

      GetDataByNames(this.send_select_list).then(response => {
        // this.customerNameList = response.data.getCustomerSelect.list
        // console.log("客户名称下拉框", this.houseNameList)
        this.groupNameList = response.data.getDictListSelect.list
        console.log("集团下拉框", this.groupNameList)

        this.createrNameList = response.data.getUsersSelect.list
        console.log("创建人下拉框", this.createrNameList)

        this.employeeNameList = response.data.getEmployeesSelect.list
        console.log("技术人员下拉框", this.employeeNameList)


      })

    },
    //加载表格
    get_table_data() {
      var me = this
      this.tableObj.listLoading = true
      console.log("this.tableObj.getdataListParm======>", this.tableObj.getdataListParm)
      GetDataByName(this.tableObj.getdataListParm).then(response => {
        console.log('table数据======>', response.data.list)
        if (response.data.list !== null) {


          this.tableObj.list = response.data.list
          this.tableObj.pageNum = response.data.pageNum
          this.tableObj.pageSize = response.data.pageSize
          this.tableObj.total = response.data.total

          console.log('table数据======>', this.tableObj.list)

           //计算操作栏宽度
           var btnNum = 0
              var arrList = response.data.list
              arrList.forEach(function(row){
                  var itemBtnNum = 0
                  if(me.isRemotepayRevoke && row.isComplete  == '1'){
                    itemBtnNum = itemBtnNum + 1
                  }
                  if(me.isRemotepayRevoke && row.isRevoke  == '1'){
                    itemBtnNum = itemBtnNum + 1
                  }


                  console.log(itemBtnNum)
                  if(itemBtnNum > btnNum){
                    btnNum = itemBtnNum
                  }
              })
              console.log("btnNum=============",btnNum)
              me.autoWidth = btnNum * 90


        } else {
          this.tableObj.list = []
        }
        setTimeout(() => {
          this.tableObj.listLoading = false
        }, 100)
      })


      var send_price = {
        name: 'getRemoteCostOfPrice',
        parammaps: this.tableObj.getdataListParm.parammaps
      }

      GetDataByName(send_price).then(response => {
        console.log('table总价格数据======>', response )
        if (response.data.list !== null) {
          this.tableSumMoney = response.data.list[0].totlePrice
          this.tableNoMoney = response.data.list[0].unpaid
        } else {
          this.tableSumMoney = ""
          this.tableNoMoney = ""
        }
      })


    },
    form_search() {
      console.log('点击了查询')

      if (this.tableObj.getdataListParm.parammaps.inputDatetime1 !== '' && this.tableObj.getdataListParm.parammaps.inputDatetime1 !== null) {
        this.tableObj.getdataListParm.parammaps.beginRemoteBeginDate = parseTime(this.tableObj.getdataListParm.parammaps.inputDatetime1[0], '{y}-{m}-{d}')
        this.tableObj.getdataListParm.parammaps.endRemoteBeginDate = parseTime(this.tableObj.getdataListParm.parammaps.inputDatetime1[1], '{y}-{m}-{d}')
      } else {
        this.tableObj.getdataListParm.parammaps.inputDatetime1 = ''
        this.tableObj.getdataListParm.parammaps.beginRemoteBeginDate = ''
        this.tableObj.getdataListParm.parammaps.endRemoteBeginDate = ''
      }

      if (this.tableObj.getdataListParm.parammaps.inputDatetime2 !== '' && this.tableObj.getdataListParm.parammaps.inputDatetime2 !== null) {
        this.tableObj.getdataListParm.parammaps.beginRemoteEndDate  = parseTime(this.tableObj.getdataListParm.parammaps.inputDatetime2[0], '{y}-{m}-{d}')
        this.tableObj.getdataListParm.parammaps.endRemoteEndDate  = parseTime(this.tableObj.getdataListParm.parammaps.inputDatetime2[1], '{y}-{m}-{d}')
      } else {
        this.tableObj.getdataListParm.parammaps.inputDatetime2 = ''
        this.tableObj.getdataListParm.parammaps.beginRemoteEndDate  = ''
        this.tableObj.getdataListParm.parammaps.endRemoteEndDate  = ''
      }

      if (this.tableObj.getdataListParm.parammaps.inputDatetime3 !== '' && this.tableObj.getdataListParm.parammaps.inputDatetime3 !== null) {
        this.tableObj.getdataListParm.parammaps.beginPayDate  = parseTime(this.tableObj.getdataListParm.parammaps.inputDatetime3[0], '{y}-{m}-{d}')
        this.tableObj.getdataListParm.parammaps.endPayDate  = parseTime(this.tableObj.getdataListParm.parammaps.inputDatetime3[1], '{y}-{m}-{d}')
      } else {
        this.tableObj.getdataListParm.parammaps.inputDatetime3 = ''
        this.tableObj.getdataListParm.parammaps.beginPayDate  = ''
        this.tableObj.getdataListParm.parammaps.endPayDate  = ''
      }

      if (this.tableObj.getdataListParm.parammaps.inputDatetime4 !== '' && this.tableObj.getdataListParm.parammaps.inputDatetime4 !== null) {
        this.tableObj.getdataListParm.parammaps.beginCollectDate  = parseTime(this.tableObj.getdataListParm.parammaps.inputDatetime4[0], '{y}-{m}-{d}')
        this.tableObj.getdataListParm.parammaps.endCollectDate  = parseTime(this.tableObj.getdataListParm.parammaps.inputDatetime4[1], '{y}-{m}-{d}')
      } else {
        this.tableObj.getdataListParm.parammaps.inputDatetime4 = ''
        this.tableObj.getdataListParm.parammaps.beginCollectDate  = ''
        this.tableObj.getdataListParm.parammaps.endCollectDate  = ''
      }


      this.tableObj.getdataListParm.offset = 1
      this.get_table_data()
    },
    form_clear() {
      console.log('点击了重置')

      this.tableObj.getdataListParm.parammaps.customerName = ''
      this.tableObj.getdataListParm.parammaps.remoteCode  = ''
      this.tableObj.getdataListParm.parammaps.customerId = ''
      this.tableObj.getdataListParm.parammaps.groupId = ''

      this.tableObj.getdataListParm.parammaps.costStatus  = ''
      this.tableObj.getdataListParm.parammaps.employeeId  = ''

      this.tableObj.getdataListParm.parammaps.receiverName  = ''
      this.tableObj.getdataListParm.parammaps.beginRemoteCost  = ''
      this.tableObj.getdataListParm.parammaps.endRemoteCost  = ''


      this.tableObj.getdataListParm.parammaps.inputDatetime1 = ''
      this.tableObj.getdataListParm.parammaps.inputDatetime2 = ''
      this.tableObj.getdataListParm.parammaps.inputDatetime3 = ''
      this.tableObj.getdataListParm.parammaps.inputDatetime4 = ''

      this.tableObj.getdataListParm.parammaps.beginRemoteBeginDate  = ''
      this.tableObj.getdataListParm.parammaps.endRemoteBeginDate  = ''
      this.tableObj.getdataListParm.parammaps.beginRemoteEndDate  = ''
      this.tableObj.getdataListParm.parammaps.endRemoteEndDate  = ''
      this.tableObj.getdataListParm.parammaps.beginPayDate  = ''
      this.tableObj.getdataListParm.parammaps.endPayDate  = ''
      this.tableObj.getdataListParm.parammaps.beginCollectDate  = ''
      this.tableObj.getdataListParm.parammaps.endCollectDate  = ''

      this.tableObj.getdataListParm.offset = 1
      this.get_table_data()


    },


    //客户失去焦点
    customer_search_blur(item) {
      console.log("客户失去焦点")
      this.tableObj.getdataListParm.parammaps.customerId = ""
      this.tableObj.getdataListParm.parammaps.customerName = ""
      this.customerNameList = []
    },


    //模糊查询客户
    customer_search(queryString, cb) {
      console.log('模糊查询输入值', queryString)
      GetDataByName({ name: 'getCustomerNameFuzzy', page: 1, offset: 1, pagecount: 10, returntype: 'Map', parammaps: { inputvalue: queryString } }).then(response => {
        this.customerNameList = response.data.list
        console.log("客户名称下拉框", response)
        cb(response.data.list)
      })
    },

    //模糊查询客户选择
    change_customer_select(item) {
      console.log('客户名称模糊查询选中值', item)
      this.tableObj.getdataListParm.parammaps.customerId = item.id
      this.tableObj.getdataListParm.parammaps.customerName = item.name
      this.$forceUpdate()
    },

    //清空客户选择
    clear_customer_select(item) {
      document.activeElement.blur()
      this.tableObj.getdataListParm.parammaps.customerId = ""
      this.tableObj.getdataListParm.parammaps.customerName = ""
    },


    //监听 - 集团
    change_group(item) {
      console.log(item)
      console.log(this.create.temp.groupId)
      this.create.temp.groupId = item
      this.create.getdataListParmCust.parammaps.groupId = item

      this.create.temp.customerName = ""
      this.create.temp.customerId = ""
      this.create.customerNameList = []

      this.get_customer_list()
      this.$forceUpdate()

    },
    // 弹窗中的客户
    get_customer_list() {
      GetDataByName(this.create.getdataListParmCust).then(response => {
        if (response.data.list !== null) {
          this.create.customerNameList = response.data.list
          console.log('弹窗中的客户数据', response.data.list)
        } else {
          this.create.customerNameList = []
        }
      })
    },


    //监听 - 下拉中客户名称
    change_customer(item) {
      console.log(item)
      this.create.temp.customerId = item


    },


    //小表格中的删除单号
    form_deleteCode(item, index) {
      console.log('小表格中的删除单号', item)
      this.tableArrList.splice(index, 1)
      this.stockupIdArr.splice(this.stockupIdArr.indexOf(item.stockupId), 1)
      console.log("stockupIdArr===>", this.stockupIdArr)

    },


    //图片展示
    show_pic1() {
      this.imageIsShow = true
    },


    // 查看
    form_see(row) {

      console.log('点击了编辑', row)
      row.barid = String(row.barid)

      this.createSee.temp = Object.assign({}, row)


       this.remoteData.id = row.id


      console.log('点击了查看')


      this.createSee.dialogFormVisible = true


    },


    // 确认回收
    form_sure(row) {
      console.log('点击了确认', row)
      this.reset_sure()
      this.sure.temp.id = row.id
      this.sure.dialogFormVisible = true
    },
    // 确认回收 - 重置
    reset_sure() {
      this.sure.temp.collectDate = ""
    },

    // 确认回收 - 确认
    form_sure_save() {
      this.$refs['suretemp'].validate(valid => {
        if (valid) {
          var send_data =  {
              name: 'completeRemoteCost',
              parammaps: this.sure.temp

          }

                 PostDataByName(send_data).then(response => {
                    console.log('确认回收参数', send_data)
                    if (response.msg !== 'fail') {
                      this.$notify({ title: '成功', message: '提交成功', type: 'success', duration: 2000 })
                      this.sure.dialogFormVisible = false
                      this.createSee.dialogFormVisible = false
                      this.get_table_data()


                      var send_weixin_data1 = {
                        name: 'getRemindData',
                        parammaps: {
                          "userId":Cookies.get('g_userId'),
                          "remindId":29,
                          "remindTypeName":'远程服务',
                          "rowId":this.sure.temp.id

                        }
                      }

                      GetDataByName(send_weixin_data1).then(response => {
                        console.log('微信推送(获取参数)======>', response )
                        if (response.data.message == 'ok') {
                          var receiverStr = response.data.list[0].receivers
                          var receiverArr = receiverStr.split(',')
                          var value1 = response.data.list[0].value1
                          var value2 = response.data.list[0].value2
                          var value3 = response.data.list[0].value3
                          var value4 = response.data.list[0].value4
                          var send_weixin_data2 = {
                            "target": receiverArr,
                            "serviceId": 29,
                            "content": [
                              { "color": "#173177","value": value1 },
                              { "color": "#173177", "value": value2 },
                              { "color": "#173177", "value": value3 },
                              { "color": "#173177","value": value4 }
                            ]
                          }


                            wxpush(send_weixin_data2).then(response => {
                              console.log('微信推送(获取参数)======>', response )
                            })
                         // this.tableSumMoney = response.data.list[0].totlePrice
                        } else {
                          // this.$notify({ title: '失败', message: '消息推送失败', type: 'error', duration: 2000 })
                        }
                      })


                      if(this.isHome == 'home'){
                      // 返回首页
                        this.$router.push({ name: 'Dashboard', params: { isTodo: 'remotep' }})
                      }
                    } else {
                      this.$notify({ title: '失败', message: '提交失败' + response.data, type: 'error', duration: 2000 })
                    }
                  })


        }
      })
    },


    // 撤销
    form_revoke(row) {
      console.log('点击了撤销', row)
      this.reset_revoke()

      this.revoke.temp.id = row.id
      this.revoke.dialogFormVisible = true
    },
    // 撤销 - 重置
    reset_revoke() {
      this.revoke.temp.revokeReason = ""

    },

    // 撤销 - 确认
    form_revoke_save() {
      this.$refs['revoketemp'].validate(valid => {
        if (valid) {
          var send_data =  {
              name: 'revokeRemoteCost',
              parammaps: this.revoke.temp

          }


            this.$confirm('是否撤销该条记录?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {

                 PostDataByName(send_data).then(response => {
                    console.log('撤销发送参数', send_data)
                    if (response.msg !== 'fail') {
                      this.$notify({ title: '成功', message: '撤销成功', type: 'success', duration: 2000 })
                      this.revoke.dialogFormVisible = false
                      this.get_table_data()

                      var send_weixin_data1 = {
                        name: 'getRemindData',
                        parammaps: {
                          "userId":Cookies.get('g_userId'),
                          "remindId":30,
                          "remindTypeName":'远程服务',
                          "rowId":this.revoke.temp.id

                        }
                      }

                      GetDataByName(send_weixin_data1).then(response => {
                        console.log('微信推送(获取参数)======>', response )
                        if (response.data.message == 'ok') {
                          var receiverStr = response.data.list[0].receivers
                          var receiverArr = receiverStr.split(',')
                          var value1 = response.data.list[0].value1
                          var value2 = response.data.list[0].value2
                          var value3 = response.data.list[0].value3
                          var value4 = response.data.list[0].value4
                          var send_weixin_data2 = {
                            "target": receiverArr,
                            "serviceId": 30,
                            "content": [
                              { "color": "#173177","value": value1 },
                              { "color": "#173177", "value": value2 },
                              { "color": "#173177", "value": value3 },
                              { "color": "#173177","value": value4 }
                            ]
                          }


                            wxpush(send_weixin_data2).then(response => {
                              console.log('微信推送(获取参数)======>', response )
                            })
                         // this.tableSumMoney = response.data.list[0].totlePrice
                        } else {
                          // this.$notify({ title: '失败', message: '消息推送失败', type: 'error', duration: 2000 })
                        }
                      })


                    } else {
                      this.$notify({ title: '失败', message: '撤销失败' + response.data, type: 'error', duration: 2000 })
                    }
                  })

            }).catch(() => {
              this.$message({
                type: 'info',
                message: '已取消删除'
              });
            });


        }
      })
    },

    dialog_close(){
      this.createSee.dialogFormVisible = false
      this.get_table_data()
      if(this.isHome == 'home'){
       // 返回首页
       this.$router.push({ name: 'Dashboard', params: { isTodo: 'remotep' }})
      }
    },

    dialog_sure_close(){
      this.sure.dialogFormVisible = false
      this.get_table_data()
      if(this.isHome == 'home'){
       // 返回首页
       this.$router.push({ name: 'Dashboard', params: { isTodo: 'remotep' }})
      }
    },

    // 导出
    form_export(item) {

       this.download.getdataListParm.parammaps = this.tableObj.getdataListParm.parammaps

       GetDataByName(this.download.getdataListParm).then(response => {
         if (response.data.list !== null) {
           this.download.list = response.data.list
         } else {
           this.download.list = []
         }
         var excelDatas = [
           {
             tHeader: ['序号', '远程服务编号', '收款状态', '客户名称', '客户集团', '客户对接人',   '服务费用', '支付时间', '收款时间', '服务开始时间', '服务完成时间', '服务内容', '技术人员', '备注', '拜访记录关联', '回访记录关联', '服务总结', '录入时间' ],
             filterVal: ['sort', 'remoteCode', 'payStatus', 'customerName', 'groupName', 'receiverName',   'remoteCost', 'payDate', 'collectDate', 'remoteBeginDate', 'remoteEndDate', 'content', 'employeeName', 'remark', 'visitName', 'telvisitName', 'remoteSummary', 'createrDate'],
             tableDatas: this.download.list,
             sheetName: 'Sheet1'
           }
         ]
         json2excel(excelDatas, '远程服务款项', true, 'xlsx')
       })

    },

    // 导入
    form_inport() {
      console.log('点击了导入')
    }

  }
}
</script>
<style lang="scss" scoped>
.search {
  padding-top: 10px;
  clear: both;
}
.table {
  margin-top: 10px;
}

#uploadPic {
  width: 700px;
}


 .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }

// #uploadPic .el-upload-list--picture-card .el-upload-list__item {
//   width: 70px;
//   height: 70px;
// }
// #uploadPic .el-upload--picture-card {
//   width: 70px;
//   height: 70px;
//   line-height: 70px;
// }
// #uploadPic .hide .el-upload--picture-card {
//   display: none;
// }

// // 查看 隐藏删除
// #uploadPicSee {
//   height: 70px;
// }
// #uploadPicSee .el-upload-list--picture-card .el-upload-list__item {
//   width: 70px;
//   height: 70px;
// }
// #uploadPicSee .el-upload--picture-card {
//   width: 70px;
//   height: 70px;
//   line-height: 70px;
// }
// #uploadPicSee
//   .el-upload-list--picture-card
//   .el-upload-list__item-actions
//   .el-upload-list__item-delete {
//   display: none;
// }

/deep/ .el-input.is-disabled .el-input__inner {color: #000000!important;}
/deep/ .el-textarea.is-disabled .el-textarea__inner {color: #000000!important;}
/deep/ .el-radio__input.is-disabled+span.el-radio__label {color: #000000!important;}
/deep/ .el-checkbox__input.is-disabled+span.el-checkbox__label { color: #000000!important;}

</style>