From 0bed825f7075cd2e8e3e2dbae19e441f0e9c9bd3 Mon Sep 17 00:00:00 2001
From: aixianling <aixianling@sinoecare.com>
Date: Fri, 3 Feb 2023 15:19:34 +0800
Subject: [PATCH] =?UTF-8?q?=E7=AD=BE=E5=88=B0=E5=AE=8C=E6=88=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 project/qianxinan/AppSignInfo/list.vue | 109 +++++++---
 ui/lib/styles/common.scss              |  18 +-
 ui/packages/basic/AiBar.vue            | 160 +++++++--------
 ui/packages/basic/AiDialog.vue         | 274 +++++++++++++------------
 ui/packages/layout/AiCard.vue          |  23 ++-
 ui/packages/layout/AiDialogBtn.vue     |  20 +-
 ui/packages/layout/AiList.vue          |  33 ++-
 7 files changed, 370 insertions(+), 267 deletions(-)

diff --git a/project/qianxinan/AppSignInfo/list.vue b/project/qianxinan/AppSignInfo/list.vue
index fc319855..62df59b8 100644
--- a/project/qianxinan/AppSignInfo/list.vue
+++ b/project/qianxinan/AppSignInfo/list.vue
@@ -3,31 +3,48 @@
     <ai-list>
       <ai-title slot="title" title="签到管理" isShowBottomBorder>
         <template #rightBtn>
-          <el-button type="primary">设置</el-button>
+          <div flex>
+            <ai-download url="/app/appwechatsigninfo/export" :params="{...search}" :instance="instance" fileName="签到管理导出文件"/>
+            <ai-dialog-btn dialogTitle="签到提醒设置" width="500px" :submit="submit" @close="form={}" @open="getSetting">
+              <el-button slot="btn" type="primary">设置</el-button>
+              <el-form size="small" label-width="120px" ref="SettingForm" :model="form">
+                <el-form-item label="早提醒时间">
+                  <el-time-picker v-model="form.morningTime" placeholder="请选择" value-format="hh:mm:ss"/>
+                </el-form-item>
+                <el-form-item label="晚提醒时间">
+                  <el-time-picker v-model="form.nightTime" placeholder="请选择" value-format="hh:mm:ss"/>
+                </el-form-item>
+              </el-form>
+            </ai-dialog-btn>
+          </div>
         </template>
       </ai-title>
       <template #left>
         <ai-tree-menu title="组织部门" @search="handleSearchTree">
-          <el-tree ref="DeptTree" :data="treeData" :props="{label:'name'}" :filter-node-method="(v,data)=>data.label.indexOf(v)>-1"/>
+          <el-tree ref="DeptTree" :data="treeData" :props="{label:'name'}" :filter-node-method="(v,data)=>data.name.indexOf(v)>-1"
+                   @node-click="handleSelectDept"/>
         </ai-tree-menu>
       </template>
-      <template #content>
-        <ai-search-bar>
-          <template #left>
-            <ai-download url="/app/appwechatsigninfo/export" :params="{...search,ids}" :instance="instance" fileName="签到管理导出文件"/>
-          </template>
-          <template #right>
-            <el-input size="small" placeholder="搜索" v-model="search.name" clearable @change="page.current=1,getTableData()"/>
-          </template>
-        </ai-search-bar>
-        <ai-table :tableData="tableData" :total="page.total" :current.sync="page.current" :size.sync="page.size"
-                  @getList="getTableData" :col-configs="colConfigs" :dict="dict">
-          <el-table-column slot="options" label="操作" fixed="right" align="center" width="300">
-            <template slot-scope="{row}">
-
+      <template #blank>
+        <div flex class="gap-16">
+          <ai-bar v-for="(v,key) in sta" card class="fill" :title="key"><b class="staNum" v-text="v"/></ai-bar>
+        </div>
+        <ai-card panel>
+          <ai-search-bar>
+            <template #left>
+              <ai-search label="签到时间">
+                <el-date-picker v-model="search.createDateStart" size="small" placeholder="开始时间" value-format="yyyy-MM-dd" @change="reloadTable"/>
+                <el-date-picker v-model="search.createDateEnd" size="small" placeholder="结束时间" value-format="yyyy-MM-dd" @change="reloadTable"/>
+              </ai-search>
+              <ai-select placeholder="签到状态" v-model="search.status" :selectList="dict.getDict('wxSignStatus')" @change="reloadTable"/>
             </template>
