admin-panel: convert branch and workshop add/edit forms into modals
Both share FacilityList.vue, which now accepts an addRid/addLabel pair and a #form slot: when addRid is supplied, edit opens the slot's modal instead of navigating, and a ListPageHeader add button appears above the list. Branch and workshop each plug their own AddBranches/AddWorkshop instance into that slot, keyed by editingId so switching rows remounts the form (fresh onMounted load) rather than needing new watch-based reactivity. The /branch/add, /branch/edit/:id, /workshop/add, /workshop/edit/:id routes are unchanged and still work as a route-based fallback. Verified: pnpm build passes. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
co-authored by
Claude Sonnet 5
parent
12c8195090
commit
1ac3b03ad5
@@ -2,12 +2,64 @@
|
||||
<!--
|
||||
Ported from legacy henza_admin/src/views/workshop/AddWorkshop.vue.
|
||||
Serves BOTH create and edit — EditWorkshop.vue is a wrapper over it.
|
||||
Converted to a modal (BaseFormModal): the /workshop/add and
|
||||
/workshop/edit/:id routes still exist and still render this component
|
||||
directly as a route-based fallback, but ListWorkshop.vue now opens it as a
|
||||
modal via open/id props.
|
||||
|
||||
Unlike the branch form, this one CREATES its supervisor inline from three
|
||||
fields (نام / نام خانوادگی / موبایل) rather than picking an existing admin.
|
||||
The supervisor is saved as an AdminUser with role WORKSHOP_SUPERVISOR.
|
||||
-->
|
||||
<a-spin :spinning="loading">
|
||||
<BaseFormModal
|
||||
v-if="asModal"
|
||||
:open="Boolean(open)"
|
||||
:id="id"
|
||||
add-title="افزودن کارگاه"
|
||||
edit-title="ویرایش کارگاه"
|
||||
:loading="loading"
|
||||
:submitting="loading"
|
||||
width="lg"
|
||||
@update:open="$emit('update:open', $event)"
|
||||
@submit="handleSubmit"
|
||||
>
|
||||
<div class="grid-3">
|
||||
<a-form-item
|
||||
label="نام کارگاه"
|
||||
:validate-status="err.workshop_name ? 'error' : ''"
|
||||
:help="err.workshop_name"
|
||||
>
|
||||
<a-input v-model:value="form.workshop_name" />
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item label="تلفن کارگاه">
|
||||
<a-input v-model:value="form.workshop_phone" />
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item label="نام سرپرست کارگاه">
|
||||
<a-input v-model:value="form.user_fname" />
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item label="نام خانوادگی سرپرست کارگاه">
|
||||
<a-input v-model:value="form.user_lname" />
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item
|
||||
label="موبایل سرپرست کارگاه"
|
||||
:validate-status="err.user_phone ? 'error' : ''"
|
||||
:help="err.user_phone"
|
||||
>
|
||||
<a-input v-model:value="form.user_phone" />
|
||||
</a-form-item>
|
||||
</div>
|
||||
|
||||
<a-form-item label="آدرس">
|
||||
<a-textarea v-model:value="form.workshop_address" :auto-size="{ minRows: 2, maxRows: 5 }" />
|
||||
</a-form-item>
|
||||
</BaseFormModal>
|
||||
|
||||
<!-- route-based fallback for direct links to /workshop/add and /workshop/edit/:id -->
|
||||
<a-spin v-else :spinning="loading">
|
||||
<a-form layout="vertical" @submit.prevent="handleSubmit">
|
||||
<a-card :title="id ? 'ویرایش کارگاه' : 'افزودن کارگاه'" class="mb-base">
|
||||
<div class="grid-3">
|
||||
@@ -54,12 +106,24 @@
|
||||
import { onMounted, reactive, ref } from 'vue';
|
||||
import { useRoute, useRouter } from 'vue-router';
|
||||
import { message } from 'ant-design-vue';
|
||||
import BaseFormModal from '../../components/common/BaseFormModal.vue';
|
||||
import api from '../../api/client';
|
||||
|
||||
const props = defineProps<{
|
||||
open?: boolean;
|
||||
id?: string;
|
||||
}>();
|
||||
const emit = defineEmits<{
|
||||
(e: 'update:open', value: boolean): void;
|
||||
(e: 'success'): void;
|
||||
}>();
|
||||
|
||||
const asModal = props.open !== undefined;
|
||||
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
|
||||
const id = route.params.id as string | undefined;
|
||||
const id = asModal ? props.id : (route.params.id as string | undefined);
|
||||
const loading = ref(false);
|
||||
|
||||
const form = reactive<Record<string, any>>({
|
||||
@@ -89,7 +153,12 @@ async function handleSubmit() {
|
||||
await api.post('workshop', form);
|
||||
}
|
||||
message.info('اطلاعات با موفقیت به ثبت رسید.');
|
||||
router.push('/workshop/list');
|
||||
if (asModal) {
|
||||
emit('success');
|
||||
emit('update:open', false);
|
||||
} else {
|
||||
router.push('/workshop/list');
|
||||
}
|
||||
} catch (e: any) {
|
||||
message.error(e?.response?.data?.message ?? 'خطا در ثبت اطلاعات.');
|
||||
} finally {
|
||||
|
||||
@@ -6,11 +6,18 @@
|
||||
:model="model"
|
||||
edit-path="/workshop/edit"
|
||||
active-path="workshop/active"
|
||||
/>
|
||||
add-rid="workshop.create"
|
||||
add-label="افزودن کارگاه"
|
||||
>
|
||||
<template #form="{ open, editingId, onUpdateOpen, onSuccess }">
|
||||
<AddWorkshop :key="editingId ?? 'new'" :open="open" :id="editingId" @update:open="onUpdateOpen" @success="onSuccess" />
|
||||
</template>
|
||||
</FacilityList>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import FacilityList from '../branch/FacilityList.vue';
|
||||
import AddWorkshop from './AddWorkshop.vue';
|
||||
import { buildWorkshopListModel } from './ListWorkshop';
|
||||
|
||||
const model = buildWorkshopListModel();
|
||||
|
||||
Reference in New Issue
Block a user