@qqt-product/system 0.0.1

package/src/lib/components/QBackgroundFileTaskList/src/QBackgroundFileTaskList.vue

@@ -0,0 +1,137 @@
+<template>
+  <div style="height: 100%">
+    <q-list-layout ref="listLayoutRef" v-if="!showEditPage" :pageData="pageData" :apiUrls="apiUrls" />
+  </div>
+</template>
+
+<script lang="ts">
+//JS
+import { defineComponent, reactive, inject } from 'vue'
+//hook
+import { useConfigData } from './useConfigData'
+import { INJECT_HTTP, HttpClient, MapObjectNoneType } from '../../../utils/global.types'
+import { message, Modal } from '@qqt-product/ui'
+import { useConigApiMethods } from '../../../utils/global.hook'
+export default defineComponent({
+  name: 'QBackgroundFileTaskList',
+  props: {
+    userInfo: {
+      type: Object,
+      defalut: () => {
+        return {}
+      },
+    },
+  },
+  setup() {
+    //data-hook
+    const { showEditPage, apiUrls, listLayoutRef } = useConfigData()
+    const qHttp = inject(INJECT_HTTP) as HttpClient
+    const { handleExport } = useConigApiMethods(qHttp)
+    // const { userIpnfo } = toRefs(props)
+    // console.log('userInfos', userInfo)
+
+    //data
+    const pageData = reactive({
+      statusConfig: {
+        show: false,
+      },
+      optColumn: {
+        attrs: {},
+        extend: {},
+        optColumnList: [
+          { authorityCode: 'backgroundFileTask#BackgroundFileTask:runTask', type: 'run', title: '执行任务', click: handleRun, disabled: allowRun },
+          {
+            authorityCode: 'backgroundFileTask#BackgroundFileTask:downTaskFile',
+            type: 'down',
+            title: '下载文件',
+            click: handleCustomDown,
+            disabled: allowDown,
+          },
+          {
+            authorityCode: 'backgroundFileTask#BackgroundFileTask:delete',
+            type: 'delete',
+            title: '删除',
+            args: {
+              url: apiUrls.value.delete,
+            },
+          },
+        ],
+      },
+      buttonConfig: {
+        attrs: {},
+        extend: {},
+        buttons: [
+          // {label: srmI18n(`${getLangAccount()}#i18n_title_listCustom`, '列自定义'), icon: 'setting', clickFn: this.settingColumns},
+          //             {label: srmI18n(`${getLangAccount()}#i18n_title_helpText`, '帮助说明'), icon: 'file-text', folded: true, isDocument: true, clickFn: this.showHelpText},
+          //             {label: srmI18n(`${getLangAccount()}#i18n_title_attachment`, '说明附件'), icon: 'file-pdf', folded: true, isDocument: true, clickFn: this.showHelpPDF}
+        ],
+      },
+      queryConfig: {
+        attrs: {},
+        extend: {},
+        form: [],
+        formState: {},
+      },
+      pagerConfig: {},
+    })
+    //methods
+
+    function allowRun({ row = {} as MapObjectNoneType }) {
+      return '0' !== row.taskStatus
+    }
+
+    function handleRun({ row = {} as MapObjectNoneType }) {
+      if ('0' !== row.taskStatus) {
+        message.warning('当前状态不允许执行文件任务')
+        return
+      }
+      Modal.confirm({
+        title: '执行文件任务',
+        content: '是否执行文件任务？',
+        onOk() {
+          listLayoutRef.value.loading = true
+          qHttp
+            .post({
+              url: apiUrls.value.runTask + '/' + row.id,
+            })
+            .then((res) => {
+              if (res.success) {
+                listLayoutRef.value.fetchListData()
+                message.success(res.message)
+              } else {
+                message.warning(res.message)
+              }
+            })
+            .finally(() => {
+              listLayoutRef.value.loading = true
+            })
+        },
+      })
+    }
+
+    function allowDown({ row = {} as MapObjectNoneType }) {
+      return '1' !== row.taskStatus
+    }
+    function handleCustomDown({ row = {} as MapObjectNoneType }) {
+      handleExport({
+        exportXlsUrl: apiUrls.value.downTaskFile + '/' + row.id,
+        type: 'xls',
+        fileName: row.taskName,
+        actionType: 'get',
+        setPostParms: () => {
+          return {}
+        },
+        berforCallback: () => {
+          listLayoutRef.value.loading = true
+        },
+        afterCallback: () => {
+          listLayoutRef.value.loading = false
+        },
+      })
+    }
+
+    return { listLayoutRef, showEditPage, apiUrls, pageData }
+  },
+})
+</script>
+<style scoped></style>

