<template>
  <div>
    <basic-container
        v-if="isShow">
      <avue-crud
          :data="dataList"
          :option="option"
          :before-open="beforeOpen"
          v-model="form"
          :page.sync="page"
      >
      </avue-crud>
    </basic-container>
    <detailPage
        v-else
        ref="detail"
        @goBack="goBack"
        :detailData="detailData"></detailPage>
  </div>
</template>

<script>
import detailPage from "./detailsPage";
export default {
  name: "index",
  components: {
    detailPage
  },
  data(){
    return{
      form:{},
      dataList:[],
      isShow:true,
      detailData:{},
      page: {
        pageSize: 10,
        pagerCount:1
      },
      option:{
        "lazy": true,
        "tip": false,
        "simplePage": true,
        "searchShow": true,
        "searchMenuSpan": 24,
        "dialogWidth": "60%",
        "align": "center",
        "searchSpan": 8,
        "searchMenuPosition": "right",
        "tree": true,
        "border": true,
        "index": true,
        "selection": true,
        "viewBtn": false,
        "editBtn": false,
        "delBtn": false,
        "menuWidth": 180,
        "dialogClickModal": false,
        "searchLabelWidth": 100,
        "searchIcon": true,
        "searchIndex": 2,
        "addBtnText": "新单",
        "expand": true,
        "expandWidth": 38,
        "selectionWidth": 40,
        column:[
          {
            label:'年',
            prop:'name',
            type:'year',
            width:100,
            search:true
          },
          {
            label:'月',
            prop:'name1',
            type:'month',
            width:100,
            search:true
          },
          {
            label:'制单人',
            prop:'name2',
            type:'month',
            width:100,
            search:true
          },
          {
            label:'制单日期',
            prop:'name3',
            type:'month',
            width:200,
            search:true
          },
          {
            label:'更新人',
            prop:'name4',
            width:100,
            type:'month',
            search:true
          },
          {
            label:'更新日期',
            prop:'name5',
            type:'month',
            width:200,
            search:true
          },
          {
            label:'备注',
            prop:'name6',
            search:true
          }
        ]

      }
    }
  },
  methods:{
//查看跳转页面
    beforeOpenPage(row, index) {
      this.detailData = {
        id: row.id,
      };
      this.isShow = false;
    },//新增跳转页面
    beforeOpen(row, index) {
      this.detailData = {
        id: row.id,
      };
      this.isShow = false;
    },
    editOpen(row, index) {
      this.detailData = {
        id: row.id,
      };
      this.isShow = false;
    },
    goBack() {
      this.detailData=this.$options.data().detailData
      this.isShow = true;
    },
  }
}
</script>

<style scoped>

</style>
