DK-MES-2.0
/
HEGII.ss.mes.web


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433
							<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="keywords" content="dongke,mes,ibossmes">
    <meta name="description" content="制造企业生产过程执行管理系统">
    <meta name="author" content="xuwei">
    <title>东科软件</title>
    <link rel="shortcut icon" href="/img/logo.png" />
    <link rel="bookmark" href="/img/logo.png" />
    <link rel="stylesheet" type="text/css" href="/plugins/easyui/themes/dongke/easyui.css">
    <link rel="stylesheet" type="text/css" href="/plugins/easyui/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="/plugins/xeasyui/xuwell.css">
    <script type="text/javascript" src="/plugins/easyui/jquery.min.js"></script>
    <script type="text/javascript" src="/plugins/easyui/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="/plugins/easyui/locale/easyui-lang-zh_CN.js"></script>
    <script type="text/javascript" src="/plugins/xeasyui/xuwell.js"></script> 
    <link href="/plugins/xeasyui/toolbar.min.css" rel="stylesheet" />
    <link href="https://unpkg.com/@wangeditor/editor@latest/dist/css/style.css" rel="stylesheet">
    <style>
        .ddd {
            padding-top: 10px;
            margin: 0 20px;
            font-size: 20px
        }

        .inp {
            width:90.5%;
            height: 32px;
            position: relative;
            /* 设置边框样式，以便更容易看到圆角效果 */
           /* border: 2px solid #ccc;*/
            border:0;
            /* 设置圆角半径 */
          /*  border-radius: 10px; */
        }

        select {
            width: 80%;
            height: 32px;
            position: relative;
            background-color: #444;
            color: #fff;
            /* 设置边框样式，以便更容易看到圆角效果 */
            /* border: 2px solid #ccc;*/
            border: 0;
            /* 设置圆角半径 */
          /*  border-radius: 10px; */
        }

        .bbb {
            margin: 0 20px;
            font-size: 20px;
            width: 400px;
            border: 0;
            padding: 0 10px;
            background-color: #666;
        }

        .top {
            display: flex;
            justify-content: space-between; /* 可选，用于在元素之间添加空间，但在这个例子中可能不是必需的 */
            width: 100%; /* 确保 .top 容器占据其父容器的全部宽度 */
        }

        #editor—wrapper {
            border: 1px solid #ccc;
            z-index: 100; /* 按需定义 */
            height: 100%;
           /*  width: 90%;*/
            margin: 0 20px;
        }

        #toolbar-container {
            border-bottom: 1px solid #ccc;
        }

        #editor-container {
            height: 100%;
        }
    </style>
