1

src/api/module/home.ts

@@ -110,6 +110,60 @@ export const YearCreate= function(date: any) {
 export const YearInfo= function(date: any) {
     return Http.post('/api/backend/Year/getYearFind', date)
 }
+//科室列表
+export const userGroupData= function(date: any) {
+    return Http.post('/api/backend/User_group/getUserGroupData', date)
+}
+//科室列表(新增)
+export const userGroupDataAdd= function(date: any) {
+    return Http.post('/api/backend/User_group/create', date)
+}
+//科室列表(编辑)
+export const userGroupDataEdit= function(date: any) {
+    return Http.post('/api/backend/User_group/update', date)
+}
+//科室列表(删除)
+export const userGroupDataDel= function(date: any) {
+    return Http.post('/api/backend/User_group/delete', date)
+}
+
+
+
+//党支部列表
+export const partyGroupData= function(date: any) {
+    return Http.post('/api/backend/Party_group/getPartyGroupData', date)
+}
+//党支部列表(新增)
+export const partyGroupDataAdd= function(date: any) {
+    return Http.post('/api/backend/Party_group/create', date)
+}
+//党支部列表(编辑)
+export const partyGroupDataEdit= function(date: any) {
+    return Http.post('/api/backend/Party_group/update', date)
+}
+//党支部列表(删除)
+export const partyGroupDataDel= function(date: any) {
+    return Http.post('/api/backend/Party_group/delete', date)
+}
+
+//菜单列表
+export const menuData= function(date: any) {
+    return Http.post('/api/backend/auth_rule/getAuthRuleData', date)
+}
+//菜单列表(新增)
+export const menuDataAdd= function(date: any) {
+    return Http.post('/api/backend/auth_rule/create', date)
+}
+//菜单(编辑)
+export const menuDataEdit= function(date: any) {
+    return Http.post('/api/backend/auth_rule/update', date)
+}
+//菜单(删除)
+export const menuDataDel= function(date: any) {
+    return Http.post('/api/backend/auth_rule/delete', date)
+}
+
+
 
 
 

src/mockjs/user.ts

@@ -204,10 +204,20 @@ const menus = [
                 icon: "layui-icon-util",
                 title: "部门管理"
             },
+            {
+                id: "/system/party",
+                icon: "layui-icon-util",
+                title: "党支部管理"
+            },
             {
                 id: "/system/permission",
                 icon: "layui-icon-util",
                 title: "权限管理"
+            },
+            {
+                id: "/system/menu",
+                icon: "layui-icon-util",
+                title: "菜单管理"
             }
         ]
     },

src/router/module/base-routes.ts

@@ -41,11 +41,21 @@ export default [
         name: 'systemDepartment',
         component: () => import('../../views/system/department.vue'),
         meta: {title: '部门管理', requireAuth: true, affix: true, closable: true},
+      },{
+        path: '/system/party',
+        name: 'systemParty',
+        component: () => import('../../views/system/party.vue'),
+        meta: {title: '党支部管理', requireAuth: true, affix: true, closable: true},
       },{
         path: '/system/permission',
         name: 'systemPermission',
         component: () => import('../../views/system/permission.vue'),
         meta: {title: '权限管理', requireAuth: true, affix: true, closable: true},
+      },{
+        path: '/system/menu',
+        name: 'systemMenu',
+        component: () => import('../../views/system/menu.vue'),
+        meta: {title: '菜单管理', requireAuth: true, affix: true, closable: true},
       }
     ]
   },

src/views/month_evaluation/index.vue

@@ -104,7 +104,7 @@ const userStore = useUserStore()
 const active = ref(-1);
 const visible11 = ref(false);
 
-const page = ref({total: 100, limit: 10, current: 2});
+const page = ref({total: 1, limit: 10, current: 1});
 
 const dataSource = ref([]);
 

src/views/system/department.vue

@@ -1,694 +1,181 @@
 <template>
-  <lay-container fluid="true" class="organization-box">
+  <lay-container style="padding: 20px">
-    <div style="display: flex">
+    <lay-card>
-      <div :style="{ width: isFold ? `0px` : `300px` }" class="left-tree">
+      <div style="padding: 10px">
-        <!-- tree -->
+        <span style="font-size: 18px;vertical-align: center;margin-right: 20px">科室管理</span>
-        <div v-show="!isFold">
+        <lay-button type="primary" @click="openNew()" size="sm">新增科室</lay-button>
-          <lay-button type="normal" size="sm" @click="toAdd">
-            <lay-icon type="layui-icon-addition"></lay-icon>新建
-          </lay-button>
-          <lay-button type="warm" size="sm" @click="toEdit">
-            <lay-icon type="layui-icon-edit"></lay-icon>修改
-          </lay-button>
-          <lay-button type="danger" size="sm" @click="toDelete">
-            <lay-icon type="layui-icon-delete"></lay-icon>删除
-          </lay-button>
-        </div>
-
-        <lay-tree
-            v-show="!isFold"
-            style="margin-top: 10px"
-            :data="data"
-            v-model:selectedKey="selectedKey"
-            :showLine="showLine"
-            :expandKeys="[1, 3, 4]"
-            @node-click="handleClick"
-        >
-          <template #title="{ data }">
-            <span :class="selectedKey == data.id ? 'isChecked' : ''">
-              {{ data.title }} {{ data.id }}
-            </span>
-          </template>
-        </lay-tree>
-        <div class="isFold" @click="isFold = !isFold">
-          &nbsp;<lay-icon v-if="!isFold" class="layui-icon-left"></lay-icon>
-          <lay-icon v-else class="layui-icon-right"></lay-icon>
-        </div>
       </div>
-      <div style="flex: 1; padding: 10px; over-flow: auto">
+      <lay-table size="lg" ref="tableRef6" children-column-name="children" :columns="columns6"
-        <!-- table -->
+        :data-source="dataSource6">
-        <lay-card>
+        <template v-slot:status="{ data }">
-          <lay-form>
+          <span v-if="data.status == 1">启用</span>
-            <lay-row>
+          <span v-if="data.status == 0">禁用</span>
-              <lay-col :md="5">
+        </template>
-                <lay-form-item label="用户账号" label-width="80">
+        <template v-slot:operator="{ data }">
-                  <lay-input
+          <lay-space size="lg">
-                      v-model="searchQuery.userAccount"
+            <span style="color: #00A394;cursor: pointer" @click="addShowMsd(data, data.pid)">平级新增</span>
-                      placeholder="请输入"
+            <span style="color: #00A394;cursor: pointer"
-                      size="sm"
+              @click="addShowMsd(data, data.id)">子级新增</span>
-                      :allow-clear="true"
+            <span style="color: #00A394;cursor: pointer" @click="editShowMsd(data)">编辑</span>
-                      style="width: 98%"
+            <lay-popconfirm trigger="click" content="确定要删除吗？" @confirm="delShowMsd(data)">
-                  ></lay-input>
+              <span style="color: #00A394;cursor: pointer">删除</span>
-                </lay-form-item>
-              </lay-col>
-              <lay-col :md="5">
-                <lay-form-item label="用户名" label-width="80">
-                  <lay-input
-                      v-model="searchQuery.userName"
-                      placeholder="请输入"
-                      size="sm"
-                      :allow-clear="true"
-                      style="width: 98%"
-                  ></lay-input>
-                </lay-form-item>
-              </lay-col>
-              <lay-col :md="5">
-                <lay-form-item label="性别" label-width="80">
-                  <lay-select
-                      class="search-input"
-                      size="sm"
-                      v-model="searchQuery.sex"
-                      :allow-clear="true"
-                      placeholder="请选择"
-                  >
-                    <lay-select-option
-                        value="man"
-                        label="男"
-                    ></lay-select-option>
-                    <lay-select-option
-                        value="woman"
-                        label="女"
-                    ></lay-select-option>
-                  </lay-select>
-                </lay-form-item>
-              </lay-col>
-              <lay-col :md="5">
-                <lay-form-item label-width="20">
-                  <lay-button
-                      style="margin-left: 20px"
-                      type="normal"
-                      size="sm"
-                      @click="toSearch"
-                  >
-                    查询
-                  </lay-button>
-                  <lay-button size="sm" @click="toReset"> 重置 </lay-button>
-                </lay-form-item>
-              </lay-col>
-            </lay-row>
-          </lay-form>
-        </lay-card>
-        <lay-table
-            :page="page"
-            :height="'100%'"
-            :columns="columns"
-            :loading="loading"
-            :default-toolbar="true"
-            :data-source="dataSource"
-            v-model:selected-keys="selectedKeys"
-            @change="change"
-            @sortChange="sortChange"
-        >
-          <template #status="{ row }">
-            <lay-switch
-                :model-value="row.status"
-                @change="changeStatus($event, row)"
-            ></lay-switch>
-          </template>
-          <template #role="{ row }">
-            <lay-tag color="#165DFF" variant="light">{{ row.role }}</lay-tag>
-          </template>
-
-          <template v-slot:toolbar>
-            <lay-button
-                size="sm"
-                type="primary"
-                @click="changeVisible11('新增', null)"
-            >新增</lay-button
-            >
-            <lay-button size="sm" @click="toRemove">删除</lay-button>
-          </template>
-          <template v-slot:operator="{ row }">
-            <lay-button
-                size="xs"
-                border="green"
-                border-style="dashed"
-                @click="changeVisible11('编辑', row)"
-            >编辑</lay-button
-            >
-            <lay-popconfirm
-                content="确定要删除此用户吗?"
-                @confirm="confirm"
-                @cancel="cancel"
-            >
-              <lay-button size="xs" border="red" border-style="dashed"
-              >删除</lay-button
-              >
             </lay-popconfirm>
