mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/fe-manage.git
synced 2025-12-15 22:06:45 +08:00
style:增加下载中心
This commit is contained in:
lixg
@@ -2,7 +2,7 @@
|
||||
* @Author: lixg lixg@dongwu-inc.com
|
||||
* @Date: 2022-11-04 22:45:31
|
||||
* @LastEditors: lixg lixg@dongwu-inc.com
|
||||
* @LastEditTime: 2023-01-05 14:22:29
|
||||
* @LastEditTime: 2023-01-06 10:18:41
|
||||
* @FilePath: /fe-manage/src/api/index1.js
|
||||
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
|
||||
*/
|
||||
@@ -163,6 +163,10 @@ export const AssessmentManagementMessage = (obj) => http.get(`/admin/student/get
|
||||
export const exportTaskStudent = (obj) => http.post('/admin/student/exportTaskStudent', obj)
|
||||
//导出任务作业
|
||||
export const exportHomeWork = (obj) => http.post('/admin/student/exportHomeWork', obj)
|
||||
//签到
|
||||
export const attendanceSign = (obj) => http.post('/stu/task/attendance/sign', obj)
|
||||
//请假
|
||||
export const attendanceLeave = (obj) => http.post('/stu/task/attendance/leave', obj)
|
||||
|
||||
// //面授课批量导入成绩
|
||||
export const batchImportScore = (offcoursePlanId, obj) =>
|
||||
|
||||
@@ -423,6 +423,13 @@ export default {
|
||||
},
|
||||
];
|
||||
}
|
||||
if (n.indexOf("/download") !== -1 || n.indexOf("/download") !== -1) {
|
||||
state.list = [
|
||||
{
|
||||
name: "下载中心",
|
||||
},
|
||||
];
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
|
||||
@@ -278,6 +278,15 @@
|
||||
</div>
|
||||
<router-link to="/qamanage">问答管理</router-link>
|
||||
</a-menu-item>
|
||||
<a-menu-item key="sub15" @titleClick="titleClick">
|
||||
<div class="imgBox">
|
||||
<img
|
||||
style="width: 20px; height: 20px"
|
||||
src="../assets/images/navleft/qa.png"
|
||||
/>
|
||||
</div>
|
||||
<router-link to="/download">下载中心</router-link>
|
||||
</a-menu-item>
|
||||
</a-menu>
|
||||
</div>
|
||||
<div
|
||||
@@ -343,6 +352,9 @@
|
||||
<a-menu-item key="sub14" @titleClick="titleClick">
|
||||
<router-link to="/qamanage">问答</router-link>
|
||||
</a-menu-item>
|
||||
<a-menu-item key="sub15" @titleClick="titleClick">
|
||||
<router-link to="/download">问答</router-link>
|
||||
</a-menu-item>
|
||||
</a-menu>
|
||||
</div>
|
||||
</div>
|
||||
@@ -374,6 +386,7 @@ export default {
|
||||
"sub12",
|
||||
"sub13",
|
||||
"sub14",
|
||||
"sub15",
|
||||
],
|
||||
openKeys: localStorage.getItem("openKeys")
|
||||
? JSON.parse(localStorage.getItem("openKeys"))
|
||||
@@ -535,6 +548,12 @@ export default {
|
||||
selectedKeys: "sub14",
|
||||
pagename: "问答管理",
|
||||
},
|
||||
{
|
||||
href: "/download",
|
||||
openKeys: "sub15",
|
||||
selectedKeys: "sub15",
|
||||
pagename: "下载中心",
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
|
||||
@@ -24,11 +24,26 @@
|
||||
<div class="upload">
|
||||
<div class="text">上传：</div>
|
||||
<div class="right">
|
||||
<div class="load">
|
||||
<div style="height: 176px; margin-bottom: 20px">
|
||||
<a-upload-dragger
|
||||
v-model:fileList="fileList"
|
||||
:action="BATCH_IMPORT_SCORE + '?offcoursePlanId=' + id"
|
||||
name="file"
|
||||
:multiple="true"
|
||||
@change="handleChange"
|
||||
>
|
||||
<p class="ant-upload-drag-icon">
|
||||
<inbox-outlined></inbox-outlined>
|
||||
</p>
|
||||
<p class="ant-upload-text">点击或将文件拖拽到此处上传</p>
|
||||
<p class="ant-upload-hint">支持扩展名：.xls/.xlsx</p>
|
||||
</a-upload-dragger>
|
||||
</div>
|
||||
<!-- <div class="load">
|
||||
<div class="cloud"></div>
|
||||
<div class="tip">点击或将文件拖拽到此处上传</div>
|
||||
<div class="tipz">支持扩展名：.xls/.xlsx</div>
|
||||
</div>
|
||||
</div> -->
|
||||
<div class="loadstate">
|
||||
<div class="loadborder">
|
||||
<div class="content">
|
||||
@@ -111,6 +126,9 @@
|
||||
|
||||
<script>
|
||||
import { reactive, toRefs } from "vue";
|
||||
import { message } from "ant-design-vue";
|
||||
import * as api from "../../api/index1";
|
||||
import { BATCH_IMPORT_SCORE } from "@/api/config";
|
||||
export default {
|
||||
name: "ImpStu",
|
||||
props: {
|
||||
@@ -128,12 +146,36 @@ export default {
|
||||
const afterVisibleChange = (bool) => {
|
||||
console.log("state", bool);
|
||||
};
|
||||
|
||||
//上传文件
|
||||
const handleChange = (info) => {
|
||||
console.log("info", info, props.id);
|
||||
const status = info.file.status;
|
||||
if (status !== "uploading") {
|
||||
console.log(info.file, info.fileList);
|
||||
}
|
||||
if (status === "done") {
|
||||
const formData = new FormData();
|
||||
formData.append("uploadFile", info.file);
|
||||
// formData.append("offcoursePlanId", props.id);
|
||||
console.log(info.file);
|
||||
api.batchImportScore(props.id, formData).then((res) => {
|
||||
// if (res.data.code === 200) {
|
||||
// console.log('上传成功')
|
||||
// }
|
||||
console.log("上传成绩", res);
|
||||
});
|
||||
message.success(`${info.file.name} file uploaded successfully.`);
|
||||
} else if (status === "error") {
|
||||
message.error(`${info.file.name} file upload failed.`);
|
||||
}
|
||||
};
|
||||
return {
|
||||
...toRefs(state),
|
||||
afterVisibleChange,
|
||||
closeDrawer,
|
||||
// change,
|
||||
handleChange,
|
||||
BATCH_IMPORT_SCORE,
|
||||
};
|
||||
},
|
||||
};
|
||||
|
||||
@@ -107,7 +107,6 @@
|
||||
</div>
|
||||
</div>
|
||||
</a-drawer>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
@@ -367,44 +367,44 @@ export default {
|
||||
const clearLine = () => {
|
||||
state.selectedRowKeys = [];
|
||||
};
|
||||
const getTableData = () => {
|
||||
let arr = state.tabledata;
|
||||
arr.map((value) => {
|
||||
// console.log("value", value);
|
||||
value.opacation = (
|
||||
<div class="opa">
|
||||
<a-checkbox
|
||||
checked={value.signIn}
|
||||
onChange={(e) => {
|
||||
console.log("点击签到", e);
|
||||
}}
|
||||
>
|
||||
签到
|
||||
</a-checkbox>
|
||||
{/**
|
||||
<a-checkbox
|
||||
checked={value.signOut}
|
||||
onChange={(e) => {
|
||||
console.log("点击签退", e);
|
||||
}}
|
||||
>
|
||||
签退
|
||||
</a-checkbox>
|
||||
*/}
|
||||
<a-checkbox
|
||||
checked={value.leave}
|
||||
onChange={(e) => {
|
||||
console.log("点击请假", e);
|
||||
}}
|
||||
>
|
||||
请假
|
||||
</a-checkbox>
|
||||
</div>
|
||||
);
|
||||
});
|
||||
state.tabledata = arr;
|
||||
};
|
||||
getTableData();
|
||||
// const getTableData = () => {
|
||||
// let arr = state.tabledata;
|
||||
// arr.map((value) => {
|
||||
// // console.log("value", value);
|
||||
// value.opacation = (
|
||||
// <div class="opa">
|
||||
// <a-checkbox
|
||||
// checked={value.signIn}
|
||||
// onChange={(e) => {
|
||||
// console.log("点击签到", e);
|
||||
// }}
|
||||
// >
|
||||
// 签到
|
||||
// </a-checkbox>
|
||||
// {/**
|
||||
// <a-checkbox
|
||||
// checked={value.signOut}
|
||||
// onChange={(e) => {
|
||||
// console.log("点击签退", e);
|
||||
// }}
|
||||
// >
|
||||
// 签退
|
||||
// </a-checkbox>
|
||||
// */}
|
||||
// <a-checkbox
|
||||
// checked={value.leave}
|
||||
// onChange={(e) => {
|
||||
// console.log("点击请假", e);
|
||||
// }}
|
||||
// >
|
||||
// 请假
|
||||
// </a-checkbox>
|
||||
// </div>
|
||||
// );
|
||||
// });
|
||||
// state.tabledata = arr;
|
||||
// };
|
||||
// getTableData();
|
||||
const tableDataFunc = () => {
|
||||
const columns = [
|
||||
{
|
||||
@@ -524,21 +524,81 @@ export default {
|
||||
align: "center",
|
||||
// scopedSlots: { customRender: "action" }, //引入的插槽
|
||||
|
||||
// customRender: () => {
|
||||
// return (
|
||||
// <div class="opa">
|
||||
// <a-checkbox-group
|
||||
// // value={state.selectOption}
|
||||
// name="checkboxgroup"
|
||||
// options={state.tableOptions}
|
||||
// onChange={(e) => {
|
||||
// console.log("eee", e);
|
||||
// // state.selectOption = e;
|
||||
// }}
|
||||
// />
|
||||
// </div>
|
||||
// );
|
||||
// },
|
||||
customRender: (text) => {
|
||||
return (
|
||||
<div class="opa">
|
||||
<a-checkbox
|
||||
checked={text.record.signIn}
|
||||
onChange={(e) => {
|
||||
console.log("点击签到", e);
|
||||
let obj = {
|
||||
courseId: Number(props.projectTaskInfo.courseId),
|
||||
projectId: Number(props.projectTaskInfo.projectId),
|
||||
// routerId: Number(props.projectTaskInfo.projectId),
|
||||
studentId: Number(text.record.studentId),
|
||||
studentName: text.record.studentName,
|
||||
taskId: Number(props.projectTaskInfo.projectTaskId),
|
||||
taskType: Number(props.projectTaskInfo.type),
|
||||
type: 1,
|
||||
// userName: "",
|
||||
};
|
||||
api
|
||||
.attendanceSign(obj, (res) => {
|
||||
console.log("签到结果", res, obj, e);
|
||||
if (res.data.code === 200) {
|
||||
text.record.signIn = true;
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log("签到失败", err, obj);
|
||||
text.record.signIn = false;
|
||||
});
|
||||
}}
|
||||
>
|
||||
签到
|
||||
</a-checkbox>
|
||||
{/**
|
||||
<a-checkbox
|
||||
checked={value.signOut}
|
||||
onChange={(e) => {
|
||||
console.log("点击签退", e);
|
||||
}}
|
||||
>
|
||||
签退
|
||||
</a-checkbox>
|
||||
*/}
|
||||
<a-checkbox
|
||||
checked={text.record.leave}
|
||||
onChange={(e) => {
|
||||
console.log("点击请假", e, props.datasource);
|
||||
let obj = {
|
||||
courseId: Number(props.projectTaskInfo.courseId),
|
||||
projectId: Number(props.projectTaskInfo.projectId),
|
||||
// routerId: Number(props.projectTaskInfo.projectId),
|
||||
studentId: Number(text.record.studentId),
|
||||
studentName: text.record.studentName,
|
||||
taskId: Number(props.projectTaskInfo.projectTaskId),
|
||||
taskType: Number(props.projectTaskInfo.type),
|
||||
type: 1,
|
||||
};
|
||||
api
|
||||
.attendanceLeave(obj, (res) => {
|
||||
console.log("请假结果", res, obj, e);
|
||||
if (res.data.code === 200) {
|
||||
text.record.leave = true;
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log("请假结果", err, obj);
|
||||
text.record.leave = false;
|
||||
});
|
||||
}}
|
||||
>
|
||||
请假
|
||||
</a-checkbox>
|
||||
</div>
|
||||
);
|
||||
},
|
||||
},
|
||||
];
|
||||
return columns;
|
||||
@@ -644,7 +704,6 @@ export default {
|
||||
closeDrawer,
|
||||
onSelectChange,
|
||||
tableDataFunc,
|
||||
getTableData,
|
||||
showImpStu,
|
||||
showCopyModal,
|
||||
closeCopyModal,
|
||||
@@ -1054,6 +1113,7 @@ export default {
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-shadow: 0px 1px 35px 0px rgba(118, 136, 166, 0.16);
|
||||
background-color: #fff;
|
||||
.btn1 {
|
||||
width: 100px;
|
||||
height: 40px;
|
||||
|
||||
@@ -390,15 +390,8 @@ export default {
|
||||
width: 100,
|
||||
align: "center",
|
||||
className: "h",
|
||||
},
|
||||
],
|
||||
});
|
||||
//面授直播管理列表操作
|
||||
const ListOpera = () => {
|
||||
let arr = state.tabledata;
|
||||
arr.map((value) => {
|
||||
if (value.finishStatus == 1) {
|
||||
value.operation = (
|
||||
customRender: (text) => {
|
||||
return text.record.finishStatus == 1 ? (
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
@@ -427,9 +420,7 @@ export default {
|
||||
查看答卷
|
||||
</a-button>
|
||||
</div>
|
||||
);
|
||||
} else {
|
||||
value.operation = (
|
||||
) : (
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
@@ -455,9 +446,75 @@ export default {
|
||||
</a-button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
},
|
||||
},
|
||||
],
|
||||
});
|
||||
};
|
||||
// //面授直播管理列表操作
|
||||
// const ListOpera = () => {
|
||||
// let arr = state.tabledata;
|
||||
// arr.map((value) => {
|
||||
// if (value.finishStatus == 1) {
|
||||
// value.operation = (
|
||||
// <div
|
||||
// style={{
|
||||
// display: "flex",
|
||||
// alignItems: "center",
|
||||
// justifyContent: "center",
|
||||
// }}
|
||||
// >
|
||||
// <a-button
|
||||
// type="link"
|
||||
// class="operation"
|
||||
// style="cursor:pointer;margin-right:10px;"
|
||||
// onClick={() => {
|
||||
// state.CWvisible = true;
|
||||
// }}
|
||||
// >
|
||||
// 查看作业
|
||||
// </a-button>
|
||||
// <a-button
|
||||
// type="link"
|
||||
// class="operation"
|
||||
// style="cursor:pointer;margin-right:10px;"
|
||||
// onClick={() => {
|
||||
// state.CQvisible = true;
|
||||
// }}
|
||||
// >
|
||||
// 查看答卷
|
||||
// </a-button>
|
||||
// </div>
|
||||
// );
|
||||
// } else {
|
||||
// value.operation = (
|
||||
// <div
|
||||
// style={{
|
||||
// display: "flex",
|
||||
// alignItems: "center",
|
||||
// justifyContent: "center",
|
||||
// }}
|
||||
// >
|
||||
// <a-button
|
||||
// type="link"
|
||||
// class="operation"
|
||||
// style="cursor:pointer;margin-right:10px;"
|
||||
// disabled
|
||||
// >
|
||||
// 查看作业
|
||||
// </a-button>
|
||||
// <a-button
|
||||
// type="link"
|
||||
// class="operation"
|
||||
// style="cursor:pointer;margin-right:10px;"
|
||||
// disabled
|
||||
// >
|
||||
// 查看答卷
|
||||
// </a-button>
|
||||
// </div>
|
||||
// );
|
||||
// }
|
||||
// });
|
||||
// };
|
||||
const closeDrawer = () => {
|
||||
ctx.emit("update:Fvisible", false);
|
||||
state.name = "";
|
||||
@@ -532,7 +589,7 @@ export default {
|
||||
newData.push(res.data.data.records[i]);
|
||||
}
|
||||
state.tabledata = newData;
|
||||
ListOpera();
|
||||
// ListOpera();
|
||||
state.tableDataTotal = res.data.data.total;
|
||||
state.tableDataTotal2 = res.data.data.total;
|
||||
}
|
||||
|
||||
@@ -361,44 +361,7 @@ export default {
|
||||
const clearLine = () => {
|
||||
state.selectedRowKeys = [];
|
||||
};
|
||||
const getTableData = () => {
|
||||
let arr = state.tabledata;
|
||||
arr.map((value) => {
|
||||
// console.log("value", value);
|
||||
value.opacation = (
|
||||
<div class="opa">
|
||||
<a-checkbox
|
||||
checked={value.signIn}
|
||||
onChange={(e) => {
|
||||
console.log("点击签到", e);
|
||||
}}
|
||||
>
|
||||
签到
|
||||
</a-checkbox>
|
||||
{/**
|
||||
<a-checkbox
|
||||
checked={value.signOut}
|
||||
onChange={(e) => {
|
||||
console.log("点击签退", e);
|
||||
}}
|
||||
>
|
||||
签退
|
||||
</a-checkbox>
|
||||
*/}
|
||||
<a-checkbox
|
||||
checked={value.leave}
|
||||
onChange={(e) => {
|
||||
console.log("点击请假", e);
|
||||
}}
|
||||
>
|
||||
请假
|
||||
</a-checkbox>
|
||||
</div>
|
||||
);
|
||||
});
|
||||
state.tabledata = arr;
|
||||
};
|
||||
getTableData();
|
||||
|
||||
const tableDataFunc = () => {
|
||||
const columns = [
|
||||
{
|
||||
@@ -518,21 +481,88 @@ export default {
|
||||
align: "center",
|
||||
// scopedSlots: { customRender: "action" }, //引入的插槽
|
||||
|
||||
// customRender: () => {
|
||||
// return (
|
||||
// <div class="opa">
|
||||
// <a-checkbox-group
|
||||
// // value={state.selectOption}
|
||||
// name="checkboxgroup"
|
||||
// options={state.tableOptions}
|
||||
// onChange={(e) => {
|
||||
// console.log("eee", e);
|
||||
// // state.selectOption = e;
|
||||
// }}
|
||||
// />
|
||||
// </div>
|
||||
customRender: (text) => {
|
||||
return (
|
||||
<div class="opa">
|
||||
<a-checkbox
|
||||
checked={text.record.signIn}
|
||||
onChange={(e) => {
|
||||
let obj = {
|
||||
courseId: Number(props.datasource.courseId),
|
||||
// projectId: 0,
|
||||
routerId: Number(props.datasource.routerId),
|
||||
studentId: Number(text.record.studentId),
|
||||
studentName: text.record.studentName,
|
||||
taskId: Number(props.datasource.routerTaskId),
|
||||
taskType: Number(props.datasource.type),
|
||||
type: 2,
|
||||
// userName: "",
|
||||
};
|
||||
api
|
||||
.attendanceSign(obj, (res) => {
|
||||
console.log("签到结果", res, obj, e);
|
||||
if (res.data.code === 200) {
|
||||
text.record.signIn = true;
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log("签到失败", err, obj);
|
||||
text.record.signIn = false;
|
||||
});
|
||||
// console.log(
|
||||
// "点击签到",
|
||||
// e,
|
||||
// text.record,
|
||||
// props.datasource,
|
||||
// obj
|
||||
// );
|
||||
// },
|
||||
}}
|
||||
>
|
||||
签到
|
||||
</a-checkbox>
|
||||
{/**
|
||||
<a-checkbox
|
||||
checked={value.signOut}
|
||||
onChange={(e) => {
|
||||
console.log("点击签退", e);
|
||||
}}
|
||||
>
|
||||
签退
|
||||
</a-checkbox>
|
||||
*/}
|
||||
<a-checkbox
|
||||
checked={text.record.leave}
|
||||
onChange={(e) => {
|
||||
console.log("点击请假", e, props.datasource);
|
||||
let obj = {
|
||||
courseId: Number(props.datasource.courseId),
|
||||
// projectId: 0,
|
||||
routerId: Number(props.datasource.routerId),
|
||||
studentId: Number(text.record.studentId),
|
||||
studentName: text.record.studentName,
|
||||
taskId: Number(props.datasource.routerTaskId),
|
||||
taskType: Number(props.datasource.type),
|
||||
type: 2,
|
||||
// userName: "",
|
||||
};
|
||||
api
|
||||
.attendanceLeave(obj, (res) => {
|
||||
console.log("请假结果", res, obj, e);
|
||||
if (res.data.code === 200) {
|
||||
text.record.leave = true;
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log("请假结果", err, obj);
|
||||
text.record.leave = false;
|
||||
});
|
||||
}}
|
||||
>
|
||||
请假
|
||||
</a-checkbox>
|
||||
</div>
|
||||
);
|
||||
},
|
||||
},
|
||||
];
|
||||
return columns;
|
||||
@@ -543,23 +573,23 @@ export default {
|
||||
console.log("我是传递的查询参数", props.datasource, {
|
||||
pageNo: state.currentPage,
|
||||
pageSize: state.pageSize,
|
||||
currentStageId: props.datasource.stageId,
|
||||
currentStageId: props.datasource.chapterId,
|
||||
type: 2,
|
||||
pid: props.datasource.projectId,
|
||||
pid: props.datasource.routerId,
|
||||
// status: Number(state.name),
|
||||
studentName: state.name,
|
||||
currentTaskId: props.datasource.projectTaskId,
|
||||
currentTaskId: props.datasource.routerTaskId,
|
||||
});
|
||||
api
|
||||
.AssessmentManagementMessage({
|
||||
pageNo: state.currentPage,
|
||||
pageSize: state.pageSize,
|
||||
currentStageId: props.datasource.stageId,
|
||||
currentStageId: props.datasource.chapterId,
|
||||
type: 2,
|
||||
pid: props.datasource.projectId,
|
||||
pid: props.datasource.routerId,
|
||||
// status: Number(state.name),
|
||||
studentName: state.name,
|
||||
currentTaskId: props.datasource.projectTaskId,
|
||||
currentTaskId: props.datasource.routerTaskId,
|
||||
taskType: props.datasource.type,
|
||||
})
|
||||
.then((res) => {
|
||||
@@ -610,9 +640,9 @@ export default {
|
||||
`${
|
||||
process.env.VUE_APP_PROXY_URL
|
||||
}admin/student/exportTaskStudent?currentStageId=${
|
||||
props.datasource.stageId
|
||||
}&type=${2}&pid=${props.datasource.projectId}&taskId=${
|
||||
props.datasource.projectTaskId
|
||||
props.datasource.chapterId
|
||||
}&type=${2}&pid=${props.datasource.routerId}&taskId=${
|
||||
props.datasource.routerTaskId
|
||||
}&taskType=${props.datasource.type}`
|
||||
);
|
||||
// api
|
||||
@@ -638,7 +668,6 @@ export default {
|
||||
closeDrawer,
|
||||
onSelectChange,
|
||||
tableDataFunc,
|
||||
getTableData,
|
||||
showImpStu,
|
||||
showCopyModal,
|
||||
closeCopyModal,
|
||||
@@ -1048,6 +1077,7 @@ export default {
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-shadow: 0px 1px 35px 0px rgba(118, 136, 166, 0.16);
|
||||
background-color: #fff;
|
||||
.btn1 {
|
||||
width: 100px;
|
||||
height: 40px;
|
||||
|
||||
@@ -905,14 +905,14 @@ export default {
|
||||
height: 72px;
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
background-color: #fff;
|
||||
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-shadow: 0px 1px 35px 0px rgba(118, 136, 166, 0.16);
|
||||
|
||||
background-color: #fff;
|
||||
.btn1 {
|
||||
width: 100px;
|
||||
height: 40px;
|
||||
|
||||
257
src/views/DownLoad.vue
Normal file
257
src/views/DownLoad.vue
Normal file
@@ -0,0 +1,257 @@
|
||||
<!--
|
||||
* @Author: lixg lixg@dongwu-inc.com
|
||||
* @Date: 2023-01-06 11:30:15
|
||||
* @LastEditors: lixg lixg@dongwu-inc.com
|
||||
* @LastEditTime: 2023-01-06 11:55:38
|
||||
* @FilePath: /fe-manage/src/views/DownLoad.vue
|
||||
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
|
||||
-->
|
||||
<template>
|
||||
<div class="DownLoad">
|
||||
<div
|
||||
style="
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
"
|
||||
>
|
||||
<div class="tab1">
|
||||
<div class="nameinp">
|
||||
<div class="namee">作业名称：</div>
|
||||
<a-input
|
||||
v-model:value="name"
|
||||
style="width: 330px; height: 40px; border-radius: 8px"
|
||||
placeholder="请输入作业名称"
|
||||
/>
|
||||
</div>
|
||||
<div class="btns">
|
||||
<div class="btn1">
|
||||
<div class="img1">
|
||||
<img src="../assets/images/courseManage/search0.png" />
|
||||
</div>
|
||||
<div class="wz">搜索</div>
|
||||
</div>
|
||||
<div class="btn2">
|
||||
<div class="img2">
|
||||
<img src="../assets/images/courseManage/reset1.png" />
|
||||
</div>
|
||||
<div class="wz">重置</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="width: 200px">
|
||||
<div
|
||||
style="
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
color: rgba(153, 153, 153, 0.85);
|
||||
line-height: 22px;
|
||||
justify-content: space-between;
|
||||
"
|
||||
>
|
||||
<div>当前容量:</div>
|
||||
<div>55.01MB / 2GB</div>
|
||||
</div>
|
||||
<a-progress :percent="40" :width="200" :show-info="false" />
|
||||
</div>
|
||||
</div>
|
||||
<!-- 文件容器 -->
|
||||
<div class="zipcontainer">
|
||||
<!-- 单个文件 -->
|
||||
<div class="item">
|
||||
<div class="itemup">
|
||||
<div class="lefttop"></div>
|
||||
<div class="cent">
|
||||
<div class="zip"></div>
|
||||
<div class="ziprit">
|
||||
<div class="textop">作业名称</div>
|
||||
<div class="texdown">
|
||||
<div class="timemanag" style="margin-top: 12px">
|
||||
2022-08-08 10:30:30 管理员
|
||||
</div>
|
||||
<div class="timemanag">来源：管理者进阶-腾飞班Z1</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="itemdown">
|
||||
<div class="download">下载</div>
|
||||
<div class="delete">删除</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { toRefs, reactive } from "vue";
|
||||
export default {
|
||||
name: "DownLoad",
|
||||
setup() {
|
||||
const state = reactive({
|
||||
name: "",
|
||||
});
|
||||
|
||||
return {
|
||||
...toRefs(state),
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.DownLoad {
|
||||
width: 100%;
|
||||
margin: 42px 64px 0 32px;
|
||||
.tab1 {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
.t1 {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.nameinp {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-top: 10px;
|
||||
margin-right: 10px;
|
||||
.namee {
|
||||
color: rgba(0, 0, 0, 0.85);
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
.btns {
|
||||
display: flex;
|
||||
margin-top: 10px;
|
||||
|
||||
.btn1 {
|
||||
width: 100px;
|
||||
height: 40px;
|
||||
margin-right: 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #ffffff;
|
||||
font-size: 14px;
|
||||
background: #4ea6ff;
|
||||
border-radius: 8px;
|
||||
border: 1px solid #4ea6ff;
|
||||
cursor: pointer;
|
||||
.wz {
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
.btn2 {
|
||||
width: 100px;
|
||||
height: 40px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #4ea6ff;
|
||||
font-size: 14px;
|
||||
background: #ffffff;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
border: 1px solid #4ea6ff;
|
||||
.wz {
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.zipcontainer {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin-top: 30px;
|
||||
.item {
|
||||
margin-right: 50px;
|
||||
margin-bottom: 50px;
|
||||
.itemup {
|
||||
width: 352px;
|
||||
height: 160px;
|
||||
background: #ffffff;
|
||||
border-radius: 2px 2px 0px 0px;
|
||||
border: 1px solid #4ea6ff;
|
||||
position: relative;
|
||||
.lefttop {
|
||||
width: 8px;
|
||||
height: 21px;
|
||||
background: #4ea6ff;
|
||||
border-radius: 0px 4px 4px 0px;
|
||||
top: 18px;
|
||||
position: absolute;
|
||||
}
|
||||
.cent {
|
||||
display: flex;
|
||||
margin-top: 40px;
|
||||
margin-left: 40px;
|
||||
.zip {
|
||||
width: 62px;
|
||||
height: 72px;
|
||||
background-image: url(../assets/images/leveladd/zip.png);
|
||||
background-size: 100%;
|
||||
}
|
||||
.ziprit {
|
||||
margin-left: 20px;
|
||||
margin-top: -5px;
|
||||
.textop {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: #4ea6ff;
|
||||
}
|
||||
.texdown {
|
||||
.timemanag {
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
color: #878b92;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.itemdown {
|
||||
width: 352px;
|
||||
height: 48px;
|
||||
border-radius: 0px 0px 2px 2px;
|
||||
border: 1px solid #4ea6ff;
|
||||
border-top: 0;
|
||||
display: flex;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
line-height: 22px;
|
||||
.download {
|
||||
width: 176px;
|
||||
height: 48px;
|
||||
color: #ffffff;
|
||||
cursor: pointer;
|
||||
background: #409eff;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.delete {
|
||||
width: 176px;
|
||||
height: 48px;
|
||||
color: #4ea6ff;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.outime {
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
color: #878b92;
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user