shenze-sysMan/src/views/device/editAdRule/index.vue

<template>
  <div class="tagSetIdx">
    <s-header :name="$t('device.editAdRule.title')" :noback="false"></s-header>
    <div class="o-p-10 cust_vantBorder">
      <div class="l-flex-between kBordBott o-pb-20">
        <div
            class="c-border o-ptb-10 o-plr-12 l-flex-RC l-flex-w o-w"
            style="padding-bottom: 0; min-height: 36px;"
        >
          <div
              class="c-border l-flex-RC o-p-3 c-color-f o-mr-10 o-mb-10"
              style="background: #e59a6d; border: 1px solid #e59a6d"
              v-for="(item, index) in tagList"
              :key="index"
          >
            <span class="o-mr-3">{{ item.name }}</span>
            <van-icon @click.stop="delTag(item, index)" name="clear" />
          </div>
        </div>
        <div @click="submitClk" class="submitBtn o-ml-10">
          <van-button round type="primary">{{
              $t("device.editAdRule.submitPush")
            }}</van-button>
        </div>
      </div>
      <van-field
          colon
          :border="false"
          v-model="cofficentForm.name"
          clearable
          :placeholder="$t('device.editAdRule.ruleNamePlace')"
          :label="$t('device.editAdRule.ruleName')"
      />
      <div class="l-flex-center" style="margin: 16px">
        <van-button round class="searchBtn" type="primary" size="large" @click="toSearch">
          {{ $t("advertManage.advertRule.addRule.search") }}
        </van-button>
      </div>
      <div class="o-mt-30">
        <div class="l-flex-RC l-flex-w">
          <div
              @click="addAllTag(item)"
              class="c-border l-flex-RC o-p-3 c-color-f o-mr-10 o-mb-10"
              style="background: #e59a6d; border: 1px solid #e59a6d"
              v-for="(item, index) in allTagList"
              :key="index"
          >
            <span class="o-mr-3">{{ item.name }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// 导入接口
import {
  Api_getTTimeRules,
  Api_getUpdateEquimentpTimeRule,
} from "@/service/advertManage";
import sHeader from "@/components/SimpleHeader";
import { onMounted, reactive, ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import { showToast } from "vant";
import { useI18n } from "vue-i18n";
export default {
  components: { sHeader },
  setup() {
    const { t } = useI18n();
    const router = useRouter();
    const route = useRoute();
    const cofficentForm = reactive({
      name: "",
      equipmentId: "",
    });
    const tagList = ref([]);
    // 所有标签
    const allTagList = ref([]);
    // 刚进页面
    onMounted(() => {
      const val = route.query.deviceId || "";
      cofficentForm.equipmentId = val;
      const adRuleList = route.query.adRuleList;
      tagList.value = JSON.parse(adRuleList);
    });
    // 点击搜索
    const toSearch = () => {
      Api_getTTimeRules(cofficentForm).then((res) => {
        console.log("res", res);
        allTagList.value = res.data.data || [];
      });
    };
    // 点击所有标签
    const addAllTag = (row) => {
      tagList.value = [row];
    };
    // 点击删除
    const delTag = (row, idx) => {
      tagList.value.splice(idx, 1);
    };
    // 点击添加
    const submitClk = () => {
      if (tagList.value.length > 0) {
        const param = {
          equipmentId: cofficentForm.equipmentId,
          timeRuleId: tagList.value[0]["id"],
        };
        Api_getUpdateEquimentpTimeRule(param).then((res) => {
          console.log("res", res);
          if (res.data.code === "00000") {
            setTimeout(() => {
              router.back();
            }, 300);
          }
        });
      } else {
        showToast(t("device.editAdRule.adRulePlace"));
      }
    };
    return {
      cofficentForm,
      tagList,
      allTagList,
      toSearch,
      addAllTag,
      delTag,
      submitClk,
    };
  },
};
</script>

<style lang="less" scoped>
.tagSetIdx {
  height: calc(100%-44px);
  overflow: hidden;
  overflow-y: auto;
  .submitBtn {
    flex: 0 0 80px;

    :deep(.van-button--round) {
      width: 100%;
    }
  }

  .searchBtn {
    width: 50%;
  }

  .van-button--primary {
    background-color: #4d6add;
    border-color: #4d6add;
  }
}
</style>