avue页面布局 api 引用

展示 

 

index.vue 

<template>
  <basic-container>
    <avue-crud :option="option"
               :table-loading="loading"
               :data="data"
               :page="page"
               :permission="permissionList"
           
               :search.sync="search"
               :before-close='beforeClose'
               v-model="form"
               ref="crud"
               @row-update="rowUpdate"
               @row-save="rowSave"
               @row-del="rowDel"
               @search-change="searchChange"
          @search-reset="resetChange"
               @selection-change="selectionChange"
            
               @on-load="onLoad">
    </avue-crud>
 
  </basic-container>
</template>

<script>
  import {getList,  add, update, remove} from "@/api/budget/budget";
  import {mapGetters} from "vuex";
 
  import Cookies from 'js-cookie'
  export default {

    data() {
      return {
        excelBox: false,
        val: {
          id:'',
          houseNumber:'',
          name:'budget',
        },
        selectHouseNumber:false,
        form: {},  //存储返回值
        query: {},
        loading: true,
        page: {
          pageSize: 10,
          currentPage: 1,
          total: 0
        },
        selectionList: [],
        search:{},
        option: {
       
          indexLabel:'序号',
          align:'center',
          column: [
          {
              label: '基本情况',
              children: [
                {
                  label: "资产编号",
                  prop: "houseNumber",
                  width:140,
                  search: true,
                },
                {
                  label: "资产名称",
                  prop: "assetName",
                  search: true,
                },
              ],
            },
            {
                  label: "使用状态",
                  prop: "zsStatus",
                  formatter:(val,value,label)=>{
                    if(val.zsStatus==1){
                      return  '出租'
                    }
                    if(val.zsStatus==2){
                      return  '出售'
                    }
                  },
                },
  

            {
              label: '支出预算',
              children: [

                {
                  label: "税费",
                  prop: "taxation",
                  value:0
                },
                {
                  label: "暂列金",
                  prop: "provisionalSums",
                  value:0
                }, {
                  label: "支出合计",
                  prop: "expenditureTotal",
                  value:0
                }
                , {
                  label: "relet",
                  prop: "relet",
                  value:0
                },
              ]

            },
            {
              label: "备注",
              prop: "remarks",
            },
          ]
        },
      };
    },
    computed: {
      ...mapGetters(["permission"]),
      permissionList() {

      },
  
    },
    mounted(){
      
    },
    watch: {
      // 有的值 是需要多个值 进行计算的  我们获取值进行计算 然后在进行渲染
      'form.relet' (val) {
        this.form.incomeTotal=parseFloat(val)+parseFloat(this.form.newLease)+parseFloat(this.form.incomeOther)
      },
      

      // 税费
      'form.taxation' (val) {
        this.form.expenditureTotal=parseFloat(val)+
          parseFloat(this.form.upkeepDismantle)+
          parseFloat(this.form.estimateIdentify)+
          parseFloat(this.form.provisionalSums)+
          parseFloat(this.form.expenditureOther)
      },
    
      // 暂列金
      'form.provisionalSums' (val) {
        this.form.expenditureTotal=parseFloat(val)+
          parseFloat(this.form.taxation)+
          parseFloat(this.form.upkeepDismantle)+
          parseFloat(this.form.estimateIdentify)+
          parseFloat(this.form.expenditureOther)
      },
    
      'form'(val){
        if(val.houseNumber!=''){
          val.realitySurplus=val.realityIncome-val.realityExpenditure
          // 合计
          val.expenditureTotal=parseFloat(val.taxation)+parseFloat(val.upkeepDismantle)+parseFloat(val.estimateIdentify)+parseFloat(val.provisionalSums)+parseFloat(val.expenditureOther)
          val.incomeTotal=parseFloat(val.incomeOther)+parseFloat(val.relet)+parseFloat(val.newLease)
        }
      },
    },
    methods: {
      getCookie(){
        if(Cookies.get('username') == ''){
          return false
        }
        else{
          return true
        }
      },
      beforeClose(done,type){
        this.$refs.crud.$refs.dialogForm.boxType=''
        done();
      },
  
  
      budgetDetails(row){
        this.$router.push({path:'/details/budgetDetails',query: {row}});
      },

      // 清空了
      resetChange (item) {
      this.$message.success('清空回调')
    },


 
      // 新增保存提示
      rowSave(row, done, loading) {
        add(row).then(() => {
          done();
          this.onLoad(this.page);
          this.$message({
            type: "success",
            message: "操作成功!"
          });
        }, error => {
          window.console.log(error);
          loading();
        });
      },
      // 点击编辑 提示
      rowUpdate(row, index, done, loading) {
        update(row).then(() => {
          done();
          this.onLoad(this.page);
          this.$message({
            type: "success",
            message: "编辑操作成功!"
          });
        }, error => {
          window.console.log(error);
          loading();
        });
      },
      // 删除
      rowDel(row) {
        this.$confirm("确定将选择数据删除?", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(() => {
            return remove(row.id);
          })
          .then(() => {
            this.onLoad(this.page);
            this.$message({
              type: "success",
              message: "操作成功!"
            });
          });
      },
    // 搜索
      searchChange(params, done) {
        this.query = params;
        this.page.currentPage = 1;
        this.onLoad(this.page, params);
        done();
      },
      selectionChange(list) {
        this.selectionList = list;
      },
      selectionClear() {
        this.selectionList = [];
        this.$refs.crud.toggleSelection();
      },
     
   
      onLoad(page, params = {}) {
        this.loading = true;
        getList(page.currentPage, page.pageSize, Object.assign(params, this.query)).then(res => {
          const data = res.data.data;
          this.page.total = data.total;
          this.data = data.records;
          this.loading = false;
          this.selectionClear();

          if(Cookies.get('username')!=''){
            this.option.editBtn=false
            this.option.delBtn=false
            this.option.addBtn=false
          }

        });
      }
    }
  };
</script>

<style>
</style>

 "@/api/budget/budget";

import request from '@/router/axios';

export const getList = (current, size, params) => {
  return request({
    url: '/api/budget/list',
    method: 'get',
    params: {
      ...params,
      current,
      size,
    }
  })
}



export const remove = (ids) => {
  return request({
    url: '/api/budget/remove',
    method: 'post',
    params: {
      ids,
    }
  })
}

export const add = (row) => {
  return request({
    url: '/api/budget/submit',
    method: 'post',
    data: row
  })
}

export const update = (row) => {
  return request({
    url: '/api/budget/submit',
    method: 'post',
    data: row
  })
}

vue.config.js 

module.exports = {
  lintOnSave: true,
  productionSourceMap: false,
  chainWebpack: (config) => {
    //忽略的打包文件
    config.externals({
      'vue': 'Vue',
      'vue-router': 'VueRouter',
      'vuex': 'Vuex',
      'axios': 'axios',
      'element-ui': 'ELEMENT',
    })
    const entry = config.entry('app')
    entry
      .add('babel-polyfill')
      .end()
    entry
      .add('classlist-polyfill')
      .end()
    entry
      .add('@/mock')
      .end()
  },
  devServer: {
    // 端口配置
    port: 1999,
    // 反向代理配置
    proxy: {
      '/api': {
        target: 'http://192.168.56.1:7777',
        ws: true,
        pathRewrite: {
          '^/api': '/'
        }
      }
    },
  }
}

 数值参考

 

文档参考 

搜索 | Avue (avuejs.com)

avue-crud属性配置项参数笔记分享 - 小金子J - 博客园 (cnblogs.com)