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

上传附件统一样式

Browse Source
This commit is contained in:
zhangyc
2022-12-24 19:48:21 +08:00
parent 48206694f3
commit 1a64fc520d
9 changed files with 346 additions and 828 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/components/common/FJUpload.vue
View File

@@ -6,7 +6,7 @@
<button class="xkbtn" type="button">上传附件</button>
</div>
</Upload>
<div style="color: rgb(153, 155, 163);">支持.pdf,.ppt,.pptx,.doc,.docx,.xls,.xlsx,.jpg,.jpeg,.png,.gif,.zip</div>
<div class ="tips" style="color: rgb(153, 155, 163);">支持.pdf,.ppt,.pptx,.doc,.docx,.xls,.xlsx,.jpg,.jpeg,.png,.gif,.zip</div>
</div>
<div class="mbl_items12" style="margin-left: 0">
<div
@@ -80,6 +80,7 @@ onMounted(() => {
watch(files, () => {
files.value && files.value.length && emit('update:value', files.value.filter(e => e.url).map(e => e.url).join(','))
console.log(files.value.filter(e => e.url).map(e => e.url).join(','));
})
watch(props, init)

120
src/components/drawers/AddFaceteach.vue
View File

@@ -128,7 +128,7 @@
style="width: 400px; height: 40px; border-radius: 8px;"
v-model:value="duration"
></a-input-number>
<span style="margin-left: 5px; width: 30px">分钟</span>
<span style="margin-left: 5px; width: 30px">分</span>
</div>
</div>
<div class="main_item">
@@ -245,6 +245,10 @@
@click="innerPersion = !innerPersion"
>允许项目内人员临时到场参加
</a-checkbox>
</div>
<div class="btnbox">
<a-checkbox
v-model:checked="outPersion"
@click="outPersion = !outPersion"
@@ -348,20 +352,14 @@
</a-tag>
</div>
</div>
<div class="main_item">
<div class="signbox">
<span style="margin-right: 3px">附件：</span>
</div>
<div class="btnbox">
<a-upload
@change="handleChange"
:action="FILE_UPLOAD_URL"
v-model:file-list="fileList"
>
<button class="xkbtn">上传附件</button>
</a-upload>
</div>
</div>
<div class="mbl_items">
<div class="item_nam">
<span style="margin-right: 10px"></span>
</div>
<div class="item_inp">
<FJUpload v-model:value="attach" @changevalue="changevalue"/>
</div>
</div>
</div>
</div>
<div class="main_btns">
@@ -388,7 +386,7 @@ import AssessmentList from "@/components/drawers/AssessmentList.vue";
// import { toDate } from "../../api/method";、
import { addTempTask } from "../../api/indexTaskadd";
import ProjectManager from "@/components/project/ProjectManagerNew";
import FJUpload from "@/components/common/FJUpload";
import { detail } from "../../api/indexCourse";
import { queryAppraiseDetailById } from "../../api/indexInvist";
import { queryWorkDetailById } from "@/api/indexWork";
@@ -402,6 +400,7 @@ export default {
AddTest,
AssessmentList,
ProjectManager,
FJUpload,
},
props: {
addfaceteachVisible: {
@@ -497,7 +496,9 @@ export default {
innerPersion: false,
outPersion: false,
assessmentName: null,
isClick: false
isClick: false,
attach:"",
});
const clear = () => {
state.courseName = "";
@@ -520,6 +521,7 @@ export default {
state.EditEvalId = null;
state.applyFlag = "";
state.needEval = false;
state.attach="";
};
const closeDrawer = () => {
ctx.emit("update:addfaceteachVisible", false);
@@ -564,7 +566,22 @@ export default {
const showDrawerAddTest = () => {
state.addtestvisible = true;
};
// 删除文件返回参数
const changevalue = (e) => {
let arr = state.attach.split(',')
let newarr = []
for(let i=0;i<arr.length;i++){
if(i!==e){
newarr.push(arr[i])
}
}
if(newarr.length==0){
state.attach = "";
}else{
state.attach = newarr.toString()
}
console.log('changevalue', e, newarr, state.attach)
}
//查询面授
const queryFaceTeach = () => {
queryFaceDetailById(props.EditFaceId).then((res) => {
@@ -585,7 +602,14 @@ export default {
state.address = result.address;
state.before = result.beforeStart;
state.afterStartValue = result.afterStart;
state.fileList = JSON.parse(result.attach);
let arrss =result.attach.split(',')
let str = ''
for (let i = 0; i < arrss.length; i++) {
i == arrss.length - 1 ? str += arrss[i].slice(arrss[i].lastIndexOf('/') + 1) : str += arrss[i].slice(arrss[i].lastIndexOf('/') + 1) + ','
}
console.log(str)
state.attach = str;
state.onlySign =
result.completeType.split(",")[0] == "1" ? true : false;
state.completeLeave =
@@ -661,7 +685,7 @@ export default {
teacher: state.memberValue.label,
address: state.address,
applyFlag: state.applyFlag,
attach: JSON.stringify(state.fileList),
afterStart: state.afterStartValue || 0,
beforeStart: state.before || 0,
beginTime: parseInt(
@@ -679,6 +703,7 @@ export default {
offcoursePlanId: props.EditFaceId > 0 ? props.EditFaceId : 0,
testId: state.EditTestId,
duration: state.duration,
attach:state.attach,
};
console.log("obj============", obj, "6" + "9");
@@ -770,11 +795,7 @@ export default {
}
};
const handleChange = ({ file, fileList }) => {
if (file.status !== "uploading") {
console.log(file, fileList);
}
};
const showAssessment = () => {
state.assessmentVisible = true;
};
@@ -877,7 +898,7 @@ export default {
updateTask,
disabledDateTime,
clear,
handleChange,
changevalue,
showAssessment,
disabledDate,
@@ -963,7 +984,7 @@ export default {
}
}
}
.main_item2 {
display: flex;
align-items: flex-start;
@@ -1056,7 +1077,7 @@ export default {
}
.main_right {
width: 337px;
width: 400px;
.main_item {
display: flex;
@@ -1089,6 +1110,49 @@ export default {
}
}
}
.mbl_items {
display: flex;
align-items: center;
justify-content: flex-end;
margin-bottom: 10px;
.item_nam {
width: 100px;
display: flex;
align-items: center;
justify-content: flex-end;
white-space: nowrap;
.asterisk_icon {
width: 10px;
height: 10px;
margin-right: 5px;
margin-top: -15px;
}
}
.item_inp {
flex: 1;
position: relative;
.inp_num {
position: absolute;
left: 398px;
top: 10px;
}
.accessory{
margin-left: 92px;
}
}
}
.tips{
font-size: 12px;
margin-top: 10px;
}
.mbl_items12{
width: 373px;
margin-left: 10px;
}
}
}

321
src/components/drawers/AddHomework.vue
View File

@@ -7,63 +7,79 @@
<img style="width: 29px; height: 29px; cursor: pointer" src="../../assets/images/basicinfo/close.png"
@click="closeDrawer2" />
</div>
<a-form ref="formRef" name="custom-validation" :model="formState" :rules="rules" v-bind="layout"
@finish="handleFinish" @validate="handleValidate" @finishFailed="handleFinishFailed">
<div class="contentMain">
<div class="main_left">
<div class="main_item">
<div class="signbox">
<div class="sign">
<img
src="@/assets/images/coursewareManage/asterisk.png"
alt=""
/>
</div>
<span style="margin-right: 3px">作业名称：</span>
</div>
<div class="btnbox">
<a-form-item has-feedback label="作业名称" name="workName">
<a-input v-model:value="formState.workName" style="width: 400px; height: 40px; border-radius: 8px"
<a-input v-model:value="name" style="width: 400px; height: 40px; border-radius: 8px"
placeholder="请输入作业名称" autocomplete="off" show-count :maxlength="20" />
</a-form-item>
</div>
</div>
<div class="main_item">
<div class="signbox">
<div class="sign">
<img
src="@/assets/images/coursewareManage/asterisk.png"
alt=""
/>
</div>
<span style="margin-right: 3px">开始时间：</span>
</div>
<div class="btnbox">
<a-form-item has-feedback label="提交时间" name="choosedTime">
<a-range-picker :disabled-date="disabledDate" :disabled-time="disabledRangeTime" :show-time="{ format: 'HH:mm' }"
style="width: 400px; height: 40px; border-radius: 8px" v-model:value="formState.choosedTime"
format="YYYY/MM/DD HH:mm" :placeholder="[' 开始时间', ' 结束时间']" />
</a-form-item>
<a-range-picker
style="width: 400px; height: 40px; border-radius: 8px"
:show-time="{ format: 'hh:mm' }"
:disabled-date="disabledDate" :disabled-time="disabledRangeTime"
format="YYYY/MM/DD HH:mm"
v-model:value="chooseTime"
:placeholder="[' 开始时间', ' 结束时间']"
/>
</div>
</div>
<div class="main_item2">
<a-form-item has-feedback label="作业要求" name="workRequirement">
<div class="textarea">
<a-textarea v-model:value="formState.workRequirement" placeholder="请输入作业要求" autocomplete="off"
allow-clear :rows="6" show-count :maxlength="200" />
</div>
</a-form-item>
</div>
<div class="main_item">
<div class="signbox">
<div class="sign">
<img src="@/assets/images/coursewareManage/enclosure.png" alt="" />
<img
src="@/assets/images/coursewareManage/asterisk.png"
alt=""
/>
</div>
<span style="margin-right: 3px">附件：</span>
<span style="margin-right: 3px">作业要求：</span>
</div>
<div class="textarea">
<a-textarea v-model:value="workRequirement" placeholder="请输入作业要求" autocomplete="off"
allow-clear :rows="6" show-count :maxlength="200" />
</div>
</div>
<div class="mbl_items">
<div class="item_nam">
<span style="margin-right: 10px"></span>
</div>
<div class="btnbox">
<a-upload v-model:file-list="fileList" name="file" :action="FILE_UPLOAD_URL"
@change="handleChange">
<button class="xkbtn" type="button">上传附件</button>
</a-upload>
</div>
</div>
<div class="main_item" style="margin-top: -25px">
<div class="signbox"></div>
<div class="btnbox">
<span style="color: #999999">支持：pdf.ppt.pptx.doc.docx.xls.xlsx.jpeg.png.gif.zip</span>
<div class="item_inp">
<FJUpload v-model:value="attach" @changevalue="changevalue"/>
</div>
</div>
</div>
</div>
<div class="main_btns">
<a-button class="btn1" @click="closeDrawer2">取消</a-button>
<a-button class="btn2" html-type="submit" @click="cle">确定</a-button>
<a-button class="btn2" html-type="submit" @click="updteHomeWork">确定</a-button>
</div>
</a-form>
</div>
<!-- 加载动画 -->
<div class="aeLoading" :style="{ display: addLoading ? 'flex' : 'none' }">
@@ -83,9 +99,12 @@ import { ProjectEditTask, RouterEditTask } from "@/api/indexTask";
import dayjs from "dayjs";
import { addTempTask } from "../../api/indexTaskadd";
import {FILE_UPLOAD_URL} from "@/api/config";
import FJUpload from "@/components/common/FJUpload";
export default {
name: "AddHomework",
components:{
FJUpload,
},
props: {
addhomeworkVisible: {
type: Boolean,
@@ -145,70 +164,19 @@ export default {
},
},
setup(props, ctx) {
const formState = reactive({
workName: "",
workRequirement: "",
choosedTime: "",
});
const state = reactive({
name: "",
workRequirement: "",
chooseTime: [],
addLoading: false,
workEnclosureAddress: "",
isClick: false
isClick: false,
attach:"",
});
const formRef = ref();
let checkWorkName = async (_rule, value) => {
if (!value) {
return Promise.reject("请输入作业名称");
}
};
let checkWorkRequirement = async (_rule, value) => {
if (!value) {
return Promise.reject("请输入作业要求");
}
};
let checkTime = async (_rule, value) => {
if (!value.length) {
return Promise.reject("请选择时间");
}
};
const rules = {
workName: [
{
required: true,
validator: checkWorkName,
trigger: "change",
},
],
workRequirement: [
{
required: true,
validator: checkWorkRequirement,
trigger: "change",
},
],
choosedTime: [
{
required: true,
validator: checkTime,
trigger: "change",
},
],
};
// const layout = {
// labelCol: {
// span: 4,
// },
// wrapperCol: {
// span: 14,
// },
// };
const handleFinish = () => {
updteHomeWork();
};
const handleFinishFailed = () => {
message.error("handleFinishFailed");
@@ -216,83 +184,56 @@ export default {
const resetForm = () => {
// formRef.value.resetFields();
formState.workName = "";
formState.workRequirement = "";
formState.choosedTime = [];
state.name = "";
state.workRequirement = "";
state.chooseTime = [];
state.attach="";
};
const handleValidate = (...args) => {
console.log(args);
};
const beforeUpload = (file) => {
console.log("file", file);
const isJpgOrPng =
file.name.indexOf(".pdf") === -1 &&
file.name.indexOf(".ppt") === -1 &&
file.name.indexOf(".pptx") === -1 &&
file.name.indexOf(".doc") === -1 &&
file.name.indexOf(".docx") === -1 &&
file.name.indexOf(".xls") === -1 &&
file.name.indexOf(".xlsx") === -1 &&
file.name.indexOf(".jpg") === -1 &&
file.name.indexOf(".jpeg") === -1 &&
file.name.indexOf(".png") === -1 &&
file.name.indexOf(".gif") === -1 &&
file.name.indexOf(".zip") === -1;
// console.log("isJpgOrPng", isJpgOrPng);
return isJpgOrPng;
};
const handleChange = (info) => {
const isfileformat = beforeUpload(info.file);
if (isfileformat) {
fileList.value = [];
message.destroy();
return message.error("请上传正确格式附件");
}
if (info.file.status !== "uploading") {
console.log(info.file, info.fileList);
// state.workEnclosureAddress = info.fileList[0].response.data;
state.workEnclosureAddress = JSON.stringify(info.fileList);
console.log("state.workEnclosureAddress", state.workEnclosureAddress);
}
if (info.file.status === "done") {
message.success(`${info.file.name} 文件上传成功`);
console.log("info.file", info.file.response.data);
if (info.file.response && info.file.response.data) {
// console.log("fileList", fileList);
// fileList.value = [info];
// 删除文件返回参数
const changevalue = (e) => {
let arr = state.attach.split(',')
let newarr = []
for(let i=0;i<arr.length;i++){
if(i!==e){
newarr.push(arr[i])
}
} else if (info.file.status === "error") {
message.error(`${info.file.name} 文件上传失败.`);
}
};
if(newarr.length==0){
state.attach = "";
}else{
state.attach = newarr.toString()
}
console.log('changevalue', e, newarr, state.attach)
}
const fileList = ref([]);
const closeDrawer = () => {
formState.choosedTime = "";
ctx.emit("update:addhomeworkVisible", false);
ctx.emit("update:edit", false);
ctx.emit("update:EditWorkId", state.EditWorkId);
ctx.emit("update:workName", formState.workName);
console.log("state.EditWorkId==============", state.workName);
ctx.emit("update:workName", state.name);
console.log("state.EditWorkId==============", state.name);
localStorage.setItem("stageId", props.chooseStageId);
localStorage.setItem("chapterId", props.isactive);
fileList.value = [];
state.workEnclosureAddress = "";
resetForm();
};
const closeDrawer2 = () => {
formState.choosedTime = "";
ctx.emit("update:addhomeworkVisible", false);
ctx.emit("update:edit", false);
ctx.emit("update:EditWorkId", state.EditWorkId);
ctx.emit("update:workName", formState.workName);
console.log("state.EditWorkId==============", state.workName);
ctx.emit("update:workName", state.name);
console.log("state.EditWorkId==============", state.name);
localStorage.setItem("stageId", props.chooseStageId);
localStorage.setItem("chapterId", props.isactive);
fileList.value = [];
state.workEnclosureAddress = "";
resetForm();
};
@@ -303,26 +244,29 @@ export default {
state.EditWorkId = props.EditWorkId;
queryWork();
} else {
formRef.value.resetFields();
resetForm();
}
};
// 新增任务
const updteHomeWork = () => {
if(!state.name||!state.workRequirement||!state.chooseTime){
return message.warning("请输入必填项");
}
let obj = {
submitEndTime: dayjs(formState.choosedTime[1]).format(
submitEndTime: dayjs(state.chooseTime[1]).format(
"YYYY-MM-DD HH:mm"
),
submitStartTime: dayjs(formState.choosedTime[0]).format(
submitStartTime: dayjs(state.chooseTime[0]).format(
"YYYY-MM-DD HH:mm"
),
workEnclosureAddress: state.workEnclosureAddress
? state.workEnclosureAddress
workEnclosureAddress: state.attach
? state.attach
: "",
workId: props.edit ? props.EditWorkId : 0,
workName: formState.workName,
workRequirement: formState.workRequirement,
workName: state.name,
workRequirement: state.workRequirement,
};
if (props.EditWorkId > 0) {
@@ -375,18 +319,20 @@ export default {
queryWorkDetailById({ workId: props.EditWorkId })
.then((res) => {
console.log(res);
try {
fileList.value = JSON.parse(res.data.data.workEnclosureAddress);
} catch (e) {
console.log(e);
fileList.value = [];
}
formState.workName = res.data.data.workName;
formState.workRequirement = res.data.data.workRequirement;
formState.choosedTime = [
state.name = res.data.data.workName;
state.workRequirement = res.data.data.workRequirement;
state.chooseTime = [
dayjs(res.data.data.submitStartTime, "YYYY-MM-DD HH:mm"),
dayjs(res.data.data.submitEndTime, "YYYY-MM-DD HH:mm"),
];
let arrss = res.data.data.workEnclosureAddress.split(',')
let str = ''
for (let i = 0; i < arrss.length; i++) {
i == arrss.length - 1 ? str += arrss[i].slice(arrss[i].lastIndexOf('/') + 1) : str += arrss[i].slice(arrss[i].lastIndexOf('/') + 1) + ','
}
console.log(str)
state.attach = str;
state.addLoading = false;
})
.catch(() => {
@@ -470,14 +416,14 @@ export default {
const cle = () => {
let obj = {
submitEndTime: dayjs(formState.choosedTime[1]).format("YYYY-MM-DD"),
submitStartTime: dayjs(formState.choosedTime[0]).format("YYYY-MM-DD"),
submitEndTime: dayjs(state.chooseTime[1]).format("YYYY-MM-DD"),
submitStartTime: dayjs(state.chooseTime[0]).format("YYYY-MM-DD"),
workEnclosureAddress: state.workEnclosureAddress
? state.workEnclosureAddress
: "",
workId: props.EditWorkId > 0 ? props.EditWorkId : 0,
workName: formState.workName,
workRequirement: formState.workRequirement,
workName: state.name,
workRequirement: state.workRequirement,
};
if (props.face) {
createWorkTask(obj).then((res) => {
@@ -517,16 +463,15 @@ export default {
FILE_UPLOAD_URL,
closeDrawer,
closeDrawer2,
handleChange,
changevalue,
fileList,
formState,
handleFinish,
updteHomeWork,
handleFinishFailed,
resetForm,
handleValidate,
formRef,
// layout,
rules,
cle,
...toRefs(state),
};
@@ -601,14 +546,45 @@ export default {
}
}
}
.mbl_items {
display: flex;
align-items: center;
justify-content: flex-end;
margin-bottom: 10px;
.item_nam {
width: 100px;
display: flex;
align-items: center;
justify-content: flex-end;
white-space: nowrap;
.asterisk_icon {
width: 10px;
height: 10px;
margin-right: 5px;
margin-top: -15px;
}
}
.item_inp {
flex: 1;
position: relative;
margin-left: 19px;
.inp_num {
position: absolute;
left: 398px;
top: 10px;
}
}
}
.main_item2 {
display: flex;
align-items: flex-start;
margin-bottom: 32px;
.textarea {
width: 400px;
width: 373px;
.ant-input {
width: 100%;
@@ -677,6 +653,7 @@ export default {
color: #fff;
margin-top: 16px;
margin-bottom: 60px;
margin-left: 124px;
}
}
}

8
src/components/drawers/AddOnline.vue
View File

@@ -323,6 +323,14 @@ export default {
align: "center",
ellipsis: true,
},
{
title: "时长",
dataIndex:"studyTime",
key: "studyTime",
width: "15%x",
align: "center",
ellipsis: true,
},
// {
// title: "创建时间",
// dataIndex: "createTime",

2
src/components/drawers/AddTest.vue
View File

@@ -102,7 +102,7 @@
<div class="btnbox">
<a-range-picker
style="width: 400px; height: 40px; border-radius: 8px"
show-time="{format:'hh:mm'}"
:show-time="{format:'hh:mm'}"
:disabled-date="disabledDate" :disabled-time="disabledRangeTime"
format="YYYY/MM/DD HH:mm"
v-model:value="test.chooseTime"

65
src/components/student/CommonStudent.vue
View File

@@ -307,6 +307,7 @@
<slot></slot>
</div>
</div>
<!--
<a-modal
v-model:visible="stageVisible"
width="1000px"
@@ -314,7 +315,7 @@
@ok="handleStageOk"
>
<div>
{{ type === 1 ? "选择阶段" : "选择关卡" }}
{{ type === 1 ? "选择阶段" : "" }}
<a-select
style="width: 150px"
:placeholder="type === 1 ? '选择阶段' : '选择关卡'"
@@ -327,6 +328,63 @@
</a-select>
</div>
</a-modal>
-->
<a-modal
style="padding: 0"
:closable="true"
:visible="stageVisible"
:footer="null"
centered="true"
@ok="handleStageOk"
wrapClassName="changeModal"
>
<div class="con">
<div class="header">
<div class="inhe">
<div class="tz"> {{ type === 1 ? "选择阶段" : "添加学员到关卡" }}</div>
<div class="mg" @click="closeChangeModal"></div>
</div>
</div>
<div class="mid">
<div class="inher">
<!-- <div class="cur">当前关卡：关卡2</div> -->
<div class="select">
<a-select
style="width: 400px"
:placeholder="type === 1 ? '选择阶段' : '选择关卡'"
v-model:value="selectsData.stageId"
className="cus-select"
>
<a-select-option v-for="(item, i) in stageIds" :key="i" :value="item.id"
>{{ item.name || "默认" }}
</a-select-option>
</a-select>
</div>
<span style="color: #999999;margin-left:10px;"><minus-circle-outlined/>已在其他关卡的学员，不会被添加到该关卡</span>
<div class="btn" style="margin-top:50px;">
<button
class="sameb btn1"
@click="closeChangeModal"
style="cursor: pointer"
>
取消
</button>
<button
class="sameb btn2"
@click="handleStageOk"
style="cursor: pointer"
>
确定
</button>
</div>
</div>
</div>
</div>
</a-modal>
</template>
<script setup>
import { computed, defineEmits, defineProps, ref, watch } from "vue";
@@ -334,6 +392,7 @@ import { useStore } from "vuex";
import { useBoeApiPage } from "@/api/request";
import { AUDIENCE_LIST, USER_LIST } from "@/api/ThirdApi";
import { saveStu } from "@/api/index1";
const store = useStore();
const emit = defineEmits({});
const props = defineProps({
@@ -344,6 +403,7 @@ const props = defineProps({
default: () => [],
},
});
const person = ref(false);
// const dept =ref(false)
const group = ref(false);
@@ -511,6 +571,9 @@ const closeDrawer = () => {
nameSearch.value.keyword ="";
};
const closeChangeModal = () => {
stageVisible.value = false;
};
const openDrawer = () => {
visiable.value = true;