admin-vben5/apps/web-antd/src/views/property/maintenance/knowledgeBase/index.vue

<script setup lang="ts">
import {onMounted, reactive, ref} from 'vue';

import {useVbenModal} from '@vben/common-ui';

import {
  knowledgeList,
} from '#/api/property/maintenance/knowledge';
import knowledgeModal from '../knowledge/knowledge-modal.vue';
import {
  Form,
  FormItem,
  SelectOption,
  Select,
  Card,
  CardMeta,
  Row,
  Col,
  Pagination,
  Empty
} from 'ant-design-vue'
import {PlusOutlined} from '@ant-design/icons-vue';
import {getDictOptions} from "#/utils/dict";
import type {KnowledgeForm, KnowledgeVO} from "#/api/property/maintenance/knowledge/model";
import {renderDict} from "#/utils/render";
import knowledgeDetail from '../knowledge/knowledge-detail.vue';
import {ossInfo} from "#/api/system/oss";
const simpleImage = Empty.PRESENTED_IMAGE_SIMPLE;

const [KnowledgeModal, modalApi] = useVbenModal({
  connectedComponent: knowledgeModal,
});

const [KnowledgeDetail, detailApi] = useVbenModal({
  connectedComponent: knowledgeDetail,
});

function handleAdd() {
  modalApi.setData({});
  modalApi.open();
}

interface FormState {
  status?: string | undefined;
  type?: string | undefined;
  pageNum: number;
  pageSize: number;
}

const formState = reactive<FormState>({
  status: undefined,
  type: undefined,
  pageNum: 1,
  pageSize: 8,
});

const pageList = ref<KnowledgeVO[]>([])
const total = ref<number>(0)

const handleClean = () => {
  formState.status = undefined;
  formState.type = undefined;
  formState.pageNum = 1;
  queryPageList()
}

async function queryPageList() {
  const res = await knowledgeList(formState)
  pageList.value = res.rows
  for (const item of pageList.value) {
    if (item.covers) {
      try {
        const res = await ossInfo([item.covers]);
        item.coversPath = res?.[0]?.url;
      } catch (e) {
        item.coversPath = '';
      }
    }
  }
  total.value = res.total
}

onMounted(() => {
  queryPageList()
})

async function handleInfo(row: Required<KnowledgeForm>) {
  detailApi.setData({ id: row.id });
  detailApi.open();
}

</script>

<template>
  <div class="knowledge-content">
    <Form
      :model="formState"
      layout="inline"
      class="form-content"
    >
      <FormItem label="知识分类">
        <Select
          v-model:value="formState.type"
          style="width: 180px"
        >
          <SelectOption v-for="item in getDictOptions('wy_wbzslx')" :value="item.value">
            {{ item.label }}
          </SelectOption>
        </Select>
      </FormItem>
      <FormItem label="发布状态">
        <Select
          v-model:value="formState.status"
          style="width: 180px"
        >
          <SelectOption v-for="item in getDictOptions('wy_wbzszt')" :value="item.value">
            {{ item.label }}
          </SelectOption>
        </Select>
      </FormItem>
      <FormItem>
        <a-button @click="handleClean">重置</a-button>
      </FormItem>
      <FormItem>
        <a-button type="primary" class="primary-button"
                  @click="queryPageList">搜索
        </a-button>
      </FormItem>
    </Form>
    <div class="right-button">
      <a-button @click="handleAdd" type="primary">
        <template #icon>
          <PlusOutlined/>
        </template>
        添加知识
      </a-button>
    </div>
    <div class="middle-card" v-if="pageList.length">
      <Row :gutter="[16, 24]">
        <Col class="gutter-row" :span="6" v-for="item in pageList">
          <div class="gutter-box">
            <Card hoverable @click="handleInfo(item)">
              <template #cover>
                <img class="card-img"
                     alt="图片加载失败"
                     :src="item.coversPath"/>
              </template>
              <CardMeta :title="item.title">
                <template #description>
                  <div class="card-desc">{{ item.depict }}</div>
                  <div class="card-bottom-tag">
                    <component
                      :is="renderDict(item.status,'wy_wbzszt')"
                    />
                    <component
                      :is="renderDict(item.type,'wy_wbzslx')"
                    />
                    <span>{{ item.releaseTime }}</span>
                  </div>
                </template>
              </CardMeta>
            </Card>
          </div>
        </Col>
      </Row>
    </div>
    <div v-else>
      <Empty style="margin-top: 100px" :image="simpleImage"/>
    </div>
    <div class="footer-pagination">
      <span>共 {{ total }} 条记录</span>
      <Pagination v-model:current="formState.pageNum"
                  :showSizeChanger="false"
                  :total="total"
                  :pageSize="formState.pageSize"
                  @change="queryPageList"
                  show-less-items/>
    </div>
    <KnowledgeModal @reload="queryPageList"></KnowledgeModal>
    <KnowledgeDetail></KnowledgeDetail>
  </div>
</template>
<style scoped>
.knowledge-content {
  height: 100%;
  position: relative;
}

.form-content {
  margin: 20px 0 0 20px;
}

.right-button {
  position: absolute;
  right: 10px;
  top: 0;
}

.middle-card {
  padding: 20px;

  .card-img {
    height: 22vh;
  }

  .card-desc {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
  }

  :deep(.ant-card .ant-card-body) {
    padding: 14px 18px;
  }

  .card-bottom-tag {
    display: inline-flex;
    white-space: nowrap;
    overflow: hidden;
  }
}

.footer-pagination {
  padding-left: 20px;

  :deep(.ant-pagination) {
    display: inline;
    float: right;
  }
}

</style>