CZC/operationSupport/src/views/workOrders/employeeServices/index.vue

<template>
  <div class="content main levelSetting">

    <div class="search_bottom_tab">
      <div
        class="tab_list search"
        style="line-height: 60px;"
      >
        <el-radio-group
          v-model="chargeStatus"
          @change="changeRadio"
          class="zz-tab-button"
        >
          <el-radio-button label="1">员工服务统计</el-radio-button>
          <el-radio-button label="2">统计参数设置</el-radio-button>
        </el-radio-group>

        <el-input
          v-show="chargeStatus == 1 ? true : false"
          clearable
          placeholder="输入员工姓名/手机号"
          class="search-input"
          v-trim
          v-model="mixins_query.name"
        ></el-input>

        <el-date-picker
          v-show="chargeStatus == 1 ? true : false"
          type="date"
          placeholder="选择日期"
          value-format="yyyy-MM-dd"
          v-model="pickerTime"
          :editable="false"
          @change="timeToggle"
        >
        </el-date-picker>

        <el-button
          v-show="chargeStatus == 1 ? true : false"
          class="search-btn"
          type="primary"
          @click="mixins_search()"
          icon="el-icon-search"
        >查询</el-button>

      </div>
      <zz-table
        v-if="chargeStatus == 1 ? true : false"
        :settings="{  showIndex: true, stripe: true  }"
        :cols="cols"
        :data="mixins_list"
        :pageset="mixins_pageset"
        @page-change="pageChange"
        :selectable="selectable"
        @selection-change="selectionChange"
      >
        <template
          slot-scope="scope"
          slot="opt"
        >
          <el-tooltip
            class="item"
            effect="light"
            placement="bottom"
            content="查看"
          >
            <i
              class="zoniot_font zoniot-icon-xiangqing"
              @click="lookDetails(scope.row)"
            ></i>
          </el-tooltip>

        </template>

      </zz-table>

    </div>

    <div
      class="organ-tree"
      v-if="chargeStatus == 1 ? false : true"
    >
      <el-input
        v-model="filterText"
        placeholder="请输入机构名称"
        suffix-icon="el-icon-search"
      ></el-input>
      <div class="tree-style-box">
        <el-scrollbar style="height: 100%">
          <el-tree
            class="tree-style"
            :data="organList"
            ref="tree"
            node-key="id"
            :highlight-current="true"
            :props="defaultProps"
            :expand-on-click-node="false"
            @node-click="treeClick"
            :default-expand-all="false"
            :filter-node-method="filterNode"
          >
            <span
              class="ellipsis"
              slot-scope="{ node }"
            >
              <span :title="node.label">{{ node.label }}</span>
            </span>
          </el-tree>
        </el-scrollbar>
      </div>
    </div>

    <div
      class="content-right"
      v-show="chargeStatus == 1 ? false : true"
    >
      <el-form
        ref="form"
        :model="formData"
      >
        <el-form-item>
          <div class="item-title">奖励基数：运维服务费 *
            <el-input
              v-model="formData.cardinality"
              oninput="value=value.replace(/[^0-9.]/g,'')"
            ></el-input>
          </div>
        </el-form-item>
        <div class="formContent-item_title">员工服务费</div>
        <el-form-item>
          <div class="item-title">评价等级（五星）：奖励基数 *
            <el-input
              v-model="formData.fiveStar"
              oninput="value=value.replace(/[^0-9.]/g,'')"
            ></el-input>
          </div>
        </el-form-item>

        <el-form-item>
          <div class="item-title">评价等级（四星）：奖励基数 *
            <el-input
              v-model="formData.fourStar"
              oninput="value=value.replace(/[^0-9.]/g,'')"
            ></el-input>
          </div>
        </el-form-item>

        <el-form-item>
          <div class="item-title">评价等级（三星）：奖励基数 *
            <el-input
              v-model="formData.threeStar"
              oninput="value=value.replace(/[^0-9.]/g,'')"
            ></el-input>
          </div>
        </el-form-item>

        <el-form-item>
          <div class="item-title">评价等级（二星）：奖励基数 *
            <el-input
              v-model="formData.twoStar"
              oninput="value=value.replace(/[^0-9.]/g,'')"
            ></el-input>
          </div>
        </el-form-item>

        <el-form-item>
          <div class="item-title">评价等级（一星）：奖励基数 *
            <el-input
              v-model="formData.oneStar"
              oninput="value=value.replace(/[^0-9.]/g,'')"
            ></el-input>
          </div>
        </el-form-item>

        <el-form-item>
          <div class="item-title">评价等级（无评价）：奖励基数 *
            <el-input
              v-model="formData.star"
              oninput="value=value.replace(/[^0-9.]/g,'')"
            ></el-input>
          </div>
        </el-form-item>

        <el-form-item>
          <div
            class="item-title"
            style="color:red"
          >注：员工服务费提成=奖励基数*评价等级
          </div>
        </el-form-item>

      </el-form>

      <el-form>
        <el-form-item style="text-align: right; position: absolute; bottom: 0; right: 40px;">
          <el-button
            type="primary"
            @click="submit"
          >保存</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>




