tnc-fe/src/views/customer/CustomerDetails.vue

<template>
  <div>
    <a-page-header
      style="background-color: #FFFFFF;"
      :title= customer.cardName
      sub-title=""
      @back="showTaskList"
    >
      <!--  基本信息  -->
      <a-card :bordered="false" title="入网提示卡信息" style="margin-top: 10px;">
        <a-descriptions  :column="2" :bordered="true">
          <a-descriptions-item label="创建时间">{{customer.createTime}}</a-descriptions-item>
          <a-descriptions-item label="证件编号">{{customer.cardNo}}</a-descriptions-item>
          <a-descriptions-item label="客户名称" >{{customer.cardName}}</a-descriptions-item>
          <a-descriptions-item label="证件地址" >{{customer.idCardAddress}}</a-descriptions-item>
          <a-descriptions-item label="身份证是否在有效期" >{{customer.cardStartTimeAndEnd==='1'?'是':'否'}}</a-descriptions-item>
          <a-descriptions-item label="拨测联系电话" >{{customer.phone}}</a-descriptions-item>
          <a-descriptions-item label="联电归属地" >{{customer.address}}</a-descriptions-item>
          <a-descriptions-item label="客户现用号码一证通查结果" >{{customer.operatorType}}</a-descriptions-item>
          <a-descriptions-item label="新办号码用途" >{{customer.phonePurpose}}</a-descriptions-item>
          <a-descriptions-item label="客户所属行业" >{{customer.industry}}</a-descriptions-item>
          <a-descriptions-item label="拨测结果">{{customer.calltestResults}}</a-descriptions-item>
