<template>
  <div class="p20">
    <h3 class="font-size-16">离职</h3>
    <el-form ref="form" :model="lzForm" class="lz-form" label-width="0px">
      <table class="form-table mt15" cellpadding="0" cellspacing="0">
        <tr>
          <td>
            <h3 class="font-size-14">离职员工</h3>
          </td>
          <td>
            <el-form-item prop="wlc_lzry">
              <el-input v-model="lzForm.wlc_lzry"></el-input>
            </el-form-item>
          </td>
          <td>
            <h3 class="font-size-14">所属部门</h3>
          </td>
          <td>
            <el-form-item prop="wlc_ssbm">
              <el-input v-model="lzForm.wlc_ssbm"></el-input>
            </el-form-item>
          </td>
        </tr>
        <tr>
          <td>
            <h3 class="font-size-14">入职日期</h3>
          </td>
          <td>
            <el-form-item prop="wlc_rzrq">
              <el-date-picker
                v-model="lzForm.wlc_rzrq"
                type="date"
                placeholder="选择日期"
                value-format="yyyy-MM-dd"
              >
              </el-date-picker>
            </el-form-item>
          </td>
          <td>
            <h3 class="font-size-14">申请离职日期</h3>
          </td>
          <td>
            <el-form-item prop="wlc_sqlzrq">
              <el-date-picker
                v-model="lzForm.wlc_sqlzrq"
                type="date"
                placeholder="选择日期"
                value-format="yyyy-MM-dd"
              >
              </el-date-picker>
            </el-form-item>
          </td>
        </tr>
        <tr>
          <td>
            <h3 class="font-size-14">批准离职日期</h3>
          </td>
          <td colspan="3">
            <el-form-item prop="wlc_pzlzrq">
              <el-date-picker
                v-model="lzForm.wlc_pzlzrq"
                type="date"
                placeholder="选择日期"
                value-format="yyyy-MM-dd"
              >
              </el-date-picker>
            </el-form-item>
          </td>
        </tr>
        <tr>
          <td>
            <h3 class="font-size-14">离职原因</h3>
          </td>
          <td colspan="3">
            <el-form-item prop="wlc_lzyy">
              <el-input v-model="lzForm.wlc_lzyy"></el-input>
            </el-form-item>
          </td>
        </tr>
        <tr>
          <td>
            <h3 class="font-size-14">部门领导意见</h3>
          </td>
          <td colspan="3">
            <el-form-item prop="wlc_bmldyj">
              <el-input v-model="lzForm.wlc_bmldyj"></el-input>
            </el-form-item>
          </td>
        </tr>
        <tr>
          <td>
            <h3 class="font-size-14">人力资源部门意见</h3>
          </td>
          <td colspan="3">
            <el-form-item prop="wlc_rlzybyj">
              <el-input v-model="lzForm.wlc_rlzybyj"></el-input>
            </el-form-item>
          </td>
        </tr>
        <tr>
          <td>
            <h3 class="font-size-14">备注</h3>
          </td>
          <td colspan="3">
            <el-form-item prop="wlc_bz">
              <el-input v-model="lzForm.wlc_bz"></el-input>
            </el-form-item>
          </td>
        </tr>
      </table>
      <div class="footer">
        <el-form-item>
          <el-button @click="formCancel">取 消</el-button>
          <el-button type="primary" @click="formSubmit">确 定</el-button>
        </el-form-item>
      </div>
    </el-form>
  </div>
</template>

<script>
import { lzlc_add } from "./api";

export default {
  name: "index",
  data() {
    return {
      lzForm: {
        wlc_lzry: "",
        wlc_ssbm: "",
        wlc_rzrq: "",
        wlc_sqlzrq: "",
        wlc_pzlzrq: "",
        wlc_lzyy: "",
        wlc_bmldyj: "",
        wlc_rlzybyj: "",
        wlc_bz: "",
      },
    };
  },
  methods: {
    formCancel() {
      this.$router.push({ name: "jsld_lzlc" });
    },
    formSubmit() {
      let data = {
        wlc_lzry: this.lzForm.wlc_lzry,
        wlc_ssbm: this.lzForm.wlc_ssbm,
        wlc_rzrq: this.lzForm.wlc_rzrq,
        wlc_sqlzrq: this.lzForm.wlc_sqlzrq,
        wlc_lzyy: this.lzForm.wlc_lzyy,
      };

      lzlc_add(data).then((res) => {
        if (res.code == 1) {
          this.$message({
            message: "申请添加成功！",
            type: "success",
          });
          this.$router.push({ name: "jsld_lzlc" });
        } else {
          this.$message({
            message: res.msg,
            type: "error",
          });
        }
      });
    },
  },
  mounted() {},
};
</script>

<style lang="scss" scoped>
.form-table {
  width: 100%;
  border: 1px solid #dbdbdb;
  border-collapse: collapse;

  td {
    padding: 8px 0;
    border: 1px solid #dbdbdb;
    &:nth-child(odd) {
      background: #f6f6f6;
      width: 20%;
      padding-left: 10px;
    }
    &:nth-child(even) {
      background: #fff;
      width: 30%;
    }
  }
  tr:nth-child(n + 3) td {
    &:nth-child(odd) {
      background: #f6f6f6;
      width: 20%;
      padding-left: 10px;
    }
    &:nth-child(even) {
      background: #fff;
      width: 80%;
    }
  }
}
.footer {
  width: 300px;
  height: 100px;
  margin: 0 auto;
  margin-top: 30px;
}
</style>
<style lang="scss">
.lz-form {
  .el-form-item {
    margin: 0;
    .el-input__inner {
      height: 25px !important;
      line-height: 25px !important;
      border: 0 !important;
      border-radius: 0 !important;
      padding: 0 15px;
    }
    .el-input__prefix {
      display: none;
      left: 0;
    }
  }
}
</style>