hrp-ui-base 1.0.1 → 1.0.3

package/packages/approval-process/packages/flow/systemCom/choose-depart.vue

@@ -0,0 +1,399 @@
+<!-- 选择部门 - 多选 - 单选 -->
+<template>
+  <div @click="changeDigVis(true)" class="triggerArea flexRowStart">
+    <div class="triggerItem" v-for="(item, index) in checkedMember" :key="index"
+      v-if="checkedMember && checkedMember.length > 0 && !props.abbreviate">
+      {{ item.deptName }}
+    </div>
+
+    <div v-else-if="checkedMember && checkedMember.length > 0 && props.abbreviate" class="abbreviateItem flexRowCenter">
+      {{ `已选择（${checkedMember.length}）` }}<el-icon style="font-size:16px;">
+        <UserFilled />
+      </el-icon>
+    </div>
+    <div v-else>请选择部门</div>
+  </div>
+  <el-dialog v-model="dialogVisible" title="选择部门" :width="800" style="height:588px;border-radius: 8px;" :footer="true"
+    :show-close="false" class="searchDialog">
+    <div class="flexRowStart searchBox">
+      <div class="flexColumnStart searchItem">
+        <el-input v-model="searchContent" class="w-50 m-2" placeholder="请输入" :suffix-icon="Search" size="large"
+          @blur="goSearch" v-if="false" />
+        <div class="companyNameBox">
+          <span v-for="(nameItem, nameIndex) in namebox" :key="nameIndex" class="companyNameBoxName"
+            @click="goPointLevel(nameItem, nameIndex)">
+            {{ nameItem.name }}
+            <span v-if="nameIndex != namebox.length - 1" class="companyNameBoxSymbol">
+              /
+            </span>
+          </span>
+        </div>
+        <el-checkbox v-model="checkAll" :indeterminate="isIndeterminate" @change="handleCheckAllChange" size="default"
+          v-if="multiple">全选</el-checkbox>
+
+        <el-checkbox-group v-model="checkedMember" @change="handleCheckedMemberChange" size="default"
+          class="flexColumnStart optionbox" v-if="multiple">
+          <div class="flexRowBetween" style="width:100%" v-for="(item, index) in departs" :key="item.deptId">
+            <el-checkbox :label="item" size="default" style="margin-bottom: 8px;font-size:18px;width: 340px;min-height:24px;max-height: 24px;
+                        ">
+              {{
+    item.deptName
+  }}
+            </el-checkbox>
+            <div style="width:100px;height:24px;font-size: 16px;line-height: 16px;cursor: pointer;" class="flexRowStart"
+              @click.stop="goNextLevel(item)">
+              <el-icon style="margin-right:4px;">
+                <Expand />
+              </el-icon>{{ '下级' }}
+            </div>
+          </div>
+        </el-checkbox-group>
+        <el-radio-group v-if="!multiple" v-model="checkedMemberForRadio" size="default"
+          class="flexColumnStart optionbox" @change="radioChanged">
+          <div class="flexRowBetween" style="width:100%" v-for="(item, index) in departs" :key="item.deptId">
+            <el-radio :label="item" size="default" style="margin-bottom: 8px;font-size:18px;width: 250px;min-height:24px;max-height: 24px;
+                        ">
+              <div class="flexRowBetween" style="width:300px">
+                {{
+    item.deptName
+  }}
+              </div>
+
+            </el-radio>
+            <div style="width:100px;height:24px;font-size: 16px;line-height: 16px;cursor: pointer;" class="flexRowStart"
+              @click.stop="goNextLevel(item)">
+              <el-icon style="margin-right:4px;">
+                <Expand />
+              </el-icon>{{ '下级' }}
+            </div>
+          </div>
+        </el-radio-group>
+      </div>
+      <div class="flexColumnStart searchItem"
+        style="padding-left: 8px;border-left: 2px solid #e3e3e3;height: 464px;width:48%;margin-left: 2px;">
+        <div class="flexRowBetween" style="width:100%;margin-bottom: 18px;">
+          <div @click="showCeshi">已选择</div>
+          <div style="color:skyblue;cursor: pointer;" @click="resetChoose">清空</div>
+        </div>
+        <div class="flexRowStartCenter" style="flex-wrap: wrap;">
+          <div class="chooseItem flexRowStartCenter" v-for="(item, index) in checkedMember" :key="item.userId">
+            <el-icon style="font-size:17px">
+              <GobletFull />
+            </el-icon>
+            <div class="chooseItemName">{{ item.deptName }}</div>
+            <el-icon class="chooseItemIcon" @click="deleteCheckedItem(index)">
+              <Close />
+            </el-icon>
+          </div>
+        </div>
+      </div>
+    </div>
+    <template #footer>
+      <span class="dialog-footer">
+        <el-button @click="cancelDia">取消</el-button>
+        <el-button type="primary" @click="saveDia">
+          确定
+        </el-button>
+      </span>
+    </template>
+  </el-dialog>
+</template>
+<script lang="ts" setup>
+import { ref, onMounted, toRefs, watch, PropType } from 'vue'
+import { Search } from '@element-plus/icons-vue'
+import DeptController from "hrp-ui-base/api/hrms/dept/deptController"
+import type { departBo, nameForSearchBo } from './BO/departBo'
+const props = defineProps({
+  modelValue: {
+    type: Array as PropType<any>
+  },
+  multiple: {
+    type: Boolean,
+    default: true,
+    require: false
+  },
+  abbreviate: {
+    type: Boolean,
+    default: false,
+    require: false
+  }
+})
+const emits = defineEmits(['update:modelValue', 'changeCheckMemberId'])
+const { modelValue, multiple } = toRefs(props)
+const showCeshi = () => {
+  console.log(checkedMember, checkAll.value)
+}
+onMounted(() => {
+  setTimeout(() => {
+    checkedMember.value = modelValue && modelValue.value ? modelValue.value : []
+    if (!multiple.value) {
+      console.log(checkedMember.value)
+      checkedMemberForRadio.value = checkedMember.value[0]
+    }
+  }, 500)
+  // getList('1')
+})
+const getList = async (id: string) => {
+  console.log(id)
+  await DeptController.getDeptListByParentId(id).then((data) => {
+    if (data && data.res) {
+      let arr = <any>[]
+      if (data.res.length > 0) {
+        data.res.forEach((item) => {
+          arr.push({ ...item, id: item.deptId })
+        })
+      }
+      departs.value = arr
+      handleCheckedMemberChange(checkedMember.value)
+    }
+    // checkAll.value = false
+  })
+}
+const dialogVisible = ref(false)
+const searchContent = ref('')
+const checkAll = ref(false)
+const isIndeterminate = ref(false)
+const checkedMember = ref<any[]>([])
+let members = ref<any>([])
+let departs = ref<departBo[]>([])
+// 点击多选
+const handleCheckAllChange = (val: boolean) => {
+  let copyMembers = JSON.parse(JSON.stringify(checkedMember.value))
+  for (let j = checkedMember.value.length - 1; j >= 0; j--) {
+    departs.value.forEach((item, index) => {
+      if (item.deptId == checkedMember.value[j].deptId) {
+        console.log(item, checkedMember.value[j])
+        copyMembers.splice(j, 1)
+      }
+    })
+  }
+  if (val) {
+    departs.value.forEach((item, index) => {
+      copyMembers.push(item)
+    })
+  }
+  checkedMember.value = copyMembers
+  // checkedMember.value = val ? members.value : []
+  isIndeterminate.value = false
+}
+const handleCheckedMemberChange = (value: any) => {
+  console.log(value)
+  let chooseAllAll = true
+  let havaOneChoose = false
+  departs.value.forEach((j, jndex) => {
+    let havaValue = false
+    value.forEach((i: any, index: number) => {
+
+      if (i.deptId == j.deptId) {
+        havaValue = true
+        havaOneChoose = true
+      }
+    })
+    if (!havaValue) {
+      chooseAllAll = false
+    }
+  })
+  isIndeterminate.value = chooseAllAll ? false : havaOneChoose
+  checkAll.value = chooseAllAll
+  console.log(value, chooseAllAll, havaOneChoose, isIndeterminate.value, checkAll.value)
+
+  // let copyMembers = [...checkedMember]
+  // members.value.forEach((item,index)=>{
+  //     value.forEach((id:string,idIndex:number)=>{
+  //         if(item.userId == id){
+
+  //         }
+  //     })
+  // })
+
+}
+const goSearch = () => {
+
+}
+const namebox = ref([{ name: '全部', id: '1' }])
+const resetChoose = () => {
+  checkedMember.value.length = 0
+  checkedMemberForRadio.value = undefined
+  checkAll.value = false
+  isIndeterminate.value = false
+}
+// 去下级
+const goNextLevel = async (item: departBo) => {
+  await getList(item.deptId)
+  namebox.value.push({ id: item.deptId, name: item.deptName })
+}
+// 改变当前层级，点击部门名字
+const goPointLevel = async (item: nameForSearchBo, index: number) => {
+  await getList(item.id)
+  namebox.value.splice(index + 1, namebox.value.length - index - 1)
+}
+const changeDigVis = async (value: boolean) => {
+  if (value) {
+    await getList('1')
+  }
+  dialogVisible.value = value
+}
+const cancelDia = () => {
+  console.log(checkedMemberForRadio.value)
+  // @ts-ignore
+  checkedMember.value = modelValue && modelValue.value ? modelValue.value : []
+  if (!multiple.value) {
+    checkedMemberForRadio.value = checkedMember.value[0]
+  }
+  console.log(checkedMemberForRadio.value)
+
+  changeDigVis(false)
+}
+const saveDia = () => {
+  let arr: Array<string> = []
+  checkedMember.value.forEach((item, index) => {
+    arr.push(item.userId)
+  })
+  emits('update:modelValue', checkedMember.value)
+  emits('changeCheckMemberId', arr)
+  changeDigVis(false)
+}
+// 删除某个以选项
+const deleteCheckedItem = (index: number) => {
+  checkedMember.value.splice(index, 1)
+}
+// 单选绑定的值
+const checkedMemberForRadio = ref<any>()
+// 改变单选时将值赋给checkedMember
+const radioChanged = (value: any) => {
+  console.debug(value)
+  // let chooseItem = {}
+  // members.value.forEach(i => {
+  //     if (i.userId == value) {
+  //         chooseItem = i
+  //     }
+  // })
+  // console.log(chooseItem)
+  checkedMember.value.length = 0
+  checkedMember.value.push(value)
+}
+watch(() => props.modelValue, () => {
+  console.warn('modelValue改变了')
+  checkedMember.value = modelValue && modelValue.value ? modelValue.value : []
+  if (!multiple.value) {
+    console.log(checkedMember.value)
+    checkedMemberForRadio.value = checkedMember.value[0]
+  }
+})
+</script>
+<style lang="scss">
+@use '../styles/common.scss';
+
+.el-button--text {
+  margin-right: 15px;
+}
+
+.dialog-footer button:first-child {
+  margin-right: 10px;
+}
+
+.searchBox {
+  width: 100%;
+  flex-grow: 0;
+  flex-shrink: 0;
+  font-size: 16px;
+}
+
+.searchItem {
+  width: 50%;
+}
+
+.chooseItem {
+  padding: 2px 6px;
+  margin: 0 10px 8px 0;
+  background-color: var(--custom-theme-info-6);
+
+  img {
+    border-radius: 50%;
+    margin-right: 4px;
+    width: 16px;
+    height: 16px;
+  }
+
+  &Name {
+    margin-right: 8px;
+  }
+
+  &Icon {
+    cursor: pointer;
+  }
+}
+
+.triggerArea {
+  width: 100%;
+  min-height: 32px;
+  height: min-content;
+  border: 1px solid rgb(229, 230, 232);
+  padding: 8px;
+
+  .triggerItem {
+    margin-right: 8px;
+    margin-bottom: 3px;
+    display: inline-block;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    color: var(--custom-theme-text-2);
+    border-color: #cfd2d5;
+    background-color:var(--custom-theme-info-5);
+    padding: 2px 12px;
+    cursor: pointer;
+  }
+}
+
+.companyNameBox {
+  font-size: 18px;
+  line-height: 30px;
+  overflow: hidden;
+  // text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow-x: auto;
+  width: 100%;
+
+  &Name {
+    color: #1890ff;
+    cursor: pointer;
+  }
+
+  &Symbol {
+    margin: 0 9px;
+    color: #a3a3a3
+  }
+}
+
+.optionbox {
+  overflow-y: auto;
+  height: 365px;
+  width: 100%;
+  flex-grow: 0;
+  flex-shrink: 0;
+  flex-wrap: nowrap;
+}
+
+.abbreviateItem {
+  font-size: 14px;
+  margin: 0 18px;
+  height: 20px;
+  line-height: 20px;
+}
+</style>
+<style lang="scss">
+.searchBox {
+  .el-checkbox {
+    margin-right: 0
+  }
+
+}
+
+.searchDialog {
+  .el-dialog__body {
+    padding-top: 10px;
+    padding-bottom: 10px;
+  }
+}
+</style>