@cicctencent/formily 0.0.0-stage → 0.0.1

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

@@ -0,0 +1,105 @@
+import {
+    createForm,
+    Form,
+    onFormInit,
+    onFormInputChange,
+    onFormMount,
+    onFormValuesChange,
+} from '@formily/core';
+import { computed, getCurrentInstance, ref, onMounted, watch } from 'vue';
+import { transformSchema } from '../../../transform';
+export default function (props, emit) {
+    const ctx = getCurrentInstance();
+    const selectValue = ref('');
+    let form = ref<Form>();
+    let schemaConfig = ref({});
+    let emitFlag = false;
+    const feedbackText = ref('');
+    watch(()=>selectValue.value,(val)=>{
+        if(!val && props.required){
+          feedbackText.value = '该字段是必填项'
+        }else feedbackText.value=''
+    },{deep:true,immediate:true})
+
+    const schemaList = computed(() => {
+        return JSON.parse(props?.list ?? '[]');
+    })
+    const options = computed(() => {
+        return schemaList.value.map(item => {
+            return {
+                label: item.title,
+                value: item.properties['name']?.default,
+            };
+        });
+    });
+    watch(() => options.value, (val) => {
+        if (!val.find(option => option.value === selectValue.value)) {
+            selectValue.value = '';
+            updateSchemaConfig();
+        }
+    })
+    const updateSchemaConfig = () => {
+        if (!Array.isArray(schemaList.value) || !schemaList.value.length) {
+            return {};
+        }
+        let curProperties = {};
+        for (let i = 0; i < schemaList.value.length; i++) {
+            // One Of 相当于是一个数组, 你选择了哪个,它就渲染哪个schema
+            // 这里获取需要渲染的schema
+            if (
+                schemaList.value[i].properties['name']?.default === selectValue.value
+            ) {
+                curProperties = {
+                    type: 'object',
+                    properties: schemaList.value[i]?.properties ?? {},
+                };
+            }
+        }
+        updateForm();
+        schemaConfig.value = transformSchema({ schema: curProperties, ctx});
+    };
+
+    function onSelectChange() {
+        emit('change', {});
+        updateSchemaConfig();
+    }
+
+    onMounted(() => {
+      //初始化
+        init();
+    });
+    // 更新(重新创建)表单单
+    function updateForm() {
+        form.value = createForm({
+            effects() {
+                onFormMount(form => {
+                    const data = JSON.parse(
+                        JSON.stringify(props.modelValue ?? {})
+                    );
+                    delete data.name;
+                    form.setValues(data);
+                    setTimeout(() => {
+                        emitFlag = true;
+                    }, 10);
+                });
+                onFormInputChange(form => {
+                    const result = {
+                        name: selectValue.value,
+                        ...form.values,
+                    };
+                    emit('change', result);
+                });
+            },
+            readOnly: props.readOnly,
+        });
+    }
+
+    function init() {
+        if(props.modelValue?.name){
+          selectValue.value = props.modelValue.name;
+          updateSchemaConfig();
+        }
+    }
+
+    return { schemaConfig, feedbackText, form, options, selectValue, onSelectChange };
+}

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

