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