borrow.vue 6.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222
  1. <template>
  2. <hc-body :loading="treeLoading" :project-nmae="projectInfo?.name" split>
  3. <template #tree>
  4. <HcTree
  5. :auto-expand-keys="treeAutoExpandKeys" :contract-id="contractId" :project-id="projectId"
  6. @node-tap="nodeElTreeClick" @menu-tap="ElTreeMenuClick"
  7. @node-loading="treeNodeLoading"
  8. />
  9. </template>
  10. <hc-new-card>
  11. <template #header>
  12. <div class="w-40">
  13. <el-select v-model="searchForm.storageTime" clearable placeholder="保管期限">
  14. <el-option v-for="item in retentionPeriod" :key="item.value" :label="item.label" :value="item.value" />
  15. </el-select>
  16. </div>
  17. <div class="ml-3 w-40">
  18. <el-select v-model="searchForm.secretLevel" clearable placeholder="密级">
  19. <el-option v-for="item in securityLevelData" :key="item.dictKey" :label="item.dictValue" :value="item.dictKey" />
  20. </el-select>
  21. </div>
  22. <div class="ml-3 w-64">
  23. <HcDatePicker :dates="betweenTime" clearable @change="betweenTimeUpdate" />
  24. </div>
  25. <div class="ml-3 w-56">
  26. <el-input v-model="searchForm.name" clearable block placeholder="请输入档号/案卷题名" @keyup="keyUpEvent" />
  27. </div>
  28. <div class="ml-2">
  29. <el-button type="primary" @click="searchClick">
  30. <HcIcon name="search-2" />
  31. <span>搜索</span>
  32. </el-button>
  33. </div>
  34. </template>
  35. <div :class="tableFileShow ? 'file-table' : ''" class="body">
  36. <div class="hc-c-table-box">
  37. <HcTable
  38. ref="tableRef" :check-style="{ width: 29 }" :column="tableColumn" :datas="tableData"
  39. :index-style="{ width: 70 }" :is-arr-index="false" :loading="tableLoading" :ui="hoverHand ? 'hover-hand' : ''"
  40. is-new is-current-row
  41. >
  42. <template #index="{ index }">
  43. <span>{{ index + 1 }}</span>
  44. </template>
  45. </HcTable>
  46. </div>
  47. </div>
  48. <template #action>
  49. <HcPages :pages="searchForm" :sizes="[20, 50, 100, 200, 300, 500]" @change="pageChange" />
  50. </template>
  51. </hc-new-card>
  52. </hc-body>
  53. </template>
  54. <script setup>
  55. import { onMounted, ref, watch } from 'vue'
  56. import { useAppStore } from '~src/store'
  57. import HcTree from '~src/components/tree/hc-tree.vue'
  58. import { getArrValue } from 'js-fast-way'
  59. import tasksApi from '~api/tasks/data'
  60. import { getStoreValue, setStoreValue } from '~src/utils/storage'
  61. import { toPdfPage } from '~uti/btn-auth'
  62. //变量
  63. const useAppState = useAppStore()
  64. const projectId = ref(useAppState.getProjectId)
  65. const contractId = ref(useAppState.getContractId)
  66. const projectInfo = ref(useAppState.getProjectInfo)
  67. const isCollapse = ref(useAppState.getCollapse)
  68. const hoverHand = ref(true)
  69. //监听
  70. watch(() => [
  71. useAppState.getCollapse,
  72. ], ([Collapse]) => {
  73. isCollapse.value = Collapse
  74. })
  75. //渲染完成
  76. onMounted(() => {
  77. setTableColumns()
  78. getSecurityLevel()
  79. })
  80. //树加载
  81. const treeLoading = ref(true)
  82. const treeNodeLoading = () => {
  83. treeLoading.value = false
  84. }
  85. //项目树被点击
  86. // const isBuiltDrawing = ref(0)
  87. //自动展开缓存
  88. const treeAutoExpandKeys = ref(getStoreValue('turningExpandKeys') || [])
  89. const nodeElTreeClick = ({ node, data, keys, key }) => {
  90. //缓存展开的节点
  91. setStoreValue('turningExpandKeys', keys)
  92. treeAutoExpandKeys.value = keys || []
  93. console.log('点击', data)
  94. searchForm.value.total = 0
  95. searchForm.value.current = 1
  96. searchForm.value.size = 20
  97. searchForm.value.nodeIds = data.id || ''
  98. getTableData()
  99. }
  100. //树菜单被点击
  101. const ElTreeMenuClick = async ({ key, node, data, keys }) => {
  102. setStoreValue('turningExpandKeys', keys)
  103. treeAutoExpandKeys.value = keys || []
  104. }
  105. //日期时间被选择
  106. const betweenTime = ref(null)
  107. const betweenTimeUpdate = ({ val, arr }) => {
  108. betweenTime.value = arr
  109. searchForm.value.startTimeValue = val['start']
  110. searchForm.value.endTimeValue = val['end']
  111. }
  112. //保管期限
  113. const retentionPeriod = ref([
  114. { label: '永久', value: '3' },
  115. { label: '30年', value: '2' },
  116. { label: '10年', value: '1' },
  117. ])
  118. //获取密级
  119. const securityLevelData = ref([])
  120. const getSecurityLevel = async () => {
  121. const { error, code, data } = await tasksApi.queryTaskTypeStatus({
  122. typeOrStatus: 'security_level',
  123. })
  124. //处理数据
  125. if (!error && code === 200) {
  126. securityLevelData.value = getArrValue(data).filter(item => item.dictKey !== '0')
  127. } else {
  128. securityLevelData.value = []
  129. }
  130. }
  131. //搜索表单
  132. const searchForm = ref({
  133. contractId: null, storageTime:'', secretLevel:'', name:'', startTimeValue: '', endTimeValue: '',
  134. current: 1, size: 20, total: 0,
  135. })
  136. const searchClick = ()=>{
  137. getTableData()
  138. }
  139. //回车搜索
  140. const keyUpEvent = (e) => {
  141. if (e.key === 'Enter') {
  142. searchForm.value.current = 1
  143. getTableData()
  144. }
  145. }
  146. //分页被点击
  147. const pageChange = ({ current, size }) => {
  148. searchForm.value.current = current
  149. searchForm.value.size = size
  150. getTableData()
  151. }
  152. //表格数据
  153. const tableRef = ref(null)
  154. const tableColumn = ref([])
  155. //设置表头
  156. const setTableColumns = () => {
  157. tableColumn.value = [
  158. { key: 'fileNumber', name: '标段' },
  159. { key: 'name', name: '移交人', width: 300 },
  160. { key: 'storageTimeValue', name: '移交时间' },
  161. { key: 'secretLevelValue', name: '登记表' },
  162. { key: 'pageN', name: '清单' },
  163. ]
  164. }
  165. const tableData = ref([
  166. { fileNumber: 'T.J01标', name: '张三', storageTimeValue: '2022-06-20 14:52:30', secretLevelValue: '电子档案移交接收登记表(TJ01标)', pageN: '电子档案移交接收登记表(TJ01标)' },
  167. ])
  168. //获取数据
  169. const tableLoading = ref(false)
  170. const getTableData = async () => {
  171. // tableLoading.value = true
  172. // const { error, code, data } = await tuningApi.pageByArchive({
  173. // ...searchForm.value,
  174. // projectId: projectId.value,
  175. // contractId: contractId.value,
  176. // isArchive: 1,
  177. // })
  178. // tableLoading.value = false
  179. // if (!error && code === 200) {
  180. // tableData.value = getArrValue(data?.records)
  181. // searchForm.value.total = data?.total || 0
  182. // } else {
  183. // tableData.value = []
  184. // searchForm.value.total = 0
  185. // }
  186. }
  187. //设置表头
  188. </script>