From 166c0b6d1855da21c2137e4980aa74f54a689b62 Mon Sep 17 00:00:00 2001
From: sassassin <530521314@qq.com>
Date: Sun, 13 Sep 2020 11:28:26 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E5=9F=BA=E6=9C=AC=E8=AF=A6?=
 =?UTF-8?q?=E6=83=85=E9=A1=B5=E4=B8=8E=E9=AB=98=E7=BA=A7=E8=AF=A6=E6=83=85?=
 =?UTF-8?q?=E9=A1=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 admin/data/menu.json                    |  38 +-
 component/pear/css/pear-module/step.css |   5 +
 component/pear/module/step.js           |  14 +-
 view/document/SeniorDetail.html         | 473 ++++++++++++++++++++++++
 view/document/basicDetail.html          | 206 +++++++++++
 view/document/form.html                 |   4 +-
 6 files changed, 721 insertions(+), 19 deletions(-)
 create mode 100644 view/document/SeniorDetail.html
 create mode 100644 view/document/basicDetail.html

diff --git a/admin/data/menu.json b/admin/data/menu.json
index 57ec7d4..7be9022 100644
--- a/admin/data/menu.json
+++ b/admin/data/menu.json
@@ -298,19 +298,33 @@
 		"type": 0,
 		"href": "",
 		"children": [{
-				"id": 701,
-				"title": "登录页面",
-				"icon": "layui-icon layui-icon-face-smile",
-				"type": 1,
-				"openType": "_iframe",
-				"href": "login.html"
+			"id": 701,
+			"title": "登录页面",
+			"icon": "layui-icon layui-icon-face-smile",
+			"type": 1,
+			"openType": "_iframe",
+			"href": "login.html"
 		},{
-				"id": 702,
-				"title": "空白页面",
-				"icon": "layui-icon layui-icon-face-smile",
-				"type": 1,
-				"openType": "_iframe",
-				"href": "view/system/space.html"
+			"id": 702,
+			"title": "空白页面",
+			"icon": "layui-icon layui-icon-face-smile",
+			"type": 1,
+			"openType": "_iframe",
+			"href": "view/system/space.html"
+		},{
+			"id": 703,
+			"title": "基本详情",
+			"icon": "layui-icon layui-icon-face-smile",
+			"type": 1,
+			"openType": "_iframe",
+			"href": "view/document/basicDetail.html"
+		},{
+			"id": 704,
+			"title": "高级详情",
+			"icon": "layui-icon layui-icon-face-smile",
+			"type": 1,
+			"openType": "_iframe",
+			"href": "view/document/SeniorDetail.html"
 		}]
 	},
 	{
diff --git a/component/pear/css/pear-module/step.css b/component/pear/css/pear-module/step.css
index b622112..379af9c 100644
--- a/component/pear/css/pear-module/step.css
+++ b/component/pear/css/pear-module/step.css
@@ -12,6 +12,7 @@
     line-height: 35px;
     position: relative;
     font-size: 15px;
+    vertical-align: top;
 }
 
 .step-item-tail {
@@ -74,6 +75,10 @@
     color: #aaaaaa;
 }
 
+.step-item-main-time {
+    color: #aaaaaa;
+}
+
 .lay-step + [carousel-item]:before {
     display: none;
 }
