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/attributeedit.html
+195
View File
@@ -0,0 +1,195 @@
<!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;
}
.feature-item{
border: 1px solid #ccc;
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="text" name="attribute_name" lay-verify="required" lay-reqtext="名称不能为空" data-i18n-placeholder="pleaseenter" value="" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label required" data-i18n="Belongingtype"></label>
<div class="layui-input-block">
<select id="category_id" name="category_id" class="layui-input">
</select>
</div>
</div>
<div class="layui-form-item layui-form-text">
<label class="layui-form-label">是否必传图片</label>
<div class="layui-input-block">
<select name="is_img" class="layui-input">
<option value="0">无图</option>
<option value="1">必传</option>
<option value="2">可选</option>
</select>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">类型</label>
<div class="layui-input-block">
<select name="input_type" lay-filter="input_type" class="layui-input">
<option value="color">color</option>
<option value="text">text</option>
</select>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">属性值</label>
<div class="layui-input-block">
<div class="feature-list" id="featureList" >
</div>
<div style="margin-top: 10px;">
<button type="button" class="layui-btn layui-btn-normal" id="addFeature">
<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>
<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>
layui.use(['form'], function () {
var form = layui.form,
layer = layui.layer,
$ = layui.$;
categoriespresetfn(form,true)
$("#idedt").val(getQueryString('id'))
self.attributesdetail({
type:'get',
data:{id:getQueryString('id')},
successCallBack: function(result){
if (result.code == 0) {
form.val('edit', result.data)
// 回显属性值
if(result.data.value && result.data.value.length > 0) {
result.data.value.forEach(function(item) {
var type = $('select[name="input_type"]').val();
var index = $('#featureList .feature-item').length;
var html = `<div class="feature-item">
<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="idp[${index}]" value="${item.id}" />
<input type="text" name="value_name[${index}]" data-i18n-placeholder="pleaseenter" value="${item.value_name}" class="layui-input">
</div></div>`
if(type === 'color') {
html += `<div class="layui-form-item color-value">
<label class="layui-form-label required">颜色值</label>
<div class="layui-input-block">
<input type="text" name="color_code[${index}]" lay-verify="required" lay-reqtext="名称不能为空" data-i18n-placeholder="pleaseenter" value="${item.color_code}" class="layui-input">
</div></div>`
}
html+= `<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-feature">
<i class="layui-icon">&#xe640;</i><span data-i18n="btn.delete"></span>
</button>
</div>`
html += '</div>';
$('#featureList').append(html);
});
}
form.render();
};
},
failCallBack: function(result){
alert(result.message);
}
})
// 监听类型选择变化
form.on('select(input_type)', function(data){
var type = data.value;
// 清空之前的内容
$('#featureList').empty();
// 重新渲染表单
form.render();
});
// 添加属性值
$('#addFeature').on('click', function(){
var type = $('select[name="input_type"]').val();
var index = $('#featureList .feature-item').length;
var html = `<div class="feature-item">
<div class="layui-form-item">
<label class="layui-form-label required" data-i18n="seach.name"></label>
<div class="layui-input-block">
<input type="text" name="value_name[${index}]" data-i18n-placeholder="pleaseenter" value="" class="layui-input">
</div></div>`
if(type === 'color') {
html += `<div class="layui-form-item color-value">
<label class="layui-form-label required">颜色值</label>
<div class="layui-input-block">
<input type="text" name="color_code[${index}]" lay-verify="required" lay-reqtext="名称不能为空" data-i18n-placeholder="pleaseenter" value="" class="layui-input">
</div></div>`
}
html+= `<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-feature">
<i class="layui-icon">&#xe640;</i><span data-i18n="btn.delete"></span>
</button>
</div>`
html += '</div>';
$('#featureList').append(html);
window.i18n.updatePageContent();
form.render();
});
// 删除属性值按钮点击事件
$(document).on('click', '.delete-feature', function() {
var type = $('select[name="input_type"]').val();
$(this).closest('.feature-item').remove();
// 重新排序索引
$('#featureList .feature-item').each(function(index) {
$(this).find('input[name^="value_name"]').attr('name', 'value_name[' + index + ']');
if(type === 'color') {
$(this).find('input[name^="color_code"]').attr('name', 'color_code[' + 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>