Vue3&Element-plus编写一个简版的字典服务

之前公司有维护过一个内部的字典平台,基本步骤和页面如下

添加字典属性弹窗

添加枚举值弹窗

基本业务代码如下

核心代码

javascript 复制代码

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
        },
    },
})

主页面代码

javascript 复制代码

<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>

字典弹窗代码

javascript 复制代码

<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>

枚举值弹窗代码

javascript 复制代码

<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>

一个简单版的字典服务排序和删除的暂时没有做思路大概是这个样子