lw-cdp-ui 1.2.47 → 1.2.49

package/dist/components/lwFormJson/StatsConfig.vue

@@ -1,544 +0,0 @@
-<template>
-  <el-form :model="item"
-           class="form-list"
-           label-position="top">
-
-    <template v-if="item.component">
-      <div class="form-title">基础配置</div>
-      <div class="form-body">
-        <el-form-item v-if="item.component == 'checkbox' || item.component == 'upload'"
-                      label="属性名称">
-          <template v-for="(_item, _index) in item?.options.items">
-            <el-input v-model="_item.name"
-                      placeholder="请输入"
-                      clearable />
-          </template>
-
-        </el-form-item>
-        <el-form-item v-else
-                      label="属性名称">
-          <el-input v-model="item.name"
-                    placeholder="请输入"
-                    clearable />
-        </el-form-item>
-        <el-form-item label="标题">
-          <el-input v-model="item.label"
-                    placeholder="请输入"
-                    clearable />
-        </el-form-item>
-        <el-form-item v-if="item?.options && item.component != 'checkbox' && item.component != 'upload'"
-                      label="输入提示">
-          <el-input v-model="item.options.placeholder"
-                    placeholder="请输入"
-                    clearable />
-        </el-form-item>
-        <el-form-item v-if="item?.options && item.component != 'checkbox' && item.component != 'upload'"
-                      label="禁用">
-          <el-switch v-model="item.options.disabled"
-                     active-text="启用"
-                     inactive-text="禁用" />
-        </el-form-item>
-        <el-form-item label="内容提示">
-          <el-input v-model="item.tips"
-                    type="textarea"
-                    placeholder="请输入"
-                    clearable />
-        </el-form-item>
-      </div>
-
-      <template v-if="item?.span">
-        <div class="form-title">布局配置</div>
-        <div class="form-body">
-          <el-form-item label="栅格">
-            <div class="form-slider">
-              <el-slider v-model="item.span"
-                         :step="4"
-                         show-stops
-                         :min="4"
-                         :max="24" />
-            </div>
-          </el-form-item>
-        </div>
-      </template>
-
-      <div v-if="item?.options"
-           class="form-title">组件属性配置</div>
-      <div v-if="item?.options"
-           class="form-body">
-        <template v-if="item.component === 'input'">
-          <el-form-item v-if="item.options.type != 'textarea'"
-                        label="输入类型">
-            <el-select v-model="item.options.type"
-                       placeholder="请选择输入类型">
-              <el-option label="文本"
-                         value="text" />
-              <el-option label="密码"
-                         value="password" />
-              <el-option label="邮箱"
-                         value="email" />
-            </el-select>
-          </el-form-item>
-          <el-form-item label="最大长度">
-            <el-input-number v-model="item.options.maxlength"
-                             :min="1"
-                             controls-position="right"
-                             placeholder="请输入" />
-          </el-form-item>
-
-        </template>
-        <template
-                  v-if="['select','radio','checkbox', 'checkboxGroup'].includes(item.component)">
-          <el-form-item label="选项">
-            <div v-for="(option, index) in item.options.items"
-                 :key="index"
-                 class="form-item">
-              <el-input v-if="['checkbox'].includes(item.component)"
-                        v-model="option.name"
-                        placeholder="属性名称"
-                        clearable />
-              <el-input v-model="option.label"
-                        placeholder="选项名称"
-                        clearable />
-              <el-input v-model="option.value"
-                        placeholder="选项值"
-                        clearable />
-
-              <el-icon class="remove-btn"
-                       size="14"
-                       v-if="item.options.items.length > 1"
-                       @click="item.options.items.splice(index, 1)"><el-icon-delete /></el-icon>
-            </div>
-            <el-button type="primary"
-                       size="small"
-                       style="width: 100%;"
-                       @click="item.options.items.push({ label: '', value: '' })">新增选项</el-button>
-          </el-form-item>
-
-        </template>
-
-        <template v-if="['tags'].includes(item.component)">
-          <el-form-item label="按钮名称">
-            <el-input v-model="item.options.addText"
-                      placeholder="请输入"
-                      clearable />
-          </el-form-item>
-          <el-form-item label="默认标签">
-            <div class="tags-list">
-              <el-tag v-for="tag in item.value"
-                      :key="tag"
-                      closable
-                      :disable-transitions="false"
-                      @close="tagClose(tag, item.value)">
-                {{ tag }}
-              </el-tag>
-              <el-input v-if="tagVisible[item.name]"
-                        v-model="tagValue"
-                        class="w-20"
-                        size="small"
-                        @keyup.enter="tagInputConfirm(item, item.value)"
-                        @blur="tagInputConfirm(item, item.value)" />
-              <el-button v-else
-                         class="button-new-tag"
-                         size="small"
-                         @click="tagVisible[item.name] = true">
-                + 添加
-              </el-button>
-            </div>
-          </el-form-item>
-
-        </template>
-
-        <el-form-item v-if="item.component === 'switch'"
-                      label="开关文字">
-          <div class="form-item">
-            <el-input v-model="item.options.activeText"
-                      placeholder="开文字"
-                      clearable />
-            <el-input v-model="item.options.inactiveText"
-                      placeholder="关文字"
-                      clearable />
-          </div>
-
-        </el-form-item>
-
-        <template v-if="['rate','number'].includes(item.component)">
-          <el-row :gutter="10">
-            <el-col :span="12">
-              <el-form-item label="最小值">
-                <el-input-number v-model="item.options.min"
-                                 controls-position="right"
-                                 placeholder="最小值" />
-              </el-form-item>
-            </el-col>
-            <el-col :span="12">
-              <el-form-item label="最大值">
-                <el-input-number v-model="item.options.max"
-                                 controls-position="right"
-                                 placeholder="最大值" />
-              </el-form-item>
-            </el-col>
-            <el-col :span="12">
-              <el-form-item label="步长">
-                <el-input-number v-model="item.options.step"
-                                 controls-position="right"
-                                 placeholder="步长" />
-              </el-form-item>
-            </el-col>
-            <el-col :span="12">
-              <el-form-item v-if="item.component == 'number'"
-                            label="后缀">
-                <el-input-number v-model="item.options.suffix"
-                                 controls-position="right"
-                                 placeholder="后缀" />
-              </el-form-item>
-            </el-col>
-          </el-row>
-
-        </template>
-
-        <template v-if="item.component === 'upload'"
-                  v-for="(_item, _index) in item?.options.items"
-                  :key="_index">
-          <el-row :gutter="10">
-            <el-col :span="12">
-              <el-form-item label="宽">
-                <el-input-number v-model="item.width"
-                                 :min="1"
-                                 controls-position="right"
-                                 placeholder="宽" />
-              </el-form-item>
-            </el-col>
-            <el-col :span="12">
-              <el-form-item label="高">
-                <el-input-number v-model="item.height"
-                                 :min="1"
-                                 controls-position="right"
-                                 placeholder="高" />
-              </el-form-item>
-            </el-col>
-            <el-col :span="12">
-              <el-form-item label="数量限制">
-                <el-input-number v-model="_item.limit"
-                                 :min="1"
-                                 controls-position="right"
-                                 placeholder="文件数量" />
-              </el-form-item>
-            </el-col>
-            <el-col :span="12">
-              <el-form-item label="文件大小">
-                <el-input-number v-model="_item.maxSize"
-                                 :min="1"
-                                 controls-position="right"
-                                 placeholder="文件大小" />
-              </el-form-item>
-            </el-col>
-          </el-row>
-
-          <el-form-item>
-            <template #label>
-              文件类型
-              <el-tooltip content="不填默认类型image/gif, image/jpeg, image/png">
-                <el-icon><el-icon-question-filled /></el-icon>
-              </el-tooltip>
-            </template>
-            <el-input v-model="_item.accept"
-                      placeholder="请输入文件类型，如 .jpg,.png"
-                      clearable />
-          </el-form-item>
-          <el-form-item label="上传文案">
-            <el-input v-model="_item.label"
-                      placeholder="请输入"
-                      clearable />
-          </el-form-item>
-          <el-form-item label="提示文案">
-            <el-input v-model="_item.tip"
-                      placeholder="请输入"
-                      clearable />
-          </el-form-item>
-          <el-form-item label="禁用">
-            <el-switch v-model="_item.disabled"
-                       active-text="启用"
-                       inactive-text="禁用" />
-          </el-form-item>
-        </template>
-
-        <template v-if="item.component === 'date'">
-          <el-form-item label="日期类型">
-            <el-select v-model="item.options.type"
-                       placeholder="请选择日期类型">
-              <el-option label="日期"
-                         value="date" />
-              <el-option label="日期时间"
-                         value="datetime" />
-              <el-option label="周"
-                         value="week" />
-              <el-option label="月份"
-                         value="month" />
-              <el-option label="年"
-                         value="year" />
-              <el-option label="日期范围"
-                         value="daterange" />
-              <el-option label="日期时间范围"
-                         value="datetimerange" />
-            </el-select>
-          </el-form-item>
-          <el-form-item label="开始占位符">
-            <el-input v-model="item.options.startPlaceholder"
-                      placeholder="请输入开始占位符"
-                      clearable />
-          </el-form-item>
-          <el-form-item label="结束占位符">
-            <el-input v-model="item.options.endPlaceholder"
-                      placeholder="请输入结束占位符"
-                      clearable />
-          </el-form-item>
-          <el-form-item label="日期格式">
-            <el-input v-model="item.options.format"
-                      placeholder="请输入日期格式"
-                      clearable />
-          </el-form-item>
-          <el-form-item label="值格式">
-            <el-input v-model="item.options.valueFormat"
-                      placeholder="请输入值格式"
-                      clearable />
-          </el-form-item>
-          <el-form-item label="快捷选项">
-            <el-switch v-model="item.options.shortcuts"
-                       active-text="启用"
-                       inactive-text="禁用" />
-          </el-form-item>
-        </template>
-
-      </div>
-
-      <div class="form-title">表单校验</div>
-      <div class="form-body">
-        <el-form-item label="提交校验">
-          <el-select v-model="item.rules"
-                     multiple
-                     value-key="label"
-                     clearable
-                     placeholder="请选择">
-            <el-option v-for="item in rules"
-                       :key="item.label"
-                       :label="item.label"
-                       :value="item" />
-          </el-select>
-        </el-form-item>
-        <el-form-item label="隐藏校验(满足条件时将隐藏该项)">
-          <div class="input-body">
-            <el-cascader v-model="hideForm.label"
-                         :show-all-levels="false"
-                         :props="{ emitPath: false }"
-                         style="flex:1.2;"
-                         :options="strList" />
-            <el-select v-model="hideForm.filter"
-                       clearable
-                       style="flex:1;"
-                       placeholder="条件">
-              <el-option v-for="item in filter"
-                         :key="item.label"
-                         :label="item.label"
-                         :value="item.value" />
-            </el-select>
-            <el-input v-model="hideForm.value"
-                      style="flex:1;"
-                      placeholder="值"
-                      clearable />
-          </div>
-
-        </el-form-item>
-
-      </div>
-    </template>
-    <template v-else>
-      <div class="form-title">表单样式</div>
-      <div class="form-body">
-        <el-form-item label="标题宽度">
-          <el-input v-model="item.labelWidth"
-                    placeholder="请输入"
-                    clearable />
-        </el-form-item>
-        <el-form-item label="标题位置">
-          <el-select v-model="item.labelPosition"
-                     placeholder="请选择">
-            <el-option label="顶部"
-                       value="top" />
-            <el-option label="左"
-                       value="left" />
-            <el-option label="右"
-                       value="right" />
-          </el-select>
-        </el-form-item>
-      </div>
-      <div class="form-title">数据层级</div>
-      <TreeItem :formItems="config.formItems" />
-    </template>
-  </el-form>
-</template>
-
-<script>
-import TreeItem from './TreeItem.vue'
-export default {
-  name: 'StatsConfig',
-  components: {
-    TreeItem
-  },
-  data() {
-    return {
-      tagVisible: {},
-      hideForm: {},
-      tagValue: '',
-      filter: [
-        { label: '等于', value: '==' },
-        { label: '大于', value: '>' },
-        { label: '大于等于', value: '>=' },
-        { label: '小于', value: '<' },
-        { label: '小于等于', value: '<=' },
-        { label: '不等于', value: '!=' }
-      ],
-      rules: [
-        {
-          label: '必填', required: true, message: '请输入', trigger: 'blur'
-        },
-        {
-          label: '必选', required: true, message: '请选择', trigger: 'change'
-        },
-      ]
-    }
-  },
-  props: {
-    item: {
-      type: Object,
-      default: () => ({})
-    },
-    config: {
-      type: Object,
-      default: () => ({})
-    }
-  },
-  watch: {
-    hideForm: {
-      handler(val) {
-        if (!val?.label || !val.filter || !val.value) {
-          this.item.hideHandle = ''
-          return
-        }
-        this.item.hideHandle = `$.${val.label} ${val.filter} ${val.value}`
-      },
-      deep: true
-    },
-    item: {
-      handler(val) {
-        if (val?.hideHandle) {
-          const regex = /^\$\.(\S+)\s+(\S+)\s+(\S+)$/;
-          const match = val?.hideHandle.match(regex);
-
-          if (match) {
-            const val = {
-              label: match[1],
-              filter: match[2],
-              value: match[3]
-            };
-            this.hideForm = val
-          }
-
-        }
-      },
-      deep: true
-    }
-  },
-  computed: {
-    // 字段
-    strList() {
-      function parse(data) {
-        const parseItem = (item) => {
-          let node = {
-            label: item.label,
-            value: item.name || item.label
-          };
-
-          if (item.component === 'object' || item.component === 'list') {
-            // 如果是组合或者列表，递归处理子节点
-            node.children = (item.value || []).map((subItem) => {
-              if (Array.isArray(subItem)) {
-                return subItem.map(parseItem); // 处理二维数组的情况
-              }
-              return parseItem(subItem);
-            }).flat();
-          } else if (item.component === 'checkbox' || item.component === 'upload') {
-            // 如果是复选框或者上传组件，从 options.items 中提取子节点
-            node.value = item.options?.items[0].name
-          }
-
-          return node;
-        };
-
-        return data.formItems.map(parseItem);
-      }
-      let list = parse(this.config)
-      return list
-    }
-  },
-  methods: {
-    // 删除tag
-    tagClose(tag, item) {
-      item.splice(item.indexOf(tag), 1)
-    },
-    // 增加tag
-    tagInputConfirm(item, val) {
-      if (this.tagValue) {
-        val = val || []
-        val.push(this.tagValue)
-      }
-      this.tagVisible[item.name] = false
-      this.tagValue = ''
-    }
-  }
-};
-</script>
-
-<style lang="scss" scoped>
-.form-list {
-  max-height: calc(100vh - 137px);
-  .form-title {
-    font-size: 12px;
-    color: #000;
-    font-weight: bold;
-    padding: 15px 10px;
-    background-color: var(--el-fill-color-lighter);
-  }
-  .form-body {
-    padding: 10px;
-  }
-  .form-slider {
-    padding: 0 10px;
-    width: 100%;
-  }
-  .form-item {
-    width: 100%;
-    display: flex;
-    align-items: center;
-    gap: 5px;
-    margin-bottom: 10px;
-  }
-
-  :deep(.el-tag) {
-    & + .button-new-tag {
-      margin-left: 10px;
-    }
-    & + .w-20 {
-      margin-left: 10px;
-    }
-  }
-  .w-20 {
-    width: 100px;
-  }
-
-  .input-body {
-    display: flex;
-    align-items: center;
-    gap: 5px;
-  }
-}
-</style>

