zjugis_OA/client/src/views/OaSystem/personnelManagement/ygdaPage/SchoolTable.vue

<template>
  <el-tag
    type="primary"
    size="large"
    effect="plain"
    v-if="!tableData.length && !onlyRead"
    @click="onAddItem(0)"
    >增加一行</el-tag
  >
  <el-table
    class="detail-table"
    :header-cell-style="{
      background: '#F2F4F8',
      color: '#000000'
    }"
    :data="tableData"
    v-else
  >
    <el-table-column prop="major" label="专业">
      <template #default="scope">
        <el-input v-model="scope.row.major" v-if="scope.row.isEdit" />
        <span v-else>{{ scope.row.major }}</span>
      </template>
    </el-table-column>
    <el-table-column prop="byxx" label="毕业学校">
      <template #default="scope">
        <el-input v-model="scope.row.byxx" v-if="scope.row.isEdit" />
        <span v-else>{{ scope.row.byxx }}</span>
      </template>
    </el-table-column>
    <el-table-column prop="bysj" label="毕业时间">
      <template #default="scope">
        <el-date-picker
          v-model="scope.row.bysj"
          type="date"
          value-format="YYYY-MM-DD"
          v-if="scope.row.isEdit"
        />
        <span v-else>{{ scope.row.bysj }}</span>
      </template>
    </el-table-column>
    <el-table-column prop="xl" label="学历">
      <template #default="scope">
        <el-input v-model="scope.row.xl" v-if="scope.row.isEdit" />
        <span v-else>{{ scope.row.xl }}</span>
      </template>
    </el-table-column>
    <el-table-column prop="filePath" label="附件地址">
      <template #default="scope">
        <el-input v-model="scope.row.filePath" v-if="scope.row.isEdit" />
        <span v-else>{{ scope.row.filePath }}</span>
      </template>
    </el-table-column>
    <el-table-column fixed="right" label="操作" width="140">
      <template #default="scope">
        <el-button
          link
          type="primary"
          size="small"
          @click="onSaveItem(scope.$index)"
          v-if="scope.row.isEdit"
        >
          保存
        </el-button>
        <el-button link type="primary" size="small" @click="onEditItem(scope.$index)" v-else>
          编辑
        </el-button>
        <el-button
          v-if="tableData.length > 1"
          link
          type="primary"
          size="small"
          @click="deleteRow(scope.$index)"
        >
          删除
        </el-button>
        <el-button
          v-if="scope.$index < 4 && tableData.length < 5"
          link
          type="primary"
          size="small"
          @click="onAddItem(scope.$index)"
        >
          新增
        </el-button>
      </template>
    </el-table-column>
  </el-table>
</template>
<script lang="ts" setup>
/**
 * @description 学习经历
 */
interface ITable {
  id?: string
  userId?: string
  major?: string // 专业
  byxx?: string // 毕业学校
  bysj?: string // 毕业时间
  xl?: string // 学历
  filePath?: string // 附件地址
  isEdit?: boolean // 是否可编辑
}
const tableData = ref<ITable[]>([])

const $emit = defineEmits<{
  (e: 'onSave', v: any): void
}>()

interface IProps {
  defaultData: any[]
  onlyRead?: boolean
}
const props = defineProps<IProps>()
const { defaultData, onlyRead } = props
onMounted(() => {
  if (defaultData && defaultData.length) {
    tableData.value = defaultData.map((item: any) => {
      return {
        ...item,
        isEdit: false
      }
    })
  }
})

// 新增行
const onAddItem = (index: number) => {
  tableData.value.splice(index - 1, 0, {
    major: '',
    byxx: '',
    bysj: '',
    xl: '',
    filePath: '',
    isEdit: true
  })
}

// 保存行
const onSaveItem = (index: number) => {
  tableData.value[index].isEdit = false
  const changeData = tableData.value.map((item: any) => {
    delete item.isEdit
    return item
  })
  $emit('onSave', changeData)
}

// 编辑行
const onEditItem = (index: number) => {
  tableData.value[index].isEdit = true
}

// 删除
const deleteRow = (index: number) => {
  tableData.value.splice(index, 1)
}
</script>
<style scoped lang="scss">
.detail-table {
  width: 100%;
  min-height: 100px;
}
</style>