|
|
@@ -0,0 +1,238 @@
|
|
|
+<!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>
|
|
|
+ .input {
|
|
|
+ border-radius: 2px;
|
|
|
+ height: 38px;
|
|
|
+ border-width: 1px;
|
|
|
+ border-color: lightgray;
|
|
|
+ border-style: solid;
|
|
|
+ background-color: white;
|
|
|
+ padding-left: 3px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .processText {
|
|
|
+ margin-top: 6px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .layui-upload-drag {
|
|
|
+ padding: 10px;
|
|
|
+ margin-right: 15px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .imgsContent {
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-start;
|
|
|
+ flex-direction: row;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ }
|
|
|
+
|
|
|
+ .image {
|
|
|
+ width: 150px;
|
|
|
+ height: auto;
|
|
|
+ }
|
|
|
+
|
|
|
+ .imgItem {
|
|
|
+ margin: 0 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .option {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ flex-direction: row;
|
|
|
+ }
|
|
|
+
|
|
|
+ .optionItem {
|
|
|
+ padding: 0 13px;
|
|
|
+ margin: 10px;
|
|
|
+ border: 1px solid rgba(0, 0, 0, 0.1);
|
|
|
+ background: #009688;
|
|
|
+ color: #ffffff;
|
|
|
+ }
|
|
|
+
|
|
|
+ </style>
|
|
|
+</head>
|
|
|
+<body>
|
|
|
+
|
|
|
+<div class="layui-fluid">
|
|
|
+ <div class="layui-row layui-col-space15">
|
|
|
+ <div class="layui-card">
|
|
|
+
|
|
|
+ <div class="layui-card-body" pad15>
|
|
|
+ <form class="layui-form" action="" lay-filter="component-form-element">
|
|
|
+ <div class="layui-row layui-col-space10 layui-form-item">
|
|
|
+ <div>
|
|
|
+ <label class="layui-form-label">当前进度：</label>
|
|
|
+ <div class="layui-input-block processText" id="current_process"></div>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <label class="layui-form-label">下一进度：</label>
|
|
|
+ <div class="layui-input-block processText" id="next_process"></div>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <label class="layui-form-label">服务人员：</label>
|
|
|
+ <div class="layui-input-block">
|
|
|
+ <select id="id_service" name="service" lay-search="">
|
|
|
+ <option value="">请选择服务人员</option>
|
|
|
+ </select>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <button id="id_save" class="layui-btn" lay-submit lay-filter="component-form-element"
|
|
|
+ style="display: none">保存
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
+ </form>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</div>
|
|
|
+<script src="../../layuiadmin/layui/layui.js"></script>
|
|
|
+<script>
|
|
|
+ //即将上传的文件数组
|
|
|
+ var filesList = [];
|
|
|
+ //渲染的图片列表
|
|
|
+ var imgsList = [];
|
|
|
+
|
|
|
+ //渲染待上传的图片列表
|
|
|
+ var renderImgsList = function (list) {
|
|
|
+ var html = "";
|
|
|
+ list.forEach((item, index) => {
|
|
|
+ html += "<div class='imgItem'>\n";
|
|
|
+ html += "<img src='" + item + "' class='image'>\n";
|
|
|
+ html += '<div class="option">\n';
|
|
|
+ html += '<div onclick="showImg(' + index + ')" class="optionItem">查看</div>\n';
|
|
|
+ html += '<div onclick="deleteImg(' + index + ')" class="optionItem">删除</div>\n';
|
|
|
+ html += '</div>\n';
|
|
|
+ html += '</div>\n';
|
|
|
+ })
|
|
|
+ layui.$('#imgsList').html(html);
|
|
|
+ }
|
|
|
+
|
|
|
+ var showImg = function (index) {
|
|
|
+ var newPage = window.open();
|
|
|
+ newPage.document.write("<img src=" + imgsList[index] + " />")
|
|
|
+ };
|
|
|
+
|
|
|
+ var deleteImg = function (index) {
|
|
|
+ filesList.splice(index, 1);
|
|
|
+ imgsList.splice(index, 1);
|
|
|
+ renderImgsList(imgsList);
|
|
|
+ };
|
|
|
+
|
|
|
+ layui.link('../../../layuiadmin/style/autocomplete.css');
|
|
|
+ layui.config({
|
|
|
+ base: '../../../layuiadmin/' //静态资源所在路径
|
|
|
+ , autocomplete: 'autocomplete'
|
|
|
+ }).extend({
|
|
|
+ index: 'lib/index',
|
|
|
+ }).use(['index', 'form', 'autocomplete', 'upload'], function () {
|
|
|
+ var $ = layui.$
|
|
|
+ , admin = layui.admin
|
|
|
+ , upload = layui.upload
|
|
|
+ , form = layui.form;
|
|
|
+
|
|
|
+ var customer_id = layui.view.getParameterByName('customer_id');
|
|
|
+ //form.render(null, 'component-form-element');
|
|
|
+ var next_process_id = '';
|
|
|
+ admin.req({
|
|
|
+ url: '/order/get_process/?customer_id=' + customer_id
|
|
|
+ , type: 'get'
|
|
|
+ , done: function (res) {
|
|
|
+ if (res.data.error) {
|
|
|
+ layer.open({
|
|
|
+ type: 1
|
|
|
+ , offset: 'auto' //具体配置参考：http://www.layui.com/doc/modules/layer.html#offset
|
|
|
+ , id: 'layerDemo' + customer_id //防止重复弹出
|
|
|
+ , content: '<div style="padding: 20px 100px;">' + res.data.error_message + '</div>'
|
|
|
+ , btn: '关闭'
|
|
|
+ , btnAlign: 'c' //按钮居中
|
|
|
+ , shade: 0 //不显示遮罩
|
|
|
+ , yes: function () {
|
|
|
+ parent.layer.closeAll();
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ //当前进度
|
|
|
+ $('#current_process').append(res.data.now_process_text)
|
|
|
+ //下一进度
|
|
|
+ $('#next_process').append(res.data.next_process_text);
|
|
|
+ next_process_id = res.data.next_process_id
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+
|
|
|
+ //拖拽上传
|
|
|
+ upload.render({
|
|
|
+ elem: '#upload_img'
|
|
|
+ , accept: 'file'
|
|
|
+ , exts: 'jpg|png|jpeg|bmp'
|
|
|
+ , acceptMime: '.jpg,.png,.jpeg,.bmp'
|
|
|
+ , data: {}
|
|
|
+ , multiple: true
|
|
|
+ , number: 6
|
|
|
+ , auto: false
|
|
|
+ , choose: function (obj) {
|
|
|
+ if (imgsList.length >= 6) {
|
|
|
+ layer.msg("图片最多只允许上传6张", {icon: 2});
|
|
|
+ return
|
|
|
+ }
|
|
|
+ //预读本地文件，如果是多文件，则会遍历。(不支持ie8/9)
|
|
|
+ obj.preview(function (index, file, result) {
|
|
|
+ filesList.push(file);
|
|
|
+ imgsList.push(result);
|
|
|
+ // 有图片列表的话渲染图片
|
|
|
+ if (imgsList.length > 0) {
|
|
|
+ renderImgsList(imgsList)
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+
|
|
|
+ form.on('submit(component-form-element)', function (data) {
|
|
|
+ if (filesList.length === 0) {
|
|
|
+ layer.msg("请先选择图片！", {icon: 2});
|
|
|
+ return false
|
|
|
+ }
|
|
|
+ if (!next_process_id) {
|
|
|
+ layer.msg("下个进度阶段有误，请刷新重试！", {icon: 2});
|
|
|
+ return false
|
|
|
+ }
|
|
|
+ var formData = new FormData();
|
|
|
+ formData.append("stage_progress", next_process_id);
|
|
|
+ formData.append("notes", data.field.notes);
|
|
|
+ filesList.forEach((item, index) => {
|
|
|
+ formData.append(`file${index}`, item)
|
|
|
+ });
|
|
|
+ var url = '/customer/new_customer/' + customer_id + '/add_order/';
|
|
|
+ admin.req({
|
|
|
+ url: url
|
|
|
+ , 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>
|
lijiangwei