boss/pages/main/index/wage_settlement.vue

<template>
  <section v-if="detail" id="wage-settlement">
    <section class="left">
      <h3>工资结算</h3>
      <h4>
        【
        <a :href="orderHref">{{detail.job.title_count}}</a>
        】{{detail.time.month}}工资账单
        <el-tag size="small">{{detail.statusName}}</el-tag>
        <el-tag size="small">{{detail.invoiceName}}</el-tag>
        <el-tag size="small" v-if="detail.is_use_deposit=='1'">使用押金结算</el-tag>
      </h4>
      <section class="container">
        <span class="title">每月薪资：</span>
        ￥{{salary.job_salary}}/月
      </section>
      <section class="container">
        <span class="title">工作周期：</span>
        {{detail.time.start_time | dateFormat}} 至 {{detail.time.end_time | dateFormat}} ({{detail.days}}天)
      </section>
      <section class="container">
        <span class="title">托管金额：</span>
        ￥{{detail.company.company_pay}}
      </section>
      <section v-if="detail.normal_days > 0" class="container">
        <span class="title">正式工资：</span>
        ￥{{salary.normal_salary}}({{detail.normal_days}}天)
      </section>
      <section v-if="detail.probation_days > 0" class="container">
        <span class="title">试用工资：</span>
        ￥{{salary.probation_salary}}({{detail.probation_days}}天，按月工资{{rate.probation_rate}}%结算)
      </section>
      <section class="container">
        <span class="title">结算比例：</span>
        <el-input type="number" v-model="detail.work_hour.work_rate"></el-input>
        % (工作工时：{{detail.work_hour.worked_hours}}/{{detail.work_hour.should_work_hours}})
      </section>
      <section class="container">
        <span class="title">扣减工资：</span>
        <el-input type="number" v-model="salary.deduction_fee"></el-input>元
      </section>
      <section class="container salary-container">
        <span class="title">本月工资：</span>
        <section>
          <div class="salary-result">￥{{baseSalary}}</div>
          <div
            class="salary-calc"
          >=({{salary.normal_salary}}+{{salary.probation_salary}})*{{detail.work_hour.work_rate}}%-{{salary.deduction_fee}}</div>
        </section>
      </section>
      <section class="container">
        <span class="title">平台服务费：</span>
        <el-input type="number" v-model="rate.origin_person_service_fee_rate"></el-input>
        VIP会员减免{{rate.person_service_fee_rate_reduce}}% ￥{{vipMinus}} (开发者服务费率{{devServiceRate}}%)
      </section>
      <section class="container">
        <span class="title">应缴税费：</span>
        <el-checkbox type="checkbox" v-model="dev_is_invoice"></el-checkbox>
        ￥{{shouldRate}} (开发者税率{{devRate}}%)
      </section>
      <section class="container salary-container">
        <span class="title">实际工资：</span>
        <section>
          <div class="salary-result">￥{{personPrice}}</div>
          <div class="salary-calc">
            <span>=(({{salary.normal_salary}}+{{salary.probation_salary}})*{{detail.work_hour.work_rate}}%-{{salary.deduction_fee * 1}})*(1-{{rate.person_service_fee_rate}}%)</span>
            <span
              v-if="dev_is_invoice"
            >*(1-{{rate.person_tax_rate}}%-{{rate.person_tax_service_fee_rate}}%)</span>
          </div>
        </section>
      </section>
      <!-- 本月结束合作，下月未托管费用 -->
      <section v-if="detail.can_use_deposit" class="container">
        <el-checkbox v-model="is_use_deposit" style="margin: 0 4px 0 0;" disabled checked></el-checkbox>
        使用押金结算(￥{{detail.company.company_left_deposit}})(企业方费用：￥{{companyPrice}})
      </section>
      <section class="container">
        <span class="title">退还金额：</span>
        <el-input type="text" :value="returnMoney" disabled></el-input>
        =(({{salary.normal_salary}}+{{salary.probation_salary}})-{{baseSalary}})*(1+{{rate.company_service_fee_rate}}%)
        <span
          v-if="is_invoice"
        >*(1+{{this.is_invoice ? rate.company_tax_rate : 0}}%)</span>元
      </section>
      <section class="container">
        <span class="title">备注说明：</span>
        <el-input v-model="detail.remark"></el-input>
      </section>
      <section class="container">
        <span class="title">提成客户经理</span>
        {{detail.user_manager ? `${detail.user_manager.nickname}(${detail.user_manager.uid})` : ''}}
        <el-button @click="clientChangeDialog = true" type="text">更换</el-button>
        <el-dialog title="更换提成客户经理" :visible.sync="clientChangeDialog" width="30%">
          <div>客户昵称：{{detail.company_info ?`${detail.company_info.nickname}(${detail.company_info.uid})` : ''}}</div>
          <div>
            客户经理：
            <el-select v-model="clientSelected" placeholder="请选择">
              <el-option
                v-for="item in clients"
                :key="item.uid"
                :label="`${item.nickname}(${item.uid})`"
                :value="item.uid"
              ></el-option>
            </el-select>
          </div>
          <span slot="footer" class="dialog-footer">
            <el-button @click="clientChangeDialog = false">取 消</el-button>
            <el-button type="primary" @click="handleClientChange">确 定</el-button>
          </span>
        </el-dialog>
      </section>
      <el-button
        v-show="detail.status == 2 || detail.status == 3"
        @click="jobPeriodSettle('save')"
      >保存</el-button>
      <section v-if="detail.can_send_salary" class="container" style="margin-top: 20px;">
        <el-button
          type="primary"
          v-show="detail.status == 3"
          @click="jobPeriodSettle('confirm')"
        >确定支付工资</el-button>
      </section>
    </section>
    <section class="right">
      <textarea v-model="remind" placeholder="请输入备注" maxlength="200"></textarea>
      <el-button style="width: 100px;" @click="clickRemindSave" type="primary">保存</el-button>
      <section class="reminds">
        <section class="remind" v-for="remind of reminds" :key="remind.id">
          <img class="remind-head" :src="remind.icon_url" alt="icon" />
          <section class="remind-right">
            <section class="remind-top">
              <span class="remind-nickname">{{remind.nickname}}</span>
              <span class="remind-date">{{remind.create_date}}</span>
            </section>
            <p class="remind-content">{{remind.content}}</p>
          </section>
        </section>
      </section>
      <el-pagination
        layout="prev, pager, next"
        :total="total"
        :page-size="20"
        @current-change="changePagination"
      ></el-pagination>
    </section>
  </section>
