|
|
@@ -3,83 +3,94 @@
|
|
|
<el-dialog
|
|
|
v-loading="loading"
|
|
|
:visible.sync="visible"
|
|
|
- :close-on-press-escape="true"
|
|
|
+ :close-on-press-escape="false"
|
|
|
:close-on-click-modal="false"
|
|
|
- lock-scroll
|
|
|
+ :show-close="false"
|
|
|
append-to-body
|
|
|
- custom-class="home-sys-dialog"
|
|
|
- :title="'我的' + title"
|
|
|
- @close="close"
|
|
|
+ custom-class="home-edit-dialog"
|
|
|
+ title="Setting"
|
|
|
>
|
|
|
- <div class="list-filter">
|
|
|
- <el-form ref="filterForm" :model="formData" inline label-width="100px">
|
|
|
- <el-form-item label="消息标题">
|
|
|
- <el-input v-model="formData.title" class="filter-item" clearable />
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="所属应用系统">
|
|
|
- <el-select v-model="formData.systemCode" clearable filterable placeholder="请输入">
|
|
|
- <el-option v-for="(item) in systemData" :key="item.code" :label="item.name" :value="item.code" />
|
|
|
- </el-select>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="状态">
|
|
|
- <el-select v-model="formData.status" clearable placeholder="请选择">
|
|
|
- <el-option v-for="(item) in statusData" :key="item.code" :label="item.name" :value="item.code" />
|
|
|
- </el-select>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item>
|
|
|
- <el-button type="primary" @click="searchTable">查询</el-button>
|
|
|
- <el-button type="danger" @click="resetTable('filterForm')">重置</el-button>
|
|
|
- </el-form-item>
|
|
|
- </el-form>
|
|
|
+ <div class="drag-container">
|
|
|
+ <div v-loading="allLoading" class="drag-left">
|
|
|
+ <div class="item-filter">
|
|
|
+ list
|
|
|
+ <el-input v-model="systemName" size="mini" clearable class="filter-item-input">
|
|
|
+ <el-button slot="append" icon="el-icon-search" />
|
|
|
+ </el-input>
|
|
|
+ </div>
|
|
|
+ <draggable
|
|
|
+ v-model="allBizData"
|
|
|
+ :group="{name: 'system', pull: 'clone', put: false}"
|
|
|
+ :clone="clone"
|
|
|
+ :sort="false"
|
|
|
+ :move="checkMove"
|
|
|
+ :set-data="setData"
|
|
|
+ filter=".filtered"
|
|
|
+ class="drag-item-box"
|
|
|
+ >
|
|
|
+ <div
|
|
|
+ v-for="(element, index) in allBizData"
|
|
|
+ :key="element.id"
|
|
|
+ class="drag-item"
|
|
|
+ :class="{'filtered': element.isFavorite}"
|
|
|
+ >
|
|
|
+ <i class="el-icon-plus handle-icon" @click="clickAddItem(index)" />
|
|
|
+ <el-avatar :size="56" :src="element.url" />
|
|
|
+ <div class="item-name">{{ element.businessName }}</div>
|
|
|
+ </div>
|
|
|
+ </draggable>
|
|
|
+ <div v-if="allBizTotal > 0" class="page">
|
|
|
+ <el-pagination
|
|
|
+ small
|
|
|
+ layout="prev, pager, next"
|
|
|
+ :current-page="current"
|
|
|
+ :total="allBizTotal"
|
|
|
+ :page-size="size"
|
|
|
+ @current-change="handleCurrentChange"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div v-loading="myLoading" class="drag-right">
|
|
|
+ <div class="drag-title">My
|
|
|
+ <div class="item-tip">tip</div>
|
|
|
+ </div>
|
|
|
+ <el-scrollbar class="my-scroll-box">
|
|
|
+ <draggable
|
|
|
+ :list="myBizData"
|
|
|
+ group="system"
|
|
|
+ class="drag-item-box"
|
|
|
+ :set-data="setData"
|
|
|
+ @add="addItem"
|
|
|
+ >
|
|
|
+ <div v-for="(element, index) in myBizData" :key="element.id" class="drag-item">
|
|
|
+ <i class="el-icon-minus handle-icon" @click="clickRemoveItem(index)" />
|
|
|
+ <el-avatar :size="56" src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png" />
|
|
|
+ <div class="item-content">
|
|
|
+ <div class="item-name">{{ element.businessName }}</div>
|
|
|
+ <div class="item-system">{{ element.appName }}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </draggable>
|
|
|
+ </el-scrollbar>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- <div class="list-table">
|
|
|
- <el-table :data="tableData" fit border stripe height="300" style="width: 100%;">
|
|
|
- <el-table-column type="index" label="序号" width="50" />
|
|
|
- <el-table-column prop="messageType" label="消息类型" :formatter="formatDictData" width="100" show-overflow-tooltip />
|
|
|
- <el-table-column prop="title" label="消息标题" show-overflow-tooltip />
|
|
|
- <el-table-column prop="system" label="所属应用系统" width="160" show-overflow-tooltip />
|
|
|
- <el-table-column prop="readStatus" label="状态" :formatter="formatDictData" width="60" />
|
|
|
- <el-table-column prop="createTime" label="消息接收时间" width="160" />
|
|
|
- <el-table-column prop="createUser" label="消息发送人" width="100" show-overflow-tooltip />
|
|
|
- <el-table-column label="操作" align="center" width="160" class-name="action-column">
|
|
|
- <template slot-scope="scope">
|
|
|
- <!-- <el-button type="text" @click="viewDetail(scope.row.id)">详情</el-button> -->
|
|
|
- <el-button type="text" @click="viewDetail(scope.row.content)">详情</el-button>
|
|
|
- <el-button v-if="scope.row.readStatus === 0" type="text" @click="markRead(scope.row)">不再提醒</el-button>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- </el-table>
|
|
|
+ <div slot="footer">
|
|
|
+ <el-button size="small" @click="close">Cancel</el-button>
|
|
|
+ <el-button type="primary" size="small" @click="saveFavorite">Confirm</el-button>
|
|
|
</div>
|
|
|
- <div v-if="total > 0" class="page">
|
|
|
- <el-pagination
|
|
|
- layout="total, sizes, prev, pager, next, jumper"
|
|
|
- :current-page="current"
|
|
|
- :total="total"
|
|
|
- :page-sizes="pageSizeAll"
|
|
|
- :page-size="size"
|
|
|
- @size-change="handleSizeChange"
|
|
|
- @current-change="handleCurrentChange"
|
|
|
- />
|
|
|
- </div>
|
|
|
- </el-dialog>
|
|
|
- <el-dialog
|
|
|
- :visible.sync="detailVisible"
|
|
|
- :close-on-press-escape="true"
|
|
|
- :close-on-click-modal="false"
|
|
|
- lock-scroll
|
|
|
- append-to-body
|
|
|
- title="消息内容"
|
|
|
- @close="closeDetail"
|
|
|
- >
|
|
|
- <pre>{{ content }}</pre>
|
|
|
</el-dialog>
|
|
|
</div>
|
|
|
</template>
|
|
|
<script>
|
|
|
-import { isNull, formatDictData } from '@/utils/convert'
|
|
|
-import { fetchTableList, pushMarkRead } from '@/api/message'
|
|
|
+import draggable from 'vuedraggable'
|
|
|
+
|
|
|
+import { hasValidRecords } from '@/utils/convert'
|
|
|
+import { fetchAllBizList, fetchMyBizList, pushSaveFavorite } from '@/api/biz'
|
|
|
|
|
|
export default {
|
|
|
+ components: {
|
|
|
+ draggable
|
|
|
+ },
|
|
|
props: {},
|
|
|
data() {
|
|
|
return {
|
|
|
@@ -87,102 +98,137 @@ export default {
|
|
|
visible: false,
|
|
|
// table
|
|
|
current: 1,
|
|
|
- size: 20,
|
|
|
- total: 0,
|
|
|
- pageSizeAll: [10, 20, 50, 100, 200, 500],
|
|
|
- tableData: [],
|
|
|
+ size: 15,
|
|
|
+ allBizTotal: 0,
|
|
|
+ allBizData: [],
|
|
|
+ myBizData: [
|
|
|
+ { businessName: 'bizleft4', id: 4 },
|
|
|
+ { businessName: 'bizleft5', id: 5 },
|
|
|
+ { businessName: 'bizleft6', id: 6 },
|
|
|
+ { businessName: 'bizleft7', id: 7 }
|
|
|
+ ],
|
|
|
// filter
|
|
|
formData: {
|
|
|
- title: '',
|
|
|
- systemCode: '',
|
|
|
- status: null
|
|
|
+ systemNumber: '',
|
|
|
+ systemName: '',
|
|
|
+ businessName: '',
|
|
|
+ businessNumber: ''
|
|
|
},
|
|
|
// select data
|
|
|
- typeData: [{ 'code': 4, 'name': '任务类' }, { 'code': 5, 'name': '通知类' }, { 'code': 6, 'name': '超期提醒类' }],
|
|
|
- systemData: [{ 'code': '1', 'name': 'System1' }, { 'code': '2', 'name': 'System2' }],
|
|
|
- statusData: [{ 'code': 0, 'name': '待办' }, { 'code': 1, 'name': '已办' }],
|
|
|
+ systemData: [],
|
|
|
+ businessData: [],
|
|
|
// others
|
|
|
loading: false,
|
|
|
- detailVisible: false,
|
|
|
- content: ''
|
|
|
+ allLoading: false,
|
|
|
+ myLoading: false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ myBizIds() {
|
|
|
+ return this.myBizData.map(item => item.id)
|
|
|
}
|
|
|
},
|
|
|
+ created() {
|
|
|
+ },
|
|
|
methods: {
|
|
|
// 改变每页显示条数
|
|
|
handleSizeChange(val) {
|
|
|
this.current = 1
|
|
|
this.size = val
|
|
|
- this.getTablelist()
|
|
|
+ this.getAllBizList()
|
|
|
},
|
|
|
// 切换第几页
|
|
|
handleCurrentChange(val) {
|
|
|
this.current = val
|
|
|
- this.getTablelist()
|
|
|
+ this.getAllBizList()
|
|
|
},
|
|
|
// 重置搜索项
|
|
|
resetTable(formName) {
|
|
|
this.$refs[formName].resetFields()
|
|
|
- this.getTablelist()
|
|
|
+ this.getAllBizList()
|
|
|
},
|
|
|
// 点击搜索按钮
|
|
|
searchTable() {
|
|
|
this.current = 1
|
|
|
- this.getTablelist()
|
|
|
+ this.getAllBizList()
|
|
|
},
|
|
|
// 获取table数据
|
|
|
- getTablelist() {
|
|
|
- this.loading = true
|
|
|
+ getAllBizList() {
|
|
|
+ this.allLoading = true
|
|
|
const params = {
|
|
|
- current: this.current,
|
|
|
+ page: this.current,
|
|
|
size: this.size,
|
|
|
- title: this.formData.title,
|
|
|
- systemCode: this.formData.systemCode,
|
|
|
- readStatus: this.formData.status
|
|
|
+ params: {
|
|
|
+ delFlag: 0,
|
|
|
+ appName: this.formData.systemName,
|
|
|
+ businessName: this.formData.businessName
|
|
|
+ }
|
|
|
}
|
|
|
- fetchTableList(params).then(response => {
|
|
|
- this.loading = false
|
|
|
- if (!isNull(response.data)) {
|
|
|
- this.tableData = response.data.records
|
|
|
- this.total = response.data.total
|
|
|
+ fetchAllBizList(params).then(response => {
|
|
|
+ this.allLoading = false
|
|
|
+ if (hasValidRecords(response)) {
|
|
|
+ response.data.records.forEach(item => {
|
|
|
+ if (this.myBizIds.includes(item.id)) {
|
|
|
+ item.isFavorite = true
|
|
|
+ } else {
|
|
|
+ item.isFavorite = false
|
|
|
+ }
|
|
|
+ })
|
|
|
+ this.allBizData = response.data.records
|
|
|
+ this.allBizTotal = response.data.total
|
|
|
} else {
|
|
|
- this.tableData = []
|
|
|
- this.total = 0
|
|
|
+ this.allBizData = []
|
|
|
+ this.allBizTotal = 0
|
|
|
}
|
|
|
}).catch(error => {
|
|
|
console.log(error)
|
|
|
- this.loading = false
|
|
|
+ this.allLoading = false
|
|
|
this.$message.error({
|
|
|
type: 'error',
|
|
|
duration: 0,
|
|
|
showClose: true,
|
|
|
- message: '获取消息列表出错: ' + error.message
|
|
|
+ message: error.message
|
|
|
})
|
|
|
})
|
|
|
},
|
|
|
- /**
|
|
|
- * 加载附件界面
|
|
|
- */
|
|
|
- open() {
|
|
|
- this.tableData = []
|
|
|
- this.visible = true
|
|
|
- this.searchTable()
|
|
|
- },
|
|
|
- close() {
|
|
|
- this.visible = false
|
|
|
- },
|
|
|
- viewDetail(content) {
|
|
|
- this.content = content
|
|
|
- this.detailVisible = true
|
|
|
- },
|
|
|
- closeDetail() {
|
|
|
- this.content = ''
|
|
|
- this.detailVisible = false
|
|
|
+ getMyBizList() {
|
|
|
+ this.myLoading = true
|
|
|
+ this.allLoading = true
|
|
|
+ const params = {
|
|
|
+ page: 1,
|
|
|
+ size: 50,
|
|
|
+ params: {
|
|
|
+ delFlag: 0
|
|
|
+ }
|
|
|
+ }
|
|
|
+ fetchMyBizList(params).then(response => {
|
|
|
+ this.myLoading = false
|
|
|
+ if (hasValidRecords(response)) {
|
|
|
+ this.myBizData = response.data.records
|
|
|
+ } else {
|
|
|
+ this.myBizData = []
|
|
|
+ }
|
|
|
+ this.searchTable()
|
|
|
+ }).catch(error => {
|
|
|
+ console.log(error)
|
|
|
+ this.myLoading = false
|
|
|
+ this.$message.error({
|
|
|
+ type: 'error',
|
|
|
+ duration: 0,
|
|
|
+ showClose: true,
|
|
|
+ message: error.message
|
|
|
+ })
|
|
|
+ })
|
|
|
},
|
|
|
- markRead(row) {
|
|
|
+ saveFavorite() {
|
|
|
this.loading = true
|
|
|
- pushMarkRead(row.id).then(res => {
|
|
|
- row.readStatus = 1
|
|
|
+ pushSaveFavorite(this.myBizData).then(res => {
|
|
|
this.loading = false
|
|
|
+ this.visible = false
|
|
|
+ this.$message({
|
|
|
+ type: 'success',
|
|
|
+ message: 'Save Successfully!'
|
|
|
+ })
|
|
|
}).catch(error => {
|
|
|
console.log(error)
|
|
|
this.loading = false
|
|
|
@@ -190,26 +236,173 @@ export default {
|
|
|
type: 'error',
|
|
|
duration: 0,
|
|
|
showClose: true,
|
|
|
- message: '不再提醒操作出错: ' + error.message
|
|
|
+ message: error.message
|
|
|
})
|
|
|
})
|
|
|
},
|
|
|
- formatDictData(row, column, cellValue) {
|
|
|
- let data
|
|
|
- if (column.property === 'messageType') {
|
|
|
- data = this.typeData
|
|
|
- } else if (column.property === 'readStatus') {
|
|
|
- data = this.statusData
|
|
|
- }
|
|
|
- return formatDictData(data, cellValue)
|
|
|
+ /**
|
|
|
+ * 加载dialog
|
|
|
+ */
|
|
|
+ open() {
|
|
|
+ this.allBizData = []
|
|
|
+ this.myBizData = []
|
|
|
+ this.visible = true
|
|
|
+ this.getMyBizList()
|
|
|
+ },
|
|
|
+ close() {
|
|
|
+ this.visible = false
|
|
|
+ },
|
|
|
+ clone(item) {
|
|
|
+ return { ...item }
|
|
|
+ },
|
|
|
+ checkMove(evt) {
|
|
|
+ return !this.myBizIds.includes(evt.draggedContext.element.id)
|
|
|
+ },
|
|
|
+ addItem(evt) {
|
|
|
+ this.allBizData[evt.oldIndex].isFavorite = true
|
|
|
+ },
|
|
|
+ clickAddItem(index) {
|
|
|
+ this.myBizData.push({ ...this.allBizData[index] })
|
|
|
+ this.allBizData[index].isFavorite = true
|
|
|
+ },
|
|
|
+ clickRemoveItem(index) {
|
|
|
+ const removed = this.myBizData.splice(index, 1)[0]
|
|
|
+ this.allBizData.forEach(item => {
|
|
|
+ if (item.id === removed.id) {
|
|
|
+ item.isFavorite = false
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ setData(dataTransfer) {
|
|
|
+ // to avoid Firefox bug
|
|
|
+ // Detail see : https://github.com/RubaXa/Sortable/issues/1012
|
|
|
+ dataTransfer.setData('Text', '')
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
-pre {
|
|
|
- white-space: pre-wrap;
|
|
|
- word-wrap: break-word;
|
|
|
+.drag-container {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+
|
|
|
+ .drag-left, .drag-right {
|
|
|
+ width: 50%;
|
|
|
+ padding: 0 0 20px 20px;
|
|
|
+ max-height: 540px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .drag-left {
|
|
|
+ background-color: #F8F9F9;
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ .page {
|
|
|
+ position: absolute;
|
|
|
+ bottom: 0;
|
|
|
+ left: 0;
|
|
|
+ width: 100%;
|
|
|
+ text-align: center;
|
|
|
+
|
|
|
+ ::v-deep {
|
|
|
+ .btn-prev, .btn-next, .el-pager li{
|
|
|
+ background-color: transparent;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .drag-right {
|
|
|
+ .my-scroll-box {
|
|
|
+ // 48 = drag-title + item-tip - drag-right.margin-bottom
|
|
|
+ height: calc(100% - 48px);
|
|
|
+ margin-top: -2px;
|
|
|
+ }
|
|
|
+
|
|
|
+ ::v-deep {
|
|
|
+ .el-scrollbar__wrap{
|
|
|
+ overflow-x: hidden;
|
|
|
+ padding-top: 2px;
|
|
|
+ }
|
|
|
+ .el-scrollbar__bar.is-horizontal {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .drag-title {
|
|
|
+ font-size: 14px;
|
|
|
+ line-height: 2;
|
|
|
+ height: 28px;
|
|
|
+ color: rgba(0,0,0,0.85);
|
|
|
+ }
|
|
|
+
|
|
|
+ .item-filter, .item-tip {
|
|
|
+ height: 40px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .item-tip {
|
|
|
+ font-size: 12px;
|
|
|
+ line-height: 40px;
|
|
|
+ color: rgba(0,0,0,0.65);
|
|
|
+ }
|
|
|
+
|
|
|
+ .filter-item-input {
|
|
|
+ float: right;
|
|
|
+ width: 150px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .drag-item-box {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ }
|
|
|
+
|
|
|
+ .drag-item {
|
|
|
+ width: 150px;
|
|
|
+ height: 100px;
|
|
|
+ border: 1px solid rgba(0,0,0,0.09);
|
|
|
+ margin-bottom: 10px;
|
|
|
+ margin-right: 20px;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ border-radius: 10px;
|
|
|
+ position: relative;
|
|
|
+ cursor: move;
|
|
|
+ cursor: -webkit-grabbing;
|
|
|
+
|
|
|
+ .handle-icon {
|
|
|
+ display: inline-block;
|
|
|
+ position: absolute;
|
|
|
+ top: -3px;
|
|
|
+ right: -7px;
|
|
|
+ border-radius: 50%;
|
|
|
+ background-color: #FF0000;
|
|
|
+ color: #FFFFFF;
|
|
|
+ cursor: pointer;
|
|
|
+ z-index: 100;
|
|
|
+ }
|
|
|
+
|
|
|
+ &.filtered {
|
|
|
+ cursor: pointer;
|
|
|
+
|
|
|
+ .el-icon-plus {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .item-system {
|
|
|
+ width: 130px;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ overflow: hidden;
|
|
|
+ white-space: nowrap;
|
|
|
+ }
|
|
|
+
|
|
|
+ .item-system {
|
|
|
+ font-size: 14px;
|
|
|
+ color: rgba(0,0,0,0.45);
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|
caiaa1