develoop
ww
4 months ago
parent
a570de2a2f
commit
db33196725
25 changed files with 1623 additions and 1065 deletions
@ -1,5 +1,5 @@ |
||||
# 变量必须以 VITE_ 为前缀才能暴露给外部读取 |
||||
NODE_ENV = 'development' |
||||
VITE_APP_TITLE = '无糖运营平台' |
||||
# VITE_APP_BASE_API = 'http://127.0.0.1:8008' |
||||
VITE_APP_BASE_API = 'http://39.106.16.162:8080' |
||||
VITE_APP_BASE_API = 'http://127.0.0.1:8080' |
||||
# VITE_APP_BASE_API = 'http://39.106.16.162:8080' |
||||
|
||||
|
After Width: | Height: | Size: 4.0 KiB |
|
After Width: | Height: | Size: 189 KiB |
@ -1,9 +1,9 @@ |
||||
// 引入仓库
|
||||
import { createPinia } from 'pinia' |
||||
import persist from 'pinia-plugin-persistedstate' |
||||
// import persist from 'pinia-plugin-persistedstate'
|
||||
// 创建仓库
|
||||
const pinia = createPinia() |
||||
// 暴露仓库
|
||||
pinia.use(persist) |
||||
// pinia.use(persist)
|
||||
export default pinia |
||||
export * from './modules/user' |
||||
// export * from './modules/user'
|
||||
|
||||
@ -1,213 +1,253 @@ |
||||
<template> |
||||
<div class="add-or-edit"> |
||||
<el-drawer v-model="isDrawer" title="新增章节" direction="rtl" size="50%"> |
||||
<el-form ref="ruleFormRef" style="max-width: 600px" :model="ruleForm" :rules="rules" label-width="auto" |
||||
class="demo-ruleForm" :size="formSize" status-icon> |
||||
<el-form-item label="章节" prop="pid"> |
||||
<el-cascader v-model="activePidArr" :options="options" :props="CascaderProps" |
||||
:show-all-levels="false" clearable /> |
||||
</el-form-item> |
||||
<el-form-item label="章节名" prop="name"> |
||||
<el-input v-model="ruleForm.name" style="width: 240px" :placeholder="placeholder" /> |
||||
</el-form-item> |
||||
<el-form-item label="总学时" prop="totalclasshours"> |
||||
<el-input v-model="ruleForm.totalclasshours" style="width: 240px" placeholder="请输入总学时" /> |
||||
</el-form-item> |
||||
<el-form-item> |
||||
<el-button type="primary" :loading="loading" @click="submitForm(ruleFormRef)"> |
||||
Create |
||||
</el-button> |
||||
<el-button @click="resetForm(ruleFormRef)">Reset</el-button> |
||||
</el-form-item> |
||||
</el-form> |
||||
</el-drawer> |
||||
</div> |
||||
<div class="add-or-edit"> |
||||
<el-drawer v-model="isDrawer" title="新增章节" direction="rtl" size="50%"> |
||||
<el-form |
||||
ref="ruleFormRef" |
||||
style="max-width: 600px" |
||||
:model="ruleForm" |
||||
:rules="rules" |
||||
label-width="auto" |
||||
class="demo-ruleForm" |
||||
:size="formSize" |
||||
status-icon |
||||
> |
||||
<el-form-item label="章节" prop="pid"> |
||||
<el-cascader |
||||
v-model="activePidArr" |
||||
:options="options" |
||||
:props="CascaderProps" |
||||
:show-all-levels="false" |
||||
clearable |
||||
/> |
||||
</el-form-item> |
||||
<el-form-item label="章节名" prop="name"> |
||||
<el-input |
||||
v-model="ruleForm.name" |
||||
style="width: 240px" |
||||
:placeholder="placeholder" |
||||
/> |
||||
</el-form-item> |
||||
<el-form-item label="总学时" prop="totalclasshours"> |
||||
<el-input |
||||
v-model="ruleForm.totalclasshours" |
||||
style="width: 240px" |
||||
placeholder="请输入总学时" |
||||
/> |
||||
</el-form-item> |
||||
<el-form-item> |
||||
<el-button |
||||
type="primary" |
||||
:loading="loading" |
||||
@click="submitForm(ruleFormRef)" |
||||
> |
||||
Create |
||||
</el-button> |
||||
<el-button @click="resetForm(ruleFormRef)">Reset</el-button> |
||||
</el-form-item> |
||||
</el-form> |
||||
</el-drawer> |
||||
</div> |
||||
</template> |
||||
<script lang="ts" setup> |
||||
function comNum(n: number | undefined) { |
||||
if (n === undefined) return 1 |
||||
return n + 1 |
||||
if (n === undefined) return 1 |
||||
return n + 1 |
||||
} |
||||
import { ref, reactive, watch, computed, nextTick } from 'vue' |
||||
const props = defineProps(['isD', 'data', 'loading']) |
||||
const emits = defineEmits(['update:isD', 'submit']) |
||||
|
||||
|
||||
const isDrawer = ref(props.isD) |
||||
watch(() => props.isD, newVal => isDrawer.value = newVal) |
||||
watch(() => isDrawer.value, newVal => emits('update:isD', newVal)) |
||||
watch( |
||||
() => props.isD, |
||||
(newVal) => (isDrawer.value = newVal), |
||||
) |
||||
watch( |
||||
() => isDrawer.value, |
||||
(newVal) => emits('update:isD', newVal), |
||||
) |
||||
|
||||
const type = false |
||||
const options = computed(() => { |
||||
if (type) { |
||||
const arr = props.data.map((item: any, i: number) => { |
||||
const obj = { ...item } |
||||
if (item.chapterSection) obj.chapterSection = item.chapterSection.map((chap: any) => ({ ...chap, disabled: true })) |
||||
else obj.chapterSection = [] |
||||
obj.chapterSection.push({ name: `第${i + 1}章第${comNum(item.chapterSection?.length)}节`, pid: item.id }) |
||||
return obj |
||||
}) |
||||
arr.push({ name: `第${arr.length + 1}章`, pid: '' }) |
||||
return arr |
||||
} |
||||
return props.data |
||||
if (type) { |
||||
const arr = props.data.map((item: any, i: number) => { |
||||
const obj = { ...item } |
||||
if (item.chapterSection) |
||||
obj.chapterSection = item.chapterSection.map((chap: any) => ({ |
||||
...chap, |
||||
disabled: true, |
||||
})) |
||||
else obj.chapterSection = [] |
||||
obj.chapterSection.push({ |
||||
name: `第${i + 1}章第${comNum(item.chapterSection?.length)}节`, |
||||
pid: item.id, |
||||
}) |
||||
return obj |
||||
}) |
||||
arr.push({ name: `第${arr.length + 1}章`, pid: '' }) |
||||
return arr |
||||
} |
||||
return props.data |
||||
}) |
||||
const CascaderProps = { |
||||
checkStrictly: !type, |
||||
label: 'name', |
||||
value: type ? 'pid' : 'id', |
||||
children: 'chapterSection' |
||||
checkStrictly: !type, |
||||
label: 'name', |
||||
value: type ? 'pid' : 'id', |
||||
children: 'chapterSection', |
||||
} |
||||
|
||||
|
||||
import type { ComponentSize, FormInstance, FormRules } from 'element-plus' |
||||
|
||||
interface RuleForm { |
||||
content: string |
||||
courseid: string |
||||
courseobjectivesid: string |
||||
createBy: string |
||||
createTime: string |
||||
id: string |
||||
name: string |
||||
num: number |
||||
numshow: string |
||||
onlinclasshours: string |
||||
pid: string | undefined |
||||
requirement: string |
||||
sysOrgCode: string |
||||
totalclasshours: string |
||||
updateBy: string |
||||
updateTime: string |
||||
zc: string |
||||
ziyuan: string |
||||
zywj: string |
||||
content: string |
||||
courseid: string |
||||
courseobjectivesid: string |
||||
createBy: string |
||||
createTime: string |
||||
id: string |
||||
name: string |
||||
num: number |
||||
numshow: string |
||||
onlinclasshours: string |
||||
pid: string | undefined |
||||
requirement: string |
||||
sysOrgCode: string |
||||
totalclasshours: string |
||||
updateBy: string |
||||
updateTime: string |
||||
zc: string |
||||
ziyuan: string |
||||
zywj: string |
||||
} |
||||
|
||||
const formSize = ref<ComponentSize>('default') |
||||
const ruleFormRef = ref<FormInstance>() |
||||
let o |
||||
if (type) { |
||||
o = { |
||||
"content": "", |
||||
"courseid": "", |
||||
"courseobjectivesid": "", |
||||
"createBy": "", |
||||
"createTime": "", |
||||
"id": "", |
||||
"name": "", |
||||
"num": 0, |
||||
"numshow": "", |
||||
"onlinclasshours": "", |
||||
"pid": undefined, |
||||
"requirement": "", |
||||
"sysOrgCode": "", |
||||
"totalclasshours": "", |
||||
"updateBy": "", |
||||
"updateTime": "", |
||||
"zc": "", |
||||
"ziyuan": "", |
||||
"zywj": "" |
||||
} |
||||
}else{ |
||||
o = { |
||||
"content": "", |
||||
"courseid": "", |
||||
"courseobjectivesid": "", |
||||
"createBy": "", |
||||
"createTime": "", |
||||
"id": undefined, |
||||
"name": "111", |
||||
"num": 0, |
||||
"numshow": "", |
||||
"onlinclasshours": "", |
||||
"pid": "", |
||||
"requirement": "", |
||||
"sysOrgCode": "", |
||||
"totalclasshours": "", |
||||
"updateBy": "", |
||||
"updateTime": "", |
||||
"zc": "", |
||||
"ziyuan": "", |
||||
"zywj": "" |
||||
} |
||||
o = { |
||||
content: '', |
||||
courseid: '', |
||||
courseobjectivesid: '', |
||||
createBy: '', |
||||
createTime: '', |
||||
id: '', |
||||
name: '', |
||||
num: 0, |
||||
numshow: '', |
||||
onlinclasshours: '', |
||||
pid: undefined, |
||||
requirement: '', |
||||
sysOrgCode: '', |
||||
totalclasshours: '', |
||||
updateBy: '', |
||||
updateTime: '', |
||||
zc: '', |
||||
ziyuan: '', |
||||
zywj: '', |
||||
} |
||||
} else { |
||||
o = { |
||||
content: '', |
||||
courseid: '', |
||||
courseobjectivesid: '', |
||||
createBy: '', |
||||
createTime: '', |
||||
id: undefined, |
||||
name: '111', |
||||
num: 0, |
||||
numshow: '', |
||||
onlinclasshours: '', |
||||
pid: '', |
||||
requirement: '', |
||||
sysOrgCode: '', |
||||
totalclasshours: '', |
||||
updateBy: '', |
||||
updateTime: '', |
||||
zc: '', |
||||
ziyuan: '', |
||||
zywj: '', |
||||
} |
||||
} |
||||
let pxObj |
||||
if (type) pxObj = o |
||||
else { |
||||
pxObj = new Proxy(o, { |
||||
get(target, key) { |
||||
if (key === 'pid') return target.id |
||||
// @ts-ignore |
||||
return target[key]; |
||||
}, |
||||
set: function (obj, prop, value) { |
||||
if (prop === 'pid') { |
||||
obj.id = value |
||||
return true |
||||
} |
||||
pxObj = new Proxy(o, { |
||||
get(target, key) { |
||||
if (key === 'pid') return target.id |
||||
// @ts-ignore |
||||
return target[key] |
||||
}, |
||||
set: function (obj, prop, value) { |
||||
if (prop === 'pid') { |
||||
obj.id = value |
||||
return true |
||||
} |
||||
|
||||
// @ts-ignore |
||||
obj[prop] = value |
||||
return true; |
||||
} |
||||
}) |
||||
// @ts-ignore |
||||
obj[prop] = value |
||||
return true |
||||
}, |
||||
}) |
||||
} |
||||
// @ts-ignore |
||||
const ruleForm = reactive<RuleForm>(pxObj) |
||||
|
||||
// @ts-ignore |
||||
const validateChapterOrSection = (rule, value, callback) => { |
||||
nextTick(() => { |
||||
const value = ruleForm.pid |
||||
if (!value && value !== '') { |
||||
if (type) callback(new Error('请选择新增的章或节')) |
||||
else callback(new Error('请选择编辑的章或节')) |
||||
} |
||||
else callback() |
||||
}) |
||||
}; |
||||
nextTick(() => { |
||||
const value = ruleForm.pid |
||||
if (!value && value !== '') { |
||||
if (type) callback(new Error('请选择新增的章或节')) |
||||
else callback(new Error('请选择编辑的章或节')) |
||||
} else callback() |
||||
}) |
||||
} |
||||
// 表单验证 |
||||
const rules = reactive<FormRules<RuleForm>>({ |
||||
pid: [ |
||||
{ required: true, validator: validateChapterOrSection, trigger: 'change' }, |
||||
] |
||||
pid: [ |
||||
{ required: true, validator: validateChapterOrSection, trigger: 'change' }, |
||||
], |
||||
}) |
||||
|
||||
const submitForm = async (formEl: FormInstance | undefined) => { |
||||
if (!formEl) return |
||||
await formEl.validate((valid, fields) => { |
||||
if (valid) { |
||||
console.log(options.value, '1') |
||||
console.log(ruleForm); |
||||
if (!formEl) return |
||||
await formEl.validate((valid, fields) => { |
||||
if (valid) { |
||||
console.log(options.value, '1') |
||||
console.log(ruleForm) |
||||
|
||||
// emits('submit', ruleForm) |
||||
} else { |
||||
console.log('error submit!', fields) |
||||
} |
||||
}) |
||||
// emits('submit', ruleForm) |
||||
} else { |
||||
console.log('error submit!', fields) |
||||
} |
||||
}) |
||||
} |
||||
|
||||
const resetForm = (formEl: FormInstance | undefined) => { |
||||
if (!formEl) return |
||||
formEl.resetFields() |
||||
activePidArr.value = undefined |
||||
if (!formEl) return |
||||
formEl.resetFields() |
||||
activePidArr.value = undefined |
||||
} |
||||
const placeholder = ref('请输入章节名') |
||||
watch(() => ruleForm.pid, newVal => { |
||||
watch( |
||||
() => ruleForm.pid, |
||||
(newVal) => { |
||||
if (newVal === undefined) placeholder.value = '请输入章节名' |
||||
else if (newVal === '') placeholder.value = '请输入章名' |
||||
else placeholder.value = '请输入节名' |
||||
}) |
||||
}, |
||||
) |
||||
const activePidArr = ref<string[] | undefined>([]) |
||||
watch(() => activePidArr.value, newVal => {// 设置pid |
||||
watch( |
||||
() => activePidArr.value, |
||||
(newVal) => { |
||||
// 设置pid |
||||
if (newVal === undefined) { |
||||
ruleForm.pid = undefined |
||||
return |
||||
ruleForm.pid = undefined |
||||
return |
||||
} |
||||
ruleForm.pid = newVal.slice(-1)[0] |
||||
}) |
||||
|
||||
|
||||
}, |
||||
) |
||||
</script> |
||||
<style lang="scss"></style> |
||||
<style lang="scss"></style> |
||||
|
||||
@ -1,155 +1,196 @@ |
||||
<template> |
||||
<div class="add-or-edit"> |
||||
<el-drawer v-model="isDrawer" title="新增章节" direction="rtl" size="50%"> |
||||
<el-form ref="ruleFormRef" style="max-width: 600px" :model="ruleForm" :rules="rules" label-width="auto" |
||||
class="demo-ruleForm" :size="formSize" status-icon> |
||||
<el-form-item label="章节" prop="pid"> |
||||
<el-cascader v-model="activePidArr" :options="options1" :props="CascaderProps" |
||||
:show-all-levels="false" clearable /> |
||||
</el-form-item> |
||||
<el-form-item label="章节名" prop="name"> |
||||
<el-input v-model="ruleForm.name" style="width: 240px" :placeholder="placeholder" /> |
||||
</el-form-item> |
||||
<el-form-item label="总学时" prop="totalclasshours"> |
||||
<el-input v-model="ruleForm.totalclasshours" style="width: 240px" placeholder="请输入总学时" /> |
||||
</el-form-item> |
||||
<el-form-item> |
||||
<el-button type="primary" :loading="loading" @click="submitForm(ruleFormRef)"> |
||||
提交 |
||||
</el-button> |
||||
<el-button @click="resetForm(ruleFormRef)">重置</el-button> |
||||
</el-form-item> |
||||
</el-form> |
||||
</el-drawer> |
||||
</div> |
||||
<div class="add-or-edit"> |
||||
<el-drawer v-model="isDrawer" title="新增章节" direction="rtl" size="50%"> |
||||
<el-form |
||||
ref="ruleFormRef" |
||||
style="max-width: 600px" |
||||
:model="ruleForm" |
||||
:rules="rules" |
||||
label-width="auto" |
||||
class="demo-ruleForm" |
||||
:size="formSize" |
||||
status-icon |
||||
> |
||||
<el-form-item label="章节" prop="pid"> |
||||
<el-cascader |
||||
v-model="activePidArr" |
||||
:options="options1" |
||||
:props="CascaderProps" |
||||
:show-all-levels="false" |
||||
clearable |
||||
/> |
||||
</el-form-item> |
||||
<el-form-item label="章节名" prop="name"> |
||||
<el-input |
||||
v-model="ruleForm.name" |
||||
style="width: 240px" |
||||
:placeholder="placeholder" |
||||
/> |
||||
</el-form-item> |
||||
<el-form-item label="总学时" prop="totalclasshours"> |
||||
<el-input |
||||
v-model="ruleForm.totalclasshours" |
||||
style="width: 240px" |
||||
placeholder="请输入总学时" |
||||
/> |
||||
</el-form-item> |
||||
<el-form-item> |
||||
<el-button |
||||
type="primary" |
||||
:loading="loading" |
||||
@click="submitForm(ruleFormRef)" |
||||
> |
||||
提交 |
||||
</el-button> |
||||
<el-button @click="resetForm(ruleFormRef)">重置</el-button> |
||||
</el-form-item> |
||||
</el-form> |
||||
</el-drawer> |
||||
</div> |
||||
</template> |
||||
<script lang="ts" setup> |
||||
function comNum(n: number | undefined) { |
||||
if (n === undefined) return 1 |
||||
return n + 1 |
||||
if (n === undefined) return 1 |
||||
return n + 1 |
||||
} |
||||
import { ref, reactive, watch, computed, nextTick } from 'vue' |
||||
const props = defineProps(['isD', 'data']) |
||||
const emits = defineEmits(['update:isD','submit']) |
||||
const emits = defineEmits(['update:isD', 'submit']) |
||||
const loading = ref(false) |
||||
const updLoading = (boo:boolean) => loading.value = boo |
||||
const updLoading = (boo: boolean) => (loading.value = boo) |
||||
|
||||
const isDrawer = ref(props.isD) |
||||
watch(() => props.isD, newVal => isDrawer.value = newVal) |
||||
watch(()=>isDrawer.value,newVal=>emits('update:isD',newVal)) |
||||
|
||||
watch( |
||||
() => props.isD, |
||||
(newVal) => (isDrawer.value = newVal), |
||||
) |
||||
watch( |
||||
() => isDrawer.value, |
||||
(newVal) => emits('update:isD', newVal), |
||||
) |
||||
|
||||
const options1 = computed(() => { |
||||
const arr = props.data.map((item: any, i: number) => { |
||||
const obj = { ...item } |
||||
if (item.chapterSection) obj.chapterSection = item.chapterSection.map((chap: any) => ({ ...chap, disabled: true })) |
||||
else obj.chapterSection = [] |
||||
obj.chapterSection.push({ name: `第${i + 1}章第${comNum(item.chapterSection?.length)}节`, pid: item.id }) |
||||
return obj |
||||
const arr = props.data.map((item: any, i: number) => { |
||||
const obj = { ...item } |
||||
if (item.chapterSection) |
||||
obj.chapterSection = item.chapterSection.map((chap: any) => ({ |
||||
...chap, |
||||
disabled: true, |
||||
})) |
||||
else obj.chapterSection = [] |
||||
obj.chapterSection.push({ |
||||
name: `第${i + 1}章第${comNum(item.chapterSection?.length)}节`, |
||||
pid: item.id, |
||||
}) |
||||
arr.push({ name: `第${arr.length + 1}章`, pid: '' }) |
||||
return arr |
||||
return obj |
||||
}) |
||||
arr.push({ name: `第${arr.length + 1}章`, pid: '' }) |
||||
return arr |
||||
}) |
||||
const CascaderProps = { |
||||
label: 'name', |
||||
value: 'pid', |
||||
children: 'chapterSection' |
||||
label: 'name', |
||||
value: 'pid', |
||||
children: 'chapterSection', |
||||
} |
||||
|
||||
|
||||
import type { ComponentSize, FormInstance, FormRules } from 'element-plus' |
||||
|
||||
interface RuleForm { |
||||
content: string |
||||
courseid: string |
||||
courseobjectivesid: string |
||||
createBy: string |
||||
createTime: string |
||||
id: string |
||||
name: string |
||||
num: number |
||||
numshow: string |
||||
onlinclasshours: string |
||||
pid: string | undefined |
||||
requirement: string |
||||
sysOrgCode: string |
||||
totalclasshours: string |
||||
updateBy: string |
||||
updateTime: string |
||||
zc: string |
||||
ziyuan: string |
||||
zywj: string |
||||
content: string |
||||
courseid: string |
||||
courseobjectivesid: string |
||||
createBy: string |
||||
createTime: string |
||||
id: string |
||||
name: string |
||||
num: number |
||||
numshow: string |
||||
onlinclasshours: string |
||||
pid: string | undefined |
||||
requirement: string |
||||
sysOrgCode: string |
||||
totalclasshours: string |
||||
updateBy: string |
||||
updateTime: string |
||||
zc: string |
||||
ziyuan: string |
||||
zywj: string |
||||
} |
||||
|
||||
const formSize = ref<ComponentSize>('default') |
||||
const ruleFormRef = ref<FormInstance>() |
||||
const ruleForm = reactive<RuleForm>({ |
||||
"content": "", |
||||
"courseid": "2fa0fd63262230639d2c45a3acd9045c", |
||||
"courseobjectivesid": "", |
||||
"createBy": "", |
||||
"createTime": "", |
||||
"id": "", |
||||
"name": "", |
||||
"num": 0, |
||||
"numshow": "", |
||||
"onlinclasshours": "", |
||||
"pid": undefined, |
||||
"requirement": "", |
||||
"sysOrgCode": "", |
||||
"totalclasshours": "", |
||||
"updateBy": "", |
||||
"updateTime": "", |
||||
"zc": "", |
||||
"ziyuan": "", |
||||
"zywj": "" |
||||
content: '', |
||||
courseid: '2fa0fd63262230639d2c45a3acd9045c', |
||||
courseobjectivesid: '', |
||||
createBy: '', |
||||
createTime: '', |
||||
id: '', |
||||
name: '', |
||||
num: 0, |
||||
numshow: '', |
||||
onlinclasshours: '', |
||||
pid: undefined, |
||||
requirement: '', |
||||
sysOrgCode: '', |
||||
totalclasshours: '', |
||||
updateBy: '', |
||||
updateTime: '', |
||||
zc: '', |
||||
ziyuan: '', |
||||
zywj: '', |
||||
}) |
||||
// @ts-ignore |
||||
const validateChapterOrSection = (rule, value, callback) => { |
||||
nextTick(()=>{ |
||||
const value =ruleForm.pid |
||||
if (!value && value !== '') callback(new Error('请选择新增的章或节')) |
||||
else callback() |
||||
}) |
||||
}; |
||||
nextTick(() => { |
||||
const value = ruleForm.pid |
||||
if (!value && value !== '') callback(new Error('请选择新增的章或节')) |
||||
else callback() |
||||
}) |
||||
} |
||||
// 表单验证 |
||||
const rules = reactive<FormRules<RuleForm>>({ |
||||
pid: [ |
||||
{ required: true, validator: validateChapterOrSection, trigger: 'change' }, |
||||
] |
||||
pid: [ |
||||
{ required: true, validator: validateChapterOrSection, trigger: 'change' }, |
||||
], |
||||
}) |
||||
|
||||
const submitForm = async (formEl: FormInstance | undefined) => { |
||||
if (!formEl) return |
||||
await formEl.validate((valid, fields) => { |
||||
if (valid) { |
||||
emits('submit',ruleForm,updLoading) |
||||
} else { |
||||
console.log('error submit!', fields) |
||||
} |
||||
}) |
||||
if (!formEl) return |
||||
await formEl.validate((valid, fields) => { |
||||
if (valid) { |
||||
emits('submit', ruleForm, updLoading) |
||||
} else { |
||||
console.log('error submit!', fields) |
||||
} |
||||
}) |
||||
} |
||||
|
||||
const resetForm = (formEl: FormInstance | undefined) => { |
||||
if (!formEl) return |
||||
formEl.resetFields() |
||||
activePidArr.value = undefined |
||||
if (!formEl) return |
||||
formEl.resetFields() |
||||
activePidArr.value = undefined |
||||
} |
||||
const placeholder = ref('请输入章节名') |
||||
watch(() => ruleForm.pid, newVal => { |
||||
watch( |
||||
() => ruleForm.pid, |
||||
(newVal) => { |
||||
if (newVal === undefined) placeholder.value = '请输入章节名' |
||||
else if (newVal === '') placeholder.value = '请输入章名' |
||||
else placeholder.value = '请输入节名' |
||||
}) |
||||
}, |
||||
) |
||||
const activePidArr = ref<string[] | undefined>([]) |
||||
watch(() => activePidArr.value, newVal => {// 设置pid |
||||
watch( |
||||
() => activePidArr.value, |
||||
(newVal) => { |
||||
// 设置pid |
||||
if (newVal === undefined) { |
||||
ruleForm.pid = undefined |
||||
return |
||||
ruleForm.pid = undefined |
||||
return |
||||
} |
||||
ruleForm.pid = newVal.slice(-1)[0] |
||||
}) |
||||
|
||||
|
||||
ruleForm.pid = newVal.slice(-1)[0] |
||||
}, |
||||
) |
||||
</script> |
||||
<style lang="scss"></style> |
||||
<style lang="scss"></style> |
||||
|
||||
@ -0,0 +1,84 @@ |
||||
<script setup> |
||||
import conheader from '@/views/home/components/ConHeader.vue' |
||||
import fe from '@/assets/images/fe.jpg' |
||||
</script> |
||||
<template> |
||||
<div class="lesson_container" style="width: 95%"> |
||||
<conheader :title="`课程列表`"></conheader> |
||||
<div class="lessonlist-content"> |
||||
<div class="lessonlist-item" v-for="item in 3" :key="item"> |
||||
<div class="lessonlist-item-img"> |
||||
<img :src="fe" alt="" style="width: 100%; height: 140px" /> |
||||
</div> |
||||
<div class="lessonlist-item-info"> |
||||
<h3>课程名称</h3> |
||||
<div class="p"><p>编辑</p></div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<style scoped> |
||||
.lesson_container { |
||||
display: flex; |
||||
flex-direction: column; |
||||
justify-content: space-between; |
||||
margin: 0 auto; |
||||
padding: 20px 0; |
||||
} |
||||
|
||||
.lessonlist-content { |
||||
display: flex; |
||||
flex-wrap: wrap; |
||||
justify-content: space-between; |
||||
margin: 10px 0; |
||||
} |
||||
|
||||
.lesson_container { |
||||
display: flex; |
||||
flex-direction: column; |
||||
justify-content: space-between; |
||||
margin: 0 auto; |
||||
padding: 5px 0; |
||||
} |
||||
.lessonlist-item { |
||||
width: 270px; |
||||
height: 200px; |
||||
border-radius: 10px; |
||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); |
||||
} |
||||
.lessonlist-item-img { |
||||
width: 100%; |
||||
height: 140px; |
||||
} |
||||
.lessonlist-item-info { |
||||
padding: 10px; |
||||
display: flex; |
||||
flex-direction: column; |
||||
justify-content: space-between; |
||||
} |
||||
.lessonlist-item-info h3 { |
||||
font-size: 16px; |
||||
font-weight: bold; |
||||
margin-bottom: 5px; |
||||
} |
||||
.lessonlist-item-info .p { |
||||
width: 100%; |
||||
display: flex; |
||||
justify-content: end; |
||||
} |
||||
.lessonlist-item-info p { |
||||
font-size: 12px; |
||||
color: #a7c4f7; |
||||
line-height: 1.5; |
||||
box-sizing: border-box; |
||||
border: 2px solid #a7c4f7; |
||||
border-radius: 10px; |
||||
margin-bottom: 5px; |
||||
width: 50px; |
||||
margin: 5px; |
||||
text-align: center; |
||||
cursor: pointer; |
||||
} |
||||
</style> |
||||
@ -1,30 +1,5 @@ |
||||
<template> |
||||
<div> |
||||
<!-- Dialog组件 --> |
||||
<Dialog |
||||
v-model="dialogVisible" |
||||
@confirm="collectData" |
||||
:name="readonlyName" |
||||
:age="readonlyAge" |
||||
/> |
||||
</div> |
||||
<div>学生</div> |
||||
</template> |
||||
|
||||
<script setup> |
||||
import { ref, readonly } from 'vue' |
||||
|
||||
const dialogVisible = ref(false) // 控制Dialog的显示与隐藏 |
||||
const name = ref('John') // 可修改字段 |
||||
const age = ref(25) // 可修改字段 |
||||
|
||||
const readonlyName = readonly(name) // 将name字段设置为只读 |
||||
const readonlyAge = readonly(age) // 将age字段设置为只读 |
||||
|
||||
const collectData = () => { |
||||
// 在这里可以收集Dialog中的其他可修改字段的数据 |
||||
// ... |
||||
|
||||
console.log(readonlyName.value) // 可以访问只读字段的值 |
||||
console.log(readonlyAge.value) // 可以访问只读字段的值 |
||||
} |
||||
</script> |
||||
<style lang="scss"></style> |
||||
|
||||
@ -1,68 +0,0 @@ |
||||
<template> |
||||
<div> |
||||
<el-button type="primary" @click="openDrawer">Open Drawer</el-button> |
||||
<el-drawer |
||||
title="Drawer Title" |
||||
v-model:visible="drawerVisible" |
||||
:direction="drawerDirection" |
||||
> |
||||
<el-table :data="formModel" style="width: 100%"> |
||||
<el-table-column prop="name" label="Name"></el-table-column> |
||||
<el-table-column prop="content" label="Content"> |
||||
<template v-slot="scope"> |
||||
<el-input |
||||
v-model="scope.row.content" |
||||
@input="handleInput(scope.row)" |
||||
></el-input> |
||||
</template> |
||||
</el-table-column> |
||||
</el-table> |
||||
|
||||
<template v-slot:footer> |
||||
<div> |
||||
<el-button @click="cancelEdit">Cancel</el-button> |
||||
<el-button type="primary" @click="saveEdit">Save</el-button> |
||||
</div> |
||||
</template> |
||||
</el-drawer> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
export default { |
||||
data() { |
||||
return { |
||||
formModel: [ |
||||
{ name: 'Macbook', content: 9.9 }, |
||||
{ name: 'iPhone', content: 9.9 }, |
||||
{ name: '小米电脑', content: 9.9 }, |
||||
{ name: '小米电脑', content: 9.9 }, |
||||
{ name: '小米电脑', content: 9.9 }, |
||||
{ name: '小米电脑', content: 9.9 }, |
||||
{ name: '小米电脑', content: 9.9 }, |
||||
{ name: '小米电脑', content: 9.9 }, |
||||
{ name: '小米电脑', content: 9.9 }, |
||||
], |
||||
drawerVisible: false, |
||||
drawerDirection: 'ltr', |
||||
} |
||||
}, |
||||
methods: { |
||||
openDrawer() { |
||||
this.drawerVisible = true |
||||
}, |
||||
cancelEdit() { |
||||
this.drawerVisible = false |
||||
}, |
||||
saveEdit() { |
||||
// 执行保存修改的逻辑，可以将数据发送给后端进行保存 |
||||
console.log('Save Edit:', this.formModel) |
||||
this.drawerVisible = false |
||||
}, |
||||
handleInput(row) { |
||||
// 处理输入框的输入事件，可以在此处更新数据 |
||||
console.log('Handle Input:', row) |
||||
}, |
||||
}, |
||||
} |
||||
</script> |
||||
Loading…
Reference in new issue