tire-platform-ui/src/views/landTransportation/reportAnalysis/index.vue

<template>
  <div>
    <basic-container v-if="key>0">
      <avue-crud
          :data="goodsList"
          :option="goodsOptionCrud"
          :table-loading="loading"
          :page.sync="page"
          ref="crud"
          @on-load="onLoad"
          @resetColumn="resetColumn"
          @saveColumn="saveColumn"
          @search-change="searchChange"
          @search-criteria-switch="searchCriteriaSwitch"
          @row-save="(row,done,loading)=>{rowSave(row,0,done,loading)}"
          @row-update="rowSave">
        <template slot="menuLeft">
          <el-button type="info" size="small" @click="outExport" icon="el-icon-download">导出</el-button>
        </template>
        <template slot-scope="{row}" slot="fleetId">
          <span>{{ row.fleetName }}</span>
        </template>
        <template slot="billNo" slot-scope="{row,index}">
          <span class="el-button--text" style="cursor: pointer" @click.stop="celJump(row,index)">{{ row.billNo }}</span>
        </template>
        <template slot="corpName" slot-scope="{row,index}">
          <span class="el-button--text" style="cursor: pointer"
                @click.stop="celJump(row,index)">{{ row.corpName }}</span>
        </template>
        <template slot="orderNo" slot-scope="{row,index}">
          <span class="el-button--text" style="cursor: pointer"
                @click.stop="celJump(row,index)">{{ row.orderNo }}</span>
        </template>
        <template slot-scope="{row}" slot="fleetIdSearch">
          <crop-select
              v-model="row.fleetId"
              corpType="CD"
          ></crop-select>
        </template>
        <template slot-scope="{row,index}" slot="menu">
          <el-button
              size="small"
              type="text"
              @click="incidentalConfirm(row)"
          >{{row.confirmStatus == 0?'杂费确认':'杂费取消'}}
          </el-button>
        </template>
        <template slot="addressDetail" slot-scope="{ row,index}">
          <el-tooltip class="item" effect="dark" placement="top">
            <div v-html="ToBreak(row.addressDetail)" slot="content"></div>
            <div style="overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">{{ row.addressDetail }}</div>
          </el-tooltip>
        </template>
        <template slot="extraAmountItemC" slot-scope="{ row,index}">
          <el-tooltip class="item" effect="dark" placement="top">
            <div v-html="ToBreak(row.extraAmountItemC)" slot="content"></div>
            <div style="overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">{{ row.extraAmountItemC }}</div>
          </el-tooltip>
        </template>
        <template slot="extraAmountItemD" slot-scope="{ row,index}">
          <el-tooltip class="item" effect="dark" placement="top">
            <div v-html="ToBreak(row.extraAmountItemD)" slot="content"></div>
            <div style="overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">{{ row.extraAmountItemD }}</div>
          </el-tooltip>
        </template>
      </avue-crud>
      <el-dialog
          title="杂费明细"
          :visible.sync="incidentalType"
          append-to-body
          width="50%">
        <avue-crud
            :data="collectionList"
            :option="collectionOption"
            ref="collection"
            @resetColumn="resetColumnCollection"
            @saveColumn="saveColumnCollection"
            @row-save="(row,done,loading)=>{rowSave(row,0,done,loading)}"
            @row-update="rowSave">
          <template slot-scope="{row,index}" slot="menu">
            <!--          <el-button-->
            <!--              type="text"-->
            <!--              size="small"-->
            <!--              :disabled="goodsForm.status === 1"-->
            <!--              :icon="row.$cellEdit?'el-icon-circle-plus-outline':'el-icon-edit'"-->
            <!--              @click="rowCell(row,index)"-->
            <!--          >{{ row.$cellEdit ? '保存' : '编辑' }}-->
            <!--          </el-button>-->
            <!--          <el-button type="text"-->
            <!--                     icon="el-icon-delete"-->
            <!--                     size="small"-->
            <!--                     :disabled="goodsForm.status === 1"-->
            <!--                     @click="$refs.collection.rowDel(row,index)"-->
            <!--          >删除-->
            <!--          </el-button>-->
            <el-button
                size="small"
                type="text"
                icon="el-icon-s-order"
                @click="annexOpen(row, index)"
            >附 件
            </el-button>
          </template>
          <template slot="menuLeft">
            <!--          <el-button-->
            <!--              type="primary"-->
            <!--              icon="el-icon-plus"-->
            <!--              :disabled="goodsForm.status !== 0"-->
            <!--              @click="addRowCollection"-->
            <!--              size="small">录入明细</el-button>-->
          </template>
        </avue-crud>
        <span slot="footer" class="dialog-footer">
          <el-button @click="incidentalType = false" size="small">取 消</el-button>
          <el-button type="primary" size="small" v-if="collectionList.length>0" @click="incidentalClick">{{confirmStatus == 0?'杂费确认':'杂费取消'}}</el-button>
        </span>
      </el-dialog>
      <el-dialog
          title="附件"
          :visible.sync="enclosure"
          append-to-body
          width="70%">
        <c-upload
            typeUpload="GZ"
            :basic="true"
            disabled
            deleteUrl="/api/blade-client/common-file/remove"
            :data="orderList"
            :enumerationValue="76"
        ></c-upload>
        <span slot="footer" class="dialog-footer">
          <el-button @click="enclosure = false" size="small">取 消</el-button>
        </span>
      </el-dialog>
    </basic-container>
  </div>
