flieList.vue 37 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308
  1. <template>
  2. <div class="container">
  3. <fullscreen :fullscreen.sync="fullscreen" class="container-box">
  4. <div class="main-box">
  5. <div class="inner-left" style="overflow: hidden">
  6. <div class="button-list">
  7. <el-button
  8. size="mini"
  9. type=""
  10. @click="addRootMenu"
  11. :disabled="isSuper != '1'"
  12. >
  13. 添加根目录</el-button
  14. >
  15. <el-button
  16. size="mini"
  17. type=""
  18. @click="addMenu"
  19. :disabled="isSuper != '1'"
  20. >
  21. 添加子目录</el-button
  22. >
  23. <el-button
  24. size="medium"
  25. type=""
  26. @click="delMenu"
  27. :disabled="isSuper != '1'"
  28. >
  29. 删除
  30. </el-button>
  31. <el-dropdown
  32. @command="treeAction"
  33. trigger="click"
  34. style="margin-left: 10px"
  35. >
  36. <el-button type="" plain size="medium" :disabled="isSuper != '1'">
  37. 操作
  38. </el-button>
  39. <el-dropdown-menu slot="dropdown">
  40. <el-dropdown-item :command="1">全部展开</el-dropdown-item>
  41. <el-dropdown-item :command="2">全部关闭</el-dropdown-item>
  42. </el-dropdown-menu>
  43. </el-dropdown>
  44. </div>
  45. <el-alert type="warning" :closable="false">
  46. <template slot="title">
  47. {{
  48. actionName
  49. ? "当前选择节点名称:" + actionName
  50. : "当前无选择节点"
  51. }}
  52. <span v-show="actionName" class="clearStyle" @click="clearClick"
  53. >取消选择</span
  54. >
  55. </template>
  56. </el-alert>
  57. <div style="margin: 10px 0">
  58. <el-input
  59. size="medium"
  60. placeholder="请输入内容"
  61. v-model="filterText"
  62. class="input-with-select"
  63. clearable
  64. @change="
  65. () => {
  66. if (!filterText) {
  67. searchMenu();
  68. }
  69. }
  70. "
  71. >
  72. <el-button
  73. slot="append"
  74. @click="searchMenu"
  75. icon="el-icon-search"
  76. ></el-button>
  77. </el-input>
  78. </div>
  79. <div
  80. style="
  81. height: calc(100% - 160px);
  82. overflow-y: auto;
  83. margin-top: 20px;
  84. "
  85. >
  86. <el-tree
  87. ref="catalogTree"
  88. :expand-on-click-node="true"
  89. :auto-expand-parent="true"
  90. :default-expand-all="true"
  91. :props="defaultProps"
  92. :data="menuList"
  93. @node-click="nodeClick"
  94. :filter-node-method="filterNode"
  95. node-key="id"
  96. >
  97. <span class="custom-tree-node" slot-scope="{ node }">
  98. <span>
  99. <span style="color: #009cff" class=""></span>
  100. <span
  101. :style="
  102. node.data.hasOwnProperty('parent')
  103. ? 'font-size:14px;padding-left:5px'
  104. : 'font-size:12px;padding-left:5px'
  105. "
  106. >{{ node.data.title }}</span
  107. >
  108. </span>
  109. </span>
  110. </el-tree>
  111. </div>
  112. <div class="tree-action"></div>
  113. </div>
  114. <div class="inner-right">
  115. <div class="titbox">
  116. <div>
  117. <i class="el-icon-refresh" @click="iconCli(1)"></i>
  118. <i class="el-icon-full-screen" @click="iconCli(2)"></i>
  119. <!-- <i class="el-icon-folder-opened"></i>-->
  120. <!-- <i class="el-icon-view"></i>-->
  121. <!-- <i class="el-icon-more"></i>-->
  122. </div>
  123. </div>
  124. <div class="search">
  125. <mySearch
  126. :searchList="searchList"
  127. @searchInfo="searchInfo"
  128. ></mySearch>
  129. </div>
  130. <div style="margin-bottom: 10px">
  131. <el-button
  132. v-show="actionName"
  133. class="btn-check"
  134. size="medium"
  135. @click="addFile"
  136. :disabled="uploadStatus ===false"
  137. >
  138. 上传附件
  139. </el-button>
  140. <el-button v-show="idList && idList.length > 0" @click="moreDown"
  141. >批量下载</el-button
  142. >
  143. </div>
  144. <div class="tabbox">
  145. <el-table
  146. height="calc(100% )"
  147. class="com-table"
  148. ref="multipleTable"
  149. :data="tableData"
  150. tooltip-effect="dark"
  151. border
  152. size="small"
  153. style="width: 100%"
  154. v-loading="loading"
  155. @selection-change="handleSelectionChange"
  156. >
  157. <el-table-column type="selection" width="55"> </el-table-column>
  158. <el-table-column
  159. prop="title"
  160. width="150"
  161. show-overflow-tooltip
  162. label="材料名称"
  163. >
  164. </el-table-column>
  165. <el-table-column label="会议名称">
  166. <template slot-scope="scope">
  167. <span class="">{{ scope.row.meeting }}</span>
  168. </template>
  169. </el-table-column>
  170. <el-table-column label="材料背景">
  171. <template slot-scope="scope">
  172. <span class="">{{ scope.row.titleBg }}</span>
  173. </template>
  174. </el-table-column>
  175. <el-table-column
  176. label="文件名称"
  177. width="150"
  178. show-overflow-tooltip
  179. >
  180. <template slot-scope="scope">
  181. <span class="">{{ scope.row.fileName }}</span>
  182. </template>
  183. </el-table-column>
  184. <el-table-column
  185. prop="createTime"
  186. show-overflow-tooltip
  187. label="发布时间"
  188. width="140"
  189. />
  190. <el-table-column label="操作" width="150px" align="center">
  191. <template slot-scope="scope">
  192. <el-button
  193. class="font-btn"
  194. size="mini"
  195. type="text"
  196. plain
  197. @click="downLoad(scope.row)"
  198. >下载
  199. </el-button>
  200. <el-button
  201. class="font-btn"
  202. size="mini"
  203. type="text"
  204. plain
  205. @click="deleteOne(scope.row)"
  206. >删除
  207. </el-button>
  208. </template>
  209. </el-table-column>
  210. </el-table>
  211. <el-pagination
  212. class="pageBox"
  213. @current-change="currchange"
  214. layout="prev, pager, next"
  215. background
  216. :total="total"
  217. >
  218. </el-pagination>
  219. </div>
  220. </div>
  221. </div>
  222. </fullscreen>
  223. <el-dialog
  224. class="p-new-box"
  225. size="50%"
  226. title="新增目录"
  227. :append-to-body="true"
  228. :visible.sync="addDialogStatus"
  229. :close-on-click-modal="false"
  230. >
  231. <el-form
  232. :model="formData"
  233. :rules="rules"
  234. ref="ruleForm"
  235. label-width="100px"
  236. class="demo-ruleForm"
  237. style="width: 90%; margin: 30px auto"
  238. >
  239. <el-form-item label="目录名称:" prop="title">
  240. <el-input
  241. v-model="formData.title"
  242. placeholder="请输入标题"
  243. ></el-input>
  244. </el-form-item>
  245. <!-- 目录不设置权限
  246. <el-form-item label="查看权限:" prop="text">
  247. <el-radio-group v-model="formData.auth">
  248. <el-radio label="3">二级经理</el-radio>
  249. <el-radio label="2">三级经理</el-radio>
  250. <el-radio label="1">普通员工</el-radio>
  251. </el-radio-group>
  252. </el-form-item>
  253. -->
  254. <el-form-item
  255. prop="parentId"
  256. v-if="actionName != 'add'"
  257. label="父级编码:"
  258. >
  259. <el-input
  260. disabled
  261. v-model="formData.parentId"
  262. placeholder="请输入父级编码"
  263. ></el-input>
  264. </el-form-item>
  265. <el-form-item
  266. label="父级名称:"
  267. v-if="actionName != 'add'"
  268. prop="parentName"
  269. >
  270. <el-input
  271. disabled
  272. v-model="formData.parentName"
  273. readonly
  274. placeholder="请输入父级名称"
  275. ></el-input>
  276. </el-form-item>
  277. <el-form-item label="操作人:" prop="createName">
  278. <el-input
  279. v-model="formData.createName"
  280. disabled
  281. placeholder="请输入操作人"
  282. ></el-input>
  283. </el-form-item>
  284. <div class="drawer-footer" style="text-align: right">
  285. <el-button
  286. type="primary"
  287. size="medium"
  288. @click="submitForm('ruleForm')"
  289. >{{ subType }}</el-button
  290. >
  291. <el-button
  292. style="margin-right: 40px"
  293. size="medium"
  294. @click="resetForm('ruleForm')"
  295. >取消</el-button
  296. >
  297. </div>
  298. </el-form>
  299. </el-dialog>
  300. <el-dialog
  301. class="p-new-box"
  302. size="50%"
  303. :title="titname + '文件'"
  304. :append-to-body="true"
  305. :before-close="closedia"
  306. :visible.sync="dialogStatus"
  307. :close-on-click-modal="false"
  308. >
  309. <div v-loading="loadinged">
  310. <el-form
  311. v-if="titname != '查看'"
  312. :model="infolist"
  313. ref="infolist"
  314. :rules="filerules"
  315. >
  316. <el-form-item prop="title" class="info-line online">
  317. <span>材料名称:</span>
  318. <el-input v-model="infolist.title" placeholder="请输入材料名称">
  319. </el-input>
  320. </el-form-item>
  321. <el-form-item class="info-line online radviv" prop="text">
  322. <span>查看权限:</span>
  323. <el-radio-group v-model="infolist.auth">
  324. <el-radio label="2">二级经理</el-radio>
  325. <el-radio label="3">三级经理</el-radio>
  326. <el-radio label="1">普通员工</el-radio>
  327. </el-radio-group>
  328. </el-form-item>
  329. <el-form-item prop="meeting" class="info-line online">
  330. <span>会议名称:</span>
  331. <el-input v-model="infolist.meeting" placeholder="请输入会议名称">
  332. </el-input>
  333. </el-form-item>
  334. <el-form-item class="info-line online" prop="titleBg">
  335. <span>材料背景:</span>
  336. <el-input
  337. type="textarea"
  338. :rows="5"
  339. placeholder="请输入材料背景"
  340. style="width: calc(100%-100px)"
  341. v-model="infolist.titleBg"
  342. ></el-input>
  343. </el-form-item>
  344. <div class="info-line online">
  345. <span>附件:</span>
  346. <myUpload
  347. @uploadBack="uploadBack"
  348. :fileInfo="fileInfo"
  349. :fileList="fileInfo.fileList"
  350. style="width: 30% !important"
  351. >
  352. </myUpload>
  353. </div>
  354. </el-form>
  355. <div class="drawer-footer" style="text-align: right">
  356. <el-button size="medium" type="primary" @click="dialogCli(1)"
  357. >保 存</el-button
  358. >
  359. <el-button size="medium" @click="dialogCli(2)">取 消</el-button>
  360. </div>
  361. </div>
  362. </el-dialog>
  363. </div>
  364. </template>
  365. <script>
  366. import mySearch from "../../../components/search.vue";
  367. import toolList from "../../../components/toolList";
  368. import myUpload from "../../../components/upload";
  369. export default {
  370. components: {
  371. mySearch,
  372. toolList,
  373. myUpload,
  374. },
  375. data() {
  376. return {
  377. uploadStatus:true,
  378. jurisdiction: {}, //权限列表
  379. isSuper: "", //是否为超级管理员
  380. loadinged: false,
  381. addDialogStatus: false,
  382. searchList: [
  383. {
  384. type: "input",
  385. tit: "材料名称",
  386. value: "",
  387. width: "98%",
  388. },
  389. ],
  390. tooltit: "文件共享管理",
  391. loading: false,
  392. defaultExpand: true,
  393. functionCode: "",
  394. filterText: "", // tree搜索value
  395. actionName: "", // 当前选择节点名称
  396. menuList: [], // tree数据源
  397. checkedMenu: [], // 选中节点的functionCode
  398. checkedNodes: [], // 选中节点的node值
  399. roleData: "", // 某一条数据
  400. tableData: [], // 表格数据源
  401. authData: "", //权限数据
  402. fullscreen: false,
  403. infolist: {
  404. isFile: "1",
  405. title: "", // 材料名称
  406. meeting: "", // 会议名称
  407. titleBg: "", // 材料背景
  408. auth: "1", // 查看权限
  409. mkFileShareAttachList: [], // 附件数据
  410. parentId: "",
  411. }, // 提交表单数据源
  412. formData: {
  413. id: "",
  414. title: "",
  415. createName: JSON.parse(sessionStorage.userInfo).loginName,
  416. createId: JSON.parse(sessionStorage.userInfo).loginNo,
  417. orgName: JSON.parse(sessionStorage.userInfo).groupName,
  418. orgId: JSON.parse(sessionStorage.userInfo).groupId,
  419. parentId: "",
  420. parentName: "",
  421. isFile: "0",
  422. auth: "1",
  423. },
  424. defaultProps: {
  425. children: "childDept",
  426. label: "title",
  427. },
  428. filerules: {
  429. title: [
  430. {
  431. required: true,
  432. message: "请输入材料名称",
  433. trigger: "change",
  434. },
  435. ],
  436. meeting: [
  437. {
  438. required: true,
  439. message: "请输入会议名称",
  440. trigger: "change",
  441. },
  442. ],
  443. titleBg: [
  444. {
  445. required: true,
  446. message: "请输入材料背景",
  447. trigger: "change",
  448. },
  449. ],
  450. },
  451. rules: {
  452. title: [
  453. {
  454. required: true,
  455. message: "请输入标题",
  456. trigger: "change",
  457. },
  458. ],
  459. parentId: [
  460. {
  461. required: false,
  462. message: "请选择父级编码",
  463. trigger: "change",
  464. },
  465. ],
  466. },
  467. subType: "",
  468. total: 0,
  469. pageSize: 1,
  470. params: {
  471. isFile: "1",
  472. id: "",
  473. auth: "",
  474. },
  475. paramsSearch: {
  476. isFile: "1",
  477. id: "",
  478. auth:''
  479. },
  480. fileInfo: {
  481. type: "bt1n",
  482. typename: "上传文件",
  483. limit: 5,
  484. url: "/market/cmkFileShare/upload",
  485. fileList: [],
  486. },
  487. titname: "新增",
  488. dialogStatus: false,
  489. attList: [],
  490. idList: [],
  491. };
  492. },
  493. created() {
  494. this.getQuan();
  495. },
  496. methods: {
  497. moreDown() {
  498. // let arr = [];
  499. // this.idList.forEach((item) => {
  500. // arr.push({
  501. // id: item.fileCode,
  502. // fileName: item.fileName,
  503. // });
  504. // });
  505. // this.$http({
  506. // url: "/market/cmkFileShare/downAllFile",
  507. // method: "post",
  508. // headers: {
  509. // "Content-Type": "application/json",
  510. // },
  511. // responseType: "blob",
  512. // data: { mkFileShareAttachList: arr },
  513. // }).then((response) => {
  514. // if (window.navigator && window.navigator.msSaveOrOpenBlob) {
  515. // let blob = new Blob([response.data], {
  516. // type: "application/vnd.ms-excel",
  517. // });
  518. // window.navigator.msSaveOrOpenBlob(
  519. // blob,
  520. // new Date().getTime().toString() + ".zip"
  521. // );
  522. // } else {
  523. // /* 火狐谷歌的文件下载方式 */
  524. // var blob = new Blob([response.data]);
  525. // var downloadElement = document.createElement("a");
  526. // var href = window.URL.createObjectURL(blob);
  527. // downloadElement.href = href;
  528. // downloadElement.download = new Date().getTime().toString() + ".zip";
  529. // document.body.appendChild(downloadElement);
  530. // downloadElement.click();
  531. // document.body.removeChild(downloadElement);
  532. // window.URL.revokeObjectURL(href);
  533. // }
  534. // });
  535. this.idList.forEach((item) => {
  536. this.$http({
  537. url: "/market/cmkFileShare/downFile",
  538. method: "post",
  539. headers: {
  540. "Content-Type": "application/json",
  541. },
  542. responseType: "blob",
  543. data: { id: item.fileCode, fileName: item.fileName },
  544. }).then((response) => {
  545. if (window.navigator && window.navigator.msSaveOrOpenBlob) {
  546. let blob = new Blob([response.data], {
  547. type: "application/vnd.ms-excel",
  548. });
  549. window.navigator.msSaveOrOpenBlob(blob, item.fileName);
  550. } else {
  551. /* 火狐谷歌的文件下载方式 */
  552. var blob = new Blob([response.data]);
  553. var downloadElement = document.createElement("a");
  554. var href = window.URL.createObjectURL(blob);
  555. downloadElement.href = href;
  556. downloadElement.download = item.fileName;
  557. document.body.appendChild(downloadElement);
  558. downloadElement.click();
  559. document.body.removeChild(downloadElement);
  560. window.URL.revokeObjectURL(href);
  561. }
  562. });
  563. });
  564. },
  565. handleSelectionChange(val) {
  566. this.idList = val;
  567. },
  568. //搜索数据
  569. searchInfo(v) {
  570. this.paramsSearch = {};
  571. v[0] ? (this.paramsSearch.title = v[0]) : "";
  572. this.paramsSearch.isFile = "1";
  573. this.paramsSearch.auth = this.params.auth;
  574. // this.paramsSearch.parentId = this.infolist.parentId;
  575. this.pageSize = 1; //重置分页
  576. this.getList(this.paramsSearch, this.pageSize);
  577. },
  578. // 附件下载
  579. downLoad(fileData) {
  580. this.$http({
  581. url: "/market/cmkFileShare/downFile",
  582. method: "post",
  583. headers: {
  584. "Content-Type": "application/json",
  585. },
  586. responseType: "blob",
  587. data: { id: fileData.fileCode, fileName: fileData.fileName },
  588. }).then((response) => {
  589. if (window.navigator && window.navigator.msSaveOrOpenBlob) {
  590. let blob = new Blob([response.data], {
  591. type: "application/vnd.ms-excel",
  592. });
  593. window.navigator.msSaveOrOpenBlob(blob, fileData.fileName);
  594. } else {
  595. /* 火狐谷歌的文件下载方式 */
  596. var blob = new Blob([response.data]);
  597. var downloadElement = document.createElement("a");
  598. var href = window.URL.createObjectURL(blob);
  599. downloadElement.href = href;
  600. downloadElement.download = fileData.fileName;
  601. document.body.appendChild(downloadElement);
  602. downloadElement.click();
  603. document.body.removeChild(downloadElement);
  604. window.URL.revokeObjectURL(href);
  605. }
  606. });
  607. },
  608. // 新增附件
  609. addFile() {
  610. this.titname = "新增";
  611. this.dialogStatus = true;
  612. },
  613. // 上传回调
  614. uploadBack(v) {
  615. this.attList = v;
  616. },
  617. // 关闭弹窗
  618. closedia() {
  619. this.infolist = {};
  620. this.dialogStatus = false;
  621. this.fileInfo.fileList = [];
  622. this.getList(this.params, this.pageSize);
  623. },
  624. //添加 修改
  625. dialogCli(v) {
  626. this.fileInfo.fileList = [];
  627. if (v === 2) {
  628. this.dialogStatus = false;
  629. this.getList(this.params, this.pageSize);
  630. return;
  631. }
  632. this.$refs.infolist.validate((valid) => {
  633. if (valid) {
  634. let attList = [];
  635. for (let i = 0; i < this.attList.length; i++) {
  636. attList.push({
  637. id: this.attList[i].id,
  638. fileName: this.attList[i].fileName,
  639. });
  640. }
  641. this.infolist.mkFileShareAttachList = attList;
  642. this.infolist.isFile = "1";
  643. this.loadinged = true;
  644. this.$http({
  645. url: "/market/cmkFileShare/add",
  646. method: "post",
  647. headers: {
  648. "Content-Type": "application/json",
  649. },
  650. data: this.infolist,
  651. }).then((res) => {
  652. this.loadinged = false;
  653. if (res.data.result === 1) {
  654. this.$message({
  655. message: res.data.desc,
  656. type: "error",
  657. });
  658. } else {
  659. this.$message({
  660. message: "成功",
  661. type: "success",
  662. });
  663. this.fileInfo.fileList = [];
  664. // this.infolist = {};
  665. this.dialogStatus = false;
  666. this.getList(this.params, this.pageSize);
  667. }
  668. });
  669. }
  670. });
  671. },
  672. // 新增目录-表单提交
  673. async submitForm(formName) {
  674. let valid = await this.$refs[formName].validate().catch((err) => err);
  675. if (valid) {
  676. this.$http({
  677. url:
  678. this.subType == "保存"
  679. ? "/market/cmkFileShare/add"
  680. : "/satisfy/qacatalog/update",
  681. method: "post",
  682. headers: {
  683. "Content-Type": "application/json",
  684. },
  685. data: this.formData,
  686. }).then((res) => {
  687. if (res.data.result == 0) {
  688. this.$message({
  689. type: "success",
  690. message: res.data.desc,
  691. });
  692. this.actionName = "";
  693. this.getData();
  694. this.addDialogStatus = false;
  695. }
  696. });
  697. } else {
  698. this.$message({
  699. type: "error",
  700. message: "新增失败",
  701. });
  702. this.addDialogStatus = false;
  703. return false;
  704. }
  705. },
  706. // 取消新增目录
  707. resetForm(formName) {
  708. this.actionName = "";
  709. this.$refs[formName].resetFields();
  710. this.addDialogStatus = false;
  711. },
  712. // 新增目录
  713. addMenu() {
  714. if (!this.actionName) {
  715. this.$message("请先点击选中要增加菜单的位置");
  716. } else {
  717. this.addDialogStatus = true;
  718. this.subType = "保存";
  719. this.formData.parentId = this.formData.id;
  720. this.formData.parentName = this.formData.title;
  721. this.formData.title = "";
  722. this.formData.id = "";
  723. }
  724. },
  725. // 新增根目录
  726. addRootMenu() {
  727. this.addDialogStatus = true;
  728. this.subType = "保存";
  729. this.formData.parentId = 0;
  730. this.formData.parentName = this.formData.title;
  731. this.formData.title = "";
  732. this.formData.id = "";
  733. },
  734. // 树展开\折叠
  735. treeAction(val) {
  736. val == 1 ? (this.defaultExpand = true) : (this.defaultExpand = false);
  737. for (
  738. let i = 0;
  739. i < this.$refs.catalogTree.store._getAllNodes().length;
  740. i++
  741. ) {
  742. this.$refs.catalogTree.store._getAllNodes()[i].expanded =
  743. this.defaultExpand;
  744. }
  745. },
  746. deleteOne(val) {
  747. this.$confirm("即将删除此条数据, 是否删除?", "提示", {
  748. confirmButtonText: "确定",
  749. cancelButtonText: "取消",
  750. type: "warning",
  751. })
  752. .then(() => {
  753. this.pageSize = 1;
  754. this.$http({
  755. url: "/market/cmkFileShare/del",
  756. method: "post",
  757. headers: {
  758. "Content-Type": "application/json",
  759. },
  760. data: {
  761. id: val.id,
  762. isFile: "1",
  763. createId: val.createId,
  764. createName: val.createName,
  765. },
  766. }).then((res) => {
  767. if (res.data.result == 0) {
  768. this.$notify({
  769. title: "成功",
  770. message: res.data.desc,
  771. type: "success",
  772. });
  773. this.getList(this.params, this.pageSize);
  774. } else if (res.data.result == 1) {
  775. this.$notify({
  776. title: "失败",
  777. message: res.data.desc,
  778. type: "error",
  779. });
  780. }
  781. });
  782. })
  783. .catch(() => {});
  784. },
  785. // 删除目录
  786. delMenu() {
  787. if (!this.formData.id) {
  788. this.$message("请先点击选中要删除的菜单");
  789. } else {
  790. this.$confirm("即将删除此条数据, 是否删除?", "提示", {
  791. confirmButtonText: "确定",
  792. cancelButtonText: "取消",
  793. type: "warning",
  794. })
  795. .then(() => {
  796. this.$http({
  797. url: "/market/cmkFileShare/del",
  798. method: "post",
  799. headers: {
  800. "Content-Type": "application/json",
  801. },
  802. data: {
  803. id: this.formData.id,
  804. isFile: "0",
  805. createId: this.formData.createId,
  806. createName: this.formData.createName,
  807. },
  808. }).then((res) => {
  809. if (res.data.result == 0) {
  810. this.$notify({
  811. title: "成功",
  812. message: res.data.desc,
  813. type: "success",
  814. });
  815. this.actionName = "";
  816. this.getData();
  817. } else if (res.data.result == 1) {
  818. this.$notify({
  819. title: "失败",
  820. message: res.data.desc,
  821. type: "error",
  822. });
  823. }
  824. });
  825. })
  826. .catch(() => {});
  827. }
  828. },
  829. // 搜索按钮事件
  830. searchMenu() {
  831. this.$refs.catalogTree.filter(this.filterText);
  832. },
  833. // tree过滤方法
  834. filterNode(value, data) {
  835. if (!value) return true;
  836. return data.title.indexOf(value) !== -1;
  837. },
  838. // 点击树节点事件
  839. nodeClick(a, b) {
  840. let nodeData = JSON.parse(JSON.stringify(b.data));
  841. this.formData.title = nodeData.title;
  842. this.formData.parentId = nodeData.parentId;
  843. this.formData.parentName = nodeData.parentName;
  844. this.formData.id = nodeData.id;
  845. delete Object["children"];
  846. this.actionName = nodeData.title;
  847. if(this.actionName ==='C市场' ||this.actionName === 'H市场'||this.actionName ==='N市场+线上' || this.actionName === '业务综合'||this.actionName ==='渠道'){
  848. this.isSuper = '2'//权限
  849. this.uploadStatus = false;
  850. }else{
  851. this.uploadStatus = true;
  852. if(this.jurisdiction.isSuper === '1'){
  853. this.isSuper ='1'
  854. }
  855. }
  856. this.subType = "修改";
  857. this.params.type = "";
  858. this.params.title = "";
  859. this.params.collection = "";
  860. this.params.catalogId = nodeData.id;
  861. this.params.id = nodeData.id;
  862. this.infolist.parentId = nodeData.id;
  863. this.pageSize = 1; //切换树重置分页
  864. // if(this.jurisdiction.isSuper === '1'){
  865. // this.params.auth = '2';
  866. // }
  867. this.getList(this.params, this.pageSize);
  868. },
  869. //获取权限
  870. async getQuan() {
  871. await this.$http({
  872. url: "/market/cmkFileShare/queryRole",
  873. method: "post",
  874. headers: {
  875. "Content-Type": "application/json",
  876. },
  877. data: {},
  878. }).then((res) => {
  879. if(res.data){
  880. this.isSuper = res.data[0].isSuper || "";
  881. this.jurisdiction = res.data[0];
  882. switch (this.jurisdiction.roleDuty) {
  883. case "二级经理":
  884. this.params.auth = 2;
  885. this.paramsSearch =2
  886. break;
  887. case "三级经理":
  888. this.params.auth = 3;
  889. this.paramsSearch.auth =3
  890. break;
  891. case "员工":
  892. this.params.auth = 1;
  893. this.paramsSearch =1
  894. break;
  895. }
  896. }
  897. });
  898. await this.getData();
  899. // await this.getList(this.params, this.pageSize);
  900. },
  901. clearClick() {
  902. this.actionName = "";
  903. this.params.id = "";
  904. this.getList(this.params, this.pageSize);
  905. this.$router.go(0)
  906. },
  907. // 获取目录
  908. async getData() {
  909. await this.$http({
  910. url: "/market/cmkFileShare/queryList",
  911. method: "post",
  912. headers: {
  913. "Content-Type": "application/json",
  914. },
  915. data: { isFile: "0" },
  916. }).then((res) => {
  917. if (res.data && res.data.length > 0) {
  918. res.data.map((item) =>{
  919. if (this.jurisdiction.isSuper === "1"){//全部加入list
  920. this.menuList = res.data;
  921. }else{ //不是超级管理员
  922. if(item.powerSwitch === 0){ //不是固定文件夹
  923. this.menuList.push(item)
  924. }
  925. if(this.jurisdiction.roleType ==='省公司') {
  926. if(item.powerSwitch === 1){ //是固定文件夹
  927. if (
  928. this.jurisdiction.roleId === item.id ||
  929. this.jurisdiction.parentId === item.id
  930. ) {
  931. this.menuList.push(item);
  932. if (
  933. this.jurisdiction.roleDuty === "三级经理" ||
  934. this.jurisdiction.roleDuty === "员工"
  935. ) {
  936. //小弟
  937. // this.menuList.push(res.data[i]);
  938. this.menuList.map((item) =>{
  939. if(item.id === this.jurisdiction.roleId ||this.jurisdiction.parentId===item.id){
  940. item.childDept.map((items) =>{
  941. if(items.id === this.jurisdiction.roleId){
  942. item.childDept = [];
  943. item.childDept.push(items)
  944. }
  945. })
  946. }
  947. })
  948. }
  949. }
  950. }
  951. }else if(this.jurisdiction.roleType ==='地市公司'){
  952. //地市公司权限
  953. if(item.id === '66666666666666666'){
  954. this.menuList = []
  955. this.menuList.push((item))
  956. }
  957. }
  958. }
  959. })
  960. // if (this.jurisdiction.isSuper == "1") {
  961. // this.menuList = res.data;
  962. // }else{
  963. // for (let i = 0; i < res.data.length ; i++) {
  964. // if(this.jurisdiction.roleType ==='省公司' && res.data[i].id === '99999999999999999'){
  965. // this.menuList.push(res.data[i])
  966. // }
  967. // else {
  968. //
  969. // }
  970. // }
  971. // }
  972. }
  973. });
  974. },
  975. // 获取权限
  976. getAuthData() {
  977. this.$http({
  978. url: "/market/cmkFileShare/queryAuth",
  979. method: "post",
  980. headers: {
  981. "Content-Type": "application/json",
  982. },
  983. data: {},
  984. }).then((res) => {
  985. if (res.data) {
  986. this.authData = res.data.auth;
  987. }
  988. });
  989. },
  990. toTreeData(data) {
  991. var pos = {};
  992. var tree = [];
  993. var i = 0;
  994. while (data.length != 0) {
  995. if (data[i].parentId == 0) {
  996. tree.push({
  997. id: data[i].id,
  998. title: data[i].title,
  999. children: [],
  1000. });
  1001. pos[data[i].id] = [tree.length - 1];
  1002. data.splice(i, 1);
  1003. i--;
  1004. } else {
  1005. var posArr = pos[data[i].parentId];
  1006. if (posArr != undefined) {
  1007. var obj = tree[posArr[0]];
  1008. for (var j = 1; j < posArr.length; j++) {
  1009. obj = obj.children[posArr[j]];
  1010. }
  1011. obj.children.push({
  1012. id: data[i].id,
  1013. title: data[i].title,
  1014. children: [],
  1015. });
  1016. pos[data[i].id] = posArr.concat([obj.children.length - 1]);
  1017. data.splice(i, 1);
  1018. i--;
  1019. }
  1020. }
  1021. i++;
  1022. if (i > data.length - 1) {
  1023. i = 0;
  1024. }
  1025. }
  1026. return tree;
  1027. },
  1028. //功能栏
  1029. iconCli(v) {
  1030. if (v === 1) {
  1031. this.getList(this.params, this.pageSize);
  1032. }
  1033. if (v === 2) {
  1034. this.fullscreen = !this.fullscreen;
  1035. }
  1036. },
  1037. // 分页
  1038. currchange(v) {
  1039. this.pageSize = v;
  1040. this.getList(this.params, this.pageSize);
  1041. },
  1042. //获取列表
  1043. getList(v, n) {
  1044. console.log(v);
  1045. this.pageSize = n;
  1046. this.loading = true;
  1047. this.tableData = [];
  1048. this.$http({
  1049. url: "/market/cmkFileShare/queryPage",
  1050. method: "post",
  1051. headers: {
  1052. "Content-Type": "application/json",
  1053. page: '{"pageNo":"' + n + '","pageSize":"10"}',
  1054. },
  1055. data: v,
  1056. }).then((res) => {
  1057. if (res.data.data && res.data.data.length > 0) {
  1058. let arr = res.data.data;
  1059. arr.forEach((item) => {
  1060. Object.keys(item).forEach((val) => {
  1061. if (item[val] == null) {
  1062. item[val] = "- -";
  1063. }
  1064. });
  1065. });
  1066. this.tableData = arr;
  1067. } else {
  1068. this.tableData = res.data.data;
  1069. }
  1070. this.total = res.data.totalRecord;
  1071. this.loading = false;
  1072. });
  1073. },
  1074. },
  1075. mounted() {
  1076. this.getAuthData();
  1077. },
  1078. };
  1079. </script>
  1080. <style scoped lang="scss">
  1081. .radviv div {
  1082. width: 80% !important;
  1083. }
  1084. .pageBox {
  1085. text-align: right;
  1086. margin-top: 10px;
  1087. }
  1088. .info-line {
  1089. width: 100%;
  1090. display: block;
  1091. // padding-left: 20px;
  1092. div {
  1093. width: 50%;
  1094. display: inline-block;
  1095. }
  1096. span {
  1097. width: 100px;
  1098. display: inline-block;
  1099. text-align: right;
  1100. font-weight: bold;
  1101. font-size: 14px;
  1102. padding-right: 15px;
  1103. i {
  1104. color: red;
  1105. display: inline-block;
  1106. padding-right: 5px;
  1107. }
  1108. }
  1109. .el-select,
  1110. .el-input {
  1111. width: calc(100% - 100px);
  1112. }
  1113. .tree {
  1114. width: calc(100% - 100px);
  1115. }
  1116. }
  1117. .online {
  1118. width: 100%;
  1119. .el-select {
  1120. width: calc(100% - 100px);
  1121. }
  1122. span {
  1123. vertical-align: top;
  1124. }
  1125. .el-textarea {
  1126. width: calc(100% - 100px);
  1127. }
  1128. }
  1129. </style>
  1130. <style lang="scss" scoped>
  1131. .titbox {
  1132. div {
  1133. float: right;
  1134. i {
  1135. font-size: 22px;
  1136. margin-left: 20px;
  1137. cursor: pointer;
  1138. }
  1139. }
  1140. }
  1141. .container {
  1142. background-color: #f0f2f5;
  1143. .clearStyle {
  1144. cursor: pointer;
  1145. color: #0b82ff;
  1146. }
  1147. .el-col {
  1148. background-color: white;
  1149. padding: 0 20px;
  1150. }
  1151. .container-box {
  1152. padding: 0;
  1153. margin-top: 0;
  1154. height: 100%;
  1155. background-color: white;
  1156. padding: 20px;
  1157. }
  1158. .main-box {
  1159. overflow: hidden;
  1160. display: flex;
  1161. background-color: white;
  1162. padding: 20px 0;
  1163. > div {
  1164. background-color: white;
  1165. }
  1166. .inner-left {
  1167. width: 30%;
  1168. padding: 0 20px;
  1169. border: 1px solid #ddd;
  1170. border-radius: 5px;
  1171. height: calc(100vh - 220px);
  1172. // .canel-style {
  1173. // color: #1890ff;
  1174. // cursor: pointer;
  1175. // padding-left: 10px;
  1176. // }
  1177. }
  1178. .inner-right {
  1179. width: 68%;
  1180. margin-left: 2%;
  1181. overflow-y: auto;
  1182. // border-left: 1px solid #ddd;
  1183. height: calc(100vh - 220px);
  1184. }
  1185. }
  1186. }
  1187. .button-list {
  1188. padding: 30px 0 10px 0;
  1189. display: flex;
  1190. // justify-content: space-between;
  1191. }
  1192. .choice-style {
  1193. background: rgb(255, 255, 255);
  1194. }
  1195. .tree-action {
  1196. bottom: 0;
  1197. width: 100%;
  1198. // border-top: 1px solid #e8e8e8;
  1199. padding: 10px 16px;
  1200. text-align: left;
  1201. left: 0;
  1202. background: #fff;
  1203. border-radius: 0 0 2px 2px;
  1204. }
  1205. .tree-line {
  1206. // .el-tree-node__content {
  1207. // padding-left: 0 !important;
  1208. // }
  1209. .el-tree-node__expand-icon.is-leaf {
  1210. display: none !important;
  1211. }
  1212. .el-tree-node {
  1213. position: relative;
  1214. padding-left: 16px; // 缩进量
  1215. }
  1216. .el-tree-node__children {
  1217. padding-left: 16px; // 缩进量
  1218. }
  1219. // 竖线
  1220. .el-tree-node::before {
  1221. content: "";
  1222. height: 100%;
  1223. width: 1px;
  1224. position: absolute;
  1225. left: -3px;
  1226. top: -17px;
  1227. border-width: 1px;
  1228. border-left: 1px dashed #52627c;
  1229. }
  1230. // 当前层最后一个节点的竖线高度固定
  1231. .el-tree-node:last-child::before {
  1232. height: 38px; // 可以自己调节到合适数值
  1233. }
  1234. // 横线
  1235. .el-tree-node::after {
  1236. content: "";
  1237. width: 24px;
  1238. height: 20px;
  1239. position: absolute;
  1240. left: -3px;
  1241. top: 20px;
  1242. border-width: 1px;
  1243. border-top: 1px dashed #52627c;
  1244. }
  1245. // 去掉最顶层的虚线,放最下面样式才不会被上面的覆盖了
  1246. & > .el-tree-node::after {
  1247. border-top: none;
  1248. }
  1249. & > .el-tree-node::before {
  1250. border-left: none;
  1251. }
  1252. // 展开关闭的icon
  1253. .el-tree-node__expand-icon {
  1254. font-size: 16px;
  1255. // 叶子节点(无子节点)
  1256. &.is-leaf {
  1257. color: transparent;
  1258. // display: none; // 也可以去掉
  1259. }
  1260. }
  1261. }
  1262. </style>