feat: 整体pure，核心功能对接完成

2024-09-05 23:10:40 +08:00
parent 4ed44a2a8f
commit 3339e30014
31 changed files with 459 additions and 535 deletions
--- a/Yi.Pure.Vue3/src/views/system/menu/form.vue
+++ b/Yi.Pure.Vue3/src/views/system/menu/form.vue
@@ -59,7 +59,6 @@ defineExpose({ getRef });
          <Segmented
            v-model="newFormInline.menuType"
            :options="menuTypeOptions"
-            @change="changeSegmented"
          />
        </el-form-item>
      </re-col>
--- a/Yi.Pure.Vue3/src/views/system/menu/utils/hook.tsx
+++ b/Yi.Pure.Vue3/src/views/system/menu/utils/hook.tsx
@@ -1,7 +1,13 @@
 import editForm from "../form.vue";
 import { handleTree } from "@/utils/tree";
 import { message } from "@/utils/message";
-import {addMenu, delMenu, getListMenu, getMenu, updateMenu} from "@/api/system/menu";
+import {
+  addMenu,
+  delMenu,
+  getListMenu,
+  getMenu,
+  updateMenu
+} from "@/api/system/menu";
 import { transformI18n } from "@/plugins/i18n";
 import { addDialog } from "@/components/ReDialog";
 import { reactive, ref, onMounted, h } from "vue";
