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