业主管理

src/views/system/UserList.vue

@@ -1,403 +1,34 @@
 <template>
-  <a-card :bordered="false">
-
-    <!-- 查询区域 -->
-    <div class="table-page-search-wrapper">
-      <a-form layout="inline" @keyup.enter.native="searchQuery">
-        <a-row :gutter="24">
-
-          <a-col :md="6" :sm="12">
-            <a-form-item label="账号">
-              <!--<a-input placeholder="请输入账号查询" v-model="queryParam.username"></a-input>-->
-              <j-input placeholder="输入账号模糊查询" v-model="queryParam.username"></j-input>
-            </a-form-item>
-          </a-col>
-
-          <a-col :md="6" :sm="8">
-            <a-form-item label="性别">
-              <a-select v-model="queryParam.sex" placeholder="请选择性别">
-                <a-select-option value="">请选择</a-select-option>
-                <a-select-option value="1">男</a-select-option>
-                <a-select-option value="2">女</a-select-option>
-              </a-select>
-            </a-form-item>
-          </a-col>
-
-
-          <template v-if="toggleSearchStatus">
-            <a-col :md="6" :sm="8">
-              <a-form-item label="真实名字">
-                <a-input placeholder="请输入真实名字" v-model="queryParam.realname"></a-input>
-              </a-form-item>
-            </a-col>
-
-            <a-col :md="6" :sm="8">
-              <a-form-item label="手机号码">
-                <a-input placeholder="请输入手机号码查询" v-model="queryParam.phone"></a-input>
-              </a-form-item>
-            </a-col>
-
-            <a-col :md="6" :sm="8">
-              <a-form-item label="用户状态">
-                <a-select v-model="queryParam.status" placeholder="请选择">
-                  <a-select-option value="">请选择</a-select-option>
-                  <a-select-option value="1">正常</a-select-option>
-                  <a-select-option value="2">冻结</a-select-option>
-                </a-select>
-              </a-form-item>
-            </a-col>
-          </template>
-
-          <a-col :md="6" :sm="8">
-            <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
-              <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
-              <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
-              <a @click="handleToggleSearch" style="margin-left: 8px">
-                {{ toggleSearchStatus ? '收起' : '展开' }}
-                <a-icon :type="toggleSearchStatus ? 'up' : 'down'"/>
-              </a>
-            </span>
-          </a-col>
-
-        </a-row>
-      </a-form>
-    </div>
-
-    <!-- 操作按钮区域 -->
-    <div class="table-operator" style="border-top: 5px">
-      <a-button @click="handleAdd" type="primary" icon="plus" >添加用户</a-button>
-      <a-button type="primary" icon="download" @click="handleExportXls('用户信息')">导出</a-button>
-      <a-upload name="file" :showUploadList="false" :multiple="false" :headers="tokenHeader" :action="importExcelUrl" @change="handleImportExcel">
-        <a-button type="primary" icon="import">导入</a-button>
-      </a-upload>
-      <j-third-app-button biz-type="user" :selected-row-keys="selectedRowKeys" syncToApp syncToLocal @sync-finally="onSyncFinally"/>
-      <a-button type="primary" icon="hdd" @click="recycleBinVisible=true">回收站</a-button>
-      <a-dropdown v-if="selectedRowKeys.length > 0">
-        <a-menu slot="overlay" @click="handleMenuClick">
-          <a-menu-item key="1">
-            <a-icon type="delete" @click="batchDel"/>
-            删除
-          </a-menu-item>
-          <a-menu-item key="2">
-            <a-icon type="lock" @click="batchFrozen('2')"/>
-            冻结
-          </a-menu-item>
-          <a-menu-item key="3">
-            <a-icon type="unlock" @click="batchFrozen('1')"/>
-            解冻
-          </a-menu-item>
-        </a-menu>
-        <a-button style="margin-left: 8px">
-          批量操作
-          <a-icon type="down"/>
-        </a-button>
-      </a-dropdown>
-      <j-super-query :fieldList="superQueryFieldList" @handleSuperQuery="handleSuperQuery"/>
-    </div>
-
-    <!-- table区域-begin -->
-    <div>
-      <div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">
-        <i class="anticon anticon-info-circle ant-alert-icon"></i>已选择&nbsp;<a style="font-weight: 600">{{ selectedRowKeys.length }}</a>项&nbsp;&nbsp;
-        <a style="margin-left: 24px" @click="onClearSelected">清空</a>
-      </div>
-
-      <a-table
-        ref="table"
-        bordered
-        size="middle"
-        rowKey="id"
-        :columns="columns"
-        :dataSource="dataSource"
-        :pagination="ipagination"
-        :loading="loading"
-        :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
-        @change="handleTableChange">
-
-        <template slot="avatarslot" slot-scope="text, record, index">
-          <div class="anty-img-wrap">
-            <a-avatar shape="square" :src="getAvatarView(record.avatar)" icon="user"/>
-          </div>
-        </template>
-
-        <span slot="action" slot-scope="text, record">
-          <a @click="handleEdit(record)" >编辑</a>
-
-          <a-divider type="vertical" />
-
-          <a-dropdown>
-            <a class="ant-dropdown-link">
-              更多 <a-icon type="down"/>
-            </a>
-            <a-menu slot="overlay">
-              <a-menu-item>
-                <a href="javascript:;" @click="handleRelation(record.id)">关联房间</a>
-              </a-menu-item>
-
-              <a-menu-item>
-                <a href="javascript:;" @click="handleDetail(record)">详情</a>
-              </a-menu-item>
-
-              <a-menu-item>
-                <a href="javascript:;" @click="handleChangePassword(record.username)">密码</a>
-              </a-menu-item>
-
-              <a-menu-item>
-                <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">
-                  <a>删除</a>
-                </a-popconfirm>
-              </a-menu-item>
-
-              <a-menu-item v-if="record.status==1">
-                <a-popconfirm title="确定冻结吗?" @confirm="() => handleFrozen(record.id,2,record.username)">
-                  <a>冻结</a>
-                </a-popconfirm>
-              </a-menu-item>
-
-              <a-menu-item v-if="record.status==2">
-                <a-popconfirm title="确定解冻吗?" @confirm="() => handleFrozen(record.id,1,record.username)">
-                  <a>解冻</a>
-                </a-popconfirm>
-              </a-menu-item>
-              
-            </a-menu>
-          </a-dropdown>
-        </span>
-
-
-      </a-table>
-    </div>
-    <!-- table区域-end -->
-
-    <user-modal ref="modalForm" @ok="modalFormOk"></user-modal>
-
-    <password-modal ref="passwordmodal" @ok="passwordModalOk"></password-modal>
-    <user-room-relation @ok="saveRelationOk" ref="userroomrelationmodal"></user-room-relation>
-    <sys-user-agent-modal ref="sysUserAgentModal"></sys-user-agent-modal>
-
-    <!-- 用户回收站 -->
-    <user-recycle-bin-modal :visible.sync="recycleBinVisible" @ok="modalFormOk"/>
+  <a-card style="width: 100%; height: 100%">
+    <a-tabs default-active-key="1">
+      <a-tab-pane key="1">
+        <span slot="tab"> 员工管理 </span>
+        <yuangong-list></yuangong-list>
+      </a-tab-pane>
+      <a-tab-pane key="2">
+        <span slot="tab"> 业主管理 </span>
+        <yezhu-list></yezhu-list>
+      </a-tab-pane>
+    </a-tabs>
   </a-card>
 </template>
 
 <script>
