朱兆平 / vue_cli · 提交

转到一个项目

作者 小范
提交 3eb1203e60e02d0278c8a930cc85021655ae6e24 1 个父辈 de1a1dd3

新增消息分类管理界面

内嵌 并排对比
正在显示 1 个修改的文件 包含 203 行增加 和 0 行删除
  1 +<template>
  2 + <el-container>
  3 + <el-main>
  4 + <el-card style="background-color: #F5F7FA">
  5 + <!-- 搜素区域 -->
  6 + <el-row>
  7 + <el-col :span="6">
  8 + <el-input placeholder="请输入内容" v-model="queryInfo.name" size="medium">
  9 + <template slot="prepend"><i class="el-icon-notebook-2"></i>消息标签</template>
  10 + </el-input>
  11 + </el-col>
  12 + <el-col :span="5" align="center">
  13 + <el-select v-model="queryInfo.id" placeholder="请选择上级标签" size="medium">
  14 + <el-option
  15 + v-for="item in options"
  16 + :key="item.value"
  17 + :label="item.label"
  18 + :value="item.value">
  19 + </el-option>
  20 + </el-select>
  21 + </el-col>
  22 + <el-col :span="6" align="center">
  23 + <el-button type="warning" size="medium" icon="el-icon-search" @click="getList">
  24 + 查询标签
  25 + </el-button>
  26 + <el-button type="primary" size="medium" icon="el-icon-plus" @click="dialogFormVisible=true">
  27 + 添加标签
  28 + </el-button>
  29 + </el-col>
  30 + </el-row>
  31 + <!-- 列表区域 -->
  32 + <el-row style="margin-top: 20px;">
  33 + <el-table
  34 + :data="page.tableData"
  35 + border size="small" row-key="id" default-expand-all
  36 + :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
  37 + :header-cell-style="{background:'#6F8294',color:'#FFFFFF'}"
  38 + style="border-radius: 10px 10px 0px 0px;line-height: 25px;">
  39 + <el-table-column type="selection" width="55" align="center"></el-table-column>
  40 + <el-table-column type="index" align="center"></el-table-column>
  41 + <el-table-column label="消息标签" prop="name" align="center" width="220"></el-table-column>
  42 + <el-table-column label="消息类型" prop="type" :formatter="formatType" align="center" width="220"></el-table-column>
  43 + <el-table-column label="相关描述" prop="des" align="center" width="220"></el-table-column>
  44 + <el-table-column label="创建时间" prop="creattime" align="center" width="145"></el-table-column>
  45 + <el-table-column label="操作" width="225px" align="center" fixed="right">
  46 + <template slot-scope="scope">
  47 + <!-- 编辑按钮-->
  48 + <el-tooltip effect="dark" content="编辑" placement="top-start" :enterable="false">
  49 + <el-button type="primary" icon="el-icon-edit" size="mini"@click="">编辑
  50 + </el-button>
  51 + </el-tooltip>
  52 + <!-- 删除按钮-->
  53 + <el-tooltip effect="dark" content="删除" placement="top-start" :enterable="false">
  54 + <el-button type="danger" icon="el-icon-delete" size="mini"@click="">删除
  55 + </el-button>
  56 + </el-tooltip>
  57 + </template>
  58 + </el-table-column>
  59 + </el-table>
  60 + </el-row>
  61 + <el-row style="margin-top: 10px">
  62 + <el-col :span="5">
  63 + <el-button type="danger" icon="el-icon-delete" :disabled="this.page.selectList.length===0"
  64 + >批量删除
  65 + </el-button>
  66 + </el-col>
  67 + <el-col :span="10" style="margin-top: 5px">
  68 + <el-pagination
  69 + @size-change="handleSizeChange"
  70 + @current-change="handleCurrentChange"
  71 + :current-page="queryInfo.pageNum"
  72 + :page-sizes="[10,50,200,500]"
  73 + :page-size="queryInfo.pageSize"
  74 + layout="total, sizes, prev, pager, next, jumper"
  75 + :total="page.total">
  76 + </el-pagination>
  77 + </el-col>
  78 + </el-row>
  79 + <!-- 增加，对话框区域 -->
  80 + <el-row>
  81 + <el-dialog title="收货地址" :visible.sync="dialogFormVisible" style="margin-top: -50px" width="60%" >
  82 + <el-form :model="form" style="margin-left: 60px" align="center">
  83 + <el-row>
  84 + <el-col :span="7">
  85 + <el-form-item label="">
  86 + <el-input placeholder="请输入内容" v-model="form.name" size="medium">
  87 + <template slot="prepend">消息标签</template>
  88 + </el-input>
  89 + </el-form-item>
  90 + </el-col>
  91 + <el-col :span="7">
  92 + <el-form-item label="">
  93 + <el-select v-model="form.id" placeholder="请选择上级标签" size="medium">
  94 + <el-option
  95 + v-for="item in options"
  96 + :key="item.value"
  97 + :label="item.label"
  98 + :value="item.value">
  99 + </el-option>
  100 + </el-select>
  101 + </el-form-item>
  102 + </el-col>
  103 + <el-col :span="7">
  104 + <el-form-item label="">
  105 + <el-input placeholder="请输入内容" v-model="form.des" size="medium">
  106 + <template slot="prepend"><i class="el-icon-notebook-2"></i>描述</template>
  107 + </el-input>
  108 + </el-form-item>
  109 + </el-col>
  110 + </el-row>
  111 + </el-form>
  112 + <div slot="footer" class="dialog-footer" align="center">
  113 + <el-button type="info" @click="dialogFormVisible = false" size="medium"
  114 + style="width: 100px;background-color: #6F8294;color: #ffffff">取 消</el-button>
  115 + <el-button type="primary" size="medium" style="width: 100px" @click="addList">提 交</el-button>
  116 + </div>
  117 + </el-dialog>
  118 + </el-row>
  119 +
  120 + </el-card>
  121 + </el-main>
  122 + </el-container>
  123 +</template>
  124 +
  125 +<script>
  126 + import {getTypesPage} from "../../api/message_bus";
  127 +
  128 + export default {
  129 + name: 'MessageManagement',
  130 +
  131 + data() {
  132 + return {
  133 + queryInfo: {
  134 + // 消息标签
  135 + name: '',
  136 + // 当前页数
  137 + pageNum: 1,
  138 + // 每页条数
  139 + pageSize: 10,
  140 + },
  141 + page: {
  142 + total: 0,
  143 + tableData: [],
  144 + selectList: [],
  145 + },
  146 + dialogFormVisible: false,
  147 + form: {
  148 + name: '',
  149 + id: '',
  150 + des: '',
  151 + },
  152 +
  153 +
  154 + options: [{
  155 + value: '1',
  156 + nameAndDes: ''
  157 + },{
  158 + value: '2',
  159 + nameAndDes: ''
  160 + }],
  161 + }
  162 + },
  163 + methods: {
  164 + handleSizeChange(newSize) {
  165 + this.queryInfo.pageSize = newSize;
  166 + this.getList();
  167 + },
  168 + handleCurrentChange(newPage) {
  169 + this.queryInfo.pageNum = newPage;
  170 + this.getList();
  171 + },
  172 + searchSubmit:function () {
  173 + this.queryInfo.pageNum = 1;
  174 + this.queryInfo.pageSize = 10;
  175 + this.getList();
  176 + } ,
  177 + getList() {
  178 + let _this = this;
  179 + getTypesPage(this.queryInfo).then((response) => {
  180 + let res = response.data;
  181 + if (res.code !== '200') {
  182 + return _this.$message.error('获取消息收发记录，失败！');
  183 + }
  184 + // 获取列表数据
  185 + _this.page.tableData = res.data.list;
  186 + // 获取列表的总记录数
  187 + _this.page.total = res.data.total;
  188 + _this.$message.success('获取消息收发记录，成功！');
  189 + }).catch(error => {
  190 + // 关闭加载
  191 + _this.$message.error(error.toString());
  192 + });
  193 + },
  194 + formatType: function (row, column) {
  195 + return row.type == 1 ? '消息分类' : row.type == 2 ? '消息大类' : '消息子类';
  196 + },
  197 + },
  198 + }
  199 +</script>
  200 +
  201 +<style>
  202 +
  203 +</style>