|
|
@@ -0,0 +1,199 @@
|
|
|
+
|
|
|
+
|
|
|
+<template>
|
|
|
+ <div class="AreaInfo">
|
|
|
+ <el-button size="mini" type="primary" @click="isShowDialog=true">添加区域信息</el-button>
|
|
|
+
|
|
|
+ <el-tree
|
|
|
+ class="filter-tree"
|
|
|
+ :data="areaInfoTree"
|
|
|
+ :props="defaultProps"
|
|
|
+ @node-contextmenu="mouseRightCilck"
|
|
|
+ ref="tree"
|
|
|
+ slot="reference"
|
|
|
+ ></el-tree>
|
|
|
+
|
|
|
+ <el-dialog title="添加区域信息" :visible.sync="isShowDialog" append-to-body>
|
|
|
+ <el-form :model="formData" label-width="100px">
|
|
|
+ <el-form-item label="所属区域：" >
|
|
|
+ <el-cascader
|
|
|
+ :options="areaInfoTree"
|
|
|
+ :props="{ children: 'children', label: 'name' ,value:'id'}"
|
|
|
+ @expand-change="handleChange"
|
|
|
+ @change="change"
|
|
|
+ placeholder="请选择/不选择默认根级"
|
|
|
+ ></el-cascader>
|
|
|
+
|
|
|
+ <!-- <el-select v-model="formData.area" placeholder="请选择所属区域">
|
|
|
+ <el-option label="区域一" value="1"></el-option>
|
|
|
+ </el-select>-->
|
|
|
+ <el-popconfirm
|
|
|
+ title="删除此区域信息？"
|
|
|
+ @onConfirm="onConfirmDelAll"
|
|
|
+ @onCancel="onConfirmDel"
|
|
|
+ confirmButtonText="全部删除"
|
|
|
+ cancelButtonText="不删除所属区域"
|
|
|
+ >
|
|
|
+ <el-button type="primary" slot="reference">删除此区域</el-button>
|
|
|
+ </el-popconfirm>
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <el-form-item label="区域名字：">
|
|
|
+ <el-input v-model="formData.name" placeholder="请填写区域名字"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="组织id：">
|
|
|
+ <el-select v-model="formData.orgId" placeholder="请选择所属组织" disabled>
|
|
|
+ <el-option label="组织一" value="1"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <el-form-item>
|
|
|
+ <el-button @click="isShowDialog=false">取 消</el-button>
|
|
|
+ <el-button type="primary" @click="addAreaInfo">添 加</el-button>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ </el-dialog>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+import { mapActions } from "vuex";
|
|
|
+
|
|
|
+export default {
|
|
|
+ name: "AreaInfo",
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ isShowDialog: false,
|
|
|
+ selectArr: [],
|
|
|
+ selectList: [],
|
|
|
+ formData: {
|
|
|
+ parentId: "-1",
|
|
|
+ name: "",
|
|
|
+ orgId: "1"
|
|
|
+ },
|
|
|
+ areaInfoTree: [], // tree 数据
|
|
|
+ selectedItem: null,
|
|
|
+ // tree配置选项
|
|
|
+ defaultProps: { children: "children", label: "name" }
|
|
|
+ };
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.loadTypes();
|
|
|
+ },
|
|
|
+ watch: {},
|
|
|
+ methods: {
|
|
|
+ ...mapActions(["fetch"]),
|
|
|
+ // 加载所有场地信息列表
|
|
|
+ loadTypes() {
|
|
|
+ this.fetch({
|
|
|
+ api: "/core/organize-structure/list",
|
|
|
+ method: "GET",
|
|
|
+ data: { orgId: 1 },
|
|
|
+ success: res => {
|
|
|
+ this.areaInfoTree = this.findTypesByid(res, -1);
|
|
|
+ },
|
|
|
+ fail: err => {
|
|
|
+ console.log(err);
|
|
|
+ if (err.errMsg) this.$message.error(err.errMsg);
|
|
|
+ else this.$message.error("服务器发生异常");
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // loadTypes 函数的工具函数
|
|
|
+ findTypesByid(resArr, pid) {
|
|
|
+ let temArr = [];
|
|
|
+ resArr.forEach(item => {
|
|
|
+ if (item.parentId == pid) {
|
|
|
+ temArr.push(item);
|
|
|
+ item.children = this.findTypesByid(resArr, item.id);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ if (temArr.length > 0) return temArr;
|
|
|
+ },
|
|
|
+
|
|
|
+ // 树形节点 鼠标右键点击事件
|
|
|
+ mouseRightCilck(event, data, Node, me) {
|
|
|
+ console.log(data);
|
|
|
+ },
|
|
|
+
|
|
|
+ // 级联选择器点击事件
|
|
|
+ handleChange(value) {
|
|
|
+ console.log(value);
|
|
|
+ this.formData.parentId = value[value.length - 1];
|
|
|
+ console.log("a==>>" + this.formData.parentId);
|
|
|
+ },
|
|
|
+ change(value) {
|
|
|
+ console.log("aa");
|
|
|
+ console.log(value);
|
|
|
+ this.formData.parentId = value[value.length - 1];
|
|
|
+ console.log("a==>>" + this.formData.parentId);
|
|
|
+ },
|
|
|
+
|
|
|
+ // 保存区域信息
|
|
|
+ addAreaInfo(e) {
|
|
|
+ console.log(this.formData);
|
|
|
+ this.fetch({
|
|
|
+ api: "/core/organize-structure/add",
|
|
|
+ method: "POST",
|
|
|
+ data: this.formData,
|
|
|
+ success: res => {
|
|
|
+ console.log(res);
|
|
|
+ this.$message.success("保存成功");
|
|
|
+ // 加载所有场地信息列表
|
|
|
+ loadTypes();
|
|
|
+ },
|
|
|
+ fail: err => {
|
|
|
+ console.log(err);
|
|
|
+ if (err.errMsg) this.$message.error(err.errMsg);
|
|
|
+ else this.$message.error("服务器发生异常");
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 删除区域信息（删除子节点）
|
|
|
+ onConfirmDelAll() {
|
|
|
+ console.log("删除区域信息（删除子节点）");
|
|
|
+ const url = "/core/organize-structure/delete-refer";
|
|
|
+ const id = this.formData.parentId;
|
|
|
+ if (id) {
|
|
|
+ this.doDel(url, id);
|
|
|
+ } else {
|
|
|
+ this.$message.fail("没有选择对应要删除的区域");
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 删除区域信息（不删除子节点）
|
|
|
+ onConfirmDel() {
|
|
|
+ console.log("删除区域信息（不删除子节点）");
|
|
|
+ const url = "/core/organize-structure/delete";
|
|
|
+ const id = this.formData.parentId;
|
|
|
+ if (id) {
|
|
|
+ this.doDel(url, id);
|
|
|
+ } else {
|
|
|
+ this.$message.fail("没有选择对应要删除的区域");
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 删除区域信息 总函数
|
|
|
+ doDel(url, id) {
|
|
|
+ console.log("ID===>>>" + id);
|
|
|
+ this.fetch({
|
|
|
+ api: url,
|
|
|
+ method: "POST",
|
|
|
+ data: { id },
|
|
|
+ success: res => {
|
|
|
+ console.log(res);
|
|
|
+ this.$message.success("删除区域信息成功！");
|
|
|
+ // 加载所有场地信息列表
|
|
|
+ this.loadTypes();
|
|
|
+ },
|
|
|
+ fail: err => {
|
|
|
+ console.log(err);
|
|
|
+ if (err.errMsg) this.$message.error(err.errMsg);
|
|
|
+ else this.$message.error("服务器发生异常");
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+</style>
|
|
|
+
|
linan