mkm/nk-lihaink-cn
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

商品添加提及

Browse Source
This commit is contained in:
xianmai 2023-03-24 14:27:22 +08:00
parent 2edc939178
commit 1937dbde5c
10 changed files with 9752 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

142
app/admin/controller/StoreProduct.php
View File

@ -58,6 +58,70 @@ class StoreProduct extends BaseController
* 添加
*/
public function add()
{
if (request()->isAjax()) {
$param = get_params();
$data=$param;
$data['mer_id'] = 4;
$data['status'] = 1;
$data['mer_status'] =1;
$data['rate'] = 3;
$data['spec_type'] = 0;//商品规格
if (!$data['spec_type']) {
$data['attr'] = [];
if (count($data['skus']) > 1) throw new ValidateException('单规格商品属性错误');
}
$content = [
'content' => $data['content'] ,
'type' => 0
];
$productType=0;
$conType=0;
$product = $this->setProduct($data);
// event('product.create.before', compact('data','productType','conType'));
return Db::transaction(function () use ($data, $productType,$conType,$content,$product) {
$activity_id = 0;
$result = Db::connect('shop')->table()->create($product);
$settleParams = $this->setAttrValue($data, $result->product_id, $productType, 0);
$settleParams['cate'] = $this->setMerCate($data['mer_cate_id'], $result->product_id, $data['mer_id']);
$settleParams['attr'] = $this->setAttr($data['attr'], $result->product_id);
if ($productType ==0 ) app()->make(ParameterValueRepository::class)->create($result->product_id, $data['params'] ?? [],$data['mer_id']);
$this->save($result->product_id, $settleParams, $content,$product,$productType);
if (in_array($productType, [0, 1])) {
if ($productType == 1) { //秒杀商品
$dat = $this->setSeckillProduct($data);
$dat['product_id'] = $result->product_id;
$seckill = app()->make(StoreSeckillActiveRepository::class)->create($dat);
$activity_id = $seckill->seckill_active_id;
}
$product['price'] = $settleParams['data']['price'];
$product['mer_labels'] = $data['mer_labels'];
app()->make(SpuRepository::class)->create($product, $result->product_id, $activity_id, $productType);
}
$product = $result;
event('product.create',compact('product'));
return $result->product_id;
});
halt($data);
// 检验完整性
try {
validate(StoreProductValidate::class)->check($param);
} catch (ValidateException $e) {
// 验证失败 输出错误信息
return to_assign(1, $e->getError());
}
$this->model->addStoreProduct($param);
}else{
$store_brand= Db::connect('shop')->table('eb_store_brand')->where(['is_show' => 1])
->select();
View::assign('store_brand', $store_brand);
return view();
}
}
public function adds()
{
if (request()->isAjax()) {
$param = get_params();
@ -78,8 +142,84 @@ class StoreProduct extends BaseController
return view();
}
}
public function category_arr($id=0){
$where[]=['is_show','=',1];
$where[]=['mer_id','=',0];
if($id!=0){
$where[1]=['mer_id','=',$id];
}
$list=Db::connect('shop')->table('eb_store_category')->where($where)
->field('store_category_id id,pid,cate_name name')->select();
$category_arr=create_tree_list(0,$list,0);
return to_assign(0,'操作成功', $category_arr);
}
/**
* 格式商品主体信息
* @Author:Qinii
* @Date: 2020/9/15
* @param array $data
* @return array
*/
public function setProduct(array $data)
{
$give_coupon_ids = '';
if (isset($data['give_coupon_ids']) && !empty($data['give_coupon_ids'])) {
$gcoupon_ids = array_unique($data['give_coupon_ids']);
$give_coupon_ids = implode(',', $gcoupon_ids);
}
if(isset($data['integral_rate'])){
$integral_rate = $data['integral_rate'];
if($data['integral_rate'] < 0) $integral_rate = -1;
if($data['integral_rate'] > 100) $integral_rate = 100;
}
$result = [
'store_name' => $data['store_name'],
'image' => $data['image'],
'slider_image' => is_array($data['slider_image']) ? implode(',', $data['slider_image']) : '',
'store_info' => $data['store_info'] ?? '',
'keyword' => $data['keyword']??'',
'brand_id' => $data['brand_id'] ?? 0,
'cate_id' => $data['cate_id'] ?? 0,
'unit_name' => $data['unit_name']??'件',
'sort' => $data['sort'] ?? 0,
'is_show' => $data['is_show'] ?? 0,
'is_used' => (isset($data['status']) && $data['status'] == 1) ? 1 : 0,
'is_good' => $data['is_good'] ?? 0,
'video_link' => $data['video_link']??'',
'temp_id' => $data['delivery_free'] ? 0 : ($data['temp_id'] ?? 0),
'extension_type' => $data['extension_type']??0,
'spec_type' => $data['spec_type'] ?? 0,
'status' => $data['status']??0,
'give_coupon_ids' => $give_coupon_ids,
'mer_status' => $data['mer_status'],
'guarantee_template_id' => $data['guarantee_template_id']??0,
'is_gift_bag' => $data['is_gift_bag'] ?? 0,
'integral_rate' => $integral_rate ?? 0,
'delivery_way' => implode(',',$data['delivery_way']),
'delivery_free' => $data['delivery_free'] ?? 0,
'once_min_count' => $data['once_min_count'] ?? 0,
'once_max_count' => $data['once_max_count'] ?? 0,
'pay_limit' => $data['pay_limit'] ?? 0,
'svip_price_type' => $data['svip_price_type'] ?? 0,
];
if (isset($data['mer_id']))
$result['mer_id'] = $data['mer_id'];
if (isset($data['old_product_id']))
$result['old_product_id'] = $data['old_product_id'];
if (isset($data['product_type']))
$result['product_type'] = $data['product_type'];
if (isset($data['type']) && $data['type'])
$result['type'] = $data['type'];
if (isset($data['param_temp_id']))
$result['param_temp_id'] = $data['param_temp_id'];
if (isset($data['extend']))
$result['extend'] = $data['extend'] ? json_encode($data['extend'], JSON_UNESCAPED_UNICODE) :[];
return $result;
}
/**
* 编辑
*/

466
app/admin/view/store_product/adds.html Normal file
View File

