SAAS-FRONTEND/src/views/customer/Customer_Grade.vue

<template>
  <div class="app-container" style="padding-top: 5px">
    <!--固态等级-->
    <p style="margin: 5px">
      <el-button
        class="settingButton"
        type="primary"
        icon="el-icon-plus"
        size="mini"
        @click="handleAdd"
        >添加等级</el-button
      >
    </p>
    <el-table :data="settingList">
      <af-table-column label="油品名称" align="center" prop="oilName" />
      <af-table-column label="等级名称" align="center" prop="grade" />
      <af-table-column label="会员条件(元)" align="center">
        <template slot-scope="scope">
          {{ scope.row.memberConditStart }} ≤累计历史消费金额&lt;{{
            scope.row.memberConditEnd
          }}
        </template>
      </af-table-column>

      <af-table-column label="优惠 (元/L)" align="center" prop="discountAmt" />
      <af-table-column
        label="操作"
        align="center"
        class-name="small-padding fixed-width "
        width="120px"
      >
        <template slot-scope="scope">
          <!-- <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
            >修改</el-button
          > -->
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
            >删除</el-button
          >
        </template>
      </af-table-column>
    </el-table>
    <!-- 添加或修改客户优惠等级设置对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="90px">
        <el-form-item label="油品名称" prop="oilName">
          <el-select
            v-model="form.oilName"
            placeholder="油品名称"
            clearable
            size="small"
          >
            <el-option
              v-for="dict in oilNameOptions"
              :key="dict.oilName"
              :label="dict.oilName"
              :value="dict.oilName"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="等级名称" prop="grade">
          <el-input v-model="form.grade" placeholder="请输入等级名称" />
        </el-form-item>
        <el-form-item label="会员条件" prop="memberConditEnd" required>
          <div>
            <el-input-number
              v-model="form.memberConditStart"
              style="width: 110px"
              size="mini"
              :min="0"
            />
            ≤累计消费金额(元)&lt;
            <el-input-number
              v-model="form.memberConditEnd"
              style="width: 110px"
              size="mini"
              :min="0"
            />
          </div>
          <span
            ><font style="color: red; size: 10px"
              >注：优惠条件按照累计历史消费金额计算</font
            ></span
          >
        </el-form-item>
        <el-form-item label="优惠金额" prop="discountAmt">
          <el-input-number
            v-model="form.discountAmt"
            size="mini"
            :min="0"
            placeholder="请输入优惠金额"
          />
          元/L
        </el-form-item>
        <el-form-item label="类型" v-show="false" prop="growthValue">
          <el-input v-model="form.gradeType" value="1" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  listSetting,
  getSetting,
  delSetting,
  addSetting,
  updateSetting,
} from "@/api/customer/setting";

import { listPrice } from "@/api/station/price";
export default {
  name: "Customer_Grade",
  data() {
    const validatorMemberConditEnd = (rule, value, callback) => {
      if (!value) {
        callback(new Error("请填入会员条件"));
        return;
      }
      const start = +this.form.memberConditStart;
      const end = +value;
      if (isNaN(start) || isNaN(end)) {
        callback(new Error("请填入数字"));
        return;
      }
      if (start >= end) {
        console.log(start, end);
        callback(new Error("请检查数字逻辑有效性"));
        return;
      }
      callback();
    };
    return {
      // 总条数
      total: 0,
      settingList: [],
      //下拉油品名称
      oilNameOptions: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 100,
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        oilName: [{ required: true, message: "请填写联系人", trigger: "blur" }],
        grade: [{ required: true, message: "请填写等级名称", trigger: "blur" }],
        memberConditEnd: [
          { validator: validatorMemberConditEnd, trigger: "change" },
        ],
        discountAmt: [
          { required: true, message: "请填写优惠金额", trigger: "blur" },
        ],
      },
    };
  },
  created() {
    this.getList();
    listPrice().then((response) => {
      this.oilNameOptions = response.rows;
    });
  },
  methods: {
    /** 查询客户优惠等级设置列表 */
    getList() {
      listSetting(this.queryParams).then((response) => {
        this.settingList = response.rows;
        this.total = response.total;
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
    },

    /** 新增按钮操作 */
    handleAdd() {
      this.open = true;
      this.title = "添加客户优惠等级";
      this.form = {};
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      const id = row.id;
      this.form = row;
      this.open = true;
      this.title = "修改客户优惠等级";
    },

    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          if (this.form.id != null) {
            updateSetting(this.form).then((response) => {
              this.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            addSetting(this.form).then((response) => {
              this.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },

    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id;
      this.$confirm("确认删除该条等级优惠信息?", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(function () {
          return delSetting(ids);
        })
        .then(() => {
          this.getList();
          this.msgSuccess("删除成功");
        });
    },
  },
};
</script>
<style>
.two {
  margin-top: 30px;
}
.settingButton {
  border: 0px;
  float: right;
}
.cutLine {
  width: 65px;
  height: 2px;
  background: #71f332;
  /*margin-top: 5px;*/
  margin-left: 5px;
  margin-bottom: 20px;
}
.textlineHeader {
  /*margin-bottom: 20px;*/
  font-family: Bahnschrift;
  /*text-shadow: #32a9f3 1px 1px 1px;*/
  /*font-size: ;*/
  color: #32a9f3;
}
</style>