<template>
  <div>
    <div class="app-container">
      <el-page-header :content="$parent.OUTSOURCED_ID ? '编辑' : '新增'" @back="back"/>
      <div class="level-title mt-20">
        <h1>工程信息：</h1>
      </div>
      <el-form ref="form" :model="form" :rules="rules" label-width="180px">
        <div>
          <el-row>
            <!--            <el-col :span="8">-->
            <!--              <el-form-item label="企业监督部门：" class="is-required" prop="DEPARTMENT_ID">-->
            <!--                <Treeselect-->
            <!--                  :multiple="true"-->
            <!--                  :flat="true"-->
            <!--                  :default-expand-level="1"-->
            <!--                  :options="treeDataDept"-->
            <!--                  :normalizer="normalizer2"-->
            <!--                  v-model="form.DEPARTMENT_ID"-->
            <!--                  placeholder="请选择部门"-->
            <!--                  no-options-text="暂无数据"-->
            <!--                  no-children-text="暂无数据"-->
            <!--                  style="width: 100%;"-->
            <!--                />-->
            <!--              </el-form-item>-->
            <!--            </el-col>-->
            <el-col :span="8">
              <el-form-item label="企业监督部门" class="is-required" prop="DEPARTMENT_ID">
                <Treeselect
                  :multiple="true"
                  :flat="true"
                  :default-expand-level="1"
                  :options="treeDataDept"
                  :normalizer="normalizer2"
                  v-model="form.DEPARTMENT_ID"
                  placeholder="请选择部门"
                  no-options-text="暂无数据"
                  no-children-text="暂无数据"
                  style="width: 100%;"
                />
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item prop="COMPETENT_DEPT_ID" label="企业主管部门:">
                <SelectTree
                  ref="deptTree"
                  :clearable="false"
                  :options="treeDataInspectDept"
                  :props="defaultProps"
                  v-model="form.COMPETENT_DEPT_ID"
                  placeholder="请选择企业主管部门"
                  style="width: 100%"/>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="企业辖区部门" class="is-required" prop="INVOLVING_CORPS_DEPART_ID">
                <Treeselect
                  :multiple="true"
                  :flat="true"
                  :default-expand-level="1"
                  :options="treeDataInspectDept"
                  :normalizer="normalizer"
                  v-model="form.INVOLVING_CORPS_DEPART_ID"
                  placeholder="请选择部门"
                  no-options-text="暂无数据"
                  no-children-text="暂无数据"
                  style="width: 100%;"
                />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="8">
              <el-form-item label="重点工程名称:" prop="OUTSOURCED_NAME">
                <el-input v-model="form.OUTSOURCED_NAME" placeholder="这里输入重点工程名称..." />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="计划工期起止时间：" prop="STARTTIME">
                <el-date-picker
                  v-model="form.STARTTIME_TIMES"
                  style="width: 100%;"
                  type="daterange"
                  unlink-panels
                  value-format="yyyy-MM-dd"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"/>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="合同号：" prop="CONTRACT_NUM">
                <el-input v-model="form.CONTRACT_NUM" placeholder="这里输入合同号" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="施工相关方:" prop="UNITS_ID">
                <el-select v-model="form.UNITS_ID" filterable placeholder="请选择施工相关方" style="width: 100%;" @change="getUnitUser">
                  <el-option v-for="item in unitsList" :key="item.UNITS_ID" :label="item.UNITS_NAME" :value="item.UNITS_ID" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="相关方单位工程负责人:" prop="UNITS_PIC">
                <el-select v-model="form.UNITS_PIC" placeholder="请选择相关方单位工程负责人" style="width: 100%;" @change="selectUnitsUser($event)">
                  <el-option v-for="item in unitsUserList" :key="item.PERSONNELMANAGEMENT_ID" :label="item.NAME" :value="item.PERSONNELMANAGEMENT_ID" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="相关方单位负责人手机：" prop="UNITS_PHONE">
                <el-input v-model="form.UNITS_PHONE" disabled placeholder="这里输入相关方单位本工程负责人手机" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="监理单位名称：" prop="MANAGE_NAME">
                <el-select v-model="form.MANAGE_NAME" multiple placeholder="请选择监理单位" style="width: 100%;" >
                  <el-option v-for="item in mangeList" :key="item.CORPINFO_ID" :label="item.CORP_NAME" :value="item.CORPINFO_ID" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="监理单位工程负责人：">
                <el-input v-model="form.MANAGE_PIC" placeholder="这里输入监理单位工程负责人姓名" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="监理单位负责人手机：" prop="MANAGE_PHONE">
                <el-input v-model="form.MANAGE_PHONE" placeholder="这里输入监理单位工程负责人手机" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="集团单位：" prop="GROUP_UNIT">
                <!--                <el-date-picker v-model="form.STARTTIME" style="width: 100%;" value-format="yyyy-MM-dd" format="yyyy-MM-dd" type="date" placeholder="选择开始日期" clearable class="filter-item"/>-->
                <el-select v-model="form.GROUP_UNIT" multiple placeholder="请选择集团单位" style="width: 100%;">
                  <el-option v-for="item in groupCorpList" :key="item.CORPINFO_ID" :label="item.CORP_NAME" :value="item.CORPINFO_ID" />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="状态：" prop="STATE">
                <el-select v-model="form.STATE" disabled style="width: 100%;">
                  <el-option v-for="item in stateList" :key="item.ID" :label="item.NAME" :value="item.ID" />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="是否发送短信：">
                <el-select v-model="form.IS_SMS" style="width: 100%;">
                  <el-option v-for="item in smsList" :key="item.ID" :label="item.NAME" :value="item.ID" />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="安全管理协议（附件）" prop="AQGLXY" class="is-required">
                <div class="uo-flex">
                  <el-upload
                    ref="uploadfile9"
                    :file-list="file9"
                    :on-change="beforeFileUpload9"
                    :on-exceed="handleUpload9Exceed"
                    :before-remove="beforeBeforeRemove9"
                    :on-remove="beforeRemove9"
                    :auto-upload="false"
                    :limit="9"
                    accept=".pdf,.jpg,.jpeg,.png"
                    class="avatar-uploader"
                    action="#">
                    <el-button type="primary" icon="el-icon-upload" style="margin-left:10px; " plain>上传附件</el-button>
                    <div slot="tip" class="el-upload__tip">只能上传pdf,jpg,jpeg,png类型文件，且最多上传9个附件</div>
                  </el-upload>
                </div>
              </el-form-item>
            </el-col>
          </el-row>
        </div>
        <div class="level-line" />
        <div class="level-title">
          <h1>处罚相关：</h1>
        </div>
        <el-divider content-position="left">处罚人员 <el-button type="primary" size="mini" @click="addInspector">添加</el-button></el-divider>
        <el-form-item v-for="(item,index) in inspectorList" :key="index + (Math.random() + '').replace('.', '')" :label="(index+1)+'.'">
          <div class="uo-flex">
            <el-row :gutter="24">
              <el-col :span="12">
                <el-form-item label="主管部门" prop="INSPECTION_DEPARTMENT_ID" label-width="100px" class="is-required">
                  <SelectTree
                    :ref="'deptTree_INSPECTION'+index"
                    :clearable="false"
                    :options="treeDeptOptions"
                    :props="defaultProps"
                    v-model="item.INSPECTION_DEPARTMENT_ID"
                    placeholder="请选择处罚人员部门"
                    style="width: 300px"
                    @change="updateInspecteDept(item.INSPECTION_DEPARTMENT_ID,index)"/>
                </el-form-item>
              </el-col>
              <el-col :span="11">
                <el-form-item label="处罚人员" prop="INSPECTION_USER_ID" label-width="100px" class="is-required">
                  <el-select
                    v-model="item.INSPECTION_USER_ID"
                    clearable
                    placeholder="请选择处罚人员"
                  >
                    <el-option
                      v-for="data in INSPECTOR_List[index]"
                      :key="data.USER_ID"
                      :label="data.NAME"
                      :value="data.USER_ID"
                      @click.native="changeHiddenUserList(item, data, index)" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="1">
                <el-button plain size="mini" type="danger" icon="el-icon-delete" title="移除" @click="delInspectorRow(item,index)">移除</el-button>
              </el-col>
            </el-row>
          </div>
        </el-form-item>
        <div style="height: 200px"/>
      </el-form>
      <div class="ui-foot">
        <el-button icon="el-icon-check" type="primary" @click="confirm">保 存</el-button>
        <el-button icon="el-icon-arrow-left" @click="back">返 回</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import Pagination from '@/components/Pagination' // 通过 el-pagination二次打包
