lc_finance/web/src/view/approve/flowManage/flowManage.vue

<template>
  <div>
    <el-row>
      <el-col :span="2">
        <el-button
          icon="Plus"
          type="primary"
          @click="openAddDrawer"
        >
          新增流程
        </el-button>
      </el-col>
      <el-col :span="3">
        <el-button
          icon="Edit"
          type="primary"
          @click="openNodeManage"
        >节点编辑</el-button>
      </el-col>
    </el-row>
    <el-row style="margin-top: 20px">
      <el-col :span="24">
        <el-table />
      </el-col>
    </el-row>
    <el-drawer
      v-model="nodeManageShow"
      title="节点管理"
      size="55%"
    >
      <node-manage />
    </el-drawer>
    <el-drawer
      v-model="editProcessShow"
      :title="processDrawerTitle"
      size="37%"
    >
      <el-form
        label-position="left"
        label-width="100"
        size="large"
      >
        <el-form-item label="流程名称：">
          <el-input
            v-model="editProcessData.process.processName"
            placeholder="请输入审核流程名称"
          />
        </el-form-item>
        <el-form-item label="流程内容：">
          <el-input
            v-model="editProcessData.process.processContent"
            placeholder="请输入审核流程内容"
          />
        </el-form-item>
        <el-form-item label="流程类型：">
          <el-select
            v-model="editProcessData.process.processType"
            placeholder="请选择流程类型"
          >
            <el-option
              v-for="item in processType"
              :key="item.id"
              :label="item.value"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
      </el-form>
      <el-row
        style="margin-top: 20px"
        justify="end"
      >
        <el-col :span="4">
          <el-button
            type="primary"
            icon="Notebook"
            @click="openEffectDialog"
          >效果图</el-button>
        </el-col>
        <el-col :span="4">
          <el-button
            type="primary"
            icon="Plus"
            @click="openProcessNodeDialog()"
          >添加节点</el-button>
        </el-col>
      </el-row>
      <el-row style="margin-top: 20px">
        <el-col :span="24">
          <el-table
            height="470"
            :data="intermediary"
          >
            <el-table-column
              label="节点顺序"
              align="center"
              width="180"
              prop="nodeOrder"
            />
            <el-table-column
              label="节点名称"
              align="center"
              prop="nodeName"
            />
            <el-table-column
              label="节点审核人"
              align="center"
              prop="nodeHead"
            />
            <el-table-column
              label="操作"
              align="center"
            >
              <template #default="scope">
                <el-button
                  icon="Delete"
                  type="primary"
                  text
                  @click="deleteProcessNode(scope.row)"
                >删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>
      <el-row
        style="margin-top: 50px"
        justify="end"
      >
        <el-button
          type="primary"
          size="large"
          @click="editProcess"
        >确认</el-button>
      </el-row>
    </el-drawer>
    <el-dialog
      v-model="processNodeDialog"
      :title="processNodeTitle"
      width="40%"
    >
      <el-form
        size="large"
        label-position="left"
        label-width="90"
        style="margin-top: 20px"
      >
        <el-form-item label="节点名称：">
          <el-select
            v-model="addProcessNodeData.nodeId"
            @change="changeNodeName"
          >
            <el-option
              v-for="item in nodeList"
              :key="item.ID"
              :label="item.nodeName"
              :value="item.ID"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="节点顺序：">
          <el-select v-model="addProcessNodeData.nodeOrder">
            <el-option
              v-for="(item,index) in orderList"
              :key="index"
              :label="item"
              :value="item"
            />
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button
          size="large"
          type="primary"
          @click="addProcessNodes"
        >确认</el-button>
      </template>
    </el-dialog>
    <el-dialog
      v-model="processEffectShow"
      title="流程效果图"
      width="45%"
      align-center
    >
      <el-row
        v-show="intermediary.length > 1"
        style="margin-top: 20px;height: 150px"
      >
        <el-col :span="24">
          <el-steps
            :active="processActive"
            space="20%"
            align-center
          >
            <el-step
              v-for="item in intermediary"
              :key="item.nodeId"
              :title="item.nodeName"
              :description="item.nodeHead"
            />
          </el-steps>
        </el-col>
      </el-row>
    </el-dialog>
  </div>
