adtec-core-package 0.2.4 → 0.2.6

package/src/components/Search/ElSearch.vue

@@ -1,132 +1,132 @@
-<template>
-  <el-flex
-    @keypress="keypress"
-    :height="height"
-    style="background: #ffffff; /*border-radius: 4px;*/ padding: 15px 10px 15px 15px;"
-  >
-    <el-flex style="overflow: hidden">
-      <div ref="ref_content" style="width: 100%; overflow: hidden" :style="{ height: height }">
-        <div ref="ref_div">
-          <slot></slot>
-        </div>
-      </div>
-    </el-flex>
-
-    <el-flex
-      width="240px"
-      justify="flex-end"
-      align="flex-start"
-      style="padding-top: 30px"
-    >
-      <el-button @click="reset">重置</el-button>
-      <el-button type="primary" @click="search" :class="getRouteName + '_search'">查询</el-button>
-      <el-button type="text" @click="retract" v-show="is_retract">
-        <el-icon
-          ><ArrowDown v-show="retractval === '展开'" /><ArrowUp
-            v-show="retractval === '收起'" /></el-icon
-        >{{ retractval }}</el-button
-      >
-    </el-flex>
-  </el-flex>
-</template>
-<script setup lang="ts">
-import { computed, inject, nextTick, onMounted, ref, watch } from 'vue'
-import { useWindowSize } from '@vueuse/core'
-import { useRouter } from 'vue-router'
-import ElFlex from '../ElFlex/ElFlex.vue'
-import { ArrowDown, ArrowUp } from '@element-plus/icons-vue'
-
-const router = useRouter()
-const getRouteName = computed(() => {
-  return router.currentRoute.value.name as string
-})
-const ref_content = ref()
-const retractval = ref('展开')
-const height = ref('95px')
-const is_retract = ref(false)
-const ref_div = ref()
-const windowContent = useWindowSize()
-const collapsed = inject<boolean>('collapsed')
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-//@ts-expect-error
-watch(collapsed, () => {
-  calculation()
-})
-watch(windowContent.width, () => {
-  calculation()
-})
-const calculation = () => {
-  setTimeout(() => {
-    if (!(ref_div.value.offsetHeight > 95)) {
-      if (ref_div.value.offsetHeight !== 0) {
-        is_retract.value = false
-        height.value = ref_div.value.offsetHeight + 15 + 'px'
-        retractval.value = '收起'
-      } else {
-        calculation()
-      }
-    } else {
-      is_retract.value = true
-      height.value = '95px'
-      retractval.value = '展开'
-    }
-  }, 100)
-}
-watch(windowContent.height, () => {
-  calculation()
-})
-const retract = () => {
-  if (height.value === '95px') {
-    height.value = ref_content.value.children[0].scrollHeight + 15 + 'px'
-    retractval.value = '收起'
-  } else {
-    height.value = '95px'
-    retractval.value = '展开'
-  }
-}
-const reset = () => {
-  emit('reset')
-}
-const search = () => {
-  emit('search')
-}
-const keypress = () => {
-  // if (e.key === 'Enter') {
-  //   emit('search')
-  // }
-}
-const emit = defineEmits<{
-  (event: 'reset'): void
-  (event: 'search'): void
-}>()
-onMounted(() => {
-  nextTick(() => {
-    if (!(ref_content.value.children[0].scrollHeight > 95)) {
-      is_retract.value = false
-      height.value = ref_content.value.children[0].scrollHeight + 15 + 'px'
-      retractval.value = '收起'
-    } else {
-      is_retract.value = true
-      height.value = '95px'
-      retractval.value = '展开'
-    }
-  })
-})
-
-// onKeyStroke(['d', 'D', 'ArrowRight'], () => {
-//   translateX.value += 10
-// }, { dedupe: true })
-</script>
-<style scoped lang="scss">
-.elementSelect {
-  border: 2px dashed #1a67f8 !important;
-}
-
-.demo-form-inline .el-input {
-  --el-input-width: 220px;
-}
-
-.demo-form-inline .el-select {
-  --el-select-width: 220px;
-}
-</style>
+<template>
+  <el-flex
+    @keypress="keypress"
+    :height="height"
+    style="background: #ffffff; /*border-radius: 4px;*/ padding: 15px 10px 15px 15px;"
+  >
+    <el-flex style="overflow: hidden">
+      <div ref="ref_content" style="width: 100%; overflow: hidden" :style="{ height: height }">
+        <div ref="ref_div">
+          <slot></slot>
+        </div>
+      </div>
+    </el-flex>
+
+    <el-flex
+      width="240px"
+      justify="flex-end"
+      align="flex-start"
+      style="padding-top: 30px"
+    >
+      <el-button @click="reset">重置</el-button>
+      <el-button type="primary" @click="search" :class="getRouteName + '_search'">查询</el-button>
+      <el-button type="text" @click="retract" v-show="is_retract">
+        <el-icon
+          ><ArrowDown v-show="retractval === '展开'" /><ArrowUp
+            v-show="retractval === '收起'" /></el-icon
+        >{{ retractval }}</el-button
+      >
+    </el-flex>
+  </el-flex>
+</template>
+<script setup lang="ts">
+import { computed, inject, nextTick, onMounted, ref, watch } from 'vue'
+import { useWindowSize } from '@vueuse/core'
+import { useRouter } from 'vue-router'
+import ElFlex from '../ElFlex/ElFlex.vue'
+import { ArrowDown, ArrowUp } from '@element-plus/icons-vue'
+
+const router = useRouter()
+const getRouteName = computed(() => {
+  return router.currentRoute.value.name as string
+})
+const ref_content = ref()
+const retractval = ref('展开')
+const height = ref('95px')
+const is_retract = ref(false)
+const ref_div = ref()
+const windowContent = useWindowSize()
+const collapsed = inject<boolean>('collapsed')
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+//@ts-expect-error
+watch(collapsed, () => {
+  calculation()
+})
+watch(windowContent.width, () => {
+  calculation()
+})
+const calculation = () => {
+  setTimeout(() => {
+    if (!(ref_div.value.offsetHeight > 95)) {
+      if (ref_div.value.offsetHeight !== 0) {
+        is_retract.value = false
+        height.value = ref_div.value.offsetHeight + 15 + 'px'
+        retractval.value = '收起'
+      } else {
+        calculation()
+      }
+    } else {
+      is_retract.value = true
+      height.value = '95px'
+      retractval.value = '展开'
+    }
+  }, 100)
+}
+watch(windowContent.height, () => {
+  calculation()
+})
+const retract = () => {
+  if (height.value === '95px') {
+    height.value = ref_content.value.children[0].scrollHeight + 15 + 'px'
+    retractval.value = '收起'
+  } else {
+    height.value = '95px'
+    retractval.value = '展开'
+  }
+}
+const reset = () => {
+  emit('reset')
+}
+const search = () => {
+  emit('search')
+}
+const keypress = () => {
+  // if (e.key === 'Enter') {
+  //   emit('search')
+  // }
+}
+const emit = defineEmits<{
+  (event: 'reset'): void
+  (event: 'search'): void
+}>()
+onMounted(() => {
+  nextTick(() => {
+    if (!(ref_content.value.children[0].scrollHeight > 95)) {
+      is_retract.value = false
+      height.value = ref_content.value.children[0].scrollHeight + 15 + 'px'
+      retractval.value = '收起'
+    } else {
+      is_retract.value = true
+      height.value = '95px'
+      retractval.value = '展开'
+    }
+  })
+})
+
+// onKeyStroke(['d', 'D', 'ArrowRight'], () => {
+//   translateX.value += 10
+// }, { dedupe: true })
+</script>
+<style scoped lang="scss">
+.elementSelect {
+  border: 2px dashed #1a67f8 !important;
+}
+
+.demo-form-inline .el-input {
+  --el-input-width: 220px;
+}
+
+.demo-form-inline .el-select {
+  --el-select-width: 220px;
+}
+</style>

