372 lines
16 KiB
HTML
372 lines
16 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0, user-scalable=0" />
|
|
<title></title>
|
|
<script src="./lib/jquery/dist/jquery.js"></script>
|
|
<script src="./lib/vuejs/vue.js"></script>
|
|
<script src="./lib/vuejs/axios.min.js"></script>
|
|
<script src="./lib/elementui/index2.15.9v.js"></script>
|
|
<!--<script src="./lib/linq.js/Content/Scripts/linq.min.js"></script>-->
|
|
<script src="Scripts/linq.js"></script>
|
|
<link href="./lib/elementui/index2.15.9v.css" rel="stylesheet" />
|
|
<link href="./lib/elementui/theme-green/index.css" rel="stylesheet" />
|
|
<link href="./lib/elementui/theme-green/color-green.css" rel="stylesheet" />
|
|
|
|
<!-- 依 赖 样 式 -->
|
|
<link rel="stylesheet" href="component/pear/css/pear.css" />
|
|
<!-- 加 载 样 式 -->
|
|
<!--<Link rel="stylesheet" href="admin/css/loader.css" />-->
|
|
<!-- 布 局 样 式 -->
|
|
<!--<Link rel="stylesheet" href="admin/css/admin.css" />-->
|
|
<!-- 依 赖 脚 本 -->
|
|
<script src="component/layui/layui.js"></script>
|
|
<script src="component/pear/pear.js"></script>
|
|
<!-- 新增加的layui的框架 -->
|
|
<!--<Link href="Scripts/layui/css/layui.css" rel="stylesheet" />
|
|
<script src="Scripts/layui/layui.js"></script>-->
|
|
<!--新增加的vxe表格组件-->
|
|
<!-- 引入样式 -->
|
|
<link rel="stylesheet" href="./lib/vxetable/vxe_style.css">
|
|
<!-- 引入脚本 -->
|
|
<script src="./lib/vxetable/xe-utils.js"></script>
|
|
<script src="./lib/vxetable/vxe-table@legacy.js"></script>
|
|
|
|
|
|
</head>
|
|
<body>
|
|
<div id="app">
|
|
|
|
<div style=" width:100%; height:22px;background-color:aquamarine; text-align:center; padding:8px">人口统计管理</div>
|
|
|
|
<vxe-toolbar>
|
|
<template #buttons>
|
|
<vxe-button icon="vxe-icon-square-plus" @click="insertEvent()">新增</vxe-button>
|
|
<!--<vxe-button icon="vxe-icon-cloud-upload" @click="uploadFileEvent()">导入</vxe-button>-->
|
|
|
|
<!-- <div style=" border:1px solid dashed; padding:2px; margin-left:12px;margin-right:12px; border-radius:4px; background-color:#eee6e6e1">-->
|
|
<!-- <input type="file" @change="handleFileUpload">-->
|
|
<!-- <vxe-button icon="vxe-icon-cloud-download" @click="upload()">导入</vxe-button>-->
|
|
<!-- </div>-->
|
|
<!-- <vxe-button icon="vxe-icon-cloud-download" @click="exportData()">导出</vxe-button>-->
|
|
</template>
|
|
</vxe-toolbar>
|
|
|
|
<vxe-table border
|
|
resizable
|
|
show-overflow
|
|
ref="xTable"
|
|
height="500"
|
|
:row-config="{isHover: true}"
|
|
:data="tableData"
|
|
@cell-dblclick="cellDBLClickEvent">
|
|
<vxe-column type="seq" width="60"></vxe-column>
|
|
<vxe-column field="id" title="id" ></vxe-column>
|
|
<vxe-column field="quxian" title="地区名称"></vxe-column>
|
|
<vxe-column field="nianfen" title="年份"></vxe-column>
|
|
<!--<vxe-column field="MIANJI" title="面积"></vxe-column>-->
|
|
<vxe-column field="renkou" title="人口"></vxe-column>
|
|
<!--<vxe-column field="MIDU" title="密度"></vxe-column>-->
|
|
<vxe-column field="datasource_name" title="数据来源" show-overflow></vxe-column>
|
|
<vxe-column title="操作" width="100" show-overflow>
|
|
<template #default="{ row }">
|
|
<vxe-button type="text" icon="vxe-icon-edit" @click="editEvent(row)"></vxe-button>
|
|
<vxe-button type="text" icon="vxe-icon-delete" @click="removeEvent(row)"></vxe-button>
|
|
</template>
|
|
</vxe-column>
|
|
</vxe-table>
|
|
|
|
<vxe-pager :loading="loading1"
|
|
:current-page="tablePage1.currentPage"
|
|
:page-size="tablePage1.pageSize"
|
|
:total="tablePage1.totalResult"
|
|
:layouts="['PrevPage', 'JumpNumber', 'NextPage', 'FullJump', 'Sizes', 'Total']"
|
|
@page-change="handlePageChange1">
|
|
</vxe-pager>
|
|
|
|
|
|
|
|
<vxe-modal v-model="showEdit" :title="selectRow ? '编辑&保存' : '新增&保存'" width="800" min-width="600" min-height="300" :loading="submitLoading" resize destroy-on-close>
|
|
<template #default>
|
|
<vxe-form :data="formData" :rules="formRules" title-align="right" title-width="100" @submit="submitEvent">
|
|
<div style="visibility:hidden">
|
|
<vxe-form-item field="id" title="内部编号" :span="12" :item-render="{}">
|
|
<template #default="{ data }">
|
|
<vxe-input v-model="data.id" placeholder="内部编号" readonly></vxe-input>
|
|
</template>
|
|
</vxe-form-item>
|
|
</div>
|
|
|
|
<vxe-form-item title="基本信息管理" title-align="left" :title-width="200" :span="24" :title-prefix="{icon: 'vxe-icon-comment'}"></vxe-form-item>
|
|
<vxe-form-item field="quxian" title="地区名称" :span="12" :item-render="{}">
|
|
<template #default="{ data }">
|
|
<vxe-input v-model="data.quxian" placeholder="请输入区县名称"></vxe-input>
|
|
</template>
|
|
</vxe-form-item>
|
|
<vxe-form-item field="nianfen" title="年份" :span="12" :item-render="{}">
|
|
<template #default="{ data }">
|
|
<vxe-input v-model="data.nianfen" placeholder="请输入年份内容 "></vxe-input>
|
|
</template>
|
|
</vxe-form-item>
|
|
<!--<vxe-form-item field="MIANJI" title="面积" :span="12" :item-render="{}">--><!-- -->
|
|
<!--<template #default="{ data }">
|
|
<vxe-input v-model="data.MIANJI" placeholder="请输入面积信息"></vxe-input>
|
|
</template>
|
|
</vxe-form-item>-->
|
|
<vxe-form-item field="renkou" title="人口" :span="12" :item-render="{}">
|
|
<template #default="{ data }">
|
|
<vxe-input v-model="data.renkou" type="number" placeholder="请输入人口数量"></vxe-input>
|
|
<!--vxe-select v-model="data.RENKOU" transfer>
|
|
<vxe-option v-for="item in sexList" :key="item.value" :value="item.value" :label="item.label"></vxe-option>
|
|
</vxe-select>-->
|
|
</template>
|
|
</vxe-form-item>
|
|
<!--<vxe-form-item field="MIDU" title="密度" :span="12" :item-render="{}">
|
|
<template #default="{ data }">
|
|
<vxe-input v-model="data.MIDU" placeholder="请输入密度数据"></vxe-input>
|
|
</template>
|
|
</vxe-form-item>-->
|
|
<vxe-form-item field="datasource_name" title="数据来源" :span="12" :item-render="{}">
|
|
<template #default="{ data }">
|
|
<vxe-input v-model="data.datasource_name" placeholder="请输入数据来源"></vxe-input>
|
|
<!--<vxe-radio-group v-model="data.flag1">
|
|
<vxe-radio label="Y" content="是"></vxe-radio>
|
|
<vxe-radio label="N" content="否"></vxe-radio>
|
|
</vxe-radio-group>-->
|
|
</template>
|
|
</vxe-form-item>
|
|
|
|
<vxe-form-item align="center" title-align="left" :span="24">
|
|
<template #default>
|
|
<vxe-button type="submit">提交</vxe-button>
|
|
<vxe-button type="reset">重置</vxe-button>
|
|
</template>
|
|
</vxe-form-item>
|
|
</vxe-form>
|
|
</template>
|
|
</vxe-modal>
|
|
|
|
|
|
</div>
|
|
|
|
</body>
|
|
</html>
|
|
|
|
|
|
|
|
<style>
|
|
</style>
|
|
|
|
|
|
<script>
|
|
|
|
///////////////////////////////////////////////////
|
|
//该部分是Vue应用封装
|
|
var app = new Vue({
|
|
el: '#app',
|
|
data() {
|
|
return {
|
|
//=====================第四步的相关参数开始===================
|
|
submitLoading: false,
|
|
tableData: [],
|
|
//分页开始
|
|
loading1: false,
|
|
tablePage1: {
|
|
currentPage: 1,
|
|
pageSize: 10,
|
|
totalResult: 0,
|
|
},
|
|
//分页结束
|
|
|
|
selectRow: null,
|
|
showEdit: false,
|
|
//sexList: [
|
|
// { label: '女', value: '0' },
|
|
// { label: '男', value: '1' }
|
|
//],
|
|
formData: {
|
|
quxian: null,
|
|
nianfen: null,
|
|
renkou: null,
|
|
datasource_name: null
|
|
},
|
|
formRules: {
|
|
//QUXIAN: [
|
|
// { required: true, message: '请输入名称' },
|
|
// { min: 3, max: 5, message: '长度在 3 到 5 个字符' }
|
|
//],
|
|
quxian: [
|
|
{ required: true, message: '请输入地区名称' }
|
|
],
|
|
nianfen: [
|
|
{ required: true, message: '请输入年份' }
|
|
],
|
|
renkou: [
|
|
{ required: true, message: '请输入人口' }
|
|
],
|
|
datasource_name: [
|
|
{ required: true, message: '请输入数据来源' }
|
|
]
|
|
}
|
|
}
|
|
},
|
|
mounted() {
|
|
//var _this = this; //this指向vue
|
|
|
|
this.getData();
|
|
|
|
},
|
|
methods: {
|
|
|
|
//选择上传文件
|
|
handleFileUpload(event) {
|
|
this.file = event.target.files[0];
|
|
},
|
|
//上传操作
|
|
upload() {
|
|
const formData = new FormData();
|
|
formData.append('file', this.file);
|
|
|
|
axios.post('/renkou/ImportExcel', formData, {
|
|
headers: { 'Content-Type': 'multipart/form-data' },
|
|
params: { 'username': 'aaa', "FileName": Date.now(), module: 'renkoudata' }
|
|
})
|
|
.then(response => {
|
|
// 处理上传成功事件
|
|
this.getData();
|
|
})
|
|
.catch(error => {
|
|
// 处理上传失败事件
|
|
VXETable.modal.message({ content: '查询没有成功，请检查！', status: 'error' })
|
|
});
|
|
},
|
|
|
|
|
|
//获取数据，待改造
|
|
getData() {
|
|
var _this = this;
|
|
this.loading1 = true
|
|
axios.get(
|
|
//int page, int limit,
|
|
"./RenKou/GetSearch?page=" + this.tablePage1.currentPage + "&limit=" + this.tablePage1.pageSize
|
|
).then((res) => {
|
|
console.log('aaaa', res);
|
|
if (res.data.msg == "success") {
|
|
//VXETable.modal.message({ content: '新增成功', status: 'success' })
|
|
//$table.insert(this.formData)
|
|
_this.loading1 = false;
|
|
this.tablePage1.totalResult = res.data.total
|
|
this.tableData=res.data.data
|
|
}
|
|
else {
|
|
VXETable.modal.message({ content: '查询没有成功，请检查！', status: 'error' })
|
|
}
|
|
});
|
|
},
|
|
//分页功能
|
|
handlePageChange1({ currentPage, pageSize }) {
|
|
this.tablePage1.currentPage = currentPage
|
|
this.tablePage1.pageSize = pageSize
|
|
this.getData()
|
|
},
|
|
//暂时未用
|
|
visibleMethod({ data }) {
|
|
return data.flag1 === 'Y'
|
|
},
|
|
//暂时未用
|
|
cellDBLClickEvent({ row }) {
|
|
this.editEvent(row)
|
|
},
|
|
//增加方法
|
|
insertEvent() {
|
|
this.formData = {
|
|
quxian: '',
|
|
nianfen: '',
|
|
renkou: '',
|
|
datasource_name: ''
|
|
}
|
|
this.selectRow = null
|
|
this.showEdit = true
|
|
},
|
|
//修改方法
|
|
editEvent(row) {
|
|
this.formData = {
|
|
id:row.id,
|
|
quxian: row.quxian,
|
|
nianfen: row.nianfen,
|
|
renkou: row.renkou,
|
|
datasource_name: row.datasource_name //MIANJI: row.MIANJI,
|
|
}
|
|
this.selectRow = row
|
|
this.showEdit = true
|
|
},
|
|
//异步删除方法
|
|
async removeEvent(row) {
|
|
const type = await VXETable.modal.confirm('您确定要删除该数据?')
|
|
const $table = this.$refs.xTable
|
|
if (type === 'confirm') {
|
|
|
|
console.log('remove', row);
|
|
axios.get(
|
|
"./RenKou/RemoveData?data=" + JSON.stringify(row)
|
|
).then((res) => {
|
|
if (res.data.msg == "success") {
|
|
VXETable.modal.message({ content: '删除成功', status: 'success' })
|
|
//Object.assign(this.selectRow, this.formData)
|
|
$table.remove(row)
|
|
} else {
|
|
VXETable.modal.message({ content: '删除没有成功', status: 'error' })
|
|
}
|
|
});
|
|
|
|
}
|
|
},
|
|
//提交操作方法
|
|
submitEvent() {
|
|
this.submitLoading = true
|
|
var _this = this; //this指向vue
|
|
setTimeout(() => {
|
|
const $table = this.$refs.xTable
|
|
this.submitLoading = false
|
|
this.showEdit = false
|
|
if (this.selectRow) {
|
|
console.log('数据', this.selectRow, this.formData);
|
|
axios.get(
|
|
"./RenKou/UpdateData?data=" + JSON.stringify(this.formData)
|
|
).then((res) => {
|
|
if (res.data.msg == "success") {
|
|
VXETable.modal.message({ content: '保存成功', status: 'success' })
|
|
Object.assign(this.selectRow, this.formData)
|
|
} else {
|
|
VXETable.modal.message({ content: '保存没有成功，请检查！', status: 'error' })
|
|
}
|
|
});
|
|
|
|
} else {
|
|
axios.get(
|
|
"./RenKou/AddData?data=" + JSON.stringify(this.formData)
|
|
).then((res) => {
|
|
console.log('aaaa',res);
|
|
if (res.data.msg == "success") {
|
|
VXETable.modal.message({ content: '新增成功', status: 'success' })
|
|
$table.insert(this.formData)
|
|
}
|
|
else {
|
|
VXETable.modal.message({ content: '新增没有成功，请检查！', status: 'error' })
|
|
}
|
|
});
|
|
|
|
}
|
|
}, 500)
|
|
},
|
|
// 导出操作
|
|
exportData() {
|
|
window.location.href = './PageCache/GenExportResult?name=人口数量数据&strsql=select QUXIAN as 地区名称,NIANFEN as 年份,RENKOU as 人口,DATASOURCE_NAME as 数据源 from RenKouData';
|
|
}
|
|
}
|
|
})
|
|
///////////////////////////////////////////////////
|
|
|
|
</script>
|