baozhida_erp/src/views/account/users/Users.vue

<script setup lang="ts">
import TableBase from '@/components/TableBase/index.vue'
import { ColumnProps } from '@/components/TableBase/interface/index'
import { Edit, Delete } from '@element-plus/icons-vue'
import { ref, nextTick } from 'vue'
import { GlobalStore } from '@/stores/index'
import { User_List, User_Del } from '@/api/user/index'
import DrawerFrom from './components/DrawerFrom.vue'
import { ElMessage, ElMessageBox } from 'element-plus'
const globalStore = GlobalStore()
const action = ref(true)
const drawerFromRef = ref()
const TableRef = ref()
const columns: ColumnProps[] = [
  { type: 'index', label: '#', width: 80 },
  { prop: 'T_name', label: '姓名', search: { el: 'input' } },
  { prop: 'T_post_name', label: '职位' },
  { prop: 'T_dept_name', label: '部门' },
  { prop: 'T_phone', label: '联系电话' },
  { prop: 'T_nation', label: '民族' },
  { prop: 'T_sex', label: '性别', name: 'T_sex' },
  { prop: 'T_school', label: '毕业院校' },
  { prop: 'T_major', label: '专业' },
  { prop: 'T_education', label: '学历' },
  { prop: 'T_entry_time', label: '入职时间' },
  { prop: 'T_positive_time', label: '转正时间' },
  { prop: 'T_entry_type', label: '入职类型', name: 'T_entry_type' },
  { prop: 'T_contract_start_time', label: '劳动合同开始时间' },
  { prop: 'T_contract_end_time', label: '劳动合同结束时间' },
  { prop: 'T_expire', label: '是否到期', name: 'T_expire' },
  { prop: 'T_marry', label: '婚否', name: 'T_marry' },
  { prop: 'operation', label: '操作', width: 200, fixed: 'right' }
]
const openDrawerFrom = () => {
  drawerFromRef.value.openDrawer()
}

const UpdateTableList = () => {
  TableRef.value.getTableList()
}

const UpdateAction = (val: boolean) => {
  action.value = val
}

const EditUserInfo = (row: any) => {
  action.value = false
  drawerFromRef.value.openDrawer()
  drawerFromRef.value.DataEcho(row)
}
const DeleteUserInfo = (row: any) => {
  ElMessageBox.confirm('您确定要删除吗?', '警告', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(async () => {
      const res: any = await User_Del({ User_tokey: globalStore.GET_User_tokey, T_uuid: row.T_uuid })
      if (res.Code === 200) {
        ElMessage({
          type: 'success',
          message: '删除成功！'
        })
        nextTick(() => {
          TableRef.value.getTableList()
        })
      }
    })
    .catch(() => {
      ElMessage({
        type: 'warning',
        message: '取消成功！'
      })
    })
}

// search
const search = ref<string>('')
const SearchInfo = () => {
  initParam.T_name = search.value
  TableRef.value.searchTable()
}

const initParam = {
  User_tokey: globalStore.GET_User_tokey,
  T_name: ''
}
</script>

<template>
  <TableBase ref="TableRef" :columns="columns" :requestApi="User_List" :initParam="initParam">
    <template #table-header>
      <div class="input-suffix">
        <el-row :gutter="20">
          <el-col :span="12">
            <span class="ml-3 w-35 text-gray-600 inline-flex items-center">账户查询：</span>
            <el-input type="text" class="w-50 m-2" v-model="search" />
            <el-button type="primary" @click="SearchInfo">搜索</el-button>
          </el-col>
          <el-col :span="6" :offset="6"><el-button type="primary" @click="openDrawerFrom">添加</el-button></el-col>
        </el-row>
      </div>
    </template>
    <template #T_sex="{ row }">
      <el-tag class="ml-2" type="success" v-if="row.T_sex === 1">男</el-tag>
      <el-tag class="ml-2" type="danger" v-else>女</el-tag>
    </template>
    <template #T_expire="{ row }">
      <el-tag class="ml-2" type="success" v-if="row.T_expire === 0">否</el-tag>
      <el-tag class="ml-2" type="danger" v-else>是</el-tag>
    </template>
    <template #T_marry="{ row }">
      <el-tag class="ml-2" type="success" v-if="row.T_marry === 0">未婚</el-tag>
      <el-tag class="ml-2" type="danger" v-else>已婚</el-tag>
    </template>
    <template #T_entry_type="{ row }">
      <el-tag class="ml-2" type="success" v-if="+row.T_entry_type === 1">全职</el-tag>
      <el-tag class="ml-2" type="warning" v-else-if="+row.T_entry_type === 2">兼职</el-tag>
      <el-tag class="ml-2" type="danger" v-else>实习生</el-tag>
    </template>
    <template #right="{ row }">
      <el-button link type="primary" size="small" :icon="Edit" @click="EditUserInfo(row)">编辑</el-button>
      <el-button link type="danger" size="small" :icon="Delete" @click="DeleteUserInfo(row)">删除</el-button>
    </template>
  </TableBase>
  <DrawerFrom ref="drawerFromRef" :action="action" @onTableList="UpdateTableList" @onaction="UpdateAction" />
</template>

<style scoped lang="scss">
.input-suffix {
  width: 100%;
  .w-50 {
    width: 12.5rem;
  }
}
.form {
  margin-top: 3rem;
}
</style>