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

<template>
  <div class="m-container">
    <!-- <h2>折扣设置</h2> -->
    <div>
      <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>
    <el-dialog
      title="新建"
      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"
            @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: 'blur' },
          ]"
          prop="courseType"
          :label-width="formLabelWidth"
        >
          <el-select
            v-model.trim="createForm.courseType"
            filterable
            placeholder="请选择课程类型"
            @change="changeCourseScheduleType"
            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"
      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 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 {
  chargeTypeList,
  getOrganizationCourseUnitPriceSettings,
  addOrganizationCourseUnitPrice,
  resetOrganizationCourseUnitPrice,
  deleteOrganizationCourseUnitPrice,
  querySingle,
} 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, {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) => {
        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);
             console.log(this.createForm.unitPriceJson)

              //
              res.data.forEach((item) => {
                if (
                  this.createForm.unitPriceJson.hasOwnProperty(
                    item.chargeTypeId
                  )
                ) {
                  this.$set(
                    this.createForm.unitPriceJson,
                    item.chargeTypeId,
                    {price:item.unitPrice,id:item.id}
                  );
                }
              });
            } 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>
/deep/.el-date-editor.el-input {
  width: 100% !important;
}
.el-select {
  // width: 100% !important;
}
.createForm {
  /deep/.el-input {
    width: 340px !important;
  }
}
</style>