@qqt-product/system 0.0.1 → 0.0.16

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

@@ -1,309 +0,0 @@
-<template>
-  <div class="permission-box">
-    <vxe-table
-      show-overflow
-      keep-source
-      ref="xTable"
-      height="auto"
-      :row-config="{ keyField: 'id' }"
-      :edit-config="{ trigger: 'click', mode: 'row', showStatus: true }"
-      :column-config="{ resizable: true }"
-      :data="permissionList"
-      :tree-config="{ transform: true, rowField: 'id', parentField: 'parentId' }"
-      :checkbox-config="{ labelField: 'name' }"
-      @checkbox-change="selectChangeEvent"
-    >
-      <vxe-column field="name" title="菜单名称" width="200" fixed="left" tree-node :edit-render="{}">
-        <template #edit="{ row }">
-          <vxe-input v-model="row.name" type="text"></vxe-input>
-        </template>
-      </vxe-column>
-      <vxe-column field="nameI18nKey" title="菜单名称国际化" width="180" :edit-render="{}">
-        <template #edit="{ row }">
-          <vxe-input v-model="row.nameI18nKey" type="text"></vxe-input>
-        </template>
-      </vxe-column>
-      <vxe-column field="icon" title="icon" width="80">
-        <template #default="{ row }">
-          <a-icon :class="`vxe-icon-${row.icon}`" />
-        </template>
-      </vxe-column>
-      <vxe-column field="menuType" title="菜单类型" width="100" :edit-render="{}">
-        <template #default="{ row }">
-          <span v-if="row.menuType === 0">一级菜单</span>
-          <span v-if="row.menuType === 1">子菜单</span>
-          <span v-if="row.menuType === 2">按钮/权限</span>
-        </template>
-        <template #edit="{ row }">
-          <vxe-select v-model="row.menuType" placeholder="请选择菜单类型">
-            <vxe-option v-for="menu in menuTypes" :key="menu.key" :value="menu.value" :label="menu.label"></vxe-option>
-          </vxe-select>
-        </template>
-      </vxe-column>
-      <vxe-column field="menuAttribute" title="菜单属性" width="100" :edit-render="{}">
-        <template #default="{ row }">
-          <span v-if="row.menuAttribute === '1'">采购</span>
-          <span v-if="row.menuAttribute === '2'">销售</span>
-          <span v-if="row.menuAttribute === '3'">公共</span>
-          <span v-if="row.menuAttribute === '4'">平台</span>
-        </template>
-        <template #edit="{ row }">
-          <vxe-select v-model="row.menuAttribute" placeholder="请选择菜单属性">
-            <vxe-option v-for="menuAttr in menuAttributeTypes" :key="menuAttr.key" :value="menuAttr.value" :label="menuAttr.label"></vxe-option>
-          </vxe-select>
-        </template>
-      </vxe-column>
-      <vxe-column field="component" title="路由视图" width="120" :edit-render="{}" :title-prefix="componentTypesTip">
-        <template #default="{ row }">
-          <span v-if="row.component === 'layouts/RouteView'">路由视图</span>
-          <span v-else-if="row.component === 'layouts/TabLayout'">Tab路由视图</span>
-          <span v-else-if="row.component === 'layouts/IframePageView'">Iframe路由视图</span>
-          <span v-else>自定义</span>
-        </template>
-        <template #edit="{ row }">
-          <vxe-select v-model="row.component" placeholder="请选择菜单类型">
-            <vxe-option v-for="com in componentTypes" :key="com.key" :value="com.value" :label="com.label"></vxe-option>
-          </vxe-select>
-          <!-- <vxe-input v-model="row.component" type="text"></vxe-input> -->
-        </template>
-      </vxe-column>
-      <vxe-column field="url" title="访问路径" width="180" :edit-render="{}" :title-prefix="{ content: '页面访问的真实路径' }">
-        <template #edit="{ row }">
-          <vxe-input v-model="row.url" type="text"></vxe-input>
-        </template>
-      </vxe-column>
-      <vxe-column field="perms" title="授权标识" width="250" :edit-render="{}">
-        <template #edit="{ row }">
-          <vxe-input v-model="row.perms" type="text"></vxe-input>
-        </template>
-      </vxe-column>
-      <!-- <vxe-column field="sortNo" title="排序"></vxe-column> -->
-      <vxe-column field="action" title="操作" width="380" fixed="right">
-        <template #default="{ row }">
-          <vxe-button v-if="row.menuType !== 2" type="text" status="primary" @click="insertRow(row, 'top')">顶部插入节点</vxe-button>
-          <vxe-button v-if="row.menuType !== 2" type="text" status="primary" @click="insertRow(row, 'bottom')">尾部插入节点</vxe-button>
-          <!-- <vxe-button v-if="row.menuType === 2" type="text" status="primary" @click="insertRow(row, 'current')">插入节点</vxe-button> -->
-          <!-- <vxe-button type="text" status="primary" @click="showDrawer('edit')">顶部插入节点</vxe-button>
-          <vxe-button type="text" status="primary" @click="showDrawer('new')">尾部插入节点</vxe-button> -->
-          <vxe-button type="text" status="danger" @click="removeRow(row)">删除</vxe-button>
-          <vxe-button type="text" status="success" v-if="(row.menuType === 0 && row.children && !row.children.length) || row.menuType === 1">说明</vxe-button>
-        </template>
-      </vxe-column>
-    </vxe-table>
-    <a-drawer :width="500" :title="drawerTitle" :placement="drawerPlacement" :visible="drawervisible" @close="closeDrawer">
-      <template #extra>
-        <a-button style="font-size: 12px; margin-right: 8px" size="small" @click="closeDrawer">取消</a-button>
-        <a-button style="font-size: 12px" type="primary" size="small" @click="closeDrawer">确定</a-button>
-      </template>
-      <permission-form></permission-form>
-    </a-drawer>
-  </div>
-</template>
-<script lang="ts">
-import { defineComponent, reactive, ref, inject } from 'vue'
-import { PermissionDataType } from './types'
-import { VxeTableInstance, VxeTableEvents } from 'vxe-table'
-// import type { DrawerProps } from 'ant-design-vue'
-import { INJECT_HTTP, HttpClient } from '../../../../../src/lib/utils/global.types'
-import PermissionForm from './form.vue'
-export default defineComponent({
-  components: {
-    PermissionForm,
-  },
-  props: {
-    gridConfig: {
-      type: Object,
-      required: true,
-    },
-  },
-  setup(props) {
-    const tableOptions = ref(props.gridConfig)
-    // 菜单类型
-    const menuTypes = ref([
-      {
-        key: 0,
-        value: 0,
-        label: '一级菜单',
-      },
-      {
-        key: 1,
-        value: 1,
-        label: '子菜单',
-      },
-      {
-        key: 2,
-        value: 2,
-        label: '按钮/权限',
-      },
-    ])
-    // 路由组件类型
-    const componentTypes = ref([
-      {
-        key: 0,
-        value: 'qCustom',
-        label: '自定义',
-      },
-      {
-        key: 1,
-        value: 'layouts/RouteView',
-        label: '路由视图',
-      },
-      {
-        key: 2,
-        value: 'layouts/TabLayout',
-        label: 'Tab路由视图',
-      },
-      {
-        key: 3,
-        value: 'layouts/IframePageView',
-        label: 'Iframe路由视图',
-      },
-      {
-        key: 4,
-        value: 'listEmbedding',
-        label: '列表内嵌',
-      },
-    ])
-    const componentTypesTip = ref({
-      content: '自定义路由视图使用的是tab路由视图作为父级，并且要以访问路径要一致；列表内嵌属于列表明细页的路由，可任意定义，但是访问路径要比列表的深一级；其它路由视图是继承的关系',
-    })
-    // 菜单属性类型
-    const menuAttributeTypes = ref([
-      {
-        key: '1',
-        value: '1',
-        label: '采购',
-      },
-      {
-        key: '2',
-        value: '2',
-        label: '销售',
-      },
-      {
-        key: '3',
-        value: '3',
-        label: '公共',
-      },
-      {
-        key: '4',
-        value: '4',
-        label: '平台',
-      },
-    ])
-    const drawerTitle = ref('新建')
-    const drawerPlacement = ref<any['placement']>('right')
-    const drawervisible = ref<boolean>(false)
-    const showDrawer = (type: string) => {
-      drawerTitle.value = type === 'new' ? '新建' : '编辑'
-      drawervisible.value = true
-    }
-    const closeDrawer = () => {
-      drawervisible.value = false
-    }
-    const qHttp = inject(INJECT_HTTP) as HttpClient
-    const permissionList = ref<PermissionDataType[]>([])
-    const tilePermissionList = (result: PermissionDataType[]) => {
-      result.forEach((data) => {
-        let menu = Object.assign({}, data)
-        menu.children && delete menu.children
-        permissionList.value.push(menu)
-        if (data.children) {
-          tilePermissionList(data.children)
-        }
-      })
-    }
-    qHttp.registerModuleAction('PermissionModule/getPermissionList').then((res) => {
-      if (res && res.success) {
-        tilePermissionList(res.result)
-        console.log(permissionList.value)
-      }
-    })
-    const xTable = ref<VxeTableInstance>()
-    // const xToolbar = ref<VxeToolbarInstance>()
-    const demo2 = reactive({
-      tableData: [
-        { id: 10000, parentId: null, name: 'test abc1', type: 'mp3', size: 1024, date: '2020-08-01' },
-        { id: 10050, parentId: null, name: 'Test2', type: 'mp4', size: null, date: '2021-04-01' },
-        { id: 24300, parentId: 10050, name: 'Test3', type: 'avi', size: 1024, date: '2020-03-01' },
-        { id: 20045, parentId: 24300, name: 'test abc4', type: 'html', size: 600, date: '2021-04-01' },
-        { id: 10053, parentId: 24300, name: 'test abc96', type: 'avi', size: null, date: '2021-04-01' },
-        { id: 24330, parentId: 10053, name: 'test abc5', type: 'txt', size: 25, date: '2021-10-01' },
-        { id: 21011, parentId: 10053, name: 'Test6', type: 'pdf', size: 512, date: '2020-01-01' },
-        { id: 22200, parentId: 10053, name: 'Test7', type: 'js', size: 1024, date: '2021-06-01' },
-        { id: 23666, parentId: null, name: 'Test8', type: 'xlsx', size: 2048, date: '2020-11-01' },
-        { id: 23677, parentId: 23666, name: 'Test7', type: 'js', size: 1024, date: '2021-06-01' },
-        { id: 23671, parentId: 23677, name: 'Test7', type: 'js', size: 1024, date: '2021-06-01' },
-        { id: 23672, parentId: 23677, name: 'Test7', type: 'js', size: 1024, date: '2021-06-01' },
-        { id: 23688, parentId: 23666, name: 'Test7', type: 'js', size: 1024, date: '2021-06-01' },
-        { id: 23681, parentId: 23688, name: 'Test7', type: 'js', size: 1024, date: '2021-06-01' },
-        { id: 23682, parentId: 23688, name: 'Test7', type: 'js', size: 1024, date: '2021-06-01' },
-        { id: 24555, parentId: null, name: 'test abc9', type: 'avi', size: 224, date: '2020-10-01' },
-        { id: 24566, parentId: 24555, name: 'Test7', type: 'js', size: 1024, date: '2021-06-01' },
-        { id: 24577, parentId: 24555, name: 'Test7', type: 'js', size: 1024, date: '2021-06-01' },
-      ],
-    })
-
-    const selectChangeEvent: VxeTableEvents.CheckboxChange = ({ $table }) => {
-      const records = $table.getCheckboxRecords()
-      console.info(`勾选${records.length}个树形节点`, records)
-    }
-    // const http: qqtApi.Request = qqtApi.useHttp()
-    // http.registerModuleAction('PermissionModule/getPermissionList').then(() => {
-    //   console.log(111)
-    // })
-    // 插入
-    const insertRow = async (currentRow: PermissionDataType, locat: string) => {
-      const $table = xTable.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) => {
-      if (xTable.value) {
-        const $table = xTable.value
-        await $table.remove(currentRow)
-      }
-    }
-    return {
-      tableOptions,
-      menuTypes,
-      componentTypes,
-      componentTypesTip,
-      menuAttributeTypes,
-      xTable,
-      insertRow,
-      removeRow,
-      drawerTitle,
-      drawerPlacement,
-      drawervisible,
-      showDrawer,
-      closeDrawer,
-      permissionList,
-      demo2,
-      selectChangeEvent,
-    }
-  },
-})
-</script>
-<style scoped lang="scss">
-.permission-box {
-  height: 100%;
-}
-</style>

package/src/lib/components/QCompanyermissionList/src/types.ts

@@ -1,44 +0,0 @@
-export interface PermissionDataType {
-  id?: string
-  alwaysShow?: boolean
-  children?: PermissionDataType[] | null
-  companyMeunId?: string
-  component?: string
-  createBy?: string
-  createTime?: string
-  defaultMenu?: string
-  deleted?: string | number
-  description?: string
-  helpDocUrl?: string
-  hidden?: boolean
-  icon?: string
-  iconColor?: string
-  internalOrExternal?: boolean
-  isLeaf?: boolean
-  keepAlive?: boolean
-  key?: string
-  leaf?: boolean
-  menuAttribute?: number | string
-  menuType?: string | number
-  mobile?: boolean
-  name?: string
-  nameI18nKey?: string
-  parentId?: string
-  perms?: string
-  permsType?: string | number
-  purchasePermissionId?: string | number
-  redirect?: string
-  route?: boolean
-  sortNo?: string | number | null
-  status?: string | number
-  superQueryFlag?: boolean
-  title?: string
-  updateBy?: string
-  updateTime?: string
-  url?: string
-}
-export interface PermissionFormState {
-  username: string
-  nickname: string
-  checkNick: boolean
-}