menduner-admin/src/views/menduner/system/talentMap/details/components/training.vue

<template>
  <el-card shadow="never" class="m-t-10px">
    <template #header>
      <div style="display: flex; justify-content: space-between;">
        <CardTitle title="培训经历" />
        <el-button link type="primary" @click="handleAdd"><Icon icon="ep:plus" class="mr-5px" />新增</el-button>
      </div>
    </template>
    <el-table :data="list" :stripe="true">
      <el-table-column label="培训中心" align="center" prop="orgName" />
      <el-table-column label="培训课程" align="center" prop="course" />
      <el-table-column label="培训时间" align="center" prop="startTime">
        <template #default="scope">
          {{ scope.row.startTime ? timesTampChange(scope.row.startTime, 'Y-M') : '' }}
          <span v-if="scope.row.startTime && scope.row.endTime">至</span>
          {{ scope.row.endTime ? timesTampChange(scope.row.endTime, 'Y-M') : '' }}
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" prop="actions">
        <template #default="{ row, $index }">
          <el-button link type="primary" @click="handleEdit(row, $index)">编辑</el-button>
          <el-button link type="danger" @click="handleDelete($index)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-card>

  <Dialog title="培训经历编辑" v-model="dialogVisible">
    <el-form
      ref="formRef"
      :model="formData"
      :rules="formRules"
      label-width="80px"
    >
      <el-form-item label="培训中心" prop="orgName" required>
        <el-input v-model="formData.orgName" />
      </el-form-item>
      <el-form-item label="培训课程" prop="course" required>
        <el-input v-model="formData.course" />
      </el-form-item>
      <el-form-item label="开始日期" prop="startTime" required>
        <el-date-picker v-model="formData.startTime" :disabledDate="disabledDates" type="month"  value-format="x" placeholder="选择培训开始日期" />
      </el-form-item>
      <el-form-item label="结束日期" prop="endTime" required>
        <el-date-picker v-model="formData.endTime" :disabledDate="disabledDates" type="month"  value-format="x" placeholder="选择在培训束日期" />
      </el-form-item>
      <el-form-item label="培训内容" prop="content">
        <el-input v-model="formData.content" :rows="8" type="textarea" />
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="submitForm" type="primary">确 定</el-button>
      <el-button @click="dialogVisible = false; formData = {}">取 消</el-button>
    </template>
  </Dialog>
</template>

<script setup>
defineOptions({ name: 'TalentMapTraining'})
import { cloneDeep } from 'lodash-es'
import { timesTampChange } from '@/utils/transform/date'

const props = defineProps({
  data: Array
})
const list = ref([])
watch(() => props.data, (newVal) => {
  list.value = cloneDeep(newVal)
}, { deep: true })

const message = useMessage() // 消息弹窗
const editIndex = ref()
const formRef = ref()
const dialogVisible = ref(false)
const formData = ref({})
const type = ref('add')
const formRules = reactive({
  orgName: [{ required: true, message: '培训中心不能为空', trigger: 'blur' }],
  course: [{ required: true, message: '培训课程不能为空', trigger: 'blur' }],
  startDate: [{ required: true, message: '开始时间不能为空', trigger: 'blur' }],
  endDate: [{ required: true, message: '结束时间不能为空', trigger: 'blur' }]
})

// 未来的时间不可选
const disabledDates = (date) => {
  return date.getTime() > Date.now()
}

const handleAdd = () => {
  type.value = 'add'
  dialogVisible.value = true
}

const handleEdit = (row, index) => {
  type.value = 'edit'
  editIndex.value = index
  formData.value = cloneDeep(row)
  dialogVisible.value = true
}

// 删除
const handleDelete = async (index) => {
  try {
    await message.delConfirm()
    delete list.value[index]
  } catch {}
}

const submitForm = async () => {
  await formRef.value.validate()
  type.value === 'add' ? list.value.push(formData.value) : list.value[editIndex.value] = formData.value
  formData.value = {}
  editIndex.value = 0
  dialogVisible.value = false
  console.log(list.value, 'submit')
}
</script>