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"
          :before-open="beforeOpen"
          @search-reset="searchReset"
          @refresh-change="refreshChange"
          @current-change="currentChange"
          @size-change="sizeChange"
          @search-criteria-switch="searchCriteriaSwitch"
      >
        <template slot="menuLeft">
          <el-button type="primary"
                     size="small"
                     icon="el-icon-upload2"
                     @click="handleImport">导入
          </el-button>
        </template>
        <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="CD"
          />
        </template>
        <template slot="fleetIdSearch">
          <crop-select v-model="search.fleetId" corpType="CD"></crop-select>
        </template>
        <template slot="fleetId" slot-scope="{row,disabled}">
          <span>{{ row.fleetName }}</span>
        </template>
        <template slot="driverId" slot-scope="{row,disabled}">
          <span>{{ row.driverName }}</span>
        </template>
      </avue-crud>
      <el-dialog title="导入"
                 append-to-body
                 :visible.sync="excelBox"
                 width="555px">
        <avue-form :option="excelOption" v-model="excelForm" :upload-after="uploadAfter">
          <template slot="excelTemplate">
            <el-button type="primary" @click="handleTemplate">
              点击下载<i class="el-icon-download el-icon--right"></i>
            </el-button>
          </template>
        </avue-form>
        <p style="text-align: center;color: #DC0505">
          温馨提示 第一次导入时请先下载模板
        </p>
      </el-dialog>
    </basic-container>
  </div>
</template>

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

