feat: 组织架构

src/router/modules/background.ts

@@ -0,0 +1,46 @@
+export default {
+  path: "/background",
+  meta: {
+    title: "管理后台",
+    rank: 6
+  },
+  children: [
+    {
+      path: "/background/framework",
+      name: "backgroundIndex",
+      meta: {
+        title: "组织架构"
+      },
+      children: [
+        {
+          path: "/background/framework/prosonDepartment",
+          name: "prosonDepartment",
+          meta: {
+            title: "人员与部门",
+            showParent: true
+          },
+          component: () =>
+            import("@/views/background/framework/prosonDepartment.vue")
+        },
+        {
+          path: "/background/framework/rolePower",
+          name: "rolePower",
+          meta: {
+            title: "角色与权限",
+            showParent: true
+          },
+          component: () => import("@/views/background/framework/rolePower.vue")
+        },
+        {
+          path: "/background/framework/users",
+          name: "users",
+          meta: {
+            title: "用户组",
+            showParent: true
+          },
+          component: () => import("@/views/background/framework/users.vue")
+        }
+      ]
+    }
+  ]
+} satisfies RouteConfigsTable;

src/router/modules/draw.ts

@@ -97,4 +97,4 @@ export default {
       ]
     }
   ]
-};
+} satisfies RouteConfigsTable;

src/router/modules/evaluate.ts

@@ -17,7 +17,7 @@ export default {
       },
       children: [
         {
-          path: "/evaluate/children/components/newAdd",
+          path: "/evaluate/children/change/components/newAdd",
           name: "evaluateNewAdd",
           component: () =>
             import("@/views/evaluate/children/change/components/newAdd.vue"),
@@ -76,4 +76,4 @@ export default {
       ]
     }
   ]
-};
+} satisfies RouteConfigsTable;

src/router/modules/index.ts

@@ -40,4 +40,4 @@ export default {
       ]
     }
   ]
-};
+} satisfies RouteConfigsTable;

src/router/modules/password.ts

@@ -32,4 +32,4 @@ export default {
       ]
     }
   ]
-};
+} satisfies RouteConfigsTable;

src/style/sidebar.scss

@@ -200,7 +200,8 @@
       color: black !important;
 
       i {
-        color: $menuText !important;
+        // color: $menuText !important;
+        color: black !important;
       }
     }
 
