暂存一下

src/api/interest/action/index.ts

@@ -0,0 +1,43 @@
+import { http } from "/@/utils/http";
+import { loadEnv } from "@build/index";
+const { VITE_PROXY_DOMAIN_REAL, VITE_PROXY_USER_REAL } = loadEnv();
+const userAPi = VITE_PROXY_DOMAIN_REAL;
+const yewuApi = VITE_PROXY_USER_REAL + "/admin/";
+interface ResponseType extends Promise<any> {
+  data?: object;
+  code?: number;
+  msg?: string;
+}
+// 添加
+export const httpAdd = (data: object): ResponseType => {
+  return http.request("post", `${yewuApi}roleadd`, { data });
+};
+
+// 列表
+export const httpList = (data: object): ResponseType => {
+  return http.request("post", `${yewuApi}rolelist`, { data });
+};
+// 详情
+export const httpDetail = (data: object): ResponseType => {
+  return http.request("post", `${yewuApi}roleinfo`, { data });
+};
+// 更新
+export const httpUpdate = (data: object): ResponseType => {
+  return http.request("post", `${yewuApi}rolesave`, { data });
+};
+// 状态
+export const httpStatus = (data: object): ResponseType => {
+  return http.request("post", `${yewuApi}rolestatus`, { data });
+};
+// 删除
+export const httpDelete = (data: object): ResponseType => {
+  return http.request("post", `${yewuApi}menustatus`, { data });
+};
+// 全部菜单按钮
+export const httpMenuAll = (data: object): ResponseType => {
+  return http.request("post", `${yewuApi}menuactionlist`, { data });
+};
+// 全部角色
+export const httpRoleAll = (data: object): ResponseType => {
+  return http.request("post", `${yewuApi}roleall`, { data });
+};

src/components/ReIcon/src/iconifyIconOffline.ts

@@ -31,6 +31,7 @@ import Refresh from "@iconify-icons/ep/refresh";
 import EditPen from "@iconify-icons/ep/edit-pen";
 import Delete from "@iconify-icons/ep/delete";
 import More from "@iconify-icons/ep/more-filled";
+import Loading from "@iconify-icons/ep/loading";
 addIcon("check", Check);
 addIcon("menu", Menu);
 addIcon("home-filled", HomeFilled);
@@ -60,7 +61,7 @@ addIcon("refresh", Refresh);
 addIcon("edits", EditPen);
 addIcon("delete", Delete);
 addIcon("more", More);
-
+addIcon("Loading", Loading);
 // remixicon
 import ArrowRightSLine from "@iconify-icons/ri/arrow-right-s-line";
 import ArrowLeftSLine from "@iconify-icons/ri/arrow-left-s-line";

src/layout/components/appMain.vue

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

src/layout/frameView.vue

