hrp-ui-base 1.0.1 → 1.0.2

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

@@ -0,0 +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;
+  }
+}
+</style>

package/packages/approval-process/packages/styles/common.scss

@@ -0,0 +1,134 @@
+$background-color:#f9f9f9;
+$button-color: white;
+$button-background: black;
+$button-icon-color: white;
+$line-background: #e3e3e3;
+$arrow-background: #006cff;
+$arrow-color: white;
+$operate-background: #1e5db4;
+$operate-color: white;
+$aduit-background: white;
+$aduit-icon-color: blue;
+$aduit-title-color: #e3e3e3;
+$common-background: #006cff;
+$common-color: white;
+
+.flexColumnCenter {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: center;
+}
+.flexColumnCenterCenter {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+}
+.flexColumnCenterStart {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: flex-start;
+}
+
+.flexColumnStart {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: flex-start;
+}
+
+.flexRowCenter {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+}
+
+.flexRowStart {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: flex-start;
+    flex-wrap: wrap;
+}
+
+.flexRowStartCenter {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
+}
+.flexRowBetween{
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.flexColumnBetween{
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: center;
+}
+.flexRowAround{
+    display: flex;
+    flex-direction: row;
+    justify-content: space-around;
+    align-items: center;
+}
+.flexRowAroundWrap{
+    display: flex;
+    flex-direction: row;
+    justify-content: space-around;
+    align-items: center;
+    flex-wrap: wrap;
+}
+.iconCommon {
+    border-radius: 50%;
+    color: $common-color;
+    background: $common-background;
+    font-size: 12px;
+    width: 30px;
+    height: 30px;
+    text-align: center;
+    line-height: 30px;
+    margin-right: 8px;
+}
+
+.contentTitle {
+    font-size: 14px;
+    font-weight: 600;
+    margin: 12px 0 4px;
+}
+
+.divideWord {
+    margin: 0 12px;
+    font-size: 14px;
+}
+.select-text {
+    height: 30px;
+    flex-shrink: 0;
+    display: flex;
+    justify-content: center;
+    font-size: 16px;
+    padding: 0 10px !important;
+    margin: 0 18px;
+    color: #606266;
+    align-items: center;
+    border: 1px solid #dcdfe6;
+    border-radius: 5px;
+    background-color: #ffffff;
+}
+
+.manyLevel{
+    img{
+        width: 240px;
+    }
+    strong{
+        font-weight: 600;
+        margin-top: 8px;
+    }
+}

package/packages/approval-process/packages/styles/flex-common.scss

@@ -0,0 +1,118 @@
+.flex-column-start {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: flex-start;
+}
+
+.flex-column-start-center {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: center;
+}
+
+.flex-column-center {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+.flex-column-center-start {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
+}
+
+
+
+.flex-row-center {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+}
+
+.flex-row-start {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  align-items: flex-start;
+  flex-wrap: wrap;
+}
+
+.flex-row-start-center {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  align-items: center;
+}
+
+.flex-row-center-start {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: flex-start;
+}
+
+.flex-row-between {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.flex-row-between-wrap {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  flex-wrap: wrap;
+}
+
+.flex-column-between {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.flex-column-between-wrap {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: center;
+  flex-wrap: wrap;
+}
+
+.flex-row-around {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-around;
+  align-items: center;
+}
+
+.flex-row-around-wrap {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-around;
+  align-items: center;
+  flex-wrap: wrap;
+}
+
+.flex-column-around {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+  align-items: center;
+}
+
+.flex-column-around-wrap {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+  align-items: center;
+  flex-wrap: wrap;
+}

package/packages/approval-process/packages/styles/flexCommon.scss

@@ -0,0 +1,73 @@
+.flexColumnCenter {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: center;
+}
+.flexColumnCenterCenter {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+}
+.flexColumnCenterStart {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: flex-start;
+}
+
+.flexColumnStart {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: flex-start;
+}
+
+.flexRowCenter {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+}
+
+.flexRowStart {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: flex-start;
+    flex-wrap: wrap;
+}
+
+.flexRowStartCenter {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
+}
+.flexRowBetween{
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.flexColumnBetween{
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: center;
+}
+.flexRowAround{
+    display: flex;
+    flex-direction: row;
+    justify-content: space-around;
+    align-items: center;
+}
+.flexRowAroundWrap{
+    display: flex;
+    flex-direction: row;
+    justify-content: space-around;
+    align-items: center;
+    flex-wrap: wrap;
+}