s.esmaeiliandClaude Sonnet 5
1ac3b03ad5
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>
110 lines
3.7 KiB
Vue
110 lines
3.7 KiB
Vue
<template>
|
|
<!--
|
|
Shared implementation of legacy ListBranches.vue and ListWorkshop.vue.
|
|
Verified by diff: the two files differ by 14 lines — the card title, the
|
|
model import, and the edit route. Parameterised rather than duplicated.
|
|
|
|
Legacy quirks preserved:
|
|
- the delete action is COMMENTED OUT in both files and stays absent
|
|
- the status tooltip is labelled "وضعیت" and toggles on click
|
|
- legacy binds `slot-scope="text,record"` then reads `text.record.id`,
|
|
i.e. the row arrives as the FIRST argument; the Vue 3 slot gives us
|
|
`record` directly, which is the same row.
|
|
|
|
The add/edit modal itself is passed in via the default slot (branch and
|
|
workshop use different forms), so this component stays generic instead of
|
|
growing a v-if per caller.
|
|
-->
|
|
<a-card :title="title">
|
|
<ListPageHeader v-if="addRid" :rid="addRid" :add-label="addLabel" @add="openAdd()" />
|
|
|
|
<XTable ref="tbl" :model="model">
|
|
<template #actions="{ record }">
|
|
<div class="flex gap-2">
|
|
<a-tooltip v-if="addRid" title="ویرایش">
|
|
<EditOutlined class="cursor-pointer mx-1 text-primary" @click="openEdit(record.id)" />
|
|
</a-tooltip>
|
|
<a-tooltip v-else title="ویرایش">
|
|
<EditOutlined class="cursor-pointer mx-1 text-primary" @click="toEdit(record.id)" />
|
|
</a-tooltip>
|
|
|
|
<a-tooltip title="وضعیت">
|
|
<CheckOutlined
|
|
v-if="record.is_active"
|
|
class="cursor-pointer mx-1 text-success"
|
|
@click="setOffer(record.id)"
|
|
/>
|
|
<CloseOutlined v-else class="cursor-pointer mx-1 text-danger" @click="setOffer(record.id)" />
|
|
</a-tooltip>
|
|
</div>
|
|
</template>
|
|
</XTable>
|
|
|
|
<slot name="form" :open="modalOpen" :editing-id="editingId" :on-update-open="onUpdateOpen" :on-success="onSuccess" />
|
|
</a-card>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref } from 'vue';
|
|
import { useRouter } from 'vue-router';
|
|
import { message } from 'ant-design-vue';
|
|
import { CheckOutlined, CloseOutlined, EditOutlined } from '@ant-design/icons-vue';
|
|
import XTable from '../../components/x-table/XTable.vue';
|
|
import ListPageHeader from '../../components/common/ListPageHeader.vue';
|
|
import api from '../../api/client';
|
|
import type { XTbl } from '../../components/x-table/model';
|
|
|
|
const props = defineProps<{
|
|
title: string;
|
|
model: XTbl;
|
|
/** Where the edit pencil navigates when no modal form is supplied, e.g.
|
|
* '/branch/edit' or '/workshop/edit'. */
|
|
editPath: string;
|
|
/** The toggle endpoint, e.g. 'branch/active' or 'workshop/active'. */
|
|
activePath: string;
|
|
/** When set, edit/add open the #form slot's modal instead of navigating,
|
|
* gated on this rid (the same one the /add route used). */
|
|
addRid?: string;
|
|
addLabel?: string;
|
|
}>();
|
|
|
|
const router = useRouter();
|
|
const tbl = ref<{ fetch: () => Promise<void> } | null>(null);
|
|
|
|
const modalOpen = ref(false);
|
|
const editingId = ref<string | undefined>(undefined);
|
|
|
|
function openAdd() {
|
|
editingId.value = undefined;
|
|
modalOpen.value = true;
|
|
}
|
|
|
|
function openEdit(id: string) {
|
|
editingId.value = id;
|
|
modalOpen.value = true;
|
|
}
|
|
|
|
function onUpdateOpen(value: boolean) {
|
|
modalOpen.value = value;
|
|
}
|
|
|
|
function onSuccess() {
|
|
tbl.value?.fetch();
|
|
}
|
|
|
|
function toEdit(id: string) {
|
|
router.push(`${props.editPath}/${id}`);
|
|
}
|
|
|
|
/** legacy setOffer(): the status toggle */
|
|
async function setOffer(id: string) {
|
|
try {
|
|
await api.get(`${props.activePath}/${id}`);
|
|
message.success('تغییرات ثبت شد');
|
|
tbl.value?.fetch();
|
|
} catch (e: any) {
|
|
message.error(e?.response?.data?.message ?? 'خطا در تغییر وضعیت');
|
|
}
|
|
}
|
|
</script>
|