From 7c124560b27add087b4aa8fc457de1e84f950d9c Mon Sep 17 00:00:00 2001
From: liuyg <376836862@qq.com>
Date: Tue, 23 Nov 2021 15:19:33 +0800
Subject: [PATCH] 样式  (1:搜索按钮放入右侧,2:隐藏表格显影按钮,3:页码改为(15,30,50,100))

---
 src/views/system/tenant.vue |  360 ++++++++++++++++++++++++++++++++++-------------------------
 1 files changed, 208 insertions(+), 152 deletions(-)

diff --git a/src/views/system/tenant.vue b/src/views/system/tenant.vue
index a52356b..95bd359 100644
--- a/src/views/system/tenant.vue
+++ b/src/views/system/tenant.vue
@@ -1,71 +1,101 @@
 <template>
-  <basic-container>
-    <avue-crud :option="option"
-               :table-loading="loading"
-               :data="data"
-               ref="crud"
-               v-model="form"
-               :page.sync="page"
-               :permission="permissionList"
-               :before-open="beforeOpen"
-               @row-del="rowDel"
-               @row-update="rowUpdate"
-               @row-save="rowSave"
-               @search-change="searchChange"
-               @search-reset="searchReset"
-               @selection-change="selectionChange"
-               @current-change="currentChange"
-               @size-change="sizeChange"
-               @refresh-change="refreshChange"
-               @on-load="onLoad">
+  <basic-container
+    :class="[$store.state.control.windowWidth >= 1024 ? 'oneRowSearch' : '']"
+  >
+    <avue-crud
+      :option="option"
+      :table-loading="loading"
+      :data="data"
+      ref="crud"
+      v-model="form"
+      :page.sync="page"
+      :permission="permissionList"
+      :before-open="beforeOpen"
+      @row-del="rowDel"
+      @row-update="rowUpdate"
+      @row-save="rowSave"
+      @search-change="searchChange"
+      @search-reset="searchReset"
+      @selection-change="selectionChange"
+      @current-change="currentChange"
+      @size-change="sizeChange"
+      @refresh-change="refreshChange"
+      @on-load="onLoad"
+    >
       <template slot="menuLeft">
-        <el-button type="danger"
-                   size="small"
-                   icon="el-icon-delete"
-                   v-if="permission.tenant_delete"
-                   plain
-                   @click="handleDelete">删 除
+        <el-button
+          type="danger"
+          size="small"
+          icon="el-icon-delete"
+          v-if="permission.tenant_delete"
+          plain
+          @click="handleDelete"
+          >删 除
         </el-button>
-        <el-button size="small"
-                   plain
-                   v-if="userInfo.role_name.includes('administrator')"
-                   icon="el-icon-setting"
-                   @click="handleSetting">授权配置
+        <el-button
+          size="small"
+          plain
+          v-if="userInfo.role_name.includes('administrator')"
+          icon="el-icon-setting"
+          @click="handleSetting"
+          >授权配置
         </el-button>
-        <el-button size="small"
-                   plain
-                   v-if="userInfo.role_name.includes('administrator')"
-                   icon="el-icon-coin"
-                   @click="handleDatasource">数据源配置
+        <el-button
+          size="small"
+          plain
+          v-if="userInfo.role_name.includes('administrator')"
+          icon="el-icon-coin"
+          @click="handleDatasource"
+          >数据源配置
         </el-button>
       </template>
-      <template slot-scope="{row}"
-                slot="accountNumber">
-        <el-tag>{{ row.accountNumber > 0 ? row.accountNumber : '不限制' }}</el-tag>
+      <template slot-scope="{ row }" slot="accountNumber">
+        <el-tag>{{
+          row.accountNumber > 0 ? row.accountNumber : "不限制"
+        }}</el-tag>
       </template>
-      <template slot-scope="{row}"
-                slot="expireTime">
-        <el-tag>{{ row.expireTime ? row.expireTime : '不限制' }}</el-tag>
+      <template slot-scope="{ row }" slot="expireTime">
+        <el-tag>{{ row.expireTime ? row.expireTime : "不限制" }}</el-tag>
       </template>
     </avue-crud>
-    <el-dialog title="保安单位授权配置"
-               append-to-body
-               :visible.sync="box"
-               width="450px">
-      <avue-form :option="settingOption" v-model="settingForm" @submit="handleSubmit"/>
+    <el-dialog
+      title="保安单位授权配置"
+      append-to-body
+      :visible.sync="box"
+      width="450px"
+    >
+      <avue-form
+        :option="settingOption"
+        v-model="settingForm"
+        @submit="handleSubmit"
+      />
     </el-dialog>
-    <el-dialog title="保安单位数据源配置"
-               append-to-body
-               :visible.sync="datasourceBox"
-               width="450px">
-      <avue-form :option="datasourceOption" v-model="datasourceForm" @submit="handleDatasourceSubmit"/>
+    <el-dialog
+      title="保安单位数据源配置"
+      append-to-body
+      :visible.sync="datasourceBox"
+      width="450px"
+    >
+      <avue-form
+        :option="datasourceOption"
+        v-model="datasourceForm"
+        @submit="handleDatasourceSubmit"
+      />
     </el-dialog>
   </basic-container>
 </template>
 
 <script>
