refactor(ai): 重构产品配置相关功能

Administrator

2 days ago 3b05389a5bcf93ead612761835952699a4b2e302

 src/main/resources/templates/febs/views/modules/ai/productQuestion/info.html

@@ -1,8 +1,8 @@
<div class="layui-fluid layui-anim febs-anim" id="febs-productPoint-Info" lay-title="编辑">
<div class="layui-fluid layui-anim febs-anim" id="febs-productQuestion-Info" lay-title="编辑">
    <div class="layui-row febs-container">
        <div class="layui-col-md12">
            <div class="layui-fluid" id="productPoint-info">
                <form class="layui-form" action="" lay-filter="productPoint-info-form">
            <div class="layui-fluid" id="productQuestion-info">
                <form class="layui-form" action="" lay-filter="productQuestion-info-form">
                    <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
                        <ul class="layui-tab-title">
                            <li class="layui-this">基础信息</li>
@@ -14,35 +14,15 @@

                                <div class="layui-row layui-col-space10 layui-form-item">
                                    <div class="layui-col-lg6">
                                        <label class="layui-form-label febs-form-item-require">类型：</label>
                                        <label class="layui-form-label febs-form-item-require">分类：</label>
                                        <div class="layui-input-block">
                                            <select name="isNormal" class="point-type" lay-filter="point-type-select">
                                                <option value="1">普通内容</option>
                                                <option value="2">视频号内容</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>

                                <blockquote class="layui-elem-quote blue-border febs-hide tc-set">视频号信息</blockquote>
                                <div class="layui-form-item febs-hide tc-set">
                                    <div class="layui-col-lg6">
                                        <label class="layui-form-label">视频号 id:</label>
                                        <div class="layui-input-block">
                                            <input type="text" name="finderUserName" placeholder="请输入" autocomplete="off" class="layui-input">
                                            <div class="layui-form-mid layui-word-aux">视频号 id，以“sph”开头的id，可在视频号助手获取。</div>
                                        </div>
                                    </div>
                                    <div class="layui-col-lg6">
                                        <label class="layui-form-label">视频 feedId:</label>
                                        <div class="layui-input-block">
                                            <input type="text" name="feedId" placeholder="请输入" autocomplete="off" class="layui-input">
                                            <div id="product-category"></div>
                                        </div>
                                    </div>
                                </div>
                                <div class="layui-row layui-col-space10 layui-form-item">
                                    <div class="layui-col-lg6">
                                        <label class="layui-form-label febs-form-item-require">标题：</label>
                                        <label class="layui-form-label febs-form-item-require">题目：</label>
                                        <div class="layui-input-block">
                                            <input type="text" name="title" lay-verify="required"
                                                   placeholder="" autocomplete="off" class="layui-input">
@@ -50,12 +30,33 @@
                                    </div>
                                </div>

                                <div class="layui-form-item">
                                    <label class="layui-form-label febs-form-item-require">详情：</label>
                                    <div class="layui-input-block">
                                        <div style="border: 1px solid #ccc;">
                                            <div id="product-point-toolbar-container" class="toolbar"></div>
                                            <div id="product-point-text-container" class="text" style="height: 450px;"></div>
                                <div class="layui-row layui-col-space10 layui-form-item">
                                    <div class="layui-col-lg6">
                                        <label class="layui-form-label febs-form-item-require">难度：</label>
                                        <div class="layui-input-block">
                                            <input type="radio" name="difficulty" value="1" title="简单"  checked="">
                                            <input type="radio" name="difficulty" value="2" title="中等" >
                                            <input type="radio" name="difficulty" value="3" title="困难" >
                                        </div>
                                    </div>
                                </div>

                                <div class="layui-form-item multi-sku-table">
                                    <div class="layui-row layui-col-space10 layui-form-item">
                                        <div class="layui-col-lg6">
                                            <label class="layui-form-label febs-form-item-require">答案：</label>
                                        </div>
                                        <div class="layui-col-lg1">
                                            <button type="button"
                                                    class="layui-btn layui-btn-normal layui-btn" id="test3">
                                                添加
                                            </button>
                                        </div>
                                    </div>

                                    <div class="layui-form-item">
                                        <div class="layui-input-block">
                                            <table id="multiSku" lay-filter="multiSku"></table>
                                        </div>
                                    </div>
                                </div>