@@ -0,0 +1,85 @@
+<template>
+    <div class="one-of-wrap">
+        <FormItem
+            :feedbackText="feedbackText"
+            feedbackStatus= "error"
+            :asterisk="required"
+            :label="title"
+            layout="vertical"
+            label-align="left"
+        >
+            <el-select
+                v-model="selectValue"
+                :suffix-icon="CaretBottom"
+                :disabled="readOnly"
+                placeholder="请选择"
+                @change="onSelectChange"
+            >
+                <el-option
+                    v-for="item in options"
+                    :key="item.value"
+                    :label="item.label"
+                    :value="item.value"
+                />
+            </el-select>
+        </FormItem>
+
+        <FormProvider :form="form">
+            <SchemaField :schema="schemaConfig" />
+        </FormProvider>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { defineComponent } from 'vue';
+import { FormProvider, createSchemaField } from '@formily/vue';
+import { CaretTop, CaretBottom } from '@cicctencent/icons-vue';
+import Select from '../../select';
+import Input from '../../input';
+import FormItem from '../../form-item';
+import UploadButton from '../../upload-button';
+const { SchemaField } = createSchemaField({
+    components: { Select, Input, FormItem, UploadButton },
+});
+//@ts-ignore
+import useOneAny from './index';
+
+defineComponent({
+  name:'OneOf'
+})
+const props = defineProps({
+    list: {
+        type: String,
+        default: () => '[]',
+    },
+    modelValue: {
+        type: Object,
+        default: () => {},
+    },
+    title: {
+        type: String,
+        default: '',
+    },
+    required: {
+        type: Boolean,
+        default: true,
+    },
+    readOnly: {
+        type: Boolean,
+        default: false,
+    }
+});
+
+const emits = defineEmits(['change', 'error']);
+
+const {
+    schemaConfig,
+    form,
+    options,
+    selectValue,
+    onSelectChange,
+    feedbackText,
+} = useOneAny(props, emits);
+</script>
+
+<style scoped></style>

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

@@ -0,0 +1,13 @@
+import _Quill from 'quill';
+import quillEditor from './index.vue';
+const Quill = (window as any)?.Quill || _Quill;
+
+const install = (Vue, globalOptions) => {
+    if (globalOptions) {
+        quillEditor.props.globalOptions.default = () => globalOptions;
+    }
+    Vue.component(quillEditor.name, quillEditor);
+};
+const VueQuillEditor = { Quill, quillEditor, install };
+export default VueQuillEditor;
+export { Quill, quillEditor, install };

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

@@ -0,0 +1,120 @@
+<template>
+    <div class="rich-editor">
+      <template v-if="cmdname === 'ImportArticle'">
+        <div class="rich-editor--import">
+          <el-input placeholder="请输入公众号文章链接" v-model="importUrl"></el-input>
+          <el-button type="primary" link @click="handleImport" :disabled="!importUrl">导入</el-button>
+        </div>
+      </template>
+        <QuillEditor
+            theme="snow"
+            ref="editor"
+            :placeholder="modelValue ? ' ' : '请输入文本'"
+            @textChange="onTextChange"
+            :options="editorOptions"
+            :read-only="readOnly"
+        />
+    </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref, computed, onMounted, watch } from 'vue';
+import { QuillEditor } from '@vueup/vue-quill'
+import '@vueup/vue-quill/dist/vue-quill.snow.css';
+import editorOptions  from './options'
+export default defineComponent({
+    name: 'rich-editor',
+    components: { QuillEditor },
+    props: {
+      modelValue: {
+        type:[String,Object],
+        default:''
+      },
+      cmdname:{
+        type: String,
+        default: ''
+      },
+      cmdParams:{
+        type:Object,
+        default:null
+      },
+      readOnly: {
+        type: Boolean,
+        default: false
+      }
+    },
+    emits: ['update:modelValue', 'change', 'selectRichImage', 'getData'],
+    setup(props, { emit }) {
+
+      // 导入链接
+      const importUrl = ref<string>();
+      // 富文本编辑器实例
+      const editor = ref();
+
+      onMounted(()=>{
+        editor.value.pasteHTML(props.modelValue)
+      })
+
+      const handleImport = () =>{
+        emit('getData', props.cmdname,(res)=>{
+          console.log("导入文章内容:",res);
+            emit('update:modelValue',res);
+            emit('change',res)
+        },{...props.cmdParams, url: importUrl.value })
+      }
+
+      watch(()=>props.modelValue,(val)=>{
+        if(val!== editor.value.getHTML()){
+          // editor.value.setHTML(val);
+        editor.value.pasteHTML(props.modelValue,'silent')
+
+        }
+      })
+
+
+       const onTextChange = ({delta, oldContents, source })=>{
+          console.log("onTextChange ",delta,oldContents,source)
+          console.log('onTextChange editor',editor.value.getHTML())
+          const html:string = editor.value.getHTML();
+          // 去除<p><br></p>,<h1><br></h1>.....
+          if(/^<([a-z,1-9]+)><br><\/\1>$/.test(html)){
+              emit('update:modelValue','');
+              emit('change','')
+          }
+          else{
+            emit('update:modelValue',html);
+            emit('change',html)
+          }
+       }
+
+       return { editor, importUrl, editorOptions, handleImport, onTextChange}
+    },
+});
+</script>
+
+<style lang="scss">
+.rich-editor {
+
+  &--import{
+    display: flex;
+    margin-bottom: 10px;
+    .el-button{
+      margin-left: 10px;
+    }
+  }
+
+  .ql-snow .ql-tooltip{
+    left:0 !important;
+  }
+    // min-width: 372px;
+    width: 100%;
+    .ql-toolbar {
+        line-height: 1.6;
+    }
+
+    .ql-editor {
+        height: 250px;
+        overflow-y: auto;
+    }
+}
+</style>