-          </el-table-column>
-        </ai-table>
+            <template #right>
+              <el-input size="small" placeholder="搜索用户" v-model="search.wxUserName" clearable @change="page.current=1,getTableData()"/>
+            </template>
+          </ai-search-bar>
+          <ai-table :tableData="tableData" :total="page.total" :current.sync="page.current" :size.sync="page.size"
+                    @getList="getTableData" :col-configs="colConfigs" :dict="dict"/>
+        </ai-card>
       </template>
     </ai-list>
   </section>
@@ -46,16 +63,19 @@ export default {
   },
   data() {
     return {
-      search: {name: ""},
+      search: {name: "", createDateStart: "", createDateEnd: ""},
       page: {current: 1, size: 10, total: 0},
       tableData: [],
       colConfigs: [
-        {prop: "createDate", label: "签到时间"},
+        {prop: "wxUserName", label: "用户"},
         {prop: "departmentName", label: "部门"},
-        {prop: "status", label: "状态", dict: "wxSignStatus"},
-        {prop: "wxUserName", label: "用户"}
+        {prop: "createDate", label: "签到日期"},
+        {prop: "createTime", label: "签到时间"},
+        {prop: "status", label: "状态", dict: "wxSignStatus"}
       ],
-      treeData: []
+      treeData: [],
+      form: {},
+      sta: {}
     }
   },
   methods: {
@@ -69,9 +89,6 @@ export default {
         }
       })
     },
-    handleAdd(id) {
-      this.$router.push({hash: "#add", query: {id}})
-    },
     getDepartments() {
       this.instance.post("/app/wxcp/wxdepartment/listAll").then(res => {
         if (res?.data) {
@@ -79,13 +96,49 @@ export default {
         }
       })
     },
+    getSetting() {
+      this.instance.post("/app/appwechatsignconfig/queryDetailById").then(res => {
+        if (res?.data) {
+          this.form = res.data
+        }
+      })
+    },
+    getStaData() {
+      const {departmentId} = this.search
+      this.instance.post("/app/appwechatsigninfo/querySignStatistic", null, {
+        params: {departmentId}
+      }).then(res => {
+        if (res?.data) {
+          this.sta = res.data
+        }
+      })
+    },
     handleSearchTree(name) {
       this.$refs.DeptTree.filter(name)
+    },
+    reloadTable() {
+      this.page.current = 1
+      this.getTableData()
+    },
+    handleSelectDept(data) {
+      this.search.departmentId = data.id
+      this.reloadTable()
+      this.getStaData()
+    },
+    submit() {
+      return this.$refs.SettingForm.validate()
+      .then(() => this.instance.post("/app/appwechatsignconfig/addOrUpdate", this.form))
+      .then(res => {
+        if (res?.code == 0) {
+          return this.$message.success("提交成功")
+        }
+      })
     }
   },
   created() {
     this.getTableData()
     this.getDepartments()
+    this.getStaData()
   }
 }
 </script>
