view.vue 10 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299
  1. <template>
  2. <hc-sys id="app-sys" class="hc-images-page" :isNavBar="false">
  3. <view id="hc-images-nav-bar" class="hc-images-nav-bar" un-border-b="1 solid gray-2">
  4. <hc-nav-back-bar title="声像文件">
  5. <view class="more-bar" v-if="dataList.length > 0" @click="deleteTap">
  6. <text class="text-26" :class="isDelete?'':'text-red-4'">{{isDelete? '取消' : '删除'}}</text>
  7. </view>
  8. </hc-nav-back-bar>
  9. <view class="cu-bar bg-white search py-2" un-border-t="1 solid gray-2" v-if="pageNode.type === 1">
  10. <view class="search-form radius">
  11. <text class="cuIcon-search"/>
  12. <input v-model="searchForm.queryStr" :adjust-position="false" type="text" placeholder="根据题名,名称或拍摄者搜索" confirm-type="search"/>
  13. </view>
  14. <view class="action">
  15. <button class="cu-btn bg-blue-5 text-white" hover-class="none" @click="searchClick">搜索</button>
  16. </view>
  17. </view>
  18. <view class="cu-bar bg-white search py-2" un-border-t="1 solid gray-2" v-if="pageNode.type === 2">
  19. <view class="search-form radius">
  20. <uni-datetime-picker type="datetime" v-model="searchForm.queryDate"/>
  21. </view>
  22. <view class="action">
  23. <button class="cu-btn bg-blue-5 text-white" hover-class="none" @click="searchClick">搜索</button>
  24. </view>
  25. </view>
  26. </view>
  27. <!-- 数据列表 -->
  28. <z-paging ref="pageRef" :style="pagingStyle" v-model="dataList" @query="getDataList">
  29. <template v-for="(item, index) in imageList" :key="index">
  30. <view class="cu-bar bg-white py-2 mt-1" un-border-b="1 solid gray-1">
  31. <view class="px-3">{{item.name}}</view>
  32. </view>
  33. <template v-for="(items, indexs) in item.child" :key="indexs">
  34. <view class="bg-white hc-p hc-flex" un-border-b="1 solid gray-1" @click="itemClick(items, index, indexs)">
  35. <view class="hc-flex mr-2" v-if="isDelete" @click.stop="checkClick(items, index, indexs)">
  36. <uni-icons type="checkbox-filled" size="26" color="#ee5b20" v-if="items.check"/>
  37. <uni-icons type="checkbox" size="26" color="#9a9a9a" v-else/>
  38. </view>
  39. <view class="hc-flex">
  40. <video class="h-100 w-100 b-rounded" :src="items.imageUrl" :controls="false" :show-center-play-btn="false" v-if="items.type === 1"/>
  41. <hc-img class="b-rounded" :src="items.imageUrl?.toString()?.split(',')[0]" width="50" height="50" v-if="items.type === 2"/>
  42. </view>
  43. <view class="relative flex-1 ml-3">
  44. <view class="text-30 text-black clip-2">{{items.title}}</view>
  45. <view class="text-24 mt-1 text-cut">{{items.textContent}}</view>
  46. </view>
  47. </view>
  48. </template>
  49. </template>
  50. </z-paging>
  51. <!--底部操作区域 -->
  52. <view id="hc-bottom-bar" class="hc-bottom-bar"/>
  53. <view id="hc-bottom-btn-bar" class="hc-bottom-btn-bar">
  54. <view class="hc-flex" v-if="isDelete">
  55. <view class="hc-flex" @click="allCheckClick">
  56. <uni-icons type="checkbox-filled" size="24" color="#ee5b20" v-if="checkList.length === dataList.length"/>
  57. <uni-icons type="checkbox" size="24" color="#9a9a9a" v-else/>
  58. <text class="ml-1">全选</text>
  59. </view>
  60. <view class="flex-1 ml-4 text-gray-5 text-24">
  61. <text class="mr-1">已勾选</text>
  62. <text class="text-red-5">{{checkList.length}}</text>
  63. <text class="ml-1">条数据</text>
  64. </view>
  65. <button hover-class="none" class="cu-btn bg-red-5 text-white" @click="delCheckList">删除选中</button>
  66. </view>
  67. <view class="relative" v-else>
  68. <button hover-class="none" class="cu-btn block bg-purple-8 text-white" @click="addFileData">新增声像文件</button>
  69. </view>
  70. </view>
  71. </hc-sys>
  72. </template>
  73. <script setup>
  74. import {getCurrentInstance, ref} from "vue";
  75. import {onLoad, onShow, onReady} from '@dcloudio/uni-app'
  76. import {useAppStore} from "@/store";
  77. import mainApi from '~api/image/index';
  78. import {arrIndex, deepClone, getArrValue} from "js-fast-way";
  79. import {errorToast, querySelect, showModal, successToast} from "@/utils/tools";
  80. //初始变量
  81. const store = useAppStore()
  82. const instance = getCurrentInstance().proxy
  83. const contractInfo = ref(store.contractInfo);
  84. const projectId = ref(store.projectId);
  85. const contractId = ref(store.contractId);
  86. //基础变量
  87. const pageRef = ref(null)
  88. const pageNode = ref({});
  89. const dataList = ref([])
  90. const isNodes = ref(false)
  91. //页面启动
  92. onLoad(({node}) => {
  93. pageNode.value = node ? JSON.parse(decodeURIComponent(node)) : {};
  94. })
  95. onReady(() => {
  96. setPagingStyle()
  97. })
  98. onShow(() => {
  99. if (isNodes.value) {
  100. searchClick()
  101. }
  102. })
  103. //内容区域
  104. const pagingStyle = ref({
  105. position: 'relative',
  106. width: '100%',
  107. bottom: 0,
  108. })
  109. const setPagingStyle = async () => {
  110. const {height: appHeight} = await querySelect(instance, 'app-sys')
  111. const {height: navHeight} = await querySelect(instance, 'hc-images-nav-bar')
  112. const {height: bottomHeight} = await querySelect(instance, 'hc-bottom-bar')
  113. const {height: bottomBtnHeight} = await querySelect(instance, 'hc-bottom-btn-bar')
  114. // #ifdef H5
  115. let content = navHeight + bottomHeight + bottomBtnHeight
  116. pagingStyle.value.height = (appHeight - content) + 'px'
  117. // #endif
  118. // #ifdef APP-PLUS
  119. const {screenHeight, safeArea} = uni.getWindowInfo()
  120. content = navHeight + (screenHeight - safeArea.bottom) + bottomBtnHeight
  121. pagingStyle.value.height = (screenHeight - content) + 'px'
  122. // #endif
  123. }
  124. //条件搜索
  125. const searchClick = () => {
  126. imageList.value = []
  127. pageRef.value?.reload()
  128. }
  129. //获取数据
  130. const searchForm = ref({queryStr: ''})
  131. const getDataList = async (pageNo, pageSize) => {
  132. if (pageNo === 1) {
  133. imageList.value = []
  134. }
  135. const {id, fileType, type, treeId} = pageNode.value
  136. if (!type || !id || !type || !fileType) {
  137. errorToast('参数异常,请退出重试')
  138. pageRef.value?.complete([]);
  139. return false;
  140. }
  141. //树类型
  142. const form = searchForm.value
  143. if (type === 1 && treeId) {
  144. delete form.queryDate
  145. form.wbsIdsStr = treeId
  146. }
  147. if (type === 2) {
  148. delete form.wbsIdsStr
  149. delete form.queryStr
  150. }
  151. //获取数据
  152. uni.showLoading({title: '获取数据中...', mask: true});
  153. const { data } = await mainApi.getPageList({
  154. ...form,
  155. projectId: projectId.value,
  156. contractId: contractId.value,
  157. classifyId: id,
  158. current: pageNo,
  159. size: pageSize,
  160. isApp: 1,
  161. })
  162. //处理数据
  163. let res = getArrValue(data), newArr = [];
  164. for (let i = 0; i < res.length; i++) {
  165. const item = res[i].child;
  166. for (let j = 0; j < item.length; j++) {
  167. newArr.push(item[j])
  168. }
  169. }
  170. setImageList(deepClone(res)) //处理数据
  171. pageRef.value?.complete(newArr);
  172. isNodes.value = true
  173. uni.hideLoading();
  174. }
  175. //处理列表显示数据
  176. const imageList = ref([])
  177. const setImageList = (data) => {
  178. const arr = imageList.value
  179. if (arr.length > 0 && data.length > 0) {
  180. const item = arr[arr.length - 1]
  181. const items = data[0]
  182. if (item.name === items.name) {
  183. const child = item.child
  184. item.child = child.concat(items.child)
  185. data.splice(0, 1)
  186. }
  187. imageList.value = arr.concat(data)
  188. } else {
  189. imageList.value = data
  190. }
  191. }
  192. //批量删除
  193. const isDelete = ref(false)
  194. const deleteTap = () => {
  195. isDelete.value = !isDelete.value
  196. }
  197. //点击选中
  198. const checkList = ref([])
  199. const checkClick = (item) => {
  200. const list = checkList.value
  201. const index = arrIndex(list, 'id', item.id)
  202. if (item.check) {
  203. list.splice(index, 1)
  204. item.check = false
  205. } else {
  206. item.check = true
  207. list.push(item)
  208. }
  209. checkList.value = list
  210. }
  211. //全选
  212. const allCheckClick = () => {
  213. const check = checkList.value, list = dataList.value
  214. const arr = imageList.value
  215. if (check.length === list.length) {
  216. arr.forEach(item => {
  217. item.child.forEach(items => {
  218. items.check = false
  219. })
  220. })
  221. checkList.value = []
  222. } else {
  223. let newArr = []
  224. arr.forEach(item => {
  225. item.child.forEach(items => {
  226. items.check = true
  227. newArr.push(items)
  228. })
  229. })
  230. checkList.value = newArr
  231. }
  232. }
  233. //列表项被点击
  234. const itemClick = (item, index, indexs) => {
  235. if(isDelete.value) {
  236. checkClick(item, index, indexs)
  237. } else {
  238. uni.navigateTo({
  239. url: `/pages/image/info?id=${item.id}`
  240. })
  241. }
  242. }
  243. //删除选中数据
  244. const delCheckList = async () => {
  245. if (checkList.value.length <= 0) {
  246. errorToast('请选择要删除的数据')
  247. return false
  248. }
  249. const res = await showModal({
  250. title: '批量删除提醒',
  251. content: '确定要删除选中的数据吗?',
  252. })
  253. if (!res) return false;
  254. uni.showLoading({title: '批量删除中...', mask: true});
  255. const ids = checkList.value.map(item => item.id)
  256. const { error, code, msg } = await mainApi.removeImageclassifyFile({
  257. ids: ids.join(',')
  258. })
  259. uni.hideLoading();
  260. if (!error && code === 200) {
  261. successToast('删除成功')
  262. searchClick()
  263. } else {
  264. errorToast('删除失败: ' + msg)
  265. }
  266. }
  267. //新增文件数据
  268. const addFileData = () => {
  269. //准备跳转路由
  270. const node = encodeURIComponent(JSON.stringify({
  271. ...pageNode.value
  272. }));
  273. uni.navigateTo({
  274. url: `/pages/image/form?node=${node}`
  275. })
  276. }
  277. </script>
  278. <style lang="scss">
  279. @import "@/style/image/view.scss";
  280. </style>