kd-aiot-frontend-wt/src/views/bpm/handleTask/components/targetManage/salesTarget/viewDialog.vue

<template>
  <div>
    <el-form
      ref="form"
      class="el-form-box"
      :model="form"
      label-width="120px"
      :disabled="true"
    >
      <el-row :gutter="15">
        <el-col :span="4">
          <headerTitle title="基本信息"></headerTitle>
          <el-row>
            <el-col :span="24">
              <el-form-item label="编码" prop="code">
                <el-input v-model="form.code" disabled></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="名称" prop="name">
                <el-input v-model="form.name"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="类型" prop="type">
                <el-select
                  v-model="form.type"
                  clearable
                  style="width: 100%"
                  @change="typeChange"
                >
                  <el-option label="年度" :value="1"></el-option>
                  <el-option label="季度" :value="2"></el-option>
                  <el-option label="月度" :value="3"></el-option>
                  <!-- <el-option label="周" :value="2"></el-option> -->
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="目标对象" prop="assessmentObject">
                <el-select
                  v-model="form.assessmentObject"
                  clearable
                  style="width: 100%"
                >
                  <el-option label="公司" :value="1"></el-option>
                  <el-option label="部门" :value="2"></el-option>
                  <el-option label="个人" :value="3"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col
              :span="24"
              v-if="form.assessmentObject == 2 || form.assessmentObject == 3"
            >
              <el-form-item label="部门" prop="groupId">
                <el-input v-model="form.departmentName" disabled></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24" v-if="form.assessmentObject == 3">
              <el-form-item label="姓名" prop="userId">
                <el-input v-model="form.userName" disabled></el-input>
              </el-form-item>
            </el-col>

            <el-col :span="24">
              <el-form-item label="统计财年" prop="assessmentDimensions">
                <el-date-picker
                  type="years"
                  style="width: 100%"
                  v-model="form.assessmentDimensions"
                  placeholder="选择一个或多个年"
                  format="yyyy"
                  value-format="yyyy"
                >
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="起始月份" prop="assessmentCycle">
                <el-select
                  v-model="form.assessmentCycle"
                  clearable
                  style="width: 100%"
                >
                  <el-option label="1月" :value="1"></el-option>
                  <el-option label="2月" :value="2"></el-option>
                  <el-option label="3月" :value="3"></el-option>
                  <el-option label="4月" :value="4"></el-option>
                  <el-option label="5月" :value="5"></el-option>
                  <el-option label="6月" :value="6"></el-option>
                  <el-option label="7月" :value="7"></el-option>
                  <el-option label="8月" :value="8"></el-option>
                  <el-option label="9月" :value="9"></el-option>
                  <el-option label="10月" :value="10"></el-option>
                  <el-option label="11月" :value="11"></el-option>
                  <el-option label="12月" :value="12"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="负责人" prop="superintendentName">
                <el-input v-model="form.superintendentName"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="可见人" prop="superintendentName">
                <el-input v-model="participantsName"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="备注" prop="describes">
                <el-input v-model="form.describes" type="textarea"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="20">
          <headerTitle title="目标"></headerTitle>
          <vue2-org-tree
            name="test"
            :data="treeData"
            :collapsable="true"
            :render-content="renderContent"
            horizontal="horizontal"
            @on-expand="onExpand"
            ref="testRef"
          />
        </el-col> </el-row
    ></el-form>
  </div>
