Ray Hao
320
src/components/PageContent/index.vue
Normal file
320
src/components/PageContent/index.vue
Normal file
@@ -0,0 +1,320 @@
|
|||||||
|
<template>
|
||||||
|
<el-card shadow="never" class="table-container">
|
||||||
|
<template #header>
|
||||||
|
<!-- 表格左上方工具栏 -->
|
||||||
|
<template v-for="item in contentConfig.toolbar" :key="item">
|
||||||
|
<template v-if="typeof item === 'string'">
|
||||||
|
<!-- 刷新 -->
|
||||||
|
<template v-if="item === 'refresh'">
|
||||||
|
<el-button
|
||||||
|
type="info"
|
||||||
|
icon="refresh"
|
||||||
|
@click="handleToolbar(item)"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
|
<!-- 新增 -->
|
||||||
|
<template v-else-if="item === 'add'">
|
||||||
|
<el-button
|
||||||
|
v-hasPerm="[`${contentConfig.pageName}:${item}`]"
|
||||||
|
type="success"
|
||||||
|
icon="plus"
|
||||||
|
@click="handleToolbar(item)"
|
||||||
|
>
|
||||||
|
新增
|
||||||
|
</el-button>
|
||||||
|
</template>
|
||||||
|
<!-- 删除 -->
|
||||||
|
<template v-else-if="item === 'delete'">
|
||||||
|
<el-button
|
||||||
|
v-hasPerm="[`${contentConfig.pageName}:${item}`]"
|
||||||
|
type="danger"
|
||||||
|
icon="delete"
|
||||||
|
:disabled="removeIds.length === 0"
|
||||||
|
@click="handleToolbar(item)"
|
||||||
|
>
|
||||||
|
删除
|
||||||
|
</el-button>
|
||||||
|
</template>
|
||||||
|
<!-- 导出 -->
|
||||||
|
<template v-else-if="item === 'export'">
|
||||||
|
<el-button
|
||||||
|
v-hasPerm="[`${contentConfig.pageName}:${item}`]"
|
||||||
|
type="primary"
|
||||||
|
icon="download"
|
||||||
|
@click="handleToolbar(item)"
|
||||||
|
>
|
||||||
|
导出
|
||||||
|
</el-button>
|
||||||
|
</template>
|
||||||
|
</template>
|
||||||
|
<!-- 其他 -->
|
||||||
|
<template v-else-if="typeof item === 'object'">
|
||||||
|
<template v-if="item.auth">
|
||||||
|
<el-button
|
||||||
|
v-hasPerm="[`${contentConfig.pageName}:${item.auth}`]"
|
||||||
|
:icon="item.icon"
|
||||||
|
type="default"
|
||||||
|
@click="handleToolbar(item.name)"
|
||||||
|
>
|
||||||
|
{{ item.text }}
|
||||||
|
</el-button>
|
||||||
|
</template>
|
||||||
|
<template v-else>
|
||||||
|
<el-button
|
||||||
|
:icon="item.icon"
|
||||||
|
type="default"
|
||||||
|
@click="handleToolbar(item.name)"
|
||||||
|
>
|
||||||
|
{{ item.text }}
|
||||||
|
</el-button>
|
||||||
|
</template>
|
||||||
|
</template>
|
||||||
|
</template>
|
||||||
|
</template>
|
||||||
|
<!-- 列表 -->
|
||||||
|
<el-table
|
||||||
|
v-loading="loading"
|
||||||
|
:data="pageData"
|
||||||
|
:border="true"
|
||||||
|
:highlight-current-row="true"
|
||||||
|
@selection-change="handleSelectionChange"
|
||||||
|
>
|
||||||
|
<template v-for="col in contentConfig.cols" :key="col.prop">
|
||||||
|
<!-- 列操作栏 -->
|
||||||
|
<template v-if="col.templet === 'tool'">
|
||||||
|
<el-table-column v-bind="col">
|
||||||
|
<template #default="scope">
|
||||||
|
<template v-for="item in col.operat" :key="item">
|
||||||
|
<template v-if="typeof item === 'string'">
|
||||||
|
<!-- 编辑/删除 -->
|
||||||
|
<template v-if="item === 'edit' || item === 'delete'">
|
||||||
|
<el-button
|
||||||
|
v-hasPerm="[`${contentConfig.pageName}:${item}`]"
|
||||||
|
:type="item === 'edit' ? 'primary' : 'danger'"
|
||||||
|
:icon="item"
|
||||||
|
size="small"
|
||||||
|
link
|
||||||
|
@click="
|
||||||
|
handleOperat({
|
||||||
|
name: item,
|
||||||
|
row: scope.row,
|
||||||
|
column: scope.column,
|
||||||
|
$index: scope.$index,
|
||||||
|
})
|
||||||
|
"
|
||||||
|
>
|
||||||
|
{{ item === "edit" ? "编辑" : "删除" }}
|
||||||
|
</el-button>
|
||||||
|
</template>
|
||||||
|
</template>
|
||||||
|
<!-- 其他 -->
|
||||||
|
<template v-else-if="typeof item === 'object'">
|
||||||
|
<template v-if="item.auth">
|
||||||
|
<el-button
|
||||||
|
v-hasPerm="[`${contentConfig.pageName}:${item.auth}`]"
|
||||||
|
:icon="item.icon"
|
||||||
|
type="primary"
|
||||||
|
size="small"
|
||||||
|
link
|
||||||
|
@click="
|
||||||
|
handleOperat({
|
||||||
|
name: item.name,
|
||||||
|
row: scope.row,
|
||||||
|
column: scope.column,
|
||||||
|
$index: scope.$index,
|
||||||
|
})
|
||||||
|
"
|
||||||
|
>
|
||||||
|
{{ item.text }}
|
||||||
|
</el-button>
|
||||||
|
</template>
|
||||||
|
<template v-else>
|
||||||
|
<el-button
|
||||||
|
:icon="item.icon"
|
||||||
|
type="primary"
|
||||||
|
size="small"
|
||||||
|
link
|
||||||
|
@click="
|
||||||
|
handleOperat({
|
||||||
|
name: item.name,
|
||||||
|
row: scope.row,
|
||||||
|
column: scope.column,
|
||||||
|
$index: scope.$index,
|
||||||
|
})
|
||||||
|
"
|
||||||
|
>
|
||||||
|
{{ item.text }}
|
||||||
|
</el-button>
|
||||||
|
</template>
|
||||||
|
</template>
|
||||||
|
</template>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
</template>
|
||||||
|
<!-- 自定义 -->
|
||||||
|
<template v-else-if="col.templet === 'custom'">
|
||||||
|
<el-table-column v-bind="col">
|
||||||
|
<template #default="scope">
|
||||||
|
<slot
|
||||||
|
:name="col.slotName ?? col.prop"
|
||||||
|
:prop="col.prop"
|
||||||
|
v-bind="scope"
|
||||||
|
></slot>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
</template>
|
||||||
|
<!-- 其他 -->
|
||||||
|
<template v-else>
|
||||||
|
<el-table-column v-bind="col" />
|
||||||
|
</template>
|
||||||
|
</template>
|
||||||
|
</el-table>
|
||||||
|
<!-- 分页 -->
|
||||||
|
<pagination
|
||||||
|
v-if="total > 0"
|
||||||
|
v-model:total="total"
|
||||||
|
v-model:page="queryParams.pageNum"
|
||||||
|
v-model:limit="queryParams.pageSize"
|
||||||
|
@pagination="handlePagination"
|
||||||
|
/>
|
||||||
|
</el-card>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref, reactive } from "vue";
|
||||||
|
|
||||||
|
// 定义接收的属性
|
||||||
|
interface IOperatData {
|
||||||
|
name: string;
|
||||||
|
row: any;
|
||||||
|
column: any;
|
||||||
|
$index: number;
|
||||||
|
}
|
||||||
|
const props = defineProps<{
|
||||||
|
contentConfig: {
|
||||||
|
pageName: string;
|
||||||
|
indexAction: (data: any) => Promise<any>;
|
||||||
|
deleteAction: (data: any) => Promise<any>;
|
||||||
|
pk?: string;
|
||||||
|
toolbar: any[];
|
||||||
|
cols: any[];
|
||||||
|
};
|
||||||
|
}>();
|
||||||
|
// 定义自定义事件
|
||||||
|
const emit = defineEmits<{
|
||||||
|
addClick: [];
|
||||||
|
exportClick: [];
|
||||||
|
toolbarClick: [name: string];
|
||||||
|
editClick: [id: number];
|
||||||
|
operatClick: [data: IOperatData];
|
||||||
|
}>();
|
||||||
|
// 暴露的属性和方法
|
||||||
|
defineExpose({ fetchPageData });
|
||||||
|
|
||||||
|
// 主键
|
||||||
|
const pk = props.contentConfig.pk ?? "id";
|
||||||
|
// 加载状态
|
||||||
|
const loading = ref(false);
|
||||||
|
// 删除ID集合 用于批量删除
|
||||||
|
const removeIds = ref([]);
|
||||||
|
// 数据总数
|
||||||
|
const total = ref(0);
|
||||||
|
// 列表数据
|
||||||
|
const pageData = ref([]);
|
||||||
|
// 每页条数
|
||||||
|
const pageSize = 1;
|
||||||
|
// 搜索参数
|
||||||
|
const queryParams = reactive<any>({
|
||||||
|
pageNum: 1,
|
||||||
|
pageSize: pageSize,
|
||||||
|
});
|
||||||
|
// 上一次搜索条件
|
||||||
|
let lastFormData = {};
|
||||||
|
// 获取分页数据
|
||||||
|
function fetchPageData(formData: any = {}, isRestart = false) {
|
||||||
|
loading.value = true;
|
||||||
|
lastFormData = formData;
|
||||||
|
if (isRestart) {
|
||||||
|
queryParams.pageNum = 1;
|
||||||
|
queryParams.pageSize = pageSize;
|
||||||
|
}
|
||||||
|
props.contentConfig
|
||||||
|
.indexAction({ ...queryParams, ...formData })
|
||||||
|
.then((res: any) => {
|
||||||
|
total.value = res.total;
|
||||||
|
pageData.value = res.list;
|
||||||
|
})
|
||||||
|
.finally(() => {
|
||||||
|
loading.value = false;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
fetchPageData();
|
||||||
|
|
||||||
|
// 行选中
|
||||||
|
function handleSelectionChange(selection: any) {
|
||||||
|
removeIds.value = selection.map((item: any) => item[pk]);
|
||||||
|
}
|
||||||
|
// 刷新
|
||||||
|
function handleRefresh() {
|
||||||
|
fetchPageData({}, true);
|
||||||
|
}
|
||||||
|
// 删除
|
||||||
|
function handleDelete(id?: number | string) {
|
||||||
|
const ids = [id || removeIds.value].join(",");
|
||||||
|
if (!ids) {
|
||||||
|
ElMessage.warning("请勾选删除项");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
ElMessageBox.confirm("确认删除?", "警告", {
|
||||||
|
confirmButtonText: "确定",
|
||||||
|
cancelButtonText: "取消",
|
||||||
|
type: "warning",
|
||||||
|
}).then(function () {
|
||||||
|
props.contentConfig.deleteAction(ids).then(() => {
|
||||||
|
ElMessage.success("删除成功");
|
||||||
|
handleRefresh();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
// 分页
|
||||||
|
function handlePagination() {
|
||||||
|
fetchPageData(lastFormData);
|
||||||
|
}
|
||||||
|
// 操作栏
|
||||||
|
function handleToolbar(name: string) {
|
||||||
|
switch (name) {
|
||||||
|
case "refresh":
|
||||||
|
handleRefresh();
|
||||||
|
break;
|
||||||
|
case "add":
|
||||||
|
emit("addClick");
|
||||||
|
break;
|
||||||
|
case "delete":
|
||||||
|
handleDelete();
|
||||||
|
break;
|
||||||
|
case "export":
|
||||||
|
emit("exportClick");
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
emit("toolbarClick", name);
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// 操作列
|
||||||
|
function handleOperat(data: IOperatData) {
|
||||||
|
switch (data.name) {
|
||||||
|
case "edit":
|
||||||
|
emit("editClick", data.row);
|
||||||
|
break;
|
||||||
|
case "delete":
|
||||||
|
handleDelete(data.row[pk]);
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
emit("operatClick", data);
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped></style>
|
||||||
128
src/components/PageModal/index.vue
Normal file
128
src/components/PageModal/index.vue
Normal file
@@ -0,0 +1,128 @@
|
|||||||
|
<template>
|
||||||
|
<el-dialog
|
||||||
|
v-model="dialogVisible"
|
||||||
|
v-bind="modalConfig.dialog"
|
||||||
|
@close="closeDialog"
|
||||||
|
>
|
||||||
|
<!-- 表单 -->
|
||||||
|
<el-form
|
||||||
|
ref="formRef"
|
||||||
|
:model="formData"
|
||||||
|
:rules="modalConfig.formRules"
|
||||||
|
label-width="80px"
|
||||||
|
>
|
||||||
|
<template v-for="item in modalConfig.formItems" :key="item.prop">
|
||||||
|
<el-form-item :label="item.label" :prop="item.prop">
|
||||||
|
<!-- Select 选择器 -->
|
||||||
|
<template v-if="item.type === 'select'">
|
||||||
|
<el-select v-model="formData[item.prop]" v-bind="item.attrs">
|
||||||
|
<template v-for="option in item.options" :key="option.value">
|
||||||
|
<el-option :label="option.label" :value="option.value" />
|
||||||
|
</template>
|
||||||
|
</el-select>
|
||||||
|
</template>
|
||||||
|
<!-- Radio 单选框 -->
|
||||||
|
<template v-else-if="item.type === 'radio'">
|
||||||
|
<el-radio-group v-model="formData[item.prop]" v-bind="item.attrs">
|
||||||
|
<template v-for="option in item.options" :key="option.value">
|
||||||
|
<el-radio :label="option.label" :value="option.value" />
|
||||||
|
</template>
|
||||||
|
</el-radio-group>
|
||||||
|
</template>
|
||||||
|
<!-- TreeSelect 树形选择 -->
|
||||||
|
<template v-else-if="item.type === 'tree-select'">
|
||||||
|
<el-tree-select v-model="formData[item.prop]" v-bind="item.attrs" />
|
||||||
|
</template>
|
||||||
|
<!-- DatePicker 日期选择器 -->
|
||||||
|
<template v-else-if="item.type === 'date-picker'">
|
||||||
|
<el-date-picker v-model="formData[item.prop]" v-bind="item.attrs" />
|
||||||
|
</template>
|
||||||
|
<!-- 自定义 -->
|
||||||
|
<template v-else-if="item.type === 'custom'">
|
||||||
|
<slot
|
||||||
|
:name="item.slotName ?? item.prop"
|
||||||
|
:prop="item.prop"
|
||||||
|
v-bind="item.attrs"
|
||||||
|
></slot>
|
||||||
|
</template>
|
||||||
|
<!-- Input 输入框 -->
|
||||||
|
<template v-else>
|
||||||
|
<el-input v-model="formData[item.prop]" v-bind="item.attrs" />
|
||||||
|
</template>
|
||||||
|
</el-form-item>
|
||||||
|
</template>
|
||||||
|
</el-form>
|
||||||
|
<!-- 弹窗底部操作按钮 -->
|
||||||
|
<template #footer>
|
||||||
|
<div class="dialog-footer">
|
||||||
|
<el-button type="primary" @click="handleSubmit">确 定</el-button>
|
||||||
|
<el-button @click="closeDialog">取消</el-button>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</el-dialog>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref, reactive } from "vue";
|
||||||
|
import { useThrottleFn } from "@vueuse/core";
|
||||||
|
import type { FormRules, ElForm } from "element-plus";
|
||||||
|
|
||||||
|
// 定义接收的属性/自定义事件
|
||||||
|
const props = defineProps<{
|
||||||
|
modalConfig: {
|
||||||
|
dialog: any;
|
||||||
|
pageName?: string;
|
||||||
|
formAction: (data: any) => Promise<any>;
|
||||||
|
formItems: Array<{
|
||||||
|
type: string;
|
||||||
|
label: string;
|
||||||
|
prop: string;
|
||||||
|
attrs?: any;
|
||||||
|
initialValue?: any;
|
||||||
|
options?: { label: string; value: any }[];
|
||||||
|
slotName?: string;
|
||||||
|
}>;
|
||||||
|
formRules: FormRules;
|
||||||
|
};
|
||||||
|
}>();
|
||||||
|
const emit = defineEmits<{
|
||||||
|
submitClick: [];
|
||||||
|
}>();
|
||||||
|
|
||||||
|
const dialogVisible = ref(false);
|
||||||
|
const formRef = ref<InstanceType<typeof ElForm>>();
|
||||||
|
const formData = reactive<any>({});
|
||||||
|
// 初始化
|
||||||
|
function setModalVisible(initData: any = {}) {
|
||||||
|
dialogVisible.value = true;
|
||||||
|
for (const item of props.modalConfig.formItems) {
|
||||||
|
formData[item.prop] = initData[item.prop] ?? item.initialValue ?? "";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// 表单提交
|
||||||
|
const handleSubmit = useThrottleFn(() => {
|
||||||
|
formRef.value?.validate((valid: any) => {
|
||||||
|
if (valid) {
|
||||||
|
props.modalConfig.formAction(formData).then(() => {
|
||||||
|
ElMessage.success(
|
||||||
|
props.modalConfig.dialog.title
|
||||||
|
? `${props.modalConfig.dialog.title}成功`
|
||||||
|
: "操作成功"
|
||||||
|
);
|
||||||
|
emit("submitClick");
|
||||||
|
closeDialog();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}, 3000);
|
||||||
|
// 关闭弹窗
|
||||||
|
function closeDialog() {
|
||||||
|
dialogVisible.value = false;
|
||||||
|
formRef.value?.resetFields();
|
||||||
|
formRef.value?.clearValidate();
|
||||||
|
}
|
||||||
|
// 暴露的属性和方法
|
||||||
|
defineExpose({ setModalVisible });
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped></style>
|
||||||
97
src/components/PageSearch/index.vue
Normal file
97
src/components/PageSearch/index.vue
Normal file
@@ -0,0 +1,97 @@
|
|||||||
|
<template>
|
||||||
|
<div class="search-container" v-hasPerm="[`${searchConfig.pageName}:query`]">
|
||||||
|
<el-form ref="queryFormRef" :model="queryParams" :inline="true">
|
||||||
|
<template v-for="item in searchConfig.formItems" :key="item.prop">
|
||||||
|
<el-form-item :label="item.label" :prop="item.prop">
|
||||||
|
<!-- Select 选择器 -->
|
||||||
|
<template v-if="item.type === 'select'">
|
||||||
|
<el-select v-model="queryParams[item.prop]" v-bind="item.attrs">
|
||||||
|
<template v-for="option in item.options" :key="option.value">
|
||||||
|
<el-option :label="option.label" :value="option.value" />
|
||||||
|
</template>
|
||||||
|
</el-select>
|
||||||
|
</template>
|
||||||
|
<!-- DatePicker 日期选择器 -->
|
||||||
|
<template v-else-if="item.type === 'date-picker'">
|
||||||
|
<el-date-picker
|
||||||
|
v-model="queryParams[item.prop]"
|
||||||
|
v-bind="item.attrs"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
|
<!-- Input 输入框 -->
|
||||||
|
<template v-else>
|
||||||
|
<el-input
|
||||||
|
v-model="queryParams[item.prop]"
|
||||||
|
v-bind="item.attrs"
|
||||||
|
@keyup.enter="handleQuery"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
|
</el-form-item>
|
||||||
|
</template>
|
||||||
|
<el-form-item>
|
||||||
|
<el-button type="primary" @click="handleQuery">
|
||||||
|
<i-ep-search />搜索
|
||||||
|
</el-button>
|
||||||
|
<el-button @click="handleReset"><i-ep-refresh />重置</el-button>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref, reactive } from "vue";
|
||||||
|
import type { ElForm } from "element-plus";
|
||||||
|
|
||||||
|
// 定义接收的属性/自定义事件
|
||||||
|
interface IProps {
|
||||||
|
searchConfig: {
|
||||||
|
pageName: string;
|
||||||
|
formItems: Array<{
|
||||||
|
type: string;
|
||||||
|
label: string;
|
||||||
|
prop: string;
|
||||||
|
attrs?: any;
|
||||||
|
initialValue?: any;
|
||||||
|
options?: { label: string; value: any }[];
|
||||||
|
}>;
|
||||||
|
};
|
||||||
|
}
|
||||||
|
const props = defineProps<IProps>();
|
||||||
|
const emit = defineEmits<{
|
||||||
|
queryClick: [queryParams: any];
|
||||||
|
resetClick: [queryParams: any];
|
||||||
|
}>();
|
||||||
|
// 暴露的属性和方法
|
||||||
|
defineExpose({ getQueryParams });
|
||||||
|
|
||||||
|
const queryFormRef = ref<InstanceType<typeof ElForm>>();
|
||||||
|
// 定义form的数据
|
||||||
|
const queryParams = reactive<any>({});
|
||||||
|
for (const item of props.searchConfig.formItems) {
|
||||||
|
queryParams[item.prop] = item.initialValue ?? "";
|
||||||
|
}
|
||||||
|
// 重置操作
|
||||||
|
function handleReset() {
|
||||||
|
queryFormRef.value?.resetFields();
|
||||||
|
emit("resetClick", queryParams);
|
||||||
|
}
|
||||||
|
// 查询操作
|
||||||
|
function handleQuery() {
|
||||||
|
emit("queryClick", queryParams);
|
||||||
|
}
|
||||||
|
// 获取分页数据
|
||||||
|
function getQueryParams() {
|
||||||
|
return queryParams;
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.search-container {
|
||||||
|
padding: 18px 0 0 10px;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
background-color: var(--el-bg-color-overlay);
|
||||||
|
border: 1px solid var(--el-border-color-light);
|
||||||
|
border-radius: 4px;
|
||||||
|
box-shadow: var(--el-box-shadow-light);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -54,6 +54,23 @@ export const constantRoutes: RouteRecordRaw[] = [
|
|||||||
],
|
],
|
||||||
},
|
},
|
||||||
|
|
||||||
|
{
|
||||||
|
path: "/curd",
|
||||||
|
component: Layout,
|
||||||
|
meta: {
|
||||||
|
alwaysShow: false,
|
||||||
|
},
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
path: "index",
|
||||||
|
component: () => import("@/views/demo/curd/index.vue"),
|
||||||
|
meta: {
|
||||||
|
title: "增删改查",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
|
||||||
// 外部链接
|
// 外部链接
|
||||||
// {
|
// {
|
||||||
// path: "/external-link",
|
// path: "/external-link",
|
||||||
|
|||||||
145
src/views/demo/curd/config/add.ts
Normal file
145
src/views/demo/curd/config/add.ts
Normal file
@@ -0,0 +1,145 @@
|
|||||||
|
const modalConfig = {
|
||||||
|
pageName: "sys:user",
|
||||||
|
dialog: {
|
||||||
|
title: "新增用户",
|
||||||
|
width: 800,
|
||||||
|
"append-to-body": true,
|
||||||
|
},
|
||||||
|
formAction: function (data: any) {
|
||||||
|
console.log("add", data);
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
resolve("新增成功");
|
||||||
|
});
|
||||||
|
},
|
||||||
|
formItems: [
|
||||||
|
{
|
||||||
|
type: "input",
|
||||||
|
label: "用户名",
|
||||||
|
prop: "username",
|
||||||
|
attrs: {
|
||||||
|
placeholder: "请输入用户名",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: "input",
|
||||||
|
label: "用户昵称",
|
||||||
|
prop: "nickname",
|
||||||
|
attrs: {
|
||||||
|
placeholder: "请输入用户昵称",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: "tree-select",
|
||||||
|
label: "所属部门",
|
||||||
|
prop: "deptId",
|
||||||
|
attrs: {
|
||||||
|
placeholder: "请选择所属部门",
|
||||||
|
data: [
|
||||||
|
{
|
||||||
|
value: 1,
|
||||||
|
label: "有来技术",
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
value: 2,
|
||||||
|
label: "研发部门",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 3,
|
||||||
|
label: "测试部门",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
filterable: true,
|
||||||
|
"check-strictly": true,
|
||||||
|
"render-after-expand": false,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: "select",
|
||||||
|
label: "性别",
|
||||||
|
prop: "gender",
|
||||||
|
attrs: {
|
||||||
|
placeholder: "请选择",
|
||||||
|
},
|
||||||
|
options: [
|
||||||
|
{ label: "男", value: 1 },
|
||||||
|
{ label: "女", value: 2 },
|
||||||
|
{ label: "未知", value: 0 },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: "select",
|
||||||
|
label: "角色",
|
||||||
|
prop: "roleIds",
|
||||||
|
attrs: {
|
||||||
|
placeholder: "请选择",
|
||||||
|
multiple: true,
|
||||||
|
},
|
||||||
|
options: [
|
||||||
|
{ label: "系统管理员", value: 2 },
|
||||||
|
{ label: "系统管理员1", value: 4 },
|
||||||
|
{ label: "系统管理员2", value: 5 },
|
||||||
|
{ label: "系统管理员3", value: 6 },
|
||||||
|
{ label: "系统管理员4", value: 7 },
|
||||||
|
{ label: "系统管理员5", value: 8 },
|
||||||
|
{ label: "系统管理员6", value: 9 },
|
||||||
|
{ label: "系统管理员7", value: 10 },
|
||||||
|
{ label: "系统管理员8", value: 11 },
|
||||||
|
{ label: "访问游客", value: 3 },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: "input",
|
||||||
|
label: "手机号码",
|
||||||
|
prop: "mobile",
|
||||||
|
attrs: {
|
||||||
|
placeholder: "请输入手机号码",
|
||||||
|
maxlength: 11,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: "input",
|
||||||
|
label: "邮箱",
|
||||||
|
prop: "email",
|
||||||
|
attrs: {
|
||||||
|
placeholder: "请输入邮箱",
|
||||||
|
maxlength: 50,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: "radio",
|
||||||
|
label: "状态",
|
||||||
|
prop: "status",
|
||||||
|
options: [
|
||||||
|
{ label: "正常", value: 1 },
|
||||||
|
{ label: "禁用", value: 0 },
|
||||||
|
],
|
||||||
|
initialValue: 1,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
formRules: {
|
||||||
|
username: [{ required: true, message: "用户名不能为空", trigger: "blur" }],
|
||||||
|
nickname: [
|
||||||
|
{ required: true, message: "用户昵称不能为空", trigger: "blur" },
|
||||||
|
],
|
||||||
|
deptId: [{ required: true, message: "所属部门不能为空", trigger: "blur" }],
|
||||||
|
roleIds: [{ required: true, message: "用户角色不能为空", trigger: "blur" }],
|
||||||
|
email: [
|
||||||
|
{
|
||||||
|
pattern: /\w[-\w.+]*@([A-Za-z0-9][-A-Za-z0-9]+\.)+[A-Za-z]{2,14}/,
|
||||||
|
message: "请输入正确的邮箱地址",
|
||||||
|
trigger: "blur",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
mobile: [
|
||||||
|
{
|
||||||
|
pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
|
||||||
|
message: "请输入正确的手机号码",
|
||||||
|
trigger: "blur",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
export default modalConfig;
|
||||||
95
src/views/demo/curd/config/content.ts
Normal file
95
src/views/demo/curd/config/content.ts
Normal file
@@ -0,0 +1,95 @@
|
|||||||
|
const contentConfig = {
|
||||||
|
pageName: "sys:user",
|
||||||
|
indexAction: function (data: any) {
|
||||||
|
console.log("index", data);
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
setTimeout(() => {
|
||||||
|
resolve({
|
||||||
|
total: 2,
|
||||||
|
list: [
|
||||||
|
{
|
||||||
|
id: 2,
|
||||||
|
username: "admin",
|
||||||
|
nickname: "系统管理员",
|
||||||
|
mobile: "17621210366",
|
||||||
|
genderLabel: "男",
|
||||||
|
avatar:
|
||||||
|
"https://oss.youlai.tech/youlai-boot/2023/05/16/811270ef31f548af9cffc026dfc3777b.gif",
|
||||||
|
email: null,
|
||||||
|
status: 1,
|
||||||
|
deptName: "有来技术",
|
||||||
|
roleNames: "系统管理员",
|
||||||
|
createTime: "2019-10-10",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 3,
|
||||||
|
username: "test",
|
||||||
|
nickname: "测试小用户",
|
||||||
|
mobile: "17621210366",
|
||||||
|
genderLabel: "男",
|
||||||
|
avatar:
|
||||||
|
"https://oss.youlai.tech/youlai-boot/2023/05/16/811270ef31f548af9cffc026dfc3777b.gif",
|
||||||
|
email: null,
|
||||||
|
status: 1,
|
||||||
|
deptName: "测试部门",
|
||||||
|
roleNames: "访问游客",
|
||||||
|
createTime: "2021-06-05",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
});
|
||||||
|
}, 800);
|
||||||
|
});
|
||||||
|
},
|
||||||
|
deleteAction: function (id: string) {
|
||||||
|
console.log("delete", id);
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
resolve("删除成功");
|
||||||
|
});
|
||||||
|
},
|
||||||
|
pk: "id",
|
||||||
|
toolbar: [
|
||||||
|
"refresh",
|
||||||
|
"add",
|
||||||
|
"delete",
|
||||||
|
"export",
|
||||||
|
{
|
||||||
|
name: "upload",
|
||||||
|
icon: "upload",
|
||||||
|
text: "导入",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
cols: [
|
||||||
|
{ type: "selection", width: 50, align: "center" },
|
||||||
|
{ label: "编号", align: "center", prop: "id", width: 100 },
|
||||||
|
{ label: "用户名", align: "center", prop: "username" },
|
||||||
|
{ label: "用户昵称", align: "center", prop: "nickname", width: 120 },
|
||||||
|
{ label: "性别", align: "center", prop: "genderLabel", width: 100 },
|
||||||
|
{ label: "部门", align: "center", prop: "deptName", width: 120 },
|
||||||
|
{ label: "手机号码", align: "center", prop: "mobile", width: 120 },
|
||||||
|
{
|
||||||
|
label: "状态",
|
||||||
|
align: "center",
|
||||||
|
prop: "status",
|
||||||
|
templet: "custom",
|
||||||
|
},
|
||||||
|
{ label: "创建时间", align: "center", prop: "createTime", width: 180 },
|
||||||
|
{
|
||||||
|
label: "操作",
|
||||||
|
fixed: "right",
|
||||||
|
width: 220,
|
||||||
|
templet: "tool",
|
||||||
|
operat: [
|
||||||
|
{
|
||||||
|
name: "reset_pwd",
|
||||||
|
auth: "reset_pwd",
|
||||||
|
icon: "refresh-left",
|
||||||
|
text: "重置密码",
|
||||||
|
},
|
||||||
|
"edit",
|
||||||
|
"delete",
|
||||||
|
],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
|
|
||||||
|
export default contentConfig;
|
||||||
146
src/views/demo/curd/config/edit.ts
Normal file
146
src/views/demo/curd/config/edit.ts
Normal file
@@ -0,0 +1,146 @@
|
|||||||
|
const modalConfig = {
|
||||||
|
pageName: "sys:user",
|
||||||
|
dialog: {
|
||||||
|
title: "修改用户",
|
||||||
|
width: 800,
|
||||||
|
"append-to-body": true,
|
||||||
|
},
|
||||||
|
formAction: function (data: any) {
|
||||||
|
console.log("edit", data);
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
resolve("编辑成功");
|
||||||
|
});
|
||||||
|
},
|
||||||
|
formItems: [
|
||||||
|
{
|
||||||
|
type: "input",
|
||||||
|
label: "用户名",
|
||||||
|
prop: "username",
|
||||||
|
attrs: {
|
||||||
|
placeholder: "请输入用户名",
|
||||||
|
readonly: true,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: "input",
|
||||||
|
label: "用户昵称",
|
||||||
|
prop: "nickname",
|
||||||
|
attrs: {
|
||||||
|
placeholder: "请输入用户昵称",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: "tree-select",
|
||||||
|
label: "所属部门",
|
||||||
|
prop: "deptId",
|
||||||
|
attrs: {
|
||||||
|
placeholder: "请选择所属部门",
|
||||||
|
data: [
|
||||||
|
{
|
||||||
|
value: 1,
|
||||||
|
label: "有来技术",
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
value: 2,
|
||||||
|
label: "研发部门",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 3,
|
||||||
|
label: "测试部门",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
filterable: true,
|
||||||
|
"check-strictly": true,
|
||||||
|
"render-after-expand": false,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: "select",
|
||||||
|
label: "性别",
|
||||||
|
prop: "gender",
|
||||||
|
attrs: {
|
||||||
|
placeholder: "请选择",
|
||||||
|
},
|
||||||
|
options: [
|
||||||
|
{ label: "男", value: 1 },
|
||||||
|
{ label: "女", value: 2 },
|
||||||
|
{ label: "未知", value: 0 },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: "select",
|
||||||
|
label: "角色",
|
||||||
|
prop: "roleIds",
|
||||||
|
attrs: {
|
||||||
|
placeholder: "请选择",
|
||||||
|
multiple: true,
|
||||||
|
},
|
||||||
|
options: [
|
||||||
|
{ label: "系统管理员", value: 2 },
|
||||||
|
{ label: "系统管理员1", value: 4 },
|
||||||
|
{ label: "系统管理员2", value: 5 },
|
||||||
|
{ label: "系统管理员3", value: 6 },
|
||||||
|
{ label: "系统管理员4", value: 7 },
|
||||||
|
{ label: "系统管理员5", value: 8 },
|
||||||
|
{ label: "系统管理员6", value: 9 },
|
||||||
|
{ label: "系统管理员7", value: 10 },
|
||||||
|
{ label: "系统管理员8", value: 11 },
|
||||||
|
{ label: "访问游客", value: 3 },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: "input",
|
||||||
|
label: "手机号码",
|
||||||
|
prop: "mobile",
|
||||||
|
attrs: {
|
||||||
|
placeholder: "请输入手机号码",
|
||||||
|
maxlength: 11,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: "input",
|
||||||
|
label: "邮箱",
|
||||||
|
prop: "email",
|
||||||
|
attrs: {
|
||||||
|
placeholder: "请输入邮箱",
|
||||||
|
maxlength: 50,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: "radio",
|
||||||
|
label: "状态",
|
||||||
|
prop: "status",
|
||||||
|
options: [
|
||||||
|
{ label: "正常", value: 1 },
|
||||||
|
{ label: "禁用", value: 0 },
|
||||||
|
],
|
||||||
|
initialValue: 1,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
formRules: {
|
||||||
|
username: [{ required: true, message: "用户名不能为空", trigger: "blur" }],
|
||||||
|
nickname: [
|
||||||
|
{ required: true, message: "用户昵称不能为空", trigger: "blur" },
|
||||||
|
],
|
||||||
|
deptId: [{ required: true, message: "所属部门不能为空", trigger: "blur" }],
|
||||||
|
roleIds: [{ required: true, message: "用户角色不能为空", trigger: "blur" }],
|
||||||
|
email: [
|
||||||
|
{
|
||||||
|
pattern: /\w[-\w.+]*@([A-Za-z0-9][-A-Za-z0-9]+\.)+[A-Za-z]{2,14}/,
|
||||||
|
message: "请输入正确的邮箱地址",
|
||||||
|
trigger: "blur",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
mobile: [
|
||||||
|
{
|
||||||
|
pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
|
||||||
|
message: "请输入正确的手机号码",
|
||||||
|
trigger: "blur",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
export default modalConfig;
|
||||||
50
src/views/demo/curd/config/search.ts
Normal file
50
src/views/demo/curd/config/search.ts
Normal file
@@ -0,0 +1,50 @@
|
|||||||
|
const searchConfig = {
|
||||||
|
pageName: "sys:user",
|
||||||
|
formItems: [
|
||||||
|
{
|
||||||
|
type: "input",
|
||||||
|
label: "关键字",
|
||||||
|
prop: "keywords",
|
||||||
|
attrs: {
|
||||||
|
placeholder: "用户名/昵称/手机号",
|
||||||
|
clearable: true,
|
||||||
|
style: {
|
||||||
|
width: "200px",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: "select",
|
||||||
|
label: "状态",
|
||||||
|
prop: "status",
|
||||||
|
attrs: {
|
||||||
|
placeholder: "全部",
|
||||||
|
clearable: true,
|
||||||
|
style: {
|
||||||
|
width: "100px",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
options: [
|
||||||
|
{ label: "启用", value: 1 },
|
||||||
|
{ label: "禁用", value: 0 },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: "date-picker",
|
||||||
|
label: "创建时间",
|
||||||
|
prop: "createAt",
|
||||||
|
attrs: {
|
||||||
|
type: "daterange",
|
||||||
|
"range-separator": "~",
|
||||||
|
"start-placeholder": "开始时间",
|
||||||
|
"end-placeholder": "截止时间",
|
||||||
|
"value-format": "YYYY-MM-DD",
|
||||||
|
style: {
|
||||||
|
width: "240px",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
|
|
||||||
|
export default searchConfig;
|
||||||
107
src/views/demo/curd/index.vue
Normal file
107
src/views/demo/curd/index.vue
Normal file
@@ -0,0 +1,107 @@
|
|||||||
|
<template>
|
||||||
|
<div class="app-container">
|
||||||
|
<!-- 搜索 -->
|
||||||
|
<page-search
|
||||||
|
ref="searchRef"
|
||||||
|
:search-config="searchConfig"
|
||||||
|
@query-click="handleQueryClick"
|
||||||
|
@reset-click="handleResetClick"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<!-- 列表 -->
|
||||||
|
<page-content
|
||||||
|
ref="contentRef"
|
||||||
|
:content-config="contentConfig"
|
||||||
|
@add-click="handleAddClick"
|
||||||
|
@edit-click="handleEditClick"
|
||||||
|
@export-click="handleExportClick"
|
||||||
|
@toolbar-click="handleToolbarClick"
|
||||||
|
@operat-click="handleOperatClick"
|
||||||
|
>
|
||||||
|
<template #status="scope">
|
||||||
|
<el-tag :type="scope.row[scope.prop] == 1 ? 'success' : 'info'">{{
|
||||||
|
scope.row[scope.prop] == 1 ? "启用" : "禁用"
|
||||||
|
}}</el-tag>
|
||||||
|
</template>
|
||||||
|
</page-content>
|
||||||
|
|
||||||
|
<!-- 新增 -->
|
||||||
|
<page-modal
|
||||||
|
ref="addModalRef"
|
||||||
|
:modal-config="addModalConfig"
|
||||||
|
@submit-click="handleSubmitClick"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<!-- 编辑 -->
|
||||||
|
<page-modal
|
||||||
|
ref="editModalRef"
|
||||||
|
:modal-config="editModalConfig"
|
||||||
|
@submit-click="handleSubmitClick"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import searchConfig from "./config/search";
|
||||||
|
import contentConfig from "./config/content";
|
||||||
|
import addModalConfig from "./config/add";
|
||||||
|
import editModalConfig from "./config/edit";
|
||||||
|
import type PageSearch from "@/components/PageSearch/index.vue";
|
||||||
|
import type PageContent from "@/components/PageContent/index.vue";
|
||||||
|
import type PageModal from "@/components/PageModal/index.vue";
|
||||||
|
|
||||||
|
const searchRef = ref<InstanceType<typeof PageSearch>>();
|
||||||
|
const contentRef = ref<InstanceType<typeof PageContent>>();
|
||||||
|
const addModalRef = ref<InstanceType<typeof PageModal>>();
|
||||||
|
|
||||||
|
// 搜索
|
||||||
|
function handleQueryClick(queryParams: any) {
|
||||||
|
contentRef.value?.fetchPageData(queryParams, true);
|
||||||
|
}
|
||||||
|
// 重置
|
||||||
|
function handleResetClick() {
|
||||||
|
contentRef.value?.fetchPageData({}, true);
|
||||||
|
}
|
||||||
|
// 新增
|
||||||
|
function handleAddClick() {
|
||||||
|
console.log("add");
|
||||||
|
//显示添加表单
|
||||||
|
addModalRef.value?.setModalVisible();
|
||||||
|
}
|
||||||
|
// 导出
|
||||||
|
function handleExportClick() {
|
||||||
|
console.log("export", searchRef.value?.getQueryParams());
|
||||||
|
}
|
||||||
|
// 其他工具栏
|
||||||
|
function handleToolbarClick(name: string) {
|
||||||
|
console.log(name);
|
||||||
|
}
|
||||||
|
// 编辑
|
||||||
|
const editModalRef = ref<InstanceType<typeof PageModal>>();
|
||||||
|
function handleEditClick() {
|
||||||
|
//显示编辑表单或者根据id获取数据进行填充
|
||||||
|
editModalRef.value?.setModalVisible({
|
||||||
|
id: 2,
|
||||||
|
username: "admin",
|
||||||
|
nickname: "系统管理员",
|
||||||
|
mobile: "17621210366",
|
||||||
|
gender: 1,
|
||||||
|
avatar:
|
||||||
|
"https://oss.youlai.tech/youlai-boot/2023/05/16/811270ef31f548af9cffc026dfc3777b.gif",
|
||||||
|
email: "",
|
||||||
|
status: 1,
|
||||||
|
deptId: 1,
|
||||||
|
roleIds: [2],
|
||||||
|
});
|
||||||
|
}
|
||||||
|
// 其他操作列
|
||||||
|
function handleOperatClick(data: any) {
|
||||||
|
console.log(data.name, data.row);
|
||||||
|
}
|
||||||
|
// 表单提交
|
||||||
|
function handleSubmitClick() {
|
||||||
|
//刷新别表数据
|
||||||
|
console.log("submit");
|
||||||
|
contentRef.value?.fetchPageData({}, true);
|
||||||
|
}
|
||||||
|
</script>
|
||||||
Reference in New Issue
Block a user