Smart_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>
      <avue-form v-model="form" :option="basicsOption">
        <template slot-scope="scope" slot="corpId">
          <crop-select
              v-model="form.corpId"
          ></crop-select>
        </template>
      </avue-form>
    </basic-container>
    <containerTitle title="起止地信息"></containerTitle>
    <basic-container>
      <el-table
          ref="singleTable"
          :data="tableData"
          size="mini"
          :header-cell-style="{color:'#000',background:'#fafafa'}"
          style="width: 100%">
        <el-table-column
            property="date"
            align="center"
            width="40"
            :render-header="renderHeader">
          <template slot-scope="scope">
            <el-tooltip class="item" effect="dark" content="删除" placement="right">
              <el-button type="danger" icon="el-icon-delete" size="mini" circle @click="deleteAddress(scope)"></el-button>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column
            type="index"
            label="序号"
            align="center"
            width="60">
        </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>
    <containerTitle title="收款信息"></containerTitle>
    <basic-container>
      <avue-crud :data="collectionList" :option="collectionOption"></avue-crud>
    </basic-container>
    <containerTitle title="付款信息"></containerTitle>
    <basic-container>
      <avue-crud :data="paymentList" :option="paymentOption"></avue-crud>
    </basic-container>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {},
      basicsOption: {
        menuBtn:false,
        column: [
          {
            label: "客户名称",
            span: 8,
            prop: "corpId"
          },{
            label: '联系人',
            span: 8,
            prop: 'name'
          },{
            label: '订单号',
            span: 8,
            prop: 'name'
          }
        ]
      },
      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'
          }
        ]
      },
      collectionList:[],
      collectionOption: {
        align: 'center',
        menuAlign: 'center',
        index:true,
        cellBtn:true,
        addBtn:false,
        addRowBtn:true,
        column: [ {
          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: '税率(默认6)',
          cell: true,
          prop: 'sex'
        }, {
          label: '币别(默认RMB)',
          cell: true,
          prop: 'sex'
        }
        ]
      },
      paymentList:[],
      paymentOption: {
        align: 'center',
        menuAlign: 'center',
        index:true,
        cellBtn:true,
        addBtn:false,
        addRowBtn:true,
        column: [ {
          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: '税率(默认6)',
          cell: true,
          prop: 'sex'
        }, {
          label: '币别(默认RMB)',
          cell: true,
          prop: 'sex'
        }
        ]
      }
    };
  },
  methods: {
    //地址新增
    addAddress(){
      this.tableData.push({})
    },
    //返回主列表
    backToList(){
      this.$emit('backToList')
    },
    //删除途径地址
    deleteAddress(scope){
      this.tableData.splice(scope.$index, 1);
    },
    //自定义表头
    renderHeader(h) {
      return(
          <div>
            <el-tooltip className="item" effect="dark" content="增加途径地址" placement="top">
              <el-button type="primary" icon="el-icon-plus" size="mini" circle onClick={()=>this.addAddress()} style="margin-right: 1.25rem;"></el-button>
            </el-tooltip>
          </div>
      )
    }
  }
}
</script>
<style scoped>

</style>