工单系统

src/api/utilities/work-order.js

@@ -0,0 +1,46 @@
+import request from '@/utils/request'
+
+export function submitNewOrder(data) {
+  return request({
+    url: '/workOrder/submitNewOrder',
+    method: 'post',
+    data,
+  })
+}
+
+export function getMyOrders() {
+  return request({
+    url: '/workOrder/getMyOrders',
+    method: 'get',
+  })
+}
+
+export function getAllOrders() {
+  return request({
+    url: '/workOrder/getAllOrders',
+    method: 'post',
+  })
+}
+
+export function takeWorkOrder(data) {
+  return request({
+    url: '/workOrder/takeWorkOrder',
+    method: 'post',
+    data
+  })
+}
+
+export function getMyTakenOrders() {
+  return request({
+    url: '/workOrder/getMyTakenOrders',
+    method: 'get',
+  })
+}
+
+export function updateOrderProgress(data) {
+  return request({
+    url: '/workOrder/updateOrderProgress',
+    method: 'post',
+    data
+  })
+}

src/views/utilities/work-order/AcceptWorkOrder.vue

@@ -0,0 +1,151 @@
+<template>
+  <el-tabs v-model="activeName" @tab-change="onTabChange">
+    <el-tab-pane label="工单广场" name="plat">
+      <div class="layout_container" style="height: 100vh">
+        <div class="layout_main layout_el-table">
+          <el-table :data="allPlatOrders">
+            <el-table-column prop="id" label="工单编号"></el-table-column>
+            <el-table-column label="需求类型">
+              <template #default="{row}">
+                {{ filterType(row.type) }}
+              </template>
+            </el-table-column>
+            <el-table-column prop="content" label="工单说明"></el-table-column>
+            <el-table-column label="主要用户">
+              <template #default="{row}">
+                {{ filterBelong(row.belong) }}
+              </template>
+            </el-table-column>
+            <el-table-column prop="deptName" label="提交科室"></el-table-column>
+            <el-table-column prop="creatorName" label="提交人"></el-table-column>
+            <el-table-column prop="createtime" label="创建时间"></el-table-column>
+            <el-table-column label="状态">
+              <template #default="{row}">
+                {{ filterState(row.state) }}
+              </template>
+            </el-table-column>
+            <el-table-column label="我已接取">
+              <template #default="{row}">
+                {{row.meTaken === 0 ? '否' : '是'}}
+              </template>
+            </el-table-column>
+            <el-table-column >
+              <template #header>
+                操作&nbsp;&nbsp;
+                <el-button
+                    circle
+                    icon="refresh"
+                    @click="refreshPlatOrder"
+                ></el-button>
+              </template>
+              <template #default="{row}">
+                <el-button
+                    size="default"
+                    type="primary"
+                    plain
+                    @click="takeOrder(row)"
+                    :disabled="row.meTaken > 0"
+                >接取工单</el-button>
+              </template>
+            </el-table-column>
+          </el-table>
+        </div>
+      </div>
+    </el-tab-pane>
+    <el-tab-pane label="已接工单" name="mine">
+      <div class="layout_container" style="height: 100vh">
+        <div class="layout_main layout_el-table">
+          <el-table :data="myTakenOrders">
+            <el-table-column prop="id" label="任务编号"></el-table-column>
+            <el-table-column prop="parentId" label="工单编号"></el-table-column>
+            <el-table-column label="工单进度">
+              <template #default="{row}">
+                <el-select
+                    v-model="row.progress"
+                    :disabled="row.progress === 'PROCESS_FINISHED' "
+                    style="width: 120px"
+                    @change="handleProgressChange(row)"
+                >
+                  <el-option value="NOT_STARTED" label="未开始"/>
+                  <el-option value="IN_PROCESS" label="进行中"/>
+                  <el-option value="PROCESS_FINISHED" label="已完成"/>
+                </el-select>
+              </template>
+            </el-table-column>
+            <el-table-column prop="content" label="工作内容"></el-table-column>
+            <el-table-column >
+              <template #header>
+                接单时间&nbsp;&nbsp;
+                <el-button
+                    circle
+                    icon="refresh"
+                    @click="refreshMyTakenOrders"
+                ></el-button>
+              </template>
+              <template #default="{row}">
+                {{row.createtime}}
+              </template>
+            </el-table-column>
+          </el-table>
+        </div>
+      </div>
+    </el-tab-pane>
+  </el-tabs>
+</template>
+
+<script setup>
+import {filterBelong, filterState, filterType} from "@/views/utilities/work-order/work-order-filter.js";
+import {getAllOrders, takeWorkOrder, getMyTakenOrders, updateOrderProgress} from "@/api/utilities/work-order.js";
+import {xcMessage} from "@/utils/xiaochan-element-plus";
+import {ElMessageBox} from "element-plus";
+
+const activeName = ref("plat");
+const allPlatOrders = ref([])
+const myTakenOrders = ref([])
+
+function refreshPlatOrder() {
+  getAllOrders().then(res => {
+    allPlatOrders.value = res;
+  })
+}
+
+function takeOrder(row) {
+  ElMessageBox.prompt('请输入工作内容：', '接取工单', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    inputValue: null,
+    inputPattern: /\S/,
+    inputErrorMessage: '工作内容不能为空',
+  }).then(({value}) => {
+    row.expContent = value
+    takeWorkOrder(row).then(res => {
+      row.meTaken = 1
+      xcMessage.success(res)
+    })
+  })
+}
+
+function refreshMyTakenOrders() {
+  getMyTakenOrders().then(res => {
+    myTakenOrders.value = res
+  })
+}
+
+function handleProgressChange(row) {
+  updateOrderProgress(row).then(res => {
+    xcMessage.success(res)
+  })
+}
+
+function onTabChange(val) {
+  if (val === "plat") {
+    refreshPlatOrder()
+  } else {
+    refreshMyTakenOrders()
+  }
+}
+
+onMounted(() => {
+  refreshPlatOrder()
+})
+</script>