@@ -63,6 +63,6 @@ onMounted(() => {
 }
 
 .main-content {
-  margin: 2px 0 0 !important;
+  padding: 0 !important;
 }
 </style>

src/views/components/map/index.vue

@@ -12,6 +12,6 @@ defineOptions({
 
 <style scoped>
 .main-content {
-  margin: 2px 0 0 !important;
+  margin: 0 !important;
 }
 </style>

src/views/interest/action/columns.tsx

@@ -1,46 +1,74 @@
 import { ref } from "vue";
 import dayjs from "dayjs";
+import { ElMessageBox } from "element-plus";
+import { Switch, message } from "@pureadmin/components";
 
 export function useColumns() {
+  const switchLoadMap = ref({});
+
   const columns = ref([
     {
       type: "selection",
       width: 55,
-      align: "left",
       hide: ({ checkList }) => !checkList.includes("勾选列")
     },
     {
       label: "序号",
       type: "index",
-      width: 60,
-      align: "left",
+      width: 70,
       hide: ({ checkList }) => !checkList.includes("序号列")
     },
     {
-      label: "部门名称",
-      prop: "name",
-      width: 180,
-      align: "left"
+      label: "用户编号",
+      prop: "id"
     },
     {
-      label: "排序",
-      prop: "sort",
-      width: 60
+      label: "用户名称",
+      prop: "username"
     },
     {
-      label: "状态",
-      prop: "status",
-      width: 80,
+      label: "用户昵称",
+      prop: "nickname"
+    },
+    {
+      label: "性别",
+      prop: "sex",
       cellRenderer: ({ row, props }) => (
         <el-tag
           size={props.size}
-          type={row.status === 1 ? "danger" : "success"}
+          type={row.sex === 1 ? "danger" : ""}
           effect="plain"
         >
-          {row.status === 0 ? "关闭" : "开启"}
+          {row.sex === 1 ? "女" : "男"}
         </el-tag>
       )
     },
+    {
+      label: "部门",
+      prop: "dept",
+      formatter: ({ dept }) => dept.name
+    },
+    {
+      label: "手机号码",
+      prop: "mobile"
+    },
+    {
+      label: "状态",
+      prop: "status",
+      width: 130,
+      cellRenderer: scope => (
+        <Switch
+          size={scope.props.size === "small" ? "small" : "default"}
+          loading={switchLoadMap.value[scope.index]?.loading}
+          v-model:checked={scope.row.status}
+          checkedValue={1}
+          unCheckedValue={0}
+          checked-children="已开启"
+          un-checked-children="已关闭"
+          onChange={() => onChange(scope)}
+        />
+      )
+    },
     {
       label: "创建时间",
       width: 180,
@@ -48,18 +76,54 @@ export function useColumns() {
       formatter: ({ createTime }) =>
         dayjs(createTime).format("YYYY-MM-DD HH:mm:ss")
     },
-    {
-      label: "备注",
-      prop: "remark"
-    },
     {
       label: "操作",
       fixed: "right",
-      width: 140,
+      width: 180,
       slot: "operation"
     }
   ]);
 
+  function onChange({ row, index }) {
+    ElMessageBox.confirm(
+      `确认要<strong>${
+        row.status === 0 ? "停用" : "启用"
+      }</strong><strong style='color:var(--el-color-primary)'>${
+        row.username
+      }</strong>用户吗?`,
+      "系统提示",
+      {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+        dangerouslyUseHTMLString: true,
+        draggable: true
+      }
+    )
+      .then(() => {
+        switchLoadMap.value[index] = Object.assign(
+          {},
+          switchLoadMap.value[index],
+          {
+            loading: true
+          }
+        );
+        setTimeout(() => {
+          switchLoadMap.value[index] = Object.assign(
+            {},
+            switchLoadMap.value[index],
+            {
+              loading: false
+            }
+          );
+          message.success("已成功修改用户状态");
+        }, 300);
+      })
+      .catch(() => {
+        row.status === 0 ? (row.status = 1) : (row.status = 0);
+      });
+  }
+
   return {
     columns
   };

src/views/interest/action/index.vue

@@ -1,146 +1,727 @@
 <script setup lang="ts">
-import { useColumns } from "./columns";
-import { handleTree } from "@pureadmin/utils";
-import { getDeptList } from "/@/api/system";
-import { FormInstance } from "element-plus";
-import { reactive, ref, onMounted } from "vue";
-import { TableProBar } from "/@/components/ReTable";
+import {
+  httpRoleAll,
+  httpMenuAll,
+  httpUpdate,
+  httpDetail
+} from "/@/api/interest/action";
+import { reactive, ref, onMounted, computed } from "vue";
+import { ElMessage } from "element-plus";
 import { useRenderIcon } from "/@/components/ReIcon/src/hooks";
-
+import { useNav } from "/@/layout/hooks/nav";
+const { logout } = useNav();
 defineOptions({
-  name: "Dept"
+  name: "User"
 });
 
-const form = reactive({
-  user: "",
-  status: ""
+const roleList = ref([]);
+const loading = ref(true);
+const menuactionList = ref([]);
+const editType = ref("add");
+const action_list = ref([]);
+const action_data_list = ref([]);
+const private_data_list = ref([]);
+const ruleForm = reactive<menuType>({
+  roleid: "",
+  role_name: "",
+  level: "1",
+  action: [],
+  private_data: []
 });
-let dataList = ref([]);
-let loading = ref(true);
-const { columns } = useColumns();
-
-const formRef = ref<FormInstance>();
-const tableRef = ref();
+// 全选/全不选
+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);
+};
 
-function handleUpdate(row) {
-  console.log(row);
-}
+// 单项复选框选中/不选中
+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 () => {
+  action_list.value = [];
+  action_data_list.value = [];
+  private_data_list.value = [];
+  menuactionList.value.forEach(x => {
+    x.child.forEach(y => {
+      action_data_list.value.push(...y.fieldList);
+      action_list.value.push(...y.checkList);
+      if (y.is_private_change === "1") {
+        private_data_list.value.push(y.id);
+      }
+    });
+  });
 
-function handleDelete(row) {
-  console.log(row);
-}
+  // this.action_data.length === 0 || 和字段
+  if (action_list.value.length === 0) {
+    ElMessage.error("请选择功能!");
+    return;
+  }
+  const model = {
+    // roleid: this.roleActive.id,
+    // role_name: this.ruleForm.role_name,
+    // level: this.ruleForm.level,
+    // action: this.action,
+    // action_data: this.action_data,
+    // private_data: arr,
+  };
 
-function handleSelectionChange(val) {
-  console.log("handleSelectionChange", val);
-}
+  loading.value = true;
+  const { code, data, message } = await httpUpdate(model);
+  loading.value = false;
+  if (code === 0) {
+    // this.$notify.success({
+    //   title: "保存成功！",
+    //   message: "",
+    // });
+  } else if (code >= 100 && code <= 104) {
+    logout();
+  } else {
+    ElMessage.error(message);
+  }
+};
+const getMenuAll = async () => {
+  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: "私有数据"
+            }
+          ];
+        }
+        return y;
+      });
+      return x;
+    });
+    menuactionList.value = arr;
+  } else if (code > 100 && code < 140) {
+    logout();
+  } else {
+    ElMessage.error(message);
+  }
+};
+const getRoleAll = async () => {
+  const { code, data, message } = await httpRoleAll({});
+  if (code === 0) {
+    roleList.value = data ?? [];
+  } else if (code > 100 && code < 140) {
+    logout();
+  } else {
+    ElMessage.error(message);
+  }
+};
 
