打印机页面添加。使用自带框架

src/components/CURD/PageContent.vue

@@ -8,58 +8,37 @@
           <template v-if="typeof item === 'string'">
             <!-- 新增 -->
             <template v-if="item === 'add'">
-              <el-button
+              <el-button v-hasPerm="[`${contentConfig.pageName}:${item}`]" type="success" icon="plus"
-                v-hasPerm="[`${contentConfig.pageName}:${item}`]"
+                @click="handleToolbar(item)">
-                type="success"
-                icon="plus"
-                @click="handleToolbar(item)"
-              >
                 新增
               </el-button>
             </template>
             <!-- 删除 -->
             <template v-else-if="item === 'delete'">
-              <el-button
+              <el-button v-hasPerm="[`${contentConfig.pageName}:${item}`]" type="danger" icon="delete"
-                v-hasPerm="[`${contentConfig.pageName}:${item}`]"
+                :disabled="removeIds.length === 0" @click="handleToolbar(item)">
-                type="danger"
-                icon="delete"
-                :disabled="removeIds.length === 0"
-                @click="handleToolbar(item)"
-              >
                 删除
               </el-button>
             </template>
             <!-- 导入 -->
             <template v-else-if="item === 'import'">
-              <el-button
+              <el-button v-hasPerm="[`${contentConfig.pageName}:${item}`]" type="default" icon="upload"
-                v-hasPerm="[`${contentConfig.pageName}:${item}`]"
+                @click="handleToolbar(item)">
-                type="default"
-                icon="upload"
-                @click="handleToolbar(item)"
-              >
                 导入
               </el-button>
             </template>
             <!-- 导出 -->
             <template v-else-if="item === 'export'">
-              <el-button
+              <el-button v-hasPerm="[`${contentConfig.pageName}:${item}`]" type="default" icon="download"
-                v-hasPerm="[`${contentConfig.pageName}:${item}`]"
+                @click="handleToolbar(item)">
-                type="default"
-                icon="download"
-                @click="handleToolbar(item)"
-              >
                 导出
               </el-button>
             </template>
           </template>
           <!-- 其他 -->
           <template v-else-if="typeof item === 'object'">
-            <el-button
+            <el-button v-hasPerm="[`${contentConfig.pageName}:${item.auth}`]" :icon="item.icon"
-              v-hasPerm="[`${contentConfig.pageName}:${item.auth}`]"
+              :type="item.type ?? 'default'" @click="handleToolbar(item.name)">
-              :icon="item.icon"
-              :type="item.type ?? 'default'"
-              @click="handleToolbar(item.name)"
-            >
               {{ item.text }}
             </el-button>
           </template>
@@ -88,68 +67,36 @@
             </template>
             <!-- 导出 -->
             <template v-else-if="item === 'exports'">
-              <el-button
+              <el-button v-hasPerm="[`${contentConfig.pageName}:export`]" icon="download" circle title="导出"
-                v-hasPerm="[`${contentConfig.pageName}:export`]"
+                @click="handleToolbar(item)" />
-                icon="download"
-                circle
-                title="导出"
-                @click="handleToolbar(item)"
-              />
             </template>
             <!-- 导入 -->
             <template v-else-if="item === 'imports'">
-              <el-button
+              <el-button v-hasPerm="[`${contentConfig.pageName}:import`]" icon="upload" circle title="导入"
-                v-hasPerm="[`${contentConfig.pageName}:import`]"
+                @click="handleToolbar(item)" />
-                icon="upload"
-                circle
-                title="导入"
-                @click="handleToolbar(item)"
-              />
             </template>
             <!-- 搜索 -->
             <template v-else-if="item === 'search'">
-              <el-button
+              <el-button v-hasPerm="[`${contentConfig.pageName}:query`]" icon="search" circle title="搜索"
-                v-hasPerm="[`${contentConfig.pageName}:query`]"
+                @click="handleToolbar(item)" />
-                icon="search"
-                circle
-                title="搜索"
-                @click="handleToolbar(item)"
-              />
             </template>
           </template>
           <!-- 其他 -->
           <template v-else-if="typeof item === 'object'">
             <template v-if="item.auth">
-              <el-button
+              <el-button v-hasPerm="[`${contentConfig.pageName}:${item.auth}`]" :icon="item.icon" circle
-                v-hasPerm="[`${contentConfig.pageName}:${item.auth}`]"
+                :title="item.title" @click="handleToolbar(item.name)" />
-                :icon="item.icon"
-                circle
-                :title="item.title"
-                @click="handleToolbar(item.name)"
-              />
             </template>
             <template v-else>
-              <el-button
+              <el-button :icon="item.icon" circle :title="item.title" @click="handleToolbar(item.name)" />
-                :icon="item.icon"
-                circle
-                :title="item.title"
-                @click="handleToolbar(item.name)"
-              />
             </template>
           </template>
         </template>
       </div>
     </div>
     <!-- 列表 -->
-    <el-table
+    <el-table ref="tableRef" v-loading="loading" v-bind="contentConfig.table" :data="pageData" :row-key="pk"
-      ref="tableRef"
+      @selection-change="handleSelectionChange" @filter-change="handleFilterChange">
-      v-loading="loading"
-      v-bind="contentConfig.table"
-      :data="pageData"
-      :row-key="pk"
-      @selection-change="handleSelectionChange"
-      @filter-change="handleFilterChange"
-    >
       <template v-for="col in cols" :key="col">
         <el-table-column v-if="col.show" v-bind="col">
           <template #default="scope">
@@ -158,22 +105,15 @@
               <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
+                    <el-image :src="item" :preview-src-list="scope.row[col.prop]" :initial-index="index"
-                      :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`"
+                      :style="`width: ${col.imageWidth ?? 40}px; height: ${col.imageHeight ?? 40}px`" />
-                    />
                   </template>
                 </template>
                 <template v-else>
-                  <el-image
+                  <el-image :src="scope.row[col.prop]" :preview-src-list="[scope.row[col.prop]]"
-                    :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`"
+                    :style="`width: ${col.imageWidth ?? 40}px; height: ${col.imageHeight ?? 40}px`" />
-                  />
                 </template>
               </template>
             </template>
