mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/fe-manage.git
synced 2025-12-15 22:06:45 +08:00
feat:增加搜索学习路径
This commit is contained in:
@@ -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 });
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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,
|
||||
};
|
||||
},
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user