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

<template>
  <el-card shadow="never" class="m-t-10px">
    <template #header>
      <CardTitle title="工作经历" />
    </template>
    <el-table :data="list" :stripe="true">
      <el-table-column label="任职企业" align="center" prop="jobCpy" />
      <el-table-column label="职位名称" align="center" prop="jobPosition" />
      <el-table-column label="在职时间" align="center" prop="startTime">
        <template #default="{ row }">
          {{ row.startDate }} - {{ row.endDate }}
        </template>
      </el-table-column>
      <!-- <el-table-column label="工作内容" align="center" prop="jobContent" :show-overflow-tooltip="true" /> -->
      <el-table-column label="操作" align="center" prop="actions">
        <template #default="{ row, $index }">
          <el-button link type="primary" @click="handleEdit(row, $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="jobCpy" required>
        <el-input v-model="formData.jobCpy" />
      </el-form-item>
      <el-form-item label="职位名称" prop="jobPosition" required>
        <el-input v-model="formData.jobPosition" />
      </el-form-item>
      <el-form-item label="开始时间" prop="startDate" required>
        <el-input v-model="formData.startDate" placeholder="请填写开始时间" />
      </el-form-item>
      <el-form-item label="结束时间" prop="endDate" required>
        <el-input v-model="formData.endDate" placeholder="请填写结束时间" />
      </el-form-item>
      <el-form-item label="工作内容" prop="jobContent">
        <el-input v-model="formData.jobContent" :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: 'TalentMapExp'})
import { cloneDeep } from 'lodash-es'

const props = defineProps({
  data: Array
})
const list = ref([])
list.value = cloneDeep(props.data)

const editIndex = ref(0)
const formRef = ref()
const dialogVisible = ref(false)
const formData = ref({})
const formRules = reactive({
  jobCpy: [{ required: true, message: '任职企业不能为空', trigger: 'blur' }],
  jobPosition: [{ required: true, message: '职位名称不能为空', trigger: 'blur' }],
  startDate: [{ required: true, message: '开始时间不能为空', trigger: 'blur' }],
  endDate: [{ required: true, message: '结束时间不能为空', trigger: 'blur' }]
})

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

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