</template>
<script>
  import dictMixins from '@/mixins/dictMixins';
  import { getById } from '@/api/bpm/components/targetManage/index.js';
  import Vue2OrgTree from 'vue2-org-tree';
  export default {
    props: {
      businessId: {
        type: String,
        default: ''
      }
    },
    mixins: [dictMixins],
    computed: {},
    components:{
      Vue2OrgTree
    },
    data() {
      return {
        form: {
          name: '', //名称
          targetDefinitionList: [], //目标规则
          assessmentObject: '', // //考核对象 1公司 2部门 3个人
          assessmentDimensions: [], //统计财年
          assessmentCycle: '', //起始月份
          departmentId: '', //部门id
          departmentName: '', //部门名称
          userId: '', //用户id
          userName: '', //用户名称
          superintendentId: '', //负责人id
          superintendentName: '', //负责人名称
          participantsId: '',
          participantsName: '',
          status: '',
          type: 1,
          describes: ''
        },
        title: '',
        unitOption: [],
        treeData: { label: '销售目标', children: [], expand: true },
        fullscreen: false,
        targetDefinitionList: []
      };
    },
    mounted() {
      this.init();
    },
    created() {},
    methods: {
      renderContent(h, data) {
        let ratio = +((data.number / data.value) * 100 || 0).toFixed(1);
        return (
          <div>
            <div class={!data.type ? 'treeItem1 treeItem' : 'treeItem'}>
              <span class="label">{data.label}</span>
              {data.type && <span class="tree_value">{data.value || 0}</span>}
              {data.type && <span class="tree_unit">{data.unit}</span>}
            </div>
            {(data.type &&
              data.value &&
              h('el-progress', {
                attrs: {
                  percentage: ratio
                }
              })) ||
              ''}
          </div>
        );
      },

      //初始化
      async init() {
        this.form = await getById(this.businessId);
        this.form.assessmentDimensions =
          this.form.assessmentDimensions.split(',');
        this.treeData.children = this.form.targetDefinitionList;
        if (this.form.discernibleUserList) {
          this.participantsName = this.form.discernibleUserList
            .map((item) => item.name)
            .toString();
        }
      },

      onExpand(e, data) {
        if ('expand' in data) {
          data.expand = !data.expand;
          if (!data.expand && data.children) {
            this.collapse(data.children);
          }
        } else {
          this.$set(data, 'expand', true);
        }
      },
      collapse(list) {
        var _this = this;
        list.forEach(function (child) {
          if (child.expand) {
            child.expand = false;
          }
          child.children && _this.collapse(child.children);
        });
      }
    }
  };
</script>
<style scoped lang="scss">
  @import '~vue2-org-tree/dist/style.css';
  :deep(.treeItem1) {
    padding: 15px 15px !important;
    color: #3942a7;
    background: url(@/assets/main_item.png);
    background-size: cover;
    .label {
      font-size: 14px;
      font-weight: bold;
    }
  }
  :deep(.org-tree-node-btn) {
    background-color: #bb90f5;
  }
  :deep(.treeItem) {
    display: flex;
    justify-content: center;
    padding: 6px 15px;
    align-items: center;
    .label {
      display: flex;
      // maxwidth: 100%;
      min-width: 80px;
      justify-content: center;
      align-items: center;
    }
    .ratioInput {
      width: 77px;
    }
    .valueInput,
    .tree_value {
      width: 105px;
    }
    .tree_value {
      background: #f1f1f1;
      height: 24px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .tree_unit {
      margin-left: 10px;
    }
    .el-select {
      width: 80px;
    }
    .el-input {
      width: auto;
    }
    input {
      margin-left: 5px;
    }
    .el-input__suffix {
      line-height: 36px;
    }
  }

  :deep(.long-dialog-form .el-dialog__body) {
    max-height: calc(100vh - 192px);
    min-height: 700px;
  }
  :deep(.org-tree-node-label .org-tree-node-label-inner) {
    padding: 0;
  }
  :deep(
      .horizontal .org-tree-node.collapsed,
      .horizontal .org-tree-node.is-leaf
    ) {
    padding-bottom: 8px;
    padding-top: 8px;
  }
  :deep(.el-progress) {
    width: 100%;
    padding: 3px;
    display: flex;
    align-items: center;
    .el-progress__text {
      color: #1890ff !important;
      width: 41px;
      text-align: left;
    }
  }
</style>