</template>

<script setup>
import NodeManage from './components/nodeManage.vue'
import { ref, onMounted, reactive } from 'vue'
import { nodeData } from '@/pinia/node/node'
import { getAllNode } from '@/api/node'
import { ElMessage } from 'element-plus'
import { postProcess, getAllProcess } from '@/api/process'
defineOptions({
  name: 'FlowManage'
})
const record = nodeData()
onMounted(() => {
  // 获取节点列表
  record.queryNodeList()
  queryAllNode()
  // 查看流程
  queryAllProcess()
})
// .....................................节点
const nodeManageShow = ref(false)
const openNodeManage = () => {
  nodeManageShow.value = true
}
const nodeList = reactive([])
// 查询所有节点
const queryAllNode = () => {
  getAllNode().then(res => {
    if (res.code === 0) {
      nodeList.length = 0
      nodeList.push(...res.data)
      // console.log('节点列表', nodeList)
    }
  })
}
// .....................................流程
const editProcessShow = ref(false)

const processDrawerTitle = ref('新增流程')
// 添加流程数据
const editProcessData = reactive({
  process: {
    processName: '',
    processContent: '',
    processType: ''
  },
  processNodes: []
})
const openAddDrawer = () => {
  editProcessShow.value = true
}
// 为流程添加节点
const processNodeDialog = ref(false)
const processNodeTitle = ref('新增流程节点')
const orderList = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20]
const processType = [{ id: 1, value: '立项' }, { id: 2, value: '费用' }]
const addProcessNodeData = reactive({
  nodeId: 0,
  nodeOrder: 1,
  nodeName: '',
  nodeHead: ''
})
const openProcessNodeDialog = () => {
  processNodeDialog.value = true
  addProcessNodeData.nodeId = nodeList[0].ID
  addProcessNodeData.nodeName = nodeList[0].nodeName
  console.log(nodeList[0])
  addProcessNodeData.nodeHead = nodeList[0].approver.nickName
}
const intermediary = ref([])
const changeNodeName = (val) => {
  addProcessNodeData.nodeId = val
  nodeList.forEach(item => {
    if (item.ID === val) {
      addProcessNodeData.nodeName = item.nodeName
      addProcessNodeData.nodeHead = item.approver.nickName
    }
  })
}
const addProcessNodes = () => {
  const obj = {}
  Object.assign(obj, addProcessNodeData)
  intermediary.value.push(obj)
  processActive.value = intermediary.value.length
  processNodeDialog.value = false
}
const deleteProcessNode = (row) => {
  intermediary.value.forEach((item, index) => {
    if (row.nodeId === item.nodeId) {
      intermediary.value.splice(index, 1)
    }
  })
}
const editProcess = () => {
  const arr = intermediary.value
  arr.forEach(item => {
    const obj = {
      nodeId: item.nodeId,
      nodeOrder: item.nodeOrder,
    }
    editProcessData.processNodes.push(obj)
  })
  for (const key in editProcessData) {
    if (key === 'processNodes') {
      if (editProcessData[key].length < 2) {
        ElMessage.error('节点的个数不足以构成流程（最少为2）')
        return
      }
    } else {
      if (editProcessData[key] === '') {
        ElMessage.error('请将流程的基本信息填写完整')
        return
      }
    }
  }
  postProcess(editProcessData).then(res => {
    if (res.code === 0) {
      console.log(res.data)
    }
  })
}
// 流程效果图
const processActive = ref(0)

const processEffectShow = ref(false) // 弹窗显示

const openEffectDialog = () => {
  processEffectShow.value = true
} // 打开弹窗

// 查看所有流程
const queryAllProcess = () => {
  getAllProcess().then(res => {
    if (res.code === 0) {
      console.log('流程列表', res.data)
    }
  })
}

</script>

<style scoped>

</style>