myProject.vue 8.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257
  1. <template>
  2. <div class="oa-sys-list-view">
  3. <div class="searchBox">
  4. <div class="form">
  5. <span class="formSpan">项目名称:</span>
  6. <el-input v-model="queryParams.xmmc" placeholder="请输入项目名称" style="width: 210px" />
  7. </div>
  8. <div class="form">
  9. <span class="formSpan">项目编号:</span>
  10. <el-input v-model="queryParams.xmbh" placeholder="请输入项目名称" style="width: 160px" />
  11. </div>
  12. <div class="form">
  13. <span class="formSpan">行政区:</span>
  14. <div style="width: 160px">
  15. <el-tree-select
  16. v-model="queryParams.xzqdm"
  17. node-key="id"
  18. check-strictly
  19. filterable
  20. :filter-node-method="filterNodeMethod"
  21. :props="{ label: 'name' }"
  22. :data="areaTree"
  23. />
  24. </div>
  25. </div>
  26. <div class="form">
  27. <span class="formSpan">行业:</span>
  28. <el-select width="160px" v-model="queryParams.hyId" class="m-2" placeholder="请选择行业">
  29. <el-option
  30. v-for="item in industryListAll"
  31. :key="item.value"
  32. :label="item.label"
  33. :value="item.value"
  34. />
  35. </el-select>
  36. </div>
  37. <div class="form form-time-range">
  38. <span class="formSpan">立项时间:</span>
  39. <el-date-picker
  40. v-model="lxsjObj"
  41. type="daterange"
  42. unlink-panels
  43. range-separator="To"
  44. start-placeholder="开始日期"
  45. end-placeholder="结束日期"
  46. />
  47. </div>
  48. <div class="form" style="width: unset">
  49. <span class="formSpan">合同:</span>
  50. <el-radio-group v-model="queryParams.isSign" @change="searchHandle">
  51. <el-radio>全部</el-radio>
  52. <el-radio label="1">已签订</el-radio>
  53. <el-radio label="0">未签订</el-radio>
  54. </el-radio-group>
  55. </div>
  56. <div class="form" style="width: unset">
  57. <span class="formSpan">项目状态:</span>
  58. <el-radio-group v-model="queryParams.xmzt" @change="searchHandle">
  59. <el-radio :label="1">进行中({{ process }})</el-radio>
  60. <el-radio :label="4">已验收({{ accepted }})</el-radio>
  61. <el-radio :label="2">已结项({{ finished }})</el-radio>
  62. <el-radio :label="3">已终止({{ terminated }})</el-radio>
  63. <el-radio>全部({{ totalNum }})</el-radio>
  64. </el-radio-group>
  65. </div>
  66. <div class="from">
  67. <div class="btnBox">
  68. <el-button type="primary" style="background: #3485ff" @click="searchHandle">
  69. <img src="@/assets/imgs/OA/search.png" class="mr-8px" alt="" />
  70. 查询
  71. </el-button>
  72. <el-button type="primary">
  73. <img src="@/assets/imgs/OA/open.png" class="mr-8px" alt="" />
  74. 导出
  75. </el-button>
  76. </div>
  77. </div>
  78. </div>
  79. <div class="infoBox">
  80. <ul>
  81. <li v-for="(item, index) in infoList" :key="index" class="mr-40px">
  82. <img class="mr-8px" :src="getAssetURL(item.icon)" alt="" />
  83. <p>{{ item.name }}:</p>
  84. <h4 class="font-size-18px">{{ item.num }}</h4>
  85. </li>
  86. </ul>
  87. </div>
  88. <div class="tableBox">
  89. <div class="table" ref="tableRef">
  90. <el-table
  91. stripe
  92. :data="tableData"
  93. style="width: 100%; height: 100%"
  94. :style="{ height: tableHeight + 'px' }"
  95. :header-cell-style="{
  96. background: '#E5F0FB',
  97. color: '#233755',
  98. height: '50px'
  99. }"
  100. >
  101. <el-table-column label="序号" width="60">
  102. <template #default="scope">{{ scope.$index + 1 }}</template>
  103. </el-table-column>
  104. <el-table-column :show-overflow-tooltip="true" prop="xmmc" label="项目名称" />
  105. <el-table-column prop="xmbh" label="项目编号" width="180" />
  106. <el-table-column prop="xzqmc" label="行政区" width="100">
  107. <template #default="scope">
  108. {{ district[scope.row.xzqdm] }}
  109. </template>
  110. </el-table-column>
  111. <el-table-column prop="projectTypeName" label="项目类别" width="120" />
  112. <el-table-column prop="zrbm" label="责任部门" width="200" />
  113. <el-table-column prop="xmjl" label="项目经理" width="120" />
  114. <el-table-column prop="lxsj" label="立项时间" width="120" />
  115. <el-table-column prop="yssj" label="验收时间" width="120" />
  116. <el-table-column prop="contractAmount" label="合同额" width="120" />
  117. <el-table-column prop="xmzt" label="项目状态" width="120">
  118. <template #default="scope">
  119. {{ xmztMap[scope.row.xmzt] }}
  120. </template>
  121. </el-table-column>
  122. <el-table-column label="操作" fixed="right" width="80">
  123. <template #default="scope">
  124. <div class="operateBtn" @click="operateClick(scope.row)">
  125. <span>查看</span>
  126. </div>
  127. </template>
  128. </el-table-column>
  129. </el-table>
  130. </div>
  131. <div class="pageBox">
  132. <el-pagination
  133. v-model:current-page="queryParams.pageNo"
  134. :page-size="queryParams.pageSize"
  135. background
  136. layout="total, prev, pager, next, jumper"
  137. :total="total"
  138. @current-change="handleCurrentChange"
  139. />
  140. </div>
  141. </div>
  142. </div>
  143. </template>
  144. <script setup lang="ts">
  145. import { useRouter } from 'vue-router'
  146. import { useMixins, infoList } from './common'
  147. import request from '@/config/axios'
  148. import { deleteKey } from '@/utils'
  149. import { getAssetURL } from '@/utils/auth'
  150. import { industryListAll } from '@/utils/business'
  151. import { CACHE_KEY, useCache } from '@/hooks/web/useCache'
  152. import district from '@/components/Area/district.js'
  153. defineOptions({ name: 'ProjectBook' })
  154. const router = useRouter()
  155. const { wsCache } = useCache()
  156. const user = wsCache.get(CACHE_KEY.USER)
  157. const userId = user.user.id ? user.user.id : ''
  158. const tableRef: any = ref(null)
  159. const tableHeight: any = ref(0)
  160. const { xmztMap, queryParams, setSearchParams } = useMixins()
  161. const lxsjObj = ref()
  162. const handleCurrentChange = (pageNo: number) => {
  163. queryParams.pageNo = pageNo
  164. queryProjectListAjax()
  165. }
  166. const operateClick = (row: any) => {
  167. router.push({
  168. path: '/projectDetail',
  169. query: { id: row.id, name: row.xmmc }
  170. })
  171. }
  172. const tableData = ref<Array<any>>([])
  173. const total = ref<number>()
  174. const searchHandle: () => void = () => {
  175. queryXmztCount()
  176. queryProjectCalculate()
  177. queryProjectListAjax()
  178. }
  179. const queryProjectListAjax = async (): Promise<void> => {
  180. const urlApi = `/project/page`
  181. setSearchParams()
  182. const sendData = {
  183. ...queryParams,
  184. userId,
  185. pageSize: 15
  186. }
  187. const result = await request.get({ url: urlApi, params: sendData }, '/business')
  188. tableData.value = result['records']
  189. total.value = result['total']
  190. }
  191. queryProjectListAjax()
  192. /**
  193. * 获取项目台账金额计算
  194. */
  195. const queryProjectCalculate = async (): Promise<void> => {
  196. const urlApi = `/project/calculate`
  197. setSearchParams()
  198. const sendData = {
  199. ...queryParams,
  200. userId,
  201. pageSize: 15
  202. }
  203. const result = await request.get({ url: urlApi, params: sendData }, '/business')
  204. if (result) {
  205. infoList[0]['num'] = result.output ?? 0
  206. infoList[1]['num'] = result.cost ?? 0
  207. infoList[2]['num'] = infoList[1]['num'] - infoList[0]['num']
  208. }
  209. }
  210. queryProjectCalculate()
  211. /**
  212. * 获取行政区tree结构数据
  213. */
  214. const areaTree = shallowRef<Array<any>>()
  215. const filterNodeMethod = (value, data) => {
  216. return data.name.includes(value)
  217. }
  218. const queryAreaTreeAjax = async (): Promise<void> => {
  219. const urlApi = `/system/area/tree`
  220. const result = await request.get({ url: urlApi })
  221. areaTree.value = result
  222. }
  223. queryAreaTreeAjax()
  224. /**
  225. * 项目状态数据统计
  226. */
  227. const totalNum = ref<number>(0)
  228. const process = ref<number>(0)
  229. const finished = ref<number>(0)
  230. const terminated = ref<number>(0)
  231. const accepted = ref<number>(0)
  232. const queryXmztCount = async (): Promise<void> => {
  233. const urlApi = `/project/xmzt/count`
  234. setSearchParams()
  235. const sendData = {
  236. ...deleteKey(queryParams, 'xmzt'),
  237. userId
  238. }
  239. const result = await request.get({ url: urlApi, params: sendData }, '/business')
  240. if (result) {
  241. totalNum.value = result['total']
  242. process.value = result['process']
  243. finished.value = result['finished']
  244. terminated.value = result['terminated']
  245. accepted.value = result['accepted']
  246. }
  247. }
  248. queryXmztCount()
  249. onMounted(() => {
  250. tableHeight.value = tableRef.value.clientHeight
  251. })
  252. </script>