-
+
+
+
+
+
{{ row.primaryDomain }}
@@ -62,6 +65,7 @@ import { ref } from 'vue';
import { listDomains } from '@/api/modules/website';
import { Website } from '@/api/interface/website';
import { routerToNameWithParams } from '@/utils/router';
+import { Rules } from '@/global/form-rules';
interface Props {
row: Website.Website;
@@ -71,11 +75,17 @@ const props = defineProps
();
const emit = defineEmits(['favoriteChange', 'domainEdit']);
const inputRef = ref();
const isEditing = ref(false);
-const editValue = ref('');
const domains = ref([]);
+const formData = reactive({
+ domainName: '',
+});
+const rules = ref({
+ domainName: [Rules.requiredInput, Rules.linuxName],
+});
+const formRef = ref();
const startEdit = () => {
- editValue.value = props.row.primaryDomain;
+ formData.domainName = props.row.primaryDomain;
isEditing.value = true;
nextTick(() => {
inputRef.value?.focus();
@@ -83,15 +93,20 @@ const startEdit = () => {
});
};
-const saveEdit = () => {
- if (editValue.value.trim() && editValue.value !== props.row.primaryDomain) {
- emit('domainEdit', props.row, editValue.value.trim());
- }
- isEditing.value = false;
+const saveEdit = async () => {
+ await formRef.value.validate((valid) => {
+ if (valid) {
+ const editValue = formData.domainName.trim();
+ if (editValue && editValue !== props.row.primaryDomain) {
+ emit('domainEdit', props.row, editValue);
+ }
+ isEditing.value = false;
+ }
+ });
};
const cancelEdit = () => {
- editValue.value = props.row.primaryDomain;
+ formData.domainName = props.row.primaryDomain;
isEditing.value = false;
};
@@ -133,4 +148,21 @@ const favoriteWebsite = (row: Website.Website) => {
justify-content: space-between;
width: 100%;
}
+:deep(.el-form) {
+ margin: 0;
+ line-height: 1;
+}
+:deep(.el-form-item) {
+ margin-bottom: 0;
+}
+:deep(.el-form-item__error) {
+ position: absolute;
+ top: 100%;
+ left: 0;
+ padding-top: 2px;
+}
+
+.domain-input {
+ width: 200px;
+}