shenze-sysMan/src/views/labelMan/index.vue

<template>
  <div class="advertRuleIdx">
    <s-header :name="$t('labelMan.title')" :noback="false"></s-header>
    <div v-if="isDelete" class="headCon l-flex-between o-plr-15 o-pt-5 o-pb-5 kBordBott">
      <div class="l-flex-RC c-text-15 c-text-color c-text-b">
        {{ $t("advertManage.advertRule.selected") }}
        {{ selectTotals }}
        {{ $t("advertManage.advertRule.individual") }}
      </div>
      <div class="l-flex-RC">
        <div @click="cancelClk" class="c-text-c c-text-13 c-color">
          {{ $t("advertManage.advertRule.cancel") }}
        </div>
        <div @click="noticeClk" class="c-text-c o-ml-24 c-text-13" style="color: #df5e4c">
          {{ $t("advertManage.advertRule.confirmDel") }}
        </div>
      </div>
    </div>
    <div v-else class="headCon l-flex-between o-plr-15 o-pt-5 o-pb-5 kBordBott">
      <div class="l-flex-RC">
        <!-- <img class="ruleIcon o-mr-10" src="@/assets/advertManage/ruleIcon.png" alt="" /> -->
        <div class="ruleIcon o-mr-10"></div>
        <div class="c-text-color c-text-b c-text-15">
          {{ $t("advertManage.advertRule.total")
          }}<span class="c-text-20" style="color: #df5e4c">{{
  ruleTotal
}}</span>
          {{ $t("alarmHistory.recordsTotal") }}
        </div>
      </div>
      <div class="l-flex-RC">
        <div @click="toAdd" class="c-text-c">
          <div>
            <van-icon size="18" name="add-o" />
          </div>
          <div class="c-text-color c-text-12">
            {{ $t("advertManage.advertRule.add") }}
          </div>
        </div>
        <div @click="isDelete = true" class="c-text-c o-ml-24">
          <div>
            <van-icon size="18" name="close" />
          </div>
          <div class="c-text-color c-text-12">
            {{ $t("advertManage.advertRule.delete") }}
          </div>
        </div>
      </div>
    </div>
    <kTabs tabWidth="100%" @tabchg="tabChg" :tabList="tabList"></kTabs>
    <div class="contentCon">
      <div @click.self="toEdit(item)" v-for="item in tableData" :key="item.id"
        class="o-plr-20 o-pt-24 o-pb-12 l-flex-between kBordBott content">
        <div>
          <div class="l-flex-RC">
            <span class="c-color c-text-12">{{ $t("labelMan.labelName") }}：</span>
            <span class="c-text-color c-text-12">{{ item.name }}</span>
          </div>
          <div class="l-flex-RC">
            <span class="c-color c-text-12">{{ $t("advertManage.advertRule.createTime") }}：</span>
            <span class="c-text-color c-text-12">{{
              Format_time(item.createDate)
            }}</span>
          </div>
        </div>
        <div class="rightCon">
          <template v-if="isDelete">
            <van-checkbox v-model="item.checked">{{ " " }}</van-checkbox>
          </template>
          <template v-else>
            <div @click="toEdit(item)" class="editBtn c-text-14">
              {{ $t("advertManage.advertRule.edit") }}
            </div>
          </template>
        </div>
      </div>
    </div>
    <!-- 删除确认弹窗 -->
    <kDialog :dialogTitle="$t('advertManage.delPopTitle')" :cancelBtnTxt="$t('advertManage.cancelTxt')"
      :confirmBtnTxt="$t('advertManage.confirmDel')" ref="kDialogRef" :dialogContent="$t('advertManage.delPopContent')"
      @confirmclk="confirmClk">
    </kDialog>
  </div>
</template>

