Merge branch 'master' of http://10.153.19.25:10101/r/ERP_override

guoyuji

2024-04-07 4008d83696a6998ce987133ae2d2b0ec912cf178

 north-glass-erp/northglass-erp/src/views/pp/machine/AddMaintenanceAndRepair.vue

New file
@@ -0,0 +1,294 @@
<script setup>

import {computed, nextTick, onMounted, reactive, ref, toRefs} from "vue";
import {useRouter, useRoute} from 'vue-router'
import request from "@/utils/request";
import {ElMessage} from "element-plus";
import {changeFilterEvent, filterChanged} from "@/hook"
import userInfo from "@/stores/userInfo"
import {useI18n} from 'vue-i18n'
import {addListener, toolbarButtonClickEvent} from "@/hook/mouseMove";
//语言获取
const {t} = useI18n()
const route = useRoute()
const user = userInfo()
let router = useRouter()

//定义接收加载表头下拉数据
const titleSelectJson = ref({
  processType: [],
  deviceType: [],

})

const titleUploadData = ref({
  process: '',
})

onMounted(() => {
  //启用表格拖动选中
  addListener(xGrid.value, gridOptions)
})

//第一次加载数据
request.post(`/maintenance/selectData`).then((res) => {
  if (res.code == 200) {
    //工序下拉框
    titleSelectJson.value.processType = res.data.process;
    //设备下拉框
    titleSelectJson.value.deviceType = res.data.device
  } else {
    ElMessage.warning(res.msg)
  }
})

//子组件接收参数
const xGrid = ref()
const gridOptions = reactive({
  border: "full",//表格加边框
  keepSource: true,//保持源数据
  align: 'center',//文字居中
  stripe: true,//斑马纹
  rowConfig: {isCurrent: true, isHover: true, height: 30},//鼠标移动或选择高亮
  id: 'CustomerList',
  showFooter: true,//显示脚
  printConfig: {},
  importConfig: {},
  exportConfig: {},
  scrollY: {enabled: true},//开启虚拟滚动
  showOverflow: true,
  columnConfig: {
    resizable: true,
    useKey: true
  },
  filterConfig: {   //筛选配置项
    remote: true
  },
  customConfig: {
    storage: true
  },
  editConfig: {
    trigger: 'click',
    mode: 'row',
    showStatus: true
  },//表头参数
  columns: [
    {type: 'seq', fixed: "left", title: '自序', width: 50},
    {
      field: 'deviceName',
      title: '设备名称',
      editRender: {},
      slots: {default: 'basicCategory_default', edit: 'deviceName'}
    },
    {
      field: 'type',
      title: '类型',
      editRender: {name: 'input', attrs: {placeholder: ''}},
    },
    {
      field: 'faultTime',
      title: '故障日期',
      editRender: {name: 'input', attrs: {placeholder: '', type: 'date'}},
    },
    {
      field: 'faultReason',
      title: '故障原因',
      editRender: {name: 'input', attrs: {placeholder: ''}},
    },
    {
      field: 'maintenanceTime',
      title: '保养日期',
      editRender: {name: 'input', attrs: {placeholder: '', type: 'date'}},
    },
    {
      field: 'maintenanceIllustrate',
      title: '保养说明',
      editRender: {name: 'input', attrs: {placeholder: ''}},
    },
    {
      field: 'startTime',
      title: '维修/保养开始时间',
      editRender: {name: 'input', attrs: {placeholder: '', type: 'date'}},
    },
    {
      field: 'stopTime',
      title: '维修/保养结束时间',
      editRender: {name: 'input', attrs: {placeholder: '', type: 'date'}},
    },

    {
      field: 'process',
      title: '所在工序',
      editRender: {},
      slots: {default: 'reportingDeviceSort_default', edit: 'process'}
    },
    {
      field: 'personnel',
      title: '维修/保养人员',
      editRender: {name: 'input', attrs: {placeholder: ''}},
    },
    {
      field: 'cost',
      title: '费用',
      editRender: {name: 'input', attrs: {placeholder: ''}},
    },
  ],
  //表头按钮
  toolbarConfig: {
    buttons: [
      {code: 'removeRow', name: t('basicData.delete'), status: 'primary', icon: 'vxe-icon-delete'},
      {code: 'addRow', name: t('reportingWorks.increase'), status: 'primary', icon: 'vxe-icon-square-plus'},
      {code: 'save', name: '保存', status: 'primary', icon: 'vxe-icon-save'},
    ],
    // import: false,
    // export: true,
    // print: true,
    zoom: true,
    custom: true
  },
  data: [],//table body实际数据
  //脚部求和
  footerMethod({columns, data}) {//页脚函数
    let footList = ['', '']
    return [
      columns.map((column, columnIndex) => {
        if (columnIndex === 0) {
          return '合计:'
        }
        if (footList.includes(column.field)) {
          return sumNum(data, column.field)
        }
        return ''
      })
    ]
  }

})

