@lx-frontend/wrap-element-ui 1.0.28-beta.3 → 2.0.0-beta.1

package/src/components/LxTable/index.vue

@@ -10,7 +10,7 @@
 -->
 <template>
   <div class="table-content">
-    <FElTable
+    <ElTable
       ref="lxTableRef"
       v-loading="loading"
       v-bind="$attrs"
@@ -40,15 +40,14 @@
         :fixed="getFieldFromConfig(keys[index], 'fixed')"
       >
         <template
-          slot="header"
-          slot-scope="scope"
+          #header="scope"
         >
           <slot
             v-if="getFieldFromConfig(keys[index], 'scopeHeader')"
             template
             :name="`${keys[index]}_header`"
             :keys="keys[index]"
-            :row="scope.row"
+            :row="(scope as any).row"
             :lable="scope.column"
             :column="scope.$index"
           />
@@ -56,7 +55,7 @@
             {{ item }}
           </span>
         </template>
-        <template slot-scope="scope">
+        <template #default="scope">
           <!-- 支持keys字段为'car.id'或者'id' -->
           <div v-if="keys[index].indexOf('.') != -1">
             <!-- 一个td需要展示多个字段名 -->
@@ -87,17 +86,17 @@
             <div v-else>
               <!-- 传入不需要截取的列 -->
               <span v-if="getFieldFromConfig(keys[index], 'templateCutOut')">
-                {{ scope.row[keys[index].split('.')[0]][keys[index].split('.')[1]] | formateValue }}
+                {{ formateValue(scope.row[keys[index].split('.')[0]][keys[index].split('.')[1]]) }}
               </span>
               <Ellipsis
                 v-else
                 :popover-name="popoverName"
                 :line-count="getFieldFromConfig(keys[index], 'lineCount')"
-                :content="[`${scope.row[keys[index].split('.')[0]][keys[index].split('.')[1]]}`] | formateValue"
+                :content="[String(formateValue(scope.row[keys[index].split('.')[0]][keys[index].split('.')[1]]))]"
               >
-                <div slot="popover">
-                  <div>{{ scope.row[keys[index].split('.')[0]][keys[index].split('.')[1]] | formateValue }}</div>
-                </div>
+                <template #popover>
+                  <div>{{ formateValue(scope.row[keys[index].split('.')[0]][keys[index].split('.')[1]]) }}</div>
+                </template>
               </Ellipsis>
             </div>
           </div>
@@ -130,23 +129,23 @@
             <div v-else>
               <!-- 传入不需要截取的列 -->
               <span v-if="getFieldFromConfig(keys[index], 'templateCutOut')">
-                {{ scope.row[keys[index]] | formateValue }}
+                {{ formateValue(scope.row[keys[index]]) }}
               </span>
               <Ellipsis
                 v-else
                 :popover-name="popoverName"
                 :line-count="getFieldFromConfig(keys[index], 'lineCount')"
-                :content="[`${scope.row[keys[index]]}`] | formateValue"
+                :content="[String(formateValue(scope.row[keys[index]]))]"
               >
-                <div slot="popover">
-                  <div>{{ scope.row[keys[index]] | formateValue }}</div>
-                </div>
+                <template #popover>
+                  <div>{{ formateValue(scope.row[keys[index]]) }}</div>
+                </template>
               </Ellipsis>
             </div>
           </div>
         </template>
       </ElTableColumn>
-    </FElTable>
+    </ElTable>
     <ElPagination
       :background="background"
       v-if="currentPage"
@@ -158,136 +157,92 @@
     />
   </div>
 </template>
