AreaInfo.vue 10.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274
  1. <template>
  2. <div class="AreaInfo">
  3. <el-button class="top_btn" size="mini" type="primary" @click="isShowDialog=true">区域信息管理</el-button>
  4. <el-tree
  5. class="filter-tree"
  6. :data="areaInfoTree"
  7. :props="defaultProps"
  8. @node-contextmenu="mouseRightCilck"
  9. ref="tree"
  10. slot="reference"
  11. ></el-tree>
  12. <el-dialog width="40%" title="区域信息管理" :visible.sync="isShowDialog" append-to-body>
  13. <el-form :model="formData" label-width="100px">
  14. <el-form-item label="所属区域:">
  15. <div>
  16. <p class="hint" style="color: rgb(250, 80, 61)">提示:选择好后,点击旁白就会选中!</p>
  17. <el-row type="flex">
  18. <el-col :span="9">
  19. <el-cascader
  20. :options="areaInfoTree"
  21. :props="{ children: 'children', label: 'name' ,value:'id'}"
  22. @expand-change="handleChange"
  23. @change="change"
  24. :placeholder="cascaderPlaceholder"
  25. ></el-cascader>
  26. </el-col>
  27. <el-col :span="6">
  28. <el-popconfirm
  29. title="删除此区域信息?"
  30. @onConfirm="onConfirmDelAll"
  31. @onCancel="onConfirmDel"
  32. confirmButtonText="全部删除"
  33. cancelButtonText="不删除所属区域"
  34. >
  35. <el-button type="primary" slot="reference">删除此区域</el-button>
  36. </el-popconfirm>
  37. </el-col>
  38. </el-row>
  39. </div>
  40. </el-form-item>
  41. <el-form-item label="区域名字:">
  42. <el-row type="flex">
  43. <el-col :span="13">
  44. <el-input v-model="formData.name" placeholder="请填写所属区域名"></el-input>
  45. </el-col>
  46. </el-row>
  47. </el-form-item>
  48. <el-form-item>
  49. <el-row type="flex">
  50. <el-col :span="4">
  51. <el-button @click="isShowDialog=false">取 消</el-button>
  52. </el-col>
  53. <el-col :span="6">
  54. <el-button type="primary" @click="addAreaInfo">添加所属区域</el-button>
  55. </el-col>
  56. <el-col :span="6">
  57. <el-popconfirm title="删除此区域信息?" @onConfirm="onConfirmEdit">
  58. <el-button type="primary" slot="reference">修 改</el-button>
  59. </el-popconfirm>
  60. </el-col>
  61. </el-row>
  62. </el-form-item>
  63. </el-form>
  64. </el-dialog>
  65. </div>
  66. </template>
  67. <script>
  68. import { mapActions } from "vuex";
  69. export default {
  70. name: "AreaInfo",
  71. data() {
  72. return {
  73. isShowDialog: false,
  74. selectArr: [],
  75. selectList: [],
  76. cascaderPlaceholder: "请选择/不选择默认根级",
  77. formData: {
  78. parentId: "-1",
  79. name: "",
  80. orgId: "1"
  81. },
  82. areaInfoTree: [], // tree 数据
  83. selectedItem: null,
  84. // tree配置选项
  85. defaultProps: { children: "children", label: "name" }
  86. };
  87. },
  88. mounted() {
  89. this.loadTypes();
  90. },
  91. watch: {},
  92. methods: {
  93. ...mapActions(["fetch"]),
  94. // 加载所有场地信息列表
  95. loadTypes() {
  96. this.fetch({
  97. api: "/core/organize-structure/list",
  98. method: "GET",
  99. data: { orgId: 1 },
  100. success: res => {
  101. this.areaInfoTree = this.findTypesByid(res, -1);
  102. },
  103. fail: err => {
  104. console.log(err);
  105. if (err.errMsg) this.$message.error(err.errMsg);
  106. else this.$message.error("服务器发生异常");
  107. }
  108. });
  109. },
  110. // loadTypes 函数的工具函数
  111. findTypesByid(resArr, pid) {
  112. let temArr = [];
  113. resArr.forEach(item => {
  114. if (item.parentId == pid) {
  115. temArr.push(item);
  116. item.children = this.findTypesByid(resArr, item.id);
  117. }
  118. });
  119. if (temArr.length > 0) return temArr;
  120. },
  121. // 树形节点 鼠标右键点击事件
  122. mouseRightCilck(event, data, Node, me) {
  123. console.log(data);
  124. },
  125. // 级联选择器点击事件
  126. handleChange(value) {
  127. console.log(value);
  128. this.formData.parentId = value[value.length - 1];
  129. console.log("a==>>" + this.formData.parentId);
  130. // 级联选择时 因组件限制 需拼接 名字字符串在级联选择器上显示
  131. this.findAreaName(value);
  132. },
  133. change(value) {
  134. console.log("aa");
  135. console.log(value);
  136. this.formData.parentId = value[value.length - 1];
  137. console.log("a==>>" + this.formData.parentId);
  138. },
  139. // 级联选择时 因组件限制 需拼接 名字字符串在级联选择器上显示
  140. findAreaName(tree) {
  141. let i = 0;
  142. let tmpStr = "";
  143. find(this.areaInfoTree);
  144. function find(subTree) {
  145. subTree.forEach(item => {
  146. if (item.id == tree[i]) {
  147. tmpStr += item.name + "/";
  148. if (
  149. i < tree.length &&
  150. item.children &&
  151. item.children.length > 0
  152. ) {
  153. i++;
  154. find(item.children);
  155. }
  156. }
  157. });
  158. }
  159. console.log(tmpStr);
  160. this.cascaderPlaceholder = tmpStr;
  161. },
  162. // 保存区域信息
  163. addAreaInfo(e) {
  164. if (!this.formData.name) {
  165. this.$message.error("请填写所属区域名!");
  166. return;
  167. }
  168. console.log(this.formData);
  169. this.fetch({
  170. api: "/core/organize-structure/add",
  171. method: "POST",
  172. data: this.formData,
  173. success: res => {
  174. console.log(res);
  175. this.$message.success("添加成功!");
  176. this.formData.name = "";
  177. // 加载所有场地信息列表
  178. this.loadTypes();
  179. },
  180. fail: err => {
  181. console.log(err);
  182. if (err.errMsg) this.$message.error(err.errMsg);
  183. else this.$message.error("服务器发生异常");
  184. }
  185. });
  186. },
  187. // 删除区域信息(删除子节点)
  188. onConfirmDelAll() {
  189. console.log("删除区域信息(删除子节点)");
  190. const url = "/core/organize-structure/delete-refer";
  191. const id = this.formData.parentId;
  192. if (id) {
  193. this.doDel(url, id);
  194. } else {
  195. this.$message.fail("没有选择对应要删除的区域");
  196. }
  197. },
  198. // 删除区域信息(不删除子节点)
  199. onConfirmDel() {
  200. console.log("删除区域信息(不删除子节点)");
  201. const url = "/core/organize-structure/delete";
  202. const id = this.formData.parentId;
  203. if (id) {
  204. this.doDel(url, id);
  205. } else {
  206. this.$message.fail("没有选择对应要删除的区域");
  207. }
  208. },
  209. // 删除区域信息 总函数
  210. doDel(url, id) {
  211. console.log("ID===>>>" + id);
  212. this.fetch({
  213. api: url,
  214. method: "POST",
  215. data: { id },
  216. success: res => {},
  217. fail: err => {
  218. console.log(err);
  219. if (err.errCode == 200) {
  220. // 加载所有场地信息列表
  221. this.loadTypes();
  222. this.$message.success(err.errMsg);
  223. } else if (err.errMsg) {
  224. this.$message.error(err.errMsg);
  225. } else this.$message.error("服务器发生异常");
  226. }
  227. });
  228. },
  229. // 确认修改
  230. onConfirmEdit() {
  231. const id = this.formData.parentId;
  232. const name = this.formData.name;
  233. if (!name) {
  234. this.$message.warning("区域名字不能为空!");
  235. return;
  236. }
  237. this.fetch({
  238. api: "/core/organize-structure/update",
  239. method: "POST",
  240. data: { id, name },
  241. success: res => {
  242. console.log(res);
  243. // 加载所有场地信息列表
  244. this.loadTypes();
  245. this.$message.success("编辑区域信息成功!");
  246. },
  247. fail: err => {
  248. console.log(err);
  249. if (err.errMsg) this.$message.error(err.errMsg);
  250. else this.$message.error("服务器发生异常");
  251. }
  252. });
  253. }
  254. }
  255. };
  256. </script>
  257. <style lang="scss" scoped>
  258. .AreaInfo {
  259. .top_btn {
  260. margin-bottom: 20px;
  261. }
  262. }
  263. </style>