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
            }}</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"
                      min="0"
                      step="0.00000001"
                      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"
                    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 {
  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>