-          </template>
+          </lay-space>
-        </lay-table>
+        </template>
-      </div>
+      </lay-table>
-    </div>
+    </lay-card>
-    <lay-layer v-model="visible11" :title="title" :area="['500px', '450px']">
+    <lay-layer v-model="addShow" :title="addIsEdit == 1 ? '新增科室' : '编辑科室'" :type="4" :shade="true"
-      <div style="padding: 20px">
+      :area="['950px', '100%']" :btn="addButton">
-        <lay-form :model="model11" ref="layFormRef11" required>
+      <lay-container fluid="true" style="padding: 20px">
-          <lay-form-item label="用户账号" prop="account">
+        <lay-form :model="addData">
-            <lay-input v-model="model11.account"></lay-input>
+          <lay-form-item required label="科室名称" prop="name">
+            <lay-input v-model="addData.name" placeholder="请输入科室名称"></lay-input>
           </lay-form-item>
-          <lay-form-item label="用户名" prop="name">
+          <lay-form-item required label="科室描述" prop="describe">
-            <lay-input v-model="model11.name"></lay-input>
+            <lay-textarea placeholder="请输入科室描述" v-model="addData.describe"></lay-textarea>
           </lay-form-item>
-          <lay-form-item label="性别" prop="sex">
+          <lay-form-item required label="状态" prop="status">
-            <lay-select v-model="model11.sex" style="width: 100%">
+            <lay-select v-model="addData.status" placeholder="请选择">
-              <lay-select-option value="男" label="男"></lay-select-option>
+              <lay-select-option :value="1" label="启用"></lay-select-option>
-              <lay-select-option value="女" label="女"></lay-select-option>
+              <lay-select-option :value="0" label="禁用"></lay-select-option>
             </lay-select>
           </lay-form-item>
-          <lay-form-item label="角色" prop="role">
-            <lay-input v-model="model11.role"></lay-input>
-          </lay-form-item>
-          <lay-form-item label="状态" prop="status">
-            <lay-switch :model-value="model11.status"></lay-switch>
-          </lay-form-item>
         </lay-form>
-        <div style="width: 100%; text-align: center">
+      </lay-container>
-          <lay-button size="sm" type="primary" @click="toSubmit"
-          >保存</lay-button
-          >
-          <lay-button size="sm" @click="toCancel">取消</lay-button>
-        </div>
-      </div>
-    </lay-layer>
-
-    <lay-layer v-model="visible22" :title="title22" :area="['700px', '400px']">
-      <div style="padding: 20px">
-        <lay-form :model="model22" ref="layFormRef11" required>
-          <lay-row>
-            <lay-col md="12">
-              <lay-form-item label="上级机构" prop="organization">
-                <lay-select v-model="model22.organization" style="width: 100%">
-                  <lay-select-option value="1" label="研发部">
-                  </lay-select-option>
-                  <lay-select-option value="2" label="测试部">
-                  </lay-select-option>
-                  <lay-select-option value="3" label="设计部">
-                  </lay-select-option>
-                  <lay-select-option value="4" label="市场部">
-                  </lay-select-option>
-                  <lay-select-option value="5" label="运维部">
-                  </lay-select-option>
-                </lay-select>
-              </lay-form-item>
-              <lay-form-item label="机构名称" prop="name">
-                <lay-input v-model="model22.name"></lay-input>
-              </lay-form-item>
-              <lay-form-item label="机构全称" prop="fullName">
-                <lay-input v-model="model22.fullName"></lay-input>
-              </lay-form-item>
-              <lay-form-item label="机构代码" prop="code">
-                <lay-input v-model="model22.code"></lay-input>
-              </lay-form-item>
-            </lay-col>
-            <lay-col md="12">
-              <lay-form-item label="机构类型" prop="type">
-                <lay-select v-model="model22.type" style="width: 100%">
-                  <lay-select-option value="1" label="公司"></lay-select-option>
-                  <lay-select-option value="2" label="子公司">
-                  </lay-select-option>
-                  <lay-select-option value="3" label="部门"></lay-select-option>
-                  <lay-select-option value="4" label="小组"></lay-select-option>
-                </lay-select>
-              </lay-form-item>
-              <lay-form-item label="排序号" prop="sort">
-                <lay-input-number
-                    style="width: 100%"
-                    v-model="model22.sort"
-                    position="right"
-                ></lay-input-number>
-              </lay-form-item>
-              <lay-form-item label="备注" prop="remark">
-                <lay-textarea
-                    placeholder="请输入备注"
-                    v-model="model22.remark"
-                    :rows="4"
-                ></lay-textarea>
-              </lay-form-item>
-            </lay-col>
-          </lay-row>
-        </lay-form>
-        <div style="width: 100%; text-align: center">
-          <lay-button size="sm" type="primary" @click="toSubmit"
-          >保存</lay-button
-          >
-          <lay-button size="sm" @click="toCancel">取消</lay-button>
-        </div>
-      </div>
     </lay-layer>
   </lay-container>
 </template>
 <script setup lang="ts">
