JG-ADMIN-TEMP/src/views/device/maintenance/index.vue

<template>
  <div class="mainContentBox">
    <avue-crud
        ref="crudRef"
        v-model:search="search"
        v-model="form"
        :data="data"
        :option="option"
        :permission="permission"
        v-model:page="page"
        @row-save="createRow"
        @row-update="updateRow"
        @row-del="deleteRow"
        @search-change="searchChange"
        @search-reset="resetChange"
        @size-change="dataList"
        @current-change="dataList"
        @selection-change="selectionChange"
    >
      <template #menu-left="{ size }">
        <el-button
          :disabled="toDeleteIds.length < 1"
          type="danger"
          v-hasPerm="[ButtonPermKeys.DEVICE.BTNS.maintenance_del]"
          icon="el-icon-delete"
          :size="size"
          @click="multipleDelete"
          >删除</el-button
        >
      </template>
      <template #menu="{size,row,index}">
        <el-button @click="maintenance(row)"
                   icon="el-icon-setting"
                   text
                   v-hasPerm="[ButtonPermKeys.DEVICE.BTNS.maintenance_handle]"
                   v-if="row.type === '1' && row.state === 0"
                   type="primary"
                   :size="size">维护</el-button>
        <el-button disabled
                   icon="el-icon-setting"
                   text
                   v-hasPerm="[ButtonPermKeys.DEVICE.BTNS.maintenance_handle]"
                   v-if="row.type === '1' && row.state === 1"
                   type="primary"
                   :size="size">维护</el-button>
        <el-button @click="maintenanceList(row)"
                   icon="el-icon-fold"
                   text
                   type="primary"
                   :size="size">记录</el-button>
      </template>
    </avue-crud>
    <el-dialog
        v-model="dialog.visible"
        :title="dialog.title"
        width="850px"
        @close="dialog.visible = false"
    >
      <device-page  @deviceInfo="deviceInfo"/>
    </el-dialog>

    <el-dialog
        v-model="dialog1.visible"
        :title="dialog1.title"
        width="750px"
        height="80%"
        @close="dialog1.visible = false">
      <el-timeline style="max-width: 500px;margin-left: 100px">
        <el-timeline-item center color="#0bbd87" type="success" placement="top">
          <el-card>
            <h4>保养计划</h4>
            <p>设备编号： {{maintenanceInfo.deviceNo}}</p>
            <p>设备名称：{{maintenanceInfo.deviceName}}</p>
            <p>保养内容：{{maintenanceInfo.remark}}</p>
            <p>计划时间：{{maintenanceInfo.nextTime}}</p>
          </el-card>
        </el-timeline-item>
        <el-timeline-item center placement="top" :type="maintenanceInfo.state === 0 ? 'primary' : 'success'">
          <el-card>
            <h4>设备保养</h4>
            <el-form ref="maintenanceInfoForm" :model="maintenanceInfo" label-width="auto" style="max-width: 400px" :rules="rules">
              <el-form-item v-if="maintenanceInfo.result === 0" label="保养项目" prop="maintenanceContent">
                <el-input v-model="maintenanceInfo.maintenanceContent" type="textarea" />
              </el-form-item>
              <el-form-item label="维护人" prop="userName">

                <el-select
                    v-model="maintenanceInfo.userName"
                    placeholder="维护人"
                    size="large"
                    style="width: 240px">
                  <el-option
                      v-for="item in userList"
                      :key="item.userName"
                      :label="item.userName"
                      :value="item.userName"
                  />
                </el-select>
              </el-form-item>
              <el-form-item label="确认人" prop="confirmUser">

                <el-select
                    v-model="maintenanceInfo.confirmUser"
                    placeholder="确认人"
                    size="large"
                    style="width: 240px">
                  <el-option
                      v-for="item in userList"
                      :key="item.userName"
                      :label="item.userName"
                      :value="item.userName"
                  />
                </el-select>
              </el-form-item>
              <el-form-item label="维护结果">
                <el-radio-group v-model="maintenanceInfo.result" class="ml-4">
                  <el-radio :value="0">正常</el-radio>
                  <el-radio :value="1">报故</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item v-if="maintenanceInfo.result === 1" label="报故内容">
                <el-input v-model="maintenanceInfo.maintenanceContent" />
              </el-form-item>


                <el-form-item v-if="maintenanceInfo.result === 0" label="下次维护日期">
                    <el-input v-model="maintenanceInfo.nextTime" type="date" format="YYYY-MM-DD" value-format="YYYY-MM-DD"/>
                </el-form-item>
