From de9ece8096e9ec5f160f92cad315d57f876a1f8d Mon Sep 17 00:00:00 2001
From: lbw <wangiegie@163.com>
Date: Mon, 29 May 2023 16:59:29 +0800
Subject: [PATCH] =?UTF-8?q?:sparkles:=20Introducing=20new=20features.=20?=
 =?UTF-8?q?=E6=96=B0=E5=A2=9E=20popverInput=20=E3=80=81=E8=A1=A8=E5=8D=95?=
 =?UTF-8?q?=E5=8A=A8=E6=80=81=E8=A1=A8=E6=A0=BC=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/FormTable/index.vue    | 197 ++++++++++++++++++++++++++
 src/components/PopoverInput/index.vue | 105 ++++++++++++++
 2 files changed, 302 insertions(+)
 create mode 100644 src/components/FormTable/index.vue
 create mode 100644 src/components/PopoverInput/index.vue

diff --git a/src/components/FormTable/index.vue b/src/components/FormTable/index.vue
new file mode 100644
index 00000000..7e79a010
--- /dev/null
+++ b/src/components/FormTable/index.vue
@@ -0,0 +1,197 @@
+<template>
+	<div class="form-table" ref="scFormTable">
+		<el-table :data="data" ref="table" border stripe :cell-style="{ textAlign: 'center' }" :header-cell-style="{
+			textAlign: 'center',
+			background: 'var(--el-table-row-hover-bg-color)',
+			color: 'var(--el-text-color-primary)',
+		}">
+			<el-table-column type="index" width="50" fixed="left">
+				<template #header>
+					<el-button v-if="!hideAdd" type="primary" icon="el-icon-plus" size="small" circle @click="rowAdd"></el-button>
+					<el-tooltip content="序号" placement="top">
+						#
+					</el-tooltip>
+				</template>
+				<template #default="scope">
+					<div :class="['form-table-handle', { 'form-table-handle-delete': !hideDelete }]">
+						<span>{{ scope.$index + 1 }}</span>
+						<el-button v-if="!hideDelete" type="danger" icon="el-icon-delete" size="small" plain circle
+							@click="rowDel(scope.row, scope.$index)"></el-button>
+					</div>
+				</template>
+			</el-table-column>
+			<el-table-column label="" width="50" v-if="dragSort">
+				<template #header>
+					<el-icon>
+						<el-tooltip content="拖动排序" placement="top">
+							<WarningFilled />
+						</el-tooltip>
+					</el-icon>
+				</template>
+				<template #default>
+					<div class="move" style="cursor: move;">
+						<el-icon>
+							<Sort />
+						</el-icon>
+					</div>
+				</template>
+			</el-table-column>
+			<slot></slot>
+			<template #empty>
+				{{ placeholder }}
+			</template>
+		</el-table>
+	</div>
+</template>
+
+<script>
+  import Sortable from 'sortablejs'
+
+  export default {
+    props: {
+      /**
+       * 表格数据
+       */
+      modelValue: { type: Array, default: () => [] },
+      /**
+       * 新增行模板
+       */
+      addTemplate: { type: Object, default: () => {} },
+      /**
+       * 无数据时的提示语
+       */
+      placeholder: { type: String, default: "暂无数据" },
+      /**
+       * 是否启用拖拽排序
+       */
+      dragSort: { type: Boolean, default: false },
+      /**
+       * 是否隐藏新增按钮
+       */
+      hideAdd: { type: Boolean, default: false },
+      /**
+       * 是否隐藏删除按钮
+       */
+      hideDelete: { type: Boolean, default: false }
+    },
+    data(){
+      return {
+        /**
+         * 表格数据
+         */
+        data: []
+      }
+    },
+    mounted(){
+      this.data = this.modelValue
+      if(this.dragSort){
+        this.rowDrop()
+      }
+    },
+    watch:{
+      modelValue(){
+        this.data = this.modelValue
+      },
+      data: {
+        handler(){
+          /**
+           * 更新表格数据
+           * @event update:modelValue
+           * @type {Array}
+           */
+          this.$emit('update:modelValue', this.data);
+        },
+        deep: true
+      }
+    },
+    methods: {
+      /**
+       * 启用表格行拖拽排序
+       */
+      rowDrop(){
+        const _this = this
+        const tbody = this.$refs.table.$el.querySelector('.el-table__body-wrapper tbody')
+        Sortable.create(tbody, {
+          handle: ".move",
+          animation: 300,
+          ghostClass: "ghost",
+          onEnd({ newIndex, oldIndex }) {
+            _this.data.splice(newIndex, 0, _this.data.splice(oldIndex, 1)[0])
+            const newArray = _this.data.slice(0)
+            const tmpHeight = _this.$refs.scFormTable.offsetHeight
+            _this.$refs.scFormTable.style.setProperty('height', tmpHeight + 'px')
+            _this.data = []
+            _this.$nextTick(() => {
+              _this.data = newArray
+              _this.$nextTick(() => {
+                _this.$refs.scFormTable.style.removeProperty('height')
+              })
+            })
+          }
+        })
+      },
+      /**
+       * 新增一行
+       */
+      rowAdd(){
+        const temp = JSON.parse(JSON.stringify(this.addTemplate))
+        this.data.push(temp)
+      },
+      /**
+       * 删除一行
+       * @param {Object} row - 要删除的行数据
+       * @param {number} index - 要删除的行的索引
+       */
+      rowDel(row, index){
+        this.data.splice(index, 1)
+      },
+      /**
+       * 插入一行
+       * @param {Object} row - 要插入的行数据，默认为新增行模板
+       */
+      pushRow(row){
+        const temp = row || JSON.parse(JSON.stringify(this.addTemplate))
+        this.data.push(temp)
+      },
+      /**
+       * 根据索引删除一行
+       * @param {number} index - 要删除的行的索引
+       */
+      deleteRow(index){
+        this.data.splice(index, 1)
+      }
+    }
+  }
+</script>
+
+<style scoped>
+.form-table {
+	width: 100%;
+}
+
+.form-table .form-table-handle {
+	text-align: center;
+}
+
+.form-table .form-table-handle span {
+	display: inline-block;
+}
+
+.form-table .form-table-handle button {
+	display: none;
+}
+
+.form-table .hover-row .form-table-handle-delete span {
+	display: none;
+}
+
+.form-table .hover-row .form-table-handle-delete button {
+	display: inline-block;
+}
+
+.form-table .move {
+	text-align: center;
+	font-size: 14px;
+	margin-top: 3px;
+}
+</style>
diff --git a/src/components/PopoverInput/index.vue b/src/components/PopoverInput/index.vue
new file mode 100644
index 00000000..ba6fbb06
--- /dev/null
+++ b/src/components/PopoverInput/index.vue
@@ -0,0 +1,105 @@
+<template>
+    <div @mouseenter="inPopover = true" @mouseleave="inPopover = false">
+        <el-popover placement="top" v-model:visible="visible" :width="width" trigger="contextmenu" class="popover-input"
+            :teleported="teleported" :persistent="false" popper-class="!p-0">
+            <div class="flex p-3" @click.stop="">
+                <div class="popover-input__input mr-[10px] flex-1">
+                    <el-select class="flex-1" :size="size" v-if="type == 'select'" v-model="inputValue"
+                        :teleported="teleported">
+                        <el-option v-for="item in options" :key="item.value" :label="item.label"
+                            :value="item.value"></el-option>
+                    </el-select>
+                    <el-input v-else v-model.trim="inputValue" :maxlength="limit" :show-word-limit="showLimit" :type="type"
+                        :size="size" clearable :placeholder="placeholder" />
+                </div>
+                <div class="flex-none popover-input__btns">
+                    <el-button link @click="close">取消</el-button>
+                    <el-button type="primary" :size="size" @click="handleConfirm">确定</el-button>
+                </div>
+            </div>
+            <template #reference>
+                <div class="inline" @click.stop="handleOpen">
+                    <slot></slot>
+                </div>
+            </template>
+        </el-popover>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { useEventListener } from '@vueuse/core'
+import type { PropType } from 'vue'
+
+const props = defineProps({
+    value: {
+        type: String
+    },
+    type: {
+        type: String,
+        default: 'text'
+    },
+    width: {
+        type: [Number, String],
+        default: '300px'
+    },
+    placeholder: String,
+    disabled: {
+        type: Boolean,
+        default: false
+    },
+    options: {
+        type: Array as PropType<any[]>,
+        default: () => []
+    },
+    size: {
+        type: String as PropType<'default' | 'small' | 'large'>,
+        default: 'default'
+    },
+    limit: {
+        type: Number,
+        default: 200
+    },
+    showLimit: {
+        type: Boolean,
+        default: false
+    },
+    teleported: {
+        type: Boolean,
+        default: true
+    }
+})
+const emit = defineEmits(['confirm'])
+const visible = ref(false)
+const inPopover = ref(false)
+const inputValue = ref()
+const handleConfirm = () => {
+    close()
+    emit('confirm', inputValue.value)
+}
+const handleOpen = () => {
+    if (props.disabled) {
+        return
+    }
+    visible.value = true
+}
+const close = () => {
+    visible.value = false
+}
+
+watch(
+    () => props.value,
+    (value) => {
+        inputValue.value = value
+    },
+    {
+        immediate: true
+    }
+)
+
+useEventListener(document.documentElement, 'click', () => {
+    if (inPopover.value) return
+    close()
+})
+</script>
+
+<style scoped lang="scss"></style>