@bdsoft/element 1.1.8 → 1.1.11

package/src/components/error/Error.vue

@@ -1,79 +0,0 @@
-<!--
-* @FileDescription:  认证失败错误页面
-* @Author: lbq
-* @Date: 2024-04-25 14:39:42
-* @LastEditors: lbq
-* @LastEditTime: 2024-04-25 14:39:42
--->
-<script setup>
-import { ref, reactive, computed, watch, onMounted } from 'vue'
-// import { useRoute, useRouter } from 'vue-router'
-
-// const route = useRoute()
-// const router = useRouter()
-
-const msgStr = ref('认证失败！请重新登录')
-
-/**
- * 注销登录，返回首页
- */
-const logOutuser = () => {
-  let url = $bd.ptUrl || 'http://123.129.65.205:8034/bdpt'
-  if(!$bd.ptUrl){
-    console.error('请配置ptUrl')
-  }
-  window.open(url, '_self')
-}
-</script>
-<template>
-  <div class="container">
-    <div class="image-container">
-      <img src="../../assets/images/ff.png" alt="" />
-      <div class="text" v-html="msgStr"></div>
-      <el-text class="eltext" @click="logOutuser">点击登录</el-text>
-    </div>
-  </div>
-</template>
-
-<style lang="scss" scoped>
-.container {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 100vh; /* 设置容器高度为视口高度 */
-  .image-container {
-    display: flex;
-    align-items: center;
-    flex-direction: column;
-    width: 300px;
-    position: relative;
-  }
-  .image {
-    width: 100px; /* 设置图片宽度 */
-    height: 100px; /* 设置图片高度 */
-  }
-  .text {
-    position: absolute;
-    width: 450px;
-    top: 180px;
-    left: -30%;
-    line-height: 50px;
-    font-size: 16px;
-    margin-top: 10px; /* 设置文字与图片之间的间距 */
-    color: #7e7e7e;
-    text-align: center;
-  }
-  .eltext {
-    position: absolute;
-    width: 450px;
-    top: 220px;
-    left: -30%;
-    line-height: 50px;
-    font-size: 16px;
-    margin-top: 10px; /* 设置文字与图片之间的间距 */
-    color: #1159a7;
-    text-align: center;
-    cursor: pointer;
-  }
-}
-</style>

package/src/components/error/readme.md

@@ -1,20 +0,0 @@
-# 错误异常展示
-
-```
-import { BdError } from '@bdsoft/element'
-import { useRoute, useRouter } from 'vue-router'
-const router = useRouter()
-
-// router/index.js
- {
-      path: '/error',
-      name: 'error',
-      component: BdError
-},
-
-// 使用场景 在判断用户未登录或者没有权限时，可以跳转到错误页面
-if (!_ticket) {
-      router.push({ path: '/error' })
-      return
-    }
-```

package/src/components/form/Form.vue

@@ -1,84 +0,0 @@
-<!--
-* @FileDescription:  
-* @Author: 李兵泉
-* @Date: 2021-06-08 09 时
-* @LastEditors: 最后更新作者 
-* @LastEditTime: 最后更新时间 @update:modelValue="newValue=>formModel[formKey]=newValue"
--->
-<template>
-    <div>
-        <el-form ref="formRef" label-width="auto" inline :model="formModel"  :rules="rules" @submit.prevent>
-            <template #default="{ slotProps }">
-                <BDFormItem v-for="(item, index) in config" :config="config" :item-config="item" :key="index"
-                    v-model="formModel[item['formKey']]" @click="handleItemClick">
-                </BDFormItem>
-            </template>
-        </el-form>
-    </div>
-</template>
-<script setup>
-import { ref, reactive, computed, watch, onMounted } from "vue";
-// 组件
-import BDFormItem from './FormItem.vue'
-
-const emits = defineEmits(['query'])
-// props 
-const props = defineProps({
-    formConfig: {
-        type: Array,
-        default: () => []
-    },
-     rules:{
-        type: Array,
-        default: () => {}
-     }
-})
-const config = ref([])
-// 内置表单
-const formModel = reactive({})
-const formRef = ref()
-watch(
-    () => props.formConfig,
-    (newVal, oldVal) => {
-        if (newVal != '') {
-            // 属性赋值
-            props.formConfig.map(v => {
-                formModel[v.formKey] = v.value
-            })
-
-            config.value = props.formConfig
-            console.log('props.formConfig', props.formConfig);
-
-        }
-    },
-    {
-        immediate: true,
-        deep: true
-    }
-)
-// click事件
-const handleItemClick = (parms) => {
-
-    if (parms.key == 'qyBtn') {
-        emits('query', formModel)
-    }
-}
-const getFormData = async () => {
-    return new Promise((resolve, reject) => {
-        formRef.value.validate((valid) => {
-        if (valid) {
-          resolve({ status: true, formdata: formModel })
-        } else {
-          resolve({ status: false })
-        }
-      })
-    })
-}
-onMounted(() => {
-})
-defineExpose({
-    getFormData
-})
-</script>
-
-<style lang="scss" scoped></style>

