form-designer-xinyi 1.0.0

package/packages/ui/antd/formLogic/actionItem.vue

@@ -0,0 +1,46 @@
+<template>
+    <div class="mb-2 w-full">
+        <Space>
+            <Select class="w-100px" v-model:value="innerValue.trigger" :options="props.triggerOptions"
+                placeholder="选择动作"></Select>
+            <div class="flex w-340px">
+                <Select class="flex-1" v-model:value="innerValue.field" :options="props.fieldOptions"
+                    placeholder="选择字段"></Select>
+                <Select v-if="innerValue.trigger === 'setValue'" class="flex-1 ml-2" v-model:value="innerValue.value"
+                    :options="props.fieldOptions" placeholder="选择字段"></Select>
+            </div>
+            <div class="w-28px h-28px cursor-pointer bg-red-100 text-red-400 hover:bg-red-400 border-solid border-1px border-red-300 rounded-full flex justify-center items-center hover:text-white"
+                @click="handleDelete">
+                <span class="iconfont epic-icon-shanchu1" />
+            </div>
+        </Space>
+    </div>
+</template>
+<script lang="ts" setup>
+import { useVModel } from '@vueuse/core'
+import { ActionItem } from './types'
+import { Space, Select } from 'ant-design-vue'
+
+const emit = defineEmits(['update:modelValue', 'delete'])
+
+const props = defineProps<{
+    modelValue: ActionItem;
+    fieldOptions: {
+        label: string | undefined,
+        value: string | undefined
+    }[];
+    triggerOptions: {
+        label: string | undefined,
+        value: string | undefined
+    }[];
+}>()
+const innerValue = useVModel(props, 'modelValue', emit)
+
+
+
+
+function handleDelete() {
+    emit('delete')
+}
+
+</script>

package/packages/ui/antd/formLogic/conditionEdit.vue

@@ -0,0 +1,111 @@
+<template>
+    <div class="flex">
+        <div class="logical-operator" v-if="innerValue.conditions.length">
+            <div class="logical-operator__line"></div>
+            <Switch v-model:checked="innerValue.operator" checked-children="且" checkedValue="and" unCheckedValue="or"
+                un-checked-children="或" />
+        </div>
+        <div class="flex-1">
+            <ConditionItem v-model="innerValue.conditions[index]" v-for="(_condition, index) in innerValue.conditions"
+                :key="index" :fieldOptions="fieldOptions" @delete="handleDelete(index)" />
+
+            <Button class="w-100%" type="dashed" @click="handleAdd">
+                <template #icon>
+                    <span class="iconfont epic-icon-tianjia mr-1" />
+                </template>
+                添加条件
+            </Button>
+        </div>
+
+    </div>
+</template>
+<script lang="ts" setup>
+import { useVModel } from '@vueuse/core'
+import { Condition } from './types'
+import { Switch, Button, Select } from 'ant-design-vue'
+import { Designer } from '@epic-designer/core'
+import { getFormSchemas } from '@epic-designer/utils'
+import { inject, computed } from 'vue'
+import ConditionItem from './conditionItem.vue'
+const designer = inject('designer') as Designer
+
+const checkedNode = computed(() => {
+    return designer.state.checkedNode
+})
+
+const fieldOptions = computed(() => {
+    return getFormSchemas([checkedNode.value!], checkedNode.value?.componentProps.name).map(item => ({ label: item.label, value: item.field })).reverse()
+})
+
+const props = defineProps<{
+    modelValue: Condition
+}>()
+const emit = defineEmits(['update:modelValue'])
+
+
+
+const innerValue = useVModel(props, 'modelValue', emit)
+
+function handleAdd() {
+
+    innerValue.value.conditions.push({
+    })
+
+}
+
+function handleDelete(index) {
+    innerValue.value.conditions.splice(index, 1);
+}
+
+</script>
+
+<style lang="less" scoped>
+.logical-operator {
+    width: 60px;
+    position: relative;
+    display: flex;
+    align-items: center;
+
+    .logical-operator__line {
+        position: absolute;
+        left: calc(32% - 1px);
+        height: calc(100% - 28px);
+        width: 30px;
+        border-width: 1px 0 1px 1px;
+        border-top-style: solid;
+        border-bottom-style: solid;
+        border-left-style: solid;
+        border-top-color: var(--epic-border-color);
+        border-bottom-color: var(--epic-border-color);
+        border-left-color: var(--epic-border-color);
+        border-image: initial;
+        border-right-style: initial;
+        border-right-color: initial;
+        border-radius: 5px 0 0 5px;
+
+        &:before {
+            content: "";
+            position: absolute;
+            top: 0;
+            right: 0;
+            transform: translate(100%) translateY(-50%);
+            width: 8px;
+            height: 8px;
+            border: 1px solid var(--epic-border-color);
+            border-radius: 50%
+        }
+
+        &:after {
+            content: "";
+            position: absolute;
+            bottom: 0;
+            right: 0;
+            transform: translate(100%) translateY(50%);
+            width: 8px;
+            height: 8px;
+            border: 1px solid var(--epic-border-color);
+            border-radius: 50%
+        }
+    }
+}
+</style>