<script>
// 导入tab组件
import kTabs from "../../components/commom/kTabs/index.vue";
// 导入公用方法
import { Format_time, getLoginUser, styleUrl } from "../../common/js/utils";
// 导入弹窗
import kDialog from "../../components/commom/kDialog/index.vue";
// 导入接口
import { Api_getLabelList, Api_getDelLabel } from "../../service/labelMan";
import { computed, onMounted, reactive, ref, toRefs } from "vue";
import sHeader from "../../components/SimpleHeader";
import { useRouter } from "vue-router";
import { Toast } from "vant";
import { useI18n } from "vue-i18n";
export default {
  components: { sHeader, kDialog, kTabs },
  setup() {
    const { t } = useI18n();
    // 点击tab
    const tabChg = (e) => {
      searchParam.type = e;
      getList();
    };
    // tab栏
    const tabList = ref([
      {
        name: t('labelMan.merchant'),
        icon: "",
        id: 1,
      },
      {
        name: t('labelMan.machine'),
        icon: "",
        id: 2,
      },
    ]);
    // 获取登陆信息
    const user = getLoginUser();
    // 删除确认弹窗
    const kDialogRef = ref(null);
    // 点击确认删除
    const noticeClk = () => {
      if (selectTotals.value < 1) {
        Toast(t("advertManage.delTips"));
        return;
      }
      kDialogRef.value.openDialog();
    };
    // 点击右侧按钮
    const confirmClk = () => {
      const ids = [];
      ruleData.tableData.forEach((item) => {
        if (item.checked) {
          ids.push(item.id);
        }
      });
      let param = {
        ids,
      };
      Api_getDelLabel(param).then((res) => {
        console.log(res);
        if (res.data.code === "00000") {
          isDelete.value = false;
          Toast(res.data.message);
          setTimeout(() => {
            getList();
          }, 500);
        }
      });
    };
    // 是否删除状态
    const isDelete = ref(false);
    // 选中
    const selectTotals = computed(() => {
      let nums = 0;
      if (ruleData.tableData.length > 0) {
        ruleData.tableData.forEach((item) => {
          if (item.checked) {
            nums++;
          }
        });
      }
      return nums;
    });
    // 点击取消删除
    const cancelClk = () => {
      // 把选中状态去掉
      if (ruleData.tableData.length > 0) {
        ruleData.tableData.forEach((item) => {
          if (item.checked) {
            item.checked = false;
          }
        });
      }
      isDelete.value = false;
    };
    // 多少条规则
    const ruleTotal = ref(0);
    // 定义列表数据
    let ruleData = reactive({
      tableData: [],
    });
    // 刚进入页面
    onMounted(() => {
      styleUrl('labelMan');
      getList();
    });
    // 筛选条件
    const searchParam = {
      adminId: user.id,
      type: 0,
    }
    // 获取列表
    const getList = () => {
      Api_getLabelList(searchParam).then((res) => {
        const { data } = res.data;
        console.log("data", data);
        // 加入删除选中状态
        if (data.length > 0) {
          data.forEach((item) => {
            item.checked = false;
          });
        }
        ruleData.tableData = data;
        // 总共
        ruleTotal.value = data.length;
      });
    };
    const router = useRouter();
    // 点击添加按钮
    const toAdd = () => {
      router.push("/labelManAdd");
    };
    // 点击编辑
    const toEdit = (row) => {
      // 如果是删除模式，则是选中和取消状态
      if (isDelete.value) {
        ruleData.tableData.forEach((item) => {
          if (item.id === row.id) {
            item.checked = !item.checked;
          }
        });
      } else {
        router.push(`/labelManAdd?row=${JSON.stringify(row)}`);
      }
    };
    return {
      getList,
      ...toRefs(ruleData),
      isDelete,
      selectTotals,
      cancelClk,
      ruleTotal,
      toAdd,
      confirmClk,
      kDialogRef,
      noticeClk,
      toEdit,
      Format_time,
      tabList,
      tabChg,
    };
  },
};
</script>

<style lang="less" scoped></style>