dy-admin-manager/src/views/categroyManager/specialSetup/musicCourseFee.vue

<template>
  <div>
    <!-- <h2>折扣设置</h2> -->
    <div v-if="(tableList.length > 0 || pageInfo.page > 1) && contextFlag">
      <save-form
        :inline="true"
        @submit="search"
        @reset="onReSet"
        ref="searchForm"
        :saveKey="'musicCourseFee'"
        :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 prop="courseScheduleType">
          <el-select
            placeholder="课程类型"
            v-model="searchForm.courseScheduleType"
            clearable
            filterable
          >
            <el-option
              v-for="(item, index) in musicCourseType"
              :label="item.label"
              :value="item.value"
              :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="'organizationCourseUnitPriceSettings/save'"
        @click="newVisiable = true"
        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="分部名称">
            <template slot-scope="scope">{{ scope.row.organ.name }}</template>
          </el-table-column>
          <el-table-column align="center" prop="courseType" label="课程类型">
            <template slot-scope="scope">{{
              scope.row.courseType | coursesType
            }}</template>
          </el-table-column>
          <el-table-column align="center" prop="chargeName" label="乐团收费类型">
            <template slot-scope="scope">{{
              scope.row.chargeType.name
            }}</template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="goodsDiscountRate"
            label="每分钟费用"
          >
            <template slot-scope="scope">{{ scope.row.unitPrice }}</template>
          </el-table-column>
          <el-table-column align="center" prop="courseType" label="修改时间">
            <template slot-scope="scope">{{
              scope.row.updateTime | formatTimer
            }}</template>
          </el-table-column>
          <el-table-column align="center" label="操作">
            <template slot-scope="scope">
              <el-button
                @click="openTypes(scope.row)"
                v-permission="'organizationCourseUnitPriceSettings/update'"
                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="newVisiable = true"
      title="乐团课价格设置"
      btnTitle="新建乐团课价格设置"
      :context="context"
      v-if="!(tableList.length > 0 || pageInfo.page > 1) && contextFlag"
    />
    <el-dialog
      title="新建"
      :visible.sync="newVisiable"
      v-if="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"
            @change="changeOrgan"
            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="课程类型"
          :rules="[
            { required: true, message: '请选择课程类型', trigger: 'change' },
          ]"
          prop="courseType"
          :label-width="formLabelWidth"
        >
          <el-select
            v-model.trim="createForm.courseType"
            filterable
            placeholder="请选择课程类型"
            @change="changeCourseScheduleType"
            :disabled="!createForm.organId"
            clearable
          >
            <el-option
              v-for="item in musicCourseType"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <div v-for="(item, index) in dataList" :key="index">
          <el-form-item
            :label="`${item.name}`"
            :label-width="formLabelWidth"
            :rules="[
              {
                required: true,
                message: '请输入每分钟课程费用',
                trigger: 'blur',
              },
            ]"
            :prop="`unitPriceJson.${item.id}.price`"
          >
            <el-input
              type="number"
              min="0"
              step="0.00000001"
              v-model="createForm.unitPriceJson[item.id].price"
            >
              <template slot="append">每分钟费用(元)</template>
            </el-input>
          </el-form-item>
        </div>
      </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>

    <el-dialog
      title="修改"
      :visible.sync="resetVisible"
      width="500px"
      v-if="resetVisible"
    >
      <el-form :model="resetForm" class="resetForm" ref="resetForm">
        <el-form-item
          label="所属分部"
          :rules="[{ required: true, message: '所属分部', trigger: 'blur' }]"
          prop="organId"
          :label-width="formLabelWidth"
        >
          <el-select
            placeholder="请选择分部"
            v-model="resetForm.organId"
            clearable
            disabled
          >
            <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="课程类型"
          :rules="[
            { required: true, message: '请选择课程类型', trigger: 'blur' },
          ]"
          prop="courseType"
          :label-width="formLabelWidth"
        >
          <el-select
            v-model.trim="resetForm.courseType"
            filterable
            placeholder="请选择课程类型"
            clearable
            disabled
          >
            <el-option
              v-for="item in musicCourseType"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          v-if="actvieRow"
          :label="`${actvieRow.chargeType.name}模式`"
          :label-width="formLabelWidth"
          :rules="[
            {
              required: true,
              message: '请输入每分钟课程费用',
              trigger: 'blur',
            },
          ]"
          prop="unitPrice"
        >
          <el-input
            type="number"
            min="0"
            step="0.00000001"
            v-model="resetForm.unitPrice"
          >
            <template slot="append">每分钟费用(元)</template>
          </el-input>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="resetVisible = false">取 消</el-button>
        <el-button type="primary" @click="resetSubmit">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import pagination from "@/components/Pagination/index";
