123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219 |
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
- <script src="../../../admin/index.js" door type="text/javascript" charset="utf-8"></script>
- <!--下拉选择模板-->
- <script type="text/html" id="selectTpl">
- <option value="">{{d.name}}</option>
- {{# if(!d.list){d.list = []}}} {{# for(var i=0;i<d.list.length;i++){}}
- <option value="{{d.list[i].id}}">{{d.list[i].name}}</option>
- {{#}}}
- </script>
- </head>
- <body>
- <form class="layui-form" action="" lay-filter="addForm" style="padding: 20px 30px 0 0">
- <div class="layui-form-item">
- <label class="layui-form-label ui-required">类别</label>
- <div class="layui-input-block" id="bigTypeSelect">
- </div>
- </div>
- <div class="layui-form-item">
- <label class="layui-form-label ui-required">产品名称</label>
- <div class="layui-input-block">
- <input type="text" name="name" lay-verify="required" maxlength="16" placeholder="请输入产品名称" class="layui-input">
- </div>
- </div>
- <div class="layui-form-item">
- <label class="layui-form-label ui-required">产品图片</label>
- <div class="layui-input-inline">
- <div class="imgBox"><img src="" /></div>
- </div>
- <button style="float: left;" type="button" class="layui-btn" id="uploadImg">选择图片</button>
- </div>
- <div class="layui-form-item layui-hide">
- <button class="layui-btn" lay-submit lay-filter="formSubmit" id="formSubmit">保存</button>
- </div>
- </form>
- <script type="text/javascript">
- layui.config({
- base: "../../../admin/js/layuiPlugins/"
- }).use(["form", 'layer', 'cascade', 'laytpl', 'upload'], function() {
- var form = layui.form,
- $ = layui.$,
- layer = layui.layer,
- laytpl = layui.laytpl,
- cascade = layui.cascade,
- upload = layui.upload;
- var object = {
- id: (JSON.stringify(location.searchObj()) != "{}") ? location.searchObj().id || null : null, //带参传入ID
- currentData: {},
- urls: {
- formUrl: "productFormUrl",
- byIdUrl: "productByIdUrl",
- uploadFileUrl: 'uploadFileUrl'
- },
- formLayFilter: "addForm", //表单容器
- closeModal: function() { //关闭当前窗口
- parent.layer.close(parent.layer.getFrameIndex(window.name));
- }
- };
- //初始化
- object.main = function() {
- var _this = this;
- if (_this.id) {
- _this.getCurrent(_this.id);
- } else {
- _this.initialization();
- }
- _this.bigTypeCascade = cascade.render({
- elem: "#bigTypeSelect",
- hostParm: {
- idName: 'bigTypeId'
- },
- url: {
- productBigTypeId: 'productBigTypeUrl',
- productTypeId: 'productSmallTypeUrl'
- },
- placeholder: {
- productBigTypeId: "请选择大类别",
- productTypeId: "请选择小类别"
- },
- data: {
- type: 'productType'
- },
- listParamName: {
- valueName: 'id',
- name: 'name'
- },
- verify: {
- productBigTypeId: "required",
- productTypeId: "required"
- }
- });
- // 上传图片
- upload.render({
- elem: '#uploadImg',
- url: 'uploadFileUrl',
- accept: 'images',
- method: 'get',
- acceptMime: 'image/*',
- size: 5 * 1024,
- before: function(obj) {
- obj.preview(function(index, file, result) {
- $('.imgBox img').attr('src', result);
- });
- layer.msg('正在上传中', {
- icon: 16,
- shade: 0.01
- });
- },
- done: function(res) {
- layer.closeAll();
- if (res.code == 0) {
- _this.currentData.imgUrl = res.data[0].url;
- } else {
- return layer.msg('上传失败');
- }
- }
- });
- form.on('submit(formSubmit)', function(obj) {
- return _this.mergeData(obj.field).submitInfo();
- });
- return _this;
- };
- //初始化
- object.initialization = function() {
- var _this = this;
- return _this;
- };
- //合并表单内容
- object.mergeData = function(obj) {
- this.currentData = $.extend(this.currentData, obj);
- return this;
- };
- //获取当前信息
- object.getCurrent = function(id) {
- var _this = this;
- $.ajax({
- url: _this.urls.byIdUrl,
- data: {
- id: id || _this.id //当前ID
- },
- success: function(res) {
- _this.currentData = res.data[0];
- $('.imgBox img').attr('src', window.hywa.config.href + '/' + res.data[0].imgUrl);
- _this.formVal();
- }
- });
- return this;
- };
- //表单赋值
- object.formVal = function() {
- var _this = this;
- form.val(_this.formLayFilter, _this.currentData);
- _this.bigTypeCascade.val(_this.currentData);
- return _this;
- };
- //提交新增修改
- object.submitInfo = function() {
- var _this = this;
- if (!_this.currentData.imgUrl) {
- layer.msg('请上传产品图片', {
- icon: 7
- });
- return false;
- }
- $.ajax({
- type: 'POST',
- url: _this.id ? 'productUpdateFormUrl' : 'productAddFormUrl',
- data: JSON.stringify(_this.currentData),
- contentType: 'application/json',
- success: function(res) {
- if (res.code == 0) {
- parent.layer.msg(res.msg, {
- icon: 1
- });
- parent.layui.table.reload('tableData');
- _this.closeModal();
- } else {
- layer.msg(res.msg, {
- icon: 2
- });
- }
- }
- });
- return false;
- };
- object.main();
- //验证规则
- form.verify({
- nickname: function(value) {
- if (!new RegExp("^[a-zA-Z][a-zA-Z0-9_]*$").test(value)) {
- return '用户名必须以英文字母开头,只能包含英文字母、数字、下划线';
- }
- if (/(^\_)|(\__)|(\_+$)/.test(value)) {
- return '用户名首尾不能出现下划线\'_\'';
- }
- },
- phoneNumber: function(value) {
- if (value) {
- if (!(/^1[3|4|5|7|8]\d{9}$/).test(value)) {
- return '请输入正确的手机号码';
- }
- }
- return false;
- }
- });
- });
- </script>
- </body>
- </html>
|