print-package-app/pages/contract-manage/index.vue

<template>
  <view class="content">
    <uni-nav-bar left-icon="back" statusBar @clickLeft="back" typeBar fixed title="合同管理"></uni-nav-bar>
    <view class="condition-area flex-row-center-start">
      <qn-data-picker
        v-model="condition.customerEnterpriseId"
        style="flex-shrink: 0; max-width: 300rpx"
        text="right"
        :border="false"
        placeholder="请选择客户"
        popup-title="请选择客户"
        :map="{ text: 'name', value: 'id' }"
        :clear-icon="false"
        :localdata="customerList"
      ></qn-data-picker>
      <qn-data-picker
        style="flex-shrink: 0"
        v-model="condition.type"
        text="right"
        :border="false"
        placeholder="请选择"
        popup-title="请选择合同类型"
        :map="{ text: 'name', value: 'id' }"
        :clear-icon="false"
        :localdata="typeList"
      ></qn-data-picker>
      <qn-datetime-picker style="flex-shrink: 1" type="date" v-model="condition.signDate" :border="false"></qn-datetime-picker>
    </view>
    <scroll-list ref="list" :option="option" @load="upCallback" @refresh="downCallback">
      <view class="contract-item" v-for="item in list" :key="item.id">
        <view class="header flex-col-start-start">
          <view :class="'icon ' + typeMap[item.type].class">
            <text style="font-size: 28rpx; color: #ffffff">{{ typeMap[item.type].label }}</text>
          </view>
          <text class="title">{{ item.supplierEnterpriseName }}</text>
          <view class="row flex-row-center-start" style="margin-top: 0rpx">
            <text class="label">合同编号:</text>
            <text class="value">{{ item.contractNo }}</text>
          </view>
          <view class="row flex-row-center-start">
            <text class="label">签署时间:</text>
            <text class="value">{{ item.signDate || '-' }}</text>
          </view>
          <view class="row flex-row-center-start">
            <text class="label">合同金额:</text>
            <text class="value">{{ item.totalOfferPrice || '-' }}</text>
          </view>
        </view>
        <view class="footer flex-row-center-space">
          <text style="font-size: 30rpx; color: #888888">操作人: {{ item.userName || item.mobile }}</text>
          <text style="font-size: 28rpx; color: #007aff" @click="viewContract(item.downloadUrl)">查看</text>
        </view>
      </view>
    </scroll-list>
  </view>
</template>

<script>
import { go2, back } from '@/utils/hook.js'
import { transformFileToImg } from '@/apis/commonApi.js'
import { dateTimeFormat } from '@/utils/index.js'
import { getContractList, getCooperationList } from '@/apis/orderApi.js'
import { financeStatusMap, contractTypeMap, contractTypeEnum } from '@/enums/index.js'
const typeList = [
  {
    id: '',
    name: '全部'
  },
  {
    id: contractTypeEnum.ORDER_CONTRACT,
    name: contractTypeMap[contractTypeEnum.ORDER_CONTRACT]
  },
  {
    id: contractTypeEnum.GUARANTEE_CONTRACT,
    name: contractTypeMap[contractTypeEnum.GUARANTEE_CONTRACT]
  }
]

const typeMap = {
  [contractTypeEnum.ORDER_CONTRACT]: {
    class: 'icon__ORDER_CONTRACT',
    label: contractTypeMap[contractTypeEnum.ORDER_CONTRACT]
  },
  [contractTypeEnum.GUARANTEE_CONTRACT]: {
    class: 'icon__GUARANTEE_CONTRACT',
    label: contractTypeMap[contractTypeEnum.GUARANTEE_CONTRACT]
  }
}
export default {
  data() {
    return {
      customerList: [
        {
          id: '',
          name: '全部客户'
        }
      ],
      typeList: Object.freeze(typeList),
      financeStatusMap: Object.freeze(financeStatusMap),
      typeMap: Object.freeze(typeMap),
      condition: {
        customerEnterpriseId: '',
        type: '',
        signDate: null
      },
      pagination: {
        pageNum: 0, // 初始会执行一次下拉加载
        pageSize: 10
      },
      list: [],
      option: {
        size: 10,
        auto: true,
        emptyText: '暂无数据~',
        background: '#F7F8FA'
      }
    }
  },
  methods: {
    go2,
    back,
    dateTimeFormat,
    getList() {
      return new Promise((resolve, reject) => {
        getContractList({ ...this.condition, ...this.pagination })
          .then((res) => {
            if (res) {
              if (res.current == 1) {
                this.list = res.records
              } else {
                this.list = this.list.concat(res.records)
              }
              resolve({ list: this.list, total: res.total })
            } else {
              reject()
            }
          })
          .catch((err) => {
            reject(err)
          })
      })
    },
    downCallback() {
      this.pagination.pageNum = 1
      this.getList()
        .then(({ list, total }) => {
          this.$refs.list.refreshSuccess({ list, total })
        })
        .catch(() => {
          this.$refs.list.refreshFail()
        })
    },
    upCallback(page) {
      this.pagination.pageNum++
      this.getList()
        .then(({ list, total }) => {
          this.$refs.list.loadSuccess({ list, total })
        })
        .catch(() => {
          this.$refs.list.loadFail()
        })
    },
    // 查看合同
    viewContract(url) {
      if (url) {
        transformFileToImg({ fileUrl: url }).then((res) => {
          uni.previewImage({ urls: [res.imgUrl], current: res.imgUrl })
        })
      }
    }
  },
  watch: {
    condition: {
      handler() {
        this.downCallback()
      },
      deep: true
    }
  },
  created() {
    // 获取合作企业
    getCooperationList({ pageNum: 1, pageSize: 1000 }).then((res) => {
      if (res) {
        this.customerList = this.customerList.concat(res.records)
      }
    })
  }
}
</script>

<style lang="scss" scoped>
.content {
  width: 750rpx;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  .condition-area {
    width: 750rpx;
    height: 80rpx;
    padding: 0 32rpx 0 12rpx;
    margin-bottom: 20rpx;
    background-color: #fff;
  }
}
.contract-item {
  width: 750rpx;
  background-color: #fff;
  margin-bottom: 20rpx;
  position: relative;
  .header {
    width: 750rpx;
    padding: 24rpx 32rpx;
    .icon {
      top: 0;
      right: 0;
      position: absolute;
      width: 160rpx;
      height: 50rpx;
      border-radius: 0 0 0 20rpx;
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
    }
    .icon__ORDER_CONTRACT {
      background-color: #e28686;
    }
    .icon__GUARANTEE_CONTRACT {
      background-color: #86e2df;
    }
    .title {
      font-size: 32rpx;
      color: #003a8c;
      font-weight: 600;
      margin-bottom: 28rpx;
    }
    .row {
      margin-top: 24rpx;
      .label {
        font-size: 28rpx;
        color: #888888;
        margin-right: 24rpx;
      }
      .value {
        font-size: 28rpx;
        color: #333333;
      }
    }
  }
  .footer {
    width: 750rpx;
    padding: 24rpx 32rpx;
    border-top: 1px solid rgba(221, 221, 221, 0.5);
  }
}
</style>