102 lines
3.8 KiB
Vue
102 lines
3.8 KiB
Vue
<script lang="ts" setup>
|
|
import { reactive, ref } from "vue";
|
|
import { FormInstance } from "ant-design-vue";
|
|
import Tools from "@/core/utils/Tools";
|
|
import M_MusicGenresService from "@/services/apps/M_MusicGenress/M_MusicGenresService";
|
|
|
|
//定义组件事件
|
|
const props = defineProps<{ onSuccess: () => void }>();
|
|
|
|
const state = reactive({
|
|
vm: {
|
|
id: "",
|
|
form: {} as any,
|
|
},
|
|
visible: false,
|
|
loading: false,
|
|
});
|
|
|
|
//表单实例
|
|
const refForm = ref<FormInstance>();
|
|
|
|
//向父级导出 函数
|
|
defineExpose({
|
|
/**
|
|
* 打开表单初始化
|
|
* @param key
|
|
*/
|
|
open: (key: string = "") => {
|
|
state.visible = true;
|
|
if (state.visible) {
|
|
state.vm.id = key;
|
|
}
|
|
refForm.value?.resetFields();
|
|
//初始化表单数据
|
|
state.loading = true;
|
|
M_MusicGenresService.findForm(key).then((res) => {
|
|
state.loading = false;
|
|
if (res.code != 200) return;
|
|
state.vm = res.data;
|
|
});
|
|
},
|
|
});
|
|
|
|
/**
|
|
*保存数据
|
|
*/
|
|
function save() {
|
|
refForm.value?.validate().then(async () => {
|
|
try {
|
|
state.loading = true;
|
|
const result = await M_MusicGenresService.saveForm(state.vm.id, state.vm.form);
|
|
state.loading = false;
|
|
if (result.code != 200) return;
|
|
Tools.message.success("操作成功!");
|
|
props.onSuccess();
|
|
state.visible = false;
|
|
} catch (error) {
|
|
state.loading = false;
|
|
}
|
|
});
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<a-modal v-model:open="state.visible" :title="state.vm.id ? '编辑' : '新建'" centered @ok="state.visible = false" :width="800">
|
|
<template #footer>
|
|
<a-button type="primary" :loading="state.loading" @click="save()"> 提交</a-button>
|
|
<a-button @click="state.visible = false">关闭</a-button>
|
|
</template>
|
|
<a-spin :spinning="state.loading">
|
|
<a-form ref="refForm" layout="vertical" :model="state.vm.form">
|
|
<a-row :gutter="[16, 0]">
|
|
<a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
|
|
<a-form-item label="项目" name="tenantId">
|
|
<hm-tenant-select v-model:value="state.vm.form.tenantId" />
|
|
</a-form-item>
|
|
</a-col>
|
|
<a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
|
|
<a-form-item label="音乐风格名称" name="genreName" :rules="[{ required: true, message: '请输入', trigger: 'blur' }]">
|
|
<a-input v-model:value="state.vm.form.genreName" placeholder="请输入" />
|
|
</a-form-item>
|
|
</a-col>
|
|
<a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
|
|
<a-form-item label="音乐风格描述" name="description" :rules="[{ required: true, message: '请输入', trigger: 'blur' }]">
|
|
<a-input v-model:value="state.vm.form.description" placeholder="请输入" />
|
|
</a-form-item>
|
|
</a-col>
|
|
<a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
|
|
<a-form-item label="排序" name="orderId" :rules="[{ required: true, message: '请输入', trigger: 'blur' }]">
|
|
<a-input v-model:value="state.vm.form.orderId" placeholder="请输入" />
|
|
</a-form-item>
|
|
</a-col>
|
|
<a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
|
|
<a-form-item label="是否启用" name="isEnabled" :rules="[{ required: true, message: '请输入', trigger: 'blur' }]">
|
|
<a-input v-model:value="state.vm.form.isEnabled" placeholder="请输入" />
|
|
</a-form-item>
|
|
</a-col>
|
|
</a-row>
|
|
</a-form>
|
|
</a-spin>
|
|
</a-modal>
|
|
</template> |