@@ -64,7 +65,7 @@
                        </div>
                    </div>
                    <div class="layui-form-item febs-hide">
                        <button class="layui-btn" lay-submit="" lay-filter="productPoint-info-form-submit" id="submit">保存</button>
                        <button class="layui-btn" lay-submit="" lay-filter="productQuestion-info-form-submit" id="submit">保存</button>
                    </div>
                </form>
            </div>
@@ -86,6 +87,12 @@
        margin: 0 5px !important;
    }
</style>

<script type="text/html" id="toolbar">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-danger layui-btn-sm" type="button" lay-event="delSku">删除</button>
    </div>
</script>
<!-- 表格操作栏 end -->
<script data-th-inline="javascript">
    layui.use(['febs', 'form', 'formSelects', 'validate', 'treeSelect', 'eleTree','dropdown', 'laydate', 'layedit', 'upload', 'element', 'table', 'xmSelect','jquery'], function () {
@@ -94,73 +101,182 @@
            layer = layui.layer,
            table = layui.table,
            form = layui.form,
            $view = $('#productPoint-info'),
            aiProductPoint = [[${aiProductPoint}]],
            $view = $('#productQuestion-info'),
            aiProductQuestion = [[${aiProductQuestion}]],
            upload = layui.upload,
            validate = layui.validate;

        form.render();

        const E = window.wangEditor;
        const editor = new E('#product-point-toolbar-container', '#product-point-text-container'); // 传入两个元素
        editor.config.showLinkImg = false;
        editor.config.uploadFileName = 'file';
        editor.config.customUploadImg = function (files, insertImgFn) {
            // files 是 input 中选中的文件列表
            // insertImgFn 是获取图片 url 后，插入到编辑器的方法
            // 上传图片，返回结果，将图片插入到编辑器中
            for (let i = 0; i < files.length; i++){
                var form = new FormData();
                form.append("file", files[0]);
                $.ajax({
                    url:'/admin/goods/uploadFileBase64',
                    type: "post",
                    processData: false,
                    contentType: false,
                    data: form,
                    dataType: 'json',
                    success(res) {
                        // 上传代码返回结果之后，将图片插入到编辑器中
                        insertImgFn(res.data.src, res.data.title, '')
                    }
                })
            }
        };
        editor.create();
        var category = xmSelect.render({
            el: '#product-category',
            language: 'zn',
            prop : {
                value : 'id',
                children : 'child'
            },
            iconfont: {
                parent: 'hidden',
            },
            tips: '请选择',
            filterable: true,
            radio: true,
            clickClose: true,
            tree: {
                show: true,
                //非严格模式
                strict: false,
            },
            data: []
        })

        form.on('select(point-type-select)', function(data){
            $('.tc-set').each(function() {
                if (data.value == 2) {
                    $(this).show();
                } else {
                    $(this).hide();
        febs.get(ctx + 'admin/productCategory/categoryTree', null, function(res) {
            category.update({
                data : res.data,
                autoRow: true,
            });
        })

        var tableSkuData=[];
        var tableIns = table.render({
            elem: '#multiSku'
            ,limit:999
            ,toolbar:"#toolbar"
            ,defaultToolbar:[]
            ,cols: [[ //表头
                {type: 'checkbox'}
                ,{field: 'index', title: '序号', width:70}
                ,{field: 'answer', title: '答案', edit:'text', width:500}
                ,{field: 'correctAnswer', title: '正确答案', templet: function(d){
                        var options = '';
                        if(d.correctAnswer == 1) {
                            options = '<option value="0">否</option><option value="1" selected>是</option>';
                        } else {
                            options = '<option value="0" selected>否</option><option value="1">是</option>';
                        }
                        return '<select lay-ignore name="correctAnswer" lay-filter="correctAnswerSelect">' + options + '</select>';
                    }, width:200}
                ,{field: 'answerAnalysis', title: '答案解析', edit:'text', width:500}
            ]]
            ,data: []
        });

        // 监听下拉框变化
        $(document).on('change', 'select[name="correctAnswer"]', function() {
            var selectIndex = $(this).closest('tr').index(); // 获取行索引
            var newValue = $(this).val(); // 获取新值

            // 更新表格数据
            var hasData = table.cache['multiSku'];
            if (hasData && hasData[selectIndex]) {
                hasData[selectIndex].correctAnswer = parseInt(newValue);

                // 更新全局数据
                for (let i = 0; i < tableSkuData.length; i++) {
                    if (tableSkuData[i].index == hasData[selectIndex].index) {
                        tableSkuData[i].correctAnswer = parseInt(newValue);
                        break;
                    }
                }
            })
            }
        });


        table.on('toolbar(multiSku)', function(obj){
            var data = obj.data;

            var hasData = table.cache['multiSku'];
            var checkData = table.checkStatus('multiSku').data;

            if (checkData.length <= 0) {
                febs.alert.warn('请选择删除数据');
                return;
            }
            if(obj.event === 'delSku'){
                for (let i = 0; i < checkData.length; i++) {
                    var delData = checkData[i];
                    for (let j = 0; j < hasData.length; j++) {
                        if (hasData[j].index == delData.index) {
                            hasData.splice(j, 1);
                            break;
                        }
                    }
                }

                for (let i = 0; i < hasData.length; i++) {
                    hasData[i].index = i + 1;
                }

                tableSkuData=hasData;
                reloadTable(hasData);
            }
        });

        function addTableDate(data) {
            var hasData = table.cache['multiSku'];

            data.index = hasData.length + 1;
            tableSkuData.push(data);

            reloadTable(tableSkuData);
            return data.index;
        }

        function reloadTable(data) {
            table.reload('multiSku', {
                data : data
            });
        }

        table.on('edit(multiSku)', function(obj){
            var value = obj.value //得到修改后的值
                ,data = obj.data //得到所在行所有键值
                ,field = obj.field; //得到字段

            for (let i = 0; i < tableSkuData.length; i++) {
                if (tableSkuData[i].index == data.index) {
                    tableSkuData[i] = data;
                }
            }
        });

        $('#test3').on('click', function (){
            var data = {};
            addTableDate(data);
        });

        setTimeout(() => {
            initProductPointInfo();
            initProductQuestionInfo();
        }, 500);
        function initProductPointInfo() {
            form.val("productPoint-info-form", {
                "id": aiProductPoint.id,
                "title": aiProductPoint.title,
                "isNormal": aiProductPoint.isNormal,
                "finderUserName": aiProductPoint.finderUserName,
                "feedId": aiProductPoint.feedId,
        function initProductQuestionInfo() {
            form.val("productQuestion-info-form", {
                "id": aiProductQuestion.id,
                "title": aiProductQuestion.title,
                "difficulty": aiProductQuestion.difficulty,
            });

            editor.txt.html(aiProductPoint.description);

            if (aiProductPoint.isNormal == 2) {
                $(".tc-set").show();
            var categoryList = [];
            categoryList.push(aiProductQuestion.productCategoryId)
            category.setValue(categoryList);

            let aiProductQuestionItems = aiProductQuestion.aiProductQuestionItems;
            if(Array.isArray(aiProductQuestionItems) && aiProductQuestionItems.length){
                for (let i = 0; i < aiProductQuestionItems.length; i++) {
                    aiProductQuestionItems[i].index = i+1;
                }
            }
            if (aiProductQuestionItems) {
                tableSkuData = aiProductQuestionItems;
                reloadTable(aiProductQuestionItems);
            }
        }

        form.on('submit(productPoint-info-form-submit)', function (data) {
            data.field.description = editor.txt.html();
        form.on('submit(productQuestion-info-form-submit)', function (data) {
            data.field.productCategoryId = category.getValue('valueStr');
            data.field.aiProductQuestionItems = tableSkuData;
            $.ajax({
                'url':ctx + 'admin/productPoint/update',
                'url':ctx + 'admin/productQuestion/update',
                'type':'post',
                'dataType':'json',
                'headers' : {'Content-Type' : 'application/json;charset=utf-8'}, //接口json格式
@@ -170,7 +286,7 @@
                    if(data.code==200){
                        layer.closeAll();
                        febs.alert.success(data.message);
                        $('#febs-productPoint').find('#query').click();
                        $('#febs-productQuestion').find('#query').click();
                    }else{
                        febs.alert.warn(data.message);
                    }