From e49f96c3d465e28f4f90c0e7459de748d6870a28 Mon Sep 17 00:00:00 2001
From: chenrui <1950717904@qq.com>
Date: Thu, 29 Aug 2024 15:31:37 +0800
Subject: [PATCH] =?UTF-8?q?=E6=8F=90=E4=BA=A4=E9=83=A8=E9=97=A8=E9=80=89?=
 =?UTF-8?q?=E6=8B=A9=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../enterprise/compaint/selectDeptFilter.vue  | 371 ++++++++++++++++++
 1 file changed, 371 insertions(+)
 create mode 100644 src/views/enterprise/compaint/selectDeptFilter.vue

diff --git a/src/views/enterprise/compaint/selectDeptFilter.vue b/src/views/enterprise/compaint/selectDeptFilter.vue
new file mode 100644
index 0000000..f5bb24f
--- /dev/null
+++ b/src/views/enterprise/compaint/selectDeptFilter.vue
@@ -0,0 +1,371 @@
+<template>
+    <div v-if="visible" class="van-overlay"></div>
+    <div v-if="visible" class="popup">
+        <div class="popup-title">部门查询</div>
+       <!-- 返回按钮 -->
+        <label class="btn-goback"><van-icon name="arrow-left" @click="next"/></label>
+        <!-- 关闭按钮 -->
+        <label class="close-button" @click="closePopup"></label>
+
+        <!-- 弹窗的内容 -->
+        <div class="popup-content">
+            <div class="subsearch">
+              <input class="searchbox" v-model="searchKey" placeholder="请输入部门名称"/>
+              <van-icon class="ibtn-reset" name="clear" @click="cancel()" title="重置"/>
+              <button class='btn-search' @click="queryUserList()">搜索</button>
+              <button class='btn-search' @click="selectData()">确定</button>
+            </div>
+            <div class="search-result">
+                <van-checkbox-group v-model="checked">
+                    <van-cell-group inset>
+                        <!-- <van-cell v-for="(item, index) in dataList" :key="item"  @click="toDrill(item.deptId, item.parentId)" clickable>
+                            <div style="display: flex; justify-content: space-between;">
+                                <div style="width: 70%; text-align: left;">
+                                    {{item.deptName}}
+                                </div>
+                                <div style="width: 30%;"><van-icon name="arrow" size="0.35rem" /></div>
+                            </div>
+                        </van-cell> -->
+                        <van-cell v-for="(item, index) in dataList" :key="item">
+                            <div style="display: flex; justify-content: space-between;">
+                                <div style="width: 70%;" @click="toggle(item.deptId)">
+                                    <van-checkbox :name="item.deptId+';-;'+item.deptName" :ref="el => checkboxRefs[item.deptId] = el" @click.stop>
+                                        {{item.deptName}}
+                                    </van-checkbox>
+                                </div>
+                                <div>
+                                  <van-button 
+                                  type="primary" 
+                                  size="mini"
+                                  icon="add-o"
+                                  @click="toDrill(item.deptId, item.parentId)"
+                                  >展开</van-button>
+                                </div>
+                            </div>
+                            
+                        </van-cell>
+                    </van-cell-group>
+
+                    <!-- <van-cell-group inset>
+                        <van-cell v-for="(item, index) in userList" :key="item" clickable>
+                            <div style="display: flex; justify-content: space-between;">
+                                <div style="width: 70%;" @click="toggle(item.deptId)">
+                                    <van-checkbox :name="item.userId+';-;'+item.userName+';-;'+item.deptId+';-;'+item.dept.deptName" :ref="el => checkboxRefs[item.userId] = el" @click.stop>
+                                        {{item.userName}}
+                                    </van-checkbox>
+                                </div>
+                            </div>
+                        </van-cell>
+                    </van-cell-group> -->
+                </van-checkbox-group>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+    import {ref} from 'vue'
+    import {queryDepts, nextDeptByparentId, queryUsersNoPermission} from '@/api/user'
+    import {Icon, showSuccessToast,showToast } from 'vant';
+
+    const {useCommon} = $globalStore
+    const router = useRouter();
+    export default {
+        props: {
+            visible: {
+                type: Boolean,
+                default: false
+            },
+            content: {
+                type: String,
+                default: ''
+            },
+        },
+        data() {
+            return {
+                searchParam: {
+                    //搜索框
+                    dataScopeId: useCommon.userId,
+                    deptName: '',
+                    parentId: '0',
+                },
+                searchKey: "",
+                dataList: [],
+                checked: ref([]),
+                checkboxRefs: ref([]),
+                nextParentId: '0',
+                userList: [],
+            }
+        },
+        created() {
+            this.queryList()
+        },
+        methods: {
+            toggle(index) {
+                this.checkboxRefs[index].toggle();
+            },
+            toDrill(deptId, parentId) {
+                this.nextParentId = parentId;
+                this.searchParam.parentId = deptId;
+                this.queryList();
+            },
+            next() {
+                if (null != this.nextParentId) {
+                    this.searchParam.parentId = this.nextParentId;
+                    nextDeptByparentId(this.searchParam, success => {
+                        this.nextParentId = success.data.parentId;
+                        this.queryList();
+                    }, error => {
+                    })
+                }
+            },
+            closePopup() {
+                this.$emit('close');
+            },
+            queryList() {
+                queryDepts(this.searchParam, success => {
+                    if (null != success.data && success.data.length > 0) {
+                        this.userList = [];
+                        this.dataList = success.data
+                    } else {
+                        // 没有底层数据说明到叶子节点了 . 根据部门id去查询相关用户信息
+                        // queryUsersNoPermission({"deptId": this.searchParam.parentId}, success => {
+                        //     this.dataList = [];
+                        //     this.userList = success.data;
+                        // }, error => {
+                        // });
+                        showToast ("暂无数据！")
+                    }
+                }, error => {
+                })
+            },
+            queryUserList() {
+                if (null == this.searchKey || "" == this.searchKey) {
+                    showSuccessToast('人员过多, 请输入关键字!');
+                    return;
+                }
+                queryUsersNoPermission({"userName": this.searchKey}, success => {
+                    this.dataList = [];
+                    this.userList = success.data;
+                }, error => {
+                });
+            },
+            cancel() {
+                this.searchParam.deptName = '';
+                this.queryList()
+            },
+            selectData() {
+                let res = [];
+                let checkeds = JSON.parse(JSON.stringify(this.checked));
+                for (var i=0; i<checkeds.length; i++) {
+                    var item = checkeds[i].split(";-;");
+                    res.push({"deptId":item[0], "deptName":item[1]});
+                }
+                // this.$emit("reciveData", JSON.parse(JSON.stringify(this.checked)));
+                this.$emit("reciveData", res);
+                this.$emit('close');
+            },
+        },
+        
+
+    }
+</script>
+
+<style scoped>
+    .popup {
+        position: fixed;
+        z-index: 999;
+        top: 3rem;
+        left: 0;
+        width: 100%;
+        height: calc(100% - 3rem);;
+        background: #fff;
+        overflow: hidden;
+    }
+
+    .popup-title {
+        margin: 0.3rem 0 0;
+        width: 100%;
+        height: 1rem;
+        border-bottom: 1px solid #f3f4f5;
+        text-align: center;
+        font-size: 0.42rem;
+        font-weight: 600;
+    }
+
+    .btn-goback {
+        position: absolute;
+        top: 0.267rem;
+        left: 0.3rem;
+        width: 0.8rem;
+        height: 0.8rem;
+        font-size: 0.5rem;
+        font-weight: bold;
+        color: #333;
+        line-height: 1.5;
+    }
+
+    .close-button {
+        position: absolute;
+        top: 0.15rem;
+        right: 0.1rem;
+        width: 0.8rem;
+        height: 0.8rem;
+        background-color: rgba(255, 255, 255, .5);
+        border: 0.05rem solid rgba(255, 255, 255, .7);
+        border-radius: 50%;
+        transform: rotate(45deg);
+    }
+
+    .close-button:before,
+    .close-button:after {
+        content: '';
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        background: #333;
+        border-radius: 50%;
+        transform: translate(-50%, -50%);
+        height: 0.4rem;
+        width: 0.02rem;
+    }
+
+    .close-button:after {
+        height: 0.02rem;
+        width: 0.4rem;
+    }
+
+    .popup-content {
+        margin: 0.25rem 3% 0;
+        padding-bottom: 3rem;
+        width: 94%;
+        height: calc(100% - 1.6rem);
+        overflow-y: auto;
+        font-size: 0.37rem;
+    }
+
+    .subsearch {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      margin: 3%;
+      width: 94%;
+      height: 1.25rem;
+      font-size: 0.37rem;
+    }
+
+    .subsearch .ibtn-reset {
+      margin: 0 0.5rem 0 -1rem;
+      width: 1rem;
+      color: #afabab;
+      font-size: 0.5rem;
+    }
+
+    .subsearch .btn-search {
+      margin: 0 0.8rem 0 -0.5rem;
+      width: 20%;
+      height: 1rem;
+      border-radius: 0 0.15rem 0.15rem 0;
+    }
+
+    .subsearch .btn-search:last-child {
+      margin-right: 0;
+      border-radius: 0.15rem;
+      background: #19ab47;
+      border-color: #19ab47;
+    }
+
+
+    .searchbox {
+      margin: 2% 0;
+      padding: 0.1rem 1.2rem 0.1rem 0.9rem;
+      width: 100%;
+      height: 1rem;
+      background: #f6f7fe url(../../assets/images/icon_sou.png) no-repeat;
+      background-position: left 0.25rem center;
+      background-size: auto 50%;
+      box-sizing: border-box;
+      border: 1px solid rgba(0, 0, 0, .1);
+      border-radius: 0.15rem 0 0 0.15rem;
+      color: #999999;
+      outline: none;
+    }
+
+    .subtitle {
+        margin: 0.5rem 0 0.25rem;
+        font-size: 0.4rem;
+        font-weight: 600;
+    }
+
+    .quick-item {
+        display: flex;
+    }
+
+    .quick-item span {
+        display: inline-block;
+        margin: 1% 0 2% 3.5%;
+        padding: 2% 3.75%;
+        background: #f2f3f4;
+        border: 0;
+        border-radius: 8px;
+        color: #4c4c4c;
+    }
+
+    .quick-item span.seled {
+        background: #e9f2fb;
+        color: #1367fe;
+    }
+
+    .btnbox {
+        display: flex;
+        justify-content: center;
+        margin: 5% 2%;
+        width: 96%;
+        height: 1.0rem;
+    }
+
+    .btn-reset,
+    .btn-search {
+        display: inline-block;
+        margin: 0 2%;
+        padding: 0;
+        width: 60%;
+        color: #fff;
+        font-size: 0.37rem;
+        border-radius: 1rem;
+        background: #1367fe;
+        border: 1px solid #1367fe;
+        text-align: center;
+    }
+
+    .btn-reset {
+        width: 35%;
+        background-color: #fff;
+        border-color: rgba(19, 103, 254, .7);
+        color: #1367fe;
+    }
+
+    .search-result {
+        width: 100%;
+        padding-bottom: 2rem;
+    }
+
+    .case-item {
+        margin: 3% 2%;
+        padding: 2% 0;
+        width: 96%;
+        font-size: 0.35rem;
+        border-bottom: 1px solid #f4f4f4;
+        color: #999;
+        line-height: 2;
+    }
+
+    .case-title {
+        margin: 2% 0;
+        font-size: 0.42rem;
+        color: #333;
+        line-height: 1.25;
+    }
+
+
+</style>
\ No newline at end of file