ui-process-h5 2.0.7-beta → 2.1.0-beta

package/src/packages/process/operation/treeNode.vue

@@ -0,0 +1,901 @@
+<template>
+  <div class="treenode" v-if="nodeItems && nodeItems.length">
+    <!-- 多分支 -->
+    <div class="treenode-multi" v-if="!endNode">
+      <div class="treenode-node" style="margin-top: 0">
+        <template v-for="value in nodeItems">
+          <!-- 多选 -->
+          <div
+            v-if="checkType == 'InclusiveGatewayModel' && nodeItems.length > 1"
+            class="treenode-checkbox"
+            :class="
+              checkBoxArr.includes(value.id) ? 'treenode-checkbox-active' : ''
+            "
+            @click="handleCheckBoxClick(value)"
+          >
+            <span>
+              <img
+                class="treenode-checkbox-active-img"
+                v-if="checkBoxArr.includes(value.id)"
+                :src="check"
+              />
+            </span>
+            {{ value.nodeName || value.name }}
+          </div>
+          <!-- 单选 -->
+          <div
+            v-else-if="
+              checkType == 'ExclusiveGatewayModel' && nodeItems.length > 1
+            "
+            class="treenode-radio"
+            :class="radioArr == value.id ? 'treenode-radio-active' : ''"
+            @click="handleRadioClick(value)"
+          >
+            <span />
+            {{ value.nodeName || value.name }}
+          </div>
+        </template>
+      </div>
+
+      <!-- 多选下一级分支 -->
+      <template
+        v-if="
+          checkType == 'InclusiveGatewayModel' &&
+          checkBoxItem &&
+          checkBoxItem.length
+        "
+      >
+        <div class="treenode-node" v-for="value in checkBoxItem">
+          <div v-if="value.childNode && value.childNode.length">
+            <TreeNode
+              :items="value.childNode"
+              :endNode="value.childNode.length == 1"
+              :nodeType="nodeType"
+              :param="param"
+              :checkType="value.type"
+              @onMultiNode="onMultiNode"
+              @onVars="onVars"
+            />
+          </div>
+          <div v-else class="personselect">
+            <div class="personselect-name">
+              {{ value.nodeName || value.name }}
+            </div>
+            <div class="items-person">
+              <template
+                v-if="
+                  value.humanPerformerName !== '固定账户' &&
+                  value.humanPerformerName !== '与流程申请人相关'
+                "
+              >
+                <div
+                  class="items-person-set"
+                  @click.stop="handleOpenPopup(value)"
+                >
+                  设置
+                </div>
+              </template>
+              <div
+                class="items-person-name"
+                v-if="
+                  value.humanPerformerName !== '固定账户' &&
+                  value.humanPerformerName !== '与流程申请人相关'
+                "
+              >
+                {{ partNode[value.id] ? partNode[value.id].join(",") : "" }}
+              </div>
+              <div
+                class="items-person-name"
+                v-else-if="value.routeTxt && value.routeTxt.userNames"
+              >
+                {{ value.routeTxt.userNames }}
+              </div>
+            </div>
+          </div>
+        </div>
+      </template>
+
+      <template
+        v-if="
+          checkType == 'ExclusiveGatewayModel' && radioItem && radioItem.length
+        "
+      >
+        <div class="treenode-node" v-for="value in radioItem">
+          <div v-if="value.childNode && value.childNode.length">
+            <TreeNode
+              :items="value.childNode"
+              :endNode="value.childNode.length == 1"
+              :nodeType="nodeType"
+              :param="param"
+              :checkType="value.type"
+              @onMultiNode="onMultiNode"
+              @onVars="onVars"
+            />
+          </div>
+          <div v-else class="personselect">
+            <div class="personselect-name">
+              {{ value.nodeName || value.name }}
+            </div>
+            <div class="items-person">
+              <template
+                v-if="
+                  value.humanPerformerName !== '固定账户' &&
+                  value.humanPerformerName !== '与流程申请人相关'
+                "
+              >
+                <div
+                  class="items-person-set"
+                  @click.stop="handleOpenPopup(value)"
+                >
+                  设置
+                </div>
+              </template>
+              <div
+                class="items-person-name"
+                v-if="
+                  value.humanPerformerName !== '固定账户' &&
+                  value.humanPerformerName !== '与流程申请人相关'
+                "
+              >
+                {{ partNode[value.id] ? partNode[value.id].join(",") : "" }}
+              </div>
+              <div
+                class="items-person-name"
+                v-else-if="value.routeTxt && value.routeTxt.userNames"
+              >
+                {{ value.routeTxt.userNames }}
+              </div>
+            </div>
+          </div>
+        </div>
+      </template>
+    </div>
+    <!-- 单分支 -->
+    <div class="treenode-single" v-if="endNode">
+      <div class="treenode-single-items" v-for="value in nodeItems">
+        <div class="personselect">
+          <div class="personselect-name">
+            {{ value.nodeName || value.name }}
+          </div>
+          <div class="items-person" v-if="value.type !== 'EndEventModel'">
+            <template
+              v-if="
+                value.humanPerformerName !== '固定账户' &&
+                value.humanPerformerName !== '与流程申请人相关'
+              "
+            >
+              <div
+                class="items-person-set"
+                @click.stop="handleOpenPopup(value)"
+              >
+                设置
+              </div>
+            </template>
+            <div class="items-person-name" v-if="personMakeList[value.id]">
+              {{ personMakeList[value.id] }}
+            </div>
+
+            <div
+              class="items-person-name"
+              v-else-if="
+                value.humanPerformerName !== '固定账户' &&
+                value.humanPerformerName !== '与流程申请人相关'
+              "
+            >
+              {{ partNode[value.id] ? partNode[value.id].join(",") : "" }}
+            </div>
+            <div
+              class="items-person-name"
+              v-else-if="value.routeTxt && value.routeTxt.userNames"
+            >
+              {{ value.routeTxt.userNames }}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- 选人 -->
+    <TopPopup
+      v-bind:visible="visible"
+      v-on:update:visible="(val) => (visible = val)"
+      ref="TopPopup"
+      titleText="选人"
+      :isDrawer="true"
+    >
+      <departPerson
+        :isTitle="false"
+        v-if="visible"
+        v-bind="entity"
+        @callback="handleCallback"
+      >
+      </departPerson>
+    </TopPopup>
+    <!-- Tips -->
+    <TopTips
+      ref="topTips"
+      :text="textTips"
+      :statusTips="statusTips"
+      :type="typeTips"
+    />
+  </div>
+</template>
+<script>
+import TopPopup from "../../popup/index.vue";
+import success from "@/assets/status/success.png";
+import { departPerson } from "checked-pick-app";
+import TopTips from "../../tip/index.vue";
+import "checked-pick-app/style.css";
+
+export default {
+  name: "TreeNode",
+  components: {
+    TopPopup,
+    TopTips,
+    departPerson,
+  },
+  props: {
+    // 传入节点数据
+    items: {
+      type: Array,
+      default: () => [],
+    },
+    // end节点
+    endNode: {
+      type: Boolean,
+      default: false,
+    },
+    // 当前类型
+    nodeType: {
+      type: String,
+      default: "outing", // | nexting
+    },
+    // 通用参数
+    param: {
+      type: Object,
+      default: () => {},
+    },
+    // 单选,多选
+    checkType: {
+      type: String,
+      default: "", // | nexting
+    },
+  },
+  data() {
+    return {
+      // 传入节点
+      nodeItems: [],
+      // 弹窗
+      visible: false,
+      // 多选选中,
+      checkBoxArr: [],
+      // 多选选中对象
+      checkBoxItem: [],
+      //单选选中
+      radioArr: "",
+      // 单选选中对象
+      radioItem: [],
+      partObjId: "",
+      entity: {
+        source: "0",
+        type: this.param.isCheckType || "0",
+        orgType: this.param.isOrgType || [0],
+        request: this.param.request, //'http://59.53.91.231:2100' 0002
+        codeType: this.param.isCodeType || [3], // 可选类型 1-主体 2-部门 3-人员
+        multiple: true, // 是否多选
+      },
+      // 选中人员数组
+      multiNodeParticipant: {},
+      partNode: {},
+
+      /* tips 相关参数 */
+      textTips: "",
+      statusTips: false,
+      typeTips: "success",
+
+      gateVars: {},
+
+      /* 子集 */
+      onMultiNodeData: {},
+      onVarsData: {},
+
+      // 固定账户id存储:[]
+      personMake: [],
+      personMakeList: {},
+    };
+  },
+  watch: {
+    items: {
+      handler(val, vals) {
+        if (val && val.length) {
+          console.log("=====item", val);
+          console.log("=====checkType", this.checkType);
+
+          this.multiNodeParticipant = {};
+          this.partNode = {};
+          this.gateVars = {};
+
+          // this.handleNode(val);
+
+          this.$emit("onMultiNode", this.multiNodeParticipant);
+          this.$emit("onVars", this.gateVars);
+
+          // console.log("子集树:", val);
+
+          if (this.nodeType == "outing") {
+            this.nodeItems = JSON.parse(JSON.stringify(val));
+          } else if (this.nodeType == "nexting") {
+            // this.nodeItems = JSON.parse(JSON.stringify(val));
+            // this.nodeItems = JSON.parse(JSON.stringify(val));
+            val.forEach((v) => {
+              if (
+                v.userTaskModelDTO.participantList &&
+                v.userTaskModelDTO.participantList.length
+              ) {
+                v.userTaskModelDTO.participantList.map((value) => {
+                  /* */
+                  if (!this.multiNodeParticipant[v.id]) {
+                    this.multiNodeParticipant[v.id] = [];
+                  }
+                  if (!this.partNode[v.id]) {
+                    this.partNode[v.id] = [];
+                  }
+
+                  if (!this.multiNodeParticipant[v.id].includes(value.id)) {
+                    this.multiNodeParticipant[v.id].push(value.id);
+                  }
+
+                  if (!this.partNode[v.id].includes(value.name)) {
+                    this.partNode[v.id].push(value.name);
+                  }
+                });
+              }
+              if (
+                v.userTaskModelDTO.humanPerformer.name == "固定账户" ||
+                v.userTaskModelDTO.humanPerformer.name == "与流程申请人相关"
+              ) {
+                this.personMake.push(v.id);
+              }
+
+              if (this.personMake && this.personMake.length) {
+                this.param.request
+                  .post(
+                    `aws/repository/getParticipantsOfPerformerNames?taskInstId=${this.param.taskInstId}`,
+                    {
+                      userTaskDefIds: this.personMake,
+                    }
+                  )
+                  .then((res) => {
+                    if (res.code == 200) {
+                      this.personMakeList = res.data;
+                    }
+                  });
+              }
+
+              this.nodeItems = JSON.parse(JSON.stringify(val));
+            });
+          }
+
+          if (this.checkType == "ExclusiveGatewayModel" && val.length == 1) {
+            this.handleRadioClick(val[0]);
+          }
+        }
+      },
+      immediate: true,
+      deep: true,
+    },
+  },
+  computed: {
+    check() {
+      return success;
+    },
+  },
+  mounted() {},
+  methods: {
+    // 清空数据
+    clear() {
+      this.radioArr = "";
+      this.radioItem = [];
+      this.checkBoxArr = [];
+      this.checkBoxItem = [];
+      this.multiNodeParticipant = {};
+      this.partNode = {};
+      this.gateVars = {};
+    },
+
+    // 校验当前类型
+    isOption(humanPerformer) {
+      return (
+        humanPerformer == "任意指定" ||
+        humanPerformer == "固定部门" ||
+        humanPerformer == "固定单位" ||
+        humanPerformer == "与流程申请人所在组织结构的位置相关" ||
+        humanPerformer == "固定群组"
+      );
+    },
+    // 选人数据回调
+    handleCallback(res) {
+      this.visible = false;
+      this.multiNodeParticipant[this.partObjId] = [];
+      this.partNode[this.partObjId] = [];
+      let arr;
+
+      res.map((v, i) => {
+        this.multiNodeParticipant[this.partObjId].push(v.uid);
+        this.partNode[this.partObjId].push(v.name);
+      });
+
+      if (this.onMultiNodeData) {
+        this.multiNodeParticipant = {
+          ...this.multiNodeParticipant,
+          ...this.onMultiNodeData,
+        };
+      }
+
+      this.$emit("onMultiNode", this.multiNodeParticipant);
+    },
+    // 单选交互
+    handleRadioClick(val) {
+      console.log("=====val", val);
+      console.log("=====checkType", this.checkType);
+      if (val) {
+        this.multiNodeParticipant = {};
+        this.gateVars = {};
+        this.$emit("onMultiNode", this.multiNodeParticipant);
+        if (
+          val.incomingConditionItemList.length > 0 &&
+          val.incomingConditionItemList[0].itemName &&
+          val.incomingConditionItemList[0].compareValue
+        ) {
+          this.gateVars[val.incomingConditionItemList[0].itemName] =
+            val.incomingConditionItemList[0].compareValue;
+        }
+        this.radioArr = val.id;
+        this.radioItem = [val];
+
+        // console.log("选中单选", val);
+        this.handleNode(val);
+        this.$emit("onVars", this.gateVars);
+      }
+    },
+    // 多选交互
+    handleCheckBoxClick(val) {
+      if (val) {
+        if (this.checkBoxArr.includes(val.id)) {
+          console.log('zhhchoval =====',val);
+          if (
+            val.incomingConditionItemList.length > 0 &&
+            val.incomingConditionItemList[0].itemName &&
+            val.incomingConditionItemList[0].compareValue
+          ) {
+            delete this.gateVars[val.incomingConditionItemList[0].itemName]
+          }
+          delete this.multiNodeParticipant[val.id];
+          this.checkBoxItem.splice(this.checkBoxArr.indexOf(val.id), 1);
+          this.checkBoxArr.splice(this.checkBoxArr.indexOf(val.id), 1);
+        } else {
+          if (
+            val.incomingConditionItemList.length > 0 &&
+            val.incomingConditionItemList[0].itemName &&
+            val.incomingConditionItemList[0].compareValue
+          ) {
+            this.gateVars[val.incomingConditionItemList[0].itemName] =
+              val.incomingConditionItemList[0].compareValue;
+          }
+          this.checkBoxItem.push(val);
+          this.checkBoxArr.push(val.id);
+        }
+        this.handleNode(val);
+        this.$emit("onVars", this.gateVars);
+      }
+    },
+
+    // 通用交互处理(单一处理存在预设置人员)
+    handleNode(val) {
+      console.log("val======", val);
+      // return;
+      let childArr =
+        val.childNode && val.childNode.length
+          ? val.childNode
+          : val && val.length
+          ? val
+          : [val];
+      console.log("childArr======", childArr);
+      console.log("checkBoxItem======", this.checkBoxItem);
+
+      // if (val.incomingConditionItemList.length>0&&
+      //   val.incomingConditionItemList[0].itemName &&
+      //   val.incomingConditionItemList[0].compareValue
+      // ) {
+      //   if (this.gateVars[val.incomingConditionItemList[0].itemName]) {
+      //     delete this.gateVars[val.incomingConditionItemList[0].itemName];
+      //   } else {
+      //     this.gateVars[val.incomingConditionItemList[0].itemName] =
+      //       val.incomingConditionItemList[0].compareValue;
+      //   }
+      // }
+      // let checkBoxItem = {};
+      // console.log('gateVars======',this.gateVars);
+      // this.checkBoxItem.map(item=>{
+      //   checkBoxItem[item.incomingConditionItemList[0]['itemName']] = item.incomingConditionItemList[0]['compareValue']
+      // })
+
+      if (childArr && childArr.length) {
+        childArr.forEach((v, i) => {
+          if (v.participantList && v.participantList.length) {
+            v.participantList.forEach((value, index) => {
+              if (!this.multiNodeParticipant[v.id]) {
+                this.multiNodeParticipant[v.id] = [];
+              }
+              if (!this.partNode[v.id]) {
+                this.partNode[v.id] = [];
+              }
+
+              if (!this.multiNodeParticipant[v.id].includes(value.id)) {
+                this.multiNodeParticipant[v.id].push(value.id);
+              }
+
+              if (!this.partNode[v.id].includes(value.name)) {
+                this.partNode[v.id].push(value.name);
+              }
+            });
+          } else if (v.id && v.humanPerformerName == "固定人员") {
+            this.param.request
+              .post(
+                `/aws/repository/getParticipantsOfPerformerNames?taskInstId=${this.param.taskInstId}`,
+                { userTaskDefIds: [v.id] }
+              )
+              .then((res) => {
+                if (res.code == 200) {
+                  this.partNode[v.id] = {};
+                  this.partNode[v.id] = res.data[v.id].split(";");
+                }
+              });
+          }
+
+          // vars判断(兼容处理)
+          if (this.nodeType == "outing") {
+            // if (
+            //   v.incomingConditionItemList &&
+            //   v.incomingConditionItemList.length
+            // ) {
+            //   if (val && val.length) {
+            //     this.gateVars[val[0].incomingConditionItemList[0].itemName] =
+            //       val[0].incomingConditionItemList[0].compareValue;
+            //   } else {
+            //     this.gateVars[val.incomingConditionItemList[0].itemName] =
+            //       val.incomingConditionItemList[0].compareValue;
+            //   }
+            // } else if (
+            //   v.incomingConditionItemList[0].itemName &&
+            //   v.incomingConditionItemList[0].compareValue
+            // ) {
+            //   // this.gateVars[v.incomingConditionItemList[0].itemName] =
+            //   //   v.incomingConditionItemList[0].compareValue;
+            // }
+
+            if (this.onVarsData) {
+              this.gateVars = {
+                ...this.gateVars,
+                ...this.onVarsData,
+              };
+            }
+            this.$emit("onVars", this.gateVars);
+          }
+        });
+      }
+    },
+
+    // 开启选人弹窗,根据类型开启
+    handleOpenPopup(item) {
+      this.visible = true;
+      this.partObjId = item.id;
+
+      console.log("item======", item);
+      if (this.nodeType == "nexting") {
+        item = {
+          ...item,
+          ...item.userTaskModelDTO,
+        };
+      } else if (this.nodeType == "outing") {
+        item = {
+          ...item,
+          humanPerformer: {
+            name: item.humanPerformerName,
+          },
+        };
+      } else {
+        this.handleTips("加载失败,请刷新", true, "error");
+      }
+      if (
+        item.humanPerformer.name == "固定单位" ||
+        item.humanPerformerName == "固定单位"
+      ) {
+        let subjectName;
+        let checkedArray = [];
+        item.routeTxt.companyIds.map((v, i) => {
+          subjectName = v.name;
+        });
+
+        if (
+          this.multiNodeParticipant[item.id] &&
+          this.multiNodeParticipant[item.id].length
+        ) {
+          this.multiNodeParticipant[item.id].map((v, i) => {
+            checkedArray.push({
+              type: 3,
+              uid: v,
+            });
+          });
+        }
+
+        this.entity = {
+          source: "1",
+          type: this.param.isCheckType || "0",
+          orgType: this.param.isOrgType || [0],
+          request: this.param.request,
+          codeType: this.param.isCodeType || [3],
+          multiple: item.loopCardinality != 1,
+          maxMultiple: item.loopCardinality > 0 ? item.loopCardinality : 0,
+          subjectName: subjectName,
+          checkedArray: checkedArray,
+        };
+      } else if (
+        item.humanPerformer.name == "固定部门" ||
+        item.humanPerformerName == "固定部门"
+      ) {
+        let deptCode;
+        let deptCodeArray = [];
+        let checkedArray = [];
+        item.routeTxt.departmentIds.forEach((v, i) => {
+          if (item.routeTxt.departmentIds.length > 1) {
+            deptCodeArray.push(v.rangeId);
+            // deptCode = v.rangeId;
+          } else {
+            deptCode = v.rangeId;
+          }
+        });
+
+        if (
+          this.multiNodeParticipant[item.id] &&
+          this.multiNodeParticipant[item.id].length
+        ) {
+          this.multiNodeParticipant[item.id].forEach((v, i) => {
+            checkedArray.push({
+              type: 3,
+              uid: v,
+              deptId: deptCode,
+            });
+          });
+        }
+        if (item.routeTxt.departmentIds.length > 1) {
+          this.entity = {
+            source: "1",
+            type: this.param.isCheckType || "0",
+            orgType: this.param.isOrgType || [0],
+            request: this.param.request,
+            codeType: this.param.isCodeType || [3],
+            multiple: item.loopCardinality != 1,
+            maxMultiple: item.loopCardinality > 0 ? item.loopCardinality : 0,
+            deptCodeArray: deptCodeArray,
+            // deptCode: deptCode,
+            checkedArray: checkedArray,
+          };
+        } else {
+          this.entity = {
+            source: "1",
+            type: this.param.isCheckType || "0",
+            orgType: this.param.isOrgType || [0],
+            request: this.param.request,
+            codeType: this.param.isCodeType || [3],
+            multiple: item.loopCardinality != 1,
+            maxMultiple: item.loopCardinality > 0 ? item.loopCardinality : 0,
+            deptCode: deptCode,
+            checkedArray: checkedArray,
+          };
+        }
+      } else {
+        let checkedArray = [];
+
+        if (
+          this.multiNodeParticipant[item.id] &&
+          this.multiNodeParticipant[item.id].length
+        ) {
+          this.multiNodeParticipant[item.id].map((v, i) => {
+            checkedArray.push({
+              type: 3,
+              uid: v,
+            });
+          });
+        }
+
+        this.entity = {
+          source: "1",
+          type: this.param.isCheckType || "0",
+          orgType: this.param.isOrgType || [0],
+          request: this.param.request,
+          codeType: this.param.isCodeType || [3],
+          multiple: item.loopCardinality != 1,
+          maxMultiple: item.loopCardinality > 0 ? item.loopCardinality : 0,
+          checkedArray: checkedArray,
+          // deptCodeArray:["d603dfca436aa2c8e13a683389e2ca23","7faf6dcaf4fbc41eebc85d5a41035df5"]
+        };
+      }
+    },
+    handleTips(text, status, type) {
+      this.textTips = text;
+      this.statusTips = status;
+      this.typeTips = type;
+      this.$refs.topTips.handleOpen();
+    },
+    // 子集元素存储
+    onMultiNode(val) {
+      if (val) {
+        // console.log("子集展示", val);
+        this.onMultiNodeData = val;
+        this.multiNode = {
+          ...this.multiNode,
+          ...this.onMultiNodeData,
+        };
+
+        this.$emit("onMultiNode", this.multiNode);
+      }
+    },
+    onVars(val) {
+      if (val) {
+        this.onVarsData = val;
+
+        this.getVars = {
+          ...this.gateVars,
+          ...this.onVarsData,
+        };
+
+        this.$emit("onVars", this.getVars);
+      }
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.treenode {
+  &-multi {
+    border-radius: 4px;
+    background: #f8f8f8;
+    padding: 10px;
+    /*   &-items {
+            margin-top: 20px;
+            display: inline-block; */
+
+    .treenode-checkbox,
+    .treenode-radio {
+      display: inline-flex;
+      margin-right: 10px;
+    }
+
+    .treenode-checkbox:last-child,
+    .treenode-radio:last-child {
+      margin-left: 0;
+    }
+  }
+
+  &-single {
+    padding: 10px 0;
+  }
+
+  &-node {
+    margin-top: 20px;
+  }
+
+  .personselect {
+    /* display: flex;
+        align-items: center; */
+    &-name {
+      font-weight: 400;
+      font-size: 14px;
+      text-align: left;
+      color: #333;
+      width: 50%;
+      display: inline-block;
+      vertical-align: top;
+    }
+  }
+
+  .items-person {
+    width: 50%;
+    display: inline-flex;
+    vertical-align: top;
+    flex-direction: row-reverse;
+    &-name {
+      font-weight: 400;
+      font-size: 14px;
+      color: #333;
+    }
+
+    &-set,
+    &-setdisible {
+      font-weight: 400;
+      font-size: 14px;
+      color: #1389ff;
+      margin-left: 10px;
+      min-width: 30px;
+    }
+    &-setdisible {
+      opacity: 0.5;
+    }
+  }
+  /*  } */
+
+  &-items:first-child {
+    margin-top: 0;
+  }
+
+  &-radio,
+  &-checkbox {
+    display: inline-flex;
+    align-items: center;
+    font-weight: 400;
+    font-size: 14px;
+    color: #333;
+    padding: 6px 0;
+  }
+
+  &-radio {
+    span {
+      display: inline-block;
+      border: 1px solid #d1d1d1;
+      border-radius: 50%;
+      width: 16px;
+      height: 16px;
+      box-sizing: border-box;
+      background-color: #fff;
+      margin-right: 5px;
+      position: relative;
+    }
+
+    &-active {
+      span {
+        border-color: rgb(0, 122, 255);
+        &::after {
+          content: "";
+          background-color: rgb(0, 122, 255);
+          border-color: rgb(0, 122, 255);
+          width: 12px;
+          height: 12px;
+          position: absolute;
+          border-radius: 50%;
+          left: 1px;
+          top: 1px;
+        }
+      }
+    }
+  }
+  &-checkbox {
+    span {
+      display: inline-block;
+      border: 1px solid #d1d1d1;
+      border-radius: 3px;
+      width: 16px;
+      height: 16px;
+      box-sizing: border-box;
+      background-color: #fff;
+      margin-right: 8px;
+    }
+
+    &-active {
+      span {
+        border-color: rgb(0, 122, 255);
+        background-color: rgb(0, 122, 255);
+      }
+      &-img {
+        width: 80%;
+        height: 80%;
+        transform: translate(12%, -15%);
+      }
+    }
+  }
+}
+
+::v-deep .departPerson-main {
+  width: 100%;
+  height: 100%;
+}
+</style>