zjugis_OA/client/src/views/OaSystem/projectCenter/purchaseContract/purchaseContract.vue

<template>
  <div class="oa-sys-list-view">
    <div class="searchBox">
      <div class="form">
        <span class="formSpan">合同名称：</span>
        <el-input v-model="queryParams.name" placeholder="请输入合同名称" style="width: 160px" />
      </div>
      <div class="form">
        <span class="formSpan">合同编号：</span>
        <el-input
          v-model="queryParams.contractNumber"
          placeholder="请输入合同编号"
          style="width: 160px"
        />
      </div>
      <div class="form">
        <span class="formSpan">签订状态：</span>
        <el-select width="160px" clearable v-model="queryParams.isSign" placeholder="请选择行业">
          <el-option
            v-for="item in isSignListAll"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </div>
      <div class="form">
        <span class="formSpan">签订方式：</span>
        <el-select width="160px" clearable v-model="queryParams.signWay" placeholder="请选择行业">
          <el-option
            v-for="item in signWayAllList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </div>
      <div class="form">
        <span class="formSpan">合同主类型：</span>
        <el-select width="160px" clearable v-model="queryParams.mainType" placeholder="请选择行业">
          <el-option
            v-for="item in mainTypeAllList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </div>
      <div class="form">
        <span class="formSpan">合同次类型：</span>
        <el-select
          width="160px"
          clearable
          v-model="queryParams.secondType"
          placeholder="请选择行业"
        >
          <el-option
            v-for="item in secondTypeAllList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </div>
      <div class="form form-time-range">
        <span class="formSpan">签订时间：</span>
        <el-date-picker
          v-model="lxsjObj"
          type="daterange"
          unlink-panels
          range-separator="To"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        />
      </div>
      <div class="form form-time-range">
        <span class="formSpan">履约到期时间：</span>
        <el-date-picker
          v-model="dueTimeObj"
          type="daterange"
          unlink-panels
          range-separator="To"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        />
      </div>
      <div class="from">
        <div class="btnBox">
          <el-button type="primary" style="background: #3485ff" @click="searchHandle">
            <img src="@/assets/imgs/OA/search.png" class="mr-8px" alt="" />
            查询</el-button
          >
          <el-button type="primary">
            <img src="@/assets/imgs/OA/open.png" class="mr-8px" alt="" />
            导出</el-button
          >
        </div>
      </div>
    </div>
    <div class="infoBox">
      <ul>
        <li v-for="(item, index) in infoList" :key="index" class="mr-40px">
          <img class="mr-8px" :src="getAssetURL(item.icon)" alt="" />
          <p>{{ item.name }}：</p>
          <h4 class="font-size-18px">{{ (contractListCalc[item.key] / 10000).toFixed(2) }}</h4>
        </li>
      </ul>
    </div>
    <div class="tableBox">
      <div class="table" ref="tableRef">
        <el-table
          :data="tableData"
          style="width: 100%; height: 100%"
          :style="{ height: tableHeight + 'px' }"
          stripe
          :header-cell-style="{
            background: '#E5F0FB',
            color: '#233755',
            height: '50px'
          }"
        >
          <el-table-column label="序号" width="60">
            <template #default="scope">{{ scope.$index + 1 }}</template>
          </el-table-column>
          <el-table-column prop="contractNumber" label="合同编号" width="180" />
          <el-table-column :show-overflow-tooltip="true" prop="name" label="合同名称" width="240" />
          <el-table-column prop="isSign" label="签订状态" width="100">
            <template #default="scope">
              {{ getDictLabel(DICT_TYPE.CONTRACT_SIGN_STATUS, scope.row.isSign) }}
            </template>
          </el-table-column>
          <el-table-column prop="areaManager" label="销售经理" width="120" />
          <el-table-column
            :show-overflow-tooltip="true"
            prop="clientName"
            label="委托方"
            width="180"
          />
          <el-table-column prop="mainType" label="合同主类型" width="200">
            <template #default="scope">
              {{ getDictLabel(DICT_TYPE.CONTRACT_MAIN_TYPE, scope.row.mainType) }}
            </template>
          </el-table-column>
          <el-table-column prop="amountStatus" label="合同状态" width="100">
            <template #default="scope">
              {{ getDictLabel(DICT_TYPE.CONTRACT_COST_STATUS, scope.row.amountStatus) }}
            </template>
          </el-table-column>
          <el-table-column prop="contractAmount" label="合同金额" width="100" align="center">
            <template #default="scope">{{ scope.row.contractAmount ?? 0 }}</template>
          </el-table-column>
          <el-table-column prop="returnAmount" label="已回款金额" width="200" align="center">
            <template #default="scope">{{ scope.row.returnAmount ?? 0 }}</template>
          </el-table-column>
          <el-table-column prop="receivableAmount" label="应收账款" width="100" align="center">
            <template #default="scope">{{ scope.row.receivableAmount ?? 0 }}</template>
          </el-table-column>
          <el-table-column prop="contractBalance" label="合同余额" width="100" align="center">
            <template #default="scope">{{ scope.row.contractBalance ?? 0 }}</template>
          </el-table-column>
          <el-table-column prop="signTime" label="签订时间" width="120" />
          <el-table-column prop="dueTime" label="履约到期时间" width="120" />
          <el-table-column label="操作" fixed="right" width="80">
            <template #default="scope">
              <div class="operateBtn" @click="operateClick(scope.row)">
                <span>查看</span>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="pageBox">
        <el-pagination
          v-model:current-page="queryParams.pageNo"
          :page-size="15"
          background
          layout="total, prev, pager, next, jumper"
          :total="total"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import moment from 'moment'
