移动系统liao
2024-05-09 5d6cb15ac86d9174393cb9d1538d69b567e2c26c
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
<script type="text/html" template lay-done="layui.data.sendParams(d);">
    <div class="layui-form coreshop-form layui-form-pane" lay-filter="LAY-app-CoreCmsGoodsCategory-editForm" id="LAY-app-CoreCmsGoodsCategory-editForm">
        <input type="hidden" name="id" id="id" value="{{d.params.data.model.id || '' }}" />
 
        <div class="layui-form-item">
            <label for="parentId" class="layui-form-label">上级分类</label>
            <div class="layui-input-block">
                <div id="selectTree" class="ew-xmselect-tree" lay-verType="tips" lay-reqText="请选择上级分类"></div>
            </div>
        </div>
 
        <div class="layui-form-item">
            <label for="name" class="layui-form-label layui-form-required">分类名称</label>
            <div class="layui-input-inline">
                <input name="name" id="name" lay-verType="tips" lay-verify="required|verifyname" class="layui-input" placeholder="请输入分类名称" lay-reqText="请输入分类名称" value="{{d.params.data.model.name || '' }}" />
            </div>
            <div class="layui-form-mid layui-word-aux">请输入不超过20个字符内容</div>
        </div>
        <div class="layui-form-item">
            <label for="key" class="layui-form-label">Key</label>
            <div class="layui-input-inline">
                <input name="key" id="key" lay-verType="tips" lay-verify="verifyname" class="layui-input" placeholder="请输入key" lay-reqText="请输入Key" value="{{d.params.data.model.key || '' }}" />
            </div>
            <div class="layui-form-mid layui-word-aux"> 在有需求时填写,请输入不超过20个字符内容</div>
        </div>
        <div class="layui-form-item">
            <label for="typeId" class="layui-form-label">类型</label>
            <div class="layui-input-inline">
                <select name="typeId" id="typeId" lay-verType="tips" lay-verify="required|number">
                    <option value="0">通用类型</option>
                    {{# layui.each(d.params.data.types, function(index, item){ }}
                    <option value="{{ item.id }}" {{d.params.data.model.typeId ===item.id ? 'selected="selected"' :''}}>{{ item.name }}</option>
                    {{# }); }}
                </select>
            </div>
        </div>
 
        <div class="layui-form-item">
            <label for="sort" class="layui-form-label">分类排序</label>
            <div class="layui-input-inline">
                <input type="number" min="0" max="999999" name="sort" id="sort" lay-verType="tips" lay-verify="required|number" class="layui-input" value="{{d.params.data.model.sort || '' }}" placeholder="请输入分类排序" lay-reqText="请输入分类排序并为数字" />
            </div>
            <div class="layui-form-mid layui-word-aux">请输入数字,排序从小到大</div>
        </div>
 
        <div class="layui-form-item">
            <label for="imageUrl" class="layui-form-label">分类图片</label>
            <div class="layui-input-inline">
                <input name="imageUrl" id="imageUrl" class="layui-input" value="{{d.params.data.model.imageUrl || '' }}" placeholder="请上传分类图片" lay-reqText="请上传分类图片" />
            </div>
            <div class="layui-input-inline">
                <div class="layui-upload">
                    <button type="button" class="layui-btn" id="upBtnimageUrl">裁剪上传</button>
                    <button type="button" class="layui-btn" id="upBtnOriginal">原图上传</button>
                    <div class="layui-upload-list">
                        <img class="layui-upload-img" id="viewImgBoximageUrl" src="{{d.params.data.model.imageUrl || layui.setter.noImagePicUrl }}">
                        <p id="viewTextBoximageUrl"></p>
                    </div>
                </div>
            </div>
        </div>
 
        <div class="layui-form-item">
            <label for="isShow" class="layui-form-label">是否显示</label>
            <div class="layui-input-block">
                <input type="checkbox" lay-filter="switch" name="isShow" id="isShow" {{ d.params.data.model.isShow ? 'checked' : '' }} lay-skin="switch" lay-text="开启|关闭">
            </div>
        </div>
 
        <div class="layui-form-item text-right core-hidden">
            <input type="button" class="layui-btn" lay-submit lay-filter="LAY-app-CoreCmsGoodsCategory-editForm-submit" id="LAY-app-CoreCmsGoodsCategory-editForm-submit" value="确认编辑">
        </div>
    </div>
</script>
<script>
    var debug = layui.setter.debug;
    layui.data.sendParams = function (d) {
        //开启调试情况下获取接口赋值数据
        if (debug) { console.log(d.params.data); }
 
        layui.use(['admin', 'form', 'laydate', 'upload', 'coreHelper', 'xmSelect','cropperImg'],
            function () {
                var $ = layui.$
                    , form = layui.form
                    , admin = layui.admin
                    , laydate = layui.laydate
                    , upload = layui.upload
                    , xmSelect = layui.xmSelect
                    , cropperImg = layui.cropperImg
                    , coreHelper = layui.coreHelper;
 
                //分类图片ID图片上传
                $('#upBtnimageUrl').click(function () {
                    cropperImg.cropImg({
                        aspectRatio: 1 / 1,
                        imgSrc: $('#viewImgBoximageUrl').attr('src'),
                        onCrop: function (data) {
                            var loadIndex = layer.load(2);
                            coreHelper.Post("api/Tools/UploadFilesFByBase64", { base64: data }, function (res) {
                                if (0 === res.code) {
                                    $('#viewImgBoximageUrl').attr('src', res.data.fileUrl);
                                    $("#imageUrl").val(res.data.fileUrl);
                                    layer.msg(res.msg);
                                    layer.close(loadIndex);
                                } else {
                                    layer.close(loadIndex);
                                    layer.msg(res.msg, { icon: 2, anim: 6 });
                                }
                            });
                        }
                    });
                });
 
                //原图上传
                upload.render({
                    elem: '#upBtnOriginal'
                    , url: layui.setter.apiUrl + 'Api/Tools/UploadFiles'
                    , done: function (res) {
                        if (res.code > 0) { return layer.msg('上传失败'); }
                        layer.msg('上传成功');
                        $('#viewImgBoximageUrl').attr('src', res.data.fileUrl);
                        $("#imageUrl").val(res.data.fileUrl);
                    }
                    , error: function () {
                        var viewTextBox = $('#viewTextBox');
                        viewTextBox.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                        viewTextBox.find('.demo-reload').on('click', function () {
                            uploadInst.upload();
                        });
                    }
                });
 
                form.verify({
 
                    verifyname: [/^[\S]{0,20}$/, '分类名称最大只允许输入20位字符,且不能出现空格'],
                    verifyimageUrl: [/^[\S]{0,255}$/, '分类图片ID最大只允许输入255位字符,且不能出现空格'],
                });
 
                // 渲染商品分类
                var insXmSelGoodsCategoryId = xmSelect.render({
                    el: '#selectTree',
                    height: '250px',
                    data: d.params.data.categories.data,
                    initValue: d.params.data.model ? [d.params.data.model.parentId] : [],
                    model: { label: { type: 'text' } },
                    name: 'parentId',
                    prop: {
                        name: 'title',
                        value: 'id'
                    },
                    layVerify: 'required',
                    layVerType: 'msg',
                    radio: true,
                    clickClose: true,
                    tree: {
                        show: true,
                        indent: 15,
                        strict: false,
                        expandedKeys: true
                    }
                });
 
                //重载form
                form.render(null, 'LAY-app-CoreCmsGoodsCategory-editForm');
            })
    };
</script>