package/packages/ui/antd/formLogic/conditionItem.vue

@@ -0,0 +1,150 @@
+<template>
+    <div class="mb-4">
+        <Space>
+            <Select class="w-100px" v-model:value="innerValue.field" :options="props.fieldOptions"
+                placeholder="选择字段"></Select>
+            <Select v-model:value="innerValue.operator" class="w-90px" v-if="innerValue.field"
+                :options="operatorOptions" placeholder="选择判断条件"></Select>
+            <ENode
+                v-if="innerValue.field && innerValue.operator && showValueComponentOperators.includes(innerValue.operator)"
+                v-model="innerValue.value" :component-schema="{ ...currentNode, noFormItem: true }"></ENode>
+            <div class="w-28px h-28px cursor-pointer bg-red-100 text-red-400 hover:bg-red-400 border-solid border-1px border-red-300 rounded-full flex justify-center items-center hover:text-white"
+                @click="handleDelete">
+                <span class="iconfont epic-icon-shanchu1" />
+            </div>
+        </Space>
+    </div>
+</template>
+<script lang="ts" setup>
+import { useVModel } from '@vueuse/core'
+import { ConditionItem } from './types'
+import { Space, Select } from 'ant-design-vue'
+import { Designer, ComponentSchema, ENode } from '@epic-designer/core'
+import { findSchemas } from '@epic-designer/utils'
+
+import { inject, computed, watch } from 'vue'
+const designer = inject('designer') as Designer
+const emit = defineEmits(['update:modelValue', 'delete'])
+
+const props = defineProps<{
+    modelValue: ConditionItem,
+    fieldOptions: {
+        label: string | undefined,
+        value: string | undefined
+    }[]
+}>()
+const innerValue = useVModel(props, 'modelValue', emit)
+
+const checkedNode = computed(() => {
+    return designer.state.checkedNode
+})
+
+const currentNode = computed(() => {
+    const currentNode = findSchemas([checkedNode.value!], item => {
+        return item.field === innerValue.value.field
+    }, true) as ComponentSchema
+    return currentNode
+})
+
+
+
+
+const baseOperatorOptions = [
+    {
+        label: '等于',
+        value: 'eq'
+    },
+    {
+        label: '不等于',
+        value: 'neq'
+    },
+]
+
+
+const numberOperatorOptions = [
+    {
+        label: '大于',
+        value: 'gt'
+    },
+    {
+        label: '大于等于',
+        value: 'gte'
+    },
+    {
+        label: '小于',
+        value: 'lt'
+    },
+    {
+        label: '小于等于',
+        value: 'lte'
+    },
+]
+
+const includeOperatorOptions = [
+    {
+        label: '包含',
+        value: 'in'
+    },
+    {
+        label: '不包含',
+        value: 'nin'
+    },
+]
+
+const showValueComponentOperators = [...baseOperatorOptions.map(item => item.value), ...numberOperatorOptions.map(item => item.value), ...includeOperatorOptions.map(item => item.value)]
+
+
+
+const operatorOptions = computed(() => {
+    const options = [
+        {
+            label: '为空',
+            value: 'null'
+        },
+        {
+            label: '非空',
+            value: 'notNull'
+        },
+    ]
+
+
+    if (['input', 'textarea', 'password', 'select'].includes(currentNode.value.type)) {
+        options.unshift(...includeOperatorOptions)
+    }
+
+    if (['number'].includes(currentNode.value.type)) {
+        options.unshift(...numberOperatorOptions)
+    }
+
+    if (['input', 'number', 'textarea', 'password', 'radio', 'checkbox', 'select', 'slider', 'time', 'date', 'cascader', 'switch', 'color-picker','JSelectDept','JSelectMultiple','JDictSelectTag','classifiedDictionary','selectUser'].includes(currentNode.value.type)) {
+        options.unshift(...baseOperatorOptions)
+    }
+// mapLocation
+// signature
+// text
+// downLoad
+// uploadFile
+// areaSelect
+// selectUser
+// classifiedDictionary
+// JDictSelectTag
+// JSelectMultiple
+// JSelectDept
+// inputIdCard
+
+    return options
+})
+
+watch(() => operatorOptions.value, options => {
+    innerValue.value.operator = options[0].value
+})
+
+
+
+
+
+function handleDelete() {
+    emit('delete')
+}
+
+</script>

