jcloud/dashboard/src2/components/group/DependencyEditorDialog.vue

<template>
	<Dialog
		:options="{
			title: `编辑 ${dependency.title}`,
			actions: [
				{
					label: '更新',
					variant: 'solid',
					loading: groupDocResource?.updateDependency?.loading,
					onClick: updateDependency
				}
			]
		}"
		v-model="showDialog"
	>
		<template #body-content>
			<div class="space-y-4">
				<!-- 自定义依赖版本 -->
				<div v-if="useCustomVersion">
					<FormControl
						type="data"
						:label="`自定义 ${dependency.title}`"
						placeholder="请输入自定义版本"
						description="请在设置之前确保输入的依赖版本存在"
						v-model="customVersion"
					/>
				</div>

				<!-- 非自定义版本 -->
				<FormControl
					v-else
					type="select"
					:disabled="useCustomVersion"
					:label="dependency.title"
					placeholder="请选择一个版本"
					:options="dependencyOptions"
					v-model="selectedDependencyVersion"
				/>

				<!-- 使用自定义版本复选框 -->
				<div class="flex items-center gap-2">
					<FormControl
						type="checkbox"
						label="使用自定义版本"
						v-model="useCustomVersion"
					/>
					<Tooltip text="查看文档">
						<a
							class="no-underline"
							target="_blank"
							href="https://jingrow.com/docs/benches/editing-bench-dependency-version#setting-a-custom-version"
							><FeatherIcon
								name="help-circle"
								class="h-3 w-3 text-gray-700"
							></FeatherIcon
						></a>
					</Tooltip>
				</div>

				<ErrorMessage
					:message="groupDocResource?.updateDependency?.error || error"
				/>
			</div>
		</template>
	</Dialog>
</template>

<script>
import { getCachedDocumentResource } from 'jingrow-ui';

export default {
	name: 'DependencyEditorDialog',
	props: {
		group: { required: true, type: Object },
		dependency: { required: true, type: Object }
	},
	data() {
		return {
			error: '',
			showDialog: true,
			customVersion: '',
			useCustomVersion: false,
			selectedDependencyVersion: null,
			groupDocResource: getCachedDocumentResource(
				'Release Group',
				this.group.name
			)
		};
	},
	mounted() {
		if (this.dependency.is_custom) {
			this.useCustomVersion = true;
			this.customVersion = this.dependency.version;
		} else {
			this.selectedDependencyVersion = this.dependency.version;
		}
	},
	computed: {
		dependencyOptions() {
			const versions = new Set(this.$resources.dependencyVersions.data ?? []);
			if (!this.dependency.is_custom) {
				versions.add(this.dependency.version);
			}

			return Array.from(versions)
				.sort()
				.map(v => ({
					label: v,
					value: v
				}));
		},
		version() {
			if (this.useCustomVersion) {
				return this.customVersion;
			}

			return this.selectedDependencyVersion;
		}
	},
	resources: {
		dependencyVersions() {
			return {
				type: 'list',
				pagetype: 'Bench Dependency Version',
				fields: ['version'],
				filters: {
					parenttype: 'Bench Dependency',
					parent: this.dependency.dependency,
					supported_jingrow_version: this.group.version
				},
				transform(data) {
					return data.map(d => d.version);
				},
				orderBy: 'version asc',
				pageLength: 1000,
				auto: true
			};
		}
	},
	methods: {
		setErrorIfCannotUpdate() {
			if (!this.version) {
				const verb = this.useCustomVersion ? '输入' : '选择';
				this.error = `请${verb}一个版本`;
				return true;
			}

			if (this.dependency.version === this.version) {
				const verb = this.useCustomVersion ? '输入的' : '选择的';
				this.error = `${verb}版本与之前的版本相同`;
				return true;
			}

			this.error = '';
			return false;
		},
		updateDependency() {
			if (this.setErrorIfCannotUpdate()) {
				return;
			}

			this.groupDocResource.updateDependency.submit(
				{
					dependency_name: this.dependency.name,
					version: this.version,
					is_custom: this.useCustomVersion
				},
				{
					onSuccess: () => {
						this.$emit('success');
this.showDialog = false;
					}
				}
			);
		}
	}
};
</script>