-  import UserModal from './modules/UserModal'
-  import UserRoomRelation from './modules/UserRoomRelationModal.vue'
-  import PasswordModal from './modules/PasswordModal'
-  import {putAction,getFileAccessHttpUrl} from '@/api/manage';
-  import {frozenBatch} from '@/api/api'
-  import {JeecgListMixin} from '@/mixins/JeecgListMixin'
-  import SysUserAgentModal from "./modules/SysUserAgentModal";
-  import JInput from '@/components/jeecg/JInput'
-  import UserRecycleBinModal from './modules/UserRecycleBinModal'
-  import JSuperQuery from '@/components/jeecg/JSuperQuery'
-  import JThirdAppButton from '@/components/jeecgbiz/thirdApp/JThirdAppButton'
-
-  export default {
-    name: "UserList",
-    mixins: [JeecgListMixin],
-    components: {
-      JThirdAppButton,
-      SysUserAgentModal,
-      UserModal,
-      PasswordModal,
-      JInput,
-      UserRecycleBinModal,
-      UserRoomRelation,
-      JSuperQuery
-    },
-    data() {
-      return {
-        description: '这是用户管理页面',
-        queryParam: {},
-        recycleBinVisible: false,
-        columns: [
-          /*{
-            title: '#',
-            dataIndex: '',
-            key:'rowIndex',
-            width:60,
-            align:"center",
-            customRender:function (t,r,index) {
-              return parseInt(index)+1;
-            }
-          },*/
-          {
-            title: '用户账号',
-            align: "center",
-            dataIndex: 'username',
-            width: 120,
-            sorter: true
-          },
-          {
-            title: '用户姓名',
-            align: "center",
-            width: 100,
-            dataIndex: 'realname',
-          },
-          {
-            title: '头像',
-            align: "center",
-            width: 120,
-            dataIndex: 'avatar',
-            scopedSlots: {customRender: "avatarslot"}
-          },
-
-          {
-            title: '性别',
-            align: "center",
-            width: 80,
-            dataIndex: 'sex_dictText',
-            sorter: true
-          },
-          {
-            title: '生日',
-            align: "center",
-            width: 100,
-            dataIndex: 'birthday'
-          },
-          {
-            title: '手机号码',
-            align: "center",
-            width: 100,
-            dataIndex: 'phone'
-          },
-          {
-            title: '部门',
-            align: "center",
-            width: 180,
-            dataIndex: 'orgCodeTxt'
-          },
-          {
-            title: '负责部门',
-            align: "center",
-            width: 180,
-            dataIndex: 'departIds_dictText'
-          },
-          {
-            title: '状态',
-            align: "center",
-            width: 80,
-            dataIndex: 'status_dictText'
-          },
-          {
-            title: '操作',
-            dataIndex: 'action',
-            scopedSlots: {customRender: 'action'},
-            align: "center",
-            width: 170
-          }
-
-        ],
-        superQueryFieldList: [
-          { type: 'input', value: 'username', text: '用户账号', },
-          { type: 'input', value: 'realname', text: '用户姓名', },
-          { type: 'select', value: 'sex', dbType: 'int', text: '性别', dictCode: 'sex' },
-        ],
-        url: {
-          syncUser: "/act/process/extActProcess/doSyncUser",
-          list: "/sys/user/list",
-          delete: "/sys/user/delete",
-          deleteBatch: "/sys/user/deleteBatch",
-          exportXlsUrl: "/sys/user/exportXls",
-          importExcelUrl: "sys/user/importExcel",
-        },
-      }
-    },
-    computed: {
-      importExcelUrl: function(){
-        return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`;
-      }
-    },
-    methods: {
-      saveRelationOk() {
-        
-      },
-      getAvatarView: function (avatar) {
-        return getFileAccessHttpUrl(avatar)
-      },
-
-      batchFrozen: function (status) {
-        if (this.selectedRowKeys.length <= 0) {
-          this.$message.warning('请选择一条记录！');
-          return false;
-        } else {
-          let ids = "";
-          let that = this;
-          let isAdmin = false;
-          that.selectionRows.forEach(function (row) {
-            if (row.username == 'admin') {
-              isAdmin = true;
-            }
-          });
-          if (isAdmin) {
-            that.$message.warning('管理员账号不允许此操作,请重新选择！');
-            return;
-          }
-          that.selectedRowKeys.forEach(function (val) {
-            ids += val + ",";
-          });
-          that.$confirm({
-            title: "确认操作",
-            content: "是否" + (status == 1 ? "解冻" : "冻结") + "选中账号?",
-            onOk: function () {
-              frozenBatch({ids: ids, status: status}).then((res) => {
-                if (res.success) {
-                  that.$message.success(res.message);
-                  that.loadData();
-                  that.onClearSelected();
-                } else {
-                  that.$message.warning(res.message);
-                }
-              });
-            }
-          });
-        }
-      },
-      handleMenuClick(e) {
-        if (e.key == 1) {
-          this.batchDel();
-        } else if (e.key == 2) {
-          this.batchFrozen(2);
-        } else if (e.key == 3) {
-          this.batchFrozen(1);
-        }
-      },
-      handleFrozen: function (id, status, username) {
-        let that = this;
-        //TODO 后台校验管理员角色
-        if ('admin' == username) {
-          that.$message.warning('管理员账号不允许此操作！');
-          return;
-        }
-        frozenBatch({ids: id, status: status}).then((res) => {
-          if (res.success) {
-            that.$message.success(res.message);
-            that.loadData();
-          } else {
-            that.$message.warning(res.message);
-          }
-        });
-      },
-      handleChangePassword(username) {
-        this.$refs.passwordmodal.show(username);
-      },
-      handleRelation(userId) {
-        this.$refs.userroomrelationmodal.show(userId)
-      },
-      passwordModalOk() {
-        //TODO 密码修改完成 不需要刷新页面，可以把datasource中的数据更新一下
-      },
-      onSyncFinally({isToLocal}) {
-        // 同步到本地时刷新下数据
-        if (isToLocal) {
-          this.loadData()
-        }
-      },
-    }
-
-  }
+import YuangongList from "./YuangongList.vue";
+import YezhuList from "./YezhuList.vue";
+export default {
+  components: {
+    YuangongList,
+    YezhuList,
+  },
+  data() {
+    return {};
+  },
+};
 </script>
+
 <style scoped>
-  @import '~@assets/less/common.less'
-</style>
+.main {
+  height: 70% !important;
+}
+</style>

src/views/system/YezhuList.vue

@@ -0,0 +1,227 @@
+<template>
+  <a-card :bordered="false">
+    <!-- 查询区域 -->
+    <div class="table-page-search-wrapper">
+      <a-form layout="inline" @keyup.enter.native="searchQuery">
+        <a-row :gutter="24">
+          <a-col :span="3">
+            <a-form-item label="">
+              <j-input
+                placeholder="员工姓名/账号"
+                v-model="queryParam.name"
+              ></j-input>
+            </a-form-item>
+          </a-col>
+          <a-col :md="6" :sm="8">
+            <span
+              style="float: left; overflow: hidden"
+              class="table-page-search-submitButtons"
+            >
+              <a-button type="primary" @click="searchQuery" icon="search"
+                >查询</a-button
+              >
+              <!-- <a-button
+                type="primary"
+                @click="searchReset"
+                icon="reload"
+                style="margin-left: 8px"
+                >重置</a-button
+              > -->
+              <a-button
+                @click="handleAdd"
+                style="margin-left: 8px"
+                type="primary"
+                icon="plus"
+                >新增业主</a-button
+              >
+              <a-button
+                @click="handleAdd"
+                style="margin-left: 8px"
+                type="primary"
+                >配置税率</a-button
+              >
+            </span>
+          </a-col>
+        </a-row>
+      </a-form>
+    </div>
+    <!-- 查询区域-END -->
+
+    <!-- table区域-begin -->
+    <div>
+      <a-table
+        ref="table"
+        size="middle"
+        :scroll="{ x: true }"
+        bordered
+        rowKey="id"
+        :columns="columns"
+        :dataSource="dataSource"
+        :pagination="ipagination"
+        :loading="loading"
+        :rowSelection="{
+          selectedRowKeys: selectedRowKeys,
+          onChange: onSelectChange,
+        }"
+        class="j-table-force-nowrap"
+        @change="handleTableChange"
+      >
+        <template slot="payFlagslot" slot-scope="text, record, index">
+          {{ record.payFlag == 1 ? "是" : "否" }}
+        </template>
+        <template slot="iconslot" slot-scope="text, record, index">
+          <a-icon :type="record.icon" theme="filled" />
+        </template>
+        <template slot="htmlSlot" slot-scope="text">
+          <div v-html="text"></div>
+        </template>
+        <template slot="inRoomList" slot-scope="text, record">
+          <span v-if="!text || text.length == 0">--</span>
+          <a-tag color="cyan" v-for="(item, index) in text" :key="index">
+            {{ item.roomName }}
+          </a-tag>
+        </template>
+        <template slot="fileSlot" slot-scope="text">
+          <span v-if="!text" style="font-size: 12px; font-style: italic"
+            >无文件</span
+          >
+          <a-button
+            v-else
+            :ghost="true"
+            type="primary"
+            icon="download"
+            size="small"
+            @click="downloadFile(text)"
+          >
+            下载
+          </a-button>
+        </template>
+
+        <span slot="action" slot-scope="text, record">
+          <a @click="handleInRooms(record)">关联房间</a>
+
+          <a-divider type="vertical" />
+          <a @click="handleEdit(record)">配置分成</a>
+
+          <a-divider type="vertical" />
+          <a-popconfirm
+            title="确定删除吗?"
+            @confirm="() => handleDelete(record.id)"
+          >
+            <a>删除</a>
+          </a-popconfirm>
+        </span>
+      </a-table>
+    </div>
+    <sys-user-modal ref="modalForm" @ok="modalFormOk"></sys-user-modal>
+    <bus-yezhu-modal
+      ref="modalBusYezhuForm"
+      @ok="modalFormOk"
+    ></bus-yezhu-modal>
+    <user-room-relation-modal ref="UserRoomRelationModal" @ok="modalFormOk"></user-room-relation-modal>
+  </a-card>
+</template>
+  
+  <script>
+import { JeecgListMixin } from "@/mixins/JeecgListMixin";
+import SysUserModal from "./modules/yezhu/SysUserModal";
+import BusYezhuModal from "./modules/yezhu/BusYezhuModal";
+import UserRoomRelationModal from "./modules/yezhu/UserRoomRelationModal";
+import { filterObj } from "@/utils/util";
+import { getAction } from "@/api/manage";
+export default {
+  name: "memberList",
+  mixins: [JeecgListMixin],
+  components: {
+    SysUserModal,
+    BusYezhuModal,
+    UserRoomRelationModal,
+  },
+  data() {
+    return {
+      queryParam: {},
+      // 分页参数
+      ipagination: {
+        current: 1,
+        pageSize: 10,
+        pageSizeOptions: ["10", "20", "30"],
+        showTotal: (total, range) => {
+          return range[0] + "-" + range[1] + " 共" + total + "条";
+        },
+        showQuickJumper: true,
+        showSizeChanger: true,
+        total: 0,
+      },
+      // 表头
+      columns: [
+        {
+          title: "姓名",
+          align: "center",
+          dataIndex: "userName",
+        },
+        {
+          title: "用户名",
+          align: "center",
+          dataIndex: "name",
+        },
+        {
+          title: "关联房间",
+          align: "center",
+          dataIndex: "inRoomList",
+          scopedSlots: { customRender: "inRoomList" },
+        },
+        {
+          title: "分成",
+          align: "center",
+          dataIndex: "commission",
+          customRender: function (text) {
+            return text > 0 ? "按照百分比：" + text + "%" : "--";
+          },
+        },
+        {
+          title: "操作",
+          dataIndex: "action",
+          align: "center",
+          fixed: "right",
+          width: 147,
+          scopedSlots: { customRender: "action" },
+        },
+      ],
+      url: {
+        list: "/business/busYezhu/list",
+        delete: "/business/busYezhu/delete",
+        deleteBatch: "/business/busYezhu/deleteBatch",
+        exportXlsUrl: "/business/busYezhu/exportXls",
+        importExcelUrl: "business/busYezhu/importExcel",
+      },
+      dictOptions: {},
+      superFieldList: [],
+      selectedRowKeys: [],
+      isorter: {
+        column: "createTime",
+        order: "desc",
+      },
+    };
+  },
+  created() {},
+  methods: {
+    handleEdit(record) {
+      record.type = 1;
+      this.$refs.modalBusYezhuForm.edit(record);
+      this.$refs.modalBusYezhuForm.title = "编辑";
+      this.$refs.modalBusYezhuForm.disableSubmit = false;
+    },
+    handleInRooms(record) {
+      this.$refs.UserRoomRelationModal.show(record);
+      this.$refs.UserRoomRelationModal.title = "选择关联房间号";
+      this.$refs.UserRoomRelationModal.disableSubmit = false;
+    },
+    modalFormOk() {
+      this.loadData();
+    },
+  },
+};
+</script>
+  <style scoped>
+@import "~@assets/less/common.less";
+</style>

src/views/system/YuangongList.vue

@@ -0,0 +1,403 @@
+<template>
+  <a-card :bordered="false">
+
+    <!-- 查询区域 -->
+    <div class="table-page-search-wrapper">
+      <a-form layout="inline" @keyup.enter.native="searchQuery">
+        <a-row :gutter="24">
+
+          <a-col :md="6" :sm="12">
+            <a-form-item label="账号">
+              <!--<a-input placeholder="请输入账号查询" v-model="queryParam.username"></a-input>-->
+              <j-input placeholder="输入账号模糊查询" v-model="queryParam.username"></j-input>
+            </a-form-item>
+          </a-col>
+
+          <a-col :md="6" :sm="8">
+            <a-form-item label="性别">
+              <a-select v-model="queryParam.sex" placeholder="请选择性别">
+                <a-select-option value="">请选择</a-select-option>
+                <a-select-option value="1">男</a-select-option>
+                <a-select-option value="2">女</a-select-option>
+              </a-select>
+            </a-form-item>
+          </a-col>
+
+
+          <template v-if="toggleSearchStatus">
+            <a-col :md="6" :sm="8">
+              <a-form-item label="真实名字">
+                <a-input placeholder="请输入真实名字" v-model="queryParam.realname"></a-input>
+              </a-form-item>
+            </a-col>
+
+            <a-col :md="6" :sm="8">
+              <a-form-item label="手机号码">
+                <a-input placeholder="请输入手机号码查询" v-model="queryParam.phone"></a-input>
+              </a-form-item>
+            </a-col>
+
+            <a-col :md="6" :sm="8">
+              <a-form-item label="用户状态">
+                <a-select v-model="queryParam.status" placeholder="请选择">
+                  <a-select-option value="">请选择</a-select-option>
+                  <a-select-option value="1">正常</a-select-option>
+                  <a-select-option value="2">冻结</a-select-option>
+                </a-select>
+              </a-form-item>
+            </a-col>
+          </template>
+
+          <a-col :md="6" :sm="8">
+            <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
+              <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
+              <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
+              <a @click="handleToggleSearch" style="margin-left: 8px">
+                {{ toggleSearchStatus ? '收起' : '展开' }}
+                <a-icon :type="toggleSearchStatus ? 'up' : 'down'"/>
+              </a>
+            </span>
+          </a-col>
+
+        </a-row>
+      </a-form>
+    </div>
+
+    <!-- 操作按钮区域 -->
+    <div class="table-operator" style="border-top: 5px">
+      <a-button @click="handleAdd" type="primary" icon="plus" >添加用户</a-button>
+      <a-button type="primary" icon="download" @click="handleExportXls('用户信息')">导出</a-button>
+      <a-upload name="file" :showUploadList="false" :multiple="false" :headers="tokenHeader" :action="importExcelUrl" @change="handleImportExcel">
+        <a-button type="primary" icon="import">导入</a-button>
+      </a-upload>
+      <j-third-app-button biz-type="user" :selected-row-keys="selectedRowKeys" syncToApp syncToLocal @sync-finally="onSyncFinally"/>
+      <a-button type="primary" icon="hdd" @click="recycleBinVisible=true">回收站</a-button>
+      <a-dropdown v-if="selectedRowKeys.length > 0">
+        <a-menu slot="overlay" @click="handleMenuClick">
+          <a-menu-item key="1">
+            <a-icon type="delete" @click="batchDel"/>
+            删除
+          </a-menu-item>
+          <a-menu-item key="2">
+            <a-icon type="lock" @click="batchFrozen('2')"/>
+            冻结
+          </a-menu-item>
+          <a-menu-item key="3">
+            <a-icon type="unlock" @click="batchFrozen('1')"/>
+            解冻
+          </a-menu-item>
+        </a-menu>
+        <a-button style="margin-left: 8px">
+          批量操作
+          <a-icon type="down"/>
+        </a-button>
+      </a-dropdown>
+      <j-super-query :fieldList="superQueryFieldList" @handleSuperQuery="handleSuperQuery"/>
+    </div>
+
+    <!-- table区域-begin -->
+    <div>
+      <div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">
+        <i class="anticon anticon-info-circle ant-alert-icon"></i>已选择&nbsp;<a style="font-weight: 600">{{ selectedRowKeys.length }}</a>项&nbsp;&nbsp;
+        <a style="margin-left: 24px" @click="onClearSelected">清空</a>
+      </div>
+
+      <a-table
+        ref="table"
+        bordered
+        size="middle"
+        rowKey="id"
+        :columns="columns"
+        :dataSource="dataSource"
+        :pagination="ipagination"
+        :loading="loading"
+        :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
+        @change="handleTableChange">
+
+        <template slot="avatarslot" slot-scope="text, record, index">
+          <div class="anty-img-wrap">
+            <a-avatar shape="square" :src="getAvatarView(record.avatar)" icon="user"/>
+          </div>
+        </template>
+
+        <span slot="action" slot-scope="text, record">
+          <a @click="handleEdit(record)" >编辑</a>
+
+          <a-divider type="vertical" />
+
+          <a-dropdown>
+            <a class="ant-dropdown-link">
+              更多 <a-icon type="down"/>
+            </a>
+            <a-menu slot="overlay">
+              <a-menu-item>
+                <a href="javascript:;" @click="handleRelation(record.id)">关联房间</a>
+              </a-menu-item>
+
+              <a-menu-item>
+                <a href="javascript:;" @click="handleDetail(record)">详情</a>
+              </a-menu-item>
+
+              <a-menu-item>
+                <a href="javascript:;" @click="handleChangePassword(record.username)">密码</a>
+              </a-menu-item>
+
+              <a-menu-item>
+                <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">
+                  <a>删除</a>
+                </a-popconfirm>
+              </a-menu-item>
+
+              <a-menu-item v-if="record.status==1">
+                <a-popconfirm title="确定冻结吗?" @confirm="() => handleFrozen(record.id,2,record.username)">
+                  <a>冻结</a>
+                </a-popconfirm>
+              </a-menu-item>
+
+              <a-menu-item v-if="record.status==2">
+                <a-popconfirm title="确定解冻吗?" @confirm="() => handleFrozen(record.id,1,record.username)">
+                  <a>解冻</a>
+                </a-popconfirm>
+              </a-menu-item>
+              
+            </a-menu>
+          </a-dropdown>
+        </span>
+
+
+      </a-table>
+    </div>
+    <!-- table区域-end -->
+
+    <user-modal ref="modalForm" @ok="modalFormOk"></user-modal>
+
+    <password-modal ref="passwordmodal" @ok="passwordModalOk"></password-modal>
+    <user-room-relation @ok="saveRelationOk" ref="userroomrelationmodal"></user-room-relation>
+    <sys-user-agent-modal ref="sysUserAgentModal"></sys-user-agent-modal>
+
+    <!-- 用户回收站 -->
+    <user-recycle-bin-modal :visible.sync="recycleBinVisible" @ok="modalFormOk"/>
+  </a-card>
+</template>
+
+<script>
+  import UserModal from './modules/UserModal'
+  import UserRoomRelation from './modules/UserRoomRelationModal.vue'
+  import PasswordModal from './modules/PasswordModal'
+  import {putAction,getFileAccessHttpUrl} from '@/api/manage';
+  import {frozenBatch} from '@/api/api'
+  import {JeecgListMixin} from '@/mixins/JeecgListMixin'
+  import SysUserAgentModal from "./modules/SysUserAgentModal";
+  import JInput from '@/components/jeecg/JInput'
+  import UserRecycleBinModal from './modules/UserRecycleBinModal'
+  import JSuperQuery from '@/components/jeecg/JSuperQuery'
+  import JThirdAppButton from '@/components/jeecgbiz/thirdApp/JThirdAppButton'
+
+  export default {
+    name: "UserList",
+    mixins: [JeecgListMixin],
+    components: {
+      JThirdAppButton,
+      SysUserAgentModal,
+      UserModal,
+      PasswordModal,
+      JInput,
+      UserRecycleBinModal,
+      UserRoomRelation,
+      JSuperQuery
+    },
+    data() {
+      return {
+        description: '这是用户管理页面',
+        queryParam: {},
+        recycleBinVisible: false,
+        columns: [
+          /*{
+            title: '#',
+            dataIndex: '',
+            key:'rowIndex',
+            width:60,
+            align:"center",
+            customRender:function (t,r,index) {
+              return parseInt(index)+1;
+            }
+          },*/
+          {
+            title: '用户账号',
+            align: "center",
+            dataIndex: 'username',
+            width: 120,
+            sorter: true
+          },
+          {
+            title: '用户姓名',
+            align: "center",
+            width: 100,
+            dataIndex: 'realname',
+          },
+          {
+            title: '头像',
+            align: "center",
+            width: 120,
+            dataIndex: 'avatar',
+            scopedSlots: {customRender: "avatarslot"}
+          },
+
+          {
+            title: '性别',
+            align: "center",
+            width: 80,
+            dataIndex: 'sex_dictText',
+            sorter: true
+          },
+          {
+            title: '生日',
+            align: "center",
+            width: 100,
+            dataIndex: 'birthday'
+          },
+          {
+            title: '手机号码',
+            align: "center",
+            width: 100,
+            dataIndex: 'phone'
+          },
+          {
+            title: '部门',
+            align: "center",
+            width: 180,
+            dataIndex: 'orgCodeTxt'
+          },
+          {
+            title: '负责部门',
+            align: "center",
+            width: 180,
+            dataIndex: 'departIds_dictText'
+          },
+          {
+            title: '状态',
+            align: "center",
+            width: 80,
+            dataIndex: 'status_dictText'
+          },
+          {
+            title: '操作',
+            dataIndex: 'action',
+            scopedSlots: {customRender: 'action'},
+            align: "center",
+            width: 170
+          }
+
+        ],
+        superQueryFieldList: [
+          { type: 'input', value: 'username', text: '用户账号', },
+          { type: 'input', value: 'realname', text: '用户姓名', },
+          { type: 'select', value: 'sex', dbType: 'int', text: '性别', dictCode: 'sex' },
+        ],
+        url: {
+          syncUser: "/act/process/extActProcess/doSyncUser",
+          list: "/sys/user/list",
+          delete: "/sys/user/delete",
+          deleteBatch: "/sys/user/deleteBatch",
+          exportXlsUrl: "/sys/user/exportXls",
+          importExcelUrl: "sys/user/importExcel",
+        },
+      }
+    },
+    computed: {
+      importExcelUrl: function(){
+        return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`;
+      }
+    },
+    methods: {
+      saveRelationOk() {
+        
+      },
+      getAvatarView: function (avatar) {
+        return getFileAccessHttpUrl(avatar)
+      },
+
+      batchFrozen: function (status) {
+        if (this.selectedRowKeys.length <= 0) {
+          this.$message.warning('请选择一条记录！');
+          return false;
+        } else {
+          let ids = "";
+          let that = this;
+          let isAdmin = false;
+          that.selectionRows.forEach(function (row) {
+            if (row.username == 'admin') {
+              isAdmin = true;
+            }
+          });
+          if (isAdmin) {
+            that.$message.warning('管理员账号不允许此操作,请重新选择！');
+            return;
+          }
+          that.selectedRowKeys.forEach(function (val) {
+            ids += val + ",";
+          });
+          that.$confirm({
+            title: "确认操作",
+            content: "是否" + (status == 1 ? "解冻" : "冻结") + "选中账号?",
+            onOk: function () {
+              frozenBatch({ids: ids, status: status}).then((res) => {
+                if (res.success) {
+                  that.$message.success(res.message);
+                  that.loadData();
+                  that.onClearSelected();
+                } else {
+                  that.$message.warning(res.message);
+                }
+              });
+            }
+          });
+        }
+      },
+      handleMenuClick(e) {
+        if (e.key == 1) {
+          this.batchDel();
+        } else if (e.key == 2) {
+          this.batchFrozen(2);
+        } else if (e.key == 3) {
+          this.batchFrozen(1);
+        }
+      },
+      handleFrozen: function (id, status, username) {
+        let that = this;
+        //TODO 后台校验管理员角色
+        if ('admin' == username) {
+          that.$message.warning('管理员账号不允许此操作！');
+          return;
+        }
+        frozenBatch({ids: id, status: status}).then((res) => {
+          if (res.success) {
+            that.$message.success(res.message);
+            that.loadData();
+          } else {
+            that.$message.warning(res.message);
+          }
+        });
+      },
+      handleChangePassword(username) {
+        this.$refs.passwordmodal.show(username);
+      },
+      handleRelation(userId) {
+        this.$refs.userroomrelationmodal.show(userId)
+      },
+      passwordModalOk() {
+        //TODO 密码修改完成 不需要刷新页面，可以把datasource中的数据更新一下
+      },
+      onSyncFinally({isToLocal}) {
+        // 同步到本地时刷新下数据
+        if (isToLocal) {
+          this.loadData()
+        }
+      },
+    }
+
+  }
+</script>
+<style scoped>
+  @import '~@assets/less/common.less'
+</style>

