418 lines
10 KiB
Vue
418 lines
10 KiB
Vue
<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="open">评优结算</el-button>
|
|
</el-row>
|
|
<el-table :data="tableData" 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 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="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>
|
|
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
<el-pagination
|
|
v-model:currentPage="queryForm.current"
|
|
v-model:page-size="queryForm.pageSize"
|
|
:page-sizes="[10, 20, 30, 40,50]"
|
|
layout="total, sizes, prev, pager, next, jumper"
|
|
:total="total"
|
|
@size-change="handleSizeChange"
|
|
@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,Edit} from '@element-plus/icons-vue'
|
|
import {ref, watch} from 'vue'
|
|
import axios from "@/util/axios";
|
|
import Dialog from '@/views/permission/dialog/index.vue'
|
|
import AddDialog from '@/views/permission/addDialog/index.vue'
|
|
import UpdateDialog from '@/views/permission/updateDialog/index.vue'
|
|
import { ElMessage,ElMessageBox } from "element-plus";
|
|
|
|
|
|
|
|
|
|
|
|
|
|
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 open = () => {
|
|
ElMessageBox.alert('此接口暂无', 'Title', {
|
|
confirmButtonText: 'OK',
|
|
// callback: ( Action) => {
|
|
// ElMessage({
|
|
// type: 'info',
|
|
// message: `action: ${Action}`,
|
|
// })
|
|
// }
|
|
})
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
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 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
|
|
//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 = (current) => {
|
|
queryForm.value.current=current;
|
|
initEmployeeList();
|
|
}
|
|
|
|
|
|
// =============================================
|
|
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>
|
|
|
|
|
|
|
|
|
|
|