重新整理仓库
This commit is contained in:
253
src/views/system/plug/list/index.vue
Normal file
253
src/views/system/plug/list/index.vue
Normal file
@@ -0,0 +1,253 @@
|
||||
<template>
|
||||
<a-page-header
|
||||
:title="title"
|
||||
:sub-title="subTitle"
|
||||
@back="() => $router.go(-1)"
|
||||
>
|
||||
<template #extra>
|
||||
<a-tabs v-model:activeKey="activeKey" @change="onTabs">
|
||||
<a-tab-pane key="free" tab="免费热门" />
|
||||
<a-tab-pane key="pay" tab="付费热门" />
|
||||
<a-tab-pane key="new" tab="最新上架" />
|
||||
<a-tab-pane key="collect" tab="我的收藏" />
|
||||
</a-tabs>
|
||||
</template>
|
||||
<template v-if="list.length > 0">
|
||||
<a-row :gutter="16">
|
||||
<a-col
|
||||
v-bind="
|
||||
styleResponsive
|
||||
? { xl: 6, lg: 12, md: 12, sm: 24, xs: 24 }
|
||||
: { span: 12 }
|
||||
"
|
||||
class="gutter-row"
|
||||
v-for="(item, index) in list"
|
||||
:key="index"
|
||||
:span="6"
|
||||
>
|
||||
<a-card class="gutter-box" hoverable>
|
||||
<div class="plug-item">
|
||||
<a-image
|
||||
:height="80"
|
||||
:width="80"
|
||||
:preview="false"
|
||||
:src="item.companyLogo"
|
||||
style="margin-right: 10px"
|
||||
fallback="https://file.wsdns.cn/20230218/550e610d43334dd2a7f66d5b20bd58eb.svg"
|
||||
/>
|
||||
<div class="info">
|
||||
<a
|
||||
class="name ele-text-heading"
|
||||
@click="openUrl('/system/plug/detail/' + item.companyId)"
|
||||
>{{ item.tenantName }}</a
|
||||
>
|
||||
<a-rate
|
||||
class="rate"
|
||||
v-model:value="rate"
|
||||
disabled
|
||||
allow-half
|
||||
/>
|
||||
<div class="company ele-text-placeholder">
|
||||
<a-typography-paragraph
|
||||
type="secondary"
|
||||
:ellipsis="{ rows: 2, expandable: true, symbol: '...' }"
|
||||
>
|
||||
{{ item.companyName }}
|
||||
</a-typography-paragraph>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="plug-desc ele-text-secondary">
|
||||
<a-typography-paragraph
|
||||
type="secondary"
|
||||
:ellipsis="{ rows: 2, expandable: true, symbol: '显示' }"
|
||||
:content="item.comments"
|
||||
/>
|
||||
</div>
|
||||
<div class="plug-bottom">
|
||||
<div
|
||||
class="downloads ele-text-placeholder"
|
||||
@click="() => openNotification('success', '开发中')"
|
||||
>
|
||||
安装 {{ item.clicks }}</div
|
||||
>
|
||||
<a-button type="primary" disabled v-if="planId === item.tenantId"
|
||||
>已安装</a-button
|
||||
>
|
||||
<a-button v-else type="primary" @click="onClone(item)"
|
||||
>安装</a-button
|
||||
>
|
||||
</div>
|
||||
</a-card>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</template>
|
||||
</a-page-header>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, unref, watch } from 'vue';
|
||||
import { pageCompanyAll } from '@/api/system/company';
|
||||
import { Company, CompanyParam } from '@/api/system/company/model';
|
||||
import { openUrl } from '@/utils/common';
|
||||
import { notification } from 'ant-design-vue';
|
||||
import useSearch from '@/utils/use-search';
|
||||
import { useRouter } from 'vue-router';
|
||||
import { setPageTabTitle } from '@/utils/page-tab-util';
|
||||
import { useThemeStore } from '@/store/modules/theme';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { onClone } from '@/utils/plug-uitl';
|
||||
import { message } from 'ant-design-vue/es';
|
||||
const ROUTE_PATH = '/system/plug/list';
|
||||
// 是否开启响应式布局
|
||||
const themeStore = useThemeStore();
|
||||
const { styleResponsive } = storeToRefs(themeStore);
|
||||
const rate = ref(3.5);
|
||||
const title = ref('Tenant');
|
||||
const subTitle = ref('租户系统');
|
||||
const { currentRoute } = useRouter();
|
||||
const list = ref<Company[]>([]);
|
||||
const searchText = ref('');
|
||||
const activeKey = ref('free');
|
||||
const planId = ref<number>(Number(localStorage.getItem('PlanId')));
|
||||
|
||||
/**
|
||||
* 通知提醒框
|
||||
*/
|
||||
const openNotification = (type: string, text: string) => {
|
||||
notification[type]({
|
||||
message: '通知提醒框',
|
||||
description: text
|
||||
});
|
||||
};
|
||||
|
||||
// 查询条件
|
||||
const { where, resetFields } = useSearch<CompanyParam>({
|
||||
keywords: undefined,
|
||||
limit: 500,
|
||||
recommend: undefined,
|
||||
authoritative: 1,
|
||||
sort: 'buys',
|
||||
order: 'desc'
|
||||
});
|
||||
|
||||
const onTabs = () => {
|
||||
resetFields();
|
||||
if (activeKey.value == 'new') {
|
||||
where.sort = 'createTime';
|
||||
where.order = 'desc';
|
||||
}
|
||||
if (activeKey.value == 'free') {
|
||||
where.sort = 'buys';
|
||||
where.order = 'desc';
|
||||
}
|
||||
if (activeKey.value == 'pay') {
|
||||
where.sort = 'likes';
|
||||
where.order = 'desc';
|
||||
}
|
||||
if (activeKey.value == 'collect') {
|
||||
where.sceneType = 'collect';
|
||||
where.limit = 0;
|
||||
}
|
||||
reload();
|
||||
};
|
||||
|
||||
const reload = () => {
|
||||
if (searchText.value) {
|
||||
where.keywords = searchText.value;
|
||||
}
|
||||
const hide = message.loading('加载中...');
|
||||
pageCompanyAll(where)
|
||||
.then((data) => {
|
||||
if (data?.list) {
|
||||
list.value = data.list;
|
||||
}
|
||||
})
|
||||
.finally(() => {
|
||||
hide();
|
||||
});
|
||||
};
|
||||
|
||||
reload();
|
||||
|
||||
watch(
|
||||
currentRoute,
|
||||
(route) => {
|
||||
const { path } = unref(route);
|
||||
if (path !== ROUTE_PATH) {
|
||||
return;
|
||||
}
|
||||
|
||||
const { query } = unref(currentRoute);
|
||||
const { type } = query;
|
||||
if (type == 'Tenant') {
|
||||
title.value = 'Tenant';
|
||||
subTitle.value = '租户系统';
|
||||
setPageTabTitle('租户系统');
|
||||
} else if (type == 'Vue') {
|
||||
title.value = 'Vue';
|
||||
subTitle.value = 'Vue开发的应用';
|
||||
setPageTabTitle('Vue开发的应用');
|
||||
} else if (type == 'UniApp') {
|
||||
title.value = 'UniApp';
|
||||
subTitle.value = '使用UniApp开发的移动应用';
|
||||
setPageTabTitle('使用UniApp开发的移动应用');
|
||||
} else if (type == 'WebSite') {
|
||||
title.value = 'WebSite';
|
||||
subTitle.value = '网站应用';
|
||||
setPageTabTitle('网站应用');
|
||||
}
|
||||
},
|
||||
{ immediate: true }
|
||||
);
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
import * as PlugIcons from '@/layout/menu-icons';
|
||||
|
||||
export default {
|
||||
name: 'SystemPlug',
|
||||
components: PlugIcons
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.ele-body-card {
|
||||
background-color: transparent;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.gutter-row {
|
||||
margin: 15px auto;
|
||||
.gutter-box {
|
||||
.plug-item {
|
||||
display: flex;
|
||||
.info {
|
||||
font-size: 14px;
|
||||
.name {
|
||||
font-size: 20px;
|
||||
display: -webkit-box;
|
||||
overflow: hidden;
|
||||
-webkit-box-orient: vertical;
|
||||
text-overflow: ellipsis;
|
||||
-webkit-line-clamp: 2;
|
||||
font-weight: 500;
|
||||
}
|
||||
.rate {
|
||||
font-size: 13px;
|
||||
}
|
||||
.company {
|
||||
}
|
||||
}
|
||||
}
|
||||
.plug-desc {
|
||||
padding: 10px 0;
|
||||
font-size: 16px;
|
||||
}
|
||||
.plug-bottom {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user