|
@@ -0,0 +1,315 @@
|
|
|
+<template>
|
|
|
+ <el-container>
|
|
|
+ <el-header
|
|
|
+ class="gva-search-box"
|
|
|
+ style="line-height: 60px"
|
|
|
+ >
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-form
|
|
|
+ inline
|
|
|
+ style="margin-top: 10px"
|
|
|
+ >
|
|
|
+ <el-form-item label="名称">
|
|
|
+ <el-input
|
|
|
+ v-model="searchSupplierList.name"
|
|
|
+ placeholder="请输入名称"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item>
|
|
|
+ <el-button @click="getData">搜索</el-button>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8" />
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-button
|
|
|
+ type="primary"
|
|
|
+ @click="openSupplierAdd"
|
|
|
+ >新增</el-button>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </el-header>
|
|
|
+ <el-main
|
|
|
+ class="gva-table-box"
|
|
|
+ >
|
|
|
+ <el-table
|
|
|
+ :data="supplierList"
|
|
|
+ style="height: 600px"
|
|
|
+ >
|
|
|
+ <el-table-column
|
|
|
+ label="供应商名称"
|
|
|
+ prop="name"
|
|
|
+ align="center"
|
|
|
+ />
|
|
|
+ <el-table-column
|
|
|
+ label="负责人"
|
|
|
+ prop="contactName"
|
|
|
+ align="center"
|
|
|
+ />
|
|
|
+ <el-table-column
|
|
|
+ label="城市"
|
|
|
+ prop="city"
|
|
|
+ align="center"
|
|
|
+ />
|
|
|
+ <el-table-column
|
|
|
+ label="地址"
|
|
|
+ prop="address"
|
|
|
+ align="center"
|
|
|
+ />
|
|
|
+ <el-table-column
|
|
|
+ label="邮箱"
|
|
|
+ prop="email"
|
|
|
+ align="center"
|
|
|
+ />
|
|
|
+ <el-table-column
|
|
|
+ label="电话"
|
|
|
+ prop="phone"
|
|
|
+ align="center"
|
|
|
+ />
|
|
|
+ <el-table-column
|
|
|
+ label="备注"
|
|
|
+ prop="remarks"
|
|
|
+ align="center"
|
|
|
+ />
|
|
|
+ <el-table-column
|
|
|
+ label="操作"
|
|
|
+ width="150"
|
|
|
+ align="center"
|
|
|
+ >
|
|
|
+ <template #default="scope">
|
|
|
+ <el-button
|
|
|
+ size="small"
|
|
|
+ type="primary"
|
|
|
+ @click="openSupplierEdit(scope.row)"
|
|
|
+ >编辑</el-button>
|
|
|
+ <el-button
|
|
|
+ size="small"
|
|
|
+ type="danger"
|
|
|
+ @click="supplierDelete(scope.row)"
|
|
|
+ >删除</el-button>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ <!-- 分页-->
|
|
|
+ <div class="gva-pagination">
|
|
|
+ <el-pagination
|
|
|
+ :current-page="searchSupplierList.pageInfo.page"
|
|
|
+ :page-size="searchSupplierList.pageInfo.pageSize"
|
|
|
+ :page-sizes="[10, 30, 50, 100]"
|
|
|
+ :total="total"
|
|
|
+ layout="total, sizes, prev, pager, next, jumper"
|
|
|
+ @current-change="handleCurrentChange"
|
|
|
+ @size-change="handleSizeChange"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <el-drawer
|
|
|
+ v-model="isOpenSupplierEdit"
|
|
|
+ title="修改供应商信息"
|
|
|
+ direction="rtl"
|
|
|
+ size="30%"
|
|
|
+ >
|
|
|
+ <div>
|
|
|
+ <el-form
|
|
|
+ v-model="supplierEditData"
|
|
|
+ label-position="left"
|
|
|
+ label-width="auto"
|
|
|
+ style="max-width: 400px"
|
|
|
+ >
|
|
|
+ <el-form-item label="供应商名称">
|
|
|
+ <el-input v-model="supplierEditData.name" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="负责人">
|
|
|
+ <el-input v-model="supplierEditData.contactName" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="城市">
|
|
|
+ <el-input v-model="supplierEditData.city" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="地址">
|
|
|
+ <el-input v-model="supplierEditData.address" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="邮箱">
|
|
|
+ <el-input v-model="supplierEditData.email" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="电话">
|
|
|
+ <el-input v-model="supplierEditData.phone" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="备注">
|
|
|
+ <el-input v-model="supplierEditData.remarks" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item>
|
|
|
+ <el-button
|
|
|
+ type="primary"
|
|
|
+ @click="supplierSubmit"
|
|
|
+ >提交</el-button>
|
|
|
+ <el-button @click="isOpenSupplierEdit = false">关闭</el-button>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ </div>
|
|
|
+ </el-drawer>
|
|
|
+ <el-drawer
|
|
|
+ v-model="isOpenSupplierAdd"
|
|
|
+ title="新增供应商信息"
|
|
|
+ direction="rtl"
|
|
|
+ size="30%"
|
|
|
+ >
|
|
|
+ <div>
|
|
|
+ <el-form
|
|
|
+ v-model="supplierAddData"
|
|
|
+ label-position="left"
|
|
|
+ label-width="auto"
|
|
|
+ style="max-width: 400px"
|
|
|
+ >
|
|
|
+ <el-form-item label="供应商名称">
|
|
|
+ <el-input v-model="supplierAddData.name" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="负责人">
|
|
|
+ <el-input v-model="supplierAddData.contactName" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="城市">
|
|
|
+ <el-input v-model="supplierAddData.city" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="地址">
|
|
|
+ <el-input v-model="supplierAddData.address" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="邮箱">
|
|
|
+ <el-input v-model="supplierAddData.email" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="电话">
|
|
|
+ <el-input v-model="supplierAddData.phone" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="备注">
|
|
|
+ <el-input v-model="supplierAddData.remarks" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item>
|
|
|
+ <el-button
|
|
|
+ type="primary"
|
|
|
+ @click="supplierAddSubmit"
|
|
|
+ >提交</el-button>
|
|
|
+ <el-button @click="isOpenSupplierAdd = false">关闭</el-button>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ </div>
|
|
|
+ </el-drawer>
|
|
|
+ </el-main>
|
|
|
+ </el-container>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup>
|
|
|
+import { onMounted, ref } from 'vue'
|
|
|
+import { createSupplier, deleteSupplier, querySupplierList, updateSupplier } from '@/api/storehouse'
|
|
|
+import { ElMessage, ElMessageBox } from 'element-plus'
|
|
|
+
|
|
|
+const supplierList = ref()
|
|
|
+const searchSupplierList = ref({
|
|
|
+ pageInfo: {
|
|
|
+ page: 1,
|
|
|
+ pageSize: 10,
|
|
|
+ },
|
|
|
+ name: '',
|
|
|
+})
|
|
|
+const total = ref(0)
|
|
|
+
|
|
|
+const getData = async() => {
|
|
|
+ await querySupplierList(searchSupplierList.value).then(res => {
|
|
|
+ supplierList.value = res.data.list
|
|
|
+ total.value = res.data.total
|
|
|
+ console.log(res)
|
|
|
+ })
|
|
|
+}
|
|
|
+
|
|
|
+// 分页
|
|
|
+const handleSizeChange = (val) => {
|
|
|
+ searchSupplierList.value.pageSize = val
|
|
|
+ getData()
|
|
|
+}
|
|
|
+
|
|
|
+const handleCurrentChange = (val) => {
|
|
|
+ searchSupplierList.value.page = val
|
|
|
+ getData()
|
|
|
+}
|
|
|
+// 修改
|
|
|
+const supplierEditData = ref()
|
|
|
+const isOpenSupplierEdit = ref(false)
|
|
|
+const openSupplierEdit = (val) => {
|
|
|
+ console.log('修改', val)
|
|
|
+ isOpenSupplierEdit.value = true
|
|
|
+ supplierEditData.value = val
|
|
|
+}
|
|
|
+
|
|
|
+const supplierSubmit = async() => {
|
|
|
+ await updateSupplier(supplierEditData.value).then(res => {
|
|
|
+ if (res.code === 0) {
|
|
|
+ ElMessage.success('修改成功')
|
|
|
+ getData()
|
|
|
+ } else {
|
|
|
+ ElMessage.error('修改失败')
|
|
|
+ }
|
|
|
+ isOpenSupplierEdit.value = false
|
|
|
+ })
|
|
|
+}
|
|
|
+
|
|
|
+const supplierDelete = (val) => {
|
|
|
+ ElMessageBox.confirm(
|
|
|
+ '将永久删除该信息。是否继续?',
|
|
|
+ '删除',
|
|
|
+ {
|
|
|
+ confirmButtonText: '确定',
|
|
|
+ cancelButtonText: '取消',
|
|
|
+ type: 'warning',
|
|
|
+ }
|
|
|
+ )
|
|
|
+ .then(async() => {
|
|
|
+ await deleteSupplier(val).then(res => {
|
|
|
+ if (res.code === 0) {
|
|
|
+ ElMessage.success('删除成功')
|
|
|
+ getData()
|
|
|
+ } else {
|
|
|
+ ElMessage.error('删除失败')
|
|
|
+ }
|
|
|
+ })
|
|
|
+ })
|
|
|
+ .catch(() => {
|
|
|
+ ElMessage({
|
|
|
+ type: 'info',
|
|
|
+ message: '删除已取消',
|
|
|
+ })
|
|
|
+ })
|
|
|
+}
|
|
|
+
|
|
|
+// 新增
|
|
|
+const supplierAddData = ref({
|
|
|
+ name: '',
|
|
|
+ contactName: '',
|
|
|
+ city: '',
|
|
|
+ address: '',
|
|
|
+ email: '',
|
|
|
+ phone: '',
|
|
|
+ remarks: ''
|
|
|
+})
|
|
|
+const isOpenSupplierAdd = ref(false)
|
|
|
+const openSupplierAdd = () => {
|
|
|
+ isOpenSupplierAdd.value = true
|
|
|
+}
|
|
|
+
|
|
|
+const supplierAddSubmit = async() => {
|
|
|
+ if (supplierAddData.value.name === '') {
|
|
|
+ ElMessage.error('供应商名称不能为空')
|
|
|
+ return
|
|
|
+ }
|
|
|
+ await createSupplier(supplierAddData.value).then(res => {
|
|
|
+ if (res.code === 0) {
|
|
|
+ ElMessage.success('添加成功')
|
|
|
+ getData()
|
|
|
+ } else {
|
|
|
+ ElMessage.error('添加失败')
|
|
|
+ }
|
|
|
+ isOpenSupplierAdd.value = false
|
|
|
+ })
|
|
|
+}
|
|
|
+
|
|
|
+onMounted(() => {
|
|
|
+ getData()
|
|
|
+})
|
|
|
+</script>
|