优化工单系统

src/api/utilities/work-order.js

@@ -15,10 +15,11 @@ export function getMyOrders() {
   })
 }
 
-export function getAllOrders() {
+export function getAllOrders(data) {
   return request({
     url: '/workOrder/getAllOrders',
     method: 'post',
+    data
   })
 }
 
@@ -30,10 +31,11 @@ export function takeWorkOrder(data) {
   })
 }
 
-export function getMyTakenOrders() {
+export function getMyTakenOrders(data) {
   return request({
     url: '/workOrder/getMyTakenOrders',
-    method: 'get',
+    method: 'post',
+    data
   })
 }
 

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

@@ -1,151 +1,28 @@
 <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 label="工单广场" name="plat" style="height: 88vh">
+      <OrderPlat ref="plat" />
     </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 label="已接工单" name="mine" style="height: 88vh">
+      <OrderTaken ref="taken"/>
     </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";
+import OrderPlat from "@/views/utilities/work-order/component/OrderPlat.vue";
+import OrderTaken from "@/views/utilities/work-order/component/OrderTaken.vue";
 
 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)
-  })
-}
+const plat = ref(null)
+const taken = ref(null)
 
 function onTabChange(val) {
   if (val === "plat") {
-    refreshPlatOrder()
+    plat.value.refreshPlatOrder()
   } else {
-    refreshMyTakenOrders()
+    taken.value.refreshMyTakenOrders()
   }
 }
-
-onMounted(() => {
-  refreshPlatOrder()
-})
 </script>

src/views/utilities/work-order/component/OrderPlat.vue

@@ -0,0 +1,142 @@
+<template>
+  <div class="layout_container" >
+    <header class="round-header">
+      <span>创建时间：</span>
+      <el-date-picker
+          v-model="dateRange"
+          type="daterange"
+          style="width: 210px"
+          :shortcuts="shortcuts"
+      />
+      <span style="margin-left: 8px">工单状态：</span>
+      <el-select
+          v-model="orderInquiry.state"
+          style="width: 100px"
+      >
+        <el-option
+            v-for="item in orderStateEnum"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+        />
+      </el-select>
+      <span style="margin-left: 8px">我已接取：</span>
+      <el-select
+          v-model="orderInquiry.meTaken"
+          style="width: 60px"
+      >
+        <el-option label="是" value="YES" />
+        <el-option label="否" value="NO" />
+      </el-select>
+      <el-divider direction="vertical"></el-divider>
+      <el-button
+          icon="Search"
+          type="primary"
+          @click="refreshPlatOrder"
+      >
+        检索
+      </el-button>
+    </header>
+    <div class="layout_main layout_el-table">
+      <el-table :data="allPlatOrders">
+        <el-table-column prop="id" label="工单编号" width="135"></el-table-column>
+        <el-table-column label="需求类型" width="105">
+          <template #default="{row}">
+            {{ filterType(row.type) }}
+          </template>
+        </el-table-column>
+        <el-table-column label="工单说明">
+          <template #default="{row}">
+            <div :title="row.content" class="ellipsis-text">{{row.content}}</div>
+          </template>
+        </el-table-column>
+        <el-table-column label="主要用户" width="80">
+          <template #default="{row}">
+            {{ filterBelong(row.belong) }}
+          </template>
+        </el-table-column>
+        <el-table-column prop="deptName" label="提交科室" width="130"></el-table-column>
+        <el-table-column prop="creatorName" label="提交人" width="70"></el-table-column>
+        <el-table-column prop="createtime" label="创建时间" width="130"></el-table-column>
+        <el-table-column label="状态" width="100">
+          <template #default="{row}">
+            {{ filterState(row.state) }}
+          </template>
+        </el-table-column>
+        <el-table-column label="我已接取" width="60">
+          <template #default="{row}">
+            {{row.meTaken === 0 ? '否' : '是'}}
+          </template>
+        </el-table-column>
+        <el-table-column width="100">
+          <template #header>
+            操作
+          </template>
+          <template #default="{row}">
+            <el-button
+                size="default"
+                type="danger"
+                plain
+                @click="takeOrder(row)"
+                :disabled="row.meTaken > 0"
+            >接取工单</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+  </div>
+</template>
+<script setup>
+import {filterBelong, filterState, filterType, orderStateEnum} from "@/views/utilities/work-order/work-order-filter";
+import {getAllOrders, takeWorkOrder} from "@/api/utilities/work-order.js";
+import {xcMessage} from "@/utils/xiaochan-element-plus";
+import {ElMessageBox} from "element-plus";
+import {shortcuts} from "@/data/shortcuts.js";
+import {getDateRangeFormatDate, getOneMonthOffset} from "@/utils/date.js";
+
+const dateRange = ref([])
+
+const orderInquiry = reactive({
+  state: 'ALL',
+  meTaken: 'NO',
+  begintime: '',
+  endtime: '',
+})
+
+const allPlatOrders = ref([])
+function refreshPlatOrder() {
+  const range = getDateRangeFormatDate(dateRange.value)
+  orderInquiry.begintime = range.startTime
+  orderInquiry.endtime = range.endTime
+  getAllOrders(orderInquiry).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)
+    })
+  })
+}
+
+onMounted(() => {
+  const range = getOneMonthOffset()
+  dateRange.value[0] = range.start
+  dateRange.value[1] = range.end
+  refreshPlatOrder()
+})
+
+defineExpose({refreshPlatOrder
+})
+
+</script>

