jude-user-recharge/web/src/views/backend/pay/config/index.vue

<template>
	<div class="default-main ba-table-box">
		<!-- 表格顶部菜单 -->
		<TableHeader :buttons="['refresh','columnDisplay']">
			<el-form style="margin-left: 5px;padding-top: 20px;" inline :model="seachForm" @submit.prevent="handleSearch">
				<el-form-item>
					<el-input v-model="seachForm.name" placeholder="请输入配置名称" @blur="handleSearch" clearable />
				</el-form-item>
				<el-form-item>
					<el-select v-model="seachForm.type" placeholder="请选择支付类型" style="width: 150px;" clearable filterable @change="handleSearch">
						<el-option value="1" label="微信支付" />
						<el-option value="2" label="支付宝支付" />
					</el-select>
				</el-form-item>
				<el-form-item>
					<el-select v-model="seachForm.status" placeholder="请选择状态" style="width: 150px;" clearable filterable @change="handleSearch">
						<el-option label="禁用" value="0" />
						<el-option label="启用" value="1" />
					</el-select>
				</el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onAdd" v-auth="'edit'">添加</el-button>
                </el-form-item>
			</el-form>
		</TableHeader>
		<!-- 表格 -->
		<!-- 要使用`el-table`组件原有的属性，直接加在Table标签上即可 -->
		<Table ref="tableRef">
            <template #operate>
                <el-table-column prop="operate" align="center" label="操作" min-width="150" fixed="right">
                    <template #default="scope">
                        <el-button type="primary" size="small" @click="onEdit(scope.row)" v-auth="'edit'">编辑</el-button>
                        <el-button type="danger" size="small" @click="handleDel(scope.row)" v-auth="'delete'">删除</el-button>
                    </template>
                </el-table-column>
            </template>
        </Table>
        <!-- 表单 -->
        <PopupForm @success="baTable.getIndex()" />

	</div>
</template>

<script setup lang="ts">
import { ref, reactive, provide, useTemplateRef } from 'vue'
import baTableClass from '/@/utils/baTable'
import Table from '/@/components/table/index.vue'
import TableHeader from '/@/components/table/header/index.vue'
import PopupForm from './popupForm.vue'
import { baTableApi } from '/@/api/common'
import { useI18n } from 'vue-i18n'
import { cloneDeep } from 'lodash-es'
import { ElMessageBox } from 'element-plus'
import { del } from '/@/api/backend/pay/config'

defineOptions({
    name: 'pay/config',
})


const { t } = useI18n()

const seachForm = reactive({
	name: "",
	type: "",
	status: ""
})

// 搜索
const handleSearch = () => {
	baTable.table.filter!.page = 1
	baTable.table.filter!.name = seachForm.name
	baTable.table.filter!.type = seachForm.type
	baTable.table.filter!.status = seachForm.status
	baTable.getIndex()
}

const baTable = new baTableClass(
	new baTableApi('/admin/pay.Config/'),
	{
		column: [
			{ 
				label: '编号', 
				prop: 'id', 
				align: 'center', 
				width: 70,
			},
			{ 
				label: '配置名称', 
				prop: 'name', 
				align: 'center', 
				minWidth: 160,
			},
			{
				label: '支付类型',
				prop: 'type',
				align: 'center',
				minWidth: 120,
				render: 'tag',
				custom: {
					'1': 'success',
					'2': '',
				},
				replaceValue: {
					'1': '微信支付',
					'2': '支付宝支付',
				},
			},
			{ 
				label: '应用ID/AppId', 
				prop: 'app_id', 
				align: 'center', 
				minWidth: 180,
			},
			{ 
				label: '商户ID', 
				prop: 'mch_id', 
				align: 'center', 
				minWidth: 120,
			},
			{ 
				label: '商户密钥/API密钥', 
				prop: 'key', 
				align: 'center', 
				minWidth: 200,
			},
			{ 
				label: '支付通知地址', 
				prop: 'notify_url', 
				align: 'center', 
				minWidth: 250,
			},
			{ 
				label: 'H5支付通知地址', 
				prop: 'h5_notify_url', 
				align: 'center', 
				minWidth: 250,
			},
			{ 
				label: '支付宝公钥地址', 
				prop: 'public_key_path', 
				align: 'center', 
				minWidth: 180,
			},
			{ 
				label: '支付宝私钥地址', 
				prop: 'private_key_path', 
				align: 'center', 
				minWidth: 180,
			},
			{
				label: '状态',
				prop: 'status',
				align: 'center',
				render: 'tag',
				custom: {
					'0': 'danger',
					'1': 'success',
				},
				replaceValue: {
					'0': '禁用',
					'1': '启用',
				},
				minWidth: 100,
			},
			{ 
				label: '创建时间', 
				prop: 'create_time', 
				align: 'center',
				minWidth: 170,
				operator: false,
			},
			{ 
				label: '更新时间', 
				prop: 'update_time', 
				align: 'center',
				minWidth: 170,
				operator: false,
			},
			{
				label: '操作',
				align: 'center',
				width: '180',
				render: 'slot',
				slotName: 'operate',
			},
		],
		dblClickNotEditColumn: [undefined,],
		filter: {
			limit: 20,
		},
	},
	{
		defaultItems: {
            id: null,
            name: '',
            type: '',
            status: '1',
            app_id: '',
            mch_id: '',
            key: '',
            notify_url: '',
            h5_notify_url: '',
            public_key_path: '',
            private_key_path: '',
		},
	},
)

baTable.mount()
baTable.getIndex()
provide('baTable', baTable)

// 删除
const handleDel = (row: TableRow) => {
    ElMessageBox.confirm(`确定删除配置"${row.name}"吗？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
    }).then(() => {
        del({ id: row.id }).then(() => {
            baTable.getIndex()
        })
    })
}

const openForm = (type: 'Add' | 'Edit', row?: TableRow) => {
    if (type === 'Edit' && !row) return
    baTable.form.items = row ? cloneDeep(row) : cloneDeep(baTable.form.defaultItems)
    // 统一支付类型和状态为字符串，避免下拉框/单选框显示为“1”而不是对应中文
    if (baTable.form.items) {
        if (baTable.form.items.type !== undefined && baTable.form.items.type !== null) {
            baTable.form.items.type = String(baTable.form.items.type)
        }
        if (baTable.form.items.status !== undefined && baTable.form.items.status !== null) {
            baTable.form.items.status = String(baTable.form.items.status)
        }
    }
    baTable.form.operate = type
    baTable.form.operateIds = row && baTable.table.pk ? [row[baTable.table.pk]] : []
}

const onAdd = () => openForm('Add')
const onEdit = (row: TableRow) => openForm('Edit', row)

</script>
<style scoped lang="scss">
.el-form--inline .el-form-item {
	margin-right: 8px;
}
</style>