-async function onSearch() {
+// 刷新角色详情
+const refreshRoleDetail = async roleid => {
   loading.value = true;
-  let { data } = await getDeptList();
-  dataList.value = handleTree(data);
-  setTimeout(() => {
+  const { code, data, message } = await httpDetail({ roleid });
+  if (code === 0) {
+    const { action, action_data, private_data, id, role_name, level } =
+      data ?? {};
+    ruleForm.roleid = id;
+    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 ?? [];
+    await refreshRoleCheckAllStatus();
+    loading.value = false;
+  } else if (code >= 100 && code <= 104) {
+    loading.value = false;
+    logout();
+  } else {
     loading.value = false;
-  }, 500);
+    ElMessage.error(message);
+  }
+};
+// 刷新选择状态
+const refreshRoleCheckAllStatus = async () => {
+  const list = JSON.parse(JSON.stringify(menuactionList.value));
+  let arr = list.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;
+  });
+  this.actionList = arr;
+  this.actionList.forEach((x, xi) => {
+    if (x.child && x.child.length > 0) {
+      x.child.forEach((y, yi) => {
+        let id = y.id;
+        if (y.action && y.action.length > 0) {
+          y.action.forEach(z => {
+            const Aindex = this.action.findIndex(a => a === z.id);
+            if (Aindex !== -1) {
+              y.checkList.push(this.action[Aindex]);
+            }
+            if (y.action.length === y.checkList.length) {
+              y.checkAll = true;
+            }
+          });
+        }
+        if (y.action_data && y.action_data.length > 0) {
+          y.action_data.map(z => {
+            const Bindex = this.action_data.findIndex(a => a === z.id);
+            if (Bindex !== -1) {
+              y.fieldList.push(this.action_data[Bindex]);
+            }
+          });
+          if (y.action_data.length === y.fieldList.length) {
+            y.fieldAll = true;
+          }
+        }
+        if (y.private && y.private.length === 2) {
+          let Cindex = this.private_data.findIndex(a => a === y.id);
+          if (Cindex !== -1) {
+            y.is_private_change = "1";
+          } else {
+            y.is_private_change = "0";
+          }
+        } else {
+          y.is_private_change = "0";
+        }
+      });
+    }
+    this.$set(this.actionList, xi, x);
+  });
+};
+async function onSearch() {
+  loading.value = true;
+  await getRoleAll();
+  await getMenuAll();
+  if (roleList.value.length > 0) {
+    await refreshRoleDetail(roleList.value[0].id);
+  }
+  loading.value = false;
 }
 
-const resetForm = (formEl: FormInstance | undefined) => {
-  if (!formEl) return;
-  formEl.resetFields();
-  onSearch();
-};
+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;
+  };
+});
 onMounted(() => {
   onSearch();
 });
 </script>
 
 <template>