-<script>
-  import Ellipsis from '../Ellipsis';
-  import { Table } from 'element-ui'
-  const FElTable = {
-    extends: Table,
-    methods: {
-      doLayout (...args) {
-        Table.methods.doLayout.call(this, ...args)
-        this.fixLayout() // Looks like we can do it once?
-      },
-      fixLayout () {
-        // Safari header/content misalign fix (possible other browsers?)
-        this.columns.forEach(c => {
-          // element-ui/packages/table/src/layout-observer.js:49
-          const width = c.realWidth || c.width
-          const th = this.$el.querySelector(`table.el-table__header th.${c.id}`)
-          if (th) {
-            if (th.offsetWidth !== width) {
-              th.style = `min-width: ${width}px; max-width: ${width}px;`
-            }
-            let td
-            for (td of this.$el.querySelectorAll(`table.el-table__body td.${c.id}`)) {
-              if (td.offsetWidth === width) break
-              td.style = `min-width: ${width}px; max-width: ${width}px;`
-            }
-          }
-        })
-      }
-    }
-  }
+<script setup lang="ts">
+import { ElTable, ElTableColumn, ElPagination } from 'element-plus'
+import Ellipsis from '../Ellipsis/index.vue'
+
+defineOptions({ name: 'LxTable' })
+
+interface IProps {
+  tableData?: any[]
+  cloumns?: any[]
+  customConfig?: Record<string, any>
+  keys?: any[]
+  defaultSort?: { prop: string; order: string | null }
+  stripe?: boolean
+  loading?: boolean
+  background?: boolean
+  totals?: number
+  pageSize?: number
+  currentPage?: number
+  popoverName?: string
+  parentFn?: string
+  highlightCurrentRow?: boolean
+  tableRowClassName?: string | ((data: any) => string)
+}
+
+interface IEmits {
+  (e: 'handleCurrentChange', val: number): void
+  (e: 'handleSelectionChange', val: any[]): void
+  (e: 'handleRowClick', row: any, column: any, cell: any, event: Event): void
+  (e: 'handleCellClick', row: any, column: any, cell: any, event: Event): void
+  (e: 'sortChange', column: any, prop: any, order: any): void
+}
+
+const props = withDefaults(defineProps<IProps>(), {
+  tableData: () => [],
+  cloumns: () => [],
+  customConfig: () => ({}),
+  keys: () => [],
+  defaultSort: () => ({ prop: '', order: null }),
+  stripe: true,
+  loading: false,
+  background: true,
+  parentFn: '',
+  highlightCurrentRow: true,
+})
+
+const emit = defineEmits<IEmits>()
+
+const handleCurrentChange = (val: number) => {
+  emit('handleCurrentChange', val)
+}
 
