🔱: [client] sync upgrade with 12 commits [trident-sync]

refactor: 1.11.0
refactor: 1.11.0
refactor: 1.11.0
refactor: 1.11.0
refactor: ts化
refactor: ts化
feat: 全面TS化
perf: 全面ts化
refactor: 继续优化ts
perf: ts定义优化
fix: 修复wangeditor无法上传视频的bug

packages/ui/certd-client/src/views/sys/authority/permission/fs-permission-tree.vue

@@ -16,27 +16,19 @@
         <div class="node-title">{{ scope.title }}</div>
         <div v-if="editable === true" class="node-suffix">
           <fs-icon v-if="actions.add !== false" :icon="$fsui.icons.add" @click.stop="add(scope)" />
-          <fs-icon
-            v-if="actions.edit !== false && scope.id !== -1"
-            :icon="$fsui.icons.edit"
-            @click.stop="edit(scope)"
-          />
-          <fs-icon
-            v-if="actions.remove !== false && scope.id !== -1"
-            :icon="$fsui.icons.remove"
-            @click.stop="remove(scope)"
-          />
+          <fs-icon v-if="actions.edit !== false && scope.id !== -1" :icon="$fsui.icons.edit" @click.stop="edit(scope)" />
+          <fs-icon v-if="actions.remove !== false && scope.id !== -1" :icon="$fsui.icons.remove" @click.stop="remove(scope)" />
         </div>
       </div>
     </template>
   </a-tree>
 </template>
 
-<script>
+<script lang="ts">
+import { utils } from "@fast-crud/fast-crud";
 import _ from "lodash-es";
