fl-web-component 0.1.0

package/packages/components/model/components/proof-history.vue

@@ -0,0 +1,318 @@
+<template>
+  <div>
+		<div class="trigger-button">
+      <el-button type="text" @click="triggerDialog"
+        ><i class="pre-img"></i>校审历史</el-button
+      >
+    </div>
+    <com-dialog
+      v-if="dialogVisible"
+      dialog-title="校审历史"
+      :visible="dialogVisible"
+      :popup-width="'50%'"
+			:footerDisabled="true"
+      @handleClose="handleClose"
+      @submitDialogData="submitDialogData"
+    >
+      <el-table
+        max-height="50vh"
+        v-loading="loading"
+        :data="tableData"
+      >
+        <el-table-column label="序号" type="index" width="80" />
+
+        <el-table-column
+          label="校审版本名称"
+          prop="name"
+          show-overflow-tooltip
+        />
+        <el-table-column
+          label="更新时间"
+          prop="updateTime"
+          show-overflow-tooltip
+        />
+        <!-- <el-table-column
+          label="校审模型名称"
+          prop="toVersion"
+          show-overflow-tooltip
+        /> -->
+        <el-table-column
+          label="操作"
+          width="200"
+          class-name="small-padding fixed-width"
+        >
+          <template slot-scope="scope">
+            <el-button size="mini" type="text" @click="handleViewVersion(scope.row)"
+              >查看</el-button
+            >
+            <el-button size="mini" disabled type="text" @click="handleDownload(scope.row)"
+              >下载报告</el-button
+            >
+            <el-button size="mini" type="text" @click="handleDelete(scope.row)"
+              v-hasPermi="[
+                `project:version:remove:proj:${defaultParams.projectId}`,
+              ]"
+              >删除</el-button
+            >
+          </template>
+        </el-table-column>
+      </el-table>
+    </com-dialog>
+		<div v-show="historyDialogVisible" class="history-dialog">
+			<div class="history-title">{{ historyVersionName }}</div>
+			<el-button type="text" @click="exitViewVersion">退出历史</el-button>
+		</div>
+  </div>
+</template>
+
+<script>
+import { getProofHistoryList, deleteProofHistory } from '../api/index';
+export default {
+  name: 'proofHistory',
+  data() {
+    return {
+      dialogVisible: false,
+			historyDialogVisible: false,
+      tableData: [],
+			loading: true,
+			historyVersionName: '',
+    };
+  },
+  components: {
+    ComDialog: () => import('./com-dialogWrapper'),
+  },
+  props: {
+		defaultParams: {
+      type: Object,
+      default() {
+        return {};
+      },
+    },
+	},
+	mounted() {
+		this.getList();
+	},
+  methods: {
+    triggerDialog() {
+      this.dialogVisible = !this.dialogVisible;
+      console.log(this.dialogVisible);
+    },
+    /* 弹窗 修改是否让页面显示与隐藏的事件 */
+    updateVisible(val) {
+      this.dialogVisible = val;
+    },
+    /* 弹窗 确认 操作 */
+    submitDialogData() {
+      this.dialogVisible = false;
+    },
+    /* 弹窗 关闭 操作 */
+    handleClose() {
+      this.dialogVisible = false;
+    },
+		getList(){
+      console.log('getList')
+			getProofHistoryList(this.defaultParams).then((res) => {
+        if(res.code == 200){
+          this.tableData = res.rows;
+        }else{
+          this.$message({
+            type: "error",
+            message: res.msg,
+          });
+        }
+			}).finally(() => {
+				this.loading = false;
+
+        //  查看历史校审版本
+        const proofHistoryVersion = localStorage.getItem('proofHistoryVersion');
+        if(proofHistoryVersion){
+          this.historyDialogVisible = true;
+          this.historyVersionName = proofHistoryVersion;
+        }
+			});
+		},
+		handleDelete(item){
+      this.$confirm('将删除版本 "' + item.name + '"，是否继续？', '移除', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'error'
+      }).then(() => {
+        const { id } = item;
+        deleteProofHistory({
+            ids: id,
+          })
+          .then((res) => {
+            if (res.code != 200) {
+              this.$message({
+                type: "error",
+                message: res.msg,
+              });
+            } else {
+
+              this.getList(this.defaultParams);
+              this.$message({
+                type: "success",
+                message: res.msg,
+              });
+            }
+          })
+          .catch((res) => {
+            this.$message({
+              type: "error",
+              message: res.msg,
+            });
+          });
+      }).catch(() => {
+      });
+		},
+		handleDownload(item){
+		},
+		handleViewVersion(item){
+			this.historyVersionName = item.name;
+			// this.triggerDialog()
+			// this.dialogVisible = false;
+			// this.historyDialogVisible = true;
+      localStorage.setItem('proofHistoryVersion', item.name)
+      this.$message({
+        type: "success",
+        message: '正在切换历史版本',
+      });
+      setTimeout(() => {
+        this.$emit('viewVersion', item)
+      }, 500)
+		},
+		exitViewVersion(){
+			this.historyDialogVisible = false;
+      localStorage.removeItem('proofHistoryVersion')
+			this.$emit('viewVersion', null)
+		}
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+// .el-table{
+// 	color: #606266;
+// }
+// .el-table th{
+//   background: none;
+// }
+// .el-table tr{
+//   background: none;
+// }
+// .el-table thead{
+//   color: #fff;
+// }
+// .el-table th.el-table__cell{
+//   background: none;
+// }
+::v-deep .el-table {
+  display: flex;
+  flex-direction: column;
+	font-size: 14px;
+  line-height: 20px;
+  color: #2E3136;
+
+	// .el-table th{
+	// 	background: none;
+	// }
+	// .el-table tr{
+	// 	background: none;
+	// }
+	// .el-table thead{
+	// 	tr{
+	// 		color: #2E3136;
+	// 	}
+	// }
+	.el-table th.el-table__cell{
+		background: none;
+	}
+  .el-table__header-wrapper {
+    flex-shrink: 0;
+  }
+  .el-table__body-wrapper {
+    flex-grow: 1;
+    .el-table__row {
+      height: 52px;;
+      background-color: #fff !important;
+    }
+  }
+  .el-table__header-wrapper .el-table__header th,
+  .el-table__fixed-header-wrapper .el-table__header th {
+    background-color: #F8F8F8 !important;
+    color: #2E3136;
+    height: 52px;;
+    box-sizing: border-box;
+    padding: 0;
+		font-size: 14px;
+		line-height: 20px;
+		color: #2E3136;
+
+  }
+
+  .el-table__fixed-body-wrapper {
+    .el-table__row {
+      height: 52px;;
+    }
+  }
+  
+  .el-table__body tr.hover-row {
+    td.el-table__cell {
+      background-color: #F6F9FA;
+    }
+  }
+
+  .el-table__cell:not(.is-center):not(.is-hidden) {
+    button.el-button--text {
+      color: #008DE9;
+    }
+  }
+
+  // 计数器高度
+  .el-input-number .el-input--medium .el-input__inner {
+    height: 30px;
+  }
+
+
+  .el-dropdown-link {
+    color: #008DE9;
+  }
+  // 头部多选按钮
+  thead .el-table-column--selection {
+    & .el-checkbox {
+      margin-left: 4px;
+    }
+  }
+}
+
+.history-dialog{
+  justify-content: space-between;
+  align-items: center;
+  position: fixed;
+  width: 450px;
+	height: 50px;
+  background-color: rgb(255, 255, 255);
+  border-radius: 6px;
+  box-shadow: 4px 4px 12px 0px rgba(0, 0, 0, 0.18);
+  display: flex;
+	padding: 0 20px;
+	.history-title{
+		font-size: 18px;
+		font-weight: 700;
+	}
+}
+::v-deep .trigger-button{
+	span{
+		display: flex;
+		align-items: center;
+		color: #2E3136;
+	}
+	.pre-img {
+		background-image: url('../../../assets/proof/history@2x.png');
+		width: 30px;
+		height: 30px;
+		display: inline-block;
+		background-size: cover;
+	}	
+}
+</style>