src/views/system/modules/yezhu/BusYezhuForm.vue

@@ -0,0 +1,131 @@
+<template>
+  <a-spin :spinning="confirmLoading">
+    <j-form-container :disabled="formDisabled">
+      <a-form-model
+        ref="form"
+        :model="model"
+        :rules="validatorRules"
+        slot="detail"
+      >
+        <a-row>
+          <a-col :span="24">
+            <a-form-model-item
+              label="分成模式"
+              :labelCol="labelCol"
+              :wrapperCol="wrapperCol"
+              prop="type"
+            >
+              <a-select v-model="model.type">
+                <a-select-option :value="1">按百分比 </a-select-option>
+              </a-select>
+            </a-form-model-item>
+          </a-col>
+          <a-col :span="24">
+            <a-form-model-item
+              label="分成比例"
+              :labelCol="labelCol"
+              :wrapperCol="wrapperCol"
+              prop="commission"
+            >
+              <a-input-number
+                v-model="model.commission"
+                placeholder="请输入分成比例"
+                style="width: 20%"
+              />%
+            </a-form-model-item>
+          </a-col>
+        </a-row>
+      </a-form-model>
+    </j-form-container>
+  </a-spin>
+</template>
+
+<script>
+import { httpAction, getAction } from "@/api/manage";
+import { validateDuplicateValue } from "@/utils/util";
+
+export default {
+  name: "BusYezhuForm",
+  components: {},
+  props: {
+    //表单禁用
+    disabled: {
+      type: Boolean,
+      default: false,
+      required: false,
+    },
+  },
+  data() {
+    return {
+      model: { type: 1 },
+      labelCol: {
+        xs: { span: 24 },
+        sm: { span: 5 },
+      },
+      wrapperCol: {
+        xs: { span: 24 },
+        sm: { span: 16 },
+      },
+      confirmLoading: false,
+      validatorRules: {
+        hotelId: [{ required: true, message: "请输入关联酒店!" }],
+        sysUserId: [{ required: true, message: "请输入平台登录账号id!" }],
+        commission: [{ required: true, message: "请输入分成比例!" }],
+      },
+      url: {
+        add: "/business/busYezhu/add",
+        edit: "/business/busYezhu/edit",
+        queryById: "/business/busYezhu/queryById",
+      },
+    };
+  },
+  computed: {
+    formDisabled() {
+      return this.disabled;
+    },
+  },
+  created() {
+    //备份model原始值
+    this.modelDefault = JSON.parse(JSON.stringify(this.model));
+  },
+  methods: {
+    add() {
+      this.edit(this.modelDefault);
+    },
+    edit(record) {
+      this.model = Object.assign({}, record);
+      this.visible = true;
+    },
+    submitForm() {
+      const that = this;
+      // 触发表单验证
+      this.$refs.form.validate((valid) => {
+        if (valid) {
+          that.confirmLoading = true;
+          let httpurl = "";
+          let method = "";
+          if (!this.model.id) {
+            httpurl += this.url.add;
+            method = "post";
+          } else {
+            httpurl += this.url.edit;
+            method = "put";
+          }
+          httpAction(httpurl, this.model, method)
+            .then((res) => {
+              if (res.success) {
+                that.$message.success(res.message);
+                that.$emit("ok");
+              } else {
+                that.$message.warning(res.message);
+              }
+            })
+            .finally(() => {
+              that.confirmLoading = false;
+            });
+        }
+      });
+    },
+  },
+};
+</script>

