tongtong/vue3-element-admin
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: 字典TypeScirpt类型约束补充

Browse Source
This commit is contained in:
郝先瑞
2022-03-13 16:26:02 +08:00
parent 7fd58bf48f
commit 4c5077764a
2 changed files with 328 additions and 313 deletions
Download Patch File Download Diff File Expand all files Collapse all files

298
src/views/system/dict/components/Dict.vue
View File

@@ -1,45 +1,51 @@
<template>
<div class="app-container">
<!-- 搜索表单 -->
<el-form
:model="state.queryParams"
ref="queryForm"
:inline="true"
>
<el-form ref="queryFormRef" :model="state.queryParams" :inline="true">
<el-form-item>
<el-button type="success" :icon="Plus" @click="handleAdd">新增</el-button>
<el-button type="danger" :icon="Delete" :disabled="state.multiple" @click="handleDelete">删除
<el-button type="success" :icon="Plus" @click="handleAdd"
>新增</el-button
>
<el-button
type="danger"
:icon="Delete"
:disabled="state.multiple"
@click="handleDelete"
>删除
</el-button>
</el-form-item>
<el-form-item prop="name">
<el-input
v-model="state.queryParams.name"
placeholder="字典名称"
clearable
@keyup.enter.native="handleQuery"/>
v-model="state.queryParams.name"
placeholder="字典名称"
clearable
@keyup.enter="handleQuery"
/>
</el-form-item>
<el-form-item>
<el-button type="primary" :icon="Search" @click="handleQuery">搜索</el-button>
<el-button type="primary" :icon="Search" @click="handleQuery"
>搜索</el-button
>
<el-button :icon="Refresh" @click="resetForm">重置</el-button>
</el-form-item>
</el-form>
<!-- 数据表格 -->
<el-table
highlight-current-row
:data="state.pageList"
v-loading="state.loading"
@row-click="handleRowClick"
@selection-change="handleSelectionChange"
border
highlight-current-row
:data="dictList"
v-loading="loading"
@row-click="handleRowClick"
@selection-change="handleSelectionChange"
border
>
<el-table-column type="selection" width="55" align="center"/>
<el-table-column label="字典名称" prop="name" width="120"/>
<el-table-column label="字典编码" prop="code"/>
<el-table-column type="selection" width="55" align="center" />
<el-table-column label="字典名称" prop="name" width="120" />
<el-table-column label="字典编码" prop="code" />
<el-table-column label="状态" align="center" width="80">
<template #default="scope">
<el-tag v-if="scope.row.status===1" type="success" >启用</el-tag>
<el-tag v-if="scope.row.status === 1" type="success">启用</el-tag>
<el-tag v-else type="info">禁用</el-tag>
</template>
</el-table-column>
@@ -47,56 +53,63 @@
<el-table-column label="操作" align="center" width="150">
<template #default="scope">
<el-button
type="primary"
:icon="Edit"
circle
plain
@click.stop="handleUpdate(scope.row)"
type="primary"
:icon="Edit"
circle
plain
@click.stop="handleUpdate(scope.row)"
/>
<el-button
type="danger"
:icon="Delete"
circle
plain
@click.stop="handleDelete(scope.row)"
type="danger"
:icon="Delete"
circle
plain
@click.stop="handleDelete(scope.row)"
/>
</template>
</el-table-column>
</el-table>
<pagination
v-show="state.total>0"
:total="state.total"
v-model:page="state.queryParams.pageNum"
v-model:limit="state.queryParams.pageSize"
@pagination="handleQuery"
v-show="total > 0"
:total="total"
v-model:page="queryParams.pageNum"
v-model:limit="queryParams.pageSize"
@pagination="handleQuery"
/>
<!-- 弹窗表单 -->
<el-dialog
:title="state.dialog.title"
v-model="state.dialog.visible"
width="500px"
@close="cancel">
:title="dialog.title"
v-model="dialog.visible"
width="500px"
@close="cancel"
>
<el-form
ref="dataForm"
:model="state.formData"
:rules="state.rules"
label-width="80px">
ref="dataFormRef"
:model="formData"
:rules="rules"
label-width="80px"
>
<el-form-item label="字典名称" prop="name">
<el-input v-model="state.formData.name" placeholder="请输入字典名称"/>
<el-input v-model="formData.name" placeholder="请输入字典名称" />
</el-form-item>
<el-form-item label="字典编码" prop="code">
<el-input v-model="state.formData.code" placeholder="请输入字典编码"/>
<el-input v-model="formData.code" placeholder="请输入字典编码" />
</el-form-item>
<el-form-item label="状态" prop="status">
<el-radio-group v-model="state.formData.status">
<el-radio-group v-model="formData.status">
<el-radio :label="1">正常</el-radio>
<el-radio :label="0">停用</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="备注" prop="remark">
<el-input v-model="state.formData.remark" type="textarea" placeholder="请输入内容"></el-input>
<el-input
v-model="formData.remark"
type="textarea"
placeholder="请输入内容"
:autosize="{ minRows: 2, maxRows: 4 }"
/>
</el-form-item>
</el-form>
<template #footer>
@@ -110,17 +123,28 @@
</template>
<script setup lang="ts">
import {listDictWithPage, getDictDetail, addDict, updateDict, deleteDict} from "@/api/system/dict";
import {Search, Plus, Edit, Refresh, Delete} from '@element-plus/icons-vue'
import {onMounted, reactive, ref, unref} from 'vue'
import {ElForm, ElMessage, ElMessageBox} from "element-plus";
import { onMounted, reactive, ref, toRefs } from "vue";
import {
listDictPages,
getDictFormDetail,
addDict,
updateDict,
deleteDict,
} from "@/api/system/dict";
import { Search, Plus, Edit, Refresh, Delete } from "@element-plus/icons-vue";
import { ElForm, ElMessage, ElMessageBox } from "element-plus";
import { Dialog, Dict, DictFormData, DictQueryParam } from "@/types";
import { status } from "nprogress";
const emit = defineEmits(['dictClick'])
const queryFormRef = ref(ElForm);
const dataFormRef = ref(ElForm);
const emit = defineEmits(["dictClick"]);
const state = reactive({
loading: true,
// 选中ID数组
ids: [],
ids: [] as number[],
// 非单个禁用
single: true,
// 非多个禁用
@@ -128,138 +152,120 @@ const state = reactive({
queryParams: {
pageNum: 1,
pageSize: 10,
name: undefined
},
pageList: [],
} as DictQueryParam,
dictList: [] as Dict[],
total: 0,
dialog: {
title: '',
visible: false
},
dialog: {visible:false} as Dialog,
formData: {
id: undefined,
name: undefined,
code: undefined,
status: undefined,
remark: undefined
},
status: 1,
} as DictFormData,
rules: {
name: [
{required: true, message: '请输入字典名称', trigger: 'blur'}
],
code: [
{required: true, message: '请输入字典编码', trigger: 'blur'}
]
}
})
name: [{ required: true, message: "请输入字典名称", trigger: "blur" }],
code: [{ required: true, message: "请输入字典编码", trigger: "blur" }],
},
});
const {
total,
dialog,
ids,
loading,
single,
multiple,
queryParams,
dictList,
formData,
rules,
} = toRefs(state);
function handleQuery() {
emit('dictClick',null)
state.loading = true
listDictWithPage(state.queryParams).then(response => {
const {data, total} = response as any
state.pageList = data
state.total = total
state.loading = false
})
emit("dictClick", null);
state.loading = true;
listDictPages(state.queryParams).then(({ data }) => {
state.dictList = data.list;
state.total = data.total;
state.loading = false;
});
}
function resetQuery() {
state.queryParams = {
pageNum: 1,
pageSize: 10,
name: undefined
}
handleQuery()
queryFormRef.value.resetFields();
handleQuery();
}
function handleSelectionChange(selection: any) {
state.ids = selection.map((item: any) => item.id)
state.single = selection.length !== 1
state.multiple = !selection.length
state.ids = selection.map((item: any) => item.id);
state.single = selection.length !== 1;
state.multiple = !selection.length;
}
function handleAdd() {
resetForm()
state.dialog = {
title: '添加字典',
title: "添加字典",
visible: true,
}
};
}
function handleUpdate(row: any) {
resetForm()
state.dialog = {
title: '修改字典',
visible: true
}
const id = row.id || state.ids
getDictDetail(id).then(response => {
state.formData = response.data
})
title: "修改字典",
visible: true,
};
const id = row.id || state.ids;
getDictFormDetail(id).then(({ data }) => {
state.formData = data;
});
}
const dataForm = ref(ElForm)
function submitForm() {
const form = unref(dataForm)
form.validate((valid: any) => {
if (valid) {
dataFormRef.value.validate((isValid: boolean) => {
if (isValid) {
if (state.formData.id) {
updateDict(state.formData.id, state.formData).then(response => {
ElMessage.success('修改成功')
state.dialog.visible = false
handleQuery()
})
updateDict(state.formData.id, state.formData).then((response) => {
ElMessage.success("修改成功");
state.dialog.visible = false;
handleQuery();
});
} else {
addDict(state.formData).then(response => {
ElMessage.success('新增成功')
state.dialog.visible = false
handleQuery()
})
addDict(state.formData).then((response) => {
ElMessage.success("新增成功");
state.dialog.visible = false;
handleQuery();
});
}
}
})
});
}
function resetForm() {
state.formData = {
id: undefined,
name: undefined,
code: undefined,
status: undefined,
remark: undefined
}
dataFormRef.value.resetFields();
}
function cancel() {
state.dialog.visible = false
state.dialog.visible = false;
}
function handleDelete(row: any) {
const ids = [row.id || state.ids].join(',')
ElMessageBox.confirm('确认删除已选中的数据项?', '警告', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
deleteDict(ids).then(() => {
ElMessage.success('删除成功')
handleQuery()
const ids = [row.id || state.ids].join(",");
ElMessageBox.confirm("确认删除已选中的数据项?", "警告", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
})
.then(() => {
deleteDict(ids).then(() => {
ElMessage.success("删除成功");
handleQuery();
});
})
}).catch(() =>
ElMessage.info('已取消删除')
)
.catch(() => ElMessage.info("已取消删除"));
}
function handleRowClick(row: any) {
emit('dictClick', row)
emit("dictClick", row);
}
onMounted(() => {
handleQuery()
})
handleQuery();
});
</script>

