121 lines
3.5 KiB
Vue
121 lines
3.5 KiB
Vue
<template>
|
|
<div class="root">
|
|
<div class="content-box">
|
|
<el-card shadow="never" v-for="org in script.messageOrgList.value" class="org-box">
|
|
<template #header>
|
|
<div class="card-header">
|
|
<span>{{ org.title }}</span>
|
|
<el-button type="primary" size="small" text
|
|
@click="script.openAddDialog(org.orgId, org.orgName)">添加</el-button>
|
|
</div>
|
|
</template>
|
|
<!-- 人员列表 -->
|
|
<div class="person-list">
|
|
<div v-if="org.personList.length === 0" class="empty-text">暂无人员</div>
|
|
<div v-else class="person-item" v-for="person in org.personList" :key="person.userId">
|
|
<div class="person-info">
|
|
<span class="name">{{ person.realName }}</span>
|
|
<!-- <span class="account">({{ person.userAccount }})</span> -->
|
|
<span class="phone" v-if="person.userPhone">{{ person.userPhone }}</span>
|
|
</div>
|
|
<el-button type="danger" size="small" text @click="script.deletePushPerson(person)">删除</el-button>
|
|
</div>
|
|
</div>
|
|
</el-card>
|
|
</div>
|
|
<div class="model-box">
|
|
<MyDialog v-model="script.modelVisible.value" :title="script.model?.title"
|
|
:dynamicComponent="script.model?.content" :component-props="script.model?.props"
|
|
:onConfirm="script.model?.onConfirm" :onCancel="script.model?.onCancel" ref="dialogRef"
|
|
:width="script.model?.width">
|
|
</MyDialog>
|
|
<MyDrawer v-model="script.drawerVisible.value" :title="script.drawer?.title"
|
|
:dynamicComponent="script.drawer?.content" :component-props="script.drawer?.props"
|
|
:onConfirm="script.drawer?.onConfirm" :onCancel="script.drawer?.onCancel" ref="drawerRef"
|
|
:direction="script.drawer?.direction" :size="script.drawer?.size">
|
|
</MyDrawer>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import DynamicTable from "@/component/DynamicTable/index.js";
|
|
import { Search, ArrowDown } from "@element-plus/icons-vue";
|
|
import MyDialog from "@/component/MyDialog/index.js";
|
|
import MyDrawer from "@/component/MyDrawer/index.js";
|
|
import scriptFn from "./index.js";
|
|
const script = scriptFn();
|
|
const { dialogRef, drawerRef } = script;
|
|
|
|
</script>
|
|
|
|
<style scoped>
|
|
.root {
|
|
height: 100%;
|
|
padding: 25px;
|
|
}
|
|
|
|
.content-box {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: row;
|
|
gap: 20px;
|
|
}
|
|
|
|
.org-box {
|
|
flex: 1;
|
|
height: 100%;
|
|
min-width: fit-content;
|
|
}
|
|
|
|
.card-header {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
white-space: nowrap;
|
|
align-items: center;
|
|
}
|
|
|
|
.person-list {
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.empty-text {
|
|
color: #999;
|
|
text-align: center;
|
|
padding: 20px 0;
|
|
}
|
|
|
|
.person-item {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 8px 0;
|
|
border-bottom: 1px solid #f0f0f0;
|
|
}
|
|
|
|
.person-item:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.person-info {
|
|
display: flex;
|
|
gap: 10px;
|
|
align-items: center;
|
|
}
|
|
|
|
.name {
|
|
font-weight: bold;
|
|
}
|
|
|
|
.account {
|
|
color: #666;
|
|
font-size: 0.9em;
|
|
}
|
|
|
|
.phone {
|
|
color: #666;
|
|
font-size: 0.9em;
|
|
}
|
|
</style> |