@@ -195,30 +135,20 @@
             <template v-else-if="col.templet === 'switch'">
               <template v-if="col.prop">
                 <!-- pageData.length>0: 解决el-switch组件会在表格初始化的时候触发一次change事件 -->
-                <el-switch
+                <el-switch v-model="scope.row[col.prop]" :active-value="col.activeValue ?? 1"
-                  v-model="scope.row[col.prop]"
+                  :inactive-value="col.inactiveValue ?? 0" :inline-prompt="true" :active-text="col.activeText ?? ''"
-                  :active-value="col.activeValue ?? 1"
+                  :inactive-text="col.inactiveText ?? ''" :validate-event="false"
-                  :inactive-value="col.inactiveValue ?? 0"
+                  :disabled="!hasAuth(`${contentConfig.pageName}:modify`)" @change="
-                  :inline-prompt="true"
-                  :active-text="col.activeText ?? ''"
-                  :inactive-text="col.inactiveText ?? ''"
-                  :validate-event="false"
-                  :disabled="!hasAuth(`${contentConfig.pageName}:modify`)"
-                  @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
+                <el-input v-model="scope.row[col.prop]" :type="col.inputType ?? 'text'"
-                  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)"
+                  @blur="handleModify(col.prop, scope.row[col.prop], scope.row)" />
-                />
               </template>
             </template>
             <!-- 格式化为价格 -->
@@ -261,45 +191,30 @@
                 <template v-if="typeof item === 'string'">
                   <!-- 编辑/删除 -->
                   <template v-if="item === 'edit' || item === 'delete'">
-                    <el-button
+                    <el-button v-hasPerm="[`${contentConfig.pageName}:${item}`]"
-                      v-hasPerm="[`${contentConfig.pageName}:${item}`]"
+                      :type="item === 'edit' ? 'primary' : 'danger'" :icon="item" size="small" link @click="
-                      :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
+                  <el-button v-if="item.render === undefined || item.render(scope.row)" v-bind="item.auth ? { 'v-hasPerm': [`${contentConfig.pageName}:${item.auth}`] } : {}
-                    v-if="item.render === undefined || item.render(scope.row)"
+                    " :icon="item.icon" :type="item.type ?? 'primary'" size="small" link @click="
-                    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>
@@ -317,33 +232,18 @@
     <template v-if="showPagination">
       <el-scrollbar>
         <div class="mt-[12px]">
-          <el-pagination
+          <el-pagination v-bind="pagination" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
-            v-bind="pagination"
-            @size-change="handleSizeChange"
-            @current-change="handleCurrentChange"
-          />
         </div>
       </el-scrollbar>
     </template>
     <!-- 导出弹窗 -->
-    <el-dialog
+    <el-dialog v-model="exportsModalVisible" :align-center="true" title="导出数据" width="600px" style="padding-right: 0"
-      v-model="exportsModalVisible"
+      @close="handleCloseExportsModal">
-      :align-center="true"
-      title="导出数据"
-      width="600px"
-      style="padding-right: 0"
-      @close="handleCloseExportsModal"
-    >
       <!-- 滚动 -->
       <el-scrollbar max-height="60vh">
         <!-- 表单 -->
-        <el-form
+        <el-form ref="exportsFormRef" label-width="auto" style="padding-right: var(--el-dialog-padding-primary)"
-          ref="exportsFormRef"
+          :model="exportsFormData" :rules="exportsFormRules">
-          label-width="auto"
-          style="padding-right: var(--el-dialog-padding-primary)"
-          :model="exportsFormData"
-          :rules="exportsFormRules"
-        >
           <el-form-item label="文件名" prop="filename">
             <el-input v-model="exportsFormData.filename" clearable />
           </el-form-item>
@@ -353,16 +253,10 @@
           <el-form-item label="数据源" prop="origin">
             <el-select v-model="exportsFormData.origin">
               <el-option label="当前数据 (当前页的数据)" :value="ExportsOriginEnum.CURRENT" />
-              <el-option
+              <el-option label="选中数据 (所有选中的数据)" :value="ExportsOriginEnum.SELECTED"
-                label="选中数据 (所有选中的数据)"
+                :disabled="selectionData.length <= 0" />
-                :value="ExportsOriginEnum.SELECTED"
+              <el-option label="全量数据 (所有分页的数据)" :value="ExportsOriginEnum.REMOTE"
-                :disabled="selectionData.length <= 0"
+                :disabled="contentConfig.exportsAction === undefined" />
-              />
-              <el-option
-                label="全量数据 (所有分页的数据)"
-                :value="ExportsOriginEnum.REMOTE"
-                :disabled="contentConfig.exportsAction === undefined"
-              />
             </el-select>
           </el-form-item>
           <el-form-item label="字段" prop="fields">
@@ -383,35 +277,17 @@
       </template>
     </el-dialog>
     <!-- 导入弹窗 -->
-    <el-dialog
+    <el-dialog v-model="importModalVisible" :align-center="true" title="导入数据" width="600px" style="padding-right: 0"
-      v-model="importModalVisible"
+      @close="handleCloseImportModal">
-      :align-center="true"
-      title="导入数据"
-      width="600px"
-      style="padding-right: 0"
-      @close="handleCloseImportModal"
-    >
       <!-- 滚动 -->
       <el-scrollbar max-height="60vh">
         <!-- 表单 -->
-        <el-form
+        <el-form ref="importFormRef" label-width="auto" style="padding-right: var(--el-dialog-padding-primary)"
-          ref="importFormRef"
+          :model="importFormData" :rules="importFormRules">
-          label-width="auto"
-          style="padding-right: var(--el-dialog-padding-primary)"
-          :model="importFormData"
-          :rules="importFormRules"
-        >
           <el-form-item label="文件名" prop="files">
