更新打包

src/filters/index.js

@@ -1,68 +1,103 @@
-// import parseTime, formatTime and set to filter
-export { parseTime, formatTime } from '@/utils'
-
-/**
- * Show plural label if time is plural number
- * @param {number} time
- * @param {string} label
- * @return {string}
- */
-function pluralize(time, label) {
-  if (time === 1) {
-    return time + label
-  }
-  return time + label + 's'
-}
-
-/**
- * @param {number} time
- */
-export function timeAgo(time) {
-  const between = Date.now() / 1000 - Number(time)
-  if (between < 3600) {
-    return pluralize(~~(between / 60), ' minute')
-  } else if (between < 86400) {
-    return pluralize(~~(between / 3600), ' hour')
-  } else {
-    return pluralize(~~(between / 86400), ' day')
-  }
-}
-
-/**
- * Number formatting
- * like 10000 => 10k
- * @param {number} num
- * @param {number} digits
- */
-export function numberFormatter(num, digits) {
-  const si = [
-    { value: 1E18, symbol: 'E' },
-    { value: 1E15, symbol: 'P' },
-    { value: 1E12, symbol: 'T' },
-    { value: 1E9, symbol: 'G' },
-    { value: 1E6, symbol: 'M' },
-    { value: 1E3, symbol: 'k' }
-  ]
-  for (let i = 0; i < si.length; i++) {
-    if (num >= si[i].value) {
-      return (num / si[i].value).toFixed(digits).replace(/\.0+$|(\.[0-9]*[1-9])0+$/, '$1') + si[i].symbol
-    }
-  }
-  return num.toString()
-}
-
-/**
- * 10000 => "10,000"
- * @param {number} num
- */
-export function toThousandFilter(num) {
-  return (+num || 0).toString().replace(/^-?\d+/g, m => m.replace(/(?=(?!\b)(\d{3})+$)/g, ','))
-}
-
-/**
- * Upper case first char
- * @param {String} string
- */
-export function uppercaseFirst(string) {
-  return string.charAt(0).toUpperCase() + string.slice(1)
-}
+// import parseTime, formatTime and set to filter
+export {
+  parseTime,
+  formatTime
+}
+from '@/utils'
+
+/**
+ * Show plural label if time is plural number
+ * @param {number} time
+ * @param {string} label
+ * @return {string}
+ */
+function pluralize(time, label) {
+  if (time === 1) {
+    return time + label
+  }
+  return time + label + 's'
+}
+
+/**
+ * @param {number} time
+ */
+export function timeAgo(time) {
+  const between = Date.now() / 1000 - Number(time)
+  if (between < 3600) {
+    return pluralize(~~(between / 60), ' minute')
+  } else if (between < 86400) {
+    return pluralize(~~(between / 3600), ' hour')
+  } else {
+    return pluralize(~~(between / 86400), ' day')
+  }
+}
+
+/**
+ * Number formatting
+ * like 10000 => 10k
+ * @param {number} num
+ * @param {number} digits
+ */
+export function numberFormatter(num, digits) {
+  const si = [{
+      value: 1E18,
+      symbol: 'E'
+    },
+    {
+      value: 1E15,
+      symbol: 'P'
+    },
+    {
+      value: 1E12,
+      symbol: 'T'
+    },
+    {
+      value: 1E9,
+      symbol: 'G'
+    },
+    {
+      value: 1E6,
+      symbol: 'M'
+    },
+    {
+      value: 1E3,
+      symbol: 'k'
+    }
+  ]
+  for (let i = 0; i < si.length; i++) {
+    if (num >= si[i].value) {
+      return (num / si[i].value).toFixed(digits).replace(/\.0+$|(\.[0-9]*[1-9])0+$/, '$1') + si[i].symbol
+    }
+  }
+  return num.toString()
+}
+
+/**
+ * 10000 => "10,000"
+ * @param {number} num
+ */
+export function toThousandFilter(num) {
+  return (+num || 0).toString().replace(/^-?\d+/g, m => m.replace(/(?=(?!\b)(\d{3})+$)/g, ','))
+}
+
+/**
+ * Upper case first char
+ * @param {String} string
+ */
+export function uppercaseFirst(string) {
+  return string.charAt(0).toUpperCase() + string.slice(1)
+}
+
+/**
+ * 工单状态
+ * @param {string} string
+ * @returns
+ */
+export function orderStatus(string) {
+  let template = {
+    END: '手动结束',
+    PASS: '完成',
+    UNPASS: '拒绝'
+  }
+  return template[string]
+}

src/views/process/list/all.vue

@@ -39,6 +39,13 @@
             }}</span>
           </template>
         </el-table-column>
+        <el-table-column label="工单结束状态">
+          <template slot-scope="scope">
+            <span>
+              {{ scope.row.endType | orderStatus }}
+            </span>
+          </template>
+        </el-table-column>
         <el-table-column
           label="优先级"
           :show-overflow-tooltip="true"
@@ -134,59 +141,12 @@
       </el-table>
 
       <el-dialog title="转交工单" :visible.sync="dialogVisible" width="30%">
-        <el-form
-          ref="ruleForm"
-          :model="ruleForm"
-          :rules="rules"
-          label-width="60px"
-          class="demo-ruleForm"
-        >
-          <el-form-item label="节点" prop="node_id">
-            <el-select
-              v-model="ruleForm.node_id"
-              placeholder="选择节点"
-              size="small"
-              style="width: 100%"
-            >
-              <el-option
-                v-for="(item, index) in nodeList"
-                :key="index"
-                :label="item.label"
-                :value="item.id"
-              />
-            </el-select>
-          </el-form-item>
-          <el-form-item label="用户" prop="user_id">
-            <el-select
-              v-model="ruleForm.user_id"
-              filterable
-              placeholder="选择用户"
-              size="small"
-              style="width: 100%"
-            >
-              <el-option
-                v-for="(item, index) in users"
-                :key="index"
-                :label="item.nickName"
-                :value="item.userId"
-              >
-                <span style="float: left">{{ item.nickName }}</span>
-                <span style="float: right; color: #8492a6; font-size: 13px">{{
-                  item.phone
-                }}</span>
-              </el-option>
-            </el-select>
-          </el-form-item>
-          <el-form-item label="备注">
-            <el-input v-model="ruleForm.remarks" type="textarea" size="small" />
-          </el-form-item>
-          <el-form-item style="text-align: right">
-            <el-button type="primary" @click="submitForm('ruleForm')"
-              >提交</el-button
-            >
-            <el-button @click="dialogVisible = false">关闭</el-button>
-          </el-form-item>
-        </el-form>
+        <TransferInversion
+          v-if="dialogVisible"
+          :selectItem="selectItem"
+          @getList="getList"
+          @close="dialogVisible = false"
+        />
       </el-dialog>
 
       <pagination
@@ -208,12 +168,13 @@ import {
   deleteWorkOrder
 } from "@/api/process/work-order";
 import { listUser } from "@/api/system/sysuser";
-
+import TransferInversion from "./model/transferInversion";
+import load from "@/utils/loading";
 // 搜索
 import WorkOrderSearch from "./components/search/index";
 
 export default {
-  components: { WorkOrderSearch },
+  components: { WorkOrderSearch, TransferInversion },
   data() {
     return {
       users: [],
@@ -227,15 +188,11 @@ export default {
         page: 1,
         per_page: 10
       },
-      ruleForm: {
+      selectItem: {
         work_order_id: "",
-        node_id: "",
-        user_id: "",
-        remarks: ""
-      },
-      rules: {
-        node_id: [{ required: true, message: "请选择节点", trigger: "change" }],
-        user_id: [{ required: true, message: "请选择用户", trigger: "change" }]
+        node_id: null,
+        nodeList: [],
+        users: []
       }
     };
   },
@@ -319,18 +276,23 @@ export default {
           });
         });
     },
