zjugis_OA/client/src/views/OaSystem/personnelManagement/ygdaPage/WorkTable.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="workLocation" label="工作单位">
      <template #default="scope">
        <el-input v-model="scope.row.workLocation" v-if="scope.row.isEdit" />
        <span v-else>{{ scope.row.workLocation }}</span>
      </template>
    </el-table-column>
    <el-table-column prop="post" label="职位">
      <template #default="scope">
        <el-input v-model="scope.row.post" v-if="scope.row.isEdit" />
        <span v-else>{{ scope.row.post }}</span>
      </template>
    </el-table-column>
    <el-table-column prop="startTime" label="开始时间">
      <template #default="scope">
        <el-date-picker
          v-model="scope.row.startTime"
          type="date"
          value-format="YYYY-MM-DD"
          v-if="scope.row.isEdit"
        />
        <span v-else>{{ scope.row.startTime }}</span>
      </template>
    </el-table-column>
    <el-table-column prop="endTime" label="结束时间">
      <template #default="scope">
        <el-date-picker
          v-model="scope.row.endTime"
          type="date"
          value-format="YYYY-MM-DD"
          v-if="scope.row.isEdit"
        />
        <span v-else>{{ scope.row.endTime }}</span>
      </template>
    </el-table-column>
    <el-table-column prop="resignReason" label="离职原因">
      <template #default="scope">
        <el-input v-model="scope.row.resignReason" v-if="scope.row.isEdit" />
        <span v-else>{{ scope.row.resignReason }}</span>
      </template>
    </el-table-column>
    <el-table-column prop="jyxy" label="是否有竞业限制/未尽法律事宜">
      <template #default="scope">
        <el-input v-model="scope.row.jyxy" v-if="scope.row.isEdit" />
        <span v-else>{{ scope.row.jyxy }}</span>
      </template>
    </el-table-column>
    <el-table-column prop="competitionDetail" label="具体条款">
      <template #default="scope">
        <el-input v-model="scope.row.competitionDetail" v-if="scope.row.isEdit" />
        <span v-else>{{ scope.row.competitionDetail }}</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 link type="primary" size="small" @click="deleteRow(scope.$index)">
          删除
        </el-button>
        <el-button 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
  workLocation?: string // 工作单位
  post?: string // 职位
  startTime?: string // 开始时间
  endTime?: string // 结束时间
  resignReason?: string // 离职原因
  jyxy?: string // 是否有竞业限制/未尽法律事宜
  competitionDetail?: 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, {
    workLocation: '',
    post: '',
    startTime: '',
    endTime: '',
    resignReason: '',
    jyxy: '',
    competitionDetail: '',
    isEdit: true
  })
}

// 保存行
const onSaveItem = (index: number) => {
  tableData.value[index].isEdit = false
  // console.log('tableData.value', tableData.value)
  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>