From 4eaaa6d4bc1302914f20371b4442efc40ef38450 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=BD=90=E6=96=8C?= <1134087124@qq.com>
Date: Tue, 23 Sep 2025 10:04:22 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E7=AE=A1=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/router/common.routes.js                   |   65 +
 src/views/manage/orgmanage/index.vue          |  430 ++++++
 src/views/manage/peomanage/create.vue         |  893 +++++++++++
 src/views/manage/peomanage/editPeo.vue        |  893 +++++++++++
 src/views/manage/peomanage/index.vue          |  578 +++++++
 .../manage/peomanage/personnelManage.vue      |  483 ++++++
 src/views/manage/posimanage/aboutApproval.vue |  311 ++++
 .../manage/posimanage/components/flnindex.vue |  156 ++
 .../posimanage/components/treelabel.vue       |  240 +++
 src/views/manage/posimanage/create.vue        | 1324 +++++++++++++++++
 src/views/manage/posimanage/dialogCreate.vue  |  942 ++++++++++++
 src/views/manage/posimanage/editAuth.vue      |  628 ++++++++
 src/views/manage/posimanage/index.vue         |  674 +++++++++
 src/views/manage/posimanage/limitData.vue     |  134 ++
 src/views/manage/posimanage/orgManage.vue     |  576 +++++++
 .../manage/posimanage/permissionDialog.vue    |  311 ++++
 .../manage/posimanage/permissionbindposi.vue  |  308 ++++
 src/views/manage/posirecordlog/index.vue      |  149 ++
 18 files changed, 9095 insertions(+)
 create mode 100644 src/views/manage/orgmanage/index.vue
 create mode 100644 src/views/manage/peomanage/create.vue
 create mode 100644 src/views/manage/peomanage/editPeo.vue
 create mode 100644 src/views/manage/peomanage/index.vue
 create mode 100644 src/views/manage/peomanage/personnelManage.vue
 create mode 100644 src/views/manage/posimanage/aboutApproval.vue
 create mode 100644 src/views/manage/posimanage/components/flnindex.vue
 create mode 100644 src/views/manage/posimanage/components/treelabel.vue
 create mode 100644 src/views/manage/posimanage/create.vue
 create mode 100644 src/views/manage/posimanage/dialogCreate.vue
 create mode 100644 src/views/manage/posimanage/editAuth.vue
 create mode 100644 src/views/manage/posimanage/index.vue
 create mode 100644 src/views/manage/posimanage/limitData.vue
 create mode 100644 src/views/manage/posimanage/orgManage.vue
 create mode 100644 src/views/manage/posimanage/permissionDialog.vue
 create mode 100644 src/views/manage/posimanage/permissionbindposi.vue
 create mode 100644 src/views/manage/posirecordlog/index.vue

diff --git a/src/router/common.routes.js b/src/router/common.routes.js
index 818b464..2a03957 100644
--- a/src/router/common.routes.js
+++ b/src/router/common.routes.js
@@ -72,7 +72,72 @@ const commonRoute = [
     },
     component: () => import("@/views/artworkreturn/index.vue"),
   },
+  {
+    path: "/posimanage/create",
+    name: "PosiManageCre",
+    meta: {
+      title: "岗位管理",
+    },
+    component: () => import("../views/manage/posimanage/create"),
+  },
+  {
+    path: "/orgmanage",
+    name: "OrgManage",
+    meta: {
+      title: "组织管理",
+    },
+    component: () => import("../views/manage/orgmanage/index"),
+  },
 
+  {
+    path: "/posimanage",
+    name: "PosiManage",
+    meta: {
+      title: "岗位管理",
+    },
+    component: () => import("../views/manage/posimanage/index"),
+  },
+
+  {
+    path: "/posirecordlog",
+    name: "PosiRecordLog",
+    meta: {
+      title: "岗位操作记录",
+    },
+    component: () => import("../views/manage/posirecordlog/index"),
+  },
+  {
+    path: "/peomanage",
+    name: "PeoManage",
+    meta: {
+      title: "人员管理",
+    },
+    component: () => import("../views/manage/peomanage/index"),
+  },
+  {
+    path: "/peomanage/personnelManage",
+    name: "personnelManage",
+    meta: {
+      title: "人员管理",
+    },
+    component: () => import("../views/manage/peomanage/personnelManage"),
+  },
+  {
+    path: "/peomanage/create",
+    name: "PeoManageCre",
+    meta: {
+      title: "人员管理",
+    },
+    component: () => import("../views/manage/peomanage/create"),
+  },
+  {
+    path: "/peomanage/editPeo",
+    name: "PeoManageEdi",
+    meta: {
+      title: "人员管理",
+    },
+    component: () => import("../views/manage/peomanage/editPeo"),
+  },
 ];
 
 export default commonRoute;
