123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115 |
- import { ref } from 'vue'
- import { VideoPause, VideoPlay } from '@element-plus/icons-vue'
- import { cloneDeep } from '@cip/utils/util'
- import CipDialog from '@cip/components/cip-dialog'
- import CipCodeMirror from '@cip/components/cip-code-mirror'
- import CipTableButton from '@cip/components/cip-table-button'
- import CipMessageBox from '@cip/components/cip-message-box'
- import CipFormRenderPreview from '@cip/components/cip-form-render/preview'
- import CipFormDesignFramework from './widgets/framework'
- import EquipmentRadio from './widgets/equipment-radio'
- import FormComponents from './widgets/form-components'
- import FormDrawing from './widgets/form-drawing'
- import FormProperty from './widgets/form-property'
- import { componentsGroupList } from './components-config'
- import { useSelect } from './hooks'
- export default {
- name: 'CipFormDesign',
- props: {
- scheme: Object,
- componentsGroupList: {
- type: Array,
- default: () => componentsGroupList
- }
- },
- setup (props, { emit }) {
- const equipmentOptions = [
- { value: 'pc', svg: VideoPlay },
- { value: 'mobile', svg: VideoPause }
- ]
- const equipment = ref('pc')
- const { selectItem, selectItemId, changeSelect, updateSelectItem } = useSelect()
- const updateFormConfig = (val) => {
- emit('update:scheme', val)
- }
- const updateList = (value) => {
- const scheme = props.scheme
- scheme.list = value
- updateFormConfig(scheme)
- }
- const updateTableItem = val => {
- if (selectItem.value.config) selectItem.value.config.tableItem = cloneDeep(val)
- }
- const addItem = (item) => {
- // TODO: 考虑如何在当前选中的内容下新增 搜索当前选中元素所在列表及位置 [注:暂不开放此功能]
- }
- const initScheme = () => ({
- labelPosition: 'right',
- labelWidth: 100,
- tableSize: 'small',
- list: []
- })
- const reset = () => {
- CipMessageBox.confirm('确认重置表单配置', '提示', {
- type: 'warning'
- }).then(() => {
- const config = initScheme()
- // 清理已选中的row
- selectItem.value = {}
- updateFormConfig(config)
- }, () => {})
- }
- const previewFormDialog = ref(false)
- const previewForm = () => {
- previewFormDialog.value = true
- }
- const previewJSONDialog = ref(false)
- const previewJSON = () => {
- previewJSONDialog.value = true
- }
- return () => <CipFormDesignFramework>
- {{
- components: () => <FormComponents groupList={props.componentsGroupList} onAdd={(item) => addItem(item)}/>,
- toolbar: () => <div style={{ width: '100%', display: 'flex', justifyContent: 'space-between', itemsAlign: 'center', height: '100%' }}>
- <EquipmentRadio v-model={equipment.value} options={equipmentOptions}/>
- <div>
- <CipTableButton onClick={() => reset()}>重置</CipTableButton>
- <CipTableButton onClick={() => previewForm()}>预览</CipTableButton>
- <CipTableButton onClick={() => previewJSON()}>预览JSON</CipTableButton>
- </div>
- </div>,
- default: () => <>
- <FormDrawing
- data={props.scheme}
- equipment={equipment.value}
- selectId={selectItemId.value}
- onSelect={(item) => changeSelect(item)}
- onUpdateList={(list) => { updateList(list) }}
- />
- <CipFormRenderPreview
- v-model={previewFormDialog.value}
- scheme={props.scheme}
- equipment={equipment.value}
- />
- <CipDialog v-model={previewJSONDialog.value} title={'预览JSON'} showOnly={true}>
- <CipCodeMirror modelValue={props.scheme} theme={'dracula'} height={'500px'}/>
- </CipDialog>
- </>,
- property: () => <FormProperty
- selectItem={selectItem.value}
- data={props.scheme}
- onUpdate:data={(val) => updateFormConfig(val)}
- onUpdate:selectItem={(val) => updateSelectItem(val)}
- onUpdate:tableItem={(val) => updateTableItem(val)}
- />
- }}
- </CipFormDesignFramework>
- }
- }
|