feat: 添加xselect

src/components/xSelect/index.vue

@@ -0,0 +1,119 @@
+<template>
+	<div>
+		<el-input ref="inputRef0" style="display: none" v-model="inputValue">
+		</el-input>
+		<el-input ref="inputRef" v-model="inputLabel" :readonly="true">
+			<template #prefix>
+				<el-button
+					text
+					size="small"
+					circle
+					icon="el-icon-search"
+                    @click="showPopover=true"
+				></el-button>
+			</template>
+
+			<template #suffix>
+				<el-button
+					text
+					size="small"
+					circle
+					icon="el-icon-close"
+					v-show="inputLabel && edit"
+					@click="handleClear"
+				></el-button>
+			</template>
+		</el-input>
+		<div v-if="edit">
+			<el-popover
+				v-model:visible="showPopover"
+				trigger="manual"
+				virtual-triggering
+				:virtual-ref="inputRef"
+				:width="tableWidth"
+			>
+				<el-input
+					v-model="keyword"
+					placeholder="关键词查找"
+					@keyup.enter="handleQuery"
+				></el-input>
+				<div style="height: 2px"></div>
+				<scTable
+					ref="table"
+					:apiObj="apiObj"
+					:params="params"
+					:query="query"
+					:height="tableHeight"
+					row-key="id"
+					stripe
+					@row-click="rowClick"
+					:hidePagination="hidePagination"
+					paginationLayout="prev, pager, next"
+					hideDo
+				>
+					<slot></slot>
+				</scTable>
+			</el-popover>
+		</div>
+	</div>
+</template>
+
+<script setup>
+import { ref, defineProps, defineEmits, computed } from "vue";
+
+const props = defineProps({
+	edit: { type: Boolean, default: true },
+	hidePagination: { type: Boolean, default: false },
+	tableWidth: { type: Number, default: 600 },
+	tableHeight: { type: Number, default: 400 },
+	apiObj: { type: Object, default: () => {}, required: true },
+	params: { type: Object, default: () => {} },
+	label: { type: String, default: "" },
+	modelValue: { type: String, default: null },
+	labelField: { type: String, default: "name" },
+	valueField: { type: String, default: "id" },
+});
+
+const emit = defineEmits(["update:modelValue", "update:label"]);
+
+// 控制 popover 显示与隐藏的状态
+const showPopover = ref(false);
+const inputRef = ref();
+const inputRef0 = ref();
+const table = ref();
+const inputLabel = computed({
+	get() {
+		return props.label;
+	},
+	set(val) {
+		emit("update:label", val);
+	},
+});
+const inputValue = computed({
+	get() {
+		return props.modelValue;
+	},
+	set(val) {
+		emit("update:modelValue", val);
+	},
+});
+
+const keyword = ref("");
+const query = ref({ search: "" });
+
+const handleQuery = () => {
+	query.value.search = keyword.value;
+	table.value.queryData(query.value);
+};
+
+const rowClick = (row) => {
+	inputLabel.value = row[props.labelField];
+	inputValue.value = row[props.valueField];
+	showPopover.value = false;
+};
+
+const handleClear = () => {
+	inputLabel.value = "";
+	inputValue.value = null;
+};
+</script>

src/xui.js

@@ -0,0 +1,12 @@
+import ehsUserSelect from './components/ehsSelect/userselect'
+import ehsEpSelect from './components/ehsSelect/epselect'
+import ehsSelect from './components/ehsSelect/select'
+import xSelect from './components/xSelect/index.vue'
+export default {
+	install(app) {
+		app.component('ehsUserSelect', ehsUserSelect);
+		app.component('ehsEpSelect', ehsEpSelect);
+		app.component('ehsSelect', ehsSelect);
+		app.component('xSelect', xSelect);
+	}
+}