fix: 表格样式统一修改。
This commit is contained in:
tianyongbao
@@ -3,14 +3,9 @@
|
||||
<div class="search-con">
|
||||
<div class="title">查询条件</div>
|
||||
<el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="100px">
|
||||
<el-form-item label="信用卡名称" prop="name">
|
||||
<el-input
|
||||
v-model="queryParams.name"
|
||||
placeholder="请输入信用卡名称"
|
||||
clearable
|
||||
@keyup.enter="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="信用卡名称" prop="name">
|
||||
<el-input v-model="queryParams.name" placeholder="请输入信用卡名称" clearable @keyup.enter="handleQuery" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div class="search-btn-con">
|
||||
<el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
|
||||
@@ -21,58 +16,45 @@
|
||||
<div class="title-con">
|
||||
<div class="title">基本信息</div>
|
||||
<div class="operate-btn-con">
|
||||
<el-button
|
||||
@click="handleAdd"
|
||||
icon="Plus"
|
||||
v-hasPermi="['invest:bankcard:add']"
|
||||
>新增</el-button>
|
||||
<el-button
|
||||
:disabled="multiple"
|
||||
icon="Delete"
|
||||
@click="handleDelete"
|
||||
v-hasPermi="['invest:bankcard:remove']"
|
||||
>删除</el-button>
|
||||
<el-button
|
||||
@click="handleExport"
|
||||
icon="Download"
|
||||
v-hasPermi="['invest:bankcard:export']"
|
||||
>导出</el-button>
|
||||
<el-button @click="handleAdd" icon="Plus" v-hasPermi="['invest:bankcard:add']">新增</el-button>
|
||||
<el-button :disabled="multiple" icon="Delete" @click="handleDelete" v-hasPermi="['invest:bankcard:remove']">删除</el-button>
|
||||
<el-button @click="handleExport" icon="Download" v-hasPermi="['invest:bankcard:export']">导出</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content-con" v-loading="loading">
|
||||
<el-table v-loading="loading" :data="bankcardList" @selection-change="handleSelectionChange">
|
||||
<el-table v-loading="loading" :data="bankcardList" @selection-change="handleSelectionChange" height="calc(100% - 0.62rem)">
|
||||
<el-table-column type="selection" width="55" align="center" />
|
||||
<el-table-column label="信用卡名称" align="center" prop="name" />
|
||||
<el-table-column label="信用卡卡号" align="center" prop="code" />
|
||||
<el-table-column label="开户日期" align="center" prop="activationDate" width="180">
|
||||
<template #default="scope">
|
||||
<span>{{ parseTime(scope.row.activationDate, '{y}-{m}-{d}') }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="账单日" align="center" width='100' prop="billDateName" />
|
||||
<el-table-column label="还款日" align="center" width='100' prop="payDateName" />
|
||||
<el-table-column label="延缓期限" align="center" width='100' prop="delayPeriod" />
|
||||
<el-table-column label="信用卡额度" align="center" prop="creditLimit" />
|
||||
<el-table-column label="有效期" align="center" prop="effectiveDate" width="180">
|
||||
<template #default="scope">
|
||||
<span>{{ parseTime(scope.row.effectiveDate, '{y}-{m}-{d}') }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="账单日消费" align="center" prop="isNextBillDate">
|
||||
<template #default="scope">
|
||||
<dict-tag :options="is_next_bill_date" :value="scope.row.isNextBillDate"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="0账单操作" align="center" prop="isZeroBill">
|
||||
<template #default="scope">
|
||||
<dict-tag :options="is_zero_bill" :value="scope.row.isZeroBill"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="信用卡名称" align="center" prop="name" />
|
||||
<el-table-column label="信用卡卡号" align="center" prop="code" />
|
||||
<el-table-column label="开户日期" align="center" prop="activationDate" width="180">
|
||||
<template #default="scope">
|
||||
<span>{{ parseTime(scope.row.activationDate, '{y}-{m}-{d}') }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="账单日" align="center" width="100" prop="billDateName" />
|
||||
<el-table-column label="还款日" align="center" width="100" prop="payDateName" />
|
||||
<el-table-column label="延缓期限" align="center" width="100" prop="delayPeriod" />
|
||||
<el-table-column label="信用卡额度" align="center" prop="creditLimit" />
|
||||
<el-table-column label="有效期" align="center" prop="effectiveDate" width="180">
|
||||
<template #default="scope">
|
||||
<span>{{ parseTime(scope.row.effectiveDate, '{y}-{m}-{d}') }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="账单日消费" align="center" prop="isNextBillDate">
|
||||
<template #default="scope">
|
||||
<dict-tag :options="is_next_bill_date" :value="scope.row.isNextBillDate" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="0账单操作" align="center" prop="isZeroBill">
|
||||
<template #default="scope">
|
||||
<dict-tag :options="is_zero_bill" :value="scope.row.isZeroBill" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
|
||||
<template v-slot="scope">
|
||||
<div class="ctrl-btn d-flex">
|
||||
<el-tooltip v-for="item in operateList" :key="item.id" class="item" effect="dark" :content="item.title" placement="top">
|
||||
<el-button :icon="item.icon" :v-hasPermi="item.hasPermi" circle @click="handleOperate(item.id,scope.row)"></el-button>
|
||||
<el-button :icon="item.icon" :v-hasPermi="item.hasPermi" circle @click="handleOperate(item.id, scope.row)"></el-button>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
</template>
|
||||
@@ -83,73 +65,53 @@
|
||||
</div>
|
||||
<!-- 添加或修改信用卡信息对话框 -->
|
||||
<el-dialog :title="title" v-model="open" width="880px" append-to-body>
|
||||
<el-form ref="bankcardRef" :model="form" :rules="rules" :inline="true" label-width="120px">
|
||||
<el-form-item label="信用卡名称" prop="name">
|
||||
<el-input v-model="form.name" placeholder="请输入信用卡名称" />
|
||||
</el-form-item>
|
||||
<el-form-item label="信用卡卡号" prop="code">
|
||||
<el-input v-model="form.code" placeholder="请输入信用卡卡号" />
|
||||
</el-form-item>
|
||||
<el-form-item label="信用卡额度" prop="creditLimit">
|
||||
<el-input v-model="form.creditLimit" placeholder="请输入信用卡额度" />
|
||||
</el-form-item>
|
||||
<el-form-item label="账单日" prop="billDate">
|
||||
<el-input v-model="form.billDate" placeholder="请输入账单日" />
|
||||
</el-form-item>
|
||||
<el-form-item label="还款日" prop="payDate">
|
||||
<el-input v-model="form.payDate" placeholder="请输入还款日" />
|
||||
</el-form-item>
|
||||
<el-form-item label="信用卡安全码" prop="cvv">
|
||||
<el-input v-model="form.cvv" placeholder="请输入信用卡安全码" />
|
||||
</el-form-item>
|
||||
<el-form-item label="开户行" prop="openingBank">
|
||||
<el-input v-model="form.openingBank" placeholder="请输入开户行" />
|
||||
</el-form-item>
|
||||
<el-form-item label="开户日期" prop="activationDate">
|
||||
<el-date-picker clearable
|
||||
v-model="form.activationDate"
|
||||
type="date"
|
||||
value-format="YYYY-MM-DD"
|
||||
placeholder="请选择开户日期">
|
||||
</el-date-picker>
|
||||
</el-form-item>
|
||||
<el-form-item label="宽限期" prop="delayPeriod">
|
||||
<el-input v-model="form.delayPeriod" placeholder="请输入延缓期限" />
|
||||
</el-form-item>
|
||||
<el-form-item label="有效期" prop="effectiveDate">
|
||||
<el-date-picker clearable
|
||||
v-model="form.effectiveDate"
|
||||
type="date"
|
||||
value-format="YYYY-MM-DD"
|
||||
placeholder="请选择有效期">
|
||||
</el-date-picker>
|
||||
</el-form-item>
|
||||
<el-form-item label="账单日消费" prop="isNextBillDate">
|
||||
<el-select v-model="form.isNextBillDate" placeholder="请选择账单日消费">
|
||||
<el-option
|
||||
v-for="dict in is_next_bill_date"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="账单日时间" prop="nextBillDateTime">
|
||||
<el-input v-model="form.nextBillDateTime" placeholder="请输入账单日时间" />
|
||||
</el-form-item>
|
||||
<el-form-item label="0账单操作" prop="isZeroBill">
|
||||
<el-select v-model="form.isZeroBill" placeholder="请选择0账单操作">
|
||||
<el-option
|
||||
v-for="dict in is_zero_bill"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="备注" prop="remark">
|
||||
<el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
|
||||
</el-form-item>
|
||||
<el-form ref="bankcardRef" :model="form" :rules="rules" :inline="true" label-width="120px">
|
||||
<el-form-item label="信用卡名称" prop="name">
|
||||
<el-input v-model="form.name" placeholder="请输入信用卡名称" />
|
||||
</el-form-item>
|
||||
<el-form-item label="信用卡卡号" prop="code">
|
||||
<el-input v-model="form.code" placeholder="请输入信用卡卡号" />
|
||||
</el-form-item>
|
||||
<el-form-item label="信用卡额度" prop="creditLimit">
|
||||
<el-input v-model="form.creditLimit" placeholder="请输入信用卡额度" />
|
||||
</el-form-item>
|
||||
<el-form-item label="账单日" prop="billDate">
|
||||
<el-input v-model="form.billDate" placeholder="请输入账单日" />
|
||||
</el-form-item>
|
||||
<el-form-item label="还款日" prop="payDate">
|
||||
<el-input v-model="form.payDate" placeholder="请输入还款日" />
|
||||
</el-form-item>
|
||||
<el-form-item label="信用卡安全码" prop="cvv">
|
||||
<el-input v-model="form.cvv" placeholder="请输入信用卡安全码" />
|
||||
</el-form-item>
|
||||
<el-form-item label="开户行" prop="openingBank">
|
||||
<el-input v-model="form.openingBank" placeholder="请输入开户行" />
|
||||
</el-form-item>
|
||||
<el-form-item label="开户日期" prop="activationDate">
|
||||
<el-date-picker clearable v-model="form.activationDate" type="date" value-format="YYYY-MM-DD" placeholder="请选择开户日期"> </el-date-picker>
|
||||
</el-form-item>
|
||||
<el-form-item label="宽限期" prop="delayPeriod">
|
||||
<el-input v-model="form.delayPeriod" placeholder="请输入延缓期限" />
|
||||
</el-form-item>
|
||||
<el-form-item label="有效期" prop="effectiveDate">
|
||||
<el-date-picker clearable v-model="form.effectiveDate" type="date" value-format="YYYY-MM-DD" placeholder="请选择有效期"> </el-date-picker>
|
||||
</el-form-item>
|
||||
<el-form-item label="账单日消费" prop="isNextBillDate">
|
||||
<el-select v-model="form.isNextBillDate" placeholder="请选择账单日消费">
|
||||
<el-option v-for="dict in is_next_bill_date" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="账单日时间" prop="nextBillDateTime">
|
||||
<el-input v-model="form.nextBillDateTime" placeholder="请输入账单日时间" />
|
||||
</el-form-item>
|
||||
<el-form-item label="0账单操作" prop="isZeroBill">
|
||||
<el-select v-model="form.isZeroBill" placeholder="请选择0账单操作">
|
||||
<el-option v-for="dict in is_zero_bill" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="备注" prop="remark">
|
||||
<el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template v-if="title !== '查看信用卡信息'" #footer>
|
||||
<div class="dialog-footer">
|
||||
@@ -191,24 +153,12 @@ const data = reactive({
|
||||
type: '2'
|
||||
},
|
||||
rules: {
|
||||
name: [
|
||||
{ required: true, message: '信用卡名称不能为空', trigger: 'blur' }
|
||||
],
|
||||
code: [
|
||||
{ required: true, message: '信用卡卡号不能为空', trigger: 'blur' }
|
||||
],
|
||||
billDate: [
|
||||
{ required: true, message: '账单日不能为空', trigger: 'blur' }
|
||||
],
|
||||
payDate: [
|
||||
{ required: true, message: '还款日不能为空', trigger: 'blur' }
|
||||
],
|
||||
creditLimit: [
|
||||
{ required: true, message: '信用卡额度不能为空', trigger: 'blur' }
|
||||
],
|
||||
cvv: [
|
||||
{ required: true, message: '信用卡安全码不能为空', trigger: 'blur' }
|
||||
]
|
||||
name: [{ required: true, message: '信用卡名称不能为空', trigger: 'blur' }],
|
||||
code: [{ required: true, message: '信用卡卡号不能为空', trigger: 'blur' }],
|
||||
billDate: [{ required: true, message: '账单日不能为空', trigger: 'blur' }],
|
||||
payDate: [{ required: true, message: '还款日不能为空', trigger: 'blur' }],
|
||||
creditLimit: [{ required: true, message: '信用卡额度不能为空', trigger: 'blur' }],
|
||||
cvv: [{ required: true, message: '信用卡安全码不能为空', trigger: 'blur' }]
|
||||
}
|
||||
})
|
||||
|
||||
@@ -231,9 +181,9 @@ const handleOperate = (operate, row) => {
|
||||
const { queryParams, form, rules } = toRefs(data)
|
||||
|
||||
/** 查询信用卡信息列表 */
|
||||
function getList () {
|
||||
function getList() {
|
||||
loading.value = true
|
||||
listBankcardLend(queryParams.value).then(response => {
|
||||
listBankcardLend(queryParams.value).then((response) => {
|
||||
bankcardList.value = response.rows
|
||||
total.value = response.total
|
||||
loading.value = false
|
||||
@@ -247,7 +197,7 @@ function cancel() {
|
||||
}
|
||||
|
||||
// 表单重置
|
||||
function reset () {
|
||||
function reset() {
|
||||
form.value = {
|
||||
id: null,
|
||||
name: null,
|
||||
@@ -276,13 +226,13 @@ function reset () {
|
||||
}
|
||||
|
||||
/** 搜索按钮操作 */
|
||||
function handleQuery () {
|
||||
function handleQuery() {
|
||||
queryParams.value.pageNum = 1
|
||||
getList()
|
||||
}
|
||||
|
||||
/** 重置按钮操作 */
|
||||
function resetQuery () {
|
||||
function resetQuery() {
|
||||
proxy.resetForm('queryRef')
|
||||
handleQuery()
|
||||
}
|
||||
@@ -294,8 +244,8 @@ const handleCurrentChange = (val) => {
|
||||
}
|
||||
|
||||
// 多选框选中数据
|
||||
function handleSelectionChange (selection) {
|
||||
ids.value = selection.map(item => item.id)
|
||||
function handleSelectionChange(selection) {
|
||||
ids.value = selection.map((item) => item.id)
|
||||
single.value = selection.length !== 1
|
||||
multiple.value = !selection.length
|
||||
}
|
||||
@@ -308,17 +258,17 @@ const handleView = (row) => {
|
||||
}
|
||||
|
||||
/** 新增按钮操作 */
|
||||
function handleAdd () {
|
||||
function handleAdd() {
|
||||
reset()
|
||||
open.value = true
|
||||
title.value = '添加信用卡信息'
|
||||
}
|
||||
|
||||
/** 修改按钮操作 */
|
||||
function handleUpdate (row) {
|
||||
function handleUpdate(row) {
|
||||
reset()
|
||||
const _id = row.id || ids.value
|
||||
getBankcardLend(_id).then(response => {
|
||||
getBankcardLend(_id).then((response) => {
|
||||
form.value = response.data
|
||||
open.value = true
|
||||
title.value = '修改信用卡信息'
|
||||
@@ -326,17 +276,17 @@ function handleUpdate (row) {
|
||||
}
|
||||
|
||||
/** 提交按钮 */
|
||||
function submitForm () {
|
||||
proxy.$refs.bankcardRef.validate(valid => {
|
||||
function submitForm() {
|
||||
proxy.$refs.bankcardRef.validate((valid) => {
|
||||
if (valid) {
|
||||
if (form.value.id != null) {
|
||||
updateBankcardLend(form.value).then(response => {
|
||||
updateBankcardLend(form.value).then((response) => {
|
||||
proxy.$modal.msgSuccess('修改成功')
|
||||
open.value = false
|
||||
getList()
|
||||
})
|
||||
} else {
|
||||
addBankcardLend(form.value).then(response => {
|
||||
addBankcardLend(form.value).then((response) => {
|
||||
proxy.$modal.msgSuccess('新增成功')
|
||||
open.value = false
|
||||
getList()
|
||||
@@ -347,21 +297,29 @@ function submitForm () {
|
||||
}
|
||||
|
||||
/** 删除按钮操作 */
|
||||
function handleDelete (row) {
|
||||
function handleDelete(row) {
|
||||
const _ids = row.id || ids.value
|
||||
proxy.$modal.confirm('是否确认删除选中的数据项？').then(function() {
|
||||
return delBankcardLend(_ids)
|
||||
}).then(() => {
|
||||
getList()
|
||||
proxy.$modal.msgSuccess('删除成功')
|
||||
}).catch(() => {})
|
||||
proxy.$modal
|
||||
.confirm('是否确认删除选中的数据项？')
|
||||
.then(function () {
|
||||
return delBankcardLend(_ids)
|
||||
})
|
||||
.then(() => {
|
||||
getList()
|
||||
proxy.$modal.msgSuccess('删除成功')
|
||||
})
|
||||
.catch(() => {})
|
||||
}
|
||||
|
||||
/** 导出按钮操作 */
|
||||
function handleExport () {
|
||||
proxy.download('invest/bankcard/export', {
|
||||
...queryParams.value
|
||||
}, `bankcard_${new Date().getTime()}.xlsx`)
|
||||
function handleExport() {
|
||||
proxy.download(
|
||||
'invest/bankcard/export',
|
||||
{
|
||||
...queryParams.value
|
||||
},
|
||||
`bankcard_${new Date().getTime()}.xlsx`
|
||||
)
|
||||
}
|
||||
|
||||
getList()
|
||||
|
||||
Reference in New Issue
Block a user