-    handleInversion(row) {
-      this.dialogVisible = true;
-      this.ruleForm.work_order_id = row.id;
-      this.nodeList = row.state;
-      if (this.nodeList.length === 1) {
-        this.ruleForm.node_id = this.nodeList[0].id;
+    async handleInversion(row) {
+      this.selectItem.work_order_id = row.id;
+      this.selectItem.nodeList = row.state;
+      if (this.selectItem.nodeList.length === 1) {
+        this.selectItem.node_id = this.selectItem.nodeList[0].id;
       }
-      listUser({
-        pageSize: 999999
-      }).then(response => {
-        this.users = response.data.list;
-      });
+      if (this.selectItem.users.length <= 0) {
+        load.startLoading();
+        await listUser({
+          pageSize: 999999
+        }).then(response => {
+          this.selectItem.users = response.data.list;
+        });
+        load.endLoading();
+      }
+
+      this.dialogVisible = true;
     },
     handleSelectionChange() {},
     submitForm(formName) {

src/views/process/list/components/search/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <el-form-item label="关键词">
+    <el-form-item>
       <el-input
         v-model="listQuery.search"
         placeholder="请输入搜索关键词"
@@ -10,7 +10,7 @@
         @keyup.enter.native="getList"
       />
     </el-form-item>
-    <el-form-item v-if="genre !== 'upcoming'" label="当前处理人">
+    <el-form-item v-if="genre !== 'upcoming'">
       <el-select
         v-model="listQuery.processor"
         filterable
@@ -32,20 +32,49 @@
         />
       </el-select>
     </el-form-item>
-    <el-form-item label="优先级">
-      <el-select v-model="listQuery.priority" placeholder="请选择优先级" size="small" clearable style="width: 130px" @change="getList">
+    <el-form-item>
+      <el-select
+        v-model="listQuery.priority"
+        placeholder="请选择优先级"
+        size="small"
+        clearable
+        style="width: 150px"
+        @change="getList"
+      >
         <el-option label="一般" :value="1" />
         <el-option label="紧急" :value="2" />
         <el-option label="非常紧急" :value="3" />
       </el-select>
     </el-form-item>
-    <el-form-item v-if="genre !== 'upcoming'" label="是否结束">
-      <el-select v-model="listQuery.isEnd" placeholder="请选择状态" size="small" clearable style="width: 130px" @change="getList">
+    <el-form-item v-if="genre !== 'upcoming'">
+      <el-select
+        v-model="listQuery.isEnd"
+        placeholder="请选择状态"
+        size="small"
+        clearable
+        style="width: 150px"
+        @change="getList"
+      >
         <el-option label="是" :value="1" />
         <el-option label="否" :value="0" />
       </el-select>
     </el-form-item>
-    <el-form-item label="创建时间">
+    <el-form-item>
+      <!-- END: 手动结束  PASS:完成  UNPASS: 拒绝 -->
+      <el-select
+        v-model="listQuery.endType"
+        placeholder="请选择工单结束状态"
+        size="small"
+        clearable
+        style="width: 150px"
+        @change="getList"
+      >
+        <el-option label="手动结束" value="END" />
+        <el-option label="完成" value="PASS" />
+        <el-option label="拒绝" value="UNPASS" />
+      </el-select>
+    </el-form-item>
+    <el-form-item>
       <el-date-picker
         v-model="timeValue"
         clearable
@@ -53,86 +82,96 @@
         type="datetimerange"
         :picker-options="pickerOptions"
         range-separator="至"
-        start-placeholder="开始日期"
-        end-placeholder="结束日期"
+        start-placeholder="创建开始日期"
+        end-placeholder="创建结束日期"
         align="right"
         @change="getList"
       />
     </el-form-item>
     <el-form-item>
-      <el-button type="primary" icon="el-icon-search" size="small" @click="getList">搜索</el-button>
+      <el-button
+        type="primary"
+        icon="el-icon-search"
+        size="small"
+        @click="getList"
+        >搜索</el-button
+      >
     </el-form-item>
   </div>
 </template>
 
 <script>
-import {
-  listUser
-} from '@/api/system/sysuser'
+import { listUser } from "@/api/system/sysuser";
 
-import { parseTime } from '@/utils'
+import { parseTime } from "@/utils";
 export default {
-  name: 'WorkOrderSearch',
+  name: "WorkOrderSearch",
   // eslint-disable-next-line vue/require-prop-types
-  props: ['genre'],
+  props: ["genre"],
   data() {
     return {
       loading: false,
-      timeValue: '',
+      timeValue: "",
       listQuery: {},
       UserOptions: [],
       pickerOptions: {
-        shortcuts: [{
-          text: '最近一周',
-          onClick(picker) {
-            const end = new Date()
-            const start = new Date()
-            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
-            picker.$emit('pick', [start, end])
-          }
-        }, {
-          text: '最近一个月',
-          onClick(picker) {
-            const end = new Date()
-            const start = new Date()
-            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
-            picker.$emit('pick', [start, end])
+        shortcuts: [
+          {
+            text: "最近一周",
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
+              picker.$emit("pick", [start, end]);
+            }
+          },
+          {
+            text: "最近一个月",
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
+              picker.$emit("pick", [start, end]);
+            }
+          },
+          {
+            text: "最近三个月",
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
+              picker.$emit("pick", [start, end]);
+            }
           }
-        }, {
-          text: '最近三个月',
-          onClick(picker) {
-            const end = new Date()
-            const start = new Date()
-            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
-            picker.$emit('pick', [start, end])
-          }
-        }]
+        ]
       }
-    }
+    };
   },
   methods: {
     getList() {
-      if (this.timeValue === null || this.timeValue === undefined || this.timeValue === '') {
-        this.listQuery.startTime = ''
-        this.listQuery.endTime = ''
+      if (
+        this.timeValue === null ||
+        this.timeValue === undefined ||
+        this.timeValue === ""
+      ) {
+        this.listQuery.startTime = "";
+        this.listQuery.endTime = "";
       } else {
-        this.listQuery.startTime = parseTime(this.timeValue[0])
-        this.listQuery.endTime = parseTime(this.timeValue[1])
+        this.listQuery.startTime = parseTime(this.timeValue[0]);
+        this.listQuery.endTime = parseTime(this.timeValue[1]);
       }
-      this.$emit('handleSearch', this.listQuery)
+      this.$emit("handleSearch", this.listQuery);
     },
     remoteUserList(query) {
       listUser({
         pageSize: 999999,
         nickName: query
       }).then(res => {
-        this.UserOptions = res.data.list
-      })
+        this.UserOptions = res.data.list;
+      });
     }
   }
-}
+};
 </script>
 
-<style scoped>
-
-</style>
+<style scoped></style>

src/views/process/list/handle.vue

@@ -4,16 +4,102 @@
     <div v-else>
       <el-card class="box-card">
         <div class="text item">
-          <el-steps v-if="currentNode.clazz !== undefined && currentNode.clazz !== null && currentNode.clazz !== ''" :active="activeIndex" finish-status="success">
-            <template v-for="(item, index) in nodeStepList">
+          <el-steps
+            v-if="
+              currentNode.clazz !== undefined &&
+                currentNode.clazz !== null &&
+                currentNode.clazz !== ''
+            "
+            :active="activeIndex"
+            finish-status="success"
+          >
+            <!-- :simple="true" -->
+            <template v-for="(item, index) in circulationList">
               <el-step
-                v-if="item.isHideNode === false ||
-                  item.isHideNode === undefined ||
-                  item.isHideNode == null ||
-                  item.id === processStructureValue.workOrder.current_state"
+                v-if="
+                  item.isHideNode === false ||
+                    item.isHideNode === undefined ||
+                    item.isHideNode == null ||
+                    item.id === processStructureValue.workOrder.current_state
+                "
                 :key="index"
