<template> 
 | 
  <div class="main_app"> 
 | 
    <QueryForm 
 | 
      v-model="filters" 
 | 
      :query-form-config="queryFormConfig" 
 | 
      @handleQuery="getList(1)" 
 | 
      @clear="clear" 
 | 
    /> 
 | 
    <div class="mb20 mt20"> 
 | 
      <el-button type="primary" @click="handleEdit()">新增</el-button> 
 | 
    </div> 
 | 
    <el-table v-loading="loading" :data="list" stripe> 
 | 
      <el-table-column 
 | 
        prop="name" 
 | 
        label="月台组" 
 | 
        min-width="100" 
 | 
        show-overflow-tooltip 
 | 
      /> 
 | 
      <el-table-column 
 | 
        prop="name" 
 | 
        label="入园事由" 
 | 
        min-width="100" 
 | 
        show-overflow-tooltip 
 | 
      /> 
 | 
      <el-table-column 
 | 
        prop="name" 
 | 
        label="操作" 
 | 
        min-width="80" 
 | 
        show-overflow-tooltip 
 | 
      > 
 | 
        <template v-slot="scope"> 
 | 
          <el-button type="text" @click="handleEdit(scope.row)">编辑</el-button> 
 | 
          <el-button type="text" class="red" @click="handleDel(scope.row)" 
 | 
            >删除</el-button 
 | 
          > 
 | 
        </template> 
 | 
      </el-table-column> 
 | 
    </el-table> 
 | 
    <pagination 
 | 
      @size-change="handleSizeChange" 
 | 
      @current-change="getList" 
 | 
      :pagination="pagination" 
 | 
    /> 
 | 
    <el-dialog 
 | 
      :title="param.id ? '编辑月台' : '新增月台'" 
 | 
      :visible.sync="isShowEdit" 
 | 
      width="800px" 
 | 
    > 
 | 
      <el-form 
 | 
        :model="param" 
 | 
        :rules="rules" 
 | 
        label-suffix=":" 
 | 
        ref="ruleForm" 
 | 
        label-width="120px" 
 | 
      > 
 | 
        <el-form-item label="月台组名称"> 
 | 
          <el-input v-model="param.aaa" class="w300" disabled></el-input> 
 | 
        </el-form-item> 
 | 
        <el-form-item label="关联入园事由"> 
 | 
          <el-checkbox-group v-model="param.checkList"> 
 | 
            <el-checkbox label="0">安泰装货</el-checkbox> 
 | 
            <el-checkbox label="0">安泰卸货</el-checkbox> 
 | 
            <el-checkbox label="0">市公司卸货</el-checkbox> 
 | 
          </el-checkbox-group> 
 | 
        </el-form-item> 
 | 
        <el-form-item label="关联月台"> 
 | 
          <el-transfer 
 | 
            filterable 
 | 
            filter-placeholder="搜索" 
 | 
            :titles="['待添加月台', '已添加月台']" 
 | 
            v-model="param.sel" 
 | 
            :data="data" 
 | 
  
 | 
          > 
 | 
          </el-transfer> 
 | 
        </el-form-item> 
 | 
      </el-form> 
 | 
      <span slot="footer" class="dialog-footer"> 
 | 
        <el-button @click="isShowEdit = false">取消</el-button> 
 | 
        <el-button type="primary" @click="handleSub">确定</el-button> 
 | 
      </span> 
 | 
    </el-dialog> 
 | 
  </div> 
 | 
</template> 
 | 
  
 | 
<script> 
 | 
import Pagination from '@/components/common/Pagination' 
 | 
import QueryForm from '@/components/common/QueryForm' 
 | 
export default { 
 | 
  components: { 
 | 
    Pagination, 
 | 
    QueryForm 
 | 
  }, 
 | 
  data () { 
 | 
    return { 
 | 
      filters: {}, 
 | 
      loading: false, 
 | 
      queryFormConfig: { 
 | 
        formItems: [ 
 | 
          { 
 | 
            filed: 'name', 
 | 
            type: 'input', 
 | 
            label: '月台组' 
 | 
          } 
 | 
        ], 
 | 
        online: true 
 | 
      }, 
 | 
      pagination: { 
 | 
        capacity: 10, 
 | 
        page: 1 
 | 
      }, 
 | 
      list: [{}], 
 | 
      total: 0, 
 | 
      isShowEdit: false, 
 | 
      param: { 
 | 
        sel: [] 
 | 
      }, 
 | 
      rules: {}, 
 | 
  
 | 
      data: [ 
 | 
        { key: '1', label: '上海' }, 
 | 
        { key: '2', label: '上海' }, 
 | 
        { key: '3', label: '上海' }, 
 | 
        { key: '4', label: '上海' }, 
 | 
        { key: '5', label: '上海' } 
 | 
      ] 
 | 
    } 
 | 
  }, 
 | 
  methods: { 
 | 
    getList (page) { }, 
 | 
    clear () { }, 
 | 
    handleEdit (row) { 
 | 
      this.isShowEdit = true 
 | 
    }, 
 | 
    handleDel () { }, 
 | 
    handleSizeChange (capacity) { 
 | 
      this.pagination.capacity = capacity 
 | 
    } 
 | 
  } 
 | 
} 
 | 
</script> 
 | 
  
 | 
<style> 
 | 
</style> 
 |