ccongli
/
YX-SCM
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

关联员工组件

Browse Source
pull/1/head
qiuhongwu 1 year ago
parent 5c88b27d42
commit 7d82255520
2 changed files with 301 additions and 59 deletions
Show Stats Download Patch File Download Diff File

241
yunxi-ui-admin-vue3/src/views/xxjj/subjectFollowManagement/Shuttle.vue
Unescape View File

@ -0,0 +1,241 @@
<template>
<el-dialog v-model="openDialog" title="关联员工" width="50%" @closed="handleClose">
<div class="card-list">
<!-- 左侧全部 -->
<el-card class="box-card">
<template #header>
<div class="card-header">
<div class="header-title">全部</div>
<el-input v-model="allSearchValue" placeholder="用户名称/用户账号">
<template #suffix>
<el-icon style=" cursor: pointer;" @click="searchUser('left')"><Search /></el-icon>
</template>
</el-input>
</div>
</template>
<div>
<el-tree :data="treeData" show-checkbox :props="treeProps" node-key="id" @check="handleCheckChange"
ref="treeRef" :filter-node-method="filterNode" />
</div>
</el-card>
<!-- 右侧已选择的 -->
<el-card class="box-card">
<template #header>
<div class="card-header">
<div class="header-title">已选：{{ hasSelectionList.length }}</div>
<!-- <el-input v-model="hasSearchValue" placeholder="用户名称/用户账号">
<template #suffix>
<img :src="searchIcon" alt="图标" class="icon-size" @click="searchUser('right')" />
</template>
</el-input> -->
</div>
</template>
<div class="tag-list">
<div v-for="(tag, index) in hasSelectionList" class="tag-item" :key="tag.id">
<div class="item-desc">{{ tag.label }}</div>
<el-icon style=" cursor: pointer;" @click="removeUser(tag, index)" ><Close /></el-icon>
</div>
</div>
</el-card>
</div>
<template #footer>
<el-button type="primary" @click="confirmBind">确定</el-button>
</template>
</el-dialog>
</template>
<script setup lang="ts">
import { ref, defineExpose } from 'vue'
import { Search , Close } from '@element-plus/icons-vue'
import { defineProps, defineEmits } from 'vue'
const props = defineProps(['selectedData']) // 接收父组件传递的数据
const emit = defineEmits(['update:selectedData']) // 定义事件
//打开弹窗
let openDialog = ref(false)
//树配置
let treeProps = {
label: 'label',
children: 'children',
}
//全部搜索
let allSearchValue = ref('')
//已选搜索
let hasSearchValue = ref('')
//树的标识
let treeRef:any = ref(null)
//保存已经勾选的数据
let hasSelectionList = ref([])
//记录右侧列表数据,用于搜索时使用
let rightUserList = ref([])
//保存树的数据
let treeData:any = ref([])
//树勾选处理，获取所有勾选的子集
let handleCheckChange = (data: any, checked: boolean) => {
hasSelectionList.value = treeRef.value.getCheckedNodes(true)
// console.log('勾选的数据：', hasSelectionList.value)
rightUserList.value = hasSelectionList.value
}
//初始化弹窗
let initAdd = () => {
openDialog.value = true
//查询树的数据
treeData.value = [
{
label: 'xx公司',
id: '1',
children: [
{
label: '董事长',
id: '1-1',
},
{
label: '技术部',
id: '1-2',
children: [
{
label: '工程师1',
id: '1-2-1',
},
{
label: '工程师2',
id: '1-2-2',
},
],
},
{
label: '生产部',
id: '1-3',
children: [
{
label: '演示员',
id: '1-3-1',
},
{
label: '机加工',
id: '1-3-2',
children: [
{
label: '演示员2',
id: '1-3-2-1',
},
],
},
],
},
],
},
]
}
//确认绑定//使用 emit 将数据传递到父组件
let confirmBind = () => {
console.log('-------');
// 假设这里有一些逻辑获取了已选择的数据
const selectedData = hasSelectionList.value;
// 使用 emit 将数据传递到父组件
emit('confirm', selectedData);
openDialog.value = false
}
//处理关闭
let handleClose = () => {
//清除数据
allSearchValue.value = hasSearchValue.value = ''
hasSelectionList.value = []
openDialog.value = false
}
//查询用户
let searchUser = (type: string) => {
if (type == 'left') {
//树查询
treeRef.value!.filter(allSearchValue.value)
} else {
//普通查询
hasSelectionList.value = rightUserList.value.filter(e => e.label.includes(hasSearchValue.value))
}
}
//树节点过滤
let filterNode = (value: string, data: any) => {
if (!value) return true
return data.label.includes(value)
}
//移出用户
let removeUser = (item: any, index: number) => {
console.log(item, index)
//从集合中移出
hasSelectionList.value.splice(index, 1)
//重新设置勾选数据
treeRef.value.setCheckedNodes(hasSelectionList.value)
}
//向外暴露属性和方法
defineExpose({
initAdd,
})
</script>
<style lang="scss" scoped>
.el-dialog__title{
height: 50px;
}
.card-list {
display: flex;
width: 100%;
justify-content: space-evenly;
.box-card {
width: 35%;
height: 500px;
.header-title {
padding-bottom: 10px;
}
.tag-list {
.tag-item {
display: flex;
// margin-bottom: 10px;
align-items: center;
padding: 5px ;
.item-desc {
width: 90%;
}
}
.tag-item:hover{
background-color: rgba(64, 158, 255, 0.09803921568627451);
}
}
}
}
.icon-size {
width: 20px;
height: 20px;
cursor: pointer;
}
</style>