</template>

<script>
// 现在环境是线上还是测试, 默认线上
let env = "";
// 备注页码
let currentPage = 1;

export default {
  data() {
    return {
      // 全部备注数量
      total: 0,
      // 历史备注
      reminds: [],
      // 备注信息
      remind: "",
      job_id: "",
      period_id: "",
      is_invoice: false,
      dev_is_invoice: false,
      is_use_deposit: false,
      detail: null,
      clientChangeDialog: false,
      clients: [],
      clientSelected: ""
    };
  },
  computed: {
    /**
     * 详情链接地址
     */
    orderHref() {
      let detail = this.detail,
        hrefFix = `/rooter/cloudjobitem/${detail.job_id}`;
      hrefFix = this.$store.state.domainConfig.siteUrl + `${hrefFix}`;
      return hrefFix;
    },
    /**
     * 开发者服务费率
     */
    devServiceRate() {
      let rate = this.rate;
      let result =
        +rate.origin_person_service_fee_rate -
        +rate.person_service_fee_rate_reduce;
      return result < 0 ? 0 : result;
    },
    /**
     * 开发者税率
     */
    devRate() {
      let rate = this.rate;
      return +rate.person_tax_rate + +rate.person_tax_service_fee_rate;
    },
    /**
     * 薪资
     */
    salary() {
      return this.detail.salary;
    },
    /**
     * 会员减免
     */
    vipMinus() {
      let salary = this.salary;
      let rate = this.rate;
      return this.keepDecimal(
        ((salary.normal_salary * 1 + salary.probation_salary * 1) *
          (this.detail.work_hour.work_rate / 100) -
          salary.deduction_fee * 1) *
          ((rate.origin_person_service_fee_rate -
            rate.person_service_fee_rate_reduce) /
            100)
      );
    },
    /**
     * 税率
     */
    rate() {
      return this.detail.rate;
    },
    /**
     * 应缴税费
     */
    shouldRate() {
      let rate = this.rate;
      return this.keepDecimal(
        (+this.baseSalary *
          (1 -
            +rate.origin_person_service_fee_rate / 100 +
            +rate.person_service_fee_rate_reduce / 100) *
          this.devRate) /
          100
      );
    },
    /**
     * 本月工资
     */
    baseSalary() {
      let salary = this.salary;
      return this.keepDecimal(
        ((+salary.normal_salary + +salary.probation_salary) *
          +this.detail.work_hour.work_rate) /
          100 -
          +salary.deduction_fee
      );
    },
    /**
     * 退还金额
     */
    returnMoney() {
      if (this.is_use_deposit) return 0;

      let salary = this.salary;
      let isPay = +this.detail.company.company_pay > 0 ? 1 : 0;
      let hasTax =
        this.detail.is_invoice == "1"
          ? 1 + +this.detail.rate.company_tax_rate / 100
          : 1;
      return (
        this.keepDecimal(
          (+salary.normal_salary +
            +salary.probation_salary -
            +this.baseSalary) *
            (1 + +this.detail.rate.company_service_fee_rate / 100) *
            hasTax
        ) * isPay
      );
    },
    /**
     * 实际工资
     */
    personPrice() {
      let salary = this.salary;
      let rate = this.detail.rate;
      let work_hour = this.detail.work_hour;
      let isPayable = this.dev_is_invoice
        ? 1 -
          rate.person_tax_rate / 100 -
          rate.person_tax_service_fee_rate / 100
        : 1;
      let personPrice =
        (((salary.normal_salary - 0 + (salary.probation_salary - 0)) *
          work_hour.work_rate) /
          100 -
          +salary.deduction_fee) *
        (1 - rate.person_service_fee_rate / 100) *
        isPayable;

      return this.keepDecimal(personPrice);
    },
    /**
     * 企业方费用
     */
    companyPrice() {
      let salary = this.salary;
      let rate = this.detail.rate;
      let work_hour = this.detail.work_hour;
      let isPayable = this.is_invoice ? 1 + rate.company_tax_rate / 100 : 1;
      let companyPrice =
        (((salary.normal_salary - 0 + (salary.probation_salary - 0)) *
          work_hour.work_rate) /
          100 -
          +salary.deduction_fee) *
        (1 + rate.company_service_fee_rate / 100) *
        isPayable;
      return this.keepDecimal(companyPrice);
    },
    /**
     * is_invoice根据身份取值
     */
    isInvoice() {
      return this.detail[this.isDev ? "dev_is_invoice" : "is_invoice"];
    }
  },
  filters: {
    /**
     * 格式化日期
     */
    dateFormat(val) {
      return new Date(+val * 1000).toLocaleDateString();
    }
  },
  mounted() {
    this.job_id = this.$route.query.job_id;
    this.period_id = this.$route.query.period_id;
    this.getClients();
    this.getData();
    this.getReminds();
  },
  methods: {
    /**
     * 备注页码变化
     */
    changePagination(page) {
      this.getReminds(page);
    },
    async getReminds(page = currentPage) {
      this.reminds = [];
      let { status, data } = await this.$post("/api/admin/job/getPeriodNote", {
        period_id: this.period_id,
        page
      });
      currentPage = page;
      console.log(data);
      if (status) {
        this.total = data.total;
        this.reminds = data.list;
      }
    },
    /**
     * 点击提交备注
     */
    async clickRemindSave() {
      console.log(this.remind);
      if (!this.remind.length) {
        this.$message({
          message: "请输入备注",
          type: "warning"
        });
        return;
      }
      let content = `${this.remind} -账单ID${this.period_id}`;
      let res = await this.$post("/api/admin/job/note", {
        id: this.job_id,
        period_id: this.period_id,
        content
      });
      console.log(res);
      if (res.status) {
        this.$message({
          message: "保存成功",
          type: "success"
        });
        setTimeout(() => {
          location.reload();
        }, 1500);
      } else {
        this.$message({
          message: "保存失败",
          type: "error"
        });
      }
    },
    /**
     * 有效数字控制
     */
    keepDecimal(num) {
      return num.toFixed(2);
    },
    /**
     * 点击保存或支付
     */
    async jobPeriodSettle(action) {
      if (this.returnMoney < 0 || this.detail.work_hour.work_rate > 100) {
        this.$message({
          message: "退还金额不能小于0 且 结算比例不能大于100",
          type: "error"
        });
        return;
      }
      let body = {
        // 云端工作周期id(int)
        period_id: this.period_id,
        // 云端工作id（int）
        job_id: this.job_id,
        // 操作名称 save-保存结算信息 confirm-确认支付工资
        action,
        // 结算比例（百分比）
        work_rate: this.detail.work_hour.work_rate,
        // 扣减工资（数值，两位小数）
        deduction_fee: this.salary.deduction_fee,
        // 退还金额（数值，两位小数）
        return_money: this.returnMoney,
        // 结算工资时的备注（可选）
        remark: this.detail.remark,
        // 结算时是否使用押金
        is_use_deposit: this.is_use_deposit ? 1 : 0,
        person_service_fee_rate: this.detail.rate.origin_person_service_fee_rate
      };
      body.dev_is_invoice = this.dev_is_invoice ? 1 : 0;

      let res = await this.$post("/api/admin/job/job_period_settle", body);
      if (!res) return;
      if (res.status > 0) {
        this.$message({
          message: res.info,
          type: "success"
        });
        setTimeout(() => {
          location.reload();
        }, 1000);
      } else {
        if (!res.info) {
          console.log(res);
        }
        this.$message({
          message: res.info ? res.info : "接口返回数据异常",
          type: "error"
        });
      }
    },
    /**
     * 获取数据
     */
    async getData(i) {
      let res = await this.$post("/api/admin/job/get_job_period_detail", {
        job_id: this.job_id,
        period_id: this.period_id,
        is_cal_workrate: 1
      });
      if (!res.data) return;
      let data = res.data;
      env = data.current_env;
      this.detail = data;
      this.isDev = data.is_dev;
      this.is_invoice = this.detail.is_invoice === "1";
      this.dev_is_invoice = this.detail.dev_is_invoice == "1";
      this.is_use_deposit = data.can_use_deposit === "1";
      this.clientSelected = this.detail.user_manager
        ? this.detail.user_manager.uid
        : "";
    },
    /**
     * 获取客户经理
     */
    async getClients() {
      let res = await this.$post("/api/admin/user_manager/get_manager", {});
      if (!res.data) return;
      let data = res.data;
      console.log(data);
      this.clients = data.managers;
    },
    /**
     * 更换客户经理
     */
    async handleClientChange() {
      if (!this.clientSelected) {
        this.$message.error("请选择客户经理");
      }
      let res = await this.$post(
        "/api/admin/user_manager/change_manager_record",
        {
          manager_id: this.clientSelected,
          period_id: this.period_id
        }
      );
      if (res.status === 1) {
        this.$message({
          message: "修改成功",
          type: "success"
        });
        this.getData();
        this.clientSelected = "";
        this.clientChangeDialog = false;
      } else {
        this.$message.error("修改失败！" + res.info);
      }
    }
  }
};
</script>

