<!--
 * @Descripttion : 当前组件信息
 * @Author       : 无尘
 * @Date         : 2020-02-13 16:13:59
 * @LastEditors  : 无尘
 * @LastEditTime : 2020-02-25 16:22:59
 * @FilePath     : \Hapi-demoj:\公司\haoban-3\src\components\company\add-depart.vue
 -->
<!--

  <add-depart :departObj="departObj" @refreshData="refreshData"></add-depart>
  import addDepart from '@/components/company/add-depart.vue';
  -->

<template>
  <el-dialog width="600px" :title="Object.keys(departObj).length ? '修改名称' : '新增子部门'" :visible.sync="departVisible" append-to-body :before-close="handleClose">
    <el-form :model="partForm" :rules="rules" ref="form" label-width="100px" class="dialog-form">
      <el-form-item label="部门名称" prop="departmentName">
        <limitInput :inputWidth="440" :inputValue.sync="partForm.departmentName" :getByType="'char'" :holder="'请输入姓名'" :maxLength="32"> </limitInput>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="cancel">取消</el-button>
      <el-button type="primary" @click="submitForm('form')">确定</el-button>
    </div>
  </el-dialog>
</template>
<script>
import limitInput from '@/components/limit-input.vue';
// import { getRequest, postRequest } from '@/api/api';
// import errMsg from '@/common/js/error';
// import showMsg from '@/common/js/showmsg';
export default {
  name: 'add-depart',
  components: {
    limitInput
  },
  props: {
    departObj: {
      type: [Object, Array],
      default() {
        return {};
      }
    }
  },
  data() {
    return {
      partForm: {
        departmentName: ''
      },
      rules: {
        departmentName: [
          {
            required: true,
            message: '请输入部门名称',
            trigger: 'blur'
          }
        ]
      },
      departVisible: true
    };
  },
  methods: {
    /**
     * 关闭弹窗
     */
    handleClose(done) {
      const that = this;
      that.$refs['form'].resetFields();
      that.$emit('refreshData', 'close');
      done();
    },
    cancel() {
      const that = this;
      that.$refs['form'].resetFields();
      that.$emit('refreshData', 'close');
    },
    /**
     * 确定保存
     */
    async submitForm(form) {
      const that = this;
      that.$refs[form].validate(valid => {
        if (valid) {
          that.$emit('refreshData', that.partForm.departmentName, !!that.departObj['departmentId'] ? 'modify' : '');
        } else {
          return false;
        }
      });
    }
  },
  watch: {
    departObj(newData) {
      const that = this;
      if (Object.keys(newData).length) {
        that.partForm = newData;
      }
    }
  },
  mounted() {
    const that = this;
    if (Object.keys(that.departObj).length) {
      that.partForm = that.departObj;
    }
  }
};
</script>
<style lang="less" scoped>
.span-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 5px;
  background: rgba(217, 217, 217, 1);
  border-radius: 50%;
}

.w-95 {
  width: 95px;
}

.m-l-30 {
  margin-left: 30px;
}
</style>
