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

<template>
  <div class="casually-name">
    <div class="star-title">
      <i></i>
      <span>工作经历</span>
    </div>
    <el-tag
      class="add-tag"
      type="primary"
      effect="plain"
      v-if="!tableData.length && !readOnly"
      @click="onAddItem(-1)"
      >+ 新增</el-tag
    >
    <el-table
      class="detail-table"
      :header-cell-style="{
        background: '#F2F4F8',
        color: '#000000'
      }"
      :data="tableData"
    >
      <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"
            format="YYYY-MM-DD"
            value-format="x"
            v-if="scope.row.isEdit"
          />
          <span v-else>{{ moment(scope.row.startTime).format('YYYY-MM-DD') }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="endTime" label="结束时间">
        <template #default="scope">
          <el-date-picker
            v-model="scope.row.endTime"
            type="date"
            format="YYYY-MM-DD"
            value-format="x"
            v-if="scope.row.isEdit"
          />
          <span v-else>{{ moment(scope.row.endTime).format('YYYY-MM-DD') }}</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" v-if="!readOnly">
        <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>
  </div>
</template>
<script lang="ts" setup>
/**
 * @description 工作经历
 */
import { cloneDeep } from 'lodash-es'
import moment from 'moment'

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 } = props
const readOnly = ref(props.onlyRead)
watch(
  () => props.onlyRead,
  (newVal) => {
    readOnly.value = newVal
  }
)
watch(
  () => props.defaultData,
  (newVal) => {
    tableData.value = newVal.map((item: any) => {
      return {
        ...item,
        isEdit: false
      }
    })
  }
)
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.forEach((item: any, num: number) => {
    if (num == index) {
      item.isEdit = false
    }
  })
  const changeData = cloneDeep(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">
.casually-name {
  position: relative;
}
.star-title {
  display: flex;
  align-items: center;
  margin-bottom: 8px;

  i {
    display: block;
    width: 16px;
    height: 16px;
    margin-right: 9px;
    background: url('../../../../assets/imgs/OA/mine/star.png') center no-repeat;
    background-size: 100%;
  }

  span {
    font-size: 18px;
    font-weight: bold;
    color: #000000;
  }
}
.add-tag {
  position: absolute;
  top: 2px;
  right: 0;
  cursor: pointer;
}
.detail-table {
  width: 100%;
  min-height: 100px;
}
</style>