erp/resources/frontend/src/views/supplyChain/supplier.vue

<template>
  <div class="pageBox">
    <el-card>
      <div class="opaBox">
        <el-button type="primary" icon="el-icon-plus" @click="handleAdd">新增</el-button>
      </div>
      <el-table v-loading="loading" :data="supplierList" style="width: 100%" border>
        <el-table-column prop="id" label="供应商ID" width="80" align="center" />
        <el-table-column prop="supplier_name" label="供应商名称" />
        <el-table-column prop="company_name" label="供应商ID" />
        <el-table-column prop="address" label="地址" />
        <el-table-column prop="link_tel" label="联系方式" align="center" />
        <el-table-column prop="payment_account" label="支付账户" />
        <el-table-column prop="agent_name" label="代理名称" />
        <el-table-column prop="agent_id" label="代理人id" />
        <el-table-column prop="created_at" label="创建时间" align="center" />
        <el-table-column label="操作" width="180" align="center">
          <template slot-scope="scope">
            <el-button type="primary" @click="handleEdit(scope.row)" icon="el-icon-edit" size="mini">编辑</el-button>
            <el-button type="danger" @click="handleRemove(scope.row.id)" icon="el-icon-delete" size="mini">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="page-pagination">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="page"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="pageSize"
          layout="prev, pager, next, jumper, sizes, total"
          :total="total">
        </el-pagination>
      </div>
    </el-card>

    <el-dialog :title="gysInfo.id ? '编辑' : '新增供应商'" :visible.sync="dialogVisible" width="500px">
      <el-form label-width="100px">
        <el-form-item label="供应商名称">
          <el-input v-model="gysInfo.supplier_name" clearable></el-input>
        </el-form-item>
        <el-form-item label="公司名称">
          <el-input v-model="gysInfo.company_name" clearable></el-input>
        </el-form-item>
        <el-form-item label="地址">
          <el-input v-model="gysInfo.address" clearable></el-input>
        </el-form-item>
        <el-form-item label="联系方式">
          <el-input v-model="gysInfo.link_tel" clearable></el-input>
        </el-form-item>
        <el-form-item label="支付方式">
          <el-input v-model="gysInfo.payment_account" clearable></el-input>
        </el-form-item>
        <el-form-item label="代理人名称">
          <el-input v-model="gysInfo.agent_name"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="commitSupplier" :loading="commitloading">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getSupplier, removeSupplier, addSupplier, updateSupplier } from "@/api/supplyChain"
export default {
  data() {
    return {
      loading: false,
      page: 1,
      pageSize: 10,
      total: 0,
      supplierList: [],
      dialogVisible: false,
      gysInfo: {},
      commitloading: false,
    }
  },
  methods: {
    fetchList() {
      this.loading = true
      let params = {
        page: this.page,
        per_page: this.pageSize
      }
      getSupplier(params).then((res) => {
        this.supplierList = res.data.data
        this.total = res.data.meta.total
        this.loading = false
      }).catch(() => {
        this.loading = false
      })
    },
    handleSizeChange(val) {
      this.page = 1
      this.pageSize = val
      this.fetchList()
    },
    handleCurrentChange(val) {
      this.page = val
      this.fetchList()
    },
    // 新增供应商
    handleAdd() {
      this.gysInfo = {}
      this.dialogVisible = true
    },
    handleEdit(row) {
      this.gysInfo = JSON.parse(JSON.stringify(row))
      this.dialogVisible = true
    },
    commitSupplier() {
      this.commitloading = true
      if(this.gysInfo.id) {
        updateSupplier(this.gysInfo.id, this.gysInfo).then((res) => {
          this.fetchList()
          this.$message({ type: "success", message: "更新成功!" })
          this.dialogVisible = false
          this.commitloading = false
        }).catch(() => {
          this.commitloading = false
        })
      } else {
        addSupplier(this.gysInfo).then((res) => {
          this.page = 1
          this.fetchList()
          this.$message({ type: "success", message: "新增成功!" })
          this.dialogVisible = false
          this.commitloading = false
        }).catch(() => {
          this.commitloading = false
        })
      }
    },
    handleRemove(id) {
      this.$confirm("确定删除此条信息吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        removeSupplier(id).then(() => {
          this.fetchList()
          this.$message({ type: "success", message: "删除成功!" })
          this.dialogVisible = false
        })
      })
    }
  },
  mounted() {
    this.fetchList()
  }
}
</script>

<style lang="scss" scoped>
  .opaBox{
    margin-bottom: 15px;
  }
</style>