import { upload } from '@/utils/upload'
import { requestFN } from '@/utils/request'
import waves from '@/directive/waves' // waves directive
import SelectTree from '@/components/SelectTree'
import { debounce } from 'throttle-debounce'

// eslint-disable-next-line no-unused-vars
import formatDate from '@/utils/dateformat'
import Treeselect from '@riophae/vue-treeselect'
export default {
  components: { Treeselect, Pagination, SelectTree },
  directives: { waves },
  data() {
    return {
      selectUsers: [], // 防止报错，参数无用
      chooseUserList: [],
      punishThePerson: [],
      punishThePersonOptions: [],
      treeDeptOptions: [],
      inspectorList: [{ INSPECTION_DEPARTMENT_ID: '', INSPECTION_USER_ID: '', USER_SIDE: '' }], // 检查人员
      INSPECTOR_List: [],
      listLoading: true,
      add: false,
      del: false,
      edit: false,
      listQuery: {
        page: 1,
        limit: 20
      },
      total: 0,
      KEYWORDS: '',
      CONTRACTTIME: [], // 区间条件
      CONTRACT_STIME: '',
      CONTRACT_ETIME: '',
      TRAINING_TIME: [], // 区间条件
      TRAINING_STIME: '',
      TRAINING_ETIME: '',
      treeDataInspectDept: [],
      treeDataDept: [],
      defaultProps: {
        value: 'id',
        children: 'nodes',
        label: 'name'
      },
      groupCorpList: [],
      userList: [],
      corpList: [],
      mangeList: [],
      unitsList: [],
      STATE: '',
      varList: [],
      pd: [],
      corpinfoPd: {}, // 登录人的企业id
      file9: [],
      form: {
        DEPARTMENT_ID: [],
        COMPETENT_DEPT_ID: '', // 企业主管部门
        CONTRACT_PIC: '', // 发包部门负责人
        OUTSOURCED_NAME: '', // 重点工程名称
        STARTTIME: '', // 计划工期开始时间
        ENDTIME: '', // 计划工期结束时间
        CONTRACTTIME: [], // 区间条件
        TRAINING_TIME: [], // 区间条件
        CONTRACT_STIME: '', // 合同起止时间
        CONTRACT_ETIME: '', // 合同起止时间
        UNITS_ID: '', // 相关方单位名称
        CONTRACT_NUM: '', // 合同号
        UNITS_APTITUDE: '', // 相关方单位资质
        UNITS_APTITUDEPATH: '',
        UNITS_PIC: '', // 相关方单位本项目负责人
        UNITS_PHONE: '', // 相关方单位本项目负责人手机
        MANAGE_NAME: '', // 监理单位名称
        MANAGE_APTITUDE: '', // 监理单位资质
        MANAGE_APTITUDEPATH: '',
        MANAGE_PIC: '', // 监理单位本项目负责人姓名
        DESIGE: '', // 相关方组织设计
        DESIGEPATH: '', // 相关方组织设计
        MANAGE_PHONE: '', // 监理单位本项目负责人手机
        MEASURES: '', // 安全技术措施
        MEASURESPATH: '', // 安全技术措施
        ATTACHMENTS: '', // 附件
        ATTACHMENTSPATH: '', // 附件
        REMARKS: '', // 备注
        TRAINING_NAME: '', // 培训管理单位
        TRAINING_PIC: '', // 培训管理负责人
        TRAINING_STIME: '', // 培训时间
        TRAINING_ETIME: '', // 培训时间
        RECORDS: '', // 安全培训记录
        RECORDSPATH: '', // 安全培训记录
        SHEET: '', // 培训签名表
        AQGLXY: '', // 安全管理协议
        SHEETPATH: '', // 培训签名表
        EXAMINATION: '', // 重点工程考试题
        EXAMINATIONPATH: '', // 重点工程考试题
        OATTACHMENTS: '', // 其他附件
        OATTACHMENTSPATH: '', // 其他附件
        file: '', // 相关附件
        APPLICANT: '', // 申请人
        PUNISH_THE_PERSON: '', // 处罚人
        STATE: '', // 状态
        INVOLVING_CORPS: '', //
        STARTTIME_TIMES: [], // 时间
        GROUP_UNIT: [], // 集团单位
        INVOLVING_CORPS_DEPART_ID: [], // 企业辖区单位
        IS_SMS: '1' // 是否发送短信
      },
      INVOLVING_CORP: [],
      multipleSelectionAll: [], // 所有选中的数据包含跨页数据
      multipleSelection: [], // 当前页选中的数据
      dialogFormEdit: false,
      dialogType: 'add',
      rules: {
        DEPARTMENT_ID: [{ required: true, message: '企业监管部门不能为空', trigger: 'blur' }],
        CONTRACT_PIC: [{ required: false, message: '企业监管部门负责人不能为空', trigger: 'blur' }],
        COMPETENT_DEPT_ID: [{ required: true, message: '企业主管部门不能为空', trigger: 'blur' }],
        OUTSOURCED_NAME: [{ required: true, message: '重点工程名称不能为空', trigger: 'blur' }],
        // STARTTIME: [{ required: true, message: '请选择计划工期开始时间', trigger: 'blur' }],
        // ENDTIME: [{ required: true, message: '请选择计划工期结束时间', trigger: 'blur' }],
        // CONTRACTTIME: [{ required: true, message: '请选择合同起止时间', trigger: 'blur' }],
        UNITS_ID: [{ required: true, message: '施工相关方名称 不能为空', trigger: 'blur' }],
        INVOLVING_CORPS_DEPART_ID: [{ required: true, message: '企业辖区部门 不能为空', trigger: 'blur' }],
        INVOLVING_CORP: [{ required: true, message: '辖区单位 不能为空', trigger: 'blur' }],
        // CONTRACT_NUM: [{ required: true, message: '合同号 不能为空', trigger: 'blur' }],
        // UNITS_APTITUDE: [{ required: true, message: '相关方单位资质不能为空', trigger: 'blur' }],
        UNITS_PIC: [{ required: true, message: '相关方单位工程负责人不能为空', trigger: 'blur' }],
        UNITS_PHONE: [
          { required: true, message: '相关方单位工程负责人手机不能为空', trigger: 'change' },
          { min: 11, max: 11, message: '请输入11位手机号码', trigger: 'blur' },
          {
            pattern: /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/,
            message: '请输入正确的手机号码'
          }
        ],
        // MANAGE_NAME: [{ required: true, message: '监理单位名称 不能为空', trigger: 'blur' }],
        // MANAGE_APTITUDE: [{ required: true, message: '监理单位资质不能为空', trigger: 'blur' }],
        MANAGE_PIC: [{ required: true, message: '监理单位本项目负责人姓名不能为空', trigger: 'blur' }],
        MANAGE_PHONE: [
          // { required: true, message: '监理单位本项目负责人手机不能为空', trigger: 'change' },
          { min: 11, max: 11, message: '请输入11位手机号码', trigger: 'blur' },
          {
            pattern: /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/,
            message: '请输入正确的手机号码'
          }
        ],
        // DESIGE: [{ required: true, message: '相关方组织设计不能为空', trigger: 'blur' }],
        // MEASURES: [{ required: true, message: '安全技术措施不能为空', trigger: 'blur' }],
        // ATTACHMENTS: [{ required: true, message: '附件不能为空', trigger: 'blur' }],
        // REMARKS: [{ required: true, message: '备注 不能为空', trigger: 'blur' }],
        // TRAINING_NAME: [{ required: true, message: '培训管理单位不能为空', trigger: 'blur' }],
        // TRAINING_PIC: [{ required: true, message: '培训管理负责人不能为空', trigger: 'blur' }],
        // TRAINING_TIME: [{ required: true, message: '请选择培训时间', trigger: 'blur' }],
        // RECORDS: [{ required: true, message: '安全培训记录 不能为空', trigger: 'blur' }],
        // SHEET: [{ required: true, message: '培训签名表不能为空', trigger: 'blur' }],
        // EXAMINATION: [{ required: true, message: '外包工程考试题不能为空', trigger: 'blur' }],
        // OATTACHMENTS: [{ required: true, message: '其他附件不能为空', trigger: 'blur' }],
        // APPLICANT: [{ required: true, message: '申请人不能为空', trigger: 'blur' }],
        // AQGLXY: [{ required: true, message: '安全管理协议', trigger: 'blur' }],
        STATE: [{ required: true, message: '状态不能为空', trigger: 'blur' }]
      },
      stateList: [
        // { ID: '0', NAME: '未申请' },
        // { ID: '1', NAME: '申请中' },
        // { ID: '2', NAME: '已完成' }
        { ID: '0', NAME: '未开工' },
        { ID: '1', NAME: '进行中' },
        { ID: '2', NAME: '已结束' },
        { ID: '-1', NAME: '开工申请中' },
        { ID: '-2', NAME: '结束申请中' }
      ],
      smsList: [
        { ID: '0', NAME: '是' },
        { ID: '1', NAME: '否' }
      ],
      unitsUserList: [],
      normalizer(node) {
        return {
          id: node.id,
          label: node.name,
          children: node.nodes,
          isDisabled: node.pId === '0'
        }
      },
      normalizer2(node) {
        return {
          id: node.id,
          label: node.name,
          children: node.nodes
        }
      }
    }
  },
  watch: {
    CONTRACTTIME: function(newData, oldData) {
      if (!newData) {
        this.CONTRACTTIME = ['', '']
        this.getQuery()
      }
    },
    'form.DEPARTMENT_ID': {
      handler(newVal, oldVal) {
        if (this.dialogType == 'add' || (oldVal != null && oldVal != '')) { // 编辑初始化时，不监听
          this.form.CONTRACT_PIC = ''
          this.userList = []
        }
        if (newVal != null && newVal != '') {
          this.updateJianguanDept(newVal)
        }
      },
      immediate: false

    },
    // 'form.ENDTIME': {
    //  handler: function() {
    //    // eslint-disable-next-line no-unused-vars
    //    var time = formatDate(new Date(), 'YYYY-MM-DD')
    //    if (this.form.ENDTIME > time) {
    //      this.form.STATE = '1'
    //    } else {
    //      this.form.STATE = '2'
    //    }
    //  }
    // },

    TRAINING_TIME: function(newData, oldData) {
      if (!newData) {
        this.TRAINING_TIME = ['', '']
        this.getQuery()
      }
    }
  },
  async created() {
    this.getUnitsList()
    this.getCorpList()
    this.getmangeList()
    await this.getDict()
    await this.selectDeptOption()
    if (this.$parent.OUTSOURCED_ID) {
      this.dialogType = 'edit'
      this.form.OUTSOURCED_ID = this.$parent.OUTSOURCED_ID
      this.getData()
    } else {
      this.form.STATE = '0'
    }
    this.getCorpInfo()
    // this.getTreeList()
  },
  methods: {
    handleTreeSelected(checkedIds, checkedData) {
      this.DEPTIDS = checkedIds.join(',')
    },
    getRowKey(row) {
      return row.OUTSOURCED_ID
    },
    // 返回列表
    back() {
      this.$parent.activeName = 'List'
      this.$parent.OUTSOURCED_ID = ''
    },
    getUnitsList() {
      requestFN(
        '/units/listAll',
        { }
      ).then((data) => {
        this.unitsList = data.varList
      }).catch((e) => {
      })
    },
    getmangeList() {
      requestFN(
        '/corpinfo/listSelect',
        {}
      ).then((data) => {

        // this.corpList = data.varList
      }).catch((e) => {
      })
    },
    // 修改
    handleEdit(ID) {
      this.getDict()
      this.dialogType = 'edit'
      requestFN(
        '/outsourced/goEdit',
        {
          OUTSOURCED_ID: ID
        }
      ).then((data) => {
        this.form = Object.assign({}, data.pd) // copy obj
        this.form.DEPARTMENT_ID = data.pd.DEPARTMENT_ID
        this.form.COMPETENT_DEPT_ID = data.pd.COMPETENT_DEPT_ID
      }).catch((e) => {
        this.listLoading = false
      })
      this.dialogFormEdit = true
    },

    // 编辑初始化
    getData() {
      requestFN(
        '/outsourced/goEdit',
        {
          OUTSOURCED_ID: this.form.OUTSOURCED_ID
        }
      ).then(async(data) => {
        var pd = data.pd
        this.getUnitUserNew(pd.UNITS_ID)
        if (pd.INVOLVING_CORPS) {
          this.INVOLVING_CORP = pd.INVOLVING_CORPS.split(',')
        }
        if (pd.DEPARTMENT_ID) {
          pd.DEPARTMENT_ID = pd.DEPARTMENT_ID.split(',')
        }
        if (pd.MANAGE_NAME) {
          pd.MANAGE_NAME = pd.MANAGE_NAME.split(',')
        }
        if (pd.GROUP_UNIT) {
          pd.GROUP_UNIT = pd.GROUP_UNIT.split(',')
        }
        if (pd.INVOLVING_CORPS_DEPART_ID) {
          pd.INVOLVING_CORPS_DEPART_ID = pd.INVOLVING_CORPS_DEPART_ID.split(',')
        }

        pd.STARTTIME_TIMES = []
        if (pd.STARTTIME && pd.ENDTIME) {
          pd.STARTTIME_TIMES.push(pd.STARTTIME)
          pd.STARTTIME_TIMES.push(pd.ENDTIME)
        }
        this.form = Object.assign({}, pd) // copy obj
        this.$set(this.form, 'CONTRACTTIME', Object.assign([], [this.form.CONTRACT_STIME, this.form.CONTRACT_ETIME]))
        this.$set(this.form, 'TRAINING_TIME', Object.assign([], [this.form.TRAINING_STIME, this.form.TRAINING_ETIME]))
        for (let i = 0; i < data.file9.length; i++) {
          data.file9[i].name = data.file9[i].FILE_NAME
        }
        this.file9 = data.file9
        //
        const node = {}
        // const node2 = {}
        node.id = this.form.COMPETENT_DEPT_ID
        this.$refs.deptTree.clearHandle() // 回显企业主管部门
        this.$nextTick(() => { // 此处使用这个可以等节点渲染后再获取节点
          this.$refs.deptTree.handleNodeClick(node)
        })
        const nodeINVOLVING_CORPS_DEPART_ID = {}
        nodeINVOLVING_CORPS_DEPART_ID.id = this.form.INVOLVING_CORPS_DEPART_ID
        // this.$refs.deptTree_INVOLVING_CORPS_DEPART_ID.clearHandle()
        // this.$nextTick(() => { // 此处使用这个可以等节点渲染后再获取节点
        //   this.$refs.deptTree_INVOLVING_CORPS_DEPART_ID.handleNodeClick(nodeINVOLVING_CORPS_DEPART_ID)
        // })
        const punishThePerson = data.punishThePerson
        // await this.selectDeptOptionNew()
        if (punishThePerson) {
          this.inspectorList = []
          punishThePerson.forEach((item, index) => {
            this.selectUserOptionByDept(item.DEPARTMENT_ID, index)
            var name = {
              INSPECTION_DEPARTMENT_ID: item.DEPARTMENT_ID,
              INSPECTION_USER_ID: item.USER_ID,
              USER_SIDE: ''
            }
            this.inspectorList.push(name)
          })
        }
        // todo
        // this.form.CONTRACT_PIC = pd.CONTRACT_PIC

        // this.chooseUserList = JSON.parse(data.pd.PUNISH_THE_PERSON)
      }).catch((e) => {

      })
    },
    // 保存
    confirm: debounce(1000, function() {
      console.log('callback')
      this.save()
    }, { atBegin: true }),
    save() {
      for (let i = 0; i < this.inspectorList.length; i++) {
        if (this.inspectorList[i].INSPECTION_USER_ID == '') {
          this.$message.warning('第' + (i + 1) + '行必须添加处罚人')
          return
        }
      }
      // if (!this.INVOLVING_CORP.length > 0) {
      //  this.$message.warning('辖区单位不为空')
      //  return
      // }
      if (this.form.CONTRACTTIME && this.form.CONTRACTTIME.length > 0) {
        this.form.CONTRACT_STIME = this.form.CONTRACTTIME[0]
        this.form.CONTRACT_ETIME = this.form.CONTRACTTIME[1]
      }
      if (this.form.TRAINING_TIME && this.form.TRAINING_TIME.length > 0) {
        this.form.TRAINING_STIME = this.form.TRAINING_TIME[0]
        this.form.TRAINING_ETIME = this.form.TRAINING_TIME[1]
      }
      this.form.INVOLVING_CORPS = this.INVOLVING_CORP.join(',')
      if (this.form.GROUP_UNIT) {
        this.form.GROUP_UNIT = this.form.GROUP_UNIT.toString().split(',')
      }
      this.$refs.form.validate(valid => {
        if (valid) {
          this.listLoading = true
          const formData = new FormData()
          Object.keys(this.form).map(key => {
            formData.append(key, this.form[key])
          })
          // let PUNISH_THE_PERSONStr = ''
          //
          // for (const i in this.chooseUserList) {
          //
          //   PUNISH_THE_PERSONStr = PUNISH_THE_PERSONStr + ',' + this.chooseUserList[i].USER_ID
          // }
          var PUNISH_THE_PERSON = ''
          this.inspectorList.forEach(item => {
            PUNISH_THE_PERSON = item.INSPECTION_USER_ID + ',' + PUNISH_THE_PERSON
          })
          if (PUNISH_THE_PERSON.length > 0) {
            PUNISH_THE_PERSON = PUNISH_THE_PERSON.substr(0, PUNISH_THE_PERSON.length - 1)
          }
          // this.$refs.disposalAfterUpload.
          // this.$refs.upload1.uploadFiles.length
          if (this.file9.length == 0) {
            this.$message({
              message: '请上传安全管理协议（附件）',
              type: 'error'
            })
            return false
          }
          if (this.form.STARTTIME_TIMES && this.form.STARTTIME_TIMES.length > 0) {
            formData.append('STARTTIME', this.form.STARTTIME_TIMES[0])
            formData.append('ENDTIME', this.form.STARTTIME_TIMES[1])
          }
          formData.set('PUNISH_THE_PERSON', PUNISH_THE_PERSON)
          // this.$refs.uploadfile9.submit()
          for (let i = 0; i < this.file9.length; i++) {
            if (!this.file9[i].FILEPATH) {
              formData.append('file9', this.file9[i])
            }
          }
          upload(
            '/outsourced/' + this.dialogType,
            formData
          ).then((data) => {
            this.$parent.activeName = 'List'
            this.$parent.OUTSOURCED_ID = ''
          }).catch((e) => {
            this.form.MANAGE_NAME = this.form.MANAGE_NAME.split(',')
            this.listLoading = false
          })
        } else {
          return false
        }
      })
    },
    beforeFileUpload(file) {
      const suffix = file.name.substring(file.name.lastIndexOf('.'), file.name.length)
      if (suffix === '.pdf') {
        this.form.file = file
        this.form.UNITS_APTITUDE = file.name
        this.$forceUpdate()
        return false
      } else {
        this.$message.warning('请上传pdf文件')
      }
      return false
    },
    beforeFileUpload1(file1) {
      const suffix = file1.name.substring(file1.name.lastIndexOf('.'), file1.name.length)
      if (suffix === '.pdf') {
        this.form.file1 = file1
        this.form.MEASURES = file1.name
        this.$forceUpdate()
        return false
      } else {
        this.$message.warning('请上传pdf文件')
      }
      return false
    },
    beforeFileUpload2(file2) {
      const suffix = file2.name.substring(file2.name.lastIndexOf('.'), file2.name.length)
      if (suffix === '.pdf') {
        this.form.file2 = file2
        this.form.MANAGE_APTITUDE = file2.name
        this.$forceUpdate()
        return false
      } else {
        this.$message.warning('请上传pdf文件')
      }
      return false
    },
    beforeFileUpload3(file3) {
      const suffix = file3.name.substring(file3.name.lastIndexOf('.'), file3.name.length)
      if (suffix === '.pdf') {
        this.form.file3 = file3
        this.form.DESIGE = file3.name
        this.$forceUpdate()
        return false
      } else {
        this.$message.warning('请上传pdf文件')
      }
      return false
    },
    beforeFileUpload4(file4) {
      const suffix = file4.name.substring(file4.name.lastIndexOf('.'), file4.name.length)
      if (suffix === '.pdf') {
        this.form.file4 = file4
        this.form.ATTACHMENTS = file4.name
        this.$forceUpdate()
        return false
      } else {
        this.$message.warning('请上传pdf文件')
      }
      return false
    },
    beforeFileUpload5(file5) {
      const suffix = file5.name.substring(file5.name.lastIndexOf('.'), file5.name.length)
      if (suffix === '.pdf') {
        this.form.file5 = file5
        this.form.RECORDS = file5.name
        this.$forceUpdate()
        return false
      } else {
        this.$message.warning('请上传pdf文件')
      }
      return false
    },
    beforeFileUpload6(file6) {
      const suffix = file6.name.substring(file6.name.lastIndexOf('.'), file6.name.length)
      if (suffix === '.pdf') {
        this.form.file6 = file6
        this.form.SHEET = file6.name
        this.$forceUpdate()
        return false
      } else {
        this.$message.warning('请上传pdf文件')
      }
      return false
    },
    beforeFileUpload7(file7) {
      const suffix = file7.name.substring(file7.name.lastIndexOf('.'), file7.name.length)
      if (suffix === '.pdf') {
        this.form.file7 = file7
        this.form.EXAMINATION = file7.name
        this.$forceUpdate()
        return false
      } else {
        this.$message.warning('请上传pdf文件')
      }
      return false
    },
    beforeFileUpload8(file8) {
      const suffix = file8.name.substring(file8.name.lastIndexOf('.'), file8.name.length)
      if (suffix === '.pdf') {
        this.form.file8 = file8
        this.form.OATTACHMENTS = file8.name
        this.$forceUpdate()
        return false
      } else {
        this.$message.warning('请上传pdf文件')
      }
      return false
    },
    beforeFileUpload9(file9) {
      const suffix = file9.name.substring(file9.name.lastIndexOf('.'), file9.name.length)
      if (suffix === '.pdf' || suffix === '.jpg' || suffix === '.jpeg' || suffix === '.png') {
        this.file9.push(file9.raw)
        return false
      } else {
        this.$message.warning('请上传pdf,pdf,jpg,jpeg,png文件')
      }
      return false
    },
    handleUpload9Exceed(files, fileList) {
      this.$message.warning(`当前限制选择 9 个文件.`)
    },
    beforeBeforeRemove9(file) {
      if (file.IMGFILES_ID) {
        return new Promise((resolve, reject) => {
          this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            requestFN(
              '/imgfiles/delete',
              {
                IMGFILES_ID: file.IMGFILES_ID,
                FOREIGN_KEY: file.FOREIGN_KEY,
                TYPE: 300
              }
            ).then(() => {
              this.$message({
                message: '删除成功',
                type: 'success'
              })
              resolve(true)
            }).catch((e) => {
              reject(false)
            })
          })
        })
      }
      return true
    },
    beforeRemove9(files, fileList) {
      this.file9 = fileList
    },
    handleDelete(id) {
      this.$confirm('确定要删除吗?', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.listLoading = true
        requestFN(
          '/outsourced/delete',
          {
            OUTSOURCED_ID: id
          }
        ).then(() => {
          this.$message({
            message: '删除成功',
            type: 'success'
          })
          this.listLoading = false
          this.varList = []
          this.listQuery.page = 1
          this.getList()
        }).catch((e) => {
          this.listLoading = false
        })
      }).catch(() => {
      })
    },

    batchDel() {
      const _selectData = this.$refs.multipleTable.selection
      if (_selectData == null || _selectData.length == 0) {
        this.$message({
          message: '请选中要删除的项...',
          type: 'error'
        })
        return false
      }
      const ids = _selectData.map((item, index) => {
        return item.OUTSOURCED_ID
      }).join(',')

      this.$confirm('确定要删除选中的数据吗?', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.listLoading = true
        requestFN(
          '/outsourced/deleteAll',
          {
            DATA_IDS: ids
          }
        ).then(() => {
          this.$message({
            message: '删除成功',
            type: 'success'
          })
          this.listLoading = false
          this.varList = []
          this.listQuery.page = 1
          this.$refs.multipleTable.clearSelection()
          this.getList()
        }).catch((e) => {
          this.listLoading = false
        })
      }).catch(() => {
      })
    },
    // 判断按钮权限，用于是否显示按钮
    hasButton: function() {
      var keys = 'outsourced:add,outsourced:del,outsourced:edit,toExcel'
      requestFN(
        '/head/hasButton',
        {
          keys: keys
        }
      ).then((data) => {
        this.add = data.outsourcedfhadminadd		// 新增权限
        this.del = data.outsourcedfhadmindel		// 删除权限
        this.edit = data.outsourcedfhadminedit	// 修改权限
      }).catch((e) => {
        this.listLoading = false
      })
    },
    // 获取数据字典数据
    getDict: function() {
      // return new Promise((resolve) => {
      //   requestFN(
      //     '/corpDepartment/listTreeManageAndCorp1',
      //     {}
      //   ).then((data) => {
      //     this.treeDataInspectDept = this.listTransTree(JSON.parse(data.zTreeNodes), 'id', 'pId', 'nodes')
      //     resolve()
      //   }).catch((e) => {
      //   })
      // })
    },
    resetForm() {
      this.form = {
        CONTRACT_PIC: '', // 发包部门负责人
        OUTSOURCED_NAME: '', // 重点工程名称
        STARTTIME: '', // 计划工期开始时间
        ENDTIME: '', // 计划工期结束时间
        CONTRACT_STIME: '', // 合同起止时间
        CONTRACT_ETIME: '', // 合同起止时间
        UNITS_ID: '', // 相关方单位名称
        CONTRACT_NUM: '', // 合同号
        UNITS_APTITUDE: '', // 相关方单位资质
        UNITS_PIC: '', // 相关方单位本项目负责人
        UNITS_PHONE: '', // 相关方单位本项目负责人手机
        MANAGE_NAME: '', // 监理单位名称
        MANAGE_APTITUDE: '', // 监理单位资质
        MANAGE_PIC: '', // 监理单位本项目负责人姓名
        DESIGE: '', // 相关方组织设计
        MANAGE_PHONE: '', // 监理单位本项目负责人手机
        MEASURES: '', // 安全技术措施
        ATTACHMENTS: '', // 附件
        REMARKS: '', // 备注
        TRAINING_NAME: '', // 培训管理单位
        TRAINING_PIC: '', // 培训管理负责人
        TRAINING_STIME: '', // 培训时间
        TRAINING_ETIME: '', // 培训时间
        RECORDS: '', // 安全培训记录
        SHEET: '', // 培训签名表
        EXAMINATION: '', // 重点工程考试题
        OATTACHMENTS: '', // 其他附件
        APPLICANT: '', // 申请人
        STATE: ''// 状态
      }
    },

    selectDeptOption() {
      // 合并
      return new Promise((resolve) => {
        requestFN(
          '/department/listTree',
        ).then((data) => {
          this.treeDeptOptions = JSON.parse(data.zTreeNodes)
          this.treeDataInspectDept = JSON.parse(data.zTreeNodes)
          this.treeDataDept = JSON.parse(data.zTreeNodes)
          resolve()
        }).catch((e) => {
        })
      })
    },
    selectDeptOptionNew() {
      // 合并
      var arr = [...this.form.INVOLVING_CORPS, ...this.form.MANAGE_NAME]
      // 去重
      var dataSet = [...new Set(arr)]
      // 转数组
      var dataArray = Array.from(dataSet)
      var dataJson = JSON.stringify(dataArray)
      return new Promise((resolve) => {
        requestFN(
          '/department/listTreeManageAndCorpForPcPunishThePerson',
          {
            ids: dataJson
          }
        ).then((data) => {
          this.treeDeptOptions = this.listTransTree(JSON.parse(data.zTreeNodes), 'id', 'pId', 'nodes')
          resolve()
        }).catch((e) => {
        })
      })
    },
    removeDeptOption() {
      this.inspectorList = [{ INSPECTION_DEPARTMENT_ID: '', INSPECTION_USER_ID: '', USER_SIDE: '' }] // 检查人员
    },

    addInspector() {
      this.inspectorList.push({ INSPECTION_DEPARTMENT_ID: '', INSPECTION_USER_ID: '', USER_SIDE: '' })
      this.INSPECTOR_List.push([])
    },
    updateInspecteDept(DEPARTMENT_ID, i) {
      this.inspectorList[i].INSPECTION_USER_ID = ''
      this.inspectorList[i].USER_SIDE = ''
      this.selectUserOptionByDept(DEPARTMENT_ID, i)
    },
    selectUserOptionByDept(id, i) {
      return new Promise((resolve) => {
        requestFN(
          '/user/listAll',
          {
            DEPARTMENT_ID: id,
            ISMAIN: '0'
          }
        ).then((data) => {
          this.INSPECTOR_List[i] = data.userList
          this.$forceUpdate()
          // this.punishThePersonOptions = data.usersList
          // resolve()
        }).catch((e) => {
        })
      })
    },
    changeHiddenUserList(item, data, index) {
      var count = 0
      this.inspectorList.forEach(selct => {
        if (selct.INSPECTION_USER_ID === data.USER_ID) {
          count++
        }
      })
      if (count > 1) {
        this.inspectorList[index].INSPECTION_USER_ID = ''
        this.$message.warning('请勿重复选择处罚人员')
      }
      item.USER_SIDE = data.USER_SIDE
    },
    /**  获取企业信息 **/
    getCorpInfo() {
      requestFN(
        '/corpinfo/goLogin',
        {}
      ).then((data) => {
        this.corpinfoPd = data.pd
      }).catch((e) => {
        this.listLoading = false
      })
    },
    getCorpList() {
      requestFN(
        '/corpinfo/listAll',
        {}
      ).then((data) => {
        this.corpList = data.varList
        this.mangeList = data.varList
        if (!this.$parent.OUTSOURCED_ID) {
          this.form.MANAGE_NAME = ['133a982a3e93464a9b1de25fe6dd4948']
        }
        for (let i = 0; i < data.varList.length; i++) {
          const corpId = data.varList[i].CORPINFO_ID
          if (corpId === '1e6dbbe16004402f8d2c0e52afd9a676' ||
            corpId === '3a854eefa7894e06aaa1a2611bca80f6' ||
            corpId === '020578a4c1f04bc692ee25145c2efbe5' || corpId === '90966974de3c4b83aca6f8fd6432d5c2') {
            this.groupCorpList.push(data.varList[i])
          }
        }
      }).catch((e) => {
      })
    },
    getTreeList() {
      requestFN(
        '/department/listTree',
        {}
      ).then((data) => {
        // this.treeDeptOptions = JSON.parse(data.zTreeNodes)
      }).catch((e) => {
      })
    },
    /** 获取监管部门的人员信息 **/
    updateJianguanDept(departID) {
      requestFN(
        '/user/listAll',
        {
          DEPARTMENT_ID: departID,
          ISMAIN: '0'
        }
      ).then((data) => {
        this.userList = data.userList
        // this.$forceUpdate()
        // this.punishThePersonOptions = data.usersList
        // resolve()
      }).catch((e) => {
      })
    },
    delFujian(item) {
      requestFN(
        '/imgfiles/delete',
        {
          IMGFILES_ID: item.IMGFILES_ID
        }
      ).then((data) => {
      }).catch((e) => {
      })
    },
    // 删除检查人员
    delInspectorRow(row, index) {
      if (this.inspectorList.length === 1) {
        this.$message.warning('必须添加处罚人')
        return
      }
      if (this.validStr(row.INSPECTION_DEPARTMENT_ID) || this.validStr(row.INSPECTION_USER_ID)) {
        this.$confirm('确定要移除第' + (index + 1) + '个检查人员吗?', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          if (this.form.OUTSOURCED_ID) {
            var data = { OUTSOURCED_ID: this.form.OUTSOURCED_ID, CREATOR: row.INSPECTION_USER_ID }
            requestFN(
              '/keyprojectpunish/findByOperator',
              data
            ).then((data) => {
              if (data.data.length > 0) {
                this.$message({
                  message: '此用户对项目进行了罚款操作，不可删除',
                  type: 'error'
                })
              } else {
                this.$set(this.inspectorList, this.inspectorList.splice(index, 1))
                this.INSPECTOR_List.splice(index, 1)
              }
            }).catch((e) => {
            })
          } else {
            this.$set(this.inspectorList, this.inspectorList.splice(index, 1))
            this.INSPECTOR_List.splice(index, 1)
          }
        }).catch(() => {
        })
      } else {
        this.inspectorList.splice(index, 1)
        this.INSPECTOR_List.splice(index, 1)
      }
    },
    getUnitUser(event) {
      requestFN(
        '/personnelmanagement/listAll',
        {
          UNITS_ID: event
        }
      ).then((data) => {
        this.form.UNITS_PIC = ''
        this.form.UNITS_PHONE = ''
        this.unitsUserList = data.varList
      // this.punishThePersonOptions = data.usersList
      // resolve()
      }).catch((e) => {
      })
    },
    selectUnitsUser(event) {
      this.unitsUserList.find((item) => {
        if (item.PERSONNELMANAGEMENT_ID === event) {
          this.form.UNITS_PHONE = item.PHONENUM
        }
      })
    },
    getUnitUserNew(UNITS_ID) {
      requestFN(
        '/personnelmanagement/listAll',
        {
          UNITS_ID: UNITS_ID
        }
      ).then((data) => {
        this.unitsUserList = data.varList
      // this.punishThePersonOptions = data.usersList
      // resolve()
      }).catch((e) => {
      })
    }
  }
}

