123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237 |
- <template>
- <div class="form-property">
- <config-tabs v-model:active="activeType" :group-list="groupList"></config-tabs>
- <div class="config-form-wrapper">
- <div v-show="activeType === 'field' && !selectItem?.id" class="empty-form--text">请添加字段</div>
- <cip-form v-show="activeType === 'field' && selectItem.id"
- label-position="top"
- :model="itemConfig"
- @update:model="updateSelectItem"
- :field-list="fieldComponentConfigureFieldConfigList"
- model-key="id">
- <template #labelWidthInput="{fieldKey, updateModel}">
- <cip-input-switch :model-value="itemConfig[fieldKey]" @update:modelValue="updateModel">
- <template #input="{disabled, modelValue, updateModelValue}">
- <el-input-number :disabled="disabled"
- :modelValue="modelValue"
- :step="10"
- :min="0"
- controls-position="right"
- @update:modelValue="updateModelValue"></el-input-number>
- </template>
- </cip-input-switch>
- </template>
- <template #validateValueInput="{fieldKey, updateModel}">
- <cip-input-switch :model-value="itemConfig[fieldKey]" @update:modelValue="updateModel">
- <template #input="{disabled, modelValue, updateModelValue}">
- <el-select :disabled="disabled"
- :model-value="modelValue"
- @update:modelValue="updateModelValue"
- placeholder="选择值类型"
- clearable style="width:100%">
- <el-option value="email" label="电子邮箱"></el-option>
- <el-option value="mobilePhone" label="手机号"></el-option>
- <el-option value="identityCard" label="身份证号"></el-option>
- </el-select>
- </template>
- </cip-input-switch>
- </template>
- <template #regexpValidateInput="{fieldKey, updateModel}">
- <cip-input-switch :model-value="itemConfig[fieldKey]" @update:modelValue="updateModel">
- <template #input="{disabled, modelValue, updateModelValue}">
- <el-input placeholder="填写正则表达式"
- :disabled="disabled"
- :model-value="modelValue"
- @update:modelValue="updateModelValue"
- clearable>
- </el-input>
- </template>
- </cip-input-switch>
- </template>
- <template #dependOnInput="{disabled, fieldKey, updateModel}">
- <el-select multiple
- :disabled="disabled"
- :model-value="itemConfig[fieldKey]"
- @update:modelValue="updateModel"
- placeholder="选择数据依赖"
- clearable style="width:100%">
- <el-option v-for="item in dependOnSelectList" :key="item.id" :value="item.key" :label="`${item.config.label}(${item.key})`"></el-option>
- </el-select>
- </template>
- <template #changeValueStrInput="{fieldKey, updateModel}">
- <code-mirror-dialog fn-name="changeValue" :fieldKey="fieldKey" :updateModel="updateModel" :itemConfig="itemConfig"/>
- </template>
- <template #changeConfigStrInput="{fieldKey, updateModel}">
- <code-mirror-dialog fn-name="changeConfig" :fieldKey="fieldKey" :updateModel="updateModel" :itemConfig="itemConfig"/>
- </template>
- </cip-form>
- <cip-form v-show="activeType === 'form'"
- label-position="top"
- :model="data"
- @update:model="updateData"
- :field-list="formConfigFieldConfigList"></cip-form>
- <!-- <cip-form v-show="activeType === 'column'"-->
- <!-- label-position="top"-->
- <!-- :model="tableConfig"-->
- <!-- @update:model="updateTableItem"-->
- <!-- :field-list="columnConfigFieldConfigList"-->
- <!-- :inline="false"></cip-form>-->
- </div>
- </div>
- </template>
- <script>
- import { computed, nextTick, ref, watch } from 'vue'
- import CipForm from '@cip/components/cip-form'
- import CipInputSwitch from '@cip/components/cip-input-switch'
- import ConfigTabs from './config-tabs'
- import { formConfigFieldConfigList, getComponentConfigure } from './config'
- import { mergeFieldConfig, configMapToList } from '@cip/utils/config-util'
- import { configureOptionsFieldConfigMap, defaultConfigureOptions } from '@cip/components/cip-form-input/input-configure-options'
- import { ElInputNumber, ElSelect, ElOption, ElInput } from 'element-plus'
- import CodeMirrorDialog from './code-mirror-dialog.vue';
- import { isLayoutType } from '@cip/components/cip-form-layout/util'
- export default {
- components: {
- CipForm,
- CipInputSwitch,
- ConfigTabs,
- ElInputNumber,
- ElSelect,
- ElOption,
- ElInput,
- CodeMirrorDialog
- },
- props: {
- selectItem: { type: Object, default: () => ({}) },
- data: Object
- },
- name: 'FormProperty',
- emits: ['update:data', 'update:selectItem', 'update:tableItem'],
- setup (props, { emit }) {
- const activeType = ref('field')
- const groupList = ref([
- { label: '字段配置', value: 'field' },
- { label: '表单配置', value: 'form' }
- // { label: '列表配置', value: 'column' }
- ])
- const itemConfig = computed(() => {
- const result = props.selectItem.config || {}
- result.key = props.selectItem.key
- result.id = props.selectItem.id
- console.log(props.data,itemConfig);
- return result
- })
- const getFieldComponentConfigureFieldConfigList = async (val) => {
- let configure
- try {
- configure = await getComponentConfigure(val)
- } catch (e) {
- // 若获取配置发生错误直接使用默认配置
- console.warn(`form-design: 获取${val}组件配置文件发生错误,使用默认配置进行替换`)
- configure = defaultConfigureOptions()
- }
- return configMapToList(mergeFieldConfig(configure, configureOptionsFieldConfigMap))
- }
- const fieldComponentConfigureFieldConfigList = ref([])
- watch(() => itemConfig.value.type, (val) => {
- if (val) {
- fieldComponentConfigureFieldConfigList.value = []
- // dependOn存在缓存问题,暂时先进行清空再赋值操作
- getFieldComponentConfigureFieldConfigList(val).then(res => {
- nextTick(() => {
- fieldComponentConfigureFieldConfigList.value = res
- })
- })
- } else {
- return []
- }
- }, { immediate: true })
- const tableConfig = computed(() => {
- return props.selectItem?.config?.tableItem ?? {}
- })
- const getOtherKeyItem = (item, otherKey) => {
- return {
- config: {
- label: item.config?.label
- },
- id: otherKey,
- key: otherKey
- }
- }
- const getDependOnSelectList = (list = [], keyList = [], totalFields = [], otherKeyList = []) => {
- list.forEach((item) => {
- const type = item.config?.type
- if (isLayoutType(type)) {
- const options = item.config.options || []
- const children = options.map((option) => option.children).flat()
- getDependOnSelectList(children, keyList, totalFields, otherKeyList)
- } else if (type === 'table') {
- const options = item.config?.options
- if (options?.length) {
- getDependOnSelectList(options, keyList, totalFields, otherKeyList)
- }
- } else {
- keyList.push(item)
- if(item?.config?.otherKey){
- const otherKey = item.config.otherKey
- if(Array.isArray(otherKey)){
- otherKeyList = [ ...otherKeyList, ...otherKey.map(key => getOtherKeyItem(item, key)) ]
- } else {
- otherKeyList.push(getOtherKeyItem(item, otherKey))
- }
- }
- }
- })
- return {keyList, otherKeyList}
- }
- const dependOnSelectList = computed(() => {
- const { keyList, otherKeyList } = getDependOnSelectList(props?.data?.list ?? [])
- return [...keyList, ...otherKeyList].filter(item => item.key !== itemConfig.value.key)
- })
- const updateData = (val) => {
- emit('update:data', val)
- }
- const updateSelectItem = (val) => {
- emit('update:selectItem', val)
- }
- const updateTableItem = val => {
- emit('update:tableItem', val)
- }
- const onActivated = (name) => {
- activeType.value = name
- }
- return {
- formConfigFieldConfigList,
- fieldComponentConfigureFieldConfigList,
- // columnConfigFieldConfigList,
- itemConfig,
- tableConfig,
- onActivated,
- groupList,
- activeType,
- updateData,
- updateSelectItem,
- updateTableItem,
- dependOnSelectList
- }
- }
- }
- </script>
- <style lang="less">
- .form-property{
- height: 100%;
- }
- .config-form-wrapper{
- height: calc(100% - 45px);
- position: relative;
- overflow: auto;
- .cip-form{
- padding: 10px;
- }
- //padding: 10px;
- }
- </style>
|