hz/fe-manage
1
0
Fork 0
mirror of https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/fe-manage.git synced 2025-12-12 12:26:47 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat:增肌学习路径的增删改查

Browse Source
This commit is contained in:
李晓鸽
2022-10-28 18:23:26 +08:00
parent b64ce03c62 a9e7489d9f
commit 90e3333120
41 changed files with 2509 additions and 1300 deletions
Download Patch File Download Diff File Expand all files Collapse all files

247
src/views/learningpath/LearningPath.vue
View File

@@ -66,7 +66,7 @@
</div>
<!-- 搜索框及按钮 -->
<!-- 无数据 -->
<div class="datanull" v-if="tableData.length === 0">
<div class="datanull" v-if="tableDataTotal === 0">
<div class="nodata_box">
<div class="left">
<img src="../../assets/images/taskpage/left1.png" />
@@ -85,8 +85,8 @@
<!-- 表格 -->
<div
class="tableBox"
v-if="tableData.length !== 0"
style="padding-bottom: 160px; position: relative"
v-if="tableDataTotal !== 0"
style="padding-bottom: 0px; position: relative"
>
<a-table
style="border: 1px solid #f2f6fe"
@@ -98,15 +98,19 @@
@expand="expandTable"
:pagination="false"
/>
</div>
<div class="tableBox">
<div class="pa">
<a-pagination
v-if="tableDataTotal > 10"
showSizeChanger="true"
showQuickJumper="true"
hideOnSinglePage="true"
:pageSize="pageSize"
:current="currentPage"
v-model:current="currentPage"
:total="tableDataTotal"
class="pagination"
@change="changePagination"
/>
</div>
</div>
@@ -171,11 +175,11 @@
</div>
<!-- <div class="in">
<a-input
v-model:value="organization"
v-model:value="valuecom"
maxlength="20"
style="border-radius: 4px"
/>
<div class="showcount">{{ organization.length }}/20</div>
<div class="showcount">{{ valuecom.length }}/20</div>
</div> -->
</div>
<div class="bac">
@@ -225,8 +229,24 @@
<button class="samtn btn2" @click="createLearnPath">确定</button>
</div>
</div>
</div></a-modal
>
</div>
<!-- <div
style="
width: 300px;
height: 200px;
display: flex;
align-items: center;
justify-content: center;
background:pink;
flex-shrink: 0;
position:absolute,
z-index: 100;
"
v-if="true"
>
<a-spin :spinning="true" />
</div> -->
</a-modal>
<!-- 编辑路径弹窗 -->
<a-modal
@@ -318,7 +338,7 @@
"
:style="{
border:
learnPathBg === item.id
learnPathBg2 === item.id
? '2px solid rgba(78, 166, 255, 1)'
: '2px solid rgba(78, 166, 255, 0)',
'background-image': 'url(' + item.source + ')',
@@ -336,8 +356,8 @@
</div>
</div>
<div class="btn">
<button class="samtn btn1" @click="handleOut">取消</button>
<button class="samtn btn2" @click="handleOut">确定</button>
<button class="samtn btn1" @click="handleOut1">取消</button>
<button class="samtn btn2" @click="editLearnPath">确定</button>
</div>
</div>
</div></a-modal
@@ -494,10 +514,10 @@
</div>
<div class="del_btnbox">
<div class="del_btn btn1">
<div class="btnText" @click="delete_exit">取消</div>
<div class="btnText" @click="closeDeleteModal">取消</div>
</div>
<div class="del_btn btn2">
<div class="btnText" @click="delete_exit">确定</div>
<div class="btnText" @click="deleteLearnPath">确定</div>
</div>
</div>
</div>
@@ -572,25 +592,26 @@
<manage-right v-model:Managevisible="Managevisible" />
<!-- 授权名单抽屉 -->
<power-list v-model:PLvisible="PLvisible" />
<!-- 创建路径loading -->
</div>
</template>
<script>
import { reactive, toRefs, onMounted } from "vue";
import { useRouter } from "vue-router";
import OwnerShip from "../../components/drawers/Ownership";
import PowerList from "../../components/drawers/PowerList";
import QueryRight from "../../components/drawers/QueryRight";
import ManageRight from "../../components/drawers/ManageRight";
import * as api from "../../api/index1";
import { message } from "ant-design-vue";
function getBase64(img, callback) {
const reader = new FileReader();
reader.addEventListener("load", () => callback(reader.result));
reader.readAsDataURL(img);
}
import { toDate } from "../../api/method";
export default {
name: "learningPath",
components: { OwnerShip, PowerList, QueryRight, ManageRight },
setup() {
const router = useRouter();
const state = reactive({
projectNameList: [
{
@@ -648,7 +669,8 @@ export default {
source: require("../../assets/images/leveladd/3.png"),
},
],
learnPathBg: null, //选择的路径图背景
learnPathBg: null, //创建路径选择的路径图背景
learnPathBg2: null, //编辑路径选择的路径图背景
pub: false, //发布弹窗
checked: false, //发布弹窗switch
checkedTeacher: false, //发布弹窗勾选
@@ -671,7 +693,6 @@ export default {
value1: "",
value2: "",
pathName: "", //创建/编辑路径图名称
organization: "", //创建/编辑路径图归属组织
organizationList: [
{
id: 1,
@@ -696,8 +717,11 @@ export default {
], //归属组织
organizationSelectName: null, //归属组织选择名称
organizationSelectId: null, //归属组织选择id
pathBg: "", //路径图选择背景
pathIntro: "", //路径说明
valueEE: "",
createLoading: false, //创建路径loading
deletePathId: null, //删除路径id
editPathId: null, //修改路径id
});
const selectProjectName = (value, index) => {
@@ -708,15 +732,31 @@ export default {
console.log("e", e, a);
};
const handleOut = () => {
// console.log("打开创建路径弹窗");
state.pathName = "";
state.pathBg = "";
state.organizationSelectName = null;
state.organizationSelectId = null;
state.pathIntro = "";
state.out = !state.out;
};
const handleOut1 = () => {
state.pathName = "";
state.pathBg = "";
state.organizationSelectName = null;
state.organizationSelectId = null;
state.pathIntro = "";
state.out1 = !state.out1;
state.editPathId = null;
};
const chooseImg = (item) => {
console.log(item);
state.learnPathBg = item.id;
};
const chooseImg2 = (id) => {
console.log(id);
state.learnPathBg2 = id;
};
const showPub = () => {
state.pub = true;
};
@@ -739,6 +779,7 @@ export default {
state.deleteModal = true;
};
const closeDeleteModal = () => {
state.deletePathId = null;
state.deleteModal = false;
};
const showStartModal = () => {
@@ -772,7 +813,7 @@ export default {
let obj = {
id: value.routerId,
number: (state.currentPage - 1) * state.pageSize + index + 1,
manager: value.name,
manager: value.name ? value.name : "-",
state:
value.status === 0
? "草稿"
@@ -781,9 +822,14 @@ export default {
: value.status === -1
? "已停用"
: "-",
creater: value.createName,
pubtime: value.publishTime,
cretime: value.createTime,
creater: value.createName ? value.createName : "-",
pubtime: value.publishTime
? toDate(value.publishTime, "Y-M-D h:m:s")
: "-",
cretime: value.createTime
? toDate(value.createTime, "Y-M-D h:m:s")
: "-",
remark: value.remark ? value.remark : "-",
};
array.push(obj);
});
@@ -850,6 +896,7 @@ export default {
key: "opacation",
width: 200,
align: "center",
fixed: "right",
scopedSlots: { customRender: "action" }, //引入的插槽
customRender: (text) => {
// console.log(text);
@@ -870,7 +917,14 @@ export default {
<div
class="jc"
onClick={() => {
console.log("text.record", text.record);
state.out1 = true;
state.pathName = text.record.manager;
// state.pathBg = "";
// state.organizationSelectName = null;
// state.organizationSelectId = null;
state.pathIntro = text.record.remark;
state.editPathId = text.record.id;
}}
>
编辑
@@ -885,6 +939,12 @@ export default {
class="jc"
onClick={() => {
state.out1 = true;
state.pathName = text.record.manager;
// state.pathBg = "";
// state.organizationSelectName = null;
// state.organizationSelectId = null;
state.pathIntro = text.record.remark;
state.editPathId = text.record.id;
}}
>
编辑
@@ -911,7 +971,7 @@ export default {
</div>
<div class="tableSelect">
<router-link to="/leveladd">
<div class="g1">关卡</div>
<div class="g1">管理</div>
</router-link>
<a-select
style="width: 50px;margin-top:2px;margin-left:25px"
@@ -998,6 +1058,8 @@ export default {
>
<div
onClick={() => {
state.deletePathId = text.record.id;
// console.log("text.record", text.record);
showDeleteModal();
}}
>
@@ -1077,6 +1139,7 @@ export default {
>
<div
onClick={() => {
state.deletePathId = text.record.id;
showDeleteModal();
}}
>
@@ -1103,26 +1166,31 @@ export default {
};
//创建学习路径图
const createLearnPath = () => {
getBase64("../../assets/images/leveladd/2.png", (base64Url) => {
console.log("base64Url", base64Url);
});
if (!state.pathName) return message.info("请输入路径图名称");
if (!state.organizationSelectName) return message.info("请选择归属组织");
if (!state.organizationSelectName) return message.info("请选择归属组织");
// let obj = {
// name: "新建路径图测试",
// picUrl: "",
// remark: "新建路径图测试说明",
// status: 0,
// };
// api
// .createLearnPath(obj)
// .then((res) => {
// console.log("创建成功", res);
// })
// .catch((err) => {
// console.log("创建失败", err);
// });
// if (!state.organizationSelectName) return message.info("请选择归属组织");
// state.createLoading = true;
let obj = {
name: state.pathName,
picUrl: "",
remark: state.pathIntro,
status: 0,
};
api
.createLearnPath(obj)
.then((res) => {
setTimeout(() => {
console.log("创建成功", res);
message.success("创建成功");
// state.createLoading = false;
state.currentPage = 1;
router.push("/leveladd");
// getLearnPath();
}, 1000);
})
.catch((err) => {
console.log("创建失败", err);
// state.createLoading = false;
});
};
//获取学习路径列表
const getLearnPath = () => {
@@ -1134,14 +1202,17 @@ export default {
.getLearnPath(obj)
.then((res) => {
if (res.status === 200) {
// console.log("获取路径列表数据", res.data.data);
console.log("获取路径列表数据", res.data.data);
let arr = res.data.data.rows;
// let array = [];
if (
arr.length === 0 &&
res.data.data.total > 0 &&
state.currentPage > 1
) {
state.currentPage = state.currentPage - 1;
getLearnPath();
}
getTableDate(arr);
// state.tableData = array;
// getTableDate();
// console.log("tableData", array);
state.tableDataTotal = Number(res.data.data.total);
}
})
@@ -1174,6 +1245,60 @@ export default {
// console.log("添加测试关卡数据失败", err);
// });
};
//翻页
const changePagination = (page) => {
state.currentPage = page;
getLearnPath();
// console.log("翻页", page, pageSize);
};
//删除学习路径图
const deleteLearnPath = () => {
let obj = {
routerId: state.deletePathId,
type: -2,
};
api
.deleteLearnPath(obj)
.then((res) => {
console.log("删除成功", res);
message.success("删除成功");
state.deleteModal = false;
getLearnPath();
})
.catch((err) => {
console.log("删除失败", err);
});
};
//编辑学习路径图
const editLearnPath = () => {
if (!state.pathName) return message.info("请输入路径图名称");
// if (!state.organizationSelectName) return message.info("请选择归属组织");
// state.createLoading = true;
let obj = {
routerId: state.editPathId,
name: state.pathName,
picUrl: "",
remark: state.pathIntro,
status: 0,
};
api
.createLearnPath(obj)
.then((res) => {
setTimeout(() => {
console.log("修改成功", res);
message.success("修改成功");
// state.createLoading = false;
// state.currentPage = 1;
state.out1 = false;
// router.push("/leveladd");
getLearnPath();
}, 1000);
})
.catch((err) => {
console.log("修改失败", err);
// state.createLoading = false;
});
};
onMounted(() => {
// console.log("执行");
getLearnPath();
@@ -1200,10 +1325,14 @@ export default {
showPower,
tableDataFunc,
chooseImg,
chooseImg2,
showQuery,
showManage,
createLearnPath,
selectorganization,
changePagination,
deleteLearnPath,
editLearnPath,
};
},
};
@@ -1699,8 +1828,8 @@ export default {
}
}
.filter {
margin-left: 38px;
margin-right: 38px;
margin-left: 35px;
margin-right: 35px;
margin-top: 30px;
display: flex;
justify-content: space-between;
@@ -1840,7 +1969,8 @@ export default {
}
}
.tableBox {
margin: 20px 38px 30px;
// margin: 20px 38px 30px;
margin: 10px 35px 0px 35px;
th.h {
background-color: #eff4fc !important;
@@ -1851,15 +1981,20 @@ export default {
> td {
background: #f6f9fd;
}
}
.tableBox {
.pa {
position: absolute;
bottom: 20px;
left: 0;
width: 100%;
// height: 20px;
// background-color: red;
display: flex;
justify-content: center;
position: absolute;
bottom: 20px;
// margin-bottom: 10px;
// position: absolute;
// bottom: -40px;
}
}
.operation {