From 7d82255520777a421397d03c4961dc228c814398 Mon Sep 17 00:00:00 2001
From: qiuhongwu <Qhw0227@163.com>
Date: Wed, 18 Oct 2023 16:32:11 +0800
Subject: [PATCH] =?UTF-8?q?=E5=85=B3=E8=81=94=E5=91=98=E5=B7=A5=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../xxjj/subjectFollowManagement/Shuttle.vue  | 241 ++++++++++++++++++
 .../SubjectFollowManagementForm.vue           | 119 ++++-----
 2 files changed, 301 insertions(+), 59 deletions(-)
 create mode 100644 yunxi-ui-admin-vue3/src/views/xxjj/subjectFollowManagement/Shuttle.vue

diff --git a/yunxi-ui-admin-vue3/src/views/xxjj/subjectFollowManagement/Shuttle.vue b/yunxi-ui-admin-vue3/src/views/xxjj/subjectFollowManagement/Shuttle.vue
new file mode 100644
index 00000000..e328d15b
--- /dev/null
+++ b/yunxi-ui-admin-vue3/src/views/xxjj/subjectFollowManagement/Shuttle.vue
@@ -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>
diff --git a/yunxi-ui-admin-vue3/src/views/xxjj/subjectFollowManagement/SubjectFollowManagementForm.vue b/yunxi-ui-admin-vue3/src/views/xxjj/subjectFollowManagement/SubjectFollowManagementForm.vue
index 53a82516..008f80d4 100644
--- a/yunxi-ui-admin-vue3/src/views/xxjj/subjectFollowManagement/SubjectFollowManagementForm.vue
+++ b/yunxi-ui-admin-vue3/src/views/xxjj/subjectFollowManagement/SubjectFollowManagementForm.vue
@@ -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)