yiliangyiyun-pc/src/views/tradeServicesManagement/warehouseReceiptRegulation.vue

//贸易服务管理
<template>
  <div class="container">
    <!-- <map-drag :class="{active:isActive}" :listData='mapInfo'></map-drag> -->
    <!-- <div class="bottom" :class="{active:isActive}">
      <div class="bottom-content">
        <div class="bottom-item" @click="startHacking">查看申请记录</div>
        <div class="bottom-item" @click="startHacking"><i class="el-icon-d-arrow-right icon"></i></div>
        <el-radio class="bottom-item" v-model="radio" label="1" @change="selectShowType(1)">默认地图</el-radio>
      </div>
    </div>
    <div class="top">
      <div class="top-content">
        <div class="top-item" @click="startHacking1">查看地图</div>
        <div class="top-item" @click="startHacking1"><i class="el-icon-d-arrow-left icon"></i></div>
        <el-radio class="top-item" v-model="radio" label="2" @change="selectShowType(2)">默认列表</el-radio>
      </div>
    </div> -->
    <div class="content2">
      <div class="header">
        <el-button :type="!searchType ? 'primary' : ''" @click="handlestatus()">全部</el-button>
        <el-button :type="searchType == 1 ? 'primary' : ''" @click="handlestatus(1)">待审核</el-button>
        <el-button :type="searchType == 2 ? 'primary' : ''" @click="handlestatus(2)">待审批</el-button>
        <el-button :type="searchType == 3 ? 'primary' : ''" @click="handlestatus(3)">待还</el-button>
        <el-button :type="searchType == 4 ? 'primary' : ''" @click="handlestatus(4)">已还</el-button>
        <el-input @keyup.enter.native="findList()" placeholder="可按业务编号、合同编号、仓库名查找" class="search-input" v-model="searchKeyWord"></el-input>
        <el-button type="primary" @click='findList'>查找</el-button>
        <el-button type="" @click='handle'>电子锁操作记录</el-button>
        <el-button type="primary" v-hasPermission=" `tradeServicesManagement.tradeService.add`" class="add" @click="add">添加</el-button>
      </div>
      <el-table :data="tradeServicesList" style="width: 100%; margin-top: 20px" ref="tradeServicesList" border
        height="calc(100% - 100px)">
        <el-table-column fixed 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 fixed prop="billNo" label="业务编号" width="130"></el-table-column>
        <el-table-column fixed prop="warehouseName" label="仓库名" width="130"></el-table-column>
        <el-table-column prop="goodsName" label="货名" width="130"></el-table-column>
        <el-table-column prop="weight" label="净重（吨）" width="100"></el-table-column>
        <el-table-column prop="dryOutWeight" label="折干重量（吨）" width="150"></el-table-column>
        <el-table-column prop="unitPrice" label="单价（元/吨）" width="100"></el-table-column>
        <el-table-column prop="totalValue" label="货值（元）" width="100"></el-table-column>
        <el-table-column prop="paymentAmount" label="发放金额（元）" width="150"></el-table-column>
        <el-table-column prop="amountDue" label="应还金额（元）" width="150"></el-table-column>
        <el-table-column prop="amountRepaid" label="已还金额（元）" width="150"></el-table-column>
        <el-table-column prop="amountToRepaid" label="待还金额（元）" width="150"></el-table-column>
        <el-table-column prop="approveStatus" label="状态" width="100">
          <template slot-scope="scope">
            <span v-if="scope.row.status == '待还款'">{{scope.row.status}}</span>
            <span v-else>{{scope.row.approveStatus?scope.row.approveStatus:scope.row.status}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="address" label="操作" width="500">
          <template slot-scope="scope">
            <el-button size="mini" v-hasPermission=" `tradeServicesManagement.tradeService.view`" @click="lookBtnClick(scope.row, 2)">
              查看</el-button>
            <el-button v-if="scope.row.taskId && scope.row.approveStatus=='待决策人审核'" size="mini" @click="toExamineBtnClick(scope.row, 2)">
              审核</el-button>
                <el-button v-if="scope.row.taskId && scope.row.approveStatus=='待第三方审核'" size="mini" @click="toExamineBtnClick(scope.row, 2)">
              审核</el-button>
            <el-button v-if="scope.row.taskId && scope.row.approveStatus=='待银行审批'" size="mini" @click="approveBtnClick(scope.row, 2)">
              审批</el-button>
            <el-button v-hasPermission=" `tradeServicesManagement.tradeService.return`" size="mini" @click="repaymentBtnClick(scope.row, 2)" v-if="scope.row.status == '待还款'">
              还款</el-button>
            <el-button v-hasPermission=" `tradeServicesManagement.tradeService.edit`" size="mini" @click="rowEditBtnClick(scope.row)" v-if="!scope.row.approveStatus&&scope.row.status=='已驳回'">修改</el-button>
            <el-button v-hasPermission=" `tradeServicesManagement.tradeService.delete`" size="mini" type="danger" @click="rowDeleteBtnClick(scope.row)" v-if="!scope.row.approveStatus&&scope.row.status=='已驳回'">删除</el-button>
            <el-button v-if="scope.row.lockedStatusFlag==1" size="mini" type="success" @click="rowhandleBtnClick(scope.row,0)" >电子锁（已开）</el-button>
            <el-button v-if="scope.row.lockedStatusFlag==0" size="mini" type="danger" @click="rowhandleBtnClick(scope.row,1)" >电子锁（已关）</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="paging">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
          :page-size="deptCircularPage.pageSize" layout="total, sizes, prev, pager, next, jumper"
          :total="deptBudgetTotal"></el-pagination>
      </div>
    </div>
    <el-dialog
      title="开锁"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose">
      <div>
        <el-form ref="form" :model="form" label-width="100px">
          <el-form-item label="开锁事由">
            <el-checkbox-group @change="checkchange" v-model="checkList">
              <el-checkbox label="出库"></el-checkbox>
              <el-checkbox label="入库"></el-checkbox>
              <el-checkbox label="巡检"></el-checkbox>
            </el-checkbox-group>
          </el-form-item>
          <el-form-item label="人员">
            <el-input v-model="form.lockName" placeholder="请输入人员"></el-input>
          </el-form-item>
          <el-form-item label="备注（选填）">
            <el-input type="textarea" v-model="form.lockRemark"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submit">提交</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="开锁"
      :visible.sync="dialogVisible1"
      width="30%"
      :before-close="handleClose1">
      <div>
        <div style="border-bottom:1px solid #ccc;padding:10px;" v-for="item in dataList">
          <div style="justify-content: space-between;" class="flex">
            <div>{{ item.dealMsg }}（{{item.billType}}）-{{ item.operateUser }}</div>
            <div>{{ item.createDate }}</div>
          </div>
          <div style="justify-content: space-between;" class="flex">
            <div>{{ item.dealMsgEn }}</div><div>{{ item. verifyUserDuty}}</div>
          </div>
          <div>{{ item.verifyRemark }}</div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  import mapDrag from '@/components/mapdrag/warehouseReceiptMap'
  import {
    getList,
    getMapInfo,
    deleteTrageInfo,
    getDefault,
    setDefault,
    openlock
  } from '@/model/tradeServicesManagement/index'
  import {
    selectWarehouseSelf,
  } from '@/model/houseSelfCollect/index'
  import {
    billoperatehis,
  } from '@/model/contarct/index'
  export default {
    components: {
      mapDrag
    },
    data() {
      return {
        searchVal: '',
        searchKeyWord: '',
        isActive: false,
        radio: '',
        tradeServicesList: [],
        mapInfo: [],
        currentPage: 1,
        pageSize: 10,
        deptBudgetTotal: 0,
        deptCircularPage: {},
        searchType: '',
        warehouseList: [],
        compId: '',
        id:'',
        dialogVisible:false,
        form:{},
        dialogVisible1:false,
        dataList:[],
        checkList:[],
        currectData:{}
      }
    },
    activated() {
      
      let height = document.body.offsetHeight - 57
      document.querySelector('.container').setAttribute('style', 'height:' + height + 'px;')
      // let _showPage = localStorage.getItem('warehouseReceiptRegulation_selectShowType')
      getDefault({functionType:1}).toPromise().then((response) => {
          console.log('地图数据', response)
          if(response){
            this.id=response
            this.radio=response.enabled
          }
          // this.mapInfo = response.data.records
        })
      if (this.radio == "1") {
        this.isActive = false
      } else if (this.radio == "2") {
        this.isActive = true
      } 
      this.compId = localStorage.getItem('ws-pf_compId')
      this.getMapInfo()
      // this.getWarehouseList()
      this.tradeServicesList = []
         
        localStorage.removeItem("pageUp")//删除出入库跳返回时数据刷新的问题
      // let i = localStorage.getItem('warehouseReceiptRegulation_selectShowType')
      // console.log(i)
      // console.log(1212121121)
      this.getList()
    },
    beforeCreate() {
      document.querySelector('body').setAttribute('style', 'overflow:hidden;')
    },
    mounted() {

    },
    methods: {
      handle(){
        billoperatehis({id:localStorage.getItem('ws-pf_compId')}).toPromise().then((response) => {
              this.dataList=response
              this.dialogVisible1 = true
            })
      },
      checkchange(e){
        console.log(e)
        this.form.lockReason=e.join('/')
      },
      submit(){
        openlock({flag:1,electronicLock:this.currectData.electronicLock,...this.form}).toPromise().then((response) => {
              this.$message.success('开锁成功')
              this.dialogVisible = false
              this.getList()
            })
      },
      handleClose(){
        this.dialogVisible = false
      },
      handleClose1(){
        this.dialogVisible1 = false
      },
      rowhandleBtnClick(row,status){
        if(status==0){
          this.$confirm('确定关闭电子锁？', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          })
          .then(() => {
            openlock({flag:2,electronicLock:row.electronicLock}).toPromise().then((response) => {
              this.$message.success('关锁成功')
              this.getList()
            })
          })
        }else{
          this.currectData=row
          this.dialogVisible=true
        }
      },
      getMapInfo() {
        getMapInfo().toPromise().then((response) => {
          // console.log('地图数据', response)
          this.mapInfo = response
          // this.mapInfo = response.data.records
        })
      },
      findList() {
        this.currentPage = 1
        this.pageSize = 10
        this.getList()
      },
      handlestatus(status) {
        this.searchType = status
        this.getList()
      },
      lookBtnClick(row, val2) {
        this.$router.push({
          name: 'warehouseReceiptLook',
          query:{id:row.id, workflowId: row.workflowId}
        })
      },
      toExamineBtnClick(row, val2) {
        this.$router.push({
          name: 'reviewWarehouseReceipt',
          query: { id: row.id}
        })
      },
      approveBtnClick(row, val2) {
        this.$router.push({
          name: 'approveWarehouseReceipt',
            query:{id:row.id,workflowId: row.workflowId}
        })
      },
      repaymentBtnClick(row, val2) {
        // let repayment = JSON.stringify(row)
        this.$router.push({
          name: 'repayment',
          query:{id:row.id,contractNo:row.contractNo}
        })
      },
      rowEditBtnClick(row) {
        this.$router.push({
          name: 'warehouseReceiptEdit',
          query: { id: row.id, workflowId: row.workflowId }
        })
      },
      rowDeleteBtnClick(row) {
         this.$confirm('确定删除本条申请？', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          })
          .then(() => {
            deleteTrageInfo({id:row.id}).toPromise().then((response) => {
             this.$message.success('删除成功')
             this.getList()
          })
          })
      },
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`)
        this.pageSize = val
        this.getWarehouseList()
        this.getList()
      },
      handleCurrentChange(val) {
        this.currentPage = val
        console.log(`当前页: ${val}`)
        this.getList()
      },
      startHacking() {
        this.isActive = true
      },
      startHacking1() {
        this.isActive = false
      },
      getWarehouseList() {
        selectWarehouseSelf({
            compId: this.compId
          })
          .toPromise()
          .then(response => {
            this.warehouseList = response
          })
      },
      getList(val, type) {
        // type=1 地图点击
        if (type == 1) {
          this.isActive = true
          this.searchKeyWord = val
        }
        var data={}
        if(this.$route.query.compId){
          data={
            compId: this.$route.query.compId,
            currentPage: this.currentPage,
            pageSize: this.pageSize,
            searchType: this.searchType,
            searchKeyWord: this.searchKeyWord,
            bankId: this.$route.query.bankId,
            warehouseId: this.$route.query.warehouseId,
          }
        }else{
          data={
            compId: this.compId,
            currentPage: this.currentPage,
            pageSize: this.pageSize,
            searchType: this.searchType,
            searchKeyWord: this.searchKeyWord,
          }
        }
        getList(data)
          .toPromise()
          .then((response) => {
            this.tradeServicesList = response.records
            this.deptBudgetTotal = response.total
          })
      },
      selectShowType(e) {
        // this.isActive=!this.isActive
        if(this.radio == 1){
          this.radio = 2
        }else{
          this.radio = 1
        }
        
        var data={}
        if(this.id!=''){
          data={functionType:1,enabled:0,id:this.id}
        }else{
          data={
            functionType:1,enabled:1,
          }
        }
        setDefault(data).toPromise()
          .then(response => {
            this.getList()
          })
      },
      add() {
        this.$router.push({
          name: 'warehouseReceiptAdd'
        })
      }
    }
  }
</script>
<style lang="scss" scoped>
  .icon {
    transform: rotate(90deg);
    margin: 0 10px;
  }

  .active {
    height: 0 !important;
    overflow: hidden;
  }

  .bottom,
  .top {
    display: flex;
    justify-items: flex-end;
    height: 5%;
    align-content: center;

    .bottom-content,
    .top-content {
      display: flex;
      justify-content: flex-end;
      width: 100%;
      padding-right: 25px;
    }

    .bottom-item,
    .top-item {
      display: flex;
      align-items: center;
    }
  }


  .content2 {
    // background: pink;
    padding: 20px;
    height: calc(100% - 44px);

    .header {
      position: relative;

      .add {
        position: absolute;
        right: 0;
      }
    }

    .search-input {
      width: 300px;
      margin-left: 10px;
    }
  }

  .paging {
    margin-top: 10px;
    text-align: center;
  }
  /deep/.el-table .cell{
    text-align: center;
  }
</style>