zhangzl
/
rongxin.dashboard
1
0
Fork 0
Código Incidencias 0 Pull Requests 0 Lanzamientos 0 Wiki Actividad
管理系统PC端
No puede seleccionar más de 25 temas Los temas deben comenzar con una letra o número, pueden incluir guiones ('-') y pueden tener hasta 35 caracteres de largo.
56 Commits
1 Rama
5.5 MiB
 
 
 
 
Árbol: 22dfa773a6
Ramas Etiquetas
${ item.name }
Crear rama ${ searchTerm }
desde '22dfa773a6'
${ noResults }
rongxin.dashboard/src/views/business/xjqy/index.vue

423 líneas
17 KiB
Original Blame Histórico 

  1. <template>

  2.   <div class="app-container">

  3.     <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">

  4.       <el-form-item label="区划代码" prop="xjqydm">

  5.         <el-input v-model="queryParams.xjqydm" placeholder="请输入区划代码" clearable @keyup.enter.native="handleQuery"/>

  6.       </el-form-item>

  7.       <el-form-item label="区划名称" prop="xjqymc">

  8.         <el-input v-model="queryParams.xjqymc" placeholder="请输入区划名称" clearable @keyup.enter.native="handleQuery"/>

  9.       </el-form-item>

  10.       <el-form-item label="级联代码" prop="importCode">

  11.         <el-input v-model="queryParams.importCode" placeholder="请输入级联代码" clearable @keyup.enter.native="handleQuery"/>

  12.       </el-form-item>

  13.       <el-form-item>

  14.         <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>

  15.         <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>

  16.       </el-form-item>

  17.     </el-form>

  18. 

  19.     <el-row :gutter="10" class="mb8">

  20.       <el-col :span="1.5">

  21.         <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd" v-hasPermi="['business:xjqy:add']">新增</el-button>

  22.       </el-col>

  23.       <!--

  24.       <el-col :span="1.5">

  25.         <el-button type="success" plain icon="el-icon-edit" size="mini" :disabled="single" @click="handleUpdate" v-hasPermi="['business:xjqy:edit']">修改</el-button>

  26.       </el-col>

  27.       <el-col :span="1.5">

  28.         <el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleDelete" v-hasPermi="['business:xjqy:remove']">删除</el-button>

  29.       </el-col>

  30.       -->

  31. 

  32.       <el-col :span="1.5">

  33.           <el-button type="success" plain icon="el-icon-upload2" size="mini" @click="handleImport" v-hasPermi="['business:xjqy:import']">导入</el-button>

  34.       </el-col>

  35.       <el-col :span="1.5">

  36.         <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport" v-hasPermi="['business:xjqy:export']">导出</el-button>

  37.       </el-col>

  38.       <el-col :span="1.5">

  39.           <el-button type="info" plain icon="el-icon-printer" size="mini" @click="handlePrint()" v-hasPermi="['business:xjqy:print']">打印</el-button>

  40.       </el-col>

  41.       <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>

  42.     </el-row>

  43. 

  44.       <!-- 数据列表  列属性 min-width="60" show-overflow-tooltip  @selection-change="handleSelectionChange" -->

  45.     <el-table v-loading="loading" :data="xjqyList" border>

  46.         <!--<el-table-column type="selection" width="55" align="center" />-->

  47.       <el-table-column label="区划代码" align="center" prop="xjqydm" />

  48.       <el-table-column label="区划名称" align="center" prop="xjqymc" />

  49.       <el-table-column label="标识码" align="center" prop="bsm" />

  50.       <el-table-column label="要素代码" align="center" prop="ysdm" />

  51.       <el-table-column label="级联代码" align="center" prop="importCode" />

  52.       <el-table-column label="fid" align="center" prop="fid"  min-width="60"/>

  53.       <el-table-column label="操作" align="center" class-name="small-padding fixed-width" min-width="250">

  54.         <template slot-scope="scope">

  55.           <el-button size="mini" type="text" icon="el-icon-view" @click="handleLook(scope.row)" v-hasPermi="['business:xjqy:query']">查看</el-button>

  56.           <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)" v-hasPermi="['business:xjqy:edit']">修改</el-button>

  57.           <el-dropdown size="mini" v-hasPermi="['business:xjqy:remove']">

  58.             <el-button size="mini" type="text" icon="el-icon-d-arrow-right">更多</el-button>

  59.             <el-dropdown-menu slot="dropdown" style="padding: 5px">

  60.                 <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)" v-hasPermi="['business:xjqy:remove']">删除</el-button>

  61.             </el-dropdown-menu>

  62.           </el-dropdown>

  63.         </template>

  64.       </el-table-column>

  65.     </el-table>

  66. 

  67.     <!-- 分页插件 -->

  68.     <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList"/>

  69. 

  70.      <!-- 导入EXCEL组件 -->

  71.       <el-dialog :title="upload.title" :visible.sync="upload.open" width="400px" append-to-body>

  72.           <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>

  73.               <i class="el-icon-upload"></i>

  74.               <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>

  75.               <div class="el-upload__tip text-left" slot="tip">

  76.                   <div class="el-upload__tip" slot="tip">

  77.                       <el-checkbox v-model="upload.updateSupport" /> 是否更新已经存在的乡级区域

  78.                   </div>

  79.                   <p style="color: red">1、仅允许导入xls、xlsx格式文件；</p>

  80.                   <el-link type="primary" :underline="false" style="font-size: 12px; vertical-align: baseline" @click="importTemplate">下载模板</el-link>

  81.               </div>

  82.           </el-upload>

  83.           <div slot="footer" class="dialog-footer">

  84.               <el-button type="primary" @click="submitFileForm">确 定</el-button>

  85.               <el-button @click="upload.open = false">取 消</el-button>

  86.           </div>

  87.       </el-dialog>

  88. 

  89.       <!-- 查看乡级区域对话框 -->

  90.       <el-dialog :title="title" :visible.sync="viewOpen" width="800px" append-to-body>

  91.          <el-descriptions id="printDetail" :column="descColumn" border :labelStyle="{width: `${descLabelWidth}%`}" :contentStyle="{width: `${(100 / descColumn) - descLabelWidth}%`}">

  92.            <el-descriptions-item label="区划代码">{{ form.xjqydm }}</el-descriptions-item>

  93.            <el-descriptions-item label="区划名称">{{ form.xjqymc }}</el-descriptions-item>

  94.            <el-descriptions-item label="标识码">{{ form.bsm }}</el-descriptions-item>

  95.            <el-descriptions-item label="要素代码">{{ form.ysdm }}</el-descriptions-item>

  96.            <el-descriptions-item label="级联代码">{{ form.importCode }}</el-descriptions-item>

  97.          </el-descriptions>

  98.           <!-- 弹框操作按钮 -->

  99.          <div slot="footer" class="dialog-footer">

  100.              <el-button @click="doPrint">打 印</el-button>

  101.              <el-button @click="cancelDetail">关 闭</el-button>

  102.          </div>

  103.       </el-dialog>

  104. 

  105.     <!-- 添加或修改乡级区域对话框 -->

  106.     <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body>

  107.       <el-form ref="form" :model="form" :rules="rules" label-width="100px">

  108.         <el-form-item label="区划代码" prop="xjqydm">

  109.             <el-input v-model="form.xjqydm" placeholder="请输入区划代码"  show-word-limit :maxlength="9"/>

  110.         </el-form-item>

  111.         <el-form-item label="区划名称" prop="xjqymc">

  112.             <el-input v-model="form.xjqymc" placeholder="请输入区划名称"  show-word-limit :maxlength="100"/>

  113.         </el-form-item>

  114.         <el-form-item label="标识码" prop="bsm">

  115.             <el-input-number v-model="form.bsm" placeholder="请输入标识码" controls-position="right"  />

  116.         </el-form-item>

  117.         <el-form-item label="要素代码" prop="ysdm">

  118.             <el-input v-model="form.ysdm" placeholder="请输入要素代码"  show-word-limit :maxlength="6"/>

  119.         </el-form-item>

  120.         <el-form-item label="级联代码" prop="importCode">

  121.             <el-input v-model="form.importCode" placeholder="请输入级联代码"  show-word-limit :maxlength="20"/>

  122.         </el-form-item>

  123.       </el-form>

  124.       <div slot="footer" class="dialog-footer">

  125.         <el-button type="primary" @click="submitForm">确 定</el-button>

  126.         <el-button @click="cancel">取 消</el-button>

  127.       </div>

  128.     </el-dialog>

  129.   </div>

  130. </template>

  131. 

  132. <script>

  133. import { listXjqy, getXjqy, getXjqyDetail, delXjqy, addXjqy, updateXjqy, printXjqy } from "@/api/business/xjqy"

  134. import { getToken } from "@/utils/auth"

  135. export default {

  136.   name: "Xjqy",

  137.   data() {

  138.     return {

  139.       // 遮罩层

  140.       loading: true,

  141.       // 导出遮罩层

  142.       exportLoading: false,

  143.       // 选中数组

  144.       ids: [],

  145.       // 非单个禁用

  146.       single: true,

  147.       // 非多个禁用

  148.       multiple: true,

  149.       // 显示搜索条件

  150.       showSearch: true,

  151.       // 总条数

  152.       total: 0,

  153.       // 乡级区域表格数据

  154.       xjqyList: [],

  155.       // 弹出层标题

  156.       title: "",

  157.       // 是否显示弹出层

  158.       open: false,

  159.       // 详情组件列数

  160.       descColumn: 2,

  161.       // 详情组件Label所占百分比, 最大={100 / descColumn}. 内容所占百分比={100 / descColumn - descLabelWidth}

  162.       descLabelWidth: 15,

  163.       // 对话框显示只读的详情

  164.       viewOpen: false,

  165.       // 项目路径

  166.       baseRoutingUrll: process.env.VUE_APP_BASE_API,

  167.       // 查询参数

  168.       queryParams: {

  169.         pageNum: 1,

  170.         pageSize: 10,

  171.        // 查询排序

  172.        //orderByColumn: "id",

  173.        //isAsc: "desc",

  174.        // 翻译字典

  175.        //toTranslateDict: "1",

  176.         xjqydm: null,

  177.         xjqymc: null,

  178.         importCode: null,

  179.       },

  180.       // 表单参数

  181.       form: {},

  182.       // 表单校验

  183.       rules: {

  184.         xjqydm: [

  185.           { required: true, message: "区划代码不能为空", trigger: "blur" }

  186.         ],

  187.         xjqymc: [

  188.           { required: true, message: "区划名称不能为空", trigger: "blur" }

  189.         ],

  190.         importCode: [

  191.           { required: true, message: "级联代码不能为空", trigger: "blur" }

  192.         ],

  193.       },

  194.       // EXCEL导入

  195.       upload: {

  196.           // 是否显示弹出层（用户导入）

  197.           open: false,

  198.           // 弹出层标题（用户导入）

  199.           title: "",

  200.           // 是否禁用上传

  201.           isUploading: false,

  202.           // 是否更新已经存在的用户数据

  203.           updateSupport: 0,

  204.           // 设置上传的请求头部

  205.           headers: { Authorization: "Bearer " + getToken() },

  206.           // 上传的地址

  207.           url: process.env.VUE_APP_BASE_API + "/business/xjqy/importData"

  208.       },

  209. 

  210.     }

  211.   },

  212.   created() {

  213.     this.getList()

  214.   },

  215.   methods: {

  216.     /** 查询乡级区域列表 */

  217.     getList() {

  218.       this.loading = true

  219.       listXjqy(this.queryParams).then(response => {

  220.         this.xjqyList = response.rows

  221.         this.total = response.total

  222.         this.loading = false

  223.       })

  224.     },

  225.     // 取消按钮

  226.     cancel() {

  227.       this.open = false

  228.       this.reset()

  229.     },

  230.     cancelDetail() {

  231.         this.viewOpen = false

  232.     },

  233.     // 表单重置

  234.     reset() {

  235.       this.form = {

  236.         xjqydm: null,

  237.         xjqymc: null,

  238.         bsm: null,

  239.         ysdm: null,

  240.         theGeom: null,

  241.         importCode: null,

  242.         fid: null

  243.       }

  244.       this.resetForm("form")

  245.     },

  246.     /** 搜索按钮操作 */

  247.     handleQuery() {

  248.       this.queryParams.pageNum = 1

  249.       this.getList()

  250.     },

  251.     /** 重置按钮操作 */

  252.     resetQuery() {

  253.       this.resetForm("queryForm")

  254.       this.handleQuery()

  255.     },

  256.     // 多选框选中数据

  257.     handleSelectionChange(selection) {

  258.       this.ids = selection.map(item => item.fid)

  259.       this.single = selection.length!==1

  260.       this.multiple = !selection.length

  261.     },

  262.     /** 新增按钮操作 */

  263.     handleAdd() {

  264.       this.reset()

  265.       this.open = true

  266.       this.title = "添加乡级区域"

  267.     },

  268.     /** 修改按钮操作 */

  269.     handleUpdate(row) {

  270.       this.reset()

  271.       const fid = row.fid || this.ids

  272.       getXjqy(fid).then(response => {

  273.         this.form = response.data

  274.         this.open = true

  275.         this.title = "修改乡级区域"

  276.       })

  277.     },

  278.     /** 查看按钮操作 */

  279.     handleLook(row) {

  280.       const fid = row.fid || this.ids

  281.       getXjqyDetail(fid).then(response => {

  282.           this.form = response.data;

  283.           this.viewOpen = true;

  284.           this.title = "查看乡级区域";

  285.       });

  286.     },

  287.     /** 提交按钮 */

  288.     submitForm() {

  289.       this.$refs["form"].validate(valid => {

  290.         if (valid) {

  291.           if (this.form.fid != null) {

  292.             updateXjqy(this.form).then(response => {

  293.               this.$modal.msgSuccess("修改成功")

  294.               this.open = false

  295.               this.getList()

  296.             })

  297.           } else {

  298.             addXjqy(this.form).then(response => {

  299.               this.$modal.msgSuccess("新增成功")

  300.               this.open = false

  301.               this.getList()

  302.             })

  303.           }

  304.         }

  305.       })

  306.     },

  307.     /** 删除按钮操作 */

  308.     handleDelete(row) {

  309.       const fids = row.fid || this.ids

  310.       this.$modal.confirm('是否确认删除乡级区域编号为"' + fids + '"的数据项？').then(function() {

  311.         return delXjqy(fids)

  312.       }).then(() => {

  313.         this.getList()

  314.         this.$modal.msgSuccess("删除成功")

  315.       }).catch(() => {})

  316.     },

  317.     /** 导出按钮操作 */

  318.     handleExport() {

  319.       this.download('business/xjqy/export', {

  320.         ...this.queryParams

  321.       }, `乡级区域_${new Date().getTime()}.xlsx`)

  322.     },

  323.     /** 打印表单 */

  324.     doPrint() {

  325.         const originalTitle = document.title;

  326.         try {

  327.             document.title = this.title || '打印详情';

  328.             const printElement = document.getElementById('printDetail');

  329.             const printFrame = document.createElement('iframe');

  330.             printFrame.style.position = 'absolute';

  331.             printFrame.style.width = '0';

  332.             printFrame.style.height = '0';

  333.             printFrame.style.border = 'none';

  334.             printFrame.style.left = '-9999px';

  335.             printFrame.onload = function() {

  336.                 try {

  337.                     const frameDoc = printFrame.contentDocument || printFrame.contentWindow.document;

  338.                     const contentClone = printElement.cloneNode(true);

  339.                     const style = document.createElement('style');

  340.                     style.innerHTML = `

  341.                       @page {

  342.                         size: auto;

  343.                         margin: 10mm;

  344.                       }

  345.                       body {

  346.                         font-family: Arial, sans-serif;

  347.                         line-height: 1.5;

  348.                         margin: 0;

  349.                         padding: 0;

  350.                       }

  351.                       .el-descriptions {

  352.                         width: 100% !important;

  353.                       }

  354.                       .el-descriptions-item__label {

  355.                         width: ${this.descLabelWidth}% !important;

  356.                       }

  357.                       .el-descriptions-item__content {

  358.                         width: ${(100 / this.descColumn) - this.descLabelWidth}% !important;

  359.                       }

  360.                       /* 确保图片在打印时显示完整 */

  361.                       img, .el-image {

  362.                         max-width: 100% !important;

  363.                         height: auto !important;

  364.                       }

  365.                     `;

  366.                     frameDoc.head.appendChild(style);

  367.                     frameDoc.body.appendChild(contentClone);

  368.                     setTimeout(() => {

  369.                         printFrame.contentWindow.focus();

  370.                         printFrame.contentWindow.print();

  371.                         setTimeout(() => {

  372.                             document.body.removeChild(printFrame);

  373.                             document.title = originalTitle;

  374.                         }, 1000);

  375.                     }, 500);

  376.                 } catch (e) {

  377.                     document.body.removeChild(printFrame);

  378.                     document.title = originalTitle;

  379.                     this.$message.error('打印过程中发生错误');

  380.                 }

  381.             };

  382.             document.body.appendChild(printFrame);

  383.         } catch (e) {

  384.             document.title = originalTitle;

  385.             this.$message.error('打印过程中发生错误');

  386.         }

  387.     },

  388.     /** 打印按钮操作 */

  389.     handlePrint() {

  390.         printXjqy(this.queryParams).then(response => {})

  391.     },

  392.     /* 导入EXCEL组件 */

  393.     handleImport() {

  394.         this.upload.title = "乡级区域导入"

  395.         this.upload.open = true

  396.     },

  397.     /** 下载模板操作 */

  398.     importTemplate() {

  399.         this.download('business/xjqy/importTemplate', {

  400.         }, `乡级区域_template.xlsx`)

  401.     },

  402.     // 文件上传中处理

  403.     handleFileUploadProgress(event, file, fileList) {

  404.         this.upload.isUploading = true

  405.     },

  406.     // 文件上传成功处理

  407.     handleFileSuccess(response, file, fileList) {

  408.         this.upload.open = false

  409.         this.upload.isUploading = false

  410.         this.$refs.upload.clearFiles()

  411.         this.$alert("<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" + response.msg + "</div>", "导入结果", { dangerouslyUseHTMLString: true })

  412.         this.getList()

  413.     },

  414.     // 提交上传文件

  415.     submitFileForm() {

  416.         this.$refs.upload.submit()

  417.     },

  418. 

  419. 

  420.   }

  421. }

  422. </script>