-                :title="item.label"
-              />
+                :title="item.state || item.label"
+              >
+                <template #description>
+                  <!-- 判断是否有审核数据 -->
+                  <template v-if="!item.create_time">
+                    <p
+                      class="apply-status"
+                      v-if="item.assignUsers && item.assignUsers.length > 0"
+                    >
+                      <!-- 判断是否是自己审批 -->
+                      <template
+                        v-if="
+                          item.assignUsers[0].userId == userInfo.userId &&
+                            activeIndex == index
+                        "
+                      >
+                        我（审批中）
+                      </template>
+                      <template v-else>
+                        <template v-if="item.isCounterSign">
+                          <span
+                            v-for="(au, aIndex) in item.assignUsers"
+                            :key="aIndex"
+                          >
+                            {{ au.username
+                            }}{{
+                              aIndex < item.assignUsers.length - 1 ? "，" : null
+                            }}
+                          </span>
+                        </template>
+                        <template v-else>
+                          {{ item.assignUsers[0].username }}
+                        </template>
+                        {{ activeIndex == index ? `（审批中）` : null }}
+                        <!-- {{ item.assignUsers[0].username }}{{ activeIndex == index ? `（审批中）` : null }} -->
+                      </template>
+                    </p>
+                  </template>
+                  <template v-else>
+                    <p class="apply-status" v-if="item.processor">
+                      {{ item.processor
+                      }}{{
+                        item.circulation ? `（${item.circulation}）` : null
+                      }}
+                    </p>
+                    <!-- <p class="remarks" v-if="item.remarks">
+                      {{ item.remarks }}
+                    </p> -->
+                  </template>
+                  <!-- 有抄送人并且，本节点已经审批完成了 -->
+                  <template
+                    v-if="
+                      item.cc_user &&
+                        item.cc_user.length > 0 &&
+                        activeIndex > index
+                    "
+                  >
+                    <!-- 已抄送1人 -->
+                    <!-- <div class="ccUsers" @click="onCCChange(item)">
+                      <span>已抄送{{ item.cc_user.length }}人</span>
+                      <van-icon
+                        v-show="!item.ccStatus"
+                        style="color: #CCCCCC"
+                        name="arrow-down"
+                      />
+                      <van-icon
+                        v-show="item.ccStatus"
+                        style="color: #CCCCCC"
+                        name="arrow-up"
+                      />
+                    </div>
+                    <div class="ccUserDetail" v-if="item.ccStatus">
+                      <span>{{ item.cc_user.join(",") }}</span>
+                    </div> -->
+                  </template>
+                </template>
+              </el-step>
             </template>
           </el-steps>
           <div v-else>
@@ -27,7 +113,10 @@
       </el-card>
 
       <el-alert
-        v-if="activeIndex !== nodeStepList.length && processStructureValue.workOrder.is_end===1"
+        v-if="
+          activeIndex !== nodeStepList.length &&
+            processStructureValue.workOrder.is_end === 1
+        "
         style="margin-top: 15px"
         :title="alertMessage"
         type="error"
@@ -48,10 +137,12 @@
               </el-col>
               <el-col :span="12">
                 <el-form-item label="优先级:" style="margin-bottom: 0">
-                  <span v-if="processStructureValue.workOrder.priority===2">
+                  <span v-if="processStructureValue.workOrder.priority === 2">
                     <el-tag type="warning">紧急</el-tag>
                   </span>
-                  <span v-else-if="processStructureValue.workOrder.priority===3">
+                  <span
+                    v-else-if="processStructureValue.workOrder.priority === 3"
+                  >
                     <el-tag type="danger">非常紧急</el-tag>
                   </span>
                   <span v-else>
@@ -78,11 +169,13 @@
         <div class="text item">
           <template v-for="(tplItem, tplIndex) in processStructureValue.tpls">
             <fm-generate-form
-              v-show="currentNode.hideTpls===undefined ||
-                currentNode.hideTpls===null ||
-                currentNode.hideTpls.indexOf(tplItem.form_structure.id)===-1"
+              v-show="
+                currentNode.hideTpls === undefined ||
+                  currentNode.hideTpls === null ||
+                  currentNode.hideTpls.indexOf(tplItem.form_structure.id) === -1
+              "
               :key="tplIndex"
-              :ref="'generateForm-'+tplItem.id"
+              :ref="'generateForm-' + tplItem.id"
               :preview="true"
               :remote="remoteFunc"
               :value="tplItem.form_data"
@@ -92,31 +185,57 @@
           </template>
         </div>
         <div v-if="processStructureValue.userAuthority && is_end == 0">
-          <hr style="background-color: #d9d9d9; border:0; height:1px; margin-bottom: 15px">
-          <el-form ref="dataFrom" label-position="left" :model="dataList" label-width="150">
-            <el-form-item label="备注信息" prop="remarks" :rules="[{ required: true, message: '请输入备注信息', trigger: 'blur' }]">
+          <hr
+            style="background-color: #d9d9d9; border:0; height:1px; margin-bottom: 15px"
+          />
+          <el-form
+            ref="dataFrom"
+            label-position="left"
+            :model="dataList"
+            label-width="150"
+          >
+            <el-form-item
+              label="备注信息"
+              prop="remarks"
+              :rules="[
+                { required: true, message: '请输入备注信息', trigger: 'blur' }
+              ]"
+            >
               <el-input
                 v-model="dataList.remarks"
                 type="textarea"
                 placeholder="请输入备注信息"
                 maxlength="200"
-                :autosize="{ minRows: 3, maxRows: 99}"
+                :autosize="{ minRows: 3, maxRows: 99 }"
                 show-word-limit
               />
             </el-form-item>
-          <div class="text item" style="text-align: center;margin-top:18px">
-            <el-button
-              v-for="(item, index) in btn_group"
-              :key="index"
-              :type="item.className"
-              @click="submitAction(item)" >{{ item.labelShow }}</el-button>
+            <div class="text item" style="text-align: center;margin-top:18px">
+              <el-button
+                type="warning"
+                round
+                @click="handleInversion(endNodeDetail)"
+                >转交</el-button
+              >
+              <el-button
+                v-for="(item, index) in btn_group"
+                :key="index"
+                :type="item.className"
+                @click="submitAction(item)"
+                round
+                >{{ item.labelShow }}</el-button
+              >
 
-            <!-- 拒绝按钮内置 -->
-            <el-button
-              v-if="endNodeDetail.id"
-              type="danger"
-              @click="submitAction(endNodeDetail)" >{{ endNodeDetail.label }}</el-button>
-            <!-- <div
+              <!-- 拒绝按钮内置 -->
+              <el-button
+                v-if="endNodeDetail.id"
+                type="danger"
+                round
+                @click="submitAction(endNodeDetail)"
+                >{{ endNodeDetail.label }}</el-button
+              >
+
+              <!-- <div
               v-if="isActiveProcessing && currentNode.activeOrder"
             >
               <el-button
@@ -138,8 +257,8 @@
                   {{ item.label }}
                 </el-button>
               </template> -->
-            <!-- </div> -->
-          </div>
+              <!-- </div> -->
+            </div>
           </el-form>
         </div>
       </el-card>
@@ -149,45 +268,32 @@
           <span>工单流转历史</span>
         </div>
         <div class="text item">
-          <el-table
-            :data="circulationHistoryList"
-            border
-            style="width: 100%"
-          >
-            <el-table-column
-              prop="state"
-              label="节点"
-            />
-            <el-table-column
-              prop="circulation"
-              label="流转"
-            />
-            <el-table-column
-              prop="processor"
-              label="处理人"
-            />
-            <el-table-column
-              prop="create_time"
-              label="处理时间"
-            />
-            <el-table-column
-              prop="remarks"
-              label="备注"
-            />
+          <el-table :data="circulationHistoryList" border style="width: 100%">
+            <el-table-column prop="state" label="节点" />
+            <el-table-column prop="circulation" label="流转" />
+            <el-table-column prop="processor" label="处理人" />
+            <el-table-column prop="create_time" label="处理时间" />
+            <el-table-column prop="remarks" label="备注" />
           </el-table>
         </div>
       </el-card>
     </div>