-import {getList, getDetail, remove, update, add, setting, datasource} from "@/api/system/tenant";
-import {mapGetters} from "vuex";
+import {
+  getList,
+  getDetail,
+  remove,
+  update,
+  add,
+  setting,
+  datasource,
+} from "@/api/system/tenant";
+import { mapGetters } from "vuex";
 
 export default {
   data() {
@@ -79,12 +109,13 @@
       page: {
         pageSize: 10,
         currentPage: 1,
-        total: 0
+        total: 0,
+        ...this.$store.state.control.changePageSize,
       },
       option: {
-        height: 'auto',
+        height: "auto",
         calcHeight: 30,
-        labelWidth: '125',
+        labelWidth: "125",
         tip: false,
         searchShow: true,
         searchMenuSpan: 6,
@@ -94,49 +125,56 @@
         viewBtn: true,
         dialogWidth: 900,
         dialogClickModal: false,
+        ...this.$store.state.control.clearOtherBut,
         column: [
           {
             label: "保安单位ID",
             prop: "tenantId",
             width: 130,
-            searchLabelWidth:"150",
-            searchSpan:5,
+            searchLabelWidth: "150",
+            searchSpan: 5,
             search: true,
             addDisplay: false,
             editDisplay: false,
             span: 24,
-            rules: [{
-              required: true,
-              message: "请输入保安单位ID",
-              trigger: "blur"
-            }]
+            rules: [
+              {
+                required: true,
+                message: "请输入保安单位ID",
+                trigger: "blur",
+              },
+            ],
           },
           {
-            label: "保安单位名称",
-            searchLabelWidth:"150",
+            label: "保安企业名称",
+            searchLabelWidth: "150",
             prop: "tenantName",
-            searchSpan:5,
+            searchSpan: 5,
             search: true,
             width: 280,
             span: 24,
-            rules: [{
-              required: true,
-              message: "请输入参数名称",
-              trigger: "blur"
-            }]
+            rules: [
+              {
+                required: true,
+                message: "请输入参数名称",
+                trigger: "blur",
+              },
+            ],
           },
           {
             label: "联系人",
-            searchLabelWidth:"100",
+            searchLabelWidth: "100",
             prop: "linkman",
             width: 200,
             search: true,
-            searchSpan:5,
-            rules: [{
-              required: true,
-              message: "请输入联系人",
-              trigger: "blur"
-            }]
+            searchSpan: 5,
+            rules: [
+              {
+                required: true,
+                message: "请输入联系人",
+                trigger: "blur",
+              },
+            ],
           },
           {
             label: "联系电话",
@@ -175,17 +213,17 @@
           {
             label: "系统背景",
             prop: "backgroundUrl",
-            type: 'upload',
-            listType: 'picture-img',
-            action: '/api/blade-resource/oss/endpoint/put-file',
+            type: "upload",
+            listType: "picture-img",
+            action: "/api/blade-resource/oss/endpoint/put-file",
             propsHttp: {
-              res: 'data',
-              url: 'link',
+              res: "data",
+              url: "link",
             },
             hide: true,
             span: 24,
           },
-        ]
+        ],
       },
       data: [],
       settingForm: {},
@@ -205,7 +243,7 @@
             valueFormat: "yyyy-MM-dd hh:mm:ss",
             span: 24,
           },
-        ]
+        ],
       },
       datasourceForm: {},
       datasourceOption: {
@@ -219,16 +257,18 @@
             dicUrl: "/api/blade-develop/datasource/select",
             props: {
               label: "name",
-              value: "id"
+              value: "id",
             },
-            rules: [{
-              required: true,
-              message: "请选择数据源",
-              trigger: "blur"
-            }]
+            rules: [
+              {
+                required: true,
+                message: "请选择数据源",
+                trigger: "blur",
+              },
+            ],
           },
