From 30adf7b9a0ba92830fa172d899a500415b1f128d Mon Sep 17 00:00:00 2001
From: duan <1004387497@qq.com>
Date: Wed, 12 Feb 2025 18:10:40 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E6=88=91=E7=9A=84=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6=E6=90=9C=E7=B4=A2=E3=80=81=E8=A1=A8=E6=A0=BC=E3=80=81?=
 =?UTF-8?q?=E5=88=86=E9=A1=B5=E4=BA=8C=E5=BC=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .eslintignore                             |   1 +
 src/components/mycomponents/myContent.vue | 281 ++++++++++++++++++++++
 src/components/mycomponents/mySearch.vue  |  66 +++++
 src/views/devices/config/content.vue      |  48 ++++
 src/views/devices/config/search.vue       |  42 ++++
 src/views/devices/printer.vue             | 140 ++++++++++-
 6 files changed, 577 insertions(+), 1 deletion(-)
 create mode 100644 .eslintignore
 create mode 100644 src/components/mycomponents/myContent.vue
 create mode 100644 src/components/mycomponents/mySearch.vue
 create mode 100644 src/views/devices/config/content.vue
 create mode 100644 src/views/devices/config/search.vue

diff --git a/.eslintignore b/.eslintignore
new file mode 100644
index 0000000..aa8e45f
--- /dev/null
+++ b/.eslintignore
@@ -0,0 +1 @@
+src/
\ No newline at end of file
diff --git a/src/components/mycomponents/myContent.vue b/src/components/mycomponents/myContent.vue
new file mode 100644
index 0000000..e583ac5
--- /dev/null
+++ b/src/components/mycomponents/myContent.vue
@@ -0,0 +1,281 @@
+<template>
+  <div>
+    <!-- 工具栏 -->
+    <template v-for="item in toolbar" :key="item">
+      <template v-if="typeof item === 'string'">
+        <!-- 新增 -->
+        <template v-if="item === 'add'">
+          <el-button type="success" icon="plus" @click="handleToolbar(item)">新增</el-button>
+        </template>
+        <!-- 删除 -->
+        <template v-else-if="item === 'delete'">
+          <el-button
+            type="danger"
+            icon="delete"
+            :disabled="removeIds.length === 0"
+            @click="handleToolbar(item)"
+          >
+            删除
+          </el-button>
+        </template>
+        <!-- 导入 -->
+        <template v-else-if="item === 'import'">
+          <el-button type="default" icon="upload" @click="handleToolbar(item)">导入</el-button>
+        </template>
+        <!-- 导出 -->
+        <template v-else-if="item === 'export'">
+          <el-button type="default" icon="download" @click="handleToolbar(item)">导出</el-button>
+        </template>
+      </template>
+      <!-- 其他 -->
+      <template v-else-if="typeof item === 'object'">
+        <el-button
+          :icon="item.icon"
+          :type="item.type ?? 'default'"
+          @click="handleToolbar(item.name)"
+        >
+          {{ item.text }}
+        </el-button>
+      </template>
+    </template>
+    <!-- 表格 -->
+    <el-table ref="tableRef" border :data="pageData" style="margin-top: 20px">
+      <template v-for="col in cols" :key="col">
+        <el-table-column v-bind="col">
+          <template #default="scope">
+            <!-- 显示图片 -->
+            <template v-if="col.templet === 'image'">
+              <template v-if="col.prop">
+                <template v-if="Array.isArray(scope.row[col.prop])">
+                  <template v-for="(item, index) in scope.row[col.prop]" :key="item">
+                    <el-image
+                      :src="item"
+                      :preview-src-list="scope.row[col.prop]"
+                      :initial-index="index"
+                      :preview-teleported="true"
+                      :style="`width: ${col.imageWidth ?? 40}px; height: ${col.imageHeight ?? 40}px`"
+                    />
+                  </template>
+                </template>
+                <template v-else>
+                  <el-image
+                    :src="scope.row[col.prop]"
+                    :preview-src-list="[scope.row[col.prop]]"
+                    :preview-teleported="true"
+                    :style="`width: ${col.imageWidth ?? 40}px; height: ${col.imageHeight ?? 40}px`"
+                  />
+                </template>
+              </template>
+            </template>
+            <!-- 根据行的selectList属性返回对应列表值 -->
+            <template v-else-if="col.templet === 'list'">
+              <template v-if="col.prop">
+                {{ (col.selectList ?? {})[scope.row[col.prop]] }}
+              </template>
+            </template>
+            <!-- 格式化显示链接 -->
+            <template v-else-if="col.templet === 'url'">
+              <template v-if="col.prop">
+                <el-link type="primary" :href="scope.row[col.prop]" target="_blank">
+                  {{ scope.row[col.prop] }}
+                </el-link>
+              </template>
+            </template>
+            <!-- 生成开关组件 -->
+            <template v-else-if="col.templet === 'switch'">
+              <template v-if="col.prop">
+                <!-- pageData.length>0: 解决el-switch组件会在表格初始化的时候触发一次change事件 -->
+                <el-switch
+                  v-model="scope.row[col.prop]"
+                  :active-value="col.activeValue ?? 1"
+                  :inactive-value="col.inactiveValue ?? 0"
+                  :inline-prompt="true"
+                  :active-text="col.activeText ?? ''"
+                  :inactive-text="col.inactiveText ?? ''"
+                  :validate-event="false"
+                  @change="
+                    pageData.length > 0 && handleModify(col.prop, scope.row[col.prop], scope.row)
+                  "
+                />
+              </template>
+            </template>
+            <!-- 生成输入框组件 -->
+            <!-- <template v-else-if="col.templet === 'input'">
+              <template v-if="col.prop">
+                <el-input v-model="scope.row[col.prop]" :type="col.inputType ?? 'text'"
+                  :disabled="!hasAuth(`${contentConfig.pageName}:modify`)"
+                  @blur="handleModify(col.prop, scope.row[col.prop], scope.row)" />
+              </template>
+            </template> -->
+            <!-- 格式化为价格 -->
+            <!-- <template v-else-if="col.templet === 'price'">
+              <template v-if="col.prop">
+                {{ `${col.priceFormat ?? "￥"}${scope.row[col.prop]}` }}
+              </template>
+            </template> -->
+            <!-- 格式化为百分比 -->
+            <!-- <template v-else-if="col.templet === 'percent'">
+              <template v-if="col.prop">{{ scope.row[col.prop] }}%</template>
+            </template> -->
+            <!-- 显示图标 -->
+            <!-- <template v-else-if="col.templet === 'icon'">
+              <template v-if="col.prop">
+                <template v-if="scope.row[col.prop].startsWith('el-icon-')">
+                  <el-icon>
+                    <component :is="scope.row[col.prop].replace('el-icon-', '')" />
+                  </el-icon>
+                </template>
+                <template v-else>
+                  <div class="i-svg:{{ scope.row[col.prop] }}" />
+                </template>
+              </template>
+            </template> -->
+            <!-- 格式化时间 -->
+            <template v-else-if="col.templet === 'date'">
+              <template v-if="col.prop">
+                {{
+                  scope.row[col.prop]
+                    ? useDateFormat(scope.row[col.prop], col.dateFormat ?? "YYYY-MM-DD HH:mm:ss")
+                        .value
+                    : ""
+                }}
+              </template>
+            </template>
+            <!-- 列操作栏 -->
+            <template v-else-if="col.templet === 'tool'">
+              <template v-for="item in col.operat ?? ['edit', 'delete']" :key="item">
+                <template v-if="typeof item === 'string'">
+                  <!-- 编辑/删除 -->
+                  <template v-if="item === 'edit' || item === 'delete'">
+                    <el-button
+                      :type="item === 'edit' ? 'primary' : 'danger'"
+                      :icon="item"
+                      size="small"
+                      link
+                      @click="
+                        handleOperat({
+                          name: item,
+                          row: scope.row,
+                          column: scope.column,
+                          $index: scope.$index,
+                        })
+                      "
+                    >
+                      {{ item === "edit" ? "编辑" : "删除" }}
+                    </el-button>
+                  </template>
+                </template>
+                <!-- 其他 -->
+                <!-- <template v-else-if="typeof item === 'object'">
+                  <el-button v-if="item.render === undefined || item.render(scope.row)" v-bind="item.auth ? { 'v-hasPerm': [`${contentConfig.pageName}:${item.auth}`] } : {}
+                    " :icon="item.icon" :type="item.type ?? 'primary'" size="small" link @click="
+                      handleOperat({
+                        name: item.name,
+                        row: scope.row,
+                        column: scope.column,
+                        $index: scope.$index,
+                      })
+                      ">
+                    {{ item.text }}
+                  </el-button>
+                </template> -->
+              </template>
+            </template>
+            <!-- 自定义 -->
+            <!-- <template v-else-if="col.templet === 'custom'">
+              <slot :name="col.slotName ?? col.prop" :prop="col.prop" v-bind="scope" />
+            </template> -->
+          </template>
+        </el-table-column>
+      </template>
+    </el-table>
+    <!-- 分页 -->
+    <div>
+      <el-pagination v-bind="pagination" @size-change="handleSizeChange" />
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+// 定义接收的属性
+const props = defineProps<{
+  list: any;
+}>();
+// 表格左侧工具栏
+const toolbar = props.list.toolbar || ["add"];
+// 删除ID集合 用于批量删除
+const removeIds = ref<(number | string)[]>([]);
+// 表格的数据
+const pageData = props.list.pageData || [];
+// 表格的列
+const cols = props.list.cols;
+// 开关属性修改
+function handleModify(field: string, value: boolean | string | number, row: Record<string, any>) {
+  // if (props.contentConfig.modifyAction) {
+  //   props.contentConfig.modifyAction({
+  //     [pk]: row[pk],
+  //     field: field,
+  //     value: value,
+  //   });
+  // } else {
+  //   ElMessage.error("未配置modifyAction");
+  // }
+}
+// 工具操作栏
+function handleToolbar(name: string) {
+  switch (name) {
+    // case "refresh":
+    //   handleRefresh();
+    //   break;
+    // case "exports":
+    //   handleOpenExportsModal();
+    //   break;
+    // case "imports":
+    //   handleOpenImportModal();
+    //   break;
+    // case "search":
+    //   emit("searchClick");
+    //   break;
+    case "add":
+      // emit("addClick");
+      console.log("add", "挑时间");
+      break;
+    // case "delete":
+    //   handleDelete();
+    //   break;
+    // case "import":
+    //   handleOpenImportModal(true);
+    //   break;
+    // case "export":
+    //   emit("exportClick");
+    //   break;
+    default:
+      // emit("toolbarClick", name);
+      break;
+  }
+}
+// 操作列
+function handleOperat(data: any) {
+  switch (data.name) {
+    case "edit":
+      // emit("editClick", data.row);
+      break;
+    case "delete":
+      // handleDelete(data.row[pk]);
+      break;
+    default:
+      // emit("operatClick", data);
+      break;
+  }
+}
+// 分页
+const pagination = props.list.pagination;
+// 分页切换
+function handleSizeChange(value: number) {
+  pagination.pageSize = value;
+  // handleRefresh();
+}
+// function handleCurrentChange(value: number) {
+// pagination.currentPage = value;
+// handleRefresh();
+// }
+</script>
diff --git a/src/components/mycomponents/mySearch.vue b/src/components/mycomponents/mySearch.vue
new file mode 100644
index 0000000..8c244ef
--- /dev/null
+++ b/src/components/mycomponents/mySearch.vue
@@ -0,0 +1,66 @@
+<template>
+  <el-form ref="queryFormRef" :model="queryParams" :inline="true">
+    <template v-for="(item, index) in props.list" :key="item.prop">
+      <el-form-item :label="item.label" :prop="item.prop">
+        <!-- Label -->
+        <template #label>
+          {{ item.label }}
+        </template>
+        <!-- Input 输入框 -->
+        <template v-if="item.type === 'input' || item.type === undefined">
+          <el-input
+            v-model="queryParams[item.prop]"
+            v-bind="item.attrs"
+            @keyup.enter="handleQuery"
+          />
+        </template>
+        <!-- Select 选择器 -->
+        <template v-else-if="item.type === 'select'">
+          <el-select v-model="queryParams[item.prop]" v-bind="item.attrs">
+            <template v-for="option in item.options" :key="option.value">
+              <el-option :label="option.label" :value="option.value" />
+            </template>
+          </el-select>
+        </template>
+        <!-- TreeSelect 树形选择 -->
+        <!-- <template v-else-if="item.type === 'tree-select'">
+          <el-tree-select v-model="queryParams[item.prop]" v-bind="item.attrs" />
+        </template> -->
+        <!-- DatePicker 日期选择器 -->
+        <!-- <template v-else-if="item.type === 'date-picker'">
+          <el-date-picker v-model="queryParams[item.prop]" v-bind="item.attrs" />
+        </template> -->
+      </el-form-item>
+    </template>
+    <el-form-item>
+      <el-button type="primary" icon="search" @click="handleQuery(1)">搜索</el-button>
+      <el-button icon="refresh" @click="handleQuery(2)">重置</el-button>
+    </el-form-item>
+  </el-form>
+</template>
+
+<script setup lang="ts">
+import type { FormInstance } from "element-plus";
+// 定义接收的属性
+const props = defineProps<{
+  list: any;
+}>();
+// 搜索表单数据
+const queryParams = reactive<any>({});
+// 重置操作
+const queryFormRef = ref<FormInstance>();
+
+// 自定义事件
+const emit = defineEmits<{
+  queryClick: [queryParams: any];
+}>();
+// 查询/重置 操作
+function handleQuery(index: number) {
+  if (index == 2) {
+    queryFormRef.value?.resetFields();
+  }
+  emit("queryClick", queryParams);
+}
+</script>
+
+<style lang="scss" scoped></style>
diff --git a/src/views/devices/config/content.vue b/src/views/devices/config/content.vue
new file mode 100644
index 0000000..5cbacc9
--- /dev/null
+++ b/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>
diff --git a/src/views/devices/config/search.vue b/src/views/devices/config/search.vue
new file mode 100644
index 0000000..ad30ced
--- /dev/null
+++ b/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>
diff --git a/src/views/devices/printer.vue b/src/views/devices/printer.vue
index 41a40c8..f13193e 100644
--- a/src/views/devices/printer.vue
+++ b/src/views/devices/printer.vue
@@ -1 +1,139 @@
-<template></template>
\ No newline at end of file
+<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>