fx-platform-ui 1.0.1 → 1.0.2

package/packages/components/table/src/hook/useTableForm.ts

@@ -0,0 +1,19 @@
+import { computed } from 'vue'
+import type { UseTableStateParams } from './useTableState'
+import type { ComputedRef } from 'vue'
+
+export function useTableForm({ props }: UseTableStateParams) {
+  const schemas = props.formProps?.schemas || []
+  const getFormSlotKeys: ComputedRef<string[]> = computed(() => {
+    return schemas
+      .map((item) => {
+        const value = item['slot'] || null
+        return value ? value : null
+      })
+      .filter((item): item is string => !!item)
+  })
+  console.log('getFormSlotKeys', getFormSlotKeys)
+  return {
+    getFormSlotKeys
+  }
+}

package/packages/components/table/src/index.vue

@@ -6,68 +6,79 @@
       ref="queryFormRef"
       v-bind="formProps"
       @submit="handleSubmit"
-    />
+    >
+      <template v-for="item in getFormSlotKeys" #[item]="data">
+        <slot :name="item" v-bind="data || {}"></slot>
+      </template>
+    </PlForm>
+    <!--  中间放置插槽以防需要  -->
+    <template v-if="$slots.middle">
+      <slot name="middle"></slot>
+    </template>
     <!--  工具按钮 + table  -->
     <div>
       <ToolBar v-if="showToolBar"> </ToolBar>
       <template v-if="$slots.toolbar">
         <slot name="toolbar"></slot>
       </template>
-      <Table
-        v-show="tableShow"
-        ref="tableRef"
-        v-bind="getBindValues"
-        :data-source="tableData"
-        @change="handleTableChange"
-      >
-        <template
-          v-for="defaultItem in Object.keys($slots)"
-          #[defaultItem]="slotData"
-          :key="defaultItem"
-        >
-          <slot :name="defaultItem" v-bind="slotData"></slot>
-        </template>
-        <!--  bodyCell, headerCell  -->
-        <template
-          v-for="item in ['bodyCell', 'headerCell']"
-          #[item]="slotData"
-          :key="item"
+      <div :style="showCard ? cardStyle : ''">
+        <Table
+          v-show="tableShow"
+          ref="tableRef"
+          v-bind="getBindValues"
+          :data-source="tableData"
+          @change="handleTableChange"
         >
-          <slot :name="item" v-bind="slotData"></slot>
           <template
-            v-if="
-              item === 'bodyCell' && getColumnKey(slotData.column) === '$action'
-            "
+            v-for="defaultItem in Object.keys($slots)"
+            #[defaultItem]="slotData"
+            :key="defaultItem"
           >
-            <TableAction :actions="slotData.column.actions(slotData)" />
+            <slot :name="defaultItem" v-bind="slotData"></slot>
           </template>
-          <!--  自定义展示构造  -->
+          <!--  bodyCell, headerCell  -->
           <template
-            v-for="slotItem in getBindValues.columns?.filter(
-              (value) => value[item]
-            )"
-            :key="getColumnKey(slotItem)"
+            v-for="item in ['bodyCell', 'headerCell']"
+            #[item]="slotData"
+            :key="item"
           >
-            <component
-              :is="getComponent(slotItem?.[item]?.(slotData))"
-              v-if="getColumnKey(slotData.column) === getColumnKey(slotItem)"
-            />
+            <slot :name="item" v-bind="slotData"></slot>
+            <template
+              v-if="
+                item === 'bodyCell' &&
+                getColumnKey(slotData.column) === '$action'
+              "
+            >
+              <TableAction :actions="slotData.column.actions(slotData)" />
+            </template>
+            <!--  自定义展示构造  -->
+            <template
+              v-for="slotItem in getBindValues.columns?.filter(
+                (value) => value[item]
+              )"
+              :key="getColumnKey(slotItem)"
+            >
+              <component
+                :is="getComponent(slotItem?.[item]?.(slotData))"
+                v-if="getColumnKey(slotData.column) === getColumnKey(slotItem)"
+              />
+            </template>
           </template>
-        </template>
-      </Table>
+        </Table>
+      </div>
     </div>
   </div>
 </template>
 
 <script lang="ts" setup>
-import { onUpdated, unref } from "vue"
+import { onUpdated, unref } from 'vue'
 import { Table } from 'ant-design-vue'
 import PlForm from '../../form'
 import { isFunction } from '../../../utils/is'
 import { ToolBar, TableAction } from './components'
 import { platTableProps } from './plat-table-props'
 import { platTableEmits } from './plat-table-emits'
-import { useTableState, useTableMethods } from './hook'
+import { useTableState, useTableMethods, useTableForm } from './hook'
 defineOptions({
   name: 'PlTable'
 })
@@ -77,6 +88,11 @@ const emit = defineEmits(platTableEmits)
 
 // table所有状态(可以理解成将props 和 slot 进行处理 并将结果输出)
 const tableState = useTableState({ props })
+
+const { getFormSlotKeys } = useTableForm({
+  props
+})
+
 const { tableData, queryFormRef, getBindValues } = tableState
 
 // 表格内部方法

package/packages/components/table/src/plat-table-props.ts

