linweidong
/
besure_web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

style：大屏管理-dropdown组件优化

Browse Source
main
黄伟杰 3 weeks ago
parent f7dc112b15
commit c5cd170d47
1 changed files with 65 additions and 145 deletions
Show Stats Download Patch File Download Diff File

210
src/views/report/dashboardList/index.vue
Unescape Escape View File

@ -1,43 +1,21 @@
<template>
<ContentWrap>
<el-form
class="-mb-15px"
:model="queryParams"
ref="queryFormRef"
:inline="true"
label-width="80px"
>
<el-form class="-mb-15px" :model="queryParams" ref="queryFormRef" :inline="true" label-width="80px">
<el-form-item label="名称" prop="name">
<el-input
v-model="queryParams.name"
placeholder="请输入名称"
clearable
@keyup.enter="handleQuery"
class="!w-240px"
/>
v-model="queryParams.name" placeholder="请输入名称" clearable @keyup.enter="handleQuery"
class="!w-240px" />
</el-form-item>
<el-form-item label="备注" prop="remark">
<el-input
v-model="queryParams.remark"
placeholder="请输入备注"
clearable
@keyup.enter="handleQuery"
class="!w-240px"
/>
v-model="queryParams.remark" placeholder="请输入备注" clearable @keyup.enter="handleQuery"
class="!w-240px" />
</el-form-item>
<el-form-item label="启用状态" prop="state">
<el-select
v-model="queryParams.state"
placeholder="请选择启用状态"
clearable
class="!w-240px"
>
<el-select v-model="queryParams.state" placeholder="请选择启用状态" clearable class="!w-240px">
<el-option
v-for="dict in getStrDictOptions(DICT_TYPE.COMMON_STATUS)"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
v-for="dict in getStrDictOptions(DICT_TYPE.COMMON_STATUS)" :key="dict.value" :label="dict.label"
:value="dict.value" />
</el-select>
</el-form-item>
<el-form-item>
@ -58,23 +36,10 @@
<div class="dashboard-card-list">
<el-empty v-if="!loading && list.length === 0" description="暂无数据" />
<el-row v-else :gutter="16">
<el-col
v-for="item in list"
:key="item.id"
:xl="6"
:lg="8"
:md="12"
:sm="24"
:xs="24"
class="mb-16px"
>
<el-col v-for="item in list" :key="item.id" :xl="6" :lg="8" :md="12" :sm="24" :xs="24" class="mb-16px">
<el-card shadow="hover" class="dashboard-card" :body-style="{ padding: '0' }">
<div class="dashboard-card-image-wrapper" @click="handlePreview(item)">
<img
class="dashboard-card-image"
:src="getDashboardImage(item)"
alt="封面图"
/>
<img class="dashboard-card-image" :src="getDashboardImage(item)" alt="封面图" />
<div class="dashboard-card-state">
<el-tag v-if="item.state === 1" type="success" size="small">
启用
@ -94,43 +59,31 @@
</div>
</div>
<div class="dashboard-card-actions">
<el-popover placement="bottom-end" trigger="click" width="140">
<div class="dashboard-card-menu">
<el-button type="primary" text @click="openEditDialog(item)">
编辑
</el-button>
<el-button type="danger" text @click="handleDelete(item)">
删除
</el-button>
</div>
<template #reference>
<el-dropdown trigger="click" placement="bottom-end">
<el-button text circle>
<Icon icon="ep:more" />
</el-button>
</template>
</el-popover>
<template #dropdown>
<el-dropdown-menu class="dashboard-card-menu">
<el-dropdown-item class="dashboard-card-menu-primary" @click="openEditDialog(item)">编辑</el-dropdown-item>
<el-dropdown-item divided class="dashboard-card-menu-danger" @click="handleDelete(item)">删除</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
</div>
</div>
</el-card>
</el-col>
</el-row>
<Pagination
v-if="total > 0"
:total="total"
v-model:page="queryParams.pageNo"
v-model:limit="queryParams.pageSize"
@pagination="getList"
/>
v-if="total > 0" :total="total" v-model:page="queryParams.pageNo" v-model:limit="queryParams.pageSize"
@pagination="getList" />
</div>
</ContentWrap>
<el-dialog
v-model="createDialogVisible"
:title="dialogMode === 'create' ? '新增数据大屏' : '编辑数据大屏'"
width="600px"
draggable
@closed="handleCreateDialogClosed"
>
v-model="createDialogVisible" :title="dialogMode === 'create' ? '新增数据大屏' : '编辑数据大屏'" width="600px"
draggable @closed="handleCreateDialogClosed">
<el-form :model="createForm" ref="createFormRef" label-width="80px" :rules="createFormRules">
<el-form-item label="名称" prop="name">
<el-input v-model="createForm.name" placeholder="请输入名称" />
@ -138,104 +91,51 @@
<el-form-item label="大屏类型" prop="type">
<el-select v-model="createForm.type" placeholder="请选择大屏类型" class="!w-240px">
<el-option
v-for="dict in getStrDictOptions('mes_goview_type')"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
v-for="dict in getStrDictOptions('mes_goview_type')" :key="dict.value" :label="dict.label"
:value="dict.value" />
</el-select>
</el-form-item>
<el-form-item label="产线" prop="orgId">
<el-tree-select
v-model="createForm.orgId"
:data="organizationTree"
:props="lineTreeProps"
filterable
clearable
class="!w-240px"
placeholder="请选择产线"
@change="handleOrgChange"
/>
v-model="createForm.orgId" :data="organizationTree" :props="lineTreeProps" filterable clearable
class="!w-240px" placeholder="请选择产线" @change="handleOrgChange" />
</el-form-item>
<el-form-item label="设备" v-if="createForm.type === '1'">
<div class="dashboard-device-group-list">
<div
v-for="(group, index) in deviceAttrSelections"
:key="index"
class="dashboard-device-group"
>
<div v-for="(group, index) in deviceAttrSelections" :key="index" class="dashboard-device-group">
<el-select
v-model="group.deviceId"
placeholder="请选择设备"
clearable
filterable
class="!w-160px mr-8px"
@change="(val) => handleDeviceChange(val, index)"
>
<el-option
v-for="item in deviceList"
:key="item.id"
:label="item.deviceName"
:value="item.id"
/>
v-model="group.deviceId" placeholder="请选择设备" clearable filterable class="!w-160px mr-8px"
@change="(val) => handleDeviceChange(val, index)">
<el-option v-for="item in deviceList" :key="item.id" :label="item.deviceName" :value="item.id" />
</el-select>
<el-select
v-model="group.attributeIds"
multiple
collapse-tags
collapse-tags-tooltip
:disabled="!group.deviceId"
placeholder="请选择点位"
clearable
filterable
class="!w-260px"
>
v-model="group.attributeIds" multiple collapse-tags collapse-tags-tooltip
:disabled="!group.deviceId" placeholder="请选择点位" clearable filterable class="!w-260px">
<el-option
v-for="attr in (deviceAttributeOptionsMap[String(group.deviceId)] || [])"
:key="attr.id"
:label="attr.attributeName"
:value="attr.id"
/>
v-for="attr in (deviceAttributeOptionsMap[String(group.deviceId)] || [])" :key="attr.id"
:label="attr.attributeName" :value="attr.id" />
</el-select>
<el-button
v-if="deviceAttrSelections.length > 1"
type="danger"
text
class="dashboard-device-remove-btn"
@click="removeDeviceAttrGroup(index)"
circle
>
v-if="deviceAttrSelections.length > 1" type="danger" text class="dashboard-device-remove-btn"
@click="removeDeviceAttrGroup(index)" circle>
<Icon icon="ep:minus" />
</el-button>
</div>
<el-button
type="primary"
text
@click="addDeviceAttrGroup"
:disabled="deviceAttrSelections.length >= 8"
class="mt-8px"
>
type="primary" text @click="addDeviceAttrGroup" :disabled="deviceAttrSelections.length >= 8"
class="mt-8px">
<Icon icon="ep:plus" class="mr-5px" /> 添加设备
</el-button>
</div>
</el-form-item>
<el-form-item label="内容">
<el-input
v-model="createForm.content"
type="textarea"
:rows="4"
placeholder="请输入内容"
/>
<el-input v-model="createForm.content" type="textarea" :rows="4" placeholder="请输入内容" />
</el-form-item>
<el-form-item label="备注">
<el-input v-model="createForm.remark" placeholder="请输入备注" />
</el-form-item>
<el-form-item label="启用状态">
<el-switch
v-model="createForm.state"
:active-value="1"
:inactive-value="0"
/>
<el-switch v-model="createForm.state" :active-value="1" :inactive-value="0" />
</el-form-item>
</el-form>
<template #footer>
@ -425,7 +325,7 @@ const normalizeDeviceIdsList = (val: any): { deviceId: number; attributesIds: nu
if (Array.isArray(parsed)) {
return normalizeDeviceIdsList(parsed)
}
} catch {}
} catch { }
}
const ids = trimmed
.split(',')
@ -456,9 +356,9 @@ const openEditDialog = (item: DashboardItem) => {
deviceAttrSelections.value =
createForm.deviceIdsList && createForm.deviceIdsList.length
? createForm.deviceIdsList.slice(0, 8).map((g) => ({
deviceId: g.deviceId,
attributeIds: Array.isArray(g.attributesIds) ? g.attributesIds.slice() : []
}))
deviceId: g.deviceId,
attributeIds: Array.isArray(g.attributesIds) ? g.attributesIds.slice() : []
}))
: [{ deviceId: undefined, attributeIds: [] }]
deviceAttrSelections.value.forEach((g) => {
if (g.deviceId) {
@ -546,7 +446,7 @@ const handleDelete = async (item: DashboardItem) => {
})
message.success('删除成功')
await getList()
} catch {}
} catch { }
}
const loadOrganizationTree = async () => {
@ -690,6 +590,26 @@ onMounted(() => {
min-width: 120px;
}
:deep(.el-dropdown-menu__item.dashboard-card-menu-primary) {
color: var(--el-color-primary);
}
:deep(.el-dropdown-menu__item.dashboard-card-menu-primary:hover),
:deep(.el-dropdown-menu__item.dashboard-card-menu-primary:focus) {
color: var(--el-color-primary);
background-color: var(--el-color-primary-light-9);
}
:deep(.el-dropdown-menu__item.dashboard-card-menu-danger) {
color: var(--el-color-danger);
}
:deep(.el-dropdown-menu__item.dashboard-card-menu-danger:hover),
:deep(.el-dropdown-menu__item.dashboard-card-menu-danger:focus) {
color: var(--el-color-danger);
background-color: var(--el-color-danger-light-9);
}
.dashboard-device-group-list {
display: flex;
flex-direction: column;

Write Preview
Loading…
Cancel
Save