You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

blacklistQuery.vue 12KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342
  1. <template>
  2. <div class="OBU-query content-warpper">
  3. <div style="font-size: 10px; color: rgb(209, 65, 65);margin-left: 15px;">
  4. 注:目前仅支持中国工商银行贵州省分行、中国工商银行股份有限公司贵州省分行、农业银行、部互联网发行、
  5. 世纪恒通、工行微ETC、工总行直连模式三、贵州农信联社、贵州工行微ETC、世纪恒通GH查询下黑原因!
  6. </div>
  7. <div class="top">
  8. <!-- 输入框 -->
  9. <div class="topstyle">
  10. <span style="width: 40px">卡号</span>
  11. <el-input v-model="formdata.ardNumber" placeholder="请输入卡号" style="width: 220px">
  12. </el-input>
  13. </div>
  14. <!-- 日期框 -->
  15. <div class="topstyle">
  16. <el-date-picker
  17. v-model="formdata.startDate"
  18. value-format="YYYY-MM-DD hh:mm:ss"
  19. type="datetime"
  20. placeholder="开始日期"
  21. />
  22. <!-- <span>-</span> -->
  23. <!-- <el-button>至</el-button> -->
  24. <el-date-picker
  25. v-model="formdata.endDate"
  26. type="datetime"
  27. placeholder="结束日期"
  28. value-format="YYYY-MM-DD hh:mm:ss"
  29. style="margin-left: 5px"
  30. />
  31. </div>
  32. <!-- 下拉框 -->
  33. <div class="topstyle">
  34. <span style="margin-right: 10px">查询类型</span>
  35. <el-select v-model="formdata.queryType" style="width: 100px">
  36. <el-option label="下黑" value="下黑" />
  37. <el-option label="反白" value="下黑" />
  38. </el-select>
  39. </div>
  40. <!-- 按钮 -->
  41. <div class="topstyle">
  42. <el-button type="success" :icon="Search" @click="search">搜索</el-button>
  43. <el-button type="warning" :icon="Refresh" @click="reset">重置</el-button>
  44. <!-- <el-button type="primary" :icon="Plus" @click="addTo">添加</el-button> -->
  45. </div>
  46. </div>
  47. <!-- 弹窗 -->
  48. <!-- <div>
  49. <el-dialog v-model="dialogFormVisible">
  50. <span class="as-gravity-center" style="font-size: 25px">卡黑名单-操作(下黑反白)</span>
  51. <el-form :model="addtodata" style="padding-top: 22px" :rules="rules">
  52. <el-form-item prop="ardNumber" label="卡号:" :label-width="110">
  53. <el-input v-model="addtodata.ardNumber" style="width: 215px" />
  54. </el-form-item>
  55. <el-form-item prop="blacklistType" label="黑名单类型:" :label-width="110">
  56. <el-select v-model="addtodata.blacklistType" placeholder="请选择黑名单类型">
  57. <el-option label="卡挂失" value="卡挂失" />
  58. <el-option label="无卡挂起" value="无卡挂起" />
  59. <el-option label="无卡销售" value="无卡销售" />
  60. <el-option label="账户透支" value="账户透支" />
  61. <el-option label="合作机构黑名单" value="合作机构黑名单" />
  62. <el-option label="车型不符" value="车型不符" />
  63. <el-option label="储值卡余额不足" value="储值卡余额不足" />
  64. </el-select>
  65. </el-form-item>
  66. <el-form-item prop="statusType" label="状态类型:" :label-width="110">
  67. <el-select v-model="addtodata.statusType" placeholder="请选择状态类型">
  68. <el-option label="下黑" value="下黑" />
  69. <el-option label="反白" value="反白" />
  70. </el-select>
  71. </el-form-item>
  72. <el-form-item prop="reason" label="原因:" :label-width="110">
  73. <el-input v-model="addtodata.reason" type="textarea" />
  74. </el-form-item>
  75. </el-form>
  76. <template #footer>
  77. <span class="dialog-footer">
  78. <el-button @click="dialogFormVisible = false">关闭</el-button>
  79. <el-button type="primary" @click="dialogFormVisible = false">提交</el-button>
  80. </span>
  81. </template>
  82. </el-dialog>
  83. </div> -->
  84. <div style="padding-top: 12px">
  85. <el-table :data="tableData" border style="width: 100%">
  86. <el-table-column type="index" label="序号" width="60" />
  87. <el-table-column prop="ardNumber" label="卡号" width="110" />
  88. <el-table-column prop="blacklistType" label="黑名单类型" width="100" />
  89. <el-table-column prop="effectiveTimeOfBlacklist" label="黑名单生效时间" width="160" />
  90. <el-table-column prop="state" label="状态" width="60" />
  91. <el-table-column prop="blacklistAntiWhiteTime" label="黑名单反白时间" width="130" />
  92. <el-table-column prop="xiaheiOperatorNo" label="下黑操作工号" width="110" />
  93. <el-table-column prop="causeOfBlack" label="下黑原因" width="200" />
  94. <el-table-column prop="antiWhiteOperatorNo" label="反白操作工号" width="110" />
  95. <el-table-column prop="negativeeasons" label="反白原因" width="110" />
  96. <el-table-column label="操作" width="90">
  97. <el-button @click="dialogFormVisible1 = true" style="border-style: none">详情</el-button>
  98. </el-table-column>
  99. </el-table>
  100. <el-dialog v-model="dialogFormVisible1">
  101. <span class="as-gravity-center" style="font-size: 22px">基本信息</span>
  102. <el-form :model="detailsPopup" style="padding-top: 12px">
  103. <el-form-item label="卡号:" :label-width="100">
  104. <el-input v-model="detailsPopup.ardNumber" style="width: 215px" disabled />
  105. </el-form-item>
  106. <el-form-item label="车辆号:" :label-width="100">
  107. <el-input v-model="detailsPopup.vehicleNumber" style="width: 215px" disabled />
  108. </el-form-item>
  109. <el-form-item label="机构名称:" :label-width="100">
  110. <el-input v-model="detailsPopup.organizationName" style="width: 215px" disabled />
  111. </el-form-item>
  112. <el-form-item label="黑名单类型:" :label-width="100">
  113. <el-input v-model="detailsPopup.blacklistType" style="width: 215px" disabled />
  114. </el-form-item>
  115. </el-form>
  116. <span class="as-gravity-center" style="font-size: 22px">黑名单上传日志</span>
  117. <el-form :model="detailsPopup" style="padding-top: 12px">
  118. <el-form-item label="上传日志:" :label-width="100" style="color: rgb(209, 65, 65)">
  119. <el-input v-model="detailsPopup.uploadLog" type="textarea" disabled />
  120. </el-form-item>
  121. </el-form>
  122. <span class="as-gravity-center" style="font-size: 22px">渠道下黑原因</span>
  123. <el-form :model="detailsPopup" style="padding-top: 12px">
  124. <el-form-item label="查询结果:" :label-width="100" style="color: rgb(209, 65, 65)">
  125. <el-input v-model="detailsPopup.queryResults" style="width: 215px" disabled />
  126. </el-form-item>
  127. <el-form-item label="下黑原因:" :label-width="100" style="color: rgb(209, 65, 65)">
  128. <el-input v-model="detailsPopup.causeOfBlack" type="textarea" disabled />
  129. </el-form-item>
  130. </el-form>
  131. <template #footer>
  132. <span>
  133. <el-button @click="dialogFormVisible1 = false">关闭</el-button>
  134. </span>
  135. </template>
  136. </el-dialog>
  137. </div>
  138. </div>
  139. <!-- <div style="padding-top: 12px" class="as-gravity-center-end">
  140. <el-pagination :page-sizes="[10, 20, 30, 40]" layout="sizes, prev, pager, next" :total="1000" />
  141. </div> -->
  142. </template>
  143. <script lang="ts" setup>
  144. import { reactive, ref, toRaw,getCurrentInstance } from 'vue'
  145. import { useRoute, useRouter } from 'vue-router'
  146. import { Calendar, Search, Refresh, Plus } from '@element-plus/icons-vue'
  147. import type { ElTable, FormInstance, FormRules } from 'element-plus'
  148. const { proxy }: any = getCurrentInstance()
  149. const dialogFormVisible = ref(false)
  150. const dialogFormVisible1 = ref(false)
  151. const formdata = reactive({
  152. ardNumber: '', //卡号
  153. startDate: '', //开始日期
  154. endDate: '', //结束日期
  155. queryType: '', //查询类型
  156. })
  157. const addtodata = reactive({
  158. ardNumber: '', //卡号
  159. blacklistType: '', //黑名单类型
  160. statusType: '', //状态类型
  161. reason: '', //原因
  162. })
  163. //搜索
  164. function search() {
  165. proxy.$request
  166. .post('/blacklistquery/queryBlackList',{},
  167. {
  168. baseURL: 'http://10.52.0.172:10389',
  169. }
  170. )
  171. .then((res: {}) => {
  172. console.log(res)
  173. })
  174. .catch((err: {}) => {
  175. console.log(err)
  176. })
  177. console.log(toRaw(formdata))
  178. console.log('发送搜索请求')
  179. }
  180. //重置
  181. function reset() {
  182. formdata.ardNumber = ''
  183. formdata.startDate = ''
  184. formdata.endDate = ''
  185. formdata.queryType = ''
  186. }
  187. //添加
  188. function addTo() {
  189. dialogFormVisible.value = true
  190. console.log(toRaw(addtodata))
  191. console.log('添加弹窗')
  192. }
  193. const rules = reactive<FormRules>({
  194. ardNumber: [
  195. {
  196. required: true,
  197. message: '卡号不能为空',
  198. trigger: 'blur',
  199. },
  200. ],
  201. blacklistType: [
  202. {
  203. required: true,
  204. message: '黑名单类型不能为空',
  205. trigger: 'blur',
  206. },
  207. ],
  208. statusType: [
  209. {
  210. required: true,
  211. message: '状态类型不能为空',
  212. trigger: 'blur',
  213. },
  214. ],
  215. reason: [
  216. {
  217. required: true,
  218. message: '原因不能为空',
  219. trigger: 'blur',
  220. },
  221. ],
  222. })
  223. // 详情弹窗
  224. const detailsPopup = reactive({
  225. ardNumber: '52011640230217310678', //卡号
  226. vehicleNumber: '云AG9L76', //车辆号
  227. organizationName: '中国工商银行贵州省分行', //机构名称
  228. blacklistType: '账户透支黑名单', //黑名单类型
  229. uploadLog: '未查到黑名单上传日志!', //上传日志
  230. queryResults: '成功', //查询结果
  231. causeOfBlack:
  232. '银行卡号:621476*********6594,总欠额:229.78元,最后一次补扣时间:2022-05-09 07:31:06,失败原因:总行处理失败:帐户余额不足,请保证余额充足系统每天会自动补扣', //下黑原因
  233. })
  234. interface User {
  235. ardNumber: string //卡号
  236. blacklistType: string //黑名单类型
  237. effectiveTimeOfBlacklist: string //黑名单生效时间
  238. state: string //状态
  239. blacklistAntiWhiteTime: string //黑名单反白时间
  240. xiaheiOperatorNo: string //下黑操作工号
  241. causeOfBlack: string //下黑原因
  242. antiWhiteOperatorNo: string //反白操作工号
  243. negativeeasons: string //反白原因
  244. }
  245. const currentRow = ref()
  246. const singleTableRef = ref<InstanceType<typeof ElTable>>()
  247. const setCurrent = (row?: User) => {
  248. singleTableRef.value!.setCurrentRow(row)
  249. }
  250. const handleCurrentChange = (val: User | undefined) => {
  251. currentRow.value = val
  252. }
  253. const tableData: User[] = [
  254. {
  255. ardNumber: '52011640230217310678',
  256. blacklistType: '账户透支',
  257. effectiveTimeOfBlacklist: '2020-12-19 3:41:04',
  258. state: '在黑',
  259. blacklistAntiWhiteTime: '',
  260. xiaheiOperatorNo: 'ETCGsyh002',
  261. causeOfBlack: '车牌尾号L76欠费:229.78元;于20201219进入黑名单',
  262. antiWhiteOperatorNo: '',
  263. negativeeasons: '',
  264. },
  265. {
  266. ardNumber: '52011640230217310678',
  267. blacklistType: '账户透支',
  268. effectiveTimeOfBlacklist: '2020-12-19 3:41:04',
  269. state: '在黑',
  270. blacklistAntiWhiteTime: '',
  271. xiaheiOperatorNo: 'ETCGsyh002',
  272. causeOfBlack: '车牌尾号L76欠费:229.78元;于20201219进入黑名单',
  273. antiWhiteOperatorNo: '',
  274. negativeeasons: '',
  275. },
  276. {
  277. ardNumber: '52011640230217310678',
  278. blacklistType: '账户透支',
  279. effectiveTimeOfBlacklist: '2020-12-19 3:41:04',
  280. state: '在黑',
  281. blacklistAntiWhiteTime: '',
  282. xiaheiOperatorNo: 'ETCGsyh002',
  283. causeOfBlack: '车牌尾号L76欠费:229.78元;于20201219进入黑名单',
  284. antiWhiteOperatorNo: '',
  285. negativeeasons: '',
  286. },
  287. {
  288. ardNumber: '52011640230217310678',
  289. blacklistType: '账户透支',
  290. effectiveTimeOfBlacklist: '2020-12-19 3:41:04',
  291. state: '在黑',
  292. blacklistAntiWhiteTime: '',
  293. xiaheiOperatorNo: 'ETCGsyh002',
  294. causeOfBlack: '车牌尾号L76欠费:229.78元;于20201219进入黑名单',
  295. antiWhiteOperatorNo: '',
  296. negativeeasons: '',
  297. },
  298. {
  299. ardNumber: '52011640230217310678',
  300. blacklistType: '账户透支',
  301. effectiveTimeOfBlacklist: '2020-12-19T03:41:04',
  302. state: '在黑',
  303. blacklistAntiWhiteTime: '',
  304. xiaheiOperatorNo: 'ETCGsyh002',
  305. causeOfBlack: '车牌尾号L76欠费:229.78元;于20201219进入黑名单',
  306. antiWhiteOperatorNo: '',
  307. negativeeasons: '',
  308. },
  309. {
  310. ardNumber: '52011640230217310678',
  311. blacklistType: '账户透支',
  312. effectiveTimeOfBlacklist: '2020-12-19T03:41:04',
  313. state: '在黑',
  314. blacklistAntiWhiteTime: '',
  315. xiaheiOperatorNo: 'ETCGsyh002',
  316. causeOfBlack: '车牌尾号L76欠费:229.78元;于20201219进入黑名单',
  317. antiWhiteOperatorNo: '',
  318. negativeeasons: '',
  319. },
  320. ]
  321. </script>
  322. <style lang="scss" scoped>
  323. .top {
  324. display: flex;
  325. //margin-left: 10px;
  326. }
  327. .topstyle {
  328. display: flex;
  329. height: 50px;
  330. margin-right: 10px;
  331. align-items: center;
  332. justify-content: flex-start;
  333. }
  334. </style>