上传

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>