bonus-ui/src/views/material/ma/device/index.vue

<template>
    <div class="app-container">
      <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
        <el-form-item  prop="keyWord">
        <el-input
            v-model="queryParams.keyWord"
            placeholder="请输入关键词"
            clearable
            @keyup.enter.native="handleQuery"
            maxlength="20"
          />   
        </el-form-item>

        <el-form-item  prop="materialType">
          <el-select v-model="queryParams.materialType" placeholder="请选择物品种类" clearable>
            <el-option
              v-for="dict in materialTypeList"
              :key="dict.value"
              :label="dict.label"
              :value="dict.label"
            />
          </el-select>
        </el-form-item>

        <el-form-item  prop="isAssets">
          <el-select v-model="queryParams.isAssets" placeholder="是否固定资产" clearable>
            <el-option label="是" value="0"></el-option>
            <el-option label="否" value="1"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item  prop="materialName">
          <el-select v-model="queryParams.materialName" placeholder="请选择设备类型" clearable>
            <el-option
              v-for="dict in materialNameList"
              :key="dict.value"
              :label="dict.label"
              :value="dict.label"
            />
          </el-select>
        </el-form-item>
  
        <el-form-item  prop="materialModel">
          <el-select v-model="queryParams.materialModel" placeholder="请选择规格型号" clearable>
            <el-option
              v-for="dict in materialModelList"
              :key="dict.value"
              :label="dict.label"
              :value="dict.label"
            />
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">查询</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
  
      <el-table v-loading="loading" :data="deviceList" ref="multipleTable" row-key="teamId">
        <!-- <el-table-column type="selection" width="55" align="center" :reserve-selection="true" /> -->
        <el-table-column label="序号" align="center" width="80" type="index">
          <template slot-scope="scope">
            <span>{{ (queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1 }}</span>
          </template>
        </el-table-column>
        <el-table-column label="物品类型" align="center" prop="materialType" sortable/>
        <el-table-column label="设备类型" align="center" prop="materialName" sortable/>
        <el-table-column label="规格型号" align="center" prop="materialModel" sortable/>
        <el-table-column label="设备编号" align="center" prop="maCode" sortable/>
        <el-table-column label="设备状态" align="center" prop="statusName" sortable/>
        <el-table-column label="固定资产编号" align="center" prop="assetsCode" sortable/>
        <el-table-column label="设备原编号" align="center" prop="preCode" sortable/>
        <el-table-column label="购置批次" align="center" prop="buyTask" sortable/>
        <el-table-column label="绑定标签" align="center" prop="remark" sortable/>
        <el-table-column label="所在仓库" align="center" prop="ownHouse" sortable/>
        <el-table-column label="操作" align="center" width="180">
                        <template slot-scope="scope">
                            <el-button
                                size="mini"
                                type="text"
                                icon="el-icon-zoom-in"
                                @click="handleView(scope.row)"
                                v-hasPermi="['machinery:type:edit']"
                            >
                                查看
                            </el-button>
                            <el-button
                                size="mini"
                                type="text"
                                icon="el-icon-edit"
                                @click="handleUpdate(scope.row)"
                                v-hasPermi="['machinery:type:edit']"
                            >
                                编辑
                            </el-button>
                            <el-button
                                size="mini"
                                type="text"
                                icon="el-icon-delete"
                                @click="handleDelete(scope.row)"
                                v-hasPermi="['machinery:type:del']"
                            >
                                删除
                            </el-button>
                        </template>
                    </el-table-column>
      </el-table>
  
      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
  
     <!-- 查看或修改弹窗 -->
     <el-dialog :title="title" :visible.sync="showHouse" width="1300px"   append-to-body>
        <el-form ref="form" :model="form" :rules="rules" label-width="120px" >
          <el-row :gutter="24">
            <el-col :span="7">
                    <el-form-item label="物品种类" prop="materialType">
                      <el-select v-model="form.materialType" placeholder="请选择物品种类" clearable style="width: 100%;" disabled>
                        <el-option
                          v-for="dict in keeperDataRange"
                          :key="dict.value"
                          :label="dict.label"
                          :value="dict.value"
                        />
                      </el-select>
                      </el-form-item>
            </el-col>
            <el-col :span="7">
                    <el-form-item label="设备类型" prop="materialName">
                      <el-select v-model="form.materialName" placeholder="请选择设备类型" clearable style="width: 100%;" disabled>
                        <el-option
                          v-for="dict in keeperDataRange"
                          :key="dict.value"
                          :label="dict.label"
                          :value="dict.value"
                        />
                      </el-select>
                      </el-form-item>
            </el-col>
            <el-col :span="7">
                    <el-form-item label="规格型号" prop="materialModel">
                      <el-input v-model="form.materialModel" placeholder="请输入" maxlength="20" disabled/>
                      </el-form-item>
            </el-col>
        </el-row>
     
          <el-row :gutter="24">
            <el-col :span="7">
                    <el-form-item label="设备编号" prop="maCode">
                      <el-input v-model="form.maCode" placeholder="请输入" maxlength="20"/>
                      </el-form-item>
            </el-col>
            <el-col :span="7">
                    <el-form-item label="设备状态" prop="statusName">
                      <el-input v-model="form.statusName" placeholder="请输入" maxlength="20" disabled/>
                      </el-form-item>
            </el-col>
            <el-col :span="7">
                    <el-form-item label="固定资产编号" prop="assetsCode">
                      <el-input v-model="form.assetsCode" placeholder="请输入" maxlength="20" />
                      </el-form-item>
            </el-col>   
          </el-row>    
          <el-row :gutter="24">  
            <el-col :span="7">
                    <el-form-item label="设备原编号" prop="preCode">
                      <el-input v-model="form.preCode" placeholder="请输入" maxlength="20"/>
                      </el-form-item>
            </el-col>
            <el-col :span="7">
                    <el-form-item label="购置批次" prop="buyTask">
                      <el-input v-model="form.buyTask" placeholder="请输入" maxlength="20" disabled/>
                      </el-form-item>
            </el-col>
            <el-col :span="7">
                    <el-form-item label="绑定标签" prop="houseName">
                      <el-input v-model="form.houseName" placeholder="请输入" maxlength="20" disabled/>
                      </el-form-item>
            </el-col> 
           </el-row>  

        <el-row :gutter="24">  
            <el-col :span="7">
                    <el-form-item label="所在仓库" prop="ownHouse">
                      <el-input v-model="form.ownHouse" placeholder="请输入" maxlength="20" disabled/>
                      </el-form-item>
            </el-col>
            <el-col :span="7">
                    <el-form-item label="本次检验人员" prop="checkMan">
                      <el-input v-model="form.checkMan" placeholder="请输入" maxlength="20" disabled/>
                      </el-form-item>
            </el-col>
            <el-col :span="7">
                    <el-form-item label="本次检验时间" prop="thisCheckTime">
                      <el-date-picker type="date" placeholder="选择日期" v-model="form.thisCheckTime" style="width: 100%;" disabled></el-date-picker>
                      </el-form-item>
            </el-col>
        </el-row> 

        <el-row :gutter="24">  
            <el-col :span="7">
                    <el-form-item label="下次检验时间" prop="nextCheckTime">
                       <el-date-picker type="date" placeholder="选择日期" v-model="form.nextCheckTime" style="width: 100%;" disabled></el-date-picker>
                      </el-form-item>
            </el-col>
            <el-col :span="7">
                    <el-form-item label="资产属性" prop="assetsId">
                      <el-select v-model="form.assetsId" placeholder="请选择资产属性" clearable style="width: 100%;" >
                        <el-option
                          v-for="dict in ZichanTypeList"
                          :key="dict.value"
                          :label="dict.label"
                          :value="dict.value"
                        />
                      </el-select>
                      </el-form-item>
            </el-col>
            <el-col :span="7">
                    <el-form-item label="出场时间" prop="outFacTime">
                       <el-date-picker type="date" placeholder="选择日期" v-model="form.outFacTime" style="width: 100%;"></el-date-picker>
                      </el-form-item>
            </el-col>
        </el-row> 

        <el-row :gutter="24">  
            <el-col :span="7">
                    <el-form-item label="出厂编号" prop="outFacCode">
                      <el-input v-model="form.outFacCode" placeholder="请输入" maxlength="20"/>
                      </el-form-item>
            </el-col>
            <el-col :span="7">
                    <el-form-item label="出入库次数" prop="inOutNum">
                      <el-input v-model="form.inOutNum" placeholder="请输入" maxlength="20" disabled/>
                      </el-form-item>
            </el-col>
            <el-col :span="7">
                    <el-form-item label="库管员" prop="keeperName">
                      <el-input v-model="form.keeperName" placeholder="请输入" maxlength="20" disabled/>
                      </el-form-item>
            </el-col>
        </el-row> 
        <el-row :gutter="24">  
            <el-col :span="7">
                    <el-form-item label="维修员" prop="repairName">
                      <el-input v-model="form.repairName" placeholder="请输入" maxlength="20" disabled/>
                      </el-form-item>
            </el-col>
        </el-row> 
           <el-row :gutter="24">  
             <el-col :span="20">
               <el-form-item label="备注" prop="remark">
                <el-input
                  type="textarea"
                  :rows="5"
                  placeholder="请输入备注"
                  v-model="form.remark"
                  maxlength="50"
                  show-word-limit
                  >
                </el-input>
                </el-form-item>      
             </el-col> 
           </el-row> 

          
        </el-form>
        <div slot="footer" class="dialog-footer">
          <template>    
                <el-button v-if="this.title=='修改'" type="primary" @click="submitForm">确 定</el-button>
           </template>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </el-dialog>
  

    </div>
  </template> 
  
  <script>
  import { getListDevice,getDeviceDetail,editDevice,addDevice,delDevice,getDeviceType,getZichanType } from "@/api/ma/device";
  import { downloadFile } from '@/utils/download'
  import { getToken } from '@/utils/auth'
  export default {
    name: "Post",
    data() {
      return {
        // 遮罩层
        loading: false,
  
        loadingTwo: false,
  
  
        // 是否显示项目部Id
        showName: false,
  
        // 是否显示施工预警信息
        showWarn: false,
  

        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
  
  
        // 显示搜索条件
        showSearch: true,
        showHouse: false,
       
        // 总条数
        total: 0,
        totalTwo : 0,
        // 施工记录表格数据
        deviceList: [],
        materialTypeList:[],
        ZichanTypeList:[],
        materialNameList:[],
        materialModelList:[],
        maxLength:100,//已选列表上限，防止数据过多请求报错
        keeperDataRange:[],
        // 班组人员表格数据
        teamList: [],
        teamTempList: [],
        // 弹出层标题
        title: "",
        // 是否显示弹出层
        open: false,
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          keyWord:undefined,
          isAssets:undefined
        },
        // 查询参数
        queryTeam: {
            pageNum: 1,
            pageSize: 10,
            name: undefined,
            sex: undefined,
            teamId: undefined,
          },

        // 用户导入参数
        upload: {
          // 是否显示弹出层（用户导入）
          open: false,
          // 弹出层标题（用户导入）
          title: "",
          // 是否禁用上传
          isUploading: false,
          // 是否更新已经存在的用户数据
          updateSupport: 0,
          // 设置上传的请求头部
          headers: { Authorization: "Bearer " + getToken() },
          // 上传的地址
          url: process.env.VUE_APP_BASE_API + "/material/engineering/excelUpload"
        },

        // 表单参数
        form: {},
              // 表单校验
              rules: {

                

            },
      };
    },
    created() {
      this.getZichanType();
      this.getDeviceType();
      this.getList();
    },
    methods: {
       getDeviceType(){
          getDeviceType({level:2}).then(response => {
          let matTypeRes = response.data;
          this.materialTypeList = matTypeRes.map((item) => {
                return {
                label: item.typeName,
                value: item.typeId,
                };
            });
        });
           getDeviceType({level:3}).then(response => {
          let matNameRes = response.data;
          this.materialNameList = matNameRes.map((item) => {
                return {
                label: item.typeName,
                value: item.typeId,
                };
            });
        });
           getDeviceType({level:4}).then(response => {
          let matModelRes = response.data;
          this.materialModelList = matModelRes.map((item) => {
                return {
                label: item.typeName,
                value: item.typeId,
                };
            });
        });
      },

      //查询资产属性下拉框
      getZichanType(){
          getZichanType({isAll:1}).then(response => {
          let matTypeRes = response.data;
          this.ZichanTypeList = matTypeRes.map((item) => {
                return {
                label: item.assetName,
                value: item.id,
                };
            });
        });
      },

      /** 查询岗位列表 */
      getList() {
        this.loading = true;
        getListDevice(this.queryParams).then(response => {
          this.deviceList = response.rows;
          this.total = response.total;
          this.loading = false;
        });
      },

      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.getList();
      },

        handleUpdate(row){
          this.reset()
          const maId = row.maId 
            getDeviceDetail(maId).then((response) => {
                this.form = response.data;
            
                this.showHouse = true
                this.title = '修改'
            })
        },

        handleView(row){
          this.reset()
          const maId = row.maId 
            getDeviceDetail(maId).then((response) => {
                this.form = response.data;
            
                this.showHouse = true
                this.title = '查看'
            })
        },
        // 表单重置 
        reset() {
            this.form = {};
            this.resetForm("form");
        },

        /** 重置按钮操作 */
        resetQuery() {
            this.resetForm("queryForm");
            this.queryParams.keyWord=null;
            this.handleQuery();
        },

        //** 提交按钮 */
        submitForm() { 
          this.$refs["form"].validate(valid => {
          if (valid) {
              if (this.form.maId != undefined) {
                editDevice(this.form).then(response => {
                  this.$modal.msgSuccess("修改成功");
                  this.showHouse = false;
                  this.getList();
                });
              }
            }
            });
        },

        // 取消按钮
        cancel() {
          this.showHouse = false;
          this.reset();
        },

        /** 删除按钮操作 */
        handleDelete(row) {
            const maId = row.maId
            this.$modal
                .confirm('是否确认删除数据项？')
                .then(function () {
                    return delDevice(maId)
                })
                .then(() => {
                    this.$modal.msgSuccess('删除成功')
                    this.getList()
                })
                .catch(() => {})
        },
       
        // handleExport() {
        //     this.download('/material/ma_machine/export', {
        //       ...this.queryParams
        //     }, `仓库管理_${new Date().getTime()}.xlsx`)
        // },
  

    }
  };
  </script>
  <style lang="scss" scoped>
  .uploadImg {
    padding-top: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .deviceCode {
      margin-top: 10px;
      padding-bottom: 20px;
      font-size: 18px;
  }
  ::v-deep.el-table .fixed-width .el-button--mini {
      width: 60px !important;
      margin-bottom: 10px;
  }
  //隐藏图片上传框的css
  ::v-deep.disabled {
      .el-upload--picture-card {
          display: none;
      }
  }
  </style>