@jzt-packages/components 1.0.0

package/src/JztFormGrid/components/showDetailForm.vue

@@ -0,0 +1,172 @@
+<template>
+  <!-- <el-col :span="item.span || 12" :class="border ? 'border-col' : ''"> -->
+  <!-- <div v-if="item?.outerRender" class="mb13">
+      <component :is="item?.outerRender" />
+    </div> -->
+  <div class="form-item-content">
+    <div class="form-label flx-left-center">
+      <component v-if="item?.labelRender" :is="item?.labelRender" :form="ruleForm" />
+      <div v-else-if="item.label" class="flx-left-center" style="height: 100%">
+        <div class="label-text">
+          {{ `${item.label}` }}
+        </div>
+      </div>
+      <el-tooltip
+        v-if="tooltipProps?.content"
+        :effect="tooltipProps?.effect"
+        :placement="tooltipProps?.placement"
+        :content="tooltipProps?.content"
+      >
+        <el-icon :color="tooltipProps?.content" class="ml5"><Warning /></el-icon>
+      </el-tooltip>
+      <div class="ml2">：</div>
+    </div>
+    <div class="form-value">
+      <span v-if="item.slotName">
+        <slot :name="item.slotName" />
+      </span>
+      <template v-else-if="item.render || item.showRender">
+        <component v-if="item.showRender" :is="item.showRender" :form="ruleForm" />
+        <component v-else :is="item.render" :form="ruleForm" />
+      </template>
+      <template v-else-if="item.el && item.el.includes('JztUpload')">
+        <component
+          :is="CusComponent[item.el]"
+          v-model:image-url="ruleForm[item?.prop]"
+          v-model:file-list="ruleForm[item?.prop]"
+          v-bind="{
+            ...handleProps,
+            listType: handleProps?.listType
+          }"
+          :isShow="true"
+          :disabled="true"
+          @getOcrData="handleProps?.getOcrData"
+        >
+          <template #upload-left>
+            <component #upload-left :is="handleProps.uploadLeftRender" />
+          </template>
+          <template #tip v-if="handleProps?.tipsRender">
+            <component #tip :is="handleProps?.tipsRender" />
+          </template>
+        </component>
+      </template>
+      <template
+        v-else-if="
+          (item.el && ['JztNumericalRange', 'jzt-numerical-range'].includes(item.el)) ||
+          (item.el == 'el-date-picker' && ['daterange', 'datetimerange'].includes(handleProps?.type))
+        "
+      >
+        <div>
+          <span>{{ ruleForm?.[startField] }}</span>
+          <span class="ml6 mr6">{{ handleProps?.rangeSeparator ?? '-' }}</span>
+          <span>{{ ruleForm?.[endField] }}</span>
+        </div>
+      </template>
+      <template v-else>
+        <div class="flx-left-center">
+          <component v-if="item?.valueLeftRender" :is="item?.valueLeftRender" :form="ruleForm" />
+          <JztEllipsisTooltip
+            v-if="item?.detailProps?.showOverflowTooltip ?? showOverflowTooltip"
+            :isEllipsis="false"
+            :content="formatValue(ruleForm[showField])"
+          />
+          <div v-else class="break-word">{{ formatValue(ruleForm[showField]) }}</div>
+          <component v-if="item?.valueRightRender" :is="item?.valueRightRender" :form="ruleForm" />
+        </div>
+      </template>
+    </div>
+  </div>
+  <!-- </el-col> -->
+</template>
+<script setup lang="ts" name="SearchForm">
+import { formatValue } from '@jzt-spd/utils'
+import { computed, defineComponent, ref } from 'vue'
+import JztEllipsisTooltip from '../../JztEllipsisTooltip/index.vue'
+import JztNumericalRange from '../../JztNumericalRange/index.vue'
+import JztTable from '../../JztTable/index.vue'
+import JztUploadMultipleFiles from '../../JztUploadFile/multiple.vue'
+import JztUploadSingleFile from '../../JztUploadFile/single.vue'
+import JztUploadImg from '../../JztUploadImg/Img.vue'
+import JztUploadMultipleImgs from '../../JztUploadImg/Imgs.vue'
+import { FormItemsProps } from '../interface/index'
+
+const CusComponent = defineComponent({
+  JztUploadImg: JztUploadImg,
+  JztUploadMultipleImgs: JztUploadMultipleImgs,
+  JztUploadMultipleFiles: JztUploadMultipleFiles,
+  JztUploadSingleFile: JztUploadSingleFile,
+  JztTable: JztTable,
+  JztNumericalRange: JztNumericalRange
+  // JztRegionSelect
+})
+
+interface ProTableProps {
+  showOverflowTooltip?: boolean // 是否显示超出部分提示
+  item: FormItemsProps // 搜索参数
+  ruleForm?: { [key: string]: any } // 搜索参数
+  //   isShow?: boolean // 是否是查看模式
+  // disabled?: boolean // 是否表单禁用
+  // formProps?: Record<string, any>
+  infoEmptyText?: string
+  border?: boolean // 是否显示边框
+}
+
+const tooltipProps = computed(() => {
+  const tooltip = (props?.item as any)?.tooltipProps || {}
+  return {
+    content: tooltip.content || '',
+    placement: tooltip.placement || 'top',
+    iconColor: tooltip.iconColor || 'red',
+    effect: tooltip.effect || 'dark'
+  }
+})
+
+// 默认值
+const props = withDefaults(defineProps<ProTableProps>(), {
+  ruleForm: () => ({}),
+  //   isShow: false, // 是否是查看模式
+  infoEmptyText: '-'
+  //   border: false
+})
+
+const startField = ref(props.item?.startField || 'label')
+const endField = ref(props.item?.startField || 'value')
+
+const showField = computed<string>(() => {
+  const showProp = (props?.item as any)?.detailProps?.showProp
+  return (showProp ?? props?.item?.prop ?? '') as string
+})
+//  props.item?.props
+const handleProps = computed(() => {
+  const itemProps = props.item?.props ?? {}
+  return itemProps
+})
+</script>
+
+<style lang="scss" scoped>
+.form-item-content {
+  font-size: 13px;
+  // margin: 2px 5px;
+  padding: 5px 8px;
+  display: flex;
+  justify-content: flex-start;
+  align-items: stretch;
+  line-height: 20px;
+
+  .form-label {
+    height: 100%;
+    // height: 20px;
+    color: #999999;
+    // margin-right: 10px;
+    flex-shrink: 0;
+    max-width: 200px;
+    flex-wrap: wrap;
+  }
+
+  .form-value {
+    flex: 1;
+    min-width: 0;
+    color: #333333;
+  }
+}
+</style>

