yiliangyiyun-pcmgr/src/views/organizationNew/shoreMemberAdd.vue

<!-- 组织架构模块 添加船舶页面 -->
<template>
  <div class="box-body"
       v-loading="loading">
    <div class="label-box">
      <span class="label-title">{{ title }}</span>
      <div class="button-float">
        <el-button v-if="!id"
                   type="primary"
                   @click="save('ruleForm', false)">保存并继续新建</el-button>
        <el-button type="primary"
                   @click="save('ruleForm', true)">保存</el-button>
        <el-button @click="cancel">返回</el-button>
      </div>
    </div>
    <div class="main-list">
      <el-form ref="ruleForm"
               :model="ruleForm"
               :rules="rules"
               class="demo-ruleForm">
        <el-form-item label="中文名"
                      prop="staffName">
          <el-input v-model="ruleForm.staffName"
                    placeholder="请输入"
                    maxlength="20" />
        </el-form-item>
        <el-form-item label="账号"
                      v-if="id"
                      class="serviceType">
          <span class="tips">
            <svg-icon icon-class="tips" />
            <p>成员唯一标识，可以使用工号、邮箱等<br />公司系统内统一的ID</p>
          </span>
          <el-input v-model="ruleForm.staffAccount"
                    maxlength="20"
                    placeholder="登录账号唯一标识" />
        </el-form-item>
        <el-form-item label="账号"
                      prop="staffAccount"
                      class="serviceType"
                      v-else>
          <span class="tips">
            <svg-icon icon-class="tips" />
            <p>成员唯一标识，可以使用工号、邮箱等<br />公司系统内统一的ID</p>
          </span>
          <el-input v-model="ruleForm.staffAccount"
                    maxlength="20"
                    placeholder="登录账号唯一标识" />
        </el-form-item>
        <el-form-item label="修改密码"
                      prop="loginPasswordNew"
                      v-if="id">
          <el-input clearable
                    :type="inputType"
                    autocomplete="new-password"
                    name="password"
                    @focus="changeInputType"
                    v-model="ruleForm.loginPasswordNew"
                    placeholder="密码任意6位数字，大小写字母，符号组合"
                    minlength="6"
                    maxlength="20" />
        </el-form-item>
        <el-form-item label="密码"
                      prop="loginPassword"
                      v-if="!id">
          <el-input clearable
                    :type="inputType"
                    autocomplete="new-password"
                    name="password"
                    @focus="changeInputType"
                    v-model="ruleForm.loginPassword"
                    minlength="6"
                    maxlength="20"
                    placeholder="密码任意6位数字，大小写字母，符号组合" />
        </el-form-item>
        <el-form-item label="确认密码"
                      prop="loginPasswordAgain"
                      v-if="
            (id &&
              ruleForm.loginPasswordNew &&
              ruleForm.loginPasswordNew.length > 0) ||
              !id
          ">
          <el-input clearable
                    :type="inputType"
                    autocomplete="new-password"
                    name="password"
                    @focus="changeInputType"
                    v-model="ruleForm.loginPasswordAgain"
                    minlength="6"
                    maxlength="20"
                    placeholder="请再次确认密码" />
        </el-form-item>
        <el-form-item label="确认密码"
                      v-show="
            !(
              (id &&
                ruleForm.loginPasswordNew &&
                ruleForm.loginPasswordNew.length > 0) ||
              !id
            )
          ">
          <el-input clearable
                    :type="inputType"
                    autocomplete="new-password"
                    name="password"
                    @focus="changeInputType"
                    v-model="ruleForm.loginPasswordAgain"
                    minlength="6"
                    maxlength="20"
                    placeholder="请再次确认密码" />
        </el-form-item>
        <el-form-item label="手机号"
                      prop="staffMobilePhone">
          <el-input v-model="ruleForm.staffMobilePhone"
                    placeholder="请输入常用手机号" />
        </el-form-item>
        <el-form-item label="公司/部门"
                      prop="underCompId"
                      class="dept-comp">
          <el-select v-model="ruleForm.underCompId"
                     placeholder="请选择"
                     @change="changeDept">
            <el-option v-for="item in companyList"
                       :key="item.compId"
                       :label="item.compName"
                       :value="item.compId" />
          </el-select>
          <el-select v-model="ruleForm.deptId"
                     placeholder="请选择"
                     @change="changeRole">
            <el-option v-for="item in deptList"
                       :key="item.deptId"
                       :label="item.deptName"
                       :value="item.deptId" />
          </el-select>
        </el-form-item>
      </el-form>
      <div class="department">
        <div>
          <span class="star font">职务</span>
          <span class="ontent"
                v-if="zhiwu1.roleName">{{
            zhiwu1.roleName
          }}</span>
          <span class="operaction"
                @click="setwork">设置</span>
        </div>
       <!-- <div class="lastspan">
          <span class="star font">关联船舶</span>
          <div class="ontent"
               style="width: 800px;">
            <span v-for="(item, key) in seleteShipList"
                  :key="key"
                  v-show="item.vesselId"
                  class="ontent shipName">{{ item.vesselName }}</span>
            <span style="padding-left: 4px;"
                  class="operaction shipSelectSet"
                  @click="setChargeShip">设置</span>
          </div>
        </div> -->
        <div style="display:flex">
          <span class=" font">兼职职务</span>
          <span class="operaction"
                @click="partTimeSetting">设置</span>
          <div class="boxClass">
            <div v-for="(item, index) in jobList"
                 :key="index"
                 v-show="item.roleId"
                 style="margin-bottom: 10px">
              <span class=" aaa">兼职{{ index + 1 }}:{{ item.roleName }}</span>
              <!-- <div class="lastspan">
                <span class="star bbb">关联船舶</span>
                <div class="ontent"
                     style="width: 800px;">
                  <span v-for="(item, index) in item.asd"
                        :key="item.vesselId + index"
                        v-show="item.vesselId"
                        class="ontent shipName">{{ item.vesselName }}</span>
                  <span class="operaction shipSelectSet"
                        @click="setUpShip(item)">设置</span>
                </div>
              </div> -->
            </div>
          </div>
        </div>
      </div>
      <div class="uphead">
        <span class="imghead font">上传签名：</span>
        <img :src="
            ruleForm.electronicSignature === ''
              ? url
              : ruleForm.electronicSignature
          "
             class="img" />
        <input type="file"
               class="kyc-passin"
               @change="uploadPhoto($event)" />
        <span class="talk">支持上传jpg/png文件，大小不能超过1M</span>
      </div>
    </div>
    <!-- 主要职务选择 -->
    <el-dialog title="设置成员主职职务"
               :visible.sync="mainJobSelection"
               width="650px"
               center
               :close-on-click-modal="false">
      <div class="checkBoxClass">
        <span class="member">成员将属于以下职务</span>
        <el-radio-group @change="handleCheckAllChanges"
                        v-model="post"
                        class="postBox">
          <el-radio class="checkBoxCla"
                    v-for="(item, key) in data1"
                    :key="key"
                    :label="item.roleId">{{ item.roleName }}</el-radio>
        </el-radio-group>
      </div>
      <span slot="footer"
            class="dialog-footer">
        <el-button @click="mainJobSelection = false">取 消</el-button>
        <el-button type="primary"
                   @click="setMainJob">确 定</el-button>
      </span>
    </el-dialog>

    <!--6.设置成员职务-->
    <el-dialog title="设置兼职职务职务"
               :visible.sync="setDuty"
               width="650px"
               center
               :close-on-click-modal="false">
      <div class="adddepartment">
        <div class="adddepartment1">
          <div v-loading="roleLoading">
            <div class="block">
              <el-tree class="ship-tree"
                       :props="props"
                       node-key="id"
                       :load="loadNode"
                       lazy>
                       <!-- @change="val => radioGroupChange(data, val, node)" -->
                <template slot-scope="{ node, data }">
                  <span v-if="node.level === 2">
                    <el-checkbox-group v-model="data.check" @change="val => radioGroupChange(data, val, node)">
                      <el-checkbox class="zhiwuChecks"
                                   v-for="item in data.roid"
                                   :key="item.roleId"
                                   :label="item">
                        {{ item.roleName }}
                      </el-checkbox>
                    </el-checkbox-group>
                  </span>
                  <span v-else>{{ data.deptName }}</span>
                </template>
              </el-tree>
            </div>
          </div>
        </div>
        <div class="adddepartment2">
          <span class="adddepartment4">成员将属于以下职务</span>

          <div class="primaryzw">
            <div class="ciyaozhiwu"
                 v-for="(item, index) in jobList"
                 :key="index">
              {{ item.roleName }}
              <span class="zhiwuDel"
                    @click="delZhiWu(item)">删除</span>
            </div>
          </div>
        </div>
      </div>
      <span slot="footer"
            class="dialog-footer">
        <el-button @click="setDuty = false">取 消</el-button>
        <el-button type="primary"
                   @click="setDutysave">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 7.关联船舶 -->
    <el-dialog title="负责船舶"
               :visible.sync="chargeShip"
               width="650px"
               center
               :close-on-click-modal="false">
      <div class="adddepartment">
        <div class="adddepartment1"
             v-loading="loadingVessel">
          <div class="search-box">
            <el-input class="search-keyword"
                      v-model.trim="searchKeyword"
                      maxlength="50"
                      placeholder="请输入船舶名称"
                      clearable
                      @clear="getClear"
                      @keyup.enter.native="getList" />
            <svg-icon icon-class="searchIcon"
                      class="searchIcon"
                      @click="getList" />
          </div>
          <el-checkbox :indeterminate="isIndeterminate"
                       v-model="checkAll"
                       @change="handleCheckAllChange">全选</el-checkbox>
          <!--<el-checkbox :indeterminate="isIndeterminate" v-model="checkAntiFlag" @change="checkAnti">反选</el-checkbox>-->
          <el-checkbox-group v-model="shipCheckList"
                             @change="handleCheckedCitiesChange">
            <el-checkbox class="zhiwuCheck"
                         v-for="(item, index) in shipList"
                         :label="item.vesselId"
                         :key="item.vesselId + index">
              {{ item.vesselName }}
            </el-checkbox>
          </el-checkbox-group>
        </div>
        <div class="adddepartment2">
          <span class="adddepartment4">成员将属于以下船舶</span>
          <div class="primaryzw">
            <div class="ciyaozhiwu"
                 v-for="(item, index) in seleteShipList"
                 :key="index">
              {{ item.vesselName }}
              <span class="zhiwuDel"
                    @click="delShipSelect(item.vesselId)">删除</span>
            </div>
          </div>
        </div>
      </div>
      <span slot="footer"
            class="dialog-footer">
        <el-button @click="getNowList">取 消</el-button>
        <el-button type="primary"
                   @click="saveChargeShip">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 兼职船舶 -->
    <el-dialog title="负责船舶"
               :visible.sync="partTimeJobShip"
               width="650px"
               center
               :close-on-click-modal="false">
      <div class="adddepartment">
        <div class="adddepartment1"
             v-loading="loadingVessel">
          <div class="search-box">
            <el-input class="search-keyword"
                      v-model.trim="searchKeyword"
                      maxlength="50"
                      placeholder="请输入船舶名称"
                      clearable
                      @clear="getClear"
                      @keyup.enter.native="getList" />
            <svg-icon icon-class="searchIcon"
                      class="searchIcon"
                      @click="getList" />
          </div>
          <el-checkbox :indeterminate="isIndeterminates"
                       v-model="checkAll"
                       @change="handleCheckAllChangess">全选</el-checkbox>
          <!--<el-checkbox :indeterminate="isIndeterminate" v-model="checkAllAnti" @change="checkAnti">反选</el-checkbox>-->
          <el-checkbox-group v-model="shipCheckLists"
                             @change="handleCheckedCitiesChangess">
            <el-checkbox class="zhiwuCheck"
                         v-for="(item, index) in shipLists"
                         :label="item.vesselId"
                         :key="item.vesselId + index">
              {{ item.vesselName }}
            </el-checkbox>
          </el-checkbox-group>
        </div>
        <div class="adddepartment2">
          <span class="adddepartment4">成员将属于以下船舶</span>
          <div class="primaryzw">
            <div class="ciyaozhiwu"
                 v-for="(item, index) in seleteShipLists"
                 :key="index">
              {{ item.vesselName }}
              <span class="zhiwuDel"
                    @click="delShipSelects(item.vesselId)">删除</span>
            </div>
          </div>
        </div>
      </div>
      <span slot="footer"
            class="dialog-footer">
        <el-button @click="cancels">取 消</el-button>
        <el-button type="primary"
                   @click="determine">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { addadmin,checkApp } from "../../api/organization/orgAddMan";
