294 lines
13 KiB
Plaintext
294 lines
13 KiB
Plaintext
@using CRM.Core.Model.Entity
|
||
@using Core.Web.WebHelper
|
||
@{
|
||
ViewBag.Title = "Index";
|
||
Layout = "~/Views/Shared/_Layout.cshtml";
|
||
}
|
||
<style>
|
||
.layui-form-label {
|
||
width: 150px
|
||
}
|
||
.layui-input-block {
|
||
margin-left: 0;
|
||
}
|
||
.dialogName {
|
||
width: 31%;
|
||
display: inline-block;
|
||
text-align: center;
|
||
}
|
||
</style>
|
||
|
||
<div class="x-body">
|
||
<form class="layui-form" action="" lay-filter="formTest">
|
||
<div style="margin: 50px;">
|
||
<div class="dialogName">会议名称：<span id="dialog-meetingName"></span></div>
|
||
<div class="dialogName">会议类型：<span id="dialog-meetingType"></span></div>
|
||
<div class="dialogName">主讲人：<span id="dialog-compere"></span></div>
|
||
</div>
|
||
<div class="layui-form-item">
|
||
<div class="layui-upload">
|
||
<button type="button" class="layui-btn layui-btn-sm layui-btn-primary" id="uploadAtt">
|
||
<i class="layui-icon layui-icon-upload-drag layui-font-12"></i> 上传附件
|
||
</button>
|
||
<div class="layui-upload-list" style="max-width: 1000px;">
|
||
<table class="layui-table">
|
||
<colgroup>
|
||
<col width="100">
|
||
<col width="100">
|
||
<col width="200">
|
||
<col width="50">
|
||
</colgroup>
|
||
<thead>
|
||
<tr>
|
||
<th>文件名</th>
|
||
<th>大小</th>
|
||
<th>上传进度</th>
|
||
<th>操作</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody id="demoList"></tbody>
|
||
</table>
|
||
</div>
|
||
@*<button type="button" class="layui-btn layui-btn-sm" id="testListAction">保存附件</button>*@
|
||
<input type="hidden" name="Accessories" id="Accessories" lay-verify="required" lay-reqtext="请上传培训文件！" />
|
||
<br /><span>备注：上传文件支持扩展名：rar .zip .doc .docx .pdf .jpg .png.excel.mp3...</span>
|
||
</div>
|
||
</div>
|
||
<div class="layui-form-item">
|
||
<div class="layui-input-block" style="float: right">
|
||
<input type="hidden" name="Id" id="Id" />
|
||
<button class="layui-btn layui-btn-sm layui-btn-normal" type="button" lay-submit="" id="save" lay-filter="save" onclick="return false;">保存</button>
|
||
</div>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
<script src="~/Scripts/layui_ext/xm-select/xm-select.js"></script>
|
||
<script>
|
||
var selectRow = {};
|
||
var layer;
|
||
var table;
|
||
var winindex;
|
||
var upload;
|
||
var inneruserTree;
|
||
var element;
|
||
var form;
|
||
var accessories = [];
|
||
layui.config({
|
||
base: '../Scripts/layui_ext/',
|
||
}).extend({
|
||
selectInput: 'selectInput/selectInput'
|
||
}).use(['table', 'laydate', 'upload', 'flow', 'element', 'form', 'selectInput'], function () {
|
||
var $ = layui.jquery
|
||
, upload = layui.upload
|
||
, element = layui.element
|
||
, layer = layui.layer
|
||
, form = layui.form
|
||
, selectInput = layui.selectInput;
|
||
element = layui.element;
|
||
var laydate = layui.laydate;
|
||
|
||
laydate.render({
|
||
elem: '#BeginTime'
|
||
, type: 'datetime'
|
||
});
|
||
|
||
var File_Server = '@ViewBag.File_Server';
|
||
var loading;
|
||
|
||
var id = '@Html.Raw(ViewBag.id)';
|
||
init();
|
||
$.ajax({
|
||
type: "GET",
|
||
url: File_Server + "/api/Token?key=7AC51A5F0DE9A13D5FC9960AD45CC8D5",
|
||
success: function (da) {
|
||
token = "Bearer " + da;
|
||
var uploadListIns = upload.render({
|
||
elem: '#uploadAtt'
|
||
, elemList: $('#demoList') //列表元素对象
|
||
//, url: 'https://httpbin.org/post' //此处用的是第三方的 http 请求演示，实际使用时改成您自己的上传接口即可。
|
||
, url: File_Server + '/Streaming/UploadLargeFile'
|
||
, accept: 'file'
|
||
, headers: { Authorization: token }
|
||
, multiple: true
|
||
, number: 3
|
||
, auto: true
|
||
//, bindAction: '#testListAction'
|
||
, choose: function (obj) {
|
||
var that = this;
|
||
var files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列
|
||
|
||
//读取本地文件
|
||
obj.preview(function (index, file, result) {
|
||
if (file.size > 1024 * 1024 * 500) {
|
||
layer.msg('不能上传超过500M的文件！', { icon: 2 });
|
||
delete files[index];
|
||
return;
|
||
}
|
||
var fileSize = (file.size / (1024)) > 1024 ? (file.size / (1024 * 1024)).toFixed(2) + 'MB' :
|
||
(file.size / (1024)).toFixed(1) + 'KB';
|
||
var tr = $(['<tr id="upload-' + index + '">'
|
||
, '<td>' + file.name + '</td>'
|
||
, '<td>' + fileSize + '</td>'
|
||
, '<td><div class="layui-progress" lay-filter="progress-demo-' + index + '"><div class="layui-progress-bar" lay-percent=""></div></div></td>'
|
||
, '<td>'
|
||
, '<button class="layui-btn layui-btn-xs demo-reload layui-hide" type="button">重传</button>'
|
||
, '<button class="layui-btn layui-btn-xs layui-btn-danger demo-delete" type="button">删除</button>'
|
||
, '</td>'
|
||
, '</tr>'].join(''));
|
||
|
||
//单个重传
|
||
tr.find('.demo-reload').on('click', function () {
|
||
obj.upload(index, file);
|
||
});
|
||
|
||
//删除
|
||
tr.find('.demo-delete').on('click', function () {
|
||
delete files[index]; //删除对应的文件
|
||
tr.remove();
|
||
var fileIndex = accessories.findIndex(x => x.fileName == file.name);
|
||
accessories.splice(fileIndex, 1);
|
||
uploadListIns.config.elem.next()[0].value = ''; //清空 input file 值，以免删除后出现同名文件不可选
|
||
});
|
||
|
||
that.elemList.append(tr);
|
||
element.render('progress'); //渲染新加的进度条组件
|
||
});
|
||
}
|
||
, done: function (res, index, upload) { //成功的回调
|
||
var that = this;
|
||
//if(res.code == 0){ //上传成功
|
||
var tr = that.elemList.find('tr#upload-' + index)
|
||
, tds = tr.children();
|
||
//tds.eq(3).html(''); //清空操作
|
||
var file = this.files[index];
|
||
var fileSize = (file.size / (1024)) > 1024 ? (file.size / (1024 * 1024)).toFixed(2) + 'MB' :
|
||
(file.size / (1024)).toFixed(1) + 'KB';
|
||
var data = {
|
||
fileName: file.name,
|
||
fileSize: fileSize,
|
||
fileUrl: res.url
|
||
}
|
||
accessories.push(data);
|
||
delete this.files[index]; //删除文件队列已经上传成功的文件
|
||
return;
|
||
//}
|
||
this.error(index, upload);
|
||
}
|
||
, allDone: function (obj) { //多文件上传完毕后的状态回调
|
||
console.log(obj)
|
||
var data = JSON.stringify(accessories);
|
||
console.log(data);
|
||
document.getElementById("Accessories").value = JSON.stringify(accessories);
|
||
}
|
||
, error: function (index, upload) { //错误回调
|
||
var that = this;
|
||
var tr = that.elemList.find('tr#upload-' + index)
|
||
, tds = tr.children();
|
||
tds.eq(3).find('.demo-reload').removeClass('layui-hide'); //显示重传
|
||
}
|
||
, progress: function (n, elem, e, index) { //注意：index 参数为 layui 2.6.6 新增
|
||
element.progress('progress-demo-' + index, n + '%'); //执行进度条。n 即为返回的进度百分比
|
||
}
|
||
});
|
||
}
|
||
})
|
||
form.on('submit(save)', function (data) {
|
||
var eid = '@ViewBag.eid';
|
||
if (accessories.length == 0) {
|
||
layer.msg("请上传培训文件！", { icon: 5 });
|
||
return;
|
||
}
|
||
layer.confirm('是否确认保存?', { icon: 3, title: '提示' }, function (index) {
|
||
$.ajax({
|
||
type: "POST",
|
||
url: '@Html.Raw(ViewBag.webapi + "/api/meeting/accessory?eid=")' + eid,
|
||
data: JSON.stringify(data.field),
|
||
dataType: "json",
|
||
contentType: "application/json",
|
||
success: function (da) {
|
||
if (da.code == 0) {
|
||
parent.layer.msg('操作成功！', { icon: 1 });
|
||
parent.TableReload();
|
||
parent.Closed();
|
||
} else {
|
||
layer.msg(da.retmsg, { icon: 2 });
|
||
}
|
||
},
|
||
error: function () {
|
||
layer.msg('操作失败！', { icon: 2 });
|
||
}
|
||
});
|
||
});
|
||
})
|
||
|
||
function init() {
|
||
var id = '@Html.Raw(ViewBag.id)';
|
||
$.ajax({
|
||
type: "GET",
|
||
url: '@Html.Raw(ViewBag.webapi + "/api/meeting/accessory?meetingId=")' + id,
|
||
success: function (da) {
|
||
document.getElementById("Id").value = da.data.id;
|
||
document.getElementById("dialog-meetingName").innerHTML = da.data.meetingName;
|
||
document.getElementById("dialog-meetingType").innerHTML = da.data.meetingType;
|
||
document.getElementById("dialog-compere").innerHTML = da.data.comperes;
|
||
accessories = da.data.accessories;
|
||
initAccessory();
|
||
}
|
||
});
|
||
}
|
||
})
|
||
|
||
function initAccessory() {
|
||
layui.use('element', function () {
|
||
document.getElementById("Accessories").value = JSON.stringify(accessories);
|
||
var element = layui.element;
|
||
var $ = layui.jquery;
|
||
$('#demoList').html("");
|
||
for (var i = 0; i < accessories.length; i++) {
|
||
var accessory = accessories[i];
|
||
if (!accessory) return;
|
||
var tr = $(['<tr id="upload-old-' + accessory.id + '">'
|
||
, '<td>' + accessory.fileName + '</td>'
|
||
, '<td>' + accessory.fileSize + '</td>'
|
||
, '<td><div class="layui-progress" lay-filter="progress-old-' + accessory.id + '"><div class="layui-progress-bar" lay-percent=""></div></div></td>'
|
||
, '<td>'
|
||
, '<button class="layui-btn layui-btn-xs layui-btn-danger" type="button" onclick="deleteFile(' + accessory.id + ',\'' + accessory.fileName + '\')">删除</button>'
|
||
, '</td>'
|
||
, '</tr>'].join(''));
|
||
$('#demoList').append(tr);
|
||
element.progress('progress-old-' + accessory.id, '100%');
|
||
}
|
||
});
|
||
}
|
||
|
||
function deleteFile(id, fileName) {
|
||
winindex = layer.confirm('是否确认删除【' + fileName + '】?', { icon: 3, title: '提示' }, function (index) {
|
||
@*$.ajax({
|
||
type: "DELETE",
|
||
url: '@Html.Raw(ViewBag.webapi + "/api/meeting/accessory?accessoryId=")' + id,
|
||
dataType: "json",
|
||
contentType: "application/json",
|
||
success: function (da) {
|
||
if (da.result == true) {
|
||
parent.layer.msg('操作成功！', { icon: 1 });
|
||
init();
|
||
} else {
|
||
layer.msg(da.retmsg, { icon: 2 });
|
||
}
|
||
},
|
||
error: function () {
|
||
layer.msg('操作失败！', { icon: 2 });
|
||
}
|
||
});*@
|
||
var index = accessories.findIndex(x => x.id == id);
|
||
accessories.splice(index, 1);
|
||
Closed();
|
||
initAccessory();
|
||
});
|
||
return false;
|
||
}
|
||
function Closed() {
|
||
layer.close(winindex);
|
||
}
|
||
</script>
|