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

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