yiliangyiyun-pc-jj/src/views/taskManagement/moveWarehouseTask.vue

<!--移库任务-->
<template>
  <div>
    <BaseHeaderLayout :leftSpan="12">
      <template slot="left">
      </template>
      <template slot="right">
        <span style="width: 70px; display: inline-block;color: #8890B1;">状态：</span>
        <ws-select v-model="searchTypeText" placeholder="" class="typeselect" @change="selecttaskType"
          :value="searchType">
          <ws-option v-for="item in taskTypeList" :key="item.value" :label="item.value" :value="item.value"
            style="color: #8890B1;" />
        </ws-select>
        <ws-input class='findValue' v-model="searchKeyWord" placeholder="可按移库任务编号、发货库和收货库查找" clearable maxlength="500"
          @keyup.enter.native="lookUp()" type="input"></ws-input>
        <ws-button class="find" type="primary" @click="lookUp()"><img width="16" height="16" style="
              vertical-align: text-top;
              position: relative;
              top: 0px;
              left: -8px;
            " src="../../../public/img/sousuo.png" alt="" /></ws-button>
        <!-- </div> -->
      </template>
    </BaseHeaderLayout>
    <el-table class="wenzi" :data="gainList.records" style="width: 100%" height="calc(100% - 110px)">
      <el-table-column type="index" label="序号">
        <template scope="scope">
          <span v-if="scope.$index < 9">0{{ scope.$index + 1 }}</span>
          <span v-else>{{ scope.$index + 1 }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="moveTaskNo" label="移库任务编号"></el-table-column>
      <el-table-column prop="warehouseName" label="发货库"> </el-table-column>
      <el-table-column prop="warehouseNameIn" label="收货库">
      </el-table-column>
      <el-table-column prop="goodsName" label="货名"> </el-table-column>
      <el-table-column prop="weight" label="重量（吨）"> </el-table-column>
      <el-table-column prop="deliveryVolume" label="出库量（吨）">
        <template slot-scope="scope">
          {{scope.row.deliveryVolume> 0 ? Number(scope.row.deliveryVolume).toFixed(3):""}}
        </template>
      </el-table-column>
      <el-table-column prop="storageVolume" label="入库量（吨）">
        <template
          slot-scope="scope">{{scope.row.storageVolume > 0 ? Number(scope.row.storageVolume).toFixed(3):""}}</template>
      </el-table-column>
      <el-table-column prop="stockReturnCount" label="退库量（吨）">
        <template slot-scope="scope">
          <el-popover placement="top" :width="160" trigger="hover" visible-arrow="false">
            <template>
              <span slot="reference">
                <!-- <span class="executory"> -->
                {{ scope.row.stockReturnCount }}
                <!-- </span>  -->
              </span>
            </template>
            <div v-for="(item,index) in scope.row.inOutWarehouseTaskList" :key="index">
              <span style="margin-left:6px;">{{ item.warehouseName }}</span>
              <span style="margin-left:20px;">{{ item.weight }}吨</span>
            </div>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column prop="transportLoss" label="运输损耗（吨）">
        <template scope="scope">
          <div v-show="scope.row.taskStatus == '已完成'">
            {{ scope.row.weight - scope.row.weightIn - scope.row.stockReturnCount}}
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="publisher" label="发布者"> </el-table-column>
      <el-table-column prop="taskStatus" label="状态">
        <template slot-scope="scope">
          <el-popover placement="left" :width="285" trigger="click" visible-arrow="false" @show="history(scope.row)">
            <template>
              <span slot="reference">
                <span v-if="scope.row.taskStatus == '待审核'" class="executory"></span>
                <span v-if="scope.row.taskStatus == '执行中'" class="inExecution"></span>
                <span v-if="scope.row.taskStatus == '已完成'" class="done"></span>{{ scope.row.taskStatus }}
              </span>
            </template>
            <div>
              <p style="margin-top: 0; padding-left: 10px">操作历史</p>
              <div v-for="(item, index) in historyList" class="flex">
                <div class="vertical-text vertical-text-left">
                  {{ item.updateDate }}
                </div>
                <div>
                  <div class="vertical-circle"></div>
                  <div v-if="index != historyList.length - 1" class="vertical-line"></div>
                </div>
                <div class="vertical-text">
                  {{ item.operateUser }}<br />{{ item.dealMsg }}
                </div>
              </div>
            </div>
          </el-popover>
          <!-- <img
              width="17"
              height="18"
              style="vertical-align: text-top; position: relative; top: -1px"
              src="../../../public/img/edit.png"
              @click="editClick(scope.row)"
              alt=""
            /> -->
        </template>
      </el-table-column>
      <el-table-column prop="establishDate" label="发布时间" width="150">
      </el-table-column>
      <el-table-column prop="seller" label="详情">
        <template slot-scope="scope">
          <div class="record" @click="see(scope.row)">
            查看
          </div>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
      :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="deptBudgetTotal">
    </el-pagination>
  </div>
</template>
<script>
  import {
    moveList,
    movestates
  } from '@/model/tasksport/index'
  import Pagination from '@/components/Pagination'
  import WsUpload from '@/components/WsUpload'
  export default {
    name: 'viewSpareMoney',
    components: {
      WsUpload,
      Pagination,
    },
    watch: {
      vesselId(val) {
        this.getList()
      },
      isShow(val) {
        this.showType = val
      },
    },
    data() {
      return {
        //弹出框
        dialogViewSpareMoney: false,
        dialogApproveFormVisible: false,
        // 船舶类型
        monetaryKey: null,
        // 表格显示数据
        tableDate: [],

        // 是否显示
        showType: true,
        // 年
        year: '',
        gainList: [],
        currentPage: 1,
        pageSize: 10,
        searchType: 3,
        searchTypeText: '执行中',
        searchKeyWord: '',
        contractType: 2,
        taskTypeKey: 3,
        moveTaskNo: '',
        size: 10,
        spanArr: [],
        taskTypeList: [{
            value: '待审核',
            type: 1
          },
          {
            value: '执行中',
            type: 3
          },
          {
            value: '已驳回',
            type: 2
          },
          {
            value: '已完成',
            type: 4
          },
          {
            value: '全部任务',
            type: ''
          },
        ],
        deptBudgetTotal: 0,
        compId: localStorage.getItem('ws-pf_compId'),
        historyList: [],
        pickerBeginDateBefore: {
          disabledDate: (time) => {
            return time.getTime() > Date.now()
          },
        },
        accessoryTFs: false,
      }
    },
    activated() {
      this.getList()
      this.showType = this.isShow
    },

    methods: {
      //查找
      lookUp() {
        this.currentPage = 1
        this.getList()
      },
      getList() {
        moveList({
            compId: localStorage.getItem('ws-pf_compId'),
            currentPage: this.currentPage,
            pageSize: this.pageSize,
            taskTypeKey: this.taskTypeKey,
            searchType: this.searchType,
            searchKeyWord: this.searchKeyWord,
          })
          .toPromise()
          .then((response) => {
            this.gainList = response
            this.currentPage = response.current
            this.pageSize = response.size
            this.deptBudgetTotal = response.total
          })
      },
      handlestatus(status) {
        this.searchType = status
        this.getList()
      },
      //查看
      see(item) {
        this.$router.push({
          path: 'moveWarehouseTaskLook',
          query: {
            moveTaskNo: item.moveTaskNo,
          },
        })
      },
      selecttaskType(e) {
        for (var i = 0; i < this.taskTypeList.length; i++) {
          if (this.taskTypeList[i].value == e) {
            this.searchType = this.taskTypeList[i].type
            this.lookUp()
          }
        }
        this.getList()
      },

      getSpanArr(data) {
        let that = this
        //页面展示的数据，不一定是全部的数据，所以每次都清空之前存储的 保证遍历的数据是最新的数据。以免造成数据渲染混乱
        that.spanArr = []
        that.pos = 0
        //遍历数据
        data.forEach((item, index) => {
          //判断是否是第一项
          // if (index === 0) {
          //   this.spanArr.push(1)
          //   this.pos = 0
          // } else {
          //不是第一项时，就根据标识去存储
          if (data[index].warehouseNumViewList.length > 1) {
            // 查找到符合条件的数据时每次要把之前存储的数据+1
            this.spanArr[this.pos] = data[index].warehouseNumViewList.length
            this.spanArr.push(0)
          } else {
            // 没有符合的数据时，要记住当前的index
            this.spanArr.push(1)
            this.pos = index
          }

        })
      },
      dateFormat(fmt, date) {
        let ret
        const opt = {
          'Y+': date.getFullYear().toString(), // 年
          'm+': (date.getMonth() + 1).toString(), // 月
          'd+': date.getDate().toString(), // 日
          'H+': date.getHours().toString(), // 时
          // "M+": date.getMinutes().toString(),         // 分
          // "S+": date.getSeconds().toString()          // 秒
          // 有其他格式化字符需求可以继续添加，必须转化成字符串
        }
        for (let k in opt) {
          ret = new RegExp('(' + k + ')').exec(fmt)
          if (ret) {
            fmt = fmt.replace(
              ret[1],
              ret[1].length == 1 ? opt[k] : opt[k].padStart(ret[1].length, '0')
            )
          }
        }
        return fmt
      },
      handleClose() {
        this.accessoryTFs = false
      },
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`)
        this.pageSize = val
        this.getList()
      },
      handleCurrentChange(val) {
        this.currentPage = val
        console.log(`当前页: ${val}`)
        this.getList()
      },
      editClick(row) {
        var status = ''
        if (row.taskStatus == '待审核' || row.taskStatus == '已完成') {
          status = '执行中'
        } else if (row.taskStatus == '执行中') {
          status = '已完成'
        }
        //cancelButtonClass: "btn-custom-cancel"
        this.$confirm(`是否将状态改为${status}`, {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
          })
          .then(() => {
            movestates({
                id: row.id
              })
              .toPromise()
              .then((response) => {
                this.$notify.success({
                  title: '成功',
                  message: '状态修改成功',
                })
                this.getList()
              })
              .catch((response) => {
                // EventBus.$emit('error', this.$t('showMessage.asteriskRequired'))
              })
          })
          .catch(() => {
            return false
          })
      },

      // 关闭 dialog时 处理文件url 初始化upload组件
      handleCloe() {
        this.dialogViewSpareMoney = false
      },
    },
  }
</script>
<style lang="scss" scoped>
  .vertical-text-left {
    width: 62px;
    text-align: right;
  }

  .el-button--primary {
    background-color: #5878e8;
    border-color: #5878e8;
  }

  .el-button--default {
    color: #8890b1;
    border-color: #e8eaf1;
  }

  /deep/.base_header_layout .grid-content.right .find.el-button--primary {
    width: 30px;
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
  }

  /deep/.findValue .el-input__inner {
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
  }

  .completed.el-button--default {
    border-color: #5878e8;
    background-color: #f6f7fc;
    color: #5878e8;
  }

  .putstorage.el-button--default,
  .deliverystorage.el-button--default {
    border-color: #8890b1;
    background-color: #fff;
    color: #8890b1;
  }

  /deep/.el-table td,
  /deep/.el-table th.is-leaf {
    border-right: 1px solid #e9ecf7;
    text-align: center;
  }

  /deep/.el-table tr td:first-child,
  /deep/.el-table tr th.is-leaf:first-child {
    border-left: 1px solid #e9ecf7;
  }

  .record,
  .adjustment {
    display: inline-block;
    color: #5878e8;
    padding: 0 4px !important;
    position: relative;
  }

  .el-row {
    height: 50px;
  }

  .base_header_layout .grid-content {
    margin-top: 80px;
  }

  .el-pagination {
    text-align: center;
  }

  .el-select {
    width: 30%;
    margin-right: 10px;
  }

  //状态样式
  .executory,
  .inExecution,
  .done {
    width: 6px;
    height: 6px;
    display: inline-block;
    border-radius: 50%;
    position: relative;
    top: -1px;
    font-size: 14px;
  }

  .executory {
    background: #ff9f24;
  }

  .inExecution {
    background: #5878e8;
  }

  .done {
    background: #50cad4;
  }

  /deep/.typeselect .el-input__inner {
    color: #8890B1;
  }
</style>