大改：重新整理菜单及权限
This commit is contained in:
@@ -1,11 +1,45 @@
|
||||
<template>
|
||||
<a-card
|
||||
style="background-color: transparent"
|
||||
:bordered="false"
|
||||
:body-style="{ padding: '0px' }"
|
||||
>
|
||||
<div class="card-title">
|
||||
<a-typography-title :level="3">应用模块</a-typography-title>
|
||||
<a-alert
|
||||
message="欢迎使用"
|
||||
description="请选择需要安装的插件"
|
||||
type="success"
|
||||
show-icon
|
||||
closable
|
||||
/>
|
||||
<div style="margin: 30px auto; display: flex; justify-content: center">
|
||||
<a-space style="flex-wrap: wrap">
|
||||
<industry-select
|
||||
v-model:value="industry"
|
||||
valueField="label"
|
||||
size="large"
|
||||
placeholder="按行业筛选"
|
||||
class="ele-fluid"
|
||||
@change="onIndustry"
|
||||
/>
|
||||
<a-input-search
|
||||
allow-clear
|
||||
size="large"
|
||||
style="width: 360px"
|
||||
placeholder="请输入搜索关键词"
|
||||
v-model:value="where.keywords"
|
||||
@pressEnter="reload"
|
||||
@search="reload"
|
||||
/>
|
||||
<a-button size="large" @click="reset">重置</a-button>
|
||||
</a-space>
|
||||
</div>
|
||||
<a-tabs v-model:active-key="where.sceneType" @change="onTabs">
|
||||
<a-tab-pane tab="热门推荐" key="recommend" />
|
||||
<a-tab-pane tab="免费热榜" key="free" />
|
||||
<a-tab-pane tab="付费热榜" key="pay" />
|
||||
<a-tab-pane tab="最新上架" key="new" />
|
||||
<a-tab-pane tab="我的收藏" key="collect" />
|
||||
</a-tabs>
|
||||
<a-row :gutter="16">
|
||||
<a-col
|
||||
v-bind="
|
||||
@@ -18,92 +52,66 @@
|
||||
: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"
|
||||
@click="openUrl('/system/plug/detail?id=' + item.companyId)"
|
||||
fallback="https://file.wsdns.cn/20230218/550e610d43334dd2a7f66d5b20bd58eb.svg"
|
||||
/>
|
||||
<div class="info">
|
||||
<a
|
||||
class="name ele-text-heading"
|
||||
<a-card hoverable>
|
||||
<div class="gutter-box">
|
||||
<div class="plug-item">
|
||||
<a-image
|
||||
:height="80"
|
||||
:width="80"
|
||||
:preview="false"
|
||||
:src="item.companyLogo"
|
||||
@click="openUrl('/system/plug/detail?id=' + item.companyId)"
|
||||
>{{ item.tenantName }}</a
|
||||
>
|
||||
<a-rate class="rate" v-model:value="rate" disabled allow-half />
|
||||
<div class="company ele-text-placeholder">
|
||||
<a-typography-text
|
||||
type="secondary"
|
||||
:ellipsis="{ rows: 1, expandable: true, symbol: '...' }"
|
||||
fallback="https://file.wsdns.cn/20230218/550e610d43334dd2a7f66d5b20bd58eb.svg"
|
||||
/>
|
||||
<div class="info">
|
||||
<a
|
||||
class="name ele-text-heading"
|
||||
@click="openUrl('/system/plug/detail?id=' + item.companyId)"
|
||||
>{{ item.tenantName }}</a
|
||||
>
|
||||
{{ item.companyName }}
|
||||
</a-typography-text>
|
||||
<a-rate class="rate" v-model:value="rate" disabled allow-half />
|
||||
<div class="company ele-text-placeholder">
|
||||
<a-typography-text
|
||||
type="secondary"
|
||||
:ellipsis="{ rows: 1, expandable: true, symbol: '...' }"
|
||||
>
|
||||
{{ item.companyName }}
|
||||
</a-typography-text>
|
||||
</div>
|
||||
</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"
|
||||
>安装 {{ 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 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"
|
||||
>安装 {{ 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>
|
||||
</div>
|
||||
</a-card>
|
||||
<!-- <a-card class="gutter-box" hoverable>-->
|
||||
<!-- <div class="flex-justify">-->
|
||||
<!-- <div class="plug-item">-->
|
||||
<!-- <a-image-->
|
||||
<!-- :height="80"-->
|
||||
<!-- :width="80"-->
|
||||
<!-- :preview="false"-->
|
||||
<!-- :src="item.companyLogo"-->
|
||||
<!-- fallback="https://file.wsdns.cn/20230218/550e610d43334dd2a7f66d5b20bd58eb.svg"-->
|
||||
<!-- />-->
|
||||
<!-- <div class="info">-->
|
||||
<!-- <span class="name ele-text-heading">{{ item.tenantName }}</span>-->
|
||||
<!-- <a-rate class="rate" v-model:value="rate" disabled allow-half />-->
|
||||
<!-- <div class="company ele-text-placeholder">-->
|
||||
<!-- <a-typography-text-->
|
||||
<!-- type="secondary"-->
|
||||
<!-- :ellipsis="{ rows: 1, expandable: true, symbol: '..' }"-->
|
||||
<!-- >-->
|
||||
<!-- {{ item.companyName }}-->
|
||||
<!-- </a-typography-text>-->
|
||||
<!-- </div>-->
|
||||
<!-- <div class="plug-desc ele-text-secondary">-->
|
||||
<!-- <a-typography-paragraph-->
|
||||
<!-- type="secondary"-->
|
||||
<!-- :ellipsis="{ rows: 2, expandable: true, symbol: '显示' }"-->
|
||||
<!-- :content="item.comments"-->
|
||||
<!-- />-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
<!-- <div class="plug-desc ele-text-secondary">-->
|
||||
<!-- <a-button-->
|
||||
<!-- @click="openUrl('/system/plug/detail?id=' + item.companyId)"-->
|
||||
<!-- >去开通</a-button-->
|
||||
<!-- >-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
<!-- </a-card>-->
|
||||
</a-col>
|
||||
</a-row>
|
||||
<div class="plug-page" v-if="list.length">
|
||||
<a-pagination
|
||||
v-model:current="where.page"
|
||||
v-model:pageSize="where.limit"
|
||||
size="large"
|
||||
:total="total"
|
||||
@change="reload"
|
||||
/>
|
||||
</div>
|
||||
<a-empty v-else />
|
||||
</a-card>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
@@ -116,6 +124,7 @@
|
||||
import useSearch from '@/utils/use-search';
|
||||
import { message } from 'ant-design-vue/es';
|
||||
import { pageCompanyAll } from '@/api/system/company';
|
||||
import { pagePlug } from "@/api/system/plug";
|
||||
|
||||
const props = defineProps<{
|
||||
// 修改回显的数据
|
||||
@@ -129,85 +138,59 @@
|
||||
const searchText = ref('');
|
||||
const rate = ref(3.5);
|
||||
const list = ref<Company[]>([]);
|
||||
const industry = ref<any>();
|
||||
const total = ref<any>(0);
|
||||
const planId = ref<number>(Number(localStorage.getItem('PlanId')));
|
||||
|
||||
// 查询条件
|
||||
const { where, resetFields } = useSearch<CompanyParam>({
|
||||
keywords: undefined,
|
||||
limit: 4,
|
||||
recommend: true,
|
||||
authoritative: 1
|
||||
industryParent: '',
|
||||
industryChild: '',
|
||||
recommend: undefined,
|
||||
authoritative: 1,
|
||||
sceneType: 'recommend',
|
||||
limit: 20,
|
||||
page: 1
|
||||
});
|
||||
|
||||
const reload = () => {
|
||||
resetFields();
|
||||
if (searchText.value) {
|
||||
where.recommend = undefined;
|
||||
where.keywords = searchText.value;
|
||||
const onIndustry = (item: any) => {
|
||||
where.industryChild = item[1];
|
||||
};
|
||||
|
||||
const onTabs = (index) => {
|
||||
if (index == 'recommend') {
|
||||
where.recommend = true;
|
||||
}
|
||||
if (props.use) {
|
||||
if (index == 'free') {
|
||||
where.recommend = false;
|
||||
}
|
||||
if (index == 'pay') {
|
||||
where.recommend = false;
|
||||
}
|
||||
if (index == 'new') {
|
||||
where.sceneType = 'new';
|
||||
}
|
||||
if (index == 'collect') {
|
||||
where.sceneType = 'collect';
|
||||
}
|
||||
reload();
|
||||
};
|
||||
|
||||
const reset = () => {
|
||||
resetFields();
|
||||
reload();
|
||||
};
|
||||
|
||||
const reload = () => {
|
||||
where.sort = 'buys';
|
||||
where.order = 'desc';
|
||||
|
||||
const hide = message.loading('加载中...');
|
||||
pageCompanyAll(where)
|
||||
.then((data) => {
|
||||
if (data?.list) {
|
||||
list.value = data?.list;
|
||||
}
|
||||
})
|
||||
.finally(() => {
|
||||
hide();
|
||||
});
|
||||
pagePlug({}).then((data) => {
|
||||
total.value = data?.count;
|
||||
if (data?.list) {
|
||||
list.value = data?.list;
|
||||
}
|
||||
});
|
||||
};
|
||||
reload();
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.ele-body-card {
|
||||
background-color: transparent;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-top: 10px;
|
||||
}
|
||||
.gutter-row {
|
||||
margin: 0 auto 30px auto;
|
||||
.gutter-box {
|
||||
.plug-item {
|
||||
display: flex;
|
||||
.info {
|
||||
font-size: 14px;
|
||||
margin-left: 6px;
|
||||
.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;
|
||||
min-height: 88px;
|
||||
}
|
||||
.plug-bottom {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -89,14 +89,14 @@
|
||||
</div>
|
||||
<div class="plug-bottom">
|
||||
<div class="downloads ele-text-placeholder"
|
||||
>安装 {{ item.clicks }}</div
|
||||
>
|
||||
>安装 {{ item.clicks }}
|
||||
</div>
|
||||
<a-button type="primary" disabled v-if="planId === item.tenantId"
|
||||
>已安装</a-button
|
||||
>
|
||||
>已安装
|
||||
</a-button>
|
||||
<a-button v-else type="primary" @click="onClone(item)"
|
||||
>安装</a-button
|
||||
>
|
||||
>安装
|
||||
</a-button>
|
||||
</div>
|
||||
</div>
|
||||
</a-card>
|
||||
@@ -204,18 +204,23 @@
|
||||
justify-content: space-between;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.gutter-row {
|
||||
margin: 0 auto 30px auto;
|
||||
|
||||
.gutter-box {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
min-height: 200px;
|
||||
|
||||
.plug-item {
|
||||
display: flex;
|
||||
|
||||
.info {
|
||||
font-size: 14px;
|
||||
margin-left: 6px;
|
||||
|
||||
.name {
|
||||
font-size: 20px;
|
||||
display: -webkit-box;
|
||||
@@ -225,28 +230,34 @@
|
||||
-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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ele-text-heading {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.plug-page {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
@@ -12,22 +12,10 @@
|
||||
|
||||
<script lang="ts" setup>
|
||||
import Tenant from './components/tenant.vue';
|
||||
// import Plug from './components/plug.vue';
|
||||
// const active = ref('list');
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
import * as PlugIcons from '@/layout/menu-icons';
|
||||
|
||||
export default {
|
||||
name: 'SystemPlug',
|
||||
components: PlugIcons
|
||||
name: 'SystemPlug'
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.ele-body-card {
|
||||
background-color: transparent;
|
||||
padding: 20px;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user