@ -0,0 +1,466 @@
{extend name="common/base"/}
{block name="style"}
<style type="text/css">
.editormd-code-toolbar select {
display: inline-block
}
.editormd li {
list-style: inherit;
}
</style>
{/block}
<!-- 主体 -->
{block name="body"}
<form class="layui-form p-4">
<div class="layui-tab layui-tab-brief">
<ul class="layui-tab-title">
<li class="layui-this">商品信息</li>
<li>规格设置</li>
<li>商品详情</li>
<li>营销设置</li>
<li>其他设置</li>
</ul>
<div class="layui-tab-content">
<div class="layui-tab-item layui-show">
<table class="layui-table layui-table-form">
<tr>
<td class="layui-td-gray">商品名称<font>*</font>
</td>
<td colspan="7"><input type="text" name="store_name" lay-verify="required" lay-reqText="请输入商品名称"
autocomplete="off" placeholder="请输入商品名称" class="layui-input"></td>
</tr>
<tr>
<td class="layui-td-gray">平台商品分类<font>*</font>
</td>
<td>
<div id="cate_id"></div>
</td>
<td class="layui-td-gray">品牌选择<font>*</font>
</td>
<td colspan="6">
<select name="brand_id" lay-verify="required" lay-search="">
<option value="">请选择</option>
{volist name='store_brand' id='vo'}
<option value="{$vo.brand_id}">{$vo.brand_name}</option>
{/volist}
</select>
</td>
</tr>
<tr>
<td class="layui-td-gray">商户分类<font>*</font>
</td>
<td colspan="3">
<div id="mer_cate_id"></div>
</td>
</tr>
<tr>
<td class="layui-td-gray" style="vertical-align:top;">商品封面图</td>
<td colspan="12">
<div class="layui-upload">
<button type="button" class="layui-btn layui-btn-sm" id="upload_btn_thumb">
上传缩略图(尺寸:750x750)
</button>
<div class="layui-upload-list" id="upload_box_thumb" style=" overflow: hidden;">
<img src=""
onerror="javascript:this.src='{__GOUGU__}/gougu/images/nonepic600x360.jpg';this.onerror=null;"
width="100" style="max-width: 100%; height:66px;" />
<input type="hidden" name="image" value="">
</div>
</div>
</td>
</tr>
<tr>
<td class="layui-td-gray" style="vertical-align:top;">商品轮播图</td>
<td colspan="12">
<div class="layui-upload">
<button type="button" class="layui-btn layui-btn-sm" id="upload_btn_thumb2">
上传商品轮播图
</button>
<div class="layui-upload-list" id="upload_box_thumb2" style="overflow: hidden;">
<input type="hidden" name="slider_image" value="">
</div>
</div>
</td>
</tr>
<!-- <tr>
<td class="layui-td-gray">主图视频：<font>*</font>
</td>
<td colspan="7">video_link</td>
</tr> -->
<tr>
<td class="layui-td-gray">单位<font>*</font>
</td>
<td colspan="7"><input type="text" name="unit_name" lay-verify="required" lay-reqText="请输入单位"
autocomplete="off" placeholder="请输入单位" class="layui-input"></td>
</tr>
<tr>
<td class="layui-td-gray">商品关键字<font>*</font>
</td>
<td colspan="7"><input type="text" name="keyword" lay-verify="required" lay-reqText="请输入商品关键字"
autocomplete="off" placeholder="请输入商品关键字" class="layui-input"></td>
</tr>
<tr>
<td class="layui-td-gray" style="text-align:left">商品简介</td>
<td colspan="6">
<textarea class="layui-textarea" name="store_info"></textarea>
</td>
</tr>
<!-- <tr>
<td class="layui-td-gray">优惠券：<font>*</font>
</td>
<td colspan="7">couponData</td>
</tr> -->
</table>
</div>
<div class="layui-tab-item">
<table class="layui-table layui-table-form">
<!-- <tr>
<td class="layui-td-gray" style="background-color: #fff;width: 92px;">佣金设置</td>
<td colspan="6">
<input type="radio" name="status" value="1" title="单独设置">
<input type="radio" name="status" value="0" title="默认设置" checked>
</td>
</tr> -->
<!-- <tr>
<td class="layui-td-gray" style="text-align:left">付费会员价设置</td>
<td colspan="6">
</td>
</tr> -->
<tr>
<td colspan="6">
<!-- 规格类型 -->
<div id="fairy-is-attribute"></div>
<!--商品规格表-->
<div id="fairy-spec-table"></div>
<div id="fairy-sku-table"></div>
</td>
</tr>
</table>
</div>
<div class="layui-tab-item">
<table class="layui-table layui-table-form">
<tr>
<td class="layui-td-gray" style="text-align:left">商品详情</td>
<td colspan="6">
<textarea class="layui-textarea" id="container_content"></textarea>
</td>
</tr>
</table>
</div>
<div class="layui-tab-item">
<table class="layui-table layui-table-form">
<tr>
<td class="layui-td-gray" style="text-align:left">商品推荐</td>
<td colspan="6">
<input type="checkbox" name="is_good" title="店铺推荐">
</td>
</tr>
</table>
</div>
<div class="layui-tab-item">
<table class="layui-table layui-table-form">
<tr>
<td class="layui-td-gray" style="text-align:left">送货方式</td>
<td colspan="6">
<input type="checkbox" name="ziti" title="到店自提">
<input type="checkbox" name="kuaidi" title="快递配送">
</td>
<td class="layui-td-gray" style="text-align:left">是否包邮</td>
<td colspan="6">
<input type="radio" name="delivery_free" value="1" title="是"checked>
<input type="radio" name="delivery_free" value="0" title="否" >
</td>
</tr>
<!-- <tr>
<td class="layui-td-gray" style="text-align:left">运费模板</td>
<td colspan="6">
</td>
</tr> -->
<tr>
<td class="layui-td-gray" style="text-align:left">最少购买件数</td>
<td colspan="6">
<input type="text" name="once_min_count" lay-verify="required" lay-reqText="默认为0，则不限制购买件数"
autocomplete="off" placeholder="默认为0，则不限制购买件数" class="layui-input" value="0">
</td>
<td class="layui-td-gray" style="text-align:left">排序</td>
<td colspan="6">
<input type="text" name="sort" lay-verify="required" lay-reqText="默认为0，则不限制购买件数"
autocomplete="off" placeholder="默认为0，则不限制购买件数" class="layui-input" value="0">
</td>
</tr>
<!-- <tr>
<td class="layui-td-gray" style="text-align:left">限购类型</td>
<td colspan="6">
<input type="radio" name="pay_limit" value="0" title="不限购"checked>
<input type="radio" name="pay_limit" value="1" title="单次限购" >
<input type="radio" name="pay_limit" value="2" title="长期限购" >
</td>
</tr> -->
<!-- <tr>
<td class="layui-td-gray" style="text-align:left">平台保障服务</td>
<td colspan="6">
</td>
</tr>
<tr>
<td class="layui-td-gray" style="text-align:left">商品参数</td>
<td colspan="6">
</td>
</tr> -->
</table>
</div>
</div>
</div>
<div class="pt-3">
<button class="layui-btn layui-btn-normal" lay-submit="" lay-filter="webform">立即提交</button>
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
</div>
</form>
{/block}
<!-- /主体 -->
<!-- 脚本 -->
{block name="script"}
<script src="/static/assets/js/xm-select.js"></script>
<script>
var moduleInit = ['tool', 'tagpicker', 'tinymce','skuTable'];
var group_access = "{:session('gougu_admin')['group_access']}"
var multiple_images = [];
//单击图片删除图片 【注册全局函数】
function delMultipleImgs (this_img) {
//获取下标
var subscript = $("#upload_box_thumb2 img").index(this_img);
//删除图片
this_img.remove();
//删除数组
multiple_images.splice(subscript, 1);
//重新排序
multiple_images.sort();
$('#upload_box_thumb2 input').attr('value', multiple_images);
//返回
return;
}
function gouguInit () {
var form = layui.form, tool = layui.tool, tagspicker = layui.tagpicker, element = layui.element,skuTable = layui.skuTable;
function demo1 (id) {
var demo1 = xmSelect.render({
name: 'street_id',
el: '#demo1',
initValue: [street_id],
prop: {
name: 'name',
value: 'code',
},
data: [],
radio: true,
disabled: group_access == 2 || group_access == 4 ? true : false,
on: function (data) {
var arr = data.arr;
village(arr[0]['code'])
},
})
$.get('/api/geo/street?pcode=' + id, function (result) {
demo1.update({
data: result.data
})
});
}
function demo_cate_id () {
var demo_cate = xmSelect.render({
name: 'cate_id',
el: '#cate_id',
autoRow: true,
cascader: {
show: true,
indent: 200,
},
prop: {
name: 'name',
value: 'id',
},
data: [],
radio: true,
})
$.get('/admin/store_product/category_arr', function (result) {
demo_cate.update({
data: result.data
})
});
}
demo_cate_id()
function demo_mer_cate_id () {
var demo_cate = xmSelect.render({
name: 'mer_cate_id',
el: '#mer_cate_id',
autoRow: true,
cascader: {
show: true,
indent: 200,
},
prop: {
name: 'name',
value: 'id',
},
data: [],
radio: true,
})
$.get('/admin/store_product/category_arr?id=4', function (result) {
demo_cate.update({
data: result.data
})
});
}
demo_mer_cate_id()
var obj = skuTable.render({
//规格类型 0统一规格 1多规格
isAttributeValue: 0,
//规格类型容器id
isAttributeElemId: 'fairy-is-attribute',
//规格表容器id
specTableElemId: 'fairy-spec-table',
//sku表容器id
skuTableElemId: 'fairy-sku-table',
//规格拖拽排序
sortable: true,
//sku表相同属性值是否合并行
rowspan: true,
//请求成功返回状态码值
requestSuccessCode: 200,
//上传接口地址
//接口要求返回格式为 {"code": 200, "data": {"url": "xxx"}, "msg": ""}
uploadUrl: './json/upload.json',
//统一规格配置项
singleSkuTableConfig: {
thead: [
{title: '销售价(元)', icon: 'layui-icon-cols'},
{title: '市场价(元)', icon: 'layui-icon-cols'},
{title: '成本价(元)', icon: 'layui-icon-cols'},
{title: '库存', icon: 'layui-icon-cols'},
{title: '商品编号', icon: 'layui-icon-cols'},
{title: '重量', icon: 'layui-icon-cols'},
{title: '体积', icon: 'layui-icon-cols'},
// {title: '状态', icon: ''},extension_one extension_two svip_price
],
tbody: [
{type: 'input', field: 'price', value: '', verify: 'required|number', reqtext: '销售价不能为空'},
{type: 'input', field: 'market_price', value: '0', verify: 'required|number', reqtext: '市场价不能为空'},
{type: 'input', field: 'cost_price', value: '0', verify: 'required|number', reqtext: '成本价不能为空'},
{type: 'input', field: 'stock', value: '0', verify: 'required|number', reqtext: '库存不能为空'},
{type: 'input', field: 'bar_code', value: '', },
{type: 'input', field: 'weight', value: '0', verify: 'required|number', reqtext: '重量不能为空'},
{type: 'input', field: 'volume', value: '0', verify: 'required|number', reqtext: '体积不能为空'},
// {type: 'select', field: 'status', option: [{key: '启用', value: '1'}, {key: '禁用', value: '0'}], verify: 'required', reqtext: '状态不能为空'},
]
},
//多规格配置项
multipleSkuTableConfig: {
thead: [
{title: '图片', icon: ''},
{title: '销售价(元)', icon: 'layui-icon-cols'},
{title: '市场价(元)', icon: 'layui-icon-cols'},
{title: '成本价(元)', icon: 'layui-icon-cols'},
{title: '库存', icon: 'layui-icon-cols'},
{title: '商品编号', icon: 'layui-icon-cols'},
{title: '重量', icon: 'layui-icon-cols'},
{title: '体积', icon: 'layui-icon-cols'},
],
tbody: [
{type: 'image', field: 'image', value: '', verify: '', reqtext: ''},
{type: 'input', field: 'price', value: '', verify: 'required|number', reqtext: '销售价不能为空'},
{type: 'input', field: 'market_price', value: '0', verify: 'required|number', reqtext: '市场价不能为空'},
{type: 'input', field: 'cost_price', value: '0', verify: 'required|number', reqtext: '成本价不能为空'},
{type: 'input', field: 'stock', value: '0', verify: 'required|number', reqtext: '库存不能为空'},
{type: 'input', field: 'bar_code', value: '', },
{type: 'input', field: 'weight', value: '0', verify: 'required|number', reqtext: '重量不能为空'},
{type: 'input', field: 'volume', value: '0', verify: 'required|number', reqtext: '体积不能为空'},
]
},
//商品id 配合specDataUrl和skuDataUrl使用
productId: '',
//规格数据, 一般从后台获取
specData: [],
});
//上传缩略图
var upload_thumb = layui.upload.render({
elem: '#upload_btn_thumb',
url: '/admin/api/upload',
done: function (res) {
//如果上传失败
if (res.code == 1) {
return layer.msg('上传失败');
}
//上传成功
$('#upload_box_thumb input').attr('value', res.data.filepath);
$('#upload_box_thumb img').attr('src', res.data.filepath);
}
});
//上传商品轮播图
var upload_thumb = layui.upload.render({
elem: '#upload_btn_thumb2',
url: '/admin/api/upload',
multiple: true,
before: function (obj) {
//预读本地文件示例，不支持ie8
obj.preview(function (index, file, result) {
$('#upload_box_thumb2').append(`
<img src="${result}"
onerror="javascript:this.src='{__GOUGU__}/gougu/images/nonepic600x360.jpg';this.onerror=null;"
width="100" style="max-width: 100%; height:66px;" alt="${file.name}" onclick="delMultipleImgs(this)" title="点击删除"/>
`)
});
},
done: function (res) {
//如果上传失败
if (res.code == 1) {
return layer.msg('上传失败');
}
//上传成功
//追加图片成功追加文件名至图片容器
multiple_images.push(res.data.filepath);
$('#upload_box_thumb2 input').attr('value', multiple_images);
// $('#upload_box_thumb2 img').attr('src', res.data.filepath);
}
});
var editor = layui.tinymce;
var edit = editor.render({
selector: "#container_content",
height: 500
});
//监听提交
form.on('submit(webform)', function (data) {
data.field.content = tinyMCE.editors['container_content'].getContent();
if (data.field.content == '') {
layer.msg('请先完善商品详情');
return false;
}
let callback = function (e) {
layer.msg(e.msg);
if (e.code == 0) {
tool.tabRefresh(71);
tool.sideClose(1000);
}
}
tool.post('/admin/store_product/add', data.field, callback);
return false;
});
}
</script>
{/block}
<!-- /脚本 -->

