推

attendance-performance-manager-ui/admin/src/assets/less/base.css

@@ -294,3 +294,8 @@ a {
   text-align: right;
   word-break: break-word;
 }
+.el-button--primary {
+  background: linear-gradient(90deg, #5ab6ff, #2e9aff) !important;
+  color: #fff !important;
+  text-align: center !important;
+}

attendance-performance-manager-ui/admin/src/assets/less/base.less

@@ -332,3 +332,8 @@ a {
     }
   }
 }
+.el-button--primary {
+  background: linear-gradient(90deg, #5ab6ff, #2e9aff) !important;
+  color: #fff !important;
+  text-align: center !important;
+}

attendance-performance-manager-ui/admin/src/components/DataTable.vue

 <template>
   <el-table
-    size='small'
+    size="small"
     :data="tableData"
     :row-key="handleRowKeyMethod"
     :span-method="handleSpanMethod"
@@ -9,113 +9,124 @@
     @sort-change="handleSortChange"
     @row-click="handleRowClick"
     :row-class-name="tableRowClassName"
-    :empty-text='emptyText'
+    :empty-text="emptytxt ? emptytxt : emptyText"
     border
-    style="width: 100%">
+    style="width: 100%"
+  >
+    <el-table-column
+      v-for="column in columns"
+      :key="column.prop"
+      :type="column.type"
+      :index="handleIndexMethod"
+      :selectable="handleSelectableMethod"
+      :prop="column.prop"
+      :label="column.label"
+      :width="column.width"
+      :sortable="column.sortable"
+      :show-overflow-tooltip="column.tooltip"
+      :align="column.align || 'left'"
+      :formatter="column.formatter"
+      :reserve-selection="column.reserveSelection"
+      :subColumns="column.subColumns"
+      :fixed="column.fixed"
+    >
       <el-table-column
-        v-for='column in columns'
-        :key='column.prop'
-        :type="column.type"
-        :index="handleIndexMethod"
-        :selectable="handleSelectableMethod"
-        :prop="column.prop"
-        :label="column.label"
-        :width="column.width"
-        :sortable="column.sortable"
-        :show-overflow-tooltip="column.tooltip"
-        :align="column.align || 'left'"
-        :formatter='column.formatter'
-        :reserve-selection='column.reserveSelection'
-        :subColumns='column.subColumns'
-        :fixed="column.fixed"
-      >
-        <el-table-column
-          v-for='sunColumn in column.subColumns'
-          :key='sunColumn.prop'
-          :type="sunColumn.type"
-          :prop="sunColumn.prop"
-          :label="sunColumn.label"
-          :width="sunColumn.width"
-          :sortable="sunColumn.sortable"
-          :align="sunColumn.align || 'left'"
-          :formatter='sunColumn.formatter'
-      
-        />
-      </el-table-column>
+        v-for="sunColumn in column.subColumns"
+        :key="sunColumn.prop"
+        :type="sunColumn.type"
+        :prop="sunColumn.prop"
+        :label="sunColumn.label"
+        :width="sunColumn.width"
+        :sortable="sunColumn.sortable"
+        :align="sunColumn.align || 'left'"
+        :formatter="sunColumn.formatter"
+      />
+    </el-table-column>
   </el-table>
 </template>
 
 <script>
-
 export default {
   props: {
     handleRowKeyMethod: {
       type: Function,
       required: false,
-      default: row => { return row.id }
+      default: (row) => {
+        return row.id;
+      },
     },
     handleSelectableMethod: {
       type: Function,
       required: false,
-      default: () => {}
+      default: () => {},
     },
     handleIndexMethod: {
       type: Function,
       required: false,
-      default: () => {}
+      default: () => {},
     },
     handleSpanMethod: {
       type: Function,
       required: false,
-      default: () => {}
+      default: () => {},
     },
     handleSelectionChange: {
       type: Function,
       required: false,
-      default: () => {}
+      default: () => {},
     },
     handleRowClick: {
       type: Function,
       required: false,
-      default: () => {}
+      default: () => {},
     },
     handleSortChange: {
       type: Function,
       required: false,
-      default: () => {}
+      default: () => {},
     },
     tableRowClassName: {
       type: Function,
       required: false,
-      default: () => {}
+      default: () => {},
     },
     loading: {
       type: Boolean,
       required: false,
-      default: true
+      default: true,
     },
     tableData: {
       type: Array,
       required: false,
-      default: () => []
+      default: () => [],
     },
     columns: {
       type: Array,
       required: false,
-      default: ()=> [],
-    }
+      default: () => [],
+    },
   },
   computed: {
     emptyText() {
-       return (!this.loading && !this.tableData.length) ? '暂无数据' : '加载中...'
+      return !this.loading && !this.tableData.length ? "暂无数据" : "加载中...";
     },
   },
-  methods:{
+  mounted() {
+    console.log(this.tableData);
+    console.log(this.loading);
+  },
+  watch: {
+    tableData(val) {
+      val.length == 0 || val.length > 0
+        ? (this.emptytxt = "暂无数据")
+        : (this.emptytxt = "加载中...");
+    },
   },
+  methods: {},
   data() {
-    return {}
-  }
-}
+    return {
+      emptytxt: "",
+    };
+  },
+};
 </script>