<!--              <el-form-item v-if="maintenanceInfo.result === 0" label="下次维护内容">
                <el-input v-model="maintenanceInfo.maintenanceContent" />
              </el-form-item>-->
              <el-form-item style="margin-left: 45%">
                <el-button type="primary" @click="maintenanceSubmit">保存</el-button>
              </el-form-item>
            </el-form>
          </el-card>
        </el-timeline-item>
      </el-timeline>
    </el-dialog>

    <el-dialog
        v-model="dialog2.visible"
        :title="dialog2.title"
        width="60%"
        height="80%"
        @close="dialog2.visible = false"
    >
      <record-page :maintenance="clickRecord"></record-page>
    </el-dialog>
  </div>
</template>
<script setup>
import { ref, getCurrentInstance } from "vue";
import { useCrud } from "@/hooks/userCrud";
import ButtonPermKeys from "@/common/configs/buttonPermission";
import {getUserList} from "@/api/system/user"
import {maintenanceUpdate} from "@/api/device/index";
import { useCommonStoreHook } from "@/store";
import dictDataUtil from "@/common/configs/dictDataUtil";
import RecordPage from "./components/record-page.vue";
import { checkPerm } from "@/directive/permission";
const { isShowTable, tableType } = toRefs(useCommonStoreHook());
const test = () => {
  isShowTable.value = true;
  tableType.value = tableType.value == 1 ? 2 : 1;
};
const permission = reactive({
  delBtn: checkPerm(ButtonPermKeys.DEVICE.BTNS.maintenance_del),
  addBtn: checkPerm(ButtonPermKeys.DEVICE.BTNS.maintenance_add),
  editBtn: checkPerm(ButtonPermKeys.DEVICE.BTNS.maintenance_edit),
  menu: true,
});
const dialog = reactive({
  title: "设备选择",
  visible: false,
});
const dialog1 = reactive({
  title: "设备保养",
  visible: false,
});
const dialog2 = reactive({
  title: "设备保养记录",
  visible: false,
});
const userList = ref([])
// 传入一个url，后面不带/
const { form, data, option, search, page, toDeleteIds, Methords, Utils } =
  useCrud({
    src: "/api/v1/device/maintenance",
  });
