@qqt-product/system 0.0.2 → 0.0.16

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

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

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