-import getEachDeep from "deepdash-es/getEachDeep";
-const eachDeep = getEachDeep(_);
-import { defineComponent, ref, computed } from "vue";
+import { computed, defineComponent, ref } from "vue";
+
 export default defineComponent({
   name: "FsPermissionTree",
   props: {
@@ -53,16 +45,16 @@ export default defineComponent({
     actions: {
       default: {}
     }
-  },
+  } as any,
   emits: ["add", "edit", "remove"],
-  setup(props, ctx) {
+  setup(props: any, ctx) {
     const treeRef = ref();
     const computedTree = computed(() => {
       if (props.tree == null) {
         return null;
       }
       const clone = _.cloneDeep(props.tree);
-      eachDeep(clone, (value, key, pNode, context) => {
+      utils.deepdash.forEachDeep(clone, (value: any, key: any, pNode: any, context: any) => {
         if (value == null) {
           return;
         }
@@ -102,16 +94,16 @@ export default defineComponent({
         }
       ];
     });
-    function add(scope) {
+    function add(scope: any) {
       ctx.emit("add", scope.dataRef);
     }
-    function edit(scope) {
+    function edit(scope: any) {
       ctx.emit("edit", scope.dataRef);
     }
-    function remove(scope) {
+    function remove(scope: any) {
       ctx.emit("remove", scope.dataRef);
     }
-    function onChecked(a, b, c) {
+    function onChecked(a: any, b: any, c: any) {
       console.log("chedcked", a, b, c);
     }
     function getChecked() {

packages/ui/certd-client/src/views/sys/authority/permission/index.vue

@@ -5,7 +5,7 @@
     </template>
     <fs-crud ref="crudRef" v-bind="crudBinding">
       <a-button v-permission="'sys:auth:per:add'" style="margin-left: 20px" @click="addHandle({})">
-        <fs-icon :icon="$fsui.icons.add"></fs-icon>
+        <fs-icon :icon="ui.icons.add"></fs-icon>
         添加</a-button
       >
       <fs-permission-tree class="permission-tree" :tree="crudBinding.data" :checkable="false" :actions="permission" @add="addHandle" @edit="editHandle" @remove="removeHandle"></fs-permission-tree>
@@ -14,46 +14,37 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, ref, onMounted } from "vue";
-import { useCrud, useExpose, CrudExpose, useUi } from "@fast-crud/fast-crud";
+import { defineComponent, onMounted, ref } from "vue";
 import createCrudOptions from "./crud.js";
 import FsPermissionTree from "./fs-permission-tree.vue";
 import { usePermission } from "/src/plugin/permission";
+import { useFs, useUi } from "@fast-crud/fast-crud";
+
 export default defineComponent({
   name: "AuthorityPermission",
   components: { FsPermissionTree },
   setup() {
-    // crud组件的ref
-    const crudRef = ref();
-    // crud 配置的ref
-    const crudBinding = ref();
-    // 暴露的方法
-    const { crudExpose } = useExpose({ crudRef, crudBinding });
-    // 你的crud配置
-    const { crudOptions } = createCrudOptions({ crudExpose });
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars,no-unused-vars
-    // 初始化crud配置
     // 此处传入permission进行通用按钮权限设置，会通过commonOptions去设置actionbar和rowHandle的按钮的show属性
     // 更多关于按钮权限的源代码设置，请参考 ./src/plugin/fast-crud/index.js （75-77行）
-    const { resetCrudOptions } = useCrud({ crudExpose, crudOptions, permission: "sys:auth:per" });
-    // 你可以调用此方法，重新初始化crud配置
-    // resetCrudOptions(options)
+    const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions, permission: "sys:auth:per" });
 
     // 页面打开后获取列表数据
     onMounted(async () => {
       await crudExpose.doRefresh();
     });
 
+    const { ui } = useUi();
+
     //用户业务代码
 
-    async function addHandle(item) {
-      await expose.openAdd({ initialForm: { parentId: item?.id ?? -1 } });
+    async function addHandle(item: any) {
+      await crudExpose.openAdd({ row: { parentId: item?.id ?? -1 } });
     }
-    async function editHandle(item) {
-      await expose.openEdit({ row: item });
+    async function editHandle(item: any) {
+      await crudExpose.openEdit({ row: item });
     }
-    async function removeHandle(item) {
-      await expose.doRemove({ row: { id: item.id } });
+    async function removeHandle(item: any) {
+      await crudExpose.doRemove({ row: { id: item.id }, index: null });
     }
 
     const { hasPermissions } = usePermission();
@@ -64,6 +55,7 @@ export default defineComponent({
     });
 
     return {
+      ui,
       crudBinding,
       crudRef,
       addHandle,

packages/ui/certd-client/src/views/sys/authority/role/api.ts

@@ -1,6 +1,6 @@
 import { request } from "/src/api/service";
 const apiPrefix = "/sys/authority/role";
-export async function GetList(query) {
+export async function GetList(query: any) {
   return request({
     url: apiPrefix + "/page",
     method: "post",
@@ -8,7 +8,7 @@ export async function GetList(query) {
   });
 }
 
-export async function AddObj(obj) {
+export async function AddObj(obj: any) {
   return request({
     url: apiPrefix + "/add",
     method: "post",
@@ -16,7 +16,7 @@ export async function AddObj(obj) {
   });
 }
 
-export async function UpdateObj(obj) {
+export async function UpdateObj(obj: any) {
   return request({
     url: apiPrefix + "/update",
     method: "post",
@@ -24,7 +24,7 @@ export async function UpdateObj(obj) {
   });
 }
 
-export async function DelObj(id) {
+export async function DelObj(id: any) {
   return request({
     url: apiPrefix + "/delete",
     method: "post",
@@ -32,7 +32,7 @@ export async function DelObj(id) {
   });
 }
 
-export async function GetObj(id) {
+export async function GetObj(id: any) {
   return request({
     url: apiPrefix + "/info",
     method: "post",
@@ -46,7 +46,7 @@ export async function GetObj(id) {
  * @returns {*}
  * @constructor
  */
-export function getPermissionIds(roleId) {
+export function getPermissionIds(roleId: any) {
   return request({
     url: apiPrefix + "/getPermissionIds",
     method: "post",
@@ -61,7 +61,7 @@ export function getPermissionIds(roleId) {
  * @returns {*}
  * @constructor
  */
-export function DoAuthz(roleId, permissionIds) {
+export function DoAuthz(roleId: any, permissionIds: any) {
   return request({
     url: apiPrefix + "/authz",
     method: "post",

packages/ui/certd-client/src/views/sys/authority/role/crud.tsx

@@ -1,17 +1,19 @@
 import * as api from "./api";
-export default function ({ expose, authz }) {
-  const pageRequest = async (query) => {
+import { AddReq, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq, EditReq, UserPageQuery, UserPageRes } from "@fast-crud/fast-crud";
+
+export default function ({ crudExpose, authz }: CreateCrudOptionsProps): CreateCrudOptionsRet {
+  const pageRequest = async (query: UserPageQuery): Promise<UserPageRes> => {
     return await api.GetList(query);
   };
-  const editRequest = async ({ form, row }) => {
+  const editRequest = async ({ form, row }: EditReq) => {
     form.id = row.id;
     return await api.UpdateObj(form);
   };
-  const delRequest = async ({ row }) => {
+  const delRequest = async ({ row }: DelReq) => {
     return await api.DelObj(row.id);
   };
 
-  const addRequest = async ({ form }) => {
+  const addRequest = async ({ form }: AddReq) => {
     return await api.AddObj(form);
   };
   return {
@@ -37,6 +39,7 @@ export default function ({ expose, authz }) {
       columns: {
         id: {
           title: "id",
+          type: "text",
           form: { show: false }, // 表单配置
           column: {
             width: 70,

packages/ui/certd-client/src/views/sys/authority/role/index.vue

@@ -5,27 +5,21 @@
     </template>
     <fs-crud ref="crudRef" v-bind="crudBinding" />
     <a-modal v-model:visible="authzDialogVisible" width="860px" title="分配权限" @ok="updatePermission">
-      <fs-permission-tree
-        ref="permissionTreeRef"
-        v-model:checkedKeys="checkedKeys"
-        :tree="permissionTreeData"
-        :editable="false"
-        checkable
-        :replace-fields="{ key: 'id', label: 'title' }"
-      >
-      </fs-permission-tree>
+      <fs-permission-tree ref="permissionTreeRef" v-model:checkedKeys="checkedKeys" :tree="permissionTreeData" :editable="false" checkable :replace-fields="{ key: 'id', label: 'title' }"> </fs-permission-tree>
     </a-modal>
   </fs-page>
 </template>
 
-<script>
-import { defineComponent, ref, onMounted } from "vue";
-import { useCrud, useExpose } from "@fast-crud/fast-crud";
+<script lang="ts">
+import {defineComponent, onMounted, ref} from "vue";
+import {useFs} from "@fast-crud/fast-crud";
 import createCrudOptions from "./crud";
 import * as permissionApi from "../permission/api";
 import * as api from "./api";
-import { message } from "ant-design-vue";
+import {message} from "ant-design-vue";
 import FsPermissionTree from "../permission/fs-permission-tree.vue";
+import {UseCrudPermissionCompProps, UseCrudPermissionExtraProps} from "/@/plugin/permission";
+
 function useAuthz() {
   const checkedKeys = ref();
 
@@ -38,7 +32,7 @@ function useAuthz() {
 
   // 如果勾选节点中存在非叶子节点，tree组件会将其所有子节点全部勾选
   // 所以要找出所有叶子节点，仅勾选叶子节点，tree组件会将父节点同步勾选
-  function getAllCheckedLeafNodeId(tree, checkedIds, temp) {
+  function getAllCheckedLeafNodeId(tree: any, checkedIds: any, temp: any) {
     for (let i = 0; i < tree.length; i++) {
       const item = tree[i];
       if (item.children && item.children.length !== 0) {
@@ -54,7 +48,7 @@ function useAuthz() {
   function authzClose() {
     authzDialogVisible.value = false;
   }
-  async function authzOpen(roleId) {
+  async function authzOpen(roleId: any) {
     permissionTreeData.value = await permissionApi.GetTree();
     checkedKeys.value = [];
     currentRoleId.value = roleId;
@@ -62,7 +56,7 @@ function useAuthz() {
     await updateChecked(roleId);
     authzDialogVisible.value = true;
   }
-  async function updateChecked(roleId) {
+  async function updateChecked(roleId: any) {
     let checkedIds = await api.getPermissionIds(roleId);
     // 找出所有的叶子节点
     checkedIds = getAllCheckedLeafNodeId(permissionTreeData.value, checkedIds, []);
@@ -95,32 +89,23 @@ export default defineComponent({
   setup() {
     //授权配置
     const authz = useAuthz();
-
-    // crud组件的ref
-    const crudRef = ref();
-    // crud 配置的ref
-    const crudBinding = ref();
-    // 暴露的方法
-    const { expose } = useExpose({ crudRef, crudBinding });
-    // 你的crud配置
-    const { crudOptions } = createCrudOptions({ expose, authz });
-    // 初始化crud配置
-    // 此处传入permission进行通用按钮权限设置，会通过commonOptions去设置actionbar和rowHandle的按钮的show属性
-    // 更多关于按钮权限的源代码设置，请参考 ./src/plugin/fast-crud/index.js （75-77行）
-    const permission = {
+    const permission: UseCrudPermissionCompProps = {
       prefix: "sys:auth:role", //权限代码前缀
-      extra: ({ hasActionPermission }) => {
+      extra: ({ hasActionPermission }: UseCrudPermissionExtraProps): any => {
         //额外按钮权限控制
         return { rowHandle: { buttons: { authz: { show: hasActionPermission("authz") } } } };
       }
     };
-    const { resetCrudOptions } = useCrud({ expose, crudOptions, permission });
-    // 你可以调用此方法，重新初始化crud配置
-    // resetCrudOptions(options)
+
+    // 初始化crud配置
+    // 此处传入permission进行通用按钮权限设置，会通过commonOptions去设置actionbar和rowHandle的按钮的show属性
+    // 更多关于按钮权限的源代码设置，请参考 ./src/plugin/fast-crud/index.js （75-77行）
+
+    const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions, authz, permission });
 
     // 页面打开后获取列表数据
     onMounted(() => {
-      expose.doRefresh();
+      crudExpose.doRefresh();
     });
 
     return {

packages/ui/certd-client/src/views/sys/authority/user/api.ts

@@ -1,6 +1,6 @@
 import { request } from "/src/api/service";
 const apiPrefix = "/sys/authority/user";
-export async function GetList(query) {
+export async function GetList(query: any) {
   return request({
     url: apiPrefix + "/page",
     method: "post",
@@ -8,7 +8,7 @@ export async function GetList(query) {
   });
 }
 
-export async function AddObj(obj) {
+export async function AddObj(obj: any) {
   return request({
     url: apiPrefix + "/add",
     method: "post",
@@ -16,7 +16,7 @@ export async function AddObj(obj) {
   });
 }
 
-export async function UpdateObj(obj) {
+export async function UpdateObj(obj: any) {
   return request({
     url: apiPrefix + "/update",
     method: "post",
@@ -24,7 +24,7 @@ export async function UpdateObj(obj) {
   });
 }
 
-export async function DelObj(id) {
+export async function DelObj(id: any) {
   return request({
     url: apiPrefix + "/delete",
     method: "post",
@@ -32,7 +32,7 @@ export async function DelObj(id) {
   });
 }
 
-export async function GetObj(id) {
+export async function GetObj(id: any) {
   return request({
     url: apiPrefix + "/info",
     method: "post",

packages/ui/certd-client/src/views/sys/authority/user/crud.tsx

@@ -1,20 +1,22 @@
 import * as api from "./api";
-import { dict } from "@fast-crud/fast-crud";
-export default function ({ expose }) {
-  const pageRequest = async (query) => {
+import { AddReq, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq, dict, EditReq, UserPageQuery, UserPageRes } from "@fast-crud/fast-crud";
+
+export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOptionsRet {
+  const pageRequest = async (query: UserPageQuery): Promise<UserPageRes> => {
     return await api.GetList(query);
   };
-  const editRequest = async ({ form, row }) => {
+  const editRequest = async ({ form, row }: EditReq) => {
     form.id = row.id;
     return await api.UpdateObj(form);
   };
-  const delRequest = async ({ row }) => {
+  const delRequest = async ({ row }: DelReq) => {
     return await api.DelObj(row.id);
   };
 
-  const addRequest = async ({ form }) => {
+  const addRequest = async ({ form }: AddReq) => {
     return await api.AddObj(form);
   };
+
   return {
     crudOptions: {
       request: {
@@ -35,6 +37,7 @@ export default function ({ expose }) {
       columns: {
         id: {
           title: "id",
+          type: "text",
           form: { show: false }, // 表单配置
           column: {
             width: 70,

packages/ui/certd-client/src/views/sys/authority/user/index.vue

@@ -7,33 +7,21 @@
   </fs-page>
 </template>
 
-<script>
+<script lang="ts">
 import { defineComponent, ref, onMounted } from "vue";
-import { useCrud, useExpose } from "@fast-crud/fast-crud";
+import { useCrud, useExpose, useFs } from "@fast-crud/fast-crud";
 import createCrudOptions from "./crud";
 export default defineComponent({
   name: "AuthorityUser",
   setup() {
-    // crud组件的ref
-    const crudRef = ref();
-    // crud 配置的ref
-    const crudBinding = ref();
-    // 暴露的方法
-    const { expose } = useExpose({ crudRef, crudBinding });
-    // 你的crud配置
-    const { crudOptions } = createCrudOptions({ expose });
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars,no-unused-vars
-
     // 初始化crud配置
     // 此处传入权限前缀进行通用按钮权限设置，会通过commonOptions去设置actionbar和rowHandle的按钮的show属性
     // 更多关于按钮权限的源代码设置，请参考 ./src/plugin/fast-crud/index.js （75-77行）
-    const { resetCrudOptions } = useCrud({ expose, crudOptions, permission: "sys:auth:user" });
-    // 你可以调用此方法，重新初始化crud配置
-    // resetCrudOptions(options)
+    const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions, permission: "sys:auth:user" });
 
     // 页面打开后获取列表数据
     onMounted(() => {
-      expose.doRefresh();
+      crudExpose.doRefresh();
     });
 
     return {