ui库和web端产品库合并版本(还需修复细节)

ui/packages/common/AiLog.vue

@@ -0,0 +1,154 @@
+<template>
+  <section class="AiLog">
+    <el-table :data="logList" border header-cell-class-name="table-head-cell" cell-class-name="table-cell">
+      <el-table-column width="186px" align="center" label="修改时间" prop="createTime"/>
+      <el-table-column width="90px" align="center" label="变更人" prop="userName"/>
+      <el-table-column label="操作类型" header-align="center" width="132px">
+        <template slot-scope="{row}">{{ row.typeLabel + row.fieldName }}</template>
+      </el-table-column>
+      <el-table-column label="变更内容">
+        <div slot-scope="{row}">
+          <p v-if="row.type!=3">
+            {{ row.fieldName }}从
+            <span style='color: #26f'>{{ row.beforeChangeValue || "空" }}</span>
+            {{ row.typeLabel }}为
+            <span style='color: #26f'>{{ row.afterChangeValue || "空" }}</span>
+          </p>
+          <p v-else>
+            对
+            <span style='color: #26f'>{{ row.afterChangeValue || "空" }}</span>
+            进行了修改
+          </p>
+        </div>
+      </el-table-column>
+      <div slot="append" class="table-footer">
+        <el-pagination :current-page.sync="page.current" layout="total,prev,pager,next,sizes,jumper" :total="page.total"
+                       background @size-change="v=>{page.size=v;getLogs()}" @current-change="getLogs"/>
+      </div>
+    </el-table>
+  </section>
+</template>
+
+<script>
+export default {
+  name: "AiLog",
+  props: {
+    bid: String,
+    instance: Function,
+  },
+  data() {
+    return {
+      logList: [],
+      logType: {
+        0: "更新",
+        1: "删除",
+        2: "新增",
+        3: "更新"
+      },
+      page: {
+        current: 1,
+        size: 10,
+        total: 0
+      }
+    }
+  },
+  methods: {
+    getLogs() {
+      this.instance.post("/app/appchangelog/list", null, {
+        params: {...this.page, objectId: this.bid}
+      }).then(res => {
+        if (res && res.data) {
+          this.page.total = res.data.total
+          res.data.records = res.data.records.map(e => {
+            return {...e, typeLabel: this.logType[e.type]}
+          })
+          this.logList = res.data.records
+        }
+      })
+    }
+  },
+  mounted() {
+    this.getLogs()
+  }
+}
+</script>
+<style lang="scss" scoped>
+.AiLog {
+  ::v-deep.table-head-cell {
+    background-color: rgba(243, 246, 249, 1);
+    color: #333;
+    font-size: 14px;
+    font-weight: bold;
+  }
+
+  .table-footer {
+    padding: 10px 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  ::v-deep.table-cell {
+    .cell {
+      padding-top: 13px;
+      padding-bottom: 13px;
+
+      div {
+        white-space: normal;
+      }
+    }
+  }
+
+  ::v-deep.el-pagination {
+    text-align: center;
+
+    .btn-prev {
+      background-color: #fff;
+      border: solid 1px #d0d4dc;
+      margin-left: 8px;
+      border-radius: 4px;
+
+      &:disabled {
+        background-color: #F5F5F5;
+      }
+    }
+
+    .btn-next {
+      background: #fff;
+      border: 1px solid #D0D4DC;
+      border-radius: 4px;
+
+      &:disabled {
+        background-color: #F5F5F5;
+      }
+    }
+  }
+
+  ::v-deep.el-pagination__jump {
+    margin-left: 0;
+  }
+
+  ::v-deep.el-pager li {
+    background-color: #fff;
+    border: solid 1px #d0d4dc;
+    margin-left: 8px;
+    border-radius: 4px !important;
+    line-height: 26px !important;
+
+    &.active {
+      background-color: #fff !important;
+      color: #5088FF !important;
+      border-color: #5088FF;
+
+      & + li {
+        border-left: solid 1px #d0d4dc
+      }
+    }
+
+    &:nth-last-of-type(1) {
+      margin-right: 8px;
+    }
+  }
+}
+
+</style>