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

<template>
  <div class="deviceManagement">
    <!-- 菜单栏 -->
    <div>
      <el-menu :default-active="menuIndex" class="el-menu-vertical-demo"
        @select="(index) => menuHandleSelect(index, false)">
        <el-menu-item index="info" v-if="permissions.equipmentInformationManagement">
          <i class="el-icon-menu"></i>
          <span slot="title">设备信息管理</span>
        </el-menu-item>
        <el-menu-item index="cost" v-if="permissions.equipmentCostManagement">
          <i class="el-icon-document"></i>
          <span slot="title">设备成本管理</span>
        </el-menu-item>
      </el-menu>
    </div>

    <!-- 主页面 -->
    <div class="deviceManagement-container">
      <!-- 审核信息管理 -->
      <template v-if="menuIndex === 'info'">
        <div class="deviceManagement-title">
          <div class="deviceManagement-title-left">
            <div>设备管理</div>
            <el-input placeholder="请输入关键字" v-model.trim="equipmentCode" size="small" style="width: 380px;" clearable>
              <el-select v-model="deviceStringType" slot="prepend" style="width: 80px;">
                <el-option label="编号" value="1"></el-option>
                <el-option label="名称" value="2"></el-option>
              </el-select>
              <template slot="append">
                <el-button @click="searchForDevices">搜索</el-button>
              </template>
            </el-input>
          </div>

          <div class="deviceManagement-title-right">
            <el-button type="text" @click="editDevice({}, true)">添加设备</el-button>
            <el-button type="text" @click="exportDevice()" :loading="allLoading.exportDeviceLoading">导出设备</el-button>
          </div>
        </div>

        <div class="deviceManagement-table">
          <el-table :data="deviceManagementList" border height="calc(100% - 10px)" v-loading="allLoading.tableLoading"
            :key="12" style="width: 100%;">
            <el-table-column prop="deviceCode" label="设备编号"></el-table-column>
            <el-table-column prop="deviceName" label="设备名称"></el-table-column>
            <el-table-column prop="deviceModel" label="设备型号"></el-table-column>
            <el-table-column prop="manufacturer" label="制造商"></el-table-column>
            <el-table-column prop="purchaseDate" label="购置日期" width="120"></el-table-column>
            <el-table-column prop="maintenanceDate" label="维保日期" width="120"></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>
      </template>

      <!-- 设备成本管理 -->
      <template v-if="menuIndex === 'cost'">
        <div class="deviceManagement-title">
          <div class="deviceManagement-title-left">
            <div>设备成本管理</div>

            <el-date-picker v-model="costYmonth" value-format="yyyy-MM" type="month" size="small"
              style="width: 120px;margin-right: 20px" :clearable="false" @change="searchDevicesCost"></el-date-picker>

            <el-input placeholder="请输入关键字" v-model.trim="costDeviceCode" size="small" style="width: 380px;" clearable>
              <template slot="append">
                <el-button @click="searchDevicesCost">搜索</el-button>
              </template>
            </el-input>
          </div>

          <div class="deviceManagement-title-right">
            <el-button type="text" @click="displayFileUpload()" style="margin-right: 10px;">成本数据上传</el-button>
            <!-- <el-button type="text">成本模板下载</el-button> -->
            <el-link type="primary" :underline="false" href="./upload/设备成本.xlsx" download="设备成本.xlsx">成本模板下载</el-link>
          </div>
        </div>

        <div class="deviceManagement-table">
          <el-table :data="deviceCostList" border height="calc(100% - 10px)" @selection-change="handleSelectionChange"
            v-loading="allLoading.tableLoading" :key="21" show-summary :summary-method="getSummaries" style="width: 100%;">
            <el-table-column type="selection" width="55"></el-table-column>
            <el-table-column prop="deviceCode" label="设备编号"></el-table-column>
            <el-table-column prop="deviceName" label="设备名称"></el-table-column>
            <el-table-column prop="deviceModel" label="设备型号"></el-table-column>
            <el-table-column prop="manufacturer" label="制造商"></el-table-column>
            <el-table-column prop="monthCost" label="当月成本(元)"></el-table-column>
            <el-table-column prop="operation" label="操作" width="120">
              <template slot-scope="scope">
                <el-button type="text" @click="displaModifyCost(scope.row, true)">修改成本</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </template>

      <!-- 分页 -->
      <div class="deviceManagement-page">
        <div>
          <el-button v-if="menuIndex == 'cost'" type="primary" size="small" :disabled="tableSelection.length == 0"
            @click="batchDeletion()">批量删除</el-button>
        </div>
        <el-pagination background layout="total, prev, pager, next, sizes" :page-size="pageSize" :total="total"
          :page-sizes="[10, 20, 30, 50, 100, 200]" :current-page="pageIndex" @current-change="handleCurrentChange"
          @size-change="handleSizeChange" size="small">
        </el-pagination>
      </div>
    </div>

    <!-- 新增编辑 -->
    <el-dialog title="新增/修改设备" :visible.sync="equipmentVisable" width="780px" top="7.8vh"
      :before-close="addEditCallback">
      <div class="modifyEquipment">
        <el-form :model="equipmentForm" :rules="equipmentRules" ref="equipmentruleForm" label-width="100px"
          class="demo-ruleForm">
          <el-form-item label="设备编号" prop="deviceCode">
            <el-input v-model.trim="equipmentForm.deviceCode" placeholder="请输入设备编码" :maxlength="100"></el-input>
          </el-form-item>
          <el-form-item label="设备名称" prop="deviceName">
            <el-input v-model.trim="equipmentForm.deviceName" placeholder="请输入设备名称" :maxlength="100"></el-input>
          </el-form-item>
          <el-form-item label="设备型号" prop="deviceModel">
            <el-input v-model.trim="equipmentForm.deviceModel" placeholder="请输入设备型号" :maxlength="100"></el-input>
          </el-form-item>
          <el-form-item label="制造商" prop="manufacturer">
            <el-input v-model.trim="equipmentForm.manufacturer" placeholder="请输入制造商" :maxlength="100"></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="closeEquipmentVisable()">取 消</el-button>
        <el-button type="primary" @click="submitForm('equipmentruleForm')">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 查看二维码 -->
    <!-- <el-dialog :title="`${equipmentItem.deviceCode} - ${equipmentItem.deviceName}`" -->
    <el-dialog :title="`查看二维码`"
      :visible.sync="equipmentQrCodeVisable" width="600px" top="7.8vh" :before-close="handleClose">
      <div class="equipmentQrCode" ref="printContent">
        <div class="equipmentQrCodeImg">
          <img :src="qrCodeURL" alt="二维码" />
        </div>
        <div class="equipmentQrCodeText">
          <p>设备编号：{{ equipmentItem.deviceCode }}</p>
          <p>设备名称：{{ equipmentItem.deviceName }}</p>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="print()">打 印</el-button>
      </span>
    </el-dialog>

    <!-- 成本数据上传 -->
    <el-dialog title="成本数据上传" :visible.sync="uploadFileVisable" width="780px" top="7.8vh" :before-close="handleClose">
      <el-form :model="uploadFileFormVal" label-width="100px" class="demo-ruleForm">
        <el-form-item label="上传月份">
          <el-date-picker v-model="uploadFileFormVal.ymonthStr" value-format="yyyy-MM" type="month" size="small"
            style="" :clearable="false"></el-date-picker>
        </el-form-item>
        <el-form-item label="上传文件">
          <el-upload class="upload-demo" :show-file-list="false" :http-request="uploadFileCost"
            v-if="!uploadFileFormVal.fileName">
            <el-button size="small" type="primary">点击上传</el-button>
          </el-upload>
          <el-tag closable @close="closeCostFile()" disable-transitions v-else>{{ uploadFileFormVal.fileName }}</el-tag>
        </el-form-item>
        <div class="textPrompt">上传会更新已有的设备成本！！！</div>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="uploadFileVisable = false">取 消</el-button>
        <el-button type="primary" :disabled="!uploadFileFormVal.fileName" :loading="allLoading.costFileLoading"
          @click="uploadCostFiles()">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 修改成本 -->
    <el-dialog :title="modifyCostTitle" :visible.sync="modifyCostVisable" width="780px" top="7.8vh"
      :before-close="handleClose">
      <el-form :model="modifyCostform" label-width="100px" style="margin-top: 20px;">
        <el-form-item label="当月成本">
          <el-input-number v-model="modifyCostform.monthCost" controls-position="right" size="small"
            style="width: 60%;"></el-input-number>
          <span>（元）</span>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="modifyCostVisable = false">取 消</el-button>
        <el-button type="primary" :disabled="!modifyCostform.monthCost" :loading="allLoading.modifyCostLoading"
          @click="modifyCostAmountOfMoney()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import QRCode from 'qrcode';
