一.工单系统需求分析

 

 

 

 

 

 

二.工单系统后端

  1. (python36env) [vagrant@CentOS devops]$ django-admin startapp workorder
  2. (python36env) [vagrant@CentOS devops]$ mv workorder apps/
  4. settings.py:
  5. INSTALLED_APPS = [
  6.     .....
  7.     \'workorder\',
  8.     .......
  9. ]

(1)apps/workorder/models.py:

  1. from django.db import models
  2. from users.models import User
  4. class WorkOrder(models.Model):
  5.     TYPE = (
  6.         (0, \'数据库\'),
  7.         (1, \'WEB服务\'),
  8.         (2, \'计划任务\'),
  9.         (3, \'配置文件\'),
  10.         (4, \'其它\'),
  11.     )
  12.     STATUS = (
  13.         (0, \'申请\'),
  14.         (1, \'处理中\'),
  15.         (2, \'完成\'),
  16.         (3, \'失败\'),
  17.     )
  18.     title = models.CharField(max_length=100, verbose_name=u\'工单标题\')
  19.     type = models.IntegerField(choices=TYPE, default=0, verbose_name=u\'工单类型\')
  20.     order_contents = models.TextField(verbose_name=\'工单内容\')
  21.     applicant = models.ForeignKey(User, verbose_name=u\'申请人\', related_name=\'work_order_applicant\',on_delete=models.CASCADE)
  22.     assign_to = models.ForeignKey(User, verbose_name=u\'指派给\',on_delete=models.CASCADE)
  23.     final_processor = models.ForeignKey(User, null=True, blank=True, verbose_name=u\'最终处理人\', related_name=\'final_processor\',on_delete=models.CASCADE)
  24.     status = models.IntegerField(choices=STATUS, default=0, verbose_name=u\'工单状态\')
  25.     result_desc = models.TextField(verbose_name=u\'处理结果\', blank=True, null=True)
  26.     apply_time = models.DateTimeField(auto_now_add=True, verbose_name=u\'申请时间\')
  27.     complete_time = models.DateTimeField(auto_now=True, verbose_name=u\'处理完成时间\')
  29.     def __str__(self):
  30.         return self.title
  32.     class Meta:
  33.         verbose_name = \'工单\'
  34.         verbose_name_plural = verbose_name
  35.         ordering = [\'-complete_time\']

(python36env) [vagrant@CentOS devops]$ python manage.py makemigrations workorder

(python36env) [vagrant@CentOS devops]$ python manage.py migrate workorder

(2)workorder/serializers.py:

  1. from rest_framework import serializers
  2. from django.contrib.auth import get_user_model
  3. from .models import WorkOrder
  4. from datetime import  datetime
  6. User = get_user_model()
  9. class WorkOrderSerializer(serializers.ModelSerializer):
  10.     """
  11.     工单序列化类
  12.     """
  13.     # 获取当前登陆用户，并将其赋值给数据库中对应的字段
  14.     applicant = serializers.HiddenField(
  15.         default=serializers.CurrentUserDefault())
  16.     # 后端格式时间
  17.     # apply_time = serializers.DateTimeField(format="%Y-%m-%d %H:%M:%S", read_only=True)
  18.     # complete_time = serializers.DateTimeField(format="%Y-%m-%d %H:%M:%S", read_only=True)
  19.  
  20.     class Meta:
  21.         model = WorkOrder
  22.         fields = "__all__"
  23.  
  24.     def to_representation(self, instance):
  25.         applicant_obj = instance.applicant
  26.         assign_to_obj = instance.assign_to
  27.         final_processor_obj = instance.final_processor
  28.         type_value = instance.get_type_display()
  29.         # print("new:", type_value)
  30.         # print("old:", instance.type)
  31.         status_value = instance.get_status_display()
  32.         ret = super(WorkOrderSerializer, self).to_representation(instance)
  33.         ret[\'type\'] = {
  34.              "id": instance.type,
  35.              "name": type_value
  36.         }
  37.         ret[\'status\'] = {
  38.             "id": instance.status,
  39.             "name": status_value
  40.         }
  41.         ret["applicant"] = {
  42.                                "id": applicant_obj.id,
  43.                                "name": applicant_obj.name
  44.                            },
  45.         ret["assign_to"] = {
  46.                                "id": assign_to_obj.id,
  47.                                "name": assign_to_obj.name
  48.                            },
  49.         if final_processor_obj:
  50.             ret["final_processor"] = {
  51.                                 "id": final_processor_obj.id,
  52.                                 "name": final_processor_obj.name
  53.                             },
  54.         # print(ret)
  55.         return ret
  57.     # def create(self, validated_data):
  58.     #     applicant = self.context[\'request\'].user   #获取用户信息
  59.     #     validated_data[\'applicant\'] = applicant
  60.     #     print(validated_data)
  61.     #     instance = self.Meta.model.objects.create(**validated_data)
  62.     #     instance.save()
  63.     #     return instance
  64.  
  65.     # def update(self, instance, validated_data):
  66.     #     final_processor = self.context[\'request\'].user
  67.     #     print(validated_data)
  68.     #     validated_data[\'final_processor\'] = final_processor
  69.     #     instance = self.Meta.model.objects.filter(id=instance.id).update(**validated_data)
  70.     #     return instance

(3)workorder/views.py:

  1. from django.contrib.auth import get_user_model
  2. from rest_framework import viewsets, mixins,permissions, status
  3. from rest_framework.response import Response
  4. from rest_framework.pagination import PageNumberPagination
  5. from rest_framework import filters
  6. from django_filters.rest_framework import DjangoFilterBackend
  7. from rest_framework.authentication import TokenAuthentication,BasicAuthentication,SessionAuthentication
  8. from rest_framework_jwt.authentication import JSONWebTokenAuthentication
  9. import    time
  11. from .serializers import WorkOrderSerializer
  12. from .models import WorkOrder
  14. User = get_user_model()
  17. class Pagination(PageNumberPagination):
  18.     page_size = 10
  19.     page_size_query_param = \'page_size\'
  20.     page_query_param = "page"
  21.     max_page_size = 100
  22.  
  23.  
  24. class WorkOrderViewset(viewsets.ModelViewSet):
  25.     """
  26.     create:
  27.     创建工单
  28.     list:
  29.     获取工单列表
  30.     retrieve:
  31.     获取工单信息
  32.     update:
  33.     更新更新信息
  34.     delete:
  35.     删除用户
  36.     """
  37.     authentication_classes = (JSONWebTokenAuthentication, TokenAuthentication, SessionAuthentication, BasicAuthentication)
  38.     permission_classes = (permissions.IsAuthenticated, permissions.DjangoModelPermissions)
  39.     queryset = WorkOrder.objects.all()
  40.     serializer_class = WorkOrderSerializer
  41.     pagination_class = Pagination
  42.     filter_backends = (DjangoFilterBackend, filters.SearchFilter, filters.OrderingFilter)
  43.     search_fields = (\'title\', \'order_contents\')
  44.     ordering_fields = (\'id\',)
  46.     def get_queryset(self):
  47.         status = self.request.GET.get(\'status\', None)
  48.         applicant = self.request.user
  49.         # 获取当前登陆用户所有组的信息, RBAC   用户-->组-->权限
  50.         role = applicant.groups.all().values(\'name\')
  51.         # print(role)
  52.         role_name = [r[\'name\'] for r in role]
  53.         # print(role_name)
  54.         queryset = super(WorkOrderViewset, self).get_queryset()
  56.         # 判断传来的status值判断是申请列表还是历史列表
  57.         if status and int(status) == 1:
  58.             queryset = queryset.filter(status__lte=int(status))
  59.         elif status and int(status) == 2:
  60.             queryset = queryset.filter(status__gte=int(status))
  61.         else:
  62.             pass
  63.  
  64.         # 判断登陆用户是否是管理员，是则显示所有工单，否则只显示自己的
  65.         if "sa" not in role_name:
  66.             queryset = queryset.filter(applicant=applicant)
  67.         return queryset
  69.     def partial_update(self, request, *args, **kwargs):
  70.         pk = int(kwargs.get("pk"))
  71.         print(pk)
  72.         final_processor = self.request.user
  73.         data = request.data
  74.         data[\'final_processor\'] = final_processor
  75.         data[\'complete_time\'] = time.strftime(\'%Y-%m-%d    %H:%M:%S\', time.localtime(time.time()))
  76.         print(data)
  77.         WorkOrder.objects.filter(pk=pk).update(**data)
  78.         return Response(status=status.HTTP_204_NO_CONTENT)

(4)workorder/filters.py

  1. import django_filters
  3. from django.contrib.auth import get_user_model
  4. from.models import WorkOrder
  7. User = get_user_model()
  10. class WorkOrderFilter(django_filters.rest_framework.FilterSet):
  11.     """
  12.     工单过滤类
  13.     """
  14.     class Meta:
  15.         model = WorkOrder
  16.         fields = [\'title\']

(5)workorder/router.py:

  1. from rest_framework.routers import DefaultRouter
  2. from .views import WorkOrderViewset
  4. workorder_router = DefaultRouter()
  5. workorder_router.register(r\'workorder\', WorkOrderViewset, basename="workorder")

(6)devops/urls.py

  1. from workorder.router import workorder_router
  2. router.registry.extend(workorder_router.registry)

效果如图:

 

 

三.工单前端处理

安装插件：

F:\devops\data\web\vueAdmin-template>npm install moment  –save

1.工单基础页面实现

(1)src/api/workorder/workorder.js

  1. import request from \'@/utils/request\'
  2.  
  3. // 获取工单列表
  4. export function getWorkOrderList(params) {
  5.   return request({
  6.     url: \'/api/workorder/\',
  7.     method: \'get\',
  8.     params
  9.   })
  10. }
  12. // 创建工单
  13. export function createWorkOrder(data) {
  14.   return request({
  15.     url: \'/api/workorder/\',
  16.     method: \'post\',
  17.     data
  18.   })
  19. }
  21. // 修改工单
  22. export function updateWorkOrder(id, data) {
  23.   return request({
  24.     url: \'/api/workorder/\' + id + \'/\',
  25.     method: \'patch\',
  26.     data
  27.   })
  28. }
  30. // 删除工单
  31. export function deleteWorkOrder(id) {
  32.   return request({
  33.     url: \'/api/workorder/\' + id + \'/\',
  34.     method: \'delete\'
  35.   })
  36. }

(2)src/router/index.js

  1.   {
  2.     path: \'/workorder\',
  3.     component: Layout,
  4.     name: \'workorder\',
  5.     meta: { title: \'工单系统\', icon: \'form\' },
  6.     children: [
  7.       {
  8.         path: \'apply\',
  9.         name: \'工单申请\',
  10.         meta: { title: \'工单申请\', icon: \'form\' }
  11.       },
  12.       {
  13.         path: \'list\',
  14.         name: \'申请列表\',
  15.         component: () => import(\'@/views/workorder/list/index\'),
  16.         meta: { title: \'申请列表\', icon: \'table\' }
  17.       },
  18.       {
  19.         path: \'history\',
  20.         name: \'工单历史\',
  21.         meta: { title: \'工单历史\', icon: \'table\' }
  22.       }
  23.     ]
  24.   },

(3)views/workorder/list/index.vue

  1. <template>
  2.   <div class="workorder">
  3.     <div>
  4.       <!--搜索-->
  5.       <el-col :span="8">
  6.         <el-input v-model="params.search" placeholder="搜索" @keyup.enter.native="searchClick">
  7.           <el-button slot="append" icon="el-icon-search" @click="searchClick"/>
  8.         </el-input>
  9.       </el-col>
  10.     </div>
  11.  
  12.     <!--表格-->
  13.     <order-list :value="workorders" @rate="handleRate" @edit="handleEdit" @delete="handleDelete"/>
  14.  
  15.     <!--模态窗任务进度-->
  16.     <el-dialog
  17.       :title="currentValue.title"
  18.       :visible.sync="dialogVisibleForRate"
  19.       width="30%">
  20.       <div style="height: 300px;">
  21.         <el-steps :active="active" direction="vertical" finish-status="success" >
  22.           <el-step
  23.             v-for="(item,index) in rate"
  24.             :title="item.title"
  25.             :description="item.description"
  26.             :key="index" />
  27.         </el-steps>
  28.       </div>
  29.     </el-dialog>
  30.  
  31.     <!--模态窗工单处理-->
  32.     <el-dialog
  33.       :visible.sync="dialogVisibleForEdit"
  34.       title="工单处理"
  35.       width="50%">
  36.       <order-form
  37.         ref="workorderForm"
  38.         :form="currentValue"
  39.         @submit="handleSubmitEdit"
  40.         @cancel="handleCancelEdit"/>
  41.     </el-dialog>
  42.  
  43.     <!--分页-->
  44.     <center>
  45.       <el-pagination
  46.         :page-size="pagesize"
  47.         :total="totalNum"
  48.         background
  49.         layout="total, prev, pager, next, jumper"
  50.         @current-change="handleCurrentChange"/>
  51.     </center>
  52.   </div>
  53. </template>
  54.  
  55. <script>
  56.   import { getWorkOrderList, updateWorkOrder } from \'@/api/workorder/workorder\'
  57.   import OrderList from \'./table\'
  59.   export default {
  60.     name: \'Workorder\',
  61.     components: {
  62.       OrderList
  63.     },
  65.     data() {
  66.       return {
  67.         dialogVisibleForEdit: false,
  68.         dialogVisibleForRate: false,
  69.         currentValue: {},
  70.         workorders: [],
  71.         totalNum: 0,
  72.         pagesize: 10,
  73.         active: 1,
  74.         apply: {},
  75.         assign: {},
  76.         final_processor: {},
  77.         rate: [],
  78.         params: {
  79.           page: 1,
  80.           search: \'\',
  81.           status: 1
  82.         }
  83.       }
  84.     },
  86.     created() {
  87.       this.fetchData()
  88.     },
  90.     methods: {
  91.       fetchData() {
  92.         getWorkOrderList(this.params).then(
  93.           res => {
  94.             this.workorders = res.results
  95.             console.log(this.workorders)
  96.             this.totalNum = res.count
  97.           })
  98.       },
  99.       handleCurrentChange(val) {
  100.         this.params.page = val
  101.         this.fetchData()
  102.       },
  103.       searchClick() {
  104.         this.fetchData()
  105.       },
  106.       /* 流程进度处理函数 */
  107.       handleRate(value) {
  108.         this.currentValue = { ...value }
  109.         console.log(value)
  110.         this.dialogVisibleForRate = true
  111.         this.rate = []
  112.         this.final_processor = {}
  113.         this.apply[\'title\'] = \'任务申请: \' + value.applicant[0].name + \': \' + value.apply_time
  114.         this.assign[\'title\'] = \'任务分配: \' + value.assign_to[0].name
  115.         if (value.final_processor) {
  116.           this.final_processor[\'title\'] = \'任务领取: \' + value.final_processor[0].name + \': \' + value.complete_time
  117.           this.active = 3
  118.         }
  119.         this.rate.push(this.apply)
  120.         this.rate.push(this.assign)
  121.         this.rate.push(this.final_processor)
  122.       },
  124.       /*  处理工单，弹出模态窗、提交数据、取消 */
  125.       handleEdit(value) {
  126.         this.currentValue = { ...value }
  127.         console.log(this.currentValue)
  128.         const data = { \'status\': 1 }
  129.         const id = this.currentValue.id
  130.         updateWorkOrder(id, data).then(res => {
  131.           this.$message({
  132.             message: \'接受工单\',
  133.             type: \'success\'
  134.           })
  135.           this.dialogVisibleForEdit = true
  136.           this.fetchData()
  137.         })
  138.       },
  140.       handleSubmitEdit(value) {
  141.         const { id, ...params } = value // 很神奇，能把表单的值拆解成自己想要的样子
  142.         console.log(params)
  143.         const data = { \'status\': 2, \'result_desc\': params.result_desc }
  144.         updateWorkOrder(id, data).then(res => {
  145.           this.$message({
  146.             message: \'更新成功\',
  147.             type: \'success\'
  148.           })
  149.           this.handleCancelEdit()
  150.           this.fetchData()
  151.         })
  152.       },
  153.       handleCancelEdit() {
  154.         this.dialogVisibleForEdit = false
  155.         this.$refs.workorderForm.$refs.form.resetFields()
  156.       },
  158.       /* 取消 */
  159.       handleDelete(id) {
  160.         const data = { \'status\': 3 }
  161.         updateWorkOrder(id, data).then(res => {
  162.           this.$message({
  163.             message: \'取消成功\',
  164.             type: \'success\'
  165.           })
  166.           this.fetchData()
  167.         },
  168.         err => {
  169.           console.log(err.message)
  170.         })
  171.       }
  172.     }
  173.   }
  174. </script>
  175.  
  176. <style lang=\'scss\' scoped>
  177.   .workorder {
  178.     padding: 10px;
  179.   }
  180. </style>

(4)views/workorder/list/table.vue

  1. <template>
  2.   <div class="workorder-list">
  3.     <el-table
  4.       :data="value"
  5.       border
  6.       stripe
  7.       style="width: 100%">
  8.  
  9.       <el-table-column type="expand">
  10.         <template slot-scope="props">
  11.           <span><pre>工单详情：{{ props.row.order_contents }}</pre></span>
  12.         </template>
  13.       </el-table-column>
  14.  
  15.       <el-table-column
  16.         label="工单类型"
  17.         prop="type.name"/>
  18.  
  19.       <el-table-column
  20.         label="工单标题"
  21.         prop="title"/>
  22.  
  23.       <el-table-column
  24.         label="申请人"
  25.         prop="applicant[0].name"/>
  26.  
  27.       <el-table-column
  28.         label="工单状态"
  29.         prop="status.name"/>
  30.  
  31.       <el-table-column
  32.         label="任务进度"
  33.         align="center">
  34.         <template slot-scope="scope">
  35.           <el-button type="text" size="small" @click="handleRate(scope.row)">
  36.             {{ \'任务进度\' }}
  37.           </el-button>
  38.         </template>
  39.       </el-table-column>
  40.  
  41.       <el-table-column
  42.         :formatter="dateFormat"
  43.         label="申请时间"
  44.         prop="apply_time"
  45.       />
  46.  
  47.       <el-table-column label="操作">
  48.         <template slot-scope="scope">
  49.           <el-button
  50.             size="mini"
  51.             type="primary"
  52.             @click="handleEdit(scope.row)">处理</el-button>
  53.  
  54.           <el-button
  55.             size="mini"
  56.             type="danger"
  57.             @click="handleDelete(scope.row)">取消</el-button>
  58.         </template>
  59.       </el-table-column>
  60.  
  61.     </el-table>
  62.   </div>
  63. </template>
  64.  
  65. <script>
  66. import moment from \'moment\'
  68. export default {
  69.   name: \'OrderList\',
  70.   props: {
  71.     value: {
  72.       type: Array,
  73.       default: function() {
  74.         return []
  75.       }
  76.     }
  77.   },
  78.   methods: {
  79.     /* 点击编辑按钮，将子组件的事件传递给父组件 */
  80.     handleEdit(value) {
  81.       this.$emit(\'edit\', value)
  82.     },
  84.     /* 流程进度 */
  85.     handleRate(value) {
  86.       this.$emit(\'rate\', value)
  87.     },
  89.     /* 删除 */
  90.     handleDelete(workorder) {
  91.       const id = workorder.id
  92.       const name = workorder.title
  93.       this.$confirm(`此操作将删除: ${name}, 是否继续?`, \'提示\', {
  94.         confirmButtonText: \'确定\',
  95.         cancelButtonText: \'取消\',
  96.         type: \'warning\'
  97.       }).then(() => {
  98.         this.$emit(\'delete\', id)
  99.       }).catch(() => {
  100.         this.$message({
  101.           type: \'info\',
  102.           message: \'已取消删除\'
  103.         })
  104.       })
  105.     },
  106.     dateFormat: function(row, column) {
  107.       const date = row[column.property]
  108.       if (date === undefined) {
  109.         return \'\'
  110.       }
  111.       return moment(date).format(\'YYYY-MM-DD HH:mm:ss\')
  112.     }
  114.   }
  115. }
  116. </script>
  117.  
  118. <style lang=\'scss\'>
  119. </style>

效果如图:

 

 2.历史工单

(1)src/router/index.js

  1.     {
  2.         path: \'history\',
  3.         name: \'工单历史\',
  4.         component: () => import(\'@/views/workorder/history/index\'),
  5.         meta: { title: \'工单历史\', icon: \'table\' }
  6.       }

(1)workorder/history/index.vue

  1. <template>
  2.   <div class="workorder">
  3.     <div>
  4.       <!--搜索-->
  5.       <el-col :span="8">
  6.         <el-input v-model="params.search" placeholder="搜索" @keyup.enter.native="searchClick">
  7.           <el-button slot="append" icon="el-icon-search" @click="searchClick"/>
  8.         </el-input>
  9.       </el-col>
  10.     </div>
  11.  
  12.     <!--表格-->
  13.     <order-list :value="workorders"/>
  14.  
  15.     <!--分页-->
  16.     <center>
  17.       <el-pagination
  18.         :page-size="pagesize"
  19.         :total="totalNum"
  20.         background
  21.         layout="total, prev, pager, next, jumper"
  22.         @current-change="handleCurrentChange"/>
  23.     </center>
  24.   </div>
  25. </template>
  26.  
  27. <script>
  28. import { getWorkOrderList } from \'@/api/workorder/workorder\'
  29. import OrderList from \'./table\'
  31. export default {
  32.   name: \'Workorder\',
  33.   components: {
  34.     OrderList
  35.   },
  37.   data() {
  38.     return {
  39.       workorders: [],
  40.       totalNum: 0,
  41.       pagesize: 10,
  42.       params: {
  43.         page: 1,
  44.         status: 2
  45.       }
  46.     }
  47.   },
  49.   created() {
  50.     this.fetchData()
  51.   },
  53.   methods: {
  54.     fetchData() {
  55.       getWorkOrderList(this.params).then(
  56.         res => {
  57.           this.workorders = res.results
  58.           console.log(this.workorders)
  59.           this.totalNum = res.count
  60.         })
  61.     },
  62.     handleCurrentChange(val) {
  63.       this.params.page = val
  64.       this.fetchData()
  65.     },
  66.     searchClick() {
  67.       this.fetchData()
  68.     }
  70.   }
  72. }
  73. </script>
  74.  
  75. <style lang=\'scss\' scoped>
  76. .workorder {
  77.   padding: 10px;
  78. }
  79. </style>

(3)workorder/table.vue

  1. <template>
  2.   <div class="workorder-list">
  3.     <el-table
  4.       :data="value"
  5.       border
  6.       stripe
  7.       style="width: 100%">
  8.  
  9.       <el-table-column type="expand">
  10.         <template slot-scope="props">
  11.           <span>工单详情：{{ props.row.order_contents }}</span>
  12.           <br>
  13.           <span>处理结果：{{ props.row.result_desc }}</span>
  14.         </template>
  15.       </el-table-column>
  16.  
  17.       <el-table-column
  18.         label="工单类型"
  19.         prop="type.name"/>
  20.  
  21.       <el-table-column
  22.         label="工单标题"
  23.         prop="title"/>
  24.  
  25.       <el-table-column
  26.         label="申请人"
  27.         prop="applicant[0].name"/>
  28.  
  29.       <el-table-column
  30.         label="指派人"
  31.         prop="assign_to[0].name"/>
  32.  
  33.       <el-table-column
  34.         label="处理人"
  35.         prop="final_processor[0].name"/>
  36.  
  37.       <el-table-column
  38.         label="状态"
  39.         prop="status.name"/>
  40.  
  41.       <el-table-column
  42.         :formatter="dateFormat"
  43.         label="申请时间"
  44.         prop="apply_time"/>
  45.  
  46.       <el-table-column
  47.         :formatter="dateFormat"
  48.         label="完成时间"
  49.         prop="complete_time"/>
  50.  
  51.     </el-table>
  52.   </div>
  53. </template>
  54.  
  55. <script>
  56. import moment from \'moment\'
  57. export default {
  58.   name: \'OrderList\',
  59.   props: {
  60.     value: {
  61.       type: Array,
  62.       default: function() {
  63.         return []
  64.       }
  65.     }
  66.   },
  67.   methods: {
  68.     dateFormat: function(row, column) {
  69.       var date = row[column.property]
  70.       if (date === undefined) {
  71.         return \'\'
  72.       }
  73.       return moment(date).format(\'YYYY-MM-DD HH:mm:ss\')
  74.     }
  75.   }
  76. }
  77. </script>
  78.  
  79. <style lang=\'scss\'>
  80. .workorder-list {}
  81. </style>

效果图:

 

 

 

点击工单处理时报如错:

 

  1. jango.core.exceptions.ValidationError: [\'’2020-07-21\t22:55:55‘ 必须为合法的日期时间格式，请使用 YYYY-MM-DD HH:MM[:ss[.uuuuuu]][TZ] 格式。\']

解决:

  1. 注掉workorder/views.py:
  2.         # data[\'complete_time\'] = time.strftime(\'%Y-%m-%d    %H:%M:%S\', time.localtime(time.time()))
    并打开workorder/serializers.py:
  1. apply_time = serializers.DateTimeField(format="%Y-%m-%d %H:%M:%S", read_only=True)
    complete_time = serializers.DateTimeField(format="%Y-%m-%d %H:%M:%S", read_only=True)

3.工单状态流转及步骤条实现

(1)workorder/list/form.vue

  1. <template>
  2.   <div class="workorder-form">
  3.     <el-form ref="form" :model="form" :rules="rules" label-width="100px" class="demo-form">
  4.  
  5.       <el-form-item label="工单标题" prop="title">
  6.         <el-input v-model="form.title" readonly/>
  7.       </el-form-item>
  8.  
  9.       <el-form-item label="工单内容" prop="order_contents">
  10.         <el-input v-model="form.order_contents" type="textarea" rows="8" readonly/>
  11.       </el-form-item>
  12.  
  13.       <el-form-item label="处理结果" prop="result_desc">
  14.         <el-input v-model="form.result_desc"/>
  15.       </el-form-item>
  16.  
  17.       <el-form-item>
  18.         <div class="btn-wrapper">
  19.           <el-button size="small" @click="cancel">取消</el-button>
  20.           <el-button size="small" type="primary" @click="submitForm">保存</el-button>
  21.         </div>
  22.       </el-form-item>
  23.  
  24.     </el-form>
  25.   </div>
  26. </template>
  27.  
  28. <script>
  30. export default {
  31.   name: \'OrderForm\',
  32.   props: {
  33.     form: { // 接受父组件传递过来的值渲染表单
  34.       type: Object,
  35.       default() {
  36.         return {
  37.           title: \'\',
  38.           order_contents: \'\',
  39.           result_desc: \'\'
  40.         }
  41.       }
  42.     }
  43.   },
  45.   data() {
  46.     return {
  47.       rules: {
  48.         result_desc: [
  49.           { required: true, message: \'请输入处理结果\', trigger: \'blur\' }
  50.         ]
  51.       }
  52.     }
  53.   },
  55.   methods: {
  56.     submitForm() {
  57.       this.$refs.form.validate(valid => {
  58.         if (!valid) {
  59.           return
  60.         }
  61.         this.$emit(\'submit\', this.form)
  62.       })
  63.     },
  64.     cancel() {
  65.       this.$emit(\'cancel\')
  66.     }
  67.   }
  68. }
  69. </script>
  70.  
  71. <style lang=\'scss\' scoped>
  72. .workorder-form {
  73.   position: relative;
  74.   display: block;
  75.   .btn-wrapper{
  76.     text-align: right;
  77.   }
  78. }
  79. </style>

(2)workorder/list/index.vue

  1. ...
  2. import OrderForm from \'./form\'
  3. ....
  4.   export default {
  5.     name: \'Workorder\',
  6.     components: {
  7.       OrderList,
  8.       OrderForm
  9.     },

效果如图:

点击工单处理时如下报错:[Vue warn]: Invalid prop: type check failed for prop “rows”. Expected Number, got String.

 

 解决办法:

  1. form.vue:中改成如下
  2.         <el-input :rows="8" v-model="form.order_contents" type="textarea"  readonly/>

最终效果如下图:

 

 

 4.工单申请

(1)workorder/apply/index.vue

  1. <template>
  2.   <div class="apply">
  3.     <el-form ref="form" :model="form" :rules="rules" label-width="180px">
  4.       <el-form-item label="工单类型：" prop="type">
  5.         <el-select v-model="form.type" placeholder="请选择工单类型" style="width: 60%;">
  6.           <el-option
  7.             v-for="item in type_list"
  8.             :key="item.index"
  9.             :label="item.name"
  10.             :value="item.id"/>
  11.         </el-select>
  12.       </el-form-item>
  13.  
  14.       <el-form-item label="工单标题：" prop="title">
  15.         <el-input v-model="form.title" style="width: 60%;"/>
  16.       </el-form-item>
  17.  
  18.       <el-form-item label="工单内容：" prop="order_contents">
  19.         <el-input :rows="8" v-model="form.order_contents" type="textarea"  style="width: 60%;"/>
  20.       </el-form-item>
  21.  
  22.       <el-form-item label="指派给：" prop="assign_to">
  23.         <el-select v-model="form.assign_to" filterable placeholder="请选择工单处理人" style="width: 60%;">
  24.           <el-option
  25.             v-for="item in sa_list"
  26.             :key="item.index"
  27.             :label="item.name"
  28.             :value="item.id"/>
  29.         </el-select>
  30.       </el-form-item>
  31.  
  32.       <el-form-item>
  33.         <el-button type="primary" @click="onSubmit">Create</el-button>
  34.         <el-button @click="onCancel">Cancel</el-button>
  35.       </el-form-item>
  36.     </el-form>
  37.   </div>
  38. </template>
  39.  
  40. <script>
  41.  
  42. import { getGroupMemberList } from \'@/api/group\'
  43. import { createWorkOrder } from \'@/api/workorder/workorder\'
  44. export default {
  45.   data() {
  46.     return {
  47.       form: {
  48.         type: \'\',
  49.         title: \'\',
  50.         order_contents: \'\',
  51.         assign_to: \'\'
  52.       },
  53.       rules: {
  54.         type: [
  55.           { required: true, message: \'请输入工单类型\', trigger: \'blur\' }
  56.         ],
  57.         title: [
  58.           { required: true, message: \'请输人工单标题\', trigger: \'blur\' }
  59.         ],
  60.         order_contents: [
  61.           { required: true, message: \'请输人工单内容\', trigger: \'blur\' }
  62.         ],
  63.         assign_to: [
  64.           { required: true, message: \'请输人工单指派人\', trigger: \'blur\' }
  65.         ]
  67.       },
  68.       sa_list: [],
  69.       type_list: [{ \'id\': 0, \'name\': \'数据库\' }, { \'id\': 1, \'name\': \'计划任务\' }, { \'id\': 2, \'name\': \'配置文件\' }, { \'id\': 3, \'name\': \'其他\' }],
  70.       state: 0
  71.     }
  72.   },
  74.   watch: {
  75.     state() {
  76.       getGroupMemberList(6).then(res => {
  77.         this.sa_list = res.members
  78.         console.log(this.sa_list)
  79.       })
  80.     }
  81.   },
  83.   created() {
  84.     this.state = 1
  85.   },
  87.   methods: {
  88.     onSubmit() {
  89.       this.$message(\'submit!\')
  90.       this.$refs.form.validate((valid) => {
  91.         if (!valid) {
  92.           return
  93.         }
  94.         const params = Object.assign({}, this.form)
  95.         console.log(params)
  96.         createWorkOrder(params).then(res => {
  97.           this.$message({
  98.             message: \'创建成功\',
  99.             type: \'success\'
  100.           })
  101.           this.$router.push({ path: \'/workorder/list\' })
  102.         })
  103.       })
  104.     },
  105.     onCancel() {
  106.       this.$message({
  107.         message: \'cancel!\',
  108.         type: \'warning\'
  109.       })
  110.     }
  111.   }
  113. }
  114. </script>
  115.  
  116. <style scoped>
  117. .apply{
  118.     margin-top:2cm;
  119. }
  120. </style>

(2)src/router/index.js

  1. import Vue from \'vue\'
  2. import Router from \'vue-router\'
  3.  
  4. // in development-env not use lazy-loading, because lazy-loading too many pages will cause webpack hot update too slow. so only in production use lazy-loading;
  5. // detail: https://panjiachen.github.io/vue-element-admin-site/#/lazy-loading
  7. Vue.use(Router)
  9. /* Layout */
  10. import Layout from \'../views/layout/Layout\'
  11.  
  12. /**
  13.  * hidden: true                   if `hidden:true` will not show in the sidebar(default is false)
  14.  * alwaysShow: true               if set true, will always show the root menu, whatever its child routes length
  15.  *                                if not set alwaysShow, only more than one route under the children
  16.  *                                it will becomes nested mode, otherwise not show the root menu
  17.  * redirect: noredirect           if `redirect:noredirect` will no redirect in the breadcrumb
  18.  * name:\'router-name\'             the name is used by <keep-alive> (must set!!!)
  19.  * meta : {
  20.     title: \'title\'               the name show in submenu and breadcrumb (recommend set)
  21.     icon: \'svg-name\'             the icon show in the sidebar,
  22.   }
  23.  **/
  24. export const constantRouterMap = [
  25.   { path: \'/login\', component: () => import(\'@/views/login/index\'), hidden: true },
  26.   { path: \'/404\', component: () => import(\'@/views/404\'), hidden: true },
  27.   {
  28.     path: \'/\',
  29.     component: Layout,
  30.     redirect: \'/dashboard\',
  31.     name: \'Dashboard\',
  32.     children: [{
  33.       path: \'dashboard\',
  34.       component: () => import(\'@/views/dashboard/index\'),
  35.       meta: { title: \'dashboard\', icon: \'example\' }
  36.     }]
  37.   },
  38.   {
  39.     path: \'/users\',
  40.     component: Layout,
  41.     name: \'users\',
  42.     meta: { title: \'用户管理\', icon: \'example\' },
  43.     children: [
  44.       {
  45.         path: \'user\',
  46.         name: \'user\',
  47.         component: () => import(\'@/views/users/user\'),
  48.         meta: { title: \'用户\' }
  49.       },
  50.       {
  51.         path: \'groups\',
  52.         name: \'groups\',
  53.         permission: \'resources.add_ip\',
  54.         component: () => import(\'@/views/groups\'),
  55.         meta: { title: \'用户组\' }
  56.       }
  57.     ]
  58.   },
  59.   {
  60.     path: \'/workorder\',
  61.     component: Layout,
  62.     name: \'workorder\',
  63.     meta: { title: \'工单系统\', icon: \'form\' },
  64.     children: [
  65.       {
  66.         path: \'apply\',
  67.         name: \'工单申请\',
  68.         component: () => import(\'@/views/workorder/apply/index\'),
  69.         meta: { title: \'工单申请\', icon: \'form\' }
  70.       },
  71.       {
  72.         path: \'list\',
  73.         name: \'申请列表\',
  74.         component: () => import(\'@/views/workorder/list/index\'),
  75.         meta: { title: \'申请列表\', icon: \'table\' }
  76.       },
  77.       {
  78.         path: \'history\',
  79.         name: \'工单历史\',
  80.         component: () => import(\'@/views/workorder/history/index\'),
  81.         meta: { title: \'工单历史\', icon: \'table\' }
  82.       }
  83.     ]
  84.   },
  85.   { path: \'*\', redirect: \'/404\', hidden: true }
  86. ]
  88. export default new Router({
  89.   mode: \'history\',
  90.   scrollBehavior: () => ({ y: 0 }),
  91.   routes: constantRouterMap
  92. })

效果如下图:但是却获取不到用户列表—no data

 

 

 

 

 

 

 

 

1

 

版权声明：本文为dbslinux原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/dbslinux/p/13352932.html