</head>
<body class="easyui-layout">
    <div id="toolbarLayout" data-options="border:false,region:'north',title:'',iconCls:'icon-grid'">
        <div style="min-height: 100vh; ">
            <div id="tbSearchDiv">
                <div class="top">
                    <div class="ddd" style=" flex: 1;margin-right:0;">
                        产品名称：<input id="input_name" style=" width: 80%;" class="inp" type="text">
                    </div>
                    <div class="ddd" style=" flex: 1;margin-left:0;">
                        产品型号：
                        <select id="modelSelect">
                            <option disabled selected value="">请选择型号</option>
                        </select>
                    </div>
                </div>
                <div class="ddd">
                    参与人员：<input id="input_participants" class="inp" type="text">
                </div>
                <div class="ddd">
                    解决方式：<input id="input_solution" class="inp" type="text">
                </div>
                <div class="ddd">
                    解决效果：<input id="input_solutioneffect" class="inp" type="text">
                </div>
                <form enctype="multipart/form-data">
                    <div id="presetFileName" class="ddd">
                        <span id="filename"></span>
                        <button type="button" class="ddd" style="padding-top:0; " onclick="deletefile()">删除</button>
                        <button type="button" class="ddd" style="padding-top:0; " onclick="downfile()">下载已上传文件</button>
                    </div>

                    <div id="isopen" class="ddd">
                        上传附件：
                        <input id="ff" type="file" style="font-size: 20px; " data-options="required:true,prompt:'',tipPosition:'bottom',buttonText:'选择文件',buttonAlign:'right',accept='*/*'">
                         
                    </div>
                </form>

                <div style=" padding-top: 10px; display: flex; align-items: center;" class="ddd">
                    问题：
                    <div id="editor—wrapper" style="flex:10"> 
                        <div id="toolbar-container"><!-- 工具栏 --></div>
                        <div id="editor-container"><!-- 编辑器 --></div>
                        <div id="editor-text-area" class="editor-text-area"></div>
                    </div>
                </div>
                <div class="ddd" style="text-align:center">
                    <button type="button" class="ddd" style="padding-top: 0; margin:0 auto" onclick="add()">提交/修改</button>
                </div>
            </div>
        </div>
    </div> 
    <script src="https://unpkg.com/@wangeditor/editor@latest/dist/index.js"></script>
    <script>
        //加载前调用
        $(document).ready(function () {
            getproductmodel();
            getQueryParam();
        });
        //创建富文本编辑器初始对象
        const E = window.wangEditor
        //语言切换(没用上 放着吧)
        const LANG = location.href.indexOf('lang=en') > 0 ? 'en' : 'zh-CN'
        E.i18nChangeLanguage(LANG)
        //创建初始项
        const editorConfig = {
            //自定义配置项
            MENU_CONF: {},
            //将画布上的内容添加到对象中
            onChange(editor) {
                const html = editor.getHtml()
                addsb.problem = html;
            },
        }
        //上传图片
        editorConfig.MENU_CONF['uploadImage'] = {
            server: 'Richtext.ashx?m=0',
        }
        // 上传视频
        editorConfig.MENU_CONF['uploadVideo'] = { 
            server: 'Richtext.ashx?m=0',
        }
        //画布初始化
        const editor = E.createEditor({
            selector: '#editor-container',
            html: '<p><br></p>',
            config: editorConfig,
            mode: 'default', 
        })
        //顶栏自定义
        const toolbarConfig = {}
        //顶栏配置项
        const toolbar = E.createToolbar({
            editor,
            selector: '#toolbar-container',
            config: toolbarConfig,
            mode: 'default', // or 'simple'
        })
       
        // 响应式数据：产品型号列表
        let models = [];
        /** 加载型号到 select 元素中  */
        const loadModelsToSelect=()=> {
            const select = document.getElementById('modelSelect');
            // 遍历模型数组并添加选项 
            models.forEach(model => {
                const option = document.createElement('option');
                option.value = model.ID;
                option.textContent = model.GOODSCODE;
                select.appendChild(option);
            }); 
            // 设置默认选中的型号  
            if (addsb.modelid) {
                const selectedOption = select.querySelector(`option[value="${addsb.modelid}"]`);
                if (selectedOption) {
                    selectedOption.selected = true;
                }
            }
            // 监听选择变化
            select.addEventListener('change', function () {
                // 更新 addsb.model
                addsb.modelid = this.value;
                addsb.modelname = models.find(ex => ex.ID == addsb.modelid).GOODSCODE;
            });
        };
        //提交内容
        const addsb = {
            /**id*/
            id: '',
            /**项目名称*/
            name: '',
            /**产品型号id*/
            modelid: '',
            /**产品型号*/
            modelname: '',
            /**参与人员*/
            participants: '',
            /**问题*/
            problem: '',
            /**解决方式*/
            solution: '',
            /**解决效果*/
            solutioneffect: '',
            /**附件*/
            annex: ''
        };
        /**监视输入框*/
        $('#input_name, #input_participants,#input_solution,#input_solutioneffect').on('input', function () {
            const key = this.id.replace('input_', '');;
            addsb[key] = $(this).val(); 
        });
        /**上传文件子服务器*/
        document.getElementById('ff').addEventListener('change', function (event) {
            // 检查是否有文件被选中
            if (event.target.files.length > 0) {
                // 调用自定义的 submitForm 方法
                submitForm();
            }
        });

        /** 添加/修改按钮  */
        const add = async() => {
            if (addsb.name == '') {
                alert('请填写产品名称');
                return;
            }
            if (addsb.model == '') {
                alert('请填写产品型号');
                return;
            }
            const data= await $.ajax({
                url: "Richtext.ashx?m=add",
                type: "POST",
                data: addsb,
                dataType: "json" 
            }); 
            if (data != false) {
                await $.messager.alert("保存", "保存成功");
                await history.pushState(null, null, '?id=' + parseInt(data, 10));
                await getQueryParam();
            }
            else {
                await $.messager.alert("保存", "保存失败");
            }
        }
        /** 上传附件 */
        const submitForm = () => {
            /**找到id为ff的文件上传框*/
            var fileInput = document.getElementById('ff');
            /**找到上传文件*/
            var file = fileInput.files[0];
            /**创建文件对象*/
            var formData = new FormData();
            formData.append('file', file);
            /**创建连接*/
            var xhr = new XMLHttpRequest();
            xhr.open('POST', '/mes/pc/intelligence/Richtext.ashx?m=0', true);
            /**发送文件*/
            xhr.send(formData);
            /**返回值赋值*/
            xhr.onload = function () {
                if (xhr.status === 200) { 
                    try {
                       /**将JSON字符串解析为JavaScript对象 */
                        var responseData = JSON.parse(xhr.response);
                       /**检查errno是否为0，以确认请求成功  */
                        if (responseData.errno === 0) {
                            /**设置addsb.annex为响应中的url  */
                            addsb.annex = responseData.data.url;
                           // messager(true);
                            $.messager.alert("上传附件", "附件上传至服务器成功");
                        } else {
                            console.error('请求成功但发生错误', responseData.errno);
                           // messager(false);
                            $.messager.alert("上传附件", "附件上传至服务器失败");
                        }
                    } catch (e) {
                        console.error('解析JSON失败', e);
                        //messager(false);
                        $.messager.alert("上传附件", "附件上传至服务器失败");
                    }
                } else {
                    console.error('请求失败', xhr.status);
                   // messager(false);
                    $.messager.alert("上传附件", "附件上传至服务器失败");
                }
            }
        }; 
        /** 获取产品型号 */
        const getproductmodel = () => {
            $.get("Richtext.ashx?m=getproductmodel", function (data) {
                var json = JSON.parse(data); 
                models = json; 
                loadModelsToSelect();
            })
        }; 
        /** 获取当前记录 */
        const getlibrary = async (libraryid) => {
            return new Promise((resolve, reject) => {
                $.ajax({
                    url: "Richtext.ashx?m=get",
                    type: "POST",
                    data: { id: libraryid },
                    dataType: "json",
                    success: function (response) {
                        if (response && response.length > 0) {
                            const data = response[0];
                            addsb.id = data.id;
                            addsb.name = data.name;
                            addsb.modelid = data.modelid;
                            addsb.modelname = data.modelname;
                            addsb.participants = data.participants;
                            addsb.problem = data.problem;
                            addsb.solution = data.solution;
                            addsb.solutioneffect = data.solutioneffect;
                            addsb.annex = data.annex;
                            // 设置输入框的初始值   
                            input_name.value = addsb.name;
                            input_participants.value = addsb.participants;
                            input_solution.value = addsb.solution;
                            input_solutioneffect.value = addsb.solutioneffect;
                            //异步完成标识
                            resolve();
                        } else {
                            reject(new Error("没有获取到有效的数据"));
                        }
                    },
                    error: function (xhr, status, error) {
                        reject(new Error("请求失败: " + error));
                    }
                });
            }); 
        };
        /**获取url内的id */
        const getQueryParam = async () => {
            let libraryIdFound = false;
            let libraryPromise = null;
            // 获取URL的查询字符串部分  
            var search = window.location.search.substring(1);
            // 将查询字符串分割成键值对数组  
            var params = search.split("&");
            for (var i = 0; i < params.length; i++) {
                var val = params[i].split("=");
                // 如果找到了匹配的参数名，则返回其值  
                if (val[0] == 'id') {
                    libraryIdFound = true;
                    libraryPromise = getlibrary(val[1]);
                    break;
                }
            } 
            if (libraryIdFound) { 
                 // 等待getlibrary完成  
                await libraryPromise; 
            } 
            opendiv();
            loadModelsToSelect(); 
        };
        /**删除按钮 */
        const deletefile = () => {
            //文件重新赋值
            addsb.annex = '';
            /**上传附件 */
            let isopen = document.getElementById('isopen');
            //展示
            isopen.style.display = 'block';
            /**显示附件 */
            let presetFileName = document.getElementById('presetFileName');
            // 隐藏文件输入字段
            presetFileName.style.display = 'none';
            //调用删除附件(只是删除数据库,物理路径并未删除)
            $.ajax({
                url: "Richtext.ashx?m=deletefile",
                type: "POST",
                data: { id: addsb.id },
            })
        };
        /**下载附件 */
        const downfile = () => { 
            var a = document.createElement("a");
            a.href = addsb.annex;
            a.download = addsb.annex.substr(addsb.annex.lastIndexOf('/') + 1);
            document.body.appendChild(a);
            a.click();
            document.body.removeChild(a);
        };
        /**判断是否开启div*/
        const opendiv = () => {
            /**上传附件 */
            let isopen = document.getElementById('isopen');
            /**显示附件 */
            let presetFileName = document.getElementById('presetFileName');
            //判断上传文档是否开启    
            if (addsb.annex) { 
                // 隐藏
                isopen.style.display = 'none';
                let filename = document.getElementById('filename');
                filename.innerHTML = '已上传文件: ' + addsb.annex.substr(addsb.annex.lastIndexOf('/') + 1); 
                presetFileName.style.display = 'block';
            } else {  
                presetFileName.style.display = 'none';
                isopen.style.display = 'block';
            }
            // 假设您已经有一个全局的编辑器实例变量 `editor`  
            if (editor && typeof editor.setHtml === 'function') {
                // 设置编辑器的内容为从服务器返回的问题数据  
                editor.setHtml(addsb.problem);
            }
        }
    </script>
</body>
</html >