@qqt-product/system 0.0.2 → 0.0.16

package/src/lib/components/QRoleList/src/QRoleList.vue

@@ -1,288 +1,332 @@
-<template>
-  <div style="height: 100%">
-    <q-list-layout ref="listLayoutRef" v-if="!showAuth && !showEditPage" :pageData="pageData" :apiUrls="apiUrls" />
-
-    <!--复制功能-->
-    <vxe-modal v-model="copyRoleShow" title="复制角色" type="confirm" :showFooter="false">
-      <vxe-form title-colon title-align="right" title-width="160" :data="copyRoleFrom" :rules="userInformsFromRules" @submit="copyRolesubmitEvent">
-        <vxe-form-gather span="24">
-          <vxe-form-item title="角色名称" field="roleName" span="24">
-            <template #default="{ data }">
-              <vxe-input v-model="data.roleName" type="text" placeholder="请输入角色名称"></vxe-input>
-            </template>
-          </vxe-form-item>
-          <vxe-form-item title="角色编码" field="roleCode" span="24">
-            <template #default="{ data }">
-              <vxe-input v-model="data.roleCode" type="text" placeholder="请输入角色编码"></vxe-input>
-            </template>
-          </vxe-form-item>
-
-          <vxe-form-item align="center" span="24">
-            <template #default>
-              <vxe-button content="取消" @click="copyRoleShow = false"></vxe-button>
-              <vxe-button type="submit" status="primary" content="保存"></vxe-button>
-            </template>
-          </vxe-form-item>
-        </vxe-form-gather>
-      </vxe-form>
-    </vxe-modal>
-
-    <!--新增-->
-
-    <vxe-modal v-model="userInformsFromShow" title="基本信息" type="confirm" :showFooter="false">
-      <vxe-form title-colon title-align="right" title-width="160" :rules="userInformsFromRules" :data="userInformsFrom" @submit="userInformFormEvent">
-        <vxe-form-gather span="24">
-          <vxe-form-item title="角色名称" field="roleName" span="24">
-            <template #default="{ data }">
-              <vxe-input v-model="data.roleName" type="text" placeholder="请输入角色名称"></vxe-input>
-            </template>
-          </vxe-form-item>
-          <vxe-form-item title="角色编码" field="roleCode" span="24">
-            <template #default="{ data }">
-              <vxe-input :disabled="!!userInformsFrom.id" v-model="data.roleCode" type="text" placeholder="请输入角色编码"></vxe-input>
-            </template>
-          </vxe-form-item>
-
-          <vxe-form-item title="描述" field="description" span="24">
-            <template #default="{ data }">
-              <vxe-textarea :autosize="{ minRows: 6, maxRows: 10 }" v-model="data.description" type="text" placeholder="请输入描述"></vxe-textarea>
-            </template>
-          </vxe-form-item>
-
-          <vxe-form-item span="24">
-            <template #default>
-              <vxe-button
-                content="取消"
-                @click="
-                  () => {
-                    userInformsFromShow = false
-                    userInformsFrom = {}
-                  }
-                "
-              ></vxe-button>
-              <vxe-button type="submit" status="primary" content="保存"></vxe-button>
-            </template>
-          </vxe-form-item>
-        </vxe-form-gather>
-      </vxe-form>
-    </vxe-modal>
-
-    <!-- 租户授权 -->
-    <user-authorization v-if="showAuth" parentPath="RoleList" :rows="currentRows" @authCancel="handleAuthCancel"></user-authorization>
-  </div>
-</template>
-
-<script lang="ts">
-//JS
-import { ref, defineComponent, reactive, nextTick, inject } from 'vue'
-//hook
-import { useConfigData } from './useConfigData'
-import { INJECT_HTTP, HttpClient, MapObjectNoneType } from '../../../utils/global.types'
-import { message } from '@qqt-product/ui'
-
-import UserAuthorization from './components/userAuthorization'
-
-export default defineComponent({
-  name: 'QRoleList',
-  props: {
-    userInfo: {
-      type: Object,
-      defalut: () => {
-        return {}
-      },
-    },
-  },
-  components: {
-    UserAuthorization,
-  },
-  setup() {
-    //data-hook
-    const { userInformsFromRules, userInformsFromShow, userInformsFrom, showEditPage, apiUrls, copyRoleShow, copyRoleFrom, itemRow, listLayoutRef } = useConfigData()
-    // const { userInfo } = toRefs(props)
-    const qHttp = inject(INJECT_HTTP) as HttpClient
-
-    const showAuth = ref(false)
-    const currentRows = ref([])
-
-    const handleAuth = ({ row }: { row: never }) => {
-      showAuth.value = true
-      if (Array.isArray(row)) {
-        currentRows.value = [...row] as never
-      } else {
-        currentRows.value.push(row as never)
-      }
-    }
-
-    const handleAuthCancel = () => {
-      showAuth.value = false
-      currentRows.value = []
-    }
-
-    //data
-    const pageData = reactive({
-      statusConfig: {
-        show: false,
-      },
-      optColumn: {
-        attrs: {},
-        extend: {},
-        optColumnList: [
-          { authorityCode: 'role#Role:edit', type: 'edit', title: '编辑', click: handleEdit },
-          { authorityCode: 'role#Role:copy', type: 'copy', title: '复制', click: handleCopy },
-          {
-            type: 'authorization',
-            title: '授权',
-            click: handleAuth,
-            authorityCode: 'role#Permissio:saveRolePermission',
-          },
-          {
-            authorityCode: 'role#Role:delete',
-            type: 'delete',
-            title: '删除',
-            args: {
-              url: apiUrls.value.delete,
-            },
-            disabled: allowDelete,
-          },
-          // { authorityCode: 'role#Role:userSet', type: 'usersList', title: srmI18n(`${getLangAccount()}#i18n_btn_jDER_36c46210`, '用户配置'), clickFn: this.handleUsersList },
-        ],
-      },
-      buttonConfig: {
-        attrs: {},
-        extend: {},
-        buttons: [
-          {
-            authorityCode: 'role#Role:add',
-            label: '新增',
-            icon: {
-              type: 'icon-Q-add',
-            },
-            attrs: {
-              type: 'primary',
-            },
-            click: handleAdd,
-          },
-          //             {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: [
-          {
-            type: 'input',
-            label: '角色名称',
-            fieldName: 'roleName',
-            placeholder: '请输入角色名称',
-          },
-        ],
-        formState: {},
-      },
-      pagerConfig: {},
-    })
-
-    //method
-    function handleCopy({ row = {} as MapObjectNoneType }) {
-      itemRow.value = row
-      nextTick(() => {
-        copyRoleShow.value = true
-      })
-    }
-
-    function allowDelete({ row = {} as MapObjectNoneType }) {
-      if (row.roleCode == 'companyAdmin' || row.roleCode == 'admin') {
-        return true
-      } else {
-        return false
-      }
-    }
-
-    function copyRolesubmitEvent() {
-      if (copyRoleFrom.value.roleName == '') {
-        message.warning('请输入角色名称')
-        return
-      }
-      if (copyRoleFrom.value.roleCode == '') {
-        message.warning('请输入角色编码')
-        return
-      }
-
-      let data = { id: itemRow.value.id, roleName: copyRoleFrom.value.roleName, roleCode: copyRoleFrom.value.roleCode }
-      listLayoutRef.value.loading = true
-      qHttp
-        .post({
-          url: apiUrls.value.copy,
-          data,
-        })
-        .then((res) => {
-          listLayoutRef.value.loading = false
-          if (res.success) {
-            listLayoutRef.value.fetchListData()
-            message.success(res.message)
-          } else {
-            message.warning(res.message)
-          }
-        })
-        .finally(() => {
-          itemRow.value = {}
-          copyRoleFrom.value = {}
-          copyRoleShow.value = false
-        })
-    }
-
-    function handleAdd() {
-      nextTick(() => {
-        userInformsFromShow.value = true
-      })
-    }
-    function handleEdit({ row = {} as MapObjectNoneType }) {
-      userInformsFrom.value = { ...row }
-      nextTick(() => {
-        userInformsFromShow.value = true
-      })
-    }
-    function userInformFormEvent() {
-      let url = userInformsFrom.value.id ? '/account/role/edit' : '/account/role/add'
-      qHttp
-        .post({
-          url,
-          data: {
-            ...userInformsFrom.value,
-          },
-        })
-        .then((res) => {
-          listLayoutRef.value.loading = false
-          if (res.success) {
-            listLayoutRef.value.fetchListData()
-            message.success(res.message)
-          } else {
-            message.warning(res.message)
-          }
-        })
-        .finally(() => {
-          userInformsFrom.value = {}
-          userInformsFromShow.value = false
-        })
-    }
-
-    return {
-      userInformsFromRules,
-      userInformFormEvent,
-      userInformsFromShow,
-      userInformsFrom,
-      listLayoutRef,
-      copyRolesubmitEvent,
-      copyRoleFrom,
-      showEditPage,
-      apiUrls,
-      pageData,
-      copyRoleShow,
-      showAuth,
-      currentRows,
-      handleAuthCancel,
-    }
-  },
-})
-</script>
+<template>
+  <div style="height: 100%">
+    <q-list-layout ref="listLayoutRef" v-if="!showAuth && !showEditPage" :pageData="pageData" :apiUrls="apiUrls" />
+
+    <!--复制功能-->
+    <vxe-modal v-model="copyRoleShow" title="复制角色" type="confirm" :showFooter="false">
+      <vxe-form title-colon title-align="right" title-width="160" :data="copyRoleFrom" :rules="userInformsFromRules" @submit="copyRolesubmitEvent">
+        <vxe-form-gather span="24">
+          <vxe-form-item title="角色名称" field="roleName" span="24">
+            <template #default="{ data }">
+              <vxe-input v-model="data.roleName" type="text" placeholder="请输入角色名称"></vxe-input>
+            </template>
+          </vxe-form-item>
+          <vxe-form-item title="角色编码" field="roleCode" span="24">
+            <template #default="{ data }">
+              <vxe-input v-model="data.roleCode" type="text" placeholder="请输入角色编码"></vxe-input>
+            </template>
+          </vxe-form-item>
+
+          <vxe-form-item align="center" span="24">
+            <template #default>
+              <vxe-button content="取消" @click="copyRoleShow = false"></vxe-button>
+              <vxe-button type="submit" status="primary" content="保存"></vxe-button>
+            </template>
+          </vxe-form-item>
+        </vxe-form-gather>
+      </vxe-form>
+    </vxe-modal>
+
+    <!--新增-->
+
+    <vxe-modal :width="560" v-model="userInformsFromShow" title="基本信息" type="confirm" :showFooter="false">
+      <vxe-form title-colon title-align="right" title-width="100" :rules="userInformsFromRules" :data="userInformsFrom" @submit="userInformFormEvent">
+        <vxe-form-gather span="24">
+          <vxe-form-item title="角色名称" field="roleName" span="24">
+            <template #default="{ data }">
+              <vxe-input v-model="data.roleName" type="text" placeholder="请输入角色名称"></vxe-input>
+            </template>
+          </vxe-form-item>
+          <vxe-form-item title="角色编码" field="roleCode" span="24">
+            <template #default="{ data }">
+              <vxe-input :disabled="!!userInformsFrom.id" v-model="data.roleCode" type="text" placeholder="请输入角色编码"></vxe-input>
+            </template>
+          </vxe-form-item>
+
+          <vxe-form-item title="描述" field="description" span="24">
+            <template #default="{ data }">
+              <vxe-textarea :autosize="{ minRows: 6, maxRows: 10 }" v-model="data.description" type="text" placeholder="请输入描述"></vxe-textarea>
+            </template>
+          </vxe-form-item>
+
+          <vxe-form-item align="center" span="24">
+            <template #default>
+              <vxe-button
+                content="取消"
+                @click="
+                  () => {
+                    userInformsFromShow = false
+                    userInformsFrom = {}
+                  }
+                "
+              ></vxe-button>
+              <vxe-button type="submit" status="primary" content="保存"></vxe-button>
+            </template>
+          </vxe-form-item>
+        </vxe-form-gather>
+      </vxe-form>
+    </vxe-modal>
+
+    <!-- 租户授权 -->
+    <user-authorization v-if="showAuth" parentPath="RoleList" :rows="currentRows" @authCancel="handleAuthCancel"></user-authorization>
+  </div>
+</template>
+
+<script lang="ts">
+//JS
+import { ref, defineComponent, reactive, nextTick, inject } from 'vue'
+//hook
+import { useConfigData } from './useConfigData'
+import { INJECT_HTTP, HttpClient, MapObjectNoneType } from '../../../utils/global.types'
+import { message } from '@qqt-product/ui'
+
+import UserAuthorization from './components/userAuthorization'
+
+export default defineComponent({
+  name: 'QRoleList',
+  props: {
+    userInfo: {
+      type: Object,
+      defalut: () => {
+        return {}
+      },
+    },
+  },
+  components: {
+    UserAuthorization,
+  },
+  setup() {
+    //data-hook
+    const { userInformsFromShow, userInformsFrom, showEditPage, apiUrls, copyRoleShow, copyRoleFrom, itemRow, listLayoutRef } = useConfigData()
+    // const { userInfo } = toRefs(props)
+    const qHttp = inject(INJECT_HTTP) as HttpClient
+    const srmI18n = inject('Q_SRM_I18N', (i18nKey: string, defaultValue: string, account?: string | number): string => {
+      if (i18nKey) {
+        if (account) {
+          return account + defaultValue
+        }
+        return defaultValue
+      }
+      return defaultValue
+    })
+
+    const userInformsFromRules = ref({
+      roleName: [{ required: true, message: '请输入角色名称' }],
+      roleCode: [
+        { required: true, message: '请输入角色编码' },
+        {
+          // todo：异步校验
+          validator: async ({ itemValue }) => {
+            if (/[\u4E00-\u9FA5]/g.test(itemValue)) {
+              message.warn('角色编码不可输入汉字!')
+              return Promise.reject('角色编码不可输入汉字!')
+            } else {
+              if (userInformsFrom.value.id) {
+                return Promise.resolve()
+              } else {
+                const params = {
+                  tableName: 'els_role',
+                  fieldName: 'role_code',
+                  fieldVal: itemValue,
+                  dataId: copyRoleFrom.value.id,
+                }
+                const res = await qHttp.get({ url: '/base/duplicate/check', params })
+                if (res && res.success) {
+                  return Promise.resolve()
+                } else {
+                  message.warn(res.message)
+                  return Promise.reject(res.message)
+                }
+              }
+            }
+          },
+        },
+      ],
+    })
+    const showAuth = ref(false)
+    const currentRows = ref([])
+
+    const handleAuth = ({ row }: { row: never }) => {
+      showAuth.value = true
+      if (Array.isArray(row)) {
+        currentRows.value = [...row] as never
+      } else {
+        currentRows.value.push(row as never)
+      }
+    }
+
+    const handleAuthCancel = () => {
+      showAuth.value = false
+      currentRows.value = []
+    }
+
+    //data
+    const pageData = reactive({
+      statusConfig: {
+        show: false,
+      },
+      optionConfig: {
+        attrs: {},
+        extend: {},
+        options: [
+          { authorityCode: 'role#Role:edit', type: 'edit', title: '编辑', click: handleEdit },
+          { authorityCode: 'role#Role:copy', type: 'copy', title: '复制', click: handleCopy },
+          {
+            type: 'authorization',
+            title: '授权',
+            click: handleAuth,
+            authorityCode: 'role#Permissio:saveRolePermission',
+          },
+          {
+            authorityCode: 'role#Role:delete',
+            type: 'delete',
+            title: '删除',
+            args: {
+              url: apiUrls.value.delete,
+            },
+            disabled: allowDelete,
+          },
+          // { authorityCode: 'role#Role:userSet', type: 'usersList', title: srmI18n(`${getLangAccount()}#i18n_btn_jDER_36c46210`, '用户配置'), clickFn: this.handleUsersList },
+        ],
+      },
+      buttonConfig: {
+        attrs: {},
+        extend: {},
+        buttons: [
+          {
+            authorityCode: 'role#Role:add',
+            label: srmI18n('i18n_title_add', '新增'),
+            icon: {
+              type: 'icon-Q-add',
+            },
+            attrs: {
+              type: 'primary',
+            },
+            click: handleAdd,
+          },
+          {
+            label: srmI18n('i18n_title_listCustom', '列自定义'),
+            icon: {
+              type: 'icon-Q-setting',
+            },
+            type: 'setting',
+          },
+        ],
+      },
+      queryConfig: {
+        attrs: {},
+        extend: {},
+        form: [
+          {
+            type: 'input',
+            label: '角色名称',
+            fieldName: 'roleName',
+            placeholder: '请输入角色名称',
+          },
+        ],
+      },
+      pagerConfig: {},
+    })
+
+    //method
+    function handleCopy({ row = {} as MapObjectNoneType }) {
+      itemRow.value = row
+      nextTick(() => {
+        copyRoleShow.value = true
+      })
+    }
+
+    function allowDelete({ row = {} as MapObjectNoneType }) {
+      if (row.roleCode == 'companyAdmin' || row.roleCode == 'admin') {
+        return true
+      } else {
+        return false
+      }
+    }
+
+    function copyRolesubmitEvent() {
+      if (copyRoleFrom.value.roleName == '') {
+        message.warning('请输入角色名称')
+        return
+      }
+      if (copyRoleFrom.value.roleCode == '') {
+        message.warning('请输入角色编码')
+        return
+      }
+
+      let data = { id: itemRow.value.id, roleName: copyRoleFrom.value.roleName, roleCode: copyRoleFrom.value.roleCode }
+      listLayoutRef.value.loading = true
+      qHttp
+        .post({
+          url: apiUrls.value.copy,
+          data,
+        })
+        .then((res) => {
+          listLayoutRef.value.loading = false
+          if (res.success) {
+            listLayoutRef.value.fetchListData()
+            message.success(res.message)
+          } else {
+            message.warning(res.message)
+          }
+        })
+        .finally(() => {
+          itemRow.value = {}
+          copyRoleFrom.value = {}
+          copyRoleShow.value = false
+        })
+    }
+
+    function handleAdd() {
+      userInformsFrom.value = {}
+      nextTick(() => {
+        userInformsFromShow.value = true
+      })
+    }
+    function handleEdit({ row = {} as MapObjectNoneType }) {
+      userInformsFrom.value = { ...row }
+      nextTick(() => {
+        userInformsFromShow.value = true
+      })
+    }
+    function userInformFormEvent() {
+      let url = userInformsFrom.value.id ? '/account/role/edit' : '/account/role/add'
+      qHttp
+        .post({
+          url,
+          data: {
+            ...userInformsFrom.value,
+          },
+        })
+        .then((res) => {
+          listLayoutRef.value.loading = false
+          if (res.success) {
+            listLayoutRef.value.fetchListData()
+            message.success(res.message)
+            userInformsFrom.value = {}
+            userInformsFromShow.value = false
+          } else {
+            message.warning(res.message)
+          }
+        })
+    }
+
+    return {
+      userInformsFromRules,
+      userInformFormEvent,
+      userInformsFromShow,
+      userInformsFrom,
+      listLayoutRef,
+      copyRolesubmitEvent,
+      copyRoleFrom,
+      showEditPage,
+      apiUrls,
+      pageData,
+      copyRoleShow,
+      showAuth,
+      currentRows,
+      handleAuthCancel,
+    }
+  },
+})
+</script>

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

@@ -24,10 +24,5 @@ export function useConfigData() {
   const userInformsFrom = ref<MapObjectNoneType>({})
   const userInformsFromShow = shallowRef<boolean>(false)
 
-  const userInformsFromRules = ref({
-    roleName: [{ required: true, message: '请输入角色名称' }],
-    roleCode: [{ required: true, message: '请输入角色编码' }],
-  })
-
-  return { userInformsFromRules, userInformsFromShow, userInformsFrom, itemRow, copyRoleFrom, copyRoleShow, apiUrls, showEditPage, currentEditRow, listLayoutRef, uploadShow }
+  return { userInformsFromShow, userInformsFrom, itemRow, copyRoleFrom, copyRoleShow, apiUrls, showEditPage, currentEditRow, listLayoutRef, uploadShow }
 }