From 7b9c91f9feb33f901aa09174fbbf119ee3ebcb24 Mon Sep 17 00:00:00 2001
From: Your Name <123456>
Date: 星期一, 11 七月 2022 17:49:24 +0800
Subject: [PATCH] Merge branch 'master' of https://sinanoaq.cn:8888/r/gtqtOut
---
src/components/userSelections/index.vue | 331 +++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 331 insertions(+), 0 deletions(-)
diff --git a/src/components/userSelections/index.vue b/src/components/userSelections/index.vue
new file mode 100644
index 0000000..c71c9cf
--- /dev/null
+++ b/src/components/userSelections/index.vue
@@ -0,0 +1,331 @@
+<template>
+ <div class="system-edit-user-container">
+ <el-dialog
+ title="用户选择"
+ v-model="isShowDialog"
+ width="1000px"
+ draggable
+ >
+ <el-container class="layout-container-demo" style="height: 500px;overflow: auto;min-width: 960px">
+ <el-aside width="200px">
+ <el-input v-model="filterText" placeholder="请输入组织机构过滤" />
+ <el-tree
+ ref="treeRef"
+ class="filter-tree"
+ :data="data"
+ :props="defaultProps"
+ default-expand-all
+ :filter-node-method="filterNode"
+ />
+ </el-aside>
+ <el-container style="margin-right: 15px;min-width:560px;">
+ <el-header style="font-size: 12px">
+ <el-form :inline="true" :model="formInline" class="demo-form-inline">
+ <el-form-item>
+ <el-input size="default" v-model="formInline.name" placeholder="登录名"> </el-input>
+ </el-form-item>
+ <el-form-item>
+ <el-button size="default" type="primary" class="ml10" @click="onSubmit">
+ 查询
+ </el-button>
+ <el-button size="default" class="ml10" @click="submitReset">
+ 重置
+ </el-button>
+ </el-form-item>
+ </el-form>
+ </el-header>
+ <el-main>
+ <el-scrollbar>
+ <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>
+ <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 label="状态"
+ prop="tag"
+ width="100"
+ :filters="[
+ { text: '正常', value: 'Home' },
+ { text: '不正常', value: 'Office' },
+ ]"
+ :filter-method="filterTag"
+ filter-placement="bottom-end">
+ <template #default="scope">
+ <el-tag
+ :type="scope.row.tag === 'Home' ? '' : 'success'"
+ disable-transitions
+ >{{ scope.row.tag }}</el-tag
+ >
+ </template>
+ </el-table-column>
+ </el-table>
+ </el-scrollbar>
+ </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)">
+ {{ tag }}
+ </el-tag>
+ </div>
+ </el-container>
+ <template #footer>
+ <span class="dialog-footer">
+ <el-button size="default" type="primary" @click="onCancel">确定</el-button>
+ <el-button size="default" @click="onCancel">关闭</el-button>
+ </span>
+ </template>
+ </el-dialog>
+ </div>
+</template>
+
+<script lang="ts">
+import {
+ ref,
+ defineComponent,
+ watch,
+ reactive,
+} from 'vue';
+
+import type {
+ ElTree,
+ ElTable,
+} from 'element-plus'
+
+interface Tree {
+ id: number
+ label: string
+ children?: Tree[]
+}
+interface User {
+ date: string
+ name: string
+ address: string
+}
+export default defineComponent({
+ name: 'userSelections',
+ components: {
+ // Search,
+ },
+ setup() {
+ const isShowDialog = ref(false)
+ // 打开弹窗
+ const openDialog = () => {
+ isShowDialog.value = true;
+ };
+ // 关闭弹窗
+ const closeDialog = () => {
+ isShowDialog.value = false;
+ };
+ // 取消
+ const onCancel = () => {
+ closeDialog();
+ };
+
+
+ const filterText = ref('')
+ const treeRef = ref<InstanceType<typeof ElTree>>() //实例化
+
+ const defaultProps = {
+ children: 'children',
+ label: 'label',
+ }
+
+ // 监听搜索关键字改变
+ watch(filterText, (val) => {
+ treeRef.value!.filter(val)
+ })
+
+ // 节点过滤模糊搜索
+ const filterNode = (value: string, data: Tree) => {
+ if (!value) return true
+ return data.label.includes(value)
+ }
+
+ // 树形结构内容
+ const data: Tree[] = [
+ {
+ id: 1,
+ label: '广汇能源综合物流发展有限责任公司',
+ children: [
+ {
+ id: 4,
+ label: '经营班子',
+ children: []
+ },
+ ],
+ },
+ {
+ id: 2,
+ label: '生产运行部',
+ children: [
+ {
+ id: 5,
+ label: '工艺二班',
+ },
+ {
+ id: 6,
+ label: '灌装一班',
+ },
+ ],
+ },
+ {
+ id: 3,
+ label: '设备部',
+ children: [
+ {
+ id: 7,
+ label: '仪表班',
+ },
+ {
+ id: 8,
+ label: '机修班',
+ },
+ ],
+ },
+ ]
+ const item = {
+ date: '龚赛健',
+ name: '龚赛健',
+ address: '综合办公室',
+ tag: '正常',
+ }
+ const tableData = ref(Array.from({ length: 5 }).fill(item))
+
+ // 定义表单搜索
+ const formInline = reactive({
+ name: '',
+ })
+ // 搜索按钮
+ const onSubmit = () => {
+ 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 dynamicTags = ref(['Tag 1', 'Tag 2', 'Tag 3']);
+ const handleClose = (tag: string) => {
+ dynamicTags.value.splice(dynamicTags.value.indexOf(tag), 1);
+ };
+ return {
+ openDialog,
+ closeDialog,
+ isShowDialog,
+ onCancel,
+ defaultProps,
+ filterNode,
+ data,
+ tableData,
+ formInline,
+ onSubmit,
+ // currentRow,
+ // setCurrent,
+ multipleTableRef,
+ handleClose,
+ dynamicTags,
+ // handleCurrentChange,
+ };
+ },
+});
+</script>
+<style scoped lang="scss">
+.layout-container-demo .el-header {
+ position: relative;
+ color: var(--el-text-color-primary);
+ line-height: 32px;
+ --el-header-height: 45px;
+}
+.layout-container-demo .el-aside {
+ padding: 10px;
+ border: 1px solid #ebeef5;
+ color: var(--el-text-color-primary);
+}
+::v-deep .el-input--large .el-input__inner {
+ height: 32px!important;
+ line-height: 32px!important;
+}
+.layout-container-demo .el-menu {
+ border-right: none;
+}
+.layout-container-demo .el-main {
+ padding: 0;
+}
+.layout-container-demo .toolbar {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ height: 100%;
+ right: 20px;
+}
+.el-input--large{
+ //width: 178px;
+ height: 32px;
+}
+.el-tree{
+ overflow: auto;
+}
+::-webkit-scrollbar {
+ height: 1px;
+
+}
+::-webkit-scrollbar-thumb {
+ background-color: transparent;
+}
+// 鼠标悬浮样式
+:hover::-webkit-scrollbar-thumb {
+ border-radius: 15px;
+ background-color: #d8d9db;
+}
+::v-deep .el-input__wrapper{
+ width: 215px;
+}
+::v-deep .el-form-item{
+ margin-bottom: 0;
+}
+//弹窗底部边框线
+::v-deep .el-dialog__footer{
+ border-top: 1px solid #e8e8e8;
+ border-radius: 0 0 4px 4px;
+}
+//弹窗顶部边框线
+::v-deep .el-dialog__header {
+ border-bottom: 1px solid #e8e8e8;
+ 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%;
+}
+</style>
\ No newline at end of file
--
Gitblit v1.9.2