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

<template>
  <div class="oa-sys-list-view">
    <div class="searchBox">
      <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>
        <el-input v-model="queryParams.xmbh" placeholder="请输入项目名称" style="width: 160px" />
      </div>
      <div class="form">
        <span class="formSpan">行政区：</span>
        <div style="width: 160px">
          <el-tree-select
            v-model="queryParams.xzqdm"
            node-key="id"
            check-strictly
            filterable
            :filter-node-method="filterNodeMethod"
            :props="{ label: 'name' }"
            :data="areaTree"
          />
        </div>
      </div>
      <div class="form">
        <span class="formSpan">行业：</span>
        <el-select width="160px" v-model="queryParams.hyId" class="m-2" placeholder="请选择行业">
          <el-option
            v-for="item in industryListAll"
            :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" 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">
            <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="60">
            <template #default="scope">{{ scope.$index + 1 }}</template>
          </el-table-column>
          <el-table-column :show-overflow-tooltip="true" prop="xmmc" label="项目名称" />
          <el-table-column prop="xmbh" label="项目编号" width="180" />
          <el-table-column prop="xzqmc" label="行政区" width="100">
            <template #default="scope">
              {{ district[scope.row.xzqdm] }}
            </template>
          </el-table-column>
          <el-table-column prop="projectTypeName" label="项目类别" width="120" />
          <el-table-column prop="zrbm" label="责任部门" width="200" />
          <el-table-column prop="xmjl" label="项目经理" width="120" />
          <el-table-column prop="lxsj" label="立项时间" width="120" />
          <el-table-column prop="yssj" label="验收时间" width="120" />
          <el-table-column prop="contractAmount" 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="操作" 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="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 { useMixins, infoList } from './common'
import request from '@/config/axios'
import { deleteKey } from '@/utils'
import { getAssetURL } from '@/utils/auth'
import { industryListAll } from '@/utils/business'
import { CACHE_KEY, useCache } from '@/hooks/web/useCache'
import district from '@/components/Area/district.js'

defineOptions({ name: 'ProjectBook' })
const router = useRouter()
const { wsCache } = useCache()
const user = wsCache.get(CACHE_KEY.USER)
const userId = user.user.id ? user.user.id : ''
const tableRef: any = ref(null)
const tableHeight: any = ref(0)
const { xmztMap, queryParams, setSearchParams } = useMixins()
const lxsjObj = ref()

const handleCurrentChange = (pageNo: number) => {
  queryParams.pageNo = pageNo
  queryProjectListAjax()
}
const operateClick = (row: any) => {
  router.push({
    path: '/projectDetail',
    query: { id: row.id, name: row.xmmc }
  })
}
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,
    userId,
    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,
    userId,
    pageSize: 15
  }
  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()
/**
 * 获取行政区tree结构数据
 */
const areaTree = shallowRef<Array<any>>()
const filterNodeMethod = (value, data) => {
  return data.name.includes(value)
}
const queryAreaTreeAjax = async (): Promise<void> => {
  const urlApi = `/system/area/tree`
  const result = await request.get({ url: urlApi })
  areaTree.value = result
}
queryAreaTreeAjax()
/**
 * 项目状态数据统计
 */
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'),
    userId
  }
  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>