张翔
128 lines
3.9 KiB
Vue
128 lines
3.9 KiB
Vue
<template>
|
|
<div class="dict-management">
|
|
<el-card>
|
|
<template #header>
|
|
<div class="card-title">
|
|
<span>字典管理</span>
|
|
<el-button type="primary" @click="handleAdd">新增字典</el-button>
|
|
</div>
|
|
</template>
|
|
<el-table :data="dataSource" v-loading="loading" style="width: 100%">
|
|
<el-table-column prop="id" label="ID" />
|
|
<el-table-column prop="dictName" label="字典名称" />
|
|
<el-table-column prop="dictType" label="字典类型" />
|
|
<el-table-column label="状态">
|
|
<template #default="{ row }">
|
|
<el-tag :type="row.status === '0' ? 'success' : 'danger'">
|
|
{{ row.status === '0' ? '正常' : '停用' }}
|
|
</el-tag>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="remark" label="备注" />
|
|
<el-table-column label="操作" width="200">
|
|
<template #default="{ row }">
|
|
<el-button type="primary" link size="small" @click="handleEdit(row)">编辑</el-button>
|
|
<el-button type="danger" link size="small" @click="handleDelete(row)">删除</el-button>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
</el-card>
|
|
|
|
<el-dialog v-model="modalVisible" :title="modalTitle" width="500px">
|
|
<el-form :model="formState" label-width="80px">
|
|
<el-form-item label="字典名称">
|
|
<el-input v-model="formState.dictName" />
|
|
</el-form-item>
|
|
<el-form-item label="字典类型">
|
|
<el-input v-model="formState.dictType" />
|
|
</el-form-item>
|
|
<el-form-item label="状态">
|
|
<el-select v-model="formState.status">
|
|
<el-option value="0" label="正常" />
|
|
<el-option value="1" label="停用" />
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item label="备注">
|
|
<el-input v-model="formState.remark" type="textarea" />
|
|
</el-form-item>
|
|
</el-form>
|
|
<template #footer>
|
|
<el-button @click="modalVisible = false">取消</el-button>
|
|
<el-button type="primary" @click="handleModalOk">确定</el-button>
|
|
</template>
|
|
</el-dialog>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref, reactive, onMounted } from 'vue'
|
|
import { ElMessage, ElMessageBox } from 'element-plus'
|
|
import request from '@/utils/request'
|
|
|
|
const loading = ref(false)
|
|
const dataSource = ref([])
|
|
const modalVisible = ref(false)
|
|
const modalTitle = ref('')
|
|
const formState = reactive({ id: null, dictName: '', dictType: '', status: '0', remark: '' })
|
|
|
|
const fetchData = async () => {
|
|
loading.value = true
|
|
try {
|
|
const res: any = await request.get('/dict/types')
|
|
dataSource.value = res
|
|
} finally {
|
|
loading.value = false
|
|
}
|
|
}
|
|
|
|
const handleAdd = () => {
|
|
modalTitle.value = '新增字典'
|
|
Object.assign(formState, { id: null, dictName: '', dictType: '', status: '0', remark: '' })
|
|
modalVisible.value = true
|
|
}
|
|
|
|
const handleEdit = (row: any) => {
|
|
modalTitle.value = '编辑字典'
|
|
Object.assign(formState, row)
|
|
modalVisible.value = true
|
|
}
|
|
|
|
const handleDelete = async (row: any) => {
|
|
try {
|
|
await ElMessageBox.confirm('确定要删除该字典吗？', '提示', {
|
|
confirmButtonText: '确定',
|
|
cancelButtonText: '取消',
|
|
type: 'warning'
|
|
})
|
|
await request.delete(`/dict/types/${row.id}`)
|
|
ElMessage.success('删除成功')
|
|
fetchData()
|
|
} catch {}
|
|
}
|
|
|
|
const handleModalOk = async () => {
|
|
try {
|
|
if (formState.id) {
|
|
await request.put(`/dict/types/${formState.id}`, formState)
|
|
} else {
|
|
await request.post('/dict/types', formState)
|
|
}
|
|
ElMessage.success('操作成功')
|
|
modalVisible.value = false
|
|
fetchData()
|
|
} catch {
|
|
ElMessage.error('操作失败')
|
|
}
|
|
}
|
|
|
|
onMounted(() => fetchData())
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.dict-management .card-title {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
</style>
|