import { getEmployeeOrgan } from "@/api/buildTeam";
import emptyPage from "@/components/emptyPage";
import {
  chargeTypeList,
  getOrganizationCourseUnitPriceSettings,
  addOrganizationCourseUnitPrice,
  resetOrganizationCourseUnitPrice,
  deleteOrganizationCourseUnitPrice,
  querySingle,
} from "@/api/specialSetting";
import { getType } from "@/api/buildTeam";
import createDiscount from "./modals/create-discount";
import { musicCourseType } from "@/utils/searchArray";
export default {
  name: "typesManager",
  components: { pagination, createDiscount, emptyPage },
  data() {
    return {
      musicCourseType,
      newVisiable: false,
      resetVisible: false,
      tableList: [],
      dataList: [],
      organList: [],
      searchForm: {
        organId: null,
        courseScheduleType: null,
      },
      createForm: {
        organId: null,
        courseType: null,
        unitPriceJson: {},
      },
      resetForm: {
        unitPrice: null,
        courseType: null,
        id: null,
        organId: null,
      },
      pageInfo: {
        // 分页规则
        limit: 10, // 限制显示条数
        page: 1, // 当前页
        total: 0, // 总条数
        page_size: [10, 20, 40, 50], // 选择限制显示条数
      },
      formLabelWidth: "120px",
      actvieRow: null,
      context:
        "系统支持不同分部在不同的乐团模式中设置各课程类型的不同价格标准，该标准为具体课程类型每分钟的收费价格，在创建乐团课程组合包或乐团临时加课时，根据组合包中的课程时长或临时加课的课程时长计算应该向学员收费的标准费用。不以此标准价格创建学员缴费，则需要审核才可生效。",
      contextFlag: false,
    };
  },
  mounted() {
    getType ({
      rows: 99999,
      page: 1,
    }).then((res) => {
      if (res.code == 200) {
        this.dataList = res.data;
        this.dataList.forEach((item) => {
          this.$set(this.createForm.unitPriceJson, item.id, {
            price: null,
            id: null,
          });
        });
        if (this.dataList.length <= 0) {
          this.$bus.$emit("showguide", ["teamPayType"]);
          return;
        }
      }
    });
    // 获取分部
    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",
        });
        delChargeTypeSubjectMapper({ id: row.id }).then((res) => {
          this.messageTips("删除", res);
        });
      } catch (error) {}
    },

    getList() {
      getOrganizationCourseUnitPriceSettings({
        rows: this.pageInfo.limit,
        page: this.pageInfo.page,
        organId: this.searchForm.organId,
        courseScheduleType: this.searchForm.courseScheduleType,
      }).then((res) => {
        this.contextFlag = true;
        let result = res.data;
        this.tableList = result.rows;
        this.pageInfo.total = result.total;
        // }
      });
    },
    submitInfo() {
      console.log(this.createForm);
      this.$refs.ruleForm.validate(async (valid) => {
        const data = [];
        for (const key in this.createForm.unitPriceJson) {
          if (this.createForm.unitPriceJson.hasOwnProperty(key)) {
            const item = this.createForm.unitPriceJson[key].price;
            const id = this.createForm.unitPriceJson[key].id;
            data.push({
              chargeTypeId: key,
              courseType: this.createForm.courseType,
              organId: this.createForm.organId,
              unitPrice: item,
              id,
            });
          }
        }
        if (valid) {
          try {
            await addOrganizationCourseUnitPrice(data);
            this.$message.success("创建成功");
            this.getList();
            this.newVisiable = false;
            this.createForm = {
              organId: null,
              courseType: null,
              unitPriceJson: {},
            };
            this.dataList.forEach((item) => {
              this.$set(this.createForm.unitPriceJson, item.id, {
                price: null,
                id: null,
              });
            });
          } catch (error) {}
        }
      });
    },
    openTypes(row) {
      this.actvieRow = row;
      this.resetForm = {
        chargeTypeId: row.chargeTypeId,
        unitPrice: row.unitPrice,
        courseType: row.courseType,
        id: row.id,
        organId: row.organId,
      };
      this.resetVisible = true;
    },
    resetSubmit() {
      // resetOrganizationCourseUnitPrice
      this.$refs.resetForm.validate(async (valid) => {
        if (valid) {
          try {
            await resetOrganizationCourseUnitPrice(this.resetForm);
            this.$message.success("修改成功");
            this.getList();
            this.resetVisible = false;
            this.resetForm = {
              unitPrice: null,
              courseType: null,
              id: null,
              organId: null,
            };
          } catch (error) {}
        }
      });
    },
    changeCourseScheduleType(val) {
      if (val) {
        this.$refs.ruleForm.validateField("organId", async (flag) => {
          if (!flag) {
            try {
              const res = await querySingle(this.createForm.organId, val);
              //
              res.data.forEach((item) => {
                if (
                  this.createForm.unitPriceJson.hasOwnProperty(
                    item.chargeTypeId
                  )
                ) {
                  this.$set(this.createForm.unitPriceJson, item.chargeTypeId, {
                    price: item.unitPrice,
                    id: item.id,
                  });
                }
              });
              this.$forceUpdate();
            } catch (e) {
              console.log(e);
            }
          }
        });
      }
    },
    changeOrgan(val) {
      if (val) {
        this.$refs.ruleForm.validateField("courseType", async (flag) => {
          if (!flag) {
            try {
              const res = querySingle(val, this.createForm.courseType);
              res.data.forEach((item) => {
                if (
                  this.createForm.unitPriceJson.hasOwnProperty(
                    item.chargeTypeId
                  )
                ) {
                  this.$set(
                    this.createForm,
                    unitPriceJson[item.chargeTypeId],
                    item.unitPrice
                  );
                }
              });
            } catch (e) {
              console.log(e);
            }
          }
        });
      }
    },
  },
};
</script>
<style lang="scss" scoped>
::v-deep .el-date-editor.el-input {
  width: 100% !important;
}
.el-select {
  // width: 100% !important;
}
.createForm {
  ::v-deep .el-input {
    width: 340px !important;
  }
}
</style>