feat: 添加岗位管理页面demo

locales/en.yaml

@@ -24,6 +24,7 @@ menus:
   hssysManagement: System Manage
   hsBaseinfo: Base Info
   hsDict: Dict Manage
+  hsJob: Job Manage
   hseditor: Editor
   hserror: Error Page
   hsfourZeroFour: "404"

locales/zh-CN.yaml

@@ -24,6 +24,7 @@ menus:
   hssysManagement: 系统管理
   hsBaseinfo: 基础信息
   hsDict: 字典管理
+  hsJob: 岗位管理
   hseditor: 编辑器
   hserror: 错误页面
   hsfourZeroFour: "404"

mock/asyncRoutes.ts

@@ -28,6 +28,14 @@ const systemRouter = {
         i18n: true,
         keepAlive: true
       }
+    },
+    {
+      path: "/system/job/index",
+      name: "job",
+      meta: {
+        title: "menus.hsJob",
+        i18n: true
+      }
     }
   ]
 };

mock/system.ts

@@ -0,0 +1,55 @@
+import { MockMethod } from "vite-plugin-mock";
+
+export default [
+  {
+    url: "/system",
+    method: "post",
+    response: () => {
+      return {
+        code: 0,
+        data: {
+          list: [
+            {
+              name: "董事长",
+              code: "ceo",
+              sort: 1,
+              status: 0,
+              remark: "",
+              id: 1,
+              createTime: 1609837428000
+            },
+            {
+              name: "项目经理",
+              code: "se",
+              sort: 2,
+              status: 0,
+              remark: "",
+              id: 2,
+              createTime: 1609837428000
+            },
+            {
+              name: "人力资源",
+              code: "hr",
+              sort: 3,
+              status: 0,
+              remark: "",
+              id: 3,
+              createTime: 1609837428000
+            },
+            {
+              name: "普通员工",
+              code: "user",
+              sort: 4,
+              status: 0,
+              remark: "",
+              id: 4,
+              createTime: 1609837428000
+            }
+          ],
+          total: 4
+        },
+        msg: ""
+      };
+    }
+  }
+] as MockMethod[];

package.json

@@ -75,6 +75,7 @@
     "@iconify-icons/fa": "^1.2.2",
     "@iconify-icons/fa-solid": "^1.2.2",
     "@iconify-icons/ri": "^1.2.1",
+    "@iconify-icons/uil": "^1.2.1",
     "@iconify/vue": "^3.2.0",
     "@intlify/vite-plugin-vue-i18n": "^3.3.1",
     "@pureadmin/theme": "^0.0.1",

pnpm-lock.yaml

@@ -9,6 +9,7 @@ specifiers:
   "@iconify-icons/fa": ^1.2.2
   "@iconify-icons/fa-solid": ^1.2.2
   "@iconify-icons/ri": ^1.2.1
+  "@iconify-icons/uil": ^1.2.1
   "@iconify/vue": ^3.2.0
   "@intlify/vite-plugin-vue-i18n": ^3.3.1
   "@logicflow/core": 0.7.1
@@ -152,6 +153,7 @@ devDependencies:
   "@iconify-icons/fa": 1.2.2
   "@iconify-icons/fa-solid": 1.2.2
   "@iconify-icons/ri": 1.2.1
+  "@iconify-icons/uil": 1.2.1
   "@iconify/vue": 3.2.0_vue@3.2.31
   "@intlify/vite-plugin-vue-i18n": 3.3.1_5e55492be6688dd52c71c76ed1867e7f
   "@pureadmin/theme": 0.0.1
@@ -995,6 +997,15 @@ packages:
       "@iconify/types": 1.1.0
     dev: true
 
