From 5f44ec715bf5e506f51d3ec9e9477fe60a92b3c5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=A3=B7=E5=8F=B6?=
 <14103883+leaf-phos@user.noreply.gitee.com>
Date: Mon, 3 Mar 2025 18:04:29 +0800
Subject: [PATCH] =?UTF-8?q?=E4=B8=B4=E6=97=B6=E6=8F=90=E4=BA=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/ss/suit.js                            |   7 +
 src/api/system/device.js                      |  12 +
 .../Business/StoreType/StoreTypeSelect.vue    |  31 +-
 .../Business/Suit/SuitCheckDialog.vue         | 128 +++++++++
 src/components/Business/Suit/SuitInput.vue    |  70 +++++
 src/components/CheckDialog/index.vue          | 270 ++++++++++++++++++
 src/views/ss/storeType/index.vue              |  47 ++-
 .../ss/suit/component/SuitSearchForm.vue      |  67 +++++
 src/views/ss/suit/component/SuitTable.vue     | 122 +++-----
 .../ss/suit/component/SuitTableColumn.vue     |  75 +++++
 .../device/components/DeviceEditDialog.vue    |  67 +++--
 src/views/system/device/detail.vue            |  63 +++-
 12 files changed, 819 insertions(+), 140 deletions(-)
 create mode 100644 src/components/Business/Suit/SuitCheckDialog.vue
 create mode 100644 src/components/Business/Suit/SuitInput.vue
 create mode 100644 src/components/CheckDialog/index.vue
 create mode 100644 src/views/ss/suit/component/SuitSearchForm.vue
 create mode 100644 src/views/ss/suit/component/SuitTableColumn.vue

diff --git a/src/api/ss/suit.js b/src/api/ss/suit.js
index 821c567..0a87d98 100644
--- a/src/api/ss/suit.js
+++ b/src/api/ss/suit.js
@@ -9,6 +9,13 @@ export function listSuit(query) {
   })
 }
 
+// 查询套餐列表
+export function listSuitByIds(ids) {
+  return request({
+    url: `/ss/suit/listByIds/${ids}`,
+    method: 'get',
+  })
+}
 // 查询套餐详细
 export function getSuit(suitId) {
   return request({
diff --git a/src/api/system/device.js b/src/api/system/device.js
index 73348be..8ed0030 100644
--- a/src/api/system/device.js
+++ b/src/api/system/device.js
@@ -219,3 +219,15 @@ export function deviceSetWxs(deviceId, wxs) {
     }
   })
 }
+
+// 设置设备反转参数
+export function deviceSetSet(deviceId, set) {
+  return request({
+    url: '/system/device/setSet',
+    method: 'put',
+    data: {
+      deviceId,
+      set
+    }
+  })
+}
diff --git a/src/components/Business/StoreType/StoreTypeSelect.vue b/src/components/Business/StoreType/StoreTypeSelect.vue
index e347d35..2635047 100644
--- a/src/components/Business/StoreType/StoreTypeSelect.vue
+++ b/src/components/Business/StoreType/StoreTypeSelect.vue
@@ -1,21 +1,22 @@
 <template>
-  <el-select 
+  <el-cascader 
     v-model="selectValue" 
     :placeholder="placeholder"
     clearable
     filterable
-    :disabled="disabled"
-    :multiple="multiple"
-    @change="handleChange"
+    v-on="$listeners"
     style="width: 100%;"
-  >
-    <el-option
-      v-for="item in list"
-      :key="item.id"
-      :label="item.name"
-      :value="item.id"
-    />
-  </el-select>
+    :options="options"
+    :show-all-levels="false"
+    :props="{ 
+      emitPath: false, 
+      multiple: multiple, 
+      expandTrigger: 'hover',
+      value: 'id',
+      label: 'name',
+      checkStrictly: checkStrictly
+    }"
+  />
 </template>
 
 <script>
