feat(salary): complete salary functional

YDKD · Apr 12, 2022 · f9f8afc · f9f8afc
1 parent 1795c3b
commit f9f8afc
Show file tree

Hide file tree

Showing 10 changed files with 265 additions and 3 deletions.
diff --git a/index.html b/index.html
@@ -4,7 +4,7 @@
 <head>
   <meta charset="UTF-8" />
   <link rel="icon" href="/favicon.ico" />
-  <link rel="stylesheet" href="//at.alicdn.com/t/font_3289955_rx0974qunb.css" />
+  <link rel="stylesheet" href="//at.alicdn.com/t/font_3289955_zcjv91nt0w.css" />
   <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@500&display=swap" rel="stylesheet" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title></title>

diff --git a/src/api/getApi.ts b/src/api/getApi.ts
@@ -59,6 +59,13 @@ export function getPerson(params: any) {
     params
   })
 }
+export function getWorkerSalary(params: any) {
+  return defaultRequest.request<ReutrnDataType>({
+    url: '/sys/person/salary',
+    method: 'GET',
+    params
+  })
+}
 
 export function getSerialNum() {
   return defaultRequest.request<ReutrnDataType>({

diff --git a/src/api/postApi.ts b/src/api/postApi.ts
@@ -3,7 +3,7 @@
  * @Autor: YDKD
  * @Date: 2022-03-19 18:42:32
  * @LastEditors: YDKD
- * @LastEditTime: 2022-04-04 20:44:17
+ * @LastEditTime: 2022-04-12 15:21:44
  */
 import { defaultRequest } from '@/service'
 import { ReutrnDataType } from './type'
@@ -55,3 +55,11 @@ export function addPersonInfo(data: any) {
     data
   })
 }
+
+export function updateWorkerSalary(data: any) {
+  return defaultRequest.request<ReutrnDataType>({
+    url: '/sys/person/salary',
+    method: 'POST',
+    data
+  })
+}
diff --git a/src/styles/index.less b/src/styles/index.less
@@ -1,2 +1,3 @@
 @import './var.css';
 @import './transition.css';
+@import './element-plus.css';
diff --git a/src/views/salary/components/salary-panel.vue b/src/views/salary/components/salary-panel.vue
@@ -0,0 +1,104 @@
+<template>
+  <div :class="prefixCls">
+    <div class="search">
+      <el-input
+        v-model="searchName"
+        placeholder="输入职工姓名进行检索"
+        class="input-with-select"
+        clearable
+        @clear="getInitData"
+      >
+        <template #append>
+          <button-src-button
+            icon="search"
+            icon-type="iconify"
+            @click="getInitData"
+          />
+        </template>
+      </el-input>
+    </div>
+    <div :class="['salary-form mt-2']">
+      <el-card shadow="hover">
+        <el-form
+          v-if="queried"
+          ref="salaryFormRef"
+          :model="salaryForm"
+          label-width="80px"
+        >
+          <el-form-item label="工资编号">
+            <el-input v-model="salaryForm.id" disabled></el-input>
+          </el-form-item>
+          <el-form-item label="职工姓名">
+            <el-input v-model="salaryForm.workerName" disabled></el-input>
+          </el-form-item>
+          <el-form-item label="职工编号">
+            <el-input v-model="salaryForm.serialNumber" disabled></el-input>
+          </el-form-item>
+          <el-form-item label="基本工资">
+            <el-input-number
+              v-model="salaryForm.base_pay"
+              type="number"
+              :step="step"
+            ></el-input-number>
+          </el-form-item>
+          <el-form-item label="绩效工资">
+            <el-input-number
+              v-model="salaryForm.performance_pay"
+              type="number"
+              :step="step"
+            ></el-input-number>
+          </el-form-item>
+          <el-form-item label="工资补贴">
+            <el-input-number
+              v-model="salaryForm.performance_pay"
+              type="number"
+              :step="step"
+            ></el-input-number>
+          </el-form-item>
+          <el-form-item label="所交税额">
+            <el-input-number
+              v-model="salaryForm.tax"
+              type="number"
+              :step="step"
+            ></el-input-number>
+          </el-form-item>
+          <el-form-item label="应发工资">
+            <span>{{ real_pay }}元</span>
+          </el-form-item>
+          <el-form-item>
+            <el-button type="success" @click="submit">更新工资信息</el-button>
+            <el-button>取消</el-button>
+          </el-form-item>
+        </el-form>
+      </el-card>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { useDesign } from '@/hooks'
+import {
+  searchName,
+  getInitData,
+  queried,
+  salaryForm,
+  salaryFormRef,
+  submit,
+  real_pay,
+  step
+} from '../hooks'
+
+const prefixCls = useDesign('prefix', 'salary-panel')
+</script>
+<style lang="less" scoped>
+@prefix-cls: ~'@{namespace}-salary-panel';
+
+.@{prefix-cls} {
+  .search {
+    width: 20%;
+  }
+  .salary-form {
+    width: 40%;
+  }
+}
+</style>
diff --git a/src/views/salary/hooks/index.ts b/src/views/salary/hooks/index.ts
@@ -0,0 +1,28 @@
+/*
+ * @Version: 1.0
+ * @Autor: YDKD
+ * @Date: 2022-04-12 10:26:56
+ * @LastEditors: YDKD
+ * @LastEditTime: 2022-04-12 15:29:53
+ */
+import {
+  searchName,
+  getInitData,
+  queried,
+  salaryForm,
+  salaryFormRef,
+  submit,
+  real_pay,
+  step
+} from './useForm'
+
+export {
+  searchName,
+  getInitData,
+  queried,
+  salaryForm,
+  salaryFormRef,
+  submit,
+  real_pay,
+  step
+}
diff --git a/src/views/salary/hooks/useForm.ts b/src/views/salary/hooks/useForm.ts
@@ -0,0 +1,71 @@
+/*
+ * @Version: 1.0
+ * @Autor: YDKD
+ * @Date: 2022-04-12 10:27:55
+ * @LastEditors: YDKD
+ * @LastEditTime: 2022-04-12 15:42:33
+ */
+import { getWorkerSalary } from '@/api/getApi'
+import { updateWorkerSalary } from '@/api/postApi'
+import { useMessage } from '@/hooks'
+import { FormInstance } from 'element-plus'
+import { computed, ref } from 'vue'
+
+import type { SalaryForm } from '../types'
+
+const searchName = ref('小王')
+
+const queried = ref(false)
+
+const salaryFormRef = ref<FormInstance>()
+
+const step = 20
+
+const salaryForm = ref<SalaryForm>({
+  id: '',
+  serialNumber: '',
+  base_pay: 0,
+  allowance: 0,
+  performance_pay: 0,
+  tax: 0,
+  workerName: ''
+})
+
+const real_pay = computed(() => {
+  const { base_pay, allowance, performance_pay, tax } = salaryForm.value
+  return base_pay + performance_pay + allowance - tax
+})
+
+const getInitData = async () => {
+  if (searchName.value == '') return
+  const params = {
+    username: searchName.value
+  }
+  const { data, code } = await getWorkerSalary(params)
+  if (code == 200) {
+    const result: Array<SalaryForm> | undefined = await data.result
+    if (result && result.length > 0) {
+      salaryForm.value = result[0]
+      queried.value = true
+    } else {
+      useMessage({ msg: '未查询到该职工信息', type: 'error' })
+      queried.value = false
+    }
+  }
+}
+
+const submit = async () => {
+  const { code, msg } = await updateWorkerSalary(salaryForm.value)
+  useMessage({ msg: msg, type: code == 200 ? 'success' : 'error' })
+}
+
+export {
+  searchName,
+  getInitData,
+  queried,
+  salaryForm,
+  salaryFormRef,
+  submit,
+  real_pay,
+  step
+}
diff --git a/src/views/salary/index.vue b/src/views/salary/index.vue
@@ -0,0 +1,26 @@
+<!--
+ * @Version: 1.0
+ * @Autor: YDKD
+ * @Date: 2022-04-12 10:18:53
+ * @LastEditors: YDKD
+ * @LastEditTime: 2022-04-12 10:23:50
+-->
+<template>
+  <div :class="prefixCls">
+    <salary-panel />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import salaryPanel from './components/salary-panel.vue'
+import { useDesign } from '@/hooks'
+
+const prefixCls = useDesign('prefix', 'person-salary')
+</script>
+
+<style lang="less" scoped>
+@prefix-cls: ~'@{namespace}-person-salary';
+
+.@{prefix-cls} {
+}
+</style>
diff --git a/src/views/salary/types/index.ts b/src/views/salary/types/index.ts
@@ -0,0 +1,16 @@
+/*
+ * @Version: 1.0
+ * @Autor: YDKD
+ * @Date: 2022-04-12 11:08:28
+ * @LastEditors: YDKD
+ * @LastEditTime: 2022-04-12 15:28:58
+ */
+export type SalaryForm = {
+  id: number | string
+  allowance: number
+  base_pay: number
+  performance_pay: number
+  serialNumber: number | string
+  tax: number
+  workerName: string
+}
diff --git a/types/components.d.ts b/types/components.d.ts
@@ -10,7 +10,6 @@ declare module 'vue' {
     ElAvatar: typeof import('element-plus/es')['ElAvatar']
     ElButton: typeof import('element-plus/es')['ElButton']
     ElCard: typeof import('element-plus/es')['ElCard']
-    ElCheckbox: typeof import('element-plus/es')['ElCheckbox']
     ElCol: typeof import('element-plus/es')['ElCol']
     ElContainer: typeof import('element-plus/es')['ElContainer']
     ElDropdown: typeof import('element-plus/es')['ElDropdown']
@@ -21,7 +20,9 @@ declare module 'vue' {
     ElHeader: typeof import('element-plus/es')['ElHeader']
     ElIcon: typeof import('element-plus/es')['ElIcon']
     ElInput: typeof import('element-plus/es')['ElInput']
+    ElInputNumber: typeof import('element-plus/es')['ElInputNumber']
     ElMain: typeof import('element-plus/es')['ElMain']
+    ElNumberInput: typeof import('element-plus/es')['ElNumberInput']
     ElPagination: typeof import('element-plus/es')['ElPagination']
     ElRow: typeof import('element-plus/es')['ElRow']
     ElSkeleton: typeof import('element-plus/es')['ElSkeleton']