+    <el-dialog title="转交工单" :visible.sync="dialogVisible" width="30%">
+      <TransferInversion
+        v-if="dialogVisible"
+        :selectItem="selectItem"
+        @getList="getProcessNodeList"
+        @close="dialogVisible = false"
+      />
+    </el-dialog>
   </div>
 </template>
 
 <script>
-import Vue from 'vue'
-import {
-  GenerateForm
-} from '@/components/VueFormMaking'
-import 'form-making/dist/FormMaking.css'
-Vue.component(GenerateForm.name, GenerateForm)
+import Vue from "vue";
+import { GenerateForm } from "@/components/VueFormMaking";
+import "form-making/dist/FormMaking.css";
+Vue.component(GenerateForm.name, GenerateForm);
 
 import {
   processStructure,
@@ -196,14 +302,19 @@ import {
   asyncPlayLog,
   queryUserInfo,
   queryAllOrgan
-} from '@/api/process/work-order'
-import store from '@/store'
-import { getInfo } from '@/api/user'
+} from "@/api/process/work-order";
+import store from "@/store";
+import { getInfo } from "@/api/user";
 
-import { listUser } from '@/api/system/sysuser'
+import { listUser } from "@/api/system/sysuser";
+import TransferInversion from "./model/transferInversion";
+import load from "@/utils/loading";
 