package/src/lib/components/QBackgroundFileTaskList/src/useConfigData.ts

@@ -0,0 +1,20 @@
+import { shallowRef, ref } from 'vue'
+// import type { MapObjectNoneType } from './types'
+// import { VxeTableInstance } from 'vxe-table'
+// import type  {}
+export function useConfigData() {
+  //响应
+
+  const apiUrls = shallowRef({
+    list: '/base/fileTask/list',
+    delete: '/base/fileTask/delete',
+    runTask: '/base/fileTask/runTask',
+    downTaskFile: '/base/fileTask/downTaskFile',
+    columnsCode: 'BackgroundFileTaskList',
+  })
+  const uploadShow = shallowRef<boolean>(false)
+  const showEditPage = shallowRef<boolean>(false)
+  const currentEditRow = ref({})
+  const listLayoutRef = ref()
+  return { apiUrls, showEditPage, currentEditRow, listLayoutRef, uploadShow }
+}

package/src/lib/components/QCompanyermissionList/src/editTree.vue

@@ -0,0 +1,291 @@
+<template>
+  <vxe-grid ref="xGrid" v-bind="gridOptions">
+    <template #toolbar_buttons>
+      <div class="toolbar-button-wrap">
+        <vxe-button status="primary" @click="add">新增</vxe-button>
+      </div>
+    </template>
+    <template #dragBtn>
+      <span class="drag-btn">
+        <i class="vxe-icon-sort"></i>
+      </span>
+    </template>
+    <!-- <template #dragTip>
+      <vxe-tooltip :content="dragTipContent" enterable>
+        <i class="vxe-icon-question-circle-fill"></i>
+      </vxe-tooltip>
+    </template> -->
+    <template #hiddenCol="{ row }">
+      <span>{{ row.hidden ? '是' : '否' }}</span>
+    </template>
+    <template #menuTypeCol="{ row }">
+      <span>
+        {{ getMenuTypeLabel(row.menuType) }}
+      </span>
+    </template>
+    <template #menuAttributeCol="{ row }">
+      <span>
+        {{ getMenuAttributeTypesLabel(row.menuAttribute) }}
+      </span>
+    </template>
+    <template #optsCol="{ row }">
+      <vxe-button type="text" status="primary" @click="edit(row, 'top')">编辑</vxe-button>
+      <!-- <vxe-button type="text" status="primary" @click="addSubMenu(row)">新增</vxe-button>
+      <vxe-button type="text" status="danger" @click="removeRow(row)">删除</vxe-button> -->
+      <vxe-button type="text" status="success" v-if="showHelpBtn(row)" @click="toHelpCenter(row)">说明</vxe-button>
+    </template>
+  </vxe-grid>
+  <PermissionForm
+    v-if="showPermissionForm"
+    :title="permissionFormTitle"
+    :treeData="gridOptions.data"
+    :show="showPermissionForm"
+    :currentRow="permissioncurrentRow"
+    :menuTypes="menuTypes"
+    :menuAttributeTypes="menuAttributeTypes"
+    @hide="showPermissionForm = false"
+    @afterHandleSaveSuccess="afterHandleSavePermissionSuccess"
+  ></PermissionForm>
+</template>
+<script lang="ts">
+import { defineComponent, reactive, ref, unref, onMounted, inject } from 'vue'
+import { VXETable, VxeGridInstance, VxeGridProps } from 'vxe-table'
+import { INJECT_HTTP, HttpClient } from '../../../../../src/lib/utils/global.types'
+import { PermissionDataType } from './types'
+import PermissionForm from './form.vue'
+
+export default defineComponent({
+  props: {
+    gridConfig: {
+      type: Object,
+      required: true,
+    },
+  },
+  components: {
+    PermissionForm,
+  },
+  setup(props) {
+    const router = inject('Q_APPLICATION_ROUTER', { push: (obj: { path: string; query: object }) => console.log('router path: ' + obj.path) })
+    // 菜单类型
+    const menuTypes = unref([
+      {
+        key: 0,
+        value: 0,
+        label: '一级菜单',
+      },
+      {
+        key: 1,
+        value: 1,
+        label: '子菜单',
+      },
+      {
+        key: 2,
+        value: 2,
+        label: '按钮/权限',
+      },
+    ])
+    // 菜单属性类型
+    const menuAttributeTypes = ref([
+      {
+        key: '1',
+        value: '1',
+        label: '采购',
+      },
+      {
+        key: '2',
+        value: '2',
+        label: '销售',
+      },
+      {
+        key: '3',
+        value: '3',
+        label: '公共',
+      },
+      {
+        key: '4',
+        value: '4',
+        label: '平台',
+      },
+    ])
+    const getMenuTypeLabel = (value: string | number) => {
+      let obj = menuTypes.find((item) => item.value === value)
+      return obj?.label
+    }
+    const getMenuAttributeTypesLabel = (value: string | number) => {
+      let obj = menuAttributeTypes.value.find((item) => item.value === value)
+      return obj?.label
+    }
+    // 是否显示说明
+    const showHelpBtn = (currentRow: PermissionDataType) => {
+      const types = [0, 1]
+      if (!types.includes(currentRow.menuType as number)) {
+        return false
+      }
+      if (currentRow.menuType !== 1 && currentRow.children && currentRow.children.length) {
+        return false
+      }
+      return true
+    }
+    const permissionFormTitle = ref('')
+    const qHttp = inject(INJECT_HTTP) as HttpClient
+    const showPermissionForm = ref(false)
+    const permissioncurrentRow = ref<PermissionDataType>()
+    const xGrid = ref({} as VxeGridInstance)
+    const gridOptions = reactive({
+      ...props.gridConfig,
+      class: 'sortable-tree-demo',
+      rowConfig: {
+        useKey: true,
+      },
+      scrollY: {
+        enabled: false,
+      },
+      treeConfig: {
+        children: 'children',
+      },
+      columns: [
+        // { width: 60, fixed: 'left', slots: { default: 'dragBtn', header: 'dragTip' } },
+        { field: 'name', width: 200, title: '菜单名称', treeNode: true, fixed: 'left' },
+        { field: 'nameI18nKey', width: 180, title: '菜单名称国际化' },
+        { field: 'icon', width: 80, title: '图标' },
+        { field: 'hidden', width: 80, title: '是否隐藏', slots: { default: 'hiddenCol' } },
+        { field: 'menuType', width: 120, title: '菜单类型', slots: { default: 'menuTypeCol' } },
+        { field: 'menuAttribute', width: 120, title: '菜单属性', slots: { default: 'menuAttributeCol' } },
+        { field: 'component', width: 140, title: '前端组件路径' },
+        { field: 'url', width: 160, title: '访问路由地址', titlePrefix: { content: "以'/'开头为嵌套路由的根路径,需要填写全路径，否则为嵌套的相对路径" } },
+        { field: 'perms', width: 260, title: '授权标识' },
+        { width: 300, title: '操作', fixed: 'right', slots: { default: 'optsCol' } },
+      ],
+      data: [],
+    } as VxeGridProps)
+    // 新增
+    const add = () => {
+      permissionFormTitle.value = '新增'
+      permissioncurrentRow.value = {
+        id: '',
+        menuType: 0,
+        name: '',
+        nameI18nKey: '',
+        url: '',
+        menuAttribute: '',
+        component: '',
+        redirect: '',
+        perms: '',
+        icon: '',
+        sortNo: null,
+        hidden: false,
+        keepAlive: true,
+        mobile: true,
+      }
+      showPermissionForm.value = true
+    }
+    // 新增子菜单
+    const addSubMenu = (currentRow?: PermissionDataType) => {
+      permissionFormTitle.value = '添加子菜单'
+      permissioncurrentRow.value = Object.assign({}, { parentId: currentRow?.id, menuType: 1, perms: currentRow?.perms })
+      showPermissionForm.value = true
+    }
+    // 编辑
+    const edit = (currentRow: PermissionDataType, locat: string) => {
+      permissionFormTitle.value = '编辑'
+      permissioncurrentRow.value = currentRow
+      showPermissionForm.value = true
+      console.log(currentRow, locat)
+    }
+    // 获取权限菜单
+    const getPermissionList = () => {
+      qHttp.registerModuleAction('PermissionModule/getCompanyPermissionList').then((res) => {
+        if (res && res.success) {
+          gridOptions.data = res.result
+        }
+      })
+    }
+    // 保存成功后
+    const afterHandleSavePermissionSuccess = () => {
+      VXETable.modal.message({ content: '保存成功，重新登录后生效', status: 'success' })
+      //getPermissionList()
+    }
+    // 插入
+    const insertRow = async (currentRow: PermissionDataType, locat: string) => {
+      const $table = xGrid.value
+      if ($table) {
+        const waitInsertData = {
+          id: Date.now(),
+          parentId: locat === 'current' ? currentRow.parentId : currentRow.id,
+          name: currentRow.name + '子菜单',
+        }
+        if (locat === 'current') {
+          const { row: newRow } = await $table.insertAt(waitInsertData, currentRow)
+          await $table.setEditRow(newRow)
+        } else if (locat === 'top') {
+          const { row: newRow } = await $table.insert(waitInsertData)
+          await $table.setTreeExpand(currentRow, true) // 将父节点展开
+          await $table.setEditRow(newRow)
+        } else if (locat === 'bottom') {
+          const { row: newRow } = await $table.insertAt(waitInsertData, -1)
+          await $table.setTreeExpand(currentRow, true) // 将父节点展开
+          await $table.setEditRow(newRow)
+        }
+      }
+    }
+    // 删除
+    const removeRow = async (currentRow: PermissionDataType) => {
+      const type = await VXETable.modal.confirm('是否确认删除', '提示')
+      if (type === 'confirm') {
+        if (xGrid.value) {
+          qHttp.registerModuleAction('PermissionModule/deletePermissionSingle', { id: currentRow.id }).then((res) => {
+            if (res && res.success) {
+              VXETable.modal.message({ content: '删除成功，重新登录后生效', status: 'success' })
+              getPermissionList()
+            } else {
+              VXETable.modal.message({ content: res.message, status: 'error' })
+            }
+          })
+        }
+      }
+    }
+    const toHelpCenter = (currentRow: PermissionDataType) => {
+      router.push({ path: '/platform/menu/PermissionList/HelpCenter', query: { id: currentRow.id, title: currentRow.title, isCompany: false } })
+    }
+    onMounted(() => {
+      getPermissionList()
+    })
+
+    return {
+      permissionFormTitle,
+      showPermissionForm,
+      permissioncurrentRow,
+      add,
+      addSubMenu,
+      edit,
+      getPermissionList,
+      afterHandleSavePermissionSuccess,
+      xGrid,
+      // dragTipContent,
+      gridOptions,
+      // treeDrop,
+      insertRow,
+      removeRow,
+      menuTypes,
+      menuAttributeTypes,
+      getMenuTypeLabel,
+      getMenuAttributeTypesLabel,
+      showHelpBtn,
+      toHelpCenter,
+    }
+  },
+})
+</script>
+<style scoped lang="scss">
+.sortable-tree-demo .drag-btn {
+  cursor: move;
+  font-size: 12px;
+}
+.sortable-tree-demo .vxe-body--row.sortable-ghost,
+.sortable-tree-demo .vxe-body--row.sortable-chosen {
+  background-color: #dfecfb;
+}
+.toolbar-button-wrap {
+  padding: 0 10px;
+}
+</style>

