forked from kidgrow-microservices-platform

luliqiang
2021-02-19 1df2ad6224fa4bd1ca38d235d5e4b917262added
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
<form id="app-form-add" lay-filter="app-form-add" class="layui-form model-form">
    <div style="display:flex">
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label" style="width: 75px;">所在医院</label>
                <div class="layui-input-block" style="width: 150px;">
                    <input name="sourceHospitalName" id="sourceHospitalName" placeholder="请输入医院名称" type="text" class="layui-input"
                           maxlength="50" lay-verify="required" required style="width: 150px;"/>
                    <input type="hidden" name="sourceHospitalId" id="sourceHospitalId"/>
                </div>
            </div>
        </div>
    </div>
    <div style="display:flex">
        <div class="layui-form-item">
            <label class="layui-form-label" style="width: 75px;">所在区域</label>
            <div class="layui-inline" style="width: 134px;">
                <select lay-verify="required" required id="OrganizationProvince" placeholder="省份"
                        lay-filter="OrganizationProvince" >
                </select>
            </div>
            <div class="layui-inline" style="width: 134px;">
                <select id="OrganizationCity"  lay-verify="required" required placeholder="市" lay-filter="OrganizationCity">
                    <option value="">选择市</option>
                </select>
            </div>
            <div class="layui-inline" style="width: 134px;">
                <select id="OrganizationArea"  lay-verify="required" required placeholder="区县" lay-filter="OrganizationArea">
                    <option value="">选择区县</option>
                </select>
            </div>
            </div>
        </div>
    </div>
 
    <div style="display:flex">
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label" style="width: 75px;">文件上传</label>
                <div class="layui-input-block" style="width: 150px;">
                    <button class="layui-btn test" id="import">选择文件</button>
                </div>
            </div>
        </div>
    </div>
 
    <div class="layui-form-item model-form-footer">
        <button class="layui-btn"  type="button" id="downLoadTemplate" >下载导入模板</button>
        <button class="layui-btn layui-btn-primary" ew-event="closeDialog" type="button">取消</button>
    </div>
</form>
 
<script>
    layui.use(['form', 'laydate', 'util', 'config', 'admin', 'autocomplete', 'area'], function () {
        var form = layui.form;
        var config = layui.config;
        var autocomplete = layui.autocomplete;
        var $ = layui.jquery;
        var area = layui.area;
        var upload = layui.upload;
 
        form.render();
 
        //省份数据加载
        area.areaData("#OrganizationProvince", 1, "", "");
 
        //装载市区数据
        form.on("select(OrganizationProvince)", function (data) {
            area.areasClear("#OrganizationArea", 3);
            area.areaData("#OrganizationCity", 2, data.value, "");
        });
        //装载区县数据
        form.on("select(OrganizationCity)", function (data) {
            area.areaData("#OrganizationArea", 3, data.value, "");
        });
 
        //自动完成-医院名称
        autocomplete.render({
            elem: $('#sourceHospitalName')[0],
            keywordsName: 'hospitalName', //查询关键字名称
            url: config.base_server + 'api-opration/hospitalscreening/findByName',
            template_val: '{{d.hospitalName}}', //选择后文本框显示的数据字段
            template_txt: "<div class='layui-table-cell'>{{d.hospitalName}}</div>", //下拉列表模板
            onselect: function (resp) {
                $("#sourceHospitalId").val(resp.id);
            }
        });
 
        upload.render({
            //绑定元素
            elem: '#import'
            //上传接口
            ,url: config.base_server + 'api-opration/screeningorganizationinfo/import'
            ,before: function(obj){ //obj参数包含的信息,跟 choose回调完全一致,可参见上文。
                layer.load(); //上传loading
            }
            ,done: function(data){
                layer.closeAll("loading");
                //上传完毕回调
                if (0 === data.code) {
                    layer.closeAll();
                    parent.layui.table.reload('app-table', {});
                } else {
                    layer.msg(data.msg, { icon: 2, time: 2000 });
                }
            }
            ,error: function(){
                //请求异常回调
                layer.msg("操作异常", { icon: 2, time: 2000 });
            }
            //允许的文件类型
            ,accept:'file'
            ,exts: 'xls|xlsx'
            //选择文件后是否自动上传
            ,auto: true,
            headers: {
                "Authorization": "Bearer " + config.getToken().access_token
            }
            ,data: {
                hospitalId: function(){
                    return $('#sourceHospitalId').val();
                },
                areaCode:function(){
                    return $('#OrganizationProvince').val() + "#" + $('#OrganizationCity').val() + "#" +
                        $('#OrganizationArea').val();
                },
                areaName:function(){
                    return $("#OrganizationProvince option:selected").text() + $("#OrganizationCity option:selected").text()+
                        $("#OrganizationArea option:selected").text();
                },
                hospitalName:function(){
                    return $("#sourceHospitalName").val();
                }
            }
 
 
        });
 
        $('#downLoadTemplate').click(function () {
            var url = "http://zuul.kidgrow.cloud/api-opration/screeningorganizationinfo/export";
            // 获取XMLHttpRequest
            var xmlResquest = new XMLHttpRequest();
            //  发起请求
            xmlResquest.open("POST", url, true);
            // 设置请求头类型
            xmlResquest.setRequestHeader("Content-type", "application/json");
            xmlResquest.setRequestHeader("Authorization","Bearer " + config.getToken().access_token);
            xmlResquest.responseType = "blob";
 
            //  返回
            xmlResquest.onload = function() {
                if (this.status == 200) {
                    var fileName = "机构导入模板.xlsx";
                    var blob = this.response;
                    var a = document.createElement('a');
                    a.innerHTML = fileName;
                    // 指定生成的文件名
                    a.download = fileName;
                    a.href = URL.createObjectURL(blob);
                    document.body.appendChild(a);
                    var evt = document.createEvent("MouseEvents");
                    evt.initEvent("click", false, false);
                    a.dispatchEvent(evt);
                    document.body.removeChild(a);
                }
            };
            xmlResquest.send();
        });
    });
</script>