hreenshan112
12 months ago
23 changed files with 789 additions and 301 deletions
|
After Width: | Height: | Size: 1.5 KiB |
|
After Width: | Height: | Size: 818 B |
|
After Width: | Height: | Size: 2.9 KiB |
|
After Width: | Height: | Size: 1.5 KiB |
|
After Width: | Height: | Size: 1.2 KiB |
|
After Width: | Height: | Size: 1.1 KiB |
@ -0,0 +1,221 @@ |
|||
<!-- |
|||
@ 作者: 秦东 |
|||
@ 时间: 2024-11-14 10:00:42 |
|||
@ 备注: 组件集合 |
|||
--> |
|||
<script lang='ts' setup> |
|||
import { onBeforeRouteLeave } from 'vue-router' |
|||
import { FormList } from "@/api/lowCode/form/type" |
|||
import { jsonParseStringify,getGroupName } from '@/utils/lowCode/item/index' |
|||
import { constFormBtnEvent,constFormProps } from '@/api/lowCode/utils'; |
|||
import { useDesignFormStore } from '@/utils/pinia/stores/lowCode/designForm' |
|||
import { AnalysisCss,AnalysisInputCss } from '@/api/common/cssInfo' |
|||
|
|||
const props = withDefaults( |
|||
defineProps<{ |
|||
data: FormList[] |
|||
dataType?: String |
|||
tableinfo?:formTableInfo |
|||
alldata?:any |
|||
}>(), |
|||
{ |
|||
data: () => { |
|||
return [] |
|||
} |
|||
} |
|||
) |
|||
const store = useDesignFormStore() as any //自定义表单存储器 |
|||
const formProps = inject(constFormProps, {}) as any |
|||
const type = computed(() => { |
|||
return formProps.value.type |
|||
}) |
|||
const state = reactive({ |
|||
clone: true, // 允许clone |
|||
gridAdd: false |
|||
}) |
|||
const dataList = ref(props.data) |
|||
const unWatch = watch( |
|||
() => props.data, |
|||
(v: FormList[]) => { |
|||
dataList.value = v |
|||
} |
|||
) |
|||
const activeKey = computed(() => { |
|||
return store.activeKey |
|||
}) |
|||
onMounted(() => { |
|||
// console.log("初始", state) |
|||
// console.log("初始1", dataList.value) |
|||
}) |
|||
watch(()=>dataList.value,(val:any) => { |
|||
// console.log("监听组件列表变化", val) |
|||
},{ |
|||
deep: true, |
|||
}) |
|||
onBeforeRouteLeave(() => { |
|||
unWatch() //销毁监听器 |
|||
}) |
|||
onUnmounted(() => { |
|||
// console.log('onUnmounted') |
|||
dataList.value = {} |
|||
store.setActiveKey('') |
|||
store.setControlAttr({}) |
|||
}) |
|||
const getFormItemLableStyle = (ele: any) => { |
|||
if(ele?.labelStyle){ |
|||
// console.log("返回栅格宽度3",AnalysisCss(ele)) |
|||
return AnalysisCss(ele?.labelStyle) |
|||
} |
|||
} |
|||
const injectBtnEvent:any = inject(constFormBtnEvent) |
|||
const clickBtn = (control: any) => { |
|||
console.log(control) |
|||
// 0: '提交表单', |
|||
// 1: '重置表单', |
|||
// 2: '取消返回', |
|||
// 3: '无动作(自定义)' |
|||
if (type.value !== 15) { |
|||
// 非设计模式才触发事件 |
|||
injectBtnEvent && injectBtnEvent(control) |
|||
} |
|||
} |
|||
</script> |
|||
<template> |
|||
<div> |
|||
<div v-for="(element,index) in dataList" :key="index"> |
|||
|
|||
<template v-if="element.type === 'tabs'"> |
|||
<!--选项卡--> |
|||
<el-tabs |
|||
v-bind="element.control" |
|||
:class="[element.config?.className]" |
|||
> |
|||
<el-tab-pane |
|||
v-for="(item, tIndex) in element.columns" |
|||
:label="item.label" |
|||
:key="tIndex" |
|||
> |
|||
<FormItemGroup :data="item.list" data-type="not-nested" /> |
|||
|
|||
</el-tab-pane> |
|||
</el-tabs> |
|||
</template> |
|||
<template v-if="element.type === 'title'"> |
|||
<!--标题--> |
|||
<div |
|||
class="title" |
|||
:class="[element.config.className]" |
|||
v-bind="element.control" |
|||
:style="getFormItemLableStyle(element.styles)" |
|||
> |
|||
<span v-html="element.control.modelValue"></span> |
|||
<Tooltips |
|||
:content="element.config.help" |
|||
v-if="element.config.help" |
|||
/> |
|||
</div> |
|||
</template> |
|||
<template v-if="element.type === 'txt'"> |
|||
<!--文字--> |
|||
<div |
|||
v-bind="element.control" |
|||
:class="[element.config.className]" |
|||
v-html="element.control.modelValue" |
|||
> |
|||
</div> |
|||
</template> |
|||
<template v-if="element.type === 'table'"> |
|||
<el-text v-if="element.item&&element.item.name">{{element.item.name}}}</el-text> |
|||
<TablePage :data="element" :type="type" /> |
|||
</template> |
|||
<template v-if="element.type === 'grid'"> |
|||
<el-row class="form-row" :style="type === 15?'padding: 0 0 20px 0;':''" :class="[element.className]"> |
|||
<el-col |
|||
class="form-col" |
|||
:class="{ |
|||
'active-col': activeKey === getGroupName(col), |
|||
[col.className]: col.className |
|||
}" |
|||
v-bind="col.attr" |
|||
v-for="(col, i) in element.columns" |
|||
:key="i" |
|||
|
|||
> |
|||
<FormItemGroup :data="col.list" data-type="not-nested" /> |
|||
<div class="drag-control" v-if="type === 15"> |
|||
<div class="item-control"> |
|||
<i |
|||
class="icon-del" |
|||
@click.stop="click('delGridChild', i as number, element.columns)" |
|||
> |
|||
</i> |
|||
</div> |
|||
</div> |
|||
</el-col> |
|||
</el-row> |
|||
</template> |
|||
<template v-if="element.type === 'card'"> |
|||
<el-collapse model-value="1"> |
|||
<el-collapse-item :title="element.item.label" name="1"> |
|||
<template #title v-if="element.help"> |
|||
{{ element.item.label }} |
|||
<Tooltips :content="element.help" /> |
|||
</template> |
|||
<FormItemGroup :data="element.list" data-type="not-nested" /> |
|||
</el-collapse-item> |
|||
</el-collapse> |
|||
</template> |
|||
<template v-if="element.type === 'divider'"> |
|||
<!--分割线--> |
|||
<el-divider v-bind="element.control">{{ element.item && element.item.label }}</el-divider> |
|||
</template> |
|||
<template v-if="element.type === 'div'"> |
|||
<!--div容器--> |
|||
<div |
|||
class="div-layout" |
|||
v-bind="element.control" |
|||
:class="{ |
|||
[element.className]: element.className, |
|||
inline: element.config?.inline, |
|||
[element.config?.textAlign]: element.config?.textAlign |
|||
}" |
|||
> |
|||
<FormItemGroup :data="element.list" data-type="not-nested" /> |
|||
</div> |
|||
</template> |
|||
<template v-if="element.type === 'flex'"> |
|||
|
|||
<!----> |
|||
<FormItemGroup :tableinfo="props.tableinfo" :data="element.list" :alldata="props.alldata" data-type="not-flex" v-if="type === 15" /> |
|||
<flex-box :data="element" v-else /> |
|||
<el-button |
|||
style="position: relative; top: 0px; left: 10px" |
|||
v-if="element.config.addBtnText && type === 15" |
|||
size="small" |
|||
> |
|||
{{ element.config.addBtnText }} |
|||
</el-button> |
|||
|
|||
</template> |
|||
<template v-if="element.type === 'button'"> |
|||
|
|||
<div |
|||
:class="[element.config?.className]" |
|||
:style="{ 'text-align': element.config?.textAlign }" |
|||
> |
|||
<el-button |
|||
v-bind="element.control" |
|||
@click="clickBtn(element.control)" |
|||
color="#626aef" |
|||
> |
|||
<td :style="getFormItemLableStyle(element.styles)">{{ element.control?.label }}</td> |
|||
</el-button> |
|||
</div> |
|||
</template> |
|||
<FormItem v-else :data="element" /> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
<style lang='scss' scoped> |
|||
|
|||
</style> |
|||
@ -0,0 +1,58 @@ |
|||
<!-- |
|||
@ 作者: 秦东 |
|||
@ 时间: 2024-12-05 13:29:08 |
|||
@ 备注: 数值控件 |
|||
--> |
|||
<script lang='ts' setup> |
|||
import { AnalysisCss,AnalysisInputCss } from '@/api/common/cssInfo' |
|||
const props = withDefaults( |
|||
defineProps<{ |
|||
data: FormList |
|||
tablekey: any |
|||
numrun?: number |
|||
modelValue?: any // 子表和弹性布局时时有传 |
|||
tProp?: string // 子表时的form-item的prop值，用于子表校验用 |
|||
}>(), |
|||
{} |
|||
) |
|||
const type = computed(() => { |
|||
return formProps.value.type |
|||
}) |
|||
const emits = defineEmits<{ |
|||
(e: 'update:modelValue', value: string): void |
|||
}>() |
|||
const value = computed({ |
|||
get: () => { |
|||
return props.modelValue |
|||
}, |
|||
set: (newVal: any) => { |
|||
emits('update:modelValue', newVal) |
|||
}, |
|||
}); |
|||
const configStyle = computed(() => { |
|||
return props.data.styles || {} |
|||
}) |
|||
/** |
|||
@ 作者: 秦东 |
|||
@ 时间: 2024-03-01 09:07:11 |
|||
@ 功能: 布局处理 |
|||
*/ |
|||
const getFormItemLableStyle = (ele: any) => { |
|||
if(ele?.labelStyle){ |
|||
// console.log("返回栅格宽度3",AnalysisCss(ele?.labelStyle)) |
|||
return AnalysisCss(ele?.labelStyle) |
|||
} |
|||
} |
|||
const getFormItemInputStyle = (ele: any,sty:number) => { |
|||
if(ele?.inputStyle){ |
|||
//console.log("返回栅格宽度4",AnalysisInputCss(ele?.inputStyle,sty)) |
|||
return AnalysisInputCss(ele?.inputStyle,sty) |
|||
} |
|||
} |
|||
</script> |
|||
<template> |
|||
<el-input v-bind="$props" v-model="value" :style="getFormItemInputStyle(configStyle,2)" :input-style="getFormItemInputStyle(configStyle,3)" oninput ="value=value.replace(/[^\d.]/g, '').replace(/\.{2,}/g, '.').replace('.', '$#$').replace(/\./g, '').replace('$#$', '.').replace(/^\./g, '')" placeholder="请输入"></el-input> |
|||
</template> |
|||
<style lang='scss' scoped> |
|||
|
|||
</style> |
|||
@ -0,0 +1,71 @@ |
|||
<!-- |
|||
@ 作者: 秦东 |
|||
@ 时间: 2024-12-05 16:20:59 |
|||
@ 备注: 行政组织选择 |
|||
--> |
|||
<script lang='ts' setup> |
|||
import { getOrgTreeList } from '@/api/hr/org/index' |
|||
const props = withDefaults( |
|||
defineProps<{ |
|||
data: FormList |
|||
tablekey: any |
|||
numrun?: number |
|||
modelValue?: any // 子表和弹性布局时时有传 |
|||
tProp?: string // 子表时的form-item的prop值，用于子表校验用 |
|||
}>(), |
|||
{} |
|||
) |
|||
const emits = defineEmits<{ |
|||
(e: 'update:modelValue', numVal: any): void |
|||
}>() |
|||
|
|||
const value = computed({ |
|||
get: () => { |
|||
if (props.modelValue != "" && props.modelValue != undefined){ |
|||
return props.modelValue*1 |
|||
}else{ |
|||
return props.modelValue |
|||
} |
|||
}, |
|||
set: (newVal: any) => { |
|||
emits('update:modelValue', newVal) |
|||
}, |
|||
}); |
|||
|
|||
const orgTreeList = ref<orgInfo[]>(); |
|||
const orgTreeLoading = ref(false); //加载行政组织树 |
|||
const orgTreeProps ={ |
|||
children: 'child', |
|||
label: 'name', |
|||
} //行政组织树对照值 |
|||
/** |
|||
@ 作者: 秦东 |
|||
@ 时间: 2024-12-05 16:23:01 |
|||
@ 功能: 获取行政组织 |
|||
*/ |
|||
function haveOrgTreeInfo(){ |
|||
orgTreeLoading.value = true; |
|||
getOrgTreeList({"orgid": 309}) |
|||
.then(({ data })=>{ |
|||
orgTreeList.value = data |
|||
}).finally(()=>{orgTreeLoading.value = false;}) |
|||
} |
|||
onBeforeMount(() => { |
|||
haveOrgTreeInfo(); |
|||
}) |
|||
</script> |
|||
<template> |
|||
<el-tree-select |
|||
v-bind="$props" |
|||
v-model="value" |
|||
v-loading="orgTreeLoading" |
|||
node-key="id" |
|||
:props="orgTreeProps" |
|||
:data="orgTreeList" |
|||
check-strictly |
|||
:render-after-expand="false" |
|||
/> |
|||
</template> |
|||
<style lang='scss' scoped> |
|||
|
|||
</style> |
|||
Loading…
Reference in new issue