VberAdminPlusV3/UI/VAP_V3.VUE/src/views/system/client/index.vue

<script setup lang="ts" name="Client">
import apis from "@a"

const tableRef = ref()
const modalRef = ref()
const opts = reactive({
	columns: [
		{ field: "id", name: "id", width: 100, isSort: true, visible: false },
		{ field: "clientId", name: "客户端 ID", visible: true, isSort: false, width: 240 },
		{ field: "clientKey", name: "客户端 KEY", visible: true, isSort: false, width: 120 },
		{ field: "clientSecret", name: "客户端 SECRET", visible: true, width: 150, tooltip: true },
		{ field: "grantType", name: "授权类型", visible: true, isSort: false, width: "auto" },
		{ field: "deviceType", name: "设备类型", visible: true, isSort: true, width: 100 },
		{ field: "activeTimeout", name: "活跃超时时间", visible: true, isSort: true, width: 120 },
		{ field: "timeout", name: "超时时间", visible: true, isSort: false, width: 100 },
		{ field: "status", name: "状态", visible: true, isSort: false, width: 80 },
		{ field: "actions", name: `操作`, width: 150 }
	] as any,
	queryParams: {
		clientKey: undefined,
		grantType: undefined,
		deviceType: undefined
	},
	searchFormItems: [
		{
			field: "clientKey",
			label: "客户端KEY",
			class: "w-100",
			required: false,
			placeholder: "请输入客户端KEY",
			component: "I",
			listeners: {
				keyup: (e: KeyboardEvent) => {
					if (e.code == "Enter") {
						handleQuery()
					}
				}
			},
			span: 5
		},
		{
			field: "grantType",
			label: "授权类型",
			class: "w-100",
			required: false,
			component: "Dict",
			props: {
				placeholder: "请选择授权类型",
				dictType: "sys_grant_type",
				valueIsNumber: false,
				type: "select"
			},
			span: 5
		},
		{
			field: "deviceType",
			label: "设备类型",
			class: "w-100",
			required: false,
			component: "Dict",
			props: {
				placeholder: "请选择设备类型",
				dictType: "sys_device_type",
				valueIsNumber: false,
				type: "select"
			},
			span: 5
		}
	] as any,
	permission: "system:client",
	handleBtns: [],
	handleFuns: {
		handleUpdate: () => {
			const row = tableRef.value.getSelected()
			handleUpdate(row)
		},
		handleDelete: () => {
			const rows = tableRef.value.getSelecteds()
			handleDelete(rows)
		}
	},
	customBtns: [],
	tableListFun: apis.system.clientApi.list,
	getEntityFun: apis.system.clientApi.get,
	deleteEntityFun: apis.system.clientApi.del,
	exportUrl: apis.system.clientApi.exportUrl,
	exportName: "Client",
	modalTitle: "客户端",
	formItems: [
		// {
		// 	field: "clientId",
		// 	label: "客户端编号",
		// 	class: "w-100",
		// 	required: true,
		// 	placeholder: "请输入客户端编号",
		// 	component: "I"
		// },
		{
			field: "clientKey",
			label: "客户端KEY",
			class: "w-100",
			required: true,
			placeholder: "请输入客户端KEY",
			component: "I"
		},
		{
			field: "clientSecret",
			label: "客户端秘钥",
			class: "w-100",
			required: true,
			placeholder: "请输入客户端秘钥",
			component: "I"
		},
		{
			field: "grantTypeList",
			label: "授权类型",
			class: "w-100",
			required: true,
			component: "Dict",
			props: {
				dictType: "sys_grant_type",
				type: "checkbox",
				valueIsNumber: false
			}
		},
		{
			field: "deviceType",
			label: "设备类型",
			class: "w-100",
			required: true,
			component: "Dict",
			props: {
				dictType: "sys_device_type",
				type: "radio",
				valueIsNumber: false
			}
		},
		{
			field: "activeTimeout",
			label: "活跃超时时间",
			class: "w-100",
			required: true,
			placeholder: "请输入活跃超时时间",
			component: "I"
		},
		{
			field: "timeout",
			label: "超时时间",
			class: "w-100",
			required: true,
			placeholder: "请输入超时时间",
			component: "I"
		},
		{
			field: "status",
			label: "状态",
			class: "w-100",
			required: true,
			component: "Dict",
			props: {
				dictType: "sys_normal_disable",
				type: "radio",
				valueIsNumber: false
			}
		}
	] as any,
	resetForm: () => {
		form.value = emptyFormData.value
	},
	labelWidth: "90px",
	emptyFormData: {
		id: undefined,
		clientId: undefined,
		clientKey: undefined,
		clientSecret: undefined,
		grantTypeList: undefined,
		deviceType: undefined,
		activeTimeout: undefined,
		timeout: undefined,
		status: undefined
	}
})
const { queryParams, emptyFormData } = toRefs(opts)
const form = ref<any>(emptyFormData.value)

