tnc-fe/src/views/networkAccess/userStatistics.vue

<template>
  <div>
    <a-card :bordered="false">
      <div>
<!--        <a-tabs v-has="'user:userStatistics:tab'" :active-key="currentTab" default-active-key="all"-->
<!--                @change="tabChange">-->
<!--          <a-tab-pane key="all" :tab="tabAll"></a-tab-pane>-->
<!--          <a-tab-pane key="undo" :tab="tabUndo"></a-tab-pane>-->
<!--          <a-tab-pane key="uncheck" :tab="tabUncheck"></a-tab-pane>-->
<!--          <a-tab-pane key="checked" :tab="tabChecked"></a-tab-pane>-->
<!--        </a-tabs>-->

<!--        <a-tabs v-has="'admin:userStatistics:tab'" :active-key="currentTab" default-active-key="all"-->
<!--                @change="tabChange">-->
<!--          <a-tab-pane key="all" :tab="tabAll"></a-tab-pane>-->
<!--          <a-tab-pane key="undo" :tab="tabUndo"></a-tab-pane>-->
<!--          <a-tab-pane key="uncheck" :tab="tabUncheck"></a-tab-pane>-->
<!--          <a-tab-pane key="checked" :tab="tabChecked"></a-tab-pane>-->
<!--          <a-tab-pane key="del" :tab="tabDelCheck"></a-tab-pane>-->
<!--        </a-tabs>-->
      </div>


      <!-- 查询区域 -->
      <div class="table-page-search-wrapper">
        <a-form layout="inline" @keyup.enter.native="searchQuery">
          <a-row :gutter="24">
            <a-col :xl="6" :lg="7" :md="8" :sm="24">
              <a-form-item label="客户名称">
                <j-input placeholder="请输入客户名称" v-model="queryParam.cardName"></j-input>
              </a-form-item>
            </a-col>
            <a-col :xl="6" :lg="7" :md="8" :sm="24">
              <a-form-item label="证件编号">
                <j-input placeholder="请输入证件编号" v-model="queryParam.cardNo"></j-input>
              </a-form-item>
            </a-col>
            <a-col :xl="6" :lg="7" :md="8" :sm="24">
              <a-form-item label="创建人营业厅地址">
                <j-input placeholder="请输入营业厅地址" v-model="queryParam.businessAddress"></j-input>
              </a-form-item>
            </a-col>



            <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
              <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
              <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
              <a @click="handleToggleSearch" style="margin-left: 8px">
                {{ toggleSearchStatus ? '收起' : '展开' }}
                <a-icon :type="toggleSearchStatus ? 'up' : 'down'"/>
              </a>
            </span>
            </a-col>


          </a-row>
          <template v-if="toggleSearchStatus">
          <a-row  :gutter="24">

            <a-col :span="6">
              <a-form-model-item label="  判研结果 " :labelCol="{ span:5}"   :wrapperCol="{ span: 8 }">
                <a-select placeholder="请选择判研结果"  v-model="queryParam.numberResults" >
                  <a-select-option v-for="item in optionsWithDisabled"   :value="item.value">
                    {{ item.text }}
                  </a-select-option>
                </a-select>
              </a-form-model-item>


            </a-col>
            <a-col :span="6">
              <a-form-item label="  办理电话 " :labelCol="{ span:5}"   :wrapperCol="{ span: 8 }">
                <j-input placeholder="请输入办理电话" v-model="queryParam.newPhone"></j-input>
              </a-form-item>
            </a-col>

            <a-col :span="6">
              <a-form-item label="  创建人 " :labelCol="{ span:5}"   :wrapperCol="{ span: 8 }">
                <j-input placeholder="请输入创建人" v-model="queryParam.createBy"></j-input>
              </a-form-item>
            </a-col>

          </a-row>

          <a-row>
            <a-col :span="11" >
              <a-form-item label="创建时间"  prop="industry"      :labelCol="{ span:9}"   :wrapperCol="{ span: 10 }">
                <j-date :show-time="true" date-format="YYYY-MM-DD" placeholder="请选择开始时间" class="query-group-cust"
                        id ="cardStartTime"  v-model="queryParam.createDateStart" ></j-date>
                <span class="query-group-split-cust"></span>
                <j-date :show-time="true" date-format="YYYY-MM-DD" placeholder="请选择结束时间" class="query-group-cust"
                        id="cardEndTime"  v-model="queryParam.createDateEnd" ></j-date>
              </a-form-item>
            </a-col>

            </a-row>
          </template>
        </a-form>
      </div>

      <!-- 操作按钮区域 -->
      <div class="table-operator">
        <a-button type="primary" icon="download" @click="handleExportXls('入网统计')">导出</a-button>
        <!-- 高级查询区域 -->
        <a-dropdown v-if="selectedRowKeys.length > 0">
          <a-menu slot="overlay">
            <a-menu-item key="1" @click="batchDel" v-has="'access:check:list:delete'">
              <a-icon type="delete"/>
              删除
            </a-menu-item>
          </a-menu>
