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

<template>
  <div class="m-container">
    <!-- <h2>折扣设置</h2> -->
    <div class="m-core">
      <el-form :inline="true" :model="searchForm">
        <el-form-item>
          <el-select
            placeholder="请选择分部"
            v-model="searchForm.organId"
            clearable
          >
            <el-option
              v-for="(item, index) in organList"
              :label="item.name"
              :value="item.id"
              :key="index"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <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" @click="search">搜索</el-button>
          <el-button @click="onReSet" type="primary">重置</el-button>
        </el-form-item>
      </el-form>
      <div
        class="newBand"
        v-permission="'organizationCourseUnitPriceSettings/insert'"
        @click="newVisiable = true"
      >
        添加
      </div>
      <!-- 列表 -->
      <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 | moneyFormat
            }}</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
          :total="pageInfo.total"
          :page.sync="pageInfo.page"
          :limit.sync="pageInfo.limit"
          :page-sizes="pageInfo.page_size"
          @pagination="getList"
        />
      </div>
    </div>
    <el-dialog
      title="新建"
      destroy-on-close
      :visible.sync="newVisiable"
      width="500px"
    >
      <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"
            clearable
          >
            <el-option
              v-for="(item, index) in organList"
              :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="createForm.courseType"
            filterable
            placeholder="请选择课程类型"
            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}`"
          >
            <el-input type="number" v-model="createForm.unitPriceJson[item.id]">
              <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"
      destroy-on-close
    >
      <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 organList"
              :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" 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 {
  chargeTypeList,
  getOrganizationCourseUnitPriceSettings,
  addOrganizationCourseUnitPrice,
  resetOrganizationCourseUnitPrice,
  deleteOrganizationCourseUnitPrice,
} from "@/api/specialSetting";
import createDiscount from "./modals/create-discount";
import { musicCourseType } from "@/utils/searchArray";
export default {
  name: "typesManager",
  components: { pagination, createDiscount },
  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,
    };
  },
  mounted() {
    chargeTypeList({
      rows: 99999,
      page: 1,
    }).then((res) => {
      if (res.code == 200) {
        this.dataList = res.data.rows;
        this.dataList.forEach((item) => {
          this.$set(this.createForm.unitPriceJson, item.id, null);
        });
        console.log(this.createForm);
      }
    });
    getEmployeeOrgan().then((res) => {
      if (res.code == 200) {
        this.organList = res.data;
      }
    });
    this.getList();
  },
  methods: {
    search() {
      this.pageInfo.page = 1;
      this.getList();
    },
    onReSet() {
      this.searchForm = {
        organId: null,
        courseScheduleType: null,
      };
      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) => {
        let result = res.data;
        this.tableList = result.rows;
        this.pageInfo.total = result.total;
        // }
      });
    },
    submitInfo() {
      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];
            data.push({
              chargeTypeId: key,
              courseType: this.createForm.courseType,
              organId: this.createForm.organId,
              unitPrice: item,
            });
          }
        }
        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, 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) {}
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.el-button--primary {
  background: #14928a;
  border-color: #14928a;
  color: #fff;
  &:hover,
  &:active,
  &:focus {
    background: #14928a;
    border-color: #14928a;
    color: #fff;
  }
}
/deep/.el-date-editor.el-input {
  width: 100% !important;
}
.el-select {
  width: 100% !important;
}
.createForm {
  /deep/.el-input {
    width: 340px !important;
  }
}
</style>