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="120px"
        ></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="organIds"
            :rules="[{ required: true, message: '请选择分部' }]"
            :label-width="formLabelWidth"
          >
            <el-select
              :disabled="addDisabled || pageType === 'update'"
              class="multiple"
              filterable
              v-model.trim="form.organIds"
              clearable
              multiple
              :collapse-tags="true"
              placeholder="请选择分部"
              @change="getAllMember"
            >
              <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-cascader
              filterable
              v-model.trim="form.memberRankSettingId"
              clearable
              placeholder="请选择学练宝版本"
              :disabled="addDisabled"
              :options="remberList"
              :props="{ value: 'id', label: 'name' }"
              :show-all-levels="false"
            ></el-cascader>
            <!-- <el-select
              :disabled="addDisabled"
              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 {
  api_getMemberRankSetting,
  addMemberOrganizationFeeMapperV2,
  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: "",
        organIds: [],
        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");
    
    this.getList();
    this.getRules();
  },
  methods: {
    async getAllMember() {
      // 获取所有的会员
      try {
        const res = await api_getMemberRankSetting({
          organIds: this.form.organIds.join(','),
          id: this.form.outId
        });
        this.remberList = res.data;
        // 默认选中第一个
        // if (this.pageType == "create" && this.remberList.length > 0) {
        //   this.form.memberRankSettingId = this.remberList[0].id;
        // }
      } catch {}
    },
    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;
            }
          }
        });
      } 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: "", // 年经营报表
        organIds: [],
        memberRankSettingId: ""
      }),
        this.$refs[ruleForm].resetFields();
    },
    addFee() {
      this.title = "新增收费标准";
      this.addDisabled = false;
      this.form.outId = null;
      this.pageType = "create";
      this.branchStatus = true;
    },
    async 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,
        organIds: row.organId ? [row.organId] : [],
        outId: row.id
      };
      await this.getAllMember()
      this.form.memberRankSettingId = row.memberRankSettingId ? this.formatParentId(row.memberRankSettingId, this.remberList) : [],
     
      this.branchStatus = true;
    },
    formatParentId(id, list, ids = []) {
      for (const item of list) {
        if (item.children) {
          const cIds = this.formatParentId(
            id,
            item.children,
            [...ids, item.id]
          );
          if (cIds.includes(id)) {
            return cIds;
          }
        }
        if (item.id === id) {
          return [...ids, id];
        }
      }
      return ids;
    },
    onSubmit() {
      if (this.pageType == "look") {
        this.branchStatus = false;
        return;
      }
      this.$refs.ruleForm.validate(async flag => {
        if (flag) {
          const memberRankSettingId = this.form.memberRankSettingId.length > 0 ? this.form.memberRankSettingId[this.form.memberRankSettingId.length -1] : null
          if (this.pageType == "update") {
            try {
               await resetMemberOrganizationFeeMapper({
                memberFeeSetting: { ...this.form },
                organId: this.form.organIds.join(','),
                memberRankSettingId,
                id: this.form.outId
              });
              this.$message.success("修改成功");
              this.branchStatus = false;
              this.getList();
            } catch (e) {
              console.log(e);
            }
          } else if (this.pageType == "create") {
            try {
               await addMemberOrganizationFeeMapperV2({
                memberFeeSetting: { ...this.form },
                organIds: this.form.organIds.join(','),
                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 0.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, 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>