检查通知管理更改地区选择方式

10 months ago · 15e0f8803e
parent 862b585f04
commit 15e0f8803e
3 changed files with 185 additions and 17 deletions
--- a/ruoyi-admin/src/main/resources/templates/system/notify/add.html
+++ b/ruoyi-admin/src/main/resources/templates/system/notify/add.html
@ -5,18 +5,28 @@
    <th:block th:include="include :: datetimepicker-css" />
 </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-notify-add">
            <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 name="framework" required class="form-control" type="text">
+                    <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 name="area" required class="form-control" type="text">
+                    <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">
@ -71,7 +81,48 @@
        $("#form-notify-add").validate({
            focusCleanup: true
        });
-
+        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
+                        }) ,
+                    });
+                }
+            }
+        })
        function submitHandler() {
            if ($.validate.form()) {
                $.operate.save(prefix + "/add", $('#form-notify-add').serialize());
--- a/ruoyi-admin/src/main/resources/templates/system/notify/edit.html
+++ b/ruoyi-admin/src/main/resources/templates/system/notify/edit.html
@ -5,19 +5,29 @@
    <th:block th:include="include :: datetimepicker-css" />
 </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-notify-edit" th:object="${tdNotify}">
            <input name="notifyId" th:field="*{notifyId}" type="hidden">
            <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 name="framework" required th:field="*{framework}" class="form-control" type="text">
+                    <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 name="area" required th:field="*{area}" class="form-control" type="text">
+                    <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">
@ -70,7 +80,48 @@
        $("#form-notify-edit").validate({
            focusCleanup: true
        });
-
+        var app = new Vue({
+            el: '#app',
+            data: {
+                CityList: [],
+                AreaList:[],
+                City:[[${tdNotify.framework}]],
+                Area:[[${tdNotify.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
+                        }) ,
+                    });
+                }
+            }
+        })
        function submitHandler() {
            if ($.validate.form()) {
                $.operate.save(prefix + "/edit", $('#form-notify-edit').serialize());
--- a/ruoyi-admin/src/main/resources/templates/system/notify/notify.html
+++ b/ruoyi-admin/src/main/resources/templates/system/notify/notify.html
@ -4,7 +4,7 @@
    <th:block th:include="include :: header('检查通知列表')" />
 </head>
 <body class="gray-bg">
-     <div class="container-div">
+     <div class="container-div" id="app">
        <div class="row">
            <div class="col-sm-12 search-collapse">
                <form id="formId">
@ -12,11 +12,21 @@
                        <ul>
                            <li>
                                <label>所属市州：</label>
-                                <input type="text" name="framework"/>
+                                <select id="City" name="framework" @change="getAreaList()" v-model="City">
+                                    <option value="">请选择</option>
+                                    <option v-for="option in CityList" :value="option.id" :key="option.id">
+                                        {{ option.name }}
+                                    </option>
+                                </select>
                            </li>
                            <li>
                                <label>所属区县：</label>
-                                <input type="text" name="area"/>
+                                <select id="Area" name="area" v-model="Area">
+                                    <option value="">请选择</option>
+                                    <option v-for="option in AreaList" :value="option.id" :key="option.id">
+                                        {{ option.name }}
+                                    </option>
+                                </select>
                            </li>
                            <li>
                                <label>单位：</label>
@ -65,7 +75,15 @@
        var removeFlag = [[${@permission.hasPermi('system:notify:remove')}]];
        var notifyStateDatas = [[${@dict.getType('sys_notice_state')}]];
        var prefix = ctx + "system/notify";
-
+        let datas = []
+        $.ajax({
+            url: ctx + "system/area/getAllList",
+            type: 'GET',
+            data:{parentId:''} ,
+            success:((res)=>{
+                datas = res.data
+            }) ,
+        });
        $(function() {
            var options = {
                url: prefix + "/list",
@ -84,11 +102,17 @@
                },
                {
                    field: 'framework',
-                    title: '所属市州'
+                    title: '所属市州',
+                    formatter: function(value, row, index) {
+                        return getCity(datas, value)
+                    }
                },
                {
                    field: 'area',
-                    title: '所属区县'
+                    title: '所属区县',
+                    formatter: function(value, row, index) {
+                        return getCity(datas, value)
+                    }
                },
                {
                    field: 'notifyUser',
@ -130,6 +154,48 @@
            };
            $.table.init(options);
        });
+        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
+                        }) ,
+                    });
+                }
+            }
+        })
    </script>
 </body>
 </html>