上传

src/router/modules/remaining.ts

@@ -106,27 +106,27 @@ const remainingRouter: AppRouteRecordRaw[] = [
       }
     ]
   },
-  // {
-  //   path: '/Basic',
-  //   component: Layout,
-  //   name: 'Basic',
-  //   meta: {},
-  //   redirect: '/Basic/menu',
-  //   children: [
-  //     {
-  //       path: 'menu',
-  //       component: () => import('@/views/Basic/Menu/index.vue'),
-  //       name: 'Menu',
-  //       meta: {
-  //         canTo: true,
-  //         hidden: true,
-  //         noTagsView: false,
-  //         icon: 'ep:user',
-  //         title: '菜单管理'
-  //       }
-  //     }
-  //   ]
-  // },
+  {
+    path: '/Basic',
+    component: Layout,
+    name: 'Basic',
+    meta: {},
+    redirect: '/Basic/menu',
+    children: [
+      {
+        path: 'menu',
+        component: () => import('@/views/Basic/Menu/index.vue'),
+        name: 'Menu',
+        meta: {
+          canTo: true,
+          hidden: true,
+          noTagsView: false,
+          icon: 'ep:user',
+          title: '菜单管理'
+        }
+      }
+    ]
+  },
   {
     path: '/login',
     component: () => import('@/views/Login/Login.vue'),

src/views/Finance/Commission/Comp/DialogPlan.vue

@@ -118,7 +118,7 @@
   </Dialog>
 </template>
 
-<script setup name="DialogSalarySetting">
+<script setup name="DialogCommissionPlan">
 const message = useMessage() // 消息弹窗
 
 const dialogVisible = ref(false) // 弹窗的是否展示

src/views/Finance/Commission/index.vue

@@ -61,6 +61,10 @@ const searchForm = ref({
   pageSize: 20
 })
 
+onMounted(() => {
+  handleQuery()
+})
+
 /** 搜索按钮操作 */
 const handleQuery = () => {
   searchForm.value.pageNo = 1

src/views/Finance/Salary/index.vue

@@ -46,6 +46,10 @@ const searchForm = ref({
   pageSize: 20
 })
 
+onMounted(() => {
+  handleQuery()
+})
+
 /** 搜索按钮操作 */
 const handleQuery = () => {
   searchForm.value.pageNo = 1

src/views/Pers/Employee/Comp/DialogEmployee.vue

@@ -0,0 +1,236 @@
+<template>
+  <Dialog v-model="dialogVisible" :title="dialogTitle" style="width: 800px">
+    <el-form
+      ref="formRef"
+      v-loading="formLoading"
+      :model="formData"
+      :rules="formRules"
+      label-width="80px"
+    >
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <el-form-item label="用户姓名" prop="nickname">
+            <el-input v-model="formData.nickname" placeholder="请输入用户姓名" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="用户性别">
+            <el-radio-group v-model="formData.sex">
+              <el-radio :label="1"> 男 </el-radio>
+              <el-radio :label="2"> 女 </el-radio>
+            </el-radio-group>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <el-form-item label="入职日期" prop="hireDate">
+            <el-date-picker
+              v-model="formData.hireDate"
+              type="date"
+              format="YYYY-MM-DD"
+              value-format="YYYY-MM-DD"
+              placeholder="选择日期时间"
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="职位" prop="job">
+            <el-input v-model="formData.job" placeholder="请输入职位" />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <el-form-item label="手机号码" prop="mobile">
+            <el-input v-model="formData.mobile" maxlength="11" placeholder="请输入手机号码" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="邮箱" prop="email">
+            <el-input v-model="formData.email" maxlength="50" placeholder="请输入邮箱" />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20">
+        <el-col :span="12" :offset="0">
+          <el-form-item label="考勤方案" prop="kaoqinfangan">
+            <el-select
+              v-model="formData.kaoqinfangan"
+              placeholder="选择考勤方案"
+              clearable
+              filterable
+            >
+              <el-option
+                v-for="item in kaoqinfanganOptions"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" :offset="0">
+          <el-form-item label="开通系统" prop="kaitongxitong">
+            <el-select
+              v-model="formData.kaitongxitong"
+              placeholder="选择考勤方案"
+              multiple
+              clearable
+              filterable
+            >
+              <el-option
+                v-for="item in kaitongxitongOptions"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              />
+            </el-select>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <el-form-item v-if="formData.id === undefined" label="登录账号" prop="username">
+            <el-input v-model="formData.username" placeholder="请输入登录账号" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item v-if="formData.id === undefined" label="用户密码" prop="password">
+            <el-input
+              v-model="formData.password"
+              placeholder="请输入用户密码"
+              show-password
+              type="password"
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20">
+        <el-col :span="24">
+          <el-form-item label="备注">
+            <el-input v-model="formData.remark" placeholder="请输入内容" type="textarea" />
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+    <template #footer>
+      <el-button :disabled="formLoading" type="primary" @click="submitForm">确 定</el-button>
+      <el-button @click="dialogVisible = false">取 消</el-button>
+    </template>
+  </Dialog>
+</template>
+<script name="DialogEmployee" setup>
+import { CommonStatusEnum } from '@/utils/constants'
+import { formatDate } from '@/utils/formatTime'
+
+import * as UserApi from '@/api/system/user'
+
+const { t } = useI18n() // 国际化
+const message = useMessage() // 消息弹窗
+
+const dialogVisible = ref(false) // 弹窗的是否展示
+const dialogTitle = ref('') // 弹窗的标题
+const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
+const formType = ref('') // 表单的类型：create - 新增；update - 修改
+const formData = ref({
+  nickname: '',
+  deptId: '',
+  mobile: '',
+  email: '',
+  id: undefined,
+  username: '',
+  password: '',
+  sex: 1,
+  remark: '',
+  status: CommonStatusEnum.ENABLE,
+  hireDate: '',
+  kaoqinfangan: undefined,
+  kaitongxitong: []
+})
+const formRules = ref({
+  nickname: [{ required: true, message: '用户姓名不能为空', trigger: 'blur' }],
+  job: { required: true, message: '职位不能为空', trigger: 'blur' },
+  email: [
+    {
+      type: 'email',
+      message: '请输入正确的邮箱地址',
+      trigger: ['blur', 'change']
+    }
+  ],
+  mobile: [{ required: true, message: '手机号不能为空', trigger: 'blur' }]
+})
+const formRef = ref() // 表单 Ref
+const kaoqinfanganOptions = ref([])
+const kaitongxitongOptions = ref([])
+
+/** 打开弹窗 */
+const open = async (type, id) => {
+  dialogVisible.value = true
+  dialogTitle.value = t('action.' + type)
+  formType.value = type
+  resetForm()
+  // 修改时，设置数据
+  if (id) {
+    formLoading.value = true
+    try {
+      formData.value = await UserApi.getUser(id)
+    } finally {
+      formLoading.value = false
+    }
+  }
+  getOptions()
+}
+defineExpose({ open }) // 提供 open 方法，用于打开弹窗
+
+function getOptions() {
+  kaoqinfanganOptions.value = []
+  kaitongxitongOptions.value = []
+}
+
+/** 提交表单 */
+const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
+const submitForm = async () => {
+  // 校验表单
+  if (!formRef.value) return
+  const valid = await formRef.value.validate()
+  if (!valid) return
+  // 提交请求
+  formLoading.value = true
+  try {
+    const data = formData.value
+    if (formType.value === 'create') {
+      await UserApi.createUser(data)
+      message.success(t('common.createSuccess'))
+    } else {
+      await UserApi.updateUser(data)
+      message.success(t('common.updateSuccess'))
+    }
+    dialogVisible.value = false
+    // 发送操作成功的事件
+    emit('success')
+  } finally {
+    formLoading.value = false
+  }
+}
+
+/** 重置表单 */
+const resetForm = () => {
+  formData.value = {
+    nickname: '',
+    deptId: '',
+    mobile: '',
+    email: '',
+    id: undefined,
+    username: '',
+    password: '',
+    sex: 1,
+    remark: '',
+    status: CommonStatusEnum.ENABLE,
+    hireDate: formatDate(new Date(), 'YYYY-MM-DD'),
+    kaoqinfangan: undefined,
+    kaitongxitong: []
+  }
+  formRef.value?.resetFields()
+}
+</script>

src/views/Pers/Employee/index.vue

@@ -11,18 +11,56 @@
         </el-radio-group>
       </el-form-item>
       <el-form-item>
-        <el-button @click="handleQuery">搜索</el-button>
-        <el-button type="primary" plain @click="handleQuery">新增</el-button>
+        <el-button @click="handleQuery" v-hasPermi="['pers:employee:search']">搜索</el-button>
+        <el-button
+          type="primary"
+          plain
+          @click="openForm('create')"
+          v-hasPermi="['pers:employee:add']"
+        >
+          新增
+        </el-button>
       </el-form-item>
     </el-form>
 
     <el-table v-loading="loading" :data="tableList" border stripe>
       <el-table-column type="index" width="50" />
       <el-table-column label="用户姓名" prop="nickname" />
-      <el-table-column label="部门" key="deptName" prop="deptName" />
+      <el-table-column label="职位" prop="job" />
       <el-table-column label="手机号码" prop="mobile" width="120" />
       <el-table-column label="考勤方案" />
-      <el-table-column label="在职状态" prop="status" width="150" />
+      <el-table-column label="已开通系统" />
+      <el-table-column label="在职状态" key="status" width="150">
+        <template #default="scope">
+          <el-switch
+            v-model="scope.row.status"
+            :active-value="0"
+            :inactive-value="1"
+            v-hasPermi="['pers:employee:update']"
+            @change="handleStatusChange(scope.row)"
+          />
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" width="260">
+        <template #default="scope">
+          <el-button
+            type="primary"
+            link
+            @click="openForm('update', scope.row.id)"
+            v-hasPermi="['pers:employee:update']"
+          >
+            修改
+          </el-button>
+          <el-button
+            type="primary"
+            link
+            @click="handleDelete(scope.row.id)"
+            v-hasPermi="['pers:employee:delete']"
+          >
+            删除
+          </el-button>
+        </template>
+      </el-table-column>
     </el-table>
     <Pagination
       :total="total"
@@ -30,10 +68,12 @@
       v-model:limit="searchForm.pageSize"
       @pagination="getList"
     />
+    <DialogEmployee ref="formRef" @success="getList" />
   </div>
 </template>
 
 <script name="OAEmployee" setup>
+import DialogEmployee from './Comp/DialogEmployee.vue'
 const searchForm = ref({
   name: undefined,
   status: 0,
@@ -41,6 +81,10 @@ const searchForm = ref({
   pageSize: 20
 })
 
+onMounted(() => {
+  handleQuery()
+})
+
 /** 搜索按钮操作 */
 const handleQuery = () => {
   searchForm.value.pageNo = 1
@@ -54,7 +98,7 @@ const total = ref(0)
 const getList = async () => {
   loading.value = true
   try {
-    tableList.value = [1, 2]
+    tableList.value = [{ status: 0 }]
     // const data = await UserApi.getUserPage(queryParams)
     // tableList.value = data.list
     // total.value = data.total
@@ -62,6 +106,41 @@ const getList = async () => {
     loading.value = false
   }
 }
+
+/** 添加/修改操作 */
+const formRef = ref()
+const openForm = (type, id = undefined) => {
+  formRef.value.open(type, id)
+}
+
+/** 修改用户状态 */
+const handleStatusChange = async (row) => {
+  try {
+    // 修改状态的二次确认
+    const text = row.status === 0 ? '启用' : '停用'
+    await message.confirm('确认要"' + text + '""' + row.nickname + '"用户吗?')
+    // 发起修改状态
+    await UserApi.updateUserStatus(row.id, row.status)
+    // 刷新列表
+    await getList()
+  } catch {
+    // 取消后，进行恢复按钮
+    row.status = row.status === 0 ? 1 : 0
+  }
+}
+
+/** 删除按钮操作 */
+const handleDelete = async (id) => {
+  try {
+    // 删除的二次确认
+    await message.delConfirm()
+    // 发起删除
+    await UserApi.deleteUser(id)
+    message.success(t('common.delSuccess'))
+    // 刷新列表
+    await getList()
+  } catch {}
+}
 </script>
 
 <style lang="scss" scoped></style>

src/views/Pers/Setting/Comp/AttendancePlan.vue

@@ -0,0 +1,105 @@
+<template>
+  <div>
+    <el-form :model="searchForm" inline>
+      <el-form-item>
+        <el-input v-model="searchForm.name" placeholder="方案名称" />
+      </el-form-item>
+      <el-form-item>
+        <el-select v-model="searchForm.status" placeholder="启用状态" clearable filterable>
+          <el-option label="启用" :value="0" />
+          <el-option label="停用" :value="1" />
+        </el-select>
+      </el-form-item>
+      <el-form-item>
+        <el-button @click="handleQuery">搜索</el-button>
+        <el-button type="primary" plain @click="openForm('create')"> 新增 </el-button>
+      </el-form-item>
+    </el-form>
+    <el-table v-loading="loading" :data="tableList" border stripe>
+      <el-table-column type="index" width="50" />
+      <el-table-column label="方案名称" prop="name" />
+      <el-table-column label="启用状态" prop="status">
+        <template #default="scope">
+          <el-switch
+            v-model="scope.row.status"
+            :active-value="0"
+            :inactive-value="1"
+            @change="handleStatusChange(scope.row)"
+          />
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" width="200">
+        <template #default="scope">
+          <el-button type="primary" link @click="openForm('update', scope.row)"> 修改 </el-button>
+          <el-button type="primary" link @click="handleDelete(scope.row.id)"> 删除 </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <Pagination
+      :total="total"
+      v-model:page="searchForm.pageNo"
+      v-model:limit="searchForm.pageSize"
+      @pagination="getList"
+    />
+
+    <DialogPlan ref="planDialogRef" @success="getList" />
+  </div>
+</template>
+
+<script name="PersSetting" setup>
+import DialogPlan from './DialogPlan.vue'
+const searchForm = ref({
+  name: undefined,
+  status: undefined,
+  pageNo: 1,
+  pageSize: 20
+})
+
+onMounted(() => {
+  handleQuery()
+})
+
+/** 搜索按钮操作 */
+const handleQuery = () => {
+  searchForm.value.pageNo = 1
+  getList()
+}
+
+const loading = ref(false)
+const tableList = ref([])
+const total = ref(0)
+/** 查询列表 */
+const getList = async () => {
+  loading.value = true
+  try {
+    tableList.value = [{ status: 0 }]
+    // const data = await UserApi.getUserPage(queryParams)
+    // tableList.value = data.list
+    // total.value = data.total
+  } finally {
+    loading.value = false
+  }
+}
+
+const planDialogRef = ref()
+function openForm(type, row = undefined) {
+  planDialogRef.value.open(type, row)
+}
+
+const handleStatusChange = async (row) => {
+  try {
+    // 修改状态的二次确认
+    const text = row.status === 0 ? '启用' : '停用'
+    await message.confirm('确认要"' + text + '""' + row.name + '"方案吗?')
+    // 发起修改状态
+    // await UserApi.updateUserStatus(row.id, row.status)
+    // 刷新列表
+    await getList()
+  } catch {
+    // 取消后，进行恢复按钮
+    row.status = row.status === 0 ? 1 : 0
+  }
+}
+</script>
+
+<style lang="scss" scoped></style>

src/views/Pers/Setting/Comp/DialogPlan.vue

@@ -0,0 +1,149 @@
+<template>
+  <Dialog v-model="dialogVisible" :title="dialogTitle" style="width: 1200px">
+    <el-form :model="form" ref="formRef" :rules="rules" label-width="80px">
+      <el-form-item label="方案名称" prop="name">
+        <el-input v-model="form.name" placeholder="请输入方案名称" style="width: 240px" />
+      </el-form-item>
+    </el-form>
+    <div class="mt-10px mb-10px">
+      <el-button type="primary" @click="handleAddYearPlan"> 添加年度考勤方案 </el-button>
+      <span class="ml-20px font-bold">请配置每月计薪天数，计薪天数 = 应出勤天数 + 带薪假天数</span>
+    </div>
+    <el-table :data="planList" border stripe>
+      <el-table-column label="年份" width="150px">
+        <template #default="{ row }">
+          <el-date-picker
+            v-model="row.year"
+            type="year"
+            placeholder="选择年份"
+            format="YYYY"
+            value-format="YYYY"
+            style="width: 120px"
+          />
+        </template>
+      </el-table-column>
+      <el-table-column
+        v-for="item in 12"
+        :prop="item"
+        :key="item"
+        :label="item + '月'"
+        width="140px"
+      >
+        <el-table-column label="应出勤">
+          <template #default="{ row }">
+            <el-input-number
+              v-model="row[item].yingchuqin"
+              size="small"
+              :min="1"
+              :max="31"
+              :controls="false"
+              style="width: 50px"
+            />
+          </template>
+        </el-table-column>
+        <el-table-column label="带薪假">
+          <template #default="{ row }">
+            <el-input-number
+              v-model="row[item].daixinjia"
+              size="small"
+              :min="0"
+              :max="31"
+              :controls="false"
+              style="width: 50px"
+            />
+          </template>
+        </el-table-column>
+      </el-table-column>
+    </el-table>
+
+    <template #footer>
+      <span>
+        <el-button @click="dialogVisible = false">取消</el-button>
+        <el-button :disabled="formLoading" type="primary" @click="submitForm">保存</el-button>
+      </span>
+    </template>
+  </Dialog>
+</template>
+
+<script setup name="DialogAttendancePlan">
+const message = useMessage() // 消息弹窗
+
+const dialogVisible = ref(false) // 弹窗的是否展示
+const dialogTitle = ref('考勤方案设置')
+const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
+
+const formType = ref('create')
+/** 打开弹窗 */
+const open = async (type, row) => {
+  dialogVisible.value = true
+  dialogTitle.value = type == 'create' ? `新增方案` : '修改方案'
+  formType.value = type
+  resetForm()
+
+  if (row?.id) {
+    formLoading.value = true
+    try {
+      // comissionForm.value = await UserApi.getUser(id)
+    } finally {
+      formLoading.value = false
+    }
+  }
+}
+defineExpose({ open }) // 提供 open 方法，用于打开弹窗
+
+const form = ref({})
+const rules = {
+  name: { required: true, message: '方案名称不可为空', trigger: 'blur' }
+}
+function resetForm() {
+  form.value = {
+    name: undefined,
+    planList: []
+  }
+}
+
+function handleAddYearPlan() {
+  form.value.planList.push({
+    year: new Date().getFullYear(),
+    1: { yingchuqin: undefined, daixinjia: undefined },
+    2: { yingchuqin: undefined, daixinjia: undefined },
+    3: { yingchuqin: undefined, daixinjia: undefined },
+    4: { yingchuqin: undefined, daixinjia: undefined },
+    5: { yingchuqin: undefined, daixinjia: undefined },
+    6: { yingchuqin: undefined, daixinjia: undefined },
+    7: { yingchuqin: undefined, daixinjia: undefined },
+    8: { yingchuqin: undefined, daixinjia: undefined },
+    9: { yingchuqin: undefined, daixinjia: undefined },
+    10: { yingchuqin: undefined, daixinjia: undefined },
+    11: { yingchuqin: undefined, daixinjia: undefined },
+    12: { yingchuqin: undefined, daixinjia: undefined }
+  })
+}
+
+const emit = defineEmits(['success'])
+const formRef = ref()
+const submitForm = async () => {
+  // 校验表单
+  if (!formRef.value) return
+  const valid = await formRef.value.validate()
+  if (!valid) return
+  // 提交请求
+  formLoading.value = true
+  try {
+    if (formType.value === 'create') {
+      // await ClassApi.createClassType(data)
+      message.success(t('common.createSuccess'))
+    } else {
+      // await ClassApi.updateClassType(data)
+      message.success(t('common.updateSuccess'))
+    }
+    dialogVisible.value = false
+    // 发送操作成功的事件
+    emit('success')
+  } finally {
+    formLoading.value = false
+  }
+}
+</script>
+
+<style lang="scss" scoped></style>

src/views/Pers/Setting/index.vue

@@ -1,7 +1,15 @@
 <template>
-  <div> 人事配置 </div>
+  <el-tabs v-model="tabName">
+    <el-tab-pane label="考勤方案" name="kqfa">
+      <AttendancePlan />
+    </el-tab-pane>
+  </el-tabs>
 </template>
 
-<script setup name="PersSetting"></script>
+<script setup name="PersSetting">
+import AttendancePlan from './Comp/AttendancePlan.vue'
 
-<style lang="scss" scoped></style>
+const tabName = ref('kqfa')
+</script>
+
+<style scoped></style>