@@ -286,7 +287,8 @@
   /* vertical 菜单折叠 */
   .el-menu--vertical {
     .el-menu--popup {
-      background-color: $subMenuBg !important;
+      // background-color: $subMenuBg !important;
+      background-color: #022bbd !important;
 
       .el-menu-item {
         span {
@@ -385,7 +387,8 @@
     }
 
     .el-menu--popup {
-      background-color: $subMenuBg !important;
+      // background-color: $subMenuBg !important;
+      background-color: #022bbd !important;
 
       a > .is-active.submenu-title-noDropdown {
         border-bottom: none;
@@ -393,7 +396,9 @@
 
       .el-menu-item {
         color: $menuText;
-        background-color: $subMenuBg;
+
+        // background-color: $subMenuBg;
+        background-color: #022bbd;
 
         span {
           font-size: 14px;

src/views/background/framework/components/prosonEditDrawer.vue

@@ -0,0 +1,107 @@
+<script setup lang="ts">
+import { ref, reactive } from "vue";
+import { ElMessageBox } from "element-plus";
+import type { DrawerProps, FormItemProps, FormProps } from "element-plus";
+// const itemLabelPosition = ref<FormItemProps["labelPosition"]>("");
+const drawer = ref(false);
+const direction = ref<DrawerProps["direction"]>("rtl");
+const formLabelAlign = reactive({
+  name: "",
+  region: "",
+  type: ""
+});
+const handleClose = (done: () => void) => {
+  ElMessageBox.confirm("配置项未保存，确认关闭", {
+    type: "warning"
+  }).then(() => {
+    drawer.value = false;
+  });
+};
+function cancelClick() {
+  drawer.value = false;
+}
+function confirmClick() {
+  console.log(1111);
+}
+const open = row => {
+  drawer.value = true;
+};
+defineExpose({
+  open
+});
+const timer = ref("");
+</script>
+
+<template>
+  <div>
+    <el-drawer
+      v-model="drawer"
+      :direction="direction"
+      :before-close="handleClose"
+    >
+      <template #header>
+        <h4>指标详情</h4>
+      </template>
+      <template #default>
+        <div>
+          <el-form
+            label-position="top"
+            label-width="auto"
+            :model="formLabelAlign"
+          >
+            <el-form-item label="指标编号" label-position="top">
+              <el-input />
+            </el-form-item>
+            <el-form-item label="指标名称" label-position="top">
+              <el-input />
+            </el-form-item>
+            <el-form-item label="门诊收住院率" label-position="top">
+              <el-input />
+            </el-form-item>
+            <el-form-item label="指标分类" label-position="top">
+              <el-input />
+            </el-form-item>
+            <el-form-item label="指标定义" label-position="top">
+              <el-input />
+            </el-form-item>
+            <el-form-item label="指标口径" label-position="top">
+              <el-input />
+            </el-form-item>
+            <el-form-item label="SQL语句" label-position="top">
+              <el-input />
+            </el-form-item>
+            <el-form-item label="指标状态" label-position="top">
+              <el-input />
+            </el-form-item>
+            <el-form-item label="来源" label-position="top">
+              <el-input />
+            </el-form-item>
+            <el-form-item label="操作用户" label-position="top">
+              <el-input />
+            </el-form-item>
+            <el-form-item label="创建时间" label-position="top">
+              <el-date-picker
+                v-model="timer"
+                type="datetime"
+                placeholder="Select date and time"
+              />
+            </el-form-item>
+            <el-form-item label="更新时间" label-position="top">
+              <el-date-picker
+                v-model="timer"
+                type="datetime"
+                placeholder="Select date and time"
+              />
+            </el-form-item>
+          </el-form>
+        </div>
+      </template>
+      <template #footer>
+        <div>
+          <el-button @click="cancelClick">取消</el-button>
+          <el-button type="primary" @click="confirmClick">确认</el-button>
+        </div>
+      </template>
+    </el-drawer>
+  </div>
+</template>

src/views/background/framework/prosonDepartment.vue

@@ -0,0 +1,279 @@
+<script setup lang="ts">
+defineOptions({
+  // name 作为一种规范最好必须写上并且和路由的name保持一致
+  name: "prosonDepartment"
+});
+import { ref, reactive } from "vue";
+import { ElMessageBox, ElMessage } from "element-plus";
+const dialogVisibleAdd = ref(false);
+const handleNodeClick = data => {
+  console.log(data);
+};
+
+const data = [
+  {
+    label: "Level one 1",
+    children: [
+      {
+        label: "Level two 1-1",
+        children: [
+          {
+            label: "Level three 1-1-1"
+          }
+        ]
+      }
+    ]
+  },
+  {
+    label: "Level one 2",
+    children: [
+      {
+        label: "Level two 2-1",
+        children: [
+          {
+            label: "Level three 2-1-1"
+          }
+        ]
+      },
+      {
+        label: "Level two 2-2",
+        children: [
+          {
+            label: "Level three 2-2-1"
+          }
+        ]
+      }
+    ]
+  },
+  {
+    label: "Level one 3",
+    children: [
+      {
+        label: "Level two 3-1",
+        children: [
+          {
+            label: "Level three 3-1-1"
+          }
+        ]
+      },
+      {
+        label: "Level two 3-2",
+        children: [
+          {
+            label: "Level three 3-2-1"
+          }
+        ]
+      }
+    ]
+  }
+];
+
+const defaultProps = {
+  children: "children",
+  label: "label"
+};
+const tableData = [
+  {
+    date: "2016-05-03",
+    name: "Tom",
+    address: "No. 189, Grove St, Los Angeles"
+  },
+  {
+    date: "2016-05-02",
+    name: "Tom",
+    address: "No. 189, Grove St, Los Angeles"
+  },
+  {
+    date: "2016-05-04",
+    name: "Tom",
+    address: "No. 189, Grove St, Los Angeles"
+  },
+  {
+    date: "2016-05-01",
+    name: "Tom",
+    address: "No. 189, Grove St, Los Angeles"
+  }
+];
+// 添加部门弹窗
+const addDepartment = () => {
+  dialogVisibleAdd.value = !dialogVisibleAdd.value;
+};
+const handleClose = () => {
+  ElMessageBox.confirm("确认关闭弹窗吗？")
+    .then(() => {
+      dialogVisibleAdd.value = !dialogVisibleAdd.value;
+      ElMessage({
+        message: "已关闭",
+        type: "success"
+      });
+    })
+    .catch(() => {
+      // catch error
+    });
+};
+// 添加部门保存
+const saveDepartment = () => {
+  dialogVisibleAdd.value = false;
+  ElMessage({
+    message: "添加成功",
+    type: "success"
+  });
+};
+const form = reactive({
+  name: "",
+  region: "",
+  date1: "",
+  date2: "",
+  delivery: false,
+  type: [],
+  resource: "",
+  desc: ""
+});
+const deleteRow = row => {
+  console.log(row);
+};
+</script>
+
+<template>
+  <div class="flex w-full h-full">
+    <div class="box-left">
+      <el-input placeholder="搜索" class="mb-2" />
+      <el-tree
+        class="m-2 mr-8"
+        style="max-width: 600px"
+        :data="data"
+        node-key="id"
+        default-expand-all
+        :expand-on-click-node="false"
+      >
+        <template #default="{ node }">
+          <span>{{ node.label }}</span>
+          <el-dropdown trigger="click">
+            <span>
+              <el-icon><Operation /></el-icon>
+            </span>
+            <template #dropdown>
+              <el-dropdown-menu class="setting">
+                <el-dropdown-item> 编辑部门 </el-dropdown-item>
+                <el-dropdown-item> 添加子部门 </el-dropdown-item>
+                <el-dropdown-item> 配置角色 </el-dropdown-item>
+                <el-dropdown-item>
+                  <el-link type="danger">删除</el-link>
+                </el-dropdown-item>
+              </el-dropdown-menu>
+            </template>
+          </el-dropdown>
+        </template>
+      </el-tree>
+      <el-button type="primary" plain @click="addDepartment"
+        >添加部门</el-button
+      >
+    </div>
+    <div class="box-right">
+      <div class="flex justify-between mb-3">
+        <el-input placeholder="搜索" class="mb-2" style="max-width: 300px" />
+        <el-button type="primary">添加成员</el-button>
+      </div>
+      <el-table :data="tableData" style="width: 100%">
+        <el-table-column prop="date" label="姓名" />
+        <el-table-column prop="name" label="工号" />
+        <el-table-column prop="address" label="性别" />
+        <el-table-column prop="address" label="年龄" />
+        <el-table-column prop="address" label="职称" />
+        <el-table-column prop="address" label="部门" />
+        <el-table-column label="操作">
+          <template #default="{ row }">
+            <el-dropdown trigger="click" class="mr-2">
+              <el-icon><View /></el-icon>
+            </el-dropdown>
+            <el-dropdown trigger="click">
+              <el-icon><Operation /></el-icon>
+              <template #dropdown>
+                <el-dropdown-menu class="setting">
+                  <el-dropdown-item>
+                    <el-link type="danger" @click="deleteRow(row)"
+                      >删除</el-link
+                    >
+                  </el-dropdown-item>
+                  <el-dropdown-item> 配置角色 </el-dropdown-item>
+                </el-dropdown-menu>
+              </template>
+            </el-dropdown>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+    <!-- 添加部门 -->
+    <el-dialog
+      v-model="dialogVisibleAdd"
+      title="新建部门"
+      width="500"
+      :before-close="handleClose"
+    >
+      <el-form :model="form" label-width="auto" style="max-width: 600px">
+        <el-form-item
+          prop="name"
+          label="部门名称"
+          :rules="[
+            {
+              required: true,
+              message: '请填写部门名称',
+              trigger: 'blur'
+            }
+          ]"
+        >
+          <el-input v-model="form.name" />
+        </el-form-item>
+        <el-form-item label="部门编号">
+          <el-input v-model="form.name" />
+        </el-form-item>
+        <el-form-item label="上级部门">
+          <el-select
+            v-model="form.region"
+            placeholder="please select your zone"
+          >
+            <el-option label="Zone one" value="shanghai" />
+            <el-option label="Zone two" value="beijing" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="部门负责人">
+          <el-select
+            v-model="form.region"
+            placeholder="please select your zone"
+          >
+            <el-option label="Zone one" value="shanghai" />
+            <el-option label="Zone two" value="beijing" />
+          </el-select>
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button @click="handleClose">取消</el-button>
+          <el-button type="primary" @click="saveDepartment"> 确认 </el-button>
+        </div>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+<style lang="scss" scoped>
+.box-left {
+  width: 25%;
+  // border: 1px solid red;
+  height: 100%;
+  padding: 10px 20px;
+  border-right: 1px solid #999;
+}
+
+.box-right {
+  width: 70%;
+  height: 100%;
+  padding: 10px 20px;
+}
+// ::v-deep .el-dropdown {
+//   line-height: 1;
+// }
+// ::v-deep .el-tree-node__expand-icon {
+//   line-height: 10px;
+//   border: 1px solid red;
+// }
+</style>

src/views/background/framework/rolePower.vue

@@ -0,0 +1,10 @@
+<script setup lang="ts">
+defineOptions({
+  // name 作为一种规范最好必须写上并且和路由的name保持一致
+  name: "rolePower"
+});
+</script>
+
+<template>
+  <h1>角色与权限</h1>
+</template>

src/views/background/framework/users.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+defineOptions({
+  name: "users"
+});
+</script>
+
+<template>
+  <h1>用户组</h1>
+</template>

src/views/background/index.vue

@@ -0,0 +1,10 @@
+<script setup lang="ts">
+defineOptions({
+  // name 作为一种规范最好必须写上并且和路由的name保持一致
+  name: "backgroundIndex"
+});
+</script>
+
+<template>
+  <h1>角色与权限</h1>
+</template>

src/views/evaluate/children/change/components/editMould.vue

@@ -0,0 +1,110 @@
+<script setup lang="ts">
+import { ref, reactive } from "vue";
+import { ElMessageBox } from "element-plus";
+import type { DrawerProps, FormItemProps, FormProps } from "element-plus";
+// const itemLabelPosition = ref<FormItemProps["labelPosition"]>("");
+const drawer = ref(false);
+const direction = ref<DrawerProps["direction"]>("rtl");
+const formLabelAlign = reactive({
+  name: "",
+  region: "",
+  type: ""
+});
+const handleClose = (done: () => void) => {
+  ElMessageBox.confirm("配置项未保存，确认关闭", {
+    type: "warning"
+  }).then(() => {
+    drawer.value = false;
+  });
+};
+function cancelClick() {
+  drawer.value = false;
+}
+function confirmClick() {
+  console.log(1111);
+}
+const open = row => {
+  drawer.value = true;
+};
+defineExpose({
+  open
+});
+const radio1 = ref("1");
+</script>
+
+<template>
+  <div>
+    <el-drawer
+      v-model="drawer"
+      :direction="direction"
+      :before-close="handleClose"
+    >
+      <template #header>
+        <h4>指标详情</h4>
+      </template>
+      <template #default>
+        <div>
+          <el-form
+            label-position="top"
+            label-width="auto"
+            :model="formLabelAlign"
+          >
+            <el-form-item label="维度名称" label-position="top">
+              <el-input />
+            </el-form-item>
+            <el-form-item label="维度权重" label-position="top">
+              <el-switch class="mr-4" />
+              <el-input style="max-width: 150px">
+                <template #append>%</template>
+              </el-input>
+            </el-form-item>
+            <el-form-item label="计算方式" label-position="top">
+              <el-radio-group v-model="radio1">
+                <el-radio value="1" size="large">加权</el-radio>
+                <el-radio value="2" size="large">加和</el-radio>
+              </el-radio-group>
+            </el-form-item>
+            <el-form-item label="指标显示字段设置" label-position="top">
+              <div>
+                <el-text type="info">指标说明</el-text>
+                <el-switch class="ml-2" />
+              </div>
+              <br />
+              <div>
+                <el-text type="info">评价标准</el-text>
+                <el-switch class="ml-2" />
+              </div>
+              <br />
+              <div>
+                <el-text type="info">数据来源</el-text>
+                <el-switch class="ml-2" />
+              </div>
+              <div>
+                <el-text type="info">目标值</el-text>
+                <el-switch class="ml-2" />
+              </div>
+              <div>
+                <el-text type="info">完成值</el-text>
+                <el-switch class="ml-2" />
+              </div>
+              <div>
+                <el-text type="info">挑战值</el-text>
+                <el-switch class="ml-2" />
+              </div>
+              <div>
+                <el-text type="info">门栏值</el-text>
+                <el-switch class="ml-2" />
+              </div>
+            </el-form-item>
+          </el-form>
+        </div>
+      </template>
+      <template #footer>
+        <div>
+          <el-button @click="cancelClick">取消</el-button>
+          <el-button type="primary" @click="confirmClick">确认</el-button>
+        </div>
+      </template>
+    </el-drawer>
+  </div>
+</template>

src/views/evaluate/children/change/components/newAdd.vue

@@ -4,8 +4,13 @@ defineOptions({
 });
 import { ref, reactive } from "vue";
 import { useRouter } from "vue-router";
+import { Edit } from "@element-plus/icons-vue";
+import { ElMessageBox, ElMessage } from "element-plus";
+import editMould from "./editMould.vue";
 const router = useRouter();
 const active = ref(0);
+const editDrawer = ref();
+const editDrawerShow = ref(false);
 const handleSelect = index => {
   // console.log(index);
   active.value = index;
@@ -81,10 +86,39 @@ const save = () => {
 const deleteRow = row => {
   console.log(row);
 };
+// 编辑
+const editPen = row => {
+  editDrawer.value.open();
+};
+// 删除考核维度
+const deletePen = row => {
+  ElMessageBox.confirm(
+    "该维度删除后不可恢复，请谨慎操作！",
+    "确定删除考核维度",
+    {
+      confirmButtonText: "确认",
+      cancelButtonText: "取消",
+      type: "warning"
+    }
+  )
+    .then(() => {
+      ElMessage({
+        type: "success",
+        message: "删除成功"
+      });
+    })
+    .catch(() => {
+      ElMessage({
+        type: "info",
+        message: "用户取消"
+      });
+    });
+};
 </script>
 
 <template>
   <div class="w-[100%]">
+    <editMould ref="editDrawer" v-model:drawerValue="editDrawerShow" />
     <div class="w-[100%] flex justify-evenly">
       <div class="left-box">
         <el-text class="cursor-pointer" @click="backChange"
@@ -92,7 +126,7 @@ const deleteRow = row => {
         >
       </div>
       <div class="center-box">
-        <el-menu
+        <!-- <el-menu
           default-active="1"
           class="el-menu-demo flex justify-evenly"
           mode="horizontal"
@@ -101,24 +135,25 @@ const deleteRow = row => {
           <el-menu-item index="1">基础信息</el-menu-item>
           <el-menu-item index="2">考核指标</el-menu-item>
           <el-menu-item index="3">考核流程</el-menu-item>
-        </el-menu>
-        <!-- <el-steps
+        </el-menu> -->
+        <el-steps
           style="max-width: 600px"
           :active="active"
           finish-status="success"
-          class="m-auto "
+          class="m-auto"
+          simple
         >
-          <el-step title="基础信息" />
-          <el-step title="考核指标" />
-          <el-step title="考核流程" />
-        </el-steps> -->
+          <el-step title="基础信息" :icon="Edit" />
+          <el-step title="考核指标" :icon="Edit" />
+          <!-- <el-step title="考核流程" :icon="Edit" /> -->
+        </el-steps>
       </div>
       <div class="right-box">
         <el-button type="primary" class="mr-2" @click="save">保存</el-button>
       </div>
     </div>
     <div class="mt-2">
-      <div v-if="active == 1" class="w-[40%] m-auto mt-10">
+      <div v-if="active == 0" class="w-[40%] m-auto mt-10">
         <el-form
           :model="tepNameForm"
           label-width="auto"
@@ -139,7 +174,7 @@ const deleteRow = row => {
           </el-form-item>
         </el-form>
       </div>
-      <div v-if="active == 2" class="w-[90%] m-auto mt-10">
+      <div v-if="active == 1" class="w-[90%] m-auto mt-4">
         <div class="relative h-10">
           <el-button class="float-right" type="primary" plain
             >创建考核维度</el-button
@@ -150,8 +185,10 @@ const deleteRow = row => {
             <div class="card-header">
               <span>工作量（30%）</span>
               <div class="float-right mr-7">
-                <el-icon class="mr-3"><EditPen /></el-icon>
-                <el-icon><Delete class="text-red-500" /></el-icon>
+                <el-icon class="mr-3" @click="editPen"><EditPen /></el-icon>
+                <el-icon @click="deletePen"
+                  ><Delete class="text-red-500"
+                /></el-icon>
               </div>
             </div>
           </template>
@@ -172,6 +209,10 @@ const deleteRow = row => {
               </template>
             </el-table-column>
           </el-table>
+          <template #footer>
+            <el-button type="primary" link class="mr-4"> 添加指标 </el-button>
+            <el-button type="primary" link> 导入指标 </el-button>
+          </template>
         </el-card>
       </div>
     </div>

src/views/evaluate/children/change/mould.vue

@@ -31,7 +31,7 @@ const tableData = [
   }
 ];
 const newAdd = () => {
-  router.push("/evaluate/children/components/newAdd");
+  router.push("/evaluate/children/change/components/newAdd");
 };
 </script>