<!--          <a-button style="margin-left: 8px"> 批量操作-->
<!--            <a-icon type="down"/>-->
<!--          </a-button>-->
        </a-dropdown>
      </div>

      <!-- table区域-begin -->
      <div>
        <div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">
          <i class="anticon anticon-info-circle ant-alert-icon"></i> 已选择 <a
          style="font-weight: 600">{{ selectedRowKeys.length }}</a>项
          <a style="margin-left: 24px" @click="onClearSelected">清空</a>
        </div>

        <a-table
          ref="table"
          size="middle"
          :scroll="{x:true}"
          bordered
          rowKey="id"
          :columns="columns"
          :dataSource="dataSource"
          :pagination="ipagination"
          :loading="loading"
          :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
          class="j-table-force-nowrap"
          @change="handleTableChange">


          <template slot="action" slot-scope="text, record">
            <div>
            <span v-has="'userStatistics:list:update'" v-show=" currentTab != 'del'">
              <a @click="showImproveAndUpload(record)">修改</a>
              <a-divider type="vertical"/>
            </span>

              <span v-has="'userStatistics:list:update:admin'" v-show=" currentTab != 'del'">
              <a @click="showImproveAndUploadAdmin(record)">修改</a>
              <a-divider type="vertical"/>
            </span>


              <span v-has="'userStatistics:list:notice'" v-show=" currentTab != 'del'">
              <a @click="noticeDeal(record)">通知</a>
              <a-divider type="vertical"/>
            </span>

              <span v-has="'userStatistics:list:restore:id'" v-show=" currentTab  == 'del'">
              <a @click="restoreById(record)">恢复</a>
              <a-divider type="vertical"/>
            </span>

              <span v-has="'userStatistics:list:remove:id'" v-show=" currentTab  == 'del'">
              <a @click="removeById(record)">彻底删除</a>
              <a-divider type="vertical"/>
            </span>


<!--              <a-dropdown v-show =" currentTab != 'del'">-->
<!--                <a class="ant-dropdown-link">更多-->
<!--                  <a-icon type="down"/>-->
<!--                </a>-->
<!--                <a-menu slot="overlay">-->

<!--                  <a-menu-item v-has="'del:userStatistics:list:row:delete'">-->
<!--                    <a @click="delFlagById(record)">删除</a>-->
<!--                  </a-menu-item>-->

