消息提醒

src/views/tasks/message.vue

@@ -1,18 +1,165 @@
 <template>
-    <div class="hc-layout-box">
-        消息提醒
+    <div class="hc-tasks-message">
+        <div class="menu">
+            <hc-card scrollbar>
+                <hc-menu-simple :datas="menuOptions" :keys="menuKey" @change="handleMenuValue" />
+            </hc-card>
+        </div>
+        <div class="content">
+            <hc-card>
+                <template #header>
+                    <div class="w-32">
+                        <el-select v-model="searchForm.tasksType" clearable block placeholder="任务类型">
+                            <el-option label="暂无接口" value=" 1" />
+                        </el-select>
+                    </div>
+                    <div class="ml-2 w-32">
+                        <el-select v-model="searchForm.smsType" clearable block placeholder="消息类型">
+                            <el-option label="暂无接口" value=" 1" />
+                        </el-select>
+                    </div>
+                    <div class="ml-2 w-64">
+                        <hc-date-picker :dates="betweenTime" clearable @change="betweenTimeUpdate" />
+                    </div>
+                    <div class="ml-2 w-64">
+                        <hc-search-input v-model="searchForm.queryValue" @search="searchClick" />
+                    </div>
+                </template>
+                <template #extra>
+                    <el-button hc-btn type="danger">
+                        <hc-icon name="delete-bin-3" />
+                        <span>删除</span>
+                    </el-button>
+                    <el-button hc-btn type="primary">
+                        <hc-icon name="check" />
+                        <span>批量确认</span>
+                    </el-button>
+                </template>
+                <hc-table
+                    :column="tableColumn" :datas="tableData" :loading="tableLoading"
+                    :index-style="{ width: 60 }" is-check :check-style="{ width: 29 }"
+                    @selection-change="tableSelection"
+                >
+                    <template #key8="{ row }">
+                        <span class="text-red-5">未读</span>
+                        <span class="text-green-5">已读</span>
+                    </template>
+                    <template #action="{ row }">
+                        <el-link type="primary">确认</el-link>
+                        <el-link type="info" disabled>已确认</el-link>
+                    </template>
+                </hc-table>
+                <template #action>
+                    <hc-pages :pages="searchForm" :sizes="[50, 100, 150, 200, 300]" @change="pageChange" />
+                </template>
+            </hc-card>
+        </div>
     </div>
 </template>
 
 <script setup>
-import { onActivated, onMounted, ref, watch } from 'vue'
+import { onActivated, ref } from 'vue'
 
 //渲染完成
 onActivated(() => {
-
+    searchClick()
 })
+
+//搜索和分页数据
+const searchForm = ref({ current: 1, size: 20, total: 0 })
+
+//左侧菜单
+const menuKey = ref('3')
+const menuOptions = ref([
+    //{ key: '1', label: '任务催办', icon: 'alarm-warning', badge: 0 },
+    //{ key: '2', label: '监测预警', icon: 'eye', badge: 0 },
+    { key: '3', label: '废除通知', icon: 'delete-bin-3', badge: 0 },
+    //{ key: '4', label: '工单反馈', icon: 'question-answer', badge: 0 },
+    //{ key: '5', label: '系统消息', icon: 'chat-settings', badge: 0 },
+])
+const handleMenuValue = (item) => {
+    searchForm.value.type = item.key
+    menuKey.value = item.key
+    searchClick()
+}
+
+//日期时间被选择
+const betweenTime = ref(null)
+const betweenTimeUpdate = ({ val, arr }) => {
+    betweenTime.value = arr
+    if (val && val.length > 0) {
+        searchForm.value.startTime = val['start']
+        searchForm.value.endTime = val['end']
+    } else {
+        searchForm.value.startTime = null
+        searchForm.value.endTime = null
+    }
+}
+
+//搜索
+const searchClick = () => {
+    searchForm.value.current = 1
+    getTableData()
+}
+
+//分页被点击
+const pageChange = ({ current, size }) => {
+    searchForm.value.current = current
+    searchForm.value.size = size
+    getTableData()
+}
+
+//表格
+const tableColumn = [
+    { key: 'key1', name: '任务类型' },
+    { key: 'key2', name: '任务名称' },
+    { key: 'key3', name: '开始时间' },
+    { key: 'key4', name: '废除时间' },
+    { key: 'key5', name: '任务流程' },
+    { key: 'key6', name: '驳回人' },
+    { key: 'key7', name: '驳回原因' },
+    { key: 'key8', name: '消息状态' },
+    { key: 'action', name: '操作', width: 94 },
+]
+const tableData = ref([
+    {},
+])
+
+//获取消息数据
+const tableLoading = ref(false)
+const getTableData = () => {
+
+}
+
+//多选
+const tableCheckedKeys = ref([])
+const tableSelection = (rows) => {
+    tableCheckedKeys.value = rows
+}
 </script>
 
 <style lang="scss" scoped>
+.hc-tasks-message {
+    position: relative;
+    display: flex;
+    height: 100%;
+    .menu {
+        position: relative;
+        margin-right: 20px;
+        width: 220px;
+        height: 100%;
 
+    }
+    .menu :deep(.el-card__body) {
+        padding: 0;
+    }
+    .menu :deep(.hc-menu-simple-box) {
+        padding: 10px;
+    }
+    .content {
+        position: relative;
+        height: 100%;
+        flex: 1;
+    }
+}
 </style>