<style scoped>
#wage-settlement {
  display: flex;
  padding: 20px;
}
.left,
.right {
  flex: 1;
}
.left {
  border-right: 1px solid #ccc;
  padding-right: 20px;
}
.right {
  padding: 20px;
}
.container {
  display: flex;
  align-items: center;
  height: 44px;
}
.salary-container {
  height: 80px;
  background: #f0f0f0;
}
.salary-result {
  font-size: 28px;
  font-weight: 800;
}
.salary-calc {
  color: #666;
  margin-left: 40px;
}
.title {
  width: 120px;
}
.el-input {
  width: 180px;
}
textarea {
  resize: none;
  width: 100%;
  height: 120px;
  padding: 12px;
}
.reminds {
  margin-top: 40px;
  height: 600px;
  overflow-y: scroll;
}
.remind {
  display: flex;
  margin-bottom: 40px;
}
.remind-head {
  --width: 40px;
  width: var(--width);
  height: var(--width);
  border-radius: 50%;
  margin-right: 10px;
}
.remind-right {
  display: flex;
  flex-direction: column;
}
.remind-nickname {
  font-weight: 800;
}
.remind-date {
  color: #999;
}
.remind-content {
  border-left: 4px solid #d8d8d8;
  padding-left: 10px;
  margin-top: 10px;
}
</style>