最新版3.8 生成vue+elementui模板代码 页面报错
<%@ page language="java" import="java.util.*" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><%@include file="/context/mytags.jsp"%>
<!DOCTYPE html>
<html>
<head>
<title>故障申报表</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name=viewportcontent="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,minimal-ui">
<link rel="stylesheet" href="${webRoot}/plug-in/element-ui/css/index.css">
<link rel="stylesheet" href="${webRoot}/plug-in/element-ui/css/elementui-ext.css">
<script src="${webRoot}/plug-in/vue/vue.js"></script>
<script src="${webRoot}/plug-in/vue/vue-resource.js"></script>
<script src="${webRoot}/plug-in/element-ui/index.js"></script>
<!-- Jquery组件引用 -->
<script src="${webRoot}/plug-in/jquery/jquery-1.9.1.js"></script>
<script type="text/javascript" src="${webRoot}/plug-in/jquery-plugs/i18n/jquery.i18n.properties.js"></script>
<script type="text/javascript" src="${webRoot}/plug-in/mutiLang/zh-cn.js"></script>
<script type="text/javascript" src="${webRoot}/plug-in/lhgDialog/lhgdialog.min.js?skin=metrole"></script>
<script type="text/javascript" src="${webRoot}/plug-in/tools/curdtools.js"></script>
<style>
.toolbar {
padding: 10px;
margin: 10px 0;
}
.toolbar .el-form-item {
margin-bottom: 10px;
}
.el-table__header tr th{
padding:3px 0px;
}
{ display: none }
</style>
</head>
<body style="background-color: #FFFFFF;">
<div id="bugReportList" v-cloak>
<!--工具条-->
<el-row style="margin-top: 15px;">
<el-form :inline="true" :model="filters" size="mini" ref="filters">
<el-form-item style="margin-bottom: 8px;" prop="bugStatus">
<el-select v-model="filters.bugStatus" placeholder="请选择工单状态">
<el-option :label="option.typename" :value="option.typecode" v-for="option in Options"></el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-search" v-on:click="getBugReports">查询</el-button>
</el-form-item>
<el-form-item>
<el-button icon="el-icon-refresh" @click="resetForm('filters')">重置</el-button>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-edit" @click="handleAdd">新增</el-button>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-edit" @click="ExportXls">导出</el-button>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-edit" @click="ImportXls">导入</el-button>
</el-form-item>
</el-form>
</el-row>
<!--列表-->
<el-table :data="bugReports" border stripe size="mini" highlight-current-row v-loading="listLoading" @sort-change="handleSortChange"@selection-change="selsChange" style="width: 100%;">
<el-table-column type="selection" width="55"></el-table-column>
<el-table-column type="index" width="60"></el-table-column>
<el-table-column prop="content" label="申报内容" min-width="120" sortable="custom" show-overflow-tooltip></el-table-column>
<el-table-column prop="attachfiles" label="附件" min-width="120" sortable="custom" show-overflow-tooltip>
<template slot-scope="scope" v-if="scope.row.attachfiles">
<img width="30" height="30" :src="'img/server/'+scope.row.attachfiles" alt="附件"/>
</template>
</el-table-column>
<el-table-column prop="sysCompanyCode" label="所属公司" min-width="120" sortable="custom" show-overflow-tooltip></el-table-column>
<el-table-column prop="sysOrgCode" label="所属部门" min-width="120" sortable="custom" show-overflow-tooltip></el-table-column>
<el-table-column prop="position" label="岗位" min-width="120" sortable="custom" show-overflow-tooltip></el-table-column>
<el-table-column prop="contact" label="联系方式" min-width="120" sortable="custom" show-overflow-tooltip></el-table-column>
<el-table-column prop="bugStatus" label="工单状态" min-width="120" sortable="custom" show-overflow-tooltip :formatter="formatDict"></el-table-column>
<el-table-column label="操作" width="150">
<template scope="scope">
<el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
<el-button type="danger" size="mini" @click="handleDel(scope.$index, scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
<!--工具条-->
<el-col :span="24" class="toolbar">
<el-button type="danger" size="mini" @click="batchRemove" :disabled="this.sels.length===0">批量删除</el-button>
<el-pagination small background @current-change="handleCurrentChange" @size-change="handleSizeChange" :page-sizes=""
:page-size="pageSize" :total="total" layout="sizes, prev, pager, next"style="float:right;"></el-pagination>
</el-col>
<!--新增界面-->
<el-dialog :title="formTitle" fullscreen z-index="800" :visible.sync="formVisible" :close-on-click-modal="false">
<el-form :model="form" label-width="80px" :rules="formRules" ref="form" size="mini">
<el-form-item label="附件" prop="attachfiles">
<el-upload
:action="url.upload"
:data="{isup:'1'}"
:on-success="handleAttachfilesUploadFile"
:on-remove="handleAttachfilesRemoveFile"
:file-list="formFile.attachfiles"
list-type="picture">
<el-button size="small" type="primary">点击上传</el-button>
</el-upload>
</el-form-item>
<el-form-item label="所属公司" prop="sysCompanyCode">
<el-input v-model="form.sysCompanyCode" auto-complete="off" placeholder="请输入所属公司"></el-input>
</el-form-item>
<el-form-item label="所属部门" prop="sysOrgCode">
<el-input v-model="form.sysOrgCode" auto-complete="off" placeholder="请输入所属部门"></el-input>
</el-form-item>
<el-form-item label="岗位" prop="position">
<el-input v-model="form.position" auto-complete="off" placeholder="请输入岗位"></el-input>
</el-form-item>
<el-form-item label="联系方式" prop="contact">
<el-input v-model="form.contact" auto-complete="off" placeholder="请输入联系方式"></el-input>
</el-form-item>
<el-form-item label="工单状态">
<el-select v-model="form.bugStatus" placeholder="请选择工单状态">
<el-option :label="option.typename" :value="option.typecode" v-for="option in Options"></el-option>
</el-select>
</el-form-item>
<el-form-item label="申报内容">
<el-input type="textarea" name="content" v-model="form.content"></el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click.native="formVisible = false">取消</el-button>
<el-button type="primary" @click.native="formSubmit" :loading="formLoading">提交</el-button>
</div>
</el-dialog>
</div>
</body>
<script>
var vue = new Vue({
el:"#bugReportList",
data() {
return {
filters: {
bugStatus:'',
},
url:{
list:'${webRoot}/bugReportController.do?datagrid',
del:'${webRoot}/bugReportController.do?doDel',
batchDel:'${webRoot}/bugReportController.do?doBatchDel',
queryDict:'${webRoot}/systemController.do?typeListJson',
save:'${webRoot}/bugReportController.do?doAdd',
edit:'${webRoot}/bugReportController.do?doUpdate',
upload:'${webRoot}/systemController/filedeal.do',
downFile:'${webRoot}/img/server/',
exportXls:'${webRoot}/bugReportController.do?exportXls&id=',
ImportXls:'${webRoot}/bugReportController.do?upload'
},
bugReports: [],
total: 0,
page: 1,
pageSize:10,
sort:{
sort:'id',
order:'desc'
},
listLoading: false,
sels: [],//列表选中列
formTitle:'新增',
formVisible: false,//表单界面是否显示
formLoading: false,
formRules: {
},
//表单界面数据
form: {},
formFile: {
attachfiles:[],
},
//数据字典
}
},
methods: {
handleAttachfilesUploadFile: function(response, file, fileList){
file.url="img/server/"+response.obj;
this.form.attachfiles=response.obj;
if(fileList.length>1){
this.handleAttachfilesRemoveFile(fileList.splice(0,1),fileList);
}
},
handleAttachfilesRemoveFile: function(file, fileList){
if(fileList.length==0){
this.form.attachfiles="";
}
this.$http.get(this.url.upload,{
params:{
isdel:'1',
path:file.url
}
}).then((res) => {
});
},
handleSortChange(sort){
this.sort={
sort:sort.prop,
order:sort.order=='ascending'?'asc':'desc'
};
this.getBugReports();
},
handleDownFile(type,filePath){
var downUrl=this.url.downFile+ filePath +"?down=true";
window.open(downUrl);
},
formatDate: function(row,column,cellValue, index){
return !!cellValue?utilFormatDate(new Date(cellValue), 'yyyy-MM-dd'):'';
},
formatDateTime: function(row,column,cellValue, index){
return !!cellValue?utilFormatDate(new Date(cellValue), 'yyyy-MM-dd hh:mm:ss'):'';
},
handleCurrentChange(val) {
this.page = val;
this.getBugReports();
},
handleSizeChange(val) {
this.pageSize = val;
this.page = 1;
this.getBugReports();
},
resetForm(formName) {
this.$refs.resetFields();
this.getBugReports();
},
//获取用户列表
getBugReports() {
var fields=[];
fields.push('id');
fields.push('id');
fields.push('content');
fields.push('attachfiles');
fields.push('createName');
fields.push('createBy');
fields.push('createDate');
fields.push('updateName');
fields.push('updateBy');
fields.push('updateDate');
fields.push('sysCompanyCode');
fields.push('sysOrgCode');
fields.push('position');
fields.push('contact');
fields.push('bugStatus');
fields.push('bpmStatus');
let para = {
params: {
page: this.page,
rows: this.pageSize,
//排序
sort:this.sort.sort,
order:this.sort.order,
bugStatus:this.filters.bugStatus,
field:fields.join(',')
}
};
this.listLoading = true;
this.$http.get(this.url.list,para).then((res) => {
this.total = res.data.total;
var datas=res.data.rows;
for (var i = 0; i < datas.length; i++) {
var data = datas;
}
this.bugReports = datas;
this.listLoading = false;
});
},
//删除
handleDel: function (index, row) {
this.$confirm('确认删除该记录吗?', '提示', {
type: 'warning'
}).then(() => {
this.listLoading = true;
let para = { id: row.id };
this.$http.post(this.url.del,para,{emulateJSON: true}).then((res) => {
this.listLoading = false;
this.$message({
message: '删除成功',
type: 'success',
duration:1500
});
this.getBugReports();
});
}).catch(() => {
});
},
//显示编辑界面
handleEdit: function (index, row) {
this.formTitle='编辑';
this.formVisible = true;
this.form = Object.assign({}, row);
var attachfiles=[];
if(!!this.form.attachfiles){
attachfiles=[{
name:this.form.attachfiles.substring(this.form.attachfiles.lastIndexOf('\\')+1),
url:"img/server/"+this.form.attachfiles
}]
}
this.formFile={
attachfiles:attachfiles,
};
},
//显示新增界面
handleAdd: function () {
this.formTitle='新增';
this.formVisible = true;
this.form = {
attachfiles:'',
sysCompanyCode:'',
sysOrgCode:'',
position:'',
contact:'',
bugStatus:'',
};
this.formFile={
attachfiles:[],
};
},
//新增
formSubmit: function () {
this.$refs.form.validate((valid) => {
if (valid) {
this.$confirm('确认提交吗？', '提示', {}).then(() => {
this.formLoading = true;
let para = Object.assign({}, this.form);
this.$http.post(!!para.id?this.url.edit:this.url.save,para,{emulateJSON: true}).then((res) => {
this.formLoading = false;
this.$message({
message: '提交成功',
type: 'success',
duration:1500
});
this.$refs['form'].resetFields();
this.formVisible = false;
this.getBugReports();
});
});
}
});
},
selsChange: function (sels) {
this.sels = sels;
},
//批量删除
batchRemove: function () {
var ids = this.sels.map(item => item.id).toString();
this.$confirm('确认删除选中记录吗？', '提示', {
type: 'warning'
}).then(() => {
this.listLoading = true;
let para = { ids: ids };
this.$http.post(this.url.batchDel,para,{emulateJSON: true}).then((res) => {
this.listLoading = false;
this.$message({
message: '删除成功',
type: 'success',
duration:1500
});
this.getBugReports();
});
}).catch(() => {
});
},
//导出
ExportXls: function() {
var ids = this.sels.map(item => item.id).toString();
window.location.href = this.url.exportXls+ids;
},
//导入
ImportXls: function(){
openuploadwin('Excel导入',this.url.ImportXls, "bugReportList");
},
//初始化数据字典
initDictsData:function(){
var _this = this;
},
initDictByCode:function(code,_this,dictOptionsName){
if(!code || !_this || _this.length>0)
return;
this.$http.get(this.url.queryDict,{params: {typeGroupName:code}}).then((res) => {
var data=res.data;
if(data.success){
_this = data.obj;
_this.splice(0, 1);//去掉请选择
}
});
}
},
mounted() {
this.initDictsData();
this.getBugReports();
}
});
function utilFormatDate(date, pattern) {
pattern = pattern || "yyyy-MM-dd";
return pattern.replace(/()(\1*)/g, function ($0) {
switch ($0.charAt(0)) {
case 'y': return padding(date.getFullYear(), $0.length);
case 'M': return padding(date.getMonth() + 1, $0.length);
case 'd': return padding(date.getDate(), $0.length);
case 'w': return date.getDay() + 1;
case 'h': return padding(date.getHours(), $0.length);
case 'm': return padding(date.getMinutes(), $0.length);
case 's': return padding(date.getSeconds(), $0.length);
}
});
};
function padding(s, len) {
var len = len - (s + '').length;
for (var i = 0; i < len; i++) { s = '0' + s; }
return s;
};
function reloadTable(){
}
</script>
</html>
jeecg 越来越垃圾了 越升级 问题越多
页:
[1]