const { dataList, createRow, updateRow, deleteRow, searchChange, resetChange } = Methords; //增删改查
const { selectionChange, multipleDelete } = Methords; //选中和批量删除事件
const { checkBtnPerm, downloadTemplate, exportData } = Utils; //按钮权限等工具
const crudRef = ref(null); //crudRef.value 获取avue-crud对象
const deviceInfo = (value) => {
  form.value.deviceNo = value.deviceNo
  dialog.visible = false
}
const maintenanceInfo = ref(null)
const clickRecord = ref(null)
const maintenance = (row)=>{
  maintenanceInfo.value = row
  maintenanceInfo.value.maintenanceContent = row.remark
  maintenanceInfo.value.result = 0
  dialog1.visible = true
}
const maintenanceList = (row)=>{
  clickRecord.value = row
  dialog2.visible = true
}
const queryUserList = ()=>{
  getUserList({}).then((data)=>{
    userList.value = data.data
  })
}
const maintenanceInfoForm = ref('maintenanceInfoForm')
const maintenanceSubmit =()=>{
  //alert(JSON.stringify(maintenanceInfo.value))
  maintenanceInfoForm.value.validate((isValid, invalidFields) => {
    if (isValid) {
      maintenanceUpdate(maintenanceInfo.value).then((data)=>{
        ElMessage({
          message: data.msg,
          type: "success",
        });
        //maintenanceInfo.value = null
        dialog1.visible = false
        dataList()
      })
    }
  })
}
const rules = reactive({
  userName: [
    // required是否必填,message不符合此规则时的提示信息,
    // trigger触发此条规则校验的时机，有两个值, blur 或 change,默认就是blur和change都会进行校验
    // min此字段的最小长度，max此字段的最大长度
    // pattern 正则表达式
    { required: true, message: '维护人不能为空', trigger: 'blur' }
  ],
  confirmUser: [
    // required是否必填,message不符合此规则时的提示信息,
    // trigger触发此条规则校验的时机，有两个值, blur 或 change,默认就是blur和change都会进行校验
    // min此字段的最小长度，max此字段的最大长度
    // pattern 正则表达式
    { required: true, message: '确认人不能为空', trigger: 'blur' }
  ],
  maintenanceContent: [
  // required是否必填,message不符合此规则时的提示信息,
  // trigger触发此条规则校验的时机，有两个值, blur 或 change,默认就是blur和change都会进行校验
  // min此字段的最小长度，max此字段的最大长度
  // pattern 正则表达式
  { required: true, message: '保养项目不能为空', trigger: 'blur' }
]
})
// 设置表格列或者其他自定义的option
option.value = Object.assign(option.value, {
  delBtn: false,
  selection: true,
  labelWidth: 150,
  viewBtn: false,
  column: [
    {
      label: "设备名称",
      prop: "deviceName",
      display: false,
      search: true,
    },
    {
      label: "设备类型",
      prop: "deviceType",
      type: "select",
      search: true,
      hide:true,
      display: false,
      dicUrl:
        dictDataUtil.request_url +
        dictDataUtil.TYPE_CODE.device_type,
      props: {
        label: "dictLabel",
        value: "dictValue",
      },
      rules: [
        {
          required: true,
          message: "设备类型不能为空",
          trigger: "trigger",
        },
      ],
    },
    {
      label: "型号",
      prop: "specifications",
      display: false,
      search: true,
    },
    {
      label: "编号",
      prop: "deviceNo",
      search: true,
      rules: [
        {
          required: true,
          message: "设备编号不能为空",
          trigger: "trigger",
        },
      ],
      click: ({ value, column }) => {
        if(column.boxType){
          dialog.visible = true;
        }
      },
    },
    {
      label: "保养维护内容",
      prop: "remark",
      minRows: 2, //最小行/最小值
      type: "textarea", //类型为多行文本域框
      maxlength: 512, //最大输入长度
      overHidden: true,
      rules: [
        {
          required: true,
          message: "保养维护内容不能为空",
          trigger: "trigger",
        },
      ],
    },
    {
      label: "设备位置",
      prop: "devicePosition",
      display: false,
    },
    {
      label: "维护类型",
      prop: "type",
      search: true,
      type: "select",
      editDisplay: false,
      dicData: [{label: '点检',value:"0"},{label: '保养',value:"1"}],
      rules: [
        {
          required: true,
          message: "维护类型不能为空",
          trigger: "trigger",
        },
      ],
    },
    {
      label: "维护频次",
      prop: "cycle",
      type: "select",
      dicUrl:
          dictDataUtil.request_url +
          dictDataUtil.TYPE_CODE.device_maintenance_cycle,
      props: {
        label: "dictLabel",
        value: "dictValue",
      },
      rules: [
        {
          required: true,
          message: "维护频次不能为空",
          trigger: "trigger",
        },
      ],
    },
    /*{
      label: "运行状态",
      prop: "runState",
      type: "select",
      display: false,
      dicUrl:
          dictDataUtil.request_url +
          dictDataUtil.TYPE_CODE.device_run_status,
      props: {
        label: "dictLabel",
        value: "dictValue",
      },
      rules: [
        {
          required: true,
          message: "运行状态不能为空",
          trigger: "trigger",
        },
      ],
    },*/
    {
      label: "维护状态",
      prop: "state",
      type: "select",
      addDisplay: false,
      dicData: [{label: '待维护',value:0},{label: '已维护',value:1}],
      rules: [
        {
          required: true,
          message: "维护状态不能为空",
          trigger: "trigger",
        },
      ],
    },
    {
      label: "维护日期",
      prop: "nextTime",
      type: "date",
      width: "120",
      format: "YYYY-MM-DD", //前端展示格式
      valueFormat: "YYYY-MM-DD", //设置后端接收的日期格式
      rules: [
        {
          required: true,
          message: "维护日期不能为空",
          trigger: "trigger",
        },
      ],
    },

  ],
});

onMounted(() => {
  dataList();
  queryUserList()
});
</script>