|
@@ -1,453 +0,0 @@
|
|
|
-<!DOCTYPE html>
|
|
|
-<html>
|
|
|
-<head>
|
|
|
- <meta charset="utf-8">
|
|
|
- <title>商品明细</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.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
|
|
|
- <link rel="stylesheet" href="../../layuiadmin/layui/css/layui.css" media="all">
|
|
|
- <link rel="stylesheet" href="../../layuiadmin/style/admin.css" media="all">
|
|
|
- <style type="text/css">
|
|
|
- /*您可以将下列样式写入自己的样式表中*/
|
|
|
- /*layui 元素样式改写*/
|
|
|
- .layui-btn-sm {
|
|
|
- line-height: normal;
|
|
|
- font-size: 12.5px;
|
|
|
- }
|
|
|
-
|
|
|
- .layui-table-view .layui-table-body {
|
|
|
- min-height: 256px;
|
|
|
- }
|
|
|
-
|
|
|
- .layui-table-cell .layui-input.layui-unselect {
|
|
|
- height: 30px;
|
|
|
- line-height: 30px;
|
|
|
- }
|
|
|
-
|
|
|
- /*设置 layui 表格中单元格内容溢出可见样式*/
|
|
|
- .table-overlay .layui-table-view,
|
|
|
- .table-overlay .layui-table-box,
|
|
|
- .table-overlay .layui-table-body {
|
|
|
- overflow: visible;
|
|
|
- }
|
|
|
-
|
|
|
- .table-overlay .layui-table-cell {
|
|
|
- height: auto;
|
|
|
- overflow: visible;
|
|
|
- }
|
|
|
-
|
|
|
- .imgStyle {
|
|
|
- padding-left: 10px;
|
|
|
- width: 80px;
|
|
|
- height: 50px;
|
|
|
- }
|
|
|
- .layui-table-cell {
|
|
|
- font-size: 14px;
|
|
|
- padding: 0 5px;
|
|
|
- height: auto;
|
|
|
- overflow: visible;
|
|
|
- text-overflow: inherit;
|
|
|
- white-space: normal;
|
|
|
- word-break: break-all;
|
|
|
- }
|
|
|
- </style>
|
|
|
-</head>
|
|
|
-<body>
|
|
|
-
|
|
|
-<div class="layui-fluid">
|
|
|
- <div class="layui-col-md12">
|
|
|
- <div class="layui-card">
|
|
|
- <form id='fm' class="layui-form" action="" lay-filter="component-form-element">
|
|
|
- <button class="layui-btn" id="id_save" lay-submit lay-filter="component-form-element"
|
|
|
- style="display: none">保存
|
|
|
- </button>
|
|
|
- </form>
|
|
|
- </div>
|
|
|
- <div class="layui-card">
|
|
|
- <div class="layui-card-body">
|
|
|
- <div class="layui-row layui-col-space10">
|
|
|
- <div class="layui-col-xs8" style="text-align: left">
|
|
|
- <button class="layui-btn layui-btn-sm layui-btn-normal" id="btn_add">
|
|
|
- <i class="layui-icon layui-icon-add "></i> 添加
|
|
|
- </button>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div style="height: 5px"></div>
|
|
|
- <div id="tableRes" class="table-overlay">
|
|
|
- <table id="dataTable" lay-filter="dataTable" class="layui-hide"></table>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-</div>
|
|
|
-
|
|
|
-<script src="../../layuiadmin/layui/layui.js"></script>
|
|
|
-<script type="text/html" id="statusTpl">
|
|
|
- <a lay-event="type_status"></a>
|
|
|
- <input type="checkbox" name="status" lay-skin="switch" lay-text="上架|下架" lay-filter="status"
|
|
|
- value="{{ d.status }}" {{ d.status == "1" ? 'checked' : "" }} >
|
|
|
-</script>
|
|
|
-<script type="text/html" id="paramImage">
|
|
|
- <a lay-event="type_button"></a>
|
|
|
- <a class="layui-btn layui-btn-xs" id="param_img{{ d.LAY_TABLE_INDEX }}" lay-event="param_img_event">上传</a>
|
|
|
- {{# if(d.images_url){ }}
|
|
|
- <img src="{{ d.images_url }}" class="imgStyle"/>
|
|
|
- {{# } }}
|
|
|
-</script>
|
|
|
-<script>
|
|
|
- layui.config({
|
|
|
- base: '../../../layuiadmin/' //静态资源所在路径
|
|
|
- }).extend({
|
|
|
- index: 'lib/index' //主入口模块
|
|
|
- }).use(['index', 'table', 'upload', 'layer', 'form',], function () {
|
|
|
- var $ = layui.$
|
|
|
- , admin = layui.admin
|
|
|
- , upload = layui.upload
|
|
|
- , form = layui.form
|
|
|
- , table = layui.table
|
|
|
- , layer = layui.layer;
|
|
|
-
|
|
|
- var parameter1_list = [];
|
|
|
- var parameter2_list = [];
|
|
|
- var id = layui.view.getParameterByName('id');
|
|
|
- var editdata = JSON.parse(JSON.stringify(parent.layui.table.editdata)); // 框架有Bug所以这么转换
|
|
|
- var _data_index = 0
|
|
|
- var parameter1_text = ""
|
|
|
- var parameter2_text = ""
|
|
|
- if (editdata.parameter_text) {
|
|
|
- var parameter_text = editdata.parameter_text.split(',')
|
|
|
- var parameter_len = parameter_text.length
|
|
|
- if (parameter_len >= 1) {
|
|
|
- parameter1_text = parameter_text[0]
|
|
|
- }
|
|
|
- if (parameter_len === 2) {
|
|
|
- parameter2_text = parameter_text[1]
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- window.viewObj = {
|
|
|
- renderSelectOptions: function (data, settings) {
|
|
|
- settings = settings || {};
|
|
|
- var valueField = settings.valueField || 'value',
|
|
|
- textField = settings.textField || 'text',
|
|
|
- selectedValue = settings.selectedValue || "";
|
|
|
- var html = [];
|
|
|
- for (var i = 0, item; i < data.length; i++) {
|
|
|
- item = data[i];
|
|
|
- html.push('<option value="');
|
|
|
- html.push(item[valueField]);
|
|
|
- html.push('"');
|
|
|
- if (selectedValue && item[valueField] == selectedValue) {
|
|
|
- html.push(' selected="selected"');
|
|
|
- }
|
|
|
- html.push('>');
|
|
|
- html.push(item[textField]);
|
|
|
- html.push('</option>');
|
|
|
- }
|
|
|
- return html.join('');
|
|
|
- }
|
|
|
- };
|
|
|
-
|
|
|
- var permissions = layui.data(layui.setter.tableName)['permissions'];
|
|
|
- var editStock = permissions.indexOf('commodity.edit_commodity_stock') > -1 ? true : false;
|
|
|
- var editPrice = permissions.indexOf('commodity.edit_commodity_price') > -1 ? true : false;
|
|
|
- var tbWidth = $("#tableRes").width();
|
|
|
- var layTableId = "layTable";
|
|
|
- var tableIns = table.render({
|
|
|
- elem: '#dataTable',
|
|
|
- id: layTableId,
|
|
|
- data: [],
|
|
|
- width: tbWidth,
|
|
|
- page: false,
|
|
|
- limit: 100,
|
|
|
- loading: true,
|
|
|
- even: true, //不开启隔行背景
|
|
|
- cols: [[
|
|
|
- {title: '序号', type: 'numbers'},
|
|
|
- {field: 'price', title: '销售价格', edit: editPrice ? 'text' : '', width: '10%',},
|
|
|
- {field: 'stock', title: '库存', edit: editStock ? 'text' : '', width: '8%',},
|
|
|
- {field: 'no', title: '编号', edit: 'text', width: '10%',},
|
|
|
- {field: 'name', title: '过账名称', edit: 'text', width: '10%',},
|
|
|
- {
|
|
|
- field: 'parameter1',
|
|
|
- title: parameter1_text,
|
|
|
- hide: parameter1_text ? false : true,
|
|
|
- width: '15%',
|
|
|
- templet: function (d) {
|
|
|
- var options = viewObj.renderSelectOptions(parameter1_list, {
|
|
|
- valueField: "id",
|
|
|
- textField: "name",
|
|
|
- selectedValue: d.parameter1
|
|
|
- });
|
|
|
- return '<a lay-event="type_parameter1"></a><select name="parameter1" lay-filter="parameter_filter"><option value="">请选择参数1</option>' + options + '</select>';
|
|
|
- }
|
|
|
- },
|
|
|
- {
|
|
|
- field: 'parameter2',
|
|
|
- title: parameter2_text,
|
|
|
- hide: parameter2_text ? false : true,
|
|
|
- width: '15%',
|
|
|
- templet: function (d) {
|
|
|
- var options = viewObj.renderSelectOptions(parameter2_list, {
|
|
|
- valueField: "id",
|
|
|
- textField: "name",
|
|
|
- selectedValue: d.parameter2
|
|
|
- });
|
|
|
- return '<a lay-event="type_parameter2"></a><select name="parameter2" lay-filter="parameter_filter"><option value="">请选择参数2</option>' + options + '</select>';
|
|
|
- }
|
|
|
- },
|
|
|
- {field: 'status', title: '状态', templet: '#statusTpl', width: '10%',},
|
|
|
- {field: 'images_url', title: '明细图', templet: '#paramImage', width: '20%',},
|
|
|
- {
|
|
|
- field: 'id', title: '操作', width: '10%',templet: function (d) {
|
|
|
- if (d.id) {
|
|
|
- return ''
|
|
|
- } else {
|
|
|
- return '<a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del" lay-id="' + d.id + '"><i class="layui-icon layui-icon-delete"></i>删除</a>';
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- ]],
|
|
|
- done: function (data, date, total) {
|
|
|
- //重新绑定,upload方法
|
|
|
- bindTableToolbarFunction(total)
|
|
|
- }
|
|
|
- });
|
|
|
-
|
|
|
- function bindTableToolbarFunction(data_index) {
|
|
|
- for (var i = 0, item; i < data_index; i++) {
|
|
|
- upload.render({
|
|
|
- elem: "#param_img" + i, // 和html中的param_img对应
|
|
|
- auto: false,
|
|
|
- choose: function (obj) {
|
|
|
- obj.preview(
|
|
|
- function (i, file, result) {
|
|
|
- // 把数据索引给图片,便于后续的查找对应。
|
|
|
- file.data_index = _data_index
|
|
|
- var oldData = table.cache[layTableId];
|
|
|
- $.extend(oldData[_data_index], {images_url: result, file: file});
|
|
|
- tableIns.reload({
|
|
|
- data: oldData
|
|
|
- });
|
|
|
- }
|
|
|
- )
|
|
|
- },
|
|
|
- });
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- admin.req({
|
|
|
- url: '/commodity/' + id + '/get_parameter/',
|
|
|
- done: function (res) {
|
|
|
- if (res.code === 0) {
|
|
|
- parameter1_list = res.data.parameter1;
|
|
|
- parameter2_list = res.data.parameter2;
|
|
|
- }
|
|
|
- else {
|
|
|
- layer.msg('获取参数失败', {icon: 5});
|
|
|
- }
|
|
|
- admin.req({
|
|
|
- url: '/commodity/' + id + '/get_details/',
|
|
|
- done: function (res) {
|
|
|
- if (res.code === 0) {
|
|
|
- var rows = res.data;
|
|
|
- var oldData = table.cache[layTableId];
|
|
|
- for (var k in rows) {
|
|
|
- oldData.push(
|
|
|
- {
|
|
|
- id: rows[k].id,
|
|
|
- price: rows[k].price,
|
|
|
- stock: rows[k].stock,
|
|
|
- no: rows[k].no,
|
|
|
- name: rows[k].name,
|
|
|
- status: rows[k].status,
|
|
|
- parameter1: rows[k].parameter1,
|
|
|
- parameter2: rows[k].parameter2,
|
|
|
- images_url: rows[k].images_url,
|
|
|
- }
|
|
|
- )
|
|
|
- }
|
|
|
- tableIns.reload({
|
|
|
- data: oldData
|
|
|
- });
|
|
|
- }
|
|
|
- else
|
|
|
- layer.msg('获取商品明细失败', {icon: 5});
|
|
|
- }
|
|
|
- });
|
|
|
- }
|
|
|
- });
|
|
|
- var active = {
|
|
|
- removeItem: function (index) {
|
|
|
- var oldData = table.cache[layTableId];
|
|
|
- oldData.splice(index, 1); //删除一项
|
|
|
- tableIns.reload({
|
|
|
- data: oldData
|
|
|
- });
|
|
|
- },
|
|
|
- onParameterChange: function (obj) {
|
|
|
- var oldData = table.cache[layTableId];
|
|
|
- $.extend(oldData[obj.data_index], obj);
|
|
|
- tableIns.reload({
|
|
|
- data: oldData
|
|
|
- });
|
|
|
- },
|
|
|
- }
|
|
|
- //激活事件
|
|
|
- var activeByType = function (type, arg) {
|
|
|
- if (arguments.length === 2) {
|
|
|
- active[type] ? active[type].call(this, arg) : '';
|
|
|
- } else {
|
|
|
- active[type] ? active[type].call(this) : '';
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- //注册按钮事件
|
|
|
- $('.layui-btn[data-type]').on('click', function () {
|
|
|
- var type = $(this).data('type');
|
|
|
- activeByType(type);
|
|
|
- });
|
|
|
- //监听select下拉选中事件
|
|
|
- form.on('select(parameter_filter)', function (data) {
|
|
|
- var elem = data.elem; //得到select原始DOM对象
|
|
|
- $(elem).prev("a[lay-event='type_parameter1']").trigger("click");
|
|
|
- $(elem).prev("a[lay-event='type_parameter2']").trigger("click");
|
|
|
- });
|
|
|
-
|
|
|
- //监听指定开关
|
|
|
- form.on('switch(status)', function (data) {
|
|
|
- var elem = data.elem; //得到select原始DOM对象
|
|
|
- $(elem).prev("a[lay-event='type_status']").trigger("click");
|
|
|
- //$(elem).html("lay-event='type_status2'").trigger("click");
|
|
|
- });
|
|
|
-
|
|
|
- //监听工具条
|
|
|
- table.on('tool(dataTable)', function (obj) {
|
|
|
- var data = obj.data, event = obj.event, tr = obj.tr; //获得当前行 tr 的DOM对象;
|
|
|
- var data_index = tr.attr("data-index");
|
|
|
- switch (event) {
|
|
|
- case "type_parameter2":
|
|
|
- var select = tr.find("select[name='parameter2']");
|
|
|
- if (select) {
|
|
|
- var selectedVal = select.val();
|
|
|
- if (!selectedVal) {
|
|
|
- layer.tips("请选择一个参数", select.next('.layui-form-select'), {tips: [3, '#FF5722']}); //吸附提示
|
|
|
- }
|
|
|
- $.extend(data, {'parameter2': selectedVal});
|
|
|
- data.data_index = data_index
|
|
|
- activeByType('onParameterChange', data); //更新行记录对象
|
|
|
- }
|
|
|
- break;
|
|
|
- case "type_parameter1":
|
|
|
- var select = tr.find("select[name='parameter1']");
|
|
|
- if (select) {
|
|
|
- var selectedVal = select.val();
|
|
|
- if (!selectedVal) {
|
|
|
- layer.tips("请选择一个参数", select.next('.layui-form-select'), {tips: [3, '#FF5722']}); //吸附提示
|
|
|
- }
|
|
|
- $.extend(data, {'parameter1': selectedVal});
|
|
|
- data.data_index = data_index
|
|
|
- activeByType('onParameterChange', data); //更新行记录对象
|
|
|
- }
|
|
|
- break;
|
|
|
- case "type_status":
|
|
|
- var stateVal = tr.find("input[name='status']").val() === "1" ? "0" : "1";
|
|
|
- $.extend(data, {'status': stateVal})
|
|
|
- data.data_index = data_index
|
|
|
- activeByType('onParameterChange', data); //更新行记录对象
|
|
|
- break;
|
|
|
- case "param_img_event":
|
|
|
- // 给图片传tabel索引
|
|
|
- _data_index = data_index
|
|
|
- break;
|
|
|
- case "del":
|
|
|
- obj.del(); //删除对应行(tr)的DOM结构,并更新缓存
|
|
|
- activeByType('removeItem', data_index);
|
|
|
- layer.msg('删除成功', {icon: 6});
|
|
|
- break;
|
|
|
- }
|
|
|
- });
|
|
|
-
|
|
|
- $('#btn_add').on('click', function () {
|
|
|
- var oldData = table.cache[layTableId];
|
|
|
- var newRow = {
|
|
|
- id: '',
|
|
|
- price: '',
|
|
|
- stock: '',
|
|
|
- no: '',
|
|
|
- name: '',
|
|
|
- file: '',
|
|
|
- images_url: '',
|
|
|
- status: "1",
|
|
|
- parameter1: '',
|
|
|
- parameter2: '',
|
|
|
- }
|
|
|
- oldData.push(newRow);
|
|
|
- tableIns.reload({
|
|
|
- data: oldData
|
|
|
- });
|
|
|
- });
|
|
|
-
|
|
|
- //保存
|
|
|
- form.on('submit(component-form-element)', function (data) {
|
|
|
- var rows = table.cache[layTableId];
|
|
|
- var items = [];
|
|
|
- var formData = new FormData();
|
|
|
- var para_items = [] // 验证选择的参数是否重复
|
|
|
- for (var k in rows) {
|
|
|
- if (isNaN(rows[k].price) || isNaN(rows[k].stock)) {
|
|
|
- layer.msg("第" + (parseInt(k) + 1) + "行,请填写销售价格或库存", {icon: 2})
|
|
|
- return false
|
|
|
- }
|
|
|
- var param = rows[k].parameter1 + "," + rows[k].parameter2
|
|
|
- if (param.length > 1 && para_items.indexOf(param) > -1) {
|
|
|
- layer.msg("第" + (parseInt(k) + 1) + "行,选择的参数重复,请重新选择", {icon: 2})
|
|
|
- return false
|
|
|
- }
|
|
|
- para_items.push(param)
|
|
|
- var item = {
|
|
|
- id: rows[k].id,
|
|
|
- price: rows[k].price,
|
|
|
- stock: rows[k].stock,
|
|
|
- no: rows[k].no,
|
|
|
- name: rows[k].name,
|
|
|
- status: rows[k].status,
|
|
|
- parameter1: rows[k].parameter1,
|
|
|
- parameter2: rows[k].parameter2,
|
|
|
- };
|
|
|
- if (rows[k].file) {
|
|
|
- formData.append(`file${rows[k].file.data_index}`, rows[k].file)
|
|
|
- item['data_index'] = rows[k].file.data_index
|
|
|
- }
|
|
|
-
|
|
|
- items.push(item);
|
|
|
- }
|
|
|
- formData.append('items', JSON.stringify(items))
|
|
|
- if (items.length === 0) {
|
|
|
- layer.msg('请添加参数内容', {icon: 2});
|
|
|
- return false;
|
|
|
- }
|
|
|
-
|
|
|
- admin.req({
|
|
|
- url: '/commodity/' + id + '/add_details/'
|
|
|
- , data: formData
|
|
|
- , contentType: false
|
|
|
- , processData: false
|
|
|
- , type: 'post'
|
|
|
- , done: function (res) {
|
|
|
- parent.layui.onSubmitChild(res);
|
|
|
- }
|
|
|
- });
|
|
|
-
|
|
|
- return false;
|
|
|
- });
|
|
|
- parent.layui.submitChild = function () {
|
|
|
- $("#id_save").click();
|
|
|
- };
|
|
|
- });
|
|
|
-
|
|
|
-</script>
|
|
|
-</body>
|
|
|
-</html>
|