src/views/utilities/work-order/SubmitWorkOrder.vue

@@ -0,0 +1,174 @@
+<template>
+  <div class="layout_container submit-work-order">
+    <header class="round-header">
+      <div class="max-w">
+        <el-button
+            type="primary"
+            plain
+            icon="Plus"
+            size="large"
+            @click="showCreationDialog"
+        >创建新的工单</el-button>
+      </div>
+      <div class="rest-w">
+        <el-button
+            type="info"
+            plain
+            icon="Refresh"
+            size="large"
+            @click="refreshData(true)"
+        >刷新数据</el-button>
+      </div>
+    </header>
+    <div class="layout_main layout_el-table">
+      <el-table :data="myOrderList">
+        <el-table-column prop="id" label="工单编号"></el-table-column>
+        <el-table-column label="需求类型">
+          <template #default="{row}">
+            {{ filterType(row.type) }}
+          </template>
+        </el-table-column>
+        <el-table-column prop="content" label="工单说明"></el-table-column>
+        <el-table-column label="主要用户">
+          <template #default="{row}">
+            {{ filterBelong(row.belong) }}
+          </template>
+        </el-table-column>
+        <el-table-column prop="createtime" label="创建时间"></el-table-column>
+        <el-table-column label="状态">
+          <template #default="{row}">
+            {{ filterState(row.state) }}
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+
+    <el-dialog
+        v-model="creationDialogVisible"
+        width="360px"
+        title="创建工单"
+        :close-on-click-modal="false"
+        :close-on-press-escape="false"
+        :show-close="false"
+    >
+
+      <el-form :model="order" label-width="auto" :rules="rules" ref="orderForm">
+        <el-form-item label="需求类型" prop="type">
+          <el-select v-model="order.type">
+            <el-option value="ADD" label="添加新功能" />
+            <el-option value="OPTIMIZE" label="优化现有功能" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="主要用户" prop="belong">
+          <el-select v-model="order.belong">
+            <el-option value="ALL" label="全院" />
+            <el-option value="DEPARTMENT" label="本科室" />
+            <el-option value="PERSONAL" label="本人" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="需求说明" prop="content">
+          <el-input v-model="order.content" type="textarea" :rows="4" maxlength="1024" show-word-limit/>
+        </el-form-item>
+      </el-form>
+      <div class="dialog-footer">
+        <el-button type="primary" size="default" @click="submitForm">提交</el-button>
+        <el-button size="default" @click="creationDialogVisible = false">取消</el-button>
+      </div>
+
+    </el-dialog>
+  </div>
+</template>
+
+<script setup>
+
+import {getMyOrders, submitNewOrder} from "@/api/utilities/work-order.js";
+import {xcMessage} from "@/utils/xiaochan-element-plus";
+import {filterBelong, filterState, filterType} from "./work-order-filter.js";
+
+const creationDialogVisible = ref(false);
+function showCreationDialog() {
+  creationDialogVisible.value = true;
+}
+
+const orderForm = ref(null)
+
+const rules = {
+  type: [
+    {
+      required: true,
+      message: '请选择需求类型',
+      trigger: 'change'
+    }
+  ],
+  belong: [
+    {
+      required: true,
+      message: '请选择主要用户',
+      trigger: 'change'
+    }
+  ],
+  content: [
+    {
+      required: true,
+      message: '请填写需求说明',
+      trigger: 'blur'
+    }
+  ],
+}
+
+const order = reactive({
+  type: null,
+  belong: null,
+  content: null,
+})
+
+const myOrderList = ref([])
+
+async function submitForm() {
+  await orderForm.value.validate((valid) => {
+    if (valid) {
+      submitNewOrder(order).then((res) => {
+        myOrderList.value = res
+        xcMessage.success('提交成功。')
+        creationDialogVisible.value = false
+      })
+    }
+  })
+}
+
+function refreshData(toast) {
+  getMyOrders().then(res => {
+    myOrderList.value = res
+    if (toast) {
+      xcMessage.success('刷新成功')
+    }
+  })
+}
+
+onMounted(() => {
+  refreshData()
+})
+</script>
+
+<style lang="scss">
+.submit-work-order {
+  >.round-header {
+   display: flex;
+    >.max-w {
+      width: 90%;
+    }
+    >.rest-w {
+      width: 10%;
+    }
+    button {
+      width: 100%;
+    }
+  }
+
+  .dialog-footer {
+    width: 100%;
+    text-align: right;
+    margin: 12px 0 6px 0;
+  }
+}
+</style>