package/src/components/form/FormItem.vue

@@ -1,143 +0,0 @@
-<!--
-* @FileDescription:  动态表单渲染
-* @Author: 李兵泉
-* @Date: 2021-06-08 09 时
-* @LastEditors: 最后更新作者
-* @LastEditTime: 最后更新时间
--->
-<script lang="jsx">
-import { defineComponent, toRefs, h, computed } from "vue";
-import { ElFormItem, ElInput, ElButton, ElSelect, ElCheckbox, ElOption, ElDatePicker, ElInputNumber,ElTreeSelect } from 'element-plus';
-
-const componentMap = {
-    'el-input': ElInput,
-    'el-select': ElSelect,
-    'el-button': ElButton,
-    'el-option': ElOption,
-    'el-checkbox': ElCheckbox,
-    'el-date-picker': ElDatePicker,
-    'el-input-number': ElInputNumber,
-    'el-tree-select': ElTreeSelect
-    // 其他表单项类型 
-};
-
-export default defineComponent({
-    name: "FormItem",
-    props: {
-        config: Array, // 接收外部传入的配置
-        itemConfig: Object, // 接收配置，外部传入
-        modelValue: [String, Number, Boolean, Array, Object],
-    },
-    emits: ['update:modelValue', 'click'],
-    setup(props, { slots, attrs, emit }) {
-        // 使用 toRefs 来确保响应式
-        const { modelValue, itemConfig } = toRefs(props);
-
-        // 定义计算属性
-        const componentShow = computed(() => {
-            const vIfArr = itemConfig.value?.options?.vIf;
-            if (!vIfArr) return true;
-
-            const relationArr = props.config.filter(configItem =>
-                vIfArr.find(vIf => vIf.relationKey === configItem.formKey)
-            );
-
-            for (const relationItem of relationArr) {
-                const vIfItem = vIfArr.find(vIf => vIf.relationKey === relationItem.formKey);
-
-                // 这里判断联动的表单值是否不满足可以显示的条件，不满足则不显示
-                if (relationItem.value !== vIfItem.value) return false;
-            }
-
-            return true;
-        });
-
-        // 使用 emit 来传递值的更新
-        const handleUpdate = (value) => {
-            console.info('触发更新', value)
-            emit('update:modelValue', value);
-        };
-        // let _itemConfig = props.itemConfig
-        let aa = itemConfig.value.type
-
-
-        // 处理button
-        const renderButton = () => {
-
-        }
-        return () => {
-            // 判断是否显示
-            if (!componentShow.value) return;
-
-            const Component = componentMap[itemConfig.value.type];
-
-            const inputWidth = itemConfig.value.width ? `${itemConfig.value.width}px` : '100%';
-
-            const componentStyle = { width: inputWidth };
-
-            console.info(`渲染组件：${aa},componentStyle:${inputWidth}`)
-            switch (itemConfig.value.type) {
-                case 'el-button':
-                    return h(ElFormItem, {
-                        // label: itemConfig.value.label,
-                        style: componentStyle
-                    }, {
-                        default: () => [
-                            h(ElButton,
-                                {
-                                    ...attrs,
-                                    ...itemConfig.value.options, // 假设所有按钮相关的属性都在 buttonProps 对象内
-                                    style: componentStyle,
-                                    // onClick: () => emit('click', { key: itemConfig.value.formKey }) // 假设按钮点击事件的处理函数为外部传入
-                                },
-                                {
-                                    default: () => [
-                                        itemConfig.value.label || 'Button'
-                                    ]
-                                }
-                            ) // 使用默认值或从配置中获取按钮内容
-                        ]
-                    });
-                default:
-                    break;
-            }
-
-            // 特殊处理 el-date-picker
-            // const datePickerProps = itemConfig.value.type === 'el-date-picker' ? {
-            //     type: itemConfig.value.dateType, // 根据itemConfig里的配置来决定日期选择器的类型
-            //     format: itemConfig.value.dateFormat // 你可以在itemConfig中定义dateFormat来控制日期格式
-            // } : {};
-
-            // 针对 select 组件的特殊处理
-            const slotContent = itemConfig.value.type === 'el-select' ?
-                () => itemConfig.value.optionData.map(option => {
-                    return h(ElOption, { label: option.label, value: option.value });
-                }) :
-                null; // 非 select 类型组件不需要插槽
-
-            return h(ElFormItem, {
-                label: itemConfig.value.label,
-                prop: itemConfig.value.formKey,
-                style: componentStyle,
-                rules: itemConfig.value.rules,
-            }, {
-                default: () => [ // 使用函数插槽 type\props attribute 和 property都能在 prop 中书写\children 
-
-                    h(Component,
-                        {
-                            modelValue: modelValue.value,
-                            'onUpdate:modelValue': (value) => emit('update:modelValue', value),
-                            ...attrs,
-                            // style: componentStyle,
-                            style: { width: '100%' },
-                            // ...datePickerProps, // 将datePickerProps传递给el-date-picker组件
-                            ...itemConfig.value.options
-                        }, slotContent)
-                ]
-            });
-
-
-        }
-    }
-})
-</script>

