ss panel v3
ss panel v3

优化工单系统界面

注意事项

① 本教程需要 引入MDUI
② 本教程涉及修改/替换某些文件，请做好备份

操作步骤

进入网站根目录，进入/resources/views/material/user目录，编辑ticket_view.tpl文件，复制如下内容后替换

{include file='user/main.tpl'}

	<main class="content">
		<div class="content-header ui-content-header">
			<div class="container">
				<h1 class="content-heading">查看工单</h1>
			</div>
		</div>
		<div class="container">
			<div class="col-lg-12 col-sm-12">
				<section class="content-inner margin-top-no">
					<div class="card">
						<div class="card-main">
							<div class="card-inner">
								<div class="form-group form-group-label">
									<label class="floating-label" for="content">内容</label>
									<link rel="stylesheet" href="/theme/material/editor/css/editormd.min.css" />
									<div id="editormd">
										<textarea style="display:none;" id="content"></textarea>
									</div>
								</div>
							</div>
						</div>
					</div>
					
					<div class="mdui-typo">
						<h3 style="color: #3f51b5">操作</h3>
					</div>
					
					<div class="mdui-card">
						<div class="mdui-card-actions">
							<div class="mdui-row-xs-2">
								<div class="mdui-col">
									<button id="submit" type="submit" class="mdui-btn mdui-btn-block mdui-color-pink-a200 mdui-ripple mdui-btn-raised">提交</button>
								</div>
								<div class="mdui-col">
									<button id="close" type="submit" class="mdui-btn mdui-btn-block mdui-color-indigo mdui-ripple mdui-btn-raised">提交并关闭</button>
								</div>
							</div>
						</div>
					</div>
					
					<div class="mdui-typo">
						<h3 style="color: #3f51b5">内容</h3>
					</div>
					
					{$ticketset->render()}
					{foreach $ticketset as $ticket}
					<div class="mdui-chip">
					{if $ticket->User()->isAdmin()}
						<!-- <img class="mdui-chip-icon" src="https://i.loli.net/2018/06/17/5b2633c2d45da.png"/> -->
						<span class="mdui-chip-icon mdui-color-red"><i class="mdui-icon material-icons">person</i></span>
						<span class="mdui-chip-title">管理员</span>
					{else}
						<!-- <img class="mdui-chip-icon" src="https://i.loli.net/2018/06/04/5b150945bc54d.png"/> -->
						<span class="mdui-chip-icon mdui-color-green"><i class="mdui-icon material-icons">person</i></span>
						<span class="mdui-chip-title">{$ticket->User()->user_name}</span>
					{/if}
					</div>
					<div class="mdui-chip">
						<span class="mdui-chip-icon mdui-color-blue"><i class="mdui-icon material-icons">access_time</i></span>
						<span class="mdui-chip-title">{$ticket->datetime()}</span>
					</div>
					</br></br>
					<div class="mdui-card">
						<div class="mdui-card-content">
							{$ticket->content}
						</div>
					</div></br>
					{/foreach}
					{$ticketset->render()}
					{include file='dialog.tpl'}
			</div>
		</div>
	</main>

{include file='user/footer.tpl'}

<script src="/theme/material/editor/editormd.min.js"></script>
<script>
    $(document).ready(function () {
        function submit() {
			$("#result").modal();
            $("#msg").html("正在提交...");
            $.ajax({
                type: "PUT",
                url: "/user/ticket/{$id}",
                dataType: "json",
                data: {
                    content: editor.getHTML(),
					title: $("#title").val(),
					status:status
                },
                success: function (data) {
                    if (data.ret) {
                        $("#result").modal();
                        $("#msg").html(data.msg);
                        window.setTimeout("location.href='/user/ticket'", {$config['jump_delay']});
                    } else {
                        $("#result").modal();
                        $("#msg").html(data.msg);
                    }
                },
                error: function (jqXHR) {
                    $("#msg-error").hide(10);
                    $("#msg-error").show(100);
                    $("#msg-error-p").html("发生错误：" + jqXHR.status);
                }
            });
        }
		
        $("#submit").click(function () {
			status=1;
            submit();
        });
		
		$("#close").click(function () {
			status=0;
            submit();
        });
    });
	
    $(function() {
        editor = editormd("editormd", {
            path : "/theme/material/editor/lib/", // Autoload modules mode, codemirror, marked... dependents libs path
			height: 450,
			saveHTMLToTextarea : true
        });

        /*
        // or
        var editor = editormd({
            id   : "editormd",
            path : "../lib/"
        });
        */
    });
</script>

进入网站根目录，进入/resources/views/material/admin/ticket目录，编辑view.tpl文件，复制如下内容后替换