-import { mapGetters } from 'vuex'
+import { mapGetters } from "vuex";
 export default {
+  components: {
+    TransferInversion
+  },
   data() {
     return {
       isLoadingStatus: true,
@@ -215,25 +326,27 @@ export default {
       tpls: [],
       organList: [],
       dataList: {
-        remarks: '', // 备注信息
+        remarks: "" // 备注信息
       },
-      alertMessage: '',
+      userInfo: {},
+      alertMessage: "",
       nodeStepList: [],
       circulationHistoryList: [],
+      circulationList: [],
       activeIndex: 0,
       processStructureValue: {
-        workOrder: { title: '' }
+        workOrder: { title: "" }
       },
       endNodeDetail: {}, // 结束结节信息
       ruleForm: {
-        title: '',
-        process: '',
-        classify: '',
-        state_id: '',
-        state: '',
-        source_state: '',
-        processor: '',
-        process_method: '',
+        title: "",
+        process: "",
+        classify: "",
+        state_id: "",
+        state: "",
+        source_state: "",
+        processor: "",
+        process_method: "",
         tpls: [],
         tasks: []
       },
@@ -248,43 +361,75 @@ export default {
           listUser({
             pageSize: 999999
           }).then(response => {
-            const options = response.data.list
-            resolve(options)
-          })
+            const options = response.data.list;
+            resolve(options);
+          });
         }
+      },
+      dialogVisible: false,
+      selectItem: {
+        work_order_id: "",
+        node_id: null,
+        nodeList: [],
+        users: []
       }
-    }
+    };
   },
   computed: {
-    ...mapGetters([
-      'userId'
-    ])
+    ...mapGetters(["userId"])
   },
   async created() {
-    await this.getUserInfo()
-    await this.getAllOrgan()
-    await this.getProcessNodeList()
+    await this.getUserInfo();
+    await this.getAllOrgan();
+    await this.getProcessNodeList();
     // 获取用户信息
     try {
-        let user = await getInfo()
-        this.userInfo = user.data
-        console.log(this.processStructureValue.workOrder.creator, user.data.userId)
-        this.ownerApply = this.processStructureValue.workOrder.creator == user.data.userId ? true : false
+      let user = await getInfo();
+      this.userInfo = user.data;
+      // console.log(
+      //   this.processStructureValue.workOrder.creator,
+      //   user.data.userId
+      // );
+      this.ownerApply =
+        this.processStructureValue.workOrder.creator == user.data.userId
+          ? true
+          : false;
     } catch {
-        //
+      //
     }
   },
   methods: {
+    async handleInversion() {
+      let workOrder = this.processStructureValue.workOrder;
+      this.selectItem.work_order_id = workOrder.id;
+      this.selectItem.nodeList = workOrder.state || [];
+      this.selectItem.nodeList.forEach(item => {
+        item.text = item.label;
+      });
+      if (this.selectItem.nodeList.length === 1) {
+        this.selectItem.node_id = this.selectItem.nodeList[0].id;
+      }
+      if (this.selectItem.users.length <= 0) {
+        load.startLoading();
+        await listUser({
+          pageSize: 999999
+        }).then(response => {
+          this.selectItem.users = response.data.list;
+        });
+        load.endLoading();
+      }
+      this.dialogVisible = true;
+    },
     async getUserInfo() {
       await queryUserInfo().then(res => {
-        console.log(res)
-        if(res.code == 200) {
-          this.userIds = res.data.id
-          this.tenantId = res.data.tenantId
+        // console.log(res);
+        if (res.code == 200) {
+          this.userIds = res.data.id;
+          this.tenantId = res.data.tenantId;
         } else {
-          this.$message.error(res.data)
+          this.$message.error(res.data);
         }
-      })
+      });
     },
     async getProcessNodeList() {
       await processStructure({
@@ -293,10 +438,8 @@ export default {
         userId: this.userIds
       }).then(response => {
         let tempData = response.data.tpls;
-        console.log(response);
         // 获取对应模板中，下拉框的key, value
         let selectList = this.getSelectValueObject(tempData);
-        console.log(selectList);
 
         // 获取对应模板中，需要隐藏的字段
         let hiddenFormList = this.getSelectValueObject(
@@ -349,80 +492,174 @@ export default {
             }
           });
         });
-        this.isActiveProcessing = false
-        this.processStructureValue = response.data
-        this.circulationHistoryList = this.processStructureValue.circulationHistory
+        this.isActiveProcessing = false;
+        this.processStructureValue = response.data;
+        this.circulationHistoryList = this.processStructureValue.circulationHistory;
+        this.circulationList = JSON.parse(
+          JSON.stringify(this.circulationHistoryList)
+        );
+
         // 获取当前展示节点列表
-        this.nodeStepList = []
-        if(this.processStructureValue.nodes) {
-          for (var i = 0; i < this.processStructureValue.nodes.length; i++) {
-            if (this.processStructureValue.nodes[i].id === this.processStructureValue.workOrder.current_state) {
-              // 当前节点
-              this.nodeStepList.push(this.processStructureValue.nodes[i])
-              this.activeIndex = this.nodeStepList.length - 1
-              if (i + 1 === this.processStructureValue.nodes.length) {
-                this.activeIndex = this.nodeStepList.length
-              }
-              this.currentNode = this.processStructureValue.nodes[i]
-            } else if (!this.processStructureValue.nodes[i].isHideNode) {
-              // 非隐藏节点
-              this.nodeStepList.push(this.processStructureValue.nodes[i])
+        // this.nodeStepList = this.processStructureValue.circulationHistory
+
+        // 获取当前展示节点列表
+        this.nodeStepList = [];
+        let nodes = this.processStructureValue.nodes;
+        this.principals = "处理中";
+        for (var i = 0; i < nodes.length; i++) {
+          if (
+            nodes[i].id === this.processStructureValue.workOrder.current_state
+          ) {
+            // 当前节点
+            this.nodeStepList.push(nodes[i]);
+            this.activeIndex = this.nodeStepList.length - 1;
+            if (i + 1 === nodes.length) {
+              this.activeIndex = this.nodeStepList.length;
             }
+            this.currentNode = nodes[i];
+
+            // 处理是认谁在处理,已处理完成则显示处理中
+            const assignUsers = nodes[i].assignUsers;
+            if (assignUsers && assignUsers.length > 0) {
+              this.principals = assignUsers[0].username + "处理中";
+            }
+          } else if (!nodes[i].isHideNode) {
+            // 非隐藏节点
+            this.nodeStepList.push(nodes[i]);
+          }
+
+          // 判断节点里面是否有结束节点，而且一个流程里面只能有一个结束结点，
+          if (nodes[i].clazz == "end") {
+            this.endNodeDetail = JSON.parse(JSON.stringify(nodes[i]));
+            this.endNodeDetail.target = nodes[i].id;
+            this.endNodeDetail.flowProperties = 0; // 拒绝属性
+            this.endNodeDetail.label = "拒绝";
           }
         }
+        this.circulationList.reverse();
+        // 如果审批流程没有结束则，流程和历史记录合并显示；结束了，就只显示历史记录
+        if (!this.is_end) {
+          this.circulationList.forEach(cir => {
+            this.nodeStepList.forEach(node => {
+              if (cir.source == node.id) {
+                cir.label = node.label;
+                cir.assignType = node.assignType;
+                cir.assignValue = node.assignValue;
+                cir.assignUsers = node.assignUsers;
+                cir.id = node.id;
+              }
+            });
+          });
+
+          let tempNodes = [];
+          this.nodeStepList.forEach(node => {
+            let count = 0;
+            this.circulationList.forEach(cir => {
+              if (node.id === cir.source) {
+                count += 1;
+              }
+            });
+            if (count <= 0) {
+              tempNodes.push(node);
+            }
+          });
+          this.circulationList.push(...tempNodes);
+          this.circulationList.forEach((cir, index) => {
+            if (cir.id == this.processStructureValue.workOrder.current_state) {
+              this.activeIndex = index;
+              if (index + 1 == this.circulationList.length) {
+                this.activeIndex = this.circulationList.length;
+              }
+            }
+          });
+        } else {
+          this.activeIndex = this.circulationList.length;
+        }
+        // 添加抄送状态
+        this.circulationList.forEach(res => {
+          res.ccStatus = true;
+        });
+
+        // console.log(this.nodeStepList);
+        // console.log(this.circulationList);
+
+        // if(this.processStructureValue.nodes) {
+        // for (var i = 0; i < this.processStructureValue.nodes.length; i++) {
+        //   if (this.processStructureValue.nodes[i].id === this.processStructureValue.workOrder.current_state) {
+        //     // 当前节点
+        //     this.nodeStepList.push(this.processStructureValue.nodes[i])
+        //     this.activeIndex = this.nodeStepList.length - 1
+        //     if (i + 1 === this.processStructureValue.nodes.length) {
+        //       this.activeIndex = this.nodeStepList.length
+        //     }
+        //     this.currentNode = this.processStructureValue.nodes[i]
+        //   } else if (!this.processStructureValue.nodes[i].isHideNode) {
+        //     // 非隐藏节点
+        //     this.nodeStepList.push(this.processStructureValue.nodes[i])
+        //   }
+        // }
+        // }
 
         // 如果回退到初始节点则可编辑。
-        if (this.activeIndex === 0 && this.currentNode.clazz === 'start') {
-          this.currentNode.writeTpls = []
+        if (this.activeIndex === 0 && this.currentNode.clazz === "start") {
+          this.currentNode.writeTpls = [];
           for (var tplTmp of this.processStructureValue.tpls) {
-            this.currentNode.writeTpls.push(tplTmp.form_structure.id)
+            this.currentNode.writeTpls.push(tplTmp.form_structure.id);
           }
         }
 
         // 判断是否需要主动处理
         for (var stateValue of this.processStructureValue.workOrder.state) {
-          if (this.processStructureValue.workOrder.current_state === stateValue.id && stateValue.processor.length > 1) {
-            this.isActiveProcessing = true
-            break
+          if (
+            this.processStructureValue.workOrder.current_state ===
+              stateValue.id &&
+            stateValue.processor.length > 1
+          ) {
+            this.isActiveProcessing = true;
+            break;
           }
         }
 
-        const nodes = this.processStructureValue.nodes
-        for (var i = 0; i < nodes.length; i++) {
-            // 判断节点里面是否有结束节点，而且一个流程里面只能有一个结束结点，
-            if(nodes[i].clazz == 'end') {
-                this.endNodeDetail = JSON.parse(JSON.stringify(nodes[i]))
-                this.endNodeDetail.target = nodes[i].id
-                this.endNodeDetail.flowProperties = 0 // 拒绝属性
-                this.endNodeDetail.label = '拒绝'
-            }
-        }
+        // const nodes = this.processStructureValue.nodes;
+        // for (var i = 0; i < nodes.length; i++) {
+        //   // 判断节点里面是否有结束节点，而且一个流程里面只能有一个结束结点，
+        //   if (nodes[i].clazz == "end") {
+        //     this.endNodeDetail = JSON.parse(JSON.stringify(nodes[i]));
+        //     this.endNodeDetail.target = nodes[i].id;
+        //     this.endNodeDetail.flowProperties = 0; // 拒绝属性
+        //     this.endNodeDetail.label = "拒绝";
+        //   }
+        // }
 
-        let psv = response.data.edges || []
-        let btn_group = []
+        let psv = response.data.edges || [];
+        let btn_group = [];
         psv.forEach(item => {
-            // 过滤其它类型的操作
-            if(this.processStructureValue.workOrder.is_end===0 && item.source===this.currentNode.id && item.flowProperties == 1) {
-                if(item.flowProperties == 1) {
-                    item.className = 'primary'
-                    item.labelShow = '同意'
-                } else if(item.flowProperties == 0) {
-                    item.className = 'danger'
-                } else if(item.flowProperties == 2) {
-                    item.className = 'primary'
-                }
-                btn_group.push(item)
-            } else {
-                item.className = 'primary'
+          // 过滤其它类型的操作
+          if (
+            this.processStructureValue.workOrder.is_end === 0 &&
+            item.source === this.currentNode.id &&
+            item.flowProperties == 1
+          ) {
+            if (item.flowProperties == 1) {
+              item.className = "primary";
+              item.labelShow = "同意";
+            } else if (item.flowProperties == 0) {
+              item.className = "danger";
+            } else if (item.flowProperties == 2) {
+              item.className = "primary";
             }
-        })
-        this.btn_group = btn_group
+            btn_group.push(item);
+          } else {
+            item.className = "primary";
+          }
+        });
+        this.btn_group = btn_group;
 
-        this.isLoadingStatus = false
-        this.getAlertMessage()
-      })
+        this.isLoadingStatus = false;
+        this.getAlertMessage();
+      });
     },
