<template>

<!-- 基础组件 -->

  <basic-container>

    <!-- <el-button @click='exportHandle'>导出</el-button> -->

    <avue-crud

        设置表格属性

      :option="option"

        用来存取页面的值

      v-model="form"

      获取后台数据

      :data="data"

      :table-loading="loading"

      分页

      :page="page"

      权限控制  操作按钮动态显示

      :permission="permissionList"

      打开前回调

      :before-open="beforeOpen"

       关闭前回调

      :before-close="beforeClose"

       获取dom 结构

      ref="crud"

       数据编辑后出发

      @row-update="rowUpdate"

      新增数据确定后执行

      @row-save="rowSave"

      行删除

      @row-del="rowDel"

       点击搜索后触发该事件

      @search-change="searchChange"

       清空搜索回调方法

      @search-reset="searchReset"

      当选择项发生变化时会触发该事件

      @selection-change="selectionChange"

      @current-change="currentChange"

      点击每页多少条

      @size-change="sizeChange"

      点击刷新

      @refresh-change="onLoad(page)"

      初始化页面

      @on-load="onLoad"

    >

    自定义按钮

      <template slot-scope="scope" slot="menu">

        <el-button   @click="submitHandle(scope.row)">提交</el-button

        >

      <template slot-scope="{ row }" slot="status">

        <el-tag v-if="row.status == 0">待审</el-tag>

        <el-tag v-else-if="row.status == 1" type="info">审批中</el-tag>

      </template>

    </avue-crud>

  </basic-container>

</template>

<script>

export default {

  data() {

    return {

      form: {},

      type: "",

      page: {

        pageSize: 10,

        currentPage: 1,

        total: 0,

      },

      selectionList: [],

      option: {

      //列的对其方式

         align:'left',

         //表格宽度

         width: '100%',

         //表格高度差（主要用于减去其他部分让表格高度自适应）

         calcHeight: 'auto',

         //表格高度

         height: 'auto',

         //表格最大高度

        maxHeight: 'auto',

        // 弹框文字提示

        tip: false,

        // 边框

        border: true,

        // 显示序号

        index: true,

        // 序号标题

        indexLabel: "序号",

        //打印按钮

        printBtn: true

       // 刷新按钮

        refreshBtn: true

        // 查看按钮

        viewBtn: true,

        // 行内编辑按钮

        editBtn: false,

        // 行内删除

        delBtn: false,

        //首次加载是否显示搜索

        searchShow: true,

        // selection: true,

        column: [

          {

            label: "请假人",

             //匹配后端字段

            prop: "userId",

           //输入框状态控制 默认为input

            type: "tree",

//type:input/input/select/radio/checkbox/textarea/cascader/date/time/datetime

/daterange/timerange/datetimerange/week/month/year/dates/password/switch/tree/number

maxRows:4,//最大行（当type为textarea,当number时最大值）

minRows:2,//最小行（当type为textarea，当number时最小值）

            // 搜索栏目自定义内容 同时控制页面显示隐藏

            search: true,

             //表单编辑时是否禁止输入

            editDisabled: true,

            //表单新增时是否禁止输入

            addDisabled: true,

            //隐藏显示当前项

            display: false,

           // 表单新增是可见

            addDisplay: false,

             // 表单查看是否可见

            viewDisplay: true,

            // 编辑按钮是否可见

            editDisplay: false,

             // 隐藏列

            hide: true,

            //选着多个 当type为tree生效

             multiple: true,

            // 传入静态字典

            dicData: [],

            // 字典参数   props 匹配后台字段

            props: {

              value: "sysId",

              label: "name",

            },

            //字典地址

             dicUrl: "/api/blade-system/dict/dictionary?code=exam_state",

             //时间格式

               format: "yyyy-MM-dd hh:mm:ss",

               valueFormat: "yyyy-MM-dd hh:mm:ss",

            //验证

            rules: [

              {

                required: true,

                message: "请选择请假人",

                trigger: "blur",

              },

            ],

          },

      data: []

      };

  },

  mounted() {

    // 当字典数据需要前端转换时   获取请假人id 通过接口 添加字典数据

    personnel(1, 10000, {

      is_deleted: 0,

    }).then((res) => {

      this.option.column.forEach((item) => {

        if (item.prop == "userId") {

          item.dicData = res.data.data.records;

        }

      });

    });

  },

  methods: {

  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();

      });

    },

  },

};

</script>

<style>

</style>