index.vue 18 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605
  1. <template>
  2. <div class="file-details">
  3. <customHeader>文件共享中心</customHeader>
  4. <div class="content">
  5. <div class="left-box">
  6. <!-- 左侧树菜单 -->
  7. <fileSystem :selected="selected" :list="listArr" :draggable="true" @delete-node="onDeltet" @on-click="onClick"
  8. @change-name="onChangeName" @addNode="onAddNode" @downloadNode="downloadNode">
  9. <template #icon="{ item }">
  10. <template v-if="item.isFolder">
  11. <SvgIcon v-if="item.expanded" size="18" name="file-open" />
  12. <SvgIcon v-else size="18" name="file-close" />
  13. </template>
  14. <treeIcon class="iconfont" :title="item.title" v-else />
  15. </template>
  16. <template #operation="{ type }">
  17. <a-tooltip placement="top" :color="'rgba(28, 72, 105,.5)'">
  18. <template #title>
  19. <span>添加</span>
  20. </template>
  21. <i class="iconfont icon-xinzeng" v-if="type == 'addDocument'"></i>
  22. </a-tooltip>
  23. <a-tooltip placement="top" :color="'rgba(28, 72, 105,.5)'">
  24. <template #title>
  25. <span>编辑</span>
  26. </template>
  27. <i class="iconfont icon-bianji" v-if="type == 'Editable'"></i>
  28. </a-tooltip>
  29. <a-tooltip placement="top" :color="'rgba(28, 72, 105,.5)'">
  30. <template #title>
  31. <span>删除</span>
  32. </template>
  33. <a-popconfirm v-if="type == 'deleteNode'" title="是否确认删除!" ok-text="确定" cancel-text="取消"
  34. @confirm="confirmDel">
  35. <i class="iconfont icon-guanbi"></i>
  36. </a-popconfirm>
  37. </a-tooltip>
  38. <a-tooltip placement="top" :color="'rgba(28, 72, 105,.5)'">
  39. <template #title>
  40. <span>下载目录</span>
  41. </template>
  42. <i class="iconfont icon-shangchuan1" v-if="type == 'downloadNode'"></i>
  43. </a-tooltip>
  44. </template>
  45. </fileSystem>
  46. </div>
  47. <div class="right-box">
  48. <div class="search">
  49. <span style="color: #fff">文件名称:</span>
  50. <a-input v-model:value="searchForm.fileName" placeholder="请输入文件名称" :disabled="activeKey != '1'" />
  51. <span style="color: #fff">文件类型:</span>
  52. <a-select v-model:value="searchForm.fileType" placeholder="请选择..." style="width: 220px; margin-right: 20px"
  53. :disabled="activeKey != '1'">
  54. <a-select-option v-for="item in filetypeList" :value="item.value">{{ item.label }}</a-select-option>
  55. </a-select>
  56. <a-button type="primary" preIcon="ant-design:search-outlined" @click="onSearch"
  57. :disabled="activeKey != '1'">查询</a-button>
  58. <a-button type="primary" style="float: right;" @click="reportSum">汇总报表</a-button>
  59. <a-button type="primary" style="float: right; margin-right: 20px" @click="openModal(true)">文件上传</a-button>
  60. </div>
  61. <div class="list">
  62. <a-tabs class="tabs-box" v-model:activeKey="activeKey" @change="tabChange">
  63. <a-tab-pane key="1" tab="全部">
  64. <NormalTable :key="alive" :submitInfo="submitInfo" :selfParam="selfParam" :searchParam="searchForm"
  65. :nodeParam="nodeParam" :columns="columns" :list="getTree" :deleteById="deleteById" :downLoad="downLoad"
  66. designScope="file-detail" title="文件详情" />
  67. </a-tab-pane>
  68. <a-tab-pane key="2" tab="待审批">
  69. <approvalPend :key="alive2" :selected="selected" />
  70. </a-tab-pane>
  71. <a-tab-pane key="3" tab="已审批">
  72. <endEd :key="alive3" :selected="selected" />
  73. </a-tab-pane>
  74. </a-tabs>
  75. </div>
  76. </div>
  77. </div>
  78. <!-- 上传谈弹窗 -->
  79. <a-modal v-model:visible="visible" centered :width="600" title="上传文件" @ok="handleOk" @cancel="handleCancel">
  80. <a-form :model="formState" labelAlign="right" :label-col="{ span: 6 }" :wrapper-col="{ span: 16 }">
  81. <a-form-item label="是否审批" :rules="[{ required: true, message: '请选择是否审批' }]">
  82. <a-radio-group v-model:value="formState.isApprove" @change="changeRadio">
  83. <a-radio :value="true">是</a-radio>
  84. <a-radio :value="false">否</a-radio>
  85. </a-radio-group>
  86. </a-form-item>
  87. <a-form-item label="文件类型">
  88. <JDictSelectTag v-model:value="formState.fileType" placeholder="请选择文件类型" dictCode="file_type"
  89. style="width: 260px" />
  90. </a-form-item>
  91. <a-form-item label="文件上传">
  92. <a-upload :before-upload="beforeUpload" @remove="handleRemove" :multiple="false" :file-list="fileList">
  93. <a-button type="primary" preIcon="ant-design:cloud-upload-outlined">选择文件</a-button>
  94. </a-upload>
  95. </a-form-item>
  96. </a-form>
  97. </a-modal>
  98. <!-- 汇总报表弹窗 -->
  99. <a-modal v-model:visible="visiblehHz" centered :width="600" title="报表汇总" :footer="null" @cancel="handleCancelHz">
  100. <div
  101. style="height:240px;overflow-y: auto;display: flex;flex-direction: column;align-items: center; padding: 10px;box-sizing: border-box">
  102. <vue3-seamless-scroll hover-stop="true" :list="reportHzList" :hover="true" :step="0.06" class="seamless-warp1">
  103. <div v-for="(item, index) in reportHzList" :key="index"
  104. style="width:100%;height:40px;display: flex;justify-content: space-between;align-items: center">
  105. <span>{{ item.time }}</span>
  106. <span>{{ item.msg }}</span>
  107. </div>
  108. </vue3-seamless-scroll>
  109. </div>
  110. </a-modal>
  111. </div>
  112. </template>
  113. <script lang="ts" setup name="system-user">
  114. import { Vue3SeamlessScroll } from 'vue3-seamless-scroll';
  115. import customHeader from '/@/components/vent/customHeader.vue';
  116. import JDictSelectTag from '/@/components/Form/src/jeecg/components/JDictSelectTag.vue';
  117. import fileSystem from './commen/fileSystem.vue';
  118. import treeIcon from './commen/Icon/treeIcon.vue';
  119. import NormalTable from '../comment/NormalTable.vue';
  120. import approvalPend from '../approvalPend/index.vue';
  121. import endEd from '../endEd/index.vue';
  122. import { useRouter } from 'vue-router';
  123. import { useMessage } from '/@/hooks/web/useMessage';
  124. import { SvgIcon } from '/@/components/Icon';
  125. import { ref, onMounted, reactive, nextTick, watch,onUnmounted } from 'vue';
  126. import { columns } from './fileDetail.data';
  127. import { getTree, createFile, editMenu, delMenu, uploadApi, downLoad, deleteById, listData, getNowUserAgencyData, queryVentMonReportJd, zipdownload } from './fileDetail.api';
  128. let visiblehHz = ref(false)
  129. let reportHzList = ref<any[]>([])
  130. let timer: null | NodeJS.Timeout = null;
  131. let activeKey = ref('1');
  132. let selfParam = reactive({
  133. //各矿参数
  134. sysOrgCode: '',
  135. bpmStatus: null,
  136. flag: false,
  137. });
  138. let router = useRouter(); //路由
  139. const { createMessage } = useMessage();
  140. let searchForm = reactive({
  141. fileName: '',
  142. fileType: '',
  143. });
  144. let filetypeList = reactive<any[]>([
  145. { label: 'txt', value: 'txt' },
  146. { label: 'doc', value: 'doc' },
  147. { label: 'docx', value: 'docx' },
  148. { label: 'xls', value: 'xls' },
  149. { label: 'xlsx', value: 'xlsx' },
  150. { label: 'ppt', value: 'ppt' },
  151. { label: 'pptx', value: 'pptx' },
  152. { label: 'jpg', value: 'jpg' },
  153. { label: 'png', value: 'png' },
  154. { label: 'pdf', value: 'pdf' },
  155. ]);
  156. let fileList = reactive<any[]>([]); //上传文件列表
  157. // let uploadParam = reactive({}); //上传文件参数
  158. let nodeParam = reactive({}); //点击树节点时传递的参数
  159. let alive = ref(0); //点击树节点刷新表格数据
  160. let alive2 = ref(0);
  161. let alive3 = ref(0);
  162. let visible = ref(false); //控制上传弹窗的显示
  163. let formState = reactive({
  164. //上传文件类型,是否审批
  165. isApprove: null,
  166. fileType: '',
  167. });
  168. //文件审批-提交信息
  169. let submitInfo = ref<any[]>([]);
  170. //lxh 当前选中树节点
  171. let selected = reactive<any>({
  172. id: null,
  173. pid: null,
  174. title: '',
  175. isFolder: false,
  176. });
  177. let flag = ref('');
  178. //左侧菜单列表
  179. let listArr = reactive<any[]>([]);
  180. //获取要删除的节点数据
  181. let delNode = reactive({});
  182. //下载目录
  183. function downloadNode(data) {
  184. console.log(data, '999000=============================================')
  185. zipdownload({ id: data.id, ifMine: false }).then((res) => {
  186. let filename = `${data.fileName}`;
  187. downFilePublic(res, filename);
  188. });
  189. }
  190. // 下载公用方法
  191. function downFilePublic(content, fileName) {
  192. const blob = new Blob([content], { type: 'application/zip;charset=UTF-8' }); // 构造一个blob对象来处理数据
  193. // 对于<a>标签,只有 Firefox 和 Chrome(内核) 支持 download 属性
  194. // IE10以上支持blob但是依然不支持download
  195. if ('download' in document.createElement('a')) {
  196. // 支持a标签download的浏览器
  197. const link = document.createElement('a'); // 创建a标签
  198. link.download = fileName; // a标签添加属性
  199. link.style.display = 'none';
  200. link.href = URL.createObjectURL(blob);
  201. document.body.appendChild(link);
  202. link.click(); // 执行下载
  203. URL.revokeObjectURL(link.href); // 释放url
  204. document.body.removeChild(link); // 释放标签
  205. } else {
  206. // 其他浏览器
  207. navigator.msSaveBlob(blob, fileName);
  208. }
  209. }
  210. //汇总报表
  211. function reportSum() {
  212. visiblehHz.value = true
  213. timer = setInterval(async () => {
  214. let res = await queryVentMonReportJd()
  215. reportHzList.value = res.jdList
  216. if (res.flag) {
  217. visiblehHz.value = false
  218. clearTimeout(timer);
  219. reportHzList.value.length=0
  220. alive.value = new Date().getTime();
  221. } else {
  222. visiblehHz.value = true
  223. }
  224. }, 3000)
  225. }
  226. //关闭汇总弹窗
  227. function handleCancelHz(){
  228. reportHzList.value.length=0
  229. visiblehHz.value = false
  230. clearTimeout(timer);
  231. alive.value = new Date().getTime();
  232. }
  233. //上传文件
  234. let openModal = (val) => {
  235. formState.isApprove = null;
  236. formState.fileType = '';
  237. fileList.length = 0;
  238. visible.value = val;
  239. };
  240. //tabs选项切换
  241. let tabChange = (activeKeyVal) => {
  242. activeKey.value = activeKeyVal;
  243. switch (activeKeyVal) {
  244. case '1':
  245. alive.value = new Date().getTime();
  246. break;
  247. case '2':
  248. alive2.value = new Date().getTime();
  249. break;
  250. case '3':
  251. alive3.value = new Date().getTime();
  252. break;
  253. }
  254. };
  255. //文件审批状态切换
  256. let changeRadio = (val) => {
  257. formState.isApprove = val.target.value;
  258. };
  259. //开始上传
  260. let handleOk = () => {
  261. if (formState.isApprove === null) {
  262. createMessage.warning('请选择文件审批状态!');
  263. } else {
  264. const formData = new FormData();
  265. formData.append('file', fileList[0]);
  266. formData.append('parentId', selected.id);
  267. formData.append('isApprove', formState.isApprove);
  268. formData.append('fileType', formState.fileType);
  269. uploadApi(formData).then((res) => {
  270. console.log(res, '上传返回');
  271. alive.value = new Date().getTime();
  272. visible.value = false;
  273. });
  274. }
  275. };
  276. //取消上传
  277. let handleCancel = () => {
  278. visible.value = false;
  279. };
  280. let list2trees = (data) => {
  281. // 删除 所有 children,以防止多次调用
  282. data.forEach(function (item) {
  283. delete item.children;
  284. });
  285. // 将数据存储为 以 id 为 KEY 的 map 索引数据列
  286. let map = {};
  287. data.forEach(function (item) {
  288. map[item.id] = item;
  289. });
  290. var val = [];
  291. data.forEach(function (item) {
  292. item.isFolder = true;
  293. item.title = item.fileName;
  294. item.pid = item.parentId;
  295. // 以当前遍历项,的pid,去map对象中找到索引的id
  296. var parent = map[item.pid];
  297. // 好绕啊,如果找到索引,那么说明此项不在顶级当中,那么需要把此项添加到,他对应的父级中
  298. if (parent) {
  299. (parent.children || (parent.children = [])).push(item);
  300. } else {
  301. //如果没有在map中找到对应的索引ID,那么直接把 当前的item添加到 val结果集中,作为顶级
  302. val.push(item);
  303. }
  304. });
  305. return val;
  306. };
  307. let getTypeTableList = async () => {
  308. let parentId = nodeParam.id || '';
  309. let selectFlag = nodeParam.id ? false : true;
  310. let likeFileName = searchForm.fileName || '';
  311. let fileSuffix = searchForm.fileType || '';
  312. let bpmStatus = selfParam.bpmStatus || '';
  313. let sysOrgCode = selfParam.sysOrgCode || '';
  314. let res = await getTree({
  315. parentId: parentId,
  316. selectFlag: selectFlag,
  317. likeFileName: likeFileName,
  318. fileSuffix: '.' + fileSuffix,
  319. bpmStatus: bpmStatus,
  320. sysOrgCode: sysOrgCode,
  321. });
  322. console.log(res, 'tableList--------------------');
  323. };
  324. //获取左侧菜单树数据
  325. let getTreeList = async () => {
  326. listArr.length = 0;
  327. let data = await getTree({ parentId: '' });
  328. let datas = data.records.filter((v) => v.fileType == null);
  329. let list = list2trees(datas);
  330. listArr.push(...list);
  331. console.log(listArr, '树节点数据');
  332. selected.id = listArr[0].id;
  333. selected.pid = listArr[0].pid;
  334. selected.title = listArr[0].title;
  335. selected.isFolder = listArr[0].isFolder;
  336. };
  337. //点击目录
  338. const onClick = (node) => {
  339. selected.id = node.id;
  340. selected.pid = node.pid;
  341. selected.title = node.title;
  342. selected.isFolder = node.isFolder;
  343. console.log(selected, 'selec----------');
  344. if (flag.value != node.title) {
  345. alive.value = new Date().getTime();
  346. nodeParam = node;
  347. flag.value = node.title;
  348. }
  349. };
  350. //添加文件
  351. const onAddNode = async (node) => {
  352. let data = await createFile({ fileName: node.newName, type: 'FOL', parentId: node.id });
  353. console.log(data, '新增文件返回');
  354. getTreeList();
  355. };
  356. // 修改名字
  357. const onChangeName = (node) => {
  358. editMenu({
  359. id: node.id,
  360. fileName: node.newName,
  361. parentId: node.pid,
  362. }).then((res) => {
  363. getTreeList();
  364. });
  365. };
  366. // 删除
  367. let onDeltet = (node) => {
  368. delNode = { ...node };
  369. };
  370. //确定删除
  371. let confirmDel = () => {
  372. if (delNode.pid == 'root') {
  373. createMessage.warning('根节点不能被删除!');
  374. } else if (delNode.children) {
  375. createMessage.warning('该节点无法被删除,请先删除该节点下的子节点!');
  376. } else {
  377. delMenu({ id: delNode.id }).then((res) => {
  378. console.log(res, '删除文件');
  379. getTreeList();
  380. });
  381. }
  382. };
  383. //查询列表
  384. let onSearch = () => {
  385. alive.value = new Date().getTime();
  386. };
  387. //上传文件
  388. let beforeUpload = (file) => {
  389. console.log(file, '选中文件');
  390. fileList.length = 0;
  391. let index = file.name.indexOf('.');
  392. let name = file.name.substring(index + 1);
  393. if (name == 'png' || name == 'jpg' || name == 'gif' || name == 'psd' || name == 'webp') {
  394. createMessage.warning('禁止上传图片类型的文件!');
  395. } else {
  396. fileList.push(file);
  397. }
  398. };
  399. // 文件移除
  400. let handleRemove = (file) => {
  401. const index = fileList.indexOf(file);
  402. const newFileList = fileList.slice();
  403. newFileList.splice(index, 1);
  404. fileList.length = 0;
  405. };
  406. //文件-提交
  407. async function getListData() {
  408. let res = await listData({ zx: true, column: 'createTime', order: 'desc', status: 1 });
  409. console.log(res, '审批提交-----------');
  410. submitInfo.value = res;
  411. }
  412. watch(
  413. () => router.currentRoute.value,
  414. (val) => {
  415. console.log('各矿传参', val);
  416. selfParam.bpmStatus = val.query.bpmStatus;
  417. selfParam.sysOrgCode = val.query.sysOrgCode;
  418. selfParam.flag = val.query.flag;
  419. },
  420. { immediate: true }
  421. );
  422. onMounted(() => {
  423. getTreeList();
  424. getListData();
  425. getTypeTableList();
  426. });
  427. onUnmounted(() => {
  428. if (timer) {
  429. clearTimeout(timer);
  430. timer = undefined;
  431. }
  432. });
  433. </script>
  434. <style lang="less" scoped>
  435. @ventSpace: zxm;
  436. .file-details {
  437. width: calc(100% - 10px);
  438. height: calc(100% - 100px);
  439. padding: 0px 15px 15px 15px;
  440. position: relative;
  441. margin-top: 100px;
  442. // background: url(../../../../assets/images/files/homes/bd.png) no-repeat center;
  443. // background-size: contain;
  444. &::after {
  445. display: block;
  446. content: '';
  447. height: 200px;
  448. width: 100%;
  449. position: absolute;
  450. background-image: linear-gradient(#2eb2ff05, #2ea2ff00);
  451. border-top: 1px solid #2eb2ff20;
  452. top: 0px;
  453. left: 0px;
  454. }
  455. .content {
  456. width: 100%;
  457. height: 100%;
  458. display: flex;
  459. flex-direction: row;
  460. justify-content: space-between;
  461. align-items: flex-start;
  462. position: relative;
  463. z-index: 999;
  464. .left-box {
  465. width: 18%;
  466. height: 100%;
  467. padding: 10px;
  468. border: 1px solid #99e8ff66;
  469. background: #27546e1a;
  470. box-shadow: 0px 0px 20px 7px rgba(145, 233, 254, 0.7) inset;
  471. -moz-box-shadow: 0px 0px 20px 7px rgba(145, 233, 254, 0.7) inset;
  472. -webkit-box-shadow: 0px 0px 50px 1px rgb(149 235 255 / 5%) inset;
  473. // lxh
  474. .iconfont {
  475. color: #fff;
  476. font-size: 12px;
  477. margin-left: 5px;
  478. }
  479. }
  480. .right-box {
  481. width: 82%;
  482. height: 100%;
  483. padding: 0px 0px 0px 10px;
  484. box-sizing: border-box;
  485. .search {
  486. height: 34px;
  487. line-height: 34px;
  488. margin-bottom: 15px;
  489. }
  490. }
  491. .list {
  492. height: calc(100% - 49px);
  493. position: relative;
  494. }
  495. }
  496. .zxm-form {
  497. padding: 10px !important;
  498. }
  499. }
  500. .seamless-warp1 {
  501. width: 100%;
  502. height: 100%;
  503. overflow: hidden;
  504. }
  505. ::v-deep .jeecg-svg-icon {
  506. margin-right: 5px;
  507. }
  508. ::v-deep .jeecg-basic-table-form-container {
  509. padding: 0px 0px;
  510. }
  511. ::v-deep .zxm-btn-primary {
  512. background-color: transparent;
  513. border: none;
  514. background: url(../../../../assets/images/files/details/btn.png) no-repeat !important;
  515. background-size: 100% 100% !important;
  516. }
  517. ::v-deep .zxm-tree-switcher {
  518. background: transparent;
  519. }
  520. ::v-deep .zxm-input {
  521. width: 220px;
  522. height: 30px;
  523. background: transparent;
  524. border: 1px solid #31bccc;
  525. color: #fff;
  526. margin-right: 20px;
  527. border-radius: 5px;
  528. }
  529. ::v-deep .zxm-select:not(.zxm-select-customize-input) .zxm-select-selector {
  530. height: 30px !important;
  531. background: transparent !important;
  532. border: 1px solid #31bccc !important;
  533. border-radius: 5px !important;
  534. color: #fff !important;
  535. }
  536. ::v-deep .zxm-select-single.zxm-select-show-arrow .zxm-select-selection-item {
  537. color: #fff !important;
  538. }
  539. ::v-deep .zxm-btn-group {
  540. margin-right: 25px;
  541. }
  542. ::v-deep .zxm-upload-list-item-name {
  543. color: #fff;
  544. }
  545. ::v-deep .zxm-upload-list-item:hover .zxm-upload-list-item-info {
  546. background-color: transparent;
  547. }
  548. :deep(.@{ventSpace}-table-cell-row-hover) {
  549. background: #264d8833 !important;
  550. }
  551. :deep(.@{ventSpace}-table-row-selected) {
  552. background: #268bc522 !important;
  553. }
  554. :deep(.@{ventSpace}-select-dropdown) {
  555. border: 1px solid #ececec66;
  556. .@{ventSpace}-select-item-option-selected,
  557. .@{ventSpace}-select-item-option-active {
  558. background-color: #ffffff33 !important;
  559. }
  560. .@{ventSpace}-select-item:hover {
  561. background-color: #ffffff33 !important;
  562. }
  563. }
  564. ::v-deep .zxm-form-item-control-input {
  565. width: 90%;
  566. }
  567. </style>