zhengbasai/library/components/CheckFlows/index.vue

<!--
 * @FilePath: index.vue
 * @Author: 旭颖
 * @Date: 2022-12-14 16:03:57
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2023-02-28 18:29:04
-->
<template>
  <div class="page-container">
    <vab-query-form>
      <vab-query-form-left-panel :span="24">
        <!-- <el-button :icon="Plus" type="primary" @click="addCheck()">
          添加审核流程
        </el-button> -->
        <el-button
          v-if="show && totalList.length > 0"
          :icon="Plus"
          type="warning"
          @click="pushPersonnel()"
        >
          添加推送
        </el-button>
        <!-- <el-button :icon="Plus" type="warning">保存流程</el-button> -->
      </vab-query-form-left-panel>
    </vab-query-form>
    <div v-if="totalList.length > 0">
      <el-row v-loading="listLoading" style="margin-top: 20px">
        <el-col :span="12">
          <el-timeline>
            <el-timeline-item
              v-for="(item, index) in startList"
              :key="index"
              placement="top"
              :timestamp="'第' + item.node_num + '步'"
              type="primary"
            >
              <div class="line">
                <el-card style="flex: 0 0 750px; margin-right: 10px">
                  <h3>{{ item.name }}</h3>
                </el-card>
                <el-button
                  circle
                  :icon="Plus"
                  type="primary"
                  @click="addCheck(0, 2)"
                />
              </div>
            </el-timeline-item>
            <el-timeline-item
              v-for="(item, index) in list"
              :key="index"
              placement="top"
              :timestamp="'第' + item.node_num + '步'"
              type="primary"
            >
              <div class="line">
                <el-card style="flex: 0 0 750px; margin-right: 10px">
                  <div class="title">
                    <h3>{{ item.name }}</h3>
                    <el-button
                      v-if="item.check_type"
                      plain
                      type="primary"
                      @click="editCheck(item.type, index)"
                    >
                      编辑当前节点
                    </el-button>
                  </div>
                  <div>
                    <div v-if="item.check_type == 5">
                      <el-tag type="warning">对应驻场</el-tag>
                    </div>
                    <div v-else>
                      <el-tag
                        v-for="(item, index) in item.check_body"
                        :key="index"
                        type="primary"
                      >
                        {{ item.name }}
                      </el-tag>
                    </div>
                  </div>
                </el-card>
                <el-button
                  circle
                  :icon="Minus"
                  type="danger"
                  @click="deleteStep(index, item.type)"
                />
                <el-button
                  circle
                  :icon="Plus"
                  type="primary"
                  @click="addCheck(index, item.type)"
                />
              </div>
            </el-timeline-item>

            <el-timeline-item
              v-for="(item, index) in endList"
              :key="index"
              placement="top"
              :timestamp="'第' + item.node_num + '步'"
              type="success"
            >
              <el-card style="width: 750px">
                <h3>{{ item.name }}</h3>
              </el-card>
            </el-timeline-item>
            <el-timeline-item
              v-for="(item, index) in tuisong"
              :key="index"
              placement="top"
              :timestamp="'第' + item.node_num + '步'"
              type="warning"
            >
              <div class="line">
                <el-card style="flex: 0 0 750px; margin-right: 10px">
                  <div class="title">
                    <h3>{{ item.name }}</h3>
                    <el-button
                      plain
                      type="primary"
                      @click="editCheck(item.type, index)"
                    >
                      编辑当前节点
                    </el-button>
                  </div>
                  <div>
                    <el-tag
                      v-for="(item, index) in item.check_body"
                      :key="index"
                      type="primary"
                    >
                      {{ item.name }}
                    </el-tag>
                  </div>
                </el-card>
                <el-button
                  circle
                  :icon="Minus"
                  type="danger"
                  @click="deleteStep(index, item.type)"
                />
              </div>
            </el-timeline-item>
          </el-timeline>
        </el-col>
        <el-col :span="12">
          <div class="grid-content ep-bg-purple-light" />
        </el-col>
      </el-row>
    </div>
    <div v-else>
      <div class="empty">
        <el-empty description="暂未配置审核流程" />
        <div class="empty-text">
          请先配置流程框架
          <span style="margin-left: 10px">
            <el-button type="primary" @click="baseConfig">
              配置流程框架
            </el-button>
          </span>
        </div>
      </div>
    </div>
    <Add ref="addRef" @fetch-data="getFlow" />
    <Edit ref="editRef" @fetch-data="getFlow" />
  </div>