src/views/system/modules/yezhu/BusYezhuModal.vue

@@ -0,0 +1,60 @@
+<template>
+  <j-modal
+    :title="title"
+    :width="width"
+    :visible="visible"
+    switchFullscreen
+    @ok="handleOk"
+    :okButtonProps="{ class:{'jee-hidden': disableSubmit} }"
+    @cancel="handleCancel"
+    cancelText="关闭">
+    <bus-yezhu-form ref="realForm" @ok="submitCallback" :disabled="disableSubmit"></bus-yezhu-form>
+  </j-modal>
+</template>
+
+<script>
+
+  import BusYezhuForm from './BusYezhuForm'
+  export default {
+    name: 'BusYezhuModal',
+    components: {
+      BusYezhuForm
+    },
+    data () {
+      return {
+        title:'',
+        width:800,
+        visible: false,
+        disableSubmit: false
+      }
+    },
+    methods: {
+      add () {
+        this.visible=true
+        this.$nextTick(()=>{
+          this.$refs.realForm.add();
+        })
+      },
+      edit (record) {
+        this.visible=true
+        this.$nextTick(()=>{
+          this.$refs.realForm.edit(record);
+        })
+      },
+      close () {
+        this.$emit('close');
+        this.visible = false;
+      },
+      handleOk () {
+        this.$refs.realForm.submitForm();
+      },
+      submitCallback(){
+        this.$emit('ok');
+        this.visible = false;
+      },
+      handleCancel () {
+        this.close()
+      }
+    }
+  }
+</script>

