From 01b6b200bedf57900a88bbd982cf25889e13dc49 Mon Sep 17 00:00:00 2001
From: shj <1790240199@qq.com>
Date: 星期三, 10 八月 2022 14:17:09 +0800
Subject: [PATCH] 对接
---
src/components/userSelections/index.vue | 210 +++++++++++++++++++++++++++++++++++++++++++++++-----
1 files changed, 188 insertions(+), 22 deletions(-)
diff --git a/src/components/userSelections/index.vue b/src/components/userSelections/index.vue
index f543cd9..8fdbb3f 100644
--- a/src/components/userSelections/index.vue
+++ b/src/components/userSelections/index.vue
@@ -5,7 +5,9 @@
v-model="isShowDialog"
width="1000px"
draggable
+ :fullscreen="full"
>
+ <el-button @click="toggleFullscreen" size="small" class="pot" :icon="FullScreen"></el-button>
<el-container class="layout-container-demo" style="height: 500px;overflow: auto;min-width: 960px">
<el-aside width="200px">
<el-input v-model="filterText" placeholder="请输入组织机构过滤" />
@@ -18,7 +20,7 @@
:filter-node-method="filterNode"
/>
</el-aside>
- <el-container>
+ <el-container style="margin: 0 15px;min-width:560px;">
<el-header style="font-size: 12px">
<el-form :inline="true" :model="formInline" class="demo-form-inline">
<el-form-item>
@@ -34,20 +36,26 @@
</el-form-item>
</el-form>
</el-header>
- <el-main>
- <el-scrollbar>
+ <el-main style="position: relative;">
<el-table
:data="tableData"
:header-cell-style="{background:'#f6f7fa',color:'#909399',fontWeight:400}"
- ref="multipleTableRef"
+ @cell-click="radio"
>
+ <el-table-column align="center" width="55">
+ <template #default="scope">
+ <el-radio-group v-model="radio1">
+ <el-radio :label="scope.row.id" size="large">{{ null }}</el-radio>
+ </el-radio-group>
+ </template>
+ </el-table-column>
<el-table-column prop="date" label="登录名" width="100" show-overflow-tooltip sortable />
<el-table-column prop="name" label="用户名" width="100" show-overflow-tooltip sortable />
- <el-table-column prop="address" label="所属机构" width="130" show-overflow-tooltip sortable />
- <el-table-column prop="address" label="所属部门" width="130" show-overflow-tooltip sortable/>
+ <el-table-column prop="address" label="所属机构" width="115" show-overflow-tooltip sortable />
+ <el-table-column prop="department" label="所属部门" width="115" show-overflow-tooltip sortable/>
<el-table-column label="状态"
+ width="80"
prop="tag"
- width="100"
:filters="[
{ text: '正常', value: 'Home' },
{ text: '不正常', value: 'Office' },
@@ -63,11 +71,37 @@
</template>
</el-table-column>
</el-table>
- </el-scrollbar>
+ <div class="pages">
+ <el-pagination
+ v-model:currentPage="pageIndex"
+ v-model:page-size="pageSize"
+ :page-sizes="[10, 20, 30]"
+ :pager-count="5"
+ :small="small"
+ :disabled="disabled"
+ :background="background"
+ layout="total, sizes, prev, pager, next, jumper"
+ :total="40"
+ @size-change="handleSizeChange"
+ @current-change="handleCurrentChange"
+ />
+ </div>
</el-main>
</el-container>
+ <div style="width: 200px;">
+ <el-tag
+ v-for="tag in dynamicTags"
+ :key="tag"
+ class="mx-1"
+ style="margin: 5px"
+ closable
+ :disable-transitions="false"
+ @close="handleClose(tag)"
+ >
+ {{ tag }}
+ </el-tag>
+ </div>
</el-container>
-
<template #footer>
<span class="dialog-footer">
<el-button size="default" type="primary" @click="onCancel">确定</el-button>
@@ -88,20 +122,27 @@
import type {
ElTree,
- ElTable,
+ // ElTable,
} from 'element-plus'
-
+import {
+ FullScreen
+} from '@element-plus/icons-vue'
interface Tree {
id: number
label: string
children?: Tree[]
}
+// interface User {
+// date: string
+// name: string
+// address: string
+// }
export default defineComponent({
name: 'userSelections',
components: {
// Search,
},
- setup() {
+ setup(props,{emit}) {
const isShowDialog = ref(false)
// 打开弹窗
const openDialog = () => {
@@ -113,6 +154,8 @@
};
// 取消
const onCancel = () => {
+ let obj=JSON.parse(JSON.stringify(dynamicTags.value))
+ emit("SearchUser",obj[0])
closeDialog();
};
@@ -178,14 +221,43 @@
],
},
]
- const item = {
- date: '龚赛健',
- name: '龚赛健',
- address: '综合办公室',
- tag: '正常',
- }
- const tableData = ref(Array.from({ length: 5 }).fill(item))
-
+ // const item = {
+ // date: '孙刚',
+ // name: '龚赛健',
+ // address: '综合办公室',
+ // tag: '正常',
+ // }
+ // const tableData = ref(Array.from({ length: 7 }).fill(item))
+ const tableData = [
+ {
+ date: '孙刚',
+ name: '孙刚',
+ address: '',
+ department: '经营班子',
+ tag: '正常',
+ },
+ {
+ date: '谭柏',
+ name: '谭柏',
+ address: '',
+ department: '经营班子',
+ tag: '正常',
+ },
+ {
+ date: '倪威',
+ name: '倪威',
+ address: '',
+ department: '经营班子',
+ tag: '正常',
+ },
+ {
+ date: '倪玲婕',
+ name: '倪玲婕',
+ address: '',
+ department: '经营班子',
+ tag: '正常',
+ },
+ ];
// 定义表单搜索
const formInline = reactive({
name: '',
@@ -195,7 +267,38 @@
console.log('submit!')
}
- const multipleTableRef = ref<InstanceType<typeof ElTable>>()
+ // const multipleTableRef = ref<InstanceType<typeof ElTable>>()
+ // 右方点击添加后显示标签
+ const dynamicTags = ref(['胡海涛']);
+ const handleClose = (tag: string) => {
+ dynamicTags.value.splice(dynamicTags.value.indexOf(tag), 1);
+ radio1.value=""
+ };
+ const radio1=ref('')
+ const radio=(event:any)=>{
+ dynamicTags.value[0]=event
+ }
+
+ // 分页
+ const pageIndex = ref(4);
+ const pageSize = ref(10);
+ // 分页改变
+ const handleSizeChange = (val: number) => {
+ console.log(`${val} items per page`);
+ };
+ // 分页未改变
+ const handleCurrentChange = (val: number) => {
+ console.log(`current page: ${val}`);
+ };
+ //全屏
+ const full = ref(false);
+ const toggleFullscreen = () => {
+ if (full.value == false) {
+ full.value = true;
+ } else {
+ full.value = false;
+ }
+ };
return {
openDialog,
closeDialog,
@@ -207,7 +310,18 @@
tableData,
formInline,
onSubmit,
- multipleTableRef
+ // multipleTableRef,
+ handleClose,
+ dynamicTags,
+ handleSizeChange,
+ handleCurrentChange,
+ pageIndex,
+ pageSize,
+ radio1,
+ radio,
+ toggleFullscreen,
+ FullScreen,
+ full,
};
},
});
@@ -218,6 +332,7 @@
color: var(--el-text-color-primary);
line-height: 32px;
--el-header-height: 45px;
+ padding: 0;
}
.layout-container-demo .el-aside {
padding: 10px;
@@ -265,6 +380,7 @@
}
::v-deep .el-form-item{
margin-bottom: 0;
+ margin-right: 0;
}
//弹窗底部边框线
::v-deep .el-dialog__footer{
@@ -277,4 +393,54 @@
margin-right: 0;
border-radius: 4px 4px 0 0;
}
+//单选框圆形
+::v-deep .el-table__header .el-table-column--selection .cell .el-checkbox {
+ display:none
+}
+::v-deep .el-table-column--selection .cell{
+ text-align: center;
+}
+::v-deep .el-checkbox__input .el-checkbox__inner{
+ border-radius: 50%;
+}
+/*分页*/
+.pages{
+ display: flex;
+ justify-content: flex-end;
+ margin-top: 15px;
+ align-items: center;
+ //position: absolute;
+ //bottom: 0;
+}
+::v-deep .el-pagination{
+ width: 100%;
+}
+::v-deep .el-pagination .el-pager li {
+ margin: 0 5px;
+ background-color: #f4f4f5;
+ color: #606266;
+ min-width: 30px;
+ border-radius: 2px;
+}
+::v-deep .el-pagination .el-pager li.is-active {
+ background-color: #409eff;
+ color: #fff;
+}
+::v-deep .el-pagination .btn-prev {
+ margin: 0 5px;
+ background-color: #f4f4f5;
+ color: #606266;
+ min-width: 30px;
+ border-radius: 2px;
+}
+::v-deep .el-pagination button:disabled{
+ color: #c0c4cc;
+}
+::v-deep .el-pagination .btn-next{
+ margin: 0 5px;
+ background-color: #f4f4f5;
+ color: #606266;
+ min-width: 30px;
+ border-radius: 2px;
+}
</style>
\ No newline at end of file
--
Gitblit v1.9.2