更新

src/api/process/work-order.js

@@ -1,160 +1,169 @@
-import request from "@/utils/request";
-import qs from "qs";
-
-// 流程结构
-export function processStructure(params) {
-  return request({
-    url: "/api-oa/api/v1/work-order/process-structure",
-    method: "get",
-    params,
-  });
-}
-
-// 新建工单
-export function createWorkOrder(data) {
-  return request({
-    url: "/api-oa/api/v1/work-order/create",
-    method: "post",
-    data,
-  });
-}
-
-// 新建工单
-export function checkCourseReturnFee(data) {
-  return request({
-    url: "/api-web/oa/checkCourseReturnFee",
-    method: "post",
-    data,
-  });
-}
-
-// 工单列表
-export function workOrderList(params) {
-  return request({
-    url: "/api-oa/api/v1/work-order/list",
-    method: "get",
-    params,
-  });
-}
-
-// 处理工单
-export function handleWorkOrder(data) {
-  return request({
-    url: "/api-oa/api/v1/work-order/handle",
-    method: "post",
-    data,
-  });
-}
-
-//
-export function asyncPlayLog(data) {
-  return request({
-    url: "api-web/oa/syncPayLog",
-    method: "post",
-    requestType: "form",
-    data: qs.stringify(data),
-  });
-}
-
-// 结束工单
-export function unityWorkOrder(params) {
-  return request({
-    url: "/api-oa/api/v1/work-order/unity",
-    method: "get",
-    params,
-  });
-}
-
-// 转交工单
-export function inversionWorkOrder(data) {
-  return request({
-    url: "/api-oa/api/v1/work-order/inversion",
-    method: "post",
-    data,
-  });
-}
-
-// 催办工单
-export function urgeWorkOrder(params) {
-  return request({
-    url: "/api-oa/api/v1/work-order/urge",
-    method: "get",
-    params,
-  });
-}
-
-// 主动接单
-export function activeOrder(data, workOrderId) {
-  return request({
-    url: `/api-oa/api/v1/work-order/active-order/${workOrderId}`,
-    method: "put",
-    data,
-  });
-}
-
-// 删除工单
-export function deleteWorkOrder(workOrderId) {
-  return request({
-    url: `/api-oa/api/v1/work-order/delete/${workOrderId}`,
-    method: "delete",
-  });
-}
-
-// 删除工单
-export function reopenWorkOrder(id) {
-  return request({
-    url: `/api-oa/api/v1/work-order/reopen/${id}`,
-    method: "post",
-  });
-}
-
-// 获取所有分部
-export function queryAllOrgan() {
-  return request({
-    url: `/api-web/eduOrganization/queryAllOrgan`,
-    method: "get",
-  });
-}
-
-// 获取所有分部
-export function queryAllToOrgan() {
-  return request({
-    url: `/api-web/eduOrganization/queryAll`,
-    method: "get",
-  });
-}
-
-// 获取所有分部
-export function queryTeacherOrgan(params) {
-  return request({
-    url: "/api-teacher/teacher/queryOrganList",
-    method: "get",
-    params,
-  });
-}
-
-export function queryUserInfo(data) {
-  return request({
-    url: "/api-auth/api/queryUserInfo",
-    method: "get",
-    params: data,
-  });
-}
-
-// 获取合作单位
-export function getOrganCooperation(params) {
-  return request({
-    url: `/api-web/eduOrganization/getOrganCooperation`,
-    method: "get",
-    params,
-  });
-}
-
-// 添加评论
-export function orderComment(data) {
-  return request({
-    url: "/api-oa/api/v1/work-order/comment",
-    method: "post",
-    data,
-  });
-}
+import request from "@/utils/request";
+import qs from "qs";
+
+// 流程结构
+export function processStructure(params) {
+  return request({
+    url: "/api-oa/api/v1/work-order/process-structure",
+    method: "get",
+    params,
+  });
+}
+
+// 新建工单
+export function createWorkOrder(data) {
+  return request({
+    url: "/api-oa/api/v1/work-order/create",
+    method: "post",
+    data,
+  });
+}
+
+// 新建工单
+export function checkCourseReturnFee(data) {
+  return request({
+    url: "/api-web/oa/checkCourseReturnFee",
+    method: "post",
+    data,
+  });
+}
+
+// 工单列表
+export function workOrderList(params) {
+  return request({
+    url: "/api-oa/api/v1/work-order/list",
+    method: "get",
+    params,
+  });
+}
+
+// 处理工单
+export function handleWorkOrder(data) {
+  return request({
+    url: "/api-oa/api/v1/work-order/handle",
+    method: "post",
+    data,
+  });
+}
+
+//
+export function asyncPlayLog(data) {
+  return request({
+    url: "api-web/oa/syncPayLog",
+    method: "post",
+    requestType: "form",
+    data: qs.stringify(data),
+  });
+}
+
+// 结束工单
+export function unityWorkOrder(params) {
+  return request({
+    url: "/api-oa/api/v1/work-order/unity",
+    method: "get",
+    params,
+  });
+}
+
+// 转交工单
+export function inversionWorkOrder(data) {
+  return request({
+    url: "/api-oa/api/v1/work-order/inversion",
+    method: "post",
+    data,
+  });
+}
+
+// 催办工单
+export function urgeWorkOrder(params) {
+  return request({
+    url: "/api-oa/api/v1/work-order/urge",
+    method: "get",
+    params,
+  });
+}
+
+// 主动接单
+export function activeOrder(data, workOrderId) {
+  return request({
+    url: `/api-oa/api/v1/work-order/active-order/${workOrderId}`,
+    method: "put",
+    data,
+  });
+}
+
+// 删除工单
+export function deleteWorkOrder(workOrderId) {
+  return request({
+    url: `/api-oa/api/v1/work-order/delete/${workOrderId}`,
+    method: "delete",
+  });
+}
+
+// 删除工单
+export function reopenWorkOrder(id) {
+  return request({
+    url: `/api-oa/api/v1/work-order/reopen/${id}`,
+    method: "post",
+  });
+}
+
+// 获取所有分部
+export function queryAllOrgan() {
+  return request({
+    url: `/api-web/eduOrganization/queryAllOrgan`,
+    method: "get",
+  });
+}
+
+// 获取所有分部
+export function queryAllToOrgan() {
+  return request({
+    url: `/api-web/eduOrganization/queryAll`,
+    method: "get",
+  });
+}
+
+// 获取所有分部
+export function queryTeacherOrgan(params) {
+  return request({
+    url: "/api-teacher/teacher/queryOrganList",
+    method: "get",
+    params,
+  });
+}
+
+export function queryUserInfo(data) {
+  return request({
+    url: "/api-auth/api/queryUserInfo",
+    method: "get",
+    params: data,
+  });
+}
+
+// 获取合作单位
+export function getOrganCooperation(params) {
+  return request({
+    url: `/api-web/eduOrganization/getOrganCooperation`,
+    method: "get",
+    params,
+  });
+}
+
+// 添加评论
+export function orderComment(data) {
+  return request({
+    url: "/api-oa/api/v1/work-order/comment",
+    method: "post",
+    data,
+  });
+}
+
+// 判断是否有更新模板
+export function checkTlpUpdate(data) {
+  return request({
+    url: "/api-oa/api/v1/work-order/checkTlpUpdate",
+    method: "get",
+    params: data,
+  });
+}

src/views/process/list/all.vue

@@ -1,332 +1,344 @@
-<template>
-  <div class="app-container">
-    <el-card class="box-card">
-      <save-form ref="listQuery" :model="listQuery" :inline="true">
-        <WorkOrderSearch
-          :genre="'all'"
-          :list="listQuery"
-          @handleSearch="handleSearch"
-        />
-      </save-form>
-
-      <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="流程"
-          width="150"
-          prop="process_name"
-          :show-overflow-tooltip="true"
-        />
-        <el-table-column label="当前状态" :show-overflow-tooltip="true">
-          <template slot-scope="scope">
-            <span>
-              {{ scope.row.state_name }}
-            </span>
-          </template>
-        </el-table-column>
-        <el-table-column
-          label="申请人"
-          :show-overflow-tooltip="true"
-          prop="creator_name"
-        >
-        </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>
-          </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"
-          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">
-              <el-tag type="danger">非常紧急</el-tag>
-            </span>
-            <span v-else>
-              <el-tag type="success">一般</el-tag>
-            </span>
-          </template>
-        </el-table-column>
-        <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-else size="mini" type="danger">是</el-tag>
-          </template>
-        </el-table-column>
-        <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"
-          prop="update_time"
-          width="180"
-        >
-          <template slot-scope="scope">
-            <span>{{ parseTime(scope.row.update_time) }}</span>
-          </template>
-        </el-table-column>
-        <el-table-column
-          label="操作"
-          align="center"
-          class-name="small-padding fixed-width"
-          width="240"
-          fixed="right"
-        >
-          <template slot-scope="scope">
-            <el-button
-              v-permisaction="['process:list:all:select']"
-              size="mini"
-              type="text"
-              icon="el-icon-edit"
-              @click="handleView(scope.row)"
-              >查看</el-button
-            >
-            <el-button
-              v-if="scope.row.is_end === 0"
-              v-permisaction="['process:list:all:inversion']"
-              size="mini"
-              type="text"
-              icon="el-icon-position"
-              @click="handleInversion(scope.row)"
-              >转交</el-button
-            >
-            <el-button
-              v-if="scope.row.is_end === 0"
-              v-permisaction="['process:list:all:end']"
-              size="mini"
-              type="text"
-              icon="el-icon-switch-button"
-              @click="handleUnity(scope.row)"
-              >结单</el-button
-            >
-            <el-button
-              v-if="scope.row.contract_url"
-              size="mini"
-              type="text"
-              icon="el-icon-download"
-              @click="handleLookContract(scope.row)"
-              >下载签章</el-button
-            >
-            <el-button
-              v-permisaction="['process:list:all:delete']"
-              size="mini"
-              type="text"
-              icon="el-icon-delete"
-              @click="handleDelete(scope.row)"
-              >删除</el-button
-            >
-          </template>
-        </el-table-column>
-      </el-table>
-
-      <el-dialog title="转交工单" :visible.sync="dialogVisible" width="40%">
-        <TransferInversion
-          v-if="dialogVisible"
-          :selectItem="selectItem"
-          @getList="getList"
-          @close="dialogVisible = false"
-        />
-      </el-dialog>
-
-      <pagination
-        v-show="total > 0"
-        :total="total"
-        :page.sync="queryParams.pageIndex"
-        :limit.sync="queryParams.pageSize"
-        @pagination="getList"
-      />
-    </el-card>
-  </div>
-</template>
-
-<script>
-import {
-  workOrderList,
-  unityWorkOrder,
-  inversionWorkOrder,
-  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";
-import SaveForm from "@/components/save-form";
-export default {
-  components: { WorkOrderSearch, TransferInversion, SaveForm },
-  data() {
-    return {
-      users: [],
-      nodeList: [],
-      dialogVisible: false,
-      queryParams: {},
-      total: 0,
-      loading: false,
-      ticketList: [],
-      listQuery: {
-        page: 1,
-        per_page: 10,
-      },
-      selectItem: {
-        work_order_id: "",
-        node_id: null,
-        nodeList: [],
-        users: [],
-      },
-    };
-  },
-  mounted() {
-    this.getList();
-  },
-  methods: {
-    getList() {
-      this.loading = true;
-      this.listQuery.page = this.queryParams.pageIndex;
-      this.listQuery.per_page = this.queryParams.pageSize;
-      this.listQuery.classify = 4;
-      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;
-      });
-    },
-    handleSearch(val) {
-      for (var k in val) {
-        this.listQuery[k] = val[k];
-      }
-      this.$refs.listQuery.save(this.listQuery);
-      this.$refs.listQuery.save(this.queryParams, "page");
-      this.getList();
-    },
-    handleView(row) {
-      this.$router.push({
-        name: "ProcessListHandle",
-        query: { workOrderId: row.id, processId: row.process },
-      });
-    },
-    handleLookContract(row) {
-      if (row.contract_url) {
-        window.open(row.contract_url);
-      } else {
-        this.$message.error("当前审批暂无签章");
-      }
-    },
-    handleDelete(row) {
-      this.$confirm("此操作将删除该数据, 是否继续?", "提示", {
-        confirmButtonText: "确定",
-        cancelButtonText: "取消",
-        type: "warning",
-      })
-        .then(() => {
-          deleteWorkOrder(row.id).then((response) => {
-            this.$message({
-              type: "success",
-              message: "删除成功!",
-            });
-            this.getList();
-          });
-        })
-        .catch(() => {
-          this.$message({
-            type: "info",
-            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: "已取消",
-          });
-        });
-    },
-    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;
-      }
-      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;
-            }
-          });
-        }
-      });
-    },
-  },
-};
-</script>
-
-<style scoped></style>
+<template>
+  <div class="app-container">
+    <el-card class="box-card">
+      <save-form ref="listQuery" :model="listQuery" :inline="true">
+        <WorkOrderSearch
+          :genre="'all'"
+          :list="listQuery"
+          @handleSearch="handleSearch"
+        />
+      </save-form>
+
+      <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="流程"
+          width="150"
+          prop="process_name"
+          :show-overflow-tooltip="true"
+        />
+        <el-table-column label="当前状态" :show-overflow-tooltip="true">
+          <template slot-scope="scope">
+            <span> {{ scope.row.state_name }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column
+          label="申请人"
+          :show-overflow-tooltip="true"
+          prop="creator_name"
+        >
+        </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>
+          </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"
+          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">
+              <el-tag type="danger">非常紧急</el-tag>
+            </span>
+            <span v-else>
+              <el-tag type="success">一般</el-tag>
+            </span>
+          </template>
+        </el-table-column>
+        <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-else size="mini" type="danger">是</el-tag>
+          </template>
+        </el-table-column>
+
+        <el-table-column label="付款金额" align="center" prop="payment_amount">
+        </el-table-column>
+        <el-table-column
+          label="情况说明"
+          align="center"
+          :show-overflow-tooltip="true"
+          prop="note"
+        >
+        </el-table-column>
+
+        <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"
+          prop="update_time"
+          width="180"
+        >
+          <template slot-scope="scope">
+            <span>{{ parseTime(scope.row.update_time) }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column
+          label="操作"
+          align="center"
+          class-name="small-padding fixed-width"
+          width="240"
+          fixed="right"
+        >
+          <template slot-scope="scope">
+            <el-button
+              v-permisaction="['process:list:all:select']"
+              size="mini"
+              type="text"
+              icon="el-icon-edit"
+              @click="handleView(scope.row)"
+              >查看</el-button
+            >
+            <el-button
+              v-if="scope.row.is_end === 0"
+              v-permisaction="['process:list:all:inversion']"
+              size="mini"
+              type="text"
+              icon="el-icon-position"
+              @click="handleInversion(scope.row)"
+              >转交</el-button
+            >
+            <el-button
+              v-if="scope.row.is_end === 0"
+              v-permisaction="['process:list:all:end']"
+              size="mini"
+              type="text"
+              icon="el-icon-switch-button"
+              @click="handleUnity(scope.row)"
+              >结单</el-button
+            >
+            <el-button
+              v-if="scope.row.contract_url"
+              size="mini"
+              type="text"
+              icon="el-icon-download"
+              @click="handleLookContract(scope.row)"
+              >下载签章</el-button
+            >
+            <el-button
+              v-permisaction="['process:list:all:delete']"
+              size="mini"
+              type="text"
+              icon="el-icon-delete"
+              @click="handleDelete(scope.row)"
+              >删除</el-button
+            >
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <el-dialog title="转交工单" :visible.sync="dialogVisible" width="40%">
+        <TransferInversion
+          v-if="dialogVisible"
+          :selectItem="selectItem"
+          @getList="getList"
+          @close="dialogVisible = false"
+        />
+      </el-dialog>
+
+      <pagination
+        v-show="total > 0"
+        :total="total"
+        :page.sync="queryParams.pageIndex"
+        :limit.sync="queryParams.pageSize"
+        @pagination="getList"
+      />
+    </el-card>
+  </div>
+</template>
+
+<script>
+import {
+  workOrderList,
+  unityWorkOrder,
+  inversionWorkOrder,
+  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";
+import SaveForm from "@/components/save-form";
+export default {
+  components: { WorkOrderSearch, TransferInversion, SaveForm },
+  data() {
+    return {
+      users: [],
+      nodeList: [],
+      dialogVisible: false,
+      queryParams: {},
+      total: 0,
+      loading: false,
+      ticketList: [],
+      listQuery: {
+        page: 1,
+        per_page: 10,
+      },
+      selectItem: {
+        work_order_id: "",
+        node_id: null,
+        nodeList: [],
+        users: [],
+      },
+    };
+  },
+  mounted() {
+    this.getList();
+  },
+  methods: {
+    getList() {
+      this.loading = true;
+      this.listQuery.page = this.queryParams.pageIndex;
+      this.listQuery.per_page = this.queryParams.pageSize;
+      this.listQuery.classify = 4;
+      workOrderList({
+        ...this.listQuery,
+        search: this.listQuery.search ? this.listQuery.search.join(" ") : "",
+      }).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;
+      });
+    },
+    handleSearch(val) {
+      for (var k in val) {
+        this.listQuery[k] = val[k];
+      }
+      this.$refs.listQuery.save(this.listQuery);
+      this.$refs.listQuery.save(this.queryParams, "page");
+      this.getList();
+    },
+    handleView(row) {
+      this.$router.push({
+        name: "ProcessListHandle",
+        query: { workOrderId: row.id, processId: row.process },
+      });
+    },
+    handleLookContract(row) {
+      if (row.contract_url) {
+        window.open(row.contract_url);
+      } else {
+        this.$message.error("当前审批暂无签章");
+      }
+    },
+    handleDelete(row) {
+      this.$confirm("此操作将删除该数据, 是否继续?", "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+      })
+        .then(() => {
+          deleteWorkOrder(row.id).then((response) => {
+            this.$message({
+              type: "success",
+              message: "删除成功!",
+            });
+            this.getList();
+          });
+        })
+        .catch(() => {
+          this.$message({
+            type: "info",
+            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: "已取消",
+          });
+        });
+    },
+    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;
+      }
+      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;
+            }
+          });
+        }
+      });
+    },
+  },
+};
+</script>
+
+<style scoped></style>

