8 changed files with 725 additions and 13 deletions
@ -0,0 +1,92 @@ |
|||
<!-- |
|||
@ 作者: 秦东 |
|||
@ 时间: 2023-07-19 08:39:34 |
|||
@ 备注: 抽屉 |
|||
--> |
|||
<script lang='ts' setup> |
|||
import { ref, nextTick, watch, onMounted, onUnmounted } from 'vue' |
|||
import { aceEdit } from '@/api/DesignForm/utils' |
|||
|
|||
const props = withDefaults( |
|||
defineProps<{ |
|||
data?:object |
|||
modelValue: boolean |
|||
// eslint-disable-next-line vue/require-default-prop |
|||
title?: string |
|||
direction?: 'rtl' | 'ltr' |
|||
content: string |
|||
id?: string |
|||
// eslint-disable-next-line vue/require-default-prop |
|||
codeType?: string |
|||
}>(), |
|||
{ |
|||
id: 'editJson', |
|||
content: '', |
|||
direction: 'ltr' |
|||
} |
|||
) |
|||
const emits = defineEmits<{ |
|||
(e: 'beforeClose'): void |
|||
(e: 'confirm', content: string): void |
|||
(e: 'update:modelValue', val: boolean): void |
|||
}>() |
|||
const editor = ref<any>({}) |
|||
const visible = ref(false) |
|||
watch( |
|||
() => props.modelValue, |
|||
(val: boolean) => { |
|||
visible.value = val |
|||
if (val) { |
|||
initEditor() |
|||
} |
|||
} |
|||
) |
|||
const initEditor = () => { |
|||
nextTick(() => { |
|||
editor.value = aceEdit(props.content, props.id, props.codeType) |
|||
}) |
|||
} |
|||
const dialogConfirm = () => { |
|||
const editVal = editor.value.getValue() |
|||
emits('confirm', editVal) |
|||
} |
|||
const drawerBeforeClose = () => { |
|||
emits('update:modelValue', false) |
|||
emits('beforeClose') |
|||
} |
|||
onMounted(() => {}) |
|||
onUnmounted(() => { |
|||
if (Object.keys(editor.value).length !== 0) { |
|||
editor.value.destroy() |
|||
editor.value.container.remove() |
|||
} |
|||
}) |
|||
</script> |
|||
<template> |
|||
<el-drawer |
|||
v-model="visible" |
|||
size="60%" |
|||
:title="title" |
|||
:direction="direction as any" |
|||
class="ace-dialog" |
|||
:append-to-body="true" |
|||
:before-close="drawerBeforeClose" |
|||
> |
|||
<template #header> |
|||
<div v-html="title"></div> |
|||
</template> |
|||
<div>{{props.data}}</div> |
|||
<div v-if="visible" :id="id"></div> |
|||
<div class="dialog-footer"> |
|||
<el-button type="primary" size="small" @click="dialogConfirm"> |
|||
确定 |
|||
</el-button> |
|||
</div> |
|||
</el-drawer> |
|||
</template> |
|||
<style lang='scss' scoped> |
|||
#editJson, #editJsonCopy { |
|||
width: 100%; |
|||
height: calc(100vh - 90px); |
|||
} |
|||
</style> |
|||
@ -0,0 +1,254 @@ |
|||
<!-- |
|||
@ 作者: 秦东 |
|||
@ 时间: 2023-07-19 08:39:34 |
|||
@ 备注: 抽屉 |
|||
--> |
|||
<script lang='ts' setup> |
|||
import { ref, nextTick, watch, onMounted, onUnmounted } from 'vue' |
|||
import { aceEdit } from '@/api/DesignForm/utils' |
|||
|
|||
const props = withDefaults( |
|||
defineProps<{ |
|||
modelValue: boolean |
|||
// eslint-disable-next-line vue/require-default-prop |
|||
title?: string |
|||
direction?: 'rtl' | 'ltr' |
|||
content: string |
|||
id?: string |
|||
// eslint-disable-next-line vue/require-default-prop |
|||
codeType?: string |
|||
data?: object |
|||
}>(), |
|||
{ |
|||
id: 'editJson', |
|||
content: '', |
|||
direction: 'ltr' |
|||
} |
|||
) |
|||
|
|||
interface treeStruct { |
|||
value: string |
|||
label?: string |
|||
children?: treeStruct[] |
|||
} |
|||
|
|||
const emits = defineEmits<{ |
|||
(e: 'beforeClose'): void |
|||
(e: 'confirm', content: string): void |
|||
(e: 'update:modelValue', val: boolean): void |
|||
}>() |
|||
const editor = ref<any>({}) |
|||
const visible = ref(false) |
|||
|
|||
const treeSelectAry = reactive<treeStruct[]>([]) |
|||
const editTitleFormRef = ref(ElForm); //编辑表单 |
|||
watch( |
|||
() => props.modelValue, |
|||
(val: boolean) => { |
|||
visible.value = val |
|||
if (val) { |
|||
initEditor() |
|||
} |
|||
} |
|||
) |
|||
const initEditor = () => { |
|||
nextTick(() => { |
|||
editor.value = aceEdit(props.content, props.id, props.codeType) |
|||
}) |
|||
} |
|||
const dialogConfirm = () => { |
|||
const editVal = editor.value.getValue() |
|||
emits('confirm', editVal) |
|||
} |
|||
const drawerBeforeClose = () => { |
|||
emits('update:modelValue', false) |
|||
emits('beforeClose') |
|||
} |
|||
onMounted(() => {}) |
|||
onUnmounted(() => { |
|||
if (Object.keys(editor.value).length !== 0) { |
|||
editor.value.destroy() |
|||
editor.value.container.remove() |
|||
} |
|||
}) |
|||
let jibuqi = 0 |
|||
const isTopHeader = ref(false) |
|||
const guodu = ref<treeStruct>({}) |
|||
const addIsShow = ref(false) |
|||
const pickAdd = (val:treeStruct) => { |
|||
guodu.value = val |
|||
isTopHeader.value = false |
|||
addIsShow.value = true |
|||
} |
|||
const pickAddClose = () => { |
|||
guodu.value = {} |
|||
treeSelectTitle.label = "" |
|||
addIsShow.value = false |
|||
butLoad.value = false |
|||
editTitleFormRef.value.resetFields(); |
|||
} |
|||
//添加顶级分类 |
|||
const addTopClass = () => { |
|||
isTopHeader.value = true |
|||
addIsShow.value = true |
|||
} |
|||
//确认添加 |
|||
const treeSelectTitle = reactive<treeStruct>({ |
|||
value: "1", |
|||
label: "" |
|||
}) |
|||
const butLoad = ref(false) |
|||
const pickIsTrue = () => { |
|||
butLoad.value = true |
|||
editTitleFormRef.value.validate((isValid: boolean) => { |
|||
if(isValid){ |
|||
jibuqi++ |
|||
if(isTopHeader.value){ |
|||
treeSelectAry.push({ |
|||
value: jibuqi, |
|||
label: treeSelectTitle.label, |
|||
children: [] |
|||
}) |
|||
}else{ |
|||
if(guodu.value.children){ |
|||
guodu.value.children.push({ |
|||
value: jibuqi, |
|||
label: treeSelectTitle.label, |
|||
children: [] |
|||
}) |
|||
}else{ |
|||
guodu.value.children=[ |
|||
{ |
|||
value: jibuqi, |
|||
label: treeSelectTitle.label, |
|||
children: [] |
|||
} |
|||
] |
|||
} |
|||
} |
|||
|
|||
pickAddClose() |
|||
}else{ |
|||
butLoad.value = false |
|||
} |
|||
}) |
|||
} |
|||
/** |
|||
@ 作者: 秦东 |
|||
@ 时间: 2024-09-27 08:38:35 |
|||
@ 功能: 设定值 |
|||
*/ |
|||
const dialogConfirmTree = () => { |
|||
emits('confirm', treeSelectAry) |
|||
drawerBeforeClose() |
|||
} |
|||
/** |
|||
* 表单验证规则 |
|||
*/ |
|||
const editTitleRules = reactive({ |
|||
label: [{ required: true, message: "请输入名称", trigger: "blur" }], |
|||
}); |
|||
/** |
|||
@ 作者: 秦东 |
|||
@ 时间: 2024-09-27 13:51:31 |
|||
@ 功能: 删除指定节点数据 |
|||
*/ |
|||
const pickDel = (val:treeStruct) => { |
|||
console.log("要删除得节点-->",val.value) |
|||
delDiGui(treeSelectAry,val) |
|||
console.log("删除指定节点数据---结果-->",treeSelectAry) |
|||
} |
|||
/** |
|||
@ 作者: 秦东 |
|||
@ 时间: 2024-09-27 14:13:23 |
|||
@ 功能: 执行递归删除 |
|||
*/ |
|||
const delDiGui = (tree: treeStruct[],val:treeStruct) => { |
|||
for (let i = 0; i < tree.length; i++) { |
|||
const node = tree[i]; |
|||
if (node.value == val.value) { |
|||
tree.splice(i, 1); |
|||
return; |
|||
} |
|||
if (Array.isArray(node.children) && node.children.length) { |
|||
return delDiGui(node.children, val); |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
<template> |
|||
<el-drawer |
|||
v-model="visible" |
|||
size="60%" |
|||
:title="title" |
|||
:direction="direction as any" |
|||
class="ace-dialog" |
|||
:append-to-body="true" |
|||
:before-close="drawerBeforeClose" |
|||
> |
|||
<template #header> |
|||
<div v-html="title"></div> |
|||
</template> |
|||
<div v-if="['cascader', 'treeSelect'].includes(props.data.type)">{{props.data}} |
|||
|
|||
<el-table |
|||
:data="treeSelectAry" |
|||
row-key="value" |
|||
default-expand-all |
|||
> |
|||
<el-table-column prop="label" label="名称" /> |
|||
<el-table-column label="操作" width="200" align="center"> |
|||
<template #header> |
|||
<el-button type="success" @click="addTopClass">添加顶级分类</el-button> |
|||
</template> |
|||
<template #default="scope"> |
|||
<el-button-group> |
|||
<el-button text type="success" @click="pickAdd(scope.row)">添加</el-button> |
|||
<el-button text type="warning" @click="pick(scope.row)">修改</el-button> |
|||
<el-button text type="danger" @click="pickDel(scope.row)">删除</el-button> |
|||
</el-button-group> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
|
|||
</div> |
|||
<div v-else :id="id"></div> |
|||
<div class="dialog-footer"> |
|||
<el-button v-if="['cascader', 'treeSelect'].includes(props.data.type)" type="primary" size="small" @click="dialogConfirmTree"> |
|||
确定 |
|||
</el-button> |
|||
<el-button v-else type="primary" size="small" @click="dialogConfirm"> |
|||
确定 |
|||
</el-button> |
|||
</div> |
|||
<el-dialog |
|||
v-model="addIsShow" |
|||
title="编辑" |
|||
width="500" |
|||
:before-close="pickAddClose" |
|||
> |
|||
<el-form ref="editTitleFormRef" :rules="editTitleRules" :model="treeSelectTitle" label-width="auto" style="max-width: 600px"> |
|||
<el-form-item label="名称：" prop="label"> |
|||
<el-input v-model="treeSelectTitle.label" /> |
|||
</el-form-item> |
|||
</el-form> |
|||
<template #footer> |
|||
<div class="dialog-footer"> |
|||
<el-button @click="pickAddClose">取消</el-button> |
|||
<el-button v-loading="butLoad" type="primary" @click="pickIsTrue">确定</el-button> |
|||
</div> |
|||
</template> |
|||
</el-dialog> |
|||
</el-drawer> |
|||
|
|||
|
|||
|
|||
|
|||
|
|||
</template> |
|||
<style lang='scss' scoped> |
|||
#editJson, #editJsonCopy { |
|||
width: 100%; |
|||
height: calc(100vh - 90px); |
|||
} |
|||
</style> |
|||
@ -0,0 +1,47 @@ |
|||
<!-- |
|||
@ 作者: 秦东 |
|||
@ 时间: 2024-09-29 13:46:55 |
|||
@ 备注: 级联器 |
|||
--> |
|||
<script lang='ts' setup> |
|||
const props = withDefaults( |
|||
defineProps<{ |
|||
modelValue?: string |
|||
disabled?: boolean |
|||
action?: string |
|||
name?: string |
|||
fileList?: Object |
|||
control?: Object |
|||
config?: Object |
|||
data?: Object |
|||
options?: Object |
|||
}>(), |
|||
{} |
|||
) |
|||
const emits = defineEmits<{ |
|||
(e: 'update:modelValue', value: string): void |
|||
}>() |
|||
const value = computed({ |
|||
get: () => { |
|||
console.log("图片上传处理-112->",props.modelValue) |
|||
return props.modelValue |
|||
}, |
|||
set: (newVal: any) => { |
|||
emits('update:modelValue', newVal) |
|||
return newVal |
|||
}, |
|||
}); |
|||
const handleChange = () => { |
|||
|
|||
} |
|||
</script> |
|||
<template> |
|||
<el-cascader |
|||
v-model="value" |
|||
:options="props.options" |
|||
@change="handleChange" |
|||
/> |
|||
</template> |
|||
<style lang='scss' scoped> |
|||
|
|||
</style> |
|||
Loading…
Reference in new issue