src/views/system/modules/yezhu/SysUserList.vue

@@ -0,0 +1,190 @@
+<template>
+  <a-card :bordered="false">
+    <!-- 查询区域 -->
+    <div class="table-page-search-wrapper">
+      <a-form layout="inline" @keyup.enter.native="searchQuery">
+        <a-row :gutter="24">
+          <a-col :span="6">
+            <a-form-item label="">
+              <j-input
+                placeholder="用户账号"
+                v-model="queryParam.username"
+              ></j-input>
+            </a-form-item>
+          </a-col>
+          <a-col :span="6">
+            <a-form-item label="">
+              <j-input
+                placeholder="姓名"
+                v-model="queryParam.realname"
+              ></j-input>
+            </a-form-item>
+          </a-col>
+          <a-col :span="6">
+            <a-form-item label="">
+              <j-input
+                placeholder="手机号"
+                v-model="queryParam.phone"
+              ></j-input>
+            </a-form-item>
+          </a-col>
+          <a-col :md="6" :sm="8">
+            <span
+              style="float: left; overflow: hidden"
+              class="table-page-search-submitButtons"
+            >
+              <a-button type="primary" @click="searchQuery" icon="search"
+                >查询</a-button
+              >
+            </span>
+          </a-col>
+        </a-row>
+      </a-form>
+    </div>
+    <!-- 查询区域-END -->
+
+    <!-- table区域-begin -->
+    <div>
+      <a-table
+        ref="table"
+        size="middle"
+        :scroll="{ x: true }"
+        bordered
+        rowKey="id"
+        :columns="columns"
+        :dataSource="dataSource"
+        :pagination="ipagination"
+        :loading="loading"
+        :rowSelection="{
+          selectedRowKeys: selectedRowKeys,
+          onChange: onSelectChange,
+        }"
+        class="j-table-force-nowrap"
+        @change="handleTableChange"
+      >
+        <template slot="htmlSlot" slot-scope="text">
+          <div v-html="text"></div>
+        </template>
+        <template slot="imgSlot" slot-scope="text, record">
+          <span v-if="!text" style="font-size: 12px; font-style: italic"
+            >无图片</span
+          >
+          <img
+            v-else
+            :src="getImgView(text)"
+            :preview="record.id"
+            height="25px"
+            alt=""
+            style="max-width: 80px; font-size: 12px; font-style: italic"
+          />
+        </template>
+        <template slot="fileSlot" slot-scope="text">
+          <span v-if="!text" style="font-size: 12px; font-style: italic"
+            >无文件</span
+          >
+          <a-button
+            v-else
+            :ghost="true"
+            type="primary"
+            icon="download"
+            size="small"
+            @click="downloadFile(text)"
+          >
+            下载
+          </a-button>
+        </template>
+
+        <span slot="action" slot-scope="text, record">
+          <a @click="handleEdit(record)">选择</a>
+        </span>
+      </a-table>
+    </div>
+  </a-card>
+</template>
+
+<script>
+import "@/assets/less/TableExpand.less";
+import { mixinDevice } from "@/utils/mixin";
+import { JeecgListMixin } from "@/mixins/JeecgListMixin";
+import { httpAction, getAction, postAction } from "@/api/manage";
+
+export default {
+  name: "BusMarketCouponsUsedList",
+  mixins: [JeecgListMixin, mixinDevice],
+  components: {},
+  props: {
+    couponsId: {
+      type: String,
+      default: "",
+    },
+  },
+  data() {
+    return {
+      description: "sysUserList",
+      // 表头
+      columns: [
+        {
+          title: "姓名",
+          align: "center",
+          dataIndex: "realname",
+        },
+
+        {
+          title: "用户名",
+          align: "center",
+          dataIndex: "username",
+        },
+        {
+          title: "手机号",
+          align: "center",
+          dataIndex: "phone",
+        },
+        {
+          title: "操作",
+          dataIndex: "action",
+          align: "center",
+          fixed: "right",
+          width: 80,
+          scopedSlots: { customRender: "action" },
+        },
+      ],
+      url: {
+        list: "/sys/user/list",
+        delete: "/sys/user/delete",
+        deleteBatch: "/sys/user/deleteBatch",
+        exportXlsUrl: "/sys/user/exportXls",
+        importExcelUrl: "sys/user/importExcel",
+      },
+      dictOptions: {},
+      superFieldList: [],
+    };
+  },
+  created() {
+  },
+  computed: {
+    importExcelUrl: function () {
+      return `${window._CONFIG["domianURL"]}/${this.url.importExcelUrl}`;
+    },
+  },
+  methods: {
+    handleEdit(item) {
+      var model = { sysUserId: item.id, commission: 0 };
+      var _info = JSON.parse(localStorage.getItem("storeInfo"));
+      if (_info) {
+        model.hotelId = _info.id;
+      }
+      postAction("/business/busYezhu/add", model).then((res) => {
+        if (res.success) {
+          this.$message.success(res.message);
+          this.$emit("ok");
+        } else {
+          this.$message.warning(res.message);
+        }
+      });
+    },
+  },
+};
+</script>
+<style scoped>
+@import "~@assets/less/common.less";
+</style>

