mirror of
https://gitee.com/ccnetcore/Yi
synced 2026-04-07 17:56:36 +08:00
feat:新增pure-admin前端
This commit is contained in:
chenchun
161
Yi.Pure.Vue3/src/views/list/card/components/ListCard.vue
Normal file
161
Yi.Pure.Vue3/src/views/list/card/components/ListCard.vue
Normal file
@@ -0,0 +1,161 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, PropType } from "vue";
|
||||
import shopIcon from "@/assets/svg/shop.svg?component";
|
||||
import laptopIcon from "@/assets/svg/laptop.svg?component";
|
||||
import serviceIcon from "@/assets/svg/service.svg?component";
|
||||
import calendarIcon from "@/assets/svg/calendar.svg?component";
|
||||
import userAvatarIcon from "@/assets/svg/user_avatar.svg?component";
|
||||
import More2Fill from "@iconify-icons/ri/more-2-fill";
|
||||
|
||||
defineOptions({
|
||||
name: "ReCard"
|
||||
});
|
||||
|
||||
interface CardProductType {
|
||||
type: number;
|
||||
isSetup: boolean;
|
||||
description: string;
|
||||
name: string;
|
||||
}
|
||||
|
||||
const props = defineProps({
|
||||
product: {
|
||||
type: Object as PropType<CardProductType>
|
||||
}
|
||||
});
|
||||
|
||||
const emit = defineEmits(["manage-product", "delete-item"]);
|
||||
|
||||
const handleClickManage = (product: CardProductType) => {
|
||||
emit("manage-product", product);
|
||||
};
|
||||
|
||||
const handleClickDelete = (product: CardProductType) => {
|
||||
emit("delete-item", product);
|
||||
};
|
||||
|
||||
const cardClass = computed(() => [
|
||||
"list-card-item",
|
||||
{ "list-card-item__disabled": !props.product.isSetup }
|
||||
]);
|
||||
|
||||
const cardLogoClass = computed(() => [
|
||||
"list-card-item_detail--logo",
|
||||
{ "list-card-item_detail--logo__disabled": !props.product.isSetup }
|
||||
]);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div :class="cardClass">
|
||||
<div class="list-card-item_detail bg-bg_color">
|
||||
<el-row justify="space-between">
|
||||
<div :class="cardLogoClass">
|
||||
<shopIcon v-if="product.type === 1" />
|
||||
<calendarIcon v-if="product.type === 2" />
|
||||
<serviceIcon v-if="product.type === 3" />
|
||||
<userAvatarIcon v-if="product.type === 4" />
|
||||
<laptopIcon v-if="product.type === 5" />
|
||||
</div>
|
||||
<div class="list-card-item_detail--operation">
|
||||
<el-tag
|
||||
:color="product.isSetup ? '#00a870' : '#eee'"
|
||||
effect="dark"
|
||||
class="mx-1 list-card-item_detail--operation--tag"
|
||||
>
|
||||
{{ product.isSetup ? "已启用" : "已停用" }}
|
||||
</el-tag>
|
||||
<el-dropdown trigger="click" :disabled="!product.isSetup">
|
||||
<IconifyIconOffline :icon="More2Fill" class="text-[24px]" />
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu :disabled="!product.isSetup">
|
||||
<el-dropdown-item @click="handleClickManage(product)">
|
||||
管理
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item @click="handleClickDelete(product)">
|
||||
删除
|
||||
</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
</div>
|
||||
</el-row>
|
||||
<p class="list-card-item_detail--name text-text_color_primary">
|
||||
{{ product.name }}
|
||||
</p>
|
||||
<p class="list-card-item_detail--desc text-text_color_regular">
|
||||
{{ product.description }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.list-card-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-bottom: 12px;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
border-radius: 3px;
|
||||
|
||||
&_detail {
|
||||
flex: 1;
|
||||
min-height: 140px;
|
||||
padding: 24px 32px;
|
||||
|
||||
&--logo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 46px;
|
||||
height: 46px;
|
||||
font-size: 26px;
|
||||
color: #0052d9;
|
||||
background: #e0ebff;
|
||||
border-radius: 50%;
|
||||
|
||||
&__disabled {
|
||||
color: #a1c4ff;
|
||||
}
|
||||
}
|
||||
|
||||
&--operation {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
|
||||
&--tag {
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&--name {
|
||||
margin: 24px 0 8px;
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
&--desc {
|
||||
display: -webkit-box;
|
||||
height: 40px;
|
||||
margin-bottom: 24px;
|
||||
overflow: hidden;
|
||||
font-size: 12px;
|
||||
line-height: 20px;
|
||||
text-overflow: ellipsis;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
}
|
||||
|
||||
&__disabled {
|
||||
.list-card-item_detail--name,
|
||||
.list-card-item_detail--desc {
|
||||
color: var(--el-text-color-disabled);
|
||||
}
|
||||
|
||||
.list-card-item_detail--operation--tag {
|
||||
color: #bababa;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
148
Yi.Pure.Vue3/src/views/list/card/components/ListDialogForm.vue
Normal file
148
Yi.Pure.Vue3/src/views/list/card/components/ListDialogForm.vue
Normal file
@@ -0,0 +1,148 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, watch } from "vue";
|
||||
import { message } from "@/utils/message";
|
||||
import { FormInstance } from "element-plus";
|
||||
|
||||
const SELECT_OPTIONS = [
|
||||
{ label: "网关", value: 1 },
|
||||
{ label: "人工智能", value: 2 },
|
||||
{ label: "CVM", value: 3 },
|
||||
{ label: "防火墙", value: 4 },
|
||||
{ label: "未知", value: 5 }
|
||||
];
|
||||
|
||||
const props = defineProps({
|
||||
visible: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
data: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {};
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
const ruleFormRef = ref<FormInstance>();
|
||||
|
||||
const formVisible = ref(false);
|
||||
const formData = ref(props.data);
|
||||
const textareaValue = ref("");
|
||||
|
||||
const submitForm = async (formEl: FormInstance | undefined) => {
|
||||
if (!formEl) return;
|
||||
await formEl.validate(valid => {
|
||||
if (valid) {
|
||||
message("提交成功", { type: "success" });
|
||||
formVisible.value = false;
|
||||
resetForm(formEl);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const resetForm = (formEl: FormInstance | undefined) => {
|
||||
if (!formEl) return;
|
||||
formEl.resetFields();
|
||||
};
|
||||
|
||||
const closeDialog = () => {
|
||||
formVisible.value = false;
|
||||
resetForm(ruleFormRef.value);
|
||||
};
|
||||
|
||||
const emit = defineEmits(["update:visible"]);
|
||||
watch(
|
||||
() => formVisible.value,
|
||||
val => {
|
||||
emit("update:visible", val);
|
||||
}
|
||||
);
|
||||
|
||||
watch(
|
||||
() => props.visible,
|
||||
val => {
|
||||
formVisible.value = val;
|
||||
}
|
||||
);
|
||||
|
||||
watch(
|
||||
() => props.data,
|
||||
val => {
|
||||
formData.value = val;
|
||||
}
|
||||
);
|
||||
|
||||
const rules = {
|
||||
name: [{ required: true, message: "请输入产品名称", trigger: "blur" }]
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<el-dialog
|
||||
v-model="formVisible"
|
||||
title="新建产品"
|
||||
:width="680"
|
||||
draggable
|
||||
:before-close="closeDialog"
|
||||
>
|
||||
<!-- 表单内容 -->
|
||||
<el-form
|
||||
ref="ruleFormRef"
|
||||
:model="formData"
|
||||
:rules="rules"
|
||||
label-width="100px"
|
||||
>
|
||||
<el-form-item label="产品名称" prop="name">
|
||||
<el-input
|
||||
v-model="formData.name"
|
||||
:style="{ width: '480px' }"
|
||||
placeholder="请输入产品名称"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="产品状态" prop="status">
|
||||
<el-radio-group v-model="formData.status">
|
||||
<el-radio value="0">已停用</el-radio>
|
||||
<el-radio value="1">已启用</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="产品描述" prop="description">
|
||||
<el-input
|
||||
v-model="formData.description"
|
||||
:style="{ width: '480px' }"
|
||||
placeholder="请输入产品描述"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="产品类型" prop="type">
|
||||
<el-select
|
||||
v-model="formData.type"
|
||||
clearable
|
||||
:style="{ width: '480px' }"
|
||||
>
|
||||
<el-option
|
||||
v-for="(item, index) in SELECT_OPTIONS"
|
||||
:key="index"
|
||||
:value="item.value"
|
||||
:label="item.label"
|
||||
>
|
||||
{{ item.label }}
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="备注" prop="mark">
|
||||
<el-input
|
||||
v-model="textareaValue"
|
||||
type="textarea"
|
||||
:style="{ width: '480px' }"
|
||||
placeholder="请输入内容"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<el-button @click="closeDialog">取消</el-button>
|
||||
<el-button type="primary" @click="submitForm(ruleFormRef)">
|
||||
确定
|
||||
</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
177
Yi.Pure.Vue3/src/views/list/card/index.vue
Normal file
177
Yi.Pure.Vue3/src/views/list/card/index.vue
Normal file
@@ -0,0 +1,177 @@
|
||||
<script setup lang="ts">
|
||||
import { getCardList } from "@/api/list";
|
||||
import { message } from "@/utils/message";
|
||||
import { ElMessageBox } from "element-plus";
|
||||
import { ref, onMounted, nextTick } from "vue";
|
||||
import ListCard from "./components/ListCard.vue";
|
||||
import ListDialogForm from "./components/ListDialogForm.vue";
|
||||
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
|
||||
import AddFill from "@iconify-icons/ri/add-circle-line";
|
||||
|
||||
defineOptions({
|
||||
name: "CardList"
|
||||
});
|
||||
|
||||
const svg = `
|
||||
<path class="path" d="
|
||||
M 30 15
|
||||
L 28 17
|
||||
M 25.61 25.61
|
||||
A 15 15, 0, 0, 1, 15 30
|
||||
A 15 15, 0, 1, 1, 27.99 7.5
|
||||
L 15 15
|
||||
" style="stroke-width: 4px; fill: rgba(0, 0, 0, 0)"/>
|
||||
`;
|
||||
|
||||
const INITIAL_DATA = {
|
||||
name: "",
|
||||
status: "",
|
||||
description: "",
|
||||
type: "",
|
||||
mark: ""
|
||||
};
|
||||
|
||||
const pagination = ref({ current: 1, pageSize: 12, total: 0 });
|
||||
|
||||
const productList = ref([]);
|
||||
const dataLoading = ref(true);
|
||||
|
||||
const getCardListData = async () => {
|
||||
try {
|
||||
const { data } = await getCardList();
|
||||
productList.value = data.list;
|
||||
pagination.value = {
|
||||
...pagination.value,
|
||||
total: data.list.length
|
||||
};
|
||||
} catch (e) {
|
||||
console.log(e);
|
||||
} finally {
|
||||
setTimeout(() => {
|
||||
dataLoading.value = false;
|
||||
}, 500);
|
||||
}
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
getCardListData();
|
||||
});
|
||||
|
||||
const formDialogVisible = ref(false);
|
||||
const formData = ref({ ...INITIAL_DATA });
|
||||
const searchValue = ref("");
|
||||
|
||||
const onPageSizeChange = (size: number) => {
|
||||
pagination.value.pageSize = size;
|
||||
pagination.value.current = 1;
|
||||
};
|
||||
const onCurrentChange = (current: number) => {
|
||||
pagination.value.current = current;
|
||||
};
|
||||
const handleDeleteItem = product => {
|
||||
ElMessageBox.confirm(
|
||||
product
|
||||
? `确认删除后${product.name}的所有产品信息将被清空, 且无法恢复`
|
||||
: "",
|
||||
"提示",
|
||||
{
|
||||
type: "warning"
|
||||
}
|
||||
)
|
||||
.then(() => {
|
||||
message("删除成功", { type: "success" });
|
||||
})
|
||||
.catch(() => {});
|
||||
};
|
||||
const handleManageProduct = product => {
|
||||
formDialogVisible.value = true;
|
||||
nextTick(() => {
|
||||
formData.value = { ...product, status: product?.isSetup ? "1" : "0" };
|
||||
});
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<div class="w-full flex justify-between mb-4">
|
||||
<el-button
|
||||
:icon="useRenderIcon(AddFill)"
|
||||
@click="formDialogVisible = true"
|
||||
>
|
||||
新建产品
|
||||
</el-button>
|
||||
<el-input
|
||||
v-model="searchValue"
|
||||
style="width: 300px"
|
||||
placeholder="请输入产品名称"
|
||||
clearable
|
||||
>
|
||||
<template #suffix>
|
||||
<el-icon class="el-input__icon">
|
||||
<IconifyIconOffline
|
||||
v-show="searchValue.length === 0"
|
||||
icon="ri:search-line"
|
||||
/>
|
||||
</el-icon>
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
<div
|
||||
v-loading="dataLoading"
|
||||
:element-loading-svg="svg"
|
||||
element-loading-svg-view-box="-10, -10, 50, 50"
|
||||
>
|
||||
<el-empty
|
||||
v-show="
|
||||
productList
|
||||
.slice(
|
||||
pagination.pageSize * (pagination.current - 1),
|
||||
pagination.pageSize * pagination.current
|
||||
)
|
||||
.filter(v =>
|
||||
v.name.toLowerCase().includes(searchValue.toLowerCase())
|
||||
).length === 0
|
||||
"
|
||||
:description="`${searchValue} 产品不存在`"
|
||||
/>
|
||||
<template v-if="pagination.total > 0">
|
||||
<el-row :gutter="16">
|
||||
<el-col
|
||||
v-for="(product, index) in productList
|
||||
.slice(
|
||||
pagination.pageSize * (pagination.current - 1),
|
||||
pagination.pageSize * pagination.current
|
||||
)
|
||||
.filter(v =>
|
||||
v.name.toLowerCase().includes(searchValue.toLowerCase())
|
||||
)"
|
||||
:key="index"
|
||||
:xs="24"
|
||||
:sm="12"
|
||||
:md="8"
|
||||
:lg="6"
|
||||
:xl="4"
|
||||
>
|
||||
<ListCard
|
||||
:product="product"
|
||||
@delete-item="handleDeleteItem"
|
||||
@manage-product="handleManageProduct"
|
||||
/>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-pagination
|
||||
v-model:currentPage="pagination.current"
|
||||
class="float-right"
|
||||
:page-size="pagination.pageSize"
|
||||
:total="pagination.total"
|
||||
:page-sizes="[12, 24, 36]"
|
||||
:background="true"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
@size-change="onPageSizeChange"
|
||||
@current-change="onCurrentChange"
|
||||
/>
|
||||
</template>
|
||||
</div>
|
||||
<ListDialogForm v-model:visible="formDialogVisible" :data="formData" />
|
||||
</div>
|
||||
</template>
|
||||
Reference in New Issue
Block a user