343
src/views/system/dict/components/DictItem.vue
View File

@@ -1,95 +1,113 @@
<template>
<div class="app-container">
<!-- 搜索表单 -->
<el-form
:model="state.queryParams"
ref="queryForm"
:inline="true"
>
<el-form ref="queryFormRef" :model="queryParams" :inline="true">
<el-form-item>
<el-button type="success" :icon="Plus" @click="handleAdd">新增</el-button>
<el-button type="danger" :icon="Delete" :disabled="state.multiple" @click="handleDelete">删除</el-button>
<el-button type="success" :icon="Plus" @click="handleAdd"
>新增</el-button
>
<el-button
type="danger"
:icon="Delete"
:disabled="multiple"
@click="handleDelete"
>删除</el-button
>
</el-form-item>
<el-form-item prop="name">
<el-input
v-model="state.queryParams.name"
placeholder="数据项名称"
clearable/>
v-model="queryParams.name"
placeholder="数据项名称"
clearable
/>
</el-form-item>
<el-form-item>
<el-button type="primary" :icon="Search" @click="handleQuery">搜索</el-button>
<el-button type="primary" :icon="Search" @click="handleQuery"
>搜索</el-button
>
<el-button :icon="Refresh" @click="resetQuery">重置</el-button>
</el-form-item>
</el-form>
<!-- 数据表格 -->
<el-table
:data="state.pageList"
v-loading="state.loading"
border
@selection-change="handleSelectionChange"
:data="dictItemList"
v-loading="loading"
border
@selection-change="handleSelectionChange"
>
<el-table-column type="selection" min-width="5%"/>
<el-table-column label="数据项名称" prop="name"/>
<el-table-column label="数据项值" prop="value"/>
<el-table-column type="selection" min-width="5%" />
<el-table-column label="数据项名称" prop="name" />
<el-table-column label="数据项值" prop="value" />
<el-table-column label="状态" align="center">
<template #default="scope">
<el-tag v-if="scope.row.status===1" type="success">启用</el-tag>
<el-tag v-else type="info" >禁用</el-tag>
<el-tag v-if="scope.row.status === 1" type="success">启用</el-tag>
<el-tag v-else type="info">禁用</el-tag>
</template>
</el-table-column>
<el-table-column label="操作" align="center">
<template #default="scope">
<el-button
type="primary"
:icon="Edit"
circle
plain
@click.stop="handleUpdate(scope.row)"
type="primary"
:icon="Edit"
circle
plain
@click.stop="handleUpdate(scope.row)"
/>
<el-button
type="danger"
:icon="Delete"
circle
plain
@click.stop="handleDelete(scope.row)"
type="danger"
:icon="Delete"
circle
plain
@click.stop="handleDelete(scope.row)"
/>
</template>
</el-table-column>
</el-table>
<pagination
v-show="state.total>0"
:total="state.total"
v-model:page="state.queryParams.pageNum"
v-model:limit="state.queryParams.pageSize"
@pagination="handleQuery"
v-show="state.total > 0"
:total="state.total"
v-model:page="state.queryParams.pageNum"
v-model:limit="state.queryParams.pageSize"
@pagination="handleQuery"
/>
<!-- 表单弹窗 -->
<el-dialog
:title="state.dialog.title"
v-model="state.dialog.visible"
width="500px"
@close="cancel"
:title="dialog.title"
v-model="dialog.visible"
width="500px"
@close="cancel"
>
<el-form
ref="dataForm"
:model="state.formData"
:rules="state.rules"
label-width="100px"
ref="dataFormRef"
:model="formData"
:rules="rules"
label-width="100px"
>
<el-form-item label="字典名称">
<el-input v-model="props.dictName" :disabled="true"/>
<el-input v-model="props.dictName" :disabled="true" />
</el-form-item>
<el-form-item label="字典项名称" prop="name">
<el-input v-model="state.formData.name" placeholder="请输入字典项名称"/>
<el-input
v-model="state.formData.name"
placeholder="请输入字典项名称"
/>
</el-form-item>
<el-form-item label="字典项值" prop="value">
<el-input v-model="state.formData.value" placeholder="请输入字典项值"/>
<el-input
v-model="state.formData.value"
placeholder="请输入字典项值"
/>
</el-form-item>
<el-form-item label="排序" prop="sort">
<el-input-number v-model="state.formData.sort" style="width: 80px;" controls-position="right" :min="0"/>
<el-input-number
v-model="state.formData.sort"
style="width: 80px"
controls-position="right"
:min="0"
/>
</el-form-item>
<el-form-item label="状态" prop="status">
<el-radio-group v-model="state.formData.status">
@@ -112,186 +130,177 @@
</template>
<script setup lang="ts">
import { onMounted, reactive, ref, toRefs, unref, watch } from "vue";
import { ElForm, ElMessage, ElMessageBox } from "element-plus";
import {
listDictItemsWithPage,
Dialog,
DictItem,
DictItemFormData,
DictItemQueryParam,
} from "@/types";
import {
listDictItemPages,
getDictItemDetail,
addDictItem,
updateDictItem,
deleteDictItem
deleteDictItem,
} from "@/api/system/dict";
import {Search, Plus, Edit, Refresh, Delete} from '@element-plus/icons-vue';
import {onMounted, reactive, ref, unref, watch} from 'vue'
import {ElForm, ElMessage, ElMessageBox} from "element-plus";
import { Search, Plus, Edit, Refresh, Delete } from "@element-plus/icons-vue";
const props = defineProps({
dictCode: {
type: String,
default: ''
default: "",
},
dictName: {
type: String,
default: ''
}
})
default: "",
},
});
watch(() => props.dictCode, (newVal, oldVal) => {
state.queryParams.dictCode = newVal
handleQuery()
})
watch(
() => props.dictCode,
(value) => {
state.queryParams.dictCode = value;
state.formData.dictCode = value;
handleQuery();
}
);
const queryFormRef = ref(ElForm);
const dataFormRef = ref(ElForm);
const state = reactive({
loading: true,
// 选中ID数组
ids: [],
ids: [] as number[],
// 非单个禁用
single: true,
// 非多个禁用
multiple: true,
queryParams: {
pageNum: 1,
pageSize: 10,
name: undefined,
dictCode: ''
},
pageList: [],
queryParams: { pageNum: 1, pageSize: 10 } as DictItemQueryParam,
dictItemList: [] as DictItem[],
total: 0,
dialog: {
title: '',
visible: false
},
dialog: { visible: false } as Dialog,
formData: {
id: undefined,
name: undefined,
code: undefined,
status: undefined,
remark: undefined,
sort:undefined,
value:undefined
},
dictCode: props.dictCode,
status: 1,
sort: 1,
} as DictItemFormData,
rules: {
name: [
{required: true, message: '请输入字典项名称', trigger: 'blur'}
],
value: [
{required: true, message: '请输入字典项值', trigger: 'blur'}
]
}
})
name: [{ required: true, message: "请输入字典项名称", trigger: "blur" }],
value: [{ required: true, message: "请输入字典项值", trigger: "blur" }],
},
});
const {
loading,
ids,
single,
multiple,
queryParams,
dictItemList,
total,
dialog,
formData,
rules,
} = toRefs(state);
function handleQuery() {
if (state.queryParams.dictCode) {
state.loading = true
listDictItemsWithPage(state.queryParams).then(response => {
const {data, total} = response as any
state.pageList = data
state.total = total
state.loading = false
})
state.loading = true;
listDictItemPages(state.queryParams).then(({ data }) => {
state.dictItemList = data.list;
state.total = data.total;
state.loading = false;
});
} else {
state.loading = false
state.pageList = []
state.total = 0
state.queryParams.pageNum = 1
state.dictItemList = [];
state.total = 0;
state.queryParams.pageNum = 1;
state.loading = false;
}
}
function resetQuery() {
state.queryParams = {
pageNum: 1,
pageSize: 10,
name: undefined,
dictCode: ''
}
handleQuery()
queryFormRef.value.resetFields();
handleQuery();
}
function handleSelectionChange(selection: any) {
state.ids = selection.map((item: any) => item.id)
state.single = selection.length !== 1
state.multiple = !selection.length
state.ids = selection.map((item: any) => item.id);
state.single = selection.length !== 1;
state.multiple = !selection.length;
}
function handleAdd() {
resetForm()
state.dialog = {
title: '添加字典项',
visible: true,
if (!state.formData.dictCode) {
ElMessage.warning("请选择字典后添加数据项");
return;
}
state.dialog = {
title: "添加字典项",
visible: true,
};
}
function handleUpdate(row: any) {
resetForm()
state.dialog = {
title: '修改字典项',
visible: true
}
const id = row.id || state.ids
getDictItemDetail(id).then(response => {
state.formData = response.data
})
title: "修改字典项",
visible: true,
};
const id = row.id || state.ids;
getDictItemDetail(id).then(({ data }) => {
state.formData = data;
});
}
const dataForm = ref(ElForm)
function submitForm() {
const form = unref(dataForm)
form.validate((valid: any) => {
if (valid) {
dataFormRef.value.validate((isValid: boolean) => {
if (isValid) {
if (state.formData.id) {
updateDictItem(state.formData.id, state.formData).then(response => {
ElMessage.success('修改成功')
state.dialog.visible = false
handleQuery()
})
updateDictItem(state.formData.id, state.formData).then((response) => {
ElMessage.success("修改成功");
state.dialog.visible = false;
handleQuery();
});
} else {
addDictItem(state.formData).then(response => {
ElMessage.success('新增成功')
state.dialog.visible = false
handleQuery()
})
addDictItem(state.formData).then((response) => {
ElMessage.success("新增成功");
state.dialog.visible = false;
handleQuery();
});
}
}
})
});
}
function resetForm() {
state.formData = {
id: undefined,
name: undefined,
code: undefined,
status: undefined,
remark: undefined,
sort:undefined,
value:undefined
}
dataFormRef.value.resetFields();
}
function cancel() {
state.dialog.visible = false
state.dialog.visible = false;
}
function handleDelete(row: any) {
const ids = [row.id || state.ids].join(',')
ElMessageBox.confirm('确认删除已选中的数据项?', '警告', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
deleteDictItem(ids).then(() => {
ElMessage.success('删除成功')
handleQuery()
const ids = [row.id || state.ids].join(",");
ElMessageBox.confirm("确认删除已选中的数据项?", "警告", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
})
.then(() => {
deleteDictItem(ids).then(() => {
ElMessage.success("删除成功");
handleQuery();
});
})
}).catch(() =>
ElMessage.info('已取消删除')
)
.catch(() => ElMessage.info("已取消删除"));
}
onMounted(() => {
handleQuery()
})
</script>
<style scoped>
</style>
handleQuery();
});
</script>