erp系统维修管理

<script setup>
import { ref } from 'vue'
import { Check, Plus } from '@element-plus/icons-vue'
import { selectAllTasks, selectAllAssets } from '../../api/people'
import {
  insertTask,
  updateTaskStartTimeAndStatus,
  updateTaskEndTimeAndStatus,
  updateTaskCost
} from '../../api/zi'
const form = ref({})
const repair = ref([])
const selectAssets = ref([])
const dialogFormVisible = ref(false)

const getAssets = async () => {
  const res = await selectAllAssets()
  selectAssets.value = res.data.data
}
getAssets()

const onSubmit = async () => {
  await insertTask(form.value)
  dialogFormVisible.value = false
  form.value = ''
  getTasks()
}
const getTasks = async () => {
  const res = await selectAllTasks()
  repair.value = res.data.data
}
getTasks()
const ReceiveRow = async (row) => {
  await updateTaskStartTimeAndStatus(row.taskId)
  getTasks()
}
const completeRow = async (row) => {
  await updateTaskEndTimeAndStatus(row.taskId)
  getTasks()
}
const updateCost = async (row) => {
  await updateTaskCost(row.taskId, row.cost)
  getTasks()
}
</script>

<template>
  <el-button type="primary" @click="dialogFormVisible = true">
    维修申请
  </el-button>
  <el-divider />
  <el-dialog v-model="dialogFormVisible" title="维修申请">
    <el-form :model="form" label-width="120px">
      <el-row>
        <el-col :span="24"
          ><el-form-item label="维修资产Id">
            <el-select v-model="form.assetId">
              <el-option
                v-for="item in selectAssets"
                :key="item.assetId"
                :label="item.assetId"
                :value="item.assetId"
              >
                <span style="float: left">{{ item.assetId }}</span>
                <span
                  style="
                    float: right;
                    color: var(--el-text-color-secondary);
                    font-size: 13px;
                  "
                  >{{ item.assetName }}</span
                >
              </el-option>
            </el-select>
          </el-form-item></el-col
        >
      </el-row>
      <el-row :gutter="5">
        <el-col :span="24"
          ><el-form-item label="维修任务描述">
            <el-input v-model="form.taskDescription" /> </el-form-item
        ></el-col>
      </el-row>
      <el-row :gutter="5">
        <el-col :span="24"
          ><el-form-item label="指定维修人员">
            <el-input v-model="form.assignedTechnician" /> </el-form-item
        ></el-col>
      </el-row>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="onSubmit"> 确定 </el-button>
      </span>
    </template>
  </el-dialog>
  <el-table :data="repair" stripe style="width: 100%" height="80vh">
    <el-table-column prop="taskId" label="维修任务编号" />
    <el-table-column prop="assetId" label="维修资产编号" />
    <el-table-column prop="taskDescription" label="维修任务描述" />
    <el-table-column prop="startTime" label="维修任务开始时间" />
    <el-table-column prop="endTime" label="维修任务结束时间" />
    <el-table-column prop="assignedTechnician" label="指定维修人员" />
    <el-table-column label="维修任务费用">
      <template v-slot="scope">
        <el-input
          v-model="scope.row.cost"
          size="small"
          style="width: 100px"
          @change="updateCost(scope.row)"
        />
      </template>
    </el-table-column>
    <el-table-column prop="status" label="维修状态">
      <template v-slot="scope">
        <el-tag>{{ scope.row.status }}</el-tag>
      </template>
    </el-table-column>
    <el-table-column fixed="right" label="操作" width="200">
      <template v-slot="scope">
        <el-button
          link
          type="primary"
          size="small"
          @click.prevent="ReceiveRow(scope.row)"
          :icon="Plus"
          >接取</el-button
        >
        <el-button
          link
          type="primary"
          size="small"
          :icon="Check"
          @click.prevent="completeRow(scope.row)"
          >完成</el-button
        >
      </template>
    </el-table-column>
  </el-table>
</template>

<style></style>