import {
  getOssInterimCredentials,
  GotOssAccessConfig,
  uploadShipFiles
} from "../../api/upload";
import { client } from "../../utils/alioss";

import { validPassword } from "../../utils/validate";

import shoreApi from "../../api/organization/shore";
import {
  staffInfo,
  changeInfo,
  saveRole,
  companyVessels,
  getDeptListByCompId
} from "../../api/shoreBasedMembers";
const validPasswordRule = function (rule, value, callback) {
  if (value)
    if (!validPassword(value)) {
      callback(
        // this.$message({
        //   message: '密码为6到20位数字密码任意组合！',
        //   type: 'error'
        // })
        new Error("密码为6到20位数字密码任意组合")
      );
      return;
    } else {
      callback();
      return;
    }
  callback();

  // if (!validPassword(value)) {
  //   callback(new Error('密码为6到20位数字密码任意组合'));
  // } else {
  //   callback();
  // }
};

export default {
  name: "shoreMemberAdd",
  data () {
    const validcodeId = (rule, value, callback) => {
      const reg = /[0-9a-zA-Z]$/;
      if (!reg.test(value)) {
        callback(
          new Error("账号必须是由数字和字母组合")
          // this.$message({
          //   type: 'error',
          //   message: '账号必须是由数字和字母组合',
          //   showClose: true,
          // })
        );
      } else {
        callback();
      }
    };

    const validcodeName = (rule, value, callback) => {
      const reg = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,20}$/;
      if (!reg.test(value)) {
        callback(
          new Error("密码必须是由6位数字和字母组合")
          // this.$message({
          //   type: 'error',
          //   message: '密码必须是由6位数字和字母组合',
          //   showClose: true,
          // })
        );
      } else {
        callback();
      }
    };
    const validPasswordAgain = (rule, value, callback) => {
      if (value === "") {
        callback(
          this.$message({
            type: "error",
            message: "带*号的为必填项",
            showClose: true
          })
        );
      } else if (
        (value !== this.ruleForm.loginPassword && !this.id) ||
        (value !== this.ruleForm.loginPasswordNew && this.id)
      ) {
        callback(
          this.$message({
            type: "error",
            message: "两次密码不一致",
            showClose: true
          })
        );
      } else {
        callback();
      }
    };
    const validcodePhonee = (rule, value, callback) => {
      const reg = /^1[345789]\d{9}$/;

      if (!reg.test(value)) {
        callback(
          new Error("手机号格式填写错误")

          // this.$message({
          //     type: 'error',
          //     message: '手机号格式填写错误',
          //     showClose: true,
          //   })
        );
      } else {
        callback();
      }
    };
    return {
      aaabbb: [],
      postList: [],
      post: "",
      mainJobSelection: false,
      isIndeterminate: false,
      isIndeterminates: false,
      loadingVessel: false,
      checkAll: false,
      checkAntiFlag: false,
      compId: sessionStorage.getItem("enterprise-front-companyId"),
      searchKeyword: "", // 关联船舶 搜索关键词
      datamsg: "",
      title: "",
      /* 页面传递来的数据 */
      checklist: [
        {
          value: ""
        }
      ],
      Department: "",
      Departmentname: "",
      /* 设置部门 */
      checklist1: [
        {
          key: "",
          value: ""
        }
      ],
      Department1: "",
      Departmentname1: "",
      zwmsg: "",
      // 船舶
      checklist2: [],
      /* 设置关联船舶 */
      url:
        "http://winsea-saas-test.oss-cn-shanghai.aliyuncs.com/default-logo.png",
      setUpTheDepartment: false,
      setDuty: false,
      chargeShip: false,
      partTimeJobShip: false,
      loading: false,
      ruleForm: {
        deptId: "",
        staffName: "",
        staffAccount: "",
        loginPassword: "",
        loginPasswordAgain: "",
        loginPasswordAgainNew: "",
        loginPasswordNew: "",
        staffMobilePhone: "",
        electronicSignature: "",
        majorRoleId: "",
        roles: [
          {
            roleId: "",
            major: "1"
          }
        ],
        vessels: [{vesselId:'e88a798337c14cd7b8e0dfe7f9efdf5a',vesselName:'试用船舶'}],
        roleVesselIds: []
      },
      rules: {
        staffAccount: [
          {
            required: true,
            // validator: validcodeId,
            trigger: "blur",
            message: "请输入账号"
          }
        ],
        loginPassword: [
          {
            required: true,
            validator: validcodeName,
            trigger: "blur"
          }
        ],
        loginPasswordAgain: [
          {
            required: true,
            validator: validPasswordAgain,
            trigger: "blur"
          }
        ],
        loginPasswordNew: [
          {
            validator: validPasswordRule,
            trigger: "blur"
          }
        ],
        staffName: [
          {
            required: true,
            trigger: "blur",
            message: "请输入中文名"
          }
        ],
        staffMobilePhone: [
          {
            required: true,
            validator: validcodePhonee,
            trigger: "blur"
          }
        ],
        underCompId: [
          {
            required: true,
            trigger: "change"
          }
        ]
      },
      data: [],
      data5: [],
      data6: [],
      data1: [
        {
          id: "",
          label: "",
          disabled: true,
          children: []
        }
      ],
      shipList: [],
      shipLists: [],
      primaryzw: "1",
      zhiwuCheckList: [],
      zhiwuChec1kList: [],
      zhiwu1: {},
      zhiwu2: [],
      zhiwu11: {},
      shipCheckList: [],
      shipCheckLists: [],
      seleteShipList: [],
      seleteShipLists: [],
      companyList: [],
      deptList: [],
      inputType: "text",
      isChrome: true,
      roleLoading: false,
      id: this.$route.query.id,
      postId: "",
      partTimeJobList: [],
      partTimeDepartmentList: [],
      checkedCities: [],
      props: {
        label: "name",
        children: "children",
        isLeaf: "leaf"
      },
      check: [],
      aaaaaa: [],
      gggg: []
    };
  },
  computed: {
    jobList () {
      let res = [];
      Object.keys(this.check).forEach((value, index) => {
        this.check[value].forEach(ite => {
          console.log(ite,res)
          // if(res.length>0){
          //   if(res.every( function( item, index, array ){ return item.roleId!=ite.roleId})){
          //     console.log(ite)
          //     res.push(ite);
          //   }else{
          //     console.log(ite)
          //   }
          // }else{
            res.push(ite);
          // }
        });
      });
      let _a = res.filter(v => v);
      _a.forEach(v => {
        if (v.asd === undefined) v.asd = [];
      });
      return _a;
    }
  },
  created () {
    this.baseInfo();
  },
  methods: {
    async loadNode (node, resolve) {
      if (node.level === 0) {
        // 发起一级请求
        return resolve(this.partTimeDepartmentList);
      }
      if (node.level === 1) {
        // 发起二级请求
        let uuid = node.data.deptId;
        let response = await shoreApi.queryRoleSelectData({
          vesselBankFlag: "B",
          underCompId: this.ruleForm.underCompId,
          deptId: uuid
        });
        this.partTimeJobList = response;
        if (this.partTimeJobList !== null)
          this.partTimeJobList = this.partTimeJobList.map(itemA => {
            return {
              ...itemA,
              deptId: uuid
            };
          });
        let _check = [];
        for (let variable of this.partTimeJobList) {
          let curr;
          for (let variable2 of this.jobList) {
            if (variable.roleId === variable2.roleId) curr = variable;
          }
          if (curr) {
            _check.push(curr);
            // break;
          }
        }
        this.jobList.forEach(item => {
          item.asd.forEach(itemA => {
            _check.forEach(itemB => {
              if (item.deptId === itemB.deptId)
                if (itemB.asd === undefined) {
                  itemB.asd = [];
                } else {
                  itemB.asd.push(itemA);
                }
            });
          });
        });

        this.aaabbb[uuid] = _check;
        return resolve([
          {
            id: node.data.deptId,
            roid: this.partTimeJobList,
            check: _check,
            leaf: true
          }
        ]);
      }
      if (node.level > 1) {
        return resolve([]);
      }
    },
    radioGroupChange (data, val, node) {
      this.check=[]
      for (let i = 0; i < val.length; i++) {
        data.id=val[i].deptId+'_'+val[i].roleId
        this.$set(this.check, data.id, [val[i]]);
      }
      // console.log(this.check)
      this.aaabbb[data.id] = val;
    },
    //tree
    remove (node, data) {
      // const parent = node.parent;
      // const children = parent.data.children || parent.data;
      // const index = children.findIndex(d => d.id === data.id);
      // children.splice(index, 1);
    },
    // 取消
    cancels () {
      this.partTimeJobShip = false;
      // this.ruleForm.roleVesselIds = [];
      // this.jobList.forEach(item => {
      //   item.asd.forEach(ite => {
      //     this.ruleForm.roleVesselIds.push(item.roleId + "_" + ite.vesselId);
      //   });
      // });
    },
    // 确定
    determine () {
      this.partTimeJobShip = false;
      this.ruleForm.roleVesselIds = [];
      this.jobList.forEach(item => {
        item.asd.forEach(ite => {
          this.ruleForm.roleVesselIds.push(item.roleId + "_" + ite.vesselId);
        });
      });
    },
    append (data) {
      const newChild = { id: id++, label: "testtest", children: [] };
      if (!data.children) {
        this.$set(data, "children", []);
      }
      data.children.push(newChild);
    },
    getList () {
      // 船舶
      shoreApi
        .getVessels({ searchKeyword: this.searchKeyword })
        .then(response => {
          this.shipList = response;
          this.shipLists = response;
          let _isIndeterminate = false;
          this.shipList.forEach(v => {
            this.seleteShipList.forEach(v2 => {
              if (v2.vesselId === v.vesselId) _isIndeterminate = true;
            });
          });
          this.shipLists.forEach(v => {
            this.seleteShipList.forEach(v2 => {
              if (v2.vesselId === v.vesselId) _isIndeterminate = true;
            });
          });
          this.isIndeterminate = _isIndeterminate;
          this.isIndeterminates = _isIndeterminate;

          let _checkAll = false;
          let selectMum = 0;
          this.shipList.forEach(v => {
            this.seleteShipList.forEach(v2 => {
              if (v2.vesselId === v.vesselId) selectMum++;
            });
          });
          this.shipLists.forEach(v => {
            this.seleteShipList.forEach(v2 => {
              if (v2.vesselId === v.vesselId) selectMum++;
            });
          });

          if (this.shipList.length === selectMum) {
            _checkAll = true;
            this.isIndeterminate = false;
          } else {
            _checkAll = false;
          }
          if (this.shipLists.length === selectMum) {
            _checkAll = true;
            this.isIndeterminates = false;
          } else {
            _checkAll = false;
          }
          this.checkAll = _checkAll;
        });
    },
    getClear () {
      this.searchKeyword = null;
      this.getList();
    },
    //反选
    checkAnti (val) {
      // console.log(val,'反选')
      this.checkAll = !val;
      // if(val){
      //   this.checkAll = false;
      // }
      let citiesId = [];
      let shipCheck = [];
      this.shipList.forEach(item => {
        citiesId.push({ vesselId: item.vesselId, vesselName: item.vesselName });
        shipCheck.push(item.vesselId);
      });

      if (this.shipCheckList.length === this.shipList.length) {
        this.isIndeterminate = false;
        this.shipCheckList = [];
        this.seleteShipList = [];
      } else if (this.shipCheckList.length === 0) {
        this.isIndeterminate = false;
        this.shipCheckList = shipCheck;
        this.seleteShipList = citiesId;
      }
    },
    // 关联船舶全选
    handleCheckAllChange (val) {
      if (val) {
        this.checkAntiFlag = false;
      }
      // this.checkAntiFlag = !val;
      // console.log(val,'正选')
      let citiesId = [];
      let shipCheck = [];
      this.shipList.forEach(item => {
        citiesId.push({ vesselId: item.vesselId, vesselName: item.vesselName });
        shipCheck.push(item.vesselId);
      });
      this.shipCheckList = val ? shipCheck : [];
      this.seleteShipList = val ? citiesId : [];
      this.isIndeterminate = false;
    },
    // 关联船舶单选
    handleCheckedCitiesChange (value) {
      // 差集
      let t = [];
      this.shipList.forEach(v1 => {
        let b = Object.assign({}, v1);
        value.forEach(v2 => {
          if (v2 === v1.vesselId) b = null;
        });
        t.push(b);
      });
      //加
      this.shipList.forEach(item => {
        value.forEach(gitem => {
          if (item.vesselId === gitem) {
            let currIndex = this.seleteShipList.findIndex(
              value => value.vesselId === gitem
            );
            if (currIndex === -1)
              this.seleteShipList.push({
                vesselId: item.vesselId,
                vesselName: item.vesselName
              });
          }
        });
      });
      // 删
      let _t = t.filter(v => !!v);
      let a = this.seleteShipList.filter(v => {
        let r = true;
        _t.forEach(v2 => {
          if (v.vesselId === v2.vesselId) r = false;
        });
        return r;
      });

      this.seleteShipList = a;

      let _isIndeterminate = false;
      this.shipList.forEach(v => {
        if (value.includes(v.vesselId)) {
          _isIndeterminate = true;
        }
      });
      this.isIndeterminate = _isIndeterminate;

      let _checkAll = false;
      let selectMum = 0;
      this.shipList.forEach(v => {
        if (value.includes(v.vesselId)) {
          selectMum++;
        }
      });

      if (this.shipList.length === selectMum) {
        _checkAll = true;
        this.isIndeterminate = false;
      } else {
        _checkAll = false;
      }
      this.checkAll = _checkAll;
    },
    // 关联船舶全选
    handleCheckAllChangess (val) {
      let citiesId = [];
      let shipChecks = [];
      this.shipLists.forEach(item => {
        citiesId.push({ vesselId: item.vesselId, vesselName: item.vesselName });
        shipChecks.push(item.vesselId);
      });
      this.shipCheckLists = val ? shipChecks : [];
      this.seleteShipLists = val ? citiesId : [];
      this.gggg.asd = val ? citiesId : [];
      this.isIndeterminates = false;
    },
    // 关联船舶单选
    handleCheckedCitiesChangess (value) {
      // 差集
      let t = [];
      this.shipLists.forEach(v1 => {
        let b = Object.assign({}, v1);
        value.forEach(v2 => {
          if (v2 === v1.vesselId) b = null;
        });
        t.push(b);
      });
      //加
      this.shipLists.forEach(item => {
        value.forEach(gitem => {
          if (item.vesselId === gitem) {
            let currIndex = this.seleteShipLists.findIndex(
              value => value.vesselId === gitem
            );
            if (currIndex === -1)
              this.seleteShipLists.push({
                vesselId: item.vesselId,
                vesselName: item.vesselName
              });
            this.gggg.asd = this.seleteShipLists;
          }
        });
      });

      // 删
      let _t = t.filter(v => !!v);
      let a = this.seleteShipLists.filter(v => {
        let r = true;
        _t.forEach(v2 => {
          if (v.vesselId === v2.vesselId) r = false;
        });
        return r;
      });

      this.seleteShipLists = a;
      this.gggg.asd = a;

      let _isIndeterminates = false;
      this.shipLists.forEach(v => {
        if (value.includes(v.vesselId)) {
          _isIndeterminates = true;
        }
      });
      this.isIndeterminates = _isIndeterminates;

      let _checkAll = false;
      let selectMum = 0;
      this.shipLists.forEach(v => {
        if (value.includes(v.vesselId)) {
          selectMum++;
        }
      });

      if (this.shipLists.length === selectMum) {
        _checkAll = true;
        this.isIndeterminates = false;
      } else {
        _checkAll = false;
      }
      this.checkAll = _checkAll;
    },
    // 选船操作
    shipCheck (id) {
      this.seleteShipList = [];
      for (let i = 0; i < id.length; i++) {
        this.seleteShipList.push({
          vesselId: id[i],
          vesselName: this.shipList.find(item => item.vesselId === id[i])
            .vesselName
        });
      }
    },
    // 选船操作
    shipChecks (id) {
      this.seleteShipLists = [];
      for (let i = 0; i < id.length; i++) {
        this.seleteShipLists.push({
          vesselId: id[i],
          vesselName: this.shipLists.find(item => item.vesselId === id[i])
            .vesselName
        });
      }
    },

    changeInputType () {
      this.inputType = "password";
    },
    // 当前页面信息
    getMemberInfo () {
      this.loading = true;
      staffInfo({ staffId: this.id }).then(response => {
        this.ruleForm = response;
        this.zhiwu1.roleId = this.ruleForm.majorRoleId;
        if (this.ruleForm.underCompId) {
          this.changeDept(this.ruleForm.underCompId);
        }

        if (this.ruleForm.deptId) {
          shoreApi
            .queryRoleSelectData({
              vesselBankFlag: "B",
              underCompId: this.ruleForm.underCompId,
              deptId: this.ruleForm.deptId
            })
            .then(response => {
              this.data6 = response.map(item => {
                return {
                  ...item,
                  state: false
                };
              });
              this.data1 = this.data6;
              this.roleLoading = false;
            });
        }

        if (!this.ruleForm.electronicSignature) {
          this.ruleForm.electronicSignature = this.url;
        }
        // console.log(response)
        // TODO: 此处存在疑问点？
        this.zhiwu1.roleName = response.majorRole
          ? response.majorRole.roleName
          : "";
        this.post = response.majorRole ? response.majorRole.roleId : "";
        if (response.majorRole && response.majorRole.vessels)
          response.majorRole.vessels.forEach(item => {
            this.seleteShipList.push(item);
            this.aaaaaa.push(item.vesselId);
          });
        response.roles.forEach(item => {
          this.$set(this.check, `${item.deptId}_${item.roleId}`, [item]);
          this.$set(this.aaabbb, `${item.deptId}_${item.roleId}`, [item]);
          if (item.vessels !== null)
            item.vessels.forEach(itemD => {
              Object.keys(this.check).forEach((value, index) => {
                if (value === `${item.deptId}_${item.roleId}`) {
                  this.check[value].forEach(ite => {
                    if (ite.asd === undefined) {
                      ite.asd = [];
                    }
                    ite.asd.push(itemD);
                  });
                }
              });
            });
        });

        response.roles.forEach(item => {
          if (item.vessels !== null) {
            item.vessels = item.vessels.map(ite => {
              return {
                ...ite,
                roleId: item.roleId
              };
            });
          }
        });
        this.ruleForm.roleVesselIds = [];
        response.roles.forEach(item => {
          if (item.vessels !== null)
            item.vessels.forEach(itemA => {
              this.ruleForm.roleVesselIds.push(
                itemA.roleId + "_" + itemA.vesselId
              );
              // this.jobList.forEach(ite => {
              //   if (ite.roleId === item.roleId) {
              //     ite.asd.push(itemA);
              //   }
              // });
            });
        });

        // TODO: 此处存在
        this.ruleForm.vessels = response.majorRole
          ? response.majorRole.vessels
          : "";

        // let vessels = response.vessels.filter(function(v) {
        //   return v;
        // });
        // this.shipCheckList = [];
        // this.seleteShipList = vessels.filter(v => {
        //   let t = false;
        //   this.shipList.forEach(v2 => {
        //     if (v2.vesselId === v.vesselId) {
        //       t = true;
        //       this.shipCheckList.push(v.vesselId);
        //     }
        //   });
        //   return t;
        // });

        let checkedCount = this.shipCheckList.length;
        this.checkAll = checkedCount === this.shipList.length;
        this.isIndeterminate =
          checkedCount > 0 && checkedCount < this.shipList.length;

        // if (response.roles.length > 0) {
        //   this.zhiwu1 = response.roles[0];
        //   response.roles.find(item => {
        //     if (item.major === "1") {
        //       this.zhiwu1 = {
        //         roleId: item.roleId,
        //         roleName: item.roleName,
        //         major: "1"
        //       };
        //     }
        //     this.zhiwuCheckList.push(item.roleId);
        //   });
        //   this.zhiwu2 = response.roles.filter(item => {
        //     return item.major !== "1";
        //   });
        // }

        this.loading = false;
      });
    },
    // 上传签名
    uploadPhoto (e) {
      const fileTypes = [".jpg", ".png"];
      const filePath = e.target.value;
      if (filePath) {
        let isNext = false;
        const fileEnd = filePath.substring(filePath.indexOf("."));
        for (let i = 0; i < fileTypes.length; i++) {
          if (fileTypes[i] === fileEnd) {
            isNext = true;
            break;
          }
        }
        if (!isNext) {
          this.$message({
            message: "不接受此类型文件",
            type: "error",
            showClose: true
          });
          e.target.value = "";
          return false;
        }
      } else {
        return false;
      }
      const file = e.target.files[0];
      uploadShipFiles(file, {
        companyId: this.compId || "",
        modelId: ""
      }).then(response => {
        this.ruleForm.electronicSignature =
          this.$store.getters.baseInfo.fileUrl + response.appendixPath;
        this.$message({
          type: "success",
          message: "上传签名成功！",
          showClose: true
        });
      });
    },
    cancel () {
      this.$router.go(-1);
    },
    // 数据转换
    getSelectLabel () {
      this.ruleForm.majorRoleId = this.zhiwu1.roleId;

      // 公司
      this.ruleForm.underCompName = this.companyList.find(
        item => item.compId === this.ruleForm.underCompId
      ).compName;

      // 部门
      this.ruleForm.deptName = this.deptList.find(
        item => item.deptId === this.ruleForm.deptId
      ).deptName;

      if (this.ruleForm.loginPasswordNew) {
        this.ruleForm.loginPassword = this.ruleForm.loginPasswordNew;
      }
    },
    // 编辑
    editSave () {
      this.ruleForm.staffId = this.id;
      changeInfo(this.ruleForm)
        .then(() => {
          // this.cancel();
          this.$message({
            message: "保存成功",
            type: "success",
            showClose: true
          });
          // for(var i =0;i<this.zhiwu2.length;i++){
          //   var param = {
          //     staffId:this.id,
          //     roleId:this.zhiwu2[i].roleId,
          //     roleMajor:'0'
          //   }
          //   saveRole(param).then(() => {
          //   })
          // }
          // this.getMemberInfo();
          this.$router.go(-1);
          this.loading = false;
        })
        .catch(code => {
          this.loading = false;
          if (code === "MANAGEMENT_002") {
            this.$message({
              type: "error",
              message: "手机号冲突！",
              showClose: true
            });
            return false;
          }
          if (code === "MANAGEMENT_001") {
            this.$message({
              type: "error",
              message: "用户名冲突！",
              showClose: true
            });
            return false;
          }
          if (code === "MANAGEMENT_003") {
            this.$message({
              type: "error",
              message: "邮箱冲突！",
              showClose: true
            });
            return false;
          }
          if (code === "MANAGEMENT_010") {
            this.$message({
              type: "error",
              message: "成员名称重复!",
              showClose: true
            });
            return false;
          }
        });
    },
    // 保存
    addSave (flag) {
      addadmin(this.ruleForm)
        .then(() => {
          // this.cancel();
          var commonUser={};
          commonUser.phone = this.ruleForm.staffMobilePhone
          checkApp(commonUser).then(()=>{
          })
          this.$message({
              message: "保存成功",
              type: "success",
              showClose: true
            });
            if (flag) {
              this.$router.go(-1);
            } else {
              this.clearZhiwu();
              this.checklist = [
                {
                  value: ""
                }
              ];
              this.checklist1 = [
                {
                  value: ""
                }
              ];
              this.seleteShipList = [];
              this.ruleForm.staffName = "";
              this.ruleForm.deptId = "";
              this.url =
                "http://winsea-saas-test.oss-cn-shanghai.aliyuncs.com/default-logo.png";

              this.$nextTick(() => {
                this.$refs.ruleForm.clearValidate();
                this.$refs.ruleForm.resetFields();
              });
            }
            this.loading = false;
        })
        .catch(code => {
          this.loading = false;
          if (code === "MANAGEMENT_002") {
            this.$message({
              type: "error",
              message: "手机号冲突！",
              showClose: true
            });
            return false;
          }
          if (code === "MANAGEMENT_001") {
            this.$message({
              type: "error",
              message: "用户名冲突！",
              showClose: true
            });
            return false;
          }
          if (code === "MANAGEMENT_003") {
            this.$message({
              type: "error",
              message: "邮箱冲突！",
              showClose: true
            });
            return false;
          }
        });
    },
    // 保存
    save (formName, flag) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          if (this.ruleForm.roles.length !== 0)
                      if (this.ruleForm.roles[0].roleId === "" || this.zhiwu1.roleName === null) {
                        this.$message({
                          type: "warning",
                          message: "请先设置职务!",
                          showClose: true
                        });
                        return false;
                      }
                      // else if (this.ruleForm.vessels.length === 0) {
                      //   this.$message({
                      //     type: "warning",
                      //     message: "请先设置关联船舶!",
                      //     showClose: true,
                      //     });
                      //     return false;
                      //  }
          this.loading = true;
          this.getSelectLabel();
          if (this.id) {
            this.editSave();
          } else {
            this.addSave(flag);
          }
          this.isIndeterminate = false;
        } else {
          this.$message({
            message: "带*号的为必填项",
            type: "error",
            showClose: true
          });
          return false;
        }
      });
    },
    // 设置职务
    setwork () {
      if (this.ruleForm.deptId) {
        this.mainJobSelection = true;
      } else {
        this.$message({
          message: "请先选择部门！",
          type: "warning",
          showClose: true
        });
      }
    },
    // 设置船
    setChargeShip () {
      // console.info(this.seleteShipList, this.aaaaaa);
      this.chargeShip = true;
      this.shipCheckList = this.seleteShipList.map(item => item.vesselId);
      // this.shipCheckList = this.aaaaaa;
      this.isIndeterminate = true;
    },
    setUpShip (data) {
      this.gggg = data;
      if (this.gggg.asd.length !== 0) {
        let _aaa = [];
        this.gggg.asd.forEach(item => {
          _aaa.push(item.vesselId);
        });
        this.shipCheckLists = _aaa;
        this.isIndeterminates = true;
      } else {
        this.shipCheckLists = this.gggg.asd;
        this.isIndeterminates = false;
      }
      this.seleteShipLists = this.gggg.asd;
      this.partTimeJobShip = true;
    },
    // 兼职设置
    partTimeSetting () {
      if (this.ruleForm.deptId) {
        this.setDuty = true;
      } else {
        this.$message({
          message: "请先选择部门！",
          type: "warning",
          showClose: true
        });
      }
    },
    // 基础数据
    async baseInfo () {
      // 公司
      shoreApi.compAndChildrenInfo().then(res => {
        res[0].children.unshift({
          compId: res[0].compId,
          compName: res[0].compName
        });
        this.companyList = res[0].children;
      });

      // 船舶
      this.loadingVessel = true;
      let res = await shoreApi.getVessels();
      this.loadingVessel = false;
      this.shipList = res;
      this.shipLists = res;
      if (this.id) {
        this.getMemberInfo();
        this.title = "编辑成员";
      } else {
        this.title = "添加成员";
      }

      // 职员
      this.roleLoading = true;
      shoreApi.queryRoleSelectData({ vesselBankFlag: "B" }).then(response => {
        this.roleLoading = false;
        this.data5 = response.map(item => {
          return {
            ...item,
            state: false
          };
        });
      });
    },
    changeRole (id) {
      this.roleLoading = true;
      shoreApi
        .queryRoleSelectData({
          vesselBankFlag: "B",
          underCompId: this.ruleForm.underCompId,
          deptId: id
        })
        .then(response => {
          this.data6 = response.map(item => {
            return {
              ...item,
              state: false
            };
          });
          this.data1 = this.data6;

          if (!this.data1.find(item => item.roleId === this.zhiwu1.roleId)) {
            this.zhiwu1.roleName = null;
          }
          this.data1.forEach(item => {
            this.zhiwu2.forEach((gitem, gindex) => {
              if (gitem.roleId == item.roleId) {
                this.zhiwu2.splice(gindex, 1);
              }

              this.zhiwuCheckList.forEach((citem, cindex) => {
                if (gitem.roleId == citem) {
                  this.zhiwuCheckList.splice(cindex, 1);
                }
              });
            });
          });

          // this.zhiwuCheckList.push(item.roleId);

          // if(this.zhiwu2.find(item => item.roleId === this.zhiwu1.roleId)){
          //   this.zhiwu2 = [];
          // }
          this.roleLoading = false;
        });
    },
    changeDept (id) {
      // 部门
      getDeptListByCompId({ vesselBankFlag: "B", underCompId: id }).then(
        response => {
          this.postId = id;
          this.deptList = response;
          this.partTimeDepartmentList = response;
        }
      );
    },
    adddepartmentDel () {
      this.resetChecked();
      this.checklist = [
        {
          key: "",
          value: ""
        }
      ];
    },
    /* 删除 */
    resetChecked (key, value) {
      this.$refs.tree.setCheckedKeys([key]);
      this.checklist.push({
        key,
        value
      });
    },
    // /* 清空 */
    // check(data) {
    //   this.checklist = [];
    //   const key = data.id;
    //   const value = data.label;
    //   this.resetChecked(key, value);
    // },
    departmentsave () {
      this.setUpTheDepartment = false;
      this.ruleForm.deptId = this.checklist[0].key;
    },
    // 主要职务单选
    handleCheckAllChanges (value) {
      // this.zhiwu1 = {
      //   roleName: this.data1.find(item => item.roleId === value).roleName
      // };
      this.zhiwu1 = {
        major:1,
        roleId: value,
        roleName: this.data1.find(item => item.roleId === value).roleName
      };
    },
    /* 保存 */
    // 设置主要职务
    setMainJob () {
      this.setDuty = false;
      this.zhiwu11 = this.zhiwu1;
      const zhiwuAll = [];
      zhiwuAll.push(this.zhiwu1);
      this.ruleForm.roles = zhiwuAll.concat(this.zhiwu2);
      this.mainJobSelection = false;
    },

    /* 设置职务 */
    setDutysave () {
      // if (this.zhiwu1.roleId) {
      this.setDuty = false;
      this.ruleForm.roleVesselIds = [];
      this.zhiwu2 = []
      this.zhiwu11 = this.zhiwu1;
      const zhiwuAll = [];
      zhiwuAll.push(this.zhiwu1);
      this.jobList.forEach(item => {
        item.asd.forEach(ite => {
          this.ruleForm.roleVesselIds.push(item.roleId + "_" + ite.vesselId);
        });
        this.zhiwu2.push({
          roleId: item.roleId,
          roleName: this.partTimeJobList.find(item1 => item1.roleId === item.roleId)
            .roleName,
          major: "0"
        });
        zhiwuAll.push({
          roleId: item.roleId,
          roleName: this.partTimeJobList.find(item1 => item1.roleId === item.roleId)
            .roleName,
          major: "0"
        });
      });
      this.ruleForm.roles = zhiwuAll
      // } else {
      //   this.$message({
      //     type: "error",
      //     message: "请选择主要职务",
      //     showClose: true
      //   });
      // }
    },
    getNowList () {
      this.chargeShip = false;
      this.searchKeyword = null;
      this.getList();
    },
    saveChargeShip () {
      this.getNowList();
      this.ruleForm.vessels = this.seleteShipList;
    },
    zhiwu2Check (data) {
      this.zhiwu2 = [];
      for (let i = 0; i < data.length; i++) {
        this.zhiwu2.push({
          roleId: data[i],
          roleName: this.partTimeJobList.find(item => item.roleId === data[i])
            .roleName,
          major: "0"
        });
      }
    },
    // 职务操作

    zhiwuCheck (id) {
      // if (this.primaryzw == "1") {
      //   this.zhiwuCheckList = [];
      //   this.zhiwuCheckList.push(data[data.length - 1]);
      //   this.zhiwu1 = {
      //     roleId: data[data.length - 1],
      //     roleName: this.data1.find(
      //       item => item.roleId === data[data.length - 1]
      //     ).roleName,
      //     major: "1"
      //   };
      // } else {
      // this.zhiwu2 = [];
      // for (let i = 0; i < data.length; i++) {
      //   this.zhiwu2.push({
      //     roleId: data[i],
      //     roleName: this.data5.find(item => item.roleId === data[i]).roleName,
      //     major: "0"
      //   });
      // }
      // }

      this.roleLoading = true;
      shoreApi
        .queryRoleSelectData({
          vesselBankFlag: "B",
          underCompId: this.ruleForm.underCompId,
          deptId: id.join(",")
        })
        .then(response => {
          this.partTimeJobList = response;
          // this.data6 = response.map(item => {
          //   return {
          //     ...item,
          //     state: false
          //   };
          // });
          // this.data1 = this.data6;
          this.roleLoading = false;
        });
    },
    zhiwuRadio1 (data) {
      this.data1 = this.data6;
      for (let i = 0; i < this.data1.length; i++) {
        this.data1[i].state = false;
      }
      for (let i = 0; i < this.zhiwu2.length; i++) {
        for (let j = 0; j < this.data1.length; j++) {
          if (this.zhiwu2[i].roleId == this.data1[j].roleId) {
            this.data1[j].state = true;
          }
        }
      }
      this.zhiwuCheckList = [];
      this.zhiwuCheckList.push(data);
    },
    zhiwuRadio2 (data) {
      this.data1 = this.data5;
      for (let i = 0; i < this.data1.length; i++) {
        this.data1[i].state = false;
      }
      for (let i = 0; i < this.data1.length; i++) {
        if (this.zhiwu1.roleId == this.data1[i].roleId) {
          this.data1[i].state = true;
        }
      }
      this.zhiwuCheckList = [];
      if (data.length > 0) {
        for (let i = 0; i < data.length; i++) {
          this.zhiwuCheckList.push(data[i].roleId);
        }
      }
    },
    delZhiWu (data) {
      for (
        let i = 0;
        i < this.aaabbb[`${data.deptId}_${data.roleId}`].length;
        i++
      ) {
        if (
          this.aaabbb[`${data.deptId}_${data.roleId}`][i].roleId == data.roleId
        ) {
          this.aaabbb[`${data.deptId}_${data.roleId}`].splice(i, 1);
        }
      }

      for (let i = 0; i < this.jobList.length; i++) {
        if (data.roleId === this.jobList[i].roleId) {
          this.jobList.splice(i, 1);
          this.$forceUpdate();
        }
      }
      // for (let i = 0; i < this.data1.length; i++) {
      //   if (data.roleId == this.data1[i].roleId) {
      //     this.data1[i].state = false;
      //   }
      // }
    },
    // 弹出框确认关闭
    handleClose (done) {
      this.clearZhiwu();
      done();
    },
    clearZhiwu () {
      this.zhiwu11 = [];
      this.zhiwu1 = {};
      this.zhiwu2 = [];
      this.zhiwuCheckList = [];
      this.primaryzw = "1";
      this.shipCheckList = [];
      this.seleteShipList = [];
    },

    delShipSelect (data) {
      const num = this.shipCheckList.indexOf(data);
      this.shipCheckList.splice(num, 1);
      for (let i = 0; i < this.seleteShipList.length; i++) {
        if (this.seleteShipList[i].vesselId == data) {
          this.seleteShipList.splice(i, 1);
        }
      }
      if (this.seleteShipList.length === 0) {
        this.isIndeterminate = false;
      } else {
        this.isIndeterminate = true;
      }
    },
    delShipSelects (data) {
      const num = this.shipCheckLists.indexOf(data);
      this.shipCheckLists.splice(num, 1);

      for (let i = 0; i < this.seleteShipLists.length; i++) {
        if (this.seleteShipLists[i].vesselId == data) {
          this.seleteShipLists.splice(i, 1);
        }
      }
      this.gggg.asd = this.seleteShipLists;
      if (this.seleteShipLists.length === 0) {
        this.isIndeterminate = false;
      } else {
        this.isIndeterminate = true;
      }
    }
  }
};
</script>
<style scoped lang="scss">
.dept-comp {
  /deep/ .el-select:nth-child(1) {
    margin-right: 10px;
  }
  /deep/ .el-input__inner,
  .el-select {
    width: 203px !important;
  }
}

