KiriAky 107
15da4fe492
- 更新 package.json 中的依赖版本号，包括 element-plus、axios、pinia、vue-router 等 - 删除 HelloWorld 组件，替换为 router-view 以支持路由功能 - 添加 auth、category、customer、dashboard、medicine、role、stock、stockIn、stockOut、 supplier、user 等多个 API 接口文件 - 创建权限指令、主布局组件和全局样式 - 集成 Element Plus UI 框架并注册图标组件 - 实现应用状态管理和用户状态管理 Store - 配置 Vue Router 路由系统，支持动态菜单路由生成 - 移除旧的 CSS 样式文件，改用 SCSS 全局样式 ```
79 lines
5.2 KiB
Vue
79 lines
5.2 KiB
Vue
<script setup>
|
|
import { ref, reactive, onMounted } from 'vue'
|
|
import { getSupplierList, createSupplier, updateSupplier, deleteSupplier } from '@/api/supplier'
|
|
import { ElMessage, ElMessageBox } from 'element-plus'
|
|
import { Search, Refresh } from '@element-plus/icons-vue'
|
|
|
|
const query = reactive({ page: 1, size: 10, name: '', phone: '' })
|
|
const tableData = ref([])
|
|
const total = ref(0)
|
|
const dialogVisible = ref(false)
|
|
const dialogTitle = ref('新增供应商')
|
|
const formRef = ref(null)
|
|
const form = reactive({ id: null, name: '', contactPerson: '', phone: '', email: '', address: '', bankAccount: '', bankName: '', taxId: '', licenseNumber: '', status: 1, remark: '' })
|
|
|
|
async function loadData() {
|
|
try { const res = await getSupplierList(query); tableData.value = res.data?.records || []; total.value = res.data?.total || 0 } catch { /* */ }
|
|
}
|
|
function handleAdd() { dialogTitle.value = '新增供应商'; Object.keys(form).forEach(k => form[k] = k === 'status' ? 1 : null); form.id = null; dialogVisible.value = true }
|
|
function handleEdit(row) { dialogTitle.value = '编辑供应商'; Object.assign(form, row); dialogVisible.value = true }
|
|
async function handleDelete(row) { await ElMessageBox.confirm('确定删除？', '确认', { type: 'warning' }); await deleteSupplier(row.id); ElMessage.success('删除成功'); loadData() }
|
|
async function handleSubmit() { const data = { ...form }; delete data.id; if (form.id) { await updateSupplier(form.id, data); ElMessage.success('编辑成功') } else { await createSupplier(data); ElMessage.success('新增成功') }; dialogVisible.value = false; loadData() }
|
|
async function toggleStatus(row) { await updateSupplier(row.id, { status: row.status }); ElMessage.success('状态已更新') }
|
|
|
|
onMounted(loadData)
|
|
</script>
|
|
|
|
<template>
|
|
<div class="page-container">
|
|
<div class="search-bar">
|
|
<el-input v-model="query.name" placeholder="供应商名称" clearable @keyup.enter="loadData" />
|
|
<el-button type="primary" :icon="Search" @click="loadData">搜索</el-button>
|
|
<el-button :icon="Refresh" @click="query.name = ''; loadData()">重置</el-button>
|
|
</div>
|
|
<div class="tool-bar">
|
|
<el-button type="primary" v-permission="'supplier:add'" @click="handleAdd">+ 新增供应商</el-button>
|
|
</div>
|
|
<el-table :data="tableData" border stripe>
|
|
<el-table-column prop="name" label="供应商名称" min-width="180" />
|
|
<el-table-column prop="contactPerson" label="联系人" width="100" />
|
|
<el-table-column prop="phone" label="电话" width="130" />
|
|
<el-table-column prop="email" label="邮箱" width="180" show-overflow-tooltip />
|
|
<el-table-column prop="status" label="状态" width="80" align="center">
|
|
<template #default="{ row }">
|
|
<el-switch v-model="row.status" :active-value="1" :inactive-value="0" @change="toggleStatus(row)" />
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="操作" width="160" fixed="right">
|
|
<template #default="{ row }">
|
|
<div class="table-actions">
|
|
<el-button size="small" v-permission="'supplier:edit'" @click="handleEdit(row)">编辑</el-button>
|
|
<el-button size="small" type="danger" v-permission="'supplier:delete'" @click="handleDelete(row)">删除</el-button>
|
|
</div>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
<div style="display:flex;justify-content:flex-end;margin-top:16px">
|
|
<el-pagination v-model:current-page="query.page" v-model:page-size="query.size" :total="total" :page-sizes="[10,20,50]" layout="total,sizes,prev,pager,next" @current-change="loadData" @size-change="query.page=1;loadData()" />
|
|
</div>
|
|
|
|
<el-dialog v-model="dialogVisible" :title="dialogTitle" width="550px">
|
|
<el-form ref="formRef" :model="form" label-width="90px">
|
|
<el-row :gutter="16">
|
|
<el-col :span="12"><el-form-item label="名称" required><el-input v-model="form.name" /></el-form-item></el-col>
|
|
<el-col :span="12"><el-form-item label="联系人"><el-input v-model="form.contactPerson" /></el-form-item></el-col>
|
|
<el-col :span="12"><el-form-item label="电话"><el-input v-model="form.phone" /></el-form-item></el-col>
|
|
<el-col :span="12"><el-form-item label="邮箱"><el-input v-model="form.email" /></el-form-item></el-col>
|
|
<el-col :span="12"><el-form-item label="银行账号"><el-input v-model="form.bankAccount" /></el-form-item></el-col>
|
|
<el-col :span="12"><el-form-item label="开户银行"><el-input v-model="form.bankName" /></el-form-item></el-col>
|
|
<el-col :span="12"><el-form-item label="税号"><el-input v-model="form.taxId" /></el-form-item></el-col>
|
|
<el-col :span="12"><el-form-item label="许可证号"><el-input v-model="form.licenseNumber" /></el-form-item></el-col>
|
|
<el-col :span="24"><el-form-item label="地址"><el-input v-model="form.address" /></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" @click="handleSubmit">确定</el-button></template>
|
|
</el-dialog>
|
|
</div>
|
|
</template>
|