myProject.vue 8.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265
  1. <template>
  2. <div class="_ProjectCenterBook">
  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" style="width: 300px">
  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">
  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">
  59. <el-radio :label="1">进行中(10)</el-radio>
  60. <el-radio :label="4">已验收(7)</el-radio>
  61. <el-radio :label="2">已结项(1)</el-radio>
  62. <el-radio :label="9">已终止(0)</el-radio>
  63. <el-radio>全部(19)</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="outputValue" 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="15"
  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 moment from 'moment'
  146. import { useRouter } from 'vue-router'
  147. import request from '@/config/axios'
  148. import { getAssetURL } from '@/utils/auth'
  149. import { industryListAll } from '@/utils/business'
  150. import { CACHE_KEY, useCache } from '@/hooks/web/useCache'
  151. import district from '@/components/Area/district.js'
  152. defineOptions({ name: 'ProjectBook' })
  153. const xmztMap: any = { 0: '立项申请中', 1: '进行中', 2: '已结项', 3: '中止' }
  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 deptId = user.user.deptId ? user.user.deptId : ''
  159. const tableRef: any = ref(null)
  160. const tableHeight: any = ref(0)
  161. const queryParams = reactive<{
  162. xmbh: string
  163. xmmc: string
  164. xmlbId: string
  165. lxsjOn: string
  166. lxsjOff: string
  167. pageNo: number
  168. xzqdm: number | string
  169. pageSize: number
  170. isSign: any
  171. xmzt: any
  172. hyId: any
  173. userId: string
  174. }>({
  175. xmbh: '',
  176. xmmc: '',
  177. xmlbId: '15',
  178. lxsjOn: '',
  179. lxsjOff: '',
  180. pageNo: 1,
  181. xzqdm: '',
  182. pageSize: 15,
  183. isSign: '',
  184. xmzt: '',
  185. hyId: 0,
  186. userId: userId
  187. })
  188. const lxsjObj = ref()
  189. const infoList: any = ref([
  190. {
  191. icon: 'xmzx/xmzcz',
  192. name: '项目总产值(元)',
  193. num: '-'
  194. },
  195. {
  196. icon: 'xmzx/xmzcb',
  197. name: '项目总成本(元)',
  198. num: '-'
  199. },
  200. {
  201. icon: 'xmzx/xmzlr',
  202. name: '项目总利润(元)',
  203. num: '-'
  204. }
  205. ])
  206. const handleCurrentChange = (pageNo: number) => {
  207. queryParams.pageNo = pageNo
  208. queryProjectListAjax()
  209. }
  210. const operateClick = (row: any) => {
  211. router.push({
  212. path: '/projectDetail',
  213. query: { id: row.id, name: row.xmmc }
  214. })
  215. }
  216. const tableData = ref<Array<any>>([])
  217. const total = ref<number>()
  218. const searchHandle: () => void = () => {
  219. queryProjectListAjax()
  220. }
  221. const queryProjectListAjax = async (): Promise<void> => {
  222. const urlApi = `/project/page`
  223. if (lxsjObj.value && lxsjObj.value.length > 0) {
  224. queryParams.lxsjOn = moment(lxsjObj.value[0]).format('YYYY-MM-DD')
  225. queryParams.lxsjOff = moment(lxsjObj.value[1]).format('YYYY-MM-DD')
  226. } else {
  227. queryParams.lxsjOn = ''
  228. queryParams.lxsjOff = ''
  229. }
  230. const sendData = {
  231. ...queryParams,
  232. pageSize: 15
  233. }
  234. if (sendData['hyId'] == 0) {
  235. sendData['hyId'] = null
  236. }
  237. const result = await request.get({ url: urlApi, params: sendData }, '/business')
  238. tableData.value = result['records']
  239. total.value = result['total']
  240. }
  241. queryProjectListAjax()
  242. /**
  243. * 获取行政区tree结构数据
  244. */
  245. const areaTree = shallowRef<Array<any>>()
  246. const filterNodeMethod = (value, data) => {
  247. return data.name.includes(value)
  248. }
  249. const queryAreaTreeAjax = async (): Promise<void> => {
  250. const urlApi = `/system/area/tree`
  251. const result = await request.get({ url: urlApi })
  252. areaTree.value = result
  253. }
  254. queryAreaTreeAjax()
  255. onMounted(() => {
  256. tableHeight.value = tableRef.value.clientHeight
  257. })
  258. </script>
  259. <style lang="scss" scoped>
  260. @import url('./projectBook.scss');
  261. </style>