.

src/views/areaManagement/AreaInfo.vue

@@ -11,49 +11,59 @@
             slot="reference"
         ></el-tree>
 
-        <el-dialog title="区域信息管理" :visible.sync="isShowDialog" append-to-body>
+        <el-dialog width="40%" title="区域信息管理" :visible.sync="isShowDialog" append-to-body>
             <el-form :model="formData" label-width="100px">
                 <el-form-item label="所属区域：">
                     <div>
                         <p class="hint" style="color: rgb(250, 80, 61)">提示：选择好后，点击旁白就会选中！</p>
-                        <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-row type="flex">
+                            <el-col :span="9">
+                                <el-cascader
+                                    :options="areaInfoTree"
+                                    :props="{ children: 'children', label: 'name' ,value:'id'}"
+                                    @expand-change="handleChange"
+                                    @change="change"
+                                    :placeholder="cascaderPlaceholder"
+                                ></el-cascader>
+                            </el-col>
+                            <el-col :span="6">
+                                <el-popconfirm
+                                    title="删除此区域信息？"
+                                    @onConfirm="onConfirmDelAll"
+                                    @onCancel="onConfirmDel"
+                                    confirmButtonText="全部删除"
+                                    cancelButtonText="不删除所属区域"
+                                >
+                                    <el-button type="primary" slot="reference">删除此区域</el-button>
+                                </el-popconfirm>
+                            </el-col>
+                        </el-row>
                     </div>
                 </el-form-item>
 
                 <el-form-item label="区域名字：">
-                    <el-input v-model="formData.name" placeholder="请填写区域名字"></el-input>
+                    <el-row type="flex">
+                        <el-col :span="13">
+                            <el-input v-model="formData.name" placeholder="请填写所属区域名"></el-input>
+                        </el-col>
+                    </el-row>
                 </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-popconfirm title="删除此区域信息？" @onConfirm="onConfirmEdit">
-                        <el-button type="primary" slot="reference">修 改</el-button>
-                    </el-popconfirm>
+                    <el-row type="flex">
+                        <el-col :span="4">
+                            <el-button @click="isShowDialog=false">取 消</el-button>
+                        </el-col>
+                        <el-col :span="6">
+                            <el-button type="primary" @click="addAreaInfo">添加所属区域</el-button>
+                        </el-col>
+                        <el-col :span="6">
+                            <el-popconfirm title="删除此区域信息？" @onConfirm="onConfirmEdit">
+                                <el-button type="primary" slot="reference">修 改</el-button>
+                            </el-popconfirm>
+                        </el-col>
+                    </el-row>
                 </el-form-item>
             </el-form>
         </el-dialog>
@@ -69,6 +79,7 @@ export default {
             isShowDialog: false,
             selectArr: [],
             selectList: [],
+            cascaderPlaceholder: "请选择/不选择默认根级",
             formData: {
                 parentId: "-1",
                 name: "",
@@ -124,6 +135,8 @@ export default {
             console.log(value);
             this.formData.parentId = value[value.length - 1];
             console.log("a==>>" + this.formData.parentId);
+            // 级联选择时 因组件限制 需拼接 名字字符串在级联选择器上显示
+            this.findAreaName(value);
         },
         change(value) {
             console.log("aa");
@@ -131,9 +144,36 @@ export default {
             this.formData.parentId = value[value.length - 1];
             console.log("a==>>" + this.formData.parentId);
         },
+        // 级联选择时 因组件限制 需拼接 名字字符串在级联选择器上显示
+        findAreaName(tree) {
+            let i = 0;
+            let tmpStr = "";
+            find(this.areaInfoTree);
+            function find(subTree) {
+                subTree.forEach(item => {
+                    if (item.id == tree[i]) {
+                        tmpStr += item.name + "/";
+                        if (
+                            i < tree.length &&
+                            item.children &&
+                            item.children.length > 0
+                        ) {
+                            i++;
+                            find(item.children);
+                        }
+                    }
+                });
+            }
+            console.log(tmpStr);
+            this.cascaderPlaceholder = tmpStr;
+        },
 
         // 保存区域信息
         addAreaInfo(e) {
+            if (!this.formData.name) {
+                this.$message.error("请填写所属区域名！");
+                return;
+            }
             console.log(this.formData);
             this.fetch({
                 api: "/core/organize-structure/add",
@@ -225,8 +265,8 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.AreaInfo{
-    .top_btn{
+.AreaInfo {
+    .top_btn {
         margin-bottom: 20px;
     }
 }