@cicctencent/formily 0.0.0-stage → 0.0.1

package/src/components/base/event/index.ts

@@ -0,0 +1,226 @@
+import { ref, getCurrentInstance, watch, computed } from 'vue';
+import {
+    createForm,
+    onFormInit,
+    onFormValuesChange,
+} from '@formily/core';
+import { transformSchema } from '../../../transform';
+import { Form } from '@formily/core';
+import { FormilyValidate } from '../../../validate/index';
+import { ElMessage } from '@cicctencent/jtui'
+import { cloneDeep } from '@cicctencent/ark-util'
+interface Event {
+    key: string;
+    form?: Form;
+    schema?: Object;
+    lastName?: string;
+}
+export default function (props, emit) {
+    const dialogVisible = ref(false);
+    const eventList = ref<Array<Event>>([]);
+    let formValue: any = '';
+    const ctx = getCurrentInstance();
+    /** schema 配置 */
+    const schema = computed(() => JSON.parse(props?.schema ?? '{}'))
+    const schemaConfig = computed(() => {
+        if (schema.value?.list?.items) {
+            return transformSchema({ schema: schema.value?.list?.items ?? {}, ctx, layout: "horizontal" });
+        }
+        return {};
+    });
+
+  const editorState = computed(()=>{
+      const list = props?.modelValue?.list??[];
+      return list.length > 0;
+  })
+
+    // 打开对话框
+    let counter = 0;
+    function openDialog() {
+        formValue = JSON.parse(JSON.stringify(props.modelValue));
+        eventList.value = [];
+        // 数据回显
+        if (Array.isArray(formValue?.list) && formValue?.list?.length) {
+            (formValue.list as any[]).forEach((item,index) => {
+                eventList.value.push({
+                  // 光靠Date.now 不稳定
+                    key: Date.now() + counter + '',
+                    lastName: item?.handler?.name,
+                });
+               counter++
+            });
+        }
+
+        eventList.value.forEach((it,index) =>{
+
+        it.form = createForm({
+          effects() {
+            onFormInit(form => {
+              // 存在自定义组件的回显,必须在init阶段setValues,否则自定义组件拿不到值
+              form.setValues(JSON.parse(JSON.stringify(formValue.list[index])));
+                });
+            onFormValuesChange((form) => {
+              console.log('event onFormValuesChange',form.values)
+              eventChangeEffect(form,index)
+                return;
+              });
+            },
+            readOnly: props.readOnly,
+        })
+        it.schema = getSchemaConfig(formValue.list[index]?.handler?.name || '')
+
+        })
+
+        // 设置表单
+
+
+        dialogVisible.value = true;
+    }
+
+    /**
+     *  事件变化副作用
+     * @param form
+     * @param index
+     */
+    function eventChangeEffect(form,index){
+        if(eventList.value.length && eventList.value[index].lastName !== form.values?.handler?.name){
+          // 记录事件名
+          eventList.value[index].lastName = form.values?.handler?.name
+          // 重新设置schema
+          eventList.value[index].schema = getSchemaConfig(form.values.handler.name)
+          //回收字段模型
+          form.clearFormGraph("handler.options.*")
+        }
+    }
+
+    function validate(){
+        let validateRes = [];
+         eventList.value.forEach(it =>{
+            const result = new FormilyValidate({schema: it.schema,data:it.form.values}).validate();
+            validateRes = validateRes.concat(result);
+         })
+         console.log("validateRes",validateRes)
+         return validateRes;
+    }
+
+    function onConfirm() {
+      // 触发校验
+      eventList.value.forEach(m => m.form.validate())
+      // 校验标识  0 通过  -1 不通过
+      let validateFlag = 0;
+      const validateRes = validate();
+     for(let i = 0;i<eventList.value.length;i++){
+      const item = eventList.value[i];
+
+      if( validateRes.length || !item.form.values?.handler?.name){
+        validateFlag = -1;
+        break;
+        }
+     }
+
+     if(validateFlag !== -1){
+      const result: any[] = [];
+
+      eventList.value.forEach(item => {
+        const data = {...item.form.values}
+        // 记录name, 用于校验
+        data.handler = Object.assign(data.handler || {},{ _validateKey: data?.handler?.name})
+        result.push({ ...data });
+      });
+
+            const eventRes = {
+                list: [],
+            };
+            eventRes.list = [...result];
+            emit('change', eventRes);
+            dialogVisible.value = false;
+        }else{
+        ElMessage.error({ zIndex: 9999, message: "请补全表单必填信息"});
+     }
+    }
+
+    function onCancel() {
+        // ElMessageBox.confirm('放弃本次修改内容?', '提示', {
+        //     type: 'warning',
+        //     confirmButtonText: '确定',
+        //     cancelButtonText: '取消',
+        // }).then(() => {
+        //     dialogVisible.value = false;
+        // });
+        dialogVisible.value = false;
+    }
+
+    /**
+     *  添加新事件
+     */
+    function addEvent() {
+        // key生成规则: 当前的时间戳
+        const event: Event = {
+            key: Date.now() + '',
+        };
+
+        eventList.value.push(event);
+        event.schema = getSchemaConfig('')
+        event.form = createForm({
+          effects() {
+              onFormValuesChange((form) => {
+                console.log('event onFormValuesChange',form.values)
+                eventChangeEffect(form,eventList.value.length - 1 )
+                  return;
+              });
+          },
+          readOnly: props.readOnly,
+      })
+    }
+
+    function getSchemaConfig(eName: string){
+      try {
+        const root = schema.value.list.items
+        const DYNAMIC_INJECT_SCHEMA = cloneDeep(root.properties.handler.properties.options);
+        let config;
+        if(DYNAMIC_INJECT_SCHEMA[eName]){
+          // 不存在事件名
+          config = cloneDeep(root)
+          config.properties.handler.properties.options = DYNAMIC_INJECT_SCHEMA[eName]
+        }else{
+          // 存在事件名
+          config = cloneDeep(root)
+          config.properties.handler.properties.options = {}
+        }
+        return transformSchema({ schema: config || {}, ctx, layout: "horizontal" })
+      } catch (error) {
+        console.error('getSchemaConfig',error)
+      }
+    }
+
+    function onDialogClose() {}
+
+    function onDialogClosed() {}
+
+    function onDialogOpened() {}
+
+    /** 删除事件 */
+    function onDeleteEvent(key: string) {
+        /** 通过key删除事件,比通过index安全,key是唯一不变的 */
+        const index = eventList.value.findIndex(m => m.key === key);
+        if (-1 === index) {
+            return;
+        }
+
+        eventList.value.splice(index, 1);
+    }
+    return {
+        dialogVisible,
+        schemaConfig,
+        eventList,
+        editorState,
+        openDialog,
+        onConfirm,
+        onCancel,
+        onDialogClose,
+        onDialogClosed,
+        onDialogOpened,
+        addEvent,
+        onDeleteEvent,
+    };
+}

