dy-admin-manager/src/views/baseRulesClassSetting/practiceRules.vue

<template>
  <div class="m-container">
    <!-- <h2>折扣设置</h2> -->
    <div v-if="(tableList.length>0 || pageInfo.page>1)&&contextFlag">
      <save-form
        :inline="true"
        @submit="search"
        @reset="onReSet"
        ref="searchForm"
        :saveKey="'practiceRules'"
        :model="searchForm"
      >
        <el-form-item prop="organId">
          <el-select
            placeholder="请选择分部"
            v-model="searchForm.organId"
            filterable
            clearable
          >
            <el-option
              v-for="(item, index) in selects.branchs"
              :label="item.name"
              :value="item.id"
              :key="index"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="danger" native-type="submit">搜索</el-button>
          <el-button native-type="reset" type="primary">重置</el-button>
        </el-form-item>
      </save-form>
      <el-button
        style="margin-bottom: 20px"
        type="primary"
        v-permission="'practiceGroupSellPrice/add'"
        @click="addPrice"
        icon="el-icon-plus"
        >添加</el-button
      >

      <!-- 列表 -->
      <div class="tableWrap">
        <el-table
          :data="tableList"
          :header-cell-style="{ background: '#EDEEF0', color: '#444' }"
        >
          <el-table-column align="center" prop="organName" label="分部名称">
          </el-table-column>
          <el-table-column
            align="center"
            prop="singleClassMinutesPrice"
            label="网管课课时单价"
          >
            <template slot-scope="scope"
              >{{ scope.row.singleClassMinutesPrice }}元</template
            >
          </el-table-column>
          <el-table-column
            align="center"
            prop="comeOnPackagePrice"
            label="加油包课时总价"
          >
            <template slot-scope="scope"
              >{{ scope.row.comeOnPackagePrice }}元</template
            >
          </el-table-column>
          <el-table-column align="center" label="操作">
            <template slot-scope="scope">
              <el-button
                @click="openTypes(scope.row)"
                v-permission="'practiceGroupSellPrice/update'"
                type="text"
                >修改</el-button
              >
              <el-button
                @click="onTypesDel(scope.row)"
                v-permission="'practiceGroupSellPrice/del'"
                type="text"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <pagination
          :saveKey="'musicCourseFee'"
          sync
          :total.sync="pageInfo.total"
          :page.sync="pageInfo.page"
          :limit.sync="pageInfo.limit"
          :page-sizes="pageInfo.page_size"
          @pagination="getList"
        />
      </div>
    </div>
    <emptyPage @submit="addPrice" title='网管课收费设置' btnTitle='新建网管课收费设置' :context='context' v-if="!(tableList.length>0 || pageInfo.page>1)&&contextFlag" />
    <el-dialog
      :title="activeRow ? '修改' : '新建'"
      destroy-on-close
      :visible.sync="newVisiable"
      width="600px"
    >
      <el-form :model="createForm" class="createForm" ref="ruleForm">
        <el-form-item
          label="所属分部"
          :rules="[{ required: true, message: '所属分部', trigger: 'blur' }]"
          prop="organId"
          :label-width="formLabelWidth"
        >
          <el-select
            placeholder="请选择分部"
            v-model="createForm.organId"
            filterable
            clearable
          >
            <el-option
              v-for="(item, index) in selects.branchs"
              :label="item.name"
              :value="item.id"
              :key="index"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="网管课课时单价"
          :label-width="formLabelWidth"
          :rules="[
            {
              required: true,
              message: '请输入每分钟课程费用',
              trigger: 'blur',
            },
          ]"
          :prop="`singleClassMinutesPrice`"
        >
          <el-input
            type="number"
            min="0"
            step="0.00000001"
            v-model="createForm.singleClassMinutesPrice"
          >
            <template slot="append">每分钟费用(元)</template>
          </el-input>
        </el-form-item>
        <el-form-item
          label="加油包课时总价"
          :label-width="formLabelWidth"
          :rules="[
            {
              required: true,
              message: '请输入每分钟课程费用',
              trigger: 'blur',
            },
          ]"
          prop="comeOnPackagePrice"
        >
          <el-input
            type="number"
            min="0"
            step="0.00000001"
            v-model="createForm.comeOnPackagePrice"
          >
            <template slot="append">每分钟费用(元)</template>
          </el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="newVisiable = false">取 消</el-button>
        <el-button type="primary" @click="submitInfo">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import pagination from "@/components/Pagination/index";
