dataInfo.vue 19 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663
  1. <template>
  2. <div class="data-info">
  3. <el-card>
  4. <el-form
  5. :model="dataForm"
  6. :rules="dataRule"
  7. ref="dataRef"
  8. label-width="140px"
  9. >
  10. <el-form-item label="角色名称:" prop="name">
  11. <el-input v-model="dataForm.name"></el-input>
  12. </el-form-item>
  13. <el-form-item label="是否为管理员:" prop="is_admin">
  14. <el-select
  15. v-model="dataForm.is_admin"
  16. placeholder="请选择是否为管理员"
  17. size="large"
  18. style="width: 100%"
  19. @change="selChange"
  20. >
  21. <el-option
  22. v-for="item in adminOptions"
  23. :key="item.status"
  24. :label="item.name"
  25. :value="item.status"
  26. />
  27. </el-select>
  28. </el-form-item>
  29. <el-row>
  30. <el-col :span="6">
  31. <el-form-item label="权限配置:">
  32. <div
  33. style="
  34. width: 100%;
  35. height: 300px;
  36. overflow: hidden;
  37. overflow-y: auto;
  38. padding: 10px;
  39. "
  40. >
  41. <el-checkbox
  42. v-model="allChecked.nodeTree"
  43. @change="(val) => handleCheckAllChange('nodeTree', val)"
  44. >全选</el-checkbox
  45. >
  46. <el-tree
  47. ref="nodeTree"
  48. style="max-width: 600px"
  49. :props="treeProps"
  50. :data="treeData"
  51. default-expand-all
  52. node-key="value"
  53. show-checkbox
  54. @check="handleNodeCheck"
  55. />
  56. </div>
  57. </el-form-item>
  58. </el-col>
  59. <el-col :span="6">
  60. <el-form-item label="模板分类授权:">
  61. <div
  62. style="
  63. width: 100%;
  64. height: 150px;
  65. overflow: hidden;
  66. overflow-y: auto;
  67. padding: 10px;
  68. "
  69. >
  70. <el-tree
  71. ref="templateCate"
  72. style="max-width: 600px"
  73. :props="defaultProps"
  74. :data="templateCate"
  75. default-expand-all
  76. node-key="id"
  77. :default-checked-keys="defaultCheckedKeys.templateCate"
  78. show-checkbox
  79. @check="handleTemplateCheck"
  80. />
  81. </div>
  82. </el-form-item>
  83. </el-col>
  84. <el-col :span="6">
  85. <el-form-item label="文档分类授权:">
  86. <div
  87. style="
  88. width: 100%;
  89. height: 150px;
  90. overflow: hidden;
  91. overflow-y: auto;
  92. padding: 10px;
  93. "
  94. >
  95. <el-tree
  96. ref="docCate"
  97. style="max-width: 600px"
  98. :props="defaultProps"
  99. :data="documentCate"
  100. default-expand-all
  101. :default-checked-keys="defaultCheckedKeys.documentCate"
  102. node-key="id"
  103. show-checkbox
  104. @check="handleDocCheck"
  105. />
  106. </div>
  107. </el-form-item>
  108. </el-col>
  109. <el-col :span="6">
  110. <el-form-item label="原始数据分类授权:">
  111. <div
  112. style="
  113. width: 100%;
  114. height: 150px;
  115. overflow: hidden;
  116. overflow-y: auto;
  117. padding: 10px;
  118. "
  119. >
  120. <el-tree
  121. ref="sourceDataTree"
  122. style="max-width: 600px"
  123. :props="defaultProps"
  124. :data="sourceDataCate"
  125. default-expand-all
  126. node-key="id"
  127. show-checkbox
  128. :default-checked-keys="defaultCheckedKeys.sourceDataCate"
  129. @check="handleSourceDataCheck"
  130. />
  131. </div>
  132. </el-form-item>
  133. </el-col>
  134. </el-row>
  135. <el-form-item label="角色状态:">
  136. <el-select
  137. v-model="dataForm.status"
  138. placeholder="请选择状态"
  139. size="large"
  140. style="width: 100%"
  141. >
  142. <el-option
  143. v-for="item in statusOptions"
  144. :key="item.status"
  145. :label="item.name"
  146. :value="item.status"
  147. />
  148. </el-select>
  149. </el-form-item>
  150. <el-form-item label="介绍:">
  151. <el-input type="textarea" v-model="dataForm.intro"></el-input>
  152. </el-form-item>
  153. </el-form>
  154. </el-card>
  155. <div style="text-align: right; margin-top: 20px">
  156. <el-button type="warning" @click="btnSave">确认保存</el-button>
  157. </div>
  158. </div>
  159. </template>
  160. <script>
  161. import {
  162. createAdminRole,
  163. updateAdminRole,
  164. getAdminRoleInfo,
  165. selectPermissions,
  166. } from "@/api/AdminRole";
  167. import { searchDocumentCategory } from "@/api/document";
  168. import { searchSourceDataCategory } from "@/api/sourceData";
  169. import { searchAdminAuth } from "@/api/AdminAuth";
  170. import { getAllCategory } from "@/api/template";
  171. export default {
  172. emits: ["onClose"],
  173. props: {
  174. dataId: {
  175. type: Number,
  176. default: 0,
  177. },
  178. },
  179. watch: {
  180. dataId: {
  181. handler(v) {
  182. let _this = this;
  183. if (v == null || v <= 0) return;
  184. _this.getInfo(v);
  185. },
  186. immediate: true,
  187. deep: true,
  188. },
  189. },
  190. data() {
  191. return {
  192. activeName: "base",
  193. treeProps: {
  194. children: "children",
  195. label: "label",
  196. },
  197. defaultProps: {
  198. children: "children",
  199. label: "codename",
  200. },
  201. treeData: [],
  202. dataForm: {
  203. id: "",
  204. name: "",
  205. is_admin: "",
  206. intro: "",
  207. status: 5,
  208. },
  209. statusOptions: [
  210. {
  211. status: 5,
  212. name: "启用",
  213. },
  214. {
  215. status: 6,
  216. name: "禁用",
  217. },
  218. ],
  219. adminOptions: [
  220. {
  221. status: 1,
  222. name: "是",
  223. },
  224. {
  225. status: 2,
  226. name: "否",
  227. },
  228. ],
  229. pickedItem: [],
  230. templateCate: [],
  231. documentCate: [],
  232. sourceDataCate: [],
  233. allChecked: {
  234. nodeTree: false,
  235. templateCate: false,
  236. docCate: false,
  237. sourceDataTree: false,
  238. },
  239. defaultCheckedKeys: {
  240. templateCate: [],
  241. documentCate: [],
  242. sourceDataTree: [],
  243. },
  244. dataRule: {
  245. name: [
  246. { required: true, message: "请输入角色名称", trigger: "blur" },
  247. ],
  248. is_admin: [
  249. { required: true, message: "请选择是否为管理员", trigger: "change" },
  250. ],
  251. },
  252. };
  253. },
  254. mounted() {
  255. this.initNodeList();
  256. this.initTemplateCate();
  257. this.initDocCategory();
  258. this.initSourceDataCate();
  259. },
  260. methods: {
  261. /* 管理选选择 */
  262. selChange(val) {
  263. if (val == 1) {
  264. this.handleCheckAllChange("nodeTree", true);
  265. this.handleTemplateAllChange(true);
  266. this.handleSourceDataAllChange(true);
  267. this.handleDocumentCateAllChange(true);
  268. } else {
  269. this.handleCheckAllChange("nodeTree", false);
  270. this.handleTemplateAllChange(false);
  271. this.handleSourceDataAllChange(false);
  272. this.handleDocumentCateAllChange(false);
  273. }
  274. },
  275. handleTemplateAllChange(checked) {
  276. const tree = this.$refs.templateCate;
  277. if (checked) {
  278. this.defaultCheckedKeys.templateCate = [1, 2, 3, 4];
  279. tree.setCheckedKeys(this.defaultCheckedKeys.templateCate);
  280. } else {
  281. this.defaultCheckedKeys.templateCate = [];
  282. tree.setCheckedKeys([]);
  283. }
  284. this.allChecked.templateCate = checked;
  285. },
  286. /* 全选原始数据分类 */
  287. handleSourceDataAllChange(checked) {
  288. const tree = this.$refs.sourceDataTree;
  289. if (checked) {
  290. this.defaultCheckedKeys.sourceDataCate = [9, 10, 11, 12];
  291. tree.setCheckedKeys(this.defaultCheckedKeys.sourceDataCate);
  292. } else {
  293. this.defaultCheckedKeys.sourceDataCate = [];
  294. tree.setCheckedKeys([]);
  295. }
  296. this.allChecked.sourceDataTree = checked;
  297. },
  298. handleDocumentCateAllChange(checked) {
  299. const tree = this.$refs.docCate;
  300. if (checked) {
  301. this.defaultCheckedKeys.documentCate = [5, 6, 7, 8];
  302. tree.setCheckedKeys(this.defaultCheckedKeys.documentCate);
  303. } else {
  304. this.defaultCheckedKeys.documentCate = [];
  305. tree.setCheckedKeys([]);
  306. }
  307. this.allChecked.docCate = checked;
  308. },
  309. handleSourceDataCheck() {
  310. const tree = this.$refs.sourceDataTree;
  311. console.log(tree);
  312. const checkedCount = tree.getCheckedNodes(true).length;
  313. const totalCount = this.countAllNodes(this.sourceDataCate);
  314. this.allChecked.sourceDataTree =
  315. checkedCount === totalCount && totalCount > 0;
  316. },
  317. /* 原始数据分类 */
  318. initSourceDataCate() {
  319. let _this = this;
  320. selectPermissions({ content_type_id: 3 }).then((res) => {
  321. if (res.status !== 200) return;
  322. _this.sourceDataCate = res.data;
  323. });
  324. },
  325. /* 全选文档分类 */
  326. handleDocAllChange(treeRef) {
  327. const tree = this.$refs[treeRef];
  328. const data = this.documentCate;
  329. tree.setCheckedNodes(
  330. this.allChecked[treeRef] ? this.flattenTree(data) : []
  331. );
  332. },
  333. handleDocCheck() {
  334. const tree = this.$refs.docCate;
  335. const checkedCount = tree.getCheckedNodes(true).length;
  336. const totalCount = this.countAllNodes(this.documentCate);
  337. this.allChecked.docCate = checkedCount === totalCount && totalCount > 0;
  338. },
  339. /* 文档分类 */
  340. initDocCategory() {
  341. let _this = this;
  342. selectPermissions({ content_type_id: 2 }).then((res) => {
  343. if (res.status !== 200) return;
  344. _this.documentCate = res.data;
  345. });
  346. /* searchDocumentCategory({ page: 1, pageSize: 9999, status: 5 }).then(
  347. (res) => {
  348. if (res.status != 200) return;
  349. _this.documentCate = [
  350. {
  351. action: "view",
  352. type: "docCate",
  353. isMain: true,
  354. name: "查看",
  355. label: "查看",
  356. },
  357. {
  358. action: "create",
  359. type: "docCate",
  360. isMain: true,
  361. name: "创建",
  362. label: "创建",
  363. },
  364. {
  365. action: "edit",
  366. type: "docCateg",
  367. isMain: true,
  368. name: "编辑",
  369. label: "编辑",
  370. },
  371. {
  372. action: "delete",
  373. type: "docCateg",
  374. isMain: true,
  375. name: "删除",
  376. label: "删除",
  377. },
  378. ];
  379. }
  380. ); */
  381. },
  382. /* 全选模版分类
  383. handleTemplateAllChange(treeRef) {
  384. const tree = this.$refs[treeRef];
  385. const data = this.templateCate;
  386. tree.setCheckedNodes(
  387. this.allChecked[treeRef] ? this.flattenTree(data) : []
  388. );
  389. },*/
  390. handleTemplateCheck() {
  391. const tree = this.$refs.templateCate;
  392. const checkedCount = tree.getCheckedNodes(true).length;
  393. const totalCount = this.countAllNodes(this.templateCate);
  394. this.allChecked.templateCate =
  395. checkedCount === totalCount && totalCount > 0;
  396. },
  397. flattenTree(tree) {
  398. return tree.reduce((acc, node) => {
  399. if (node.children && node.children.length > 0) {
  400. return [...acc, node, ...this.flattenTree(node.children)];
  401. }
  402. return [...acc, node];
  403. }, []);
  404. },
  405. countAllNodes(nodes) {
  406. return nodes.reduce((count, node) => {
  407. if (node.children && node.children.length > 0) {
  408. return count + 1 + this.countAllNodes(node.children);
  409. }
  410. return count + 1;
  411. }, 0);
  412. },
  413. //初始化模板分类
  414. initTemplateCate() {
  415. let _this = this;
  416. selectPermissions({ content_type_id: 1 }).then((res) => {
  417. if (res.status !== 200) return;
  418. _this.templateCate = res.data;
  419. });
  420. },
  421. /* 权限配置全选 */
  422. handleCheckAllChange(treeRef, checked = true) {
  423. const tree = this.$refs[treeRef];
  424. tree.setCheckedNodes(checked ? this.treeData : []);
  425. this.allChecked.nodeTree = checked;
  426. },
  427. handleNodeCheck() {
  428. const tree = this.$refs.nodeTree;
  429. const checkedCount = tree.getCheckedNodes().length;
  430. const totalCount = this.countAllNodes(this.treeData);
  431. this.allChecked.nodeTree = checkedCount === totalCount;
  432. },
  433. countAllNodes(nodes) {
  434. let count = 0;
  435. for (const node of nodes) {
  436. count++;
  437. if (node.children) {
  438. count += this.countAllNodes(node.children);
  439. }
  440. }
  441. return count;
  442. },
  443. /* 权限配置 */
  444. initNodeList() {
  445. let _this = this;
  446. searchAdminAuth({ page: 1, pageSize: 999, status: 5 }).then((res) => {
  447. if (res.status != 200) {
  448. _this.treeData = [];
  449. return;
  450. }
  451. /* let dataList=this.$store.state.user.authList {
  452. value: 5,
  453. label: "产品管理",
  454. children: [],
  455. sub: false,
  456. },{
  457. value: 1,
  458. label: "项目管理",
  459. children: [],
  460. sub: false,
  461. },*/
  462. let data = [
  463. {
  464. value: 4,
  465. label: "客户管理",
  466. children: [],
  467. sub: false,
  468. },
  469. {
  470. value: 10,
  471. label: "文档管理",
  472. children: [],
  473. sub: false,
  474. },
  475. {
  476. value: 32,
  477. label: "知识库管理",
  478. children: [],
  479. sub: false,
  480. },
  481. {
  482. value: 37,
  483. label: "小程序管理",
  484. children: [],
  485. sub: false,
  486. },
  487. {
  488. value: 21,
  489. label: "系统设置",
  490. children: [],
  491. sub: false,
  492. },
  493. ];
  494. let viewAuth = res.data.filter(
  495. (o) => o.parent_id != 99 && o.parent_id != 999
  496. );
  497. let controlAuth = res.data.filter((o) => o.parent_id == 999);
  498. let items = [];
  499. data.map((item) => {
  500. item.children = viewAuth
  501. .filter((o) => o.parent_id == item.value)
  502. .map((subItem) => {
  503. let sub = {
  504. value: subItem.id,
  505. label: subItem.name,
  506. sub: true,
  507. children: controlAuth
  508. .filter((o) => o.parent_id == subItem.id)
  509. .map((res) => {
  510. let item = {
  511. value: res.id,
  512. label: res.name,
  513. sub: true,
  514. };
  515. return item;
  516. }),
  517. };
  518. return sub;
  519. });
  520. if (item.children.length > 0) {
  521. items.push(item);
  522. }
  523. });
  524. _this.treeData = items;
  525. });
  526. },
  527. //保存更新
  528. btnSave(e) {
  529. let _this = this;
  530. _this.$refs.dataRef.validate((valid) => {
  531. if (valid) {
  532. let items = _this.$refs.nodeTree.getCheckedNodes();
  533. let templateCate = _this.$refs.templateCate.getCheckedNodes();
  534. let docCate = _this.$refs.docCate.getCheckedNodes();
  535. let sourceDataTree = _this.$refs.sourceDataTree.getCheckedNodes();
  536. let operation_id;
  537. templateCate = templateCate.map((el) => {
  538. operation_id = el.id;
  539. return { operation_id: el.id };
  540. });
  541. docCate = docCate.map((el) => {
  542. el.operation_id = el.id;
  543. return { operation_id: el.id };
  544. });
  545. sourceDataTree = sourceDataTree.map((el) => {
  546. el.operation_id = el.id;
  547. return { operation_id: el.id };
  548. });
  549. _this.dataForm.template_cate_auth = JSON.stringify(templateCate);
  550. _this.dataForm.doc_cate_auth = JSON.stringify(docCate);
  551. _this.dataForm.source_cate_auth = JSON.stringify(sourceDataTree);
  552. let pickedItem = items.filter((o) => o.sub == true);
  553. _this.dataForm.authList = JSON.stringify(pickedItem);
  554. let data = { ..._this.dataForm };
  555. data.attrs = JSON.stringify(data.attrs);
  556. if (_this.dataForm.id > 0) {
  557. updateAdminRole(data).then((res) => {
  558. if (res.status != 200) return;
  559. _this.$alert("更新角色信息成功");
  560. _this.$router.push({
  561. path: "/system/role/index",
  562. });
  563. _this.$emit("onClose");
  564. });
  565. } else {
  566. createAdminRole(data).then((res) => {
  567. if (res.status != 200) return;
  568. _this.$alert("创建角色信息成功");
  569. _this.$router.push({
  570. path: "/system/role/index",
  571. });
  572. _this.$emit("onClose");
  573. });
  574. }
  575. }
  576. });
  577. },
  578. //产品详情
  579. getInfo(id) {
  580. let _this = this;
  581. let par = {
  582. id: id,
  583. };
  584. getAdminRoleInfo(par).then((res) => {
  585. if (!res) return;
  586. if (res.status != 200) return;
  587. _this.dataForm = res.data.info;
  588. if (res.data.menuList.length > 0) {
  589. res.data.menuList.map((el) => {
  590. el.label = el.name;
  591. el.value = el.id;
  592. });
  593. _this.$refs.nodeTree.setCheckedNodes(res.data.menuList);
  594. } else {
  595. _this.$refs.nodeTree.setCheckedNodes([]);
  596. }
  597. let tempCate = res.data.templateCategoryUsers; //JSON.parse();
  598. if (tempCate.length > 0) {
  599. _this.$refs.templateCate.setCheckedKeys(
  600. tempCate.map((el) => (el.type == 1 ? el.id : ""))
  601. );
  602. } else {
  603. _this.$refs.templateCate.setCheckedKeys([]);
  604. }
  605. let sourceCate = res.data.source_cate_auth; //JSON.parse();
  606. if (sourceCate.length > 0) {
  607. _this.$refs.sourceDataTree.setCheckedKeys(
  608. sourceCate.map((el) => (el.type == 1 ? el.id : ""))
  609. );
  610. } else {
  611. _this.$refs.sourceDataTree.setCheckedKeys([]);
  612. }
  613. // 设置文档分类树的默认选中节点
  614. let docCate = res.data.doc_cate_auth;
  615. if (docCate.length > 0) {
  616. _this.$refs.docCate.setCheckedKeys(
  617. docCate.map((el) => (el.type == 1 ? el.id : ""))
  618. );
  619. } else {
  620. _this.$refs.docCate.setCheckedKeys([]);
  621. }
  622. // _this.$refs.docCate.setCheckedNodes(JSON.parse(res.data.doc_cate_auth));
  623. // _this.$refs.sourceDataTree.setCheckedNodes(JSON.parse(res.data.source_cate_auth));
  624. });
  625. },
  626. onChangeStatus(e) {
  627. this.dataForm.status = e;
  628. },
  629. },
  630. };
  631. </script>
  632. <style lang="scss">
  633. @import "./dataInfo.scss";
  634. </style>