feat: 第二阶段核心业务模块(CRM/房务/护理/月子餐)
后端: - 4个迁移文件新增23张业务表 - 23个Eloquent Model(含关联/类型转换/门店隔离) - 20个Controller(含CRUD+业务操作: 合同审核/入住退房/护理异常处理等) - 110+条API路由(crm/room/care/meal四大前缀) 前端: - 4个API模块(crm.js/room.js/care.js/meal.js) - 13个业务页面(线索/客户/合同/渠道/投诉/房型/房间/预定/护理档案/护理计划/护理记录/菜品/排餐)
This commit is contained in:
li
@@ -0,0 +1,43 @@
|
||||
import request from '@/utils/request.js'
|
||||
|
||||
// ─── Care Profiles ────────────────────────────────────────────────────────────
|
||||
export const careProfileApi = {
|
||||
getList: (params) => request.get('/care/profiles', { params }),
|
||||
getDetail: (id) => request.get(`/care/profiles/${id}`),
|
||||
create: (data) => request.post('/care/profiles', data),
|
||||
update: (id, data) => request.put(`/care/profiles/${id}`, data),
|
||||
delete: (id) => request.delete(`/care/profiles/${id}`)
|
||||
}
|
||||
|
||||
// ─── Care Plans ───────────────────────────────────────────────────────────────
|
||||
export const carePlanApi = {
|
||||
getList: (params) => request.get('/care/plans', { params }),
|
||||
getDetail: (id) => request.get(`/care/plans/${id}`),
|
||||
create: (data) => request.post('/care/plans', data),
|
||||
update: (id, data) => request.put(`/care/plans/${id}`, data),
|
||||
delete: (id) => request.delete(`/care/plans/${id}`)
|
||||
}
|
||||
|
||||
// ─── Care Records ─────────────────────────────────────────────────────────────
|
||||
export const careRecordApi = {
|
||||
getList: (params) => request.get('/care/records', { params }),
|
||||
getDetail: (id) => request.get(`/care/records/${id}`),
|
||||
create: (data) => request.post('/care/records', data),
|
||||
update: (id, data) => request.put(`/care/records/${id}`, data),
|
||||
delete: (id) => request.delete(`/care/records/${id}`)
|
||||
}
|
||||
|
||||
// ─── Care Exceptions ──────────────────────────────────────────────────────────
|
||||
export const careExceptionApi = {
|
||||
getList: (params) => request.get('/care/exceptions', { params }),
|
||||
getDetail: (id) => request.get(`/care/exceptions/${id}`),
|
||||
create: (data) => request.post('/care/exceptions', data),
|
||||
update: (id, data) => request.put(`/care/exceptions/${id}`, data),
|
||||
handle: (id, data) => request.put(`/care/exceptions/${id}/handle`, data)
|
||||
}
|
||||
|
||||
// ─── Health Metrics ───────────────────────────────────────────────────────────
|
||||
export const healthMetricApi = {
|
||||
getList: (params) => request.get('/care/health-metrics', { params }),
|
||||
create: (data) => request.post('/care/health-metrics', data)
|
||||
}
|
||||
@@ -0,0 +1,61 @@
|
||||
import request from '@/utils/request.js'
|
||||
|
||||
// ─── Channels ─────────────────────────────────────────────────────────────────
|
||||
export const channelApi = {
|
||||
getList: (params) => request.get('/crm/channels', { params }),
|
||||
getDetail: (id) => request.get(`/crm/channels/${id}`),
|
||||
create: (data) => request.post('/crm/channels', data),
|
||||
update: (id, data) => request.put(`/crm/channels/${id}`, data),
|
||||
delete: (id) => request.delete(`/crm/channels/${id}`)
|
||||
}
|
||||
|
||||
// ─── Leads ────────────────────────────────────────────────────────────────────
|
||||
export const leadApi = {
|
||||
getList: (params) => request.get('/crm/leads', { params }),
|
||||
getDetail: (id) => request.get(`/crm/leads/${id}`),
|
||||
create: (data) => request.post('/crm/leads', data),
|
||||
update: (id, data) => request.put(`/crm/leads/${id}`, data),
|
||||
delete: (id) => request.delete(`/crm/leads/${id}`),
|
||||
follow: (id, data) => request.post(`/crm/leads/${id}/follow`, data),
|
||||
assign: (id, data) => request.put(`/crm/leads/${id}/assign`, data)
|
||||
}
|
||||
|
||||
// ─── Customers ────────────────────────────────────────────────────────────────
|
||||
export const customerApi = {
|
||||
getList: (params) => request.get('/crm/customers', { params }),
|
||||
getDetail: (id) => request.get(`/crm/customers/${id}`),
|
||||
create: (data) => request.post('/crm/customers', data),
|
||||
update: (id, data) => request.put(`/crm/customers/${id}`, data),
|
||||
delete: (id) => request.delete(`/crm/customers/${id}`)
|
||||
}
|
||||
|
||||
// ─── Contracts ────────────────────────────────────────────────────────────────
|
||||
export const contractApi = {
|
||||
getList: (params) => request.get('/crm/contracts', { params }),
|
||||
getDetail: (id) => request.get(`/crm/contracts/${id}`),
|
||||
create: (data) => request.post('/crm/contracts', data),
|
||||
update: (id, data) => request.put(`/crm/contracts/${id}`, data),
|
||||
delete: (id) => request.delete(`/crm/contracts/${id}`),
|
||||
audit: (id, data) => request.put(`/crm/contracts/${id}/audit`, data)
|
||||
}
|
||||
|
||||
// ─── Questionnaires ───────────────────────────────────────────────────────────
|
||||
export const questionnaireApi = {
|
||||
getList: (params) => request.get('/crm/questionnaires', { params }),
|
||||
getDetail: (id) => request.get(`/crm/questionnaires/${id}`),
|
||||
create: (data) => request.post('/crm/questionnaires', data),
|
||||
update: (id, data) => request.put(`/crm/questionnaires/${id}`, data),
|
||||
delete: (id) => request.delete(`/crm/questionnaires/${id}`),
|
||||
submitAnswer: (data) => request.post('/crm/questionnaire-answers', data),
|
||||
getAnswers: (params) => request.get('/crm/questionnaire-answers', { params })
|
||||
}
|
||||
|
||||
// ─── Complaints ───────────────────────────────────────────────────────────────
|
||||
export const complaintApi = {
|
||||
getList: (params) => request.get('/crm/complaints', { params }),
|
||||
getDetail: (id) => request.get(`/crm/complaints/${id}`),
|
||||
create: (data) => request.post('/crm/complaints', data),
|
||||
update: (id, data) => request.put(`/crm/complaints/${id}`, data),
|
||||
delete: (id) => request.delete(`/crm/complaints/${id}`),
|
||||
handle: (id, data) => request.put(`/crm/complaints/${id}/handle`, data)
|
||||
}
|
||||
@@ -0,0 +1,36 @@
|
||||
import request from '@/utils/request.js'
|
||||
|
||||
// ─── Dishes ───────────────────────────────────────────────────────────────────
|
||||
export const dishApi = {
|
||||
getList: (params) => request.get('/meal/dishes', { params }),
|
||||
getDetail: (id) => request.get(`/meal/dishes/${id}`),
|
||||
create: (data) => request.post('/meal/dishes', data),
|
||||
update: (id, data) => request.put(`/meal/dishes/${id}`, data),
|
||||
delete: (id) => request.delete(`/meal/dishes/${id}`)
|
||||
}
|
||||
|
||||
// ─── Meal Plan Templates ──────────────────────────────────────────────────────
|
||||
export const mealTemplateApi = {
|
||||
getList: (params) => request.get('/meal/templates', { params }),
|
||||
getDetail: (id) => request.get(`/meal/templates/${id}`),
|
||||
create: (data) => request.post('/meal/templates', data),
|
||||
update: (id, data) => request.put(`/meal/templates/${id}`, data),
|
||||
delete: (id) => request.delete(`/meal/templates/${id}`)
|
||||
}
|
||||
|
||||
// ─── Daily Meal Plans ─────────────────────────────────────────────────────────
|
||||
export const dailyMealPlanApi = {
|
||||
getList: (params) => request.get('/meal/daily-plans', { params }),
|
||||
getDetail: (id) => request.get(`/meal/daily-plans/${id}`),
|
||||
create: (data) => request.post('/meal/daily-plans', data),
|
||||
update: (id, data) => request.put(`/meal/daily-plans/${id}`, data),
|
||||
delete: (id) => request.delete(`/meal/daily-plans/${id}`),
|
||||
deliver: (id) => request.put(`/meal/daily-plans/${id}/deliver`),
|
||||
updateStatus: (id, data) => request.put(`/meal/daily-plans/${id}/status`, data)
|
||||
}
|
||||
|
||||
// ─── Meal Reviews ─────────────────────────────────────────────────────────────
|
||||
export const mealReviewApi = {
|
||||
getList: (params) => request.get('/meal/reviews', { params }),
|
||||
create: (data) => request.post('/meal/reviews', data)
|
||||
}
|
||||
@@ -0,0 +1,47 @@
|
||||
import request from '@/utils/request.js'
|
||||
|
||||
// ─── Room Types ───────────────────────────────────────────────────────────────
|
||||
export const roomTypeApi = {
|
||||
getList: (params) => request.get('/room/room-types', { params }),
|
||||
getDetail: (id) => request.get(`/room/room-types/${id}`),
|
||||
create: (data) => request.post('/room/room-types', data),
|
||||
update: (id, data) => request.put(`/room/room-types/${id}`, data),
|
||||
delete: (id) => request.delete(`/room/room-types/${id}`)
|
||||
}
|
||||
|
||||
// ─── Rooms ────────────────────────────────────────────────────────────────────
|
||||
export const roomApi = {
|
||||
getList: (params) => request.get('/room/rooms', { params }),
|
||||
getDetail: (id) => request.get(`/room/rooms/${id}`),
|
||||
create: (data) => request.post('/room/rooms', data),
|
||||
update: (id, data) => request.put(`/room/rooms/${id}`, data),
|
||||
delete: (id) => request.delete(`/room/rooms/${id}`),
|
||||
updateStatus: (id, data) => request.put(`/room/rooms/${id}/status`, data)
|
||||
}
|
||||
|
||||
// ─── Reservations ─────────────────────────────────────────────────────────────
|
||||
export const reservationApi = {
|
||||
getList: (params) => request.get('/room/reservations', { params }),
|
||||
getDetail: (id) => request.get(`/room/reservations/${id}`),
|
||||
create: (data) => request.post('/room/reservations', data),
|
||||
update: (id, data) => request.put(`/room/reservations/${id}`, data),
|
||||
delete: (id) => request.delete(`/room/reservations/${id}`),
|
||||
checkIn: (id) => request.put(`/room/reservations/${id}/check-in`),
|
||||
checkOut: (id) => request.put(`/room/reservations/${id}/check-out`),
|
||||
cancel: (id, data) => request.put(`/room/reservations/${id}/cancel`, data)
|
||||
}
|
||||
|
||||
// ─── Customer Outings ─────────────────────────────────────────────────────────
|
||||
export const customerOutingApi = {
|
||||
getList: (params) => request.get('/room/customer-outings', { params }),
|
||||
getDetail: (id) => request.get(`/room/customer-outings/${id}`),
|
||||
create: (data) => request.post('/room/customer-outings', data),
|
||||
recordBack: (id, data) => request.put(`/room/customer-outings/${id}/back`, data)
|
||||
}
|
||||
|
||||
// ─── Call Records ─────────────────────────────────────────────────────────────
|
||||
export const callRecordApi = {
|
||||
getList: (params) => request.get('/room/call-records', { params }),
|
||||
create: (data) => request.post('/room/call-records', data),
|
||||
handle: (id, data) => request.put(`/room/call-records/${id}/handle`, data)
|
||||
}
|
||||
@@ -0,0 +1,85 @@
|
||||
<script setup>
|
||||
import { ref, reactive, onMounted } from 'vue'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { carePlanApi, careProfileApi } from '@/api/care.js'
|
||||
import { userApi } from '@/api/system.js'
|
||||
|
||||
const tableData = ref([])
|
||||
const total = ref(0)
|
||||
const loading = ref(false)
|
||||
const dialogVisible = ref(false)
|
||||
const submitLoading = ref(false)
|
||||
const profiles = ref([])
|
||||
const nurses = ref([])
|
||||
|
||||
const searchForm = reactive({ care_profile_id: '', plan_date: '', status: '' })
|
||||
const pagination = reactive({ page: 1, per_page: 20 })
|
||||
|
||||
const formRef = ref(null)
|
||||
const form = reactive({ id: null, care_profile_id: '', plan_date: '', stage: '', items: [], nurse_id: '', status: 0 })
|
||||
const isEdit = ref(false)
|
||||
|
||||
const statusMap = { 0: '待执行', 1: '执行中', 2: '已完成' }
|
||||
const statusType = { 0: 'info', 1: 'warning', 2: 'success' }
|
||||
|
||||
async function fetchList() {
|
||||
loading.value = true
|
||||
try { const res = await carePlanApi.getList({ ...searchForm, ...pagination }); tableData.value = res.data?.list || res.data?.data || []; total.value = res.data?.total || 0 } finally { loading.value = false }
|
||||
}
|
||||
|
||||
async function fetchProfiles() { try { const res = await careProfileApi.getList({ per_page: 500 }); profiles.value = res.data?.list || res.data?.data || [] } catch {} }
|
||||
async function fetchNurses() { try { const res = await userApi.getList({ per_page: 200 }); nurses.value = res.data?.list || res.data?.data || [] } catch {} }
|
||||
|
||||
function handleSearch() { pagination.page = 1; fetchList() }
|
||||
function handleReset() { Object.assign(searchForm, { care_profile_id: '', plan_date: '', status: '' }); handleSearch() }
|
||||
function handleAdd() { isEdit.value = false; Object.assign(form, { id: null, care_profile_id: '', plan_date: '', stage: '', items: [], nurse_id: '', status: 0 }); dialogVisible.value = true }
|
||||
async function handleEdit(row) { isEdit.value = true; Object.assign(form, { id: row.id, care_profile_id: row.care_profile_id, plan_date: row.plan_date, stage: row.stage || '', items: row.items || [], nurse_id: row.nurse_id || '', status: row.status }); dialogVisible.value = true }
|
||||
|
||||
async function handleSubmit() {
|
||||
submitLoading.value = true
|
||||
try {
|
||||
if (isEdit.value) { await carePlanApi.update(form.id, form) } else { await carePlanApi.create(form) }
|
||||
ElMessage.success(isEdit.value ? '更新成功' : '创建成功'); dialogVisible.value = false; fetchList()
|
||||
} finally { submitLoading.value = false }
|
||||
}
|
||||
|
||||
function handlePageChange(val) { pagination.page = val; fetchList() }
|
||||
function handleSizeChange(val) { pagination.per_page = val; pagination.page = 1; fetchList() }
|
||||
onMounted(() => { fetchList(); fetchProfiles(); fetchNurses() })
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="page-container">
|
||||
<div class="search-bar">
|
||||
<el-select v-model="searchForm.care_profile_id" placeholder="护理档案" clearable filterable style="width:200px"><el-option v-for="p in profiles" :key="p.id" :label="`${p.customer?.name||''} - ${p.type===1?'妈妈':'宝宝'}`" :value="p.id" /></el-select>
|
||||
<el-date-picker v-model="searchForm.plan_date" type="date" value-format="YYYY-MM-DD" placeholder="计划日期" style="width:160px" />
|
||||
<el-select v-model="searchForm.status" placeholder="状态" clearable style="width:120px"><el-option v-for="(v,k) in statusMap" :key="k" :label="v" :value="Number(k)" /></el-select>
|
||||
<el-button type="primary" @click="handleSearch">查询</el-button>
|
||||
<el-button @click="handleReset">重置</el-button>
|
||||
</div>
|
||||
<div class="table-container">
|
||||
<div class="table-actions"><el-button type="primary" @click="handleAdd">新增计划</el-button></div>
|
||||
<el-table v-loading="loading" :data="tableData" border stripe style="width:100%">
|
||||
<el-table-column label="客户" min-width="100"><template #default="{ row }">{{ row.profile?.customer?.name || '-' }}</template></el-table-column>
|
||||
<el-table-column prop="plan_date" label="计划日期" min-width="110" />
|
||||
<el-table-column prop="stage" label="阶段" min-width="100" />
|
||||
<el-table-column label="护士" min-width="100"><template #default="{ row }">{{ row.nurse?.name || '-' }}</template></el-table-column>
|
||||
<el-table-column label="状态" width="90" align="center"><template #default="{ row }"><el-tag :type="statusType[row.status]" size="small">{{ statusMap[row.status] }}</el-tag></template></el-table-column>
|
||||
<el-table-column label="操作" width="120" fixed="right" align="center">
|
||||
<template #default="{ row }"><el-button size="small" type="primary" link @click="handleEdit(row)">编辑</el-button></template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<el-pagination v-model:current-page="pagination.page" v-model:page-size="pagination.per_page" :total="total" :page-sizes="[10,20,50]" layout="total,sizes,prev,pager,next,jumper" background @current-change="handlePageChange" @size-change="handleSizeChange" />
|
||||
</div>
|
||||
<el-dialog v-model="dialogVisible" :title="isEdit?'编辑计划':'新增计划'" width="550px" destroy-on-close>
|
||||
<el-form ref="formRef" :model="form" label-width="80px">
|
||||
<el-form-item label="护理档案"><el-select v-model="form.care_profile_id" filterable style="width:100%"><el-option v-for="p in profiles" :key="p.id" :label="`${p.customer?.name||''} - ${p.type===1?'妈妈':'宝宝'}`" :value="p.id" /></el-select></el-form-item>
|
||||
<el-form-item label="计划日期"><el-date-picker v-model="form.plan_date" type="date" value-format="YYYY-MM-DD" style="width:100%" /></el-form-item>
|
||||
<el-form-item label="阶段"><el-input v-model="form.stage" placeholder="如：产后第1周" /></el-form-item>
|
||||
<el-form-item label="护士"><el-select v-model="form.nurse_id" filterable clearable style="width:100%"><el-option v-for="n in nurses" :key="n.id" :label="n.name" :value="n.id" /></el-select></el-form-item>
|
||||
<el-form-item v-if="isEdit" label="状态"><el-select v-model="form.status" style="width:100%"><el-option v-for="(v,k) in statusMap" :key="k" :label="v" :value="Number(k)" /></el-select></el-form-item>
|
||||
</el-form>
|
||||
<template #footer><el-button @click="dialogVisible=false">取消</el-button><el-button type="primary" :loading="submitLoading" @click="handleSubmit">确定</el-button></template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,136 @@
|
||||
<script setup>
|
||||
import { ref, reactive, onMounted } from 'vue'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import { careProfileApi } from '@/api/care.js'
|
||||
import { customerApi } from '@/api/crm.js'
|
||||
|
||||
const tableData = ref([])
|
||||
const total = ref(0)
|
||||
const loading = ref(false)
|
||||
const dialogVisible = ref(false)
|
||||
const submitLoading = ref(false)
|
||||
const detailVisible = ref(false)
|
||||
const detailData = ref(null)
|
||||
const customers = ref([])
|
||||
|
||||
const searchForm = reactive({ customer_id: '', type: '', risk_level: '' })
|
||||
const pagination = reactive({ page: 1, per_page: 20 })
|
||||
|
||||
const formRef = ref(null)
|
||||
const form = reactive({ id: null, customer_id: '', type: 1, baby_name: '', baby_gender: '', baby_birthday: '', birth_weight: '', birth_method: '', allergies: '', medical_history: '', risk_level: 0, assessment: [] })
|
||||
const isEdit = ref(false)
|
||||
const formRules = {
|
||||
customer_id: [{ required: true, message: '请选择客户', trigger: 'change' }],
|
||||
type: [{ required: true, message: '请选择类型', trigger: 'change' }]
|
||||
}
|
||||
|
||||
const typeMap = { 1: '妈妈', 2: '宝宝' }
|
||||
const genderMap = { 1: '男', 2: '女' }
|
||||
const birthMethodMap = { 1: '顺产', 2: '剖宫产' }
|
||||
const riskMap = { 0: '正常', 1: '低风险', 2: '高风险' }
|
||||
const riskType = { 0: 'success', 1: 'warning', 2: 'danger' }
|
||||
|
||||
async function fetchList() {
|
||||
loading.value = true
|
||||
try { const res = await careProfileApi.getList({ ...searchForm, ...pagination }); tableData.value = res.data?.list || res.data?.data || []; total.value = res.data?.total || 0 } finally { loading.value = false }
|
||||
}
|
||||
|
||||
async function fetchCustomers() { try { const res = await customerApi.getList({ per_page: 500 }); customers.value = res.data?.list || res.data?.data || [] } catch {} }
|
||||
|
||||
function handleSearch() { pagination.page = 1; fetchList() }
|
||||
function handleReset() { Object.assign(searchForm, { customer_id: '', type: '', risk_level: '' }); handleSearch() }
|
||||
function handleAdd() { isEdit.value = false; Object.assign(form, { id: null, customer_id: '', type: 1, baby_name: '', baby_gender: '', baby_birthday: '', birth_weight: '', birth_method: '', allergies: '', medical_history: '', risk_level: 0, assessment: [] }); dialogVisible.value = true }
|
||||
async function handleEdit(row) { isEdit.value = true; const res = await careProfileApi.getDetail(row.id); const d = res.data; Object.assign(form, { id: d.id, customer_id: d.customer_id, type: d.type, baby_name: d.baby_name || '', baby_gender: d.baby_gender || '', baby_birthday: d.baby_birthday || '', birth_weight: d.birth_weight || '', birth_method: d.birth_method || '', allergies: d.allergies || '', medical_history: d.medical_history || '', risk_level: d.risk_level || 0, assessment: d.assessment || [] }); dialogVisible.value = true }
|
||||
|
||||
async function handleSubmit() {
|
||||
if (!formRef.value) return
|
||||
await formRef.value.validate(async (valid) => {
|
||||
if (!valid) return
|
||||
submitLoading.value = true
|
||||
try {
|
||||
if (isEdit.value) { await careProfileApi.update(form.id, form) } else { await careProfileApi.create(form) }
|
||||
ElMessage.success(isEdit.value ? '更新成功' : '创建成功'); dialogVisible.value = false; fetchList()
|
||||
} finally { submitLoading.value = false }
|
||||
})
|
||||
}
|
||||
|
||||
async function handleDetail(row) { const res = await careProfileApi.getDetail(row.id); detailData.value = res.data; detailVisible.value = true }
|
||||
|
||||
async function handleDelete(row) {
|
||||
await ElMessageBox.confirm('确定删除该护理档案吗？', '删除确认', { type: 'warning' })
|
||||
await careProfileApi.delete(row.id); ElMessage.success('删除成功'); fetchList()
|
||||
}
|
||||
|
||||
function handlePageChange(val) { pagination.page = val; fetchList() }
|
||||
function handleSizeChange(val) { pagination.per_page = val; pagination.page = 1; fetchList() }
|
||||
onMounted(() => { fetchList(); fetchCustomers() })
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="page-container">
|
||||
<div class="search-bar">
|
||||
<el-select v-model="searchForm.customer_id" placeholder="选择客户" clearable filterable style="width:180px"><el-option v-for="c in customers" :key="c.id" :label="c.name" :value="c.id" /></el-select>
|
||||
<el-select v-model="searchForm.type" placeholder="类型" clearable style="width:120px"><el-option v-for="(v,k) in typeMap" :key="k" :label="v" :value="Number(k)" /></el-select>
|
||||
<el-select v-model="searchForm.risk_level" placeholder="风险等级" clearable style="width:120px"><el-option v-for="(v,k) in riskMap" :key="k" :label="v" :value="Number(k)" /></el-select>
|
||||
<el-button type="primary" @click="handleSearch">查询</el-button>
|
||||
<el-button @click="handleReset">重置</el-button>
|
||||
</div>
|
||||
<div class="table-container">
|
||||
<div class="table-actions"><el-button type="primary" @click="handleAdd">新增档案</el-button></div>
|
||||
<el-table v-loading="loading" :data="tableData" border stripe style="width:100%">
|
||||
<el-table-column label="客户" min-width="100"><template #default="{ row }">{{ row.customer?.name || '-' }}</template></el-table-column>
|
||||
<el-table-column label="类型" width="80" align="center"><template #default="{ row }"><el-tag :type="row.type===1?'':'success'" size="small">{{ typeMap[row.type] }}</el-tag></template></el-table-column>
|
||||
<el-table-column prop="baby_name" label="宝宝名" min-width="100" />
|
||||
<el-table-column label="性别" width="70" align="center"><template #default="{ row }">{{ genderMap[row.baby_gender] || '-' }}</template></el-table-column>
|
||||
<el-table-column label="分娩方式" width="90"><template #default="{ row }">{{ birthMethodMap[row.birth_method] || '-' }}</template></el-table-column>
|
||||
<el-table-column label="风险等级" width="90" align="center"><template #default="{ row }"><el-tag :type="riskType[row.risk_level]" size="small">{{ riskMap[row.risk_level] }}</el-tag></template></el-table-column>
|
||||
<el-table-column label="操作" width="200" fixed="right" align="center">
|
||||
<template #default="{ row }">
|
||||
<el-button size="small" type="primary" link @click="handleDetail(row)">详情</el-button>
|
||||
<el-button size="small" type="primary" link @click="handleEdit(row)">编辑</el-button>
|
||||
<el-button size="small" type="danger" link @click="handleDelete(row)">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<el-pagination v-model:current-page="pagination.page" v-model:page-size="pagination.per_page" :total="total" :page-sizes="[10,20,50]" layout="total,sizes,prev,pager,next,jumper" background @current-change="handlePageChange" @size-change="handleSizeChange" />
|
||||
</div>
|
||||
<el-dialog v-model="dialogVisible" :title="isEdit?'编辑档案':'新增档案'" width="650px" destroy-on-close>
|
||||
<el-form ref="formRef" :model="form" :rules="formRules" label-width="80px">
|
||||
<el-row :gutter="16">
|
||||
<el-col :span="12"><el-form-item label="客户" prop="customer_id"><el-select v-model="form.customer_id" filterable style="width:100%"><el-option v-for="c in customers" :key="c.id" :label="c.name" :value="c.id" /></el-select></el-form-item></el-col>
|
||||
<el-col :span="12"><el-form-item label="类型" prop="type"><el-select v-model="form.type" style="width:100%"><el-option v-for="(v,k) in typeMap" :key="k" :label="v" :value="Number(k)" /></el-select></el-form-item></el-col>
|
||||
<template v-if="form.type===2">
|
||||
<el-col :span="12"><el-form-item label="宝宝名"><el-input v-model="form.baby_name" /></el-form-item></el-col>
|
||||
<el-col :span="12"><el-form-item label="性别"><el-select v-model="form.baby_gender" style="width:100%"><el-option label="男" :value="1" /><el-option label="女" :value="2" /></el-select></el-form-item></el-col>
|
||||
<el-col :span="12"><el-form-item label="出生日期"><el-date-picker v-model="form.baby_birthday" type="datetime" value-format="YYYY-MM-DD HH:mm:ss" style="width:100%" /></el-form-item></el-col>
|
||||
<el-col :span="12"><el-form-item label="出生体重"><el-input-number v-model="form.birth_weight" :min="0" :precision="2" style="width:100%" /><span style="margin-left:4px">kg</span></el-form-item></el-col>
|
||||
</template>
|
||||
<el-col :span="12"><el-form-item label="分娩方式"><el-select v-model="form.birth_method" clearable style="width:100%"><el-option label="顺产" :value="1" /><el-option label="剖宫产" :value="2" /></el-select></el-form-item></el-col>
|
||||
<el-col :span="12"><el-form-item label="风险等级"><el-select v-model="form.risk_level" style="width:100%"><el-option v-for="(v,k) in riskMap" :key="k" :label="v" :value="Number(k)" /></el-select></el-form-item></el-col>
|
||||
<el-col :span="12"><el-form-item label="过敏史"><el-input v-model="form.allergies" type="textarea" :rows="2" /></el-form-item></el-col>
|
||||
<el-col :span="12"><el-form-item label="病史"><el-input v-model="form.medical_history" type="textarea" :rows="2" /></el-form-item></el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<template #footer><el-button @click="dialogVisible=false">取消</el-button><el-button type="primary" :loading="submitLoading" @click="handleSubmit">确定</el-button></template>
|
||||
</el-dialog>
|
||||
<el-drawer v-model="detailVisible" title="护理档案详情" size="600px">
|
||||
<template v-if="detailData">
|
||||
<el-descriptions :column="2" border>
|
||||
<el-descriptions-item label="客户">{{ detailData.customer?.name }}</el-descriptions-item>
|
||||
<el-descriptions-item label="类型">{{ typeMap[detailData.type] }}</el-descriptions-item>
|
||||
<el-descriptions-item label="宝宝名">{{ detailData.baby_name || '-' }}</el-descriptions-item>
|
||||
<el-descriptions-item label="风险等级"><el-tag :type="riskType[detailData.risk_level]" size="small">{{ riskMap[detailData.risk_level] }}</el-tag></el-descriptions-item>
|
||||
<el-descriptions-item label="过敏史">{{ detailData.allergies || '-' }}</el-descriptions-item>
|
||||
<el-descriptions-item label="病史">{{ detailData.medical_history || '-' }}</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
<h4 style="margin:16px 0 8px">护理计划</h4>
|
||||
<el-table :data="detailData.plans || []" border size="small">
|
||||
<el-table-column prop="plan_date" label="日期" width="110" />
|
||||
<el-table-column prop="stage" label="阶段" />
|
||||
<el-table-column label="护士"><template #default="{ row }">{{ row.nurse?.name || '-' }}</template></el-table-column>
|
||||
<el-table-column label="状态" width="80"><template #default="{ row }"><el-tag size="small">{{ ['待执行','执行中','已完成'][row.status] }}</el-tag></template></el-table-column>
|
||||
</el-table>
|
||||
</template>
|
||||
</el-drawer>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,76 @@
|
||||
<script setup>
|
||||
import { ref, reactive, onMounted } from 'vue'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { careRecordApi, careProfileApi } from '@/api/care.js'
|
||||
|
||||
const tableData = ref([])
|
||||
const total = ref(0)
|
||||
const loading = ref(false)
|
||||
const dialogVisible = ref(false)
|
||||
const submitLoading = ref(false)
|
||||
const profiles = ref([])
|
||||
|
||||
const searchForm = reactive({ care_profile_id: '', type: '' })
|
||||
const pagination = reactive({ page: 1, per_page: 20 })
|
||||
|
||||
const form = reactive({ id: null, care_profile_id: '', care_plan_id: '', type: 1, items: [], remark: '', images: [], recorded_at: '' })
|
||||
const isEdit = ref(false)
|
||||
const typeMap = { 1: '妈妈护理', 2: '宝宝护理' }
|
||||
|
||||
async function fetchList() {
|
||||
loading.value = true
|
||||
try { const res = await careRecordApi.getList({ ...searchForm, ...pagination }); tableData.value = res.data?.list || res.data?.data || []; total.value = res.data?.total || 0 } finally { loading.value = false }
|
||||
}
|
||||
|
||||
async function fetchProfiles() { try { const res = await careProfileApi.getList({ per_page: 500 }); profiles.value = res.data?.list || res.data?.data || [] } catch {} }
|
||||
|
||||
function handleSearch() { pagination.page = 1; fetchList() }
|
||||
function handleReset() { Object.assign(searchForm, { care_profile_id: '', type: '' }); handleSearch() }
|
||||
function handleAdd() { isEdit.value = false; Object.assign(form, { id: null, care_profile_id: '', care_plan_id: '', type: 1, items: [], remark: '', images: [], recorded_at: '' }); dialogVisible.value = true }
|
||||
async function handleEdit(row) { isEdit.value = true; Object.assign(form, { id: row.id, care_profile_id: row.care_profile_id, care_plan_id: row.care_plan_id || '', type: row.type, items: row.items || [], remark: row.remark || '', images: row.images || [], recorded_at: row.recorded_at || '' }); dialogVisible.value = true }
|
||||
|
||||
async function handleSubmit() {
|
||||
submitLoading.value = true
|
||||
try {
|
||||
if (isEdit.value) { await careRecordApi.update(form.id, form) } else { await careRecordApi.create(form) }
|
||||
ElMessage.success(isEdit.value ? '更新成功' : '创建成功'); dialogVisible.value = false; fetchList()
|
||||
} finally { submitLoading.value = false }
|
||||
}
|
||||
|
||||
function handlePageChange(val) { pagination.page = val; fetchList() }
|
||||
function handleSizeChange(val) { pagination.per_page = val; pagination.page = 1; fetchList() }
|
||||
onMounted(() => { fetchList(); fetchProfiles() })
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="page-container">
|
||||
<div class="search-bar">
|
||||
<el-select v-model="searchForm.care_profile_id" placeholder="护理档案" clearable filterable style="width:200px"><el-option v-for="p in profiles" :key="p.id" :label="`${p.customer?.name||''} - ${p.type===1?'妈妈':'宝宝'}`" :value="p.id" /></el-select>
|
||||
<el-select v-model="searchForm.type" placeholder="类型" clearable style="width:140px"><el-option v-for="(v,k) in typeMap" :key="k" :label="v" :value="Number(k)" /></el-select>
|
||||
<el-button type="primary" @click="handleSearch">查询</el-button>
|
||||
<el-button @click="handleReset">重置</el-button>
|
||||
</div>
|
||||
<div class="table-container">
|
||||
<div class="table-actions"><el-button type="primary" @click="handleAdd">新增记录</el-button></div>
|
||||
<el-table v-loading="loading" :data="tableData" border stripe style="width:100%">
|
||||
<el-table-column label="客户" min-width="100"><template #default="{ row }">{{ row.profile?.customer?.name || '-' }}</template></el-table-column>
|
||||
<el-table-column label="类型" width="100" align="center"><template #default="{ row }">{{ typeMap[row.type] || '-' }}</template></el-table-column>
|
||||
<el-table-column label="护士" min-width="100"><template #default="{ row }">{{ row.nurse?.name || '-' }}</template></el-table-column>
|
||||
<el-table-column prop="remark" label="备注" min-width="200" show-overflow-tooltip />
|
||||
<el-table-column prop="recorded_at" label="记录时间" min-width="160" />
|
||||
<el-table-column label="操作" width="120" fixed="right" align="center">
|
||||
<template #default="{ row }"><el-button size="small" type="primary" link @click="handleEdit(row)">编辑</el-button></template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<el-pagination v-model:current-page="pagination.page" v-model:page-size="pagination.per_page" :total="total" :page-sizes="[10,20,50]" layout="total,sizes,prev,pager,next,jumper" background @current-change="handlePageChange" @size-change="handleSizeChange" />
|
||||
</div>
|
||||
<el-dialog v-model="dialogVisible" :title="isEdit?'编辑记录':'新增记录'" width="550px" destroy-on-close>
|
||||
<el-form :model="form" label-width="80px">
|
||||
<el-form-item label="护理档案"><el-select v-model="form.care_profile_id" filterable style="width:100%"><el-option v-for="p in profiles" :key="p.id" :label="`${p.customer?.name||''} - ${p.type===1?'妈妈':'宝宝'}`" :value="p.id" /></el-select></el-form-item>
|
||||
<el-form-item label="类型"><el-select v-model="form.type" style="width:100%"><el-option v-for="(v,k) in typeMap" :key="k" :label="v" :value="Number(k)" /></el-select></el-form-item>
|
||||
<el-form-item label="备注"><el-input v-model="form.remark" type="textarea" :rows="3" /></el-form-item>
|
||||
</el-form>
|
||||
<template #footer><el-button @click="dialogVisible=false">取消</el-button><el-button type="primary" :loading="submitLoading" @click="handleSubmit">确定</el-button></template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,94 @@
|
||||
<script setup>
|
||||
import { ref, reactive, onMounted } from 'vue'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import { channelApi } from '@/api/crm.js'
|
||||
|
||||
const tableData = ref([])
|
||||
const total = ref(0)
|
||||
const loading = ref(false)
|
||||
const dialogVisible = ref(false)
|
||||
const submitLoading = ref(false)
|
||||
|
||||
const searchForm = reactive({ name: '', type: '' })
|
||||
const pagination = reactive({ page: 1, per_page: 20 })
|
||||
|
||||
const formRef = ref(null)
|
||||
const form = reactive({ id: null, name: '', type: 1, status: 1 })
|
||||
const isEdit = ref(false)
|
||||
const formRules = { name: [{ required: true, message: '请输入渠道名称', trigger: 'blur' }] }
|
||||
const typeMap = { 1: '线上', 2: '线下', 3: '转介绍' }
|
||||
|
||||
async function fetchList() {
|
||||
loading.value = true
|
||||
try {
|
||||
const res = await channelApi.getList({ ...searchForm, ...pagination })
|
||||
tableData.value = res.data?.list || res.data?.data || []
|
||||
total.value = res.data?.total || 0
|
||||
} finally { loading.value = false }
|
||||
}
|
||||
|
||||
function handleSearch() { pagination.page = 1; fetchList() }
|
||||
function handleReset() { Object.assign(searchForm, { name: '', type: '' }); handleSearch() }
|
||||
|
||||
function handleAdd() { isEdit.value = false; Object.assign(form, { id: null, name: '', type: 1, status: 1 }); dialogVisible.value = true }
|
||||
async function handleEdit(row) { isEdit.value = true; Object.assign(form, { ...row }); dialogVisible.value = true }
|
||||
|
||||
async function handleSubmit() {
|
||||
if (!formRef.value) return
|
||||
await formRef.value.validate(async (valid) => {
|
||||
if (!valid) return
|
||||
submitLoading.value = true
|
||||
try {
|
||||
if (isEdit.value) { await channelApi.update(form.id, form); ElMessage.success('更新成功') }
|
||||
else { await channelApi.create(form); ElMessage.success('创建成功') }
|
||||
dialogVisible.value = false; fetchList()
|
||||
} finally { submitLoading.value = false }
|
||||
})
|
||||
}
|
||||
|
||||
async function handleDelete(row) {
|
||||
await ElMessageBox.confirm(`确定删除渠道「${row.name}」吗？`, '删除确认', { type: 'warning' })
|
||||
await channelApi.delete(row.id); ElMessage.success('删除成功'); fetchList()
|
||||
}
|
||||
|
||||
function handlePageChange(val) { pagination.page = val; fetchList() }
|
||||
function handleSizeChange(val) { pagination.per_page = val; pagination.page = 1; fetchList() }
|
||||
onMounted(() => fetchList())
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="page-container">
|
||||
<div class="search-bar">
|
||||
<el-input v-model="searchForm.name" placeholder="渠道名称" style="width:180px" clearable @keydown.enter="handleSearch" />
|
||||
<el-select v-model="searchForm.type" placeholder="类型" clearable style="width:120px">
|
||||
<el-option v-for="(v,k) in typeMap" :key="k" :label="v" :value="Number(k)" />
|
||||
</el-select>
|
||||
<el-button type="primary" @click="handleSearch">查询</el-button>
|
||||
<el-button @click="handleReset">重置</el-button>
|
||||
</div>
|
||||
<div class="table-container">
|
||||
<div class="table-actions"><el-button type="primary" @click="handleAdd">新增渠道</el-button></div>
|
||||
<el-table v-loading="loading" :data="tableData" border stripe style="width:100%">
|
||||
<el-table-column prop="name" label="渠道名称" min-width="150" />
|
||||
<el-table-column label="类型" width="100" align="center"><template #default="{ row }">{{ typeMap[row.type] }}</template></el-table-column>
|
||||
<el-table-column label="状态" width="80" align="center"><template #default="{ row }"><el-tag :type="row.status?'success':'danger'" size="small">{{ row.status?'启用':'禁用' }}</el-tag></template></el-table-column>
|
||||
<el-table-column prop="created_at" label="创建时间" min-width="160" />
|
||||
<el-table-column label="操作" width="160" fixed="right" align="center">
|
||||
<template #default="{ row }">
|
||||
<el-button size="small" type="primary" link @click="handleEdit(row)">编辑</el-button>
|
||||
<el-button size="small" type="danger" link @click="handleDelete(row)">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<el-pagination v-model:current-page="pagination.page" v-model:page-size="pagination.per_page" :total="total" :page-sizes="[10,20,50]" layout="total,sizes,prev,pager,next,jumper" background @current-change="handlePageChange" @size-change="handleSizeChange" />
|
||||
</div>
|
||||
<el-dialog v-model="dialogVisible" :title="isEdit?'编辑渠道':'新增渠道'" width="450px" destroy-on-close>
|
||||
<el-form ref="formRef" :model="form" :rules="formRules" label-width="80px">
|
||||
<el-form-item label="渠道名称" prop="name"><el-input v-model="form.name" /></el-form-item>
|
||||
<el-form-item label="类型"><el-select v-model="form.type" style="width:100%"><el-option v-for="(v,k) in typeMap" :key="k" :label="v" :value="Number(k)" /></el-select></el-form-item>
|
||||
<el-form-item label="状态"><el-switch v-model="form.status" :active-value="1" :inactive-value="0" /></el-form-item>
|
||||
</el-form>
|
||||
<template #footer><el-button @click="dialogVisible=false">取消</el-button><el-button type="primary" :loading="submitLoading" @click="handleSubmit">确定</el-button></template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,116 @@
|
||||
<script setup>
|
||||
import { ref, reactive, onMounted } from 'vue'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import { complaintApi, customerApi } from '@/api/crm.js'
|
||||
|
||||
const tableData = ref([])
|
||||
const total = ref(0)
|
||||
const loading = ref(false)
|
||||
const dialogVisible = ref(false)
|
||||
const submitLoading = ref(false)
|
||||
const handleVisible = ref(false)
|
||||
const currentComplaint = ref(null)
|
||||
const customers = ref([])
|
||||
|
||||
const searchForm = reactive({ customer_id: '', type: '', status: '' })
|
||||
const pagination = reactive({ page: 1, per_page: 20 })
|
||||
|
||||
const formRef = ref(null)
|
||||
const form = reactive({ id: null, customer_id: '', type: 1, content: '', images: [] })
|
||||
const isEdit = ref(false)
|
||||
const handleForm = reactive({ handle_result: '', status: 2 })
|
||||
|
||||
const typeMap = { 1: '服务', 2: '膳食', 3: '环境', 4: '其他' }
|
||||
const statusMap = { 0: '待处理', 1: '处理中', 2: '已解决', 3: '已关闭' }
|
||||
const statusType = { 0: 'danger', 1: 'warning', 2: 'success', 3: 'info' }
|
||||
|
||||
async function fetchList() {
|
||||
loading.value = true
|
||||
try {
|
||||
const res = await complaintApi.getList({ ...searchForm, ...pagination })
|
||||
tableData.value = res.data?.list || res.data?.data || []
|
||||
total.value = res.data?.total || 0
|
||||
} finally { loading.value = false }
|
||||
}
|
||||
|
||||
async function fetchCustomers() {
|
||||
try { const res = await customerApi.getList({ per_page: 500 }); customers.value = res.data?.list || res.data?.data || [] } catch {}
|
||||
}
|
||||
|
||||
function handleSearch() { pagination.page = 1; fetchList() }
|
||||
function handleReset() { Object.assign(searchForm, { customer_id: '', type: '', status: '' }); handleSearch() }
|
||||
function handleAdd() { isEdit.value = false; Object.assign(form, { id: null, customer_id: '', type: 1, content: '', images: [] }); dialogVisible.value = true }
|
||||
|
||||
async function handleSubmit() {
|
||||
if (!formRef.value) return
|
||||
await formRef.value.validate(async (valid) => {
|
||||
if (!valid) return
|
||||
submitLoading.value = true
|
||||
try {
|
||||
if (isEdit.value) { await complaintApi.update(form.id, form) } else { await complaintApi.create(form) }
|
||||
ElMessage.success('提交成功'); dialogVisible.value = false; fetchList()
|
||||
} finally { submitLoading.value = false }
|
||||
})
|
||||
}
|
||||
|
||||
function openHandle(row) { currentComplaint.value = row; Object.assign(handleForm, { handle_result: '', status: 2 }); handleVisible.value = true }
|
||||
async function submitHandle() {
|
||||
if (!handleForm.handle_result) { ElMessage.warning('请输入处理结果'); return }
|
||||
await complaintApi.handle(currentComplaint.value.id, handleForm)
|
||||
ElMessage.success('处理完成'); handleVisible.value = false; fetchList()
|
||||
}
|
||||
|
||||
async function handleDelete(row) {
|
||||
await ElMessageBox.confirm('确定删除该投诉吗？', '删除确认', { type: 'warning' })
|
||||
await complaintApi.delete(row.id); ElMessage.success('删除成功'); fetchList()
|
||||
}
|
||||
|
||||
function handlePageChange(val) { pagination.page = val; fetchList() }
|
||||
function handleSizeChange(val) { pagination.per_page = val; pagination.page = 1; fetchList() }
|
||||
onMounted(() => { fetchList(); fetchCustomers() })
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="page-container">
|
||||
<div class="search-bar">
|
||||
<el-select v-model="searchForm.customer_id" placeholder="选择客户" clearable filterable style="width:180px"><el-option v-for="c in customers" :key="c.id" :label="c.name" :value="c.id" /></el-select>
|
||||
<el-select v-model="searchForm.type" placeholder="类型" clearable style="width:120px"><el-option v-for="(v,k) in typeMap" :key="k" :label="v" :value="Number(k)" /></el-select>
|
||||
<el-select v-model="searchForm.status" placeholder="状态" clearable style="width:120px"><el-option v-for="(v,k) in statusMap" :key="k" :label="v" :value="Number(k)" /></el-select>
|
||||
<el-button type="primary" @click="handleSearch">查询</el-button>
|
||||
<el-button @click="handleReset">重置</el-button>
|
||||
</div>
|
||||
<div class="table-container">
|
||||
<div class="table-actions"><el-button type="primary" @click="handleAdd">新增投诉</el-button></div>
|
||||
<el-table v-loading="loading" :data="tableData" border stripe style="width:100%">
|
||||
<el-table-column label="客户" min-width="100"><template #default="{ row }">{{ row.customer?.name || '-' }}</template></el-table-column>
|
||||
<el-table-column label="类型" width="80" align="center"><template #default="{ row }">{{ typeMap[row.type] }}</template></el-table-column>
|
||||
<el-table-column prop="content" label="内容" min-width="200" show-overflow-tooltip />
|
||||
<el-table-column label="状态" width="90" align="center"><template #default="{ row }"><el-tag :type="statusType[row.status]" size="small">{{ statusMap[row.status] }}</el-tag></template></el-table-column>
|
||||
<el-table-column label="处理人" min-width="100"><template #default="{ row }">{{ row.handler?.name || '-' }}</template></el-table-column>
|
||||
<el-table-column prop="created_at" label="创建时间" min-width="160" />
|
||||
<el-table-column label="操作" width="160" fixed="right" align="center">
|
||||
<template #default="{ row }">
|
||||
<el-button v-if="row.status<2" size="small" type="success" link @click="openHandle(row)">处理</el-button>
|
||||
<el-button size="small" type="danger" link @click="handleDelete(row)">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<el-pagination v-model:current-page="pagination.page" v-model:page-size="pagination.per_page" :total="total" :page-sizes="[10,20,50]" layout="total,sizes,prev,pager,next,jumper" background @current-change="handlePageChange" @size-change="handleSizeChange" />
|
||||
</div>
|
||||
<el-dialog v-model="dialogVisible" :title="isEdit?'编辑投诉':'新增投诉'" width="550px" destroy-on-close>
|
||||
<el-form ref="formRef" :model="form" :rules="{ customer_id:[{required:true,message:'请选择客户'}], content:[{required:true,message:'请输入内容'}] }" label-width="80px">
|
||||
<el-form-item label="客户" prop="customer_id"><el-select v-model="form.customer_id" filterable style="width:100%"><el-option v-for="c in customers" :key="c.id" :label="c.name" :value="c.id" /></el-select></el-form-item>
|
||||
<el-form-item label="类型"><el-select v-model="form.type" style="width:100%"><el-option v-for="(v,k) in typeMap" :key="k" :label="v" :value="Number(k)" /></el-select></el-form-item>
|
||||
<el-form-item label="内容" prop="content"><el-input v-model="form.content" type="textarea" :rows="4" /></el-form-item>
|
||||
</el-form>
|
||||
<template #footer><el-button @click="dialogVisible=false">取消</el-button><el-button type="primary" :loading="submitLoading" @click="handleSubmit">确定</el-button></template>
|
||||
</el-dialog>
|
||||
<el-dialog v-model="handleVisible" title="处理投诉" width="500px" destroy-on-close>
|
||||
<el-form label-width="80px">
|
||||
<el-form-item label="处理结果"><el-input v-model="handleForm.handle_result" type="textarea" :rows="4" /></el-form-item>
|
||||
<el-form-item label="状态"><el-radio-group v-model="handleForm.status"><el-radio :value="2">已解决</el-radio><el-radio :value="3">已关闭</el-radio></el-radio-group></el-form-item>
|
||||
</el-form>
|
||||
<template #footer><el-button @click="handleVisible=false">取消</el-button><el-button type="primary" @click="submitHandle">确定</el-button></template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,184 @@
|
||||
<script setup>
|
||||
import { ref, reactive, onMounted } from 'vue'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import { contractApi, customerApi } from '@/api/crm.js'
|
||||
|
||||
const tableData = ref([])
|
||||
const total = ref(0)
|
||||
const loading = ref(false)
|
||||
const dialogVisible = ref(false)
|
||||
const dialogTitle = ref('新增合同')
|
||||
const submitLoading = ref(false)
|
||||
const auditVisible = ref(false)
|
||||
const currentContract = ref(null)
|
||||
const customers = ref([])
|
||||
|
||||
const searchForm = reactive({ contract_no: '', customer_id: '', status: '' })
|
||||
const pagination = reactive({ page: 1, per_page: 20 })
|
||||
|
||||
const formRef = ref(null)
|
||||
const form = reactive({
|
||||
id: null, customer_id: '', contract_no: '', package_name: '',
|
||||
total_amount: 0, discount_amount: 0, actual_amount: 0,
|
||||
days: '', check_in_date: '', check_out_date: '', remark: ''
|
||||
})
|
||||
const isEdit = ref(false)
|
||||
const formRules = {
|
||||
customer_id: [{ required: true, message: '请选择客户', trigger: 'change' }],
|
||||
contract_no: [{ required: true, message: '请输入合同编号', trigger: 'blur' }],
|
||||
total_amount: [{ required: true, message: '请输入总金额', trigger: 'blur' }],
|
||||
actual_amount: [{ required: true, message: '请输入实付金额', trigger: 'blur' }]
|
||||
}
|
||||
|
||||
const auditForm = reactive({ status: 1, audit_remark: '' })
|
||||
const statusMap = { 0: '待审核', 1: '已通过', 2: '无效', 3: '已退' }
|
||||
const statusType = { 0: 'warning', 1: 'success', 2: 'danger', 3: 'info' }
|
||||
|
||||
async function fetchList() {
|
||||
loading.value = true
|
||||
try {
|
||||
const res = await contractApi.getList({ ...searchForm, ...pagination })
|
||||
tableData.value = res.data?.list || res.data?.data || []
|
||||
total.value = res.data?.total || 0
|
||||
} finally { loading.value = false }
|
||||
}
|
||||
|
||||
async function fetchCustomers() {
|
||||
try {
|
||||
const res = await customerApi.getList({ per_page: 500 })
|
||||
customers.value = res.data?.list || res.data?.data || []
|
||||
} catch {}
|
||||
}
|
||||
|
||||
function handleSearch() { pagination.page = 1; fetchList() }
|
||||
function handleReset() { Object.assign(searchForm, { contract_no: '', customer_id: '', status: '' }); handleSearch() }
|
||||
|
||||
function handleAdd() {
|
||||
isEdit.value = false; dialogTitle.value = '新增合同'
|
||||
Object.assign(form, { id: null, customer_id: '', contract_no: '', package_name: '', total_amount: 0, discount_amount: 0, actual_amount: 0, days: '', check_in_date: '', check_out_date: '', remark: '' })
|
||||
dialogVisible.value = true
|
||||
}
|
||||
|
||||
async function handleEdit(row) {
|
||||
if (row.status !== 0) { ElMessage.warning('只能编辑待审核合同'); return }
|
||||
isEdit.value = true; dialogTitle.value = '编辑合同'
|
||||
const res = await contractApi.getDetail(row.id)
|
||||
const d = res.data
|
||||
Object.assign(form, { id: d.id, customer_id: d.customer_id, contract_no: d.contract_no, package_name: d.package_name || '', total_amount: d.total_amount, discount_amount: d.discount_amount, actual_amount: d.actual_amount, days: d.days || '', check_in_date: d.check_in_date || '', check_out_date: d.check_out_date || '', remark: d.remark || '' })
|
||||
dialogVisible.value = true
|
||||
}
|
||||
|
||||
async function handleSubmit() {
|
||||
if (!formRef.value) return
|
||||
await formRef.value.validate(async (valid) => {
|
||||
if (!valid) return
|
||||
submitLoading.value = true
|
||||
try {
|
||||
if (isEdit.value) { await contractApi.update(form.id, form); ElMessage.success('更新成功') }
|
||||
else { await contractApi.create(form); ElMessage.success('创建成功') }
|
||||
dialogVisible.value = false; fetchList()
|
||||
} finally { submitLoading.value = false }
|
||||
})
|
||||
}
|
||||
|
||||
async function handleDelete(row) {
|
||||
if (row.status !== 0) { ElMessage.warning('只能删除待审核合同'); return }
|
||||
await ElMessageBox.confirm('确定删除该合同吗？', '删除确认', { type: 'warning' })
|
||||
await contractApi.delete(row.id); ElMessage.success('删除成功'); fetchList()
|
||||
}
|
||||
|
||||
function openAudit(row) {
|
||||
currentContract.value = row
|
||||
Object.assign(auditForm, { status: 1, audit_remark: '' })
|
||||
auditVisible.value = true
|
||||
}
|
||||
|
||||
async function submitAudit() {
|
||||
await contractApi.audit(currentContract.value.id, auditForm)
|
||||
ElMessage.success('审核完成')
|
||||
auditVisible.value = false; fetchList()
|
||||
}
|
||||
|
||||
function handlePageChange(val) { pagination.page = val; fetchList() }
|
||||
function handleSizeChange(val) { pagination.per_page = val; pagination.page = 1; fetchList() }
|
||||
|
||||
onMounted(() => { fetchList(); fetchCustomers() })
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="page-container">
|
||||
<div class="search-bar">
|
||||
<el-input v-model="searchForm.contract_no" placeholder="合同编号" style="width:180px" clearable @keydown.enter="handleSearch" />
|
||||
<el-select v-model="searchForm.customer_id" placeholder="选择客户" clearable filterable style="width:180px">
|
||||
<el-option v-for="c in customers" :key="c.id" :label="`${c.name} (${c.phone})`" :value="c.id" />
|
||||
</el-select>
|
||||
<el-select v-model="searchForm.status" placeholder="状态" clearable style="width:120px">
|
||||
<el-option v-for="(v,k) in statusMap" :key="k" :label="v" :value="Number(k)" />
|
||||
</el-select>
|
||||
<el-button type="primary" @click="handleSearch">查询</el-button>
|
||||
<el-button @click="handleReset">重置</el-button>
|
||||
</div>
|
||||
|
||||
<div class="table-container">
|
||||
<div class="table-actions"><el-button type="primary" @click="handleAdd">新增合同</el-button></div>
|
||||
<el-table v-loading="loading" :data="tableData" border stripe style="width:100%">
|
||||
<el-table-column prop="contract_no" label="合同编号" min-width="150" />
|
||||
<el-table-column label="客户" min-width="100"><template #default="{ row }">{{ row.customer?.name || '-' }}</template></el-table-column>
|
||||
<el-table-column prop="package_name" label="套餐" min-width="120" />
|
||||
<el-table-column prop="actual_amount" label="实付金额" min-width="110" align="right" />
|
||||
<el-table-column prop="days" label="天数" width="70" align="center" />
|
||||
<el-table-column prop="check_in_date" label="入住日期" min-width="110" />
|
||||
<el-table-column label="状态" width="100" align="center">
|
||||
<template #default="{ row }"><el-tag :type="statusType[row.status]" size="small">{{ statusMap[row.status] }}</el-tag></template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" width="200" fixed="right" align="center">
|
||||
<template #default="{ row }">
|
||||
<el-button v-if="row.status===0" size="small" type="success" link @click="openAudit(row)">审核</el-button>
|
||||
<el-button size="small" type="primary" link @click="handleEdit(row)">编辑</el-button>
|
||||
<el-button size="small" type="danger" link @click="handleDelete(row)">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<el-pagination v-model:current-page="pagination.page" v-model:page-size="pagination.per_page" :total="total" :page-sizes="[10,20,50]" layout="total,sizes,prev,pager,next,jumper" background @current-change="handlePageChange" @size-change="handleSizeChange" />
|
||||
</div>
|
||||
|
||||
<!-- Add/Edit -->
|
||||
<el-dialog v-model="dialogVisible" :title="dialogTitle" width="700px" destroy-on-close>
|
||||
<el-form ref="formRef" :model="form" :rules="formRules" label-width="90px">
|
||||
<el-row :gutter="16">
|
||||
<el-col :span="12"><el-form-item label="客户" prop="customer_id"><el-select v-model="form.customer_id" placeholder="选择客户" filterable style="width:100%"><el-option v-for="c in customers" :key="c.id" :label="`${c.name} (${c.phone})`" :value="c.id" /></el-select></el-form-item></el-col>
|
||||
<el-col :span="12"><el-form-item label="合同编号" prop="contract_no"><el-input v-model="form.contract_no" /></el-form-item></el-col>
|
||||
<el-col :span="12"><el-form-item label="套餐名称"><el-input v-model="form.package_name" /></el-form-item></el-col>
|
||||
<el-col :span="12"><el-form-item label="天数"><el-input-number v-model="form.days" :min="1" style="width:100%" /></el-form-item></el-col>
|
||||
<el-col :span="8"><el-form-item label="总金额" prop="total_amount"><el-input-number v-model="form.total_amount" :min="0" :precision="2" style="width:100%" /></el-form-item></el-col>
|
||||
<el-col :span="8"><el-form-item label="优惠金额"><el-input-number v-model="form.discount_amount" :min="0" :precision="2" style="width:100%" /></el-form-item></el-col>
|
||||
<el-col :span="8"><el-form-item label="实付金额" prop="actual_amount"><el-input-number v-model="form.actual_amount" :min="0" :precision="2" style="width:100%" /></el-form-item></el-col>
|
||||
<el-col :span="12"><el-form-item label="入住日期"><el-date-picker v-model="form.check_in_date" type="date" value-format="YYYY-MM-DD" style="width:100%" /></el-form-item></el-col>
|
||||
<el-col :span="12"><el-form-item label="退房日期"><el-date-picker v-model="form.check_out_date" type="date" value-format="YYYY-MM-DD" style="width:100%" /></el-form-item></el-col>
|
||||
<el-col :span="24"><el-form-item label="备注"><el-input v-model="form.remark" type="textarea" :rows="2" /></el-form-item></el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<el-button @click="dialogVisible = false">取消</el-button>
|
||||
<el-button type="primary" :loading="submitLoading" @click="handleSubmit">确定</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
|
||||
<!-- Audit -->
|
||||
<el-dialog v-model="auditVisible" title="合同审核" width="450px" destroy-on-close>
|
||||
<el-form label-width="80px">
|
||||
<el-form-item label="审核结果">
|
||||
<el-radio-group v-model="auditForm.status">
|
||||
<el-radio :value="1">通过</el-radio>
|
||||
<el-radio :value="2">驳回</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="审核备注"><el-input v-model="auditForm.audit_remark" type="textarea" :rows="3" /></el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<el-button @click="auditVisible = false">取消</el-button>
|
||||
<el-button type="primary" @click="submitAudit">确定</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,190 @@
|
||||
<script setup>
|
||||
import { ref, reactive, onMounted } from 'vue'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import { customerApi } from '@/api/crm.js'
|
||||
|
||||
const tableData = ref([])
|
||||
const total = ref(0)
|
||||
const loading = ref(false)
|
||||
const dialogVisible = ref(false)
|
||||
const dialogTitle = ref('新增客户')
|
||||
const submitLoading = ref(false)
|
||||
const detailVisible = ref(false)
|
||||
const detailData = ref(null)
|
||||
|
||||
const searchForm = reactive({ name: '', phone: '', status: '' })
|
||||
const pagination = reactive({ page: 1, per_page: 20 })
|
||||
|
||||
const formRef = ref(null)
|
||||
const form = reactive({
|
||||
id: null, name: '', phone: '', id_card: '', wechat: '',
|
||||
birthday: '', expected_date: '', actual_date: '', baby_count: 1,
|
||||
tags: [], remark: '',
|
||||
families: []
|
||||
})
|
||||
const isEdit = ref(false)
|
||||
const formRules = {
|
||||
name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
|
||||
phone: [{ required: true, message: '请输入手机号', trigger: 'blur' }]
|
||||
}
|
||||
|
||||
const statusMap = { 1: '潜在', 2: '签约', 3: '在住', 4: '离店', 5: '无效' }
|
||||
const statusType = { 1: 'info', 2: 'primary', 3: 'success', 4: '', 5: 'danger' }
|
||||
|
||||
async function fetchList() {
|
||||
loading.value = true
|
||||
try {
|
||||
const res = await customerApi.getList({ ...searchForm, ...pagination })
|
||||
tableData.value = res.data?.list || res.data?.data || []
|
||||
total.value = res.data?.total || 0
|
||||
} finally { loading.value = false }
|
||||
}
|
||||
|
||||
function handleSearch() { pagination.page = 1; fetchList() }
|
||||
function handleReset() { Object.assign(searchForm, { name: '', phone: '', status: '' }); handleSearch() }
|
||||
|
||||
function handleAdd() {
|
||||
isEdit.value = false; dialogTitle.value = '新增客户'
|
||||
Object.assign(form, { id: null, name: '', phone: '', id_card: '', wechat: '', birthday: '', expected_date: '', actual_date: '', baby_count: 1, tags: [], remark: '', families: [] })
|
||||
dialogVisible.value = true
|
||||
}
|
||||
|
||||
async function handleEdit(row) {
|
||||
isEdit.value = true; dialogTitle.value = '编辑客户'
|
||||
const res = await customerApi.getDetail(row.id)
|
||||
const d = res.data
|
||||
Object.assign(form, { id: d.id, name: d.name, phone: d.phone, id_card: d.id_card || '', wechat: d.wechat || '', birthday: d.birthday || '', expected_date: d.expected_date || '', actual_date: d.actual_date || '', baby_count: d.baby_count || 1, tags: d.tags || [], remark: d.remark || '', families: d.families || [] })
|
||||
dialogVisible.value = true
|
||||
}
|
||||
|
||||
async function handleSubmit() {
|
||||
if (!formRef.value) return
|
||||
await formRef.value.validate(async (valid) => {
|
||||
if (!valid) return
|
||||
submitLoading.value = true
|
||||
try {
|
||||
if (isEdit.value) { await customerApi.update(form.id, form); ElMessage.success('更新成功') }
|
||||
else { await customerApi.create(form); ElMessage.success('创建成功') }
|
||||
dialogVisible.value = false; fetchList()
|
||||
} finally { submitLoading.value = false }
|
||||
})
|
||||
}
|
||||
|
||||
async function handleDelete(row) {
|
||||
await ElMessageBox.confirm(`确定删除客户「${row.name}」吗？`, '删除确认', { type: 'warning' })
|
||||
await customerApi.delete(row.id); ElMessage.success('删除成功'); fetchList()
|
||||
}
|
||||
|
||||
async function handleDetail(row) {
|
||||
const res = await customerApi.getDetail(row.id)
|
||||
detailData.value = res.data
|
||||
detailVisible.value = true
|
||||
}
|
||||
|
||||
function addFamily() { form.families.push({ name: '', phone: '', relation: '', is_emergency: false }) }
|
||||
function removeFamily(idx) { form.families.splice(idx, 1) }
|
||||
|
||||
function handlePageChange(val) { pagination.page = val; fetchList() }
|
||||
function handleSizeChange(val) { pagination.per_page = val; pagination.page = 1; fetchList() }
|
||||
|
||||
onMounted(() => fetchList())
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="page-container">
|
||||
<div class="search-bar">
|
||||
<el-input v-model="searchForm.name" placeholder="客户姓名" style="width:160px" clearable @keydown.enter="handleSearch" />
|
||||
<el-input v-model="searchForm.phone" placeholder="手机号" style="width:160px" clearable @keydown.enter="handleSearch" />
|
||||
<el-select v-model="searchForm.status" placeholder="状态" clearable style="width:120px">
|
||||
<el-option v-for="(v,k) in statusMap" :key="k" :label="v" :value="Number(k)" />
|
||||
</el-select>
|
||||
<el-button type="primary" @click="handleSearch">查询</el-button>
|
||||
<el-button @click="handleReset">重置</el-button>
|
||||
</div>
|
||||
|
||||
<div class="table-container">
|
||||
<div class="table-actions"><el-button type="primary" @click="handleAdd">新增客户</el-button></div>
|
||||
<el-table v-loading="loading" :data="tableData" border stripe style="width:100%">
|
||||
<el-table-column prop="name" label="姓名" min-width="100" />
|
||||
<el-table-column prop="phone" label="手机号" min-width="130" />
|
||||
<el-table-column prop="expected_date" label="预产期" min-width="110" />
|
||||
<el-table-column prop="baby_count" label="宝宝数" width="80" align="center" />
|
||||
<el-table-column label="状态" width="90" align="center">
|
||||
<template #default="{ row }">
|
||||
<el-tag :type="statusType[row.status]" size="small">{{ statusMap[row.status] }}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="负责人" min-width="100">
|
||||
<template #default="{ row }">{{ row.owner?.name || '-' }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="created_at" label="创建时间" min-width="160" />
|
||||
<el-table-column label="操作" width="220" fixed="right" align="center">
|
||||
<template #default="{ row }">
|
||||
<el-button size="small" type="primary" link @click="handleDetail(row)">详情</el-button>
|
||||
<el-button size="small" type="primary" link @click="handleEdit(row)">编辑</el-button>
|
||||
<el-button size="small" type="danger" link @click="handleDelete(row)">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<el-pagination v-model:current-page="pagination.page" v-model:page-size="pagination.per_page" :total="total" :page-sizes="[10,20,50]" layout="total,sizes,prev,pager,next,jumper" background @current-change="handlePageChange" @size-change="handleSizeChange" />
|
||||
</div>
|
||||
|
||||
<!-- Add/Edit -->
|
||||
<el-dialog v-model="dialogVisible" :title="dialogTitle" width="700px" destroy-on-close>
|
||||
<el-form ref="formRef" :model="form" :rules="formRules" label-width="80px">
|
||||
<el-row :gutter="16">
|
||||
<el-col :span="12"><el-form-item label="姓名" prop="name"><el-input v-model="form.name" /></el-form-item></el-col>
|
||||
<el-col :span="12"><el-form-item label="手机号" prop="phone"><el-input v-model="form.phone" /></el-form-item></el-col>
|
||||
<el-col :span="12"><el-form-item label="身份证"><el-input v-model="form.id_card" /></el-form-item></el-col>
|
||||
<el-col :span="12"><el-form-item label="微信号"><el-input v-model="form.wechat" /></el-form-item></el-col>
|
||||
<el-col :span="8"><el-form-item label="生日"><el-date-picker v-model="form.birthday" type="date" value-format="YYYY-MM-DD" style="width:100%" /></el-form-item></el-col>
|
||||
<el-col :span="8"><el-form-item label="预产期"><el-date-picker v-model="form.expected_date" type="date" value-format="YYYY-MM-DD" style="width:100%" /></el-form-item></el-col>
|
||||
<el-col :span="8"><el-form-item label="宝宝数"><el-input-number v-model="form.baby_count" :min="1" :max="5" /></el-form-item></el-col>
|
||||
<el-col :span="24"><el-form-item label="备注"><el-input v-model="form.remark" type="textarea" :rows="2" /></el-form-item></el-col>
|
||||
</el-row>
|
||||
<el-divider content-position="left">家属信息</el-divider>
|
||||
<div v-for="(f, idx) in form.families" :key="idx" style="margin-bottom:10px">
|
||||
<el-row :gutter="8">
|
||||
<el-col :span="5"><el-input v-model="f.name" placeholder="姓名" /></el-col>
|
||||
<el-col :span="5"><el-input v-model="f.phone" placeholder="手机号" /></el-col>
|
||||
<el-col :span="5"><el-input v-model="f.relation" placeholder="关系" /></el-col>
|
||||
<el-col :span="5"><el-checkbox v-model="f.is_emergency">紧急联系人</el-checkbox></el-col>
|
||||
<el-col :span="4"><el-button type="danger" link @click="removeFamily(idx)">移除</el-button></el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
<el-button type="primary" link @click="addFamily">+ 添加家属</el-button>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<el-button @click="dialogVisible = false">取消</el-button>
|
||||
<el-button type="primary" :loading="submitLoading" @click="handleSubmit">确定</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
|
||||
<!-- Detail -->
|
||||
<el-drawer v-model="detailVisible" title="客户详情" size="500px">
|
||||
<template v-if="detailData">
|
||||
<el-descriptions :column="2" border>
|
||||
<el-descriptions-item label="姓名">{{ detailData.name }}</el-descriptions-item>
|
||||
<el-descriptions-item label="手机号">{{ detailData.phone }}</el-descriptions-item>
|
||||
<el-descriptions-item label="微信号">{{ detailData.wechat || '-' }}</el-descriptions-item>
|
||||
<el-descriptions-item label="状态"><el-tag :type="statusType[detailData.status]" size="small">{{ statusMap[detailData.status] }}</el-tag></el-descriptions-item>
|
||||
<el-descriptions-item label="预产期">{{ detailData.expected_date || '-' }}</el-descriptions-item>
|
||||
<el-descriptions-item label="宝宝数">{{ detailData.baby_count }}</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
<h4 style="margin:16px 0 8px">家属信息</h4>
|
||||
<el-table :data="detailData.families || []" border size="small">
|
||||
<el-table-column prop="name" label="姓名" />
|
||||
<el-table-column prop="phone" label="手机号" />
|
||||
<el-table-column prop="relation" label="关系" />
|
||||
<el-table-column label="紧急联系人" width="100"><template #default="{ row }"><el-tag :type="row.is_emergency ? 'danger' : 'info'" size="small">{{ row.is_emergency ? '是' : '否' }}</el-tag></template></el-table-column>
|
||||
</el-table>
|
||||
<h4 style="margin:16px 0 8px">合同列表</h4>
|
||||
<el-table :data="detailData.contracts || []" border size="small">
|
||||
<el-table-column prop="contract_no" label="合同编号" />
|
||||
<el-table-column prop="actual_amount" label="实际金额" />
|
||||
<el-table-column prop="check_in_date" label="入住日期" />
|
||||
</el-table>
|
||||
</template>
|
||||
</el-drawer>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,251 @@
|
||||
<script setup>
|
||||
import { ref, reactive, onMounted } from 'vue'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import { leadApi, channelApi } from '@/api/crm.js'
|
||||
import { userApi } from '@/api/system.js'
|
||||
|
||||
const tableData = ref([])
|
||||
const total = ref(0)
|
||||
const loading = ref(false)
|
||||
const dialogVisible = ref(false)
|
||||
const dialogTitle = ref('新增线索')
|
||||
const submitLoading = ref(false)
|
||||
const followVisible = ref(false)
|
||||
const assignVisible = ref(false)
|
||||
const currentLead = ref(null)
|
||||
|
||||
const channels = ref([])
|
||||
const users = ref([])
|
||||
|
||||
const searchForm = reactive({ name: '', phone: '', status: '', channel_id: '' })
|
||||
const pagination = reactive({ page: 1, per_page: 20 })
|
||||
|
||||
const formRef = ref(null)
|
||||
const form = reactive({
|
||||
id: null, channel_id: '', name: '', phone: '', wechat: '',
|
||||
expected_date: '', source: '', remark: ''
|
||||
})
|
||||
const isEdit = ref(false)
|
||||
const formRules = {
|
||||
name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
|
||||
phone: [{ required: true, message: '请输入手机号', trigger: 'blur' }]
|
||||
}
|
||||
|
||||
const followForm = reactive({ type: 1, content: '', next_follow_at: '' })
|
||||
const assignForm = reactive({ owner_id: '' })
|
||||
|
||||
const statusMap = { 1: '新建', 2: '跟进中', 3: '已转化', 4: '无效' }
|
||||
const statusType = { 1: 'info', 2: 'warning', 3: 'success', 4: 'danger' }
|
||||
const followTypeMap = { 1: '电话', 2: '微信', 3: '到店', 4: '其他' }
|
||||
|
||||
async function fetchList() {
|
||||
loading.value = true
|
||||
try {
|
||||
const res = await leadApi.getList({ ...searchForm, ...pagination })
|
||||
tableData.value = res.data?.list || res.data?.data || []
|
||||
total.value = res.data?.total || 0
|
||||
} finally { loading.value = false }
|
||||
}
|
||||
|
||||
async function fetchChannels() {
|
||||
try {
|
||||
const res = await channelApi.getList({ per_page: 200 })
|
||||
channels.value = res.data?.list || res.data?.data || []
|
||||
} catch {}
|
||||
}
|
||||
|
||||
async function fetchUsers() {
|
||||
try {
|
||||
const res = await userApi.getList({ per_page: 200 })
|
||||
users.value = res.data?.list || res.data?.data || []
|
||||
} catch {}
|
||||
}
|
||||
|
||||
function handleSearch() { pagination.page = 1; fetchList() }
|
||||
function handleReset() {
|
||||
Object.assign(searchForm, { name: '', phone: '', status: '', channel_id: '' })
|
||||
handleSearch()
|
||||
}
|
||||
|
||||
function handleAdd() {
|
||||
isEdit.value = false
|
||||
dialogTitle.value = '新增线索'
|
||||
Object.assign(form, { id: null, channel_id: '', name: '', phone: '', wechat: '', expected_date: '', source: '', remark: '' })
|
||||
dialogVisible.value = true
|
||||
}
|
||||
|
||||
async function handleEdit(row) {
|
||||
isEdit.value = true
|
||||
dialogTitle.value = '编辑线索'
|
||||
const res = await leadApi.getDetail(row.id)
|
||||
const d = res.data
|
||||
Object.assign(form, { id: d.id, channel_id: d.channel_id || '', name: d.name, phone: d.phone, wechat: d.wechat || '', expected_date: d.expected_date || '', source: d.source || '', remark: d.remark || '' })
|
||||
dialogVisible.value = true
|
||||
}
|
||||
|
||||
async function handleSubmit() {
|
||||
if (!formRef.value) return
|
||||
await formRef.value.validate(async (valid) => {
|
||||
if (!valid) return
|
||||
submitLoading.value = true
|
||||
try {
|
||||
if (isEdit.value) {
|
||||
await leadApi.update(form.id, form)
|
||||
ElMessage.success('更新成功')
|
||||
} else {
|
||||
await leadApi.create(form)
|
||||
ElMessage.success('创建成功')
|
||||
}
|
||||
dialogVisible.value = false
|
||||
fetchList()
|
||||
} finally { submitLoading.value = false }
|
||||
})
|
||||
}
|
||||
|
||||
async function handleDelete(row) {
|
||||
await ElMessageBox.confirm(`确定删除线索「${row.name}」吗？`, '删除确认', { type: 'warning' })
|
||||
await leadApi.delete(row.id)
|
||||
ElMessage.success('删除成功')
|
||||
fetchList()
|
||||
}
|
||||
|
||||
function openFollow(row) {
|
||||
currentLead.value = row
|
||||
Object.assign(followForm, { type: 1, content: '', next_follow_at: '' })
|
||||
followVisible.value = true
|
||||
}
|
||||
|
||||
async function submitFollow() {
|
||||
if (!followForm.content) { ElMessage.warning('请输入跟进内容'); return }
|
||||
await leadApi.follow(currentLead.value.id, followForm)
|
||||
ElMessage.success('跟进记录已添加')
|
||||
followVisible.value = false
|
||||
fetchList()
|
||||
}
|
||||
|
||||
function openAssign(row) {
|
||||
currentLead.value = row
|
||||
assignForm.owner_id = row.owner_id || ''
|
||||
assignVisible.value = true
|
||||
}
|
||||
|
||||
async function submitAssign() {
|
||||
if (!assignForm.owner_id) { ElMessage.warning('请选择负责人'); return }
|
||||
await leadApi.assign(currentLead.value.id, assignForm)
|
||||
ElMessage.success('分配成功')
|
||||
assignVisible.value = false
|
||||
fetchList()
|
||||
}
|
||||
|
||||
function handlePageChange(val) { pagination.page = val; fetchList() }
|
||||
function handleSizeChange(val) { pagination.per_page = val; pagination.page = 1; fetchList() }
|
||||
|
||||
onMounted(() => { fetchList(); fetchChannels(); fetchUsers() })
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="page-container">
|
||||
<div class="search-bar">
|
||||
<el-input v-model="searchForm.name" placeholder="姓名" style="width:160px" clearable @keydown.enter="handleSearch" />
|
||||
<el-input v-model="searchForm.phone" placeholder="手机号" style="width:160px" clearable @keydown.enter="handleSearch" />
|
||||
<el-select v-model="searchForm.channel_id" placeholder="渠道" clearable style="width:140px">
|
||||
<el-option v-for="c in channels" :key="c.id" :label="c.name" :value="c.id" />
|
||||
</el-select>
|
||||
<el-select v-model="searchForm.status" placeholder="状态" clearable style="width:120px">
|
||||
<el-option label="新建" :value="1" /><el-option label="跟进中" :value="2" />
|
||||
<el-option label="已转化" :value="3" /><el-option label="无效" :value="4" />
|
||||
</el-select>
|
||||
<el-button type="primary" @click="handleSearch">查询</el-button>
|
||||
<el-button @click="handleReset">重置</el-button>
|
||||
</div>
|
||||
|
||||
<div class="table-container">
|
||||
<div class="table-actions">
|
||||
<el-button type="primary" @click="handleAdd">新增线索</el-button>
|
||||
</div>
|
||||
<el-table v-loading="loading" :data="tableData" border stripe style="width:100%">
|
||||
<el-table-column prop="name" label="姓名" min-width="100" />
|
||||
<el-table-column prop="phone" label="手机号" min-width="130" />
|
||||
<el-table-column label="渠道" min-width="100">
|
||||
<template #default="{ row }">{{ row.channel?.name || '-' }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="expected_date" label="预产期" min-width="110" />
|
||||
<el-table-column label="状态" width="100" align="center">
|
||||
<template #default="{ row }">
|
||||
<el-tag :type="statusType[row.status]" size="small">{{ statusMap[row.status] }}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="负责人" min-width="100">
|
||||
<template #default="{ row }">{{ row.owner?.name || '-' }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="created_at" label="创建时间" min-width="160" />
|
||||
<el-table-column label="操作" width="260" fixed="right" align="center">
|
||||
<template #default="{ row }">
|
||||
<el-button size="small" type="primary" link @click="handleEdit(row)">编辑</el-button>
|
||||
<el-button size="small" type="success" link @click="openFollow(row)">跟进</el-button>
|
||||
<el-button size="small" type="warning" link @click="openAssign(row)">分配</el-button>
|
||||
<el-button size="small" type="danger" link @click="handleDelete(row)">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<el-pagination v-model:current-page="pagination.page" v-model:page-size="pagination.per_page" :total="total" :page-sizes="[10,20,50]" layout="total,sizes,prev,pager,next,jumper" background @current-change="handlePageChange" @size-change="handleSizeChange" />
|
||||
</div>
|
||||
|
||||
<!-- Add/Edit -->
|
||||
<el-dialog v-model="dialogVisible" :title="dialogTitle" width="600px" destroy-on-close>
|
||||
<el-form ref="formRef" :model="form" :rules="formRules" label-width="80px">
|
||||
<el-row :gutter="16">
|
||||
<el-col :span="12"><el-form-item label="姓名" prop="name"><el-input v-model="form.name" /></el-form-item></el-col>
|
||||
<el-col :span="12"><el-form-item label="手机号" prop="phone"><el-input v-model="form.phone" /></el-form-item></el-col>
|
||||
<el-col :span="12"><el-form-item label="微信号"><el-input v-model="form.wechat" /></el-form-item></el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="渠道">
|
||||
<el-select v-model="form.channel_id" placeholder="选择渠道" clearable style="width:100%">
|
||||
<el-option v-for="c in channels" :key="c.id" :label="c.name" :value="c.id" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12"><el-form-item label="预产期"><el-date-picker v-model="form.expected_date" type="date" value-format="YYYY-MM-DD" style="width:100%" /></el-form-item></el-col>
|
||||
<el-col :span="12"><el-form-item label="来源"><el-input v-model="form.source" /></el-form-item></el-col>
|
||||
<el-col :span="24"><el-form-item label="备注"><el-input v-model="form.remark" type="textarea" :rows="2" /></el-form-item></el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<el-button @click="dialogVisible = false">取消</el-button>
|
||||
<el-button type="primary" :loading="submitLoading" @click="handleSubmit">确定</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
|
||||
<!-- Follow -->
|
||||
<el-dialog v-model="followVisible" title="添加跟进" width="500px" destroy-on-close>
|
||||
<el-form label-width="80px">
|
||||
<el-form-item label="跟进方式">
|
||||
<el-select v-model="followForm.type" style="width:100%">
|
||||
<el-option v-for="(v,k) in followTypeMap" :key="k" :label="v" :value="Number(k)" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="跟进内容"><el-input v-model="followForm.content" type="textarea" :rows="3" /></el-form-item>
|
||||
<el-form-item label="下次跟进"><el-date-picker v-model="followForm.next_follow_at" type="datetime" value-format="YYYY-MM-DD HH:mm:ss" style="width:100%" /></el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<el-button @click="followVisible = false">取消</el-button>
|
||||
<el-button type="primary" @click="submitFollow">提交</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
|
||||
<!-- Assign -->
|
||||
<el-dialog v-model="assignVisible" title="分配负责人" width="400px" destroy-on-close>
|
||||
<el-form label-width="80px">
|
||||
<el-form-item label="负责人">
|
||||
<el-select v-model="assignForm.owner_id" placeholder="选择负责人" filterable style="width:100%">
|
||||
<el-option v-for="u in users" :key="u.id" :label="u.name" :value="u.id" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<el-button @click="assignVisible = false">取消</el-button>
|
||||
<el-button type="primary" @click="submitAssign">确定</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,104 @@
|
||||
<script setup>
|
||||
import { ref, reactive, onMounted } from 'vue'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import { dailyMealPlanApi } from '@/api/meal.js'
|
||||
import { customerApi } from '@/api/crm.js'
|
||||
|
||||
const tableData = ref([])
|
||||
const total = ref(0)
|
||||
const loading = ref(false)
|
||||
const dialogVisible = ref(false)
|
||||
const submitLoading = ref(false)
|
||||
const customers = ref([])
|
||||
|
||||
const searchForm = reactive({ customer_id: '', plan_date: '', meal_type: '', status: '' })
|
||||
const pagination = reactive({ page: 1, per_page: 30 })
|
||||
|
||||
const form = reactive({ id: null, customer_id: '', plan_date: '', meal_type: 1, dishes: [], special_note: '' })
|
||||
const isEdit = ref(false)
|
||||
|
||||
const mealTypeMap = { 1: '早餐', 2: '午餐', 3: '下午茶', 4: '晚餐', 5: '宵夜' }
|
||||
const statusMap = { 0: '待备餐', 1: '已备餐', 2: '已送达', 3: '未用' }
|
||||
const statusType = { 0: 'info', 1: 'warning', 2: 'success', 3: 'danger' }
|
||||
|
||||
async function fetchList() {
|
||||
loading.value = true
|
||||
try { const res = await dailyMealPlanApi.getList({ ...searchForm, ...pagination }); tableData.value = res.data?.list || res.data?.data || []; total.value = res.data?.total || 0 } finally { loading.value = false }
|
||||
}
|
||||
|
||||
async function fetchCustomers() { try { const res = await customerApi.getList({ per_page: 500, status: 3 }); customers.value = res.data?.list || res.data?.data || [] } catch {} }
|
||||
|
||||
function handleSearch() { pagination.page = 1; fetchList() }
|
||||
function handleReset() { Object.assign(searchForm, { customer_id: '', plan_date: '', meal_type: '', status: '' }); handleSearch() }
|
||||
function handleAdd() { isEdit.value = false; Object.assign(form, { id: null, customer_id: '', plan_date: '', meal_type: 1, dishes: [], special_note: '' }); dialogVisible.value = true }
|
||||
|
||||
async function handleSubmit() {
|
||||
submitLoading.value = true
|
||||
try {
|
||||
if (isEdit.value) { await dailyMealPlanApi.update(form.id, form) } else { await dailyMealPlanApi.create(form) }
|
||||
ElMessage.success(isEdit.value ? '更新成功' : '创建成功'); dialogVisible.value = false; fetchList()
|
||||
} finally { submitLoading.value = false }
|
||||
}
|
||||
|
||||
async function handleDeliver(row) {
|
||||
await ElMessageBox.confirm('确认已送达？', '送达确认', { type: 'info' })
|
||||
await dailyMealPlanApi.deliver(row.id); ElMessage.success('已标记送达'); fetchList()
|
||||
}
|
||||
|
||||
async function handleStatusChange(row, status) {
|
||||
await dailyMealPlanApi.updateStatus(row.id, { status }); ElMessage.success('状态更新成功'); fetchList()
|
||||
}
|
||||
|
||||
async function handleDelete(row) {
|
||||
await ElMessageBox.confirm('确定删除该排餐吗？', '删除确认', { type: 'warning' })
|
||||
await dailyMealPlanApi.delete(row.id); ElMessage.success('删除成功'); fetchList()
|
||||
}
|
||||
|
||||
function handlePageChange(val) { pagination.page = val; fetchList() }
|
||||
function handleSizeChange(val) { pagination.per_page = val; pagination.page = 1; fetchList() }
|
||||
onMounted(() => { fetchList(); fetchCustomers() })
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="page-container">
|
||||
<div class="search-bar">
|
||||
<el-select v-model="searchForm.customer_id" placeholder="选择客户" clearable filterable style="width:180px"><el-option v-for="c in customers" :key="c.id" :label="c.name" :value="c.id" /></el-select>
|
||||
<el-date-picker v-model="searchForm.plan_date" type="date" value-format="YYYY-MM-DD" placeholder="日期" style="width:160px" />
|
||||
<el-select v-model="searchForm.meal_type" placeholder="餐型" clearable style="width:120px"><el-option v-for="(v,k) in mealTypeMap" :key="k" :label="v" :value="Number(k)" /></el-select>
|
||||
<el-select v-model="searchForm.status" placeholder="状态" clearable style="width:120px"><el-option v-for="(v,k) in statusMap" :key="k" :label="v" :value="Number(k)" /></el-select>
|
||||
<el-button type="primary" @click="handleSearch">查询</el-button>
|
||||
<el-button @click="handleReset">重置</el-button>
|
||||
</div>
|
||||
<div class="table-container">
|
||||
<div class="table-actions"><el-button type="primary" @click="handleAdd">新增排餐</el-button></div>
|
||||
<el-table v-loading="loading" :data="tableData" border stripe style="width:100%">
|
||||
<el-table-column label="客户" min-width="100"><template #default="{ row }">{{ row.customer?.name || '-' }}</template></el-table-column>
|
||||
<el-table-column prop="plan_date" label="日期" width="110" />
|
||||
<el-table-column label="餐型" width="80" align="center"><template #default="{ row }">{{ mealTypeMap[row.meal_type] }}</template></el-table-column>
|
||||
<el-table-column prop="special_note" label="特殊备注" min-width="150" show-overflow-tooltip />
|
||||
<el-table-column label="评分" width="70" align="center"><template #default="{ row }">{{ row.review?.score || '-' }}</template></el-table-column>
|
||||
<el-table-column label="状态" width="90" align="center"><template #default="{ row }"><el-tag :type="statusType[row.status]" size="small">{{ statusMap[row.status] }}</el-tag></template></el-table-column>
|
||||
<el-table-column label="操作" width="220" fixed="right" align="center">
|
||||
<template #default="{ row }">
|
||||
<el-button v-if="row.status<2" size="small" type="success" link @click="handleDeliver(row)">送达</el-button>
|
||||
<el-dropdown v-if="row.status<2" trigger="click" @command="(cmd) => handleStatusChange(row, cmd)" style="margin:0 8px">
|
||||
<el-button size="small" type="warning" link>状态</el-button>
|
||||
<template #dropdown><el-dropdown-menu><el-dropdown-item v-for="(v,k) in statusMap" :key="k" :command="Number(k)">{{ v }}</el-dropdown-item></el-dropdown-menu></template>
|
||||
</el-dropdown>
|
||||
<el-button v-if="row.status===0" size="small" type="danger" link @click="handleDelete(row)">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<el-pagination v-model:current-page="pagination.page" v-model:page-size="pagination.per_page" :total="total" :page-sizes="[10,30,50]" layout="total,sizes,prev,pager,next,jumper" background @current-change="handlePageChange" @size-change="handleSizeChange" />
|
||||
</div>
|
||||
<el-dialog v-model="dialogVisible" :title="isEdit?'编辑排餐':'新增排餐'" width="550px" destroy-on-close>
|
||||
<el-form :model="form" label-width="80px">
|
||||
<el-form-item label="客户"><el-select v-model="form.customer_id" filterable style="width:100%"><el-option v-for="c in customers" :key="c.id" :label="c.name" :value="c.id" /></el-select></el-form-item>
|
||||
<el-form-item label="日期"><el-date-picker v-model="form.plan_date" type="date" value-format="YYYY-MM-DD" style="width:100%" /></el-form-item>
|
||||
<el-form-item label="餐型"><el-select v-model="form.meal_type" style="width:100%"><el-option v-for="(v,k) in mealTypeMap" :key="k" :label="v" :value="Number(k)" /></el-select></el-form-item>
|
||||
<el-form-item label="特殊备注"><el-input v-model="form.special_note" type="textarea" :rows="3" placeholder="如：忌辣、素食等" /></el-form-item>
|
||||
</el-form>
|
||||
<template #footer><el-button @click="dialogVisible=false">取消</el-button><el-button type="primary" :loading="submitLoading" @click="handleSubmit">确定</el-button></template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,90 @@
|
||||
<script setup>
|
||||
import { ref, reactive, onMounted } from 'vue'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import { dishApi } from '@/api/meal.js'
|
||||
|
||||
const tableData = ref([])
|
||||
const total = ref(0)
|
||||
const loading = ref(false)
|
||||
const dialogVisible = ref(false)
|
||||
const submitLoading = ref(false)
|
||||
|
||||
const searchForm = reactive({ name: '', category: '', status: '' })
|
||||
const pagination = reactive({ page: 1, per_page: 20 })
|
||||
|
||||
const formRef = ref(null)
|
||||
const form = reactive({ id: null, name: '', category: '', description: '', image: '', ingredients: [], contraindications: [], price: 0, status: 1 })
|
||||
const isEdit = ref(false)
|
||||
const formRules = { name: [{ required: true, message: '请输入菜品名称', trigger: 'blur' }] }
|
||||
const categories = ['汤', '主食', '配菜', '甜品', '水果', '饮品']
|
||||
|
||||
async function fetchList() {
|
||||
loading.value = true
|
||||
try { const res = await dishApi.getList({ ...searchForm, ...pagination }); tableData.value = res.data?.list || res.data?.data || []; total.value = res.data?.total || 0 } finally { loading.value = false }
|
||||
}
|
||||
|
||||
function handleSearch() { pagination.page = 1; fetchList() }
|
||||
function handleReset() { Object.assign(searchForm, { name: '', category: '', status: '' }); handleSearch() }
|
||||
function handleAdd() { isEdit.value = false; Object.assign(form, { id: null, name: '', category: '', description: '', image: '', ingredients: [], contraindications: [], price: 0, status: 1 }); dialogVisible.value = true }
|
||||
async function handleEdit(row) { isEdit.value = true; const res = await dishApi.getDetail(row.id); const d = res.data; Object.assign(form, { id: d.id, name: d.name, category: d.category || '', description: d.description || '', image: d.image || '', ingredients: d.ingredients || [], contraindications: d.contraindications || [], price: d.price || 0, status: d.status }); dialogVisible.value = true }
|
||||
|
||||
async function handleSubmit() {
|
||||
if (!formRef.value) return
|
||||
await formRef.value.validate(async (valid) => {
|
||||
if (!valid) return
|
||||
submitLoading.value = true
|
||||
try {
|
||||
if (isEdit.value) { await dishApi.update(form.id, form) } else { await dishApi.create(form) }
|
||||
ElMessage.success(isEdit.value ? '更新成功' : '创建成功'); dialogVisible.value = false; fetchList()
|
||||
} finally { submitLoading.value = false }
|
||||
})
|
||||
}
|
||||
|
||||
async function handleDelete(row) {
|
||||
await ElMessageBox.confirm(`确定删除菜品「${row.name}」吗？`, '删除确认', { type: 'warning' })
|
||||
await dishApi.delete(row.id); ElMessage.success('删除成功'); fetchList()
|
||||
}
|
||||
|
||||
function handlePageChange(val) { pagination.page = val; fetchList() }
|
||||
function handleSizeChange(val) { pagination.per_page = val; pagination.page = 1; fetchList() }
|
||||
onMounted(() => fetchList())
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="page-container">
|
||||
<div class="search-bar">
|
||||
<el-input v-model="searchForm.name" placeholder="菜品名称" style="width:180px" clearable @keydown.enter="handleSearch" />
|
||||
<el-select v-model="searchForm.category" placeholder="分类" clearable style="width:120px"><el-option v-for="c in categories" :key="c" :label="c" :value="c" /></el-select>
|
||||
<el-select v-model="searchForm.status" placeholder="状态" clearable style="width:120px"><el-option label="启用" :value="1" /><el-option label="禁用" :value="0" /></el-select>
|
||||
<el-button type="primary" @click="handleSearch">查询</el-button>
|
||||
<el-button @click="handleReset">重置</el-button>
|
||||
</div>
|
||||
<div class="table-container">
|
||||
<div class="table-actions"><el-button type="primary" @click="handleAdd">新增菜品</el-button></div>
|
||||
<el-table v-loading="loading" :data="tableData" border stripe style="width:100%">
|
||||
<el-table-column prop="name" label="菜品名称" min-width="120" />
|
||||
<el-table-column prop="category" label="分类" width="80" align="center" />
|
||||
<el-table-column prop="price" label="价格" width="90" align="right" />
|
||||
<el-table-column prop="description" label="描述" min-width="200" show-overflow-tooltip />
|
||||
<el-table-column label="状态" width="80" align="center"><template #default="{ row }"><el-tag :type="row.status?'success':'danger'" size="small">{{ row.status?'启用':'禁用' }}</el-tag></template></el-table-column>
|
||||
<el-table-column label="操作" width="160" fixed="right" align="center">
|
||||
<template #default="{ row }">
|
||||
<el-button size="small" type="primary" link @click="handleEdit(row)">编辑</el-button>
|
||||
<el-button size="small" type="danger" link @click="handleDelete(row)">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<el-pagination v-model:current-page="pagination.page" v-model:page-size="pagination.per_page" :total="total" :page-sizes="[10,20,50]" layout="total,sizes,prev,pager,next,jumper" background @current-change="handlePageChange" @size-change="handleSizeChange" />
|
||||
</div>
|
||||
<el-dialog v-model="dialogVisible" :title="isEdit?'编辑菜品':'新增菜品'" width="550px" destroy-on-close>
|
||||
<el-form ref="formRef" :model="form" :rules="formRules" label-width="80px">
|
||||
<el-form-item label="菜品名称" prop="name"><el-input v-model="form.name" /></el-form-item>
|
||||
<el-form-item label="分类"><el-select v-model="form.category" style="width:100%"><el-option v-for="c in categories" :key="c" :label="c" :value="c" /></el-select></el-form-item>
|
||||
<el-form-item label="价格"><el-input-number v-model="form.price" :min="0" :precision="2" style="width:100%" /></el-form-item>
|
||||
<el-form-item label="描述"><el-input v-model="form.description" type="textarea" :rows="3" /></el-form-item>
|
||||
<el-form-item label="状态"><el-switch v-model="form.status" :active-value="1" :inactive-value="0" /></el-form-item>
|
||||
</el-form>
|
||||
<template #footer><el-button @click="dialogVisible=false">取消</el-button><el-button type="primary" :loading="submitLoading" @click="handleSubmit">确定</el-button></template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,122 @@
|
||||
<script setup>
|
||||
import { ref, reactive, onMounted } from 'vue'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import { reservationApi, roomApi } from '@/api/room.js'
|
||||
import { customerApi } from '@/api/crm.js'
|
||||
|
||||
const tableData = ref([])
|
||||
const total = ref(0)
|
||||
const loading = ref(false)
|
||||
const dialogVisible = ref(false)
|
||||
const submitLoading = ref(false)
|
||||
const customers = ref([])
|
||||
const rooms = ref([])
|
||||
|
||||
const searchForm = reactive({ customer_id: '', room_id: '', status: '' })
|
||||
const pagination = reactive({ page: 1, per_page: 20 })
|
||||
|
||||
const formRef = ref(null)
|
||||
const form = reactive({ id: null, customer_id: '', room_id: '', contract_id: '', check_in_date: '', check_out_date: '', remark: '' })
|
||||
const isEdit = ref(false)
|
||||
const formRules = {
|
||||
customer_id: [{ required: true, message: '请选择客户', trigger: 'change' }],
|
||||
room_id: [{ required: true, message: '请选择房间', trigger: 'change' }],
|
||||
check_in_date: [{ required: true, message: '请选择入住日期', trigger: 'change' }],
|
||||
check_out_date: [{ required: true, message: '请选择退房日期', trigger: 'change' }]
|
||||
}
|
||||
|
||||
const statusMap = { 0: '预定', 1: '已入住', 2: '已退房', 3: '已取消' }
|
||||
const statusType = { 0: 'warning', 1: 'success', 2: 'info', 3: 'danger' }
|
||||
|
||||
async function fetchList() {
|
||||
loading.value = true
|
||||
try {
|
||||
const res = await reservationApi.getList({ ...searchForm, ...pagination })
|
||||
tableData.value = res.data?.list || res.data?.data || []
|
||||
total.value = res.data?.total || 0
|
||||
} finally { loading.value = false }
|
||||
}
|
||||
|
||||
async function fetchCustomers() { try { const res = await customerApi.getList({ per_page: 500 }); customers.value = res.data?.list || res.data?.data || [] } catch {} }
|
||||
async function fetchRooms() { try { const res = await roomApi.getList({ per_page: 200 }); rooms.value = res.data?.list || res.data?.data || [] } catch {} }
|
||||
|
||||
function handleSearch() { pagination.page = 1; fetchList() }
|
||||
function handleReset() { Object.assign(searchForm, { customer_id: '', room_id: '', status: '' }); handleSearch() }
|
||||
function handleAdd() { isEdit.value = false; Object.assign(form, { id: null, customer_id: '', room_id: '', contract_id: '', check_in_date: '', check_out_date: '', remark: '' }); dialogVisible.value = true }
|
||||
|
||||
async function handleSubmit() {
|
||||
if (!formRef.value) return
|
||||
await formRef.value.validate(async (valid) => {
|
||||
if (!valid) return
|
||||
submitLoading.value = true
|
||||
try {
|
||||
if (isEdit.value) { await reservationApi.update(form.id, form) } else { await reservationApi.create(form) }
|
||||
ElMessage.success(isEdit.value ? '更新成功' : '预定成功'); dialogVisible.value = false; fetchList(); fetchRooms()
|
||||
} finally { submitLoading.value = false }
|
||||
})
|
||||
}
|
||||
|
||||
async function handleCheckIn(row) {
|
||||
await ElMessageBox.confirm(`确定为「${row.customer?.name}」办理入住？`, '入住确认', { type: 'info' })
|
||||
await reservationApi.checkIn(row.id); ElMessage.success('入住成功'); fetchList(); fetchRooms()
|
||||
}
|
||||
|
||||
async function handleCheckOut(row) {
|
||||
await ElMessageBox.confirm(`确定为「${row.customer?.name}」办理退房？`, '退房确认', { type: 'warning' })
|
||||
await reservationApi.checkOut(row.id); ElMessage.success('退房成功'); fetchList(); fetchRooms()
|
||||
}
|
||||
|
||||
async function handleCancel(row) {
|
||||
await ElMessageBox.confirm('确定取消该预定吗？', '取消确认', { type: 'warning' })
|
||||
await reservationApi.cancel(row.id, {}); ElMessage.success('已取消'); fetchList(); fetchRooms()
|
||||
}
|
||||
|
||||
async function handleDelete(row) {
|
||||
await ElMessageBox.confirm('确定删除该预定吗？', '删除确认', { type: 'warning' })
|
||||
await reservationApi.delete(row.id); ElMessage.success('删除成功'); fetchList()
|
||||
}
|
||||
|
||||
function handlePageChange(val) { pagination.page = val; fetchList() }
|
||||
function handleSizeChange(val) { pagination.per_page = val; pagination.page = 1; fetchList() }
|
||||
onMounted(() => { fetchList(); fetchCustomers(); fetchRooms() })
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="page-container">
|
||||
<div class="search-bar">
|
||||
<el-select v-model="searchForm.customer_id" placeholder="选择客户" clearable filterable style="width:180px"><el-option v-for="c in customers" :key="c.id" :label="`${c.name}(${c.phone})`" :value="c.id" /></el-select>
|
||||
<el-select v-model="searchForm.status" placeholder="状态" clearable style="width:120px"><el-option v-for="(v,k) in statusMap" :key="k" :label="v" :value="Number(k)" /></el-select>
|
||||
<el-button type="primary" @click="handleSearch">查询</el-button>
|
||||
<el-button @click="handleReset">重置</el-button>
|
||||
</div>
|
||||
<div class="table-container">
|
||||
<div class="table-actions"><el-button type="primary" @click="handleAdd">新增预定</el-button></div>
|
||||
<el-table v-loading="loading" :data="tableData" border stripe style="width:100%">
|
||||
<el-table-column label="客户" min-width="100"><template #default="{ row }">{{ row.customer?.name || '-' }}</template></el-table-column>
|
||||
<el-table-column label="房间" min-width="120"><template #default="{ row }">{{ row.room?.number || '-' }} ({{ row.room?.room_type?.name || '' }})</template></el-table-column>
|
||||
<el-table-column prop="check_in_date" label="入住日期" min-width="110" />
|
||||
<el-table-column prop="check_out_date" label="退房日期" min-width="110" />
|
||||
<el-table-column label="状态" width="100" align="center"><template #default="{ row }"><el-tag :type="statusType[row.status]" size="small">{{ statusMap[row.status] }}</el-tag></template></el-table-column>
|
||||
<el-table-column label="操作" width="260" fixed="right" align="center">
|
||||
<template #default="{ row }">
|
||||
<el-button v-if="row.status===0" size="small" type="success" link @click="handleCheckIn(row)">入住</el-button>
|
||||
<el-button v-if="row.status===1" size="small" type="warning" link @click="handleCheckOut(row)">退房</el-button>
|
||||
<el-button v-if="row.status<2" size="small" type="info" link @click="handleCancel(row)">取消</el-button>
|
||||
<el-button v-if="row.status!==1" size="small" type="danger" link @click="handleDelete(row)">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<el-pagination v-model:current-page="pagination.page" v-model:page-size="pagination.per_page" :total="total" :page-sizes="[10,20,50]" layout="total,sizes,prev,pager,next,jumper" background @current-change="handlePageChange" @size-change="handleSizeChange" />
|
||||
</div>
|
||||
<el-dialog v-model="dialogVisible" title="新增预定" width="550px" destroy-on-close>
|
||||
<el-form ref="formRef" :model="form" :rules="formRules" label-width="80px">
|
||||
<el-form-item label="客户" prop="customer_id"><el-select v-model="form.customer_id" filterable style="width:100%"><el-option v-for="c in customers" :key="c.id" :label="`${c.name}(${c.phone})`" :value="c.id" /></el-select></el-form-item>
|
||||
<el-form-item label="房间" prop="room_id"><el-select v-model="form.room_id" filterable style="width:100%"><el-option v-for="r in rooms.filter(r=>r.status===1)" :key="r.id" :label="`${r.number} (${r.room_type?.name||''})`" :value="r.id" /></el-select></el-form-item>
|
||||
<el-form-item label="入住日期" prop="check_in_date"><el-date-picker v-model="form.check_in_date" type="date" value-format="YYYY-MM-DD" style="width:100%" /></el-form-item>
|
||||
<el-form-item label="退房日期" prop="check_out_date"><el-date-picker v-model="form.check_out_date" type="date" value-format="YYYY-MM-DD" style="width:100%" /></el-form-item>
|
||||
<el-form-item label="备注"><el-input v-model="form.remark" type="textarea" :rows="2" /></el-form-item>
|
||||
</el-form>
|
||||
<template #footer><el-button @click="dialogVisible=false">取消</el-button><el-button type="primary" :loading="submitLoading" @click="handleSubmit">确定</el-button></template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,92 @@
|
||||
<script setup>
|
||||
import { ref, reactive, onMounted } from 'vue'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import { roomTypeApi } from '@/api/room.js'
|
||||
|
||||
const tableData = ref([])
|
||||
const total = ref(0)
|
||||
const loading = ref(false)
|
||||
const dialogVisible = ref(false)
|
||||
const submitLoading = ref(false)
|
||||
|
||||
const searchForm = reactive({ name: '', status: '' })
|
||||
const pagination = reactive({ page: 1, per_page: 20 })
|
||||
|
||||
const formRef = ref(null)
|
||||
const form = reactive({ id: null, name: '', price: 0, description: '', facilities: [], sort: 0, status: 1 })
|
||||
const isEdit = ref(false)
|
||||
const formRules = { name: [{ required: true, message: '请输入房型名称', trigger: 'blur' }] }
|
||||
|
||||
async function fetchList() {
|
||||
loading.value = true
|
||||
try {
|
||||
const res = await roomTypeApi.getList({ ...searchForm, ...pagination })
|
||||
tableData.value = res.data?.list || res.data?.data || []
|
||||
total.value = res.data?.total || 0
|
||||
} finally { loading.value = false }
|
||||
}
|
||||
|
||||
function handleSearch() { pagination.page = 1; fetchList() }
|
||||
function handleReset() { Object.assign(searchForm, { name: '', status: '' }); handleSearch() }
|
||||
function handleAdd() { isEdit.value = false; Object.assign(form, { id: null, name: '', price: 0, description: '', facilities: [], sort: 0, status: 1 }); dialogVisible.value = true }
|
||||
async function handleEdit(row) { isEdit.value = true; const res = await roomTypeApi.getDetail(row.id); const d = res.data; Object.assign(form, { id: d.id, name: d.name, price: d.price || 0, description: d.description || '', facilities: d.facilities || [], sort: d.sort || 0, status: d.status }); dialogVisible.value = true }
|
||||
|
||||
async function handleSubmit() {
|
||||
if (!formRef.value) return
|
||||
await formRef.value.validate(async (valid) => {
|
||||
if (!valid) return
|
||||
submitLoading.value = true
|
||||
try {
|
||||
if (isEdit.value) { await roomTypeApi.update(form.id, form) } else { await roomTypeApi.create(form) }
|
||||
ElMessage.success(isEdit.value ? '更新成功' : '创建成功'); dialogVisible.value = false; fetchList()
|
||||
} finally { submitLoading.value = false }
|
||||
})
|
||||
}
|
||||
|
||||
async function handleDelete(row) {
|
||||
await ElMessageBox.confirm(`确定删除房型「${row.name}」吗？`, '删除确认', { type: 'warning' })
|
||||
try { await roomTypeApi.delete(row.id); ElMessage.success('删除成功'); fetchList() } catch {}
|
||||
}
|
||||
|
||||
function handlePageChange(val) { pagination.page = val; fetchList() }
|
||||
function handleSizeChange(val) { pagination.per_page = val; pagination.page = 1; fetchList() }
|
||||
onMounted(() => fetchList())
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="page-container">
|
||||
<div class="search-bar">
|
||||
<el-input v-model="searchForm.name" placeholder="房型名称" style="width:180px" clearable @keydown.enter="handleSearch" />
|
||||
<el-select v-model="searchForm.status" placeholder="状态" clearable style="width:120px"><el-option label="启用" :value="1" /><el-option label="禁用" :value="0" /></el-select>
|
||||
<el-button type="primary" @click="handleSearch">查询</el-button>
|
||||
<el-button @click="handleReset">重置</el-button>
|
||||
</div>
|
||||
<div class="table-container">
|
||||
<div class="table-actions"><el-button type="primary" @click="handleAdd">新增房型</el-button></div>
|
||||
<el-table v-loading="loading" :data="tableData" border stripe style="width:100%">
|
||||
<el-table-column prop="name" label="房型名称" min-width="150" />
|
||||
<el-table-column prop="price" label="日单价(元)" min-width="120" align="right" />
|
||||
<el-table-column label="房间数" width="90" align="center"><template #default="{ row }">{{ row.rooms_count || 0 }}</template></el-table-column>
|
||||
<el-table-column label="状态" width="80" align="center"><template #default="{ row }"><el-tag :type="row.status?'success':'danger'" size="small">{{ row.status?'启用':'禁用' }}</el-tag></template></el-table-column>
|
||||
<el-table-column prop="description" label="描述" min-width="200" show-overflow-tooltip />
|
||||
<el-table-column label="操作" width="160" fixed="right" align="center">
|
||||
<template #default="{ row }">
|
||||
<el-button size="small" type="primary" link @click="handleEdit(row)">编辑</el-button>
|
||||
<el-button size="small" type="danger" link @click="handleDelete(row)">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<el-pagination v-model:current-page="pagination.page" v-model:page-size="pagination.per_page" :total="total" :page-sizes="[10,20,50]" layout="total,sizes,prev,pager,next,jumper" background @current-change="handlePageChange" @size-change="handleSizeChange" />
|
||||
</div>
|
||||
<el-dialog v-model="dialogVisible" :title="isEdit?'编辑房型':'新增房型'" width="550px" destroy-on-close>
|
||||
<el-form ref="formRef" :model="form" :rules="formRules" label-width="80px">
|
||||
<el-form-item label="房型名称" prop="name"><el-input v-model="form.name" /></el-form-item>
|
||||
<el-form-item label="日单价"><el-input-number v-model="form.price" :min="0" :precision="2" style="width:100%" /></el-form-item>
|
||||
<el-form-item label="描述"><el-input v-model="form.description" type="textarea" :rows="3" /></el-form-item>
|
||||
<el-form-item label="排序"><el-input-number v-model="form.sort" :min="0" /></el-form-item>
|
||||
<el-form-item label="状态"><el-switch v-model="form.status" :active-value="1" :inactive-value="0" /></el-form-item>
|
||||
</el-form>
|
||||
<template #footer><el-button @click="dialogVisible=false">取消</el-button><el-button type="primary" :loading="submitLoading" @click="handleSubmit">确定</el-button></template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,119 @@
|
||||
<script setup>
|
||||
import { ref, reactive, onMounted } from 'vue'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import { roomApi, roomTypeApi } from '@/api/room.js'
|
||||
|
||||
const tableData = ref([])
|
||||
const total = ref(0)
|
||||
const loading = ref(false)
|
||||
const dialogVisible = ref(false)
|
||||
const submitLoading = ref(false)
|
||||
const roomTypes = ref([])
|
||||
|
||||
const searchForm = reactive({ room_type_id: '', floor: '', status: '' })
|
||||
const pagination = reactive({ page: 1, per_page: 50 })
|
||||
|
||||
const formRef = ref(null)
|
||||
const form = reactive({ id: null, room_type_id: '', floor: '', number: '', sort: 0 })
|
||||
const isEdit = ref(false)
|
||||
const formRules = {
|
||||
room_type_id: [{ required: true, message: '请选择房型', trigger: 'change' }],
|
||||
number: [{ required: true, message: '请输入房间号', trigger: 'blur' }]
|
||||
}
|
||||
|
||||
const statusMap = { 1: '空房', 2: '已预定', 3: '入住', 4: '维修', 5: '清洁' }
|
||||
const statusType = { 1: 'success', 2: 'warning', 3: 'primary', 4: 'danger', 5: 'info' }
|
||||
|
||||
async function fetchList() {
|
||||
loading.value = true
|
||||
try {
|
||||
const res = await roomApi.getList({ ...searchForm, ...pagination })
|
||||
tableData.value = res.data?.list || res.data?.data || []
|
||||
total.value = res.data?.total || 0
|
||||
} finally { loading.value = false }
|
||||
}
|
||||
|
||||
async function fetchRoomTypes() {
|
||||
try { const res = await roomTypeApi.getList({ per_page: 100 }); roomTypes.value = res.data?.list || res.data?.data || [] } catch {}
|
||||
}
|
||||
|
||||
function handleSearch() { pagination.page = 1; fetchList() }
|
||||
function handleReset() { Object.assign(searchForm, { room_type_id: '', floor: '', status: '' }); handleSearch() }
|
||||
|
||||
function handleAdd() { isEdit.value = false; Object.assign(form, { id: null, room_type_id: '', floor: '', number: '', sort: 0 }); dialogVisible.value = true }
|
||||
async function handleEdit(row) { isEdit.value = true; Object.assign(form, { id: row.id, room_type_id: row.room_type_id, floor: row.floor || '', number: row.number, sort: row.sort }); dialogVisible.value = true }
|
||||
|
||||
async function handleSubmit() {
|
||||
if (!formRef.value) return
|
||||
await formRef.value.validate(async (valid) => {
|
||||
if (!valid) return
|
||||
submitLoading.value = true
|
||||
try {
|
||||
if (isEdit.value) { await roomApi.update(form.id, form) } else { await roomApi.create(form) }
|
||||
ElMessage.success(isEdit.value ? '更新成功' : '创建成功'); dialogVisible.value = false; fetchList()
|
||||
} finally { submitLoading.value = false }
|
||||
})
|
||||
}
|
||||
|
||||
async function handleDelete(row) {
|
||||
if (row.status === 3) { ElMessage.warning('入住中的房间无法删除'); return }
|
||||
await ElMessageBox.confirm(`确定删除房间「${row.number}」吗？`, '删除确认', { type: 'warning' })
|
||||
await roomApi.delete(row.id); ElMessage.success('删除成功'); fetchList()
|
||||
}
|
||||
|
||||
async function changeStatus(row, status) {
|
||||
await roomApi.updateStatus(row.id, { status })
|
||||
ElMessage.success('状态更新成功'); fetchList()
|
||||
}
|
||||
|
||||
function handlePageChange(val) { pagination.page = val; fetchList() }
|
||||
function handleSizeChange(val) { pagination.per_page = val; pagination.page = 1; fetchList() }
|
||||
onMounted(() => { fetchList(); fetchRoomTypes() })
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="page-container">
|
||||
<div class="search-bar">
|
||||
<el-select v-model="searchForm.room_type_id" placeholder="房型" clearable style="width:160px"><el-option v-for="t in roomTypes" :key="t.id" :label="t.name" :value="t.id" /></el-select>
|
||||
<el-input v-model="searchForm.floor" placeholder="楼层" style="width:100px" clearable />
|
||||
<el-select v-model="searchForm.status" placeholder="状态" clearable style="width:120px"><el-option v-for="(v,k) in statusMap" :key="k" :label="v" :value="Number(k)" /></el-select>
|
||||
<el-button type="primary" @click="handleSearch">查询</el-button>
|
||||
<el-button @click="handleReset">重置</el-button>
|
||||
</div>
|
||||
<div class="table-container">
|
||||
<div class="table-actions"><el-button type="primary" @click="handleAdd">新增房间</el-button></div>
|
||||
<el-table v-loading="loading" :data="tableData" border stripe style="width:100%">
|
||||
<el-table-column prop="number" label="房间号" width="100" />
|
||||
<el-table-column label="房型" min-width="120"><template #default="{ row }">{{ row.room_type?.name || '-' }}</template></el-table-column>
|
||||
<el-table-column prop="floor" label="楼层" width="80" align="center" />
|
||||
<el-table-column label="状态" width="100" align="center">
|
||||
<template #default="{ row }"><el-tag :type="statusType[row.status]" size="small">{{ statusMap[row.status] }}</el-tag></template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" width="300" fixed="right" align="center">
|
||||
<template #default="{ row }">
|
||||
<el-button size="small" type="primary" link @click="handleEdit(row)">编辑</el-button>
|
||||
<el-dropdown trigger="click" @command="(cmd) => changeStatus(row, cmd)" style="margin:0 8px">
|
||||
<el-button size="small" type="warning" link>切换状态</el-button>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu>
|
||||
<el-dropdown-item v-for="(v,k) in statusMap" :key="k" :command="Number(k)" :disabled="row.status===Number(k)">{{ v }}</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
<el-button size="small" type="danger" link @click="handleDelete(row)">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<el-pagination v-model:current-page="pagination.page" v-model:page-size="pagination.per_page" :total="total" :page-sizes="[20,50,100]" layout="total,sizes,prev,pager,next,jumper" background @current-change="handlePageChange" @size-change="handleSizeChange" />
|
||||
</div>
|
||||
<el-dialog v-model="dialogVisible" :title="isEdit?'编辑房间':'新增房间'" width="500px" destroy-on-close>
|
||||
<el-form ref="formRef" :model="form" :rules="formRules" label-width="80px">
|
||||
<el-form-item label="房型" prop="room_type_id"><el-select v-model="form.room_type_id" style="width:100%"><el-option v-for="t in roomTypes" :key="t.id" :label="t.name" :value="t.id" /></el-select></el-form-item>
|
||||
<el-form-item label="房间号" prop="number"><el-input v-model="form.number" /></el-form-item>
|
||||
<el-form-item label="楼层"><el-input v-model="form.floor" /></el-form-item>
|
||||
<el-form-item label="排序"><el-input-number v-model="form.sort" :min="0" /></el-form-item>
|
||||
</el-form>
|
||||
<template #footer><el-button @click="dialogVisible=false">取消</el-button><el-button type="primary" :loading="submitLoading" @click="handleSubmit">确定</el-button></template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
Reference in New Issue
Block a user