8 changed files with 493 additions and 3 deletions
@ -0,0 +1,8 @@ |
|||
import diyIconfont from '@/components/DesignForm/public/expand/diy-iconfont.vue' |
|||
import userDialog from '@/components/DesignForm/public/expand/userDialog.vue' |
|||
|
|||
|
|||
export default (app: any) => { |
|||
app.component('DiyIconfont', diyIconfont) |
|||
app.component('UserDialog', userDialog) |
|||
} |
|||
@ -0,0 +1,113 @@ |
|||
<!-- |
|||
@ 作者: 秦东 |
|||
@ 时间: 2023-08-21 15:19:48 |
|||
@ 备注: |
|||
--> |
|||
<script lang='ts' setup> |
|||
import { computed, ref } from 'vue' |
|||
import iconfontJson from '@/assets/iconfont/iconfont.json' |
|||
|
|||
const props = withDefaults( |
|||
defineProps<{ |
|||
modelValue?: string | string[] |
|||
colorPicker?: boolean // 是否可选颜色，可选颜色时value为数组 |
|||
}>(), |
|||
{} |
|||
) |
|||
const emits = defineEmits<{ |
|||
(e: 'update:modelValue', value: string | string[]): void |
|||
}>() |
|||
const visible = ref(false) |
|||
const value = computed({ |
|||
get() { |
|||
if (props.colorPicker) { |
|||
return props.modelValue && props.modelValue[0] |
|||
} else { |
|||
return props.modelValue |
|||
} |
|||
}, |
|||
set(newVal: any) { |
|||
iconClick(newVal) |
|||
} |
|||
}) |
|||
const color = computed({ |
|||
get() { |
|||
return props.modelValue && props.modelValue[1] |
|||
}, |
|||
set(newVal: any) { |
|||
emits('update:modelValue', [value.value, newVal]) |
|||
} |
|||
}) |
|||
const iconList = computed(() => { |
|||
const temp: any = [] |
|||
iconfontJson.glyphs.forEach((item: any) => { |
|||
temp.push(iconfontJson.css_prefix_text + item.font_class) |
|||
}) |
|||
return temp |
|||
}) |
|||
const iconClick = (newVal: string) => { |
|||
if (props.colorPicker) { |
|||
emits('update:modelValue', [newVal, color.value]) |
|||
} else { |
|||
emits('update:modelValue', newVal) |
|||
} |
|||
visible.value = false |
|||
} |
|||
|
|||
</script> |
|||
<template> |
|||
<el-popover |
|||
placement="bottom" |
|||
:width="500" |
|||
trigger="click" |
|||
v-model:visible="visible" |
|||
> |
|||
<div class="iconfont-list"> |
|||
<ul> |
|||
<li |
|||
v-for="item in iconList" |
|||
:key="item" |
|||
@click="iconClick(item)" |
|||
:style="{ color: item === value ? color : '' }" |
|||
> |
|||
<i :class="item"></i> |
|||
</li> |
|||
</ul> |
|||
</div> |
|||
<template #reference> |
|||
<div class="iconfont-input"> |
|||
<el-input v-model="value" placeholder="输入或选择iconfont图标" /> |
|||
<div @click.stop="" class="color-input" v-if="colorPicker"><el-color-picker v-model="color" /></div> |
|||
</div> |
|||
</template> |
|||
</el-popover> |
|||
</template> |
|||
<style lang='scss' scoped> |
|||
.iconfont-list { |
|||
max-width: 500px; |
|||
overflow-y: auto; |
|||
ul { |
|||
display: flex; |
|||
flex-wrap: wrap; |
|||
} |
|||
li { |
|||
margin: 5px 10px; |
|||
cursor: pointer; |
|||
i { |
|||
font-size: 24px; |
|||
&:hover { |
|||
opacity: 0.6; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
.iconfont-input { |
|||
position: relative; |
|||
width: 100%; |
|||
.color-input { |
|||
position: absolute; |
|||
right: 0; |
|||
top: 0; |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,325 @@ |
|||
<!-- |
|||
@ 作者: 秦东 |
|||
@ 时间: 2023-08-21 14:41:41 |
|||
@ 备注: 选择用户 |
|||
--> |
|||
<script lang='ts' setup> |
|||
import { ref, onMounted, reactive, nextTick } from 'vue' |
|||
import { getRequest } from '@/api/DesignForm' |
|||
import formatResult from '@/utils/DesignForm/formatResult' |
|||
import { getOrgFormTree } from '@/api/hr/org/index' |
|||
import { orgform } from '@/api/hr/org/type' |
|||
|
|||
const props = withDefaults( |
|||
defineProps<{ |
|||
modelValue?: string |
|||
}>(), |
|||
{} |
|||
) |
|||
const emits = defineEmits<{ |
|||
(e: 'update:modelValue', value: string): void |
|||
}>() |
|||
const visible = ref(false) |
|||
// 侧栏处理 |
|||
const treeEl = ref() |
|||
const treeData = ref<orgform[]>([]) |
|||
const department = ref() |
|||
const handleNodeClick = (data: any) => { |
|||
department.value = data.id |
|||
} |
|||
const getTreeData = () => { |
|||
// getRequest('deptList', {}).then((res: any) => { |
|||
// treeData.value = formatResult(res.data, 'transformDataToChild') |
|||
// }) |
|||
getOrgFormTree() |
|||
.then(({ data }) => { |
|||
console.log(data) |
|||
treeData.value = data.list |
|||
}).finally(()=>{}) |
|||
} |
|||
// 侧栏处理结束 |
|||
const userName = ref() |
|||
const tableData = ref([]) |
|||
const page = reactive({ |
|||
total: 0, |
|||
current: 1, |
|||
pageSize: 20 |
|||
}) |
|||
const searchClick = () => { |
|||
getUserList() |
|||
} |
|||
const resetClick = () => { |
|||
userName.value = '' |
|||
department.value = '' |
|||
treeEl.value.setCurrentKey(null) |
|||
getUserList() |
|||
} |
|||
const getUserList = () => { |
|||
const params = { |
|||
pageInfo: { |
|||
pageIndex: page.current, |
|||
pageSize: page.pageSize |
|||
}, |
|||
name: userName.value, |
|||
department: department.value |
|||
} |
|||
getRequest('userList', params).then((res: any) => { |
|||
tableData.value = res.data.list |
|||
}) |
|||
} |
|||
const currentChange = (current: number) => { |
|||
page.current = current |
|||
getUserList() |
|||
} |
|||
// 已选 |
|||
const checkData = ref<any>([]) |
|||
|
|||
const tableRowClick = (row: any) => { |
|||
if (!checkData.value.includes(row.userName)) { |
|||
checkData.value.push(row.userName) |
|||
} |
|||
} |
|||
const delRowClick = (row: any) => { |
|||
checkData.value.forEach((item: any, index: number) => { |
|||
if (item === row) { |
|||
checkData.value.splice(index, 1) |
|||
} |
|||
}) |
|||
} |
|||
const delAllClick = () => { |
|||
checkData.value = [] |
|||
} |
|||
// 弹窗处理 |
|||
const open = () => { |
|||
visible.value = true |
|||
if (props.modelValue) { |
|||
checkData.value = props.modelValue.split(',') |
|||
} else { |
|||
checkData.value = [] |
|||
} |
|||
} |
|||
// 关闭弹窗 |
|||
const confirmClick = () => { |
|||
emits('update:modelValue', checkData.value.join(',')) |
|||
visible.value = false |
|||
} |
|||
defineExpose({ open }) |
|||
onMounted(() => { |
|||
nextTick(() => { |
|||
// 可根据实际情况放在点击打开弹窗后加载，会出现loading |
|||
getTreeData() |
|||
getUserList() |
|||
}) |
|||
}) |
|||
const defaultProps ={ |
|||
children: 'children', |
|||
label: 'name', |
|||
} |
|||
</script> |
|||
<template> |
|||
<el-dialog |
|||
title="用户选择" |
|||
v-model="visible" |
|||
:append-to-body="true" |
|||
:props="defaultProps " |
|||
width="80%" |
|||
> |
|||
<el-row :gutter="20"> |
|||
<el-col :span="6" style="padding:0"> |
|||
<div class="sidebar_tree"> |
|||
<el-tree |
|||
ref="treeEl" |
|||
:data="treeData" |
|||
node-key="id" |
|||
@node-click="handleNodeClick" |
|||
:props="defaultProps " |
|||
highlight-current |
|||
/> |
|||
</div> |
|||
</el-col> |
|||
<el-col :span="12"> |
|||
<div class="search"> |
|||
<el-input placeholder="请输入用户名" v-model="userName" /> |
|||
<el-button type="primary" @click="searchClick">查询</el-button> |
|||
<el-button @click="resetClick">重置</el-button> |
|||
</div> |
|||
<div class="list"> |
|||
<el-table :data="tableData" style="width: 100%"> |
|||
<el-table-column prop="userName" label="照片" width="100px" align="center" /> |
|||
<el-table-column prop="nickName" label="姓名" width="120px" align="left" /> |
|||
<el-table-column prop="nickName" label="联系方式" width="100px" align="left" /> |
|||
<el-table-column prop="nickName" label="归属行政组织" align="left" /> |
|||
<el-table-column label="操作" width="60px"> |
|||
<template #default="{ row }"> |
|||
<el-button circle size="small" @click="tableRowClick(row)"><el-icon><ArrowRight /></el-icon></el-button> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
<div class="page"> |
|||
<el-pagination |
|||
background |
|||
layout="prev, pager, next" |
|||
small |
|||
hide-on-single-page |
|||
:current-page="page.current" |
|||
:total="page.total" |
|||
:page-size="page.pageSize" |
|||
@current-change="currentChange" |
|||
/> |
|||
</div> |
|||
</div> |
|||
</el-col> |
|||
<el-col :span="6"> |
|||
<div class="has_select"> |
|||
<div class="total"> |
|||
<div>已选择：{{ checkData.length }}</div> |
|||
<el-button type="danger" @click="delAllClick" size="small">全部移除</el-button> |
|||
</div> |
|||
<el-table :data="checkData"> |
|||
<el-table-column label="用户名"> |
|||
<template #default="{ row }">{{ row }}</template> |
|||
</el-table-column> |
|||
<el-table-column label="操作" width="60px"> |
|||
<template #default="{ row }"> |
|||
<el-button size="small" type="danger" @click="delRowClick(row)">移除</el-button> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
</div> |
|||
</el-col> |
|||
</el-row> |
|||
|
|||
<div class="expand-user-dialog" style="display: none;"> |
|||
<div class="sidebar-tree"> |
|||
<el-tree |
|||
ref="treeEl" |
|||
:data="treeData" |
|||
node-key="id" |
|||
@node-click="handleNodeClick" |
|||
:props="defaultProps " |
|||
highlight-current |
|||
/> |
|||
<div class="table-list"> |
|||
<div class="search"> |
|||
<el-input placeholder="请输入用户名" v-model="userName" /> |
|||
<el-button type="primary" @click="searchClick">查询</el-button> |
|||
<el-button @click="resetClick">重置</el-button> |
|||
</div> |
|||
<div class="list"> |
|||
<el-table :data="tableData" style="width: 100%"> |
|||
<el-table-column prop="userName" label="用户名" /> |
|||
<el-table-column prop="nickName" label="昵称" /> |
|||
<el-table-column label="操作" width="60px"> |
|||
<template #default="{ row }"> |
|||
<el-button circle size="small" @click="tableRowClick(row)"><el-icon><ArrowRight /></el-icon></el-button> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
<div class="page"> |
|||
<el-pagination |
|||
background |
|||
layout="prev, pager, next" |
|||
small |
|||
hide-on-single-page |
|||
:current-page="page.current" |
|||
:total="page.total" |
|||
:page-size="page.pageSize" |
|||
@current-change="currentChange" |
|||
/> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="has-select"> |
|||
<div class="total"> |
|||
<div>已选择：{{ checkData.length }}</div> |
|||
<el-button type="danger" @click="delAllClick" size="small">全部移除</el-button> |
|||
</div> |
|||
<el-table :data="checkData"> |
|||
<el-table-column label="用户名"> |
|||
<template #default="{ row }">{{ row }}</template> |
|||
</el-table-column> |
|||
<el-table-column label="操作" width="60px"> |
|||
<template #default="{ row }"> |
|||
<el-button size="small" type="danger" @click="delRowClick(row)">移除</el-button> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<template #footer> |
|||
<div> |
|||
<el-button @click="visible = false">取消</el-button> |
|||
<el-button type="primary" @click="confirmClick"> 确定 </el-button> |
|||
</div> |
|||
</template> |
|||
</el-dialog> |
|||
</template> |
|||
<style lang='scss' scoped> |
|||
.sidebar_tree { |
|||
width: 100%; |
|||
border: 1px solid #ebeef5; |
|||
border-radius: 3px; |
|||
padding: 10px 0; |
|||
margin-right: 10px; |
|||
max-height: 500px; |
|||
overflow-y: auto; |
|||
} |
|||
.has_select { |
|||
width: 100%; |
|||
|
|||
.total { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
height: 32px; |
|||
margin-bottom: 10px; |
|||
} |
|||
} |
|||
.search { |
|||
display: flex; |
|||
margin-bottom: 10px; |
|||
.el-input { |
|||
margin-right: 10px; |
|||
} |
|||
} |
|||
.expand-user-dialog { |
|||
display: flex; |
|||
align-items: flex-start; |
|||
.sidebar-tree { |
|||
width: 180px; |
|||
border: 1px solid #ebeef5; |
|||
border-radius: 3px; |
|||
padding: 10px 0; |
|||
margin-right: 10px; |
|||
max-height: 500px; |
|||
overflow-y: auto; |
|||
} |
|||
.table-list { |
|||
|
|||
} |
|||
.search { |
|||
display: flex; |
|||
margin-bottom: 10px; |
|||
.el-input { |
|||
margin-right: 10px; |
|||
} |
|||
} |
|||
.page { |
|||
padding-top: 20px; |
|||
display: flex; |
|||
justify-content: flex-end; |
|||
} |
|||
.has-select { |
|||
width: 200px; |
|||
margin-left: 20px; |
|||
.total { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
height: 32px; |
|||
margin-bottom: 10px; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue