烟花爆竹批发企业仓库安全风险监测前端
zhouwx
2025-04-03 15c3a0082b51422801f1985e5d9e68eef76c3039
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
<template>
  <div class="notice">
    <el-dialog
        v-model="dialogVisible"
        title="流转记录"
        width="500px"
        :before-close="handleClose"
        :close-on-press-escape="false"
        :close-on-click-modal="false"
    >
      <el-timeline style="max-width: 600px">
        <el-timeline-item size="large" color="#0bbd87" style="font-size: 16px">
          <div>创建人:{{state.creatContent}}</div>
        </el-timeline-item>
        <el-timeline-item style="font-size: 16px" :color="state.firstPeopleState == 1 ? '#0bbd87' : '#B4B4B4' " size="large">
          <div style="display: flex">
            最初签署人:
            <div style="display: flex;flex-direction: column;line-height: 25px">
              <div v-for="item in firstArr">
                {{item.firstPeopleContent}}
                <span v-if="item.firstPeopleState == 1" style="color: #1ab394;font-size: 14px;">[已签]</span>
                <span v-else style="color: #6d737b;font-size: 14px;">[未签]</span>
              </div>
            </div>
 
          </div>
        </el-timeline-item>
        <el-timeline-item
            v-for="(activity, index) in state.activities"
            :key="index"
            size="large"
            style="font-size: 16px"
            :color="activity.signStatus == 1 || activity.signStatus == 3 ? '#0bbd87' : '#B4B4B4' "
        >
          <div style="display: flex;font-size: 16px">
            <div style="display: flex;flex-direction: column">
              <span  style="font-size: 14px;margin-bottom: 5px;color: #6d737b">由 {{activity.deptName}} {{activity.userName}} 流转</span>
              <div>
                <span style="font-size: 16px" >{{activity.signUserName}}({{activity.signDeptName}})</span>
                <span v-if="activity.signStatus == 1" style="color: #1ab394;font-size: 14px;margin-left: 5px">[已签]</span>
                <span v-else-if="activity.signStatus == 0 || activity.signStatus == null " style="color: #6d737b;font-size: 14px;margin-left: 5px">[未签]</span>
                <span v-else-if="activity.signStatus == 3 && state.form.itemStatus == 2 " style="color: #1ab394;font-size: 14px;margin-left: 5px">[已归档]</span>
              </div>
            </div>
          </div>
        </el-timeline-item>
      </el-timeline>
    </el-dialog>
  </div>
</template>
<script setup>
import {reactive, ref, toRefs} from 'vue'
import { MoreFilled } from '@element-plus/icons-vue'
import {ElMessage} from "element-plus";
import {listDept} from "@/api/system/dept";
import {listUser} from "@/api/system/user";
 
const { proxy } = getCurrentInstance();
const dialogVisible = ref(false);
const title = ref("");
const busRef = ref();
const length = ref()
const emit = defineEmits(["getList"]);
 
const state = reactive({
  form: {
    id: '',
  },
  activities: [],
  creatContent: '',
  firstPeopleContent: '',
  firstPeopleState: null,
  formRules:{
    name: [{ required: true, trigger: "blur", message:'' }],
  },
})
 
 
const firstArr = ref([])
const openDialog = async (value) => {
  console.log('va',value)
  state.form = JSON.parse(JSON.stringify(value))
  state.activities = JSON.parse(JSON.stringify(value)).signatureFlows
  const newArr = []
  state.activities.forEach(item => {
    if(item.sort == 1){
      state.creatContent = item.userName + '('+ item.deptName + ')'
      const obj = {
        firstPeopleContent: item.signUserName + '('+ item.signDeptName + ')',
        firstPeopleState: item.signStatus
      }
      firstArr.value.push(obj)
    }else {
      newArr.push(item)
    }
  })
  newArr.sort((a,b) => a.sort - b.sort)
  state.activities = newArr
  dialogVisible.value = true;
}
 
const handleClose = () => {
  reset();
  dialogVisible.value = false;
  emit("getList")
}
const reset = () => {
  state.form = {
    id: '',
    name: '',
    remark: '',
  }
  firstArr.value = []
}
 
defineExpose({
  openDialog
});
 
</script>
 
<style scoped lang="scss">
.notice{
  :deep(.el-form .el-form-item__label) {
    font-size: 15px;
  }
  :deep(.el-timeline-item__node--large) {
    left: -8px;
    top: -5px;
    width: 25px;
    height: 25px;
  }
  :deep(.el-timeline-item){
    padding-bottom: 50px;
  }
  .file {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
}
</style>