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

<template>
<div>
  <basic-container>
    <avue-crud
        ref="crud"
        :data="dataList"
        :option="option"
        v-model="form"
        :table-loading="loading"
        :page.sync="page"
        @on-load="onLoad"
        @row-del="rowDel"
        @search-change="searchChange"
        @row-update="rowUpdate"
        :before-open="beforeOpen"
        @search-criteria-switch="searchCriteriaSwitch"
        @row-save="rowSave">
      <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-scope="scope" slot="fleetIdForm">
        <crop-select v-model="form.fleetId"/>
      </template>
      <template slot-scope="scope" slot="fleetIdSearch">
        <crop-select v-model="form.fleetId"/>
      </template>
      <template slot-scope="{type,size}" slot="menu">
        <el-button icon="el-icon-check" :size="size" :type="type">创建用户</el-button>
      </template>
    </avue-crud>
  </basic-container>
</div>
</template>

<script>
import {getToken} from "@/util/auth";
import {
  saveDelegationList,
  removeDelegationList,
  selectInvoiceList,
  detailDelegationList, removeFile
} from "@/api/landTransportation/driver";
export default {
  name: "index",
  data(){
    return{
      form:{},
      dataList:[],
      loading:false,
      page: {
        pageSize: 10,
        currentPage: 1,
        total: 0,
        pageSizes: [10,50,100,200,300]
      },
      action: "/api/blade-resource/oss/endpoint/put-file",
      headers: { "Blade-Auth": "Bearer " + getToken() },
      option:{
        align:'center',
        dialogWidth:'85%',
        index: true,
        searchIcon: true,
        searchIndex: 2,
        searchLabelWidth:100,
        searchSpan:8,
        column:[{
          label: '司机姓名',
          prop: 'name',
          index: 1,
          width: 140,
          span: 8,
          cell: true,
          overHidden: true,
          search:true,
        },{
          label: '身份证号',
          prop: 'idCard',
          index: 1,
          width: 140,
          span: 8,
          cell: true,
          overHidden: true,
          search:true,
        },{
          label: '准驾车型',
          prop: 'permitModel',
          index: 1,
          width: 140,
          span: 8,
          cell: true,
          overHidden: true,
          search:true,
        },{
          label: '电话',
          prop: 'tel',
          index: 1,
          width: 140,
          span: 8,
          cell: true,
          overHidden: true,
          search:true,
        },{
          label: '所属车队',
          prop: 'fleetId',
          index: 1,
          width: 140,
          span: 8,
          cell: true,
          overHidden: true,
          search:true,
        },{
          label: '性别',
          prop: 'sex',
          index: 1,
          width: 140,
          span: 8,
          cell: true,
          overHidden: true,
          search:true,
          type: 'select',
          dicUrl: "/api/blade-system/dict/dictionary?code=sex",
          props: {
            label: "dictValue",
            value: "dictKey"
          },
          dataType: "number",
        },{
          label: '驾驶证有效期',
          prop: 'driveExpire',
          type: "date",
          format: 'yyyy-MM-dd',
          valueFormat: 'yyyy-MM-dd',
          index: 1,
          width: 140,
          span: 8,
          cell: true,
          overHidden: true,
          search:true,
        },{
          label: '资格证证件号',
          prop: 'qualifiedNo',
          index: 1,
          width: 140,
          span: 8,
          cell: true,
          overHidden: true,
          search:true,
        },{
          label: '资格证有效期',
          prop: 'qualifiedExpire',
          type: "date",
          format: 'yyyy-MM-dd',
          valueFormat: 'yyyy-MM-dd',
          index: 1,
          width: 140,
          span: 8,
          cell: true,
          overHidden: true,
          search:true,
        },{
          label: '押运证证件号',
          prop: 'escortNo',
          index: 1,
          width: 140,
          span: 8,
          cell: true,
          overHidden: true,
          search:true,
        },{
          label: '押运证有效期',
          prop: 'escortExpire',
          type: "date",
          format: 'yyyy-MM-dd',
          valueFormat: 'yyyy-MM-dd',
          index: 1,
          width: 140,
          span: 8,
          cell: true,
          overHidden: true,
          search:true,
        },{
          label: '附件',
          prop: 'fileList',
          type: 'dynamic',
          span:24,
          hide:true,
          showColumn:false,
          children: {
            align: 'center',
            headerAlign: 'center',
            rowAdd:(done)=>{
              // this.$message.success('新增回调');
              done()
            },
            rowDel:(row,done)=>{
              if (row.id) {
                removeFile(row.id).then(res=>{
                  done();
                })
              }else {
                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",
            }]
          }
        }]
      }
    }
  },
  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 - 138
      }else {
        this.option.height = this.option.height + 138
      }
      this.$refs.crud.getTableHeight()
    },
    //附件上传成功
    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('无附件，请上传附件后再查看');
      }
    },
    //新增
    rowSave(row,done,loading){
      console.log(row)
      saveDelegationList(row).then(res=>{
        this.$message.success('保存成功');
        this.onLoad(this.page)
        done()
      }, error => {
        window.console.log(error);
        loading();
      })
    },
    //点击行编辑时查看
    beforeOpen(done,type){
      detailDelegationList(this.form.id).then(res=>{
        this.form = res.data.data
        done()
      })
    },
    //修改
    rowUpdate(row,index,done,loading){
      saveDelegationList(row).then(res=>{
        this.$message.success('保存成功');
        this.onLoad(this.page)
        loading();
        // done()
      }, error => {
        window.console.log(error);
        loading();
      })
    },
    //检索
    onLoad(page, params) {
      let queryParams = {
        size: page.pageSize,
        current: page.currentPage,
        ...params
      }
      this.loading = true;
      selectInvoiceList(queryParams).then(res => {
        this.dataList = res.data.data.records
        this.page.total = res.data.data.total
        this.option.height = window.innerHeight - 240;
      }).finally(() => {
        this.loading = false;
      })
    },
    //搜索
    searchChange(params,done) {
      this.onLoad(this.page,params)
      done();
    },
    //列表删除
    rowDel(row){
      this.$confirm('此操作将永久删除该单据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        removeDelegationList({ids:row.id}).then(res=>{
          this.$message.success('删除成功');
          this.onLoad(this.page)
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
  }
}
</script>

<style scoped>

</style>