test-web/src/views/shengbo/blacklistQuery/blacklistQuery.vue

<template>
  <div class="OBU-query content-warpper">
    <div style="font-size: 10px; color: rgb(209, 65, 65);margin-left: 15px;">
    注：目前仅支持中国工商银行贵州省分行、中国工商银行股份有限公司贵州省分行、农业银行、部互联网发行、
    世纪恒通、工行微ETC、工总行直连模式三、贵州农信联社、贵州工行微ETC、世纪恒通GH查询下黑原因！
  </div>
  <div class="top">
    <!-- 输入框 -->
    <div class="topstyle">
      <span style="width: 40px">卡号</span>
      <el-input v-model="formdata.ardNumber" placeholder="请输入卡号" style="width: 220px">
      </el-input>
    </div>
    <!-- 日期框 -->
    <div class="topstyle">
      <el-date-picker
        v-model="formdata.startDate"
        value-format="YYYY-MM-DD hh:mm:ss"
        type="datetime"
        placeholder="开始日期"
      />
      <!-- <span>-</span> -->
      <!-- <el-button>至</el-button> -->
      <el-date-picker
        v-model="formdata.endDate"
        type="datetime"
        placeholder="结束日期"
        value-format="YYYY-MM-DD hh:mm:ss"
        style="margin-left: 5px"
      />
    </div>
    <!-- 下拉框 -->
    <div class="topstyle">
      <span style="margin-right: 10px">查询类型</span>
      <el-select v-model="formdata.queryType" style="width: 100px">
        <el-option label="下黑" value="下黑" />
        <el-option label="反白" value="下黑" />
      </el-select>
    </div>
    <!-- 按钮 -->
    <div class="topstyle">
      <el-button type="success" :icon="Search" @click="search">搜索</el-button>
      <el-button type="warning" :icon="Refresh" @click="reset">重置</el-button>
      <!-- <el-button type="primary" :icon="Plus" @click="addTo">添加</el-button> -->
    </div>
  </div>
  <!-- 弹窗 -->
  <!-- <div>
    <el-dialog v-model="dialogFormVisible">
      <span class="as-gravity-center" style="font-size: 25px">卡黑名单-操作(下黑反白)</span>

      <el-form :model="addtodata" style="padding-top: 22px" :rules="rules">
        <el-form-item prop="ardNumber" label="卡号：" :label-width="110">
          <el-input v-model="addtodata.ardNumber" style="width: 215px" />
        </el-form-item>
        <el-form-item prop="blacklistType" label="黑名单类型：" :label-width="110">
          <el-select v-model="addtodata.blacklistType" placeholder="请选择黑名单类型">
            <el-option label="卡挂失" value="卡挂失" />
            <el-option label="无卡挂起" value="无卡挂起" />
            <el-option label="无卡销售" value="无卡销售" />
            <el-option label="账户透支" value="账户透支" />
            <el-option label="合作机构黑名单" value="合作机构黑名单" />
            <el-option label="车型不符" value="车型不符" />
            <el-option label="储值卡余额不足" value="储值卡余额不足" />
          </el-select>
        </el-form-item>
        <el-form-item prop="statusType" label="状态类型：" :label-width="110">
          <el-select v-model="addtodata.statusType" placeholder="请选择状态类型">
            <el-option label="下黑" value="下黑" />
            <el-option label="反白" value="反白" />
          </el-select>
        </el-form-item>
        <el-form-item prop="reason" label="原因：" :label-width="110">
          <el-input v-model="addtodata.reason" type="textarea" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogFormVisible = false">关闭</el-button>
          <el-button type="primary" @click="dialogFormVisible = false">提交</el-button>
        </span>
      </template>
    </el-dialog>
  </div> -->
  <div style="padding-top: 12px">
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column type="index" label="序号" width="60" />
      <el-table-column prop="ardNumber" label="卡号" width="110" />
      <el-table-column prop="blacklistType" label="黑名单类型" width="100" />
      <el-table-column prop="effectiveTimeOfBlacklist" label="黑名单生效时间" width="160" />
      <el-table-column prop="state" label="状态" width="60" />
      <el-table-column prop="blacklistAntiWhiteTime" label="黑名单反白时间" width="130" />
      <el-table-column prop="xiaheiOperatorNo" label="下黑操作工号" width="110" />
      <el-table-column prop="causeOfBlack" label="下黑原因" width="200" />
      <el-table-column prop="antiWhiteOperatorNo" label="反白操作工号" width="110" />
      <el-table-column prop="negativeeasons" label="反白原因" width="110" />
      <el-table-column label="操作" width="90">
        <el-button @click="dialogFormVisible1 = true" style="border-style: none">详情</el-button>
      </el-table-column>
    </el-table>
    <el-dialog v-model="dialogFormVisible1">
      <span class="as-gravity-center" style="font-size: 22px">基本信息</span>
      <el-form :model="detailsPopup" style="padding-top: 12px">
        <el-form-item label="卡号：" :label-width="100">
          <el-input v-model="detailsPopup.ardNumber" style="width: 215px" disabled />
        </el-form-item>
        <el-form-item label="车辆号：" :label-width="100">
          <el-input v-model="detailsPopup.vehicleNumber" style="width: 215px" disabled />
        </el-form-item>
        <el-form-item label="机构名称：" :label-width="100">
          <el-input v-model="detailsPopup.organizationName" style="width: 215px" disabled />
        </el-form-item>
        <el-form-item label="黑名单类型：" :label-width="100">
          <el-input v-model="detailsPopup.blacklistType" style="width: 215px" disabled />
        </el-form-item>
      </el-form>
      <span class="as-gravity-center" style="font-size: 22px">黑名单上传日志</span>
      <el-form :model="detailsPopup" style="padding-top: 12px">
        <el-form-item label="上传日志：" :label-width="100" style="color: rgb(209, 65, 65)">
          <el-input v-model="detailsPopup.uploadLog" type="textarea" disabled />
        </el-form-item>
      </el-form>
      <span class="as-gravity-center" style="font-size: 22px">渠道下黑原因</span>
      <el-form :model="detailsPopup" style="padding-top: 12px">
        <el-form-item label="查询结果：" :label-width="100" style="color: rgb(209, 65, 65)">
          <el-input v-model="detailsPopup.queryResults" style="width: 215px" disabled />
        </el-form-item>
        <el-form-item label="下黑原因：" :label-width="100" style="color: rgb(209, 65, 65)">
          <el-input v-model="detailsPopup.causeOfBlack" type="textarea" disabled />
        </el-form-item>
      </el-form>
      <template #footer>
        <span>
          <el-button @click="dialogFormVisible1 = false">关闭</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
  </div>
  <!-- <div style="padding-top: 12px" class="as-gravity-center-end">
    <el-pagination :page-sizes="[10, 20, 30, 40]" layout="sizes, prev, pager, next" :total="1000" />
  </div> -->
