项目练习

属性绑定

• </template

<Boyo-Filter :filter="filterInfo"
                 :listTypeInfo="listTypeInfo"
                 @handleClick="handleSearch">
    </Boyo-Filter>
    <!-- 主体内容 -->
    <Boyo-Content ref="BoyoContent"
                  :visible="filterInfo.visible"
                  :loading="content.loading">
      <!-- 表格头部按钮 -->
      <BoyoButton :buttonList="buttonList"
                  :fieldList="tableInfo.fieldList"
                  @handClick="handClick">
      </BoyoButton>
      <!-- 表格 -->
      <Boyo-Table :tableInfo="tableInfo"
                  :filterInfo="filterInfo.data"
                  :listTypeInfo="listTypeInfo"
                  @TableEvent="TableEvent"
                  @handleSizeChange="handleSizeChange"
                  @handleCurrentChange="handleCurrentChange">
      </Boyo-Table>
      <Boyo-Dialog :dialogInfo="dialogInfo"
                   @dialogEvent="dialogEvent">
        <!-- 表单 -->
        <Boyo-Form :formInfo="formInfo"
                   :refObj.sync="formInfo.ref"
                   :listTypeInfo="listTypeInfo"
                   @hanClick="formClick"
                   @on-success="handleAvatarSuccess">
        </Boyo-Form>
      </Boyo-Dialog>
    </Boyo-Content>

• </script

export default {
  name:'',
  props: {},
  data () {
    return {
      timer: null, // 定时器
      addCarrecordShow: false,
      // 搜索相关
      filterInfo: {
        visible: null, // 是否显示
        data: {},
        list: [],  //列表，例：{ type: 'text', label: '单号：', value: 'deliverNo' }
      },
      // 下拉框相关信息
      listTypeInfo: {},
      // 打印相关  例：[{ desc: '入厂时间' }, { desc: '' }, { desc: '起运地' }, { desc: '' }],
       // [{ desc: '货主名称' }, { desc: '', colspan: 3 }],
      printInfo: [],
      // 表格头部按钮相关
      buttonList: {
        // 左按钮
        left: [],
        right: [
          { icon: 'el-icon-search', type: 'button', event: 'filter' },
          { icon: 'el-icon-refresh', type: 'button', event: 'refresh' },
          { icon: 'el-icon-s-grid', type: 'button', event: 'mode' },
          { icon: 'el-icon-arrow-down', type: 'down', event: 'table-menu' }
        ]
      },
      content: {
        loading: null
      },
      // 表格相关
      tableInfo: {
        selection: false, // 是否显示表格单选框,
        selectReset: null, // 重置单选框选中
        mode: null, // 表格模板one和two两种
        data: [], // 数据
        total: 100, // 总条数
        pager: true, // 是否显示分页
        multipleSelection: [], // 表格单选框数据
        fieldList: [
          {
            value: 'deliverNo',
            label: '单号',
            show: true,
            dropdown: true,
            sortable: true
          },
          {
            value: 'supplierName',
            label: '供应商',
            show: true,
            dropdown: true
          },
          {
            value: 'button',
            label: '操作',
            type: 'button',
            show: true,
            dropdown: true,
            width: 210
          }
        ],
        btList: []
      },
      // 弹框相关
      dialogInfo: {
        visible: false, // 弹框是否显示
        width: '41%', // 宽度
        title: {
          add: '车辆入场', // 标题
          write: '编辑'
        },
        type: 'add', // 显示哪个标题
        // 按钮列表
        btList: [
          {
            label: '确定',
            type: 'primary',
            icon: '',
            event: 'save',
            loading: false
          },
          { label: '关闭', type: '', icon: '', event: 'close', loading: false }
        ]
      },
      // 表单相关
      formInfo: {
        ref: null,
        labelWidth: '25%',
        data: {
          id: null,
          carNumber: '',
          supplierId: '',
          goodsName: '废铁',
          driverLicense: '',
          travelLicense: ''
        },
        list: [
          {
            type: 'select',
            label: '供应商：',
            value: 'supplierId',
            style: 'width:80%',
            list: 'supplier',
            required: true
          }
        ],
        rules: {
          phone: [{ required: true, validator: validateTel, trigger: 'blur' }]
        }
      }
      //生命周期方法
      //created:在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图。
//mounted:在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作。
      created (){
      	const buttonList = this.menuList[1].item[3]
	    const tableBt = this.tableInfo.btList
	    const leftBtn = this.buttonList.left
	    if (buttonList.addAuth) {
	      leftBtn.push({
	        icon: 'el-icon-plus',
	        style: 'background:#1a7bb9',
	        desc: '车辆入场',
	        event: 'arrive'
	      })
	    }
	    if (buttonList.editAuth) {
	      tableBt.push({
	        label: '编辑',
	        icon: 'el-icon-edit',
	        style: 'background:#1a7bb9',
	        event: 'write'
	      })
	    }
	    if (buttonList.printAuth) {
	      tableBt.push({
	        label: '补打',
	        icon: 'el-icon-printer',
	        style: 'background:#f8ac59',
	        event: 'print'
	      })
	    }
	    if (!tableBt.length) {
	      this.tableInfo.fieldList.pop()
	    } else {
	      this.tableInfo.fieldList[this.tableInfo.fieldList.length - 1].width =
	        tableBt.length * 100
	    }
      },
      mounted () {
	    this.getInfo() //搜索事件
	    this.init() //初始化
	  },
	  //v-on点击事件，调用api
	  methods: {
	  	init(){},
	  	getInfo(){},
	  	//搜索框事件（搜索重置按钮）
	  	handleSearch (val, data) {
	      switch (val) {
	        case 'search':
	          Object.assign(this.filterInfo.data, data)
	          this.getInfo()
	          break
	        case 'refresh':
	          for (let i in data) {
	            data[i] = ''
	          }
	          for (let i in this.filterInfo.data) {
	            this.filterInfo.data[i] = ''
	          }
	          this.filterInfo.data.pageNumber = 1
	          this.filterInfo.data.pageSize = 20
	          this.getInfo()
	          break
	      }
	    },
	  }
    }