<!--                </a-menu>-->
<!--              </a-dropdown>-->
            </div>

          </template>
          <template v-slot:createBy="text, record">
            <a @click="showByCreateBy(record)">{{text}}</a>
          </template>
          <template v-slot:sysBusinessHall="text, record">
            <div>{{getSysCompany(text)}}</div>
          </template>
          <template v-slot:cardNo="text, record">
            <a @click="showByCardNo(record)">{{text}}</a>
          </template>
          <template v-slot:cardName="text, record">
            <a @click="showByCardName(record)">{{text}}</a>
          </template>
          <template v-slot:phone="text, record">
            <a @click="showByPhone(record)">{{text}}</a>
          </template>
          <template v-slot:numberResults="text, record">
            <a-badge :status="text | statusTypeFilter" :text="text | statusFilter"/>
          </template>
          <template v-slot:newPhone="text, record">
            <div>{{newPhone(text)}}</div>
          </template>
          <template v-slot:newBusinessAddress="text, record">
            <div>{{getSysCompany(text)}}</div>
          </template>
          <template v-slot:rowIndex="text,records,index">
            {{ (ipagination.current - 1) * ipagination.pageSize + Number(index) + 1 }}
          </template>

        </a-table>

      </div>

    </a-card>


  </div>
</template>

<script>
import {getAction, postAction,deleteAction} from "@api/manage";
import {JeecgListMixin} from '@/mixins/JeecgListMixin'
import '@/assets/less/TableExpand.less'