export default {
  data() {
    return {
      menuIndex: 'info',
      equipmentCode: '',
      deviceStringType: '1',
      equipmentVisable: false,
      equipmentQrCodeVisable: false,
      equipmentForm: {},
      equipmentItem: {},
      qrCodeURL: '',
      pageIndex: 1,
      pageSize: 20,
      total: 0,
      equipmentRules: {
        deviceCode: [{ required: true, message: '请输入设备编码', trigger: 'blur' }],
        deviceName: [{ required: true, message: '请输入设备名称', trigger: 'blur' }],
        deviceModel: [{ required: true, message: '请输入设备型号', trigger: 'blur' }],
        manufacturer: [{ required: true, message: '请输入制造商', trigger: 'blur' }],
        purchaseDate: [{ required: true, message: '请选择购置日期', trigger: 'blur' }],
        maintenanceDate: [{ required: true, message: '请选择维保日期', trigger: 'blur' }]
      },
      deviceManagementList: [],
      allLoading: {
        exportDeviceLoading: false,
        tableLoading: false,
        costFileLoading: false,
        modifyCostLoading: false
      },

      costYmonth: this.dayjs().format('YYYY-MM'),
      costDeviceCode: '',
      deviceCostList: [],
      uploadFileFormVal: {
        file: '',
        fileName: '',
        ymonthStr: '',
      },
      uploadFileVisable: false,
      modifyCostVisable: false,
      modifyCostTitle: '',
      modifyCostform: {
        monthCost: ''
      },
      tableSelection: [],
      permissions: JSON.parse(sessionStorage.getItem("permissions")),
    };
  },
  mounted() {
    if (this.permissions.equipmentInformationManagement) {
      this.menuIndex = 'info'
      this.getDeviceManagementList()
      return
    }

    if (this.permissions.equipmentCostManagement) {
      this.menuIndex = 'cost'
      this.getDeviceCostList()
      return
    }
  },
  methods: {
    // 打印
    print() {
      this.$print(this.$refs.printContent)
    },
    getSummaries(param) {
      const { columns, data } = param;
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '总计';
          return;
        }
        if (index === 5) {
          const values = data.map(item => Number(item[column.property]));
          if (!values.every(value => isNaN(value))) {
            sums[index] = values.reduce((prev, curr) => {
              const value = Number(curr);
              if (!isNaN(value)) {
                return prev + curr;
              } else {
                return prev;
              }
            }, 0);
            sums[index] += '';
          } else {
            sums[index] = 'N/A';
          }
        }
      });

      return sums;
    },
    batchDeletion() {
      const numbers = this.tableSelection.map(item => item.deviceCode).join(',')
      const ids = this.tableSelection.map(item => item.id).join(',')
      this.$confirm(`此操作将删除设备编码为【${numbers}】的设备, 是否继续?`, '删除设备', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.postData(`/device-cost/deleteBatch`, { ids }).then(() => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
          this.searchDevicesCost()
        })
      }).catch(() => { });
    },
    handleSelectionChange(val) {
      this.tableSelection = val
    },
    modifyCostAmountOfMoney() {
      const { id, monthCost } = this.modifyCostform
      this.allLoading.modifyCostLoading = true
      this.postData(`/device-cost/edit`, {
        id,
        monthCost
      }).then(res => {
        this.$message.success('修改成功')
        this.modifyCostVisable = false
        this.getDeviceCostList()
      }).finally(() => {
        this.allLoading.modifyCostLoading = false
      })
    },
    exportDevice() {
      this.allLoading.exportDeviceLoading = true
      const formVal = this.deviceStringType === '1'
        ? { deviceCode: this.equipmentCode }
        : this.deviceStringType === '2'
          ? { deviceName: this.equipmentCode }
          : {};
      this.postData(`/device/exportDevice`, {
        ...formVal
      }).then((res) => {
        this.downloadFiles(res.data, '设备信息表')
      }).finally(() => {
        this.allLoading.exportDeviceLoading = false
      })
    },
    searchForDevices() {
      this.getDeviceManagementList()
    },
    searchDevicesCost() {
      this.getDeviceCostList()
    },
    getDeviceCostList() {
      this.allLoading.tableLoading = true
      this.postData(`/device-cost/getDeviceCostPage`, {
        pageIndex: this.pageIndex,
        pageSize: this.pageSize,
        deviceCode: this.costDeviceCode,
        ymonth: this.costYmonth
      }).then(res => {
        const { total, mapList } = res.data
        this.deviceCostList = mapList
        this.total = total
      }).finally(() => {
        this.allLoading.tableLoading = false
      })
    },
    getDeviceManagementList() {
      const formVal = this.deviceStringType === '1'
        ? { deviceCode: this.equipmentCode }
        : this.deviceStringType === '2'
          ? { deviceName: this.equipmentCode }
          : {};
      this.allLoading.tableLoading = true
      this.postData(`/device/getDevicePage`, {
        pageIndex: this.pageIndex,
        pageSize: this.pageSize,
        ...formVal
      }).then(res => {
        const { total, data } = res.data
        this.deviceManagementList = data
        this.total = total
      }).finally(() => {
        this.allLoading.tableLoading = false
      })
    },
    uploadFileCost(file) {
      console.log(file, '<==== 选择文件')
      this.uploadFileFormVal = {
        ...this.uploadFileFormVal,
        file: file.file,
        fileName: file.file.name
      }
    },
    closeCostFile() {
      this.uploadFileFormVal = {
        ...this.uploadFileFormVal,
        file: '',
        fileName: ''
      }
    },
    displaModifyCost(row) {
      this.modifyCostform = { ...row }
      this.modifyCostTitle = `修改设备编码【${row.deviceCode}】的成本`
      this.modifyCostVisable = true
    },
    displayFileUpload() {
      this.uploadFileFormVal = {
        file: '',
        fileName: '',
        ymonthStr: this.dayjs().format('YYYY-MM'),
      }
      this.uploadFileVisable = true
    },
    seeDevice(i, row) {
      console.log(JSON.stringify({id: row.id}))
      QRCode.toDataURL(JSON.stringify({id: row.id}))
        .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 { deviceCode, id } = row
      this.$confirm(`此操作将删除设备编码为【${deviceCode}】的设备, 是否继续?`, '删除设备', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.postData(`/device/delete`, { id }).then(() => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
          this.searchForDevices()
        })
      }).catch(() => { });
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          console.log('submit!');
          this.postData('/device/updateOrInsert', this.equipmentForm).then(() => {
            this.$message({
              message: '操作成功',
              type: 'success'
            });
            this.searchForDevices()
            this.equipmentVisable = false
          })
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    handleCurrentChange(val) {
      this.pageIndex = val
      this.menuHandleSelect(this.menuIndex, true)
    },
    handleSizeChange(val) {
      this.pageSize = val
      this.pageIndex = 1
      this.menuHandleSelect(this.menuIndex, true)
    },
    menuHandleSelect(index, flag = false) {
      console.log(flag, '<==== 已修改')
      if (!flag) {
        this.pageIndex = 1
      }
      if (index == 'info') {
        this.getDeviceManagementList()
      }
      if (index == 'cost') {
        this.searchDevicesCost()
      }
      this.tableSelection = []
      this.menuIndex = index
    },
    downloadFiles(filePath, fileName) {
      const a = document.createElement('a'); // 创建a标签
      a.setAttribute('download', fileName + '.xlsx');// download属性
      a.setAttribute('href', filePath);// href链接
      a.click(); //自执行点击事件
      a.remove();
    },
    uploadCostFiles() {
      const file = this.uploadFileFormVal.file
      const ymonthStr = this.uploadFileFormVal.ymonthStr
      const formData = new FormData()
      formData.append('file', file)
      formData.append('ymonthStr', ymonthStr)
      this.allLoading.costFileLoading = true
      this.http.uploadFile(`/device-cost/importDeviceCost`, formData, res => {
        if (res.code == 'ok') {
          this.$message({
            type: 'success',
            message: `上传成功`
          })
          this.searchDevicesCost()
        } else {
          this.$message({
            message: res.msg,
            type: 'error'
          })
        }
        this.uploadFileVisable = false
        this.allLoading.costFileLoading = false
      }, err => {
        this.allLoading.costFileLoading = false
      })
    },
    addEditCallback(done) {
      this.$refs['equipmentruleForm'].resetFields();
      done()
    },
    closeEquipmentVisable() {
      this.$refs['equipmentruleForm'].resetFields();
      this.equipmentVisable = false
    },
    async postData(urls, param) { // 封装请求函数
      return new Promise((resolve, reject) => {
        this.http.post(urls, { ...param },
          res => {
            if (res.code == 'ok') {
              resolve(res)
            } else {
              this.$message({
                message: res.msg,
                type: 'error'
              })
              reject(res)
            }
            resolve(res)
          },
          error => {
            this.$message({
              message: error,
              type: "error"
            });
            reject(error)
          }
        )
      });
    },
  },
};
</script>

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

  .deviceManagement-title-right {
    display: flex;
    align-items: center;
    padding-right: 10px;
  }

  .deviceManagement-page {
    background: #F2F2F2;
    padding: 10px 20px;
    display: flex;
    box-sizing: border-box;
    justify-content: space-between;
  }

  .deviceManagement-container {
    flex: 1;
    display: flex;
    height: 100%;
    flex-direction: column;
  }

  .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: 100px;
      }
    }
  }

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

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

  .equipmentQrCodeImg {
    width: 350px;
    height: 350px;
    background: red;
    margin: auto;

    img {
      width: 100%;
      height: 100%;
    }
  }
  .equipmentQrCodeText {
    width: 100%;
    font-size: 20px;
    padding: 0 20px 10px 20px;
  }

  .equipmentQrCode {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 60vh;
    overflow-y: auto;
    overflow-x: hidden;
  }

  .textPrompt {
    color: red;
    padding: 0 0 0 30px;
  }
}
</style>

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