dy-admin-manager/src/views/categroyManager/productSystem/memberFeeSet.vue

<template>
  <div class="m-container">
    <h2>
      <div class="squrt"></div>
      云教练收费标准
    </h2>
    <div class="m-core"  v-if="(tableList.length>0 || rules.page>1)&&contextFlag">
      <save-form
        :inline="true"
        class="searchForm"
        save-key="memberFeeSet"
        ref="searchForm"
        @submit="search"
        @reset="onReSet"
        :model.sync="searchForm"
      >
        <!-- 状态 指导老师 活动方案-->
        <el-form-item prop="search">
          <el-input
            v-model.trim="searchForm.search"
            clearable
            placeholder="云教练名称"
          ></el-input>
        </el-form-item>
        <el-form-item prop="organId">
          <el-select
            class="multiple"
            filterable
            style="width: 180px !important"
            v-model.trim="searchForm.organId"
            clearable
            placeholder="请选择分部"
          >
            <el-option
              v-for="(item, index) in selects.branchs"
              :key="index"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button native-type="submit" type="danger">搜索</el-button>
          <el-button native-type="reset" type="primary">重置</el-button>
        </el-form-item>
      </save-form>
      <el-button
        type="primary"
        style="margin-bottom: 20px"
        v-permission="'memberRankOrganizationFeeMapper/add'"
        @click="addFee"
        >新增收费标准</el-button
      >
      <el-table
        :data="tableList"
        :header-cell-style="{ background: '#EDEEF0', color: '#444' }"
      >
        <el-table-column
          align="left"
          prop="organName"
          label="分部"
        ></el-table-column>
        <el-table-column
          align="left"
          prop="rankName"
          label="云教练名称"
          width="90px"
        ></el-table-column>
        <el-table-column align="left" prop="type" label="月收费">
          <template slot-scope="scope">
            <div>
              <p>
                团购:
                {{
                  scope.row.memberFeeSetting.groupPurchaseMonthFee
                    | hasMoneyFormat
                }}
              </p>
              <p>
                原价:
                {{
                  scope.row.memberFeeSetting.originalMonthFee | hasMoneyFormat
                }}
              </p>
              <div>经营报表</div>
              <div>确认收入: {{ scope.row.memberFeeSetting.incomeMonthFee | hasMoneyFormat }}</div>
            </div>
          </template>
        </el-table-column>
        <el-table-column align="left" prop="type" label="季度收费">
          <template slot-scope="scope">
            <div>
              <p>
                团购:
                {{
                  scope.row.memberFeeSetting.groupPurchaseQuarterlyFee
                    | hasMoneyFormat
                }}
              </p>
              <!-- <p>
              零售:
              {{
                scope.row.memberFeeSetting.currentQuarterlyFee | hasMoneyFormat
              }}
            </p> -->
              <p>
                原价:
                {{
                  scope.row.memberFeeSetting.originalQuarterlyFee
                    | hasMoneyFormat
                }}
              </p>

              <div>经营报表</div>
              <div>确认收入: {{ scope.row.memberFeeSetting.incomeQuarterlyFee | hasMoneyFormat }}</div>
            </div>
          </template>
        </el-table-column>
        <el-table-column align="left" prop="type" label="半年收费">
          <template slot-scope="scope">
            <div>
              <p>
                团购:
                {{
                  scope.row.memberFeeSetting.groupPurchaseHalfYearFee
                    | hasMoneyFormat
                }}
              </p>
              <!-- <p>
              零售:
              {{
                scope.row.memberFeeSetting.currentHalfYearFee | hasMoneyFormat
              }}
            </p> -->
              <p>
                原价:
                {{
                  scope.row.memberFeeSetting.originalHalfYearFee
                    | hasMoneyFormat
                }}
              </p>
              <div>经营报表</div>
              <div>确认收入: {{ scope.row.memberFeeSetting.incomeHalfYearFee | hasMoneyFormat }}</div>
            </div>
          </template>
        </el-table-column>
        <el-table-column align="left" prop="type" label="年收费">
          <template slot-scope="scope">
            <div>
              <p>
                团购:
                {{
                  scope.row.memberFeeSetting.groupPurchaseYearFee
                    | hasMoneyFormat
                }}
              </p>
              <!-- <p>
              零售:
              {{ scope.row.memberFeeSetting.currentYearFee | hasMoneyFormat }}
            </p> -->
              <p>
                原价:
                {{
                  scope.row.memberFeeSetting.originalYearFee | hasMoneyFormat
                }}
              </p>
              <div>经营报表</div>
              <div>确认收入: {{ scope.row.memberFeeSetting.incomeYearFee | hasMoneyFormat }}</div>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          width="105px"
          prop="updateTime"
          label="修改时间"
        ></el-table-column>
        <el-table-column
          prop="operatorName"
          label="修改人"
          width="80px"
        ></el-table-column>
        <el-table-column align="center" label="操作" width="100px">
          <template slot-scope="scope">
            <div>
              <!-- memberRankSetting/add -->
              <auth auths="memberRankOrganizationFeeMapper/get">
                <el-button type="text" @click="resetFee(scope.row, 'look')"
                  >详情</el-button
                >
              </auth>
              <auth :auths="'memberRankOrganizationFeeMapper/update'">
                <el-button type="text" @click="resetFee(scope.row, 'update')"
                  >修改</el-button
                >
              </auth>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        save-key="memberFeeSet"
        :total.sync="rules.total"
        sync
        :page.sync="rules.page"
        :limit.sync="rules.limit"
        :page-sizes="rules.page_size"
        @pagination="getList"
      />
    </div>
    <emptyPage @submit="addFee" title='云教练收费标准' btnTitle='新建云教练收费标准' :context='context' v-if="!(tableList.length>0 || rules.page>1)&&contextFlag" />
    <el-dialog
      class="dialog"
      :title="title"
      top="12vh"
      :close-on-click-modal="false"
      :visible.sync="branchStatus"
      v-if="branchStatus"
      default-expand-all
      @close="onFormClose('ruleForm')"
      width="820px"
    >
      <el-form class="elForm" :model="form" label-position="top" ref="ruleForm">
        <div class="wrap">
          <el-form-item
            label="所属分部"
            prop="organId"
            :rules="[{ required: true, message: '请选择分部' }]"
            :label-width="formLabelWidth"
          >
            <el-select
              :disabled="addDisabled"
              class="multiple"
              filterable
              v-model.trim="form.organId"
              clearable
              placeholder="请选择分部"
            >
              <el-option
                v-for="(item, index) in selects.branchs"
                :key="index"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            label="云教练名称"
            prop="memberRankSettingId"
            :rules="[{ required: true, message: '请选择云教练' }]"
            :label-width="formLabelWidth"
          >
            <el-select
              disabled
              class="multiple"
              filterable
              v-model.trim="form.memberRankSettingId"
              clearable
              placeholder="请选择云教练"
            >
              <el-option
                v-for="(item, index) in remberList"
                :key="index"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
        </div>

        <div class="lineTitle">月度收费</div>

        <div class="wrap">
          <el-form-item
            prop="groupPurchaseMonthFee"
            label="团购价"
            :rules="[
              { required: true, message: '请输入月收费团购价' },
              {
                pattern: /^[1-9][0-9]*$/,
                message: '请输入大于0的正整数',
              },
              { validator: validateMonth, trigger: 'blur' },
            ]"
            :label-width="formLabelWidth"
            :placeholder="monthRule"
          >
            <el-input
              v-model="form.groupPurchaseMonthFee"
              :disabled="addDisabled"
              :placeholder="monthRule"
            >
              <template slot="append">元/月</template>
            </el-input>
          </el-form-item>
          <el-form-item
            prop="currentMonthFee"
            label="零售价"
            :rules="[
              { required: true, message: '请输入月收费零售价' },
              {
                pattern: /^[1-9][0-9]*$/,
                message: '请输入大于0的正整数',
              },
              { validator: validateMonth, trigger: 'blur' },
            ]"
            :label-width="formLabelWidth"
          >
            <el-input
              v-model="form.currentMonthFee"
              :disabled="addDisabled"
                    :placeholder="monthRule"
            >
              <template slot="append">元/月</template>
            </el-input>
          </el-form-item>
          <el-form-item
            prop="originalMonthFee"
            label="原价"
            :rules="[
              { required: true, message: '请输入月收费原价' },
              {
                pattern: /^[1-9][0-9]*$/,
                message: '请输入大于0的正整数',
              },
              { validator: validateMonth, trigger: 'blur' },
            ]"
            :label-width="formLabelWidth"
          >
            <el-input
              v-model="form.originalMonthFee"
              :disabled="addDisabled"
              :placeholder="monthRule"
            >
              <template slot="append">元/月</template>
            </el-input>
          </el-form-item>
          <el-form-item
            prop="incomeMonthFee"
            label="经营报表确认收入"
            :rules="[
              { required: true, message: '请输入月度经营报表确认收入' },
              {
                pattern: /^[1-9][0-9]*$/,
                message: '请输入大于0的正整数',
              },
              { validator: validateMonthIncome, trigger: 'blur' },
            ]"
            :label-width="formLabelWidth"
          >
            <el-input
              v-model="form.incomeMonthFee"
              :disabled="addDisabled"
              :placeholder="monthRuleIncome"
            >
              <template slot="append">元</template>
            </el-input>
          </el-form-item>
        </div>

        <div class="lineTitle">季度收费</div>

        <div class="wrap">
          <el-form-item
            prop="groupPurchaseQuarterlyFee"
            label="团购价"
            :rules="[
              { required: true, message: '请输入季度收费团购价' },
              {
                pattern: /^[1-9][0-9]*$/,
                message: '请输入大于0的正整数',
              },
              { validator: validateQuarterly, trigger: 'blur' },
            ]"
            :label-width="formLabelWidth"
          >
            <el-input
              v-model="form.groupPurchaseQuarterlyFee"
              :disabled="addDisabled"
              :placeholder="quarterlyRule"
            >
              <template slot="append">元/季度</template>
            </el-input>
          </el-form-item>
          <el-form-item
            prop="currentQuarterlyFee"
            label="零售价"
            :rules="[
              { required: true, message: '请输入季度收费零售价' },
              {
                pattern: /^[1-9][0-9]*$/,
                message: '请输入大于0的正整数',
              },
              { validator: validateQuarterly, trigger: 'blur' },
            ]"
            :label-width="formLabelWidth"

          >
            <el-input
              v-model="form.currentQuarterlyFee"
              :disabled="addDisabled"
              :placeholder="quarterlyRule"
            >
              <template slot="append">元/季度</template>
            </el-input>
          </el-form-item>
          <el-form-item
            prop="originalQuarterlyFee"
            label="原价"
            :rules="[
              { required: true, message: '请输入季度收费原价' },
              {
                pattern: /^[1-9][0-9]*$/,
                message: '请输入大于0的正整数',
              },
              { validator: validateQuarterly, trigger: 'blur' },
            ]"
            :label-width="formLabelWidth"
          >
            <el-input
              v-model="form.originalQuarterlyFee"
              :disabled="addDisabled"
              :placeholder="quarterlyRule"
            >
              <template slot="append">元/季度</template>
            </el-input>
          </el-form-item>
          <el-form-item
            prop="incomeQuarterlyFee"
            label="经营报表确认收入"
            :rules="[
              { required: true, message: '请输入季度经营报表确认收入' },
              {
                pattern: /^[1-9][0-9]*$/,
                message: '请输入大于0的正整数',
              },
              { validator: validateQuarterlyIncome, trigger: 'blur' },
            ]"
            :label-width="formLabelWidth"
          >
            <el-input
              v-model="form.incomeQuarterlyFee"
              :disabled="addDisabled"
              :placeholder="quarterlyRuleIncome"
            >
              <template slot="append">元</template>
            </el-input>
          </el-form-item>
        </div>

        <div class="lineTitle">半年收费</div>

        <div class="wrap">
          <el-form-item
            prop="groupPurchaseHalfYearFee"
            label="半年收费团购价"
            :rules="[
              { required: true, message: '请输入半年收费团购价' },
              {
                pattern: /^[1-9][0-9]*$/,
                message: '请输入大于0的正整数',
              },
              { validator: validateHalfYear, trigger: 'blur' },
            ]"
            :label-width="formLabelWidth"
          >
            <el-input
              v-model="form.groupPurchaseHalfYearFee"
              :disabled="addDisabled"
              :placeholder="halfYearRule"
            >
              <template slot="append">元/半年</template>
            </el-input>
          </el-form-item>
          <el-form-item
            prop="currentHalfYearFee"
            label="半年收费零售价"
            :rules="[
              { required: true, message: '请输入半年收费零售价' },
              {
                pattern: /^[1-9][0-9]*$/,
                message: '请输入大于0的正整数',
              },
                { validator: validateHalfYear, trigger: 'blur' },
            ]"
            :label-width="formLabelWidth"
          >
            <el-input
              v-model="form.currentHalfYearFee"
              :disabled="addDisabled"
              :placeholder="halfYearRule"
            >
              <template slot="append">元/半年</template>
            </el-input>
          </el-form-item>
          <el-form-item
            prop="originalHalfYearFee"
            label="半年收费原价"
            :rules="[
              { required: true, message: '请输入半年收费原价' },
              {
                pattern: /^[1-9][0-9]*$/,
                message: '请输入大于0的正整数',
              },
              { validator: validateHalfYear, trigger: 'blur' },
            ]"
            :label-width="formLabelWidth"
          >
            <el-input
              v-model="form.originalHalfYearFee"
              :disabled="addDisabled"
              :placeholder="halfYearRule"
            >
              <template slot="append">元/半年</template>
            </el-input>
          </el-form-item>
          <el-form-item
            prop="incomeHalfYearFee"
            label="经营报表确认收入"
            :rules="[
              { required: true, message: '请输入半年经营报表确认收入' },
              {
                pattern: /^[1-9][0-9]*$/,
                message: '请输入大于0的正整数',
              },
              { validator: validateHalfYearIncome, trigger: 'blur' },
            ]"
            :label-width="formLabelWidth"
          >
            <el-input
              v-model="form.incomeHalfYearFee"
              :disabled="addDisabled"
              :placeholder="halfYearRuleIncome"
            >
              <template slot="append">元</template>
            </el-input>
          </el-form-item>
        </div>

        <div class="lineTitle">年度收费</div>
        
        <div class="wrap">
          <el-form-item
            prop="groupPurchaseYearFee"
            label="年收费团购价"
            :rules="[
              { required: true, message: '请输入年收费团购价' },
              {
                pattern: /^[1-9][0-9]*$/,
                message: '请输入大于0的正整数',
              },
              { validator: validateYear, trigger: 'blur' },
            ]"
            :label-width="formLabelWidth"
          >
            <el-input
              v-model="form.groupPurchaseYearFee"
              :disabled="addDisabled"
              :placeholder="yearRule"
            >
              <template slot="append">元/年</template>
            </el-input>
          </el-form-item>
          <el-form-item
            prop="currentYearFee"
            label="年收费零售价"
            :rules="[
              { required: true, message: '请输入年收费零售价' },
              {
                pattern: /^[1-9][0-9]*$/,
                message: '请输入大于0的正整数',
              },
              { validator: validateYear, trigger: 'blur' },
            ]"
            :label-width="formLabelWidth"
          >
            <el-input
              v-model="form.currentYearFee"
              :disabled="addDisabled"
              :placeholder="yearRule"
            >
              <template slot="append">元/年</template>
            </el-input>
          </el-form-item>
          <el-form-item
            prop="originalYearFee"
            label="年收费原价"
            :rules="[
              { required: true, message: '请输入年收费原价' },
              {
                pattern: /^[1-9][0-9]*$/,
                message: '请输入大于0的正整数',
              },
              { validator: validateYear, trigger: 'blur' },
            ]"
            :label-width="formLabelWidth"
          >
            <el-input
              v-model="form.originalYearFee"
              :disabled="addDisabled"
              :placeholder="yearRule"
            >
              <template slot="append">元/年</template>
            </el-input>
          </el-form-item>
          <el-form-item
            prop="incomeYearFee"
            label="经营报表确认收入"
            :rules="[
              { required: true, message: '请输入年度经营报表确认收入' },
              {
                pattern: /^[1-9][0-9]*$/,
                message: '请输入大于0的正整数',
              },
              { validator: validateYearIncome, trigger: 'blur' },
            ]"
            :label-width="formLabelWidth"
          >
            <el-input
              v-model="form.incomeYearFee"
              :disabled="addDisabled"
              :placeholder="yearRuleIncome"
            >
              <template slot="append">元</template>
            </el-input>
          </el-form-item>
        </div>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button v-if="!addDisabled" @click="branchStatus = false"
          >取 消</el-button
        >
        <el-button @click="onSubmit" type="primary">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import numeral from "numeral";
