diff --git a/ruoyi-admin/src/main/resources/templates/system/dept/add.html b/ruoyi-admin/src/main/resources/templates/system/dept/add.html
index 7edd853..be1933c 100644
--- a/ruoyi-admin/src/main/resources/templates/system/dept/add.html
+++ b/ruoyi-admin/src/main/resources/templates/system/dept/add.html
@@ -4,7 +4,7 @@
 	<th:block th:include="include :: header('新增部门')" />
 </head>
 <body class="white-bg">
-	<div class="wrapper wrapper-content animated fadeInRight ibox-content">
+	<div class="wrapper wrapper-content animated fadeInRight ibox-content" id="app">
 		<form class="form-horizontal m" id="form-dept-add">
 			<input id="treeId" name="parentId" type="hidden" th:value="${dept?.deptId}"   />
 			<div class="form-group">
@@ -17,15 +17,25 @@
 				</div>
 			</div>
 			<div class="form-group">
-				<label class="col-sm-3 control-label is-required">所属市州：</label>
+				<label class="col-sm-3 control-label is-required">所属地市：</label>
 				<div class="col-sm-8">
-					<input class="form-control" type="text" name="framework" id="framework" required>
+					<select id="City" name="framework" required @change="getAreaList()" v-model="City" class="form-control m-b">
+						<option value="">请选择</option>
+						<option v-for="option in CityList" :value="option.id" :key="option.id">
+							{{ option.name }}
+						</option>
+					</select>
 				</div>
 			</div>
 			<div class="form-group">
 				<label class="col-sm-3 control-label is-required">所属区县：</label>
 				<div class="col-sm-8">
-					<input class="form-control" type="text" name="area" id="area" required>
+					<select id="Area" name="area" required v-model="Area" class="form-control m-b">
+						<option value="">请选择</option>
+						<option v-for="option in AreaList" :value="option.id" :key="option.id">
+							{{ option.name }}
+						</option>
+					</select>
 				</div>
 			</div>
 			<div class="form-group">
@@ -72,7 +82,48 @@
 	<th:block th:include="include :: footer" />
 	<script type="text/javascript">
 		var prefix = ctx + "system/dept";
-		
+		var app = new Vue({
+			el: '#app',
+			data: {
+				CityList: [],
+				AreaList:[],
+				City:'',
+				Area:'',
+				params:{
+					parentId:'',
+				}
+			},
+			mounted(){
+				// 初始化地市列表
+				this.getCityList();
+				if (this.City){
+					this.getAreaList()
+				}
+			},
+			methods:{
+				getCityList(){
+					$.ajax({
+						url: ctx + "system/area/getSysAreaList",
+						type: 'GET',
+						data:this.params ,
+						success:((res)=>{
+							this.CityList = res.data
+						}) ,
+					});
+				},
+				getAreaList(){
+					this.params.parentId = this.City
+					$.ajax({
+						url: ctx + "system/area/getSysAreaList",
+						type: 'GET',
+						data:this.params,
+						success:((res)=>{
+							this.AreaList = res.data
+						}) ,
+					});
+				}
+			}
+		})
 		$("#form-dept-add").validate({
 			onkeyup: false,
 			rules:{
@@ -108,13 +159,13 @@
 		    },
 		    focusCleanup: true
 		});
-		
+
 		function submitHandler() {
 	        if ($.validate.form()) {
 	        	$.operate.save(prefix + "/add", $('#form-dept-add').serialize());
 	        }
 	    }
-	
+
 		/*部门管理-新增-选择父部门树*/
 		function selectDeptTree() {
 			var treeId = $("#treeId").val();
@@ -130,7 +181,7 @@
 			};
 			$.modal.openOptions(options);
 		}