src/views/system/modules/yezhu/SysUserModal.vue

@@ -0,0 +1,58 @@
+<template>
+  <j-modal
+    :title="title"
+    :width="width"
+    :visible="visible"
+    switchFullscreen
+    @ok="handleOk"
+    :okButtonProps="{ class:{'jee-hidden': disableSubmit} }"
+    @cancel="handleCancel"
+    cancelText="关闭">
+    <sys-user-list ref="modalSysUserModal" @ok="submitCallback"></sys-user-list>
+  </j-modal>
+</template>
+
+<script>
+  import SysUserList from "./SysUserList";
+  export default {
+    name: 'SysUserModal',
+    components: {
+      SysUserList
+    },
+    data () {
+      return {
+        title:'',
+        width:1200,
+        visible: false,
+        disableSubmit: false,
+        // eventId:'',
+      }
+    },
+    methods: {
+      add () {
+        this.visible=true
+
+      },
+      edit (record) {
+        this.visible=true
+        this.$nextTick(()=>{
+          this.$refs.modalSysUserModal.edit(record);
+        })
+      },
+      close () {
+        this.$emit('close');
+        this.visible = false;
+      },
+      handleOk () {
+        this.$refs.modalSysUserModal.submitForm();
+      },
+      submitCallback(){
+        this.$emit('ok');
+        this.visible = false;
+      },
+      handleCancel () {
+        this.close()
+      }
+    }
+  }
+</script>