-     getSelectValueObject(tpls, type = "value", tplValues = []) {
+    getSelectValueObject(tpls, type = "value", tplValues = []) {
       const tempData = tpls || [];
       let selectList = [];
       tempData.forEach((temp, index) => {
@@ -526,99 +763,127 @@ export default {
       return modelStatus;
     },
     submitAction(item) {
-      var promiseList = []
-      this.tpls = []
+      var promiseList = [];
+      this.tpls = [];
       for (var tpl of this.processStructureValue.tpls) {
         this.tpls.push({
           tplDataId: tpl.id,
           tplId: tpl.form_structure.id
-        })
-        promiseList.push(this.$refs['generateForm-' + tpl.id][0].getData())
+        });
+        promiseList.push(this.$refs["generateForm-" + tpl.id][0].getData());
       }
-      this.$refs['dataFrom'].validate(_ => {
-        if(_) {
+      this.$refs["dataFrom"].validate(_ => {
+        if (_) {
           Promise.all(promiseList).then(values => {
             for (var tplDataIndex in this.tpls) {
-              this.tpls[tplDataIndex].tplValue = values[tplDataIndex]
+              this.tpls[tplDataIndex].tplValue = values[tplDataIndex];
             }
 
-            let fileList = []
-            this.tpls && this.tpls.forEach(tpl => {
-                for(let val in tpl.tplValue) {
-                    if(val.indexOf('file') != -1) {
-                        const file = tpl.tplValue[val] || []
-                        file.forEach(item => {
-                            fileList.push(item.url)
-                        })
-                    }
+            let fileList = [];
+            this.tpls &&
+              this.tpls.forEach(tpl => {
+                for (let val in tpl.tplValue) {
+                  if (val.indexOf("file") != -1) {
+                    const file = tpl.tplValue[val] || [];
+                    file.forEach(item => {
+                      fileList.push(item.url);
+                    });
+                  }
                 }
-            })
+              });
             handleWorkOrder({
               tasks: this.processStructureValue.process.task,
               source_state: this.processStructureValue.workOrder.current_state,
               target_state: item.target,
               circulation: item.label,
-              flow_properties: item.flowProperties === undefined ? 2 : parseInt(item.flowProperties),
+              flow_properties:
+                item.flowProperties === undefined
+                  ? 2
+                  : parseInt(item.flowProperties),
               work_order_id: parseInt(this.$route.query.workOrderId),
               remarks: this.dataList.remarks,
               tpls: this.tpls
-            }).then(async (response) => {
+            }).then(async response => {
               if (response.code === 200) {
-              // this.$router.push({ name: 'upcoming' })
+                // this.$router.push({ name: 'upcoming' })
 
-                await asyncPlayLog({ workOrderId: parseInt(this.$route.query.workOrderId), fileUrl: fileList.join(',') })
-              // window.location.reload()
-                this.getProcessNodeList()
+                await asyncPlayLog({
+                  workOrderId: parseInt(this.$route.query.workOrderId),
+                  fileUrl: fileList.join(",")
+                });
+                // window.location.reload()
+                this.getProcessNodeList();
 
-                await store.dispatch('user/getInitData')
+                await store.dispatch("user/getInitData");
               }
-            })
-          })
+            });
+          });
         }
-      })
+      });
     },
     // 获取提示消息
     getAlertMessage() {
       if (this.processStructureValue.workOrder.is_end === 1) {
-        this.alertMessage = '当前工单已结束。'
+        this.alertMessage = "当前工单已结束。";
       }
     },
-    activeOrderActive() {
-      var jsonData = [{
-        id: this.nodeStepList[this.activeIndex].id,
-        label: this.nodeStepList[this.activeIndex].label,
-        process_method: 'person',
-        processor: [this.userId]
-      }]
-      activeOrder(jsonData, this.$route.query.workOrderId).then(() => {
-        this.getProcessNodeList()
-      })
-    },
+    // activeOrderActive() {
+    //   var jsonData = [{
+    //     id: this.nodeStepList[this.activeIndex].id,
+    //     label: this.nodeStepList[this.activeIndex].label,
+    //     process_method: 'person',
+    //     processor: [this.userId]
+    //   }]
+    //   activeOrder(jsonData, this.$route.query.workOrderId).then(() => {
+    //     this.getProcessNodeList()
+    //   })
+    // },
     async getAllOrgan() {
       await queryAllOrgan({ tenantId: this.tenantId }).then(res => {
         if (res.code == 200) {
           const result = res.data;
-          const filterOrganId = [36, 39, 41, 42, 43, 44, 45, 46, 47, 48, 49, 50, 52, 54, 55, 56]
-          let tempOrgan = []
+          const filterOrganId = [
+            36,
+            39,
+            41,
+            42,
+            43,
+            44,
+            45,
+            46,
+            47,
+            48,
+            49,
+            50,
+            52,
+            54,
+            55,
+            56
+          ];
+          let tempOrgan = [];
           // 过滤不会显示的分部
           result.forEach(item => {
             if (!filterOrganId.includes(item.id)) {
-              tempOrgan.push(item)
+              tempOrgan.push(item);
             }
-          })
-          this.organList = tempOrgan
+          });
+          this.organList = tempOrgan;
         }
-      })
+      });
     }
   }
-}
+};
 </script>
 
 <style lang="scss" scoped>
 /deep/ .el-step__title {
-  font-size: 14px;
+  font-size: 13px;
   line-height: 1.3;
-  width: 80%;
+  width: 100%;
   padding-top: 10px;
+  padding-right: 10px;
 }
-</style>
+// /deep/.el-step__icon.is-text {
+//   border: 0;
+// }
+</style>

src/views/process/list/model/transferInversion.vue

@@ -0,0 +1,112 @@
+<template>
+  <el-form
+    ref="ruleForm"
+    :model="ruleForm"
+    :rules="rules"
+    label-width="60px"
+    class="demo-ruleForm transferInversion"
+  >
+    <el-form-item label="节点" prop="node_id">
+      <el-select
+        v-model="ruleForm.node_id"
+        placeholder="选择节点"
+        size="small"
+        style="width: 100%"
+      >
+        <el-option
+          v-for="(item, index) in nodeList"
+          :key="index"
+          :label="item.label"
+          :value="item.id"
+        />
+      </el-select>
+    </el-form-item>
+    <el-form-item label="用户" prop="user_id">
+      <el-select
+        v-model="ruleForm.user_id"
+        placeholder="选择用户"
+        filterable
+        size="small"
+        style="width: 100%"
+      >
+        <el-option
+          v-for="(item, index) in users"
+          :key="index"
+          :label="item.nickName"
+          :value="item.userId"
+        >
+          <span style="float: left">{{ item.nickName }}</span>
+          <span style="float: right; color: #8492a6; font-size: 13px">{{
+            item.phone
+          }}</span>
+        </el-option>
+      </el-select>
+    </el-form-item>
+    <el-form-item label="备注">
+      <el-input v-model="ruleForm.remarks" type="textarea" size="small" />
+    </el-form-item>
+    <el-form-item style="text-align: right">
+      <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
+      <el-button @click="$listeners.close()">关闭</el-button>
+    </el-form-item>
+  </el-form>
+</template>
+
+<script>
+import { inversionWorkOrder } from "@/api/process/work-order";
+import store from "@/store";
+import load from "@/utils/loading";
+export default {
+  name: "transferInversion",
+  props: {
+    selectItem: {
+      type: Object,
+      default: {}
+    }
+  },
+  data() {
+    return {
+      users: [],
+      nodeList: [],
+      dialogVisible: false,
+      ruleForm: {
+        work_order_id: "",
+        node_id: "",
+        user_id: "",
+        remarks: ""
+      },
+      rules: {
+        node_id: [{ required: true, message: "请选择节点", trigger: "change" }],
+        user_id: [{ required: true, message: "请选择用户", trigger: "change" }]
+      }
+    };
+  },
+  mounted() {
+    const { node_id, work_order_id, nodeList, users } = this.selectItem;
+    this.ruleForm.work_order_id = work_order_id;
+    this.ruleForm.node_id = node_id;
+    this.nodeList = nodeList;
+    this.users = users;
+  },
+  methods: {
+    submitForm(formName) {
+      this.$refs[formName].validate(valid => {
+        if (valid) {
+          load.startLoading();
+          inversionWorkOrder(this.ruleForm).then(response => {
+            load.endLoading();
+            if (response.code === 200) {
+              this.$message.success("转交成功");
+              this.$listeners.close();
+              this.$listeners.getList();
+              this.dialogVisible = false;
+              // 初始化显示数据
+              store.dispatch("user/getInitData");
+            }
+          });
+        }
+      });
+    }
+  }
+};
+</script>

src/views/process/list/my-create.vue

@@ -7,11 +7,24 @@
         </el-form>
       </el-form>
 
