@bdsoft/element 1.1.0

package/src/components/error/Error.vue

@@ -0,0 +1,79 @@
+<!--
+* @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

@@ -0,0 +1,20 @@
+# 错误异常展示
+
+```
+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

@@ -0,0 +1,84 @@
+<!--
+* @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

@@ -0,0 +1,143 @@
+<!--
+* @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

@@ -0,0 +1,52 @@
+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

@@ -0,0 +1,69 @@
+
+
+## 示例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>
+```