xinyouhe/orzar-admin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

sku

Browse Source
This commit is contained in:
浅念
2025-06-20 17:05:56 +08:00
parent b2a1d5e84e
commit 1374d1938a
23 changed files with 2248 additions and 180 deletions
Download Patch File Download Diff File Expand all files Collapse all files
page/table/skuedit.html
+243
View File
@@ -0,0 +1,243 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>layui</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="../../lib/layui-v2.6.3/css/layui.css" media="all">
<link rel="stylesheet" href="../../assets/css/public.css" media="all">
<style>
body {
background-color: #ffffff;
}
.img-3 {
max-width: 36px;
max-height: 36px;
border-radius: 6px;
}
.upload-item img{
height: 40px;
}
.feature-item{
border: 1px solid #e6e6e6;
padding: 10px;
margin-bottom: 10px;
}
</style>
</head>
<body>
<div class="layui-form layuimini-form" lay-filter="edit">
<div class="layui-form-item">
<label class="layui-form-label required" data-i18n="seach.name"></label>
<div class="layui-input-block">
<input type="hidden" name="id" id="idedt" value="" />
<input type="hidden" name="vehicle_id" id="vehicle_id" value="" />
<input type="text" name="name" lay-verify="required" data-i18n-placeholder="pleaseenter" value="" class="layui-input">
</div>
</div>
<div class="layui-form-item layui-form-text">
<label class="layui-form-label" data-i18n="seach.status"></label>
<div class="layui-input-block">
<input type="checkbox" id="status" lay-filter="status" lay-skin="switch" lay-text="">
<input type="text" style="display:none" name="status" value="1" />
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label" data-i18n="sku.desc"></label>
<div class="layui-input-block">
<div class="feature-list" id="attributelist"></div>
<div style="margin-top: 10px;">
<button type="button" class="layui-btn layui-btn-normal" id="addAttribute">
<i class="layui-icon">&#xe654;</i><span data-i18n="btn.add"></span>
</button>
</div>
</div>
</div>
<div class="layui-form-item layui-hide">
<div class="layui-input-block bootm">
<input type="button" lay-submit lay-filter="saveBtn" id="saveBtn" value="确认">
</div>
</div>
</div>
</div>
<script src="../../lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
<script src="../../lib/jquery-3.4.1/jquery-3.4.1.min.js" charset="utf-8"></script>
<script src="../../assets/main.js" charset="utf-8"></script>
<script src="../../assets/public.js" type="text/javascript" charset="utf-8"></script>
<script src="../../assets/js/i18n1.js"></script>
<script>
function getQueryString(name) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
var r = window.location.search.substr(1).match(reg);
if (r != null) return unescape(r[2]); return null;
}
layui.use(['form','upload'], function () {
var form = layui.form,
layer = layui.layer,
upload = layui.upload,
$ = layui.$;
form.render();
$("#idedt").val(getQueryString('id'))
$("#vehicle_id").val(getQueryString('vehicle_id'))
self.skudetail({
type:'get',
data:{id:getQueryString('id')},
successCallBack: function(result){
if (result.code == 0) {
var data = result.data;
form.val('edit', result.data)
form.render();
// 字段 状态 status
layui.use(["form"], function() {
layui.$("#status").attr("checked", layui.$('input[name="status"]').val() != 0);
layui.form.render();
layui.form.on("switch(status)", function(data) {
layui.$('input[name="status"]').val(this.checked ? 1 : 0);
});
})
// 属性列表
$('#attributelist').empty();
(data.skuAttributes || []).forEach(function(item, idx){
renderAttributeItem(item, idx);
});
};
},
failCallBack: function(result){
alert(result.message);
}
})
// 动态添加属性项
function renderAttributeItem(data, index) {
var html = `<div class="feature-item">
<div class="layui-form-item">
<label class="layui-form-label" data-i18n="sku.name"></label>
<div class="layui-input-block">
<input type="hidden" name="id[]" value="${data.id}">
<select name="attribute_id[${index}]" class="attribute_id layui-input" lay-filter="attributeSelect"></select>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label" data-i18n="sku.value"></label>
<div class="layui-input-block">
<select name="value_id[${index}]" class="layui-input value_id"></select>
</div>
</div>
<div class="layui-form-item upload-image-item">
<label class="layui-form-label required" data-i18n="Images"></label>
<div class="layui-input-block upload-item">
<img class="img-3" src="${data && data.img_full ? data.img_full : '../../assets/images/noimg.png'}" alt="" />
<input type="text" style="display:none" name="img[${index}]" value="${data && data.img ? data.img : ''}" />
<button type="button" class="layui-btn btnup"><i class="layui-icon">&#xe67c;</i><span data-i18n="userlist.uploadig"></span></button>
</div>
</div>
<div class="layui-input-block" style="margin-left: 0; text-align: right;">
<button type="button" class="layui-btn layui-btn-danger layui-btn-sm delete-attribute">
<i class="layui-icon">&#xe640;</i><span data-i18n="btn.delete"></span>
</button>
</div>
</div>`;
var $newAttribute = $(html);
$('#attributelist').append($newAttribute);
// 上传按钮
$newAttribute.find('.btnup').each(function(idx, item){
var $item = $(item).closest('.upload-item');
upload.render({
elem: item,
url: baseUrl + 'console/upload/image',
accept: 'images',
field: 'image',
done: function(res){
if(res.code == 0){
$item.find('img').attr('src',res.data.image_url);
$item.find('input').val(res.data.image_name);
}
}
});
});
window.i18n.updatePageContent();
attributespresetfn(form, false, $newAttribute);
form.render();
// 默认隐藏图片上传模块
$newAttribute.find('.upload-image-item').hide();
// 属性名称和属性值回显
setTimeout(function() {
if(data && data.attribute_id){
$newAttribute.find('select[name^="attribute_id"]').val(data.attribute_id);
valuespresetfn(form, true, data.attribute_id, $newAttribute);
setTimeout(function(){
$newAttribute.find('select[name^="value_id"]').val(data.value_id);
form.render('select');
}, 200);
// 如果需要显示图片上传
if(data.img){
$newAttribute.find('.upload-image-item').show();
}
}
}, 1000);
}
// 添加属性按钮
$('#addAttribute').on('click', function() {
var index = $('#attributelist .feature-item').length;
renderAttributeItem({}, index);
});
// 监听属性名称下拉框变化
form.on('select(attributeSelect)', function(data){
var $featureItem = $(data.elem).closest('.feature-item');
var selectedValue = data.value;
var $selectedOption = $(data.elem).find('option:selected');
var dataImg = $selectedOption.attr('data-img');
valuespresetfn(form, true, selectedValue, $featureItem);
// 清空图片上传内容
var $uploadItem = $featureItem.find('.upload-image-item .upload-item');
$uploadItem.find('img').attr('src', '../../assets/images/noimg.png');
$uploadItem.find('input[type="text"]').val('');
if (dataImg == '1'||dataImg == '2') {
$featureItem.find('.upload-image-item').show();
} else {
$featureItem.find('.upload-image-item').hide();
}
});
// 删除属性按钮
$(document).on('click', '.delete-attribute', function() {
$(this).closest('.feature-item').remove();
// 重新排序索引
$('#attributelist .feature-item').each(function(index) {
$(this).find('select[name^="attribute_id"]').attr('name', 'attribute_id[' + index + ']');
$(this).find('select[name^="value_id"]').attr('name', 'value_id[' + index + ']');
$(this).find('input[name^="img"]').attr('name', 'img[' + index + ']');
});
});
//监听提交
form.on('submit(saveBtn)', function (data) {
var index = layer.alert(JSON.stringify(data.field), {
title: '最终的提交信息'
}, function () {
// 关闭弹出层
layer.close(index);
var iframeIndex = parent.layer.getFrameIndex(window.name);
parent.layer.close(iframeIndex);
});
return false;
});
});
</script>
</body>
</html>