|
|
|
|
@ -8,54 +8,67 @@ import { |
|
|
|
|
delObjectContents, |
|
|
|
|
addObjectContents, |
|
|
|
|
getObjectContent, |
|
|
|
|
getObjectType, |
|
|
|
|
} from '@/api/user/object' |
|
|
|
|
import { useRoute } from 'vue-router' |
|
|
|
|
import { ITEM_RENDER_EVT } from 'element-plus/es/components/virtual-list/src/defaults.mjs' |
|
|
|
|
const route = useRoute() |
|
|
|
|
// const router = useRouter() |
|
|
|
|
const courseId = ref(0) |
|
|
|
|
const courseId = ref() |
|
|
|
|
// 各项目标 |
|
|
|
|
const data = ref({}) |
|
|
|
|
// 总目标 |
|
|
|
|
const params = ref({ |
|
|
|
|
content: '', |
|
|
|
|
content: '请添加整体目标', |
|
|
|
|
id: '', |
|
|
|
|
objectiveId: '', |
|
|
|
|
}) |
|
|
|
|
// 获取目标列表 |
|
|
|
|
const list = ref([]) |
|
|
|
|
const getObject = async () => { |
|
|
|
|
const res = await getObjectList({ id: courseId.value }) |
|
|
|
|
console.log(res, 'objectres') |
|
|
|
|
data.value = res.data[0].courseObjectivesTrees |
|
|
|
|
params.value = res.data[0].contents[0] |
|
|
|
|
console.log(params.value, 'params.value') |
|
|
|
|
console.log(data, 'data'); |
|
|
|
|
|
|
|
|
|
console.log(res.data, 'res.data[0].contents[0]'); |
|
|
|
|
|
|
|
|
|
Object.assign(params.value, res.data[0].contents[0]) |
|
|
|
|
// params.value = res.data[0].contents[0] |
|
|
|
|
|
|
|
|
|
list.value = data.value.map(item => item.contents).flat() |
|
|
|
|
console.log(list.value, 'list.value '); |
|
|
|
|
|
|
|
|
|
console.log(data.value, 'data.value') |
|
|
|
|
// content.value = res.data[0].contents[0].content |
|
|
|
|
} |
|
|
|
|
// console.log(content.value, 'content.value') |
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
// 获取目标类型 |
|
|
|
|
// const type = ref({ |
|
|
|
|
// id: '', |
|
|
|
|
// typeName: '', |
|
|
|
|
// }) |
|
|
|
|
// const getType = async () => { |
|
|
|
|
// const res = await getObjectType() |
|
|
|
|
// type.value = res.data.slice(1, 5) |
|
|
|
|
// console.log(type.value, 'typeres') |
|
|
|
|
// } |
|
|
|
|
const type = ref({ |
|
|
|
|
id: '', |
|
|
|
|
name: '', |
|
|
|
|
}) |
|
|
|
|
const getType = async () => { |
|
|
|
|
console.log(courseId, 'typecourse') |
|
|
|
|
const res = await getObjectType(courseId.value) |
|
|
|
|
|
|
|
|
|
type.value = res.data |
|
|
|
|
console.log(res, 'typeres') |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
onMounted(() => { |
|
|
|
|
courseId.value = route.query.id |
|
|
|
|
console.log(courseId.value, 'courseid.vlue') |
|
|
|
|
getObject() |
|
|
|
|
getType() |
|
|
|
|
}) |
|
|
|
|
// 修改目标内容 |
|
|
|
|
const isEditing = ref(false) |
|
|
|
|
const content = ref('') |
|
|
|
|
const updateContent = () => { |
|
|
|
|
isEditing.value = true |
|
|
|
|
content.value = params.value.content |
|
|
|
|
} |
|
|
|
|
const content = ref('') |
|
|
|
|
|
|
|
|
|
// 保存修改 |
|
|
|
|
const saveContent = async () => { |
|
|
|
|
console.log(params.value.content, ' params.value.content') |
|
|
|
|
@ -73,6 +86,9 @@ const saveContent = async () => { |
|
|
|
|
}) |
|
|
|
|
.then(async () => { |
|
|
|
|
params.value.content = content.value |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const res = await updateContents({ |
|
|
|
|
id: params.value.id, |
|
|
|
|
objectiveId: params.value.objectiveId, |
|
|
|
|
@ -81,8 +97,10 @@ const saveContent = async () => { |
|
|
|
|
console.log(res, 'res') |
|
|
|
|
ElMessage.success('保存成功！') |
|
|
|
|
isEditing.value = false |
|
|
|
|
}) |
|
|
|
|
.catch(() => { |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
}, () => { |
|
|
|
|
// 点击取消后的操作 |
|
|
|
|
ElMessage.info('您已取消操作') |
|
|
|
|
}) |
|
|
|
|
@ -101,6 +119,9 @@ const delObject = async (id: any) => { |
|
|
|
|
await delObjectContents(id).then(() => { |
|
|
|
|
ElMessage.success('删除成功') |
|
|
|
|
getObject() |
|
|
|
|
}).catch((err: any) => { |
|
|
|
|
// console.log(id, 'id') |
|
|
|
|
ElMessage.error(err.response.data.message) |
|
|
|
|
}) |
|
|
|
|
} |
|
|
|
|
// 添加目标 |
|
|
|
|
@ -126,7 +147,9 @@ const objectiveIds = ref(0) |
|
|
|
|
const addObject = (item: any) => { |
|
|
|
|
// console.log(id, 'id') |
|
|
|
|
dialogVisible.value = true |
|
|
|
|
|
|
|
|
|
flog.value = false |
|
|
|
|
type.value.name = '' |
|
|
|
|
formData.value.description = '' |
|
|
|
|
// updateDisabledStatus() |
|
|
|
|
objectiveIds.value = item.id |
|
|
|
|
@ -157,6 +180,7 @@ const submit = async () => { |
|
|
|
|
} else { |
|
|
|
|
console.log(objectiveIds, 'objectiveIds') |
|
|
|
|
await addObjectContents({ |
|
|
|
|
// id: type.value.id, |
|
|
|
|
objectiveId: objectiveIds.value, |
|
|
|
|
content: formData.value.description, |
|
|
|
|
}) |
|
|
|
|
@ -181,13 +205,7 @@ const submit = async () => { |
|
|
|
|
<template #header> |
|
|
|
|
<div class="card-header"> |
|
|
|
|
<span>整体目标</span> |
|
|
|
|
<el-button |
|
|
|
|
type="primary" |
|
|
|
|
:icon="Edit" |
|
|
|
|
circle |
|
|
|
|
plain |
|
|
|
|
@click="updateContent" |
|
|
|
|
></el-button> |
|
|
|
|
<el-button type="primary" :icon="Edit" circle plain @click="updateContent"></el-button> |
|
|
|
|
</div> |
|
|
|
|
</template> |
|
|
|
|
<div class="el-card__body" style=""> |
|
|
|
|
@ -204,7 +222,7 @@ const submit = async () => { |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<div class="typeObject"> |
|
|
|
|
<ul v-for="item in data" :key="item.id"> |
|
|
|
|
<!-- <ul v-for="item in data" :key="item.id"> |
|
|
|
|
<li> |
|
|
|
|
<div class="all"> |
|
|
|
|
<div class="left"> |
|
|
|
|
@ -243,24 +261,36 @@ const submit = async () => { |
|
|
|
|
</div> |
|
|
|
|
<el-divider style="margin: 0; width: 100%" /> |
|
|
|
|
</li> |
|
|
|
|
</ul> |
|
|
|
|
<el-dialog |
|
|
|
|
v-if="dialogVisible" |
|
|
|
|
v-model="dialogVisible" |
|
|
|
|
:title="flog ? '编辑' : '新增'" |
|
|
|
|
width="500" |
|
|
|
|
:before-close="handleClose" |
|
|
|
|
> |
|
|
|
|
<el-form |
|
|
|
|
:model="formData" |
|
|
|
|
label-width="auto" |
|
|
|
|
style="max-width: 600px" |
|
|
|
|
> |
|
|
|
|
<el-form-item label="内容" prop="description"> |
|
|
|
|
<el-input |
|
|
|
|
v-model="formData.description" |
|
|
|
|
placeholder="请输入内容" |
|
|
|
|
></el-input> |
|
|
|
|
</ul> --> |
|
|
|
|
<el-scrollbar> |
|
|
|
|
<li v-for="(obj, i) in list" :key="obj.id"> |
|
|
|
|
<span>目标{{ i + 1 }}：{{ obj.content }}</span> |
|
|
|
|
<div class="icon"> |
|
|
|
|
<el-button type="primary" :icon="Edit" circle size="small" plain @click="updateObjectContent(obj.id)" /> |
|
|
|
|
<el-button type="danger" :icon="Delete" circle size="small" plain @click="delObject(obj.id)" /> |
|
|
|
|
<span>【{{ data.name }}】</span> |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
</li> |
|
|
|
|
</el-scrollbar> |
|
|
|
|
<el-button @click="addObject" circle size="small" type="primary" plain class="addbutton"> |
|
|
|
|
<el-icon :size="15"> |
|
|
|
|
<Plus /> |
|
|
|
|
</el-icon> |
|
|
|
|
</el-button> |
|
|
|
|
<el-dialog v-if="dialogVisible" v-model="dialogVisible" :title="flog ? '编辑' : '新增'" width="500" |
|
|
|
|
:before-close="handleClose"> |
|
|
|
|
<el-form :model="type"> |
|
|
|
|
<el-form-item label="目标类别"> |
|
|
|
|
<el-select v-model="type.name" placeholder="请选择目标类别"> |
|
|
|
|
<el-option v-for="item in type" :key="item.id" :label="item.name" :value="item.name"></el-option> |
|
|
|
|
</el-select> |
|
|
|
|
</el-form-item> |
|
|
|
|
</el-form> |
|
|
|
|
|
|
|
|
|
<el-form :model="formData" label-width="auto" style="max-width: 600px"> |
|
|
|
|
<el-form-item label="目标内容" prop="description"> |
|
|
|
|
<el-input v-model="formData.description" placeholder="请输入内容"></el-input> |
|
|
|
|
</el-form-item> |
|
|
|
|
</el-form> |
|
|
|
|
<template #footer> |
|
|
|
|
@ -268,6 +298,7 @@ const submit = async () => { |
|
|
|
|
<el-button @click="close">取消</el-button> |
|
|
|
|
<el-button type="primary" @click="submit">确定</el-button> |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
</template> |
|
|
|
|
</el-dialog> |
|
|
|
|
</div> |
|
|
|
|
@ -275,6 +306,10 @@ const submit = async () => { |
|
|
|
|
</div> |
|
|
|
|
</template> |
|
|
|
|
<style lang="scss" scoped> |
|
|
|
|
li { |
|
|
|
|
list-style-type: none; //去掉标签默认的左边符号 |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.el-tabs__item { |
|
|
|
|
padding: 0 50px; |
|
|
|
|
} |
|
|
|
|
@ -367,65 +402,81 @@ const submit = async () => { |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.typeObject { |
|
|
|
|
width: 70%; |
|
|
|
|
// height: 80%; |
|
|
|
|
text-align: center; |
|
|
|
|
|
|
|
|
|
// align-items: center; |
|
|
|
|
ul:nth-child(-n + 3) { |
|
|
|
|
border-bottom: none; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
ul { |
|
|
|
|
width: 90%; |
|
|
|
|
width: 60%; |
|
|
|
|
height: 80%; |
|
|
|
|
// text-align: center; |
|
|
|
|
border: 1px solid #dcdfe6; |
|
|
|
|
margin-right: 35px; |
|
|
|
|
padding: 20px; |
|
|
|
|
position: relative; |
|
|
|
|
|
|
|
|
|
// box-shadow: 1px -5px 6px rgba(153, 150, 150, 0.5); |
|
|
|
|
.icon { |
|
|
|
|
margin-left: 700px; |
|
|
|
|
// display: inline-block; |
|
|
|
|
// position: absolute; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.all { |
|
|
|
|
display: flex; |
|
|
|
|
width: 100%; |
|
|
|
|
// box-shadow: 1px 1px 6px rgba(153, 150, 150, 0.5); |
|
|
|
|
// align-content: center; |
|
|
|
|
.addbutton { |
|
|
|
|
position: absolute; |
|
|
|
|
right: 20px; |
|
|
|
|
bottom: 20px; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.left { |
|
|
|
|
width: 20%; |
|
|
|
|
display: flex; |
|
|
|
|
justify-content: center; |
|
|
|
|
border-right: 1px solid #dcdfe6; |
|
|
|
|
flex-wrap: wrap; |
|
|
|
|
align-content: center; |
|
|
|
|
letter-spacing: 1px; |
|
|
|
|
// align-items: center; |
|
|
|
|
// ul:nth-child(-n + 3) { |
|
|
|
|
// border-bottom: none; |
|
|
|
|
// } |
|
|
|
|
|
|
|
|
|
.icon { |
|
|
|
|
margin-left: 10px; |
|
|
|
|
} |
|
|
|
|
// ul { |
|
|
|
|
// width: 90%; |
|
|
|
|
// border: 1px solid #dcdfe6; |
|
|
|
|
|
|
|
|
|
.icon:hover { |
|
|
|
|
cursor: pointer; |
|
|
|
|
color: red; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
// // box-shadow: 1px -5px 6px rgba(153, 150, 150, 0.5); |
|
|
|
|
// } |
|
|
|
|
|
|
|
|
|
.objectdetails { |
|
|
|
|
padding-right: 20px; |
|
|
|
|
width: 100%; |
|
|
|
|
// border: 1px solid #8a8b99; |
|
|
|
|
// .all { |
|
|
|
|
// display: flex; |
|
|
|
|
// width: 100%; |
|
|
|
|
// // box-shadow: 1px 1px 6px rgba(153, 150, 150, 0.5); |
|
|
|
|
// // align-content: center; |
|
|
|
|
|
|
|
|
|
li { |
|
|
|
|
width: 100%; |
|
|
|
|
display: flex; |
|
|
|
|
justify-content: space-between; |
|
|
|
|
flex-wrap: wrap; |
|
|
|
|
// .left { |
|
|
|
|
// width: 20%; |
|
|
|
|
// display: flex; |
|
|
|
|
// justify-content: center; |
|
|
|
|
// border-right: 1px solid #dcdfe6; |
|
|
|
|
// flex-wrap: wrap; |
|
|
|
|
// align-content: center; |
|
|
|
|
align-items: center; |
|
|
|
|
line-height: 1; |
|
|
|
|
margin-top: 2px; |
|
|
|
|
letter-spacing: 1px; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
// letter-spacing: 1px; |
|
|
|
|
|
|
|
|
|
// .icon { |
|
|
|
|
// margin-left: 10px; |
|
|
|
|
// } |
|
|
|
|
|
|
|
|
|
// .icon:hover { |
|
|
|
|
// cursor: pointer; |
|
|
|
|
// color: red; |
|
|
|
|
// } |
|
|
|
|
// } |
|
|
|
|
|
|
|
|
|
// .objectdetails { |
|
|
|
|
// padding-right: 20px; |
|
|
|
|
// width: 100%; |
|
|
|
|
// // border: 1px solid #8a8b99; |
|
|
|
|
|
|
|
|
|
// li { |
|
|
|
|
// width: 100%; |
|
|
|
|
// display: flex; |
|
|
|
|
// justify-content: space-between; |
|
|
|
|
// flex-wrap: wrap; |
|
|
|
|
// // align-content: center; |
|
|
|
|
// align-items: center; |
|
|
|
|
// line-height: 1; |
|
|
|
|
// margin-top: 2px; |
|
|
|
|
// letter-spacing: 1px; |
|
|
|
|
// } |
|
|
|
|
// } |
|
|
|
|
// } |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
lijiaqi