import { getPracticePriceList, resetPracticePriceList,addPracticePriceList,delPracticePriceList } from "./api";
import emptyPage from '@/components/emptyPage'
export default {
  name: "practiceRules",
  components: { pagination,emptyPage },
  data() {
    return {
      newVisiable: false,
      resetVisible: false,
      tableList: [],
      dataList: [],
      organList: [],
      searchForm: {
        organId: null,
        courseScheduleType: null,
      },
      createForm: {
        organId: null,
        comeOnPackagePrice: null,
        singleClassMinutesPrice: null,
      },
      pageInfo: {
        // 分页规则
        limit: 10, // 限制显示条数
        page: 1, // 当前页
        total: 0, // 总条数
        page_size: [10, 20, 40, 50], // 选择限制显示条数
      },
      formLabelWidth: "120px",
      activeRow: null,
      context:'可根据不同分部设置不同的网管课课时和加油包课时单价，设置完成后，所选分部学员可在学生端APP以此价格自行购买网管课课程。加油包是由8节网管组成的课程组，用于为乐团训练中跟不上进度的学员单独辅导，每个学员仅有一次购买加油包的机会，且只可在后台为学员创建，设置单价时建议酌情优惠。',
      contextFlag:false
    };
  },
  mounted() {
    // 获取分部
    this.$store.dispatch("setBranchs");
    this.getList();
  },
  methods: {
    search() {
      this.pageInfo.page = 1;
      this.getList();
    },
    onReSet() {
      this.$refs.searchForm.resetFields();
      this.search();
    },

    async onTypesDel(row) {
      try {
        await this.$confirm("是否删除此条数据?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        });
        delPracticePriceList({ organId: row.organId }).then((res) => {
          this.$message.success('删除成功')
          this.getList()
        });
      } catch (error) {}
    },

    getList() {
      getPracticePriceList({
        rows: this.pageInfo.limit,
        page: this.pageInfo.page,
        organId: this.searchForm.organId,
      }).then((res) => {
        this.contextFlag = true
        let result = res.data;
        this.tableList = result.rows;
        this.pageInfo.total = result.total;
        // }
      });
    },
    submitInfo() {

      this.$refs.ruleForm.validate(async (valid) => {
        if (valid) {
          console.log(this.createForm)
          if (this.activeRow) {
            try {
              await resetPracticePriceList(this.createForm);
              this.$message.success("修改成功");
              this.getList();
              this.newVisiable = false;
            } catch (error) {}
          } else {
            try {
              await addPracticePriceList(this.createForm);
              this.$message.success("创建成功");
              this.getList();
              this.newVisiable = false;
            } catch (error) {console.log(error)}
          }
        }
      });
    },
    openTypes(row) {
      this.activeRow = row;
      this.createForm = {
        ...row,
      };
      this.newVisiable = true;
    },
    addPrice() {
      this.activeRow = null;
      this.$set(this, "createForm", {
        organId: null,
        comeOnPackagePrice: null,
        singleClassMinutesPrice: null,
      });
      this.newVisiable = true;
    },
    // resetSubmit() {
    //   // resetOrganizationCourseUnitPrice
    //   this.$refs.resetForm.validate(async (valid) => {
    //     if (valid) {

    //     }
    //   });
    // },
  },
};
</script>
<style lang="scss" scoped>
/deep/.el-date-editor.el-input {
  width: 100% !important;
}
.el-select {
  // width: 100% !important;
}
.createForm {
  /deep/.el-input {
    width: 340px !important;
  }
}
</style>