完成时间段页面、接口对接，勘察人员、维修人员排班
This commit is contained in:
monanxiao
@@ -1,11 +1,11 @@
|
||||
import service from "../request.js";
|
||||
const API_BASE_URL = '/schedule';
|
||||
|
||||
// 添加排班
|
||||
// 获取排班人员吗
|
||||
export function getScheduleList(params) {
|
||||
return service({
|
||||
method: "get",
|
||||
url: `${API_BASE_URL}/${params.timeQuantumId}`,
|
||||
url: `${API_BASE_URL}/${params.timeQuantumId}?&date=${params.date}&roleId=${params.roleId}`,
|
||||
data: params
|
||||
});
|
||||
}
|
||||
|
||||
@@ -28,9 +28,9 @@ export function updateQuantum(params) {
|
||||
}
|
||||
|
||||
// 删除排班时段
|
||||
export function delQuantum(id) {
|
||||
export function delQuantum(params) {
|
||||
return service({
|
||||
method: "delete",
|
||||
url: `${API_BASE_URL}/`+id
|
||||
url: `${API_BASE_URL}/${params.id}`
|
||||
});
|
||||
}
|
||||
|
||||
@@ -8,7 +8,7 @@
|
||||
<Header></Header>
|
||||
</el-header>
|
||||
<el-main>
|
||||
<div class="main-tabs flx-row" v-if="themeConfig.istags">
|
||||
<div class="main-tabs flx-row p10" v-if="themeConfig.istags">
|
||||
<tabs></tabs>
|
||||
</div>
|
||||
|
||||
|
||||
+10
-1
@@ -82,6 +82,11 @@ export const menuListItem = [
|
||||
url: "/scheduling",
|
||||
icon: "Calendar",
|
||||
children: [
|
||||
{
|
||||
title: "排班时段",
|
||||
url: "/timeFrame",
|
||||
icon: "Menu",
|
||||
},
|
||||
{
|
||||
title: "勘察工程师",
|
||||
url: "/reconnaissanceScheduling",
|
||||
@@ -91,7 +96,11 @@ export const menuListItem = [
|
||||
title: "维修工程师",
|
||||
url: "/maintainScheduling",
|
||||
icon: "Menu",
|
||||
}
|
||||
},{
|
||||
title: "排班测试",
|
||||
url: "/testScheduling",
|
||||
icon: "Menu",
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
|
||||
@@ -191,6 +191,15 @@ const routerList = [
|
||||
name: "工程师审核",
|
||||
},
|
||||
children: [
|
||||
{
|
||||
path: "/timeFrame",
|
||||
name: "timeFrame",
|
||||
component: () => import("../views/scheduling/timeFrame.vue"),
|
||||
meta: {
|
||||
requiresAuth: true,
|
||||
name: "排班时段",
|
||||
},
|
||||
},
|
||||
{
|
||||
path: "/reconnaissanceScheduling",
|
||||
name: "reconnaissanceScheduling",
|
||||
@@ -209,6 +218,15 @@ const routerList = [
|
||||
name: "维修人员排班",
|
||||
},
|
||||
},
|
||||
{
|
||||
path: "/testScheduling",
|
||||
name: "testScheduling",
|
||||
component: () => import("../views/scheduling/test.vue"),
|
||||
meta: {
|
||||
requiresAuth: true,
|
||||
name: "人员排班测试",
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
|
||||
|
||||
@@ -1 +0,0 @@
|
||||
<template>关于我</template>
|
||||
@@ -1,39 +0,0 @@
|
||||
<template>
|
||||
<el-card>
|
||||
<span class="box-card-title">拖拽🍻🍻🍻🍵🍵🍵</span>
|
||||
<div class="box-card-content">
|
||||
<div v-draggable class="drag-box flx-center text">我可以拖拽哦~</div>
|
||||
<div
|
||||
v-draggable
|
||||
class="drag-box flx-center text"
|
||||
style="background: #eba300; width: 200px; height: 200px"
|
||||
>
|
||||
我可以拖拽哦~
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</template>
|
||||
|
||||
<script setup></script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.box-card-title {
|
||||
padding: 10px;
|
||||
// display: block;
|
||||
}
|
||||
.box-card-content {
|
||||
width: 100%;
|
||||
height: 80vh;
|
||||
background-color: #fff;
|
||||
|
||||
position: relative;
|
||||
.drag-box {
|
||||
position: absolute;
|
||||
top: 110px;
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
color: #fff;
|
||||
background: #bad80a;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,17 +0,0 @@
|
||||
<template>
|
||||
<el-card shadow="never">
|
||||
<div>复制指令 🍤🍤🍤🍤🍤🍤</div>
|
||||
<br />
|
||||
<el-input v-model="input3" placeholder="复制指令 🍤🍤🍤🍤🍤" style="width: 100%">
|
||||
<template #append>
|
||||
<el-button :icon="CopyDocument" v-copy="input3">复制</el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
</el-card>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from "vue";
|
||||
import { CopyDocument } from "@element-plus/icons-vue";
|
||||
const input3 = ref("复制内容复制内容复制内容复制内容复制内容");
|
||||
</script>
|
||||
@@ -1,14 +0,0 @@
|
||||
<template>
|
||||
<el-card shadow="never">
|
||||
<div class="card-title">防抖指令 🍍🍓🍓🍓🍓</div>
|
||||
<br />
|
||||
<el-button type="primary" v-debounce="debounceClick">防抖按钮(1秒后执行)</el-button>
|
||||
</el-card>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ElMessage } from "element-plus";
|
||||
const debounceClick = () => {
|
||||
ElMessage.success("我是防抖指令");
|
||||
};
|
||||
</script>
|
||||
@@ -1,14 +0,0 @@
|
||||
<template>
|
||||
<el-card shadow="never">
|
||||
<div class="card-title">长按指令 🍍🍓🍓🍓🍓</div>
|
||||
<br />
|
||||
<el-button type="primary" v-longPress="debounceClick">长按指令</el-button>
|
||||
</el-card>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ElMessage } from "element-plus";
|
||||
const debounceClick = () => {
|
||||
ElMessage.success("我是长按指令");
|
||||
};
|
||||
</script>
|
||||
@@ -1,14 +0,0 @@
|
||||
<template>
|
||||
<el-card shadow="never">
|
||||
<div class="card-title">节流指令 🍍🍓🍓🍓🍓</div>
|
||||
<br />
|
||||
<el-button type="primary" v-throttle="throttleClick">节流指令</el-button>
|
||||
</el-card>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ElMessage } from 'element-plus'
|
||||
const throttleClick = () => {
|
||||
ElMessage.success('我是节流指令')
|
||||
}
|
||||
</script>
|
||||
@@ -1,163 +0,0 @@
|
||||
<template>
|
||||
<el-card style="height: 85vh">
|
||||
<div id="histogram" style="width: 100%; height: 80vh"></div>
|
||||
</el-card>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import * as echarts from 'echarts'
|
||||
import { onMounted } from 'vue'
|
||||
|
||||
const getHistorgram = () => {
|
||||
document.getElementById('histogram').setAttribute('_echarts_instance_', '')
|
||||
var chartDom = document.getElementById('histogram')
|
||||
var myChart = echarts.init(chartDom)
|
||||
let app = {}
|
||||
var option
|
||||
const categories = (function () {
|
||||
let now = new Date()
|
||||
let res = []
|
||||
let len = 10
|
||||
while (len--) {
|
||||
res.unshift(now.toLocaleTimeString().replace(/^\D*/, ''))
|
||||
now = new Date(+now - 2000)
|
||||
}
|
||||
return res
|
||||
})()
|
||||
const categories2 = (function () {
|
||||
let res = []
|
||||
let len = 10
|
||||
while (len--) {
|
||||
res.push(10 - len - 1)
|
||||
}
|
||||
return res
|
||||
})()
|
||||
const data = (function () {
|
||||
let res = []
|
||||
let len = 10
|
||||
while (len--) {
|
||||
res.push(Math.round(Math.random() * 1000))
|
||||
}
|
||||
return res
|
||||
})()
|
||||
const data2 = (function () {
|
||||
let res = []
|
||||
let len = 0
|
||||
while (len < 10) {
|
||||
res.push(+(Math.random() * 10 + 5).toFixed(1))
|
||||
len++
|
||||
}
|
||||
return res
|
||||
})()
|
||||
option = {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'cross',
|
||||
label: {
|
||||
backgroundColor: '#283b56',
|
||||
},
|
||||
},
|
||||
},
|
||||
// legend: {},
|
||||
// toolbox: {
|
||||
// show: true,
|
||||
// feature: {
|
||||
// dataView: { readOnly: false },
|
||||
// restore: {},
|
||||
// saveAsImage: {},
|
||||
// },
|
||||
// },
|
||||
dataZoom: {
|
||||
show: false,
|
||||
start: 0,
|
||||
end: 100,
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
boundaryGap: true,
|
||||
data: categories,
|
||||
},
|
||||
{
|
||||
type: 'category',
|
||||
boundaryGap: true,
|
||||
data: categories2,
|
||||
},
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
scale: true,
|
||||
name: '价格',
|
||||
max: 30,
|
||||
min: 0,
|
||||
boundaryGap: [0.2, 0.2],
|
||||
},
|
||||
{
|
||||
type: 'value',
|
||||
scale: true,
|
||||
name: '订单数',
|
||||
max: 1200,
|
||||
min: 0,
|
||||
boundaryGap: [0.2, 0.2],
|
||||
},
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: 'Dynamic Bar',
|
||||
type: 'bar',
|
||||
xAxisIndex: 1,
|
||||
yAxisIndex: 1,
|
||||
data: data,
|
||||
},
|
||||
{
|
||||
name: 'Dynamic Line',
|
||||
type: 'line',
|
||||
data: data2,
|
||||
},
|
||||
],
|
||||
}
|
||||
app.count = 11
|
||||
setInterval(function () {
|
||||
let axisData = new Date().toLocaleTimeString().replace(/^\D*/, '')
|
||||
data.shift()
|
||||
data.push(Math.round(Math.random() * 1000))
|
||||
data2.shift()
|
||||
data2.push(+(Math.random() * 10 + 5).toFixed(1))
|
||||
categories.shift()
|
||||
categories.push(axisData)
|
||||
categories2.shift()
|
||||
categories2.push(app.count++)
|
||||
myChart.setOption({
|
||||
xAxis: [
|
||||
{
|
||||
data: categories,
|
||||
},
|
||||
{
|
||||
data: categories2,
|
||||
},
|
||||
],
|
||||
series: [
|
||||
{
|
||||
data: data,
|
||||
},
|
||||
{
|
||||
data: data2,
|
||||
},
|
||||
],
|
||||
})
|
||||
}, 2100)
|
||||
|
||||
option && myChart.setOption(option)
|
||||
window.onresize = () => {
|
||||
myChart.resize()
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
setTimeout(() => {
|
||||
getHistorgram()
|
||||
}, 1000)
|
||||
})
|
||||
</script>
|
||||
@@ -1,88 +0,0 @@
|
||||
<template>
|
||||
<el-card style="height: 85vh">
|
||||
<div id="line" style="width: 100%; height: 80vh"></div>
|
||||
</el-card>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import * as echarts from 'echarts'
|
||||
import { onMounted } from 'vue'
|
||||
|
||||
const getHistorgram = () => {
|
||||
document.getElementById('line').setAttribute('_echarts_instance_', '')
|
||||
var chartDom = document.getElementById('line')
|
||||
var myChart = echarts.init(chartDom)
|
||||
let app = {}
|
||||
var option = {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
axisLabel: {
|
||||
formatter: '{value} °C',
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: 'Highest',
|
||||
type: 'line',
|
||||
data: [10, 11, 13, 11, 12, 12, 9],
|
||||
markPoint: {
|
||||
data: [
|
||||
{ type: 'max', name: 'Max' },
|
||||
{ type: 'min', name: 'Min' },
|
||||
],
|
||||
},
|
||||
markLine: {
|
||||
data: [{ type: 'average', name: 'Avg' }],
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'Lowest',
|
||||
type: 'line',
|
||||
data: [1, -2, 2, 5, 3, 2, 0],
|
||||
markPoint: {
|
||||
data: [{ name: '周最低', value: -2, xAxis: 1, yAxis: -1.5 }],
|
||||
},
|
||||
markLine: {
|
||||
data: [
|
||||
{ type: 'average', name: 'Avg' },
|
||||
[
|
||||
{
|
||||
symbol: 'none',
|
||||
x: '90%',
|
||||
yAxis: 'max',
|
||||
},
|
||||
{
|
||||
symbol: 'circle',
|
||||
label: {
|
||||
position: 'start',
|
||||
formatter: 'Max',
|
||||
},
|
||||
type: 'max',
|
||||
name: '最高点',
|
||||
},
|
||||
],
|
||||
],
|
||||
},
|
||||
},
|
||||
],
|
||||
}
|
||||
option && myChart.setOption(option)
|
||||
window.onresize = () => {
|
||||
myChart.resize()
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
setTimeout(() => {
|
||||
getHistorgram()
|
||||
}, 1000)
|
||||
})
|
||||
</script>
|
||||
@@ -1,40 +0,0 @@
|
||||
<template>
|
||||
<el-card>
|
||||
<div id="container">111</div>
|
||||
</el-card>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { onMounted } from "vue";
|
||||
const initMap = () => {
|
||||
var map = new BMapGL.Map("container"); // 创建地图实例
|
||||
var point = new BMapGL.Point(116.404, 39.915); // 创建点坐标
|
||||
var marker = new BMapGL.Marker(point); // 创建标注
|
||||
map.addOverlay(marker);
|
||||
map.centerAndZoom(point, 15); // 初始化地图，设置中心点坐标和地图级别
|
||||
map.enableScrollWheelZoom(true);
|
||||
var scaleCtrl = new BMapGL.ScaleControl(); // 添加比例尺控件
|
||||
map.addControl(scaleCtrl);
|
||||
var zoomCtrl = new BMapGL.ZoomControl(); // 添加缩放控件
|
||||
map.addControl(zoomCtrl);
|
||||
var cityCtrl = new BMapGL.CityListControl(); // 添加城市列表控件
|
||||
map.addControl(cityCtrl);
|
||||
map.addEventListener("click", function (e) {
|
||||
// 拿到点击地图上这一点的经纬度
|
||||
// alert(e.point.lng + ", " + e.point.lat);
|
||||
// 让地图中心平滑移动到点击的点
|
||||
map.panTo(new BMap.Point(e.point.lng, e.point.lat));
|
||||
});
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
// initMap();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
#container {
|
||||
width: 100%;
|
||||
height: 85vh;
|
||||
}
|
||||
</style>
|
||||
@@ -1,44 +0,0 @@
|
||||
<template>
|
||||
<el-card>
|
||||
<div id="gaodeMap">111</div>
|
||||
</el-card>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { nextTick, onMounted } from "vue";
|
||||
const initGaoMap = () => {
|
||||
var map = new AMap.Map("gaodeMap", {
|
||||
zoom: 11, //级别
|
||||
center: [116.397428, 39.90923], //中心点坐标
|
||||
viewMode: "2D", //使用3D视图
|
||||
});
|
||||
// 在图面添加工具条控件，工具条控件集成了缩放、平移、定位等功能按钮在内的组合控件
|
||||
map.addControl(new AMap.ToolBar());
|
||||
|
||||
// 在图面添加比例尺控件，展示地图在当前层级和纬度下的比例尺
|
||||
map.addControl(new AMap.Scale());
|
||||
|
||||
// 在图面添加鹰眼控件，在地图右下角显示地图的缩略图
|
||||
map.addControl(new AMap.HawkEye({ isOpen: true }));
|
||||
|
||||
// 在图面添加类别切换控件，实现默认图层与卫星图、实施交通图层之间切换的控制
|
||||
// map.addControl(new AMap.MapType())
|
||||
|
||||
// 在图面添加定位控件，用来获取和展示用户主机所在的经纬度位置
|
||||
// map.addControl(new AMap.Geolocation())
|
||||
map.setFitView();
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
nextTick(() => {
|
||||
// initGaoMap()
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
#gaodeMap {
|
||||
width: 100%;
|
||||
height: 85vh;
|
||||
}
|
||||
</style>
|
||||
@@ -1,70 +0,0 @@
|
||||
<template>
|
||||
<el-card style="height: 85vh">
|
||||
<div id="radar" style="width: 100%; height: 80vh"></div>
|
||||
</el-card>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import * as echarts from 'echarts'
|
||||
import { onMounted } from 'vue'
|
||||
|
||||
const getHistorgram = () => {
|
||||
document.getElementById('radar').setAttribute('_echarts_instance_', '')
|
||||
var chartDom = document.getElementById('radar')
|
||||
var myChart = echarts.init(chartDom)
|
||||
let app = {}
|
||||
var option = {
|
||||
color: ['#33ccff ', '#ff99cc'],
|
||||
radar: {
|
||||
// shape: 'circle',
|
||||
indicator: [
|
||||
{ name: '体重', max: 6500 },
|
||||
{ name: '打败', max: 16000 },
|
||||
{ name: '完成目标', max: 30000 },
|
||||
{ name: '身体年龄', max: 38000 },
|
||||
{ name: '运动量', max: 52000 },
|
||||
// { name: 'Marketing', max: 25000 },
|
||||
],
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: 'Budget vs spending',
|
||||
type: 'radar',
|
||||
data: [
|
||||
{
|
||||
value: [4200, 3000, 20000, 35000, 50000, 18000],
|
||||
name: 'Allocated Budget',
|
||||
},
|
||||
{
|
||||
value: [5000, 14000, 28000, 26000, 42000, 21000],
|
||||
name: 'Actual Spending',
|
||||
areaStyle: {
|
||||
color: new echarts.graphic.RadialGradient(0.1, 0.6, 1, [
|
||||
{
|
||||
color: 'rgba(255, 145, 124, 0.1)',
|
||||
offset: 0,
|
||||
},
|
||||
{
|
||||
color: '#ff99cc ',
|
||||
offset: 1,
|
||||
},
|
||||
]),
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
}
|
||||
|
||||
option && myChart.setOption(option)
|
||||
window.onresize = () => {
|
||||
myChart.resize()
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
setTimeout(() => {
|
||||
getHistorgram()
|
||||
}, 1000)
|
||||
})
|
||||
</script>
|
||||
@@ -1,48 +1,31 @@
|
||||
<template>
|
||||
<el-card>
|
||||
<el-row :gutter="10">
|
||||
<el-col :span="4">
|
||||
<el-card class="mt10">
|
||||
|
||||
<el-form :inline="true" :model="formSearch" class="demo-form-inline">
|
||||
<el-form-item label="微信昵称">
|
||||
<el-input
|
||||
v-model="searchWechatNickname"
|
||||
style="max-width: 300px"
|
||||
placeholder="模糊查询微信昵称"
|
||||
class="input-with-select"
|
||||
@change="searchEvnt"
|
||||
>
|
||||
<template #append>
|
||||
<el-button type="success" @click="searchEvnt">查询</el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
</el-col>
|
||||
<el-col :span="4">
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="手机号">
|
||||
<el-input
|
||||
v-model="searchName"
|
||||
style="max-width: 300px"
|
||||
placeholder="模糊查询名字"
|
||||
class="input-with-select"
|
||||
@change="searchEvnt"
|
||||
>
|
||||
<template #append>
|
||||
<el-button type="success" @click="searchEvnt">查询</el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
</el-col>
|
||||
<el-col :span="4">
|
||||
<el-input
|
||||
v-model="searchMobile"
|
||||
v-model="searchWechatNickname"
|
||||
style="max-width: 300px"
|
||||
placeholder="模糊查询手机号"
|
||||
class="input-with-select"
|
||||
@change="searchEvnt"
|
||||
>
|
||||
<template #append>
|
||||
<el-button type="success" @click="searchEvnt">查询</el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
</el-col>
|
||||
</el-row>
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="onSearchSubmit">搜索</el-button>
|
||||
</el-form-item>
|
||||
|
||||
</el-form>
|
||||
|
||||
<el-card class="mt10">
|
||||
<el-table
|
||||
ref="table"
|
||||
:data="tableData"
|
||||
@@ -50,7 +33,7 @@
|
||||
:header-cell-style="{ backgroundColor: '#ecf5ff' }"
|
||||
border
|
||||
stripe
|
||||
style="width: 100%"
|
||||
class="mt10"
|
||||
>
|
||||
<el-table-column
|
||||
label="序号"
|
||||
@@ -135,7 +118,6 @@
|
||||
@current-change="handleCurrentChange"
|
||||
/>
|
||||
</el-card>
|
||||
</el-card>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
@@ -158,6 +140,13 @@ const queryData = ref({
|
||||
size: 10,
|
||||
});
|
||||
|
||||
const formSearch = ref({
|
||||
goodsName:'',
|
||||
status: ' ',
|
||||
id: '',
|
||||
amount: ''
|
||||
});
|
||||
|
||||
const initData = () => {
|
||||
// 加载示例数据
|
||||
// tableData.value = exampleData.value;
|
||||
@@ -195,7 +184,7 @@ const postFormater = (row, column, cellValue) => {
|
||||
}
|
||||
}
|
||||
|
||||
const searchEvnt = () => {
|
||||
const onSearchSubmit = () => {
|
||||
console.log('点击搜索');
|
||||
queryData.value.keyWord = searchWechatNickname.value || searchName.value || searchMobile.value;
|
||||
initData();
|
||||
|
||||
@@ -1,48 +1,31 @@
|
||||
<template>
|
||||
<el-card>
|
||||
<el-row :gutter="10">
|
||||
<el-col :span="4">
|
||||
<el-card class="mt10">
|
||||
|
||||
<el-form :inline="true" :model="formSearch" class="demo-form-inline">
|
||||
<el-form-item label="微信昵称">
|
||||
<el-input
|
||||
v-model="searchWechatNickname"
|
||||
style="max-width: 300px"
|
||||
placeholder="模糊查询微信昵称"
|
||||
class="input-with-select"
|
||||
@change="searchEvnt"
|
||||
>
|
||||
<template #append>
|
||||
<el-button type="success" @click="searchEvnt">查询</el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
</el-col>
|
||||
<el-col :span="4">
|
||||
v-model="searchWechatNickname"
|
||||
style="max-width: 300px"
|
||||
placeholder="模糊查询微信昵称"
|
||||
class="input-with-select"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="手机号">
|
||||
<el-input
|
||||
v-model="searchName"
|
||||
style="max-width: 300px"
|
||||
placeholder="模糊查询名字"
|
||||
class="input-with-select"
|
||||
@change="searchEvnt"
|
||||
>
|
||||
<template #append>
|
||||
<el-button type="success" @click="searchEvnt">查询</el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
</el-col>
|
||||
<el-col :span="4">
|
||||
<el-input
|
||||
v-model="searchMobile"
|
||||
style="max-width: 300px"
|
||||
placeholder="模糊查询手机号"
|
||||
class="input-with-select"
|
||||
@change="searchEvnt"
|
||||
>
|
||||
<template #append>
|
||||
<el-button type="success" @click="searchEvnt">查询</el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
</el-col>
|
||||
</el-row>
|
||||
v-model="searchWechatNickname"
|
||||
style="max-width: 300px"
|
||||
placeholder="模糊查询手机号"
|
||||
class="input-with-select"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="onSearchSubmit">搜索</el-button>
|
||||
</el-form-item>
|
||||
|
||||
</el-form>
|
||||
|
||||
<el-card class="mt10">
|
||||
<el-table
|
||||
ref="table"
|
||||
:data="tableData"
|
||||
@@ -50,7 +33,7 @@
|
||||
:header-cell-style="{ backgroundColor: '#ecf5ff' }"
|
||||
border
|
||||
stripe
|
||||
style="width: 100%"
|
||||
class="mt10"
|
||||
>
|
||||
<el-table-column
|
||||
label="序号"
|
||||
@@ -135,7 +118,6 @@
|
||||
@current-change="handleCurrentChange"
|
||||
/>
|
||||
</el-card>
|
||||
</el-card>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
@@ -158,6 +140,13 @@ const queryData = ref({
|
||||
size: 10,
|
||||
});
|
||||
|
||||
const formSearch = ref({
|
||||
goodsName:'',
|
||||
status: ' ',
|
||||
id: '',
|
||||
amount: ''
|
||||
});
|
||||
|
||||
const initData = () => {
|
||||
// 加载示例数据
|
||||
// tableData.value = exampleData.value;
|
||||
@@ -195,7 +184,7 @@ const postFormater = (row, column, cellValue) => {
|
||||
}
|
||||
}
|
||||
|
||||
const searchEvnt = () => {
|
||||
const onSearchSubmit = () => {
|
||||
console.log('点击搜索');
|
||||
queryData.value.keyWord = searchWechatNickname.value || searchName.value || searchMobile.value;
|
||||
initData();
|
||||
|
||||
+17
-16
@@ -1,11 +1,10 @@
|
||||
<template>
|
||||
<el-card shadow="never" class="header-card">
|
||||
<el-col :span="4">
|
||||
<el-button type="success" @click="drawer = true;drawerEdit = false">
|
||||
<el-icon style="margin-right: 10px;"><CirclePlus /></el-icon>
|
||||
添加
|
||||
</el-button>
|
||||
</el-col>
|
||||
<el-card class="mt10">
|
||||
|
||||
<el-button type="success" @click="drawer = true;drawerEdit = false">
|
||||
<el-icon style="margin-right: 10px;"><CirclePlus /></el-icon>
|
||||
创建服务
|
||||
</el-button>
|
||||
|
||||
<el-drawer v-model="drawer" :direction="direction" :close-on-click-modal="false" :close-on-press-escape="false" :destroy-on-close="true" :show-close="false">
|
||||
<template v-if="!drawerEdit" #header>
|
||||
@@ -77,11 +76,13 @@
|
||||
</el-form>
|
||||
</template>
|
||||
</el-drawer>
|
||||
</el-card>
|
||||
|
||||
<el-card shadow="never">
|
||||
<el-table
|
||||
ref="table"
|
||||
:data="tableData"
|
||||
:default-sort="{ prop: 'date', order: 'descending' }"
|
||||
:header-cell-style="{ backgroundColor: '#ecf5ff' }"
|
||||
class="mt20"
|
||||
>
|
||||
<el-table-column
|
||||
v-for="item in options"
|
||||
@@ -157,14 +158,14 @@
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<el-pagination
|
||||
small
|
||||
background
|
||||
:page-size="queryData.size"
|
||||
layout="prev, pager, next"
|
||||
:total="total"
|
||||
class="mt-4"
|
||||
@current-change="handleCurrentChange"
|
||||
size="small"
|
||||
background
|
||||
layout="prev, pager, next"
|
||||
:total="tableData.length"
|
||||
class="mt-4 mt10"
|
||||
@current-change="handleCurrentChange"
|
||||
/>
|
||||
</el-card>
|
||||
</template>
|
||||
|
||||
@@ -1,10 +1,10 @@
|
||||
<template>
|
||||
|
||||
<el-card>
|
||||
<el-card class="mt10">
|
||||
<el-form :inline="true" :model="formSearch" class="demo-form-inline">
|
||||
<el-form-item label="服务项目">
|
||||
<el-input
|
||||
v-model="searchName"
|
||||
v-model="formSearch.goodsName"
|
||||
style="max-width: 300px"
|
||||
placeholder="请输入服务项目"
|
||||
class="input-with-select"
|
||||
@@ -13,7 +13,7 @@
|
||||
|
||||
<el-form-item label="订单编号">
|
||||
<el-input
|
||||
v-model="searchName"
|
||||
v-model="formSearch.id"
|
||||
style="max-width: 300px"
|
||||
placeholder="订单编号"
|
||||
class="input-with-select"
|
||||
@@ -21,7 +21,7 @@
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="订单状态">
|
||||
<el-select v-model="isStatus" placeholder="订单状态" style="width: 200px">
|
||||
<el-select v-model="formSearch.status" placeholder="订单状态" style="width: 200px">
|
||||
<el-option label="全部" value=" " />
|
||||
<el-option label="待付款" value="0" />
|
||||
<el-option label="已付款" value="1" />
|
||||
@@ -30,7 +30,7 @@
|
||||
|
||||
<el-form-item label="维修费用">
|
||||
<el-input
|
||||
v-model="searchName"
|
||||
v-model="formSearch.amount"
|
||||
style="max-width: 300px"
|
||||
placeholder="维修费用"
|
||||
class="input-with-select"
|
||||
@@ -51,15 +51,13 @@
|
||||
</el-form-item>
|
||||
|
||||
</el-form>
|
||||
</el-card>
|
||||
|
||||
<el-card class="mt10">
|
||||
|
||||
<el-table
|
||||
ref="table"
|
||||
:data="tableData"
|
||||
:default-sort="{ prop: 'date', order: 'descending' }"
|
||||
:header-cell-style="{ backgroundColor: '#ecf5ff' }"
|
||||
class="m10"
|
||||
>
|
||||
|
||||
<el-table-column
|
||||
@@ -302,6 +300,13 @@ const queryData = ref({
|
||||
size: 10,
|
||||
})
|
||||
|
||||
const formSearch = ref({
|
||||
goodsName:'',
|
||||
status: ' ',
|
||||
id: '',
|
||||
amount: ''
|
||||
});
|
||||
|
||||
const detailData = ref();
|
||||
|
||||
const isStatus = ref('');
|
||||
|
||||
+350
-403
@@ -1,328 +1,305 @@
|
||||
<template>
|
||||
<el-card>
|
||||
|
||||
<el-row :gutter="10">
|
||||
|
||||
<el-col :span="4">
|
||||
<el-button type="success" @click="drawer = true">
|
||||
<el-icon style="margin-right: 10px;"><CirclePlus /></el-icon>
|
||||
添加排班
|
||||
</el-button>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="4">
|
||||
<div class="block">
|
||||
<el-date-picker
|
||||
v-model="registerDate"
|
||||
type="daterange"
|
||||
range-separator="至"
|
||||
start-placeholder="注册开始日期"
|
||||
end-placeholder="注册截至日期"
|
||||
:size="size"
|
||||
/>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="4">
|
||||
<el-input
|
||||
v-model="searchName"
|
||||
style="max-width: 300px"
|
||||
placeholder="模糊查询微信昵称"
|
||||
class="input-with-select"
|
||||
onchange="searchEvnt"
|
||||
>
|
||||
|
||||
<template #append>
|
||||
<el-button type="success" @click="searchEvnt">查询</el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="4">
|
||||
<el-input
|
||||
v-model="searchName"
|
||||
style="max-width: 300px"
|
||||
placeholder="模糊查询名字"
|
||||
class="input-with-select"
|
||||
onchange="searchEvnt"
|
||||
>
|
||||
|
||||
<template #append>
|
||||
<el-button type="success" @click="searchEvnt">查询</el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="4">
|
||||
<el-input
|
||||
v-model="searchName"
|
||||
style="max-width: 300px"
|
||||
placeholder="模糊查询手机号"
|
||||
class="input-with-select"
|
||||
onchange="searchEvnt"
|
||||
>
|
||||
|
||||
<template #append>
|
||||
<el-button type="success" @click="searchEvnt">查询</el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
|
||||
</el-card>
|
||||
|
||||
<el-drawer v-model="drawer" :direction="direction">
|
||||
<template #header>
|
||||
<h4>创建排班</h4>
|
||||
</template>
|
||||
<template #default>
|
||||
|
||||
<el-form :model="form" label-width="auto" style="max-width: 600px">
|
||||
|
||||
<el-form-item label="日期时间">
|
||||
<el-date-picker
|
||||
v-model="isDate"
|
||||
type="date"
|
||||
placeholder="排班日期"
|
||||
:disabled-date="disablePastAndSpecificDates"
|
||||
style="margin-right: 20px"
|
||||
/>
|
||||
|
||||
<el-select
|
||||
v-model="isTime"
|
||||
filterable
|
||||
placeholder="请选择排班时间"
|
||||
style="width: 240px"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in timeList"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="排班人员">
|
||||
<el-checkbox-group v-model="isUserData" size="large">
|
||||
<el-checkbox-button v-for="item in userList" :key="item.label" :value="item.label" style="margin: 10px 0;">
|
||||
{{ item.label }}
|
||||
</el-checkbox-button>
|
||||
</el-checkbox-group>
|
||||
</el-form-item>
|
||||
|
||||
|
||||
<div style="display: flex;justify-content: center;margin-top: 50px">
|
||||
<el-button @click="drawer = false">取消</el-button>
|
||||
<el-button type="success" @click="confirmClick">确认</el-button>
|
||||
</div>
|
||||
</el-form>
|
||||
</template>
|
||||
|
||||
</el-drawer>
|
||||
|
||||
<el-card class="mt10">
|
||||
<el-table
|
||||
ref="table"
|
||||
:data="tableData"
|
||||
:default-sort="{ prop: 'date', order: 'descending' }"
|
||||
:header-cell-style="{ backgroundColor: '#ecf5ff' }"
|
||||
border
|
||||
stripe
|
||||
style="width: 100%"
|
||||
>
|
||||
|
||||
<el-table-column
|
||||
label="序号"
|
||||
prop="userId"
|
||||
width="120"
|
||||
align="center"
|
||||
show-overflow-tooltip
|
||||
sortable
|
||||
/>
|
||||
<el-button type="success" @click="drawer = true">
|
||||
<el-icon style="margin-right: 10px;"><CirclePlus /></el-icon>
|
||||
创建排班
|
||||
</el-button>
|
||||
|
||||
<el-table-column label="头像" width="200" align="center">
|
||||
<template #default="scope">
|
||||
<el-avatar :size="50" :src="scope.row.avatar" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
label="微信昵称"
|
||||
prop="nickname"
|
||||
width="300"
|
||||
align="center"
|
||||
show-overflow-tooltip
|
||||
/>
|
||||
<el-table-column
|
||||
label="名字"
|
||||
prop="name"
|
||||
width="300"
|
||||
align="center"
|
||||
show-overflow-tooltip
|
||||
/>
|
||||
<el-table-column
|
||||
label="手机号"
|
||||
prop="mobile"
|
||||
width="300"
|
||||
align="center"
|
||||
show-overflow-tooltip
|
||||
/>
|
||||
<el-table-column
|
||||
label="排班日期"
|
||||
prop="date"
|
||||
width="auto"
|
||||
align="center"
|
||||
show-overflow-tooltip
|
||||
sortable
|
||||
/>
|
||||
<el-drawer v-model="drawer" :direction="direction" :close-on-click-modal="false" :close-on-press-escape="false" :destroy-on-close="true" :show-close="false">
|
||||
<template #header>
|
||||
<h4>创建排班</h4>
|
||||
</template>
|
||||
<template #default>
|
||||
|
||||
<el-table-column
|
||||
label="排班时间段"
|
||||
prop="timeToTime"
|
||||
width="auto"
|
||||
align="center"
|
||||
show-overflow-tooltip
|
||||
/>
|
||||
<el-form :model="scheduleForm" label-width="auto" style="max-width: 600px">
|
||||
|
||||
</el-table>
|
||||
<el-pagination
|
||||
small
|
||||
background
|
||||
layout="prev, pager, next"
|
||||
:total="tableData.length"
|
||||
class="mt-4 mt10"
|
||||
@current-change="handleCurrentChange"
|
||||
/>
|
||||
<el-form-item label="日期时间">
|
||||
<el-date-picker
|
||||
v-model="scheduleForm.date"
|
||||
type="date"
|
||||
placeholder="排班日期"
|
||||
:disabled-date="disablePastAndSpecificDates"
|
||||
style="margin-right: 20px"
|
||||
@change="handleDateChange"
|
||||
/>
|
||||
|
||||
<el-select
|
||||
v-model="scheduleForm.timeQuantumId"
|
||||
filterable
|
||||
placeholder="请选择排班时间"
|
||||
style="width: 240px"
|
||||
@change="handleDateChange"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in timeDataList"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="排班人员">
|
||||
|
||||
<template v-if="userList.length">
|
||||
<el-checkbox-group v-model="scheduleForm.userids" size="large">
|
||||
<el-checkbox-button v-for="item in userList" :key="item.id" :value="item.id">
|
||||
{{ item.nickName }}
|
||||
</el-checkbox-button>
|
||||
</el-checkbox-group>
|
||||
</template>
|
||||
|
||||
<template v-else>
|
||||
<el-alert title="选择排班日期时间后，将会获取排班人员" type="warning" />
|
||||
</template>
|
||||
|
||||
</el-form-item>
|
||||
|
||||
<div style="display: flex;justify-content: center;margin-top: 50px">
|
||||
<el-button @click="handleCancelSchedule">取消</el-button>
|
||||
<el-button type="success" @click="handleSaveSchedule">确认</el-button>
|
||||
</div>
|
||||
|
||||
</el-form>
|
||||
</template>
|
||||
|
||||
</el-drawer>
|
||||
|
||||
<el-container class="mt10">
|
||||
<el-aside width="220px">
|
||||
<el-scrollbar>
|
||||
<el-menu >
|
||||
<el-sub-menu v-for="(dateItem, index) in dateList" :index="index.toString()" :key="index">
|
||||
<template #title>
|
||||
<el-icon><Calendar /></el-icon>
|
||||
<template v-if="defaultOpeneds === index">
|
||||
<b>今天：</b> {{ dateItem }}
|
||||
</template>
|
||||
<template v-else>
|
||||
{{ dateItem }}
|
||||
</template>
|
||||
</template>
|
||||
<el-menu-item-group>
|
||||
<el-menu-item v-for="(timeItem, timeIndex) in timeList" :key="timeItem.id" :index="index.toString() + '-' + timeIndex.toString()" @click="selectTimeClick(dateItem, timeItem)">
|
||||
{{timeItem.startTime}} - {{timeItem.endTime}}
|
||||
</el-menu-item>
|
||||
</el-menu-item-group>
|
||||
</el-sub-menu>
|
||||
</el-menu>
|
||||
</el-scrollbar>
|
||||
</el-aside>
|
||||
<el-container class="ml20">
|
||||
<el-main>
|
||||
<el-scrollbar>
|
||||
<el-table :data="userDataList">
|
||||
|
||||
<el-table-column prop="date" label="日期" width="200" />
|
||||
<el-table-column prop="time" label="时间段" width="200" />
|
||||
|
||||
<el-table-column prop="id" label="ID" width="200" />
|
||||
<el-table-column prop="username" label="名称" width="120" />
|
||||
<el-table-column prop="mobile" label="手机号" />
|
||||
<el-table-column label="头像" width="200" align="center">
|
||||
<template #default="scope">
|
||||
<el-avatar :size="50" :src="scope.row.avatar" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-scrollbar>
|
||||
</el-main>
|
||||
</el-container>
|
||||
</el-container>
|
||||
</el-card>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import * as XLSX from 'xlsx'
|
||||
import {
|
||||
Edit,
|
||||
Delete,
|
||||
InfoFilled,
|
||||
View,
|
||||
ArrowDownBold,
|
||||
Plus,
|
||||
} from '@element-plus/icons-vue'
|
||||
import {nextTick, onMounted, reactive, ref} from 'vue'
|
||||
import { onMounted, ref, nextTick } from 'vue';
|
||||
import {Menu as IconMenu, Message, Setting, Calendar, CirclePlus} from '@element-plus/icons-vue';
|
||||
import {listQuantum} from "../../api/modules/schedulingTime";
|
||||
import {ElMessage} from "element-plus";
|
||||
import {addSchedule, getScheduleList} from "../../api/modules/scheduling";
|
||||
import {listSurveyorsUser} from "../../api/modules/schedulingUser";
|
||||
|
||||
import {options} from './options.js'
|
||||
import {getUserList} from "../../api/modules/user";
|
||||
const item = {
|
||||
date: '2016-05-02',
|
||||
name: 'Tom',
|
||||
address: 'No. 189, Grove St, Los Angeles',
|
||||
};
|
||||
const tableData = ref(Array.from({ length: 5 }).fill(item));
|
||||
|
||||
const tableData = ref([])
|
||||
const dataList = ref([])
|
||||
const table = ref()
|
||||
const tabclickIndex = ref()
|
||||
const isExpand = ref(false)
|
||||
const columnData = ref(JSON.parse(JSON.stringify(options)))
|
||||
const disabled = ref(false)
|
||||
const dialogVisible = ref(false)
|
||||
const total = ref(0)
|
||||
const formInline = ref({})
|
||||
const registerDate = ref('');
|
||||
const searchName = ref('');
|
||||
const scheduleForm = ref({
|
||||
userids: [],
|
||||
roleId: 3,
|
||||
date: '',
|
||||
timeQuantumId: '',
|
||||
});
|
||||
|
||||
const direction = ref('rtl')
|
||||
const drawer = ref(false)
|
||||
const queryData = ref({
|
||||
keyWord: '',
|
||||
page: 1,
|
||||
size: 10,
|
||||
})
|
||||
const userList = ref([]); // 勘察人员列表
|
||||
|
||||
const isUserData = ref([]); // 选中
|
||||
const userList = [
|
||||
{
|
||||
value: '1',
|
||||
label: '张三',
|
||||
},
|
||||
{
|
||||
value: '2',
|
||||
label: '王五',
|
||||
},
|
||||
{
|
||||
value: '3',
|
||||
label: '李四',
|
||||
},
|
||||
{
|
||||
value: '4',
|
||||
label: '赵高',
|
||||
},
|
||||
{
|
||||
value: '5',
|
||||
label: '秦始皇',
|
||||
},{
|
||||
value: '3',
|
||||
label: '李四',
|
||||
},
|
||||
{
|
||||
value: '4',
|
||||
label: '赵高',
|
||||
},
|
||||
{
|
||||
value: '5',
|
||||
label: '秦始皇',
|
||||
},{
|
||||
value: '3',
|
||||
label: '李四',
|
||||
},
|
||||
{
|
||||
value: '4',
|
||||
label: '赵高',
|
||||
},
|
||||
{
|
||||
value: '5',
|
||||
label: '秦始皇',
|
||||
},{
|
||||
value: '3',
|
||||
label: '李四',
|
||||
},
|
||||
{
|
||||
value: '4',
|
||||
label: '赵高',
|
||||
},
|
||||
{
|
||||
value: '5',
|
||||
label: '秦始皇',
|
||||
},{
|
||||
value: '3',
|
||||
label: '李四',
|
||||
},
|
||||
{
|
||||
value: '4',
|
||||
label: '赵高',
|
||||
},
|
||||
{
|
||||
value: '5',
|
||||
label: '秦始皇',
|
||||
},
|
||||
]; // 用户列表
|
||||
// 日期列表
|
||||
const dateList = ref([]);
|
||||
const timeList = ref([]); // 时间段
|
||||
const timeDataList = ref([]); // 时间段
|
||||
const defaultOpeneds = ref([]);
|
||||
|
||||
const isTime = ref(''); // 选中时间段
|
||||
const userDataList = ref([]); // 已排期用户
|
||||
|
||||
const timeList = [
|
||||
{
|
||||
value: '1',
|
||||
label: '9:00-11:00',
|
||||
},
|
||||
{
|
||||
value: '2',
|
||||
label: '11:00-12:00',
|
||||
},
|
||||
{
|
||||
value: '3',
|
||||
label: '13:00-14:00',
|
||||
},
|
||||
{
|
||||
value: '4',
|
||||
label: '14:00-15:00',
|
||||
},
|
||||
{
|
||||
value: '5',
|
||||
label: '15:00-16:00',
|
||||
},
|
||||
];
|
||||
// 初始化
|
||||
const initData = () => {
|
||||
|
||||
const isDate = ref(''); // 当前日期
|
||||
const currentDate = new Date();
|
||||
const currentYear = currentDate.getFullYear();
|
||||
const currentMonth = currentDate.getMonth();
|
||||
|
||||
// 上个月的第一天和最后一天
|
||||
const lastMonthFirstDay = new Date(currentYear, currentMonth - 1, 1);
|
||||
const lastMonthLastDay = new Date(currentYear, currentMonth, 0);
|
||||
|
||||
// 这个月的第一天和最后一天
|
||||
const thisMonthFirstDay = new Date(currentYear, currentMonth, 1);
|
||||
const thisMonthLastDay = new Date(currentYear, currentMonth + 1, 0);
|
||||
|
||||
// 下个月的第一天和最后一天
|
||||
const nextMonthFirstDay = new Date(currentYear, currentMonth + 1, 1);
|
||||
const nextMonthLastDay = new Date(currentYear, currentMonth + 2, 0);
|
||||
|
||||
// 添加上个月的日期
|
||||
// for (let d = lastMonthFirstDay; d <= lastMonthLastDay; d.setDate(d.getDate() + 1)) {
|
||||
// dateList.value.push(formatDate(new Date(d)));
|
||||
// }
|
||||
|
||||
// 添加这个月的日期
|
||||
for (let d = thisMonthFirstDay; d <= thisMonthLastDay; d.setDate(d.getDate() + 1)) {
|
||||
dateList.value.push(formatDate(new Date(d)));
|
||||
}
|
||||
|
||||
// 添加下个月的日期
|
||||
for (let d = nextMonthFirstDay; d <= nextMonthLastDay; d.setDate(d.getDate() + 1)) {
|
||||
dateList.value.push(formatDate(new Date(d)));
|
||||
}
|
||||
|
||||
// 找到今天的日期在 dateList 中的索引
|
||||
const todayIndex = dateList.value.indexOf(formatDate(currentDate));
|
||||
if (todayIndex !== -1) {
|
||||
defaultOpeneds.value = todayIndex;
|
||||
}
|
||||
|
||||
// 获取排班时段
|
||||
listQuantum().then((res) => {
|
||||
|
||||
timeList.value = res.data;
|
||||
|
||||
timeDataList.value = res.data.map(item => ({
|
||||
value: item.id,
|
||||
label: `${item.startTime}-${item.endTime}`
|
||||
}));
|
||||
|
||||
initSelectTimeClick(formatDate(currentDate), timeList.value);// 获取当天所有时段人员
|
||||
})
|
||||
};
|
||||
|
||||
// 监听选中状态
|
||||
const handleDateChange = (value) => {
|
||||
|
||||
if(!scheduleForm.value.date)
|
||||
{
|
||||
scheduleForm.value.timeQuantumId = '';
|
||||
|
||||
ElMessage({
|
||||
type: 'warning',
|
||||
message: '请先选择排班日期'
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
if(!scheduleForm.value.timeQuantumId)
|
||||
{
|
||||
ElMessage({
|
||||
type: 'warning',
|
||||
message: '请继续选择排班时间段'
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
// 查询勘察人员列表
|
||||
let params = {
|
||||
date: formatDate(scheduleForm.value.date),
|
||||
timeQuantumId: scheduleForm.value.timeQuantumId
|
||||
};
|
||||
|
||||
userList.value = [];
|
||||
|
||||
listSurveyorsUser(params).then((res)=>{
|
||||
|
||||
userList.value = res.data
|
||||
});
|
||||
}
|
||||
|
||||
// 添加排班人员
|
||||
const handleSaveSchedule = () => {
|
||||
|
||||
if(!scheduleForm.value.date){
|
||||
ElMessage({
|
||||
type: 'warning',
|
||||
message: '请选择排班日期'
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
if(!scheduleForm.value.timeQuantumId){
|
||||
ElMessage({
|
||||
type: 'warning',
|
||||
message: '请选择排版时段'
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
if(scheduleForm.value.userids.length < 1){
|
||||
ElMessage({
|
||||
type: 'warning',
|
||||
message: '请选择人员'
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
scheduleForm.value.date = formatDate(scheduleForm.value.date); //转换日期
|
||||
|
||||
// 添加人员
|
||||
addSchedule(scheduleForm.value).then((res) => {
|
||||
|
||||
scheduleForm.value = {
|
||||
userids: [],
|
||||
roleId: 3,
|
||||
date: '',
|
||||
timeQuantumId: '',
|
||||
}
|
||||
|
||||
drawer.value = false;
|
||||
initData();
|
||||
|
||||
ElMessage({
|
||||
type: 'success',
|
||||
message: '新增成功！'
|
||||
});
|
||||
|
||||
})
|
||||
|
||||
};
|
||||
// 取消添加排班人员
|
||||
const handleCancelSchedule = () => {
|
||||
|
||||
drawer.value = false;
|
||||
|
||||
scheduleForm.value = {
|
||||
userids: [],
|
||||
roleId: 3,
|
||||
date: '',
|
||||
timeQuantumId: '',
|
||||
};
|
||||
};
|
||||
|
||||
// 禁止选择之前的日期
|
||||
const disablePastAndSpecificDates = (date) => {
|
||||
@@ -347,112 +324,82 @@ const disablePastAndSpecificDates = (date) => {
|
||||
});
|
||||
};
|
||||
|
||||
// 获取当天时间段所有人员
|
||||
const initSelectTimeClick = (dateItem, timeList) => {
|
||||
|
||||
const initData = () => {
|
||||
let params = {
|
||||
date: dateItem,
|
||||
roleId: 3,
|
||||
}
|
||||
|
||||
timeList.map(item => {
|
||||
|
||||
let params = {
|
||||
date: dateItem,
|
||||
roleId: 3,
|
||||
timeQuantumId: item.id
|
||||
}
|
||||
|
||||
// 获取用户数据
|
||||
getScheduleList(params).then((res) => {
|
||||
|
||||
if(res.data.length)
|
||||
{
|
||||
res.data.map(resItem => {
|
||||
|
||||
resItem.date = params.date;
|
||||
resItem.time = item.startTime + '-' + item.endTime;
|
||||
userDataList.value.push(resItem);
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
})
|
||||
|
||||
// 获取当前日期
|
||||
isDate.value = new Date();
|
||||
tableData.value = columnData.value;
|
||||
|
||||
// orderLists(queryData.value).then((res) => {
|
||||
// console.log(res.data.data)
|
||||
// // total.value = res.data.data.total
|
||||
// tableData.value = res.data.data
|
||||
// })
|
||||
}
|
||||
const itemEditHanld = (item) => {
|
||||
item.itemEdit = !item.itemEdit
|
||||
// // console.log(JSON.stringify(item));
|
||||
// tabclickIndex.value = item;
|
||||
}
|
||||
const handleSizeChange = (val) => {
|
||||
console.log(val)
|
||||
}
|
||||
const handleSelectionChange = (val) => {
|
||||
}
|
||||
const handleCurrentChange = (val) => {
|
||||
queryData.value.size = 10
|
||||
queryData.value.page = val
|
||||
initData(queryData.value)
|
||||
}
|
||||
const handleClose = () => {
|
||||
}
|
||||
const dialogVisibleHanle = () => {
|
||||
console.log('滑动加载')
|
||||
}
|
||||
const handleExpand = () => {
|
||||
isExpand.value = false
|
||||
tableData.value.forEach((item) => {
|
||||
table.value.toggleRowExpansion(item, isExpand.value)
|
||||
// 获取用户列表
|
||||
const selectTimeClick = (dateItem, timeItem) => {
|
||||
|
||||
let params = {
|
||||
date: dateItem,
|
||||
roleId: 3,
|
||||
timeQuantumId: timeItem.id
|
||||
};
|
||||
|
||||
userDataList.value = [];
|
||||
|
||||
getScheduleList(params).then((res) => {
|
||||
|
||||
|
||||
res.data.map(resItem => {
|
||||
|
||||
resItem.date = params.date;
|
||||
resItem.time = timeItem.startTime + '-' + timeItem.endTime;
|
||||
userDataList.value.push(resItem);
|
||||
})
|
||||
|
||||
})
|
||||
}
|
||||
|
||||
const handleOpen = () => {
|
||||
isExpand.value = true
|
||||
tableData.value.forEach((item) => {
|
||||
table.value.toggleRowExpansion(item, isExpand.value)
|
||||
})
|
||||
}
|
||||
|
||||
// 搜索事件
|
||||
const searchEvnt = ()=> {
|
||||
console.log('点击搜索');
|
||||
// 日期格式
|
||||
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}`;
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
initData()
|
||||
})
|
||||
initData();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.mt-4 {
|
||||
float: right;
|
||||
text-align: right;
|
||||
margin-bottom: 20px;
|
||||
<style scoped>
|
||||
.mt10 {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.demo-form-inline {
|
||||
}
|
||||
|
||||
.dragClass {
|
||||
background: rgba($color: #41c21a, $alpha: 0.5) !important;
|
||||
}
|
||||
|
||||
// 停靠
|
||||
.ghostClass {
|
||||
background: rgba($color: #6cacf5, $alpha: 0.5) !important;
|
||||
}
|
||||
|
||||
// 选择
|
||||
.chosenClass:hover > td {
|
||||
background: rgba($color: #f56c6c, $alpha: 0.5) !important;
|
||||
}
|
||||
|
||||
.icon-view {
|
||||
font-size: 20px;
|
||||
color: #673ab7;
|
||||
margin: 0 10px;
|
||||
}
|
||||
|
||||
.icon-edit {
|
||||
font-size: 20px;
|
||||
color: #2f60c2;
|
||||
margin: 0 10px;
|
||||
}
|
||||
|
||||
.icon-dele {
|
||||
font-size: 20px;
|
||||
color: #ff5722;
|
||||
}
|
||||
|
||||
.btn-color {
|
||||
background: #fff;
|
||||
color: #4c60cc;
|
||||
}
|
||||
|
||||
.expand-title {
|
||||
padding: 10px;
|
||||
color: #919399;
|
||||
font-weight: 600;
|
||||
.ml20 {
|
||||
margin-left: 20px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,87 +1,11 @@
|
||||
<template>
|
||||
<el-card>
|
||||
<el-card class="mt10">
|
||||
|
||||
<el-col :span="4">
|
||||
<el-button type="success" @click="drawer = true">
|
||||
<el-icon style="margin-right: 10px;"><CirclePlus /></el-icon>
|
||||
创建排班
|
||||
</el-button>
|
||||
</el-col>
|
||||
<el-button type="success" @click="drawer = true">
|
||||
<el-icon style="margin-right: 10px;"><CirclePlus /></el-icon>
|
||||
创建排班
|
||||
</el-button>
|
||||
|
||||
<el-form :inline="true" :model="queryData" class="mt20">
|
||||
<el-form-item label="排班日期">
|
||||
<el-date-picker
|
||||
v-model="queryData.date"
|
||||
type="date"
|
||||
placeholder="请选择排班日期"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="时段">
|
||||
<el-select
|
||||
v-model="queryData.timeQuantumId"
|
||||
placeholder="请选择排班时段"
|
||||
onchange="handleCurrentChange"
|
||||
style="min-width: 150px"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in timeList"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="handleCurrentChange">搜索</el-button>
|
||||
</el-form-item>
|
||||
|
||||
</el-form>
|
||||
|
||||
<el-drawer
|
||||
v-model:visible="timeItem"
|
||||
:direction="direction"
|
||||
:close-on-click-modal="false"
|
||||
:close-on-press-escape="false"
|
||||
:destroy-on-close="true"
|
||||
:show-close="false"
|
||||
title="创建/编辑时间段"
|
||||
>
|
||||
<el-form
|
||||
:model="timeForm"
|
||||
label-width="120px"
|
||||
:rules="formRules"
|
||||
ref="timeFormRef"
|
||||
style="max-width: 600px"
|
||||
>
|
||||
<el-form-item label="起始时间" prop="startTime">
|
||||
<el-time-picker
|
||||
v-model="timeForm.startTime"
|
||||
placeholder="请选择起始时间"
|
||||
:picker-options="startTimeOptions"
|
||||
format="HH:mm"
|
||||
value-format="HH:mm"
|
||||
></el-time-picker>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="结束时间" prop="endTime">
|
||||
<el-time-picker
|
||||
v-model="timeForm.endTime"
|
||||
placeholder="请选择结束时间"
|
||||
:picker-options="endTimeOptions"
|
||||
format="HH:mm"
|
||||
value-format="HH:mm"
|
||||
@change="checkEndTime"
|
||||
></el-time-picker>
|
||||
</el-form-item>
|
||||
|
||||
<div style="display: flex; justify-content: flex-end; margin-top: 20px">
|
||||
<el-button @click="timeItem = false">取消</el-button>
|
||||
<el-button type="primary" @click="handleSaveQuantum">确认</el-button>
|
||||
</div>
|
||||
</el-form>
|
||||
</el-drawer>
|
||||
<el-drawer v-model="drawer" :direction="direction" :close-on-click-modal="false" :close-on-press-escape="false" :destroy-on-close="true" :show-close="false">
|
||||
<template #header>
|
||||
<h4>创建排班</h4>
|
||||
@@ -90,291 +14,230 @@
|
||||
|
||||
<el-form :model="scheduleForm" label-width="auto" style="max-width: 600px">
|
||||
|
||||
<el-form-item label="日期时间">
|
||||
<el-date-picker
|
||||
v-model="scheduleForm.date"
|
||||
type="date"
|
||||
placeholder="排班日期"
|
||||
:disabled-date="disablePastAndSpecificDates"
|
||||
style="margin-right: 20px"
|
||||
<el-form-item label="日期时间">
|
||||
<el-date-picker
|
||||
v-model="scheduleForm.date"
|
||||
type="date"
|
||||
placeholder="排班日期"
|
||||
:disabled-date="disablePastAndSpecificDates"
|
||||
style="margin-right: 20px"
|
||||
@change="handleDateChange"
|
||||
/>
|
||||
|
||||
<el-select
|
||||
v-model="scheduleForm.timeQuantumId"
|
||||
filterable
|
||||
placeholder="请选择排班时间"
|
||||
style="width: 240px"
|
||||
@change="handleDateChange"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in timeDataList"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-select
|
||||
v-model="scheduleForm.timeQuantumId"
|
||||
filterable
|
||||
placeholder="请选择排班时间"
|
||||
style="width: 240px"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in timeList"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="排班人员">
|
||||
|
||||
<el-form-item label="排班人员">
|
||||
<template v-if="userList.length">
|
||||
<el-checkbox-group v-model="scheduleForm.userids" size="large">
|
||||
<el-checkbox-button v-for="item in userList" :key="item.id" :value="item.id">
|
||||
{{ item.nickName }}
|
||||
</el-checkbox-button>
|
||||
</el-checkbox-group>
|
||||
</el-form-item>
|
||||
</template>
|
||||
|
||||
<template v-else>
|
||||
<el-alert title="选择排班日期时间后，将会获取排班人员" type="warning" />
|
||||
</template>
|
||||
|
||||
</el-form-item>
|
||||
|
||||
<div style="display: flex;justify-content: center;margin-top: 50px">
|
||||
<el-button @click="handleCancelSchedule">取消</el-button>
|
||||
<el-button type="success" @click="handleSaveSchedule">确认</el-button>
|
||||
<el-button type="success" @click="handleSaveSchedule">确认</el-button>
|
||||
</div>
|
||||
|
||||
</el-form>
|
||||
</template>
|
||||
|
||||
</el-drawer>
|
||||
</el-card>
|
||||
|
||||
<el-card class="mt10" v-if="false">
|
||||
<el-button type="success" @click="timeItem = true">
|
||||
<el-icon style="margin-right: 10px;"><CirclePlus /></el-icon>
|
||||
创建时段
|
||||
</el-button>
|
||||
<el-table
|
||||
ref="timeTable"
|
||||
:data="timeList"
|
||||
:default-sort="{ prop: 'id', order: 'ascending' }"
|
||||
:header-cell-style="{ backgroundColor: '#ecf5ff' }"
|
||||
border
|
||||
stripe
|
||||
style="width: 100%"
|
||||
>
|
||||
<el-container class="mt10">
|
||||
<el-aside width="220px">
|
||||
<el-scrollbar>
|
||||
<el-menu >
|
||||
<el-sub-menu v-for="(dateItem, index) in dateList" :index="index.toString()" :key="index">
|
||||
<template #title>
|
||||
<el-icon><Calendar /></el-icon>
|
||||
<template v-if="defaultOpeneds === index">
|
||||
<b>今天：</b> {{ dateItem }}
|
||||
</template>
|
||||
<template v-else>
|
||||
{{ dateItem }}
|
||||
</template>
|
||||
</template>
|
||||
<el-menu-item-group>
|
||||
<el-menu-item v-for="(timeItem, timeIndex) in timeList" :key="timeItem.id" :index="index.toString() + '-' + timeIndex.toString()" @click="selectTimeClick(dateItem, timeItem)">
|
||||
{{timeItem.startTime}} - {{timeItem.endTime}}
|
||||
</el-menu-item>
|
||||
</el-menu-item-group>
|
||||
</el-sub-menu>
|
||||
</el-menu>
|
||||
</el-scrollbar>
|
||||
</el-aside>
|
||||
<el-container class="ml20">
|
||||
<el-main>
|
||||
<el-scrollbar>
|
||||
<el-table :data="userDataList">
|
||||
|
||||
<el-table-column
|
||||
label="序号"
|
||||
prop="id"
|
||||
width="80"
|
||||
align="center"
|
||||
show-overflow-tooltip
|
||||
sortable
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column prop="date" label="日期" width="200" />
|
||||
<el-table-column prop="time" label="时间段" width="200" />
|
||||
|
||||
<el-table-column
|
||||
label="起始时间"
|
||||
prop="startTime"
|
||||
align="center"
|
||||
show-overflow-tooltip
|
||||
/>
|
||||
|
||||
<el-table-column
|
||||
label="结束时间"
|
||||
prop="startTime"
|
||||
align="center"
|
||||
show-overflow-tooltip
|
||||
/>
|
||||
|
||||
<el-table-column
|
||||
label="状态"
|
||||
prop="flag"
|
||||
width="80"
|
||||
align="center"
|
||||
show-overflow-tooltip
|
||||
/>
|
||||
<el-table-column
|
||||
label="操作"
|
||||
width="auto"
|
||||
align="center"
|
||||
show-overflow-tooltip
|
||||
>
|
||||
<template v-slot:default="scope">
|
||||
<el-button type="info" :icon="Edit" @click="handleEditQuantum(scope.row)">编辑</el-button>
|
||||
<el-button type="danger" :icon="Delete" @click="handleDel(scope.row)">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
</el-table>
|
||||
</el-card>
|
||||
<el-card class="mt10" v-if="true">
|
||||
<el-table
|
||||
ref="table"
|
||||
:data="tableData"
|
||||
:default-sort="{ prop: 'date', order: 'descending' }"
|
||||
:header-cell-style="{ backgroundColor: '#ecf5ff' }"
|
||||
border
|
||||
stripe
|
||||
style="width: 100%"
|
||||
>
|
||||
|
||||
<el-table-column
|
||||
label="序号"
|
||||
prop="userId"
|
||||
width="120"
|
||||
align="center"
|
||||
show-overflow-tooltip
|
||||
sortable
|
||||
/>
|
||||
|
||||
<el-table-column label="头像" width="200" align="center">
|
||||
<template #default="scope">
|
||||
<el-avatar :size="50" :src="scope.row.avatar" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
label="微信昵称"
|
||||
prop="nickname"
|
||||
width="300"
|
||||
align="center"
|
||||
show-overflow-tooltip
|
||||
/>
|
||||
<el-table-column
|
||||
label="名字"
|
||||
prop="name"
|
||||
width="300"
|
||||
align="center"
|
||||
show-overflow-tooltip
|
||||
/>
|
||||
<el-table-column
|
||||
label="手机号"
|
||||
prop="mobile"
|
||||
width="300"
|
||||
align="center"
|
||||
show-overflow-tooltip
|
||||
/>
|
||||
<el-table-column
|
||||
label="排班日期"
|
||||
prop="date"
|
||||
width="auto"
|
||||
align="center"
|
||||
show-overflow-tooltip
|
||||
sortable
|
||||
/>
|
||||
|
||||
<el-table-column
|
||||
label="排班时间段"
|
||||
prop="timeToTime"
|
||||
width="auto"
|
||||
align="center"
|
||||
show-overflow-tooltip
|
||||
/>
|
||||
|
||||
</el-table>
|
||||
<el-pagination
|
||||
small
|
||||
background
|
||||
layout="prev, pager, next"
|
||||
:total="tableData.length"
|
||||
class="mt-4 mt10"
|
||||
@current-change="handleCurrentChange"
|
||||
/>
|
||||
<el-table-column prop="id" label="ID" width="200" />
|
||||
<el-table-column prop="username" label="名称" width="120" />
|
||||
<el-table-column prop="mobile" label="手机号" />
|
||||
<el-table-column label="头像" width="200" align="center">
|
||||
<template #default="scope">
|
||||
<el-avatar :size="50" :src="scope.row.avatar" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-scrollbar>
|
||||
</el-main>
|
||||
</el-container>
|
||||
</el-container>
|
||||
</el-card>
|
||||
</template>
|
||||
<script setup>
|
||||
import {listQuantum, addQuantum, updateQuantum, delQuantum} from "../../api/modules/schedulingTime";
|
||||
import {getScheduleList, addSchedule} from "../../api/modules/scheduling";
|
||||
import {listSurveyorsUser, listMaintenanceUser} from "../../api/modules/schedulingUser";
|
||||
import {nextTick, onMounted, reactive, ref, watch } from 'vue'
|
||||
|
||||
import {CirclePlus, Plus} from "@element-plus/icons-vue";
|
||||
import {ElMessage, ElMessageBox, timelineItemProps} from "element-plus";
|
||||
import {
|
||||
Check,
|
||||
Delete,
|
||||
Edit,
|
||||
Message,
|
||||
Search,
|
||||
Star,
|
||||
} from '@element-plus/icons-vue'
|
||||
const tableData = ref([])
|
||||
const table = ref()
|
||||
const dialogVisible = ref(false)
|
||||
const total = ref(0)
|
||||
<script setup>
|
||||
import { onMounted, ref, nextTick } from 'vue';
|
||||
import {Menu as IconMenu, Message, Setting, Calendar, CirclePlus} from '@element-plus/icons-vue';
|
||||
import {listQuantum} from "../../api/modules/schedulingTime";
|
||||
import {ElMessage} from "element-plus";
|
||||
import {addSchedule, getScheduleList} from "../../api/modules/scheduling";
|
||||
import {listSurveyorsUser} from "../../api/modules/schedulingUser";
|
||||
|
||||
const item = {
|
||||
date: '2016-05-02',
|
||||
name: 'Tom',
|
||||
address: 'No. 189, Grove St, Los Angeles',
|
||||
};
|
||||
const tableData = ref(Array.from({ length: 5 }).fill(item));
|
||||
|
||||
const scheduleForm = ref({
|
||||
userids: [],
|
||||
roleId: 2,
|
||||
date: '',
|
||||
timeQuantumId: '',
|
||||
});
|
||||
const setup = () => {
|
||||
const direction = 'rtl'; // 或者 'ltr', 'ttb', 'btt' 根据需要设置
|
||||
const timeForm = reactive({
|
||||
startTime: '',
|
||||
endTime: '',
|
||||
});
|
||||
const timeItem = ref(false)
|
||||
const timeItemEdit = ref(false)
|
||||
const formRules = {
|
||||
startTime: [
|
||||
{ required: true, message: '请输入起始时间', trigger: 'blur' },
|
||||
],
|
||||
endTime: [
|
||||
{ required: true, message: '请输入结束时间', trigger: 'blur' },
|
||||
{ validator: validateEndTime, trigger: 'change' },
|
||||
],
|
||||
};
|
||||
const timeFormRef = ref(null);
|
||||
const startTimeOptions = {
|
||||
selectableRange: '00:00:00 - 23:59:59',
|
||||
format: 'HH:mm',
|
||||
valueFormat: 'HH:mm',
|
||||
};
|
||||
const endTimeOptions = {
|
||||
...startTimeOptions,
|
||||
// 可以在这里添加额外的限制，但通常我们在验证函数中处理
|
||||
};
|
||||
const validateEndTime = (rule, value, callback) => {
|
||||
const startTime = timeForm.startTime;
|
||||
if (!value) {
|
||||
return callback(new Error('请输入结束时间'));
|
||||
}
|
||||
if (new Date(`1970-01-01T${startTime}:00Z`).getTime() >= new Date(`1970-01-01T${value}:00Z`).getTime()) {
|
||||
return callback(new Error('起始时间必须小于结束时间'));
|
||||
}
|
||||
callback();
|
||||
};
|
||||
|
||||
const checkEndTime = (value) => {
|
||||
timeFormRef.value.validateField('endTime');
|
||||
};
|
||||
const direction = ref('rtl')
|
||||
const drawer = ref(false)
|
||||
const userList = ref([]); // 勘察人员列表
|
||||
|
||||
const handleSaveQuantum = () => {
|
||||
timeFormRef.value.validate((valid) => {
|
||||
if (valid) {
|
||||
// 提交表单数据
|
||||
console.log('表单数据:', timeForm);
|
||||
// 这里可以添加保存逻辑，比如调用 API
|
||||
if(itemForm.id&&itemForm.id ===''){
|
||||
addQuantum(itemForm).then((res) => {
|
||||
ElMessage({
|
||||
type: 'success',
|
||||
message: '新增成功！'
|
||||
});
|
||||
})
|
||||
} else {
|
||||
updateQuantum(itemForm).then((res) => {
|
||||
ElMessage({
|
||||
type: 'success',
|
||||
message: '修改成功！'
|
||||
});
|
||||
})
|
||||
}
|
||||
timeItem.value = false; // 保存后关闭抽屉
|
||||
} else {
|
||||
console.log('表单验证失败!');
|
||||
return false;
|
||||
}
|
||||
});
|
||||
};
|
||||
// 日期列表
|
||||
const dateList = ref([]);
|
||||
const timeList = ref([]); // 时间段
|
||||
const timeDataList = ref([]); // 时间段
|
||||
const defaultOpeneds = ref([]);
|
||||
|
||||
return {
|
||||
timeItem,
|
||||
direction,
|
||||
timeForm,
|
||||
formRules,
|
||||
timeFormRef,
|
||||
startTimeOptions,
|
||||
endTimeOptions,
|
||||
handleSaveQuantum,
|
||||
};
|
||||
const userDataList = ref([]); // 已排期用户
|
||||
|
||||
// 初始化
|
||||
const initData = () => {
|
||||
|
||||
const currentDate = new Date();
|
||||
const currentYear = currentDate.getFullYear();
|
||||
const currentMonth = currentDate.getMonth();
|
||||
|
||||
// 上个月的第一天和最后一天
|
||||
const lastMonthFirstDay = new Date(currentYear, currentMonth - 1, 1);
|
||||
const lastMonthLastDay = new Date(currentYear, currentMonth, 0);
|
||||
|
||||
// 这个月的第一天和最后一天
|
||||
const thisMonthFirstDay = new Date(currentYear, currentMonth, 1);
|
||||
const thisMonthLastDay = new Date(currentYear, currentMonth + 1, 0);
|
||||
|
||||
// 下个月的第一天和最后一天
|
||||
const nextMonthFirstDay = new Date(currentYear, currentMonth + 1, 1);
|
||||
const nextMonthLastDay = new Date(currentYear, currentMonth + 2, 0);
|
||||
|
||||
// 添加上个月的日期
|
||||
// for (let d = lastMonthFirstDay; d <= lastMonthLastDay; d.setDate(d.getDate() + 1)) {
|
||||
// dateList.value.push(formatDate(new Date(d)));
|
||||
// }
|
||||
|
||||
// 添加这个月的日期
|
||||
for (let d = thisMonthFirstDay; d <= thisMonthLastDay; d.setDate(d.getDate() + 1)) {
|
||||
dateList.value.push(formatDate(new Date(d)));
|
||||
}
|
||||
|
||||
// 添加下个月的日期
|
||||
for (let d = nextMonthFirstDay; d <= nextMonthLastDay; d.setDate(d.getDate() + 1)) {
|
||||
dateList.value.push(formatDate(new Date(d)));
|
||||
}
|
||||
|
||||
// 找到今天的日期在 dateList 中的索引
|
||||
const todayIndex = dateList.value.indexOf(formatDate(currentDate));
|
||||
if (todayIndex !== -1) {
|
||||
defaultOpeneds.value = todayIndex;
|
||||
}
|
||||
|
||||
// 获取排班时段
|
||||
listQuantum().then((res) => {
|
||||
|
||||
timeList.value = res.data;
|
||||
|
||||
timeDataList.value = res.data.map(item => ({
|
||||
value: item.id,
|
||||
label: `${item.startTime}-${item.endTime}`
|
||||
}));
|
||||
|
||||
initSelectTimeClick(formatDate(currentDate), timeList.value);// 获取当天所有时段人员
|
||||
})
|
||||
};
|
||||
|
||||
// 监听选中状态
|
||||
const handleDateChange = (value) => {
|
||||
|
||||
if(!scheduleForm.value.date)
|
||||
{
|
||||
scheduleForm.value.timeQuantumId = '';
|
||||
|
||||
ElMessage({
|
||||
type: 'warning',
|
||||
message: '请先选择排班日期'
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
if(!scheduleForm.value.timeQuantumId)
|
||||
{
|
||||
ElMessage({
|
||||
type: 'warning',
|
||||
message: '请继续选择排班时间段'
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
// 查询勘察人员列表
|
||||
let params = {
|
||||
date: formatDate(scheduleForm.value.date),
|
||||
timeQuantumId: scheduleForm.value.timeQuantumId
|
||||
};
|
||||
|
||||
userList.value = [];
|
||||
|
||||
listSurveyorsUser(params).then((res)=>{
|
||||
|
||||
userList.value = res.data
|
||||
});
|
||||
}
|
||||
|
||||
// 添加排班人员
|
||||
const handleSaveSchedule = () => {
|
||||
|
||||
@@ -402,34 +265,29 @@ const handleSaveSchedule = () => {
|
||||
return;
|
||||
}
|
||||
|
||||
// 提交表单数据
|
||||
console.log('表单数据:', scheduleForm.value);
|
||||
|
||||
scheduleForm.value.date = formatDate(scheduleForm.value.date); //转换日期
|
||||
|
||||
// 添加人员
|
||||
addSchedule(scheduleForm.value).then((res) => {
|
||||
|
||||
console.log('返回数据', res);
|
||||
scheduleForm.value = {
|
||||
userids: [],
|
||||
roleId: 2,
|
||||
date: '',
|
||||
timeQuantumId: '',
|
||||
}
|
||||
|
||||
drawer.value = false;
|
||||
initData();
|
||||
|
||||
ElMessage({
|
||||
type: 'success',
|
||||
message: '新增成功！'
|
||||
});
|
||||
|
||||
// initData();
|
||||
})
|
||||
|
||||
};
|
||||
|
||||
// 日期格式转换
|
||||
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 handleCancelSchedule = () => {
|
||||
|
||||
@@ -443,32 +301,6 @@ const handleCancelSchedule = () => {
|
||||
};
|
||||
};
|
||||
|
||||
const drawer = ref(false)
|
||||
const queryData = ref({
|
||||
date: '',
|
||||
timeQuantumId: '',
|
||||
roleId: '2',
|
||||
page: 1,
|
||||
size: 10,
|
||||
})
|
||||
const direction = ref('rtl')
|
||||
const userList = ref([]); // 勘察人员列表
|
||||
|
||||
const timeList = ref([]);
|
||||
const timeOptions = ref([]);
|
||||
const postOptions = [
|
||||
{
|
||||
value: '2',
|
||||
label: '勘察人员',
|
||||
},
|
||||
{
|
||||
value: '3',
|
||||
label: '维修人员',
|
||||
},
|
||||
];
|
||||
|
||||
const currentDate = ref(''); // 当前日期
|
||||
|
||||
// 禁止选择之前的日期
|
||||
const disablePastAndSpecificDates = (date) => {
|
||||
// 获取当前日期
|
||||
@@ -492,186 +324,82 @@ const disablePastAndSpecificDates = (date) => {
|
||||
});
|
||||
};
|
||||
|
||||
function updateTimeOptions() {
|
||||
// 假设 timeList 是响应式的，并且已经包含了最新的数据
|
||||
timeOptions.value = timeList.value
|
||||
.map(item => ({ // 转换为 { value: id, label: startTime + "-" + endTime } 格式
|
||||
value: item.id,
|
||||
label: `${item.startTime}-${item.endTime}`
|
||||
}));
|
||||
// 获取当天时间段所有人员
|
||||
const initSelectTimeClick = (dateItem, timeList) => {
|
||||
|
||||
let params = {
|
||||
date: dateItem,
|
||||
roleId: 2,
|
||||
}
|
||||
|
||||
timeList.map(item => {
|
||||
|
||||
let params = {
|
||||
date: dateItem,
|
||||
roleId: 2,
|
||||
timeQuantumId: item.id
|
||||
}
|
||||
|
||||
// 获取用户数据
|
||||
getScheduleList(params).then((res) => {
|
||||
|
||||
if(res.data.length)
|
||||
{
|
||||
res.data.map(resItem => {
|
||||
|
||||
resItem.date = params.date;
|
||||
resItem.time = item.startTime + '-' + item.endTime;
|
||||
userDataList.value.push(resItem);
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
})
|
||||
|
||||
|
||||
}
|
||||
// 获取用户列表
|
||||
const selectTimeClick = (dateItem, timeItem) => {
|
||||
|
||||
// 初始调用或监听 timeList 变更时调用
|
||||
updateTimeOptions();
|
||||
let params = {
|
||||
date: dateItem,
|
||||
roleId: 2,
|
||||
timeQuantumId: timeItem.id
|
||||
};
|
||||
|
||||
// 如果 timeList 是响应式的，并且你使用的是 Vue 3 的 Composition API，
|
||||
// 你可以使用 watch 来监听 timeList 的变更，并自动更新 timeOptions
|
||||
userDataList.value = [];
|
||||
|
||||
watch(timeList, updateTimeOptions, { deep: true }); // 深度监听 timeList 的变更
|
||||
getScheduleList(params).then((res) => {
|
||||
|
||||
// 初始化数据
|
||||
const initData = () => {
|
||||
|
||||
// 获取时间段
|
||||
listQuantum().then((res) => {
|
||||
res.data.map(resItem => {
|
||||
|
||||
timeList.value = res.data.map(item => ({
|
||||
value: item.id,
|
||||
label: `${item.startTime}-${item.endTime}`
|
||||
}));
|
||||
resItem.date = params.date;
|
||||
resItem.time = timeItem.startTime + '-' + timeItem.endTime;
|
||||
userDataList.value.push(resItem);
|
||||
})
|
||||
|
||||
});
|
||||
|
||||
// 查询勘察人员列表
|
||||
listSurveyorsUser().then((res)=>{
|
||||
userList.value = res.data
|
||||
});
|
||||
|
||||
// if(queryData.value.roleId==='2'){
|
||||
// listSurveyorsUser().then((res)=>{
|
||||
// userList.value = res.data
|
||||
// });
|
||||
// }else if(queryData.value.roleId==='3'){
|
||||
// listMaintenanceUser().then((res)=>{
|
||||
// userList.value = res.data
|
||||
// .map(item => ({ // 转换为 { value: id, label: startTime + "-" + endTime } 格式
|
||||
// value: item.id,
|
||||
// label: item.nickName
|
||||
// }));
|
||||
// });
|
||||
// }
|
||||
}
|
||||
|
||||
// 搜索事件
|
||||
const handleCurrentChange = (val) => {
|
||||
console.log("调试： queryData.value.date="+queryData.value.date);
|
||||
queryData.value.date = '2024-10-16';
|
||||
getScheduleList(queryData.value).then((res) => {
|
||||
console.log(res.data)
|
||||
// total.value = res.data.total
|
||||
tableData.value = res.data
|
||||
})
|
||||
}
|
||||
|
||||
const handleEditQuantum = (item) => {
|
||||
ElMessageBox.confirm('确定要删除?', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
// 只有当用户点击确定时，才调用 delQuantum
|
||||
delQuantum(item.id).then((res) => {
|
||||
// 假设 res 表示删除成功，且不需要处理 res 的内容
|
||||
ElMessage({
|
||||
type: 'success',
|
||||
message: '删除成功！'
|
||||
});
|
||||
|
||||
// 从 timeList 中移除被标记为删除的对象（或根据业务逻辑直接移除）
|
||||
timeList.value = timeList.value.filter(existingItem => existingItem.id !== item.id);
|
||||
|
||||
// 注意：这里假设 timeList 是响应式的，因此赋值会自动触发视图更新
|
||||
}).catch((error) => {
|
||||
// 处理删除失败的情况
|
||||
console.error('删除失败:', error);
|
||||
ElMessage({
|
||||
type: 'error',
|
||||
message: '删除失败，请重试。'
|
||||
});
|
||||
|
||||
// 如果需要，可以在这里恢复 item 的状态或其他操作
|
||||
});
|
||||
}).catch(() => {
|
||||
});
|
||||
}
|
||||
|
||||
const handleDel = (item) => {
|
||||
ElMessageBox.confirm('确定要删除?', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
// 只有当用户点击确定时，才调用 delQuantum
|
||||
delQuantum(item.id).then((res) => {
|
||||
// 假设 res 表示删除成功，且不需要处理 res 的内容
|
||||
ElMessage({
|
||||
type: 'success',
|
||||
message: '删除成功！'
|
||||
});
|
||||
|
||||
// 从 timeList 中移除被标记为删除的对象（或根据业务逻辑直接移除）
|
||||
timeList.value = timeList.value.filter(existingItem => existingItem.id !== item.id);
|
||||
|
||||
// 注意：这里假设 timeList 是响应式的，因此赋值会自动触发视图更新
|
||||
}).catch((error) => {
|
||||
// 处理删除失败的情况
|
||||
console.error('删除失败:', error);
|
||||
ElMessage({
|
||||
type: 'error',
|
||||
message: '删除失败，请重试。'
|
||||
});
|
||||
|
||||
// 如果需要，可以在这里恢复 item 的状态或其他操作
|
||||
});
|
||||
}).catch(() => {
|
||||
});
|
||||
}
|
||||
|
||||
// 日期格式
|
||||
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}`;
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
initData();
|
||||
})
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.mt-4 {
|
||||
float: right;
|
||||
text-align: right;
|
||||
margin-bottom: 20px;
|
||||
<style scoped>
|
||||
.mt10 {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.demo-form-inline {
|
||||
}
|
||||
|
||||
.dragClass {
|
||||
background: rgba($color: #41c21a, $alpha: 0.5) !important;
|
||||
}
|
||||
|
||||
// 停靠
|
||||
.ghostClass {
|
||||
background: rgba($color: #6cacf5, $alpha: 0.5) !important;
|
||||
}
|
||||
|
||||
// 选择
|
||||
.chosenClass:hover > td {
|
||||
background: rgba($color: #f56c6c, $alpha: 0.5) !important;
|
||||
}
|
||||
|
||||
.icon-view {
|
||||
font-size: 20px;
|
||||
color: #673ab7;
|
||||
margin: 0 10px;
|
||||
}
|
||||
|
||||
.icon-edit {
|
||||
font-size: 20px;
|
||||
color: #2f60c2;
|
||||
margin: 0 10px;
|
||||
}
|
||||
|
||||
.icon-dele {
|
||||
font-size: 20px;
|
||||
color: #ff5722;
|
||||
}
|
||||
|
||||
.btn-color {
|
||||
background: #fff;
|
||||
color: #4c60cc;
|
||||
}
|
||||
|
||||
.expand-title {
|
||||
padding: 10px;
|
||||
color: #919399;
|
||||
font-weight: 600;
|
||||
.ml20 {
|
||||
margin-left: 20px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -0,0 +1,405 @@
|
||||
<template>
|
||||
<el-card class="mt10">
|
||||
|
||||
<el-button type="success" @click="drawer = true">
|
||||
<el-icon style="margin-right: 10px;"><CirclePlus /></el-icon>
|
||||
创建排班
|
||||
</el-button>
|
||||
|
||||
<el-drawer v-model="drawer" :direction="direction" :close-on-click-modal="false" :close-on-press-escape="false" :destroy-on-close="true" :show-close="false">
|
||||
<template #header>
|
||||
<h4>创建排班</h4>
|
||||
</template>
|
||||
<template #default>
|
||||
|
||||
<el-form :model="scheduleForm" label-width="auto" style="max-width: 600px">
|
||||
|
||||
<el-form-item label="日期时间">
|
||||
<el-date-picker
|
||||
v-model="scheduleForm.date"
|
||||
type="date"
|
||||
placeholder="排班日期"
|
||||
:disabled-date="disablePastAndSpecificDates"
|
||||
style="margin-right: 20px"
|
||||
@change="handleDateChange"
|
||||
/>
|
||||
|
||||
<el-select
|
||||
v-model="scheduleForm.timeQuantumId"
|
||||
filterable
|
||||
placeholder="请选择排班时间"
|
||||
style="width: 240px"
|
||||
@change="handleDateChange"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in timeDataList"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="排班人员">
|
||||
|
||||
<template v-if="userList.length">
|
||||
<el-checkbox-group v-model="scheduleForm.userids" size="large">
|
||||
<el-checkbox-button v-for="item in userList" :key="item.id" :value="item.id">
|
||||
{{ item.nickName }}
|
||||
</el-checkbox-button>
|
||||
</el-checkbox-group>
|
||||
</template>
|
||||
|
||||
<template v-else>
|
||||
<el-alert title="选择排班日期时间后，将会获取排班人员" type="warning" />
|
||||
</template>
|
||||
|
||||
</el-form-item>
|
||||
|
||||
<div style="display: flex;justify-content: center;margin-top: 50px">
|
||||
<el-button @click="handleCancelSchedule">取消</el-button>
|
||||
<el-button type="success" @click="handleSaveSchedule">确认</el-button>
|
||||
</div>
|
||||
|
||||
</el-form>
|
||||
</template>
|
||||
|
||||
</el-drawer>
|
||||
|
||||
<el-container class="mt10">
|
||||
<el-aside width="220px">
|
||||
<el-scrollbar>
|
||||
<el-menu >
|
||||
<el-sub-menu v-for="(dateItem, index) in dateList" :index="index.toString()" :key="index">
|
||||
<template #title>
|
||||
<el-icon><Calendar /></el-icon>
|
||||
<template v-if="defaultOpeneds === index">
|
||||
<b>今天：</b> {{ dateItem }}
|
||||
</template>
|
||||
<template v-else>
|
||||
{{ dateItem }}
|
||||
</template>
|
||||
</template>
|
||||
<el-menu-item-group>
|
||||
<el-menu-item v-for="(timeItem, timeIndex) in timeList" :key="timeItem.id" :index="index.toString() + '-' + timeIndex.toString()" @click="selectTimeClick(dateItem, timeItem)">
|
||||
{{timeItem.startTime}} - {{timeItem.endTime}}
|
||||
</el-menu-item>
|
||||
</el-menu-item-group>
|
||||
</el-sub-menu>
|
||||
</el-menu>
|
||||
</el-scrollbar>
|
||||
</el-aside>
|
||||
<el-container class="ml20">
|
||||
<el-main>
|
||||
<el-scrollbar>
|
||||
<el-table :data="userDataList">
|
||||
|
||||
<el-table-column prop="date" label="日期" width="200" />
|
||||
<el-table-column prop="time" label="时间段" width="200" />
|
||||
|
||||
<el-table-column prop="id" label="ID" width="200" />
|
||||
<el-table-column prop="username" label="名称" width="120" />
|
||||
<el-table-column prop="mobile" label="手机号" />
|
||||
<el-table-column label="头像" width="200" align="center">
|
||||
<template #default="scope">
|
||||
<el-avatar :size="50" :src="scope.row.avatar" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-scrollbar>
|
||||
</el-main>
|
||||
</el-container>
|
||||
</el-container>
|
||||
</el-card>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { onMounted, ref, nextTick } from 'vue';
|
||||
import {Menu as IconMenu, Message, Setting, Calendar, CirclePlus} from '@element-plus/icons-vue';
|
||||
import {listQuantum} from "../../api/modules/schedulingTime";
|
||||
import {ElMessage} from "element-plus";
|
||||
import {addSchedule, getScheduleList} from "../../api/modules/scheduling";
|
||||
import {listSurveyorsUser} from "../../api/modules/schedulingUser";
|
||||
|
||||
const item = {
|
||||
date: '2016-05-02',
|
||||
name: 'Tom',
|
||||
address: 'No. 189, Grove St, Los Angeles',
|
||||
};
|
||||
const tableData = ref(Array.from({ length: 5 }).fill(item));
|
||||
|
||||
const scheduleForm = ref({
|
||||
userids: [],
|
||||
roleId: 2,
|
||||
date: '',
|
||||
timeQuantumId: '',
|
||||
});
|
||||
|
||||
const direction = ref('rtl')
|
||||
const drawer = ref(false)
|
||||
const userList = ref([]); // 勘察人员列表
|
||||
|
||||
// 日期列表
|
||||
const dateList = ref([]);
|
||||
const timeList = ref([]); // 时间段
|
||||
const timeDataList = ref([]); // 时间段
|
||||
const defaultOpeneds = ref([]);
|
||||
|
||||
const userDataList = ref([]); // 已排期用户
|
||||
|
||||
// 初始化
|
||||
const initData = () => {
|
||||
|
||||
const currentDate = new Date();
|
||||
const currentYear = currentDate.getFullYear();
|
||||
const currentMonth = currentDate.getMonth();
|
||||
|
||||
// 上个月的第一天和最后一天
|
||||
const lastMonthFirstDay = new Date(currentYear, currentMonth - 1, 1);
|
||||
const lastMonthLastDay = new Date(currentYear, currentMonth, 0);
|
||||
|
||||
// 这个月的第一天和最后一天
|
||||
const thisMonthFirstDay = new Date(currentYear, currentMonth, 1);
|
||||
const thisMonthLastDay = new Date(currentYear, currentMonth + 1, 0);
|
||||
|
||||
// 下个月的第一天和最后一天
|
||||
const nextMonthFirstDay = new Date(currentYear, currentMonth + 1, 1);
|
||||
const nextMonthLastDay = new Date(currentYear, currentMonth + 2, 0);
|
||||
|
||||
// 添加上个月的日期
|
||||
// for (let d = lastMonthFirstDay; d <= lastMonthLastDay; d.setDate(d.getDate() + 1)) {
|
||||
// dateList.value.push(formatDate(new Date(d)));
|
||||
// }
|
||||
|
||||
// 添加这个月的日期
|
||||
for (let d = thisMonthFirstDay; d <= thisMonthLastDay; d.setDate(d.getDate() + 1)) {
|
||||
dateList.value.push(formatDate(new Date(d)));
|
||||
}
|
||||
|
||||
// 添加下个月的日期
|
||||
for (let d = nextMonthFirstDay; d <= nextMonthLastDay; d.setDate(d.getDate() + 1)) {
|
||||
dateList.value.push(formatDate(new Date(d)));
|
||||
}
|
||||
|
||||
// 找到今天的日期在 dateList 中的索引
|
||||
const todayIndex = dateList.value.indexOf(formatDate(currentDate));
|
||||
if (todayIndex !== -1) {
|
||||
defaultOpeneds.value = todayIndex;
|
||||
}
|
||||
|
||||
// 获取排班时段
|
||||
listQuantum().then((res) => {
|
||||
|
||||
timeList.value = res.data;
|
||||
|
||||
timeDataList.value = res.data.map(item => ({
|
||||
value: item.id,
|
||||
label: `${item.startTime}-${item.endTime}`
|
||||
}));
|
||||
|
||||
initSelectTimeClick(formatDate(currentDate), timeList.value);// 获取当天所有时段人员
|
||||
})
|
||||
};
|
||||
|
||||
// 监听选中状态
|
||||
const handleDateChange = (value) => {
|
||||
|
||||
if(!scheduleForm.value.date)
|
||||
{
|
||||
scheduleForm.value.timeQuantumId = '';
|
||||
|
||||
ElMessage({
|
||||
type: 'warning',
|
||||
message: '请先选择排班日期'
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
if(!scheduleForm.value.timeQuantumId)
|
||||
{
|
||||
ElMessage({
|
||||
type: 'warning',
|
||||
message: '请继续选择排班时间段'
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
// 查询勘察人员列表
|
||||
let params = {
|
||||
date: formatDate(scheduleForm.value.date),
|
||||
timeQuantumId: scheduleForm.value.timeQuantumId
|
||||
};
|
||||
|
||||
userList.value = [];
|
||||
|
||||
listSurveyorsUser(params).then((res)=>{
|
||||
|
||||
userList.value = res.data
|
||||
});
|
||||
}
|
||||
|
||||
// 添加排班人员
|
||||
const handleSaveSchedule = () => {
|
||||
|
||||
if(!scheduleForm.value.date){
|
||||
ElMessage({
|
||||
type: 'warning',
|
||||
message: '请选择排班日期'
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
if(!scheduleForm.value.timeQuantumId){
|
||||
ElMessage({
|
||||
type: 'warning',
|
||||
message: '请选择排版时段'
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
if(scheduleForm.value.userids.length < 1){
|
||||
ElMessage({
|
||||
type: 'warning',
|
||||
message: '请选择人员'
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
scheduleForm.value.date = formatDate(scheduleForm.value.date); //转换日期
|
||||
|
||||
// 添加人员
|
||||
addSchedule(scheduleForm.value).then((res) => {
|
||||
|
||||
scheduleForm.value = {
|
||||
userids: [],
|
||||
roleId: 2,
|
||||
date: '',
|
||||
timeQuantumId: '',
|
||||
}
|
||||
|
||||
drawer.value = false;
|
||||
initData();
|
||||
|
||||
ElMessage({
|
||||
type: 'success',
|
||||
message: '新增成功！'
|
||||
});
|
||||
|
||||
})
|
||||
|
||||
};
|
||||
// 取消添加排班人员
|
||||
const handleCancelSchedule = () => {
|
||||
|
||||
drawer.value = false;
|
||||
|
||||
scheduleForm.value = {
|
||||
userids: [],
|
||||
roleId: 2,
|
||||
date: '',
|
||||
timeQuantumId: '',
|
||||
};
|
||||
};
|
||||
|
||||
// 禁止选择之前的日期
|
||||
const disablePastAndSpecificDates = (date) => {
|
||||
// 获取当前日期
|
||||
const currentDate = new Date();
|
||||
|
||||
currentDate.setDate(currentDate.getDate() - 1);
|
||||
|
||||
// 禁止选择今天的前一天及之前的日期（不包含今天）
|
||||
if (date < currentDate) {
|
||||
return true;
|
||||
}
|
||||
|
||||
// 禁止选择特定的未来日期，例如节假日
|
||||
const disabledDates = [new Date(2023, 9, 1), new Date(2023, 10, 1)];
|
||||
return disabledDates.some((disabledDate) => {
|
||||
return (
|
||||
date.getFullYear() === disabledDate.getFullYear() &&
|
||||
date.getMonth() === disabledDate.getMonth() &&
|
||||
date.getDate() === disabledDate.getDate()
|
||||
);
|
||||
});
|
||||
};
|
||||
|
||||
// 获取当天时间段所有人员
|
||||
const initSelectTimeClick = (dateItem, timeList) => {
|
||||
|
||||
let params = {
|
||||
date: dateItem,
|
||||
roleId: 2,
|
||||
}
|
||||
|
||||
timeList.map(item => {
|
||||
|
||||
let params = {
|
||||
date: dateItem,
|
||||
roleId: 2,
|
||||
timeQuantumId: item.id
|
||||
}
|
||||
|
||||
// 获取用户数据
|
||||
getScheduleList(params).then((res) => {
|
||||
|
||||
if(res.data.length)
|
||||
{
|
||||
res.data.map(resItem => {
|
||||
|
||||
resItem.date = params.date;
|
||||
resItem.time = item.startTime + '-' + item.endTime;
|
||||
userDataList.value.push(resItem);
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
})
|
||||
|
||||
|
||||
}
|
||||
// 获取用户列表
|
||||
const selectTimeClick = (dateItem, timeItem) => {
|
||||
|
||||
let params = {
|
||||
date: dateItem,
|
||||
roleId: 2,
|
||||
timeQuantumId: timeItem.id
|
||||
};
|
||||
|
||||
userDataList.value = [];
|
||||
|
||||
getScheduleList(params).then((res) => {
|
||||
|
||||
|
||||
res.data.map(resItem => {
|
||||
|
||||
resItem.date = params.date;
|
||||
resItem.time = timeItem.startTime + '-' + timeItem.endTime;
|
||||
userDataList.value.push(resItem);
|
||||
})
|
||||
|
||||
})
|
||||
}
|
||||
|
||||
// 日期格式
|
||||
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}`;
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
initData();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.mt10 {
|
||||
margin-top: 10px;
|
||||
}
|
||||
.ml20 {
|
||||
margin-left: 20px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,320 @@
|
||||
<template>
|
||||
|
||||
<el-card class="mt10">
|
||||
|
||||
<el-button type="success" @click="drawer = true">
|
||||
<el-icon style="margin-right: 10px;"><CirclePlus /></el-icon>
|
||||
创建时段
|
||||
</el-button>
|
||||
|
||||
<el-drawer v-model="drawer" :direction="direction" :close-on-click-modal="false" :close-on-press-escape="false" :destroy-on-close="true" :show-close="false">
|
||||
<template #header>
|
||||
<h4 v-if="!editStatus">创建排班</h4>
|
||||
<h4 v-else>更新排班</h4>
|
||||
</template>
|
||||
<template #default>
|
||||
|
||||
<el-form :model="formData" label-width="auto" style="max-width: 600px">
|
||||
|
||||
<el-form-item label="开始时间">
|
||||
<el-time-select
|
||||
v-model="formData.startTime"
|
||||
:max-time="formData.endTime"
|
||||
class="time-select"
|
||||
placeholder="选择开始时间"
|
||||
start="00:00:00"
|
||||
end="23:59:59"
|
||||
step="00:30:00"
|
||||
format="HH:mm:ss"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="结束时间">
|
||||
<el-time-select
|
||||
v-model="formData.endTime"
|
||||
:min-time="formData.startTime"
|
||||
placeholder="结束时间"
|
||||
start="00:00:00"
|
||||
end="23:59:59"
|
||||
step="00:30:00"
|
||||
format="HH:mm:ss"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="状态">
|
||||
<el-switch
|
||||
v-model="formData.flag"
|
||||
inline-prompt
|
||||
active-text="启用"
|
||||
inactive-text="禁用"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<div style="display: flex;justify-content: center;margin-top: 50px">
|
||||
<el-button @click="handleCancel">取消</el-button>
|
||||
<el-button type="success" @click="handleSave">确认</el-button>
|
||||
</div>
|
||||
</el-form>
|
||||
</template>
|
||||
|
||||
</el-drawer>
|
||||
|
||||
<el-table
|
||||
ref="table"
|
||||
:data="tableData"
|
||||
:default-sort="{ prop: 'date', order: 'descending' }"
|
||||
:header-cell-style="{ backgroundColor: '#ecf5ff' }"
|
||||
class="mt20"
|
||||
>
|
||||
|
||||
<el-table-column
|
||||
label="编号"
|
||||
prop="id"
|
||||
width="120"
|
||||
align="center"
|
||||
show-overflow-tooltip
|
||||
sortable
|
||||
/>
|
||||
|
||||
<el-table-column label="时段" align="center">
|
||||
<template #default="scope">
|
||||
{{scope.row.startTime}}-{{scope.row.endTime}}
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="状态" align="center">
|
||||
<template #default="scope">
|
||||
<el-switch
|
||||
v-model="scope.row.flag"
|
||||
inline-prompt
|
||||
active-text="启用"
|
||||
inactive-text="禁用"
|
||||
@change="upStatus(scope.row)"
|
||||
/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="操作" width="280px" align="center">
|
||||
<template v-slot:default="scope">
|
||||
<el-button type="info" @click="editClick(scope.row)">编辑</el-button>
|
||||
<el-popconfirm title="确认删除这个时间段吗?" @confirm="delQuantumClick(scope.row)">
|
||||
<template #reference>
|
||||
<el-button type="danger">删除</el-button>
|
||||
</template>
|
||||
</el-popconfirm>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
</el-table>
|
||||
|
||||
</el-card>
|
||||
</template>
|
||||
<script setup>
|
||||
|
||||
import {nextTick, onMounted, reactive, ref} from 'vue'
|
||||
import {addQuantum, delQuantum, listQuantum, updateQuantum} from "../../api/modules/schedulingTime";
|
||||
import {CirclePlus} from "@element-plus/icons-vue";
|
||||
import {ElMessage} from "element-plus";
|
||||
|
||||
const tableData = ref([])
|
||||
const table = ref()
|
||||
|
||||
const dialogVisible = ref(false)
|
||||
const total = ref(0)
|
||||
|
||||
const drawer = ref(false)
|
||||
const editStatus = ref(false)
|
||||
const direction = ref('rtl');
|
||||
|
||||
const formData = ref({
|
||||
startTime: '',
|
||||
endTime:'',
|
||||
flag: true
|
||||
});
|
||||
|
||||
// 初始化数据
|
||||
const initData = () => {
|
||||
|
||||
// 获取排班时段
|
||||
listQuantum().then((res) => {
|
||||
tableData.value = res.data
|
||||
})
|
||||
}
|
||||
|
||||
// 取消
|
||||
const handleCancel = () => {
|
||||
drawer.value = false
|
||||
|
||||
formData.value = {
|
||||
startTime: '',
|
||||
endTime:'',
|
||||
flag: false
|
||||
};
|
||||
}
|
||||
|
||||
// 提交数据
|
||||
const handleSave = () => {
|
||||
|
||||
if(!formData.value.startTime){
|
||||
ElMessage({
|
||||
type: 'warning',
|
||||
message: '请选择开始时间段'
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
if(!formData.value.endTime){
|
||||
ElMessage({
|
||||
type: 'warning',
|
||||
message: '请选择结束时间段'
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
if(!editStatus.value)
|
||||
{
|
||||
// 添加时间段
|
||||
addQuantum(formData.value).then(res => {
|
||||
|
||||
initData();
|
||||
drawer.value = false;
|
||||
|
||||
formData.value = {
|
||||
startTime: '',
|
||||
endTime:'',
|
||||
flag: false
|
||||
};
|
||||
|
||||
ElMessage({
|
||||
type: 'success',
|
||||
message: '添加成功'
|
||||
});
|
||||
|
||||
});
|
||||
}else{
|
||||
|
||||
// 修改数据
|
||||
updateQuantum(formData.value).then((res) => {
|
||||
|
||||
editStatus.value = false;
|
||||
drawer.value = false;
|
||||
|
||||
ElMessage({
|
||||
message: '修改成功',
|
||||
type: 'success',
|
||||
});
|
||||
initData();
|
||||
})
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// 删除时间段
|
||||
const delQuantumClick = (row) => {
|
||||
|
||||
let params = {
|
||||
id:row.id
|
||||
};
|
||||
|
||||
// 删除数据
|
||||
delQuantum(params).then((res) => {
|
||||
|
||||
initData();
|
||||
|
||||
ElMessage({
|
||||
type: 'success',
|
||||
message: '删除成功'
|
||||
});
|
||||
|
||||
});
|
||||
}
|
||||
|
||||
// 编辑数据
|
||||
const editClick = (row) => {
|
||||
|
||||
editStatus.value = true;
|
||||
drawer.value = true;
|
||||
|
||||
formData.value = {...row}
|
||||
}
|
||||
|
||||
// 启用禁用时间段
|
||||
const upStatus = (row) => {
|
||||
|
||||
let formData = {...row}
|
||||
|
||||
// 修改数据
|
||||
updateQuantum(formData).then((res) => {
|
||||
|
||||
if(formData.flag)
|
||||
{
|
||||
ElMessage({
|
||||
message: '启用成功',
|
||||
type: 'success',
|
||||
});
|
||||
}else{
|
||||
ElMessage({
|
||||
message: '禁用成功',
|
||||
type: 'success',
|
||||
});
|
||||
}
|
||||
initData();
|
||||
})
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
initData()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.mt-4 {
|
||||
float: right;
|
||||
text-align: right;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.demo-form-inline {
|
||||
}
|
||||
|
||||
.dragClass {
|
||||
background: rgba($color: #41c21a, $alpha: 0.5) !important;
|
||||
}
|
||||
|
||||
// 停靠
|
||||
.ghostClass {
|
||||
background: rgba($color: #6cacf5, $alpha: 0.5) !important;
|
||||
}
|
||||
|
||||
// 选择
|
||||
.chosenClass:hover > td {
|
||||
background: rgba($color: #f56c6c, $alpha: 0.5) !important;
|
||||
}
|
||||
|
||||
.icon-view {
|
||||
font-size: 20px;
|
||||
color: #673ab7;
|
||||
margin: 0 10px;
|
||||
}
|
||||
|
||||
.icon-edit {
|
||||
font-size: 20px;
|
||||
color: #2f60c2;
|
||||
margin: 0 10px;
|
||||
}
|
||||
|
||||
.icon-dele {
|
||||
font-size: 20px;
|
||||
color: #ff5722;
|
||||
}
|
||||
|
||||
.btn-color {
|
||||
background: #fff;
|
||||
color: #4c60cc;
|
||||
}
|
||||
|
||||
.expand-title {
|
||||
padding: 10px;
|
||||
color: #919399;
|
||||
font-weight: 600;
|
||||
}
|
||||
</style>
|
||||
@@ -1,16 +1,13 @@
|
||||
<template>
|
||||
<el-card>
|
||||
<el-card class="mt10">
|
||||
|
||||
<el-row :gutter="10">
|
||||
<el-button type="success" @click="drawer = true">
|
||||
<el-icon style="margin-right: 10px;"><CirclePlus /></el-icon>
|
||||
创建活动
|
||||
</el-button>
|
||||
|
||||
<el-col :span="4">
|
||||
<el-button type="success" @click="drawer = true">
|
||||
<el-icon style="margin-right: 10px;"><CirclePlus /></el-icon>
|
||||
创建活动
|
||||
</el-button>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="4">
|
||||
<el-form :inline="true" :model="formSearch" class="mt10">
|
||||
<el-form-item label="活动名称">
|
||||
<el-input
|
||||
v-model="searchName"
|
||||
style="max-width: 300px"
|
||||
@@ -19,14 +16,16 @@
|
||||
onchange="searchEvnt"
|
||||
>
|
||||
|
||||
<template #append>
|
||||
<el-button type="success" @click="searchEvnt">查询</el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
|
||||
<el-drawer v-model="drawer" :direction="direction">
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="onSearchSubmit">搜索</el-button>
|
||||
</el-form-item>
|
||||
|
||||
</el-form>
|
||||
|
||||
<el-drawer v-model="drawer" :direction="direction" :close-on-click-modal="false" :close-on-press-escape="false" :destroy-on-close="true" :show-close="false">
|
||||
<template #header>
|
||||
<h4>创建活动</h4>
|
||||
</template>
|
||||
@@ -80,9 +79,6 @@
|
||||
|
||||
</el-drawer>
|
||||
|
||||
</el-card>
|
||||
|
||||
<el-card class="mt10">
|
||||
<el-table
|
||||
ref="table"
|
||||
:data="tableData"
|
||||
@@ -90,7 +86,7 @@
|
||||
:header-cell-style="{ backgroundColor: '#ecf5ff' }"
|
||||
border
|
||||
stripe
|
||||
style="width: 100%"
|
||||
class="mt10"
|
||||
>
|
||||
|
||||
<el-table-column
|
||||
@@ -143,7 +139,7 @@
|
||||
|
||||
</el-table>
|
||||
<el-pagination
|
||||
small
|
||||
size="small"
|
||||
background
|
||||
layout="prev, pager, next"
|
||||
:total="tableData.length"
|
||||
@@ -159,14 +155,14 @@ import {
|
||||
InfoFilled,
|
||||
View,
|
||||
ArrowDownBold,
|
||||
Plus,
|
||||
Plus, CirclePlus,
|
||||
} from '@element-plus/icons-vue'
|
||||
import {nextTick, onMounted, reactive, ref} from 'vue'
|
||||
|
||||
import {ElMessage} from "element-plus";
|
||||
import {addFile} from "../../api/modules/upload";
|
||||
import {getConfigList, updateSystem} from "../../api/modules/system";
|
||||
|
||||
const direction = ref('rtl');
|
||||
const tableData = ref([])
|
||||
const dataList = ref([])
|
||||
const table = ref()
|
||||
@@ -186,6 +182,10 @@ const queryData = ref({
|
||||
size: 10,
|
||||
})
|
||||
|
||||
const formSearch = ref({
|
||||
searchName:'',
|
||||
});
|
||||
|
||||
const formData = ref({
|
||||
id: 1,
|
||||
title: '',
|
||||
@@ -421,7 +421,7 @@ const handleCurrentChange = (val) => {
|
||||
}
|
||||
|
||||
// 搜索事件
|
||||
const searchEvnt = ()=> {
|
||||
const onSearchSubmit = ()=> {
|
||||
console.log('点击搜索');
|
||||
};
|
||||
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<el-card>
|
||||
<el-card class="mt10">
|
||||
|
||||
<el-button type="success" @click="drawer = true">
|
||||
上传首页图
|
||||
@@ -8,7 +8,7 @@
|
||||
</el-icon>
|
||||
</el-button>
|
||||
|
||||
<el-drawer v-model="drawer">
|
||||
<el-drawer v-model="drawer" :direction="direction" :close-on-click-modal="false" :close-on-press-escape="false" :destroy-on-close="true" :show-close="false">
|
||||
<template #header>
|
||||
<h4>上传图片</h4>
|
||||
</template>
|
||||
@@ -47,9 +47,7 @@
|
||||
</template>
|
||||
|
||||
</el-drawer>
|
||||
</el-card>
|
||||
|
||||
<el-card class="mt10">
|
||||
<el-table
|
||||
ref="table"
|
||||
:data="tableData"
|
||||
@@ -57,7 +55,7 @@
|
||||
:header-cell-style="{ backgroundColor: '#ecf5ff' }"
|
||||
border
|
||||
stripe
|
||||
style="width: 100%"
|
||||
class="mt10"
|
||||
>
|
||||
|
||||
<el-table-column
|
||||
@@ -71,7 +69,7 @@
|
||||
|
||||
<el-table-column label="首页图" align="center">
|
||||
<template #default="scope">
|
||||
<el-image style="width: 600px; height: 50px" :src="scope.row.img" :fit="fit" lazy/>
|
||||
<el-image style="width: 600px; height: 50px" :src="scope.row.img" lazy/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
@@ -110,7 +108,7 @@ const tableData = ref([])
|
||||
const table = ref()
|
||||
const dialogVisible = ref(false)
|
||||
const total = ref(0)
|
||||
|
||||
const direction = ref('rtl');
|
||||
const drawer = ref(false)
|
||||
const queryData = ref({
|
||||
keyWord: '',
|
||||
|
||||
+20
-26
@@ -1,39 +1,33 @@
|
||||
<template>
|
||||
<el-card>
|
||||
<el-card class="mt10">
|
||||
|
||||
<el-row :gutter="10">
|
||||
<el-col :span="4">
|
||||
<div class="block">
|
||||
<el-date-picker
|
||||
v-model="registerDate"
|
||||
type="daterange"
|
||||
range-separator="至"
|
||||
start-placeholder="注册开始日期"
|
||||
end-placeholder="注册截至日期"
|
||||
:size="size"
|
||||
/>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="4">
|
||||
<el-form :inline="true" :model="queryData" class="mt20">
|
||||
<el-form-item label="注册时间">
|
||||
<el-date-picker
|
||||
v-model="registerDate"
|
||||
type="daterange"
|
||||
range-separator="至"
|
||||
start-placeholder="注册开始日期"
|
||||
end-placeholder="注册截至日期"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="微信昵称">
|
||||
<el-input
|
||||
v-model="searchName"
|
||||
style="max-width: 300px"
|
||||
placeholder="模糊查询微信昵称"
|
||||
class="input-with-select"
|
||||
onchange="searchEvnt"
|
||||
>
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<template #append>
|
||||
<el-button type="success" @click="searchEvnt">查询</el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="handleCurrentChange">查询</el-button>
|
||||
</el-form-item>
|
||||
|
||||
</el-form>
|
||||
|
||||
</el-card>
|
||||
|
||||
<el-card class="mt10">
|
||||
<el-table
|
||||
ref="table"
|
||||
:data="tableData"
|
||||
@@ -41,7 +35,7 @@
|
||||
:header-cell-style="{ backgroundColor: '#ecf5ff' }"
|
||||
border
|
||||
stripe
|
||||
style="width: 100%"
|
||||
class="mt10"
|
||||
>
|
||||
|
||||
<el-table-column
|
||||
|
||||
@@ -1,69 +1,44 @@
|
||||
<template>
|
||||
<el-card>
|
||||
<el-card class="mt10">
|
||||
|
||||
<el-row :gutter="10">
|
||||
<el-col :span="4">
|
||||
<div class="block">
|
||||
<el-date-picker
|
||||
v-model="registerDate"
|
||||
type="daterange"
|
||||
range-separator="至"
|
||||
start-placeholder="注册开始日期"
|
||||
end-placeholder="注册截至日期"
|
||||
:size="size"
|
||||
/>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="4">
|
||||
<el-form :inline="true" :model="queryData" class="mt20">
|
||||
<el-form-item label="注册时间">
|
||||
<el-date-picker
|
||||
v-model="registerDate"
|
||||
type="daterange"
|
||||
range-separator="至"
|
||||
start-placeholder="注册开始日期"
|
||||
end-placeholder="注册截至日期"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="微信昵称">
|
||||
<el-input
|
||||
v-model="searchName"
|
||||
style="max-width: 300px"
|
||||
placeholder="模糊查询微信昵称"
|
||||
class="input-with-select"
|
||||
onchange="searchEvnt"
|
||||
>
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<template #append>
|
||||
<el-button type="success" @click="searchEvnt">查询</el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="4">
|
||||
<el-form-item label="微信昵称">
|
||||
<el-input
|
||||
v-model="searchName"
|
||||
style="max-width: 300px"
|
||||
placeholder="模糊查询名字"
|
||||
placeholder="模糊查询微信昵称"
|
||||
class="input-with-select"
|
||||
onchange="searchEvnt"
|
||||
>
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<template #append>
|
||||
<el-button type="success" @click="searchEvnt">查询</el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
</el-col>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="handleCurrentChange">查询</el-button>
|
||||
</el-form-item>
|
||||
|
||||
<el-col :span="4">
|
||||
<el-input
|
||||
v-model="searchName"
|
||||
style="max-width: 300px"
|
||||
placeholder="模糊查询手机号"
|
||||
class="input-with-select"
|
||||
onchange="searchEvnt"
|
||||
>
|
||||
|
||||
<template #append>
|
||||
<el-button type="success" @click="searchEvnt">查询</el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
|
||||
|
||||
</el-card>
|
||||
|
||||
<el-card class="mt10">
|
||||
<el-table
|
||||
ref="table"
|
||||
:data="tableData"
|
||||
@@ -71,7 +46,7 @@
|
||||
:header-cell-style="{ backgroundColor: '#ecf5ff' }"
|
||||
border
|
||||
stripe
|
||||
style="width: 100%"
|
||||
class="mt10"
|
||||
>
|
||||
|
||||
<el-table-column
|
||||
@@ -114,7 +89,7 @@
|
||||
|
||||
</el-table>
|
||||
<el-pagination
|
||||
small
|
||||
size="small"
|
||||
background
|
||||
layout="prev, pager, next"
|
||||
:total="tableData.length"
|
||||
|
||||
Reference in New Issue
Block a user