import {
  getAllmemberRank,
  addMemberOrganizationFeeMapper,
  getmemberRankOrganizationFeeMapper,
  getmemberOrganizationFeeMapperkDetail,
  resetMemberOrganizationFeeMapper,
} from "./api";
import { sysConfigList } from "@/api/generalSettings";
import pagination from "@/components/Pagination/index";
import emptyPage from '@/components/emptyPage'
// numeral(this.list.form[index].courseTotalMinuties * this.list.form[index].unitPrice).format('0,0.00')
export default {
  components: { pagination,emptyPage },
  name: "memberFeeSet",
  data() {
    return {
      searchForm: {
        search: null,
        organId: null,
      },
      rules: {
        // 分页规则
        limit: 10, // 限制显示条数
        page: 1, // 当前页
        total: 0, // 总条数
        page_size: [10, 20, 40, 50], // 选择限制显示条数
      },
      tableList: [],
      addDisabled: false,
      title: "新增收费标准",
      pageType: 'create',
      formLabelWidth: "120px",
      form: {
        currentDayFee: "",
        currentHalfYearFee: "",
        currentMonthFee: "",
        currentYearFee: "",
        originalDayFee: "",
        originalHalfYearFee: "",
        originalMonthFee: "",
        originalYearFee: "",
        groupPurchaseDayFee: "",
        groupPurchaseHalfYearFee: "",
        groupPurchaseMonthFee: "",
        groupPurchaseQuarterlyFee: "",
        groupPurchaseYearFee: "",
        organId: "",
        memberRankSettingId: "",
        incomeMonthFee: '', // 月经营报表
        incomeQuarterlyFee: "", // 季度经营报表
        incomeHalfYearFee: "", // 半年经营报表
        incomeYearFee: "", // 年经营报表
      },
      branchStatus: false,
      remberList: [],
      rulesForm: {
        minMonthFee: null,
        maxMonthFee: null,
        minQuarterlyFee: null,
        maxQuarterlyFee: null,
        minHalfYearFee: null,
        maxHalfYearFee: null,
        minYearFee: null,
        maxYearFee: null,
      },
      context:'云教练收费标准，可根据各分部的实际情况为分部制定不同的售价标准，设置完成后，各分部为学员创建云教练缴费时默认以此处设置的价格向学员收费。',
      contextFlag:false
    };
  },
  async mounted() {
    await this.$store.dispatch("setBranchs");
    // 获取所有的会员
    try {
      const res = await getAllmemberRank();
      this.remberList = res.data;
      // 默认选中第一个
      if(this.pageType == 'create' && this.remberList.length > 0) {
        this.form.memberRankSettingId = this.remberList[0].id
      }
    } catch {}

    this.getList();
    this.getRules();
  },
  methods: {
    async getRules() {
      try {
        const res = await sysConfigList({ group: "DEFAULT" });
        const paramName = "cloud_price_range";
        res.data.forEach((item) => {
          if (item.paramName == paramName) {
            const itemValue = item.paranValue
              ? JSON.parse(item.paranValue)
              : null;
            if (itemValue) {
              this.rulesForm = itemValue;
            }
            // this.$set(this.form, item.id, item.paranValue);
          }
          // this.form[item.paramName] = item.paranValue
          // this.$set(this.form, item.id, item.paranValue);
        });
        // this.$forceUpdate()
        // console.log(this.form);
      } catch (e) {
        console.log(e);
      }
    },
    search() {
      this.rules.page = 1;
      this.getList();
    },
    onReSet() {
      this.$refs.searchForm.resetFields();
      this.search();
    },
    async getList() {
      try {
        const res = await getmemberRankOrganizationFeeMapper({
          ...this.searchForm,
          rows: this.rules.limit,
          page: this.rules.page,
        });
        this.contextFlag = true;
        this.tableList = res.data.rows;
        this.rules.total = res.data.total;
      } catch {}
    },
    onFormClose(ruleForm) {
      (this.form = {
        currentDayFee: "",
        currentHalfYearFee: "",
        currentMonthFee: "",
        currentYearFee: "",
        originalDayFee: "",
        originalHalfYearFee: "",
        originalMonthFee: "",
        originalYearFee: "",
        incomeMonthFee: '', // 月经营报表
        incomeQuarterlyFee: "", // 季度经营报表
        incomeHalfYearFee: "", // 半年经营报表
        incomeYearFee: "", // 年经营报表
        organId: "",
        memberRankSettingId: "",
      }),
        this.$refs[ruleForm].resetFields();
    },
    addFee() {
      this.title = "新增收费标准";
      this.addDisabled = false;
      this.pageType = "create";
      this.branchStatus = true;
    },
    resetFee(row, type) {
      if (type == "update") {
        this.title = "修改收费标准";
        this.pageType = "update";
        this.addDisabled = false;
      } else {
        this.addDisabled = true;
        this.title = "查看收费标准";
        this.pageType = "look";
      }
      let obj = {};
      for (let key in row.memberFeeSetting) {
        if ((row.memberFeeSetting, key, row.memberFeeSetting[key])) {
          obj[key] = row.memberFeeSetting[key];
        }
      }

      this.form = {
        ...obj,
        organId: row.organId,
        memberRankSettingId: row.memberRankSettingId,
        outId: row.id,
      };
      this.branchStatus = true;
    },
    onSubmit() {
      console.log(this.pageType);
      if (this.pageType == "look") {
        this.branchStatus = false;
        return;
      }
      this.$refs.ruleForm.validate(async (flag) => {
        if (flag) {
          if (this.pageType == "update") {
            try {
              const res = await resetMemberOrganizationFeeMapper({
                memberFeeSetting: { ...this.form },
                organId: this.form.organId,
                memberRankSettingId: this.form.memberRankSettingId,
                id: this.form.outId,
              });
              this.$message.success("修改成功");
              this.branchStatus = false;
              this.getList();
            } catch (e) {
              console.log(e);
            }
          } else if (this.pageType == "create") {
            try {
              const res = await addMemberOrganizationFeeMapper({
                memberFeeSetting: { ...this.form },
                organId: this.form.organId,
                memberRankSettingId: this.form.memberRankSettingId,
              });
              this.$message.success("新建成功");
              this.branchStatus = false;
              this.getList();
            } catch {}
          }
        }
      });
    },
    validateMonthIncome(rule, value, callback){
      const one = Number(value);
      const min = Number(this.rulesForm.minMonthFee);
      const max = this.form.groupPurchaseMonthFee ? Number(this.form.groupPurchaseMonthFee) : Number(this.rulesForm.maxMonthFee)
      if (one >= min && one <= max) {
        return callback();
      }
      return callback(new Error(`月度经营报表应在${min}-${max}之间`));
    },
    validateMonth(rule, value, callback) {
      const one = Number(value);
      const min = Number(this.rulesForm.minMonthFee);
      const max = Number(this.rulesForm.maxMonthFee);
      if (one >= min && one <= max) {
        return callback();
      }
      return callback(new Error(`月度云教练定价应在${min}-${max}之间`));
    },
    validateQuarterlyIncome(rule, value, callback) {
      const one = Number(value);
      const min = Number(this.rulesForm.minQuarterlyFee);
      const max = this.form.groupPurchaseQuarterlyFee ? Number(this.form.groupPurchaseQuarterlyFee) : Number(this.rulesForm.maxQuarterlyFee);
      if (one >= min && one <= max) {
        return callback();
      }
      return callback(new Error(`季度经营报表应在${min}-${max}之间`));
    },
    validateQuarterly(rule, value, callback) {
      const one = Number(value);
      const min = Number(this.rulesForm.minQuarterlyFee);
      const max = Number(this.rulesForm.maxQuarterlyFee);
      if (one >= min && one <= max) {
        return callback();
      }
      return callback(new Error(`季度云教练定价应在${min}-${max}之间`));
    },
    validateHalfYearIncome(rule, value, callback) {
      const one = Number(value);
      const min = Number(this.rulesForm.minHalfYearFee);
      const max = this.form.groupPurchaseHalfYearFee ? Number(this.form.groupPurchaseHalfYearFee) : Number(this.rulesForm.maxHalfYearFee);
      if (one >= min && one <= max) {
        return callback();
      }
      return callback(new Error(`半年经营报表应在${min}-${max}之间`));
    },
    validateHalfYear(rule, value, callback) {
      const one = Number(value);
      const min = Number(this.rulesForm.minHalfYearFee);
      const max = Number(this.rulesForm.maxHalfYearFee);
      if (one >= min && one <= max) {
        return callback();
      }
      return callback(new Error(`半年云教练定价应在${min}-${max}之间`));
    },
    validateYearIncome(rule, value, callback) {
      const one = Number(value);
      const min = Number(this.rulesForm.minYearFee);
      const max = this.form.groupPurchaseYearFee ? Number(this.form.groupPurchaseYearFee) : Number(this.rulesForm.maxYearFee);
      if (one >= min && one <= max) {
        return callback();
      }
      return callback(new Error(`年度经营报表应在${min}-${max}之间`));
    },
    validateYear(rule, value, callback) {
      const one = Number(value);
      const min = Number(this.rulesForm.minYearFee);
      const max = Number(this.rulesForm.maxYearFee);
      if (one >= min && one <= max) {
        return callback();
      }
      return callback(new Error(`年度云教练定价应在${min}-${max}之间`));
    },
  },
  watch: {
    branchStatus(val) {
      if (!val) {
        this.onFormClose("ruleForm");
      }
    },
  },
  computed: {
    monthRuleIncome() {
      return `${this.rulesForm.minMonthFee}-${this.form.groupPurchaseMonthFee ? this.form.groupPurchaseMonthFee : this.rulesForm.maxMonthFee}`;
    },
    monthRule() {
      return `${this.rulesForm.minMonthFee}-${this.rulesForm.maxMonthFee}`;
    },
    quarterlyRuleIncome() {
      return `${this.rulesForm.minQuarterlyFee}-${this.form.groupPurchaseQuarterlyFee ? this.form.groupPurchaseQuarterlyFee : this.rulesForm.maxQuarterlyFee}`;
    },
    quarterlyRule() {
      return `${this.rulesForm.minQuarterlyFee}-${this.rulesForm.maxQuarterlyFee}`;
    },
    halfYearRuleIncome() {
      return `${this.rulesForm.minHalfYearFee}-${this.form.groupPurchaseHalfYearFee ? this.form.groupPurchaseHalfYearFee : this.rulesForm.maxHalfYearFee}`;
    },
    halfYearRule() {
      return `${this.rulesForm.minHalfYearFee}-${this.rulesForm.maxHalfYearFee}`;
    },
    yearRuleIncome() {
      return `${this.rulesForm.minYearFee}-${this.form.groupPurchaseYearFee ? this.form.groupPurchaseYearFee : this.rulesForm.maxYearFee}`;
    },
    yearRule() {
      return `${this.rulesForm.minYearFee}-${this.rulesForm.maxYearFee}`;
    },
  },
};
</script>
<style lang="scss" scoped>
.feeInput {
  ::v-deep .el-input__inner {
    width: 120px !important;
  }
}
.dialog{
  ::v-deep {
    .el-dialog{
      border-radius: 4px;
      overflow: hidden;
    }
    .el-dialog__header{
      display: flex;
      flex-shrink: 0;
      justify-content: space-between;
      align-items: center;
      box-sizing: border-box;
      width: 100%;
      height: 48px;
      padding: 0 20px;
      .el-dialog__title{
        font-weight: 500;
        font-size: 16px;
      }
      .el-dialog__headerbtn{
        position: relative;
        top: 0;
        right: 0;
        &::before{
          position: absolute;
          display: block;
          box-sizing: border-box;
          background-color: transparent;
          border-radius: 50%;
          transition: background-color .1s cubic-bezier(0,0,1,1);
          content: "";
          top: 50%;
          left: 50%;
          width: 20px;
          height: 20px;
          transform: translate(-50%,-50%);
        }
      }
      .el-dialog__headerbtn:hover{
        &::before{
          background-color: rgba(0,0,0, .5);
        }
      }
      .el-dialog__close{
        position: relative;
      }
    }
    .el-dialog__body{
      padding: 10px 20px;
    }
    .el-input-group__append{
      padding: 0 10px;
    }
  }
}
.elForm{
  ::v-deep {
    .el-form-item__label{
      max-width: 100%;
      color: #4e5969;
      font-size: 14px;
      white-space: normal;
      padding: 0;
      font-weight: 400;
      line-height: 32px;
    }
  }
}
.lineTitle{
  background-color: rgba(247,247,247,1);
  padding: 10px;
  border-radius: 4px;
  color: #333;
}
.wrap{
  display: flex;
  align-items: center;
  ::v-deep .el-form-item:not(:last-child){
    margin-right: 20px;
    
  }
  .el-form-item{
      width: 180px;
    }
}
</style>