-import { ref, reactive } from 'vue'
+import {
-import { layer } from '@layui/layui-vue'
+  userGroupDataAdd, homeGetHierarchicalDataDelete,
-
+  userGroupData, userGroupDataEdit, userGroupDataDel
-const data = ref([
+} from '../../api/module/home'
-  {
+import { ref, watch, onMounted, reactive } from 'vue'
-    title: 'xxxx公司',
+import { layer } from '@layui/layer-vue'
-    id: 1,
+//列表内容
-    checked: true,
+const dataSource6 = ref([]);
-    children: [
+const addShow = ref(false)
-      {
+//1 add  2 edit
-        title: '研发部',
+const addIsEdit = ref(1)
-        id: 2,
+const addData = reactive({
-        children: [
+  name: '',
-          {
+  describe: '',
-            title: '研发一部',
+  status: 1,
-            id: 3
+  pid: 0,
-          },
-          {
-            title: '研发二部',
-            id: 4
-          },
-          {
-            title: '研发三部',
-            id: 5
-          }
-        ]
-      },
-      {
-        title: '测试部',
-        id: 6,
-        children: [
-          {
-            title: '测试一部',
-            id: 7,
-            disabled: true
-          },
-          {
-            title: '测试二部',
-            id: 8
-          }
-        ]
-      },
-      {
-        title: '设计部',
-        id: 9
-      },
-      {
-        title: '市场部',
-        id: 10
-      }
-    ]
-  }
-])
-const showLine = ref(false)
-const selectedKey = ref('')
-const selectedNode = ref({
-  id: 0,
-  title: ''
 })
-const isFold = ref(false)
+onMounted(() => {
-const searchQuery = ref({
+  getHierarchicalData()
-  userAccount: '',
-  userName: '',
-  sex: ''
 })
-function toReset() {
+const openNew = () => {
-  searchQuery.value = {
-    userAccount: '',
-    userName: '',
-    sex: ''
-  }
-}
-function handleClick(node: any) {
-  selectedNode.value = JSON.parse(JSON.stringify(node))
-  page.current = selectedNode.value.id
-  change(page)
-}
-function toAdd() {
-  visible22.value = true
-}
-function toEdit() {
-  model22.value = {
-    organization: '1',
-    name: '研发部',
-    fullName: 'xxxx公司-研发部',
-    code: '001',
-    type: '1',
-    sort: 1,
-    remark: '备注'
-  }
-  visible22.value = true
-}
-function toDelete() {
-  if (selectedKey.value == '') {
-    layer.msg('您未选择组织机构，请先选择要删除的组织机构', {
-      icon: 3,
-      time: 2000
-    })
-    return
-  }
-  layer.confirm(
-      '您将删除所选中的组织机构 [ ' + selectedNode.value.title + ' ] ？',
-      {
-        title: '提示',
-        btn: [
-          {
-            text: '确定',
-            callback: (id: any) => {
-              layer.msg('您已成功删除')
-              layer.close(id)
-            }
-          },
-          {
-            text: '取消',
-            callback: (id: any) => {
-              layer.msg('您已取消操作')
-              layer.close(id)
-            }
-          }
-        ]
-      }
-  )
-}
 
-function toSearch() {
+  addData.id = 0;
-  page.current = 1
+  addData.pid = 0;
-  change(page)
+  addIsEdit.value = 1;
+  addData.name = '';
+  addData.describe = '';
+  addData.status = 1;
+  addShow.value = true;
 }
-
+const getHierarchicalData = () => {
-const loading = ref(false)
+  userGroupData({}).then((res) => {
-const selectedKeys = ref()
+    console.log(res)
-const page = reactive({ current: 1, limit: 10, total: 100 })
+    if (res.code == 1) {
-const columns = ref([
+      dataSource6.value = res.data;
-  { title: '选项', width: '55px', type: 'checkbox', fixed: 'left' },
+    } else {
-  { title: '编号', width: '80px', key: 'id', fixed: 'left', sort: 'id' },
+      layer.msg(res.msg, { icon: 2 })
-  { title: '用户账号', width: '80px', key: 'account', sort: 'account' },
+    }
-  { title: '用户名', width: '80px', key: 'name', sort: 'name' },
+  })
-  { title: '性别', width: '80px', key: 'sex', sort: 'sex' },
+}
-  { title: '角色', width: '120px', key: 'role', customSlot: 'role' },
+const addShowMsd = (data, pid) => {
+  console.log(data);
+  addShow.value = true;
+  addData.id = 0;
+  addData.pid = pid;
+  addData.name = '';
+  addData.describe = '';
+  addData.status = 1;
+  addIsEdit.value = 1;
+}
+const editShowMsd = (data) => {
+  console.log(data);
+  addShow.value = true;
+  addData.id = data.id;
+  addData.name = data.name;
+  addData.pid = data.pid;
+  addData.status = parseInt(data.status);
+  addData.describe = data.describe;
+  addIsEdit.value = 2;
+}
+const delShowMsd = async (data) => {
+  var res = await userGroupDataDel({ id: data.id });
+  console.log(res)
+  if (res.code == 1) {
+    layer.msg('删除成功！', { icon: 1 })
+    getHierarchicalData();
+  } else {
+    layer.msg(res.msg, { icon: 2 })
+  }
+}
+const columns6 = [
   {
-    title: '创建时间',
+    title: "科室名称",
-    width: '120px',
+    width: "200px",
-    key: 'joinTime'
+    key: "name"
+  },
+  {
+    title: "科室描述",
+    width: "300px",
+    key: "describe"
+  },
+  {
+    title: "状态",
+    width: "100px",
+    customSlot: 'status',
+    key: "status"
   },
-  { title: '状态', width: '120px', key: 'status', sort: 'status' },
-
   {
     title: '操作',
-    width: '150px',
+    width: '180px',
     customSlot: 'operator',
     key: 'operator',
+    align: 'center',
     fixed: 'right'
   }
-])
+]
-const change = (page: any) => {
+const addButton = ref([
-  loading.value = true
-  setTimeout(() => {
-    dataSource.value = loadDataSource(page.current, page.limit)
-    loading.value = false
-  }, 1000)
-}
-const sortChange = (key: any, sort: number) => {
-  layer.msg(`字段${key} - 排序${sort}, 你可以利用 sort-change 实现服务端排序`)
-}
-const dataSource = ref([
   {
-    id: '1',
+    text: "确认",
-    name: '管理员',
+    callback: async () => {
-    sex: '男',
+      console.log(addData);
-    role: '管理员',
+      if (addData.name == '') {
-    account: 'admin',
+        layer.msg('科室名称不能为空！', { icon: 2 })
-    joinTime: '2022-02-09 18:34:56',
+        return;
-    status: true
-  },
-  {
-    id: '2',
-    name: '张三2',
-    sex: '男',
-    role: '普通用户',
-    account: '用户2',
-    joinTime: '2022-02-09 18:34:56',
-    status: true
-  },
-  {
-    id: '3',
-    name: '李四3',
-    sex: '男',
-    role: '普通用户',
-    account: '用户3',
-    joinTime: '2022-02-09 18:34:56',
-    status: true
-  },
-  {
-    id: '4',
-    name: '用户4',
-    sex: '男',
-    role: '普通用户',
-    account: '用户4',
-    joinTime: '2022-02-09 18:34:56',
-    status: true
-  },
-  {
-    id: '5',
-    name: '王五5',
-    sex: '男',
-    role: '普通用户',
-    account: '用户5',
-    joinTime: '2022-02-09 18:34:56',
-    status: true
-  },
-  {
-    id: '6',
-    name: '赵六6',
-    sex: '男',
-    role: '普通用户',
-    account: '用户6',
-    joinTime: '2022-02-09 18:34:56',
-    status: true
-  },
-  {
-    id: '7',
-    name: '黄齐7',
-    sex: '男',
-    role: '普通用户',
-    account: '用户7',
-    joinTime: '2022-02-09 18:34:56',
-    status: true
-  },
-  {
-    id: '8',
-    name: '用户8',
-    sex: '男',
-    role: '普通用户',
-    account: '用户8',
-    joinTime: '2022-02-09 18:34:56',
-    status: true
-  },
-  {
-    id: '9',
-    name: '游客9',
-    sex: '男',
-    role: '游客',
-    account: '游客9',
-    joinTime: '用户22-02-09 18:34:56',
-    status: true
-  },
-  {
-    id: '10',
-    name: '用户10',
-    sex: '女',
-    role: '普通用户',
-    account: 'user10',
-    joinTime: '2022-02-09 18:34:56 18:34:56',
-    status: true
-  }
-])
-const changeStatus = (isChecked: boolean, row: any) => {
-  dataSource.value.forEach((item) => {
-    if (item.id === row.id) {
-      layer.msg('Success', { icon: 1 }, () => {
-        item.status = isChecked
-      })
-    }
-  })
-}
-const remove = () => {
-  layer.msg(selectedKeys.value, { area: '50%' })
-}
-const loadDataSource = (page: number, pageSize: number) => {
-  var response = []
-  var startIndex = (page - 1) * pageSize + 1
-  var endIndex = page * pageSize
-  for (var i = startIndex; i <= endIndex; i++) {
-    response.push({
-      id: `${i}`,
-      account: `user${i}`,
-      sex: '男',
-      name: `用户${i}`,
-      joinTime: '2022-02-09 18:34:56',
-      role: '普通用户',
-      status: true
-    })
-  }
-  return response
-}
-const model11 = ref({
-  name: '',
-  role: '',
-  sex: '',
-  status: '',
-  account: ''
-})
-const layFormRef11 = ref()
-const visible11 = ref(false)
-const title = ref('新增')
-const changeVisible11 = (text: any, row: any) => {
-  title.value = text
-  if (row != null) {
-    let info = JSON.parse(JSON.stringify(row))
-    model11.value = info
-  } else {
-    model11.value = {
-      name: '',
-      role: '',
-      sex: '',
-      status: '',
-      account: ''
-    }
-  }
-  visible11.value = !visible11.value
-}
-const submit11 = function () {
-  layFormRef11.value.validate((isValidate: any, model: any, errors: any) => {
-    layer.open({
-      type: 1,
-      title: '表单提交结果',
-      content: `<div style="padding: 10px"><p>是否通过 : ${isValidate}</p> <p>表单数据 : ${JSON.stringify(
-          model
-      )} </p> <p>错误信息 : ${JSON.stringify(errors)}</p></div>`,
-      shade: false,
-      isHtmlFragment: true,
-      btn: [
-        {
-          text: '确认',
-          callback(index: any) {
-            layer.close(index)
-          }
-        }
-      ],
-      area: '500px'
-    })
-  })
-}
-// 清除校验
-const clearValidate11 = function () {
-  layFormRef11.value.clearValidate()
-}
-// 重置表单
-const reset11 = function () {
-  layFormRef11.value.reset()
-}
-function toRemove() {
-  if (selectedKeys.value.length == 0) {
-    layer.msg('您未选择数据，请先选择要删除的数据', { icon: 3, time: 2000 })
-    return
-  }
-  layer.confirm('您将删除所有选中的数据？', {
-    title: '提示',
-    btn: [
-      {
-        text: '确定',
-        callback: (id: any) => {
-          layer.msg('您已成功删除')
-          layer.close(id)
-        }
-      },
-      {
-        text: '取消',
-        callback: (id: any) => {
-          layer.msg('您已取消操作')
-          layer.close(id)
-        }
       }
-    ]
+      if (addData.describe == '') {
-  })
+        layer.msg('科室描述不能为空！', { icon: 2 })
-}
+        return;
-function toSubmit() {
+      }
-  layer.msg('保存成功！', { icon: 1, time: 1000 })
+      if (addIsEdit.value == 1) {
-  visible11.value = false
+        var res = await userGroupDataAdd(addData);
-  visible22.value = false
+      } else {
-}
+        var res = await userGroupDataEdit(addData);
-function toCancel() {
+      }
-  visible11.value = false
+      console.log(res)
-  visible22.value = false
+      if (res.code == 1) {
-}
+        layer.msg('提交成功！', { icon: 1 })
-function confirm() {
+        addShow.value = false;
-  layer.msg('您已成功删除')
+        getHierarchicalData();
-}
+      } else {
-function cancel() {
+        layer.msg(res.msg, { icon: 2 })
-  layer.msg('您已取消操作')
+      }
-}
+    }
-
+  },
-const model22 = ref({
+  {
-  organization: '',
+    text: "取消",
-  name: '',
+    callback: () => {
-  fullName: '',
+      addShow.value = false;
-  code: '',
+    }
-  type: '',
+  }
-  sort: 0,
+])
-  remark: ''
-})
-const layFormRef22 = ref()
-const visible22 = ref(false)
-const title22 = ref('新建')
 </script>
-
+<style scoped></style>
-<style scoped>
-.organization-box {
-  width: calc(100vw - 240px);
-  height: calc(100vh - 110px);
-  margin-top: 10px;
-  box-sizing: border-box;
-  background-color: #fff;
-  overflow: hidden;
-}
-.left-tree {
-  display: inline-block;
-  padding: 20px 15px 0 5px;
-  height: 1200px;
-  border-right: 1px solid #e6e6e6;
-  box-sizing: border-box;
-  position: relative;
-}
-/* todo layui-tree-entry 设置无效 */
-.layui-tree-entry {
-  position: relative;
-  padding: 10px 0;
-  height: 20px;
-  line-height: 20px;
-  white-space: nowrap;
-}
-.isFold {
-  position: absolute;
-  top: 36%;
-  right: -10px;
-  width: 26px;
-  height: 26px;
-  line-height: 26px;
-  border-radius: 13px;
-  background-color: #fff;
-  border: 1px solid #e6e6e6;
-  cursor: pointer;
-}
-.search-input {
-  display: inline-block;
-  width: 98%;
-  margin-right: 10px;
-}
-
-.isChecked {
-  display: inline-block;
-  background-color: #e8f1ff;
-  color: red;
-}
-</style>

src/views/system/index.vue

@@ -1,232 +1,695 @@
 <template>
-  <lay-container fluid="true" style="padding: 10px">
+  <lay-container fluid="true" class="organization-box">
-    <lay-row :space="10">
+    <div style="display: flex">
-      <lay-col :md="24">
+      <div :style="{ width: isFold ? `0px` : `300px` }" class="left-tree">
+        <!-- tree -->
+        <div v-show="!isFold">
+          <lay-button type="normal" size="sm" @click="toAdd">
+            <lay-icon type="layui-icon-addition"></lay-icon>新建
+          </lay-button>
+          <lay-button type="warm" size="sm" @click="toEdit">
+            <lay-icon type="layui-icon-edit"></lay-icon>修改
+          </lay-button>
+          <lay-button type="danger" size="sm" @click="toDelete">
+            <lay-icon type="layui-icon-delete"></lay-icon>删除
+          </lay-button>
+        </div>
+
+        <lay-tree
+            v-show="!isFold"
+            style="margin-top: 10px"
+            :data="data"
+            v-model:selectedKey="selectedKey"
+            :showLine="showLine"
+            :expandKeys="[1, 3, 4]"
+            @node-click="handleClick"
+        >
+          <template #title="{ data }">
+            <span :class="selectedKey == data.id ? 'isChecked' : ''">
+              {{ data.title }} {{ data.id }}
+            </span>
+          </template>
+        </lay-tree>
+        <div class="isFold" @click="isFold = !isFold">
+          &nbsp;<lay-icon v-if="!isFold" class="layui-icon-left"></lay-icon>
+          <lay-icon v-else class="layui-icon-right"></lay-icon>
+        </div>
+      </div>
+      <div style="flex: 1; padding: 10px; over-flow: auto">
+        <!-- table -->
         <lay-card>
-          <lay-form style="margin-top: 20px">
+          <lay-form>
             <lay-row>
-              <lay-col :md="6">
+              <lay-col :md="5">
-                <lay-form-item label="账号：" label-width="50">
+                <lay-form-item label="用户账号" label-width="80">
                   <lay-input
-                      v-model="searchAccount"
+                      v-model="searchQuery.userAccount"
-                      style="width: 90%"
+                      placeholder="请输入"
+                      size="sm"
+                      :allow-clear="true"
+                      style="width: 98%"
                   ></lay-input>
                 </lay-form-item>
               </lay-col>
-              <lay-col :md="6">
+              <lay-col :md="5">
-                <lay-form-item label="邮箱：" label-width="50">
+                <lay-form-item label="用户名" label-width="80">
                   <lay-input
-                      v-model="searchEmail"
+                      v-model="searchQuery.userName"
-                      style="width: 90%"
+                      placeholder="请输入"
+                      size="sm"
+                      :allow-clear="true"
+                      style="width: 98%"
                   ></lay-input>
                 </lay-form-item>
               </lay-col>
-              <lay-col :md="6">
+              <lay-col :md="5">
-                <lay-form-item label-width="0">
+                <lay-form-item label="性别" label-width="80">
-                  <lay-button type="primary" @click="toSearch">查询</lay-button>
+                  <lay-select
-                  <lay-button @click="toReset">重置</lay-button>
+                      class="search-input"
+                      size="sm"
+                      v-model="searchQuery.sex"
+                      :allow-clear="true"
+                      placeholder="请选择"
+                  >
+                    <lay-select-option
+                        value="man"
+                        label="男"
+                    ></lay-select-option>
+                    <lay-select-option
+                        value="woman"
+                        label="女"
+                    ></lay-select-option>
+                  </lay-select>
+                </lay-form-item>
+              </lay-col>
+              <lay-col :md="5">
+                <lay-form-item label-width="20">
+                  <lay-button
+                      style="margin-left: 20px"
+                      type="normal"
+                      size="sm"
+                      @click="toSearch"
+                  >
+                    查询
+                  </lay-button>
+                  <lay-button size="sm" @click="toReset"> 重置 </lay-button>
                 </lay-form-item>
               </lay-col>
             </lay-row>
           </lay-form>
         </lay-card>
-      </lay-col>
+        <lay-table
-      <lay-col :md="24">
+            :page="page"
-        <lay-card>
+            :height="'100%'"
-          <lay-table
+            :columns="columns"
-              :page="page"
+            :loading="loading"
-              :columns="columns"
+            :default-toolbar="true"
-              :dataSource="dataSource"
+            :data-source="dataSource"
-              :default-toolbar="defaultToolbar"
+            v-model:selected-keys="selectedKeys"
-              v-model:selectedKeys="selectedKeys"
+            @change="change"
-              @row="rowClick"
+            @sortChange="sortChange"
-              @change="change"
+        >
+          <template #status="{ row }">
+            <lay-switch
+                :model-value="row.status"
+                @change="changeStatus($event, row)"
+            ></lay-switch>
+          </template>
+          <template #role="{ row }">
+            <lay-tag color="#165DFF" variant="light">{{ row.role }}</lay-tag>
+          </template>
+
+          <template v-slot:toolbar>
+            <lay-button
+                size="sm"
+                type="primary"
+                @click="changeVisible11('新增', null)"
+            >新增</lay-button
+            >
+            <lay-button size="sm" @click="toRemove">删除</lay-button>
+          </template>
+          <template v-slot:operator="{ row }">
+            <lay-button
+                size="xs"
+                border="green"
+                border-style="dashed"
+                @click="changeVisible11('编辑', row)"
+            >编辑</lay-button
+            >
+            <lay-popconfirm
+                content="确定要删除此用户吗?"
+                @confirm="confirm"
+                @cancel="cancel"
+            >
+              <lay-button size="xs" border="red" border-style="dashed"
+              >删除</lay-button
+              >
+            </lay-popconfirm>
+          </template>
+        </lay-table>
+      </div>
+    </div>
+    <lay-layer v-model="visible11" :title="title" :area="['500px', '450px']">
+      <div style="padding: 20px">
+        <lay-form :model="model11" ref="layFormRef11" required>
+          <lay-form-item label="用户账号" prop="account">
+            <lay-input v-model="model11.account"></lay-input>
+          </lay-form-item>
+          <lay-form-item label="用户名" prop="name">
+            <lay-input v-model="model11.name"></lay-input>
+          </lay-form-item>
+          <lay-form-item label="性别" prop="sex">
+            <lay-select v-model="model11.sex" style="width: 100%">
+              <lay-select-option value="男" label="男"></lay-select-option>
+              <lay-select-option value="女" label="女"></lay-select-option>
+            </lay-select>
+          </lay-form-item>
+          <lay-form-item label="角色" prop="role">
+            <lay-input v-model="model11.role"></lay-input>
+          </lay-form-item>
+          <lay-form-item label="状态" prop="status">
+            <lay-switch :model-value="model11.status"></lay-switch>
+          </lay-form-item>
+        </lay-form>
+        <div style="width: 100%; text-align: center">
+          <lay-button size="sm" type="primary" @click="toSubmit"
+          >保存</lay-button
           >
-            <template v-slot:toolbar>
+          <lay-button size="sm" @click="toCancel">取消</lay-button>
-              <lay-button size="sm" type="primary">新增</lay-button>
+        </div>
-              <lay-button size="sm">删除</lay-button>
+      </div>
-            </template>
+    </lay-layer>
-            <template v-slot:username="{ data }">
+
-              {{ data.username }}
+    <lay-layer v-model="visible22" :title="title22" :area="['700px', '400px']">
-            </template>
+      <div style="padding: 20px">
-            <template v-slot:password="{ data }">
+        <lay-form :model="model22" ref="layFormRef11" required>
-              {{ data.password }}
+          <lay-row>
-            </template>
+            <lay-col md="12">
-            <template v-slot:operator="{}">
+              <lay-form-item label="上级机构" prop="organization">
-              <lay-button size="xs" type="primary">修改</lay-button>
+                <lay-select v-model="model22.organization" style="width: 100%">
-              <lay-button size="xs">删除</lay-button>
+                  <lay-select-option value="1" label="研发部">
-            </template>
+                  </lay-select-option>
-            <template v-slot:footer>
+                  <lay-select-option value="2" label="测试部">
-              {{ selectedKeys }}
+                  </lay-select-option>
-            </template>
+                  <lay-select-option value="3" label="设计部">
-          </lay-table>
+                  </lay-select-option>
-        </lay-card>
+                  <lay-select-option value="4" label="市场部">
-      </lay-col>
+                  </lay-select-option>
-    </lay-row>
+                  <lay-select-option value="5" label="运维部">
+                  </lay-select-option>
+                </lay-select>
+              </lay-form-item>
+              <lay-form-item label="机构名称" prop="name">
+                <lay-input v-model="model22.name"></lay-input>
+              </lay-form-item>
+              <lay-form-item label="机构全称" prop="fullName">
+                <lay-input v-model="model22.fullName"></lay-input>
+              </lay-form-item>
+              <lay-form-item label="机构代码" prop="code">
+                <lay-input v-model="model22.code"></lay-input>
+              </lay-form-item>
+            </lay-col>
+            <lay-col md="12">
+              <lay-form-item label="机构类型" prop="type">
+                <lay-select v-model="model22.type" style="width: 100%">
+                  <lay-select-option value="1" label="公司"></lay-select-option>
+                  <lay-select-option value="2" label="子公司">
+                  </lay-select-option>
+                  <lay-select-option value="3" label="部门"></lay-select-option>
+                  <lay-select-option value="4" label="小组"></lay-select-option>
+                </lay-select>
+              </lay-form-item>
+              <lay-form-item label="排序号" prop="sort">
+                <lay-input-number
+                    style="width: 100%"
+                    v-model="model22.sort"
+                    position="right"
+                ></lay-input-number>
+              </lay-form-item>
+              <lay-form-item label="备注" prop="remark">
+                <lay-textarea
+                    placeholder="请输入备注"
+                    v-model="model22.remark"
+                    :rows="4"
+                ></lay-textarea>
+              </lay-form-item>
+            </lay-col>
+          </lay-row>
+        </lay-form>
+        <div style="width: 100%; text-align: center">
+          <lay-button size="sm" type="primary" @click="toSubmit"
+          >保存</lay-button
+          >
+          <lay-button size="sm" @click="toCancel">取消</lay-button>
+        </div>
+      </div>
+    </lay-layer>
   </lay-container>
 </template>
+<script setup lang="ts">
+import { ref, reactive } from 'vue'
+import { layer } from '@layui/layui-vue'
 
-<script lang="ts">
+const data = ref([
-import { ref, watch } from 'vue'
+  {
-import { layer } from '@layui/layer-vue'
+    title: 'xxxx公司',
-
+    id: 1,
-export default {
+    checked: true,
-  setup() {
+    children: [
-    const selectedKeys = ref(['1'])
-    const checkbox = ref(true)
-    const defaultToolbar = ref(true)
-    const page = ref({ total: 100, limit: 10, current: 2 })
-
-    const columns = [
       {
-        title: '复选',
+        title: '研发部',
-        width: '50px',
+        id: 2,
-        type: 'checkbox',
+        children: [
-        fixed: 'left'
+          {
+            title: '研发一部',
+            id: 3
+          },
+          {
+            title: '研发二部',
+            id: 4
+          },
+          {
+            title: '研发三部',
+            id: 5
+          }
+        ]
       },
       {
-        title: '账户',
+        title: '测试部',
-        width: '200px',
+        id: 6,
-        customSlot: 'username',
+        children: [
-        key: 'username'
+          {
+            title: '测试一部',
+            id: 7,
+            disabled: true
+          },
+          {
+            title: '测试二部',
+            id: 8
+          }
+        ]
       },
       {
-        title: '密码',
+        title: '设计部',
-        width: '180px',
+        id: 9
-        customSlot: 'password',
-        key: 'password'
       },
       {
-        title: '年龄',
+        title: '市场部',
-        width: '180px',
+        id: 10
-        key: 'age'
-      },
-      {
-        title: '描述',
-        key: 'remark',
-        ellipsisTooltip: true
-      },
-      {
-        title: '操作',
-        width: '180px',
-        customSlot: 'operator',
-        key: 'operator',
-        fixed: 'right'
       }
     ]
-
+  }
-    const dataSource = [
+])
-      {
+const showLine = ref(false)
-        id: '1',
+const selectedKey = ref('')
-        username: 'shana',
+const selectedNode = ref({
-        password: '夏娜',
+  id: 0,
-        remark: '花开堪折直须折,莫待无花空折枝',
+  title: ''
-        age: '22'
+})
-      },
+const isFold = ref(false)
-      {
+const searchQuery = ref({
-        id: '2',
+  userAccount: '',
-        username: 'shana',
+  userName: '',
-        password: '夏娜',
+  sex: ''
-        remark: '花开堪折直须折,莫待无花空折枝',
+})
-        age: '22'
+function toReset() {
-      },
+  searchQuery.value = {
-      {
+    userAccount: '',
-        id: '3',
+    userName: '',
-        username: 'shana',
+    sex: ''
-        password: '夏娜',
-        remark: '花开堪折直须折,莫待无花空折枝',
-        age: '22'
-      },
-      {
-        id: '4',
-        username: 'shana',
-        password: '夏娜',
-        remark: '花开堪折直须折,莫待无花空折枝',
-        age: '22'
-      },
-      {
-        id: '5',
-        username: 'shana',
-        password: '夏娜',
-        remark: '花开堪折直须折,莫待无花空折枝',
-        age: '22'
-      },
-      {
-        id: '6',
-        username: 'shana',
-        password: '夏娜',
-        remark: '花开堪折直须折,莫待无花空折枝',
-        age: '22'
-      },
-      {
-        id: '7',
-        username: 'shana',
-        password: '夏娜',
-        remark: '花开堪折直须折,莫待无花空折枝',
-        age: '22'
-      },
-      {
-        id: '8',
-        username: 'shana',
-        password: '夏娜',
-        remark: '花开堪折直须折,莫待无花空折枝',
-        age: '22'
-      },
-      {
-        id: '9',
-        username: 'shana',
-        password: '夏娜',
-        remark: '花开堪折直须折,莫待无花空折枝',
-        age: '22'
-      },
-      {
-        id: '10',
-        username: 'shana',
-        password: '夏娜',
-        remark: '花开堪折直须折,莫待无花空折枝',
-        age: '22'
-      },
-      {
-        id: '11',
-        username: 'shana',
-        password: '夏娜',
-        remark: '花开堪折直须折,莫待无花空折枝',
-        age: '22'
-      }
-    ]
-
-    const rowClick = function (data: any) {}
-
-    const rowDoubleClick = function (data: any) {}
-
-    const change = function ({ current, limit }: any) {
-      layer.msg('current:' + current + ' limit:' + limit)
-    }
-    function toSearch() {
-      layer.load(2, { time: 3000 })
-    }
-    const searchAccount = ref('')
-    const searchEmail = ref('')
-    function toReset() {
-      searchAccount.value = ''
-      searchEmail.value = ''
-    }
-
-    return {
-      columns,
-      dataSource,
-      selectedKeys,
-      checkbox,
-      defaultToolbar,
-      page,
-      rowClick,
-      rowDoubleClick,
-      change,
-      toReset,
-      toSearch,
-      searchAccount,
-      searchEmail
-    }
   }
 }
+function handleClick(node: any) {
+  selectedNode.value = JSON.parse(JSON.stringify(node))
+  page.current = selectedNode.value.id
+  change(page)
+}
+function toAdd() {
+  visible22.value = true
+}
+function toEdit() {
+  model22.value = {
+    organization: '1',
+    name: '研发部',
+    fullName: 'xxxx公司-研发部',
+    code: '001',
+    type: '1',
+    sort: 1,
+    remark: '备注'
+  }
+  visible22.value = true
+}
+function toDelete() {
+  if (selectedKey.value == '') {
+    layer.msg('您未选择组织机构，请先选择要删除的组织机构', {
+      icon: 3,
+      time: 2000
+    })
+    return
+  }
+  layer.confirm(
+      '您将删除所选中的组织机构 [ ' + selectedNode.value.title + ' ] ？',
+      {
+        title: '提示',
+        btn: [
+          {
+            text: '确定',
+            callback: (id: any) => {
+              layer.msg('您已成功删除')
+              layer.close(id)
+            }
+          },
+          {
+            text: '取消',
+            callback: (id: any) => {
+              layer.msg('您已取消操作')
+              layer.close(id)
+            }
+          }
+        ]
+      }
+  )
+}
+
+function toSearch() {
+  page.current = 1
+  change(page)
+}
+
+const loading = ref(false)
+const selectedKeys = ref()
+const page = reactive({ current: 1, limit: 10, total: 100 })
+const columns = ref([
+  { title: '选项', width: '55px', type: 'checkbox', fixed: 'left' },
+  { title: '编号', width: '80px', key: 'id', fixed: 'left', sort: 'id' },
+  { title: '用户账号', width: '80px', key: 'account', sort: 'account' },
+  { title: '用户名', width: '80px', key: 'name', sort: 'name' },
+  { title: '性别', width: '80px', key: 'sex', sort: 'sex' },
+  { title: '角色', width: '120px', key: 'role', customSlot: 'role' },
+  {
+    title: '创建时间',
+    width: '120px',
+    key: 'joinTime'
+  },
+  { title: '状态', width: '120px', key: 'status', sort: 'status' },
+
+  {
+    title: '操作',
+    width: '150px',
+    customSlot: 'operator',
+    key: 'operator',
+    fixed: 'right'
+  }
+])
+const change = (page: any) => {
+  loading.value = true
+  setTimeout(() => {
+    dataSource.value = loadDataSource(page.current, page.limit)
+    loading.value = false
+  }, 1000)
+}
+const sortChange = (key: any, sort: number) => {
+  layer.msg(`字段${key} - 排序${sort}, 你可以利用 sort-change 实现服务端排序`)
+}
+const dataSource = ref([
+  {
+    id: '1',
+    name: '管理员',
+    sex: '男',
+    role: '管理员',
+    account: 'admin',
+    joinTime: '2022-02-09 18:34:56',
+    status: true
+  },
+  {
+    id: '2',
+    name: '张三2',
+    sex: '男',
+    role: '普通用户',
+    account: '用户2',
+    joinTime: '2022-02-09 18:34:56',
+    status: true
+  },
+  {
+    id: '3',
+    name: '李四3',
+    sex: '男',
+    role: '普通用户',
+    account: '用户3',
+    joinTime: '2022-02-09 18:34:56',
+    status: true
+  },
+  {
+    id: '4',
+    name: '用户4',
+    sex: '男',
+    role: '普通用户',
+    account: '用户4',
+    joinTime: '2022-02-09 18:34:56',
+    status: true
+  },
+  {
+    id: '5',
+    name: '王五5',
+    sex: '男',
+    role: '普通用户',
+    account: '用户5',
+    joinTime: '2022-02-09 18:34:56',
+    status: true
+  },
+  {
+    id: '6',
+    name: '赵六6',
+    sex: '男',
+    role: '普通用户',
+    account: '用户6',
+    joinTime: '2022-02-09 18:34:56',
+    status: true
+  },
+  {
+    id: '7',
+    name: '黄齐7',
+    sex: '男',
+    role: '普通用户',
+    account: '用户7',
+    joinTime: '2022-02-09 18:34:56',
+    status: true
+  },
+  {
+    id: '8',
+    name: '用户8',
+    sex: '男',
+    role: '普通用户',
+    account: '用户8',
+    joinTime: '2022-02-09 18:34:56',
+    status: true
+  },
+  {
+    id: '9',
+    name: '游客9',
+    sex: '男',
+    role: '游客',
+    account: '游客9',
+    joinTime: '用户22-02-09 18:34:56',
+    status: true
+  },
+  {
+    id: '10',
+    name: '用户10',
+    sex: '女',
+    role: '普通用户',
+    account: 'user10',
+    joinTime: '2022-02-09 18:34:56 18:34:56',
+    status: true
+  }
+])
+const changeStatus = (isChecked: boolean, row: any) => {
+  dataSource.value.forEach((item) => {
+    if (item.id === row.id) {
+      layer.msg('Success', { icon: 1 }, () => {
+        item.status = isChecked
+      })
+    }
+  })
+}
+const remove = () => {
+  layer.msg(selectedKeys.value, { area: '50%' })
+}
+const loadDataSource = (page: number, pageSize: number) => {
+  var response = []
+  var startIndex = (page - 1) * pageSize + 1
+  var endIndex = page * pageSize
+  for (var i = startIndex; i <= endIndex; i++) {
+    response.push({
+      id: `${i}`,
+      account: `user${i}`,
+      sex: '男',
+      name: `用户${i}`,
+      joinTime: '2022-02-09 18:34:56',
+      role: '普通用户',
+      status: true
+    })
+  }
+  return response
+}
+const model11 = ref({
+  name: '',
+  role: '',
+  sex: '',
+  status: '',
+  account: ''
+})
+const layFormRef11 = ref()
+const visible11 = ref(false)
+const title = ref('新增')
+const changeVisible11 = (text: any, row: any) => {
+  title.value = text
+  if (row != null) {
+    let info = JSON.parse(JSON.stringify(row))
+    model11.value = info
+  } else {
+    model11.value = {
+      name: '',
+      role: '',
+      sex: '',
+      status: '',
+      account: ''
+    }
+  }
+  visible11.value = !visible11.value
+}
+const submit11 = function () {
+  layFormRef11.value.validate((isValidate: any, model: any, errors: any) => {
+    layer.open({
+      type: 1,
+      title: '表单提交结果',
+      content: `<div style="padding: 10px"><p>是否通过 : ${isValidate}</p> <p>表单数据 : ${JSON.stringify(
+          model
+      )} </p> <p>错误信息 : ${JSON.stringify(errors)}</p></div>`,
+      shade: false,
+      isHtmlFragment: true,
+      btn: [
+        {
+          text: '确认',
+          callback(index: any) {
+            layer.close(index)
+          }
+        }
+      ],
+      area: '500px'
+    })
+  })
+}
+// 清除校验
+const clearValidate11 = function () {
+  layFormRef11.value.clearValidate()
+}
+// 重置表单
+const reset11 = function () {
+  layFormRef11.value.reset()
+}
+function toRemove() {
+  if (selectedKeys.value.length == 0) {
+    layer.msg('您未选择数据，请先选择要删除的数据', { icon: 3, time: 2000 })
+    return
+  }
+  layer.confirm('您将删除所有选中的数据？', {
+    title: '提示',
+    btn: [
+      {
+        text: '确定',
+        callback: (id: any) => {
+          layer.msg('您已成功删除')
+          layer.close(id)
+        }
+      },
+      {
+        text: '取消',
+        callback: (id: any) => {
+          layer.msg('您已取消操作')
+          layer.close(id)
+        }
+      }
+    ]
+  })
+}
+function toSubmit() {
+  layer.msg('保存成功！', { icon: 1, time: 1000 })
+  visible11.value = false
+  visible22.value = false
+}
+function toCancel() {
+  visible11.value = false
+  visible22.value = false
+}
+function confirm() {
+  layer.msg('您已成功删除')
+}
+function cancel() {
+  layer.msg('您已取消操作')
+}
+
+const model22 = ref({
+  organization: '',
+  name: '',
+  fullName: '',
+  code: '',
+  type: '',
+  sort: 0,
+  remark: ''
+})
+const layFormRef22 = ref()
+const visible22 = ref(false)
+const title22 = ref('新建')
 </script>
+
+<style scoped>
+.organization-box {
+  width: calc(100vw - 240px);
+  height: calc(100vh - 110px);
+  margin-top: 10px;
+  box-sizing: border-box;
+  background-color: #fff;
+  overflow: hidden;
+}
+.left-tree {
+  display: inline-block;
+  padding: 20px 15px 0 5px;
+  height: 1200px;
+  border-right: 1px solid #e6e6e6;
+  box-sizing: border-box;
+  position: relative;
+}
+/* todo layui-tree-entry 设置无效 */
+.layui-tree-entry {
+  position: relative;
+  padding: 10px 0;
+  height: 20px;
+  line-height: 20px;
+  white-space: nowrap;
+}
+.isFold {
+  position: absolute;
+  top: 36%;
+  right: -10px;
+  width: 26px;
+  height: 26px;
+  line-height: 26px;
+  border-radius: 13px;
+  background-color: #fff;
+  border: 1px solid #e6e6e6;
+  cursor: pointer;
+}
+.search-input {
+  display: inline-block;
+  width: 98%;
+  margin-right: 10px;
+}
+
+.isChecked {
+  display: inline-block;
+  background-color: #e8f1ff;
+  color: red;
+}
+</style>
+

src/views/system/menu.vue

@@ -0,0 +1,196 @@
+<template>
+  <lay-container style="padding: 20px">
+    <lay-card>
+      <div style="padding: 10px">
+        <span style="font-size: 18px;vertical-align: center;margin-right: 20px">菜单管理</span>
+        <lay-button type="primary" @click="openNew()" size="sm">新增菜单</lay-button>
+      </div>
+      <lay-table size="lg" ref="tableRef6" children-column-name="children" :columns="columns6"
+        :data-source="dataSource6">
+        <template v-slot:status="{ data }">
+          <span v-if="data.status == '1'">启用</span>
+          <span v-if="data.status == '0'">禁用</span>
+        </template>
+        <template v-slot:operator="{ data }">
+          <lay-space size="lg">
+             <span style="color: #00A394;cursor: pointer" v-if="data.pid==0"
+                   @click="addShowMsd(data, data.id)">子级新增</span>
+            <span style="color: #00A394;cursor: pointer" @click="editShowMsd(data)">编辑</span>
+            <lay-popconfirm trigger="click" content="确定要删除吗？" @confirm="delShowMsd(data)">
+              <span style="color: #00A394;cursor: pointer">删除</span>
+            </lay-popconfirm>
+          </lay-space>
+        </template>
+      </lay-table>
+    </lay-card>
+    <lay-layer v-model="addShow" :title="addIsEdit == 1 ? '新增菜单' : '编辑菜单'" :type="4" :shade="true"
+      :area="['950px', '100%']" :btn="addButton">
+      <lay-container fluid="true" style="padding: 20px">
+        <lay-form :model="addData">
+          <lay-form-item required label="菜单名称" prop="title">
+            <lay-input v-model="addData.title" placeholder="请输入菜单名称"></lay-input>
+          </lay-form-item>
+          <lay-form-item required label="菜单图标" prop="icon">
+            <lay-input v-model="addData.icon" placeholder="请输入菜单图标"></lay-input>
+          </lay-form-item>
+          <lay-form-item required label="菜单URL" prop="url">
+            <lay-input v-model="addData.url" placeholder="请输入菜单URL"></lay-input>
+          </lay-form-item>
+          <lay-form-item required label="状态" prop="status">
+            <lay-select v-model="addData.status" placeholder="请选择">
+              <lay-select-option :value="1" label="启用"></lay-select-option>
+              <lay-select-option :value="0" label="禁用"></lay-select-option>
+            </lay-select>
+          </lay-form-item>
+        </lay-form>
+      </lay-container>
+    </lay-layer>
+  </lay-container>
+</template>
+
+<script setup lang="ts">
+import {
+  menuDataAdd,
+  menuDataEdit,
+  menuDataDel,
+  menuData
+} from '../../api/module/home' // 确保 API 路径正确
+import { ref, watch, onMounted, reactive } from 'vue'
+import { layer } from '@layui/layer-vue'
+
+// 列表内容
+const dataSource6 = ref([]);
+const addShow = ref(false)
+// 1 add  2 edit
+const addIsEdit = ref(1)
+const addData = reactive({
+  title: '',
+  icon: '',
+  url: '',
+  status: 1,
+  pid: 0,
+})
+const addShowMsd = (data, pid) => {
+  console.log(data);
+  addShow.value = true;
+  addData.id = 0;
+  addData.pid = pid;
+  addData.title = '';
+  addData.icon = '';
+  addData.url = '';
+  addData.status = 1;
+  addIsEdit.value = 1;
+}
+const columns6 = [
+  {
+    title: "菜单名称",
+    width: "200px",
+    key: "title"
+  },
+  {
+    title: "菜单图标",
+    width: "100px",
+    key: "icon"
+  },
+  {
+    title: "菜单URL",
+    width: "300px",
+    key: "url"
+  },
+  {
+    title: "状态",
+    width: "100px",
+    customSlot: 'status',
+    key: "status"
+  },
+  {
+    title: '操作',
+    width: '180px',
+    customSlot: 'operator',
+    key: 'operator',
+    align: 'center',
+    fixed: 'right'
+  }
+]
+
+onMounted(() => {
+  getHierarchicalData()
+})
+
+const openNew = () => {
+  addData.id = 0;
+  addData.pid = 0;
+  addIsEdit.value = 1;
+  addData.title = '';
+  addData.icon = '';
+  addData.url = '';
+  addData.status = 1;
+  addShow.value = true;
+}
+
+const getHierarchicalData = () => {
+  menuData({}).then((res) => {
+    console.log(res)
+    if (res.code == 1) {
+      dataSource6.value = res.data;
+    } else {
+      layer.msg(res.msg, { icon: 2 })
+    }
+  })
+}
+
+const editShowMsd = (data) => {
+  console.log(data);
+  addShow.value = true;
+  addData.id = data.id;
+  addData.title = data.title;
+  addData.icon = data.icon;
+  addData.url = data.url;
+  addData.status = parseInt(data.status);
+  addIsEdit.value = 2;
+}
+
+const delShowMsd = async (data) => {
+  var res = await menuDataDel({ id: data.id });
+  console.log(res)
+  if (res.code == 1) {
+    layer.msg('删除成功！', { icon: 1 })
+    getHierarchicalData();
+  } else {
+    layer.msg(res.msg, { icon: 2 })
+  }
+}
+
+const addButton = ref([
+  {
+    text: "确认",
+    callback: async () => {
+      console.log(addData);
+      if (addData.title == '') {
+        layer.msg('菜单名称不能为空！', { icon: 2 })
+        return;
+      }
+      if (addIsEdit.value == 1) {
+        var res = await menuDataAdd(addData);
+      } else {
+        var res = await menuDataEdit(addData);
+      }
+      console.log(res)
+      if (res.code == 1) {
+        layer.msg('提交成功！', { icon: 1 })
+        addShow.value = false;
+        getHierarchicalData();
+      } else {
+        layer.msg(res.msg, { icon: 2 })
+      }
+    }
+  },
+  {
+    text: "取消",
+    callback: () => {
+      addShow.value = false;
+    }
+  }
+])
+</script>
+<style scoped></style>

src/views/system/party.vue

@@ -0,0 +1,180 @@
+<template>
+  <lay-container style="padding: 20px">
+    <lay-card>
+      <div style="padding: 10px">
+        <span style="font-size: 18px;vertical-align: center;margin-right: 20px">党支部管理</span>
+        <lay-button type="primary" @click="openNew()" size="sm">新增党支部</lay-button>
+      </div>
+      <lay-table size="lg" ref="tableRef6" children-column-name="children" :columns="columns6"
+        :data-source="dataSource6">
+        <template v-slot:status="{ data }">
+          <span v-if="data.status == 1">启用</span>
+          <span v-if="data.status == 0">禁用</span>
+        </template>
+        <template v-slot:operator="{ data }">
+          <lay-space size="lg">
+            <span style="color: #00A394;cursor: pointer" @click="addShowMsd(data, data.pid)">平级新增</span>
+            <span style="color: #00A394;cursor: pointer" @click="addShowMsd(data, data.id)">子级新增</span>
+            <span style="color: #00A394;cursor: pointer" @click="editShowMsd(data)">编辑</span>
+            <lay-popconfirm trigger="click" content="确定要删除吗？" @confirm="delShowMsd(data)">
+              <span style="color: #00A394;cursor: pointer">删除</span>
+            </lay-popconfirm>
+          </lay-space>
+        </template>
+      </lay-table>
+    </lay-card>
+    <lay-layer v-model="addShow" :title="addIsEdit == 1 ? '新增党支部' : '编辑党支部'" :type="4" :shade="true"
+      :area="['950px', '100%']" :btn="addButton">
+      <lay-container fluid="true" style="padding: 20px">
+        <lay-form :model="addData">
+          <lay-form-item required label="党支部名称" prop="name">
+            <lay-input v-model="addData.name" placeholder="请输入党支部名称"></lay-input>
+          </lay-form-item>
+          <lay-form-item required label="党支部描述" prop="describe">
+            <lay-textarea placeholder="请输入党支部描述" v-model="addData.describe"></lay-textarea>
+          </lay-form-item>
+          <lay-form-item required label="状态" prop="status">
+            <lay-select v-model="addData.status" placeholder="请选择">
+              <lay-select-option :value="1" label="启用"></lay-select-option>
+              <lay-select-option :value="0" label="禁用"></lay-select-option>
+            </lay-select>
+          </lay-form-item>
+        </lay-form>
+      </lay-container>
+    </lay-layer>
+  </lay-container>
+</template>
+<script setup lang="ts">
+import {
+  partyGroupDataAdd,
+  partyGroupData, partyGroupDataEdit, partyGroupDataDel
+} from '../../api/module/home'
+import { ref, watch, onMounted, reactive } from 'vue'
+import { layer } from '@layui/layer-vue'
+//列表内容
+const dataSource6 = ref([]);
+const addShow = ref(false)
+//1 add  2 edit
+const addIsEdit = ref(1)
+const addData = reactive({
+  name: '',
+  describe: '',
+  status: 1,
+  pid: 0,
+})
+onMounted(() => {
+  getHierarchicalData()
+})
+const openNew = () => {
+
+  addData.id = 0;
+  addData.pid = 0;
+  addIsEdit.value = 1;
+  addData.name = '';
+  addData.describe = '';
+  addData.status = 1;
+  addShow.value = true;
+}
+const getHierarchicalData = () => {
+  partyGroupData({}).then((res) => {
+    console.log(res)
+    if (res.code == 1) {
+      dataSource6.value = res.data;
+    } else {
+      layer.msg(res.msg, { icon: 2 })
+    }
+  })
+}
+const addShowMsd = (data, pid) => {
+  console.log(data);
+  addShow.value = true;
+  addData.id = 0;
+  addData.pid = pid;
+  addData.name = '';
+  addData.describe = '';
+  addData.status = 1;
+  addIsEdit.value = 1;
+}
+const editShowMsd = (data) => {
+  console.log(data);
+  addShow.value = true;
+  addData.id = data.id;
+  addData.name = data.name;
+  addData.pid = data.pid;
+  addData.status = parseInt(data.status);
+  addData.describe = data.describe;
+  addIsEdit.value = 2;
+}
+const delShowMsd = async (data) => {
+  var res = await partyGroupDataDel({ id: data.id });
+  console.log(res)
+  if (res.code == 1) {
+    layer.msg('删除成功！', { icon: 1 })
+    getHierarchicalData();
+  } else {
+    layer.msg(res.msg, { icon: 2 })
+  }
+}
+const columns6 = [
+  {
+    title: "党支部名称",
+    width: "200px",
+    key: "name"
+  },
+  {
+    title: "党支部描述",
+    width: "300px",
+    key: "describe"
+  },
+  {
+    title: "状态",
+    width: "100px",
+    customSlot: 'status',
+    key: "status"
+  },
+  {
+    title: '操作',
+    width: '180px',
+    customSlot: 'operator',
+    key: 'operator',
+    align: 'center',
+    fixed: 'right'
+  }
+]
+const addButton = ref([
+  {
+    text: "确认",
+    callback: async () => {
+      console.log(addData);
+      if (addData.name == '') {
+        layer.msg('党支部名称不能为空！', { icon: 2 })
+        return;
+      }
+      if (addData.describe == '') {
+        layer.msg('党支部描述不能为空！', { icon: 2 })
+        return;
+      }
+      if (addIsEdit.value == 1) {
+        var res = await partyGroupDataAdd(addData);
+      } else {
+        var res = await partyGroupDataEdit(addData);
+      }
+      console.log(res)
+      if (res.code == 1) {
+        layer.msg('提交成功！', { icon: 1 })
+        addShow.value = false;
+        getHierarchicalData();
+      } else {
+        layer.msg(res.msg, { icon: 2 })
+      }
+    }
+  },
+  {
+    text: "取消",
+    callback: () => {
+      addShow.value = false;
+    }
+  }
+])
+</script>
+<style scoped></style>