Skip to content

Commit

Permalink
Merge pull request #1778 from xl495/main
Browse files Browse the repository at this point in the history 
字典 新增 统一使用 Drawer 抽屉
  • Loading branch information
@pixelmaxQm
pixelmaxQm committed Jun 15, 2024
2 parents bea98e5 + cf05177 commit 6c2a62b
Show file tree
Hide file tree
Showing 2 changed files with 103 additions and 129 deletions.
152 changes: 54 additions & 98 deletions web/src/view/superAdmin/dictionary/sysDictionary.vue
View file
Original file line number Diff line number Diff line change
@@ -1,42 +1,27 @@
<template>
<div>
<warning-bar
title="获取字典且缓存方法已在前端utils/dictionary 已经封装完成 不必自己书写 使用方法查看文件内注释"
/>
<warning-bar title="获取字典且缓存方法已在前端utils/dictionary 已经封装完成 不必自己书写 使用方法查看文件内注释" />
<div class="flex gap-4 p-2">
<div class="flex-none w-52 bg-white text-slate-700 dark:text-slate-400 dark:bg-slate-900 rounded p-4">
<div class="flex justify-between items-center">
<span class="text font-bold">字典列表</span>
<el-button
type="primary"
@click="openDialog"
>
<el-button type="primary" @click="openDrawer">
新增
</el-button>
</div>
<el-scrollbar
class="mt-4"
style="height: calc(100vh - 300px)"
>
<el-scrollbar class="mt-4" style="height: calc(100vh - 300px)">
<div
v-for="dictionary in dictionaryData"
:key="dictionary.ID"
v-for="dictionary in dictionaryData" :key="dictionary.ID"
class="rounded flex justify-between items-center px-2 py-4 cursor-pointer mt-2 hover:bg-blue-50 dark:hover:bg-blue-900 bg-gray-50 dark:bg-gray-800 gap-4"
:class="selectID === dictionary.ID ? 'text-active':'text-slate-700 dark:text-slate-50'"
:class="selectID === dictionary.ID ? 'text-active' : 'text-slate-700 dark:text-slate-50'"
@click="toDetail(dictionary)"
>
<span class="max-w-[160px] truncate">{{ dictionary.name }}</span>
<div class="min-w-[40px]">
<el-icon
class="text-blue-500"
@click.stop="updateSysDictionaryFunc(dictionary)"
>
<el-icon class="text-blue-500" @click.stop="updateSysDictionaryFunc(dictionary)">
<Edit />
</el-icon>
<el-icon
class="ml-2 text-red-500"
@click="deleteSysDictionaryFunc(dictionary)"
>
<el-icon class="ml-2 text-red-500" @click="deleteSysDictionaryFunc(dictionary)">
<Delete />
</el-icon>
</div>
Expand All @@ -47,73 +32,42 @@
<sysDictionaryDetail :sys-dictionary-i-d="selectID" />
</div>
</div>
<el-dialog
v-model="dialogFormVisible"
:before-close="closeDialog"
:title="type==='create'?'添加字典':'修改字典'"
<el-drawer
v-model="drawerFormVisible"
size="30%"
:show-close="false"
:close-on-press-escape="false"
:close-on-click-modal="false"
:before-close="closeDrawer"
>
<el-form
ref="dialogForm"
:model="formData"
:rules="rules"
label-width="110px"
>
<el-form-item
label="字典名（中）"
prop="name"
>
<el-input
v-model="formData.name"
placeholder="请输入字典名（中）"
clearable
:style="{ width: '100%' }"
/>
<template #header>
<div class="flex justify-between items-center">
<span class="text-lg">{{ type === 'create' ? '添加字典' : '修改字典' }}</span>
<div>
<el-button @click="closeDrawer">
取 消
</el-button>
<el-button type="primary" @click="enterDrawer">
确 定
</el-button>
</div>
</div>
</template>
<el-form ref="drawerForm" :model="formData" :rules="rules" label-width="110px">
<el-form-item label="字典名（中）" prop="name">
<el-input v-model="formData.name" placeholder="请输入字典名（中）" clearable :style="{ width: '100%' }" />
</el-form-item>
<el-form-item
label="字典名（英）"
prop="type"
>
<el-input
v-model="formData.type"
placeholder="请输入字典名（英）"
clearable
:style="{ width: '100%' }"
/>
<el-form-item label="字典名（英）" prop="type">
<el-input v-model="formData.type" placeholder="请输入字典名（英）" clearable :style="{ width: '100%' }" />
</el-form-item>
<el-form-item
label="状态"
prop="status"
required
>
<el-switch
v-model="formData.status"
active-text="开启"
inactive-text="停用"
/>
<el-form-item label="状态" prop="status" required>
<el-switch v-model="formData.status" active-text="开启" inactive-text="停用" />
</el-form-item>
<el-form-item
label="描述"
prop="desc"
>
<el-input
v-model="formData.desc"
placeholder="请输入描述"
clearable
:style="{ width: '100%' }"
/>
<el-form-item label="描述" prop="desc">
<el-input v-model="formData.desc" placeholder="请输入描述" clearable :style="{ width: '100%' }" />
</el-form-item>
</el-form>
<template #footer>
<div class="dialog-footer">
<el-button @click="closeDialog">取 消</el-button>
<el-button

