workflow-editor 0.0.81-up-tmp8 → 0.0.81-up-tmp10

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

@@ -0,0 +1,426 @@
+<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

@@ -0,0 +1,272 @@
+<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>