-            <el-upload
+            <el-upload ref="uploadRef" v-model:file-list="importFormData.files" class="w-full"
-              ref="uploadRef"
-              v-model:file-list="importFormData.files"
-              class="w-full"
               accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"
-              :drag="true"
+              :drag="true" :limit="1" :auto-upload="false" :on-exceed="handleFileExceed">
-              :limit="1"
-              :auto-upload="false"
-              :on-exceed="handleFileExceed"
-            >
               <el-icon class="el-icon--upload"><upload-filled /></el-icon>
               <div class="el-upload__text">
                 <span>将文件拖到此处，或</span>
@@ -420,13 +296,8 @@
               <template #tip>
                 <div class="el-upload__tip">
                   *.xlsx / *.xls
-                  <el-link
+                  <el-link v-if="contentConfig.importTemplate" type="primary" icon="download" :underline="false"
-                    v-if="contentConfig.importTemplate"
+                    @click="handleDownloadTemplate">
-                    type="primary"
-                    icon="download"
-                    :underline="false"
-                    @click="handleDownloadTemplate"
-                  >
                     下载模板
                   </el-link>
                 </div>
@@ -438,11 +309,7 @@
       <!-- 弹窗底部操作按钮 -->
       <template #footer>
         <div style="padding-right: var(--el-dialog-padding-primary)">
-          <el-button
+          <el-button type="primary" :disabled="importFormData.files.length === 0" @click="handleImportSubmit">
-            type="primary"
-            :disabled="importFormData.files.length === 0"
-            @click="handleImportSubmit"
-          >
             确 定
           </el-button>
           <el-button @click="handleCloseImportModal">取 消</el-button>
@@ -489,7 +356,8 @@ const pk = props.contentConfig.pk ?? "id";
 // 表格左侧工具栏
 const toolbar = props.contentConfig.toolbar ?? ["add", "delete"];
 // 表格右侧工具栏
