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

  <mod-depart :selectObj="selectObj" @modDepartData="modDepartData"></mod-depart>
  import modDepart from '@/components/company/mod-depart.vue';
  -->

<template>
  <el-dialog width="600px" title="调整所在部门" :visible.sync="memberVisible" 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="departmentList">
        <select-department :selectData="partForm.departmentList" @checkGroupIds="checkGroupIds"> </select-department>
      </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 selectDepartment from '@/components/company/select-department.vue';
import { postRequest } from '@/api/api';
import errMsg from '@/common/js/error';
export default {
  name: 'mod-depart',
  components: {
    selectDepartment
  },
  props: {
    selectObj: {
      type: [Object, Array],
      default() {
        return [];
      }
    }
  },
  data() {
    return {
      memberVisible: true,
      staffArr: [],
      partForm: {
        departmentList: []
      },
      rules: {
        departmentList: [
          {
            type: 'array',
            required: true,
            message: '请选择部门',
            trigger: 'change'
          }
        ]
      }
    };
  },
  methods: {
    /**
     * 改变对外职务
     */
    checkGroupIds: function(nodes) {
      const that = this;
      that.partForm.departmentList = nodes;
    },

    /**
     * 关闭弹窗
     */
    handleClose(done) {
      const that = this;
      that.$refs['form'].resetFields();
      done();
      that.$emit('modDepartData', 'close');
    },
    cancel() {
      const that = this;
      that.$refs['form'].resetFields();
      that.$emit('modDepartData', 'close');
    },
    /**
     * 确定保存
     */
    submitForm(form) {
      const that = this;
      that.$refs[form].validate(valid => {
        if (valid) {
          that.postMod();
        } else {
          return false;
        }
      });
    },
    postMod() {
      const that = this;
      that.staffArr.forEach(ele => {
        ele.currDepartmentIds = that.partForm.departmentList.map(ele => ele.departmentId).join(',');
      });
      let paramsArr = [];
      that.staffArr.forEach(ele => {
        paramsArr.push({
          staffDepartmentRelatedId: ele.staffDepartmentRelatedId,
          currDepartmentIds: ele.currDepartmentIds
        });
      });
      let params = {
        params: JSON.stringify(paramsArr)
      };
      postRequest('/haoban-manage3-web/staff-batch-edit-department', params)
        .then(res => {
          let resData = res.data;
          if (resData.errorCode == 1) {
            that.$emit('modDepartData');
            return false;
          }
          errMsg.errorMsg(resData);
        })
        .catch(function(error) {
          that.$message.error({
            duration: 1000,
            message: error.message
          });
        });
    }
  },
  watch: {
    selectObj(newData, oldData) {
      const that = this;
      if (newData.length) {
        that.staffArr = newData;
      }
    }
  },
  mounted() {
    const that = this;
    if (that.selectObj.length) {
      that.staffArr = that.selectObj;
    }
  }
};
</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%;
}

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