lw-cdp-ui 1.5.54 → 1.5.56

package/dist/components/lwFormJson/JsonItem.vue

@@ -1,7 +1,7 @@
 <template>
   <draggable
     :list="formItems"
-    item-key="name"
+    item-key="key"
     group="people"
     :animation="350"
     :disabled="hideBorder"
@@ -9,14 +9,14 @@
     ghost-class="draggable-ghost"
     :class="{
       showBorder: !hideBorder,
-      cur: curIndex == `${this.uuid}${formItems.name || formItems?.options?.items[0]?.name}`
+      cur: curIndex == `${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}`
+          cur: !hideBorder && curIndex == `${uuid}${item.name || item?.options?.items[0]?.name}`
         }"
         v-if="!hideHandle(item)"
         @click.stop="changeClick(item)">
@@ -27,10 +27,10 @@
               :formItems="item.value"
               :form="form[item.name]"
               class="object-item"
-              :custom="custom"
+              :customComponent="customComponent"
               :hideBorder="hideBorder"
               @curClick="emitClick">
-              <template v-for="c in custom" v-slot:[c.component]="{ itemCur, formCur }">
+              <template v-for="c in customComponent" v-slot:[c.component]="{ itemCur, formCur }">
                 <slot :name="c.component" :itemCur="itemCur" :formCur="formCur"></slot>
               </template>
             </JsonItem>
@@ -41,39 +41,28 @@
           <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
-              >
+              <el-button v-if="hideBorder" type="primary" class="add-btn" plain size="small" icon="el-icon-plus" @click="addListItem(item.value)"></el-button>
             </template>
-            <el-col :span="item.span || 24" v-for="(x, xIndex) in item.value" :key="xIndex">
-              <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>
+            <div class="list-span-bg">
+              <el-col :span="!hideBorder ? 24 : item.span || 24" v-for="(x, xIndex) in item.value" :key="xIndex">
+                <div v-if="(!hideBorder && xIndex == 0) || hideBorder" class="list-item" :class="{ borderItem: !hideBorder }">
+                  <JsonItem
+                    v-if="form[item.name]"
+                    :formItems="x"
+                    :customComponent="customComponent"
+                    :form="form[item.name][xIndex]"
+                    :hideBorder="hideBorder"
+                    @curClick="emitClick">
+                    <template v-for="c in customComponent" 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>
+            </div>
           </el-form-item>
         </template>
         <FormItem v-else :item="item" :form="form">
@@ -102,91 +91,92 @@
             <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 v-if="!hideBorder && curIndex == `${uuid}${item.name || item?.options?.items[0]?.name}`" class="tool-list">
+          <el-icon class="btn" size="12" @click="copyItem(item, index)" title="复制"><el-icon-copy-document /></el-icon>
+          <el-icon class="btn" size="12" @click="deleteItem(index)" title="删除"><el-icon-delete /></el-icon>
         </div>
       </el-col>
     </template>
   </draggable>
 </template>
 
-<script>
-import FormItem from '../lwFormMini/FormItem'
+<script setup>
+import { computed, getCurrentInstance } from 'vue'
 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: () => [] }
+import { useStore } from 'vuex'
+import FormItem from '../lwFormMini/FormItem'
+const {
+  proxy: { $api, $tool, t, $expression }
+} = getCurrentInstance()
+defineOptions({ name: 'JsonItem' })
+const store = useStore()
+
+const props = defineProps({
+  formItems: {
+    type: Object,
+    default: () => []
   },
-  computed: {
-    curIndex() {
-      return this.$store.state?.curIndex || ''
-    }
+  form: {
+    type: Object,
+    default: () => ({})
   },
-  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)
-    }
+  // 是否是显示边界
+  hideBorder: { type: Boolean, default: false },
+  // 自定义组件
+  customComponent: { type: Array, default: () => [] }
+})
+
+const emit = defineEmits(['curClick'])
+
+const uuid = $tool?.getUUID('', 12) || Date.now().toString(36)
+
+// 计算属性
+const curIndex = computed(() => store?.state?.curIndex || '')
+
+// 处理动态隐藏
+function hideHandle(item) {
+  if (typeof item?.hideHandle === 'string') {
+    const func = new Function('form', `return ${item?.hideHandle.replace(/\$/g, 'form')}`)
+    return func(props.form)
+  } else if (typeof item?.hideHandle === 'boolean') {
+    return item.hideHandle
   }
+  return false
+}
+
+function changeClick(item) {
+  store.state.curIndex = `${uuid}${item.name || item?.options.items[0]?.name}`
+  emitClick(item)
+}
+
+function emitClick(item) {
+  emit('curClick', item)
+}
+
+// 列表删除
+function deleteListItem(list, index) {
+  list.splice(index, 1)
+}
+
+// 列表新增
+function addListItem(list) {
+  const item = list[0]
+  const x = JSON.parse(JSON.stringify(item))
+  list.push(x)
+}
+
+// 删除
+function deleteItem(index) {
+  props.formItems.splice(index, 1)
+}
+
+// 复制
+function copyItem(item, index) {
+  const x = JSON.parse(JSON.stringify(item))
+  x.name = `${item.component}-${$tool?.getUUID('', 2) || Date.now()}`
+  props.formItems.splice(index + 1, 0, x)
 }
 </script>
 
@@ -197,48 +187,64 @@ export default {
   display: flex;
   flex-wrap: wrap;
   // gap: 10px;
-  padding-bottom: 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: var(--color-white);
+    .object-item,
+    .list-span-bg {
+      background-color: var(--el-border-color-extra-light);
+    }
+    .list-item {
+      padding: 0 !important;
+    }
   }
 }
-// :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);
+
+  padding: 10px;
 }
 
 :deep(.el-col) {
   border: 1px dashed transparent;
 }
 
+.list-span-bg {
+  background-color: var(--el-border-color-extra-light);
+  width: 100%;
+  padding: 10px 5px 0;
+  display: flex;
+  flex-wrap: wrap;
+}
+
 .list-item {
   width: 100%;
-  padding: 15px 10px;
+  padding: 15px 10px 0;
   background-color: #fff;
-  // box-shadow: 0 0 3px rgba($color: #000000, $alpha: 0.1);
+
+  border: 0 !important;
   margin-bottom: 10px;
   position: relative;
+
   .remove-btn {
     position: absolute;
-    top: 10px;
-    right: 10px;
+    top: 5px;
+    right: 5px;
     color: var(--el-color-primary);
     cursor: pointer;
   }
@@ -250,17 +256,21 @@ export default {
   padding: 10px;
   cursor: move;
   position: relative;
+  background-color: #fff;
+
   &:hover {
     border: 1px dashed var(--el-border-color);
-    background-color: rgba($color: #000000, $alpha: 0.01);
+    background-color: var(--color-white-1);
   }
 
   .tool-list {
     display: none;
   }
 }
+
 :deep(.cur) {
   border: 1px dashed var(--el-color-primary) !important;
+
   .tool-list {
     position: absolute;
     bottom: 0;
@@ -273,6 +283,7 @@ export default {
     display: flex;
     gap: 10px;
     padding: 2px 10px;
+
     .btn {
       cursor: pointer;
       width: 20px;
@@ -287,22 +298,27 @@ export default {
   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;
@@ -312,4 +328,9 @@ export default {
     }
   }
 }
+
+.component-title-name {
+  position: absolute;
+  z-index: 9;
+}
 </style>