cnhis-design-vue 0.3.1-beta → 0.3.4-beta

package/packages/drag-layout/src/DragFormRightItem.vue

@@ -0,0 +1,277 @@
+<template>
+  <div class="DragFormRightItem">
+    <div
+      v-if="element.html_type === 'COMBINATION'"
+      class="combination-item"
+      :class="{
+        'is-edit-class': element.is_edit == 0 ? true : element.mid_is_edit == 0
+      }"
+    >
+      <div>
+        <span v-if="element.is_null == 0" class="red">*</span>
+        {{ element.name }}
+        <div class="form-btn">
+          <template v-if="element.html_type != 'TEXT'">
+            <NButton
+              v-if="element.is_edit == 1 && !isLineType(element.html_type)"
+              dashed
+              size="small"
+              @click="handlechangIs_edit(element)"
+              >{{ `${element.mid_is_edit == 1 ? "不可编辑" : "启用编辑"}` }}</NButton
+            >
+            <NButton
+              v-if="element.is_drag == 1 && !isLineType(element.html_type)"
+              dashed
+              size="small"
+              @click="handlechangNull(element)"
+              >必填</NButton
+            >
+            <NButton
+              dashed
+              size="small"
+              v-show="element.html_type != 'LINE_BREAKS'"
+              @click="handleEdit(element, index, 'edit')"
+              >修改</NButton
+            >
+          </template>
+          <NButton
+            v-if="
+              (element.is_drag == 1 || isLineType(element.html_type)) &&
+                element.is_system_fields != 0
+            "
+            dashed
+            size="small"
+            @click="handleDelete(element, index)"
+          >移除</NButton>
+        </div>
+      </div>
+      <draggable
+        v-model="element.children"
+        itemKey="val_key"
+        :group="element.val_key"
+        :animation="300"
+      >
+        <template #item="eleChild">
+          <div
+            :style="{
+              width: `${(element.elem_width || 12) * 2 / 24 * 100}%`,
+              display: element.elem_width && element.elem_width < 12 ? 'inline-block': 'block'
+            }"
+          >
+            <DragFormRightItem :element="eleChild.element" :index="eleChild.index" @handleEdit="handleEdit" @handleDelete="handleDelete" />
+          </div>
+        </template>
+      </draggable>
+    </div>
+    <div
+      v-else
+      :class="{
+        'right-content': true,
+        'blue-border': element.extraField,
+        'is-edit-class': element.is_edit == 0 ? true : element.mid_is_edit == 0
+      }"
+    >
+      <div :class="{ 'item-opacity': element.is_show == 0 }">
+        <span v-if="element.is_null == 0" class="red">*</span>
+        {{ element.name }}
+      </div>
+      <div class="form-btn">
+        <template v-if="element.html_type != 'TEXT'">
+          <NButton
+            v-if="element.is_edit == 1 && !isLineType(element.html_type)"
+            dashed
+            size="small"
+            @click="handlechangIs_edit(element)"
+            >{{ `${element.mid_is_edit == 1 ? "不可编辑" : "启用编辑"}` }}</NButton
+          >
+          <NButton
+            v-if="element.is_drag == 1 && !isLineType(element.html_type)"
+            dashed
+            size="small"
+            @click="handlechangNull(element)"
+            >必填</NButton
+          >
+          <NSelect
+            style="width: 50px"
+            size="small"
+            :options="widthOptions"
+            v-model:value="element.elem_width"
+            :to="false"
+          >
+          </NSelect>
+        </template>
+
+        <NPopover trigger="click" :delay="300" placement="left-end">
+          <div>
+            <NButton
+              dashed
+              size="small"
+              v-show="!['LINE_BREAKS'].includes(element.html_type)"
+              @click="handleEdit(element, index, 'edit')"
+              >修改</NButton
+            >
+            <NButton
+              v-if="
+                (element.is_drag == 1 || isLineType(element.html_type)) &&
+                  element.is_system_fields != 0
+              "
+              dashed
+              size="small"
+              @click="handleDelete(element, index)"
+            >移除</NButton>
+          </div>
+          <template #trigger>
+            <NIcon :component="EllipsisVerticalSharp" />
+          </template>
+        </NPopover>
+      </div>
+    </div>
+  </div>
+</template>
+<script lang="ts">
+export default {
+  name: "DragFormRightItem"
+}
+</script>
+<script setup lang="ts">
+import { ref, computed, watch, onMounted } from 'vue'
+import draggable from "vuedraggable";
+import { NGridItem, NPopover, NButton, NSelect, NIcon } from 'naive-ui'
+import { EllipsisVerticalSharp } from "@vicons/ionicons5";
+
+const props = withDefaults(defineProps<{
+  fields?: any
+  element: any
+  index: number
+}>(), {})
+
+let showFields: any = ref([])
+let isFocus = ref(false)
+const widthOptions: any = [
+  {
+    label: "整行",
+    value: '12',
+  },
+  {
+    label: "半行",
+    value: '6',
+  },
+  {
+    label: '5/6',
+    value: '10',
+  },
+  {
+    label: '2/3',
+    value: '8',
+  },
+  {
+    label: '1/3',
+    value: '4',
+  },
+  {
+    label: '3/4',
+    value: '9',
+  },
+  {
+    label: '1/4',
+    value: '3',
+  },
+  {
+    label: '1/6',
+    value: '2',
+  }
+]
+
+const emit = defineEmits(['handleEdit', 'handleDelete'])
+
+const lineTypeList = computed(() => ["LINEBAR", "LINE_BREAKS"])
+
+const handlechangIs_edit = (data: any) => {
+  data.mid_is_edit = data.mid_is_edit == 1 ? 0 : 1;
+}
+const handlechangNull = (data: any) => {
+  data.is_null = data.is_null == 1 ? 0 : 1;
+}
+const handleEdit = (data: any, i: any, type: any) => {
+  emit("handleEdit", data, i, type);
+}
+const handleDelete = (data: any, i?: number) => {
+  emit("handleDelete", data, i);
+}
+/** line 类型 */
+const isLineType = (t: any) => {
+  return lineTypeList.value.includes(t);
+}
+
+watch(() => props.fields,
+  (val: any) => {
+    if (!val) return;
+    showFields.value = val;
+  },
+  { immediate: true, deep: true }
+)
+
+</script>
+<style lang="less" scoped>
+.DragFormRightItem {
+  position: relative;
+  .is-edit-class {
+    background-color: #f5f5f5 !important;
+    border-color: #d9d9d9 !important;
+  }
+  .combination-item {
+    padding: 0px 8px 8px;
+    > div {
+      line-height: 35px;
+      &:hover > .form-btn {
+        display: flex;
+      }
+    }
+  }
+  .form-btn {
+    display: none;
+    align-items: center;
+    position: absolute;
+    top: -1px;
+    right: 0px;
+    height: 100%;
+    white-space: nowrap;
+    .quick-reply {
+      display: inline-block;
+      border: 1px dashed rgb(205, 197, 211);
+      font-size: 12px;
+      height: 22px;
+      line-height: 1.499;
+    }
+    &:deep(.n-input),
+    &:deep(.n-select) {
+      margin-left: 5px;
+    }
+    &:deep(.n-select) {
+      top: -3px;
+    }
+  }
+  .right-content {
+    border: 1px dashed rgb(205, 197, 211);
+    background: #fdfdfd;
+    height: 35px;
+    line-height: 35px;
+    padding: 0 10px;
+    position: relative;
+    margin-bottom: 10px;
+    cursor: pointer;
+    &:hover .form-btn {
+      display: flex;
+    }
+  }
+  .blue-border {
+    border: 1px solid #5585f5 !important;
+  }
+  .item-opacity {
+    opacity: 0.5;
+  }
+  .red {
+    color: red;
+  }
+}
+</style>