SAAS-FRONTEND/src/views/label/Label_SetLabel.vue

<template>
  <div v-if="labelForm.labelFlag == 1">
    <div v-if="labelForm.labelArr.length == 0">
      你未添加标签，请先添加标签后再来设置规则
    </div>
    <el-collapse v-model="activeNames" class="collapse">
      <el-collapse-item
        :title="ele.labelName"
        :name="ele.id"
        v-for="(ele, index) in labelForm.labelArr"
        :key="ele.id"
      >
        <template slot="title">
           标签{{index + 1}} <i class="header-icon el-icon-info"></i> <b>{{ ele.labelName}}</b>
        </template>
        <div v-if="(ele.labelRuleDetailList || []).length == 0">
          此条标签下面没有规则
        </div>
        <div
          style="margin-left: 200px; float: right"
          @click="addRule($event, ele)"
        >
          <i class="header-icon el-icon-plus"></i>添加规则
        </div>
        <el-table
          :data="ele.labelRuleDetailList"
          v-if="(ele.labelRuleDetailList || []).length != 0"
        >
          <af-table-column label="油品名称" align="center" prop="oilName" />
          <af-table-column label="优惠条件" align="center">
            <template slot-scope="scope">
              满 {{ scope.row.discountAmt }}
              {{ scope.row.discountTerm == 2 ? "元" : "L" }}，每升优惠
              {{ scope.row.discountLitersAmt }} 元
            </template>
          </af-table-column>
          <af-table-column
            label="优惠条件金额"
            v-if="false"
            align="center"
            prop="discountAmt"
          />
          <af-table-column
            label="优惠金额"
            v-if="false"
            align="center"
            prop="discountLitersAmt"
          />
          <af-table-column
            label="优惠方案类型"
            v-if="false"
            align="center"
            prop="discountPlanType"
          />
          <af-table-column
            label="操作"
            align="center"
            class-name="small-padding fixed-width"
          >
            <template slot-scope="scope">
              <!-- <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
            >修改</el-button
          > -->
              <el-popconfirm
                title="确认删除此条规则？"
                confirm-button-text="删除"
                @onConfirm="handleDelete(scope.row, ele)"
              >
                <el-button
                  slot="reference"
                  size="mini"
                  type="text"
                  icon="el-icon-delete"
                  >删除</el-button
                >
              </el-popconfirm>
            </template>
          </af-table-column>
        </el-table>
      </el-collapse-item>
    </el-collapse>
    <el-dialog
      :visible.sync="openDialog"
      width="600px"
      append-to-body
      title="满减"
    >
      <el-form ref="addRulesForm" :model="addRulesForm" label-width="140px">
        <el-form-item label="油品名称" prop="oilName">
          <el-select
            v-model="addRulesForm.oilName"
            placeholder="油品名称"
            clearable
          >
            <el-option
              v-for="dict in filterOilNameOptions"
              :key="dict.oilName"
              :label="dict.oilName"
              :value="dict.oilName"
            />
          </el-select>
        </el-form-item>
        <el-form-item
          label="优惠条件"
          prop="discountLitersAmt"
          :rules="{
            required: true,
            message: '优惠条件不能为空',
            trigger: 'blur',
          }"
        >
          <el-radio-group v-model="addRulesForm.discountTerm">
            <el-radio :label="2">按加油金额优惠</el-radio>
            <el-radio :label="1">按加油升数优惠</el-radio>
          </el-radio-group>
          <div
            v-show="
              addRulesForm.discountTerm == 2 || addRulesForm.discountTerm == 1
            "
          >
            满
            <el-input-number
              v-model="addRulesForm.discountAmt"
              size="mini"
              :min="0"
            />

            <span>{{ addRulesForm.discountTerm == 1 ? "L" : "元" }}</span>
            ，每升优惠
            <el-input-number
              v-model="addRulesForm.discountLitersAmt"
              size="mini"
              :min="0"
            />元
          </div>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="handleSubmit">确 定</el-button>
        <el-button @click="cancelSubmit">取 消</el-button>
      </div>
    </el-dialog>
  </div>
  <div v-else>你未启用标签功能</div>
</template>

<script>
import {
  sysDeptDemoList,
  labelRulelist,
  selectLabelList,
  deleteLabelRuleDetail,
  addDetail,
  detailList,
} from "@/api/label/label";
import { listPrice } from "@/api/station/price";
export default {
  name: "Label_SetLabel",
  data() {
    return {
      activeNames: ["1"],
      openDialog: false,
      addRulesForm: {},
      labelForm: {},
      oilNameOptions: [],
      filterOilNameOptions: [],
      currentLabel: {},
    };
  },
  created() {
    this.init();
  },
  methods: {
    init() {
      this.getList();
      this.getOilName();
    },
    getOilName() {
      listPrice().then((response) => {
        console.log(response);
        if (response.code == 200) {
          this.oilNameOptions = response.rows;
        } else {
          this.msgError("拉取油品名失败");
        }
      });
    },
    addRule(e, ele) {
      e.stopPropagation();
      this.currentLabel = ele;
      this.addRulesForm = {};
      this.addRulesForm.parentId = ele.id;
      this.filterOilNameOptions = this.filterOilNameOptionsMethod(
        ele.labelRuleDetailList
      );
      this.openDialog = true;
    },
    handleSubmit() {
      this.$refs["addRulesForm"].validate((valid) => {
        if (valid) {
          addDetail(this.addRulesForm).then((res) => {
            if (res.code == 200) {
              this.openDialog = false;
              this.getSingleList(this.currentLabel);
            } else {
              this.msgError("添加规则失败");
            }
          });
        }
      });
    },
    cancelSubmit() {
      this.openDialog = false;
    },
    getList() {
      return selectLabelList().then((res) => {
        if (res.code == 200) {
          this.labelForm = res.data;
          console.log(this.labelForm);
        } else {
          this.msgError("初始化数据失败");
        }
      });
    },
    getSingleList(ele) {
      detailList({
        parentId: ele.id,
      }).then((res) => {
        if (res.code == 200) {
          ele.labelRuleDetailList = res.rows;
        } else {
          this.msgError("查询失败，请刷新此页面");
        }
      });
    },
    handleDelete(row, ele) {
      deleteLabelRuleDetail({
        id: row.id,
      }).then((res) => {
        if (res.code == 200) {
          this.getSingleList(ele);
        } else {
          this.msgError("删除此条规则失败");
        }
      });
    },
    filterOilNameOptionsMethod(arr) {
      if (arr == null) {
        arr = [];
      }
      return this.oilNameOptions.filter((ele) => {
        let flag = true;
        arr.forEach((item) => {
          if (ele.oilName == item.oilName) {
            flag = false;
          }
        });
        return flag;
      });
    },
  },
};
</script>
<style lang="scss">
.collapse {
  width: 600px;
  margin: 0 auto;
  .el-collapse-item__wrap {
    // border-bottom: 1px solid;
  }
}
</style>