type="primary"
@click="enterDialog"
>确 定</el-button>
</div>
</template>
</el-dialog>
</el-drawer>
</div>
</template>

Expand Down Expand Up @@ -171,7 +125,7 @@ const rules = ref({
const dictionaryData = ref([])
// 查询
const getTableData = async() => {
const getTableData = async () => {
const res = await getSysDictionaryList()
if (res.code === 0) {
dictionaryData.value = res.data
Expand All @@ -184,31 +138,31 @@ const toDetail = (row) => {
selectID.value = row.ID
}
const dialogFormVisible = ref(false)
const drawerFormVisible = ref(false)
const type = ref('')
const updateSysDictionaryFunc = async(row) => {
const updateSysDictionaryFunc = async (row) => {
const res = await findSysDictionary({ ID: row.ID, status: row.status })
type.value = 'update'
if (res.code === 0) {
formData.value = res.data.resysDictionary
dialogFormVisible.value = true
drawerFormVisible.value = true
}
}
const closeDialog = () => {
dialogFormVisible.value = false
const closeDrawer = () => {
drawerFormVisible.value = false
formData.value = {
name: null,
type: null,
status: true,
desc: null,
}
}
const deleteSysDictionaryFunc = async(row) => {
const deleteSysDictionaryFunc = async (row) => {
ElMessageBox.confirm('确定要删除吗?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(async() => {
}).then(async () => {
const res = await deleteSysDictionary({ ID: row.ID })
if (res.code === 0) {
ElMessage({
Expand All @@ -220,9 +174,9 @@ const deleteSysDictionaryFunc = async(row) => {
})
}
const dialogForm = ref(null)
const enterDialog = async() => {
dialogForm.value.validate(async(valid) => {
const drawerForm = ref(null)
const enterDrawer = async () => {
drawerForm.value.validate(async (valid) => {
if (!valid) return
let res
switch (type.value) {
Expand All @@ -238,21 +192,23 @@ const enterDialog = async() => {
}
if (res.code === 0) {
ElMessage.success('操作成功')
closeDialog()
closeDrawer()
getTableData()
}
})
}
const openDialog = () => {
const openDrawer = () => {
type.value = 'create'
dialogFormVisible.value = true
drawerForm.value && drawerForm.value.clearValidate()
drawerFormVisible.value = true
}
</script>

<style>
.dict-box{
.dict-box {
height: calc(100vh - 240px);
}
.active {
background-color: var(--el-color-primary) !important;
color: #fff;
Expand Down
Loading

0 comments on commit 6c2a62b

Please sign in to comment.