提交 3f8eaea0 authored 作者: matian's avatar matian

样式优化

上级 d20fd121
......@@ -10,10 +10,10 @@ const props = withDefaults(defineProps<Props>(), { list: () => [] })
const listOptions = computed(() => {
return {
columns: [
{ label: '课程图片', slots: 'table-img', align: 'center' },
{ label: '课程名称', prop: 'name', align: 'center' },
{ label: '分类名称', prop: 'classification_name', align: 'center' },
{ label: '所在章', prop: 'big', align: 'center' },
{ label: '课程图片', slots: 'table-img', align: 'center', minWidth: '100' },
{ label: '课程名称', prop: 'name', align: 'center', minWidth: '100' },
{ label: '分类名称', prop: 'classification_name', align: 'center', minWidth: '200' },
{ label: '所在章', prop: 'big', align: 'center', minWidth: '200' },
{ label: '所在小节', prop: 'small', align: 'center' },
{ label: '创建日期', prop: 'created_time', align: 'center' },
{ label: '操作', slots: 'table-operate', align: 'center' }
......@@ -27,7 +27,7 @@ const listOptions = computed(() => {
<AppCard :title="title">
<AppList v-bind="listOptions" ref="appList" stripe>
<template #table-img="{ row }: { row: CourseType }">
<img :src="row.cover" style="width: 100px; display: block" />
<img :src="row.cover" style="width: 100px" />
</template>
<template #table-operate="{ row }: { row: CourseType }">
<router-link :to="`/course/my/view?id=${row.id}`" v-if="row.auth_view">
......
......@@ -26,6 +26,7 @@ if (props.url?.indexOf('.pdf') !== -1 || props.url?.indexOf('.txt') !== -1) {
</script>
<template>
<el-card>
<div class="max-w-h">
<iframe v-if="isShowType === 1" :src="`https://view.officeapps.live.com/op/view.aspx?src=${props.url}`"></iframe>
<embed :src="props.url" v-else-if="isShowType === 2" />
......@@ -48,6 +49,7 @@ if (props.url?.indexOf('.pdf') !== -1 || props.url?.indexOf('.txt') !== -1) {
<div class="zip_tips">* 该文件格式暂不支持预览</div>
</div>
</div>
</el-card>
</template>
<style lang="scss" scoped>
.max-w-h {
......
......@@ -119,6 +119,7 @@ const handleSave = () => {
resource_id: resource_id
}
createCharacter(params).then(() => {
console.log('00000')
emit('update:isShowExamDialog', false)
emit('create')
})
......@@ -178,5 +179,6 @@ const typeFilter = () => {
display: flex;
justify-content: flex-end;
margin-bottom: -20px;
cursor: pointer;
}
</style>
......@@ -26,7 +26,7 @@ const isEdit = ref(false)
const videoUrl = ref('')
const sectionName = ref('')
const defaultExpandedKeys: any = ref([])
const flag = ref(false)
const btnList = [
{
btn_name: '视频',
......@@ -61,6 +61,7 @@ const defaultProps = {
children: 'children',
label: 'name'
}
// 获取章节列表
onMounted(() => {
handleChapterList()
......@@ -68,8 +69,9 @@ onMounted(() => {
const handleChapterList = () => {
getCharacter({ course_id: id, type: 'tree' }).then((res: any) => {
dataSource.value = res.data[0]?.children
console.log(dataSource, 'dataSource')
if (flag.value === false) {
defaultExpandedKeys.value = [dataSource.value[0]?.id]
}
dataSource.value?.forEach((item: any) => {
if (item.children.length) {
item.children.forEach((it: any) => {
......@@ -95,6 +97,7 @@ const handleAddSection = (node: any) => {
chapterID.value = node.key
isShowSectionDialog.value = true
isEdit.value = false
flag.value = true
defaultExpandedKeys.value = [node.key]
}
//编辑章节
......@@ -127,6 +130,8 @@ const handleAddDialog = (node: any, item: any) => {
chapterID.value = node.key
chapterName.value = node.label
btnInfo.value = item
flag.value = true
defaultExpandedKeys.value = [node.key]
if (item.resource_type === '6') {
......@@ -252,11 +257,12 @@ const nodeType = (node: any) => {
}
}
const handleNodeExpand = (data: any) => {
console.log(data, '0000000')
flag.value = true
defaultExpandedKeys.value = [data.id]
console.log(defaultExpandedKeys.value)
}
const handleNodeCollapse = () => {
flag.value = false
defaultExpandedKeys.value = []
}
</script>
......
......@@ -164,7 +164,11 @@ const copyCourse = () => {
</script>
<template>
<div class="tool-btn-box" v-if="$route.query.id" style="margin-bottom: 20px">
<div class="tool-btn-box" v-if="route.query.id" style="margin-bottom: 20px">
<router-link :to="`/course/update-course?id=${route.query.id}`">
<div class="btn-item">编辑课程信息</div>
</router-link>
<div v-if="props.data.auth_authorized" class="btn-item" @click="dialogVisibleAuthorize = true">授权</div>
<div v-if="props.data.auth_copy" class="btn-item" @click="copyCourse">复制</div>
<div v-if="props.data.auth_department" class="btn-item" @click="handleDepartment">
......
......@@ -119,10 +119,13 @@ const liveOptions = computed(() => {
<img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/center_resource/course-view-icon15.png" />
<div>
<div class="label">课程授权信息</div>
<div v-if="props.data.auth_departments === []">
<div class="value" v-for="(item, index) in props.data.auth_departments" :key="index">
{{ item.department_name }}
</div>
</div>
<div class="value" v-else>暂无</div>
</div>
</div>
</div>
</div>
......@@ -235,8 +238,8 @@ const liveOptions = computed(() => {
}
.editor {
width: 100%;
min-height: 200px;
max-height: 200px;
min-height: 50px;
max-height: 100px;
background: rgb(239, 239, 239);
overflow-y: auto;
text-indent: 2em;
......
......@@ -99,6 +99,17 @@ const basicInfo = computed((): IBasicInfo[] => {
})
return basicList
})
const statusStyle = (item: any) => {
if (item.label === '是否有效') {
if (item.value === '有效') {
return 'color:#1ab226'
} else {
return 'color:#aa1941'
}
} else {
return ''
}
}
</script>
<template>
<div class="top-info">
......@@ -114,7 +125,9 @@ const basicInfo = computed((): IBasicInfo[] => {
<img :src="item.icon" />
<div class="item-right">
<div class="label">{{ item.label }}</div>
<div class="value">{{ item.value || '-' }}</div>
<div class="value" :style="statusStyle(item)">
{{ item.value || '-' }}
</div>
</div>
</div>
</div>
......
......@@ -74,6 +74,7 @@ const videoWidth = (h: number) => {
id="video_con"
class="video_con"
></AppVideoPlayer>
<div class="chapter_con">
<ViewCourseChapter
:style="{ height: chapterHeight + 'px' }"
......
<script setup lang="ts">
import { getCharacter } from '../api'
// import ViewCourseChapter from '../components/ViewCourseChapter.vue'
import ViewCourseChapter from '../components/ViewCourseChapter.vue'
import ViewDetailsVideo from '../components/ViewDetailsVideo.vue'
import PreviewFiles from '@/components/base/PreviewFiles.vue'
......@@ -228,21 +228,36 @@ const handleExamDetail = (row: any) => {
:chapterTree="chapterTree"
class="video_con"
></ViewDetailsVideo>
<el-empty description="暂无数据" v-else />
<div v-else style="display: flex">
<el-empty description="暂无数据" style="width: 85%" />
<ViewCourseChapter :isBlack="true" :data="chapterTree" style="max-height: 500px"></ViewCourseChapter>
</div>
</div>
<div class="content-bottom">
<el-tabs :lazy="true" v-model="activeName" class="demo-tabs">
<el-tab-pane label="课件" name="1">
<PreviewFiles v-for="item in resourceData.courseware" :key="item.id" :url="item.url"></PreviewFiles>
<PreviewFiles
v-for="item in resourceData.courseware"
:key="item.id"
:url="item.url"
style="margin-top: 10px"
></PreviewFiles>
<el-empty description="暂无数据" v-if="!resourceData.courseware.length" />
</el-tab-pane>
<el-tab-pane label="教案" name="2">
<PreviewFiles :url="item.url" v-for="item in resourceData.lessonPlan" :key="item.id"></PreviewFiles>
style="margin-top: 10px"
<el-empty description="暂无数据" v-if="!resourceData.lessonPlan.length" />
</el-tab-pane>
<el-tab-pane label="资料" name="3">
<PreviewFiles :url="item.url" v-for="item in resourceData.data" :key="item.id"></PreviewFiles>
<PreviewFiles
:url="item.url"
v-for="item in resourceData.data"
:key="item.id"
style="margin-top: 10px"
></PreviewFiles>
<el-empty description="暂无数据" v-if="!resourceData.data.length" />
</el-tab-pane>
<el-tab-pane label="作业" name="4">
......@@ -262,7 +277,7 @@ const handleExamDetail = (row: any) => {
<el-tab-pane label="直播" name="6">
<AppList v-bind="liveOptions">
<template #table-operate="{ row }">
<el-button plain @click="goLive(row.join_url)">查看</el-button>
<el-button type="primary" plain @click="goLive(row.join_url)">查看</el-button>
</template>
</AppList>
</el-tab-pane>
......
......@@ -50,7 +50,9 @@ const fileType = ['doc', 'docx', 'xls', 'xlsx', 'pdf', 'ppt', 'pptx', 'mp3', 'mp
/>
<div class="text-box">
<div class="name">状态</div>
<div class="value active">{{ props.data?.status_name }}</div>
<div :class="props.data?.status == '1' ? 'value active' : 'value inactive'">
{{ props.data?.status_name }}
</div>
</div>
</div>
<div class="i-items">
......@@ -175,6 +177,9 @@ const fileType = ['doc', 'docx', 'xls', 'xlsx', 'pdf', 'ppt', 'pptx', 'mp3', 'mp
&.active {
color: #1ab226;
}
&.inactive {
color: #aa1941;
}
}
}
}
......
......@@ -51,7 +51,9 @@ const fileType = ['doc', 'docx', 'xls', 'xlsx', 'pdf', 'ppt', 'pptx', 'mp3', 'mp
/>
<div class="text-box">
<div class="name">状态</div>
<div class="value active">{{ props.data?.status_name }}</div>
<div :class="props.data?.status == '1' ? 'value active' : 'value inactive'">
{{ props.data?.status_name }}
</div>
</div>
</div>
<div class="i-items">
......@@ -176,6 +178,9 @@ const fileType = ['doc', 'docx', 'xls', 'xlsx', 'pdf', 'ppt', 'pptx', 'mp3', 'mp
&.active {
color: #1ab226;
}
&.inactive {
color: #aa1941;
}
}
}
}
......
......@@ -51,7 +51,9 @@ const fileType = ['doc', 'docx', 'xls', 'xlsx', 'pdf', 'ppt', 'pptx', 'mp3', 'mp
/>
<div class="text-box">
<div class="name">状态</div>
<div class="value active">{{ props.data?.status_name }}</div>
<div :class="props.data?.status == '1' ? 'value active' : 'value inactive'">
{{ props.data?.status_name }}
</div>
</div>
</div>
<div class="i-items">
......@@ -176,6 +178,9 @@ const fileType = ['doc', 'docx', 'xls', 'xlsx', 'pdf', 'ppt', 'pptx', 'mp3', 'mp
&.active {
color: #1ab226;
}
&.inactive {
color: #aa1941;
}
}
}
}
......
......@@ -46,7 +46,9 @@ const props = defineProps(['data'])
/>
<div class="text-box">
<div class="name">状态</div>
<div :class="props.data.status == '1' ? 'value active' : 'value'">{{ props.data.status_name }}</div>
<div :class="props.data.status == '1' ? 'value active' : 'value inactive'">
{{ props.data.status_name }}
</div>
</div>
</div>
<div class="i-items">
......@@ -172,6 +174,9 @@ const props = defineProps(['data'])
&.active {
color: #1ab226;
}
&.inactive {
color: #aa1941;
}
}
}
}
......
......@@ -59,12 +59,10 @@ const handleUpdate = () => {
<template>
<AppCard title="字典列表">
<AppList v-bind="listOptions" ref="appList" style="margin-top: 30px">
<el-row>
<el-button type="primary" @click="handleAdd" v-permission="'v1-backend-data-dictionary-value-create'"
>新增</el-button
>
</el-row>
<AppList v-bind="listOptions" ref="appList">
<template #table-operate="{ row }">
<el-space>
<el-link
......
<script lang="ts" setup>
import type { FormInstance } from 'element-plus'
import { getSuggestionDetail, replySuggestion } from '../api'
const emit = defineEmits<Emits>()
const ruleFormRef = ref<FormInstance>()
// 封面类型
// 封面状态
const form = reactive({
desc: '',
detail: '',
answer: ''
const form: any = reactive({
title: '',
files: [],
content: '',
reply: ''
})
defineProps({
const rules = {
reply: [{ required: true, message: '请输入我的答复', trigger: 'blur' }]
}
const props = defineProps({
isShowDialog: {
type: Boolean,
required: true
},
id: {
type: String,
required: true
},
status: {
type: String,
required: true
}
})
interface Emits {
......@@ -26,36 +38,63 @@ const handleCancel = () => {
emit('update:isShowDialog', false)
}
// 确定
const handleConfirm = () => {
const handleConfirm = async (formEl: FormInstance | undefined) => {
if (!formEl) return
await formEl.validate(valid => {
if (valid) {
replySuggestion({ id: props.id, reply: form.reply }).then(() => {
emit('update:isShowDialog', false)
})
}
})
}
getSuggestionDetail({ id: props.id }).then(res => {
Object.keys(form).forEach(key => {
form[key] = res.data[key]
})
form.files = JSON.parse(form.files)
})
</script>
<template>
<el-dialog :model-value="isShowDialog" draggable :before-close="handleCancel" width="50%">
<el-form :model="form" ref="ruleFormRef" label-width="100px">
<el-dialog :model-value="isShowDialog" draggable :before-close="handleCancel" width="30%">
<el-form :model="form" ref="ruleFormRef" :rules="rules" label-width="100px">
<el-row>
<el-col :span="10"> <el-form-item label="封面类型:" prop="type"> 投诉建议人:lisi </el-form-item></el-col>
<el-col :span="10"> <el-form-item label="封面类型:" prop="type"> 提交时间:2022-07-19 </el-form-item></el-col>
<el-col :span="10">
<el-form-item label="投诉建议人:" prop="type">
{{ form.sso_id_name }}
</el-form-item>
</el-col>
<el-col :span="10">
<el-form-item label="提交时间:" prop="type"> {{ form.created_time }} </el-form-item>
</el-col>
<el-divider border-style="dashed" />
</el-row>
<el-divider border-style="desdashedc" />
<el-form-item label="问题描述:" prop="desc">
<el-input v-model="form.desc" autosize type="textarea" placeholder="Please input" disabled />
<el-form-item label="问题描述:" prop="title">
<el-input v-model="form.title" autosize type="textarea" placeholder="Please input" disabled />
</el-form-item>
<el-form-item label="问题详情:" prop="detail">
<el-input v-model="form.detail" autosize type="textarea" placeholder="Please input" disabled />
<el-form-item label="问题详情:" prop="content">
<el-input v-model="form.content" autosize type="textarea" placeholder="Please input" disabled />
</el-form-item>
<el-form-item label="相关附件:" prop="type">
<a href="1">11</a>
<el-form-item label="相关附件:" prop="files">
<div v-for="(item, index) in form.files" :key="index">
<a :href="item.url" style="color: #aa1941" target="_blank">{{ item.name }}</a>
</div>
</el-form-item>
<el-divider border-style="dashed" />
<el-form-item label="我的答复:" prop="answer">
<el-input v-model="form.answer" autosize type="textarea" placeholder="Please input" />
<el-form-item label="我的答复:" prop="reply">
<el-input
v-model="form.reply"
autosize
type="textarea"
placeholder="Please input"
:disabled="props.status !== '1'"
/>
</el-form-item>
</el-form>
<template #footer>
<template #footer v-if="props.status === '1'">
<span>
<el-button @click="handleCancel">取消</el-button>
<el-button type="primary" @click="handleConfirm">确定</el-button>
<el-button type="primary" @click="handleConfirm(ruleFormRef)">确定</el-button>
</span>
</template>
</el-dialog>
......
<script setup lang="ts">
import DealDialog from '../components/DealDialog.vue'
import { getSuggestionList, getUserList } from '../api'
import { getUserList } from '../api'
// getSuggestionList
const appList = ref()
const isShowDialog = ref(false)
const id = ref('')
const status = ref('')
const userList: any = ref([])
// 状态
//表单每行数据
const listOptions = $computed(() => {
return {
remote: {
httpRequest: getSuggestionList,
// httpRequest: getSuggestionList,
params: {
sso_id: [],
created_time_start: '',
......@@ -34,7 +37,7 @@ const listOptions = $computed(() => {
{ slots: 'created_time_end', prop: 'created_time_end' }
],
columns: [
{ label: '序号', type: 'index', align: 'center' },
{ label: '序号', type: 'index', align: 'center', width: '100px' },
{ label: '问题描述', prop: 'title', align: 'center' },
{ label: '投诉人', prop: 'sso_id_name', align: 'center' },
{
......@@ -46,10 +49,19 @@ const listOptions = $computed(() => {
{ label: '处理时间', prop: 'updated_time', align: 'center' },
{ label: '处理状态', prop: 'status_name', align: 'center' },
{ label: '操作', slots: 'table-operate', align: 'center', width: 300 }
],
data: [
{
title: '1111',
id: '1234',
status: '1'
}
]
}
})
const handleDeal = () => {
const handleDeal = (row: any) => {
id.value = row.id
status.value = row.status
isShowDialog.value = true
}
// 用户检索
......@@ -85,12 +97,12 @@ const handleGetUserList = (query: string) => {
<template v-slot:created_time_end="{ params }">
<el-date-picker v-model="params.created_time_end" type="date" placeholder="结束时间"> </el-date-picker>
</template>
<template #table-operate>
<template #table-operate="{ row }">
<el-space>
<el-link type="primary" plain @click="handleDeal">查看</el-link>
<el-link type="primary" plain @click="handleDeal(row)">{{ row.status === '1' ? '处理' : '查看' }}</el-link>
</el-space>
</template></AppList
>
</template>
</AppList>
</AppCard>
<DealDialog v-if="isShowDialog === true" v-model:isShowDialog="isShowDialog" />
<DealDialog v-if="isShowDialog === true" v-model:isShowDialog="isShowDialog" :id="id" :status="status" />
</template>
......@@ -23,7 +23,7 @@ const listOptions = $computed(() => {
{ type: 'input', prop: 'paper_name', label: '试卷名称:', placeholder: '试卷名称' }
],
columns: [
{ label: '序号', type: 'index', align: 'center' },
{ label: '序号', type: 'index', align: 'center', width: '100px' },
{ label: '所属课程', prop: 'course_name', align: 'center' },
{ label: '试卷用途', prop: 'paper_use_name', align: 'center' },
{
......@@ -38,7 +38,7 @@ const listOptions = $computed(() => {
}
}
},
{ label: '试卷名称', prop: 'paper_name', align: 'center' },
{ label: '试卷名称', prop: 'paper_name', align: 'center', minWidth: '150' },
{ label: '总分', prop: 'paper_total_score', align: 'center' },
{ label: '及格分数', prop: 'pass_score', align: 'center' },
{ label: '操作', slots: 'table-operate', align: 'center' }
......
......@@ -14,7 +14,7 @@ const listOptions = $computed(() => {
{ type: 'input', prop: 'name', label: '问题内容:', placeholder: '问题内容' }
],
columns: [
{ label: '序号', type: 'index', align: 'center' },
{ label: '序号', type: 'index', align: 'center', width: '100px' },
{ label: '所属课程', prop: 'name', align: 'center' },
{ label: '提问人', prop: 'name', align: 'center' },
{ label: '所属班级', prop: 'name', align: 'center' },
......
......@@ -53,7 +53,7 @@ const listOptions = $computed(() => {
}
],
columns: [
{ label: '序号', type: 'index', align: 'center' },
{ label: '序号', type: 'index', align: 'center', width: '100px' },
{ label: '所属课程', prop: 'course_name', align: 'center' },
{ label: '学生姓名', prop: 'name', align: 'center' },
{ label: '学号', prop: 'sno_number', align: 'center' },
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论