laws-sinotruk-client/src/components/PersonnelInfo.vue

<template>
  <div class="person-comp-box">
    <a-steps direction="vertical">
      <a-step v-for="(step, index) in stepsData" :key="step.id" :status="step.nodeName === currentNode ? 'process' : 'wait'"
              :class="{'red-tail': index < currentNodeIndex}">
        <template #icon>
          <div class="step-cus-icon"
               :class="{'step-cus-icon-done': index < currentNodeIndex, 'step-cus-icon-now': step.nodeName === currentNode}">
            <i class="iconfont icon-user" />
          </div>
        </template>
        <!--        流程节点标题-->
        <template #title>
          <a-tooltip>
            <template #title>{{ step.nodeName }}</template>
            <div class="step-title">{{ step.nodeName }}</div>
          </a-tooltip>
        </template>
        <!--        流程节点选人内容-->
        <template #description>
          <div class="personnel-container">
            <div class="personnel-container-title" :class="{'personnel-container-select-title': index === 0}">
              <a-tooltip>
                <template #title>{{ step.nodeRoleName }}</template>
                <div class="personnel-container-title-text">{{ step.nodeRoleName }}</div>
              </a-tooltip>
            </div>
            <div class="personnel-container-content">
              <div class="personnel-container-content-text">
                <template v-if="step.canChoose && index >= currentNodeIndex">
                  <!--                  TODO 数据库设计确定后处理数据抛出格式-->
                  <user-select-by-work-group v-if="step.chooseSource === 'workGroup'" v-model="step.user" :type="step.chooseType" :name-str="step.user_dictText" input-type="textarea"/>
                  <user-select-by-contact v-else-if="step.chooseSource === 'contactManage'" v-model="step.user" :type="step.chooseType" :name-str="step.user_dictText" input-type="textarea"/>
                  <user-selection v-else-if="!['contactManage', 'workGroup'].includes(step.chooseSource)" :type="step.chooseType" v-model="step.user" :name-str="step.user_dictText" input-type="textarea" />
                </template>
                <div class="personnel-container-content-echo-text" v-else>{{ step.userList }}</div>
              </div>
              <a-icon type="clock-circle" theme="filled" v-if="index === currentNodeIndex" class="personnel-container-content-icon" />
              <a-icon type="check"
                      v-if="index < currentNodeIndex"
                      class="personnel-container-content-icon personnel-container-content-icon-now" />
            </div>
          </div>
        </template>
      </a-step>
    </a-steps>
  </div>
</template>

<script>
import '@assets/less/common.less'
import UserSelection from './selection/UserSelection.vue'
import UserSelectByWorkGroup from './selection/UserSelectByWorkGroup'
import UserSelectByContact from './selection/UserSelectByContact'

export default {
  name: 'PersonnelInfo',
  components: { UserSelectByContact, UserSelectByWorkGroup, UserSelection },
  props: {
    // 数据
    data: {
      type: Array,
      required: true,
      default: () => {
        return []
      }
    },
    // 当前节点
    currentNode: {
      type: String,
      required: false,
      default: null
    }
  },
  data () {
    return {
      stepsData: [],
      currentNodeIndex: 0 // 当前节点的位置
    }
  },
  watch: {
    data: {
      handler () {
        this.stepsData = JSON.parse(JSON.stringify(this.data))
        console.log(this.stepsData)
        this.currentNodeIndex = this.stepsData.findIndex(tt => tt.nodeName === this.currentNode)
      },
      deep: true,
      immediate: true
    }
  }
}
</script>

<style scoped lang="less">
.person-comp-box {
  height: 100%;
}

/deep/ .ant-steps-vertical .ant-steps-item-icon {
  margin-right: 0;
}

/deep/ .ant-steps-item-title {
  max-width: 100%;
}

/deep/ .ant-steps-item-content {
  padding: 0 12px;
}

.step-title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 16px;
  font-family: PingFang SC-Regular, PingFang SC, sans-serif;
  color: #1D2129;
  font-weight: 550;
}

.personnel-container {
  &-title {
    height: 36px;
    background: #6A7484;
    border-radius: 8px 8px 0 0;
    padding: 0 16px;

    &-text {
      font-size: 16px;
      font-family: PingFang SC-Regular, PingFang SC, sans-serif;
      color: #FFFFFF;
      line-height: 36px;
    }
  }

  &-select-title {
    background: #9F5258;
  }

  &-content {
    background: #FFFFFF;
    border-radius: 0 0 8px 8px;
    box-shadow: 0 5px 5px rgba(0, 0, 0, 0.1);
    padding: 16px;
    min-height: 52px;
    display: flex;
    align-items: center;

    &-text {
      flex: 1;
      width: 0;
    }

    &-icon {
      margin-left: 16px;
      color: @primary-color;
      font-size: 20px;
    }

    &-icon-now {
      font-size: 10px;
      width: 20px;
      height: 20px;
      background: #FAE6E5;
      border-radius: 10px 10px 10px 10px;
      opacity: 1;
      line-height: 20px;
      text-align: center;
    }

    &-echo-text {
      font-size: 14px;
      font-family: PingFang SC-Regular, PingFang SC, sans-serif;
      font-weight: 400;
      color: #4E5969;
      line-height: 22px;
    }
  }
}

/deep/ .user-organ-wrap .button-box {
  height: 32px;
}

/deep/ .ant-steps-vertical > .ant-steps-item > .ant-steps-item-container > .ant-steps-item-tail {
  left: 14px;
  padding: 31px 0 4px;
}

.step-cus-icon {
  width: 28px;
  height: 28px;
  background: #F2F3F5;
  border-radius: 32px 32px 32px 32px;
  display: flex;
  align-items: center;
  justify-content: center;

  &-done {
    background: rgba(213, 44, 38, 0.08);
    color: @primary-color;
  }

  &-now {
    color: white;
    background: @primary-color;
  }
}

/deep/ .red-tail > .ant-steps-item-container > .ant-steps-item-tail::after {
  background-color: @primary-color;
}
</style>