</script>
<style lang="sass" scoped>
.uo-flex
  display: flex
  .avatar-uploader
    ul
      margin: 0
      li
        padding: 0
  .el-dialog__body
    padding: 0
  .map-flex
    display: flex
    width: 500px
    align-items: center

  .ud-flex
    display: flex
  .form-group
    display: flex
    align-items: center
    .form-label
      padding: 0px 15px
      font-size: 14px
      width: 240px
      font-weight: 400
      text-align: right
      margin-bottom: 18px
      .star
        color: red
        padding-right: 4px
    .input-block
      display: flex

  .disContent
    display: flex
    align-items: center
    flex-wrap: wrap
    .img-div
      position: relative
      margin: 0 10px 0px 0
      width: 108px
      height: 108px
      border-radius: 4px
      overflow: hidden
      &>img
        width: 100%
        height: 100%

  .disContent-hide
    position: absolute
    width: 100%
    height: 100%
    border-radius: 4px
    background-color: rgba(48, 48, 48, 0.59)
    display: none
    top: 0
    left: 0
    line-height: 32px

    .Delete
      position: absolute
      bottom: 14px
      right: 10px
      font-size: 16px
      color: white
      cursor: pointer
    .yuLan
      position: absolute
      bottom: 23px
      right: 50px
      font-size: 16px
      color: white
      cursor: pointer
      .yuLanImg
        position: absolute
        bottom: 0
        right: 0
        width: 100%
        height: 100%
        opacity: 0

  .img-div:hover .disContent-hide
    display: block

    .pitchCss
      border: 1px solid #202e78
      transition: all linear 0.1s
      width: 116px
      height: 116px

</style>