-const defaultToolbar = props.contentConfig.defaultToolbar ?? ["refresh", "filter"];
+const defaultToolbar = props.contentConfig.defaultToolbar ?? [];
+// const defaultToolbar = props.contentConfig.defaultToolbar ?? ["refresh", "filter"];
 // 表格列
 const cols = ref(
   props.contentConfig.cols.map((col) => {

src/components/CURD/PageModal.vue

@@ -1,20 +1,9 @@
 <template>
   <!-- drawer -->
   <template v-if="modalConfig.component === 'drawer'">
-    <el-drawer
+    <el-drawer v-model="modalVisible" :append-to-body="true" v-bind="modalConfig.drawer" @close="handleCloseModal">
-      v-model="modalVisible"
-      :append-to-body="true"
-      v-bind="modalConfig.drawer"
-      @close="handleCloseModal"
-    >
       <!-- 表单 -->
-      <el-form
+      <el-form ref="formRef" label-width="auto" v-bind="modalConfig.form" :model="formData" :rules="formRules">
-        ref="formRef"
-        label-width="auto"
-        v-bind="modalConfig.form"
-        :model="formData"
-        :rules="formRules"
-      >
         <el-row :gutter="20">
           <template v-for="item in formItems" :key="item.prop">
             <el-col v-show="!item.hidden" v-bind="item.col">
@@ -23,12 +12,7 @@
                 <template v-if="item.tips" #label>
                   <span>
                     {{ item.label }}
-                    <el-tooltip
+                    <el-tooltip placement="bottom" effect="light" :content="item.tips" :raw-content="true">
-                      placement="bottom"
-                      effect="light"
-                      :content="item.tips"
-                      :raw-content="true"
-                    >
                       <el-icon style="vertical-align: -0.15em" size="16">
                         <QuestionFilled />
                       </el-icon>
@@ -87,12 +71,7 @@
                 </template>
                 <!-- 自定义 -->
                 <template v-else-if="item.type === 'custom'">
-                  <slot
+                  <slot :name="item.slotName ?? item.prop" :prop="item.prop" :formData="formData" :attrs="item.attrs" />
-                    :name="item.slotName ?? item.prop"
-                    :prop="item.prop"
-                    :formData="formData"
-                    :attrs="item.attrs"
-                  />
                 </template>
               </el-form-item>
             </el-col>
@@ -113,26 +92,13 @@
   </template>
   <!-- dialog -->
   <template v-else>
-    <el-dialog
+    <el-dialog v-model="modalVisible" :align-center="true" :append-to-body="true" width="70vw"
-      v-model="modalVisible"
+      v-bind="modalConfig.dialog" style="padding-right: 0" @close="handleCloseModal">
-      :align-center="true"
-      :append-to-body="true"
-      width="70vw"
-      v-bind="modalConfig.dialog"
-      style="padding-right: 0"
-      @close="handleCloseModal"
-    >
       <!-- 滚动 -->
       <el-scrollbar max-height="60vh">
         <!-- 表单 -->
-        <el-form
+        <el-form ref="formRef" label-width="auto" v-bind="modalConfig.form"
-          ref="formRef"
+          style="padding-right: var(--el-dialog-padding-primary)" :model="formData" :rules="formRules">
-          label-width="auto"
-          v-bind="modalConfig.form"
-          style="padding-right: var(--el-dialog-padding-primary)"
-          :model="formData"
-          :rules="formRules"
-        >
           <el-row :gutter="20">
             <template v-for="item in formItems" :key="item.prop">
               <el-col v-show="!item.hidden" v-bind="item.col">
@@ -141,12 +107,7 @@
                   <template v-if="item.tips" #label>
                     <span>
                       {{ item.label }}
-                      <el-tooltip
+                      <el-tooltip placement="bottom" effect="light" :content="item.tips" :raw-content="true">
-                        placement="bottom"
-                        effect="light"
-                        :content="item.tips"
-                        :raw-content="true"
-                      >
                         <el-icon style="vertical-align: -0.15em" size="16">
                           <QuestionFilled />
                         </el-icon>
@@ -205,12 +166,8 @@
                   </template>
                   <!-- 自定义 -->
                   <template v-else-if="item.type === 'custom'">
-                    <slot
+                    <slot :name="item.slotName ?? item.prop" :prop="item.prop" :formData="formData"
-                      :name="item.slotName ?? item.prop"
+                      :attrs="item.attrs" />
-                      :prop="item.prop"
-                      :formData="formData"
-                      :attrs="item.attrs"
-                    />
                   </template>
                 </el-form-item>
               </el-col>

src/components/mycomponents/myContent.vue

@@ -9,12 +9,7 @@
         </template>
         <!-- 删除 -->
         <template v-else-if="item === 'delete'">
-          <el-button
+          <el-button type="danger" icon="delete" :disabled="removeIds.length === 0" @click="handleToolbar(item)">
-            type="danger"
-            icon="delete"
-            :disabled="removeIds.length === 0"
-            @click="handleToolbar(item)"
-          >
             删除
           </el-button>
         </template>
@@ -29,11 +24,7 @@
       </template>
       <!-- 其他 -->
       <template v-else-if="typeof item === 'object'">
-        <el-button
+        <el-button :icon="item.icon" :type="item.type ?? 'default'" @click="handleToolbar(item.name)">
-          :icon="item.icon"
-          :type="item.type ?? 'default'"
-          @click="handleToolbar(item.name)"
-        >
           {{ item.text }}
         </el-button>
       </template>
@@ -48,22 +39,15 @@
               <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
+                    <el-image :src="item" :preview-src-list="scope.row[col.prop]" :initial-index="index"
-                      :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`"
+                      :style="`width: ${col.imageWidth ?? 40}px; height: ${col.imageHeight ?? 40}px`" />
-                    />
                   </template>
                 </template>
                 <template v-else>
-                  <el-image
+                  <el-image :src="scope.row[col.prop]" :preview-src-list="[scope.row[col.prop]]"
-                    :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`"
+                    :style="`width: ${col.imageWidth ?? 40}px; height: ${col.imageHeight ?? 40}px`" />
-                  />
                 </template>
               </template>
             </template>
@@ -85,18 +69,11 @@
             <template v-else-if="col.templet === 'switch'">
               <template v-if="col.prop">
                 <!-- pageData.length>0: 解决el-switch组件会在表格初始化的时候触发一次change事件 -->
-                <el-switch
+                <el-switch v-model="scope.row[col.prop]" :active-value="col.activeValue ?? 1"
-                  v-model="scope.row[col.prop]"
+                  :inactive-value="col.inactiveValue ?? 0" :inline-prompt="true" :active-text="col.activeText ?? ''"
-                  :active-value="col.activeValue ?? 1"
+                  :inactive-text="col.inactiveText ?? ''" :validate-event="false" @change="
-                  :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>
             <!-- 生成输入框组件 -->
@@ -147,20 +124,14 @@
                 <template v-if="typeof item === 'string'">
                   <!-- 编辑/删除 -->
                   <template v-if="item === 'edit' || item === 'delete'">
-                    <el-button
+                    <el-button :type="item === 'edit' ? 'primary' : 'danger'" :icon="item" size="small" link @click="
-                      :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>
@@ -220,6 +191,11 @@ function handleModify(field: string, value: boolean | string | number, row: Reco
   //   ElMessage.error("未配置modifyAction");
   // }
 }
+
+// 定义自定义事件
+const emit = defineEmits(['addClick'])
+
+
 // 工具操作栏
 function handleToolbar(name: string) {
   switch (name) {
@@ -236,8 +212,7 @@ function handleToolbar(name: string) {
     //   emit("searchClick");
     //   break;
     case "add":
-      // emit("addClick");
+      emit("addClick");
-      console.log("add", "挑时间");
       break;
     // case "delete":
     //   handleDelete();

src/views/devices/config/add.ts

@@ -0,0 +1,122 @@
+import UserAPI, { type UserForm } from "@/api/system/user";
+import type { IModalConfig } from "@/components/CURD/types";
+
+const modalConfig: IModalConfig<UserForm> = {
+  pageName: "sys:user",
+  dialog: {
+    title: "新增用户",
+    width: 800,
+    draggable: true,
+  },
+  form: {
+    labelWidth: 100,
+  },
+  formAction: UserAPI.add,
+  beforeSubmit(data) {
+    console.log("提交之前处理", data);
+  },
+  formItems: [
+    {
+      label: "用户名",
+      prop: "username",
+      rules: [{ required: true, message: "用户名不能为空", trigger: "blur" }],
+      type: "input",
+      attrs: {
+        placeholder: "请输入用户名",
+      },
+      col: {
+        xs: 24,
+        sm: 12,
+      },
+    },
+    {
+      label: "用户昵称",
+      prop: "nickname",
+      rules: [{ required: true, message: "用户昵称不能为空", trigger: "blur" }],
+      type: "input",
+      attrs: {
+        placeholder: "请输入用户昵称",
+      },
+      col: {
+        xs: 24,
+        sm: 12,
+      },
+    },
+    {
+      label: "所属部门",
+      prop: "deptId",
+      rules: [{ required: true, message: "所属部门不能为空", trigger: "blur" }],
+      type: "tree-select",
+      attrs: {
+        placeholder: "请选择所属部门",
+        data: [],
+        filterable: true,
+        "check-strictly": true,
+        "render-after-expand": false,
+      },
+    },
+    {
+      type: "custom",
+      label: "性别",
+      prop: "gender",
+      initialValue: 1,
+    },
+    {
+      label: "角色",
+      prop: "roleIds",
+      rules: [{ required: true, message: "用户角色不能为空", trigger: "blur" }],
+      type: "select",
+      attrs: {
+        placeholder: "请选择",
+        multiple: true,
+      },
+      options: [],
+      initialValue: [],
+    },
+    {
+      type: "input",
+      label: "手机号码",
+      prop: "mobile",
+      rules: [
+        {
+          pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
+          message: "请输入正确的手机号码",
+          trigger: "blur",
+        },
+      ],
+      attrs: {
+        placeholder: "请输入手机号码",
+        maxlength: 11,
+      },
+    },
+    {
+      label: "邮箱",
+      prop: "email",
+      rules: [
+        {
+          pattern: /\w[-\w.+]*@([A-Za-z0-9][-A-Za-z0-9]+\.)+[A-Za-z]{2,14}/,
+          message: "请输入正确的邮箱地址",
+          trigger: "blur",
+        },
+      ],
+      type: "input",
+      attrs: {
+        placeholder: "请输入邮箱",
+        maxlength: 50,
+      },
+    },
+    {
+      label: "状态",
+      prop: "status",
+      type: "radio",
+      options: [
+        { label: "正常", value: 1 },
+        { label: "禁用", value: 0 },
+      ],
+      initialValue: 1,
+    },
+  ],
+};
+
+// 如果有异步数据会修改配置的，推荐用reactive包裹，而纯静态配置的可以直接导出
+export default reactive(modalConfig);

src/views/devices/config/content.ts

@@ -0,0 +1,67 @@
+import UserAPI from "@/api/system/user";
+import RoleAPI from "@/api/system/role";
+import type { UserPageQuery } from "@/api/system/user";
+import type { IContentConfig } from "@/components/CURD/types";
+
+const contentConfig: IContentConfig<UserPageQuery> = {
+  pageName: "sys:user",
+  table: {
+    border: true,
+    highlightCurrentRow: true,
+  },
+  pagination: {
+    background: true,
+    layout: "prev,pager,next,jumper,total,sizes",
+    pageSize: 20,
+    pageSizes: [10, 20, 30, 50],
+  },
+  indexAction: function (params) {
+    return UserAPI.getPage(params);
+  },
+  deleteAction: UserAPI.deleteByIds,
+  importAction(file) {
+    return UserAPI.import(1, file);
+  },
+  exportAction: UserAPI.export,
+  importTemplate: UserAPI.downloadTemplate,
+  importsAction(data) {
+    // 模拟导入数据
+    console.log("importsAction", data);
+    return Promise.resolve();
+  },
+  exportsAction: async function (params) {
+    // 模拟获取到的是全量数据
+    const res = await UserAPI.getPage(params);
+    console.log("exportsAction", res.list);
+    return res.list;
+  },
+  pk: "id",
+  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"],
+    },
+  ],
+};
+
+export default contentConfig;

src/views/devices/config/content.vue

@@ -1,5 +1,5 @@
 <template>
-  <myContent :list="list" />
+  <myContent :list="list" @addClick="addClick" />
 </template>
 <script setup>
 import myContent from "@/components/mycomponents/myContent.vue";
@@ -42,7 +42,8 @@ let list = reactive({
   // 表格数据
   pageData: [],
 });
-function getList() {
+function addClick() {
+  console.log(1)
   // list.pageData=res
 }
 </script>

src/views/devices/config/content2.ts

@@ -0,0 +1,133 @@
+import type { IContentConfig } from "@/components/CURD/types";
+
+const contentConfig: IContentConfig = {
+  pageName: "sys:user",
+  table: {
+    showOverflowTooltip: true,
+  },
+  toolbar: [],
+  indexAction: function (params) {
+    // 模拟发起网络请求获取列表数据
+    console.log("indexAction:", params);
+    return Promise.resolve({
+      total: 2,
+      list: [
+        {
+          id: 1,
+          username: "tom",
+          avatar: "https://foruda.gitee.com/images/1723603502796844527/03cdca2a_716974.gif",
+          percent: 99,
+          price: 10,
+          url: "https://www.baidu.com",
+          icon: "el-icon-setting",
+          gender: 1,
+          status: 1,
+          status2: 1,
+          sort: 99,
+          createTime: 1715647982437,
+        },
+        {
+          id: 2,
+          username: "jerry",
+          avatar: "https://foruda.gitee.com/images/1723603502796844527/03cdca2a_716974.gif",
+          percent: 88,
+          price: 999,
+          url: "https://www.google.com",
+          icon: "el-icon-user",
+          gender: 0,
+          status: 0,
+          status2: 0,
+          sort: 0,
+          createTime: 1715648977426,
+        },
+      ],
+    });
+  },
+  modifyAction(data) {
+    // 模拟发起网络请求修改字段
+    // console.log("modifyAction:", data);
+    ElMessage.success(JSON.stringify(data));
+    return Promise.resolve(null);
+  },
+  cols: [
+    { type: "index", width: 50, align: "center" },
+    { label: "ID", align: "center", prop: "id", show: false },
+    { label: "文本", align: "center", prop: "username" },
+    { label: "图片", align: "center", prop: "avatar", templet: "image" },
+    {
+      label: "百分比",
+      align: "center",
+      prop: "percent",
+      templet: "percent",
+    },
+    {
+      label: "货币符",
+      align: "center",
+      prop: "price",
+      templet: "price",
+      priceFormat: "$",
+    },
+    { label: "链接", align: "center", prop: "url", width: 180, templet: "url" },
+    { label: "图标", align: "center", prop: "icon", templet: "icon" },
+    {
+      label: "列表值",
+      align: "center",
+      prop: "gender",
+      templet: "list",
+      selectList: { "0": "女", "1": "男" },
+    },
+    {
+      label: "自定义",
+      align: "center",
+      prop: "status",
+      templet: "custom",
+      slotName: "status",
+    },
+    {
+      label: "Switch",
+      align: "center",
+      prop: "status2",
+      templet: "switch",
+      activeValue: 1,
+      inactiveValue: 0,
+      activeText: "启用",
+      inactiveText: "禁用",
+    },
+    {
+      label: "输入框",
+      align: "center",
+      prop: "sort",
+      templet: "input",
+      inputType: "number",
+    },
+    {
+      label: "日期格式化",
+      align: "center",
+      prop: "createTime",
+      minWidth: 120,
+      templet: "date",
+      dateFormat: "YYYY/MM/DD HH:mm:ss",
+    },
+    {
+      label: "操作栏",
+      align: "center",
+      fixed: "right",
+      width: 220,
+      templet: "tool",
+      operat: [
+        {
+          name: "reset_pwd",
+          auth: "password:reset",
+          icon: "refresh-left",
+          text: "重置密码",
+          type: "primary",
+          render(row) {
+            return row.id === 1;
+          },
+        },
+      ],
+    },
+  ],
+};
+
+export default contentConfig;

src/views/devices/config/edit.ts

@@ -0,0 +1,117 @@
+import UserAPI, { type UserForm } from "@/api/system/user";
+import type { IModalConfig } from "@/components/CURD/types";
+import { DeviceEnum } from "@/enums/DeviceEnum";
+import { useAppStore } from "@/store";
+
+const modalConfig: IModalConfig<UserForm> = {
+  pageName: "sys:user",
+  component: "drawer",
+  drawer: {
+    title: "修改用户",
+    size: useAppStore().device === DeviceEnum.MOBILE ? "80%" : 500,
+  },
+  pk: "id",
+  formAction: function (data) {
+    return UserAPI.update(data.id as number, data);
+  },
+  beforeSubmit(data) {
+    console.log("提交之前处理", data);
+  },
+  formItems: [
+    {
+      label: "用户名",
+      prop: "username",
+      rules: [{ required: true, message: "用户名不能为空", trigger: "blur" }],
+      type: "input",
+      attrs: {
+        placeholder: "请输入用户名",
+        readonly: true,
+      },
+    },
+    {
+      label: "用户昵称",
+      prop: "nickname",
+      rules: [{ required: true, message: "用户昵称不能为空", trigger: "blur" }],
+      type: "input",
+      attrs: {
+        placeholder: "请输入用户昵称",
+      },
+    },
+    {
+      label: "所属部门",
+      prop: "deptId",
+      rules: [{ required: true, message: "所属部门不能为空", trigger: "blur" }],
+      type: "tree-select",
+      attrs: {
+        placeholder: "请选择所属部门",
+        data: [],
+        filterable: true,
+        "check-strictly": true,
+        "render-after-expand": false,
+      },
+    },
+    {
+      type: "custom",
+      label: "性别",
+      prop: "gender",
+      initialValue: 1,
+    },
+    {
+      label: "角色",
+      prop: "roleIds",
+      rules: [{ required: true, message: "用户角色不能为空", trigger: "blur" }],
+      type: "select",
+      attrs: {
+        placeholder: "请选择",
+        multiple: true,
+      },
+      options: [],
+      initialValue: [],
+    },
+    {
+      type: "input",
+      label: "手机号码",
+      prop: "mobile",
+      rules: [
+        {
+          pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
+          message: "请输入正确的手机号码",
+          trigger: "blur",
+        },
+      ],
+      attrs: {
+        placeholder: "请输入手机号码",
+        maxlength: 11,
+      },
+    },
+    {
+      label: "邮箱",
+      prop: "email",
+      rules: [
+        {
+          pattern: /\w[-\w.+]*@([A-Za-z0-9][-A-Za-z0-9]+\.)+[A-Za-z]{2,14}/,
+          message: "请输入正确的邮箱地址",
+          trigger: "blur",
+        },
+      ],
+      type: "input",
+      attrs: {
+        placeholder: "请输入邮箱",
+        maxlength: 50,
+      },
+    },
+    {
+      label: "状态",
+      prop: "status",
+      type: "switch",
+      attrs: {
+        activeText: "正常",
+        inactiveText: "禁用",
+        activeValue: 1,
+        inactiveValue: 0,
+      },
+    },
+  ],
+};
+
+export default reactive(modalConfig);

src/views/devices/config/search.ts

@@ -0,0 +1,44 @@
+import DeptAPI from "@/api/system/dept";
+import type { ISearchConfig } from "@/components/CURD/types";
+
+const searchConfig: ISearchConfig = {
+  pageName: "sys:user",
+  formItems: [
+    {
+      type: "input",
+      label: "设备名称",
+      prop: "keywords",
+      attrs: {
+        placeholder: "请输入设备名称",
+        clearable: true,
+        style: {
+          width: "200px",
+        },
+      },
+    },
+    {
+      type: "tree-select",
+      label: "设备类型",
+      prop: "deptId",
+      attrs: {
+        placeholder: "请选择设备类型",
+        data: [],
+        filterable: true,
+        "check-strictly": true,
+        "render-after-expand": false,
+        clearable: true,
+        style: {
+          width: "150px",
+        },
+      },
+      async initFn(formItem) {
+        formItem.attrs.data = await DeptAPI.getOptions();
+        // 注意:如果initFn函数不是箭头函数,this会指向此配置项对象,那么也就可以用this来替代形参formItem
+        // this.attrs!.data = await DeptAPI.getOptions();
+      },
+    },
+  
+  ],
+};
+
+export default searchConfig;

src/views/devices/printer copy.vue

@@ -0,0 +1,285 @@
+<template>
+  <div class="printerStyle">
+    <search @queryClick="handleQuery" />
+    <content :tableData="datas.tableData" @addClick="handleAdd" />
+    <!-- 新增 -->
+    <page-modal ref="addModalRef" :modal-config="addmodalConfig" @submit-click="handleSubmitClick">
+      <template #gender="scope">
+        <Dict v-model="scope.formData[scope.prop]" code="gender" />
+      </template>
+    </page-modal>
+  </div>
+</template>
+
+<script setup>
+import search from "./config/search.vue";
+import content from "./config/content.vue";
+import UserAPI from "@/api/system/user";
+let datas = reactive({
+  query: {
+    name: "",
+    type: "",
+  },
+  tableData: [],
+});
+// 搜索-重置
+function handleQuery(d) {
+  datas.query = d;
+  getlist();
+}
+onMounted(() => {
+  getlist();
+});
+function getlist() {
+  console.log(datas.query, "获取列表");
+}
+let addModalRef = ref(null)
+// 新增
+
+
+const addmodalConfig = {
+  pageName: "sys:user",
+  dialog: {
+    title: "新增打印机",
+    width: 800,
+    draggable: true,
+  },
+  form: {
+    labelWidth: 100,
+  },
+  formAction: UserAPI.add,
+  beforeSubmit(data) {
+    console.log("提交之前处理", data);
+  },
+  formItems: [
+    // {
+    //   label: "用户名",
+    //   prop: "username",
+    //   rules: [{ required: true, message: "用户名不能为空", trigger: "blur" }],
+    //   type: "input",
+    //   attrs: {
+    //     placeholder: "请输入用户名",
+    //   },
+    //   col: {
+    //     xs: 24,
+    //     sm: 12,
+    //   },
+    // },
+    // {
+    //   label: "用户昵称",
+    //   prop: "nickname",
+    //   rules: [{ required: true, message: "用户昵称不能为空", trigger: "blur" }],
+    //   type: "input",
+    //   attrs: {
+    //     placeholder: "请输入用户昵称",
+    //   },
+    //   col: {
+    //     xs: 24,
+    //     sm: 12,
+    //   },
+    // },
+    {
+      label: "打印机品牌",
+      prop: "deptId",
+      // rules: [{ required: true, message: "打印机品牌不能为空", trigger: "blur" }],
+      type: "tree-select",
+      attrs: {
+        placeholder: "请选择打印机品牌",
+        data: [],
+        filterable: true,
+        "check-strictly": true,
+        "render-after-expand": false,
+      },
+    },
+    {
+      type: "custom",
+      label: "性别",
+      prop: "gender",
+      initialValue: 1,
+    },
+    {
+      label: "角色",
+      prop: "roleIds",
+      rules: [{ required: true, message: "用户角色不能为空", trigger: "blur" }],
+      type: "select",
+      attrs: {
+        placeholder: "请选择",
+        multiple: true,
+      },
+      options: [],
+      initialValue: [],
+    },
+    {
+      type: "input",
+      label: "手机号码",
+      prop: "mobile",
+      rules: [
+        {
+          pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
+          message: "请输入正确的手机号码",
+          trigger: "blur",
+        },
+      ],
+      attrs: {
+        placeholder: "请输入手机号码",
+        maxlength: 11,
+      },
+    },
+    {
+      label: "邮箱",
+      prop: "email",
+      rules: [
+        {
+          pattern: /\w[-\w.+]*@([A-Za-z0-9][-A-Za-z0-9]+\.)+[A-Za-z]{2,14}/,
+          message: "请输入正确的邮箱地址",
+          trigger: "blur",
+        },
+      ],
+      type: "input",
+      attrs: {
+        placeholder: "请输入邮箱",
+        maxlength: 50,
+      },
+    },
+    {
+      label: "状态",
+      prop: "status",
+      type: "radio",
+      options: [
+        { label: "正常", value: 1 },
+        { label: "禁用", value: 0 },
+        { label: "禁用2", value: 3 },
+      ],
+      initialValue: 1,
+    }, {
+      label: "状态",
+      prop: "status2",
+      type: "checkbox",
+      options: [
+        { label: "正常", value: 1 },
+        { label: "禁用", value: 0 },
+        { label: "禁用2", value: 3 },
+      ],
+      initialValue: 1,
+    },
+
+  ],
+};
+function handleAdd() {
+  addModalRef.value?.setModalVisible();
+}
+// 新增的回调
+function handleSubmitClick(data) {
+  console.log(data)
+}
+//   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>

src/views/devices/printer.vue

@@ -1,139 +1,144 @@
 <template>
-  <div class="printerStyle">
+  <div class="app-container">
-    <search @queryClick="handleQuery" />
+    <!-- 列表 -->
-    <content :tableData="datas.tableData" />
+    <template v-if="isA">
+      <!-- 搜索 -->
+      <page-search ref="searchRef" :search-config="searchConfig" @query-click="handleQueryClick"
+        @reset-click="handleResetClick" />
+
+      <!-- 列表 -->
+      <page-content ref="contentRef" :content-config="contentConfig" @add-click="handleAddClick"
+        @edit-click="handleEditClick" @export-click="handleExportClick" @search-click="handleSearchClick"
+        @toolbar-click="handleToolbarClick" @operat-click="handleOperatClick" @filter-change="handleFilterChange">
+        <template #status="scope">
+          <el-tag :type="scope.row[scope.prop] == 1 ? 'success' : 'info'">
+            {{ scope.row[scope.prop] == 1 ? "启用" : "禁用" }}
+          </el-tag>
+        </template>
+        <template #gender="scope">
+          <DictLabel v-model="scope.row[scope.prop]" code="gender" />
+        </template>
+        <template #mobile="scope">
+          <el-text>{{ scope.row[scope.prop] }}</el-text>
+          <copy-button v-if="scope.row[scope.prop]" :text="scope.row[scope.prop]" style="margin-left: 2px" />
+        </template>
+      </page-content>
+
+      <!-- 新增 -->
+      <page-modal ref="addModalRef" :modal-config="addModalConfig" @submit-click="handleSubmitClick">
+        <template #gender="scope">
+          <Dict v-model="scope.formData[scope.prop]" code="gender" />
+        </template>
+      </page-modal>
+
+      <!-- 编辑 -->
+      <page-modal ref="editModalRef" :modal-config="editModalConfig" @submit-click="handleSubmitClick">
+        <template #gender="scope">
+          <Dict v-model="scope.formData[scope.prop]" code="gender" v-bind="scope.attrs" />
+        </template>
+      </page-modal>
+    </template>
+    <template v-else>
+      <page-content ref="contentRef" :content-config="contentConfig2" @operat-click="handleOperatClick">
+        <template #status="scope">
+          <el-tag :type="scope.row[scope.prop] == 1 ? 'success' : 'info'">
+            {{ scope.row[scope.prop] == 1 ? "启用" : "禁用" }}
+          </el-tag>
+        </template>
+      </page-content>
+    </template>
   </div>
 </template>
 
-<script setup>
+<script setup lang="ts">
-import search from "./config/search.vue";
+import UserAPI from "@/api/system/user";
-import content from "./config/content.vue";
+import DeptAPI from "@/api/system/dept";
-let datas = reactive({
+import RoleAPI from "@/api/system/role";
-  query: {
+import type { IObject, IOperatData } from "@/components/CURD/types";
-    name: "",
+import usePage from "@/components/CURD/usePage";
-    type: "",
+import addModalConfig from "./config/add";
-  },
+import contentConfig from "./config/content";
-  tableData: [],
+import contentConfig2 from "./config/content2";
-});
+import editModalConfig from "./config/edit";
-// 搜索-重置
+import searchConfig from "./config/search";
-function handleQuery(d) {
+
-  datas.query = d;
+const {
-  getlist();
+  searchRef,
+  contentRef,
+  addModalRef,
+  editModalRef,
+  handleQueryClick,
+  handleResetClick,
+  // handleAddClick,
+  // handleEditClick,
+  handleSubmitClick,
+  handleExportClick,
+  handleSearchClick,
+  handleFilterChange,
+} = usePage();
+
+// 新增
+async function handleAddClick() {
+  addModalRef.value?.setModalVisible();
+  // 加载部门下拉数据源
+  addModalConfig.formItems[2]!.attrs!.data = await DeptAPI.getOptions();
+  // 加载角色下拉数据源
+  addModalConfig.formItems[4]!.options = await RoleAPI.getOptions();
 }
-onMounted(() => {
+// 编辑
-  getlist();
+async function handleEditClick(row: IObject) {
-});
+  editModalRef.value?.handleDisabled(false);
-function getlist() {
+  editModalRef.value?.setModalVisible();
-  console.log(datas.query, "获取列表");
+  // 加载部门下拉数据源
+  editModalConfig.formItems[2]!.attrs!.data = await DeptAPI.getOptions();
+  // 加载角色下拉数据源
+  editModalConfig.formItems[4]!.options = await RoleAPI.getOptions();
+  // 根据id获取数据进行填充
+  const data = await UserAPI.getFormData(row.id);
+  editModalRef.value?.setFormData(data);
 }
-//   import { devices, models, subTypes } from './devices'
+// 其他工具栏
-// import addDevice from './components/addDevice'
+function handleToolbarClick(name: string) {
-// import { tbPrintMachineGet, switchtbPrintMachine, delTableHandle } from '@/api/devices'
+  console.log(name);
-// import dayjs from 'dayjs'
+  if (name === "custom1") {
-// export default {
+    ElMessage.success("点击了自定义1按钮");
-//   components: {
+  }
-//     addDevice
+}
-//   },
+// 其他操作列
-//   data() {
+async function handleOperatClick(data: IOperatData) {
-//     return {
+  console.log(data);
-//       query: {
+  // 重置密码
-//         name: '',
+  if (data.name === "reset_pwd") {
-//         type: ''
+    ElMessageBox.prompt("请输入用户「" + data.row.username + "」的新密码", "重置密码", {
-//       },
+      confirmButtonText: "确定",
-//       devices,
+      cancelButtonText: "取消",
-//       tableData: {
+    }).then(({ value }) => {
-//         data: [],
+      if (!value || value.length < 6) {
-//         page: 0,
+        ElMessage.warning("密码至少需要6位字符，请重新输入");
-//         size: 10,
+        return false;
-//         loading: false,
+      }
-//         total: 0
+      UserAPI.resetPassword(data.row.id, value).then(() => {
-//       }
+        ElMessage.success("密码重置成功，新密码是：" + value);
-//     }
+      });
-//   },
+    });
-//   filters: {
+  } else if (data.name === "detail") {
-//     devicesName(value) {
+    // 禁用表单编辑
-//       if (value == 'yxyPrinter') {
+    editModalRef.value?.handleDisabled(true);
-//         return '云想印'
+    // 打开抽屉
-//       } else if (value == 'fePrinter') '飞鹅'
+    editModalRef.value?.setModalVisible();
-//       // const item=devices.find(item => item.value == value)
+    // 修改抽屉标题
-//       // return item?item.name:''
+    editModalConfig.drawer = { ...editModalConfig.drawer, title: "用户详情" };
-//     },
+    // 加载部门下拉数据源
-//     modelsName(value) {
+    editModalConfig.formItems[2]!.attrs!.data = await DeptAPI.getOptions();
-//       const item = models.find(item => item.value == value)
+    // 加载角色下拉数据源
-//       return item ? item.name : ''
+    editModalConfig.formItems[4]!.options = await RoleAPI.getOptions();
-//     },
+    // 根据id获取数据进行填充
-//     subTypesName(value) {
+    const formData = await UserAPI.getFormData(data.row.id);
-//       if (value == "label") return '标签'
+    // 设置表单数据
-//       else if (value == 'kitchen') return '出品'
+    editModalRef.value?.setFormData(formData);
-//       else if (value == 'cash') return '小票'
+  }
-//     },
+}
-//     timeFilter(s) {
+
-//       return dayjs(s).format('YYYY-MM-DD HH:mm:ss')
+// 切换示例
-//     }
+const isA = ref(true);
-//   },
-//   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>