byte-sailing-mobile/src/views/product-material/material-classification/index.vue

<template>
  <div style="padding-bottom: 60px">
    <van-nav-bar :title="$t('classification.name')" left-text="" left-arrow @click-left="onClickLeft"> </van-nav-bar>
    <van-pull-refresh v-model="loading" @refresh="onRefresh">
      <div class="list">
        <van-list v-model:loading="loading" :finished="finished" finished-text="" @load="onLoad" style="margin-bottom: 60px">
          <commonList :data="[]" :config="listConfig"> </commonList>
          <treeNav
            :tree-data="listData"
            @clickAdd="(item) => clickAdd(item)"
            @clickUpdate="(item) => clickUpdate(item)"
            @clickDelete="(item) => clickDelete(item)">
          </treeNav>
          <div style="margin: 16px">
            <van-button round block type="primary" @click="clickAdd({ id: '' })">{{$t('classification.addFirstLevelNode')}}</van-button>
          </div>
        </van-list>
      </div>
    </van-pull-refresh>
  </div>
</template>
<script setup>
import { ref, getCurrentInstance } from "vue";
import commonList from "@/components/common-list.vue";
import treeNav from "@/components/tree-nav.vue";
import { useRoute } from "vue-router";
import { showConfirmDialog } from "vant";
import { showSuccessToast } from "vant";

const loading = ref(false);
const router = useRoute();
const req = ref({
  pageNum: 1,
  type: "1",
  keyword: null,
});
const finished = ref(false);
const proxy = getCurrentInstance().proxy;
const listData = ref([]);
const listConfig = ref([
  {
    label: "",
    prop: "label",
  },
]);
const onRefresh = () => {
  finished.value = false;
  getList("refresh");
};
const onLoad = () => {
  getList();
};
const onClickLeft = () => proxy.$router.push("/main/working");
const getList = (type) => {
  loading.value = true;
  proxy
    .post("/productClassify/tree", { parentId: "", name: "", definition: "2" })
    .then((res) => {
      listData.value = res.data;
      finished.value = true;
      loading.value = false;
    })
    .catch((err) => {
      loading.value = false;
    });
};
const clickAdd = (row) => {
  proxy.$router.push({
    path: "/main/materialClassificationAdd",
    query: {
      parentId: row.id,
    },
  });
};
const clickUpdate = (row) => {
  proxy.$router.push({
    path: "/main/materialClassificationEdit",
    query: {
      id: row.id,
      name: row.label,
    },
  });
};
const clickDelete = (row) => {
  showConfirmDialog({
    title: proxy.t('common.prompt'),
    message: proxy.t('classification.confirmToDeleteTheClassification'),
  })
    .then(() => {
      proxy
        .post("/productClassify/delete", {
          id: row.id,
        })
        .then((res) => {
          showSuccessToast(proxy.t('common.deleteSuccess'));
          getList();
        });
    })
    .catch(() => {
      // on cancel
    });
};
getList();
</script>

<style lang="scss" scoped>
.list {
  min-height: 70vh;
}
::v-deep {
  .van-collapse-item__content {
    padding: 8px 0 8px 8px !important;
  }
}
</style>