diff --git a/component/pear/module/step.js b/component/pear/module/step.js
index 9186061..8bce8d3 100644
--- a/component/pear/module/step.js
+++ b/component/pear/module/step.js
@@ -33,7 +33,8 @@ layui.define(['layer', 'carousel'], function (exports) {
             // 标题和描述
             var title = stepItems[i].title;
             var desc = stepItems[i].desc;
-            if (title || desc) {
+            var time = stepItems[i].time;
+            if (title || desc || time) {
                 stepDiv += '<div class="step-item-main">';
                 if (title) {
                     stepDiv += '<div class="step-item-main-title">' + title + '</div>';
@@ -41,6 +42,9 @@ layui.define(['layer', 'carousel'], function (exports) {
                 if (desc) {
                     stepDiv += '<div class="step-item-main-desc">' + desc + '</div>';
                 }
+                if (time) {
+                    stepDiv += '<div class="step-item-main-time">' + time + '</div>';
+                }
                 stepDiv += '</div>';
             }
             stepDiv += '</div>';
@@ -57,9 +61,9 @@ layui.define(['layer', 'carousel'], function (exports) {
     var pearStep = {
         // 渲染步骤条
         render: function (param) {
-            param.indicator = 'none';  // 不显示指示器
-            param.arrow = 'always';  // 始终显示箭头
-            param.autoplay = false;  // 关闭自动播放
+            param.indicator = 'none'; // 不显示指示器
+            param.arrow = 'always'; // 始终显示箭头
+            param.autoplay = false; // 关闭自动播放
             if (!param.stepWidth) {
                 param.stepWidth = '400px';
             }
@@ -95,4 +99,4 @@ layui.define(['layer', 'carousel'], function (exports) {
         }
     };
     exports('step', pearStep);
-});
+});
\ No newline at end of file
diff --git a/view/document/SeniorDetail.html b/view/document/SeniorDetail.html
new file mode 100644
index 0000000..f597095
--- /dev/null
+++ b/view/document/SeniorDetail.html
@@ -0,0 +1,473 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+	<meta charset="utf-8">
+	<meta name="viewport"
+		content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
+	<title>高级详情</title>
+	<link href="../../component/pear/css/pear.css" rel="stylesheet">
+	<style type="text/css">
+		.layui-row .layui-col-xs4 {
+			padding-bottom: 16px;
+		}
+
+		.layui-row .layui-col-xs8 {
+			padding-bottom: 16px;
+		}
+
+		.lay-step {
+			padding-left: 10%;
+		}
+	</style>
+</head>
+
+<body class="pear-container">
+	<div class="layui-row layui-col-space10">
+		<div class="layui-col-xs12">
+			<div class="layui-card">
+				<div class="layui-card-header">工单信息</div>
+				<div class="layui-card-body">
+					<div class="layui-row layui-col-space1">
+						<div class="layui-col-xs8" style="padding-bottom: 10px;">
+							<b>单号:234231029431</b>
+						</div>
+						<div class="layui-col-xs4" style="padding-bottom: 10px;">
+							<div class="pear-btn-group">
+								<button class="pear-btn pear-btn-sm"> 操作 </button>
+								<button class="pear-btn pear-btn-primary pear-btn-sm"> 操作 </button>
+								<button class="pear-btn pear-btn-success pear-btn-sm"> 操作 </button>
+								<button class="pear-btn pear-btn-success pear-btn-sm"
+									lay-dropdown="{templateMenu: '#myMenus'}">更多操作 </button>
+							</div>
+						</div>
+						<div class="layui-col-xs4">
+							创建人:曲丽丽
+						</div>
+						<div class="layui-col-xs4">
+							订购产品:XX 服务
+						</div>
+						<div class="layui-col-xs4">
+							状态:待审批
+						</div>
+						<div class="layui-col-xs4">
+							创建时间:2017-07-07
+						</div>
+						<div class="layui-col-xs4">
+							关联单据:12421
+						</div>
+						<div class="layui-col-xs4">
+							生效日期:2017-07-07 ~ 2017-08-08
+						</div>
+						<div class="layui-col-xs4">
+							备注:请于两个工作日内确认
+						</div>
+						<div class="layui-col-xs4">
+							订单金额:¥568.08
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+
+		<div class="layui-col-xs12">
+			<div class="layui-card">
+				<div class="layui-card-header">流程进度</div>
+				<div class="layui-card-body">
+					<div class="layui-carousel" id="stepForm" lay-filter="stepForm"></div>
+				</div>
+			</div>
+		</div>
+
+		<div class="layui-col-xs12">
+			<div class="layui-card">
+				<div class="layui-card-header">用户信息</div>
+				<div class="layui-card-body">
+					<div class="layui-row layui-col-space1 userInfo">
+						<div class="layui-col-xs4">
+							用户姓名：付小小
+						</div>
+						<div class="layui-col-xs4">
+							联系电话：18100000000
+						</div>
+						<div class="layui-col-xs4">
+							常用快递：菜鸟仓储
+						</div>
+						<div class="layui-col-xs8">
+							取货地址：浙江省杭州市西湖区万塘路18号
+						</div>
+						<div class="layui-col-xs4">
+							备注：无
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+
+		<div class="layui-col-xs6">
+			<div class="layui-card">
+				<div class="layui-card-header">工单明细</div>
+				<div class="layui-card-body">
+					<table id="orderItems"></table>
+				</div>
+			</div>
+		</div>
+
+		<div class="layui-col-xs6">
+			<div class="layui-card">
+				<div class="layui-card-header">占比统计</div>
+				<div class="layui-card-body">
+					<div class="layui-tab custom-tab layui-tab-brief" lay-filter="docDemoTabBrief">
+						<div id="echarts-records" style="background-color:#ffffff;min-height:300px;padding: 10px"></div>
+					</div>
+				</div>
+			</div>
+		</div>
+
+		<div class="layui-col-xs12">
+			<div class="layui-card">
+				<div class="layui-card-body">
+					<div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
+						<ul class="layui-tab-title">
+							<li class="layui-this">操作日志</li>
+							<li>访问日志</li>
+							<li>更改日志</li>
+						</ul>
+						<div class="layui-tab-content">
+							<div class="layui-tab-item layui-show">
+								<table id="operateLog"></table>
+							</div>
+							<div class="layui-tab-item">
+								<table id="requestLog"></table>
+							</div>
+							<div class="layui-tab-item">
+								<table id="editLog"></table>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+	<script id="myMenus" type="text/script">
+		[
+		  [{txt: "操作一", event: "operate1"}]
+		  [{txt: "操作二", event: "operate2"}]
+		  [{txt: "操作三", event: "operate3"}]
+		]
+	</script>
+	<script src="../../component/layui/layui.js"></script>
+	<script src="../../component/pear/pear.js"></script>
+	<script>
+		layui.use(['jquery', 'form', 'element', 'table', 'step', 'dropdown', 'echarts', 'topBar'], function () {
+			var form = layui.form;
+			var element = layui.element;
+			var table = layui.table;
+			var step = layui.step;
+			var dropdown = layui.dropdown;
+			var echarts = layui.echarts;
+
+			dropdown.onFilter('test1', function (event) {
+
+			})
+
+			step.render({
+				elem: '#stepForm',
+				filter: 'stepForm',
+				width: '100%',
+				stepWidth: '100%',
+				height: '150px',
+				stepItems: [{
+					title: '创建项目',
+					desc: "曲丽丽",
+					time: "2016-12-12 12:32"
+				}, {
+					title: '部门初审',
+					desc: "周毛毛",
+					time: ""
+				}, {
+					title: '财务复核',
+					desc: '',
+					time: ""
+				}, {
+					title: '完成',
+					desc: '',
+					time: ""
+				}]
+			});
+
+			table.render({
+				elem: '#orderItems',
+				skin: 'line',
+				height: '300',
+				cols: [
+					[{
+							field: "id",
+							title: "编号"
+						},
+						{
+							field: "name",
+							title: "名称"
+						},
+						{
+							field: "remark",
+							title: "备注"
+						},
+						{
+							field: "fee",
+							title: "维修费用"
+						}
+					]
+				],
+				data: [{
+						id: 1234561,
+						name: "冰箱",
+						remark: "制冷设备损坏",
+						fee: "100.00"
+					},
+					{
+						id: 1234562,
+						name: "空调",
+						remark: "外机固定架更换",
+						fee: "30.00"
+					},
+					{
+						id: 1234563,
+						name: "地板",
+						remark: "地板维修",
+						fee: "300.00"
+					}, {
+						id: 1234564,
+						name: "草坪",
+						remark: "需携带除草机",
+						fee: "2000.00"
+					}, {
+						id: 1234566,
+						name: "扫雪",
+						remark: "专业扫雪设备",
+						fee: "16000.00"
+					}
+				]
+			});
+
+			table.render({
+				elem: '#operateLog',
+				skin: 'line',
+				cols: [
+					[{
+							field: "operateType",
+							title: "操作类型"
+						},
+						{
+							field: "operateName",
+							title: "操作人"
+						},
+						{
+							field: "executeResult",
+							title: "执行结果"
+						},
+						{
+							field: "operateTime",
+							title: "操作时间"
+						},
+						{
+							field: "remark",
+							title: "备注"
+						}
+					]
+				],
+				data: [{
+						operateType: "订购关系生效",
+						operateName: "曲丽丽",
+						executeResult: "成功",
+						operateTime: "2017-10-03 19:23:12",
+						remark: "-"
+					},
+					{
+						operateType: "财务复审",
+						operateName: "付小小",
+						executeResult: "驳回",
+						operateTime: "2017-10-03 19:23:12",
+						remark: "不通过原因"
+					}, {
+						operateType: "部门初审",
+						operateName: "周毛毛",
+						executeResult: "成功",
+						operateTime: "2017-10-03 19:23:12",
+						remark: "很棒"
+					}, {
+						operateType: "提交订单",
+						operateName: "汗牙牙",
+						executeResult: "成功",
+						operateTime: "2017-10-03 19:23:12",
+						remark: "-"
+					}, {
+						operateType: "创建订单",
+						operateName: "曲丽丽",
+						executeResult: "成功",
+						operateTime: "2017-10-03 19:23:12",
+						remark: "-"
+					}
+				]
+			});
+
+			table.render({
+				elem: '#requestLog',
+				skin: 'line',
+				cols: [
+					[{
+							field: "time",
+							title: "时间"
+						},
+						{
+							field: "userName",
+							title: "访问人员"
+						}
+					]
+				],
+				data: [{
+						time: "2017-10-01 14:10",
+						userName: "西门吹雪"
+					},
+					{
+						time: "2017-10-01 14:10",
+						userName: "独孤求败"
+					}, {
+						time: "2017-10-01 14:10",
+						userName: "刺客567"
+					}, {
+						time: "2017-10-01 14:10",
+						userName: "张麻子"
+					}, {
+						time: "2017-10-01 14:10",
+						userName: "文西"
+					}
+				]
+			});
+
+			table.render({
+				elem: '#editLog',
+				skin: 'line',
+				cols: [
+					[{
+							field: "time",
+							title: "时间"
+						},
+						{
+							field: "userName",
+							title: "编辑人员"
+						},
+						{
+							field: "editContent",
+							title: "编辑内容"
+						}
+					]
+				],
+				data: [{
+						time: "2017-10-01 14:10",
+						userName: "刘备",
+						editContent: "金额"
+					},
+					{
+						time: "2017-10-01 14:10",
+						userName: "关羽",
+						editContent: "武力值"
+					}, {
+						time: "2017-10-01 14:10",
+						userName: "张飞",
+						editContent: "怒气值"
+					}, {
+						time: "2017-10-01 14:10",
+						userName: "路人甲",
+						editContent: "眼力值"
+					}, {
+						time: "2017-10-01 14:10",
+						userName: "炮灰乙",
+						editContent: "概率值"
+					},
+				]
+			});
+
+			var echartsRecords = echarts.init(document.getElementById('echarts-records'), 'walden');
+
+			var option = {
+				tooltip: {
+					trigger: 'axis'
+				},
+				xAxis: [{
+					type: 'category',
+					data: ['2019-01', '2019-02', '2019-03', '2019-04', '2019-05', '2019-06'],
+					axisLine: {
+						lineStyle: {
+							color: "#999"
+						}
+					}
+				}],
+				yAxis: [{
+					type: 'value',
+					splitNumber: 4,
+					splitLine: {
+						lineStyle: {
+							type: 'dashed',
+							color: '#DDD'
+						}
+					},
+					axisLine: {
+						show: false,
+						lineStyle: {
+							color: "#333"
+						},
+					},
+					nameTextStyle: {
+						color: "#999"
+					},
+					splitArea: {
+						show: false
+					}
+				}],
+				series: [{
+					name: '课时',
+					type: 'line',
+					data: [23, 60, 20, 36, 23, 85],
+					lineStyle: {
+						normal: {
+							width: 8,
+							color: {
+								type: 'linear',
+
+								colorStops: [{
+									offset: 0,
+									color: '#A9F387' // 0% 处的颜色
+								}, {
+									offset: 1,
+									color: '#48D8BF' // 100% 处的颜色
+								}],
+								globalCoord: false // 缺省为 false
+							},
+							shadowColor: 'rgba(72,216,191, 0.3)',
+							shadowBlur: 10,
+							shadowOffsetY: 20
+						}
+					},
+					itemStyle: {
+						normal: {
+							color: '#fff',
+							borderWidth: 10,
+							/*shadowColor: 'rgba(72,216,191, 0.3)',
+							shadowBlur: 100,*/
+							borderColor: "#A9F387"
+						}
+					},
+					smooth: true
+				}]
+			};
+			echartsRecords.setOption(option);
+
+			window.onresize = function () {
+				echartsRecords.resize();
+			}
+		});
+	</script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/view/document/basicDetail.html b/view/document/basicDetail.html
new file mode 100644
index 0000000..9e08cae
--- /dev/null
+++ b/view/document/basicDetail.html
@@ -0,0 +1,206 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+	<meta charset="utf-8">
+	<meta name="viewport"
+		content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
+	<title>基本详情</title>
+	<link href="../../component/pear/css/pear.css" rel="stylesheet">
+	<style type="text/css">
+		.layui-row .layui-col-xs4 {
+			padding-bottom: 16px;
+		}
+	</style>
+</head>
+
+<body class="pear-container">
+	<div class="layui-card">
+		<div class="layui-card-body">
+			<br>
+			<h2>退款申请</h2>
+			<br>
+			<div class="layui-row layui-col-space1">
+				<div class="layui-col-xs4">
+					取货单号:1000000000
+				</div>
+				<div class="layui-col-xs4">
+					状态:已取货
+				</div>
+				<div class="layui-col-xs4">
+					销售单号:1234123421
+				</div>
+				<div class="layui-col-xs12">
+					子订单:3214321432
+				</div>
+			</div>
+			<hr class="layui-bg-gray">
+
+			<br>
+			<h2>用户信息</h2>
+			<br>
+			<div class="layui-row layui-col-space1 userInfo">
+				<div class="layui-col-xs4">
+					用户姓名：付小小
+				</div>
+				<div class="layui-col-xs4">
+					联系电话：18100000000
+				</div>
+				<div class="layui-col-xs4">
+					常用快递：菜鸟仓储
+				</div>
+				<div class="layui-col-xs8">
+					取货地址：浙江省杭州市西湖区万塘路18号
+				</div>
+				<div class="layui-col-xs4">
+					备注：无
+				</div>
+			</div>
+			<hr class="layui-bg-gray">
+
+			<br>
+			<h2>退货商品</h2>
+			<table id="goods"></table>
+
+			<br>
+			<h2>退货进度</h2>
+			<table id="process"></table>
+		</div>
+	</div>
+	<script src="../../component/layui/layui.js"></script>
+	<script src="../../component/pear/pear.js"></script>
+	<script>
+		layui.use(['jquery', 'form', 'element', 'table','topBar'], function () {
+			var form = layui.form;
+			var element = layui.element;
+			var table = layui.table;
+
+			table.render({
+				elem: '#goods',
+				skin: 'line',
+				cols: [
+					[{
+							field: "id",
+							title: "商品编号"
+						},
+						{
+							field: "name",
+							title: "商品名称"
+						},
+						{
+							field: "barcode",
+							title: "商品条码"
+						},
+						{
+							field: "price",
+							title: "单价"
+						},
+						{
+							field: "amount",
+							title: "数量（件）"
+						},
+						{
+							field: "totalPrice",
+							title: "金额"
+						}
+					]
+				],
+				data: [{
+						id: 1234561,
+						name: "矿泉水 550ml",
+						barcode: "12421432143214321",
+						price: "2.00",
+						amount: 1,
+						totalPrice: "2.00"
+					},
+					{
+						id: 1234562,
+						name: "凉茶 300ml",
+						barcode: "12421432143214322",
+						price: "3.00",
+						amount: 2,
+						totalPrice: "6.00"
+					},
+					{
+						id: 1234563,
+						name: "好吃的薯片",
+						barcode: "12421432143214322",
+						price: "3.00",
+						amount: 2,
+						totalPrice: "6.00"
+					}, {
+						id: 1234564,
+						name: "特别好吃的蛋卷",
+						barcode: "12421432143214322",
+						price: "3.00",
+						amount: 2,
+						totalPrice: "6.00"
+					}
+				]
+			});
+
+			table.render({
+				elem: '#process',
+				skin: 'line',
+				cols: [
+					[{
+							field: "time",
+							title: "时间"
+						},
+						{
+							field: "process",
+							title: "当前进度"
+						},
+						{
+							field: "state",
+							title: "状态"
+						},
+						{
+							field: "operateId",
+							title: "操作员ID"
+						},
+						{
+							field: "useTime",
+							title: "耗时"
+						}
+					]
+				],
+				data: [{
+						time: "2017-10-01 14:10",
+						process: "联系客户",
+						state: "进行中",
+						operateId: "取货员 ID1234",
+						useTime: "5mins"
+					},
+					{
+						time: "2017-10-01 14:10",
+						process: "取货员出发",
+						state: "完成",
+						operateId: "取货员 ID1234",
+						useTime: "1h"
+					}, {
+						time: "2017-10-01 14:10",
+						process: "取货员接单",
+						state: "完成",
+						operateId: "取货员 ID1234",
+						useTime: "5mins"
+					}, {
+						time: "2017-10-01 14:10",
+						process: "申请审批通过",
+						state: "完成",
+						operateId: "系统",
+						useTime: "1h"
+					}, {
+						time: "2017-10-01 14:10",
+						process: "发起退货申请",
+						state: "完成",
+						operateId: "用户",
+						useTime: "5mins"
+					},
+				]
+			});
+		});
+	</script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/view/document/form.html b/view/document/form.html
index 0a27f4f..c991209 100644
--- a/view/document/form.html
+++ b/view/document/form.html
@@ -3,7 +3,7 @@
 	<head>
 		<meta charset="utf-8">
 		<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
-		<title>富文本编辑器</title>
+		<title>表单页面</title>
 		<link href="../../component/pear/css/pear.css" rel="stylesheet">
 	</head>
 	<body class="pear-container">
@@ -12,7 +12,7 @@
 				<div class="layui-card">
 					<div class="layui-card-header">开发环境</div>
 					<div class="layui-card-body">
-						Pear 基于 From 的基础上扩展样式
+						Pear 基于 Form 的基础上扩展样式
 					</div>
 				</div>
 				<div class="layui-collapse">