完成后台所有开发，暂存代码，进入功能测试阶段。
This commit is contained in:
monanxiao
@@ -20,19 +20,19 @@ export function addSchedule(params) {
|
||||
}
|
||||
|
||||
// 修改排班
|
||||
// export function updateSchedule(params) {
|
||||
// return service({
|
||||
// method: "put",
|
||||
// url: `${API_BASE_URL}`,
|
||||
// data: params,
|
||||
// });
|
||||
// }
|
||||
//
|
||||
// // 删除排班
|
||||
// export function delSchedule(params) {
|
||||
// return service({
|
||||
// method: "delete",
|
||||
// url: `${API_BASE_URL}`,
|
||||
// data: params,
|
||||
// });
|
||||
// }
|
||||
export function updateSchedule(params) {
|
||||
return service({
|
||||
method: "put",
|
||||
url: `${API_BASE_URL}`,
|
||||
data: params,
|
||||
});
|
||||
}
|
||||
|
||||
// 删除排班
|
||||
export function delSchedule(params) {
|
||||
return service({
|
||||
method: "delete",
|
||||
url: `${API_BASE_URL}/${params.id}`,
|
||||
data: params,
|
||||
});
|
||||
}
|
||||
|
||||
+1
-1
@@ -13,7 +13,7 @@ const url = "https://repair.cpolar.top"; // "https://hazard.cpolar.top";
|
||||
|
||||
const service = axios.create({
|
||||
baseURL: url,
|
||||
timeout: 5000,
|
||||
timeout: 60000,
|
||||
});
|
||||
|
||||
// Request interceptors
|
||||
|
||||
@@ -96,11 +96,7 @@ export const menuListItem = [
|
||||
title: "维修工程师",
|
||||
url: "/maintainScheduling",
|
||||
icon: "Menu",
|
||||
},{
|
||||
title: "排班测试",
|
||||
url: "/testScheduling",
|
||||
icon: "Menu",
|
||||
},
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
|
||||
@@ -218,15 +218,7 @@ const routerList = [
|
||||
name: "维修人员排班",
|
||||
},
|
||||
},
|
||||
{
|
||||
path: "/testScheduling",
|
||||
name: "testScheduling",
|
||||
component: () => import("../views/scheduling/test.vue"),
|
||||
meta: {
|
||||
requiresAuth: true,
|
||||
name: "人员排班测试",
|
||||
},
|
||||
},
|
||||
|
||||
],
|
||||
},
|
||||
|
||||
|
||||
@@ -1,67 +0,0 @@
|
||||
<template>
|
||||
<el-card>
|
||||
<div class="card-title">添加input 🍯🍯🍯🍯🍯🍯</div>
|
||||
<el-input v-model="input1" placeholder="请输入域名">
|
||||
<template #prepend>Http://</template>
|
||||
</el-input>
|
||||
<el-input v-model="input1" placeholder="请输入..." class="mt10">
|
||||
<template #prepend>
|
||||
<el-select v-model="select" placeholder="" style="width: 115px">
|
||||
<el-option label="邮箱" value="1" />
|
||||
<el-option label="wexin" value="2" />
|
||||
<el-option label="Tel" value="3" />
|
||||
</el-select>
|
||||
</template>
|
||||
</el-input>
|
||||
<el-input v-model="input1" placeholder="请输入..." class="mt10">
|
||||
<template #append>.com</template>
|
||||
</el-input>
|
||||
<el-input v-model="input1" placeholder="请输入..." class="mt10">
|
||||
<template #prepend>
|
||||
<el-select v-model="select" placeholder="Select2" style="width: 115px">
|
||||
<el-option label="分类一" value="1" />
|
||||
<el-option label="分类二" value="2" />
|
||||
<el-option label="分类三" value="3" /> </el-select
|
||||
></template>
|
||||
<template #append><el-button :icon="Search" /></template>
|
||||
</el-input>
|
||||
<el-input
|
||||
class="mt10"
|
||||
v-for="item in inputList"
|
||||
:key="item"
|
||||
:v-model="item"
|
||||
placeholder="请输入"
|
||||
>
|
||||
<template #append
|
||||
><el-button @click="deleteHanle(item)">Delete</el-button></template
|
||||
>
|
||||
</el-input>
|
||||
<el-button icon="Plus" class="mt10 w100" @click="addInput()"
|
||||
>添加</el-button
|
||||
>
|
||||
</el-card>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { Search, Plus } from '@element-plus/icons-vue'
|
||||
import { ref } from 'vue'
|
||||
const input1 = ref('')
|
||||
const inputList = ref([])
|
||||
const select = ref('1')
|
||||
const Select2 = ref('1')
|
||||
|
||||
const addInput = () => {
|
||||
inputList.value.push('')
|
||||
}
|
||||
const deleteHanle = (item) => {
|
||||
inputList.value.splice(inputList.value[item], 1)
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.card-title {
|
||||
padding-bottom: 20px;
|
||||
font-size: 18px;
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
@@ -1,79 +0,0 @@
|
||||
<template>
|
||||
<el-card class="col-center">
|
||||
<el-form :model="form" label-width="120px">
|
||||
<el-form-item label="活动名称">
|
||||
<el-input v-model="form.name" />
|
||||
</el-form-item>
|
||||
<el-form-item label="活动区域">
|
||||
<el-select v-model="form.region" placeholder="please select your zone">
|
||||
<el-option label="区域一" value="shanghai" />
|
||||
<el-option label="区域二" value="beijing" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="活动日期">
|
||||
<el-col :span="11">
|
||||
<el-date-picker
|
||||
v-model="form.date1"
|
||||
type="date"
|
||||
placeholder="开始日期"
|
||||
style="width: 100%"
|
||||
/>
|
||||
</el-col>
|
||||
<el-col :span="2" class="开启活动">
|
||||
<span class="text-gray-500">-</span>
|
||||
</el-col>
|
||||
<el-col :span="11">
|
||||
<el-time-picker
|
||||
v-model="form.date2"
|
||||
placeholder="结束日期"
|
||||
style="width: 100%"
|
||||
/>
|
||||
</el-col>
|
||||
</el-form-item>
|
||||
<el-form-item label="活动状态">
|
||||
<el-switch v-model="form.delivery" />
|
||||
</el-form-item>
|
||||
<el-form-item label="活动类型">
|
||||
<el-checkbox-group v-model="form.type">
|
||||
<el-checkbox label="Online activities" name="type" />
|
||||
<el-checkbox label="Promotion activities" name="type" />
|
||||
<el-checkbox label="Offline activities" name="type" />
|
||||
<el-checkbox label="Simple brand exposure" name="type" />
|
||||
</el-checkbox-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="活动资源">
|
||||
<el-radio-group v-model="form.resource">
|
||||
<el-radio label="Sponsor" />
|
||||
<el-radio label="Venue" />
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="活动描述">
|
||||
<el-input v-model="form.desc" type="textarea" />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="onSubmit">创建</el-button>
|
||||
<el-button>取消</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-card>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { reactive } from 'vue'
|
||||
|
||||
// do not use same name with ref
|
||||
const form = reactive({
|
||||
name: '',
|
||||
region: '',
|
||||
date1: '',
|
||||
date2: '',
|
||||
delivery: false,
|
||||
type: [],
|
||||
resource: '',
|
||||
desc: '',
|
||||
})
|
||||
|
||||
const onSubmit = () => {
|
||||
console.log('submit!')
|
||||
}
|
||||
</script>
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@@ -1,109 +0,0 @@
|
||||
<template>
|
||||
<el-card class="box-card" shadow="never"> 卡片列表 🍓🍇🍈🍉 </el-card>
|
||||
|
||||
<el-row
|
||||
class="mt10"
|
||||
style="height: 75vh; overflow: auto"
|
||||
v-infinite-scroll="load"
|
||||
>
|
||||
<el-col :span="6" v-for="item in listData" :key="item" offset="1">
|
||||
<el-card shadow="hover" class="card-lists">
|
||||
<!-- <div
|
||||
class="item-state-pos"
|
||||
:style="{
|
||||
backgroundColor:
|
||||
item.pay_state == '1002'
|
||||
? '#6C88D5'
|
||||
: item.pay_state == '1003'
|
||||
? '#fa4a1e'
|
||||
: '#00AA5A',
|
||||
}"
|
||||
>
|
||||
{{
|
||||
item.pay_state == '1001'
|
||||
? '已支付'
|
||||
: item.pay_state == '1002'
|
||||
? '待支付'
|
||||
: '未支付'
|
||||
}}
|
||||
</div> -->
|
||||
<div class="item-state-pos">
|
||||
<el-icon><MoreFilled /></el-icon>
|
||||
</div>
|
||||
<div class="item-title">
|
||||
<img src="../../assets/images/avart.jpg" alt="" />{{ item.title }}
|
||||
</div>
|
||||
<div class="item-content flx-row">
|
||||
<div class="cot">
|
||||
<div class="cot-tit">发行日期</div>
|
||||
<div class="cot-txt">{{ item.date }}</div>
|
||||
</div>
|
||||
<div class="cot">
|
||||
<div class="cot-tit">客户姓名</div>
|
||||
<div class="cot-txt">{{ item.user_name }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item-content flx-row">
|
||||
<div class="cot">
|
||||
<div class="cot-tit">
|
||||
金额 <span>{{ item.number }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cot">
|
||||
<div class="cot-tit">
|
||||
状态
|
||||
<span
|
||||
:class="[
|
||||
item.pay_state == '1002'
|
||||
? 'type suc-type'
|
||||
: item.pay_state == '1003'
|
||||
? 'type'
|
||||
: 'type error-type',
|
||||
]"
|
||||
>{{
|
||||
item.pay_state == '1001'
|
||||
? '已支付'
|
||||
: item.pay_state == '1002'
|
||||
? '待支付'
|
||||
: '未支付'
|
||||
}}</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item-content flx-row">
|
||||
<div class="cot">
|
||||
<div class="cot-tit">详情</div>
|
||||
<div class="cot-txt one-cut-txt">{{ item.content }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { cardlists } from '../../api/modules/index.js'
|
||||
|
||||
import { onMounted, ref } from 'vue'
|
||||
const listData = ref([])
|
||||
const load = () => {
|
||||
cardlists().then((res) => {
|
||||
listData.value = listData.value.concat(res.data.data)
|
||||
})
|
||||
// count.value += 2
|
||||
}
|
||||
|
||||
const getListData = () => {
|
||||
cardlists().then((res) => {
|
||||
listData.value = res.data.data
|
||||
})
|
||||
}
|
||||
onMounted(() => {
|
||||
getListData()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import './index.scss';
|
||||
</style>
|
||||
@@ -1,80 +0,0 @@
|
||||
<template>
|
||||
<el-card class="box-card" shadow="never"> 基础列表 🍓🍇🍈🍉 </el-card>
|
||||
|
||||
<div v-infinite-scroll="load" class="infinite-list" style="overflow: auto">
|
||||
<div class="barlist flx-row" v-for="i in listData" :key="i">
|
||||
<div class="item-img">
|
||||
<img src="../../assets/images/avart.jpg" alt="" />
|
||||
</div>
|
||||
<div class="item-left">
|
||||
<div class="name">{{ i.createUser }}</div>
|
||||
<div class="subname">{{ i.email }}</div>
|
||||
</div>
|
||||
<div class="item-left">
|
||||
<div class="name">{{ i.title }}</div>
|
||||
<div class="subname">{{ i.createTime }}发票已发出</div>
|
||||
</div>
|
||||
<div class="item-right">{{ i.number }}</div>
|
||||
<div
|
||||
class="item-state flx-row"
|
||||
:style="{
|
||||
backgroundColor:
|
||||
i.pay_state == '1002'
|
||||
? '#6C88D5'
|
||||
: i.pay_state == '1003'
|
||||
? '#fa4a1e'
|
||||
: '#00AA5A',
|
||||
}"
|
||||
>
|
||||
<span>{{
|
||||
i.pay_state == '1001'
|
||||
? '已支付'
|
||||
: i.pay_state == '1002'
|
||||
? '待支付'
|
||||
: '未支付'
|
||||
}}</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div v-for="i in listData" :key="i" class="infinite-list-item">
|
||||
<div class="infinite-list-item-top">
|
||||
{{ i.title }}
|
||||
</div>
|
||||
<div class="infinite-list-item-main flx-row">
|
||||
<div style="flex: 1">创建人：{{ i.createUser }}</div>
|
||||
<div style="flex: 1">发布时间：{{ i.createTime }}</div>
|
||||
</div>
|
||||
</div>-->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { Newslist } from '../../api/modules/index.js'
|
||||
|
||||
import { onMounted, ref } from 'vue'
|
||||
const listData = ref([])
|
||||
const load = () => {
|
||||
Newslist().then((res) => {
|
||||
listData.value = listData.value.concat(res.data.data)
|
||||
})
|
||||
// count.value += 2
|
||||
}
|
||||
|
||||
const getListData = () => {
|
||||
Newslist().then((res) => {
|
||||
listData.value = res.data.data
|
||||
})
|
||||
}
|
||||
onMounted(() => {
|
||||
getListData()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.box-card {
|
||||
width: 100%;
|
||||
.box-card-title {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
}
|
||||
@import './index.scss';
|
||||
</style>
|
||||
@@ -17,7 +17,7 @@
|
||||
<template #default>
|
||||
<el-form
|
||||
:model="formData"
|
||||
label-width="auto" style="max-width: 600px">
|
||||
label-width="auto" v-loading="loading">
|
||||
|
||||
<el-form-item label="服务名称" prop="formData.goodsName">
|
||||
<el-input
|
||||
@@ -195,6 +195,7 @@ const total = ref(0)
|
||||
const drawer = ref(false)
|
||||
const drawerEdit = ref(false)
|
||||
const direction = ref('rtl')
|
||||
const loading = ref(false)
|
||||
|
||||
const formData = ref({
|
||||
goodsName: '',
|
||||
@@ -230,15 +231,20 @@ const initData = () => {
|
||||
|
||||
// 上传前的钩子
|
||||
const beforeUpload = (file) => {
|
||||
const maxSize = 10 * 1024 * 1024; // 最大 2MB
|
||||
|
||||
loading.value = true;
|
||||
|
||||
const maxSize = 5 * 1024 * 1024; // 最大 2MB
|
||||
if (file.size > maxSize) {
|
||||
alert('文件大小不能超过 10MB');
|
||||
alert('文件大小不能超过 5MB');
|
||||
loading.value = false;
|
||||
return false;
|
||||
}
|
||||
|
||||
const allowedTypes = ['image/jpeg', 'image/png'];
|
||||
if (!allowedTypes.includes(file.type)) {
|
||||
alert('只允许上传 JPEG 或 PNG 图片');
|
||||
loading.value = false;
|
||||
return false;
|
||||
}
|
||||
|
||||
@@ -284,7 +290,7 @@ const addUploadCarouselImageFile = (params) => {
|
||||
handleCarouselImageSuccess(response, params.file, params.fileList);
|
||||
})
|
||||
.catch((error) => {
|
||||
if(!error)
|
||||
if(error)
|
||||
{
|
||||
handleError(error, params.file, params.fileList);
|
||||
}
|
||||
@@ -301,7 +307,7 @@ const addUploadDetailFile = (params) => {
|
||||
handleDetailSuccess(response, params.file, params.fileList);
|
||||
})
|
||||
.catch((error) => {
|
||||
if(!error)
|
||||
if(error)
|
||||
{
|
||||
handleError(error, params.file, params.fileList);
|
||||
}
|
||||
@@ -317,15 +323,18 @@ const handleCarouselImageSuccess = (response, file) => {
|
||||
};
|
||||
|
||||
formData.value.carouselImage.push(fileObj);
|
||||
loading.value = false;
|
||||
}
|
||||
|
||||
// 处理详情上传成功的回调
|
||||
const handleDetailSuccess = (response) => {
|
||||
formData.value.details = response.data[0];
|
||||
loading.value = false;
|
||||
}
|
||||
|
||||
// 处理上传失败的回调
|
||||
const handleError = (error, file, fileList) => {
|
||||
loading.value = false;
|
||||
console.error('上传失败:', error, file, fileList);
|
||||
}
|
||||
|
||||
@@ -406,6 +415,7 @@ const onSubmit = () => {
|
||||
const cancelDrawer = () => {
|
||||
drawer.value = false;
|
||||
drawerEdit.value = false;
|
||||
loading.value = false;
|
||||
formData.value = {
|
||||
goodsName: '',
|
||||
price: '',
|
||||
|
||||
@@ -1,259 +0,0 @@
|
||||
<template>
|
||||
<el-card class="box-card" shadow="never">
|
||||
<div class="flx-row">
|
||||
搜索列表 🍓🍇🍈🍉
|
||||
<el-input
|
||||
type="text"
|
||||
placeholder="请输入关键字..."
|
||||
style="width: 300px; margin-left: 10px"
|
||||
v-model="searchValue"
|
||||
>
|
||||
<template #append>
|
||||
<el-button type="primary" :icon="Search" />
|
||||
</template>
|
||||
</el-input>
|
||||
<div style="flex: 1"></div>
|
||||
<div class="img" @click="checkList('1001')">
|
||||
<svg
|
||||
t="1663432921802"
|
||||
class="icon"
|
||||
viewBox="0 0 1024 1024"
|
||||
version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
p-id="4971"
|
||||
data-spm-anchor-id="a313x.7781069.0.i30"
|
||||
width="20"
|
||||
height="20"
|
||||
:fill="colorType == '1001' ? '#1250FC' : '#888888'"
|
||||
>
|
||||
<path
|
||||
d="M849.1 128 174.9 128c-25.9 0-46.9 21-46.9 46.9l0 34.2c0 25.9 21 46.9 46.9 46.9l674.2 0c25.9 0 46.9-21 46.9-46.9l0-34.2C896 149 875 128 849.1 128z"
|
||||
p-id="4972"
|
||||
></path>
|
||||
<path
|
||||
d="M849.1 768 174.9 768c-25.9 0-46.9 21-46.9 46.9l0 34.2c0 25.9 21 46.9 46.9 46.9l674.2 0c25.9 0 46.9-21 46.9-46.9l0-34.2C896 789 875 768 849.1 768z"
|
||||
p-id="4973"
|
||||
></path>
|
||||
<path
|
||||
d="M849.1 448 174.9 448c-25.9 0-46.9 21-46.9 46.9l0 34.2c0 25.9 21 46.9 46.9 46.9l674.2 0c25.9 0 46.9-21 46.9-46.9l0-34.2C896 469 875 448 849.1 448z"
|
||||
p-id="4974"
|
||||
></path>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="img" @click="checkList('1002')">
|
||||
<svg
|
||||
t="1663433235072"
|
||||
class="icon"
|
||||
viewBox="0 0 1024 1024"
|
||||
version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
p-id="5148"
|
||||
width="23"
|
||||
height="23"
|
||||
:fill="colorType == '1002' ? '#1250FC' : '#888888'"
|
||||
>
|
||||
<path
|
||||
d="M433.1 480 174.9 480c-25.9 0-46.9-21-46.9-46.9L128 174.9c0-25.9 21-46.9 46.9-46.9l258.2 0c25.9 0 46.9 21 46.9 46.9l0 258.2C480 459 459 480 433.1 480z"
|
||||
p-id="5149"
|
||||
></path>
|
||||
<path
|
||||
d="M433.1 896 174.9 896c-25.9 0-46.9-21-46.9-46.9L128 590.9c0-25.9 21-46.9 46.9-46.9l258.2 0c25.9 0 46.9 21 46.9 46.9l0 258.2C480 875 459 896 433.1 896z"
|
||||
p-id="5150"
|
||||
></path>
|
||||
<path
|
||||
d="M849.1 480 590.9 480c-25.9 0-46.9-21-46.9-46.9L544 174.9c0-25.9 21-46.9 46.9-46.9l258.2 0c25.9 0 46.9 21 46.9 46.9l0 258.2C896 459 875 480 849.1 480z"
|
||||
p-id="5151"
|
||||
></path>
|
||||
<path
|
||||
d="M849.1 896 590.9 896c-25.9 0-46.9-21-46.9-46.9L544 590.9c0-25.9 21-46.9 46.9-46.9l258.2 0c25.9 0 46.9 21 46.9 46.9l0 258.2C896 875 875 896 849.1 896z"
|
||||
p-id="5152"
|
||||
></path>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
<div
|
||||
v-infinite-scroll="load"
|
||||
class="infinite-list"
|
||||
style="overflow: auto"
|
||||
v-if="colorType == 1001"
|
||||
>
|
||||
<div class="barlist flx-row" v-for="i in listData" :key="i">
|
||||
<div class="item-img">
|
||||
<img src="../../assets/images/avart.jpg" alt="" />
|
||||
</div>
|
||||
<div class="item-left">
|
||||
<div class="name">{{ i.createUser }}</div>
|
||||
<div class="subname">{{ i.email }}</div>
|
||||
</div>
|
||||
<div class="item-left">
|
||||
<div class="name">{{ i.title }}</div>
|
||||
<div class="subname">{{ i.createTime }}发票已发出</div>
|
||||
</div>
|
||||
<div class="item-right">{{ i.number }}</div>
|
||||
<div
|
||||
class="item-state flx-row"
|
||||
:style="{
|
||||
backgroundColor:
|
||||
i.pay_state == '1002'
|
||||
? '#6C88D5'
|
||||
: i.pay_state == '1003'
|
||||
? '#fa4a1e'
|
||||
: '#00AA5A',
|
||||
}"
|
||||
>
|
||||
<span>{{
|
||||
i.pay_state == '1001'
|
||||
? '已支付'
|
||||
: i.pay_state == '1002'
|
||||
? '待支付'
|
||||
: '未支付'
|
||||
}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<el-row
|
||||
class="mt10"
|
||||
style="height: 75vh; overflow: auto"
|
||||
v-infinite-scroll="load"
|
||||
v-if="colorType == 1002"
|
||||
>
|
||||
<el-col :span="6" v-for="item in cardlist" :key="item" offset="1">
|
||||
<el-card shadow="hover" class="card-lists">
|
||||
<!-- <div
|
||||
class="item-state-pos"
|
||||
:style="{
|
||||
backgroundColor:
|
||||
item.pay_state == '1002'
|
||||
? '#6C88D5'
|
||||
: item.pay_state == '1003'
|
||||
? '#fa4a1e'
|
||||
: '#00AA5A',
|
||||
}"
|
||||
>
|
||||
{{
|
||||
item.pay_state == '1001'
|
||||
? '已支付'
|
||||
: item.pay_state == '1002'
|
||||
? '待支付'
|
||||
: '未支付'
|
||||
}}
|
||||
</div> -->
|
||||
<div class="item-state-pos">
|
||||
<el-icon><MoreFilled /></el-icon>
|
||||
</div>
|
||||
<div class="item-title">
|
||||
<img src="../../assets/images/avart.jpg" alt="" />{{ item.title }}
|
||||
</div>
|
||||
<div class="item-content flx-row">
|
||||
<div class="cot">
|
||||
<div class="cot-tit">发行日期</div>
|
||||
<div class="cot-txt">{{ item.date }}</div>
|
||||
</div>
|
||||
<div class="cot">
|
||||
<div class="cot-tit">客户姓名</div>
|
||||
<div class="cot-txt">{{ item.user_name }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item-content flx-row">
|
||||
<div class="cot">
|
||||
<div class="cot-tit">
|
||||
金额 <span>{{ item.number }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cot">
|
||||
<div class="cot-tit">
|
||||
状态
|
||||
<span
|
||||
:class="[
|
||||
item.pay_state == '1002'
|
||||
? 'type suc-type'
|
||||
: item.pay_state == '1003'
|
||||
? 'type'
|
||||
: 'type error-type',
|
||||
]"
|
||||
>{{
|
||||
item.pay_state == '1001'
|
||||
? '已支付'
|
||||
: item.pay_state == '1002'
|
||||
? '待支付'
|
||||
: '未支付'
|
||||
}}</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item-content flx-row">
|
||||
<div class="cot">
|
||||
<div class="cot-tit">详情</div>
|
||||
<div class="cot-txt one-cut-txt">{{ item.content }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { Newslist, cardlists } from '../../api/modules/index.js'
|
||||
|
||||
import { Search, Plus } from '@element-plus/icons-vue'
|
||||
import { onMounted, ref } from 'vue'
|
||||
|
||||
const listData = ref([])
|
||||
const cardlist = ref([])
|
||||
const searchValue = ref('')
|
||||
const colorType = ref('1001')
|
||||
const load = () => {
|
||||
if (colorType == '1002') {
|
||||
cardlists().then((res) => {
|
||||
cardlist.value = res.data.data
|
||||
})
|
||||
} else {
|
||||
Newslist().then((res) => {
|
||||
listData.value = listData.value.concat(res.data.data)
|
||||
})
|
||||
}
|
||||
// count.value += 2
|
||||
}
|
||||
|
||||
const getListData = () => {
|
||||
Newslist().then((res) => {
|
||||
listData.value = res.data.data
|
||||
})
|
||||
cardlists().then((res) => {
|
||||
cardlist.value = res.data.data
|
||||
})
|
||||
}
|
||||
|
||||
const checkList = (type) => {
|
||||
colorType.value = type
|
||||
if (type == 1001) {
|
||||
ElMessage({
|
||||
message: '单列展示，切换成功！',
|
||||
type: 'success',
|
||||
})
|
||||
} else {
|
||||
ElMessage({
|
||||
message: '多列展示，切换成功！',
|
||||
type: 'success',
|
||||
})
|
||||
}
|
||||
}
|
||||
onMounted(() => {
|
||||
getListData()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.box-card {
|
||||
width: 100%;
|
||||
.box-card-title {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
}
|
||||
@import './index.scss';
|
||||
</style>
|
||||
@@ -1,172 +0,0 @@
|
||||
<template>
|
||||
<div id="main" style="width: 100%; height: 100%"></div>
|
||||
</template>
|
||||
|
||||
<script setup name="GMVnearly">
|
||||
import * as echarts from 'echarts'
|
||||
import { onMounted } from 'vue'
|
||||
|
||||
const getEcharts = () => {
|
||||
var chartDom = document.getElementById('main')
|
||||
var myChart = echarts.init(chartDom)
|
||||
|
||||
const option = {
|
||||
tooltip: {
|
||||
//鼠标悬停时显示对应数据
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'shadow',
|
||||
},
|
||||
},
|
||||
title: {
|
||||
text: '出入库情况',
|
||||
top: '8px',
|
||||
left: '10px',
|
||||
|
||||
bottom: '8px',
|
||||
textStyle: {
|
||||
color: '#191e24',
|
||||
fontSize: '14',
|
||||
},
|
||||
},
|
||||
legend: {
|
||||
// 图例
|
||||
data: ['出库', '入库'],
|
||||
top: 8,
|
||||
right: 16, // 修改位置
|
||||
icon: 'circle', //原型
|
||||
textStyle: {
|
||||
color: '#191e2480', //字体颜色
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
// 上下左右 边距
|
||||
top: '8%',
|
||||
left: '3%',
|
||||
right: '3%',
|
||||
bottom: '8%',
|
||||
top: '15%',
|
||||
containLabel: true,
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
axisTick: { show: false },
|
||||
data: [
|
||||
'1月',
|
||||
'2月',
|
||||
'3月',
|
||||
'4月',
|
||||
'5月',
|
||||
'6月',
|
||||
'7月',
|
||||
'8月',
|
||||
'9月',
|
||||
'10月',
|
||||
'11月',
|
||||
'12月',
|
||||
],
|
||||
axisLine: {
|
||||
// 轴线的颜色以及宽度
|
||||
lineStyle: {
|
||||
color: '#A6A6A628',
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
// 轴文字的配置
|
||||
show: true,
|
||||
textStyle: {
|
||||
color: '#191e2480',
|
||||
},
|
||||
},
|
||||
splitLine: {
|
||||
// 分割线配置
|
||||
lineStyle: {
|
||||
color: '#A6A6A628',
|
||||
// type: "dashed", // 虚线
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
min: 0, // 最小值
|
||||
max: 500, //最大值
|
||||
// splitNumber: 3, //划分3格
|
||||
type: 'value',
|
||||
axisLine: {
|
||||
// 轴线的颜色以及宽度
|
||||
show: false,
|
||||
},
|
||||
axisLabel: {
|
||||
// 轴文字的配置
|
||||
show: true,
|
||||
// textStyle: {
|
||||
// color: "#fff",
|
||||
// },
|
||||
},
|
||||
splitLine: {
|
||||
// 分割线配置
|
||||
lineStyle: {
|
||||
color: '#A6A6A628',
|
||||
// type: "dashed",
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '出库',
|
||||
type: 'bar',
|
||||
barWidth: 10, // 柱图宽度
|
||||
barGap: '30%',
|
||||
// label: labelOption,
|
||||
emphasis: {
|
||||
focus: 'series',
|
||||
},
|
||||
data: [320, 332, 401, 334, 390, 320, 332, 301, 334, 390, 320, 332],
|
||||
// ↓ 这里可以改变渐变色的方向
|
||||
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
|
||||
{
|
||||
offset: 0,
|
||||
color: '#6E48E6',
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: '#3AA6FA ',
|
||||
},
|
||||
]),
|
||||
},
|
||||
{
|
||||
name: '入库',
|
||||
type: 'bar',
|
||||
barWidth: 10, // 柱图宽度
|
||||
// label: labelOption,
|
||||
emphasis: {
|
||||
focus: 'series',
|
||||
},
|
||||
data: [220, 182, 191, 234, 290, 220, 182, 191, 234, 290, 220, 182],
|
||||
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
|
||||
{
|
||||
offset: 0,
|
||||
color: '#9DDD92',
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: '#10BFAA',
|
||||
},
|
||||
]),
|
||||
},
|
||||
],
|
||||
}
|
||||
option && myChart.setOption(option)
|
||||
window.onresize = () => {
|
||||
myChart.resize()
|
||||
}
|
||||
}
|
||||
onMounted(() => {
|
||||
setTimeout(() => {
|
||||
getEcharts()
|
||||
}, 1000)
|
||||
})
|
||||
</script>
|
||||
@@ -1,149 +0,0 @@
|
||||
<template>
|
||||
<div id="linenearly" style="width: 100%; height: 100%"></div>
|
||||
</template>
|
||||
|
||||
<script setup name="GMVnearly">
|
||||
import * as echarts from 'echarts'
|
||||
import { onMounted } from 'vue'
|
||||
|
||||
const getEcharts = () => {
|
||||
var chartDom = document.getElementById('linenearly')
|
||||
var myChart = echarts.init(chartDom)
|
||||
|
||||
const option = {
|
||||
tooltip: {
|
||||
//鼠标悬停时显示对应数据
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'shadow',
|
||||
},
|
||||
},
|
||||
color: ['#87A2E8FF', '#74CCCCFF'],
|
||||
title: {
|
||||
text: '近一年的DAU/DNU',
|
||||
top: '8px',
|
||||
left: '10px',
|
||||
bottom: '8px',
|
||||
textStyle: {
|
||||
color: '#191e24',
|
||||
fontSize: '14',
|
||||
},
|
||||
},
|
||||
legend: {
|
||||
// 图例
|
||||
data: ['DAU', 'DNU'],
|
||||
top: 8,
|
||||
right: 16, // 修改位置
|
||||
icon: 'circle', //原型
|
||||
textStyle: {
|
||||
color: '#191e2480', //字体颜色
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
// 上下左右 边距
|
||||
top: '8%',
|
||||
left: '3%',
|
||||
right: '3%',
|
||||
bottom: '8%',
|
||||
top: '15%',
|
||||
containLabel: true,
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
axisTick: { show: false },
|
||||
data: [
|
||||
'1月',
|
||||
'2月',
|
||||
'3月',
|
||||
'4月',
|
||||
'5月',
|
||||
'6月',
|
||||
'7月',
|
||||
'8月',
|
||||
'9月',
|
||||
'10月',
|
||||
'11月',
|
||||
'12月',
|
||||
],
|
||||
axisLine: {
|
||||
// 轴线的颜色以及宽度
|
||||
lineStyle: {
|
||||
color: '#A6A6A628',
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
// 轴文字的配置
|
||||
show: true,
|
||||
textStyle: {
|
||||
color: '#191e2480',
|
||||
},
|
||||
},
|
||||
splitLine: {
|
||||
// 分割线配置
|
||||
lineStyle: {
|
||||
color: '#A6A6A628',
|
||||
// type: "dashed", // 虚线
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
min: 0, // 最小值
|
||||
// splitNumber: 3, //划分3格
|
||||
type: 'value',
|
||||
axisLine: {
|
||||
// 轴线的颜色以及宽度
|
||||
show: false,
|
||||
},
|
||||
axisLabel: {
|
||||
// 轴文字的配置
|
||||
show: true,
|
||||
// textStyle: {
|
||||
// color: "#fff",
|
||||
// },
|
||||
},
|
||||
splitLine: {
|
||||
// 分割线配置
|
||||
lineStyle: {
|
||||
color: '#A6A6A628',
|
||||
// type: "dashed",
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: 'DAU',
|
||||
type: 'line',
|
||||
stack: 'Total',
|
||||
areaStyle: {},
|
||||
emphasis: {
|
||||
focus: 'series',
|
||||
},
|
||||
data: [120, 132, 101, 134, 90, 230, 210, 134, 90, 230, 210, 230],
|
||||
},
|
||||
{
|
||||
name: 'DNU',
|
||||
type: 'line',
|
||||
stack: 'Total',
|
||||
areaStyle: {},
|
||||
emphasis: {
|
||||
focus: 'series',
|
||||
},
|
||||
data: [120, 132, 101, 134, 90, 230, 210, 134, 90, 230, 210, 290],
|
||||
},
|
||||
],
|
||||
}
|
||||
option && myChart.setOption(option)
|
||||
window.onresize = () => {
|
||||
myChart.resize()
|
||||
}
|
||||
}
|
||||
onMounted(() => {
|
||||
setTimeout(() => {
|
||||
getEcharts()
|
||||
}, 1000)
|
||||
})
|
||||
</script>
|
||||
@@ -1,303 +0,0 @@
|
||||
<template>
|
||||
<el-row class="data-lists">
|
||||
<el-col :span="9" :class="{ shake: disabled }"
|
||||
><div class="data-item-one flx-row">
|
||||
<div class="item-left">
|
||||
<img src="../../assets/home.png" alt="" srcset="" />
|
||||
</div>
|
||||
<div class="item-right">
|
||||
<div class="item-right-top">
|
||||
<div class="tit">本期活动GMX</div>
|
||||
<div class="num">1523.53w</div>
|
||||
</div>
|
||||
<div class="line"></div>
|
||||
<div class="item-right-bottom flx-row">
|
||||
<div class="item">
|
||||
<div class="tit">类目一</div>
|
||||
<div class="num">53w</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="tit">类目一</div>
|
||||
<div class="num">53w</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="tit">类目一</div>
|
||||
<div class="num">53w</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div></el-col
|
||||
>
|
||||
<el-col :span="9" :class="{ shake: disabled }"
|
||||
><div class="data-item-two">
|
||||
<div class="item">
|
||||
<div class="item-des flx-row">
|
||||
<img src="../../assets/icon1.png" alt="" />
|
||||
<div class="right">
|
||||
<div class="num">934.7w <span>29.74</span></div>
|
||||
<div class="txt">今日DAU</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="item-des flx-row" style="margin-right: 0px">
|
||||
<img src="../../assets/icon2.png" alt="" />
|
||||
<div class="right">
|
||||
<div class="num">264.7w <span>29.74</span></div>
|
||||
<div class="txt">今日DAU</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="item-des flx-row">
|
||||
<div class="right border-right-1px">
|
||||
<div class="num">24.93w</div>
|
||||
<div class="txt">今日DAU</div>
|
||||
</div>
|
||||
<div class="right">
|
||||
<div class="num">984.52w</div>
|
||||
<div class="txt">总用户数</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="item-des flx-row" style="margin-right: 0px">
|
||||
<div class="right border-right-1px">
|
||||
<div class="num">84.52w</div>
|
||||
<div class="txt">GPS</div>
|
||||
</div>
|
||||
<div class="right">
|
||||
<div class="num">84.52w</div>
|
||||
<div class="txt">特权</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div></el-col
|
||||
>
|
||||
<el-col :span="6" :class="{ shakeRight: disabled }">
|
||||
<div class="data-item-three">
|
||||
<div class="tit">待处理</div>
|
||||
<div class="content">
|
||||
<div class="item">
|
||||
<div class="item-data">
|
||||
<div class="tit">退款申请</div>
|
||||
<div class="num">89 <span>条</span></div>
|
||||
<el-icon class="icon"><ArrowRight /></el-icon>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="item-data">
|
||||
<div class="tit">退款申请</div>
|
||||
<div class="num">89 <span>条</span></div>
|
||||
<el-icon class="icon"><ArrowRight /></el-icon>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="item-data">
|
||||
<div class="tit">退款申请</div>
|
||||
<div class="num">89 <span>条</span></div>
|
||||
<el-icon class="icon"><ArrowRight /></el-icon>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="item-data">
|
||||
<div class="tit">退款申请</div>
|
||||
<div class="num">89 <span>条</span></div>
|
||||
<el-icon class="icon"><ArrowRight /></el-icon>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row class="dataLayer">
|
||||
<el-col :span="18">
|
||||
<div class="flx-row">
|
||||
<div class="datalayer-echarts" :class="{ shake: disabled }">
|
||||
<GMVnearly></GMVnearly>
|
||||
</div>
|
||||
<div class="datalayer-echarts" :class="{ shake: disabled }">
|
||||
<linenearly></linenearly>
|
||||
</div>
|
||||
</div>
|
||||
<div class="table-data" :class="{ shake: disabled }">
|
||||
<div class="tit">主题页列表</div>
|
||||
<div class="table-box">
|
||||
<el-table
|
||||
:data="tableData"
|
||||
:header-cell-style="{
|
||||
background: '#FAFBFDFF',
|
||||
fontWeight: '400',
|
||||
fontSize: '14px',
|
||||
padding: '0',
|
||||
fontHeight: '36px',
|
||||
height: '36px',
|
||||
}"
|
||||
:row-style="{
|
||||
fontWeight: '400',
|
||||
fontSize: '14px',
|
||||
padding: '0',
|
||||
fontHeight: '44px',
|
||||
height: '44px',
|
||||
}"
|
||||
>
|
||||
<el-table-column
|
||||
v-for="item in options"
|
||||
:key="item.type"
|
||||
:prop="item.props"
|
||||
:label="item.label"
|
||||
:width="item.width"
|
||||
:align="item.align"
|
||||
show-overflow-tooltip
|
||||
:fixed="item.fixed"
|
||||
>
|
||||
<template v-slot:default="scope" v-if="item.props === 'type'">
|
||||
<span class="type" v-if="scope.row[item.props] == true"
|
||||
>外部链接</span
|
||||
>
|
||||
<span
|
||||
class="type error-type"
|
||||
v-if="scope.row[item.props] == false"
|
||||
>内部链接</span
|
||||
>
|
||||
</template>
|
||||
<template v-slot:default="scope" v-if="item.props === 'state'">
|
||||
<span v-if="scope.row[item.props] == true">
|
||||
<i class="state"></i>已上线</span
|
||||
>
|
||||
<span v-if="scope.row[item.props] == false">
|
||||
<i class="state error-state"></i>已下线</span
|
||||
>
|
||||
</template>
|
||||
<template v-slot:default="scope" v-if="item.props === 'actions'">
|
||||
<el-icon class="icon-edit" @click="editorClick(scope.row)"
|
||||
><Edit
|
||||
/></el-icon>
|
||||
<el-popconfirm
|
||||
confirm-button-text="确认"
|
||||
cancel-button-text="取消"
|
||||
:icon="InfoFilled"
|
||||
icon-color="#626AEF"
|
||||
title="确认删除该主题?"
|
||||
@confirm="DeleteItem(index)"
|
||||
>
|
||||
<template #reference>
|
||||
<el-icon class="icon-dele"><Delete /></el-icon>
|
||||
</template>
|
||||
</el-popconfirm>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<div class="data-item-three" :class="{ shakeRight: disabled }">
|
||||
<div class="tit">常用功能</div>
|
||||
<div class="content">
|
||||
<div class="item">
|
||||
<div class="item-data flx-row">
|
||||
<div class="tit">
|
||||
<el-icon><Histogram /></el-icon>订单列表
|
||||
</div>
|
||||
<el-icon class="icon"><ArrowRight /></el-icon>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="item-data flx-row">
|
||||
<div class="tit">
|
||||
<el-icon><Avatar /></el-icon>用户列表
|
||||
</div>
|
||||
<el-icon class="icon"><ArrowRight /></el-icon>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="item-data">
|
||||
<div class="tit">
|
||||
<el-icon><HomeFilled /></el-icon>首页配置
|
||||
</div>
|
||||
<el-icon class="icon"><ArrowRight /></el-icon>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="item-data">
|
||||
<div class="tit">
|
||||
<el-icon><PictureFilled /></el-icon>主题配置
|
||||
</div>
|
||||
<el-icon class="icon"><ArrowRight /></el-icon>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="item-data">
|
||||
<div class="tit">
|
||||
<el-icon><Menu /></el-icon>活动管理
|
||||
</div>
|
||||
<el-icon class="icon"><ArrowRight /></el-icon>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="item-data">
|
||||
<div class="tit">
|
||||
<el-icon><Tools /></el-icon>退款申请
|
||||
</div>
|
||||
<el-icon class="icon"><ArrowRight /></el-icon>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="notice">
|
||||
<div class="notice-news">
|
||||
<img src="../../assets/homebg.jpeg" alt="" />
|
||||
<div class="txt one-cut-txt">
|
||||
查看更多查看更多查看更多查看更查看更多查看更多查看更多查看更
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="data-item-three" :class="{ shakeRight: disabled }">
|
||||
<div class="tit">公告栏</div>
|
||||
<div class="notice-lists">
|
||||
<div class="item one-cut-txt" v-for="item in notList" :key="item.id">
|
||||
<span class="type">通知</span> {{ item.text }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { onMounted, ref } from 'vue'
|
||||
import GMVnearly from './components/GMVnearly.vue'
|
||||
import linenearly from './components/linenearly.vue'
|
||||
import { options } from './options.js'
|
||||
import { homeList, noticeLists } from '../../api/modules/index.js'
|
||||
const tableData = ref([])
|
||||
const notList = ref([])
|
||||
const disabled = ref(false)
|
||||
|
||||
const DeleteItem = (index) => {
|
||||
tableData.value.splice(index, 1)
|
||||
}
|
||||
|
||||
const initData = () => {
|
||||
homeList().then((res) => {
|
||||
tableData.value = res.data.data
|
||||
})
|
||||
|
||||
noticeLists().then((res) => {
|
||||
notList.value = res.data.data
|
||||
})
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
initData()
|
||||
disabled.value = true
|
||||
setTimeout(() => {
|
||||
disabled.value = false
|
||||
}, 1500)
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import './index.scss';
|
||||
</style>
|
||||
@@ -1,14 +1,9 @@
|
||||
<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>
|
||||
<h4 v-if="!editStatus">创建排班</h4>
|
||||
<h4 v-else>更新排班</h4>
|
||||
</template>
|
||||
<template #default>
|
||||
|
||||
@@ -16,6 +11,7 @@
|
||||
|
||||
<el-form-item label="日期时间">
|
||||
<el-date-picker
|
||||
v-if="!editStatus"
|
||||
v-model="scheduleForm.date"
|
||||
type="date"
|
||||
placeholder="排班日期"
|
||||
@@ -23,6 +19,16 @@
|
||||
style="margin-right: 20px"
|
||||
@change="handleDateChange"
|
||||
/>
|
||||
<el-date-picker
|
||||
v-else
|
||||
v-model="scheduleForm.date"
|
||||
type="date"
|
||||
placeholder="排班日期"
|
||||
:disabled-date="disablePastAndSpecificDates"
|
||||
style="margin-right: 20px"
|
||||
@change="handleDateChange"
|
||||
disabled
|
||||
/>
|
||||
|
||||
<el-select
|
||||
v-model="scheduleForm.timeQuantumId"
|
||||
@@ -42,16 +48,22 @@
|
||||
|
||||
<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 v-if="!editStatus">
|
||||
<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>
|
||||
</template>
|
||||
|
||||
<template v-else>
|
||||
<el-alert title="选择排班日期时间后，将会获取排班人员" type="warning" />
|
||||
<el-tag type="info">{{scheduleForm.username}}</el-tag>
|
||||
</template>
|
||||
|
||||
</el-form-item>
|
||||
@@ -66,7 +78,7 @@
|
||||
|
||||
</el-drawer>
|
||||
|
||||
<el-container class="mt10">
|
||||
<el-container class="mt10" style="height: 80vh">
|
||||
<el-aside width="220px">
|
||||
<el-scrollbar>
|
||||
<el-menu >
|
||||
@@ -91,7 +103,16 @@
|
||||
</el-aside>
|
||||
<el-container class="ml20">
|
||||
<el-main>
|
||||
<el-scrollbar>
|
||||
|
||||
<el-button type="success" @click="drawer = true" class="mR10">
|
||||
<el-icon style="margin-right: 10px;"><CirclePlus /></el-icon>
|
||||
创建排班
|
||||
</el-button>
|
||||
|
||||
<el-tag type="success" class="mR10">当前日期：{{ isDate }}</el-tag>
|
||||
<el-tag type="info" class="mR10" v-if="isRangeTime">时间段：{{isRangeTime}}</el-tag>
|
||||
|
||||
<el-scrollbar class="mt20">
|
||||
<el-table :data="userDataList">
|
||||
|
||||
<el-table-column prop="date" label="日期" width="200" />
|
||||
@@ -99,12 +120,24 @@
|
||||
|
||||
<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-column prop="mobile" label="手机号" />
|
||||
|
||||
<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-scrollbar>
|
||||
</el-main>
|
||||
@@ -116,17 +149,11 @@
|
||||
<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 {delQuantum, listQuantum} from "../../api/modules/schedulingTime";
|
||||
import {ElMessage} from "element-plus";
|
||||
import {addSchedule, getScheduleList} from "../../api/modules/scheduling";
|
||||
import {listSurveyorsUser} from "../../api/modules/schedulingUser";
|
||||
import {addSchedule, delSchedule, getScheduleList, updateSchedule} from "../../api/modules/scheduling";
|
||||
import {listMaintenanceUser, 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: [],
|
||||
@@ -137,6 +164,7 @@ const scheduleForm = ref({
|
||||
|
||||
const direction = ref('rtl')
|
||||
const drawer = ref(false)
|
||||
const editStatus = ref(false)
|
||||
const userList = ref([]); // 勘察人员列表
|
||||
|
||||
// 日期列表
|
||||
@@ -146,6 +174,9 @@ const timeDataList = ref([]); // 时间段
|
||||
const defaultOpeneds = ref([]);
|
||||
|
||||
const userDataList = ref([]); // 已排期用户
|
||||
const isDate = ref(''); // 选中的日期
|
||||
const istimeQuantumId = ref(''); // 时间段ID
|
||||
const isRangeTime = ref(''); // 时间段
|
||||
|
||||
// 初始化
|
||||
const initData = () => {
|
||||
@@ -187,6 +218,8 @@ const initData = () => {
|
||||
defaultOpeneds.value = todayIndex;
|
||||
}
|
||||
|
||||
isDate.value = formatDate(currentDate); // 今天
|
||||
scheduleForm.value.date = formatDate(currentDate); // 默认的日期
|
||||
// 获取排班时段
|
||||
listQuantum().then((res) => {
|
||||
|
||||
@@ -204,8 +237,11 @@ const initData = () => {
|
||||
// 监听选中状态
|
||||
const handleDateChange = (value) => {
|
||||
|
||||
if(!scheduleForm.value.date)
|
||||
{
|
||||
if (editStatus.value) {
|
||||
return false;
|
||||
} // 编辑的时候无需获取
|
||||
|
||||
if (!scheduleForm.value.date) {
|
||||
scheduleForm.value.timeQuantumId = '';
|
||||
|
||||
ElMessage({
|
||||
@@ -215,8 +251,7 @@ const handleDateChange = (value) => {
|
||||
return;
|
||||
}
|
||||
|
||||
if(!scheduleForm.value.timeQuantumId)
|
||||
{
|
||||
if (!scheduleForm.value.timeQuantumId) {
|
||||
ElMessage({
|
||||
type: 'warning',
|
||||
message: '请继续选择排班时间段'
|
||||
@@ -232,7 +267,7 @@ const handleDateChange = (value) => {
|
||||
|
||||
userList.value = [];
|
||||
|
||||
listSurveyorsUser(params).then((res)=>{
|
||||
listMaintenanceUser(params).then((res) => {
|
||||
|
||||
userList.value = res.data
|
||||
});
|
||||
@@ -241,57 +276,120 @@ const handleDateChange = (value) => {
|
||||
// 添加排班人员
|
||||
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: '',
|
||||
// 如果不是编辑，则是添加，如果是编辑，则是更新
|
||||
if (!editStatus.value) {
|
||||
if (!scheduleForm.value.date) {
|
||||
ElMessage({
|
||||
type: 'warning',
|
||||
message: '请选择排班日期'
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
drawer.value = false;
|
||||
initData();
|
||||
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) => {
|
||||
|
||||
if (res.code === 200) {
|
||||
|
||||
if (!istimeQuantumId.value) {
|
||||
initSelectTimeClick(scheduleForm.value.date, timeList.value);// 获取当天所有时段人员
|
||||
} else {
|
||||
let dateParams = timeList.value.filter(item => item.id === scheduleForm.value.timeQuantumId);
|
||||
selectTimeClick(scheduleForm.value.date, {
|
||||
id: istimeQuantumId.value,
|
||||
startTime: dateParams[0].startTime,
|
||||
endTime: dateParams[0].endTime
|
||||
});// 获取当天所有时段人员
|
||||
}
|
||||
|
||||
scheduleForm.value = {
|
||||
userids: [],
|
||||
roleId: 3,
|
||||
date: '',
|
||||
timeQuantumId: '',
|
||||
}
|
||||
|
||||
drawer.value = false;
|
||||
editStatus.value = false;
|
||||
|
||||
ElMessage({
|
||||
type: 'success',
|
||||
message: '新增成功！'
|
||||
});
|
||||
}
|
||||
|
||||
})
|
||||
} else {
|
||||
|
||||
let params = {
|
||||
id: scheduleForm.value.id,
|
||||
userid: scheduleForm.value.userid,
|
||||
date: scheduleForm.value.date,
|
||||
timeQuantumId: scheduleForm.value.timeQuantumId,
|
||||
status: true
|
||||
};
|
||||
|
||||
// 修改时间段
|
||||
updateSchedule(params).then(res => {
|
||||
|
||||
if (res.code === 200) {
|
||||
|
||||
if (!istimeQuantumId.value) {
|
||||
initSelectTimeClick(scheduleForm.value.date, timeList.value);// 获取当天所有时段人员
|
||||
} else {
|
||||
|
||||
let dateParams = timeList.value.filter(item => item.id === params.timeQuantumId);
|
||||
selectTimeClick(params.date, {
|
||||
id: istimeQuantumId.value,
|
||||
startTime: dateParams[0].startTime,
|
||||
endTime: dateParams[0].endTime
|
||||
});// 获取当天所有时段人员
|
||||
}
|
||||
|
||||
scheduleForm.value = {
|
||||
userids: [],
|
||||
roleId: 3,
|
||||
date: '',
|
||||
timeQuantumId: '',
|
||||
}
|
||||
|
||||
drawer.value = false;
|
||||
editStatus.value = false;
|
||||
|
||||
ElMessage({
|
||||
type: 'success',
|
||||
message: '更新成功！'
|
||||
});
|
||||
}
|
||||
|
||||
ElMessage({
|
||||
type: 'success',
|
||||
message: '新增成功！'
|
||||
});
|
||||
|
||||
})
|
||||
}
|
||||
|
||||
};
|
||||
// 取消添加排班人员
|
||||
const handleCancelSchedule = () => {
|
||||
|
||||
drawer.value = false;
|
||||
editStatus.value = false;
|
||||
|
||||
scheduleForm.value = {
|
||||
userids: [],
|
||||
@@ -332,6 +430,8 @@ const initSelectTimeClick = (dateItem, timeList) => {
|
||||
roleId: 3,
|
||||
}
|
||||
|
||||
userDataList.value = [];
|
||||
|
||||
timeList.map(item => {
|
||||
|
||||
let params = {
|
||||
@@ -343,8 +443,7 @@ const initSelectTimeClick = (dateItem, timeList) => {
|
||||
// 获取用户数据
|
||||
getScheduleList(params).then((res) => {
|
||||
|
||||
if(res.data.length)
|
||||
{
|
||||
if (res.data.length) {
|
||||
res.data.map(resItem => {
|
||||
|
||||
resItem.date = params.date;
|
||||
@@ -369,9 +468,14 @@ const selectTimeClick = (dateItem, timeItem) => {
|
||||
|
||||
userDataList.value = [];
|
||||
|
||||
getScheduleList(params).then((res) => {
|
||||
scheduleForm.value.date = dateItem; // 选中的日期
|
||||
isDate.value = dateItem; // 选中的日期
|
||||
istimeQuantumId.value = timeItem.id; // 选中的时间段id
|
||||
isRangeTime.value = timeItem.startTime + '-' + timeItem.endTime; // 选中的时间段时间
|
||||
|
||||
|
||||
getScheduleList(params).then((res) => {
|
||||
|
||||
res.data.map(resItem => {
|
||||
|
||||
resItem.date = params.date;
|
||||
@@ -384,12 +488,64 @@ const selectTimeClick = (dateItem, timeItem) => {
|
||||
|
||||
// 日期格式
|
||||
const formatDate = (date) => {
|
||||
|
||||
if (typeof date === 'string') {
|
||||
// 检查是否已经是格式化的字符串
|
||||
const regex = /^\d{4}-\d{2}-\d{2}$/;
|
||||
if (regex.test(date)) {
|
||||
return 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 delQuantumClick = (row) => {
|
||||
|
||||
let params = {
|
||||
id: row.id,
|
||||
date: row.date
|
||||
};
|
||||
|
||||
// 删除数据
|
||||
delSchedule(params).then((res) => {
|
||||
|
||||
if (res.code === 200) {
|
||||
|
||||
if (!istimeQuantumId.value) {
|
||||
initSelectTimeClick(params.date, timeList.value);// 获取当天所有时段人员
|
||||
} else {
|
||||
let dateParams = timeList.value.filter(item => item.id === istimeQuantumId.value);
|
||||
selectTimeClick(params.date, {
|
||||
id: istimeQuantumId.value,
|
||||
startTime: dateParams[0].startTime,
|
||||
endTime: dateParams[0].endTime
|
||||
});// 获取当天所有时段人员
|
||||
}
|
||||
|
||||
ElMessage({
|
||||
type: 'success',
|
||||
message: '删除成功'
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
});
|
||||
}
|
||||
|
||||
// 编辑数据
|
||||
const editClick = (row) => {
|
||||
|
||||
editStatus.value = true;
|
||||
drawer.value = true;
|
||||
|
||||
scheduleForm.value = {...row}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
initData();
|
||||
});
|
||||
@@ -399,6 +555,7 @@ onMounted(() => {
|
||||
.mt10 {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.ml20 {
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
@@ -1,14 +1,9 @@
|
||||
<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>
|
||||
<h4 v-if="!editStatus">创建排班</h4>
|
||||
<h4 v-else>更新排班</h4>
|
||||
</template>
|
||||
<template #default>
|
||||
|
||||
@@ -16,6 +11,7 @@
|
||||
|
||||
<el-form-item label="日期时间">
|
||||
<el-date-picker
|
||||
v-if="!editStatus"
|
||||
v-model="scheduleForm.date"
|
||||
type="date"
|
||||
placeholder="排班日期"
|
||||
@@ -23,6 +19,16 @@
|
||||
style="margin-right: 20px"
|
||||
@change="handleDateChange"
|
||||
/>
|
||||
<el-date-picker
|
||||
v-else
|
||||
v-model="scheduleForm.date"
|
||||
type="date"
|
||||
placeholder="排班日期"
|
||||
:disabled-date="disablePastAndSpecificDates"
|
||||
style="margin-right: 20px"
|
||||
@change="handleDateChange"
|
||||
disabled
|
||||
/>
|
||||
|
||||
<el-select
|
||||
v-model="scheduleForm.timeQuantumId"
|
||||
@@ -42,16 +48,22 @@
|
||||
|
||||
<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 v-if="!editStatus">
|
||||
<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>
|
||||
</template>
|
||||
|
||||
<template v-else>
|
||||
<el-alert title="选择排班日期时间后，将会获取排班人员" type="warning" />
|
||||
<el-tag type="info">{{scheduleForm.username}}</el-tag>
|
||||
</template>
|
||||
|
||||
</el-form-item>
|
||||
@@ -66,7 +78,7 @@
|
||||
|
||||
</el-drawer>
|
||||
|
||||
<el-container class="mt10">
|
||||
<el-container class="mt10" style="height: 80vh">
|
||||
<el-aside width="220px">
|
||||
<el-scrollbar>
|
||||
<el-menu >
|
||||
@@ -91,7 +103,16 @@
|
||||
</el-aside>
|
||||
<el-container class="ml20">
|
||||
<el-main>
|
||||
<el-scrollbar>
|
||||
|
||||
<el-button type="success" @click="drawer = true" class="mR10">
|
||||
<el-icon style="margin-right: 10px;"><CirclePlus /></el-icon>
|
||||
创建排班
|
||||
</el-button>
|
||||
|
||||
<el-tag type="success" class="mR10">当前日期：{{ isDate }}</el-tag>
|
||||
<el-tag type="info" class="mR10" v-if="isRangeTime">时间段：{{isRangeTime}}</el-tag>
|
||||
|
||||
<el-scrollbar class="mt20">
|
||||
<el-table :data="userDataList">
|
||||
|
||||
<el-table-column prop="date" label="日期" width="200" />
|
||||
@@ -99,12 +120,24 @@
|
||||
|
||||
<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-column prop="mobile" label="手机号" />
|
||||
|
||||
<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-scrollbar>
|
||||
</el-main>
|
||||
@@ -116,17 +149,11 @@
|
||||
<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 {delQuantum, listQuantum} from "../../api/modules/schedulingTime";
|
||||
import {ElMessage} from "element-plus";
|
||||
import {addSchedule, getScheduleList} from "../../api/modules/scheduling";
|
||||
import {addSchedule, delSchedule, getScheduleList, updateSchedule} 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: [],
|
||||
@@ -137,6 +164,7 @@ const scheduleForm = ref({
|
||||
|
||||
const direction = ref('rtl')
|
||||
const drawer = ref(false)
|
||||
const editStatus = ref(false)
|
||||
const userList = ref([]); // 勘察人员列表
|
||||
|
||||
// 日期列表
|
||||
@@ -146,6 +174,9 @@ const timeDataList = ref([]); // 时间段
|
||||
const defaultOpeneds = ref([]);
|
||||
|
||||
const userDataList = ref([]); // 已排期用户
|
||||
const isDate = ref(''); // 选中的日期
|
||||
const istimeQuantumId = ref(''); // 时间段ID
|
||||
const isRangeTime = ref(''); // 时间段
|
||||
|
||||
// 初始化
|
||||
const initData = () => {
|
||||
@@ -187,6 +218,8 @@ const initData = () => {
|
||||
defaultOpeneds.value = todayIndex;
|
||||
}
|
||||
|
||||
isDate.value = formatDate(currentDate); // 今天
|
||||
scheduleForm.value.date = formatDate(currentDate); // 默认的日期
|
||||
// 获取排班时段
|
||||
listQuantum().then((res) => {
|
||||
|
||||
@@ -204,6 +237,8 @@ const initData = () => {
|
||||
// 监听选中状态
|
||||
const handleDateChange = (value) => {
|
||||
|
||||
if(editStatus.value){return false;} // 编辑的时候无需获取
|
||||
|
||||
if(!scheduleForm.value.date)
|
||||
{
|
||||
scheduleForm.value.timeQuantumId = '';
|
||||
@@ -241,57 +276,117 @@ const handleDateChange = (value) => {
|
||||
// 添加排班人员
|
||||
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: '',
|
||||
// 如果不是编辑，则是添加，如果是编辑，则是更新
|
||||
if(!editStatus.value)
|
||||
{
|
||||
if(!scheduleForm.value.date){
|
||||
ElMessage({
|
||||
type: 'warning',
|
||||
message: '请选择排班日期'
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
drawer.value = false;
|
||||
initData();
|
||||
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) => {
|
||||
|
||||
if(res.code === 200)
|
||||
{
|
||||
|
||||
if(!istimeQuantumId.value)
|
||||
{
|
||||
initSelectTimeClick(scheduleForm.value.date, timeList.value);// 获取当天所有时段人员
|
||||
}else{
|
||||
let dateParams = timeList.value.filter(item => item.id === scheduleForm.value.timeQuantumId);
|
||||
selectTimeClick(scheduleForm.value.date, {id:istimeQuantumId.value, startTime:dateParams[0].startTime, endTime:dateParams[0].endTime});// 获取当天所有时段人员
|
||||
}
|
||||
|
||||
scheduleForm.value = {
|
||||
userids: [],
|
||||
roleId: 2,
|
||||
date: '',
|
||||
timeQuantumId: '',
|
||||
}
|
||||
|
||||
drawer.value = false;
|
||||
editStatus.value = false;
|
||||
|
||||
ElMessage({
|
||||
type: 'success',
|
||||
message: '新增成功！'
|
||||
});
|
||||
}
|
||||
|
||||
})
|
||||
}else{
|
||||
|
||||
let params = {
|
||||
id: scheduleForm.value.id,
|
||||
userid: scheduleForm.value.userid,
|
||||
date: scheduleForm.value.date,
|
||||
timeQuantumId: scheduleForm.value.timeQuantumId,
|
||||
status: true
|
||||
};
|
||||
|
||||
// 修改时间段
|
||||
updateSchedule(params).then(res => {
|
||||
|
||||
if(res.code === 200)
|
||||
{
|
||||
|
||||
if(!istimeQuantumId.value)
|
||||
{
|
||||
initSelectTimeClick(scheduleForm.value.date, timeList.value);// 获取当天所有时段人员
|
||||
}else{
|
||||
|
||||
let dateParams = timeList.value.filter(item => item.id === params.timeQuantumId);
|
||||
selectTimeClick(params.date, {id:istimeQuantumId.value, startTime:dateParams[0].startTime, endTime:dateParams[0].endTime});// 获取当天所有时段人员
|
||||
}
|
||||
|
||||
scheduleForm.value = {
|
||||
userids: [],
|
||||
roleId: 2,
|
||||
date: '',
|
||||
timeQuantumId: '',
|
||||
}
|
||||
|
||||
drawer.value = false;
|
||||
editStatus.value = false;
|
||||
|
||||
ElMessage({
|
||||
type: 'success',
|
||||
message: '更新成功！'
|
||||
});
|
||||
}
|
||||
|
||||
ElMessage({
|
||||
type: 'success',
|
||||
message: '新增成功！'
|
||||
});
|
||||
|
||||
})
|
||||
}
|
||||
|
||||
};
|
||||
// 取消添加排班人员
|
||||
const handleCancelSchedule = () => {
|
||||
|
||||
drawer.value = false;
|
||||
editStatus.value = false;
|
||||
|
||||
scheduleForm.value = {
|
||||
userids: [],
|
||||
@@ -332,6 +427,8 @@ const initSelectTimeClick = (dateItem, timeList) => {
|
||||
roleId: 2,
|
||||
}
|
||||
|
||||
userDataList.value = [];
|
||||
|
||||
timeList.map(item => {
|
||||
|
||||
let params = {
|
||||
@@ -369,9 +466,14 @@ const selectTimeClick = (dateItem, timeItem) => {
|
||||
|
||||
userDataList.value = [];
|
||||
|
||||
getScheduleList(params).then((res) => {
|
||||
scheduleForm.value.date = dateItem; // 选中的日期
|
||||
isDate.value = dateItem; // 选中的日期
|
||||
istimeQuantumId.value = timeItem.id; // 选中的时间段id
|
||||
isRangeTime.value = timeItem.startTime + '-' + timeItem.endTime; // 选中的时间段时间
|
||||
|
||||
|
||||
getScheduleList(params).then((res) => {
|
||||
|
||||
res.data.map(resItem => {
|
||||
|
||||
resItem.date = params.date;
|
||||
@@ -384,12 +486,62 @@ const selectTimeClick = (dateItem, timeItem) => {
|
||||
|
||||
// 日期格式
|
||||
const formatDate = (date) => {
|
||||
|
||||
if (typeof date === 'string') {
|
||||
// 检查是否已经是格式化的字符串
|
||||
const regex = /^\d{4}-\d{2}-\d{2}$/;
|
||||
if (regex.test(date)) {
|
||||
return 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 delQuantumClick = (row) => {
|
||||
|
||||
let params = {
|
||||
id:row.id,
|
||||
date: row.date
|
||||
};
|
||||
|
||||
// 删除数据
|
||||
delSchedule(params).then((res) => {
|
||||
|
||||
if(res.code === 200)
|
||||
{
|
||||
|
||||
if(!istimeQuantumId.value)
|
||||
{
|
||||
initSelectTimeClick(params.date, timeList.value);// 获取当天所有时段人员
|
||||
}else{
|
||||
let dateParams = timeList.value.filter(item => item.id === istimeQuantumId.value);
|
||||
selectTimeClick(params.date, {id:istimeQuantumId.value, startTime:dateParams[0].startTime, endTime:dateParams[0].endTime});// 获取当天所有时段人员
|
||||
}
|
||||
|
||||
ElMessage({
|
||||
type: 'success',
|
||||
message: '删除成功'
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
});
|
||||
}
|
||||
|
||||
// 编辑数据
|
||||
const editClick = (row) => {
|
||||
|
||||
editStatus.value = true;
|
||||
drawer.value = true;
|
||||
|
||||
scheduleForm.value = {...row}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
initData();
|
||||
});
|
||||
|
||||
@@ -1,405 +0,0 @@
|
||||
<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>
|
||||
@@ -64,6 +64,7 @@
|
||||
:default-sort="{ prop: 'date', order: 'descending' }"
|
||||
:header-cell-style="{ backgroundColor: '#ecf5ff' }"
|
||||
class="mt20"
|
||||
v-loading="loading"
|
||||
>
|
||||
|
||||
<el-table-column
|
||||
@@ -118,12 +119,12 @@ 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 loading = ref(true)
|
||||
|
||||
const formData = ref({
|
||||
startTime: '',
|
||||
@@ -137,6 +138,7 @@ const initData = () => {
|
||||
// 获取排班时段
|
||||
listQuantum().then((res) => {
|
||||
tableData.value = res.data
|
||||
loading.value = false
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
@@ -25,7 +25,7 @@
|
||||
|
||||
</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">
|
||||
<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>
|
||||
@@ -33,7 +33,7 @@
|
||||
|
||||
<el-form
|
||||
:model="formData"
|
||||
label-width="auto" style="max-width: 600px">
|
||||
label-width="auto" v-loading="loading">
|
||||
|
||||
<el-form-item label="活动名称">
|
||||
<el-input
|
||||
@@ -174,6 +174,8 @@ const total = ref(0)
|
||||
const fileBannerList = ref([]);
|
||||
const fileDetailList = ref([]);
|
||||
|
||||
const loading = ref(false)
|
||||
|
||||
const searchName = ref('');
|
||||
const drawer = ref(false)
|
||||
const queryData = ref({
|
||||
@@ -309,7 +311,7 @@ const formatDate = () => {
|
||||
const cancelClick = () => {
|
||||
|
||||
drawer.value = false;
|
||||
|
||||
loading.value = false;
|
||||
formData.value = {
|
||||
id: formData.value.id,
|
||||
title: '',
|
||||
@@ -324,15 +326,19 @@ const cancelClick = () => {
|
||||
|
||||
// 图片上传前检测
|
||||
const beforeUpload = (file) => {
|
||||
const maxSize = 10 * 1024 * 1024; // 最大 2MB
|
||||
|
||||
loading.value = true;
|
||||
const maxSize = 5 * 1024 * 1024; // 最大 2MB
|
||||
if (file.size > maxSize) {
|
||||
alert('文件大小不能超过 10MB');
|
||||
alert('文件大小不能超过 5MB');
|
||||
loading.value = false;
|
||||
return false;
|
||||
}
|
||||
|
||||
const allowedTypes = ['image/jpeg', 'image/png'];
|
||||
if (!allowedTypes.includes(file.type)) {
|
||||
alert('只允许上传 JPEG 或 PNG 图片');
|
||||
loading.value = false;
|
||||
return false;
|
||||
}
|
||||
|
||||
@@ -402,15 +408,18 @@ const addUploadDetailFile = (params) => {
|
||||
// 处理轮播上传成功的回调
|
||||
const handleBannerSuccess = (response) => {
|
||||
formData.value.thumbnail = response.data[0];
|
||||
loading.value = false;
|
||||
}
|
||||
|
||||
// 处理详情上传成功的回调
|
||||
const handleDetailSuccess = (response) => {
|
||||
formData.value.detailImg = response.data[0];
|
||||
loading.value = false;
|
||||
}
|
||||
|
||||
// 处理上传失败的回调
|
||||
const handleError = (error, file, fileList) => {
|
||||
loading.value = false;
|
||||
console.error('上传失败:', error, file, fileList);
|
||||
}
|
||||
|
||||
|
||||
@@ -16,7 +16,7 @@
|
||||
|
||||
<el-form
|
||||
:model="formData"
|
||||
label-width="auto" style="max-width: 600px">
|
||||
label-width="auto" v-loading="loading">
|
||||
|
||||
<el-form-item label="序号">
|
||||
<el-input
|
||||
@@ -56,6 +56,7 @@
|
||||
border
|
||||
stripe
|
||||
class="mt10"
|
||||
v-loading="loading"
|
||||
>
|
||||
|
||||
<el-table-column
|
||||
@@ -117,7 +118,7 @@ const queryData = ref({
|
||||
})
|
||||
|
||||
const fileList = ref([]);
|
||||
|
||||
const loading = ref(false)
|
||||
const formData = ref({
|
||||
sort: 1,
|
||||
img: ''
|
||||
@@ -136,6 +137,7 @@ const initData = () => {
|
||||
formData.value.sort = sort+1;
|
||||
}
|
||||
|
||||
loading.value = false;
|
||||
})
|
||||
}
|
||||
|
||||
@@ -182,7 +184,7 @@ const confirmClick = () => {
|
||||
const cancelClick = () => {
|
||||
|
||||
drawer.value = false;
|
||||
|
||||
loading.value = false;
|
||||
formData.value = {
|
||||
sort: formData.value.sort,
|
||||
img: ''
|
||||
@@ -220,15 +222,20 @@ const deleteData = (row) => {
|
||||
|
||||
// 上传前的钩子
|
||||
const beforeUpload = (file) => {
|
||||
const maxSize = 10 * 1024 * 1024; // 最大 2MB
|
||||
|
||||
loading.value = true;
|
||||
|
||||
const maxSize = 5 * 1024 * 1024; // 最大 2MB
|
||||
if (file.size > maxSize) {
|
||||
alert('文件大小不能超过 10MB');
|
||||
alert('文件大小不能超过 5MB');
|
||||
loading.value = false;
|
||||
return false;
|
||||
}
|
||||
|
||||
const allowedTypes = ['image/jpeg', 'image/png'];
|
||||
if (!allowedTypes.includes(file.type)) {
|
||||
alert('只允许上传 JPEG 或 PNG 图片');
|
||||
loading.value = false;
|
||||
return false;
|
||||
}
|
||||
|
||||
@@ -258,7 +265,8 @@ const addUploadDetailFile = (params) => {
|
||||
handleDetailSuccess(response, params.file, params.fileList);
|
||||
})
|
||||
.catch((error) => {
|
||||
if(!error)
|
||||
|
||||
if(error)
|
||||
{
|
||||
handleError(error, params.file, params.fileList);
|
||||
}
|
||||
@@ -268,15 +276,18 @@ const addUploadDetailFile = (params) => {
|
||||
// 处理详情上传成功的回调
|
||||
const handleDetailSuccess = (response) => {
|
||||
formData.value.img = response.data[0];
|
||||
loading.value = false;
|
||||
}
|
||||
|
||||
// 处理上传失败的回调
|
||||
const handleError = (error, file, fileList) => {
|
||||
loading.value = false;
|
||||
console.error('上传失败:', error, file, fileList);
|
||||
}
|
||||
|
||||
|
||||
onMounted(() => {
|
||||
loading.value = true;
|
||||
initData()
|
||||
})
|
||||
</script>
|
||||
|
||||
@@ -1,7 +0,0 @@
|
||||
<template>
|
||||
<div>roles</div>
|
||||
</template>
|
||||
|
||||
<script setup></script>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
Reference in New Issue
Block a user