export default {
  name: "index",
  data() {
    return {
      dataList: [],
      excelOption: {
        submitBtn: false,
        emptyBtn: false,
        column: [
          {
            label: '模板下载',
            prop: 'excelTemplate',
            formslot: true,
            span: 24,
          }, {
            label: '模板上传',
            prop: 'excelFile',
            type: 'upload',
            drag: true,
            loadText: '模板上传中，请稍等',
            span: 24,
            propsHttp: {
              res: 'data'
            },
            tip: '请上传 .xls,.xlsx 标准格式文件',
            action: "/api/blade-client/land-vehicle/import-data"
          }
        ]
      },
      excelForm: {},
      option: {
        dialogWidth: '85%',
        searchIcon: true,
        searchIndex: 2,
        searchMenuSpan: 24,
        stripe: true,
        searchLabelWidth: 100,
        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,
          type: 'select',
          dicUrl: "/api/blade-client/land-driver/driver-list?vehicleId={{key}}",
          props: {
            label: "name",
            value: "id"
          },
        }, {
          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,
          searchRange: true,
          span: 8,
          searchSpan: 8,
          type: "date",
          searchDefaultTime: ['00:00:00', '23:59:59'],
          format: "yyyy-MM-dd",
          valueFormat: "yyyy-MM-dd HH:mm:ss",
        }, {
          label: '注册日期',
          prop: 'registerDate',
          index: 17,
          width: 140,
          overHidden: true,
          type: "date",
          searchRange: true,
          search: true,
          span: 8,
          searchSpan: 8,
          searchDefaultTime: ['00:00:00', '23:59:59'],
          format: "yyyy-MM-dd",
          valueFormat: "yyyy-MM-dd HH:mm:ss",
        }, {
          label: '报废日期',
          prop: 'scrapDate',
          index: 18,
          width: 140,
          overHidden: true,
          search: true,
          searchRange: true,
          span: 8,
          searchSpan: 8,
          type: "date",
          searchDefaultTime: ['00:00:00', '23:59:59'],
          format: "yyyy-MM-dd",
          valueFormat: "yyyy-MM-dd HH:mm:ss",
        }, {
          label: '外廓尺寸mm',
          prop: 'oto',
          index: 19,
          width: 140,
          cell: true,
          overHidden: true,
          span: 8,
          searchSpan: 8,
        }, {
          label: '总重量kg',
          prop: 'totalWeight',
          index: 20,
          width: 140,
          cell: true,
          overHidden: true,
          span: 8,
          searchSpan: 8,
        }, {
          label: '核定重量kg',
          prop: 'approvedWeight',
          index: 21,
          width: 140,
          cell: true,
          overHidden: true,
          span: 8,
          searchSpan: 8,
        }, {
          label: '装备重量kg',
          prop: 'equipmentWeight',
          index: 22,
          width: 140,
          cell: true,
          overHidden: true,
          span: 8,
          searchSpan: 8,
        }, {
          label: '年审',
          prop: 'inspectExpired',
          overHidden: true,
          type: "date",
          searchRange: true,
          search: true,
          span: 8,
          searchSpan: 8,
          searchDefaultTime: ['00:00:00', '23:59:59'],
          format: "yyyy-MM-dd",
          valueFormat: "yyyy-MM-dd HH:mm:ss",
        }, {
          label: '保险',
          prop: 'insuranceExpired',
          overHidden: true,
          type: "date",
          searchRange: true,
          search: true,
          span: 8,
          searchSpan: 8,
          searchDefaultTime: ['00:00:00', '23:59:59'],
          format: "yyyy-MM-dd",
          valueFormat: "yyyy-MM-dd HH:mm:ss",
        },

          //   {
          //   label: '信用等级',
          //   width: 150,
          //   span: 8,
          //   searchSpan: 8,
          //   prop: 'salesman',
          //   search: true,
          //   overHidden: true,
          //   type: "select",
          //   dicUrl: "/api/blade-system/dict-biz/dictionary?code=credit_rating",
          //   props: {
          //     label: "dictValue",
          //     value: "dictKey"
          //   },
          // },
          {
            label: '附件',
            prop: 'fileList',
            type: 'dynamic',
            hide: true,
            showColumn: false,
            span: 24,
            children: {
              align: 'center',
              stripe: true,
              headerAlign: 'center',
              rowAdd: (done) => {
                // this.$message.success('新增回调');
                done()
              },
              rowDel: (row, done) => {
                if (row.id) {
                  removeFile(row.id).then(res => {
                    done();
                  })
                } else {
                  done();
                }
              },
              column: [{
                width: 360,
                label: '文件地址',
                prop: "url"
              }, {
                width: 200,
                label: '文件名称',
                prop: "fileName",
                formslot: true
              }, {
                width: 200,
                label: '文件属性',
                type: "select",
                dicUrl: "/api/blade-system/dict-biz/dictionary?code=file_type",
                props: {
                  label: "dictValue",
                  value: "dictValue"
                }
              }, {
                label: '备注',
                prop: "remarks",
              }]
            }
          },
          {
            label: '司机变更记录',
            prop: 'vehicleChangeList',
            type: 'dynamic',
            span: 24,
            hide: true,
            showColumn: false,
            children: {
              align: 'center',
              headerAlign: 'center',
              addBtn: false,
              stripe: true,
              delBtn: false,
              cellBtn: false,
              column: [
                {
                  label: '司机名',
                  prop: "driverName",
                  cell: false
                }, {
                  label: '变更人',
                  prop: "changeUserName",
                  cell: false
                }, {
                  label: '变更日期',
                  prop: "changeTime",
                  cell: false
                }]
            }
          }
        ]
      },
      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: {},
      excelBox: false
    }
  },
  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: {
    handleImport() {
      this.excelBox = true;
    },
    uploadAfter(res, done, loading, column) {
      this.excelBox = false;
      this.refreshChange();
      done();
    },
    handleTemplate() {
      window.open(`/api/blade-client/land-vehicle/import-template?${this.website.tokenHeader}=${getToken()}`);
    },
    //点击行编辑时查看
    beforeOpen(done, type) {
      if (this.form.id) {
        detailDelegationList(this.form.id).then(res => {
          this.form = res.data.data
          done()
        })
      } else {
        done()
      }
    },
    // 获得高度
    searchCriteriaSwitch(type) {
      if (type) {
        this.option.height = this.option.height - 322
      } else {
        this.option.height = this.option.height + 322
      }
      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;
      let data = params
      if (data.purchaseDate) {
        data.beginPurchaseDate = params.purchaseDate[0]
        data.endPurchaseDate = params.purchaseDate[1]
      }
      if (data.registerDate) {
        data.beginRegisterDate = params.registerDate[0]
        data.endRegisterDate = params.registerDate[1]
      }
      if (data.scrapDate) {
        data.beginScrapDate = params.scrapDate[0]
        data.endScrapDate = params.scrapDate[1]
      }
      if (data.inspectExpired) {
        data.beginInspectExpired = params.inspectExpired[0]
        data.endInspectExpired = params.inspectExpired[1]
      }
      if (data.insuranceExpired) {
        data.beginInsuranceExpired = params.insuranceExpired[0]
        data.endInsuranceExpired = params.insuranceExpired[1]
      }
      delete data.purchaseDate
      delete data.registerDate
      delete data.scrapDate
      delete data.inspectExpired
      delete data.insuranceExpired
      this.onLoad(this.page, data);
      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>