JG-ADMIN-TEMP/src/views/device/data/index.vue

<template>
  <div class="mainContentBox">
    <avue-crud
        ref="crudRef"
        v-model:search="search"
        v-model="form"
        :data="data"
        :option="option"
        :table-loading="loading"
        v-model:page="page"
        @row-save="createRow"
        @row-update="updateRow"
        @row-del="deleteRow"
        @search-change="searchPage"
        @search-reset="resetChange"
        @size-change="dataList"
        @current-change="dataList"
        @selection-change="selectionChange"
    >
    </avue-crud>
  </div>
</template>
<script setup>
import { ref, getCurrentInstance } from "vue";
import { useCrud } from "@/hooks/userCrud";
import buttonPermission from "@/common/configs/buttonPermission";
import {queryDeviceList,queryTypeAliasList} from "@/api/device";
import { useCommonStoreHook } from "@/store";
const { isShowTable, tableType } = toRefs(useCommonStoreHook());
const loading = ref(false);
const test = () => {
  isShowTable.value = true;
  tableType.value = tableType.value == 1 ? 2 : 1;
};
// 传入一个url，后面不带/
const { form, data, option, search, page, toDeleteIds, Methords, Utils } =
  useCrud({
    src: "/api/v1/device/data",
  });
const { dataList, createRow, updateRow, deleteRow, searchChange, resetChange } = Methords; //增删改查
const { selectionChange, multipleDelete } = Methords; //选中和批量删除事件
const { checkBtnPerm, downloadTemplate, exportData } = Utils; //按钮权限等工具
const crudRef = ref(null); //crudRef.value 获取avue-crud对象
const deviceList = ref([])
const searchPage = (params, done) =>{
  if(!search.value.deviceNo){
    ElMessage.warning("请先选择设备进行查询");
    done()
    return;
  }
  queryTypeAliasList({deviceNo: search.value.deviceNo}).then((data)=>{
    if(data.data){
      option.value.column = [{
        label: "设备编号",
        prop: "deviceNo",
        search: true,
        hide: true,
        type: "select",
        dicData: deviceList,
        props: { label: "deviceNo", value: "deviceNo", },
      },
        {
          label: "任务信息",
          prop: "taskNo",
          search: true,
          hide: true,
        },
        /*{
          label: "序列号",
          prop: "seqNo",
          search: true,
          hide: true,
        },*/
        {
          label: "采集时间",
          prop: "ts",
          search: true,
          hide: true,
          type: 'datetimerange',
          format: 'YYYY-MM-DD HH:mm:ss',
          valueFormat: 'YYYY-MM-DD HH:mm:ss',
          searchRange: true,
          startPlaceholder: '开始范围',
          endPlaceholder: '结束范围',
        }, {
          label: "采集时间",
          prop: "ts",
        },
      ]
      data.data.forEach(item=>{
        option.value.column.push({
          label: item.filedLabel,
          prop: item.alias,
          overHidden: true,
        })
      })
    }
  })
  if(search.value.ts){
    search.value.startTime = search.value.ts[0]
    search.value.endTime = search.value.ts[1]
  }
  dataList()
  done()

}
// 设置表格列或者其他自定义的option
option.value = Object.assign(option.value, {
  delBtn: false,
  selection: false,
  index: false,
  addBtn: false,
  viewBtn: false,
  editBtn: false,
  menu: false,
  column: [{
    label: "设备编号",
    prop: "deviceNo",
    search: true,
    hide: true,
    type: "select",
    dicData: deviceList,
    props: { label: "deviceNo", value: "deviceNo", },
  },
    {
      label: "任务信息",
      prop: "taskNo",
      search: true,
      hide: true,
    },
   /* {
      label: "序列号",
      prop: "seqNo",
      search: true,
      hide: true,
    },*/
    {
      label: "采集时间",
      prop: "ts",
      search: true,
      hide: true,
      type: 'datetimerange',
      format: 'YYYY-MM-DD HH:mm:ss',
      valueFormat: 'YYYY-MM-DD HH:mm:ss',
      searchRange: true,
      startPlaceholder: '开始范围',
      endPlaceholder: '结束范围',
    }],
});
onMounted(() => {
  queryDeviceList({protocol: 1}).then((data)=>{
    deviceList.value = data.data
  })
});
</script>