Merge remote-tracking branch 'origin/gyj' into yyj
This commit is contained in:
@@ -1,10 +1,197 @@
|
||||
<template>
|
||||
<el-card>
|
||||
<div>维修人员审核</div>
|
||||
<el-row :gutter="10">
|
||||
<el-col :span="4">
|
||||
<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-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>
|
||||
|
||||
<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-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="操作"
|
||||
width="auto"
|
||||
align="center"
|
||||
show-overflow-tooltip
|
||||
>
|
||||
<template v-slot:default="scope">
|
||||
<el-button type="success">通过</el-button>
|
||||
<el-button type="danger" @click="openModel(scope.$index)">驳回</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<el-pagination
|
||||
size="small"
|
||||
background
|
||||
layout="prev, pager, next"
|
||||
:total="tableData.length"
|
||||
class="mt-4 mt10"
|
||||
@current-change="handleCurrentChange"
|
||||
/>
|
||||
</el-card>
|
||||
</el-card>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted } from 'vue';
|
||||
import { getUserList } from '../../api/modules/user';
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import {options} from './options.js'
|
||||
const columnData = ref(JSON.parse(JSON.stringify(options)))
|
||||
|
||||
const tableData = ref([]);
|
||||
const searchWechatNickname = ref('');
|
||||
const searchName = ref('');
|
||||
const searchMobile = ref('');
|
||||
const queryData = ref({
|
||||
keyWord: '',
|
||||
page: 1,
|
||||
size: 10,
|
||||
});
|
||||
|
||||
const initData = () => {
|
||||
|
||||
tableData.value = columnData.value;
|
||||
// getUserList(queryData.value).then((res) => {
|
||||
// tableData.value = res.data.data;
|
||||
// });
|
||||
};
|
||||
|
||||
const searchEvnt = () => {
|
||||
console.log('点击搜索');
|
||||
queryData.value.keyWord = searchWechatNickname.value || searchName.value || searchMobile.value;
|
||||
initData();
|
||||
};
|
||||
|
||||
// 驳回原因
|
||||
const openModel = (index) => {
|
||||
ElMessageBox.prompt('请输入驳回原因', '', {
|
||||
confirmButtonText: '确认',
|
||||
cancelButtonText: '取消',
|
||||
inputType: 'textarea',
|
||||
})
|
||||
.then(({value}) => {
|
||||
|
||||
ElMessage({
|
||||
type: 'success',
|
||||
message: `驳回成功`,
|
||||
})
|
||||
});
|
||||
};
|
||||
|
||||
const handleCurrentChange = (val) => {
|
||||
queryData.value.size = 10;
|
||||
queryData.value.page = val;
|
||||
initData(queryData.value);
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
initData();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
<style lang="scss" scoped>
|
||||
.mt-4 {
|
||||
float: right;
|
||||
text-align: right;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.input-with-select {
|
||||
max-width: 300px;
|
||||
}
|
||||
|
||||
.expand-title {
|
||||
padding: 10px;
|
||||
color: #919399;
|
||||
font-weight: 600;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -0,0 +1,86 @@
|
||||
export const options = [
|
||||
{
|
||||
userId: 1,
|
||||
avatar: 'https://pic.qqans.com/up/2024-6/2024620113729773.jpg',
|
||||
name: '高永建',
|
||||
nickname: '软件开发老高',
|
||||
mobile: '19136448763',
|
||||
date: '2024-10-11 10:11:01'
|
||||
},
|
||||
{
|
||||
userId: 2,
|
||||
avatar: 'https://pic.qqans.com/up/2024-6/2024620113729773.jpg',
|
||||
name: '张三',
|
||||
nickname: '软件开发老高',
|
||||
mobile: '19136448763',
|
||||
date: '2024-10-10 10:11:01'
|
||||
},
|
||||
{
|
||||
userId: 3,
|
||||
avatar: 'https://pic.qqans.com/up/2024-6/2024620113729773.jpg',
|
||||
name: '李四',
|
||||
nickname: '软件开发老高',
|
||||
mobile: '19136448763',
|
||||
date: '2024-10-13 10:11:01'
|
||||
},
|
||||
{
|
||||
userId: 4,
|
||||
avatar: 'https://pic.qqans.com/up/2024-6/2024620113729773.jpg',
|
||||
name: '名称',
|
||||
nickname: '软件开发老高',
|
||||
mobile: '19136448763',
|
||||
date: '2024-10-02 10:11:01'
|
||||
},{
|
||||
userId: 5,
|
||||
avatar: 'https://pic.qqans.com/up/2024-6/2024620113729773.jpg',
|
||||
name: '名称',
|
||||
nickname: '软件开发老高',
|
||||
mobile: '19136448763',
|
||||
date: '2024-10-01 10:11:01'
|
||||
},
|
||||
{
|
||||
userId: 6,
|
||||
avatar: 'https://pic.qqans.com/up/2024-6/2024620113729773.jpg',
|
||||
name: '名称',
|
||||
nickname: '软件开发老高',
|
||||
mobile: '19136448763',
|
||||
date: '2024-10-11 10:11:01'
|
||||
},{
|
||||
userId: 7,
|
||||
avatar: 'https://pic.qqans.com/up/2024-6/2024620113729773.jpg',
|
||||
name: '名称',
|
||||
nickname: '软件开发老高',
|
||||
mobile: '19136448763',
|
||||
date: '2024-10-11 10:11:01'
|
||||
},{
|
||||
userId: 8,
|
||||
avatar: 'https://pic.qqans.com/up/2024-6/2024620113729773.jpg',
|
||||
name: '名称',
|
||||
nickname: '软件开发老高',
|
||||
mobile: '19136448763',
|
||||
date: '2024-10-11 10:11:01'
|
||||
},{
|
||||
userId: 9,
|
||||
avatar: 'https://pic.qqans.com/up/2024-6/2024620113729773.jpg',
|
||||
name: '名称',
|
||||
nickname: '软件开发老高',
|
||||
mobile: '19136448763',
|
||||
date: '2024-10-11 10:11:01'
|
||||
},{
|
||||
userId: 10,
|
||||
avatar: 'https://pic.qqans.com/up/2024-6/2024620113729773.jpg',
|
||||
name: '名称',
|
||||
nickname: '软件开发老高',
|
||||
mobile: '19136448763',
|
||||
date: '2024-10-11 10:11:01'
|
||||
},
|
||||
{
|
||||
userId: 11,
|
||||
avatar: 'https://pic.qqans.com/up/2024-6/2024620113729773.jpg',
|
||||
name: '名称',
|
||||
nickname: '软件开发老高',
|
||||
mobile: '19136448763',
|
||||
date: '2024-10-11 10:11:01'
|
||||
},
|
||||
|
||||
];
|
||||
@@ -1,10 +1,197 @@
|
||||
<template>
|
||||
<el-card>
|
||||
<div>勘察人员审核</div>
|
||||
<el-row :gutter="10">
|
||||
<el-col :span="4">
|
||||
<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-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>
|
||||
|
||||
<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-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="操作"
|
||||
width="auto"
|
||||
align="center"
|
||||
show-overflow-tooltip
|
||||
>
|
||||
<template v-slot:default="scope">
|
||||
<el-button type="success">通过</el-button>
|
||||
<el-button type="danger" @click="openModel(scope.$index)">驳回</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<el-pagination
|
||||
size="small"
|
||||
background
|
||||
layout="prev, pager, next"
|
||||
:total="tableData.length"
|
||||
class="mt-4 mt10"
|
||||
@current-change="handleCurrentChange"
|
||||
/>
|
||||
</el-card>
|
||||
</el-card>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted } from 'vue';
|
||||
import { getUserList } from '../../api/modules/user';
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import {options} from './options.js'
|
||||
const columnData = ref(JSON.parse(JSON.stringify(options)))
|
||||
|
||||
const tableData = ref([]);
|
||||
const searchWechatNickname = ref('');
|
||||
const searchName = ref('');
|
||||
const searchMobile = ref('');
|
||||
const queryData = ref({
|
||||
keyWord: '',
|
||||
page: 1,
|
||||
size: 10,
|
||||
});
|
||||
|
||||
const initData = () => {
|
||||
|
||||
tableData.value = columnData.value;
|
||||
// getUserList(queryData.value).then((res) => {
|
||||
// tableData.value = res.data.data;
|
||||
// });
|
||||
};
|
||||
|
||||
const searchEvnt = () => {
|
||||
console.log('点击搜索');
|
||||
queryData.value.keyWord = searchWechatNickname.value || searchName.value || searchMobile.value;
|
||||
initData();
|
||||
};
|
||||
|
||||
// 驳回原因
|
||||
const openModel = (index) => {
|
||||
ElMessageBox.prompt('请输入驳回原因', '', {
|
||||
confirmButtonText: '确认',
|
||||
cancelButtonText: '取消',
|
||||
inputType: 'textarea',
|
||||
})
|
||||
.then(({value}) => {
|
||||
|
||||
ElMessage({
|
||||
type: 'success',
|
||||
message: `驳回成功`,
|
||||
})
|
||||
});
|
||||
};
|
||||
|
||||
const handleCurrentChange = (val) => {
|
||||
queryData.value.size = 10;
|
||||
queryData.value.page = val;
|
||||
initData(queryData.value);
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
initData();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
<style lang="scss" scoped>
|
||||
.mt-4 {
|
||||
float: right;
|
||||
text-align: right;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.input-with-select {
|
||||
max-width: 300px;
|
||||
}
|
||||
|
||||
.expand-title {
|
||||
padding: 10px;
|
||||
color: #919399;
|
||||
font-weight: 600;
|
||||
}
|
||||
</style>
|
||||
|
||||
+432
-3
@@ -1,10 +1,439 @@
|
||||
<template>
|
||||
<el-card>
|
||||
<div>订单列表</div>
|
||||
|
||||
<el-row :gutter="10">
|
||||
<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-select v-model="ruleForm" placeholder="订单状态">
|
||||
<el-option label="全部" value="" />
|
||||
<el-option label="待付款" value="0" />
|
||||
<el-option label="已付款" value="1" />
|
||||
</el-select>
|
||||
|
||||
</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-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-table-column
|
||||
label="状态"
|
||||
prop="userId"
|
||||
width="120"
|
||||
align="center"
|
||||
show-overflow-tooltip
|
||||
sortable
|
||||
/>
|
||||
|
||||
<el-table-column
|
||||
label="服务项目"
|
||||
prop="userId"
|
||||
width="120"
|
||||
align="center"
|
||||
show-overflow-tooltip
|
||||
sortable
|
||||
/>
|
||||
|
||||
<el-table-column
|
||||
label="预约时间"
|
||||
prop="userId"
|
||||
width="120"
|
||||
align="center"
|
||||
show-overflow-tooltip
|
||||
sortable
|
||||
/>
|
||||
|
||||
<el-table-column
|
||||
label="维修费用"
|
||||
prop="userId"
|
||||
width="120"
|
||||
align="center"
|
||||
show-overflow-tooltip
|
||||
sortable
|
||||
/>
|
||||
|
||||
<el-table-column
|
||||
label="微信昵称"
|
||||
prop="name"
|
||||
width="300"
|
||||
align="center"
|
||||
show-overflow-tooltip
|
||||
/>
|
||||
|
||||
|
||||
<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="date"
|
||||
width="auto"
|
||||
align="center"
|
||||
show-overflow-tooltip
|
||||
sortable
|
||||
/>
|
||||
|
||||
<el-table-column
|
||||
label="付款时间"
|
||||
prop="date"
|
||||
width="auto"
|
||||
align="center"
|
||||
show-overflow-tooltip
|
||||
sortable
|
||||
/>
|
||||
|
||||
<el-table-column label="操作" width="280px" align="center">
|
||||
<template v-slot:default="scope">
|
||||
<el-button type="info" @click="drawer = true">详情</el-button>
|
||||
<el-button type="danger">退款</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
</el-table>
|
||||
<el-pagination
|
||||
small
|
||||
background
|
||||
layout="prev, pager, next"
|
||||
:total="tableData.length"
|
||||
class="mt-4 mt10"
|
||||
@current-change="handleCurrentChange"
|
||||
/>
|
||||
|
||||
<el-drawer v-model="drawer" :direction="direction">
|
||||
<template #header>
|
||||
<h4>订单详情</h4>
|
||||
</template>
|
||||
<template #default>
|
||||
|
||||
<el-descriptions
|
||||
class="margin-top"
|
||||
title="订单信息"
|
||||
:column="3"
|
||||
:size="size"
|
||||
border
|
||||
style="margin-bottom: 20px"
|
||||
>
|
||||
|
||||
<el-descriptions-item>
|
||||
<template #label>
|
||||
<div class="cell-item">
|
||||
订单编号
|
||||
</div>
|
||||
</template>
|
||||
20111116171087
|
||||
</el-descriptions-item>
|
||||
|
||||
<el-descriptions-item>
|
||||
<template #label>
|
||||
<div class="cell-item">
|
||||
预约时间
|
||||
</div>
|
||||
</template>
|
||||
2024-01-01 12:00:00
|
||||
</el-descriptions-item>
|
||||
|
||||
|
||||
<el-descriptions-item>
|
||||
<template #label>
|
||||
<div class="cell-item">
|
||||
预约费用
|
||||
</div>
|
||||
</template>
|
||||
0.00元
|
||||
</el-descriptions-item>
|
||||
|
||||
<el-descriptions-item>
|
||||
<template #label>
|
||||
<div class="cell-item">
|
||||
报价费用
|
||||
</div>
|
||||
</template>
|
||||
8102.01元
|
||||
</el-descriptions-item>
|
||||
|
||||
<el-descriptions-item>
|
||||
<template #label>
|
||||
<div class="cell-item">
|
||||
订单状态
|
||||
</div>
|
||||
</template>
|
||||
未付款
|
||||
</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
|
||||
<el-descriptions
|
||||
class="margin-top"
|
||||
title="客户信息"
|
||||
:column="3"
|
||||
:size="size"
|
||||
border
|
||||
style="margin-bottom: 20px"
|
||||
>
|
||||
<el-descriptions-item label="微信昵称">kooriookami</el-descriptions-item>
|
||||
<el-descriptions-item label="联系电话">188****1111</el-descriptions-item>
|
||||
<el-descriptions-item label="地址">
|
||||
重庆市南岸区星光花园小区8号楼602
|
||||
</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
|
||||
<el-descriptions
|
||||
class="margin-top"
|
||||
title="勘察工程师信息"
|
||||
:column="3"
|
||||
:size="size"
|
||||
border
|
||||
style="margin-bottom: 20px"
|
||||
>
|
||||
|
||||
<el-descriptions-item label="名字">张三</el-descriptions-item>
|
||||
<el-descriptions-item label="联系方式">18100000000</el-descriptions-item>
|
||||
<el-descriptions-item label="预约时间">2024-10-11 15:00:01</el-descriptions-item>
|
||||
|
||||
</el-descriptions>
|
||||
|
||||
<el-descriptions
|
||||
class="margin-top"
|
||||
title="维修工程师信息"
|
||||
:column="3"
|
||||
:size="size"
|
||||
border
|
||||
style="margin-bottom: 20px"
|
||||
>
|
||||
|
||||
<el-descriptions-item label="名字">李四</el-descriptions-item>
|
||||
<el-descriptions-item label="联系方式">18100000000</el-descriptions-item>
|
||||
<el-descriptions-item label="预约时间">2024-10-11 15:00:01</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
|
||||
<div style="display: flex;justify-content: flex-end;margin-top: 50px">
|
||||
<el-button @click="cancelClick">取消</el-button>
|
||||
<el-button type="danger" @click="confirmClick">退款</el-button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
</el-drawer>
|
||||
</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 {options} from './options.js'
|
||||
import {getUserList} from "../../api/modules/user";
|
||||
|
||||
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 drawer = ref(false)
|
||||
const queryData = ref({
|
||||
keyWord: '',
|
||||
page: 1,
|
||||
size: 10,
|
||||
})
|
||||
|
||||
const initData = () => {
|
||||
|
||||
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 handleOpen = () => {
|
||||
isExpand.value = true
|
||||
tableData.value.forEach((item) => {
|
||||
table.value.toggleRowExpansion(item, isExpand.value)
|
||||
})
|
||||
}
|
||||
|
||||
// 搜索事件
|
||||
const searchEvnt = ()=> {
|
||||
console.log('点击搜索');
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
initData()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
<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>
|
||||
|
||||
@@ -0,0 +1,86 @@
|
||||
export const options = [
|
||||
{
|
||||
userId: 1,
|
||||
avatar: 'https://pic.qqans.com/up/2024-6/2024620113729773.jpg',
|
||||
name: '高永建',
|
||||
nickname: '软件开发老高',
|
||||
mobile: '19136448763',
|
||||
date: '2024-10-11 10:11:01'
|
||||
},
|
||||
{
|
||||
userId: 2,
|
||||
avatar: 'https://pic.qqans.com/up/2024-6/2024620113729773.jpg',
|
||||
name: '张三',
|
||||
nickname: '软件开发老高',
|
||||
mobile: '19136448763',
|
||||
date: '2024-10-10 10:11:01'
|
||||
},
|
||||
{
|
||||
userId: 3,
|
||||
avatar: 'https://pic.qqans.com/up/2024-6/2024620113729773.jpg',
|
||||
name: '李四',
|
||||
nickname: '软件开发老高',
|
||||
mobile: '19136448763',
|
||||
date: '2024-10-13 10:11:01'
|
||||
},
|
||||
{
|
||||
userId: 4,
|
||||
avatar: 'https://pic.qqans.com/up/2024-6/2024620113729773.jpg',
|
||||
name: '名称',
|
||||
nickname: '软件开发老高',
|
||||
mobile: '19136448763',
|
||||
date: '2024-10-02 10:11:01'
|
||||
},{
|
||||
userId: 5,
|
||||
avatar: 'https://pic.qqans.com/up/2024-6/2024620113729773.jpg',
|
||||
name: '名称',
|
||||
nickname: '软件开发老高',
|
||||
mobile: '19136448763',
|
||||
date: '2024-10-01 10:11:01'
|
||||
},
|
||||
{
|
||||
userId: 6,
|
||||
avatar: 'https://pic.qqans.com/up/2024-6/2024620113729773.jpg',
|
||||
name: '名称',
|
||||
nickname: '软件开发老高',
|
||||
mobile: '19136448763',
|
||||
date: '2024-10-11 10:11:01'
|
||||
},{
|
||||
userId: 7,
|
||||
avatar: 'https://pic.qqans.com/up/2024-6/2024620113729773.jpg',
|
||||
name: '名称',
|
||||
nickname: '软件开发老高',
|
||||
mobile: '19136448763',
|
||||
date: '2024-10-11 10:11:01'
|
||||
},{
|
||||
userId: 8,
|
||||
avatar: 'https://pic.qqans.com/up/2024-6/2024620113729773.jpg',
|
||||
name: '名称',
|
||||
nickname: '软件开发老高',
|
||||
mobile: '19136448763',
|
||||
date: '2024-10-11 10:11:01'
|
||||
},{
|
||||
userId: 9,
|
||||
avatar: 'https://pic.qqans.com/up/2024-6/2024620113729773.jpg',
|
||||
name: '名称',
|
||||
nickname: '软件开发老高',
|
||||
mobile: '19136448763',
|
||||
date: '2024-10-11 10:11:01'
|
||||
},{
|
||||
userId: 10,
|
||||
avatar: 'https://pic.qqans.com/up/2024-6/2024620113729773.jpg',
|
||||
name: '名称',
|
||||
nickname: '软件开发老高',
|
||||
mobile: '19136448763',
|
||||
date: '2024-10-11 10:11:01'
|
||||
},
|
||||
{
|
||||
userId: 11,
|
||||
avatar: 'https://pic.qqans.com/up/2024-6/2024620113729773.jpg',
|
||||
name: '名称',
|
||||
nickname: '软件开发老高',
|
||||
mobile: '19136448763',
|
||||
date: '2024-10-11 10:11:01'
|
||||
},
|
||||
|
||||
];
|
||||
@@ -1,10 +1,286 @@
|
||||
<template>
|
||||
<el-card>
|
||||
<div>维修人员排班</div>
|
||||
|
||||
<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-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-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-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 {options} from './options.js'
|
||||
import {getUserList} from "../../api/modules/user";
|
||||
|
||||
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 queryData = ref({
|
||||
keyWord: '',
|
||||
page: 1,
|
||||
size: 10,
|
||||
})
|
||||
|
||||
const initData = () => {
|
||||
|
||||
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 handleOpen = () => {
|
||||
isExpand.value = true
|
||||
tableData.value.forEach((item) => {
|
||||
table.value.toggleRowExpansion(item, isExpand.value)
|
||||
})
|
||||
}
|
||||
|
||||
// 搜索事件
|
||||
const searchEvnt = ()=> {
|
||||
console.log('点击搜索');
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
initData()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
<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>
|
||||
|
||||
@@ -0,0 +1,97 @@
|
||||
export const options = [
|
||||
{
|
||||
userId: 1,
|
||||
avatar: 'https://pic.qqans.com/up/2024-6/2024620113729773.jpg',
|
||||
name: '高永建',
|
||||
nickname: '软件开发老高',
|
||||
mobile: '19136448763',
|
||||
date: '2024-10-11',
|
||||
timeToTime: '14:00:00-15:00:00,15:00:00-16:00:00'
|
||||
},
|
||||
{
|
||||
userId: 2,
|
||||
avatar: 'https://pic.qqans.com/up/2024-6/2024620113729773.jpg',
|
||||
name: '张三',
|
||||
nickname: '软件开发老高',
|
||||
mobile: '19136448763',
|
||||
date: '2024-10-11',
|
||||
timeToTime: '14:00:00-15:00:00,15:00:00-16:00:00'
|
||||
},
|
||||
{
|
||||
userId: 3,
|
||||
avatar: 'https://pic.qqans.com/up/2024-6/2024620113729773.jpg',
|
||||
name: '李四',
|
||||
nickname: '软件开发老高',
|
||||
mobile: '19136448763',
|
||||
date: '2024-10-11',
|
||||
timeToTime: '14:00:00-15:00:00,15:00:00-16:00:00'
|
||||
},
|
||||
{
|
||||
userId: 4,
|
||||
avatar: 'https://pic.qqans.com/up/2024-6/2024620113729773.jpg',
|
||||
name: '名称',
|
||||
nickname: '软件开发老高',
|
||||
mobile: '19136448763',
|
||||
date: '2024-10-11',
|
||||
timeToTime: '14:00:00-15:00:00,15:00:00-16:00:00'
|
||||
},{
|
||||
userId: 5,
|
||||
avatar: 'https://pic.qqans.com/up/2024-6/2024620113729773.jpg',
|
||||
name: '名称',
|
||||
nickname: '软件开发老高',
|
||||
mobile: '19136448763',
|
||||
date: '2024-10-11',
|
||||
timeToTime: '14:00:00-15:00:00,15:00:00-16:00:00'
|
||||
},
|
||||
{
|
||||
userId: 6,
|
||||
avatar: 'https://pic.qqans.com/up/2024-6/2024620113729773.jpg',
|
||||
name: '李四',
|
||||
nickname: '软件开发老高',
|
||||
mobile: '19136448763',
|
||||
date: '2024-10-11',
|
||||
timeToTime: '14:00:00-15:00:00,15:00:00-16:00:00'
|
||||
},{
|
||||
userId: 7,
|
||||
avatar: 'https://pic.qqans.com/up/2024-6/2024620113729773.jpg',
|
||||
name: '张三',
|
||||
nickname: '软件开发老高',
|
||||
mobile: '19136448763',
|
||||
date: '2024-10-11',
|
||||
timeToTime: '14:00:00-15:00:00,15:00:00-16:00:00'
|
||||
},{
|
||||
userId: 8,
|
||||
avatar: 'https://pic.qqans.com/up/2024-6/2024620113729773.jpg',
|
||||
name: '名称',
|
||||
nickname: '软件开发老高',
|
||||
mobile: '19136448763',
|
||||
date: '2024-10-07',
|
||||
timeToTime: '14:00:00-15:00:00,15:00:00-16:00:00'
|
||||
},{
|
||||
userId: 9,
|
||||
avatar: 'https://pic.qqans.com/up/2024-6/2024620113729773.jpg',
|
||||
name: '名称',
|
||||
nickname: '软件开发老高',
|
||||
mobile: '19136448763',
|
||||
date: '2024-10-08',
|
||||
timeToTime: '14:00:00-15:00:00,15:00:00-16:00:00'
|
||||
},{
|
||||
userId: 10,
|
||||
avatar: 'https://pic.qqans.com/up/2024-6/2024620113729773.jpg',
|
||||
name: '名称',
|
||||
nickname: '软件开发老高',
|
||||
mobile: '19136448763',
|
||||
date: '2024-10-09',
|
||||
timeToTime: '14:00:00-15:00:00,15:00:00-16:00:00'
|
||||
},
|
||||
{
|
||||
userId: 11,
|
||||
avatar: 'https://pic.qqans.com/up/2024-6/2024620113729773.jpg',
|
||||
name: '名称',
|
||||
nickname: '软件开发老高',
|
||||
mobile: '19136448763',
|
||||
date: '2024-10-10',
|
||||
timeToTime: '14:00:00-15:00:00,15:00:00-16:00:00'
|
||||
},
|
||||
|
||||
];
|
||||
@@ -1,10 +1,346 @@
|
||||
<template>
|
||||
<el-card>
|
||||
<div>勘察人员排班</div>
|
||||
|
||||
<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-drawer v-model="drawer" :direction="direction">
|
||||
<template #header>
|
||||
<h4>创建排班</h4>
|
||||
</template>
|
||||
<template #default>
|
||||
|
||||
<el-input
|
||||
v-model="input1"
|
||||
style="max-width: 600px;margin-bottom: 20px"
|
||||
placeholder="请输入活动名称"
|
||||
>
|
||||
<template #prepend>活动名称</template>
|
||||
</el-input>
|
||||
|
||||
<el-upload
|
||||
class="upload-demo"
|
||||
drag
|
||||
action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
|
||||
multiple
|
||||
>
|
||||
<el-icon class="el-icon--upload">
|
||||
<upload-filled/>
|
||||
</el-icon>
|
||||
<div class="el-upload__text">
|
||||
点击或拖拽上传缩略图(横幅缩略图)
|
||||
</div>
|
||||
<template #tip>
|
||||
<div class="el-upload__tip">
|
||||
文件格式：jpg/png
|
||||
</div>
|
||||
</template>
|
||||
</el-upload>
|
||||
|
||||
<el-upload
|
||||
class="upload-demo"
|
||||
drag
|
||||
action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
|
||||
multiple
|
||||
>
|
||||
<el-icon class="el-icon--upload">
|
||||
<upload-filled/>
|
||||
</el-icon>
|
||||
<div class="el-upload__text">
|
||||
点击或拖拽上传活动长图（活动详情）
|
||||
</div>
|
||||
<template #tip>
|
||||
<div class="el-upload__tip">
|
||||
文件格式：jpg/png
|
||||
</div>
|
||||
</template>
|
||||
</el-upload>
|
||||
|
||||
<div style="display: flex;justify-content: flex-end;margin-top: 50px">
|
||||
<el-button @click="cancelClick">取消</el-button>
|
||||
<el-button type="primary" @click="confirmClick">确认</el-button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
</el-drawer>
|
||||
</el-card>
|
||||
|
||||
<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-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-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 {options} from './options.js'
|
||||
import {getUserList} from "../../api/modules/user";
|
||||
|
||||
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 drawer = ref(false)
|
||||
const queryData = ref({
|
||||
keyWord: '',
|
||||
page: 1,
|
||||
size: 10,
|
||||
})
|
||||
|
||||
const initData = () => {
|
||||
|
||||
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 handleOpen = () => {
|
||||
isExpand.value = true
|
||||
tableData.value.forEach((item) => {
|
||||
table.value.toggleRowExpansion(item, isExpand.value)
|
||||
})
|
||||
}
|
||||
|
||||
// 搜索事件
|
||||
const searchEvnt = ()=> {
|
||||
console.log('点击搜索');
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
initData()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
<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,10 +1,291 @@
|
||||
<template>
|
||||
<el-card>
|
||||
<div>活动管理</div>
|
||||
|
||||
<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">
|
||||
<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-drawer v-model="drawer" :direction="direction">
|
||||
<template #header>
|
||||
<h4>创建活动</h4>
|
||||
</template>
|
||||
<template #default>
|
||||
|
||||
<el-input
|
||||
v-model="input1"
|
||||
style="max-width: 600px;margin-bottom: 20px"
|
||||
placeholder="请输入活动名称"
|
||||
>
|
||||
<template #prepend>活动名称</template>
|
||||
</el-input>
|
||||
|
||||
<el-upload
|
||||
class="upload-demo"
|
||||
drag
|
||||
action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
|
||||
multiple
|
||||
>
|
||||
<el-icon class="el-icon--upload">
|
||||
<upload-filled/>
|
||||
</el-icon>
|
||||
<div class="el-upload__text">
|
||||
点击或拖拽上传缩略图(横幅缩略图)
|
||||
</div>
|
||||
<template #tip>
|
||||
<div class="el-upload__tip">
|
||||
文件格式：jpg/png
|
||||
</div>
|
||||
</template>
|
||||
</el-upload>
|
||||
|
||||
<el-upload
|
||||
class="upload-demo"
|
||||
drag
|
||||
action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
|
||||
multiple
|
||||
>
|
||||
<el-icon class="el-icon--upload">
|
||||
<upload-filled/>
|
||||
</el-icon>
|
||||
<div class="el-upload__text">
|
||||
点击或拖拽上传活动长图（活动详情）
|
||||
</div>
|
||||
<template #tip>
|
||||
<div class="el-upload__tip">
|
||||
文件格式：jpg/png
|
||||
</div>
|
||||
</template>
|
||||
</el-upload>
|
||||
|
||||
<div style="display: flex;justify-content: flex-end;margin-top: 50px">
|
||||
<el-button @click="cancelClick">取消</el-button>
|
||||
<el-button type="primary" @click="confirmClick">确认</el-button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
</el-drawer>
|
||||
|
||||
</el-card>
|
||||
|
||||
<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-table-column
|
||||
label="活动名称"
|
||||
prop="name"
|
||||
width="600"
|
||||
align="left"
|
||||
show-overflow-tooltip
|
||||
/>
|
||||
|
||||
<el-table-column label="展示图" width="600px" align="center">
|
||||
<template #default="scope">
|
||||
<el-image style="width: 600px; height: 50px" :src="scope.row.avatar" :fit="fit" lazy />
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column
|
||||
label="发布时间"
|
||||
prop="date"
|
||||
width="auto"
|
||||
align="center"
|
||||
show-overflow-tooltip
|
||||
sortable
|
||||
/>
|
||||
|
||||
<el-table-column label="操作" width="200px" align="center">
|
||||
<template v-slot:default="scope">
|
||||
<el-button type="info">编辑</el-button>
|
||||
<el-button type="danger">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
</el-table>
|
||||
<el-pagination
|
||||
small
|
||||
background
|
||||
layout="prev, pager, next"
|
||||
:total="tableData.length"
|
||||
class="mt-4 mt10"
|
||||
@current-change="handleCurrentChange"
|
||||
/>
|
||||
</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 {options} from './options.js'
|
||||
import {getUserList} from "../../api/modules/user";
|
||||
|
||||
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 drawer = ref(false)
|
||||
const queryData = ref({
|
||||
keyWord: '',
|
||||
page: 1,
|
||||
size: 10,
|
||||
})
|
||||
|
||||
const initData = () => {
|
||||
|
||||
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 handleOpen = () => {
|
||||
isExpand.value = true
|
||||
tableData.value.forEach((item) => {
|
||||
table.value.toggleRowExpansion(item, isExpand.value)
|
||||
})
|
||||
}
|
||||
|
||||
// 搜索事件
|
||||
const searchEvnt = ()=> {
|
||||
console.log('点击搜索');
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
initData()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
<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,13 +1,40 @@
|
||||
<script setup>
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<el-card>
|
||||
<div> 配置客服电话</div>
|
||||
<el-form :model="form" label-width="auto" style="max-width: 600px;">
|
||||
|
||||
<el-form-item label="客服电话">
|
||||
<span>400******************</span>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="修改电话">
|
||||
<el-input v-model="form.name" />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="onSubmit">修改</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-card>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
<script setup>
|
||||
import { reactive } from 'vue'
|
||||
|
||||
</style>
|
||||
// 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>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
|
||||
@@ -1,10 +1,70 @@
|
||||
<template>
|
||||
<el-card>
|
||||
<div> 编辑资料</div>
|
||||
<el-form :model="form" label-width="auto" style="max-width: 600px;">
|
||||
|
||||
<el-form-item label="账号">
|
||||
<span>admin</span>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item
|
||||
:rules="[
|
||||
{ required: true, message: '请输入密码' },
|
||||
]"
|
||||
label="旧密码">
|
||||
<el-input
|
||||
v-model="form.name"
|
||||
style="width: 240px"
|
||||
type="password"
|
||||
placeholder="请输入密码"
|
||||
show-password
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-alert type="info" show-icon :closable="false" style="margin-bottom: 10px">
|
||||
<p>留空则不修改账号名，如果账号修改后，旧账号将不能用！</p>
|
||||
</el-alert>
|
||||
<el-form-item label="修改账号">
|
||||
<el-input v-model="form.name" />
|
||||
</el-form-item>
|
||||
|
||||
<el-alert type="info" show-icon :closable="false" style="margin-bottom: 10px">
|
||||
<p>留空则不修改密码，如果密码修改后，旧密码将不能用！</p>
|
||||
</el-alert>
|
||||
<el-form-item label="新密码">
|
||||
<el-input
|
||||
v-model="form.name"
|
||||
style="width: 240px"
|
||||
type="password"
|
||||
placeholder="请输入新密码"
|
||||
show-password
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="onSubmit">修改</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-card>
|
||||
</template>
|
||||
|
||||
<script 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>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
|
||||
@@ -1,9 +1,229 @@
|
||||
<template>
|
||||
<el-card>
|
||||
<div> 首页配置</div>
|
||||
|
||||
<el-button type="success" @click="drawer = true">
|
||||
上传首页图
|
||||
<el-icon class="el-icon--right">
|
||||
<Upload/>
|
||||
</el-icon>
|
||||
</el-button>
|
||||
|
||||
<el-drawer v-model="drawer" :direction="direction">
|
||||
<template #header>
|
||||
<h4>上传图片</h4>
|
||||
</template>
|
||||
<template #default>
|
||||
|
||||
<el-input
|
||||
v-model="input1"
|
||||
style="max-width: 600px;margin-bottom: 20px"
|
||||
placeholder="请输入图片排序"
|
||||
>
|
||||
<template #prepend>序号</template>
|
||||
</el-input>
|
||||
|
||||
<el-upload
|
||||
class="upload-demo"
|
||||
drag
|
||||
action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
|
||||
multiple
|
||||
>
|
||||
<el-icon class="el-icon--upload">
|
||||
<upload-filled/>
|
||||
</el-icon>
|
||||
<div class="el-upload__text">
|
||||
点击或拖拽上传图片
|
||||
</div>
|
||||
<template #tip>
|
||||
<div class="el-upload__tip">
|
||||
文件格式：jpg/png
|
||||
</div>
|
||||
</template>
|
||||
</el-upload>
|
||||
<div style="display: flex;justify-content: flex-end;margin-top: 50px">
|
||||
<el-button @click="cancelClick">取消</el-button>
|
||||
<el-button type="primary" @click="confirmClick">确认</el-button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
</el-drawer>
|
||||
</el-card>
|
||||
|
||||
<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-table-column label="首页图" align="center">
|
||||
<template #default="scope">
|
||||
<el-image style="width: 600px; height: 50px" :src="scope.row.avatar" :fit="fit" lazy/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="操作" align="center">
|
||||
<template v-slot:default="scope">
|
||||
<el-button type="danger">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
</el-table>
|
||||
<el-pagination
|
||||
small
|
||||
background
|
||||
layout="prev, pager, next"
|
||||
:total="tableData.length"
|
||||
class="mt-4 mt10"
|
||||
@current-change="handleCurrentChange"
|
||||
/>
|
||||
</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'
|
||||
|
||||
<script setup></script>
|
||||
import {options} from './options.js'
|
||||
import {getUserList} from "../../api/modules/user";
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
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 drawer = ref(false)
|
||||
const queryData = ref({
|
||||
keyWord: '',
|
||||
page: 1,
|
||||
size: 10,
|
||||
})
|
||||
|
||||
const initData = () => {
|
||||
|
||||
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 handleOpen = () => {
|
||||
isExpand.value = true
|
||||
tableData.value.forEach((item) => {
|
||||
table.value.toggleRowExpansion(item, isExpand.value)
|
||||
})
|
||||
}
|
||||
|
||||
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>
|
||||
|
||||
@@ -0,0 +1,86 @@
|
||||
export const options = [
|
||||
{
|
||||
userId: 1,
|
||||
avatar: 'https://pic.qqans.com/up/2024-6/2024620113729773.jpg',
|
||||
name: '高永建',
|
||||
nickname: '软件开发老高',
|
||||
mobile: '19136448763',
|
||||
date: '2024-10-11 10:11:01'
|
||||
},
|
||||
{
|
||||
userId: 2,
|
||||
avatar: 'https://pic.qqans.com/up/2024-6/2024620113729773.jpg',
|
||||
name: '张三',
|
||||
nickname: '软件开发老高',
|
||||
mobile: '19136448763',
|
||||
date: '2024-10-10 10:11:01'
|
||||
},
|
||||
{
|
||||
userId: 3,
|
||||
avatar: 'https://pic.qqans.com/up/2024-6/2024620113729773.jpg',
|
||||
name: '李四',
|
||||
nickname: '软件开发老高',
|
||||
mobile: '19136448763',
|
||||
date: '2024-10-13 10:11:01'
|
||||
},
|
||||
{
|
||||
userId: 4,
|
||||
avatar: 'https://pic.qqans.com/up/2024-6/2024620113729773.jpg',
|
||||
name: '名称',
|
||||
nickname: '软件开发老高',
|
||||
mobile: '19136448763',
|
||||
date: '2024-10-02 10:11:01'
|
||||
},{
|
||||
userId: 5,
|
||||
avatar: 'https://pic.qqans.com/up/2024-6/2024620113729773.jpg',
|
||||
name: '名称',
|
||||
nickname: '软件开发老高',
|
||||
mobile: '19136448763',
|
||||
date: '2024-10-01 10:11:01'
|
||||
},
|
||||
{
|
||||
userId: 6,
|
||||
avatar: 'https://pic.qqans.com/up/2024-6/2024620113729773.jpg',
|
||||
name: '名称',
|
||||
nickname: '软件开发老高',
|
||||
mobile: '19136448763',
|
||||
date: '2024-10-11 10:11:01'
|
||||
},{
|
||||
userId: 7,
|
||||
avatar: 'https://pic.qqans.com/up/2024-6/2024620113729773.jpg',
|
||||
name: '名称',
|
||||
nickname: '软件开发老高',
|
||||
mobile: '19136448763',
|
||||
date: '2024-10-11 10:11:01'
|
||||
},{
|
||||
userId: 8,
|
||||
avatar: 'https://pic.qqans.com/up/2024-6/2024620113729773.jpg',
|
||||
name: '名称',
|
||||
nickname: '软件开发老高',
|
||||
mobile: '19136448763',
|
||||
date: '2024-10-11 10:11:01'
|
||||
},{
|
||||
userId: 9,
|
||||
avatar: 'https://pic.qqans.com/up/2024-6/2024620113729773.jpg',
|
||||
name: '名称',
|
||||
nickname: '软件开发老高',
|
||||
mobile: '19136448763',
|
||||
date: '2024-10-11 10:11:01'
|
||||
},{
|
||||
userId: 10,
|
||||
avatar: 'https://pic.qqans.com/up/2024-6/2024620113729773.jpg',
|
||||
name: '名称',
|
||||
nickname: '软件开发老高',
|
||||
mobile: '19136448763',
|
||||
date: '2024-10-11 10:11:01'
|
||||
},
|
||||
{
|
||||
userId: 11,
|
||||
avatar: 'https://pic.qqans.com/up/2024-6/2024620113729773.jpg',
|
||||
name: '名称',
|
||||
nickname: '软件开发老高',
|
||||
mobile: '19136448763',
|
||||
date: '2024-10-11 10:11:01'
|
||||
},
|
||||
|
||||
];
|
||||
@@ -11,7 +11,7 @@ export const options = [
|
||||
userId: 2,
|
||||
avatar: 'https://pic.qqans.com/up/2024-6/2024620113729773.jpg',
|
||||
name: '张三',
|
||||
nicakname: '软件开发老高',
|
||||
nickname: '软件开发老高',
|
||||
mobile: '19136448763',
|
||||
date: '2024-10-10 10:11:01'
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user