</template>

<script lang="ts" setup>
import { reactive, ref, toRaw,getCurrentInstance } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { Calendar, Search, Refresh, Plus } from '@element-plus/icons-vue'
import type { ElTable, FormInstance, FormRules } from 'element-plus'
const { proxy }: any = getCurrentInstance()

const dialogFormVisible = ref(false)
const dialogFormVisible1 = ref(false)

const formdata = reactive({
  ardNumber: '', //卡号
  startDate: '', //开始日期
  endDate: '', //结束日期
  queryType: '', //查询类型
})
const addtodata = reactive({
  ardNumber: '', //卡号
  blacklistType: '', //黑名单类型
  statusType: '', //状态类型
  reason: '', //原因
})
//搜索
function search() {
  proxy.$request
    .post('/blacklistquery/queryBlackList',{},
      {
        baseURL: 'http://10.52.0.172:10389',
      }
    )
    .then((res: {}) => {
      console.log(res)
    })
    .catch((err: {}) => {
      console.log(err)
    })
  console.log(toRaw(formdata))
  console.log('发送搜索请求')
}
//重置
function reset() {
  formdata.ardNumber = ''
  formdata.startDate = ''
  formdata.endDate = ''
  formdata.queryType = ''
}
//添加
function addTo() {
  dialogFormVisible.value = true
  console.log(toRaw(addtodata))
  console.log('添加弹窗')
}
const rules = reactive<FormRules>({
  ardNumber: [
    {
      required: true,
      message: '卡号不能为空',
      trigger: 'blur',
    },
  ],
  blacklistType: [
    {
      required: true,
      message: '黑名单类型不能为空',
      trigger: 'blur',
    },
  ],
  statusType: [
    {
      required: true,
      message: '状态类型不能为空',
      trigger: 'blur',
    },
  ],
  reason: [
    {
      required: true,
      message: '原因不能为空',
      trigger: 'blur',
    },
  ],
})