const teamGridEvents = {
  toolbarButtonClick({code}) {
    const $grid = xGrid.value
    if ($grid) {
      switch (code) {
        case 'addRow': {
          $grid.insertAt({})
          break
        }
        case 'removeRow': {
          let result = toolbarButtonClickEvent()
          if (result) {
            $grid.remove(result.row)
          }
          break
        }
        case 'save': {
          const tableData = $grid.getTableData().fullData
          //console.log(tableData)
          let machineData = ref({
            machine: tableData
          })
          request.post("/maintenance/saveMaintenanceAndRepair", machineData.value).then((res) => {
            if (res.code == 200) {
              ElMessage.success("保存成功")
              //router.push('/main/processCard/SplittingDetails?orderId=${orderId}')
              router.push({
                path: '/main/machine/AddMaintenanceAndRepair',
                query: {random: Math.random()}
              })

              //location.reload();
            } else {
              ElMessage.warning(res.msg)
            }
          })
          break
        }
      }
    }
  }
}

const size = ref<'default' | 'large' | 'small'>('default')

const value1 = ref('')

const computedDevice = computed((name) => {
  return function (name) {
    return titleSelectJson.value.deviceType.filter((item) => {

          return item.basic_name === name
        })
  }
})

</script>

<template>
  <div class="main-div-customer">
    <vxe-grid
        ref="xGrid"
        class="mytable-scrollbar"
        height="650px"
        max-height="100%"
        v-bind="gridOptions"
        v-on="teamGridEvents"
        @filter-change="filterChanged"
    >

      <template #num1_filter="{ column, $panel }">
        <div>
          <div v-for="(option, index) in column.filters" :key="index">
            <input v-model="option.data" type="type" @input="changeFilterEvent($event, option, $panel)"/>
          </div>
        </div>
      </template>
      <!--设备-->
      <template #deviceName="{ row }">
        <vxe-select v-model="row.deviceName"
                    clearable
                    filterable
                    placeholder="">
          <vxe-option v-for="item in titleSelectJson.deviceType"
                      :key="item.basic_name"
                      :label="item.basic_name"
                      :value="item.basic_name"/>
        </vxe-select>
      </template>
      <template #basicCategory_default="{ row }">
        <span>{{ row.deviceName }}</span>
      </template>


      <!--工序-->
      <template #process="{ row }">
        <vxe-select v-model="row.process"
                    clearable
                    filterable
                    placeholder="">
          <vxe-option v-for="item in computedDevice(row.deviceName)" :key="item.id" :label="item.basic_category"
                      :value="item.basic_category"/>
        </vxe-select>
      </template>
      <template #reportingDeviceSort_default="{ row }">
        <span>{{ row.process }}</span>
      </template>

    </vxe-grid>

  </div>
</template>

<style scoped>
.main-div-customer {
  width: 99%;
  height: 100%;
}

.vxe-grid {
  /* 禁用浏览器默认选中 */
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
</style>