</template>

<script>
import {
  acceptanceCollection,
  acceptanceDispatchCollection,
  confirmCompletion,
  fleetList,
  motorcadeDriver,
  fleetDriverSave,
  getAttachment,
  saveAttached,
  incidental,
  getFee,
  incidentalConfirm,
  cancelConfirm, standingBookCollection
} from "@/api/landTransportation";
import {getToken} from "@/util/auth";

export default {
  name: "index",
  data() {
    return {
      key: 0,
      form: {},
      enclosure:false,
      orderList: [],
      collectionOptionBackup: {
        align: 'center',
        menuAlign: 'center',
        refreshBtn: false,
        index: true,
        // menu:false,
        cancelBtn: false,
        editBtn: false,
        delBtn: false,
        cellBtn: false,
        addBtn: false,
        addRowBtn: false,
        showSummary: true,
        addBtnText: '录入明细',
        summaryText: "合计",
        sumColumnList: [{
          name: 'price',
          type: 'sum',
          decimals: 2
        }, {
          name: 'amount',
          type: 'sum',
          decimals: 2
        }, {
          name: 'quantity',
          type: 'sum',
          decimals: 0
        }],
        column: [
          {
            label: '费用名称',
            slot: true,
            width: 160,
            prop: 'feeName'
          }, {
            label: '金额',
            cell: true,
            prop: 'amount'
          }, {
            label: '车号',
            prop: 'plateNo'
          }, {
            label: '备注',
            prop: 'remarks'
          }
        ]
      },
      collectionOption: {},
      collectionList:[],
      dialogVisible: false,
      loading: false,
      incidentalType: false,
      confirmStatus:0,
      activeName: '',
      page: {
        pageSize: 10,
        currentPage: 1,
        total: 0,
        pageSizes: [10, 50, 100, 200, 300]
      },
      roleName: localStorage.getItem("roleName").split(','),
      goodsList: [],
      goodsOptionCrud: {},
      optionList: {
        stripe: true,
        index: true,
        addBtn: false,
        delBtn: false,
        cellBtn: false,
        cancelBtn: false,
        editBtn: false,
        addRowBtn: false,
        refreshBtn: false,
        searchIcon: true,
        searchIndex: 2,
        searchSpan: 8,
        menu: true,
        searchMenuPosition: "right",
        searchMenuSpan: 6,
        align: 'center',
        height: "auto",
        showSummary: true,
        summaryText: "合计",
        sumColumnList: [
          {
            name: 'landWeight',
            type: 'sum',
            decimals: 2
          }, {
            name: 'landAmountC',
            type: 'sum',
            decimals: 2
          }, {
            name: 'ctnQuantity',
            type: 'count'
          }, {
            name: 'oneFeeC',
            type: 'sum',
            decimals: 2
          }, {
            name: 'twoFeeC',
            type: 'sum',
            decimals: 2
          }, {
            name: 'threeFeeC',
            type: 'sum',
            decimals: 2
          }, {
            name: 'fourFeeC',
            type: 'sum',
            decimals: 2
          }, {
            name: 'fiveFeeC',
            type: 'sum',
            decimals: 2
          }, {
            name: 'oneFeeD',
            type: 'sum',
            decimals: 2
          }, {
            name: 'twoFeeD',
            type: 'sum',
            decimals: 2
          }, {
            name: 'threeFeeD',
            type: 'sum',
            decimals: 2
          }, {
            name: 'fourFeeD',
            type: 'sum',
            decimals: 2
          }, {
            name: 'fiveFeeD',
            type: 'sum',
            decimals: 2
          }, {
            name: 'profit',
            type: 'sum',
            decimals: 2
          }],
        column: [{
          label: '客户名称',
          prop: 'corpShortName',
          overHidden: true,
          index: 1,
          width: 140,
          search: true,
        }, {
          label: '货运日期',
          prop: 'arrivalTime',
          overHidden: true,
          type: "date",
          searchRange: true,
          defaultTime: ['00:00:00', '23:59:59'],
          format: "yyyy-MM-dd HH:mm",
          valueFormat: "yyyy-MM-dd HH:mm:ss",
          index: 2,
          width: 150,
          search: true,
        }, {
          label: '业务员',
          prop: 'salesmanName',
          index: 3,
          width: 140,
        }, {
          label: '货运地点',
          index: 4,
          width: 160,
          search: true,
          prop: 'addressDetail'
        }
          // ,{
          //   label: '订单号',
          //   prop: 'orderNo',
          //   overHidden: true,
          //   index: 1,
          //   width: 140,
          //   search: true,
          // }
          , {
            label: '票据号',
            prop: 'receiptNo',
            overHidden: true,
            index: 5,
            width: 140,
            search: true,
          }, {
            label: '提单号',
            width: 100,
            index: 6,
            search: true,
            overHidden: true,
            prop: 'billNo'
          }, {
            label: '场站',
            prop: 'station',
            overHidden: true,
            index: 7,
            width: 140,
            search: true,
          }, {
            label: '箱型箱量',
            width: 100,
            index: 8,
            overHidden: true,
            prop: 'ctnDetail'
          }, {
            label: '车队',
            width: 200,
            search: true,
            index: 9,
            overHidden: true,
            prop: 'fleetId'
          }, {
            label: '车号',
            width: 150,
            prop: 'plateNo',
            overHidden: true,
            index: 10,
            search: true
          }, {
            label: '应收运费',
            overHidden: true,
            index: 11,
            prop: 'landAmountD'
          }, {
            label: '应收杂费',
            overHidden: true,
            index: 12,
            prop: 'extraAmountD'
          }, {
            label: '备注',
            overHidden: true,
            index: 13,
            prop: 'remarks'
          }, {
            label: '应收杂费明细',
            width: 100,
            index: 17,
            prop: 'extraAmountItemD'
          }]
      },
      totalData: {}
    }
  },
  async created() {
    this.goodsOptionCrud = await this.getColumnData(this.getColumnName(88.1), this.optionList);
    this.collectionOption = await this.getColumnData(this.getColumnName(88.2), this.collectionOptionBackup);
    this.roleName.forEach(item =>{
      if (item == '客户'){
        return this.goodsOptionCrud.menu = true
      }else if (item == '平台') {
        this.goodsOptionCrud.menu = false
        for (let item of this.goodsOptionCrud.column){
          if (item.prop === 'landAmountC') return
        }
        return this.goodsOptionCrud.column.push( {
          label: '应付运费',
          overHidden: true,
          index: 14,
          prop: 'landAmountC'
        }, {
          label: '应付杂费',
          overHidden: true,
          index: 15,
          prop: 'extraAmountC'
        }, {
          label: '利润',
          width: 100,
          precision: 2,
          index: 16,
          type: 'number',
          prop: 'profit'
        }, {
          label: '应付杂费明细',
          width: 100,
          index: 18,
          prop: 'extraAmountItemC'
        })
      }else {
        return this.goodsOptionCrud.menu = false;
      }
    })
    this.key++
    let i = 0;
    this.goodsOptionCrud.column.forEach(item => {
      if (item.search) i++
    })
    if (i % 3 !== 0) {
      const num = 3 - Number(i % 3)
      this.goodsOptionCrud.searchMenuSpan = num * 8;
      this.goodsOptionCrud.searchMenuPosition = "right";
    }
  },
  methods: {
    //导出
    outExport() {
      this.$confirm('是否导出数据明细？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        window.open(
            `/api/blade-land/order/acct-export?${this.website.tokenHeader}=${getToken()}`
        );
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消' //
        });
      })
    },
    //自定义列保存
    async saveColumnCollection() {
      /**
       * 已定义全局方法，直接使用，saveColumnData保存列数据方法,参数传值(表格名称，当前表格的option数据)
       * 已定义全局方法，直接使用，getColumnName方法用来获取枚举值，参数根据自己定义的code值获取中文名
       * 一定要执行异步操作，要等接口成功返回，才能执行下一行代码
       */
      const inSave = await this.saveColumnData(this.getColumnName(88.2), this.collectionOption);
      if (inSave) {
        this.$message.success("保存成功");
        //关闭窗口
        this.$refs.collection.$refs.dialogColumn.columnBox = false;
      }
    },
    //自定义列重置
    async resetColumnCollection() {
      this.collectionOption = this.collectionOptionBackup;
      const inSave = await this.delColumnData(this.getColumnName(88.2), this.collectionOptionBackup);
      if (inSave) {
        this.$message.success("重置成功");
        this.$refs.collection.$refs.dialogColumn.columnBox = false;
      }
    },
    //自定义列保存
    async saveColumn() {
      /**
       * 已定义全局方法，直接使用，saveColumnData保存列数据方法,参数传值(表格名称，当前表格的option数据)
       * 已定义全局方法，直接使用，getColumnName方法用来获取枚举值，参数根据自己定义的code值获取中文名
       * 一定要执行异步操作，要等接口成功返回，才能执行下一行代码
       */
      const inSave = await this.saveColumnData(this.getColumnName(88.1), this.goodsOptionCrud);
      if (inSave) {
        this.$message.success("保存成功");
        //关闭窗口
        this.$refs.crud.$refs.dialogColumn.columnBox = false;
      }
    },
    //自定义列重置
    async resetColumn() {
      this.goodsOptionCrud = this.optionList;
      const inSave = await this.delColumnData(this.getColumnName(88.1), this.optionList);
      if (inSave) {
        this.$message.success("重置成功");
        this.$refs.crud.$refs.dialogColumn.columnBox = false;
      }
      this.roleName.forEach(item =>{
        if (item == '客户'){
          return this.goodsOptionCrud.menu = true
        }else if (item == '平台') {
          this.goodsOptionCrud.menu = false
          for (let item of this.goodsOptionCrud.column){
            if (item.prop === 'landAmountC') return false
          }
          return this.goodsOptionCrud.column.push( {
            label: '应付运费',
            overHidden: true,
            index: 14,
            prop: 'landAmountC'
          }, {
            label: '应付杂费',
            overHidden: true,
            index: 15,
            prop: 'extraAmountC'
          }, {
            label: '利润',
            width: 100,
            precision: 2,
            index: 16,
            type: 'number',
            prop: 'profit'
          }, {
            label: '应付杂费明细',
            width: 100,
            index: 18,
            prop: 'extraAmountItemC'
          })
        }else {
          return this.goodsOptionCrud.menu = false
        }
      })
    },
    //行跳转
    celJump(row, index) {
      this.$router.push({
        path: '/landTransportation/dispatchingCars/index',
        query: {orderId: row.orderId},
      });
    },
    // 获得高度
    searchCriteriaSwitch(type) {
      if (type) {
        this.goodsOptionCrud.height = this.goodsOptionCrud.height - 90
      } else {
        this.goodsOptionCrud.height = this.goodsOptionCrud.height + 90
      }
      this.$refs.crud.getTableHeight()
    },
    //箱信息保存
    rowSave(row, index, done, loading) {
      done()
    },
    //箱信息选择车队
    getfleetIdT(data, row) {
      this.$set(row, 'fleetName', data.cname)
    },
    //搜索
    searchChange(params, done) {
      this.onLoad(this.page, params)
      done();
    },
    //切换订单状态
    handleClick(tab) {
      this.activeName = tab
      this.onLoad(this.page)
    },
    //查询
    onLoad(page, params) {
      motorcadeDriver(4).then(res => {
        this.totalData = res.data.data
      })
      let queryParams = {
        size: page.pageSize,
        current: page.currentPage,
        tag: '0',
        ...params
      }
      if (queryParams.arrivalTime) {
        queryParams.beginArrivalTime = params.arrivalTime[0]
        queryParams.endArrivalTime = params.arrivalTime[1]
        delete queryParams.arrivalTime
      }
      this.loading = true;
      standingBookCollection(queryParams).then(res => {
        this.goodsList = res.data.data.records
        this.page.total = res.data.data.total
        this.goodsOptionCrud.height = window.innerHeight - 245;
      }).finally(() => {
        this.loading = false;
      })
    },
    //箱信息保存
    rowSaveT(row, index, done, loading) {
      if (row.$cellEdit) {
        fleetDriverSave(row).then(res => {
          this.$message.success("保存成功");
        })
      }
      this.$refs.crud.rowCell(row, index)
    },
    //箱信息派车
    designate(row) {
      this.$confirm('是否确定受理', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        acceptanceCollection(row).then(res => {
          this.$message.success('操作成功');
          this.onLoad(this.page)
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        });
      });
    },
    //取消派车
    cancelDesignate(row) {
      this.$confirm('是否确定取消受理', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        acceptanceDispatchCollection({id: row.id}).then(res => {
          this.$message.success('操作成功');
          this.onLoad(this.page)
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        });
      });
    },
    confirmCompletion(row) {
      this.$confirm('是否确定完工', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        confirmCompletion({id: row.id}).then(res => {
          this.$message.success('操作成功');
          this.onLoad(this.page)
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        });
      });
    },
    //打开附件
    annexOpen(row, index){
      this.enclosure = true
      this.formAnnex = row
      getFee({id:row.id}).then(res=>{
        this.orderList = res.data.data
      })
    },
    //保存
    saveAnnex() {
      saveAttached({
        id: this.form.id,
        fileList: this.orderList
      }).then(res => {
        this.annexOpen(this.form)
      })
    },
    ToBreak(val) {
      if (val) return val.replace(/\n/g, '<br/>')
    },
    incidentalConfirm(row){
      incidental({
        orderId:row.orderId,
        plateNo:row.plateNo,
        type:'1'
      }).then(res=>{
        this.collectionList = res.data.data
        this.incidentalType = true
        this.confirmStatus = row.confirmStatus
      })
    },
    incidentalClick(){
      let id = []
      this.collectionList.forEach(item => id.push(item.id))
      if (this.confirmStatus == 0){
        incidentalConfirm({ids:id.join(',')}).then(res=>{
          this.$message.success("确认成功");
        })
      }else {
        cancelConfirm({ids:id.join(',')}).then(res=>{
          this.$message.success("取消成功");
        })
      }
      this.incidentalType = false
    }
  }
}
</script>