src/views/process/list/apply-process-list.vue

@@ -1,184 +1,187 @@
-<template>
-  <div class="app-container">
-    <el-card class="box-card remove-padding-bottom">
-      <save-form
-        ref="listQuery"
-        :model="listQuery"
-        :inline="true"
-        @submit="handleQuery"
-      >
-        <el-form-item label="流程名称" prop="name">
-          <el-input
-            v-model="listQuery.name"
-            placeholder="请输入流程名称"
-            clearable
-            size="small"
-            style="width: 240px"
-            @keyup.enter.native="handleQuery"
-          />
-        </el-form-item>
-        <el-form-item>
-          <el-button
-            type="primary"
-            icon="el-icon-search"
-            native-type="submit"
-            size="small"
-            >搜索</el-button
-          >
-        </el-form-item>
-      </save-form>
-
-      <div v-for="item in processLists" :key="item.id">
-        <div v-if="item.process_list.length !== 0">
-          <div class="workflow-classify-title">
-            {{ item.name }}
-          </div>
-          <div style="margin-bottom: 15px;">
-            <template v-for="(buttonItem, buttonIndex) in item.process_list">
-              <el-tooltip :key="buttonItem.id" effect="dark" placement="top">
-                <div slot="content">
-                  <div style="font-size: 16px;">{{ buttonItem.name }}</div>
-                  <div
-                    style="width: 250px; padding-top: 10px;line-height: 1.2;"
-                  >
-                    {{ buttonItem.remarks }}
-                  </div>
-                </div>
-                <div
-                  class="workflow-classify-div"
-                  :style="
-                    (buttonIndex + 1) % 5 === 0
-                      ? { 'padding-right': 0 }
-                      : { 'padding-right': '12px' }
-                  "
-                >
-                  <el-button
-                    style="width: 100%"
-                    plain
-                    @click="submitWorkOrder(buttonItem.id)"
-                  >
-                    <div class="process-button-div">
-                      <div class="process-div-icon">
-                        <e-icon
-                          class="process-div-el-icon"
-                          :icon-name="buttonItem.icon"
-                        />
-                      </div>
-                      <div class="process-div-body">
-                        <div class="process-div-title ellipsis">
-                          {{ buttonItem.name }}
-                        </div>
-                        <div class="process-div-remarks ellipsis">
-                          {{ buttonItem.remarks }}
-                        </div>
-                      </div>
-                    </div>
-                  </el-button>
-                </div>
-              </el-tooltip>
-            </template>
-          </div>
-        </div>
-      </div>
-    </el-card>
-  </div>
-</template>
-
-<script>
-import { classifyProcessList } from "@/api/process/admin/process";
-import SaveForm from "@/components/save-form";
-export default {
-  name: "ApplyProcessList",
-  components: {
-    SaveForm
-  },
-  data() {
-    return {
-      processLists: [],
-      listQuery: {}
-    };
-  },
-  mounted() {
-    this.getProcessList();
-  },
-  methods: {
-    getProcessList() {
-      classifyProcessList(this.listQuery).then(response => {
-        this.processLists = response.data;
-      });
-    },
-    handleQuery() {
-      this.getProcessList();
-    },
-    submitWorkOrder(processId) {
-      this.$router.push({
-        path: "/process/create-ticket",
-        query: { processId: processId }
-      });
-    }
-  }
-};
-</script>
-
-<style scoped>
-.workflow-classify-title {
-  border-left: 3px solid rgb(64, 158, 255);
-  padding-left: 5px;
-}
-
-.workflow-classify-div {
-  width: 20%;
-  display: inline-block;
-  margin-left: 0;
-  margin-top: 12px;
-}
-
-.el-card__body {
-  padding-bottom: 0;
-}
-
-.process-button-div {
-  width: 180px;
-  height: 50px;
-}
-
-.process-div-icon {
-  float: left;
-  width: 50px;
-  height: 100%;
-  margin-right: 10px;
-}
-
-.process-div-el-icon {
-  font-size: 32px;
-  line-height: 50px;
-  color: #606266;
-}
-
-.process-div-body {
-  float: left;
-  width: 120px;
-  height: 100%;
-  text-align: left;
-}
-
-.process-div-title {
-  font-size: 15px;
-  margin-top: 6px;
-  color: #606266;
-  height: 18px;
-  line-height: 18px;
-}
-
-.process-div-remarks {
-  color: #999999;
-  margin-top: 6px;
-  font-size: 12px;
-}
-
-.ellipsis {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-</style>
+<template>
+  <div class="app-container">
+    <el-card class="box-card remove-padding-bottom">
+      <save-form
+        ref="listQuery"
+        :model="listQuery"
+        :inline="true"
+        @submit="handleQuery"
+      >
+        <el-form-item label="流程名称" prop="name">
+          <el-input
+            v-model="listQuery.name"
+            placeholder="请输入流程名称"
+            clearable
+            size="small"
+            style="width: 240px"
+            @keyup.enter.native="handleQuery"
+          />
+        </el-form-item>
+        <el-form-item>
+          <el-button
+            type="primary"
+            icon="el-icon-search"
+            native-type="submit"
+            size="small"
+            >搜索</el-button
+          >
+        </el-form-item>
+      </save-form>
+
+      <div v-for="item in processLists" :key="item.id">
+        <div v-if="item.process_list.length !== 0">
+          <div class="workflow-classify-title">
+            {{ item.name }}
+          </div>
+          <div style="margin-bottom: 15px">
+            <template v-for="(buttonItem, buttonIndex) in item.process_list">
+              <el-tooltip :key="buttonItem.id" effect="dark" placement="top">
+                <div slot="content">
+                  <div style="font-size: 16px">{{ buttonItem.name }}</div>
+                  <div
+                    style="width: 250px; padding-top: 10px; line-height: 1.2"
+                  >
+                    {{ buttonItem.remarks }}
+                  </div>
+                </div>
+                <div
+                  class="workflow-classify-div"
+                  :style="
+                    (buttonIndex + 1) % 5 === 0
+                      ? { 'padding-right': 0 }
+                      : { 'padding-right': '12px' }
+                  "
+                >
+                  <el-button
+                    style="width: 100%"
+                    plain
+                    @click="submitWorkOrder(buttonItem.id)"
+                  >
+                    <div class="process-button-div">
+                      <div class="process-div-icon">
+                        <e-icon
+                          class="process-div-el-icon"
+                          :icon-name="buttonItem.icon"
+                        />
+                      </div>
+                      <div class="process-div-body">
+                        <div class="process-div-title ellipsis">
+                          {{ buttonItem.name }}
+                        </div>
+                        <div class="process-div-remarks ellipsis">
+                          {{ buttonItem.remarks }}
+                        </div>
+                      </div>
+                    </div>
+                  </el-button>
+                </div>
+              </el-tooltip>
+            </template>
+          </div>
+        </div>
+      </div>
+    </el-card>
+  </div>
+</template>
+
+<script>
+import { classifyProcessList } from "@/api/process/admin/process";
+import SaveForm from "@/components/save-form";
+export default {
+  name: "ApplyProcessList",
+  components: {
+    SaveForm,
+  },
+  data() {
+    return {
+      processLists: [],
+      listQuery: {},
+    };
+  },
+  mounted() {
+    // 重开标识删除
+    sessionStorage.removeItem("createReopenReopen");
+
+    this.getProcessList();
+  },
+  methods: {
+    getProcessList() {
+      classifyProcessList(this.listQuery).then((response) => {
+        this.processLists = response.data;
+      });
+    },
+    handleQuery() {
+      this.getProcessList();
+    },
+    submitWorkOrder(processId) {
+      this.$router.push({
+        path: "/process/create-ticket",
+        query: { processId: processId },
+      });
+    },
+  },
+};
+</script>
+
+<style scoped>
+.workflow-classify-title {
+  border-left: 3px solid rgb(64, 158, 255);
+  padding-left: 5px;
+}
+
+.workflow-classify-div {
+  width: 20%;
+  display: inline-block;
+  margin-left: 0;
+  margin-top: 12px;
+}
+
+.el-card__body {
+  padding-bottom: 0;
+}
+
+.process-button-div {
+  width: 180px;
+  height: 50px;
+}
+
+.process-div-icon {
+  float: left;
+  width: 50px;
+  height: 100%;
+  margin-right: 10px;
+}
+
+.process-div-el-icon {
+  font-size: 32px;
+  line-height: 50px;
+  color: #606266;
+}
+
+.process-div-body {
+  float: left;
+  width: 120px;
+  height: 100%;
+  text-align: left;
+}
+
+.process-div-title {
+  font-size: 15px;
+  margin-top: 6px;
+  color: #606266;
+  height: 18px;
+  line-height: 18px;
+}
+
+.process-div-remarks {
+  color: #999999;
+  margin-top: 6px;
+  font-size: 12px;
+}
+
+.ellipsis {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+</style>

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

@@ -1,232 +1,296 @@
-<template>
-  <div>
-    <el-form-item>
-      <el-input
-        v-model="listQuery.search"
-        placeholder="请输入搜索关键词"
-        clearable
-        size="small"
-        style="width: 180px"
-        @keyup.enter.native="getList"
-      />
-    </el-form-item>
-    <el-form-item v-if="genre !== 'upcoming'">
-      <el-select
-        v-model="listQuery.processor"
-        filterable
-        clearable
-        remote
-        size="small"
-        reserve-keyword
-        placeholder="请输入当前处理人"
-        :remote-method="remoteUserList"
-        :loading="loading"
-        style="width: 150px"
-        @change="getList"
-      >
-        <el-option
-          v-for="item in UserOptions"
-          :key="item.userId"
-          :label="item.nickName"
-          :value="item.userId"
-        />
-      </el-select>
-    </el-form-item>
-    <el-form-item>
-      <el-select
-        v-model="listQuery.processId"
-        placeholder="请选择流程"
-        size="small"
-        clearable
-        style="width: 150px"
-        @change="getList"
-      >
-        <el-option-group
-          v-for="group in classifyList"
-          :key="group.id"
-          :label="group.name"
-        >
-          <el-option
-            v-for="item in group.process_list"
-            :key="item.id"
-            :label="item.name"
-            :value="item.id"
-          >
-          </el-option>
-        </el-option-group>
-      </el-select>
-    </el-form-item>
-    <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'">
-      <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>
-      <!-- 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
-        size="small"
-        type="datetimerange"
-        :picker-options="pickerOptions"
-        range-separator="至"
-        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-form-item>
-  </div>
-</template>
-
-<script>
-import { listUser } from "@/api/system/sysuser";
-import { classifyProcessList } from "@/api/process/admin/process";
-
-import { parseTime } from "@/utils";
-export default {
-  name: "WorkOrderSearch",
-  // eslint-disable-next-line vue/require-prop-types
-  props: ["genre", "list"],
-  data() {
-    return {
-      loading: false,
-      timeValue: "",
-      classifyList: [],
-      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]);
-            },
-          },
-          {
-            text: "最近三个月",
-            onClick(picker) {
-              const end = new Date();
-              const start = new Date();
-              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
-              picker.$emit("pick", [start, end]);
-            },
-          },
-        ],
-      },
-    };
-  },
-  created() {
-    this.getClassesList();
-    console.log(this.list, "child component");
-    this.listQuery = { ...this.list };
-    if (this.listQuery.startTime && this.listQuery.endTime) {
-      this.timeValue = [this.listQuery.startTime, this.listQuery.endTime];
-    }
-    if (this.listQuery.processor && this.listQuery.processorName) {
-      this.listQuery.processor = Number(this.listQuery.processor);
-      this.remoteUserList(this.listQuery.processorName);
-    }
-    console.log(this.listQuery);
-  },
-  methods: {
-    getList() {
-      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]);
-      }
-      // 处理显示用户名
-      if (this.listQuery.processor) {
-        this.UserOptions.forEach((item) => {
-          if (this.listQuery.processor == item.userId) {
-            this.listQuery.processorName = item.nickName;
-          }
-        });
-      } else {
-        this.listQuery.processorName = "";
-      }
-      console.log(this.listQuery, "listQuery showInfo");
-      this.$emit("handleSearch", this.listQuery);
-    },
-    remoteUserList(query) {
-      listUser({
-        pageSize: 999999,
-        nickName: query,
-      }).then((res) => {
-        this.UserOptions = res.data.list;
-      });
-    },
-    getClassesList() {
-      classifyProcessList().then((res) => {
-        this.classifyList = res.data || [];
-      });
-    },
-  },
-};
-</script>
-
-<style scoped></style>
+<template>
+  <div>
+    <el-form-item>
+      <el-select
+        v-model="listQuery.search"
+        multiple
+        filterable
+        allow-create
+        default-first-option
+        size="small"
+        placeholder="关键词(回车支持多个)"
+        clearable
+        class="post-more"
+        popper-class="select-more"
+        @keyup.enter.native="getList"
+      >
+        <el-option
+          v-for="item in options"
+          :key="item.value"
+          :label="item.label"
+          :value="item.value"
+        >
+        </el-option>
+      </el-select>
+    </el-form-item>
+    <!-- <el-form-item>
+      <el-input
+        v-model="listQuery.search"
+        placeholder="请输入搜索关键词"
+        clearable
+        size="small"
+        style="width: 180px"
+        @keyup.enter.native="getList"
+      />
+
+      <div class="el-select el-select--small" style="margin-left: 0">
+        <div class="el-select__tags" style="width: 100%; max-width: 165.5px">
+          <span></span>
+          <input
+            type="text"
+            autocomplete="off"
+            class="el-select__input is-medium"
+            style="flex-grow: 1; width: 0.120846%; max-width: 155.5px"
+          />
+        </div>
+        <div class="el-input el-input--medium el-input--suffix">
+          <input
+            tabindex="-1"
+            type="text"
+            readonly="readonly"
+            autocomplete="off"
+            placeholder=""
+            class="el-input__inner"
+            style="height: 36px"
+          />
+        </div>
+      </div>
+    </el-form-item> -->
+    <el-form-item v-if="genre !== 'upcoming'">
+      <el-select
+        v-model="listQuery.processor"
+        filterable
+        clearable
+        remote
+        size="small"
+        reserve-keyword
+        placeholder="请输入当前处理人"
+        :remote-method="remoteUserList"
+        :loading="loading"
+        style="width: 150px"
+        @change="getList"
+      >
+        <el-option
+          v-for="item in UserOptions"
+          :key="item.userId"
+          :label="item.nickName"
+          :value="item.userId"
+        />
+      </el-select>
+    </el-form-item>
+    <el-form-item>
+      <el-select
+        v-model="listQuery.processId"
+        placeholder="请选择流程"
+        size="small"
+        clearable
+        style="width: 150px"
+        @change="getList"
+      >
+        <el-option-group
+          v-for="group in classifyList"
+          :key="group.id"
+          :label="group.name"
+        >
+          <el-option
+            v-for="item in group.process_list"
+            :key="item.id"
+            :label="item.name"
+            :value="item.id"
+          >
+          </el-option>
+        </el-option-group>
+      </el-select>
+    </el-form-item>
+    <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'">
+      <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>
+      <!-- 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
+        size="small"
+        type="datetimerange"
+        :picker-options="pickerOptions"
+        range-separator="至"
+        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-form-item>
+  </div>
+</template>
+
+<script>
+import { listUser } from "@/api/system/sysuser";
+import { classifyProcessList } from "@/api/process/admin/process";
+
+import { parseTime } from "@/utils";
+export default {
+  name: "WorkOrderSearch",
+  // eslint-disable-next-line vue/require-prop-types
+  props: ["genre", "list"],
+  data() {
+    return {
+      loading: false,
+      timeValue: "",
+      options: [],
+      classifyList: [],
+      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]);
+            },
+          },
+          {
+            text: "最近三个月",
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
+              picker.$emit("pick", [start, end]);
+            },
+          },
+        ],
+      },
+    };
+  },
+  created() {
+    this.getClassesList();
+    this.listQuery = { ...this.list };
+    if (this.listQuery.startTime && this.listQuery.endTime) {
+      this.timeValue = [this.listQuery.startTime, this.listQuery.endTime];
+    }
+    if (this.listQuery.processor && this.listQuery.processorName) {
+      this.listQuery.processor = Number(this.listQuery.processor);
+      this.remoteUserList(this.listQuery.processorName);
+    }
+  },
+  methods: {
+    getList() {
+      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]);
+      }
+      // 处理显示用户名
+      if (this.listQuery.processor) {
+        this.UserOptions.forEach((item) => {
+          if (this.listQuery.processor == item.userId) {
+            this.listQuery.processorName = item.nickName;
+          }
+        });
+      } else {
+        this.listQuery.processorName = "";
+      }
+      console.log(this.listQuery, "listQuery showInfo");
+
+      this.$emit("handleSearch", {
+        ...this.listQuery,
+      });
+    },
+    remoteUserList(query) {
+      listUser({
+        pageSize: 999999,
+        nickName: query,
+      }).then((res) => {
+        this.UserOptions = res.data.list;
+      });
+    },
+    getClassesList() {
+      classifyProcessList().then((res) => {
+        this.classifyList = res.data || [];
+      });
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+/* ::v-deep .el-select .el-input .el-select__caret.is-reverse {
+  display: none;
+}
+::v-deep .el-select .el-input .el-icon-arrow-up {
+  display: none;
+} */
+.post-more {
+  .el-input .el-icon-arrow-up {
+    display: none;
+  }
+}
+
+.select-more {
+  display: none;
+}
+</style>

src/views/process/list/create.vue

@@ -5,8 +5,17 @@
         <span>公共信息</span>
       </div>
       <div class="text item">
-        <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="150px">
-          <el-form-item label="优先级:" prop="priority" style="margin-bottom: 0">
+        <el-form
+          ref="ruleForm"
+          :model="ruleForm"
+          :rules="rules"
+          label-width="150px"
+        >
+          <el-form-item
+            label="优先级:"
+            prop="priority"
+            style="margin-bottom: 0"
+          >
             <el-radio-group v-model="ruleForm.priority" size="small">
               <el-radio :label="1">一般</el-radio>
               <el-radio :label="2">紧急</el-radio>
@@ -14,13 +23,23 @@
             </el-radio-group>
           </el-form-item>
 
-          <el-form-item label="申请部门:" prop="deptId" style="margin-bottom: 0">
+          <el-form-item
+            label="申请部门:"
+            prop="deptId"
+            style="margin-bottom: 0"
+          >
             <el-select v-model="ruleForm.deptId" size="small" clearable>
-              <el-option v-for="(item, index) in deptList" :label="item.deptName" :value="item.deptId"
-                :key="index"></el-option>
+              <el-option
+                v-for="(item, index) in deptList"
+                :label="item.deptName"
+                :value="item.deptId"
+                :key="index"
+              ></el-option>
             </el-select>
             <span v-if="!socialId && currentNode.id">(未设置社保部门)</span>
-            <span v-if="ruleForm.deptId && socialId != ruleForm.deptId">(该部门非社保部门)</span>
+            <span v-if="ruleForm.deptId && socialId != ruleForm.deptId"
+              >(该部门非社保部门)</span
+            >
           </el-form-item>
         </el-form>
       </div>
@@ -32,26 +51,45 @@
       </div>
       <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.id) === -1