package/src/components/base/RichEditor/options.ts

@@ -0,0 +1,24 @@
+export default {
+    theme: 'snow',
+    boundary: document.body,
+    modules: {
+        toolbar: [
+            [{ header: [1, 2, 3, 4, 5, 6, false] }],
+            ['bold', 'italic', 'underline', 'strike'],
+            ['blockquote', 'code-block'],
+            [{ header: 1 }, { header: 2 }],
+            [{ list: 'ordered' }, { list: 'bullet' }],
+            [{ script: 'sub' }, { script: 'super' }],
+            [{ indent: '-1' }, { indent: '+1' }],
+            // [{ direction: 'rtl' }],
+            // [{ size: ['small', false, 'large', 'huge'] }],
+            [{ color: [] }, { background: [] }],
+            // [{ font: [] }],
+            [{ align: [] }],
+            // ['clean'],
+            ['link','image'],
+        ],
+    },
+    placeholder: 'Insert text here ...',
+    readOnly: false,
+};

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

@@ -0,0 +1,106 @@
+import { isEqual } from "lodash-es";
+import { computed, onMounted, ref, watch } from "vue";
+
+export default function(props,emits){
+
+    const loading = ref(false);
+
+    const optionsVal = ref([]);
+
+    const filterOptions = ref([])
+
+
+    const selectValue = computed(()=>{
+        return optionsVal.value.length ? props.modelValue : null;
+    })
+
+    onMounted(()=>{
+       if(props.cmdname){
+          remoteMethod('')
+       }else{
+        // 不是远程数据加载
+        optionsVal.value = props.options
+       }
+    })
+
+    watch(() => props.options, (newVal, oldVal)=> {
+      // 避免相等的时候重新赋值
+      if(!isEqual(newVal,oldVal)){
+        optionsVal.value = newVal
+      }
+    }, {deep: true})
+
+    const filter = computed(()=>{
+        return !!props.cmdname
+    })
+
+    watch(()=>props.cmdParams,(newVal,oldVal)=>{
+       if(!isEqual(newVal,oldVal)){
+            if(props.cmdname){
+                optionsVal.value = []
+                remoteMethod('')
+                emits('change','');
+            }
+       }
+    },{ deep: true})
+
+    watch(optionsVal, (options) => {
+      // 选项发生变化检查选项是否包含当前value
+      if (options.length) {
+        // 考虑多选的情况 是否选择了选项不包含的选项
+        if (props.multiple) {
+          if (!props.modelValue?.length) return;
+          // 若找不到当前value 则清空选择器
+          if (!props.modelValue.every(v => options.find(o => isEqual(o.value, v)) !== undefined) && props.modelValue.length) {
+            emits('change', []);
+          }
+        } else {
+          if (!props.modelValue) return;
+          const option = options.find(o => isEqual(o.value, props.modelValue));
+          // 若找不到当前value 则清空选择器
+          if (option === undefined && props.modelValue) {
+            emits('change', null);
+          }
+        }
+      } else {
+        // 选项为空时 可能为远程加载且数据还未请求到的情况 此时不将value置为空
+        if (!(props.cmdname && loading.value)) {
+          emits('change', props.multiple ? [] : null);
+        }
+      }
+    })
+
+    function onSelectChange(val) {
+        emits('change', val);
+    }
+    function remoteMethod(query: string){
+            loading.value = true;
+            emits('getData', props.cmdname,(res)=>{
+                loading.value = false;
+                optionsVal.value = res;
+                filterOptions.value = res;
+            },{...props.cmdParams,query:query })
+    }
+    /** 过滤选项 */
+    function filterMethod(value){
+        // 如果是 undefined 就返回所有   触发焦点 又失去焦点的时候， value 没编辑过会是 undefined
+        if(!value){
+            return optionsVal.value
+        }
+        filterOptions.value = optionsVal.value.filter(item => {
+            let isStr =  typeof item?.value === 'string';
+            return item.label.indexOf(value) > -1 || ( isStr && item.value.indexOf(value) > -1 )
+        })
+    }
+   function onSelectBlur(){
+            // todo 失去焦点事件
+    }
+    function onVisibleChange(val){
+        // 下拉框出现 true  隐藏时  false
+        if(val){
+            // 初始化选项
+            filterOptions.value = optionsVal.value
+        }
+    }
+    return { onSelectChange, onSelectBlur, filterOptions, onVisibleChange, filterMethod, loading, filter, optionsVal, selectValue }
+}

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

