【vue avue】初始化代码 和 增删改查

一、初始化页面

• Code

<template>
<basic-container>

    <avue-crud
      :table-loading="loading"
      :data="tableData"
      :option="option"
      v-model="form"
      :page.sync="page"
      @row-del="rowDel"
      @search-change="searchChange"
      @selection-change="selectionChange"
      @search-reset="searchReset"
      ref="crud"
      @on-load="onLoad"
      @current-change="currentChange"
      @size-change="sizeChange"
      @refresh-change="refreshChange"
      :permission="permissionList"
    >
      <template slot="menuLeft">
        <!-- 左菜单左上角-新增 -->
        <el-button
          type="primary"
          icon="el-icon-plus"
          size="small"
          @click="rowAdd"
        >
          新 增
        </el-button>
        <!-- 左菜单左上角-删除 -->
        <el-button
          type="danger"
          size="small"
          icon="el-icon-delete"
          plain
          @click="handleBtn('delete')"
        >
          删 除
        </el-button>

        <el-button
          type="default"
          size="small"
          plain
          @click="handleBtn('enable')"
        >
          启 用
        </el-button>

        <el-button
          type="default"
          size="small"
          plain
          @click="handleBtn('disable')"
        >
          停 用
        </el-button>
      </template>

      <!-- 导航类型 -->
      <template slot-scope="{ row }" slot="navigationType">
        {
   {
    navigationTypeData(row) }}
      </template>

      <template slot-scope="{ row }" slot="menu">
        <el-button type="text" size="small" @click="rowEdit(row)">
          编辑
        </el-button>
        <el-button type="text" size="small" @click="rowDel(row)">
          删除
        </el-button>
      </template>

      <!-- 显隐列设置 -->
      <template slot="menuRight">
        <showHidden
          :column.sync="option.column"
          moduleType="TASK"
          :constData.sync="constOptionData"
        ></showHidden>
      </template>
    </avue-crud>

</template>

<script>
import {
    startMapAction } from '@/views/base/map/http/request';
import detailForm from '@/components/detail-form/index.vue';
import {
    getStore } from '@/utils/store';
import showHidden from '@/components/table-implicit/index.vue';
// 初始化默认要显示的列，供列显隐中的恢复默认使用
let customConstant = [
  'code',
  'name',
  'priority',
  'isOnLoad',
];
export default {
   
components: {
   
    detailForm,
    showHidden,
  },
  data() {
   
    return {
   
      // 后台端口出现
      // （1）改成total: 0,
      // （2）onload(){}相关total内容改的打开
      page: {
   
        pageSize: 10,
        currentPage: 1,
        total: 0,
      },
      loading: false,
      // 表格绑定的内容
      form: {
   },
      // 搜索框查询的内容
      query: {
   },
      search: {
   },
      //选中行的数据
      selectionList: [],
      // 默认显示哪些列
      constOptionData: [],
      // 列表数据
      tableData: [],
      // 新增弹窗
      addDrawer: false,
      // 编辑弹窗
      editDrawer: false,
    };
  },
  created() {
   
    //new
    let column = localStorage.getItem(this.$route.path);
    if (column) {
   
      this.option.column = JSON.parse(column);
      console.log(this.option);
    }
    // 显隐列
    this.constOptionData = customConstant;
    if (getStore({
    name: 'TASK' })) {
   
      let data = getStore({
    name: 'TASK' });
      data.forEach((item) => {
   
        this.option.column.forEach((chileItem) => {
   
          if (item.prop === chileItem.prop) {
   
            chileItem.hide = item.hide;
          }
        });
      });
    }
  },
  methods: {
   
    // 加载
    onLoad(page, params = {
   }) {
   
      this.loading = true;
      getList(
        page.currentPage,
        page.pageSize,
        Object.assign(params, this.query) // 第三个参数：data
      ).then((res) => {
   
        this.page.total = res.data.total;
        console.log('列表被打印啦：', res);
        this.tableData = res.data.records;
        this.loading = false;
      });
    },
    /* 方法 ------------------------------------------------------------------------- */

    // 搜索按钮
    searchChange(params, done) {
   
      // this.query = Object.assign(params, this.search);
      this.query = params;
      this.page.currentPage = 1;
      this.onLoad(this.page, this.query);
      done();
    },

    // 分页页码改变时
    currentChange(currentPage) {
   
      this.page.currentPage = currentPage;
    },
    // 页面个数改变时
    sizeChange(pageSize) {
   
      this.page.pageSize = pageSize;
    },
    refreshChange() {
   
      this.onLoad(this.page, this.query);
    },
    // 重置按钮
    searchReset() {
   
      this.query = {
   };
      this.search = {
   };
      this.onLoad(this.page);
    },
    //行选中
    selectionChange(list) {
   
      this.selectionList = list;
    },

  },
};
</script>

<style scoped></style>

• API
• POST- data

import request from '@/router/axios';


/**
 * 查询all列表 + 单个查询.
 * @param {*} data 
 * @returns 返参
 */
export const getList = (pageNum, pageSize, data) => {
   
    // 合并page、pageSize和data对象
    const requestData = {
   
        pageNum,
        pageSize,
        ...data, // 将data对象的属性合并到requestData中
    };
    return request({
   
        url: '/api/order/onQueryLcsOrders',
        method: 'post',
        data: requestData, // 传递合并后的对象作为请求数据
    })
}

