Skip to content

重构迭代 #107

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
4linuxfun merged 5 commits into from
Jan 30, 2024
Merged

重构迭代 #107

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
341b7dd
前端：分页查询模块去除加载查询，每个页面需要单独调用handleSearch进行首次加载查询
4linuxfun Jan 25, 2024
a82dc83
前端：系统管理-数据字典：重构
4linuxfun Jan 25, 2024
18ccd86
前端：页面首次挂载执行handleSearch
4linuxfun Jan 25, 2024
5442046
前端：系统管理-数据字典：重构部分功能实现
4linuxfun Jan 30, 2024
e6b929f
后端：数据字典sort排序字段默认值设置为1
4linuxfun Jan 30, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion server/models/internal/dictonary.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ class DictBase(SQLModel):
label: str = Field(max_length=50, sa_column_kwargs={'comment': '名称'})
value: str = Field(max_length=100, sa_column_kwargs={'comment': '数据值'})
desc: Optional[str] = Field(max_length=100, sa_column_kwargs={'comment': '描述'})
sort: Optional[int] = Field(sa_column_kwargs={'comment': '排序值，越小越靠前'})
sort: Optional[int] = Field(default=1, sa_column_kwargs={'comment': '排序值，越小越靠前'})
enable: bool = Field(default=True, sa_column=Column(Boolean, comment='是否启用'))
dict_id: Optional[int] = Field(foreign_key="data_dict.id")

Expand Down
10 changes: 5 additions & 5 deletions www/src/composables/usePagination.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,11 +20,11 @@ export default function usePagination(url, searchForm, orderType = 'asc') {
page_size: pageSize,
model:orderModel
})
// 初始化调用
searchFunc(search, currentPage.value, pageSize.value, orderModel.value).then((response) => {
tableData.value = response.data
total.value = response.total
})
// // 初始化调用
// searchFunc(search, currentPage.value, pageSize.value, orderModel.value).then((response) => {
// tableData.value = response.data
// total.value = response.total
// })

