From 4a8e6048ba529a84f11ba74e4f90558bcd7b1075 Mon Sep 17 00:00:00 2001
From: hejianhao <15708179461@qq.com>
Date: 星期四, 03 四月 2025 16:31:58 +0800
Subject: [PATCH] Merge branch 'main' of http://120.76.84.145:10101/gitblit/r/H5/leshan-laboratory
---
src/views/reportLibrary/feasibilityStudy/components/approval/index.vue | 426 ++++++++++++++++++++++++++++++++++++++++++++---------
1 files changed, 354 insertions(+), 72 deletions(-)
diff --git a/src/views/reportLibrary/feasibilityStudy/components/approval/index.vue b/src/views/reportLibrary/feasibilityStudy/components/approval/index.vue
index 466cbe0..9af2b86 100644
--- a/src/views/reportLibrary/feasibilityStudy/components/approval/index.vue
+++ b/src/views/reportLibrary/feasibilityStudy/components/approval/index.vue
@@ -1,110 +1,392 @@
<template>
- <div>
- <el-dialog top="40vh" :visible.sync="show" :show-close="false" :append-to-body="true"
- :close-on-click-modal="false" width="60%">
- <div class="top-con a-center" slot="title">
- 审批验证与发布报告
- </div>
- <div class="content">
- <div class="left">
- <div class="label-tit"> </div>
+ <el-dialog :title="dialogTitle" :visible.sync="visible" width="80%" po :close-on-click-modal="false"
+ @close="handleClose">
+ <div class="approval-dialog">
+ <!-- 左侧审批内容 -->
+ <div class="approval-content">
+ <Card class="approval-content-card">
+ <template style="position: relative">
+ <div class="header-title" style="width: 100%;">
+ <div class="header-title-left">
+ <img src="@/assets/public/headercard.png" />
+ <div>所属项目组</div>
+ </div>
+ </div>
+ <Table :queryForm="queryForm" :total="0" @currentChange="handleCurrentChange"
+ @sizeChange="handleSizeChange">
+ <template>
+ <el-table-column prop="name" label="项目组名称" />
+ <el-table-column prop="age" label="项目负责人" />
+ <el-table-column prop="age" label="项目组成员" />
+ <el-table-column prop="age" label="创建时间" />
+ </template>
+ </Table>
- <el-form ref="form" :model="form" label-width="100px"></el-form>
- <el-form-item label="报告编号" prop="name">
- <el-input v-model="form.name" placeholder="请输入报告编号" />
- </el-form-item>
- <el-form-item label="报告名称" prop="name">
- <el-input v-model="form.name" placeholder="请输入报告名称" />
- </el-form-item>
- <el-form-item label="报告状态" prop="name">
- <el-select v-model="form.name" placeholder="请选择报告状态">
- <el-option label="全部" value="1" />
- <el-option label="待审核" value="2" />
- <el-option label="已通过" value="3" />
- <el-option label="已驳回" value="4" />
- </el-select>
- </el-form-item>
- </div>
- <div class="right"></div>
+
+ <el-form ref="form" :model="form" :rules="rules" inline label-position="top"
+ style="margin-top: 38px">
+ <div class="header-title" style="width: 100%;">
+ <div class="header-title-left">
+ <img src="@/assets/public/headercard.png" />
+ <div>报告编号</div>
+ </div>
+ </div>
+ <form-item prop="name" style="margin-top: 38px">
+ <el-input v-model="form.name" style="width: 100%;" placeholder="请输入报告编号" />
+ </form-item>
+
+ <div class="header-title" style="width: 100%;">
+ <div class="header-title-left">
+ <img src="@/assets/public/headercard.png" />
+ <div>报告名称</div>
+ </div>
+ </div>
+ <form-item prop="name" style="margin-top: 38px">
+ <el-input v-model="form.name" style="width: 100%;" placeholder="请输入报告编号" />
+ </form-item>
+
+ <div class="header-title" style="width: 100%;">
+ <div class="header-title-left">
+ <img src="@/assets/public/headercard.png" />
+ <div>报告正文</div>
+ </div>
+ </div>
+ <form-item prop="name" style="margin-top: 38px">
+ <ai-editor v-model="form.name" style="width: 100%;" placeholder="请输入报告编号" />
+ </form-item>
+
+ </el-form>
+ </template>
+ <!-- <SelectMember ref="selectMember" /> -->
+ </Card>
</div>
- <span slot="footer" class="dialog-footer">
- <el-button @click="$emit('close')">取消</el-button>
- <el-button type="primary" @click="$emit('confirm')">确定</el-button>
- </span>
- </el-dialog>
- </div>
+ <!-- 右侧审批流程 -->
+ <div class="approval-flow">
+ <div class="flow-content">
+ <approval-process :status="form.status" :submit-time="form.createTime" :approver="form.approver"
+ :approve-time="form.approveTime" />
+ </div>
+ </div>
+ </div>
+ <div class="approval-dialog-approve">
+ <el-row :span="24">
+ <el-col :span="12">
+ <div class="status">
+ <div class="status-title">审批结果</div>
+ <div class="status-content">
+ <div class="resolve" :class="status == '1' && 'activeStatus'" @click.stop="status = 1">
+ 通过
+ </div>
+ <div class="reject" :class="status == '2' && 'activeStatus'" @click.stop="status = 2">
+ 驳回
+ </div>
+ </div>
+ </div>
+ </el-col>
+ <el-col :span="12">
+ <div class="remark">
+ <div class="remark-title">审批意见</div>
+ <el-input type="textarea" v-model="remark" placeholder="请输入审批意见" />
+ </div>
+ </el-col>
+ </el-row>
+
+
+ </div>
+ <div slot="footer" class="dialog-footer">
+ <el-button @click="handleClose">取 消</el-button>
+ <el-button type="primary" @click="handleApprove" v-if="type === 'approve'">通过</el-button>
+ </div>
+ </el-dialog>
</template>
<script>
+import ApprovalProcess from '@/components/approvalProcess'
+import AiEditor from '@/components/AiEditor'
+
export default {
- components: {},
+ name: "ApprovalDialog",
+ components: {
+ ApprovalProcess,
+ AiEditor
+ },
props: {
- show: {
+ visible: {
type: Boolean,
default: false,
},
- title: {
+ type: {
type: String,
- default: '确认要删除这条信息吗？',
+ default: "approve", // approve-审批，view-查看
+ },
+ data: {
+ type: Object,
+ default: () => ({}),
},
},
data() {
- return {};
+ return {
+ form: {
+ planName: "",
+ planCode: "",
+ stage: "",
+ creator: "",
+ createTime: "",
+ approvalComment: "",
+ status: "pending",
+ approver: "",
+ approveTime: ""
+ },
+ radio1: 1,
+ rules: {},
+ status: "1",
+ remark: "",
+ };
},
- computed: {},
- watch: {},
- created() { },
- mounted() { },
- methods: {},
+ computed: {
+ dialogTitle() {
+ return this.type === "approve" ? "审批" : "审批详情";
+ },
+ },
+ watch: {
+ data: {
+ handler(val) {
+ if (val) {
+ this.form = { ...val };
+ }
+ },
+ immediate: true,
+ },
+ },
+ methods: {
+ handleClose() {
+ this.$emit("update:visible", false);
+ this.form.approvalComment = "";
+ },
+ handleApprove() {
+ if (!this.form.approvalComment) {
+ this.$message.warning("请输入审批意见");
+ return;
+ }
+ this.$emit("approve", {
+ ...this.form,
+ status: "approved",
+ });
+ },
+ handleReject() {
+ if (!this.form.approvalComment) {
+ this.$message.warning("请输入审批意见");
+ return;
+ }
+ this.$emit("reject", {
+ ...this.form,
+ status: "rejected",
+ });
+ },
+ },
};
</script>
+
<style scoped lang="less">
-.left {
+::v-deep .el-dialog__header {
+ border-bottom: 1px solid #e4e7ed;
+}
+
+.approval-dialog {
display: flex;
-}
+ height: 40vh;
-::v-deep .el-dialog {
- border-radius: 12px;
-
- .el-dialog__header {
- padding-top: 28px;
- padding-right: 27px;
- padding-left: 34px;
- padding-bottom: 11px;
+ .approval-content {
+ flex: 3;
+ margin-right: 20px;
+ background: #ffffff;
+ box-shadow: 0px 4px 12px 4px rgba(0, 0, 0, 0.08);
+ border-radius: 10px;
}
- .el-dialog__body {
- padding: unset;
- padding-left: 73px;
- padding-right: 20px;
- }
+ .approval-flow {
+ padding: 40px 20px;
+ // width: 405px;
+ flex: 2;
+ background: #ffffff;
+ box-shadow: 0px 4px 12px 4px rgba(0, 0, 0, 0.08);
+ border-radius: 10px;
+
+ .flow-title {
+ font-size: 16px;
+ font-weight: bold;
+ margin-bottom: 20px;
+ color: #303133;
+ }
- .el-dialog__footer {
- padding-top: 18px;
- padding-right: 27px;
- padding-bottom: 29px;
+ .flow-content {
+ height: calc(100% - 40px);
+ overflow-y: auto;
+
+ .el-form--inline .el-form-item {
+ margin-right: 83px;
+ }
+ }
}
}
-.bgcolor1 {
- background: rgba(22, 119, 255, 1);
+.approval-content-card {
+ height: calc(100% - 100px) !important;
+ box-shadow: none !important;
}
-.top-con {
- display: flex;
- justify-content: space-between;
+.header-title {
+ // display: flex;
+ align-items: center;
+ flex-wrap: wrap;
+ margin-bottom: 20px;
+ gap: 13px;
- .title {
- font-family: PingFangSC, PingFang SC;
- font-weight: 600;
- font-size: 16px;
- color: rgba(0, 0, 0, 1);
- margin-bottom: 13px;
+ .header-title-left {
+ display: flex;
+ align-items: center;
+ gap: 13px;
+ margin-top: 38px;
+
+ img {
+ width: 12px;
+ height: 19px;
+ }
+
+ div {
+ flex-shrink: 0;
+ font-weight: bold;
+ font-size: 18px;
+ color: #222222;
+ line-height: 27px;
+ font-family: "Source Han Sans CN Bold Bold";
+
+ &:before {
+ content: "*";
+ color: #f56c6c;
+ margin-right: 4px;
+ }
+ }
+
+ span {
+ flex-shrink: 0;
+ font-weight: bold;
+ font-size: 18px;
+ color: #222222;
+ line-height: 27px;
+ font-family: "Source Han Sans CN Bold Bold";
+ }
+ }
+
+ .header-title-left :first-child {
+ margin-top: 0;
+ }
+}
+
+.header-title:first-child {
+ .header-title-left {
+ margin-top: 0;
+ }
+}
+
+.item-title {
+ padding-left: 25px;
+
+ span {
+ flex-shrink: 0;
+ font-weight: bold;
+ font-size: 14px;
+ color: #222222;
+ line-height: 27px;
+ font-family: "Source Han Sans CN Bold Bold";
+ margin: 18px 0;
+
+ &:before {
+ content: "*";
+ color: #f56c6c;
+ margin-right: 4px;
+ }
+ }
+}
+
+.approval-dialog-approve {
+ padding: 38px 20px;
+ // display: flex;
+ align-content: center;
+
+ .status {
+ margin-right: 40px;
+ max-width: 60%;
+ }
+
+ // align-items: center;
+ .status-title {
+ color: #222222;
+ font-family: "SourceHanSansCN-Medium";
+ line-height: 14px;
+ margin-bottom: 16px;
+ }
+
+ .status-content {
+ display: flex;
+ align-items: center;
+ width: 100%;
+ gap: 16px;
+ background: #ffffff;
+ border-radius: 10px;
+ border: 1px solid rgba(4, 156, 154, 0.5);
+
+ .resolve {
+ border-radius: 10px;
+ flex: 1;
+ font-size: 16px;
+ // padding: 5px 55px;
+ font-weight: 400;
+ color: #333333;
+ cursor: pointer;
+ line-height: 32px;
+ display: flex;
+ align-items: center;
+ justify-content: center
+ }
+
+ .reject {
+ flex: 1;
+ border-radius: 10px;
+ font-size: 16px;
+ line-height: 32px;
+ // padding: 5px 55px;
+ font-weight: 400;
+ color: #333333;
+ cursor: pointer;
+ display: flex;
+ align-items: center;
+ justify-content: center
+ }
+
+ .activeStatus {
+ background: #ebfefd;
+ color: #049c9a;
+ box-shadow: 0px 0px 6px 0px rgba(10, 109, 108, 0.25);
+ border-radius: 10px;
+ }
+ }
+
+ .remark-title {
+ color: #222222;
+ font-family: "SourceHanSansCN-Medium";
+ line-height: 14px;
+ margin-bottom: 16px;
}
}
.dialog-footer {
+ align-items: center;
display: flex;
justify-content: center;
+
+ button {
+ width: 150px;
+ }
}
</style>
\ No newline at end of file
--
Gitblit v1.7.1