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

<template>
  <div class="oa-sys-list-view">
    <div class="searchBox">
      <div class="form">
        <span class="formSpan">项目编号：</span>
        <el-input v-model="queryParams.xmbh" placeholder="请输入项目编号" style="width: 160px" />
      </div>
      <div class="form">
        <span class="formSpan">项目名称：</span>
        <el-input v-model="queryParams.xmmc" placeholder="请输入项目名称" style="width: 210px" />
      </div>
      <div class="form">
        <span class="formSpan">项目经理：</span>
        <UserOrgTree v-model="queryParams['xmjlId']" :all="true" placeholder="请选择项目经理" />
      </div>
      <div class="form">
        <span class="formSpan">责任部门：</span>
        <DeptTree v-model="queryParams['deptId']" />
      </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" style="width: unset">
        <span class="formSpan">合同状态：</span>
        <el-radio-group v-model="queryParams.isSign" @change="searchHandle">
          <el-radio>全部</el-radio>
          <el-radio label="1">已签订</el-radio>
          <el-radio label="0">未签订</el-radio>
        </el-radio-group>
      </div>
      <div class="form" style="width: unset">
        <span class="formSpan">项目状态：</span>
        <el-radio-group v-model="queryParams.xmzt" @change="searchHandle">
          <el-radio :label="1">进行中（{{ process }}）</el-radio>
          <el-radio :label="4">已验收（{{ accepted }}）</el-radio>
          <el-radio :label="2">已结项（{{ finished }}）</el-radio>
          <el-radio :label="3">已终止（{{ terminated }}）</el-radio>
          <el-radio>全部（{{ totalNum }}）</el-radio>
        </el-radio-group>
      </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" @click="exportHandle">
            <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" v-money:unit="item.num"></h4>
        </li>
      </ul>
    </div>
    <div class="tableBox">
      <div class="table" ref="tableRef">
        <el-table
          stripe
          :data="tableData"
          style="width: 100%; height: 100%"
          :style="{ height: tableHeight + 'px' }"
          :header-cell-style="{
            background: '#E5F0FB',
            color: '#233755',
            height: '50px'
          }"
        >
          <el-table-column label="序号" width="80">
            <template #default="scope">{{ scope.$index + 1 }}</template>
          </el-table-column>
          <el-table-column :show-overflow-tooltip="true" prop="xmbh" width="180" label="项目编号" />
          <el-table-column
            :show-overflow-tooltip="true"
            prop="xmmc"
            label="项目名称"
            :min-width="250"
          />
          <el-table-column prop="lxsj" label="立项时间" width="140" />
          <el-table-column prop="zrbm" label="责任部门" :show-overflow-tooltip="true" width="200" />
          <el-table-column prop="xmjl" label="项目经理" width="120" />
          <el-table-column prop="contractAmount" align="center" label="合同额" width="120">
            <template #default="scope">{{
              scope.row.virtualAmount ?? scope.row.contractAmount ?? 0
            }}</template>
          </el-table-column>
          <el-table-column prop="receivableAmount" align="center" label="应收款" width="120">
            <template #default="scope">{{ scope.row.receivableAmount ?? 0 }}</template>
          </el-table-column>
          <el-table-column prop="contractBalance" align="center" label="合同余额" width="120">
            <template #default="scope">{{ scope.row.contractBalance ?? 0 }}</template>
          </el-table-column>
          <el-table-column prop="projectCost" align="center" label="项目总成本" width="120">
            <template #default="scope">{{ scope.row.projectCost ?? 0 }}</template>
          </el-table-column>
          <el-table-column prop="xmzt" label="项目状态" width="120">
            <template #default="scope">
              {{ getDictLabel(DICT_TYPE.PROJECT_STATUS, scope.row.xmzt) }}
            </template>
          </el-table-column>

          <el-table-column label="操作" width="80" fixed="right">
            <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="queryParams.pageSize"
          background
          layout="total, prev, pager, next, jumper"
          :total="total"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { useRouter } from 'vue-router'
import { DICT_TYPE, getDictLabel } from '@/utils/dict'
import { useMixins, infoList } from './common'
import request from '@/config/axios'
import { deleteKey } from '@/utils'
import { getAssetURL } from '@/utils/auth'
import UserOrgTree from '@/views/OaSystem/components/UserOrgTree/index.vue'
import DeptTree from '@/views/OaSystem/components/DeptTree/index.vue'

defineOptions({ name: 'ProjectBook' })
const router = useRouter()
const tableRef: any = ref(null)
const tableHeight: any = ref(0)
const { queryParams, lxsjObj, setSearchParams, exportHandleCommon } = useMixins()

const handleCurrentChange = (pageNo: number) => {
  queryParams.pageNo = pageNo
  queryProjectListAjax()
}
const operateClick = (row: any) => {
  router.push({
    path: '/projectDetail',
    query: { id: row.id }
  })
}
const exportHandle = () => {
  exportHandleCommon(request, null, '公司项目台账')
}
const tableData = ref<Array<any>>([])
const total = ref<number>()
const searchHandle: () => void = () => {
  queryXmztCount()
  queryProjectCalculate()
  queryProjectListAjax()
}
const queryProjectListAjax = async (): Promise<void> => {
  const urlApi = `/project/page`
  setSearchParams()
  const sendData = {
    ...queryParams,
    pageSize: 15
  }
  const result = await request.get({ url: urlApi, params: sendData }, '/business')
  tableData.value = result['records']
  total.value = result['total']
}
queryProjectListAjax()

/**
 * 获取项目台账金额计算
 */
const queryProjectCalculate = async (): Promise<void> => {
  const urlApi = `/project/calculate`
  setSearchParams()
  const sendData = {
    ...queryParams
  }
  const result = await request.get({ url: urlApi, params: sendData }, '/business')
  if (result) {
    infoList[0]['num'] = result.output ?? 0
    infoList[1]['num'] = result.cost ?? 0
    infoList[2]['num'] = infoList[0]['num'] - infoList[1]['num']
  }
}
queryProjectCalculate()
/**
 * 项目状态数据统计
 */
const totalNum = ref<number>(0)
const process = ref<number>(0)
const finished = ref<number>(0)
const terminated = ref<number>(0)
const accepted = ref<number>(0)

const queryXmztCount = async (): Promise<void> => {
  const urlApi = `/project/xmzt/count`
  setSearchParams()

  const sendData = deleteKey(queryParams, 'xmzt')
  const result = await request.get({ url: urlApi, params: sendData }, '/business')
  if (result) {
    totalNum.value = result['total']
    process.value = result['process']
    finished.value = result['finished']
    terminated.value = result['terminated']
    accepted.value = result['accepted']
  }
}
queryXmztCount()

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

<style lang="scss" scoped>
:deep(.el-radio) {
  margin-right: 10px;
}
</style>