package/packages/ui/antd/formLogic/drawer.vue

@@ -0,0 +1,124 @@
+<template>
+    <Drawer class="epic-drawer-form-logic" width="550px" title="逻辑规则" v-model:open="open">
+        <div class="epic-drawer-container h-full">
+            <div class="h-full overflow-auto">
+                <Button class="w-full" type="primary" @click="handleAdd">
+                    <template #icon>
+                        <span class="iconfont epic-icon-tianjia mr-1" />
+                    </template>
+                    添加逻辑规则
+                </Button>
+
+                <Card v-for="(rule, index) in logicRules" :key="index" class="mt-2" :bodyStyle="{ padding: '16px' }">
+                    <div class="absolute top-8px right-8px cursor-pointer rounded-full w-24px h-24px text-16px flex items-center justify-center hover:bg-gray-100 rotate-45"
+                        @click=handleDelete(index)>
+                        <span class="iconfont epic-icon-tianjia" />
+                    </div>
+                    <Divider>当满足以下条件时</Divider>
+                    <ConditionEdit v-model="rule.condition" />
+                    <Divider>则执行</Divider>
+                    <ActionEdit v-model="rule.actions" />
+                </Card>
+
+            </div>
+        </div>
+        <div class="epic-modal-footer">
+            <Space align="end">
+                <Button @click="handleClose">关闭</Button>
+                <Button type="primary" @click="handleOk">
+                    确定
+                </Button>
+            </Space>
+        </div>
+    </Drawer>
+</template>
+<script lang="ts" setup>
+import { Button, Card, Drawer, Divider, Space } from 'ant-design-vue'
+import { ref } from 'vue'
+import ActionEdit from './actionEdit.vue'
+import ConditionEdit from './conditionEdit.vue'
+import { LogicRuleItem } from './types'
+const emit = defineEmits(['ok'])
+
+const open = ref<boolean>(false);
+const logicRules = ref<LogicRuleItem[]>([])
+
+
+function showDrawer(rules: LogicRuleItem[] = []) {
+    logicRules.value = rules
+    open.value = true
+}
+
+function handleAdd() {
+    logicRules.value.push({
+        actions: [],
+        condition: {
+            conditions: [],
+            operator: 'and'
+        }
+    })
+}
+
+
+function handleDelete(index) {
+    logicRules.value.splice(index, 1);
+}
+
+function handleClose() {
+    open.value = false
+}
+
+function handleOk() {
+    emit('ok', logicRules.value)
+    handleClose()
+}
+
+
+
+defineExpose({ showDrawer })
+</script>
+
+
+<style lang="less">
+.epic-drawer-form-logic {
+
+    // 覆盖iconfont样式
+    .iconfont {
+        font-family: "epic-iconfont", "iconfont" !important;
+        font-style: normal;
+        font-size: 1em;
+        -webkit-font-smoothing: antialiased;
+        -moz-osx-font-smoothing: grayscale;
+    }
+
+    .ant-drawer-body {
+        padding: 16px 0 24px;
+
+        .epic-drawer-container {
+            padding-bottom: 30px;
+
+            &>div {
+                padding: 0 16px;
+                border-bottom: 1px solid var(--epic-border-color);
+
+                &::-webkit-scrollbar {
+                    width: 8px;
+                    height: 8px;
+                }
+
+                &::-webkit-scrollbar-thumb {
+                    background: #0000002d;
+                    border-radius: 6px;
+                    -webkit-box-shadow: none;
+                }
+
+                &::-webkit-scrollbar-track {
+                    background: transparent;
+                }
+            }
+        }
+
+
+    }
+}
+</style>

