foster-pc-vue/src/views/ns_allot/components/Nslb.vue

<template>
  <div style="border: 1px solid rgba(81,233,240,0.6); box-sizing: border-box">
    <Title title="农事列表">
      <template v-slot:title-slot>
      </template>
    </Title>
    <div class="chatsTabs yse-events">
      <div class="lbtn"><div class="text" :class="[status == STATUS_ENUM.STAY_SEND ? 'active' : '']"  @click="changeTabs(STATUS_ENUM.STAY_SEND)">待分发</div></div>
      <div class="btn"><div class="text"  :class="[status == STATUS_ENUM.STAY_EXECUTE ? 'active' : '']" @click="changeTabs(STATUS_ENUM.STAY_EXECUTE)">执行中</div></div>
      <div class="rbtn"><div class="text" :class="[status == STATUS_ENUM.HAVE_CHECK ? 'active' : '']" @click="changeTabs(STATUS_ENUM.HAVE_CHECK)">已完成</div></div>
    </div>
    <div class="nslb yse-events">
      <template v-for="item in tableData" :key="item.id">
        <NsItem @click="selectNsItem(item.id)" :rowData="item" :style=" (activeId == item.id  ? 'background:#033C49;' : '')" ></NsItem>
      </template>
    </div>
    <div class="btn-layout">
    </div>
  </div>
</template>
<script setup>
import {onMounted, ref, reactive, toRefs} from "vue";
import {useStore} from "vuex";
import Title from "../../components/title";
import {NS_RECORD_STATUS_ENUM as STATUS_ENUM} from "../../../api/enum"
import NsItem from "./NsItem";

const emits = defineEmits(["selectNsItem"])
let store = useStore();
let userInfo = store.getters.userinfo

const activeId = ref(null)
const tableData = ref([]);
const params = reactive({
  organId:userInfo.curGardenId,
  name: "",
  limit: 10,
  page: 1,
  total: 0,
  status: STATUS_ENUM.STAY_SEND
});
const { name, limit, page, total , status} = toRefs(params);

onMounted(async () => {
  getDataList()
})

function changeTabs(e){
  status.value = e
  getDataList()
}

function selectNsItem(id){
  if(activeId.value == id)
    return
  activeId.value = id
  emits("selectNsItem",id)
}

function reset(){
  getDataList()
  activeId.value = null
}
/**
 * @description: 获取列表数据
 * @param {*}
 * @return {*}
 */
const getDataList = async () => {
  const { code, data, count } = await VE_API.nsjy.page(params);
  if (code == 0 || code == 1) {
    tableData.value = data;
    total.value = count;
  }
};

defineExpose({reset})


</script>

<style lang="scss" scoped>
@import "../../../styles/chatsTabs";
@import "../../../styles/index";

.nslb{
  @include wh(auto,calc(100% - 48px - 48px - 45px));
  overflow-y: scroll;
}
.btn-layout{
  @include wh(auto,calc(45px));
  border-top: 1px solid rgba(81,233,240,0.6);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  .big-btn{
    @include wh(70%, 45px);
    font-size: 20px;
    border-radius: 5px;
    background: #13C4CD;
    border: 1px solid rgba(81,233,240,1);
    color: #ffffff;
  }
}

</style>