package/src/components/form/data.js

@@ -1,52 +0,0 @@
-export default [
-    {
-      type: 'el-input',
-      label: '活动名称',
-      formKey: 'name',
-      value: '1', // 默认值为空字符串
-      width:100,
-      options: {
-        vIf: [
-          // 表示：当 form.area === 'area1'，才显示
-          { relationKey: 'area', value: 'area1' }
-        ]
-      },
-      rules:[]
-    },
-    {
-      type: 'el-select',
-      label: '活动区域',
-      formKey: 'area',
-      value: 'area1',
-      width:100,
-      options: {
-        multiple: true
-      },
-      optionData: [ // 这里模拟去后端拉回数据
-        { label: '区域1', value: 'area1' },
-        { label: '区域2', value: 'area2' }
-      ]
-    },
-    {
-      type: 'el-date-picker',
-      label: '选择',
-      formKey: '',
-      value: '',
-      width:100,
-      dateType:'', // 日期包含数据类型
-      options: {
-        // multiple: true
-      }
-    }
-    {
-      type: 'el-button',
-      label: '确定',
-      formKey: 'area',
-      value: 'area1',
-      width:100,
-      options: {
-        type:'primary',
-        // multiple: true
-      }
-    }
-  ]

package/src/components/form/readme.md

@@ -1,69 +0,0 @@
-
-
-## 示例demo
-```
-export default [
-    {
-      type: 'el-input',
-      label: '活动名称',
-      formKey: 'name',
-      value: '1', // 默认值为空字符串
-      width:100,
-      options: {
-        vIf: [
-          // 表示：当 form.area === 'area1'，才显示
-          { relationKey: 'area', value: 'area1' }
-        ]
-      },
-      rules:[]
-    },
-    {
-      type: 'el-select',
-      label: '活动区域',
-      formKey: 'area',
-      value: 'area1',
-      width:100,
-      options: {
-        multiple: true
-      },
-      optionData: [ // 这里模拟去后端拉回数据
-        { label: '区域1', value: 'area1' },
-        { label: '区域2', value: 'area2' }
-      ]
-    },
-    {
-      type: 'el-button',
-      label: '确定',
-      formKey: 'area',
-      value: 'area1',
-      width:100,
-      options: {
-        multiple: true
-      }
-    }
-  ]
-<template>
-    <div>
-        <el-form label-width="auto" inline :model="form1" >
-            <BDFormItem  v-for="(item, index) in config" :item-config="item" :key="index" />
-        </el-form>
-    </div>
-</template>
-<script setup>
-import { ref, reactive, computed, watch, onMounted } from "vue";
-import datas from './data.js'
-
-const form1 = reactive({
-    age: '',
-})
-
-// 组件
-import { BDFormItem } from '@bdsoft/element'
-
-const config = ref(datas)
-onMounted(() => {
-})
-</script>
-
-<style lang="scss" scoped></style>
-```