-        ]
-      }
+        ],
+      },
     };
   },
   computed: {
@@ -238,52 +278,58 @@
         addBtn: this.vaildData(this.permission.tenant_add, false),
         viewBtn: this.vaildData(this.permission.tenant_view, false),
         delBtn: this.vaildData(this.permission.tenant_delete, false),
-        editBtn: this.vaildData(this.permission.tenant_edit, false)
+        editBtn: this.vaildData(this.permission.tenant_edit, false),
       };
     },
     ids() {
       let ids = [];
-      this.selectionList.forEach(ele => {
+      this.selectionList.forEach((ele) => {
         ids.push(ele.id);
       });
       return ids.join(",");
     },
     tenantId() {
       return this.selectionList[0].tenantId;
-    }
+    },
   },
   methods: {
     rowSave(row, done, loading) {
-      add(row).then(() => {
-        this.onLoad(this.page);
-        this.$message({
-          type: "success",
-          message: "操作成功!"
-        });
-        done();
-      }, error => {
-        window.console.log(error);
-        loading();
-      });
+      add(row).then(
+        () => {
+          this.onLoad(this.page);
+          this.$message({
+            type: "success",
+            message: "操作成功!",
+          });
+          done();
+        },
+        (error) => {
+          window.console.log(error);
+          loading();
+        }
+      );
     },
     rowUpdate(row, index, done, loading) {
-      update(row).then(() => {
-        this.onLoad(this.page);
-        this.$message({
-          type: "success",
-          message: "操作成功!"
-        });
-        done();
-      }, error => {
-        window.console.log(error);
-        loading();
-      });
+      update(row).then(
+        () => {
+          this.onLoad(this.page);
+          this.$message({
+            type: "success",
+            message: "操作成功!",
+          });
+          done();
+        },
+        (error) => {
+          window.console.log(error);
+          loading();
+        }
+      );
     },
     rowDel(row) {
       this.$confirm("确定将选择数据删除?", {
         confirmButtonText: "确定",
         cancelButtonText: "取消",
-        type: "warning"
+        type: "warning",
       })
         .then(() => {
           return remove(row.id);
@@ -292,13 +338,13 @@
           this.onLoad(this.page);
           this.$message({
             type: "success",
-            message: "操作成功!"
+            message: "操作成功!",
           });
         });
     },
     beforeOpen(done, type) {
       if (["view"].includes(type)) {
-        getDetail(this.form.id).then(res => {
+        getDetail(this.form.id).then((res) => {
           const data = res.data.data;
           if (!(data.accountNumber > 0)) {
             data.accountNumber = "不限制";
@@ -336,7 +382,7 @@
       this.$confirm("确定将选择数据删除?", {
         confirmButtonText: "确定",
         cancelButtonText: "取消",
-        type: "warning"
+        type: "warning",
       })
         .then(() => {
           return remove(this.ids);
@@ -345,7 +391,7 @@
           this.onLoad(this.page);
           this.$message({
             type: "success",
-            message: "操作成功!"
+            message: "操作成功!",
           });
           this.$refs.crud.toggleSelection();
         });
@@ -356,14 +402,14 @@
         return;
       }
       if (this.selectionList.length === 1) {
-        getDetail(this.selectionList[0].id).then(res => {
+        getDetail(this.selectionList[0].id).then((res) => {
           const data = res.data.data;
           this.settingForm.accountNumber = data.accountNumber;
           this.settingForm.expireTime = data.expireTime;
         });
       } else {
         this.settingForm.accountNumber = -1;
-        this.settingForm.expireTime = '';
+        this.settingForm.expireTime = "";
       }
       this.box = true;
     },
@@ -376,38 +422,44 @@
         this.$message.warning("只能选择一条数据");
         return;
       }
-      getDetail(this.selectionList[0].id).then(res => {
+      getDetail(this.selectionList[0].id).then((res) => {
         const data = res.data.data;
         this.datasourceForm.datasourceId = data.datasourceId;
       });
       this.datasourceBox = true;
     },
     handleSubmit(form, done, loading) {
-      setting(this.ids, form).then(() => {
-        this.onLoad(this.page);
-        this.$message({
-          type: "success",
-          message: "配置成功!"
-        });
-        done();
-        this.box = false;
-      }, error => {
-        window.console.log(error);
-        loading();
-      });
+      setting(this.ids, form).then(
+        () => {
+          this.onLoad(this.page);
+          this.$message({
+            type: "success",
+            message: "配置成功!",
+          });
+          done();
+          this.box = false;
+        },
+        (error) => {
+          window.console.log(error);
+          loading();
+        }
+      );
     },
     handleDatasourceSubmit(form, done, loading) {
-      datasource(this.tenantId, form.datasourceId).then(() => {
-        this.$message({
-          type: "success",
-          message: "配置成功!"
-        });
-        done();
-        this.datasourceBox = false;
-      }, error => {
-        window.console.log(error);
-        loading();
-      });
+      datasource(this.tenantId, form.datasourceId).then(
+        () => {
+          this.$message({
+            type: "success",
+            message: "配置成功!",
+          });
+          done();
+          this.datasourceBox = false;
+        },
+        (error) => {
+          window.console.log(error);
+          loading();
+        }
+      );
     },
     currentChange(currentPage) {
       this.page.currentPage = currentPage;
@@ -420,15 +472,19 @@
     },
     onLoad(page, params = {}) {
       this.loading = true;
-      getList(page.currentPage, page.pageSize, Object.assign(params, this.query)).then(res => {
+      getList(
+        page.currentPage,
+        page.pageSize,
+        Object.assign(params, this.query)
+      ).then((res) => {
         const data = res.data.data;
         this.page.total = data.total;
         this.data = data.records;
         this.loading = false;
         this.selectionClear();
       });
-    }
-  }
+    },
+  },
 };
 </script>
 

--
Gitblit v1.9.3