import { useRouter } from 'vue-router'
import request from '@/config/axios'
import { DICT_TYPE, getDictLabel, getDictOptions } from '@/utils/dict'
import { getAssetURL } from '@/utils/auth'

defineOptions({ name: 'PurchaseContract' })

const isSignListAll = getDictOptions(DICT_TYPE.CONTRACT_SIGN_STATUS)
const signWayAllList = getDictOptions(DICT_TYPE.CONTRACT_SIGN_WAY)
const mainTypeAllList = getDictOptions(DICT_TYPE.CONTRACT_MAIN_TYPE)
const secondTypeAllList = getDictOptions(DICT_TYPE.CONTRACT_SECOND_TYPE)

const router = useRouter()
const tableRef: any = ref(null)
const tableHeight: any = ref(0)
const queryParams = reactive<{
  contractNumber: string
  name: string
  pageNo: number
  pageSize: number
  isSign: any
  signWay: any
  mainType: any
  secondType: any
  contractOn: string
  contractOff: string
  signTimeStart: string
  signTimeEnd: string
  dueTimeStart: string
  dueTimeEnd: string
}>({
  contractNumber: '',
  name: '',
  pageNo: 1,
  pageSize: 15,
  isSign: '',
  signWay: '',
  mainType: '',
  secondType: '',
  contractOn: '',
  contractOff: '',
  signTimeStart: '',
  signTimeEnd: '',
  dueTimeStart: '',
  dueTimeEnd: ''
})
const lxsjObj = ref()
const dueTimeObj = ref()
const infoList: any = ref([
  {
    icon: 'xmzx/xmzcz',
    name: '总合同金额(万元)',
    key: 'contractAmount'
  },
  {
    icon: 'xmzx/xmzcb',
    name: '总开票金额(万元)',
    key: 'invoiceAmount'
  },
  {
    icon: 'xmzx/xmzlr',
    name: '总回款金额(万元)',
    key: 'returnAmount'
  },
  {
    icon: 'xmzx/xmzlr',
    name: '总应收款(万元)',
    key: 'receivableAmount'
  },
  {
    icon: 'xmzx/xmzlr',
    name: '总合同余额(万元)',
    key: 'contractBalance'
  }
])

const handleCurrentChange = (pageNo: number) => {
  queryParams.pageNo = pageNo
  queryContractListAjax()
}
const operateClick = (row: any) => {
  router.push({
    path: '/projectDetail',
    query: { id: row.projectId, contractId: row.id }
  })
}
const tableData = ref<Array<any>>([])
const total = ref<number>()
const searchHandle: () => void = () => {
  queryContractListCalc()
  queryContractListAjax()
}
const queryContractListAjax = async (): Promise<void> => {
  const urlApi = `/contract/page`
  if (lxsjObj.value && lxsjObj.value.length > 0) {
    queryParams.signTimeStart = moment(lxsjObj.value[0]).format('YYYY-MM-DD')
    queryParams.signTimeEnd = moment(lxsjObj.value[1]).format('YYYY-MM-DD')
  } else {
    queryParams.signTimeStart = ''
    queryParams.signTimeEnd = ''
  }
  if (dueTimeObj.value && dueTimeObj.value.length > 0) {
    queryParams.dueTimeStart = moment(dueTimeObj.value[0]).format('YYYY-MM-DD')
    queryParams.dueTimeEnd = moment(dueTimeObj.value[1]).format('YYYY-MM-DD')
  } else {
    queryParams.dueTimeStart = ''
    queryParams.dueTimeEnd = ''
  }
  const sendData = {
    ...queryParams,
    pageSize: 15
  }
  const result = await request.get({ url: urlApi, params: sendData }, '/business')
  tableData.value = result['records']
  total.value = result['total']
}
queryContractListAjax()

/**
 * 合同台账成本统计
 */
const contractListCalc = ref({
  contractAmount: 0,
  contractBalance: 0,
  invoiceAmount: 19198840,
  returnAmount: 0,
  receivableAmount: 0
})
const queryContractListCalc = async (): Promise<void> => {
  const urlApi = `/contract/list/calc`
  if (lxsjObj.value && lxsjObj.value.length > 0) {
    queryParams.signTimeStart = moment(lxsjObj.value[0]).format('YYYY-MM-DD')
    queryParams.signTimeEnd = moment(lxsjObj.value[1]).format('YYYY-MM-DD')
  } else {
    queryParams.signTimeStart = ''
    queryParams.signTimeEnd = ''
  }
  if (dueTimeObj.value && dueTimeObj.value.length > 0) {
    queryParams.dueTimeStart = moment(dueTimeObj.value[0]).format('YYYY-MM-DD')
    queryParams.dueTimeEnd = moment(dueTimeObj.value[1]).format('YYYY-MM-DD')
  } else {
    queryParams.dueTimeStart = ''
    queryParams.dueTimeEnd = ''
  }
  const sendData = {
    ...queryParams,
    pageSize: 15
  }
  const result = await request.get({ url: urlApi, params: sendData }, '/business')
  contractListCalc.value = result
}
queryContractListCalc()

onMounted(() => {
  tableHeight.value = tableRef.value.clientHeight
})
</script>