@@ -93,5 +146,9 @@ export default {
 <style lang="scss" scoped>
 .list {
   height: 100%;
+
+  .staNum {
+    font-size: 20px;
+  }
 }
 </style>
diff --git a/ui/lib/styles/common.scss b/ui/lib/styles/common.scss
index 358a26bf..7413a2e9 100644
--- a/ui/lib/styles/common.scss
+++ b/ui/lib/styles/common.scss
@@ -17,13 +17,12 @@ $--font-path: '~element-ui/lib/theme-chalk/fonts';
 /**
 常用内外边距样式
  */
-@each $padMar, $pm in (mar:margin, pad:padding) {
-  @each $v in (8, 10, 16, 20, 32, 48, 56, 64, 80) {
-    @each $pos, $p in (l:left, r:right, t:top, b:bottom) {
-      .#{$padMar}-#{$pos+$v} {
-        #{$pm}-#{$p}: #{$v}px
-      }
-    }
+@each $v in (8, 10, 16, 20, 32, 48, 56, 64, 80) {
+  //gap
+  .gap-#{$v} {
+    gap: #{$v}px
+  }
+  @each $padMar, $pm in (mar:margin, pad:padding) {
     .#{$padMar}-#{$v} {
       #{$pm}: #{$v}px
     }
@@ -37,6 +36,11 @@ $--font-path: '~element-ui/lib/theme-chalk/fonts';
       #{$pm}-left: #{$v}px;
       #{$pm}-right: #{$v}px;
     }
+    @each $pos, $p in (l:left, r:right, t:top, b:bottom) {
+      .#{$padMar}-#{$pos+$v} {
+        #{$pm}-#{$p}: #{$v}px
+      }
+    }
   }
 }
 
diff --git a/ui/packages/basic/AiBar.vue b/ui/packages/basic/AiBar.vue
index 9756fed1..6eff9d32 100644
--- a/ui/packages/basic/AiBar.vue
+++ b/ui/packages/basic/AiBar.vue
@@ -1,117 +1,113 @@
 <template>
-  <div class="aibar" :style="{ marginBottom: marginBottom }" :class="[titlePosition === 'center' ? 'aibar-center' : '']">
-    <div v-if="titlePosition === 'center'"></div>
+  <div class="aibar" :style="{ marginBottom }" :class="{'aibar-cente':titlePosition === 'center',card}">
+    <div v-if="titlePosition === 'center'"/>
     <div class="aibar-left" :class="[titlePosition === 'center' ? 'aibar-left__center' : '']">
-      <template v-if="!isHasTitleSlot">{{ title }}</template>
+      <template v-if="!$scopedSlots.title">{{ title }}</template>
       <slot name="title" v-else></slot>
     </div>
     <div class="aibar-right">
-      <slot name="right"></slot>
+      <slot v-if="$scopedSlots.right" name="right"/>
+      <slot/>
     </div>
   </div>
 </template>
 
 <script>