@@ -0,0 +1,161 @@
+<template>
+    <div
+        class="formily-select"
+        :class="{ 'formily-select-prefix-class': prefix }"
+    >
+        <el-select
+            ref="selectRef"
+            :placeholder="placeholder"
+            :value-key="valueKey"
+            @change="onSelectChange"
+            @blur="onSelectBlur"
+            @visible-change="onVisibleChange"
+            :model-value="selectValue"
+            :multiple="multiple"
+            :disabled="readOnly"
+            :collapse-tags="collapseTags"
+            :loading="loading"
+            :filterable="filter"
+            :filter-method="filterMethod"
+            :clearable="clearable"
+            :size="size"
+            :collapse-tags-tooltip="collapseTagsTooltip"
+            :multiple-limit="multipleLimit"
+            :name="name"
+            :effect="effect"
+            :autocomplete="autocomplete"
+            :placement="placement"
+        >
+            <el-option
+                v-for="item in (filter? filterOptions : optionsVal)"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+                :disabled="item?.disabled || false"
+            />
+            <template #prefix v-if="prefix">
+                <span class="formly-select--prefix">{{ prefix }}</span>
+            </template>
+        </el-select>
+    </div>
+</template>
+
+<script lang="ts" setup>
+//@ts-ignore
+import { defineComponent, PropType } from 'vue';
+//@element-plus/icons-vue
+import { CaretBottom } from '@cicctencent/icons-vue';
+import useSelect from './index';
+const props = defineProps({
+    modelValue: {
+        type: Object,
+        default: '',
+    },
+    options: {
+        type: Object,
+        default: () => {
+            return [];
+        },
+    },
+    effect:{
+        type: String,
+        default: 'light'
+    },
+    collapseTagsTooltip:{
+        type: Boolean,
+        default: false
+    },
+    size:{
+        type: String,
+        default: 'default'
+    },
+    multipleLimit:{
+        type: Number,
+        default: 0
+    },
+    name:{
+        type: String,
+        default: ''
+    },
+    autocomplete:{
+        type: String,
+        default: 'off'
+    },
+    placement:{
+        type: String,
+        default: 'bottom-start'
+    },
+    // value-key
+    valueKey: {
+        type: String,
+        default: 'value',
+    },
+    // 后缀图标
+    suffixIcon: {
+        type: String,
+        default: 'CaretTop',
+    },
+    //前置文字
+    prefix: {
+        type: String,
+        default: '',
+    },
+    // 多选
+    multiple: {
+        type: Boolean,
+        default: false,
+    },
+    // 多选时是否将选中值按文字的形式展示
+    collapseTags: {
+        type: Boolean,
+        default: false,
+    },
+    cmdname:{
+        type: String,
+        default: ''
+    },
+    cmdParams:{
+        type:Object,
+        default:null
+    },
+    readOnly: {
+        type: Boolean,
+        default: false,
+    },
+    clearable:{
+        type: Boolean,
+        default: false
+    },
+    placeholder:{
+        type: String,
+        default: '请选择'
+    },
+});
+const emits = defineEmits(['change','getData']);
+
+
+const { loading, filterOptions, selectValue, onSelectChange, onSelectBlur, onVisibleChange, filter, optionsVal, filterMethod } = useSelect(props,emits);
+</script>
+
+<style lang="scss">
+.formily-select {
+    &-prefix-class {
+        .el-input__wrapper {
+            padding-left: 0 !important;
+        }
+        .el-input__inner {
+            text-align: right;
+        }
+    }
+    .formly-select--prefix{
+        color: rgba(75, 81, 94, .6);
+        font-weight: 400;
+        font-size: 14px;
+        line-height: 20px;
+        background: rgba(216, 220, 230, .2);
+        padding: 9px;
+        border-radius: 4px 0 0 4px;
+        border-right: 1px solid #D8DCE6;
+    }
+}
+</style>

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

