From a4843c3bfb988dc0aaad19af41fa0f51097f0fea Mon Sep 17 00:00:00 2001
From: chenrui <1950717904@qq.com>
Date: Mon, 9 Sep 2024 15:18:34 +0800
Subject: [PATCH] =?UTF-8?q?=E8=81=94=E5=90=88=E6=A3=80=E6=9F=A5=E9=83=A8?=
 =?UTF-8?q?=E9=97=A8=E9=80=89=E6=8B=A9=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

diff --git a/src/views/enterprise/compaint/uniteDept.vue b/src/views/enterprise/compaint/uniteDept.vue
new file mode 100644
index 0000000..071e022
--- /dev/null
+++ b/src/views/enterprise/compaint/uniteDept.vue
@@ -0,0 +1,348 @@
+<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 deptList" :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-checkbox-group>
+          </div>
+      </div>
+  </div>
+</template>
+
+<script setup>
+  import {queryDepts, nextDeptByparentId, queryUsersNoPermission} from '@/api/user'
+  import {Icon, showSuccessToast,showToast } from 'vant';
+  import {ref,defineEmits,getCurrentInstance,defineProps } from 'vue';
+  const {useCommon} = $globalStore
+  const emits = defineEmits(['reciveData','close']);
+  const router = useRouter();
+  const props = defineProps({
+        visible: {
+          type: Boolean,
+          default: false
+        },
+        deptList: {
+          type: Array,
+          default: false
+        },
+    });
+        const searchParam = reactive( {
+            //搜索框
+            dataScopeId: useCommon.userId,
+            deptName: '',
+            parentId: '0',
+        })
+        const searchKey =  "";
+        const dataList = [];
+        const checked = ref([])
+        const checkboxRefs = ref([]);
+        const nextParentId = '0'
+        const userList = []
+
+      onMounted(() =>{
+        console.log(props?.deptList);
+
+      })
+          const toggle = (index) => {
+              checkboxRefs[index].toggle();
+          }
+          const toDrill = (deptId, parentId) => {
+              nextParentId = parentId;
+              searchParam.parentId = deptId;
+              queryList();
+          }
+          const next = () =>{
+              if (null != nextParentId) {
+                  searchParam.parentId = nextParentId;
+                  nextDeptByparentId(searchParam, success => {
+                      nextParentId = success.data.parentId;
+                      queryList();
+                  }, error => {
+                  })
+              }
+          }
+          const closePopup = () =>{
+            emits('close');
+          }
+          const queryList = () =>{
+              queryDepts(searchParam, success => {
+                  if (null != success.data && success.data.length > 0) {
+                      userList = [];
+                      dataList = success.data
+                  } else {
+                      showToast ("暂无数据！")
+                  }
+              }, error => {
+              })
+          }
+          const queryUserList = ()=> {
+              if (null == searchKey || "" == searchKey) {
+                  showSuccessToast('人员过多, 请输入关键字!');
+                  return;
+              }
+              queryUsersNoPermission({"userName": searchKey}, success => {
+                  dataList = [];
+                  userList = success.data;
+              }, error => {
+              });
+          }
+          const cancel = () => {
+              searchParam.deptName = '';
+              queryList()
+          }
+          const selectData = () => {
+              const res = ref([]);
+              let checkeds = JSON.parse(JSON.stringify(checked.value));
+              console.log(checkeds);
+              for (var i=0; i<checkeds.length; i++) {
+                  var item = checkeds[i].split(";-;");
+                  console.log(item)
+                  res.value.push({"deptId":item[0], "deptName":item[1]});
+              }
+              emits("reciveData", res.value);
+              emits('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: #cfcbcb;
+    font-size: 0.5rem;
+  }
+
+  .subsearch .btn-search {
+    margin: 0 0.8rem 0 -0.2rem;
+    width: 20%;
+    height: 1rem;
+    background: #eeeff1 url(/src/assets/images/icon_sou.png) no-repeat;
+    background-position: left 0.3rem center;
+    background-size: auto 50%;
+    border-radius: 0 0.15rem 0.15rem 0;
+    border: 1px solid rgba(0, 0, 0, .1);
+    border-left: 1px solid #eee;
+    line-height: 10rem;
+    overflow: hidden;
+  }
+
+  .subsearch .btn-search:last-child {
+    margin-right: 0;
+    border-radius: 0.15rem;
+    background: #1367fe;
+    border-color: #1367fe;
+    color: #fff;
+    line-height: 1;
+  }
+
+
+  .searchbox {
+    margin: 2% 0;
+    padding: 0.1rem 1.2rem 0.1rem 0.3rem;
+    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