提交
This commit is contained in:
Ling53666
466
src/views/employee/index.vue
Normal file
466
src/views/employee/index.vue
Normal file
@ -0,0 +1,466 @@
|
||||
<template>
|
||||
<!-- <g-gantt-chart-->
|
||||
<!-- chart-start="00:00"-->
|
||||
<!-- chart-end="23:59"-->
|
||||
<!-- precision="hour"-->
|
||||
<!-- date-format="HH:mm"-->
|
||||
<!-- bar-start="beginDate"-->
|
||||
<!-- bar-end="endDate"-->
|
||||
<!-- grid-->
|
||||
<!-- >-->
|
||||
<!-- <template #upper-timeunit>-->
|
||||
<!-- <h1>-->
|
||||
<!-- {{-->
|
||||
<!-- `${weekRangeInChina.currentWeekStart} / ${weekRangeInChina.currentWeekEnd}`-->
|
||||
<!-- }}-->
|
||||
<!-- </h1>-->
|
||||
<!-- </template>-->
|
||||
<!-- <g-gantt-row-->
|
||||
<!-- v-for="(item, index) in context"-->
|
||||
<!-- :key="index"-->
|
||||
<!-- :bars="item"-->
|
||||
<!-- :label="item[0].week"-->
|
||||
<!-- highlight-on-hover-->
|
||||
<!-- />-->
|
||||
<!-- </g-gantt-chart>-->
|
||||
<!--=================================================================-->
|
||||
<el-card>
|
||||
<el-row :gutter="20" class="header">
|
||||
<el-col :span="7">
|
||||
<el-input placeholder="请输入美甲师ID..." clearable v-model="query" ></el-input>
|
||||
</el-col>
|
||||
<el-button type="button" :icon="Search" @click="initEmployeeList">搜索</el-button>
|
||||
<el-button type="primary" :icon="DocumentAdd" @click="handleAddDialogValue()" >添加用户</el-button>
|
||||
</el-row>
|
||||
<el-table :data="tempData" stripe style="width: 100%;" showOverflowTooltip>
|
||||
<el-table-column prop="id" label="#ID" width="80" />
|
||||
<el-table-column prop="manicuristName" label="用户昵称" width="200" />
|
||||
<el-table-column prop="manicuristAvatar" label="头像" width="200">
|
||||
<template v-slot="scope">
|
||||
<img :src="scope.row.manicuristAvatar" width="50" height="50"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="性别" prop="gender">
|
||||
<template #default="scope">
|
||||
<div v-if="scope.row.gender==1">女</div>
|
||||
<div v-else>男</div>
|
||||
</template>
|
||||
|
||||
</el-table-column>
|
||||
<el-table-column label="商家" prop="businessId"/>
|
||||
<el-table-column label="签约状态" prop="businessId">
|
||||
<template #default="scope">
|
||||
<div v-if="scope.row.businessId!==null||scope.row.businessId>0">已签约</div>
|
||||
<div v-else style="color: red">未签约</div>
|
||||
</template>
|
||||
|
||||
</el-table-column>
|
||||
<el-table-column prop="phone" label="手机号" width="120px"/>
|
||||
<el-table-column prop="email" label="邮箱" width="180px"/>
|
||||
<el-table-column prop="rating" label="评分" width="200px">
|
||||
<template v-slot="scope" style="height: 100px">
|
||||
<div class="demo-rate-block">
|
||||
<el-rate v-model="scope.row.rating" :colors="colors"/>
|
||||
{{scope.row.rating}}
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="salary" label="余额" />
|
||||
<el-table-column prop="manStatus" label="状态" >
|
||||
<template v-slot="scope">
|
||||
<el-switch
|
||||
v-model="scope.row.manStatus"
|
||||
@change="updateSwtich(scope.row)"
|
||||
style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
|
||||
/>
|
||||
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="createTime" label="注册日期" width="200"/>
|
||||
<el-table-column prop="updateTime" label="最后登录日期" width="200"/>
|
||||
<el-table-column prop="action" fixed="right" label="操作" min-width="220">
|
||||
<template v-slot="scope" >
|
||||
<!-- <el-button @click="handleRouter(scope.row.id)" type="primary" :icon="DocumentAdd" >审核美甲师</el-button>-->
|
||||
<el-button type="success" size="small" @click="handleDialogValue(scope.row.id)">
|
||||
详情
|
||||
</el-button>
|
||||
<el-button type="primary" size="small" :icon="Edit" @click="handleUpdateDialogValue(scope.row.id)"></el-button>
|
||||
<el-button type="danger" size="small" :icon="Delete" @click="handleDelete(scope.row.id)"></el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<el-pagination
|
||||
v-model:currentPage="queryForm.current"
|
||||
layout="total, prev, pager, next, jumper"
|
||||
:total="total"
|
||||
@current-change="handleCurrentChange"
|
||||
/>
|
||||
</el-card>
|
||||
|
||||
|
||||
|
||||
|
||||
<Dialog v-model="edialogVisible" :id="id" :dialogTitle="dialogTitle"
|
||||
@initEmployeeList="initEmployeeList"></Dialog>
|
||||
<AddDialog v-model="edialogaddVisible" :dialogTitle="dialogTitle"
|
||||
@initEmployeeList="initEmployeeList"></AddDialog>
|
||||
<UpdateDialog v-model="edialogUpdateVisible" :id="id" :dialogTitle="dialogTitle"
|
||||
@initEmployeeList="initEmployeeList"></UpdateDialog>
|
||||
</template>
|
||||
<script setup>
|
||||
import {Search,DocumentAdd,Delete,Edit} from '@element-plus/icons-vue'
|
||||
import {ref, watch} from 'vue'
|
||||
import axios from "@/util/axios";
|
||||
import Dialog from '@/views/employee/dialog/index.vue'
|
||||
import AddDialog from '@/views/employee/addDialog/index.vue'
|
||||
import UpdateDialog from '@/views/employee/updateDialog/index.vue'
|
||||
import { ElMessage,ElMessageBox } from "element-plus";
|
||||
import { GGanttChart, GGanttRow } from "@infectoone/vue-ganttastic";
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
const queryForm=ref({
|
||||
current:1,
|
||||
pageSize:10
|
||||
})
|
||||
const query=ref();
|
||||
const total=ref(0)
|
||||
const tableData =ref([])
|
||||
|
||||
|
||||
const id=ref('')
|
||||
const dialogTitle=ref('');
|
||||
const edialogaddVisible=ref(false)
|
||||
const edialogVisible=ref(false)
|
||||
const edialogUpdateVisible=ref(false)
|
||||
|
||||
|
||||
|
||||
|
||||
const tempUpdate=ref({
|
||||
id: null,
|
||||
phone: "",
|
||||
manicuristName: null,
|
||||
userStatus: null,
|
||||
manStatus: null,
|
||||
})
|
||||
const updateSwtich = async (item) => {
|
||||
tempUpdate.value.id = item.id
|
||||
tempUpdate.value.phone = ""
|
||||
tempUpdate.value.manicuristName = item.manicuristName
|
||||
tempUpdate.value.auditStatus = item.auditStatus ?? 0 // 这里设置默认值，或根据实际逻辑设置
|
||||
|
||||
if (item.manStatus == false) {
|
||||
tempUpdate.value.manStatus = 1
|
||||
} else {
|
||||
tempUpdate.value.manStatus = 0
|
||||
}
|
||||
|
||||
let result = await axios.post("manicurist/update", tempUpdate.value)
|
||||
console.log(result)
|
||||
if(result.data.code==0){
|
||||
ElMessage({type:'success',message: '修改状态成功',})
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
const handleRouter=(id)=>{
|
||||
bussinessId.value=id;
|
||||
router.push({path:'/profile',query:{id: bussinessId.value}})
|
||||
|
||||
}
|
||||
|
||||
const handleDialogValue=(ids)=>{
|
||||
id.value=ids;
|
||||
dialogTitle.value="美甲师详情"
|
||||
edialogVisible.value=true
|
||||
}
|
||||
|
||||
const handleUpdateDialogValue=(ids)=>{
|
||||
// console.log(id)
|
||||
id.value=ids;
|
||||
// console.log(id.value)
|
||||
dialogTitle.value="美甲师修改"
|
||||
edialogUpdateVisible.value=true
|
||||
}
|
||||
|
||||
const handleAddDialogValue=()=>{
|
||||
dialogTitle.value="美甲师添加"
|
||||
edialogaddVisible.value=true
|
||||
}
|
||||
|
||||
|
||||
const handleDelete=(ids)=>{
|
||||
// console.log(ids)
|
||||
ElMessageBox.confirm(
|
||||
'您确定要删除这条记录吗？',
|
||||
'系统提示',
|
||||
{
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
}
|
||||
)
|
||||
.then(async() => {
|
||||
let res=await axios.post('manicurist/deleteMan?id='+Number(ids))
|
||||
if(res.data.code==0){
|
||||
ElMessage({
|
||||
type: 'success',
|
||||
message: '删除成功',
|
||||
})
|
||||
initEmployeeList();
|
||||
}else{
|
||||
ElMessage({
|
||||
type: 'error',
|
||||
message: res.data.description,
|
||||
})
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
})
|
||||
// initUserList();
|
||||
}
|
||||
|
||||
|
||||
|
||||
// watch(query,()=>{
|
||||
// // console.log(query.value)
|
||||
// initEmployeeList();
|
||||
// },10000)
|
||||
|
||||
const tempData=ref([])
|
||||
|
||||
const tempstore=()=>{
|
||||
const temp=[]
|
||||
tableData.value.map(item=>{
|
||||
|
||||
if(item.manStatus==0)
|
||||
{
|
||||
item.manStatus=true
|
||||
}
|
||||
else{
|
||||
item.manStatus=false
|
||||
}
|
||||
if (item.auditStatus==1)
|
||||
{
|
||||
temp.push(item)
|
||||
}
|
||||
})
|
||||
tableData.value=temp
|
||||
tempData.value.slice(0,0)
|
||||
tempData.value=tableData.value.slice(0,10)
|
||||
|
||||
//console.log(res.data.data)
|
||||
|
||||
}
|
||||
const initEmployeeList=async()=>{
|
||||
if (!query.value){
|
||||
const res=await axios.post("manicurist/queryAll");
|
||||
// console.log(res.data)
|
||||
tableData.value=res.data.data;
|
||||
let num=tableData.value.filter(item=>item.auditStatus==1)
|
||||
|
||||
total.value=num.length;
|
||||
tempstore();
|
||||
}else{
|
||||
const res = await axios.get("manicurist/queryById", {manicuristId: query.value});
|
||||
// console.log(res.data)
|
||||
const temp = []
|
||||
temp.push(res.data.data)
|
||||
tableData.value = temp;
|
||||
total.value = 1;
|
||||
tempstore();
|
||||
}
|
||||
}
|
||||
initEmployeeList();
|
||||
const handleSizeChange = (pageSize) => {
|
||||
queryForm.value.current=1;
|
||||
queryForm.value.pageSize=pageSize;
|
||||
initEmployeeList();
|
||||
}
|
||||
const handleCurrentChange = (pageNum) => {
|
||||
tempData.value=tableData.value.slice(pageNum*10-10,pageNum*10)
|
||||
}
|
||||
|
||||
|
||||
// =============================================
|
||||
const colors = ref(['#99A9BF', '#F7BA2A', '#FF9900'])
|
||||
|
||||
// =========================================================================================================
|
||||
|
||||
|
||||
const context = ref([
|
||||
[
|
||||
{
|
||||
week: "星期一",
|
||||
beginDate: "06:00",
|
||||
endDate: "22:00",
|
||||
ganttBarConfig: {
|
||||
id: "0",
|
||||
hasHandles: true,
|
||||
label: "需求收集和分析 负责人：小张",
|
||||
style: {
|
||||
background: "#e96560"
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
[
|
||||
{
|
||||
week: "星期二",
|
||||
beginDate: "09:00",
|
||||
endDate: "18:00",
|
||||
ganttBarConfig: {
|
||||
id: "1",
|
||||
hasHandles: true,
|
||||
label: "系统设计 负责人：小强",
|
||||
style: {
|
||||
background: "#5ccfa3"
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
[
|
||||
{
|
||||
week: "星期三",
|
||||
beginDate: "07:00",
|
||||
endDate: "20:00",
|
||||
ganttBarConfig: {
|
||||
id: "2",
|
||||
hasHandles: true,
|
||||
label: "编码实现 负责人：老李",
|
||||
style: {
|
||||
background: "#77d6fa"
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
[
|
||||
{
|
||||
week: "星期四",
|
||||
beginDate: "06:00",
|
||||
endDate: "21:00",
|
||||
ganttBarConfig: {
|
||||
id: "3",
|
||||
hasHandles: true,
|
||||
label: "编码实现 负责人：小明",
|
||||
style: {
|
||||
color: "#fff",
|
||||
background: "#1b2a47"
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
[
|
||||
{
|
||||
week: "星期五",
|
||||
beginDate: "05:00",
|
||||
endDate: "19:00",
|
||||
ganttBarConfig: {
|
||||
id: "4",
|
||||
hasHandles: true,
|
||||
label: "内部测试 负责人：小雪",
|
||||
style: {
|
||||
background: "#5ccfa3"
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
[
|
||||
{
|
||||
week: "星期六",
|
||||
beginDate: "10:00",
|
||||
endDate: "22:00",
|
||||
ganttBarConfig: {
|
||||
id: "5",
|
||||
hasHandles: true,
|
||||
label: "系统优化和文档整理 负责人：小欣",
|
||||
style: {
|
||||
background: "#f8bc45"
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
[
|
||||
{
|
||||
week: "星期天",
|
||||
beginDate: "04:00",
|
||||
endDate: "23:59",
|
||||
ganttBarConfig: {
|
||||
id: "6",
|
||||
immobile: false,
|
||||
hasHandles: false,
|
||||
label: "部署和上线 负责人：老王",
|
||||
style: {
|
||||
background: "#f3953d"
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
]);
|
||||
|
||||
|
||||
const getWeekRange=()=> {
|
||||
const today = new Date();
|
||||
const dayOfWeek = today.getDay();
|
||||
const startDate = new Date(today);
|
||||
startDate.setDate(today.getDate() - dayOfWeek + 1);
|
||||
const endDate = new Date(startDate);
|
||||
endDate.setDate(startDate.getDate() + 6);
|
||||
const formatDate = date => {
|
||||
const year = date.getFullYear();
|
||||
const month = String(date.getMonth() + 1).padStart(2, "0");
|
||||
const day = String(date.getDate()).padStart(2, "0");
|
||||
return `${year}-${month}-${day}`;
|
||||
};
|
||||
const currentWeekStart = formatDate(startDate);
|
||||
const currentWeekEnd = formatDate(endDate);
|
||||
return {
|
||||
currentWeekStart,
|
||||
currentWeekEnd
|
||||
};
|
||||
}
|
||||
const weekRangeInChina = getWeekRange();
|
||||
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.header{
|
||||
padding-bottom: 16px;
|
||||
box-sizing: border-box;
|
||||
|
||||
}
|
||||
.el-pagination{
|
||||
padding-top: 15px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.demo-rate-block {
|
||||
padding: 15px 0;
|
||||
text-align: center;
|
||||
border-right: solid 1px var(--el-border-color);
|
||||
display: inline-block;
|
||||
width: 49%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.demo-rate-block:last-child {
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
.demo-rate-block .demonstration {
|
||||
display: block;
|
||||
color: var(--el-text-color-secondary);
|
||||
font-size: 14px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user