|
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258 |
- <template>
- <div style="font-size: 13px; color: rgb(209, 65, 65);margin-left: 20px;">
- 注:目前仅支持中国工商银行贵州省分行、中国工商银行股份有限公司贵州省分行、农业银行、部互联网发行、
- 世纪恒通、工行微ETC、工总行直连模式三、贵州农信联社、贵州工行微ETC、世纪恒通GH查询下黑原因!
- </div>
- <div class="top">
- <!-- 输入框 -->
- <div class="topstyle">
- <span style="margin-right: 10px; width: 40px">卡号</span>
- <el-input v-model="input4" placeholder="请输入卡号"> </el-input>
- </div>
- <!-- 日期框 -->
- <div class="topstyle">
- <el-date-picker
- v-model="value1"
- type="datetime"
- placeholder="开始日期"
- format="YYYY/MM/DD hh:mm:ss"
- />
- <!-- <span>-</span> -->
- <!-- <el-button>至</el-button> -->
- <el-date-picker
- v-model="value1"
- type="datetime"
- placeholder="结束日期"
- 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="value1" style="width: 100px">
- <el-option label="下黑" value="shanghai" />
- <el-option label="反白" value="beijing" />
- </el-select>
- </div>
- <!-- 按钮 -->
- <div class="topstyle">
- <el-button v-model="input4" 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="dialogFormVisible = true">添加</el-button>
- <el-dialog v-model="dialogFormVisible" title="卡黑名单-操作(下黑反白)">
- <el-form :model="form">
- <el-form-item label="卡号:" :label-width="150">
- <el-input v-model="form.name" style="width: 215px" />
- </el-form-item>
- <el-form-item label="黑名单类型:" :label-width="150">
- <el-select v-model="form" placeholder="请选择黑名单类型">
- <el-option label="卡挂失" value="shanghai" />
- <el-option label="无卡挂起" value="beijing" />
- <el-option label="无卡销售" value="shanghai" />
- <el-option label="账户透支" value="beijing" />
- <el-option label="合作机构黑名单" value="shanghai" />
- <el-option label="车型不符" value="beijing" />
- <el-option label="储值卡余额不足" value="shanghai" />
- </el-select>
- </el-form-item>
- <el-form-item label="状态类型:" :label-width="150">
- <el-select v-model="form.region" placeholder="请选择状态类型">
- <el-option label="下黑" value="shanghai" />
- <el-option label="反白" value="beijing" />
- </el-select>
- </el-form-item>
- <el-form-item label="原因:" :label-width="150">
- <el-input v-model="form.desc" 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>
- <div style="padding-top: 12px">
- <el-table :data="tableData" border style="width: 100%">
- <el-table-column property="date1" label="序号" width="60" />
- <el-table-column property="date2" label="卡号" width="120" />
- <el-table-column property="date3" label="黑名单类型" width="100" />
- <el-table-column property="date4" label="黑名单生效时间" width="170" />
- <el-table-column property="date5" label="状态" width="60" />
- <el-table-column property="date6" label="黑名单反白时间" width="130" />
- <el-table-column property="date7" label="下黑操作工号" width="110" />
- <el-table-column property="date8" label="下黑原因" width="200" />
- <el-table-column property="date9" label="反白操作工号" width="130" />
- <el-table-column property="date10" 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="form1" style="padding-top: 12px">
- <el-form-item label="卡号:" :label-width="150">
- <el-input v-model="form1.data" style="width: 215px" disabled />
- </el-form-item>
- </el-form>
- <el-form :model="form1">
- <el-form-item label="车辆号:" :label-width="150">
- <el-input v-model="form1.data1" style="width: 215px" disabled />
- </el-form-item>
- </el-form>
- <el-form :model="form1">
- <el-form-item label="机构名称:" :label-width="150">
- <el-input v-model="form1.data2" style="width: 215px" disabled />
- </el-form-item>
- </el-form>
- <el-form :model="form1">
- <el-form-item label="黑名单类型:" :label-width="150">
- <el-input v-model="form1.data3" style="width: 215px" disabled />
- </el-form-item>
- </el-form>
- <span class="as-gravity-center" style="font-size: 22px">黑名单上传日志</span>
- <el-form :model="form1" style="padding-top: 12px">
- <el-form-item label="上传日志:" :label-width="150" style="color: rgb(209, 65, 65)">
- <el-input v-model="form1.data4" type="textarea" disabled />
- </el-form-item>
- </el-form>
- <span class="as-gravity-center" style="font-size: 22px">渠道下黑原因</span>
- <el-form :model="form1" style="padding-top: 12px">
- <el-form-item label="查询结果:" :label-width="150" style="color: rgb(209, 65, 65)">
- <el-input v-model="form1.data5" style="width: 215px" disabled />
- </el-form-item>
- </el-form>
- <el-form :model="form1">
- <el-form-item label="下黑原因:" :label-width="150" style="color: rgb(209, 65, 65)">
- <el-input v-model="form1.data6" type="textarea" disabled />
- </el-form-item>
- </el-form>
- <template #footer>
- <span>
- <el-button @click="dialogFormVisible1 = false">关闭</el-button>
- </span>
- </template>
- </el-dialog>
- </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 } from 'vue'
- import { useRoute, useRouter } from 'vue-router'
- import { Calendar, Search, Refresh, Plus } from '@element-plus/icons-vue'
- import type { ElTable } from 'element-plus'
-
- const input3 = ref('')
- const input4 = ref('')
- const value1 = ref('')
-
- function reset() {}
- function search() {}
- function addTo() {}
- const dialogFormVisible = ref(false)
- const dialogFormVisible1 = ref(false)
- const form1 = reactive({
- data: '52011640230217310678',
- data1: '云AG9L76',
- data2: '中国工商银行贵州省分行',
- data3: '账户透支黑名单',
- data4: '未查到黑名单上传日志!',
- data5: '成功',
- data6:
- '银行卡号:621476*********6594,总欠额:229.78元,最后一次补扣时间:2022-05-09 07:31:06,失败原因:总行处理失败:帐户余额不足,请保证余额充足系统每天会自动补扣',
- })
- const form = reactive({
- name: '',
- region: '',
- date1: '',
- date2: '',
- delivery: false,
- type: [],
- resource: '',
- desc: '',
- })
-
- interface User {
- date1: string
- date2: string
- date3: string
- date4: string
- date5: string
- date6: string
- date7: string
- date8: string
- date9: string
- date10: string
- date11: 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[] = [
- {
- date1: '1',
- date2: '52011640230217310678',
- date3: '账户透支',
- date4: '2020-12-19T03:41:04',
- date5: '在黑',
- date6: '',
- date7: 'ETCGsyh002',
- date8: '车牌尾号L76欠费:229.78元;于20201219进入黑名单',
- date9: '',
- date10: '',
- date11: '',
- },
- {
- date1: '2',
- date2: '52011640230217310678',
- date3: '账户透支',
- date4: '2020-12-19T03:41:04',
- date5: '在黑',
- date6: '',
- date7: 'ETCGsyh002',
- date8: '车牌尾号L76欠费:229.78元;于20201219进入黑名单',
- date9: '',
- date10: '',
- date11: '',
- },
- {
- date1: '3',
- date2: '52011640230217310678',
- date3: '账户透支',
- date4: '2020-12-19T03:41:04',
- date5: '在黑',
- date6: '',
- date7: 'ETCGsyh002',
- date8: '车牌尾号L76欠费:229.78元;于20201219进入黑名单',
- date9: '',
- date10: '',
- date11: '',
- },
- ]
- </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>
|