@ebiz/designer-components 0.0.19 → 0.0.21

package/src/components/EbizDescriptions.vue

@@ -0,0 +1,341 @@
+<template>
+  <div class="ebiz-descriptions">
+    <div v-if="title || $slots.title" class="ebiz-descriptions__header">
+      <slot name="title">{{ title }}</slot>
+    </div>
+    <table 
+      class="ebiz-descriptions__body"
+      :class="[
+        `ebiz-descriptions--${size}`,
+        { 'ebiz-descriptions__body--fixed': tableLayout === 'fixed' },
+        { 'ebiz-descriptions__body--border': border }
+      ]"
+      :style="border && tableBorderColor ? {'--td-descriptions-border-color': tableBorderColor} : {}"
+    >
+      <tbody>
+        <template v-if="rows.length > 0">
+          <template v-if="layout === 'horizontal'">
+            <tr v-for="(row, rowIndex) in rows" :key="`row-${rowIndex}`">
+              <template v-for="(item, colIndex) in row" :key="`${rowIndex}-${colIndex}`">
+                <template v-if="itemLayout === 'horizontal'">
+                  <th 
+                    class="ebiz-descriptions__label"
+                    :class="[item.labelClassName]"
+                  >
+                    <slot :name="`${item.slotName}-label`">
+                      {{ item.label }}
+                    </slot>
+                    <span v-if="colon" class="ebiz-descriptions__colon">:</span>
+                  </th>
+                  <td 
+                    :colspan="item.span * 2 - 1"
+                    class="ebiz-descriptions__content"
+                    :class="[item.contentClassName]"
+                  >
+                    <slot :name="item.slotName">
+                      {{ item.content }}
+                    </slot>
+                  </td>
+                </template>
+              </template>
+            </tr>
+          </template>
+          <template v-else>
+            <template v-for="(row, rowIndex) in rows" :key="`${rowIndex}`">
+              <template v-if="itemLayout === 'horizontal'">
+                <tr>
+                  <template v-for="(item, colIndex) in row" :key="`label-${rowIndex}-${colIndex}`">
+                    <th 
+                      class="ebiz-descriptions__label"
+                      :class="[item.labelClassName]"
+                    >
+                      <slot :name="`${item.slotName}-label`">
+                        {{ item.label }}
+                      </slot>
+                      <span v-if="colon" class="ebiz-descriptions__colon">:</span>
+                    </th>
+                    <td 
+                      :colspan="item.span"
+                      class="ebiz-descriptions__content"
+                      :class="[item.contentClassName]"
+                    >
+                      <slot :name="item.slotName">
+                        {{ item.content }}
+                      </slot>
+                    </td>
+                  </template>
+                </tr>
+              </template>
+              <template v-else>
+                <tr>
+                  <template v-for="(item, colIndex) in row" :key="`label-${rowIndex}-${colIndex}`">
+                    <th 
+                      :colspan="item.span"
+                      class="ebiz-descriptions__label"
+                      :class="[item.labelClassName]"
+                    >
+                      <slot :name="`${item.slotName}-label`">
+                        {{ item.label }}
+                      </slot>
+                      <span v-if="colon" class="ebiz-descriptions__colon">:</span>
+                    </th>
+                  </template>
+                </tr>
+                <tr>
+                  <template v-for="(item, colIndex) in row" :key="`content-${rowIndex}-${colIndex}`">
+                    <td 
+                      :colspan="item.span"
+                      class="ebiz-descriptions__content"
+                      :class="[item.contentClassName]"
+                    >
+                      <slot :name="item.slotName">
+                        {{ item.content }}
+                      </slot>
+                    </td>
+                  </template>
+                </tr>
+              </template>
+            </template>
+          </template>
+        </template>
+        <template v-else>
+          <slot></slot>
+        </template>
+      </tbody>
+    </table>
+  </div>
+</template>
+
+<script setup>
+import { defineProps, defineEmits, computed, useSlots, ref } from 'vue';
+import { isArray, isNil } from 'lodash-es';
+
+const props = defineProps({
+  border: {
+    type: Boolean,
+    default: false
+  },
+  colon: {
+    type: Boolean,
+    default: false
+  },
+  column: {
+    type: Number,
+    default: 2
+  },
+  layout: {
+    type: String,
+    default: 'horizontal',
+    validator(val) {
+      return ['horizontal', 'vertical'].includes(val);
+    }
+  },
+  itemLayout: {
+    type: String,
+    default: 'horizontal',
+    validator(val) {
+      return ['horizontal', 'vertical'].includes(val);
+    }
+  },
+  size: {
+    type: String,
+    default: 'medium',
+    validator(val) {
+      return ['small', 'medium', 'large'].includes(val);
+    }
+  },
+  title: {
+    type: String,
+    default: ''
+  },
+  tableLayout: {
+    type: String,
+    default: 'fixed',
+    validator(val) {
+      return ['auto', 'fixed'].includes(val);
+    }
+  },
+  tableBorderColor: {
+    type: String,
+    default: ''
+  },
+  items: {
+    type: Array,
+    default: () => []
+  }
+});
+
+defineEmits([]);
+
+const slots = useSlots();
+const itemsType = ref('slots');
+
+// 计算行数据
+const rows = computed(() => {
+  // 1. 获取要渲染的 items
+  let items = [];
+
+  if (isArray(props.items) && props.items.length > 0) {
+    // 从 props.items 获取数据
+    items = props.items.map(item => ({
+      label: item.label,
+      content: item.content,
+      span: item.span || 1,
+      labelClassName: item.labelClassName || '',
+      contentClassName: item.contentClassName || '',
+      slotName: item.name || `item-${items.length}`
+    }));
+    itemsType.value = 'props';
+  } else {
+    // 从 slots 获取数据
+    const defaultSlot = slots.default?.();
+    if (defaultSlot) {
+      items = defaultSlot
+        .filter(vnode => vnode.type && 
+          (vnode.type.name === 'EbizDescriptionsItem' || 
+           vnode.type.__name === 'EbizDescriptionsItem'))
+        .map((vnode, index) => {
+          const props = vnode.props || {};
+          const span = isNil(props.span) ? 1 : Number(props.span);
+          return {
+            label: props.label || '',
+            content: '',
+            span: span > props.column ? props.column : span,
+            labelClassName: props.labelClassName || '',
+            contentClassName: props.contentClassName || '',
+            slotName: props.name || `item-${index}`,
+            children: vnode.children
+          };
+        });
+      itemsType.value = 'slots';
+    }
+  }
+
+  // 2. 判断布局，如果是垂直布局则直接返回
+  if (props.layout === 'vertical') {
+    return [items];
+  }
+
+  // 3. 水平布局时，计算每一行的item
+  const rows = [];
+  let currentRow = [];
+  let currentRowSpan = 0;
+  const { column } = props;
+
+  items.forEach((item, index) => {
+    const span = item.span || 1;
+    
+    // 如果当前行放不下了，创建新行
+    if (currentRowSpan + span > column) {
+      rows.push(currentRow);
+      currentRow = [];
+      currentRowSpan = 0;
+    }
+    
+    // 添加到当前行
+    currentRow.push({
+      ...item,
+      span: span
+    });
+    
+    currentRowSpan += span;
+    
+    // 处理最后一个元素
+    if (index === items.length - 1) {
+      // 最后一个元素填充剩余空间
+      if (currentRowSpan < column) {
+        currentRow[currentRow.length - 1].span += (column - currentRowSpan);
+      }
+      rows.push(currentRow);
+    }
+  });
+
+  return rows;
+});
+</script>
+
+<style scoped>
+.ebiz-descriptions {
+  font-size: 14px;
+  color: rgba(0, 0, 0, 0.9);
+  line-height: 22px;
+}
+
+.ebiz-descriptions__header {
+  margin-bottom: 16px;
+}
+
+.ebiz-descriptions__header > * {
+  font-size: 16px;
+  font-weight: 700;
+  color: rgba(0, 0, 0, 0.9);
+  line-height: 24px;
+}
+
+.ebiz-descriptions__body {
+  width: 100%;
+  border-collapse: collapse;
+  table-layout: fixed;
+}
+
+.ebiz-descriptions__body--fixed {
+  table-layout: fixed;
+}
+
+.ebiz-descriptions__body--border {
+  border-collapse: separate;
+  border-spacing: 0;
+  border-top: 1px solid var(--td-descriptions-border-color, #dcdcdc);
+  border-left: 1px solid var(--td-descriptions-border-color, #dcdcdc);
+}
+
+.ebiz-descriptions__body--border .ebiz-descriptions__label,
+.ebiz-descriptions__body--border .ebiz-descriptions__content {
+  border-right: 1px solid var(--td-descriptions-border-color, #dcdcdc);
+  border-bottom: 1px solid var(--td-descriptions-border-color, #dcdcdc);
+}
+
+.ebiz-descriptions__label {
+  font-weight: normal;
+  color: rgba(0, 0, 0, 0.6);
+  background-color: #fafafa;
+  text-align: left;
+  padding: 12px 24px 12px 12px;
+  vertical-align: top;
+}
+
+.ebiz-descriptions__colon {
+  margin: 0 8px 0 2px;
+}
+
+.ebiz-descriptions__content {
+  padding: 12px;
+  text-align: left;
+  vertical-align: top;
+}
+
+/* 尺寸相关样式 */
+.ebiz-descriptions--small .ebiz-descriptions__label,
+.ebiz-descriptions--small .ebiz-descriptions__content {
+  padding: 8px;
+}
+
+.ebiz-descriptions--medium .ebiz-descriptions__label,
+.ebiz-descriptions--medium .ebiz-descriptions__content {
+  padding: 12px;
+}
+
+.ebiz-descriptions--large .ebiz-descriptions__label,
+.ebiz-descriptions--large .ebiz-descriptions__content {
+  padding: 16px;
+}
+
+/* 不同布局的padding调整 */
+.ebiz-descriptions__body:not(.ebiz-descriptions__body--border) .ebiz-descriptions__label {
+  padding-left: 0;
+}
+
+.ebiz-descriptions__body:not(.ebiz-descriptions__body--border) .ebiz-descriptions__content {
+  padding-right: 0;
+}
+</style> 

package/src/components/EbizDescriptionsItem.vue

@@ -0,0 +1,48 @@
+<template>
+  <div>
+    <slot></slot>
+  </div>
+</template>
+
+<script setup>
+import { defineProps } from 'vue';
+
+defineProps({
+  label: {
+    type: String,
+    default: ''
+  },
+  span: {
+    type: Number,
+    default: 1
+  },
+  className: {
+    type: String,
+    default: ''
+  },
+  labelClassName: {
+    type: String,
+    default: ''
+  },
+  contentClassName: {
+    type: String,
+    default: ''
+  },
+  layout: {
+    type: String,
+    default: '',
+    validator(val) {
+      if (!val) return true;
+      return ['horizontal', 'vertical'].includes(val);
+    }
+  }
+});
+</script>
+
+<style scoped>
+.ebiz-descriptions-item {
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+}
+</style> 

package/src/components/EbizPopconfirm.vue

@@ -0,0 +1,48 @@
+<template>
+  <t-popconfirm
+    :content="content"
+    @cancel="handleCancel"
+    @confirm="handleConfirm"
+  >
+    <slot></slot>
+  </t-popconfirm>
+</template>
+
+<script>
+export default {
+  name: "EbizPopconfirm"
+}
+</script>
+
+<script setup>
+import { Popconfirm as TPopconfirm } from 'tdesign-vue-next';
+
+// 定义属性
+const props = defineProps({
+  // 确认框内容
+  content: {
+    type: [String, Function],
+    default: ''
+  }
+});
+
+// 定义事件
+const emit = defineEmits([
+  'cancel',
+  'confirm'
+]);
+
+// 取消按钮点击事件
+const handleCancel = ({ e }) => {
+  emit('cancel', { e });
+};
+
+// 确认按钮点击事件
+const handleConfirm = ({ e }) => {
+  emit('confirm', { e });
+};
+</script>
+
+<style lang="less" scoped>
+/* 自定义样式可在此处添加 */
+</style> 

package/src/components/EbizSelect.vue

@@ -1,95 +1,95 @@
-<template>
-  <div>
-    <tiny-select
-      v-model="value3"
-      filterable
-      remote
-      :remote-config="{ autoSearch: true }"
-      :remote-method="remoteMethod3"
-      :loading="loading3"
-      loading-text="Loading..."
-      @change="onChange"
-    >
-      <tiny-option v-for="item in options3" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
-    </tiny-select>
-    
-  </div>
-</template>
-
-<script setup>
-import { onMounted, ref, toRefs} from 'vue'
-import { TinySelect, TinyOption } from '@opentiny/vue'
-import request from '@/apiService/simpleDataService';
-const props = defineProps({
-  apiConfig: {
-    type: Object,
-    default: {
-        apiId: null,
-        apiType: ''
-    }
-  }
-})
-const emit = defineEmits(['formSubmitted'])
-
-onMounted(() => {
-  remoteMethod3('')
-})
-
-const loading3 = ref(false)
-const value3 = ref('')
-const options3 = ref([])
-const list = ref([])
-
-{/* const url = ('http://192.168.0.247:9002/api/appdata/select') */}
-
-const { apiConfig } = toRefs(props);
-
-const remoteMethod3 = (query) => {
-  request.fetch({
-    "queryParams":{"name": query}
-  },{
-    apiId: apiConfig.value.apiId,
-  },'/appdata/select',).then((val) => {
-    console.log("val.data11111", val.data)
-    options3.value = val.data.map((item) => {
-      return { value: item.name, label: item.name }
-    })
-    console.log("options3.value", options3.value)
-
-  }).catch((err) => {
-    console.log("err111111", err)
-  })
-}
-const onChange = () => {
-  emit('formSubmitted', value3.value);
-}
-
-
-{/* const url = ('http://localhost:3000/admin/product/getHomeProList') */}
-
-
-{/* onMounted(async() => {
-    // await axios.get(url).then((val) => {
-    //     console.log('val', val.data.data)
-    //     list.value = val.data.data.map((item) => {
-    //         return { value: item.name, label: item.name }
-    //       })
-    // })
-
-
-    //  post请求  参数：  apiId: 372, queryParams: {"type": 1}
-    await axios.post(url, { apiId: params.apiId, queryParams: { type: 1 } }).then((val) => {
-      list.value = val.data.data.map((item) => {
-        return { value: item.name, label: item.name }
-      })
-    })
-
-}) */}
-
-</script>
-
-<style lang="less" scoped>
-.tiny-select {
-  width: 280px;
-}
-</style>
+<template>
+  <div>
+    <tiny-select
+      v-model="value3"
+      filterable
+      remote
+      :remote-config="{ autoSearch: true }"
+      :remote-method="remoteMethod3"
+      :loading="loading3"
+      loading-text="Loading..."
+      @change="onChange"
+    >
+      <tiny-option v-for="item in options3" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
+    </tiny-select>
+    
+  </div>
+</template>
+
+<script setup>
+import { onMounted, ref, toRefs} from 'vue'
+import { TinySelect, TinyOption } from '@opentiny/vue'
+import request from '@/apiService/simpleDataService';
+const props = defineProps({
+  apiConfig: {
+    type: Object,
+    default: {
+        apiId: null,
+        apiType: ''
+    }
+  }
+})
+const emit = defineEmits(['formSubmitted'])
+
+onMounted(() => {
+  remoteMethod3('')
+})
+
+const loading3 = ref(false)
+const value3 = ref('')
+const options3 = ref([])
+const list = ref([])
+
+{/* const url = ('http://192.168.0.247:9002/api/appdata/select') */}
+
+const { apiConfig } = toRefs(props);
+
+const remoteMethod3 = (query) => {
+  request.fetch({
+    "queryParams":{"name": query}
+  },{
+    apiId: apiConfig.value.apiId,
+  },'/appdata/select',).then((val) => {
+    console.log("val.data11111", val.data)
+    options3.value = val.data.map((item) => {
+      return { value: item.name, label: item.name }
+    })
+    console.log("options3.value", options3.value)
+
+  }).catch((err) => {
+    console.log("err111111", err)
+  })
+}
+const onChange = () => {
+  emit('formSubmitted', value3.value);
+}
+
+
+{/* const url = ('http://localhost:3000/admin/product/getHomeProList') */}
+
+
+{/* onMounted(async() => {
+    // await axios.get(url).then((val) => {
+    //     console.log('val', val.data.data)
+    //     list.value = val.data.data.map((item) => {
+    //         return { value: item.name, label: item.name }
+    //       })
+    // })
+
+
+    //  post请求  参数：  apiId: 372, queryParams: {"type": 1}
+    await axios.post(url, { apiId: params.apiId, queryParams: { type: 1 } }).then((val) => {
+      list.value = val.data.data.map((item) => {
+        return { value: item.name, label: item.name }
+      })
+    })
+
+}) */}
+
+</script>
+
+<style lang="less" scoped>
+.tiny-select {
+  width: 280px;
+}
+</style>

package/src/components/EbizTable.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <t-table :data="data" :columns="mergedColumns" :row-key="rowKey" :vertical-align="verticalAlign"
+    <t-table ref="tableRef" :data="data" :columns="mergedColumns" :row-key="rowKey" :vertical-align="verticalAlign"
       :horizontal-align="horizontalAlign" :size="size" :bordered="bordered" :stripe="stripe" :hover="hover"
       :height="height" :max-height="maxHeight" :loading="loading" :loading-props="loadingProps" :load-more="loadMore"
       :empty="empty" :table-layout="tableLayout" :cell-empty-content="cellEmptyContent" :pagination="pagination"
@@ -459,6 +459,10 @@ const handleDragSort = (params) => {
 const handleValidate = (context) => {
   emit('validate', context);
 };
+const tableRef = ref();
+defineExpose({
+  tableRef
+})
 </script>
 
 <style lang="less" scoped>