workflow-editor 0.0.81-up-tmp11 → 0.0.81-up-tmp15

package/packages/workflow-editor/src/properties-editors/common/user-selection.vue

@@ -1,426 +0,0 @@
-<template>
-  <el-form-item :label="label" :label-width="labelWidth">
-    <el-col>
-      <el-checkbox-group v-model="checkList">
-        <el-checkbox label="${instanceCreator}">
-          {{ $t('workflowEditor.process.processInitiator') }}
-        </el-checkbox>
-        <el-checkbox label="${processAdmin}">
-          {{ $t('workflowEditor.process.processAdministrator') }}
-        </el-checkbox>
-        <el-checkbox v-if="currentTransactor" label="${currentTransactor}">
-          {{ $t('workflowEditor.process.currentHandler') }}
-        </el-checkbox>
-        <el-checkbox v-else label="${allHandleTransactors}">
-          {{ $t('workflowEditor.process.allHandlingPersonnel') }}
-        </el-checkbox>
-        <el-checkbox label="assignUser" @change="toggleUserList">
-          {{ $t('workflowEditor.process.designatedPersonnel') }}
-        </el-checkbox>
-      </el-checkbox-group>
-    </el-col>
-    <div style="width: 100%; vertical-align: middle" v-if="showUserList">
-      <el-col>
-        <el-row>
-          <el-col :span="4">
-            {{ $t('workflowEditor.process.listOfDesignatedPersons') }}
-          </el-col>
-          <el-col style="display: flex; justify-content: center; align-items: center" :span="5">
-            <el-dropdown size="small" split-button type="primary" plain @command="handleCommand">
-              <span class="el-dropdown-link">
-                <i class="fa fa-search" /> {{ $t('workflowEditorPublicModel.choice') }}
-              </span>
-              <template #dropdown>
-                <el-dropdown-menu>
-                  <el-dropdown-item command="selectUser" @click="selectPointUser()">
-                    {{ $t('workflowEditor.common.selectusers') }}
-                  </el-dropdown-item>
-                  <el-dropdown-item command="selectDepartment" @click="selectPointDepartment()">
-                    {{ $t('workflowEditor.common.selectDepartment') }}
-                  </el-dropdown-item>
-                  <el-dropdown-item command="selectWorkgroup" @click="selectPointWorkgroup()">
-                    {{ $t('workflowEditor.common.selectTeam') }}
-                  </el-dropdown-item>
-                  <el-dropdown-item command="selectRole" @click="selectPointRole()">
-                    {{ $t('workflowEditor.common.selectRole') }}
-                  </el-dropdown-item>
-                  <el-dropdown-item command="selectField" @click="selectPointField()">
-                    {{ $t('workflowEditor.common.selectField') }}
-                  </el-dropdown-item>
-                </el-dropdown-menu>
-              </template>
-            </el-dropdown>
-          </el-col>
-          <el-col :span="3">
-            <el-button type="primary" size="small" plain icon="Delete" @click="resetSelectedUsers">
-              {{ $t('workflowEditorPublicModel.empty') }}
-            </el-button>
-          </el-col>
-        </el-row>
-        <el-row>
-          <el-col>
-            <el-input
-              v-model="selectedUsersShowValue"
-              type="textarea"
-              :rows="2"
-              :placeholder="$t('workflowEditorMessage.pleaseSelectPersonnel')"
-            />
-          </el-col>
-        </el-row>
-      </el-col>
-      <department-user-tree
-        v-if="showSelectUser"
-        width="60%"
-        :multiple="true"
-        @close="addPointUsers"
-      />
-      <department-tree
-        v-if="showSelectDepartment"
-        width="30%"
-        :multiple="true"
-        @close="addPointDepartments"
-      />
-      <workgroup-tree
-        v-if="showSelectWorkgroup"
-        width="30%"
-        :multiple="true"
-        @close="addPointWorkgroups"
-      />
-      <system-role-tree v-if="showSelectRole" :multiple="true" @close="addPointRoles" />
-      <form-fields v-if="showSelectField" @close="setField" />
-    </div>
-  </el-form-item>
-</template>
-<script>
-import FormFields from '../common/form-fields'
-import SystemRoleTree from './system-role-tree'
-import { getFormFieldLabel } from '../common/form-fields-utils.js'
-export default {
-  name: 'UserSelection',
-  components: {
-    SystemRoleTree,
-    FormFields
-  },
-  props: {
-    label: {
-      type: String,
-      default: ''
-    },
-    labelWidth: {
-      type: String,
-      default: null
-    },
-    modelValue: {
-      type: String,
-      default: ''
-    },
-    currentTransactor: {
-      type: Boolean,
-      default: false
-    }
-  },
-  data() {
-    let showUserList = false
-    let selectedUsers = ''
-    // 流程发起人等前3个选项和指定人员选中的人使用分号(后跟一个空格)来分割，这样区分了前三个选项和最后一个选项
-    const users = this.modelValue.split('; ')
-    const checkList = users[0].split(' condition.operator.or ')
-    if (users.length === 2) {
-      showUserList = true
-      selectedUsers = users[1].split(' condition.operator.or ')
-      checkList.push('assignUser')
-    }
-    return {
-      checkList,
-      showUserList,
-      selectedUsers,
-      showSelectUser: false, // 是否显示用户树
-      selectedUsersShowValue: null, // 已选择人员的显示值，例如：用户 等于 '张三/分支1' 或者 用户 等于 '李四/集团公司'
-      showSelectDepartment: false, // 是否显示部门树
-      showSelectWorkgroup: false, // 是否显示工作组树
-      showSelectRole: false, // 是否显示角色树
-      showSelectField: false // 是否选择字段
-    }
-  },
-  watch: {
-    checkList(val) {
-      // this.$emit('input', this.getValue())
-      this.$emit('update:modelValue', this.getValue())
-    },
-    selectedUsers(val) {
-      // this.$emit('input', this.getValue())
-      this.$emit('update:modelValue', this.getValue())
-    }
-  },
-  created() {
-    console.log(this.checkList)
-    this.getSelectedUsersShowValue()
-  },
-  methods: {
-    formatLabel(name) {
-      return getFormFieldLabel(name)
-    },
-    getValue() {
-      const checkList = this.checkList.filter((item) => {
-        return item !== '' && item !== 'assignUser'
-      })
-      let value = checkList.join(' condition.operator.or ')
-      if (this.showUserList && this.selectedUsers && this.selectedUsers.length !== 0) {
-        value = value + '; ' + this.selectedUsers.join(' condition.operator.or ')
-      }
-      return value
-    },
-    toggleUserList() {
-      this.showUserList = !this.showUserList
-    },
-    // 清空已选人员
-    resetSelectedUsers() {
-      this.selectedUsers = []
-      this.selectedUsersShowValue = ''
-    },
-    // 选择指定人员下拉菜单事件处理
-    handleCommand(command) {
-      if (command === 'selectUser') {
-        this.selectPointUser()
-      } else if (command === 'selectDepartment') {
-        this.selectPointDepartment()
-      } else if (command === 'selectRole') {
-        this.selectPointRole()
-      } else if (command === 'selectWorkgroup') {
-        this.selectPointWorkgroup()
-      } else if (command === 'selectField') {
-        this.selectPointField()
-      }
-    },
-    // 显示用户树
-    selectPointUser() {
-      this.showSelectUser = true
-    },
-    // 显示部门树
-    selectPointDepartment() {
-      this.showSelectDepartment = true
-    },
-    // 显示角色树
-    selectPointRole() {
-      this.showSelectRole = true
-    },
-    selectPointField() {
-      this.showSelectField = true
-    },
-    // 显示工作组树
-    selectPointWorkgroup() {
-      this.showSelectWorkgroup = true
-    },
-    // 选择用户
-    addPointUsers(selectNodeInfo) {
-      if (selectNodeInfo) {
-        const isContainBranch = selectNodeInfo.containBranch
-        if (isContainBranch) {
-          // 如果包含分支机构，需要拼接分支编码,格式为：loginName~~branchCode，并封装为用户条件
-          this.packageSelectedUserConditionsWithBranch(selectNodeInfo.users)
-        } else {
-          // 如果不包含分支机构，直接封装为用户条件
-          this.packageSelectedUserConditionsWithOutBranch(selectNodeInfo.users)
-        }
-        // 获得显示时的条件值
-        this.getSelectedUsersShowValue()
-      }
-      this.showSelectUser = false
-    },
-    // 如果包含分支机构，需要拼接分支编码,格式为：loginName~~branchCode，并封装为用户条件
-    packageSelectedUserConditionsWithBranch(selectedUsers) {
-      // 用户登录名和分支编码的分隔符
-      const loginNameAndBranchSeparator = '~~'
-      // 用户姓名和分支名称的分隔符
-      const userNameAndBranchSeparator = '/'
-      const fixCondition = '${user} operator.text.eq '
-      selectedUsers.forEach((user) => {
-        let loginName = user.loginName
-        let userName = user.name
-        if (user.subCompanyId && user.subCompanyId !== null) {
-          // 用户属于分支机构，拼接分支机构编码
-          const branchCode = user.subCompanyCode
-          const branchName = user.subCompanyName
-          loginName = loginName + loginNameAndBranchSeparator + branchCode
-          userName = userName + userNameAndBranchSeparator + branchName
-        } else {
-          // 用户属于集团公司，拼接公司编码
-          loginName = loginName + loginNameAndBranchSeparator + user.tenantCode
-          userName = userName + userNameAndBranchSeparator + user.tenantName
-        }
-        const condition = fixCondition + userName + '[' + loginName + ']'
-        if (this.selectedUsers) {
-          const selectedCondition = this.selectedUsers.filter(this.filterCondition(condition))
-          if (selectedCondition.length === 0) {
-            this.selectedUsers.push(condition)
-          }
-        } else {
-          this.selectedUsers = []
-          this.selectedUsers.push(condition)
-        }
-      })
-    },
-    // 如果不包含分支机构，直接封装为用户条件
-    packageSelectedUserConditionsWithOutBranch(selectedUsers) {
-      const fixCondition = '${user} operator.text.eq '
-      selectedUsers.forEach((user) => {
-        if (!this.selectedUsers) {
-          this.selectedUsers = []
-        }
-        const condition = fixCondition + user.name + '[' + user.loginName + ']'
-        const selectedUserCondition = this.selectedUsers.filter(this.filterCondition(condition))
-        if (selectedUserCondition.length === 0) {
-          this.selectedUsers.push(condition)
-        }
-      })
-    },
-    // 获得显示时的条件值
-    getSelectedUsersShowValue() {
-      if (this.selectedUsers) {
-        const selectedUsersCondition = this.selectedUsers.join(' condition.operator.or ')
-        this.selectedUsersShowValue = selectedUsersCondition
-          .replace(/\$\{user\}/g, '用户')
-          .replace(/\$\{department\}/g, '部门')
-          .replace(/\$\{workGroup\}/g, '工作组')
-          .replace(/\$\{role\}/g, '角色')
-          .replace(/operator\.text\.eq/g, '等于')
-          .replace(/condition\.operator\.or/g, '或者')
-          .replace(/\$\{field/g, '字段')
-          .replace(/]\}/g, ']')
-      }
-    },
-    // 过滤已选条件中是否包含condition条件
-    filterCondition(condition) {
-      return (selectedUserCondition) => {
-        return selectedUserCondition === condition
-      }
-    },
-    // 选择部门
-    addPointDepartments(selectNodeInfo) {
-      if (selectNodeInfo) {
-        const isContainBranch = selectNodeInfo.containBranch
-        if (isContainBranch) {
-          // 如果包含分支机构，需要拼接显示的分支名称,格式为：部门名称/分支名称，并封装为部门条件
-          this.packageSelectedDepartmentOrWorkgroupConditionsWithBranch(
-            selectNodeInfo.departments,
-            '${department}'
-          )
-        } else {
-          // 如果不包含分支机构，直接封装为部门条件
-          this.packageSelectedDepartmentOrWorkgroupConditionsWithOutBranch(
-            selectNodeInfo.departments,
-            '${department}'
-          )
-        }
-        // 获得显示时的条件值
-        this.getSelectedUsersShowValue()
-      }
-      this.showSelectDepartment = false
-    },
-    // 如果包含分支机构，需要拼接显示的分支名称,格式为：部门名称/分支名称 或 工作组名称/分支名称，并封装为部门 或 工作组条件
-    packageSelectedDepartmentOrWorkgroupConditionsWithBranch(selectedDepartments, type) {
-      // 部门姓名和分支名称的分隔符
-      const departmentNameAndBranchSeparator = '/'
-      const fixCondition = type + ' operator.text.eq '
-      selectedDepartments.forEach((department) => {
-        const departmentCode = department.code
-        let departmentName = department.name
-        if (department.subCompanyId && department.subCompanyId !== null) {
-          // 用户属于分支机构，拼接分支机构名称
-          const branchName = department.subCompanyName
-          if (branchName && branchName !== '') {
-            departmentName = departmentName + departmentNameAndBranchSeparator + branchName
-          }
-        } else {
-          // 用户属于集团公司，拼接公司名称
-          departmentName = departmentName + departmentNameAndBranchSeparator + department.tenantName
-        }
-        const condition = fixCondition + departmentName + '[' + departmentCode + ']'
-        if (this.selectedUsers) {
-          const selectedCondition = this.selectedUsers.filter(this.filterCondition(condition))
-          if (selectedCondition.length === 0) {
-            this.selectedUsers.push(condition)
-          }
-        } else {
-          this.selectedUsers = []
-          this.selectedUsers.push(condition)
-        }
-      })
-    },
-    // 如果不包含分支机构，直接封装为部门条件 或 工作组条件
-    packageSelectedDepartmentOrWorkgroupConditionsWithOutBranch(selectedDepartments, type) {
-      const fixCondition = type + ' operator.text.eq '
-      selectedDepartments.forEach((department) => {
-        const condition = fixCondition + department.name + '[' + department.code + ']'
-        if (this.selectedUsers) {
-          const selectedCondition = this.selectedUsers.filter(this.filterCondition(condition))
-          if (selectedCondition.length === 0) {
-            this.selectedUsers.push(condition)
-          }
-        } else {
-          this.selectedUsers = []
-          this.selectedUsers.push(condition)
-        }
-      })
-    },
-    // 选择工作组
-    addPointWorkgroups(selectNodeInfo) {
-      if (selectNodeInfo) {
-        const isContainBranch = selectNodeInfo.containBranch
-        if (isContainBranch) {
-          // 如果包含分支机构，需要拼接分支名称,格式为：工作组名称/分支名称，并封装为工作组条件
-          this.packageSelectedDepartmentOrWorkgroupConditionsWithBranch(
-            selectNodeInfo.workgroups,
-            '${workGroup}'
-          )
-        } else {
-          // 如果不包含分支机构，直接封装为工作组条件
-          this.packageSelectedDepartmentOrWorkgroupConditionsWithOutBranch(
-            selectNodeInfo.workgroups,
-            '${workGroup}'
-          )
-        }
-        // 获得显示时的条件值
-        this.getSelectedUsersShowValue()
-      }
-      this.showSelectWorkgroup = false
-    },
-    // 选择角色
-    addPointRoles(selectNodeInfo) {
-      if (selectNodeInfo) {
-        // 角色不需要考虑分支机构
-        this.packageSelectedDepartmentOrWorkgroupConditionsWithOutBranch(
-          selectNodeInfo.roles,
-          '${role}'
-        )
-        // 获得显示时的条件值
-        this.getSelectedUsersShowValue()
-      }
-      this.showSelectRole = false
-    },
-    // 如果不包含分支机构，直接封装为部门条件 或 工作组条件
-    packageSelectedFieldConditions(fieldName, type) {
-      const fixCondition = type + ' operator.text.eq '
-      const condition = fixCondition + '${field[' + fieldName + ']}'
-      if (this.selectedUsers) {
-        const selectedCondition = this.selectedUsers.filter(this.filterCondition(condition))
-        if (selectedCondition.length === 0) {
-          this.selectedUsers.push(condition)
-        }
-      } else {
-        this.selectedUsers = []
-        this.selectedUsers.push(condition)
-      }
-    },
-    // 选择字段
-    setField(name) {
-      if (name !== undefined) {
-        this.packageSelectedFieldConditions(name, '${user}')
-        // 获得显示时的条件值
-        this.getSelectedUsersShowValue()
-      }
-      this.showSelectField = false
-    }
-  }
-}
-</script>