// 详情弹窗
const detailsPopup = reactive({
  ardNumber: '52011640230217310678', //卡号
  vehicleNumber: '云AG9L76', //车辆号
  organizationName: '中国工商银行贵州省分行', //机构名称
  blacklistType: '账户透支黑名单', //黑名单类型
  uploadLog: '未查到黑名单上传日志！', //上传日志
  queryResults: '成功', //查询结果
  causeOfBlack:
    '银行卡号：621476*********6594,总欠额：229.78元,最后一次补扣时间：2022-05-09 07:31:06,失败原因：总行处理失败:帐户余额不足,请保证余额充足系统每天会自动补扣', //下黑原因
})

interface User {
  ardNumber: string //卡号
  blacklistType: string //黑名单类型
  effectiveTimeOfBlacklist: string //黑名单生效时间
  state: string //状态
  blacklistAntiWhiteTime: string //黑名单反白时间
  xiaheiOperatorNo: string //下黑操作工号
  causeOfBlack: string //下黑原因
  antiWhiteOperatorNo: string //反白操作工号
  negativeeasons: string //反白原因
}

const currentRow = ref()
const singleTableRef = ref<InstanceType<typeof ElTable>>()
const setCurrent = (row?: User) => {
  singleTableRef.value!.setCurrentRow(row)
}
const handleCurrentChange = (val: User | undefined) => {
  currentRow.value = val
}
const tableData: User[] = [
  {
    ardNumber: '52011640230217310678',
    blacklistType: '账户透支',
    effectiveTimeOfBlacklist: '2020-12-19 3:41:04',
    state: '在黑',
    blacklistAntiWhiteTime: '',
    xiaheiOperatorNo: 'ETCGsyh002',
    causeOfBlack: '车牌尾号L76欠费:229.78元;于20201219进入黑名单',
    antiWhiteOperatorNo: '',
    negativeeasons: '',
  },
  {
    ardNumber: '52011640230217310678',
    blacklistType: '账户透支',
    effectiveTimeOfBlacklist: '2020-12-19 3:41:04',
    state: '在黑',
    blacklistAntiWhiteTime: '',
    xiaheiOperatorNo: 'ETCGsyh002',
    causeOfBlack: '车牌尾号L76欠费:229.78元;于20201219进入黑名单',
    antiWhiteOperatorNo: '',
    negativeeasons: '',
  },
  {
    ardNumber: '52011640230217310678',
    blacklistType: '账户透支',
    effectiveTimeOfBlacklist: '2020-12-19 3:41:04',
    state: '在黑',
    blacklistAntiWhiteTime: '',
    xiaheiOperatorNo: 'ETCGsyh002',
    causeOfBlack: '车牌尾号L76欠费:229.78元;于20201219进入黑名单',
    antiWhiteOperatorNo: '',
    negativeeasons: '',
  },
  {
    ardNumber: '52011640230217310678',
    blacklistType: '账户透支',
    effectiveTimeOfBlacklist: '2020-12-19 3:41:04',
    state: '在黑',
    blacklistAntiWhiteTime: '',
    xiaheiOperatorNo: 'ETCGsyh002',
    causeOfBlack: '车牌尾号L76欠费:229.78元;于20201219进入黑名单',
    antiWhiteOperatorNo: '',
    negativeeasons: '',
  },
  {
    ardNumber: '52011640230217310678',
    blacklistType: '账户透支',
    effectiveTimeOfBlacklist: '2020-12-19T03:41:04',
    state: '在黑',
    blacklistAntiWhiteTime: '',
    xiaheiOperatorNo: 'ETCGsyh002',
    causeOfBlack: '车牌尾号L76欠费:229.78元;于20201219进入黑名单',
    antiWhiteOperatorNo: '',
    negativeeasons: '',
  },
  {
    ardNumber: '52011640230217310678',
    blacklistType: '账户透支',
    effectiveTimeOfBlacklist: '2020-12-19T03:41:04',
    state: '在黑',
    blacklistAntiWhiteTime: '',
    xiaheiOperatorNo: 'ETCGsyh002',
    causeOfBlack: '车牌尾号L76欠费:229.78元;于20201219进入黑名单',
    antiWhiteOperatorNo: '',
    negativeeasons: '',
  },
  
]
</script>
<style lang="scss" scoped>
.top {
  display: flex;
  //margin-left: 10px;
}
.topstyle {
  display: flex;
  height: 50px;
  margin-right: 10px;
  align-items: center;
  justify-content: flex-start;
}
</style>