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

<template>
  <div class="m-container">
    <!-- <h2>收费类型设置</h2> -->
    <div class="m-core">
      <el-button
        class="newBand"
        type="primary"
        v-if="$helpers.permission('organizationCloudTeacherFee/add')"
        @click="openTypes('create')"
        >添加</el-button
      >

      <save-form
        :inline="true"
        @submit="onSearch"
        :saveKey="'cloudTeacherFee'"
        :model="searchForm"
      >
        <el-form-item>
          <el-select
            placeholder="请选择分部"
            v-model="searchForm.organId"
            clearable
          >
            <el-option
              v-for="(item, index) in selects.branchs"
              :key="index"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="danger" native-type="submit">搜索</el-button>
        </el-form-item>
      </save-form>
      <!-- 列表 -->
      <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="price" label="云练习价格（元）">
            <template slot-scope="scope">
              {{ scope.row.price | moneyFormat }}
            </template>
          </el-table-column>
          <el-table-column align="center" prop="price">
            <template #header>
              云练习<sup>+</sup>价格（元）
            </template>
            <template slot-scope="scope">
              {{ scope.row.plusPrice | moneyFormat }}
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            v-if="$helpers.permission('organizationCloudTeacherFee/update')"
            label="操作"
          >
            <template slot-scope="scope">
              <el-button @click="openTypes('update', scope.row)" type="text"
                >修改</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <pagination
          saveKey="cloudTeacherFee"
          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="formTitle[formActionTitle]"
      :visible.sync="typeStatus"
      @close="onFormClose('ruleForm')"
      width="500px"
    >
      <el-form :model="form" :rules="rules" ref="ruleForm">
        <el-form-item label="分部" prop="organId" :label-width="formLabelWidth">
          <el-select
            placeholder="请选择分部"
            v-model="form.organId"
            :disabled="formActionTitle == 'update'"
          >
            <el-option
              v-for="(item, index) in selects.branchs"
              :key="index"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="云练习价格"
          prop="price"
          :label-width="formLabelWidth"
        >
          <el-input
            v-model.number="form.price"
            placeholder="请输入价格"
            type="number"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item prop="plusPrice" :label-width="formLabelWidth">
          <template #label>
            云练习<sup>+</sup>价格
          </template>
          <el-input
            v-model.number="form.plusPrice"
            placeholder="请输入价格"
            type="number"
            autocomplete="off"
          ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="typeStatus = false">取 消</el-button>
        <el-button type="primary" @click="onTypesSubmit('ruleForm')"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>
<script>
import pagination from "@/components/Pagination/index";
import {
  organizationCloudTeacherFeeQueryPage,
  organizationCloudTeacherFeeAdd,
  organizationCloudTeacherFeeUpdate
} from "@/api/specialSetting";
export default {
  name: "typesManager",
  components: { pagination },
  data() {
    return {
      tableList: [],
      searchForm: {
        organId: null
      },
      formActionTitle: "create",
      formTitle: {
        create: "添加分部云练习价格",
        update: "修改分部云练习价格"
      },
      typeStatus: false, // 添加教学点
      formLabelWidth: "120px",
      form: {
        organId: null, //
        price: null,
        plusPrice: null
      },
      rules: {
        organId: [{ required: true, message: "请选择分部", trigger: "change" }],
        price: [{ required: true, message: "请输入价格", trigger: "blur" }],
        plusPrice: [{ required: true, message: "请输入价格", trigger: "blur" }]
      },
      pageInfo: {
        // 分页规则
        limit: 10, // 限制显示条数
        page: 1, // 当前页
        total: 0, // 总条数
        page_size: [10, 20, 40, 50] // 选择限制显示条数
      }
    };
  },
  mounted() {
    // 获取分部
    this.$store.dispatch("setBranchs");
    this.getList();
  },
  methods: {
    onSearch() {
      this.pageInfo.page = 1;
      this.getList();
    },
    onTypesSubmit(formName) {
      // 添加数据
      this.$refs[formName].validate(valid => {
        if (valid) {
          if (this.formActionTitle == "create") {
            if (this.form.id) {
              // 判断有没有Id，如果有则删除
              delete this.form.id;
            }
            organizationCloudTeacherFeeAdd(this.form).then(res => {
              this.messageTips("添加", res);
            });
          } else if (this.formActionTitle == "update") {
            organizationCloudTeacherFeeUpdate(this.form).then(res => {
              this.messageTips("修改", res);
            });
          }
        } else {
          return false;
        }
      });
    },
    messageTips(title, res) {
      if (res.code == 200) {
        this.$message.success(title + "成功");
        this.typeStatus = false;
        this.getList();
      } else {
        this.$message.error(res.msg);
      }
    },
    async getList() {
      try {
        let res = await organizationCloudTeacherFeeQueryPage({
          ...this.searchForm,
          rows: this.pageInfo.limit,
          page: this.pageInfo.page
        });
        let result = res.data;
        this.tableList = result.rows;
        this.pageInfo.total = result.total;
      } catch {
        //
      }
    },
    openTypes(type, row) {
      this.typeStatus = true;
      this.formActionTitle = type;
      // 修改的时候赋值
      if (type == "update") {
        this.$nextTick(() => {
          this.form = {
            id: row.id,
            organId: row.organId,
            price: row.price,
            plusPrice: row.plusPrice
          };
        });
      }
    },
    onFormClose(formName) {
      // 关闭弹窗重置验证
      this.form = {
        organId: null, // 训练模块名称
        price: null,
        plusPrice: null
      };
      this.$refs[formName].resetFields();
    }
  }
};
</script>
<style lang="scss" scoped>
::v-deep .el-date-editor.el-input {
  width: 100% !important;
}
.el-select {
  width: 100% !important;
}
</style>