Browse Source

perf: 优化岗位管理demo

xiaoxian521 3 years ago
parent
commit
51d08045e8
4 changed files with 32 additions and 11 deletions
  1. 1 1
      mock/system.ts
  2. 1 1
      package.json
  3. 4 4
      pnpm-lock.yaml
  4. 26 5
      src/views/system/job/index.vue

+ 1 - 1
mock/system.ts

@@ -31,7 +31,7 @@ export default [
               name: "人力资源",
               code: "hr",
               sort: 3,
-              status: 0,
+              status: 1,
               remark: "",
               id: 3,
               createTime: 1609837428000

+ 1 - 1
package.json

@@ -30,7 +30,7 @@
     "@ctrl/tinycolor": "^3.4.0",
     "@logicflow/core": "0.7.1",
     "@logicflow/extension": "0.7.1",
-    "@pureadmin/components": "^1.0.2",
+    "@pureadmin/components": "^1.0.3",
     "@vueuse/core": "^8.2.0",
     "@vueuse/motion": "^2.0.0-beta.12",
     "@vueuse/shared": "^8.2.0",

+ 4 - 4
pnpm-lock.yaml

@@ -14,7 +14,7 @@ specifiers:
   "@intlify/vite-plugin-vue-i18n": ^3.3.1
   "@logicflow/core": 0.7.1
   "@logicflow/extension": 0.7.1
-  "@pureadmin/components": ^1.0.2
+  "@pureadmin/components": ^1.0.3
   "@pureadmin/theme": ^0.0.1
   "@types/element-resize-detector": 1.1.3
   "@types/js-cookie": ^3.0.1
@@ -108,7 +108,7 @@ dependencies:
   "@ctrl/tinycolor": 3.4.0
   "@logicflow/core": 0.7.1
   "@logicflow/extension": 0.7.1
-  "@pureadmin/components": 1.0.2_vue@3.2.31
+  "@pureadmin/components": 1.0.3_vue@3.2.31
   "@vueuse/core": 8.2.0_vue@3.2.31
   "@vueuse/motion": 2.0.0-beta.12_vue@3.2.31
   "@vueuse/shared": 8.2.0_vue@3.2.31
@@ -1230,10 +1230,10 @@ packages:
       }
     dev: false
 
-  /@pureadmin/components/1.0.2_vue@3.2.31:
+  /@pureadmin/components/1.0.3_vue@3.2.31:
     resolution:
       {
-        integrity: sha512-bNUA+FqiSiSa+u+dC6nII4ybT+9MMVX7KLM1GWM+p6XLvJpjGcaYt95chlFLeNs3LO8sNruxSPwafVqI/dhsZQ==
+        integrity: sha512-+FYkSYma0qUXtqjy81Y3aIafIzoRveTOtPqxGkFqU2Ku1bnrPRjdKnJzn42pJyA5/OQ9WBvaDTKfldOFqEUuIg==
       }
     peerDependencies:
       vue: ^3.2.0

+ 26 - 5
src/views/system/job/index.vue

@@ -5,8 +5,10 @@ export default {
 </script>
 
 <script setup lang="ts">
+import dayjs from "dayjs";
 import { getJobList } from "/@/api/system";
 import { FormInstance } from "element-plus";
+import { Switch } from "@pureadmin/components";
 import { reactive, ref, onMounted, computed } from "vue";
 import { useEpThemeStoreHook } from "/@/store/modules/epTheme";
 import { useRenderIcon } from "/@/components/ReIcon/src/hooks";
@@ -54,6 +56,10 @@ function handleSizeChange(val: number) {
   console.log(`${val} items per page`);
 }
 
+function onChange(checked, val) {
+  console.log(checked, val);
+}
+
 onMounted(async () => {
   let { data } = await getJobList();
   jobList.value = data.list;
@@ -161,20 +167,35 @@ onMounted(async () => {
         <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>
+            <Switch
+              :size="size === 'small' ? 'small' : 'default'"
+              v-model:checked="scope.row.status"
+              :checkedValue="1"
+              :unCheckedValue="0"
+              checked-children="已开启"
+              un-checked-children="已关闭"
+              @change="checked => onChange(checked, scope.row)"
+            />
           </template>
         </el-table-column>
-        <el-table-column label="创建时间" align="center" prop="createTime">
+        <el-table-column
+          label="创建时间"
+          align="center"
+          width="180"
+          prop="createTime"
+        >
           <template #default="scope">
-            <span>{{ scope.row.createTime }}</span>
+            <span>{{
+              dayjs(scope.row.createTime).format("YYYY-MM-DD HH:mm:ss")
+            }}</span>
           </template>
         </el-table-column>
-        <el-table-column label="操作" align="center">
+        <el-table-column label="操作" width="130" align="center">
           <template #default="scope">
             <el-button type="text" @click="handleUpdate(scope.row)"
               >修改</el-button
             >
-            <el-popconfirm title="确定删除吗?">
+            <el-popconfirm title="是否确认删除?">
               <template #reference>
                 <el-button type="text" @click="handleDelete(scope.row)"
                   >删除</el-button