--- a/Yi.Pure.Vue3/src/views/system/post/index.vue
+++ b/Yi.Pure.Vue3/src/views/system/post/index.vue
@@ -48,27 +48,15 @@ const treeHeight = ref();
 const {
  form,
  isShow,
-  curRow,
  loading,
  columns,
  rowStyle,
  dataList,
-  treeData,
-  treeProps,
-  isLinkage,
  pagination,
-  isExpandAll,
-  isSelectAll,
-  treeSearchValue,
  onSearch,
  resetForm,
  openDialog,
-  handleMenu,
-  handleSave,
  handleDelete,
-  filterMethod,
-  transformI18n,
-  onQueryChanged,
  handleSizeChange,
  handleCurrentChange,
  handleSelectionChange
@@ -209,69 +197,6 @@ onMounted(() => {
          </pure-table>
        </template>
      </PureTableBar>
-
-      <div
-        v-if="isShow"
-        class="!min-w-[calc(100vw-60vw-268px)] w-full mt-2 px-2 pb-2 bg-bg_color ml-2 overflow-auto"
-      >
-        <div class="flex justify-between w-full px-3 pt-5 pb-4">
-          <div class="flex">
-            <span :class="iconClass">
-              <IconifyIconOffline
-                v-tippy="{
-                  content: '关闭'
-                }"
-                class="dark:text-white"
-                width="18px"
-                height="18px"
-                :icon="Close"
-                @click="handleMenu"
-              />
-            </span>
-            <span :class="[iconClass, 'ml-2']">
-              <IconifyIconOffline
-                v-tippy="{
-                  content: '保存菜单权限'
-                }"
-                class="dark:text-white"
-                width="18px"
-                height="18px"
-                :icon="Check"
-                @click="handleSave"
-              />
-            </span>
-          </div>
-          <p class="font-bold truncate">
-            菜单权限
-            {{ `${curRow?.name ? `（${curRow.name}）` : ""}` }}
-          </p>
-        </div>
-        <el-input
-          v-model="treeSearchValue"
-          placeholder="请输入菜单进行搜索"
-          class="mb-1"
-          clearable
-          @input="onQueryChanged"
-        />
-        <div class="flex flex-wrap">
-          <el-checkbox v-model="isExpandAll" label="展开/折叠" />
-          <el-checkbox v-model="isSelectAll" label="全选/全不选" />
-          <el-checkbox v-model="isLinkage" label="父子联动" />
-        </div>
-        <el-tree-v2
-          ref="treeRef"
-          show-checkbox
-          :data="treeData"
-          :props="treeProps"
-          :height="treeHeight"
-          :check-strictly="!isLinkage"
-          :filter-method="filterMethod"
-        >
-          <template #default="{ node }">
-            <span>{{ transformI18n(node.label) }}</span>
-          </template>
-        </el-tree-v2>
-      </div>
    </div>
  </div>
 </template>
--- a/Yi.Pure.Vue3/src/views/system/post/utils/hook.tsx
+++ b/Yi.Pure.Vue3/src/views/system/post/utils/hook.tsx
@@ -1,13 +1,13 @@
 import dayjs from "dayjs";
 import editForm from "../form.vue";
-import {message} from "@/utils/message";
-import {ElMessageBox} from "element-plus";
-import {usePublicHooks} from "../../hooks";
-import {transformI18n} from "@/plugins/i18n";
-import {addDialog} from "@/components/ReDialog";
-import type {FormItemProps} from "../utils/types";
-import type {PaginationProps} from "@pureadmin/table";
-import {getKeyList, deviceDetection} from "@pureadmin/utils";
+import { message } from "@/utils/message";
+import { ElMessageBox } from "element-plus";
+import { usePublicHooks } from "../../hooks";
+import { transformI18n } from "@/plugins/i18n";
+import { addDialog } from "@/components/ReDialog";
+import type { FormItemProps } from "../utils/types";
+import type { PaginationProps } from "@pureadmin/table";
+import { deviceDetection } from "@pureadmin/utils";
 import {
  getPostList,
  addPost,
@@ -15,20 +15,11 @@ import {
  delPost,
  getPost,
  updatePostStatus
-} from "@/api/system/post"
+} from "@/api/system/post";

-import {
-  type Ref,
-  reactive,
-  ref,
-  onMounted,
-  h,
-  toRaw,
-  watch,
-  nextTick
-} from "vue";
+import { reactive, ref, onMounted, h, toRaw } from "vue";

-export function usePost(treeRef: Ref) {
+export function usePost() {
  const form = reactive({
    postName: "",
    postCode: "",
@@ -39,7 +30,6 @@ export function usePost(treeRef: Ref) {
  const curRow = ref();
  const formRef = ref();
  const dataList = ref([]);
-  const treeIds = ref([]);
  const treeData = ref([]);
  const isShow = ref(false);
  const loading = ref(true);
@@ -48,7 +38,7 @@ export function usePost(treeRef: Ref) {
  const switchLoadMap = ref({});
  const isExpandAll = ref(false);
  const isSelectAll = ref(false);
-  const {switchStyle} = usePublicHooks();
+  const { switchStyle } = usePublicHooks();
  const pagination = reactive<PaginationProps>({
    total: 0,
    pageSize: 10,
@@ -86,7 +76,7 @@ export function usePost(treeRef: Ref) {
      ),
      minWidth: 90
    },
-    {label:"排序",prop:"orderNum"},
+    { label: "排序", prop: "orderNum" },
    {
      label: "备注",
      prop: "remark",
@@ -96,7 +86,7 @@ export function usePost(treeRef: Ref) {
      label: "创建时间",
      prop: "creationTime",
      minWidth: 160,
-      formatter: ({creationTime}) =>
+      formatter: ({ creationTime }) =>
        dayjs(creationTime).format("YYYY-MM-DD HH:mm:ss")
    },
    {
@@ -107,7 +97,7 @@ export function usePost(treeRef: Ref) {
    }
  ];

-  async function onChange({row, index}) {
+  async function onChange({ row, index }) {
    ElMessageBox.confirm(
      `确认要<strong>${
        row.state === false ? "停用" : "启用"
@@ -152,7 +142,7 @@ export function usePost(treeRef: Ref) {

  async function handleDelete(row) {
    await delPost([row.id]);
-    message(`您删除了角色名称为${row.roleName}的这条数据`, {type: "success"});
+    message(`您删除了角色名称为${row.roleName}的这条数据`, { type: "success" });
    onSearch();
  }

@@ -172,7 +162,7 @@ export function usePost(treeRef: Ref) {

  async function onSearch() {
    loading.value = true;
-    const {data} = await getPostList(toRaw(form));
+    const { data } = await getPostList(toRaw(form));
    dataList.value = data.items;
    pagination.total = data.totalCount;
    loading.value = false;
@@ -196,7 +186,7 @@ export function usePost(treeRef: Ref) {
          postName: row?.postName ?? "",
          postCode: row?.postCode ?? "",
          remark: row?.remark ?? "",
-          orderNum: data?.orderNum ?? 0,
+          orderNum: data?.orderNum ?? 0
        }
      },
      width: "40%",
@@ -204,8 +194,8 @@ export function usePost(treeRef: Ref) {
      fullscreen: deviceDetection(),
      fullscreenIcon: true,
      closeOnClickModal: false,
-      contentRenderer: () => h(editForm, {ref: formRef}),
-      beforeSure: (done, {options}) => {
+      contentRenderer: () => h(editForm, { ref: formRef }),
+      beforeSure: (done, { options }) => {
        const FormRef = formRef.value.getRef();
        const curData = options.props.formInline as FormItemProps;

@@ -236,7 +226,7 @@ export function usePost(treeRef: Ref) {
  }

  /** 高亮当前权限选中行 */
-  function rowStyle({row: {id}}) {
+  function rowStyle({ row: { id } }) {
    return {
      cursor: "pointer",
      background: id === curRow.value?.id ? "var(--el-fill-color-light)" : ""
@@ -244,11 +234,7 @@ export function usePost(treeRef: Ref) {
  }

  /** 数据权限 可自行开发 */
-    // function handleDatabase() {}
-
-  const onQueryChanged = (query: string) => {
-      treeRef.value!.filter(query);
-    };
+  // function handleDatabase() {}

  const filterMethod = (query: string, node) => {
    return transformI18n(node.title)!.includes(query);
@@ -258,18 +244,6 @@ export function usePost(treeRef: Ref) {
    onSearch();
  });

-  watch(isExpandAll, val => {
-    val
-      ? treeRef.value.setExpandedKeys(treeIds.value)
-      : treeRef.value.setExpandedKeys([]);
-  });
-
-  watch(isSelectAll, val => {
-    val
-      ? treeRef.value.setCheckedKeys(treeIds.value)
-      : treeRef.value.setCheckedKeys([]);
-  });
-
  return {
    form,
    isShow,
@@ -290,7 +264,6 @@ export function usePost(treeRef: Ref) {
    handleDelete,
    filterMethod,
    transformI18n,
-    onQueryChanged,
    handleSizeChange,
    handleCurrentChange,
    handleSelectionChange
--- a/Yi.Pure.Vue3/src/views/system/post/utils/types.ts
+++ b/Yi.Pure.Vue3/src/views/system/post/utils/types.ts
@@ -9,7 +9,6 @@ interface FormItemProps {
  /** 备注 */
  remark: string;
  orderNum: number;
-
 }
 interface FormProps {
  formInline: FormItemProps;
--- a/Yi.Pure.Vue3/src/views/system/role/utils/hook.tsx
+++ b/Yi.Pure.Vue3/src/views/system/role/utils/hook.tsx
@@ -16,8 +16,7 @@ import {
  updateRole,
  changeRoleStatus,
  delRole,
-  getRoleMenuSelect,
-  updataDataScope
+  getRoleMenuSelect
 } from "@/api/system/role";
 import { getMenuOption } from "@/api/system/menu";

--- a/Yi.Pure.Vue3/src/views/system/user/index.vue
+++ b/Yi.Pure.Vue3/src/views/system/user/index.vue
@@ -6,7 +6,6 @@ import { PureTableBar } from "@/components/RePureTableBar";
 import { useRenderIcon } from "@/components/ReIcon/src/hooks";

 import Upload from "@iconify-icons/ri/upload-line";
-import Role from "@iconify-icons/ri/admin-line";
 import Password from "@iconify-icons/ri/lock-password-line";
 import More from "@iconify-icons/ep/more-filled";
 import Delete from "@iconify-icons/ep/delete";
--- a/Yi.Pure.Vue3/src/views/system/user/utils/hook.tsx
+++ b/Yi.Pure.Vue3/src/views/system/user/utils/hook.tsx
@@ -1,16 +1,16 @@
 import "./reset.css";
 import dayjs from "dayjs";
 import editForm from "../form/index.vue";
-import {zxcvbn} from "@zxcvbn-ts/core";
-import {handleTree} from "@/utils/tree";
-import {message} from "@/utils/message";
+import { zxcvbn } from "@zxcvbn-ts/core";
+import { handleTree } from "@/utils/tree";
+import { message } from "@/utils/message";
 import userAvatar from "@/assets/user.jpg";
-import {getFileUrl} from "@/utils/file"
-import {usePublicHooks} from "../../hooks";
-import {addDialog} from "@/components/ReDialog";
-import type {PaginationProps} from "@pureadmin/table";
+import { getFileUrl } from "@/utils/file";
+import { usePublicHooks } from "../../hooks";
+import { addDialog } from "@/components/ReDialog";
+import type { PaginationProps } from "@pureadmin/table";
 import ReCropperPreview from "@/components/ReCropperPreview";
-import type {FormItemProps} from "../utils/types";
+import type { FormItemProps } from "../utils/types";
 import {
  getKeyList,
  isAllEmpty,
@@ -26,8 +26,8 @@ import {
  updateUser,
  getUserList
 } from "@/api/system/user";
-import {getRoleOption} from "@/api/system/role";
-import {getDeptList} from "@/api/system/dept";
+import { getRoleOption } from "@/api/system/role";
+import { getDeptList } from "@/api/system/dept";
 import {
  ElForm,
  ElInput,
@@ -63,7 +63,7 @@ export function useUser(tableRef: Ref, treeRef: Ref) {
  // 上传头像信息
  const avatarInfo = ref();
  const switchLoadMap = ref({});
-  const {switchStyle} = usePublicHooks();
+  const { switchStyle } = usePublicHooks();
  const higherDeptOptions = ref();
  const treeData = ref([]);
  const treeLoading = ref(true);
@@ -89,12 +89,12 @@ export function useUser(tableRef: Ref, treeRef: Ref) {
    {
      label: "用户头像",
      prop: "avatar",
-      cellRenderer: ({row}) => (
+      cellRenderer: ({ row }) => (
        <el-image
          fit="cover"
          preview-teleported={true}
          src={getFileUrl(row.avatar, userAvatar)}
-          preview-src-list={Array.of(getFileUrl(row.avatar , userAvatar))}
+          preview-src-list={Array.of(getFileUrl(row.avatar, userAvatar))}
          class="w-[24px] h-[24px] rounded-full align-middle"
        />
      ),
@@ -114,7 +114,7 @@ export function useUser(tableRef: Ref, treeRef: Ref) {
      label: "性别",
      prop: "sex",
      minWidth: 90,
-      cellRenderer: ({row, props}) => (
+      cellRenderer: ({ row, props }) => (
        <el-tag
          size={props.size}
          type={row.sex === "Woman" ? "danger" : null}
@@ -133,8 +133,8 @@ export function useUser(tableRef: Ref, treeRef: Ref) {
      label: "手机号码",
      prop: "phone",
      minWidth: 90,
-      formatter: ({phone}) =>
-        phone == null ? "-" : hideTextAtIndex(phone, {start: 3, end: 6})
+      formatter: ({ phone }) =>
+        phone == null ? "-" : hideTextAtIndex(phone, { start: 3, end: 6 })
    },
    {
      label: "状态",
@@ -159,7 +159,7 @@ export function useUser(tableRef: Ref, treeRef: Ref) {
      label: "创建时间",
      minWidth: 90,
      prop: "creationTime",
-      formatter: ({creationTime}) =>
+      formatter: ({ creationTime }) =>
        dayjs(creationTime).format("YYYY-MM-DD HH:mm:ss")
    },
    {
@@ -183,17 +183,17 @@ export function useUser(tableRef: Ref, treeRef: Ref) {
    password: ""
  });
  const pwdProgress = [
-    {color: "#e74242", text: "非常弱"},
-    {color: "#EFBD47", text: "弱"},
-    {color: "#ffa500", text: "一般"},
-    {color: "#1bbf1b", text: "强"},
-    {color: "#008000", text: "非常强"}
+    { color: "#e74242", text: "非常弱" },
+    { color: "#EFBD47", text: "弱" },
+    { color: "#ffa500", text: "一般" },
+    { color: "#1bbf1b", text: "强" },
+    { color: "#008000", text: "非常强" }
  ];
  // 当前密码强度（0-4）
  const curScore = ref();
  const roleOptions = ref([]);

-  function onChange({row, index}) {
+  function onChange({ row, index }) {
    ElMessageBox.confirm(
      `确认要<strong>${
        row.state === 0 ? "停用" : "启用"
@@ -242,7 +242,7 @@ export function useUser(tableRef: Ref, treeRef: Ref) {

  async function handleDelete(row) {
    await delUser([row.id]);
-    message(`您删除了用户编号为${row.id}的这条数据`, {type: "success"});
+    message(`您删除了用户编号为${row.id}的这条数据`, { type: "success" });
    onSearch();
  }

@@ -286,7 +286,7 @@ export function useUser(tableRef: Ref, treeRef: Ref) {

  async function onSearch() {
    loading.value = true;
-    const {data} = await getUserList(toRaw(form));
+    const { data } = await getUserList(toRaw(form));
    dataList.value = data.items;
    pagination.total = data.totalCount;
    // pagination.pageSize = data.pageSize;
@@ -305,7 +305,7 @@ export function useUser(tableRef: Ref, treeRef: Ref) {
    onSearch();
  };

-  function onTreeSelect({id, selected}) {
+  function onTreeSelect({ id, selected }) {
    form.deptId = selected ? id : "";
    onSearch();
  }
@@ -353,8 +353,8 @@ export function useUser(tableRef: Ref, treeRef: Ref) {
      fullscreen: deviceDetection(),
      fullscreenIcon: true,
      closeOnClickModal: false,
-      contentRenderer: () => h(editForm, {ref: formRef}),
-      beforeSure: (done, {options}) => {
+      contentRenderer: () => h(editForm, { ref: formRef }),
+      beforeSure: (done, { options }) => {
        const FormRef = formRef.value.getRef();
        const curData = options.props.formInline as FormItemProps;

@@ -411,7 +411,7 @@ export function useUser(tableRef: Ref, treeRef: Ref) {

  watch(
    pwdForm,
-    ({password}) =>
+    ({ password }) =>
      (curScore.value = isAllEmpty(password) ? -1 : zxcvbn(password).score)
  );

@@ -446,10 +446,10 @@ export function useUser(tableRef: Ref, treeRef: Ref) {
            </ElFormItem>
          </ElForm>
          <div class="mt-4 flex">
-            {pwdProgress.map(({color, text}, idx) => (
+            {pwdProgress.map(({ color, text }, idx) => (
              <div
                class="w-[19vw]"
-                style={{marginLeft: idx !== 0 ? "4px" : 0}}
+                style={{ marginLeft: idx !== 0 ? "4px" : 0 }}
              >
                <ElProgress
                  striped
@@ -462,7 +462,7 @@ export function useUser(tableRef: Ref, treeRef: Ref) {
                />
                <p
                  class="text-center"
-                  style={{color: curScore.value === idx ? color : ""}}
+                  style={{ color: curScore.value === idx ? color : "" }}
                >
                  {text}
                </p>
@@ -494,7 +494,7 @@ export function useUser(tableRef: Ref, treeRef: Ref) {
    onSearch();

    // 归属部门
-    const {data} = await getDeptList();
+    const { data } = await getDeptList();
    higherDeptOptions.value = handleTree(data.items);
    treeData.value = handleTree(data.items);
    treeLoading.value = false;