build

src/api/system/menuOperator/index.ts

@@ -26,5 +26,5 @@ export const httpStatus = (data: object): ResponseType => {
 };
 // 菜单删除
 export const httpDelete = (data: object): ResponseType => {
-  return http.request("post", `${yewuApi}menustatus`, { data });
+  return http.request("post", `${yewuApi}menudel`, { data });
 };

src/api/system/setBtn/index.ts

@@ -8,7 +8,6 @@ interface ResponseType extends Promise<any> {
   code?: number;
   msg?: string;
 }
-
 // 按钮列表
 export const httpList = (data: object): ResponseType => {
   return http.request("post", `${yewuApi}menuaction`, { data });
@@ -21,12 +20,11 @@ export const httpAdd = (data: object): ResponseType => {
 export const httpEdit = (data: object): ResponseType => {
   return http.request("post", `${yewuApi}menuactionsave`, { data });
 };
-
 // 按钮状态
 export const httpStatus = (data: object): ResponseType => {
   return http.request("post", `${yewuApi}menuactionstatus`, { data });
 };
 // 按钮删除
 export const httpDelete = (data: object): ResponseType => {
-  return http.request("post", `${yewuApi}menustatus`, { data });
+  return http.request("post", `${yewuApi}menuactiondel`, { data });
 };

src/style/index.scss

@@ -72,4 +72,7 @@ html {
   content: "";
   display: block;
   clear: both;
+}
+.el-dialog .el-dialog__body{
+  padding-top:8px!important;
 }

src/utils/status.ts

@@ -11,4 +11,8 @@ const menuPrivateList = [
   { value: "1", label: "显示", type: "primary" },
   { value: "0", label: "隐藏", type: "warning" }
 ];
-export { statusList, menuTypeList, menuPrivateList };
+const levelList = [
+  { value: "1", label: "管理员", type: "primary" },
+  { value: "2", label: "专员", type: "warning" }
+];
+export { statusList, menuTypeList, menuPrivateList, levelList };

src/views/interest/account/addEdit.vue

@@ -180,6 +180,7 @@ watch(
     v-model="showModelThis"
     append-to-body
     :width="'900px'"
+    center
     :title="titleType"
     v-loading="loading"
     @close="closeDialog"
@@ -189,7 +190,6 @@ watch(
       :model="ruleForm"
       :rules="rules"
       label-width="90px"
-      style="margin-top: -10px"
       class="demo-ruleForm"
       :size="formSize"
       status-icon

src/views/interest/account/columns.tsx

@@ -1,10 +1,7 @@
 import { ref } from "vue";
 import dayjs from "dayjs";
-import { ElMessageBox } from "element-plus";
-import { message } from "@pureadmin/components";
 import { statusList } from "/@/utils/status";
 export function useColumns() {
-  const switchLoadMap = ref({});
 
   const columns = ref([
     {

src/views/interest/role/addEdit.vue

@@ -1,10 +1,15 @@
 <script setup lang="ts">
-import { httpAdd, httpUpdate, httpMenuAll } from "/@/api/interest/role";
+import {
+  httpAdd,
+  httpUpdate,
+  httpMenuAll,
+  httpDetail
+} from "/@/api/interest/role";
 import { ElMessage, FormInstance, FormRules } from "element-plus";
-import { reactive, ref, watch, nextTick } from "vue";
+import { reactive, ref, watch, nextTick, computed } from "vue";
 import menuType from "./types";
 import { useNav } from "/@/layout/hooks/nav";
-import { isMobile } from "/@/utils/validate";
+import { levelList } from "/@/utils/status";
 const { logout } = useNav();
 const formSize = ref("default");
 const ruleFormRef = ref<FormInstance>();
@@ -21,9 +26,6 @@ const props = defineProps({
   isDetails: {
     type: String,
     default: "add"
-  },
-  sitem: {
-    type: Object as PropType<menuType>
   }
 });
 const showModelThis = ref(false);
@@ -33,59 +35,166 @@ const emit = defineEmits<{
 }>();
 const id = ref("");
 const editType = ref("add");
-const MenuAllList = ref([]);
+const menuactionList = ref([]);
+const action_list = ref([]);
+const action_data_list = ref([]);
+const private_data_list = ref([]);
 const formModel = {
-  id: "", //账户id
-  nickname: "", //真实姓名
-  mobile: "", //手机号
-  email: "", //邮箱
-  role: "" //角色
+  roleid: "",
+  role_name: "",
+  level: "1",
+  action: "",
+  private_data: ""
 };
 const ruleForm = reactive<menuType>(formModel);
 const rules = reactive<FormRules>({
-  nickname: [
-    { required: true, message: "请输入真实姓名", trigger: "blur" },
+  role_name: [
+    { required: true, message: "请输入角色名称", trigger: "blur" },
     { min: 2, max: 12, message: "长度在 2 到 12 个字符", trigger: "blur" }
   ],
-  mobile: [
-    {
-      required: true,
-      validator: (rule, value, callback) => {
-        if (value === "") {
-          callback(new Error("手机号不能为空！"));
-        } else if (!isMobile(value)) {
-          callback(new Error("手机号格式不正确！"));
-        } else {
-          callback();
-        }
-      },
-
-      trigger: "blur"
-    }
-  ],
-
-  role: [
+  level: [
     {
       required: true,
-      message: "请选择角色",
-      trigger: "change"
-    }
-  ],
-  email: [
-    {
-      required: false,
-      message: "请输入邮箱",
+      message: "请选择角色等级",
       trigger: "change"
     }
   ]
 });
+// 全选/全不选
+const handleCheckAllChange = (checkAll, index, item, subIndex) => {
+  menuactionList.value[index].child[subIndex].checkAll = checkAll;
+  // this.$set(menuactionList.value, index, item);
+  menuactionList.value[index].child[subIndex].action.forEach(element => {
+    const findindex = menuactionList.value[index].child[
+      subIndex
+    ].checkList.findIndex(findItem => findItem === element.id);
+    if (checkAll && findindex == -1) {
+      menuactionList.value[index].child[subIndex].checkList.push(element.id);
+    } else if (!checkAll && findindex > -1) {
+      menuactionList.value[index].child[subIndex].checkList.splice(
+        findindex,
+        1
+      );
+    }
+  });
+};
+// 全选/全不选
+const handleFieldAllChange = (fieldAll, index, item, subIndex) => {
+  menuactionList.value[index].child[subIndex].fieldAll = fieldAll;
+  // this.$set(menuactionList.value, index, item);
+  menuactionList.value[index].child[subIndex].action_data.forEach(element => {
+    const findindex = menuactionList.value[index].child[
+      subIndex
+    ].fieldList.findIndex(findItem => findItem === element.id);
+    if (fieldAll && findindex == -1) {
+      menuactionList.value[index].child[subIndex].fieldList.push(element.id);
+    } else if (!fieldAll && findindex > -1) {
+      menuactionList.value[index].child[subIndex].fieldList.splice(
+        findindex,
+        1
+      );
+    }
+  });
+};
+// 复选框组内的选中/不选中
+const handleCheckedGroupChange = (event, index, item, subIndex) => {
+  menuactionList.value[index].child[subIndex].checkAll = menuactionList.value[
+    index
+  ].child[subIndex].action.every(
+    evitem =>
+      menuactionList.value[index].child[subIndex].checkList.findIndex(
+        finditem => finditem === evitem.id
+      ) > -1
+  );
+  // this.$set(menuactionList.value, index, item);
+};
+// 复选框组内的选中/不选中
+const handleFieldGroupChange = (event, index, item, subIndex) => {
+  menuactionList.value[index].child[subIndex].fieldAll = menuactionList.value[
+    index
+  ].child[subIndex].action_data.every(
+    evitem =>
+      menuactionList.value[index].child[subIndex].fieldList.findIndex(
+        finditem => finditem === evitem.id
+      ) > -1
+  );
+  // this.$set(menuactionList.value, index, item);
+};
+
+// 单项复选框选中/不选中
+const handleCheckedChange = (checked, id, index, subIndex, item) => {
+  // console.log(checked, id, index, subIndex);
+  if (checked) {
+    // 选中时检查pid的选中状态
+    menuactionList.value[index].child[subIndex].checkList.indexOf(id) == -1 &&
+      menuactionList.value[index].child[subIndex].checkList.push(id);
+  } else {
+    const find = menuactionList.value[index].child[
+      subIndex
+    ].checkList.findIndex(e => e == id);
+    if (find > -1) {
+      menuactionList.value[index].child[subIndex].checkList.splice(find, 1);
+    }
+    menuactionList.value[index].child[subIndex].checkAll = false;
+  }
+  // this.$set(menuactionList.value, index, item);
+};
+// 单项复选框选中/不选中
+const handleFieldChange = (checked, id, index, subIndex, item) => {
+  // console.log(checked, id, index, subIndex);
+  if (checked) {
+    // 选中时检查pid的选中状态
+    menuactionList.value[index].child[subIndex].fieldList.indexOf(id) == -1 &&
+      menuactionList.value[index].child[subIndex].fieldList.push(id);
+  } else {
+    const find = menuactionList.value[index].child[
+      subIndex
+    ].fieldList.findIndex(e => e == id);
+    if (find > -1) {
+      menuactionList.value[index].child[subIndex].fieldList.splice(find, 1);
+    }
+    menuactionList.value[index].child[subIndex].fieldAll = false;
+  }
+  // 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) => {
     if (valid) {
       if (loading.value === true) return;
       loading.value = true;
-      const model = Object.assign({}, ruleForm);
+      const { level, role_name, roleid } = ruleForm;
+
+      action_list.value = []; // 字段数据
+      action_data_list.value = []; // 功能数据
+      private_data_list.value = [];
+      console.log(menuactionList.value);
+      menuactionList.value.forEach(x => {
+        x.child.forEach(y => {
+          action_list.value.push(...y.fieldList);
+          action_data_list.value.push(...y.checkList);
+          if (y.is_private_change === "1") {
+            private_data_list.value.push(y.id);
+          }
+        });
+      });
+      if (action_data_list.value.length === 0) {
+        ElMessage.error("请选择功能!");
+        loading.value = false;
+        return;
+      }
+      let model = {
+        level,
+        role_name,
+        roleid,
+        action: action_data_list.value, //按钮权限
+        private_data: private_data_list.value //私有权限
+      };
+
+      if (editType.value === "add") {
+        delete model["roleid"];
+      }
       const { code, message } =
         editType.value === "add"
           ? await httpAdd(model)
@@ -131,47 +240,193 @@ async function initForm(item: Object) {
   loading.value = true;
   switch (editType.value) {
     case "add":
-      titleType.value = "新建账号";
+      titleType.value = "新建角色";
       break;
     case "edit":
-      titleType.value = "编辑账号";
+      titleType.value = "编辑角色";
       break;
     case "view":
-      titleType.value = "账号详情";
+      titleType.value = "角色详情";
       break;
     default:
-      titleType.value = "新建账号";
+      titleType.value = "新建角色";
   }
   const { code, data, message } = await httpMenuAll({});
   if (code === 0) {
-    MenuAllList.value = data ?? [];
+    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: "私有数据"
+            }
+          ];
+        }
+        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);
-  console.log(ruleForm);
+  if (editType.value !== "add") {
+    await initData();
+  }
+  // console.log(ruleForm);
   loading.value = false;
 }
+const initData = async () => {
+  const { code, data, message } = await httpDetail({ roleid: id.value });
+  if (code === 0) {
+    // action_list.value = [];
+    // action_data_list.value = [];
+    // private_data_list.value = [];
+    const { action, action_data, private_data, role_name, level } = data ?? {};
+    console.log(action ?? []);
+    console.log(action_data);
+    console.log(private_data);
+    ruleForm.roleid = id.value;
+    ruleForm.role_name = role_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) {
+        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);
+  } else if (code >= 100 && code <= 104) {
+    logout();
+  } else {
+    ElMessage.warning(message);
+  }
+};
 watch(
   () => {
     return props.showModel;
   },
   () => {
-    const { showModel, itemId, isDetails, sitem } = props;
+    const { showModel, itemId, isDetails } = props;
     showModelThis.value = showModel;
     if (showModelThis.value) {
       id.value = itemId;
       editType.value = isDetails;
-      if (isDetails !== "add") {
-        initForm(sitem);
-      } else {
-        initForm(formModel);
-      }
+      initForm(formModel);
     }
   }
 );
+let indeterminateCheck = computed(() => {
+  return item => {
+    // 选中子节点的数量
+    const selectItemLength = item.action.filter(
+      filitem =>
+        item.checkList.findIndex(finditem => finditem === filitem.id) > -1
+    ).length;
+    // 未选中子节点的数量
+    const noSlectItemLength = item.action.filter(
+      filitem =>
+        item.checkList.findIndex(finditem => finditem === filitem.id) == -1
+    ).length;
+    // // 当前节点的index
+    // 存在选中子节点且存在未选中子节点为中间态
+    return selectItemLength > 0 && noSlectItemLength > 0;
+  };
+});
+
+let indeterminateField = computed(() => {
+  return item => {
+    // console.log(item);
+    // 选中子节点的数量
+    const selectItemLength = item.action_data.filter(
+      filitem =>
+        item.fieldList.findIndex(finditem => finditem === filitem.id) > -1
+    ).length;
+    // 未选中子节点的数量
+    const noSlectItemLength = item.action_data.filter(
+      filitem =>
+        item.fieldList.findIndex(finditem => finditem === filitem.id) == -1
+    ).length;
+    // // 当前节点的index
+    // 存在选中子节点且存在未选中子节点为中间态
+    return selectItemLength > 0 && noSlectItemLength > 0;
+  };
+});
 </script>
 
 <template>
@@ -179,6 +434,8 @@ watch(
     :close-on-press-escape="false"
     v-model="showModelThis"
     append-to-body
+    center
+    :top="'5vh'"
     :width="'900px'"
     :title="titleType"
     v-loading="loading"
@@ -189,53 +446,214 @@ watch(
       :model="ruleForm"
       :rules="rules"
       label-width="90px"
-      style="margin-top: -10px"
-      class="demo-ruleForm"
+      class="role-addedit"
       :size="formSize"
       status-icon
     >
       <el-row>
-        <el-col :span="8">
-          <el-form-item label="真实姓名" prop="nickname">
+        <el-col :span="12">
+          <el-form-item label="角色名称" prop="role_name">
             <el-input
-              v-model="ruleForm.nickname"
+              v-model="ruleForm.role_name"
               :disabled="editType === 'view'"
-              placeholder="真实姓名"
+              placeholder="角色名称"
             /> </el-form-item
         ></el-col>
-        <el-col :span="8">
-          <el-form-item label="手机号" prop="mobile">
-            <el-input
-              v-model="ruleForm.mobile"
+        <el-col :span="12">
+          <el-form-item label="角色等级" prop="level">
+            <el-select
+              v-model="ruleForm.level"
+              style="width: 100%"
               :disabled="editType === 'view'"
-              :maxlength="11"
-              placeholder="手机号"
-            /> </el-form-item
-        ></el-col>
-        <el-col :span="8">
-          <el-form-item label="邮箱" prop="email">
-            <el-input
-              v-model="ruleForm.email"
-              :disabled="editType === 'view'"
-              placeholder="邮箱"
-            /> </el-form-item
+              placeholder="菜单类型"
+            >
+              <el-option
+                v-for="(si, sii) in levelList"
+                :key="'type' + si.value + sii"
+                :label="si.label"
+                :value="si.value"
+              />
+            </el-select> </el-form-item
         ></el-col>
         <el-col :span="24">
-          <el-form-item label="角色" prop="role">
-            <el-radio-group
-              v-model="ruleForm.role"
-              :disabled="editType === 'view'"
-            >
-              <el-radio
-                v-for="(si, sii) in MenuAllList"
-                :key="si.id + sii"
-                :label="si.id"
-                :disabled="si.status !== '1'"
-                >{{ si.role_name }}</el-radio
-              >
-            </el-radio-group>
-          </el-form-item></el-col
-        >
+          <div class="quanxian-main">
+            <div class="quanxian-title">
+              <div style="color: #ff8888">*</div>
+              <div>功</div>
+              <div>能</div>
+              <div>权</div>
+              <div>限</div>
+            </div>
+            <div class="rule-view">
+              <div class="rule-list">
+                <el-row
+                  v-for="(item, index) in menuactionList"
+                  :key="'menu' + item.id + index"
+                >
+                  <el-col
+                    v-if="item.child && item.child.length > 0"
+                    class="ffff"
+                    :span="24"
+                  >
+                    <div class="ftitle">
+                      <div
+                        v-for="(si, sii) in item.menu_name"
+                        :key="'title' + sii + si"
+                      >
+                        {{ si }}
+                      </div>
+                    </div>
+                    <div class="fbody">
+                      <div
+                        class="fbody-item"
+                        v-for="(subItem, subIndex) in item.child"
+                        :key="'yemian' + subItem.id + subIndex"
+                      >
+                        <template
+                          v-if="
+                            !(
+                              subItem.action &&
+                              subItem.action.length === 0 &&
+                              subItem.action_data &&
+                              subItem.action_data.length === 0
+                            )
+                          "
+                          ><div class="stitle">
+                            <span class="_h2">{{ subItem.menu_name }}</span>
+                            <el-radio-group
+                              style="margin: 0 0 0 20px"
+                              :size="'mini'"
+                              v-if="
+                                subItem &&
+                                subItem.private &&
+                                subItem.private.length === 2
+                              "
+                              v-model="subItem.is_private_change"
+                            >
+                              <el-radio-button
+                                v-for="(radioN, ri) in subItem.private"
+                                :key="radioN.label + ri"
+                                :label="radioN.id"
+                                >{{ radioN.label }}</el-radio-button
+                              >
+                            </el-radio-group>
+                          </div>
+                          <div
+                            class="scheck"
+                            v-if="subItem.action && subItem.action.length > 0"
+                          >
+                            <div class="checkAll">
+                              <el-checkbox
+                                v-model="subItem.checkAll"
+                                :disabled="editType === 'view'"
+                                :indeterminate="indeterminateCheck(subItem)"
+                                @change="
+                                  handleCheckAllChange(
+                                    $event,
+                                    index,
+                                    item,
+                                    subIndex
+                                  )
+                                "
+                                >功能全选</el-checkbox
+                              >
+                            </div>
+                            <div class="checkItem">
+                              <el-checkbox-group
+                                v-model="subItem.checkList"
+                                :disabled="editType === 'view'"
+                                @change="
+                                  handleCheckedGroupChange(
+                                    $event,
+                                    index,
+                                    item,
+                                    subIndex
+                                  )
+                                "
+                              >
+                                <el-checkbox
+                                  :disabled="editType === 'view'"
+                                  v-for="children in subItem.action"
+                                  :key="'checkItem' + children.id"
+                                  :label="children.id"
+                                  @change="
+                                    handleCheckedChange(
+                                      $event,
+                                      children.id,
+                                      index,
+                                      subIndex,
+                                      item
+                                    )
+                                  "
+                                  >{{ children.action_name }}</el-checkbox
+                                >
+                              </el-checkbox-group>
+                            </div>
+                          </div>
+                          <div
+                            class="sfield"
+                            v-if="
+                              subItem.action_data &&
+                              subItem.action_data.length > 0
+                            "
+                          >
+                            <div class="checkAll">
+                              <el-checkbox
+                                v-model="subItem.fieldAll"
+                                :disabled="editType === 'view'"
+                                :indeterminate="indeterminateField(subItem)"
+                                @change="
+                                  handleFieldAllChange(
+                                    $event,
+                                    index,
+                                    item,
+                                    subIndex
+                                  )
+                                "
+                                >字段全选</el-checkbox
+                              >
+                            </div>
+                            <div class="checkItem">
+                              <el-checkbox-group
+                                v-model="subItem.fieldList"
+                                :disabled="editType === 'view'"
+                                @change="
+                                  handleFieldGroupChange(
+                                    $event,
+                                    index,
+                                    item,
+                                    subIndex
+                                  )
+                                "
+                              >
+                                <el-checkbox
+                                  v-for="children in subItem.action_data"
+                                  :key="'FieldItem' + children.id"
+                                  :label="children.id"
+                                  :disabled="editType === 'view'"
+                                  @change="
+                                    handleFieldChange(
+                                      $event,
+                                      children.id,
+                                      index,
+                                      subIndex,
+                                      item
+                                    )
+                                  "
+                                  >{{ children.field_name }}</el-checkbox
+                                >
+                              </el-checkbox-group>
+                            </div>
+                          </div>
+                        </template>
+                      </div>
+                    </div>
+                  </el-col>
+                </el-row>
+              </div>
+            </div>
+          </div>
+        </el-col>
       </el-row>
       <el-col :span="24" class="clear">
         <el-button
@@ -253,3 +671,100 @@ watch(
     </el-form>
   </el-dialog>
 </template>
+<style lang="scss" scoped>
+.role-addedit {
+  .quanxian-main {
+    width: 100%;
+    display: flex;
+    .quanxian-title {
+      width: 50px;
+      position: relative;
+      padding: 6px 0 0 7px;
+      text-align: center;
+      div {
+        font-size: 14px;
+        color: #606266;
+        font-weight: 700;
+      }
+    }
+
+    .rule-view {
+      width: calc(100% - 50px);
+      position: relative;
+      height: 550px;
+      overflow-y: scroll;
+      border-top: 1px solid #dfe6ec;
+      border-left: 1px solid #dfe6ec;
+      // padding: 0 0 0 16px;
+      .ffff {
+        width: 100%;
+        display: flex;
+        align-items: stretch;
+        .ftitle {
+          width: 40px;
+          text-align: center;
+          border-right: 1px solid #dfe6ec;
+          border-bottom: 1px solid #dfe6ec;
+          padding: 10px 0;
+          display: flex;
+          align-items: center;
+          flex-direction: column;
+          justify-content: center;
+          div {
+            font-size: 17px;
+            height: 22px;
+            line-height: 22px;
+            text-align: center;
+            color: #97a8be;
+          }
+        }
+        .fbody {
+          width: calc(100% - 40px);
+          border-right: 1px solid #dfe6ec;
+          .fbody-item {
+            // border-right: 1px solid #dfe6ec;
+            border-bottom: 1px solid #dfe6ec;
+
+            .stitle {
+              padding: 18px 18px 12px 18px;
+              border-bottom: 1px dashed #dfe6ec;
+              font-size: 14px;
+              color: #97a8be;
+              ._h2 {
+                display: inline-block;
+                width: 100px;
+              }
+            }
+            .scheck {
+              padding: 15px 0 10px 0;
+              display: flex;
+              width: 100%;
+              .checkAll {
+                width: 140px;
+                text-align: right;
+                padding: 0 35px 0 0;
+              }
+              .checkItem {
+                width: calc(100% - 140px);
+              }
+            }
+            .sfield {
+              padding: 0 0 10px 0;
+              display: flex;
+              width: 100%;
+              .checkAll {
+                width: 140px;
+                text-align: right;
+                padding: 0 35px 0 0;
+              }
+              .checkItem {
+                width: calc(100% - 140px);
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>

src/views/interest/role/columns.tsx

@@ -1,8 +1,7 @@
 import { ref } from "vue";
 import dayjs from "dayjs";
-import { statusList } from "/@/utils/status";
+import { statusList, levelList } from "/@/utils/status";
 export function useColumns() {
-
   const columns = ref([
     {
       type: "selection",
@@ -20,7 +19,23 @@ export function useColumns() {
       label: "角色名称",
       prop: "role_name"
     },
-
+    {
+      label: "等级",
+      prop: "level",
+      cellRenderer: ({ row, props }) => (
+        <el-tag
+          size={props.size}
+          type={
+            (levelList.find(item => item.value == row.level + "") || {}).type ||
+            "info"
+          }
+          effect="plain"
+        >
+          {(levelList.find(item => item.value == row.level + "") || {}).label ||
+            "--"}
+        </el-tag>
+      )
+    },
     {
       label: "状态",
       prop: "status",
@@ -38,6 +53,7 @@ export function useColumns() {
         </el-tag>
       )
     },
+
     {
       label: "创建时间",
       prop: "createTime",

src/views/interest/role/index.vue

@@ -9,7 +9,6 @@ import { type PaginationProps } from "@pureadmin/table";
 import { useRenderIcon } from "/@/components/ReIcon/src/hooks";
 import { useNav } from "/@/layout/hooks/nav";
 import { statusList } from "/@/utils/status";
-import menuType from "./types";
 import addEdit from "./addEdit.vue";
 const { logout } = useNav();
 defineOptions({
@@ -30,13 +29,6 @@ const { columns } = useColumns();
 const showModel = ref(false);
 const itemId = ref("");
 const isDetails = ref("add");
-const sitem = reactive<menuType>({
-  id: "", //账户id
-  role_name: "", //真实姓名
-  mobile: "", //手机号
-  email: "", //邮箱
-  role: "" //角色
-});
 const formRef = ref<FormInstance>();
 
 const pagination = reactive<PaginationProps>({
@@ -99,12 +91,9 @@ async function resetSearch() {
   await onSearch();
 }
 //新建/编辑/详情弹窗
-function editItem(id, type, item) {
+function editItem(id, type) {
   itemId.value = id;
   isDetails.value = type;
-  for (let key in item) {
-    sitem[key] = item[key];
-  }
   showModel.value = true;
 }
 const submitRefresh = () => {
@@ -128,7 +117,7 @@ onMounted(() => {
 </script>
 
 <template>
-  <div class="main">
+  <div class="main role">
     <el-form
       ref="formRef"
       :inline="true"
@@ -179,7 +168,7 @@ onMounted(() => {
         <el-button
           type="primary"
           :icon="useRenderIcon('add')"
-          @click="editItem('', 'add', {})"
+          @click="editItem('', 'add')"
         >
           新增角色
         </el-button>
@@ -207,7 +196,7 @@ onMounted(() => {
               link
               type="primary"
               :size="size"
-              @click="editItem(row.id, 'view', row)"
+              @click="editItem(row.id, 'view')"
               :icon="useRenderIcon('eye-view')"
             />
             <el-button
@@ -215,7 +204,7 @@ onMounted(() => {
               link
               type="primary"
               :size="size"
-              @click="editItem(row.id, 'edit', row)"
+              @click="editItem(row.id, 'edit')"
               :icon="useRenderIcon('edits')"
             />
             <el-popconfirm
@@ -246,7 +235,6 @@ onMounted(() => {
       :show-model="showModel"
       @refresh="submitRefresh"
       @cancel="submitCancel"
-      :sitem="sitem"
     />
   </div>
 </template>

src/views/system/menuOperator/addEdit.vue

@@ -205,6 +205,7 @@ watch(
     :close-on-press-escape="false"
     v-model="showModelThis"
     append-to-body
+    center
     :width="'700px'"
     :title="titleType"
     v-loading="loading"

src/views/system/menuOperator/index.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { useColumns } from "./columns";
 import { handleTree } from "@pureadmin/utils";
-import { httpList, httpStatus } from "/@/api/system/menuOperator";
+import { httpList, httpStatus, httpDelete } from "/@/api/system/menuOperator";
 import { ElMessage } from "element-plus";
 import { reactive, ref, onMounted } from "vue";
 import { TableProBar } from "/@/components/ReTable";
@@ -52,10 +52,19 @@ const handleUpdate = async row => {
   }
 };
 
-function handleDelete(row) {
-  console.log(row);
-  console.log("暂无删除接口");
-}
+const handleDelete = async row => {
+  const { id } = row;
+  const { code, message } = await httpDelete({
+    id
+  });
+  if (code === 0) {
+    onSearch();
+  } else if (code > 100 && code < 140) {
+    logout();
+  } else {
+    ElMessage.error(message);
+  }
+};
 
 function handleSelectionChange(val) {
   console.log("handleSelectionChange", val);
@@ -183,7 +192,7 @@ onMounted(() => {
                   "
                 /> </template
             ></el-popconfirm>
-            <!-- <el-popconfirm title="是否确认删除?" @confirm="handleDelete(row)">
+            <el-popconfirm title="是否确认删除?" @confirm="handleDelete(row)">
               <template #reference>
                 <el-button
                   class="reset-margin"
@@ -193,7 +202,7 @@ onMounted(() => {
                   :icon="useRenderIcon('delete')"
                 />
               </template>
-            </el-popconfirm> -->
+            </el-popconfirm>
             <el-button
               v-if="row.menu_type + '' === '1'"
               class="reset-margin"