添加工单

web

20 小时以前 c7b547cf132f3607e418b4dbd870a46eac3a1048

添加工单

 src/api/workOrder/index.js

对比新文件
@@ -0,0 +1,37 @@
import { publicRequest } from '@/utils/request.js'


// 获取工单列表
export const getOrderList = (data) => {
    return publicRequest({
        url: '/userWorkOrder/search',
        method: 'POST',
        data
    })
}

// 创建工单
export const createOrder = (data) => {
    return publicRequest({
        url: '/userWorkOrder/create',
        method: 'POST',
        data
    })
}

// 修改工单
export const editOrder = (data) => {
    return publicRequest({
        url: '/userWorkOrder/modify',
        method: 'POST',
        data
    })
}

// 获取工单详情
export const getOrderInfo = (id) => {
    return publicRequest({
        url: `/userWorkOrder/get/${id}`,
        method: 'GET'
    })
}

 src/views/workOrder/orderList/index.vue

对比新文件
@@ -0,0 +1,251 @@
<template>
    <div class="app-container">
       <el-form :model="queryParams" ref="queryRef" :inline="true">
          <el-form-item prop="keywords">
             <el-input
                v-model="queryParams.keywords"
                placeholder="请输入内容"
                clearable
                style="width: 200px"
                @keyup.enter="handleQuery"
             />
          </el-form-item>
          <el-form-item>
             <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
             <el-button icon="Refresh" @click="resetQuery">重置</el-button>
          </el-form-item>
       </el-form>
 
       <el-row :gutter="10" class="mb8">
          <el-col :span="1.5">
             <el-button
                type="primary"
                plain
                icon="Plus"
                @click="handleAdd"
             >新增</el-button>
          </el-col>
       </el-row>
       <!--表格及分页-->
       <el-table v-loading="loading" :data="tableData">
          <el-table-column
            v-for="(item, key, index) of tableHeader"
            :prop="key.toString()"
            :label="item"
            :key="index"
            align="center"
          >
        </el-table-column>
          <el-table-column label="操作" width="auto" align="center" class-name="small-padding fixed-width">
             <template #default="scope">
                <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)">修改</el-button>
             </template>
          </el-table-column>
        </el-table>
        <pagination
          :total="pageParam.total"
          v-model:page="pageParam.page"
          v-model:limit="pageParam.limit"
          :page-sizes="[10,20,30]"
          @pagination="getList"
        />
       <!-- 添加或修改对话框 -->
       <el-dialog :title="title" v-model="open" append-to-body center>
          <el-form class="form-box" ref="formRef" :model="form" :rules="rules" label-width='auto'>
                    <el-form-item label="工单名称" prop="name">
                        <el-input v-model="form.name" placeholder="请输入工单名称" />
                    </el-form-item>
                    <el-form-item label="工单类型" prop="type" placeholder="请选择工单类型">
                        <el-select v-model="form.type">
                          <el-option v-for="item in typeOption"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                          ></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="执行人" prop="executeUser" placeholder="请选择执行人">
                        <el-select v-model="form.executeUser">
                          <el-option v-for="item in userList"
                            :key="item.id"
                            :label="item.nickName"
                            :value="item.id"
                          ></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="内容描述" prop="content">
                        <el-input v-model="form.content" placeholder="请输入内容描述" />
                    </el-form-item>
                    <el-form-item label="工单地址" prop="address">
                        <el-input v-model="form.address" placeholder="请输入工单地址" />
                    </el-form-item>
                    <el-form-item label="备注" prop="remark">
                        <el-input v-model="form.remark" placeholder="请输入备注" />
                    </el-form-item>
                    <el-form-item></el-form-item>
          </el-form>
          <template #footer>
             <div class="dialog-footer">
                <el-button type="primary" @click="submitForm">确 定</el-button>
                <el-button @click="cancel">取 消</el-button>
             </div>
          </template>
       </el-dialog>
    </div>
 </template>
 
 <script setup name="Menu">
 import { getOrderList, createOrder, editOrder } from "@/api/workOrder";
 import user from "@/api/system/user";
 import setPostParams from "@/utils/searchParams.js";
 const { proxy } = getCurrentInstance();
 