package/src/JztFormGrid/index.scss

@@ -0,0 +1,60 @@
+.show-form-content {
+  :deep(.el-form-item) {
+    margin-bottom: 8px !important;
+  }
+  :deep(.el-space__item) {
+    height: 100% !important;
+  }
+}
+
+.form_card_content {
+  // padding: 0 8px;
+  width: 100%;
+  box-sizing: border-box;
+  .form_child_card_content {
+    width: 100%;
+    box-sizing: border-box;
+  }
+}
+.form_card {
+  width: 100%;
+  border-radius: 4px;
+  margin-bottom: 12px;
+  .collapse-title {
+    flex: 1;
+    font-weight: 500;
+    font-size: 14px;
+    color: var(--el-text-color-primary);
+    text-align: left;
+    .label {
+      display: inline-block;
+      width: 4px;
+      height: 16px;
+      background: var(--el-color-primary);
+      margin-right: 8px;
+      border-radius: 4px;
+    }
+  }
+}
+
+.noTitle_card {
+  .group-header {
+    width: 100%;
+    padding: 6px;
+    margin-bottom: 8px;
+  }
+}
+
+.group_card {
+  border: 1px solid #e9e9e9;
+  .group-header {
+    width: 100%;
+    padding: 6px 12px;
+    margin-bottom: 8px;
+    background: var(--el-fill-color-light);
+    border-bottom: 1px solid #ebeef5;
+    .label {
+      display: none;
+    }
+  }
+}