81 lines
3.7 KiB
Vue
81 lines
3.7 KiB
Vue
<template>
|
|
<div class="service-station">
|
|
<el-card>
|
|
<template #header><div class="card-header"><span>善缘服务站管理</span><el-button type="primary" size="small" @click="openCreate">新建服务站</el-button></div></template>
|
|
<el-table :data="stations" stripe v-loading="loading">
|
|
<el-table-column prop="name" label="名称" />
|
|
<el-table-column prop="shortName" label="简称" width="120" />
|
|
<el-table-column prop="address" label="地址" show-overflow-tooltip />
|
|
<el-table-column prop="contactPhoneDisplay" label="联系电话" width="130" />
|
|
<el-table-column prop="openingHoursText" label="营业时间" width="180">
|
|
<template #default="{ row }">{{ row.openingHoursText || '-' }}</template>
|
|
</el-table-column>
|
|
<el-table-column prop="status" label="状态" width="100">
|
|
<template #default="{ row }"><el-tag :type="row.status==='active'?'success':row.status==='closed'?'danger':'info'">{{ row.status }}</el-tag></template>
|
|
</el-table-column>
|
|
<el-table-column label="操作" width="150">
|
|
<template #default="{ row }">
|
|
<el-button size="small" @click="openEdit(row)">编辑</el-button>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
</el-card>
|
|
|
|
<el-dialog v-model="dialogVisible" title="编辑服务站" width="600px">
|
|
<el-form :model="form" label-width="100px">
|
|
<el-form-item label="名称"><el-input v-model="form.name" /></el-form-item>
|
|
<el-form-item label="简称"><el-input v-model="form.shortName" /></el-form-item>
|
|
<el-form-item label="地址"><el-input v-model="form.address" /></el-form-item>
|
|
<el-form-item label="电话显示"><el-input v-model="form.contactPhoneDisplay" /></el-form-item>
|
|
<el-form-item label="营业时间"><el-input v-model="form.openingHoursText" type="textarea" :rows="3" /></el-form-item>
|
|
<el-form-item label="状态">
|
|
<el-select v-model="form.status">
|
|
<el-option label="营业中" value="active" />
|
|
<el-option label="休息中" value="inactive" />
|
|
<el-option label="关闭" value="closed" />
|
|
</el-select>
|
|
</el-form-item>
|
|
</el-form>
|
|
<template #footer>
|
|
<el-button @click="dialogVisible=false">取消</el-button>
|
|
<el-button type="primary" @click="saveStation">保存</el-button>
|
|
</template>
|
|
</el-dialog>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref, onMounted } from 'vue'
|
|
import { get, post, put } from '@/api/client'
|
|
import { ElMessage } from 'element-plus'
|
|
|
|
const loading = ref(false)
|
|
const stations = ref<any[]>([])
|
|
const dialogVisible = ref(false)
|
|
const form = ref<any>({})
|
|
|
|
async function loadStations() {
|
|
loading.value = true
|
|
try {
|
|
const res: any = await get('/operator/service-locations')
|
|
stations.value = res.data || []
|
|
} finally { loading.value = false }
|
|
}
|
|
|
|
function openEdit(row: any) { Object.assign(form.value, row); dialogVisible.value = true }
|
|
function openCreate() { Object.assign(form.value, { id: undefined, name: '', shortName: '', address: '', contactPhoneDisplay: '', openingHoursText: '', status: 'active' }); dialogVisible.value = true }
|
|
|
|
async function saveStation() {
|
|
try {
|
|
if (form.value.id) await put(`/operator/service-locations/${form.value.id}`, form.value)
|
|
else await post('/operator/service-locations', form.value)
|
|
ElMessage.success('保存成功')
|
|
dialogVisible.value = false
|
|
loadStations()
|
|
} catch (e: any) { ElMessage.error(e?.response?.data?.message || '保存失败') }
|
|
}
|
|
|
|
onMounted(loadStations)
|
|
</script>
|
|
<style scoped>.card-header{display:flex;justify-content:space-between;align-items:center}</style>
|