Vue3&Element-plus编写一个简版的字典服务
之前公司有维护过一个内部的字典平台,基本步骤和页面如下
添加字典属性弹窗
添加枚举值弹窗
基本业务代码如下
核心代码
import { defineStore } from 'pinia'
export const useDictionary = defineStore('dictionary', {
state: () => ({
dict: [],
dictObj: {},
}),
actions: {
setDict(data, type) {
let init = this.dictObj[type] || []
this.dictObj[type] = [...init, ...data]
},
setDictContent(data, type) {
let initData = JSON.parse(JSON.stringify(data))
this.dictObj[type] = initData.list || []
this.dict.push(initData)
},
},
getters: {
getDict(type) {
return this.dictObj[type]
},
getDictList() {
return this.dict
},
},
})
主页面代码
<template>
<div class="main flex_c">
<div class="m8_b">
<el-button type="primary" @click="addDict">添加字典</el-button>
</div>
<div class="flex_r dict">
<div class="dict_left">
<el-table :data="dictList" border @row-click="rowClick">
<el-table-column
label="字典名称"
prop="label"
></el-table-column>
<el-table-column
label="字典key"
prop="key"
></el-table-column>
<el-table-column label="启用状态">
<template #default="scope">
<span>{{ scope.row.flag ? '禁用' : '启用' }}</span>
</template>
</el-table-column>
</el-table>
</div>
<div class="dict_right">
<div class="m8_b">
<el-button
type="primary"
@click="addItem"
:disabled="disabledAdd"
>添加枚举值</el-button
>
</div>
<el-table :data="dictItemList" border>
<el-table-column label="序号" prop="desc"></el-table-column>
<el-table-column
label="枚举名称"
prop="label"
></el-table-column>
<el-table-column
label="枚举值"
prop="value"
></el-table-column>
</el-table>
</div>
</div>
<dictForm v-model="dictFlag" />
<dictContent
v-model="dictContentFlag"
ref="dictContents"
@submitItem="submitItem"
/>
</div>
</template>
<script setup>
import { useDictionary } from '@/stores/dictionary';
import { computed, watch } from 'vue';
import dictContent from './components/dictContent.vue';
import dictForm from './components/dictForm.vue';
const dictFlag = ref(false) // 字典列表
const dictContentFlag = ref(false) // 字典详情
const dictContents = ref(null)
const keyType = ref('')
const store = useDictionary()
const dictList = computed(() => {
return store.dict
})
watch(dictList, (newValue) => {
console.log(newValue, '>><<<')
})
const addDict = () => {
dictFlag.value = !dictFlag.value
}
const disabledAdd = computed(() => {
return !keyType.value
})
const dictItemList = computed(() => {
return store.dictObj[keyType.value]
})
// 点击某一行
const rowClick = (row, column, event) => {
// dictContents.value.addRef(row.key)
keyType.value = row.key
}
const addItem = () => {
dictContentFlag.value = !dictContentFlag.value
}
const submitItem = (val) => {
store.setDict([val], keyType.value)
}
</script>
<style lang="scss" scoped>
.main {
width: 100%;
height: 100%;
}
.dict {
width: 100%;
height: 100%;
.dict_left {
flex: 2;
border: 1px solid #eee;
border-radius: 4px;
box-shadow: 0px 2px 2px 2px #eee;
margin-right: 8px;
}
.dict_right {
flex: 1;
}
}
</style>
字典弹窗代码
<template>
<div>
<el-dialog v-model="centerDialogVisible" title="新增" width="50%" align-center @close="close">
<div>
<el-form :model="addForm" ref="addFroms" :rules="rules">
<el-row :gutter="24">
<el-col :span="12">
<el-form-item label="字典名称" prop="label">
<el-input v-model="addForm.label" placeholder="请输字典名称"></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="字典key" prop="key">
<el-input v-model="addForm.key" placeholder="请输入字典key"></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="排序顺序" prop="desc">
<el-input v-model.number="addForm.desc" placeholder="请输入排序顺序"></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="是否禁用" prop="flag">
<el-radio-group v-model="addForm.flag" class="ml-4">
<el-radio :label="false" size="large">
启用</el-radio>
<el-radio :label="true" size="large">禁用</el-radio>
</el-radio-group>
</el-form-item>
</el-col>
</el-row>
</el-form>
</div>
<template #footer>
<span class="dialog-footer">
<el-button @click="close">取消</el-button>
<el-button type="primary" @click="addConfirm">
确定
</el-button>
</span>
</template>
</el-dialog>
</div>
</template>
<script setup>
import { useDictionary } from '@/stores/dictionary';
import { reactive } from "vue";
// import { storeToRefs } from 'pinia'
const store = useDictionary()
const props = defineProps({
modelValue: {
type: Boolean,
default: false
}
})
const addForm = reactive({
key: '',
label: '',
desc: '',
flag: false,
list: []
})
const rules = {
key: [{ required: true, message: '请输入字典key', target: 'blur' }],
label: [{ required: true, message: '请输入字典名称', target: 'blur' }],
desc: [{ required: false, message: '' }],
flag: [{ required: false }]
}
const addFroms = ref(null)
const emit = defineEmits(['update:modelValue'])
const centerDialogVisible = computed({
get() {
return props.modelValue
},
set(val) {
emit('update:modelValue', val)
}
})
const addRef = (value) => {
// console.log(value, '我是父组件传值过来的')
}
const close = () => {
emit('update:modelValue', false)
addFroms.value.resetFields()
}
// 确认
const addConfirm = () => {
addFroms.value.validate((valid) => {
if (valid) {
store.setDictContent(addForm, addForm.key)
close()
}
})
}
defineExpose({
centerDialogVisible,
addRef
})
</script>
枚举值弹窗代码
<template>
<div>
<el-dialog
v-model="centerDialogVisible"
title="新增"
width="50%"
align-center
@close="close"
>
<div>
<el-form :model="addForm" ref="addFroms">
<el-row :gutter="24">
<el-col :span="12">
<el-form-item label="枚举名称" prop="label">
<el-input
v-model="addForm.label"
placeholder="请输入枚举名称"
></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="枚举值" prop="value">
<el-input
v-model="addForm.value"
placeholder="请输入枚举值"
></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="排序顺序" prop="desc">
<el-input
v-model.number="addForm.desc"
placeholder="请输入排序顺序"
></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="是否禁用" prop="flag">
<el-radio-group
v-model="addForm.flag"
class="ml-4"
>
<el-radio :label="false" size="large">
启用</el-radio
>
<el-radio :label="true" size="large"
>禁用</el-radio
>
</el-radio-group>
</el-form-item>
</el-col>
</el-row>
</el-form>
</div>
<template #footer>
<span class="dialog-footer">
<el-button @click="close">取消</el-button>
<el-button type="primary" @click="addConfirm">
确定
</el-button>
</span>
</template>
</el-dialog>
</div>
</template>
<script setup>
import { reactive, ref } from "vue";
const props = defineProps({
modelValue: {
type: Boolean,
default: false
}
})
const addFroms = ref(null)
const addForm = reactive({
value: '',
label: '',
desc: '',
flag: false
})
const emit = defineEmits(['update:modelValue', 'submitItem'])
const centerDialogVisible = computed({
get () {
return props.modelValue
},
set (val) {
emit('update:modelValue', val)
}
})
const addRef = (value) => {
console.log(value, '我是父组件传值过来的')
}
const close = () => {
emit('update:modelValue', false)
addFroms.value.resetFields()
}
// 确认
const addConfirm = () => {
let form = JSON.parse(JSON.stringify(addForm))
emit('submitItem', form)
close()
}
defineExpose({
centerDialogVisible,
addRef
})
</script>
一个简单版的字典服务排序和删除的暂时没有做 思路大概是这个样子