package/packages/ui/antd/formLogic/formLogic.vue

@@ -0,0 +1,33 @@
+<template>
+  <div>
+    <Badge :count="props.modelValue?.length ?? 0">
+      <Button @click="handleShowDrawer">
+        <template #icon>
+          <span class="iconfont epic-icon-shezhi mr-1" />
+        </template>
+        配置</Button>
+    </Badge>
+    <Drawer @ok="handleOk" ref="drawerRef" />
+  </div>
+</template>
+<script lang="ts" setup>
+import { ref } from 'vue'
+import { LogicRuleItem } from './types'
+import { Button, Badge } from 'ant-design-vue'
+import Drawer from './drawer.vue'
+const props = defineProps<{
+  modelValue?: LogicRuleItem[]
+}>()
+
+const drawerRef = ref<InstanceType<typeof Drawer>>()
+
+const emit = defineEmits(['update:modelValue'])
+
+function handleShowDrawer() {
+  drawerRef.value?.showDrawer(props.modelValue)
+}
+
+function handleOk(e) {
+  emit('update:modelValue', e)
+}
+</script>

package/packages/ui/antd/formLogic/index.ts

@@ -0,0 +1,11 @@
+import { type ComponentConfigModel } from '@epic-designer/utils'
+
+export default {
+  component: () => import('./formLogic.vue'),
+  defaultSchema: {
+    label: '表单项',
+    type: 'formLogic'
+  },
+  config: {
+  }
+} as ComponentConfigModel

package/packages/ui/antd/formLogic/types.ts

@@ -0,0 +1,25 @@
+export interface ConditionItem {
+    field?: string;
+    operator?: string;
+    value?: any;
+}
+
+export interface Condition {
+    conditions: ConditionItem[];
+    operator: 'or' | 'and';
+}
+
+export interface ActionItem {
+    field?: string;
+    trigger?: string;
+    value?: string;
+}
+
+
+
+export interface LogicRuleItem {
+    actions: ActionItem[];
+    condition: Condition;
+}
+
+export type LogicRules = LogicRuleItem[]

package/packages/ui/antd/index.less

@@ -0,0 +1,33 @@
+.epic-designer-main {
+  .ant-input-number {
+    width: 100%;
+  }
+
+  .ant-collapse-content > .ant-collapse-content-box {
+    padding: 8px;
+  }
+
+  .ant-select {
+    width: 100%;
+  }
+
+  .epic-upload-image {
+    .avatar-uploader > .ant-upload {
+      width: 128px;
+      height: 128px;
+    }
+  }
+}
+
+// 适配k-input-size样式
+.epic-input-size {
+  &.ant-input-affix-wrapper {
+    padding-top: 0;
+    padding-right: 0;
+    padding-bottom: 0;
+  }
+  .ant-select:hover {
+    border: none !important;
+    box-shadow: none !important;
+  }
+}