• GET -params

import request from '@/router/axios';

/**
 * 查询all列表 + 单个查询.
 * @param {*} data 
 * @returns 返参
 */
 export const getList = (current, size, params) => {
   
    // 合并current、size和params对象
    const requestData = {
   
        current,
        size,
        ...params, // 将params对象的属性合并到requestData中
    };
    return request({
   
        url: '/api/lcsTask/page',
        method: 'get',
        params: requestData, // 传递合并后的对象作为请求数据
    })
}

• 传参（图）
  

1. 有 avue ，js 补 option

• JS rules 校验

 data() {
   
    //任务模板编号校验
    var validateCode = (rule, value, callback) => {
   
      if (value == '') {
   
        callback(new Error('请输入任务模板编号'));
      } else {
   
        if (validateNumberCase(value)) {
   
          if (value.length > 16) {
   
            callback(new Error('最多16位,支持数字和字母'));
          } else {
   
            callback();
          }
        } else {
   
          callback(new Error('最多16位,支持数字和字母'));
        }
      }
    };
    return {
   
    ...
    }
  }

• JS option

 return {
   
      option: {
   
        menu: true,
        selection: true,
        tip: false,
        searchLabelWidth: 90,
        labelWidth: 120,
        // align: 'left',
        //按钮位置
        menuAlign: 'center',
        menuWidth: '160',
        grid: false,

        //搜索 按钮位置
        searchMenuPosition: 'right',
        searchMenuSpan: 6,

        border: true,
        viewBtn: false, //查看
        copyBtn: false,//复制
        addBtn: false,//新增
        editBtn: false, //编辑
        delBtn: false, //删除
        saveBtn: false,
        //updateBtn: false,
        cancelBtn: false,
        
        viewBtnIcon: ' ',
        editBtnIcon: ' ',
        delBtnIcon: ' ',
        updateBtnIcon: ' ',
        cancelBtnIcon: ' ',
        // searchBtnIcon: ' ',
        // emptyBtnIcon: ' ',

        dialogWidth: 600,
        // span: 10,
        reserveSelection: false,//在数据更新之后保留之前选中的数据（需指定 rowKey）->多选框
        columnBtn: false,
        // 按钮上字改变:searchBtnText: '查询'
        searchBtnText: '查询',
        emptyBtnText: '重置',

        column: [
          {
   
            label: '编号',
            prop: 'code',
            width: 120,
            span: 20,
            labelWidth: '180',
            align: 'center',
            row: true,
            hide: false,
            showColumn: true,
            search: false,
            // 禁用
            disabled: true,
            slot: true,
            sortable: true,
            rules: [
              {
    required: true, validator: validateCode, trigger: 'blur' },
            ],
          },
          //↓搜索 -在列表显示
          {
   
            label: '地图名称',
            prop: 'codeOrName',
            search: true,
            searchLabel: '地图',
            searchPlaceholder: '请输入名称',
            align: 'center',
            labelWidth: '180',//查看-项长
            span: 20,//框 长

            searchLabelWidth: 60, //项 长
            searchSpan: 4, //搜索框长度
            
            // width: 130,
            // span: 8,
            showColumn: true,
            slot: true,
            sortable: true,
            minWidth: '100',
          },
          //↑
           //↓搜索 -不在列表、查看、添加和编辑内显示
        {
   
            label: '点位',
            prop: 'codeOrName',
            width: 130,
            searchSpan: 4, //搜索框长度
            searchLabelWidth: 60, //项 宽
            hide: true,
            showColumn: true,
            search: true,
            searchPlaceholder: '编号或名称',
            slot: true,
            viewDisplay: false,
            addDisplay: false,
            editDisplay: false,
          },
          //↑
          {
   
            label: '名称',
            prop: 'name',
            width: 120,
            span: 20,
            labelWidth: '180',
            row: true,

            hide: false,
            showColumn: true,
            align: 'center',
            search: false,
            slot: true,
            sortable: true,
          },
          //↓搜索 1。在列表显示 2。下拉框 后端获取数据 
          {
   
            label: '类型',
            prop: 'type',
            // width: 130,
            span: 20,
            labelWidth: '180',
            row: true,
            hide: false,
            showColumn: true,
            align: 'center',
            search: true,
            slot: true,
            sortable: true,
            type: 'select',
            dicUrl: '/api/dict/list?code=charge_station',
            props: {
   
              label: 'label',//前端显示的值
              value: 'value',//传给后端的值
            },
          },
          //↑
          {
   
            label: '优先级',
            prop: 'priority',
            width: 100,
            span: 20,
            labelWidth: '180',
            row: true,

            hide: false,
            showColumn: true,
            align: 'center',
            search: false,
            slot: true,
            sortable: true,
          },
          {
   
            label: '是否允许充电',
            prop: 'isOnLoad',
            width: 150,
            span: 20,
            labelWidth: '190',
            row: true,

            hide: false,
            showColumn: true,
            align: 'center',
            slot: true,
            sortable: true,
            type: 'select',
            dicData: [
              {
   
                label: '是',
                value: true,
              },
              {
   
                label