123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342 |
- <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>
|