diff --git a/src/api/workFlow/workFlow.js b/src/api/workFlow/workFlow.js
new file mode 100644
index 0000000..80501dc
--- /dev/null
+++ b/src/api/workFlow/workFlow.js
@@ -0,0 +1,79 @@
+import { createAPI } from "@/utils/httpRequest.js";
+
+// ========== 流程模板相关API - rqrq ==========
+
+// 查询流程模板列表
+export const searchTemplateList = data => createAPI(`/workFlow/template/list`, 'post', data)
+
+// 获取流程模板详情
+export const getTemplateDetail = data => createAPI(`/workFlow/template/detail`, 'post', data)
+
+// 保存流程模板
+export const saveTemplate = data => createAPI(`/workFlow/template/save`, 'post', data)
+
+// 删除流程模板
+export const deleteTemplate = data => createAPI(`/workFlow/template/delete`, 'post', data)
+
+// 启用流程模板
+export const enableTemplate = data => createAPI(`/workFlow/template/enable`, 'post', data)
+
+// 停用流程模板
+export const disableTemplate = data => createAPI(`/workFlow/template/disable`, 'post', data)
+
+// 复制流程模板
+export const copyTemplate = data => createAPI(`/workFlow/template/copy`, 'post', data)
+
+// 查询用户列表（选择审批人）
+export const searchUserList = data => createAPI(`/workFlow/template/searchUserList`, 'post', data)
+
+// 查询部门列表 - rqrq
+export const searchDepartmentList = data => createAPI(`/workFlow/template/searchDepartmentList`, 'post', data)
+
+// ========== 审批任务相关API - rqrq ==========
+
+// 查询待办任务列表（所有任务）
+export const searchPendingTaskList = data => createAPI(`/workFlow/task/allPendingList`, 'post', data)
+
+// 查询已办任务列表（所有任务）
+export const searchCompletedTaskList = data => createAPI(`/workFlow/task/allCompletedList`, 'post', data)
+
+// ========== 流程实例相关API - rqrq ==========
+
+// 查询流程实例列表
+export const searchInstanceList = data => createAPI(`/workFlow/instance/list`, 'post', data)
+
+// 查询节点实例列表
+export const searchNodeInstanceList = data => createAPI(`/workFlow/instance/nodeList`, 'post', data)
+
+// 创建流程实例（测试用）
+export const createFlowInstance = data => createAPI(`/workFlow/instance/create`, 'post', data)
+
+// 审批节点实例
+export const approveNodeInstance = data => createAPI(`/workFlow/instance/approve`, 'post', data)
+
+// 获取流程预览
+export const getFlowPreview = data => createAPI(`/workFlow/instance/flowPreview`, 'post', data)
+
+// 重新审批流程实例 - rqrq
+export const restartFlowInstance = data => createAPI(`/workFlow/instance/restart`, 'post', data)
+
+// 获取任务详情
+export const getTaskDetail = data => createAPI(`/workFlow/task/detail`, 'post', data)
+
+// 查询审批记录
+export const getApprovalHistory = data => createAPI(`/workFlow/task/history`, 'post', data)
+
+// 审批通过
+export const approveTask = data => createAPI(`/workFlow/task/approve`, 'post', data)
+
+// 审批驳回
+export const rejectTask = data => createAPI(`/workFlow/task/reject`, 'post', data)
+
+// 启动审批流程
+export const startFlow = data => createAPI(`/workFlow/task/startFlow`, 'post', data)
+
+// 获取待办任务数量
+export const getPendingTaskCount = data => createAPI(`/workFlow/task/pendingCount`, 'post', data)
+
+// 撤回审批
+export const withdrawTask = data => createAPI(`/workFlow/task/withdraw`, 'post', data)
diff --git a/src/views/modules/srmSupplier/supplierList.vue b/src/views/modules/srmSupplier/supplierList.vue
index 57e6c58..ad8530c 100644
--- a/src/views/modules/srmSupplier/supplierList.vue
+++ b/src/views/modules/srmSupplier/supplierList.vue
@@ -1107,7 +1107,7 @@ export default {
       this.$nextTick(() => {
         let strVal = ''
         if (val === 1100) {
-          strVal = this.searchData.supplierNo
+          strVal = this.searchData.supplierNo?this.searchData.supplierNo:''
         }
         if (this.tagNo === 521) {
           strVal = this.currentSupplier.supplierGroup1
diff --git a/src/views/modules/workFlow/flowInstanceList.vue b/src/views/modules/workFlow/flowInstanceList.vue
new file mode 100644
index 0000000..e36da6c
--- /dev/null
+++ b/src/views/modules/workFlow/flowInstanceList.vue
@@ -0,0 +1,519 @@
+<template>
+  <div class="customer-css">
+    <!-- 查询区域 - rqrq -->
+    <el-form :inline="true" label-position="top" label-width="100px" style="margin-top: 0px;">
+      <el-row>
+        <el-col :span="24">
+          <el-form-item label="单据号:">
+            <el-input v-model="searchData.applyNo" style="width: 150px"></el-input>
+          </el-form-item>
+          <el-form-item label="单据类型:">
+            <el-select v-model="searchData.orderType" style="width: 130px" clearable>
+              <el-option label="全部" value=""></el-option>
+              <el-option label="产品资料" value="产品资料"></el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="流程状态:">
+            <el-select v-model="searchData.status" style="width: 130px" clearable>
+              <el-option label="全部" value=""></el-option>
+              <el-option label="运行中" value="RUNNING"></el-option>
+              <el-option label="已完成" value="COMPLETED"></el-option>
+              <el-option label="已终止" value="TERMINATED"></el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label=" ">
+            <el-button class="customer-bun-min" type="primary" @click="getInstanceList">查询</el-button>
+            <el-button type="primary" @click="openAddDialog">新增测试</el-button>
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+
+    <!-- 上表：流程实例列表 -->
+    <div style="font-weight: bold; margin-bottom: 5px;">流程实例列表</div>
+    <el-table
+      :height="height1"
+      :data="instanceList"
+      border
+      ref="instanceTable"
+      highlight-current-row
+      @row-click="selectInstance"
+      v-loading="instanceLoading"
+      style="width: 100%;">
+      <el-table-column prop="applyNo" label="单据号" min-width="150" header-align="center" align="center"></el-table-column>
+      <el-table-column prop="orderType" label="单据类型" min-width="100" header-align="center" align="center"></el-table-column>
+      <el-table-column prop="flowName" label="流程名称" min-width="150" header-align="center" align="left"></el-table-column>
+      <el-table-column prop="currentNodeName" label="当前节点" min-width="120" header-align="center" align="center"></el-table-column>
+      <el-table-column prop="status" label="状态" min-width="80" header-align="center" align="center">
+        <template slot-scope="scope">
+          <span :style="{ color: getStatusColor(scope.row.status) }">{{ getStatusText(scope.row.status) }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column prop="startTime" label="开始时间" min-width="150" header-align="center" align="center"></el-table-column>
+      <el-table-column prop="applicant" label="申请人" min-width="100" header-align="center" align="center"></el-table-column>
+      <el-table-column fixed="right" header-align="center" align="center" width="100" label="操作">
+        <template slot-scope="scope">
+          <a type="text" v-if="scope.row.status === 'COMPLETED' || scope.row.status === 'TERMINATED'" size="small" @click="handleRestart(scope.row)">重新审批</a>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <el-pagination
+      style="margin-top: 5px"
+      @size-change="instanceSizeChange"
+      @current-change="instancePageChange"
+      :current-page="instancePageIndex"
+      :page-sizes="[20, 50, 100, 200]"
+      :page-size="instancePageSize"
+      :total="instanceTotal"
+      layout="total, sizes, prev, pager, next, jumper">
+    </el-pagination>
+
+    <!-- 下表：节点实例列表 -->
+    <div style="font-weight: bold; margin: 10px 0 5px 0;">节点审批记录</div>
+    <el-table
+      :height="height2"
+      :data="nodeInstanceList"
+      border
+      ref="nodeTable"
+      highlight-current-row
+      v-loading="nodeLoading"
+      style="width: 100%;">
+      <el-table-column prop="nodeOrder" label="序号" width="60" header-align="center" align="center"></el-table-column>
+      <el-table-column prop="nodeName" label="节点名称" min-width="100" header-align="center" align="center"></el-table-column>
+      <el-table-column prop="departmentName" label="审批部门" min-width="100" header-align="center" align="center">
+        <template slot-scope="scope">{{ scope.row.departmentName || '-' }}</template>
+      </el-table-column>
+      <el-table-column prop="assigneeName" label="审批人" min-width="80" header-align="center" align="center"></el-table-column>
+      <el-table-column prop="attemptNo" label="次数" width="60" header-align="center" align="center"></el-table-column>
+      <el-table-column prop="approveType" label="审批类型" min-width="100" header-align="center" align="center">
+        <template slot-scope="scope">
+          <span v-if="scope.row.approveType === 'SINGLE'">单人审批</span>
+          <span v-else-if="scope.row.approveType === 'ALL'">会签</span>
+          <span v-else-if="scope.row.approveType === 'ANY'">或签</span>
+          <span v-else>{{ scope.row.approveType }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column prop="status" label="状态" min-width="80" header-align="center" align="center">
+        <template slot-scope="scope">
+          <span :style="{ color: getNodeStatusColor(scope.row.status) }">{{ getNodeStatusText(scope.row.status) }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column prop="comment" label="审批意见" min-width="150" header-align="center" align="left" show-overflow-tooltip></el-table-column>
+      <el-table-column prop="completeTime" label="完成时间" min-width="150" header-align="center" align="center">
+        <template slot-scope="scope">{{ scope.row.completeTime || '-' }}</template>
+      </el-table-column>
+      <el-table-column fixed="right" header-align="center" align="center" width="100" label="操作">
+        <template slot-scope="scope">
+          <a type="text" size="small" @click="openApproveDialog(scope.row)">审批</a>
+<!--          <el-button v-if="scope.row.status === 'PENDING'" size="mini" type="text" @click="openApproveDialog(scope.row)">审批</el-button>-->
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <!-- 新增测试对话框 - rqrq -->
+    <el-dialog
+      title="新增审批流程（测试）"
+      :visible.sync="addDialogVisible"
+      width="500px"
+      :close-on-click-modal="false"
+      v-drag>
+      <el-form :model="addFormData" :rules="addFormRules" ref="addFormRef" label-position="top">
+        <el-form-item label="工厂编码" prop="site">
+          <el-input v-model="addFormData.site" placeholder="请输入工厂编码"></el-input>
+        </el-form-item>
+        <el-form-item label="单据号" prop="applyNo">
+          <el-input v-model="addFormData.applyNo" placeholder="请输入单据号"></el-input>
+        </el-form-item>
+        <el-form-item label="单据类型" prop="orderType">
+          <el-select v-model="addFormData.orderType" style="width: 100%" placeholder="请选择单据类型">
+            <el-option label="产品资料" value="产品资料"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="流程编码" prop="flowCode">
+          <el-input v-model="addFormData.flowCode" placeholder="请输入流程编码"></el-input>
+        </el-form-item>
+      </el-form>
+      <span slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="submitAddForm" :loading="addLoading">{{ addLoading ? '创建中...' : '创建' }}</el-button>
+        <el-button @click="addDialogVisible = false" :disabled="addLoading">取消</el-button>
+      </span>
+    </el-dialog>
+
+    <!-- 审批对话框 - rqrq -->
+    <el-dialog
+      title="审批"
+      :visible.sync="approveDialogVisible"
+      width="550px"
+      :close-on-click-modal="false"
+      v-drag>
+      <el-form :model="approveData" label-position="top">
+        <el-row :gutter="20">
+          <el-col :span="12">
+            <el-form-item label="单据号">
+              <el-input v-model="approveData.applyNo" disabled></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="当前节点">
+              <el-input v-model="approveData.nodeName" disabled></el-input>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="20">
+          <el-col :span="12">
+            <el-form-item label="审批部门">
+              <el-input v-model="approveData.departmentName" disabled></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="审批人">
+              <el-input v-model="approveData.assigneeName" disabled></el-input>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-form-item label="审批意见">
+          <el-input type="textarea" v-model="approveData.comment" :rows="3" placeholder="请输入审批意见"></el-input>
+        </el-form-item>
+      </el-form>
+      <el-footer style="height:40px;margin-top: 60px;text-align:center">
+
+          <el-button type="success" @click="submitApprove('APPROVED')" :loading="approveLoading">同意</el-button>
+        <el-button type="danger" @click="submitApprove('REJECTED')" :loading="approveLoading">驳回</el-button>
+        <el-button type="info" @click="openFlowPreview">流程预览</el-button>
+        <el-button @click="approveDialogVisible = false" :disabled="approveLoading">取消</el-button>
+
+      </el-footer>
+    </el-dialog>
+
+    <!-- 流程预览对话框 - rqrq -->
+    <el-dialog
+      title="流程预览"
+      :visible.sync="previewDialogVisible"
+      width="700px"
+      :close-on-click-modal="false"
+      append-to-body
+      v-drag>
+      <div style="margin-bottom: 15px;">
+        <span style="font-weight: bold;">流程名称：</span>{{ previewData.flowName }}
+        <span style="margin-left: 20px; font-weight: bold;">流程编码：</span>{{ previewData.flowCode }}
+        <span style="margin-left: 20px; font-weight: bold;">版本：</span>{{ previewData.flowVersion }}
+      </div>
+      <el-table :data="previewData.nodeList" border style="width: 100%;">
+        <el-table-column prop="nodeOrder" label="顺序" width="60" header-align="center" align="center">
+          <template slot-scope="scope">{{ scope.$index + 1 }}</template>
+        </el-table-column>
+        <el-table-column prop="nodeCode" label="节点编码" min-width="100" header-align="center" align="center"></el-table-column>
+        <el-table-column prop="nodeName" label="节点名称" min-width="120" header-align="center" align="center"></el-table-column>
+        <el-table-column prop="nodeType" label="节点类型" min-width="80" header-align="center" align="center">
+          <template slot-scope="scope">
+            <span v-if="scope.row.nodeType === 'START'" style="color: #67C23A">开始</span>
+            <span v-else-if="scope.row.nodeType === 'END'" style="color: #F56C6C">结束</span>
+            <span v-else style="color: #409EFF">审批</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="approveType" label="审批类型" min-width="100" header-align="center" align="center">
+          <template slot-scope="scope">
+            <span v-if="scope.row.approveType === 'SINGLE'">单人审批</span>
+            <span v-else-if="scope.row.approveType === 'ALL'">会签</span>
+            <span v-else-if="scope.row.approveType === 'ANY'">或签</span>
+            <span v-else>-</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="departmentName" label="审批部门" min-width="120" header-align="center" align="center">
+          <template slot-scope="scope">{{ scope.row.departmentName || '-' }}</template>
+        </el-table-column>
+        <el-table-column prop="approverNames" label="审批人" min-width="150" header-align="center" align="left">
+          <template slot-scope="scope">{{ scope.row.approverNames || '-' }}</template>
+        </el-table-column>
+      </el-table>
+      <span slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="previewDialogVisible = false">关闭</el-button>
+      </span>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import {
+  searchInstanceList,
+  searchNodeInstanceList,
+  createFlowInstance,
+  approveNodeInstance,
+  getFlowPreview,
+  restartFlowInstance
+} from '@/api/workFlow/workFlow.js'
+
+export default {
+  data() {
+    return {
+      height1: 200,
+      height2: 200,
+      // 流程实例
+      instanceLoading: false,
+      instanceList: [],
+      instancePageIndex: 1,
+      instancePageSize: 20,
+      instanceTotal: 0,
+      currentInstance: null,
+      searchData: {
+        site: this.$store.state.user.site,
+        applyNo: '',
+        orderType: '',
+        status: ''
+      },
+      // 节点实例
+      nodeLoading: false,
+      nodeInstanceList: [],
+      // 当前登录用户
+      currentUser: this.$store.state.user.username,
+      // 新增对话框
+      addDialogVisible: false,
+      addLoading: false,
+      addFormData: {
+        site: this.$store.state.user.site,
+        applyNo: '',
+        orderType: '产品资料',
+        flowCode: ''
+      },
+      addFormRules: {
+        site: [{ required: true, message: '请输入工厂编码', trigger: 'blur' }],
+        applyNo: [{ required: true, message: '请输入单据号', trigger: 'blur' }],
+        orderType: [{ required: true, message: '请选择单据类型', trigger: 'change' }],
+        flowCode: [{ required: true, message: '请输入流程编码', trigger: 'blur' }]
+      },
+      // 审批对话框
+      approveDialogVisible: false,
+      approveLoading: false,
+      approveData: {
+        applyNo: '',
+        nodeCode: '',
+        nodeName: '',
+        departmentName: '',  // 审批部门 - rqrq
+        assigneeName: '',
+        site: '',
+        orderType: '',
+        comment: '',
+        flowCode: '',
+        flowVersion: null
+      },
+      // 流程预览
+      previewDialogVisible: false,
+      previewData: {
+        flowCode: '',
+        flowName: '',
+        flowVersion: '',
+        nodeList: []
+      }
+    }
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.height1 = (window.innerHeight - 250) / 2
+      this.height2 = (window.innerHeight - 250) / 2
+    })
+    this.getInstanceList()
+  },
+  methods: {
+    // 获取流程实例列表
+    getInstanceList() {
+      this.instanceLoading = true
+      const params = {
+        ...this.searchData,
+        limit: this.instancePageSize,
+        page: this.instancePageIndex
+      }
+      searchInstanceList(params).then(({ data }) => {
+        if (data && data.code === 0) {
+          this.instanceList = data.page.list
+          this.instanceTotal = data.page.totalCount
+        }
+        this.instanceLoading = false
+      })
+    },
+    instanceSizeChange(val) {
+      this.instancePageSize = val
+      this.instancePageIndex = 1
+      this.getInstanceList()
+    },
+    instancePageChange(val) {
+      this.instancePageIndex = val
+      this.getInstanceList()
+    },
+    // 选中流程实例
+    selectInstance(row) {
+      this.currentInstance = row
+      this.getNodeInstanceList()
+    },
+    // 获取节点实例列表
+    getNodeInstanceList() {
+      if (!this.currentInstance) {
+        this.nodeInstanceList = []
+        return
+      }
+      this.nodeLoading = true
+      searchNodeInstanceList({
+        applyNo: this.currentInstance.applyNo,
+        site: this.currentInstance.site,
+        orderType: this.currentInstance.orderType
+      }).then(({ data }) => {
+        if (data && data.code === 0) {
+          this.nodeInstanceList = data.rows
+        }
+        this.nodeLoading = false
+      })
+    },
+    // 状态颜色
+    getStatusColor(status) {
+      switch (status) {
+        case 'RUNNING': return '#409EFF'
+        case 'COMPLETED': return '#67C23A'
+        case 'TERMINATED': return '#F56C6C'
+        default: return '#909399'
+      }
+    },
+    getStatusText(status) {
+      switch (status) {
+        case 'RUNNING': return '运行中'
+        case 'COMPLETED': return '已完成'
+        case 'TERMINATED': return '已终止'
+        default: return status
+      }
+    },
+    getNodeStatusColor(status) {
+      switch (status) {
+        case 'PENDING': return '#E6A23C'
+        case 'APPROVED': return '#67C23A'
+        case 'REJECTED': return '#F56C6C'
+        case 'SKIPPED': return '#909399'
+        default: return '#909399'
+      }
+    },
+    getNodeStatusText(status) {
+      switch (status) {
+        case 'PENDING': return '待审批'
+        case 'APPROVED': return '已通过'
+        case 'REJECTED': return '已驳回'
+        case 'SKIPPED': return '已跳过'
+        default: return status
+      }
+    },
+    // 打开新增对话框
+    openAddDialog() {
+      this.addFormData = {
+        site: this.$store.state.user.site,
+        applyNo: '',
+        orderType: '产品资料',
+        flowCode: ''
+      }
+      this.addDialogVisible = true
+    },
+    // 提交新增
+    submitAddForm() {
+      this.$refs.addFormRef.validate((valid) => {
+        if (valid) {
+          this.addLoading = true
+          createFlowInstance(this.addFormData).then(({ data }) => {
+            if (data && data.code === 0) {
+              this.$message.success('流程实例创建成功')
+              this.addDialogVisible = false
+              this.getInstanceList()
+            } else {
+              this.$message.error(data.msg || '创建失败')
+            }
+          }).finally(() => {
+            this.addLoading = false
+          })
+        }
+      })
+    },
+    // 打开审批对话框
+    openApproveDialog(row) {
+      this.approveData = {
+        applyNo: this.currentInstance.applyNo,
+        nodeCode: row.nodeCode,
+        nodeName: row.nodeName,
+        departmentName: row.departmentName || '',  // 审批部门 - rqrq
+        assigneeName: row.assigneeName,
+        site: this.currentInstance.site,
+        orderType: this.currentInstance.orderType,
+        comment: '',
+        flowCode: this.currentInstance.flowCode,
+        flowVersion: this.currentInstance.flowVersion
+      }
+      this.approveDialogVisible = true
+    },
+    // 提交审批
+    submitApprove(action) {
+      if (action === 'REJECTED' && !this.approveData.comment) {
+        this.$message.warning('驳回时必须填写审批意见')
+        return
+      }
+      this.approveLoading = true
+      approveNodeInstance({
+        applyNo: this.approveData.applyNo,
+        nodeCode: this.approveData.nodeCode,
+        site: this.approveData.site,
+        orderType: this.approveData.orderType,
+        action: action,
+        comment: this.approveData.comment
+      }).then(({ data }) => {
+        if (data && data.code === 0) {
+          this.$message.success(action === 'APPROVED' ? '审批通过成功' : '驳回成功')
+          this.approveDialogVisible = false
+          this.getInstanceList()
+          this.getNodeInstanceList()
+        } else {
+          this.$message.error(data.msg || '操作失败')
+        }
+      }).finally(() => {
+        this.approveLoading = false
+      })
+    },
+    // 流程预览
+    openFlowPreview() {
+      getFlowPreview({
+        flowCode: this.approveData.flowCode,
+        flowVersion: this.approveData.flowVersion,
+        site: this.approveData.site
+      }).then(({ data }) => {
+        if (data && data.code === 0) {
+          this.previewData = data.row
+          this.previewDialogVisible = true
+        } else {
+          this.$message.error(data.msg || '获取流程信息失败')
+        }
+      })
+    },
+    // 重新审批 - rqrq
+    handleRestart(row) {
+      this.$confirm('确定要重新发起审批流程吗？', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        restartFlowInstance({
+          applyNo: row.applyNo,
+          site: row.site,
+          orderType: row.orderType
+        }).then(({ data }) => {
+          if (data && data.code === 0) {
+            this.$message.success('重新审批成功')
+            this.getInstanceList()
+            this.nodeInstanceList = []
+            this.currentInstance = null
+          } else {
+            this.$message.error(data.msg || '操作失败')
+          }
+        })
+      }).catch(() => {})
+    }
+  }
+}
+</script>
+
+<style scoped>
+/deep/ .el-dialog__body {
+  padding: 10px 20px;
+}
+</style>
diff --git a/src/views/modules/workFlow/flowTaskList.vue b/src/views/modules/workFlow/flowTaskList.vue
new file mode 100644
index 0000000..7ff2fc9
--- /dev/null
+++ b/src/views/modules/workFlow/flowTaskList.vue
@@ -0,0 +1,472 @@
+<template>
+  <div class="customer-css">
+    <!-- Tab切换 - rqrq -->
+    <el-tabs v-model="activeTab" @tab-click="handleTabClick" class="customer-tab" type="border-card">
+      <!-- 待办任务 -->
+      <el-tab-pane label="待办任务" name="pending">
+        <el-form :inline="true" label-position="top" label-width="100px" style="margin-top: 0px;">
+          <el-row>
+            <el-col :span="24">
+              <el-form-item label="单据号:">
+                <el-input v-model="searchData.applyNo" style="width: 150px"></el-input>
+              </el-form-item>
+              <el-form-item label="单据类型:">
+                <el-select v-model="searchData.orderType" style="width: 130px" clearable>
+                  <el-option label="全部" value=""></el-option>
+                  <el-option label="产品资料" value="产品资料"></el-option>
+
+                </el-select>
+              </el-form-item>
+              <el-form-item label=" ">
+                <el-button class="customer-bun-min" type="primary" @click="getPendingList">查询</el-button>
+              </el-form-item>
+            </el-col>
+          </el-row>
+        </el-form>
+
+        <el-table
+          :height="height"
+          :data="pendingList"
+          border
+          ref="pendingTable"
+          highlight-current-row
+          v-loading="pendingLoading"
+          style="margin-top: 0px; width: 100%;">
+          <el-table-column prop="applyNo" label="单据号" min-width="150" header-align="center" align="center"></el-table-column>
+          <el-table-column prop="orderType" label="单据类型" min-width="100" header-align="center" align="center">
+            <template slot-scope="scope">
+              <span >{{ scope.row.orderType }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column prop="flowName" label="流程名称" min-width="150" header-align="center" align="left"></el-table-column>
+          <el-table-column prop="nodeName" label="当前节点" min-width="120" header-align="center" align="center"></el-table-column>
+          <el-table-column prop="approveType" label="审批类型" min-width="100" header-align="center" align="center">
+            <template slot-scope="scope">
+              <span v-if="scope.row.approveType === 'SINGLE'">单人审批</span>
+              <span v-else-if="scope.row.approveType === 'ALL'">会签</span>
+              <span v-else-if="scope.row.approveType === 'ANY'">或签</span>
+              <span v-else>{{ scope.row.approveType }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column prop="assigneeName" label="审批人" min-width="100" header-align="center" align="center"></el-table-column>
+          <el-table-column prop="createdTime" label="接收时间" min-width="150" header-align="center" align="center"></el-table-column>
+          <el-table-column fixed="right" header-align="center" align="center" width="180" label="操作">
+            <template slot-scope="scope">
+              <!-- 只有当前用户是审批人才能操作 - rqrq -->
+              <template v-if="scope.row.assignee === currentUser">
+                <el-link style="cursor: pointer; color: #67C23A" @click="approveTask(scope.row)">同意 |</el-link>
+                <el-link style="cursor: pointer; color: #F56C6C" @click="rejectTask(scope.row)">驳回 |</el-link>
+              </template>
+              <el-link style="cursor: pointer" @click="viewHistory(scope.row)">审批记录</el-link>
+            </template>
+          </el-table-column>
+        </el-table>
+
+        <el-pagination
+          style="margin-top: 0px"
+          @size-change="pendingSizeChange"
+          @current-change="pendingPageChange"
+          :current-page="pendingPageIndex"
+          :page-sizes="[20, 50, 100, 200]"
+          :page-size="pendingPageSize"
+          :total="pendingTotal"
+          layout="total, sizes, prev, pager, next, jumper">
+        </el-pagination>
+      </el-tab-pane>
+
+      <!-- 已办任务 -->
+      <el-tab-pane label="已办任务" name="completed">
+        <el-form :inline="true" label-position="top" label-width="100px" style="margin-top: 0px;">
+          <el-row>
+            <el-col :span="24">
+              <el-form-item label="单据号:">
+                <el-input v-model="completedSearchData.applyNo" style="width: 150px"></el-input>
+              </el-form-item>
+              <el-form-item label="单据类型:">
+                <el-select v-model="completedSearchData.orderType" style="width: 130px" clearable>
+                  <el-option label="全部" value=""></el-option>
+                  <el-option label="产品资料" value="产品资料"></el-option>
+
+                </el-select>
+              </el-form-item>
+              <el-form-item label="审批结果:">
+                <el-select v-model="completedSearchData.status" style="width: 130px" clearable>
+                  <el-option label="全部" value=""></el-option>
+                  <el-option label="已同意" value="APPROVED"></el-option>
+                  <el-option label="已驳回" value="REJECTED"></el-option>
+                </el-select>
+              </el-form-item>
+              <el-form-item label=" ">
+                <el-button class="customer-bun-min" type="primary" @click="getCompletedList">查询</el-button>
+              </el-form-item>
+            </el-col>
+          </el-row>
+        </el-form>
+
+        <el-table
+          :height="height"
+          :data="completedList"
+          border
+          ref="completedTable"
+          highlight-current-row
+          v-loading="completedLoading"
+          style="margin-top: 0px; width: 100%;">
+          <el-table-column prop="applyNo" label="单据号" min-width="150" header-align="center" align="center"></el-table-column>
+          <el-table-column prop="orderType" label="单据类型" min-width="100" header-align="center" align="center">
+            <template slot-scope="scope">
+
+              <span>{{ scope.row.orderType }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column prop="flowName" label="流程名称" min-width="150" header-align="center" align="left"></el-table-column>
+          <el-table-column prop="nodeName" label="审批节点" min-width="120" header-align="center" align="center"></el-table-column>
+          <el-table-column prop="assigneeName" label="审批人" min-width="100" header-align="center" align="center"></el-table-column>
+          <el-table-column prop="statusDesc" label="审批结果" min-width="100" header-align="center" align="center">
+            <template slot-scope="scope">
+              <span :style="{ color: scope.row.status === 'APPROVED' ? '#67C23A' : '#F56C6C' }">
+                {{ scope.row.statusDesc }}
+              </span>
+            </template>
+          </el-table-column>
+          <el-table-column prop="comment" label="审批意见" min-width="180" header-align="center" align="left" show-overflow-tooltip></el-table-column>
+          <el-table-column prop="actionTime" label="审批时间" min-width="150" header-align="center" align="center"></el-table-column>
+          <el-table-column fixed="right" header-align="center" align="center" width="100" label="操作">
+            <template slot-scope="scope">
+              <el-link style="cursor: pointer" @click="viewHistory(scope.row)">审批记录</el-link>
+            </template>
+          </el-table-column>
+        </el-table>
+
+        <el-pagination
+          style="margin-top: 0px"
+          @size-change="completedSizeChange"
+          @current-change="completedPageChange"
+          :current-page="completedPageIndex"
+          :page-sizes="[20, 50, 100, 200]"
+          :page-size="completedPageSize"
+          :total="completedTotal"
+          layout="total, sizes, prev, pager, next, jumper">
+        </el-pagination>
+      </el-tab-pane>
+    </el-tabs>
+
+    <!-- 审批对话框 -->
+    <el-dialog
+      :title="approvalTitle"
+      :visible.sync="approvalDialogVisible"
+      width="500px"
+      :close-on-click-modal="false"
+      v-drag>
+      <el-form :model="approvalData" label-position="top">
+        <el-form-item label="单据号">
+          <el-input v-model="approvalData.applyNo" disabled></el-input>
+        </el-form-item>
+        <el-form-item label="当前节点">
+          <el-input v-model="approvalData.nodeName" disabled></el-input>
+        </el-form-item>
+        <el-form-item label="审批意见" :required="approvalAction === 'reject'">
+          <el-input type="textarea" v-model="approvalData.comment" :rows="3" placeholder="请输入审批意见"></el-input>
+        </el-form-item>
+      </el-form>
+      <span slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="submitApproval" :loading="approvalLoading">{{ approvalLoading ? '提交中...' : '确定' }}</el-button>
+        <el-button type="info" @click="openFlowPreview">流程预览</el-button>
+        <el-button @click="approvalDialogVisible = false" :disabled="approvalLoading">取消</el-button>
+      </span>
+    </el-dialog>
+
+    <!-- 流程预览对话框 - rqrq -->
+    <el-dialog
+      title="流程预览"
+      :visible.sync="previewDialogVisible"
+      width="700px"
+      :close-on-click-modal="false"
+      append-to-body
+      v-drag>
+      <div style="margin-bottom: 15px;">
+        <span style="font-weight: bold;">流程名称：</span>{{ previewData.flowName }}
+        <span style="margin-left: 20px; font-weight: bold;">流程编码：</span>{{ previewData.flowCode }}
+        <span style="margin-left: 20px; font-weight: bold;">版本：</span>{{ previewData.flowVersion }}
+      </div>
+      <el-table :data="previewData.nodeList" border style="width: 100%;">
+        <el-table-column prop="nodeOrder" label="顺序" width="60" header-align="center" align="center">
+          <template slot-scope="scope">{{ scope.$index + 1 }}</template>
+        </el-table-column>
+        <el-table-column prop="nodeCode" label="节点编码" min-width="100" header-align="center" align="center"></el-table-column>
+        <el-table-column prop="nodeName" label="节点名称" min-width="120" header-align="center" align="center"></el-table-column>
+        <el-table-column prop="nodeType" label="节点类型" min-width="80" header-align="center" align="center">
+          <template slot-scope="scope">
+            <span v-if="scope.row.nodeType === 'START'" style="color: #67C23A">开始</span>
+            <span v-else-if="scope.row.nodeType === 'END'" style="color: #F56C6C">结束</span>
+            <span v-else style="color: #409EFF">审批</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="approveType" label="审批类型" min-width="100" header-align="center" align="center">
+          <template slot-scope="scope">
+            <span v-if="scope.row.approveType === 'SINGLE'">单人审批</span>
+            <span v-else-if="scope.row.approveType === 'ALL'">会签</span>
+            <span v-else-if="scope.row.approveType === 'ANY'">或签</span>
+            <span v-else>-</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="departmentName" label="审批部门" min-width="120" header-align="center" align="center">
+          <template slot-scope="scope">{{ scope.row.departmentName || '-' }}</template>
+        </el-table-column>
+        <el-table-column prop="approverNames" label="审批人" min-width="150" header-align="center" align="left">
+          <template slot-scope="scope">{{ scope.row.approverNames || '-' }}</template>
+        </el-table-column>
+      </el-table>
+      <span slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="previewDialogVisible = false">关闭</el-button>
+      </span>
+    </el-dialog>
+
+    <!-- 审批记录对话框 -->
+    <el-dialog
+      title="审批记录"
+      :visible.sync="historyDialogVisible"
+      width="800px"
+      :close-on-click-modal="false"
+      v-drag>
+      <el-table :data="historyList" border style="width: 100%;">
+        <el-table-column prop="nodeName" label="节点" min-width="100" header-align="center" align="center"></el-table-column>
+        <el-table-column prop="assigneeName" label="审批人" min-width="100" header-align="center" align="center"></el-table-column>
+        <el-table-column prop="statusDesc" label="结果" min-width="80" header-align="center" align="center">
+          <template slot-scope="scope">
+            <span :style="{ color: scope.row.status === 'APPROVED' ? '#67C23A' : (scope.row.status === 'REJECTED' ? '#F56C6C' : '#909399') }">
+              {{ scope.row.statusDesc }}
+            </span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="comment" label="审批意见" min-width="180" header-align="center" align="left" show-overflow-tooltip></el-table-column>
+        <el-table-column prop="actionTime" label="审批时间" min-width="150" header-align="center" align="center">
+          <template slot-scope="scope">
+            {{ scope.row.actionTime || '-' }}
+          </template>
+        </el-table-column>
+      </el-table>
+      <span slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="historyDialogVisible = false">关闭</el-button>
+      </span>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import {
+  searchPendingTaskList,
+  searchCompletedTaskList,
+  approveTask,
+  rejectTask,
+  getApprovalHistory,
+  getFlowPreview
+} from '@/api/workFlow/workFlow.js'
+
+export default {
+  data() {
+    return {
+      height: 400,
+      activeTab: 'pending',
+      // 待办任务
+      pendingLoading: false,
+      pendingList: [],
+      pendingPageIndex: 1,
+      pendingPageSize: 20,
+      pendingTotal: 0,
+      searchData: {
+        site: this.$store.state.user.site,
+        applyNo: '',
+        orderType: ''
+      },
+      // 已办任务
+      completedLoading: false,
+      completedList: [],
+      completedPageIndex: 1,
+      completedPageSize: 20,
+      completedTotal: 0,
+      completedSearchData: {
+        site: this.$store.state.user.site,
+        applyNo: '',
+        orderType: '',
+        status: ''
+      },
+      // 审批对话框
+      approvalDialogVisible: false,
+      approvalTitle: '审批',
+      approvalAction: '',
+      approvalLoading: false,
+      approvalData: {
+        id: null,
+        applyNo: '',
+        nodeName: '',
+        comment: '',
+        flowCode: '',
+        flowVersion: null,
+        site: ''
+      },
+      // 审批记录
+      historyDialogVisible: false,
+      historyList: [],
+      // 当前登录用户 - rqrq
+      currentUser: this.$store.state.user.username,
+      // 流程预览 - rqrq
+      previewDialogVisible: false,
+      previewData: {
+        flowCode: '',
+        flowName: '',
+        flowVersion: '',
+        nodeList: []
+      }
+    }
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.height = (window.innerHeight - 300)
+    } )
+    this.getPendingList()
+  },
+  methods: {
+    handleTabClick(tab) {
+      if (tab.name === 'pending') {
+        this.getPendingList()
+      } else {
+        this.getCompletedList()
+      }
+    },
+    // 待办任务
+    getPendingList() {
+      this.pendingLoading = true
+      const params = {
+        ...this.searchData,
+        limit: this.pendingPageSize,
+        page: this.pendingPageIndex
+      }
+      searchPendingTaskList(params).then(({ data }) => {
+        if (data && data.code === 0) {
+          this.pendingList = data.page.list
+          this.pendingTotal = data.page.totalCount
+        }
+        this.pendingLoading = false
+      })
+    },
+    pendingSizeChange(val) {
+      this.pendingPageSize = val
+      this.pendingPageIndex = 1
+      this.getPendingList()
+    },
+    pendingPageChange(val) {
+      this.pendingPageIndex = val
+      this.getPendingList()
+    },
+    // 已办任务
+    getCompletedList() {
+      this.completedLoading = true
+      const params = {
+        ...this.completedSearchData,
+        limit: this.completedPageSize,
+        page: this.completedPageIndex
+      }
+      searchCompletedTaskList(params).then(({ data }) => {
+        if (data && data.code === 0) {
+          this.completedList = data.page.list
+          this.completedTotal = data.page.totalCount
+        }
+        this.completedLoading = false
+      })
+    },
+    completedSizeChange(val) {
+      this.completedPageSize = val
+      this.completedPageIndex = 1
+      this.getCompletedList()
+    },
+    completedPageChange(val) {
+      this.completedPageIndex = val
+      this.getCompletedList()
+    },
+    // 审批通过
+    approveTask(row) {
+      this.approvalTitle = '审批通过'
+      this.approvalAction = 'approve'
+      this.approvalData = {
+        id: row.id,
+        applyNo: row.applyNo,
+        nodeName: row.nodeName,
+        comment: '',
+        flowCode: row.flowCode,
+        flowVersion: row.flowVersion,
+        site: row.site
+      }
+      this.approvalDialogVisible = true
+    },
+    // 审批驳回
+    rejectTask(row) {
+      this.approvalTitle = '审批驳回'
+      this.approvalAction = 'reject'
+      this.approvalData = {
+        id: row.id,
+        applyNo: row.applyNo,
+        nodeName: row.nodeName,
+        comment: '',
+        flowCode: row.flowCode,
+        flowVersion: row.flowVersion,
+        site: row.site
+      }
+      this.approvalDialogVisible = true
+    },
+    // 提交审批
+    submitApproval() {
+      if (this.approvalAction === 'reject' && !this.approvalData.comment) {
+        this.$message.warning('驳回时必须填写审批意见')
+        return
+      }
+      this.approvalLoading = true
+      const action = this.approvalAction === 'approve' ? approveTask : rejectTask
+      action(this.approvalData).then(({ data }) => {
+        if (data && data.code === 0) {
+          this.$message.success(this.approvalAction === 'approve' ? '审批通过成功' : '驳回成功')
+          this.approvalDialogVisible = false
+          this.getPendingList()
+        } else {
+          this.$message.error(data.msg || '操作失败')
+        }
+      }).finally(() => {
+        this.approvalLoading = false
+      })
+    },
+    // 查看审批记录
+    viewHistory(row) {
+      getApprovalHistory({
+        applyNo: row.applyNo,
+        site: row.site,
+        orderType: row.orderType
+      }).then(({ data }) => {
+        if (data && data.code === 0) {
+          this.historyList = data.rows
+          this.historyDialogVisible = true
+        }
+      })
+    },
+    // 流程预览 - rqrq
+    openFlowPreview() {
+      getFlowPreview({
+        flowCode: this.approvalData.flowCode,
+        flowVersion: this.approvalData.flowVersion,
+        site: this.approvalData.site
+      }).then(({ data }) => {
+        if (data && data.code === 0) {
+          this.previewData = data.row
+          this.previewDialogVisible = true
+        } else {
+          this.$message.error(data.msg || '获取流程信息失败')
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+/deep/ .el-tabs__content {
+  padding: 10px;
+}
+</style>
diff --git a/src/views/modules/workFlow/flowTemplateList.vue b/src/views/modules/workFlow/flowTemplateList.vue
new file mode 100644
index 0000000..48b3158
--- /dev/null
+++ b/src/views/modules/workFlow/flowTemplateList.vue
@@ -0,0 +1,572 @@
+<template>
+  <div class="customer-css">
+    <!-- 查询区域 - rqrq -->
+    <el-form :inline="true" label-position="top" label-width="100px" style="margin-top: 0px;">
+      <el-row>
+        <el-col :span="24">
+          <el-form-item label="流程编码:">
+            <el-input v-model="searchData.flowCode" style="width: 130px"></el-input>
+          </el-form-item>
+          <el-form-item label="流程名称:">
+            <el-input v-model="searchData.flowName" style="width: 130px"></el-input>
+          </el-form-item>
+          <el-form-item label="单据类型:">
+            <el-select v-model="searchData.orderType" style="width: 130px" clearable>
+              <el-option label="全部" value=""></el-option>
+              <el-option label="产品资料" value="产品资料"></el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="状态:">
+            <el-select v-model="searchData.status" style="width: 130px" clearable>
+              <el-option label="全部" value=""></el-option>
+              <el-option label="启用" value="ACTIVE"></el-option>
+              <el-option label="停用" value="INACTIVE"></el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label=" ">
+            <el-button class="customer-bun-min" type="primary" @click="getMainData">查询</el-button>
+            <el-button type="primary" @click="addTemplate">新增</el-button>
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+
+    <!-- 列表区域 -->
+    <el-table
+      :height="height"
+      :data="mainDataList"
+      border
+      ref="mainTable"
+      highlight-current-row
+      @row-click="changeData"
+      v-loading="dataListLoading"
+      style="margin-top: 0px; width: 100%;">
+      <el-table-column prop="flowCode" label="流程编码" min-width="120" header-align="center" align="center"></el-table-column>
+      <el-table-column prop="flowVersion" label="版本" min-width="80" header-align="center" align="center"></el-table-column>
+      <el-table-column prop="flowName" label="流程名称" min-width="180" header-align="center" align="left"></el-table-column>
+      <el-table-column prop="orderType" label="单据类型" min-width="100" header-align="center" align="center">
+        <template slot-scope="scope">
+          <span >{{ scope.row.orderType }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column prop="status" label="状态" min-width="80" header-align="center" align="center">
+        <template slot-scope="scope">
+          <span :style="{ color: scope.row.status === 'ACTIVE' ? '#67C23A' : '#F56C6C' }">
+            {{ scope.row.status === 'ACTIVE' ? '启用' : '停用' }}
+          </span>
+        </template>
+      </el-table-column>
+      <el-table-column prop="createdBy" label="创建人" min-width="100" header-align="center" align="center"></el-table-column>
+      <el-table-column prop="createdDate" label="创建时间" min-width="150" header-align="center" align="center"></el-table-column>
+      <el-table-column fixed="right" header-align="center" align="center" width="200" label="操作">
+        <template slot-scope="scope">
+          <el-link style="cursor: pointer" @click="editTemplate(scope.row)">编辑 |</el-link>
+          <el-link style="cursor: pointer" @click="copyTemplate(scope.row)">复制 |</el-link>
+          <el-link style="cursor: pointer" @click="toggleStatus(scope.row)">
+            {{ scope.row.status === 'ACTIVE' ? '停用' : '启用' }} |
+          </el-link>
+          <el-link style="cursor: pointer; color: #F56C6C" @click="deleteTemplate(scope.row)">删除</el-link>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <!-- 分页 -->
+    <el-pagination
+      style="margin-top: 0px"
+      @size-change="sizeChangeHandle"
+      @current-change="currentChangeHandle"
+      :current-page="pageIndex"
+      :page-sizes="[20, 50, 100, 200]"
+      :page-size="pageSize"
+      :total="totalPage"
+      layout="total, sizes, prev, pager, next, jumper">
+    </el-pagination>
+
+    <!-- 编辑对话框 -->
+    <div class="rq ">
+    <el-dialog
+      :title="isAdd ? '新增审批流程' : '编辑审批流程'"
+      :visible.sync="dialogVisible"
+      width="900px"
+      top="3vh"
+      :close-on-click-modal="false"
+      v-drag>
+      <el-form :model="formData" :rules="formRules" ref="formRef" label-position="top">
+        <el-row :gutter="20">
+          <el-col :span="8">
+            <el-form-item label="流程编码" prop="flowCode">
+              <el-input v-model="formData.flowCode" :disabled="!isAdd" style="width: 100%"></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="流程名称" prop="flowName">
+              <el-input v-model="formData.flowName" style="width: 100%"></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="单据类型" prop="orderType">
+              <el-select v-model="formData.orderType" style="width: 100%">
+                <el-option label="产品资料" value="产品资料"></el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="20">
+          <el-col :span="16">
+            <el-form-item label="描述">
+              <el-input v-model="formData.description" style="width: 100%"></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="状态">
+              <el-select v-model="formData.status" style="width: 100%">
+                <el-option label="启用" value="ACTIVE"></el-option>
+                <el-option label="停用" value="INACTIVE"></el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+        </el-row>
+
+        <!-- 节点配置 -->
+        <div style="margin-top: 10px;">
+          <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px;">
+            <span style="font-weight: bold;">审批节点配置</span>
+            <el-button size="mini" type="primary" @click="addNode">添加节点</el-button>
+          </div>
+          <el-table :data="formData.nodeList" border style="width: 100%;" max-height="300">
+            <el-table-column prop="nodeOrder" label="顺序" width="60" header-align="center" align="center">
+              <template slot-scope="scope">
+                {{ scope.$index + 1 }}
+              </template>
+            </el-table-column>
+            <el-table-column prop="nodeCode" label="节点编码" min-width="100" header-align="center" align="center">
+              <template slot-scope="scope">
+                <!-- 开始和结束节点不可编辑 - rqrq -->
+                <el-input v-model="scope.row.nodeCode" size="mini"
+                  :disabled="scope.row.nodeType === 'START' || scope.row.nodeType === 'END'"></el-input>
+              </template>
+            </el-table-column>
+            <el-table-column prop="nodeName" label="节点名称" min-width="120" header-align="center" align="center">
+              <template slot-scope="scope">
+                <!-- 开始和结束节点不可编辑 - rqrq -->
+                <el-input v-model="scope.row.nodeName" size="mini"
+                  :disabled="scope.row.nodeType === 'START' || scope.row.nodeType === 'END'"></el-input>
+              </template>
+            </el-table-column>
+            <el-table-column prop="nodeType" label="节点类型" width="100" header-align="center" align="center">
+              <template slot-scope="scope">
+                <!-- 节点类型只显示不可选 - rqrq -->
+                <span v-if="scope.row.nodeType === 'START'" style="color: #67C23A">开始</span>
+                <span v-else-if="scope.row.nodeType === 'END'" style="color: #F56C6C">结束</span>
+                <span v-else style="color: #409EFF">审批</span>
+              </template>
+            </el-table-column>
+            <el-table-column prop="approveType" label="审批类型" width="130" header-align="center" align="center">
+              <template slot-scope="scope">
+                <el-select v-model="scope.row.approveType" size="mini" style="width: 100%"
+                  :disabled="scope.row.nodeType !== 'APPROVE'"
+                  @change="handleApproveTypeChange(scope.$index, scope.row)">
+                  <el-option label="单人审批" value="SINGLE"></el-option>
+                  <el-option label="会签" value="ALL"></el-option>
+                  <el-option label="或签" value="ANY"></el-option>
+                </el-select>
+              </template>
+            </el-table-column>
+            <el-table-column prop="departmentId" label="审批部门" min-width="150" header-align="center" align="center">
+              <template slot-scope="scope">
+                <el-select v-model="scope.row.departmentId" size="mini" style="width: 100%"
+                  :disabled="scope.row.nodeType !== 'APPROVE'" clearable placeholder="选择部门"
+                  @change="handleNodeDeptChange(scope.$index, scope.row)">
+                  <el-option v-for="dept in nodeDepartmentList" :key="dept.departmentId"
+                    :label="dept.departmentName" :value="dept.departmentId"></el-option>
+                </el-select>
+              </template>
+            </el-table-column>
+            <el-table-column prop="approverNames" label="审批人" min-width="150" header-align="center" align="left">
+              <template slot-scope="scope">
+                <div style="display: flex; align-items: center;">
+                  <span style="flex: 1;">{{ scope.row.approverNames || '未配置' }}</span>
+                  <el-button size="mini" type="text" @click="selectApprover(scope.$index)"
+                    :disabled="scope.row.nodeType !== 'APPROVE'">选择</el-button>
+                </div>
+              </template>
+            </el-table-column>
+            <el-table-column label="操作" width="80" header-align="center" align="center">
+              <template slot-scope="scope">
+                <!-- 开始和结束节点不可删除 - rqrq -->
+                <el-button size="mini" type="text" style="color: #F56C6C"
+                  @click="removeNode(scope.$index)"
+                  :disabled="scope.row.nodeType === 'START' || scope.row.nodeType === 'END'">删除</el-button>
+              </template>
+            </el-table-column>
+          </el-table>
+        </div>
+      </el-form>
+      <span slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="saveData" :loading="saveLoading">{{ saveLoading ? '保存中...' : '保存' }}</el-button>
+        <el-button @click="dialogVisible = false" :disabled="saveLoading">取消</el-button>
+      </span>
+    </el-dialog>
+    </div>
+    <!-- 选择审批人对话框 - rqrq -->
+    <el-dialog :title="isSingleApprove ? '选择审批人（单选）' : '选择审批人（可多选）'"
+      :visible.sync="approverDialogVisible" width="600px" :close-on-click-modal="false" append-to-body v-drag>
+      <el-form :inline="true" size="mini">
+        <el-form-item label="关键字:">
+          <el-input v-model="approverSearchKey" style="width: 200px" placeholder="输入用户名或姓名"></el-input>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" @click="searchApprover">查询</el-button>
+        </el-form-item>
+        <el-form-item v-if="isSingleApprove">
+          <span style="color: #E6A23C; font-size: 12px;">（单人审批模式，只能选择一人）</span>
+        </el-form-item>
+      </el-form>
+      <el-table
+        ref="approverTable"
+        :data="approverList"
+        border
+        height="300"
+        @selection-change="handleApproverSelection"
+        @select="handleApproverSelect"
+        @select-all="handleSelectAll">
+        <el-table-column type="selection" width="55"></el-table-column>
+        <el-table-column prop="approverUsername" label="用户名" min-width="120"></el-table-column>
+        <el-table-column prop="approverName" label="姓名" min-width="120"></el-table-column>
+      </el-table>
+      <span slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="confirmApprover">确定</el-button>
+        <el-button @click="approverDialogVisible = false">取消</el-button>
+      </span>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import {
+  searchTemplateList,
+  getTemplateDetail,
+  saveTemplate,
+  deleteTemplate,
+  enableTemplate,
+  disableTemplate,
+  copyTemplate,
+  searchUserList,
+  searchDepartmentList
+} from '@/api/workFlow/workFlow.js'
+
+export default {
+  data() {
+    return {
+      height: 300,
+      dataListLoading: false,
+      saveLoading: false,
+      pageIndex: 1,
+      pageSize: 20,
+      totalPage: 0,
+      mainDataList: [],
+      currentRow: null,
+      searchData: {
+        site: this.$store.state.user.site,
+        flowCode: '',
+        flowName: '',
+        orderType: '',
+        status: ''
+      },
+      dialogVisible: false,
+      isAdd: true,
+      formData: {
+        id: null,
+        flowCode: '',
+        flowName: '',
+        orderType: '产品资料',
+        status: 'ACTIVE',
+        description: '',
+        site: this.$store.state.user.site,
+        nodeList: []
+      },
+      formRules: {
+        flowCode: [{ required: true, message: '请输入流程编码', trigger: 'blur' }],
+        flowName: [{ required: true, message: '请输入流程名称', trigger: 'blur' }],
+        orderType: [{ required: true, message: '请选择单据类型', trigger: 'change' }]
+      },
+      approverDialogVisible: false,
+      approverSearchKey: '',
+      approverDeptId: '',  // 部门筛选 - rqrq
+      departmentList: [],  // 部门列表 - rqrq
+      nodeDepartmentList: [],  // 节点配置用的部门列表 - rqrq
+      approverList: [],
+      selectedApprovers: [],
+      currentNodeIndex: -1,
+      isSingleApprove: false  // 当前节点是否为单人审批 - rqrq
+    }
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.height = (window.innerHeight - 250)
+    } )
+    this.getMainData()
+  },
+  methods: {
+    getMainData() {
+      this.dataListLoading = true
+      this.searchData.limit = this.pageSize
+      this.searchData.page = this.pageIndex
+      searchTemplateList(this.searchData).then(({ data }) => {
+        if (data && data.code === 0) {
+          this.mainDataList = data.page.list
+          this.totalPage = data.page.totalCount
+        }
+        this.dataListLoading = false
+      })
+    },
+    changeData(row) {
+      this.currentRow = row
+    },
+    sizeChangeHandle(val) {
+      this.pageSize = val
+      this.pageIndex = 1
+      this.getMainData()
+    },
+    currentChangeHandle(val) {
+      this.pageIndex = val
+      this.getMainData()
+    },
+    addTemplate() {
+      this.isAdd = true
+      this.formData = {
+        id: null,
+        flowCode: '',
+        flowName: '',
+        orderType: '产品资料',
+        status: 'ACTIVE',
+        description: '',
+        site: this.$store.state.user.site,
+        nodeList: [
+          { nodeCode: 'START', nodeName: '开始', nodeType: 'START', nodeOrder: 0, approveType: '', departmentId: '', departmentName: '', approverList: [], approverNames: '' },
+          { nodeCode: 'APPROVE_1', nodeName: '审批', nodeType: 'APPROVE', nodeOrder: 1, approveType: 'SINGLE', departmentId: '', departmentName: '', approverList: [], approverNames: '' },
+          { nodeCode: 'END', nodeName: '结束', nodeType: 'END', nodeOrder: 99, approveType: '', departmentId: '', departmentName: '', approverList: [], approverNames: '' }
+        ]
+      }
+      // 加载部门列表 - rqrq
+      this.loadNodeDepartmentList()
+      this.dialogVisible = true
+    },
+    editTemplate(row) {
+      this.isAdd = false
+      // 先加载部门列表 - rqrq
+      this.loadNodeDepartmentList()
+      getTemplateDetail({ id: row.id }).then(({ data }) => {
+        if (data && data.code === 0) {
+          this.formData = data.row
+          // 确保每个节点有 departmentId 和 departmentName 字段 - rqrq
+          if (this.formData.nodeList) {
+            this.formData.nodeList.forEach(node => {
+              // 确保字段存在，避免 v-model 绑定问题
+              if (node.departmentId === undefined || node.departmentId === null) {
+                node.departmentId = ''
+              }
+              if (node.departmentName === undefined || node.departmentName === null) {
+                node.departmentName = ''
+              }
+            })
+          }
+          this.dialogVisible = true
+        }
+      })
+    },
+    copyTemplate(row) {
+      this.$confirm('确定复制此流程模板吗？将创建新版本。', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        copyTemplate({ id: row.id }).then(({ data }) => {
+          if (data && data.code === 0) {
+            this.$message.success('复制成功')
+            this.getMainData()
+          } else {
+            this.$message.error(data.msg || '复制失败')
+          }
+        })
+      })
+    },
+    toggleStatus(row) {
+      const action = row.status === 'ACTIVE' ? disableTemplate : enableTemplate
+      const tip = row.status === 'ACTIVE' ? '停用' : '启用'
+      this.$confirm(`确定${tip}此流程模板吗？`, '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        action({ id: row.id }).then(({ data }) => {
+          if (data && data.code === 0) {
+            this.$message.success(`${tip}成功`)
+            this.getMainData()
+          } else {
+            this.$message.error(data.msg || `${tip}失败`)
+          }
+        })
+      })
+    },
+    deleteTemplate(row) {
+      this.$confirm('确定删除此流程模板吗？', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        deleteTemplate({ id: row.id }).then(({ data }) => {
+          if (data && data.code === 0) {
+            this.$message.success('删除成功')
+            this.getMainData()
+          } else {
+            this.$message.error(data.msg || '删除失败')
+          }
+        })
+      })
+    },
+    addNode() {
+      const lastIndex = this.formData.nodeList.length - 1
+      const newNode = {
+        nodeCode: `APPROVE_${this.formData.nodeList.length}`,
+        nodeName: '审批节点',
+        nodeType: 'APPROVE',
+        nodeOrder: lastIndex,
+        approveType: 'SINGLE',
+        departmentId: '',  // 部门ID - rqrq
+        departmentName: '',  // 部门名称 - rqrq
+        approverList: [],
+        approverNames: ''
+      }
+      this.formData.nodeList.splice(lastIndex, 0, newNode)
+    },
+    removeNode(index) {
+      if (this.formData.nodeList[index].nodeType === 'START' || this.formData.nodeList[index].nodeType === 'END') {
+        this.$message.warning('开始和结束节点不能删除')
+        return
+      }
+      this.formData.nodeList.splice(index, 1)
+    },
+    selectApprover(index) {
+      this.currentNodeIndex = index
+      this.approverSearchKey = ''
+      this.approverList = []
+      this.selectedApprovers = this.formData.nodeList[index].approverList || []
+      // 判断是否为单人审批 - rqrq
+      this.isSingleApprove = this.formData.nodeList[index].approveType === 'SINGLE'
+      this.approverDialogVisible = true
+      this.searchApprover()
+    },
+    // 加载节点配置用的部门列表 - rqrq
+    loadNodeDepartmentList() {
+      searchDepartmentList({ site: this.searchData.site }).then(({ data }) => {
+        if (data && data.code === 0) {
+          this.nodeDepartmentList = data.rows
+        }
+      })
+    },
+    // 节点部门变更处理 - rqrq
+    handleNodeDeptChange(index, row) {
+      // 找到选中的部门名称
+      const dept = this.nodeDepartmentList.find(d => d.departmentId === row.departmentId)
+      row.departmentName = dept ? dept.departmentName : ''
+    },
+    searchApprover() {
+      searchUserList({
+        approverUsername: this.approverSearchKey,
+        realName: this.searchData.site
+      }).then(({ data }) => {
+        if (data && data.code === 0) {
+          this.approverList = data.rows
+        }
+      })
+    },
+    handleApproverSelection(selection) {
+      this.selectedApprovers = selection
+    },
+    // 单人审批时限制只能选一个 - rqrq
+    handleApproverSelect(selection, row) {
+      if (this.isSingleApprove && selection.length > 1) {
+        // 单人审批模式，只保留最后选择的一个
+        this.$refs.approverTable.clearSelection()
+        this.$refs.approverTable.toggleRowSelection(row, true)
+        this.selectedApprovers = [row]
+      }
+    },
+    // 单人审批时禁止全选 - rqrq
+    handleSelectAll(selection) {
+      if (this.isSingleApprove && selection.length > 1) {
+        this.$message.warning('单人审批模式只能选择一个审批人')
+        this.$refs.approverTable.clearSelection()
+        this.selectedApprovers = []
+      }
+    },
+    // 审批类型变更时清空审批人（如果从多人改为单人且已有多人） - rqrq
+    handleApproveTypeChange(index, row) {
+      if (row.approveType === 'SINGLE' && row.approverList && row.approverList.length > 1) {
+        row.approverList = []
+        row.approverNames = ''
+        this.$message.warning('单人审批只能配置一个审批人，已清空审批人配置，请重新选择')
+      }
+    },
+    confirmApprover() {
+      // 单人审批校验 - rqrq
+      if (this.isSingleApprove && this.selectedApprovers.length > 1) {
+        this.$message.warning('单人审批模式只能选择一个审批人')
+        return
+      }
+      if (this.currentNodeIndex >= 0) {
+        const node = this.formData.nodeList[this.currentNodeIndex]
+        // 审批人信息（部门信息保存在节点上，不在审批人上）- rqrq
+        node.approverList = this.selectedApprovers.map(item => ({
+          approverUsername: item.approverUsername,
+          approverName: item.approverName
+        }))
+        node.approverNames = this.selectedApprovers.map(item => item.approverName).join(', ')
+      }
+      this.approverDialogVisible = false
+    },
+    saveData() {
+      this.$refs.formRef.validate((valid) => {
+        if (valid) {
+          // 验证节点配置 - rqrq
+          const approveNodes = this.formData.nodeList.filter(n => n.nodeType === 'APPROVE')
+          for (const node of approveNodes) {
+            if (!node.approverList || node.approverList.length === 0) {
+              this.$message.warning(`节点"${node.nodeName}"未配置审批人`)
+              return
+            }
+            // 校验单人审批不能有多个审批人 - rqrq
+            if (node.approveType === 'SINGLE' && node.approverList.length > 1) {
+              this.$message.warning(`节点"${node.nodeName}"为单人审批，只能配置一个审批人`)
+              return
+            }
+          }
+          // 更新节点顺序
+          this.formData.nodeList.forEach((node, index) => {
+            node.nodeOrder = index
+          })
+          this.saveLoading = true
+          saveTemplate(this.formData).then(({ data }) => {
+            if (data && data.code === 0) {
+              this.$message.success('保存成功')
+              this.dialogVisible = false
+              this.getMainData()
+            } else {
+              this.$message.error(data.msg || '保存失败')
+            }
+          }).finally(() => {
+            this.saveLoading = false
+          })
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+/deep/ .el-dialog__body {
+  padding: 10px 20px;
+}
+</style>