yiliangyiyun-pc-jj/src/views/contractManagement/collectionContract.vue

<template>
  <div>
    <BaseHeaderLayout :leftSpan="8">
      <template slot="left">
        <ws-button type="primary" @click="handleAdd()"
          v-hasPermission="`contractManagement.dsContract.dsContractInfo.add`">添加</ws-button>
        <ws-button @click="exportlist()" v-hasPermission="
            `contractManagement.dsContract.dsContractInfo.view`
          ">导出</ws-button>
      </template>
      <template slot="right">
        <span style="width: 142px; 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>
        <el-date-picker v-model="value2" type="daterange" align="right" unlink-panels range-separator="至"
          start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions">
        </el-date-picker>
        <el-input v-model="searchKeyWord" placeholder="可按照合同编号、买方名称、卖方名称进行查找" clearable maxlength="500" type="input"
          class="findValue" @keyup.enter.native="find()"></el-input>
        <ws-button class="find" type="primary" @click="find()"><img width="16" height="16" style="
              vertical-align: text-top;
              position: relative;
              top: 0px;
              left: -8px;
            " src="../../../public/img/sousuo.png" alt="" /></ws-button>
      </template>
    </BaseHeaderLayout>
    <el-table class="wenzi" :data="contractList.records" style="width: 100%; margin-top: 10px"
      height="calc(100% - 105px)">
      <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="contractNo" label="合同编号">
      </el-table-column>
      <el-table-column prop="goodsName" label="货名"></el-table-column>
      <el-table-column prop="buyer" label="买方"> </el-table-column>
      <el-table-column prop="seller" label="卖方"> </el-table-column>
      <el-table-column prop="weight" label="重量（吨）"> </el-table-column>
      <el-table-column prop="completed" label="已完成（吨）">
        <template slot-scope="scope">
          <span style="color: #5473e8; font-weight: 600">{{
            scope.row.completed
          }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="amountIngPayable" label="应付（元）"> </el-table-column>
      <el-table-column prop="amountEdPayableNew" label="已付（元）"> </el-table-column>
      <el-table-column prop="amountNotCollectable" label="应收（元）"> </el-table-column>
      <el-table-column prop="amountEdCollectionable" label="已收（元）"> </el-table-column>
      <el-table-column width='200' prop="invoiced" label="已开销售发票（元）"> </el-table-column>
      <el-table-column prop="status" label="状态">
        <template slot-scope="scope">
          <span v-if="scope.row.approveStatus">{{
            scope.row.approveStatus
          }}</span>
          <el-popover v-else placement="left" trigger="click" visible-arrow="false" @show="history(scope.row)">
            <template>
              <span slot="reference">
                <span v-if="scope.row.status == '待执行'" class="executory"></span>
                <span v-if="scope.row.status == '执行中'" class="inExecution"></span>
                <span v-if="scope.row.status == '已完成'" class="done"></span>{{ scope.row.status }}
              </span>
            </template>
            <div>
              <p style="margin-top: 0; padding-left: 10px">操作历史</p>
              <div v-for="(item, index) in historyList" :key="index" 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 v-if="!scope.row.approveStatus" 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="addressUrl" label="附件">
        <template slot-scope="scope">
          <img width="18" height="20" style="vertical-align: text-top; position: relative; top: -1px"
            src="../../../public/img/fujian.png" @click="fujian(scope.row)" alt="" />
          <span v-if="scope.row.addressUrlArray != null">
            {{
              scope.row.addressUrlArray.length == 0
                ? ''
                : scope.row.addressUrlArray.length
            }}
          </span>
        </template>
      </el-table-column>
      <el-table-column prop="signingDate" label="签订日期"> </el-table-column>
      <el-table-column prop="address" label="操作" width="160">
        <template slot-scope="scope">
          <img width="16" height="16" style="vertical-align: text-top; margin: 0 6px"
            src="../../../public/img/chakan.png" @click="handleExamine(scope.row)" v-hasPermission="
              `contractManagement.dsContract.dsContractInfo.view`
            " alt="" />
          <div v-if="
              (scope.row.approveStatus != '待决策人审核' &&
                !scope.row.approveStatus)
            " style="display: inline-block">
            <img width="17" height="16" style="vertical-align: text-top; margin: 0 6px"
              src="../../../public/img/bianji.png" @click="handleEdit(scope.row)" v-hasPermission="
                `contractManagement.dsContract.dsContractInfo.edit`
              " alt="" />
          </div>
          <img width="16" height="17" style="
              vertical-align: text-top;
              position: relative;
              top: -1px;
              margin: 0 6px;
            " v-if="scope.row.status != '执行中'&&scope.row.status != '已完成'" src="../../../public/img/shanchu.png"
            v-hasPermission="
              `contractManagement.dsContract.dsContractInfo.delete`
            " @click="handleDelete(scope.row)" alt="" />
          <img width="16" height="17" style="
                vertical-align: text-top;
                position: relative;
                top: -1px;
                margin: 0 6px;
              "  src="../../../public/img/jl.png"
            v-hasPermission="
                `contractManagement.dsContract.dsContractInfo.list`
              " @click="handleRecord(scope.row)" alt="" />
        </template>
      </el-table-column>
    </el-table>
    <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>

    <WinseaContentModal v-model="accessoryTFs" :title="$t('system.noticeCircular.information')"
      @on-cancel="handleClose">
      <ws-upload ref="upload" :size-limit="size" @onChange="onChange" :comp-id="compId" :appendix-ids="appendixIdss"
        accept=".jpg, .jpeg, .png, .pdf, .doc, .zip, .rar" />
    </WinseaContentModal>
  </div>
</template>
<script>
  import {
    getList,
    export2,
    editstatus,
    billoperatehis,
    deletecontract,
    editInfo,
  } from '@/model/contarct/index'
  import {
    downloadFile
  } from '@/utils/batchDown'
  import Pagination from '@/components/Pagination'
  import WsUpload from '@/components/WsUpload'
  import {
    dayjs,
    EventBus
  } from 'base-core-lib'
  export default {
    name: 'viewSpareMoney',
    components: {
      WsUpload,
      Pagination,
    },
    watch: {
      vesselId(val) {
        this.getList()
      },
      // isShow(val) {
      //   this.showType = val
      // },
    },
    data() {
      return {
        id: '',
        //弹出框
        dialogViewSpareMoney: false,
        dialogApproveFormVisible: false,
        // 船舶类型
        monetaryKey: null,
        // 表格显示数据
        tableDate: [],
        size: 10,
        // 是否显示
        // showType: true,
        // 年
        year: '',
        deliver_type: 1,
        deptBudgetTotal: 0,
        currentPage: 1,
        pageSize: 9999,
        appendixIdsAdd: '',
        searchType: 1,
        searchTypeText: '未完成',
        searchKeyWord: '',
        contractType: 3,
        goodsType: 1,
        startDate: null,
        endDate: null,
        addressUrls: [],
        accesscard: false,
        // 提交类型
        submitType: true,
        deptCircularPage: {},
        date: {
          year: dayjs().format('YYYY'),
          month: dayjs().format('MM'),
        },
        contractList: [],
        deptBudgetList: {},
        historyList: [],
        appendixIdss: [],
        fileList: [],
        compId: localStorage.getItem('ws-pf_compId'),
        pickerBeginDateBefore: {
          disabledDate: (time) => {
            return time.getTime() > Date.now()
          },
        },
        accessoryTFs: false,
        taskTypeList: [{
            value: '未完成',
            type: 1,
          },
          {
            value: '已完成',
            type: 2,
          },
          {
            value: '全部合同',
            type: '',
          },
        ],
        pickerOptions: {
          shortcuts: [{
              text: '本周',
              onClick(picker) {
                const end = new Date()
                const start = new Date()
                var thisDay = start.getDay()
                var thisDate = start.getDate()
                if (thisDay != 0) {
                  start.setDate(thisDate - thisDay)
                }
                picker.$emit('pick', [start, end])
              },
            },
            {
              text: '本月',
              onClick(picker) {
                const end = new Date()
                const start = new Date()
                start.setDate(1)
                picker.$emit('pick', [start, end])
              },
            },
            {
              text: '本季度',
              onClick(picker) {
                var oDate = new Date()

                var thisYear = oDate.getFullYear()
                var thisMonth = oDate.getMonth() + 1

                var n = Math.ceil(thisMonth / 3) // 季度

                var Month = n * 3 - 1

                var start = new Date(thisYear, Month - 2, 1)
                var end = new Date()

                picker.$emit('pick', [start, end])
              },
            },
          ],
        },
        value1: '',
        value2: '',
      }
    },
    activated() {
      //cg.viewBudget
      //cg.viewSpareMoney
      // this.getVesselData();
      this.getList()
      // this.showType = this.isShow
    },
    methods: {
      onChange() {
        this.$refs.upload
          .handleSaveBill()
          .then(async (response) => {
            this.deptBudgetList.addressUrl = response
            this.deptBudgetList.id = this.id
            this.deptBudgetList.flag = 1
            editInfo(this.deptBudgetList)
              .toPromise()
              .then((response) => {
                this.accessoryTFs = false
                this.$message.success('上传成功')
                this.getList()
              })
          })
          .catch((res) => {
            EventBus.$emit('error', (JSON.parse(res) || {}).message)
            this.$refs.upload.clearFiles()
          })
      },
      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.dialogViewSpareMoney = false
      },
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`)
        this.pageSize = val
        this.getList()
      },
      handleCurrentChange(val) {
        this.currentPage = val
        console.log(`当前页: ${val}`)
        this.getList()
      },
      getList() {
        getList({
            compId: localStorage.getItem('ws-pf_compId'),
            contractType: this.contractType,
            goodsType: this.goodsType,
            currentPage: this.currentPage,
            pageSize: this.pageSize,
            searchType: this.searchType,
            searchKeyWord: this.searchKeyWord,
            startDate: this.startDate,
            endDate: this.endDate,
            contrPage: this.contrPage,
          })
          .toPromise()
          .then((response) => {
            for (var i = 0; i < response.records.length; i++) {
              if (response.records[i].completedQuantity) {
                response.records[i].completedQuantity = response.records[i].completedQuantity.toFixed(3)
              }

              if (response.records[i].addressUrl != null) {
                if (response.records[i].addressUrl) {
                  response.records[i].addressUrlArray =
                    response.records[i].addressUrl.split(',')
                }
              } else {
                response.records[i].addressUrlArray = []
              }
            }
            this.deptCircularPage.currentPage = response.current
            this.deptCircularPage.pageSize = response.size
            this.deptBudgetTotal = response.total
            this.contractList = response
            for (var i = 0; i < response.records.length; i++) {
              var arr = new Array()
              this.addressUrls[i] = new Array()
              if (this.contractList.records[i].addressUrl != null) {
                arr = this.contractList.records[i].addressUrl.split(',')
                this.addressUrls[i] = arr
              }
            }
          })
      },
      // 上传附件
      uploadSuccess(data, files, url) {
        console.log(data, files, url)

        // this.deptBudgetList.
        // this.formData.append('files', files)
        // this.feedbackObj.uploadNameAttachment = data.appendixName
        // this.feedbackObj.pathUploadAttachment = data.appendixPath
        // // this.newAppendixs = files
        // this.onChangeFlag = true
      },
      editClick(row) {
        var status = ''
        if (row.status == '待执行' || row.status == '已完成') {
          status = '执行中'
        } else if (row.status == '执行中') {
          status = '已完成'
        }
        this.$confirm(`是否将状态改为${status}`, '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
          })
          .then(() => {
            editstatus({
                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
          })
      },
      selecttaskType(e) {
        for (var i = 0; i < this.taskTypeList.length; i++) {
          if (this.taskTypeList[i].value == e) {
            this.searchType = this.taskTypeList[i].type
            this.find()
          }
        }
      },
      fujian(row) {
        this.id = row.id
        this.accessoryTFs = true
        this.appendixIdss = row.addressUrl
        console.log(this.appendixIdss)
      },
      handleExamine(row) {
        console.log(row)
        this.$router.push({
          name: 'collectionContractExamine',
          query: {
            id: row.id,
            status: row.status,
          },
        })
      },
      handleAdd() {
        this.$router.push({
          path: 'collectionContractAdd',
        })
      },
      handleEdit(row) {
        this.$router.push({
          name: 'collectionContractEdit',
          query: {
            id: row.id,
          },
        })
      },
      // 关闭 dialog时 处理文件url 初始化upload组件
      history(row) {
        console.log(row)
        billoperatehis({
            id: row.id,
          })
          .toPromise()
          .then((response) => {
            this.historyList = response
          })
      },
      find() {
        if (this.value2) {
          this.startDate = this.dateFormat('YYYY-mm-dd', this.value2[0])
          this.endDate = this.dateFormat('YYYY-mm-dd', this.value2[1])
        } else {
          this.startDate = ''
          this.endDate = ''
        }
        this.currentPage = 1
        this.getList()
      },
      async exportlist() {
        const {
          data
        } = await export2({
          compId: localStorage.getItem('ws-pf_compId'),
          contractType: this.contractType,
          goodsType: this.goodsType,
          currentPage: this.currentPage,
          pageSize: this.pageSize,
          searchType: this.searchType,
          searchKeyWord: this.searchKeyWord,
          startDate: this.startDate,
          endDate: this.endDate,
        }, {}, {
          responseType: 'blob',
        }).toPromise()
        downloadFile({
          res: data,
          fileName: `${
          this.date.year + (this.date.month ? `-${this.date.month}` : '')
        }_代收合同`,
          type: 'xls',
        })
      },
      // deletecontract(){},
      //删除
      handleDelete(row) {
        var text = ''
        if (row.deliverType == 1) {
          text =
            '删除该合同将同时永久删除合同对应的临时仓库相关数据，是否确定删除？'
        } else {
          text = '合同删除后不可恢复，是否继续删除？'
        }
        this.$confirm(text, '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
          })
          .then(() => {
            deletecontract({
                id: row.id,
              })
              .toPromise()
              .then((response) => {
                this.$notify.success({
                  title: '成功',
                  message: '删除成功',
                })
                this.getList()
              })
              .catch((response) => {})
          })
          .catch(() => {
            return false
          })
      },
      //记录
      handleRecord(row) {
        this.$router.push({
          name: 'collectionContractRecord',
          query: {
            contractNo: row.contractNo,
            compId:row.compId,
            buyer:row.buyer,
            goodsName:row.goodsName,
            weight:row.weight,
            completed:row.completed,
            agencyCharge:row.agencyCharge
          },
        })
      },
    },
  }
</script>
<style lang="scss" scoped>
  .vertical-text-left {
    width: 62px;
    text-align: right;
  }

  .flex {
    display: flex;
  }

  .el-range-editor.el-input__inner {
    margin-left: 10px;
  }

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

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

  .el-button--default {
    border: 1px solid #5473e8;
    color: #5473e8;
  }

  .warning {
    width: 100%;
    height: 2px;
    background: red;
  }

  .executory,
  .inExecution,
  .done {
    width: 6px;
    height: 6px;
    display: inline-block;
    border-radius: 50%;
    position: relative;
    top: -1px;
  }

  .executory {
    background: #ff9f24;
  }

  .inExecution {
    background: #5878e8;
  }

  .done {
    background: #50cad4;
  }

  .top-grade {
    background: linear-gradient(90deg, #5678e9, #7993f6);
    color: #fff;
    padding: 3px;
    border-radius: 2px;
  }

  .second-class {
    background: linear-gradient(90deg, #50cdd9, #82e2ea);
    color: #fff;
    padding: 3px;
    border-radius: 2px;
  }

  .third-class {
    background: linear-gradient(90deg, #ffa735, #ffbf70);
    color: #fff;
    padding: 3px;
    border-radius: 2px;
  }

  .substandard {
    background: linear-gradient(90deg, #b2b4bb, #ced0d5);
    color: #fff;
    padding: 3px;
    border-radius: 2px;
  }

  .wrap {
    width: 400px;
    position: absolute;
    top: 131px;
    left: 794px;
    transform-origin: right center;
    z-index: 2005;
  }

  .vertical-line {
    height: 64px;
    border-left: 2px solid #e9ecf7;
    margin-left: 4px;
    padding: 0 3px;
    // border-image: -webkit-linear-gradient(#00eba7, #08b8e6) 30 30;
    // border-image: -moz-linear-gradient(#00eba7, #08b8e6) 30 30;
    // border-image: linear-gradient(#00eba7, #08b8e6) 30 30;
  }

  .el-pagination {
    padding: 10px 15px;
    margin-bottom: 0;
    text-align: center;
  }

  /deep/.el-pager li.active {
    color: #5878e8;
    cursor: default;
  }

  /deep/.el-pager li:hover {
    color: #5878e8;
    cursor: default;
  }

  .vertical-circle {
    width: 10px;
    height: 10px;
    border: 2px solid #5878e8;
    background-color: #ffffff;
    -webkit-border-radius: 100px;
  }

  .vertical-circle:first-child {
    color: red;
  }

  .vertical-text {
    margin: 0 10px;
    color: #8890b1;
    font-size: 12px;
    margin-top: -4px;
  }

  /deep/.el-table .el-table__header .cell,
  /deep/.el-table .el-table__body .cell {
    text-align: center;
  }

  .typeselect {
    width: 500px;
  }

  .padding-xs {
    padding: 15px;
    text-align: right;
  }

  .clearfix:after {
    content: '';
    display: block;
    clear: both;
  }

  .el-table {
    font-size: 16px;
  }

  .taskType {
    width: 100%;
    background-color: #fff;
    margin-top: 2px;
    margin-bottom: 10px;
    list-style: none;

    // padding-bottom: 20px;
    li {
      float: left;
      border: 1px solid #6ea0f3;
      border-radius: 5px;
      max-width: 190px;
      padding: 0 5px;
      text-align: center;
      margin: 10px 20px;
      cursor: pointer;
      font-size: 14px;

      p {
        margin: 8px 0px;

        span {
          color: #e74c3c;
        }
      }
    }

    li:hover {
      background-color: #e4eeff;
      color: #1d6ced;
    }
  }

  .el-date-editor--date {
    margin: 0 10px;
  }

  .findValue {
    margin: 0 10px;
  }

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

  .button-container {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    background-color: #fff;
    width: 100%;
    height: 50px;
    padding: 0 10px;

    &>div {
      margin-left: 10px;
      display: flex;
      flex-wrap: nowrap;
      flex-direction: row;

      &>span {
        line-height: 50px;
      }
    }

    /deep/.auditFlow-box {
      position: unset;
      margin-left: 10px;

      &/deep/.auditFlow-icon {
        width: auto;
        padding-right: 30px;
      }

      &/deep/.auditFlow-main {
        position: absolute;
      }
    }
  }

  .box-app {
    display: inline-block;
    float: left;
    margin-left: 30px;
    line-height: 50px;
  }

  /deep/.el-dialog {
    .el-form-item {
      margin-bottom: 0 !important;

      .el-input--medium {
        textarea {
          min-height: 100px !important;
        }
      }
    }
  }

  .collapse-bottom {
    margin-bottom: 20px;
  }

  .input-main .textarea .el-textarea__inner {
    width: 100%;
    z-index: 1;
  }

  /*.crt-main .textarea /deep/ .el-form-item__label {*/
  /*  height: 82px;*/
  /*}*/
  // 控制select为只读的时候显示样式

  .hide-sel {
    .el-input__inner {
      border: 0px;
    }

    .el-icon-arrow-up {
      display: none;
    }

    .el-textarea__inner {
      background-color: #fff !important;
      border: 0;
    }

    .el-date-editor {
      i {
        display: none;
      }
    }

    .is-disabled {
      .el-input__inner:hover {
        background-color: #fff !important;
        border: 0;
      }

      color: #606266;

      .el-input__inner {
        background-color: #fff !important;
        border: 0;
        color: #606266;
      }

      .el-textarea__inner {
        background-color: #fff !important;
        border: 0;
        color: #606266;
      }
    }
  }

  // 控制select为只读的时候显示样式
  /deep/.ws-class-table-col {
    height: auto;
    padding: 0px 2px;

    /deep/.el-input__inner {
      padding: 0px 2px;
    }
  }

  /deep/.is-disabled {
    .el-input__prefix,
    .el-input__suffix {
      display: none;
    }

    .el-input__inner {
      background-color: #fff;
      border-color: #fff !important;
      color: #000 !important;
      font-size: 14px;
      cursor: text;
      padding: 0 !important;
    }
  }

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