store-manage-app/src/pages/user/detail.vue

135 lines
3.4 KiB
Vue

<template>
<view class="p-base">
<CuNavbar title="员工详情">
<template #right>
<uv-icon color="white" @click="open" name="more-dot-fill"></uv-icon>
</template>
</CuNavbar>
<view class="mt-20rpx card-shadow px-base text-14px">
<view class="flex justify-between items-center min-h-88rpx">
<view class="text-hex-999">头像</view>
<view class="w-80rpx h-80rpx rounded-full overflow-hidden">
<image class="w-full h-full" :src="detail.avatar"></image>
</view>
</view>
<uv-line color="#f5f5f5"></uv-line>
<view class="flex justify-between items-center min-h-88rpx">
<view class="text-hex-999">姓名</view>
<view class="">{{ detail.name }}</view>
</view>
<uv-line color="#f5f5f5"></uv-line>
<view class="flex justify-between items-center min-h-88rpx">
<view class="text-hex-999">手机号</view>
<view class="">{{ detail.phone }}</view>
</view>
<uv-line color="#f5f5f5"></uv-line>
<view class="flex justify-between items-center min-h-88rpx">
<view class="text-hex-999">门店</view>
<view class="" v-if="detail.store">{{ detail.store.address }}</view>
<view class="" v-else></view>
</view>
<uv-line color="#f5f5f5"></uv-line>
</view>
<uv-action-sheet
ref="actionSheet"
:actions="actionlist"
@select="select"
cancelText="取消"
>
</uv-action-sheet>
<uv-modal
ref="modalRef"
:title="modalOptin.title"
:content="modalOptin.content"
@confirm="modalOptin.confirm"
:showCancelButton="true"
></uv-modal>
</view>
</template>
<script setup>
import { ref, reactive } from 'vue'
import CuNavbar from '@/components/cu-navbar/index'
import { http } from '@/utils/request'
import { onLoad, onShow } from '@dcloudio/uni-app'
const modalRef = ref(null)
const modalOptin = reactive({
title: '提示',
content: '',
confirm: () => {},
})
const actionSheet = ref(null)
const id = ref(null)
const detail = ref({})
const actionlist = ref([
{
name: '编辑',
value: 'edit',
},
{
name: '离职',
value: 'quit',
},
{
name: '删除',
value: 'delete',
},
])
onLoad((options) => {
id.value = options.id
})
onShow(() => {
getDetail()
})
const getDetail = () => {
http.get(`/hr/employee/${id.value}`).then((res) => {
detail.value = res
})
}
const open = () => {
actionSheet.value.open()
}
const select = (e) => {
const { value } = e
if (value === 'edit') {
uni.navigateTo({
url: `/pages/user/update?id=${id.value}`,
})
} else if (value === 'quit') {
modalOptin.content = '是否确认离职该员工?'
modalOptin.confirm = onQuick
modalRef.value.open()
} else if (value === 'delete') {
modalOptin.content = '是否确认删除该员工?'
modalOptin.confirm = onDelete
modalRef.value.open()
}
}
const onDelete = () => {
http.delete(`/hr/employee/${id.value}`).then((res) => {
uni.$emit('user:onRefresh')
uni.showToast({
title: '删除成功',
duration: 2000,
icon: 'none',
})
uni.navigateBack()
})
}
const onQuick = () => {
http.post(`/hr/employee/${id.value}/leave`).then((res) => {
uni.showToast({
title: '离职成功',
duration: 2000,
icon: 'none',
})
uni.$emit('user:onRefresh')
uni.navigateBack()
})
}
</script>