Browse Source

style: 更改了表格的表头样式,修改了部分数据展示的格式

fuchen 4 years ago
parent
commit
745333e0f4

+ 1 - 0
package.json

@@ -14,6 +14,7 @@
   "dependencies": {
     "axios": "0.18.1",
     "core-js": "3.6.5",
+    "dayjs": "^1.9.3",
     "echarts": "^4.9.0",
     "element-ui": "2.13.2",
     "husky": "^4.3.0",

+ 6 - 1
src/main.js

@@ -4,7 +4,6 @@ import 'normalize.css/normalize.css' // A modern alternative to CSS resets
 
 import ElementUI from 'element-ui'
 import 'element-ui/lib/theme-chalk/index.css'
-import locale from 'element-ui/lib/locale/lang/en' // lang i18n
 
 import '@/styles/index.scss' // global css
 
@@ -14,6 +13,7 @@ import router from './router'
 
 import '@/icons' // icon
 import '@/permission' // permission control
+import * as filters from './filters'
 
 /**
  * If you don't want to use mock-server
@@ -30,6 +30,11 @@ if (process.env.NODE_ENV === 'production') {
 
 Vue.use(ElementUI)
 
+// 注册全局过滤器
+Object.keys(filters).forEach(key => {
+  Vue.filter(key, filters[key])
+})
+
 Vue.config.productionTip = false
 
 new Vue({

+ 21 - 3
src/views/project/project-deploy/index.vue

@@ -18,6 +18,7 @@
       ref="multipleTable"
       :data="list"
       tooltip-effect="dark"
+      :header-cell-style="{color: '#000', fontWeight: 700}"
       style="width: 100%"
       @selection-change="handleSelectionChange"
     >
@@ -28,7 +29,13 @@
       <el-table-column
         label="项目名称"
         prop="projectname"
-      />
+      >
+        <template #default="scope">
+          <span :style="{color: '#1990FF'}">
+            {{ scope.row.projectname }}
+          </span>
+        </template>
+      </el-table-column>
       <el-table-column
         label="部署内容"
         prop="projectDesc"
@@ -52,11 +59,22 @@
       <el-table-column
         label="安装监控"
         prop="monitorjarState"
-      />
+      >
+        <template #default="scope">
+          <el-tag v-if="scope.row.monitorjarState === 1" type="primary">已安装</el-tag>
+          <el-tag v-if="scope.row.monitorjarState === 2" type="warning">未安装</el-tag>
+        </template>
+      </el-table-column>
       <el-table-column
         label="部署状态"
         prop="state"
-      />
+      >
+        <template #default="scope">
+          <el-tag v-if="scope.row.state === 1" type="success">开启</el-tag>
+          <el-tag v-if="scope.row.state === 2" type="warning">关闭</el-tag>
+          <el-tag v-if="scope.row.state === 3" type="danger">删除</el-tag>
+        </template>
+      </el-table-column>
       <el-table-column
         label="操作"
         width="200"

+ 13 - 2
src/views/project/project-error-monitor/index.vue

@@ -17,6 +17,7 @@
       ref="multipleTable"
       :data="list"
       tooltip-effect="dark"
+      :header-cell-style="{color: '#000', fontWeight: 700}"
       style="width: 100%"
       @selection-change="handleSelectionChange"
     >
@@ -31,7 +32,13 @@
       <el-table-column
         label="项目名称"
         prop="projectname"
-      />
+      >
+        <template #default="scope">
+          <span :style="{color: '#1990FF'}">
+            {{ scope.row.projectname }}
+          </span>
+        </template>
+      </el-table-column>
       <el-table-column
         label="负责人"
         prop="manager"
@@ -43,7 +50,11 @@
       <el-table-column
         label="添加日期"
         prop="createtime"
-      />
+      >
+        <template #default="scope">
+          {{ scope.row.createtime | timeFormat('YYYY-MM-DD') }}
+        </template>
+      </el-table-column>
     </el-table>
 
     <!--  分页模块  -->

+ 21 - 4
src/views/project/project-list/index.vue

@@ -18,6 +18,7 @@
       ref="multipleTable"
       :data="list"
       tooltip-effect="dark"
+      :header-cell-style="{color: '#000', fontWeight: 700}"
       style="width: 100%"
       @selection-change="handleSelectionChange"
     >
@@ -69,8 +70,13 @@
       <el-table-column
         label="项目名称"
         prop="projectname"
-      />
-
+      >
+        <template #default="scope">
+          <span :style="{color: '#1990FF'}">
+            {{ scope.row.projectname }}
+          </span>
+        </template>
+      </el-table-column>
       <el-table-column
         label="环境"
         prop="env"
@@ -90,11 +96,22 @@
       <el-table-column
         label="项目状态"
         prop="state"
-      />
+      >
+        <template #default="scope">
+          <el-tag v-if="scope.row.state === 1" type="success">正常</el-tag>
+          <el-tag v-else-if="scope.row.state === 2" type="danger">关闭</el-tag>
+          <el-tag v-else-if="scope.row.state === 3" type="primary">交付</el-tag>
+          <el-tag v-else-if="scope.row.state === 4" type="warning">暂停</el-tag>
+        </template>
+      </el-table-column>
       <el-table-column
         label="添加日期"
         prop="createtime"
-      />
+      >
+        <template #default="scope">
+          {{ scope.row.createtime | timeFormat('YYYY-MM-DD') }}
+        </template>
+      </el-table-column>
       <el-table-column
         label="操作"
         width="200"

+ 25 - 9
src/views/server/server-list/index.vue

@@ -19,6 +19,7 @@
       :data="list"
       tooltip-effect="dark"
       style="width: 100%"
+      :header-cell-style="{color: '#000', fontWeight: 700}"
       @selection-change="handleSelectionChange"
     >
       <el-table-column
@@ -27,32 +28,53 @@
       />
       <el-table-column
         label="IP地址"
+        align="center"
         prop="ip"
-      />
+      >
+        <template #default="scope">
+          <span :style="{color: '#1990FF'}">
+            {{ scope.row.ip }}
+          </span>
+        </template>
+      </el-table-column>
       <el-table-column
         label="所属公司"
+        align="center"
         prop="own"
       />
       <el-table-column
         label="CPU核数"
+        align="center"
         prop="cpu"
       />
       <el-table-column
         label="内存大小"
+        align="center"
         prop="memory"
       />
       <el-table-column
         label="操作系统"
+        align="center"
         prop="osinfo"
       />
       <el-table-column
         label="备注"
+        align="center"
         prop="remark"
-      />
+      >
+        <template #default="scope">
+          {{ scope.row.remark ? scope.row.remark : '暂无备注' }}
+        </template>
+      </el-table-column>
       <el-table-column
         label="创建时间"
+        align="center"
         prop="createtime"
-      />
+      >
+        <template #default="scope">
+          {{ scope.row.createtime | timeFormat('YYYY.MM.DD') }}
+        </template>
+      </el-table-column>
       <el-table-column
         label="操作"
         width="200"
@@ -175,12 +197,6 @@ export default {
             required: true,
             message: '拥有者不能为空'
           }
-        ],
-        remark: [
-          {
-            required: true,
-            message: '备注不能为空'
-          }
         ]
       }
     }

+ 8 - 2
src/views/staff/staff-list/index.vue

@@ -18,6 +18,7 @@
       ref="multipleTable"
       :data="list"
       tooltip-effect="dark"
+      :header-cell-style="{background:'#fafafa',color:'#000', fontWeight: 700, borderTop: '1px solid #ebeef5'}"
       style="width: 100%"
       @selection-change="handleSelectionChange"
     >
@@ -49,7 +50,12 @@
       <el-table-column
         label="在职状态"
         prop="status"
-      />
+      >
+        <template #default="scope">
+          <el-tag v-if="scope.row.status === 1" type="primary">在职</el-tag>
+          <el-tag v-if="scope.row.status === 2" type="danger">离职</el-tag>
+        </template>
+      </el-table-column>
       <el-table-column
         label="操作"
         width="200"
@@ -114,7 +120,7 @@
         </el-form-item>
       </el-form>
     </el-dialog>
-  </div>
+    </el-table></div>
 </template>
 
 <script>

+ 1 - 0
src/views/system/job-settings/index.vue

@@ -18,6 +18,7 @@
       ref="multipleTable"
       :data="list"
       tooltip-effect="dark"
+      :header-cell-style="{background:'#fafafa',color:'#000', fontWeight: 700, borderTop: '1px solid #ebeef5'}"
       style="width: 100%"
       @selection-change="handleSelectionChange"
     >

+ 1 - 0
src/views/system/menu-settings/index.vue

@@ -18,6 +18,7 @@
       ref="multipleTable"
       :data="list"
       tooltip-effect="dark"
+      :header-cell-style="{background:'#fafafa',color:'#000', fontWeight: 700, borderTop: '1px solid #ebeef5'}"
       style="width: 100%"
       @selection-change="handleSelectionChange"
     >