fl-web-component 0.1.0 → 0.1.1

package/packages/components/com-formDialog/Readme.md

@@ -0,0 +1,409 @@
+<!-- 使用方法 样例 -->
+<template>
+  <div class="trigger_dialog">
+    <!-- 弹窗  -->
+    <el-button type="primary" @click="dialogVisible = true">触发对话框</el-button>
+    <DialogWrapper
+      v-if="dialogVisible"
+      dialog-title="触发对话框"
+      :visible.sync="dialogVisible"
+      :popup-width="'35%'"
+      @handleClose="handleClose"
+      @submitDialogData="submitDialogData"
+    >
+      <FormDialog
+        ref="formDialog"
+        :form-item-config-arr="formItemConfigArr"
+        @handleInputValue="handleInputValue"
+      />
+    </DialogWrapper>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'TriggerDialog',
+  components: {
+    DialogWrapper: () => import('./components/DialogWrapper.vue'),
+    FormDialog: () => import('./form-dialog.vue')
+
+  },
+  props: {},
+  data() {
+    return {
+      dialogVisible: false, // 弹框状态
+      // 表单项配置
+      formItemConfigArr: [{
+        label: '选择器: 单选',
+        prop: 'SelectorSingleSelection',
+        id: 'SelectorSingleSelection',
+        itemType: 'SelectorSingleSelection',
+        deliveryLevel: '',
+        optionArr: [
+          { optionValue: '黄金糕', optionLabel: '黄金糕' },
+          { optionValue: '双皮奶', optionLabel: '双皮奶' },
+          { optionValue: '蚵仔煎', optionLabel: '蚵仔煎' },
+          { optionValue: '龙须面', optionLabel: '龙须面' },
+          { optionValue: '北京烤鸭', optionLabel: '北京烤鸭' }
+        ]
+      }, {
+        label: '选择器: 多选',
+        prop: 'SelectorMultipleSelection',
+        id: 'SelectorMultipleSelection',
+        itemType: 'SelectorMultipleSelection',
+        deliveryLevel: '',
+        optionArr: [
+          { optionValue: '东南', optionLabel: '东南', children: [
+            { optionValue: '上海', optionLabel: '上海', children: [
+              { optionValue: '普陀', optionLabel: '普陀' },
+              { optionValue: '黄埔', optionLabel: '黄埔' },
+              { optionValue: '徐汇', optionLabel: '徐汇' }]
+            },
+            { optionValue: '江苏', optionLabel: '江苏', children: [
+              { optionValue: '南京', optionLabel: '南京' },
+              { optionValue: '苏州', optionLabel: '苏州' },
+              { optionValue: '无锡', optionLabel: '无锡' }]
+            },
+            { optionValue: '浙江', optionLabel: '浙江', children: [
+              { optionValue: '杭州', optionLabel: '杭州' },
+              { optionValue: '宁波', optionLabel: '宁波' },
+              { optionValue: '嘉兴', optionLabel: '嘉兴' }]
+            }]
+          },
+          { optionValue: '西北', optionLabel: '西北', children: [
+            { optionValue: '陕西', optionLabel: '陕西', children: [
+              { optionValue: '西安', optionLabel: '西安' },
+              { optionValue: '延安', optionLabel: '延安' }]
+            },
+            { optionValue: '新疆维吾尔族自治区', optionLabel: '新疆维吾尔族自治区', children: [
+              { optionValue: '乌鲁木齐', optionLabel: '乌鲁木齐' },
+              { optionValue: '克拉玛依', optionLabel: '克拉玛依' }]
+            }]
+          }
+        ]
+      }, {
+        label: '选择器: 树结构',
+        prop: 'SelectorTreeStructure',
+        id: 'SelectorTreeStructure',
+        itemType: 'SelectorTreeStructure',
+        deliveryLevel: '',
+        optionArr: [
+          {
+            'id': 16610387558572,
+            'deptId': 100,
+            'parentId': 0,
+            'ancestors': null,
+            'deptName': '中科辅龙',
+            'parentName': null,
+            'children': [
+              {
+                'id': 16610389432685,
+                'deptId': 101,
+                'parentId': 100,
+                'ancestors': null,
+                'deptName': '北京总公司',
+                'parentName': null,
+                'children': [
+                  {
+                    'id': 16610388531515,
+                    'deptId': 103,
+                    'parentId': 101,
+                    'ancestors': null,
+                    'deptName': '研发部门',
+                    'parentName': null,
+                    'children': [
+                      {
+                        'id': 16610387615239,
+                        'deptId': 16610387615239,
+                        'parentId': 103,
+                        'ancestors': null,
+                        'deptName': '系统管理员',
+                        'parentName': null,
+                        'children': [],
+                        'userId': 1,
+                        'nickName': null
+                      }
+                    ],
+                    'userId': null,
+                    'nickName': null
+                  },
+                  {
+                    'id': 16610388036783,
+                    'deptId': 104,
+                    'parentId': 101,
+                    'ancestors': null,
+                    'deptName': '市场部门',
+                    'parentName': null,
+                    'children': [],
+                    'userId': null,
+                    'nickName': null
+                  },
+                  {
+                    'id': 16610388740710,
+                    'deptId': 105,
+                    'parentId': 101,
+                    'ancestors': null,
+                    'deptName': '测试部门',
+                    'parentName': null,
+                    'children': [
+                      {
+                        'id': 16610388604617,
+                        'deptId': 121,
+                        'parentId': 105,
+                        'ancestors': null,
+                        'deptName': '测试部',
+                        'parentName': null,
+                        'children': [],
+                        'userId': null,
+                        'nickName': null
+                      },
+                      {
+                        'id': 16610387802667,
+                        'deptId': 16610387802667,
+                        'parentId': 105,
+                        'ancestors': null,
+                        'deptName': '若依',
+                        'parentName': null,
+                        'children': [],
+                        'userId': 2,
+                        'nickName': null
+                      },
+                      {
+                        'id': 16610388008178,
+                        'deptId': 16610388008178,
+                        'parentId': 105,
+                        'ancestors': null,
+                        'deptName': '赵文莉',
+                        'parentName': null,
+                        'children': [],
+                        'userId': 738512,
+                        'nickName': null
+                      }
+                    ],
+                    'userId': null,
+                    'nickName': null
+                  },
+                  {
+                    'id': 16610389553740,
+                    'deptId': 106,
+                    'parentId': 101,
+                    'ancestors': null,
+                    'deptName': '财务部门',
+                    'parentName': null,
+                    'children': [],
+                    'userId': null,
+                    'nickName': null
+                  },
+                  {
+                    'id': 16610389178321,
+                    'deptId': 107,
+                    'parentId': 101,
+                    'ancestors': null,
+                    'deptName': '运维部门',
+                    'parentName': null,
+                    'children': [],
+                    'userId': null,
+                    'nickName': null
+                  }
+                ],
+                'userId': null,
+                'nickName': null
+              },
+              {
+                'id': 16610388755966,
+                'deptId': 102,
+                'parentId': 100,
+                'ancestors': null,
+                'deptName': '长沙分公司',
+                'parentName': null,
+                'children': [
+                  {
+                    'id': 16610389179839,
+                    'deptId': 108,
+                    'parentId': 102,
+                    'ancestors': null,
+                    'deptName': '市场部门',
+                    'parentName': null,
+                    'children': [],
+                    'userId': null,
+                    'nickName': null
+                  },
+                  {
+                    'id': 16610389330898,
+                    'deptId': 109,
+                    'parentId': 102,
+                    'ancestors': null,
+                    'deptName': '财务部门',
+                    'parentName': null,
+                    'children': [],
+                    'userId': null,
+                    'nickName': null
+                  }
+                ],
+                'userId': null,
+                'nickName': null
+              },
+              {
+                'id': 16610388015679,
+                'deptId': 110,
+                'parentId': 100,
+                'ancestors': null,
+                'deptName': '监理单位',
+                'parentName': null,
+                'children': [],
+                'userId': null,
+                'nickName': null
+              },
+              {
+                'id': 16610388258734,
+                'deptId': 16610388258734,
+                'parentId': 100,
+                'ancestors': null,
+                'deptName': '咩咩',
+                'parentName': null,
+                'children': [],
+                'userId': 4,
+                'nickName': null
+              }
+            ],
+            'userId': null,
+            'nickName': null
+          }
+        ]
+      }, {
+        label: '选择器: 单时间',
+        prop: 'SelectorSingleTime',
+        id: 'SelectorSingleTime',
+        itemType: 'SelectorSingleTime',
+        deliveryLevel: '',
+        optionArr: []
+      }, {
+        label: '选择器: 单日期',
+        prop: 'SelectorSingleDate',
+        id: 'SelectorSingleDate',
+        itemType: 'SelectorSingleDate',
+        deliveryLevel: '',
+        optionArr: []
+      }, {
+        label: '选择器: 日期范围长度测试',
+        prop: 'SelectorDateRange',
+        id: 'SelectorDateRange',
+        itemType: 'SelectorDateRange',
+        deliveryLevel: 'ESS',
+        optionArr: []
+      }, {
+        label: '多行文本',
+        prop: 'MultilineText',
+        id: 'MultilineText',
+        itemType: 'MultilineText',
+        deliveryLevel: '',
+        optionArr: []
+      }, {
+        label: '单选框',
+        prop: 'RadioBox',
+        id: 'RadioBox',
+        itemType: 'RadioBox',
+        deliveryLevel: '',
+        optionArr: [
+          { optionValue: '单选一', optionLabel: '单选一' },
+          { optionValue: '单选二', optionLabel: '单选二' },
+          { optionValue: '单选三', optionLabel: '单选三' },
+          { optionValue: '单选四', optionLabel: '单选四' },
+          { optionValue: '单选五', optionLabel: '单选五' }
+        ]
+      }, {
+        label: '多选框',
+        prop: 'MultipleCheckbox',
+        id: 'MultipleCheckbox',
+        itemType: 'MultipleCheckbox',
+        deliveryLevel: 'ESS',
+        optionArr: [
+          { optionValue: '复选框A', optionLabel: '复选框A' },
+          { optionValue: '复选框B', optionLabel: '复选框B' },
+          { optionValue: '复选框C', optionLabel: '复选框C' },
+          { optionValue: '复选框D', optionLabel: '复选框D' },
+          { optionValue: '复选框F', optionLabel: '复选框F' }
+        ]
+      }, {
+        label: '字符串输入框',
+        prop: 'InputString',
+        id: 'InputString',
+        itemType: 'InputString',
+        deliveryLevel: 'ESS',
+        optionArr: []
+      }, {
+        label: '整数输入框',
+        prop: 'InputInteger',
+        id: 'InputInteger',
+        itemType: 'InputInteger',
+        deliveryLevel: '',
+        optionArr: []
+      }, {
+        label: '小数输入框',
+        prop: 'InputDecimals',
+        id: 'InputDecimals',
+        itemType: 'InputDecimals',
+        deliveryLevel: '',
+        optionArr: []
+      }, {
+        label: '计数器',
+        prop: 'CounterFrame',
+        id: 'CounterFrame',
+        itemType: 'CounterFrame',
+        deliveryLevel: '',
+        optionArr: []
+      }, {
+        label: '文件上传',
+        prop: 'FileUpload',
+        id: 'FileUpload',
+        itemType: 'FileUpload',
+        deliveryLevel: '',
+        optionArr: []
+      }, {
+        label: '富文本',
+        prop: 'RichText',
+        id: 'RichText',
+        itemType: 'RichText',
+        deliveryLevel: '',
+        optionArr: []
+      }]
+    }
+  },
+  computed: { },
+  watch: {},
+  created() {},
+  mounted() {},
+  methods: {
+    /* 弹窗 修改是否让页面显示与隐藏的事件 */
+    updateVisible(val) {
+      this.dialogVisible = val
+    },
+    /* 弹窗 确认 操作 */
+    submitDialogData() {
+      // this.dialogVisible = false
+      const formData = this.$refs.formDialog.formInline
+      console.log(formData)
+    },
+    /* 弹窗 关闭 操作 */
+    handleClose() {
+      this.dialogVisible = false
+    },
+
+    /* 表单操作 */
+    handleInputValue(data) {
+      console.log(data)
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.trigger_dialog {
+  box-sizing: border-box;
+  width: calc(100% - 32px);
+  height: calc(100% - 72px);
+  margin: 16px;
+  padding: 16px;
+  border-radius: 4px;
+  background-color: #ccc;
+}
+</style>