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