package/src/components/base/event/index.vue

@@ -0,0 +1,356 @@
+<template>
+  <div class="event-wrap">
+    <div class="button-wrap">
+      <span class="button-wrap-label" :class="{ 'editor-class': editorState }"
+        >事件</span
+      >
+      <span
+        :style="{ opacity: editorState ? '.6' : '1' }"
+        class="button-wrap-value"
+        @click="openDialog"
+        >编辑</span
+      >
+    </div>
+    <el-dialog
+      v-model="dialogVisible"
+      title="编辑事件"
+      :width="800"
+      @close="onDialogClose"
+      @closed="onDialogClosed"
+      @opened="onDialogOpened"
+    >
+      <div class="event-content">
+        <div
+          class="event-content--item"
+          v-for="(item, index) in eventList"
+          :key="item.key"
+        >
+          <div class="schema-title-box">
+            <span class="schema-title-box--title">事件{{ index + 1 }}</span>
+            <div
+              class="schema-title-box--icon"
+              @click="onDeleteEvent(item.key)"
+              :style="{ 'pointer-events': readOnly ? 'none' : 'auto' }"
+            >
+            <!-- 删除图标 -->
+              <svg
+                t="1677826419297"
+                class="icon"
+                viewBox="0 0 1024 1024"
+                version="1.1"
+                xmlns="http://www.w3.org/2000/svg"
+                p-id="2805"
+                width="18"
+                height="18"
+              >
+                <path
+                  d="M358.925672 596.814688v30.450522c0 17.248849 13.985526 31.233352 31.233352 31.233352 17.248849 0 31.233352-13.985526 31.233352-31.233352v-30.450522c0-17.248849-13.985526-31.233352-31.233352-31.233352-17.248849 0-31.233352 13.985526-31.233352 31.233352zM602.506317 596.814688v30.450522c0 17.248849 13.985526 31.233352 31.233352 31.233352s31.233352-13.985526 31.233351-31.233352v-30.450522c0-17.248849-13.984503-31.233352-31.233351-31.233352s-31.233352 13.985526-31.233352 31.233352zM437.047937 699.686636c-14.650675 9.104355-19.155269 28.360931-10.04989 43.01263 11.015891 17.73185 41.238216 47.740304 84.651982 47.740304 43.195801 0 73.79368-29.780257 85.059258-47.379077 9.216919-14.391778 5.03262-33.338293-9.237385-42.742477-14.270005-9.393951-33.576723-5.409197-43.159985 8.739035-0.12689 0.188288-13.049201 18.915815-32.661888 18.915815-19.028379 0-30.93864-17.274432-31.772634-18.530028-9.175987-14.412244-28.259624-18.788925-42.829458-9.756202zM907.576407 160.082952H699.352015v-26.882254c0-40.145325-32.692586-72.807213-72.878844-72.807213h-229.046626c-40.186258 0-72.878844 32.661887-72.878844 72.807213v26.882254H116.323309c-17.248849 0-31.233352 13.984503-31.233352 31.233352s13.984503 31.233352 31.233352 31.233351h791.253098c17.248849 0 31.233352-13.984503 31.233352-31.233351s-13.985526-31.233352-31.233352-31.233352z m-270.692119 0H387.014404v-26.882254c0-5.607718 4.768607-10.340509 10.411117-10.340509h229.046627c5.64251 0 10.411117 4.732791 10.411117 10.340509v26.882254z"
+                  fill="#606266"
+                  p-id="2806"
+                ></path>
+                <path
+                  d="M824.286446 259.279185c-17.248849 0-31.233352 13.984503-31.233352 31.233352v530.07261c0 40.089044-32.692586 72.705905-72.878844 72.705906H303.725466c-40.186258 0-72.878844-32.616862-72.878844-72.705906v-530.07261c0-17.248849-13.984503-31.233352-31.233352-31.233352s-31.233352 13.984503-31.233352 31.233352v530.07261c0 74.535577 60.71378 135.172609 135.345548 135.172609h416.448784c74.632791 0 135.345548-60.637032 135.345548-135.172609v-530.07261c0-17.248849-13.984503-31.233352-31.233352-31.233352z"
+                  fill="#606266"
+                  p-id="2807"
+                ></path>
+                <path
+                  d="M355.781052 259.279185c-17.248849 0-31.233352 13.984503-31.233351 31.233352v167.494758c0 17.248849 13.985526 31.233352 31.233351 31.233352 17.248849 0 31.233352-13.985526 31.233352-31.233352v-167.494758c0-17.248849-13.984503-31.233352-31.233352-31.233352zM699.352015 458.007295v-167.494758c0-17.248849-13.984503-31.233352-31.233351-31.233352s-31.233352 13.984503-31.233352 31.233352v167.494758c0 17.248849 13.985526 31.233352 31.233352 31.233352s31.233352-13.984503 31.233351-31.233352zM511.949858 489.240647c17.248849 0 31.233352-13.985526 31.233352-31.233352v-167.494758c0-17.248849-13.985526-31.233352-31.233352-31.233352s-31.233352 13.984503-31.233352 31.233352v167.494758c-0.001023 17.248849 13.984503 31.233352 31.233352 31.233352z"
+                  fill="#606266"
+                  p-id="2808"
+                ></path>
+              </svg>
+            </div>
+          </div>
+          <FormProvider :form="item.form">
+            <SchemaField
+              :schema="item.schema"
+              :scope="{ filterOptions, ...scopes }"
+            />
+          </FormProvider>
+        </div>
+        <div
+          class="add-button"
+          @click="addEvent"
+          :style="{ 'pointer-events': readOnly ? 'none' : 'auto' }"
+        >
+          添加事件
+        </div>
+      </div>
+      <template #footer>
+        <el-button @click="onCancel"> 取消 </el-button>
+        <el-button type="primary" @click="onConfirm"> 确定 </el-button>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { defineComponent } from 'vue';
+import { FormProvider } from '@formily/vue';
+// @ts-ignore
+import useEvent from './index';
+import * as scopes from '../../../scope';
+defineComponent({
+  name: 'FormilyEvent',
+});
+const props = defineProps({
+  schema: {
+    type: String,
+    default: () => {
+      return '{}';
+    },
+  },
+  options: {
+    type: Array,
+    default: () => [],
+  },
+  modelValue: {
+    type: Object,
+    default: () => {
+      return {};
+    },
+  },
+  readOnly: {
+    type: Boolean,
+    default: false,
+  },
+  addButtonType: {
+    type: String,
+    default: 'primary',
+  },
+  plain: {
+    type: Boolean,
+    default: true,
+  },
+});
+const emits = defineEmits(['change', 'fileUpload']);
+const filterOptions = (eventType: string) => {
+  const options: any[] = eventType
+    ? props.options.filter(
+        (op: any) =>
+          (Array.isArray(op.eventType) && op.eventType.includes(eventType)) ||
+          op.eventType === eventType
+      )
+    : [];
+  return options;
+};
+
+const {
+  dialogVisible,
+  schemaConfig,
+  eventList,
+  editorState,
+  openDialog,
+  onCancel,
+  onConfirm,
+  onDialogClose,
+  onDialogClosed,
+  onDialogOpened,
+  addEvent,
+  onDeleteEvent,
+} = useEvent(props, emits);
+</script>
+
+<style lang="scss">
+.event-wrap {
+  .button-wrap {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    border: none !important;
+    padding: 0 18px 16px 18px;
+    margin: 0 !important;
+    &-value {
+      font-style: normal;
+      font-weight: 400;
+      font-size: 14px;
+      line-height: 20px;
+      /* identical to box height */
+      color: #4b515e;
+      &:hover {
+        cursor: pointer;
+      }
+    }
+
+    &-label {
+      color: rgba(2, 2, 2, 0.4);
+      font-size: 16px;
+      line-height: 24px;
+      font-weight: 600;
+      font-style: normal;
+      &.editor-class {
+        color: #020202 !important;
+      }
+    }
+  }
+
+  .el-dialog {
+    box-sizing: border-box;
+    padding: 24px 32px;
+  }
+  .el-dialog__headerbtn {
+    opacity: 0.8;
+    width: 33px;
+    height: 30px;
+    top: 24px;
+    right: 34px;
+  }
+
+  .el-dialog__header {
+    border-bottom: 1px solid rgba(232, 233, 235, 1);
+    margin-right: 0;
+    font-style: normal;
+    font-weight: 500;
+    font-size: 20px;
+    line-height: 150%;
+    /* identical to box height, or 30px */
+    display: flex;
+    align-items: center;
+    color: #000000;
+    padding: 0 0 12px 0;
+  }
+  .el-dialog__footer {
+    border-top: 1px solid rgba(232, 233, 235, 1);
+    padding: 16px 0 0 0;
+  }
+  .el-dialog__body {
+    height: 535px;
+    overflow-y: scroll;
+    &::-webkit-scrollbar {
+      display: none;
+    }
+  }
+  .formily-element-plus-array-items-item-list-wrap {
+    .formily-element-plus-form-item-label {
+      width: 180px;
+    }
+  }
+
+  .formily-element-plus-array-base-addition {
+    width: auto;
+    top: -2px;
+    left: 0;
+    position: absolute;
+    transform: translateX(120px);
+    .el-icon {
+      display: none;
+    }
+  }
+  .formily-row {
+    position: relative !important;
+    .el-button {
+      padding: 0;
+    }
+
+    .el-button + .el-button {
+      margin-left: 4px;
+    }
+  }
+  /* .formily-element-plus-form-item-layout-horizontal { */
+  .formily-element-plus-array-items-item-inner {
+    margin-left: 120px !important;
+  }
+  /* } */
+
+  .formily-element-plus-form-item-label {
+    margin-top: 10px;
+    width: 120px;
+  }
+  .add-button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 700px;
+    height: 30px;
+    cursor: pointer;
+    border: 1px dashed #999;
+    border-radius: 4px;
+    color: #333;
+    &:hover {
+      border-color: var(--el-color-primary);
+      color: var(--el-color-primary);
+    }
+  }
+
+  .event-content {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+
+    &--item {
+      width: 900px;
+      /* height: 500px; */
+      /* border: 1px solid #999; */
+      border-radius: 4px;
+      box-sizing: border-box;
+      /* padding: 10px; */
+      overflow-y: scroll;
+      margin-bottom: 40px;
+    }
+  }
+
+  .schema-title-box {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    &--title {
+      font-style: normal;
+      font-weight: 600;
+      font-size: 14px;
+      line-height: 20px;
+      /* identical to box height */
+      color: #704528;
+      display: flex;
+      align-items: center;
+      margin-bottom: 22px;
+      &::before {
+        content: '';
+        width: 2px;
+        height: 13px;
+        background: #704528;
+        display: block;
+        margin-right: 6px;
+      }
+    }
+    &--icon {
+      font-weight: 400;
+      font-size: 14px;
+      line-height: 20px;
+      color: #000000;
+      display: flex;
+      align-items: center;
+      cursor: pointer;
+      img {
+        display: block;
+        width: 20px;
+        height: 20px;
+        // border: 1px dashed rgba(0, 0, 0, 0.4);
+        margin-right: 4px;
+      }
+    }
+  }
+}
+
+.schema-box-content > div {
+  .formily-element-plus-form-item-label {
+    width: 10px;
+    color: rgba(0, 0, 0, 1) !important;
+    margin-top: 10px;
+  }
+
+  .formily-element-plus-form-item-label-content {
+    width: 200px;
+  }
+  .el-input,
+  .el-input-number {
+    width: 212px !important;
+    height: 40px !important;
+  }
+  .formily-element-plus-form-item {
+    flex-basis: 33%;
+    flex-grow: 0;
+    flex-shrink: 0;
+    margin-bottom: 16px !important;
+  }
+}
+</style>