{include file='admin/main.tpl'}

	<main class="content">
		<div class="content-header ui-content-header">
			<div class="container">
				<h1 class="content-heading">查看工单</h1>
			</div>
		</div>
		<div class="container">
			<div class="col-lg-12 col-sm-12">
				<section class="content-inner margin-top-no">
				
					<div class="card">
						<div class="card-main">
							<div class="card-inner">
								<div class="form-group form-group-label">
									<label class="floating-label" for="content">内容</label>
									<link rel="stylesheet" href="/theme/material/editor/css/editormd.min.css" />
									<div id="editormd">
										<textarea style="display:none;" id="content"></textarea>
									</div>
								</div>
							</div>
						</div>
					</div>
					
					<div class="mdui-typo">
						<h3 style="color: #3f51b5">操作</h3>
					</div>
					
					<div class="mdui-card">
						<div class="mdui-card-actions">
							<div class="mdui-row-xs-2">
								<div class="mdui-col">
									<button id="submit" type="submit" class="mdui-btn mdui-btn-block mdui-color-pink-a200 mdui-ripple mdui-btn-raised">提交</button>
								</div>
								<div class="mdui-col">
									<button id="close" type="submit" class="mdui-btn mdui-btn-block mdui-color-indigo mdui-ripple mdui-btn-raised">提交并关闭</button>
								</div>
							</div>
						</div>
					</div>
					
					<div class="mdui-typo">
						<h3 style="color: #3f51b5">内容</h3>
					</div>
					
					{$ticketset->render()}
					{foreach $ticketset as $ticket}
					<div class="mdui-chip">
					{if $ticket->User()->isAdmin()}
						<!-- <img class="mdui-chip-icon" src="https://i.loli.net/2018/06/17/5b2633c2d45da.png"/> -->
						<span class="mdui-chip-icon mdui-color-red"><i class="mdui-icon material-icons">person</i></span>
						<span class="mdui-chip-title">管理员</span>
					{else}
						<!-- <img class="mdui-chip-icon" src="https://i.loli.net/2018/06/04/5b150945bc54d.png"/> -->
						<span class="mdui-chip-icon mdui-color-green"><i class="mdui-icon material-icons">person</i></span>
						<span class="mdui-chip-title"><a href="/admin/user/{$ticket->userid}/edit">{$ticket->User()->user_name}</a></span>
					{/if}
					</div>
					<div class="mdui-chip">
						<span class="mdui-chip-icon mdui-color-blue"><i class="mdui-icon material-icons">access_time</i></span>
						<span class="mdui-chip-title">{$ticket->datetime()}</span>
					</div>
					</br></br>
					<div class="mdui-card">
						<div class="mdui-card-content">
							{$ticket->content}
						</div>
					</div></br>
					{/foreach}
					{$ticketset->render()}
					{include file='dialog.tpl'}
			</div>
		</div>
	</main>

{include file='admin/footer.tpl'}

<script src="/theme/material/editor/editormd.min.js"></script>
<script>
    $(document).ready(function () {
        function submit() {
			$("#result").modal();
            $("#msg").html("正在提交。");
            $.ajax({
                type: "PUT",
                url: "/admin/ticket/{$id}",
                dataType: "json",
                data: {
                    content: editor.getHTML(),
					title: $("#title").val(),
					status:status
                },
                success: function (data) {
                    if (data.ret) {
                        $("#result").modal();
                        $("#msg").html(data.msg);
                        window.setTimeout("location.href=top.document.referrer", {$config['jump_delay']});
                    } else {
                        $("#result").modal();
                        $("#msg").html(data.msg);
                    }
                },
                error: function (jqXHR) {
                    $("#msg-error").hide(10);
                    $("#msg-error").show(100);
                    $("#msg-error-p").html("发生错误：" + jqXHR.status);
                }
            });
        }
		
        $("#submit").click(function () {
			status=1;
            submit();
        });
		
		$("#close").click(function () {
			status=0;
            submit();
        });
    });
	
    $(function() {
        editor = editormd("editormd", {
            path : "/theme/material/editor/lib/", // Autoload modules mode, codemirror, marked... dependents libs path
			height: 450,
			saveHTMLToTextarea : true
        });

        /*
        // or
        var editor = editormd({
            id   : "editormd",
            path : "../lib/"
        });
        */
    });
</script>

效果演示

① 只要是管理员的回复，回复内容上面的用户标识就会显示“管理员”，不会显示管理员的用户名
② 只要是用户的回复，会显示用户的用户名，点击用户的用户名会跳转到该用户的编辑页面，方便操作

https://sspanel3.com/wp-content/uploads/2018/06/optimization-work-order-system.png
没有标签
首页   •   页面美化   •   优化工单系统界面

发表回复

textsms
account_circle
email

  • 贴字@

    请问移动端 editor无法输入词组，只能一个字一个字的输入要怎么解决？

    7 年前 回复
  • mack

    哥 ， 可惜了 ，沒看您在更新~~ 你的東西我覺的都不錯的說~~

    6 年前 回复
arrow_back 上一篇
获取 MDUI
arrow_forward 下一篇
允许用户修改混淆参数

ss panel v3

优化工单系统界面
注意事项 ① 本教程需要 引入MDUI ② 本教程涉及修改/替换某些文件，请做好备份 操作步骤 进入网站根目录，进入/resources/views/material/user目录，编辑ticket_view.tpl文件，复制如…
扫描二维码继续阅读
2018-06-18