feat:增加搜索学习路径

This commit is contained in:
李晓鸽
2022-11-01 16:36:17 +08:00
parent df086b071d
commit 0a7ab6718b
4 changed files with 150 additions and 100 deletions

View File

@@ -40,19 +40,11 @@ export const uploadFile = (obj) => http.post('/test/testRequest', qs.stringify({
// 接口-请求
//创建学习路径
export const createLearnPath = (obj) => http.post('/admin/router/edit', obj, {
headers: {
'token': '123'
}
});
export const createLearnPath = (obj) => http.post('/admin/router/edit', obj);
// 获取学习路径图列表
export const getLearnPath = (obj) => http.post('/admin/router/list', obj);
//删除学习路径图
export const deleteLearnPath = (obj) => http.post('/admin/router/handle', obj, {
headers: {
'token': '123'
}
});
export const deleteLearnPath = (obj) => http.post('/admin/router/handle', obj);
//获取关卡
export const getChapter = (obj) => http.post('/admin/router/detail', { params: obj });

View File

@@ -63,7 +63,7 @@
<a-range-picker
style="width: 424px"
v-model:value="time"
format="YYYY-MM-DD HH:mm:ss"
format="YYYY-MM-DD"
@change="onChange"
:placeholder="[' 开始时间', ' 结束时间']"
/>
@@ -102,12 +102,13 @@
</div>
</a-drawer>
</template>
<script>
<script>
import { reactive, toRefs, ref } from "vue";
import { useRouter } from "vue-router";
import * as api from "../../api/indexEval";
import { message } from "ant-design-vue";
// import { toDate } from "../../api/method";
import { toDate } from "../../api/method.js";
const router = useRouter();
const rowSelection = ref({
checkStrictly: false,
@@ -127,7 +128,7 @@ const rowSelection = ref({
});
function getBase64(img, callback) {
const reader = new FileReader();
reader.addEventListener('load', () => callback(reader.result));
reader.addEventListener("load", () => callback(reader.result));
reader.readAsDataURL(img);
}
export default {
@@ -158,48 +159,54 @@ export default {
console.log("state", bool);
};
const onChange = () => {
console.log(
"state.time[0]",
toDate(new Date(state.time[0].$d).getTime() / 1000, "Y-M-D"),
state.time[1]
);
state.endTime = state.time[0].$d.toString;
state.startTime = state.time[1].$d.toString;
}
};
//上传组件
const fileList = ref([]);
const loading = ref(false);
const imageUrl = ref('');
const imageUrl = ref("");
const handleChange = info => {
if (info.file.status === 'uploading') {
const handleChange = (info) => {
if (info.file.status === "uploading") {
loading.value = true;
return;
}
if (info.file.status === 'done') {
if (info.file.status === "done") {
// Get this url from response in real world.
getBase64(info.file.originFileObj, base64Url => {
getBase64(info.file.originFileObj, (base64Url) => {
imageUrl.value = base64Url;
loading.value = false;
});
}
if (info.file.status === 'error') {
if (info.file.status === "error") {
loading.value = false;
message.error('upload error');
message.error("upload error");
}
}
const beforeUpload = file => {
const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
};
const beforeUpload = (file) => {
const isJpgOrPng =
file.type === "image/jpeg" || file.type === "image/png";
if (!isJpgOrPng) {
message.error('You can only upload JPG file!');
message.error("You can only upload JPG file!");
}
const isLt2M = file.size / 1024 / 1024 < 2;
if (!isLt2M) {
message.error('Image must smaller than 2MB!');
message.error("Image must smaller than 2MB!");
}
return isJpgOrPng && isLt2M;
}
};
// const fileUp = () => {
// let obj = {
// file
@@ -262,7 +269,7 @@ export default {
},
};
</script>
<style lang="scss">
<style lang="scss">
.ant-table-striped :deep(.table-striped) td {
background-color: #fafafa !important;
}
@@ -401,4 +408,3 @@ export default {
}
}
</style>

View File

@@ -4,25 +4,21 @@
<!-- 搜索框及按钮 -->
<div class="filter">
<div class="filterItems">
<div class="select">
<a-select
v-model:value="projectName"
style="width: 270px"
<div class="pathnameInp">
<a-input
v-model:value="pathnameSearch"
style="width: 270px; height: 40px; border-radius: 8px"
placeholder="请输入路径名称"
:options="projectNameList"
@change="selectProjectName"
allowClear
showSearch
></a-select>
/>
</div>
<div class="select">
<a-select
v-model:value="projectName"
v-model:value="statusValue"
style="width: 270px"
placeholder="请选择状态"
:options="projectNameList"
@change="selectProjectName"
:options="statusList"
@change="selectStatusClassify"
allowClear
showSearch
></a-select>
@@ -35,19 +31,20 @@
style="width: 270px"
/> -->
<a-range-picker
v-model:value="value2"
v-model:value="searchdate"
separator="至"
:placeholder="[' 开始时间', ' 结束时间']"
@change="searchTimeChange"
/>
</div>
<div style="display: flex; margin-bottom: 20px">
<div class="btn btn1">
<div class="search"></div>
<div class="btnText">搜索</div>
<div class="btnText" @click="searchLearnPath">搜索</div>
</div>
<div class="btnn btn2">
<div class="search"></div>
<div class="btnText">重置</div>
<div class="btnText" @click="resetLearnPath">重置</div>
</div>
</div>
</div>
@@ -613,28 +610,6 @@ export default {
setup() {
const router = useRouter();
const state = reactive({
projectNameList: [
{
id: 1,
value: "项目一",
label: "项目一",
},
{
id: 2,
value: "项目二",
label: "项目二",
},
{
id: 3,
value: "项目三",
label: "项目三",
},
{
id: 4,
value: "项目四",
label: "项目四",
},
],
out: false,
out1: false,
number: null,
@@ -692,6 +667,8 @@ export default {
value1: "",
value2: "",
//
//创建、编辑-------------------------
pathName: "", //创建/编辑路径图名称
organizationList: [
{
@@ -722,6 +699,33 @@ export default {
createLoading: false, //创建路径loading
deletePathId: null, //删除路径id
editPathId: null, //修改路径id
//搜索------------------------------
pathnameSearch: null, //搜索路径名称
statusList: [
{
id: 1,
value: "草稿",
label: "草稿",
classify: 0,
},
{
id: 2,
value: "已发布",
label: "已发布",
classify: 1,
},
{
id: 3,
value: "已停用",
label: "已停用",
classify: -1,
},
],
statusValue: null, //状态
statusClassify: null, //选择状态类型
searchdate: null, //选择时间
startTime: null, //开始时间
endTime: null, //结束时间
});
const selectProjectName = (value, index) => {
@@ -976,7 +980,6 @@ export default {
<a-select
style="width: 50px;margin-top:2px;margin-left:25px"
value="授权"
// options={state.projectNameList}
dropdownClassName="tabledropdown"
>
<a-select-option value="权限名单" label="权限名单">
@@ -1022,7 +1025,6 @@ export default {
<a-select
style="width: 50px;margin-top:2px;margin-right:20px;"
value="更多"
// options={state.projectNameList}
dropdownClassName="tabledropdown"
>
<a-select-option
@@ -1075,7 +1077,6 @@ export default {
<a-select
style="width: 50px;margin-top:2px;margin-right:20px;"
value="更多"
// options={state.projectNameList}
dropdownClassName="tabledropdown"
>
<a-select-option
@@ -1115,7 +1116,6 @@ export default {
<a-select
style="width: 50px;margin-top:2px;margin-right:20px;"
value="更多"
// options={state.projectNameList}
dropdownClassName="tabledropdown"
>
<a-select-option
@@ -1166,8 +1166,8 @@ export default {
};
//创建学习路径图
const createLearnPath = () => {
if (!state.pathName) return message.info("请输入路径图名称");
// if (!state.organizationSelectName) return message.info("请选择归属组织");
if (!state.pathName) return message.warning("请输入路径图名称");
// if (!state.organizationSelectName) return message.warning("请选择归属组织");
// state.createLoading = true;
let obj = {
name: state.pathName,
@@ -1197,6 +1197,10 @@ export default {
let obj = {
pageNo: state.currentPage,
pageSize: state.pageSize,
name: state.pathnameSearch,
status: state.statusClassify,
beginTime: state.startTime,
endTime: state.endTime,
};
api
.getLearnPath(obj)
@@ -1219,31 +1223,6 @@ export default {
.catch((err) => {
console.log("获取学习路径失败", err);
});
// let getChapterObj = {
// routerId: 0,
// };
// api
// .getChapter(getChapterObj)
// .then((res) => {
// console.log("获取关卡数据", res);
// })
// .catch((err) => {
// console.log("获取关卡数据失败", err);
// });
// let editChapterObj = {
// name: "测试关卡",
// remark: "这是测试关卡说明",
// routerId: 0,
// };
// api
// .editChapter(editChapterObj)
// .then((res) => {
// console.log("添加测试关卡数据", res);
// })
// .catch((err) => {
// console.log("添加测试关卡数据失败", err);
// });
};
//翻页
const changePagination = (page) => {
@@ -1271,8 +1250,8 @@ export default {
};
//编辑学习路径图
const editLearnPath = () => {
if (!state.pathName) return message.info("请输入路径图名称");
// if (!state.organizationSelectName) return message.info("请选择归属组织");
if (!state.pathName) return message.warning("请输入路径图名称");
// if (!state.organizationSelectName) return message.warning("请选择归属组织");
// state.createLoading = true;
let obj = {
routerId: state.editPathId,
@@ -1299,6 +1278,43 @@ export default {
// state.createLoading = false;
});
};
//选择状态
const selectStatusClassify = (e, v) => {
// console.log("eee", e, v);
state.statusValue = e;
state.statusClassify = v.classify;
};
//修改时间
const searchTimeChange = (e, date) => {
let startTime = date[0] + " 00:00:00";
let endTime = date[1] + " 23:59:59";
state.startTime = new Date(startTime).getTime() / 1000;
state.endTime = new Date(endTime).getTime() / 1000;
console.log("e", state.startTime, state.endTime);
};
//搜索学习路径
const searchLearnPath = () => {
state.currentPage = 1;
console.log(
"pathnameSearch",
state.pathnameSearch,
state.statusClassify,
state.startTime,
state.endTime
);
getLearnPath();
};
//重置学习路径
const resetLearnPath = () => {
state.currentPage = 1;
state.pathnameSearch = null;
state.statusValue = null;
state.statusClassify = null;
state.searchdate = null;
state.startTime = null;
state.endTime = null;
getLearnPath();
};
onMounted(() => {
// console.log("执行");
getLearnPath();
@@ -1333,6 +1349,10 @@ export default {
changePagination,
deleteLearnPath,
editLearnPath,
selectStatusClassify,
searchTimeChange,
searchLearnPath,
resetLearnPath,
};
},
};
@@ -1837,6 +1857,10 @@ export default {
.filterItems {
display: flex;
flex-wrap: wrap;
.pathnameInp {
margin-right: 20px;
margin-bottom: 20px;
}
.select {
margin-right: 20px;
margin-bottom: 20px;

View File

@@ -27,10 +27,12 @@
<a-upload
v-model:file-list="fileList"
name="avatar"
action="/api/file/upload"
list-type="picture-card"
class="avatar-uploader"
:show-upload-list="false"
:before-upload="beforeUpload"
@change="handleChange"
>
<!-- <img v-if="imageUrl" :src="imageUrl" alt="avatar" />
<div v-else>
@@ -39,6 +41,27 @@
<div class="ant-upload-text">Upload</div>
</div> -->
</a-upload>
<div
style="
width: 130px;
height: 40px;
background: #388be1;
border-radius: 8px;
font-size: 14px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #ffffff;
line-height: 20px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
"
@click="golearningpath"
>
跳转
</div>
</div>
</template>
<script>
@@ -52,6 +75,7 @@ import * as api from "../../api/index1";
// reader.addEventListener("load", () => callback(reader.result));
// reader.readAsDataURL(img);
// }
import { useRouter } from "vue-router";
export default {
name: "SystemManage",
components: {
@@ -141,13 +165,17 @@ export default {
}
// return isJpgOrPng && isLt2M;
};
const router = useRouter();
const golearningpath = () => {
router.push({ path: "/learningpath", params: { id: 1 } });
};
return {
...toRefs(state),
showDrawer,
changeRadio,
handleChange,
beforeUpload,
golearningpath,
};
},
};