Browse Source

gis 初始生成

master
张泽亮 1 week ago
parent
commit
aec2e004d9
13 changed files with 2496 additions and 0 deletions
  1. +54
    -0
      src/api/business/cjqy.js
  2. +54
    -0
      src/api/business/export.js
  3. +54
    -0
      src/api/business/import.js
  4. +54
    -0
      src/api/business/xjqy.js
  5. +54
    -0
      src/api/business/xjxzq.js
  6. BIN
      src/assets/images/login-background.jpg
  7. BIN
      src/assets/images/pay.png
  8. BIN
      src/assets/images/profile.jpg
  9. +416
    -0
      src/views/business/cjqy/index.vue
  10. +465
    -0
      src/views/business/export/index.vue
  11. +513
    -0
      src/views/business/import/index.vue
  12. +416
    -0
      src/views/business/xjqy/index.vue
  13. +416
    -0
      src/views/business/xjxzq/index.vue

+ 54
- 0
src/api/business/cjqy.js View File

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

+ 54
- 0
src/api/business/export.js View File

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

+ 54
- 0
src/api/business/import.js View File

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

+ 54
- 0
src/api/business/xjqy.js View File

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

+ 54
- 0
src/api/business/xjxzq.js View File

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

BIN
src/assets/images/login-background.jpg View File

Before After
Width: 1000  |  Height: 563  |  Size: 509 KiB Width: 1920  |  Height: 1080  |  Size: 133 KiB

BIN
src/assets/images/pay.png View File

Before After
Width: 900  |  Height: 539  |  Size: 137 KiB

BIN
src/assets/images/profile.jpg View File

Before After
Width: 198  |  Height: 198  |  Size: 79 KiB Width: 198  |  Height: 198  |  Size: 6.3 KiB

+ 416
- 0
src/views/business/cjqy/index.vue View File

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

+ 465
- 0
src/views/business/export/index.vue View File

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

+ 513
- 0
src/views/business/import/index.vue View File

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

+ 416
- 0
src/views/business/xjqy/index.vue View File

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

+ 416
- 0
src/views/business/xjxzq/index.vue View File

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

Loading…
Cancel
Save