| | |
| | | <span>短信回执:</span> |
| | | <el-select v-model="messageStatus" placeholder="请选择"> |
| | | <el-option |
| | | v-for="item in statusList" |
| | | :key="item.value" |
| | | :label="item.label" |
| | | :value="item.label" |
| | | v-for="item in statusList" |
| | | :key="item.value" |
| | | :label="item.label" |
| | | :value="item.label" |
| | | > |
| | | </el-option> |
| | | </el-select> |
| | | </div> |
| | | <div class="find"> |
| | | <el-button type="primary" icon="el-icon-search" @click="getTableData" |
| | | >查询</el-button |
| | | >查询 |
| | | </el-button |
| | | > |
| | | <el-button icon="el-icon-delete-solid" @click="handleReset" |
| | | >重置</el-button |
| | | >重置 |
| | | </el-button |
| | | > |
| | | </div> |
| | | </div> |
| | |
| | | <div class="main-nav"> |
| | | <span>数据列表</span> |
| | | <el-button |
| | | class="button-addition" |
| | | type="primary" |
| | | icon="el-icon-plus" |
| | | @click="isShowDialog = true" |
| | | >添加</el-button |
| | | class="button-addition" |
| | | type="primary" |
| | | icon="el-icon-plus" |
| | | @click="isShowDialog = true" |
| | | >添加 |
| | | </el-button |
| | | > |
| | | </div> |
| | | <!-- 数据展示 --> |
| | | <el-table |
| | | ref="multipleTable" |
| | | :header-cell-style="{ |
| | | background: '#06122c', |
| | | ref="multipleTable" |
| | | :header-cell-style="{ |
| | | // background: '#06122c', |
| | | 'font-size': '12px', |
| | | color: '#4b9bb7', |
| | | color: '#606266', |
| | | 'font-weight': '650', |
| | | 'line-height': '45px', |
| | | }" |
| | | :data="tableData" |
| | | style="width: 100%" |
| | | :row-class-name="tableRowClassName" |
| | | @selection-change="tableChange" |
| | | :data="tableData" |
| | | style="width: 100%" |
| | | :row-class-name="tableRowClassName" |
| | | @selection-change="tableChange" |
| | | > |
| | | <el-table-column type="selection" min-width="5"> </el-table-column> |
| | | <el-table-column type="selection" min-width="5"></el-table-column> |
| | | <el-table-column label="ID" min-width="5" prop="id"> |
| | | <template slot-scope="scope">{{ scope.row.id }}</template> |
| | | </el-table-column> |
| | |
| | | <el-table-column prop="status" label="发布状态" min-width="5"> |
| | | <template slot-scope="scope"> |
| | | <span>{{ |
| | | statusList.find((item) => item.value === scope.row.status).label |
| | | }}</span> |
| | | statusList.find((item) => item.value === scope.row.status).label |
| | | }}</span> |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column prop="operation" label="操作" min-width="15"> |
| | | <template slot-scope="scope"> |
| | | <div class="operation"> |
| | | <el-link |
| | | class="leftPx" |
| | | icon="el-icon-delete-solid" |
| | | :underline="false" |
| | | @click="handleDelete([scope.row.id])" |
| | | >删除</el-link |
| | | class="leftPx" |
| | | icon="el-icon-delete-solid" |
| | | :underline="false" |
| | | @click="handleDelete([scope.row.id])" |
| | | >删除 |
| | | </el-link |
| | | > |
| | | <el-link |
| | | icon="el-icon-edit" |
| | | class="leftPx" |
| | | :underline="false" |
| | | @click="resend(scope.row)" |
| | | >重新发送</el-link |
| | | icon="el-icon-edit" |
| | | class="leftPx" |
| | | :underline="false" |
| | | @click="resend(scope.row)" |
| | | >重新发送 |
| | | </el-link |
| | | > |
| | | </div> |
| | | </template> |
| | |
| | | </el-table> |
| | | <!-- 新建消息 --> |
| | | <el-dialog |
| | | title="新建消息" |
| | | :destroy-on-close="true" |
| | | :key="dialogType" |
| | | :visible.sync="isShowDialog" |
| | | width="80%" |
| | | :before-close="handleConfirmClose" |
| | | title="新建消息" |
| | | :destroy-on-close="true" |
| | | :key="dialogType" |
| | | :visible.sync="isShowDialog" |
| | | width="80%" |
| | | :before-close="handleConfirmClose" |
| | | > |
| | | <MyCreate @closeMyDialog="closeDialog" :type="dialogType"></MyCreate> |
| | | </el-dialog> |
| | |
| | | <div class="funs"> |
| | | <div class="funsItem funs-sp"> |
| | | <el-checkbox v-model="all" @change="selectAll()" |
| | | >全选</el-checkbox |
| | | >全选 |
| | | </el-checkbox |
| | | > |
| | | </div> |
| | | <div class="funsItem funs-sp"> |
| | | <el-checkbox v-model="unsame" @change="disSame(tableData)" |
| | | >反选</el-checkbox |
| | | >反选 |
| | | </el-checkbox |
| | | > |
| | | </div> |
| | | <div class="funsItem"> |
| | | <el-select |
| | | v-model="myIdx" |
| | | placeholder="批量操作" |
| | | @change="selectChange" |
| | | v-model="myIdx" |
| | | placeholder="批量操作" |
| | | @change="selectChange" |
| | | > |
| | | <el-option |
| | | v-for="item in options" |
| | | :key="item.value" |
| | | :label="item.label" |
| | | :value="item.value" |
| | | v-for="item in options" |
| | | :key="item.value" |
| | | :label="item.label" |
| | | :value="item.value" |
| | | > |
| | | </el-option> |
| | | </el-select> |
| | |
| | | </div> |
| | | <div class="pagination"> |
| | | <el-pagination |
| | | background |
| | | :current-page="currentPage" |
| | | layout="prev, pager, next" |
| | | :total="totalNum" |
| | | :page-size="pageSize" |
| | | @current-change="changeCurrentPage" |
| | | background |
| | | :current-page="currentPage" |
| | | layout="prev, pager, next" |
| | | :total="totalNum" |
| | | :page-size="pageSize" |
| | | @current-change="changeCurrentPage" |
| | | > |
| | | </el-pagination> |
| | | </div> |
| | |
| | | // 删除信息 |
| | | handleDelete(ids) { |
| | | this.$confirm("确认删除?").then(() => { |
| | | deleteMessage({ ids: ids.join(",") }) |
| | | .then(() => { |
| | | this.$message({ type: "success", message: "操作成功" }); |
| | | this.getTableData(); |
| | | }) |
| | | .catch((err) => this.$message({ type: "error", message: err })); |
| | | deleteMessage({ids: ids.join(",")}) |
| | | .then(() => { |
| | | this.$message({type: "success", message: "操作成功"}); |
| | | this.getTableData(); |
| | | }) |
| | | .catch((err) => this.$message({type: "error", message: err})); |
| | | }); |
| | | }, |
| | | |
| | | getTableData() { |
| | | const respondResult = |
| | | this.messageStatus === "全部" ? null : this.messageStatus; |
| | | this.messageStatus === "全部" ? null : this.messageStatus; |
| | | getMessageList({ |
| | | channelCode: "02", |
| | | current: this.currentPage, |
| | |
| | | pageSize: this.pageSize, |
| | | head: this.context, |
| | | }) |
| | | .then(({ records, total }) => { |
| | | this.tableData = records; |
| | | this.totalNum = total; |
| | | }) |
| | | .catch((err) => { |
| | | this.$message({ type: "error", message: err }); |
| | | }); |
| | | .then(({records, total}) => { |
| | | this.tableData = records; |
| | | this.totalNum = total; |
| | | }) |
| | | .catch((err) => { |
| | | this.$message({type: "error", message: err}); |
| | | }); |
| | | }, |
| | | |
| | | resend(data) { |
| | |
| | | return; |
| | | } |
| | | sendMessage(data) |
| | | .then(() => { |
| | | this.$message.success("操作成功"); |
| | | this.getTableData(); |
| | | }) |
| | | .catch((err) => this.$message.error(`${err}`)); |
| | | .then(() => { |
| | | this.$message.success("操作成功"); |
| | | this.getTableData(); |
| | | }) |
| | | .catch((err) => this.$message.error(`${err}`)); |
| | | }, |
| | | |
| | | // 批量下拉框操作 |
| | |
| | | // 批量操作 |
| | | mulUpdateStatus(idArr, flag) { |
| | | this.$confirm( |
| | | flag === 1 |
| | | ? "您确定要进行批量启用角色吗?" |
| | | : "您确定要进行批量禁用角色吗?" |
| | | flag === 1 |
| | | ? "您确定要进行批量启用角色吗?" |
| | | : "您确定要进行批量禁用角色吗?" |
| | | ) |
| | | .then((_) => { |
| | | this.$axios({ |
| | | method: "post", |
| | | url: "sccg/role/updateStatusBatch?ids=" + idArr + "&status=" + flag, |
| | | }) |
| | | .then(() => { |
| | | this.getTableData(); |
| | | this.$message({ type: "success", message: "操作成功" }); |
| | | .then((_) => { |
| | | this.$axios({ |
| | | method: "post", |
| | | url: "sccg/role/updateStatusBatch?ids=" + idArr + "&status=" + flag, |
| | | }) |
| | | .catch((err) => { |
| | | this.$message({ type: "error", message: err }); |
| | | }); |
| | | }) |
| | | .catch((err) => {}); |
| | | .then(() => { |
| | | this.getTableData(); |
| | | this.$message({type: "success", message: "操作成功"}); |
| | | }) |
| | | .catch((err) => { |
| | | this.$message({type: "error", message: err}); |
| | | }); |
| | | }) |
| | | .catch((err) => { |
| | | }); |
| | | }, |
| | | // 表格监听 |
| | | tableChange(list) { |
| | |
| | | this.all = list.length === this.tableData.length; |
| | | }, |
| | | // 修改时间格式 |
| | | changeTime({ updateTime }) { |
| | | changeTime({updateTime}) { |
| | | return helper(updateTime); |
| | | }, |
| | | // 全选 |
| | |
| | | }); |
| | | }, |
| | | // 设置表格斑马纹 |
| | | tableRowClassName({ row, rowIndex }) { |
| | | tableRowClassName({row, rowIndex}) { |
| | | if ((rowIndex + 1) % 2 === 0) { |
| | | return "warning-row"; |
| | | } else { |
| | |
| | | .userList { |
| | | text-align: left; |
| | | margin: 10px 20px; |
| | | color: #4b9bb7; |
| | | color: #606266; |
| | | |
| | | header { |
| | | background-color: #09152f; |
| | | background-color: white; |
| | | |
| | | .header-nav { |
| | | line-height: 40px; |
| | |
| | | min-width: 120px; |
| | | padding-left: 15px; |
| | | } |
| | | |
| | | .search, |
| | | .message-status, |
| | | .message-kind { |
| | |
| | | |
| | | .el-input { |
| | | flex: 2; |
| | | color: #1d3f57; |
| | | color: #606266; |
| | | |
| | | &::v-deep .el-input__inner { |
| | | background-color: #09152f; |
| | | border: 1px solid #17324c; |
| | | } |
| | | //&::v-deep .el-input__inner { |
| | | // background-color: #09152f; |
| | | // border: 1px solid #17324c; |
| | | //} |
| | | } |
| | | } |
| | | |
| | | .find { |
| | | margin-left: 15px; |
| | | } |
| | | |
| | | .findBtn { |
| | | line-height: 100px; |
| | | margin-left: 15px; |
| | |
| | | } |
| | | |
| | | main { |
| | | background-color: #09152f; |
| | | background-color: white; |
| | | margin-top: 20px; |
| | | padding-bottom: 50px; |
| | | |
| | |
| | | width: 120px; |
| | | } |
| | | |
| | | &::v-deep .el-input__inner { |
| | | border: none; |
| | | background-color: #09152f; |
| | | } |
| | | //&::v-deep .el-input__inner { |
| | | // border: none; |
| | | // background-color: #09152f; |
| | | //} |
| | | |
| | | &:hover { |
| | | border: 1px solid #4b9bb7; |
| | |
| | | line-height: 50px; |
| | | justify-content: center; |
| | | |
| | | .el-pagination { |
| | | &::v-deep li, |
| | | &::v-deep .btn-prev, |
| | | &::v-deep .btn-next { |
| | | background-color: #071f39; |
| | | color: #4b9bb7; |
| | | } |
| | | |
| | | &::v-deep .active { |
| | | background-color: #409eff; |
| | | color: #fff; |
| | | } |
| | | } |
| | | //.el-pagination { |
| | | // &::v-deep li, |
| | | // &::v-deep .btn-prev, |
| | | // &::v-deep .btn-next { |
| | | // background-color: #071f39; |
| | | // color: #4b9bb7; |
| | | // } |
| | | // |
| | | // &::v-deep .active { |
| | | // background-color: #409eff; |
| | | // color: #fff; |
| | | // } |
| | | //} |
| | | } |
| | | } |
| | | |
| | | .el-table { |
| | | color: #4b9bb7; |
| | | font-size: 10px; |
| | | // color: #606266; |
| | | // font-size: 10px; |
| | | |
| | | &::v-deep .el-table__empty-block { |
| | | background-color: #09152f; |
| | | } |
| | | |
| | | &::v-deep .el-table__empty-block { |
| | | color: #4b9bb7; |
| | | } |
| | | //&::v-deep .el-table__empty-block { |
| | | // background-color: #09152f; |
| | | //} |
| | | // |
| | | //&::v-deep .el-table__empty-block { |
| | | // color: #4b9bb7; |
| | | //} |
| | | |
| | | .operation { |
| | | display: flex; |
| | |
| | | } |
| | | } |
| | | |
| | | .el-table::v-deep .warning-row { |
| | | background: #06122c; |
| | | } |
| | | //.el-table::v-deep .warning-row { |
| | | // background: #06122c; |
| | | //} |
| | | // |
| | | //.el-table::v-deep .success-row { |
| | | // background: #071f39; |
| | | //} |
| | | |
| | | .el-table::v-deep .success-row { |
| | | background: #071f39; |
| | | } |
| | | |
| | | &::v-deep .switchStyle .el-switch__label { |
| | | position: absolute; |
| | | display: none; |
| | | color: #fff; |
| | | } |
| | | |
| | | &::v-deep .el-switch__core { |
| | | background-color: rgba(166, 166, 166, 1); |
| | | } |
| | | |
| | | &::v-deep .switchStyle .el-switch__label--left { |
| | | z-index: 9; |
| | | left: 20px; |
| | | } |
| | | |
| | | &::v-deep .switchStyle .el-switch__label--right { |
| | | z-index: 9; |
| | | left: 4px; |
| | | } |
| | | |
| | | &::v-deep .switchStyle .el-switch__label.is-active { |
| | | display: block; |
| | | } |
| | | |
| | | &::v-deep .switchStyle.el-switch .el-switch__core, |
| | | &::v-deep .el-switch .el-switch__label { |
| | | width: 50px !important; |
| | | } |
| | | //&::v-deep .switchStyle .el-switch__label { |
| | | // position: absolute; |
| | | // display: none; |
| | | // color: #fff; |
| | | //} |
| | | // |
| | | //&::v-deep .el-switch__core { |
| | | // background-color: rgba(166, 166, 166, 1); |
| | | //} |
| | | // |
| | | //&::v-deep .switchStyle .el-switch__label--left { |
| | | // z-index: 9; |
| | | // left: 20px; |
| | | //} |
| | | // |
| | | //&::v-deep .switchStyle .el-switch__label--right { |
| | | // z-index: 9; |
| | | // left: 4px; |
| | | //} |
| | | // |
| | | //&::v-deep .switchStyle .el-switch__label.is-active { |
| | | // display: block; |
| | | //} |
| | | // |
| | | //&::v-deep .switchStyle.el-switch .el-switch__core, |
| | | //&::v-deep .el-switch .el-switch__label { |
| | | // width: 50px !important; |
| | | //} |
| | | } |
| | | |
| | | &::v-deep .el-dialog__header, |
| | | &::v-deep .el-dialog__body { |
| | | background-color: #06122c; |
| | | } |
| | | |
| | | &::v-deep .el-dialog__header { |
| | | display: flex; |
| | | align-items: center; |
| | | background-color: #fff; |
| | | padding: 20px; |
| | | line-height: 60px; |
| | | } |
| | | |
| | | &::v-deep .el-dialog__title { |
| | | color: #4b9bb7; |
| | | } |
| | | |
| | | &::v-deep .el-dialog__close { |
| | | width: 20px; |
| | | height: 20px; |
| | | // color: #fff; |
| | | } |
| | | |
| | | &::v-deep .el-dialog__body { |
| | | padding: 0; |
| | | } |
| | | //&::v-deep .el-dialog__header, |
| | | //&::v-deep .el-dialog__body { |
| | | // background-color: #06122c; |
| | | //} |
| | | // |
| | | //&::v-deep .el-dialog__header { |
| | | // display: flex; |
| | | // align-items: center; |
| | | // background-color: #fff; |
| | | // padding: 20px; |
| | | // line-height: 60px; |
| | | //} |
| | | // |
| | | //&::v-deep .el-dialog__title { |
| | | // color: #4b9bb7; |
| | | //} |
| | | // |
| | | //&::v-deep .el-dialog__close { |
| | | // width: 20px; |
| | | // height: 20px; |
| | | // // color: #fff; |
| | | //} |
| | | // |
| | | //&::v-deep .el-dialog__body { |
| | | // padding: 0; |
| | | //} |
| | | } |
| | | </style> |
| | | </style> |