-            " :key="tplIndex" :ref="'generateForm-' + tplItem.id" :preview="currentNode.hideTpls === undefined ||
-    currentNode.hideTpls === null ||
-    currentNode.hideTpls.indexOf(tplItem.id) === -1
-    ? false
-    : true
-    " :remote="remoteFunc" :data="tplItem.form_structure" :value="tplItem.form_data" :disabled="currentNode.readonlyTpls === undefined ||
-    currentNode.readonlyTpls === null ||
-    currentNode.readonlyTpls.indexOf(tplItem.id) === -1
-    ? null
-    : true
-    " :organ-list="organList" />
+          <fm-generate-form
+            v-show="
+              currentNode.hideTpls === undefined ||
+              currentNode.hideTpls === null ||
+              currentNode.hideTpls.indexOf(tplItem.id) === -1
+            "
+            :key="tplIndex"
+            :ref="'generateForm-' + tplItem.id"
+            :preview="
+              currentNode.hideTpls === undefined ||
+              currentNode.hideTpls === null ||
+              currentNode.hideTpls.indexOf(tplItem.id) === -1
+                ? false
+                : true
+            "
+            :remote="remoteFunc"
+            :data="tplItem.form_structure"
+            :value="tplItem.form_data"
+            :disabled="
+              currentNode.readonlyTpls === undefined ||
+              currentNode.readonlyTpls === null ||
+              currentNode.readonlyTpls.indexOf(tplItem.id) === -1
+                ? null
+                : true
+            "
+            :organ-list="organList"
+          />
         </template>
       </div>
       <hr style="background-color: #d9d9d9; border: 0; height: 1px" />
       <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" :disabled="submitDisabled"
