Crunchy
2025-04-29 e5454b769d44a34af423bf87ac8a740bf8c20341
src/views/CNAS/resourceDemand/device/component/state.vue
@@ -2,30 +2,24 @@
<template>
  <div>
    <div class="search">
      <el-row :gutter="10" style="width: 100%;">
        <el-col :span="20" style="display: flex;flex-wrap: wrap;">
          <div class="search_thing">
            <div class="search_label">流程编号:</div>
            <div class="search_input">
              <el-input v-model="search.processNumber" clearable placeholder="请输入" size="small" style="width: 100%"
                @keyup.enter.native="getDeviceStatePage(clickNodeVal.value)"></el-input>
            </div>
          </div>
          <div class="search_thing" style="padding-left: 20px;">
            <el-button size="small" @click="resetSearch">重 置</el-button>
            <el-button size="small" type="primary" @click="getDeviceStatePage(clickNodeVal.value)">查 询</el-button>
          </div>
        </el-col>
        <el-col :span="4">
          <div class="btns">
            <el-button size="small" type="primary" @click="dialogVisible = true">新建</el-button>
            <el-button :loading="outLoading" size="small" type="primary" @click="handleDown">导出Excel</el-button>
          </div>
        </el-col>
      </el-row>
      <el-form :model="search" ref="search" size="small" :inline="true">
        <el-form-item label="流程编号">
          <el-input v-model="search.processNumber" clearable placeholder="请输入" size="small" style="width: 100%"
                    @keyup.enter.native="getDeviceStatePage(clickNodeVal.value)"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button size="mini" type="primary" @click="getDeviceStatePage(clickNodeVal.value)">查询</el-button>
          <el-button size="mini" @click="resetSearch">重置</el-button>
        </el-form-item>
      </el-form>
      <div>
        <el-button size="small" type="primary" @click="dialogVisible = true">新建</el-button>
        <el-button :loading="outLoading" size="small" type="primary" @click="handleDown">导出Excel</el-button>
      </div>
    </div>
    <div>
      <el-table :data="tableDatalist" height="calc(100vh - 20em)" style="width: 100% ;">
      <el-table :data="tableDatalist" height="calc(100vh - 20em)" style="width: 100% ;"
                :header-cell-style="{ background: '#f8f8f9', color: '#515a6e' }" border>
        <!-- 表格列 -->
        <el-table-column align="center" header-align="center" label="序号" prop="prop" type="index"
          width="70"></el-table-column>
@@ -53,7 +47,7 @@
      </el-table>
      <el-pagination :current-page="1" :page-size="search.size" :page-sizes="[10, 20, 30, 50, 100]"
        :total="search.total" layout="->,total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange"
        @current-change="handleCurrentChange">
        @current-change="handleCurrentChange" background>
      </el-pagination>
    </div>
    <el-dialog :close-on-click-modal="false" :close-on-press-escape="false" :visible.sync="dialogVisible" title="设备情况"
@@ -237,7 +231,17 @@
  </div>