package/src/lib/components/QCompanyermissionList/src/form.vue

@@ -0,0 +1,238 @@
+<template>
+  <vxe-modal :width="1100" :title="modalTitle" v-model="showModal" :hide="hideModal">
+    <template #default>
+      <vxe-form title-colon ref="xForm" title-align="right" title-width="160" :data="permission.formData" :rules="permission.formRules" :loading="permission.loading" @submit="submitEvent">
+        <vxe-form-item align="center" span="24">
+          <template #default="{ data }">
+            <vxe-radio-group v-model="data.menuType">
+              <vxe-radio v-for="menu in menuTypesOpts" :disabled="true" :key="menu.key" :label="menu.value" :content="menu.label"></vxe-radio>
+            </vxe-radio-group>
+          </template>
+        </vxe-form-item>
+        <vxe-form-gather span="12">
+          <vxe-form-item :visible-method="previousMenusVisible" title="上级菜单" field="parentId" span="24" :item-render="{}" title-overflow="ellipsis">
+            <template #default="{ data }">
+              <a-tree-select
+                v-model:value="data.parentId"
+                style="width: 100%"
+                :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
+                placeholder="请选择上级菜单"
+                allow-clear
+                tree-default-expand-all
+                :tree-data="previousMenus"
+              >
+              </a-tree-select>
+            </template>
+          </vxe-form-item>
+          <vxe-form-item title="菜单名称" field="name" span="24">
+            <template #default="{ data }">
+              <vxe-input v-model="data.name" type="text" placeholder="请输入菜单名称" clearable></vxe-input>
+            </template>
+          </vxe-form-item>
+          <vxe-form-item title="菜单名称国际化key" field="nameI18nKey" span="24">
+            <template #default="{ data }">
+              <vxe-input v-model="data.nameI18nKey" type="text" placeholder="请输入菜单名称国际化key" clearable></vxe-input>
+            </template>
+          </vxe-form-item>
+          <vxe-form-item title="菜单属性" field="menuAttribute" span="24" :item-render="{}" title-overflow="ellipsis">
+            <template #default="{ data }">
+              <vxe-select :disabled="true" v-model="data.menuAttribute" placeholder="请选择菜单属性" clearable>
+                <vxe-option v-for="menuAttr in menuAttributeTypesOpts" :key="menuAttr.key" :value="menuAttr.value" :label="menuAttr.label"></vxe-option>
+              </vxe-select>
+            </template>
+          </vxe-form-item>
+          <vxe-form-item title="访问路由地址" field="url" span="24" :item-render="{}" title-overflow="title">
+            <template #default="{ data }">
+              <vxe-input :disabled="true" v-model="data.url" type="text" placeholder="请输入访问路由地址" clearable></vxe-input>
+            </template>
+          </vxe-form-item>
+          <vxe-form-item title="前端组件路径" field="component" span="24" :item-render="{}" title-overflow="title">
+            <template #default="{ data }">
+              <vxe-input :disabled="true" v-model="data.component" type="text" placeholder="请输入前端组件路径" clearable></vxe-input>
+            </template>
+          </vxe-form-item>
+          <vxe-form-item title="默认跳转地址" field="redirect" span="24" :item-render="{}" title-overflow="title">
+            <template #default="{ data }">
+              <vxe-input v-model="data.redirect" type="text" placeholder="请输入路由参数redirect" clearable></vxe-input>
+            </template>
+          </vxe-form-item>
+          <vxe-form-item title="授权标识" field="perms" span="24" :item-render="{}" title-overflow="title">
+            <template #default="{ data }">
+              <vxe-input v-model="data.perms" type="text" placeholder="请输入授权标识,多个用分号隔开，如 user:list;user:edit" clearable></vxe-input>
+            </template>
+          </vxe-form-item>
+        </vxe-form-gather>
+        <vxe-form-gather span="12">
+          <vxe-form-item title="排序" field="sortNo" span="24" :item-render="{}" title-overflow="title">
+            <template #default="{ data }">
+              <vxe-input v-model="data.sortNo" type="integer" placeholder="请输入顺序" clearable></vxe-input>
+            </template>
+          </vxe-form-item>
+          <vxe-form-item title="图标" field="icon" span="24" :item-render="{}" title-overflow="title">
+            <template #default="{ data }">
+              <vxe-input v-model="data.icon" type="text" placeholder="请选择图标" clearable></vxe-input>
+            </template>
+          </vxe-form-item>
+          <vxe-form-item title="是否隐藏菜单" field="hidden" span="24" :item-render="{}" title-overflow="title">
+            <template #default="{ data }">
+              <vxe-switch v-model="data.hidden" open-label="是" close-label="否"></vxe-switch>
+            </template>
+          </vxe-form-item>
+          <vxe-form-item title="是否缓存路由" field="hidden" span="24" :item-render="{}" title-overflow="title">
+            <template #default="{ data }">
+              <vxe-switch v-model="data.keepAlive" open-label="是" close-label="否"></vxe-switch>
+            </template>
+          </vxe-form-item>
+          <vxe-form-item title="是否移动端菜单" field="mobile" span="24" :item-render="{}" title-overflow="title">
+            <template #default="{ data }">
+              <vxe-switch :disabled="true" v-model="data.mobile" open-label="是" close-label="否"></vxe-switch>
+            </template>
+          </vxe-form-item>
+        </vxe-form-gather>
+        <vxe-form-item align="center" span="24">
+          <template #default>
+            <vxe-button content="取消" @click="hideModal"></vxe-button>
+            <vxe-button type="submit" status="primary" content="确定"></vxe-button>
+          </template>
+        </vxe-form-item>
+      </vxe-form>
+    </template>
+  </vxe-modal>
+</template>
+<script lang="ts">
+import { defineComponent, reactive, ref, onMounted, inject } from 'vue'
+import { VXETable, VxeFormEvents, VxeFormPropTypes } from 'vxe-table'
+import { INJECT_HTTP, HttpClient } from '../../../../../src/lib/utils/global.types'
+export default defineComponent({
+  name: 'PermissionForm',
+  props: {
+    title: {
+      type: String,
+      default: '',
+    },
+    show: {
+      type: Boolean,
+      default: false,
+    },
+    treeData: {
+      type: Object,
+    },
+    currentRow: {
+      type: Object,
+    },
+    menuTypes: {
+      type: Object,
+    },
+    menuAttributeTypes: {
+      type: Object,
+    },
+  },
+  setup(props, { emit }) {
+    const qHttp = inject(INJECT_HTTP) as HttpClient
+    const modalTitle = ref(props.title)
+    const showModal = ref(props.show)
+    const previousMenus = ref([])
+    const menuTypesOpts = ref(props.menuTypes)
+    const menuAttributeTypesOpts = ref(props.menuAttributeTypes)
+    const hideModal = () => {
+      emit('hide', false)
+    }
+    const permission = reactive({
+      loading: false,
+      formData: {
+        id: null,
+        parentId: null,
+        menuType: null,
+        name: null,
+        nameI18nKey: null,
+        url: null,
+        menuAttribute: null,
+        component: null,
+        redirect: null,
+        perms: null,
+        keepAlive: null,
+        icon: null,
+        sortNo: null,
+        hidden: null,
+        mobile: null,
+      },
+      formRules: {
+        name: [{ required: true, message: '请输入名称' }],
+        url: [{ required: true, message: '请输入菜单路径' }],
+        menuAttribute: [{ required: true, message: '请输入菜单属性' }],
+        component: [{ required: true, message: '请输入前端组件路径' }],
+        parentId: [
+          { required: true, message: '请选择上级菜单' },
+          {
+            validator(valid) {
+              if (!valid.itemValue) {
+                return new Error('请选择上级菜单')
+              }
+            },
+          },
+        ],
+      } as VxeFormPropTypes.Rules,
+    })
+    permission.formData = Object.assign({}, permission.formData, props.currentRow)
+    // 是否显示上级菜单
+    const previousMenusVisible = () => {
+      if (permission.formData.menuType) {
+        if (permission.formData.menuType === 0) {
+          return false
+        } else {
+          return true
+        }
+      } else {
+        return false
+      }
+    }
+    // 保存
+    const save = async () => {
+      permission.loading = true
+      const res = permission.formData.id
+        ? await qHttp.registerModuleAction('PermissionModule/editPermission', permission.formData)
+        : await qHttp.registerModuleAction('PermissionModule/addPermission', permission.formData)
+      if (res && res.success) {
+        hideModal()
+        emit('afterHandleSaveSuccess')
+      } else {
+        VXETable.modal.message({ content: res.message, status: 'error' })
+      }
+      permission.loading = false
+    }
+    const submitEvent: VxeFormEvents.Submit = () => {
+      save()
+    }
+    onMounted(() => {
+      qHttp.registerModuleAction('PermissionModule/queryTreeList').then((res) => {
+        if (res && res.success) {
+          if (res.result && res.result.treeList) {
+            previousMenus.value = res.result.treeList
+          }
+        }
+      })
+    })
+
+    return {
+      modalTitle,
+      previousMenus,
+      previousMenusVisible,
+      showModal,
+      hideModal,
+      menuTypesOpts,
+      menuAttributeTypesOpts,
+      permission,
+      save,
+      submitEvent,
+    }
+  },
+})
+</script>
+<style lang="scss" scoped>
+:deep(.vxe-form--gather) {
+  padding: 20px 0px;
+}
+:deep(.vxe-form--gather:first-child) {
+  border-right: solid 1px #ddd;
+}
+</style>