5
app/admin/view/store_product/datalist.html
View File

@ -15,6 +15,7 @@
<script type="text/html" id="toolbarDemo">
<div class="layui-btn-container">
<span class="layui-btn layui-btn-sm" lay-event="add" data-title="添加商品">+ 添加商品</span>
<span class="layui-btn layui-btn-sm" lay-event="adds" data-title="添加商品">+ 添加商品2</span>
</div>
</script>
@ -125,6 +126,10 @@
tool.side("/admin/store_product/add");
return false;
}
if (obj.event === 'adds') {
tool.side("/admin/store_product/adds");
return false;
}
});
//监听表格行工具事件

1653
public/static/assets/cascader/cascader.css Normal file
View File

File diff suppressed because it is too large Load Diff

2119
public/static/assets/cascader/cascader.js Normal file
View File

File diff suppressed because it is too large Load Diff

396
public/static/assets/cascader/options.js Normal file
View File

@ -0,0 +1,396 @@
var options = [
{
value: 'zhinan',
label: '指南',
children: [{
value: 'shejiyuanze',
label: '设计原则',
disabled: true,
children: [{
disabled: true,
value: 'yizhi',
label: '一致'
}, {
value: 'fankui',
label: '反馈'
}, {
value: 'xiaolv',
label: '效率'
}, {
value: 'kekong',
label: '可控'
}]
}, {
value: 'daohang',
label: '导航',
children: [{
disabled: true,
value: 'cexiangdaohang',
label: '侧向导航'
}, {
value: 'dingbudaohang',
label: '顶部导航'
}]
}]
},
{
value: 'zujian',
label: '组件',
children: [{
value: 'basic',
label: 'Basic',
children: [{
value: 'layout',
label: 'Layout 布局'
}, {
value: 'color',
label: 'Color 色彩'
}, {
value: 'typography',
label: 'Typography 字体'
}, {
value: 'icon',
label: 'Icon 图标'
}, {
value: 'button',
label: 'Button 按钮'
}]
}, {
value: 'form',
label: 'Form',
children: [{
value: 'radio',
label: 'Radio 单选框'
}, {
value: 'checkbox',
label: 'Checkbox 多选框'
}, {
value: 'input',
label: 'Input 输入框'
}, {
value: 'input-number',
label: 'InputNumber 计数器'
}, {
value: 'select',
label: 'Select 选择器'
}, {
value: 'cascader',
label: 'Cascader 级联选择器'
}, {
value: 'switch',
label: 'Switch 开关'
}, {
value: 'slider',
label: 'Slider 滑块'
}, {
value: 'time-picker',
label: 'TimePicker 时间选择器'
}, {
value: 'date-picker',
label: 'DatePicker 日期选择器'
}, {
value: 'datetime-picker',
label: 'DateTimePicker 日期时间选择器'
}, {
value: 'upload',
label: 'Upload 上传'
}, {
value: 'rate',
label: 'Rate 评分'
}, {
value: 'form',
label: 'Form 表单'
}]
}, {
value: 'data',
label: 'Data',
children: [{
value: 'table',
label: 'Table 表格'
}, {
value: 'tag',
label: 'Tag 标签'
}, {
value: 'progress',
label: 'Progress 进度条'
}, {
value: 'tree',
label: 'Tree 树形控件'
}, {
value: 'pagination',
label: 'Pagination 分页'
}, {
value: 'badge',
label: 'Badge 标记'
}]
}, {
value: 'notice',
label: 'Notice',
children: [{
value: 'alert',
label: 'Alert 警告'
}, {
value: 'loading',
label: 'Loading 加载'
}, {
value: 'message',
label: 'Message 消息提示'
}, {
value: 'message-box',
label: 'MessageBox 弹框'
}, {
value: 'notification',
label: 'Notification 通知'
}]
}, {
value: 'navigation',
label: 'Navigation',
children: [{
value: 'menu',
label: 'NavMenu 导航菜单'
}, {
value: 'tabs',
label: 'Tabs 标签页'
}, {
value: 'breadcrumb',
label: 'Breadcrumb 面包屑'
}, {
value: 'dropdown',
label: 'Dropdown 下拉菜单'
}, {
value: 'steps',
label: 'Steps 步骤条'
}]
}, {
value: 'others',
label: 'Others',
children: [{
value: 'dialog',
label: 'Dialog 对话框'
}, {
value: 'tooltip',
label: 'Tooltip 文字提示'
}, {
value: 'popover',
label: 'Popover 弹出框'
}, {
value: 'card',
label: 'Card 卡片'
}, {
value: 'carousel',
label: 'Carousel 走马灯'
}, {
value: 'collapse',
label: 'Collapse 折叠面板'
}]
}]
}, {
value: 'ziyuan',
label: '资源',
children: [{
value: 'axure',
label: 'Axure Components'
}, {
value: 'sketch',
label: 'Sketch Templates'
}, {
value: 'jiaohu',
label: '组件交互文档'
}]
}];
var options2 = [{
value: 'zhinan',
label: '指南',
disabled: true,
children: [{
value: 'shejiyuanze',
label: '设计原则',
children: [{
value: 'yizhi',
label: '一致'
}, {
value: 'fankui',
label: '反馈'
}, {
value: 'xiaolv',
label: '效率'
}, {
value: 'kekong',
label: '可控'
}]
}, {
value: 'daohang',
label: '导航',
children: [{
value: 'cexiangdaohang',
label: '侧向导航'
}, {
value: 'dingbudaohang',
label: '顶部导航'
}]
}]
}, {
value: 'zujian',
label: '组件',
children: [{
value: 'basic',
label: 'Basic',
children: [{
value: 'layout',
label: 'Layout 布局'
}, {
value: 'color',
label: 'Color 色彩'
}, {
value: 'typography',
label: 'Typography 字体'
}, {
value: 'icon',
label: 'Icon 图标'
}, {
value: 'button',
label: 'Button 按钮'
}]
}, {
value: 'form',
label: 'Form',
children: [{
value: 'radio',
label: 'Radio 单选框'
}, {
value: 'checkbox',
label: 'Checkbox 多选框'
}, {
value: 'input',
label: 'Input 输入框'
}, {
value: 'input-number',
label: 'InputNumber 计数器'
}, {
value: 'select',
label: 'Select 选择器'
}, {
value: 'cascader',
label: 'Cascader 级联选择器'
}, {
value: 'switch',
label: 'Switch 开关'
}, {
value: 'slider',
label: 'Slider 滑块'
}, {
value: 'time-picker',
label: 'TimePicker 时间选择器'
}, {
value: 'date-picker',
label: 'DatePicker 日期选择器'
}, {
value: 'datetime-picker',
label: 'DateTimePicker 日期时间选择器'
}, {
value: 'upload',
label: 'Upload 上传'
}, {
value: 'rate',
label: 'Rate 评分'
}, {
value: 'form',
label: 'Form 表单'
}]
}, {
value: 'data',
label: 'Data',
children: [{
value: 'table',
label: 'Table 表格'
}, {
value: 'tag',
label: 'Tag 标签'
}, {
value: 'progress',
label: 'Progress 进度条'
}, {
value: 'tree',
label: 'Tree 树形控件'
}, {
value: 'pagination',
label: 'Pagination 分页'
}, {
value: 'badge',
label: 'Badge 标记'
}]
}, {
value: 'notice',
label: 'Notice',
children: [{
value: 'alert',
label: 'Alert 警告'
}, {
value: 'loading',
label: 'Loading 加载'
}, {
value: 'message',
label: 'Message 消息提示'
}, {
value: 'message-box',
label: 'MessageBox 弹框'
}, {
value: 'notification',
label: 'Notification 通知'
}]
}, {
value: 'navigation',
label: 'Navigation',
children: [{
value: 'menu',
label: 'NavMenu 导航菜单'
}, {
value: 'tabs',
label: 'Tabs 标签页'
}, {
value: 'breadcrumb',
label: 'Breadcrumb 面包屑'
}, {
value: 'dropdown',
label: 'Dropdown 下拉菜单'
}, {
value: 'steps',
label: 'Steps 步骤条'
}]
}, {
value: 'others',
label: 'Others',
children: [{
value: 'dialog',
label: 'Dialog 对话框'
}, {
value: 'tooltip',
label: 'Tooltip 文字提示'
}, {
value: 'popover',
label: 'Popover 弹出框'
}, {
value: 'card',
label: 'Card 卡片'
}, {
value: 'carousel',
label: 'Carousel 走马灯'
}, {
value: 'collapse',
label: 'Collapse 折叠面板'
}]
}]
}, {
value: 'ziyuan',
label: '资源',
children: [{
value: 'axure',
label: 'Axure Components'
}, {
value: 'sketch',
label: 'Sketch Templates'
}, {
value: 'jiaohu',
label: '组件交互文档'
}]
}];

