You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
71 lines
2.0 KiB
Vue
71 lines
2.0 KiB
Vue
<template>
|
|
<el-dialog v-model="visible" title="添加项目" @close="handleClose" width="300px" :close-on-click-modal="false">
|
|
<el-form label-width="100px">
|
|
<el-form-item label="项目名称：">
|
|
<el-input v-model="projectName" placeholder="请输入项目名称"></el-input>
|
|
</el-form-item>
|
|
</el-form>
|
|
<div class="oper">
|
|
<el-button type="primary" :icon="Select" @click="handleConfirm">确定</el-button>
|
|
</div>
|
|
</el-dialog>
|
|
</template>
|
|
<script setup>
|
|
import { ref, onMounted } from 'vue'
|
|
import { Select } from "@element-plus/icons-vue";
|
|
import { emitter } from "~/utils/eventBus";
|
|
const { $toastMessage } = useNuxtApp();
|
|
import { generateGUID } from "~/utils/common";
|
|
import { createProject } from '~/services/projectService'
|
|
import { EMIT_COMMAND } from '~/utils/commandTypes'
|
|
// 项目名称
|
|
const projectName = ref('');
|
|
// 定义属性
|
|
const props = defineProps({
|
|
showDialog: {
|
|
type: Boolean,
|
|
default: false,
|
|
required: true
|
|
},
|
|
moduleId: {
|
|
type: String,
|
|
required: true
|
|
}
|
|
});
|
|
|
|
const visible = ref(props.showDialog);
|
|
|
|
const emit = defineEmits(['update:changeShowDialog']);
|
|
const handleClose = () => {
|
|
visible.value = false;
|
|
emit("update:changeShowDialog", false);
|
|
};
|
|
|
|
|
|
// 确定按钮事件
|
|
const handleConfirm = async () => {
|
|
if (!projectName.value) {
|
|
$toastMessage.warning('请输入项目名称！');
|
|
return;
|
|
}
|
|
let token = generateGUID();
|
|
const response = await createProject(props.moduleId, projectName.value, token);
|
|
if (response) {
|
|
emitter.emit(EMIT_COMMAND.CONFIRM_ADD_PROJECT, { moduleId: props.moduleId, projectName: projectName.value, token });
|
|
handleClose();
|
|
}
|
|
else {
|
|
$toastMessage.error("添加失败！");
|
|
return;
|
|
}
|
|
};
|
|
|
|
</script>
|
|
<style scoped>
|
|
.oper {
|
|
display: flex;
|
|
justify-content: right;
|
|
flex-flow: inline-end;
|
|
margin-top: 15px;
|
|
}
|
|
</style> |