jiahe_device/src/views/capital/supplier.vue

<!-- 委托客户 -->
<!-- 供应商管理 -->
<template>
  <basic-container>
    <SearchHeader :searchForm="searchForm" :searchText="searchText" @searchHandle="searchHandle" @addHandle="addHandle" />
    <avue-crud
      id="avue-id"
      ref="crud"
      :option="option"
      :data="data"
      :page.sync="page"
      :table-loading="loading"
      @row-save="rowSave"
      @row-update="rowUpdate"
      @row-del="rowDel"
      @current-change="currentChange"
      @size-change="sizeChange"
    >
    <template slot-scope="{type}" slot="menuForm">
      <el-button  size="small" @click="$refs.crud.closeDialog()" class="button-el">取消</el-button>
      <el-button  size="small" v-if="type=='add'" @click="$refs.crud.rowSave()" class="button-el">确定</el-button>
      <el-button  size="small" v-if="type=='edit'" @click="$refs.crud.rowUpdate()" class="button-el">提交</el-button>
    </template>
      <template slot-scope="{row,index}" slot="menu">
        <el-button @click="$refs.crud.rowEdit(row,index)" class="look">编辑</el-button>
        <el-button @click="$refs.crud.rowDel(row,index)" class="look">删除</el-button>
	    </template>
    </avue-crud>
  </basic-container>
</template>

<script>
import { getList, remove, update } from "@/api/capital/supplier";
import { save } from "@/api/capital/productstoreList";
import { tableOption} from '@/const/capital/supplier.js'
export default {
  data() {
    return {
      loading: false,
      page: {
        current: 1,
        total: 1, 
        size: 10
      },
      // 搜索
      searchForm: {
        name: "",
      },
      searchText: {
        flag: 3,
          addText: "新增"
        },
      option: tableOption
    };
  },
  mounted() {
    if(JSON.stringify(this.$store.state.client.supplierParams) !== '{}') {
      this.searchForm = this.$store.state.client.supplierParams
    }
    this.onLoad()
  },
  methods: {
    // 分页
    currentChange(currentPage) {
      this.page.current = currentPage;
      this.onLoad()
    },
    sizeChange(pageSize) {
      this.page.size = pageSize;
      this.onLoad()
    },
    // 搜索
    searchHandle(item, index) {
      this.page.current = 1
      if (index === 1) {
        this.searchForm = {
          name: "",
        };
      } else {
        this.searchForm = item
      }
      this.onLoad()
      this.$store.dispatch("changeSetting", {title:'supplierParams',form: this.searchForm})
    },
    // 新增
    addHandle() {
      this.$refs.crud.rowAdd();
    },

    onLoad() {
      this.loading = true
      const {current,size} = this.page;
      getList( Object.assign({ current, size }, this.searchForm)).then((res) => {
        const {records,total} = res.data.data
        this.data = records
        this.page.total = total
        this.loading = false
      });
    },
    //新增
    rowSave(from, done, loading) {
      save(from).then((res) => {
         this.$message.success("新增成功");
         this.onLoad();
        })
      done();
    },
    //删除
    rowDel(form, index) {
      this.$confirm("此操作会删除该数据，且无法恢复，确定要删除吗?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          remove(form.id).then((res) => {
            console.log(res);
            this.$message.success("删除成功");
            this.onLoad();
          });
        })
    },
    //修改
    rowUpdate(form, index, done, loading) {
      console.log(form,'from')
      update(form).then((res) => {
        this.onLoad();
        done();
      })
    },
  },
};
</script>

<style lang="scss" scoped>
// 取消
.button-el {
  color: #999999;
  background-color: #fff;
  border-color: #e4e7ec;
  height: 46px;
  width: 100px;
  border-radius: 0px;
  margin-left: 20px;
}
// 确定
.button-el:hover {
  color: #fff;
  background-color: #1e60f5;
  border-color: #1e60f5;
  height: 46px;
  width: 100px;
  border-radius: 0px;
  margin-left: 20px;
}
/deep/ .avue-crud__pagination {
  height: 20px;
  padding: 10px;
  // padding-top: 30px;
  // padding-bottom: 30px;
}
</style>