190
public/static/assets/gougu/module/cascader.css Normal file
View File

@ -0,0 +1,190 @@
.layui-rc-cascader {
position: relative;
font-size: 14px;
line-height: 40px;
}
.cascader-input {
cursor: pointer;
position: relative;
width: 100%;
}
.cascader-input > input {
cursor: pointer;
user-select:none;
}
.cascader-input__inner {
text-overflow: ellipsis;
}
.cascader-input--suffix > .cascader-input__inner {
padding-right: 32px;
}
.cascader-input.focus .cascader-input__inner {
border-color: #5FB878 !important;
}
.cascader-input__suffix {
display: flex;
position: absolute;
width: 36px;
height: 100%;
right: 0;
top: 0;
align-items: center;
justify-content: center;
color: #c0c4cc;
transition: all .3s;
pointer-events: none;
cursor: pointer;
}
.cascader-input.focus .cascader-input__suffix {
transform: rotate(180deg);
}
.cascader-dropdown {
display: none;
position: absolute;
left: 0;
top: auto;
padding: 5px 0;
z-index: 899;
}
.layui-selectup .cascader-dropdown {
top: auto;
bottom: 42px;
}
.cascader-input.focus + .cascader-dropdown {
display: block;
}
.cascader-dropdown > .cascader-dropdown-panel {
display: flex;
flex-flow: row;
border: 1px solid #d2d2d2;
background-color: #fff;
border-radius: 2px;
box-shadow: 0 2px 4px rgba(0,0,0,.12);
box-sizing: border-box;
}
.cascader-dropdown-panel > .cascader-dropdown-dl {
min-width: 180px;
min-height: 180px;
max-height: 300px;
overflow-y: auto;
box-sizing: border-box;
color: #606266;
border-right: 1px solid #d2d2d2;
}
.cascader-dropdown-dl {
-ms-overflow-style: none;
overflow-x: hidden;
overflow-y: auto;
}
.cascader-dropdown-dl::-webkit-scrollbar {
display: none;
}
.cascader-dropdown-dl:last-child {
border-right: none;
}
.cascader-dropdown-dd {
cursor: pointer;
position: relative;
display: flex;
align-items: center;
padding: 0 16px;
height: 40px;
line-height: 40px;
outline: none;
color: #606266;
user-select: none;
}
.cascader-dropdown-dd:hover {
transition: .5s all;
background-color: #f2f2f2;
}
.cascader-dropdown-dd.active, .cascader-dropdown-dd.in-active{
background-color: #5FB878;
color: #fff;
}
.cascader-dropdown-dd > span {
flex: 1;
padding-right: 16px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.cascader-dropdown-dd.selected {
color: #5FB878;
font-weight: 600;
}
.cascader-dropdown-dd .layui-icon-ok {
display: none;
}
.cascader-dropdown-dd.selected .layui-icon-ok {
display: inline-block;
}
.cascader-tags {
display: none;
position: absolute;
top: 0;
left: 0;
right: 36px;
cursor: pointer;
margin: 2px 0 0 2px;
background-color: #fff;
}
.cascader-tags-body {
display: flex;
flex-wrap: wrap;
}
.cascader-tags > .cascaer-tags-list {
display: flex;
flex-wrap: wrap;
}
.cascader-tags-item {
white-space: nowrap;
display: inline-flex;
align-items: center;
max-width: 100%;
margin: 4px 0 4px 6px !important;
text-overflow: ellipsis;
background-color: #f0f2f5;
height: 30px;
padding: 0 8px;
line-height: 22px;
box-sizing: border-box;
font-size: 12px;
color: #909399;
user-select: none;
}
.cascader-tags-item > i {
margin-left: 4px;
color: #c0c4cc;
}
.cascader-tags-item > i:hover {
color: #909399;
}

317
public/static/assets/gougu/module/cascader.js Normal file
View File

@ -0,0 +1,317 @@
"use strict";
layui.define(['jquery', 'laytpl'], function (e) {
var mod = 'cascader';
var $ = layui.$, tpl = layui.laytpl;
var sys = {
class: {
container: 'layui-rc-cascader',
inputBox: 'cascader-input',
input: 'cascader-input__inner',
inputSuffix: 'cascader-input__suffix',
tags: 'cascader-tags',
tagBody: 'cascader-tags-body',
tagItem: 'cascader-tags-item',
tagNum: 'cascader-tags-num',
dropdown: 'cascader-dropdown',
dropdownPanel: 'cascader-dropdown-panel',
dropdownDl: 'cascader-dropdown-dl',
dropdownDd: 'cascader-dropdown-dd',
selectup: 'layui-selectup'
},
template: {
main: '<div class="{{d.cls.container}}"><div class="{{d.cls.inputBox}} cascader-input--suffix"><input type="text" readonly placeholder="{{d.opts.placeholder}}" class="{{d.cls.input}} layui-input" /><span class="{{d.cls.inputSuffix}}"><i class="layui-icon layui-icon-triangle-d"></i></span></div><div class="{{d.cls.dropdown}} layui-anim layui-anim-upbit"><div class="{{d.cls.dropdownPanel}}"></div></div>{{# if (d.opts.multiple) { }}<div class="{{d.cls.tags}}"><div class="{{d.cls.tagBody}}"></div></div>{{# } }}</div>',
dropdownDl: '<div class="{{d.cls.dropdownDl}}">{{# layui.each(d.list, function(i, e){ }}<div class="{{d.cls.dropdownDd}}" data-v="{{e.value}}"><span>{{e.label}}</span>{{# if (e.hasChildren) { }}<i class="layui-icon layui-icon-right"></i>{{# } }}<i class="layui-icon layui-icon-ok"></i></div>{{# }); }}</div>',
tags: '{{# layui.each(d.list, function (i, e) { }}<div class="{{d.cls.tagItem}}" data-v="{{e.value}}"><span>{{ e.label }}</span><i class="layui-icon layui-icon-close-fill"></i></div>{{# }); }}',
tagsCollapse: '<div class="{{d.cls.tagItem}}" data-v="{{d.list[0].value}}"><span>{{d.list[0].label}}</span><i class="layui-icon layui-icon-close-fill"></i></div><div class="{{d.cls.tagItem}} {{d.cls.tagNum}}">+{{d.list.length}}</div>'
}
};
var selected = []
var Cascader = function (opts) {
var _s = this;
_s.config = $.extend({}, _s.config, opts);
_s.render();
}
Cascader.prototype.config = {
elem: '',
options: [],
multiple: false,
clearable: false,
collapseTags: true,
filterable: false,
showAllLevels: true,
placeholder: '请选择',
separator: '/',
valueSeparator: ',',
groupSeparator: '|',
props: {
label: 'label',
value: 'value',
children: 'children'
},
debounce: 300,
onChange: function () {}
};
Cascader.prototype.render = function () {
var _s = this, _e = this.config.elem;
$(_e).parent().find(`.${sys.class.container}`).remove(), selected = [], $(_e).hide().after(tpl(sys.template.main).render({ cls: sys.class, opts: _s.config }));
if (typeof _s.config.onChange !== 'function') {
_s.config.onChange = function () {}
}
_s.renderData([]), _s.eventRegister(), _s.showLabel();
}
Cascader.prototype.eventRegister = function () {
var _s = this, _e = _s.config.elem, _cls = sys.class, $c = $(_e).next();
$c.find(`.${_cls.inputBox}`).on('click', _s.onShow.bind(_s));
$c.find(`.${_cls.tags}`).on('click', _s.onShow.bind(_s));
$c.find(`.${_cls.tags}`).on('click', `.${_cls.tagItem} > i`, function (e) { e.stopPropagation(); _s.onSelect.bind(_s)($(this).closest(`.${_cls.tagItem}`).data('v')); });
$c.on('click', `.${_cls.dropdownDd}`, function (e) { e.stopPropagation(); _s.onSelect.bind(_s)($(this).data('v'))});
$(document).off('click', _s.maskTap.bind(_s)), $(document).on('click', _s.maskTap.bind(_s));
}
Cascader.prototype.maskTap = function (e) {
var _s = this, _e = _s.config.elem, $c = $(_e).next(), _target = e.target, _item = $c.find(_target);
if (_item.length === 0) {
_s.onClose.bind(_s)(e);
}
}
Cascader.prototype.renderData = function (treePath) {
var _s = this, _e = this.config.elem, _cls = sys.class, $c = $(_e).next(), $dp = $c.find(`.${_cls.dropdownPanel}`), _options = _s.config.options;
if (treePath.length > 0) {
_options = _s.getChildren(treePath);
}
$dp.find(`.${_cls.dropdownDl}`).each(function (i, e) {
if (i >= treePath.length) {
$(e).remove();
}
});
if (_options.length === 0) {
return;
}
var _$ddList = $(tpl(sys.template.dropdownDl).render({ list: _options.map(function (e, i) {
return {
label: e[_s.config.props.label],
value: treePath.concat([e[_s.config.props.value]]).join(_s.config.valueSeparator),
hasChildren: e[_s.config.props.children] === undefined ? false : e[_s.config.props.children].length > 0
}
}), cls: sys.class }));
_$ddList.appendTo($dp);
_s.highlight();
}
Cascader.prototype.onSelect = function (v) {
var _s = this, _e = _s.config.elem, _cls = sys.class, $c = $(_e).next(), $dp = $c.find(`.${_cls.dropdownPanel}`);
var _v = _s.getSelectedValue(), _treePath = (`${v}`.split(_s.config.valueSeparator));
if (_s.getChildren(_treePath).length > 0) {
selected = _treePath;
_s.renderData(_treePath);
_s.highlight();
return;
}
if (_s.config.multiple) {
var _item = _s.getItemByPath(_treePath), _value = _s.convertValue(_item)
var _i = _v.indexOf(_value);
if (_i >= 0) {
_v.splice(_i, 1)
} else {
_v = _v.concat(_value);
}
var _elementValue = _v.join(_s.config.groupSeparator);
$(_e).val(_elementValue), _s.showLabel(), _s.config.onChange(_value, _elementValue);
} else {
var _value = _s.convertValue(_s.getItemByPath(_treePath));
$(_e).val(_value), _s.showLabel(), _s.onClose(), _s.config.onChange(_value);
}
_s.highlight();
}
Cascader.prototype.showLabel = function () {
var _s = this, _e = this.config.elem, _cls = sys.class, $c = $(_e).next(), $tags = $c.find(`.${_cls.tags}`);
var _selectedOptions = _s.getSelectOptions();
if (_s.config.multiple) {
var $input = $c.find(`.${_cls.input}`), $tagBody = $tags.find(`.${_cls.tagBody}`), _labels = _selectedOptions.map(function (e) { return { label: _s.convertInputText(e), value: _s.convertValue(e) }; });
if (_labels.length === 0) {
$input.attr('placeholder', _s.config.placeholder), $input.height('')
$tags.hide();
return;
}
tpl(_s.config.collapseTags ? sys.template.tagsCollapse : sys.template.tags).render({ cls: sys.class, list: _labels }, function (html) {
$tagBody.html(html);
setTimeout(function () {
$input.attr('placeholder', ''), $input.height($tags.height() + 2), $tags.show();
}, 300);
});
} else {
$c.find(`.${_cls.input}`).val(_s.convertInputText(_selectedOptions ? _selectedOptions[0] : null));
}
}
Cascader.prototype.getChildren = function (path) {
var _s = this;
if (!Array.isArray(path)) {
path = path.split(_s.config.valueSeparator);
}
return path.reduce(function (res, e) {
var _selected = res.filter(function (_e, _i) {
return _e[_s.config.props.value].toString() === e.toString();
});
_selected = _selected.length > 0 ? _selected[0] : {};
return _selected.hasOwnProperty(_s.config.props.children) ? _selected[_s.config.props.children] : [];
}, _s.config.options)
}
Cascader.prototype.getItemByPath = function (path) {
var _s = this, _options = _s.config.options;
if (!Array.isArray(path)) {
path = path.split(_s.config.valueSeparator);
}
return path.reduce(function (res, e) {
var restruct = _options.filter(function (_e) {
return _e[_s.config.props.value].toString() === e.toString()
})
if (restruct.length > 0) {
res.push(restruct[0]);
_options = restruct[0][_s.config.props.children] !== undefined ? restruct[0][_s.config.props.children] : [];
}
return res
}, [])
}
Cascader.prototype.getSelectOptions = function () {
var _s = this, _v = _s.getSelectedValue();
return _v.map(function (el) {
var _options = _s.config.options;
return el.split(_s.config.valueSeparator).reduce(function (res, e) {
var restruct = _options.filter(function (_e) {
return _e[_s.config.props.value].toString() === e.toString();
});
if (restruct.length > 0) {
res.push(restruct[0]);
_options = restruct[0][_s.config.props.children] !== undefined ? restruct[0][_s.config.props.children] : [];
}
return res
}, [])
});
}
Cascader.prototype.highlight = function (callback) {
var _s = this, _e = this.config.elem, _cls = sys.class, $c = $(_e).next(), $dp = $c.find(`.${_cls.dropdownPanel}`);
var _v = _s.getSelectedValue();
var _marginObject = function (arr, obj) {
var e = arr.shift();
if (!obj.hasOwnProperty(e)) {
obj[e] = {}
}
if (arr.length > 0) {
obj[e] = _marginObject(arr, obj[e])
}
return obj;
}
_v = _v.concat(selected.join(_s.config.valueSeparator)).reduce(function (res, e) {
return _marginObject(e.split(_s.config.valueSeparator), res);
}, {});
$dp.find(`.${_cls.dropdownDd}`).removeClass('selected in-active');
$dp.find(`.${_cls.dropdownDl}`).each(function (i, e) {
if (_v === undefined) { return; }
var _keys = Object.keys(_v);
if (_keys.length > 0) {
_keys.forEach(function (_e) {
var _key = selected.slice(0, i).concat(_e).join(_s.config.valueSeparator);
$(e).find(`.${_cls.dropdownDd}[data-v="${_key}"]`).addClass(_s.getChildren(_key).length > 0 ? (_s.config.multiple ? 'in-active' : '') : 'selected')
});
_v = _v[selected[i]]
}
})
if (callback !== undefined) {
callback.call(this);
}
}
Cascader.prototype.getSelectedValue = function () {
var _s = this, _e = this.config.elem;
var value = $(_e).val() === ""
? []
: $(_e).val().split(_s.config.groupSeparator)
return Array.isArray(value) ? value : [value];
}
Cascader.prototype.convertInputText = function (v) {
if (!v) {
return '';
}
var _s = this, _e = this.config.elem, _cls = sys.class, $c = $(_e).next(), $input = $c.find(`.${_cls.input}`);
return _s.config.showAllLevels
? v.map(function (e) { return e[_s.config.props.label]; }).join(` ${_s.config.separator} `)
: v[v.length - 1][_s.config.props.label];
}
Cascader.prototype.convertValue = function (v) {
var _s = this;
if (!Array.isArray(v)) {
v = [v];
}
return v.map(function (e) { return e[_s.config.props.value]; }).join(_s.config.valueSeparator)
}
Cascader.prototype.onShow = function (e) {
var _s = this, _e = this.config.elem, _cls = sys.class, $c = $(_e).next(), $input = $c.find(`.${_cls.input}`);
if ($c.find(`.${_cls.inputBox}`).hasClass('focus')) {
return _s.onClose.bind(_s)(e);
}
if (document.body.offsetHeight - ($input.offset().top + $input.height()) < 300 && $input.offset().top > 300) {
$c.addClass(_cls.selectup);
}
$c.find(`.${_cls.inputBox}`).addClass('focus');
}
Cascader.prototype.onClose = function (e) {
var _e = this.config.elem, $c = $(_e).next(), _cls = sys.class;
$c.removeClass(_cls.selectup);
$c.find(`.${_cls.inputBox}`).removeClass('focus');
}
e(mod, {
render (opts) {
if (opts.elem === undefined) {
return console.error(mod, 'elem is undefined');
} else if (typeof opts.elem !== 'object' || !(opts.elem instanceof HTMLElement)) {
return console.error(mod, 'elem is not HTMLElement');
}
return new Cascader(opts);
}
});
layui.link(layui.cache.base + 'cascader/cascader.css')
});

743
public/static/assets/gougu/module/skuTable.js Normal file
View File

@ -0,0 +1,743 @@
/*
* Name: skuTable
* Author: cshaptx4869
* Project: https://github.com/cshaptx4869/skuTable
*/
layui.define(['jquery', 'form', 'upload', 'layer', 'sortable'], function (exports) {
"use strict";
var $ = layui.jquery,
form = layui.form,
upload = layui.upload,
layer = layui.layer,
sortable = layui.sortable,
MOD_NAME = 'skuTable';
//工具类
class Util {
static config = {
shade: [0.02, '#000'],
time: 2000
};
static msg = {
// 成功消息
success: function (msg, callback = null) {
return layer.msg(msg, {
icon: 1,
shade: Util.config.shade,
scrollbar: false,
time: Util.config.time,
shadeClose: true
}, callback);
},
// 失败消息
error: function (msg, callback = null) {
return layer.msg(msg, {
icon: 2,
shade: Util.config.shade,
scrollbar: false,
time: Util.config.time,
shadeClose: true
}, callback);
},
// 警告消息框
alert: function (msg, callback = null) {
return layer.alert(msg, {end: callback, scrollbar: false});
},
// 对话框
confirm: function (msg, ok, no) {
var index = layer.confirm(msg, {title: '操作确认', btn: ['确认', '取消']}, function () {
typeof ok === 'function' && ok.call(this);
}, function () {
typeof no === 'function' && no.call(this);
Util.msg.close(index);
});
return index;
},
// 消息提示
tips: function (msg, callback = null) {
return layer.msg(msg, {
time: Util.config.time,
shade: Util.config.shade,
end: callback,
shadeClose: true
});
},
// 加载中提示
loading: function (msg, callback = null) {
return msg ? layer.msg(msg, {
icon: 16,
scrollbar: false,
shade: Util.config.shade,
time: 0,
end: callback
}) : layer.load(2, {time: 0, scrollbar: false, shade: Util.config.shade, end: callback});
},
// 输入框
prompt: function (option, callback = null) {
return layer.prompt(option, callback);
},
// 关闭消息框
close: function (index) {
return layer.close(index);
}
};
static request = {
post: function (option, ok, no, ex) {
return Util.request.ajax('post', option, ok, no, ex);
},
get: function (option, ok, no, ex) {
return Util.request.ajax('get', option, ok, no, ex);
},
ajax: function (type, option, ok, no, ex) {
type = type || 'get';
option.url = option.url || '';
option.data = option.data || {};
option.statusName = option.statusName || 'code';
option.statusCode = option.statusCode || 200;
ok = ok || function (res) {
};
no = no || function (res) {
var msg = res.msg == undefined ? '返回数据格式有误' : res.msg;
Util.msg.error(msg);
return false;
};
ex = ex || function (res) {
};
if (option.url == '') {
Util.msg.error('请求地址不能为空');
return false;
}
var index = Util.msg.loading('加载中');
$.ajax({
url: option.url,
type: type,
contentType: "application/x-www-form-urlencoded; charset=UTF-8",
dataType: "json",
data: option.data,
timeout: 60000,
success: function (res) {
Util.msg.close(index);
if (res[option.statusName] == option.statusCode) {
return ok(res);
} else {
return no(res);
}
},
error: function (xhr, textstatus, thrown) {
Util.msg.error('Status:' + xhr.status + '，' + xhr.statusText + '，请稍后再试！', function () {
ex(xhr);
});
return false;
}
});
}
};
static tool = {
uuid: function uuid(randomLength = 8) {
return Number(Math.random().toString().substr(2, randomLength) + Date.now()).toString(36)
}
}
}
class SkuTable {
options = {
isAttributeValue: 0, //规格类型 0统一规格 1多规格
isAttributeElemId: 'fairy-is-attribute', //规格类型容器id
specTableElemId: 'fairy-spec-table', //规格表容器id
skuTableElemId: 'fairy-sku-table', //SKU表容器id
rowspan: false, //是否开启SKU行合并,
sortable: false, //规格拖拽排序
skuIcon: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMDY3IDc5LjE1Nzc0NywgMjAxNS8wMy8zMC0yMzo0MDo0MiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjczN0RFNzU1MTk1RTExRTlBMEQ5OEEwMEM5NDNFOEE4IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjczN0RFNzU2MTk1RTExRTlBMEQ5OEEwMEM5NDNFOEE4Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6NzM3REU3NTMxOTVFMTFFOUEwRDk4QTAwQzk0M0U4QTgiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NzM3REU3NTQxOTVFMTFFOUEwRDk4QTAwQzk0M0U4QTgiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz5NHmJUAAAA+0lEQVR42pySPwsBYRzH7zk3KIP34CVIKSOrELLJdpuymyzew90kIwMZvACDsCldWZTFn5WQpPN5rlPXlXJ39en7/J57fn+fR9i2rYT5NNM0B2gC3n/6qHBQDMOwZNYg4LOQ3vcQld40/w6lC13Xbd/eHElC3G1JqL4DFWSNprz7BMpAFJ6YkW+jThaosuxAD/rY6R9lCmeq8IAmtKBA1A1OW9YjtIS9QvPYRZkcXo43EzqjF/mDQ5an7ALShTFk4eQOsgFTWeoNKl4nt68J0oYc1LHLbmtDp1IyLgPe4QCuMkIsyAWSuYbs5HD29DML8OTkHR9F2Ef+EWAAdwmkvBAtw94AAAAASUVORK5CYII=',
uploadUrl: '',
requestSuccessCode: 1, //请求成功返回状态码值
specDataDelete: false, //开启规格删除
productId: '', //商品id 配合specDataUrl和skuDataUrl使用
specData: [], //规格数据
specDataUrl: '', //优先级大于specData
skuData: {}, //SKU数据
skuDataUrl: '', //优先级大于skuDataUrl
skuNameType: 0,
skuNameDelimiter: '-',
//统一规格配置项
singleSkuTableConfig: {
thead: [
{title: '销售价(元)', icon: 'layui-icon-cols'},
{title: '市场价(元)', icon: 'layui-icon-cols'},
{title: '成本价(元)', icon: 'layui-icon-cols'},
{title: '库存', icon: 'layui-icon-cols'},
{title: '状态', icon: ''},
],
tbody: [
{type: 'input', field: 'price', value: '', verify: 'required|number', reqtext: '销售价不能为空'},
{type: 'input', field: 'market_price', value: '0', verify: 'required|number', reqtext: '市场价不能为空'},
{type: 'input', field: 'cost_price', value: '0', verify: 'required|number', reqtext: '成本价不能为空'},
{type: 'input', field: 'stock', value: '0', verify: 'required|number', reqtext: '库存不能为空'},
{type: 'select', field: 'status', option: [{key: '启用', value: '1'}, {key: '禁用', value: '0'}], verify: 'required', reqtext: '状态不能为空'},
]
},
//多规格配置项
multipleSkuTableConfig: {
thead: [
{title: '图片', icon: ''},
{title: '销售价(元)', icon: 'layui-icon-cols'},
{title: '市场价(元)', icon: 'layui-icon-cols'},
{title: '成本价(元)', icon: 'layui-icon-cols'},
{title: '库存', icon: 'layui-icon-cols'},
{title: '状态', icon: ''},
],
tbody: [
{type: 'image', field: 'picture', value: '', verify: '', reqtext: ''},
{type: 'input', field: 'price', value: '', verify: 'required|number', reqtext: '销售价不能为空'},
{type: 'input', field: 'market_price', value: '0', verify: 'required|number', reqtext: '市场价不能为空'},
{type: 'input', field: 'cost_price', value: '0', verify: 'required|number', reqtext: '成本价不能为空'},
{type: 'input', field: 'stock', value: '0', verify: 'required|number', reqtext: '库存不能为空'},
{
type: 'select',
field: 'status',
option: [{key: '启用', value: '1'}, {key: '禁用', value: '0'}],
verify: '',
reqtext: ''
},
]
}
};
constructor(options) {
this.options = $.extend(this.options, options);
if (this.options.skuDataUrl && this.options.productId) {
Util.request.get({
url: this.options.skuDataUrl,
data: {
product_id: this.options.productId
},
statusCode: this.options.requestSuccessCode
}, (res) => {
this.options.skuData = res.data;
this.css();
this.render();
this.listen();
});
} else {
this.css();
this.render();
this.listen();
}
}
css() {
$('head').append(`<style>
${this.options.sortable ? `#${this.options.specTableElemId} tbody tr {cursor: move;transition:unset;-webkit-transition:unset;}` : ''}
#${this.options.specTableElemId} tbody tr td:first-child > i.layui-icon-delete {
margin-left:3px;
}
#${this.options.specTableElemId} tbody tr td:last-child > i.layui-icon-delete {
margin-right:15px;
margin-left:-7px;
vertical-align: top;
}
#${this.options.specTableElemId} tbody tr td div.fairy-spec-value-create,
#${this.options.specTableElemId} tfoot tr td div.fairy-spec-create {
display: inline-block;
color: #1E9FFF;
vertical-align: middle;
padding: 4px 6px;
}
#${this.options.specTableElemId} tfoot tr td div.layui-form-checkbox {
margin-top: 0;
}
#${this.options.specTableElemId} tfoot tr td div.layui-form-checkbox > span{
color: #1E9FFF;
}
#${this.options.skuTableElemId} tbody tr td > img.fairy-sku-img{
width: 16px;
height: 16px;
padding: 6px;
border: 1px solid #eceef1;
vertical-align: middle;
}
#${this.options.specTableElemId} tbody tr td > i.layui-icon-delete,
#${this.options.specTableElemId} tbody tr td div.fairy-spec-value-create,
#${this.options.specTableElemId} tfoot tr td div.fairy-spec-create,
#${this.options.skuTableElemId} thead tr th > i.layui-icon,
#${this.options.skuTableElemId} tbody tr td > img.fairy-sku-img {
cursor: pointer;
}
</style>`
);
}
listen() {
var that = this;
/**
* 监听规格类型选择
*/
form.on('radio(fairy-is-attribute)', function (data) {
that.options.isAttributeValue = data.value;
that.render();
});
/**
* 监听所选规格值的变化
*/
form.on('checkbox(fairy-spec-filter)', function (data) {
var specData = [];
$.each($(`#${that.options.specTableElemId} tbody tr`), function () {
var child = [];
$.each($(this).find('input[type=checkbox]'), function () {
child.push({id: $(this).val(), title: $(this).attr('title'), checked: $(this).is(':checked')});
});
var specItem = {
id: $(this).find('td').eq(0).data('spec-id'),
title: $(this).find('td').eq(0).text(),
child: child
};
specData.push(specItem);
});
that.options.specData = specData;
that.options.skuData = $.extend(that.options.skuData, that.getFormSkuData());
that.resetRender(that.options.skuTableElemId);
that.renderMultipleSkuTable();
});
/**
* 监听批量赋值
*/
$(document).on('click', `#${this.options.skuTableElemId} thead tr th i`, function () {
var thisI = this;
Util.msg.prompt({title: $(thisI).parent().text().trim() + '批量赋值'}, function (value, index, elem) {
$.each($(`#${that.options.skuTableElemId} tbody tr`), function () {
var index = that.options.rowspan ?
$(thisI).parent().index() - ($(`#${that.options.skuTableElemId} thead th.fairy-spec-name`).length - $(this).children('td.fairy-spec-value').length) :
$(thisI).parent().index();
$(this).find('td').eq(index).children('input').val(value);
});
Util.msg.close(index);
});
});
/**
* 监听添加规格
*/
$(document).on('click', `#${this.options.specTableElemId} .fairy-spec-create`, function () {
layer.prompt({title: '规格'}, function (value, index, elem) {
var specTitleArr = [];
$.each(that.options.specData, function (k, v) {
specTitleArr.push(v.title)
})
if (specTitleArr.includes(value)) {
Util.msg.error('规格名已存在');
} else {
that.options.specData.push({id: Util.tool.uuid(), title: value, child: []});
that.resetRender(that.options.specTableElemId);
that.renderSpecTable();
}
Util.msg.close(index);
});
});
/**
* 监听添加规格值
*/
$(document).on('click', `#${this.options.specTableElemId} .fairy-spec-value-create`, function () {
var specId = $(this).parent('td').prev().data('spec-id');
layer.prompt({title: '规格值'}, function (value, index, elem) {
that.options.specData.forEach(function (v, i) {
if (v.id == specId) {
v.child.push({id: Util.tool.uuid(), title: value, checked: false});
}
});
that.resetRender(that.options.specTableElemId);
that.renderSpecTable();
Util.msg.close(index);
});
});
/**
* 监听删除规格/规格值
*/
$(document).on('click', `#${this.options.specTableElemId} i.layui-icon-delete`, function () {
if (typeof $(this).attr('data-spec-index') !== "undefined") {
that.options.specData.splice($(this).data('spec-index'), 1);
that.resetRender([that.options.specTableElemId, that.options.skuTableElemId]);
that.renderSpecTable();
that.renderMultipleSkuTable();
} else if (typeof $(this).attr('data-spec-value-index') !== "undefined") {
var [i, ii] = $(this).data('spec-value-index').split('-');
that.options.specData[i].child.splice(ii, 1);
that.resetRender([that.options.specTableElemId, that.options.skuTableElemId]);
that.renderSpecTable();
that.renderMultipleSkuTable();
}
});
/**
* 监听规格表是否开启删除
*/
form.on('checkbox(fairy-spec-delete-filter)', function (data) {
that.options.specDataDelete = data.elem.checked;
if (data.elem.checked) {
$(`#${that.options.specTableElemId} tbody tr i.layui-icon-delete`).removeClass('layui-hide');
} else {
$(`#${that.options.specTableElemId} tbody tr i.layui-icon-delete`).addClass('layui-hide')
}
});
/**
* 图片移入放大/移出恢复
*/
var imgLayerIndex = null;
$(document).on('mouseenter', '.fairy-sku-img', function () {
imgLayerIndex = layer.tips('<img src="' + $(this).attr('src') + '" style="max-width:200px;" alt=""/>', this, {
tips: [2, 'rgba(41,41,41,.5)'],
time: 0
});
}).on('mouseleave', '.fairy-sku-img', function () {
layer.close(imgLayerIndex);
})
}
/**
* 渲染
*/
render() {
this.resetRender();
this.renderIsAttribute(this.options.isAttributeValue);
if (this.options.isAttributeValue == '1') {
if (this.options.specDataUrl && this.options.productId) {
Util.request.get({
url: this.options.specDataUrl,
productId: this.options.productId,
statusCode: this.options.requestSuccessCode
}, (res) => {
this.options.specData = res.data;
this.renderSpecTable();
this.renderMultipleSkuTable();
});
} else {
this.renderSpecTable();
this.renderMultipleSkuTable();
}
} else {
this.renderSingleSkuTable();
}
}
/**
* 重新渲染
* @param targets
*/
resetRender(targets) {
if (typeof targets === 'string') {
$(`#${targets}`).parents('.layui-form-item').replaceWith(`<div id="${targets}"></div>`);
} else if ($.isArray(targets) && targets.length) {
targets.forEach((item) => {
$(`#${item}`).parents('.layui-form-item').replaceWith(`<div id="${item}"></div>`);
})
} else {
$(`#${this.options.isAttributeElemId}`).parents('.layui-form-item').replaceWith(`<div id="${this.options.isAttributeElemId}"></div>`);
$(`#${this.options.specTableElemId}`).parents('.layui-form-item').replaceWith(`<div id="${this.options.specTableElemId}"></div>`);
$(`#${this.options.skuTableElemId}`).parents('.layui-form-item').replaceWith(`<div id="${this.options.skuTableElemId}"></div>`);
}
}
/**
* 渲染规格类型
* @param checkedValue
*/
renderIsAttribute(checkedValue) {
var html = '';
html += `<input type="radio" name="is_attribute" title="统一规格" value="0" lay-filter="fairy-is-attribute" ${checkedValue == '0' ? 'checked' : ''}>`;
html += `<input type="radio" name="is_attribute" title="多规格" value="1" lay-filter="fairy-is-attribute" ${checkedValue == '1' ? 'checked' : ''}>`;
this.renderFormItem('规格类型', html, this.options.isAttributeElemId);
}
renderSingleSkuTable() {
var that = this,
table = `<table class="layui-table" id="${this.options.skuTableElemId}">`;
table += '<thead>';
table += '<tr>';
this.options.singleSkuTableConfig.thead.forEach((item) => {
table += `<th>${item.title}</th>`;
});
table += '</tr>';
table += '</thead>';
table += '<tbody>';
table += '<tr>';
that.options.singleSkuTableConfig.tbody.forEach(function (item) {
switch (item.type) {
case "select":
table += '<td>';
table += `<select name="${item.field}" lay-verify="${item.verify}" lay-reqtext="${item.reqtext}">`;
item.option.forEach(function (o) {
table += `<option value="${o.value}" ${that.options.skuData[item.field] == o.value ? 'selected' : ''}>${o.key}</option>`;
});
table += '</select>';
table += '</td>';
break;
case "input":
default:
table += '<td>';
table += `<input type="text" name="${item.field}" value="${that.options.skuData[item.field] ? that.options.skuData[item.field] : item.value}" class="layui-input" lay-verify="${item.verify}" lay-reqtext="${item.reqtext}">`;
table += '</td>';
break;
}
});
table += '</tr>';
table += '<tbody>';
table += '</table>';
this.renderFormItem('SKU', table, this.options.skuTableElemId);
}
/**
* 渲染规格表
*/
renderSpecTable() {
var that = this,
table = `<table class="layui-table" id="${this.options.specTableElemId}"><thead><tr><th>规格名</th><th>规格值</th></tr></thead><colgroup><col width="140"></colgroup><tbody>`;
$.each(this.options.specData, function (index, item) {
table += that.options.sortable ? `<tr data-id="${item.id}">` : '<tr>';
table += `<td data-spec-id="${item.id}">${item.title}<i class="layui-icon layui-icon-delete layui-anim layui-anim-scale ${that.options.specDataDelete ? '' : 'layui-hide'}" data-spec-index="${index}"></i></td>`;
table += '<td>';
$.each(item.child, function (key, value) {
table += `<input type="checkbox" title="${value.title}" lay-filter="fairy-spec-filter" value="${value.id}" ${value.checked ? 'checked' : ''} /><i class="layui-icon layui-icon-delete layui-anim layui-anim-scale ${that.options.specDataDelete ? '' : 'layui-hide'}" data-spec-value-index="${index}-${key}"></i> `;
});
table += '<div class="fairy-spec-value-create"><i class="layui-icon layui-icon-addition"></i>规格值</div>'
table += '</td>';
table += '</tr>';
});
table += '</tbody>';
table += '<tfoot><tr><td colspan="2">';
table += `<input type="checkbox" title="开启删除" lay-skin="primary" lay-filter="fairy-spec-delete-filter" ${that.options.specDataDelete ? 'checked' : ''}/>`;
table += `<div class="fairy-spec-create"><i class="layui-icon layui-icon-addition"></i>规格</div>`;
table += '</td></tr></tfoot>';
table += '</table>';
this.renderFormItem('商品规格', table, this.options.specTableElemId);
if (this.options.sortable) {
/**
* 拖拽
*/
var sortableObj = sortable.create($(`#${this.options.specTableElemId} tbody`)[0], {
animation: 1000,
onEnd: (evt) => {
//获取拖动后的排序
var sortArr = sortableObj.toArray(),
sortSpecData = [];
this.options.specData.forEach((item) => {
sortSpecData[sortArr.indexOf(String(item.id))] = item;
});
this.options.specData = sortSpecData;
this.resetRender(that.options.skuTableElemId);
this.renderMultipleSkuTable();
},
});
}
}
/**
* 渲染sku表
*/
renderMultipleSkuTable() {
var that = this, table = `<table class="layui-table" id="${this.options.skuTableElemId}">`;
if ($(`#${this.options.specTableElemId} tbody input[type=checkbox]:checked`).length) {
var prependThead = [], prependTbody = [];
$.each(this.options.specData, function (index, item) {
var isShow = item.child.some(function (value, index, array) {
return value.checked;
});
if (isShow) {
prependThead.push(item.title);
var prependTbodyItem = [];
$.each(item.child, function (key, value) {
if (value.checked) {
prependTbodyItem.push({id: value.id, title: value.title});
}
});
prependTbody.push(prependTbodyItem);
}
});
table += '<colgroup>' + '<col width="70">'.repeat(prependThead.length + 1) + '</colgroup>';
table += '<thead>';
if (prependThead.length > 0) {
var theadTr = '<tr>';
theadTr += prependThead.map(function (t, i, a) {
return '<th class="fairy-spec-name">' + t + '</th>';
}).join('');
this.options.multipleSkuTableConfig.thead.forEach(function (item) {
theadTr += '<th>' + item.title + (item.icon ? ' <i class="layui-icon ' + item.icon + '"></i>' : '') + '</th>';
});
theadTr += '</tr>';
table += theadTr;
}
table += '</thead>';
if (this.options.rowspan) {
var skuRowspanArr = [];
prependTbody.forEach(function (v, i, a) {
var num = 1, index = i;
while (index < a.length - 1) {
num *= a[index + 1].length;
index++;
}
skuRowspanArr.push(num);
});
}
var prependTbodyTrs = [];
prependTbody.reduce(function (prev, cur, index, array) {
var tmp = [];
prev.forEach(function (a) {
cur.forEach(function (b) {
tmp.push({id: a.id + that.options.skuNameDelimiter + b.id, title: a.title + that.options.skuNameDelimiter + b.title});
})
});
return tmp;
}).forEach(function (item, index, array) {
var tr = '<tr>';
tr += item.title.split(that.options.skuNameDelimiter).map(function (t, i, a) {
if (that.options.rowspan) {
if (index % skuRowspanArr[i] === 0 && skuRowspanArr[i] > 1) {
return '<td class="fairy-spec-value" rowspan="' + skuRowspanArr[i] + '">' + t + '</td>';
} else if (skuRowspanArr[i] === 1) {
return '<td class="fairy-spec-value">' + t + '</td>';
} else {
return '';
}
} else {
return '<td>' + t + '</td>';
}
}).join('');
that.options.multipleSkuTableConfig.tbody.forEach(function (c) {
switch (c.type) {
case "image":
tr += '<td><input type="hidden" name="' + that.makeSkuName(item, c) + '" value="' + (that.options.skuData[that.makeSkuName(item, c)] ? that.options.skuData[that.makeSkuName(item, c)] : c.value) + '" lay-verify="' + c.verify + '" lay-reqtext="' + c.reqtext + '"><img class="fairy-sku-img" src="' + (that.options.skuData[that.makeSkuName(item, c)] ? that.options.skuData[that.makeSkuName(item, c)] : that.options.skuIcon) + '" alt="' + c.field + '图片"></td>';
break;
case "select":
tr += '<td><select name="' + that.makeSkuName(item, c) + '" lay-verify="' + c.verify + '" lay-reqtext="' + c.reqtext + '">';
c.option.forEach(function (o) {
tr += '<option value="' + o.value + '" ' + (that.options.skuData[that.makeSkuName(item, c)] == o.value ? 'selected' : '') + '>' + o.key + '</option>';
});
tr += '</select></td>';
break;
case "input":
default:
tr += '<td><input type="text" name="' + that.makeSkuName(item, c) + '" value="' + (that.options.skuData[that.makeSkuName(item, c)] ? that.options.skuData[that.makeSkuName(item, c)] : c.value) + '" class="layui-input" lay-verify="' + c.verify + '" lay-reqtext="' + c.reqtext + '"></td>';
break;
}
});
tr += '</tr>';
tr && prependTbodyTrs.push(tr);
});
table += '<tbody>';
if (prependTbodyTrs.length > 0) {
table += prependTbodyTrs.join('');
}
table += '</tbody>';
} else {
table += '<thead></thead><tbody></tbody><tfoot><tr><td>请先选择规格值</td></tr></tfoot>';
}
table += '</table>';
this.renderFormItem('SKU', table, this.options.skuTableElemId);
//上传
if (this.options.uploadUrl) {
upload.render({
elem: '.fairy-sku-img',
url: this.options.uploadUrl,
exts: 'png|jpg|ico|jpeg|gif',
accept: 'images',
acceptMime: 'image/*',
multiple: false,
done: function (res) {
if (res.code === that.options.requestSuccessCode) {
var url = res.data.url;
$(this.item).attr('src', url).prev().val(url);
Util.msg.success(res.msg);
} else {
var msg = res.msg == undefined ? '返回数据格式有误' : res.msg;
Util.msg.error(msg);
}
return false;
}
});
}
}
/**
* 渲染表单项
* @param label 标题
* @param content 内容
* @param target id
* @param isRequired
*/
renderFormItem(label, content, target, isRequired = true) {
var html = '';
html += '<div class="layui-form-item">';
html += `<label class="layui-form-label ${isRequired ? 'required' : ''}">${label.length ? label : ''}</label>`;
html += '<div class="layui-input-block">';
html += content;
html += '</div>';
html += '</div>';
$(`#${target}`).replaceWith(html);
form.render();
}
makeSkuName(sku, conf) {
return 'skus[' + (this.options.skuNameType === 0 ? sku.id : sku.title) + '][' + conf.field + ']';
}
getSpecData() {
return this.options.specData;
}
getFormFilter() {
var fariyForm = $('form.fairy-form');
if (!fariyForm.attr('lay-filter')) {
fariyForm.attr('lay-filter', 'fairy-form-filter');
}
return fariyForm.attr('lay-filter');
}
getFormSkuData() {
var skuData = {};
$.each(form.val(this.getFormFilter()), function (key, value) {
if (key.startsWith('skus')) {
skuData[key] = value;
}
});
return skuData;
}
}
exports(MOD_NAME, {
render: function (options) {
return new SkuTable(options);
}
})
});

3722
public/static/assets/gougu/module/sortable.js Normal file
View File

File diff suppressed because it is too large Load Diff