/**
 * 搜索相关
 */
 /** 搜索按钮操作 */
 function handleQuery() {
   getList({keywords:queryParams.value.keywords,page:1})
 }
 
 /** 重置按钮操作 */
 function resetQuery() {
   proxy.resetForm("queryRef");
   handleQuery();
 }

 /**
  *  Table表格权限数据列表相关
  */

const pageParam = ref({
    total:0,
    limit:0,
    page:0,
})
const tableData = ref([]);
let  tableHeader = ref({
    code: '工单号',
    name: '工单名称',
    typeView: '工单类型',
    createUserName: '上报人',
    executeUserName: '执行人',
    executeStateView: '执行状态',
    address: '所属地址',
    updateTimeView: '上报时间'
   })
 /** 获取列表 */
 async function getList(val) {
      loading.value = true;

     let postParam = setPostParams(val)
      await getOrderList(postParam).then((res) =>{
        tableData.value = res.data.list
        pageParam.value.total = res.data.total
        pageParam.value.limit = res.data.limit
        pageParam.value.page = res.data.page
    })
    loading.value = false;
 }
 
 /** 新增按钮操作 */
 async function handleAdd() {
   reset();
   open.value = true;
   title.value = "新增工单";
 }
 /** 修改按钮操作 */
 async function handleUpdate(row) {
   reset();
   form.value.id = row.id
   for(var key in form.value) {
    form.value[key] = row[key]
   }
   open.value = true;
   title.value = "修改工单";
 }

 /**
  *  新增/修改弹窗Form表单相关
  */
const open = ref(false);
const loading = ref(false);
const title = ref("");

const data = reactive({
  form:{},
  queryParams: {
      keywords: '',
  },
  rules: {
      name: [{ required: true, message: "请输入工单名称", trigger: "blur" }],
      type: [{ required: true, message: "请选择工单类型", trigger: "blur" }],
      executeUser: [{ required: true, message: "请选择执行人", trigger: "blur" }],
      content: [{ required: true, message: "请输入内容描述", trigger: "blur" }],
      address: [{ required: true, message: "请输入工单地址", trigger: "blur" }],
  },
});
const { queryParams, form, rules } = toRefs(data);
const typeOption = [
  { label: '设备维护', value: 1 },
  { label: '设备维修', value: 2 },
]
const userList = ref([])

// 获取用户
const getUser = () => {
  user().search({ limit: 100, page: 1 }).then(res => {
    userList.value = res.data.list
  })
}

 /** 提交按钮 */
 async function submitForm() {
   proxy.$refs["formRef"].validate( async valid => {
     if (valid) {
       if (form.value.id != undefined) {
           await editOrder(form.value).then(res => {
           proxy.$modal.msgSuccess("修改成功");
           open.value = false;
           getList();
         }).catch(() =>{
            open.value = false;
            proxy.$modal.msgError("修改失败");
         });
       } else {
          form.value.executeUserName = userList.value.find(el =>el.id === form.value.executeUser)?.nickName
          await createOrder(form.value).then(res => {
            proxy.$modal.msgSuccess("新增成功");
            open.value = false;
            getList();
          }).catch(() =>{
            open.value = false;
            proxy.$modal.msgError("新增失败");
         });
       }
     }
   });
 }

 /** 取消按钮 */
 function cancel() {
   open.value = false;
   reset();
 }
 /** 表单重置 */
 function reset() {
   form.value = {
       name:'',
       type:'',
       executeUser:'',
       executeUserName:'',
       content:'',
       address:'',
       remark:'',
   };
   proxy.resetForm("formRef");
 }
 getList();
 getUser()
 </script>