feat: 问卷列表增加状态和更新新时间列 (#23)

web/src/management/pages/list/components/baseList.vue

@@ -80,6 +80,7 @@ moment.locale('zh-cn');
 import empty from '@/management/components/empty';
 import ModifyDialog from './modify';
 import Tag from './tag';
+import State from './state';
 import ToolBar from './toolBar';
 import { fieldConfig, thead, noListDataConfig } from '../config';
 import { CODE_MAP } from '@/management/api/base';
@@ -90,7 +91,7 @@ export default {
   name: 'BaseList',
   data() {
     return {
-      fields: ['type', 'title', 'remark', 'creator', 'updateDate'],
+      fields: ['type', 'title', 'remark', 'creator', 'state', 'updateDate', 'createDate'],
       showModify: false,
       loading: false,
       theadDict: thead,
@@ -137,8 +138,11 @@ export default {
     },
     lget(row, field) {
       const data = get(row, field.key);
-      if (field.key === 'updateDate') {
+      if (field.key === 'createDate') {
         return moment(data).format('YYYY-MM-DD HH:mm:ss');
+      } else if (field.key === 'updateDate') {
+        const updateDate = get(row, 'curStatus.date');
+        return moment(updateDate).format('YYYY-MM-DD HH:mm:ss');
       }
       return data;
     },
@@ -213,6 +217,7 @@ export default {
     ModifyDialog,
     Tag,
     ToolBar,
+    State,
   },
 };
 </script>

web/src/management/pages/list/components/state.vue

@@ -0,0 +1,50 @@
+<template>
+  <div :class="['list-state', 'list-state-' + value.curStatus.id]">
+    <span class="list-state-badge" />
+    <span>{{ statusMaps[value.curStatus.id] }}</span>
+  </div>
+</template>
+<script>
+import { statusMaps } from '../config';
+export default {
+  name: 'State',
+  props: {
+    value: Object,
+  },
+  data() {
+    return {
+      statusMaps,
+    };
+  },
+};
+</script>
+<style lang="scss" rel="stylesheet/scss" scoped>
+.list-state {
+  display: flex;
+  align-items: center;
+  &-new {
+    color: $normal-color;
+    .list-state-badge {
+      background: $normal-color;
+    }
+  }
+  &-published {
+    color: #0dbd93;
+    .list-state-badge {
+      background: #0dbd93;
+    }
+  }
+  &-editing {
+    color: $primary-color;
+    .list-state-badge {
+      background: $primary-color;
+    }
+  }
+  &-badge {
+    width: 6px;
+    height: 6px;
+    border-radius: 50%;
+    margin-right: 8px;
+  }
+}
+</style>

web/src/management/pages/list/config/index.js

@@ -13,7 +13,8 @@ export const thead = {
   owner: '所有者',
   creator: '创建人',
   tags: '标签',
-  updateDate: '时间',
+  updateDate: '更新时间',
+  createDate: '创建时间',
   collectCount: '回收数',
 };
 
@@ -33,7 +34,11 @@ export const fieldConfig = {
     width: 200,
     tip: true,
   },
-
+  state: {
+    key: 'state',
+    width: 140,
+    comp: 'state',
+  },
   creator: {
     key: 'creator',
     width: 140,
@@ -42,6 +47,10 @@ export const fieldConfig = {
     key: 'updateDate',
     minWidth: 200,
   },
+  createDate: {
+    key: 'createDate',
+    minWidth: 200,
+  },
 };
 
 export const noListDataConfig = {
@@ -49,3 +58,12 @@ export const noListDataConfig = {
   desc: '赶快点击右上角立即创建问卷吧！',
   img: '/imgs/icons/list-empty.png',
 };
+
+
+export const statusMaps = {
+  new: '未发布',
+  editing: '修改中',
+  published: '已发布',
+  removed: '',
+  pausing: '',
+};