package/src/components/cascader/index.ts

@@ -0,0 +1,48 @@
+import { defineComponent, h } from 'vue';
+import { connect, mapProps, mapReadPretty, useField } from '@formily/vue';
+import { observer } from '@formily/reactive-vue';
+import { isVoidField, Field } from '@formily/core';
+import { ElCascader } from '@cicctencent/jtui';
+
+import { PreviewText } from '../preview-text';
+
+export type CascaderProps = typeof ElCascader;
+
+// export const Cascader = connect(
+//   ElCascader,
+//   mapProps({ dataSource: 'options', value: 'modelValue' }),
+//   mapReadPretty(PreviewText.Cascader)
+// )
+
+export const Cascader = observer(
+    defineComponent({
+        name: 'FCascader',
+        props: ['onChange'],
+        setup(props, { attrs, slots }: { [key: string]: any }) {
+            const fieldRef:any = useField();
+            return () => {
+                const field = fieldRef.value as Field;
+                const Comp =
+                    field &&
+                    !isVoidField(field) &&
+                    field.pattern === 'readPretty'
+                        ? PreviewText.Cascader
+                        : ElCascader;
+                return h(
+                    Comp,
+                    {
+                        ...attrs,
+                        options: field?.dataSource,
+                        modelValue: field?.value,
+                        onChange: (...args: any[]) => {
+                            props.onChange(...args);
+                        },
+                    },
+                    slots
+                );
+            };
+        },
+    })
+);
+
+export default Cascader;

package/src/components/cascader/style.ts

@@ -0,0 +1,5 @@
+import '@cicctencent/jtui/theme-chalk/src/cascader.scss'
+import '@cicctencent/jtui/theme-chalk/src/cascader-panel.scss'
+
+// 依赖
+import '../preview-text/style'