/** 搜索按钮操作 */
function handleQuery(query?: any) {
	query = query || tableRef.value?.getQueryParams() || queryParams.value
	addDateRange(query, query.dateRangeCreateTime)
	addDateRange(query, query.dateRangeUpdateTime, "UpdateTime")
	tableRef.value?.query(query)
}

/** 重置按钮操作 */
function resetQuery(query?: any) {
	query = query || tableRef.value?.getQueryParams() || queryParams.value
	query.dateRangeCreateTime = [] as any
	addDateRange(query, query.dateRangeCreateTime)
	query.dateRangeUpdateTime = [] as any
	addDateRange(query, query.dateRangeUpdateTime, "UpdateTime")
	//
}

/** 修改按钮操作 */
function handleUpdate(row: any) {
	tableRef.value.defaultHandleFuns.handleUpdate("", row)
	form.value.grantTypeList = form.value.grantType.split(",")
}

/** 删除按钮操作 */
function handleDelete(rows: any[]) {
	tableRef.value.defaultHandleFuns.handleDelete("", rows)
}

/** 提交按钮 */
function submitForm() {
	form.value.grantType = form.value.grantTypeList.join(",")
	apis.system.clientApi.addOrUpdate(form.value).then(() => {
		handleQuery()
	})
}
</script>
<template>
	<div class="app-container">
		<VbTable
			ref="tableRef"
			keyField="id"
			:columns="opts.columns"
			:handle-perm="opts.permission"
			:handle-btns="opts.handleBtns"
			:handle-funs="opts.handleFuns"
			:search-form-items="opts.searchFormItems"
			:custom-btns="opts.customBtns"
			:remote-fun="opts.tableListFun"
			:get-entity-fun="opts.getEntityFun"
			:delete-entity-fun="opts.deleteEntityFun"
			:export-url="opts.exportUrl"
			:export-name="opts.exportName"
			:modal="modalRef"
			:reset-form-fun="opts.resetForm"
			v-model:form-data="form"
			v-model:query-params="queryParams"
			:check-multiple="true"
			:reset-search-form-fun="resetQuery"
			:custom-search-fun="handleQuery">
			<template #grantType="{ row }">
				<DictTag
					type="sys_grant_type"
					:value-is-number="false"
					:value="row.grantType ? row.grantType.split(',') : []"></DictTag>
			</template>
			<template #deviceType="{ row }">
				<DictTag type="sys_device_type" :value-is-number="false" :value="row.deviceType"></DictTag>
			</template>
			<template #status="{ row }">
				<DictTag type="sys_normal_disable" :value-is-number="false" :value="row.status"></DictTag>
			</template>
			<template #actions="{ row }">
				<vb-tooltip content="修改" placement="top">
					<el-button
						link
						type="primary"
						@click="handleUpdate(row)"
						v-hasPermission="'system:client:edit'">
						<template #icon>
							<VbIcon icon-name="notepad-edit" icon-type="duotone" class="fs-3"></VbIcon>
						</template>
					</el-button>
				</vb-tooltip>
				<vb-tooltip content="删除" placement="top">
					<el-button
						link
						type="primary"
						@click="handleDelete([row])"
						v-hasPermission="'system:client:remove'">
						<template #icon>
							<VbIcon icon-name="trash-square" icon-type="duotone" class="fs-3"></VbIcon>
						</template>
					</el-button>
				</vb-tooltip>
			</template>
		</VbTable>
		<VbModal
			v-model:modal="modalRef"
			:title="opts.modalTitle"
			:form-data="form"
			:form-items="opts.formItems"
			:form-label-width="opts.labelWidth"
			append-to-body
			@confirm="submitForm"></VbModal>
	</div>
</template>