wms-antdvue/.svn/pristine/6b/6bbebf586f92c156e77830d77d04f44b1dd70153.svn-base

<template>
  <PageWrapper>
    <a-row :gutter="10" class="mt-3">
      <a-col :xs="24" :sm="24" :md="3" :lg="3" :xl="3">
        <a-card shadow="hover" class="border-0 proCard" :style="{ height: docHeight + 'px' }">
          <div v-for="(item,index) in messageTypeList" :key="index" @click="handleClick(item,index)" class="type-item" :class="index==activeIndex?'active':''">
            <a-badge :count="item.number?item.number:''" class="item">
             <span class="t1">{{item.name}}</span>
            </a-badge>
          </div>
        </a-card>
      </a-col>
      <a-col :xs="24" :sm="24" :md="21" :lg="21" :xl="21">
        <a-card shadow="hover" class="border-0 proCard">
          <BasicTable
            :columns="columns"
            :request="loadDataTable"
            :row-key="(row) => row.id"
            ref="tableRef"
             :row-selection="{onChange: onSelectionChange}"
          >
            <template #tableTitle>
              <a-space>
                <a-button type="primary" @click="handleSetRead()">
                  批量确认
                </a-button>
                <a-button type="danger" @click="handleDelete()" :disabled="!selectionData.length">
                  <template #icon>
                  <DeleteOutlined />
                </template>
                    删除
                  </a-button>
              </a-space>
            </template>
            <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'action'">
            <a-space>
              <a-button type="primary" @click="handleSetRead(record.id)">
                <template #icon><CheckOutlined /></template>
                确认
              </a-button>
              <a-button type="primary" @click="handleInfo(record.id)">
                <template #icon><EditOutlined /></template>
                详情
              </a-button>
              <a-button type="primary" danger @click="handleDelete(record.id)">
                <template #icon><DeleteOutlined /></template>
                删除
              </a-button>
            </a-space>
            </template>
          </template>
          </BasicTable>
        </a-card>
      </a-col>
    </a-row>
    <editDialog
        v-if="editVisible"
        :messageId="messageId"
        v-model:visible="editVisible"
        @success="reloadTable('noRefresh')"
    >
    </editDialog>
  </PageWrapper>
</template>

<script lang="ts" setup>
  import { reactive, ref, h,nextTick,defineAsyncComponent,onMounted } from 'vue';
  import {EditOutlined,DeleteOutlined,CheckOutlined} from '@ant-design/icons-vue';
  import { getMessageProfile,messageDelete,messageBatchDelete,setRead } from '@/api/dashboard/message';
  import { columns } from './columns';
  import { Modal,message } from 'ant-design-vue';
  const editDialog = defineAsyncComponent(() =>
    import('./edit.vue')
)
const messageId =ref(0)
const docHeight = ref(500)
const activeIndex = ref(0)
const messageTypeList = ref([
  {
    name:'系统通知',
    value:1
  },
  {
    name:'用户私信',
    value:2
  },
  {
    name:'代办事项',
    value:3
  },
])
const editVisible=ref(false)
  const selectionData = ref([])
  const tableRef = ref();
  const formParams = reactive({
    type:1
  });

  const loadDataTable = async (res: any) => {
    const result = await getMessageProfile({ ...formParams, ...res });
    let item = messageTypeList.value.find((item,index)=>index==activeIndex.value)
    item.number = result.number
    return result;
  };

  function reloadTable(noRefresh='') {
    tableRef.value.reload(noRefresh?{}:{pageNo:1});
  }
const handleClick = (item,index)=>{
  activeIndex.value =index
  formParams.type = item.value
  reloadTable()
}

const handleInfo = async (id) => {
  messageId.value=id
  await nextTick();
  editVisible.value=true
};

async function handleDelete(id) {
    Modal.confirm({
      title: '提示',
      content: "确定要删除？",
      onOk: async () => {
        id? await messageDelete(id):await messageBatchDelete(selectionData.value);
        message.success("删除成功");
        reloadTable()
      }
    });
}
async function handleSetRead(id) {
    Modal.confirm({
      title: '提示',
      content: "确定标记为已读？",
      onOk: async () => {
        id? await setRead(id):await setRead(selectionData.value);
        message.success("标记成功");
        reloadTable()
      }
    });
}
function onSelectionChange(value){
    selectionData.value = value
  }
  onMounted(() => {
  docHeight.value =document.body.clientHeight - 160
})
</script>

<style lang="less">
.type-item {
  height: 40px;
  padding:0 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .t1 {
    width: 100px;
    display: block;
  }
  &.active {
    background-color: #e8f1ff;
    border-radius: 3px;
    .t1 {
      color:#1677ff;
      .t2 {
        background-color: #ff4d4f;
        color: #ffffff;
      }
    }
  }
  .ant-badge__content.is-fixed{
    top: 20px;
    right: calc(-10px + var(--ant-badge-size)/ 2);
  }
}
</style>