src/views/utilities/work-order/component/OrderTaken.vue

@@ -0,0 +1,104 @@
+<template>
+  <div class="layout_container">
+    <header class="round-header">
+      <span>创建时间：</span>
+      <el-date-picker
+          v-model="dateRange"
+          type="daterange"
+          style="width: 210px"
+          :shortcuts="shortcuts"
+      />
+      <span style="margin-left: 8px">工单状态：</span>
+      <el-select
+          v-model="takenInquiry.progress"
+          style="width: 100px"
+      >
+        <el-option
+            v-for="item in progressStateEnum"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+        />
+      </el-select>
+      <el-divider direction="vertical"></el-divider>
+      <el-button
+          icon="Search"
+          type="primary"
+          @click="refreshMyTakenOrders"
+      >
+        检索
+      </el-button>
+    </header>
+    <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>
+            接单时间
+          </template>
+          <template #default="{row}">
+            {{row.createtime}}
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import {getMyTakenOrders, updateOrderProgress} from "@/api/utilities/work-order.js";
+import {xcMessage} from "@/utils/xiaochan-element-plus";
+import {getDateRangeFormatDate, getOneMonthOffset} from "@/utils/date.js";
+import {shortcuts} from "@/data/shortcuts.js";
+import {progressStateEnum} from "@/views/utilities/work-order/work-order-filter.js";
+
+const dateRange = ref([])
+
+const takenInquiry = reactive({
+  progress: 'ALL',
+  begintime: '',
+  endtime: '',
+})
+
+const myTakenOrders = ref([])
+
+function refreshMyTakenOrders() {
+  const range = getDateRangeFormatDate(dateRange.value)
+  takenInquiry.begintime = range.startTime
+  takenInquiry.endtime = range.endTime
+  getMyTakenOrders(takenInquiry).then(res => {
+    myTakenOrders.value = res
+  })
+}
+
+function handleProgressChange(row) {
+  updateOrderProgress(row).then(res => {
+    xcMessage.success(res)
+  })
+}
+
+onMounted(() => {
+  const range = getOneMonthOffset()
+  dateRange.value[0] = range.start
+  dateRange.value[1] = range.end
+  refreshMyTakenOrders()
+})
+
+defineExpose({refreshMyTakenOrders})
+</script>

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

@@ -23,9 +23,9 @@ export function filterBelong(belong) {
 export function filterState(state) {
   switch (state) {
     case 'NEW_ORDER':
-      return '未接取'
+      return '未被接取'
     case 'TAKEN':
-      return '已接取'
+      return '已被接取'
     case 'FINISHED':
       return '已完成'
     case 'CONFIRMED':
@@ -42,4 +42,19 @@ export function filterProgress(state) {
     case 'PROCESS_FINISHED':
       return '已完成'
   }
-}
+}
+
+export const orderStateEnum = [
+  { label: '全部', value: 'ALL'},
+  { label: '未被接取', value: 'NEW_ORDER' },
+  { label: '已被接取', value: 'TAKEN' },
+  { label: '已完成', value: 'FINISHED' },
+  { label: '已确认', value: 'CONFIRMED' },
+]
+
+export const progressStateEnum = [
+  { label: '全部', value: 'ALL'},
+  { label: '未开始', value: 'NOT_STARTED' },
+  { label: '进行中', value: 'IN_PROCESS' },
+  { label: '已完成', value: 'PROCESS_FINISHED' },
+]