工作台

src/components/global/search-form/components/search-form-item.vue

@@ -35,9 +35,6 @@
   <template v-if="item.type == undefined || item.type == 'text'">
     <t-input v-model="params[item.prop]" v-bind="attrs" />
   </template>
-  <template v-if="item.type == 'number'">
-    <t-input-number v-model="params[item.prop]" v-bind="attrs" />
-  </template>
   <!-- 下拉选择框 -->
   <template v-if="item.type == 'select' || item.type == 'multipleSelect'">
     <t-select

src/views/my-workbenches/workbenches/message-reminder/index.vue

@@ -9,8 +9,23 @@
       </template>
     </SearchForm>
     <div class="page-wrap flex-1">
-      <t-tabs v-model="status" class="m-t-20px">
-        <t-tab-panel value="0" label="全部">111</t-tab-panel>
+      <t-tabs v-model="params.status" class="h-full">
+        <t-tab-panel value="undefined" label="全部">
+          <MessageList
+            :loading="loading1"
+            :tableData="tableData1"
+            :pagination="pagination1"
+            :onChange="onChange1"
+          ></MessageList>
+        </t-tab-panel>
+        <t-tab-panel value="false" label="未读">
+          <MessageList
+            :loading="loading1"
+            :tableData="tableData1"
+            :pagination="pagination1"
+          ></MessageList>
+        </t-tab-panel>
+        <t-tab-panel value="true" label="已读">111</t-tab-panel>
       </t-tabs>
     </div>
   </div>
@@ -22,19 +37,23 @@ import useFetchTable from '@/hooks/useFetchTable';
 import { getMyMessages } from '@/api/my-workbenches';
 import { MESSAGE_TYPE } from '@/config/constants';
 import { dictToOptionList } from '@/utils/tool';
+import MessageList from './message-list.vue';
 const params = reactive({
   types: [],
   serviceId: '',
   custom: '',
+  status: 'undefined',
 });
 const transParams = computed(() => {
   let types = params.types.join(',');
-  return { ...params, types };
+  let status = eval(params.status);
+  return { ...params, types, status };
 });
 const {
   loading: loading1,
   pagination: pagination1,
   tableData: tableData1,
+  onChange: onChange1,
   search: search1,
 } = useFetchTable(getMyMessages, {
   params: transParams,
@@ -64,7 +83,6 @@ const fields = ref([
     label: '客户名称',
     labelWidth: 100,
     colSpan: 5,
-    cell: 'service',
   },
   {
     type: 'buttons',
@@ -82,4 +100,13 @@ const fields = ref([
 ]);
 </script>
 
-<style></style>
+<style lang="less" scoped>
+.message-reminder {
+  .page-wrap {
+    :deep(.t-tabs__content) {
+      height: calc(100% - var(--td-comp-size-xxl));
+      overflow: auto;
+    }
+  }
+}
+</style>

src/views/my-workbenches/workbenches/message-reminder/message-list.vue

@@ -0,0 +1,106 @@
+<template>
+  <div class="message-list">
+    <div class="message-item cursor-pointer">
+      <div class="m-head flex items-center">
+        <span class="m-title">违规提醒</span>
+        <t-tag theme="danger" variant="light">未读</t-tag>
+      </div>
+      <div class="m-body">
+        <div class="m-content"
+          >您的SOP出现“内容违规”，请及时联系您的项目主管进行处理！</div
+        >
+        <div class="m-info flex items-center">
+          <p>发起人：张三</p>
+          <p>服务单元：416计划</p>
+          <p>客户类型：XXX</p>
+          <p>客户名称：武汉大学</p>
+        </div>
+      </div>
+    </div>
+    <div
+      class="message-item cursor-pointer"
+      v-for="item in tableData"
+      :key="item.id"
+    >
+      <div class="m-head">
+        <span class="m-title">{{ item.messageType }}</span>
+        <t-tag theme="danger" variant="light" v-if="!item.readStatus"
+          >未读</t-tag
+        >
+      </div>
+      <div class="m-body">
+        <div class="m-content">{{ item.content }}</div>
+        <div class="m-info flex items-center">
+          <p>发起人：{{ item.formUser }}</p>
+          <p>服务单元：416计划 {{ item.service }} </p>
+          <p>客户类型：{{ item.customType }}</p>
+          <p>客户名称：{{ item.custom }}</p>
+        </div>
+      </div>
+    </div>
+
+    <t-pagination
+      class="m-t-20px"
+      v-model="pagination.pageNumber"
+      v-model:pageSize="pagination.pageSize"
+      :total="pagination.total"
+      @change="onChange"
+    />
+  </div>
+</template>
+
+<script setup name="MessageList">
+const { tableData, loading, pagination, onChange } = defineProps([
+  'tableData',
+  'loading',
+  'pagination',
+  'onChange',
+]);
+console.log(tableData, loading, pagination);
+</script>
+
+<style lang="less" scoped>
+.message-list {
+  .message-item {
+    border: 1px solid #e5e5e5;
+    border-radius: 4px;
+    background-color: #fff;
+    padding: 0 15px;
+    &:hover {
+      background-color: #f7f7f7;
+    }
+    .m-head {
+      height: 55px;
+      border-bottom: 1px solid #e5e5e5;
+      .m-title {
+        font-size: 16px;
+        color: #262626;
+        font-weight: bold;
+        line-height: 54px;
+        margin-right: 12px;
+      }
+    }
+    .m-body {
+      padding: 15px 0;
+      .m-content {
+        color: #595959;
+        font-size: 14px;
+        font-weight: bold;
+      }
+      .m-info {
+        margin-top: 20px;
+        p {
+          padding-right: 20px;
+          border-right: 1px solid #e5e5e5;
+          color: @light-text-color;
+          line-height: 1;
+          margin-right: 20px;
+          &:last-child {
+            border-right: none;
+          }
+        }
+      }
+    }
+  }
+}
+</style>