修改弹窗

src/components/BasicForm/src/types.ts

@@ -63,10 +63,10 @@ export const basicFormProps = {
   colLayout: {
     type: Object,
     default: () => ({
-      xl: 6,
-      lg: 8,
-      md: 12,
-      sm: 24,
+      xl: 4,
+      lg: 6,
+      md: 8,
+      sm: 12,
       xs: 24
     })
   },

src/components/PageAuth/src/page-auth.tsx

@@ -30,7 +30,7 @@ const PageAuth = defineComponent({
 
     return () =>
       hasPermissionWithCode("001") ? (
-        <div class={classes.value}>{slots.default && slots.default()}</div>
+        <div>{slots.default && slots.default()}</div>
       ) : (
         <NoAuth />
       );

src/components/PageContent/src/actions/action-changePwd.tsx

@@ -1,10 +1,8 @@
 import { defineComponent } from "vue";
-import { actionProps } from "../types";
 import { useRenderIcon } from "/@/components/ReIcon/src/hooks";
 
 const ActionChangePwd = defineComponent({
   name: "ActionChangePwd",
-  props: actionProps,
   emits: ["changePwd"],
   setup(_, { emit }) {
     return () => (
@@ -12,6 +10,7 @@ const ActionChangePwd = defineComponent({
         class="reset-margin"
         onClick={() => emit("changePwd")}
         link
+        size="small"
         type="primary"
         icon={useRenderIcon("lock")}
       />

src/components/PageContent/src/actions/action-delete.tsx

@@ -46,6 +46,7 @@ const ActionDelete = defineComponent({
             <el-button
               class="reset-margin"
               link
+              size="small"
               type="primary"
               icon={useRenderIcon("delete")}
             />

src/components/PageContent/src/actions/action-log.tsx

@@ -1,10 +1,8 @@
 import { defineComponent } from "vue";
-import { actionProps } from "../types";
 import { useRenderIcon } from "/@/components/ReIcon/src/hooks";
 
 const ActionLog = defineComponent({
   name: "ActionLog",
-  props: actionProps,
   emits: ["log"],
   setup(_, { emit }) {
     return () => (
@@ -12,6 +10,7 @@ const ActionLog = defineComponent({
         class="reset-margin"
         onClick={() => emit("log")}
         link
+        size="small"
         type="primary"
         icon={useRenderIcon("tickets")}
       />

src/components/PageContent/src/actions/action-preview.tsx

@@ -14,6 +14,7 @@ const ActionPreview = defineComponent({
       <el-button
         class="reset-margin"
         link
+        size="small"
         type="primary"
         onClick={() => emit("preview")}
         icon={useRenderIcon(props.isInv ? "scaletooriginal" : "eye-view")}

src/components/PageContent/src/actions/action-resetPwd.tsx

@@ -12,9 +12,6 @@ const ActionDelete = defineComponent({
     },
     prop: {
       type: String
-    },
-    delTooltip: {
-      type: String
     }
   },
   emits: ["resetPwd"],
@@ -27,7 +24,7 @@ const ActionDelete = defineComponent({
 
     return () => (
       <el-popconfirm
-        title={props.delTooltip || "是否确认重置"}
+        title={"是否确认重置"}
         placement="top"
         onConfirm={handleResetPwd}
         v-slots={{
@@ -35,6 +32,7 @@ const ActionDelete = defineComponent({
             <el-button
               class="reset-margin"
               link
+              size="small"
               type="primary"
               icon={useRenderIcon("delete")}
             />

src/components/PageContent/src/actions/action-status.tsx

@@ -47,6 +47,7 @@ const ActionStatus = defineComponent({
             <el-button
               class="reset-margin"
               link
+              size="small"
               type="primary"
               icon={useRenderIcon(
                 props.row.status === "1"

src/components/PageContent/src/actions/action-update.tsx

@@ -1,10 +1,8 @@
 import { defineComponent } from "vue";
-import { actionProps } from "../types";
 import { useRenderIcon } from "/@/components/ReIcon/src/hooks";
 
 const ActionUpdate = defineComponent({
   name: "ActionUpdate",
-  props: actionProps,
   emits: ["update"],
   setup(_, { emit }) {
     return () => (
@@ -12,6 +10,7 @@ const ActionUpdate = defineComponent({
         class="reset-margin"
         onClick={() => emit("update")}
         link
+        size="small"
         type="primary"
         icon={useRenderIcon("edits")}
       />

src/components/PageContent/src/page-content.tsx

@@ -6,7 +6,6 @@ import { createActionProps, createOperation } from "./utils/create-operation";
 import { useRequeset } from "./hooks/use-request";
 import { Operation } from "./actions";
 import { useSelection } from "./hooks/use-selection";
-import { POWERS } from "/@/config/status";
 // import {
 //   ElButton,
 //   ElButtonGroup,
@@ -18,7 +17,6 @@ import { POWERS } from "/@/config/status";
 import { useColumns } from "./hooks/use-columns";
 // import { useRenderIcon } from "../../ReIcon/src/hooks";
 import "./styles/index.scss";
-const powers = POWERS;
 const PageConent = defineComponent({
   name: "PageContent",
   props: pageContentProps,
@@ -65,16 +63,11 @@ const PageConent = defineComponent({
      * 渲染需要的操作按钮
      */
     function renderOperation(row) {
-      const {
-        contentConfig
-        // , powers
-      } = props;
+      const { contentConfig, powers } = props;
       const {
         inv,
         apis,
         notPreview,
-        notLog,
-        delTooltip,
         showPreview,
         showDelete,
         isRequesetArray
@@ -94,7 +87,7 @@ const PageConent = defineComponent({
 
           {slots.custom && slots.custom(row)}
 
-          {action.update && powers.some(i => i == "005") && (
+          {powers.some(i => i == "005") && (
             <Operation.Update
               onUpdate={() => emit("updateBtnClick", row)}
               {...createActionProps("update", apis)}
@@ -117,16 +110,13 @@ const PageConent = defineComponent({
             <Operation.Delete
               row={row}
               prop={contentConfig.deleteProp}
-              delTooltip={delTooltip}
               onReload={() => onSearch()}
               {...createActionProps("delete", apis)}
             />
           )}
-          {action.changePwd && powers.some(i => i == "012") && (
+          {powers.some(i => i == "012") && (
             <Operation.ChangePwd
               row={row}
-              prop={contentConfig.changePwdProp}
-              delTooltip={delTooltip}
               onChangePwd={() => emit("changePwdBtnClick", row)}
               {...createActionProps("changePwd", apis)}
             />
@@ -135,12 +125,11 @@ const PageConent = defineComponent({
             <Operation.ResetPwd
               row={row}
               prop={contentConfig.resetPwdProp}
-              delTooltip={delTooltip}
               onResetPwd={() => emit("resetPwdBtnClick", row)}
               {...createActionProps("resetPwd", apis)}
             />
           )}
-          {!notLog && powers.some(i => i == "022") && (
+          {powers.some(i => i == "022") && (
             <Operation.Log onLog={() => emit("logBtnClick", row)} />
           )}
         </>
@@ -148,10 +137,7 @@ const PageConent = defineComponent({
     }
 
     function renderButtons() {
-      const {
-        contentConfig
-        // , powers
-      } = props;
+      const { contentConfig, powers } = props;
       // const { columns } = contentConfig;
 
       return (
@@ -239,7 +225,7 @@ const PageConent = defineComponent({
           align="left"
           showOverflowTooltip
           table-layout="auto"
-          size={size}
+          size="small"
           rowKey={rowKey}
           columns={columns.value}
           treeProps={treeProps}

src/components/PageSearch/src/page-search.vue

@@ -52,11 +52,13 @@ if (searchParams.basic) {
 <template>
   <div class="w-99/100">
     <div class="bg-white pl-4 pt-4 page-search" v-show="!isHide">
-      <BasicForm v-bind="formConfig" v-model:form-data="formData">
+      <BasicForm v-bind="formConfig" size="small" v-model:form-data="formData">
         <template #action>
           <div style="width: 100%" flex gap-2>
             <el-button
               type="primary"
+              size="small"
+              v-if="formConfig.formItems.length > 0"
               :icon="useRenderIcon('search')"
               @click="handleSearchClick"
             >
@@ -64,7 +66,9 @@ if (searchParams.basic) {
             </el-button>
 
             <el-button
+              v-if="formConfig.formItems.length > 0"
               :icon="useRenderIcon('refresh')"
+              size="small"
               @click="handleResetClick"
             >
               重置

src/config/status.ts

@@ -84,28 +84,3 @@ export const FLAG_OPTIONS = [
   { id: "1", label: "增加", value: "1", type: "warning" },
   { id: "-1", label: "减少", value: "-1", type: "primary" }
 ];
-
-export const POWERS = [
-  "001",
-  "002",
-  "003",
-  "004",
-  "005",
-  "006",
-  "007",
-  "008",
-  "009",
-  "010",
-  "011",
-  "012",
-  "013",
-  "014",
-  "015",
-  "016",
-  "017",
-  "018",
-  "019",
-  "020",
-  "021",
-  "022"
-];

src/layout/components/appMain.vue

@@ -148,6 +148,6 @@ const transitionMain = defineComponent({
 }
 
 .main-content {
-  padding: 24px;
+  /* padding: 24px; */
 }
 </style>

src/router/utils.ts

@@ -14,7 +14,6 @@ import { useTimeoutFn } from "@vueuse/core";
 import { RouteConfigs } from "/@/layout/types";
 import { buildHierarchyTree, storageSession } from "@pureadmin/utils";
 import { usePermissionStoreHook } from "/@/store/modules/permission";
-import { POWERS } from "/@/config/status";
 const Layout = () => import("/@/layout/index.vue");
 
 const IFrame = () => import("/@/layout/frameView.vue");
@@ -181,7 +180,7 @@ function flattenRoutes(
       action
     } = item;
 
-    if (POWERS) powers.set(menu_route, POWERS);
+    if (action) powers.set(menu_route, action);
 
     const path = baseUrl ? `${baseUrl}/${menu_route}` : `/${menu_route}`;
 

src/style/index.scss

@@ -50,7 +50,7 @@
   }
 }
 .el-dialog--center .el-dialog__body{
-  padding-top:0px!important;
+  padding-top:10px!important;
 }
 
 .el-form>.el-form-item.asterisk-left {

src/utils/column-helper.ts

@@ -16,7 +16,8 @@ export function renderStatus(options: any[], prop = "status") {
       return h(
         ElTag,
         {
-          type: item && item.type ? item.type : ""
+          type: item && item.type ? item.type : "",
+          size: "small"
         },
         {
           default: () => item?.label || "--"
@@ -32,7 +33,8 @@ export function renderStatusList(options: any[]) {
       h(
         ElTag,
         {
-          type: item && item.type ? item.type : ""
+          type: item && item.type ? item.type : "",
+          size: "small"
         },
         {
           default: () => item?.label || "--"
@@ -55,7 +57,8 @@ export function renderVideoList(prop: string) {
             h(
               ElTag,
               {
-                type: ""
+                type: "",
+                size: "small"
               },
               {
                 default: () => item?.video_name || "--"
@@ -80,6 +83,7 @@ export function renderImage(prop = "image") {
           src: row[prop],
           fit: "cover",
           lazy: true,
+          size: "small",
           style: "width: 33px; height: 22px",
           "preview-src-list": row[prop] !== "" ? [row[prop]] : [],
           "z-index": 99999,
@@ -106,6 +110,7 @@ export function renderImages(prop: string) {
                 src: item,
                 fit: "cover",
                 lazy: true,
+                size: "small",
                 style: "width: 33px; height: 22px; margin:0 0 0 10px",
                 "preview-src-list": item !== "" ? [item] : [],
                 "z-index": 99999,
@@ -134,6 +139,7 @@ export function renderGoodParam(prop: string) {
             ElTag,
             {
               type: "",
+              size: "small",
               style: "margin:0 0 0 10px"
             },
             {

src/views/interest/account/config/content.config.ts

@@ -1,8 +1,6 @@
 import { ContentConfig } from "/@/components/PageContent";
 import {
   httpList,
-  httpAdd,
-  httpUpdate,
   httpStatus,
   httpDelete,
   httpChangePwd
@@ -38,13 +36,12 @@ const columns = [
   },
   {
     label: "创建时间",
-    width: 160,
     prop: "addtime"
   },
   {
     label: "操作",
     fixed: "right",
-    width: 200,
+    width: 220,
     slot: "operation"
   }
 ];
@@ -53,9 +50,7 @@ const contentConfig: ContentConfig = {
   title: "运营账号",
   columns,
   apis: {
-    httpAdd,
     httpList,
-    httpUpdate,
     httpStatus,
     httpDelete,
     httpChangePwd

src/views/interest/account/config/modal.config.ts

@@ -1,37 +0,0 @@
-import { ModalConfig } from "/@/components/PageModal/src/types";
-import { createRoleOptions, createCardOptions } from "../utils/create-options";
-const modalConfig: ModalConfig = {
-  title: "运营账号",
-  width: "900px",
-  colLayout: { span: 24 },
-  itemStyle: {},
-  contact: "account",
-  labelWidth: "100px",
-  formItems: [
-    {
-      field: "username",
-      type: "input",
-      label: "账号",
-      placeholder: "账号",
-      rules: [{ required: true, trigger: "blur", message: "请输入账号" }]
-    },
-    {
-      field: "role_id",
-      type: "select",
-      label: "角色",
-      placeholder: "角色",
-      options: await createRoleOptions(),
-      rules: [{ required: true, trigger: "change", message: "请选择角色" }]
-    },
-    {
-      field: "card_id",
-      type: "checkbox",
-      label: "卡类型",
-      placeholder: "卡类型",
-      options: await createCardOptions(),
-      rules: [{ required: true, trigger: "change", message: "请选择卡类型" }]
-    }
-  ]
-};
-
-export default modalConfig;

src/views/interest/account/edit-dialog.vue

@@ -0,0 +1,247 @@
+<script setup lang="ts">
+import { FormRules, ElForm } from "element-plus";
+import { reactive, ref } from "vue";
+import {
+  httpUpdate,
+  httpAdd,
+  httpDetail,
+  httpRoleAll,
+  httpCardAll
+} from "/@/api/interest/account";
+import { responseHandle } from "/@/utils/responseHandle";
+import { useNav } from "/@/layout/hooks/useNav";
+enum FROM_TYPE {
+  create = "create",
+  edit = "edit",
+  view = "view"
+}
+const { logout } = useNav();
+const showModel = ref(false);
+const currentMenuId = ref("");
+const TYPE = ref<FROM_TYPE>(FROM_TYPE.create);
+const formRef = ref<InstanceType<typeof ElForm>>(null);
+const loading = ref(false);
+const titleType = ref("");
+const roleOptions = ref([]);
+const cardOptions = ref([]);
+
+const emit = defineEmits(["reload"]);
+const initform = {
+  username: "",
+  role_id: "",
+  card_id: [],
+  id: ""
+};
+const ruleForm = ref({ ...initform });
+const rules = reactive<FormRules>({
+  username: [{ required: true, trigger: "blur", message: "请输入账号" }],
+  role_id: [{ required: true, trigger: "change", message: "请选择角色" }],
+  card_id: [
+    {
+      required: true,
+      type: "array",
+      trigger: "change",
+      message: "请选择卡类型"
+    }
+  ]
+});
+
+async function show(node: any, id: string, isCreate: string) {
+  Object.keys(ruleForm.value).forEach(key => {
+    ruleForm.value[key] = initform[key];
+  });
+  console.log(ruleForm.value);
+  TYPE.value = isCreate;
+  switch (TYPE.value) {
+    case "create":
+      titleType.value = "新建运营账号";
+      break;
+    case "edit":
+      titleType.value = "编辑运营账号";
+      break;
+    case "view":
+      titleType.value = "运营账号详情";
+      break;
+    default:
+      titleType.value = "新建运营账号";
+  }
+  if (TYPE.value !== "create") {
+    await getDetail(id);
+  }
+
+  await getRole();
+  await getCard();
+  showModel.value = true;
+}
+
+function handleUpdate() {
+  const data = {
+    ...ruleForm.value
+  };
+
+  return {
+    data,
+    api: httpUpdate
+  };
+}
+async function getDetail(id) {
+  const { message, code, data } = await httpDetail({ id });
+  responseHandle({
+    code,
+    message,
+    logout,
+    handler: () => {
+      console.log(data);
+      Object.keys(ruleForm.value).forEach(key => {
+        if (key === "card_id") {
+          ruleForm.value[key] = data[key];
+        } else {
+          ruleForm.value[key] = data[key] + "";
+        }
+      });
+    }
+  });
+}
+async function getRole() {
+  const { message, code, data } = await httpRoleAll({});
+  responseHandle({
+    code,
+    message,
+    logout,
+    handler: () => {
+      roleOptions.value = data;
+    }
+  });
+}
+async function getCard() {
+  const { message, code, data } = await httpCardAll({});
+  responseHandle({
+    code,
+    message,
+    logout,
+    handler: () => {
+      cardOptions.value = data;
+    }
+  });
+}
+
+function handleCreate() {
+  const data = {
+    ...ruleForm.value
+  };
+
+  return {
+    data,
+    api: httpAdd
+  };
+}
+
+function handleSave() {
+  formRef.value.validate(async vaild => {
+    if (vaild) {
+      if (loading.value) return;
+      const handler =
+        TYPE.value === FROM_TYPE.create ? handleCreate : handleUpdate;
+
+      loading.value = true;
+      const { api, data } = handler();
+      const { message, code } = await api(data);
+
+      responseHandle({
+        code,
+        message,
+        logout,
+        handler: () => {
+          showModel.value = false;
+          loading.value = false;
+          emit("reload");
+        }
+      });
+    }
+  });
+}
+
+defineExpose({
+  show,
+  changeCurrentMenuId: (id: string) => (currentMenuId.value = id)
+});
+</script>
+
+<template>
+  <div>
+    <el-dialog
+      v-model="showModel"
+      :close-on-press-escape="false"
+      center
+      append-to-body
+      destroy-on-close
+      :width="'700px'"
+      :title="titleType"
+      v-loading="loading"
+    >
+      <el-form
+        ref="formRef"
+        :model="ruleForm"
+        :rules="rules"
+        label-width="90px"
+        style="margin-top: -10px"
+        class="demo-ruleForm"
+        status-icon
+      >
+        <el-row>
+          <el-col :span="24">
+            <el-form-item label="账号名称" prop="username">
+              <el-input
+                v-model="ruleForm.username"
+                :disabled="TYPE === 'view'"
+                placeholder="账号名称"
+              /> </el-form-item
+          ></el-col>
+          <el-col :span="24">
+            <el-form-item label="角色" prop="role_id">
+              <el-select
+                v-model="ruleForm.role_id"
+                style="width: 100%"
+                :disabled="TYPE === 'view'"
+                placeholder="角色"
+              >
+                <el-option
+                  v-for="(si, sii) in roleOptions"
+                  :key="'type' + si.id + sii"
+                  :label="si.name"
+                  :disabled="si.status + '' === '0'"
+                  :value="si.id + ''"
+                />
+              </el-select> </el-form-item
+          ></el-col>
+          <el-col :span="24">
+            <el-form-item label="卡类型" prop="card_id">
+              <el-checkbox-group
+                v-model="ruleForm.card_id"
+                :disabled="TYPE === 'view'"
+              >
+                <el-checkbox
+                  v-for="(si, sii) in cardOptions"
+                  :key="'card_id' + si.id + sii"
+                  :label="si.id + ''"
+                  :disabled="si.status + '' === '0'"
+                  >{{ si.title }}</el-checkbox
+                >
+              </el-checkbox-group>
+            </el-form-item></el-col
+          >
+        </el-row>
+        <div class="flex justify-end">
+          <el-button
+            v-if="TYPE !== 'view'"
+            :loading="loading"
+            type="primary"
+            @click="handleSave"
+            >保存</el-button
+          >
+          <el-button @click="showModel = false">取消</el-button>
+        </div>
+      </el-form>
+    </el-dialog>
+  </div>
+</template>

src/views/interest/account/index.vue

@@ -3,72 +3,52 @@ import { ref } from "vue";
 import { PageSearch, usePageSearch } from "/@/components/PageSearch";
 import searchConfig from "./config/search.config";
 import contentConfig from "./config/content.config";
-import modalConfig from "./config/modal.config";
-import { PageModal, usePageModal } from "/@/components/PageModal";
 import { PageContent } from "/@/components/PageContent";
-import { httpDetail } from "/@/api/interest/account";
-import { useResponseHandle } from "/@/hooks/useAsync";
 import ResetPwd from "/@/components/ResetPwd";
 import resetPwdConfig from "./config/resetPwd.config";
+import { usePermission } from "/@/hooks/usePermission";
+import EditModel from "./edit-dialog.vue";
+const modelRef = ref<InstanceType<typeof EditModel>>(null);
 const pageName = "account";
 const { pageContentRef, handleResetClick, handleSearchClick } = usePageSearch(
   undefined,
   undefined,
   searchConfig
 );
-const {
-  pageModalRef,
-  handleUpdateData,
-  handleCreateData,
-  handlePreviewData,
-  handleConfrim,
-  defaultInfo
-} = usePageModal({
-  pageContentRef
-});
-const resetPwdRef = ref<InstanceType<typeof ResetPwd>>(null);
-const responseHandle = useResponseHandle();
-async function handleDetailData(row, type) {
-  const { id } = row;
-  const { code, data, message } = await httpDetail({ id: id });
-  responseHandle({
-    code,
-    message,
-    handler: () => {
-      data.card_id = data.card_id.toString();
-      console.log(data);
-      if (type === "preview") {
-        handlePreviewData(data);
-      }
-      if (type === "update") {
-        handleUpdateData(data);
-      }
-    }
-  });
+//新建/编辑/查看
+function handleAddChangeCheck(item: any, id: string, type: string) {
+  modelRef.value.show(item, id, type);
 }
+const resetPwdRef = ref<InstanceType<typeof ResetPwd>>(null);
+const { hasPermissionWithCode, permissions } = usePermission(pageName);
 </script>
 
 <template>
-  <!-- <PageAuth :pageName="pageName"> -->
-  <PageSearch
-    :form-config="searchConfig"
-    @search-btn-click="handleSearchClick"
-    @reset-btn-click="handleResetClick"
-  />
-  <PageContent
-    ref="pageContentRef"
-    :content-config="contentConfig"
-    @create-btn-click="handleCreateData"
-    @preview-btn-click="row => handleDetailData(row, 'preview')"
-    @update-btn-click="row => handleDetailData(row, 'update')"
-    @change-pwd-btn-click="({ id }) => resetPwdRef.show(id)"
-  />
-  <PageModal
-    ref="pageModalRef"
-    :modal-config="modalConfig"
-    :default-info="defaultInfo"
-    @confirm-btn-click="handleConfrim"
-  />
-  <ResetPwd ref="resetPwdRef" :modalConfig="resetPwdConfig" />
-  <!-- </PageAuth> -->
+  <PageAuth :pageName="pageName">
+    <PageSearch
+      :form-config="searchConfig"
+      @search-btn-click="handleSearchClick"
+      @reset-btn-click="handleResetClick"
+    >
+      <template #action>
+        <el-button
+          type="primary"
+          @click="handleAddChangeCheck(null, '', 'create')"
+          v-if="hasPermissionWithCode('002')"
+        >
+          新增
+        </el-button>
+      </template>
+    </PageSearch>
+    <PageContent
+      ref="pageContentRef"
+      :powers="permissions"
+      :content-config="contentConfig"
+      @preview-btn-click="row => handleAddChangeCheck(row, row.id, 'view')"
+      @update-btn-click="row => handleAddChangeCheck(row, row.id, 'edit')"
+      @change-pwd-btn-click="({ id }) => resetPwdRef.show(id)"
+    />
+    <EditModel ref="modelRef" @reload="pageContentRef.onSearch()" />
+    <ResetPwd ref="resetPwdRef" :modalConfig="resetPwdConfig" />
+  </PageAuth>
 </template>

src/views/interest/account/utils/create-options.ts

@@ -1,25 +0,0 @@
-import { httpRoleAll, httpCardAll } from "/@/api/interest/account";
-
-export async function createRoleOptions(): Promise<option[]> {
-  const arr: option[] = [];
-  const { code, data, message } = await httpRoleAll({});
-  if (Number(code) === 0) {
-    data.forEach(btn => {
-      arr.push({ label: String(btn.name), value: String(btn.id) });
-    });
-  }
-
-  return arr;
-}
-
-export async function createCardOptions(): Promise<option[]> {
-  const arr: option[] = [];
-  const { code, data, message } = await httpCardAll({});
-  if (Number(code) === 0) {
-    data.forEach(btn => {
-      arr.push({ label: String(btn.title), value: String(btn.id) });
-    });
-  }
-
-  return arr;
-}

src/views/interest/action/index.vue

@@ -10,7 +10,10 @@ import { ElMessage } from "element-plus";
 import { useRenderIcon } from "/@/components/ReIcon/src/hooks";
 import { useNav } from "/@/layout/hooks/useNav";
 import { responseHandle } from "/@/utils/responseHandle";
-import { useUserStoreHook } from "/@/store/modules/user";
+import { usePermission } from "/@/hooks/usePermission";
+const pageName = "setBtn";
+const { hasPermissionWithCode, permissions } = usePermission(pageName);
+
 const { logout } = useNav();
 defineOptions({
   name: "action"
@@ -25,13 +28,14 @@ const editType = ref("add");
 const action_list = ref([]);
 const action_data_list = ref([]);
 const private_data_list = ref([]);
-const ruleForm = reactive<menuType>({
+const ruleForm = reactive({
   id: "",
   name: "",
   level: "1",
   action: [],
   private_data: []
 });
+powers.value = permissions.value;
 // 全选/全不选
 const handleCheckAllChange = (checkAll, index, item, subIndex) => {
   menuactionList.value[index].child[subIndex].checkAll = checkAll;
@@ -353,19 +357,6 @@ let indeterminateField = computed(() => {
   };
 });
 onMounted(() => {
-  powers.value = [
-    "001",
-    "002",
-    "003",
-    "004",
-    "005",
-    "006",
-    "007",
-    "008",
-    "009",
-    "010",
-    "011"
-  ];
   if (powers.value.some(i => i == "001")) {
     onSearch();
   }
@@ -374,7 +365,7 @@ onMounted(() => {
 
 <template>
   <div class="action">
-    <div v-show="powers.some(i => i == '001')">
+    <PageAuth :pageName="pageName">
       <div class="action_show">
         <div class="action_show_box">
           <ul class="role-list">
@@ -400,7 +391,7 @@ onMounted(() => {
                 v-if="loading && item.id == ruleForm.id"
                 class="fr"
                 link
-                :size="'mini'"
+                :size="'small'"
                 :icon="useRenderIcon('Loading')"
               />
             </li>
@@ -443,7 +434,7 @@ onMounted(() => {
                           <span class="_h2">{{ subItem.menu_name }}</span>
                           <el-radio-group
                             style="margin: 0 0 0 20px"
-                            :size="'mini'"
+                            :size="'small'"
                             v-if="
                               subItem &&
                               subItem.private &&
@@ -467,6 +458,7 @@ onMounted(() => {
                             <el-checkbox
                               v-model="subItem.checkAll"
                               :disabled="editType === 'view'"
+                              :size="'small'"
                               :indeterminate="indeterminateCheck(subItem)"
                               @change="
                                 handleCheckAllChange(
@@ -482,6 +474,7 @@ onMounted(() => {
                           <div class="checkItem">
                             <el-checkbox-group
                               v-model="subItem.checkList"
+                              :size="'small'"
                               :disabled="editType === 'view'"
                               @change="
                                 handleCheckedGroupChange(
@@ -494,6 +487,7 @@ onMounted(() => {
                             >
                               <el-checkbox
                                 :disabled="editType === 'view'"
+                                :size="'small'"
                                 v-for="children in subItem.action"
                                 :key="'checkItem' + children.id"
                                 :label="children.id"
@@ -521,6 +515,7 @@ onMounted(() => {
                           <div class="checkAll">
                             <el-checkbox
                               v-model="subItem.fieldAll"
+                              :size="'small'"
                               :disabled="editType === 'view'"
                               :indeterminate="indeterminateField(subItem)"
                               @change="
@@ -536,6 +531,7 @@ onMounted(() => {
                           </div>
                           <div class="checkItem">
                             <el-checkbox-group
+                              :size="'small'"
                               v-model="subItem.fieldList"
                               :disabled="editType === 'view'"
                               @change="
@@ -551,6 +547,7 @@ onMounted(() => {
                                 v-for="children in subItem.action_data"
                                 :key="'FieldItem' + children.id"
                                 :label="children.id"
+                                :size="'small'"
                                 :disabled="editType === 'view'"
                                 @change="
                                   handleFieldChange(
@@ -575,14 +572,13 @@ onMounted(() => {
           </div>
         </div>
 
-        <div class="rule-bottom" v-if="powers.some(i => i == '008')">
+        <div class="rule-bottom" v-if="powers.some(i => i == '001')">
           <el-button size="small" type="primary" @click="submitForm"
             >提 交</el-button
           >
         </div>
       </div>
-    </div>
-    <NoAuth v-show="!powers.some(i => i == '001')" />
+    </PageAuth>
   </div>
 </template>
 

src/views/interest/role/addEdit.vue → src/views/interest/role/components/edit-dialog.vue

@@ -6,47 +6,35 @@ import {
   httpDetail
 } from "/@/api/interest/role";
 import { ElMessage, FormInstance, FormRules } from "element-plus";
-import { reactive, ref, watch, nextTick, computed } from "vue";
-import menuType from "./types";
+import { reactive, ref, computed } from "vue";
+import { responseHandle } from "/@/utils/responseHandle";
 import { useNav } from "/@/layout/hooks/useNav";
 import { LEVEL_OPTIONS } from "/@/config/status";
+enum FROM_TYPE {
+  create = "create",
+  edit = "edit",
+  view = "view"
+}
 const { logout } = useNav();
-const formSize = ref("default");
-const ruleFormRef = ref<FormInstance>();
-
-const props = defineProps({
-  itemId: {
-    type: String,
-    default: ""
-  },
-  showModel: {
-    type: Boolean,
-    default: false
-  },
-  isDetails: {
-    type: String,
-    default: "add"
-  }
-});
-const showModelThis = ref(false);
-const emit = defineEmits<{
-  (e: "cancel"): void;
-  (e: "refresh"): void;
-}>();
+const formRef = ref<FormInstance>();
+const showModel = ref(false);
+const loading = ref(false);
+const titleType = ref("");
+const emit = defineEmits(["reload"]);
 const id = ref("");
-const editType = ref("create");
+const TYPE = ref<FROM_TYPE>(FROM_TYPE.create);
 const menuactionList = ref([]);
 const action_list = ref([]);
 const action_data_list = ref([]);
 const private_data_list = ref([]);
-const formModel = {
+const initform = {
   roleid: "",
   name: "",
   level: "1",
   action: "",
   private_data: ""
 };
-const ruleForm = reactive<menuType>({ ...formModel });
+const ruleForm = ref({ ...initform });
 const rules = reactive<FormRules>({
   name: [
     { required: true, message: "请输入角色名称", trigger: "blur" },
@@ -158,13 +146,12 @@ const handleFieldChange = (checked, id, index, subIndex, item) => {
   // this.$set(menuactionList.value, index, item);
   // console.log(menuactionList.value[index].child[subIndex]);
 };
-const submitForm = async (formEl: FormInstance | undefined) => {
-  if (!formEl) return;
-  await formEl.validate(async (valid, fields) => {
+function handleSave() {
+  formRef.value.validate(async valid => {
     if (valid) {
-      if (loading.value === true) return;
+      if (loading.value) return;
       loading.value = true;
-      const { level, name, roleid } = ruleForm;
+      const { level, name, roleid } = ruleForm.value;
 
       action_list.value = []; // 字段数据
       action_data_list.value = []; // 功能数据
@@ -187,218 +174,198 @@ const submitForm = async (formEl: FormInstance | undefined) => {
       let model = {
         level,
         name,
-        roleid,
-        action_data: action_data_list.value, //按钮权限
+        id: roleid,
+        action_data: action_data_list.value, //角色权限
         private_data: private_data_list.value //私有权限
       };
 
-      if (editType.value === "create") {
+      if (TYPE.value === "create") {
         delete model["roleid"];
       }
       const { code, message } =
-        editType.value === "create"
+        TYPE.value === "create"
           ? await httpAdd(model)
           : await httpUpdate(model);
       loading.value = false;
-      if (code === 0) {
-        ElMessage.success(titleType.value + "成功！");
-        showModelThis.value = false;
-        emit("refresh");
-      } else if (code > 100 && code < 140) {
-        showModelThis.value = false;
-        logout();
-      } else {
-        ElMessage.error(message);
-      }
-    } else {
-      console.log("error submit!", fields);
+      responseHandle({
+        code,
+        message,
+        logout,
+        handler: () => {
+          ElMessage.success(titleType.value + "成功！");
+          showModel.value = false;
+          emit("reload");
+        }
+      });
     }
   });
-};
-const resetForm = async (formEl: FormInstance | undefined, item) => {
-  if (!formEl) return;
-  formEl.clearValidate();
-  formEl.resetFields();
-  await nextTick(async () => {
-    for (let key in ruleForm) {
-      if (key === "role") {
-        ruleForm[key] = item["roleid"] || "";
-      } else {
-        ruleForm[key] = item[key];
-      }
+}
+
+const initData = async () => {
+  const { code, data, message } = await httpDetail({ id: id.value });
+  responseHandle({
+    code,
+    message,
+    logout,
+    handler: () => {
+      // action_list.value = [];
+      // action_data_list.value = [];
+      // private_data_list.value = [];
+      const { action, action_data, private_data, name, level } = data ?? {};
+      // console.log(action ?? []);
+      // console.log(action_data);
+      // console.log(private_data);
+      ruleForm.value.roleid = id.value;
+      ruleForm.value.name = name + "" || "";
+      ruleForm.value.level = level + "" || "1";
+      action_list.value = action ?? [];
+      action_data_list.value = action_data ?? [];
+      private_data_list.value = private_data ?? [];
+      // console.log(action_list.value);
+      // console.log(action_data_list.value);
+      // console.log(private_data_list.value);
+
+      const arr = JSON.parse(JSON.stringify(menuactionList.value));
+      arr.map(x => {
+        if (x.child && x.child.length > 0) {
+          x.child.map(y => {
+            if (y.action && y.action.length > 0) {
+              y.action.map(z => {
+                const Aindex =
+                  action_list.value.length > 0
+                    ? action_list.value.findIndex(a => a === z.id)
+                    : -1;
+                if (Aindex !== -1) {
+                  y.checkList.push(action_list.value[Aindex]);
+                }
+                return z;
+              });
+              if (y.action.length === y.checkList.length) {
+                y.checkAll = true;
+              }
+            }
+            if (y.action_data && y.action_data.length > 0) {
+              y.action.map(z => {
+                const Bindex =
+                  action_data_list.value.length > 0
+                    ? action_data_list.value.findIndex(a => a === z.id)
+                    : -1;
+                if (Bindex !== -1) {
+                  y.fieldList.push(action_data_list.value[Bindex]);
+                }
+                return z;
+              });
+              if (y.action_data.length === y.fieldList.length) {
+                y.fieldAll = true;
+              }
+            }
+            console.log(private_data_list.value);
+            // console.log(y.private);
+            if (y.private && y.private.length === 2) {
+              let Cindex =
+                private_data_list.value.length > 0
+                  ? private_data_list.value.findIndex(a => a === y.id)
+                  : -1;
+              if (Cindex !== -1) {
+                y.is_private_change = "1";
+              } else {
+                y.is_private_change = "0";
+              }
+            } else {
+              y.is_private_change = "0";
+            }
+            return y;
+          });
+        }
+        return x;
+      });
+
+      menuactionList.value = arr;
+      console.log(menuactionList.value);
     }
   });
 };
-const closeDialog = () => {
-  showModelThis.value = false;
-  emit("cancel");
-};
-
-const loading = ref(true);
-const titleType = ref("");
-async function initForm(item: Object) {
+async function show(node: any, did: string, isCreate: string) {
   loading.value = true;
-  switch (editType.value) {
+  id.value = did;
+  Object.keys(ruleForm.value).forEach(key => {
+    ruleForm.value[key] =
+      isCreate === "create"
+        ? initform[key]
+          ? initform[key] + ""
+          : ""
+        : node[key]
+        ? node[key] + ""
+        : "";
+  });
+  TYPE.value = isCreate;
+  switch (TYPE.value) {
     case "create":
       titleType.value = "新建角色";
       break;
-    case "update":
+    case "edit":
       titleType.value = "编辑角色";
       break;
-    case "preview":
+    case "view":
       titleType.value = "角色详情";
       break;
     default:
       titleType.value = "新建角色";
   }
-  const { code, data, message } = await httpMenuAll({});
-  if (code === 0) {
-    let arr = JSON.parse(JSON.stringify(data ?? []));
-    arr = arr.filter(item => item.child && item.child.length > 0);
-    arr = arr.map(x => {
-      x.child.map(y => {
-        y.checkAll = false;
-        y.checkList = [];
-        y.fieldAll = false;
-        y.fieldList = [];
-        y.is_private_change = "0";
-        if (y.is_private === "0") {
-          y.private = [];
-        } else {
-          y.private = [
-            {
-              id: "0",
-              label: "公有数据"
-            },
-            {
-              id: "1",
-              label: "私有数据"
-            }
-          ];
-        }
-        if (y.action && y.action.length > 0) {
-          y.action.map(z => {
-            z.id = String(z.id);
-            z.menuid = String(z.menuid);
-            z.status = String(z.status);
-            return z;
-          });
-        }
-        return y;
-      });
-      return x;
-    });
-    menuactionList.value = arr;
-    // console.log(menuactionList.value);
-  } else if (code > 100 && code < 140) {
-    logout();
-  } else {
-    ElMessage.error(message);
-  }
-  await resetForm(ruleFormRef.value, item);
-  if (editType.value !== "create") {
+  await getMenuAll();
+  if (TYPE.value !== "create") {
     await initData();
   }
-  // console.log(ruleForm);
+  showModel.value = true;
   loading.value = false;
 }
-const initData = async () => {
-  const { code, data, message } = await httpDetail({ id: id.value });
-  if (code === 0) {
-    // action_list.value = [];
-    // action_data_list.value = [];
-    // private_data_list.value = [];
-    const { action, action_data, private_data, name, level } = data ?? {};
-    // console.log(action ?? []);
-    // console.log(action_data);
-    // console.log(private_data);
-    ruleForm.roleid = id.value;
-    ruleForm.name = name ?? "";
-    ruleForm.level = level ?? "1";
-    action_list.value = action ?? [];
-    action_data_list.value = action_data ?? [];
-    private_data_list.value = private_data ?? [];
-    // console.log(action_list.value);
-    // console.log(action_data_list.value);
-    // console.log(private_data_list.value);
-
-    const arr = JSON.parse(JSON.stringify(menuactionList.value));
-    arr.map(x => {
-      if (x.child && x.child.length > 0) {
+async function getMenuAll() {
+  const { code, data, message } = await httpMenuAll({});
+  responseHandle({
+    code,
+    message,
+    logout,
+    handler: () => {
+      let arr = JSON.parse(JSON.stringify(data ?? []));
+      arr = arr.filter(item => item.child && item.child.length > 0);
+      arr = arr.map(x => {
         x.child.map(y => {
-          if (y.action && y.action.length > 0) {
-            y.action.map(z => {
-              const Aindex =
-                action_list.value.length > 0
-                  ? action_list.value.findIndex(a => a === z.id)
-                  : -1;
-              if (Aindex !== -1) {
-                y.checkList.push(action_list.value[Aindex]);
+          y.checkAll = false;
+          y.checkList = [];
+          y.fieldAll = false;
+          y.fieldList = [];
+          y.is_private_change = "0";
+          if (y.is_private === "0") {
+            y.private = [];
+          } else {
+            y.private = [
+              {
+                id: "0",
+                label: "公有数据"
+              },
+              {
+                id: "1",
+                label: "私有数据"
               }
-              return z;
-            });
-            if (y.action.length === y.checkList.length) {
-              y.checkAll = true;
-            }
+            ];
           }
-          if (y.action_data && y.action_data.length > 0) {
+          if (y.action && y.action.length > 0) {
             y.action.map(z => {
-              const Bindex =
-                action_data_list.value.length > 0
-                  ? action_data_list.value.findIndex(a => a === z.id)
-                  : -1;
-              if (Bindex !== -1) {
-                y.fieldList.push(action_data_list.value[Bindex]);
-              }
+              z.id = String(z.id);
+              z.menuid = String(z.menuid);
+              z.status = String(z.status);
               return z;
             });
-            if (y.action_data.length === y.fieldList.length) {
-              y.fieldAll = true;
-            }
-          }
-          console.log(private_data_list.value);
-          // console.log(y.private);
-          if (y.private && y.private.length === 2) {
-            let Cindex =
-              private_data_list.value.length > 0
-                ? private_data_list.value.findIndex(a => a === y.id)
-                : -1;
-            if (Cindex !== -1) {
-              y.is_private_change = "1";
-            } else {
-              y.is_private_change = "0";
-            }
-          } else {
-            y.is_private_change = "0";
           }
           return y;
         });
-      }
-      return x;
-    });
-
-    menuactionList.value = arr;
-    console.log(menuactionList.value);
-  } else if (code >= 100 && code <= 104) {
-    logout();
-  } else {
-    ElMessage.warning(message);
-  }
-};
-watch(
-  () => {
-    return props.showModel;
-  },
-  () => {
-    const { showModel, itemId, isDetails } = props;
-    showModelThis.value = showModel;
-    if (showModelThis.value) {
-      id.value = itemId;
-      editType.value = isDetails;
-      initForm(formModel);
+        return x;
+      });
+      menuactionList.value = arr;
     }
-  }
-);
+  });
+}
+
 let indeterminateCheck = computed(() => {
   return item => {
     // 选中子节点的数量
@@ -435,27 +402,29 @@ let indeterminateField = computed(() => {
     return selectItemLength > 0 && noSlectItemLength > 0;
   };
 });
+defineExpose({
+  show
+});
 </script>
 
 <template>
   <el-dialog
     :close-on-press-escape="false"
-    v-model="showModelThis"
+    v-model="showModel"
     append-to-body
     center
     :top="'5vh'"
     :width="'900px'"
     :title="titleType"
     v-loading="loading"
-    @close="closeDialog"
   >
     <el-form
-      ref="ruleFormRef"
+      ref="formRef"
       :model="ruleForm"
       :rules="rules"
       label-width="90px"
       class="role-addedit"
-      :size="formSize"
+      :size="'small'"
       status-icon
     >
       <el-row>
@@ -463,7 +432,7 @@ let indeterminateField = computed(() => {
           <el-form-item label="角色名称" prop="name">
             <el-input
               v-model="ruleForm.name"
-              :disabled="editType === 'view'"
+              :disabled="TYPE === 'view'"
               placeholder="角色名称"
             /> </el-form-item
         ></el-col>
@@ -472,7 +441,7 @@ let indeterminateField = computed(() => {
             <el-select
               v-model="ruleForm.level"
               style="width: 100%"
-              :disabled="editType === 'view'"
+              :disabled="TYPE === 'view'"
               placeholder="菜单类型"
             >
               <el-option
@@ -530,7 +499,8 @@ let indeterminateField = computed(() => {
                             <span class="_h2">{{ subItem.menu_name }}</span>
                             <el-radio-group
                               style="margin: 0 0 0 20px"
-                              :size="'mini'"
+                              :size="'small'"
+                              :disabled="TYPE === 'view'"
                               v-if="
                                 subItem &&
                                 subItem.private &&
@@ -542,6 +512,8 @@ let indeterminateField = computed(() => {
                                 v-for="(radioN, ri) in subItem.private"
                                 :key="radioN.label + ri"
                                 :label="radioN.id"
+                                :disabled="TYPE === 'view'"
+                                :size="'small'"
                                 >{{ radioN.label }}</el-radio-button
                               >
                             </el-radio-group>
@@ -553,7 +525,8 @@ let indeterminateField = computed(() => {
                             <div class="checkAll">
                               <el-checkbox
                                 v-model="subItem.checkAll"
-                                :disabled="editType === 'view'"
+                                :disabled="TYPE === 'view'"
+                                :size="'small'"
                                 :indeterminate="indeterminateCheck(subItem)"
                                 @change="
                                   handleCheckAllChange(
@@ -569,7 +542,8 @@ let indeterminateField = computed(() => {
                             <div class="checkItem">
                               <el-checkbox-group
                                 v-model="subItem.checkList"
-                                :disabled="editType === 'view'"
+                                :size="'small'"
+                                :disabled="TYPE === 'view'"
                                 @change="
                                   handleCheckedGroupChange(
                                     $event,
@@ -580,8 +554,9 @@ let indeterminateField = computed(() => {
                                 "
                               >
                                 <el-checkbox
-                                  :disabled="editType === 'view'"
+                                  :disabled="TYPE === 'view'"
                                   v-for="children in subItem.action"
+                                  :size="'small'"
                                   :key="'checkItem' + children.id"
                                   :label="children.id"
                                   @change="
@@ -608,7 +583,8 @@ let indeterminateField = computed(() => {
                             <div class="checkAll">
                               <el-checkbox
                                 v-model="subItem.fieldAll"
-                                :disabled="editType === 'view'"
+                                :disabled="TYPE === 'view'"
+                                :size="'small'"
                                 :indeterminate="indeterminateField(subItem)"
                                 @change="
                                   handleFieldAllChange(
@@ -624,7 +600,8 @@ let indeterminateField = computed(() => {
                             <div class="checkItem">
                               <el-checkbox-group
                                 v-model="subItem.fieldList"
-                                :disabled="editType === 'view'"
+                                :size="'small'"
+                                :disabled="TYPE === 'view'"
                                 @change="
                                   handleFieldGroupChange(
                                     $event,
@@ -638,7 +615,8 @@ let indeterminateField = computed(() => {
                                   v-for="children in subItem.action_data"
                                   :key="'FieldItem' + children.id"
                                   :label="children.id"
-                                  :disabled="editType === 'view'"
+                                  :size="'small'"
+                                  :disabled="TYPE === 'view'"
                                   @change="
                                     handleFieldChange(
                                       $event,
@@ -665,16 +643,20 @@ let indeterminateField = computed(() => {
       </el-row>
       <el-col :span="24" class="clear">
         <el-button
-          v-if="editType === 'create' || editType === 'edit'"
+          class="fr"
+          style="margin: 10px 0 0 16px"
+          @click="showModel = false"
+          >关闭</el-button
+        >
+        <el-button
+          v-if="TYPE === 'create' || TYPE === 'edit'"
           type="primary"
           class="fr"
-          style="margin: 0 0 0 16px"
-          @click="submitForm(ruleFormRef)"
+          :disabled="loading"
+          style="margin: 10px 0 0 16px"
+          @click="handleSave"
           >保存</el-button
         >
-        <el-button class="fr" style="margin: 0 0 0 16px" @click="closeDialog"
-          >关闭</el-button
-        >
       </el-col>
     </el-form>
   </el-dialog>

src/views/interest/role/config/content.config.ts

@@ -1,11 +1,5 @@
 import { ContentConfig } from "/@/components/PageContent";
-import {
-  httpList,
-  httpAdd,
-  httpUpdate,
-  httpStatus,
-  httpDelete
-} from "/@/api/interest/role";
+import { httpList, httpStatus, httpDelete } from "/@/api/interest/role";
 import { renderStatus } from "/@/utils/column-helper";
 import { STATUS_OPTIONS, LEVEL_OPTIONS } from "/@/config/status";
 
@@ -31,12 +25,11 @@ const columns = [
     label: "状态",
     prop: "status",
     ...renderStatus(STATUS_OPTIONS)
-    
   },
   {
     label: "角色等级",
     prop: "level",
-    ...renderStatus(LEVEL_OPTIONS)
+    ...renderStatus(LEVEL_OPTIONS, "level")
   },
 
   {
@@ -56,9 +49,7 @@ const contentConfig: ContentConfig = {
   title: "角色管理",
   columns,
   apis: {
-    httpAdd,
     httpList,
-    httpUpdate,
     httpStatus,
     httpDelete
   }

src/views/interest/role/index.vue

@@ -4,54 +4,48 @@ import { PageSearch, usePageSearch } from "/@/components/PageSearch";
 import searchConfig from "./config/search.config";
 import contentConfig from "./config/content.config";
 import { PageContent } from "/@/components/PageContent";
-import { httpDetail } from "/@/api/interest/role";
-import addEdit from "./addEdit.vue";
+import EditModel from "./components/edit-dialog.vue";
+import { usePermission } from "/@/hooks/usePermission";
 const pageName = "role";
-
+const modelRef = ref<InstanceType<typeof EditModel>>(null);
 const { pageContentRef, handleResetClick, handleSearchClick } = usePageSearch(
   undefined,
   undefined,
   searchConfig
 );
+const { hasPermissionWithCode, permissions } = usePermission(pageName);
 
-const showModel = ref(false);
-const itemId = ref("");
-const isDetails = ref("add");
-const submitRefresh = () => {
-  showModel.value = false;
-  pageContentRef.value.getPageData();
-};
-const submitCancel = () => {
-  showModel.value = false;
-};
-function editItem(id, type) {
-  itemId.value = id;
-  isDetails.value = type;
-  showModel.value = true;
+//新建/编辑/查看
+function handleAddChangeCheck(item: any, id: string, type: string) {
+  modelRef.value.show(item, id, type);
 }
 </script>
 
 <template>
-  <!-- <PageAuth :pageName="pageName"> -->
-  <PageSearch
-    :form-config="searchConfig"
-    @search-btn-click="handleSearchClick"
-    @reset-btn-click="handleResetClick"
-  />
-  <PageContent
-    ref="pageContentRef"
-    :content-config="contentConfig"
-    @create-btn-click="() => editItem('', 'create')"
-    @preview-btn-click="row => editItem(row.id, 'preview')"
-    @update-btn-click="row => editItem(row.id, 'update')"
-  />
+  <PageAuth :pageName="pageName">
+    <PageSearch
+      :form-config="searchConfig"
+      @search-btn-click="handleSearchClick"
+      @reset-btn-click="handleResetClick"
+    >
+      <template #action>
+        <el-button
+          type="primary"
+          @click="handleAddChangeCheck({}, '', 'create')"
+          v-if="hasPermissionWithCode('002')"
+        >
+          新增
+        </el-button>
+      </template>
+    </PageSearch>
+    <PageContent
+      ref="pageContentRef"
+      :powers="permissions"
+      :content-config="contentConfig"
+      @preview-btn-click="row => handleAddChangeCheck(row, row.id, 'view')"
+      @update-btn-click="row => handleAddChangeCheck(row, row.id, 'edit')"
+    />
 
-  <addEdit
-    :itemId="itemId"
-    :isDetails="isDetails"
-    :show-model="showModel"
-    @refresh="submitRefresh"
-    @cancel="submitCancel"
-  />
-  <!-- </PageAuth> -->
+    <EditModel ref="modelRef" @reload="pageContentRef.onSearch()" />
+  </PageAuth>
 </template>

src/views/interest/role/types.ts

@@ -1,4 +1,4 @@
-export interface menuType {
+export interface roleType {
   roleid?: string; //角色id
   role_name?: string; //角色名称
   level?: string; //级别

src/views/system/menuOperator/components/action-table.vue

@@ -8,15 +8,16 @@ import { TableProBar } from "/@/components/ReTable";
 import { useRenderIcon } from "/@/components/ReIcon/src/hooks";
 import { useNav } from "/@/layout/hooks/useNav";
 import { responseHandle } from "/@/utils/responseHandle";
-import { useUserStoreHook } from "/@/store/modules/user";
+import { usePermission } from "/@/hooks/usePermission";
 const { logout } = useNav();
 const { columns } = useColumns();
 const dataList = ref([]);
-const powers = ref([]);
 const loading = ref(true);
 const tableRef = ref();
-
+const pageName = "menuOperator";
 const emit = defineEmits(["edit", "create", "view"]);
+const { hasPermissionWithCode } = usePermission(pageName);
+
 //更新状态
 const handleStatus = async row => {
   const { id, status } = row;
@@ -67,19 +68,6 @@ function editItem(item, id: string, type: "create" | "edit" | "view") {
   emit(type, item, id, type);
 }
 onMounted(() => {
-  powers.value = [
-    "001",
-    "002",
-    "003",
-    "004",
-    "005",
-    "006",
-    "007",
-    "008",
-    "009",
-    "010",
-    "011"
-  ];
   //useUserStoreHook().getMenuActions("menuOperator");
 });
 defineExpose({
@@ -98,7 +86,7 @@ defineExpose({
     >
       <template #buttons>
         <el-button
-          v-if="powers.some(i => i == '002')"
+          v-if="hasPermissionWithCode('002')"
           type="primary"
           :icon="useRenderIcon('add')"
           @click="editItem(null, '', 'create')"
@@ -126,7 +114,7 @@ defineExpose({
             <el-button
               class="reset-margin"
               link
-              v-if="powers.some(i => i == '007')"
+              v-if="hasPermissionWithCode('007')"
               type="primary"
               :size="size"
               @click="editItem(row, row.id, 'view')"
@@ -137,15 +125,15 @@ defineExpose({
               link
               type="primary"
               :size="size"
-              v-if="powers.some(i => i == '005')"
+              v-if="hasPermissionWithCode('005')"
               @click="editItem(row, row.id, 'edit')"
               :icon="useRenderIcon('edits')"
             />
             <el-popconfirm
               :title="row.status === '1' ? '改为禁用？' : '改为启用？'"
               v-if="
-                (powers.some(i => i == '004') && row.status + '' === '1') ||
-                (powers.some(i => i == '003') && row.status + '' === '0')
+                (hasPermissionWithCode('004') && row.status + '' === '1') ||
+                (hasPermissionWithCode('003') && row.status + '' === '0')
               "
               @confirm="handleStatus(row)"
             >
@@ -166,7 +154,7 @@ defineExpose({
             ></el-popconfirm>
             <el-popconfirm
               title="是否确认删除?"
-              v-if="powers.some(i => i == '006')"
+              v-if="hasPermissionWithCode('006')"
               @confirm="handleDelete(row)"
             >
               <template #reference>
@@ -180,7 +168,7 @@ defineExpose({
               </template>
             </el-popconfirm>
             <el-button
-              v-if="row.menu_type + '' === '1' && powers.some(i => i == '002')"
+              v-if="row.menu_type + '' === '1' && hasPermissionWithCode('002')"
               class="reset-margin"
               link
               type="primary"

src/views/system/menuOperator/index.vue

@@ -2,7 +2,8 @@
 import { ref, onMounted } from "vue";
 import ActionTable from "./components/action-table.vue";
 import EditModel from "./components/edit-dialog.vue";
-import { useUserStoreHook } from "/@/store/modules/user";
+import { usePermission } from "/@/hooks/usePermission";
+const pageName = "menuOperator";
 const actionTableRef = ref<InstanceType<typeof ActionTable>>(null);
 const modelRef = ref<InstanceType<typeof EditModel>>(null);
 const powers = ref([]);
@@ -10,21 +11,9 @@ const powers = ref([]);
 function handleAddChangeCheck(item: any, id: string, type: string) {
   modelRef.value.show(item, id, type);
 }
+const { permissions } = usePermission(pageName);
+powers.value = permissions.value;
 onMounted(() => {
-  powers.value = [
-    "001",
-    "002",
-    "003",
-    "004",
-    "005",
-    "006",
-    "007",
-    "008",
-    "009",
-    "010",
-    "011"
-  ];
-  //useUserStoreHook().getMenuActions("menuOperator");
   if (powers.value.some(i => i == "001")) {
     actionTableRef.value.onSearch();
   }
@@ -33,15 +22,15 @@ onMounted(() => {
 
 <template>
   <div class="main">
-    <!-- <PagePower :isShow="powers.some(i => i == '001')"> -->
+    <PageAuth :pageName="pageName">
       <ActionTable
+        v-show="powers.some(i => i == '001')"
         ref="actionTableRef"
-        :powers="powers"
         @edit="handleAddChangeCheck"
         @create="handleAddChangeCheck"
         @view="handleAddChangeCheck"
       />
       <EditModel ref="modelRef" @reload="actionTableRef.onSearch()" />
-    <!-- </PagePower> -->
+    </PageAuth>
   </div>
 </template>

src/views/system/setBtn/components/edit-dialog.vue

@@ -0,0 +1,184 @@
+<script setup lang="ts">
+import { FormRules, ElForm } from "element-plus";
+import { reactive, ref } from "vue";
+import { httpUpdate, httpAdd } from "/@/api/system/setBtn";
+import { responseHandle } from "/@/utils/responseHandle";
+import { useNav } from "/@/layout/hooks/useNav";
+import { btnList } from "/@/config/btnList";
+import { STATUS_OPTIONS } from "/@/config/status";
+
+enum FROM_TYPE {
+  create = "create",
+  edit = "edit",
+  view = "view"
+}
+const { logout } = useNav();
+const showModel = ref(false);
+const currentMenuId = ref("");
+const TYPE = ref<FROM_TYPE>(FROM_TYPE.create);
+const formRef = ref<InstanceType<typeof ElForm>>(null);
+const loading = ref(false);
+const titleType = ref("");
+const emit = defineEmits(["reload"]);
+const initform = {
+  action_code: "",
+  status: "",
+  menuid: ""
+};
+const ruleForm = ref({ ...initform });
+const rules = reactive<FormRules>({
+  action_code: [{ required: true, trigger: "change", message: "请选择按钮" }],
+  status: [{ required: true, trigger: "change", message: "请选择状态" }]
+});
+
+async function show(node: any, id: string, isCreate: string, menuid: string) {
+  Object.keys(ruleForm.value).forEach(key => {
+    if (key === "menuid") {
+      ruleForm.value[key] = menuid;
+    } else {
+      ruleForm.value[key] =
+        isCreate === "create"
+          ? initform[key]
+            ? initform[key] + ""
+            : ""
+          : node[key]
+          ? node[key] + ""
+          : "";
+    }
+  });
+  console.log(ruleForm.value);
+  TYPE.value = isCreate;
+  switch (TYPE.value) {
+    case "create":
+      titleType.value = "新建按钮";
+      break;
+    case "edit":
+      titleType.value = "编辑按钮";
+      break;
+    case "view":
+      titleType.value = "按钮详情";
+      break;
+    default:
+      titleType.value = "新建按钮";
+  }
+
+  showModel.value = true;
+}
+
+function handleUpdate() {
+  const data = {
+    ...ruleForm.value
+  };
+
+  return {
+    data,
+    api: httpUpdate
+  };
+}
+
+function handleCreate() {
+  const data = {
+    ...ruleForm.value
+  };
+
+  return {
+    data,
+    api: httpAdd
+  };
+}
+
+function handleSave() {
+  formRef.value.validate(async vaild => {
+    if (vaild) {
+      if (loading.value) return;
+      const handler =
+        TYPE.value === FROM_TYPE.create ? handleCreate : handleUpdate;
+
+      loading.value = true;
+      const { api, data } = handler();
+      const { message, code } = await api(data);
+
+      responseHandle({
+        code,
+        message,
+        logout,
+        handler: () => {
+          showModel.value = false;
+          loading.value = false;
+          emit("reload");
+        }
+      });
+    }
+  });
+}
+
+defineExpose({
+  show,
+  changeCurrentMenuId: (id: string) => (currentMenuId.value = id)
+});
+</script>
+
+<template>
+  <el-dialog
+    v-model="showModel"
+    :close-on-press-escape="false"
+    center
+    append-to-body
+    destroy-on-close
+    :width="'500px'"
+    :title="titleType"
+    v-loading="loading"
+  >
+    <el-form
+      ref="formRef"
+      :model="ruleForm"
+      :rules="rules"
+      label-width="90px"
+      style="margin-top: -10px"
+      class="demo-ruleForm"
+      status-icon
+    >
+      <el-row>
+        <el-col :span="24">
+          <el-form-item label="按钮" prop="action_code">
+            <el-select
+              v-model="ruleForm.action_code"
+              style="width: 100%"
+              :disabled="TYPE === 'view'"
+              placeholder="按钮"
+            >
+              <el-option
+                v-for="(si, sii) in btnList"
+                :key="'action_code' + si.code + sii"
+                :label="si.name"
+                :value="si.code + ''"
+              />
+            </el-select> </el-form-item
+        ></el-col>
+        <el-col :span="24">
+          <el-form-item label="状态" prop="status">
+            <el-radio-group v-model="ruleForm.status">
+              <el-radio
+                v-for="(si, sii) in STATUS_OPTIONS"
+                :key="'card_id' + si.id + sii"
+                :label="si.id + ''"
+                >{{ si.label }}</el-radio
+              >
+            </el-radio-group>
+          </el-form-item></el-col
+        >
+      </el-row>
+      <div class="flex justify-end">
+        <el-button
+          v-if="TYPE !== 'view'"
+          :loading="loading"
+          :disabled="loading"
+          type="primary"
+          @click="handleSave"
+          >保存</el-button
+        >
+        <el-button @click="showModel = false">取消</el-button>
+      </div>
+    </el-form>
+  </el-dialog>
+</template>

src/views/system/setBtn/config/modal.config.ts

@@ -1,29 +0,0 @@
-import { createOptions } from "../utils/create-options";
-import { ModalConfig } from "/@/components/PageModal/src/types";
-import { STATUS_OPTIONS } from "/@/config/status";
-const modalConfig: ModalConfig = {
-  title: "按钮",
-  colLayout: { span: 24 },
-  itemStyle: {},
-  contact: "setBtn",
-  labelWidth: "100px",
-  formItems: [
-    {
-      field: "action_code",
-      type: "select",
-      label: "按钮名称",
-      placeholder: "按钮名称",
-      options: createOptions(),
-      rules: [{ required: true, trigger: "change", message: "请选择按钮标识" }]
-    },
-    {
-      field: "status",
-      type: "radio",
-      label: "按钮状态",
-      options: STATUS_OPTIONS,
-      rules: [{ required: true, trigger: "change", message: "请选择按钮状态" }]
-    }
-  ]
-};
-
-export default modalConfig;

src/views/system/setBtn/config/search.config.ts

@@ -1,14 +1,7 @@
 import { FormConfig } from "/@/components/PageSearch";
 const searchFormConfig: FormConfig = {
-  isHide: true,
-  formItems: [
-    {
-      field: "menuid",
-      type: "input",
-      placeholder: "菜单ID",
-      isHidden: true
-    }
-  ]
+  isHide: false,
+  formItems: []
 };
 
 export default searchFormConfig;

src/views/system/setBtn/index.vue

@@ -1,31 +1,23 @@
 <script setup lang="ts">
-// import { usePageSearch } from "/@/components/PageSearch";
-import { ref, watch, watchEffect } from "vue";
+import { PageSearch, usePageSearch } from "/@/components/PageSearch";
+import searchConfig from "./config/search.config";
+import { ref } from "vue";
 import TreeMenu from "./components/menu-tree.vue";
-import { PageModal, usePageModal } from "/@/components/PageModal";
 import contentConfig from "./config/content.config";
-import modalConfig from "./config/modal.config";
 import { PageContent } from "/@/components/PageContent";
 import { IMenuTree } from "./types";
-// import { btnList } from "/@/config/btnList";
-// import { usePermission PageContentInstance, } from "/@/hooks/usePermission";
-// import searchConfig from "./config/search.config";
-import type { PageContentInstance } from "/@/components/PageContent";
-const pageContentRef = ref<PageContentInstance | null>(null);
+import { usePermission } from "/@/hooks/usePermission";
+import EditModel from "./components/edit-dialog.vue";
+const { pageContentRef, handleResetClick, handleSearchClick } = usePageSearch(
+  undefined,
+  undefined,
+  searchConfig
+);
+const modelRef = ref<InstanceType<typeof EditModel>>(null);
 const menuid = ref("");
 const pageName = "setBtn";
-const {
-  pageModalRef,
-  handleUpdateData,
-  handleCreateData,
-  handlePreviewData,
-  handleConfrim,
-  defaultInfo
-} = usePageModal({
-  pageContentRef,
-  confirmCallback: () => ({ menuid: menuid.value })
-});
 
+const { hasPermissionWithCode, permissions } = usePermission(pageName);
 //节点选择
 function handleTreeNodeSelect(node: IMenuTree) {
   const { data } = node;
@@ -41,6 +33,9 @@ function initTableData(id: string) {
   menuid.value = id;
   pageContentRef.value.getPageData({ menuid: id });
 }
+function handleAddChangeCheck(item: any, id: string, type: string) {
+  modelRef.value.show(item, id, type, menuid.value);
+}
 </script>
 
 <template>
@@ -53,21 +48,33 @@ function initTableData(id: string) {
             @init-table-data="initTableData"
         /></el-col>
         <el-col :span="19" style="padding-left: 18px; background: transparent">
+          <PageSearch
+            :form-config="searchConfig"
+            @search-btn-click="handleSearchClick"
+            @reset-btn-click="handleResetClick"
+          >
+            <template #action>
+              <el-button
+                type="primary"
+                @click="handleAddChangeCheck({}, '', 'create')"
+                v-if="hasPermissionWithCode('002')"
+              >
+                新增
+              </el-button>
+            </template>
+          </PageSearch>
           <PageContent
             ref="pageContentRef"
+            :powers="permissions"
             :content-config="contentConfig"
-            @create-btn-click="handleCreateData"
-            @preview-btn-click="row => handlePreviewData(row)"
-            @update-btn-click="row => handleUpdateData(row)"
+            @preview-btn-click="
+              row => handleAddChangeCheck(row, row.id, 'view')
+            "
+            @update-btn-click="row => handleAddChangeCheck(row, row.id, 'edit')"
           />
         </el-col>
       </el-row>
-      <PageModal
-        ref="pageModalRef"
-        :modal-config="modalConfig"
-        :default-info="defaultInfo"
-        @confirm-btn-click="handleConfrim"
-      />
+      <EditModel ref="modelRef" @reload="pageContentRef.onSearch()" />
     </div>
   </PageAuth>
 </template>