137 lines
3.5 KiB
Vue
137 lines
3.5 KiB
Vue
<template>
|
|
<a-button v-if="props.isCreate" type="primary" @click="handleClick">
|
|
<template #icon><icon-plus /></template>
|
|
新建
|
|
</a-button>
|
|
<a-button
|
|
v-if="!props.isCreate"
|
|
type="outline"
|
|
size="small"
|
|
:style="{ marginRight: '10px', padding: '7px' }"
|
|
@click="handleClick"
|
|
>
|
|
<template #icon><icon-edit /></template>
|
|
修改
|
|
</a-button>
|
|
<a-modal
|
|
width="700px"
|
|
:visible="visible"
|
|
@ok="handleSubmit"
|
|
@cancel="handleCancel"
|
|
>
|
|
<template #title>{{ modalTitle }}</template>
|
|
<a-form ref="createEditRef" :model="formData" :style="{ width: '650px' }">
|
|
<a-form-item
|
|
field="name"
|
|
label="权限名称"
|
|
:validate-trigger="['change', 'input']"
|
|
:rules="[{ required: true, message: t('auth.info.name.required') }]"
|
|
>
|
|
<a-input
|
|
v-model="formData.name"
|
|
placeholder="请输入权限名称"
|
|
/>
|
|
</a-form-item>
|
|
|
|
<a-form-item field="remark" label="备注">
|
|
<a-textarea
|
|
v-model="formData.remark"
|
|
:show-word-limit="true"
|
|
placeholder="请输入备注"
|
|
style="height: 100px"
|
|
/>
|
|
</a-form-item>
|
|
</a-form>
|
|
</a-modal>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { useI18n } from 'vue-i18n';
|
|
import useVisible from '@/hooks/visible';
|
|
import { computed, PropType, ref } from 'vue';
|
|
import { FormInstance } from '@arco-design/web-vue/es/form';
|
|
import { Message } from '@arco-design/web-vue';
|
|
import { AuthRecord } from '@/api/authority';
|
|
import { useAuthStore } from '@/store';
|
|
|
|
const props = defineProps({
|
|
prem: {
|
|
type: Object as PropType<AuthRecord>,
|
|
},
|
|
isCreate: Boolean,
|
|
});
|
|
const { t } = useI18n();
|
|
const modalTitle = computed(() => {
|
|
return props.isCreate ? t('Create Auth Info') : t('Edit Auth Info');
|
|
});
|
|
const { visible, setVisible } = useVisible(false);
|
|
const createEditRef = ref<FormInstance>();
|
|
const authStore = useAuthStore();
|
|
const formData = ref<AuthRecord>({
|
|
id: '',
|
|
name: '',
|
|
// dataScope: '',
|
|
// permissionIds: [],
|
|
enabled: true,
|
|
remark: '',
|
|
// authorities: [],
|
|
});
|
|
|
|
const emit = defineEmits(['refresh']);
|
|
|
|
// 组件被点击
|
|
const handleClick = () => {
|
|
const authId = props.prem?.id;
|
|
// 编辑
|
|
if (!props.isCreate && authId) {
|
|
authStore
|
|
.getAuthDetail(authId)
|
|
.then((res:any) => {
|
|
formData.value = res.data;
|
|
})
|
|
.then(() => {
|
|
setVisible(true);
|
|
});
|
|
} else {
|
|
setVisible(true);
|
|
}
|
|
};
|
|
|
|
// 提交
|
|
const handleSubmit = async () => {
|
|
const valid = await createEditRef.value?.validate();
|
|
if (!valid) {
|
|
// 新增
|
|
if (props.isCreate) {
|
|
const res = await authStore.createAuth(formData.value);
|
|
if (res.status === 200) {
|
|
Message.success({
|
|
content: t('create.sucess'),
|
|
duration: 5 * 1000,
|
|
});
|
|
}
|
|
createEditRef.value?.resetFields();
|
|
} else {
|
|
// 编辑
|
|
const res = await authStore.updateAuth(formData.value);
|
|
if (res.status === 200) {
|
|
Message.success({
|
|
content: t('modify.sucess'),
|
|
duration: 5 * 1000,
|
|
});
|
|
}
|
|
}
|
|
emit('refresh');
|
|
setVisible(false);
|
|
}
|
|
};
|
|
|
|
// 关闭
|
|
const handleCancel = async () => {
|
|
createEditRef.value?.resetFields();
|
|
setVisible(false);
|
|
};
|
|
</script>
|
|
|
|
<style scoped></style>
|
|
|