jiaqingjiayi-Web/src/views/employee/index.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="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>