|
@@ -0,0 +1,246 @@
|
|
|
+<!-- 供应商管理 -->
|
|
|
+<template>
|
|
|
+ <div class="container-header">
|
|
|
+ <el-form :inline="true">
|
|
|
+ <el-form-item label="供应商名称">
|
|
|
+ <el-input v-model="searchKey" placeholder="请输入供应商的名称" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item>
|
|
|
+ <el-button @click="handleSearch">搜索</el-button>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item>
|
|
|
+ <el-button plain @click="resetSearchKey">重置</el-button>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item>
|
|
|
+ <el-button type="primary" @click="handleInsert">新增</el-button>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ </div>
|
|
|
+ <div class="container-main">
|
|
|
+ <el-table style="width: 100%" :data="list" @row-click="handleRowClick">
|
|
|
+ <el-table-column prop="supplierName" label="供应商名称" />
|
|
|
+ <el-table-column prop="contactPerson" label="联系人" />
|
|
|
+ <el-table-column prop="contactPhone" label="联系电话" />
|
|
|
+ <el-table-column prop="unitAddress" label="所在地" />
|
|
|
+ <el-table-column label="操作" width="200px">
|
|
|
+ <template #default="scope">
|
|
|
+ <el-button size="small" @click.stop="handleEdit(scope.row)">修改</el-button>
|
|
|
+ <el-button size="small" type="danger" @click.stop="handleDelete(scope.row)">
|
|
|
+ 删除
|
|
|
+ </el-button>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ <el-pagination
|
|
|
+ background
|
|
|
+ layout="prev, pager, next"
|
|
|
+ :total="total"
|
|
|
+ style="margin-top: 20px"
|
|
|
+ :hide-on-single-page="true"
|
|
|
+ @current-change="handleCurrentChange"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 新增供应商的表单弹窗 -->
|
|
|
+ <el-dialog
|
|
|
+ v-model="dialogFormVisible"
|
|
|
+ :close-on-click-modal="false"
|
|
|
+ :title="dialogTitle"
|
|
|
+ @close="handleCloseDialog"
|
|
|
+ >
|
|
|
+ <el-form label-width="130px" :model="supply" ref="supplyRef">
|
|
|
+ <el-form-item prop="supplierId">
|
|
|
+ <el-input style="display: none" v-model="supply.supplierId" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="供应商的名称" label-position="right" prop="supplierName">
|
|
|
+ <el-input v-model="supply.supplierName" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="统一社会信用代码" label-position="right" prop="unifiedCreditCode">
|
|
|
+ <el-input v-model="supply.unifiedCreditCode" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="联系人" label-position="right" prop="contactPerson">
|
|
|
+ <el-input v-model="supply.contactPerson" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="联系电话" label-position="right" prop="contactPhone">
|
|
|
+ <el-input v-model="supply.contactPhone" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="开户银行" label-position="right" prop="openingBank">
|
|
|
+ <el-input v-model="supply.openingBank" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="开户银行账户" label-position="right" prop="bankAccount">
|
|
|
+ <el-input v-model="supply.bankAccount" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row>
|
|
|
+ <el-col>
|
|
|
+ <el-form-item label="单位所在地" label-position="right" prop="unitAddress">
|
|
|
+ <el-input v-model="supply.unitAddress" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-form-item v-if="isDetail">
|
|
|
+ <el-button @click="cancelSupply">取消</el-button>
|
|
|
+ <el-button type="primary" @click="submitSupply">提交</el-button>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ </el-dialog>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script lang="ts" setup>
|
|
|
+import { ref, reactive } from 'vue'
|
|
|
+import * as SupplyApi from '@/api/supplier'
|
|
|
+
|
|
|
+const searchKey = ref('')
|
|
|
+const total = ref(0)
|
|
|
+const list = ref([])
|
|
|
+const dialogFormVisible = ref(false)
|
|
|
+const queryParams = reactive({
|
|
|
+ pageNo: 1,
|
|
|
+ pageSize: 10,
|
|
|
+ supplierName: ''
|
|
|
+})
|
|
|
+// 初始化表单数据
|
|
|
+const supply = reactive({
|
|
|
+ supplierId: '',
|
|
|
+ supplierName: '',
|
|
|
+ contactPerson: '',
|
|
|
+ contactPhone: '',
|
|
|
+ openingBank: '',
|
|
|
+ bankAccount: '',
|
|
|
+ unitAddress: '',
|
|
|
+ unifiedCreditCode: ''
|
|
|
+})
|
|
|
+const supplyRef = ref()
|
|
|
+let isUpdate = false
|
|
|
+const isDetail = ref(true)
|
|
|
+const dialogTitle = ref('新增供应商')
|
|
|
+
|
|
|
+// 获取供应商列表
|
|
|
+const supplyForm = async (json) => {
|
|
|
+ const data = await SupplyApi.getSupplierPage(json)
|
|
|
+ total.value = data.total
|
|
|
+ list.value = data.records
|
|
|
+}
|
|
|
+
|
|
|
+// 按供应商名称搜索
|
|
|
+const handleSearch = () => {
|
|
|
+ queryParams.supplierName = searchKey.value
|
|
|
+ supplyForm(queryParams)
|
|
|
+}
|
|
|
+
|
|
|
+// 重置搜索关键字
|
|
|
+const resetSearchKey = () => {
|
|
|
+ searchKey.value = ''
|
|
|
+ queryParams.supplierName = searchKey.value
|
|
|
+ supplyForm(queryParams)
|
|
|
+}
|
|
|
+
|
|
|
+// 新增供应商弹窗
|
|
|
+const handleInsert = () => {
|
|
|
+ dialogTitle.value = '新增供应商'
|
|
|
+ isDetail.value = true
|
|
|
+ dialogFormVisible.value = true
|
|
|
+ supply.supplierId = ''
|
|
|
+ supply.supplierName = ''
|
|
|
+ supply.contactPerson = ''
|
|
|
+ supply.contactPhone = ''
|
|
|
+ supply.openingBank = ''
|
|
|
+ supply.bankAccount = ''
|
|
|
+ supply.unitAddress = ''
|
|
|
+ supply.unifiedCreditCode = ''
|
|
|
+}
|
|
|
+
|
|
|
+// 新增/更新供应商
|
|
|
+const submitSupply = async () => {
|
|
|
+ let result
|
|
|
+ if (isUpdate) {
|
|
|
+ result = await SupplyApi.updateSupplier(supply)
|
|
|
+ isUpdate = false
|
|
|
+ } else {
|
|
|
+ result = await SupplyApi.createSupplier(supply)
|
|
|
+ }
|
|
|
+ if (result) {
|
|
|
+ supplyForm(queryParams)
|
|
|
+ dialogFormVisible.value = false
|
|
|
+ cancelSupply()
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+// 取消新增供应商
|
|
|
+const cancelSupply = () => {
|
|
|
+ supplyRef.value.resetFields()
|
|
|
+ dialogFormVisible.value = false
|
|
|
+ isUpdate = false
|
|
|
+}
|
|
|
+
|
|
|
+// 更新供应商
|
|
|
+const handleEdit = (row) => {
|
|
|
+ dialogTitle.value = '修改供应商'
|
|
|
+ isDetail.value = true
|
|
|
+ dialogFormVisible.value = true
|
|
|
+ supply.supplierId = row.supplierId
|
|
|
+ supply.supplierName = row.supplierName
|
|
|
+ supply.contactPerson = row.contactPerson
|
|
|
+ supply.contactPhone = row.contactPhone
|
|
|
+ supply.openingBank = row.openingBank
|
|
|
+ supply.bankAccount = row.bankAccount
|
|
|
+ supply.unitAddress = row.unitAddress
|
|
|
+ supply.unifiedCreditCode = row.unifiedCreditCode
|
|
|
+ isUpdate = true
|
|
|
+}
|
|
|
+
|
|
|
+// 删除供应商
|
|
|
+const handleDelete = async (row) => {
|
|
|
+ const id = row.supplierId
|
|
|
+ const result = await SupplyApi.deleteSupplier(id)
|
|
|
+ if (result) {
|
|
|
+ supplyForm(queryParams)
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+// 点击行查看详情
|
|
|
+const handleRowClick = (row) => {
|
|
|
+ dialogTitle.value = '供应商详情'
|
|
|
+ isDetail.value = false
|
|
|
+ dialogFormVisible.value = true
|
|
|
+ supply.supplierId = row.supplierId
|
|
|
+ supply.supplierName = row.supplierName
|
|
|
+ supply.contactPerson = row.contactPerson
|
|
|
+ supply.contactPhone = row.contactPhone
|
|
|
+ supply.openingBank = row.openingBank
|
|
|
+ supply.bankAccount = row.bankAccount
|
|
|
+ supply.unitAddress = row.unitAddress
|
|
|
+ supply.unifiedCreditCode = row.unifiedCreditCode
|
|
|
+}
|
|
|
+
|
|
|
+const handleCurrentChange = (index) => {
|
|
|
+ queryParams.pageNo = index
|
|
|
+ supplyForm(queryParams)
|
|
|
+}
|
|
|
+
|
|
|
+// 初始化列表数据
|
|
|
+onMounted(() => {
|
|
|
+ supplyForm({ pageNo: 1, pageSize: 10 })
|
|
|
+})
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+@import './index.scss';
|
|
|
+</style>
|