销售目标审核

package.json

@@ -56,6 +56,7 @@
     "vue-router": "^3.6.4",
     "vue-seamless-scroll": "^1.1.23",
     "vue2-ace-editor": "0.0.15",
+    "vue2-org-tree": "^1.3.6",
     "vuedraggable": "^2.24.3",
     "vuex": "^3.6.2",
     "vuex-persistedstate": "^4.1.0",

src/api/bpm/components/targetManage/index.js

@@ -0,0 +1,12 @@
+import request from '@/utils/request';
+
+
+
+// 获取详情
+export async function getById(id) {
+    const res = await request.get(`/eom/sales_target/getById/${id}`);
+    if (res.data.code == 0) {
+      return res.data.data;
+    }
+    return Promise.reject(new Error(res.data.message));
+  }

src/views/bpm/handleTask/components/supplierManage/submit.vue

@@ -4,11 +4,7 @@
       <el-form-item
         label="审批建议"
         style="margin-bottom: 20px"
-        :rules="{
-          required: true,
-          message: '请输入',
-          trigger: 'blur'
-        }"
+ 
       >
         <el-input
           type="textarea"

src/views/bpm/handleTask/components/targetManage/salesTarget/submit.vue

@@ -0,0 +1,142 @@
+<template>
+  <el-col :span="16" :offset="6">
+    <el-form label-width="100px" ref="formRef" :model="form">
+      <el-form-item
+        label="审批建议"
+        style="margin-bottom: 20px"
+
+      >
+        <el-input
+          type="textarea"
+          v-model="form.reason"
+          placeholder="请输入审批建议"
+        />
+      </el-form-item>
+    </el-form>
+    <div style="margin-left: 10%; margin-bottom: 20px; font-size: 14px">
+      <el-button
+        icon="el-icon-edit-outline"
+        type="success"
+        size="mini"
+        @click="handleAudit(1)"
+        >通过
+      </el-button>
+      <el-button
+        icon="el-icon-circle-close"
+        type="danger"
+        size="mini"
+        @click="handleAudit(0)"
+        >驳回
+      </el-button>
+
+      <el-dropdown
+        @command="(command) => handleCommand(command)"
+        style="margin-left: 30px"
+      >
+        <span class="el-dropdown-link"
+          >更多<i class="el-icon-arrow-down el-icon--right"></i
+        ></span>
+        <el-dropdown-menu slot="dropdown">
+          <el-dropdown-item command="cancel">作废</el-dropdown-item>
+        </el-dropdown-menu>
+      </el-dropdown>
+    </div>
+  </el-col>
+</template>
+
+<script>
+  import { cancel } from '@/api/bpm/components/supplierManage/contact';
+  import { approveTaskWithVariables, rejectTask } from '@/api/bpm/task';
+
+  // 流程实例的详情页，可用于审批
+  export default {
+    name: '',
+    components: {
+      //   Parser
+    },
+    props: {
+      businessId: {
+        default: ''
+      },
+      taskId: {
+        default: ''
+      },
+      id: {
+        default: ''
+      },
+      taskDefinitionKey: {
+        default: ''
+      }
+    },
+    data() {
+      return {
+        form: {
+          technicianId: '',
+          reason: ''
+        },
+      };
+    },
+
+    methods: {
+      /** 处理转办审批人 */
+      handleUpdateAssignee() {
+        this.$emit('handleUpdateAssignee');
+      },
+      /** 退回 */
+      handleBackList() {
+        this.$emit('handleBackList');
+      },
+
+      async handleAudit(status) {
+        await this._approveTaskWithVariables(status);
+      },
+      async _approveTaskWithVariables(status) {
+        let variables = {
+          pass: !!status
+        };
+        let API = !!status ? approveTaskWithVariables : rejectTask;
+        API({
+          id: this.taskId,
+          reason: this.form.reason,
+          variables
+        }).then((res) => {
+          if (res.data.code != '-1') {
+            this.$emit('handleAudit', {
+              status,
+              title: status === 0 ? '驳回' : ''
+            });
+          }
+        });
+      },
+
+
+
+      //更多
+      handleCommand(command) {
+        if (command === 'cancel') {
+          this.$confirm('是否确认作废？', {
+            type: 'warning',
+            cancelButtonText: '取消',
+            confirmButtonText: '确定'
+          })
+            .then(() => {
+              cancel({
+                id: this.taskId,
+                reason: this.form.reason,
+                businessId: this.businessId
+              })
+                .then(() => {
+                  this.$emit('handleClose');
+                })
+                .catch(() => {
+                  this.$message.error('流程作废失败');
+                });
+            })
+            .catch(() => {});
+        }
+      }
+    }
+  };
+</script>
+
+<style lang="scss"></style>

src/views/bpm/handleTask/components/targetManage/salesTarget/viewDialog.vue

@@ -0,0 +1,320 @@
+<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>

vue.config.js

@@ -33,7 +33,7 @@ module.exports = {
       '/api': {
         // target: 'http://124.71.68.31:50001', // 测试环境
         // target: 'http://124.71.68.31:50001',
-        target: 'http://192.168.1.125:18086',
+        target: 'http://192.168.1.105:18086',
         // target: 'http://192.168.1.251:18186',
         changeOrigin: true, // 只有这个值为true的情况下 s才表示开启跨域
         pathRewrite: {