文件
chengduzhongchuliang/public/assets/js/backend/content.js

484 行
21 KiB
JavaScript

define(['jquery', 'bootstrap', 'backend', 'table', 'form'], function ($, undefined, Backend, Table, Form) {
var Controller = {
index: function () {
var vue = new Vue({
el: '#vue',
data: {
granaryList: [],
// 表格当前页数据
tableData: [],
// 多选数组
multipleSelection: [],
// 搜索条件
key: '',
// 默认每页数据量
pageSize: 50,
// 当前页码
currentPage: 1,
// 默认数据总数
totalCount: 0,
// 列表加载遮罩
listLoading: false,
// 搜索字段
search: {
startTime: '',
endTime: '',
keyword: '',
type: 0,
sort: 'id',
status: '',
rid: 0,
test_date: ''
},
searchOpt: [{
id: 1,
value: '标题'
}, {
id: 2,
value: '详细质检报告'
}],
statusOpt: [{
id: 1,
value: '显示'
}, {
id: 2,
value: '隐藏'
}],
// 时间格式化
dateFormat: function (row, column) {
var date = row[column.property];
if (date === undefined || date === 0) {
return '';
}
return moment(date * 1000).format("YYYY-MM-DD HH:mm:ss");
}
},
created() {
this.loadData(this.search.keyword, this.currentPage, this.pageSize, this.search.sort);
},
methods: {
// 刷新页面
refreshPage() {
this.search = {
startTime: '',
endTime: '',
keyword: '',
type: 0,
sort: 'id',
status: '',
rid: '',
test_date: ''
};
this.loadData(this.search.keyword, this.currentPage, this.pageSize, this.search.sort);
},
// 添加
add() {
layer.open({
type: 2,
title: '添加质检报告',
shadeClose: false,
scrollbar: false,
maxmin: true,
shade: 0.2,
area: ['100%', '100%'],
content: 'add',
});
},
// 编辑
edit(id) {
layer.open({
type: 2,
title: '编辑质检报告',
shadeClose: false,
scrollbar: false,
maxmin: true,
shade: 0.2,
area: ['100%', '100%'],
content: 'add?id=' + id,
});
},
// 从服务器读取数据
loadData(key, currentPage, pageSize, sort) {
this.listLoading = true;
$.getJSON('content/index', {
keyword: key,
type: this.search.type,
start_time: this.search.startTime,
end_time: this.search.endTime,
page: currentPage,
rows: pageSize,
sort: sort,
rid: this.search.rid,
date: this.search.test_date,
status: this.search.status,
}, data => {
this.totalCount = data.total;
this.tableData = data.list;
this.granaryList = data.granaryList;
this.listLoading = false;
});
},
// 排序
sortChange(e) {
},
handelTypeRadio(e) {
this.loadData(this.search.keyword, this.currentPage, this.pageSize, this.search.sort);
},
// 搜索
searchData() {
this.loadData(this.search.keyword, this.currentPage, this.pageSize, this.search.sort);
},
// 每页显示数据量变更
handleSizeChange(val) {
this.pageSize = val;
this.loadData(this.search.keyword, this.currentPage, this.pageSize, this.search.sort);
},
// 页码变更
handleCurrentChange(val) {
this.currentPage = val;
this.loadData(this.search.keyword, this.currentPage, this.pageSize, this.search.sort);
},
// 多选响应
handleSelectionChange(val) {
this.multipleSelection = val;
},
// 批量删除
del() {
if (this.multipleSelection.length === 0) {
this.$message.warning('请选择至少一条质检报告进行删除!');
return;
}
var array = [];
this.multipleSelection.forEach((row) => {
array.push(row.id);
});
this.$confirm('您确定要删除所选的质检报告吗?, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
$.ajax({
url: 'content/dell',
data: "id=" + array,
type: "POST",
dataType: 'json',
success: res => {
if (res.code === 200) {
this.$message.success(res.msg);
this.loadData(this.search.keyword, this.currentPage, this.pageSize, this.search.sort);
} else {
this.$message.warning(res.msg);
}
},
error: function (er) {
}
});
}).catch(() => {
});
},
// 单条删除
dell(id) {
this.$confirm('您确定要删除此质检报告吗?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
$.ajax({
url: 'content/dell',
data: {
id
},
type: "POST",
dataType: 'json',
success: res => {
if (res.code === 200) {
this.$message.success(res.msg);
this.loadData(this.search.keyword, this.currentPage, this.pageSize, this.search.sort);
} else {
this.$message.warning(res.msg);
}
},
error: function (er) {
}
});
}).catch(() => {
});
},
// 状态改变
statusChange(row) {
// 提交
let loading = this.$loading({
lock: true,
text: '正在更改中...',
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.3)'
});
$.ajax({
url: 'content/status',
data: {
id: row.id,
status: row.status
},
type: 'GET',
success: res => {
loading.close();
if (res.code === 200) {
this.$message.success(res.msg);
} else {
this.$message.warning(res.msg);
}
},
error: function (er) {
}
});
},
handleClearDate(field) {
if (!this.search[field]) {
// 重新加载
this.loadData(this.search.keyword, this.currentPage, this.pageSize, this.search.sort);
}
},
handleClearSelect(field) {
// 重新加载
this.$set(this.search, field, '');
this.loadData(this.search.keyword, this.currentPage, this.pageSize, this.search.sort);
},
handleClearSearchInp() {
if (this.search.type) {
// 重新加载
this.loadData(this.search.keyword, this.currentPage, this.pageSize, this.search.sort);
}
},
}
});
},
add: function () {
let vue = new Vue({
el: '#vue',
data: {
granaryList: [],
// 字段信息
formData: {
id: 0,
gid: '',
test_date: '',
content: [],
type: 1,
status: 1,
},
// 图册列表
fileList: [],
fileIndex: '',
showAlbumDialog: false,
albumFormData: {
title: ''
},
albumRules: {
title: [{
required: true,
message: '请您输入标题',
trigger: 'blur'
}],
},
// 表单验证规则
rules: {
gid: [{
required: true,
message: '请您选择所属仓库',
trigger: 'blur'
}],
test_date: [{
required: true,
message: '请您选择记录年份',
trigger: 'blur'
}],
}
},
mounted() {
let vue = $('#vue');
this.content();
},
methods: {
// 获取修改数据
content() {
let id = $('#vue').data('id');
let loading = this.$loading({
lock: true,
text: '正在获取数据...',
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.3)'
});
$.ajax({
url: 'content/getContent',
type: 'GET',
data: {
id
},
success: res => {
loading.close();
if (res.code === 200) {
let data = res.data;
if (data.detail.id) {
this.formData = {
id: data.detail.id,
gid: data.detail.gid,
type: data.detail.type,
test_date: data.detail.test_date,
status: data.detail.status,
content: []
};
this.fileList = data.detail.content;
}
this.granaryList = data.granaryList;
} else {
this.$message.warning(res.msg);
}
}
})
},
// 设置标题弹窗
handleShowAlbumDialog(file) {
this.fileIndex = this.fileList.findIndex(v => v.uid === file.uid);
this.showAlbumDialog = true;
this.albumFormData = {
title: this.fileList[this.fileIndex].title
};
},
// 保存标题
handleSaveTitle() {
this.$refs.albumForm.validate(valid => {
if (!valid) {
return false;
}
this.$set(this.fileList[this.fileIndex], 'title', this.albumFormData.title);
this.showAlbumDialog = false;
});
},
// 图片上传前
beforeUpImage(file) {
if (file.size > 20 * 1024 * 1024) {
this.$message({
type: 'warning',
message: '图片文件大小不能大于20M'
});
return false;
}
this.loadingImg = this.$loading({
lock: true,
text: '正在上传中...',
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.3)'
});
return true;
},
// 图片上传成功后
upImageSuccess(res, file, fileList) {
this.loadingImg.close();
if (res.code === 200) {
// element upload多图上传模式必须判断status等于success时才添加到fileList里
if (fileList.every(it => it.status === 'success')) {
fileList.map(item => {
item.response && this.fileList.push({
name: item.response.data.name,
url: item.response.data.url,
uid: item.uid,
title: ''
});
});
}
} else {
this.$message({
type: 'warning',
message: res.msg
});
}
},
// 删除图片
removeUpImage(file, fileList) {
let index = this.fileList.findIndex(v => v.uid === file.uid);
this.fileList.splice(index, 1);
this.$message({
type: 'success',
message: '删除成功'
});
},
// 关闭layer弹窗
closeLayerDialog() {
// 关闭弹窗
var win = parent.layer.getFrameIndex(window.name);
parent.layer.close(win);
},
// 提交
submit() {
this.$refs.form.validate(valid => {
if (!valid) {
return false;
}
let formData = this.formData;
let fileList = this.fileList;
if (fileList.length === 0) {
this.$message.warning('请您上传图册');
return;
}
// 提交
let loading = this.$loading({
lock: true,
text: '正在提交中...',
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.3)'
});
formData.content = fileList;
$.ajax({
url: 'content/add',
type: 'POST',
data: formData,
success: res => {
loading.close();
if (res.code === 200) {
parent.layer.msg(res.msg, {icon: 1, time: 2000, shade: 0.1}, function (index) {
// 关闭弹窗
var win = parent.layer.getFrameIndex(window.name);
parent.layer.close(win);
parent.window.location.reload();
});
} else {
this.$message.warning(res.msg);
}
}
})
});
}
}
});
},
edit: function () {
Controller.api.bindevent();
},
api: {
bindevent: function () {
Form.api.bindevent($("form[role=form]"));
}
}
};
return Controller;
});