adtec-core-package 2.1.9 → 2.2.0

package/src/components/business/comp.userForm.vue

@@ -1,311 +1,311 @@
-<!--创建人 胡啸东-->
-<!--创建时间: 2024/11/8 上午10:33-->
-<!--修改时间: 2024/11/8 上午10:33-->
-<template>
-  <el-flex v-loading="loading" :vertical="true">
-    <el-search
-      class="border"
-      style="border-bottom: var(--border)"
-      @reset="resetQuery"
-      @search="handleQuery"
-    >
-      <el-form
-        ref="queryRef"
-        :inline="true"
-        :model="queryParam"
-        :style="{ width: '100%', height: '100%' }"
-        labelPosition="top"
-        size="default"
-      >
-        <el-form-item :style="{ width: '220px' }" label="所属部门" prop="deptIds">
-          <el-tree-select
-            ref="ref_tree"
-            check-strictly
-            :disabled="queryParam.disabled"
-            v-model="queryParam.deptIds"
-            :data="orgDeptTree"
-            filterable
-            multiple
-            :default-expand-all="true"
-            :props="{
-              label: 'name',
-              children: 'children',
-              disabled: (data: IOrgDeptInfo) => data.isValid !== '1' || queryParam.disabled,
-            }"
-            :render-after-expand="false"
-            clearable
-            collapse-tags
-            collapse-tags-tooltip
-            node-key="id"
-            placeholder="请选择所属部门"
-          />
-        </el-form-item>
-        <el-form-item :style="{ width: '220px' }" label="人员编码或名称" prop="codeorname">
-          <el-input
-            v-model="queryParam.codeorname"
-            clearable
-            placeholder="请输入人员编码或名称"
-          ></el-input>
-        </el-form-item>
-      </el-form>
-    </el-search>
-    <el-title class="border" style="border-bottom: var(--border)" title="人员列表"></el-title>
-    <div style="padding-top: 4px">
-      <el-tag
-        v-for="user in selectUserList"
-        :key="user.code"
-        closable
-        style="margin: 2px"
-        @close="handleCloseTag(user)"
-      >
-        <el-tooltip placement="top" :content="user.deptName">
-          {{ user.name }}
-        </el-tooltip>
-      </el-tag>
-    </div>
-    <el-table
-      ref="ref_table"
-      :data="userList?.records"
-      border
-      @row-click="handleRadioChange"
-      height="100%"
-      @select="selectRows"
-      @select-all="selectRows"
-      :row-class-name="rowClassName"
-      style="margin-top: 8px"
-    >
-      <el-table-column
-        type="selection"
-        width="38"
-        :show-overflow-tooltip="false"
-        header-align="center"
-        :selectable="(row: IMdmEmployee) => row.isValid === '1'"
-        v-if="multiple"
-      >
-      </el-table-column>
-      <el-table-column
-        align="center"
-        width="38"
-        :show-overflow-tooltip="false"
-        header-align="center"
-        v-else
-      >
-        <template #default="scope">
-          <div
-            style="display: flex; justify-content: center; align-items: center; padding-left: 8px"
-          >
-            <el-radio v-model="checkId" :label="scope.row.id" @change="handleRadioChange(scope.row)"
-            ><span></span
-            ></el-radio>
-          </div>
-        </template>
-      </el-table-column>
-      <el-table-column :show-overflow-tooltip="true" label="用户姓名" prop="name" width="120"/>
-      <el-table-column :show-overflow-tooltip="true" label="岗位名称" prop="postName" width="120"/>
-      <el-table-column :show-overflow-tooltip="true" label="所属部门" prop="deptName"/>
-      <el-table-column
-        :show-overflow-tooltip="true"
-        label="所属组织"
-        prop="orgName"
-        v-if="props.showOrgInfo"
-        width="220"
-      />
-    </el-table>
-    <el-pagination
-      v-model:current-page="queryParam.current"
-      :background="true"
-      :page-size="queryParam.size"
-      :total="userList?.total ? userList?.total : 0"
-      style="margin-top: 5px; margin-bottom: 5px"
-      @current-change="handleQuery"
-    ></el-pagination>
-  </el-flex>
-</template>
-<script lang="ts" setup>
-import {useVModel} from '@vueuse/core'
-import type {IMdmEmployeeQuery} from '../../interface/IMdmEmployeeQuery'
-import {nextTick, onMounted, ref, watch} from 'vue'
-import type {IpageDataQuery, PageData} from '../../interface//PageData'
-import type {IMdmEmployee} from '../../interface/IMdmEmployee'
-import {ElMessage, ElTooltip, type TableInstance, type TreeNode} from 'element-plus'
-import deptInfoApi from '../../api/DeptInfoApi'
-import type {IOrgDeptInfo} from '../../interface/IOrgDeptInfo'
-import EmployeeInfoApi from '../../api/EmployeeInfoApi'
-import {useResetRefHooks} from '../../hooks/useResetRefHooks'
-import frameworkUtils from '../../utils/FrameworkUtils'
-
-// 明确指定 Props 的泛型参数类型
-interface Props<T extends IpageDataQuery, E extends IMdmEmployee> {
-  fetchData?: (data: T) => Promise<PageData<E>>
-  defalutQueryParam?: any
-  multiple?: boolean
-  showOrgInfo?: boolean
-}
-
-const props = withDefaults(defineProps<Props<IMdmEmployeeQuery, IMdmEmployee>>(), {
-  fetchData: EmployeeInfoApi.getMdmEmployeeListByIds,
-  defalutQueryParam: {
-    disabled: false,
-    deptIds: [],
-  },
-  multiple: true,
-  showOrgInfo: true,
-})
-const [queryParam, resetQueryParam] = useResetRefHooks<IMdmEmployeeQuery>({
-  ...{
-    current: 1,
-    size: frameworkUtils.getPageSize(),
-  },
-  ...props.defalutQueryParam,
-})
-const emit = defineEmits(['success'])
-const orgDeptTree = ref<IOrgDeptInfo[]>([])
-const loading = ref(false)
-const queryRef = ref()
-const ref_table = ref<TableInstance>()
-const checkId = ref('')
-const selectRow = ref<IMdmEmployee>()
-const ref_tree = ref()
-const [selectUserList, resetSelectUserList] = useResetRefHooks<IMdmEmployee[]>([])
-const [userList, resetUserList] = useResetRefHooks<PageData<IMdmEmployee>>({
-  records: [],
-  total: 0,
-  pages: 0,
-  current: 1,
-})
-const rowClassName = ({row, rowIndex}: { row: IMdmEmployee; rowIndex: number }) => {
-  if (row.isValid !== '1') {
-    return 'table-row-disabled'
-  }
-}
-const getTreeData = async () => {
-  try {
-    orgDeptTree.value = await deptInfoApi.getMdmOrgDeptTree({})
-  } catch (error: any) {
-    frameworkUtils.messageError(error)
-  }
-}
-const handleRadioChange = (row: IMdmEmployee) => {
-  if (row.id === checkId.value) {
-    selectRow.value = undefined
-    checkId.value = ''
-  } else {
-    checkId.value = row.id!
-    selectRow.value = row
-  }
-}
-const renderTreeNode = (
-  h: (type: any, props: any, children: any) => any,
-  {node, data}: { node: TreeNode; data: IOrgDeptInfo },
-) => {
-  return [
-    h(
-      ElTooltip,
-      {
-        content: data.name,
-        placement: 'top',
-      },
-      () => [h('span', {}, data.name)],
-    ),
-  ]
-}
-const selectRows = (selects: IMdmEmployee[], row?: IMdmEmployee) => {
-  if (row) {
-    //此时要先判断是选中还是取消选中
-    if (!judgeIsSel(selects, row)) {
-      selectUserList.value = selectUserList.value.filter((item) => item.code !== row.code)
-    } else {
-      selectUserList.value.push(row)
-    }
-  } else {
-    //此时是全选中或全取消
-    if (selects.length) {
-      const selCodes = selectUserList.value.map((item: IMdmEmployee) => item.code)
-      selects.forEach((item: IMdmEmployee) => {
-        if (!selCodes.includes(item.code)) {
-          selectUserList.value.push(item)
-        }
-      })
-    } else {
-      const delCodes = userList.value?.records.map((item: IMdmEmployee) => item.code)
-      selectUserList.value = selectUserList.value.filter((item) => !delCodes?.includes(item.code))
-    }
-  }
-}
-const judgeIsSel = (selects: IMdmEmployee[], row: IMdmEmployee) => {
-  return selects.some((item) => item.code === row.code)
-}
-const resetQuery = async () => {
-  loading.value = true
-  if (!(orgDeptTree.value && orgDeptTree.value.length)) {
-    await getTreeData()
-  }
-  resetSelectUserList()
-  resetUserList()
-  queryRef.value?.resetFields()
-  ref_tree.value?.setCheckedKeys([])
-  resetQueryParam()
-  queryParam.value = {...queryParam.value, ...props.defalutQueryParam}
-  nextTick(() => {
-    ref_tree.value?.setCheckedKeys(queryParam.value.deptIds ?? [])
-    handleQuery()
-  })
-}
-const handleQuery = async () => {
-  try {
-    loading.value = true
-    let deptIds: string[] = []
-    let orgId = undefined
-    if (queryParam.value.deptIds && queryParam.value.deptIds.length) {
-      queryParam.value.deptIds.forEach((item: string) => {
-        if (orgDeptTree.value.findIndex((ele) => ele.id === item) >= 0) {
-          orgId = item
-        } else {
-          deptIds.push(item)
-        }
-      })
-    }
-    let params = JSON.parse(JSON.stringify(queryParam.value))
-    params.deptIds = deptIds
-    params.orgId = orgId
-    //需要合并默认参数
-    userList.value = await props.fetchData(params)
-    //设置选中
-    const selCodes = selectUserList.value.map((item: IMdmEmployee) => item.code)
-    nextTick(() => {
-      userList.value.records.forEach((item: IMdmEmployee) => {
-        selCodes.includes(item.code) && ref_table.value?.toggleRowSelection(item, true)
-      })
-    })
-    queryParam.value.current = userList.value.current
-  } catch (error: any) {
-    frameworkUtils.messageError(error)
-  } finally {
-    loading.value = false
-  }
-}
-const handleCloseTag = (row: IMdmEmployee) => {
-  selectUserList.value = selectUserList.value.filter((item) => item.code !== row.code)
-  //同时去除表格选中
-  const find = userList.value.records.find((item) => item.code === row.code)
-  find && ref_table.value?.toggleRowSelection(find, false)
-}
-const confirm = async () => {
-  if ((!selectUserList.value.length && props.multiple) || (!selectRow.value && !props.multiple)) {
-    ElMessage.warning('未选择需要新增的人员！')
-  } else {
-    emit('success', props.multiple ? selectUserList.value : selectRow.value)
-  }
-}
-defineExpose({
-  confirm,
-  resetQuery,
-})
-</script>
-<style lang="scss" scoped>
-:deep {
-  .table-row-disabled {
-    color: var(--el-color-warning);
-  }
-}
-</style>
+<!--创建人 胡啸东-->
+<!--创建时间: 2024/11/8 上午10:33-->
+<!--修改时间: 2024/11/8 上午10:33-->
+<template>
+  <el-flex v-loading="loading" :vertical="true">
+    <el-search
+      class="border"
+      style="border-bottom: var(--border)"
+      @reset="resetQuery"
+      @search="handleQuery"
+    >
+      <el-form
+        ref="queryRef"
+        :inline="true"
+        :model="queryParam"
+        :style="{ width: '100%', height: '100%' }"
+        labelPosition="top"
+        size="default"
+      >
+        <el-form-item :style="{ width: '220px' }" label="所属部门" prop="deptIds">
+          <el-tree-select
+            ref="ref_tree"
+            check-strictly
+            :disabled="queryParam.disabled"
+            v-model="queryParam.deptIds"
+            :data="orgDeptTree"
+            filterable
+            multiple
+            :default-expand-all="true"
+            :props="{
+              label: 'name',
+              children: 'children',
+              disabled: (data: IOrgDeptInfo) => data.isValid !== '1' || queryParam.disabled,
+            }"
+            :render-after-expand="false"
+            clearable
+            collapse-tags
+            collapse-tags-tooltip
+            node-key="id"
+            placeholder="请选择所属部门"
+          />
+        </el-form-item>
+        <el-form-item :style="{ width: '220px' }" label="人员编码或名称" prop="codeorname">
+          <el-input
+            v-model="queryParam.codeorname"
+            clearable
+            placeholder="请输入人员编码或名称"
+          ></el-input>
+        </el-form-item>
+      </el-form>
+    </el-search>
+    <el-title class="border" style="border-bottom: var(--border)" title="人员列表"></el-title>
+    <div style="padding-top: 4px">
+      <el-tag
+        v-for="user in selectUserList"
+        :key="user.code"
+        closable
+        style="margin: 2px"
+        @close="handleCloseTag(user)"
+      >
+        <el-tooltip placement="top" :content="user.deptName">
+          {{ user.name }}
+        </el-tooltip>
+      </el-tag>
+    </div>
+    <el-table
+      ref="ref_table"
+      :data="userList?.records"
+      border
+      @row-click="handleRadioChange"
+      height="100%"
+      @select="selectRows"
+      @select-all="selectRows"
+      :row-class-name="rowClassName"
+      style="margin-top: 8px"
+    >
+      <el-table-column
+        type="selection"
+        width="38"
+        :show-overflow-tooltip="false"
+        header-align="center"
+        :selectable="(row: IMdmEmployee) => row.isValid === '1'"
+        v-if="multiple"
+      >
+      </el-table-column>
+      <el-table-column
+        align="center"
+        width="38"
+        :show-overflow-tooltip="false"
+        header-align="center"
+        v-else
+      >
+        <template #default="scope">
+          <div
+            style="display: flex; justify-content: center; align-items: center; padding-left: 8px"
+          >
+            <el-radio v-model="checkId" :label="scope.row.id" @change="handleRadioChange(scope.row)"
+            ><span></span
+            ></el-radio>
+          </div>
+        </template>
+      </el-table-column>
+      <el-table-column :show-overflow-tooltip="true" label="用户姓名" prop="name" width="120"/>
+      <el-table-column :show-overflow-tooltip="true" label="岗位名称" prop="postName" width="120"/>
+      <el-table-column :show-overflow-tooltip="true" label="所属部门" prop="deptName"/>
+      <el-table-column
+        :show-overflow-tooltip="true"
+        label="所属组织"
+        prop="orgName"
+        v-if="props.showOrgInfo"
+        width="220"
+      />
+    </el-table>
+    <el-pagination
+      v-model:current-page="queryParam.current"
+      :background="true"
+      :page-size="queryParam.size"
+      :total="userList?.total ? userList?.total : 0"
+      style="margin-top: 5px; margin-bottom: 5px"
+      @current-change="handleQuery"
+    ></el-pagination>
+  </el-flex>
+</template>
+<script lang="ts" setup>
+import {useVModel} from '@vueuse/core'
+import type {IMdmEmployeeQuery} from '../../interface/IMdmEmployeeQuery'
+import {nextTick, onMounted, ref, watch} from 'vue'
+import type {IpageDataQuery, PageData} from '../../interface//PageData'
+import type {IMdmEmployee} from '../../interface/IMdmEmployee'
+import {ElMessage, ElTooltip, type TableInstance, type TreeNode} from 'element-plus'
+import deptInfoApi from '../../api/DeptInfoApi'
+import type {IOrgDeptInfo} from '../../interface/IOrgDeptInfo'
+import EmployeeInfoApi from '../../api/EmployeeInfoApi'
+import {useResetRefHooks} from '../../hooks/useResetRefHooks'
+import frameworkUtils from '../../utils/FrameworkUtils'
+
+// 明确指定 Props 的泛型参数类型
+interface Props<T extends IpageDataQuery, E extends IMdmEmployee> {
+  fetchData?: (data: T) => Promise<PageData<E>>
+  defalutQueryParam?: any
+  multiple?: boolean
+  showOrgInfo?: boolean
+}
+
+const props = withDefaults(defineProps<Props<IMdmEmployeeQuery, IMdmEmployee>>(), {
+  fetchData: EmployeeInfoApi.getMdmEmployeeListByIds,
+  defalutQueryParam: {
+    disabled: false,
+    deptIds: [],
+  },
+  multiple: true,
+  showOrgInfo: true,
+})
+const [queryParam, resetQueryParam] = useResetRefHooks<IMdmEmployeeQuery>({
+  ...{
+    current: 1,
+    size: frameworkUtils.getPageSize(),
+  },
+  ...props.defalutQueryParam,
+})
+const emit = defineEmits(['success'])
+const orgDeptTree = ref<IOrgDeptInfo[]>([])
+const loading = ref(false)
+const queryRef = ref()
+const ref_table = ref<TableInstance>()
+const checkId = ref('')
+const selectRow = ref<IMdmEmployee>()
+const ref_tree = ref()
+const [selectUserList, resetSelectUserList] = useResetRefHooks<IMdmEmployee[]>([])
+const [userList, resetUserList] = useResetRefHooks<PageData<IMdmEmployee>>({
+  records: [],
+  total: 0,
+  pages: 0,
+  current: 1,
+})
+const rowClassName = ({row, rowIndex}: { row: IMdmEmployee; rowIndex: number }) => {
+  if (row.isValid !== '1') {
+    return 'table-row-disabled'
+  }
+}
+const getTreeData = async () => {
+  try {
+    orgDeptTree.value = await deptInfoApi.getMdmOrgDeptTree({})
+  } catch (error: any) {
+    frameworkUtils.messageError(error)
+  }
+}
+const handleRadioChange = (row: IMdmEmployee) => {
+  if (row.id === checkId.value) {
+    selectRow.value = undefined
+    checkId.value = ''
+  } else {
+    checkId.value = row.id!
+    selectRow.value = row
+  }
+}
+const renderTreeNode = (
+  h: (type: any, props: any, children: any) => any,
+  {node, data}: { node: TreeNode; data: IOrgDeptInfo },
+) => {
+  return [
+    h(
+      ElTooltip,
+      {
+        content: data.name,
+        placement: 'top',
+      },
+      () => [h('span', {}, data.name)],
+    ),
+  ]
+}
+const selectRows = (selects: IMdmEmployee[], row?: IMdmEmployee) => {
+  if (row) {
+    //此时要先判断是选中还是取消选中
+    if (!judgeIsSel(selects, row)) {
+      selectUserList.value = selectUserList.value.filter((item) => item.code !== row.code)
+    } else {
+      selectUserList.value.push(row)
+    }
+  } else {
+    //此时是全选中或全取消
+    if (selects.length) {
+      const selCodes = selectUserList.value.map((item: IMdmEmployee) => item.code)
+      selects.forEach((item: IMdmEmployee) => {
+        if (!selCodes.includes(item.code)) {
+          selectUserList.value.push(item)
+        }
+      })
+    } else {
+      const delCodes = userList.value?.records.map((item: IMdmEmployee) => item.code)
+      selectUserList.value = selectUserList.value.filter((item) => !delCodes?.includes(item.code))
+    }
+  }
+}
+const judgeIsSel = (selects: IMdmEmployee[], row: IMdmEmployee) => {
+  return selects.some((item) => item.code === row.code)
+}
+const resetQuery = async () => {
+  loading.value = true
+  if (!(orgDeptTree.value && orgDeptTree.value.length)) {
+    await getTreeData()
+  }
+  resetSelectUserList()
+  resetUserList()
+  queryRef.value?.resetFields()
+  ref_tree.value?.setCheckedKeys([])
+  resetQueryParam()
+  queryParam.value = {...queryParam.value, ...props.defalutQueryParam}
+  nextTick(() => {
+    ref_tree.value?.setCheckedKeys(queryParam.value.deptIds ?? [])
+    handleQuery()
+  })
+}
+const handleQuery = async () => {
+  try {
+    loading.value = true
+    let deptIds: string[] = []
+    let orgId = undefined
+    if (queryParam.value.deptIds && queryParam.value.deptIds.length) {
+      queryParam.value.deptIds.forEach((item: string) => {
+        if (orgDeptTree.value.findIndex((ele) => ele.id === item) >= 0) {
+          orgId = item
+        } else {
+          deptIds.push(item)
+        }
+      })
+    }
+    let params = JSON.parse(JSON.stringify(queryParam.value))
+    params.deptIds = deptIds
+    params.orgId = orgId
+    //需要合并默认参数
+    userList.value = await props.fetchData(params)
+    //设置选中
+    const selCodes = selectUserList.value.map((item: IMdmEmployee) => item.code)
+    nextTick(() => {
+      userList.value.records.forEach((item: IMdmEmployee) => {
+        selCodes.includes(item.code) && ref_table.value?.toggleRowSelection(item, true)
+      })
+    })
+    queryParam.value.current = userList.value.current
+  } catch (error: any) {
+    frameworkUtils.messageError(error)
+  } finally {
+    loading.value = false
+  }
+}
+const handleCloseTag = (row: IMdmEmployee) => {
+  selectUserList.value = selectUserList.value.filter((item) => item.code !== row.code)
+  //同时去除表格选中
+  const find = userList.value.records.find((item) => item.code === row.code)
+  find && ref_table.value?.toggleRowSelection(find, false)
+}
+const confirm = async () => {
+  if ((!selectUserList.value.length && props.multiple) || (!selectRow.value && !props.multiple)) {
+    ElMessage.warning('未选择需要新增的人员！')
+  } else {
+    emit('success', props.multiple ? selectUserList.value : selectRow.value)
+  }
+}
+defineExpose({
+  confirm,
+  resetQuery,
+})
+</script>
+<style lang="scss" scoped>
+:deep {
+  .table-row-disabled {
+    color: var(--el-color-warning);
+  }
+}
+</style>