From d1a430e88df40d76558a14f890ac0dbd3181f3a0 Mon Sep 17 00:00:00 2001
From: shj <1790240199@qq.com>
Date: 星期二, 06 九月 2022 14:30:14 +0800
Subject: [PATCH] 对接
---
src/components/userCheckbox/index.vue | 258 +++++++++++++++++++++++++++------------------------
1 files changed, 137 insertions(+), 121 deletions(-)
diff --git a/src/components/userCheckbox/index.vue b/src/components/userCheckbox/index.vue
index e11038f..5fc0b7a 100644
--- a/src/components/userCheckbox/index.vue
+++ b/src/components/userCheckbox/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="请输入组织机构过滤" />
@@ -15,14 +17,15 @@
:data="data"
:props="defaultProps"
default-expand-all
+ @node-click="handleNodeClick"
:filter-node-method="filterNode"
/>
</el-aside>
<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 :inline="true" :model="ruleForm" class="demo-form-inline">
<el-form-item>
- <el-input size="default" v-model="formInline.name" placeholder="登录名"> </el-input>
+ <el-input size="default" v-model="ruleForm.name" placeholder="登录名"> </el-input>
</el-form-item>
<el-form-item>
<el-button size="default" type="primary" class="ml10" @click="onSubmit">
@@ -38,29 +41,37 @@
<el-table
:data="tableData"
:header-cell-style="{background:'#f6f7fa',color:'#909399',fontWeight:400}"
+ @cell-click="checkbox"
>
- <el-table-column type="selection" width="55"/>
- <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="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"
- :filters="[
- { text: '正常', value: 'Home' },
- { text: '不正常', value: 'Office' },
- ]"
- :filter-method="filterTag"
- filter-placement="bottom-end">
+ <el-table-column type="selection" width="55">
<template #default="scope">
- <el-tag
- :type="scope.row.tag === 'Home' ? '' : 'success'"
- disable-transitions
- >{{ scope.row.tag }}</el-tag
- >
+ <el-checkbox-group v-model="checkbox1">
+ <el-checkbox :label="scope.row.uid" size="large">{{ null }}</el-checkbox>
+ </el-checkbox-group>
</template>
</el-table-column>
+ <el-table-column prop="realName" label="登录名" width="100" show-overflow-tooltip sortable />
+ <el-table-column prop="username" label="用户名" width="100" show-overflow-tooltip sortable />
+ <el-table-column prop="address" label="所属机构" width="115" show-overflow-tooltip sortable />
+ <el-table-column prop="address" label="所属部门" width="115" show-overflow-tooltip sortable/>
+ <el-table-column align="center" prop="type" label="状态" />
+<!-- <el-table-column label="状态"-->
+<!-- width="80"-->
+<!-- prop="tag"-->
+<!-- :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>
<div class="pages">
<el-pagination
@@ -68,11 +79,8 @@
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"
+ :total="total"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
/>
@@ -80,9 +88,19 @@
</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 v-if="dynamicTags[0]==''?false:true">
+ <el-tag
+ v-for="tag in dynamicTags"
+ :key="tag"
+ class="mx-1"
+ style="margin: 5px"
+ closable
+ :disable-transitions="false"
+ @close="handleClose(tag)"
+ >
+ {{ tag.realName }}
+ </el-tag>
+ </div>
</div>
</el-container>
<template #footer>
@@ -101,13 +119,20 @@
defineComponent,
watch,
reactive,
+ onMounted,
} from 'vue';
import type {
ElTree,
// ElTable,
} from 'element-plus'
-
+import {
+ ElMessage,
+} from 'element-plus';
+import {
+ FullScreen
+} from '@element-plus/icons-vue'
+import {goalManagementApi} from "/@/api/goalManagement";
interface Tree {
id: number
label: string
@@ -123,10 +148,11 @@
components: {
// Search,
},
- setup() {
+ setup(props, { emit }) {
const isShowDialog = ref(false)
// 打开弹窗
- const openDialog = () => {
+ const openDialog = (type:any) => {
+ types.value=type
isShowDialog.value = true;
};
// 关闭弹窗
@@ -138,68 +164,62 @@
closeDialog();
};
-
+ //部门树
+ const department = () => {
+ goalManagementApi()
+ .getTreedepartment()
+ .then((res) => {
+ if (res.data.code == 200) {
+ data.value = res.data.data;
+ } else {
+ ElMessage.error(res.data.msg);
+ }
+ });
+ };
+ const defaultProps = {
+ label: 'depName',
+ children: 'children',
+ value: 'depId',
+ }
+ //部门树查询
const filterText = ref('')
const treeRef = ref<InstanceType<typeof ElTree>>() //实例化
-
- const defaultProps = {
- children: 'children',
- label: 'label',
+ watch(filterText, (val) => {
+ treeRef.value!.filter(val);
+ });
+ // 节点过滤模糊搜索
+ const filterNode = (depName: string, data: Tree) => {
+ if (!depName) return true
+ return data.depName.includes(depName)
}
+ onMounted(() => {
+ department();
+ });
+ //左边树形部分点击获取回调
+ const names = ref<any>();
+ const handleNodeClick = (data: Tree) => {
+ goalManagementApi()
+ .getManName(data.depId)
+ .then((res) => {
+ if (res.data.code == 200) {
+ tableData.value=res.data.data
+ }else{
+ ElMessage.error(res.data.msg);
+ }
+ });
+ };
+
// 监听搜索关键字改变
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 data = ref()
+
+
+
+
// const item = {
// date: '孙刚',
// name: '龚赛健',
@@ -207,52 +227,31 @@
// 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({
+ const ruleForm = reactive({
name: '',
})
+ const types=ref()
// 搜索按钮
const onSubmit = () => {
- console.log('submit!')
+ let obj = JSON.parse(JSON.stringify(dynamicTags.value));
+ emit('SearchUser', obj[0],types.value);
+ isShowDialog.value = false;
}
// const multipleTableRef = ref<InstanceType<typeof ElTable>>()
// 右方点击添加后显示标签
- const dynamicTags = ref(['Tag 1', 'Tag 2', 'Tag 3']);
- const handleClose = (tag: string) => {
- dynamicTags.value.splice(dynamicTags.value.indexOf(tag), 1);
+ const dynamicTags = ref(['']);
+ const handleClose = () => {
+ dynamicTags.value.push(checkbox1.value)
+ // dynamicTags.value.splice(dynamicTags.value.indexOf(tag), 1);
+ checkbox1.value = '';
};
-
+ const checkbox1 = ref('');
+ const checkbox = (event: any) => {
+ dynamicTags.value[0] = event;
+ };
+ const tableData = ref();
// 分页
const pageIndex = ref(4);
const pageSize = ref(10);
@@ -264,6 +263,15 @@
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,
@@ -273,7 +281,7 @@
filterNode,
data,
tableData,
- formInline,
+ ruleForm,
onSubmit,
// multipleTableRef,
handleClose,
@@ -282,6 +290,14 @@
handleCurrentChange,
pageIndex,
pageSize,
+ toggleFullscreen,
+ FullScreen,
+ full,
+ names,
+ handleNodeClick,
+ types,
+ checkbox1,
+ checkbox,
};
},
});
--
Gitblit v1.9.2