deptProject.vue 8.1 KB

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