feat: 模版管理

src/views/codeGenerate/template/ItemDrawer.vue

@@ -0,0 +1,122 @@
+<template>
+	<el-drawer class="le-drawer" size="100%" :title="getTitle" :model-value="modelValue" @update:model-value="updateModelValue">
+		<div v-if="loading" v-loading="true" class="local_loading"></div>
+		<el-form ref="formRef" class="le-form-config flex-1" v-bind="formOpts" :model="model">
+<!--			:class="app.isMobile ? '' : 'h-full'"-->
+			<el-row class="local-row" :gutter="16">
+				<el-col :span="18" :xs="24" class="content" :class="app.isMobile ? 'content--mobile' : ''">
+					<el-form-item label="文件内容" prop="tplContent">
+						<el-input v-model="model.tplContent" type="textarea" />
+					</el-form-item>
+				</el-col>
+				<el-col :span="6" :xs="24">
+					<el-form-item label="模板名称" prop="tplName">
+						<el-input v-model="model.tplName" placeholder="请输入模板名称" />
+					</el-form-item>
+					<el-form-item label="输出文件" prop="outFile">
+						<el-input v-model="model.outFile" placeholder="请输入输出文件" />
+					</el-form-item>
+					<el-form-item label="模板描述" prop="remark">
+						<el-input v-model="model.remark" placeholder="请输入模板描述" />
+					</el-form-item>
+				</el-col>
+			</el-row>
+		</el-form>
+		<!--		<LeFormConfig v-bind="formOpts"></LeFormConfig>-->
+		<template v-if="type !== 'detail'" #footer>
+			<el-button @click="updateModelValue(false)">{{ $t('le.btn.cancel') }}</el-button>
+			<el-button :loading="loading" type="primary" style="margin-left: 8px" @click="onSubmit">{{ $t('le.btn.confirm') }}</el-button>
+		</template>
+	</el-drawer>
+</template>
+
+<script setup lang="tsx">
+import template from '@/api/codeGenerate/template'
+import { computed, PropType, ref, watch } from 'vue'
+import useStore from '@/store'
+import { ElMessage } from 'element-plus'
+
+const props = defineProps({
+	modelValue: {
+		type: Boolean,
+		default: false
+	},
+	record: {
+		type: Object as PropType<{ [key: string]: any }>,
+		default: () => ({})
+	},
+	type: {
+		type: String as PropType<'edit' | 'create' | 'detail'>,
+		default: 'detail'
+	}
+})
+const emit = defineEmits<{
+	'update:modelValue': [bool: boolean] // 具名元组语法
+	success: any
+}>()
+const getTitle = computed(() => {
+	return { edit: '编辑', detail: '查看', create: '创建' }[props.type] + '模板'
+})
+const updateModelValue = (bool: boolean) => emit('update:modelValue', bool)
+const { app } = useStore()
+const loading = ref(false)
+const formRef = ref()
+const formOpts = ref({
+	// model: {},
+	labelPosition: 'top',
+	rules: {
+		tplName: [
+			{
+				required: true,
+				message: '模板名称不能为空'
+			}
+		],
+		outFile: [
+			{
+				required: true,
+				message: '输出文件不能为空'
+			}
+		]
+	}
+})
+const model = ref({
+	tplContent: '',
+	tplName: undefined,
+	outFile: undefined,
+	remark: undefined
+})
+watch(
+	() => props.record,
+	(record: any) => {
+		model.value = Object.keys(record || {}).reduce((res: any, key) => {
+			res[key] = record[key]
+			return res
+		}, {})
+	},
+	{ immediate: true }
+)
+const onSubmit = () => {
+	formRef.value.validate(async (valid: boolean) => {
+		if (valid) {
+			// console.log(model.value, 'model...')
+			loading.value = true
+			await template.templateAddOrEditSaveApi(model.value)
+			ElMessage.success(`${props.type === 'create' ? '新增' : '修改'}成功~`)
+			updateModelValue(false)
+			emit('success')
+		}
+	})
+}
+</script>
+
+<style lang="scss">
+//:deep(.app-mobile) {
+//	.local-row .content {
+//		order: 1;
+//	}
+//}
+//.local-row {}
+.content--mobile {
+	order: 1;
+}
+</style>

src/views/codeGenerate/template/index.vue