<!--          <a-descriptions-item label="营业厅地址">{{ customer.sysBusinessHall}}</a-descriptions-item>-->
          <a-descriptions-item label="工作地址">{{customer.wordAddress}}</a-descriptions-item>
          <a-descriptions-item label="现住地址(到村/小区)">{{customer.currentAddress}}</a-descriptions-item>
          <a-descriptions-item label="人工地址判研">{{customer.judgmentResearchAddress}}</a-descriptions-item>
          <a-descriptions-item label="新办号码">{{customer.newPhone}}</a-descriptions-item>

        </a-descriptions>
      </a-card>

      <a-card :bordered="false"style="margin-bottom:10px"  title="排查信息" >
      <div>
        <a-form-model
          ref="form"
          :label-col="labelCol"
          :wrapper-col="wrapperCol"

        >
          <div   style="overflow: auto">

            <a-list size="large" bordered>
              <template>

                <a-list-item  class="box" style='height: 40px'>

                  <a-col :span="12" >
                    <div>

                      <div style="float:left;margin: 20px 3px;" id="directRequirements"> 1、客户进厅直接要求办理移动号码入网</div>
                      <div style="float:right;margin: 20px 10px;" >
                        <a-radio-group v-model="customer.directRequirements" button-style="solid"    :disabled="isDisabled">
                          <a-radio :value="1">是</a-radio>
                          <a-radio :value="2">否</a-radio>
                        </a-radio-group>
                      </div>
                    </div>
                  </a-col>
                  <a-col :span="12">
                    <div style="clear: both"></div>
                    <a-input v-model="customer.directRequirementsNode" placeholder="请输入排查结果备注信息" style="margin: 3px 3px;width: 400px;float: right"  :disabled="isDisabled"></a-input>
                  </a-col>
                </a-list-item>

                <a-list-item  class="box" style='height: 40px'>

                  <a-col :span="12" >
                    <div>

                      <div style="float:left;margin: 20px 3px;" id="passOne">2、客户主动申请一次性办理超过一个号码</div>
                      <div style="float:right;margin: 20px 10px;" >
                        <a-radio-group v-model="customer.passOne" button-style="solid"    :disabled="isDisabled">
                          <a-radio :value="1">是</a-radio>
                          <a-radio :value="2">否</a-radio>
                        </a-radio-group>
                      </div>
                    </div>
                  </a-col>
                  <a-col :span="12">
                    <div style="clear: both"></div>
                    <a-input v-model="customer.passOneNode" placeholder="请输入排查结果备注信息" style="margin: 3px 3px;width: 400px;float: right"  :disabled="isDisabled"></a-input>
                  </a-col>
                </a-list-item>

                <a-list-item  class="box" style='height: 40px'>

                  <a-col :span="12" >
                    <div>

                      <div style="float:left;margin: 20px 3px;" id="nonConformance">3、所办号码月缴费金额不符合客户消费能力</div>
                      <div style="float:right;margin: 20px 10px;" >
                        <a-radio-group v-model="customer.nonConformance" button-style="solid"    :disabled="isDisabled">
                          <a-radio :value="1">是</a-radio>
                          <a-radio :value="2">否</a-radio>
                        </a-radio-group>
                      </div>
                    </div>
                  </a-col>
                  <a-col :span="12">
                    <div style="clear: both"></div>
                    <a-input v-model="customer.nonConformanceNode" placeholder="请输入排查结果备注信息" style="margin: 3px 3px;width: 400px;float: right"  :disabled="isDisabled"></a-input>
                  </a-col>
                </a-list-item>


                <a-list-item  class="box" style='height: 40px'>

                  <a-col :span="12" >
                    <div>

                      <div style="float:left;margin: 20px 3px;" id="isDxNumber">4、客户名下无电信号码</div>
                      <div style="float:right;margin: 20px 10px;" >
                        <a-radio-group v-model="customer.isDxNumber" button-style="solid"    :disabled="isDisabled">
                          <a-radio :value="1">是</a-radio>
                          <a-radio :value="2">否</a-radio>
                        </a-radio-group>
                      </div>
                    </div>
                  </a-col>
                  <a-col :span="12">
                    <div style="clear: both"></div>
                    <a-input v-model="customer.isDxNumberNote" placeholder="请输入排查结果备注信息" style="margin: 3px 3px;width: 400px;float: right"  :disabled="isDisabled"></a-input>
                  </a-col>
                </a-list-item>

                <a-list-item  class="box" style='height: 40px'>
                  <a-col :span="12">
                    <div>
                      <div style="float:left;margin: 20px 3px;" id="isBroadband">5、申请号码办理征信类、融合宽带业务</div>
                      <div style="float:right;margin: 20px 10px;" >
                        <a-radio-group v-model="customer.isBroadband" button-style="solid"   :disabled="isDisabled">
                          <a-radio :value="1">是</a-radio>
                          <a-radio :value="2">否</a-radio>
                        </a-radio-group>
                      </div>
                    </div>
                  </a-col>
                  <a-col :span="12">
                    <div style="clear: both"></div>
                    <a-input v-model="customer.isBroadbandNote" placeholder="请输入排查结果备注信息" style="margin: 3px 3px;width: 400px;float: right"  :disabled="isDisabled"></a-input>
                  </a-col>
                </a-list-item>

                <a-list-item  class="box" style='height: 40px'>
                  <a-col span="12">
                    <div>
                      <div style="float:left;margin: 20px 3px;" id="isUseTo">6、 申请号码使用用途异常</div>
                      <div style="float:right;margin: 20px 10px;" >

                        <a-radio-group v-model="customer.isUseTo" button-style="solid"    :disabled="isDisabled">
                          <a-radio :value="1">是</a-radio>
                          <a-radio :value="2">否</a-radio>
                        </a-radio-group>
                      </div>
                    </div>
                  </a-col>
                  <a-col :span="12">
                    <div style="clear: both"></div>
                    <a-input v-model="customer.isUseToNote" placeholder="请输入排查结果备注信息" style="margin: 3px 3px;width: 400px;float: right"  :disabled="isDisabled"></a-input>
                  </a-col>
                </a-list-item>

                <a-list-item class="box" style='height: 40px'>
                  <a-col :span="12">
                    <div>
                      <div style="float:left;margin: 20px 3px;" id="isRefund">7、客户名下号码存在异常高频率充值、退费</div>
                      <div style="float:right;margin: 20px 10px;" >

                        <a-radio-group v-model="customer.isRefund" button-style="solid"    :disabled="isDisabled">
                          <a-radio :value="1">是</a-radio>
                          <a-radio :value="2">否</a-radio>
                        </a-radio-group>
                      </div>
                    </div>
                  </a-col>
                  <a-col :span="12">
                    <div style="clear: both"></div>
                    <a-input v-model="customer.isRefundNote" placeholder="请输入排查结果备注信息" style="margin: 3px 3px;width: 400px;float: right"  :disabled="isDisabled"></a-input>
                  </a-col>
                </a-list-item>

                <a-list-item class="box" style='height: 40px'>
                  <a-col span="12">
                    <div>
                      <div style="float:left;margin: 20px 3px;" id="isShutDown">8、客户名下已有号码（含已注销号码）存在各类关停</div>
                      <div style="float:right;margin: 20px 10px;" >

                        <a-radio-group v-model="customer.isShutDown" button-style="solid"    :disabled="isDisabled">
                          <a-radio :value="1">是</a-radio>
                          <a-radio :value="2">否</a-radio>
                        </a-radio-group>
                      </div>
                    </div>
                  </a-col>
                  <a-col :span="12">
                    <div style="clear: both"></div>
                    <a-input v-model="customer.isShutDownNote" placeholder="请输入排查结果备注信息" style="margin: 3px 3px;width: 400px;float: right"  :disabled="isDisabled"></a-input>
                  </a-col>
                </a-list-item>

                <a-list-item class="box" style='height: 40px'>
                  <a-col span="12">

                    <div>
                      <div style="float:left;margin: 20px 3px;" id="isNewly">9、客户名下在用号码无使用记录，仍要求新办号码</div>
                      <div style="float:right;margin: 20px 10px;" >

                        <a-radio-group v-model="customer.isNewly" button-style="solid"    :disabled="isDisabled">
                          <a-radio :value="1">是</a-radio>
                          <a-radio :value="2">否</a-radio>
                        </a-radio-group>
                      </div>
                    </div>
                  </a-col>
                  <a-col :span="12">
                    <div style="clear: both"></div>
                    <a-input v-model="customer.isNewlyNote" placeholder="请输入排查结果备注信息" style="margin: 3px 3px;width: 400px;float: right"  :disabled="isDisabled"></a-input>
                  </a-col>
                </a-list-item>

                <a-list-item class="box" style='height: 40px'>
                  <a-col span="12">
                    <div>
                      <div style="float:left;margin: 20px 3px;" id="isChannel">10、在多个渠道多频次入网的异常情况</div>
                      <div style="float:right;margin: 20px 10px;" >

                        <a-radio-group v-model="customer.isChannel" button-style="solid"    :disabled="isDisabled">
                          <a-radio :value="1">是</a-radio>
                          <a-radio :value="2">否</a-radio>
                        </a-radio-group>
                      </div>
                    </div>
                  </a-col>
                  <a-col :span="12">
                    <div style="clear: both"></div>
                    <a-input v-model="customer.isChannelNote" placeholder="请输入排查结果备注信息" style="margin: 3px 3px;width: 400px;float: right"  :disabled="isDisabled"></a-input>
                  </a-col>
                </a-list-item>

                <a-list-item class="box" style='height: 40px'>
                  <a-col span="12">
                    <div>
                      <div style="float:left;margin: 20px 3px;" id="isInvolvingFraud">11、黑名单到期客户新入网的高危疑似涉诈号码</div>
                      <div style="float:right;margin: 20px 10px;" >

                        <a-radio-group v-model="customer.isInvolvingFraud" button-style="solid"   :disabled="isDisabled">
                          <a-radio :value="1">是</a-radio>
                          <a-radio :value="2">否</a-radio>
                        </a-radio-group>
                      </div>
                    </div>
                  </a-col>
                  <a-col :span="12">
                    <div style="clear: both"></div>
                    <a-input v-model="customer.isInvolvingFraudNote" placeholder="请输入排查结果备注信息" style="margin: 3px 3px;width: 400px;float: right" :disabled="isDisabled"></a-input>
                  </a-col>
                </a-list-item>


              </template>
            </a-list>
          </div>
        </a-form-model>
      </div>
      </a-card>
      <a-card :bordered="false" style="margin-bottom:10px" title="后续处理" >
        <div>
          <a-form-model
            ref="form"
            :label-col="labelCol"
            :wrapper-col="wrapperCol"
          >
            <div>
              <a-list size="large" bordered>
                <a-list-item>
                  <a-col :span="5" >
                  </a-col>
                  <a-col :span="18">
                  </a-col>
                </a-list-item>
                <a-list-item>
                  <a-col :span="16">
                    <a-form-model-item  id="numberResults" label=" 是否将高危号码上报蓝、紫名单或不可复开关停"  v-bind="labelCol1ProMaxPlus" prop="industry">
                      <a-checkbox-group  :disabled="isDisabled" v-model="customer.numberResults" style="width: 100%">
                        <a-row>
                          <template v-for="(des) in this.optionsWithDisabled">
                            <a-col :span="8">
                              <a-checkbox :value="des.value" name="numberResults"    >{{ des.text }}</a-checkbox>
                            </a-col>
                          </template>
                        </a-row>
                      </a-checkbox-group>
                    </a-form-model-item>
                  </a-col>
                </a-list-item>

              </a-list>
            </div>
          </a-form-model>

        </div>
      </a-card>


      <!--   操作日志   -->
      <a-card :bordered="false" title="操作日志" style="margin-top: 10px;">

        <div>
          <a-table
            ref="table"
            size="middle"
            :scroll="{x:true}"
            bordered
            rowKey="id"
            :columns="columnsLog"
            :dataSource="dataSourceLog"
            :pagination="ipaginationLog"
             class="j-table-force-nowrap"
            @change="handleTableChange">

             <span slot="action" slot-scope="text, record">
               <a @click="showByCardNo(record)">查看</a>
             </span>
            <template v-slot:numberResults="text, record">
              <a-badge :status="text | statusTypeFilter" :text="text | statusFilter"/>
            </template>

            <template v-slot:status="text, record">
              <a-badge :color="record | statusEscalationColor"  :text="record | escalationFilter"/>
            </template>

          </a-table>
        </div>
      </a-card>

    </a-page-header>

  </div>
