281 lines
12 KiB
JavaScript
281 lines
12 KiB
JavaScript
|
let that;
|
|||
|
|
let datatable = null;
|
|||
|
|
let del_file = null;
|
|||
|
|
const app = {
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
selected_page: Cookies.get('selmodelfile_page') || 10,
|
|||
|
|
selectpage: [{ val: "10", text: "每页10条" }, { val: "20", text: "每页20条" }, { val: "30", text: "每页30条" }, { val: "10", text: "每页40条" }],
|
|||
|
|
datatable: null,
|
|||
|
|
// 数据
|
|||
|
|
select: [{ text: "全部", val: "" }, { text: "485Model", val: "485Model" }, { text: "BaseModel", val: "BaseModel" }, { text: "RCUModel", val: "RCUModel" }],
|
|||
|
|
// 数据
|
|||
|
|
selected: Cookies.get('selmodelfile')||"",
|
|||
|
|
// 数据
|
|||
|
|
rcudata: [],
|
|||
|
|
// 高度
|
|||
|
|
appheight: "",
|
|||
|
|
// 添加类型 v
|
|||
|
|
add_type: 0,
|
|||
|
|
// 文件列表
|
|||
|
|
files_data: [],
|
|||
|
|
// 文件名 单独 方便筛选
|
|||
|
|
files_name: [],
|
|||
|
|
// 表单input 数量
|
|||
|
|
files_ele_count: 0
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
created() {
|
|||
|
|
that = this;
|
|||
|
|
setTimeout(function () { that.init(); }, 10);
|
|||
|
|
del_file = this.del_file;
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
init() {
|
|||
|
|
this.table_init();
|
|||
|
|
this.loc();
|
|||
|
|
},
|
|||
|
|
clickCallback: function (pageNum) {
|
|||
|
|
console.log(pageNum)
|
|||
|
|
},
|
|||
|
|
// 唤起文件选择
|
|||
|
|
click_file(type) {
|
|||
|
|
// 取消上传等按钮 取消唤醒
|
|||
|
|
if (type == -10 && this.files_name.length > 0) {
|
|||
|
|
this.init();
|
|||
|
|
}
|
|||
|
|
if (type != -1) {
|
|||
|
|
this.files_ele_count = 0;
|
|||
|
|
this.files_name = [];
|
|||
|
|
this.files_data = [];
|
|||
|
|
this.add_type = type
|
|||
|
|
}
|
|||
|
|
// 取消上传等按钮 取消唤醒
|
|||
|
|
if (type == -10) {
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
var str = 'filedata' + this.files_ele_count;
|
|||
|
|
// this.$refs[str].click();
|
|||
|
|
// VUE触发报错
|
|||
|
|
$(this.$refs[str]).click();
|
|||
|
|
},
|
|||
|
|
add_file() {
|
|||
|
|
let data = new window.FormData(this.$refs['addfile']);
|
|||
|
|
let class_ = $('#filedata').attr('class');
|
|||
|
|
let class_1 = $('#file_data').attr('class');
|
|||
|
|
// 移除是为了 防止多个弹窗 同时挤掉
|
|||
|
|
//$('#filedata').attr('class','');
|
|||
|
|
//$('#file_data').attr('class', '');
|
|||
|
|
let _data = that.files_data.concat();
|
|||
|
|
that.files_data = [];
|
|||
|
|
MyPost("/Api/AddModelFile", { isSwal: true, title: "上传中...", data, type: 1 }, (res) => {
|
|||
|
|
for (let i = 0; i < _data.length; i++) {
|
|||
|
|
// 已经上传的文件不再上传
|
|||
|
|
if (_data[i].isok > -2) {
|
|||
|
|
continue;
|
|||
|
|
}
|
|||
|
|
_data[i].isok = res[_data[i].name];
|
|||
|
|
if (res[_data[i].name]) {
|
|||
|
|
var str = 'filedata' + i;
|
|||
|
|
$(that.$refs[str]).val("");
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
that.files_data = _data.concat();
|
|||
|
|
//toastr.success('添加成功~');
|
|||
|
|
}, (err) => {
|
|||
|
|
toastr.error('网络繁忙~')
|
|||
|
|
}, () => {
|
|||
|
|
try {
|
|||
|
|
setTimeout(function () {
|
|||
|
|
$('#filedata').attr('class', class_);
|
|||
|
|
$('#file_data').attr('class', class_1);
|
|||
|
|
}, 200);
|
|||
|
|
} catch (e) {
|
|||
|
|
console.log("completeback - err");
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
);
|
|||
|
|
},
|
|||
|
|
filechange() {
|
|||
|
|
var str = 'filedata' + this.files_ele_count;
|
|||
|
|
var files = $('.filedata')[this.files_ele_count].files;
|
|||
|
|
for (let i of files) {
|
|||
|
|
if (i.type.toUpperCase() != "text/xml".toUpperCase()) {
|
|||
|
|
this.$refs[str].value = null;
|
|||
|
|
toastr.error('只能上传.XML格式的文件!');
|
|||
|
|
return false;
|
|||
|
|
}
|
|||
|
|
if (this.files_name.indexOf(i.name) >= 0) {
|
|||
|
|
$(this.$refs[str]).val("");
|
|||
|
|
toastr.error('文件重复!');
|
|||
|
|
return false;
|
|||
|
|
}
|
|||
|
|
this.files_name.push(i.name);
|
|||
|
|
this.files_data.push(i);
|
|||
|
|
}
|
|||
|
|
this.files_ele_count++;
|
|||
|
|
},
|
|||
|
|
del_file(e,id) {
|
|||
|
|
console.log(id)
|
|||
|
|
let index = -1;
|
|||
|
|
for (let i = 0; i < that.rcudata.data.length; i++) {
|
|||
|
|
if (that.rcudata.data[i].data.MFD_ID == id) {
|
|||
|
|
index = i;
|
|||
|
|
break;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
if (index == -1) {
|
|||
|
|
console.log("非法访问~");
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
Swal.fire({
|
|||
|
|
title: ' ',
|
|||
|
|
text: "您确定要删除文件:" + that.rcudata.data[index].data.XML_FileName + " ?",
|
|||
|
|
type: 'warning',
|
|||
|
|
showCancelButton: true,
|
|||
|
|
confirmButtonColor: '#3085d6',
|
|||
|
|
cancelButtonColor: '#d33',
|
|||
|
|
confirmButtonText: '确认',
|
|||
|
|
cancelButtonText: '取消'
|
|||
|
|
}).then((result) => {
|
|||
|
|
if (result.value) {
|
|||
|
|
MyPost("/Api/DelModelFile", { isSwal: true, title: "正删除...", data: { id: that.rcudata.data[index].data.MFD_ID } }, (res) => {
|
|||
|
|
if (res) {
|
|||
|
|
try {
|
|||
|
|
that.rcudata.data.splice(index,1);
|
|||
|
|
toastr.success('删除成功~');
|
|||
|
|
$(e).closest("tr").remove();
|
|||
|
|
} catch (e) {
|
|||
|
|
console.log(e)
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
else
|
|||
|
|
toastr.error('删除失败~');
|
|||
|
|
}, (err) => {
|
|||
|
|
toastr.error('删除失败~');
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
rem_file: function (index) {
|
|||
|
|
this.files_data.splice(index, 1);
|
|||
|
|
this.files_name.splice(index, 1);
|
|||
|
|
var str = 'filedata' + index;
|
|||
|
|
$(this.$refs[str]).val("");
|
|||
|
|
},
|
|||
|
|
loc: function () {
|
|||
|
|
// 采用的局部 vue 所以这里 有些许 jquery
|
|||
|
|
let footloc = $('.main-footer').offset().top;
|
|||
|
|
$('.main-footer').hide();
|
|||
|
|
this.appheight = "calc(100vh - " + $('.table-responsive').offset().top + "px)";
|
|||
|
|
},
|
|||
|
|
ellipsis(value) {
|
|||
|
|
let var_ = "" + value
|
|||
|
|
let length_ = var_.length;
|
|||
|
|
let str = "";
|
|||
|
|
for (var i = length_; i < 4; i++) {
|
|||
|
|
str += "1";
|
|||
|
|
}
|
|||
|
|
return var_ + `<span style='opacity: 0;'>` + str + `</span>`;
|
|||
|
|
},
|
|||
|
|
table_init() {
|
|||
|
|
try {
|
|||
|
|
if (datatable != null) {
|
|||
|
|
datatable.destroy();
|
|||
|
|
}
|
|||
|
|
$.fn.dataTable.ext.errMode = 'none';//屏蔽掉报错弹窗
|
|||
|
|
datatable = $('#dataTable').on('error.dt', function (e, settings, techNote, message) {
|
|||
|
|
console.log(e, settings, techNote)
|
|||
|
|
console.log('An error has been reported by DataTables: ', message);
|
|||
|
|
}).DataTable({
|
|||
|
|
"data": null,
|
|||
|
|
"ordering": true,
|
|||
|
|
"paging": true,
|
|||
|
|
"serverSide": true,
|
|||
|
|
"ajax": function (datas, callback, settings) {
|
|||
|
|
datas.type = that.selected;
|
|||
|
|
MyPost("/Api/SelModelFile", { isSwal: true, data: datas }, (res) => {
|
|||
|
|
that.rcudata = res || [];
|
|||
|
|
Cookies.set('selmodelfile', that.selected, { expires: 7, path: window.location.pathname });
|
|||
|
|
Cookies.set('selmodelfile_page', that.selected_page, { expires: 7, path: window.location.pathname });
|
|||
|
|
callback(res);
|
|||
|
|
}, (err) => {
|
|||
|
|
toastr.error('网络繁忙~')
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
'iDisplayLength': that.selected_page,
|
|||
|
|
"columns": [{
|
|||
|
|
'sTitle': '',/*.substring(6)*/
|
|||
|
|
'render': function (data, type, rcu) {
|
|||
|
|
try {
|
|||
|
|
let STR =
|
|||
|
|
`<div class="col-12 col-md-6">
|
|||
|
|
<span>`+ that.ellipsis(rcu.data.MFD_ID) + `</span>
|
|||
|
|
<button type="button" class= "`+ (rcu.data.Available == 1 ? 'btn btn-xs btn-success' : 'btn btn-xs btn-danger') + `">` + (rcu.data.Available == 1 ? '可 用' : '不可用') + `</button>
|
|||
|
|
`+ rcu.data.UploadDateTime + `
|
|||
|
|
</div>
|
|||
|
|
<div class="col-md-6 col-12">
|
|||
|
|
FilePath : `+ rcu.data.Directory + `\\` + rcu.data.XML_FileName + `
|
|||
|
|
</div>
|
|||
|
|
<div class="col-md-6 col-12">
|
|||
|
|
XLM_MD5 : `+ rcu.data.XLM_MD5 + `
|
|||
|
|
</div>
|
|||
|
|
<div class="col-md-6 col-12">
|
|||
|
|
`+ rcu.size + `
|
|||
|
|
<button type="button" onclick="del_file(this,`+ rcu.data.MFD_ID+`)" class="btn btn-danger btn-xs">删除文件</button>
|
|||
|
|
</div>`;
|
|||
|
|
return STR;
|
|||
|
|
} catch (e) {
|
|||
|
|
console.log(e);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}],
|
|||
|
|
"fnCreatedRow": function (nRow, aData, iDataIndex) {
|
|||
|
|
$(nRow).addClass('bg-white').addClass('shadow');
|
|||
|
|
$(nRow).children("td").addClass('row');
|
|||
|
|
return;
|
|||
|
|
},
|
|||
|
|
"searching": false,
|
|||
|
|
"autoWidth": false,
|
|||
|
|
"bDeferRender ": true,
|
|||
|
|
"bLengthChange": false,
|
|||
|
|
"language":
|
|||
|
|
{
|
|||
|
|
"sProcessing": "处理中...",
|
|||
|
|
"sLengthMenu": "显示 _MENU_ 项结果",
|
|||
|
|
"sZeroRecords": "没有匹配结果",
|
|||
|
|
"sInfo": "显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项",
|
|||
|
|
"sInfoEmpty": "显示第 0 至 0 项结果，共 0 项",
|
|||
|
|
"sInfoFiltered": "(由 _MAX_ 项结果过滤)",
|
|||
|
|
"sInfoPostFix": "",
|
|||
|
|
"sSearch": "搜索:",
|
|||
|
|
"sUrl": "",
|
|||
|
|
"sEmptyTable": "表中数据为空",
|
|||
|
|
"sLoadingRecords": "载入中...",
|
|||
|
|
"sInfoThousands": ",",
|
|||
|
|
"oPaginate": {
|
|||
|
|
"sFirst": "首页",
|
|||
|
|
"sPrevious": "上页",
|
|||
|
|
"sNext": "下页",
|
|||
|
|
"sLast": "末页"
|
|||
|
|
},
|
|||
|
|
"oAria": {
|
|||
|
|
"sSortAscending": ": 以升序排列此列",
|
|||
|
|
"sSortDescending": ": 以降序排列此列"
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
} catch (e) {
|
|||
|
|
console.log(e)
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
Vue.createApp(app).mount('#app');
|
|||
|
|
|
|||
|
|
$('#app').show();
|
|||
|
|
|