You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
104 lines
2.9 KiB
104 lines
2.9 KiB
2 years ago
|
<template>
|
||
|
|
<div>
|
||
|
|
<q-dialog ref="dialogRef" allow-focus-outside v-bind="attrs">
|
||
|
|
<q-card
|
||
|
|
:style="{
|
||
|
|
width: attrs.maximized ? '100vw' : width,
|
||
|
|
'max-width': '100vw',
|
||
|
|
height: attrs.maximized ? '100vh' : height,
|
||
|
|
'max-height': '100vh',
|
||
|
|
}"
|
||
|
|
>
|
||
|
|
<q-card-section :style="headerStyle">
|
||
|
|
<div class="flex justify-between">
|
||
|
|
<div class="text-h6">{{ title }}</div>
|
||
|
|
<div class="flex justify-end q-gutter-md">
|
||
|
|
<q-btn :label="$t('confirm')" dense color="primary" style="width: 100px" @click="addMenu" />
|
||
|
|
<q-btn v-close-popup dense flat icon="close" :title="$t('close')"> </q-btn>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</q-card-section>
|
||
|
|
<q-card-section class="q-pt-none" :style="bodyStyle">
|
||
|
|
<div class="row">
|
||
|
|
<div class="col-12">
|
||
|
|
<q-input v-model="name" type="input" label="名称" outlined autocomplete="false" class="p-1" />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="row">
|
||
|
|
<div class="col-12">
|
||
|
|
<q-input v-model="icon" type="input" label="图标" outlined autocomplete="false" class="p-1" />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="row">
|
||
|
|
<div class="col-12">
|
||
|
|
<q-checkbox v-model="enable" label="是否可用" />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="row">
|
||
|
|
<div class="col-12">
|
||
|
|
<q-input v-model="order" type="input" label="排序" outlined autocomplete="false" class="p-1" />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</q-card-section>
|
||
|
|
</q-card>
|
||
|
|
</q-dialog>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
<script setup lang="ts">
|
||
|
|
import { useAttrs, ref } from 'vue';
|
||
|
|
import { useI18n } from 'vue-i18n';
|
||
|
|
import { axios, Environment } from 'platform-core';
|
||
|
|
|
||
|
|
const attrs = useAttrs();
|
||
|
|
|
||
|
|
const props = defineProps({
|
||
|
|
headerStyle: { type: String, default: 'width:100%;padding: 16px 8px 4px 16px' },
|
||
|
|
bodyStyle: { type: String, default: 'padding: 0px 8px 0px 8px;height:calc(100%)' },
|
||
|
|
title: { type: String, default: '' },
|
||
|
|
width: { type: String, default: '70%' },
|
||
|
|
height: { type: String, default: '70%' },
|
||
|
|
});
|
||
|
|
|
||
|
|
const { t } = useI18n();
|
||
|
|
|
||
|
|
const dialogRef = ref();
|
||
|
|
const callbackRef = ref();
|
||
|
|
|
||
|
|
const name = ref();
|
||
|
|
const icon = ref();
|
||
|
|
const enable = ref(true);
|
||
|
|
const order = ref(0);
|
||
|
|
|
||
|
|
const addMenu = () => {
|
||
|
|
const data = {
|
||
|
|
type: 'ROUTE',
|
||
|
|
enable: enable.value,
|
||
|
|
order: order.value,
|
||
|
|
parentId: null,
|
||
|
|
name: name.value,
|
||
|
|
icon: icon.value,
|
||
|
|
};
|
||
|
|
|
||
|
|
axios.post(Environment.apiContextPath('/api/system/menu/addMenu'), data).then(() => {
|
||
|
|
dialogRef.value.hide();
|
||
|
|
if (callbackRef.value) {
|
||
|
|
callbackRef.value();
|
||
|
|
}
|
||
|
|
});
|
||
|
|
};
|
||
|
|
|
||
|
|
const show = (callback) => {
|
||
|
|
callbackRef.value = callback;
|
||
|
|
dialogRef.value.show();
|
||
|
|
};
|
||
|
|
|
||
|
|
const hide = () => {
|
||
|
|
dialogRef.value.hide();
|
||
|
|
};
|
||
|
|
|
||
|
|
defineExpose({
|
||
|
|
show,
|
||
|
|
hide,
|
||
|
|
});
|
||
|
|
</script>
|