-      <el-table v-loading="loading" border :data="ticketList" @selection-change="handleSelectionChange">
+      <el-table
+        v-loading="loading"
+        border
+        :data="ticketList"
+        @selection-change="handleSelectionChange"
+      >
         <!-- <el-table-column type="selection" width="55" align="center" /> -->
         <el-table-column label="ID" prop="id" width="120" />
-        <el-table-column label="标题" prop="title" :show-overflow-tooltip="true" />
-        <el-table-column label="流程" prop="process_name" :show-overflow-tooltip="true" />
+        <el-table-column
+          label="标题"
+          prop="title"
+          :show-overflow-tooltip="true"
+        />
+        <el-table-column
+          label="流程"
+          prop="process_name"
+          :show-overflow-tooltip="true"
+        />
         <el-table-column label="当前状态" :show-overflow-tooltip="true">
           <template slot-scope="scope">
             <span>
@@ -21,15 +34,29 @@
         </el-table-column>
         <el-table-column label="当前处理人" :show-overflow-tooltip="true">
           <template slot-scope="scope">
-            <span v-if="scope.row.is_end===0">{{ scope.row.principals }}</span>
+            <span v-if="scope.row.is_end === 0">{{
+              scope.row.principals
+            }}</span>
           </template>
         </el-table-column>
-        <el-table-column label="优先级" :show-overflow-tooltip="true" width="120" align="left">
+        <el-table-column label="工单结束状态">
           <template slot-scope="scope">
-            <span v-if="scope.row.priority===2">
+            <span>
+              {{ scope.row.endType | orderStatus }}
+            </span>
+          </template>
+        </el-table-column>
+        <el-table-column
+          label="优先级"
+          :show-overflow-tooltip="true"
+          width="120"
+          align="left"
+        >
+          <template slot-scope="scope">
+            <span v-if="scope.row.priority === 2">
               <el-tag type="warning">紧急</el-tag>
             </span>
-            <span v-else-if="scope.row.priority===3">
+            <span v-else-if="scope.row.priority === 3">
               <el-tag type="danger">非常紧急</el-tag>
             </span>
             <span v-else>
@@ -37,18 +64,35 @@
             </span>
           </template>
         </el-table-column>
-        <el-table-column label="是否结束" :show-overflow-tooltip="true" width="80" align="center">
+        <el-table-column
+          label="是否结束"
+          :show-overflow-tooltip="true"
+          width="80"
+          align="center"
+        >
           <template slot-scope="scope">
-            <el-tag v-if="scope.row.is_end===0" size="mini" type="success">否</el-tag>
+            <el-tag v-if="scope.row.is_end === 0" size="mini" type="success"
+              >否</el-tag
+            >
             <el-tag v-else size="mini" type="danger">是</el-tag>
           </template>
         </el-table-column>
-        <el-table-column label="创建时间" align="center" prop="create_time" width="180">
+        <el-table-column
+          label="创建时间"
+          align="center"
+          prop="create_time"
+          width="180"
+        >
           <template slot-scope="scope">
             <span>{{ parseTime(scope.row.create_time) }}</span>
           </template>
         </el-table-column>
-        <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="180">
+        <el-table-column
+          label="操作"
+          align="center"
+          class-name="small-padding fixed-width"
+          width="180"
+        >
           <template slot-scope="scope">
             <el-button
               v-permisaction="['process:list:myCreate:select']"
@@ -56,15 +100,17 @@
               type="text"
               icon="el-icon-edit"
               @click="handleView(scope.row)"
-            >查看</el-button>
+              >查看</el-button
+            >
             <el-button
-              v-if="scope.row.is_end===0"
+              v-if="scope.row.is_end === 0"
               v-permisaction="['process:list:myCreate:end']"
               size="mini"
               type="text"
               icon="el-icon-switch-button"
               @click="handleUnity(scope.row)"
-            >关闭</el-button>
+              >关闭</el-button
+            >
             <!-- <el-button
               v-permisaction="['process:list:myCreate:reopen']"
               size="mini"
@@ -73,19 +119,20 @@
               @click="handleReopen(scope.row.id)"
             >重开</el-button> -->
             <el-button
-              v-if="scope.row.is_end===0"
+              v-if="scope.row.is_end === 0"
               v-permisaction="['process:list:upcoming:urge']"
               size="mini"
               type="text"
               icon="el-icon-alarm-clock"
               @click="handleUrge(scope.row)"
-            >催办</el-button>
+              >催办</el-button
+            >
           </template>
         </el-table-column>
       </el-table>
 
       <pagination
-        v-show="total>0"
+        v-show="total > 0"
         :total="total"
         :page.sync="queryParams.pageIndex"
         :limit.sync="queryParams.pageSize"
@@ -96,10 +143,15 @@
 </template>
 
 <script>
-import { workOrderList, urgeWorkOrder, reopenWorkOrder, unityWorkOrder } from '@/api/process/work-order'
+import {
+  workOrderList,
+  urgeWorkOrder,
+  reopenWorkOrder,
+  unityWorkOrder
+} from "@/api/process/work-order";
 
 // 搜索
-import WorkOrderSearch from './components/search/index'
+import WorkOrderSearch from "./components/search/index";
 export default {
   components: { WorkOrderSearch },
   data() {
@@ -115,109 +167,114 @@ export default {
         per_page: 10
       },
       ruleForm: {
-        work_order_id: '',
-        node_id: '',
-        user_id: '',
-        remarks: ''
+        work_order_id: "",
+        node_id: "",
+        user_id: "",
+        remarks: ""
       },
       rules: {
-        node_id: [
-          { required: true, message: '请选择节点', trigger: 'change' }
-        ],
-        user_id: [
-          { required: true, message: '请选择用户', trigger: 'change' }
-        ]
+        node_id: [{ required: true, message: "请选择节点", trigger: "change" }],
+        user_id: [{ required: true, message: "请选择用户", trigger: "change" }]
       }
-    }
+    };
   },
   created() {
-    this.getList()
+    this.getList();
   },
   methods: {
     getList() {
-      this.loading = true
-      this.listQuery.page = this.queryParams.pageIndex
-      this.listQuery.per_page = this.queryParams.pageSize
-      this.listQuery.classify = 2
+      this.loading = true;
+      this.listQuery.page = this.queryParams.pageIndex;
+      this.listQuery.per_page = this.queryParams.pageSize;
+      this.listQuery.classify = 2;
       workOrderList(this.listQuery).then(response => {
-        this.ticketList = response.data.data
-        this.queryParams.pageIndex = response.data.page
-        this.queryParams.pageSize = response.data.per_page
-        this.total = response.data.total_count
-        this.loading = false
-      })
+        this.ticketList = response.data.data;
+        this.queryParams.pageIndex = response.data.page;
+        this.queryParams.pageSize = response.data.per_page;
+        this.total = response.data.total_count;
+        this.loading = false;
+      });
     },
     handleSearch(val) {
       for (var k in val) {
-        this.listQuery[k] = val[k]
+        this.listQuery[k] = val[k];
       }
-      this.getList()
+      this.getList();
     },
     handleView(row) {
-      this.$router.push({ name: 'ProcessListHandle', query: { workOrderId: row.id, processId: row.process }})
+      this.$router.push({
+        name: "ProcessListHandle",
+        query: { workOrderId: row.id, processId: row.process }
+      });
     },
     handleReopen(id) {
-      this.$confirm('根据此工单新建一个新的工单?', '提示', {
-        confirmButtonText: '确定',
-        cancelButtonText: '取消',
-        type: 'info'
+      this.$confirm("根据此工单新建一个新的工单?", "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "info"
       }).then(() => {
         reopenWorkOrder(id).then(res => {
-          this.getList()
+          this.getList();
           this.$message({
-            type: 'success',
-            message: '成功!'
-          })
-        })
-      })
+            type: "success",
+            message: "成功!"
+          });
+        });
+      });
     },
     handleUnity(row) {
-      this.$confirm('此操作将会结束该工单, 是否继续?', '提示', {
-        confirmButtonText: '确定',
-        cancelButtonText: '取消',
-        type: 'warning'
-      }).then(() => {
-        unityWorkOrder({
-          work_oroder_id: row.id
-        }).then(response => {
-          if (response.code === 200) {
-            this.getList()
-          }
-        })
-      }).catch(() => {
-        this.$message({
-          type: 'info',
-          message: '已取消'
-        })
+      this.$confirm("此操作将会结束该工单, 是否继续?", "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning"
       })
+        .then(() => {
+          unityWorkOrder({
+            work_oroder_id: row.id
+          }).then(response => {
+            if (response.code === 200) {
+              this.getList();
+            }
+          });
+        })
+        .catch(() => {
+          this.$message({
+            type: "info",
+            message: "已取消"
+          });
+        });
     },
     handleSelectionChange() {},
     handleUrge(row) {
-      this.$confirm('<span style="font-size:15px ">对此工单处理人进行催办通知提醒, 是否继续?</span><br><span style="color: #c33; font-size: 10px">注意：十分钟内只能催办一次。</span>', '催办', {
-        dangerouslyUseHTMLString: true,
-        confirmButtonText: '确定',
-        cancelButtonText: '取消',
-        type: 'warning'
-      }).then(() => {
-        urgeWorkOrder({
-          workOrderId: row.id
-        }).then(response => {
-          this.$message({
-            type: 'success',
-            message: '已进行催办通知!'
-          })
-        })
-      }).catch(() => {
-        this.$message({
-          type: 'info',
-          message: '已取消'
+      this.$confirm(
+        '<span style="font-size:15px ">对此工单处理人进行催办通知提醒, 是否继续?</span><br><span style="color: #c33; font-size: 10px">注意：十分钟内只能催办一次。</span>',
+        "催办",
+        {
+          dangerouslyUseHTMLString: true,
+          confirmButtonText: "确定",
+          cancelButtonText: "取消",
+          type: "warning"
+        }
+      )
+        .then(() => {
+          urgeWorkOrder({
+            workOrderId: row.id
+          }).then(response => {
+            this.$message({
+              type: "success",
+              message: "已进行催办通知!"
+            });
+          });
         })
-      })
+        .catch(() => {
+          this.$message({
+            type: "info",
+            message: "已取消"
+          });
+        });
     }
   }
-}
+};
 </script>
 