-          @click="submitAction(item.target)">提交</el-button>
+        <el-button
+          v-for="(item, index) in btn_group"
+          :key="index"
+          :type="item.className"
+          :disabled="submitDisabled"
+          @click="submitAction(item.target)"
+          >提交</el-button
+        >
         <!-- <el-button type="default" @click="onGetFormData"> 获取数据 </el-button> -->
       </div>
     </el-card>
@@ -130,9 +168,17 @@ export default {
   async mounted() {
     const processId = this.$route.query.processId;
     this.searchs = new Searchs("process" + processId);
-    const getSearch = this.searchs.get();
-    this.cacheFormData = getSearch || [];
-    console.log(getSearch, 'getSearch')
+    console.log(this.$router);
+    if (sessionStorage.getItem("createReopenReopen") == "1") {
+      let createReopenData = sessionStorage.getItem("createReopenData");
+      createReopenData = createReopenData ? JSON.parse(createReopenData) : null;
+      this.cacheFormData = [createReopenData];
+      console.log(this.cacheFormData, "this.cacheFormData");
+    } else {
+      const getSearch = this.searchs.get();
+      this.cacheFormData = getSearch || [];
+      console.log(getSearch, "getSearch");
+    }
 
     await this.getUserInfo();
     await this.getAllOrgan();
@@ -232,15 +278,17 @@ export default {
           "hiddenForm",
           selectList
         );
-        console.log(hiddenFormList, 'hiddenFormList', tempData)
+        console.log(hiddenFormList, "hiddenFormList", tempData);
 
         // 获取对应缓存
         const responseData = response.data;
+        console.log(responseData, "responseData");
         // let formCatchData = ''
         for (let i in responseData.tpls) {
           const findItem = this.cacheFormData.find(
             (item) => item.tplId == responseData.tpls[i].id
           );
+          console.log(findItem, "findItem");
 
           if (findItem) {
             // formCatchData = JSON.parse(
@@ -269,8 +317,6 @@ export default {
         //   })
         // })
 
-
-
         tempData.forEach((temp, index) => {
           let tempList = temp.form_structure.list || [];
           tempList.forEach((item) => {
@@ -315,7 +361,6 @@ export default {
               item.hidden = subFormStatus;
             }
 
-
             // if (getShowForm && getShowForm.length > 0) {
             //   const findIndex = getShowForm.findIndex(v => v == item.model)
             //   console.log(findIndex, 'findIndex')
@@ -376,7 +421,7 @@ export default {
         if (!this.socialId && this.deptList.length <= 0) {
           this.$alert("您当前暂未设置所属部门，请联系管理员", "提示", {
             confirmButtonText: "确定",
-            callback: (action) => { },
+            callback: (action) => {},
           });
         }
       });
@@ -608,6 +653,7 @@ export default {
       setTimeout(() => {
         // 做是否离开判断？
         // 还是做是否保存判断？
+        sessionStorage.removeItem("createReopenReopen");
         this.$confirm("您的申请尚未提交，是否确认返回？", "提示", {
           confirmButtonText: "确认",
           cancelButtonText: "取消",
@@ -625,6 +671,7 @@ export default {
       if (create_ticket_status) {
         this.onGetFormData();
         sessionStorage.removeItem("create_ticket_status");
+        sessionStorage.removeItem("createReopenReopen");
       }
       next();
     }

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

@@ -1,297 +1,350 @@
-<template>
-  <div class="app-container">
-    <el-card class="box-card">
-      <save-form ref="listQuery" :model="listQuery" :inline="true">
-        <WorkOrderSearch
-          :genre="'my-create'"
-          :list="listQuery"
-          @handleSearch="handleSearch"
-        />
-      </save-form>
-
-      <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"
-          width="150"
-          :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>
-              {{ scope.row.state_name }}
-            </span>
-          </template>
-        </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>
-          </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"
-          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">
-              <el-tag type="danger">非常紧急</el-tag>
-            </span>
-            <span v-else>
-              <el-tag type="success">一般</el-tag>
-            </span>
-          </template>
-        </el-table-column>
-        <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-else size="mini" type="danger">是</el-tag>
-          </template>
-        </el-table-column>
-        <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"
-          prop="update_time"
-          width="180"
-        >
-          <template slot-scope="scope">
-            <span>{{ parseTime(scope.row.update_time) }}</span>
-          </template>
-        </el-table-column>
-        <el-table-column
-          label="操作"
-          align="center"
-          class-name="small-padding fixed-width"
-          width="180"
-          fixed="right"
-        >
-          <template slot-scope="scope">
-            <el-button
-              v-permisaction="['process:list:myCreate:select']"
-              size="mini"
-              type="text"
-              icon="el-icon-edit"
-              @click="handleView(scope.row)"
-              >查看</el-button
-            >
-            <el-button
-              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
-              v-permisaction="['process:list:myCreate:reopen']"
-              size="mini"
-              type="text"
-              icon="el-icon-refresh-right"
-              @click="handleReopen(scope.row.id)"
-            >重开</el-button> -->
-            <el-button
-              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
-            >
-          </template>
-        </el-table-column>
-      </el-table>
-
-      <pagination
-        v-show="total > 0"
-        :total="total"
-        :page.sync="queryParams.pageIndex"
-        :limit.sync="queryParams.pageSize"
-        @pagination="getList"
-      />
-    </el-card>
-  </div>
-</template>
-
-<script>
-import {
-  workOrderList,
-  urgeWorkOrder,
-  reopenWorkOrder,
-  unityWorkOrder
-} from "@/api/process/work-order";
-import SaveForm from "@/components/save-form";
-
-// 搜索
-import WorkOrderSearch from "./components/search/index";
-export default {
-  components: { WorkOrderSearch, SaveForm },
-  data() {
-    return {
-      users: [],
-      nodeList: [],
-      queryParams: {},
-      total: 0,
-      loading: false,
-      ticketList: [],
-      listQuery: {
-        page: 1,
-        per_page: 10
-      },
-      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() {
-    this.getList();
-  },
-  methods: {
-    getList() {
-      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;
-      });
-    },
-    handleSearch(val) {
-      for (var k in val) {
-        this.listQuery[k] = val[k];
-      }
-      this.$refs.listQuery.save(this.listQuery);
-      this.$refs.listQuery.save(this.queryParams, "page");
-      this.getList();
-    },
-    handleView(row) {
-      this.$router.push({
-        name: "ProcessListHandle",
-        query: { workOrderId: row.id, processId: row.process }
-      });
-    },
-    handleReopen(id) {
-      this.$confirm("根据此工单新建一个新的工单?", "提示", {
-        confirmButtonText: "确定",
-        cancelButtonText: "取消",
-        type: "info"
-      }).then(() => {
-        reopenWorkOrder(id).then(res => {
-          this.getList();
-          this.$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: "已取消"
-          });
-        });
-    },
-    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: "已取消"
-          });
-        });
-    }
-  }
-};
-</script>
-
-<style scoped></style>
+<template>
+  <div class="app-container">
+    <el-card class="box-card">
+      <save-form ref="listQuery" :model="listQuery" :inline="true">
+        <WorkOrderSearch
+          :genre="'my-create'"
+          :list="listQuery"
+          @handleSearch="handleSearch"
+        />
+      </save-form>
+
+      <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"
+          width="150"
+          :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>
+              {{ scope.row.state_name }}
+            </span>
+          </template>
+        </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>
+          </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"
+          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">
+              <el-tag type="danger">非常紧急</el-tag>
+            </span>
+            <span v-else>
+              <el-tag type="success">一般</el-tag>
+            </span>
+          </template>
+        </el-table-column>
+        <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-else size="mini" type="danger">是</el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column label="付款金额" align="center" prop="payment_amount">
+        </el-table-column>
+        <el-table-column
+          label="情况说明"
+          align="center"
+          :show-overflow-tooltip="true"
+          prop="note"
+        >
+        </el-table-column>
+        <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"
+          prop="update_time"
+          width="180"
+        >
+          <template slot-scope="scope">
+            <span>{{ parseTime(scope.row.update_time) }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column
+          label="操作"
+          align="center"
+          class-name="small-padding fixed-width"
+          width="180"
+          fixed="right"
+        >
+          <template slot-scope="scope">
+            <el-button
+              v-permisaction="['process:list:myCreate:select']"
+              size="mini"
+              type="text"
+              icon="el-icon-edit"
+              @click="handleView(scope.row)"
+              >查看</el-button
+            >
+            <el-button
+              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
+              v-permisaction="['process:list:myCreate:reopen']"
+              size="mini"
+              type="text"
+              icon="el-icon-refresh-right"
+              v-if="scope.row.is_end === 1"
+              @click="handleReopen(scope.row)"
+              >重开</el-button
+            >
+            <el-button
+              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
+            >
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <pagination
+        v-show="total > 0"
+        :total="total"
+        :page.sync="queryParams.pageIndex"
+        :limit.sync="queryParams.pageSize"
+        @pagination="getList"
+      />
+    </el-card>
+  </div>
+</template>
+
+<script>
+import {
+  workOrderList,
+  urgeWorkOrder,
+  reopenWorkOrder,
+  checkTlpUpdate,
+  unityWorkOrder,
+  processStructure,
+} from "@/api/process/work-order";
+import SaveForm from "@/components/save-form";
+
+// 搜索
+import WorkOrderSearch from "./components/search/index";
+export default {
+  components: { WorkOrderSearch, SaveForm },
+  data() {
+    return {
+      users: [],
+      nodeList: [],
+      queryParams: {},
+      total: 0,
+      loading: false,
+      ticketList: [],
+      listQuery: {
+        page: 1,
+        per_page: 10,
+      },
+      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() {
+    this.getList();
+  },
+  methods: {
+    getList() {
+      this.loading = true;
+      this.listQuery.page = this.queryParams.pageIndex;
+      this.listQuery.per_page = this.queryParams.pageSize;
+      this.listQuery.classify = 2;
+      console.log(this.listQuery);
+      workOrderList({
+        ...this.listQuery,
+        search: this.listQuery.search ? this.listQuery.search.join(" ") : '',
+      }).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;
+      });
+    },
+    handleSearch(val) {
+      for (var k in val) {
+        this.listQuery[k] = val[k];
+      }
+      this.$refs.listQuery.save(this.listQuery);
+      this.$refs.listQuery.save(this.queryParams, "page");
+      this.getList();
+    },
+    handleView(row) {
+      this.$router.push({
+        name: "ProcessListHandle",
+        query: { workOrderId: row.id, processId: row.process },
+      });
+    },
+    async handleReopen(row) {
+      // workInfoId
+      try {
+        const { data } = await checkTlpUpdate({ workInfoId: row.id });
+        console.log(data);
+        // 判断是否有更新模板 - 而不是流程管理
+        if (data) {
+          this.$confirm("模版有更新，是否继续重开?", "提示", {
+            confirmButtonText: "确定",
+            cancelButtonText: "取消",
+            type: "info",
+          }).then(async () => {
+            await this.hendleReopenData(row);
+          });
+        } else {
+          await this.hendleReopenData(row);
+        }
+      } catch {}
+    },
+    async hendleReopenData(row) {
+      try {
+        const { data } = await processStructure({
+          processId: row.process,
+          workOrderId: row.id,
+        });
+        const tpls = data.tpls || [];
+        const workOrder = data.workOrder || {};
+        const tplData = tpls[0] ? tpls[0].form_data : "";
+        const form_structure = tpls[0] ? tpls[0].form_structure : "";
+        if (tplData && form_structure) {
+          // 添加重开数据
+          const temp = {
+            deptId: workOrder.deptId,
+            formData: tplData,
+            priority: workOrder.priority,
+            tplId: form_structure.id,
+          };
+          sessionStorage.setItem("createReopenData", JSON.stringify(temp));
+          sessionStorage.setItem("createReopenReopen", "1"); // 是否重开标识
+        }
+
+        this.$router.push({
+          path: "/process/create-ticket",
+          query: {
+            processId: row.process,
+          },
+        });
+      } catch (e) {
+        console.log(e);
+      }
+    },
+    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: "已取消",
+          });
+        });
+    },
+    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: "已取消",
+          });
+        });
+    },
+  },
+};
+</script>
+
+<style scoped></style>

