zhangzl
/
rongxin.dashboard
1
0
複製 0
程式碼 問題 0 合併請求 0 版本發佈 0 Wiki 活動
管理系统PC端
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
9 提交
1 分支
5.5 MiB
 
 
 
 
目錄樹: 8c5f31b4af
分支列表 標籤
${ item.name }
建立分支 ${ searchTerm }
從 '8c5f31b4af'
${ noResults }
rongxin.dashboard/src/views/system/menuapp/index.vue

452 line
18 KiB
原始文件 Blame 歷史記錄 

  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="modelType">

  5.         <el-select v-model="queryParams.modelType" placeholder="请选择模块名称" clearable>

  6.           <el-option v-for="dict in dict.type.model_type" :key="dict.value" :label="dict.label" :value="dict.value"/>

  7.         </el-select>

  8.       </el-form-item>

  9.       <el-form-item label="菜单名称" prop="menuName">

  10.         <el-input v-model="queryParams.menuName" placeholder="请输入菜单名称" clearable @keyup.enter.native="handleQuery"/>

  11.       </el-form-item>

  12.       <el-form-item label="菜单状态" prop="menuStatus">

  13.         <el-select v-model="queryParams.menuStatus" placeholder="请选择菜单状态" clearable>

  14.           <el-option v-for="dict in dict.type.sys_normal_disable" :key="dict.value" :label="dict.label" :value="dict.value"/>

  15.         </el-select>

  16.       </el-form-item>

  17.       <el-form-item>

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

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

  20.       </el-form-item>

  21.     </el-form>

  22. 

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

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

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

  26.       </el-col>

  27.       <!--

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

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

  30.       </el-col>

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

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

  33.       </el-col>

  34.       -->

  35. 

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

  37.           <el-button type="info" plain icon="el-icon-upload2" size="mini" @click="handleImport" v-hasPermi="['system:menuapp:import']">导入</el-button>

  38.       </el-col>

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

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

  41.       </el-col>

  42. 

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

  44.     </el-row>

  45. 

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

  47.     <el-table v-loading="loading" :data="menuappList" >

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

  49.       <el-table-column label="id" align="center" prop="id" />

  50.       <el-table-column label="模块名称" align="center" prop="modelType">

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

  52.           <dict-tag :options="dict.type.model_type" :value="scope.row.modelType"/>

  53.         </template>

  54.       </el-table-column>

  55.       <el-table-column label="菜单名称" align="center" prop="menuName" />

  56.       <el-table-column label="菜单路径" align="center" prop="menuUrl" />

  57.       <el-table-column label="菜单图标" align="center" prop="menuIcon" />

  58.       <el-table-column label="显示顺序" align="center" prop="menuNum" />

  59.       <el-table-column label="菜单状态" align="center" prop="menuStatus">

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

  61.           <dict-tag :options="dict.type.sys_normal_disable" :value="scope.row.menuStatus"/>

  62.         </template>

  63.       </el-table-column>

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

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

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

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

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

  69.         </template>

  70.       </el-table-column>

  71.     </el-table>

  72. 

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

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

  75. 

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

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

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

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

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

  81.               <div class="el-upload__tip text-center" slot="tip">

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

  83.                       <el-checkbox v-model="upload.updateSupport" />是否更新已经存在的手机菜单

  84.                   </div>

  85.                   <span>仅允许导入xls、xlsx格式文件。</span>

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

  87.               </div>

  88.           </el-upload>

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

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

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

  92.           </div>

  93.       </el-dialog>

  94. 

  95.       <!-- 查看手机菜单对话框 -->

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

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

  98.            <el-descriptions-item label="模块名称">{{ form.modelType }}</el-descriptions-item>

  99.            <el-descriptions-item label="菜单名称">{{ form.menuName }}</el-descriptions-item>

  100.            <el-descriptions-item label="菜单路径">{{ form.menuUrl }}</el-descriptions-item>

  101.            <el-descriptions-item label="菜单图标">{{ form.menuIcon }}</el-descriptions-item>

  102.            <el-descriptions-item label="显示顺序">{{ form.menuNum }}</el-descriptions-item>

  103.            <el-descriptions-item label="菜单状态">{{ form.menuStatus }}</el-descriptions-item>

  104.            <el-descriptions-item label="备注">{{ form.remark }}</el-descriptions-item>

  105.          </el-descriptions>

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

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

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

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

  110.          </div>

  111.       </el-dialog>

  112. 

  113.     <!-- 添加或修改手机菜单对话框 -->

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

  115.       <el-form ref="form" :model="form" :rules="rules" label-width="80px">

  116.         <el-form-item label="模块名称" prop="modelType">

  117.           <el-select v-model="form.modelType" placeholder="请选择模块名称">

  118.             <el-option v-for="dict in dict.type.model_type" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>

  119.           </el-select>

  120.         </el-form-item>

  121.         <el-form-item label="菜单名称" prop="menuName">

  122.             <el-input v-model="form.menuName" placeholder="请输入菜单名称"  show-word-limit :maxlength="20"/>

  123.         </el-form-item>

  124.         <el-form-item label="菜单路径" prop="menuUrl">

  125.             <el-input v-model="form.menuUrl" placeholder="请输入菜单路径"  show-word-limit :maxlength="50"/>

  126.         </el-form-item>

  127.         <el-form-item label="菜单图标" prop="menuIcon">

  128.             <el-input v-model="form.menuIcon" placeholder="请输入菜单图标"  show-word-limit :maxlength="100"/>

  129.         </el-form-item>

  130.         <el-form-item label="显示顺序" prop="menuNum">

  131.             <el-input-number v-model="form.menuNum" placeholder="请输入显示顺序" controls-position="right"  />

  132.         </el-form-item>

  133.         <el-form-item label="菜单状态" prop="menuStatus">

  134.           <el-radio-group v-model="form.menuStatus">

  135.             <el-radio v-for="dict in dict.type.sys_normal_disable" :key="dict.value" :label="dict.value">{{dict.label}}</el-radio>

  136.           </el-radio-group>

  137.         </el-form-item>

  138.         <el-form-item label="备注" prop="remark">

  139.             <el-input v-model="form.remark" placeholder="请输入备注"  show-word-limit :maxlength="100"/>

  140.         </el-form-item>

  141.       </el-form>

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

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

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

  145.       </div>

  146.     </el-dialog>

  147.   </div>

  148. </template>

  149. 

  150. <script>

  151. import { listMenuapp, getMenuapp, delMenuapp, addMenuapp, updateMenuapp, printMenuapp } from "@/api/system/menuapp"

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

  153. export default {

  154.   name: "Menuapp",

  155.   dicts: ['model_type', 'sys_normal_disable'],

  156.   data() {

  157.     return {

  158.       // 遮罩层

  159.       loading: true,

  160.       // 导出遮罩层

  161.       exportLoading: false,

  162.       // 选中数组

  163.       ids: [],

  164.       // 非单个禁用

  165.       single: true,

  166.       // 非多个禁用

  167.       multiple: true,

  168.       // 显示搜索条件

  169.       showSearch: true,

  170.       // 总条数

  171.       total: 0,

  172.       // 手机菜单表格数据

  173.       menuappList: [],

  174.       // 弹出层标题

  175.       title: "",

  176.       // 是否显示弹出层

  177.       open: false,

  178.       // 详情组件列数

  179.       descColumn: 2,

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

  181.       descLabelWidth: 15,

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

  183.       viewOpen: false,

  184.       // 项目路径

  185.       baseRoutingUrl: process.env.VUE_APP_BASE_API,

  186.       // 查询参数

  187.       queryParams: {

  188.         pageNum: 1,

  189.         pageSize: 10,

  190.        // 查询排序

  191.        //orderByColumn: "id",

  192.        //isAsc: "desc",

  193.        // 翻译字典

  194.        //toTranslateDict: "1",

  195.         modelType: null,

  196.         menuName: null,

  197.         menuStatus: null,

  198.       },

  199.       // 表单参数

  200.       form: {},

  201.       // 表单校验

  202.       rules: {

  203.         modelType: [

  204.           { required: true, message: "模块名称不能为空", trigger: "change" }

  205.         ],

  206.         menuName: [

  207.           { required: true, message: "菜单名称不能为空", trigger: "blur" }

  208.         ],

  209.         menuUrl: [

  210.           { required: true, message: "菜单路径不能为空", trigger: "blur" }

  211.         ],

  212.         menuIcon: [

  213.           { required: true, message: "菜单图标不能为空", trigger: "blur" }

  214.         ],

  215.         menuNum: [

  216.           { required: true, message: "显示顺序不能为空", trigger: "blur" }

  217.         ],

  218.         menuStatus: [

  219.           { required: true, message: "菜单状态不能为空", trigger: "change" }

  220.         ],

  221.       },

  222.       // EXCEL导入

  223.       upload: {

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

  225.           open: false,

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

  227.           title: "",

  228.           // 是否禁用上传

  229.           isUploading: false,

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

  231.           updateSupport: 0,

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

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

  234.           // 上传的地址

  235.           url: process.env.VUE_APP_BASE_API + "/system/menuapp/importData"

  236.       },

  237. 

  238.     }

  239.   },

  240.   created() {

  241.     this.getList()

  242.   },

  243.   methods: {

  244.     /** 查询手机菜单列表 */

  245.     getList() {

  246.       this.loading = true

  247.       listMenuapp(this.queryParams).then(response => {

  248.         this.menuappList = response.rows

  249.         this.total = response.total

  250.         this.loading = false

  251.       })

  252.     },

  253.     // 取消按钮

  254.     cancel() {

  255.       this.open = false

  256.       this.reset()

  257.     },

  258.     cancelDetail() {

  259.         this.viewOpen = false

  260.     },

  261.     // 表单重置

  262.     reset() {

  263.       this.form = {

  264.         id: null,

  265.         modelType: '1',

  266.         menuName: null,

  267.         menuUrl: null,

  268.         menuIcon: null,

  269.         menuNum: null,

  270.         menuStatus: '0',

  271.         remark: null,

  272.       }

  273.       this.resetForm("form")

  274.     },

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

  276.     handleQuery() {

  277.       this.queryParams.pageNum = 1

  278.       this.getList()

  279.     },

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

  281.     resetQuery() {

  282.       this.resetForm("queryForm")

  283.       this.handleQuery()

  284.     },

  285.     // 多选框选中数据

  286.     handleSelectionChange(selection) {

  287.       this.ids = selection.map(item => item.id)

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

  289.       this.multiple = !selection.length

  290.     },

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

  292.     handleAdd() {

  293.       this.reset()

  294.       this.open = true

  295.       this.title = "添加手机菜单"

  296.     },

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

  298.     handleUpdate(row) {

  299.       this.reset()

  300.       const id = row.id || this.ids

  301.       getMenuapp(id).then(response => {

  302.         this.form = response.data

  303.         this.open = true

  304.         this.title = "修改手机菜单"

  305.       })

  306.     },

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

  308.     handleLook(row) {

  309.       const id = row.id || this.ids

  310.       getMenuapp(id).then(response => {

  311.           this.form = response.data;

  312.           this.viewOpen = true;

  313.           this.title = "查看手机菜单";

  314.       });

  315.     },

  316.     /** 提交按钮 */

  317.     submitForm() {

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

  319.         if (valid) {

  320.           if (this.form.id != null) {

  321.             updateMenuapp(this.form).then(response => {

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

  323.               this.open = false

  324.               this.getList()

  325.             })

  326.           } else {

  327.             addMenuapp(this.form).then(response => {

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

  329.               this.open = false

  330.               this.getList()

  331.             })

  332.           }

  333.         }

  334.       })

  335.     },

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

  337.     handleDelete(row) {

  338.       const ids = row.id || this.ids

  339.       this.$modal.confirm('是否确认删除手机菜单编号为"' + ids + '"的数据项？').then(function() {

  340.         return delMenuapp(ids)

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

  342.         this.getList()

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

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

  345.     },

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

  347.     handleExport() {

  348.       this.download('system/menuapp/export', {

  349.         ...this.queryParams

  350.       }, `手机菜单_${new Date().getTime()}.xlsx`)

  351.     },

  352.     /** 打印表单 */

  353.     doPrint() {

  354.         const originalTitle = document.title;

  355.         try {

  356.             document.title = this.title || '通用附件详情';

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

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

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

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

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

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

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

  364.             printFrame.onload = function() {

  365.                 try {

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

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

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

  369.                     style.innerHTML = `

  370.                       @page {

  371.                         size: auto;

  372.                         margin: 10mm;

  373.                       }

  374.                       body {

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

  376.                         line-height: 1.5;

  377.                         margin: 0;

  378.                         padding: 0;

  379.                       }

  380.                       .el-descriptions {

  381.                         width: 100% !important;

  382.                       }

  383.                       .el-descriptions-item__label {

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

  385.                       }

  386.                       .el-descriptions-item__content {

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

  388.                       }

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

  390.                       img, .el-image {

  391.                         max-width: 100% !important;

  392.                         height: auto !important;

  393.                       }

  394.                     `;

  395.                     frameDoc.head.appendChild(style);

  396.                     frameDoc.body.appendChild(contentClone);

  397.                     setTimeout(() => {

  398.                         printFrame.contentWindow.focus();

  399.                         printFrame.contentWindow.print();

  400.                         setTimeout(() => {

  401.                             document.body.removeChild(printFrame);

  402.                             document.title = originalTitle;

  403.                         }, 1000);

  404.                     }, 500);

  405.                 } catch (e) {

  406.                     document.body.removeChild(printFrame);

  407.                     document.title = originalTitle;

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

  409.                 }

  410.             };

  411.             document.body.appendChild(printFrame);

  412.         } catch (e) {

  413.             document.title = originalTitle;

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

  415.         }

  416.     },

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

  418.     handlePrint() {

  419.         printMenuapp(this.queryParams).then(response => {})

  420.     },

  421.     /* 导入EXCEL组件 */

  422.     handleImport() {

  423.         this.upload.title = "手机菜单导入"

  424.         this.upload.open = true

  425.     },

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

  427.     importTemplate() {

  428.         this.download('system/menuapp/importTemplate', {

  429.         }, `menuapp_template.xlsx`)

  430.     },

  431.     // 文件上传中处理

  432.     handleFileUploadProgress(event, file, fileList) {

  433.         this.upload.isUploading = true

  434.     },

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

  436.     handleFileSuccess(response, file, fileList) {

  437.         this.upload.open = false

  438.         this.upload.isUploading = false

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

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

  441.         this.getList()

  442.     },

  443.     // 提交上传文件

  444.     submitFileForm() {

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

  446.     },

  447. 

  448. 

  449.   }

  450. }

  451. </script>