src/views/utilities/work-order/WorkOrderStatistics.vue

@@ -0,0 +1,7 @@
+<template>
+  <div>
+    工单统计
+  </div>
+</template>
+<script setup lang="ts">
+</script>

src/views/utilities/work-order/work-order-filter.js

@@ -0,0 +1,45 @@
+export function filterType(type) {
+  switch (type) {
+    case 'ADD':
+      return '添加新功能'
+    case 'OPTIMIZE':
+      return '优化现有功能'
+    case 'TEST':
+      return '测试'
+  }
+}
+
+export function filterBelong(belong) {
+  switch (belong) {
+    case 'ALL':
+      return '全院'
+    case 'DEPARTMENT':
+      return '本科室'
+    case 'PERSONAL':
+      return '本人'
+  }
+}
+
+export function filterState(state) {
+  switch (state) {
+    case 'NEW_ORDER':
+      return '未接取'
+    case 'TAKEN':
+      return '已接取'
+    case 'FINISHED':
+      return '已完成'
+    case 'CONFIRMED':
+      return '已确认'
+  }
+}
+
+export function filterProgress(state) {
+  switch (state) {
+    case 'NOT_STARTED':
+      return '未开始'
+    case 'IN_PROCESS':
+      return '进行中'
+    case 'PROCESS_FINISHED':
+      return '已完成'
+  }
+}