</template>
<script>
import CompanyCheckCheck from "@views/company/CompanyCheckCheck";
import CompanyCheckDetail from "@views/company/CompanyCheckDetail";
import {getAction} from "@api/manage";
import {JeecgListMixin} from "@/mixins/JeecgListMixin";
import {mixinDevice} from "@/utils/mixin";
export default {
  name: 'CompanyDetails',
  mixins: [JeecgListMixin,mixinDevice],
  components: {
    CompanyCheckCheck,
    CompanyCheckDetail
  },
  props: {
    customer: {
      type: Object,
      require: true
    }
  },
  filters: {
    statusTypeFilter(type) {
      const statusTypeMap = {
        '1': 'success',
        '2': 'processing',
        '3': 'warning',
        '4': 'warning',
        '3,4': 'warning',
        '4,3': 'warning',
      }
      return statusTypeMap[type]
    },
    statusFilter(status) {
      const statusMap = {
        '1': '非高危',
        '2': '上报关停',
        '3': '上报蓝名单',
        '4': '上报紫名单',
        '3,4':'上报蓝/紫名单',
        '4,3':'上报蓝/紫名单',
      }
      return statusMap[status]
    },
    statusEscalation(type) {
      const statusTypeMap = {
        '1': 'success',
        '0': 'warning',
      }
      return statusTypeMap[type]
    },
    statusEscalationColor(record) {
      let statusTypeMap ={}
      if(record.numberResults.indexOf('1')!==-1){
        statusTypeMap = {
          '2': 'green',
          '1': 'yellow',
          '0': 'green',
        }
      }else {
        statusTypeMap = {
          '2': 'green',
          '1': 'yellow',
          '0': 'gray',
        }
      }


      return statusTypeMap[record.status]
    },

    currentFilter(status) {
      const statusMap = {
        '0': status.businessAddress,
        '1':'已报分公司',
        '2': '已完成'
      }
      return statusMap[status.status]
    },
    statusCurrentColor(type) {
      const statusTypeMap = {
        '2': 'green',
        '1': 'yellow',
        '0': 'gray',
      }
      console.log(statusTypeMap[type]+"aaa")
      return statusTypeMap[type]
    },

    escalationFilter(record) {
      let statusMap ={}
      if(record.numberResults.indexOf('1')!==-1){
        statusMap = {
          '0': '新建未报(无需上报)',
          '1':'已报分公司',
          '2': '已报省公司'
        }
      }else {
        statusMap = {
          '0': '新建未报',
          '1':'已报分公司',
          '2': '已报省公司'
        }
      }
      // statusMap = {
      //   '0': '新建未报',
      //   '1':'已报分公司',
      //   '2': '上报成功'
      // }
      return statusMap[record.status]
    },
  },
  data(){
    return{
      sysCompany:[],
      optionsWithDisabled:
        [{
          text: '非高危',
          value: '1',
        }, {
          text: '上报关停',
          value: '2',

        }, {
          text: '上报蓝名单',
          value: '3',
        },{
          text: '上报紫名单',
          value: '4',
        }],
      array:[],  //创建一个数组
      form:{
        value:[]  //接收每个input框的值
      },
      labelCol1ProMaxPlus: {
        labelCol: {
          span: 12
        },
        wrapperCol: {
          span: 12
        }
      },
      numberResults: [],
      isDisabled:true,
      columnsLog: [
        {
          title: '操作时间',
          align: "center",
          dataIndex: 'updateTime',
         },
        {
          title: '操作人',
          align: "center",
          dataIndex: 'updateBy',
         },
        {
          title: '操作类型',
          align: "center",
          dataIndex: 'operateType',
         },
      ],
      columns: [
        {
          title: '证件编号',
          align: "center",
          dataIndex: 'cardNo',
          scopedSlots: {customRender: 'cardNo'}

        }, {
          title: '客户名称',
          align: "center",
          dataIndex: 'cardName'
        }, {
          title: '创建人',
          align: "center",
          sorter: (a, b) =>a.createBy.localeCompare(b.createBy),
          dataIndex: 'createBy'
        }, {
          title: '创建时间',
          align: "center",
          //sorter: true,
          sorter:(a, b) => { return a.createTime>= b.createTime? 1 : -1 },
          width: 100,
          dataIndex: 'createTime'
        }, {
          title: '创建人归属部门',
          width: 100,
          align: "center",
          sorter: (a, b) =>a.businessAddress.localeCompare(b.businessAddress),
          dataIndex: 'businessAddress'
        },{
          title: '上报时间',
          align: "center",
          dataIndex: 'upTime',
          sorter:(a, b) => { return a.upTime> b.upTime? 1 : -1 },
          scopedSlots: {customRender: 'upTime'}
        },
        {
          title: '办理电话',
          align: "center",
          width: 200,
          dataIndex: 'newPhone',
          scopedSlots: {customRender: 'newPhone'}
        },{
          title: '当前处理部门',
          align: "center",
          dataIndex: 'currentDept',
        },
        {
          title: '研判结果',
          align: "center",
          sorter: (a, b) =>a.numberResults.localeCompare(b.numberResults),
          dataIndex: 'numberResults',
          scopedSlots: {customRender: 'numberResults'},
        },{
          title: '上报状态',
          align: "center",
          sorter: (a, b) => a.status - b.status,
          dataIndex: 'status',
          scopedSlots: {customRender: 'status'}
        },
        {
          title: '操作',
          dataIndex: 'action',
          align: "center",
          scopedSlots: {customRender: 'action'}
        }
      ],
      description: '稽核业务列表',
      ipaginationLog:{
        current: 1,
        pageSize: 10,
        pageSizeOptions: ['10', '20', '30'],
        showTotal: (total, range) => {
          return range[0] + "-" + range[1] + " 共" + total + "条"
        },
        showQuickJumper: true,
        showSizeChanger: true,
        total: 0
      },
      dataSourceLog:[],
      sysBusinessHallList: "",
      labelCol: { span: 1 },
      wrapperCol: { span: 23 },
       showType:'checktask',
      url: {
        //list: "businessReminderCard/list",
      },
      showHistory:''
    }
  },
  created() {
    this.initTable();
    this.init()

  },
  methods:{
    init(){
      // let data = {
      //   "cardNo": ''
      // };
      // getAction('/sysCompany/list', data).then((res) => {
      //   if (res.success) {
      //     let result = res.result;
      //     console.log(result + "result");
      //     if (result != null) {
      //       this.sysCompany = result;
      //     }
      //   }
      // })
      // var str1='';
      // for (var i = 0; i < this.sysCompany.length; i++) {
      //   if (this.customer.sysCompany === this.sysCompany[i].id) {
      //     str1+=this.sysCompany[i].name;
      //     this.sysBusinessHallList = result[i].sysBusinessHallList;
      //     for (var i = 0; i <this.sysBusinessHallList.length; i++) {
      //       if (this.customer.sysBusinessHall===this.sysBusinessHallList[i].id){
      //         str1+=this.sysBusinessHallList[i].name
      //       }
      //     }
      //   }
      // }
      //
      //this.customer.sysBusinessHall=str
      var address='';
      if (this.customer.judgmentResearchAddress.indexOf('1') !== -1){
        address+='人工地址判研-异常 '
      }
      if (this.customer.judgmentResearchAddress.indexOf('2') !== -1){
        address+='人工地址判研-正常 '
      }
      this.customer.judgmentResearchAddress=address
      var str= '';
      if (this.customer.operatorType.indexOf('1') !== -1){
         str+='移动 '
      }
      if (this.customer.operatorType.indexOf('2') !== -1){
         str+='联通 '
      }
      if (this.customer.operatorType.indexOf('3') !== -1){
         str+='电信 '
      }
      if (this.customer.operatorType.indexOf('4') !== -1){
         str+='其他 '
      }
      this.customer.operatorType=str;
      if (this.customer.calltestResults==='1'){
        this.customer.calltestResults="关机"
      }
      if (this.customer.calltestResults==='2'){
        this.customer.calltestResults="未接通"
      }
      if (this.customer.calltestResults==='3'){
        this.customer.calltestResults="可接通不知晓入网事宜"
      }
      if (this.customer.calltestResults==='4') {
        this.customer.calltestResults = "可接通认可办理"
      }
      let queryTable={
        businessReminderCardId:this.customer.id
      }
      getAction("/businessReminderCard/getBusinessReminderCardLogs",queryTable).then(resp=>{
        if(resp.success){
          this.dataSourceLog=resp.result
        }
      })
    },
    initTable(){

    },
    showByCardNo(record){
      this.$router.push({path: '/networkAccess/registrationSelect', query: {id: record.id}});
    },
    showTaskList(){
      let info = {
        info: this.customer
      };
      this.$emit("goLists",info)
    },
  }
}

</script>