<template>
|
<ContentWrap>
|
<el-form class="-mb-15px" :model="queryParams" ref="queryFormRef" :inline="true" label-width="88px">
|
<el-form-item label="供应商编码" prop="code">
|
<el-input v-model="queryParams.code" placeholder="请输入编码" clearable @keyup.enter="handleQuery" class="!w-200px" />
|
</el-form-item>
|
<el-form-item label="供应商名称" prop="name">
|
<el-input v-model="queryParams.name" placeholder="请输入名称" clearable @keyup.enter="handleQuery" class="!w-200px" />
|
</el-form-item>
|
<el-form-item label="供应商类型" prop="type">
|
<el-select v-model="queryParams.type" placeholder="请选择类型" clearable class="!w-160px">
|
<el-option label="生产型" value="1" />
|
<el-option label="贸易型" value="2" />
|
<el-option label="服务型" value="3" />
|
</el-select>
|
</el-form-item>
|
<el-form-item label="状态" prop="status">
|
<el-select v-model="queryParams.status" placeholder="请选择状态" clearable class="!w-140px">
|
<el-option label="启用" :value="0" />
|
<el-option label="禁用" :value="1" />
|
</el-select>
|
</el-form-item>
|
<el-form-item>
|
<el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
|
<el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
|
<el-button type="primary" plain @click="openForm()" v-hasPermi="['srm:supplier:create']">
|
<Icon icon="ep:plus" class="mr-5px" /> 新增
|
</el-button>
|
<el-button type="success" plain @click="handleExport" :loading="exportLoading" v-hasPermi="['srm:supplier:export']">
|
<Icon icon="ep:download" class="mr-5px" /> 导出
|
</el-button>
|
</el-form-item>
|
</el-form>
|
</ContentWrap>
|
|
<ContentWrap>
|
<el-table v-loading="loading" :data="list" stripe>
|
<el-table-column label="供应商编码" align="center" prop="code" min-width="140" />
|
<el-table-column label="供应商名称" align="center" prop="name" min-width="180" show-overflow-tooltip />
|
<el-table-column label="简称" align="center" prop="shortName" min-width="120" />
|
<el-table-column label="类型" align="center" prop="type" min-width="100">
|
<template #default="scope">
|
<el-tag v-if="scope.row.type === '1'" type="primary">生产型</el-tag>
|
<el-tag v-else-if="scope.row.type === '2'" type="success">贸易型</el-tag>
|
<el-tag v-else-if="scope.row.type === '3'" type="warning">服务型</el-tag>
|
<span v-else>{{ scope.row.type }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column label="联系人" align="center" prop="contactName" min-width="100" />
|
<el-table-column label="联系电话" align="center" prop="contactMobile" min-width="130" />
|
<el-table-column label="邮箱" align="center" prop="contactEmail" min-width="160" show-overflow-tooltip />
|
<el-table-column label="企业性质" align="center" prop="companyNature" min-width="100" />
|
<el-table-column label="状态" align="center" prop="status" min-width="80">
|
<template #default="scope">
|
<el-switch :model-value="scope.row.status === 0" @change="(val: boolean) => handleStatusChange(scope.row, val)" active-text="启用" inactive-text="禁用" />
|
</template>
|
</el-table-column>
|
<el-table-column label="创建时间" align="center" prop="createTime" :formatter="dateFormatter" width="180px" />
|
<el-table-column label="操作" align="center" width="200" fixed="right">
|
<template #default="scope">
|
<el-button link type="primary" @click="openDetail(scope.row.id)" v-hasPermi="['srm:supplier:query']">详情</el-button>
|
<el-button link type="primary" @click="openForm(scope.row.id)" v-hasPermi="['srm:supplier:update']">编辑</el-button>
|
<el-button link type="danger" @click="handleDelete(scope.row.id)" v-hasPermi="['srm:supplier:delete']">删除</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
<Pagination :total="total" v-model:page="queryParams.pageNo" v-model:limit="queryParams.pageSize" @pagination="getList" />
|
</ContentWrap>
|
|
<!-- 新增/编辑对话框 -->
|
<el-dialog :title="dialogTitle" v-model="dialogVisible" width="750px" @close="resetForm">
|
<el-form ref="formRef" :model="formData" :rules="formRules" label-width="110px">
|
<el-row :gutter="20">
|
<el-col :span="12">
|
<el-form-item label="供应商编码" prop="code">
|
<el-input v-model="formData.code" placeholder="请输入编码" :disabled="!!formData.id" />
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="供应商名称" prop="name">
|
<el-input v-model="formData.name" placeholder="请输入名称" />
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="供应商简称" prop="shortName">
|
<el-input v-model="formData.shortName" placeholder="请输入简称" />
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="供应商类型" prop="type">
|
<el-select v-model="formData.type" placeholder="请选择" class="!w-full">
|
<el-option label="生产型" value="1" />
|
<el-option label="贸易型" value="2" />
|
<el-option label="服务型" value="3" />
|
<el-option label="其他" value="4" />
|
</el-select>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="企业性质" prop="companyNature">
|
<el-select v-model="formData.companyNature" placeholder="请选择" class="!w-full">
|
<el-option label="国企" value="国企" />
|
<el-option label="民营" value="民营" />
|
<el-option label="外资" value="外资" />
|
<el-option label="合资" value="合资" />
|
</el-select>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="注册资金(万元)" prop="registeredCapital">
|
<el-input-number v-model="formData.registeredCapital" :min="0" :precision="2" controls-position="right" class="!w-full" />
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="营业执照编号" prop="businessLicenseNo">
|
<el-input v-model="formData.businessLicenseNo" placeholder="请输入" />
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="税号" prop="taxNo">
|
<el-input v-model="formData.taxNo" placeholder="请输入" />
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="法人代表" prop="legalPerson">
|
<el-input v-model="formData.legalPerson" placeholder="请输入" />
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="联系人" prop="contactName">
|
<el-input v-model="formData.contactName" placeholder="请输入" />
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="联系电话" prop="contactMobile">
|
<el-input v-model="formData.contactMobile" placeholder="请输入" />
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="邮箱" prop="contactEmail">
|
<el-input v-model="formData.contactEmail" placeholder="请输入" />
|
</el-form-item>
|
</el-col>
|
<el-col :span="24">
|
<el-form-item label="公司地址" prop="address">
|
<el-input v-model="formData.address" placeholder="请输入地址" />
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="开户银行" prop="bankName">
|
<el-input v-model="formData.bankName" placeholder="请输入" />
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="银行账号" prop="bankAccount">
|
<el-input v-model="formData.bankAccount" placeholder="请输入" />
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="状态" prop="status">
|
<el-radio-group v-model="formData.status">
|
<el-radio :value="0">启用</el-radio>
|
<el-radio :value="1">禁用</el-radio>
|
</el-radio-group>
|
</el-form-item>
|
</el-col>
|
<el-col :span="24">
|
<el-form-item label="备注" prop="remark">
|
<el-input v-model="formData.remark" type="textarea" :rows="2" placeholder="请输入备注" />
|
</el-form-item>
|
</el-col>
|
</el-row>
|
</el-form>
|
<template #footer>
|
<el-button @click="dialogVisible = false">取消</el-button>
|
<el-button type="primary" @click="submitForm" :loading="formLoading">确定</el-button>
|
</template>
|
</el-dialog>
|
|
<!-- 详情对话框 -->
|
<el-dialog :title="'供应商详情'" v-model="detailVisible" width="750px">
|
<el-descriptions :column="2" border>
|
<el-descriptions-item label="供应商编码">{{ detailData.code }}</el-descriptions-item>
|
<el-descriptions-item label="供应商名称">{{ detailData.name }}</el-descriptions-item>
|
<el-descriptions-item label="供应商简称">{{ detailData.shortName }}</el-descriptions-item>
|
<el-descriptions-item label="供应商类型">{{ detailData.type }}</el-descriptions-item>
|
<el-descriptions-item label="企业性质">{{ detailData.companyNature }}</el-descriptions-item>
|
<el-descriptions-item label="注册资金(万元)">{{ detailData.registeredCapital }}</el-descriptions-item>
|
<el-descriptions-item label="营业执照编号">{{ detailData.businessLicenseNo }}</el-descriptions-item>
|
<el-descriptions-item label="税号">{{ detailData.taxNo }}</el-descriptions-item>
|
<el-descriptions-item label="法人代表">{{ detailData.legalPerson }}</el-descriptions-item>
|
<el-descriptions-item label="联系人">{{ detailData.contactName }}</el-descriptions-item>
|
<el-descriptions-item label="联系电话">{{ detailData.contactMobile }}</el-descriptions-item>
|
<el-descriptions-item label="邮箱">{{ detailData.contactEmail }}</el-descriptions-item>
|
<el-descriptions-item label="开户银行">{{ detailData.bankName }}</el-descriptions-item>
|
<el-descriptions-item label="银行账号">{{ detailData.bankAccount }}</el-descriptions-item>
|
<el-descriptions-item label="公司地址" :span="2">{{ detailData.address }}</el-descriptions-item>
|
<el-descriptions-item label="备注" :span="2">{{ detailData.remark }}</el-descriptions-item>
|
</el-descriptions>
|
</el-dialog>
|
</template>
|
|
<script setup lang="ts">
|
import { dateFormatter } from '@/utils/formatTime'
|
import { SrmSupplierApi, SrmSupplierVO, SrmSupplierContactVO } from '@/api/srm/supplier'
|
|
defineOptions({ name: 'SrmSupplier' })
|
|
const message = useMessage()
|
|
const loading = ref(true)
|
const list = ref<SrmSupplierVO[]>([])
|
const total = ref(0)
|
const queryParams = reactive({
|
pageNo: 1,
|
pageSize: 10,
|
code: undefined,
|
name: undefined,
|
type: undefined,
|
status: undefined,
|
contactName: undefined,
|
contactMobile: undefined
|
})
|
const queryFormRef = ref()
|
const exportLoading = ref(false)
|
|
const getList = async () => {
|
loading.value = true
|
try {
|
const data = await SrmSupplierApi.getSupplierPage(queryParams)
|
list.value = data.list
|
total.value = data.total
|
} finally {
|
loading.value = false
|
}
|
}
|
|
const handleQuery = () => {
|
queryParams.pageNo = 1
|
getList()
|
}
|
|
const resetQuery = () => {
|
queryFormRef.value.resetFields()
|
handleQuery()
|
}
|
|
// 新增/编辑对话框
|
const dialogVisible = ref(false)
|
const dialogTitle = ref('新增供应商')
|
const formLoading = ref(false)
|
const formData = ref<any>({})
|
const formRules = reactive({
|
code: [{ required: true, message: '供应商编码不能为空', trigger: 'blur' }],
|
name: [{ required: true, message: '供应商名称不能为空', trigger: 'blur' }]
|
})
|
const formRef = ref()
|
|
const openForm = async (id?: number) => {
|
dialogTitle.value = id ? '编辑供应商' : '新增供应商'
|
if (id) {
|
const data = await SrmSupplierApi.getSupplier(id)
|
formData.value = { ...data }
|
} else {
|
formData.value = { status: 0 }
|
}
|
dialogVisible.value = true
|
}
|
|
const resetForm = () => {
|
formData.value = {}
|
formRef.value?.resetFields()
|
}
|
|
const submitForm = async () => {
|
await formRef.value.validate()
|
formLoading.value = true
|
try {
|
if (formData.value.id) {
|
await SrmSupplierApi.updateSupplier(formData.value)
|
} else {
|
await SrmSupplierApi.createSupplier(formData.value)
|
}
|
message.success(formData.value.id ? '更新成功' : '新增成功')
|
dialogVisible.value = false
|
await getList()
|
} finally {
|
formLoading.value = false
|
}
|
}
|
|
const handleDelete = async (id: number) => {
|
try {
|
await message.delConfirm()
|
await SrmSupplierApi.deleteSupplier(id)
|
message.success('删除成功')
|
await getList()
|
} catch {}
|
}
|
|
const handleStatusChange = async (row: any, val: boolean) => {
|
await SrmSupplierApi.updateSupplier({ ...row, status: val ? 0 : 1 })
|
message.success('状态更新成功')
|
await getList()
|
}
|
|
// 详情对话框
|
const detailVisible = ref(false)
|
const detailData = ref<any>({})
|
|
const openDetail = async (id: number) => {
|
detailData.value = await SrmSupplierApi.getSupplier(id)
|
detailVisible.value = true
|
}
|
|
// 导出
|
const handleExport = async () => {
|
try {
|
await message.exportConfirm()
|
exportLoading.value = true
|
await SrmSupplierApi.exportSupplierExcel(queryParams)
|
} catch {
|
} finally {
|
exportLoading.value = false
|
}
|
}
|
|
onMounted(() => {
|
getList()
|
})
|
</script>
|