package/packages/workflow-editor/src/properties-editors/common/value-selection-dialog.vue

@@ -1,272 +0,0 @@
-<template>
-  <el-dialog
-    :title="titleName"
-    model-value
-    top="10vh"
-    append-to-body
-    class="properties-editor-valueSelect"
-    center
-    @close="$emit('close')"
-  >
-    <el-tabs id="custTabOne" v-model="activeTab" type="border-card">
-      <el-tab-pane
-        v-if="options.length > 0"
-        :label="$t('workflowEditor.process.standardFields')"
-        name="standardFields"
-      >
-        <el-row v-for="option in options" :key="option.name">
-          <el-radio v-model="selectedValue" :label="option.name" border>
-            {{ option.label }}
-          </el-radio>
-        </el-row>
-      </el-tab-pane>
-      <el-tab-pane
-        v-if="showOrganization"
-        :label="$t('workflowEditor.common.organizationStructure')"
-        name="organization"
-      >
-        <inline-department-user-tree
-          v-if="orgType === 'user'"
-          ref="organizationTree"
-          :multiple="false"
-          @result="orgSelect"
-        />
-        <inline-department-tree
-          v-if="orgType === 'department'"
-          ref="organizationTree"
-          :multiple="false"
-          @result="orgSelect"
-        />
-        <inline-workgroup-tree
-          v-if="orgType === 'workgroup'"
-          ref="organizationTree"
-          :multiple="false"
-          @result="orgSelect"
-        />
-        <inline-system-role-tree
-          v-if="orgType === 'role'"
-          ref="organizationTree"
-          :multiple="false"
-          @result="orgSelect"
-        />
-      </el-tab-pane>
-      <el-tab-pane :label="$t('workflowEditor.common.formField')" name="formFields">
-        <el-radio-group v-model="selectedValue" class="group">
-          <el-row style="width: 100%;">
-            <el-col v-for="field in customFormFields" :key="field.name" :span="8">
-              <el-radio :label="'${field[' + field.name + ']}'">
-                {{ field.label }}
-              </el-radio>
-            </el-col>
-          </el-row>
-          <el-collapse v-model="activeNames" style="width: 100%;">
-            <el-collapse-item :title="$t('workflowEditor.task.baseField')" name="baseField">
-              <el-row>
-                <el-col v-for="field in baseFormFields" :key="field.name" :span="8">
-                  <el-radio :label="'${field[' + field.name + ']}'">
-                    {{ field.label }}
-                  </el-radio>
-                </el-col>
-              </el-row>
-            </el-collapse-item>
-          </el-collapse>
-        </el-radio-group>
-      </el-tab-pane>
-    </el-tabs>
-    <template #footer>
-      <el-button type="primary" size="small" @click="setValue">
-        {{ $t('workflowEditorPublicModel.determine') }}
-      </el-button>
-      <el-button size="small" @click="$emit('close')">
-        {{ $t('workflowEditorPublicModel.cancel') }}
-      </el-button>
-    </template>
-  </el-dialog>
-</template>
-<script>
-import InlineSystemRoleTree from './system-role-tree-inline'
-import { mapGetters } from 'vuex'
-import { getI18n } from '../../../../workflow-editor/src/util'
-export default {
-  name: 'ValueSelectionDialog',
-  components: {
-    InlineSystemRoleTree
-  },
-  props: {
-    standardFields: {
-      type: [Object, Array],
-      default: null
-    },
-    title: {
-      type: String,
-      default: ''
-    },
-    showOrganization: {
-      type: Boolean,
-      default: true
-    },
-    showFormFields: {
-      type: Boolean,
-      default: true
-    },
-    orgType: {
-      type: String,
-      default: ''
-    }
-  },
-  data() {
-    let titleName = this.title
-    let activeTab = 'organization'
-    if (!this.showOrganization) {
-      activeTab = 'standardFields'
-    }
-    if (!this.title || this.title === '') {
-      titleName = getI18n().t('workflowEditorMessage.pleaseSelectAValue')
-    }
-    return {
-      selectedValue: '',
-      activeTab,
-      titleName: titleName,
-      dialogVisible: true,
-      activeNames: ['baseField']
-    }
-  },
-  computed: {
-    ...mapGetters('wfEditor', ['formFields']),
-    customFormFields() {
-      return this.formFields.filter(field => !field.baseField)
-    },
-    baseFormFields() {
-      return this.formFields.filter(field => field.baseField)
-    },
-    options() {
-      if (Array.isArray(this.standardFields)) {
-        return this.standardFields
-      } else {
-        const result = []
-        for (const key of Object.keys(this.standardFields)) {
-          result.push({
-            name: key,
-            label: this.standardFields[key]
-          })
-        }
-        return result
-      }
-    }
-  },
-  watch: {
-    activeTab(value) {
-      // 切换页签时清空选中的值
-      this.selectedValue = ''
-    }
-  },
-  methods: {
-    setValue() {
-      // 获得组织结构树的结果
-      this.organizationResultValue()
-      if (this.selectedValue === '') {
-        this.$alert(this.$t('workflowEditorMessage.pleaseSelectAValueInTheCurrentTab'))
-        return
-      }
-      this.$emit('close', this.selectedValue)
-    },
-    // 监听组织结构树结果
-    orgSelect(selectedInfo) {
-      if (selectedInfo) {
-        if (this.orgType === 'user') {
-          this.getSelectedUser(selectedInfo.user, selectedInfo.containBranch)
-        } else if (this.orgType === 'department') {
-          this.getSelectedDepartmentOrWorkgroup(selectedInfo.department, selectedInfo.containBranch)
-        } else if (this.orgType === 'workgroup') {
-          this.getSelectedDepartmentOrWorkgroup(selectedInfo.workgroup, selectedInfo.containBranch)
-        } else if (this.orgType === 'role') {
-          this.getSelectedRole(selectedInfo.role)
-        }
-      }
-    },
-    // 获得组织结构的结果
-    organizationResultValue() {
-      if (this.orgType && this.activeTab === 'organization') {
-        if (this.orgType === 'user') {
-          this.$refs.organizationTree.confirmSelectUser()
-        } else if (this.orgType === 'department') {
-          this.$refs.organizationTree.selectDepartment()
-        } else if (this.orgType === 'workgroup') {
-          this.$refs.organizationTree.selectWorkgroup()
-        } else if (this.orgType === 'role') {
-          this.$refs.organizationTree.selectRole()
-        }
-      }
-    },
-    getSelectedUser(user, containBranch) {
-      // 用户登录名和分支编码的分隔符
-      const loginNameAndBranchSeparator = '~~'
-      // 用户姓名和分支名称的分隔符
-      const userNameAndBranchSeparator = '/'
-      let loginName = user.loginName
-      let userName = user.name
-      if (containBranch) {
-        if (user.subCompanyId && user.subCompanyId !== null) {
-          // 用户属于分支机构，拼接分支机构编码
-          const branchCode = user.subCompanyCode
-          const branchName = user.subCompanyName
-          loginName = loginName + loginNameAndBranchSeparator + branchCode
-          userName = userName + userNameAndBranchSeparator + branchName
-        } else {
-          // 用户属于集团公司，拼接公司编码
-          loginName = loginName + loginNameAndBranchSeparator + user.tenantCode
-          userName = userName + userNameAndBranchSeparator + user.tenantName
-        }
-        this.selectedValue = userName + '[' + loginName + ']'
-      } else {
-        this.selectedValue = user.name + '[' + user.loginName + ']'
-      }
-    },
-    getSelectedDepartmentOrWorkgroup(department, containBranch) {
-      this.selectedValue = department.name
-      // 用户姓名和分支名称的分隔符
-      const userNameAndBranchSeparator = '/'
-      let departmentName = department.name
-      if (containBranch) {
-        if (department.subCompanyId && department.subCompanyId !== null) {
-          // 用户属于分支机构，拼接分支机构编码
-          const branchName = department.subCompanyName
-          departmentName = departmentName + userNameAndBranchSeparator + branchName
-        } else {
-          // 用户属于集团公司，拼接公司编码
-          departmentName = departmentName + userNameAndBranchSeparator + department.tenantName
-        }
-        this.selectedValue = departmentName + '[' + department.code + ']'
-      } else {
-        this.selectedValue = department.name + '[' + department.code + ']'
-      }
-    },
-    getSelectedRole(role) {
-      this.selectedValue = role.name + '[' + role.code + ']'
-    }
-  }
-}
-</script>
-<style scoped>
-#custTabOne :deep(.el-tabs__content) {
-  height: 500px;
-}
-
-.group {
-  font-size: 14px;
-  width: 100%;
-}
-
-.item {
-  float: left;
-  list-style-type: none;
-  width: 33.33%;
-  margin-bottom: 18px;
-}
-
-.item-content {
-  height: calc(100vh - 300px);
-  padding-left: 20px;
-  overflow: auto;
-}
-</style>