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="!readOnly" @click="onAddItem()"
      >+ 新增</el-tag
    >
    <div class="my-portrait-card">
      <el-form style="width: 100%" v-if="tableData.length > 0">
        <div v-for="(item, index) in tableData" class="card-item" :key="index">
          <el-row :gutter="66">
            <el-col :span="12">
              <el-form-item label="起始时间">
                <el-date-picker
                  v-model="item['startTime']"
                  style="width: 100%"
                  placeholder=""
                  type="date"
                  value-format="x"
                  :disabled="!item.isEdit"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="终止时间">
                <el-date-picker
                  v-model="item['endTime']"
                  style="width: 100%"
                  placeholder=""
                  type="date"
                  value-format="x"
                  :disabled="!item.isEdit"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="66">
            <el-col :span="12">
              <el-form-item label="工作单位">
                <el-input
                  placeholder="请输入单位名称"
                  v-model="item.workLocation"
                  :disabled="!item.isEdit"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="岗位">
                <el-input v-model="item.post" :disabled="!item.isEdit" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="66">
            <el-col :span="12">
              <el-form-item label="离职原因">
                <el-input v-model="item.resignReason" :disabled="!item.isEdit" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="是否有竞业限制/未尽法律事宜">
                <el-select v-model="item.jyxy" style="width: 100%" :disabled="!item.isEdit">
                  <el-option value="1" label="是" />
                  <el-option value="0" label="否" />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="66">
            <el-col :span="24" v-if="item.jyxy === '1'">
              <el-form-item label="具体条款">
                <el-input
                  type="textarea"
                  v-model="item.competitionDetail"
                  :disabled="!item.isEdit"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <div class="btn_group" v-if="!onlyRead">
            <el-button type="primary" size="small" @click="onSaveItem(item)" v-if="item.isEdit">
              保存
            </el-button>
            <el-button type="primary" size="small" @click="onEditItem(index)" v-else>
              编辑
            </el-button>
            <el-button type="primary" size="small" @click="deleteRow(index)"> 删除 </el-button>
          </div>
        </div>
      </el-form>
      <p v-else style="text-align: center; width: 100%; color: #909399; font-size: 13px"
        >暂无数据</p
      >
    </div>
  </div>
</template>
<script lang="ts" setup>
/**
 * @description 工作经历
 */
import { FormValidate } from '@/utils/formValidate'
import { cloneDeep } from 'lodash-es'

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: typeof item['isEdit'] === 'boolean' ? item['isEdit'] : false
      }
    })
  }
)
onMounted(() => {
  if (defaultData && defaultData.length) {
    tableData.value = defaultData.map((item: any) => {
      return {
        ...item,
        isEdit: false
      }
    })
  }
})

// 新增行
const onAddItem = () => {
  tableData.value.push({
    workLocation: '',
    post: '',
    startTime: '',
    endTime: '',
    resignReason: '',
    jyxy: '1',
    competitionDetail: '',
    isEdit: true
  })
}
const ruleFields = [
  {
    name: 'startTime',
    message: '起始时间不能为空!'
  },
  {
    name: 'endTime',
    message: '终止时间不能为空!'
  },
  {
    name: 'workLocation',
    message: '工作单位!'
  },
  {
    name: 'post',
    message: '岗位!'
  },
  {
    name: 'resignReason',
    message: '离职原因不能为空!'
  }
]
// 保存行
const onSaveItem = (item: ITable) => {
  // console.log(item)
  // FormValidate.validate(
  //   item,
  //   ruleFields
  // )((state, obj) => {
  //   console.log(state)
  //   console.log(obj)
  // })
  item.isEdit = false
  const changeData = cloneDeep(tableData.value).map((item: any) => {
    return item
  })
  $emit('onSave', changeData)
}

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

// 删除
const deleteRow = (index: number) => {
  tableData.value.splice(index, 1)
  const changeData = cloneDeep(tableData.value).map((item: any) => {
    delete item.isEdit
    return item
  })
  $emit('onSave', changeData)
}
</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;
}
.my-portrait-card {
  display: flex;
  padding: 20px 40px;
  background: linear-gradient(90deg, #f2f7ff 0%, rgb(245 249 255 / 0%) 100%);
  border: 1px solid #e4e9f1;
  border-radius: 4px;
  flex-wrap: wrap;
  .btn_group {
    text-align: right;
  }
  .card-item {
    padding: 30px 0px;
    border-bottom: 1px solid #e4e9f1;
    &:first-child {
      padding-top: 0px;
    }
    &:last-child {
      border-bottom: 0px;
      padding-bottom: 0px;
    }
  }
}
</style>