添加我的组件搜索、表格、分页二开

src/views/devices/config/content.vue

@@ -0,0 +1,48 @@
+<template>
+  <myContent :list="list" />
+</template>
+<script setup>
+import myContent from "@/components/mycomponents/myContent.vue";
+import { reactive } from "vue";
+
+let list = reactive({
+  // 分页
+  pagination: {
+    background: false,
+    layout: "prev,pager,next,jumper,total,sizes",
+    pageSize: 20,
+    pageSizes: [10, 20, 30, 50],
+  },
+  // 表格上工具栏按钮
+  toolbar: ["add"],
+  // 表格字段
+  cols: [
+    // { type: "selection", width: 50, align: "center" },
+    { label: "设备名称", align: "center", prop: "id", show: false },
+    { label: "设备号", align: "center", prop: "username" },
+    { label: "品牌", align: "center", prop: "avatar", templet: "image" },
+    { label: "打印类型", align: "center", prop: "deptName" },
+    {
+      label: "状态",
+      align: "center",
+      prop: "status",
+      templet: "switch",
+      slotName: "status",
+    },
+    { label: "创建时间", align: "center", prop: "createTime" },
+    {
+      label: "操作",
+      align: "center",
+      fixed: "right",
+      width: 280,
+      templet: "tool",
+      operat: ["edit", "delete"],
+    },
+  ],
+  // 表格数据
+  pageData: [],
+});
+function getList() {
+  // list.pageData=res
+}
+</script>

src/views/devices/config/search.vue

@@ -0,0 +1,42 @@
+<template>
+  <mySearch :list="list" @queryClick="handleQuery" />
+</template>
+<script setup>
+import { ref } from "vue";
+import mySearch from "@/components/mycomponents/mySearch.vue";
+let list = ref([
+  {
+    label: "设备名称",
+    type: "input",
+    prop: "keywords",
+    attrs: {
+      placeholder: "请输入设备名称",
+      clearable: true,
+      style: {
+        width: "200px",
+      },
+    },
+  },
+  {
+    type: "select",
+    label: "设备类型",
+    prop: "keywords2",
+    options: [
+      { label: "全部", value: 0 },
+      { label: "全部2", value: 1 },
+    ],
+    attrs: {
+      placeholder: "请选择设备类型",
+      clearable: true,
+      style: {
+        width: "200px",
+      },
+    },
+  },
+]);
+const emit = defineEmits(["queryClick"]);
+// 搜索-重置
+function handleQuery(d) {
+  emit("queryClick", d);
+}
+</script>

src/views/devices/printer.vue

@@ -1 +1,139 @@
-<template></template>
+<template>
+  <div class="printerStyle">
+    <search @queryClick="handleQuery" />
+    <content :tableData="datas.tableData" />
+  </div>
+</template>
+
+<script setup>
+import search from "./config/search.vue";
+import content from "./config/content.vue";
+let datas = reactive({
+  query: {
+    name: "",
+    type: "",
+  },
+  tableData: [],
+});
+// 搜索-重置
+function handleQuery(d) {
+  datas.query = d;
+  getlist();
+}
+onMounted(() => {
+  getlist();
+});
+function getlist() {
+  console.log(datas.query, "获取列表");
+}
+//   import { devices, models, subTypes } from './devices'
+// import addDevice from './components/addDevice'
+// import { tbPrintMachineGet, switchtbPrintMachine, delTableHandle } from '@/api/devices'
+// import dayjs from 'dayjs'
+// export default {
+//   components: {
+//     addDevice
+//   },
+//   data() {
+//     return {
+//       query: {
+//         name: '',
+//         type: ''
+//       },
+//       devices,
+//       tableData: {
+//         data: [],
+//         page: 0,
+//         size: 10,
+//         loading: false,
+//         total: 0
+//       }
+//     }
+//   },
+//   filters: {
+//     devicesName(value) {
+//       if (value == 'yxyPrinter') {
+//         return '云想印'
+//       } else if (value == 'fePrinter') '飞鹅'
+//       // const item=devices.find(item => item.value == value)
+//       // return item?item.name:''
+//     },
+//     modelsName(value) {
+//       const item = models.find(item => item.value == value)
+//       return item ? item.name : ''
+//     },
+//     subTypesName(value) {
+//       if (value == "label") return '标签'
+//       else if (value == 'kitchen') return '出品'
+//       else if (value == 'cash') return '小票'
+//     },
+//     timeFilter(s) {
+//       return dayjs(s).format('YYYY-MM-DD HH:mm:ss')
+//     }
+//   },
+//   mounted() {
+//     this.getTableData()
+//   },
+//   methods: {
+//     toUrl(item) {
+//       this.$router.push({ path: '/devices/details', query: { id: item.id } })
+//     },
+//     // 切换状态
+//     async statusChange(e, row) {
+//       try {
+//         this.tableData.loading = true
+//         const data = { ...row }
+//         data.status = e
+//         if (data.id) {
+//           delete data.createdAt
+//           delete data.updatedAt
+//         }
+//         await switchtbPrintMachine(data)
+//         this.getTableData()
+//       } catch (error) {
+//         console.log(error)
+//         this.tableData.loading = false
+//       }
+//     },
+//     // 重置查询
+//     resetHandle() {
+//       this.query.name = ''
+//       this.query.type = ''
+//       this.getTableData()
+//     },
+//     // 分页回调
+//     paginationChange(e) {
+//       this.tableData.page = e - 1
+//       this.getTableData()
+//     },
+//     // 删除
+//     async delTableHandle(item) {
+//       const res = await delTableHandle(item)
+//       this.getTableData()
+//     },
+//     // 获取商品列表
+//     async getTableData() {
+//       this.tableData.loading = true
+//       try {
+//         const res = await tbPrintMachineGet({
+//           name: this.query.name,
+//           shopId: localStorage.getItem('shopId'),
+//           contentType: this.query.type,
+//           sort: '',
+//         })
+//         this.tableData.loading = false
+//         this.tableData.data = res
+//         this.tableData.total = res.length
+//       } catch (error) {
+//         console.log(error)
+//       }
+//     }
+//   }
+// }
+</script>
+<style scoped lang="scss">
+.printerStyle {
+  padding: 20px;
+  background-color: #fff;
+}
+</style>