export default {
  name: "userStatistics",
  mixins: [JeecgListMixin],
  inject: ['closeCurrent'],
  data() {
    return {

      optionsWithDisabled:
        [{
          text: '非高危',
          value: '1',
        }, {
          text: '已报关停',
          value: '2',

        }, {
          text: '已报蓝名单',
          value: '3',
        },{
          text: '已报紫名单',
          value: '4',
        }],
      company:'',
      sysCompany: [],
      ipagination:{
        current: 1,
        pageSize: 10,
        pageSizeOptions: ['10', '20', '30','300'],
        showTotal: (total, range) => {
          return range[0] + "-" + range[1] + " 共" + total + "条"
        },
        showQuickJumper: true,
        showSizeChanger: true,
        total: 0
      },
      numberResults: null,
      /**统计标签*/
      currentTab: 'all',
      tabAll: '全部（0）',
      tabUndo: '非高危（0）',
      tabUncheck: '已报蓝紫名单（0）',
      tabChecked: '已报关停（0）',
      tabDelCheck: "已删除（0）",
      allCount: 0,
      tabUndoCount: 0,
      tabUncheckCount: 0,
      tabCheckedCount: 0,
      delCount: 0,
      /* table选中keys*/
      selectedRowKeys: [],
      /* table选中records*/
      selectionRows: [],
      /* 查询条件-请不要在queryParam中声明非字符串值的属性 */
      queryParam: {},
      url: {
        getCompany: "/sysCompany/list",
        typeCount: "/businessReminderCard/type/count",
        list: "/businessReminderCard/list",
        delete: "/businessReminderCard/delete/flagById",
        removeById: "/businessReminderCard/deleteById",
        restoreById: "/businessReminderCard/restoreById",
        notice: "/smsCheck/customerInfo/notice",
        exportXlsUrl: "/businessReminderCard/exportXls",
      },
      /**表单
       * 入网用户统计：身份证号/姓名/办理电话/创建人/创建人所属营业厅/更新人/更新人营业厅/研判结果/
       * */
      columns: [
        {
          title: '#',
          dataIndex: '',
          key: 'rowIndex',
          width: 60,
          align: "center",
          scopedSlots: {customRender: 'rowIndex'}
        },
        {
          title: '证件编号',
          align: "center",
          sorter: true,
          dataIndex: 'cardNo',
          scopedSlots: {customRender: 'cardNo'}

        }, {
          title: '客户名称',
          align: "center",
          sorter: true,
          dataIndex: 'cardName'
         // scopedSlots: {customRender: 'cardName'}
        }, {
          title: '创建人',
          align: "center",
          sorter: true,
          dataIndex: 'createBy'
         // scopedSlots: {customRender: 'createBy'}
        }, {
          title: '创建时间',
          align: "center",
          sorter: true,
          dataIndex: 'createTime'
        }, {
          title: '创建人营业厅地址',
          align: "center",
          sorter: true,
          dataIndex: 'businessAddress'
          //scopedSlots: {customRender: 'sysBusinessHall'}

        }, {
          title: '更新人',
          align: "center",
          sorter: true,
          dataIndex: 'updateBy'
        }, {
          title: '更新人营业厅',
          align: "center",
          sorter: true,
          dataIndex: 'newBusinessAddress'
          //scopedSlots: {customRender: 'newBusinessAddress'}
          // },
          // {
          //   title: '拨测联系电话',
          //   align: "center",
          //   sorter: true,
          //   dataIndex: 'phone',
          //   scopedSlots: {customRender: 'phone'}
          //   /* customRender: function (text, record, index) {
          //      return "<span style='color: #1890FF'>{{text}}</span>"
          //    }*/
          // },
          // {
          //   title: '拨测结果',
          //   align: "center",
          //   sorter: true,
          //   dataIndex: 'calltestResults',
          //   customRender: function (text, record, index) {
          //     if (text === '1') {
          //       return '关机';
          //     } else if (text === '2') {
          //       return '未接通';
          //     } else if (text === '3') {
          //       return '可接通不知晓入网事宜';
          //     } else if (text === '4') {
          //       return '可接通认可办理';
          //     }
          //     return '';
          //   }
          // },
          // {
          //   title: '现用号码运营商',
          //   align: "center",
          //   dataIndex: 'operator',
          //   customRender: function (text, record, index) {
          //     if (text === '1') {
          //       return '本地运营商';
          //     } else if (text === '2') {
          //       return '异地运营商';
          //     }
          //     return ''
          //   }
          // },
          // {
          //   title: '现用号码运营商类型',
          //   align: "center",
          //   dataIndex: 'operatorType',
          //   customRender: function (text, record, index) {
          //     if (text === '1') {
          //       return '移动';
          //     } else if (text === '2') {
          //       return '联通';
          //     } else if (text === '3') {
          //       return '电信';
          //     } else if (text === '4') {
          //       return '其他';
          //     }
          //     return ''
          //   }
          // },
          // {
          //   title: '现用号码使用年限',
          //   align: "center",
          //   sorter: true,
          //   dataIndex: 'useLife'
          // },
          // {
          //   title: '客户名下有无电信号码',
          //   align: "center",
          //   dataIndex: 'isDxNumber',
          //   customRender: function (text, record, index) {
          //     if (text == '1') {
          //       return '有';
          //     } else if (text == '2') {
          //       return '无';
          //     }
          //     return '';
          //   }
          // },
          // {
          //   title: '创建人',
          //   align: "center",
          //   dataIndex: 'createBy'
          // },
          // {
          //   title: '创建时间',
          //   align: "center",
          //   sorter: true,
          //   dataIndex: 'createTime'
          // },
          // {
          //   title: '更新人',
          //   align: "center",
          //   dataIndex: 'updateBy'
          // },
          // {
          //   title: '更新使时间',
          //   align: "center",
          //   sorter: true,
          //   dataIndex: 'updateTime'
          // },
        }, {
          title: '办理电话',
          align: "center",
          sorter: true,
          width: 200,
          dataIndex: 'newPhone',
          scopedSlots: {customRender: 'newPhone'}
        },
        {
          title: '研判结果',
          align: "center",
          sorter: true,
          dataIndex: 'numberResults',
          scopedSlots: {customRender: 'numberResults'}
          /*customRender: function (text, record, index) {
            if (text == '1') {
              return '非高危';
            } else if (text == '2') {
              return '已报蓝紫名单';
            } else if (text == '3') {
              return '已报关停';
            }
            return '';
          }*/
        },
        {
          title: '操作',
          dataIndex: 'action',
          align: "center",
          scopedSlots: {customRender: 'action'}
        }
      ],
    }
  },
  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]
    }
  },
  created() {
    /**获取研判结果统计数*/
    this.typeCount();
    this.getSysCompanyData();


  },
  methods: {
    getSysCompanyData(){
      let data = {

      };
      getAction(this.url.getCompany, data).then((res) => {
        if (res.success) {
          let result = res.result;
          console.log(result + "result");
          if (result != null) {
            this.sysCompany = result;
          }
        }
      })
    },
    getSysCompany(id) {

      for (var item of this.sysCompany) {

        for (var it of item.sysBusinessHallList) {
          if (it.id === id) {
            return it.name
          }
        }

      }
    },


    newPhone(newPhones){
      var phone='';
      newPhones = newPhones.split(',');
      for (var item of  newPhones) {
        if (item.match(RegExp('newPhone1+')) && item.replace('newPhone1+','')!==''){
          phone=item.replace('newPhone1+','')
        }
        if (item.match(RegExp('newPhone2+'))&& item.replace('newPhone2+','')!==''){
          phone+=item.replace('newPhone2+',' ')
        }
        if (item.match(RegExp('newPhone3+'))&& item.replace('newPhone3+','')!==''){
          phone+=item.replace('newPhone3+',' ')
        }
        if (item.match(RegExp('newPhone4+'))&& item.replace('newPhone4+','')!==''){
          phone+=item.replace('newPhone4+',' ')
        }
        if (item.match(RegExp('newPhone5+'))&& item.replace('newPhone5+','')!==''){
          phone+=item.replace('newPhone5+',' ')
        }
      }
      return phone
    },

    showByCreateBy(record){

      let queryParam = {
        "createBy":record.createBy,
        "cardNo":this.queryParam.cardNo,
        "cardName":this.queryParam.cardName,
        "newPhone":this.queryParam.newPhone,
        "createDateStart":this.queryParam.createDateStart,
        "createDateEnd":this.queryParam.createDateEnd,
        "sysBusinessHall":this.queryParam.sysBusinessHall
      }
      this.loadData(null,queryParam);
      this.selectedRowKeys = [];
      this.selectionRows = [];

    },
    showByBusinessAddresse(record){
      let queryParam = {
        "businessAddress":record.businessAddress,
        "cardNo":this.queryParam.cardNo,
        "cardName":this.queryParam.cardName,
        "newPhone":this.queryParam.newPhone,
        "createDateStart":this.queryParam.createDateStart,
        "createDateEnd":this.queryParam.createDateEnd
      }
      this.loadData(null,queryParam);
      this.selectedRowKeys = [];
      this.selectionRows = [];

    },
    showByPhone(record){
      let queryParam = {
        "phone":record.phone,
        "cardNo":this.queryParam.cardNo,
        "cardName":this.queryParam.cardName,
        "newPhone":this.queryParam.newPhone,
        "createDateStart":this.queryParam.createDateStart,
        "createDateEnd":this.queryParam.createDateEnd,
        "sysBusinessHall":this.queryParam.sysBusinessHall
      }
      this.loadData(null,queryParam);
      this.selectedRowKeys = [];
      this.selectionRows = [];

    },
    showByCardNo(record){
      // let queryParam = {
      //   "cardNo":record.cardNo,
      //   "cardName":this.queryParam.cardName
      // }
      // this.loadData(null,queryParam);
      // this.selectedRowKeys = [];
      // this.selectionRows = [];

      // this.$router.go({
      //   path:'/networkAccess/registration',
      //   query: {
      //     close:true
      //   }
      // })
      this.$router.push({path: '/networkAccess/registrationSelect', query: {id: record.id,cardNo: record.cardNo,isDisabled:true}});
    },
    showByCardName(record){
      let queryParam = {
        "cardNo":this.queryParam.cardNo,
        "cardName":record.cardName,
        "newPhone":this.queryParam.newPhone,
        "createDateStart":this.queryParam.createDateStart,
        "createDateEnd":this.queryParam.createDateEnd,
        "sysBusinessHall":this.queryParam.sysBusinessHall
      }
      this.loadData(null,queryParam);
      this.selectedRowKeys = [];
      this.selectionRows = [];

    },

    /**标签监听*/
    tabChange(key) {
      this.url.list = "/businessReminderCard/list"
      if (key == "all") {
        this.numberResults = null;
        this.queryParam.numberResults_MultiString = this.numberResults;
        this.currentTab = 'all';
      } else if (key == "undo") {
        this.numberResults = "1";
        this.queryParam.numberResults_MultiString = this.numberResults;
        this.currentTab = 'undo';
      } else if (key == "uncheck") {
        this.numberResults = "2";
        this.queryParam.numberResults_MultiString = this.numberResults;
        this.currentTab = 'uncheck';
      } else if (key == "checked") {
        this.numberResults = "3";
        this.queryParam.numberResults_MultiString = this.numberResults;
        this.currentTab = 'checked';
      } else if (key == "del") {
        this.numberResults = null
        this.url.list = '/businessReminderCard/delete/list'
        this.queryParam.numberResults_MultiString = this.numberResults;
        this.currentTab = 'del';
      }

      this.loadData(1);

    },

    searchQuery() {
      this.loadData(1);
      this.selectedRowKeys = [];
      this.selectionRows = [];
      //this.loadTabNumber(this.task.id);
    },
    /**统计数量*/
    typeCount() {
      let that = this;
      let url = that.url.typeCount;
      getAction(url, {}).then(res => {
        if (res.success) {
          let result = res.result;
          that.tabAll = '全部（' + result.count + '）';
          console.log(that.tabAll)
          that.tabUndo = '非高危（' + result.unCount + '）';
          that.tabUncheck = '已报蓝紫名单（' + result.uncheckCount + '）';
          that.tabChecked = '已报关停（' + result.closeCount + '）';
          that.tabDelCheck = '已删除（' + result.delCount + '）';
        } else {

        }
      }).finally(() => {

      })

    },
    getDate(){
      var today = new Date();
      var dd = String(today.getDate()).padStart(2, '0');
      var mm = String(today.getMonth() + 1).padStart(2, '0');
      var yyyy = today.getFullYear();

      today =  yyyy+'-'+ mm+'-' +dd;
      return today;
    },
    /**修改*/
    showImproveAndUpload(record) {
      if (!record.createTime.match(RegExp(this.getDate()))){
        this.$message.warning('此输入非天创建 禁止修改', 3);
        return
      }

      this.$router.push({path: '/networkAccess/registrationUpdate', query: {id: record.id,cardNo: record.cardNo}});
    },
    showImproveAndUploadAdmin(record) {
      this.$router.push({path: '/networkAccess/registrationHide', query: {id: record.id}});
    },

    /**详情*/
    showCheckDetail(record) {
      let id = record.id;
      this.$router.push({path: '/networkAccess/registrationDetails', query: {id: record.id}});
    },
    /**删除*/
    delFlagById(record){
      let id = record.id;
      let that = this;
      let url = that.url.delete;
      deleteAction(url, {id: id}).then(res => {
        if (res.success) {
          this.typeCount();
          this.$message.success("删除成功", 7);
          this.loadData(1);
        } else {
          this.$message.error("删除失败", 7);
        }
      });
    },
    /**彻底删除*/
    removeById(record) {
      let id = record.id;
      let that = this;
      let url = that.url.removeById;
      getAction(url, {id: id}).then(res => {
        if (res.success) {
          this.typeCount();
          this.$message.success("删除成功", 7);
          this.loadData(1);
        } else {
          this.$message.error("删除失败", 7);
        }
      });
    },
    /**恢复*/
    restoreById(record) {
      let id = record.id;
      let that = this;
      let url = that.url.restoreById;
      getAction(url, {id: id}).then(res => {
        if (res.success) {
          this.typeCount();
          this.$message.success("恢复成功", 7);
          this.loadData(1);
        } else {
          this.$message.error("恢复失败", 7);
        }
      });
    },
    /**通知*/
    noticeDeal(record) {
      let that = this;
      that.$message.info('已通知业务员，对入网信息进行修改！');
    }

  },
}
</script>

<style scoped>

</style>