tire-platform-ui/src/views/basicData/landTransportation/vehicleInformation/index.vue

<template>
  <div>
    <basic-container>
      <avue-crud
        ref="crud"
        :data="dataList"
        :option="option"
        :page.sync="page"
        :search.sync="search"
        :table-loading="loading"
        v-model="form"
        @on-load="onLoad"
        @row-save="rowSave"
        @row-update="rowUpdate"
        @row-del="rowDel"
        @search-change="searchChange"
        @search-reset="searchReset"
        @refresh-change="refreshChange"
        @current-change="currentChange"
        @size-change="sizeChange"
        @search-criteria-switch="searchCriteriaSwitch"
      >
        <template slot="urlForm" slot-scope="{ row }">
          <el-input
            placeholder="文件地址"
            size="small"
            v-if="row.$cellEdit"
            v-model="row.url"
            class="input-with-select">
            <el-button size="small" type="primary" slot="prepend" @click="download(row)">查看</el-button>
            <el-upload
              class="upload-demo"
              :show-file-list="false"
              slot="append"
              :action="action"
              :headers="headers"
              :on-success="(response)=>{onSuccessTwo(response,row)}"
              :multiple="false">
              <el-button size="small" type="primary">上传</el-button>
            </el-upload>
          </el-input>
          <span v-else>{{ row.url }}</span>
        </template>
        <template slot="fleetIdForm" slot-scope="{ row }">
          <span>{{row}}</span>
          <crop-select
            v-model="form.fleetId"
            corpType="KH"
          />
        </template>
        <template slot="fleetIdSearch">
          <crop-select v-model="search.fleetId" corpType="KH"></crop-select>
        </template>
      </avue-crud>
    </basic-container>
  </div>
</template>

<script>
import { getCarList, carSubmit, carRemove } from "@/api/landTransportation/car";
import {getToken} from '@/util/auth';

