new file: src/api/equipment/metering.js new file: src/views/equipment...

Fixiaobai

2023-11-06 f838ba8728a8b992b1039c29b18c595fcb2ede8d

	new file:   src/api/equipment/metering.js
	new file:   src/views/equipment/metering/index.vue
	new file:   src/views/equipment/metering/metering-form.vue

 src/api/equipment/metering.js

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,53 @@
import request from '@/router/axios'

export function fetchList(query) {
  return request({
    url: '/mes/equipmentDevice/page',
    method: 'get',
    params: query
  })
}

export function pullEquip() {
  return request({
    url: '/mes/equipmentDevice/updateDevicd',
    method: 'post',
  })
}

export function addObj(obj) {
  return request({
    url: '/mes/equipmentDevice/addDevicd',
    method: 'post',
    data: obj
  })
}

export function getObj(id) {
  return request({
    url: '/mes/equipmentDevice/' + id,
    method: 'get'
  })
}

export function delObj(id) {
  return request({
    url: '/mes/equipmentDevice/' + id,
    method: 'delete'
  })
}

export function putObj(obj) {
  return request({
    url: '/mes/equipmentDevice/updateDevicd',
    method: 'post',
    data: obj
  })
}

export function getEquipmentPageByWorkstation(id) {
  return request({
    url: '/mes/equipmentDevice/page/' + id,
    method: 'get'
  })
}

 src/views/equipment/metering/index.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,268 @@
