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

<template>
  <div class="_ProjectCenterBook">
    <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"
            :render-after-expand="false"
          />
        </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">
        <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="margin-right: 80px">
        <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">
        <span class="formSpan">项目状态：</span>
        <el-radio-group v-model="queryParams.xmzt">
          <el-radio :label="1">进行中（10）</el-radio>
          <el-radio :label="4">已验收（7）</el-radio>
          <el-radio :label="2">已结项（1）</el-radio>
          <el-radio :label="9">已终止（0）</el-radio>
          <el-radio>全部（19）</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 prop="xmmc" label="项目名称" width="320" />
          <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="outputValue" 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="10"
          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 { industryListAll } from '@/utils/business'
import district from '@/components/Area/district.js'

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: 10,
  isSign: '',
  xmzt: '',
  hyId: 0
})
const lxsjObj = ref()
const infoList: any = ref([
  {
    icon: 'xmzx/xmzcz',
    name: '项目总产值(元)',
    num: '0'
  },
  {
    icon: 'xmzx/xmzcb',
    name: '项目总成本(元)',
    num: '0'
  },
  {
    icon: 'xmzx/xmzlr',
    name: '项目总利润(元)',
    num: '-100000.57'
  }
])

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 = () => {
  queryProjectListAjax()
}
const queryProjectListAjax = async (): Promise<void> => {
  const urlApi = `/project/page`
  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,
    pageSize: 10
  }
  if (sendData['hyId'] == 0) {
    sendData['hyId'] = null
  }
  const result = await request.get({ url: urlApi, params: sendData }, '/business')
  tableData.value = result['records']
  total.value = result['total']
}
queryProjectListAjax()

/**
 * 获取行政区tree结构数据
 */
const areaTree = ref<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()
onMounted(() => {
  tableHeight.value = tableRef.value.clientHeight
})
</script>
<style lang="scss" scoped>
@import url('./projectBook.scss');
</style>