adminBigData/src/views/school/subjectList.vue

<template>
  <el-dialog v-model="subjectShowDialog" title="科目列表" width="600px">
    <div class="subject_list">
      <div v-for="tag in subjectList" :key="tag.id" class="list_item" :class="tag.canDelete == 1 ? 'list_item can_delete' : 'list_item'">
        <span>{{ tag.courseName }}</span>
        <img src="@/assets/icon/delete.svg" v-if="tag.canDelete" @click="delSubject(tag.id)">
      </div>
      <el-input ref="InputRef" v-if="inputVisible" v-model="inputValue" @keyup.enter="handleInputConfirm" @blur="InputBlur" class="input_item">
        <template #append>
          <img src="@/assets/icon/confirm.svg" @click="handleInputConfirm">
        </template>
      </el-input>
      <div class="list_item cancel" v-if="inputVisible" @click="cancelAdd">
        <img src="@/assets/icon/cancel.svg">
        <span>取消</span>
      </div>
      <div v-else class="list_item add" @click="AddCourse">
        <img src="@/assets/icon/add.svg">
        <span>添加</span>
      </div>
    </div>
  </el-dialog>
</template>

<script lang="ts">
export default {
  name: 'SubjectList'
}
</script>
<script lang="ts" setup>
import { ref, inject, nextTick, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { getAllSubject, deleteSubject, addSubject } from '@/api/school'
let subjectShowDialog = inject('subjectShowDialog')
interface subjectList {
  id: number
  courseName: string
  canDelete?: number
}
const subjectList = ref<subjectList[]>([])
const inputValue = ref('')
const inputVisible = ref(false)
onMounted(() => {
  GetAllSubject()
})
// 获取所有科目
const GetAllSubject = () => {
  getAllSubject({}).then((res: any) => {
    if (res.code === 200 && res.data) {
      const { data } = res
      subjectList.value = data
    }
  })
}

const InputBlur = () => {
  if(!inputValue.value) {
    inputVisible.value = false
    inputValue.value = ''
  }
}
const handleInputConfirm = () => {
  if (inputValue.value) {
    const isDuplicate = subjectList.value.some(item => item.courseName === inputValue.value.trim())
    if (isDuplicate) {
      ElMessage.warning('当前科目已存在，请勿重复添加')
      return
    }
    addSubject({ courseName: inputValue.value }).then((res: any) => {
      if (res.code === 200) {
        ElMessage.success(res.msg)
        GetAllSubject()
        inputVisible.value = false
        inputValue.value = ''
      } else {
        ElMessage.error(res.msg)
      }
    })
  } else {
    inputVisible.value = false
    inputValue.value = ''
  }
}
const InputRef = ref<HTMLElement | null>(null)
const AddCourse = () => {
  inputVisible.value = true;
  nextTick(() => {
    (InputRef.value as HTMLInputElement).focus()
  })
  
}
const cancelAdd = () => {
  inputVisible.value = false
  inputValue.value = ''
}
const delSubject = (id: number) => {
  deleteSubject({ ids: [id] }).then((res: any) => { 
    if (res.code === 200) {
      ElMessage.success(res.msg)
      GetAllSubject()
    } else {
      ElMessage.error(res.msg)
    }
  })
}
</script>

<style lang="scss" scoped>
 .el-dialog  ::deep(.el-dialog__body ) {
  min-height: 300px !important;
  padding: 50px!important;
}
.subject_list {
  height: auto;
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap:20px ;
  .list_item {
    border-radius: 4px 4px 4px 4px;
    border: 1px solid #2E64FA;
    width: auto;
    min-width: 72px;
    height: 36px;
    line-height: 36px;
    padding: 0 10px;
    font-weight: 400;
    font-size: 14px;
    color: #2E64FA;
    display: flex;
    justify-content: space-between;
    align-items: center;
    &.can_delete {
      background: rgba(46,100,250,0.1);
    }
    span {
      width: 100%;
      text-align: center;
      // margin-right: 8px;
    }
    img {
      margin-left: 8px;
      width: 16px;
      height: 16px;
      cursor: pointer;
    }
    img:hover {
      opacity: 0.8;
    }
    &.add, 
    &.cancel {
      background: #fff;
      span {
        margin-right: 0;
      }
      img {
        margin-right: 5px;
      }
      cursor: pointer;
    }
    &.cancel {
      border-color: #BBBBBB;
      color: #BBBBBB;
    }
  }
  :deep(.input_item.el-input) {
    width: 120px;
    height: 36px;
    border-radius: 4px;
    border: 1px solid #2E64FA!important;
    .el-input__wrapper {
      height: 34px;
      box-shadow: none;
      padding: 1px 5px;
    }
    .el-input__inner {
      border: none;  /* 去掉边框 */
      background-color: transparent;  /* 去掉背景色 */
      box-shadow: none;  /* 去掉阴影 */
    }
    .el-input-group__append {
      padding: 0 10px 0 0;
      background: #fff;
      box-shadow: none;
      cursor: pointer;
    }
  }
}
</style>