59 lines
3.4 KiB
Vue
59 lines
3.4 KiB
Vue
<template>
|
||
<div>
|
||
<div class="page-header">
|
||
<div><h2>组织管理</h2><p>维护本系统所属的公司和经营组织，与供应商、客户主表分开。</p></div>
|
||
<el-button type="primary" @click="openCreate">新增组织</el-button>
|
||
</div>
|
||
<el-table v-loading="loading" :data="rows" stripe>
|
||
<el-table-column prop="code" label="组织编码" />
|
||
<el-table-column prop="name" label="组织名称" />
|
||
<el-table-column prop="default_timezone" label="时区" />
|
||
<el-table-column prop="status" label="状态" width="100">
|
||
<template #default="{ row }"><el-tag :type="row.status === 'active' ? 'success' : 'info'">{{ row.status === 'active' ? '启用' : '停用' }}</el-tag></template>
|
||
</el-table-column>
|
||
<el-table-column label="操作" width="100"><template #default="{ row }"><el-button link type="primary" @click="openEdit(row)">编辑</el-button></template></el-table-column>
|
||
</el-table>
|
||
<el-empty v-if="!loading && rows.length === 0" description="暂无公司组织" />
|
||
|
||
<el-dialog v-model="dialogVisible" :title="editingId ? '编辑组织' : '新增组织'" width="480px">
|
||
<el-form :model="form" label-width="100px">
|
||
<el-form-item label="组织编码" required><el-input v-model="form.code" :disabled="Boolean(editingId)" /></el-form-item>
|
||
<el-form-item label="组织名称" required><el-input v-model="form.name" /></el-form-item>
|
||
<el-form-item label="时区"><el-input v-model="form.default_timezone" /></el-form-item>
|
||
<el-form-item label="状态"><el-select v-model="form.status" style="width: 100%"><el-option label="启用" value="active" /><el-option label="停用" value="inactive" /></el-select></el-form-item>
|
||
</el-form>
|
||
<template #footer><el-button @click="dialogVisible = false">取消</el-button><el-button type="primary" :loading="saving" @click="save">保存</el-button></template>
|
||
</el-dialog>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { onMounted, reactive, ref } from 'vue'
|
||
import { ElMessage } from 'element-plus'
|
||
import { organizationsApi } from '../../api/organizations'
|
||
|
||
const rows = ref([])
|
||
const loading = ref(false)
|
||
const saving = ref(false)
|
||
const dialogVisible = ref(false)
|
||
const editingId = ref(null)
|
||
const form = reactive({ code: '', name: '', default_timezone: 'Asia/Shanghai', status: 'active' })
|
||
|
||
async function load() { loading.value = true; try { const response = await organizationsApi.list(); rows.value = response.data || [] } finally { loading.value = false } }
|
||
function openCreate() { editingId.value = null; Object.assign(form, { code: '', name: '', default_timezone: 'Asia/Shanghai', status: 'active' }); dialogVisible.value = true }
|
||
function openEdit(row) { editingId.value = row.id; Object.assign(form, row); dialogVisible.value = true }
|
||
async function save() {
|
||
if (!form.code.trim()) { ElMessage.warning('请填写组织编码'); return }
|
||
if (!form.name.trim()) { ElMessage.warning('请填写组织名称'); return }
|
||
saving.value = true
|
||
try { if (editingId.value) await organizationsApi.update(editingId.value, form); else await organizationsApi.create(form); ElMessage.success('保存成功'); dialogVisible.value = false; await load() } finally { saving.value = false }
|
||
}
|
||
onMounted(load)
|
||
</script>
|
||
|
||
<style scoped>
|
||
.page-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
|
||
.page-header h2 { margin: 0 0 6px; }
|
||
.page-header p { margin: 0; color: #909399; }
|
||
</style>
|