+  /@iconify-icons/uil/1.2.1:
+    resolution:
+      {
+        integrity: sha512-ovb4896S1EH6gqP98NPa4pKzNYaJTtrXoEzM4xm3RJAF9/ke4N96v+DOGnR3oT+EGpdfJjzlyISeDqNlPvpCXw==
+      }
+    dependencies:
+      "@iconify/types": 1.1.0
+    dev: true
+
   /@iconify/types/1.1.0:
     resolution:
       {

src/api/system.ts

@@ -0,0 +1,12 @@
+import { http } from "../utils/http";
+
+interface jobType extends Promise<any> {
+  data?: object;
+  code?: number;
+  msg?: string;
+}
+
+// 获取岗位管理列表
+export const getJobList = (data?: object): jobType => {
+  return http.request("post", "/system", { data });
+};

src/components/ReIcon/src/iconifyIconOffline.ts

@@ -28,6 +28,7 @@ import Rank from "@iconify-icons/ep/rank";
 import videoPlay from "@iconify-icons/ep/video-play";
 import Monitor from "@iconify-icons/ep/monitor";
 import Search from "@iconify-icons/ep/search";
+import Refresh from "@iconify-icons/ep/refresh";
 addIcon("check", Check);
 addIcon("menu", Menu);
 addIcon("home-filled", HomeFilled);
@@ -54,6 +55,7 @@ addIcon("video-play", videoPlay);
 addIcon("rank", Rank);
 addIcon("monitor", Monitor);
 addIcon("search", Search);
+addIcon("refresh", Refresh);
 
 // remixicon
 import arrowRightSLine from "@iconify-icons/ri/arrow-right-s-line";
@@ -89,6 +91,14 @@ addIcon("fa-user", faUser);
 addIcon("fa-lock", faLock);
 addIcon("fa-sign-out", faSignOut);
 
+// Unicons
+import Import from "@iconify-icons/uil/import";
+import Export from "@iconify-icons/uil/export";
+import ArrowsShrinkV from "@iconify-icons/uil/arrows-shrink-v";
+addIcon("import", Import);
+addIcon("export", Export);
+addIcon("density", ArrowsShrinkV);
+
 // Iconify Icon在Vue里离线使用（用于内网环境）https://docs.iconify.design/icon-components/vue/offline.html
 export default defineComponent({
   name: "IconifyIcon",

src/plugins/element-plus/index.ts

@@ -56,6 +56,7 @@ import {
   ElStep,
   ElTree,
   ElTreeV2,
+  ElPopconfirm,
   // 指令
   ElLoading,
   ElInfiniteScroll
@@ -110,6 +111,7 @@ const components = [
   ElCollapseItem,
   ElTree,
   ElTreeV2,
+  ElPopconfirm,
   ElTable,
   ElTableColumn,
   ElLink,

src/views/system/job/index.vue

@@ -0,0 +1,202 @@
+<script lang="ts">
+export default {
+  name: "job"
+};
+</script>
+
+<script setup lang="ts">
+import { getJobList } from "/@/api/system";
+import { FormInstance } from "element-plus";
+import { reactive, ref, onMounted, computed } from "vue";
+import { useEpThemeStoreHook } from "/@/store/modules/epTheme";
+import { useRenderIcon } from "/@/components/ReIcon/src/hooks";
+
+const form = reactive({
+  code: "",
+  user: "",
+  status: ""
+});
+let jobList = ref([]);
+let loading = ref(false);
+const totalPage = ref(0);
+let pageSize = ref(10);
+let size = ref("default");
+
+const formRef = ref<FormInstance>();
+
+const resetForm = (formEl: FormInstance | undefined) => {
+  if (!formEl) return;
+  formEl.resetFields();
+};
+
+const getDropdownItemStyle = computed(() => {
+  return s => {
+    return {
+      background: s === size.value ? useEpThemeStoreHook().epThemeColor : "",
+      color: s === size.value ? "#f4f4f5" : "#000"
+    };
+  };
+});
+
+function handleUpdate(row) {
+  console.log(row);
+}
+
+function handleDelete(row) {
+  console.log(row);
+}
+
+function handleCurrentChange(val: number) {
+  console.log(`current page: ${val}`);
+}
+
+function handleSizeChange(val: number) {
+  console.log(`${val} items per page`);
+}
+
+onMounted(async () => {
+  let { data } = await getJobList();
+  jobList.value = data.list;
+  totalPage.value = data.total;
+});
+</script>
+
+<template>
+  <div class="main">
+    <el-form
+      ref="formRef"
+      :inline="true"
+      :model="form"
+      class="bg-white w-99/100 pl-8 pt-4"
+    >
+      <el-form-item label="岗位编码：">
+        <el-input v-model="form.code" placeholder="请输入" clearable />
+      </el-form-item>
+      <el-form-item label="岗位名称：">
+        <el-input v-model="form.user" placeholder="请输入" clearable />
+      </el-form-item>
+      <el-form-item label="状态：">
+        <el-select v-model="form.status" placeholder="请选择" clearable>
+          <el-option label="开启" value="1" />
+          <el-option label="关闭" value="0" />
+        </el-select>
+      </el-form-item>
+      <el-form-item>
+        <el-button :icon="useRenderIcon('refresh')" @click="resetForm(formRef)"
+          >重置</el-button
+        >
+        <el-button type="primary" :icon="useRenderIcon('search')"
+          >搜索</el-button
+        >
+      </el-form-item>
+    </el-form>
+
+    <div class="w-99/100 mt-6 pb-4 bg-white">
+      <div class="flex justify-between w-full h-60px p-4">
+        <p class="font-bold">岗位列表</p>
+        <div class="w-200px flex items-center justify-around">
+          <el-button type="primary">新增岗位</el-button>
+          <!-- <el-button type="success" :icon="useRenderIcon('import')"
+            >导入</el-button
+          >
+          <el-button type="warning" :icon="useRenderIcon('export')"
+            >导出</el-button
+          > -->
+          <IconifyIconOffline
+            class="cursor-pointer"
+            icon="refresh-right"
+            width="20"
+            color="#606266"
+          />
+
+          <el-dropdown id="header-translation" trigger="click">
+            <IconifyIconOffline
+              class="cursor-pointer"
+              icon="density"
+              width="20"
+              color="#606266"
+            />
+            <template #dropdown>
+              <el-dropdown-menu class="translation">
+                <el-dropdown-item
+                  :style="getDropdownItemStyle('large')"
+                  @click="size = 'large'"
+                >
+                  松散
+                </el-dropdown-item>
+                <el-dropdown-item
+                  :style="getDropdownItemStyle('default')"
+                  @click="size = 'default'"
+                >
+                  默认
+                </el-dropdown-item>
+                <el-dropdown-item
+                  :style="getDropdownItemStyle('small')"
+                  @click="size = 'small'"
+                >
+                  紧凑
+                </el-dropdown-item>
+              </el-dropdown-menu>
+            </template>
+          </el-dropdown>
+
+          <IconifyIconOffline
+            class="cursor-pointer"
+            icon="setting"
+            width="20"
+            color="#606266"
+          />
+        </div>
+      </div>
+      <el-table
+        border
+        :size="size"
+        v-loading="loading"
+        :data="jobList"
+        :header-cell-style="{ background: '#fafafa', color: '#606266' }"
+      >
+        <el-table-column label="岗位编号" align="center" prop="id" />
+        <el-table-column label="岗位编码" align="center" prop="code" />
+        <el-table-column label="岗位名称" align="center" prop="name" />
+        <el-table-column label="岗位排序" align="center" prop="sort" />
+        <el-table-column label="状态" align="center" prop="status">
+          <template #default="scope">
+            <el-tag>{{ scope.row.status }}</el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column label="创建时间" align="center" prop="createTime">
+          <template #default="scope">
+            <span>{{ scope.row.createTime }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" align="center">
+          <template #default="scope">
+            <el-button type="text" @click="handleUpdate(scope.row)"
+              >修改</el-button
+            >
+            <el-popconfirm title="确定删除吗?">
+              <template #reference>
+                <el-button type="text" @click="handleDelete(scope.row)"
+                  >删除</el-button
+                >
+              </template>
+            </el-popconfirm>
+          </template>
+        </el-table-column>
+      </el-table>
+      <el-pagination
+        class="flex justify-end mt-4 mr-2"
+        :small="size === 'small' ? true : false"
+        v-model:page-size="pageSize"
+        :page-sizes="[10, 20, 30, 50]"
+        :background="true"
+        layout="total, sizes, prev, pager, next, jumper"
+        :total="totalPage"
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+      />
+    </div>
+  </div>
+</template>
+
+<style lang="scoped"></style>