-  export default {
-    name: 'AiBar',
+export default {
+  name: 'AiBar',
 
-    props: {
-      title: {
-        type: String
-      },
-
-      customCliker: {
-        type: Boolean,
-        default: false
-      },
-
-      marginBottom: {
-        type: String,
-        default: '16px'
-      },
-
-      titlePosition: {
-        type: String,
-        default: 'left'
-      }
+  props: {
+    title: {
+      type: String
     },
 
-    computed: {
-      isHasTitleSlot () {
-        return this.$slots.title
-      }
+    customCliker: {
+      type: Boolean,
+      default: false
     },
 
-    data () {
-      return {
-      }
-    }
-  }
+    marginBottom: {
+      type: String,
+      default: '16px'
+    },
+
+    titlePosition: {
+      type: String,
+      default: 'left'
+    },
+    card: Boolean
+  },
+}
 </script>
 
 <style lang="scss" scoped>
-  .aibar {
-    display: flex;
+.aibar {
+  display: flex;
+  position: relative;
+  align-items: center;
+  justify-content: space-between;
+  height: 56px;
+  padding: 0 16px;
+  box-sizing: border-box;
+  border-bottom: 1px solid #EEEEEE;
+  box-shadow: 0 4px 6px -2px rgba(15, 15, 21, 0.15);
+
+  &.card {
+    background: #fff;
+  }
+
+  .aibar-left {
+    color: #222;
+    font-size: 16px;
+    font-weight: 700;
+  }
+
+  .aibar-left__center {
     position: relative;
+    width: 556px;
+    text-align: center;
+    word-break: break-all;
+    line-height: 24px;
+  }
+
+  .aibar-right {
+    display: flex;
     align-items: center;
-    justify-content: space-between;
-    height: 56px;
-    padding: 0 16px;
-    box-sizing: border-box;
-    border-bottom: 1px solid #EEEEEE;
+    color: #5088FF;
+    font-size: 12px;
 
-    .aibar-left {
-      color: #222;
-      font-size: 16px;
-      font-weight: 700;
+    i {
+      line-height: 1;
+      color: #5088FF;
     }
 
-    .aibar-left__center {
-      position: relative;
-      width: 556px;
-      text-align: center;
-      word-break: break-all;
-      line-height: 24px;
+    span {
+      font-size: 12px;
     }
 
-    .aibar-right {
+    & > div, & > a {
       display: flex;
       align-items: center;
-      color: #5088FF;
-      font-size: 12px;
+      margin-right: 20px;
 
-      i {
-        line-height: 1;
-        color: #5088FF;
-      }
-
-      span {
-        font-size: 12px;
-      }
-
-      & > div, & > a {
-        display: flex;
-        align-items: center;
-        margin-right: 20px;
-
-        &:last-child {
-          margin-right: 0;
-        }
+      &:last-child {
+        margin-right: 0;
       }
     }
   }
+}
 
-  .aibar-center {
-    height: auto;
-    padding: 10px 0;
+.aibar-center {
+  height: auto;
+  padding: 10px 0;
 
-    h2 {
-      margin: 0 0 10px 0;
-    }
-
-    p {
-      color: #888;
-      font-size: 14px;
-    }
+  h2 {
+    margin: 0 0 10px 0;
   }
+
+  p {
+    color: #888;
+    font-size: 14px;
+  }
+}
 </style>
diff --git a/ui/packages/basic/AiDialog.vue b/ui/packages/basic/AiDialog.vue
index f4cfe81a..3924578e 100644
--- a/ui/packages/basic/AiDialog.vue
+++ b/ui/packages/basic/AiDialog.vue
@@ -1,163 +1,165 @@
 <template>
   <section class="ai-dialog__wrapper">
-		<el-dialog
-			custom-class="ai-dialog"
-      v-on="$listeners"
-			v-if="isEmpty"
-			:close-on-click-modal="closeOnClickModal"
-      v-bind="$attrs"
-			:destroy-on-close="destroyOnClose"
-			:visible.sync="dialogVisible">
-			<div class="ai-dialog__header" slot="title">
-				<h2>{{ title }}</h2>
-			</div>
-			<div class="ai-dialog__content" :style="{'max-height': isScrool ? '500px' : 'auto'}">
-				<div class="ai-dialog__content--wrapper" :style="{'padding-right': isScrool ? '8px' : '0'}">
-					<slot></slot>
-				</div>
-			</div>
-			<template v-if="customFooter" slot="footer">
-				<slot name="footer"></slot>
-			</template>
-			<div v-else class="dialog-footer" slot="footer">
-				<el-button @click="onCancel">取消</el-button>
-				<el-button @click="onConfirm" type="primary" style="width: 92px;">确认</el-button>
-			</div>
-		</el-dialog>
+    <el-dialog
+        custom-class="ai-dialog"
+        v-on="$listeners"
+        v-if="isEmpty"
+        :close-on-click-modal="closeOnClickModal"
+        v-bind="$attrs"
+        :destroy-on-close="destroyOnClose"
+        :visible.sync="dialogVisible">
+      <div class="ai-dialog__header" slot="title">
+        <h2>{{ title }}</h2>
+      </div>
+      <div class="ai-dialog__content" :style="{'max-height': isScrool ? '500px' : 'auto'}">
+        <div class="ai-dialog__content--wrapper" :style="{'padding-right': isScrool ? '8px' : '0'}">
+          <slot></slot>
+        </div>
+      </div>
+      <template v-if="customFooter" slot="footer">
+        <slot name="footer"></slot>
+      </template>
+      <div v-else class="dialog-footer" slot="footer">
+        <el-button @click="onCancel">取消</el-button>
+        <el-button @click="onConfirm" type="primary" style="width: 92px;">确认</el-button>
+      </div>
+    </el-dialog>
   </section>
 </template>
 
 <script>
-	export default {
-		name: 'AiDialog',
-		props: {
-			visible: {
-				type: Boolean,
-				default: false
-			},
-			title: {
-				type: String,
-				default: ''
-			},
-			customFooter: {
-				type: Boolean,
-				default: false
-			},
-			'close-on-click-modal': {
-				type: Boolean,
-				default: false
-			},
-			destroyOnClose: {
-				type: Boolean,
-				default: true
-			}
-		},
+export default {
+  name: 'AiDialog',
+  props: {
+    visible: {
+      type: Boolean,
+      default: false
+    },
+    title: {
+      type: String,
+      default: ''
+    },
+    customFooter: {
+      type: Boolean,
+      default: false
+    },
+    'close-on-click-modal': {
+      type: Boolean,
+      default: false
+    },
+    destroyOnClose: {
+      type: Boolean,
+      default: true
+    }
+  },
 
-		data () {
-			return {
-				dialogVisible: false,
-				isScrool: true,
-				isEmpty: true
-			}
-		},
+  data() {
+    return {
+      dialogVisible: false,
+      isScrool: true,
+      isEmpty: true
+    }
+  },
 
-		watch: {
-			visible: {
-				handler (val) {
-					this.dialogVisible = val
+  watch: {
+    visible: {
+      handler(val) {
+        this.dialogVisible = val
 
-					// if (val) {
-					// 	this.$nextTick(() => {
-					// 		setTimeout(() => {
-					// 			this.isScrool = document.querySelector('.ai-dialog__content') && document.querySelector('.ai-dialog__content').clientHeight >= 500
-					// 		}, 100)
-					// 	})
-					// }
+        // if (val) {
+        // 	this.$nextTick(() => {
+        // 		setTimeout(() => {
+        // 			this.isScrool = document.querySelector('.ai-dialog__content') && document.querySelector('.ai-dialog__content').clientHeight >= 500
+        // 		}, 100)
+        // 	})
+        // }
 
-					if (this.destroyOnClose && !val) {
-						setTimeout(() => {
-							this.isEmpty = false
+        if (this.destroyOnClose && !val) {
+          setTimeout(() => {
+            this.isEmpty = false
 
-							setTimeout(() => {
-								this.isEmpty = true
-							}, 50)
-						}, 500)
-					}
-				}
-			}
-		},
+            setTimeout(() => {
+              this.isEmpty = true
+            }, 50)
+          }, 500)
+        }
+      }
+    }
+  },
 
-		mounted () {
-		},
+  mounted() {
+  },
 
-		methods: {
-			onCancel () {
-				this.$emit('update:visible', false)
-				this.$emit('onCancel')
-			},
+  methods: {
+    onCancel() {
+      this.$emit('update:visible', false)
+      this.$emit('onCancel')
+      this.$emit('cancel')
+    },
 
-			onConfirm () {
-				this.$emit('onConfirm')
-			}
-		}
-	}
+    onConfirm() {
+      this.$emit('onConfirm')
+      this.$emit('confirm')
+    }
+  }
+}
 </script>
 <style lang="scss">
-	.ai-dialog {
-		margin: 0!important;
-		top: 50%;
-		left: 50%;
-		transform: translate(-50%, -50%);
+.ai-dialog {
+  margin: 0 !important;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
 
-		.el-dialog__body {
-			padding: 20px 40px 20px;
-		}
+  .el-dialog__body {
+    padding: 20px 40px 20px;
+  }
 
-		.ai-dialog__content {
-			overflow-y: auto;
-			padding-bottom: 4px;
+  .ai-dialog__content {
+    overflow-y: auto;
+    padding-bottom: 4px;
 
-			.ai-dialog__content--wrapper {
-				height: 100%;
-				overflow-x: hidden;
-				overflow-y: overlay;
-			}
-		}
+    .ai-dialog__content--wrapper {
+      height: 100%;
+      overflow-x: hidden;
+      overflow-y: overlay;
+    }
+  }
 
-		.ai-dialog__header {
-			height: 48px;
-			line-height: 48px;
-			padding: 0 16px;
-			border-bottom: 1px solid #eee;
+  .ai-dialog__header {
+    height: 48px;
+    line-height: 48px;
+    padding: 0 16px;
+    border-bottom: 1px solid #eee;
 
-			h2 {
-				font-size: 16px;
-				font-weight: 700;
-			}
-		}
+    h2 {
+      font-size: 16px;
+      font-weight: 700;
+    }
+  }
 
-		.el-dialog__footer {
-			padding: 16px 20px;
-			box-sizing: border-box;
-			background: #F3F6F9;
-			text-align: center;
+  .el-dialog__footer {
+    padding: 16px 20px;
+    box-sizing: border-box;
+    background: #F3F6F9;
+    text-align: center;
 
-			& + .el-button {
-				margin-left: 8px;
-			}
+    & + .el-button {
+      margin-left: 8px;
+    }
 
-			.el-button {
-				width: 92px!important;
-			}
-		}
+    .el-button {
+      width: 92px !important;
+    }
+  }
 
-		.el-dialog__header {
-			padding: 0;
-		}
+  .el-dialog__header {
+    padding: 0;
+  }
 
-		.el-dialog__headerbtn {
-			top: 24px;
-			transform: translateY(-50%);
-		}
-	}
+  .el-dialog__headerbtn {
+    top: 24px;
+    transform: translateY(-50%);
+  }
+}
 </style>
diff --git a/ui/packages/layout/AiCard.vue b/ui/packages/layout/AiCard.vue
index 2a97e547..fab82f5c 100644
--- a/ui/packages/layout/AiCard.vue
+++ b/ui/packages/layout/AiCard.vue
@@ -1,6 +1,6 @@
 <template>
-  <section class="ai-card">
-    <ai-bar v-if="!hideTitle" :title="title" v-bind="$attrs">
+  <section class="ai-card" :class="{panel}">
+    <ai-bar v-if="!hideHeader" :title="title" v-bind="$attrs">
       <template #title>
         <slot name="title"></slot>
       </template>
@@ -9,7 +9,8 @@
       </template>
     </ai-bar>
     <div class="ai-card__body">
-      <slot name="content"></slot>
+      <slot v-if="$scopedSlots.content" name="content"/>
+      <slot v-else/>
     </div>
   </section>
 </template>
@@ -21,7 +22,11 @@ export default {
     title: {
       type: String
     },
-    hideTitle: Boolean
+    hideTitle: Boolean,
+    panel: Boolean
+  },
+  computed: {
+    hideHeader: v => v.hideTitle || v.panel
   }
 }
 </script>
@@ -37,5 +42,15 @@ export default {
   .ai-card__body {
     padding: 12px 40px 22px;
   }
+
+  &.panel {
+    margin-bottom: 0;
+
+    .ai-card__body {
+      padding: 12px 16px;
+    }
+  }
+
+
 }
 </style>
diff --git a/ui/packages/layout/AiDialogBtn.vue b/ui/packages/layout/AiDialogBtn.vue
index 594fd6d6..861cd401 100644
--- a/ui/packages/layout/AiDialogBtn.vue
+++ b/ui/packages/layout/AiDialogBtn.vue
@@ -4,8 +4,8 @@
       <slot v-if="$scopedSlots.btn" name="btn"/>
       <el-button v-else type="text">{{ text }}</el-button>
     </div>
-    <ai-dialog :visible.sync="dialog" :title="dialogTitle" :width="width" :customFooter="customFooter" v-on="$listeners"
-               @onConfirm="dialog=false,$emit('onConfirm')" v-bind="$attrs">
+    <ai-dialog :visible.sync="dialog" :title="dialogTitle" :width="width" :customFooter="needFooter" v-on="$listeners"
+               @onConfirm="handleConfirm" v-bind="$attrs">
       <slot/>
       <template #footer>
         <el-button @click="dialog=false">关闭</el-button>
@@ -21,12 +21,26 @@ export default {
     text: {default: "点击弹窗"},
     dialogTitle: {default: "展示信息"},
     customFooter: {default: true},
-    width: {default: "1200px"}
+    width: {default: "1200px"},
+    submit: {default: null}
+  },
+  computed: {
+    needFooter: v => v.customFooter && !v.submit
   },
   data() {
     return {
       dialog: false
     }
+  },
+  methods: {
+    handleConfirm() {
+      if (!this.submit) {
+        this.dialog = false
+        this.$emit('onConfirm')
+      } else {
+        this.submit?.()?.then(() => this.dialog = false)
+      }
+    }
   }
 }
 </script>
diff --git a/ui/packages/layout/AiList.vue b/ui/packages/layout/AiList.vue
index 0a294140..8f91f388 100644
--- a/ui/packages/layout/AiList.vue
+++ b/ui/packages/layout/AiList.vue
@@ -6,9 +6,14 @@
     <div class="ai-list__tabs" v-if="$slots.tabs">
       <slot name="tabs"></slot>
     </div>
-    <div class="ai-list__blank" v-else-if="$slots.blank">
-      <slot name="blank"/>
-    </div>
+    <el-row type="flex" class="ai-list__blank" v-else-if="$scopedSlots.blank" :class="{hasLeft:$scopedSlots.left}">
+      <div class="ai-list__content--left" v-if="$scopedSlots.left">
+        <slot name="left"/>
+      </div>
+      <div class="fill">
+        <slot name="blank"/>
+      </div>
+    </el-row>
     <div class="ai-list__content" v-else :class="contentClass">
       <div class="ai-list__content--wrapper">
         <slot name="custom" v-if="!!$slots.custom"/>
@@ -68,7 +73,7 @@ export default {
 
 <style lang="scss" scoped>
 //全局tab  css
-:deep( .ai-list__tabs ){
+:deep( .ai-list__tabs ) {
   margin-top: 0 !important;
 
   .el-tabs__item {
@@ -148,7 +153,7 @@ export default {
     flex: 1;
     overflow: hidden;
 
-    :deep( .el-tabs__item ){
+    :deep( .el-tabs__item ) {
       min-width: 80px;
       height: 32px;
       line-height: 32px;
@@ -158,15 +163,15 @@ export default {
       border-bottom: 1px solid transparent !important;
     }
 
-    :deep(.el-tabs__header ){
+    :deep(.el-tabs__header ) {
       margin: 0;
     }
 
-    :deep(.el-tabs ){
+    :deep(.el-tabs ) {
       height: 100%;
     }
 
-    :deep(.el-tabs__content ){
+    :deep(.el-tabs__content ) {
       height: calc(100% - 32px);
       background: #f3f6f9;
 
@@ -222,7 +227,17 @@ export default {
     flex: 1;
     padding: 16px;
     box-sizing: border-box;
-    overflow: auto;
+    height: calc(100% - 50px);
+
+
+    &.hasLeft {
+      padding: 16px 0;
+    }
+
+    & > .fill {
+      height: 100%;
+      overflow: auto;
+    }
   }
 }