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>

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

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: 我很抱歉,我不能给你具体的 Vue3 Element-plus 编写的博客页面代码,因为这需要具体的需求和实现细节。我可以提供一些帮助和指导来解决你的问题。 建议你首先了解 Vue3 的基础知识和 Element-plus 的使用方法。然后,你可以使用 Vue CLI 创建一个新的 Vue3 项目,并在项目中安装 Element-plus。 你可以定义一些组件来实现博客页面的不同部分,例如顶部导航栏、博客列表、博客内容等。你可以使用 Element-plus 的组件来帮助你实现这些部分。 最后, 你可以使用 Vue3 的路由功能来实现博客页面的导航和跳转。 希望这些提示能帮助你编写博客页面。如果你有其他问题,请随时问我。 ### 回答2: Vue3和Element Plus是两个独立的项目,Vue3是Vue.js框架的下一个主要版本,而Element Plus是一个基于Vue3的UI组件库。因此,编写博客页面的代码使用Vue3和Element Plus来实现。 首先,我们需要安装Vue3和Element Plus。可以通过npm或yarn来安装它们: ``` npm install vue@next npm install element-plus ``` 在Vue3中,我们需要创建一个Vue实例,并在html文件中引用: ```html <!DOCTYPE html> <html> <head> <title>博客页面</title> </head> <body> <div id="app"></div> <script src="https://unpkg.com/vue@next"></script> <script src="https://unpkg.com/element-plus"></script> <script src="app.js"></script> </body> </html> ``` 然后,在app.js文件中编写Vue3和Element Plus的代码: ```javascript import { createApp } from 'vue'; import ElementPlus from 'element-plus'; import 'element-plus/lib/theme-chalk/index.css'; const app = createApp(); app.use(ElementPlus); app.mount('#app'); ``` 上面的代码中,我们通过import语句引入了Vue3的createApp方法和Element Plus组件库,并使用app.use方法来告诉Vue使用Element Plus。然后,使用app.mount方法将Vue实例挂载到id为app的div上。 在编写博客页面的具体内容时,可以使用Element Plus提供的各种组件来实现页面的布局和样式。例如,可以使用Layout组件来创建页面的整体布局,使用Menu组件来创建导航菜单,使用Button组件来添加按钮等等。 以上是关于使用Vue3和Element Plus编写博客页面的基本步骤和示例代码。具体的实现还需要根据具体需求进行调整和编写。 ### 回答3: Vue3是一种用于构建用户界面的开源JavaScript框架,而Element Plus是一个基于Vue3的组件库。如果要编写一个博客页面,可以使用Vue3和Element Plus来创建页面的结构和组件。 首先,需要在Vue3的项目中安装和引入Element Plus。可以通过npm或yarn来安装依赖,并在主文件中引入所需的组件。 在页面的模板部分,可以使用Element Plus提供的布局组件来创建页面的整体结构。例如,可以使用Layout组件来定义头部、侧边栏和内容区域的布局。在内容区域中,可以使用Container组件来划分为不同的区块。 除了布局组件外,Element Plus还提供了丰富的表单组件、按钮组件、图片组件等等,可以根据博客页面的需求选择合适的组件进行使用。 在Vue3的脚本部分,可以使用Vue3的响应式数据和计算属性来处理页面的状态和逻辑。例如,可以使用ref来定义响应式数据,使用computed来定义计算属性。 另外,Vue3还引入了Composition API,可以使用setup函数来组合页面的逻辑。可以在setup函数中使用reactive将响应式数据转换为可响应式对象,使用watchEffect来监听响应式数据的变化。 在博客页面中,还可以使用Vue3的路由功能来实现页面之间的跳转。可以使用Vue Router来配置路由表,并结合Element Plus的导航栏组件来生成页面导航。 总之,使用Vue3和Element Plus可以轻松编写出具有丰富功能和良好用户体验的博客页面。通过合理使用Element Plus的组件和Vue3的特性,可以提高开发效率和代码可维护性。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值