table-list.vue 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421
  1. <template>
  2. <div class="hc-table-list-content">
  3. <HcNewCard>
  4. <template #header>
  5. <div class="w-64">
  6. <HcDatePicker :dates="betweenTime" clearable @change="betweenTimeUpdate" />
  7. </div>
  8. <div class="w-40 ml-3">
  9. <el-select v-model="searchForm.createUser" block clearable placeholder="请选择记录人">
  10. <el-option v-for="item in recordData" :label="item.userName" :value="item.userId" />
  11. </el-select>
  12. </div>
  13. <div class="ml-2">
  14. <el-button type="primary" @click="searchClick">
  15. <HcIcon name="search-2" />
  16. <span>搜索</span>
  17. </el-button>
  18. </div>
  19. </template>
  20. <template #extra>
  21. <HcTooltip keys="ledger_query_report">
  22. <el-button
  23. :disabled="tableCheckedKeys.length <= 0" :loading="reportLoading" hc-btn
  24. color="#FF976A" style="color: white;" @click="reportModalClick"
  25. >
  26. <HcIcon name="send-plane-2" />
  27. <span>批量上报</span>
  28. </el-button>
  29. </HcTooltip>
  30. <HcTooltip keys="ledger_query_abolish">
  31. <el-button
  32. :disabled="tableCheckedKeys.length <= 0" :loading="abolishLoading" hc-btn
  33. color="#A16222" @click="batchAbolishClick"
  34. >
  35. <HcIcon name="delete-bin-3" />
  36. <span>批量废除</span>
  37. </el-button>
  38. </HcTooltip>
  39. <HcTooltip keys="ledger_query_delete">
  40. <el-button
  41. :disabled="tableCheckedKeys.length <= 0" :loading="deleteLoading" hc-btn
  42. color="#e03997" @click="batchDeleteClick"
  43. >
  44. <HcIcon name="delete-bin" />
  45. <span>批量删除</span>
  46. </el-button>
  47. </HcTooltip>
  48. <HcTooltip keys="ledger_query_print">
  49. <el-button
  50. :disabled="tableCheckedKeys.length <= 0" :loading="previewPrintLoading" hc-btn
  51. color="#567722" @click="previewAndPrintClick"
  52. >
  53. <HcIcon name="printer" />
  54. <span>批量预览/打印</span>
  55. </el-button>
  56. </HcTooltip>
  57. </template>
  58. <HcTable
  59. ref="tableListRef" :column="tableListColumn" :datas="tableListData" :loading="tableLoading"
  60. is-new :index-style="{ width: 60 }" is-check :check-style="{ width: 29 }"
  61. @selection-change="tableSelectionChange"
  62. >
  63. <template #action="{ row }">
  64. <HcTooltip keys="ledger_query_table_query">
  65. <el-button plain size="small" type="primary" @click="handleTableQuery(row)">查询</el-button>
  66. </HcTooltip>
  67. <HcTooltip keys="ledger_query_table_del">
  68. <el-button
  69. :disabled="!row.operation || row.status !== 0" plain size="small" type="danger"
  70. @click="handleTableDel(row)"
  71. >
  72. 删除
  73. </el-button>
  74. </HcTooltip>
  75. </template>
  76. </HcTable>
  77. <template #action>
  78. <HcPages :pages="searchForm" @change="pageChange" />
  79. </template>
  80. </HcNewCard>
  81. <!-- 批量上报审批 -->
  82. <HcReportModal
  83. :contract-id="contractId"
  84. :datas="reportDatas"
  85. :ids="reportIds"
  86. :project-id="projectId"
  87. :show="showReportModal"
  88. :task-name="reportTaskName"
  89. :type-data="menuItem.primaryKeyId"
  90. is-datas
  91. title="批量上报审批"
  92. type="log"
  93. url="contractLog/batchTask"
  94. @finish="showReportFinish"
  95. @hide="showReportModal = false"
  96. @tag-close="reportTaskTagClose"
  97. />
  98. </div>
  99. </template>
  100. <script setup>
  101. import { nextTick, ref, watch } from 'vue'
  102. import queryApi from '~api/ledger/query'
  103. import { eVisaTaskCheckApi } from '~api/other'
  104. import { arrToId, getArrValue, getObjValue, isString } from 'js-fast-way'
  105. //参数
  106. const props = defineProps({
  107. projectId: {
  108. type: [String, Number],
  109. default: '',
  110. },
  111. contractId: {
  112. type: [String, Number],
  113. default: '',
  114. },
  115. items: {
  116. type: Object,
  117. default: () => ({}),
  118. },
  119. })
  120. //变量
  121. const projectId = ref(props.projectId)
  122. const contractId = ref(props.contractId)
  123. const menuItem = ref(props.items)
  124. //监听
  125. watch(() => [
  126. props.projectId,
  127. props.contractId,
  128. props.items,
  129. ], ([pid, cid, item]) => {
  130. projectId.value = pid
  131. contractId.value = cid
  132. menuItem.value = item
  133. getQueryData()
  134. })
  135. //渲染完成
  136. nextTick(() => {
  137. getQueryData()
  138. })
  139. //获取相关数据
  140. const getQueryData = () => {
  141. searchClick()
  142. queryFillUser()
  143. }
  144. //获取记录人数据
  145. const recordData = ref([])
  146. const queryFillUser = async () => {
  147. const { primaryKeyId } = menuItem.value
  148. const { data } = await queryApi.queryFillUser({
  149. contractId: contractId.value,
  150. primaryKeyId: primaryKeyId,
  151. })
  152. recordData.value = getArrValue(data)
  153. }
  154. //搜索表单
  155. const searchForm = ref({ queryTime: '', createUser: null, current: 1, size: 20, total: 0 })
  156. //日期时间被选择
  157. const betweenTime = ref(null)
  158. const betweenTimeUpdate = ({ arr, query }) => {
  159. betweenTime.value = arr
  160. searchForm.value.queryTime = query
  161. }
  162. //搜索
  163. const searchClick = () => {
  164. searchForm.value.current = 1
  165. getTableData()
  166. }
  167. //分页被点击
  168. const pageChange = ({ current, size }) => {
  169. searchForm.value.current = current
  170. searchForm.value.size = size
  171. getTableData()
  172. }
  173. //获取数据
  174. const tableLoading = ref(false)
  175. const tableListColumn = ref([
  176. { key: 'recordTime', name: '记录日期' },
  177. { key: 'statusValue', name: '流程状态' },
  178. { key: 'createUserName', name: '记录人员' },
  179. { key: 'action', name: '操作', width: 200 },
  180. ])
  181. const tableListData = ref([])
  182. const getTableData = async () => {
  183. //初始数据处理
  184. tableLoading.value = true
  185. const { primaryKeyId } = menuItem.value
  186. tableListRef.value?.clearSelection()
  187. tableCheckedKeys.value = []
  188. //请求数据
  189. const { error, code, data } = await queryApi.constructionLogPage({
  190. ...searchForm.value,
  191. wbsNodeId: primaryKeyId,
  192. projectId: projectId.value,
  193. contractId: contractId.value,
  194. })
  195. console.log(data)
  196. //处理数据
  197. tableLoading.value = false
  198. if (!error && code === 200) {
  199. tableListData.value = getArrValue(data['records'])
  200. searchForm.value.total = data.total || 0
  201. } else {
  202. tableListData.value = []
  203. searchForm.value.total = 0
  204. }
  205. }
  206. //多选
  207. const tableListRef = ref(null)
  208. const tableCheckedKeys = ref([])
  209. const tableSelectionChange = (rows) => {
  210. tableCheckedKeys.value = rows.filter((item) => {
  211. return (item ?? '') !== ''
  212. })
  213. }
  214. //批量上报
  215. const reportIds = ref('')
  216. const reportTaskName = ref('')
  217. const reportDatas = ref([])
  218. const reportLoading = ref(false)
  219. const showReportModal = ref(false)
  220. const reportModalClick = async () => {
  221. const rows = tableCheckedKeys.value
  222. //判断是否满足条件
  223. const result = rows.every(({ status }) => {
  224. return status !== 1 && status !== 2
  225. })
  226. //判断状态
  227. if (result) {
  228. reportLoading.value = true
  229. const taskCheck = await eVisaTaskCheckApi({
  230. projectId: projectId.value,
  231. contractId: contractId.value,
  232. })
  233. if (taskCheck) {
  234. //初始ID
  235. const row = getObjValue(rows[0])
  236. reportIds.value = arrToId(rows)
  237. //设置任务数据
  238. let reportDataArr = []
  239. rows.forEach(item => {
  240. reportDataArr.push({
  241. id: item?.id,
  242. name: item?.fileName,
  243. })
  244. })
  245. reportDatas.value = reportDataArr
  246. //设置任务名称
  247. reportTaskName.value = rows.length > 1 ? `${row.fileName}等${rows.length}个文件` : row.fileName
  248. reportLoading.value = false
  249. showReportModal.value = true
  250. } else {
  251. reportLoading.value = false
  252. }
  253. } else {
  254. window.$message?.warning('已上报的文件不能进行再次上报,若要重新上报,要先撤回之前的上报,再重新上报')
  255. }
  256. }
  257. //上报的审批内容移除
  258. const reportTaskTagClose = (index) => {
  259. const row = tableCheckedKeys.value[index]
  260. tableListRef.value?.toggleRowSelection(row, false)
  261. }
  262. //上报完成
  263. const showReportFinish = () => {
  264. showReportModal.value = false
  265. getTableData()
  266. }
  267. //批量废除
  268. const abolishLoading = ref(false)
  269. const batchAbolishClick = () => {
  270. const rows = tableCheckedKeys.value
  271. //判断是否满足条件
  272. const result = rows.every(({ status, operation }) => {
  273. return status !== 0 && status !== 3 && operation
  274. })
  275. //判断状态
  276. if (result) {
  277. //拼接ID
  278. const ids = arrToId(rows)
  279. window?.$messageBox?.alert('是否废除勾选的已上报文件?', '废除文件', {
  280. showCancelButton: true,
  281. confirmButtonText: '确定废除',
  282. cancelButtonText: '取消',
  283. callback: (action) => {
  284. if (action === 'confirm') {
  285. batchAbolishSave(ids)
  286. }
  287. },
  288. })
  289. } else {
  290. window.$message?.warning('未上报的文件,和不是自己的文件,不能废除')
  291. }
  292. }
  293. //废除勾选的已上报文件
  294. const batchAbolishSave = async (ids) => {
  295. abolishLoading.value = true
  296. const { error, code } = await queryApi.batchAbolish({ ids: ids, projectId:projectId.value, contractId:contractId.value })
  297. //处理数据
  298. abolishLoading.value = false
  299. if (!error && code === 200) {
  300. window.$message?.success('批量废除成功')
  301. tableCheckedKeys.value = []
  302. getTableData()
  303. }
  304. }
  305. //批量删除
  306. const batchDeleteClick = () => {
  307. const rows = tableCheckedKeys.value
  308. //判断是否满足条件
  309. const result = rows.every(({ status, operation }) => {
  310. return status === 0 && operation
  311. })
  312. //判断状态
  313. if (result) {
  314. const ids = arrToId(rows)
  315. window?.$messageBox?.alert('是否删除勾选的日志文件?', '删除文件', {
  316. showCancelButton: true,
  317. confirmButtonText: '确定删除',
  318. cancelButtonText: '取消',
  319. callback: (action) => {
  320. if (action === 'confirm') {
  321. theLogRemoveByIds(ids)
  322. }
  323. },
  324. })
  325. } else {
  326. window.$message?.warning('只能删除自己的未上报日志文件')
  327. }
  328. }
  329. //预览、打印
  330. const previewPrintLoading = ref(false)
  331. const previewAndPrintClick = async () => {
  332. previewPrintLoading.value = true
  333. const rows = tableCheckedKeys.value
  334. const rowsIds = arrToId(rows)
  335. const ids = rowsIds.split(',')
  336. const { error, code, data } = await queryApi.theLogPreviewAndPrint({
  337. ids: ids,
  338. })
  339. //处理数据
  340. previewPrintLoading.value = false
  341. const res = isString(data) ? data || '' : ''
  342. if (!error && code === 200 && res) {
  343. window.open(res, '_blank')
  344. }
  345. }
  346. //查询
  347. const handleTableQuery = ({ evisaPdfUrl, pdfUrl }) => {
  348. if (evisaPdfUrl) {
  349. window.open(evisaPdfUrl, '_blank')
  350. } else if (pdfUrl) {
  351. window.open(pdfUrl, '_blank')
  352. } else {
  353. window.$message?.warning('该数据暂无PDF')
  354. }
  355. }
  356. //删除
  357. const handleTableDel = ({ id, status, operation }) => {
  358. //判断是否满足条件
  359. if (status === 0 && operation) {
  360. window?.$messageBox?.alert('是否删除勾选的日志文件?', '删除文件', {
  361. showCancelButton: true,
  362. confirmButtonText: '确定删除',
  363. cancelButtonText: '取消',
  364. callback: (action) => {
  365. if (action === 'confirm') {
  366. theLogRemoveByIds([id])
  367. }
  368. },
  369. })
  370. } else {
  371. window.$message?.warning('只能删除自己的未上报日志文件')
  372. }
  373. }
  374. //删除
  375. const deleteLoading = ref(false)
  376. const theLogRemoveByIds = async (ids) => {
  377. deleteLoading.value = true
  378. const { error, code } = await queryApi.theLogRemoveByIds({
  379. ids: ids,
  380. })
  381. deleteLoading.value = false
  382. if (!error && code === 200) {
  383. window.$message?.success('删除成功')
  384. tableCheckedKeys.value = []
  385. getTableData()
  386. }
  387. }
  388. </script>
  389. <style lang="scss" scoped>
  390. .hc-table-list-content {
  391. flex: 1;
  392. position: relative;
  393. margin-left: 24px;
  394. height: 100%;
  395. }
  396. </style>