119
yunxi-ui-admin-vue3/src/views/xxjj/subjectFollowManagement/SubjectFollowManagementForm.vue
Unescape View File

@ -1,12 +1,6 @@
<template>
<Dialog :title="dialogTitle" v-model="dialogVisible">
<el-form
ref="formRef"
:model="formData"
:rules="formRules"
label-width="100px"
v-loading="formLoading"
>
<el-form ref="formRef" :model="formData" :rules="formRules" label-width="100px" v-loading="formLoading">
<!-- <el-form-item label="业务id" prop="businessId">
<el-input v-model="formData.businessId" placeholder="请输入业务id" />
</el-form-item> -->
@ -22,61 +16,52 @@
<el-input v-model="formData.idCard" placeholder="请输入身份证号" />
</el-form-item> -->
<el-form-item label="开始时间" prop="startTime">
<el-date-picker
v-model="formData.startTime"
type="datetime"
value-format="x"
format="YYYY/MM/DD HH:mm"
placeholder="选择开始时间"
/>
<el-date-picker v-model="formData.startTime" type="datetime" value-format="x" format="YYYY/MM/DD HH:mm" placeholder="选择开始时间" />
</el-form-item>
<el-form-item label="结束时间" prop="endTime">
<el-date-picker
v-model="formData.endTime"
type="datetime"
value-format="x"
format="YYYY/MM/DD HH:mm"
placeholder="选择结束时间"
/>
<el-date-picker v-model="formData.endTime" type="datetime" value-format="x" format="YYYY/MM/DD HH:mm" placeholder="选择结束时间" />
</el-form-item>
<el-form-item label="关联客户" prop="businessId">
<el-input v-model="formData.businessId" placeholder="请输入客户" />
</el-form-item>
<el-form-item label="负责人员" prop="responsible">
<el-input v-model="formData.responsible" placeholder="请输入负责人员" />
</el-form-item>
<el-form-item label="参与人员" prop="partake">
<el-input v-model="formData.partake" placeholder="请输入参与人员" />
</el-form-item>
<el-form-item label="标记颜色" prop="mark">
<el-input v-model="formData.mark" placeholder="请输入标记颜色" />
</el-form-item>
<el-form-item label="紧要程度" prop="urgency">
<el-radio-group v-model="formData.urgency" size="large">
<el-radio-button label="重要" />
<el-radio-button label="紧急" />
<el-radio-button label="普通" />
<el-radio-button label="较低" />
</el-radio-group>
</el-form-item>
<el-form-item label="任务提醒" prop="remindType">
<el-select v-model="formData.remindType" placeholder="请选择">
<el-option v-for="dict in getIntDictOptions(DICT_TYPE.task_remind)" :key="dict.value"
:label="dict.label" :value="dict.value" />
</el-select>
</el-form-item>
<el-form-item label="提醒方式" prop="remindMode">
<el-checkbox-group v-model="formData.remindModeArr">
<el-checkbox v-for="dict in getIntDictOptions(DICT_TYPE.remind_way)" :key="dict.value"
:label="dict.label" :value="dict.value" />
</el-checkbox-group>
</el-form-item>
<el-form-item label="任务描述" prop="description">
<el-input v-model="formData.description" type="textarea" placeholder="请输入任务描述" />
</el-form-item>
<el-form-item label="附件">
<UploadFile v-model="formData.annex" />
<el-select
v-model="formData.businessId" @click="openDialog" placeholder="请输入客户"
/>
<!-- <el-input v-model="formData.businessId" @click="openDialog" placeholder="请输入客户" /> -->
<Shuttle :selectedData.sync="formData.businessId" @confirm="handleConfirm" ref="shuttleRef" />
</el-form-item>
<el-form-item label="负责人员" prop="responsible">
<el-input v-model="formData.responsible" placeholder="请输入负责人员" />
</el-form-item>
<el-form-item label="参与人员" prop="partake">
<el-input v-model="formData.partake" placeholder="请输入参与人员" />
</el-form-item>
<el-form-item label="标记颜色" prop="mark">
<el-input v-model="formData.mark" placeholder="请输入标记颜色" />
</el-form-item>
<el-form-item label="紧要程度" prop="urgency">
<el-radio-group v-model="formData.urgency" size="large">
<el-radio-button label="重要" />
<el-radio-button label="紧急" />
<el-radio-button label="普通" />
<el-radio-button label="较低" />
</el-radio-group>
</el-form-item>
<el-form-item label="任务提醒" prop="remindType">
<el-select v-model="formData.remindType" placeholder="请选择">
<el-option v-for="dict in getIntDictOptions(DICT_TYPE.task_remind)" :key="dict.value" :label="dict.label" :value="dict.value" />
</el-select>
</el-form-item>
<el-form-item label="提醒方式" prop="remindMode">
<el-checkbox-group v-model="formData.remindModeArr">
<el-checkbox v-for="dict in getIntDictOptions(DICT_TYPE.remind_way)" :key="dict.value" :label="dict.label" :value="dict.value" />
</el-checkbox-group>
</el-form-item>
<el-form-item label="任务描述" prop="description">
<el-input v-model="formData.description" type="textarea" placeholder="请输入任务描述" />
</el-form-item>
<el-form-item label="附件">
<UploadFile v-model="formData.annex" />
</el-form-item>
</el-form>
<template #footer>
<el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
@ -87,9 +72,18 @@
<script setup lang="ts">
import * as SubjectFollowManagementApi from '@/api/xxjj/subjectFollowManagement'
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
import { selectKey } from 'node_modules/element-plus/es';
import { ref, onMounted } from 'vue'
import Shuttle from './Shuttle.vue'
const shuttleRef:any = ref(null);
const openDialog = () => {
// 在这里调用子组件的显示对话框方法
shuttleRef.value.initAdd();
};
const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗
const dialogVisible = ref(false) // 弹窗的是否展示
const dialogTitle = ref('') // 弹窗的标题
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
@ -114,6 +108,13 @@ const formRules = reactive({
businessId: [{ required: true, message: '业务id不能为空', trigger: 'blur' }]
})
const formRef = ref() // 表单 Ref
const handleConfirm=(selectData) =>{
console.log('已选择并传递的数据',selectData);
//处理子组件传递的数据 更新父组件数据
formData.businessId=selectData;
console.log(formData.businessId);
}
/** 打开弹窗 */
const open = async (type: string, id?: number) => {
@ -144,7 +145,7 @@ const submitForm = async () => {
formLoading.value = true
try {
const data = formData.value as unknown as SubjectFollowManagementApi.SubjectFollowManagementVO
data.businessType = '1';
data.businessType = '1'
debugger
if (formType.value === 'create') {
await SubjectFollowManagementApi.createSubjectFollowManagement(data)

Write Preview
Loading…
Cancel
Save