<template>
    <div class="mod-config">
      <basic-container>
        <ttable
          :table="table"
          @handleSelectionChange="handleSelectionChange"
          :uploadInfo="uploadInfo"
          :prelang="prelang"
          :options="options"
          :ajaxFun="ajaxFun"
          ref="equipmentTable"
        >
          <template #toolbar></template>
        </ttable>
        <!-- å¼¹çª—, æ–°å¢ž / ä¿®æ”¹ -->
        <table-form
          v-if="addOrUpdateVisible"
          ref="addOrUpdate"
          @refreshDataList="getData"
        ></table-form>
      </basic-container>
    </div>
  </template>
  
  <script>
  import { delObj, fetchList,pullEquip } from '@/api/equipment/metering'
  import TableForm from './metering-form'
  import ttable from '@/views/common/ztt-table.vue'
  import { mapGetters } from 'vuex'
  import * as fecha from 'element-ui/lib/utils/date'
  import { remote } from '../../../api/admin/dict'
  export default {
    data() {
      return {
        ajaxFun: fetchList,
        multipleSelection: [],
        uploadInfo: {
          // æ˜¯å¦å±•ç¤ºä¸Šä¼ EXCEL以及对应的url
          isShow: true,
          url: '/mes/equipment/upload'
        },
        prelang: 'workstation',
        options: {
          height: 300, // é»˜è®¤é«˜åº¦-为了表头固定
          stripe: true, // æ˜¯å¦ä¸ºæ–‘马纹 table
          highlightCurrentRow: false, // æ˜¯å¦è¦é«˜äº®å½“前行
          border: true, // æ˜¯å¦æœ‰çºµå‘边框
          lazy: false, // æ˜¯å¦éœ€è¦æ‡’加载
          fit: true, // åˆ—的宽度是否自撑开
          multiSelect: true, //
          seqNo: true,
          isRefresh: true, // æ˜¯å¦æ˜¾ç¤ºåˆ·æ–°æŒ‰é’®
          isShowHide: true, // æ˜¯å¦æ˜¾ç¤ºæ˜¾å½±æŒ‰é’®
          isSearch: false, // é«˜çº§æŸ¥è¯¢æŒ‰é’®
          defaultOrderBy: { column: 'manufactureDate', direction: 'desc' }
        },
        table: {
          total: 0,
          currentPage: 1,
          pageSize: 20,
          data: [],
          // æ ‡é¢˜
          column: [
            // è®¾å¤‡ç¼–号
            {
              minWidth: '30',
              prop: 'code',
              label: '设备编号',
              sort: true,
              isTrue: true,
              formatter: (row, column, cellValue) => {
                return cellValue
              },
              isSearch: true,
              searchInfoType: 'text'
            },
            // è®¾å¤‡åç§°
            {
              minWidth: '30',
              prop: 'name',
              label: '设备名称',
              sort: true,
              isTrue: true,
              isSearch: true,
              searchInfoType: 'text'
            },
            // å·¥åŽ‚
            // {
            //   minWidth: '30',
            //   prop: 'factoryName',
            //   label: '工厂',
            //   sort: true,
            //   isTrue: true,
            //   isSearch: true,
            //   searchInfoType: 'text'
            // },
            {
              minWidth: '30',
              prop: 'type',
              label: '设备类型',
            //   sort: true,
              isTrue: true,
              isSearch: true,
            //   searchInfoType: 'select',
              formatter: this.workShopFormatter,
            //   optList: () => {
            //     return this.workshopList
            //   }
            },
            // åž‹å·è§„æ ¼
            {
              minWidth: '30',
              prop: 'supplier',
              label: '厂家',
              sort: true,
              isTrue: true,
              isSearch: false,
              searchInfoType: 'text'
            },
                         // çŠ¶æ€
                         {
              minWidth: '30',
              prop: 'status',
              label: '状态',
              sort: true,
              isTrue: true,
              isSearch: true,
              searchInfoType: 'text'
            },
            // åˆ¶é€ æ—¥æœŸ
            {
              minWidth: '150',
              width: '250',
              prop: 'createTime',
              label: '创建时间',
              sort: true,
              isTrue: true,
              formatter: this.formatReceiveTime,
              isSearch: true,
              searchInfoType: 'datetime'
            },
           
            {
              minWidth: '150',
              width: '250',
              prop: 'updateTime',
              label: '修改时间',
              sort: true,
              isTrue: true,
              formatter: this.formatReceiveTime,
              isSearch: true,
              searchInfoType: 'datetime'
            },
          ],
          toolbar: [
            {
              text: '新增',
              type: 'primary',
              fun: this.addOrUpdateHandle
            },
            // {
            //   text: '同步',
            //   type: 'primary',
            //   loading: false,
            //   fun: this.pullEquipFun
            // }
          ],
          operator: [
            {
              text: '修改',
              icon: 'el-icon-edit',
              type: 'text',
              size: 'small',
              fun: this.addOrUpdateHandle
            },
            {
              text: '删除',
              icon: 'el-icon-delete',
              type: 'text',
              size: 'small',
              fun: this.deleteHandle
            }
          ],
          operatorConfig: {
            fixed: 'right',
            label: '操作',
            width: 130,
            minWidth: 130
          }
        },
        addOrUpdateVisible: false,
        workshopList: []
      }
    },
    components: {
      ttable,
      TableForm
    },
    computed: {
      ...mapGetters(['permissions'])
    },
    created() {
      remote('work_shop').then((response) => {
        if (response.data.code === 0) {
          this.workshopList = response.data.data
        } else {
          this.workshopList = []
        }
      })
    },
    methods: {
      pullEquipFun(){
        this.table.toolbar.find((e) => e.text === '同步').loading = true
        pullEquip().then(res=>{
          this.$message.success(res.data.data.msg)
          this.table.toolbar.find((e) => e.text === '同步').loading = false
        }).catch(error=>{
          this.$message.error("同步失败",error)
          this.getData()
          this.table.toolbar.find((e) => e.text === '同步').loading = false
        })
      },
      workShopFormatter(row, column, cellValue) {
        if(cellValue==='原材料检验'){
            cellValue=="原材料检验"
        }
        if(cellValue==='过程检验'){
            cellValue=="过程检验"
        }
        return cellValue
      },
      // èŽ·å–数据列表
      getData() {
        this.$refs.equipmentTable.getDataList()
      },
      formatReceiveTime(row, column, cellValue) {
        return cellValue ? fecha.format(new Date(cellValue), 'yyyy-MM-dd HH:mm:ss') : ''
      },
      handleSelectionChange(val) {
        this.multipleSelection = val
      },
      // æ–°å¢ž / ä¿®æ”¹
      addOrUpdateHandle(row) {
        this.addOrUpdateVisible = true
        this.$nextTick(() => {
          this.$refs.addOrUpdate.init(row == null ? null : row.id)
        })
      },
      // åˆ é™¤
      deleteHandle(row) {
        this.$confirm('是否确认删除设备名称为' + row.name, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          closeOnClickModal: false,
          type: 'warning'
        })
          .then(function() {
            return delObj(row.id)
          })
          .then((data) => {
            this.$message.success('删除成功')
            this.getData()
          })
      }
    }
  }
  </script>
  

 src/views/equipment/metering/metering-form.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,201 @@
