@@ -0,0 +1,54 @@ | |||||
import request from '@/utils/request' | |||||
// 查询村级区域列表 | |||||
export function listCjqy(query) { | |||||
return request({ | |||||
url: '/business/cjqy/list', | |||||
method: 'get', | |||||
params: query | |||||
}) | |||||
} | |||||
// 查询村级区域详细 | |||||
export function getCjqy(CJQYDM) { | |||||
return request({ | |||||
url: '/business/cjqy/' + CJQYDM, | |||||
method: 'get' | |||||
}) | |||||
} | |||||
// 新增村级区域 | |||||
export function addCjqy(data) { | |||||
return request({ | |||||
url: '/business/cjqy', | |||||
method: 'post', | |||||
data: data | |||||
}) | |||||
} | |||||
// 修改村级区域 | |||||
export function updateCjqy(data) { | |||||
return request({ | |||||
url: '/business/cjqy', | |||||
method: 'put', | |||||
data: data | |||||
}) | |||||
} | |||||
// 删除村级区域 | |||||
export function delCjqy(CJQYDM) { | |||||
return request({ | |||||
url: '/business/cjqy/' + CJQYDM, | |||||
method: 'delete' | |||||
}) | |||||
} | |||||
// 打印村级区域 | |||||
export function printCjqy(query) { | |||||
return request({ | |||||
url: '/business/cjqy/print', | |||||
method: 'get', | |||||
params: query | |||||
}) | |||||
} |
@@ -0,0 +1,54 @@ | |||||
import request from '@/utils/request' | |||||
// 查询导出任务列表 | |||||
export function listExport(query) { | |||||
return request({ | |||||
url: '/business/export/list', | |||||
method: 'get', | |||||
params: query | |||||
}) | |||||
} | |||||
// 查询导出任务详细 | |||||
export function getExport(id) { | |||||
return request({ | |||||
url: '/business/export/' + id, | |||||
method: 'get' | |||||
}) | |||||
} | |||||
// 新增导出任务 | |||||
export function addExport(data) { | |||||
return request({ | |||||
url: '/business/export', | |||||
method: 'post', | |||||
data: data | |||||
}) | |||||
} | |||||
// 修改导出任务 | |||||
export function updateExport(data) { | |||||
return request({ | |||||
url: '/business/export', | |||||
method: 'put', | |||||
data: data | |||||
}) | |||||
} | |||||
// 删除导出任务 | |||||
export function delExport(id) { | |||||
return request({ | |||||
url: '/business/export/' + id, | |||||
method: 'delete' | |||||
}) | |||||
} | |||||
// 打印导出任务 | |||||
export function printExport(query) { | |||||
return request({ | |||||
url: '/business/export/print', | |||||
method: 'get', | |||||
params: query | |||||
}) | |||||
} |
@@ -0,0 +1,54 @@ | |||||
import request from '@/utils/request' | |||||
// 查询导入任务列表 | |||||
export function listImport(query) { | |||||
return request({ | |||||
url: '/business/import/list', | |||||
method: 'get', | |||||
params: query | |||||
}) | |||||
} | |||||
// 查询导入任务详细 | |||||
export function getImport(id) { | |||||
return request({ | |||||
url: '/business/import/' + id, | |||||
method: 'get' | |||||
}) | |||||
} | |||||
// 新增导入任务 | |||||
export function addImport(data) { | |||||
return request({ | |||||
url: '/business/import', | |||||
method: 'post', | |||||
data: data | |||||
}) | |||||
} | |||||
// 修改导入任务 | |||||
export function updateImport(data) { | |||||
return request({ | |||||
url: '/business/import', | |||||
method: 'put', | |||||
data: data | |||||
}) | |||||
} | |||||
// 删除导入任务 | |||||
export function delImport(id) { | |||||
return request({ | |||||
url: '/business/import/' + id, | |||||
method: 'delete' | |||||
}) | |||||
} | |||||
// 打印导入任务 | |||||
export function printImport(query) { | |||||
return request({ | |||||
url: '/business/import/print', | |||||
method: 'get', | |||||
params: query | |||||
}) | |||||
} |
@@ -0,0 +1,54 @@ | |||||
import request from '@/utils/request' | |||||
// 查询乡级区域列表 | |||||
export function listXjqy(query) { | |||||
return request({ | |||||
url: '/business/xjqy/list', | |||||
method: 'get', | |||||
params: query | |||||
}) | |||||
} | |||||
// 查询乡级区域详细 | |||||
export function getXjqy(XJQYDM) { | |||||
return request({ | |||||
url: '/business/xjqy/' + XJQYDM, | |||||
method: 'get' | |||||
}) | |||||
} | |||||
// 新增乡级区域 | |||||
export function addXjqy(data) { | |||||
return request({ | |||||
url: '/business/xjqy', | |||||
method: 'post', | |||||
data: data | |||||
}) | |||||
} | |||||
// 修改乡级区域 | |||||
export function updateXjqy(data) { | |||||
return request({ | |||||
url: '/business/xjqy', | |||||
method: 'put', | |||||
data: data | |||||
}) | |||||
} | |||||
// 删除乡级区域 | |||||
export function delXjqy(XJQYDM) { | |||||
return request({ | |||||
url: '/business/xjqy/' + XJQYDM, | |||||
method: 'delete' | |||||
}) | |||||
} | |||||
// 打印乡级区域 | |||||
export function printXjqy(query) { | |||||
return request({ | |||||
url: '/business/xjqy/print', | |||||
method: 'get', | |||||
params: query | |||||
}) | |||||
} |
@@ -0,0 +1,54 @@ | |||||
import request from '@/utils/request' | |||||
// 查询县级区域列表 | |||||
export function listXjxzq(query) { | |||||
return request({ | |||||
url: '/business/xjxzq/list', | |||||
method: 'get', | |||||
params: query | |||||
}) | |||||
} | |||||
// 查询县级区域详细 | |||||
export function getXjxzq(XZQDM) { | |||||
return request({ | |||||
url: '/business/xjxzq/' + XZQDM, | |||||
method: 'get' | |||||
}) | |||||
} | |||||
// 新增县级区域 | |||||
export function addXjxzq(data) { | |||||
return request({ | |||||
url: '/business/xjxzq', | |||||
method: 'post', | |||||
data: data | |||||
}) | |||||
} | |||||
// 修改县级区域 | |||||
export function updateXjxzq(data) { | |||||
return request({ | |||||
url: '/business/xjxzq', | |||||
method: 'put', | |||||
data: data | |||||
}) | |||||
} | |||||
// 删除县级区域 | |||||
export function delXjxzq(XZQDM) { | |||||
return request({ | |||||
url: '/business/xjxzq/' + XZQDM, | |||||
method: 'delete' | |||||
}) | |||||
} | |||||
// 打印县级区域 | |||||
export function printXjxzq(query) { | |||||
return request({ | |||||
url: '/business/xjxzq/print', | |||||
method: 'get', | |||||
params: query | |||||
}) | |||||
} |
@@ -0,0 +1,416 @@ | |||||
<template> | |||||
<div class="app-container"> | |||||
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px"> | |||||
<el-form-item label="区划代码" prop="CJQYDM"> | |||||
<el-input v-model="queryParams.CJQYDM" placeholder="请输入区划代码" clearable @keyup.enter.native="handleQuery"/> | |||||
</el-form-item> | |||||
<el-form-item label="级联代码" prop="importCode"> | |||||
<el-input v-model="queryParams.importCode" placeholder="请输入部门级联代码" clearable @keyup.enter.native="handleQuery"/> | |||||
</el-form-item> | |||||
<el-form-item> | |||||
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button> | |||||
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button> | |||||
</el-form-item> | |||||
</el-form> | |||||
<el-row :gutter="10" class="mb8"> | |||||
<el-col :span="1.5"> | |||||
<el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd" v-hasPermi="['business:cjqy:add']">新增</el-button> | |||||
</el-col> | |||||
<!-- | |||||
<el-col :span="1.5"> | |||||
<el-button type="success" plain icon="el-icon-edit" size="mini" :disabled="single" @click="handleUpdate" v-hasPermi="['business:cjqy:edit']">修改</el-button> | |||||
</el-col> | |||||
<el-col :span="1.5"> | |||||
<el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleDelete" v-hasPermi="['business:cjqy:remove']">删除</el-button> | |||||
</el-col> | |||||
--> | |||||
<el-col :span="1.5"> | |||||
<el-button type="success" plain icon="el-icon-upload2" size="mini" @click="handleImport" v-hasPermi="['business:cjqy:import']">导入</el-button> | |||||
</el-col> | |||||
<el-col :span="1.5"> | |||||
<el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport" v-hasPermi="['business:cjqy:export']">导出</el-button> | |||||
</el-col> | |||||
<el-col :span="1.5"> | |||||
<el-button type="info" plain icon="el-icon-printer" size="mini" @click="handlePrint()" v-hasPermi="['business:cjqy:print']">打印</el-button> | |||||
</el-col> | |||||
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar> | |||||
</el-row> | |||||
<!-- 数据列表 列属性 min-width="60" show-overflow-tooltip @selection-change="handleSelectionChange" --> | |||||
<el-table v-loading="loading" :data="cjqyList" border> | |||||
<!--<el-table-column type="selection" width="55" align="center" />--> | |||||
<el-table-column label="区划代码" align="center" prop="CJQYDM" /> | |||||
<el-table-column label="区划名称" align="center" prop="CJQYMC" /> | |||||
<el-table-column label="标识码" align="center" prop="BSM" /> | |||||
<el-table-column label="要素代码" align="center" prop="YSDM" /> | |||||
<el-table-column label="部门级联代码" align="center" prop="importCode" /> | |||||
<el-table-column label="操作" align="center" class-name="small-padding fixed-width"> | |||||
<template slot-scope="scope"> | |||||
<el-button size="mini" type="text" icon="el-icon-view" @click="handleLook(scope.row)" v-hasPermi="['business:cjqy:query']">查看</el-button> | |||||
<el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)" v-hasPermi="['business:cjqy:edit']">修改</el-button> | |||||
<el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)" v-hasPermi="['business:cjqy:remove']">删除</el-button> | |||||
</template> | |||||
</el-table-column> | |||||
</el-table> | |||||
<!-- 分页插件 --> | |||||
<pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList"/> | |||||
<!-- 导入EXCEL组件 --> | |||||
<el-dialog :title="upload.title" :visible.sync="upload.open" width="400px" append-to-body> | |||||
<el-upload ref="upload" :limit="1" accept=".xlsx, .xls" :headers="upload.headers" :action="upload.url + '?updateSupport=' + upload.updateSupport" :disabled="upload.isUploading" :on-progress="handleFileUploadProgress" :on-success="handleFileSuccess" :auto-upload="false" drag> | |||||
<i class="el-icon-upload"></i> | |||||
<div class="el-upload__text">将文件拖到此处,或<em>点击上传</em></div> | |||||
<div class="el-upload__tip text-left" slot="tip"> | |||||
<div class="el-upload__tip" slot="tip"> | |||||
<el-checkbox v-model="upload.updateSupport" /> 是否更新已经存在的村级区域 | |||||
</div> | |||||
<p style="color: red">1、仅允许导入xls、xlsx格式文件;</p> | |||||
<el-link type="primary" :underline="false" style="font-size: 12px; vertical-align: baseline" @click="importTemplate">下载模板</el-link> | |||||
</div> | |||||
</el-upload> | |||||
<div slot="footer" class="dialog-footer"> | |||||
<el-button type="primary" @click="submitFileForm">确 定</el-button> | |||||
<el-button @click="upload.open = false">取 消</el-button> | |||||
</div> | |||||
</el-dialog> | |||||
<!-- 查看村级区域对话框 --> | |||||
<el-dialog :title="title" :visible.sync="viewOpen" width="800px" append-to-body> | |||||
<el-descriptions id="printDetail" :column="descColumn" border :labelStyle="{width: `${descLabelWidth}%`}" :contentStyle="{width: `${(100 / descColumn) - descLabelWidth}%`}"> | |||||
<el-descriptions-item label="区划名称">{{ form.CJQYMC }}</el-descriptions-item> | |||||
<el-descriptions-item label="空间矢量">{{ form.theGeom }}</el-descriptions-item> | |||||
<el-descriptions-item label="标识码">{{ form.BSM }}</el-descriptions-item> | |||||
<el-descriptions-item label="要素代码">{{ form.YSDM }}</el-descriptions-item> | |||||
<el-descriptions-item label="fid">{{ form.fid }}</el-descriptions-item> | |||||
<el-descriptions-item label="部门级联代码">{{ form.importCode }}</el-descriptions-item> | |||||
</el-descriptions> | |||||
<!-- 弹框操作按钮 --> | |||||
<div slot="footer" class="dialog-footer"> | |||||
<el-button @click="doPrint">打 印</el-button> | |||||
<el-button @click="cancelDetail">关 闭</el-button> | |||||
</div> | |||||
</el-dialog> | |||||
<!-- 添加或修改村级区域对话框 --> | |||||
<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body> | |||||
<el-form ref="form" :model="form" :rules="rules" label-width="80px"> | |||||
<el-form-item label="区划名称" prop="CJQYMC"> | |||||
<el-input v-model="form.CJQYMC" placeholder="请输入区划名称" show-word-limit :maxlength="100"/> | |||||
</el-form-item> | |||||
<el-form-item label="空间矢量" prop="theGeom"> | |||||
<el-input v-model="form.theGeom" type="textarea" :autosize="{ minRows: 2, maxRows: 3}" :maxlength="100" show-word-limit placeholder="请输入内容" /> | |||||
</el-form-item> | |||||
<el-form-item label="标识码" prop="BSM"> | |||||
<el-input-number v-model="form.BSM" placeholder="请输入标识码" controls-position="right" /> | |||||
</el-form-item> | |||||
<el-form-item label="要素代码" prop="YSDM"> | |||||
<el-input v-model="form.YSDM" placeholder="请输入要素代码" show-word-limit :maxlength="6"/> | |||||
</el-form-item> | |||||
<el-form-item label="fid" prop="fid"> | |||||
<el-input-number v-model="form.fid" placeholder="请输入fid" controls-position="right" /> | |||||
</el-form-item> | |||||
<el-form-item label="部门级联代码" prop="importCode"> | |||||
<el-input v-model="form.importCode" placeholder="请输入部门级联代码" show-word-limit :maxlength="20"/> | |||||
</el-form-item> | |||||
</el-form> | |||||
<div slot="footer" class="dialog-footer"> | |||||
<el-button type="primary" @click="submitForm">确 定</el-button> | |||||
<el-button @click="cancel">取 消</el-button> | |||||
</div> | |||||
</el-dialog> | |||||
</div> | |||||
</template> | |||||
<script> | |||||
import { listCjqy, getCjqy, delCjqy, addCjqy, updateCjqy, printCjqy } from "@/api/business/cjqy" | |||||
import { getToken } from "@/utils/auth" | |||||
export default { | |||||
name: "Cjqy", | |||||
data() { | |||||
return { | |||||
// 遮罩层 | |||||
loading: true, | |||||
// 导出遮罩层 | |||||
exportLoading: false, | |||||
// 选中数组 | |||||
ids: [], | |||||
// 非单个禁用 | |||||
single: true, | |||||
// 非多个禁用 | |||||
multiple: true, | |||||
// 显示搜索条件 | |||||
showSearch: true, | |||||
// 总条数 | |||||
total: 0, | |||||
// 村级区域表格数据 | |||||
cjqyList: [], | |||||
// 弹出层标题 | |||||
title: "", | |||||
// 是否显示弹出层 | |||||
open: false, | |||||
// 详情组件列数 | |||||
descColumn: 2, | |||||
// 详情组件Label所占百分比, 最大={100 / descColumn}. 内容所占百分比={100 / descColumn - descLabelWidth} | |||||
descLabelWidth: 15, | |||||
// 对话框显示只读的详情 | |||||
viewOpen: false, | |||||
// 项目路径 | |||||
baseRoutingUrl: process.env.VUE_APP_BASE_API, | |||||
// 查询参数 | |||||
queryParams: { | |||||
pageNum: 1, | |||||
pageSize: 10, | |||||
// 查询排序 | |||||
//orderByColumn: "id", | |||||
//isAsc: "desc", | |||||
// 翻译字典 | |||||
//toTranslateDict: "1", | |||||
CJQYDM: null, | |||||
importCode: null | |||||
}, | |||||
// 表单参数 | |||||
form: {}, | |||||
// 表单校验 | |||||
rules: { | |||||
CJQYMC: [ | |||||
{ required: true, message: "区划名称不能为空", trigger: "blur" } | |||||
], | |||||
theGeom: [ | |||||
{ required: true, message: "空间矢量不能为空", trigger: "blur" } | |||||
], | |||||
importCode: [ | |||||
{ required: true, message: "部门级联代码不能为空", trigger: "blur" } | |||||
] | |||||
}, | |||||
// EXCEL导入 | |||||
upload: { | |||||
// 是否显示弹出层(用户导入) | |||||
open: false, | |||||
// 弹出层标题(用户导入) | |||||
title: "", | |||||
// 是否禁用上传 | |||||
isUploading: false, | |||||
// 是否更新已经存在的用户数据 | |||||
updateSupport: 0, | |||||
// 设置上传的请求头部 | |||||
headers: { Authorization: "Bearer " + getToken() }, | |||||
// 上传的地址 | |||||
url: process.env.VUE_APP_BASE_API + "/business/cjqy/importData" | |||||
}, | |||||
} | |||||
}, | |||||
created() { | |||||
this.getList() | |||||
}, | |||||
methods: { | |||||
/** 查询村级区域列表 */ | |||||
getList() { | |||||
this.loading = true | |||||
listCjqy(this.queryParams).then(response => { | |||||
this.cjqyList = response.rows | |||||
this.total = response.total | |||||
this.loading = false | |||||
}) | |||||
}, | |||||
// 取消按钮 | |||||
cancel() { | |||||
this.open = false | |||||
this.reset() | |||||
}, | |||||
cancelDetail() { | |||||
this.viewOpen = false | |||||
}, | |||||
// 表单重置 | |||||
reset() { | |||||
this.form = { | |||||
CJQYDM: null, | |||||
CJQYMC: null, | |||||
theGeom: null, | |||||
BSM: null, | |||||
YSDM: null, | |||||
fid: null, | |||||
importCode: null | |||||
} | |||||
this.resetForm("form") | |||||
}, | |||||
/** 搜索按钮操作 */ | |||||
handleQuery() { | |||||
this.queryParams.pageNum = 1 | |||||
this.getList() | |||||
}, | |||||
/** 重置按钮操作 */ | |||||
resetQuery() { | |||||
this.resetForm("queryForm") | |||||
this.handleQuery() | |||||
}, | |||||
// 多选框选中数据 | |||||
handleSelectionChange(selection) { | |||||
this.ids = selection.map(item => item.CJQYDM) | |||||
this.single = selection.length!==1 | |||||
this.multiple = !selection.length | |||||
}, | |||||
/** 新增按钮操作 */ | |||||
handleAdd() { | |||||
this.reset() | |||||
this.open = true | |||||
this.title = "添加村级区域" | |||||
}, | |||||
/** 修改按钮操作 */ | |||||
handleUpdate(row) { | |||||
this.reset() | |||||
const CJQYDM = row.CJQYDM || this.ids | |||||
getCjqy(CJQYDM).then(response => { | |||||
this.form = response.data | |||||
this.open = true | |||||
this.title = "修改村级区域" | |||||
}) | |||||
}, | |||||
/** 查看按钮操作 */ | |||||
handleLook(row) { | |||||
const CJQYDM = row.CJQYDM || this.ids | |||||
getCjqy(CJQYDM).then(response => { | |||||
this.form = response.data; | |||||
this.viewOpen = true; | |||||
this.title = "查看村级区域"; | |||||
}); | |||||
}, | |||||
/** 提交按钮 */ | |||||
submitForm() { | |||||
this.$refs["form"].validate(valid => { | |||||
if (valid) { | |||||
if (this.form.CJQYDM != null) { | |||||
updateCjqy(this.form).then(response => { | |||||
this.$modal.msgSuccess("修改成功") | |||||
this.open = false | |||||
this.getList() | |||||
}) | |||||
} else { | |||||
addCjqy(this.form).then(response => { | |||||
this.$modal.msgSuccess("新增成功") | |||||
this.open = false | |||||
this.getList() | |||||
}) | |||||
} | |||||
} | |||||
}) | |||||
}, | |||||
/** 删除按钮操作 */ | |||||
handleDelete(row) { | |||||
const CJQYDMs = row.CJQYDM || this.ids | |||||
this.$modal.confirm('是否确认删除村级区域编号为"' + CJQYDMs + '"的数据项?').then(function() { | |||||
return delCjqy(CJQYDMs) | |||||
}).then(() => { | |||||
this.getList() | |||||
this.$modal.msgSuccess("删除成功") | |||||
}).catch(() => {}) | |||||
}, | |||||
/** 导出按钮操作 */ | |||||
handleExport() { | |||||
this.download('business/cjqy/export', { | |||||
...this.queryParams | |||||
}, `村级区域_${new Date().getTime()}.xlsx`) | |||||
}, | |||||
/** 打印表单 */ | |||||
doPrint() { | |||||
const originalTitle = document.title; | |||||
try { | |||||
document.title = this.title || '打印详情'; | |||||
const printElement = document.getElementById('printDetail'); | |||||
const printFrame = document.createElement('iframe'); | |||||
printFrame.style.position = 'absolute'; | |||||
printFrame.style.width = '0'; | |||||
printFrame.style.height = '0'; | |||||
printFrame.style.border = 'none'; | |||||
printFrame.style.left = '-9999px'; | |||||
printFrame.onload = function() { | |||||
try { | |||||
const frameDoc = printFrame.contentDocument || printFrame.contentWindow.document; | |||||
const contentClone = printElement.cloneNode(true); | |||||
const style = document.createElement('style'); | |||||
style.innerHTML = ` | |||||
@page { | |||||
size: auto; | |||||
margin: 10mm; | |||||
} | |||||
body { | |||||
font-family: Arial, sans-serif; | |||||
line-height: 1.5; | |||||
margin: 0; | |||||
padding: 0; | |||||
} | |||||
.el-descriptions { | |||||
width: 100% !important; | |||||
} | |||||
.el-descriptions-item__label { | |||||
width: ${this.descLabelWidth}% !important; | |||||
} | |||||
.el-descriptions-item__content { | |||||
width: ${(100 / this.descColumn) - this.descLabelWidth}% !important; | |||||
} | |||||
/* 确保图片在打印时显示完整 */ | |||||
img, .el-image { | |||||
max-width: 100% !important; | |||||
height: auto !important; | |||||
} | |||||
`; | |||||
frameDoc.head.appendChild(style); | |||||
frameDoc.body.appendChild(contentClone); | |||||
setTimeout(() => { | |||||
printFrame.contentWindow.focus(); | |||||
printFrame.contentWindow.print(); | |||||
setTimeout(() => { | |||||
document.body.removeChild(printFrame); | |||||
document.title = originalTitle; | |||||
}, 1000); | |||||
}, 500); | |||||
} catch (e) { | |||||
document.body.removeChild(printFrame); | |||||
document.title = originalTitle; | |||||
this.$message.error('打印过程中发生错误'); | |||||
} | |||||
}; | |||||
document.body.appendChild(printFrame); | |||||
} catch (e) { | |||||
document.title = originalTitle; | |||||
this.$message.error('打印过程中发生错误'); | |||||
} | |||||
}, | |||||
/** 打印按钮操作 */ | |||||
handlePrint() { | |||||
printCjqy(this.queryParams).then(response => {}) | |||||
}, | |||||
/* 导入EXCEL组件 */ | |||||
handleImport() { | |||||
this.upload.title = "村级区域导入" | |||||
this.upload.open = true | |||||
}, | |||||
/** 下载模板操作 */ | |||||
importTemplate() { | |||||
this.download('business/cjqy/importTemplate', { | |||||
}, `cjqy_template.xlsx`) | |||||
}, | |||||
// 文件上传中处理 | |||||
handleFileUploadProgress(event, file, fileList) { | |||||
this.upload.isUploading = true | |||||
}, | |||||
// 文件上传成功处理 | |||||
handleFileSuccess(response, file, fileList) { | |||||
this.upload.open = false | |||||
this.upload.isUploading = false | |||||
this.$refs.upload.clearFiles() | |||||
this.$alert("<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" + response.msg + "</div>", "导入结果", { dangerouslyUseHTMLString: true }) | |||||
this.getList() | |||||
}, | |||||
// 提交上传文件 | |||||
submitFileForm() { | |||||
this.$refs.upload.submit() | |||||
}, | |||||
} | |||||
} | |||||
</script> |
@@ -0,0 +1,465 @@ | |||||
<template> | |||||
<div class="app-container"> | |||||
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px"> | |||||
<el-form-item label="文件格式" prop="fileType"> | |||||
<el-select v-model="queryParams.fileType" placeholder="请选择文件格式" clearable> | |||||
<el-option v-for="dict in dict.type.file_type" :key="dict.value" :label="dict.label" :value="dict.value"/> | |||||
</el-select> | |||||
</el-form-item> | |||||
<el-form-item label="坐标系" prop="coordinateSystem"> | |||||
<el-select v-model="queryParams.coordinateSystem" placeholder="请选择坐标系" clearable> | |||||
<el-option v-for="dict in dict.type.coordinate_system" :key="dict.value" :label="dict.label" :value="dict.value"/> | |||||
</el-select> | |||||
</el-form-item> | |||||
<el-form-item label="任务状态" prop="taskStatus"> | |||||
<el-select v-model="queryParams.taskStatus" placeholder="请选择任务状态" clearable> | |||||
<el-option v-for="dict in dict.type.task_status" :key="dict.value" :label="dict.label" :value="dict.value"/> | |||||
</el-select> | |||||
</el-form-item> | |||||
<el-form-item> | |||||
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button> | |||||
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button> | |||||
</el-form-item> | |||||
</el-form> | |||||
<el-row :gutter="10" class="mb8"> | |||||
<el-col :span="1.5"> | |||||
<el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd" v-hasPermi="['business:export:add']">新增</el-button> | |||||
</el-col> | |||||
<!-- | |||||
<el-col :span="1.5"> | |||||
<el-button type="success" plain icon="el-icon-edit" size="mini" :disabled="single" @click="handleUpdate" v-hasPermi="['business:export:edit']">修改</el-button> | |||||
</el-col> | |||||
<el-col :span="1.5"> | |||||
<el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleDelete" v-hasPermi="['business:export:remove']">删除</el-button> | |||||
</el-col> | |||||
--> | |||||
<el-col :span="1.5"> | |||||
<el-button type="success" plain icon="el-icon-upload2" size="mini" @click="handleImport" v-hasPermi="['business:export:import']">导入</el-button> | |||||
</el-col> | |||||
<el-col :span="1.5"> | |||||
<el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport" v-hasPermi="['business:export:export']">导出</el-button> | |||||
</el-col> | |||||
<el-col :span="1.5"> | |||||
<el-button type="info" plain icon="el-icon-printer" size="mini" @click="handlePrint()" v-hasPermi="['business:export:print']">打印</el-button> | |||||
</el-col> | |||||
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar> | |||||
</el-row> | |||||
<!-- 数据列表 列属性 min-width="60" show-overflow-tooltip @selection-change="handleSelectionChange" --> | |||||
<el-table v-loading="loading" :data="exportList" border> | |||||
<!--<el-table-column type="selection" width="55" align="center" />--> | |||||
<el-table-column label="id" align="center" prop="id" min-width="60"/> | |||||
<el-table-column label="行政区划名称" align="center" prop="deptName" min-width="120"/> | |||||
<el-table-column label="行政区划代码" align="center" prop="orgCode" min-width="150"/> | |||||
<el-table-column label="文件格式" align="center" prop="fileType"> | |||||
<template slot-scope="scope"> | |||||
<dict-tag :options="dict.type.file_type" :value="scope.row.fileType"/> | |||||
</template> | |||||
</el-table-column> | |||||
<el-table-column label="坐标系" align="center" prop="coordinateSystem"> | |||||
<template slot-scope="scope"> | |||||
<dict-tag :options="dict.type.coordinate_system" :value="scope.row.coordinateSystem"/> | |||||
</template> | |||||
</el-table-column> | |||||
<el-table-column label="文件路径" align="center" prop="fileUrl" min-width="100" show-overflow-tooltip/> | |||||
<el-table-column label="任务状态" align="center" prop="taskStatus"> | |||||
<template slot-scope="scope"> | |||||
<dict-tag :options="dict.type.task_status" :value="scope.row.taskStatus"/> | |||||
</template> | |||||
</el-table-column> | |||||
<el-table-column label="操作" align="center" class-name="small-padding fixed-width" min-width="300"> | |||||
<template slot-scope="scope"> | |||||
<el-button size="mini" type="text" icon="el-icon-view" @click="handleLook(scope.row)" v-hasPermi="['business:export:query']">查看</el-button> | |||||
<el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)" v-hasPermi="['business:export:edit']">修改</el-button> | |||||
<el-button size="mini" type="text" icon="el-icon-video-play" @click="handleDo(scope.row)" v-hasPermi="['business:export:do']" v-if="scope.row.taskStatus == '1'">执行</el-button> | |||||
<el-button size="mini" type="text" icon="el-icon-download" @click="handleDown(scope.row)" v-hasPermi="['business:export:down']" v-if="scope.row.taskStatus == '3'">下载</el-button> | |||||
<el-dropdown size="mini" v-hasPermi="['business:export:remove']"> | |||||
<el-button size="mini" type="text" icon="el-icon-d-arrow-right">更多</el-button> | |||||
<el-dropdown-menu slot="dropdown" style="padding: 5px"> | |||||
<el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)" v-hasPermi="['business:export:remove']">删除 </el-button> | |||||
</el-dropdown-menu> | |||||
</el-dropdown> | |||||
</template> | |||||
</el-table-column> | |||||
</el-table> | |||||
<!-- 分页插件 --> | |||||
<pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList"/> | |||||
<!-- 导入EXCEL组件 --> | |||||
<el-dialog :title="upload.title" :visible.sync="upload.open" width="400px" append-to-body> | |||||
<el-upload ref="upload" :limit="1" accept=".xlsx, .xls" :headers="upload.headers" :action="upload.url + '?updateSupport=' + upload.updateSupport" :disabled="upload.isUploading" :on-progress="handleFileUploadProgress" :on-success="handleFileSuccess" :auto-upload="false" drag> | |||||
<i class="el-icon-upload"></i> | |||||
<div class="el-upload__text">将文件拖到此处,或<em>点击上传</em></div> | |||||
<div class="el-upload__tip text-left" slot="tip"> | |||||
<div class="el-upload__tip" slot="tip"> | |||||
<el-checkbox v-model="upload.updateSupport" /> 是否更新已经存在的导出任务 | |||||
</div> | |||||
<p style="color: red">1、仅允许导入xls、xlsx格式文件;</p> | |||||
<el-link type="primary" :underline="false" style="font-size: 12px; vertical-align: baseline" @click="importTemplate">下载模板</el-link> | |||||
</div> | |||||
</el-upload> | |||||
<div slot="footer" class="dialog-footer"> | |||||
<el-button type="primary" @click="submitFileForm">确 定</el-button> | |||||
<el-button @click="upload.open = false">取 消</el-button> | |||||
</div> | |||||
</el-dialog> | |||||
<!-- 查看导出任务对话框 --> | |||||
<el-dialog :title="title" :visible.sync="viewOpen" width="800px" append-to-body> | |||||
<el-descriptions id="printDetail" :column="descColumn" border :labelStyle="{width: `${descLabelWidth}%`}" :contentStyle="{width: `${(100 / descColumn) - descLabelWidth}%`}"> | |||||
<el-descriptions-item label="行政区划名称">{{ form.deptName }}</el-descriptions-item> | |||||
<el-descriptions-item label="行政区划代码">{{ form.orgCode }}</el-descriptions-item> | |||||
<el-descriptions-item label="文件格式">{{ form.fileType }}</el-descriptions-item> | |||||
<el-descriptions-item label="坐标系">{{ form.coordinateSystem }}</el-descriptions-item> | |||||
<el-descriptions-item label="文件路径">{{ form.fileUrl }}</el-descriptions-item> | |||||
<el-descriptions-item label="任务状态">{{ form.taskStatus }}</el-descriptions-item> | |||||
</el-descriptions> | |||||
<!-- 弹框操作按钮 --> | |||||
<div slot="footer" class="dialog-footer"> | |||||
<el-button @click="doPrint">打 印</el-button> | |||||
<el-button @click="cancelDetail">关 闭</el-button> | |||||
</div> | |||||
</el-dialog> | |||||
<!-- 添加或修改导出任务对话框 --> | |||||
<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body> | |||||
<el-form ref="form" :model="form" :rules="rules" label-width="80px"> | |||||
<el-form-item label="行政区划id" prop="deptId"> | |||||
<el-input-number v-model="form.deptId" placeholder="请输入行政区划id" controls-position="right" /> | |||||
</el-form-item> | |||||
<el-form-item label="行政区划名称" prop="deptName"> | |||||
<el-input v-model="form.deptName" placeholder="请输入行政区划名称" show-word-limit :maxlength="30"/> | |||||
</el-form-item> | |||||
<el-form-item label="行政区划代码" prop="orgCode"> | |||||
<el-input v-model="form.orgCode" placeholder="请输入行政区划代码" show-word-limit :maxlength="20"/> | |||||
</el-form-item> | |||||
<el-form-item label="文件格式" prop="fileType"> | |||||
<el-select v-model="form.fileType" placeholder="请选择文件格式"> | |||||
<el-option v-for="dict in dict.type.file_type" :key="dict.value" :label="dict.label" :value="dict.value"></el-option> | |||||
</el-select> | |||||
</el-form-item> | |||||
<el-form-item label="坐标系" prop="coordinateSystem"> | |||||
<el-select v-model="form.coordinateSystem" placeholder="请选择坐标系"> | |||||
<el-option v-for="dict in dict.type.coordinate_system" :key="dict.value" :label="dict.label" :value="dict.value"></el-option> | |||||
</el-select> | |||||
</el-form-item> | |||||
</el-form> | |||||
<div slot="footer" class="dialog-footer"> | |||||
<el-button type="primary" @click="submitForm">确 定</el-button> | |||||
<el-button @click="cancel">取 消</el-button> | |||||
</div> | |||||
</el-dialog> | |||||
</div> | |||||
</template> | |||||
<script> | |||||
import { listExport, getExport, delExport, addExport, updateExport, printExport } from "@/api/business/export" | |||||
import { getToken } from "@/utils/auth" | |||||
export default { | |||||
name: "Export", | |||||
dicts: ['task_status', 'file_type', 'coordinate_system'], | |||||
data() { | |||||
return { | |||||
// 遮罩层 | |||||
loading: true, | |||||
// 导出遮罩层 | |||||
exportLoading: false, | |||||
// 选中数组 | |||||
ids: [], | |||||
// 非单个禁用 | |||||
single: true, | |||||
// 非多个禁用 | |||||
multiple: true, | |||||
// 显示搜索条件 | |||||
showSearch: true, | |||||
// 总条数 | |||||
total: 0, | |||||
// 导出任务表格数据 | |||||
exportList: [], | |||||
// 弹出层标题 | |||||
title: "", | |||||
// 是否显示弹出层 | |||||
open: false, | |||||
// 详情组件列数 | |||||
descColumn: 2, | |||||
// 详情组件Label所占百分比, 最大={100 / descColumn}. 内容所占百分比={100 / descColumn - descLabelWidth} | |||||
descLabelWidth: 15, | |||||
// 对话框显示只读的详情 | |||||
viewOpen: false, | |||||
// 项目路径 | |||||
baseRoutingUrl: process.env.VUE_APP_BASE_API, | |||||
// 查询参数 | |||||
queryParams: { | |||||
pageNum: 1, | |||||
pageSize: 10, | |||||
// 查询排序 | |||||
//orderByColumn: "id", | |||||
//isAsc: "desc", | |||||
// 翻译字典 | |||||
//toTranslateDict: "1", | |||||
deptId: null, | |||||
deptName: null, | |||||
orgCode: null, | |||||
fileType: null, | |||||
coordinateSystem: null, | |||||
fileUrl: null, | |||||
taskStatus: null, | |||||
}, | |||||
// 表单参数 | |||||
form: {}, | |||||
// 表单校验 | |||||
rules: { | |||||
deptId: [ | |||||
{ required: true, message: "行政区划id不能为空", trigger: "blur" } | |||||
], | |||||
deptName: [ | |||||
{ required: true, message: "行政区划名称不能为空", trigger: "blur" } | |||||
], | |||||
orgCode: [ | |||||
{ required: true, message: "行政区划代码不能为空", trigger: "blur" } | |||||
], | |||||
fileType: [ | |||||
{ required: true, message: "文件格式不能为空", trigger: "change" } | |||||
], | |||||
coordinateSystem: [ | |||||
{ required: true, message: "坐标系不能为空", trigger: "change" } | |||||
], | |||||
taskStatus: [ | |||||
{ required: true, message: "任务状态不能为空", trigger: "change" } | |||||
], | |||||
}, | |||||
// EXCEL导入 | |||||
upload: { | |||||
// 是否显示弹出层(用户导入) | |||||
open: false, | |||||
// 弹出层标题(用户导入) | |||||
title: "", | |||||
// 是否禁用上传 | |||||
isUploading: false, | |||||
// 是否更新已经存在的用户数据 | |||||
updateSupport: 0, | |||||
// 设置上传的请求头部 | |||||
headers: { Authorization: "Bearer " + getToken() }, | |||||
// 上传的地址 | |||||
url: process.env.VUE_APP_BASE_API + "/business/export/importData" | |||||
}, | |||||
} | |||||
}, | |||||
created() { | |||||
this.getList() | |||||
}, | |||||
methods: { | |||||
/** 查询导出任务列表 */ | |||||
getList() { | |||||
this.loading = true | |||||
listExport(this.queryParams).then(response => { | |||||
this.exportList = response.rows | |||||
this.total = response.total | |||||
this.loading = false | |||||
}) | |||||
}, | |||||
// 取消按钮 | |||||
cancel() { | |||||
this.open = false | |||||
this.reset() | |||||
}, | |||||
cancelDetail() { | |||||
this.viewOpen = false | |||||
}, | |||||
// 表单重置 | |||||
reset() { | |||||
this.form = { | |||||
id: null, | |||||
deptId: null, | |||||
deptName: null, | |||||
orgCode: null, | |||||
fileType: null, | |||||
coordinateSystem: null, | |||||
fileUrl: null, | |||||
taskStatus: '1', | |||||
} | |||||
this.resetForm("form") | |||||
}, | |||||
/** 搜索按钮操作 */ | |||||
handleQuery() { | |||||
this.queryParams.pageNum = 1 | |||||
this.getList() | |||||
}, | |||||
/** 重置按钮操作 */ | |||||
resetQuery() { | |||||
this.resetForm("queryForm") | |||||
this.handleQuery() | |||||
}, | |||||
// 多选框选中数据 | |||||
handleSelectionChange(selection) { | |||||
this.ids = selection.map(item => item.id) | |||||
this.single = selection.length!==1 | |||||
this.multiple = !selection.length | |||||
}, | |||||
/** 新增按钮操作 */ | |||||
handleAdd() { | |||||
this.reset() | |||||
this.open = true | |||||
this.title = "添加导出任务" | |||||
}, | |||||
/** 修改按钮操作 */ | |||||
handleUpdate(row) { | |||||
this.reset() | |||||
const id = row.id || this.ids | |||||
getExport(id).then(response => { | |||||
this.form = response.data | |||||
this.open = true | |||||
this.title = "修改导出任务" | |||||
}) | |||||
}, | |||||
/** 查看按钮操作 */ | |||||
handleLook(row) { | |||||
const id = row.id || this.ids | |||||
getExport(id).then(response => { | |||||
this.form = response.data; | |||||
this.viewOpen = true; | |||||
this.title = "查看导出任务"; | |||||
}); | |||||
}, | |||||
/** 提交按钮 */ | |||||
submitForm() { | |||||
this.$refs["form"].validate(valid => { | |||||
if (valid) { | |||||
if (this.form.id != null) { | |||||
updateExport(this.form).then(response => { | |||||
this.$modal.msgSuccess("修改成功") | |||||
this.open = false | |||||
this.getList() | |||||
}) | |||||
} else { | |||||
addExport(this.form).then(response => { | |||||
this.$modal.msgSuccess("新增成功") | |||||
this.open = false | |||||
this.getList() | |||||
}) | |||||
} | |||||
} | |||||
}) | |||||
}, | |||||
/** 删除按钮操作 */ | |||||
handleDelete(row) { | |||||
const ids = row.id || this.ids | |||||
this.$modal.confirm('是否确认删除导出任务编号为"' + ids + '"的数据项?').then(function() { | |||||
return delExport(ids) | |||||
}).then(() => { | |||||
this.getList() | |||||
this.$modal.msgSuccess("删除成功") | |||||
}).catch(() => {}) | |||||
}, | |||||
/** 导出按钮操作 */ | |||||
handleExport() { | |||||
this.download('business/export/export', { | |||||
...this.queryParams | |||||
}, `导出任务_${new Date().getTime()}.xlsx`) | |||||
}, | |||||
/** 打印表单 */ | |||||
doPrint() { | |||||
const originalTitle = document.title; | |||||
try { | |||||
document.title = this.title || '打印详情'; | |||||
const printElement = document.getElementById('printDetail'); | |||||
const printFrame = document.createElement('iframe'); | |||||
printFrame.style.position = 'absolute'; | |||||
printFrame.style.width = '0'; | |||||
printFrame.style.height = '0'; | |||||
printFrame.style.border = 'none'; | |||||
printFrame.style.left = '-9999px'; | |||||
printFrame.onload = function() { | |||||
try { | |||||
const frameDoc = printFrame.contentDocument || printFrame.contentWindow.document; | |||||
const contentClone = printElement.cloneNode(true); | |||||
const style = document.createElement('style'); | |||||
style.innerHTML = ` | |||||
@page { | |||||
size: auto; | |||||
margin: 10mm; | |||||
} | |||||
body { | |||||
font-family: Arial, sans-serif; | |||||
line-height: 1.5; | |||||
margin: 0; | |||||
padding: 0; | |||||
} | |||||
.el-descriptions { | |||||
width: 100% !important; | |||||
} | |||||
.el-descriptions-item__label { | |||||
width: ${this.descLabelWidth}% !important; | |||||
} | |||||
.el-descriptions-item__content { | |||||
width: ${(100 / this.descColumn) - this.descLabelWidth}% !important; | |||||
} | |||||
/* 确保图片在打印时显示完整 */ | |||||
img, .el-image { | |||||
max-width: 100% !important; | |||||
height: auto !important; | |||||
} | |||||
`; | |||||
frameDoc.head.appendChild(style); | |||||
frameDoc.body.appendChild(contentClone); | |||||
setTimeout(() => { | |||||
printFrame.contentWindow.focus(); | |||||
printFrame.contentWindow.print(); | |||||
setTimeout(() => { | |||||
document.body.removeChild(printFrame); | |||||
document.title = originalTitle; | |||||
}, 1000); | |||||
}, 500); | |||||
} catch (e) { | |||||
document.body.removeChild(printFrame); | |||||
document.title = originalTitle; | |||||
this.$message.error('打印过程中发生错误'); | |||||
} | |||||
}; | |||||
document.body.appendChild(printFrame); | |||||
} catch (e) { | |||||
document.title = originalTitle; | |||||
this.$message.error('打印过程中发生错误'); | |||||
} | |||||
}, | |||||
/** 打印按钮操作 */ | |||||
handlePrint() { | |||||
printExport(this.queryParams).then(response => {}) | |||||
}, | |||||
/* 导入EXCEL组件 */ | |||||
handleImport() { | |||||
this.upload.title = "导出任务导入" | |||||
this.upload.open = true | |||||
}, | |||||
/** 下载模板操作 */ | |||||
importTemplate() { | |||||
this.download('business/export/importTemplate', { | |||||
}, `export_template.xlsx`) | |||||
}, | |||||
// 文件上传中处理 | |||||
handleFileUploadProgress(event, file, fileList) { | |||||
this.upload.isUploading = true | |||||
}, | |||||
// 文件上传成功处理 | |||||
handleFileSuccess(response, file, fileList) { | |||||
this.upload.open = false | |||||
this.upload.isUploading = false | |||||
this.$refs.upload.clearFiles() | |||||
this.$alert("<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" + response.msg + "</div>", "导入结果", { dangerouslyUseHTMLString: true }) | |||||
this.getList() | |||||
}, | |||||
// 提交上传文件 | |||||
submitFileForm() { | |||||
this.$refs.upload.submit() | |||||
}, | |||||
} | |||||
} | |||||
</script> |
@@ -0,0 +1,513 @@ | |||||
<template> | |||||
<div class="app-container"> | |||||
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px"> | |||||
<el-form-item label="文件格式" prop="fileType"> | |||||
<el-select v-model="queryParams.fileType" placeholder="请选择文件格式" clearable> | |||||
<el-option v-for="dict in dict.type.file_type" :key="dict.value" :label="dict.label" :value="dict.value"/> | |||||
</el-select> | |||||
</el-form-item> | |||||
<el-form-item label="导入方式" prop="importType"> | |||||
<el-select v-model="queryParams.importType" placeholder="请选择导入方式" clearable> | |||||
<el-option v-for="dict in dict.type.import_type" :key="dict.value" :label="dict.label" :value="dict.value"/> | |||||
</el-select> | |||||
</el-form-item> | |||||
<el-form-item label="坐标系" prop="coordinateSystem"> | |||||
<el-select v-model="queryParams.coordinateSystem" placeholder="请选择坐标系" clearable> | |||||
<el-option v-for="dict in dict.type.coordinate_system" :key="dict.value" :label="dict.label" :value="dict.value"/> | |||||
</el-select> | |||||
</el-form-item> | |||||
<el-form-item label="任务状态" prop="taskStatus"> | |||||
<el-select v-model="queryParams.taskStatus" placeholder="请选择任务状态" clearable> | |||||
<el-option v-for="dict in dict.type.task_status" :key="dict.value" :label="dict.label" :value="dict.value"/> | |||||
</el-select> | |||||
</el-form-item> | |||||
<el-form-item> | |||||
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button> | |||||
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button> | |||||
</el-form-item> | |||||
</el-form> | |||||
<el-row :gutter="10" class="mb8"> | |||||
<el-col :span="1.5"> | |||||
<el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd" v-hasPermi="['business:import:add']">新增</el-button> | |||||
</el-col> | |||||
<!-- | |||||
<el-col :span="1.5"> | |||||
<el-button type="success" plain icon="el-icon-edit" size="mini" :disabled="single" @click="handleUpdate" v-hasPermi="['business:import:edit']">修改</el-button> | |||||
</el-col> | |||||
<el-col :span="1.5"> | |||||
<el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleDelete" v-hasPermi="['business:import:remove']">删除</el-button> | |||||
</el-col> | |||||
--> | |||||
<el-col :span="1.5"> | |||||
<el-button type="success" plain icon="el-icon-upload2" size="mini" @click="handleImport" v-hasPermi="['business:import:import']">导入</el-button> | |||||
</el-col> | |||||
<el-col :span="1.5"> | |||||
<el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport" v-hasPermi="['business:import:export']">导出</el-button> | |||||
</el-col> | |||||
<el-col :span="1.5"> | |||||
<el-button type="info" plain icon="el-icon-printer" size="mini" @click="handlePrint()" v-hasPermi="['business:import:print']">打印</el-button> | |||||
</el-col> | |||||
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar> | |||||
</el-row> | |||||
<!-- 数据列表 列属性 min-width="60" show-overflow-tooltip @selection-change="handleSelectionChange" --> | |||||
<el-table v-loading="loading" :data="importList" border> | |||||
<!--<el-table-column type="selection" width="55" align="center" />--> | |||||
<el-table-column label="id" align="center" prop="id" min-width="60"/> | |||||
<el-table-column label="行政区划名称" align="center" prop="deptName" min-width="120"/> | |||||
<el-table-column label="行政区划代码" align="center" prop="orgCode" min-width="150"/> | |||||
<el-table-column label="文件格式" align="center" prop="fileType"> | |||||
<template slot-scope="scope"> | |||||
<dict-tag :options="dict.type.file_type" :value="scope.row.fileType"/> | |||||
</template> | |||||
</el-table-column> | |||||
<el-table-column label="导入方式" align="center" prop="importType"> | |||||
<template slot-scope="scope"> | |||||
<dict-tag :options="dict.type.import_type" :value="scope.row.importType"/> | |||||
</template> | |||||
</el-table-column> | |||||
<el-table-column label="坐标系" align="center" prop="coordinateSystem"> | |||||
<template slot-scope="scope"> | |||||
<dict-tag :options="dict.type.coordinate_system" :value="scope.row.coordinateSystem"/> | |||||
</template> | |||||
</el-table-column> | |||||
<!--<el-table-column label="文件路径" align="center" prop="fileUrl" min-width="300" show-overflow-tooltip/>--> | |||||
<el-table-column label="文件路径" header-align="center" align="left" prop="fileUrl" > | |||||
<template slot-scope="scope"> | |||||
<div v-if="!!scope.row.fileUrl"><el-tooltip effect="light" :content="item.substr(item.lastIndexOf('/') + 1)" placement="bottom" v-for="(item, index) in scope.row.fileUrl.split(',')" :key="index"><a :href="baseRoutingUrll + item" target="_blank" style="height: 32px; width: 32px; margin: 2px; display: inline-block; text-align: center;"><img :src="getFileIcon(item)" style="height: 100%;"/></a></el-tooltip></div> | |||||
</template> | |||||
</el-table-column> | |||||
<el-table-column label="任务状态" align="center" prop="taskStatus"> | |||||
<template slot-scope="scope"> | |||||
<dict-tag :options="dict.type.task_status" :value="scope.row.taskStatus"/> | |||||
</template> | |||||
</el-table-column> | |||||
<el-table-column label="操作" align="center" class-name="small-padding fixed-width" min-width="300"> | |||||
<template slot-scope="scope"> | |||||
<el-button size="mini" type="text" icon="el-icon-view" @click="handleLook(scope.row)" v-hasPermi="['business:import:query']">查看</el-button> | |||||
<el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)" v-hasPermi="['business:import:edit']">修改</el-button> | |||||
<el-button size="mini" type="text" icon="el-icon-video-play" @click="handleDo(scope.row)" v-hasPermi="['business:import:do']" v-if="scope.row.taskStatus == '1'">执行</el-button> | |||||
<el-dropdown size="mini" v-hasPermi="['business:import:remove']"> | |||||
<el-button size="mini" type="text" icon="el-icon-d-arrow-right">更多</el-button> | |||||
<el-dropdown-menu slot="dropdown" style="padding: 5px"> | |||||
<el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)" v-hasPermi="['business:import:remove']">删除</el-button> | |||||
</el-dropdown-menu> | |||||
</el-dropdown> | |||||
</template> | |||||
</el-table-column> | |||||
</el-table> | |||||
<!-- 分页插件 --> | |||||
<pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList"/> | |||||
<!-- 导入EXCEL组件 --> | |||||
<el-dialog :title="upload.title" :visible.sync="upload.open" width="400px" append-to-body> | |||||
<el-upload ref="upload" :limit="1" accept=".xlsx, .xls" :headers="upload.headers" :action="upload.url + '?updateSupport=' + upload.updateSupport" :disabled="upload.isUploading" :on-progress="handleFileUploadProgress" :on-success="handleFileSuccess" :auto-upload="false" drag> | |||||
<i class="el-icon-upload"></i> | |||||
<div class="el-upload__text">将文件拖到此处,或<em>点击上传</em></div> | |||||
<div class="el-upload__tip text-left" slot="tip"> | |||||
<div class="el-upload__tip" slot="tip"> | |||||
<el-checkbox v-model="upload.updateSupport" /> 是否更新已经存在的导入任务 | |||||
</div> | |||||
<p style="color: red">1、仅允许导入xls、xlsx格式文件;</p> | |||||
<el-link type="primary" :underline="false" style="font-size: 12px; vertical-align: baseline" @click="importTemplate">下载模板</el-link> | |||||
</div> | |||||
</el-upload> | |||||
<div slot="footer" class="dialog-footer"> | |||||
<el-button type="primary" @click="submitFileForm">确 定</el-button> | |||||
<el-button @click="upload.open = false">取 消</el-button> | |||||
</div> | |||||
</el-dialog> | |||||
<!-- 查看导入任务对话框 --> | |||||
<el-dialog :title="title" :visible.sync="viewOpen" width="800px" append-to-body> | |||||
<el-descriptions id="printDetail" :column="descColumn" border :labelStyle="{width: `${descLabelWidth}%`}" :contentStyle="{width: `${(100 / descColumn) - descLabelWidth}%`}"> | |||||
<el-descriptions-item label="行政区划名称">{{ form.deptName }}</el-descriptions-item> | |||||
<el-descriptions-item label="行政区划代码">{{ form.orgCode }}</el-descriptions-item> | |||||
<el-descriptions-item label="文件格式">{{ form.fileType }}</el-descriptions-item> | |||||
<el-descriptions-item label="导入方式">{{ form.importType }}</el-descriptions-item> | |||||
<el-descriptions-item label="坐标系">{{ form.coordinateSystem }}</el-descriptions-item> | |||||
<el-descriptions-item label="文件路径">{{ form.fileUrl }}</el-descriptions-item> | |||||
<el-descriptions-item label="任务状态">{{ form.taskStatus }}</el-descriptions-item> | |||||
</el-descriptions> | |||||
<!-- 弹框操作按钮 --> | |||||
<div slot="footer" class="dialog-footer"> | |||||
<el-button @click="doPrint">打 印</el-button> | |||||
<el-button @click="cancelDetail">关 闭</el-button> | |||||
</div> | |||||
</el-dialog> | |||||
<!-- 添加或修改导入任务对话框 --> | |||||
<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body> | |||||
<el-form ref="form" :model="form" :rules="rules" label-width="80px"> | |||||
<el-form-item label="行政区划id" prop="deptId"> | |||||
<el-input-number v-model="form.deptId" placeholder="请输入行政区划id" controls-position="right" /> | |||||
</el-form-item> | |||||
<el-form-item label="行政区划名称" prop="deptName"> | |||||
<el-input v-model="form.deptName" placeholder="请输入行政区划名称" show-word-limit :maxlength="30"/> | |||||
</el-form-item> | |||||
<el-form-item label="行政区划代码" prop="orgCode"> | |||||
<el-input v-model="form.orgCode" placeholder="请输入行政区划代码" show-word-limit :maxlength="20"/> | |||||
</el-form-item> | |||||
<el-form-item label="文件格式" prop="fileType"> | |||||
<el-select v-model="form.fileType" placeholder="请选择文件格式"> | |||||
<el-option v-for="dict in dict.type.file_type" :key="dict.value" :label="dict.label" :value="dict.value"></el-option> | |||||
</el-select> | |||||
</el-form-item> | |||||
<el-form-item label="导入方式" prop="importType"> | |||||
<el-select v-model="form.importType" placeholder="请选择导入方式"> | |||||
<el-option v-for="dict in dict.type.import_type" :key="dict.value" :label="dict.label" :value="dict.value"></el-option> | |||||
</el-select> | |||||
</el-form-item> | |||||
<el-form-item label="坐标系" prop="coordinateSystem"> | |||||
<el-select v-model="form.coordinateSystem" placeholder="请选择坐标系"> | |||||
<el-option v-for="dict in dict.type.coordinate_system" :key="dict.value" :label="dict.label" :value="dict.value"></el-option> | |||||
</el-select> | |||||
</el-form-item> | |||||
<el-form-item label="文件路径" prop="fileUrl"> | |||||
<file-upload v-model="form.fileUrl"/> | |||||
</el-form-item> | |||||
</el-form> | |||||
<div slot="footer" class="dialog-footer"> | |||||
<el-button type="primary" @click="submitForm">确 定</el-button> | |||||
<el-button @click="cancel">取 消</el-button> | |||||
</div> | |||||
</el-dialog> | |||||
</div> | |||||
</template> | |||||
<script> | |||||
import { listImport, getImport, delImport, addImport, updateImport, printImport } from "@/api/business/import" | |||||
import { getToken } from "@/utils/auth" | |||||
export default { | |||||
name: "Import", | |||||
dicts: ['task_status', 'file_type', 'coordinate_system', 'import_type'], | |||||
data() { | |||||
return { | |||||
// 遮罩层 | |||||
loading: true, | |||||
// 导出遮罩层 | |||||
exportLoading: false, | |||||
// 选中数组 | |||||
ids: [], | |||||
// 非单个禁用 | |||||
single: true, | |||||
// 非多个禁用 | |||||
multiple: true, | |||||
// 显示搜索条件 | |||||
showSearch: true, | |||||
// 总条数 | |||||
total: 0, | |||||
// 导入任务表格数据 | |||||
importList: [], | |||||
// 弹出层标题 | |||||
title: "", | |||||
// 是否显示弹出层 | |||||
open: false, | |||||
// 详情组件列数 | |||||
descColumn: 2, | |||||
// 详情组件Label所占百分比, 最大={100 / descColumn}. 内容所占百分比={100 / descColumn - descLabelWidth} | |||||
descLabelWidth: 15, | |||||
// 对话框显示只读的详情 | |||||
viewOpen: false, | |||||
// 项目路径 | |||||
baseRoutingUrl: process.env.VUE_APP_BASE_API, | |||||
// 查询参数 | |||||
queryParams: { | |||||
pageNum: 1, | |||||
pageSize: 10, | |||||
// 查询排序 | |||||
//orderByColumn: "id", | |||||
//isAsc: "desc", | |||||
// 翻译字典 | |||||
//toTranslateDict: "1", | |||||
deptId: null, | |||||
deptName: null, | |||||
orgCode: null, | |||||
fileType: null, | |||||
importType: null, | |||||
coordinateSystem: null, | |||||
fileUrl: null, | |||||
taskStatus: null, | |||||
}, | |||||
// 表单参数 | |||||
form: {}, | |||||
// 表单校验 | |||||
rules: { | |||||
deptId: [ | |||||
{ required: true, message: "行政区划id不能为空", trigger: "blur" } | |||||
], | |||||
deptName: [ | |||||
{ required: true, message: "行政区划名称不能为空", trigger: "blur" } | |||||
], | |||||
orgCode: [ | |||||
{ required: true, message: "行政区划代码不能为空", trigger: "blur" } | |||||
], | |||||
fileType: [ | |||||
{ required: true, message: "文件格式不能为空", trigger: "change" } | |||||
], | |||||
importType: [ | |||||
{ required: true, message: "导入方式不能为空", trigger: "change" } | |||||
], | |||||
coordinateSystem: [ | |||||
{ required: true, message: "坐标系不能为空", trigger: "change" } | |||||
], | |||||
fileUrl: [ | |||||
{ required: true, message: "文件路径不能为空", trigger: "blur" } | |||||
], | |||||
taskStatus: [ | |||||
{ required: true, message: "任务状态不能为空", trigger: "change" } | |||||
], | |||||
}, | |||||
// EXCEL导入 | |||||
upload: { | |||||
// 是否显示弹出层(用户导入) | |||||
open: false, | |||||
// 弹出层标题(用户导入) | |||||
title: "", | |||||
// 是否禁用上传 | |||||
isUploading: false, | |||||
// 是否更新已经存在的用户数据 | |||||
updateSupport: 0, | |||||
// 设置上传的请求头部 | |||||
headers: { Authorization: "Bearer " + getToken() }, | |||||
// 上传的地址 | |||||
url: process.env.VUE_APP_BASE_API + "/business/import/importData" | |||||
}, | |||||
} | |||||
}, | |||||
created() { | |||||
this.getList() | |||||
}, | |||||
methods: { | |||||
/** 查询导入任务列表 */ | |||||
getList() { | |||||
this.loading = true | |||||
listImport(this.queryParams).then(response => { | |||||
this.importList = response.rows | |||||
this.total = response.total | |||||
this.loading = false | |||||
}) | |||||
}, | |||||
// 取消按钮 | |||||
cancel() { | |||||
this.open = false | |||||
this.reset() | |||||
}, | |||||
cancelDetail() { | |||||
this.viewOpen = false | |||||
}, | |||||
// 表单重置 | |||||
reset() { | |||||
this.form = { | |||||
id: null, | |||||
deptId: null, | |||||
deptName: null, | |||||
orgCode: null, | |||||
fileType: null, | |||||
importType: null, | |||||
coordinateSystem: null, | |||||
fileUrl: null, | |||||
taskStatus: '1', | |||||
} | |||||
this.resetForm("form") | |||||
}, | |||||
/** 搜索按钮操作 */ | |||||
handleQuery() { | |||||
this.queryParams.pageNum = 1 | |||||
this.getList() | |||||
}, | |||||
/** 重置按钮操作 */ | |||||
resetQuery() { | |||||
this.resetForm("queryForm") | |||||
this.handleQuery() | |||||
}, | |||||
// 多选框选中数据 | |||||
handleSelectionChange(selection) { | |||||
this.ids = selection.map(item => item.id) | |||||
this.single = selection.length!==1 | |||||
this.multiple = !selection.length | |||||
}, | |||||
/** 新增按钮操作 */ | |||||
handleAdd() { | |||||
this.reset() | |||||
this.open = true | |||||
this.title = "添加导入任务" | |||||
}, | |||||
/** 修改按钮操作 */ | |||||
handleUpdate(row) { | |||||
this.reset() | |||||
const id = row.id || this.ids | |||||
getImport(id).then(response => { | |||||
this.form = response.data | |||||
this.open = true | |||||
this.title = "修改导入任务" | |||||
}) | |||||
}, | |||||
/** 查看按钮操作 */ | |||||
handleLook(row) { | |||||
const id = row.id || this.ids | |||||
getImport(id).then(response => { | |||||
this.form = response.data; | |||||
this.viewOpen = true; | |||||
this.title = "查看导入任务"; | |||||
}); | |||||
}, | |||||
/** 提交按钮 */ | |||||
submitForm() { | |||||
this.$refs["form"].validate(valid => { | |||||
if (valid) { | |||||
if (this.form.id != null) { | |||||
updateImport(this.form).then(response => { | |||||
this.$modal.msgSuccess("修改成功") | |||||
this.open = false | |||||
this.getList() | |||||
}) | |||||
} else { | |||||
addImport(this.form).then(response => { | |||||
this.$modal.msgSuccess("新增成功") | |||||
this.open = false | |||||
this.getList() | |||||
}) | |||||
} | |||||
} | |||||
}) | |||||
}, | |||||
/** 删除按钮操作 */ | |||||
handleDelete(row) { | |||||
const ids = row.id || this.ids | |||||
this.$modal.confirm('是否确认删除导入任务编号为"' + ids + '"的数据项?').then(function() { | |||||
return delImport(ids) | |||||
}).then(() => { | |||||
this.getList() | |||||
this.$modal.msgSuccess("删除成功") | |||||
}).catch(() => {}) | |||||
}, | |||||
/** 导出按钮操作 */ | |||||
handleExport() { | |||||
this.download('business/import/export', { | |||||
...this.queryParams | |||||
}, `导入任务_${new Date().getTime()}.xlsx`) | |||||
}, | |||||
/** 打印表单 */ | |||||
doPrint() { | |||||
const originalTitle = document.title; | |||||
try { | |||||
document.title = this.title || '打印详情'; | |||||
const printElement = document.getElementById('printDetail'); | |||||
const printFrame = document.createElement('iframe'); | |||||
printFrame.style.position = 'absolute'; | |||||
printFrame.style.width = '0'; | |||||
printFrame.style.height = '0'; | |||||
printFrame.style.border = 'none'; | |||||
printFrame.style.left = '-9999px'; | |||||
printFrame.onload = function() { | |||||
try { | |||||
const frameDoc = printFrame.contentDocument || printFrame.contentWindow.document; | |||||
const contentClone = printElement.cloneNode(true); | |||||
const style = document.createElement('style'); | |||||
style.innerHTML = ` | |||||
@page { | |||||
size: auto; | |||||
margin: 10mm; | |||||
} | |||||
body { | |||||
font-family: Arial, sans-serif; | |||||
line-height: 1.5; | |||||
margin: 0; | |||||
padding: 0; | |||||
} | |||||
.el-descriptions { | |||||
width: 100% !important; | |||||
} | |||||
.el-descriptions-item__label { | |||||
width: ${this.descLabelWidth}% !important; | |||||
} | |||||
.el-descriptions-item__content { | |||||
width: ${(100 / this.descColumn) - this.descLabelWidth}% !important; | |||||
} | |||||
/* 确保图片在打印时显示完整 */ | |||||
img, .el-image { | |||||
max-width: 100% !important; | |||||
height: auto !important; | |||||
} | |||||
`; | |||||
frameDoc.head.appendChild(style); | |||||
frameDoc.body.appendChild(contentClone); | |||||
setTimeout(() => { | |||||
printFrame.contentWindow.focus(); | |||||
printFrame.contentWindow.print(); | |||||
setTimeout(() => { | |||||
document.body.removeChild(printFrame); | |||||
document.title = originalTitle; | |||||
}, 1000); | |||||
}, 500); | |||||
} catch (e) { | |||||
document.body.removeChild(printFrame); | |||||
document.title = originalTitle; | |||||
this.$message.error('打印过程中发生错误'); | |||||
} | |||||
}; | |||||
document.body.appendChild(printFrame); | |||||
} catch (e) { | |||||
document.title = originalTitle; | |||||
this.$message.error('打印过程中发生错误'); | |||||
} | |||||
}, | |||||
/** 打印按钮操作 */ | |||||
handlePrint() { | |||||
printImport(this.queryParams).then(response => {}) | |||||
}, | |||||
/* 导入EXCEL组件 */ | |||||
handleImport() { | |||||
this.upload.title = "导入任务导入" | |||||
this.upload.open = true | |||||
}, | |||||
/** 下载模板操作 */ | |||||
importTemplate() { | |||||
this.download('business/import/importTemplate', { | |||||
}, `import_template.xlsx`) | |||||
}, | |||||
// 文件上传中处理 | |||||
handleFileUploadProgress(event, file, fileList) { | |||||
this.upload.isUploading = true | |||||
}, | |||||
// 文件上传成功处理 | |||||
handleFileSuccess(response, file, fileList) { | |||||
this.upload.open = false | |||||
this.upload.isUploading = false | |||||
this.$refs.upload.clearFiles() | |||||
this.$alert("<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" + response.msg + "</div>", "导入结果", { dangerouslyUseHTMLString: true }) | |||||
this.getList() | |||||
}, | |||||
// 提交上传文件 | |||||
submitFileForm() { | |||||
this.$refs.upload.submit() | |||||
}, | |||||
getFileIcon(file) { | |||||
if(!file) return ''; | |||||
switch(file.toLowerCase().substr(file.lastIndexOf('.') + 1)) { | |||||
case 'jpg': case 'png': case 'jpeg': case 'bmp': case 'gif': | |||||
return this.baseRoutingUrll + file; | |||||
case 'doc': case 'docx': | |||||
return require('@/assets/images/icon_word.jpg'); | |||||
case 'xls': case 'xlsx': | |||||
return require('@/assets/images/icon_excel.jpg'); | |||||
case 'pdf': | |||||
return require('@/assets/images/icon_pdf.jpg'); | |||||
case 'zip': case 'rar': case '7z': case 'bz2': case 'gz': | |||||
return require('@/assets/images/icon_zip.jpg'); | |||||
default: | |||||
return require('@/assets/images/icon_rest.jpg'); | |||||
} | |||||
}, | |||||
} | |||||
} | |||||
</script> |
@@ -0,0 +1,416 @@ | |||||
<template> | |||||
<div class="app-container"> | |||||
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px"> | |||||
<el-form-item label="区划代码" prop="XJQYDM"> | |||||
<el-input v-model="queryParams.XJQYDM" placeholder="请输入区划代码" clearable @keyup.enter.native="handleQuery"/> | |||||
</el-form-item> | |||||
<el-form-item label="级联代码" prop="importCode"> | |||||
<el-input v-model="queryParams.importCode" placeholder="请输入部门级联代码" clearable @keyup.enter.native="handleQuery"/> | |||||
</el-form-item> | |||||
<el-form-item> | |||||
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button> | |||||
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button> | |||||
</el-form-item> | |||||
</el-form> | |||||
<el-row :gutter="10" class="mb8"> | |||||
<el-col :span="1.5"> | |||||
<el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd" v-hasPermi="['business:xjqy:add']">新增</el-button> | |||||
</el-col> | |||||
<!-- | |||||
<el-col :span="1.5"> | |||||
<el-button type="success" plain icon="el-icon-edit" size="mini" :disabled="single" @click="handleUpdate" v-hasPermi="['business:xjqy:edit']">修改</el-button> | |||||
</el-col> | |||||
<el-col :span="1.5"> | |||||
<el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleDelete" v-hasPermi="['business:xjqy:remove']">删除</el-button> | |||||
</el-col> | |||||
--> | |||||
<el-col :span="1.5"> | |||||
<el-button type="success" plain icon="el-icon-upload2" size="mini" @click="handleImport" v-hasPermi="['business:xjqy:import']">导入</el-button> | |||||
</el-col> | |||||
<el-col :span="1.5"> | |||||
<el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport" v-hasPermi="['business:xjqy:export']">导出</el-button> | |||||
</el-col> | |||||
<el-col :span="1.5"> | |||||
<el-button type="info" plain icon="el-icon-printer" size="mini" @click="handlePrint()" v-hasPermi="['business:xjqy:print']">打印</el-button> | |||||
</el-col> | |||||
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar> | |||||
</el-row> | |||||
<!-- 数据列表 列属性 min-width="60" show-overflow-tooltip @selection-change="handleSelectionChange" --> | |||||
<el-table v-loading="loading" :data="xjqyList" border> | |||||
<!--<el-table-column type="selection" width="55" align="center" />--> | |||||
<el-table-column label="区划代码" align="center" prop="XJQYDM" /> | |||||
<el-table-column label="区划名称" align="center" prop="XJQYMC" /> | |||||
<el-table-column label="标识码" align="center" prop="BSM" /> | |||||
<el-table-column label="要素代码" align="center" prop="YSDM" /> | |||||
<el-table-column label="部门级联代码" align="center" prop="importCode" /> | |||||
<el-table-column label="操作" align="center" class-name="small-padding fixed-width"> | |||||
<template slot-scope="scope"> | |||||
<el-button size="mini" type="text" icon="el-icon-view" @click="handleLook(scope.row)" v-hasPermi="['business:xjqy:query']">查看</el-button> | |||||
<el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)" v-hasPermi="['business:xjqy:edit']">修改</el-button> | |||||
<el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)" v-hasPermi="['business:xjqy:remove']">删除</el-button> | |||||
</template> | |||||
</el-table-column> | |||||
</el-table> | |||||
<!-- 分页插件 --> | |||||
<pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList"/> | |||||
<!-- 导入EXCEL组件 --> | |||||
<el-dialog :title="upload.title" :visible.sync="upload.open" width="400px" append-to-body> | |||||
<el-upload ref="upload" :limit="1" accept=".xlsx, .xls" :headers="upload.headers" :action="upload.url + '?updateSupport=' + upload.updateSupport" :disabled="upload.isUploading" :on-progress="handleFileUploadProgress" :on-success="handleFileSuccess" :auto-upload="false" drag> | |||||
<i class="el-icon-upload"></i> | |||||
<div class="el-upload__text">将文件拖到此处,或<em>点击上传</em></div> | |||||
<div class="el-upload__tip text-left" slot="tip"> | |||||
<div class="el-upload__tip" slot="tip"> | |||||
<el-checkbox v-model="upload.updateSupport" /> 是否更新已经存在的乡级区域 | |||||
</div> | |||||
<p style="color: red">1、仅允许导入xls、xlsx格式文件;</p> | |||||
<el-link type="primary" :underline="false" style="font-size: 12px; vertical-align: baseline" @click="importTemplate">下载模板</el-link> | |||||
</div> | |||||
</el-upload> | |||||
<div slot="footer" class="dialog-footer"> | |||||
<el-button type="primary" @click="submitFileForm">确 定</el-button> | |||||
<el-button @click="upload.open = false">取 消</el-button> | |||||
</div> | |||||
</el-dialog> | |||||
<!-- 查看乡级区域对话框 --> | |||||
<el-dialog :title="title" :visible.sync="viewOpen" width="800px" append-to-body> | |||||
<el-descriptions id="printDetail" :column="descColumn" border :labelStyle="{width: `${descLabelWidth}%`}" :contentStyle="{width: `${(100 / descColumn) - descLabelWidth}%`}"> | |||||
<el-descriptions-item label="区划名称">{{ form.XJQYMC }}</el-descriptions-item> | |||||
<el-descriptions-item label="空间矢量">{{ form.theGeom }}</el-descriptions-item> | |||||
<el-descriptions-item label="标识码">{{ form.BSM }}</el-descriptions-item> | |||||
<el-descriptions-item label="要素代码">{{ form.YSDM }}</el-descriptions-item> | |||||
<el-descriptions-item label="fid">{{ form.fid }}</el-descriptions-item> | |||||
<el-descriptions-item label="部门级联代码">{{ form.importCode }}</el-descriptions-item> | |||||
</el-descriptions> | |||||
<!-- 弹框操作按钮 --> | |||||
<div slot="footer" class="dialog-footer"> | |||||
<el-button @click="doPrint">打 印</el-button> | |||||
<el-button @click="cancelDetail">关 闭</el-button> | |||||
</div> | |||||
</el-dialog> | |||||
<!-- 添加或修改乡级区域对话框 --> | |||||
<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body> | |||||
<el-form ref="form" :model="form" :rules="rules" label-width="80px"> | |||||
<el-form-item label="区划名称" prop="XJQYMC"> | |||||
<el-input v-model="form.XJQYMC" placeholder="请输入区划名称" show-word-limit :maxlength="100"/> | |||||
</el-form-item> | |||||
<el-form-item label="空间矢量" prop="theGeom"> | |||||
<el-input v-model="form.theGeom" type="textarea" :autosize="{ minRows: 2, maxRows: 3}" :maxlength="100" show-word-limit placeholder="请输入内容" /> | |||||
</el-form-item> | |||||
<el-form-item label="标识码" prop="BSM"> | |||||
<el-input-number v-model="form.BSM" placeholder="请输入标识码" controls-position="right" /> | |||||
</el-form-item> | |||||
<el-form-item label="要素代码" prop="YSDM"> | |||||
<el-input v-model="form.YSDM" placeholder="请输入要素代码" show-word-limit :maxlength="6"/> | |||||
</el-form-item> | |||||
<el-form-item label="fid" prop="fid"> | |||||
<el-input-number v-model="form.fid" placeholder="请输入fid" controls-position="right" /> | |||||
</el-form-item> | |||||
<el-form-item label="部门级联代码" prop="importCode"> | |||||
<el-input v-model="form.importCode" placeholder="请输入部门级联代码" show-word-limit :maxlength="20"/> | |||||
</el-form-item> | |||||
</el-form> | |||||
<div slot="footer" class="dialog-footer"> | |||||
<el-button type="primary" @click="submitForm">确 定</el-button> | |||||
<el-button @click="cancel">取 消</el-button> | |||||
</div> | |||||
</el-dialog> | |||||
</div> | |||||
</template> | |||||
<script> | |||||
import { listXjqy, getXjqy, delXjqy, addXjqy, updateXjqy, printXjqy } from "@/api/business/xjqy" | |||||
import { getToken } from "@/utils/auth" | |||||
export default { | |||||
name: "Xjqy", | |||||
data() { | |||||
return { | |||||
// 遮罩层 | |||||
loading: true, | |||||
// 导出遮罩层 | |||||
exportLoading: false, | |||||
// 选中数组 | |||||
ids: [], | |||||
// 非单个禁用 | |||||
single: true, | |||||
// 非多个禁用 | |||||
multiple: true, | |||||
// 显示搜索条件 | |||||
showSearch: true, | |||||
// 总条数 | |||||
total: 0, | |||||
// 乡级区域表格数据 | |||||
xjqyList: [], | |||||
// 弹出层标题 | |||||
title: "", | |||||
// 是否显示弹出层 | |||||
open: false, | |||||
// 详情组件列数 | |||||
descColumn: 2, | |||||
// 详情组件Label所占百分比, 最大={100 / descColumn}. 内容所占百分比={100 / descColumn - descLabelWidth} | |||||
descLabelWidth: 15, | |||||
// 对话框显示只读的详情 | |||||
viewOpen: false, | |||||
// 项目路径 | |||||
baseRoutingUrl: process.env.VUE_APP_BASE_API, | |||||
// 查询参数 | |||||
queryParams: { | |||||
pageNum: 1, | |||||
pageSize: 10, | |||||
// 查询排序 | |||||
//orderByColumn: "id", | |||||
//isAsc: "desc", | |||||
// 翻译字典 | |||||
//toTranslateDict: "1", | |||||
XJQYDM: null, | |||||
importCode: null | |||||
}, | |||||
// 表单参数 | |||||
form: {}, | |||||
// 表单校验 | |||||
rules: { | |||||
XJQYMC: [ | |||||
{ required: true, message: "区划名称不能为空", trigger: "blur" } | |||||
], | |||||
theGeom: [ | |||||
{ required: true, message: "空间矢量不能为空", trigger: "blur" } | |||||
], | |||||
importCode: [ | |||||
{ required: true, message: "部门级联代码不能为空", trigger: "blur" } | |||||
] | |||||
}, | |||||
// EXCEL导入 | |||||
upload: { | |||||
// 是否显示弹出层(用户导入) | |||||
open: false, | |||||
// 弹出层标题(用户导入) | |||||
title: "", | |||||
// 是否禁用上传 | |||||
isUploading: false, | |||||
// 是否更新已经存在的用户数据 | |||||
updateSupport: 0, | |||||
// 设置上传的请求头部 | |||||
headers: { Authorization: "Bearer " + getToken() }, | |||||
// 上传的地址 | |||||
url: process.env.VUE_APP_BASE_API + "/business/xjqy/importData" | |||||
}, | |||||
} | |||||
}, | |||||
created() { | |||||
this.getList() | |||||
}, | |||||
methods: { | |||||
/** 查询乡级区域列表 */ | |||||
getList() { | |||||
this.loading = true | |||||
listXjqy(this.queryParams).then(response => { | |||||
this.xjqyList = response.rows | |||||
this.total = response.total | |||||
this.loading = false | |||||
}) | |||||
}, | |||||
// 取消按钮 | |||||
cancel() { | |||||
this.open = false | |||||
this.reset() | |||||
}, | |||||
cancelDetail() { | |||||
this.viewOpen = false | |||||
}, | |||||
// 表单重置 | |||||
reset() { | |||||
this.form = { | |||||
XJQYDM: null, | |||||
XJQYMC: null, | |||||
theGeom: null, | |||||
BSM: null, | |||||
YSDM: null, | |||||
fid: null, | |||||
importCode: null | |||||
} | |||||
this.resetForm("form") | |||||
}, | |||||
/** 搜索按钮操作 */ | |||||
handleQuery() { | |||||
this.queryParams.pageNum = 1 | |||||
this.getList() | |||||
}, | |||||
/** 重置按钮操作 */ | |||||
resetQuery() { | |||||
this.resetForm("queryForm") | |||||
this.handleQuery() | |||||
}, | |||||
// 多选框选中数据 | |||||
handleSelectionChange(selection) { | |||||
this.ids = selection.map(item => item.XJQYDM) | |||||
this.single = selection.length!==1 | |||||
this.multiple = !selection.length | |||||
}, | |||||
/** 新增按钮操作 */ | |||||
handleAdd() { | |||||
this.reset() | |||||
this.open = true | |||||
this.title = "添加乡级区域" | |||||
}, | |||||
/** 修改按钮操作 */ | |||||
handleUpdate(row) { | |||||
this.reset() | |||||
const XJQYDM = row.XJQYDM || this.ids | |||||
getXjqy(XJQYDM).then(response => { | |||||
this.form = response.data | |||||
this.open = true | |||||
this.title = "修改乡级区域" | |||||
}) | |||||
}, | |||||
/** 查看按钮操作 */ | |||||
handleLook(row) { | |||||
const XJQYDM = row.XJQYDM || this.ids | |||||
getXjqy(XJQYDM).then(response => { | |||||
this.form = response.data; | |||||
this.viewOpen = true; | |||||
this.title = "查看乡级区域"; | |||||
}); | |||||
}, | |||||
/** 提交按钮 */ | |||||
submitForm() { | |||||
this.$refs["form"].validate(valid => { | |||||
if (valid) { | |||||
if (this.form.XJQYDM != null) { | |||||
updateXjqy(this.form).then(response => { | |||||
this.$modal.msgSuccess("修改成功") | |||||
this.open = false | |||||
this.getList() | |||||
}) | |||||
} else { | |||||
addXjqy(this.form).then(response => { | |||||
this.$modal.msgSuccess("新增成功") | |||||
this.open = false | |||||
this.getList() | |||||
}) | |||||
} | |||||
} | |||||
}) | |||||
}, | |||||
/** 删除按钮操作 */ | |||||
handleDelete(row) { | |||||
const XJQYDMs = row.XJQYDM || this.ids | |||||
this.$modal.confirm('是否确认删除乡级区域编号为"' + XJQYDMs + '"的数据项?').then(function() { | |||||
return delXjqy(XJQYDMs) | |||||
}).then(() => { | |||||
this.getList() | |||||
this.$modal.msgSuccess("删除成功") | |||||
}).catch(() => {}) | |||||
}, | |||||
/** 导出按钮操作 */ | |||||
handleExport() { | |||||
this.download('business/xjqy/export', { | |||||
...this.queryParams | |||||
}, `乡级区域_${new Date().getTime()}.xlsx`) | |||||
}, | |||||
/** 打印表单 */ | |||||
doPrint() { | |||||
const originalTitle = document.title; | |||||
try { | |||||
document.title = this.title || '打印详情'; | |||||
const printElement = document.getElementById('printDetail'); | |||||
const printFrame = document.createElement('iframe'); | |||||
printFrame.style.position = 'absolute'; | |||||
printFrame.style.width = '0'; | |||||
printFrame.style.height = '0'; | |||||
printFrame.style.border = 'none'; | |||||
printFrame.style.left = '-9999px'; | |||||
printFrame.onload = function() { | |||||
try { | |||||
const frameDoc = printFrame.contentDocument || printFrame.contentWindow.document; | |||||
const contentClone = printElement.cloneNode(true); | |||||
const style = document.createElement('style'); | |||||
style.innerHTML = ` | |||||
@page { | |||||
size: auto; | |||||
margin: 10mm; | |||||
} | |||||
body { | |||||
font-family: Arial, sans-serif; | |||||
line-height: 1.5; | |||||
margin: 0; | |||||
padding: 0; | |||||
} | |||||
.el-descriptions { | |||||
width: 100% !important; | |||||
} | |||||
.el-descriptions-item__label { | |||||
width: ${this.descLabelWidth}% !important; | |||||
} | |||||
.el-descriptions-item__content { | |||||
width: ${(100 / this.descColumn) - this.descLabelWidth}% !important; | |||||
} | |||||
/* 确保图片在打印时显示完整 */ | |||||
img, .el-image { | |||||
max-width: 100% !important; | |||||
height: auto !important; | |||||
} | |||||
`; | |||||
frameDoc.head.appendChild(style); | |||||
frameDoc.body.appendChild(contentClone); | |||||
setTimeout(() => { | |||||
printFrame.contentWindow.focus(); | |||||
printFrame.contentWindow.print(); | |||||
setTimeout(() => { | |||||
document.body.removeChild(printFrame); | |||||
document.title = originalTitle; | |||||
}, 1000); | |||||
}, 500); | |||||
} catch (e) { | |||||
document.body.removeChild(printFrame); | |||||
document.title = originalTitle; | |||||
this.$message.error('打印过程中发生错误'); | |||||
} | |||||
}; | |||||
document.body.appendChild(printFrame); | |||||
} catch (e) { | |||||
document.title = originalTitle; | |||||
this.$message.error('打印过程中发生错误'); | |||||
} | |||||
}, | |||||
/** 打印按钮操作 */ | |||||
handlePrint() { | |||||
printXjqy(this.queryParams).then(response => {}) | |||||
}, | |||||
/* 导入EXCEL组件 */ | |||||
handleImport() { | |||||
this.upload.title = "乡级区域导入" | |||||
this.upload.open = true | |||||
}, | |||||
/** 下载模板操作 */ | |||||
importTemplate() { | |||||
this.download('business/xjqy/importTemplate', { | |||||
}, `xjqy_template.xlsx`) | |||||
}, | |||||
// 文件上传中处理 | |||||
handleFileUploadProgress(event, file, fileList) { | |||||
this.upload.isUploading = true | |||||
}, | |||||
// 文件上传成功处理 | |||||
handleFileSuccess(response, file, fileList) { | |||||
this.upload.open = false | |||||
this.upload.isUploading = false | |||||
this.$refs.upload.clearFiles() | |||||
this.$alert("<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" + response.msg + "</div>", "导入结果", { dangerouslyUseHTMLString: true }) | |||||
this.getList() | |||||
}, | |||||
// 提交上传文件 | |||||
submitFileForm() { | |||||
this.$refs.upload.submit() | |||||
}, | |||||
} | |||||
} | |||||
</script> |
@@ -0,0 +1,416 @@ | |||||
<template> | |||||
<div class="app-container"> | |||||
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px"> | |||||
<el-form-item label="区划代码" prop="XZQDM"> | |||||
<el-input v-model="queryParams.XZQDM" placeholder="请输入区划代码" clearable @keyup.enter.native="handleQuery"/> | |||||
</el-form-item> | |||||
<el-form-item label="级联代码" prop="importCode"> | |||||
<el-input v-model="queryParams.importCode" placeholder="请输入部门级联代码" clearable @keyup.enter.native="handleQuery"/> | |||||
</el-form-item> | |||||
<el-form-item> | |||||
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button> | |||||
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button> | |||||
</el-form-item> | |||||
</el-form> | |||||
<el-row :gutter="10" class="mb8"> | |||||
<el-col :span="1.5"> | |||||
<el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd" v-hasPermi="['business:xjxzq:add']">新增</el-button> | |||||
</el-col> | |||||
<!-- | |||||
<el-col :span="1.5"> | |||||
<el-button type="success" plain icon="el-icon-edit" size="mini" :disabled="single" @click="handleUpdate" v-hasPermi="['business:xjxzq:edit']">修改</el-button> | |||||
</el-col> | |||||
<el-col :span="1.5"> | |||||
<el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleDelete" v-hasPermi="['business:xjxzq:remove']">删除</el-button> | |||||
</el-col> | |||||
--> | |||||
<el-col :span="1.5"> | |||||
<el-button type="success" plain icon="el-icon-upload2" size="mini" @click="handleImport" v-hasPermi="['business:xjxzq:import']">导入</el-button> | |||||
</el-col> | |||||
<el-col :span="1.5"> | |||||
<el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport" v-hasPermi="['business:xjxzq:export']">导出</el-button> | |||||
</el-col> | |||||
<el-col :span="1.5"> | |||||
<el-button type="info" plain icon="el-icon-printer" size="mini" @click="handlePrint()" v-hasPermi="['business:xjxzq:print']">打印</el-button> | |||||
</el-col> | |||||
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar> | |||||
</el-row> | |||||
<!-- 数据列表 列属性 min-width="60" show-overflow-tooltip @selection-change="handleSelectionChange" --> | |||||
<el-table v-loading="loading" :data="xjxzqList" border> | |||||
<!--<el-table-column type="selection" width="55" align="center" />--> | |||||
<el-table-column label="区划代码" align="center" prop="XZQDM" /> | |||||
<el-table-column label="区划名称" align="center" prop="XZQMC" /> | |||||
<el-table-column label="标识码" align="center" prop="BSM" /> | |||||
<el-table-column label="要素代码" align="center" prop="YSDM" /> | |||||
<el-table-column label="部门级联代码" align="center" prop="importCode" /> | |||||
<el-table-column label="操作" align="center" class-name="small-padding fixed-width"> | |||||
<template slot-scope="scope"> | |||||
<el-button size="mini" type="text" icon="el-icon-view" @click="handleLook(scope.row)" v-hasPermi="['business:xjxzq:query']">查看</el-button> | |||||
<el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)" v-hasPermi="['business:xjxzq:edit']">修改</el-button> | |||||
<el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)" v-hasPermi="['business:xjxzq:remove']">删除</el-button> | |||||
</template> | |||||
</el-table-column> | |||||
</el-table> | |||||
<!-- 分页插件 --> | |||||
<pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList"/> | |||||
<!-- 导入EXCEL组件 --> | |||||
<el-dialog :title="upload.title" :visible.sync="upload.open" width="400px" append-to-body> | |||||
<el-upload ref="upload" :limit="1" accept=".xlsx, .xls" :headers="upload.headers" :action="upload.url + '?updateSupport=' + upload.updateSupport" :disabled="upload.isUploading" :on-progress="handleFileUploadProgress" :on-success="handleFileSuccess" :auto-upload="false" drag> | |||||
<i class="el-icon-upload"></i> | |||||
<div class="el-upload__text">将文件拖到此处,或<em>点击上传</em></div> | |||||
<div class="el-upload__tip text-left" slot="tip"> | |||||
<div class="el-upload__tip" slot="tip"> | |||||
<el-checkbox v-model="upload.updateSupport" /> 是否更新已经存在的县级区域 | |||||
</div> | |||||
<p style="color: red">1、仅允许导入xls、xlsx格式文件;</p> | |||||
<el-link type="primary" :underline="false" style="font-size: 12px; vertical-align: baseline" @click="importTemplate">下载模板</el-link> | |||||
</div> | |||||
</el-upload> | |||||
<div slot="footer" class="dialog-footer"> | |||||
<el-button type="primary" @click="submitFileForm">确 定</el-button> | |||||
<el-button @click="upload.open = false">取 消</el-button> | |||||
</div> | |||||
</el-dialog> | |||||
<!-- 查看县级区域对话框 --> | |||||
<el-dialog :title="title" :visible.sync="viewOpen" width="800px" append-to-body> | |||||
<el-descriptions id="printDetail" :column="descColumn" border :labelStyle="{width: `${descLabelWidth}%`}" :contentStyle="{width: `${(100 / descColumn) - descLabelWidth}%`}"> | |||||
<el-descriptions-item label="区划名称">{{ form.XZQMC }}</el-descriptions-item> | |||||
<el-descriptions-item label="空间矢量">{{ form.theGeom }}</el-descriptions-item> | |||||
<el-descriptions-item label="标识码">{{ form.BSM }}</el-descriptions-item> | |||||
<el-descriptions-item label="要素代码">{{ form.YSDM }}</el-descriptions-item> | |||||
<el-descriptions-item label="fid">{{ form.fid }}</el-descriptions-item> | |||||
<el-descriptions-item label="部门级联代码">{{ form.importCode }}</el-descriptions-item> | |||||
</el-descriptions> | |||||
<!-- 弹框操作按钮 --> | |||||
<div slot="footer" class="dialog-footer"> | |||||
<el-button @click="doPrint">打 印</el-button> | |||||
<el-button @click="cancelDetail">关 闭</el-button> | |||||
</div> | |||||
</el-dialog> | |||||
<!-- 添加或修改县级区域对话框 --> | |||||
<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body> | |||||
<el-form ref="form" :model="form" :rules="rules" label-width="80px"> | |||||
<el-form-item label="区划名称" prop="XZQMC"> | |||||
<el-input v-model="form.XZQMC" placeholder="请输入区划名称" show-word-limit :maxlength="100"/> | |||||
</el-form-item> | |||||
<el-form-item label="空间矢量" prop="theGeom"> | |||||
<el-input v-model="form.theGeom" type="textarea" :autosize="{ minRows: 2, maxRows: 3}" :maxlength="100" show-word-limit placeholder="请输入内容" /> | |||||
</el-form-item> | |||||
<el-form-item label="标识码" prop="BSM"> | |||||
<el-input-number v-model="form.BSM" placeholder="请输入标识码" controls-position="right" /> | |||||
</el-form-item> | |||||
<el-form-item label="要素代码" prop="YSDM"> | |||||
<el-input v-model="form.YSDM" placeholder="请输入要素代码" show-word-limit :maxlength="6"/> | |||||
</el-form-item> | |||||
<el-form-item label="fid" prop="fid"> | |||||
<el-input-number v-model="form.fid" placeholder="请输入fid" controls-position="right" /> | |||||
</el-form-item> | |||||
<el-form-item label="部门级联代码" prop="importCode"> | |||||
<el-input v-model="form.importCode" placeholder="请输入部门级联代码" show-word-limit :maxlength="20"/> | |||||
</el-form-item> | |||||
</el-form> | |||||
<div slot="footer" class="dialog-footer"> | |||||
<el-button type="primary" @click="submitForm">确 定</el-button> | |||||
<el-button @click="cancel">取 消</el-button> | |||||
</div> | |||||
</el-dialog> | |||||
</div> | |||||
</template> | |||||
<script> | |||||
import { listXjxzq, getXjxzq, delXjxzq, addXjxzq, updateXjxzq, printXjxzq } from "@/api/business/xjxzq" | |||||
import { getToken } from "@/utils/auth" | |||||
export default { | |||||
name: "Xjxzq", | |||||
data() { | |||||
return { | |||||
// 遮罩层 | |||||
loading: true, | |||||
// 导出遮罩层 | |||||
exportLoading: false, | |||||
// 选中数组 | |||||
ids: [], | |||||
// 非单个禁用 | |||||
single: true, | |||||
// 非多个禁用 | |||||
multiple: true, | |||||
// 显示搜索条件 | |||||
showSearch: true, | |||||
// 总条数 | |||||
total: 0, | |||||
// 县级区域表格数据 | |||||
xjxzqList: [], | |||||
// 弹出层标题 | |||||
title: "", | |||||
// 是否显示弹出层 | |||||
open: false, | |||||
// 详情组件列数 | |||||
descColumn: 2, | |||||
// 详情组件Label所占百分比, 最大={100 / descColumn}. 内容所占百分比={100 / descColumn - descLabelWidth} | |||||
descLabelWidth: 15, | |||||
// 对话框显示只读的详情 | |||||
viewOpen: false, | |||||
// 项目路径 | |||||
baseRoutingUrl: process.env.VUE_APP_BASE_API, | |||||
// 查询参数 | |||||
queryParams: { | |||||
pageNum: 1, | |||||
pageSize: 10, | |||||
// 查询排序 | |||||
//orderByColumn: "id", | |||||
//isAsc: "desc", | |||||
// 翻译字典 | |||||
//toTranslateDict: "1", | |||||
XZQDM: null, | |||||
importCode: null | |||||
}, | |||||
// 表单参数 | |||||
form: {}, | |||||
// 表单校验 | |||||
rules: { | |||||
XZQMC: [ | |||||
{ required: true, message: "区划名称不能为空", trigger: "blur" } | |||||
], | |||||
theGeom: [ | |||||
{ required: true, message: "空间矢量不能为空", trigger: "blur" } | |||||
], | |||||
importCode: [ | |||||
{ required: true, message: "部门级联代码不能为空", trigger: "blur" } | |||||
] | |||||
}, | |||||
// EXCEL导入 | |||||
upload: { | |||||
// 是否显示弹出层(用户导入) | |||||
open: false, | |||||
// 弹出层标题(用户导入) | |||||
title: "", | |||||
// 是否禁用上传 | |||||
isUploading: false, | |||||
// 是否更新已经存在的用户数据 | |||||
updateSupport: 0, | |||||
// 设置上传的请求头部 | |||||
headers: { Authorization: "Bearer " + getToken() }, | |||||
// 上传的地址 | |||||
url: process.env.VUE_APP_BASE_API + "/business/xjxzq/importData" | |||||
}, | |||||
} | |||||
}, | |||||
created() { | |||||
this.getList() | |||||
}, | |||||
methods: { | |||||
/** 查询县级区域列表 */ | |||||
getList() { | |||||
this.loading = true | |||||
listXjxzq(this.queryParams).then(response => { | |||||
this.xjxzqList = response.rows | |||||
this.total = response.total | |||||
this.loading = false | |||||
}) | |||||
}, | |||||
// 取消按钮 | |||||
cancel() { | |||||
this.open = false | |||||
this.reset() | |||||
}, | |||||
cancelDetail() { | |||||
this.viewOpen = false | |||||
}, | |||||
// 表单重置 | |||||
reset() { | |||||
this.form = { | |||||
XZQDM: null, | |||||
XZQMC: null, | |||||
theGeom: null, | |||||
BSM: null, | |||||
YSDM: null, | |||||
fid: null, | |||||
importCode: null | |||||
} | |||||
this.resetForm("form") | |||||
}, | |||||
/** 搜索按钮操作 */ | |||||
handleQuery() { | |||||
this.queryParams.pageNum = 1 | |||||
this.getList() | |||||
}, | |||||
/** 重置按钮操作 */ | |||||
resetQuery() { | |||||
this.resetForm("queryForm") | |||||
this.handleQuery() | |||||
}, | |||||
// 多选框选中数据 | |||||
handleSelectionChange(selection) { | |||||
this.ids = selection.map(item => item.XZQDM) | |||||
this.single = selection.length!==1 | |||||
this.multiple = !selection.length | |||||
}, | |||||
/** 新增按钮操作 */ | |||||
handleAdd() { | |||||
this.reset() | |||||
this.open = true | |||||
this.title = "添加县级区域" | |||||
}, | |||||
/** 修改按钮操作 */ | |||||
handleUpdate(row) { | |||||
this.reset() | |||||
const XZQDM = row.XZQDM || this.ids | |||||
getXjxzq(XZQDM).then(response => { | |||||
this.form = response.data | |||||
this.open = true | |||||
this.title = "修改县级区域" | |||||
}) | |||||
}, | |||||
/** 查看按钮操作 */ | |||||
handleLook(row) { | |||||
const XZQDM = row.XZQDM || this.ids | |||||
getXjxzq(XZQDM).then(response => { | |||||
this.form = response.data; | |||||
this.viewOpen = true; | |||||
this.title = "查看县级区域"; | |||||
}); | |||||
}, | |||||
/** 提交按钮 */ | |||||
submitForm() { | |||||
this.$refs["form"].validate(valid => { | |||||
if (valid) { | |||||
if (this.form.XZQDM != null) { | |||||
updateXjxzq(this.form).then(response => { | |||||
this.$modal.msgSuccess("修改成功") | |||||
this.open = false | |||||
this.getList() | |||||
}) | |||||
} else { | |||||
addXjxzq(this.form).then(response => { | |||||
this.$modal.msgSuccess("新增成功") | |||||
this.open = false | |||||
this.getList() | |||||
}) | |||||
} | |||||
} | |||||
}) | |||||
}, | |||||
/** 删除按钮操作 */ | |||||
handleDelete(row) { | |||||
const XZQDMs = row.XZQDM || this.ids | |||||
this.$modal.confirm('是否确认删除县级区域编号为"' + XZQDMs + '"的数据项?').then(function() { | |||||
return delXjxzq(XZQDMs) | |||||
}).then(() => { | |||||
this.getList() | |||||
this.$modal.msgSuccess("删除成功") | |||||
}).catch(() => {}) | |||||
}, | |||||
/** 导出按钮操作 */ | |||||
handleExport() { | |||||
this.download('business/xjxzq/export', { | |||||
...this.queryParams | |||||
}, `县级区域_${new Date().getTime()}.xlsx`) | |||||
}, | |||||
/** 打印表单 */ | |||||
doPrint() { | |||||
const originalTitle = document.title; | |||||
try { | |||||
document.title = this.title || '打印详情'; | |||||
const printElement = document.getElementById('printDetail'); | |||||
const printFrame = document.createElement('iframe'); | |||||
printFrame.style.position = 'absolute'; | |||||
printFrame.style.width = '0'; | |||||
printFrame.style.height = '0'; | |||||
printFrame.style.border = 'none'; | |||||
printFrame.style.left = '-9999px'; | |||||
printFrame.onload = function() { | |||||
try { | |||||
const frameDoc = printFrame.contentDocument || printFrame.contentWindow.document; | |||||
const contentClone = printElement.cloneNode(true); | |||||
const style = document.createElement('style'); | |||||
style.innerHTML = ` | |||||
@page { | |||||
size: auto; | |||||
margin: 10mm; | |||||
} | |||||
body { | |||||
font-family: Arial, sans-serif; | |||||
line-height: 1.5; | |||||
margin: 0; | |||||
padding: 0; | |||||
} | |||||
.el-descriptions { | |||||
width: 100% !important; | |||||
} | |||||
.el-descriptions-item__label { | |||||
width: ${this.descLabelWidth}% !important; | |||||
} | |||||
.el-descriptions-item__content { | |||||
width: ${(100 / this.descColumn) - this.descLabelWidth}% !important; | |||||
} | |||||
/* 确保图片在打印时显示完整 */ | |||||
img, .el-image { | |||||
max-width: 100% !important; | |||||
height: auto !important; | |||||
} | |||||
`; | |||||
frameDoc.head.appendChild(style); | |||||
frameDoc.body.appendChild(contentClone); | |||||
setTimeout(() => { | |||||
printFrame.contentWindow.focus(); | |||||
printFrame.contentWindow.print(); | |||||
setTimeout(() => { | |||||
document.body.removeChild(printFrame); | |||||
document.title = originalTitle; | |||||
}, 1000); | |||||
}, 500); | |||||
} catch (e) { | |||||
document.body.removeChild(printFrame); | |||||
document.title = originalTitle; | |||||
this.$message.error('打印过程中发生错误'); | |||||
} | |||||
}; | |||||
document.body.appendChild(printFrame); | |||||
} catch (e) { | |||||
document.title = originalTitle; | |||||
this.$message.error('打印过程中发生错误'); | |||||
} | |||||
}, | |||||
/** 打印按钮操作 */ | |||||
handlePrint() { | |||||
printXjxzq(this.queryParams).then(response => {}) | |||||
}, | |||||
/* 导入EXCEL组件 */ | |||||
handleImport() { | |||||
this.upload.title = "县级区域导入" | |||||
this.upload.open = true | |||||
}, | |||||
/** 下载模板操作 */ | |||||
importTemplate() { | |||||
this.download('business/xjxzq/importTemplate', { | |||||
}, `xjxzq_template.xlsx`) | |||||
}, | |||||
// 文件上传中处理 | |||||
handleFileUploadProgress(event, file, fileList) { | |||||
this.upload.isUploading = true | |||||
}, | |||||
// 文件上传成功处理 | |||||
handleFileSuccess(response, file, fileList) { | |||||
this.upload.open = false | |||||
this.upload.isUploading = false | |||||
this.$refs.upload.clearFiles() | |||||
this.$alert("<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" + response.msg + "</div>", "导入结果", { dangerouslyUseHTMLString: true }) | |||||
this.getList() | |||||
}, | |||||
// 提交上传文件 | |||||
submitFileForm() { | |||||
this.$refs.upload.submit() | |||||
}, | |||||
} | |||||
} | |||||
</script> |