调整 el-popover 显示方式

src/modules/base/views/components/icon-check.vue

@@ -1,10 +1,5 @@
 <template>
-	<el-popover
-		v-model:visible="visible"
-		placement="bottom-start"
-		width="660px"
-		popper-class="icon-check"
-	>
+	<el-popover placement="bottom-start" width="660px" popper-class="icon-check" trigger="click">
 		<el-row :gutter="10" class="list scroller1">
 			<el-col v-for="(item, index) in list" :key="index" :span="2" :xs="4">
 				<el-button :class="{ 'is-active': item === name }" @click="onChange(item)">
@@ -14,13 +9,7 @@
 		</el-row>
 
 		<template #reference>
-			<el-input
-				v-model="name"
-				placeholder="请选择"
-				clearable
-				@click="open"
-				@input="onChange"
-			/>
+			<el-input v-model="name" placeholder="请选择" clearable @input="onChange" />
 		</template>
 	</el-popover>
 </template>
@@ -42,9 +31,6 @@ export default defineComponent({
 	emits: ["update:modelValue"],
 
 	setup(props, { emit }) {
-		// 是否可见
-		const visible = ref<boolean>(false);
-
 		// 图标列表
 		const list = ref<any[]>(iconList());
 
@@ -58,14 +44,6 @@ export default defineComponent({
 			}
 		);
 
-		function open() {
-			visible.value = true;
-		}
-
-		function close() {
-			visible.value = false;
-		}
-
 		function onChange(val: string) {
 			emit("update:modelValue", val);
 			close();
@@ -74,7 +52,6 @@ export default defineComponent({
 		return {
 			name,
 			list,
-			visible,
 			open,
 			close,
 			onChange

src/modules/base/views/components/menu-check.vue

@@ -1,7 +1,6 @@
 <template>
 	<div class="menu-check__wrap">
 		<el-popover
-			v-model:visible="visible"
 			placement="bottom-start"
 			width="660px"
 			popper-class="menu-check"
@@ -27,7 +26,7 @@
 			</div>
 
 			<template #reference>
-				<el-input v-model="name" readonly placeholder="请选择" @click="visible = true" />
+				<el-input v-model="name" readonly placeholder="请选择" />
 			</template>
 		</el-popover>
 	</div>
@@ -55,8 +54,6 @@ export default defineComponent({
 		// 关键字
 		const keyword = ref<string>("");
 
-		const visible = ref<boolean>(false);
-
 		// 树形列表
 		const list = ref<any[]>([]);
 
@@ -69,7 +66,6 @@ export default defineComponent({
 		// 绑定值回调
 		function onCurrentChange({ id }: any) {
 			emit("update:modelValue", id);
-			visible.value = false;
 		}
 
 		// 刷新列表
@@ -111,7 +107,6 @@ export default defineComponent({
 		});
 
 		return {
-			visible,
 			keyword,
 			list,
 			expandedKeys,
@@ -136,7 +131,7 @@ export default defineComponent({
 	}
 
 	&__scroller {
-		max-height: 400px;
+		max-height: 300px;
 		overflow: hidden auto;
 	}
 }

src/modules/task/components/cron/cron.vue

@@ -447,11 +447,6 @@
 				</div>
 			</el-tab-pane>
 		</el-tabs>
-
-		<div class="vue-cron__footer">
-			<el-button @click="close">{{ text.Close }}</el-button>
-			<el-button type="success" @click="save">{{ text.Save }}</el-button>
-		</div>
 	</div>
 </template>
 
@@ -469,7 +464,7 @@ export default {
 		showYear: Boolean
 	},
 
-	emits: ["update:modelValue", "change", "close"],
+	emits: ["update:modelValue", "change"],
 
 	data() {
 		return {
@@ -718,20 +713,14 @@ export default {
 	watch: {
 		data() {
 			this.rest(this.$data);
+		},
+		cron(val) {
+			this.$emit("update:modelValue", val);
+			this.$emit("change", val);
 		}
 	},
 
 	methods: {
-		save() {
-			this.$emit("update:modelValue", this.cron);
-			this.$emit("change", this.cron);
-			this.close();
-		},
-
-		close() {
-			this.$emit("close");
-		},
-
 		rest(data) {
 			for (const i in data) {
 				if (data[i] instanceof Object) {
@@ -754,6 +743,8 @@ export default {
 
 <style lang="scss" scoped>
 .vue-cron {
+	margin-top: 10px;
+
 	:deep(.el-tabs) {
 		box-shadow: none;
 
@@ -764,10 +755,15 @@ export default {
 		.el-tabs__header {
 			margin-bottom: 0;
 		}
+
+		.el-tabs__item {
+			height: 30px;
+			line-height: 30px;
+		}
 	}
 
 	&__item {
-		max-height: 300px;
+		max-height: 250px;
 		overflow: auto;
 		padding: 10px;
 		border: 1px solid #eee;
@@ -777,11 +773,14 @@ export default {
 		.el-row {
 			min-height: 32px;
 			line-height: 32px;
-			margin-bottom: 10px;
 
 			.el-radio {
 				line-height: 32px;
 			}
+
+			:deep(.el-radio__label) {
+				font-size: 12px;
+			}
 		}
 	}
 

src/modules/task/components/cron/index.tsx

@@ -25,15 +25,6 @@ export default defineComponent({
 
 	setup(props, { emit }) {
 		const cron = ref<string>("");
-		const visible = ref<boolean>(false);
-
-		function open() {
-			visible.value = true;
-		}
-
-		function close() {
-			visible.value = false;
-		}
 
 		watch(cron, (val: string) => {
 			emit("update:modelValue", val);
@@ -52,44 +43,23 @@ export default defineComponent({
 
 		return {
 			cron,
-			visible,
 			open,
 			close
 		};
 	},
 
 	render(ctx: any) {
-		const ElPopover = (
-			<el-popover
-				v-model:visible={ctx.visible}
-				disabled={ctx.disabled || ctx.readonly}
-				width="600px"
-			></el-popover>
-		);
-
 		return (
 			<div class="cl-cron">
-				{h(
-					ElPopover,
-					{},
-					{
-						default() {
-							return <cron v-model={ctx.cron} onClose={ctx.close}></cron>;
-						},
-						reference() {
-							return (
-								<el-input
-									clearable
-									disabled={ctx.disabled}
-									readonly={ctx.readonly}
-									v-model={ctx.cron}
-									placeholder={ctx.placeholder}
-									onClick={ctx.open}
-								></el-input>
-							);
-						}
-					}
-				)}
+				<el-input
+					clearable
+					disabled={ctx.disabled}
+					readonly={ctx.readonly}
+					v-model={ctx.cron}
+					placeholder={ctx.placeholder}
+				></el-input>
+
+				<cron v-model={ctx.cron} onClose={ctx.close}></cron>
 			</div>
 		);
 	}