<template>
    <el-dialog
      :title="!dataForm.id ? '新增' : '修改'"
      :close-on-click-modal="false"
      :visible.sync="visible"
    >
      <el-form
        :model="dataForm"
        :rules="dataRule"
        ref="dataForm"
        label-width="80px"
        class="l-mes"
      >
        <el-row>
          <el-col :span="12">
            <el-form-item label="编号" prop="code">
              <el-input v-model="dataForm.code" placeholder="编号"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="名称" prop="name">
              <el-input v-model="dataForm.name" placeholder="名称"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="类型" prop="type">
              <el-select
                v-model="dataForm.type"
                filterable
                placeholder="请选择"
                style="width:100%"
              >
                <el-option
                  v-for="item in workshopList"
                  :key="item.id"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="厂家" prop="supplier">
              <el-input
                v-model="dataForm.supplier"
                placeholder="厂家"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="状态" prop="state">
              <el-select
                v-model="dataForm.status"
                placeholder="状态"
                filterable
                style="width: 100%"
              >
                <el-option
                  v-for="item in equipmentState"
                  :key="item.id"
                  :label="item.label"
                  :value="item.label"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="visible = false">取消</el-button>
        <el-button
          type="primary"
          :disabled="isSubmit"
          v-thinclick="`dataFormSubmit`"
          >确定</el-button
        >
      </span>
    </el-dialog>
  </template>
  <script>
  import { getObj, addObj, putObj } from '@/api/equipment/metering'
  import { loadFactoryList } from '@/api/basic/factory'
  import { remote } from '../../../api/admin/dict'
  export default {
    data() {
      return {
        // options: regionData,
        visible: false,
        dataForm: {
          id: 0,
          number: '',
          name: '',
          factoryId: '',
          workshop: '',
          position: '',
          email: '',
          supplier: '',
          manufacturer: '',
          typeSpecification: '',
          manufactureDate: '',
          installDate: '',
          state: '',
          description: '',
          value1: '',
          code: null,
          type: null,
          status: null,
          supplier: null
        },
        dataRule: {
          number: [{ required: true, message: '编号不能为空', trigger: 'blur' }],
          name: [{ required: true, message: '名称不能为空', trigger: 'blur' }]
        },
        factoryOptions: [],
        equipmentState: [],
        isSubmit: false,
        workshopList: [{
            label: "原材料检验",
            value: '原材料检验'
        },{
            label: '过程检验',
            value: '过程检验'
        }]
      }
    },
    methods: {
      init(id) {
        this.dataForm.id = id || 0
        this.visible = true
        this.$nextTick(() => {
          this.$refs.dataForm.resetFields()
          if (this.dataForm.id) {
            getObj(this.dataForm.id).then((response) => {
              this.dataForm = response.data.data
            })
          } else {
            if (this.factoryOptions.length > 0) {
              this.dataForm.factoryId = this.factoryOptions[0].id
            }
          }
        })
      },
      // è¡¨å•æäº¤
      getEquipmentState() {
        remote('equipment_state').then((response) => {
          if (response.data.code === 0) {
            this.equipmentState = response.data.data
          }
        })
      },
      dataFormSubmit() {
        this.isSubmit = true
        this.$refs.dataForm.validate((valid) => {
          if (valid) {
            if (this.dataForm.id) {
              putObj(this.dataForm).then((data) => {
                this.$message.success('修改成功')
                this.visible = false
                this.isSubmit = false
                this.$emit('refreshDataList')
              })
            } else {
              addObj(this.dataForm).then((data) => {
                this.$message.success('添加成功')
                this.visible = false
                this.isSubmit = false
                this.$emit('refreshDataList')
              })
            }
          } else {
            this.isSubmit = false
          }
        })
      },
  
      initFactorySelect() {
        loadFactoryList().then((res) => {
          this.factoryOptions = res.data
          if (this.factoryOptions.length > 0) {
            this.dataForm.factoryId = this.factoryOptions[0].id
          }
        })
      }
    },
  
    created() {
      this.initFactorySelect()
      this.getEquipmentState()
  
    //   remote('work_shop').then((response) => {
    //     if (response.data.code === 0) {
    //       this.workshopList = response.data.data
    //     } else {
    //       this.workshopList = []
    //     }
    //   })
    }
  }
  </script>