重复名称

src/components/drawers/AddOpenCourse.vue

@@ -111,6 +111,7 @@
                 style="width: 440px; height: 40px; border-radius: 8px"
                 placeholder="请输入开课名称"
                 :disabled="editBeginClass"
+                :changeName="changeName"
               ></NameInput>
             </div>
           </div>
@@ -416,7 +417,7 @@
   </a-drawer>
 </template>
 <script setup lang="jsx">
-import {defineProps, ref, nextTick, computed,defineEmits  } from "vue";
+import {defineProps, ref, nextTick, computed,defineEmits,onMounted  } from "vue";
 import {Form, message} from "ant-design-vue";
 import FJUpload from "@/components/common/FJUpload";
 import CheckBox from "@/components/common/CheckBox";
@@ -424,7 +425,7 @@ import RangePicker from "@/components/common/RangePicker";
 import ProjectManager from "@/components/project/ProjectManagerNewTeacher";
 import AddHomework from "@/components/drawers/CommonHomework.vue";
 import AddTest from "@/components/drawers/CommonTest.vue";
-import NameInput from "@/components/project/NameInput";
+import NameInput from "@/components/project/NameInputNew";
 import AssessmentList from "@/components/drawers/AssessmentList.vue";
 import {COURSE_PLAN_EDIT, COURSE_PLAN_PAGE, DEL_PLAN, EXAM_DETAIL, WORK_DETAIL,PROJECT_DETAIL_MODIFY,PROJECT_RELEASE} from "@/api/apis";
 import dayjs from "dayjs";
@@ -437,6 +438,7 @@ import moment from 'moment';
 import * as api from "../../api/indexTaskadd";
 import {useRoute} from "vue-router";
 import { DeleteOutlined } from '@ant-design/icons-vue';
+const changeName = ref(false)
 const props = defineProps({
   type: Number,
 });
@@ -747,6 +749,7 @@ const confirm = async()=>{
 }
 
 const createNewCourse = () => {
+  changeName.value = true;
   editBeginClass.value = false
   formData.reset({
     type: props.type,
@@ -766,7 +769,10 @@ const createNewCourse = () => {
   ];
   offCourseNewVisiable.value = true;
 };
-const handleCancelStu = () => offCourseNewVisiable.value = false;
+const handleCancelStu = () => {
+  changeName.value = false;
+  offCourseNewVisiable.value = false
+};
 
 const expenseStatus = {
     A10:true,

src/components/project/NameInputNew.vue

@@ -0,0 +1,180 @@
+<template>
+  <a-input
+    v-model:value="modelV.value"
+    :placeholder="placeholder"
+    :show-count="showCount"
+    :maxlength="maxlength"
+    :disabled="disabled"
+    @focus="onFocus"
+    @blur="onBlur"
+  />
+  <div style="color: red; font-size: 10px" v-if="modelV.value && validated===0 && isExistName">
+    名称重复，请重新输入
+  </div>
+  <div style="color: red; font-size: 10px" v-if="newNamess">
+    名称重复，已自动生成不重复名称，可自行修改
+  </div>
+</template>
+<script setup>
+import {defineProps, defineEmits, watch, ref, onMounted} from "vue";
+import {validateName} from "@/api/index1";
+import {Form} from "ant-design-vue";
+
+const props = defineProps({
+  value: {
+    type: String,
+  },
+  id: {
+    type: String,
+  },
+  placeholder: {
+    type: String,
+  },
+  type: {
+    type: Number,
+    default: 1,
+  },
+  maxlength: {
+    type: Number,
+    default: 30,
+  },
+  showCount: {
+    type: Boolean,
+    default: false,
+  },
+  validated: {
+    type: Number,
+    default: 0,
+  },
+  onceName: {
+    type: String,
+  },
+  disabled:{
+    type:Boolean,
+    default:false
+  },
+  changeName:{
+    type:Boolean,
+    default:false
+  }
+});
+
+const emit = defineEmits(["update:value",'update:validated']);
+
+const modelV = ref({
+  value: props.value
+});
+
+const isExistName = ref(true);
+
+const rulesRef = ref({
+  value: [{
+    required: true,
+    validator: validateValue,
+    trigger: "change",
+    message: "请输入名称",
+  },
+  ],
+});
+
+Form.useForm(modelV, rulesRef, { debounce: { wait: 800 } });
+
+onMounted(() => {
+  if(props.onceName==modelV.value.value){
+    isExistName.value = false;
+  }else{
+    isExistName.value = true;
+  }
+})
+const newNamess = ref(false)
+const generateUniqueName = () => {
+  let baseName = modelV.value.value;
+  let randomSuffix = '_' + Math.floor(Math.random() * 1000);
+  let newName = baseName + randomSuffix;
+  emit("update:value", newName);
+  newNamess.value = true
+}
+const watchChange = ref(true)
+const onFocus = ()=>{
+  newNamess.value = false
+  watchChange.value = false
+}
+const onBlur = ()=>{
+  watchChange.value = true
+}
+watch(props,()=>{
+  if(props.changeName){
+    if (watchChange.value && modelV.value.value && props.validated === 0 && isExistName.value) {
+      generateUniqueName();
+    }
+  }else{
+    newNamess.value = false
+  }
+},{immediate: true})
+watch(props, () => {
+  if(props.onceName==modelV.value.value){
+    isExistName.value = false;
+  }else{
+    isExistName.value = true;
+  }
+  modelV.value.value = props.value;
+},{immediate: true});
+
+watch(() => modelV.value.value, () => {
+  emit("update:validated", 1);
+  emit("update:value", modelV.value.value);
+});
+
+async function validateValue() {
+  if (!modelV.value.value) {
+    return Promise.reject("请输入名称");
+  }
+  return validateName({ name: modelV.value.value, type: props.type, id: props.id }).then(res => {
+      if (res.data.data === 1 && isExistName.value) {
+        emit("update:validated", 0);
+        return Promise.reject("名称重复");
+      }
+      emit("update:validated", 2);
+      return Promise.resolve();
+    }
+  );
+}
+</script>
+<style lang="scss">
+
+.pro {
+  .ant-input-affix-wrapper {
+    padding: 4px 8px;
+    border-radius: 8px;
+
+  }
+}
+
+.road {
+  .ant-input-affix-wrapper {
+    padding: 0px 8px;
+    border-radius: 8px;
+  }
+}
+
+
+.b_input,
+.i1_input {
+  .ant-input-affix-wrapper {
+    position: relative;
+    display: inline-block;
+    width: 88%;
+    min-width: 0;
+    padding: 8px 17px;
+    color: rgba(0, 0, 0, 0.85);
+    font-size: 14px;
+    line-height: 1.5715;
+    background-color: #fff;
+    background-image: none;
+    border: 1px solid #d9d9d9;
+    border-radius: 8px;
+    transition: all 0.3s;
+    display: inline-flex;
+  }
+}
+</style>