<template> 
 | 
  <div class="main_app"> 
 | 
    <QueryForm 
 | 
      v-model="filters" 
 | 
      :query-form-config="queryFormConfig" 
 | 
      @handleQuery="getList(1)" 
 | 
      @clear="clear" 
 | 
    /> 
 | 
    <div class="mb10 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="100" 
 | 
        show-overflow-tooltip 
 | 
      /> 
 | 
      <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="100" 
 | 
        show-overflow-tooltip 
 | 
      /> 
 | 
      <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" 
 | 
        align="center" 
 | 
        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="480px" 
 | 
    > 
 | 
      <el-form :model="param" :rules="rules" ref="ruleForm" label-width="100px"> 
 | 
        <el-form-item label="入园原因" prop="name"> 
 | 
          <el-input v-model="param.aaa" placeholder="请输入"></el-input> 
 | 
        </el-form-item> 
 | 
        <el-form-item label="合同号" prop="name"> 
 | 
          <el-input v-model="param.aaa" placeholder="请输入"></el-input> 
 | 
        </el-form-item> 
 | 
        <el-form-item label="到场时间" prop="name"> 
 | 
          <el-input v-model="param.aaa" placeholder="请输入"></el-input> 
 | 
        </el-form-item> 
 | 
        <el-form-item label="车前牌照号" prop="name"> 
 | 
          <el-input v-model="param.aaa" placeholder="请输入"></el-input> 
 | 
        </el-form-item> 
 | 
        <el-form-item label="驾驶员" prop="name"> 
 | 
          <el-input v-model="param.aaa" placeholder="请输入"></el-input> 
 | 
        </el-form-item> 
 | 
        <el-form-item label="联系方式" prop="name"> 
 | 
          <el-input v-model="param.aaa" placeholder="请输入"></el-input> 
 | 
        </el-form-item> 
 | 
        <el-form-item label="入园事由" prop="name"> 
 | 
          <el-input v-model="param.aaa" placeholder="请输入"></el-input> 
 | 
        </el-form-item> 
 | 
        <el-form-item label="总运输量" prop="name"> 
 | 
          <el-input v-model="param.aaa" placeholder="请输入" class="w300"></el-input> 
 | 
          <span class="ml10">万支</span> 
 | 
        </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' 
 | 
import { platformJobPage } from '@/api' 
 | 
export default { 
 | 
  components: { 
 | 
    Pagination, 
 | 
    QueryForm 
 | 
  }, 
 | 
  data () { 
 | 
    return { 
 | 
      loading: false, 
 | 
      pagination: { 
 | 
        pageSize: 10, 
 | 
        page: 1, 
 | 
        total: 0 
 | 
      }, 
 | 
      filters: {}, 
 | 
      list: [], 
 | 
      isShowEdit: false, 
 | 
      param: {}, 
 | 
      rules: {}, 
 | 
      queryFormConfig: { 
 | 
        formItems: [ 
 | 
          { 
 | 
            filed: 'carCodeFront', 
 | 
            type: 'input', 
 | 
            label: '车牌号' 
 | 
          }, 
 | 
          { 
 | 
            filed: 'driverName', 
 | 
            type: 'input', 
 | 
            label: '驾驶员' 
 | 
          }, 
 | 
          { 
 | 
            filed: 'code', 
 | 
            type: 'input', 
 | 
            label: '运输单号' 
 | 
          }, 
 | 
          { 
 | 
            filed: 'selDate', 
 | 
            type: 'daterange', 
 | 
            label: '操作时间' 
 | 
          } 
 | 
        ], 
 | 
        online: true 
 | 
      }, 
 | 
    } 
 | 
  }, 
 | 
  created() { 
 | 
    this.getList() 
 | 
  }, 
 | 
  methods: { 
 | 
    handleSub () { 
 | 
      this.$refs.ruleForm.validate((valid) => { 
 | 
        if (valid) { 
 | 
          alert('submit!') 
 | 
        } 
 | 
      }) 
 | 
    }, 
 | 
    getList (page) { 
 | 
      const { pagination, filters } = this 
 | 
      this.loading = true 
 | 
      platformJobPage({ 
 | 
        model: { ...filters, jobType: 0 }, 
 | 
        capacity: pagination.pageSize, 
 | 
        page: pagination.page, 
 | 
      }).then(res => { 
 | 
        this.loading = false 
 | 
        this.list = res.records || [] 
 | 
        this.pagination.total = res.total || 0 
 | 
      }, () => { 
 | 
        this.loading = false 
 | 
      }) 
 | 
    }, 
 | 
    clear () { 
 | 
      this.pagination.page = 1 
 | 
      this.filters = {} 
 | 
      this.getList() 
 | 
    }, 
 | 
    handleEdit (row) { 
 | 
      this.isShowEdit = true 
 | 
    }, 
 | 
    handleDel () { }, 
 | 
    handleSizeChange (capacity) { 
 | 
      this.pagination.pageSize = capacity 
 | 
    } 
 | 
  } 
 | 
} 
 | 
</script> 
 |