<script>
import list from '@utils/list';
export default {
  mixins: [list],
  data () {
    return {
      chargeStatus: 1,
      organList: [],
      currentId: '',
      pickerTime: '',
      defaultProps: {
        children: 'orgs',
        label: 'orgName'
      },
      mixins_post: 'get',
      cols: [
        {
          label: '员工姓名',
          prop: 'username'
        },
        {
          label: '手机号',
          prop: 'phone'
        },
        {
          label: '所属公司',
          prop: 'companyOrgName'
        },
        {
          label: '所属部门',
          prop: 'deptOrgName'
        },
        {
          label: '月份',
          prop: 'month',
          format (val) {
            let res = val.toString();
            return (res).substr(0, 4) + '年' + (res).substr(4, 2) + '月'
          }
        },
        {
          label: '业主报修工单数',
          prop: 'workOrderNum'
        },
        {
          label: '服务费总金额（元）',
          prop: 'amount'
        },
        {
          label: '服务费提成金额（元）',
          prop: 'royalty'
        },
        {
          label: '操作',
          slot: 'opt'
        }
      ],
      formData: {
        companyOrgId: '',
        cardinality: '',
        fiveStar: '',
        fourStar: '',
        threeStar: '',
        twoStar: '',
        oneStar: '',
        star: ''
      }
    }
  },
  methods: {
    changeRadio () {
      if (this.chargeStatus == '1') {

      } else if (this.chargeStatus == '2') {
        this.getOrgTreeList();
      }
    },
    // 获得机构名称
    getOrgTreeList () {
      this.$http.postForm('/czc-user-center/org/getOrgTree', { orgType: 'company', id: '000' }).then(({ status, data, msg }) => {
        if (status === 0 && data) {
          this.organList = data;
          this.$nextTick().then(() => {
            const firstNode = document.querySelector('.el-tree-node');
            firstNode.click();
          });
        }
      });
    },
    filterNode (value, data) {
      if (!value) return true;
      return data.orgName.indexOf(value) !== -1;
    },
    treeClick (e) {
      if (e.id == 0) return;
      this.currentId = e.id;
      this.formData.companyOrgId = e.id;
      this.royaltyConfig();
    },
    timeToggle (e) {
      if (!!e) {
        this.mixins_query.month = e.substr(0, 4) + e.substr(5, 2);
      } else {
        this.mixins_query.month = ''
      }
    },
    lookDetails (row) {
      new Promise((resolve) => {
        this.$store.dispatch('addPopup', {
          url: '/workOrders/employeeServices/details.vue',
          width: '780px',
          height: '500px',
          props: {
            row,
            callback: resolve,
          },
          showConfirmButton: true,
          showCancelButton: true,
          hideStar: true,
          title: '任务详情'
        });
      }).then(() => {
        this.mixins_search();
      });
    },
    submit () {
      this.$http.post('/czc-community/royaltyConfig/save', this.formData).then(({ status, data, msg }) => {
        if (status == 0) {
          this.$message.success(msg);
        } else {
          this.$message.error(msg);
        }
      })
    },
    // /czc-community/royaltyConfig/find
    royaltyConfig () {
      this.$http.get('/czc-community/royaltyConfig/find', { companyOrgId: this.currentId }).then(({ status, data, msg }) => {
        if (status == 0) {
          this.formData.cardinality = data.cardinality;
          this.formData.fiveStar = data.fiveStar;
          this.formData.fourStar = data.fourStar;
          this.formData.threeStar = data.threeStar;
          this.formData.twoStar = data.twoStar;
          this.formData.oneStar = data.oneStar;
          this.formData.star = data.star;
        }
      })
    }
  },
  created () {
    this.mixins_dataUrl = '/czc-community/royalty/page';
    this.mixins_query = {};
    this.mixins_search();

  }
}

</script>



<style lang="scss" scoped>
@import '@assets/css/public-style.scss';
.search_bottom_tab {
    height: 60px;
    // line-height: 60px;
    background: #ffffff;
    border-radius: 4px;
    margin-bottom: 20px;
    padding: 0 20px;
    box-sizing: border-box;
    .tab_list {
        display: inline-block;
        border-bottom: 2px solid transparent;
        cursor: pointer;
        color: #424656;
        &:not(:last-child) {
            margin-right: 40px;
        }
        &.active {
            color: $mainTextColor;
            border-color: $mainTextColor;
        }
    }
}
.search {
    padding: 0 !important;
}
.search {
    .zz-tab-button {
        margin-right: 20px;
    }
    .width120 {
        width: rem(120);
    }
}

.levelSetting {
    height: calc(100% - 80px);
    .organ-tree {
        width: 260px;
        height: 100%;
        background: #ffffff;
        padding: 20px;
        float: left;
        font-size: 14px;
        .tree-style-box {
            margin-top: 20px;
        }
    }
}

.content-right {
    background: white;
    font-size: 12px;
    padding: 20px;
    // height: calc(100% - 100px);
    height: 100%;
    .item-title {
        /deep/ .el-input {
            display: inline-block;
            width: 120px;
            margin: 0 10px;
        }
    }
}
</style>