|
@@ -1,242 +1,294 @@
|
|
|
<template>
|
|
|
- <div class="processApproval">
|
|
|
- <div class="left-card">
|
|
|
+ <div class="processApproval">
|
|
|
+ <div class="left-card">
|
|
|
+ <div class="top">
|
|
|
<div class="commons-title title">流程标题</div>
|
|
|
- <div class="">
|
|
|
- <p>流程内容</p>
|
|
|
- <p>流程内容</p>
|
|
|
- <p>流程内容</p>
|
|
|
- <p>流程内容</p>
|
|
|
- <p>流程内容</p>
|
|
|
- <p>流程内容</p>
|
|
|
- <p>流程内容</p>
|
|
|
- <p>流程内容</p>
|
|
|
- </div>
|
|
|
+ <SendSubscribe ref="makeDom"></SendSubscribe>
|
|
|
</div>
|
|
|
- <div class="right-card">
|
|
|
- <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
|
|
|
- <el-tab-pane label="审批记录" name="first">
|
|
|
- <ul class="flow-chart">
|
|
|
- <li>
|
|
|
- <div class="left-icon">
|
|
|
- <i class="iconfont icon-iconm_daick"></i>
|
|
|
- <i class="iconfont icon-iconm_daohzj right-btm-status"></i>
|
|
|
+ <div class="bottom">
|
|
|
+ <div class="commons-title title">处理意见</div>
|
|
|
+ <el-form :model="flowForm" :rules="flowRules" ref="flowFormDom">
|
|
|
+ <el-form-item prop="remark" label-width="0px" label="">
|
|
|
+ <el-input
|
|
|
+ type="textarea"
|
|
|
+ placeholder="请输入"
|
|
|
+ v-model="flowForm.remark"
|
|
|
+ >
|
|
|
+ </el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item>
|
|
|
+ <el-button @click="handleSubmit"> ceshi </el-button>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="right-card">
|
|
|
+ <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
|
|
|
+ <el-tab-pane label="审批记录" name="first">
|
|
|
+ <ul class="flow-chart">
|
|
|
+ <li>
|
|
|
+ <div class="left-icon">
|
|
|
+ <i class="iconfont icon-iconm_daick"></i>
|
|
|
+ <i class="iconfont icon-iconm_daohzj right-btm-status"></i>
|
|
|
+ </div>
|
|
|
+ <div class="right-conetnt">
|
|
|
+ <div class="name">
|
|
|
+ 发起人:张三
|
|
|
+ <span>2022-11-11 00:00:00</span>
|
|
|
</div>
|
|
|
- <div class="right-conetnt">
|
|
|
- <div class="name">
|
|
|
- 发起人:张三
|
|
|
- <span>2022-11-11 00:00:00</span>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="remark">
|
|
|
- <div class="label">发起审批</div>
|
|
|
- 1231231231231321231
|
|
|
- </div>
|
|
|
+
|
|
|
+ <div class="remark">
|
|
|
+ <div class="label">发起审批</div>
|
|
|
+ 1231231231231321231
|
|
|
</div>
|
|
|
- <div class="line"></div>
|
|
|
- </li>
|
|
|
- <li>
|
|
|
- <div class="left-icon">
|
|
|
- <i class="iconfont icon-iconm_daick"></i>
|
|
|
- <i class="iconfont icon-iconm_daohzj right-btm-status"></i>
|
|
|
+ </div>
|
|
|
+ <div class="line"></div>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <div class="left-icon">
|
|
|
+ <i class="iconfont icon-iconm_daick"></i>
|
|
|
+ <i class="iconfont icon-iconm_daohzj right-btm-status"></i>
|
|
|
+ </div>
|
|
|
+ <div class="right-conetnt">
|
|
|
+ <div class="name">
|
|
|
+ 发起人:张三
|
|
|
+ <span>2022-11-11 00:00:00</span>
|
|
|
</div>
|
|
|
- <div class="right-conetnt">
|
|
|
- <div class="name">
|
|
|
- 发起人:张三
|
|
|
- <span>2022-11-11 00:00:00</span>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="remark">
|
|
|
- <div class="label">发起审批</div>
|
|
|
-
|
|
|
- <div>
|
|
|
- 啊圣诞快乐家里快速打击啊老师的煎熬老师的煎熬上来看大家速度快垃圾上单绿卡数据的卡拉数据的卡拉设计的拉开时间
|
|
|
- </div>
|
|
|
+
|
|
|
+ <div class="remark">
|
|
|
+ <div class="label">发起审批</div>
|
|
|
+
|
|
|
+ <div>
|
|
|
+ 啊圣诞快乐家里快速打击啊老师的煎熬老师的煎熬上来看大家速度快垃圾上单绿卡数据的卡拉数据的卡拉设计的拉开时间
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="line"></div>
|
|
|
- </li>
|
|
|
- <li>
|
|
|
- <div class="left-icon">
|
|
|
- <i class="iconfont icon-iconm_daick"></i>
|
|
|
- <i class="iconfont icon-iconm_daohzj right-btm-status"></i>
|
|
|
+ </div>
|
|
|
+ <div class="line"></div>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <div class="left-icon">
|
|
|
+ <i class="iconfont icon-iconm_daick"></i>
|
|
|
+ <i class="iconfont icon-iconm_daohzj right-btm-status"></i>
|
|
|
+ </div>
|
|
|
+ <div class="right-conetnt">
|
|
|
+ <div class="name">
|
|
|
+ 发起人:张三
|
|
|
+ <span>2022-11-11 00:00:00</span>
|
|
|
</div>
|
|
|
- <div class="right-conetnt">
|
|
|
- <div class="name">
|
|
|
- 发起人:张三
|
|
|
- <span>2022-11-11 00:00:00</span>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="remark">
|
|
|
- <div class="label">发起审批</div>
|
|
|
-
|
|
|
- <div>
|
|
|
- 啊圣诞快乐家里快速打击啊老师的煎熬老师的煎熬上来看大家速度快垃圾上单绿卡数据的卡拉数据的卡拉设计的拉开时间
|
|
|
- </div>
|
|
|
+
|
|
|
+ <div class="remark">
|
|
|
+ <div class="label">发起审批</div>
|
|
|
+
|
|
|
+ <div>
|
|
|
+ 啊圣诞快乐家里快速打击啊老师的煎熬老师的煎熬上来看大家速度快垃圾上单绿卡数据的卡拉数据的卡拉设计的拉开时间
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="line"></div>
|
|
|
- </li>
|
|
|
- <li>
|
|
|
- <div class="left-icon">
|
|
|
- <i class="iconfont icon-iconm_daick"></i>
|
|
|
- <i class="iconfont icon-iconm_daohzj right-btm-status"></i>
|
|
|
+ </div>
|
|
|
+ <div class="line"></div>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <div class="left-icon">
|
|
|
+ <i class="iconfont icon-iconm_daick"></i>
|
|
|
+ <i class="iconfont icon-iconm_daohzj right-btm-status"></i>
|
|
|
+ </div>
|
|
|
+ <div class="right-conetnt">
|
|
|
+ <div class="name">
|
|
|
+ 发起人:张三
|
|
|
+ <span>2022-11-11 00:00:00</span>
|
|
|
</div>
|
|
|
- <div class="right-conetnt">
|
|
|
- <div class="name">
|
|
|
- 发起人:张三
|
|
|
- <span>2022-11-11 00:00:00</span>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="remark">
|
|
|
- <div class="label">发起审批</div>
|
|
|
-
|
|
|
- <div>
|
|
|
- 啊圣诞快乐家里快速打击啊老师的煎熬老师的煎熬上来看大家速度快垃圾上单绿卡数据的卡拉数据的卡拉设计的拉开时间
|
|
|
- </div>
|
|
|
+
|
|
|
+ <div class="remark">
|
|
|
+ <div class="label">发起审批</div>
|
|
|
+
|
|
|
+ <div>
|
|
|
+ 啊圣诞快乐家里快速打击啊老师的煎熬老师的煎熬上来看大家速度快垃圾上单绿卡数据的卡拉数据的卡拉设计的拉开时间
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="line"></div>
|
|
|
- </li>
|
|
|
- <li>
|
|
|
- <div class="left-icon">
|
|
|
- <i class="iconfont icon-iconm_daick"></i>
|
|
|
- <i class="iconfont icon-iconm_daohzj right-btm-status"></i>
|
|
|
+ </div>
|
|
|
+ <div class="line"></div>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <div class="left-icon">
|
|
|
+ <i class="iconfont icon-iconm_daick"></i>
|
|
|
+ <i class="iconfont icon-iconm_daohzj right-btm-status"></i>
|
|
|
+ </div>
|
|
|
+ <div class="right-conetnt">
|
|
|
+ <div class="name">
|
|
|
+ 发起人:张三
|
|
|
+ <span>2022-11-11 00:00:00</span>
|
|
|
</div>
|
|
|
- <div class="right-conetnt">
|
|
|
- <div class="name">
|
|
|
- 发起人:张三
|
|
|
- <span>2022-11-11 00:00:00</span>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="remark">
|
|
|
- <div class="label">发起审批</div>
|
|
|
-
|
|
|
- <div>
|
|
|
- 啊圣诞快乐家里快速打击啊老师的煎熬老师的煎熬上来看大家速度快垃圾上单绿卡数据的卡拉数据的卡拉设计的拉开时间
|
|
|
- </div>
|
|
|
+
|
|
|
+ <div class="remark">
|
|
|
+ <div class="label">发起审批</div>
|
|
|
+
|
|
|
+ <div>
|
|
|
+ 啊圣诞快乐家里快速打击啊老师的煎熬老师的煎熬上来看大家速度快垃圾上单绿卡数据的卡拉数据的卡拉设计的拉开时间
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="line"></div>
|
|
|
- </li>
|
|
|
- </ul>
|
|
|
- </el-tab-pane>
|
|
|
- <el-tab-pane label="决策辅助" name="second">决策辅助</el-tab-pane>
|
|
|
- </el-tabs>
|
|
|
- </div>
|
|
|
+ </div>
|
|
|
+ <div class="line"></div>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </el-tab-pane>
|
|
|
+ <el-tab-pane label="决策辅助" name="second">决策辅助</el-tab-pane>
|
|
|
+ </el-tabs>
|
|
|
</div>
|
|
|
- </template>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+<script setup>
|
|
|
+import SendSubscribe from "@/components/process/SendSubscribe";
|
|
|
+const activeName = ref("first");
|
|
|
+const handleClick = (tab, event) => {
|
|
|
+ console.log(tab, event);
|
|
|
+};
|
|
|
+const flowForm = reactive({
|
|
|
+ flowKey: "",
|
|
|
+ handleUserId: "",
|
|
|
+ remark: "",
|
|
|
+ data: {},
|
|
|
+});
|
|
|
+const flowRules = reactive({
|
|
|
+ remark: [{ required: true, message: "请输入处理意见", trigger: "blur" }],
|
|
|
+});
|
|
|
+const { proxy } = getCurrentInstance();
|
|
|
+const makeDom = ref(null); //组件实例
|
|
|
+const flowFormDom = ref(null);
|
|
|
+const handleSubmit = async () => {
|
|
|
+ try {
|
|
|
+ const flag = await makeDom.value.handleSubmit();
|
|
|
+ if (flag) {
|
|
|
+ const data = makeDom.value.submitData;
|
|
|
+ flowFormDom.value.validate((vaild) => {
|
|
|
+ if (vaild) {
|
|
|
+ data.subscribeDetailList = data.subscribeDetailList.map((x) => ({
|
|
|
+ bussinessId: x.bussinessId,
|
|
|
+ count: x.count,
|
|
|
+ remark: x.remark,
|
|
|
+ }));
|
|
|
+ proxy.post("/subscribe/add", data).then((res) => {
|
|
|
+ console.log(res, "wss");
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ } catch (err) {
|
|
|
+ console.log("数据未填完整!", err);
|
|
|
+ }
|
|
|
+};
|
|
|
+
|
|
|
+onMounted(() => {});
|
|
|
+</script>
|
|
|
+
|
|
|
<style lang="scss" scoped>
|
|
|
- .processApproval {
|
|
|
+.processApproval {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ margin-top: 20px;
|
|
|
+ padding: 0 20px;
|
|
|
+ height: calc(100vh - 130px);
|
|
|
+ .left-card {
|
|
|
+ background: #fff;
|
|
|
+ border-radius: 4px;
|
|
|
+ padding: 20px;
|
|
|
+ flex: 1;
|
|
|
+ margin-right: 20px;
|
|
|
display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- margin-top: 20px;
|
|
|
- padding: 0 20px;
|
|
|
- .left-card {
|
|
|
- background: #fff;
|
|
|
- border-radius: 4px;
|
|
|
- padding: 20px;
|
|
|
+ flex-direction: column;
|
|
|
+ .top {
|
|
|
flex: 1;
|
|
|
- margin-right: 20px;
|
|
|
+ overflow-y: auto;
|
|
|
+ background: #fff;
|
|
|
}
|
|
|
- .right-card {
|
|
|
+ .bottom {
|
|
|
+ height: 155px;
|
|
|
background: #fff;
|
|
|
- border-radius: 4px;
|
|
|
- padding: 0 20px 20px;
|
|
|
- width: 600px;
|
|
|
- box-sizing: border-box;
|
|
|
- .flow-chart {
|
|
|
- padding: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .right-card {
|
|
|
+ background: #fff;
|
|
|
+ border-radius: 4px;
|
|
|
+ padding: 0 20px 20px;
|
|
|
+ width: 400px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ .flow-chart {
|
|
|
+ overflow: auto;
|
|
|
+ padding: 0;
|
|
|
+ margin: 0;
|
|
|
+ li {
|
|
|
margin: 0;
|
|
|
- li {
|
|
|
- margin: 0;
|
|
|
- padding: 0 0 20px;
|
|
|
- list-style: none;
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- position: relative;
|
|
|
- .right-conetnt {
|
|
|
- flex: 1;
|
|
|
- .name {
|
|
|
- font-size: 12px;
|
|
|
- color: #333;
|
|
|
- margin-bottom: 10px;
|
|
|
- span {
|
|
|
- color: #999;
|
|
|
- float: right;
|
|
|
- }
|
|
|
- }
|
|
|
- .remark {
|
|
|
- padding: 10px;
|
|
|
- color: #666666;
|
|
|
- font-size: 12px;
|
|
|
- background: #f1f1f1;
|
|
|
- border-radius: 2px;
|
|
|
- .label {
|
|
|
- color: #39c55a;
|
|
|
- margin-bottom: 10px;
|
|
|
- }
|
|
|
+ padding: 0 0 20px;
|
|
|
+ list-style: none;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ position: relative;
|
|
|
+ .right-conetnt {
|
|
|
+ flex: 1;
|
|
|
+ .name {
|
|
|
+ font-size: 12px;
|
|
|
+ color: #333;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ span {
|
|
|
+ color: #999;
|
|
|
+ float: right;
|
|
|
}
|
|
|
}
|
|
|
- .left-icon {
|
|
|
- width: 40px;
|
|
|
- height: 40px;
|
|
|
- text-align: center;
|
|
|
- line-height: 40px;
|
|
|
- background: #0084ff;
|
|
|
- border-radius: 10px;
|
|
|
- color: #fff;
|
|
|
- font-size: 20px;
|
|
|
- position: relative;
|
|
|
- margin-right: 27px;
|
|
|
- z-index: 2;
|
|
|
- .right-btm-status {
|
|
|
- position: absolute;
|
|
|
- bottom: 0px;
|
|
|
- right: -10px;
|
|
|
- height: 20px;
|
|
|
- width: 20px;
|
|
|
- line-height: 16px;
|
|
|
- border-radius: 10px;
|
|
|
- background: #39c55a;
|
|
|
- border: 2px solid #fff;
|
|
|
- font-size: 12px;
|
|
|
- box-sizing: border-box;
|
|
|
+ .remark {
|
|
|
+ padding: 10px;
|
|
|
+ color: #666666;
|
|
|
+ font-size: 12px;
|
|
|
+ background: #f1f1f1;
|
|
|
+ border-radius: 2px;
|
|
|
+ .label {
|
|
|
+ color: #39c55a;
|
|
|
+ margin-bottom: 10px;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
- li::before {
|
|
|
- content: "";
|
|
|
- position: absolute;
|
|
|
- top: 0;
|
|
|
- left: 20px;
|
|
|
- width: 2px;
|
|
|
- height: 100%;
|
|
|
- background: #ddd;
|
|
|
- z-index: 1;
|
|
|
- }
|
|
|
- li:last-child::before {
|
|
|
- display: none;
|
|
|
+ .left-icon {
|
|
|
+ width: 40px;
|
|
|
+ height: 40px;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 40px;
|
|
|
+ background: #0084ff;
|
|
|
+ border-radius: 10px;
|
|
|
+ color: #fff;
|
|
|
+ font-size: 20px;
|
|
|
+ position: relative;
|
|
|
+ margin-right: 27px;
|
|
|
+ z-index: 2;
|
|
|
+ .right-btm-status {
|
|
|
+ position: absolute;
|
|
|
+ bottom: 0px;
|
|
|
+ right: -10px;
|
|
|
+ height: 20px;
|
|
|
+ width: 20px;
|
|
|
+ line-height: 16px;
|
|
|
+ border-radius: 10px;
|
|
|
+ background: #39c55a;
|
|
|
+ border: 2px solid #fff;
|
|
|
+ font-size: 12px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
+ li::before {
|
|
|
+ content: "";
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 20px;
|
|
|
+ width: 2px;
|
|
|
+ height: 100%;
|
|
|
+ background: #ddd;
|
|
|
+ z-index: 1;
|
|
|
+ }
|
|
|
+ li:last-child::before {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
- </style>
|
|
|
- <script setup>
|
|
|
- import {
|
|
|
- ref,
|
|
|
- reactive,
|
|
|
- computed,
|
|
|
- watch,
|
|
|
- onMounted,
|
|
|
- onUnmounted,
|
|
|
- nextTick,
|
|
|
- defineEmits,
|
|
|
- defineExpose,
|
|
|
- } from "vue";
|
|
|
- const activeName = ref("first");
|
|
|
- const handleClick = (tab, event) => {
|
|
|
- console.log(tab, event);
|
|
|
- };
|
|
|
- </script>
|
|
|
+}
|
|
|
+</style>
|
|
|
|