src/views/system/modules/yezhu/UserRoomRelationModal.vue

@@ -0,0 +1,166 @@
+<template>
+  <a-modal
+    title="关联房间"
+    :width="800"
+    :visible="visible"
+    :confirmLoading="confirmLoading"
+    @ok="handleSubmit"
+    @cancel="handleCancel"
+    cancelText="关闭"
+    style="top: 20px"
+  >
+    <a-spin :spinning="confirmLoading">
+      <div class="relation-wrapper">
+        <a-row>
+          <a-col :span="12" style="height: 500px; overflow-y: auto">
+            <div class="wrapper-floor" v-for="item in roomTree" :key="item.id">
+              <div>{{ item.name }}</div>
+              <div class="wrapper-room">
+                <div
+                  @click="onRoomClick(room)"
+                  class="wrapper-room-item"
+                  :class="[
+                    selectedRooms.findIndex((s) => s.id == room.id) > -1
+                      ? 'selected-class'
+                      : '',
+                  ]"
+                  v-for="room in item.rooms"
+                  :key="room.id"
+                >
+                  {{ room.name }}
+                </div>
+              </div>
+            </div>
+          </a-col>
+
+          <a-col :span="12" style="height: 500px; overflow-y: auto">
+            <div style="margin: 10px">已关联房间</div>
+            <div style="display: flex; flex-wrap: wrap; height: max-content">
+              <div
+                @click="delSelectedRoom(room)"
+                class="wrapper-room-item-1"
+                v-for="room in selectedRooms"
+                :key="room.id"
+              >
+                {{ room.name }}
+              </div>
+            </div>
+          </a-col>
+        </a-row>
+      </div>
+    </a-spin>
+  </a-modal>
+</template>
+  
+<script>
+import { putAction, getAction, postAction } from "@/api/manage";
+import { min } from "lodash";
+export default {
+  name: "UserRoomRelation",
+  data() {
+    return {
+      confirmLoading: false,
+      visible: false,
+      roomTree: [],
+      selectedRooms: [],
+      userId: null,
+      yezhuId: "",
+    };
+  },
+  created() {},
+
+  methods: {
+    delSelectedRoom(r) {
+      let findIndex = this.selectedRooms.findIndex((s) => s.id == r.id);
+      if (findIndex > -1) {
+        this.selectedRooms.splice(findIndex, 1);
+      }
+    },
+    onRoomClick(r) {
+      let findIndex = this.selectedRooms.findIndex((s) => s.id == r.id);
+      if (findIndex > -1) {
+        this.selectedRooms.splice(findIndex, 1);
+      } else {
+        this.selectedRooms.push(r);
+      }
+    },
+    show(record) {
+      this.selectedRooms = JSON.parse(JSON.stringify(record.inRoomList));
+      this.selectedRooms = this.selectedRooms.map((t) => {
+        return {
+          id: t.roomId,
+          name: t.roomName,
+        };
+      });
+      this.yezhuId = record.id;
+      getAction("/business/busRoomBookingOrders/rili-fangtai", {
+        start: "2023-05-19",
+        end: "2023-06-18",
+      }).then((res) => {
+        if (res.success) {
+          this.roomTree = res.result.floorRoomVos;
+        }
+      });
+      this.visible = true;
+    },
+    close() {
+      this.$emit("close");
+      this.visible = false;
+    },
+    handleSubmit() {
+      // 触发表单验证
+      let bodyData = this.selectedRooms.map((s) => {
+        return {
+          roomId: s.id,
+          busYezhuId: this.yezhuId,
+        };
+      });
+      postAction(
+        "/business/busYezhuInRoom/add?userId=" + this.userId,
+        bodyData
+      ).then((res) => {
+        if (res.success) {
+          this.$message.success("保存成功！");
+          this.$emit("ok");
+          this.visible = false;
+        }
+      });
+    },
+    handleCancel() {
+      this.close();
+    },
+  },
+};
+</script>
+<style>
+.wrapper-room {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.wrapper-room-item:hover {
+  border: 1px solid #f00;
+  color: #fff;
+  background-color: #ff000088;
+}
+
+.selected-class,
+.wrapper-room-item-1 {
+  border: 1px solid #f00 !important;
+  color: #fff !important;
+  background-color: #ff000088 !important;
+}
+
+.wrapper-room-item,
+.wrapper-room-item-1 {
+  width: fit-content;
+  padding: 5px 8px;
+  border: 1px solid #1890ff;
+  background-color: #1890ff88;
+  margin-left: 10px;
+  margin-top: 5px;
+  color: white;
+  border-radius: 6px;
+  cursor: pointer;
+}
+</style>