@@ -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> |