src/views/process/list/related.vue

@@ -1,218 +1,230 @@
-<template>
-  <div class="app-container">
-    <el-card class="box-card">
-      <save-form ref="listQuery" :model="listQuery" :inline="true">
-        <WorkOrderSearch
-          :genre="'my-create'"
-          :list="listQuery"
-          @handleSearch="handleSearch"
-        />
-      </save-form>
-
-      <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"
-          width="150"
-          :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>
-              {{ scope.row.state_name }}
-            </span>
-          </template>
-        </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>
-          </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"
-          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">
-              <el-tag type="danger">非常紧急</el-tag>
-            </span>
-            <span v-else>
-              <el-tag type="success">一般</el-tag>
-            </span>
-          </template>
-        </el-table-column>
-        <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-else size="mini" type="danger">是</el-tag>
-          </template>
-        </el-table-column>
-        <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"
-          prop="update_time"
-          width="180"
-        >
-          <template slot-scope="scope">
-            <span>{{ parseTime(scope.row.update_time) }}</span>
-          </template>
-        </el-table-column>
-        <el-table-column
-          label="操作"
-          align="center"
-          class-name="small-padding fixed-width"
-          width="180"
-          fixed="right"
-        >
-          <template slot-scope="scope">
-            <el-button
-              v-permisaction="['process:list:related:select']"
-              size="mini"
-              type="text"
-              icon="el-icon-edit"
-              @click="handleView(scope.row)"
-              >查看</el-button
-            >
-          </template>
-        </el-table-column>
-      </el-table>
-
-      <el-dialog title="转交工单" :visible.sync="dialogVisible" width="40%">
-        <TransferInversion
-          v-if="dialogVisible"
-          :selectItem="selectItem"
-          @getList="getList"
-          @close="dialogVisible = false"
-        />
-      </el-dialog>
-
-      <pagination
-        v-show="total > 0"
-        :total="total"
-        :page.sync="queryParams.pageIndex"
-        :limit.sync="queryParams.pageSize"
-        @pagination="getList"
-      />
-    </el-card>
-  </div>
-</template>
-
-<script>
-import { workOrderList } from "@/api/process/work-order";
-import TransferInversion from "./model/transferInversion";
-// 搜索
-import WorkOrderSearch from "./components/search/index";
-import SaveForm from "@/components/save-form";
-export default {
-  components: { WorkOrderSearch, TransferInversion, SaveForm },
-  data() {
-    return {
-      users: [],
-      nodeList: [],
-      dialogVisible: false,
-      queryParams: {},
-      total: 0,
-      loading: false,
-      ticketList: [],
-      listQuery: {
-        page: 1,
-        per_page: 10
-      },
-      selectItem: {
-        work_order_id: "",
-        node_id: null,
-        nodeList: [],
-        users: []
-      },
-      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() {
-    this.getList();
-  },
-  methods: {
-    getList() {
-      this.loading = true;
-      this.listQuery.page = this.queryParams.pageIndex;
-      this.listQuery.per_page = this.queryParams.pageSize;
-      this.listQuery.classify = 3;
-      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;
-      });
-    },
-    handleSearch(val) {
-      for (var k in val) {
-        this.listQuery[k] = val[k];
-      }
-      this.$refs.listQuery.save(this.listQuery);
-      this.$refs.listQuery.save(this.queryParams, "page");
-      this.getList();
-    },
-    handleView(row) {
-      this.$router.push({
-        name: "ProcessListHandle",
-        query: { workOrderId: row.id, processId: row.process }
-      });
-    },
-    handleSelectionChange() {}
-  }
-};
-</script>
-
-<style scoped></style>
+<template>
+  <div class="app-container">
+    <el-card class="box-card">
+      <save-form ref="listQuery" :model="listQuery" :inline="true">
+        <WorkOrderSearch
+          :genre="'my-create'"
+          :list="listQuery"
+          @handleSearch="handleSearch"
+        />
+      </save-form>
+
+      <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"
+          width="150"
+          :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>
+              {{ scope.row.state_name }}
+            </span>
+          </template>
+        </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>
+          </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"
+          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">
+              <el-tag type="danger">非常紧急</el-tag>
+            </span>
+            <span v-else>
+              <el-tag type="success">一般</el-tag>
+            </span>
+          </template>
+        </el-table-column>
+        <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-else size="mini" type="danger">是</el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column label="付款金额" align="center" prop="payment_amount">
+        </el-table-column>
+        <el-table-column
+          label="情况说明"
+          align="center"
+          :show-overflow-tooltip="true"
+          prop="note"
+        >
+        </el-table-column>
+        <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"
+          prop="update_time"
+          width="180"
+        >
+          <template slot-scope="scope">
+            <span>{{ parseTime(scope.row.update_time) }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column
+          label="操作"
+          align="center"
+          class-name="small-padding fixed-width"
+          width="180"
+          fixed="right"
+        >
+          <template slot-scope="scope">
+            <el-button
+              v-permisaction="['process:list:related:select']"
+              size="mini"
+              type="text"
+              icon="el-icon-edit"
+              @click="handleView(scope.row)"
+              >查看</el-button
+            >
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <el-dialog title="转交工单" :visible.sync="dialogVisible" width="40%">
+        <TransferInversion
+          v-if="dialogVisible"
+          :selectItem="selectItem"
+          @getList="getList"
+          @close="dialogVisible = false"
+        />
+      </el-dialog>
+
+      <pagination
+        v-show="total > 0"
+        :total="total"
+        :page.sync="queryParams.pageIndex"
+        :limit.sync="queryParams.pageSize"
+        @pagination="getList"
+      />
+    </el-card>
+  </div>
+</template>
+
+<script>
+import { workOrderList } from "@/api/process/work-order";
+import TransferInversion from "./model/transferInversion";
+// 搜索
+import WorkOrderSearch from "./components/search/index";
+import SaveForm from "@/components/save-form";
+export default {
+  components: { WorkOrderSearch, TransferInversion, SaveForm },
+  data() {
+    return {
+      users: [],
+      nodeList: [],
+      dialogVisible: false,
+      queryParams: {},
+      total: 0,
+      loading: false,
+      ticketList: [],
+      listQuery: {
+        page: 1,
+        per_page: 10,
+      },
+      selectItem: {
+        work_order_id: "",
+        node_id: null,
+        nodeList: [],
+        users: [],
+      },
+      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() {
+    this.getList();
+  },
+  methods: {
+    getList() {
+      this.loading = true;
+      this.listQuery.page = this.queryParams.pageIndex;
+      this.listQuery.per_page = this.queryParams.pageSize;
+      this.listQuery.classify = 3;
+      workOrderList({
+        ...this.listQuery,
+        search: this.listQuery.search ? this.listQuery.search.join(" ") : "",
+      }).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;
+      });
+    },
+    handleSearch(val) {
+      for (var k in val) {
+        this.listQuery[k] = val[k];
+      }
+      this.$refs.listQuery.save(this.listQuery);
+      this.$refs.listQuery.save(this.queryParams, "page");
+      this.getList();
+    },
+    handleView(row) {
+      this.$router.push({
+        name: "ProcessListHandle",
+        query: { workOrderId: row.id, processId: row.process },
+      });
+    },
+    handleSelectionChange() {},
+  },
+};
+</script>
+
+<style scoped></style>

src/views/process/list/upcoming.vue

@@ -1,243 +1,254 @@
-<template>
-  <div class="app-container">
-    <el-card class="box-card">
-      <save-form ref="listQuery" :model="listQuery" :inline="true">
-        <WorkOrderSearch
-          :genre="'upcoming'"
-          :list="listQuery"
-          @handleSearch="handleSearch"
-        />
-      </save-form>
-
-      <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"
-          width="150"
-          :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>
-              {{ scope.row.state_name }}
-            </span>
-          </template>
-        </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>
-          </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"
-          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">
-              <el-tag type="danger">非常紧急</el-tag>
-            </span>
-            <span v-else>
-              <el-tag type="success">一般</el-tag>
-            </span>
-          </template>
-        </el-table-column>
-        <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-else size="mini" type="danger">是</el-tag>
-          </template>
-        </el-table-column>
-        <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"
-          prop="update_time"
-          width="180"
-        >
-          <template slot-scope="scope">
-            <span>{{ parseTime(scope.row.update_time) }}</span>
-          </template>
-        </el-table-column>
-        <el-table-column
-          label="操作"
-          align="center"
-          class-name="small-padding fixed-width"
-          width="180"
-          fixed="right"
-        >
-          <template slot-scope="scope">
-            <el-button
-              v-permisaction="['process:list:upcoming:select']"
-              size="mini"
-              type="text"
-              icon="el-icon-edit"
-              @click="handleView(scope.row)"
-              >查看</el-button
-            >
-            <el-button
-              v-if="scope.row.is_end === 0"
-              v-permisaction="['process:list:upcoming:inversion']"
-              size="mini"
-              type="text"
-              icon="el-icon-position"
-              @click="handleInversion(scope.row)"
-              >转交</el-button
-            >
-          </template>
-        </el-table-column>
-      </el-table>
-
-      <el-dialog title="转交工单" :visible.sync="dialogVisible" width="40%">
-        <TransferInversion
-          v-if="dialogVisible"
-          :selectItem="selectItem"
-          @getList="getList"
-          @close="dialogVisible = false"
-        />
-      </el-dialog>
-
-      <pagination
-        v-show="total > 0"
-        :total="total"
-        :page.sync="queryParams.pageIndex"
-        :limit.sync="queryParams.pageSize"
-        @pagination="getList"
-      />
-    </el-card>
-  </div>
-</template>
-
-<script>
-import SaveForm from "@/components/save-form";
-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, TransferInversion, SaveForm },
-  data() {
-    return {
-      users: [],
-      nodeList: [],
-      dialogVisible: false,
-      queryParams: {},
-      total: 0,
-      loading: false,
-      ticketList: [],
-      listQuery: {
-        page: 1,
-        per_page: 10
-      },
-      selectItem: {
-        work_order_id: "",
-        node_id: null,
-        nodeList: [],
-        users: []
-      }
-    };
-  },
-  mounted() {
-    this.getList();
-  },
-  methods: {
-    getList() {
-      // console.log(this.listQuery, "121212");
-      this.loading = true;
-      this.listQuery.page = this.queryParams.pageIndex;
-      this.listQuery.per_page = this.queryParams.pageSize;
-      this.listQuery.classify = 1;
-      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;
-
-        initNumberHtml(response.data.total_count);
-      });
-    },
-    handleSearch(val) {
-      //
-      for (var k in val) {
-        this.listQuery[k] = val[k];
-      }
-
-      this.$refs.listQuery.save(this.listQuery);
-      this.$refs.listQuery.save(this.queryParams, "page");
-      this.getList();
-    },
-    handleView(row) {
-      this.$router.push({
-        name: "ProcessListHandle",
-        query: { workOrderId: row.id, processId: row.process }
-      });
-    },
-    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;
-      }
-      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() {}
-  }
-};
-</script>
-
-<style scoped></style>
+<template>
+  <div class="app-container">
+    <el-card class="box-card">
+      <save-form ref="listQuery" :model="listQuery" :inline="true">
+        <WorkOrderSearch
+          :genre="'upcoming'"
+          :list="listQuery"
+          @handleSearch="handleSearch"
+        />
+      </save-form>
+
+      <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"
+          width="150"
+          :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>
+              {{ scope.row.state_name }}
+            </span>
+          </template>
+        </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>
+          </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"
+          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">
+              <el-tag type="danger">非常紧急</el-tag>
+            </span>
+            <span v-else>
+              <el-tag type="success">一般</el-tag>
+            </span>
+          </template>
+        </el-table-column>
+        <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-else size="mini" type="danger">是</el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column label="付款金额" align="center" prop="payment_amount">
+        </el-table-column>
+        <el-table-column
+          label="情况说明"
+          align="center"
+          :show-overflow-tooltip="true"
+          prop="note"
+        >
+        </el-table-column>
+        <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"
+          prop="update_time"
+          width="180"
+        >
+          <template slot-scope="scope">
+            <span>{{ parseTime(scope.row.update_time) }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column
+          label="操作"
+          align="center"
+          class-name="small-padding fixed-width"
+          width="180"
+          fixed="right"
+        >
+          <template slot-scope="scope">
+            <el-button
+              v-permisaction="['process:list:upcoming:select']"
+              size="mini"
+              type="text"
+              icon="el-icon-edit"
+              @click="handleView(scope.row)"
+              >查看</el-button
+            >
+            <el-button
+              v-if="scope.row.is_end === 0"
+              v-permisaction="['process:list:upcoming:inversion']"
+              size="mini"
+              type="text"
+              icon="el-icon-position"
+              @click="handleInversion(scope.row)"
+              >转交</el-button
+            >
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <el-dialog title="转交工单" :visible.sync="dialogVisible" width="40%">
+        <TransferInversion
+          v-if="dialogVisible"
+          :selectItem="selectItem"
+          @getList="getList"
+          @close="dialogVisible = false"
+        />
+      </el-dialog>
+
+      <pagination
+        v-show="total > 0"
+        :total="total"
+        :page.sync="queryParams.pageIndex"
+        :limit.sync="queryParams.pageSize"
+        @pagination="getList"
+      />
+    </el-card>
+  </div>
+</template>
+
+<script>
+import SaveForm from "@/components/save-form";
+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, TransferInversion, SaveForm },
+  data() {
+    return {
+      users: [],
+      nodeList: [],
+      dialogVisible: false,
+      queryParams: {},
+      total: 0,
+      loading: false,
+      ticketList: [],
+      listQuery: {
+        page: 1,
+        per_page: 10,
+      },
+      selectItem: {
+        work_order_id: "",
+        node_id: null,
+        nodeList: [],
+        users: [],
+      },
+    };
+  },
+  mounted() {
+    this.getList();
+  },
+  methods: {
+    getList() {
+      this.loading = true;
+      this.listQuery.page = this.queryParams.pageIndex;
+      this.listQuery.per_page = this.queryParams.pageSize;
+      this.listQuery.classify = 1;
+      workOrderList({
+        ...this.listQuery,
+        search: this.listQuery.search ? this.listQuery.search.join(" ") : "",
+      }).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;
+
+        initNumberHtml(response.data.total_count);
+      });
+    },
+    handleSearch(val) {
+      //
+      for (var k in val) {
+        this.listQuery[k] = val[k];
+      }
+
+      this.$refs.listQuery.save(this.listQuery);
+      this.$refs.listQuery.save(this.queryParams, "page");
+      this.getList();
+    },
+    handleView(row) {
+      this.$router.push({
+        name: "ProcessListHandle",
+        query: { workOrderId: row.id, processId: row.process },
+      });
+    },
+    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;
+      }
+      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() {},
+  },
+};
+</script>
+
+<style scoped></style>