index.vue 9.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354
  1. <template>
  2. <div class="bf-permissiontree">
  3. <!-- 权限树 -->
  4. <div class="cont">
  5. <div class="paren_header">
  6. <p class="manageTitle">{{ title }}</p>
  7. </div>
  8. <div class="paren_type">
  9. <ul>
  10. <li>
  11. <div class="log"></div>
  12. <p>时效规则有</p>
  13. </li>
  14. <li>
  15. <div class="log"></div>
  16. <p>数据规则有</p>
  17. </li>
  18. <li>
  19. <div class="log"></div>
  20. <p>显示及编辑权限</p>
  21. </li>
  22. <li>
  23. <div class="log"></div>
  24. <p>显示权限</p>
  25. </li>
  26. </ul>
  27. </div>
  28. <!-- <div class="paren_list">
  29. <ul>
  30. <li v-for="(item, index) in treeTitles" :key="index">
  31. <div
  32. class="up_type"
  33. :class="active === index ? 'up_types' : 'up_type'"
  34. @click="upActive(item, index)"
  35. >
  36. {{ item.AuthName }}
  37. </div>
  38. </li>
  39. </ul>
  40. </div> -->
  41. <div class="paren_cont">
  42. <el-scrollbar style="height: 100%">
  43. <el-tree :data="data" show-checkbox @check-change="currentChange" @node-click="handleNodeClick" :defaultProps="defaultProps" node-key="auth_id" default-expand-all ref="tree" highlight-current>
  44. <span class="custom-tree-node" slot-scope="{ data }">
  45. {{ data.auth_name }}
  46. <div class="logup">
  47. <div class="one" v-if="data.AuthList && data.AuthList.ValidBegin"></div>
  48. <div class="two" v-if="data.AuthList && data.AuthList.Action == '1'"></div>
  49. <div class="four" v-if="data.AuthList && data.AuthList.Action == '2'"></div>
  50. <div class="three" v-if="
  51. data.AuthList &&
  52. (data.AuthList.EditCol ||
  53. data.AuthList.DeleteRow ||
  54. data.AuthList.EditRow ||
  55. data.AuthList.NewCol ||
  56. data.AuthList.QueryCol ||
  57. data.AuthList.QueryRow)
  58. "></div>
  59. </div>
  60. </span>
  61. </el-tree>
  62. </el-scrollbar>
  63. </div>
  64. </div>
  65. </div>
  66. </template>
  67. <script>
  68. // import treeData from "@/views/authorityManagement/minixs/treeData";
  69. import { translateDataToTreeAll, deteleObject } from "@/utils/validate";
  70. import { GetAuthTree } from "@/api/apiAuthority";
  71. import { GetAuthTreeByGroup } from "@/api/AccountGroup";
  72. import { Query, GeneralDataReception } from "@/api/dataIntegration";
  73. import { organizationUptree, postUptree } from "@/api/postInterface";
  74. export default {
  75. props: {
  76. title: {
  77. type: String,
  78. default: "",
  79. },
  80. //查询类型:queryType: all/获取全部权限树;job/根据岗位获取权限树;origin/根据组织获取权限树;group/根据帐号组获取权限树;
  81. queryType: {
  82. type: String,
  83. default: "all",
  84. },
  85. //要查询的查询ID
  86. queryId: {
  87. type: String,
  88. default: "",
  89. },
  90. queryIds: {
  91. type: Array,
  92. default: () => [],
  93. },
  94. //要查询的查询ID
  95. isMainJob: {
  96. type: Boolean,
  97. default: true,
  98. },
  99. },
  100. data () {
  101. return {
  102. active: 0,
  103. data: [],
  104. treeTitles: [],
  105. defaultProps: {
  106. children: "children",
  107. label: "AuthName",
  108. },
  109. searchId: "",
  110. dataObj: {}, //上级权限指定树数据
  111. AuthArrList: [], //权限列表源数据
  112. AuthList: [], //权限规则列表
  113. checkedList: [], //选中的列表
  114. oldType: "",
  115. queryIdArr: [], //历史查询ID
  116. MainJobId: "", //主岗ID
  117. checkedKeys:[]
  118. };
  119. },
  120. watch: {
  121. checkedKeys: {
  122. handler (val) {
  123. this.checkedList = val;
  124. this.$refs.tree.setCheckedKeys(this.checkedList);
  125. },
  126. deep: true,
  127. },
  128. "$store.state.auth.authList": {
  129. handler (val) {
  130. if (val && val.length) {
  131. this.AuthList = val;
  132. this.resetData();
  133. } else {
  134. this.getAuthList();
  135. }
  136. },
  137. immediate: true,
  138. deep: true,
  139. },
  140. queryId: {
  141. handler (val) {
  142. this.searchId = val;
  143. this.getDefaultDataList();
  144. },
  145. immediate: true,
  146. deep: true,
  147. },
  148. queryIds: {
  149. handler () {
  150. this.getDefaultDataList();
  151. },
  152. deep: true,
  153. },
  154. },
  155. created: function () {
  156. this.getDataList();
  157. this.searchId = this.queryId;
  158. },
  159. methods: {
  160. getAuthList () {
  161. let arr = [];
  162. setTimeout(() => {
  163. arr = this.$store.getters.authList;
  164. if (arr && arr.length) {
  165. this.AuthList = arr;
  166. this.resetData();
  167. } else {
  168. this.getAuthList();
  169. }
  170. }, 100);
  171. },
  172. //获取权限列表
  173. async getDataList () {
  174. const res = await Query({
  175. id:40,
  176. dataContent:[""]
  177. });
  178. if (res.code === "0") {
  179. this.setData(res.returnData.listValues);
  180. } else {
  181. this.$message.error(res.message);
  182. this.loading = false;
  183. }
  184. this.setData(res);
  185. },
  186. async getDefaultDataList () {
  187. try {
  188. const res = await Query({
  189. id:42,
  190. dataContent:[this.searchId]
  191. });
  192. if (res.code === "0") {
  193. this.checkedKeys = [];
  194. res.returnData.listValues.forEach(item=>{
  195. this.checkedKeys.push(item.AuthId)
  196. this.AuthArrList.forEach(item2=>{
  197. if(item.AuthId == item2.auth_id){
  198. item2.AuthList = item
  199. }
  200. })
  201. })
  202. this.toTree()
  203. } else {
  204. this.$message.error(res.message);
  205. this.loading = false;
  206. }
  207. } catch (error) {
  208. console.log("出错了", error);
  209. }
  210. },
  211. setData (result) {
  212. if (result.code === "0" && result.returnData.listValues.length) {
  213. this.AuthArrList = [];
  214. result.returnData.listValues.forEach((item) => {
  215. item.flag = item.auth_status === true ? true : false;
  216. item["AuthList"] = null;
  217. });
  218. this.AuthArrList = _.cloneDeep(result.returnData.listValues);
  219. this.toTree();
  220. } else {
  221. this.$message.error(result.message);
  222. }
  223. },
  224. //数据转树形
  225. toTree () {
  226. this.data = [];
  227. this.dataObj = {};
  228. this.treeTitles = [];
  229. let arr = null;
  230. arr = translateDataToTreeAll(this.AuthArrList, "up_auth_id", "auth_id");
  231. let items = null;
  232. items = {
  233. auth_id: 0,
  234. auth_name: "所有权限",
  235. auth_status: 0,
  236. up_auth_id: 0,
  237. auth_type: 0,
  238. children: arr,
  239. };
  240. this.dataObj = _.cloneDeep(items);
  241. this.data = [items];
  242. let obj = null;
  243. obj = _.cloneDeep(items);
  244. let datas = null;
  245. datas = obj.children.filter((item) => item.Type === 1);
  246. datas.forEach((item) => {
  247. delete item.children;
  248. });
  249. delete obj.children;
  250. datas.unshift(obj);
  251. this.treeTitles = datas;
  252. console.log(datas)
  253. if (this.$refs.tree) {
  254. this.$refs.tree.setCheckedKeys(this.checkedList);
  255. }
  256. },
  257. //数据切换
  258. upActive (item, index) {
  259. this.active = index;
  260. this.decompose([this.dataObj], item.AuthId);
  261. this.$refs.tree.setCheckedKeys(this.checkedList);
  262. },
  263. // 树节点选中
  264. currentChange () {
  265. this.checkedList = [];
  266. const arr = this.$refs.tree.getCheckedNodes();
  267. arr.forEach((item) => {
  268. // if(item.disabled==false){
  269. this.checkedList.push(item.AuthId);
  270. // }
  271. });
  272. this.setDataObj(arr);
  273. },
  274. // 选中后设置初始数据
  275. setDataObj (arr) {
  276. arr.forEach((item) => {
  277. if (!item.AuthList) {
  278. item.AuthList = {
  279. AuthId: item.AuthId,
  280. ValidBegin: "",
  281. ValidEnd: "",
  282. Action: "1",
  283. QueryRow: "",
  284. QueryCol: "",
  285. NewCol: "",
  286. EditRow: "",
  287. EditCol: "",
  288. DeleteRow: "",
  289. };
  290. }
  291. });
  292. this.$emit("getTreeData", arr);
  293. },
  294. //获取指定数据
  295. decompose (data, id) {
  296. for (let i = 0; i < data.length; i++) {
  297. if (data[i].auth_id == id) {
  298. this.data = [data[i]];
  299. } else if (data[i].children && data[i].children.length > 0) {
  300. this.decompose(data[i].children, id);
  301. }
  302. }
  303. },
  304. //获取权限规则 从新组合数据
  305. resetData () {
  306. if (this.AuthList) {
  307. this.AuthArrList.forEach((item1) => {
  308. item1["AuthList"] = null;
  309. this.AuthList.forEach((item2) => {
  310. if (item1.auth_id == item2.auth_id) {
  311. item1.AuthList = item2;
  312. }
  313. });
  314. });
  315. }
  316. this.toTree();
  317. },
  318. setUnDisabledData (data) {
  319. const ArrData = _.cloneDeep(data);
  320. this.AuthArrList.forEach((item1) => {
  321. if (this.queryType != "job") {
  322. item1.disabled = true;
  323. }
  324. ArrData.forEach((item2) => {
  325. if (item1.AuthId == item2.AuthId && item1.Type != 1) {
  326. item1.disabled = false;
  327. }
  328. });
  329. });
  330. this.toTree();
  331. },
  332. //获取点击目标
  333. handleNodeClick (data) {
  334. // this.toTree();
  335. const arr = this.$store.getters.authArrs;
  336. console.log(arr)
  337. arr.push(data);
  338. const datas = _.unionBy(arr, "auth_id");
  339. const newDatas = _.cloneDeep(datas);
  340. this.$store.dispatch("auth/changeAuthMsg", newDatas);
  341. this.$store.dispatch("auth/changeAuthArrs", datas);
  342. this.$store.dispatch("auth/changeAuthId", data.auth_id);
  343. },
  344. async setDisabledAll () {
  345. this.AuthArrList.forEach((item) => {
  346. item.disabled = true;
  347. });
  348. },
  349. },
  350. };
  351. </script>
  352. <style lang="scss">
  353. @import "./permissiontree.scss";
  354. </style>