@@ -39,11 +40,16 @@ export default {
     multiple: {
       type: Boolean,
       default: false
+    },
+    checkStrictly: {
+      type: Boolean,
+      default: false
     }
   },
   data() {
     return {
       list: [],
+      options: [],
     };
   },
   computed: {
@@ -63,6 +69,7 @@ export default {
     getList() {
       listAllStoreType().then(response => {
         this.list = response.data;
+        this.options = this.handleTree(response.data, 'id', 'parentId', 'children');
       });
     },
     handleChange(val) {
diff --git a/src/components/Business/Suit/SuitCheckDialog.vue b/src/components/Business/Suit/SuitCheckDialog.vue
new file mode 100644
index 0000000..72b565a
--- /dev/null
+++ b/src/components/Business/Suit/SuitCheckDialog.vue
@@ -0,0 +1,128 @@
+<template>
+  <check-dialog
+    :show.sync="dialogVisible"
+    :title="title"
+    :columns="columns"
+    :selected-ids="selectedIds"
+    :list-api="listApi"
+    :load-api="loadApi"
+    :query-params="queryParams"
+    :query="query"
+    @confirm="handleConfirm"
+    :multiple="multiple"
+    prop="suitId"
+    ref="checkDialog"
+  >
+    <template #search-form>
+      <suit-search-form :queryParams="queryParams" @query="handleQuery"/>
+    </template>
+
+    <template #table-column="{column, row}">
+      <suit-table-column :column="column" :row="row"/>
+    </template>
+
+  </check-dialog>
+</template>
+
+<script>
+import { listSuit, listSuitByIds } from "@/api/ss/suit";
+import CheckDialog from "@/components/CheckDialog/index.vue";
+import SuitSearchForm from '@/views/ss/suit/component/SuitSearchForm.vue'
+import SuitTableColumn from '@/views/ss/suit/component/SuitTableColumn.vue'
+
+export default {
+  name: "SuitDialog",
+  components: {
+    CheckDialog,
+    SuitSearchForm,
+    SuitTableColumn
+  },
+  dicts: ['customer_status'],
+  props: {
+    // 弹窗标题
+    title: {
+      type: String,
+      default: "选择套餐"
+    },
+    // 是否显示弹窗
+    show: {
+      type: Boolean,
+      default: false
+    },
+    // 默认选中的ID列表
+    selectedIds: {
+      type: [String, Array],
+      default: null,
+    },
+    // 列表API
+    listApi: {  
+      type: Function,
+      default: listSuit
+    },
+    // 加载API
+    loadApi: {
+      type: Function,
+      default: listSuitByIds
+    },
+    // 是否多选
+    multiple: {
+      type: Boolean,
+      default: false
+    },
+    // 查询参数
+    query: {
+      type: Object,
+      default: null
+    }
+  },
+  data() {
+    return {
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        code: null,
+        name: null,
+        status: null,
+        intentLevel: null,
+        mobile: null,
+        wechat: null,
+        followId: null
+      },
+      // 字段列表
+      columns: [
+        {key: 'suitId', visible: true, label: 'ID', minWidth: null, overflow: false, align: 'center', width: "80"},
+        {key: 'name', visible: true, label: '套餐名称', minWidth: null, overflow: false, align: 'center', width: "100"},
+        {key: 'mobileOrUserName', visible: true, label: '所属用户', minWidth: null, overflow: false, align: 'center', width: "100"},
+        {key: 'feeMode', visible: true, label: '收费模式', minWidth: null, overflow: false, align: 'center', width: "100"},
+        {key: 'feeType', visible: true, label: '收费类型', minWidth: null, overflow: false, align: 'center', width: "120"},
+        {key: 'price', visible: true, label: '价格', minWidth: null, overflow: false, align: 'center', width: "180"},
+        {key: 'deposit', visible: true, label: '押金', minWidth: null, overflow: false, align: 'center', width: "100"},
+        {key: 'description', visible: true, label: '详细说明', minWidth: null, overflow: true, align: 'center', width: null},
+        {key: 'deviceList', visible: true, label: '应用设备', minWidth: "200", overflow: false, align: 'center', width: null},
+        {key: 'createTime', visible: true, label: '创建时间', minWidth: null, overflow: false, align: 'center', width: "100"},
+      ],
+    }
+  },
+  computed: {
+    dialogVisible: {
+      get() {
+        return this.show;
+      },
+      set(val) {
+        this.$emit("update:show", val);
+      }
+    }
+  },
+  methods: {
+    // 确认选择
+    handleConfirm(selection) {
+      this.$emit('confirm', selection);
+    },
+    // 处理查询
+    handleQuery() {
+      this.$refs.checkDialog.handleQuery();
+    }
+  }
+}
+</script>
diff --git a/src/components/Business/Suit/SuitInput.vue b/src/components/Business/Suit/SuitInput.vue
new file mode 100644
index 0000000..b8cf6dd
--- /dev/null
+++ b/src/components/Business/Suit/SuitInput.vue
@@ -0,0 +1,70 @@
+<template>
+  <div>
+    <el-input 
+      :value="text"
+      @focus="showDialog = true"
+      placeholder="点击选择套餐"
+      :disabled="disabled"
+    />
+
+    <suit-check-dialog 
+      :show.sync="showDialog" 
+      @confirm="handleConfirm" 
+      :selected-ids="value"
+      :multiple="multiple"
+      :query="query"
+    />
+  </div>
+</template>
+
+<script>
+import SuitCheckDialog from '@/components/Business/Suit/SuitCheckDialog.vue';
+export default {
+  components: { SuitCheckDialog },
+  props: {
+    // 选中数据
+    value: {
+      type: [String, Array],
+      default: null
+    },
+    // 文本
+    text: {
+      type: String,
+      default: null,
+    },
+    // 是否多选
+    multiple: {
+      type: Boolean,
+      default: false
+    },
+    // 是否禁用
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    // 查询参数
+    query: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  data() {
+    return {
+      showDialog: false,
+      prop: "suitId",
+    }
+  },
+  methods: {
+    handleConfirm(selection) {
+      if (this.multiple) {
+        this.$emit('input', selection.map(item => item[this.prop]));
+        this.$emit('update:text', selection.map(item => item.name).join(','));
+      } else {
+        this.$emit('input', selection?.[this.prop]);
+        this.$emit('update:text', selection?.name);
+      }
+      this.$emit('confirm', selection);
+    }
+  }
+}
+</script>
\ No newline at end of file
diff --git a/src/components/CheckDialog/index.vue b/src/components/CheckDialog/index.vue
new file mode 100644
index 0000000..0628972
--- /dev/null
+++ b/src/components/CheckDialog/index.vue
@@ -0,0 +1,270 @@
+<template>
+  <el-dialog
+    :visible.sync="dialogVisible"
+    :title="title"
+    width="1080px"
+    append-to-body
+    @open="init"
+    @close="handleClose"
+  >
+    <!-- 搜索区域 -->
+    <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="68px" size="small">
+      <slot name="search-form"></slot>
+      <el-form-item>
+        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+      </el-form-item>
+    </el-form>
+
+    <!-- 数据列表 -->
+    <el-table
+      v-loading="loading"
+      :data="list"
+      @selection-change="handleSelectionChange"
+      @row-click="handleRowClick"
+      @row-dblclick="handleRowDbClick"
+      :highlight-current-row="!multiple"
+      height="400"
+      ref="table"
+    >
+      <el-table-column type="selection" width="55" align="center" v-if="multiple" />
+      <template v-for="(column, index) in columns">
+        <el-table-column
+          :key="index"
+          :prop="column.key"
+          :label="column.label"
+          :align="column.align || 'center'"
+          :width="column.width"
+          :min-width="column.minWidth"
+          :show-overflow-tooltip="column.overflow"
+        >
+          <template slot-scope="scope">
+            <slot name="table-column" :row="scope.row" :column="column">
+              {{ scope.row[column.key] | dv }}
+            </slot>
+          </template>
+        </el-table-column>
+      </template>
+
+    </el-table>
+
+    <!-- 分页 -->
+    <pagination
+      v-show="total > 0"
+      :total="total"
+      :page.sync="queryParams.pageNum"
+      :limit.sync="queryParams.pageSize"
+      @pagination="getList"
+    />
+
+    <!-- 底部按钮 -->
+    <div slot="footer" class="dialog-footer">
+      <el-button type="primary" @click="handleConfirm">确 定</el-button>
+      <el-button @click="handleClose">取 消</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+export default {
+  name: "CheckDialog",
+  props: {
+    // 弹窗标题
+    title: {
+      type: String,
+      default: "选择数据"
+    },
+    // 是否显示弹窗
+    show: {
+      type: Boolean,
+      default: false
+    },
+    // 默认选中的ID列表
+    selectedIds: {
+      type: [String, Array],
+      default: null
+    },
+    // 表格列配置
+    columns: {
+      type: Array,
+      required: true
+    },
+    // 获取列表数据的API
+    listApi: {
+      type: Function,
+      required: true
+    },
+    // 获取详情数据的API
+    loadApi: {
+      type: Function,
+      required: true
+    },
+    // 选中数据对应的ID字段
+    prop: {
+      type: String,
+      default: "id"
+    },
+    // 多选
+    multiple: {
+      type: Boolean,
+      default: false,
+    },
+    // 静态查询条件
+    queryParams: {
+      type: Object,
+      default: () => {
+        return {
+          pageNum: 1,
+          pageSize: 20
+        }
+      }
+    },
+    // 动态查询条件
+    query: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  data() {
+    return {
+      // 遮罩层
+      loading: false,
+      // 选中数据ID
+      selection: [],
+      // 总条数
+      total: 0,
+      // 表格数据
+      list: [],
+    }
+  },
+  computed: {
+    dialogVisible: {
+      get() {
+        return this.show;
+      },
+      set(val) {
+        this.$emit("update:show", val);
+      }
+    }
+  },
+  methods: {
+    // 初始化
+    async init() {
+      if (this.multiple && this.selectedIds != null) {
+        this.selection = [...this.selectedIds];
+      } else {
+        this.selection = [this.selectedIds];
+      }
+
+      Object.assign(this.queryParams, {
+        pageNum: 1,
+        pageSize: 20,
+        ...this.query
+      });
+
+      this.getList();
+    },
+    // 查询列表
+    getList() {
+      this.loading = true;
+      this.listApi(this.queryParams).then(res => {
+        this.list = res.rows;
+        this.total = res.total;
+        this.loading = false;
+        
+        // 回显数据
+        this.handleReShow();  
+        
+      });
+    },
+    // 回显数据
+    handleReShow() {
+      // 需要回显的数据
+      let reshowList = [];
+      this.list.forEach((row) => {
+        if (this.selection.includes(row[this.prop])) {
+          reshowList.push(row);
+        }
+      });
+      // 回显数据
+      this.$nextTick(() => {
+        reshowList.forEach((row) => {
+          this.$refs.table.toggleRowSelection(row, true);
+        });
+      });
+    },
+    // 搜索按钮操作
+    handleQuery() {
+      this.queryParams.pageNum = 1;
+      this.getList();
+    },
+    // 重置按钮操作
+    resetQuery() {
+      this.$refs["queryForm"].resetFields();
+      this.handleQuery();
+    },
+    // 多选框选中数据
+    handleSelectionChange(selection) {
+      this.selection = selection.map(item => item[this.prop]);
+    },
+    // 确认按钮
+    handleConfirm() {
+      if (this.loadApi) {
+        this.loading = true;
+        this.loadApi(this.selection).then((res) => {
+          this.confirm(res.data);
+          this.handleClose();
+        }).finally(() => {
+          this.loading = false;
+        });
+      } else {
+        this.confirm(res.data);
+        this.handleClose();
+      }
+    },
+    confirm(data) {
+      if (this.multiple) {
+        this.$emit("confirm", data);
+      } else {
+        if (data.length > 0) {
+          this.$emit("confirm", data[0]);
+        } else {
+          this.$emit("confirm", null);
+        }
+      }
+    },
+    // 关闭弹窗
+    handleClose() {
+      this.dialogVisible = false;
+    },
+    // 处理行点击
+    handleRowClick(row) {
+      console.log("row", row);
+      if (this.multiple) {
+        if (this.selection.includes(row[this.prop])) {
+          this.$refs.table.toggleRowSelection(row, false);
+        } else {
+          this.$refs.table.toggleRowSelection(row, true);
+        }
+      } else {
+        this.selection = [row[this.prop]];
+      }
+    },
+    // 处理行双击
+    handleRowDbClick(row) {
+      if (!this.multiple) {
+        this.selection = [row[this.prop]];
+        this.handleConfirm();
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.el-dialog {
+  .el-table {
+    margin: 10px 0;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/ss/storeType/index.vue b/src/views/ss/storeType/index.vue
index 0970075..03c2405 100644
--- a/src/views/ss/storeType/index.vue
+++ b/src/views/ss/storeType/index.vue
@@ -50,7 +50,16 @@
       <right-toolbar :showSearch.sync="showSearch" @queryTable="getList" :columns="columns"></right-toolbar>
     </el-row>
 
-    <el-table v-loading="loading" :data="storeTypeList" @selection-change="handleSelectionChange" :default-sort="defaultSort"  @sort-change="onSortChange">
+    <el-table 
+      v-loading="loading" 
+      :data="treeData" 
+      @selection-change="handleSelectionChange" 
+      :default-sort="defaultSort"  
+      @sort-change="onSortChange"
+      :tree-props="{children: 'children'}"
+      row-key="id"
+      :default-expand-all="true"
+    >
       <el-table-column type="selection" width="55" align="center" />
       <template v-for="column of showColumns">
         <el-table-column
@@ -69,7 +78,7 @@
               {{d.row[column.key]}}
             </template>
             <template v-else-if="column.key === 'icon'">
-              <image-preview :src="d.row[column.key]" :width="50" :height="50"/>
+              <image-preview :src="d.row[column.key]" :width="24" :height="24"/>
             </template>
             <template v-else>
               {{d.row[column.key]}}
@@ -79,6 +88,13 @@
       </template>
       <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
         <template slot-scope="scope">
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-plus"
+            @click="handleAdd(scope.row)"
+            v-hasPermi="['ss:storeType:add']"
+          >新增</el-button>
           <el-button
             size="mini"
             type="text"
@@ -97,17 +113,20 @@
       </el-table-column>
     </el-table>
 
-    <pagination
+    <!-- <pagination
       v-show="total>0"
       :total="total"
       :page.sync="queryParams.pageNum"
       :limit.sync="queryParams.pageSize"
       @pagination="getList"
-    />
+    /> -->
 
     <!-- 添加或修改店铺类型对话框 -->
     <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
       <el-form ref="form" :model="form" :rules="rules" label-width="80px">
+        <el-form-item label="上级类型" prop="parentId">
+          <store-type-select v-model="form.parentId" placeholder="请选择上级类型" style="width: 100%" :check-strictly="true"/>
+        </el-form-item>
         <el-form-item label="名称" prop="name">
           <el-input v-model="form.name" placeholder="请输入名称" />
         </el-form-item>
@@ -129,6 +148,8 @@
 <script>
 import { listStoreType, getStoreType, delStoreType, addStoreType, updateStoreType } from "@/api/ss/storeType";
 import { $showColumns } from '@/utils/mixins';
+import StoreTypeSelect from '@/components/Business/StoreType/StoreTypeSelect.vue';
+import { listAllStoreType } from '@/api/ss/storeApply';
 
 // 默认排序字段
 const defaultSort = {
@@ -139,12 +160,16 @@ const defaultSort = {
 export default {
   name: "StoreType",
   mixins: [$showColumns],
+  components: {
+    StoreTypeSelect
+  },
   data() {
     return {
+      treeData: [],
       // 字段列表
       columns: [
-        {key: 'id', visible: true, label: 'ID', minWidth: null, sortable: true, overflow: false, align: 'center', width: "80"},
-        {key: 'name', visible: true, label: '名称', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
+        {key: 'name', visible: true, label: '名称', minWidth: null, sortable: true, overflow: false, align: 'left', width: null},
+        {key: 'id', visible: false, label: 'ID', minWidth: null, sortable: true, overflow: false, align: 'center', width: "80"},
         {key: 'icon', visible: true, label: '图标', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
         {key: 'sort', visible: true, label: '排序', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
         {key: 'createTime', visible: true, label: '创建时间', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
@@ -207,9 +232,9 @@ export default {
     /** 查询店铺类型列表 */
     getList() {
       this.loading = true;
-      listStoreType(this.queryParams).then(response => {
-        this.storeTypeList = response.rows;
-        this.total = response.total;
+      listAllStoreType(this.queryParams).then(response => {
+        this.storeTypeList = response.data;
+        this.treeData = this.handleTree(response.data, 'id', 'parentId', 'children');
         this.loading = false;
       });
     },
@@ -225,6 +250,7 @@ export default {
         name: null,
         icon: null,
         createTime: null,
+        parentId: null,
         sort: 0,
       };
       this.resetForm("form");
@@ -246,8 +272,9 @@ export default {
       this.multiple = !selection.length
     },
     /** 新增按钮操作 */
-    handleAdd() {
+    handleAdd(row) {
       this.reset();
+      this.form.parentId = row.id;
       this.open = true;
       this.title = "添加店铺类型";
     },
diff --git a/src/views/ss/suit/component/SuitSearchForm.vue b/src/views/ss/suit/component/SuitSearchForm.vue
new file mode 100644
index 0000000..9487b86
--- /dev/null
+++ b/src/views/ss/suit/component/SuitSearchForm.vue
@@ -0,0 +1,67 @@
+<template>
+  <div>
+    <el-form-item label="设备名称" prop="deviceId" v-if="notHasView(views.device)">
+      <el-input
+        v-model="queryParams.deviceName"
+        placeholder="请输入设备名称"
+        clearable
+        @keyup.enter.native="handleQuery"
+      />
+    </el-form-item>
+    <el-form-item label="用户名称" prop="userName">
+      <el-input
+        v-model="queryParams.userName"
+        placeholder="请输入用户名称"
+        clearable
+        @keyup.enter.native="handleQuery"
+      />
+    </el-form-item>
+    <el-form-item label="用户手机" prop="userMobile">
+      <el-input
+        v-model="queryParams.userMobile"
+        placeholder="请输入用户手机号"
+        clearable
+        @keyup.enter.native="handleQuery"
+      />
+    </el-form-item>
+    <el-form-item label="套餐名称" prop="name">
+      <el-input
+        v-model="queryParams.name"
+        placeholder="请输入套餐名称"
+        clearable
+        @keyup.enter.native="handleQuery"
+      />
+    </el-form-item>
+    <el-form-item label="收费模式" prop="feeMode">
+      <el-select v-model="queryParams.feeMode" placeholder="请选择收费模式" clearable @change="handleQuery">
+        <el-option v-for="dict in dict.type.suit_fee_mode" :key="dict.value" :label="dict.label" :value="dict.value" />
+      </el-select>
+    </el-form-item>
+    <el-form-item label="收费类型" prop="feeType">
+      <el-select v-model="queryParams.feeType" placeholder="请选择收费类型" clearable @change="handleQuery">
+        <el-option v-for="dict in dict.type.suit_fee_type" :key="dict.value" :label="dict.label" :value="dict.value" />
+      </el-select>
+    </el-form-item>
+  </div>
+</template>
+
+<script>
+import { $view } from '@/utils/mixins'
+
+export default {
+  name: "SuitSearchForm",
+  mixins: [$view],
+  dicts: ['suit_fee_mode', 'suit_fee_type'],
+  props: {
+    queryParams: {
+      type: Object,
+      required: true
+    }
+  },
+  methods: {
+    handleQuery() {
+      this.$emit('query');
+    }
+  }
+}
+</script> 
\ No newline at end of file
diff --git a/src/views/ss/suit/component/SuitTable.vue b/src/views/ss/suit/component/SuitTable.vue
index 5f19130..1ebb9d1 100644
--- a/src/views/ss/suit/component/SuitTable.vue
+++ b/src/views/ss/suit/component/SuitTable.vue
@@ -1,48 +1,7 @@
 <template>
   <div>
     <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
-      <el-form-item label="设备名称" prop="deviceId" v-if="notHasView(views.device)">
-        <el-input
-          v-model="queryParams.deviceName"
-          placeholder="请输入设备名称"
-          clearable
-          @keyup.enter.native="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item label="用户名称" prop="userName">
-        <el-input
-          v-model="queryParams.userName"
-          placeholder="请输入用户名称"
-          clearable
-          @keyup.enter.native="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item label="用户手机" prop="userMobile">
-        <el-input
-          v-model="queryParams.userMobile"
-          placeholder="请输入用户手机号"
-          clearable
-          @keyup.enter.native="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item label="套餐名称" prop="name">
-        <el-input
-          v-model="queryParams.name"
-          placeholder="请输入套餐名称"
-          clearable
-          @keyup.enter.native="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item label="收费模式" prop="feeMode">
-        <el-select v-model="queryParams.feeMode" placeholder="请选择收费模式" clearable @change="handleQuery">
-          <el-option v-for="dict in dict.type.suit_fee_mode" :key="dict.value" :label="dict.label" :value="dict.value" />
-        </el-select>
-      </el-form-item>
-      <el-form-item label="收费类型" prop="feeType">
-        <el-select v-model="queryParams.feeType" placeholder="请选择收费类型" clearable @change="handleQuery">
-          <el-option v-for="dict in dict.type.suit_fee_type" :key="dict.value" :label="dict.label" :value="dict.value" />
-        </el-select>
-      </el-form-item>
+      <suit-search-form :queryParams="queryParams" @query="handleQuery"/>
       <el-form-item>
         <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
         <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
@@ -51,45 +10,26 @@
 
     <el-row :gutter="10" class="mb8">
       <slot name="table-operator"/>
-      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList" :columns="columns"></right-toolbar>
     </el-row>
 
     <el-table v-loading="loading" :data="suitList" v-on="$listeners">
       <el-table-column type="selection" width="55" align="center" />
-      <el-table-column label="套餐ID" align="center" prop="suitId" width="80"/>
-      <el-table-column label="套餐名称" align="center" prop="name" width="100"/>
-      <el-table-column label="所属用户" align="center" prop="mobileOrUserName" width="100">
-        <user-link slot-scope="d" :id="d.row.userId" :name="d.row.mobileOrUserName"/>
-      </el-table-column>
-      <el-table-column label="收费模式" align="center" prop="feeMode" width="100">
-        <dict-tag slot-scope="d" :value="d.row.feeMode" :options="dict.type.suit_fee_mode"/>
-      </el-table-column>
-      <el-table-column label="收费类型" align="center" prop="feeType" width="120">
-        <dict-tag slot-scope="d" :value="d.row.feeType" :options="dict.type.suit_fee_type"/>
-      </el-table-column>
-      <el-table-column label="价格" align="center" prop="price" width="180">
-        <template slot-scope="d">
-          <template v-if="SuitFeeType.TIMING === d.row.feeType">
-            {{d.row.price | money}} 元 / {{d.row.value}} {{suitTimeUnit(d.row.timeUnit)}}
+      <template v-for="column of showColumns">
+        <el-table-column
+          :key="column.key"
+          :label="column.label"
+          :prop="column.key"
+          :align="column.align"
+          :min-width="column.minWidth"
+          :width="column.width"
+          :show-overflow-tooltip="column.overflow"
+        >
+          <template slot-scope="d">
+            <suit-table-column :column="column" :row="d.row"/>
           </template>
-          <template v-else-if="SuitFeeType.COUNT === d.row.feeType">
-            {{d.row.price | money}} 元 / {{d.row.value}} 度
-          </template>
-          <template v-else>动态计算</template>
-        </template>
-      </el-table-column>
-      <el-table-column label="押金" align="center" prop="deposit" width="100">
-        <template slot-scope="d">{{d.row.deposit | money}} 元</template>
-      </el-table-column>
-      <el-table-column label="详细说明" align="center" prop="description" show-overflow-tooltip/>
-      <el-table-column label="应用设备" align="center" prop="deviceList" min-width="200">
-        <template slot-scope="d">
-          <template v-for="(item, index) in d.row.deviceList"  >
-            <device-link type="tag" style="margin-right: 4px" :key="index" :id="item.deviceId" :text="`${item.deviceName}(${item.deviceNo})`"/>
-          </template>
-        </template>
-      </el-table-column>
-      <el-table-column label="创建时间" align="center" prop="createTime" width="100"/>
+        </el-table-column>
+      </template>
       <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="200" fixed="right">
         <template slot-scope="scope">
           <slot name="row-operator" :row="scope.row"/>
@@ -114,14 +54,16 @@ import DeviceInput from '@/components/Business/Device/DeviceInput.vue'
 import { findLabel, isEmpty } from '@/utils'
 import UserLink from '@/components/Business/SmUser/UserLink.vue'
 import UserInput from '@/components/Business/SmUser/UserInput.vue'
-import { $view } from '@/utils/mixins'
+import { $view, $showColumns } from '@/utils/mixins'
 import DeviceLink from '@/components/Business/Device/DeviceLink.vue'
 import { SuitFeeMode, SuitFeeType } from '@/utils/constants'
 import SuitEditDialog from '@/views/ss/suit/component/SuitEditDialog.vue'
+import SuitSearchForm from '@/views/ss/suit/component/SuitSearchForm.vue'
+import SuitTableColumn from '@/views/ss/suit/component/SuitTableColumn.vue'
 
 export default {
   name: "SuitTable",
-  mixins: [$view],
+  mixins: [$view, $showColumns],
   dicts: ['time_unit', 'suit_fee_mode', 'suit_fee_type'],
   computed: {
     SuitFeeType() {
@@ -134,7 +76,15 @@ export default {
       }
     },
   },
-  components: { SuitEditDialog, DeviceLink, UserInput, UserLink, DeviceInput },
+  components: { 
+    SuitEditDialog, 
+    DeviceLink, 
+    UserInput, 
+    UserLink, 
+    DeviceInput,
+    SuitSearchForm,
+    SuitTableColumn
+  },
   props: {
     query: {
       type: Object,
@@ -178,9 +128,23 @@ export default {
         description: null,
         deleted: null
       },
+      // 字段列表
+      columns: [
+        {key: 'suitId', visible: true, label: 'ID', minWidth: null, overflow: false, align: 'center', width: "80"},
+        {key: 'name', visible: true, label: '套餐名称', minWidth: null, overflow: false, align: 'center', width: "100"},
+        {key: 'mobileOrUserName', visible: true, label: '所属用户', minWidth: null, overflow: false, align: 'center', width: "100"},
+        {key: 'feeMode', visible: true, label: '收费模式', minWidth: null, overflow: false, align: 'center', width: "100"},
+        {key: 'feeType', visible: true, label: '收费类型', minWidth: null, overflow: false, align: 'center', width: "120"},
+        {key: 'price', visible: true, label: '价格', minWidth: null, overflow: false, align: 'center', width: "180"},
+        {key: 'deposit', visible: true, label: '押金', minWidth: null, overflow: false, align: 'center', width: "100"},
+        {key: 'description', visible: true, label: '详细说明', minWidth: null, overflow: true, align: 'center', width: null},
+        {key: 'deviceList', visible: true, label: '应用设备', minWidth: "200", overflow: false, align: 'center', width: null},
+        {key: 'createTime', visible: true, label: '创建时间', minWidth: null, overflow: false, align: 'center', width: "100"},
+      ],
     };
   },
   created() {
+    this.initColumns();
     this.queryParams = {
       ...this.queryParams,
       ...this.query
diff --git a/src/views/ss/suit/component/SuitTableColumn.vue b/src/views/ss/suit/component/SuitTableColumn.vue
new file mode 100644
index 0000000..268aa26
--- /dev/null
+++ b/src/views/ss/suit/component/SuitTableColumn.vue
@@ -0,0 +1,75 @@
+<template>
+  <div>
+    <template v-if="column.key === 'suitId'">
+      {{row[column.key]}}
+    </template>
+    <template v-else-if="column.key === 'name'">
+      {{row[column.key]}}
+    </template>
+    <template v-else-if="column.key === 'mobileOrUserName'">
+      <user-link :id="row.userId" :name="row.mobileOrUserName"/>
+    </template>
+    <template v-else-if="column.key === 'feeMode'">
+      <dict-tag :value="row[column.key]" :options="dict.type.suit_fee_mode"/>
+    </template>
+    <template v-else-if="column.key === 'feeType'">
+      <dict-tag :value="row[column.key]" :options="dict.type.suit_fee_type"/>
+    </template>
+    <template v-else-if="column.key === 'price'">
+      <template v-if="SuitFeeType.TIMING === row.feeType">
+        {{row.price | money}} 元 / {{row.value}} {{suitTimeUnit(row.timeUnit)}}
+      </template>
+      <template v-else-if="SuitFeeType.COUNT === row.feeType">
+        {{row.price | money}} 元 / {{row.value}} 度
+      </template>
+      <template v-else>动态计算</template>
+    </template>
+    <template v-else-if="column.key === 'deposit'">
+      {{row[column.key] | money}} 元
+    </template>
+    <template v-else-if="column.key === 'deviceList'">
+      <template v-for="(item, index) in row.deviceList">
+        <device-link type="tag" style="margin-right: 4px" :key="index" :id="item.deviceId" :text="`${item.deviceName}(${item.deviceNo})`"/>
+      </template>
+    </template>
+    <template v-else>
+      {{row[column.key]}}
+    </template>
+  </div>
+</template>
+
+<script>
+import UserLink from '@/components/Business/SmUser/UserLink.vue'
+import DeviceLink from '@/components/Business/Device/DeviceLink.vue'
+import { findLabel } from '@/utils'
+import { SuitFeeType } from '@/utils/constants'
+
+export default {
+  name: "SuitTableColumn",
+  components: {
+    UserLink,
+    DeviceLink
+  },
+  dicts: ['time_unit', 'suit_fee_mode', 'suit_fee_type'],
+  props: {
+    column: {
+      type: Object,
+      required: true
+    },
+    row: {
+      type: Object,
+      required: true
+    }
+  },
+  computed: {
+    SuitFeeType() {
+      return SuitFeeType
+    }
+  },
+  methods: {
+    suitTimeUnit(unit) {
+      return findLabel(this.dict.type.time_unit, unit);
+    }
+  }
+}
+</script> 
\ No newline at end of file
diff --git a/src/views/system/device/components/DeviceEditDialog.vue b/src/views/system/device/components/DeviceEditDialog.vue
index e53ecb5..968cb9c 100644
--- a/src/views/system/device/components/DeviceEditDialog.vue
+++ b/src/views/system/device/components/DeviceEditDialog.vue
@@ -1,6 +1,6 @@
 <template>
   <el-dialog :visible.sync="dialogVisible" :title="title" @open="handleOpen" :close-on-click-modal="false" width="900px" append-to-body>
-    <el-form ref="form" :model="form" size="small" :rules="rules" label-width="6em">
+    <el-form ref="form" :model="form" size="small" :rules="rules" label-width="6em" v-loading="loading">
       <el-row :gutter="gutter">
         <form-col :span="span" label="自定义图片" prop="customPicture">
           <image-upload v-model="form.customPicture" :limit="1" :is-show-tip="false"/>
@@ -26,16 +26,16 @@
       </el-row>
       <collapse-panel title="费用设置" :value="true">
         <el-row :gutter="gutter">
-          <form-col :span="12" label="服务模式" prop="serviceMode">
+          <form-col :span="12" label="服务模式" prop="serviceMode" tip="直营模式：官方收取商户服务费。代理模式：代理商收取商户服务费，官方收取代理商服务费。">
             <el-radio-group v-model="form.serviceMode">
               <el-radio v-for="item of dict.type.device_service_mode" :label="item.value" :key="item.value">{{item.label}}</el-radio>
             </el-radio-group>
           </form-col>
-          <template v-if="form.serviceMode === DeviceServiceMode.AGENT">
+          <template v-if="form.serviceMode === DeviceServiceMode.AGENT" >
             <form-col :span="12" label="代理商" prop="agentId">
               <user-input v-model="form.agentId" :query="{type: SmUserType.AGENT}" />
             </form-col>
-            <form-col :span="12" label="代理服务费" prop="agentServiceRate" label-width="7em">
+            <form-col :span="12" label="代理服务费" prop="agentServiceRate" label-width="7em" tip="代理商收取商户的服务费">
               <el-input v-model="form.agentServiceRate" placeholder="请输入代理服务费" type="number">
                 <template #append>%</template>
               </el-input>
@@ -68,6 +68,19 @@
           </form-col>
         </el-row>
       </collapse-panel>
+      <collapse-panel title="套餐设置" :value="true" v-if="form.userId != null">
+        <el-row :gutter="gutter">
+          <form-col :span="24" label="关联套餐" prop="suitIds">
+            <suit-input 
+              :value="form.suitList.map(item => item.suitId)" 
+              :text="form.suitList.map(item => item.name).join(',')" 
+              :multiple="true" 
+              @confirm="handleSuitConfirm"
+              :query="{userId: form.userId}"
+            />
+          </form-col>
+        </el-row>
+      </collapse-panel>
     </el-form>
     <div slot="footer" class="dialog-footer">
       <el-button type="primary" @click="submitForm">确 定</el-button>
@@ -82,10 +95,11 @@ import ModelSelect from "@/components/Business/Model/modelSelect.vue";
 import UserInput from '@/components/Business/SmUser/UserInput.vue'
 import { DeviceServiceMode, SmUserType } from '@/utils/constants'
 import CollapsePanel from '@/components/CollapsePanel/index.vue'
+import SuitInput from '@/components/Business/Suit/SuitInput.vue'  
 
 export default {
   name: 'DeviceEditDialog',
-  components: { UserInput, ModelSelect, CollapsePanel },
+  components: { UserInput, ModelSelect, CollapsePanel, SuitInput },
   dicts: ['device_service_mode'],
   props: {
     visible: {
@@ -99,24 +113,11 @@ export default {
   },
   data() {
     return {
+      loading: false,
       showFee: true,
       form: {
-        deviceId: null,
-        picture: null,
-        modelId: null,
-        mac: null,
-        deviceNo: null,
-        deviceName: null,
-        serviceType: '1',
-        serviceRate: null,
-        remark: null,
-        startTime: null,
-        startUnit: "3",
-        startPrice: null,
-        overTime: null,
-        overUnit: "3",
-        overPrice: null,
-        serviceMode: '1'
+        suitIds: [],
+        suitList: [],
       },
       span: 8,
       gutter: 8,
@@ -159,21 +160,34 @@ export default {
     }
   },
   methods: {
+    // 套餐确认
+    handleSuitConfirm(selection) {
+      this.form.suitList = selection;
+    },
+    // 打开
     handleOpen() {
       if (this.deviceId != null) {
-        getDevice(this.deviceId).then(response => {
-          this.form = response.data;
-        });
+        this.getDetail();
       } else {
         this.reset();
       }
     },
+    // 获取详情
+    getDetail() {
+      this.loading = true;
+      getDevice(this.deviceId).then(response => {
+        this.form = response.data;
+      }).finally(() => {
+        this.loading = false;
+      })
+    },
     reset() {
       this.form = {
         deviceId: null,
         picture: null,
         modelId: null,
         mac: null,
+        mac2: null,
         deviceNo: null,
         deviceName: null,
         serviceType: '1',
@@ -185,7 +199,9 @@ export default {
         overTime: null,
         overUnit: "3",
         overPrice: null,
-        serviceMode: '1'
+        serviceMode: '1',
+        // vo
+        suitList: [],
       };
       this.$nextTick(() => {
         this.$refs.form?.resetFields();
@@ -206,6 +222,7 @@ export default {
     submitForm() {
       this.$refs.form.validate(valid => {
         if (valid) {
+          this.form.suitIds = this.form.suitList.map(item => item.suitId);
           if (this.form.deviceId != null) {
             updateDevice(this.form).then(response => {
               this.$modal.msgSuccess("修改成功");
diff --git a/src/views/system/device/detail.vue b/src/views/system/device/detail.vue
index 4ec2df2..6e10811 100644
--- a/src/views/system/device/detail.vue
+++ b/src/views/system/device/detail.vue
@@ -8,14 +8,17 @@
             <!-- 主要信息 -->
             <div class="device-title">
               <i class="el-icon-monitor"></i>
-              <span class="device-name">{{deviceData.deviceName | dv}}</span>
+              <div class="device-name">
+                {{deviceData.deviceName | dv}}
+                <el-link type="primary" icon="el-icon-edit" @click="handleEditDevice"></el-link>
+              </div>
               <dot-status :active="deviceData.onlineStatus === DeviceOnlineStatus.ONLINE" show-text/>
               <dot-status :active="isOpen" show-text active-text="已开启" inactive-text="已关闭"/>
               <dot-status 
                 :active="deviceData.status === DeviceStatus.FREE" 
                 show-text 
                 active-text="空闲" 
-                :inactive-text="deviceData.status === DeviceStatus.USING ? '使用中' : '调度中'"
+                :inactive-text="deviceData.status === DeviceStatus.USING ? '使用中' : '调试中'"
               />
               <span class="last-online-time">
                 <i class="el-icon-time"></i>
@@ -26,6 +29,8 @@
             
             <!-- 操作按钮组 -->
             <el-row class="device-actions">
+              <el-button size="small" plain icon="el-icon-setting" @click="handleReverse(true)" v-if="!isReverse">反转开关</el-button>
+              <el-button size="small" plain icon="el-icon-setting" @click="handleReverse(false)" v-if="isReverse">正转开关</el-button>
               <el-button size="small" plain icon="el-icon-plus" @click="handleAddTime">增加时长</el-button>
               <el-button size="small" plain icon="el-icon-plus" @click="handleAddEle" v-if="deviceData.modelTags.includes(ModelTag.ELE)">增加电量</el-button>
               <el-button size="small" plain icon="el-icon-refresh" @click="handleReset">时长归零</el-button>
@@ -341,6 +346,9 @@
     </el-dialog>
 
     <device-set-wifi-dialog :show.sync="showSetWifi" :device-id="deviceData.deviceId" @success="onSetWifiSuccess"/>
+
+    <device-edit-dialog :visible.sync="editDialogVisible" :device-id="deviceData.deviceId"/>
+
   </div>
 </template>
 
@@ -349,6 +357,7 @@
 import {
   addEle,
   addTime, deviceInitTotalEle,
+  deviceSetSet,
   deviceSetWxs,
   getDevice,
   refreshIot,
@@ -382,6 +391,8 @@ import DeviceSetWifiDialog from '@/views/system/device/components/DeviceSetWifiD
 import CommandLog from "@/views/ss/commandLog/index.vue";
 import DotStatus from '@/components/DotStatus/index.vue'
 import DeviceSn from '@/views/system/device/components/DeviceSn.vue'
+import DeviceEditDialog from '@/views/system/device/components/DeviceEditDialog.vue'
+
 
 export default {
   name: 'Device/:deviceId',
@@ -400,17 +411,14 @@ export default {
     'device_set'
   ],
   components: {
-    CommandLog,
-    DeviceSetWifiDialog,
-    LineField,
-    BindAgentButton,
-    BindMchButton,
-    BooleanTag,
-    Recharge,
-    UserLink,
-    StoreLink,
-    RecordTime,
-    Suit, ResetRecord, BindRecord, ReadingRecord, MeterRecordReport, QrCode, RechargeRecord, LineChart, DotStatus, DeviceSn},
+    CommandLog, DeviceSetWifiDialog, LineField,
+    BindAgentButton, BindMchButton, BooleanTag,
+    Recharge, UserLink, StoreLink,
+    RecordTime, Suit, ResetRecord,
+    BindRecord, ReadingRecord, MeterRecordReport,
+    QrCode, RechargeRecord, LineChart,
+    DotStatus, DeviceSn, DeviceEditDialog
+  },
   data() {
     return {
       showSetWifi: false,
@@ -437,7 +445,8 @@ export default {
       DeviceStatus,
       ModelTag,
       DeviceServiceMode,
-      DeviceOnlineType
+      DeviceOnlineType,
+      editDialogVisible: false
     }
   },
   computed: {
@@ -474,6 +483,10 @@ export default {
     isOpen() {
       return this.deviceData != null && this.deviceData.powerStatus === '1';
     },
+    // 是否反转
+    isReverse() {
+      return this.deviceData != null && this.deviceData.set === '1';
+    },
     // 是否限制充值
     isLimitRecharge() {
       if (this.deviceData == null || this.deviceData.limitRechargeTime == null) {
@@ -490,6 +503,26 @@ export default {
     clearInterval(this.timer);
   },
   methods: {
+    handleEditDevice() {
+      this.editDialogVisible = true;
+    },
+    // 反转设备
+    handleReverse(reverse) {
+      this.$confirm(`是否确认${reverse ? '反转' : '正转'}设备？`, '警告', { 
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        let set = reverse ? '1' : '0';
+        deviceSetSet(this.deviceData.deviceId, set).then(res => {
+          if (res.code === 200) {
+            this.$message.success('操作成功');
+            this.deviceData.set = set;
+          }
+        })
+      })
+    },
+    // 修改电量系数
     handleSetWxs() {
       this.$prompt('请输入电量系数', '修改电量系数', {
         confirmButtonText: '确定',
@@ -729,6 +762,8 @@ export default {
           font-size: 18px;
           font-weight: bold;
           margin-right: 6px;
+          display: flex;
+          align-items: center;
         }
 
         .last-online-time {