lw-cdp-ui 1.2.48 → 1.2.49

package/dist/components/lwFormJson/JsonItem.vue

@@ -1,302 +0,0 @@
-<template>
-  <draggable :list="formItems"
-             item-key="name"
-             group="people"
-             :animation="350"
-             :disabled="hideBorder"
-             class="draggable-item"
-             ghost-class="draggable-ghost"
-             :class="{ showBorder: !hideBorder,  cur:  curIndex == (`${this.uuid}${formItems.name || formItems?.options?.items[0]?.name}`) }">
-    <template #item="{element: item, index}">
-      <el-col :span="['list'].includes(item.component) ? 24 : item.span || 24"
-              :class="{ borderItem: !hideBorder, cur: !hideBorder &&  curIndex == (`${this.uuid}${item.name || item?.options?.items[0]?.name}`) }"
-              v-if="!hideHandle(item)"
-              @click.stop="changeClick(item)">
-        <!-- 组合 -->
-        <template v-if="['object'].includes(item.component)">
-          <el-form-item :label="item.label">
-            <JsonItem :formItems="item.value"
-                      :form="form[item.name]"
-                      class="object-item"
-                      :custom="custom"
-                      :hideBorder="hideBorder"
-                      @curClick="emitClick">
-              <template v-for="c in custom"
-                        v-slot:[c.component]="{ itemCur, formCur }">
-                <slot :name="c.component"
-                      :itemCur="itemCur"
-                      :formCur="formCur"></slot>
-              </template>
-            </JsonItem>
-          </el-form-item>
-
-        </template>
-        <!-- 列表 显示时 -->
-        <template v-else-if="['list'].includes(item.component)">
-          <el-form-item>
-            <template #label>
-              {{ item.label }}
-              <el-button v-if="hideBorder"
-                         type="primary"
-                         class="add-btn"
-                         plain
-                         size="small"
-                         icon="el-icon-plus"
-                         @click="addListItem(item.value)">{{ $t('btn.add') }}</el-button>
-            </template>
-            <el-col :span="item.span || 24"
-                    v-for="(x, xIndex) in item.value">
-              <div class="list-item"
-                   :class="{borderItem: !hideBorder}">
-                <JsonItem v-if="form[item.name]"
-                          :formItems="x"
-                          :custom="custom"
-                          :form="form[item.name][xIndex]"
-                          :hideBorder="hideBorder"
-                          @curClick="emitClick">
-                  <template v-for="c in custom"
-                            v-slot:[c.component]="{ itemCur, formCur }">
-                    <slot :name="c.component"
-                          :itemCur="itemCur"
-                          :formCur="formCur"></slot>
-                  </template>
-                </JsonItem>
-                <el-icon class="remove-btn"
-                         size="14"
-                         v-if="hideBorder && item.value.length > 1"
-                         @click="deleteListItem(item.value, xIndex)"><el-icon-delete /></el-icon>
-              </div>
-
-            </el-col>
-
-          </el-form-item>
-
-        </template>
-        <FormItem v-else
-                  :item="item"
-                  :form="form">
-          <!-- 没有组件是component值 就是插槽名称 -->
-          <template v-if="!['input', 'upload', 'checkbox', 'checkboxGroup', 'switch', 'select', 'treeSelect', 'cascader', 'date', 'number', 'radio', 'color', 'rate', 'slider','tags'].includes(item.component)"
-                    v-slot:[item.component]>
-            <slot :name="item.component"
-                  :itemCur="item"
-                  :formCur="form"></slot>
-          </template>
-        </FormItem>
-        <!-- 工具 -->
-        <div v-if="!hideBorder && curIndex == (`${this.uuid}${item.name || item?.options?.items[0]?.name}`)"
-             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>
-
-      </el-col>
-    </template>
-  </draggable>
-</template>
-
-<script>
-import FormItem from '../lwFormMini/FormItem'
-import draggable from 'vuedraggable'
-export default {
-  name: 'JsonItem',
-  data() {
-    return {
-      uuid: this.$tool.getUUID('', 12)
-    }
-  },
-  components: {
-    FormItem,
-    draggable
-  },
-  props: {
-    formItems: {
-      type: Object,
-      default: []
-    },
-    form: {
-      type: Object,
-      default: () => { }
-    },
-    // 是否是显示边界
-    hideBorder: { type: Boolean, default: false },
-    // 自定义组件
-    custom: { type: Array, default: () => [] },
-  },
-  computed: {
-    curIndex() {
-      return this.$store.state?.curIndex || ''
-    }
-  },
-  emits: ['curClick'],
-  methods: {
-    //处理动态隐藏
-    hideHandle(item) {
-      if (typeof item?.hideHandle === 'string') {
-        const func = new Function('form', `return ${item?.hideHandle.replace(/\$/g, "form")}`);
-        return func(this.form);
-      } else if (typeof item?.hideHandle === 'boolean') {
-        return item.hideHandle
-      }
-      return false
-    },
-    changeClick(item) {
-      this.$store.state.curIndex = `${this.uuid}${item.name || item?.options.items[0]?.name}`
-      this.emitClick(item)
-    },
-    emitClick(item) {
-      this.$emit('curClick', item)
-    },
-    // 列表删除
-    deleteListItem(list, index) {
-      list.splice(index, 1)
-    },
-    // 列表新增
-    addListItem(list) {
-      let item = list[0]
-      let x = JSON.parse(JSON.stringify(item))
-      list.push(x)
-    },
-    // 删除
-    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 {
-  width: 100%;
-  min-height: 40px;
-  display: flex;
-  flex-wrap: wrap;
-  // gap: 10px;
-  padding-bottom: 10px;
-  > div {
-    .title-name {
-      margin-top: 0;
-    }
-    &:first-child {
-      .title-name {
-        border-top: 0;
-      }
-    }
-  }
-  &.showBorder {
-    border: 1px dashed var(--el-border-color-light);
-    background-color: rgba($color: #000000, $alpha: 0.01);
-  }
-}
-// :deep(.el-form-item__content){
-//   margin-left: -5px;
-//   margin-right: -5px;
-// }
-.object-item {
-  // margin: 0 5px;
-  padding: 15px 10px;
-  background-color: #fff;
-  box-shadow: 0 0 3px rgba($color: #000000, $alpha: 0.1);
-}
-
-:deep(.el-col) {
-  border: 1px dashed transparent;
-}
-
-.list-item {
-  width: 100%;
-  padding: 15px 10px;
-  background-color: #fff;
-  box-shadow: 0 0 3px rgba($color: #000000, $alpha: 0.1);
-  margin-bottom: 10px;
-  position: relative;
-  .remove-btn {
-    position: absolute;
-    top: 10px;
-    right: 10px;
-    color: var(--el-color-primary);
-    cursor: pointer;
-  }
-}
-
-.borderItem {
-  border: 1px dashed var(--el-border-color-light);
-  box-sizing: border-box;
-  padding: 10px;
-  cursor: move;
-  position: relative;
-  &:hover {
-    border: 1px dashed var(--el-border-color);
-    background-color: rgba($color: #000000, $alpha: 0.01);
-  }
-
-  .tool-list {
-    display: none;
-  }
-}
-:deep(.cur) {
-  border: 1px dashed var(--el-color-primary) !important;
-  .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);
-  border: 2px dashed var(--el-border-color);
-  padding: 10px;
-  width: 100%;
-}
-:deep(.el-form-item) {
-  position: relative;
-  .el-form-item {
-    margin-bottom: 18px;
-  }
-}
-.add-btn {
-  top: 0px;
-  right: 0;
-  z-index: 9;
-  position: absolute;
-}
-:deep(.el-form-item--label-right),
-:deep(.el-form-item--label-left) {
-  .el-form-item__label {
-    position: relative;
-    .add-btn {
-      top: 30px;
-      right: 10px;
-      // left: 0;
-      // z-index: 9;
-      // position: absolute;
-    }
-  }
-}
-</style>