-		
+
 		function doSubmit(index, layero){
 			var body = $.modal.getChildFrame(index);
    			$("#treeId").val(body.find('#treeId').val());
diff --git a/ruoyi-admin/src/main/resources/templates/system/dept/edit.html b/ruoyi-admin/src/main/resources/templates/system/dept/edit.html
index 0ae071c..abceb56 100644
--- a/ruoyi-admin/src/main/resources/templates/system/dept/edit.html
+++ b/ruoyi-admin/src/main/resources/templates/system/dept/edit.html
@@ -4,7 +4,7 @@
 	<th:block th:include="include :: header('修改部门')" />
 </head>
 <body class="white-bg">
-	<div class="wrapper wrapper-content animated fadeInRight ibox-content">
+	<div class="wrapper wrapper-content animated fadeInRight ibox-content" id="app">
 		<form class="form-horizontal m" id="form-dept-edit" th:object="${dept}">
 			<input name="deptId" type="hidden" th:field="*{deptId}" />
 			<input id="treeId" name="parentId" type="hidden" th:field="*{parentId}" />
@@ -18,15 +18,25 @@
 				</div>
 			</div>
 			<div class="form-group">
-				<label class="col-sm-3 control-label is-required">所属市州：</label>
+				<label class="col-sm-3 control-label is-required">所属地市：</label>
 				<div class="col-sm-8">
-					<input class="form-control" type="text" name="framework" th:field="*{framework}" id="framework" required>
+					<select id="City" name="framework" required @change="getAreaList()" v-model="City" class="form-control m-b">
+						<option value="">请选择</option>
+						<option v-for="option in CityList" :value="option.id" :key="option.id">
+							{{ option.name }}
+						</option>
+					</select>
 				</div>
 			</div>
 			<div class="form-group">
 				<label class="col-sm-3 control-label is-required">所属区县：</label>
 				<div class="col-sm-8">
-					<input class="form-control" type="text" name="area" th:field="*{area}" id="area" required>
+					<select id="Area" name="area" required v-model="Area" class="form-control m-b">
+						<option value="">请选择</option>
+						<option v-for="option in AreaList" :value="option.id" :key="option.id">
+							{{ option.name }}
+						</option>
+					</select>
 				</div>
 			</div>
 			<div class="form-group">
@@ -73,7 +83,6 @@
 	<th:block th:include="include :: footer" />
 	<script type="text/javascript">
 		var prefix = ctx + "system/dept";
-		
 		$("#form-dept-edit").validate({
 			onkeyup: false,
 			rules:{
@@ -112,13 +121,13 @@
 		    },
 		    focusCleanup: true
 		});
-		
+
 		function submitHandler() {
 	        if ($.validate.form()) {
 	        	$.operate.save(prefix + "/edit", $('#form-dept-edit').serialize());
 	        }
 	    }
-	
+
 		/*部门管理-修改-选择部门树*/
 		function selectDeptTree() {
 			var deptId = $("#treeId").val();
@@ -135,7 +144,7 @@
         		$.modal.alertError("父部门不能选择");
         	}
 		}
-		
+
 		function doSubmit(index, layero){
 			var tree = layero.find("iframe")[0].contentWindow.$._tree;
 			if ($.tree.notAllowLastLevel(tree)) {
@@ -145,6 +154,48 @@
 	   			$.modal.close(index);
 			}
 		}
+		var app = new Vue({
+			el: '#app',
+			data: {
+				CityList: [],
+				AreaList:[],
+				City:[[${dept.framework}]],
+				Area:[[${dept.area}]],
+				params:{
+					parentId:'',
+				}
+			},
+			mounted(){
+				// 初始化地市列表
+				this.getCityList();
+				if (this.City){
+					this.getAreaList()
+				}
+			},
+			methods:{
+				getCityList(){
+					$.ajax({
+						url: ctx + "system/area/getSysAreaList",
+						type: 'GET',
+						data:this.params ,
+						success:((res)=>{
+							this.CityList = res.data
+						}) ,
+					});
+				},
+				getAreaList(){
+					this.params.parentId = this.City
+					$.ajax({
+						url: ctx + "system/area/getSysAreaList",
+						type: 'GET',
+						data:this.params,
+						success:((res)=>{
+							this.AreaList = res.data
+						}) ,
+					});
+				}
+			}
+		})
 	</script>
 </body>
 </html>