<style lang="scss" scoped>
.home-container {
  padding: 0px 5px 5px 5px;
  box-sizing: border-box;
  height: 100%;

  ::v-deep .el-card__body {
    padding: 10px 15px;
    font-size: 14px;
  }

  &__card {
    width: 100%;
    height: 100%;
  }

  .title {
    display: flex;
    justify-content: space-between;

    .right {
      display: flex;
      align-items: center;

      &_but {
        margin-right: 10px;
        border: 1px solid #409eff;
        width: 80px;
        border-radius: 3px;
        display: flex;

        &_left {
          width: 40px;
          text-align: center;
          color: #409eff;
          cursor: pointer;
        }

        &_right {
          width: 40px;
          text-align: center;
          color: #409eff;
          cursor: pointer;
        }

        &_active {
          color: #fff;
          background-color: #409eff;
        }
      }
    }
  }
}

.content {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 6vh;
  width: 80vw;

  .divider {
    display: block;
    height: 0px;
    width: 100%;
    border-top: 1px dashed #dcdfe6;
  }

  &-item {
    margin-left: 1vw;

    .card {
      width: 130px;
      display: flex;
      align-items: center;

      &-title {
        width: 40px;
        height: 40px;
        text-align: center;
        border-radius: 50%;
        font-size: 20px;
        font-weight: 600;
        display: flex;
        justify-content: center;
        align-items: center;

        span {
          line-height: 20px;
        }
      }

      &-title1 {
        color: #037fe1;
        background-color: rgba(3, 127, 225, 0.15);
      }

      &-title2 {
        color: #ffa21e;
        background-color: rgba(255, 162, 30, 0.15);
      }

      &-title3 {
        color: #fb5b60;
        background-color: rgba(251, 91, 96, 0.15);
      }

      &-title4 {
        color: #42bc6f;
        background-color: rgba(66, 188, 111, 0.15);
      }

      &-title5 {
        color: #14cde1;
        background-color: rgba(52, 149, 161, 0.15);
      }

      &-title6 {
        color: rgba(4, 66, 31, 0.63);
        background-color: rgba(66, 188, 111, 0.15);
      }

      &-content {
        padding-left: 1vw;
        display: flex;
        flex-direction: column;

        &-num {
          font-size: 20px;
          font-weight: 600;
        }

        &-text {
          color: #909399;
        }
      }
    }
  }
}
</style>