bencao-subscribe/library/components/CheckProgress/index.vue

<!--
 * @FilePath: index.vue
 * @Author: 旭颖
 * @Date: 2022-12-13 11:41:05
 * @LastEditors: king
 * @LastEditTime: 2023-02-08 15:16:23
-->
<template>
  <el-drawer
    v-model="dialogFormVisible"
    :append-to-body="true"
    :before-close="close"
    class="drawer"
    direction="rtl"
    size="600"
    title="审核进度"
  >
    <el-timeline>
      <el-timeline-item
        v-for="(item, index) in progress"
        :key="index"
        :hide-timestamp="flow_nodes[index].type == 6"
        placement="top"
        :timestamp="
          flow_nodes[index].type == 6 ? '' : '第' + item.node_num + '步'
        "
        :type="
          flow_nodes[index].type == 6
            ? ''
            : item.check_status == 3 && item.check_status
            ? 'danger'
            : 'success'
        "
      >
        <el-card v-if="flow_nodes[index].type != 6">
          <h4>{{ flow_nodes[index].name }}</h4>
          <div v-if="flow_nodes[index].type == 1">
            <div class="text">
              <div class="label">提交时间</div>
              <div>{{ item.check_time }}</div>
            </div>
          </div>
          <div v-if="flow_nodes[index].type == 2">
            <div class="name text">
              <div class="label">审核人：</div>
              <div>
                {{ item.check_admin ? item.check_admin.name : '--' }}
              </div>
            </div>
            <div class="text">
              <div class="label">审核时间：</div>
              <div>{{ item.check_time }}</div>
            </div>
            <div class="text">
              <div class="label">审核状态：</div>
              <div>
                <el-tag v-if="item.check_status == 2" type="success">
                  审核成功
                </el-tag>
              </div>
              <div>
                <el-tag v-if="item.check_status == 3" type="danger">
                  审核失败
                </el-tag>
              </div>
              <div>
                <el-tag v-if="item.check_status == 1" type="info">
                  待审核
                </el-tag>
              </div>
            </div>
            <div class="text">
              <div class="label">审核备注：</div>

              <div style="color: red">
                {{ item.remark != '' ? item.remark : '--' }}
              </div>
            </div>
          </div>
        </el-card>
      </el-timeline-item>
    </el-timeline>
    <template #footer>
      <el-button @click="close">取 消</el-button>
    </template>
  </el-drawer>
</template>

<script>
  import { upLoad } from './api/index'
  export default defineComponent({
    name: 'RoleManagementEdit',

    setup() {
      const state = reactive({
        formRef: null,
        title: '',
        dialogFormVisible: false,
        form: { model_id: '', flow_code: '' },
        progress: [],
        flow_nodes: [],
      })

      const showEdit = (row) => {
        state.form.model_id = row.id
        state.form.flow_code = row.code
        fetchData()
        state.dialogFormVisible = true
      }
      //列表数据
      const fetchData = async () => {
        state.listLoading = true
        const { data } = await upLoad(state.form)
        console.log(data)
        const progress = data.progress
        state.progress = progress.reverse()
        state.flow_nodes = data.apply.flow_nodes
        state.listLoading = false
      }
      const close = () => {
        state.dialogFormVisible = false
      }

      onMounted(() => {})
      return {
        ...toRefs(state),
        showEdit,
        fetchData,
        close,
      }
    },
  })
</script>

<style lang="scss" scoped>
  .text {
    display: flex;
    line-height: 28px;
    .label {
      flex: 0 0 80px;
    }
    .people {
      display: inline-block;
      margin-right: 5px;
    }
  }
</style>