一款前端开发工具
终端–新建终端–输入命令 npm install -g vue-cli（2）安装webpack。如下图：
终端–输入命令 npm install -g webpack
(3)新建项目。如下图：
首先使用cd命令切换到所需文件夹目录–其次输入 vue init webpack 项目名–最后一个vue项目就新建好啦
（4）运行项目并在浏览器中访问。如下图：
输入命令 ‘npm run dev’启动项目–在浏览器中输入网址 http://localhost:8080/
index.vue
<template>
<el-row v-loading='loading'>
<History :bussObject='curentRow' ></History>
<companyRecord-form ref='companyRecordForm' :permission='permission' v-on:save-finished='getCompanyRecordList()'></companyRecord-form>
<el-col :span='24'>
<el-container class='query-form-container'>
<el-main>
<el-row v-if='!moreCodition' class='search-row'>
<el-form :model='queryModel' @submit.native.prevent :inline='true' label-width='100px' ref='queryForm' :inline-message='true'>
<el-form-item label='公司名称' prop='company_name'>
<el-input v-model='queryModel.company_name' :clearable='true' placeholder='请输入公司名'></el-input>
</el-form-item>
<el-button type='primary' icon='el-icon-search' @click='onSearch()' :plain='true'>搜索</el-button>
<el-button type='primary' icon='el-icon-circle-plus' :plain='true' @click='onCreateCompanyRecord()'>添加</el-button>
</el-form>
</el-row>
<QueryForm v-else v-model='moreParm' :tableId='tableId' :schemeId='schemeId' :routerId='$route.meta.routerId' @search='onSearch()' @moreCodition='onMoreCodition()'></QueryForm>
</el-main>
</el-container>
<el-container class="data-container">
<el-main>
<el-row>
<el-col :span='24'>
<div @mouseleave='moveTableOutside'>
<el-table class='drag_table' :data='companyRecordList' border @sort-change='onSortChange' @header-dragend='onChangeWidth' :cell-class-name='cellClassName' :header-cell-class-name='headerCellClassName' highlight-current-row>
<el-table-column v-for="(c, index) in columnViews" v-if='c.display' :prop='c.prop' :key="`columnViews_${index}`" :label='c.label' :align='c.align' :min-width='c.miniWidth+"px"' :width='c.width+"px"' header-align='center' :column-key='index.toString()' :render-header="renderHeader">
<template slot-scope='{row,$index}'>
<span v-if='columnViews[index].showType == "Switch" || columnViews[index].showType == "Checkbox" || columnViews[index].showType == "Radio"'>
<li v-if='getAttrValue(row, columnViews[index].prop) == "1"' class='el-icon-check' style='color:#F56C6C;'></li>
</span>
<span v-else>{{ getAttrValue(row, columnViews[index].prop, columnViews[index].javaType)}}</span>
</template>
</el-table-column>
<el-table-column label='操作' header-align='center' :width='oprColumnWidth + "px"' fixed='right'>
<template slot='header' slot-scope="scope">
<span>操作</span>
<view-columns-select v-model='columnViews' v-on:save-column-view='saveColumn' v-on:show-all-column='showAllColumn' v-on:show-default-column='showDefaultColumn'></view-columns-select>
<export-excel-button v-show='permission.export' :data='companyRecordList' :tHeader='getHeads()' :filterVal='getFilterVal()' :plain='true'></export-excel-button>
</template>
<template slot-scope='scope'>
<OperationIcon v-show='permission.view' type='info' content='查看' placement='top-start' icon-name='el-icon-view'
@click='onViewCompanyRecord(scope.$index, scope.row)'></OperationIcon>
<OperationIcon v-show='permission.edit' type='primary' content='编辑' placement='top-start' icon-name='el-icon-edit'
@click='onEditCompanyRecord(scope.$index, scope.row)'></OperationIcon>
<OperationIcon v-show='permission.remove' type='danger' content='删除' placement='top-start' icon-name='el-icon-delete'
@click='onDeleteCompanyRecord(scope.$index, scope.row)'></OperationIcon>
</template>
</el-table-column>
</el-table>
</div>
</el-col>
</el-row>
<el-row>
<el-col :span='24'>
<el-pagination
background
@size-change='onSizeChange'
@current-change='onCurrentChange'
:current-page.sync='currentPage'
:page-sizes='[10, 20, 50, 100, companyRecordTotal]'
:page-size='10'
layout='total, sizes, prev, pager, next, jumper'
:total='companyRecordTotal'>
</el-pagination>
</el-col>
</el-row>
</el-main>
</el-container>
</el-col>
</el-row>
</template>
<script>
import FileSaver from 'file-saver'
import { validatenull } from '@/utils/validate'
import { listCompanyRecordPage,getCompanyRecordById,deleteCompanyRecord } from '@/api/sys/companyRecord'
import { listResourcePermission } from '@/api/admin/common/permission'
import ExportExcelButton from '@/components/ExportExcelButton'
import ViewColumnsSelect from '@/views/components/ViewColumnsSelect'
import QueryForm from '@/views/components/queryForm'
import MainUI from '@/views/components/mainUI'
import OperationIcon from '@/components/OperationIcon'
import History from '@/views/components/history'
import CompanyRecordForm from './companyRecord.vue'
export default {
extends: MainUI,
components: {
CompanyRecordForm,
ExportExcelButton,
ViewColumnsSelect,
QueryForm,
OperationIcon,
History
},
data() {
return {
permission: {
view: false,
add: false,
edit: false,
remove: false,
export: false
},
queryTypes: {
'company_name': 'like',
},
queryModel: {
'company_name': '', // 公司名称
},
search: {
params: [],
offset: 0,
limit: 10,
orderby: ''
},
currentPage: 1,
companyRecordTotal: 0,
companyRecordList: [],
oprColumnWidth: 165, // 操作列宽
tableId: '693832141103833210',
schemeId: '6003'
}
},
methods: {
checkFile() {
document.querySelector('#fileinput').click()
},
ImportJson(row) {
this.setLoad()
importCompanyRecord(row).then(responseData => {
if(responseData.code == 100) {
this.$message({
message: '导入成功',
type: 'info'
});
this.getCompanyRecordList()
} else {
this.showMessage(responseData)
}
this.resetLoad()
}).catch(error => {
this.outputError(error)
})
},
getCompanyRecordList() {
this.setLoad()
/* 查询参数 和数据权限 */
this.search.params = []
if(this.moreCodition) {
this.search.params = this.search.params.concat(this.compositeCondition())
}else{
// 查询参数: 公司名称
this.search.params.push({
columnName: 'company_name',
queryType: 'like',
value: this.queryModel.company_name
})
}
this.pushDataPermissions(this.search.params, this.$route.meta.routerId, this.tableId)
listCompanyRecordPage(this.search).then(responseData => {
if(responseData.code == 100) {
this.companyRecordTotal = responseData.data.total
this.companyRecordList = responseData.data.rows
} else {
this.showMessage(responseData)
}
this.resetLoad()
}).catch(error => {
this.outputError(error)
})
},
onSearch() {
if(this.moreCodition) {
this.search.offset = 0
this.currentPage = 1
this.getCompanyRecordList()
} else {
this.$refs['queryForm'].validate(valid => {
if (valid) {
this.search.offset = 0
this.currentPage = 1
this.getCompanyRecordList()
} else {
return false
}
})
}
},
onSizeChange(val) {
this.search.limit = val;
this.search.offset = (this.currentPage - 1) * val
this.getCompanyRecordList()
},
onCurrentChange(val) {
this.search.offset = (val - 1) * this.search.limit
this.currentPage = val
this.getCompanyRecordList()
},
async pageInit() {
this.setLoad()
try {
this.initOptions(this.queryModel)
this.search.params = []
this.pushDataPermissions(this.search.params, this.$route.meta.routerId, this.tableId)
let [listCompanyRecordRespData, listPermissionRespData] = await Promise.all([
listCompanyRecordPage(this.search),
listResourcePermission(this.$route.meta.routerId)
])
if(listCompanyRecordRespData.code == 100 && listPermissionRespData.code == 100) {
this.companyRecordTotal = listCompanyRecordRespData.data.total
this.companyRecordList = listCompanyRecordRespData.data.rows
this.permission.view = listPermissionRespData.data.find(item => {
return item.permission === 'companyRecord:read'
})
this.permission.export = listPermissionRespData.data.find(item => {
return item.permission === 'companyRecord:export'
})
this.permission.add = listPermissionRespData.data.find(item => {
return item.permission === 'companyRecord:create'
})
this.permission.edit = listPermissionRespData.data.find(item => {
return item.permission === 'companyRecord:update'
})
this.permission.remove = listPermissionRespData.data.find(item => {
return item.permission === 'companyRecord:delete'
})
} else {
this.showMessage(listPermissionRespData.code != 100 ? listPermissionRespData : listCompanyRecordRespData)
}
this.resetLoad()
} catch(error) {
this.outputError(error)
}
},
onViewCompanyRecord(index, row) {
this.setLoad()
getCompanyRecordById(row.id).then(responseData => {
if(responseData.code == 100) {
this.$refs.companyRecordForm.$emit('openViewCompanyRecordDialog', responseData.data)
} else {
this.showMessage(responseData)
}
this.resetLoad()
}).catch(error => {
this.outputError(error)
})
},
onCreateCompanyRecord() {
this.$refs.companyRecordForm.$emit('openAddCompanyRecordDialog')
},
onEditCompanyRecord(index, row) {
this.setLoad()
getCompanyRecordById(row.id).then(responseData => {
if(responseData.code == 100) {
this.$refs.companyRecordForm.$emit('openEditCompanyRecordDialog', responseData.data)
}else{
this.showMessage(responseData)
}
this.resetLoad()
}).catch(error => {
this.outputError(error)
})
},
onCopyCompanyRecord(index, row) {
this.setLoad()
getCompanyRecordById(row.id).then(responseData => {
if(responseData.code == 100) {
this.$refs.companyRecordForm.$emit('openCopCompanyRecordDialog', responseData.data)
} else {
this.showMessage(responseData)
}
this.resetLoad()
}).catch(error => {
this.outputError(error)
})
},
onDeleteCompanyRecord(index, row) {
this.$confirm('确定删除吗？', '确认', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.setLoad()
deleteCompanyRecord(row).then(responseData => {
if(responseData.code == 100) {
this.getCompanyRecordList()
this.showMessage({type: 'success', msg: '删除成功'})
} else {
this.showMessage(responseData)
}
this.resetLoad()
}).catch(error => {
this.outputError(error)
})
}).catch(() => {})
},
onSortChange( orderby ) {
if(validatenull(orderby.prop)) {
this.search.orderby = ''
} else {
this.search.orderby = orderby.prop + (orderby.order === 'descending' ? ' desc' : ' asc')
}
this.getCompanyRecordList()
},
onExportExcel(index, row) {
this.setLoad()
getCompanyRecordById(row.id).then(responseData => {
if(responseData.code == 100) {
const data = JSON.stringify(responseData.data)
const blob = new Blob([data], {type: ''})
FileSaver.saveAs(blob, 'dictType.json')
} else {
this.showMessage(responseData)
}
this.resetLoad()
}).catch(error => {
this.outputError(error)
})
},
initOptions(This) {
}
},
watch: {
},
mounted() {
this.pageInit()
}
}
</script>
companyRecord.vue
<template>
<el-dialog :title='dialogProps.title' :visible.sync='dialogProps.visible' :close-on-click-modal='false' width='30%'
@open='onDialogOpen()' v-loading='loading'>
<div slot='title' class='dialog-header'>
{{ dialogProps.title }}
<OperationIcon v-show='dialogProps.action == "view" && permission.edit' type='primary' text='编辑' placement='top-start' icon-name='el-icon-edit' @click='switchEdit'></OperationIcon>
</div>
<el-form :model='bizFormModel' :rules='formRules'
ref='companyRecordForm' label-width='120px' label-position='right' class='edit-form'>
<div class="tab-item" v-show='tabIndex=="1"'>
<!-- 添加按钮弹窗-->
<el-row>
<el-col :span='24/1'>
<el-form-item label='公司编码' prop='companyCode'>
<el-input :disabled='dialogProps.action == "view"' v-model='bizFormModel.companyCode' :maxlength='64' :placeholder='dialogProps.action == "view"? "" : "请输入公司编码"' autofocus></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span='24/1'>
<el-form-item label='公司名称' prop='companyName'>
<el-input :disabled='dialogProps.action == "view"' v-model='bizFormModel.companyName' :maxlength='128' :placeholder='dialogProps.action == "view"? "" : "请输入公司名"' ></el-input>
</el-form-item>
</el-col>
<el-col :span='24/1'>
<el-form-item label="备注" prop="remarks">
<el-input :disabled='dialogProps.action=="view"' v-model="bizFormModel.remarks" :maxlength="255"></el-input>
</el-form-item>
</el-col>
</el-row>
<!-- 主表单 结束-->
</div>
</el-form>
<!-- 按钮 开始-->
<span slot='footer' class='dialog-footer'>
<el-button v-if='dialogProps.action != "view"' type='primary' :plain='true' @click='onSubmit("companyRecordForm")'>保 存</el-button>
<el-button v-if='dialogProps.action != "view"' :plain='true' @click='onDialogClose()'>取 消</el-button>
<el-button v-if='dialogProps.action == "view"' :plain='true' @click='onDialogClose()'>关 闭</el-button>
</span>
<!-- 按钮 结束-->
</el-dialog>
</template>
<script>
import { mapGetters } from 'vuex'
import { validatenull } from '@/utils/validate'
import { saveCompanyRecord } from '@/api/sys/companyRecord'
import BaseUI from '@/views/components/baseUI'
import OperationIcon from '@/components/OperationIcon'
export default {
extends: BaseUI,
name: 'companyRecord-form',
components: {
OperationIcon
},
data() {
return {
bizFormModel: this.initFormModel(),
tabIndex: '1',
dialogProps: {
visible: false,
action: '',
title: ''
},
formRules: {
// 主表验证
'companyCode': [
{ required: true, message: '请输入公司编码', trigger: 'blur' }
],
'companyName': [
{ required: true, message: '请输入公司名', trigger: 'blur' }
]
}
}
},
props: {
// 权限
permission: {
type: Object
}
},
computed: {
...mapGetters(["settings"]),
tabOptionBtnTop() {
let top
switch (this.settings.size) {
case 'medium':
top = -46 + 'px'
break;
case 'small':
top = -42 + 'px'
break;
case 'mini':
top = -38 + 'px'
break;
default:
top = -50 + 'px'
}
return top
}
},
methods: {
onSubmit(formName) {
this.$refs[formName].validate((valid, object) => {
if (valid) {
this.doSave()
} else {
// 处理校验定位
let arr = []
let numArr = []
for (let i in object) {
let dom = this.$refs[i]
if (!dom) {
this.tabIndex = 1
return
} else {
arr.push(dom)
if (Object.prototype.toString.call(arr) !== '[object Object]') {
arr.forEach(item => {
numArr.push(item.$el.dataset.num)
})
this.tabIndex = Math.min(...numArr)
}
}
}
return false
}
});
},
doSave() {
this.setLoad()
saveCompanyRecord(this.bizFormModel).then(responseData => {
if(responseData.code == 100) {
this.dialogProps.visible = false
this.$emit('save-finished')
} else {
this.showMessage(responseData)
}
this.resetLoad()
}).catch(error => {
this.outputError(error)
})
},
onAddDictItemRow(tableData) {
tableData.push({
'companyRecord': {
'companyCode': validatenull(parent) || validatenull(parent.companyRecord) ? null : parent.companyRecord.companyCode,
'companyName': validatenull(parent) || validatenull(parent.companyRecord) ? null : parent.companyRecord.companyName,
'remarks': validatenull(parent) || validatenull(parent.companyRecord)? null : parent.companyRecord.remarks
}
})
},
onDeleteRow(index, tableData) {
tableData.splice(index, 1)
},
switchEdit() {
this.dialogProps.action = 'edit'
this.dialogProps.title = '修改公司信息'
this.initOptions(this.bizFormModel)
},
onDialogClose() {
this.dialogProps.visible = false
},
onDialogOpen() {
this.$nextTick(() => {
this.$refs['companyRecordForm'].clearValidate()
})
},
initFormModel(This) {
return {
'companyCode': '', // 公司编码
'companyName': '', // 公司名称
'remarks': '' //备注
}
},
initOptions() {
// 主表
let This = this.bizFormModel
// 子表 字典项
This = this.dictItemCurrentRow
}
},
watch: {
},
mounted: function() {
this.$nextTick(() => {
this.$on('openViewCompanyRecordDialog', function(companyRecord) {
this.dialogProps.action = 'view'
this.dialogProps.title = '查看公司信息'
this.bizFormModel = companyRecord
this.initOptions(this.bizFormModel)
this.tabIndex = '1'
this.dialogProps.visible = true
})
this.$on('openEditCompanyRecordDialog', function(companyRecord) {
this.dialogProps.action = 'edit'
this.dialogProps.title = '修改公司信息'
this.bizFormModel = companyRecord
this.initOptions(this.bizFormModel)
this.tabIndex = '1'
this.dialogProps.visible = true
})
this.$on('openAddCompanyRecordDialog', function() {
this.dialogProps.action = 'add'
this.dialogProps.title = '添加公司信息'
this.bizFormModel = this.initFormModel()
this.initOptions(this.bizFormModel)
this.tabIndex = '1'
this.dialogProps.visible = true
})
})
}
}
</script>
<style lang="scss" scoped>
.tab-item {
position: relative;
.tab-option {
position: absolute;
top: -46px;
right: 0;
}
}
</style>
companyRecord.js
import request from '@/utils/request'
export const listCompanyRecordAll = (search) =>
request({
url: '/sys/companyRecord/queryAll',
method: 'post',
data: search
})
export const saveCompanyRecord = (companyRecord) =>
request({
url: '/sys/companyRecord/save',
method: 'post',
data: companyRecord
})
export const listCompanyRecordPage = (search) =>
request({
url:'/sys/companyRecord/list',
method:'post',
data:search
})
export const deleteCompanyRecord = (companyRecord) =>
request({
url: '/sys/companyRecord/remove',
method: 'post',
data: companyRecord
})
export const getCompanyRecordById = (id) =>
request({
url:'/sys/companyRecord/'+id,
method: 'get'
})
效果图。如下图：
controller层
package com.geeke.sys.controller;
import com.alibaba.fastjson.JSONObject;
import com.geeke.common.controller.SearchParams;
import com.geeke.common.data.Page;
import com.geeke.sys.entity.CompanyRecord;
import com.geeke.sys.service.CompanyRecordService;
import com.geeke.utils.ResultUtil;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.http.ResponseEntity;
import org.springframework.web.bind.annotation.*;
@RestController
@RequestMapping(value = "/sys/companyRecord")
public class CompanyRecordController extends BaseController{
@Autowired
private CompanyRecordService companyRecordService;
/**
* 新增公司信息
*/
@PostMapping(value = "/save")
public ResponseEntity<JSONObject> save(@RequestBody CompanyRecord company){
String id = companyRecordService.save(company).getId();
return ResponseEntity.ok(ResultUtil.successJson(id));
}
/**
* 删除公司信息
*/
@PostMapping(value = "/remove")
public ResponseEntity<JSONObject> remove(@RequestBody CompanyRecord company){
int rows = companyRecordService.delete(company);
return ResponseEntity.ok(ResultUtil.successJson(rows));
}
/**
* 修改公司信息
*/
@PostMapping(value = "/modify")
public ResponseEntity<Boolean> modify(@RequestBody CompanyRecord company){
return ResponseEntity.ok(companyRecordService.modify(company));
}
/**
* 查询公司信息
*/
@PostMapping(value = "queryAll")
public ResponseEntity<JSONObject> queryAll(@RequestBody SearchParams searchParams){
return ResponseEntity.ok(ResultUtil.successJson(companyRecordService.queryAll(searchParams.getParams(), searchParams.getOrderby())));
}
@PostMapping(value = {"list", ""})
public ResponseEntity<JSONObject> listPage(@RequestBody SearchParams searchParams) {
Page<CompanyRecord> result = companyRecordService.listPage(searchParams.getParams(), searchParams.getOffset(), searchParams.getLimit(), searchParams.getOrderby());
return ResponseEntity.ok(ResultUtil.successJson(result));
}
/**
* 根据公司编码查询公司信息
*
* @param companyCode 公司编码
* @return ResponseEntity<JSONObject> 公司信息
*/
@GetMapping("/{id}")
public ResponseEntity<JSONObject> getById(@PathVariable("id") String companyCode) {
CompanyRecord entity = companyRecordService.get(companyCode);
return ResponseEntity.ok(ResultUtil.successJson(entity));
}
}
service层
package com.geeke.sys.service;
import com.geeke.common.data.Page;
import com.geeke.common.data.PageRequest;
import com.geeke.common.data.Parameter;
import com.geeke.common.service.CrudService;
import com.geeke.sys.dao.CompanyRecordDao;
import com.geeke.sys.entity.CompanyRecord;
import com.google.common.collect.Lists;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import org.springframework.transaction.annotation.Transactional;
import java.util.List;
@Service
@Transactional(readOnly = true)
public class CompanyRecordService extends CrudService<CompanyRecordDao, CompanyRecord> {
@Autowired
private CompanyRecordDao companyRecordDao;
public Boolean insert(CompanyRecord company) {
int count=companyRecordDao.insert(company);
if (count>0){
return true;
}
return false;
}
public Boolean remove(CompanyRecord company) {
int count=companyRecordDao.delete(company);
if (count>0){
return true;
}
return false;
}
public Boolean modify(CompanyRecord company) {
int count=companyRecordDao.update(company);
if (count>0){
return true;
}
return false;
}
public List<CompanyRecord> queryAll(List<Parameter> parameters, String orderby) {
return companyRecordDao.listAll(new PageRequest(parameters, orderby));
}
public Page<CompanyRecord> listPage(List<Parameter> params, int offset, int limit, String orderby) {
PageRequest pageRequest = new PageRequest(offset, limit, params, orderby);
int total = companyRecordDao.count(pageRequest);
List list = null;
if(total > 0) {
list = companyRecordDao.listPage(pageRequest);
}
return new Page(total, list);
}
@Override
public CompanyRecord get(String id) {
CompanyRecord action = super.get(id);
List<Parameter> params = null;
PageRequest pageRequest;
params = Lists.newArrayList();
params.add(new Parameter("id", "=", action.getId()));
pageRequest = new PageRequest(params);
action.setCompanyRecordList(actionRecycleDao.listAll(pageRequest));
return action;
}
}
dao层
package com.geeke.sys.dao;
import com.geeke.common.persistence.CrudDao;
import com.geeke.sys.entity.CompanyRecord;
import org.apache.ibatis.annotations.Mapper;
@Mapper
public interface CompanyRecordDao extends CrudDao<CompanyRecord>{
}
CrudDao.java
package com.geeke.common.persistence;
import java.util.List;
import org.apache.ibatis.annotations.Param;
import com.geeke.common.data.PageRequest;
/**
* DAO支持类实现
* @author lys
* @version 2014-05-16
* @param <T>
*/
public interface CrudDao<T> extends BaseDao {
/**
* 获取单条数据
* @param id
* @return
*/
public T get(String id);
/**
* 查询数据条数(用在分页查询)
* @param pageRequest
* @return
*/
public int count(PageRequest pageRequest);
/**
* 分页查询数据列表
* @param pageRequest
* @return
*/
public List<T> listPage(PageRequest pageRequest);
/**
* 查询所有数据列表
* @param parameters
* @return
*/
public List<T> listAll(PageRequest pageRequest);
/**
* 插入数据
* @param entity
* @return
*/
public int insert(T entity);
/**
* 更新数据
* @param entity
* @return
*/
public int update(T entity);
/**
* 有删除字段时，一般为逻辑删除，更新del_flag字段为1；否则物理删除
* @param entity
* @see public int delete(T entity)
* @return
*/
public int delete(T entity);
/**
* 批量增加
* @param entitys
* @return
*/
public int bulkInsert(@Param("entitys")List<T> entitys);
/**
* 批量修改
* @param entitys
* @return
*/
public int bulkUpdate(@Param("entitys")List<T> entitys);
/**
* 批量删除
* @param entitys
* @return
*/
public int bulkDelete(@Param("entitys")List<T> entitys);
}
…