@@ -0,0 +1,187 @@
+<template>
+	<div class="pageWrap bgc">
+		<div class="content-warp flex-column-page-wrap">
+			<!-- 公用搜索组件 -->
+			<LeSearchForm ref="searchForm" v-model:searchData="searchData" :forms="forms" :loading="tableOpts.options.loading"></LeSearchForm>
+
+			<!--  LeTable 组件使用  -->
+			<LeTable
+				ref="tableRef"
+				v-model:searchParams="tableOpts.searchParams"
+				v-bind="tableOpts"
+				v-model:curRow="tableOpts.curRow"
+				v-model:checked-options="checkedColumns"
+				:columns="activeColumns"
+			>
+				<template #toolLeft>
+					<el-button
+						plain
+						icon="Plus"
+						@click="openDrawer('create')"
+						type="primary">
+						新增</el-button>
+					<el-button plain icon="Delete" :disabled="curSelectionRows.length === 0" @click="batch_del" type="danger">删除</el-button>
+				</template>
+			</LeTable>
+		</div>
+
+		<ItemDrawer v-if="activeData.visible" v-model="activeData.visible" v-bind="activeData" @success="updateParams"/>
+		<LeFormConfigDialog
+			:form-data="activeData"
+		/>
+	</div>
+</template>
+<script lang="tsx" setup>
+import template from '@/api/codeGenerate/template'
+import { computed, nextTick, ref, watch } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { useTablePage } from '@/hooks/useTablePage'
+import ItemDrawer from './ItemDrawer.vue'
+import { LeTableColumnProps } from '@/components/Table'
+const activeData = ref<{ record: any; type: 'edit' | 'create' | 'detail'; visible: boolean }>({
+	record: {},
+	type: 'detail',
+	visible: false
+})
+
+// 表格搜索条件
+const forms = ref([
+	{
+		prop: 'tplName',
+		label: '模板名称',
+		itemType: 'input'/*,
+		placeholder: '请输入别名'*/
+	}
+])
+
+// table列表数据请求
+const queryList = async () => {
+	const { options, searchParams } = tableOpts
+	options.loading = true
+	try {
+		const { records: list, total } = await template.templatePageApi(searchParams)
+		tableOpts.total = total
+		tableOpts.list = list
+	} catch {
+		tableOpts.total = 0
+		tableOpts.list = []
+		options.loading = false // 更改加载中的 loading值
+	} finally {
+		options.loading = false
+	}
+}
+
+// table 参数
+const columns: LeTableColumnProps[] = [
+	{
+		prop: 'tplName',
+		label: '模板名称',
+		minWidth: 120,
+		showOverflowTooltip: true,
+		slots: {
+			default: ({ row }) => {
+				return <span class="le-link" onClick={openDrawer.bind(null, 'detail', row)}>{row.tplName}</span>
+			}
+		}
+	},
+	{
+		prop: 'outFile',
+		label: '输出文件',
+		minWidth: 120
+	},
+	{
+		prop: 'remark',
+		label: '模板描述'
+	},
+	{
+		prop: 'createTime',
+		label: '创建时间',
+		minWidth: 150,
+		align: 'center'
+	},
+	{
+		prop: 'action',
+		label: '操作',
+		align: 'center',
+		width: 100,
+		fixed: 'right',
+		slots: {
+			default: ({ row }) => {
+				return <div class="flex flex-align-pack-center">
+					<LeIcon
+						class="text-lg text-icon-color cursor-pointer icon-mage--edit"
+						icon-class="icon-processInfo-mage--edit"
+						onClick={openDrawer.bind(null, 'edit', row)}
+					/>
+					<LeIcon class="text-lg ml-2 text-rose-700 cursor-pointer" icon-class="icon-processInfo-iconoir--trash" onClick={table_del.bind(null, row)} />
+				</div>
+			}
+		}
+	}
+]
+
+const {searchData, tableOpts, checkedColumns, activeColumns, curSelectionRows, updateParams} = useTablePage(
+	{
+		options: {},
+		// 需要展示的列
+		columns,
+		// 控制列配置
+		columnsConfig: {
+			columns
+		}
+	},
+	{
+		queryList,
+		fetchImmediate: false
+	}
+)
+
+// 删除
+const deleteItem = async (ids) => {
+	// try {
+	await template.templateDeleteApi(ids)
+	ElMessage.success(`删除成功~`)
+	updateParams()
+	// } catch (e) {
+	// 	console.log('删除失败')
+	// 	ElMessage.error(`删除失败~`)
+	// }
+}
+
+// 单个删除
+const table_del = (row: any) => {
+	ElMessageBox.confirm(`确认删除「${row.tplName}」这条数据？`, '提示', {
+		confirmButtonText: '确认',
+		cancelButtonText: '取消',
+		type: 'error'
+	}).then(async () => {
+		deleteItem([row.id])
+	})
+}
+
+//批量删除
+const batch_del = () => {
+	const ids = curSelectionRows.value.map(item => item.id) // 多选数据
+	ElMessageBox.confirm('是否删除选中数据？', '提示', {
+		confirmButtonText: '确认',
+		cancelButtonText: '取消',
+		type: 'error',
+		buttonSize: 'default'
+	}).then(() => {
+		deleteItem(ids)
+	})
+}
+
+const openDrawer = (type: 'edit' | 'create' | 'detail', record = {}) => {
+	activeData.value = {
+		type,
+		record,
+		visible: true
+	}
+}
+
+nextTick(() => {
+	queryList()
+})
+
+</script>