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

<template>
  <div v-if="labelForm.labelFlag == 1" >
    <div v-if="labelForm.labelArr.length == 0">
      你未添加标签，请先添加标签后再来设置规则
    </div>
    <el-collapse v-model="activeNames" @change="handleChange" class="collapse" accordion>
      <el-collapse-item title="标签2" name="2">
        <div>
          控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；
        </div>
        <div>页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。</div>
      </el-collapse-item>
      <el-collapse-item title="标签3" name="3">
        <div>简化流程：设计简洁直观的操作流程；</div>
        <div>
          清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；
        </div>
        <div>
          帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。
        </div>
      </el-collapse-item>
    </el-collapse>
  </div>
  <div v-else>你未启用标签功能</div>
</template>

<script>
import { sysDeptDemoList, labelRulelist } from "@/api/label/label";
import { listPrice } from "@/api/station/price";
export default {
  name:"Label_SetLabel",
  data() {
    return {
      activeNames: ["1"],
      discountList: [
        {
          searchValue: null,
          createBy: "13",
          createTime: "2021-06-16 09:40:39",
          updateBy: null,
          updateTime: null,
          remark: null,
          params: {},
          stationIdList: null,
          id: 26,
          grade: "92#",
          discountTerm: "2",
          discountAmt: "100",
          gasoilDiscountAmt: "1",
          vipDiscountyPlus: "0",
          couponPlus: "0",
          discountPlanType: "3",
          oilName: "92#",
          stationId: 123,
          stationName: "智慧易加-西站",
          status: "0",
        },
        {
          searchValue: null,
          createBy: "13",
          createTime: "2021-06-16 09:40:58",
          updateBy: null,
          updateTime: null,
          remark: null,
          params: {},
          stationIdList: null,
          id: 27,
          grade: "95#",
          discountTerm: "2",
          discountAmt: "100",
          gasoilDiscountAmt: "1",
          vipDiscountyPlus: "0",
          couponPlus: "0",
          discountPlanType: "3",
          oilName: "95#",
          stationId: 123,
          stationName: "智慧易加-西站",
          status: "0",
        },
        {
          searchValue: null,
          createBy: "13",
          createTime: "2021-06-16 09:45:56",
          updateBy: null,
          updateTime: null,
          remark: null,
          params: {},
          stationIdList: null,
          id: 28,
          grade: "98#",
          discountTerm: "2",
          discountAmt: "100",
          gasoilDiscountAmt: "0.5",
          vipDiscountyPlus: "0",
          couponPlus: "0",
          discountPlanType: "3",
          oilName: "98#",
          stationId: 123,
          stationName: "智慧易加-西站",
          status: "0",
        },
      ],
      openDialog: false,
      updateForm: {},
      labelForm: {},
      oilNameOptions: [],
    };
  },
  created() {
    this.init();
    // setTimeout(() => {
    //   console.log("哈哈");
    //   console.log(this.oilNameOptions);
    //   const arr = this.filterOilNameOptions([
    //     {
    //       oilName: "92#",
    //     },
    //   ]);
    //   console.log(arr);
    // }, 1000);
  },
  methods: {
    init() {
      this.getList();
      listPrice().then((response) => {
        this.oilNameOptions = response.rows;
        console.log(this.oilNameOptions);
      });
    },
    handleChange(val) {
      console.log(val);
    },
    addRule(e) {
      e.stopPropagation();
      console.log(1);
      this.openDialog = true;
    },
    handleSubmit() {},
    cancelSubmit() {},
    getList() {
      return sysDeptDemoList().then((res) => {
        if (res.code == 200) {
          this.labelForm = res.data;
          console.log(this.labelForm);
        } else {
          this.msgError("初始化数据失败");
        }
      });
    },
    filterOilNameOptions(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>