TableCard.vue 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382
  1. <template>
  2. <HcCard>
  3. <template #header>
  4. <div class="w-32">
  5. <el-select v-model="searchForm.typeValue" block clearable placeholder="任务类型" size="large">
  6. <el-option v-for="item in tasksType" :label="item.dictValue" :value="item.dictKey" />
  7. </el-select>
  8. </div>
  9. <div class="w-32 ml-3">
  10. <el-select v-model="searchForm.statusValue" block clearable placeholder="任务状态" size="large">
  11. <el-option v-for="item in tasksStatus" :label="item.dictValue" :value="item.dictKey" />
  12. </el-select>
  13. </div>
  14. <div class="w-32 ml-3">
  15. <el-select
  16. v-model="searchForm.contractIdValue" block clearable placeholder="合同段" size="large"
  17. @change="ContractIdChange"
  18. >
  19. <el-option v-for="item in contractList" :label="item.contractName" :value="item.id" />
  20. </el-select>
  21. </div>
  22. <div class="w-32 ml-3">
  23. <el-select v-model="searchForm.batch" block clearable placeholder="上报批次" size="large">
  24. <el-option v-for="item in reportBatch" :label="item.batch" :value="item.batch" />
  25. </el-select>
  26. </div>
  27. <div class="w-64 ml-3">
  28. <HcDatePicker :dates="betweenTime" clearable size="large" @change="betweenTimeUpdate" />
  29. </div>
  30. <div class="w-56 ml-3">
  31. <el-input
  32. v-model="searchForm.queryValue" block clearable placeholder="请输入名称关键词检索"
  33. size="large" @keyup="keyUpEvent"
  34. />
  35. </div>
  36. <div class="ml-2">
  37. <el-button size="large" type="primary" @click="searchClick">
  38. <HcIcon name="search-2" />
  39. <span>搜索</span>
  40. </el-button>
  41. </div>
  42. </template>
  43. <template #extra>
  44. <HcTooltip keys="tasks_data_set_sign_rules">
  45. <el-button hc-btn @click="setSignRulesClick">
  46. <HcIcon name="settings" />
  47. <span>设置重签规则</span>
  48. </el-button>
  49. </HcTooltip>
  50. <HcTooltip v-if="isTableKey === 'key1'" keys="tasks_data_batch_review">
  51. <el-button
  52. :disabled="tableCheckedKeys.length <= 0" hc-btn type="primary"
  53. @click="batchApprovalTaskClick"
  54. >
  55. <HcIcon name="check-double" />
  56. <span>批量审批</span>
  57. </el-button>
  58. </HcTooltip>
  59. </template>
  60. <HcTable
  61. ref="tableListRef" :column="tableListColumn" :datas="tableListData" :loading="tableLoading" is-check
  62. @selection-change="tableSelectionChange"
  63. >
  64. <template #taskName="{ row }">
  65. <span class="text-link" @click="rowTaskName(row)">{{ row?.taskName }}</span>
  66. </template>
  67. <template #taskStatusName="{ row }">
  68. <el-tag
  69. v-if="row?.taskStatusName"
  70. :type="`${row.taskStatusName === '已审批' ? 'success' : row.taskStatusName === '已废除' ? 'warning' : 'info'}`" class="mx-1" effect="dark"
  71. >
  72. {{ row.taskStatusName }}
  73. </el-tag>
  74. </template>
  75. <template #taskReportUserName="{ row }">
  76. {{ row.taskReportUserName }}
  77. </template>
  78. </HcTable>
  79. <template #action>
  80. <div class="lr-dialog-footer">
  81. <div class="left">
  82. <span class="text-success">审批人员中:</span>
  83. <el-tag class="mx-1" effect="dark" type="info">未签字</el-tag>
  84. <el-tag class="mx-1" effect="dark" type="success">已签字</el-tag>
  85. <el-tag class="mx-1" effect="dark" type="warning">已废除</el-tag>
  86. <el-tag class="mx-1" effect="dark" type="danger">签字异常</el-tag>
  87. </div>
  88. <div class="right">
  89. <HcPages :pages="searchForm" :sizes="[10, 20, 30, 40, 50, 200]" @change="pageChange" />
  90. </div>
  91. </div>
  92. </template>
  93. </HcCard>
  94. </template>
  95. <script setup>
  96. import { nextTick, ref, watch } from 'vue'
  97. import { getArrValue } from 'js-fast-way'
  98. import tasksApi from '~api/tasks/data'
  99. import { useAppStore } from '~src/store'
  100. //参数
  101. const props = defineProps({
  102. projectId: {
  103. type: [String, Number],
  104. default: '',
  105. },
  106. contractId: {
  107. type: [String, Number],
  108. default: '',
  109. },
  110. contractList: {
  111. type: Array,
  112. default: () => ([]),
  113. },
  114. tableKey: {
  115. type: String,
  116. default: '',
  117. },
  118. })
  119. //事件
  120. const emit = defineEmits(['rowTaskName', 'signRules', 'batchApproval'])
  121. //初始变量
  122. const useAppState = useAppStore()
  123. //变量
  124. const projectId = ref(props.projectId)
  125. const contractId = ref(props.contractId)
  126. const isTableKey = ref(props.tableKey)
  127. const currentContractId = ref(useAppState.getContractId)
  128. //监听
  129. watch(() => [
  130. props.tableKey,
  131. ], ([Key]) => {
  132. isTableKey.value = Key
  133. setQueryData()
  134. })
  135. //渲染完成
  136. nextTick(() => {
  137. setQueryData()
  138. })
  139. //获取相关数据
  140. const setQueryData = () => {
  141. searchForm.value.contractIdValue = contractId.value
  142. queryTaskType()
  143. queryTaskStatus()
  144. searchClick()
  145. queryBatchList()
  146. }
  147. //获取任务类型
  148. const tasksType = ref([])
  149. const queryTaskType = async () => {
  150. const { error, code, data } = await tasksApi.queryTaskTypeStatus({
  151. typeOrStatus: 'task_type',
  152. })
  153. if (!error && code === 200) {
  154. tasksType.value = getArrValue(data)
  155. } else {
  156. tasksType.value = []
  157. }
  158. }
  159. //获取任务状态
  160. const tasksStatus = ref([])
  161. const queryTaskStatus = async () => {
  162. const { error, code, data } = await tasksApi.queryTaskTypeStatus({
  163. typeOrStatus: 'task_status',
  164. })
  165. if (!error && code === 200) {
  166. tasksStatus.value = getArrValue(data)
  167. } else {
  168. tasksStatus.value = []
  169. }
  170. }
  171. //合同段
  172. const ContractIdChange = () => {
  173. searchForm.value.batch = null
  174. queryBatchList()
  175. // queryUserStartFlow()
  176. getTableData()
  177. }
  178. //获取上报批次
  179. const reportBatch = ref([])
  180. const queryBatchList = async () => {
  181. const { contractId } = searchForm.value
  182. if (contractId) {
  183. const { error, code, data } = await tasksApi.queryBatchList({
  184. projectId: projectId.value,
  185. contractId: contractId || '',
  186. })
  187. if (!error && code === 200) {
  188. reportBatch.value = getArrValue(data)
  189. } else {
  190. reportBatch.value = []
  191. }
  192. } else {
  193. reportBatch.value = []
  194. }
  195. }
  196. //搜索表单
  197. const searchForm = ref({
  198. queryValue: null, typeValue: null, statusValue: null, batch: null, startTimeValue: null, endTimeValue: null,
  199. current: 1, size: 200, total: 0,
  200. })
  201. //日期时间被选择
  202. const betweenTime = ref(null)
  203. const betweenTimeUpdate = ({ val, arr }) => {
  204. betweenTime.value = arr
  205. searchForm.value.startTimeValue = val['start']
  206. searchForm.value.endTimeValue = val['end']
  207. }
  208. //回车搜索
  209. const keyUpEvent = (e) => {
  210. if (e.key === 'Enter') {
  211. searchForm.value.current = 1
  212. getTableData()
  213. }
  214. }
  215. //搜索
  216. const searchClick = () => {
  217. searchForm.value.current = 1
  218. getTableData()
  219. }
  220. //分页被点击
  221. const pageChange = ({ current, size }) => {
  222. searchForm.value.current = current
  223. searchForm.value.size = size
  224. getTableData()
  225. }
  226. //获取数据
  227. const tableLoading = ref(false)
  228. const tableListColumn = ref([
  229. { key: 'taskName', name: '任务名称' },
  230. { key: 'taskTypeName', name: '任务类型', width: '120' },
  231. { key: 'taskStatusName', name: '任务状态', width: '160' },
  232. { key: 'startTime', name: '开始时间', width: '180' },
  233. { key: 'endTime', name: '限定时间', width: '180' },
  234. { key: 'taskDesc', name: '任务描述' },
  235. { key: 'taskReportUserName', name: '上报人', width: '120' },
  236. { key: 'taskApproveUserNames', name: '签字人员' },
  237. { key: 'evisaStatus', name: '电签状态' },
  238. ])
  239. const tableListData = ref([])
  240. const getTableData = () => {
  241. const key = isTableKey.value
  242. tableListRef.value?.clearSelection()
  243. tableCheckedKeys.value = []
  244. // if (key === 'key1') {
  245. // queryUserToDoTaskList()
  246. // } else if (key === 'key2') {
  247. // queryUserDoneTaskList()
  248. // } else if (key === 'key3') {
  249. // queryUserStartFlow()
  250. // }
  251. if (key === 'key1') {
  252. searchForm.value.selectedType = 1
  253. } else if (key === 'key2') {
  254. searchForm.value.selectedType = 2
  255. } else if (key === 'key3') {
  256. searchForm.value.selectedType = 3
  257. }
  258. queryPage()
  259. }
  260. //待办任务列表
  261. // const queryUserToDoTaskList = async () => {
  262. // tableLoading.value = true
  263. // const { error, code, data } = await tasksApi.queryUserToDoTaskList({
  264. // ...searchForm.value,
  265. // projectId: projectId.value,
  266. // currentContractId:currentContractId.value,
  267. // })
  268. // //处理数据
  269. // tableLoading.value = false
  270. // if (!error && code === 200) {
  271. // tableListData.value = getArrValue(data['records'])
  272. // searchForm.value.total = data.total || 0
  273. // } else {
  274. // tableListData.value = []
  275. // searchForm.value.total = 0
  276. // }
  277. // }
  278. //任务列表
  279. const queryPage = async () => {
  280. tableLoading.value = true
  281. const { error, code, data } = await tasksApi.getTaskPage({
  282. ...searchForm.value,
  283. projectIdValue: projectId.value,
  284. currentContractId:currentContractId.value,
  285. })
  286. //处理数据
  287. tableLoading.value = false
  288. if (!error && code === 200) {
  289. tableListData.value = getArrValue(data['records'])
  290. searchForm.value.total = data.total || 0
  291. } else {
  292. tableListData.value = []
  293. searchForm.value.total = 0
  294. }
  295. }
  296. //获取已办任务
  297. const queryUserDoneTaskList = async () => {
  298. tableLoading.value = true
  299. const { error, code, data } = await tasksApi.queryUserDoneTaskList({
  300. ...searchForm.value,
  301. projectId: projectId.value,
  302. })
  303. //处理数据
  304. tableLoading.value = false
  305. if (!error && code === 200) {
  306. tableListData.value = getArrValue(data['records'])
  307. searchForm.value.total = data.total || 0
  308. } else {
  309. tableListData.value = []
  310. searchForm.value.total = 0
  311. }
  312. }
  313. //获取我发起的
  314. const queryUserStartFlow = async () => {
  315. tableLoading.value = true
  316. const { error, code, data } = await tasksApi.queryUserStartFlow({
  317. ...searchForm.value,
  318. projectId: projectId.value,
  319. })
  320. //处理数据
  321. tableLoading.value = false
  322. if (!error && code === 200) {
  323. tableListData.value = getArrValue(data?.records) || []
  324. searchForm.value.total = data?.total || 0
  325. } else {
  326. tableListData.value = []
  327. searchForm.value.total = 0
  328. }
  329. }
  330. //多选
  331. const tableListRef = ref(null)
  332. const tableCheckedKeys = ref([])
  333. const tableSelectionChange = (rows) => {
  334. tableCheckedKeys.value = rows.filter((item) => {
  335. return (item ?? '') !== ''
  336. })
  337. }
  338. //任务审核
  339. const rowTaskName = (row) => {
  340. emit('rowTaskName', row)
  341. }
  342. //设置重签规则
  343. const setSignRulesClick = () => {
  344. emit('signRules', {})
  345. }
  346. //批量审批
  347. const batchApprovalTaskClick = () => {
  348. const rows = tableCheckedKeys.value
  349. if (rows.length > 0) {
  350. emit('batchApproval', rows)
  351. } else {
  352. window?.$message?.warning('请先勾选需要审批的数据')
  353. }
  354. }
  355. </script>
  356. <style lang="scss" scoped>
  357. </style>