export default {
  name: "index",
  data(){
    return{
      dataList:[],
      option:{
        searchIcon: true,
        searchIndex: 2,
        searchMenuSpan: 24,
        align:'center',
        index: true,
        column:[{
          label: '车牌号',
          prop: 'plateNo',
          index: 1,
          width: 140,
          cell: true,
          overHidden: true,
          search:true,
          span: 8,
          searchSpan: 8,
          rules: [{
            required: true,
            message: "请输入车牌号",
            trigger: "blur"
          }],
        },{
          label: '车队名称',
          prop: 'fleetId',
          index: 2,
          width: 140,
          cell: true,
          overHidden: true,
          search:true,
          span: 8,
          searchSpan: 8,
        },{
          label: '司机名称',
          prop: 'driverId',
          index: 3,
          width: 140,
          cell: true,
          overHidden: true,
          search:true,
          span: 8,
          searchSpan: 8,
        },{
          label: '挂车号',
          prop: 'trailerNo',
          index: 4,
          width: 140,
          cell: true,
          overHidden: true,
          search:true,
          span: 8,
          searchSpan: 8,
        },{
          label: '燃油类型',
          prop: 'fuelType',
          index: 5,
          width: 140,
          cell: true,
          overHidden: true,
          search:true,
          span: 8,
          searchSpan: 8,
        },{
          type: "select",
          dicUrl: "/api/blade-system/dict-biz/dictionary?code=carType",
          props: {
            label: "dictValue",
            value: "dictValue"
          },
          label: '车辆类型',
          prop: 'type',
          index: 6,
          width: 140,
          cell: true,
          overHidden: true,
          search:true,
          span: 8,
          searchSpan: 8,
        },{
          label: '车辆品牌',
          prop: 'brand',
          index: 7,
          width: 140,
          cell: true,
          overHidden: true,
          search:true,
          span: 8,
          searchSpan: 8,
        },{
          label: '制造单位',
          prop: 'manufacturer',
          index: 8,
          width: 140,
          cell: true,
          overHidden: true,
          search:true,
          span: 8,
          searchSpan: 8,
        },{
          label: '发证机关',
          prop: 'issuingAuthority',
          index: 9,
          width: 140,
          cell: true,
          overHidden: true,
          search:true,
          span: 8,
          searchSpan: 8,
        },{
          label: '牵引车辆型号',
          prop: 'towModel',
          index: 10,
          width: 140,
          cell: true,
          overHidden: true,
          search:true,
          span: 8,
          searchSpan: 8,
        },{
          label: '牵引车车架号',
          prop: 'towVin',
          index: 11,
          width: 140,
          cell: true,
          overHidden: true,
          search:true,
          span: 8,
          searchSpan: 8,
        },{
          label: '挂车型号',
          prop: 'trailerModel',
          index: 12,
          width: 140,
          cell: true,
          overHidden: true,
          search:true,
          span: 8,
          searchSpan: 8,
        },{
          label: '挂车车架号',
          prop: 'trailerVin',
          index: 13,
          width: 140,
          cell: true,
          overHidden: true,
          search:true,
          span: 8,
          searchSpan: 8,
        },{
          label: '发动机型号',
          prop: 'engineModel',
          index: 14,
          width: 140,
          cell: true,
          overHidden: true,
          search:true,
          span: 8,
          searchSpan: 8,
        },{
          label: '核载人数',
          prop: 'allowPassenger',
          index: 15,
          width: 140,
          cell: true,
          overHidden: true,
          search:true,
          span: 8,
          searchSpan: 8,
        },{
          label: '购车日期',
          prop: 'purchaseDate',
          index: 16,
          width: 140,
          cell: true,
          overHidden: true,
          search:true,
          span: 8,
          searchSpan: 8,
        },{
          label: '注册日期',
          prop: 'registerDate',
          index: 17,
          width: 140,
          cell: true,
          overHidden: true,
          search:true,
          span: 8,
          searchSpan: 8,
        },{
          label: '报废日期',
          prop: 'scrapDate',
          index: 18,
          width: 140,
          cell: true,
          overHidden: true,
          search:true,
          span: 8,
          searchSpan: 8,
        },{
          label: '外廓尺寸mm',
          prop: 'oto',
          index: 19,
          width: 140,
          cell: true,
          overHidden: true,
          search:true,
          span: 8,
          searchSpan: 8,
        },{
          label: '总重量kg',
          prop: 'totalWeight',
          index: 20,
          width: 140,
          cell: true,
          overHidden: true,
          search:true,
          span: 8,
          searchSpan: 8,
        },{
          label: '核定重量kg',
          prop: 'approvedWeight',
          index: 21,
          width: 140,
          cell: true,
          overHidden: true,
          search:true,
          span: 8,
          searchSpan: 8,
        },{
          label: '装备重量kg',
          prop: 'equipmentWeight',
          index: 22,
          width: 140,
          cell: true,
          overHidden: true,
          search:true,
          span: 8,
          searchSpan: 8,
        },{
          label: '附件',
          prop: 'fileList',
          type: 'dynamic',
          hide: true,
          showColumn: false,
          span:24,
          children: {
            align: 'center',
            headerAlign: 'center',
            rowAdd:(done)=>{
              // this.$message.success('新增回调');
              done()
            },
            rowDel:(row,done)=>{
              // this.$message.success('删除回调'+JSON.stringify(row));
              done();
            },
            column: [{
              width: 200,
              label: '文件名称',
              prop: "fileName",
              formslot: true
            }, {
              width: 360,
              label: '文件地址',
              prop: "url"
            }, {
              width: 200,
              label: '文件属性',
              type: "select",
              dicUrl: "/api/blade-system/dict-biz/dictionary?code=file_type",
              props: {
                label: "dictValue",
                value: "dictValue"
              }
            }, {
              label: '备注',
              prop: "remarks",
            }]
          }
        }]
      },
      page: {
        pageSize: 10,
        currentPage: 1,
        total: 0,
        pageSizes: [10,50,100,200,300]
      },
      search: {},
      loading: false,
      action: "/api/blade-resource/oss/endpoint/put-file",
      headers: { "Blade-Auth": "Bearer " + getToken() },
      ids: [], // id集合
      form: {},
    }
  },
  created() {
    let i = 0;
    this.option.column.forEach(item => {
      if (item.search) i++
    })
    if (i % 3 !== 0){
      const num = 3 - Number(i % 3)
      this.option.searchMenuSpan = num * 8;
      this.option.searchMenuPosition = "right";
    }
  },
  methods: {
    // 获得高度
    searchCriteriaSwitch(type){
      if (type){
        this.option.height = this.option.height - 390
      }else {
        this.option.height = this.option.height + 390
      }
      this.$refs.crud.getTableHeight()
    },
    onLoad(page, params) {
      const queryParams = Object.assign({}, params, {
        size: page.pageSize,
        current: page.currentPage,
      })
      getCarList(queryParams).then(res => {
        this.dataList = res.data.data.records;
        this.page.total = res.data.data.total;
        this.option.height = window.innerHeight - 240;
      })
    },
    rowSave(form, done, loading) {
      carSubmit(form).then(res => {
        this.$message.success(form.id? '修改成功': '新增成功')
      })
      this.onLoad(this.page)
      done();
    },
    rowUpdate(form,index,done) {
      carSubmit(form).then(res => {
        this.$message.success(form.id? '修改成功': '新增成功')
      })
      this.onLoad(this.page)
      done();
    },
    rowDel(row) {
      this.$confirm("确定将选择数据删除?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        const ids = this.ids.length == 0? row.id: this.ids.join(',');
        carRemove({ids}).then(res => {
          this.$message.success('删除成功');
          this.onLoad(this.page);
        })
      })
    },
    //附件上传成功
    onSuccessTwo(response,row){
      row.url = response.data.link
      row.fileName = response.data.originalName
    },
    //下载附件
    download(row){
      if (row.url){
        window.open(row.url)
      }else {
        this.$message.warning('无附件，请上传附件后再查看');
      }
    },
    // 搜索
    searchChange(params, done) {
      this.page.currentPage = 1;
      this.onLoad(this.page, params);
      done()
    },
    // 重置
    searchReset() {},
    //刷新
    refreshChange() {
      this.onLoad(this.page, this.search)
    },
    currentChange(currentPage) {
      this.page.currentPage = currentPage;
    },
    sizeChange(pageSize) {
      this.page.pageSize = pageSize;
    },
  },
}
</script>

<style scoped>

</style>