From 2b4328392746fc59f5edf98fed629f8db2804e18 Mon Sep 17 00:00:00 2001
From: shj <1790240199@qq.com>
Date: 星期三, 27 七月 2022 09:29:23 +0800
Subject: [PATCH] 对接
---
src/components/userSelections/index.vue | 216 +++++++++++++++++++++++++++++++++++++++++-------------
1 files changed, 164 insertions(+), 52 deletions(-)
diff --git a/src/components/userSelections/index.vue b/src/components/userSelections/index.vue
index c71c9cf..9728e94 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 style="margin-right: 15px;min-width:560px;">
+ <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,28 +36,25 @@
</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"
- highlight-current-row
- @row-click="rowClick"
- @selection-change="handleCurrentChange"
>
- <el-table-column
- type="selection"
- width="50"
- >
+ <el-table-column align="center" width="55">
+ <template #default="scope">
+ <el-radio-group v-model="radio1" @change="radio">
+ <el-radio :label="scope.row.date" 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="110" show-overflow-tooltip sortable />
- <el-table-column prop="address" label="所属部门" width="100" 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' },
@@ -71,11 +70,33 @@
</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>
- <el-tag v-for="tag in dynamicTags" :key="tag" class="mx-1" style="margin:5px" closable :disable-transitions="false" @close="handleClose(tag)">
+ <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>
@@ -100,19 +121,21 @@
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
-}
+// interface User {
+// date: string
+// name: string
+// address: string
+// }
export default defineComponent({
name: 'userSelections',
components: {
@@ -195,14 +218,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: '',
@@ -212,25 +264,37 @@
console.log('submit!')
}
- const multipleTableRef = ref<InstanceType<typeof ElTable>>()
- // const currentRow = ref()
-
- // 当某一行被点击时会触发该事件
- // const handleRowClick = (row: any, column: any, event: Event) => {
- // emit('row-click', row, column, event)
- // }
- // const singleTableRef = ref<InstanceType<typeof ElTable>>()
- // const setCurrent = (row?: User) => {
- // singleTableRef.value!.setCurrentRow(row)
- // }
- // const handleCurrentChange = (val: User | undefined) => {
- // currentRow.value = val
- // }
-
+ // const multipleTableRef = ref<InstanceType<typeof ElTable>>()
// 右方点击添加后显示标签
- const dynamicTags = ref(['Tag 1', 'Tag 2', 'Tag 3']);
+ 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,
@@ -243,12 +307,18 @@
tableData,
formInline,
onSubmit,
- // currentRow,
- // setCurrent,
- multipleTableRef,
+ // multipleTableRef,
handleClose,
dynamicTags,
- // handleCurrentChange,
+ handleSizeChange,
+ handleCurrentChange,
+ pageIndex,
+ pageSize,
+ radio1,
+ radio,
+ toggleFullscreen,
+ FullScreen,
+ full,
};
},
});
@@ -259,6 +329,7 @@
color: var(--el-text-color-primary);
line-height: 32px;
--el-header-height: 45px;
+ padding: 0;
}
.layout-container-demo .el-aside {
padding: 10px;
@@ -306,6 +377,7 @@
}
::v-deep .el-form-item{
margin-bottom: 0;
+ margin-right: 0;
}
//弹窗底部边框线
::v-deep .el-dialog__footer{
@@ -328,4 +400,44 @@
::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