package/src/components/business/userSelect.vue

@@ -0,0 +1,412 @@
+<!--创建人 丁盼-->
+<!--说明: userSelect 人员选择-->
+<!--创建时间: 2024/12/9 上午10:27-->
+<!--修改时间: 2024/12/9 上午10:27-->
+<template>
+  <el-drawer
+    v-if="viewType === 'drawer'"
+    :title="title"
+    v-model="dialogVisible"
+    :destroy-on-close="true"
+    size="800px"
+    @close="close"
+    @open="open"
+  >
+    <el-flex :vertical="true" v-loading="loading">
+      <el-flex :vertical="false">
+        <el-flex :vertical="true" style="padding-right: 15px">
+          <el-title title="人员列表" style="border-bottom: var(--border)"> </el-title>
+          <el-input v-model="filterText" placeholder="请输入用户名称或者编码进行搜索"></el-input>
+          <el-flex :vertical="true">
+            <el-tree
+              style="width: 100%"
+              :filter-node-method="filterNode"
+              show-checkbox
+              ref="ref_tree"
+              :data="deptUserTree"
+              @check-change="handleCheckChange"
+              node-key="id"
+              :default-expanded-keys="defaultExpandedKeys"
+              :default-checked-keys="defaultCheckedKeys"
+              :props="{
+                label: 'name',
+                children: 'children',
+              }"
+            >
+              <template #default="{ data }">
+                <el-flex align="center">
+                  <el-flex align="center" justify="center" width="20px">
+                    <el-icons
+                      model-value="adtec-dept"
+                      v-if="data.type === 'BM'"
+                      :style="{ color: 'var(--el-color-primary)' }"
+                    ></el-icons>
+                    <el-icons
+                      model-value="adtec-user"
+                      v-if="data.type === 'YH'"
+                      :style="{ color: data.sex === '1' ? '#ef5fa6' : 'var(--el-color-primary)' }"
+                    ></el-icons>
+                  </el-flex>
+                  <el-flex align="center">
+                    <el-text v-if="data.type === 'YH'">{{ data.name + `(${data.code})` }}</el-text>
+                    <el-text v-else>{{ data.name }}</el-text>
+                  </el-flex>
+                </el-flex>
+              </template>
+            </el-tree>
+          </el-flex>
+        </el-flex>
+
+        <el-flex :vertical="true" style="border-left: var(--border); padding-left: 15px">
+          <el-title
+            :title="`已选人员(${selectedUserList.length})`"
+            style="border-bottom: var(--border); margin-top: 5px"
+          ></el-title>
+          <el-flex :vertical="true">
+            <template v-for="data of selectedUserList" :key="data.id">
+              <div class="user-select">
+                <el-flex height="50px" style="border-bottom: var(--border); cursor: pointer">
+                  <el-flex align="center" width="30px">
+                    <el-icons
+                      model-value="adtec-user"
+                      style="font-size: 20px"
+                      :style="{ color: data.sex === '1' ? '#ef5fa6' : 'var(--el-color-primary)' }"
+                    >
+                    </el-icons>
+                  </el-flex>
+                  <el-flex align="center" :vertical="true" justify="flex-start">
+                    <el-flex>
+                      <el-text>{{ data.userName + `(${data.loginName})` }}</el-text>
+                    </el-flex>
+                    <el-flex align="flex-start" height="18px" style="overflow: hidden">
+                      <el-text style="font-size: 12px; opacity: 0.8; margin-bottom: 8px">{{
+                        data.deptName
+                      }}</el-text>
+                    </el-flex>
+                  </el-flex>
+                  <el-flex width="50px" align="center">
+                    <el-icon-btn
+                      @click="handleDelete(data)"
+                      model-value="adtec-close"
+                      style="opacity: 0.8; cursor: pointer"
+                    ></el-icon-btn>
+                  </el-flex>
+                </el-flex>
+              </div>
+            </template>
+          </el-flex>
+        </el-flex>
+      </el-flex>
+    </el-flex>
+    <template #footer>
+      <el-button @click="cancel">取消</el-button>
+      <el-button type="primary" @click="success">确定</el-button>
+    </template>
+  </el-drawer>
+  <el-dialog
+    v-else
+    :title="title"
+    top="10vh"
+    v-model="dialogVisible"
+    width="1000px"
+    @close="close"
+    @open="open"
+  >
+    <el-flex :vertical="true" v-loading="loading" height="500px">
+      <el-flex :vertical="false">
+        <el-flex :vertical="true" style="padding-right: 15px">
+          <el-title title="人员列表" style="border-bottom: var(--border)"> </el-title>
+          <el-input v-model="filterText" placeholder="请输入用户名称或者编码进行搜索"></el-input>
+          <el-flex :vertical="true">
+            <el-tree
+              style="width: 100%"
+              :filter-node-method="filterNode"
+              show-checkbox
+              ref="ref_tree"
+              :data="deptUserTree"
+              @check-change="handleCheckChange"
+              node-key="id"
+              :default-expanded-keys="defaultExpandedKeys"
+              :default-checked-keys="defaultCheckedKeys"
+              :props="{
+                label: 'name',
+                children: 'children',
+              }"
+            >
+              <template #default="{ data }">
+                <el-flex align="center">
+                  <el-flex align="center" justify="center" width="20px">
+                    <el-icons
+                      model-value="adtec-dept"
+                      v-if="data.type === 'BM'"
+                      :style="{ color: 'var(--el-color-primary)' }"
+                    ></el-icons>
+                    <el-icons
+                      model-value="adtec-user"
+                      v-if="data.type === 'YH'"
+                      :style="{ color: data.sex === '1' ? '#ef5fa6' : 'var(--el-color-primary)' }"
+                    ></el-icons>
+                  </el-flex>
+                  <el-flex align="center">
+                    <el-text v-if="data.type === 'YH'">{{ data.name + `(${data.code})` }}</el-text>
+                    <el-text v-else>{{ data.name }}</el-text>
+                  </el-flex>
+                </el-flex>
+              </template>
+            </el-tree>
+          </el-flex>
+        </el-flex>
+
+        <el-flex :vertical="true" style="border-left: var(--border); padding-left: 15px">
+          <el-title
+            :title="`已选人员(${selectedUserList.length})`"
+            style="border-bottom: var(--border); margin-top: 5px"
+          ></el-title>
+          <el-flex :vertical="true">
+            <template v-for="data of selectedUserList" :key="data.id">
+              <div class="user-select">
+                <el-flex height="50px" style="border-bottom: var(--border); cursor: pointer">
+                  <el-flex align="center" width="30px">
+                    <el-icons
+                      model-value="adtec-user"
+                      style="font-size: 20px"
+                      :style="{ color: data.sex === '1' ? '#ef5fa6' : 'var(--el-color-primary)' }"
+                    >
+                    </el-icons>
+                  </el-flex>
+                  <el-flex align="center" :vertical="true" justify="flex-start">
+                    <el-flex>
+                      <el-text>{{ data.userName + `(${data.loginName})` }}</el-text>
+                    </el-flex>
+                    <el-flex align="flex-start" height="18px" style="overflow: hidden">
+                      <el-text style="font-size: 12px; opacity: 0.8; margin-bottom: 8px">{{
+                        data.deptName
+                      }}</el-text>
+                    </el-flex>
+                  </el-flex>
+                  <el-flex width="50px" align="center">
+                    <el-icon-btn
+                      @click="handleDelete(data)"
+                      model-value="adtec-close"
+                      style="opacity: 0.8; cursor: pointer"
+                    ></el-icon-btn>
+                  </el-flex>
+                </el-flex>
+              </div>
+            </template>
+          </el-flex>
+        </el-flex>
+      </el-flex>
+    </el-flex>
+    <template #footer>
+      <el-button @click="cancel">取消</el-button>
+      <el-button type="primary" @click="success">确定</el-button>
+    </template>
+  </el-dialog>
+</template>
+<script setup lang="ts">
+import { useVModel } from '@vueuse/core'
+import { type PropType, ref, watch } from 'vue'
+import basicApi from '../../api/BasicApi.ts'
+import type { IOrgDeptInfo } from '../../interface/IOrgDeptInfo'
+import type { ISysUserInfo } from '../../interface/ISysUserInfo'
+import sysUserApi from '../../api/SysUserApi.ts'
+import { ElMessage, type TreeInstance } from 'element-plus'
+const loading = ref(false)
+const userList = ref<ISysUserInfo[]>()
+const orgDeptTree = ref<IOrgDeptInfo[]>([])
+const deptUserTree = ref<any[]>([])
+const selectedUserList = ref<ISysUserInfo[]>([])
+const defaultExpandedKeys = ref<any[]>([])
+const defaultCheckedKeys = ref<any[]>([])
+const ref_tree = ref<TreeInstance>()
+const filterText = ref('')
+const props = defineProps({
+  modelValue: {
+    type: Boolean,
+  },
+  /**
+   * @description 已选人员id
+   * @default []
+   * @type Array
+   */
+  selectedUserIds: {
+    type: Array as PropType<string[]>,
+    default: () => [] as string[],
+  },
+  /**
+   * @description 标题
+   * @default 人员选择
+   * @type String
+   */
+  title: {
+    type: String,
+    default: '人员选择',
+  },
+  /**
+   * @description 视图类型
+   * @default drawer
+    @type {"drawer" | "dialog" }
+   **/
+  viewType: {
+    type: String,
+    default: 'drawer',
+    validator: (value: string) => ['drawer', 'dialog'].includes(value),
+  },
+  /**
+   * @description 是否允许多选
+   * @default false
+   * @type Boolean
+   */
+  multiple: {
+    type: Boolean,
+    default: false,
+  },
+})
+watch(filterText, (val) => {
+  ref_tree.value!.filter(val)
+})
+
+const filterNode = (value: string, data: any) => {
+  if (!value) return true
+  return data.name.includes(value) || data.code.includes(value)
+}
+function success() {
+  emit('success', selectedUserList.value)
+}
+function cancel() {
+  emit('cancel')
+}
+function handleDelete(row: ISysUserInfo) {
+  const index = selectedUserList.value.findIndex((item) => item.id === row.id)
+  if (index !== -1) {
+    selectedUserList.value.splice(index, 1) // 删除该对象
+    const key = selectedUserList.value.map((item) => item.id)
+    ref_tree.value?.setCheckedKeys(key as any[])
+  }
+}
+const emit = defineEmits(['update:modelValue', 'success', 'cancel'])
+const dialogVisible = useVModel(props, 'modelValue', emit)
+const getInitUserList = async () => {
+  if (props.selectedUserIds) {
+    try {
+      selectedUserList.value = await sysUserApi.getInitUserListComp(props.selectedUserIds)
+      defaultCheckedKeys.value = []
+      selectedUserList.value.forEach((item) => {
+        defaultCheckedKeys.value.push(item.id)
+      })
+    } catch (err: any) {
+      ElMessage.error(err.msg)
+    }
+  }
+}
+const open = async () => {
+  loading.value = true
+  selectedUserList.value = []
+  userList.value = []
+  orgDeptTree.value = await basicApi.getMdmOrgDeptTree()
+  const userTreeList: any[] = []
+  const userTreeList1: any[] = []
+  orgDeptTree.value.forEach((item) => {
+    item.children?.forEach((item2) => {
+      item2.parentId = item.id
+    })
+    const list = flattenTreeToArray(item)
+    userTreeList.push(...list)
+  })
+  userList.value = await sysUserApi.getSysUserInfoUserSelectComp()
+  //根据部门关联岗位
+  userTreeList.forEach((item) => {
+    item.type = 'BM'
+    const f = userList.value?.filter((c) => c.mdmDeptId === item.id)
+    if (f) {
+      f.forEach((item2) => {
+        userTreeList1.push({
+          id: item2.id,
+          code: item2.loginName,
+          name: item2.userName,
+          parentId: item.id,
+          type: 'YH',
+          sex: item2.sex,
+        })
+      })
+    }
+  })
+  userTreeList.push(...userTreeList1)
+  const treeData = buildTree(userTreeList)
+  defaultExpandedKeys.value = []
+  treeData.forEach((item) => {
+    defaultExpandedKeys.value.push(item.id)
+  })
+  await getInitUserList()
+  deptUserTree.value = treeData
+  loading.value = false
+}
+function buildTree(flatArray: any[]) {
+  const map = new Map()
+  const tree: any[] = []
+  // 首先将平面数组的每个元素都放入 Map 中，以 id 为键，元素本身为值
+  flatArray.forEach((item) => {
+    map.set(item.id, { ...item, children: [] })
+  })
+  // 然后通过遍历每个元素，将它们归类到正确的父节点中
+  flatArray.forEach((item) => {
+    const node = map.get(item.id)
+    if (item.parentId === null) {
+      // 如果没有 parentId，说明是根节点
+      tree.push(node)
+    } else {
+      // 否则，将当前节点添加到它的父节点的 children 数组中
+      const parentNode = map.get(item.parentId)
+      if (parentNode) {
+        parentNode.children.push(node)
+      }
+    }
+  })
+  return tree
+}
+function flattenTreeToArray(tree: IOrgDeptInfo) {
+  const result: any = []
+  function traverse(node: IOrgDeptInfo) {
+    if (!node) return
+    // 将当前节点添加到结果数组
+    result.push({
+      id: node.id,
+      code: node.code,
+      name: node.name,
+      parentId: node.parentId,
+    })
+    // 如果有子节点，递归遍历子节点
+    if (node.children && node.children.length > 0) {
+      node.children.forEach((child) => traverse(child))
+    }
+  }
+  // 开始遍历树
+  traverse(tree)
+  return result
+}
+const handleCheckChange = () => {
+  const data = ref_tree.value?.getCheckedNodes().filter((c) => c.type === 'YH')
+  selectedUserList.value = []
+  if (data) {
+    data.forEach((item: any) => {
+      const f = userList.value?.find((c) => c.id === item.id)
+      if (f) {
+        selectedUserList.value.push(f)
+      }
+    })
+  }
+}
+const close = () => {
+  selectedUserList.value = []
+}
+</script>
+<style scoped lang="scss">
+.user-select {
+  //background: red;
+  width: 100%;
+}
+.user-select :hover {
+  background: #f5f7fa !important;
+}
+</style>