</template>
<script>
import {
  saveDeviceState,
  selectDeviceByCode,
  exportDeviceStatus,
  deleteDeviceState,
  deviceStateExport,
  getDeviceStatePage,
} from '@/api/cnas/resourceDemand/device.js'
import { selectUserCondition } from "@/api/business/inspectionTask";
import { dateFormat } from '@/utils/date'
import { mapGetters } from "vuex";
export default {
  props: {
    clickNodeVal: {
@@ -246,6 +250,9 @@
        return {};
      }
    }
  },
  computed: {
    ...mapGetters(["nickName"]),
  },
  data() {
    return {
@@ -311,25 +318,24 @@
      this.$refs.form.validate((valid) => {
        if (valid === true || saveState !== '1submit') {
          // 给当前环节设置创建人与时间
          let user = JSON.parse(localStorage.getItem('user'))
          const dateTime = dateFormat(new Date())
          // 获取当前环节操作人与日期
          switch (this.currentStep) {
            case 0:
              this.form.createUser = user.name
              this.form.submitOperatingPersonnel = user.name
              this.form.createUser = this.nickName
              this.form.submitOperatingPersonnel = this.nickName
              this.form.submitDate = dateTime
              break
            case 1:
              this.form.departmentOperatingPersonnel = user.name
              this.form.departmentOperatingPersonnel = this.nickName
              this.form.departmentDate = dateTime
              break
            case 2:
              this.form.measuringRoomOperatingPersonnel = user.name
              this.form.measuringRoomOperatingPersonnel = this.nickName
              this.form.measuringRoomDate = dateTime
              break
            case 3:
              this.form.approvalOperatingPersonnel = user.name
              this.form.approvalOperatingPersonnel = this.nickName
              this.form.approvalDate = dateTime
              break
            default:
@@ -355,11 +361,7 @@
          // 获取当前状态
          this.form.currentState = currentStepAction === 4 ? '关闭' : this.steps[currentStepAction]
          this.form.deviceId = this.clickNodeVal.value
          this.$axios.post(this.$api.deviceCheck.saveDeviceState, this.form, {
            headers: {
              'Content-Type': 'application/json'
            }
          }).then(res => {
          saveDeviceState(this.form).then(res => {
            if (res.code == 200) {
              this.$message.success('提交成功')
              this.getDeviceStatePage(this.clickNodeVal.value)
@@ -385,7 +387,7 @@
    },
    openRecordAcceptance() {
      // 获取设备基础信息
      this.$axios.get(this.$api.deviceScope.selectDeviceByCode + '?id=' + this.clickNodeVal.value).then(res => {
      selectDeviceByCode({ id: this.clickNodeVal.value }).then(res => {
        this.form.deviceName = res.data.deviceName
        this.form.specificationModel = res.data.specificationModel
        this.form.managementNumber = res.data.managementNumber
@@ -398,7 +400,7 @@
    },
    // 获取负责人信息接口
    getUserList() {
      this.$axios.get(this.$api.deviceScope.selectUserList).then(res => {
      selectUserCondition().then(res => {
        if (res.code == 200) {
          this.responsibleOptions = res.data
        }
@@ -418,37 +420,10 @@
    // 导出
    handleDownOne(row) {
      this.outLoading = true
      this.$axios.get(this.$api.deviceCheck.exportDeviceStatus + '?deviceId=' + row.deviceId + '&processNumber=' + row.processNumber, {
        responseType: "blob"
      }).then(res => {
      exportDeviceStatus({ deviceId: row.deviceId, processNumber: row.processNumber }).then(res => {
        this.outLoading = false
        const blob = new Blob([res], { type: 'application/octet-stream' });
        //将Blob 对象转换成字符串
        let reader = new FileReader();
        reader.readAsText(blob, 'utf-8');
        reader.onload = () => {
          try {
            let result = JSON.parse(reader.result);
            if (result.message) {
              this.$message.error(result.message);
            } else {
              const url = URL.createObjectURL(blob);
              const link = document.createElement('a');
              link.href = url;
              link.download = '设备停/启用.doc';
              link.click();
              this.$message.success('导出成功')
            }
          } catch (err) {
            console.log(err);
            const url = URL.createObjectURL(blob);
            const link = document.createElement('a');
            link.href = url;
            link.download = '设备停/启用.doc';
            link.click();
            this.$message.success('导出成功')
          }
        }
        this.$download.saveAs(blob, '设备停/启用.doc')
      })
    },
    // 删除
@@ -458,7 +433,7 @@
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$axios.delete(this.$api.deviceCheck.deleteDeviceState + '?stateId=' + row.stateId).then(res => {
        deleteDeviceState({ stateId: row.stateId }).then(res => {
          if (res.code == 200) {
            this.$message.success('删除成功')
            this.getDeviceStatePage(this.clickNodeVal.value)
@@ -470,43 +445,17 @@
          message: '已取消删除'
        });
      });
    },
    //导出
    handleDown() {
      this.outLoading = true
      this.$axios.post(this.$api.deviceCheck.deviceStateExport, {
      deviceStateExport({
        deviceId: this.clickNodeVal.value,
        processNumber: this.search.processNumber
      }, { responseType: "blob" }).then(res => {
      }).then(res => {
        this.outLoading = false
        const blob = new Blob([res], { type: 'application/octet-stream' });
        //将Blob 对象转换成字符串
        let reader = new FileReader();
        reader.readAsText(blob, 'utf-8');
        reader.onload = () => {
          try {
            let result = JSON.parse(reader.result);
            if (result.message) {
              this.$message.error(result.message);
            } else {
              const url = URL.createObjectURL(blob);
              const link = document.createElement('a');
              link.href = url;
              link.download = '设备停用/启用.xlsx';
              link.click();
              this.$message.success('导出成功')
            }
          } catch (err) {
            console.log(err);
            const url = URL.createObjectURL(blob);
            const link = document.createElement('a');
            link.href = url;
            link.download = '设备停用/启用.xlsx';
            link.click();
            this.$message.success('导出成功')
          }
        }
        this.$download.saveAs(blob, '设备停用/启用.xlsx')
      }).finally(() => {
        this.outLoading = false
      })
@@ -521,7 +470,7 @@
      this.getDeviceStatePage(this.clickNodeVal.value);
    },
    getDeviceStatePage(deviceId) {
      this.$axios.get(this.$api.deviceCheck.getDeviceStatePage + '?deviceId=' + deviceId + "&size=" + this.search.size + "&current=" + this.search.current + "&processNumber=" + this.search.processNumber).then(res => {
      getDeviceStatePage({ deviceId, ...this.search }).then(res => {
        if (res.code == 200) {
          this.tableDatalist = res.data.records
          this.search.total = res.data.total
@@ -553,98 +502,10 @@
</script>
<style scoped>
.dialog-content {
  max-height: 70vh;
  /* 设置最大高度 */
  overflow-y: auto;
  /* 启用垂直滚动 */
}
h4 {
  font-weight: 400;
  font-size: 16px;
  margin: 10px 0;
}
/*
保存提交按钮样式
*/
h4 .title {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
h4 .title .line {
  display: inline-block;
  width: 3px;
  height: 16px;
  background: #3A7BFA;
  margin-right: 4px;
}
.tables {
  width: 100%;
  height: calc(100vh - 15em);
}
.el-from {
  max-width: 400px;
  margin: 0 auto;
}
.form-row {
  display: flex;
  justify-content: space-between;
}
.form-row .el-form-item {
  flex: 1;
  /* 每个表单项占据相同比例的空间 */
  margin-right: 100px;
  /* 可选:为右侧元素添加间距 */
}
/* 移除最后一个元素的右边距 */
.form-row .el-form-item:last-child {
  margin-right: 0;
}
.search {
  background-color: #fff;
  margin: 10px 0;
  height: 46px;
  display: flex;
  align-items: center;
  position: relative;
}
.search_thing {
  display: flex;
  align-items: center;
  height: 40px;
}
.search_label {
  width: 70px;
  font-size: 14px;
  text-align: right;
}
.search_input {
  width: 70%;
}
.btns {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translate(0, -50%);
}
.form .search_label {
  width: 120px;
  justify-content: space-between;
  margin-top: 10px;
}
</style>