hrp-ui-base 1.4.7 → 1.4.9

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

@@ -1,301 +1,301 @@
-<!-- 选择角色  -->
-<template>
-  <div @click="changeDigVis(true)" class="triggerArea flexRowStart">
-    <template v-if="checkedMember && checkedMember.length > 0">
-      <div class="triggerItem" v-for="(item, index) in checkedMember" :key="index">{{
-    item.roleName }}</div>
-    </template>
-    <div v-else>请选择角色</div>
-  </div>
-  <el-dialog v-model="dialogVisible" title="选择角色" :width="800" style="height:550px;border-radius: 8px;" :footer="true"
-    :show-close="false" class="searchDialog">
-    <div class="flexRowStart searchBox">
-      <div class="flexColumnStart searchItem">
-        <!-- <el-input v-model="filterText" class="w-50 m-2" placeholder="请输入" :suffix-icon="Search" size="large"
-                    @blur="goSearch" v-if="multiple" /> -->
-        <div style="overflow-y: auto;height:400px;width: 100%;">
-          <el-tree :data="dataTree" ref="treeRef" class="filter-tree" node-key="id" :props="defaultProps" show-checkbox
-            default-expand-all @check-change="treeCheckedChange" v-if="multiple" />
-          <div v-else>
-            <el-radio-group v-model="radioRole" class="flexColumnStart" @change="changeRadioRole">
-              <div v-for="(item) in dataTree" :key="item.groupId" class="flexColumnStart">
-                <div style="width: 100%;height: 30px;line-height: 30px;font-size:16px;font-weight: 600;">{{
-    item.groupName }}</div>
-                <el-radio :label="jtem.roleId" v-for="(jtem, jindex) in item.roleVoList" style="margin-left:18px"
-                  :key="jindex">{{
-    jtem.roleName }}</el-radio>
-              </div>
-            </el-radio-group>
-          </div>
-          <!-- :filter-node-method="filterNode" -->
-        </div>
-      </div>
-      <div class="flexColumnStart searchItem"
-        style="padding-left: 8px;border-left: 2px solid #e3e3e3;height: 400px;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;max-height: 400px;overflow-y: auto;">
-          <div class="chooseItem flexRowStartCenter" v-for="(item, index) in checkedMember" :key="index">
-            <img src="./BO/role.svg" alt="">
-            <div class="chooseItemName">{{ item.roleName }}</div>
-            <el-icon class="chooseItemIcon" @click="deleteCheckedItem(index, item)">
-              <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 { reactive, ref, onMounted, shallowRef, watch } from 'vue'
-import { Search } from '@element-plus/icons-vue'
-import { ElTree } from 'element-plus'
-// import SystemRoleController from 'hrp-ui-base/api/system/controller/role/SystemRoleController'
-import RoleController from "hrp-ui-base/api/hrms/role/roleController"
-import type { roleBo, roleItemBo, roleOldBo } from './BO/roleBo'
-
-const props = defineProps(['modelValue', 'multiple'])
-const emits = defineEmits(['update:modelValue'])
-const multiple = ref<boolean>(true)
-watch(() => { return props.multiple }, () => {
-  multiple.value = props.multiple
-}, { deep: true })
-onMounted(async () => {
-  console.log(props.modelValue)
-  checkedMember.value = props.modelValue ? props.modelValue : []
-  checkedMember.value.forEach((i: any) => {
-    treeRef.value?.setChecked(i, true, true)
-  })
-  multiple.value = props.multiple === false ? false : true
-  if (multiple.value == false && checkedMember.value && checkedMember.value.length > 0) {
-    radioRole.value = checkedMember.value[0].id
-  }
-})
-const dialogVisible = ref(false)
-const searchContent = ref('')
-const checkedMember = ref<any>([])
-const getList = async () => {
-  await RoleController.getRoleGroupListNew().then((data) => {
-    if (data && data.res) {
-      if (data && data.res) {
-        let arr: any = data.res
-        arr.forEach((item: any, index: number) => {
-          item.roleName = item.groupName
-          item.roleId = item.groupId
-          item.id = item.roleId
-          item.roleVoList.forEach((j: any) => {
-            j.roleVoList = []
-            j.id = j.roleId
-          })
-        })
-        console.error(arr)
-        dataTree.value = arr
-      }
-
-    }
-  })
-}
-const goSearch = () => {
-
-}
-
-const resetChoose = () => {
-  checkedMember.value.forEach((i: any) => {
-    treeRef.value?.setChecked(i.roleId, false, false)
-  })
-  checkedMember.value.length = 0
-}
-const changeDigVis = async (value: boolean) => {
-  console.debug(props.modelValue, checkedMember.value)
-  dialogVisible.value = value
-  if (value) {
-    await getList()
-    setTimeout(() => {
-      checkedMember.value = props.modelValue ? props.modelValue : []
-
-      checkedMember.value.forEach((i: roleItemBo) => {
-        treeRef.value?.setChecked(i.roleId, true, false)
-      })
-    }, 100)
-
-  }
-}
-const cancelDia = () => {
-  checkedMember.value = props.modelValue ? props.modelValue : []
-  checkedMember.value.forEach((i: any) => {
-    treeRef.value?.setChecked(i.id, true, true)
-  })
-  changeDigVis(false)
-}
-const saveDia = () => {
-  console.log(checkedMember.value)
-  emits('update:modelValue', checkedMember.value)
-  changeDigVis(false)
-
-}
-// 删除某个以选项
-const deleteCheckedItem = (index: number, item: any) => {
-  checkedMember.value.splice(index, 1)
-  treeRef.value?.setChecked(item.id, false, true)
-}
-const defaultProps = {
-  children: 'roleVoList',
-  label: 'roleName'
-}
-const treeRef = ref<InstanceType<typeof ElTree>>()
-const dataTree = ref<roleBo[]>([{
-  "groupId": "202448076",
-  "groupName": "默认",
-  "roleId": "202448076",
-  "roleName": "默认",
-  "roleVoList": [
-    {
-      "roleName": "主管理员",
-      "roleId": "202448077"
-    },
-    {
-      "roleName": "子管理员",
-      "roleId": "202448078"
-    },
-    {
-      "roleName": "负责人",
-      "roleId": "202448079"
-    },
-    {
-      "roleName": "主管",
-      "roleId": "202448080"
-    }
-  ]
-}])
-const filterText = ref('')
-watch(filterText, (val) => {
-  treeRef.value!.filter(val)
-})
-
-const filterNode = (value: string, data: roleBo) => {
-  if (!value) return true
-  return data.roleName ? data.roleName.includes(value) : false;
-}
-const treeCheckedChange = (data: any, node: Node) => {
-  console.log(data, node, treeRef.value?.getCheckedNodes(true))
-  checkedMember.value = treeRef.value?.getCheckedNodes(true)
-}
-const showCeshi = () => {
-  console.log(checkedMember.value, props.modelValue)
-  checkedMember.value = props.modelValue ? props.modelValue : []
-  checkedMember.value.forEach((i: any) => {
-    treeRef.value?.setChecked(i.id, true, false)
-  })
-}
-// 单选绑定数据的值
-const radioRole = ref<string>('')
-// 单选切换绑定值
-const changeRadioRole = (id: string) => {
-  let obj: { id?: string, roleId?: string, roleName?: string } = {}
-  for (let i = 0; i < dataTree.value.length; i++) {
-    for (let j = 0; j < dataTree.value[i].roleVoList.length; j++) {
-      if (dataTree.value[i].roleVoList[j].roleId == id) {
-        obj = dataTree.value[i].roleVoList[j]
-        break
-      }
-    }
-  }
-  obj.id = obj.roleId
-  checkedMember.value = [obj]
-}
-
-</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: var(--font-size-body);
-  height: 400px;
-}
-
-.searchItem {
-  width: 50%;
-  height: 400px;
-}
-
-.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;
-  }
-}
-</style>
-<style lang="scss">
-.searchBox {
-  .el-checkbox {
-    margin-right: 0
-  }
-
-}
-
-.searchDialog {
-  .el-dialog__body {
-    padding-top: 10px;
-    padding-bottom: 10px;
-  }
-}
+<!-- 选择角色  -->
+<template>
+  <div @click="changeDigVis(true)" class="triggerArea flexRowStart">
+    <template v-if="checkedMember && checkedMember.length > 0">
+      <div class="triggerItem" v-for="(item, index) in checkedMember" :key="index">{{
+    item.roleName }}</div>
+    </template>
+    <div v-else>请选择角色</div>
+  </div>
+  <el-dialog v-model="dialogVisible" title="选择角色" :width="800" style="height:550px;border-radius: 8px;" :footer="true"
+    :show-close="false" class="searchDialog">
+    <div class="flexRowStart searchBox">
+      <div class="flexColumnStart searchItem">
+        <!-- <el-input v-model="filterText" class="w-50 m-2" placeholder="请输入" :suffix-icon="Search" size="large"
+                    @blur="goSearch" v-if="multiple" /> -->
+        <div style="overflow-y: auto;height:400px;width: 100%;">
+          <el-tree :data="dataTree" ref="treeRef" class="filter-tree" node-key="id" :props="defaultProps" show-checkbox
+            default-expand-all @check-change="treeCheckedChange" v-if="multiple" />
+          <div v-else>
+            <el-radio-group v-model="radioRole" class="flexColumnStart" @change="changeRadioRole">
+              <div v-for="(item) in dataTree" :key="item.groupId" class="flexColumnStart">
+                <div style="width: 100%;height: 30px;line-height: 30px;font-size:16px;font-weight: 600;">{{
+    item.groupName }}</div>
+                <el-radio :label="jtem.roleId" v-for="(jtem, jindex) in item.roleVoList" style="margin-left:18px"
+                  :key="jindex">{{
+    jtem.roleName }}</el-radio>
+              </div>
+            </el-radio-group>
+          </div>
+          <!-- :filter-node-method="filterNode" -->
+        </div>
+      </div>
+      <div class="flexColumnStart searchItem"
+        style="padding-left: 8px;border-left: 2px solid #e3e3e3;height: 400px;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;max-height: 400px;overflow-y: auto;">
+          <div class="chooseItem flexRowStartCenter" v-for="(item, index) in checkedMember" :key="index">
+            <img src="./BO/role.svg" alt="">
+            <div class="chooseItemName">{{ item.roleName }}</div>
+            <el-icon class="chooseItemIcon" @click="deleteCheckedItem(index, item)">
+              <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 { reactive, ref, onMounted, shallowRef, watch } from 'vue'
+import { Search } from '@element-plus/icons-vue'
+import { ElTree } from 'element-plus'
+// import SystemRoleController from 'hrp-ui-base/api/system/controller/role/SystemRoleController'
+import RoleController from "hrp-ui-base/api/hrms/role/roleController"
+import type { roleBo, roleItemBo, roleOldBo } from './BO/roleBo'
+
+const props = defineProps(['modelValue', 'multiple'])
+const emits = defineEmits(['update:modelValue'])
+const multiple = ref<boolean>(true)
+watch(() => { return props.multiple }, () => {
+  multiple.value = props.multiple
+}, { deep: true })
+onMounted(async () => {
+  console.log(props.modelValue)
+  checkedMember.value = props.modelValue ? props.modelValue : []
+  checkedMember.value.forEach((i: any) => {
+    treeRef.value?.setChecked(i, true, true)
+  })
+  multiple.value = props.multiple === false ? false : true
+  if (multiple.value == false && checkedMember.value && checkedMember.value.length > 0) {
+    radioRole.value = checkedMember.value[0].id
+  }
+})
+const dialogVisible = ref(false)
+const searchContent = ref('')
+const checkedMember = ref<any>([])
+const getList = async () => {
+  await RoleController.getRoleGroupListNew().then((data) => {
+    if (data && data.res) {
+      if (data && data.res) {
+        let arr: any = data.res
+        arr.forEach((item: any, index: number) => {
+          item.roleName = item.groupName
+          item.roleId = item.groupId
+          item.id = item.roleId
+          item.roleVoList.forEach((j: any) => {
+            j.roleVoList = []
+            j.id = j.roleId
+          })
+        })
+        console.error(arr)
+        dataTree.value = arr
+      }
+
+    }
+  })
+}
+const goSearch = () => {
+
+}
+
+const resetChoose = () => {
+  checkedMember.value.forEach((i: any) => {
+    treeRef.value?.setChecked(i.roleId, false, false)
+  })
+  checkedMember.value.length = 0
+}
+const changeDigVis = async (value: boolean) => {
+  console.debug(props.modelValue, checkedMember.value)
+  dialogVisible.value = value
+  if (value) {
+    await getList()
+    setTimeout(() => {
+      checkedMember.value = props.modelValue ? props.modelValue : []
+
+      checkedMember.value.forEach((i: roleItemBo) => {
+        treeRef.value?.setChecked(i.roleId, true, false)
+      })
+    }, 100)
+
+  }
+}
+const cancelDia = () => {
+  checkedMember.value = props.modelValue ? props.modelValue : []
+  checkedMember.value.forEach((i: any) => {
+    treeRef.value?.setChecked(i.id, true, true)
+  })
+  changeDigVis(false)
+}
+const saveDia = () => {
+  console.log(checkedMember.value)
+  emits('update:modelValue', checkedMember.value)
+  changeDigVis(false)
+
+}
+// 删除某个以选项
+const deleteCheckedItem = (index: number, item: any) => {
+  checkedMember.value.splice(index, 1)
+  treeRef.value?.setChecked(item.id, false, true)
+}
+const defaultProps = {
+  children: 'roleVoList',
+  label: 'roleName'
+}
+const treeRef = ref<InstanceType<typeof ElTree>>()
+const dataTree = ref<roleBo[]>([{
+  "groupId": "202448076",
+  "groupName": "默认",
+  "roleId": "202448076",
+  "roleName": "默认",
+  "roleVoList": [
+    {
+      "roleName": "主管理员",
+      "roleId": "202448077"
+    },
+    {
+      "roleName": "子管理员",
+      "roleId": "202448078"
+    },
+    {
+      "roleName": "负责人",
+      "roleId": "202448079"
+    },
+    {
+      "roleName": "主管",
+      "roleId": "202448080"
+    }
+  ]
+}])
+const filterText = ref('')
+watch(filterText, (val) => {
+  treeRef.value!.filter(val)
+})
+
+const filterNode = (value: string, data: roleBo) => {
+  if (!value) return true
+  return data.roleName ? data.roleName.includes(value) : false;
+}
+const treeCheckedChange = (data: any, node: Node) => {
+  console.log(data, node, treeRef.value?.getCheckedNodes(true))
+  checkedMember.value = treeRef.value?.getCheckedNodes(true)
+}
+const showCeshi = () => {
+  console.log(checkedMember.value, props.modelValue)
+  checkedMember.value = props.modelValue ? props.modelValue : []
+  checkedMember.value.forEach((i: any) => {
+    treeRef.value?.setChecked(i.id, true, false)
+  })
+}
+// 单选绑定数据的值
+const radioRole = ref<string>('')
+// 单选切换绑定值
+const changeRadioRole = (id: string) => {
+  let obj: { id?: string, roleId?: string, roleName?: string } = {}
+  for (let i = 0; i < dataTree.value.length; i++) {
+    for (let j = 0; j < dataTree.value[i].roleVoList.length; j++) {
+      if (dataTree.value[i].roleVoList[j].roleId == id) {
+        obj = dataTree.value[i].roleVoList[j]
+        break
+      }
+    }
+  }
+  obj.id = obj.roleId
+  checkedMember.value = [obj]
+}
+
+</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: var(--font-size-body);
+  height: 400px;
+}
+
+.searchItem {
+  width: 50%;
+  height: 400px;
+}
+
+.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;
+  }
+}
+</style>
+<style lang="scss">
+.searchBox {
+  .el-checkbox {
+    margin-right: 0
+  }
+
+}
+
+.searchDialog {
+  .el-dialog__body {
+    padding-top: 10px;
+    padding-bottom: 10px;
+  }
+}
 </style>