-  <div class="main">
-    <el-form
-      ref="formRef"
-      :inline="true"
-      :model="form"
-      class="bg-white w-99/100 pl-8 pt-4"
-    >
-      <el-form-item label="部门名称：" prop="user">
-        <el-input v-model="form.user" placeholder="请输入部门名称" clearable />
-      </el-form-item>
-      <el-form-item label="状态：" prop="status">
-        <el-select v-model="form.status" placeholder="请选择状态" clearable>
-          <el-option label="开启" value="1" />
-          <el-option label="关闭" value="0" />
-        </el-select>
-      </el-form-item>
-      <el-form-item>
-        <el-button
-          type="primary"
-          :icon="useRenderIcon('search')"
-          :loading="loading"
-          @click="onSearch"
-        >
-          搜索
-        </el-button>
-        <el-button :icon="useRenderIcon('refresh')" @click="resetForm(formRef)">
-          重置
-        </el-button>
-      </el-form-item>
-    </el-form>
-
-    <TableProBar
-      title="部门列表"
-      :loading="loading"
-      :tableRef="tableRef?.getTableRef()"
-      :dataList="dataList"
-      @refresh="onSearch"
-    >
-      <template #buttons>
-        <el-button type="primary" :icon="useRenderIcon('add')">
-          新增部门
-        </el-button>
-      </template>
-      <template v-slot="{ size, checkList }">
-        <PureTable
-          ref="tableRef"
-          border
-          align="center"
-          row-key="id"
-          table-layout="auto"
-          default-expand-all
-          :size="size"
-          :data="dataList"
-          :columns="columns"
-          :checkList="checkList"
-          :header-cell-style="{ background: '#fafafa', color: '#606266' }"
-          @selection-change="handleSelectionChange"
-        >
-          <template #operation="{ row }">
+  <div class="action">
+    <div class="action_show">
+      <div class="action_show_box">
+        <ul class="role-list">
+          <p class="role-list__title">角色列表</p>
+          <!-- :class="{ active: item.id == roleActive.id }" -->
+          <!-- @click="!isBtnDisabled && switchRoleHandle(item)" -->
+          <!-- v-if="isBtnDisabled && item.id == roleActive.id" -->
+          <p
+            v-if="roleList.length == 0"
+            style="line-height: 60px; text-align: center; color: #909399"
+          >
+            暂无数据
+          </p>
+          <li
+            v-for="(item, index) in roleList"
+            :key="'role' + index"
+            class="role-list__item"
+          >
+            {{ item.role_name }}
             <el-button
-              class="reset-margin"
+              class="fr"
               link
-              type="primary"
-              :size="size"
-              @click="handleUpdate(row)"
-              :icon="useRenderIcon('edits')"
+              :size="'mini'"
+              :icon="useRenderIcon('Loading')"
+            />
+          </li>
+        </ul>
+        <div class="rule-view">
+          <div class="rule-list">
+            <el-row
+              v-for="(item, index) in menuactionList"
+              :key="'menu' + item.id + index"
             >
-              修改
-            </el-button>
-            <el-popconfirm title="是否确认删除?">
-              <template #reference>
-                <el-button
-                  class="reset-margin"
-                  link
-                  type="primary"
-                  :size="size"
-                  :icon="useRenderIcon('delete')"
-                  @click="handleDelete(row)"
-                >
-                  删除
-                </el-button>
-              </template>
-            </el-popconfirm>
-          </template>
-        </PureTable>
-      </template>
-    </TableProBar>
+              <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>
+
+      <div class="rule-bottom">
+        <el-button size="small" class="fr" type="primary" @click="submitForm"
+          >提 交</el-button
+        >
+      </div>
+    </div>
   </div>
 </template>
+
+<style scoped lang="scss">
+.action {
+  height: calc(100vh - 84px);
+  position: relative;
+  background: #fff;
+  width: 100%;
+  text-align: center;
+  .action_show {
+    position: relative;
+    width: 100%;
+    height: calc(100vh - 122px);
+    .rule-bottom {
+      padding: 18px 16px 0 18%;
+      background: #fff;
+      width: 100%;
+      text-align: left;
+      &::before {
+        content: "";
+        position: absolute;
+        top: 0;
+        right: 0;
+        height: 2px;
+        width: 100%;
+        background-color: #e4e7ed;
+        z-index: 1;
+      }
+    }
+    .action_show_box {
+      position: relative;
+      height: calc(100% - 50px);
+      min-height: calc(100% - 50px);
+
+      display: flex;
+      text-align: left;
+
+      .role-list {
+        position: relative;
+        height: 100%;
+        overflow-y: auto;
+        width: 250px;
+        padding: 8px 16px;
+        min-height: 100%;
+        flex-shrink: 0;
+        &::after {
+          content: "";
+          position: absolute;
+          top: 0;
+          right: 0;
+          height: 100%;
+          width: 2px;
+          background-color: #e4e7ed;
+          z-index: 1;
+        }
+        .role-list__title {
+          color: #b4b6c0;
+          line-height: 32px;
+        }
+        .role-list__item {
+          position: relative;
+          white-space: nowrap;
+          text-overflow: ellipsis;
+          overflow: hidden;
+          height: 32px;
+          line-height: 32px;
+          padding-left: 8px;
+          color: rgb(48, 49, 51);
+          cursor: pointer;
+          i {
+            position: absolute;
+            right: 0;
+            line-height: 32px;
+          }
+        }
+        .role-list__item.active {
+          color: #63cbe7;
+          background: #f7f7f7;
+        }
+      }
+      .rule-view {
+        position: relative;
+        height: 100%;
+        width: calc(100% - 250px);
+        overflow-y: scroll;
+        // padding: 0 0 0 16px;
+        .ffff {
+          width: 100%;
+          display: flex;
+          align-items: stretch;
+          .ftitle {
+            width: 50px;
+            text-align: center;
+            border-right: 1px solid #dfe6ec;
+            border-bottom: 1px solid #dfe6ec;
+            padding: 12px 14px;
+            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% - 50px);
+            .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>