TreeManagement.vue 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330
  1. <template>
  2. <div class="TreeManagement">
  3. <header id="header">
  4. <el-row>
  5. <el-select v-model="id" @change="selectChange" filterable placeholder="请选择分类">
  6. <el-option
  7. v-for="item in options"
  8. :key="item.id"
  9. :label="item.nodeName"
  10. :value="item.id"
  11. ></el-option>
  12. </el-select>
  13. <el-button @click="add_kind" type="primary" class="add_kind">添加分类</el-button>
  14. <el-button @click="edit_kind" type="primary">编辑分类</el-button>
  15. <el-button @click="del_kind" type="danger">删除分类</el-button>
  16. </el-row>
  17. </header>
  18. <hr style="border-top: 2px solid #eee;margin: 10px 0;" />
  19. <section id="section">
  20. <article v-show="id">
  21. <el-button @click="add_catalog" type="primary">添加目录</el-button>
  22. </article>
  23. <el-tree
  24. :data="dataTree"
  25. node-key="id"
  26. default-expand-all
  27. :expand-on-click-node="false"
  28. :props="defaultProps"
  29. >
  30. <span class="custom-tree-node" slot-scope="{ node, data }">
  31. <span>{{ node.label }}</span>
  32. <span class="right">
  33. <el-tooltip effect="dark" content="添加子所属分类" placement="top-start">
  34. <i class="el-icon-folder-add icon" @click="() => add(data)"></i>
  35. </el-tooltip>
  36. <el-tooltip effect="dark" content="编辑此分类" placement="top-start">
  37. <i class="el-icon-edit icon" @click="() => edit(data)" alt="编辑"></i>
  38. </el-tooltip>
  39. <el-tooltip effect="dark" content="删除此分类" placement="top-start">
  40. <i class="el-icon-delete icon" @click="() => del(data)"></i>
  41. </el-tooltip>
  42. </span>
  43. </span>
  44. </el-tree>
  45. </section>
  46. <el-dialog :title="title.title" :visible.sync="showDialog">
  47. <el-row type="flex">
  48. <el-col :span="14">
  49. <el-form ref="form" :model="form" :rules="rules" label-width="140px">
  50. <el-form-item :label="title.nodeName" prop="nodeName">
  51. <el-input v-model="form.nodeName"></el-input>
  52. </el-form-item>
  53. <el-form-item label="配置信息:" prop="meta">
  54. <el-input
  55. v-model="form.meta"
  56. type="textarea"
  57. placeholder="请输入内容,JSON格式"
  58. :autosize="{ minRows: 4 }"
  59. ></el-input>
  60. </el-form-item>
  61. <el-form-item :label="title.code" prop="code">
  62. <el-input v-model="form.code" placeholder="要为这个子节点起个名字吗?"></el-input>
  63. </el-form-item>
  64. <el-form-item>
  65. <el-button @click="showDialog=false">取 消</el-button>
  66. <el-button type="primary" @click="submitForm('form')">保 存</el-button>
  67. </el-form-item>
  68. </el-form>
  69. </el-col>
  70. </el-row>
  71. </el-dialog>
  72. </div>
  73. </template>
  74. <script>
  75. import { mapActions } from "vuex";
  76. // 表单验证规则
  77. const rules = {
  78. nodeName: [{ required: true, message: "请输入节点名称", trigger: "blur" }],
  79. meta: [{ required: true, message: "请输入配置信息", trigger: "blur" }]
  80. };
  81. // tree组件 配置
  82. const defaultProps = { children: "childs", label: "nodeName" };
  83. export default {
  84. name: "TreeManagement",
  85. data() {
  86. return {
  87. options: [],
  88. id: "",
  89. dataTree: [],
  90. defaultProps,
  91. showDialog: false,
  92. form: {
  93. nodeName: "",
  94. meta: "",
  95. code: ""
  96. },
  97. /* 是添加还是编辑状态 { 1:节点后的添加, 2:节点后的编辑, 3:添加分类, 4:编辑分类, 5:删除分类 , 6:添加目录} */
  98. dialogStatus: null,
  99. addOrEditThis: {}, // 保存被点击的 this
  100. title: {
  101. title: "编辑/添加",
  102. nodeName: "节点名称",
  103. code: "节点代号"
  104. },
  105. rules
  106. };
  107. },
  108. created() {
  109. this.getSubNodeList("-1");
  110. },
  111. methods: {
  112. ...mapActions(["fetch"]),
  113. submitForm(formName) {
  114. this.$refs[formName].validate(valid => {
  115. if (valid) {
  116. console.log(this.dyForm);
  117. switch (this.dialogStatus) {
  118. case 1 /* 添加 */:
  119. this.form.parentId = this.addOrEditThis.id;
  120. this.reqSave("/publics/treenode/addNode");
  121. break;
  122. case 2 /* 编辑 */:
  123. this.reqSave("/publics/treenode/updateNode");
  124. break;
  125. case 3 /* 添加分类 */:
  126. this.form.parentId = "-1";
  127. this.reqSave("/publics/treenode/addNode");
  128. break;
  129. case 4 /* 编辑 分类*/:
  130. this.form.id = this.id;
  131. this.reqSave("/publics/treenode/updateNode");
  132. break;
  133. case 6 /* 编辑 分类*/:
  134. this.form.parentId = this.id;
  135. this.reqSave("/publics/treenode/addNode");
  136. break;
  137. default:
  138. this.$message.error(
  139. "没有选中添加编辑项的!操作错误请刷新!"
  140. );
  141. }
  142. } else {
  143. return false;
  144. }
  145. });
  146. },
  147. // 保存事件,包括新增字节点和编辑当前节点
  148. reqSave(api) {
  149. if (!this.form.code) delete this.form.code;
  150. this.fetch({
  151. api,
  152. method: "POST",
  153. data: this.form,
  154. success: res => {
  155. if(this.id)this.getSubNodeList(this.id);
  156. this.getSubNodeList("-1");
  157. this.$message.success(this.title.title + "成功!");
  158. // this.showDialog = false;
  159. },
  160. fail: err => {
  161. if (err.errMsg) this.$message.error(err.errMsg);
  162. else this.$message.error("服务器发生异常");
  163. }
  164. });
  165. },
  166. // 请求 拿到树列表
  167. getSubNodeList(parentId) {
  168. this.fetch({
  169. api: "/publics/treenode/listNodeByParent",
  170. method: "POST",
  171. data: {
  172. parentId,
  173. hasSub: true
  174. },
  175. success: res => {
  176. if (parentId == -1 ) {
  177. this.options = res;
  178. } else {
  179. this.dataTree = res;
  180. }
  181. },
  182. fail: err => {
  183. if (err.errMsg) this.$message.error(err.errMsg);
  184. else this.$message.error("服务器发生异常");
  185. }
  186. });
  187. },
  188. // 添加分类
  189. add_kind() {
  190. this.showDialog = true;
  191. this.dialogStatus = 3;
  192. this.title = {
  193. title: "添加分类",
  194. nodeName: "节点名称",
  195. code: "节点代号"
  196. };
  197. },
  198. // 编辑分类
  199. edit_kind() {
  200. if (!this.id) {
  201. this.$message.warning("请选择要编辑的分类!");
  202. return;
  203. }
  204. this.showDialog = true;
  205. this.dialogStatus = 4;
  206. let findItem = this.options.find(item => item.id == this.id);
  207. if ( findItem.meta && (findItem.meta instanceof Object)) {
  208. findItem.meta = JSON.stringify(findItem.meta, null, 2);
  209. }
  210. this.form = findItem;
  211. this.title = {
  212. title: "编辑分类",
  213. nodeName: "节点名称",
  214. code: "节点代号"
  215. };
  216. },
  217. // 删除分类
  218. del_kind() {
  219. if (!this.id) {
  220. this.$message.warning("请选择要删除的分类!");
  221. return;
  222. }
  223. this.$confirm("确认要删除?")
  224. .then(_ => {
  225. this.dialogStatus = 5;
  226. this.del({ id: this.id });
  227. })
  228. .catch(_ => {});
  229. },
  230. // 添加目录
  231. add_catalog() {
  232. this.showDialog = true;
  233. this.dialogStatus = 6;
  234. this.title = {
  235. title: "添加目录",
  236. nodeName: "节点名称",
  237. code: "节点代号"
  238. };
  239. },
  240. // 选择框改变
  241. selectChange() {
  242. console.log(this.id)
  243. this.getSubNodeList(this.id);
  244. },
  245. // 节点后的添加
  246. add(data) {
  247. console.log(data);
  248. this.showDialog = true;
  249. this.dialogStatus = 1;
  250. this.title = {
  251. title: data.nodeName + ":添加目录",
  252. nodeName: "子节点名称",
  253. code: "子节点代号"
  254. };
  255. this.form.parentId = data.id;
  256. this.addOrEditThis = data; // 保存当前点击者状态
  257. },
  258. // 节点后的编辑
  259. edit(data) {
  260. console.log(data);
  261. this.showDialog = true;
  262. this.dialogStatus = 2;
  263. this.title = {
  264. title: data.nodeName + ":编辑节点",
  265. nodeName: "子节点名称",
  266. code: "子节点代号"
  267. };
  268. this.addOrEditThis = data; // 保存当前点击者状态 此处只为 dialog 的title显示用
  269. delete this.form.parentId;
  270. this.form = {
  271. id: data.id,
  272. nodeName: data.nodeName,
  273. meta: JSON.stringify(data.meta, null, 2),
  274. code: data.code
  275. };
  276. },
  277. // 节点后的删除
  278. del(data) {
  279. this.fetch({
  280. api: "/publics/treenode/deleteNode",
  281. method: "POST",
  282. data: { id: data.id },
  283. success: res => {
  284. this.id = null
  285. this.getSubNodeList("-1");
  286. this.$message.success("删除成功!");
  287. },
  288. fail: err => {
  289. console.log(err);
  290. if (err.errMsg) this.$message.error(err.errMsg);
  291. else this.$message.error("服务器发生异常");
  292. }
  293. });
  294. }
  295. }
  296. };
  297. </script>
  298. <style lang="scss" scoped>
  299. .TreeManagement {
  300. #header {
  301. margin-bottom: 15px;
  302. .add_kind {
  303. margin-left: 20px;
  304. }
  305. }
  306. #section {
  307. .hint {
  308. color: rgb(240, 34, 34);
  309. }
  310. }
  311. }
  312. .custom-tree-node {
  313. flex: 1;
  314. display: flex;
  315. align-items: center;
  316. font-size: 14px;
  317. padding-right: 8px;
  318. .right {
  319. margin-left: 40px;
  320. .icon {
  321. margin-right: 10px;
  322. }
  323. }
  324. }
  325. </style>