-<style scoped>
-
-</style>
+<style scoped></style>

src/views/process/list/related.vue

@@ -39,6 +39,13 @@
             }}</span>
           </template>
         </el-table-column>
+        <el-table-column label="工单结束状态">
+          <template slot-scope="scope">
+            <span>
+              {{ scope.row.endType | orderStatus }}
+            </span>
+          </template>
+        </el-table-column>
         <el-table-column
           label="优先级"
           :show-overflow-tooltip="true"

src/views/process/list/upcoming.vue

@@ -39,6 +39,13 @@
             }}</span>
           </template>
         </el-table-column>
+        <el-table-column label="工单结束状态">
+          <template slot-scope="scope">
+            <span>
+              {{ scope.row.endType | orderStatus }}
+            </span>
+          </template>
+        </el-table-column>
         <el-table-column
           label="优先级"
           :show-overflow-tooltip="true"
@@ -109,59 +116,12 @@
       </el-table>
 
       <el-dialog title="转交工单" :visible.sync="dialogVisible" width="30%">
-        <el-form
-          ref="ruleForm"
-          :model="ruleForm"
-          :rules="rules"
-          label-width="60px"
-          class="demo-ruleForm"
-        >
-          <el-form-item label="节点" prop="node_id">
-            <el-select
-              v-model="ruleForm.node_id"
-              placeholder="选择节点"
-              size="small"
-              style="width: 100%"
-            >
-              <el-option
-                v-for="(item, index) in nodeList"
-                :key="index"
-                :label="item.label"
-                :value="item.id"
-              />
-            </el-select>
-          </el-form-item>
-          <el-form-item label="用户" prop="user_id">
-            <el-select
-              v-model="ruleForm.user_id"
-              placeholder="选择用户"
-              filterable
-              size="small"
-              style="width: 100%"
-            >
-              <el-option
-                v-for="(item, index) in users"
-                :key="index"
-                :label="item.nickName"
-                :value="item.userId"
-              >
-                <span style="float: left">{{ item.nickName }}</span>
-                <span style="float: right; color: #8492a6; font-size: 13px">{{
-                  item.phone
-                }}</span>
-              </el-option>
-            </el-select>
-          </el-form-item>
-          <el-form-item label="备注">
-            <el-input v-model="ruleForm.remarks" type="textarea" size="small" />
-          </el-form-item>
-          <el-form-item style="text-align: right">
-            <el-button type="primary" @click="submitForm('ruleForm')"
-              >提交</el-button
-            >
-            <el-button @click="dialogVisible = false">关闭</el-button>
-          </el-form-item>
-        </el-form>
+        <TransferInversion
+          v-if="dialogVisible"
+          :selectItem="selectItem"
+          @getList="getList"
+          @close="dialogVisible = false"
+        />
       </el-dialog>
 
       <pagination
@@ -176,15 +136,16 @@
 </template>
 
 <script>
-import { workOrderList, inversionWorkOrder } from "@/api/process/work-order";
+import { workOrderList } from "@/api/process/work-order";
 import { listUser } from "@/api/system/sysuser";
 import { initNumberHtml } from "@/utils/costum";
-
+import TransferInversion from "./model/transferInversion";
+import load from "@/utils/loading";
 // 搜索
 import WorkOrderSearch from "./components/search/index";
 
 export default {
-  components: { WorkOrderSearch },
+  components: { WorkOrderSearch, TransferInversion },
   data() {
     return {
       users: [],
@@ -198,15 +159,11 @@ export default {
         page: 1,
         per_page: 10
       },
-      ruleForm: {
+      selectItem: {
         work_order_id: "",
-        node_id: "",
-        user_id: "",
-        remarks: ""
-      },
-      rules: {
-        node_id: [{ required: true, message: "请选择节点", trigger: "change" }],
-        user_id: [{ required: true, message: "请选择用户", trigger: "change" }]
+        node_id: null,
+        nodeList: [],
+        users: []
       }
     };
   },
@@ -241,32 +198,24 @@ export default {
         query: { workOrderId: row.id, processId: row.process }
       });
     },
-    handleInversion(row) {
-      this.dialogVisible = true;
-      this.ruleForm.work_order_id = row.id;
-      this.nodeList = row.state;
-      if (this.nodeList.length === 1) {
-        this.ruleForm.node_id = this.nodeList[0].id;
+    async handleInversion(row) {
+      this.selectItem.work_order_id = row.id;
+      this.selectItem.nodeList = row.state;
+      if (this.selectItem.nodeList.length === 1) {
+        this.selectItem.node_id = this.selectItem.nodeList[0].id;
       }
-      listUser({
-        pageSize: 999999
-      }).then(response => {
-        this.users = response.data.list;
-      });
+      if (this.selectItem.users.length <= 0) {
+        load.startLoading();
+        await listUser({
+          pageSize: 999999
+        }).then(response => {
+          this.selectItem.users = response.data.list;
+        });
+        load.endLoading();
+      }
+      this.dialogVisible = true;
     },
-    handleSelectionChange() {},
-    submitForm(formName) {
-      this.$refs[formName].validate(valid => {
-        if (valid) {
-          inversionWorkOrder(this.ruleForm).then(response => {
-            if (response.code === 200) {
-              this.getList();
-              this.dialogVisible = false;
-            }
-          });
-        }
-      });
-    }
+    handleSelectionChange() {}
   }
 };
 </script>