tire-platform-ui/src/views/landTransportation/dispatchingCars/detailPage.vue

<template>
  <div>
    <div class="customer-head">
      <div class="customer-back">
        <el-button
            type="danger"
            style="border: none;background: none;color: red"
            icon="el-icon-arrow-left"
            @click="backToList"
        >返回列表
        </el-button>
      </div>
      <el-button
          class="el-button--small-yh add-customer-btn"
          type="primary"
          :disabled="disabled"
          size="small"
          @click="editCustomer"
      >保存
      </el-button>
    </div>
    <containerTitle title="起止地信息" style="margin-top: 50px"></containerTitle>
    <basic-container>
      <el-table
          ref="singleTable"
          :data="tableData"
          size="mini"
          :header-cell-style="{color:'#000'}"
          highlight-current-row
          style="width: 100%">
        <el-table-column
            property="date"
            align="center"
            width="40">
          <template slot-scope="scope">
            <el-tooltip class="item" effect="dark" content="增加途径地址" placement="top">
              <el-button type="primary" icon="el-icon-plus" size="mini" circle
                         v-if="(scope.$index+1) === tableData.length" @click="addAddress"></el-button>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column
            property="date"
            label="省份"
            align="center"
            width="120">
          <template slot-scope="scope">
            <el-select v-model="scope.row.date" filterable size="small" placeholder="请选择">
              <el-option label="北京" value="1"></el-option>
              <el-option label="山东" value="2"></el-option>
              <el-option label="天津" value="3"></el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column
            property="name"
            label="城市"
            align="center"
            width="120">
          <template slot-scope="scope">
            <el-select v-model="scope.row.name" filterable size="small" placeholder="请选择">
              <el-option label="测试城市0" value="1"></el-option>
              <el-option label="测试城市1" value="2"></el-option>
              <el-option label="测试城市2" value="3"></el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column
            property="address"
            align="center"
            width="160"
            label="区/县">
          <template slot-scope="scope">
            <el-select v-model="scope.row.name" filterable size="small" placeholder="请选择">
              <el-option label="测试城市0" value="1"></el-option>
              <el-option label="测试城市1" value="2"></el-option>
              <el-option label="测试城市2" value="3"></el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column
            property="address"
            align="center"
            label="详细地址">
          <template slot-scope="scope">
            <el-input v-model="scope.row.address" size="small" placeholder="请输入内容"></el-input>
          </template>
        </el-table-column>
      </el-table>
    </basic-container>
    <containerTitle title="箱信息"></containerTitle>
    <basic-container>
      <avue-crud :data="entrustList" :option="entrustOptionTwo"></avue-crud>
    </basic-container>
    <containerTitle title="车队箱信息"></containerTitle>
    <basic-container>
      <avue-crud :data="goodsList" :option="goodsOptionCrud"></avue-crud>
    </basic-container>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {},
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }],
      entrustList: [],
      goodsList:[],
      goodsOptionCrud: {
        index:true,
        cellBtn:true,
        addBtn:false,
        addRowBtn:true,
        column: [
          {
            label: '车队',
            cell: true,
            prop: 'name'
          },{
            label: '尺寸箱型',
            cell: true,
            prop: 'sex'
          },{
            label: '箱量',
            cell: true,
            prop: 'sex'
          }, {
            label: '重量',
            cell: true,
            prop: 'sex'
          }, {
            label: '车号',
            cell: true,
            prop: 'sex'
          }, {
            label: '司机',
            cell: true,
            prop: 'sex'
          }, {
            label: '电话',
            cell: true,
            prop: 'sex'
          }, {
            label: '箱号',
            cell: true,
            prop: 'sex'
          }, {
            label: '陆运费',
            cell: true,
            prop: 'sex'
          }, {
            label: '陆运费',
            cell: true,
            prop: 'sex'
          }, {
            label: '是否派车',
            cell: true,
            prop: 'sex'
          }, {
            label: '备注',
            cell: true,
            prop: 'sex'
          }
        ]
      },
      entrustOptionTwo: {
        align: 'center',
        menuAlign: 'center',
        index:true,
        cellBtn:true,
        addBtn:false,
        addRowBtn:true,
        column: [
          {
            label: '车队',
            cell: true,
            prop: 'name'
          }, {
            label: '尺寸箱形',
            cell: true,
            prop: 'sex'
          }, {
            label: '箱量',
            cell: true,
            prop: 'sex'
          }, {
            label: '重量',
            cell: true,
            prop: 'sex'
          }, {
            label: '车号',
            cell: true,
            prop: 'sex'
          }, {
            label: '司机',
            cell: true,
            prop: 'sex'
          }, {
            label: '电话',
            cell: true,
            prop: 'sex'
          }, {
            label: '陆运费(D)',
            cell: true,
            prop: 'sex'
          }, {
            label: '陆运费(C)',
            cell: true,
            prop: 'sex'
          }, {
            label: '指派车队',
            cell: true,
            prop: 'sex'
          }, {
            label: '备注',
            cell: true,
            prop: 'sex'
          }
        ]
      }
    };
  },
  methods: {
    //地址新增
    addAddress(){
      this.tableData.push({})
    },
    backToList(){
      this.$emit('backToList')
    }
  }
}
</script>
<style scoped>

</style>