package/dist/components/lwFormJson/TreeItem.vue

@@ -1,149 +0,0 @@
-<template>
-  <draggable :list="formItems"
-             item-key="name"
-             group="people"
-             class="draggable-item"
-             ghost-class="draggable-ghost">
-    <template #item="{element: item, index}">
-      <div>
-        <!-- 组合 -->
-        <template v-if="['object'].includes(item.component)">
-          <div class="form-item">
-            {{item.label}}<span>「{{item.name || item.options?.items[0]?.name}}」</span>
-            <div class="tool-list">
-              <el-icon class="btn"
-                       size="14"
-                       @click="copyItem(item, index)"
-                       title="复制"><el-icon-copy-document /></el-icon>
-              <el-icon class="btn"
-                       size="14"
-                       @click="deleteItem(index)"
-                       title="删除"><el-icon-delete /></el-icon>
-            </div>
-          </div>
-          <TreeItem :formItems="item.value"></TreeItem>
-        </template>
-
-        <!-- 列表 显示时 -->
-        <template v-else-if="['list'].includes(item.component)">
-          <div class="list-item">
-            <div class="form-item">
-              {{item.label}}<span>「{{item.name || item.options?.items[0]?.name}}」</span>
-              <div class="tool-list">
-                <el-icon class="btn"
-                         size="14"
-                         @click="copyItem(item, index)"
-                         title="复制"><el-icon-copy-document /></el-icon>
-                <el-icon class="btn"
-                         size="14"
-                         @click="deleteItem(index)"
-                         title="删除"><el-icon-delete /></el-icon>
-              </div>
-            </div>
-            <TreeItem :formItems="x"
-                      v-for="x in item.value"></TreeItem>
-          </div>
-
-        </template>
-
-        <div v-else
-             class="form-item">
-          {{item.label}}<span>「{{item.name || item.options?.items[0]?.name}}」</span>
-          <div class="tool-list">
-            <el-icon class="btn"
-                     size="14"
-                     @click="copyItem(item, index)"
-                     title="复制"><el-icon-copy-document /></el-icon>
-            <el-icon class="btn"
-                     size="14"
-                     @click="deleteItem(index)"
-                     title="删除"><el-icon-delete /></el-icon>
-          </div>
-        </div>
-      </div>
-    </template>
-  </draggable>
-</template>
-
-<script>
-import draggable from 'vuedraggable'
-export default {
-  name: 'TreeItem',
-  components: {
-    draggable
-  },
-  props: {
-    formItems: {
-      type: Object,
-      default: []
-    }
-  },
-  computed: {
-    curIndex() {
-      return this.$store.state?.curIndex || ''
-    }
-  },
-  emits: ['curClick'],
-  methods: {
-    // 删除
-    deleteItem(index) {
-      this.formItems.splice(index, 1)
-    },
-    // 复制
-    copyItem(item, index) {
-      let x = JSON.parse(JSON.stringify(item))
-      x.name = `${item.component}-${this.$tool.getUUID('', 2)}`
-      this.formItems.splice(index + 1, 0, x)
-    }
-  }
-}
-</script>
-<style lang="scss" scoped>
-.draggable-item {
-  // padding-left: 10px;
-  border-left: 10px solid rgba($color: #000, $alpha: 0.05);
-  background-color: rgba($color: #000, $alpha: 0.01);
-  backdrop-filter: blur(10px);
-  color: var(--el-text-color-regular);
-  cursor: move;
-  .list-item {
-  }
-  .form-item {
-    padding: 8px 0 8px 10px;
-    border-bottom: 1px solid rgba($color: #000, $alpha: 0.1);
-    position: relative;
-    span{
-      color: var(--el-color-primary-light-6);
-    }
-    .tool-list {
-      display: none;
-    }
-    &:hover {
-      // border: 1px dashed var(--el-color-primary) !important;
-      background-color: var(--el-color-primary-light-9);
-      .tool-list {
-        position: absolute;
-        bottom: 0;
-        right: 0;
-        display: block;
-        border-top-left-radius: 10px;
-        z-index: 8;
-        background-color: var(--el-color-primary);
-        color: #fff;
-        display: flex;
-        gap: 10px;
-        padding: 2px 10px;
-        .btn {
-          cursor: pointer;
-          width: 20px;
-          height: 20px;
-        }
-      }
-    }
-  }
-  :deep(.draggable-ghost) {
-    background: var(--el-border-color-light);
-    width: 100%;
-  }
-}
-</style>