manHourHousekeeper/fhKeeper/formulahousekeeper/timesheet/src/views/deviceManagement/deviceManagement.vue

<template>
  <div class="deviceManagement">
    <div class="deviceManagement-title">
      <div class="deviceManagement-title-left">
        <div>设备管理</div>
        <el-input placeholder="请输入设备编码" v-model.trim="equipmentCode" size="small" style="width: 300px;" clearable>
          <template slot="append">
            <el-button @click="searchForDevices">搜索</el-button>
          </template>
        </el-input>
      </div>

      <div class="deviceManagement-title-right">
        <el-button type="primary" size="small" @click="editDevice({}, true)">添加设备</el-button>
      </div>
    </div>

    <div class="deviceManagement-table">
      <el-table :data="deviceManagementList" border style="width: 100%" height="calc(100% - 10px)">
        <el-table-column prop="equipmentNumber" label="设备编号"></el-table-column>
        <el-table-column prop="equipmentName" label="设备名称"></el-table-column>
        <el-table-column prop="equipmentModel" label="设备型号"></el-table-column>
        <el-table-column prop="manufacturer" label="制造商"></el-table-column>
        <el-table-column prop="purchaseDate" label="购置日期" width="200"></el-table-column>
        <el-table-column prop="maintenanceDate" label="维保日期" width="200"></el-table-column>
        <el-table-column prop="operation" label="操作" width="200">
          <template slot-scope="scope">
            <el-button type="text" @click="editDevice(scope.row, true)">编辑</el-button>
            <el-button type="text" @click="deleteDevice(scope.$index, scope.row)">删除</el-button>
            <el-button type="text" @click="seeDevice(scope.$index, scope.row)">查看二维码</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 新增编辑 -->
    <el-dialog title="新增/修改设备" :visible.sync="equipmentVisable" width="780px" top="7.8vh" :before-close="handleClose">
      <div class="modifyEquipment">
        <el-form :model="equipmentForm" :rules="equipmentRules" ref="equipmentruleForm" label-width="100px"
          class="demo-ruleForm">
          <el-form-item label="设备编号" prop="equipmentNumber">
            <el-input v-model.trim="equipmentForm.equipmentNumber" placeholder="请输入设备编码"></el-input>
          </el-form-item>
          <el-form-item label="设备名称" prop="equipmentName">
            <el-input v-model.trim="equipmentForm.equipmentName" placeholder="请输入设备名称"></el-input>
          </el-form-item>
          <el-form-item label="设备型号" prop="equipmentModel">
            <el-input v-model.trim="equipmentForm.equipmentModel" placeholder="请输入设备型号"></el-input>
          </el-form-item>
          <el-form-item label="制造商" prop="manufacturer">
            <el-input v-model.trim="equipmentForm.manufacturer" placeholder="请输入制造商"></el-input>
          </el-form-item>
          <el-form-item label="购置日期" prop="purchaseDate">
            <el-date-picker v-model="equipmentForm.purchaseDate" value-format="yyyy-MM-dd" type="date"
              placeholder="选择日期" style="width: 100%;"></el-date-picker>
          </el-form-item>
          <el-form-item label="维保日期" prop="maintenanceDate">
            <el-date-picker v-model="equipmentForm.maintenanceDate" value-format="yyyy-MM-dd" type="date"
              placeholder="选择日期" style="width: 100%;"></el-date-picker>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="equipmentVisable = false">取 消</el-button>
        <el-button type="primary" @click="submitForm('equipmentruleForm')">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 查看二维码 -->
    <el-dialog :title="`${equipmentItem.equipmentNumber} - ${equipmentItem.equipmentName}`"
      :visible.sync="equipmentQrCodeVisable" width="600px" top="7.8vh" :before-close="handleClose">
      <div class="equipmentQrCode">
        <div class="equipmentQrCodeImg">
          <img :src="qrCodeURL" alt="二维码" />
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import QRCode from 'qrcode';
export default {
  data() {
    return {
      equipmentCode: '',
      equipmentVisable: false,
      equipmentQrCodeVisable: false,
      equipmentForm: {},
      equipmentItem: {},
      qrCodeURL: '',
      equipmentRules: {
        equipmentNumber: [{ required: true, message: '请输入设备编码', trigger: 'blur' }],
        equipmentName: [{ required: true, message: '请输入设备名称', trigger: 'blur' }],
        equipmentModel: [{ required: true, message: '请输入设备型号', trigger: 'blur' }],
        manufacturer: [{ required: true, message: '请输入制造商', trigger: 'blur' }],
        purchaseDate: [{ required: true, message: '请选择购置日期', trigger: 'blur' }],
        maintenanceDate: [{ required: true, message: '请选择维保日期', trigger: 'blur' }]
      },
      deviceManagementList: [
        { equipmentNumber: '123456789', equipmentName: '设备名称1(在使用)', equipmentModel: '设备型号', manufacturer: '制造商', purchaseDate: '2019-01-01', maintenanceDate: '2020-01-01', status: 1, projectName: '展示项目', durationOfUse: 1, usageTime: '2024-09-03 10:11:11' },
        { equipmentNumber: '987654321', equipmentName: '设备名称2', equipmentModel: '设备型号', manufacturer: '制造商', purchaseDate: '2019-01-01', maintenanceDate: '2020-01-01' },
        { equipmentNumber: 'aabbccas', equipmentName: '设备名称3', equipmentModel: '设备型号', manufacturer: '制造商', purchaseDate: '2019-01-01', maintenanceDate: '2020-01-01' },
        { equipmentNumber: 'jkjkjkjkjk', equipmentName: '设备名称4(在使用)', equipmentModel: '设备型号', manufacturer: '制造商', purchaseDate: '2019-01-01', maintenanceDate: '2020-01-01', status: 1, projectName: '小小神射手', durationOfUse: 15, usageTime: '2024-08-07 08:09:11' },
      ],
      deviceManagementListTwo: [
        { equipmentNumber: '123456789', equipmentName: '设备名称1(在使用)', equipmentModel: '设备型号', manufacturer: '制造商', purchaseDate: '2019-01-01', maintenanceDate: '2020-01-01', status: 1, projectName: '展示项目', durationOfUse: 1, usageTime: '2024-09-03 10:11:11' },
        { equipmentNumber: '987654321', equipmentName: '设备名称2', equipmentModel: '设备型号', manufacturer: '制造商', purchaseDate: '2019-01-01', maintenanceDate: '2020-01-01' },
        { equipmentNumber: 'aabbccas', equipmentName: '设备名称3', equipmentModel: '设备型号', manufacturer: '制造商', purchaseDate: '2019-01-01', maintenanceDate: '2020-01-01' },
        { equipmentNumber: 'jkjkjkjkjk', equipmentName: '设备名称4(在使用)', equipmentModel: '设备型号', manufacturer: '制造商', purchaseDate: '2019-01-01', maintenanceDate: '2020-01-01', status: 1, projectName: '小小神射手', durationOfUse: 15, usageTime: '2024-08-07 08:09:11' },
      ]
    };
  },
  mounted() {
  },
  methods: {
    searchForDevices() {
      console.log('点击搜索')
      const newList = JSON.parse(JSON.stringify(this.deviceManagementListTwo))
      this.deviceManagementList = newList.filter(item => item.equipmentNumber.indexOf(this.equipmentCode) > -1)
    },
    seeDevice(i, row) {
      QRCode.toDataURL(JSON.stringify(row))
        .then(url => {
          this.qrCodeURL = url;
        })
        .catch(err => {
          console.error(err);
        });
      this.equipmentItem = row
      this.equipmentQrCodeVisable = true
    },
    editDevice(row, flag) {
      this.equipmentForm = row
      this.equipmentVisable = flag
    },
    deleteDevice(i, row) {
      const { equipmentNumber } = row
      this.$confirm(`此操作将删除设备编码为【${equipmentNumber}】的设备, 是否继续?`, '删除设备', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.deviceManagementList.splice(i, 1)
        this.deviceManagementListTwo.splice(i, 1)
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
      }).catch(() => { });
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          console.log('submit!');
          const { equipmentNumber } = this.equipmentForm
          const numverList = this.deviceManagementList.map(item => item.equipmentNumber == equipmentNumber)
          if (numverList.length > 0) {
            this.$message({
              message: '设备编号重复',
              type: 'error'
            })
            return
          }
          this.deviceManagementList.push(this.equipmentForm)
          this.deviceManagementListTwo.push(this.equipmentForm)
          this.$message({
            message: '提交成功',
            type: 'success'
          });
          this.equipmentVisable = false
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    }
  },
};
</script>

<style lang="scss" scoped>
.deviceManagement {
  display: flex;
  flex-direction: column;
  height: 100%;

  .deviceManagement-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #F2F2F2;
    padding: 10px 10px;

    .deviceManagement-title-left {
      display: flex;
      align-items: center;
      margin-right: 20px;

      &>div {
        width: 80px;
      }
    }
  }

  .deviceManagement-table {
    flex: 1;
    overflow: auto;
  }

  .modifyEquipment {
    height: 378px;
    overflow: auto;
    padding: 0 20px;
  }

  .equipmentQrCodeImg {
    width: 400px;
    height: 400px;
    background: red;

    img {
      width: 100%;
      height: 100%;
    }
  }

  .equipmentQrCode {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    width: 100%;
    height: 500px;
  }
}
</style>

<style lang="scss">
.deviceManagement .el-dialog__body {
  padding: 0;
}
</style>