</template>
<script>
  import {
    Plus,
    Search,
    Refresh,
    Delete,
    Minus,
    Download,
    Avatar,
    CirclePlus,
  } from '@element-plus/icons-vue'
  import { getFlows, getFlowsId, doAdd } from './api/index'
  export default defineComponent({
    name: 'RoleManagement',
    components: {
      Add: defineAsyncComponent(() => import('./components/AddManage.vue')),
      Edit: defineAsyncComponent(() => import('./components/EditManage.vue')),
    },
    props: {
      code: {
        type: String,
        required: true,
        default: '',
      },
    },
    setup(props) {
      const $baseConfirm = inject('$baseConfirm')
      const $baseMessage = inject('$baseMessage')
      const state = reactive({
        addRef: null,
        editRef: null,
        listLoading: true,
        activeName: 'first',
        startList: [],
        list: [], //审核步骤审核流程
        endList: [], //结束
        tuisong: [],
        flowId: '', //流程id
        show: false,
        key: '',
        totalList: [], //所有审核流程
      })
      watch(
        () => props.code,
        () => {
          if (props.code) {
            state.key = props.code
            getFlow()
            getflowId()
          }
        }
      )
      //配置审核基础框架
      const baseConfig = async () => {
        const node = [
          {
            check_body: null,
            check_type: 0,
            name: '用户提交申请',
            node_num: 1,
            type: 1,
          },
          {
            check_body: null,
            check_type: 0,
            name: '审核完成',
            node_num: 2,
            type: 5,
          },
        ]
        const { message } = await doAdd({
          flow_id: state.flowId,
          nodes: node,
        })
        $baseMessage(message, 'success', 'vab-hey-message-success')
        await getFlow()
      }
      //获取流程

      const getFlow = async () => {
        state.listLoading = true
        state.startList = []
        state.list = []
        state.endList = [] //结束
        state.tuisong = []
        state.totalList = []
        const { data } = await getFlows({
          flow_code: state.key,
        })
        if (data.length > 0) {
          state.totalList = data
          data.map((item) => {
            if (item.type == 6) {
              state.show = false
            } else {
              state.show = true
            }
            if (item.type == 1) {
              console.log(item, 'pppp')
              state.startList.push(item)
            }
            if (item.type == 5) {
              state.endList.push(item)
            }
            if (item.type == 2) {
              state.list.push(item)
            }
            if (item.type == 6) {
              state.tuisong.push(item)
            }
          })
        } else {
          state.show = true
          state.startList = [
            {
              check_body: null,
              check_type: 0,
              name: '用户提交申请',
              node_num: 1,
              type: 1,
            },
          ]
          state.endList = [
            {
              check_body: null,
              check_type: 0,
              name: '审核完成',
              node_num: 2,
              type: 5,
            },
          ]
        }
        state.listLoading = false
      }
      //获取流程id
      const getflowId = async () => {
        const { data } = await getFlowsId({ code: state.key })
        state.flowId = data.data[0].id
      }
      //点击添加新流程
      const addCheck = (index, type) => {
        state['addRef'].showEdit({
          tuisong: state.tuisong,
          list: state.list,
          flowId: state.flowId,
          type: type,
          index: index,
        })
      }
      //编辑节点
      const editCheck = (type, index) => {
        state['editRef'].showEdit(
          {
            tuisong: state.tuisong,
            list: state.list,
            flowId: state.flowId,
            type: type,
          },
          index
        )
      }
      //添加推送人员
      const pushPersonnel = () => {
        state['addRef'].showEdit({
          tuisong: state.tuisong,
          list: state.list,
          flowId: state.flowId,
          type: 6,
        })
      }
      const handleEdit = (row) => {
        if (row.id) {
          state['addRef'].showEdit(row)
        } else {
          state['addRef'].showEdit()
        }
      }
      //删除推送步骤
      const deletePush = () => {
        $baseConfirm('你确定要删除当前推送人员吗', null, async () => {
          state.tuisong = []
        })
      }
      //删除当前步骤
      const deleteStep = (index, type) => {
        console.log(state.tuisong, '-------', state.totalList)
        $baseConfirm('你确定要删除当前审核步骤吗吗', null, async () => {
          const arr = []
          let node = []
          if (type == 2) {
            state.list.map((item, index1) => {
              if (index1 !== index) {
                arr.push(item)
              }
            })
            state.list = arr
            node = state.list.concat(state.tuisong)
          }
          if (type == 6) {
            //删除推送
            node = state.totalList.filter((item) => {
              return item.type !== type
            })
            state.show = true
          }
          console.log(node, 'ppppp'), 'pppp'
          const { message } = await doAdd({
            flow_id: state.flowId,
            nodes: node,
          })
          $baseMessage(message, 'success', 'vab-hey-message-success')
          await getFlow()
        })
      }
      //删除当前审核人员
      const deletePeople = () => {}
      onMounted(() => {})

      return {
        ...toRefs(state),
        handleEdit,
        addCheck,
        deleteStep,
        pushPersonnel,
        deletePeople,
        deletePush,
        editCheck,
        getFlow,
        getflowId,
        baseConfig,
        Plus,
        Search,
        Refresh,
        Delete,
        Minus,
        Avatar,
        Download,
        CirclePlus,
      }
    },
  })
</script>
<style lang="scss" scoped>
  .title {
    display: flex;
    align-items: center; /*垂直居中*/
    h3 {
      flex: 1;
    }
  }
  .line {
    display: flex;
    align-items: center; /*垂直居中*/
  }
  .empty {
    text-align: center;
  }
  .empty-text {
    color: red;
    margin-bottom: 50px;
    font-weight: 550;
  }
</style>