.serviceType {
  /deep/ .el-form-item__label {
    padding-right: 25px;
  }
  .el-form-item__content {
    position: relative;
  }
  .tips {
    font-size: 20px;
    color: #999;
    position: absolute;
    left: -25px;
    cursor: pointer;
    z-index: 99;
    &:hover {
      p {
        display: block;
      }
    }
    p {
      display: none;
      box-shadow: 0 1px 8px rgba(137, 142, 146, 0.34);
      font-size: 12px;
      line-height: 16px;
      background: #fff;
      color: #333;
      padding: 3px;
      margin: 0;
      margin-top: -4px;
      border-radius: 5px;
      height: 40px;
    }
  }
}

.border {
  width: 960px;
  height: 100%;
  border-left: 1px solid #cccccc;
}
.organization-box {
  height: calc(86vh - 10px);
  overflow-y: auto;
  border: none;
}
.uphead {
  margin: 20px 0;
  height: 60px;
  line-height: 60px;
}
.img {
  display: inline-block;
  height: 60px;
  width: 60px;
  border-radius: 10px;
  vertical-align: sub;
}
.kyc-passin {
  margin-left: 20px;
  width: 170px;
}
.talk {
  font-size: 12px;
  color: #999999;
}
/deep/.el-dialog__body {
  padding: 0;
}
/deep/ .el-dialog--center .el-dialog__body {
  padding: 0;
}
.adddepartment {
  height: 400px;
  display: flex;
  justify-content: space-between;
}
.adddepartment1 {
  padding: 20px;
  width: 50%;
  overflow-y: auto;
  .el-checkbox-group {
    padding-left: 15px;
  }
  .search-box {
    margin-bottom: 10px;
    .search-keyword {
      margin-right: 30px;
    }
  }
}
.adddepartment2 {
  padding: 20px;
  width: 50%;
  background-color: #eeeeee;
}
/deep/.el-tree-node__content {
  height: 40px;
}
.adddepartment3 {
  height: 36px;
  line-height: 36px;
  background-color: #ffffff;
  position: relative;
  margin-bottom: 5px;
}
.adddepartment4 {
  display: inline-block;
  margin-bottom: 20px;
}
.adddepartmentLeft {
  width: 195px;
  display: inline-block;
  position: absolute;
  left: 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.shipName {
  padding: 4px 8px;
  background-color: #dde9fc;
  margin-right: 10px;
  margin-bottom: 10px;
}
.ddv1 {
  //width: 730px;
  vertical-align: top;
  margin-top: 2px;
}
.ddv1 > span {
  float: left;
}
.adddepartmentDel {
  display: inline-block;
  position: absolute;
  right: 20px;
  color: #1d6ced;
  cursor: pointer;
}
/deep/.el-form-item .el-input__inner {
  width: 420px;
}
.main-list {
  height: calc(42vh);
}
.primaryzw {
  width: 100%;
  margin-bottom: 30px;
}
.zhiwuCheck {
  display: block;
  margin-top: 10px;
}
.zhiwuChecks {
  display: block;
  margin-left: -30px;
}
.zhuyaozhiwu {
  margin-top: 10px;
  background-color: #ffffff;
  padding: 3px 8px;
  // display: inline-block;
}
.ciyaozhiwu {
  background-color: #ffffff;
  padding: 5px 10px;
  // display: inline-block;
  margin-top: 10px;
}
.zhiwuradio {
  margin-top: 5px;
  margin-right: 10px;
}
.zhiwuDel {
  margin-inline-start: 10px;
  color: #1d6ced;
  cursor: pointer;
  float: right;
}
.lastspan {
  display: flex;
}
.ddv1 {
  flex: 1;
}
.inputPsd {
  -webkit-text-security: disc;
}
/deep/ .el-form-item__error {
  display: block;
}
.dept-comp {
  /deep/ .el-form-item__error {
    display: none;
  }
  /deep/ .el-form-item__content {
    /deep/ .el-input {
      width: 202px;
    }
  }
}

/deep/ .el-form-item__content {
  /deep/ .el-input {
    width: 420px;
  }
}
.member {
  display: inline-block;
  margin: 10px 0 0 10px;
}
.checkBoxClass {
  // float: left;
  width: 650px;
  height: 100%;
}
.checkBoxCla {
  width: 25%;
  margin: 10px 0 10px 20px;
}
.boxClass {
  margin-left: 10px;
}
.aaa {
  display: inline-block;
  padding-right: 12px;
  font-size: 14px;
  color: #666666;
  margin-bottom: 15px;
}
.bbb {
  display: inline-block;
  padding-right: 12px;
  font-size: 14px;
  color: #666666;
}
.postBox {
  width: 100%;
}
.ship-tree {
  /deep/.el-tree-node__content {
    height: auto;
  }
  /deep/.el-radio-group {
    display: flex;
    flex-direction: column;
    text-align: left;
    & > .el-radio {
      margin: 2px;
    }
  }
}
</style>