tire-platform-ui/src/views/basicData/container/archives.vue

<template>
  <basic-container>
    <avue-crud
        :option="option"
        :search.sync="search"
        v-model="form"
        :data="dataList"
        ref="crud"
        :page.sync="page">
    </avue-crud>
  </basic-container>
</template>

<script>
export default {
  name: "archives",
  data() {
    return {
      search: {},
      form: {},
      dataList: [],
      page: {
        pageSize: 20,
        currentPage: 1,
        total: 0,
        pageSizes: [10, 20, 30, 40, 50, 100, 200, 300, 400, 500]
      },
      option: {
        index:true,
        span:8,
        searchMenuPosition: "right",
        searchSpan: 8,
        searchIcon: true,
        searchIndex: 2,
        highlightCurrentRow: true,
        dialogWidth:"70%",
        column: [{
          label: '合同号',
          prop: 'name',
          search: true,
        },{
          label: '箱号',
          prop: 'name',
          search: true,
        },{
          label: '箱类型',
          prop: 'name',
          search: true,
        },{
          label: '最新地点',
          prop: 'name',
          search: true,
        },{
          label: '最新日期',
          prop: 'name',
          search: true,
        },{
          label: '租赁公司',
          prop: 'name',
          search: true,
        },{
          label: '箱来源',
          prop: 'name',
          search: true,
        },{
          label: '箱状态',
          prop: 'name',
          search: true,
        },{
          label: '租赁方式',
          prop: 'name'
        },{
          label: '空重',
          prop: 'name'
        },{
          label: '毛重',
          prop: 'name'
        },{
          label: '皮重',
          prop: 'name'
        },{
          label: '装载重量',
          prop: 'name'
        },{
          label: '容积',
          prop: 'name'
        },{
          label: '状态',
          prop: 'name'
        },{
          label: '造箱公司',
          prop: 'name',
          search: true,
        },{
          label: '造箱日期',
          prop: 'name',
          search: true,
        },{
          label: '起租日期',
          prop: 'name',
          search: true,
        },{
          label: '购入日期',
          prop: 'name'
        },{
          label: '箱龄',
          prop: 'name'
        }, {
          label: '照片',
          prop: 'imgUrl4',
          type: 'upload',
          span: 24,
          listType: 'picture-card',
          tip: '只能上传jpg/png文件，且不超过500kb',
          propsHttp: {
            url:'url',
            name:'name',
            res: 'data'
          },
          action: 'https://api.avuejs.com/imgupload'
        }]
      }
    }
  },
  created() {
    let i = 0;
    this.option.column.forEach(item => {
      if (item.search) i++
    })
    if (i % 3 !== 0) {
      const num = 3 - Number(i % 3)
      this.option.searchMenuSpan = num * 8;
      this.option.searchMenuPosition = "right";
    }
  },
  methods: {}
}
</script>

<style scoped>

</style>