diff --git a/src/views/manage/orgmanage/index.vue b/src/views/manage/orgmanage/index.vue
new file mode 100644
index 0000000..e8ab611
--- /dev/null
+++ b/src/views/manage/orgmanage/index.vue
@@ -0,0 +1,430 @@
+<template>
+  <div class="row"
+       style="padding: 35px">
+    <div class="col-3 fl-pa-md"
+         style="
+        background: #fff;
+        box-shadow: rgba(188, 188, 188, 0.18) 0px 3px 6px 1px;
+      ">
+      <div class="row font-16"
+           style="color: #764cf6; border-bottom: 1px solid #c1b2e5">
+        <div class="fl-py-sm"
+             style="border-bottom: 4px solid #764cf6">
+          组织架构
+        </div>
+      </div>
+      <div class="row"
+           style="height: 76vh; overflow: auto">
+        <fl-tree :data="state.treeData"
+                 :expandedKeys="state.expandedKeys"
+                 :refreshCount="state.treeRefreshCount"
+                 :clickKey="state.clickKey"
+                 :config="{
+            actions: ['edit', 'add', 'subtraction'],
+            addShow: '[%=level%]!==4',
+          }"
+                 @triggerTreeAction="handleTreeAction"
+                 @triggerTreeClick="handleTreeClick"></fl-tree>
+      </div>
+    </div>
+    <div class="col-9 row fl-px-md">
+      <div style="background: #fff"
+           class="fl-pa-md">
+        <div class="col-12 row font-16"
+             style="color: #764cf6; border-bottom: 1px solid #c1b2e5">
+          <div class="fl-py-sm"
+               style="border-bottom: 4px solid #764cf6">
+            {{ state.treeSelectData.title || "平台开发管理项目组" }}所有人员
+          </div>
+        </div>
+
+        <div class="col-12 row fl-mt-sm">
+          <fln-table :config="state.tableConfig"
+                     :refreshCount="state.tableConfig.refreshCount"
+                     :fatherData="state.treeSelectData">
+          </fln-table>
+        </div>
+      </div>
+    </div>
+  </div>
+  <n-modal v-model:show="state.dialogAddTree"
+           style="width: 600px"
+           :mask-closable="false"
+           preset="card">
+    <template #header>
+      <div class="col-12 row justify-center relative"
+           style="border-bottom: 1px solid #dfd7f2">
+        <div style="font-size: 20px; font-weight: bold; color: #1f2225ff">
+          添加组织
+        </div>
+      </div>
+    </template>
+
+    <div class="row justify-center fl-pa-md">
+      <div class="fl-my-lg font-20">
+        <n-input v-model:value="state.dialogAddTreeData"
+                 placeholder="请输入组织名称" />
+      </div>
+      <div class="col-12 row justify-center">
+        <n-button tertiary
+                  style="width: 161px; background: #764cf6; color: #fff"
+                  class="fl-mr-md"
+                  @click="handleDialogAddTreeSave">保存</n-button>
+        <n-button tertiary
+                  style="width: 161px; background: #eeeaf7; color: #774ff6"
+                  @click="state.dialogAddTree = false">返回</n-button>
+      </div>
+    </div>
+  </n-modal>
+  <n-modal v-model:show="state.dialogSubtractionTree"
+           style="width: 600px"
+           :mask-closable="false"
+           preset="card">
+    <template #header>
+      <div class="col-12 row justify-center relative"
+           style="border-bottom: 1px solid #dfd7f2">
+        <div style="font-size: 20px; font-weight: bold; color: #1f2225ff">
+          删除组织
+        </div>
+      </div>
+    </template>
+
+    <div class="row justify-center fl-pa-md">
+      <div class="font-20"
+           style="margin: 115px 0">
+        是否确认删除该组织及其子组织（如有）？
+      </div>
+      <div class="col-12 row justify-center">
+        <n-button tertiary
+                  style="width: 161px; background: #764cf6; color: #fff"
+                  class="fl-mr-md"
+                  @click="handleDialogSubtractionTreeSave">确定</n-button>
+        <n-button tertiary
+                  style="width: 161px; background: #eeeaf7; color: #774ff6"
+                  @click="state.dialogSubtractionTree = false">返回</n-button>
+      </div>
+    </div>
+  </n-modal>
+</template>
+
+<script setup>
+// 岗位
+import flnTable from "@/components/flnlayout/table/flntable.vue";
+import flTree from "@/components/flnlayout/tree/flnindex.vue";
+import {
+  ref,
+  reactive,
+  onBeforeMount,
+  onMounted,
+  getCurrentInstance,
+  computed,
+} from "vue";
+import { Local } from "@/utils/storage.js";
+import { processError, processSuccess } from "@/utils/helper/message";
+import { useRouter } from "vue-router";
+const router = useRouter();
+const currentInstance = getCurrentInstance();
+const { $request } = currentInstance.appContext.config.globalProperties;
+const state = reactive({
+  dialogData: {},
+  dialogAddTree: false,
+  dialogAddTreeData: "",
+  dialogSubtractionTree: false,
+  treeSelectData: {},
+  clickKey: "",
+  treeRefreshCount: 0,
+  expandedKeys: [],
+  treeData: [],
+
+  btnLoading: false,
+  selectedRows: [],
+  tableConfig: {
+    requestbysf: true,
+    rowKey: "ID",
+    refreshCount: 0,
+    listUrl: {
+      resDataField: "data",
+      pageField: "page",
+      pageSizeField: "pageSize",
+      url: "user/v2/list",
+      params: [
+        {
+          label: "departmentID",
+          field: "key",
+        },
+      ],
+    },
+    searchConfig: [
+      {
+        type: "text",
+        label: "姓名",
+        field: "nickName",
+        class: "col-4",
+        placeholder: "请输入姓名",
+      },
+      {
+        type: "text",
+        label: "手机号",
+        field: "telNum",
+        class: "col-4",
+        placeholder: "请输入手机号",
+      },
+      {
+        type: "text",
+        label: "岗位",
+        field: "positionName",
+        class: "col-4",
+        placeholder: "请输入岗位",
+      },
+      {
+        type: "text",
+        label: "员工工号",
+        field: "jobNum",
+        class: "col-4",
+        placeholder: "请输入员工工号",
+      },
+    ],
+    columns: [
+      {
+        title: "员工工号",
+        field: "jobNum",
+      },
+      {
+        title: "姓名",
+        field: "nickName",
+      },
+      {
+        width: 120,
+        title: "手机号",
+        field: "telNum",
+      },
+      {
+        width: 360,
+        title: "岗位",
+        align: 'left',
+        field: "nowPositions",
+        type: "tags",
+        tagConfig: {
+          tagField: "name",
+          tagBgColorField: "color",
+          showLength: 3,
+        },
+      },
+    ],
+  },
+});
+onBeforeMount(() => {
+  let treeSelectData = Local.get("orgmanage_treeSelectData");
+  if (treeSelectData) {
+    state.treeSelectData = treeSelectData;
+    state.clickKey = treeSelectData.key;
+  }
+  getTreeData();
+});
+onMounted(() => { });
+
+const getTreeData = () => {
+  let url = "/department/v2/tree/my";
+  let params = {};
+  $request.HTTP.components.postDataByParams(url, params).then(
+    (res) => {
+      if (res.status === 0 && Array.isArray(res.data.nodes)) {
+        let data = res.data.nodes;
+        calcTreeData(data);
+        state.treeData = data;
+        if (JSON.stringify(state.treeSelectData) === "{}") {
+          state.treeSelectData = data[0];
+          state.clickKey = data[0].key;
+        }
+        if (
+          state.clickKey === data[0].key &&
+          !state.expandedKeys.includes(data[0].key)
+        ) {
+          state.expandedKeys.push(data[0].key);
+        }
+        if (!state.expandedKeys.includes(state.clickKey)) {
+          state.expandedKeys.push(state.clickKey);
+        }
+        if (data.length === 1 && !state.expandedKeys.includes(data[0].key)) {
+          state.expandedKeys.push(data[0].key);
+        }
+        state.treeRefreshCount++;
+        state.tableConfig.refreshCount++;
+      } else {
+        processError(res.msg || "获取失败！");
+      }
+    },
+    () => {
+      processError("获取失败！");
+    },
+    () => {
+      processError("获取失败！");
+    }
+  );
+};
+
+const handleCreatePosi = () => {
+  console.log("handleCreatePosi");
+};
+
+const handleTreeAction = ({ type, val }) => {
+  state.dialogData = val;
+  if (type === "add") {
+    state.clickKey = val.key;
+    state.treeSelectData = val;
+    state.tableConfig.refreshCount++;
+    state.dialogAddTreeData = "";
+    state.dialogAddTree = true;
+  }
+  if (type === "subtraction") {
+    state.dialogSubtractionTree = true;
+  }
+  if (type === "save") {
+    let url = "/department/v2/update";
+    let params = {
+      name: val.title,
+      ID: val.key,
+    };
+    $request.HTTP.components.postDataByParams(url, params).then(
+      (res) => {
+        if (res.status === 0) {
+          getTreeData();
+        } else {
+          processError(res.msg || "操作失败！");
+        }
+      },
+      () => {
+        processError("操作失败！");
+      },
+      () => {
+        processError("操作失败！");
+      }
+    );
+  }
+  if (type === "cancel") {
+    getTreeData();
+  }
+};
+const handleTreeClick = ({ selectedKey, tree }) => {
+  state.clickKey = tree.key;
+  state.treeSelectData = tree;
+  Local.set("orgmanage_treeSelectData", tree);
+  state.tableConfig.refreshCount++;
+};
+// const handleTreeDefaultClick = () => {
+//   state.treeSelectData = state.treeData[0];
+//   state.clickKey = state.treeData[0].key;
+//   Local.remove("orgmanage_treeSelectData");
+//   state.tableConfig.refreshCount++;
+// };
+const handleCloseModal = () => {
+  // emits("triggerCloseModal");
+};
+// 树 新增
+const handleDialogAddTreeSave = () => {
+  let url = "/department/v2/create";
+  let params = {
+    name: state.dialogAddTreeData,
+    pid: state.dialogData.key,
+  };
+  $request.HTTP.components.postDataByParams(url, params).then(
+    (res) => {
+      if (res.status === 0) {
+        if (Array.isArray(res.data.levelPathList)) {
+          state.expandedKeys = [];
+          res.data.levelPathList.forEach((treeid) => {
+            if (!state.expandedKeys.includes(treeid)) {
+              state.expandedKeys.push(treeid);
+            }
+          });
+        }
+        getTreeData();
+        state.dialogAddTree = false;
+      } else {
+        processError(res.msg || "操作失败！");
+      }
+    },
+    () => {
+      processError("操作失败！");
+      state.dialogAddTree = false;
+    },
+    () => {
+      state.dialogAddTree = false;
+      processError("操作失败！");
+    }
+  );
+};
+// 树 减
+const handleDialogSubtractionTreeSave = () => {
+  let url = "/department/v2/remove";
+  let params = {
+    ID: state.dialogData.key,
+  };
+  $request.HTTP.components.postDataByParams(url, params).then(
+    (res) => {
+      if (res.status === 0) {
+        getTreeData();
+        state.dialogSubtractionTree = false;
+      } else {
+        processError(res.msg || "操作失败！");
+      }
+    },
+    () => {
+      processError("操作失败！");
+      state.dialogSubtractionTree = false;
+    },
+    () => {
+      state.dialogSubtractionTree = false;
+      processError("操作失败！");
+    }
+  );
+};
+const calcTreeData = (data) => {
+  for (let item of data) {
+    item.key = item.ID;
+    item.label = item.name;
+    item.title = item.name;
+    if (item.sons) {
+      item.children = item.sons;
+      calcTreeData(item.children);
+    }
+    delete item.ID;
+    delete item.name;
+    delete item.sons;
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.search-item {
+  :deep(.ant-input-affix-wrapper) {
+    background: #fff;
+    color: #c3c3c3;
+  }
+  :deep(.ant-input) {
+    color: #000;
+    &::placeholder {
+      color: #c3c3c3;
+    }
+  }
+  :deep(.ant-picker-input > input) {
+    color: #000;
+    &::placeholder {
+      color: #c3c3c3;
+    }
+  }
+  :deep(.ant-picker) {
+    width: 100%;
+    border-radius: 20px;
+    background: #fff !important;
+    color: #c3c3c3;
+    border: none;
+  }
+  :deep(.ant-picker-input > input) {
+    color: #000;
+    &::placeholder {
+      color: #c3c3c3;
+    }
+  }
+}
+</style>
diff --git a/src/views/manage/peomanage/create.vue b/src/views/manage/peomanage/create.vue
new file mode 100644
index 0000000..e6118a3
--- /dev/null
+++ b/src/views/manage/peomanage/create.vue
@@ -0,0 +1,893 @@
+<template>
+  <div class="row" style="padding: 35px; margin-bottom: 80px">
+    <div
+      class="col-12 row"
+      style="
+        background: #ffffff;
+        border-radius: 3px;
+        padding: 17px 20px;
+        box-shadow: 0 3px 6px 1px rgba(188, 188, 188, 0.18);
+      "
+    >
+      <div
+        class="col-12 row font-20"
+        style="color: #764cf6; border-bottom: 1px solid #c1b2e5"
+      >
+        <div
+          v-if="state.pageType === 'create'"
+          class="fl-py-sm"
+          style="border-bottom: 4px solid #764cf6"
+        >
+          新增
+        </div>
+        <div
+          v-if="state.pageType === 'edit'"
+          class="fl-py-sm"
+          style="border-bottom: 4px solid #764cf6"
+        >
+          修改
+        </div>
+        <div
+          v-if="state.pageType === 'view'"
+          class="fl-py-sm"
+          style="border-bottom: 4px solid #764cf6"
+        >
+          查看
+        </div>
+      </div>
+      <div class="col-12 row">
+        <div class="search-item fl-mt-md row items-center col-3">
+          <fln-form-item
+            type="text"
+            :val="state.formData.nickName"
+            :config="{
+              label: '姓名：',
+              field: 'nickName',
+              placeholder: '请输入姓名',
+            }"
+            :disable="calcPageDisable()"
+            @triggerValBlur="handleValBlur"
+            @triggerValChange="handleValChange"
+          />
+        </div>
+
+        <div class="search-item fl-mt-md row items-center col-3">
+          <fln-form-item
+            type="text"
+            :val="state.formData.telNum"
+            :config="{
+              label: '手机号：',
+              field: 'telNum',
+              placeholder: '请输入手机号',
+            }"
+            :disable="calcPageDisable()"
+            @triggerValChange="handleValChange"
+          />
+        </div>
+        <div class="search-item fl-mt-md row items-center col-3">
+          <fln-form-item
+            type="text"
+            :val="state.formData.mailAccount"
+            :config="{
+              label: '邮箱：',
+              field: 'mailAccount',
+              placeholder: '自动生成',
+            }"
+            :disable="true"
+            @triggerValChange="handleValChange"
+          />
+        </div>
+        <div class="search-item fl-mt-md row items-center col-3">
+          <fln-form-item
+            type="date"
+            :val="state.formData.enterDate"
+            :config="{
+              label: '入职时间：',
+              field: 'enterDate',
+              placeholder: '请输入入职时间',
+            }"
+            :disable="calcPageDisable()"
+            @triggerValChange="handleValChange"
+          />
+        </div>
+
+        <div class="search-item fl-mt-md row items-center col-3">
+          <fln-form-item
+            type="select"
+            :val="state.formData.status"
+            :config="{
+              placeholder: '请输入状态',
+              label: '状态：',
+              field: 'status',
+              options: [
+                {
+                  label: '有效',
+                  value: 'notactive',
+                },
+                {
+                  label: '无效',
+                  value: 'left',
+                },
+              ],
+            }"
+            :disable="calcPageDisable()"
+            @triggerValChange="handleValChange"
+          />
+        </div>
+        <div class="search-item fl-mt-md row items-center col-3">
+          <fln-form-item
+            type="text"
+            :val="state.formData.jobNum"
+            :config="{
+              label: '员工工号：',
+              field: 'jobNum',
+              placeholder: '请输入员工工号',
+            }"
+            :disable="calcPageDisable()"
+            @triggerValChange="handleValChange"
+          />
+        </div>
+        <div class="search-item fl-mt-md row col-3">
+          <fln-form-item
+            type="upload"
+            title="图片上传"
+            :config="{
+              limit4096: true,
+              label: '员工近照：',
+              field: 'recentImg',
+              placeholder: '请输入员工近照',
+              style: 'width:80px',
+            }"
+            :val="state.formData.recentImg"
+            :otherParams="{
+              source: 'artwork',
+              mask: '',
+              type: 'image',
+            }"
+            :disable="calcPageDisable()"
+            @triggerValChange="handleValChange"
+          />
+        </div>
+
+        <div class="search-item fl-mt-md row col-3">
+          <div class="col-12 row items-center">
+            <fln-form-item
+              type="upload"
+              title="图片上传"
+              :config="{
+                limit4096: true,
+                label: '员工头像：',
+                field: 'avatar',
+                placeholder: '请输入员工近照',
+                style: 'width:80px',
+              }"
+              :val="state.formData.avatar"
+              :otherParams="{
+                source: 'artwork',
+                mask: '',
+                type: 'image',
+              }"
+              :disable="calcPageDisable()"
+              @triggerValChange="handleValChange"
+            >
+              <template #uploadRight v-if="!calcPageDisable()">
+                <div class="row" style="width: calc(100% - 84px)">
+                  <img
+                    v-for="(item, index) in state.defaultImgList"
+                    :src="item + '?x-oss-process=image/resize,w_158,h_158'"
+                    :key="index"
+                    class="img-avatar"
+                    :class="
+                      state.defaultImgSelect == index ? 'border-active' : ''
+                    "
+                    @click="handleSetImg(item, index)"
+                  />
+                </div> </template
+            ></fln-form-item>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div
+      class="col-12 row fl-mt-md"
+      style="
+        background: #ffffff;
+        border-radius: 3px;
+        padding: 17px 20px;
+        box-shadow: 0 3px 6px 1px rgba(188, 188, 188, 0.18);
+      "
+    >
+      <div
+        v-if="
+          Array.isArray(state.depPositions) &&
+          state.depPositions.filter((item) => item.positions?.length > 0)
+            .length > 0
+        "
+        class="col-12 row"
+      >
+        <div
+          class="col-12 fl-mt-md row items-center fl-pb-xs"
+          style="min-height: 40px"
+        >
+          <div
+            class="col-12 row justify-between items-center fl-px-md"
+            style="
+              min-height: 40px;
+              background: #46299dff;
+              border-radius: 3px 3px 0 0;
+            "
+          >
+            <div class="color-white">设置所属部门及岗位</div>
+          </div>
+          <div
+            style="border: 1px solid #c3c3c3; border-radius: 0 0 3px 3px"
+            class="col-12 row fl-pb-xs"
+          >
+            <div
+              class="col-12 row"
+              style="padding: 11px 0; background: #dfd7f2"
+            >
+              <div class="col-3 text-center">所属部门</div>
+              <div class="col-6 text-left">所属岗位</div>
+            </div>
+            <template v-for="(row, rowIdx) in state.depPositions">
+              <div
+                class="col-12 row fl-py-sm"
+                v-if="row.positions?.length > 0"
+                :style="
+                  rowIdx !== state.depPositions.length - 1
+                    ? 'border-bottom:1px solid #c3c3c3'
+                    : ''
+                "
+                :key="rowIdx"
+              >
+                <div class="col-3 row items-center justify-center">
+                  {{ row.name }}
+                </div>
+                <div class="col-6 row items-center">
+                  <div
+                    v-for="(tag, idx) in row.positions"
+                    :key="idx"
+                    class="fl-mr-sm fl-px-sm fl-py-xs row items-center fl-mb-xs"
+                    style="border: solid 1px #ded7f1; border-radius: 3px"
+                    :style="{
+                      borderColor: tag.color,
+                      color: tag.color || '#fff',
+                    }"
+                  >
+                    <n-popover :show-arrow="true">
+                      <template #trigger>
+                        {{ tag.name }}
+                      </template>
+                      {{ tag.name }}
+                    </n-popover>
+
+                    <close-circle-outlined
+                      v-if="!calcPageDisable()"
+                      class="fl-ml-md"
+                      @click="handleClearPage(rowIdx, tag)"
+                    />
+                  </div>
+                </div>
+              </div>
+            </template>
+          </div>
+        </div>
+      </div>
+
+      <div class="col-12 row">
+        <div
+          class="col-3 row fl-px-md"
+          style="overflow: auto; box-shadow: 0 3px 6px 1px #bcbcbc2e"
+        >
+          <fln-tree
+            :data="state.treeData"
+            :expandedKeys="state.expandedKeys"
+            :refreshCount="state.treeRefreshCount"
+            :clickKey="state.clickKey"
+            @triggerTreeClick="handleTreeClick"
+          ></fln-tree>
+        </div>
+        <div class="col-9 row fl-pl-md" style="align-content: flex-start">
+          <fln-table
+            class="artwork-table"
+            :config="state.tableConfig"
+            :defaultSelectedRows="state.tableDefaultPositions"
+            :clearSelectRowKey="state.tableClearKey"
+            :fatherData="state.treeSelectData"
+            :fatherParams="state.tableSearchData"
+            :refreshCount="state.tableConfig.refreshCount"
+            @triggerRowSelect="handleTableRowSelect"
+            @triggerRowSelectAll="handleTableCheckAll"
+          >
+            <template #table-header>
+              <span style="color: #fd0000" class="fl-mx-sm">*</span>
+              请至少勾选一个岗位</template
+            >
+          </fln-table>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div
+    class="width-100 row fl-pt-md fl-pb-lg"
+    style="position: fixed; bottom: 0px; background: #f0f0f5"
+  >
+    <div class="col-10 row justify-center">
+      <n-button
+        tertiary
+        class="fl-mr-md"
+        style="width: 161px; background: #c7c7c9ff; color: #ffffffff"
+        @click="handleBack"
+        >返回</n-button
+      >
+
+      <n-button
+        tertiary
+        v-if="state.pageType === 'edit'"
+        style="width: 161px; height: 34px; background: #46299dff; color: #fff"
+        @click="handleSave"
+        >保存</n-button
+      >
+
+      <n-button
+        tertiary
+        v-if="state.pageType === 'create'"
+        style="width: 161px; height: 34px; background: #46299dff; color: #fff"
+        @click="handleCreate"
+        >保存</n-button
+      >
+    </div>
+  </div>
+</template>
+
+<script setup>
+import flnTable from "@/components/flnlayout/table/flntable.vue";
+import flnFormItem from "@/components/flnlayout/form/flnformItem.vue";
+import flnTree from "@/components/flnlayout/tree/flnindex.vue";
+
+import { CloseCircleOutlined } from "@ant-design/icons-vue";
+import {
+  ref,
+  reactive,
+  onBeforeMount,
+  onActivated,
+  onMounted,
+  getCurrentInstance,
+  computed,
+  nextTick,
+  watch,
+} from "vue";
+import { processError, processSuccess } from "@/utils/helper/message";
+import { useRouter, useRoute } from "vue-router";
+const router = useRouter();
+const route = useRoute();
+const currentInstance = getCurrentInstance();
+const { $request } = currentInstance.appContext.config.globalProperties;
+const state = reactive({
+  tableClearKey: null,
+  treeSelectData: {},
+  tableDefaultPositions: [],
+  depPositions: [],
+  clickKey: "",
+  treeRefreshCount: 0,
+  expandedKeys: [],
+  treeData: [],
+  formData: {
+    nickName: null,
+    telNum: null,
+    status: "notactive",
+    positionName: null,
+    jobNum: null,
+    mailAccount: null,
+    enterDate: null,
+    recentImg: null,
+    avatar: null,
+  },
+  tableSearchData: {},
+  selectedRows: [],
+  tableConfig: {
+    hasSelection: true,
+    requestbysf: true,
+    rowKey: "ID",
+    refreshCount: 0,
+    listUrl: {
+      resDataField: "data",
+      pageField: "page",
+      pageSizeField: "pageSize",
+      url: "/position/v2/list",
+      params: [
+        {
+          label: "departmentID",
+          field: "key",
+        },
+      ],
+    },
+    columns: [
+      {
+        title: "岗位ID",
+        field: "ID",
+      },
+      {
+        width: 100,
+        align: "left",
+        title: "岗位名",
+        field: "name",
+        type: "sfBgColor",
+        bgConfig: {
+          bgColorField: "color",
+          color: "#fff",
+        },
+      },
+      {
+        type: "tooltip",
+        align: "left",
+        width: 120,
+        title: "岗位描述",
+        field: "remark",
+      },
+      {
+        width: 360,
+        align: "left",
+        title: "页面权限",
+        field: "menuAuths",
+        type: "tags",
+        tagConfig: {
+          showLength: 3,
+          bgColor: "#fff",
+          borderRadius: "14px",
+          style: "border-radius: 14px",
+        },
+      },
+    ],
+  },
+  defaultImgList: [
+    "https://cdns.fontree.cn/fonchain-main/prod/runtime/image/avart/0/d5f416d5-0b95-4b2c-82c4-6218d4017d17.jpg",
+    "https://cdns.fontree.cn/fonchain-main/prod/runtime/image/avart/0/012a339a-53d2-43f7-ae47-84d444d5ca6f.jpg",
+    "https://cdns.fontree.cn/fonchain-main/prod/runtime/file/avart/11/48ae18e2-37a4-4eab-bd03-5fe1099892c3.jpg",
+    "https://cdns.fontree.cn/fonchain-main/prod/runtime/file/avart/11/0a53fd8a-951e-4a8e-8d71-0198dad5e7ae.jpg",
+  ],
+  defaultImgSelect: null,
+  btnLoading: false,
+  pageType: "create",
+});
+watch(
+  () => state.clickKey,
+  (newVal, oldVal) => {
+    state.tableDefaultPositions =
+      state.depPositions.filter((item) => item.ID === state.clickKey).length > 0
+        ? state.depPositions.filter((item) => item.ID === state.clickKey)[0]
+            .positions
+        : [];
+  },
+  { deep: true }
+);
+
+onBeforeMount(() => {
+  getTreeData();
+  if (route.query.type) {
+    state.pageType = route.query.type;
+  }
+  if (route.query.type === "view") {
+    state.tableConfig.hasSelection = false;
+  }
+});
+onActivated(() => {
+  getTreeData();
+  if (route.query.type) {
+    state.pageType = route.query.type;
+  }
+  if (route.query.type === "view") {
+    state.tableConfig.hasSelection = false;
+  }
+});
+onMounted(() => {});
+const getPageData = () => {
+  if (route.query.ID) {
+    let url = "/user/v2/detail";
+    let params = {
+      ID: Number(route.query.ID),
+    };
+    $request.HTTP.components.postDataByParams(url, params).then(
+      (res) => {
+        if (res.status === 0) {
+          state.formData = {
+            nickName: res.data.nickName,
+            telNum: res.data.telNum,
+            status: res.data.status,
+            positionName: res.data.positionName,
+            jobNum: res.data.jobNum,
+            mailAccount: res.data.mailAccount,
+            enterDate: res.data.enterDate,
+            recentImg: res.data.recentImg,
+            avatar: res.data.avatar,
+          };
+          state.depPositions = res.data.depPositions || [];
+          state.tableDefaultPositions =
+            state.depPositions.filter((item) => item.ID === state.clickKey)
+              .length > 0
+              ? state.depPositions.filter(
+                  (item) => item.ID === state.clickKey
+                )[0].positions
+              : [];
+          state.depPositions.forEach((item) => {
+            item.isLeader = item.isLeader || false;
+          });
+        } else {
+          processError(res.msg || "获取数据失败！");
+        }
+      },
+      () => {
+        processError("获取数据失败！");
+      },
+      () => {
+        processError("获取数据失败！");
+      }
+    );
+  }
+};
+const getTreeData = () => {
+  let url = "/department/v2/tree/all";
+  let params = {};
+  $request.HTTP.components.postDataByParams(url, params).then(
+    (res) => {
+      if (res.status === 0 && Array.isArray(res.data.nodes)) {
+        let data = res.data.nodes;
+        calcTreeData(data);
+        state.treeData = data;
+        if (!state.expandedKeys.includes(data[0].key)) {
+          state.expandedKeys.push(data[0].key);
+        }
+        state.treeRefreshCount++;
+        if (JSON.stringify(state.treeSelectData) === "{}") {
+          state.treeSelectData = data[0];
+          state.clickKey = data[0].key;
+        }
+        state.tableConfig.refreshCount++;
+        if (route.query.ID) {
+          getPageData();
+        }
+      } else {
+        processError("获取失败！");
+      }
+    },
+    () => {
+      processError("获取失败！");
+    },
+    () => {
+      processError("获取失败！");
+    }
+  );
+};
+const calcTreeData = (data) => {
+  for (let item of data) {
+    item.key = item.ID;
+    item.title = item.name;
+    if (item.sons) {
+      item.children = item.sons;
+      calcTreeData(item.children);
+    }
+    delete item.ID;
+    delete item.name;
+    delete item.sons;
+  }
+};
+
+const handleValChange = ({ val, config }) => {
+  state.formData[config.field] = val;
+};
+const handleValBlur = ({ val, config }) => {
+  if (config.field === "nickName" && state.formData.nickName) {
+    let url = "/user/mail/account";
+    let params = {
+      nickName: val,
+      ID: route.query.ID ? Number(route.query.ID) : null,
+    };
+    $request.HTTP.components.postDataByParams(url, params).then(
+      (res) => {
+        state.btnLoading = false;
+        if (res.status === 0) {
+          state.formData.mailAccount = res.data.mailAccount;
+        } else {
+          processError("生成邮箱错误：" + res.msg);
+          state.formData.mailAccount = "";
+        }
+      },
+      () => {},
+      () => {}
+    );
+  }
+};
+
+const handleSearch = () => {
+  state.tableSearchData = JSON.parse(JSON.stringify(state.formData));
+};
+
+const handleTableRowSelect = ({ record, selected, selectedRows }) => {
+  if (
+    state.depPositions.filter((item) => item.ID === state.clickKey).length === 0
+  ) {
+    state.depPositions.push({
+      isLeader: false,
+      ID: state.clickKey,
+      name: state.treeSelectData.title,
+      positions: selectedRows.map((item) => {
+        return {
+          ID: item.ID,
+          name: item.name,
+          color: item.color,
+        };
+      }),
+    });
+  } else {
+    state.depPositions.forEach((item) => {
+      if (item.ID === state.clickKey) {
+        if (selected) {
+          // 当前部门有其他子岗位时不直接覆盖
+          item.positions = item.positions.filter(
+            (depItem) => depItem.ID !== record.ID
+          );
+          item.positions = item.positions.concat([
+            {
+              ID: record.ID,
+              name: record.name,
+              color: record.color,
+            },
+          ]);
+        } else {
+          item.positions = item.positions.filter(
+            (depItem) => depItem.ID !== record.ID
+          );
+        }
+      }
+    });
+  }
+
+  state.depPositions = state.depPositions.filter((item) => {
+    return item.positions && item.positions.length > 0;
+  });
+  state.selectedRows = selectedRows;
+};
+const handleTableCheckAll = ({ selectedRowKeys, selectedRows }) => {
+  if (
+    state.depPositions.filter((item) => item.ID === state.clickKey).length === 0
+  ) {
+    state.depPositions.push({
+      isLeader: false,
+      ID: state.clickKey,
+      name: state.treeSelectData.title,
+      positions: selectedRows.map((item) => {
+        return {
+          ID: item.ID,
+          name: item.name,
+          color: item.color,
+        };
+      }),
+    });
+  } else {
+    state.depPositions.forEach((item) => {
+      if (item.ID === state.clickKey) {
+        item.positions = selectedRows.map((item) => {
+          return {
+            ID: item.ID,
+            name: item.name,
+            color: item.color,
+          };
+        });
+      }
+    });
+  }
+
+  state.depPositions = state.depPositions.filter((item) => {
+    return item.positions && item.positions.length > 0;
+  });
+  state.selectedRows = selectedRows;
+};
+const handleDialogSave = () => {
+  state.dialogDel = false;
+};
+const handleDialogBack = () => {
+  state.dialogDel = false;
+};
+
+const handleTreeClick = ({ selectedKey, tree }) => {
+  state.clickKey = tree.key;
+  state.treeSelectData = tree;
+  state.tableConfig.refreshCount++;
+};
+const calcPageDisable = () => {
+  return state.pageType === "view";
+};
+const handleSetImg = (item, index) => {
+  state.formData.avatar = "";
+  nextTick(() => {
+    state.formData.avatar = item;
+    state.defaultImgSelect = index;
+  });
+};
+const handleCreate = () => {
+  if (
+    state.formData.jobNum === null ||
+    state.formData.jobNum === "" ||
+    state.formData.jobNum === undefined
+  ) {
+    processError("请输入员工工号");
+    return;
+  }
+  state.btnLoading = true;
+  state.depPositions = state.depPositions.filter((item) => {
+    return item.positions && item.positions.length > 0;
+  });
+  let url = "/user/v2/create";
+  let params = {
+    depPositions: state.depPositions,
+  };
+  Object.assign(params, state.formData);
+  $request.HTTP.components.postDataByParams(url, params).then(
+    (res) => {
+      state.btnLoading = false;
+      if (res.status === 0) {
+        processSuccess("操作成功！");
+        router.go(-1);
+      } else {
+        processError(res.msg || "操作失败！");
+      }
+    },
+    () => {
+      processError("操作失败！");
+      state.btnLoading = false;
+    },
+    () => {
+      processError("操作失败！");
+      state.btnLoading = false;
+    }
+  );
+};
+const handleSave = () => {
+  if (
+    state.formData.jobNum === null ||
+    state.formData.jobNum === "" ||
+    state.formData.jobNum === undefined
+  ) {
+    processError("请输入员工工号");
+    return;
+  }
+  state.btnLoading = true;
+  state.depPositions = state.depPositions.filter((item) => {
+    return item.positions && item.positions.length > 0;
+  });
+  let url = "/user/v2/update";
+  let params = {
+    ID: Number(route.query.ID),
+    depPositions: state.depPositions,
+  };
+  Object.assign(params, state.formData);
+
+  $request.HTTP.components.postDataByParams(url, params).then(
+    (res) => {
+      state.btnLoading = false;
+      if (res.status === 0) {
+        processSuccess("操作成功！");
+        getPageData();
+      } else {
+        processError(res.msg || "操作失败！");
+      }
+    },
+    () => {
+      processError("操作失败！");
+      state.btnLoading = false;
+    },
+    () => {
+      processError("操作失败！");
+      state.btnLoading = false;
+    }
+  );
+};
+const handleLink = (path) => {
+  router.push(path);
+};
+const handleBack = () => {
+  router.go(-1);
+};
+const calcDepPositions = () => {
+  for (let key in state.depPositions) {
+    let data = state.depPositions[key];
+    if (!data || JSON.stringify(data) === "[]") {
+      delete state.depPositions[key];
+    }
+  }
+};
+const handleClearPage = (idx, clearItem) => {
+  state.depPositions[idx].positions.forEach((item, index) => {
+    if (item.name === clearItem.name) {
+      state.depPositions[idx].positions.splice(index, 1);
+    }
+
+    if (state.depPositions[idx].positions.length === 0) {
+      state.depPositions.splice(idx, 1);
+    }
+  });
+  state.tableClearKey = clearItem.ID;
+};
+const calcSfBgColorWidth = (val) => {
+  if (val) {
+    return val.length * 15 + "px !important";
+  }
+  return null;
+};
+</script>
+
+<style lang="scss" scoped>
+.search-item {
+  :deep(.ant-input-affix-wrapper) {
+    background: #fff;
+    color: #c3c3c3;
+  }
+  :deep(.ant-input) {
+    color: #000;
+    &::placeholder {
+      color: #c3c3c3;
+    }
+  }
+  :deep(.ant-picker-input > input) {
+    color: #000;
+    &::placeholder {
+      color: #c3c3c3;
+    }
+  }
+  :deep(.ant-picker) {
+    width: 100%;
+    border-radius: 20px;
+    background: #fff !important;
+    color: #c3c3c3;
+    border: none;
+  }
+  :deep(.ant-picker-input > input) {
+    color: #000;
+    &::placeholder {
+      color: #c3c3c3;
+    }
+  }
+  :deep(.avatar-uploader > .ant-upload) {
+    background: #fafafcff;
+  }
+  :deep(.ant-image) {
+    height: 100%;
+    width: 100%;
+    border-radius: 50%;
+  }
+  :deep(.ant-image-img) {
+    object-fit: cover !important;
+    border-radius: 50%;
+  }
+  :deep(.ant-image-mask) {
+    border-radius: 50%;
+  }
+  :deep(.ant-upload) {
+    color: #c1b2e5;
+  }
+  :deep(.ant-select) {
+    color: #000;
+  }
+  :deep(.ant-select-selector .ant-select-selection-placeholder) {
+    color: #c3c3c3 !important;
+    &::placeholder {
+      color: #c3c3c3 !important;
+    }
+  }
+  :deep(.ant-select:not(.ant-select-customize-input) .ant-select-selector) {
+    background: #fff;
+  }
+}
+.img-avatar {
+  width: 40px;
+  height: 40px;
+  margin: 3px;
+  cursor: pointer;
+}
+.border-active {
+  border: 2px solid #764cf6;
+}
+</style>
diff --git a/src/views/manage/peomanage/editPeo.vue b/src/views/manage/peomanage/editPeo.vue
new file mode 100644
index 0000000..a5b5de5
--- /dev/null
+++ b/src/views/manage/peomanage/editPeo.vue
@@ -0,0 +1,893 @@
+<template>
+  <div class="row" style="padding: 35px; margin-bottom: 80px">
+    <div
+      class="col-12 row"
+      style="
+        background: #ffffff;
+        border-radius: 3px;
+        padding: 17px 20px;
+        box-shadow: 0 3px 6px 1px rgba(188, 188, 188, 0.18);
+      "
+    >
+      <div
+        class="col-12 row font-20"
+        style="color: #764cf6; border-bottom: 1px solid #c1b2e5"
+      >
+        <div
+          v-if="state.pageType === 'create'"
+          class="fl-py-sm"
+          style="border-bottom: 4px solid #764cf6"
+        >
+          新增
+        </div>
+        <div
+          v-if="state.pageType === 'edit'"
+          class="fl-py-sm"
+          style="border-bottom: 4px solid #764cf6"
+        >
+          修改
+        </div>
+        <div
+          v-if="state.pageType === 'view'"
+          class="fl-py-sm"
+          style="border-bottom: 4px solid #764cf6"
+        >
+          查看
+        </div>
+      </div>
+      <div class="col-12 row">
+        <div class="search-item fl-mt-md row items-center col-3">
+          <fln-form-item
+            type="text"
+            :val="state.formData.nickName"
+            :config="{
+              label: '姓名：',
+              field: 'nickName',
+              placeholder: '请输入姓名',
+            }"
+            :disable="calcPageDisable()"
+            @triggerValBlur="handleValBlur"
+            @triggerValChange="handleValChange"
+          />
+        </div>
+
+        <div class="search-item fl-mt-md row items-center col-3">
+          <fln-form-item
+            type="text"
+            :val="state.formData.telNum"
+            :config="{
+              label: '手机号：',
+              field: 'telNum',
+              placeholder: '请输入手机号',
+            }"
+            :disable="calcPageDisable()"
+            @triggerValChange="handleValChange"
+          />
+        </div>
+        <div class="search-item fl-mt-md row items-center col-3">
+          <fln-form-item
+            type="text"
+            :val="state.formData.mailAccount"
+            :config="{
+              label: '邮箱：',
+              field: 'mailAccount',
+              placeholder: '自动生成',
+            }"
+            :disable="true"
+            @triggerValChange="handleValChange"
+          />
+        </div>
+        <div class="search-item fl-mt-md row items-center col-3">
+          <fln-form-item
+            type="date"
+            :val="state.formData.enterDate"
+            :config="{
+              label: '入职时间：',
+              field: 'enterDate',
+              format: 'YYYY-MM-dd',
+              placeholder: '请输入入职时间',
+            }"
+            :disable="calcPageDisable()"
+            @triggerValChange="handleValChange"
+          />
+        </div>
+
+        <div class="search-item fl-mt-md row items-center col-3">
+          <fln-form-item
+            type="select"
+            :val="state.formData.status"
+            :config="{
+              placeholder: '请输入状态',
+              label: '状态：',
+              field: 'status',
+              options: [
+                {
+                  label: '有效',
+                  value: 'notactive',
+                },
+                {
+                  label: '无效',
+                  value: 'left',
+                },
+              ],
+            }"
+            :disable="calcPageDisable()"
+            @triggerValChange="handleValChange"
+          />
+        </div>
+        <div class="search-item fl-mt-md row items-center col-3">
+          <fln-form-item
+            type="text"
+            :val="state.formData.jobNum"
+            :config="{
+              label: '员工工号：',
+              field: 'jobNum',
+              placeholder: '请输入员工工号',
+            }"
+            :disable="calcPageDisable()"
+            @triggerValChange="handleValChange"
+          />
+        </div>
+        <div class="search-item fl-mt-md row col-3">
+          <fln-form-item
+            type="upload"
+            title="图片上传"
+            :config="{
+              limit4096: true,
+              label: '员工近照：',
+              field: 'recentImg',
+              placeholder: '请输入员工近照',
+              style: 'width:80px',
+            }"
+            :val="state.formData.recentImg"
+            :otherParams="{
+              source: 'artwork',
+              mask: '',
+              type: 'image',
+            }"
+            :disable="calcPageDisable()"
+            @triggerValChange="handleValChange"
+          />
+        </div>
+
+        <div class="search-item fl-mt-md row col-3">
+          <div class="col-12 row items-center">
+            <fln-form-item
+              type="upload"
+              title="图片上传"
+              :config="{
+                limit4096: true,
+                label: '员工头像：',
+                field: 'avatar',
+                placeholder: '请输入员工近照',
+                style: 'width:80px',
+              }"
+              :val="state.formData.avatar"
+              :otherParams="{
+                source: 'artwork',
+                mask: '',
+                type: 'image',
+              }"
+              :disable="calcPageDisable()"
+              @triggerValChange="handleValChange"
+            >
+              <template #uploadRight v-if="!calcPageDisable()">
+                <div class="row" style="width: calc(100% - 84px)">
+                  <img
+                    v-for="(item, index) in state.defaultImgList"
+                    :src="item + '?x-oss-process=image/resize,w_158,h_158'"
+                    :key="index"
+                    class="img-avatar"
+                    :class="
+                      state.defaultImgSelect == index ? 'border-active' : ''
+                    "
+                    @click="handleSetImg(item, index)"
+                  />
+                </div> </template
+            ></fln-form-item>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div
+      class="col-12 row fl-mt-md"
+      style="
+        background: #ffffff;
+        border-radius: 3px;
+        padding: 17px 20px;
+        box-shadow: 0 3px 6px 1px rgba(188, 188, 188, 0.18);
+      "
+    >
+      <div
+        v-if="
+          Array.isArray(state.depPositions) &&
+          state.depPositions.filter((item) => item.positions?.length > 0)
+            .length > 0
+        "
+        class="col-12 row"
+      >
+        <div
+          class="col-12 fl-mt-md row items-center fl-pb-xs"
+          style="min-height: 40px"
+        >
+          <div
+            class="col-12 row justify-between items-center fl-px-md"
+            style="
+              min-height: 40px;
+              background: #46299dff;
+              border-radius: 3px 3px 0 0;
+            "
+          >
+            <div class="color-white">设置所属部门及岗位</div>
+          </div>
+          <div
+            style="border: 1px solid #c3c3c3; border-radius: 0 0 3px 3px"
+            class="col-12 row fl-pb-xs"
+          >
+            <div
+              class="col-12 row"
+              style="padding: 11px 0; background: #dfd7f2"
+            >
+              <div class="col-3 text-center">所属部门</div>
+              <div class="col-6 text-left">所属岗位</div>
+            </div>
+            <template v-for="(row, rowIdx) in state.depPositions">
+              <div
+                class="col-12 row fl-py-sm"
+                v-if="row.positions?.length > 0"
+                :style="
+                  rowIdx !== state.depPositions.length - 1
+                    ? 'border-bottom:1px solid #c3c3c3'
+                    : ''
+                "
+                :key="rowIdx"
+              >
+                <div class="col-3 row items-center justify-center">
+                  {{ row.name }}
+                </div>
+                <div class="col-6 row items-center">
+                  <div
+                    v-for="(tag, idx) in row.positions"
+                    :key="idx"
+                    class="fl-mr-sm fl-px-sm fl-py-xs row items-center fl-mb-xs"
+                    style="border: solid 1px #ded7f1; border-radius: 3px"
+                    :style="{
+                      borderColor: tag.color,
+                      color: tag.color || '#fff',
+                    }"
+                  >
+                    <n-popover :show-arrow="true">
+                      <template #trigger>
+                        {{ tag.name }}
+                      </template>
+                      {{ tag.name }}
+                    </n-popover>
+
+                    <close-circle-outlined
+                      v-if="!calcPageDisable()"
+                      class="fl-ml-md"
+                      @click="handleClearPage(rowIdx, tag)"
+                    />
+                  </div>
+                </div>
+              </div>
+            </template>
+          </div>
+        </div>
+      </div>
+
+      <div class="col-12 row">
+        <div
+          class="col-3 row fl-px-md"
+          style="overflow: auto; box-shadow: 0 3px 6px 1px #bcbcbc2e"
+        >
+          <fln-tree
+            :data="state.treeData"
+            :expandedKeys="state.expandedKeys"
+            :refreshCount="state.treeRefreshCount"
+            :clickKey="state.clickKey"
+            @triggerTreeClick="handleTreeClick"
+          ></fln-tree>
+        </div>
+        <div class="col-9 row fl-pl-md" style="align-content: flex-start">
+          <fln-table
+            class="artwork-table"
+            :config="state.tableConfig"
+            :defaultSelectedRows="state.tableDefaultPositions"
+            :clearSelectRowKey="state.tableClearKey"
+            :fatherData="state.treeSelectData"
+            :fatherParams="state.tableSearchData"
+            :refreshCount="state.tableConfig.refreshCount"
+            @triggerRowSelect="handleTableRowSelect"
+            @triggerRowSelectAll="handleTableCheckAll"
+          >
+            <template #table-header>
+              <span style="color: #fd0000" class="fl-mx-sm">*</span>
+              请至少勾选一个岗位</template
+            >
+          </fln-table>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div
+    class="width-100 row fl-pt-md fl-pb-lg"
+    style="position: fixed; bottom: 0px; background: #f0f0f5"
+  >
+    <div class="col-10 row justify-center">
+      <n-button
+        tertiary
+        class="fl-mr-md"
+        style="width: 161px; background: #c7c7c9ff; color: #ffffffff"
+        @click="handleBack"
+        >返回</n-button
+      >
+
+      <n-button
+        tertiary
+        v-if="state.pageType === 'edit'"
+        style="width: 161px; height: 34px; background: #46299dff; color: #fff"
+        @click="handleSave"
+        >保存</n-button
+      >
+
+      <n-button
+        tertiary
+        v-if="state.pageType === 'create'"
+        style="width: 161px; height: 34px; background: #46299dff; color: #fff"
+        @click="handleCreate"
+        >保存</n-button
+      >
+    </div>
+  </div>
+</template>
+
+<script setup>
+import flnTable from "@/components/flnlayout/table/flntable.vue";
+import flnFormItem from "@/components/flnlayout/form/flnformItem.vue";
+import flnTree from "@/components/flnlayout/tree/flnindex.vue";
+
+import { CloseCircleOutlined } from "@ant-design/icons-vue";
+import {
+  ref,
+  reactive,
+  onBeforeMount,
+  onActivated,
+  onMounted,
+  getCurrentInstance,
+  computed,
+  nextTick,
+  watch,
+} from "vue";
+import { processError, processSuccess } from "@/utils/helper/message";
+import { useRouter, useRoute } from "vue-router";
+const router = useRouter();
+const route = useRoute();
+const currentInstance = getCurrentInstance();
+const { $request } = currentInstance.appContext.config.globalProperties;
+const state = reactive({
+  tableClearKey: null,
+  treeSelectData: {},
+  tableDefaultPositions: [],
+  depPositions: [],
+  clickKey: "",
+  treeRefreshCount: 0,
+  expandedKeys: [],
+  treeData: [],
+  formData: {
+    nickName: null,
+    telNum: null,
+    status: "notactive",
+    positionName: null,
+    jobNum: null,
+    mailAccount: null,
+    enterDate: null,
+    recentImg: null,
+    avatar: null,
+  },
+  tableSearchData: {},
+  selectedRows: [],
+  tableConfig: {
+    hasSelection: true,
+    requestbysf: true,
+    rowKey: "ID",
+    refreshCount: 0,
+    listUrl: {
+      resDataField: "data",
+      pageField: "page",
+      pageSizeField: "pageSize",
+      url: "/position/v2/list",
+      params: [
+        {
+          label: "departmentID",
+          field: "key",
+        },
+      ],
+    },
+    columns: [
+      {
+        title: "岗位ID",
+        field: "ID",
+      },
+      {
+        width: 100,
+        align: "left",
+        title: "岗位名",
+        field: "name",
+        type: "sfBgColor",
+        bgConfig: {
+          bgColorField: "color",
+          color: "#fff",
+        },
+      },
+      {
+        type: "tooltip",
+        align: "left",
+        width: 120,
+        title: "岗位描述",
+        field: "remark",
+      },
+      {
+        width: 360,
+        align: "left",
+        title: "页面权限",
+        field: "menuAuths",
+        type: "tags",
+        tagConfig: {
+          showLength: 3,
+          bgColor: "#fff",
+          borderRadius: "14px",
+          style: "border-radius: 14px",
+        },
+      },
+    ],
+  },
+  defaultImgList: [
+    "https://cdns.fontree.cn/fonchain-main/prod/runtime/image/avart/0/d5f416d5-0b95-4b2c-82c4-6218d4017d17.jpg",
+    "https://cdns.fontree.cn/fonchain-main/prod/runtime/image/avart/0/012a339a-53d2-43f7-ae47-84d444d5ca6f.jpg",
+    "https://cdns.fontree.cn/fonchain-main/prod/runtime/file/avart/11/48ae18e2-37a4-4eab-bd03-5fe1099892c3.jpg",
+    "https://cdns.fontree.cn/fonchain-main/prod/runtime/file/avart/11/0a53fd8a-951e-4a8e-8d71-0198dad5e7ae.jpg",
+  ],
+  defaultImgSelect: null,
+  btnLoading: false,
+  pageType: "create",
+});
+watch(
+  () => state.clickKey,
+  (newVal, oldVal) => {
+    state.tableDefaultPositions =
+      state.depPositions.filter((item) => item.ID === state.clickKey).length > 0
+        ? state.depPositions.filter((item) => item.ID === state.clickKey)[0]
+            .positions
+        : [];
+  },
+  { deep: true }
+);
+
+onBeforeMount(() => {
+  getTreeData();
+  if (route.query.type) {
+    state.pageType = route.query.type;
+  }
+  if (route.query.type === "view") {
+    state.tableConfig.hasSelection = false;
+  }
+});
+onActivated(() => {
+  getTreeData();
+  if (route.query.type) {
+    state.pageType = route.query.type;
+  }
+  if (route.query.type === "view") {
+    state.tableConfig.hasSelection = false;
+  }
+});
+onMounted(() => {});
+const getPageData = () => {
+  if (route.query.ID) {
+    let url = "/user/v2/boss/staff/detail";
+    let params = {
+      ID: Number(route.query.ID),
+    };
+    $request.HTTP.components.postDataByParams(url, params).then(
+      (res) => {
+        if (res.status === 0) {
+          state.formData = {
+            nickName: res.data.nickName,
+            telNum: res.data.telNum,
+            status: res.data.status,
+            positionName: res.data.positionName,
+            jobNum: res.data.jobNum,
+            mailAccount: res.data.mailAccount,
+            enterDate: res.data.enterDate,
+            recentImg: res.data.recentImg,
+            avatar: res.data.avatar,
+          };
+          state.depPositions = res.data.depPositions || [];
+          state.tableDefaultPositions =
+            state.depPositions.filter((item) => item.ID === state.clickKey)
+              .length > 0
+              ? state.depPositions.filter(
+                  (item) => item.ID === state.clickKey
+                )[0].positions
+              : [];
+          state.depPositions.forEach((item) => {
+            item.isLeader = item.isLeader || false;
+          });
+        } else {
+          processError(res.msg || "获取数据失败！");
+        }
+      },
+      () => {
+        processError("获取数据失败！");
+      },
+      () => {
+        processError("获取数据失败！");
+      }
+    );
+  }
+};
+const getTreeData = () => {
+  let params = {};
+  $request.HTTP.components.viewMyTree(params).then(
+    (res) => {
+      if (res.status === 0 && Array.isArray(res.data.nodes)) {
+        let data = res.data.nodes;
+        calcTreeData(data);
+        state.treeData = data;
+        if (!state.expandedKeys.includes(data[0].key)) {
+          state.expandedKeys.push(data[0].key);
+        }
+        state.treeRefreshCount++;
+        if (JSON.stringify(state.treeSelectData) === "{}") {
+          state.treeSelectData = data[0];
+          state.clickKey = data[0].key;
+        }
+        state.tableConfig.refreshCount++;
+        if (route.query.ID) {
+          getPageData();
+        }
+      } else {
+        processError("获取失败！");
+      }
+    },
+    () => {
+      processError("获取失败！");
+    },
+    () => {
+      processError("获取失败！");
+    }
+  );
+};
+const calcTreeData = (data) => {
+  for (let item of data) {
+    item.key = item.ID;
+    item.title = item.name;
+    if (item.sons) {
+      item.children = item.sons;
+      calcTreeData(item.children);
+    }
+    delete item.ID;
+    delete item.name;
+    delete item.sons;
+  }
+};
+
+const handleValChange = ({ val, config }) => {
+  state.formData[config.field] = val;
+};
+const handleValBlur = ({ val, config }) => {
+  if (config.field === "nickName" && state.formData.nickName) {
+    let url = "/user/mail/account";
+    let params = {
+      nickName: val,
+      ID: route.query.ID ? Number(route.query.ID) : null,
+    };
+    $request.HTTP.components.postDataByParams(url, params).then(
+      (res) => {
+        state.btnLoading = false;
+        if (res.status === 0) {
+          state.formData.mailAccount = res.data.mailAccount;
+        } else {
+          processError("生成邮箱错误：" + res.msg);
+          state.formData.mailAccount = "";
+        }
+      },
+      () => {},
+      () => {}
+    );
+  }
+};
+
+const handleSearch = () => {
+  state.tableSearchData = JSON.parse(JSON.stringify(state.formData));
+};
+
+const handleTableRowSelect = ({ record, selected, selectedRows }) => {
+  if (
+    state.depPositions.filter((item) => item.ID === state.clickKey).length === 0
+  ) {
+    state.depPositions.push({
+      isLeader: false,
+      ID: state.clickKey,
+      name: state.treeSelectData.title,
+      positions: selectedRows.map((item) => {
+        return {
+          ID: item.ID,
+          name: item.name,
+          color: item.color,
+        };
+      }),
+    });
+  } else {
+    state.depPositions.forEach((item) => {
+      if (item.ID === state.clickKey) {
+        if (selected) {
+          // 当前部门有其他子岗位时不直接覆盖
+          item.positions = item.positions.filter(
+            (depItem) => depItem.ID !== record.ID
+          );
+          item.positions = item.positions.concat([
+            {
+              ID: record.ID,
+              name: record.name,
+              color: record.color,
+            },
+          ]);
+        } else {
+          item.positions = item.positions.filter(
+            (depItem) => depItem.ID !== record.ID
+          );
+        }
+      }
+    });
+  }
+
+  state.depPositions = state.depPositions.filter((item) => {
+    return item.positions && item.positions.length > 0;
+  });
+  state.selectedRows = selectedRows;
+};
+const handleTableCheckAll = ({ selectedRowKeys, selectedRows }) => {
+  if (
+    state.depPositions.filter((item) => item.ID === state.clickKey).length === 0
+  ) {
+    state.depPositions.push({
+      isLeader: false,
+      ID: state.clickKey,
+      name: state.treeSelectData.title,
+      positions: selectedRows.map((item) => {
+        return {
+          ID: item.ID,
+          name: item.name,
+          color: item.color,
+        };
+      }),
+    });
+  } else {
+    state.depPositions.forEach((item) => {
+      if (item.ID === state.clickKey) {
+        item.positions = selectedRows.map((item) => {
+          return {
+            ID: item.ID,
+            name: item.name,
+            color: item.color,
+          };
+        });
+      }
+    });
+  }
+
+  state.depPositions = state.depPositions.filter((item) => {
+    return item.positions && item.positions.length > 0;
+  });
+  state.selectedRows = selectedRows;
+};
+const handleDialogSave = () => {
+  state.dialogDel = false;
+};
+const handleDialogBack = () => {
+  state.dialogDel = false;
+};
+
+const handleTreeClick = ({ selectedKey, tree }) => {
+  state.clickKey = tree.key;
+  state.treeSelectData = tree;
+  state.tableConfig.refreshCount++;
+};
+const calcPageDisable = () => {
+  return state.pageType === "view";
+};
+const handleSetImg = (item, index) => {
+  state.formData.avatar = "";
+  nextTick(() => {
+    state.formData.avatar = item;
+    state.defaultImgSelect = index;
+  });
+};
+const handleCreate = () => {
+  if (
+    state.formData.jobNum === null ||
+    state.formData.jobNum === "" ||
+    state.formData.jobNum === undefined
+  ) {
+    processError("请输入员工工号");
+    return;
+  }
+  state.btnLoading = true;
+  state.depPositions = state.depPositions.filter((item) => {
+    return item.positions && item.positions.length > 0;
+  });
+  let url = "/user/v2/create";
+  let params = {
+    depPositions: state.depPositions,
+  };
+  Object.assign(params, state.formData);
+  $request.HTTP.components.postDataByParams(url, params).then(
+    (res) => {
+      state.btnLoading = false;
+      if (res.status === 0) {
+        processSuccess("操作成功！");
+        router.go(-1);
+      } else {
+        processError(res.msg || "操作失败！");
+      }
+    },
+    () => {
+      processError("操作失败！");
+      state.btnLoading = false;
+    },
+    () => {
+      processError("操作失败！");
+      state.btnLoading = false;
+    }
+  );
+};
+const handleSave = () => {
+  if (
+    state.formData.jobNum === null ||
+    state.formData.jobNum === "" ||
+    state.formData.jobNum === undefined
+  ) {
+    processError("请输入员工工号");
+    return;
+  }
+  state.btnLoading = true;
+  state.depPositions = state.depPositions.filter((item) => {
+    return item.positions && item.positions.length > 0;
+  });
+  let url = "/user/v2/boss/staff/update";
+  let params = {
+    ID: Number(route.query.ID),
+    depPositions: state.depPositions,
+  };
+  Object.assign(params, state.formData);
+
+  $request.HTTP.components.postDataByParams(url, params).then(
+    (res) => {
+      state.btnLoading = false;
+      if (res.status === 0) {
+        processSuccess("操作成功！");
+        getPageData();
+      } else {
+        processError(res.msg || "操作失败！");
+      }
+    },
+    () => {
+      processError("操作失败！");
+      state.btnLoading = false;
+    },
+    () => {
+      processError("操作失败！");
+      state.btnLoading = false;
+    }
+  );
+};
+const handleLink = (path) => {
+  router.push(path);
+};
+const handleBack = () => {
+  router.go(-1);
+};
+const calcDepPositions = () => {
+  for (let key in state.depPositions) {
+    let data = state.depPositions[key];
+    if (!data || JSON.stringify(data) === "[]") {
+      delete state.depPositions[key];
+    }
+  }
+};
+const handleClearPage = (idx, clearItem) => {
+  state.depPositions[idx].positions.forEach((item, index) => {
+    if (item.name === clearItem.name) {
+      state.depPositions[idx].positions.splice(index, 1);
+    }
+
+    if (state.depPositions[idx].positions.length === 0) {
+      state.depPositions.splice(idx, 1);
+    }
+  });
+  state.tableClearKey = clearItem.ID;
+};
+const calcSfBgColorWidth = (val) => {
+  if (val) {
+    return val.length * 15 + "px !important";
+  }
+  return null;
+};
+</script>
+
+<style lang="scss" scoped>
+.search-item {
+  :deep(.ant-input-affix-wrapper) {
+    background: #fff;
+    color: #c3c3c3;
+  }
+  :deep(.ant-input) {
+    color: #000;
+    &::placeholder {
+      color: #c3c3c3;
+    }
+  }
+  :deep(.ant-picker-input > input) {
+    color: #000;
+    &::placeholder {
+      color: #c3c3c3;
+    }
+  }
+  :deep(.ant-picker) {
+    width: 100%;
+    border-radius: 20px;
+    background: #fff !important;
+    color: #c3c3c3;
+    border: none;
+  }
+  :deep(.ant-picker-input > input) {
+    color: #000;
+    &::placeholder {
+      color: #c3c3c3;
+    }
+  }
+  :deep(.avatar-uploader > .ant-upload) {
+    background: #fafafcff;
+  }
+  :deep(.ant-image) {
+    height: 100%;
+    width: 100%;
+    border-radius: 50%;
+  }
+  :deep(.ant-image-img) {
+    object-fit: cover !important;
+    border-radius: 50%;
+  }
+  :deep(.ant-image-mask) {
+    border-radius: 50%;
+  }
+  :deep(.ant-upload) {
+    color: #c1b2e5;
+  }
+  :deep(.ant-select) {
+    color: #000;
+  }
+  :deep(.ant-select-selector .ant-select-selection-placeholder) {
+    color: #c3c3c3 !important;
+    &::placeholder {
+      color: #c3c3c3 !important;
+    }
+  }
+  :deep(.ant-select:not(.ant-select-customize-input) .ant-select-selector) {
+    background: #fff;
+  }
+}
+.img-avatar {
+  width: 40px;
+  height: 40px;
+  margin: 3px;
+  cursor: pointer;
+}
+.border-active {
+  border: 2px solid #764cf6;
+}
+</style>
diff --git a/src/views/manage/peomanage/index.vue b/src/views/manage/peomanage/index.vue
new file mode 100644
index 0000000..7f59c27
--- /dev/null
+++ b/src/views/manage/peomanage/index.vue
@@ -0,0 +1,578 @@
+<template>
+  <div class="row" style="padding: 35px">
+    <div
+      class="col-3 fl-pa-md"
+      style="
+        background: #fff;
+        box-shadow: rgba(188, 188, 188, 0.18) 0px 3px 6px 1px;
+      "
+    >
+      <div
+        class="row font-16"
+        style="color: #764cf6; border-bottom: 1px solid #c1b2e5"
+      >
+        <div class="fl-py-sm" style="border-bottom: 4px solid #764cf6">
+          组织架构
+        </div>
+      </div>
+      <div class="row" style="height: 76vh; overflow: auto">
+        <fl-tree
+          :data="state.treeData"
+          :expandedKeys="state.expandedKeys"
+          :refreshCount="state.treeRefreshCount"
+          :clickKey="state.clickKey"
+          @triggerTreeClick="handleTreeClick"
+        ></fl-tree>
+      </div>
+    </div>
+    <div class="col-9 row fl-px-md" style="align-items: flex-start">
+      <fln-table
+        :config="state.tableConfig"
+        :fatherData="state.treeSelectData"
+        :refreshCount="state.tableConfig.refreshCount"
+        @triggerRowActions="handleRowActions"
+        @triggerTableBatchActions="handleTableBatchActions"
+      >
+        <template #search-header>
+          <div
+            class="col-12 row font-18"
+            style="
+              color: #764cf6;
+              border-bottom: 1px solid #c1b2e5;
+              display: flex;
+              justify-content: space-between;
+              align-items: center;
+            "
+          >
+            <div class="fl-py-sm" style="border-bottom: 4px solid #764cf6">
+              {{ state.treeSelectData.title || "平台开发管理项目组" }}所有人员
+            </div>
+            <div>
+              <n-button @click="goToPeoManage" v-permission="'per-system-btn'">
+                系统所有人员
+              </n-button>
+            </div>
+          </div>
+        </template>
+      </fln-table>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import flnTable from "@/components/flnlayout/table/flntable.vue";
+import flTree from "@/components/flnlayout/tree/flnindex.vue";
+import { NButton, NPopover } from "naive-ui";
+import { Local } from "@/utils/storage.js";
+import {
+  ref,
+  reactive,
+  onBeforeMount,
+  onMounted,
+  getCurrentInstance,
+  computed,
+} from "vue";
+import { processError, processSuccess } from "@/utils/helper/message";
+import { useRouter } from "vue-router";
+const router = useRouter();
+const currentInstance = getCurrentInstance();
+const { $request, $hadRule } =
+  currentInstance.appContext.config.globalProperties;
+const state = reactive({
+  permission: false,
+  clickKey: "",
+  treeRefreshCount: 0,
+  expandedKeys: [],
+  treeData: [],
+  btnLoading: false,
+  treeSelectData: {},
+  selectedRows: [],
+  tableConfig: {
+    tableScrollWitdh: 600,
+    hasSelection: true,
+    rowKey: "ID",
+    refreshCount: 0,
+    listUrl: {
+      resDataField: "data",
+      pageField: "page",
+      pageSizeField: "pageSize",
+
+      url: "user/v2/list",
+      params: [
+        {
+          label: "fatherDepartmentId",
+          field: "key",
+        },
+      ],
+    },
+    searchConfig: [
+      {
+        type: "text",
+        label: "姓名",
+        field: "nickName",
+        class: "col-4",
+        placeholder: "",
+      },
+      {
+        type: "text",
+        label: "手机号",
+        field: "telNum",
+        class: "col-4",
+        placeholder: "",
+      },
+      {
+        type: "select",
+        label: "状态",
+        field: "status",
+        class: "col-4",
+        placeholder: "",
+        config: {
+          options: [
+            {
+              label: "有效",
+              value: "notactive",
+            },
+            {
+              label: "无效",
+              value: "left",
+            },
+          ],
+        },
+      },
+      {
+        type: "text",
+        label: "员工工号",
+        field: "jobNum",
+        class: "col-4",
+        placeholder: "",
+      },
+
+      {
+        type: "text",
+        label: "部门",
+        field: "departmentName",
+        class: "col-4",
+        placeholder: "",
+      },
+
+      {
+        type: "text",
+        label: "岗位",
+        field: "positionName",
+        class: "col-4",
+        placeholder: "",
+      },
+
+      {
+        type: "text",
+        label: "邮箱",
+        field: "mailAccount",
+        class: "col-4",
+        placeholder: "",
+      },
+      {
+        type: "rangdate",
+        label: "入职时间",
+        class: "col-4",
+        field: ["startEnterDate", "endEnterDate"],
+        placeholder: ["开始时间", "结束时间"],
+      },
+    ],
+    columns: [
+      {
+        width: 100,
+        title: "员工工号",
+        field: "jobNum",
+      },
+      {
+        width: 120,
+        title: "姓名",
+        field: "nickName",
+      },
+      {
+        type: "tooltip",
+        title: "手机",
+        field: "telNum",
+      },
+      {
+        width: 360,
+        title: "归属部门",
+        align: "left",
+        field: "depPositions",
+        type: "tags",
+        tagConfig: {
+          tagField: "name",
+          showLength: 3,
+          bgColor: "#E0E0E6FF",
+        },
+      },
+      {
+        width: 360,
+        title: $hadRule("posi-edit-btn")
+          ? "岗位（可点击岗位修改权限）"
+          : "岗位",
+        align: "left",
+        field: "positions",
+        render(row, index) {
+          const positions = row.positions;
+          if (!positions || positions.length === 0) {
+            return h("span", "No positions available");
+          }
+          // 渲染前3个标签
+          const visibleTags = positions.slice(0, 3).map((position) =>
+            h(
+              NButton,
+              {
+                style: {
+                  marginRight: "2px",
+                  borderWidth: "1px",
+                  borderStyle: "solid",
+                  color: position.color,
+                },
+                onClick: () => {
+                  if ($hadRule("posi-edit-btn")) {
+                    router.push(
+                      `/posimanage/create?ID=${position.ID}&&type=edit`
+                    );
+                  }
+                },
+              },
+              { default: () => position.name }
+            )
+          );
+
+          // 如果标签数量超过3个，渲染省略号按钮
+          if (positions.length > 3) {
+            const hiddenTags = positions.slice(3);
+            visibleTags.push(
+              h(
+                NPopover,
+                {
+                  trigger: "hover",
+                  placement: "bottom",
+                },
+                {
+                  trigger: () =>
+                    h(
+                      "span",
+                      {
+                        style: {
+                          marginLeft: "10px",
+                          borderWidth: "1px",
+                          borderStyle: "solid",
+                          color: "#000",
+                          cursor: "pointer",
+                          backgroundColor: "transparent",
+                          padding: "10px 15px",
+                          borderRadius: "5px",
+                        },
+                      },
+                      "..."
+                    ),
+                  default: () =>
+                    h(
+                      "div",
+                      {
+                        style: {
+                          padding: "10px",
+                          backgroundColor: "#fff",
+                          borderRadius: "5px",
+                          boxShadow: "0 2px 12px rgba(0, 0, 0, 0.1)",
+                        },
+                      },
+                      hiddenTags.map((position) =>
+                        h(
+                          NButton,
+                          {
+                            style: {
+                              marginRight: "2px",
+                              borderWidth: "1px",
+                              borderStyle: "solid",
+                              color: position.color,
+                            },
+                            onClick: () => {
+                              if ($hadRule("posi-edit-btn")) {
+                                router.push(
+                                  `/posimanage/create?ID=${position.ID}&&type=edit`
+                                );
+                              }
+                            },
+                          },
+                          { default: () => position.name }
+                        )
+                      )
+                    ),
+                }
+              )
+            );
+          }
+
+          return visibleTags;
+        },
+      },
+
+      {
+        width: 260,
+        title: "邮箱",
+        field: "mailAccount",
+      },
+      {
+        width: 100,
+        type: "avatar",
+        title: "员工头像",
+        field: "avatar",
+      },
+      {
+        width: 100,
+        type: "avatar",
+        title: "员工近照",
+        field: "recentImg",
+      },
+      {
+        type: "select",
+        title: "状态",
+        field: "status",
+        config: {
+          options: [
+            {
+              label: "有效",
+              value: "notactive",
+              class: "color-primary",
+            },
+            {
+              label: "无效",
+              value: "left",
+              class: "color-draft",
+            },
+          ],
+        },
+      },
+      {
+        width: 120,
+        title: "入职时间",
+        field: "enterDate",
+      },
+      {
+        width: 200,
+        title: "最近一次更新时间",
+        field: "updatedAt",
+      },
+      {
+        width: 140,
+        fixed: "right",
+        title: "操作人",
+        field: "operatorName",
+      },
+      {
+        width: 200,
+        fixed: "right",
+        title: "操作",
+        actions: [
+          {
+            actionType: "act_view",
+            type: "label",
+            label: "查看",
+            shape: "round",
+            class: "fl-mx-xs fl-mt-xs",
+          },
+          {
+            actionType: "act_edit",
+            type: "label",
+            label: "修改",
+            shape: "round",
+            class: "fl-mx-xs fl-mt-xs",
+          },
+        ],
+      },
+    ],
+    tableBatchActions: [
+      {
+        notLimitSelect: true,
+        actionType: "peo-create",
+        type: "primary",
+        label: "新增人员",
+      },
+      {
+        actionType: "peo-pass-set",
+        style: "background:#F7EFFFFF;color:#8352B4FF",
+        type: "primary",
+        label: "重置密码",
+      },
+    ],
+  },
+});
+onBeforeMount(() => {
+  getTreeData();
+});
+onMounted(() => {});
+
+const handleRowActions = ({ btnConfig, rowData }) => {
+  state.dialogData = rowData;
+  Local.set("orgmanage_treeSelectData", state.treeSelectData);
+  if (btnConfig.actionType === "act_edit") {
+    router.push(`/peomanage/editPeo?ID=${rowData.ID}&&type=edit`);
+  }
+  if (btnConfig.actionType === "act_view") {
+    router.push(`/peomanage/editPeo?ID=${rowData.ID}&&type=view`);
+  }
+};
+const handleTableBatchActions = ({ selectedRows, btnConfig, fatherData }) => {
+  state.selectedRows = selectedRows;
+  if (btnConfig.actionType === "peo-create") {
+    handleCreatePeo();
+  }
+  if (btnConfig.actionType === "peo-pass-set") {
+    handleResetPass();
+  }
+};
+
+const handleCreatePeo = () => {
+  router.push("/peomanage/editPeo");
+};
+
+const goToPeoManage = () => {
+  router.push("/peomanage/personnelManage");
+};
+
+const handleResetPass = () => {
+  state.btnLoading = true;
+  let url = "/user/v2/reset/pwd";
+  let params = {
+    IDs: state.selectedRows.map((item) => item.ID),
+  };
+  $request.HTTP.components.postDataByParams(url, params).then(
+    (res) => {
+      state.btnLoading = false;
+      if (res.status === 0) {
+        state.selectedRows = [];
+        state.tableConfig.refreshCount++;
+        processSuccess("操作成功！");
+      } else {
+        processError(res.msg || "操作失败！");
+      }
+    },
+    () => {
+      processError("操作失败！");
+      state.btnLoading = false;
+    },
+    () => {
+      processError("操作失败！");
+      state.btnLoading = false;
+    }
+  );
+};
+
+//只有自己的树
+const getTreeData = () => {
+  let params = {};
+  $request.HTTP.components.viewMyTree(params).then(
+    (res) => {
+      if (res.status === 0 && Array.isArray(res.data.nodes)) {
+        let data = res.data.nodes;
+        calcTreeData(data);
+        state.treeData = data;
+
+        // 获取最近点击的部门
+        let localSelect = Local.get("orgmanage_treeSelectData");
+        if (localSelect && JSON.stringify(localSelect) !== "{}") {
+          state.treeSelectData = localSelect;
+          state.expandedKeys = localSelect.pathIds;
+          state.clickKey = localSelect.key;
+        } else {
+          if (JSON.stringify(state.treeSelectData) === "{}") {
+            state.treeSelectData = data[0];
+            state.clickKey = data[0].key;
+          }
+          if (
+            state.clickKey === data[0].key &&
+            !state.expandedKeys.includes(data[0].key)
+          ) {
+            state.expandedKeys.push(data[0].key);
+          }
+          if (!state.expandedKeys.includes(state.clickKey)) {
+            state.expandedKeys.push(state.clickKey);
+          }
+        }
+        setTimeout(() => {
+          state.treeRefreshCount++;
+          state.tableConfig.refreshCount++;
+        }, 100);
+      } else {
+        processError(res.msg || "获取失败！");
+      }
+    },
+    () => {
+      processError("获取失败！");
+    },
+    () => {
+      processError("获取失败！");
+    }
+  );
+};
+const calcTreeData = (data) => {
+  for (let item of data) {
+    item.key = item.ID;
+    item.label = item.name;
+    item.title = item.name;
+    if (item.sons) {
+      item.children = item.sons;
+      calcTreeData(item.children);
+    }
+    delete item.ID;
+    delete item.name;
+    delete item.sons;
+  }
+};
+const handleTreeClick = ({ selectedKey, tree }) => {
+  state.clickKey = tree.key;
+  state.treeSelectData = tree;
+  Local.set("orgmanage_treeSelectData", state.treeSelectData);
+  state.tableConfig.refreshCount++;
+};
+</script>
+
+<style lang="scss" scoped>
+.search-item {
+  :deep(.ant-input-affix-wrapper) {
+    background: #fff;
+    color: #c3c3c3;
+  }
+  :deep(.ant-input) {
+    color: #000;
+    &::placeholder {
+      color: #c3c3c3;
+    }
+  }
+  :deep(.ant-picker-input > input) {
+    color: #000;
+    &::placeholder {
+      color: #c3c3c3;
+    }
+  }
+  :deep(.ant-picker) {
+    width: 100%;
+    border-radius: 20px;
+    background: #fff !important;
+    color: #c3c3c3;
+    border: none;
+  }
+  :deep(.ant-picker-input > input) {
+    color: #000;
+    &::placeholder {
+      color: #c3c3c3;
+    }
+  }
+  :deep(.ant-select) {
+    color: #000;
+  }
+  :deep(.ant-select-selector .ant-select-selection-placeholder) {
+    color: #c3c3c3 !important;
+    &::placeholder {
+      color: #c3c3c3 !important;
+    }
+  }
+  :deep(.ant-select:not(.ant-select-customize-input) .ant-select-selector) {
+    background: #fff;
+  }
+}
+</style>
diff --git a/src/views/manage/peomanage/personnelManage.vue b/src/views/manage/peomanage/personnelManage.vue
new file mode 100644
index 0000000..d8d1e29
--- /dev/null
+++ b/src/views/manage/peomanage/personnelManage.vue
@@ -0,0 +1,483 @@
+<template>
+  <div class="row"
+       style="padding: 35px">
+    <div class="col-12 row">
+      <fln-table :config="state.tableConfig"
+                 :fatherData="state.treeSelectData"
+                 :refreshCount="state.tableConfig.refreshCount"
+                 @triggerRowActions="handleRowActions"
+                 @triggerTableBatchActions="handleTableBatchActions">
+        <template #search-header>
+          <div class="col-12 row font-18"
+               style="color: #764cf6; border-bottom: 1px solid #c1b2e5; display: flex; justify-content: space-between; align-items: center;">
+            <div class="fl-py-sm"
+                 style="border-bottom: 4px solid #764cf6">
+              系统所有人员
+            </div>
+            <div>
+              <n-button @click="goToIndex">
+                返回部门人员
+              </n-button>
+            </div>
+          </div>
+        </template>
+      </fln-table>
+    </div>
+  </div>
+  <n-modal v-model:show="state.dialogDel"
+           style="width: 600px"
+           :mask-closable="false"
+           preset="card">
+    <template #header>
+      <div class="col-12 row justify-center relative"
+           style="border-bottom: 1px solid #dfd7f2">
+        <div style="font-size: 20px; font-weight: bold; color: #1f2225ff">
+          删除
+        </div>
+      </div>
+    </template>
+    <div class="row justify-center fl-pa-md">
+      <div v-if="state.dialogData.type === 'one'"
+           class="font-20"
+           style="color: #1f2225ff; margin: 80px 0">
+        确定删除该人员吗？ 删除后将不可恢复！
+      </div>
+      <div v-if="state.dialogData.type === 'batch'"
+           class="font-20"
+           style="color: #1f2225ff; margin: 80px 0">
+        确定删除选中的人员吗？ 删除后将不可恢复！
+      </div>
+      <div class="col-12 row justify-center">
+        <n-button tertiary
+                  style="width: 161px; background: #c7c7c9ff; color: #fff"
+                  class="fl-mr-md"
+                  @click="handleDialogBack">返回</n-button>
+
+        <n-button tertiary
+                  style="width: 161px; background: #46299dff; color: #fff"
+                  @click="handleDialogSave">确定</n-button>
+      </div>
+    </div>
+  </n-modal>
+</template>
+  
+  <script setup>
+import flnTable from "@/components/flnlayout/table/flntable.vue";
+import { NButton } from "naive-ui";
+import {
+  ref,
+  reactive,
+  onBeforeMount,
+  onMounted,
+  getCurrentInstance,
+  computed,
+} from "vue";
+import { processError, processSuccess } from "@/utils/helper/message";
+import { useRouter } from "vue-router";
+const router = useRouter();
+const currentInstance = getCurrentInstance();
+const { $request } = currentInstance.appContext.config.globalProperties;
+const state = reactive({
+  dialogDel: false,
+  dialogData: {},
+
+  btnLoading: false,
+  selectedRows: [],
+  tableConfig: {
+    tableScrollWitdh: 600,
+    hasSelection: true,
+    rowKey: "ID",
+    refreshCount: 0,
+    listUrl: {
+      resDataField: "data",
+      pageField: "page",
+      pageSizeField: "pageSize",
+      url: "user/v2/list",
+      params: [],
+    },
+    searchConfig: [
+      {
+        type: "text",
+        label: "姓名",
+        field: "nickName",
+        placeholder: "",
+      },
+      {
+        type: "text",
+        label: "手机号",
+        field: "telNum",
+        placeholder: "",
+      },
+      {
+        type: "select",
+        label: "状态",
+        field: "status",
+        placeholder: "",
+        config: {
+          options: [
+            {
+              label: "有效",
+              value: "notactive",
+            },
+            {
+              label: "无效",
+              value: "left",
+            },
+          ],
+        },
+      },
+      {
+        type: "text",
+        label: "员工工号",
+        field: "jobNum",
+        placeholder: "",
+      },
+
+      {
+        type: "text",
+        label: "部门",
+        field: "departmentName",
+        placeholder: "",
+      },
+
+      {
+        type: "text",
+        label: "岗位",
+        field: "positionName",
+        placeholder: "",
+      },
+
+      {
+        type: "text",
+        label: "邮箱",
+        field: "mailAccount",
+        placeholder: "",
+      },
+      {
+        type: "rangdate",
+        label: "入职时间",
+        field: ["startEnterDate", "endEnterDate"],
+        placeholder: ["开始时间", "结束时间"],
+      },
+    ],
+    columns: [
+      {
+        width: 100,
+        title: "员工工号",
+        field: "jobNum",
+      },
+      {
+        width: 120,
+        title: "姓名",
+        field: "nickName",
+      },
+      {
+        type: "tooltip",
+        title: "手机",
+        field: "telNum",
+      },
+      {
+        width: 360,
+        title: "归属部门",
+        align: 'left',
+        field: "depPositions",
+        type: "tags",
+        tagConfig: {
+          tagField: "name",
+          showLength: 3,
+          bgColor: "#E0E0E6FF",
+        },
+      },
+      {
+        width: 360,
+        title: "岗位",
+        align: 'left',
+        field: "positions",
+        type: "tags",
+        tagConfig: {
+          tagField: "name",
+          tagBgColorField: "color",
+          showLength: 3,
+        },
+      },
+      {
+        width: 260,
+        title: "邮箱",
+        field: "mailAccount",
+      },
+      {
+        width: 100,
+        type: "avatar",
+        title: "员工头像",
+        field: "avatar",
+      },
+      {
+        width: 100,
+        type: "avatar",
+        title: "员工近照",
+        field: "recentImg",
+      },
+      {
+        type: "select",
+        title: "状态",
+        field: "status",
+        config: {
+          options: [
+            {
+              label: "有效",
+              value: "notactive",
+              class: "color-primary",
+            },
+            {
+              label: "无效",
+              value: "left",
+              class: "color-draft",
+            },
+          ],
+        },
+      },
+      {
+        width: 120,
+        title: "入职时间",
+        field: "enterDate",
+      },
+      {
+        width: 160,
+        title: "最近一次更新时间",
+        field: "updatedAt",
+      },
+      {
+        width: 140,
+        fixed: "right",
+        title: "操作人",
+        field: "operatorName",
+      },
+      {
+        width: 200,
+        fixed: "right",
+        title: "操作",
+        actions: [
+          {
+            actionType: "act_view",
+            type: "label",
+            label: "查看",
+            shape: "round",
+            class: "fl-mx-xs fl-mt-xs",
+          },
+          {
+            actionType: "act_edit",
+            type: "label",
+            label: "修改",
+            shape: "round",
+            class: "fl-mx-xs fl-mt-xs",
+          },
+          {
+            actionType: "act_del",
+            type: "label",
+            label: "删除",
+            shape: "round",
+            class: "fl-mx-xs fl-mt-xs",
+          },
+        ],
+      },
+    ],
+    tableBatchActions: [
+      {
+        notLimitSelect: true,
+        actionType: "peo-create",
+        type: "primary",
+        label: "新建人员",
+      },
+      {
+        actionType: "peo-pass-set",
+        style: "background:#F7EFFFFF;color:#8352B4FF",
+        type: "primary",
+        label: "重置密码",
+      },
+    ],
+  },
+});
+onBeforeMount(() => { });
+onMounted(() => { });
+
+const handleRowActions = ({ btnConfig, rowData }) => {
+  state.dialogData = rowData;
+  if (btnConfig.actionType === "act_del") {
+    if (rowData.status !== "left") {
+      processError("该人员在职，不可删除");
+      return
+    }
+    state.dialogData.type = "one";
+    state.dialogDel = true;
+  }
+  if (btnConfig.actionType === "act_edit") {
+    router.push(`/peomanage/create?ID=${rowData.ID}&&type=edit`);
+  }
+  if (btnConfig.actionType === "act_view") {
+    router.push(`/peomanage/create?ID=${rowData.ID}&&type=view`);
+  }
+};
+const handleTableBatchActions = ({ selectedRows, btnConfig, fatherData }) => {
+  state.selectedRows = selectedRows
+
+  if (btnConfig.actionType === "peo-create") {
+    handleCreatePeo();
+  }
+  if (btnConfig.actionType === "peo-pass-set") {
+    handleResetPass();
+  }
+};
+
+const goToIndex = () => {
+  router.push("/peomanage");
+};
+
+const handleCreatePeo = () => {
+  router.push("/peomanage/create");
+};
+const handleResetPass = () => {
+  state.btnLoading = true;
+  let url = "/user/v2/reset/pwd";
+  let params = {
+    IDs: state.selectedRows.map((item) => item.ID),
+  };
+  $request.HTTP.components.postDataByParams(url, params).then(
+    (res) => {
+      state.btnLoading = false;
+      if (res.status === 0) {
+        state.selectedRows = [];
+        state.tableConfig.refreshCount++;
+        processSuccess("操作成功！");
+      } else {
+        processError(res.msg || "操作失败！");
+      }
+    },
+    () => {
+      processError("操作失败！");
+      state.btnLoading = false;
+    },
+    () => {
+      processError("操作失败！");
+      state.btnLoading = false;
+    }
+  );
+};
+
+const handleDeleteBatch = () => {
+  state.dialogData.type = "batch";
+  state.dialogDel = true;
+};
+const handleDeleteBatchSave = () => {
+  state.btnLoading = true;
+  let url = "/user/v2/batch/remove";
+  let params = {
+    IDs: state.selectedRows.map((item) => item.ID),
+  };
+  $request.HTTP.components.postDataByParams(url, params).then(
+    (res) => {
+      state.btnLoading = false;
+      if (res.status === 0) {
+        state.selectedRows = [];
+        state.tableConfig.refreshCount++;
+        processSuccess("操作成功！");
+        state.dialogDel = false;
+      } else {
+        processError(res.msg || "操作失败！");
+      }
+    },
+    () => {
+      processError("操作失败！");
+      state.btnLoading = false;
+      state.dialogDel = false;
+    },
+    () => {
+      processError("操作失败！");
+      state.btnLoading = false;
+      state.dialogDel = false;
+    }
+  );
+};
+const handleDialogSave = () => {
+  if (state.dialogData.type === "batch") {
+    handleDeleteBatchSave();
+    return;
+  }
+  state.btnLoading = true;
+  let url = "/user/v2/remove";
+  let params = {
+    ID: state.dialogData.ID,
+  };
+  $request.HTTP.components.postDataByParams(url, params).then(
+    (res) => {
+      state.btnLoading = false;
+      if (res.status === 0) {
+        state.tableConfig.refreshCount++;
+        state.dialogDel = false;
+        processSuccess("操作成功！");
+      } else {
+        processError(res.msg || "操作失败！");
+      }
+    },
+    () => {
+      processError("操作失败！");
+      state.btnLoading = false;
+      state.dialogDel = false;
+    },
+    () => {
+      state.dialogDel = false;
+      state.btnLoading = false;
+      processError("操作失败！");
+    }
+  );
+};
+const handleDialogBack = () => {
+  state.dialogDel = false;
+};
+  </script>
+  
+  <style lang="scss" scoped>
+.search-item {
+  :deep(.ant-input-affix-wrapper) {
+    background: #fff;
+    color: #c3c3c3;
+  }
+  :deep(.ant-input) {
+    color: #000;
+    &::placeholder {
+      color: #c3c3c3;
+    }
+  }
+  :deep(.ant-picker-input > input) {
+    color: #000;
+    &::placeholder {
+      color: #c3c3c3;
+    }
+  }
+  :deep(.ant-picker) {
+    width: 100%;
+    border-radius: 20px;
+    background: #fff !important;
+    color: #c3c3c3;
+    border: none;
+  }
+  :deep(.ant-picker-input > input) {
+    color: #000;
+    &::placeholder {
+      color: #c3c3c3;
+    }
+  }
+  :deep(.ant-select) {
+    color: #000;
+  }
+  :deep(.ant-select-selector .ant-select-selection-placeholder) {
+    color: #c3c3c3 !important;
+    &::placeholder {
+      color: #c3c3c3 !important;
+    }
+  }
+  :deep(.ant-select:not(.ant-select-customize-input) .ant-select-selector) {
+    background: #fff;
+  }
+}
+</style>
+  
\ No newline at end of file
diff --git a/src/views/manage/posimanage/aboutApproval.vue b/src/views/manage/posimanage/aboutApproval.vue
new file mode 100644
index 0000000..cdb78f9
--- /dev/null
+++ b/src/views/manage/posimanage/aboutApproval.vue
@@ -0,0 +1,311 @@
+<template>
+  <n-modal v-model:show="state.dialogModal" :mask-closable="false">
+    <n-card
+      style="width: 80vw"
+      :bordered="false"
+      size="huge"
+      role="dialog"
+      aria-modal="true"
+    >
+      <template #header>
+        <div
+          class="col-12 row justify-center relative"
+          style="border-bottom: 1px solid #dfd7f2"
+        >
+          <div style="font-size: 20px; font-weight: bold; color: #1f2225ff">
+            批量加入审批发起人
+          </div>
+        </div>
+      </template>
+
+      <template #header-extra>
+        <n-button @click="triggerCalcApproval" text style="font-size: 24px">
+          <n-icon>
+            <close-icon />
+          </n-icon>
+        </n-button>
+      </template>
+      <div class="row justify-center fl-pa-md" style="color: #333639">
+        <div class="row col-12 fl-mt-lg">
+          <div class="col-12">请选择审批类型</div>
+          <div class="col-12 fl-mt-md overflow-auto" style="height: 60vh">
+            <fln-table
+              :config="state.tableConfig"
+              :refreshCount="state.tableConfig.refreshCount"
+              @triggerSelectCheck="handleTableSelectCheck"
+            >
+            </fln-table>
+          </div>
+        </div>
+
+        <div class="col-12 row justify-center fl-mt-md">
+          <n-button
+            tertiary
+            style="width: 161px; background: #c7c7c9ff; color: #fff"
+            class="fl-mr-md"
+            @click="triggerCalcApproval"
+            >上一步</n-button
+          >
+
+          <n-button
+            tertiary
+            style="width: 161px; background: #46299dff; color: #fff"
+            :disabled="state.selectedRows.length === 0"
+            @click="triggerCalcApproval('submit')"
+            >确定</n-button
+          >
+        </div>
+      </div>
+    </n-card>
+  </n-modal>
+</template>
+<script setup>
+// 岗位新建中 选模版时的添加审批
+import {
+  UpOutlined,
+  DownOutlined,
+  CloseCircleOutlined,
+  PlusOutlined,
+  DragOutlined,
+} from "@ant-design/icons-vue";
+import flnFormItem from "@/components/flnlayout/form/flnformItem.vue";
+import flAboutApproval from "./aboutApproval.vue";
+import draggable from "vuedraggable";
+import { Close as CloseIcon } from "@vicons/ionicons5";
+import {
+  ref,
+  reactive,
+  onBeforeMount,
+  onMounted,
+  getCurrentInstance,
+  computed,
+  nextTick,
+} from "vue";
+import { processError, processSuccess } from "@/utils/helper/message";
+import { useRouter, useRoute } from "vue-router";
+const router = useRouter();
+const route = useRoute();
+const currentInstance = getCurrentInstance();
+const { $request } = currentInstance.appContext.config.globalProperties;
+import { ChevronDownOutline, ChevronUpOutline } from "@vicons/ionicons5";
+
+import flnTable from "@/components/flnlayout/table/flntable.vue";
+const emit = defineEmits(["triggerCalcApproval"]);
+const state = reactive({
+  btnLoading: false,
+  dialogModal: true,
+  tableConfig: {
+    tableScrollWitdh: 600,
+    rowKey: "ID",
+    refreshCount: 0,
+    listUrl: {
+      resDataField: "GroupList",
+      url: "/approval/v2/only-group",
+    },
+    columns: [
+      {
+        title: "审批类型分组",
+        field: "Title",
+      },
+      {
+        title: "",
+        field: "",
+      },
+      {
+        title: "",
+        field: "",
+      },
+      {
+        title: "",
+        field: "",
+      },
+      {
+        title: "",
+        field: "",
+      },
+      {
+        title: "",
+        field: "",
+      },
+    ],
+    expandConfig: {
+      defaultSelectedRows: [],
+      tableScrollWitdh: 600,
+      rowKey: "ID",
+      refreshCount: 0,
+      listUrl: {
+        resDataField: "TypeList",
+        url: "/approval/v2/type/all",
+        params: [
+          {
+            label: "domain",
+            field: "Domain",
+          },
+          {
+            label: "groupId",
+            field: "ID",
+          },
+        ],
+      },
+      columns: [
+        {
+          type: "selection",
+          width: 50,
+          disabled(row) {
+            return row.Auths[0].UserID !== 0 || row.Auths[0].IsAll !== 0;
+          },
+        },
+        {
+          title: "流程名称",
+          field: "Title",
+        },
+        {
+          title: "发起人",
+          dataIndex: "Auths",
+          key: "Auths",
+          render(row) {
+            return h(
+              "div",
+              {
+                style:
+                  "word-break:break-all;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;",
+                title: `${getAuths(row?.Auths)}`,
+              },
+              `${getAuths(row?.Auths)}`
+            );
+          },
+        },
+        {
+          title: "审批节点",
+          key: "ApprovalUsers",
+          dataIndex: "ApprovalUsers",
+          render(row) {
+            return h("div", {}, `${getApprovalUsers(row?.ApprovalUsers)}`);
+          },
+        },
+        {
+          title: "抄送",
+          dataIndex: "CopyUsers",
+          key: "CopyUsers",
+          render(row) {
+            return h(
+              "div",
+              {},
+              `${
+                Array.isArray(row.CopyUsers)
+                  ? row.CopyUsers.map((item) =>
+                      item.ID !== 0
+                        ? item.Name
+                        : `${item.DepartmentName}-${item.PositionName}`
+                    ).join(",")
+                  : "-"
+              }`
+            );
+          },
+        },
+        {
+          title: "备注",
+          dataIndex: "Remark",
+          key: "Remark",
+        },
+      ],
+    },
+  },
+  selectedRows: [],
+});
+onBeforeMount(() => {
+  state.dialogModal = true;
+});
+
+onMounted(() => {});
+const getAuths = (auths) => {
+  if (auths) {
+    if (auths && auths.length === 1 && auths[0].IsAll === 1) {
+      return "全公司人员";
+    } else {
+      return auths
+        .filter((item) => item.IsAll === 0)
+        .map((item) =>
+          item.Name ? item.Name : item.DepartmentName + item.PositionName
+        )
+        .filter(Boolean)
+        .join("—");
+    }
+  }
+};
+const getApprovalUsers = (userList) => {
+  let user = "";
+  if (userList) {
+    user = userList
+      .filter((item) => item.DepartmentUID !== "undefined")
+      .map((item) => {
+        return {
+          flow:
+            item.IsDirect === 1 && item.IsDesignate === 1
+              ? `直属第${item.Level}级`
+              : item.IsDirect === 1
+              ? `直属${item.Level}级`
+              : item.Name
+              ? item.Name
+              : item.DepartmentName + item.PositionName,
+        };
+      })
+      .map((item) => item.flow)
+      .join("—");
+  } else {
+    user = "";
+  }
+  return user;
+};
+const triggerCalcApproval = (type) => {
+  if (type === "submit") {
+    emit("triggerCalcApproval", state.selectedRows);
+  } else {
+    emit("triggerCalcApproval", []);
+  }
+};
+const handleTableSelectCheck = (data) => {
+  if (data && Array.isArray(data.selectedRow)) {
+    data.selectedRow = data.selectedRow.filter((item) => {
+      if (item) {
+        return item;
+      }
+    });
+  }
+  if (data.action === "check" || data.action === "checkAll") {
+    state.selectedRows = state.selectedRows.concat(data.selectedRow);
+    state.selectedRows = state.selectedRows.filter((item, index, arr) => {
+      return (
+        arr.findIndex((obj) => JSON.stringify(obj) === JSON.stringify(item)) ===
+        index
+      );
+    });
+  }
+  if (data.action === "uncheck") {
+    state.selectedRows = state.selectedRows.filter((item) => {
+      return item.ID !== data.selectedRow.ID;
+    });
+  }
+  if (data.action === "uncheckAll") {
+    state.selectedRows = state.selectedRows.filter((item) => {
+      return (
+        data.selectedRow.findIndex((obj) => {
+          return obj.ID === item.ID;
+        }) === -1
+      );
+    });
+  }
+  state.tableConfig.expandConfig.defaultSelectedRows = state.selectedRows;
+};
+</script>
+
+<style lang="scss" scoped>
+:deep(
+    .fln-table
+      .n-data-table-table
+      .n-checkbox.n-checkbox--disabled
+      .n-checkbox-box
+  ) {
+  background-color: #d5d5d5 !important;
+}
+</style>
diff --git a/src/views/manage/posimanage/components/flnindex.vue b/src/views/manage/posimanage/components/flnindex.vue
new file mode 100644
index 0000000..85e435d
--- /dev/null
+++ b/src/views/manage/posimanage/components/flnindex.vue
@@ -0,0 +1,156 @@
+<template>
+  <div class="fl-tree width-100 fl-mt-md">
+    <div class="row justify-end">
+      <div style="margin-right: 220px">是否为销售部门</div>
+    </div>
+    <n-tree
+      v-if="state.treeLoading"
+      block-line
+      :default-expanded-keys="state.expandedKeys"
+      :default-selected-keys="state.clickKey"
+      label-field="name"
+      key-field="key"
+      :expand-on-click="true"
+      :render-label="renderLabel"
+      :data="state.treeData"
+      @update:selected-keys="handleSelectTree"
+    />
+  </div>
+</template>
+<script setup>
+import {
+  ref,
+  reactive,
+  onBeforeMount,
+  onMounted,
+  getCurrentInstance,
+  computed,
+  defineEmits,
+  watch,
+  nextTick,
+} from "vue";
+
+import treeLabel from "./treelabel.vue";
+
+const currentInstance = getCurrentInstance();
+const { $request } = currentInstance.appContext.config.globalProperties;
+let props = defineProps({
+  data: Object,
+  refreshCount: Number,
+  config: Object,
+  expandedKeys: Array,
+  clickKey: [String, Number],
+});
+const state = reactive({
+  expandedKeys: [],
+  editTitle: "",
+  treeData: [],
+  clickKey: [],
+  treeLoading: true,
+  selectOptions: [],
+});
+
+watch(
+  () => props.refreshCount,
+  () => {
+    state.clickKey = [props.clickKey];
+    state.treeLoading = false;
+    nextTick(() => {
+      state.treeData = props.data;
+      calcDefaultConfig(state.treeData, 1);
+      state.treeLoading = true;
+    });
+  }
+);
+
+watch(
+  () => props.expandedKeys,
+  () => {
+    state.clickKey = [props.clickKey];
+    state.expandedKeys = props.expandedKeys;
+  },
+  { deep: true }
+);
+
+onBeforeMount(() => {
+  state.clickKey = [props.clickKey];
+  state.treeData = props.data;
+  calcDefaultConfig(state.treeData, 1);
+  state.expandedKeys = state.treeData.map((item) => item.key);
+});
+
+onMounted(() => {
+  getSelectOptions();
+});
+
+const emit = defineEmits([
+  "triggerTreeAction",
+  "triggerTreeClick",
+  "triggerTreeDefaultClick",
+]);
+const handleSelectTree = (keys, option, meta) => {
+  if (keys.length === 1) {
+    emit("triggerTreeClick", { selectedKey: keys[0], tree: option[0] });
+  } else {
+    emit("triggerTreeDefaultClick");
+  }
+};
+const renderLabel = (option, checked) => {
+  return h(
+    treeLabel,
+    {
+      dataRef: option,
+      checked: checked,
+      config: props.config,
+      clickKey: props.clickKey,
+      options: state.selectOptions,
+      onTriggerTreeAction: handleTreeAction,
+    },
+    {}
+  );
+};
+
+const calcDefaultConfig = (data, level) => {
+  for (let item of data) {
+    if (!item.key) {
+      item.key = item.title + "_" + level;
+    }
+    item.edit = false;
+    if (item.children) {
+      calcDefaultConfig(item.children, level + 1);
+    }
+  }
+};
+
+const override = ({ option }) => {
+  if (option.children) {
+    return "toggleExpand";
+  }
+  return "default";
+};
+const handleTreeAction = ({ type, val }) => {
+  emit("triggerTreeAction", { type, val });
+};
+
+const getSelectOptions = () => {
+  let url = "department/head/list";
+  let params = {};
+  $request.HTTP.components.postDataByParams(url, params).then(
+    (res) => {
+      if (res.status === 0) {
+        let resData = res.data.list || [];
+        state.selectOptions = resData.filter((item) => item.alias);
+      } else {
+        processError(res.msg || "获取失败！");
+      }
+    },
+    () => {
+      processError("获取失败！");
+    },
+    () => {
+      processError("获取失败！");
+    }
+  );
+};
+</script>
+<style lang="scss" scoped></style>
diff --git a/src/views/manage/posimanage/components/treelabel.vue b/src/views/manage/posimanage/components/treelabel.vue
new file mode 100644
index 0000000..9812be4
--- /dev/null
+++ b/src/views/manage/posimanage/components/treelabel.vue
@@ -0,0 +1,240 @@
+<template>
+  <div class="row items-center">
+    <div v-if="state.treeData.edit">
+      <n-input v-model:value="state.editTitle" style="width: 120px" />
+    </div>
+
+    <n-popover trigger="hover" v-else>
+      <template #trigger>
+        <div style="width: 120px" class="fl-px-sm sf-text-ellipsis">
+          {{ state.treeData.title }}
+        </div>
+      </template>
+      <div>{{ state.treeData.title }}</div>
+    </n-popover>
+    <div class="row" style="width: calc(100% - 120px)">
+      <div class="col-4 row items-center">
+        <n-icon
+          :component="CreateOutline"
+          class="fl-ml-sm"
+          size="20"
+          v-if="config?.actions.includes('edit') && !state.treeData.edit"
+          @click.stop="handleTreeEdit(state.treeData)"
+        />
+        <n-icon
+          :component="Remove"
+          size="20"
+          v-if="
+            config?.actions.includes('subtraction') &&
+            !state.treeData.edit &&
+            visibleFormItem(config.subtractionShow, state.treeData)
+          "
+          class="fl-ml-sm"
+          @click.stop="handleTreeSubtraction(state.treeData)"
+        />
+        <n-icon
+          :component="Add"
+          size="20"
+          v-if="
+            config?.actions.includes('add') &&
+            !state.treeData.edit &&
+            visibleFormItem(config.addShow, state.treeData)
+          "
+          class="fl-ml-sm"
+          @click.stop="handleTreeAdd(state.treeData)"
+        />
+        <drag-outlined
+          v-if="
+            config?.actions.includes('move') &&
+            !state.treeData.edit &&
+            visibleFormItem(config.moveShow, state.treeData)
+          "
+          class="fl-ml-sm"
+          @click.stop="handleTreeMove(state.treeData)"
+        />
+
+        <!-- <n-icon :component="MoveOutline"
+            size="20"
+            v-if="config?.actions.includes('move')&&!state.treeData.edit&&visibleFormItem(config.moveShow, state.treeData)"
+            class="fl-ml-sm"
+            @click.stop="handleTreeMove(state.treeData)" /> -->
+
+        <n-icon
+          :component="Checkmark"
+          size="20"
+          v-if="state.treeData.edit"
+          class="fl-ml-sm"
+          @click.stop="handleTreeSave(state.treeData)"
+        />
+        <n-icon
+          :component="Close"
+          size="20"
+          v-if="state.treeData.edit"
+          class="fl-ml-md"
+          @click.stop="handleTreeNotSave(state.treeData)"
+        />
+      </div>
+      <div class="col-8 row items-center justify-end" @click.stop>
+        <div>
+          <n-radio-group
+            v-model:value="state.radioVal"
+            @update:value="handleRadioChange"
+          >
+            <n-space>
+              <n-radio :value="true"> 是 </n-radio>
+              <n-radio :value="false"> 否 </n-radio>
+            </n-space>
+          </n-radio-group>
+        </div>
+        <div class="fl-ml-md" style="width: 200px" @click="handleSelectClick">
+          <n-select
+            v-model:value="state.selectVal"
+            size="small"
+            filterable
+            clearable
+            placeholder="请选择对应部门"
+            label-field="alias"
+            value-field="storeId"
+            :options="options"
+            @update:value="handleSelectChange"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { onBeforeMount, onMounted, watch, getCurrentInstance } from "vue";
+import { visibleFormItem } from "@/utils/helper/form";
+const currentInstance = getCurrentInstance();
+const { $request } = currentInstance.appContext.config.globalProperties;
+import {
+  UpOutlined,
+  DownOutlined,
+  CloseCircleOutlined,
+  PlusOutlined,
+  DragOutlined,
+} from "@ant-design/icons-vue";
+import {
+  Add,
+  Checkmark,
+  Close,
+  CreateOutline,
+  Remove,
+  MoveOutline,
+} from "@vicons/ionicons5";
+let props = defineProps({
+  dataRef: Object,
+  checked: Boolean,
+  config: Object,
+  clickKey: [String, Number],
+  options: Array,
+});
+const state = reactive({
+  expandedKeys: [],
+  editTitle: "",
+  treeData: [],
+  radioVal: null,
+  selectVal: null,
+});
+onBeforeMount(() => {
+  state.treeData = props.dataRef.option;
+  state.radioVal = state.treeData.sync;
+  if (state.treeData.syncId) {
+    state.selectVal = state.treeData.syncId * 1;
+  }
+});
+watch(
+  () => props.dataRef.option,
+  (val) => {
+    state.treeData = props.dataRef.option;
+  },
+  { deep: true }
+);
+
+onMounted(() => {});
+const emit = defineEmits(["triggerTreeAction", "triggerTreeClick"]);
+
+// const myComponentRef = ref(null);
+const handleTreeEdit = () => {
+  state.editTitle = state.treeData.title;
+  state.treeData.edit = true;
+  // myComponentRef.value.$forceUpdate();
+};
+const handleTreeAdd = () => {
+  emit("triggerTreeAction", { type: "add", val: state.treeData });
+};
+const handleTreeMove = () => {
+  emit("triggerTreeAction", { type: "move", val: state.treeData });
+};
+
+const handleTreeSubtraction = () => {
+  emit("triggerTreeAction", { type: "subtraction", val: state.treeData });
+};
+const handleTreeSave = () => {
+  state.treeData.title = state.editTitle;
+  emit("triggerTreeAction", { type: "save", val: state.treeData });
+};
+const handleTreeNotSave = () => {
+  state.editTitle = "";
+  emit("triggerTreeAction", { type: "cancel", val: state.treeData });
+};
+const handleRadioChange = (val) => {
+  let url = "department/v2/update";
+  let params = {
+    ID: state.treeData.key,
+    name: state.treeData.title,
+    sync: val,
+    syncID: state.treeData.syncId,
+  };
+  $request.HTTP.components.postDataByParams(url, params).then(
+    (res) => {
+      if (res.status === 0) {
+        state.treeData.sync = val;
+      } else {
+        processError(res.msg || "操作失败！");
+      }
+    },
+    () => {
+      processError("操作失败！");
+    },
+    () => {
+      processError("操作失败！");
+    }
+  );
+};
+const handleSelectChange = (val) => {
+  let syncID = "";
+  if (val === null || val === undefined || val === "") {
+    syncID = "";
+  } else {
+    syncID = val + "";
+  }
+  let url = "department/v2/update";
+  let params = {
+    ID: state.treeData.key,
+    name: state.treeData.title,
+    sync: state.treeData.sync,
+    syncID: syncID,
+  };
+  $request.HTTP.components.postDataByParams(url, params).then(
+    (res) => {
+      if (res.status === 0) {
+        state.treeData.syncId = syncID;
+      } else {
+        processError(res.msg || "操作失败！");
+      }
+    },
+    () => {
+      processError("操作失败！");
+    },
+    () => {
+      processError("操作失败！");
+    }
+  );
+};
+const handleSelectClick = () => {
+  console.log(props.options);
+};
+</script>
diff --git a/src/views/manage/posimanage/create.vue b/src/views/manage/posimanage/create.vue
new file mode 100644
index 0000000..a452bd9
--- /dev/null
+++ b/src/views/manage/posimanage/create.vue
@@ -0,0 +1,1324 @@
+<template>
+  <div class="row" style="padding: 35px; margin-bottom: 80px">
+    <div
+      class="col-12 row"
+      style="
+        background: #ffffff;
+        border-radius: 3px;
+        padding: 17px 20px;
+        box-shadow: 0 3px 6px 1px rgba(188, 188, 188, 0.18);
+      "
+    >
+      <div
+        class="col-12 row font-18 items-center"
+        style="color: #1f2225ff; border-bottom: 1px solid #c1b2e5"
+      >
+        <div
+          v-if="state.pageType === 'create'"
+          class="fl-py-sm"
+          style="border-bottom: 4px solid #1f2225ff"
+        >
+          新增
+        </div>
+        <div
+          v-if="state.pageType === 'edit'"
+          class="fl-py-sm"
+          style="border-bottom: 4px solid #1f2225ff"
+        >
+          修改
+        </div>
+        <div
+          v-if="state.pageType === 'view'"
+          class="fl-py-sm"
+          style="border-bottom: 4px solid #1f2225ff"
+        >
+          查看
+        </div>
+        <div class="fl-ml-md">
+          所属部门：<span v-for="(item, idx) in state.pathName" :key="idx">{{
+            item + (idx === state.pathName.length - 1 ? "" : ">")
+          }}</span>
+        </div>
+      </div>
+
+      <div class="col-12 row fl-pt-md">
+        <div class="search-item fl-mb-md row items-center col-3">
+          <fln-form-item
+            type="text"
+            :config="{
+              placeholder: '请输入岗位名',
+              label: '*岗位名：',
+              field: 'name',
+            }"
+            :val="state.formData.name"
+            :disable="calcPageDisable()"
+            @triggerValChange="handleValChange"
+          />
+        </div>
+
+        <div class="search-item fl-mb-md row items-center col-3">
+          <fln-form-item
+            type="text"
+            :config="{
+              placeholder: '请输入岗位描述',
+              label: '岗位描述：',
+              field: 'remark',
+            }"
+            :val="state.formData.remark"
+            :disable="calcPageDisable()"
+            @triggerValChange="handleValChange"
+          />
+        </div>
+
+        <div class="search-item fl-mb-md row items-center col-3">
+          <fln-form-item
+            type="colorpicker"
+            :val="state.formData.color"
+            :config="{
+              label: '标签颜色：',
+              field: 'color',
+            }"
+            :disable="calcPageDisable()"
+            @triggerValChange="handleValChange"
+          />
+        </div>
+
+        <div class="search-item fl-mb-md row items-center col-3">
+          <fln-form-item
+            type="checkbox"
+            :val="state.formData.isOwner"
+            :config="{
+              field: 'isOwner',
+              options: [
+                {
+                  label: '设为部门负责人',
+                  value: 'true',
+                },
+              ],
+            }"
+            :disable="calcPageDisable()"
+            @triggerValChange="handleValChange"
+          />
+        </div>
+      </div>
+    </div>
+
+    <div
+      class="col-12 row fl-mt-md"
+      style="
+        background: #ffffff;
+        border-radius: 3px;
+        padding: 17px 20px;
+        box-shadow: 0 3px 6px 1px rgba(188, 188, 188, 0.18);
+      "
+    >
+      <div class="fl-mb-md row col-12">
+        <div class="col-2 font-20">
+          *已选页面
+          <span style="color: #1f2225ff">{{ state.selectedRows.length }}</span>
+          个：
+        </div>
+        <n-spin
+          class="fl-ml-md"
+          v-if="state.dataLoading"
+          v-show="state.dataLoading"
+          description="获取中..."
+          style="color: #1f2225ff"
+        />
+        <div v-else class="col-10 row">
+          <div
+            v-for="(select, idx) in state.selectedRows"
+            :key="idx"
+            class="fl-py-xs text-center fl-mr-sm fl-mb-sm row justify-center items-center"
+            style="
+              border-radius: 3px;
+              min-width: 193px;
+              background: #f7f7f7ff;
+              border: solid 1px #e0e0e5ff;
+            "
+          >
+            {{ select.name
+            }}<close-circle-outlined
+              v-if="!calcPageDisable()"
+              class="fl-ml-md"
+              @click="handleClearPage(select)"
+            />
+          </div>
+        </div>
+      </div>
+      <div class="col-12 row">
+        <div class="col-4">
+          <div
+            class="row overflow-auto"
+            style="
+              width: calc(100% - 20px);
+              background: #f9f9fd;
+              border-radius: 3px;
+              padding: 16px 38px;
+              max-height: 80vh;
+            "
+          >
+            <div
+              v-for="(row, rowIdx) in state.leftMenuData"
+              :key="rowIdx"
+              class="col-12 row fl-my-xs items-center"
+            >
+              <n-checkbox
+                v-model:checked="row.select"
+                @update:checked="(e) => handleLeftSelectCheckChange(e, row)"
+              />
+              <a
+                :href="'#' + row.ID + row.name"
+                class="fl-anchor fl-ml-sm"
+                style="align-content: flex-start"
+                @click.prevent="handleSelfHref(row.ID + row.name)"
+                >{{ row.name }}</a
+              >
+              <div v-if="row.children" class="col-12 row justify-end">
+                <div
+                  v-for="(child, childIdx) in row.children"
+                  :key="childIdx"
+                  class="col-11 row items-center"
+                >
+                  <n-checkbox
+                    v-model:checked="child.select"
+                    @update:checked="
+                      (e) => handleLeftSelectCheckChange(e, child)
+                    "
+                  />
+                  <a
+                    :href="'#' + child.ID + child.name"
+                    @click.prevent="handleSelfHref(child.ID + child.name)"
+                    class="fl-anchor fl-ml-sm"
+                    style="align-content: flex-start"
+                    >{{ child.name }}</a
+                  >
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="overflow-auto col-8 row" style="max-height: 80vh">
+          <div
+            v-for="(row, rowIdx) in state.listData"
+            :key="rowIdx"
+            :id="row.ID + row.name"
+            class="col-12 fl-mb-md row items-center fl-pb-xs"
+            style="min-height: 40px"
+          >
+            <div
+              class="col-12 row justify-between items-center fl-px-md"
+              style="min-height: 40px; background: #46299dff"
+              :style="{ borderRadius: row.showChild ? '3px 3px 0 0' : '3px' }"
+            >
+              <div class="color-white">
+                <n-checkbox
+                  v-model:checked="row.selected"
+                  :disabled="calcPageDisable()"
+                  @update:checked="(e) => handlePageSelectChange(e)"
+                >
+                </n-checkbox>
+                {{ row.name }}
+              </div>
+
+              <n-button
+                tertiary
+                v-if="!row.showChild"
+                style="background: #ffffffff; color: #46299dff"
+                icon-placement="right"
+                round
+                secondary
+                strong
+                size="small"
+                @click="row.showChild = true"
+              >
+                <template #icon>
+                  <n-icon>
+                    <ChevronDownOutline />
+                  </n-icon>
+                </template>
+                展开
+              </n-button>
+              <n-button
+                tertiary
+                v-if="row.showChild"
+                style="background: #ffffffff; color: #46299dff"
+                icon-placement="right"
+                round
+                secondary
+                strong
+                size="small"
+                @click="row.showChild = false"
+              >
+                <template #icon>
+                  <n-icon>
+                    <ChevronUpOutline />
+                  </n-icon>
+                </template>
+                收起
+              </n-button>
+            </div>
+            <div
+              v-if="row.showChild"
+              style="border: 1px solid #1f2225ff; border-radius: 0 0 3px 3px"
+              class="col-12 row"
+            >
+              <div
+                class="col-12 row"
+                style="padding: 11px 0; background: #dfd7f2"
+              >
+                <div class="col-3 text-center">按钮权限</div>
+                <div class="col-3 text-center">列表权限</div>
+                <div class="col-3 text-center">数据范围权限</div>
+                <div class="col-3 text-center">列表字段权限</div>
+              </div>
+              <div class="col-12 row">
+                <div class="col-3 fl-py-md">
+                  <div class="" style="margin-left: 30%">
+                    <div
+                      v-if="
+                        Array.isArray(row.buttonList) &&
+                        row.buttonList.length > 1
+                      "
+                      class="row"
+                    >
+                      <n-checkbox
+                        v-model:checked="row.btnSelectedAll"
+                        :indeterminate="row.btnIndeterminate"
+                        :disabled="calcPageDisable()"
+                        @update:checked="
+                          (e) => handleBtnSelectAllChange(e, rowIdx)
+                        "
+                      >
+                        全选
+                      </n-checkbox>
+                    </div>
+                    <n-checkbox-group
+                      v-model:value="row.btnSelected"
+                      @update:value="(e) => handleBtnSelectChange(e, rowIdx)"
+                    >
+                      <div
+                        class="col-12"
+                        v-for="(btn, btnIdx) in row.buttonList"
+                        :key="btnIdx"
+                      >
+                        <n-checkbox
+                          :value="btn.ID"
+                          :disabled="calcPageDisable()"
+                        >
+                          {{ btn.name }}
+                        </n-checkbox>
+                      </div>
+                    </n-checkbox-group>
+                  </div>
+                </div>
+
+                <div class="col-9 row">
+                  <div
+                    v-for="(list, listIdx) in row.interfaceList"
+                    :key="listIdx"
+                    class="col-12 row"
+                    :style="{
+                      'border-left':
+                        row.interfaceList.length > 1 ? '1px solid #C1B2E5' : '',
+                      'border-bottom':
+                        listIdx !== row.interfaceList.length - 1
+                          ? '1px solid #C1B2E5'
+                          : '',
+                    }"
+                  >
+                    <div class="col-4 row fl-pa-md justify-center">
+                      <n-checkbox
+                        v-model:checked="list.selected"
+                        :disabled="calcPageDisable()"
+                        @update:checked="
+                          (e) => handleListSelectChange(e, rowIdx, listIdx)
+                        "
+                      >
+                        {{ list.name }}
+                      </n-checkbox>
+                    </div>
+
+                    <div class="col-4 row fl-pa-md justify-center">
+                      <n-radio-group v-model:value="list.limitSelected">
+                        <n-radio
+                          :style="radioStyle"
+                          v-for="(limit, limitIdx) in list.limit"
+                          :key="limitIdx"
+                          :disabled="calcPageDisable()"
+                          :value="limit.value"
+                        >
+                          <div class="relative">
+                            {{ limit.label }}
+                            <n-button
+                              tertiary
+                              v-if="
+                                list.limitSelected === 5 && limit.value === 5
+                              "
+                              size="small"
+                              style="
+                                position: absolute;
+                                right: -120px;
+                                width: 70px;
+                                background: #ffffff;
+                                color: #6d5c9c;
+                                border: 1px solid #8a67ef;
+                              "
+                              @click.stop="
+                                handleChangeSelfLimitData(rowIdx, listIdx, list)
+                              "
+                              >设置</n-button
+                            >
+                          </div>
+                        </n-radio>
+                      </n-radio-group>
+                    </div>
+
+                    <div class="col-4 row fl-pa-md justify-center">
+                      <n-checkbox-group
+                        v-if="Array.isArray(list.positionRuleFields)"
+                        v-model:value="list.fieldsSelected"
+                      >
+                        <div v-if="!calcPageDisable()" class="col-12">
+                          <n-button
+                            tertiary
+                            class="fl-ml-md"
+                            size="small"
+                            style="
+                              width: 70px;
+                              background: #ffffff;
+                              color: #6d5c9c;
+                              border: 1px solid #8a67ef;
+                            "
+                            @click="handleEditField(rowIdx, listIdx)"
+                            >设置</n-button
+                          >
+                          <n-button
+                            tertiary
+                            class="fl-ml-md"
+                            size="small"
+                            style="
+                              width: 70px;
+                              background: #ffffff;
+                              color: #6d5c9c;
+                              border: 1px solid #8a67ef;
+                            "
+                            @click="handleEditFieldSort(rowIdx, listIdx)"
+                            >排序</n-button
+                          >
+                        </div>
+                        <div
+                          class="col-12"
+                          v-for="(field, fieldIdx) in list.positionRuleFields"
+                          :key="fieldIdx"
+                        >
+                          <n-checkbox
+                            :value="field.ID"
+                            :disabled="calcPageDisable()"
+                          >
+                            {{ field.fieldCnName }}
+                          </n-checkbox>
+                        </div>
+                      </n-checkbox-group>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div
+    class="width-100 row fl-pt-md fl-pb-lg"
+    style="position: fixed; bottom: 0px; background: #f0f0f5"
+  >
+    <div class="col-10 row justify-center">
+      <n-button
+        tertiary
+        class="fl-mr-md"
+        style="width: 161px; background: #c7c7c9ff; color: #ffffffff"
+        @click="handleBack"
+        >返回</n-button
+      >
+
+      <n-button
+        tertiary
+        v-if="state.pageType === 'edit'"
+        style="width: 161px; height: 34px; background: #46299dff; color: #fff"
+        :loading="state.btnLoading"
+        @click="handleSave"
+        >保存</n-button
+      >
+
+      <n-button
+        tertiary
+        v-if="state.pageType === 'create'"
+        style="width: 161px; height: 34px; background: #46299dff; color: #fff"
+        :loading="state.btnLoading"
+        @click="handleCreate"
+        >保存</n-button
+      >
+    </div>
+  </div>
+  <n-modal
+    v-model:show="state.dialogField"
+    style="width: 800px"
+    :mask-closable="false"
+    preset="card"
+  >
+    <template #header>
+      <div
+        class="col-12 row justify-center relative"
+        style="border-bottom: 1px solid #dfd7f2"
+      >
+        <div style="font-size: 20px; font-weight: bold; color: #1f2225ff">
+          设置字段
+        </div>
+      </div>
+    </template>
+    <div class="row justify-center fl-pa-md">
+      <div
+        class="col-12 row justify-center overflow-auto fl-pa-md"
+        style="max-height: 40vh"
+      >
+        <div
+          class="col-11 row font-16"
+          style="background: #46299dff; border-radius: 3px 3px 0 0; color: #fff"
+        >
+          <div class="col-4 fl-pa-md row justify-center items-center">
+            字段中文名
+          </div>
+          <div class="col-4 fl-pa-md row justify-center items-center">
+            对应接口中字段名称
+          </div>
+          <div class="col-4 fl-pa-md row justify-center items-center">操作</div>
+        </div>
+        <div
+          v-if="
+            Array.isArray(state.dialogData.fieldList) &&
+            state.dialogData.fieldList.length > 0
+          "
+          class="col-11 row"
+          style="border-radius: 0 0 3px 3px"
+        >
+          <div
+            class="col-12 row"
+            v-for="(list, idx) in state.dialogData.fieldList"
+            :key="idx"
+          >
+            <div class="col-4 fl-pa-md">
+              <n-input v-model:value="list.fieldCnName" />
+            </div>
+            <div class="col-4 fl-pa-md">
+              <n-input v-model:value="list.field" />
+            </div>
+            <div class="col-4 fl-pa-md row justify-center items-center">
+              <div
+                class="fl-ma-xs cursor fl-mr-md"
+                style="color: #1f2225ff"
+                @click="handleDelDialogFieldList(idx)"
+              >
+                删除
+              </div>
+            </div>
+          </div>
+        </div>
+        <div
+          v-else
+          class="col-11 row"
+          style="border-radius: 0 0 3px 3px; box-shadow: 0 2px 0 1px #dfd7f2"
+        >
+          <div class="col-12 row justify-center items-center fl-py-lg">
+            暂无数据
+          </div>
+        </div>
+      </div>
+      <n-button
+        tertiary
+        class="fl-my-lg"
+        style="
+          width: 95px;
+          background: #ffffff;
+          color: #6d5c9c;
+          border: 1px solid #8a67ef;
+        "
+        @click="handleCreDialogFieldList"
+        ><plus-outlined style="color: #000"></plus-outlined>新增</n-button
+      >
+      <div class="col-12 row justify-center">
+        <n-button
+          tertiary
+          style="width: 161px; background: #c7c7c9ff; color: #ffffffff"
+          class="fl-mr-md"
+          @click="handleDialogBack"
+          >返回</n-button
+        >
+
+        <n-button
+          tertiary
+          style="width: 161px; height: 34px; background: #46299dff; color: #fff"
+          :loading="state.btnLoading"
+          @click="handleDialogSave"
+          >保存</n-button
+        >
+      </div>
+    </div>
+  </n-modal>
+
+  <n-modal
+    v-model:show="state.dialogFieldSort"
+    style="width: 800px"
+    :mask-closable="false"
+    preset="card"
+  >
+    <template #header>
+      <div
+        class="col-12 row justify-center relative"
+        style="border-bottom: 1px solid #dfd7f2"
+      >
+        <div style="font-size: 20px; font-weight: bold; color: #1f2225ff">
+          拖拽调整字段顺序
+        </div>
+      </div>
+    </template>
+    <div class="row justify-center fl-pa-md">
+      <div
+        class="col-12 row justify-center overflow-auto fl-pa-md"
+        style="max-height: 40vh"
+      >
+        <draggable
+          :list="state.dialogData.fieldList"
+          :disabled="!state.enabled"
+          item-key="fieldCnName"
+          class="list-group col-12"
+          ghost-class="ghost"
+          :move="checkMove"
+          @start="state.dragging = true"
+          @end="state.dragging = false"
+        >
+          <template #item="{ element }">
+            <div
+              class="list-group-item row"
+              :class="{ 'not-draggable': !state.enabled }"
+            >
+              <div class="col-4 row items-center">
+                <drag-outlined class="fl-mr-sm" />{{ element.fieldCnName }}
+              </div>
+              <div class="col-8">{{ element.field }}</div>
+            </div>
+          </template>
+        </draggable>
+      </div>
+      <div class="col-12 row justify-center">
+        <n-button
+          tertiary
+          style="width: 161px; background: #c7c7c9ff; color: #ffffffff"
+          class="fl-mr-md"
+          @click="handleDialogSortBack"
+          >返回</n-button
+        >
+        <n-button
+          tertiary
+          style="width: 161px; height: 34px; background: #46299dff; color: #fff"
+          :loading="state.btnLoading"
+          @click="handleDialogSortSave"
+          >保存</n-button
+        >
+      </div>
+    </div>
+  </n-modal>
+  <fl-limit-data
+    v-if="state.dialogSelfLimtiData"
+    :fatherData="state.dataDepartmentIds"
+    @triggerLimitData="handleLimitData"
+  />
+</template>
+
+<script setup>
+// 岗位 直接新建
+import {
+  UpOutlined,
+  DownOutlined,
+  CloseCircleOutlined,
+  PlusOutlined,
+  DragOutlined,
+} from "@ant-design/icons-vue";
+import flnFormItem from "@/components/flnlayout/form/flnformItem.vue";
+import draggable from "vuedraggable";
+import {
+  ref,
+  reactive,
+  onBeforeMount,
+  onActivated,
+  onMounted,
+  getCurrentInstance,
+  computed,
+  nextTick,
+} from "vue";
+import { processError, processSuccess } from "@/utils/helper/message";
+import { useRouter, useRoute } from "vue-router";
+const router = useRouter();
+const route = useRoute();
+const currentInstance = getCurrentInstance();
+const { $request } = currentInstance.appContext.config.globalProperties;
+import { ChevronDownOutline, ChevronUpOutline } from "@vicons/ionicons5";
+import { Local } from "@/utils/storage.js";
+import flLimitData from "./limitData.vue";
+const radioStyle = reactive({
+  display: "flex",
+  height: "30px",
+  lineHeight: "30px",
+});
+const state = reactive({
+  selectedRows: [],
+  dialogField: false,
+  dialogData: {
+    fieldList: [],
+  },
+  listData: [],
+  formData: {
+    name: "",
+    remark: "",
+    color: "#1F2225",
+    isOwner: [],
+  },
+  btnLoading: false,
+  pageType: "create",
+  showChildkeys: [],
+  enabled: true,
+  dragging: false,
+  dialogFieldSort: false,
+  dataLoading: false,
+  pathName: [],
+  leftMenuData: [],
+  dialogSelfLimtiData: false,
+  dialogLimitData: {},
+  dataDepartmentIds: [],
+});
+onBeforeMount(() => {
+  getRulesData("getPageData");
+  if (route.query.type) {
+    state.pageType = route.query.type;
+  }
+  let treeSelectData = Local.get("posimanage_treeSelectData");
+  if (treeSelectData) {
+    state.pathName = treeSelectData.pathName;
+  }
+});
+onActivated(() => {
+  getRulesData("getPageData");
+  if (route.query.type) {
+    state.pageType = route.query.type;
+  }
+  let treeSelectData = Local.get("posimanage_treeSelectData");
+  if (treeSelectData) {
+    state.pathName = treeSelectData.pathName;
+  }
+});
+onMounted(() => {});
+const checkMove = (e) => {
+  window.console.log("Future index: " + e.draggedContext.futureIndex);
+};
+const getRulesData = (type) => {
+  let url = "/rule/v2/menu/list";
+  $request.HTTP.components.postDataByParams(url, {}).then(
+    (res) => {
+      if (res.status === 0) {
+        let data = res.data.data;
+        data.map((item) => {
+          item.selected = false;
+          item.showChild = false;
+          if (state.showChildkeys.includes(item.ID)) {
+            item.showChild = true;
+          }
+          item.btnSelected = [];
+          item.btnSelectedAll = false;
+          item.btnIndeterminate = false;
+          if (Array.isArray(item.interfaceList)) {
+            item.interfaceList.map((listItem) => {
+              listItem.selected = false;
+              listItem.limit = [
+                {
+                  label: "仅自己",
+                  value: 1,
+                },
+                {
+                  label: "自己及下属",
+                  value: 2,
+                },
+                {
+                  label: "本部门",
+                  value: 3,
+                },
+                {
+                  label: "所有",
+                  value: 4,
+                },
+                {
+                  label: "自定义",
+                  value: 5,
+                },
+              ];
+              listItem.limitSelected = 4;
+              listItem.positionRuleFields = listItem.positionRuleFields || [];
+              listItem.fieldsSelected = listItem.positionRuleFields.map(
+                (item) => item.ID
+              );
+            });
+          }
+        });
+        state.listData = data;
+        if (route.query.ID && type === "getPageData") {
+          getPageData();
+        }
+        calcleftMenuDefaultData(data);
+      } else {
+        processError(res.msg || "获取数据失败！");
+      }
+    },
+    () => {
+      processError("获取数据失败！");
+    },
+    () => {
+      processError("获取数据失败！");
+    }
+  );
+};
+const calcleftMenuDefaultData = (data) => {
+  let leftMenuData = [];
+  data.map((item) => {
+    if (item.pid === 0) {
+      let obj = {
+        name: item.name,
+        ID: item.ID,
+        select: item.selected || false,
+        weigh: item.weigh,
+      };
+      leftMenuData.push(obj);
+    }
+  });
+  data.map((item) => {
+    leftMenuData.map((menu) => {
+      if (item.pid === menu.ID) {
+        menu.children = menu.children || [];
+        let obj = {
+          name: item.name,
+          ID: item.ID,
+          select: item.selected || false,
+          weigh: item.weigh,
+        };
+        menu.children.push(obj);
+      }
+    });
+  });
+  leftMenuData.sort((a, b) => b.weigh - a.weigh);
+  leftMenuData.map((item) => {
+    if (item.children) {
+      item.children.sort((a, b) => b.weigh - a.weigh);
+    }
+  });
+  state.leftMenuData = leftMenuData;
+};
+const getPageData = () => {
+  if (route.query.ID) {
+    state.dataLoading = true;
+    let url = "/position/v2/detail";
+    let params = {
+      ID: Number(route.query.ID),
+    };
+    $request.HTTP.components.postDataByParams(url, params).then(
+      (res) => {
+        if (res.status === 0) {
+          let resData = res.data;
+          state.formData.name = res.data.name;
+          state.formData.remark = res.data.remark;
+          state.formData.color = res.data.color || "";
+          state.formData.isOwner = res.data.isLeader ? ["true"] : [];
+          resData.positionTreeRule = resData.positionTreeRule || [];
+          setRulesDataDefaultVal(resData.positionTreeRule, state.listData);
+          state.selectedRows = state.listData.filter((item) => item.selected);
+          calcleftMenuSelectData();
+        } else {
+          processError(res.msg || "获取数据失败！");
+        }
+        state.btnLoading = false;
+        state.dataLoading = false;
+      },
+      () => {
+        processError("获取数据失败！");
+        state.btnLoading = false;
+        state.dataLoading = false;
+      },
+      () => {
+        processError("获取数据失败！");
+        state.btnLoading = false;
+        state.dataLoading = false;
+      }
+    );
+  }
+};
+const handleValChange = ({ val, config }) => {
+  console.log(val);
+  state.formData[config.field] = val;
+};
+const handleCreate = () => {
+  if (state.formData.name === "") {
+    processError("请填写岗位");
+    return;
+  }
+  state.btnLoading = true;
+  let url = "/position/v2/create";
+  let params = {
+    name: state.formData.name,
+    remark: state.formData.remark,
+    color: state.formData.color,
+    positionTreeRule: [],
+    departmentID: Number(route.query.departmentID),
+    isLeader: state.formData.isOwner.length > 0,
+  };
+  Object.assign(params, state.formData);
+  delete params.isOwner;
+  let data = state.listData;
+  data
+    .filter((item) => item.selected)
+    .map((item) => {
+      let obj = {
+        ID: item.ID,
+        buttonList: Array.isArray(item.buttonList)
+          ? item.buttonList.filter((btnItem) =>
+              item.btnSelected.includes(btnItem.ID)
+            )
+          : [],
+        interfaceList: Array.isArray(item.interfaceList)
+          ? item.interfaceList
+              .filter((listItem) => listItem.selected)
+              .map((listItem) => {
+                return {
+                  ID: listItem.ID,
+                  dataDepartmentIds: listItem.dataDepartmentIds,
+                  dataRange: listItem.limitSelected,
+                  positionRuleFields: Array.isArray(listItem.positionRuleFields)
+                    ? listItem.positionRuleFields.filter((fieldItem) =>
+                        listItem.fieldsSelected.includes(fieldItem.ID)
+                      )
+                    : [],
+                };
+              })
+          : [],
+      };
+      params.positionTreeRule.push(obj);
+    });
+  $request.HTTP.components.postDataByParams(url, params).then(
+    (res) => {
+      state.btnLoading = false;
+      if (res.status === 0) {
+        processSuccess("操作成功！");
+        router.go(-1);
+      } else {
+        processError(res.msg || "操作失败！");
+      }
+    },
+    () => {
+      processError("操作失败！");
+      state.btnLoading = false;
+    },
+    () => {
+      processError("操作失败！");
+      state.btnLoading = false;
+    }
+  );
+};
+const handleSave = () => {
+  if (state.formData.name === "") {
+    processError("请填写岗位");
+    return;
+  }
+  state.btnLoading = true;
+  let url = "/position/v2/update";
+  let params = {
+    ID: Number(route.query.ID),
+    name: state.formData.name,
+    remark: state.formData.remark,
+    color: state.formData.color,
+    positionTreeRule: [],
+    departmentID: Number(route.query.departmentID),
+    isLeader: state.formData.isOwner.length > 0,
+  };
+  Object.assign(params, state.formData);
+  delete params.isOwner;
+  let data = state.listData;
+  data
+    .filter((item) => item.selected)
+    .map((item) => {
+      let obj = {
+        ID: item.ID,
+        buttonList: Array.isArray(item.buttonList)
+          ? item.buttonList.filter((btnItem) =>
+              item.btnSelected.includes(btnItem.ID)
+            )
+          : [],
+        interfaceList: Array.isArray(item.interfaceList)
+          ? item.interfaceList
+              .filter((listItem) => listItem.selected)
+              .map((listItem) => {
+                return {
+                  ID: listItem.ID,
+                  dataDepartmentIds: listItem.dataDepartmentIds,
+                  dataRange: listItem.limitSelected,
+                  positionRuleFields: Array.isArray(listItem.positionRuleFields)
+                    ? listItem.positionRuleFields.filter((fieldItem) =>
+                        listItem.fieldsSelected.includes(fieldItem.ID)
+                      )
+                    : [],
+                };
+              })
+          : [],
+      };
+      params.positionTreeRule.push(obj);
+    });
+  $request.HTTP.components.postDataByParams(url, params).then(
+    (res) => {
+      if (res.status === 0) {
+        processSuccess("操作成功！");
+        getRulesData("getPageData");
+      } else {
+        processError(res.msg || "操作失败！");
+      }
+    },
+    () => {
+      processError("操作失败！");
+      state.btnLoading = false;
+    },
+    () => {
+      processError("操作失败！");
+      state.btnLoading = false;
+    }
+  );
+};
+const handleBack = () => {
+  router.go(-1);
+};
+const handleEditField = (rowIdx, listIdx) => {
+  state.dialogData.clickData = state.listData[rowIdx];
+  state.dialogData.ID = state.listData[rowIdx].interfaceList[listIdx].ID;
+  state.dialogData.rowIdx = rowIdx;
+  state.dialogData.listIdx = listIdx;
+  state.dialogData.fieldList = JSON.parse(
+    JSON.stringify(
+      state.listData[rowIdx].interfaceList[listIdx].positionRuleFields.map(
+        (item) => {
+          return {
+            ID: item.ID,
+            field: item.fieldKey,
+            fieldCnName: item.fieldCnName,
+          };
+        }
+      )
+    )
+  );
+  state.dialogField = true;
+};
+const handleBtnSelectAllChange = (checked, idx) => {
+  if (checked) {
+    state.listData[idx].btnSelected = state.listData[idx].buttonList.map(
+      (item) => item.ID
+    );
+    state.listData[idx].btnIndeterminate = false;
+  } else {
+    state.listData[idx].btnSelected = [];
+    state.listData[idx].btnIndeterminate = false;
+  }
+};
+const handleBtnSelectChange = (e, idx) => {
+  if (e.length === 0) {
+    state.listData[idx].btnSelectedAll = false;
+    state.listData[idx].btnIndeterminate = false;
+  } else if (e.length === state.listData[idx].buttonList.length) {
+    state.listData[idx].btnSelectedAll = true;
+    state.listData[idx].btnIndeterminate = false;
+  } else {
+    state.listData[idx].btnSelectedAll = false;
+    state.listData[idx].btnIndeterminate = true;
+  }
+};
+const handleListSelectChange = (e, rowIdx, listIdx) => {
+  state.listData[rowIdx].listSelected = state.listData[
+    rowIdx
+  ].interfaceList.filter((item) => item.selected);
+};
+const handlePageSelectChange = (e) => {
+  state.selectedRows = state.listData.filter((item) => item.selected);
+  calcleftMenuSelectData();
+};
+const handleClearPage = (select) => {
+  state.listData.forEach((item) => {
+    if (item.name === select.name) {
+      item.selected = false;
+    }
+  });
+  state.selectedRows = state.listData.filter((item) => item.selected);
+  calcleftMenuSelectData();
+};
+const calcleftMenuSelectData = () => {
+  let leftMenuData = JSON.parse(JSON.stringify(state.leftMenuData));
+  leftMenuData.map((item) => {
+    item.select = false;
+    if (
+      state.selectedRows.filter((selectRow) => selectRow.ID === item.ID)
+        .length > 0
+    ) {
+      item.select = true;
+    }
+    if (item.children) {
+      item.children.map((child) => {
+        child.select = false;
+        if (
+          state.selectedRows.filter((selectRow) => child.ID === selectRow.ID)
+            .length > 0
+        ) {
+          child.select = true;
+        }
+      });
+    }
+  });
+  state.leftMenuData = leftMenuData;
+};
+const handleDelDialogFieldList = (delIdx) => {
+  state.dialogData.fieldList.splice(delIdx, 1);
+};
+const handleCreDialogFieldList = () => {
+  state.dialogData.fieldList.push({
+    field: "",
+    fieldCnName: "",
+  });
+};
+const handleDialogSave = () => {
+  state.showChildkeys = [];
+  let url = "/rule/v2/update";
+  let params = {
+    ID: state.dialogData.ID,
+    ruleFields: state.dialogData.fieldList
+      .filter((item) => item.fieldCnName)
+      .map((item) => {
+        return {
+          ID: item.ID || undefined,
+          fieldCnName: item.fieldCnName,
+          fieldKey: item.field,
+        };
+      }),
+  };
+  $request.HTTP.components.postDataByParams(url, params).then(
+    (res) => {
+      if (res.status === 0) {
+        processSuccess("操作成功！");
+        state.dialogField = false;
+        state.showChildkeys.push(state.dialogData.clickData.ID);
+        getRulesData("getPageData");
+      } else {
+        processError(res.msg || "操作失败！");
+      }
+    },
+    () => {
+      processError("操作失败！");
+    },
+    () => {
+      processError("操作失败！");
+    }
+  );
+};
+const handleDialogBack = () => {
+  state.dialogField = false;
+};
+const handleLink = (path) => {
+  router.push(path);
+};
+const calcPageDisable = () => {
+  return state.pageType === "view";
+};
+const setRulesDataDefaultVal = (pageData, listData) => {
+  pageData.map((pageDataItem) => {
+    listData.map((listItem) => {
+      if (pageDataItem.ID === listItem.ID) {
+        listItem.selected = true;
+        listItem.showChild = false;
+        if (state.showChildkeys.includes(listItem.ID)) {
+          listItem.showChild = true;
+        }
+        listItem.btnSelected = Array.isArray(pageDataItem.buttonList)
+          ? pageDataItem.buttonList.map((btnItem) => btnItem.ID)
+          : [];
+        if (
+          Array.isArray(listItem.interfaceList) &&
+          Array.isArray(pageDataItem.interfaceList)
+        ) {
+          listItem.interfaceList.map((interfaceItem) => {
+            pageDataItem.interfaceList.map((pageDataInterfaceItem) => {
+              if (interfaceItem.ID === pageDataInterfaceItem.ID) {
+                interfaceItem.dataDepartmentIds =
+                  pageDataInterfaceItem.dataDepartmentIds || [];
+                interfaceItem.selected = true;
+                interfaceItem.limitSelected = pageDataInterfaceItem.dataRange;
+                pageDataInterfaceItem.positionRuleFields =
+                  pageDataInterfaceItem.positionRuleFields || [];
+                interfaceItem.fieldsSelected =
+                  pageDataInterfaceItem.positionRuleFields.map(
+                    (fieldItem) => fieldItem.ID
+                  );
+                interfaceItem.positionRuleFields.map((fieldItem) => {
+                  pageDataInterfaceItem.positionRuleFields.map(
+                    (pageDataFieldItem) => {
+                      if (fieldItem.ID === pageDataFieldItem.ID) {
+                        fieldItem.index = pageDataFieldItem.index || 0;
+                      }
+                    }
+                  );
+                });
+              }
+            });
+          });
+        }
+      }
+    });
+  });
+};
+
+const handleEditFieldSort = (rowIdx, listIdx) => {
+  state.dialogData.clickData = state.listData[rowIdx];
+  state.dialogData.ID = state.listData[rowIdx].interfaceList[listIdx].ID;
+  state.dialogData.rowIdx = rowIdx;
+  state.dialogData.listIdx = listIdx;
+  let fieldsSelected =
+    state.listData[rowIdx].interfaceList[listIdx].fieldsSelected;
+  let fieldList = [];
+  state.listData[rowIdx].interfaceList[listIdx].positionRuleFields.map(
+    (item) => {
+      if (fieldsSelected.includes(item.ID)) {
+        fieldList.push({
+          ID: item.ID,
+          field: item.fieldKey,
+          fieldCnName: item.fieldCnName,
+          index: item.index || 0,
+        });
+      }
+    }
+  );
+  fieldList.sort((a, b) => {
+    return a.index - b.index;
+  });
+  state.dialogData.fieldList = fieldList;
+  state.dialogFieldSort = true;
+};
+const handleDialogSortSave = () => {
+  let rowIdx = state.dialogData.rowIdx;
+  let listIdx = state.dialogData.listIdx;
+
+  state.dialogData.fieldList.forEach((item, idx) => {
+    item.index = idx + 1;
+  });
+
+  state.listData[rowIdx].interfaceList[listIdx].positionRuleFields.map(
+    (item) => {
+      state.dialogData.fieldList.map((fieldItem) => {
+        if (item.ID === fieldItem.ID) {
+          item.index = fieldItem.index;
+        }
+      });
+    }
+  );
+  state.dialogFieldSort = false;
+};
+const handleDialogSortBack = () => {
+  state.dialogFieldSort = false;
+};
+const handleLeftSelectCheckChange = (e, row) => {
+  row.select = e;
+  state.listData.map((item) => {
+    if (item.ID === row.ID) {
+      item.selected = e;
+    }
+  });
+  state.selectedRows = state.listData.filter((item) => item.selected);
+};
+const handleChangeSelfLimitData = (rowIdx, listIdx, list) => {
+  state.dialogLimitData = {
+    rowIdx,
+    listIdx,
+  };
+  state.dataDepartmentIds = list.dataDepartmentIds;
+  state.dialogSelfLimtiData = true;
+};
+const handleLimitData = (data) => {
+  let rowIdx = state.dialogLimitData.rowIdx;
+  let listIdx = state.dialogLimitData.listIdx;
+  state.listData[rowIdx].interfaceList[listIdx].dataDepartmentIds = data;
+  state.dialogSelfLimtiData = false;
+};
+const handleSelfHref = (path) => {
+  let anchorElement = document.getElementById(path);
+  if (anchorElement) {
+    anchorElement.scrollIntoView();
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.search-item {
+  :deep(.ant-input-affix-wrapper) {
+    background: #fff;
+    color: #c3c3c3;
+  }
+  :deep(.ant-input) {
+    color: #000;
+    &::placeholder {
+      color: #c3c3c3;
+    }
+  }
+  :deep(.ant-picker-input > input) {
+    color: #000;
+    &::placeholder {
+      color: #c3c3c3;
+    }
+  }
+  :deep(.ant-picker) {
+    width: 100%;
+    border-radius: 20px;
+    background: #fff !important;
+    color: #c3c3c3;
+    border: none;
+  }
+  :deep(.ant-picker-input > input) {
+    color: #000;
+    &::placeholder {
+      color: #c3c3c3;
+    }
+  }
+}
+
+.fl-anchor {
+  cursor: pointer;
+  /* 去除下划线 */
+  text-decoration: none;
+
+  /* 去除颜色变化 */
+  color: #333639;
+
+  /* 去除点击时的焦点轮廓 */
+  outline: none;
+
+  /* 其他样式 */
+  font-style: normal; /* 去除斜体 */
+}
+
+/* 针对悬停状态的样式 */
+.fl-anchor:hover {
+  text-decoration: none;
+}
+
+/* 针对活动状态的样式 */
+.fl-anchor:active {
+  text-decoration: none;
+}
+</style>
diff --git a/src/views/manage/posimanage/dialogCreate.vue b/src/views/manage/posimanage/dialogCreate.vue
new file mode 100644
index 0000000..edcdeb8
--- /dev/null
+++ b/src/views/manage/posimanage/dialogCreate.vue
@@ -0,0 +1,942 @@
+<template>
+  <n-modal v-model:show="state.dialogModal" :mask-closable="false">
+    <n-card
+      style="width: 1050px"
+      :bordered="false"
+      role="dialog"
+      aria-modal="true"
+    >
+      <template #header>
+        <div class="col-12 row justify-center relative">
+          <div style="font-size: 20px; font-weight: bold; color: #1f2225ff">
+            新增岗位
+          </div>
+        </div>
+      </template>
+      <template #header-extra>
+        <n-button @click="handleDialogBack" text style="font-size: 24px">
+          <n-icon>
+            <close-icon />
+          </n-icon>
+        </n-button>
+      </template>
+
+      <div class="row justify-center fl-pb-md" style="color: #333639">
+        <div class="col-12 row">
+          <div class="search-item fl-mb-sm row items-center">
+            <div>*岗位名</div>
+            <fln-form-item
+              style="width: 180px; margin-left: 45px"
+              type="text"
+              :config="{
+                placeholder: '请输入岗位名',
+                field: 'name',
+              }"
+              :val="state.formData.name"
+              @triggerValChange="handleValChange"
+            />
+          </div>
+
+          <div class="search-item fl-mb-sm row items-center">
+            <div style="margin-left: 16px">岗位描述</div>
+            <fln-form-item
+              style="width: 180px; margin-left: 38px"
+              type="text"
+              :config="{
+                placeholder: '请输入岗位描述',
+                field: 'remark',
+              }"
+              :val="state.formData.remark"
+              @triggerValChange="handleValChange"
+            />
+          </div>
+
+          <div class="search-item fl-mb-sm row items-center">
+            <div style="margin-left: 16px">标签颜色</div>
+            <fln-form-item
+              style="width: 122px; margin-left: 38px"
+              type="colorpicker"
+              :val="state.formData.color"
+              :config="{
+                field: 'color',
+              }"
+              @triggerValChange="handleValChange"
+            />
+          </div>
+
+          <div class="search-item fl-mb-sm row items-center">
+            <fln-form-item
+              style="margin-left: 38px"
+              type="checkbox"
+              :val="state.formData.isOwner"
+              :config="{
+                field: 'isOwner',
+                options: [
+                  {
+                    label: '设为部门负责人',
+                    value: 'true',
+                  },
+                ],
+              }"
+              @triggerValChange="handleValChange"
+            />
+          </div>
+        </div>
+        <div class="row col-12 fl-mt-sm">
+          <div class="col-12 row justify-between fl-mt-md fl-mb-sm">
+            <div>请选择以下模板进行新增岗位：</div>
+            <div>
+              可将该岗位模板加入到审批中，<span
+                class="cursor"
+                style="color: #6c00ff"
+                @click="state.dialogApproval = true"
+                >去试试</span
+              >
+            </div>
+            <fl-about-approval
+              :show="state.dialogApproval"
+              @triggerCalcApproval="handleApproval"
+            />
+          </div>
+          <div>
+            <div class="col-12 row">
+              <div
+                v-for="(temp, tempidx) in state.tempList"
+                :key="tempidx"
+                class="fl-py-xs text-center cursor fl-mr-sm fl-mb-sm row justify-center items-center"
+                :style="[
+                  state.selectTemplate === temp.name
+                    ? { border: '1px solid #46299d' }
+                    : {},
+                ]"
+                style="
+                  border-radius: 3px;
+                  min-width: 176px;
+                  background: #f7efff;
+                  color: #8352b4;
+                "
+                @click="handleTempClick(temp)"
+              >
+                {{ temp.name }}
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div class="fl-my-lg row col-12">
+          <div class="col-2 font-14 fl-mb-md">已选模版：</div>
+          <div class="col-10 row items-center fl-mb-md">
+            <div
+              class="fl-py-xs text-center row justify-center items-center"
+              style="
+                border-radius: 3px;
+                min-width: 193px;
+                background: #f7f7f7ff;
+                border: solid 1px #e0e0e5ff;
+              "
+            >
+              {{ state.selectTemplate }}
+            </div>
+          </div>
+          <div class="col-2 font-14">
+            *所选页面
+            <span style="color: #1f2225ff">{{
+              state.selectedRows.length
+            }}</span>
+            个：
+          </div>
+          <n-spin
+            class="fl-ml-md"
+            v-if="state.dataLoading"
+            v-show="state.dataLoading"
+            description="获取中..."
+            style="color: #1f2225ff"
+          />
+          <div v-else class="col-10 row">
+            <div
+              v-for="(select, idx) in state.selectedRows"
+              :key="idx"
+              class="fl-py-xs text-center fl-mr-sm fl-mb-sm row justify-center items-center"
+              style="
+                border-radius: 3px;
+                min-width: 193px;
+                background: #f7f7f7ff;
+                border: solid 1px #e0e0e5ff;
+              "
+            >
+              <n-tooltip trigger="hover">
+                <template #trigger>
+                  {{ select.name }}
+                </template>
+                {{ select.name }}
+              </n-tooltip>
+              <close-circle-outlined
+                class="fl-ml-md"
+                @click="handleClearPage(select)"
+              />
+            </div>
+            <div class="row items-center fl-mr-sm fl-mb-sm">
+              <div
+                style="
+                  border-radius: 50%;
+                  background: #e0e0e5;
+                  width: 27px;
+                  height: 27px;
+                "
+                class="row items-center justify-center fl-mr-sm cursor"
+                @click="handleEditSelectTemp"
+              >
+                <n-icon>
+                  <ChevronUpOutline v-if="state.showTempRuleListData" />
+                  <ChevronDownOutline v-else />
+                </n-icon>
+              </div>
+
+              <span style="color: rgba(0, 0, 0, 0.3)">点击展开可进行编辑</span>
+            </div>
+          </div>
+        </div>
+        <div
+          v-if="state.showTempRuleListData"
+          style="max-height: 40vh"
+          class="overflow-auto col-12 row"
+        >
+          <div
+            v-for="(row, rowIdx) in state.listData"
+            :key="rowIdx"
+            class="col-12 fl-mb-md row items-center fl-pb-xs"
+            style="min-height: 40px"
+          >
+            <div
+              class="col-12 row justify-between items-center fl-px-md"
+              style="min-height: 40px; background: #46299dff"
+              :style="{ borderRadius: row.showChild ? '3px 3px 0 0' : '3px' }"
+            >
+              <div class="color-white">
+                <n-checkbox
+                  v-model:checked="row.selected"
+                  @update:checked="(e) => handlePageSelectChange(e)"
+                >
+                </n-checkbox>
+                {{ row.name }}
+              </div>
+
+              <n-button
+                tertiary
+                v-if="!row.showChild"
+                style="background: #ffffffff; color: #46299dff"
+                icon-placement="right"
+                round
+                secondary
+                strong
+                size="small"
+                @click="row.showChild = true"
+              >
+                <template #icon>
+                  <n-icon>
+                    <ChevronDownOutline />
+                  </n-icon>
+                </template>
+                展开
+              </n-button>
+              <n-button
+                tertiary
+                v-if="row.showChild"
+                style="background: #ffffffff; color: #46299dff"
+                icon-placement="right"
+                round
+                secondary
+                strong
+                size="small"
+                @click="row.showChild = false"
+              >
+                <template #icon>
+                  <n-icon>
+                    <ChevronUpOutline />
+                  </n-icon>
+                </template>
+                收起
+              </n-button>
+            </div>
+            <div
+              v-if="row.showChild"
+              style="border: 1px solid #1f2225ff; border-radius: 0 0 3px 3px"
+              class="col-12 row"
+            >
+              <div
+                class="col-12 row"
+                style="padding: 11px 0; background: #dfd7f2"
+              >
+                <div class="col-3 text-center">按钮权限</div>
+                <div class="col-3 text-center">列表权限</div>
+                <div class="col-3 text-center">数据范围权限</div>
+                <div class="col-3 text-center">列表字段权限</div>
+              </div>
+              <div class="col-12 row">
+                <div class="col-3 fl-py-md">
+                  <div class="" style="margin-left: 30%">
+                    <div
+                      v-if="
+                        Array.isArray(row.buttonList) &&
+                        row.buttonList.length > 1
+                      "
+                      class="row"
+                    >
+                      <n-checkbox
+                        v-model:checked="row.btnSelectedAll"
+                        :indeterminate="row.btnIndeterminate"
+                        @update:checked="
+                          (e) => handleBtnSelectAllChange(e, rowIdx)
+                        "
+                      >
+                        全选
+                      </n-checkbox>
+                    </div>
+                    <n-checkbox-group
+                      v-model:value="row.btnSelected"
+                      @update:value="(e) => handleBtnSelectChange(e, rowIdx)"
+                    >
+                      <div
+                        class="col-12"
+                        v-for="(btn, btnIdx) in row.buttonList"
+                        :key="btnIdx"
+                      >
+                        <n-checkbox :value="btn.ID">
+                          {{ btn.name }}
+                        </n-checkbox>
+                      </div>
+                    </n-checkbox-group>
+                  </div>
+                </div>
+
+                <div class="col-9 row">
+                  <div
+                    v-for="(list, listIdx) in row.interfaceList"
+                    :key="listIdx"
+                    class="col-12 row"
+                    :style="{
+                      'border-left':
+                        row.interfaceList.length > 1 ? '1px solid #C1B2E5' : '',
+                      'border-bottom':
+                        listIdx !== row.interfaceList.length - 1
+                          ? '1px solid #C1B2E5'
+                          : '',
+                    }"
+                  >
+                    <div class="col-4 row fl-pa-md justify-center">
+                      <n-checkbox
+                        v-model:checked="list.selected"
+                        @update:checked="
+                          (e) => handleListSelectChange(e, rowIdx, listIdx)
+                        "
+                      >
+                        {{ list.name }}
+                      </n-checkbox>
+                    </div>
+
+                    <div class="col-4 row fl-pa-md justify-center">
+                      <n-radio-group v-model:value="list.limitSelected">
+                        <n-radio
+                          :style="radioStyle"
+                          v-for="(limit, limitIdx) in list.limit"
+                          :key="limitIdx"
+                          :value="limit.value"
+                        >
+                          <div class="relative">
+                            {{ limit.label }}
+                            <n-button
+                              tertiary
+                              v-if="
+                                list.limitSelected === 5 && limit.value === 5
+                              "
+                              size="small"
+                              style="
+                                position: absolute;
+                                right: -120px;
+                                width: 70px;
+                                background: #ffffff;
+                                color: #6d5c9c;
+                                border: 1px solid #8a67ef;
+                              "
+                              @click.stop="
+                                handleChangeSelfLimitData(rowIdx, listIdx, list)
+                              "
+                              >设置</n-button
+                            >
+                          </div>
+                        </n-radio>
+                      </n-radio-group>
+                    </div>
+
+                    <div class="col-4 row fl-pa-md justify-center">
+                      <n-checkbox-group
+                        v-if="Array.isArray(list.positionRuleFields)"
+                        v-model:value="list.fieldsSelected"
+                      >
+                        <div class="col-12">
+                          <n-button
+                            tertiary
+                            class="fl-ml-md"
+                            size="small"
+                            style="
+                              width: 70px;
+                              background: #ffffff;
+                              color: #6d5c9c;
+                              border: 1px solid #8a67ef;
+                            "
+                            @click="handleEditField(rowIdx, listIdx)"
+                            >设置</n-button
+                          >
+                          <n-button
+                            tertiary
+                            class="fl-ml-md"
+                            size="small"
+                            style="
+                              width: 70px;
+                              background: #ffffff;
+                              color: #6d5c9c;
+                              border: 1px solid #8a67ef;
+                            "
+                            @click="handleEditFieldSort(rowIdx, listIdx)"
+                            >排序</n-button
+                          >
+                        </div>
+                        <div
+                          class="col-12"
+                          v-for="(field, fieldIdx) in list.positionRuleFields"
+                          :key="fieldIdx"
+                        >
+                          <n-checkbox :value="field.ID">
+                            {{ field.fieldCnName }}
+                          </n-checkbox>
+                        </div>
+                      </n-checkbox-group>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div class="col-12 row justify-center fl-mt-md">
+          <n-button
+            tertiary
+            style="width: 161px; background: #c7c7c9ff; color: #fff"
+            class="fl-mr-md"
+            @click="handleDialogBack"
+            >返回</n-button
+          >
+
+          <n-button
+            tertiary
+            style="width: 161px; background: #46299dff; color: #fff"
+            :loading="state.btnLoading"
+            @click="handleDialogSubmit"
+            >保存</n-button
+          >
+        </div>
+      </div>
+    </n-card>
+  </n-modal>
+
+  <fl-limit-data
+    v-if="state.dialogSelfLimtiData"
+    :fatherData="state.dataDepartmentIds"
+    @triggerLimitData="handleLimitData"
+  />
+</template>
+<script setup>
+// 岗位新建方式选择 弹窗
+import {
+  UpOutlined,
+  DownOutlined,
+  CloseCircleOutlined,
+  PlusOutlined,
+  DragOutlined,
+} from "@ant-design/icons-vue";
+import { Close as CloseIcon } from "@vicons/ionicons5";
+import flnFormItem from "@/components/flnlayout/form/flnformItem.vue";
+import flAboutApproval from "./aboutApproval.vue";
+import draggable from "vuedraggable";
+import flLimitData from "./limitData.vue";
+import {
+  ref,
+  reactive,
+  onBeforeMount,
+  onMounted,
+  getCurrentInstance,
+  computed,
+  nextTick,
+} from "vue";
+import { processError, processSuccess } from "@/utils/helper/message";
+import { useRouter, useRoute } from "vue-router";
+const router = useRouter();
+const route = useRoute();
+const currentInstance = getCurrentInstance();
+const { $request } = currentInstance.appContext.config.globalProperties;
+import { ChevronDownOutline, ChevronUpOutline } from "@vicons/ionicons5";
+import { Local } from "@/utils/storage.js";
+
+const emits = defineEmits(["triggerClose"]);
+const radioStyle = reactive({
+  display: "flex",
+  height: "30px",
+  lineHeight: "30px",
+});
+let props = defineProps({
+  fatherData: {
+    type: Object,
+  },
+});
+const state = reactive({
+  selectedRows: [],
+  dialogField: false,
+  dialogData: {
+    fieldList: [],
+  },
+  listData: [],
+  formData: {
+    name: "",
+    remark: "",
+    color: "#1F2225",
+    isOwner: [],
+  },
+  btnLoading: false,
+  pageType: "create",
+  enabled: true,
+  dialogFieldSort: false,
+  dataLoading: false,
+  dialogModal: true,
+  tempList: [],
+  selectTemplate: "",
+  showTempRuleListData: false,
+  dialogApproval: false,
+  dialogSelfLimtiData: false,
+  dialogLimitData: {},
+  dataDepartmentIds: [],
+  approvalData: [],
+});
+onBeforeMount(() => {
+  console.log("onBeforeMount");
+  state.dialogModal = true;
+  getTempData();
+  if (route.query.type) {
+    state.pageType = route.query.type;
+  }
+});
+
+onMounted(() => {});
+const getTempData = () => {
+  let url = "/position/v2/model/list";
+  $request.HTTP.components.postDataByParams(url, {}).then(
+    (res) => {
+      if (res.status === 0) {
+        state.tempList = res.data || [];
+        state.selectTemplate = state.tempList[0].name || "无数据";
+        if (state.tempList.length > 0) {
+          getRulesData(state.tempList[0]);
+        }
+      } else {
+        processError(res.msg || "获取数据失败！");
+      }
+    },
+    () => {
+      processError("获取数据失败！");
+    },
+    () => {
+      processError("获取数据失败！");
+    }
+  );
+};
+const getRulesData = (temp) => {
+  let url = "/position/v2/model/detail";
+  $request.HTTP.components.postDataByParams(url, { uuid: temp.uuid }).then(
+    (res) => {
+      if (res.status === 0) {
+        let data = res.data.positionTreeRule;
+        data.map((item) => {
+          item.selected = false;
+          item.showChild = false;
+
+          item.btnSelected = [];
+          item.btnSelectedAll = false;
+          item.btnIndeterminate = false;
+          if (Array.isArray(item.interfaceList)) {
+            item.interfaceList.map((listItem) => {
+              listItem.selected = false;
+              listItem.limit = [
+                {
+                  label: "仅自己",
+                  value: 1,
+                },
+                {
+                  label: "自己及下属",
+                  value: 2,
+                },
+                {
+                  label: "本部门",
+                  value: 3,
+                },
+                {
+                  label: "所有",
+                  value: 4,
+                },
+              ];
+              listItem.limitSelected = 4;
+              listItem.positionRuleFields = listItem.positionRuleFields || [];
+              listItem.fieldsSelected = listItem.positionRuleFields.map(
+                (item) => item.ID
+              );
+            });
+          }
+        });
+        state.listData = data;
+        setRulesDataDefaultVal(data, state.listData);
+        state.selectedRows = state.listData.filter((item) => item.selected);
+      } else {
+        processError(res.msg || "获取数据失败！");
+      }
+    },
+    () => {
+      processError("获取数据失败！");
+    },
+    () => {
+      processError("获取数据失败！");
+    }
+  );
+};
+
+const handleValChange = ({ val, config }) => {
+  state.formData[config.field] = val;
+};
+const handleDialogSubmit = () => {
+  if (state.formData.name === "") {
+    processError("请填写岗位名称");
+    return;
+  }
+  let url = "/position/v2/create";
+  let params = {
+    name: state.formData.name,
+    remark: state.formData.remark,
+    color: state.formData.color,
+    positionTreeRule: [],
+    departmentID: Number(props.fatherData.key),
+    isLeader: state.formData.isOwner.length > 0,
+  };
+  let data = state.listData;
+  data
+    .filter((item) => item.selected)
+    .map((item) => {
+      let obj = {
+        ID: item.ID,
+        buttonList: Array.isArray(item.buttonList)
+          ? item.buttonList.filter((btnItem) =>
+              item.btnSelected.includes(btnItem.ID)
+            )
+          : [],
+        interfaceList: Array.isArray(item.interfaceList)
+          ? item.interfaceList
+              .filter((listItem) => listItem.selected)
+              .map((listItem) => {
+                return {
+                  ID: listItem.ID,
+                  dataRange: listItem.limitSelected,
+                  positionRuleFields: Array.isArray(listItem.positionRuleFields)
+                    ? listItem.positionRuleFields.filter((fieldItem) =>
+                        listItem.fieldsSelected.includes(fieldItem.ID)
+                      )
+                    : [],
+                };
+              })
+          : [],
+      };
+      params.positionTreeRule.push(obj);
+    });
+  state.btnLoading = true;
+  $request.HTTP.components.postDataByParams(url, params).then(
+    (res) => {
+      if (res.status === 0) {
+        // 岗位绑定审批发起人
+        if (state.approvalData.length > 0) {
+          let url = "/approval/v2/create-auth";
+          let params = {
+            typeId: state.approvalData.map((item) => item.ID),
+            departmentUID: res.data.DepartmentID.toString(),
+            departmentName: res.data.DepartmentName,
+            positionUID: res.data.ID.toString(),
+            positionName: res.data.Name,
+          };
+          $request.HTTP.components.postDataByParams(url, params).then(
+            (res) => {
+              state.btnLoading = false;
+              if (res.status === 0) {
+                processSuccess("操作成功！");
+                emits("triggerClose");
+              } else {
+                processError(res.msg || "操作失败！");
+              }
+            },
+            () => {
+              state.btnLoading = false;
+              processError("操作失败！");
+            },
+            () => {
+              processError("操作失败！");
+            }
+          );
+        } else {
+          state.btnLoading = false;
+          processSuccess("操作成功！");
+          emits("triggerClose");
+        }
+      } else {
+        state.btnLoading = false;
+        processError(res.msg || "操作失败！");
+      }
+    },
+    () => {
+      processError("操作失败！");
+      state.btnLoading = false;
+    },
+    () => {
+      processError("操作失败！");
+      state.btnLoading = false;
+    }
+  );
+};
+const handleBack = () => {
+  router.go(-1);
+};
+const handleEditField = (rowIdx, listIdx) => {
+  state.dialogData.clickData = state.listData[rowIdx];
+  state.dialogData.ID = state.listData[rowIdx].interfaceList[listIdx].ID;
+  state.dialogData.rowIdx = rowIdx;
+  state.dialogData.listIdx = listIdx;
+  state.dialogData.fieldList = JSON.parse(
+    JSON.stringify(
+      state.listData[rowIdx].interfaceList[listIdx].positionRuleFields.map(
+        (item) => {
+          return {
+            ID: item.ID,
+            field: item.fieldKey,
+            fieldCnName: item.fieldCnName,
+          };
+        }
+      )
+    )
+  );
+  state.dialogField = true;
+};
+const handleBtnSelectAllChange = (checked, idx) => {
+  if (checked) {
+    state.listData[idx].btnSelected = state.listData[idx].buttonList.map(
+      (item) => item.ID
+    );
+    state.listData[idx].btnIndeterminate = false;
+  } else {
+    state.listData[idx].btnSelected = [];
+    state.listData[idx].btnIndeterminate = false;
+  }
+};
+const handleBtnSelectChange = (e, idx) => {
+  if (e.length === 0) {
+    state.listData[idx].btnSelectedAll = false;
+    state.listData[idx].btnIndeterminate = false;
+  } else if (e.length === state.listData[idx].buttonList.length) {
+    state.listData[idx].btnSelectedAll = true;
+    state.listData[idx].btnIndeterminate = false;
+  } else {
+    state.listData[idx].btnSelectedAll = false;
+    state.listData[idx].btnIndeterminate = true;
+  }
+};
+const handleListSelectChange = (e, rowIdx, listIdx) => {
+  state.listData[rowIdx].listSelected = state.listData[
+    rowIdx
+  ].interfaceList.filter((item) => item.selected);
+};
+const handlePageSelectChange = (e) => {
+  state.selectedRows = state.listData.filter((item) => item.selected);
+};
+const handleClearPage = (select) => {
+  state.listData.forEach((item) => {
+    if (item.name === select.name) {
+      item.selected = false;
+    }
+  });
+  state.selectedRows = state.listData.filter((item) => item.selected);
+};
+
+const handleDelDialogFieldList = (delIdx) => {
+  state.dialogData.fieldList.splice(delIdx, 1);
+};
+const handleCreDialogFieldList = () => {
+  state.dialogData.fieldList.push({
+    field: "",
+    fieldCnName: "",
+  });
+};
+
+const handleDialogBack = () => {
+  state.dialogField = false;
+  emits("triggerClose");
+};
+const handleLink = (path) => {
+  router.push(path);
+};
+
+const setRulesDataDefaultVal = (pageData, listData) => {
+  pageData.map((pageDataItem) => {
+    listData.map((listItem) => {
+      if (pageDataItem.ID === listItem.ID) {
+        listItem.selected = true;
+        listItem.showChild = false;
+
+        listItem.btnSelected = Array.isArray(pageDataItem.buttonList)
+          ? pageDataItem.buttonList.map((btnItem) => btnItem.ID)
+          : [];
+        if (
+          Array.isArray(listItem.interfaceList) &&
+          Array.isArray(pageDataItem.interfaceList)
+        ) {
+          listItem.interfaceList.map((interfaceItem) => {
+            pageDataItem.interfaceList.map((pageDataInterfaceItem) => {
+              if (interfaceItem.ID === pageDataInterfaceItem.ID) {
+                interfaceItem.selected = true;
+                interfaceItem.limitSelected = pageDataInterfaceItem.dataRange;
+                pageDataInterfaceItem.positionRuleFields =
+                  pageDataInterfaceItem.positionRuleFields || [];
+                interfaceItem.fieldsSelected =
+                  pageDataInterfaceItem.positionRuleFields.map(
+                    (fieldItem) => fieldItem.ID
+                  );
+                interfaceItem.positionRuleFields.map((fieldItem) => {
+                  pageDataInterfaceItem.positionRuleFields.map(
+                    (pageDataFieldItem) => {
+                      if (fieldItem.ID === pageDataFieldItem.ID) {
+                        fieldItem.index = pageDataFieldItem.index || 0;
+                      }
+                    }
+                  );
+                });
+              }
+            });
+          });
+        }
+      }
+    });
+  });
+};
+
+const handleEditFieldSort = (rowIdx, listIdx) => {
+  state.dialogData.clickData = state.listData[rowIdx];
+  state.dialogData.ID = state.listData[rowIdx].interfaceList[listIdx].ID;
+  state.dialogData.rowIdx = rowIdx;
+  state.dialogData.listIdx = listIdx;
+  let fieldsSelected =
+    state.listData[rowIdx].interfaceList[listIdx].fieldsSelected;
+  let fieldList = [];
+  state.listData[rowIdx].interfaceList[listIdx].positionRuleFields.map(
+    (item) => {
+      if (fieldsSelected.includes(item.ID)) {
+        fieldList.push({
+          ID: item.ID,
+          field: item.fieldKey,
+          fieldCnName: item.fieldCnName,
+          index: item.index || 0,
+        });
+      }
+    }
+  );
+  fieldList.sort((a, b) => {
+    return a.index - b.index;
+  });
+  state.dialogData.fieldList = fieldList;
+  state.dialogFieldSort = true;
+};
+const handleDialogSortSave = () => {
+  let rowIdx = state.dialogData.rowIdx;
+  let listIdx = state.dialogData.listIdx;
+
+  state.dialogData.fieldList.forEach((item, idx) => {
+    item.index = idx + 1;
+  });
+
+  state.listData[rowIdx].interfaceList[listIdx].positionRuleFields.map(
+    (item) => {
+      state.dialogData.fieldList.map((fieldItem) => {
+        if (item.ID === fieldItem.ID) {
+          item.index = fieldItem.index;
+        }
+      });
+    }
+  );
+  state.dialogFieldSort = false;
+};
+const handleDialogSortBack = () => {
+  state.dialogFieldSort = false;
+};
+
+const handleTempClick = (temp) => {
+  state.selectTemplate = temp.name;
+  getRulesData(temp);
+};
+const handleEditSelectTemp = () => {
+  state.showTempRuleListData = !state.showTempRuleListData;
+};
+const handleApproval = (approvalData) => {
+  state.approvalData = approvalData;
+  state.dialogApproval = false;
+};
+const handleChangeSelfLimitData = (rowIdx, listIdx, list) => {
+  state.dialogLimitData = {
+    rowIdx,
+    listIdx,
+  };
+  state.dataDepartmentIds = list.dataDepartmentIds;
+  state.dialogSelfLimtiData = true;
+};
+const handleLimitData = (data) => {
+  let rowIdx = state.dialogLimitData.rowIdx;
+  let listIdx = state.dialogLimitData.listIdx;
+  state.listData[rowIdx].interfaceList[listIdx].dataDepartmentIds = data;
+  state.dialogSelfLimtiData = false;
+};
+</script>
+
+<style lang="scss" scoped>
+.search-item {
+  :deep(.ant-input-affix-wrapper) {
+    background: #fff;
+    color: #c3c3c3;
+  }
+  :deep(.ant-input) {
+    color: #000;
+    &::placeholder {
+      color: #c3c3c3;
+    }
+  }
+  :deep(.ant-picker-input > input) {
+    color: #000;
+    &::placeholder {
+      color: #c3c3c3;
+    }
+  }
+  :deep(.ant-picker) {
+    width: 100%;
+    border-radius: 20px;
+    background: #fff !important;
+    color: #c3c3c3;
+    border: none;
+  }
+  :deep(.ant-picker-input > input) {
+    color: #000;
+    &::placeholder {
+      color: #c3c3c3;
+    }
+  }
+}
+.n-card-header {
+}
+</style>
diff --git a/src/views/manage/posimanage/editAuth.vue b/src/views/manage/posimanage/editAuth.vue
new file mode 100644
index 0000000..6ce3166
--- /dev/null
+++ b/src/views/manage/posimanage/editAuth.vue
@@ -0,0 +1,628 @@
+<template>
+  <div ref="posimanageeditAuth"></div>
+  <n-modal v-model:show="state.showModal" :mask-closable="false">
+    <n-card
+      style="width: 80vw"
+      :bordered="false"
+      class="create-contianer"
+      size="huge"
+      width="1200px"
+      role="dialog"
+      aria-modal="true"
+    >
+      <template #header>
+        <div class="title-visible">{{ props.title }}</div>
+      </template>
+      <template #header-extra>
+        <img
+          src="@/assets/image/icon/close-tabs.png"
+          class="close-icon"
+          @click="handleClose"
+        />
+      </template>
+
+      <div class="center-content">
+        <div class="left-box">
+          <div class="title">基础设置</div>
+          <div class="content" ref="modalSelect">
+            <a-form
+              ref="formRef"
+              name="custom-validation"
+              :model="formState"
+              :rules="rules"
+              v-bind="layout"
+              :hideRequiredMark="true"
+            >
+              <a-form-item label="权限类型" name="type">
+                <a-radio-group
+                  v-model:value="formState.type"
+                  @change="changeType"
+                  name="radioGroup"
+                >
+                  <a-radio :value="'menu'">菜单权限</a-radio>
+                  <a-radio :value="'button'">按钮权限</a-radio>
+                  <a-radio :value="'interface'">列表字段权限</a-radio>
+                </a-radio-group>
+              </a-form-item>
+              <a-form-item
+                label="菜单管理"
+                name="menuType"
+                v-if="formState.type == 'menu'"
+              >
+                <a-radio-group
+                  v-model:value="formState.menuType"
+                  name="radioGroup"
+                >
+                  <a-radio :value="'1'">父级菜单</a-radio>
+                  <a-radio :value="'2'">子级菜单</a-radio>
+                </a-radio-group>
+              </a-form-item>
+              <a-form-item
+                label="上级菜单"
+                name="pid"
+                v-if="formState.menuType == '2'"
+              >
+                <n-select
+                  v-model:value="formState.pid"
+                  :options="state.menuList"
+                  label-field="Title"
+                  value-field="ID"
+                  filterable
+                />
+                <!-- <a-select ref="select"
+                          v-model:value="formState.pid"
+                          style="width: 200px">
+                  <a-select-option v-for="(item,index) in state.menuList"
+                                   :key="index"
+                                   :value="item.ID">{{item.Title}}</a-select-option>
+                </a-select> -->
+              </a-form-item>
+              <a-form-item label="权限名称" name="title">
+                <n-input
+                  v-model:value="formState.title"
+                  autocomplete="off"
+                  maxLength="12"
+                  placeholder="最长输入12个字符"
+                />
+              </a-form-item>
+              <a-form-item
+                label="上级权限"
+                name="pid"
+                v-if="formState.type !== 'menu'"
+              >
+                <n-tree-select
+                  filterable
+                  v-model:value="formState.pid"
+                  :options="state.menuTreeList"
+                  @update:value="handleUpdatemenuTreeValue"
+                />
+              </a-form-item>
+              <a-form-item label="路由/按钮名/接口名" name="url">
+                <n-input
+                  v-model:value="formState.url"
+                  autocomplete="off"
+                  :placeholder="
+                    formState.type == 'menu' ? '不做路由跳转可为空' : ''
+                  "
+                />
+              </a-form-item>
+              <a-form-item
+                label="图标"
+                name="icon"
+                v-if="formState.type == 'menu' && formState.menuType == '1'"
+              >
+                <Upload
+                  :maxCount="1"
+                  v-model:uploadVal="formState.icon"
+                  :zIndex="9000"
+                  class="upload"
+                />
+              </a-form-item>
+              <a-form-item
+                label="选中图标"
+                name="grayIcon"
+                v-if="formState.type == 'menu' && formState.menuType == '1'"
+              >
+                <Upload
+                  :maxCount="1"
+                  v-model:uploadVal="formState.grayIcon"
+                  :zIndex="9000"
+                  class="upload"
+                />
+              </a-form-item>
+              <a-form-item
+                label="排序"
+                name="weigh"
+                v-if="formState.type == 'menu'"
+              >
+                <n-input-number
+                  :show-button="false"
+                  v-model:value="formState.weigh"
+                  autocomplete="off"
+                  placeholder="1-100,越大排序越靠前"
+                />
+              </a-form-item>
+            </a-form>
+            <div v-show="formState.type == 'interface'" class="row">
+              <div class="col-4 text-right">
+                列表字段<span style="margin: 0 8px 0 2px">:</span>
+              </div>
+              <div class="col-8">
+                <div
+                  v-for="(item, index) in formState.ruleFields"
+                  :key="index"
+                  style="margin-bottom: 10px"
+                >
+                  <div class="flex">
+                    <n-input
+                      v-model:value="item.fieldCnName"
+                      autocomplete="off"
+                      placeholder="列表字段中文名称"
+                      style="margin-bottom: 10px; width: 200px"
+                    />
+                    <span
+                      class="cancel-btn"
+                      @click="cancelRule(index)"
+                      v-if="formState.ruleFields.length > 1"
+                      >移除</span
+                    >
+                  </div>
+                  <n-input
+                    type="textarea"
+                    v-model:value="item.fieldKey"
+                    placeholder="列表字段对应value值"
+                    :autosize="{ minRows: 2, maxRows: 5 }"
+                  />
+                </div>
+              </div>
+              <div class="col-4 row"></div>
+              <div class="col-8 row">
+                <a-button @click="addInput" style="width: 120px">
+                  <PlusOutlined />
+                </a-button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <template #footer>
+        <div class="row justify-end">
+          <div class="footer-content" v-if="state.isEdit">
+            <!-- <a-popconfirm title="是否确认删除该权限，删除后不可恢复？"
+                      cancel-text="取消"
+                      ok-text="确定"
+                      @confirm="handleDel"
+                      @cancel="departmentCel">
+          <a-button class="basic-btn">删除该权限</a-button>
+        </a-popconfirm> -->
+            <a-button
+              class="primary-btn"
+              :loading="state.btnLoading"
+              @click="handleUpdate"
+              >完成修改</a-button
+            >
+          </div>
+          <div class="footer-content" v-else>
+            <a-button class="basic-btn" @click="resetForm">清空</a-button>
+            <a-button
+              class="primary-btn"
+              :loading="state.btnLoading"
+              @click="handleCreate"
+              >完成设置</a-button
+            >
+          </div>
+        </div>
+      </template>
+    </n-card>
+  </n-modal>
+</template>
+
+<script setup>
+// 权限新建弹窗 旧代码
+import { MinusCircleOutlined, PlusOutlined } from "@ant-design/icons-vue";
+import {
+  defineProps,
+  defineEmits,
+  watch,
+  reactive,
+  ref,
+  unref,
+  onMounted,
+  getCurrentInstance,
+} from "vue";
+import Upload from "@/components/upload.vue";
+import { Form, message } from "ant-design-vue";
+import { processSuccess, processError } from "@/utils/helper/message";
+
+const currentInstance = getCurrentInstance();
+const { $request } = currentInstance.appContext.config.globalProperties;
+
+const emits = defineEmits(["submit", "triggerClose"]);
+let props = defineProps({
+  title: {
+    type: String,
+    require: true,
+  },
+  data: {
+    type: Object,
+    default: () => {},
+  },
+});
+const state = reactive({
+  btnLoading: false,
+  menuList: [],
+  menuTreeList: [],
+  isEdit: false,
+  showModal: true,
+});
+onMounted(() => {
+  state.showModal = true;
+  getMenu();
+  getMenuTree();
+  if (props.data?.id) {
+    state.isEdit = true;
+    getDetail();
+  } else {
+    state.isEdit = false;
+    formState.dataOpen = true;
+    formState.method = "*";
+    formState.type = "";
+    formState.icon = "";
+    formState.pid = null;
+    formState.title = "";
+    formState.menuType = "";
+    formState.url = "";
+    formState.weigh = "";
+    formState.ruleFields = [{ fieldKey: "", fieldCnName: "" }];
+  }
+});
+
+const handleClose = () => {
+  emits("triggerClose");
+  resetForm();
+  state.isEdit = false;
+};
+const layout = {
+  labelCol: { span: 8 },
+  wrapperCol: { span: 16 },
+};
+const formRef = ref();
+const formState = reactive({
+  grayIcon: "",
+  dataOpen: true,
+  method: "*",
+  type: "", // 'menu'菜单,'button'按钮组件,'interface'列表字段权限
+  icon: "",
+  pid: null,
+  title: "",
+  menuType: "",
+  url: "",
+  weigh: "",
+  ruleFields: [{ fieldKey: "", fieldCnName: "" }],
+});
+const filedJsonV = async (_rule, value) => {
+  // 验空
+  if (
+    formState.type === "interface" &&
+    formState.ruleFields.some((val) => val.fieldKey == "" || val.fieldKey == "")
+  ) {
+    return Promise.reject("请补充完整");
+  } else {
+    return Promise.resolve();
+  }
+};
+const urlV = async (_rule, value) => {
+  // 验空
+  if (formState.type === "menu" && formState.menuType === "1") {
+    return Promise.resolve();
+  } else {
+    if (value == "") {
+      return Promise.reject("请输入路由/唯一标识");
+    } else {
+      return Promise.resolve();
+    }
+  }
+};
+const rules = {
+  type: [{ required: true, message: "请选择权限类型", trigger: "change" }],
+  icon: [{ required: true, message: "请上传Icon", trigger: "change" }],
+  grayIcon: [{ required: true, message: "请上传选中Icon", trigger: "change" }],
+  menuType: [{ required: true, message: "请选择菜单等级", trigger: "change" }],
+  pid: [
+    { required: true, message: "请选择上级权限/上级菜单", trigger: "change" },
+  ],
+  title: [{ required: true, message: "请输入权限名称", trigger: "change" }],
+  url: [{ required: true, validator: urlV, trigger: "change" }], // message: '请输入路由/唯一标识',
+  weigh: [{ required: true, message: "请输入排序", trigger: "change" }],
+  ruleFields: [
+    {
+      required: true,
+      validator: filedJsonV,
+      trigger: ["blur, change"],
+      type: "array",
+    },
+  ],
+};
+const resetForm = () => {
+  formRef.value.resetFields();
+};
+const addInput = () => {
+  formState.ruleFields.push({ fieldKey: "", fieldCnName: "" });
+};
+const cancelRule = (index) => {
+  formState.ruleFields.splice(index, 1);
+};
+const changeType = () => {
+  formState.dataOpen = true;
+  formState.method = "*";
+  // formState.type = ''
+  formState.icon = "";
+  formState.pid = null;
+  formState.title = "";
+  formState.url = "";
+  formState.weigh = "";
+  formState.menuType = "";
+  formState.ruleFields = [{ fieldKey: "", fieldCnName: "" }];
+};
+
+const handleCreate = () => {
+  formRef.value
+    .validate()
+    .then(() => {
+      formState.pid = formState.pid ? Number(formState.pid) : 0;
+      formState.weigh = formState.weigh ? Number(formState.weigh) : 1;
+
+      state.btnLoading = true;
+      let url = "/rule/create";
+      let params = formState;
+      $request.HTTP.components.postDataByParams(url, params).then(
+        (res) => {
+          state.btnLoading = false;
+          if (res.status === 0) {
+            processSuccess("添加成功");
+            handleClose();
+            emits("triggerClose");
+          } else {
+            processError(res.msg || "操作失败！");
+          }
+        },
+        () => {
+          state.btnLoading = false;
+          processError("操作失败！");
+        }
+      );
+    })
+    .catch((error) => {});
+};
+const handleDel = () => {
+  $request.HTTP.permission
+    .ruleRemove({ ID: formState.ID })
+    .then((res) => {
+      if (res.status == 0) {
+        message.success({
+          content: "删除成功",
+          duration: 2,
+          onClose() {
+            handleClose();
+            emits("triggerClose");
+          },
+        });
+      } else {
+        message.error(res.msg);
+      }
+    })
+    .catch((e) => {
+      message.error(e.response?.data?.msg || "操作失败，请稍后再试");
+    });
+};
+const departmentCel = () => {};
+const handleUpdate = () => {
+  formRef.value
+    .validate()
+    .then(() => {
+      formState.pid = formState.pid ? Number(formState.pid) : 0;
+      formState.weigh = formState.weigh ? Number(formState.weigh) : 1;
+
+      state.btnLoading = true;
+      let url = "/rule/v2/update";
+      let params = formState;
+      $request.HTTP.components.postDataByParams(url, params).then(
+        (res) => {
+          state.btnLoading = false;
+          if (res.status === 0) {
+            message.success({
+              content: "修改成功",
+              duration: 2,
+              onClose() {
+                handleClose();
+                emits("triggerClose");
+              },
+            });
+          } else {
+            processError(res.msg || "操作失败！");
+          }
+        },
+        () => {
+          state.btnLoading = false;
+          processError("操作失败！");
+        }
+      );
+    })
+    .catch(() => {});
+};
+
+const getMenu = () => {
+  $request.HTTP.permission
+    .menuFList()
+    .then((res) => {
+      if (res.status == 0) {
+        state.menuList = res.data.data;
+      } else {
+        message.error(res.msg);
+      }
+    })
+    .catch((e) => {
+      message.error(e.response?.data?.msg || "操作失败，请稍后再试");
+    });
+};
+
+const getMenuTree = () => {
+  $request.HTTP.permission
+    .menuSList()
+    .then((res) => {
+      if (res.status == 0) {
+        state.menuTreeList = res.data.data.map((item) => {
+          let obj = {
+            label: item.Title,
+            key: item.ID,
+            children: [],
+          };
+          if (item.Son) {
+            obj.children = item.Son.map((i) => {
+              return {
+                key: i.ID,
+                label: i.Title,
+              };
+            });
+          }
+          return obj;
+        });
+      } else {
+        message.error(res.msg);
+      }
+    })
+    .catch((e) => {
+      message.error(e.response?.data?.msg || "操作失败，请稍后再试");
+    });
+};
+const handleUpdatemenuTreeValue = (val) => {
+  formState.pid = val;
+};
+const getDetail = () => {
+  let url = "/rule/v2/detail";
+  let params = {
+    ID: props.data.id,
+  };
+  $request.HTTP.components.postDataByParams(url, params).then(
+    (res) => {
+      if (res.status === 0) {
+        formState.ID = res.data.ID;
+        formState.type = res.data.type;
+        formState.title = res.data.title;
+        formState.url = res.data.url;
+        if (res.data.type == "button") {
+          formState.pid = res.data.pid;
+        }
+        if (res.data.type == "menu") {
+          formState.icon = res.data.icon;
+          formState.grayIcon = res.data.grayIcon;
+          formState.weigh = res.data.weigh;
+          formState.pid = res.data.pid;
+          formState.menuType = res.data.menuType;
+        }
+        if (res.data.type == "interface") {
+          formState.pid = res.data.pid;
+          formState.ruleFields = res.data.ruleFields;
+        }
+      } else {
+        processError(res.msg || "获取失败！");
+      }
+    },
+    () => {
+      processError("获取失败！");
+    },
+    () => {
+      processError("获取失败！");
+    }
+  );
+};
+</script>
+
+<style lang="scss" scoped>
+.title-visible {
+  text-align: center;
+  color: $theme-primary;
+  font-size: 22px;
+}
+:deep(.ant-modal-body) {
+  padding: 0 24px;
+}
+.create-contianer {
+  .ant-input {
+    color: #6d5c9c;
+  }
+  .center-content {
+    height: 65vh;
+    display: flex;
+    .title {
+      width: fit-content;
+      padding-left: 10px;
+      border-left: 4px solid $theme-primary;
+      color: $text-theme;
+      margin: 19px 0;
+    }
+
+    .left-box {
+      width: 55%;
+      padding-right: 30px;
+      .content {
+        height: 54vh;
+        overflow-y: auto;
+      }
+      div {
+        color: $text-theme;
+      }
+      :deep(.ant-form-item-label > label) {
+        color: $text-theme;
+      }
+      .ant-form-item input[type="text"],
+      input,
+      textarea {
+        background: #e3dfea;
+      }
+
+      .ant-select :deep(.ant-select-selector) {
+        background: #e3dfea;
+      }
+      .control-item {
+        :deep(.ant-form-item-control) {
+          margin-left: 0px !important;
+        }
+      }
+      .flex {
+        display: flex;
+        justify-content: space-between;
+      }
+      .cancel-btn {
+        color: #999999;
+        cursor: pointer;
+        &:hover {
+          color: $text-theme;
+        }
+      }
+    }
+  }
+  .upload {
+    :deep(.ant-image) {
+      width: 100px;
+      height: 100px;
+    }
+    :deep(.ant-image-img) {
+      width: 100px;
+      height: 100px;
+    }
+  }
+  .footer-content {
+    margin: 10px 0;
+    button {
+      width: 130px;
+      height: 30px;
+      text-align: center;
+      line-height: 30px;
+      padding: 0;
+      margin: 0 10px;
+      border-radius: 20px;
+    }
+  }
+}
+</style>
diff --git a/src/views/manage/posimanage/index.vue b/src/views/manage/posimanage/index.vue
new file mode 100644
index 0000000..6439f7d
--- /dev/null
+++ b/src/views/manage/posimanage/index.vue
@@ -0,0 +1,674 @@
+<template>
+  <div class="row" style="padding: 35px">
+    <div
+      class="col-3 fl-pa-md"
+      style="
+        background: #fff;
+        box-shadow: rgba(188, 188, 188, 0.18) 0px 3px 6px 1px;
+      "
+    >
+      <div
+        class="row font-16"
+        style="color: #764cf6; border-bottom: 1px solid #c1b2e5"
+      >
+        <div class="fl-py-sm" style="border-bottom: 4px solid #764cf6">
+          组织架构
+        </div>
+      </div>
+      <div class="row" style="height: 76vh; overflow: auto">
+        <fl-tree
+          :data="state.treeData"
+          :expandedKeys="state.expandedKeys"
+          :refreshCount="state.treeRefreshCount"
+          :clickKey="state.clickKey"
+          @triggerTreeClick="handleTreeClick"
+        ></fl-tree>
+      </div>
+    </div>
+
+    <div class="col-9 fl-px-md">
+      <div style="background: #fff" class="fl-pa-md">
+        <div
+          class="col-12 row font-18"
+          style="
+            color: #764cf6;
+            border-bottom: 1px solid #c1b2e5;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+          "
+        >
+          <div class="fl-py-sm" style="border-bottom: 4px solid #764cf6">
+            岗位管理
+          </div>
+          <div>
+            <n-button @click="goToOrgManage" v-permission="'org-manage-btn'">
+              组织管理
+            </n-button>
+          </div>
+        </div>
+
+        <div class="col-12 row fl-mt-sm">
+          <fln-table
+            :config="state.tableConfig"
+            :fatherData="state.treeSelectData"
+            :refreshCount="state.tableConfig.refreshCount"
+            @triggerRowActions="handleRowActions"
+            @triggerTableBatchActions="handleTableBatchActions"
+          >
+          </fln-table>
+        </div>
+      </div>
+    </div>
+    <div class="col-12 row fl-mt-md">
+      <n-button
+        tertiary
+        style="width: 161px; background: #39109c; color: #fff"
+        @click="handlePermissMgm"
+        >权限列表</n-button
+      >
+    </div>
+  </div>
+
+  <n-modal
+    v-model:show="state.dialogDel"
+    style="width: 600px"
+    :mask-closable="false"
+    preset="card"
+  >
+    <template #header>
+      <div
+        class="col-12 row justify-center relative"
+        style="border-bottom: 1px solid #dfd7f2"
+      >
+        <div style="font-size: 20px; font-weight: bold; color: #1f2225ff">
+          删除
+        </div>
+      </div>
+    </template>
+    <div class="row justify-center fl-pa-md">
+      <div
+        v-if="state.dialogData.type === 'one'"
+        class="font-20"
+        style="color: #6d5c9c; margin: 80px 0"
+      >
+        确定删除该岗位吗？
+      </div>
+      <div
+        v-if="state.dialogData.type === 'batch'"
+        class="font-20"
+        style="color: #6d5c9c; margin: 80px 0"
+      >
+        确定删除选中的岗位吗？
+      </div>
+      <div class="col-12 row justify-center">
+        <n-button
+          tertiary
+          style="width: 161px; background: #c7c7c9ff; color: #fff"
+          class="fl-mr-md"
+          @click="handleDialogBack"
+          >返回</n-button
+        >
+
+        <n-button
+          tertiary
+          style="width: 161px; background: #46299dff; color: #fff"
+          @click="handleDialogSave"
+          >确定</n-button
+        >
+      </div>
+    </div>
+  </n-modal>
+
+  <fl-posi-permiss-mgm
+    v-if="state.dialogPermissMgm"
+    @triggerClose="state.dialogPermissMgm = false"
+  />
+
+  <orgManage
+    :orgVisible="state.org.orgVisible"
+    :title="'组织管理'"
+    @orgHandleOk="orgHandleOk"
+  ></orgManage>
+
+  <fl-posi-dialog-create
+    v-if="state.dialogPosiCreate"
+    :fatherData="state.treeSelectData"
+    @triggerClose="handleDialogCreateClose"
+  ></fl-posi-dialog-create>
+
+  <n-modal
+    v-model:show="state.dialogLinkerNum"
+    style="width: 800px"
+    :mask-closable="true"
+    preset="card"
+  >
+    <div class="row justify-center fl-pa-md">
+      <fln-table
+        :config="state.linkerNumConfig"
+        :fatherData="state.dialogData"
+        :refreshCount="state.linkerNumConfig.refreshCount"
+      >
+      </fln-table>
+
+      <div class="col-12 row justify-center fl-mt-md">
+        <n-button
+          tertiary
+          style="width: 161px; background: #c7c7c9ff; color: #fff"
+          class="fl-mr-md"
+          @click="state.dialogLinkerNum = false"
+          >关闭</n-button
+        >
+      </div>
+    </div>
+  </n-modal>
+</template>
+
+<script setup>
+// 岗位
+import flPosiPermissMgm from "./permissionDialog.vue";
+import { NButton } from "naive-ui";
+import {
+  ref,
+  reactive,
+  onBeforeMount,
+  onMounted,
+  getCurrentInstance,
+  computed,
+  nextTick,
+  h,
+} from "vue";
+import { processError, processSuccess } from "@/utils/helper/message";
+import { useRouter } from "vue-router";
+import login from "@/api/login";
+import flnTable from "@/components/flnlayout/table/flntable.vue";
+import flTree from "@/components/flnlayout/tree/flnindex.vue";
+import flPosiDialogCreate from "./dialogCreate.vue";
+
+import { Local } from "@/utils/storage.js";
+import orgManage from "./orgManage.vue";
+const router = useRouter();
+const currentInstance = getCurrentInstance();
+const { $request } = currentInstance.appContext.config.globalProperties;
+const title = ref("");
+const state = reactive({
+  clickKey: "",
+  treeRefreshCount: 0,
+  expandedKeys: [],
+  treeData: [],
+  treeSelectData: {},
+  dialogPermissMgm: false,
+  dialogDel: false,
+  dialogData: {},
+  btnLoading: false,
+  selectedRows: [],
+  title: "",
+  org: {
+    orgVisible: false,
+  },
+  dialogLinkerNum: false,
+  tableConfig: {
+    tableScrollWitdh: 600,
+    rowKey: "ID",
+    hasSelection: true,
+    refreshCount: 0,
+    listUrl: {
+      resDataField: "data",
+      pageField: "page",
+      pageSizeField: "pageSize",
+      url: "/position/v2/list",
+      params: [
+        {
+          label: "departmentID",
+          field: "key",
+        },
+      ],
+    },
+    searchConfig: [
+      {
+        type: "text",
+        label: "岗位ID",
+        field: "ID",
+        class: "col-4",
+        placeholder: "",
+      },
+      {
+        type: "text",
+        label: "岗位名",
+        field: "name",
+        class: "col-4",
+        placeholder: "",
+      },
+      {
+        type: "text",
+        label: "页面权限",
+        field: "menuAuth",
+        class: "col-4",
+        placeholder: "",
+      },
+      {
+        type: "text",
+        label: "操作人",
+        field: "operatorName",
+        class: "col-4",
+        placeholder: "",
+      },
+      {
+        type: "rangdate",
+        label: "最近一次更新时间",
+        field: ["updateStartAt", "updateEndAt"],
+        class: "col-4",
+        placeholder: ["开始", "结束"],
+      },
+    ],
+    columns: [
+      {
+        title: "岗位ID",
+        field: "ID",
+      },
+      {
+        width: 140,
+        title: "岗位名",
+        field: "name",
+        type: "sfBgColor",
+        bgConfig: {
+          bgColorField: "color",
+          color: "#fff",
+        },
+      },
+      // {
+      //   width: 120,
+      //   type: "select",
+      //   title: "部门负责人",
+      //   field: "",
+      //   config: {
+      //     options: [
+      //       {
+      //         label: "是",
+      //         value: 1,
+      //       },
+      //     ],
+      //   },
+      // },
+      {
+        width: 120,
+        type: "tooltip",
+        title: "岗位描述",
+        field: "remark",
+      },
+      {
+        width: 360,
+        title: "页面权限",
+        field: "menuAuths",
+        type: "tags",
+        tagConfig: {
+          showLength: 3,
+          bgColor: "#fff",
+          borderRadius: "14px",
+          style: "border-radius: 14px",
+        },
+      },
+      {
+        width: 140,
+        sorter: true,
+        title: "被关联人数",
+        field: "linkerNum",
+        render(row) {
+          return h(
+            "div",
+            {
+              style: "color: #409eff; cursor: pointer",
+              onClick: () => {
+                handleLinkerNum(row);
+              },
+            },
+            row.linkerNum
+          );
+        },
+      },
+      {
+        width: 140,
+        title: "操作人",
+        field: "operatorName",
+      },
+      {
+        width: 160,
+        title: "最近一次更新时间",
+        field: "updatedAt",
+      },
+      {
+        width: 200,
+        title: "操作",
+        fixed: "right",
+        actions: [
+          {
+            actionType: "act_view",
+            type: "label",
+            label: "查看",
+            shape: "round",
+            class: "fl-mx-xs fl-mt-xs",
+          },
+          {
+            permission: "r_manage_posimanage_btn_edit",
+            actionType: "act_edit",
+            type: "label",
+            label: "修改",
+            shape: "round",
+            class: "fl-mx-xs fl-mt-xs",
+          },
+          {
+            permission: "r_manage_posimanage_btn_delete",
+            actionType: "act_del",
+            type: "label",
+            label: "删除",
+            shape: "round",
+            class: "fl-mx-xs fl-mt-xs",
+          },
+        ],
+      },
+    ],
+    tableBatchActions: [
+      {
+        permission: "r_manage_posimanage_btn_create",
+        notLimitSelect: true,
+        style: "background:#F7EFFFFF;color:#8352B4FF",
+        actionType: "posi-direct-create",
+        type: "primary",
+        label: "新建岗位",
+      },
+      {
+        permission: "r_manage_posimanage_btn_create",
+        notLimitSelect: true,
+        style: "background:#F7EFFFFF;color:#8352B4FF",
+        actionType: "posi-create",
+        type: "primary",
+        label: "模版新建岗位",
+      },
+    ],
+  },
+  linkerNumConfig: {
+    tableScrollWitdh: 300,
+    rowKey: "ID",
+    refreshCount: 0,
+    listUrl: {
+      resDataField: "data",
+      pageField: "page",
+      pageSizeField: "pageSize",
+      url: "/user/v2/list",
+      params: [
+        {
+          label: "positionId",
+          field: "ID",
+        },
+      ],
+    },
+    columns: [
+      {
+        title: "员工工号",
+        field: "jobNum",
+      },
+      {
+        title: "姓名",
+        field: "nickName",
+      },
+      {
+        title: "手机",
+        field: "telNum",
+      },
+      {
+        type: "select",
+        title: "状态",
+        field: "status",
+        config: {
+          options: [
+            {
+              label: "有效",
+              value: "notactive",
+            },
+            {
+              label: "无效",
+              value: "left",
+            },
+          ],
+        },
+      },
+    ],
+  },
+  dialogPosiCreate: false,
+});
+onBeforeMount(() => {
+  getTreeData();
+});
+onMounted(() => {});
+
+const getTreeData = () => {
+  let url = "/department/v2/tree/filter";
+  let params = {};
+  $request.HTTP.components.postDataByParams(url, params).then(
+    (res) => {
+      if (res.status === 0 && Array.isArray(res.data.nodes)) {
+        let data = res.data.nodes;
+        calcTreeData(data);
+        state.treeData = data;
+        // 获取最近点击的部门
+        let localSelect = Local.get("posimanage_treeSelectData");
+        if (localSelect && JSON.stringify(localSelect) !== "{}") {
+          state.treeSelectData = localSelect;
+          state.expandedKeys = localSelect.pathIds;
+          state.clickKey = localSelect.key;
+        } else {
+          if (JSON.stringify(state.treeSelectData) === "{}") {
+            state.treeSelectData = data[0];
+            state.clickKey = data[0].key;
+          }
+          if (
+            state.clickKey === data[0].key &&
+            !state.expandedKeys.includes(data[0].key)
+          ) {
+            state.expandedKeys.push(data[0].key);
+          }
+          if (!state.expandedKeys.includes(state.clickKey)) {
+            state.expandedKeys.push(state.clickKey);
+          }
+        }
+        state.treeRefreshCount++;
+        state.tableConfig.refreshCount++;
+      } else {
+        processError(res.msg || "获取失败！");
+      }
+    },
+    () => {
+      processError("获取失败！");
+    },
+    () => {
+      processError("获取失败！");
+    }
+  );
+};
+const calcTreeData = (data) => {
+  for (let item of data) {
+    item.key = item.ID;
+    item.label = item.name;
+    item.title = item.name;
+    if (item.sons) {
+      item.children = item.sons;
+      calcTreeData(item.children);
+    }
+    delete item.ID;
+    delete item.name;
+    delete item.sons;
+  }
+};
+const handleTreeClick = ({ selectedKey, tree }) => {
+  state.clickKey = tree.key;
+  state.treeSelectData = tree;
+  state.tableConfig.refreshCount++;
+  Local.set("posimanage_treeSelectData", state.treeSelectData);
+};
+
+const handleRowActions = ({ btnConfig, rowData }) => {
+  state.dialogData = rowData;
+  Local.set("posimanage_treeSelectData", state.treeSelectData);
+  if (btnConfig.actionType === "act_del") {
+    state.dialogData.type = "one";
+    state.dialogDel = true;
+  }
+  if (btnConfig.actionType === "act_edit") {
+    router.push(
+      `/posimanage/create?departmentID=${state.clickKey}&&ID=${rowData.ID}&&type=edit`
+    );
+  }
+  if (btnConfig.actionType === "act_view") {
+    router.push(
+      `/posimanage/create?departmentID=${state.clickKey}&&ID=${rowData.ID}&&type=view`
+    );
+  }
+};
+
+const handleTableBatchActions = ({ selectedRows, btnConfig, fatherData }) => {
+  state.selectedRows = selectedRows;
+  if (btnConfig.actionType === "posi-create") {
+    Local.set("posimanage_treeSelectData", state.treeSelectData);
+    state.dialogPosiCreate = true;
+    // router.push(
+    //   `/posimanage/create?departmentID=${state.clickKey}&&type=create`
+    // );
+  }
+  if (btnConfig.actionType === "posi-delete-bat") {
+    handleDeleteBatch();
+  }
+  if (btnConfig.actionType === "posi-direct-create") {
+    router.push(
+      `/posimanage/create?departmentID=${
+        Local.get("posimanage_treeSelectData").key
+      }&&type=create`
+    );
+  }
+};
+
+const handleDeleteBatch = () => {
+  state.dialogData.type = "batch";
+  state.dialogDel = true;
+};
+const handleDeleteBatchSave = () => {
+  state.btnLoading = true;
+  let url = "/position/v2/batch/remove";
+  let params = {
+    IDs: state.selectedRows.map((item) => item.ID),
+  };
+  $request.HTTP.components.postDataByParams(url, params).then(
+    (res) => {
+      state.btnLoading = false;
+      if (res.status === 0) {
+        state.selectedRows = [];
+        state.tableConfig.refreshCount++;
+        processSuccess("操作成功！");
+        state.dialogDel = false;
+      } else {
+        processError(res.msg || "操作失败！");
+      }
+    },
+    () => {
+      processError("操作失败！");
+      state.btnLoading = false;
+    },
+    () => {
+      processError("操作失败！");
+      state.btnLoading = false;
+    }
+  );
+};
+
+// 单个删除
+const handleDialogSave = () => {
+  if (state.dialogData.type === "batch") {
+    handleDeleteBatchSave();
+    return;
+  }
+  state.btnLoading = true;
+  let url = "/position/v2/batch/remove";
+  let params = {
+    IDs: [state.dialogData.ID],
+  };
+  $request.HTTP.components.postDataByParams(url, params).then(
+    (res) => {
+      state.btnLoading = false;
+      if (res.status === 0) {
+        state.tableConfig.refreshCount++;
+        state.dialogDel = false;
+        processSuccess("操作成功！");
+      } else {
+        processError(res.msg || "操作失败！");
+      }
+    },
+    () => {
+      processError("操作失败！");
+      state.btnLoading = false;
+      state.dialogDel = false;
+    },
+    () => {
+      state.dialogDel = false;
+      state.btnLoading = false;
+      processError("操作失败！");
+    }
+  );
+};
+const handleDialogBack = () => {
+  state.dialogDel = false;
+};
+const handlePermissMgm = () => {
+  state.dialogPermissMgm = true;
+};
+
+// 组织管理
+const goToOrgManage = () => {
+  state.org = { orgVisible: true };
+};
+const orgHandleOk = () => {
+  state.org.orgVisible = false;
+  getTreeData();
+};
+const handleDialogCreateClose = () => {
+  state.dialogPosiCreate = false;
+  state.tableConfig.refreshCount++;
+};
+const handleLinkerNum = (row) => {
+  console.log(row);
+  state.dialogData = row;
+  state.dialogLinkerNum = true;
+};
+</script>
+
+<style lang="scss" scoped>
+.search-item {
+  :deep(.ant-input-affix-wrapper) {
+    background: #fff;
+    color: #c3c3c3;
+  }
+  :deep(.ant-input) {
+    color: #000;
+    &::placeholder {
+      color: #c3c3c3;
+    }
+  }
+  :deep(.ant-picker-input > input) {
+    color: #000;
+    &::placeholder {
+      color: #c3c3c3;
+    }
+  }
+  :deep(.ant-picker) {
+    width: 100%;
+    border-radius: 20px;
+    background: #fff !important;
+    color: #c3c3c3;
+    border: none;
+  }
+  :deep(.ant-picker-input > input) {
+    color: #000;
+    &::placeholder {
+      color: #c3c3c3;
+    }
+  }
+}
+</style>
diff --git a/src/views/manage/posimanage/limitData.vue b/src/views/manage/posimanage/limitData.vue
new file mode 100644
index 0000000..f32a5e4
--- /dev/null
+++ b/src/views/manage/posimanage/limitData.vue
@@ -0,0 +1,134 @@
+<template>
+  <n-modal v-model:show="state.dialogModal"
+           :mask-closable="false">
+    <n-card style="width: 600px"
+            :bordered="false"
+            size="huge"
+            role="dialog"
+            aria-modal="true">
+      <template #header>
+        <div class="col-12 row justify-center relative"
+             style="border-bottom: 1px solid #dfd7f2">
+          <div style="font-size: 20px; font-weight: bold; color: #1f2225">
+            自定义数据范围权限
+          </div>
+        </div>
+      </template>
+
+      <template #header-extra>
+        <n-button @click="handleLimitData"
+                  text
+                  style="font-size: 24px">
+          <n-icon>
+            <close-icon />
+          </n-icon>
+        </n-button>
+      </template>
+      <div class="row justify-center fl-pa-md"
+           style="color: #333639">
+        <div class="col-12 text-center font-14"
+             style="color: #333639">
+          被勾选的部门相关权限可被查看
+        </div>
+        <n-tree block-line
+                checkable
+                :selectable="false"
+                :data="state.treeData"
+                :default-checked-keys="props.fatherData"
+                @update:checked-keys="updateCheckedKeys" />
+
+        <div class="col-12 row justify-center fl-mt-md">
+          <n-button tertiary
+                    style="width: 161px; background: #c7c7c9ff; color: #fff"
+                    class="fl-mr-md"
+                    @click="handleLimitData">返回</n-button>
+
+          <n-button tertiary
+                    style="width: 161px; background: #46299dff; color: #fff"
+                    @click="handleLimitData('submit')">保存</n-button>
+        </div>
+      </div>
+    </n-card>
+  </n-modal>
+</template>
+
+<script setup>
+// 权限 自定义数据范围
+import {
+  ref,
+  reactive,
+  onBeforeMount,
+  onMounted,
+  getCurrentInstance,
+  computed,
+  nextTick,
+} from "vue";
+import { Close as CloseIcon } from "@vicons/ionicons5";
+import { processError, processSuccess } from "@/utils/helper/message";
+const currentInstance = getCurrentInstance();
+const { $request } = currentInstance.appContext.config.globalProperties;
+let props = defineProps({
+  fatherData: {
+    type: Array,
+  },
+});
+const state = reactive({
+  treeData: [],
+  dialogModal: true,
+  selectedKeys: []
+});
+onBeforeMount(() => {
+  state.dialogModal = true;
+  getTreeData()
+  if (props.fatherData) {
+    state.selectedKeys = props.fatherData;
+  }
+});
+const getTreeData = () => {
+  let url = "/department/v2/tree/my";
+  let params = {};
+  $request.HTTP.components.postDataByParams(url, params).then(
+    (res) => {
+      if (res.status === 0 && Array.isArray(res.data.nodes)) {
+        let data = res.data.nodes;
+        calcTreeData(data);
+        state.treeData = data;
+      } else {
+        processError(res.msg || "获取失败！");
+      }
+    },
+    () => {
+      processError("获取失败！");
+    },
+    () => {
+      processError("获取失败！");
+    }
+  );
+};
+const calcTreeData = (data) => {
+  for (let item of data) {
+    item.key = item.ID;
+    item.label = item.name;
+    item.title = item.name;
+    if (item.sons) {
+      item.children = item.sons;
+      calcTreeData(item.children);
+    }
+    delete item.ID;
+    delete item.name;
+    delete item.sons;
+  }
+};
+const emits = defineEmits(["triggerLimitData"]);
+const handleLimitData = (type) => {
+  if (type === 'submit') {
+    emits("triggerLimitData", state.selectedKeys);
+  } else {
+    emits("triggerLimitData", []);
+  }
+};
+
+const updateCheckedKeys = (keys) => {
+  state.selectedKeys = keys;
+};
+</script>
diff --git a/src/views/manage/posimanage/orgManage.vue b/src/views/manage/posimanage/orgManage.vue
new file mode 100644
index 0000000..4fa605e
--- /dev/null
+++ b/src/views/manage/posimanage/orgManage.vue
@@ -0,0 +1,576 @@
+<template>
+  <div class="org-dialog">
+    <n-modal
+      class="org-dialog"
+      v-model:show="props.orgVisible"
+      :z-index="1999"
+      :mask-closable="true"
+      style="min-width: 1000px; max-width: 1200px"
+      :to="app"
+    >
+      <n-card
+        :bordered="false"
+        :title="props.title"
+        size="huge"
+        role="dialog"
+        aria-modal="true"
+      >
+        <template #header-extra>
+          <div class="close-box">
+            <n-button @click="closeFn" text style="font-size: 24px">
+              <n-icon>
+                <close-icon />
+              </n-icon>
+            </n-button>
+          </div>
+        </template>
+        <div class="item-box">
+          <fl-tree
+            :data="state.treeData"
+            :expandedKeys="state.expandedKeys"
+            :refreshCount="state.treeRefreshCount"
+            :clickKey="state.clickKey"
+            :config="{
+              actions: ['edit', 'add', 'subtraction', 'move'],
+              moveShow: '[%=level%]>0',
+              subtractionShow: '[%=level%]>0',
+            }"
+            @triggerTreeAction="handleTreeAction"
+            @triggerTreeClick="handleTreeClick"
+          ></fl-tree>
+        </div>
+        <template #footer>
+          <div
+            style="text-align: center; padding-left: 20px; padding-right: 10px"
+          >
+            <n-button class="button-box" @click="closeFn"> 返回 </n-button>
+          </div>
+        </template>
+      </n-card>
+    </n-modal>
+    <n-modal
+      v-model:show="state.dialogAddTree"
+      style="width: 600px"
+      :mask-closable="false"
+      preset="card"
+    >
+      <template #header>
+        <div
+          class="col-12 row justify-center relative"
+          style="border-bottom: 1px solid #dfd7f2"
+        >
+          <div style="font-size: 20px; font-weight: bold; color: #1f2225ff">
+            添加组织
+          </div>
+        </div>
+      </template>
+
+      <div class="row justify-center fl-pa-md">
+        <div class="fl-my-lg font-20">
+          <n-input
+            v-model:value="state.dialogAddTreeData"
+            placeholder="请输入组织名称"
+          />
+        </div>
+        <div class="col-12 row justify-center">
+          <n-button
+            tertiary
+            style="width: 161px; background: #764cf6; color: #fff"
+            class="fl-mr-md"
+            @click="handleDialogAddTreeSave"
+            >保存</n-button
+          >
+          <n-button
+            tertiary
+            style="width: 161px; background: #eeeaf7; color: #774ff6"
+            @click="state.dialogAddTree = false"
+            >返回</n-button
+          >
+        </div>
+      </div>
+    </n-modal>
+    <n-modal
+      v-model:show="state.dialogSubtractionTree"
+      style="width: 600px"
+      :mask-closable="false"
+      preset="card"
+    >
+      <template #header>
+        <div
+          class="col-12 row justify-center relative"
+          style="border-bottom: 1px solid #dfd7f2"
+        >
+          <div style="font-size: 20px; font-weight: bold; color: #1f2225ff">
+            删除组织
+          </div>
+        </div>
+      </template>
+
+      <div class="row justify-center fl-pa-md">
+        <div class="font-20" style="margin: 115px 0">
+          是否确认删除该组织及其子组织（如有）？
+        </div>
+        <div class="col-12 row justify-center">
+          <n-button
+            tertiary
+            style="width: 161px; background: #764cf6; color: #fff"
+            class="fl-mr-md"
+            @click="handleDialogSubtractionTreeSave"
+            >确定</n-button
+          >
+          <n-button
+            tertiary
+            style="width: 161px; background: #eeeaf7; color: #774ff6"
+            @click="state.dialogSubtractionTree = false"
+            >返回</n-button
+          >
+        </div>
+      </div>
+    </n-modal>
+    <n-modal
+      v-model:show="state.dialogMoveTree"
+      style="width: 600px"
+      :mask-closable="false"
+      preset="card"
+    >
+      <template #header>
+        <div
+          class="col-12 row justify-center relative"
+          style="border-bottom: 1px solid #dfd7f2"
+        >
+          <div style="font-size: 20px; font-weight: bold; color: #1f2225ff">
+            移动
+          </div>
+        </div>
+      </template>
+
+      <div class="row justify-center fl-pa-md">
+        <div class="fl-my-lg font-20">
+          <div class="font-16 fl-mb-md">请选择部门节点</div>
+          <fln-form-item
+            type="select"
+            :val="null"
+            :fatherData="state.dialogData"
+            :config="{
+              placeholder: '选择归属组织',
+              config: {
+                optionConfig: {
+                  resDataField: 'list',
+                  url: '/department/v2/base/all/list',
+                  params: [
+                    {
+                      label: 'notDepartmentIds',
+                      field: 'key',
+                      type: 'Array',
+                    },
+                  ],
+                  labelField: 'name',
+                  valueField: 'ID',
+                },
+              },
+            }"
+            :clearable="true"
+            @triggerValChange="handleValChange"
+          />
+
+          <div class="font-14 fl-mt-sm" style="color: #ef0000">
+            确认后，所选部门及其所有子部门将统一归属于新选定的上级部门之下，且保持原有子部门层级关系不变。
+          </div>
+        </div>
+        <div class="col-12 row justify-center fl-mt-md">
+          <n-button
+            tertiary
+            style="width: 161px; background: #eeeaf7; color: #774ff6"
+            class="fl-mr-md"
+            @click="state.dialogMoveTree = false"
+            >取消</n-button
+          >
+          <n-button
+            tertiary
+            style="width: 161px; background: #764cf6; color: #fff"
+            @click="handleDialogMoveTreeSave"
+            >确定</n-button
+          >
+        </div>
+      </div>
+    </n-modal>
+  </div>
+</template>
+
+<script setup>
+// 组织管理
+import flnTable from "@/components/flnlayout/table/flntable.vue";
+import flTree from "./components/flnindex.vue";
+import {
+  ref,
+  reactive,
+  onBeforeMount,
+  defineProps,
+  defineEmits,
+  onMounted,
+  getCurrentInstance,
+  computed,
+} from "vue";
+import { Close as CloseIcon } from "@vicons/ionicons5";
+import { Local } from "@/utils/storage.js";
+import {
+  processError,
+  processSuccess,
+  processWarning,
+} from "@/utils/helper/message";
+import { useRouter } from "vue-router";
+import flnFormItem from "@/components/flnlayout/form/flnformItem.vue";
+
+const router = useRouter();
+const currentInstance = getCurrentInstance();
+const { $request } = currentInstance.appContext.config.globalProperties;
+const app = document.getElementById("app");
+const state = reactive({
+  dialogData: {},
+  dialogMoveTree: false,
+  dialogMoveTreeData: null,
+  departmentOptions: [],
+  dialogAddTree: false,
+  dialogAddTreeData: "",
+  dialogSubtractionTree: false,
+  treeSelectData: {},
+  clickKey: "",
+  treeRefreshCount: 0,
+  expandedKeys: [],
+  treeData: [],
+
+  btnLoading: false,
+  selectedRows: [],
+  tableConfig: {
+    requestbysf: true,
+    rowKey: "ID",
+    refreshCount: 0,
+    listUrl: {
+      resDataField: "data",
+      pageField: "page",
+      pageSizeField: "pageSize",
+      url: "user/v2/list",
+      params: [
+        {
+          label: "departmentID",
+          field: "key",
+        },
+      ],
+    },
+  },
+});
+const props = defineProps({
+  orgVisible: {
+    type: Boolean,
+    default: false,
+  },
+  title: {
+    type: String,
+    require: true,
+  },
+});
+onBeforeMount(() => {
+  let treeSelectData = Local.get("orgmanage_treeSelectData");
+  if (treeSelectData) {
+    state.treeSelectData = treeSelectData;
+    state.clickKey = treeSelectData.key;
+  }
+  getTreeData();
+});
+onMounted(() => {});
+
+const getTreeData = () => {
+  let url = "/department/v2/tree/my";
+  let params = {};
+  $request.HTTP.components.postDataByParams(url, params).then(
+    (res) => {
+      if (res.status === 0 && Array.isArray(res.data.nodes)) {
+        let data = res.data.nodes;
+        calcTreeData(data);
+        state.treeData = data;
+        if (JSON.stringify(state.treeSelectData) === "{}") {
+          state.treeSelectData = data[0];
+          state.clickKey = data[0].key;
+        }
+
+        if (
+          state.clickKey === data[0].key &&
+          !state.expandedKeys.includes(data[0].key)
+        ) {
+          state.expandedKeys.push(data[0].key);
+        }
+        if (!state.expandedKeys.includes(state.clickKey)) {
+          state.expandedKeys.push(state.clickKey);
+        }
+        if (data.length === 1 && !state.expandedKeys.includes(data[0].key)) {
+          state.expandedKeys.push(data[0].key);
+        }
+        state.treeRefreshCount++;
+        state.tableConfig.refreshCount++;
+      } else {
+        processError(res.msg || "获取失败！");
+      }
+    },
+    () => {
+      processError("获取失败！");
+    },
+    () => {
+      processError("获取失败！");
+    }
+  );
+};
+
+const handleCreatePosi = () => {};
+const handleValChange = ({ val, config, selectOpt }) => {
+  state.dialogMoveTreeData = selectOpt;
+};
+const handleTreeAction = ({ type, val }) => {
+  state.dialogData = val;
+  if (type === "add") {
+    state.clickKey = val.key;
+    state.treeSelectData = val;
+    state.tableConfig.refreshCount++;
+    state.dialogAddTreeData = "";
+    state.dialogAddTree = true;
+  }
+  if (type === "move") {
+    state.clickKey = val.key;
+    state.treeSelectData = val;
+    state.tableConfig.refreshCount++;
+    state.dialogMoveTreeData = {};
+    state.dialogMoveTree = true;
+  }
+  if (type === "subtraction") {
+    state.dialogSubtractionTree = true;
+  }
+  if (type === "save") {
+    let url = "/department/v2/update";
+    let params = {
+      name: val.title,
+      ID: val.key,
+    };
+    $request.HTTP.components.postDataByParams(url, params).then(
+      (res) => {
+        if (res.status === 0) {
+          getTreeData();
+        } else {
+          processError(res.msg || "操作失败！");
+        }
+      },
+      () => {
+        processError("操作失败！");
+      },
+      () => {
+        processError("操作失败！");
+      }
+    );
+  }
+  if (type === "cancel") {
+    getTreeData();
+  }
+};
+const handleTreeClick = ({ selectedKey, tree }) => {
+  state.clickKey = tree.key;
+  state.treeSelectData = tree;
+  Local.set("orgmanage_treeSelectData", tree);
+  state.tableConfig.refreshCount++;
+};
+// const handleTreeDefaultClick = () => {
+//   state.treeSelectData = state.treeData[0];
+//   state.clickKey = state.treeData[0].key;
+//   Local.remove("orgmanage_treeSelectData");
+//   state.tableConfig.refreshCount++;
+// };
+const handleCloseModal = () => {
+  // emits("triggerCloseModal");
+};
+const handleDialogMoveTreeSave = () => {
+  let url = "/department/v2/update";
+  let params = {
+    ID: state.dialogData.key,
+    name: state.dialogData.label,
+    pid: state.dialogMoveTreeData.value,
+  };
+  $request.HTTP.components.postDataByParams(url, params).then(
+    (res) => {
+      if (res.status === 0) {
+        if (Array.isArray(res.data.levelPathList)) {
+          state.expandedKeys = [];
+          res.data.levelPathList.forEach((treeid) => {
+            if (!state.expandedKeys.includes(treeid)) {
+              state.expandedKeys.push(treeid);
+            }
+          });
+        }
+        getTreeData();
+        state.dialogMoveTree = false;
+        if (
+          (state.dialogMoveTreeData.level || 0) +
+            1(state.dialogData.sonMaxDepth || 0) +
+            1 >
+          8
+        ) {
+          processWarning("组织数已超过8级，建议不要再增加高度");
+        } else {
+          processSuccess("操作成功！");
+        }
+      } else {
+        processError(res.msg || "操作失败！");
+      }
+    },
+    () => {
+      processError("操作失败！");
+      state.dialogAddTree = false;
+    },
+    () => {
+      state.dialogAddTree = false;
+      processError("操作失败！");
+    }
+  );
+};
+// 树 新增
+const handleDialogAddTreeSave = () => {
+  let url = "/department/v2/create";
+  let params = {
+    name: state.dialogAddTreeData,
+    pid: state.dialogData.key,
+  };
+  $request.HTTP.components.postDataByParams(url, params).then(
+    (res) => {
+      if (res.status === 0) {
+        if (Array.isArray(res.data.levelPathList)) {
+          state.expandedKeys = [];
+          res.data.levelPathList.forEach((treeid) => {
+            if (!state.expandedKeys.includes(treeid)) {
+              state.expandedKeys.push(treeid);
+            }
+          });
+        }
+        getTreeData();
+        state.dialogAddTree = false;
+        if (state.dialogData.level > 7) {
+          processWarning("组织数已超过8级，建议不要再增加高度");
+        }
+      } else {
+        processError(res.msg || "操作失败！");
+      }
+    },
+    () => {
+      processError("操作失败！");
+      state.dialogAddTree = false;
+    },
+    () => {
+      state.dialogAddTree = false;
+      processError("操作失败！");
+    }
+  );
+};
+// 树 减
+const handleDialogSubtractionTreeSave = () => {
+  let url = "/department/v2/remove";
+  let params = {
+    ID: state.dialogData.key,
+  };
+  $request.HTTP.components.postDataByParams(url, params).then(
+    (res) => {
+      if (res.status === 0) {
+        getTreeData();
+        state.dialogSubtractionTree = false;
+      } else {
+        processError(res.msg || "操作失败！");
+      }
+    },
+    () => {
+      processError("操作失败！");
+      state.dialogSubtractionTree = false;
+    },
+    () => {
+      state.dialogSubtractionTree = false;
+      processError("操作失败！");
+    }
+  );
+};
+const calcTreeData = (data) => {
+  for (let item of data) {
+    item.key = item.ID;
+    item.label = item.name;
+    item.title = item.name;
+    if (item.sons) {
+      item.children = item.sons;
+      calcTreeData(item.children);
+    }
+    delete item.ID;
+    delete item.name;
+    delete item.sons;
+  }
+};
+const emit = defineEmits(["update:orgVisible", "orgHandleOk"]);
+const closeFn = () => {
+  emit("orgHandleOk");
+};
+
+watch(
+  () => props.orgVisible,
+  (val) => {
+    let treeSelectData = Local.get("orgmanage_treeSelectData");
+    if (treeSelectData) {
+      state.treeSelectData = treeSelectData;
+      state.clickKey = treeSelectData.key;
+    }
+    getTreeData();
+  }
+);
+</script>
+
+<style lang="scss" scoped>
+.org-dialog {
+  text-align: center;
+  .naive-modal-body {
+    height: 750px !important;
+  }
+}
+.item-box {
+  height: 50vh;
+  overflow: auto;
+  text-align: center;
+  padding-left: 100px;
+  padding-right: 100px;
+}
+.button-box {
+  width: 150px;
+  background-color: rgba(199, 199, 201, 1);
+  color: #fff;
+}
+
+.search-item {
+  :deep(.ant-input-affix-wrapper) {
+    background: #fff;
+    color: #c3c3c3;
+  }
+  :deep(.ant-input) {
+    color: #000;
+    &::placeholder {
+      color: #c3c3c3;
+    }
+  }
+  :deep(.ant-picker-input > input) {
+    color: #000;
+    &::placeholder {
+      color: #c3c3c3;
+    }
+  }
+  :deep(.ant-picker) {
+    width: 100%;
+    border-radius: 20px;
+    background: #fff !important;
+    color: #c3c3c3;
+    border: none;
+  }
+  :deep(.ant-picker-input > input) {
+    color: #000;
+    &::placeholder {
+      color: #c3c3c3;
+    }
+  }
+}
+</style>
diff --git a/src/views/manage/posimanage/permissionDialog.vue b/src/views/manage/posimanage/permissionDialog.vue
new file mode 100644
index 0000000..92d4608
--- /dev/null
+++ b/src/views/manage/posimanage/permissionDialog.vue
@@ -0,0 +1,311 @@
+<template>
+  <n-modal v-model:show="state.dialogModal" :mask-closable="false">
+    <n-card
+      style="width: 80vw"
+      :bordered="false"
+      role="dialog"
+      aria-modal="true"
+    >
+      <template #header>
+        <div class="col-12 row justify-center relative">
+          <div style="font-size: 20px; font-weight: bold; color: #1f2225ff">
+            权限列表
+          </div>
+        </div>
+      </template>
+      <template #header-extra>
+        <n-button @click="handleDialogBack" text style="font-size: 24px">
+          <n-icon>
+            <close-icon />
+          </n-icon>
+        </n-button>
+      </template>
+
+      <div class="row justify-center fl-px-md fl-pb-md">
+        <div class="col-12 overflow-auto" style="height: 60vh">
+          <fln-table
+            :config="state.tableConfig"
+            :refreshCount="state.tableConfig.refreshCount"
+            :defaultSelectedRows="state.selectedRows"
+            @triggerRowActions="handleRowActions"
+            @triggerSelectCheck="handleTableSelectCheck"
+          >
+            <template #table-header-box>
+              <div class="col-12 row fl-mb-sm justify-between">
+                <div class="row items-center">
+                  <n-button
+                    tertiary
+                    style="width: 161px; background: #eff3ff; color: #6b69a3"
+                    class="fl-mr-md"
+                    :disabled="state.selectedRows.length === 0"
+                    @click="handleQuickSelectPosi"
+                    >快速添加到岗位</n-button
+                  >
+                  <div v-if="state.selectedRows.length > 0">
+                    已选 {{ state.selectedRows.length }} 个
+                  </div>
+                </div>
+                <div>
+                  <n-button
+                    tertiary
+                    style="width: 161px; background: #9c9ad3; color: #ffffff"
+                    @click="handleCreatePermiss"
+                    >新增权限</n-button
+                  >
+                </div>
+              </div>
+            </template>
+          </fln-table>
+        </div>
+
+        <div class="col-12 row justify-center fl-mt-md">
+          <n-button
+            tertiary
+            style="width: 161px; background: #c7c7c9ff; color: #fff"
+            class="fl-mr-md"
+            @click="handleDialogBack"
+            >返回</n-button
+          >
+        </div>
+      </div>
+    </n-card>
+  </n-modal>
+  <Auth
+    v-if="state.showModal"
+    :title="state.modalAuth.title"
+    :data="state.modalAuth.data"
+    @triggerClose="handleCloseEditAuth"
+  />
+  <fl-permission-bind-posi
+    v-if="state.diallogPosi"
+    :fatherData="state.selectedRows"
+    @triggerClose="handleQuickSelectPosiClose"
+  />
+</template>
+<script setup>
+// 权限列表 管理
+import {
+  UpOutlined,
+  DownOutlined,
+  CloseCircleOutlined,
+  PlusOutlined,
+  DragOutlined,
+} from "@ant-design/icons-vue";
+import { Close as CloseIcon } from "@vicons/ionicons5";
+import flnFormItem from "@/components/flnlayout/form/flnformItem.vue";
+import flAboutApproval from "./aboutApproval.vue";
+import flPermissionBindPosi from "./permissionbindposi.vue";
+import draggable from "vuedraggable";
+import {
+  ref,
+  reactive,
+  onBeforeMount,
+  onMounted,
+  getCurrentInstance,
+  computed,
+  nextTick,
+} from "vue";
+import { processError, processSuccess } from "@/utils/helper/message";
+import { useRouter, useRoute } from "vue-router";
+const router = useRouter();
+const route = useRoute();
+const currentInstance = getCurrentInstance();
+const { $request } = currentInstance.appContext.config.globalProperties;
+import { ChevronDownOutline, ChevronUpOutline } from "@vicons/ionicons5";
+
+import flnTable from "@/components/flnlayout/table/flntable.vue";
+import Auth from "./editAuth.vue";
+const emits = defineEmits(["triggerClose"]);
+
+const state = reactive({
+  selectedRows: [],
+  btnLoading: false,
+  dialogModal: true,
+
+  tableConfig: {
+    tableScrollWitdh: 600,
+    rowKey: "ID",
+    hasSelection: true,
+    refreshCount: 0,
+    listUrl: {
+      resDataField: "data",
+      pageField: "page",
+      pageSizeField: "pageSize",
+      url: "/rule/list",
+    },
+    searchStyle: "padding-top:0px !important;",
+    searchConfig: [
+      {
+        type: "select",
+        label: "权限类型",
+        field: "Type",
+        class: "col-4",
+        placeholder: "",
+        config: {
+          options: [
+            {
+              value: "menu",
+              label: "菜单权限",
+            },
+            {
+              value: "button",
+              label: "按钮权限",
+            },
+            {
+              value: "interface",
+              label: "接口权限",
+            },
+          ],
+        },
+      },
+      {
+        type: "text",
+        label: "权限名称",
+        field: "Title",
+        class: "col-4",
+        placeholder: "",
+      },
+    ],
+    columns: [
+      {
+        title: "权限编号",
+        field: "ID",
+      },
+      {
+        type: "tooltip",
+        title: "权限名",
+        field: "Title",
+        maxWidth: "100%",
+      },
+      {
+        type: "select",
+        title: "权限类型",
+        field: "Type",
+        config: {
+          options: [
+            {
+              value: "menu",
+              label: "菜单权限",
+            },
+            {
+              value: "button",
+              label: "按钮权限",
+            },
+            {
+              value: "interface",
+              label: "接口权限",
+            },
+          ],
+        },
+      },
+      {
+        width: 200,
+        title: "操作",
+        fixed: "right",
+        actions: [
+          {
+            actionType: "act_edit",
+            type: "label",
+            label: "修改",
+            shape: "round",
+            class: "fl-mx-xs fl-mt-xs",
+          },
+          {
+            actionType: "act_del",
+            type: "label",
+            label: "删除",
+            shape: "round",
+            class: "fl-mx-xs fl-mt-xs",
+          },
+        ],
+      },
+    ],
+  },
+  showModal: false,
+  modalAuth: { title: "新增权限", data: null },
+  diallogPosi: false,
+});
+onBeforeMount(() => {
+  state.dialogModal = true;
+});
+
+onMounted(() => {});
+
+const handleDialogBack = () => {
+  state.dialogField = false;
+  emits("triggerClose");
+};
+
+const handleRowActions = ({ btnConfig, rowData }) => {
+  if (btnConfig.actionType === "act_edit") {
+    state.modalAuth = { title: "修改与删除-权限", data: { id: rowData.ID } };
+    state.showModal = true;
+  }
+  if (btnConfig.actionType === "act_del") {
+    $request.HTTP.permission
+      .ruleRemove({ ID: rowData.ID })
+      .then((res) => {
+        if (res.status == 0) {
+          processSuccess("删除成功");
+          state.tableConfig.refreshCount++;
+        } else {
+          processError(res.msg);
+        }
+      })
+      .catch((e) => {
+        processError(e.response?.data?.msg || "操作失败");
+      });
+  }
+};
+
+const handleTableSelectCheck = (data) => {
+  if (data && Array.isArray(data.selectedRow)) {
+    data.selectedRow = data.selectedRow.filter((item) => {
+      if (item) {
+        return item;
+      }
+    });
+  }
+  if (data.action === "check" || data.action === "checkAll") {
+    state.selectedRows = state.selectedRows.concat(data.selectedRow);
+    state.selectedRows = state.selectedRows.filter((item, index, arr) => {
+      return (
+        arr.findIndex((obj) => JSON.stringify(obj) === JSON.stringify(item)) ===
+        index
+      );
+    });
+  }
+  if (data.action === "uncheck") {
+    state.selectedRows = state.selectedRows.filter((item) => {
+      return item.ID !== data.selectedRow.ID;
+    });
+  }
+  if (data.action === "uncheckAll") {
+    state.selectedRows = state.selectedRows.filter((item) => {
+      return (
+        data.selectedRow.findIndex((obj) => {
+          return obj.ID === item.ID;
+        }) === -1
+      );
+    });
+  }
+};
+const handleCreatePermiss = () => {
+  state.modalAuth = { title: "新增权限", data: null };
+  state.showModal = true;
+};
+
+const handleQuickSelectPosi = () => {
+  state.diallogPosi = true;
+};
+const handleQuickSelectPosiClose = () => {
+  state.selectedRows = [];
+  state.diallogPosi = false;
+};
+const handleCloseEditAuth = (val) => {
+  state.showModal = false;
+  state.tableConfig.refreshCount++;
+};
+</script>
+
+<style lang="scss" scoped></style>
diff --git a/src/views/manage/posimanage/permissionbindposi.vue b/src/views/manage/posimanage/permissionbindposi.vue
new file mode 100644
index 0000000..219c73c
--- /dev/null
+++ b/src/views/manage/posimanage/permissionbindposi.vue
@@ -0,0 +1,308 @@
+<template>
+  <n-modal v-model:show="state.dialogModal" :mask-closable="false">
+    <n-card
+      style="width: 80vw"
+      :bordered="false"
+      size="huge"
+      role="dialog"
+      aria-modal="true"
+    >
+      <template #header>
+        <div
+          class="col-12 row justify-center relative"
+          style="border-bottom: 1px solid #dfd7f2"
+        >
+          <div style="font-size: 20px; font-weight: bold; color: #1f2225ff">
+            选择需要所选权限的岗位
+          </div>
+        </div>
+      </template>
+      <template #header-extra>
+        <n-button @click="handleDialogBack" text style="font-size: 24px">
+          <n-icon>
+            <close-icon />
+          </n-icon>
+        </n-button>
+      </template>
+
+      <div
+        class="row justify-center fl-pa-md overflow-auto"
+        style="max-height: 60vh"
+      >
+        <div
+          class="col-3 fl-pa-md row"
+          style="
+            background: #fff;
+            box-shadow: rgba(188, 188, 188, 0.18) 0px 3px 6px 1px;
+          "
+        >
+          <fl-tree
+            :data="state.treeData"
+            :expandedKeys="state.expandedKeys"
+            :refreshCount="state.treeRefreshCount"
+            :clickKey="state.clickKey"
+            @triggerTreeClick="handleTreeClick"
+          ></fl-tree>
+        </div>
+
+        <div class="col-9 fl-px-md">
+          <fln-table
+            :config="state.tableConfig"
+            :fatherData="state.treeSelectData"
+            :refreshCount="state.tableConfig.refreshCount"
+            :defaultSelectedRows="state.selectedRows"
+            @triggerRowActions="handleRowActions"
+            @triggerSelectCheck="handleTableSelectCheck"
+          >
+          </fln-table>
+        </div>
+      </div>
+      <div class="col-12 row justify-center fl-mt-md">
+        <n-button
+          tertiary
+          style="width: 161px; background: #c7c7c9ff; color: #fff"
+          class="fl-mr-md"
+          @click="handleDialogBack"
+          >上一步</n-button
+        >
+        <n-button
+          tertiary
+          style="width: 161px; background: #46299d; color: #fff"
+          class="fl-mr-md"
+          @click="handleDialogSave"
+          >保存</n-button
+        >
+      </div>
+    </n-card>
+  </n-modal>
+</template>
+
+<script setup>
+// 岗位
+import { NButton } from "naive-ui";
+import {
+  ref,
+  reactive,
+  onBeforeMount,
+  onMounted,
+  getCurrentInstance,
+  computed,
+  nextTick,
+} from "vue";
+import { processError, processSuccess } from "@/utils/helper/message";
+import { useRouter } from "vue-router";
+import login from "@/api/login";
+import flnTable from "@/components/flnlayout/table/flntable.vue";
+import flTree from "@/components/flnlayout/tree/flnindex.vue";
+import { Close as CloseIcon } from "@vicons/ionicons5";
+import { Local } from "@/utils/storage.js";
+const router = useRouter();
+const currentInstance = getCurrentInstance();
+const { $request } = currentInstance.appContext.config.globalProperties;
+const emits = defineEmits(["triggerClose"]);
+let props = defineProps({
+  fatherData: {
+    type: Array,
+  },
+});
+const state = reactive({
+  clickKey: "",
+  treeRefreshCount: 0,
+  expandedKeys: [],
+  treeData: [],
+  treeSelectData: {},
+  btnLoading: false,
+  selectedRows: [],
+  tableConfig: {
+    tableScrollWitdh: 600,
+    rowKey: "ID",
+    hasSelection: true,
+    refreshCount: 0,
+    listUrl: {
+      resDataField: "data",
+      pageField: "page",
+      pageSizeField: "pageSize",
+      url: "/position/v2/list",
+      params: [
+        {
+          label: "departmentID",
+          field: "key",
+        },
+      ],
+    },
+    columns: [
+      {
+        title: "岗位ID",
+        field: "ID",
+      },
+      {
+        width: 140,
+        title: "岗位名",
+        field: "name",
+        type: "sfBgColor",
+        bgConfig: {
+          bgColorField: "color",
+          color: "#fff",
+        },
+      },
+      {
+        width: 120,
+        type: "tooltip",
+        title: "岗位描述",
+        field: "remark",
+      },
+      {
+        width: 360,
+        title: "页面权限",
+        field: "menuAuths",
+        type: "tags",
+        tagConfig: {
+          showLength: 3,
+          bgColor: "#fff",
+          borderRadius: "14px",
+          style: "border-radius: 14px",
+        },
+      },
+      {
+        width: 140,
+        sorter: true,
+        title: "被关联人数",
+        field: "linkerNum",
+      },
+    ],
+  },
+  dialogModal: true,
+});
+onBeforeMount(() => {
+  state.dialogModal = true;
+  getTreeData();
+});
+onMounted(() => {});
+const getTreeData = () => {
+  let url = "/department/v2/tree/my";
+  let params = {};
+  $request.HTTP.components.postDataByParams(url, params).then(
+    (res) => {
+      if (res.status === 0 && Array.isArray(res.data.nodes)) {
+        let data = res.data.nodes;
+        calcTreeData(data);
+        state.treeData = data;
+        if (JSON.stringify(state.treeSelectData) === "{}") {
+          state.treeSelectData = data[0];
+          state.clickKey = data[0].key;
+        }
+        if (
+          state.clickKey === data[0].key &&
+          !state.expandedKeys.includes(data[0].key)
+        ) {
+          state.expandedKeys.push(data[0].key);
+        }
+        if (!state.expandedKeys.includes(state.clickKey)) {
+          state.expandedKeys.push(state.clickKey);
+        }
+        state.treeRefreshCount++;
+        state.tableConfig.refreshCount++;
+      } else {
+        processError(res.msg || "获取失败！");
+      }
+    },
+    () => {
+      processError("获取失败！");
+    },
+    () => {
+      processError("获取失败！");
+    }
+  );
+};
+const calcTreeData = (data) => {
+  for (let item of data) {
+    item.key = item.ID;
+    item.label = item.name;
+    item.title = item.name;
+    if (item.sons) {
+      item.children = item.sons;
+      calcTreeData(item.children);
+    }
+    delete item.ID;
+    delete item.name;
+    delete item.sons;
+  }
+};
+const handleTreeClick = ({ selectedKey, tree }) => {
+  state.clickKey = tree.key;
+  state.treeSelectData = tree;
+  state.tableConfig.refreshCount++;
+};
+
+const handleRowActions = ({ btnConfig, rowData }) => {
+  Local.set("posimanage_treeSelectData", state.treeSelectData);
+};
+
+const handleDialogSave = () => {
+  if (state.selectedRows.length > 50) {
+    return processError("最多选择50个岗位！");
+  }
+  state.btnLoading = true;
+  let url = "/position/v2/batch/bind/auth";
+  let params = {
+    ids: state.selectedRows.map((item) => item.ID),
+    ruleIds: props.fatherData.map((item) => item.ID),
+  };
+  $request.HTTP.components.postDataByParams(url, params).then(
+    (res) => {
+      state.btnLoading = false;
+      if (res.status === 0) {
+        state.tableConfig.refreshCount++;
+        processSuccess("操作成功！");
+        emits("triggerClose");
+      } else {
+        processError(res.msg || "操作失败！");
+      }
+    },
+    () => {
+      processError("操作失败！");
+    },
+    () => {
+      state.btnLoading = false;
+      processError("操作失败！");
+    }
+  );
+};
+const handleDialogBack = () => {
+  emits("triggerClose");
+};
+const handleTableSelectCheck = (data) => {
+  if (data && Array.isArray(data.selectedRow)) {
+    data.selectedRow = data.selectedRow.filter((item) => {
+      if (item) {
+        return item;
+      }
+    });
+  }
+  if (data.action === "check" || data.action === "checkAll") {
+    state.selectedRows = state.selectedRows.concat(data.selectedRow);
+    state.selectedRows = state.selectedRows.filter((item, index, arr) => {
+      return (
+        arr.findIndex((obj) => JSON.stringify(obj) === JSON.stringify(item)) ===
+        index
+      );
+    });
+  }
+  if (data.action === "uncheck") {
+    state.selectedRows = state.selectedRows.filter((item) => {
+      return item.ID !== data.selectedRow.ID;
+    });
+  }
+  if (data.action === "uncheckAll") {
+    state.selectedRows = state.selectedRows.filter((item) => {
+      return (
+        data.selectedRow.findIndex((obj) => {
+          return obj.ID === item.ID;
+        }) === -1
+      );
+    });
+  }
+};
+</script>
+
+<style lang="scss" scoped></style>
diff --git a/src/views/manage/posirecordlog/index.vue b/src/views/manage/posirecordlog/index.vue
new file mode 100644
index 0000000..dd37933
--- /dev/null
+++ b/src/views/manage/posirecordlog/index.vue
@@ -0,0 +1,149 @@
+<template>
+  <div class="row"
+       style="padding: 35px">
+    <div class="col-12 row">
+      <fln-table :config="state.tableConfig"
+                 :refreshCount="state.tableConfig.refreshCount">
+        <template #search-header>
+          <div class="col-12 row font-18"
+               style="color: #764cf6; border-bottom: 1px solid #c1b2e5;">
+            <div class="fl-py-sm"
+                 style="border-bottom: 4px solid #764cf6;">
+              岗位操作记录
+            </div>
+          </div>
+        </template>
+      </fln-table>
+    </div>
+  </div>
+</template>
+
+<script setup>
+// 岗位
+import { NButton } from "naive-ui";
+import {
+  ref,
+  reactive,
+  onBeforeMount,
+  onMounted,
+  getCurrentInstance,
+  computed,
+} from "vue";
+import { processError, processSuccess } from "@/utils/helper/message";
+import { useRouter } from "vue-router";
+import flnTable from "@/components/flnlayout/table/flntable.vue";
+
+const currentInstance = getCurrentInstance();
+const { $request } = currentInstance.appContext.config.globalProperties;
+const title = ref("");
+const state = reactive({
+  btnLoading: false,
+  selectedRows: [],
+  tableConfig: {
+    tableScrollWitdh: 600,
+    rowKey: "ID",
+    refreshCount: 0,
+    listUrl: {
+      resDataField: "list",
+      pageField: "page",
+      pageSizeField: "pageSize",
+      url: "/position/v2/log/list",
+    },
+    searchConfig: [
+      {
+        type: "select",
+        label: "操作类型",
+        field: "operateType",
+        options: [
+          {
+            label: "新增",
+            value: "add",
+          },
+          {
+            label: "修改",
+            value: "edit",
+          },
+          {
+            label: "删除",
+            value: "del",
+          },
+          {
+            label: "查看",
+            value: "detail",
+          },
+        ],
+      },
+      {
+        type: "text",
+        label: "操作人",
+        field: "operatorName",
+        placeholder: "",
+      },
+      {
+        type: "text",
+        label: "操作人账号",
+        field: "OperatorTel",
+        placeholder: "",
+      },
+      {
+        type: "rangdate",
+        label: "操作时间",
+        field: ["StartCreatedAt", "EndCreatedAt"],
+        placeholder: ["开始", "结束"],
+      },
+    ],
+    columns: [
+      {
+        type: 'select',
+        title: "操作类型",
+        field: "operateType",
+        config: {
+          options: [
+            {
+              label: "新增",
+              value: "add",
+            },
+            {
+              label: "修改",
+              value: "edit",
+            },
+            {
+              label: "删除",
+              value: "del",
+            },
+            {
+              label: "查看",
+              value: "detail",
+            },
+          ],
+        }
+      },
+      {
+        type: "tooltip",
+        title: "操作详情",
+        field: "info",
+      },
+      {
+        type: "tooltip",
+        title: "操作人",
+        field: "operatorName",
+      },
+      {
+        title: "操作人账号",
+        field: "OperatorTel",
+      },
+      {
+        title: "操作时间",
+        field: "createdAt",
+      },
+    ],
+  },
+});
+onBeforeMount(() => {
+});
+onMounted(() => { });
+
+</script>
+
+<style lang="scss" scoped>
+</style>