@@ -9,6 +9,21 @@ import type {
 
 export const platTableProps = {
   ...tableProps(),
+  // 表格是否展示卡片属性
+  showCard: {
+    type: Boolean as PropType<boolean>,
+    default: false
+  },
+  // 表格外层卡片属性
+  cardStyle: {
+    type: Object as PropType<Recordable>,
+    default: () => ({
+      padding: '16px',
+      opacity: '1',
+      background: '#ffffff',
+      borderRadius: '4pt'
+    })
+  },
   // 是否显示搜索菜单
   searchShow: {
     type: Boolean as PropType<boolean>,

package/packages/components/tag-input/index.ts

@@ -0,0 +1,10 @@
+import { App } from 'vue'
+
+import PlTagInput from './src/index.vue'
+PlTagInput.install = function (app: App) {
+  // 组件注册，按需引入
+  app.component(PlTagInput.name, PlTagInput)
+  return app
+}
+
+export default PlTagInput

package/packages/components/tag-input/src/index.vue

@@ -0,0 +1,162 @@
+<template>
+  <div
+    class="fx-tag-input"
+    tabindex="0"
+    :style="contentStyle"
+    v-on="{ click: focusActive }"
+  >
+    <div v-if="inputVisible" class="fx-tag-input-body">
+      <template v-for="tag in value" :key="tag">
+        <a-tag v-bind="tagProps" closable @close="() => handleClose(tag)">
+          {{ tag }}
+        </a-tag>
+      </template>
+      <div class="fx-tag-input-wrap">
+        <div class="fx-tag-input-enter">
+          <a-input
+            ref="inputRef"
+            v-model:value="inputValue"
+            type="text"
+            size="small"
+            :bordered="false"
+            @compositionupdate="titleCompositionUpdate"
+            @compositionend="titleCompositionEnd"
+            @blur="handleInputBlur"
+            @keydown.enter="handleInputConfirm"
+          />
+        </div>
+        <div class="fx-tag-input-hidden"
+          >{{ inputValue }}{{ inputUpdateValue }}</div
+        >
+      </div>
+    </div>
+    <div class="no-select">{{ prompt }}</div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { nextTick, PropType, ref } from 'vue'
+import { message } from 'ant-design-vue'
+import type { TagProps } from 'ant-design-vue/es/tag'
+defineOptions({
+  name: 'PlTagInput'
+})
+const emit = defineEmits(['update:value', 'change'])
+const props = defineProps({
+  tagProps: {
+    type: Object as PropType<TagProps>,
+    default: () => ({})
+  },
+  contentStyle: {
+    type: Object as PropType<Recordable>,
+    default: () => {
+      return {}
+    }
+  },
+  value: {
+    type: Array as PropType<string[] | number[]>,
+    default: () => {
+      return []
+    }
+  },
+  prompt: {
+    type: String,
+    default: '请输入内容，按回车确认'
+  }
+})
+const inputRef = ref()
+// 输入已确认的值
+const inputValue = ref('')
+// 输入的字符还没有被确认
+const inputUpdateValue = ref('')
+// 是否显示输入框
+const inputVisible = ref(false)
+
+// compositionupdate 事件触发于字符被输入到一段文字的时候，但是输入的字符还没有被确认，因此不能用于替代 input 事件。
+const titleCompositionUpdate = (e: any) => {
+  inputUpdateValue.value = e.target.value
+}
+
+const titleCompositionEnd = () => {
+  inputUpdateValue.value = ''
+}
+// 失焦事件
+const handleInputBlur = () => {
+  inputValue.value = ''
+  inputVisible.value = props.value.length > 0
+}
+// 删除标签事件
+const handleClose = (removedTag) => {
+  const tagsArray: (string | number)[] = props.value
+  const tags = tagsArray.filter((tag) => tag !== removedTag)
+  focusActive()
+  emit('update:value', tags)
+}
+// 确认输入事件
+const handleInputConfirm = () => {
+  let tagsArray: (string | number)[] = props.value
+  if (inputValue.value && tagsArray.indexOf(inputValue.value) === -1) {
+    tagsArray = [...tagsArray, inputValue.value]
+    emit('update:value', tagsArray)
+    emit('change', tagsArray)
+  } else if (inputValue.value && tagsArray.indexOf(inputValue.value) !== -1) {
+    message.warning('内容已存在')
+  }
+  inputValue.value = ''
+  inputUpdateValue.value = ''
+}
+// 聚焦事件
+const focusActive = () => {
+  inputVisible.value = true
+  nextTick(() => {
+    inputRef.value.focus()
+  })
+}
+</script>
+
+<style lang="less" scoped>
+.fx-tag-input {
+  border: 1px solid #d9d9d9;
+  border-radius: 2px;
+  padding: 5px;
+  min-height: 100px;
+
+  .fx-tag-input-wrap {
+    display: inline-block;
+    width: auto;
+    min-width: 60px;
+    position: relative;
+    height: 22px;
+    vertical-align: middle;
+
+    .fx-tag-input-enter {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      z-index: 1;
+    }
+
+    .fx-tag-input-hidden {
+      height: 0;
+      overflow: hidden;
+      white-space: nowrap;
+      // 对齐input所有会影响宽度的样式
+      padding: 0 15px;
+      font-size: 14px;
+    }
+  }
+
+  .no-select {
+    margin-top: 10px;
+    color: #bfbfbf;
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
+    -khtml-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+  }
+}
+</style>

package/packages/theme/color.variables.less

@@ -0,0 +1,13 @@
+@primary-color: #1890ff; // 全局主色
+@link-color: #1890ff; // 链接色
+@success-color: #52c41a; // 成功色
+@warning-color: #faad14; // 警告色
+@error-color: #f5222d; // 错误色
+@font-size-base: 14px; // 主字号
+@heading-color: rgba(0, 0, 0, 0.85); // 标题色
+@text-color: rgba(0, 0, 0, 0.65); // 主文本色
+@text-color-secondary: rgba(0, 0, 0, 0.45); // 次文本色
+@disabled-color: rgba(0, 0, 0, 0.25); // 失效色
+@border-radius-base: 2px; // 组件/浮层圆角
+@border-color-base: #d9d9d9; // 边框色
+@box-shadow-base: 0 2px 8px rgba(0, 0, 0, 0.15); // 浮层阴影