-  export default {
-    name: 'LxTable',
-    components: {
-      Ellipsis,
-      FElTable
-    },
-    filters: {
-      formateValue (val) {
-        if (Array.isArray(val) && (val[0] === 'null' || val[0] === '')) {
-          val = '';
-        }
-        return (val || val === 0) ? val : '--';
-      },
-    },
-    props: {
-      tableData: {
-        type : Array,
-        default: () => [],
-      },
-      cloumns: {
-        type : Array,
-        default: () => [],
-      },
-      customConfig: Object,
-      keys: {
-        type : Array,
-        default: () => [],
-      },
-      defaultSort: {
-        prop: '',
-        order: null,
-      },
-      stripe: {
-        type: Boolean,
-        default: true,
-      },
-      loading: {
-        type: Boolean,
-        default: false,
-      },
-      background: {
-        type: Boolean,
-        default: true,
-      },
-      totals: Number,
-      pageSize: Number,
-      currentPage: Number,
-      popoverName: String,
-      parentFn: {
-        type : String,
-        default: '',
-      },
-      highlightCurrentRow: {
-        type: Boolean,
-        default: true,
-      },
-      tableRowClassName: {},
-    },
-    data() {
-      return {
-        scope: 'scope',
-      };
-    },
-    methods: {
-      handleCurrentChange(val) {
-        this.$emit('handleCurrentChange', val);
-      },
-      handleSelectionChange(val) {
-        this.$emit('handleSelectionChange', val);
-      },
-      handleRowClick(row, column, cell, event) {
-        this.$emit('handleRowClick', row, column, cell, event);
-      },
-      handleCellClick(row, column, cell, event){
-        this.$emit('handleCellClick', row, column, cell, event);
-      },
-      sortChange(column, prop, order) {
-        this.$emit('sortChange', column, prop, order);
-      },
-      formatterMethods(key, keyData) {
-        // 返回数据，可类型转换; 可添加单位;
-        let value = '--';
-        if (key || key === 0) {
-          const keyValue = keyData[key] || key;
-          const unit = keyData.unit || '';
-          value = `${keyValue}${unit}`;
-        }
-        return value;
-      },
-      formateValue (val) {
-        return val || val === 0 ? val : '--';
-      },
-      getFieldFromConfig(index, name) {
-        return this.customConfig && this.customConfig[index] && this.customConfig[index][name];
-      },
-    }
+const handleSelectionChange = (val: any[]) => {
+  emit('handleSelectionChange', val)
+}
+
+const handleRowClick = (row: any, column: any, cell: any, event: Event) => {
+  emit('handleRowClick', row, column, cell, event)
+}
+
+const handleCellClick = (row: any, column: any, cell: any, event: Event) => {
+  emit('handleCellClick', row, column, cell, event)
+}
+
+const sortChange = (column: any, prop: any, order: any) => {
+  emit('sortChange', column, prop, order)
+}
+
+const formatterMethods = (key: any, keyData: any) => {
+  let value = '--'
+  if (key || key === 0) {
+    const keyValue = keyData[key] || key
+    const unit = keyData.unit || ''
+    value = `${keyValue}${unit}`
   }
+  return value
+}
+
+const formateValue = (val: any) => {
+  return val || val === 0 ? val : '--'
+}
+
+const getFieldFromConfig = (index: string, name: string) => {
+  return props.customConfig && props.customConfig[index] && props.customConfig[index][name]
+}
 </script>
-<style type="scss">
+<style lang="less">
   .table-content .el-pagination {
     text-align: right;
     padding: 14px 0;

package/src/components/PopoverForm/index.vue

@@ -1,9 +1,14 @@
 <template>
-  <el-popover :placement="placement" :disabled="isDisabled" :width="width || 300" v-model="show" trigger="click" :visible-arrow="true">
+  <el-popover :placement="placement" :disabled="isDisabled" :width="width || 300" v-model:visible="show" trigger="click" :show-arrow="true">
     <div class="el-popover__header">
       {{title}}
       <slot name="title"></slot>
-      <el-button type="text" icon="el-icon-close" @click="handleClose"></el-button>
+      <el-button
+        type="text"
+        @click="handleClose"
+      >
+        <el-icon><Close /></el-icon>
+      </el-button>
     </div>
     <slot name="form"></slot>
 
@@ -11,53 +16,53 @@
       <slot name="footer"></slot>
       <el-button type="primary" class="wp100" @click="handleSubmit">{{ okText }}</el-button>
     </div>
-    <span slot='reference'>
-      <slot name='reference'></slot>
-    </span>
+    <template #reference>
+      <slot name="reference" />
+    </template>
   </el-popover>
 </template>
-<script>
-export default {
-  name: 'PopoverForm',
-  props: {
-    title: String,
-    width: Number,
-    placement: {
-      type: String,
-      default: 'left',
-    },
-    withSubmitBtn: {
-      type: Boolean,
-      default: true,
-    },
-    isDisabled: {
-      type: Boolean,
-      default: false,
-    },
-    okText: {
-      type: String,
-      default: '确认',
-    },
-  },
-  data() {
-    return {
-      show: false,
-    };
-  },
-  methods: {
-    handleClose() {
-      this.show = false;
-    },
-    handleSubmit() {
-      this.$emit('on-sure');
-    },
-  },
-  watch: {
-    show(val) {
-      this.$emit('on-change', val);
-    },
-  },
-};
+<script setup lang="ts">
+import { ref, watch } from 'vue'
+import { Close } from '@element-plus/icons-vue'
+
+defineOptions({ name: 'PopoverForm' })
+
+interface IProps {
+  title?: string
+  width?: number
+  placement?: string
+  withSubmitBtn?: boolean
+  isDisabled?: boolean
+  okText?: string
+}
+
+interface IEmits {
+  (e: 'on-change', val: boolean): void
+  (e: 'on-sure'): void
+}
+
+const props = withDefaults(defineProps<IProps>(), {
+  placement: 'left',
+  withSubmitBtn: true,
+  isDisabled: false,
+  okText: '确认',
+})
+
+const emit = defineEmits<IEmits>()
+
+const show = ref(false)
+
+watch(show, (val) => {
+  emit('on-change', val)
+})
+
+const handleClose = () => {
+  show.value = false
+}
+
+const handleSubmit = () => {
+  emit('on-sure')
+}
 </script>
 <style type="scss" scoped>
   .wp100{