From 9057e04efad1b7d61c77a72e5c37a504d0aee935 Mon Sep 17 00:00:00 2001 From: doum <doum> Date: 星期五, 26 九月 2025 09:24:03 +0800 Subject: [PATCH] H5静态化 --- admin/src/components/system/menu/OperaMenuWindow.vue | 164 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 files changed, 164 insertions(+), 0 deletions(-) diff --git a/admin/src/components/system/menu/OperaMenuWindow.vue b/admin/src/components/system/menu/OperaMenuWindow.vue new file mode 100644 index 0000000..a453fa0 --- /dev/null +++ b/admin/src/components/system/menu/OperaMenuWindow.vue @@ -0,0 +1,164 @@ +<template> + <GlobalWindow + class="handle-table-dialog" + :title="title" + :visible.sync="visible" + :confirm-working="isWorking" + @confirm="confirm" + > + <p class="tip" v-if="form.parent != null && form.id == null">涓� <em>{{parentName}}</em> 鏂板缓瀛愯彍鍗�</p> + <el-form :model="form" ref="form" :rules="rules"> + <el-form-item label="涓婄骇鑿滃崟" prop="parentId"> + <MenuSelect v-if="visible" v-model="form.parentId" placeholder="璇烽�夋嫨涓婄骇鑿滃崟" :exclude-id="excludeMenuId" clearable :inline="false"/> + </el-form-item> + <el-form-item label="鑿滃崟鍚嶇О" prop="name" required> + <el-input v-model="form.name" placeholder="璇疯緭鍏ヨ彍鍗曞悕绉�" v-trim maxlength="50"/> + </el-form-item> + <el-form-item label="璁块棶璺緞" prop="path"> + <el-input v-model="form.path" placeholder="璇疯緭鍏ヨ闂矾寰�" v-trim maxlength="200"/> + </el-form-item> + <el-form-item label="鍥炬爣" prop="icon" class="form-item-icon"> + <el-radio-group v-model="form.icon"> + <el-radio :label="icon" v-for="icon in icons" :key="icon"> + <i :class="{[icon]: true}"></i> + </el-radio> + </el-radio-group> + </el-form-item> + <el-form-item label="澶囨敞" prop="remark"> + <el-input type="textarea" v-model="form.remark" placeholder="璇疯緭鍏ヨ彍鍗曞娉�" v-trim :rows="3" maxlength="500"/> + </el-form-item> + </el-form> + </GlobalWindow> +</template> + +<script> +import BaseOpera from '@/components/base/BaseOpera' +import GlobalWindow from '@/components/common/GlobalWindow' +import MenuSelect from './MenuSelect' +import icons from '@/utils/icons' +export default { + name: 'OperaMenuWindow', + extends: BaseOpera, + components: { MenuSelect, GlobalWindow }, + data () { + return { + icons, + // 涓婄骇鑿滃崟鍚嶇О + parentName: '', + // 闇�鎺掗櫎閫夋嫨鐨勮彍鍗旾D + excludeMenuId: null, + // 琛ㄥ崟鏁版嵁 + form: { + id: null, + parentId: null, + name: '', + path: '', + icon: '', + remark: '' + }, + // 楠岃瘉瑙勫垯 + rules: { + name: [ + { required: true, message: '璇疯緭鍏ヨ彍鍗曞悕绉�' } + ] + } + } + }, + methods: { + /** + * 鎵撳紑绐楀彛 + * + * @param title: 绐楀彛鏍囬 + * @param target: 琛屽璞★紙浠呯紪杈戦渶璇ュ弬鏁帮級 + * @param parent: 鏂板缓鏃剁殑涓婄骇鑿滃崟 + */ + open (title, target, parent) { + this.title = title + this.visible = true + // 鏂板缓锛宮enu涓虹┖鏃惰〃绀烘柊寤鸿彍鍗� + if (target == null) { + this.excludeMenuId = null + this.$nextTick(() => { + this.$refs.form.resetFields() + this.form.id = null + this.form.parentId = parent == null ? null : parent.id + this.parentName = parent == null ? null : parent.name + }) + return + } + // 缂栬緫 + this.$nextTick(() => { + this.excludeMenuId = target.id + for (const key in this.form) { + this.form[key] = target[key] + } + }) + } + }, + created () { + this.config({ + api: '/system/menu' + }) + } +} +</script> + +<style scoped lang="scss"> +@import "@/assets/style/variables"; +$icon-background-color: $primary-color; +.global-window { + .tip { + margin-bottom: 12px; + em { + font-style: normal; + color: $primary-color; + font-weight: bold; + } + } + // 鍥炬爣 + /deep/ .form-item-icon { + .el-form-item__content { + height: 193px; + overflow-y: auto; + } + .el-radio-group { + background: $icon-background-color; + padding: 4px; + .el-radio { + margin-right: 0; + color: #fff; + padding: 6px; + &.is-checked { + background: $icon-background-color - 30; + border-radius: 10px; + } + .el-radio__input.is-checked + .el-radio__label { + color: #fff; + } + } + .el-radio__input { + display: none; + } + .el-radio__label { + padding-left: 0; + // element-ui鍥炬爣 + i { + font-size: 30px; + } + // 鑷畾涔夊浘鏍� + [class^="eva-icon-"], [class*=" eva-icon-"] { + width: 30px; + height: 30px; + background-size: 25px; + vertical-align: bottom; + } + } + .el-radio--small { + height: auto; + padding: 8px; + margin-left: 0; + } + } + } +} +</style> -- Gitblit v1.9.3