支付配置修改

web/src/views/backend/pay/config/index.vue

@@ -1,42 +1,60 @@
 <template>
 	<div class="default-main ba-table-box">
 		<!-- 表格顶部菜单 -->
-		<TableHeader :buttons="['refresh','columnDisplay']">
+		<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-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-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-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()" />
+			<template #key>
+				<el-table-column prop="key" label="商户密钥/API密钥" align="center" min-width="200">
+					<template #default="scope">
+						<el-tooltip effect="light" placement="top" :disabled="!scope.row.key">
+							<template #content>
+								<div style="white-space: pre-wrap; word-break: break-all; max-width: 600px;">
+									{{ scope.row.key }}
+								</div>
+							</template>
+							<div class="ba-key-ellipsis" @click.stop="handleCopyKey(scope.row.key)">
+								{{ scope.row.key }}
+							</div>
+						</el-tooltip>
+					</template>
+				</el-table-column>
+			</template>
+			<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>
@@ -50,11 +68,11 @@ 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 { ElMessage, ElMessageBox } from 'element-plus'
 import { del } from '/@/api/backend/pay/config'
 
 defineOptions({
-    name: 'pay/config',
+	name: 'pay/config',
 })
 
 
@@ -79,16 +97,16 @@ const baTable = new baTableClass(
 	new baTableApi('/admin/pay.Config/'),
 	{
 		column: [
-			{ 
-				label: '编号', 
-				prop: 'id', 
-				align: 'center', 
+			{
+				label: '编号',
+				prop: 'id',
+				align: 'center',
 				width: 70,
 			},
-			{ 
-				label: '配置名称', 
-				prop: 'name', 
-				align: 'center', 
+			{
+				label: '配置名称',
+				prop: 'name',
+				align: 'center',
 				minWidth: 160,
 			},
 			{
@@ -106,46 +124,48 @@ const baTable = new baTableClass(
 					'2': '支付宝支付',
 				},
 			},
-			{ 
-				label: '应用ID/AppId', 
-				prop: 'app_id', 
-				align: 'center', 
+			{
+				label: '应用ID/AppId',
+				prop: 'app_id',
+				align: 'center',
 				minWidth: 180,
 			},
-			{ 
-				label: '商户ID', 
-				prop: 'mch_id', 
-				align: 'center', 
+			{
+				label: '商户ID',
+				prop: 'mch_id',
+				align: 'center',
 				minWidth: 120,
 			},
-			{ 
-				label: '商户密钥/API密钥', 
-				prop: 'key', 
-				align: 'center', 
+			{
+				label: '商户密钥/API密钥',
+				prop: 'key',
+				align: 'center',
 				minWidth: 200,
+				render: 'slot',
+				slotName: 'key',
 			},
-			{ 
-				label: '支付通知地址', 
-				prop: 'notify_url', 
-				align: 'center', 
+			{
+				label: '支付通知地址',
+				prop: 'notify_url',
+				align: 'center',
 				minWidth: 250,
 			},
-			{ 
-				label: 'H5支付通知地址', 
-				prop: 'h5_notify_url', 
-				align: 'center', 
+			{
+				label: 'H5支付通知地址',
+				prop: 'h5_notify_url',
+				align: 'center',
 				minWidth: 250,
 			},
-			{ 
-				label: '支付宝公钥地址', 
-				prop: 'public_key_path', 
-				align: 'center', 
+			{
+				label: '支付宝公钥地址',
+				prop: 'public_key_path',
+				align: 'center',
 				minWidth: 180,
 			},
-			{ 
-				label: '支付宝私钥地址', 
-				prop: 'private_key_path', 
-				align: 'center', 
+			{
+				label: '支付宝私钥地址',
+				prop: 'private_key_path',
+				align: 'center',
 				minWidth: 180,
 			},
 			{
@@ -163,16 +183,16 @@ const baTable = new baTableClass(
 				},
 				minWidth: 100,
 			},
-			{ 
-				label: '创建时间', 
-				prop: 'create_time', 
+			{
+				label: '创建时间',
+				prop: 'create_time',
 				align: 'center',
 				minWidth: 170,
 				operator: false,
 			},
-			{ 
-				label: '更新时间', 
-				prop: 'update_time', 
+			{
+				label: '更新时间',
+				prop: 'update_time',
 				align: 'center',
 				minWidth: 170,
 				operator: false,
@@ -192,17 +212,17 @@ const baTable = new baTableClass(
 	},
 	{
 		defaultItems: {
-            id: null,
-            name: '',
-            type: '',
-            status: '1',
-            app_id: '',
-            mch_id: '',
-            key: '',
-            notify_url: '',
-            h5_notify_url: '',
-            public_key_path: '',
-            private_key_path: '',
+			id: null,
+			name: '',
+			type: '',
+			status: '1',
+			app_id: '',
+			mch_id: '',
+			key: '',
+			notify_url: '',
+			h5_notify_url: '',
+			public_key_path: '',
+			private_key_path: '',
 		},
 	},
 )
@@ -211,33 +231,70 @@ baTable.mount()
 baTable.getIndex()
 provide('baTable', baTable)
 
+// 复制表格单元格内容
+const fallbackCopy = (text: string) => {
+	const textarea = document.createElement('textarea')
+	textarea.value = text
+	textarea.style.position = 'fixed'
+	textarea.style.opacity = '0'
+	document.body.appendChild(textarea)
+	textarea.select()
+	textarea.setSelectionRange(0, textarea.value.length)
+	try {
+		document.execCommand('copy')
+		ElMessage.success('复制成功')
+	} catch {
+		ElMessage.error('复制失败')
+	} finally {
+		document.body.removeChild(textarea)
+	}
+}
+
+const handleCopyKey = async (text: string) => {
+	if (!text) {
+		ElMessage.warning('密钥为空')
+		return
+	}
+	try {
+		if (navigator.clipboard && typeof navigator.clipboard.writeText === 'function') {
+			await navigator.clipboard.writeText(text)
+			ElMessage.success('复制成功')
+			return
+		}
+		// 兼容降级
+		fallbackCopy(text)
+	} catch {
+		fallbackCopy(text)
+	}
+}
+
 // 删除
 const handleDel = (row: TableRow) => {
-    ElMessageBox.confirm(`确定删除配置"${row.name}"吗？`, '提示', {
-        confirmButtonText: '确定',
-        cancelButtonText: '取消',
-        type: 'warning',
-    }).then(() => {
-        del({ id: row.id }).then(() => {
-            baTable.getIndex()
-        })
-    })
+	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]] : []
+	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')
@@ -248,4 +305,16 @@ const onEdit = (row: TableRow) => openForm('Edit', row)
 .el-form--inline .el-form-item {
 	margin-right: 8px;
 }
+
+.ba-key-ellipsis {
+	display: -webkit-box;
+	-webkit-box-orient: vertical;
+	-webkit-line-clamp: 3;
+	line-clamp: 3;
+	overflow: hidden;
+	word-break: break-all;
+	cursor: pointer;
+	line-height: 20px;
+	max-height: 60px;
+}
 </style>