-
-

attendance-performance-manager-ui/admin/src/views/Layout.vue

 <template>
-    <div :style="menuPageCss" class="pages page-layout">
-        <LayoutHeader v-if="menuPage!=='left'" @changePath="changePath"></LayoutHeader>
-        <LayoutHeaderLeft @toggle="toggle" :isOpen="isOpen" v-if="menuPage==='left'" />
-        <div style="padding:20px">
-            <router-view :class="{'active': !isOpen}" />            
-        </div>
+  <div :style="menuPageCss" class="pages page-layout">
+    <LayoutHeader
+      v-if="menuPage !== 'left'"
+      @changePath="changePath"
+    ></LayoutHeader>
+    <LayoutHeaderLeft
+      @toggle="toggle"
+      :isOpen="isOpen"
+      v-if="menuPage === 'left'"
+    />
+    <div style="padding:20px">
+      <router-view :class="{ active: !isOpen }" />
     </div>
+  </div>
 </template>
 <script>
 import LayoutHeader from "../components/Header";
 import LayoutHeaderLeft from "../components/HeaderLeft";
-import TabPane from '../components/tabPane.vue'
+import TabPane from "../components/tabPane.vue";
 const isPC = /(iPhone|iPad|iPod|iOS|Android)/i.test(navigator.userAgent);
 //菜单位置：取值： left :菜单在左面， top :菜单在上面
 const MenuPage = "top";
 
 export default {
-    components: {
-        LayoutHeader,
-        LayoutHeaderLeft,
-        TabPane
+  components: {
+    LayoutHeader,
+    LayoutHeaderLeft,
+    TabPane,
+  },
+  data() {
+    return {
+      isOpen: isPC,
+      menuPage: MenuPage,
+      isfresh: true,
+      path: "",
+    };
+  },
+  computed: {
+    menuPageCss() {
+      //左面和顶面菜单切换时，动态计划相关css参数
+      return {
+        "--padding-top": this.menuPage === "left" ? "60px" : "0px",
+        "--margin-left": this.menuPage === "left" ? "200px" : "0px",
+      };
     },
-    data() {
-        return {
-            isOpen: isPC,
-            menuPage: MenuPage,
-            isfresh:true,
-            path:''
-        }
+  },
+  methods: {
+    toggle() {
+      this.isOpen = !this.isOpen;
     },
-    computed: {
-        menuPageCss() {
-            //左面和顶面菜单切换时，动态计划相关css参数
-            return {
-                "--padding-top": this.menuPage === "left" ? "60px" : "0px",
-                "--margin-left": this.menuPage === "left" ? "200px" : "0px",
-            }
-        }
-    },
-    methods: {
-        toggle() {
-            this.isOpen = !this.isOpen;
-        },
-        changePath(e){
-            this.path = e
-        }
+    changePath(e) {
+      this.path = e;
     },
+  },
 };
 </script>
 
 <style lang="less">
 .page {
-    min-height: calc(100vh - 100px);
-    width: 100%;
-    position: relative;
-    background: #fff;
-    // var(--padding-top) 5px 5px 5px;
-    padding: 20px;
-    // margin-left: 60px;
-    &.active {
-        margin-left: var(--margin-left);
-    }
+  min-height: calc(100vh - 100px);
+  width: 100%;
+  position: relative;
+  background: #fff;
+  // var(--padding-top) 5px 5px 5px;
+  padding: 20px;
+  // margin-left: 60px;
+  &.active {
+    margin-left: var(--margin-left);
+  }
 }
 .page-layout {
-    background: #eee;
+  background: #eee;
 }
-</style>
-
 
+</style>