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['userId']" />
      </div>
      <div class="form">
        <span class="formSpan">责任部门：</span>
        <DeptTree v-model="queryParams['deptId']" />
      </div>
      <div class="form" style="width: unset">
        <span class="formSpan">合同状态：</span>
        <el-radio-group v-model="queryParams.isSign">
          <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">
          <el-radio :label="1">进行中（{{ process }}）</el-radio>
          <el-radio :label="4">已验收（{{ accepted }}）</el-radio>
          <el-radio :label="2">已结项（{{ finished }}）</el-radio>
          <el-radio :label="9">已终止（{{ 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">
            <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">{{ 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" label="项目编号" />
          <el-table-column :show-overflow-tooltip="true" prop="xmmc" label="项目名称" />
          <el-table-column prop="zrbm" label="责任部门" width="200" />
          <el-table-column prop="xmjl" label="项目经理" width="120" />
          <el-table-column prop="contractAmount" label="合同额" width="120" />
          <el-table-column prop="receivableAmount" label="应收款" width="120" />
          <el-table-column prop="contractBalance" label="合同余额" width="120" />
          <el-table-column prop="projectCost" label="项目总成本" width="120" />
          <el-table-column prop="xmzt" label="项目状态" width="120">
            <template #default="scope">
              {{ xmztMap[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 moment from 'moment'
import { useRouter } from 'vue-router'
import request from '@/config/axios'
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 xmztMap: any = { 0: '立项申请中', 1: '进行中', 2: '已结项', 3: '中止' }
const router = useRouter()
const tableRef: any = ref(null)
const tableHeight: any = ref(0)
const queryParams = reactive<{
  xmbh: string
  xmmc: string
  xmlbId: string
  lxsjOn: string
  lxsjOff: string
  pageNo: number
  xzqdm: number | string
  pageSize: number
  isSign: any
  xmzt: any
  hyId: any
}>({
  xmbh: '',
  xmmc: '',
  xmlbId: '15',
  lxsjOn: '',
  lxsjOff: '',
  pageNo: 1,
  xzqdm: '',
  pageSize: 15,
  isSign: '',
  xmzt: '',
  hyId: 0
})
const lxsjObj = ref()
const infoList: any = reactive([
  {
    icon: 'xmzx/xmzcz',
    name: '项目总产值(元)',
    num: 0
  },
  {
    icon: 'xmzx/xmzcb',
    name: '项目总成本(元)',
    num: 0
  },
  {
    icon: 'xmzx/xmzlr',
    name: '项目总利润(元)',
    num: 0
  }
])

const handleCurrentChange = (pageNo: number) => {
  queryParams.pageNo = pageNo
  queryProjectListAjax()
}
const operateClick = (row: any) => {
  router.push({
    path: '/projectDetail',
    query: { id: row.id }
  })
}
const tableData = ref<Array<any>>([])
const total = ref<number>()
const searchHandle: () => void = () => {
  queryXmztCount()
  queryProjectCalculate()
  queryProjectListAjax()
}
const setSearchParams = (): void => {
  if (lxsjObj.value && lxsjObj.value.length > 0) {
    queryParams.lxsjOn = moment(lxsjObj.value[0]).format('YYYY-MM-DD')
    queryParams.lxsjOff = moment(lxsjObj.value[1]).format('YYYY-MM-DD')
  } else {
    queryParams.lxsjOn = ''
    queryParams.lxsjOff = ''
  }
  if (queryParams.hyId == 0) {
    queryParams.hyId = null
  }
}
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[1]['num'] - infoList[0]['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`
  if (lxsjObj.value && lxsjObj.value.length > 0) {
    queryParams.lxsjOn = moment(lxsjObj.value[0]).format('YYYY-MM-DD')
    queryParams.lxsjOff = moment(lxsjObj.value[1]).format('YYYY-MM-DD')
  } else {
    queryParams.lxsjOn = ''
    queryParams.lxsjOff = ''
  }
  const sendData = {
    ...queryParams
  }
  if (sendData['hyId'] == 0) {
    sendData['hyId'] = null
  }
  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>