const freshCurrentPage = () => {
searchFunc(search, currentPage.value, pageSize.value, orderModel.value).then((response) => {
Expand Down
94 changes: 65 additions & 29 deletions www/src/views/system/dictonary/AddItem.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,56 +1,92 @@
<template>
<el-form v-model="form" label-width="100px">
<el-form-item label="名称" prop="name">
<el-input v-model="form.label"/>
</el-form-item>
<el-form-item label="数据值" prop="data">
<el-input v-model="form.value"/>
</el-form-item>
<el-form-item label="描述" prop="desc">
<el-input v-model="form.desc"/>
</el-form-item>
<el-form-item label="排序值" prop="sort">
<el-input v-model="form.sort"/>
</el-form-item>
<el-form-item label="是否启用" prop="enable">
<el-switch v-model="form.enable"/>
</el-form-item>
</el-form>
<el-button @click="$emit('update:visible',false)">关闭</el-button>
<el-button type="primary" @click="handleAdd">确定</el-button>
<el-dialog v-model="visible" width="30%" destroy-on-close>
<el-form v-model="form" label-width="100px">
<el-form-item label="名称" prop="name">
<el-input v-model="form.label"/>
</el-form-item>
<el-form-item label="数据值" prop="data">
<el-input v-model="form.value"/>
</el-form-item>
<el-form-item label="描述" prop="desc">
<el-input v-model="form.desc"/>
</el-form-item>
<el-form-item label="排序值" prop="sort">
<el-input v-model="form.sort"/>
</el-form-item>
<el-form-item label="是否启用" prop="enable">
<el-switch v-model="form.enable" style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"/>
</el-form-item>
</el-form>
<el-button @click="$emit('update:visible',false)">关闭</el-button>
<el-button type="primary" @click="handleAdd">确定</el-button>
</el-dialog>
</template>

<script setup>

import {reactive} from 'vue'
import {ref, reactive} from 'vue'
import {PostNewDictItem, PutDictItem} from '@/api/dictonary'
import {ElNotification} from 'element-plus'

const props = defineProps(['item', 'visible'])
const emit = defineEmits(['update:visible'])
const form = reactive(props.item)
const emit = defineEmits(['success'])
const visible = ref(false)
const form = reactive({})

function handleAdd() {
async function handleAdd() {
if (form.id === null) {
PostNewDictItem(form).then(() => {
try {
await PostNewDictItem(form)
ElNotification({
title: 'success',
message: '字典元素添加成功',
type: 'success'
})
})
} catch (e) {
ElNotification({
title: 'error',
message: '字典元素添加失败',
type: 'error'
})
}
} else {
PutDictItem(form).then(() => {
try {
await PutDictItem(form)
ElNotification({
title: 'success',
message: '字典元素更新成功',
type: 'success'
})
})
} catch (e) {
ElNotification({
title: 'error',
message: '字典元素更新失败',
type: 'error'
})
}
}
visible.value = false
emit('success')
}

function add(dictId) {
Object.assign(form, {
id: null,
label: null,
value: null,
desc: null,
sort: 1,
enable: true,
dict_id: dictId
})
visible.value = true
}

emit('update:visible', false)
function edit(dictItem) {
Object.assign(form, dictItem)
visible.value = true
}

defineExpose({add, edit})
</script>

<style scoped>
Expand Down
180 changes: 104 additions & 76 deletions www/src/views/system/dictonary/DictItem.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,70 +1,77 @@
<template>
<!-- 字典列表页面，用于显示、查询、新增、编辑字典元素-->
<el-row>
<el-drawer v-model="visible" :title="`字典名称：${dictName}`" size="30%" destroy-on-close>
<el-row>
<el-form :model="search" :inline="true" ref="searchRef">
<el-form-item label="名称" prop="label">
<el-input style="width: 100px" v-model="search.label"/>
</el-form-item>
<el-form-item label="状态" prop="enable">
<el-select v-model="search.enable" style="width: 100px">
<el-option label="正常" :value="1"/>
<el-option label="禁用" :value="0"/>
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="handleSearch">
<el-icon>
<Search/>
</el-icon>
搜索
</el-button>
<el-button type="primary" @click="handleReset">
<el-icon>
<RefreshRight/>
</el-icon>重置</el-button>
</el-form-item>
</el-form>
</el-row>
</el-row>


<el-row>
<el-button type="primary" :icon="Plus" @click="handleAdd">新增</el-button>
</el-row>


<el-table :data="tableData" border style="margin-top: 10px">
<el-table-column label="名称" prop="label"/>
<el-table-column label="数据值" prop="value"/>
<el-table-column label="操作">
<template #default="scope">
<el-button text type="primary"
class="item_button"
@click="handleEdit(scope.row)" :icon="Edit">编辑
</el-button>
<el-divider direction="vertical"/>
<el-popconfirm title="确定要删除此元素吗？" @confirm="handleDel(scope.row.id)">
<template #reference>
<el-button text type="danger"
class="item_button"
:icon="Delete">删除
<el-row>
<el-form :model="search" :inline="true" ref="searchRef">
<el-form-item label="名称" prop="label">
<el-input style="width: 100px" v-model="search.label"/>
</el-form-item>
<el-form-item label="状态" prop="enable">
<el-select v-model="search.enable" style="width: 100px">
<el-option label="正常" :value="1"/>
<el-option label="禁用" :value="0"/>
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="handleSearch">
<el-icon>
<Search/>
</el-icon>
搜索
</el-button>
<el-button type="primary" @click="handleReset">
<el-icon>
<RefreshRight/>
</el-icon>
重置
</el-button>
</template>
</el-popconfirm>
</el-form-item>
</el-form>
</el-row>
</el-row>

</template>
</el-table-column>
</el-table>

<el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :total="total" background
layout="total,prev,pager,next,sizes,jumper"
style="margin-top: 10px;"
/>
<el-row>
<el-button type="primary" :icon="Plus" @click="handleAdd">新增</el-button>
</el-row>

<el-dialog v-model="addItemDialog" width="30%" destroy-on-close>
<add-item :item="selectItem" v-model:visible="addItemDialog"/>
</el-dialog>
<el-table :data="tableData" border style="margin-top: 10px">
<el-table-column label="名称" prop="label"/>
<el-table-column label="数据值" prop="value"/>
<el-table-column label="是否启用" prop="enable">
<template #default="scope">
<el-switch v-model="scope.row.enable"
@change="handleUpdate(scope.row)"
style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"/>
</template>
</el-table-column>
<el-table-column label="操作">
<template #default="scope">
<el-button text type="primary"
class="item_button"
@click="handleEdit(scope.row)" :icon="Edit"/>
<el-divider direction="vertical"/>
<el-popconfirm title="确定要删除此元素吗？" @confirm="handleDel(scope.row.id)">
<template #reference>
<el-button text type="danger"
class="item_button"
:icon="Delete"/>
</template>
</el-popconfirm>

</template>
</el-table-column>
</el-table>

<el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :total="total" background
layout="total,prev,pager,next,sizes,jumper"
style="margin-top: 10px;"
/>

<add-item ref="addItemDialogRef" @success="freshCurrentPage"/>

</el-drawer>
</template>

<script setup>
Expand All @@ -73,16 +80,19 @@
import usePagination from '@/composables/usePagination'
import {ref, watch} from 'vue'
import AddItem from '@/views/system/dictonary/AddItem'
import {DelDictItem} from '@/api/dictonary'
import {DelDictItem, PutDictItem} from '@/api/dictonary'
import {ElNotification} from 'element-plus'

const props = defineProps(['id'])
const dictId = ref(null)
const dictName = ref(null)
const visible = ref(false)
const addItemDialog = ref(false)
const selectItem = ref(null)
const searchRef = ref(null)
const addItemDialogRef = ref(null)

let searchForm = {
dict_id: props.id,
dict_id: null,
label: null,
value: null,
enable: null
Expand All @@ -101,26 +111,15 @@
} = usePagination('/api/dict/item/search', searchForm)

function handleAdd() {
selectItem.value = {
id: null,
label: null,
value: null,
desc: null,
sort: null,
enable: true,
dict_id: props.id
}
addItemDialog.value = true
addItemDialogRef.value.add(dictId.value)
}

function handleReset() {
searchRef.value.resetFields()
}

function handleEdit(dictItem) {
selectItem.value = dictItem
addItemDialog.value = true
console.log(search.value)
addItemDialogRef.value.edit(dictItem)
}

function handleDel(itemId) {
Expand All @@ -136,13 +135,42 @@

}

async function handleUpdate(item) {
try {
await PutDictItem(item)
ElNotification({
title: 'success',
message: '字典元素更新成功',
type: 'success'
})
await freshCurrentPage()
} catch (error) {
ElNotification({
title: 'error',
message: '字典元素更新失败',
type: 'error'
})
}

}

function edit(dict) {
search.dict_id = dict.id
dictId.value = dict.id
dictName.value = dict.name
visible.value = true
handleSearch()
}

watch(addItemDialog, (newValue) => {
if (newValue === false) {
freshCurrentPage()
}

})

defineExpose({edit})

</script>

<style scoped>
Expand Down
Loading