@@ -0,0 +1,42 @@
+<template>
+    <!-- 这是一个bug只有添加了loading disabled才能生效 -->
+    <el-switch
+        :model-value="modelValue"
+        :active-value="activeValue"
+        :inactive-value="inactiveValue"
+        :disabled="readOnly"
+        :loading="readOnly"
+        @change="emits('update:modelValue', $event)"
+    />
+</template>
+
+<script lang="ts" setup>
+defineProps({
+    modelValue: [Boolean, String, Number],
+    readOnly: {
+        type: Boolean,
+        default: false,
+    },
+    activeValue: {
+        type: [Boolean, String, Number],
+        default: true,
+    },
+    inactiveValue: {
+        type: [Boolean, String, Number],
+        default: false,
+    },
+});
+const emits = defineEmits(['update:modelValue']);
+</script>
+
+<style lang="scss" scoped>
+// 去掉loading的样式
+:deep(.el-switch__action) {
+    .el-icon.is-loading {
+        animation: none;
+        svg {
+            display: none;
+        }
+    }
+}
+</style>

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

@@ -0,0 +1,47 @@
+<template>
+    <div v-if="render" v-html="text" class="formily-text" :style="styles">
+    </div>
+</template>
+
+<script lang="ts">
+// @ts-ignore
+import { computed, defineComponent } from 'vue';
+
+ export default defineComponent({
+    props:{
+        text:{
+            type:String,
+            default: ''
+        },
+        color:{
+            type:String,
+            default:'#333'
+        }
+    },
+    setup(props){
+
+        const styles = computed(()=>{
+            const style = {};
+            if(props.color){
+                style['color'] = props.color;
+            }
+            return style;
+        })
+
+        const render = computed(()=>{
+            return props.text.indexOf('script') === -1 ? true : false;
+        })
+
+        return { styles,render }
+    }
+ })
+
+</script>
+
+<style lang="scss">
+.formily-text{
+    width: 100%;
+    font-size: 14px;
+    line-height: 24px;
+}
+</style>