Merge branch 'master' of http://111.30.93.211:10101/r/supipe

张晓波

2023-10-18 c84b78391bbc6ff68ffb4a1e55ff9b603fa697dc

 web/src/views/EquipmentManage/EquipSpot.vue

@@ -1,3 +1,324 @@
<template>
    <div>设备点检</div>
  <div class="main">
    <div class="main_header">
      <div class="header_item">
        <span class="header_label">设备编号：</span>
        <el-input v-model="bigDeviceName" clearable placeholder="请输入设备编号"></el-input>
      </div>
      <div class="header_item">
        <span class="header_label">点检日期：</span>
        <el-date-picker
          v-model="timeData"
          type="daterange"
          value-format="yyyy-MM-dd"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期">
        </el-date-picker>
      </div>
      <div class="header_item">
        <el-button icon="el-icon-search" v-if="showButton('search')" @click="searchSpotCheckList(true)">查询</el-button>
        <el-button class="search_btn" icon="el-icon-plus" v-if="showButton('insert')" @click="propInsert()">新增</el-button>
      </div>
    </div>
    <div class="main_content">
      <el-table
        v-loading="loading"
        :data="spotCheckList"
        height="100%">
        <el-table-column label="序号" align="center" >
          <template #default="scope">
            <div>
              <span>{{(pageNum - 1) * pageSize + scope.$index + 1}}</span>
            </div>
</template>
        </el-table-column>
        <el-table-column prop="bigDeviceName" label="设备名称" align="center" ></el-table-column>
        <el-table-column prop="bigDeviceModel" label="规格型号" align="center" ></el-table-column>
        <el-table-column prop="bigNumber" label="设备编号" align="center" show-overflow-tooltip></el-table-column>
        <el-table-column prop="bigTypeStr" label="设备类型" align="center" ></el-table-column>
        <el-table-column prop="checkTime" label="点检时间" align="center" ></el-table-column>
        <el-table-column prop="checkTypeName" label="点检类型" align="center" ></el-table-column>
        <el-table-column prop="adminUserName" label="责任人" align="center" ></el-table-column>
        <el-table-column prop="adminUserPhone" label="责任人电话" align="center" ></el-table-column>
        <el-table-column prop="checkContent" show-overflow-tooltip label="点检内容及结果" align="center" ></el-table-column>
        <el-table-column label="操作" align="center" >
          <template #default="{ row }">
            <el-button class="table_btn" size="mini" v-if="showButton('update')" @click="updateProp(row)">修改</el-button>
            <el-button class="delete_btn" size="mini" v-if="showButton('delete')" @click="deleteInfo(row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="main_footer">
      <el-pagination
        background
        @current-change="changePageNum"
        @size-change="changePageSize"
        :current-page="pageNum"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
    <!-- 新增 修改 -->
    <el-dialog
      class="prop_dialog"
      :title="asyncTitle ? '新增点检' : '修改点检信息'"
      :visible.sync="asyncSpot"
      width="35%">
      <el-form ref="form" :model="formSpot" :rules="rulesSpot" label-width="auto" class="rule_form">
        <el-form-item label="设备名称：" prop="deviceId">
          <el-select v-model="formSpot.deviceId" clearable placeholder="请选择设备" @change="selectDevice">
            <el-option
              v-for="item in deviceData"
              :key="item.bigDeviceId"
              :label="item.bigDeviceName"
              :value="item.bigDeviceId">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="规格型号：" prop="bigDeviceModel">
          <el-input v-model="formSpot.bigDeviceModel" disabled placeholder="请输入规格型号"></el-input>
        </el-form-item>
        <el-form-item label="设备编号：" prop="bigNumber">
          <el-input v-model="formSpot.bigNumber" disabled placeholder="请输入设备编号"></el-input>
        </el-form-item>
        <el-form-item label="设备类型：" prop="bigTypeName">
          <el-input v-model="formSpot.bigTypeName" disabled placeholder="请输入设备类型"></el-input>
        </el-form-item>
        <el-form-item label="开始时间：" prop="checkTime">
          <el-date-picker 
            v-model="formSpot.checkTime" 
            type="datetime"
            value-format="yyyy-MM-dd HH:mm:ss" 
            placeholder="请选择开始时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="点检类型：" prop="checkType">
          <el-select v-model="formSpot.checkType" clearable placeholder="请选择点检类型">
            <el-option
              v-for="item in checkTypeData"
              :key="item.dictId"
              :label="item.dictName" 
              :value="item.dictId">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="点检内容及结果：" prop="checkContent">
        <el-input 
          type="textarea" 
          v-model="formSpot.checkContent"
          clearable
          placeholder="请输入点检内容及结果">
        </el-input>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="asyncSpot = false">取 消</el-button>
        <el-button class="submit_btn" @click="asyncTitle ? submitInsertForm() : submitUpdateForm()">提 交</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { buttonPinia } from '../../pinia';
import { throttle } from '../../plugins/public';
  export default {
    data() {
      return {
        bigDeviceName: '',
        timeData: '',
        pageNum: 1,
        pageSize: 10,
        total: 0,
        loading: false,
        spotCheckList: [],
        asyncTitle: true, // true 新增 false 修改
        asyncSpot: false,
        formSpot: {},
        rulesSpot: {
               deviceId: [{
                  required: true,
                  message: '请选择设备',
                  trigger: ['blur', 'change']
               }]
            },
        deviceData: [],
        checkTypeData: []
      }
    },
    mounted() {
         this.searchSpotCheckList(true);
    },
    methods: {
      // 获取全部设备信息
      async getAllDeviceData() {
        const { data } = await this.$api.Device.getAllDeviceData();
        this.deviceData = data;
      },
         // 获取点检类型
      async getChackAllTypes(){
        const { data } = await this.$api.Dictionary.searchDictionary({
                  pageNum: 1,
            pageSize: 100000000,
            dictType: 'check_type'
            });
            this.checkTypeData = data.list;
      },
      // 查询设备点检列表信息
      searchSpotCheckList(bol) {
        if(bol) {
            this.pageNum = 1;
        }
        this.loading = true;
        this.spotCheckList = [];
        this.$api.Device.searchSpotCheckList({
               pageNum: this.pageNum,
               pageSize: this.pageSize,
               startTime: this.timeData ? this.timeData[0] : '',
               endTime: this.timeData ? this.timeData[1] : ''
        }).then(res => {
               if(res.success) {
                  this.total = res.data.total;
                  this.spotCheckList = res.data.list;
               }
               this.loading = false;
        }).catch(() => {
            this.loading = false;
        })
      },
      // 打开添加
      propInsert() {
        this.asyncTitle = true;
        this.asyncSpot = true;
      },
         // 选择设备获取设备信息
         selectDevice(data) {
            this.$set(this.formSpot, 'bigDeviceModel', '');
            this.$set(this.formSpot, 'bigNumber', '');
            this.$set(this.formSpot, 'bigTypeName', '');
            if(!data) return;
            this.$api.Device.detailsBigDevice({
               bigDeviceId: data
            }).then(res => {
               this.$set(this.formSpot, 'bigDeviceModel', res.data.bigDeviceModel);
               this.$set(this.formSpot, 'bigNumber', res.data.bigNumber);
               this.$set(this.formSpot, 'bigTypeName', res.data.bigTypeName);
            })
         },
         // 打开修改信息
         updateProp(row) {
            this.$api.Device.getSpotCheckDetail({
               id: row.id
            }).then((res) => {
               this.selectDevice(res.data.deviceId);
               this.$set(this.formSpot, 'id', res.data.id);
               this.$set(this.formSpot, 'deviceId', res.data.deviceId);
               this.$set(this.formSpot, 'checkTime', res.data.checkTime);
               this.$set(this.formSpot, 'checkType', res.data.checkType);
               this.$set(this.formSpot, 'checkContent', res.data.checkContent);
            });
            this.asyncTitle = false;
            this.asyncSpot = true;
         },
         // 删除设备点检信息
      deleteInfo(row) {
        this.$confirm("该操作将删除该点检信息，是否继续删除?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
       })
       .then(() => {
         this.$api.Device.deleteSpotCheckInfo({id: row.id})
        .then(res => {
          if(res.statusMsg === 'ok') {
            this.searchSpotCheckList(true);
            this.$message.success("删除成功！");
          } else {
            this.$message.warning(res.statusMsg);
          }
        })
       })
       .catch(() => {
         this.$message.warning("您已取消");
       })
      },
         // 提交添加信息
         submitInsertForm: throttle(function() {
            this.$refs.form.validate((valid) => {
               if(valid) {
                  const params = {};
                  params.deviceId = this.formSpot.deviceId;
                  params.checkTime = this.formSpot.checkTime;
                  params.checkType = this.formSpot.checkType;
                  params.checkContent = this.formSpot.checkContent;
                  params.fileList = [];
                  this.$api.Device.insertSpotCheckInfo(params).then(res => {
                     if(res.success) {
                        this.asyncSpot = false;
                        this.searchSpotCheckList(true);
                        this.$message.success('添加成功！');
                     } else {
                        this.$message.warning(res.statusMsg);
                     }
                  })
               }
            })
         }, 3000),
         // 提交添加信息
         submitUpdateForm: throttle(function() {
            this.$refs.form.validate((valid) => {
               if(valid) {
                  const params = {};
                  params.id = this.formSpot.id;
                  params.deviceId = this.formSpot.deviceId;
                  params.checkTime = this.formSpot.checkTime;
                  params.checkType = this.formSpot.checkType;
                  params.checkContent = this.formSpot.checkContent;
                  params.fileList = [];
                  this.$api.Device.updateSpotCheckInfo(params).then(res => {
                     if(res.success) {
                        this.asyncSpot = false;
                        this.searchSpotCheckList(true);
                        this.$message.success('修改成功！');
                     } else {
                        this.$message.warning(res.statusMsg);
                     }
                  })
               }
            })
         }, 3000),
      // 判断按钮权限信息
      showButton(str) {
        const pinia = buttonPinia();
        return pinia.$state.buttonInfo.includes(str);
      },
      // 切换页数
      changePageNum(page) {
        this.pageNum = page;
      },
      // 切换每页条数
      changePageSize(size) {
        this.pageSize = size;
      }
    },
    watch: {
      asyncSpot(bol) {
        if(bol) {
          this.getAllDeviceData();
               this.getChackAllTypes();
        } else {
          this.formSpot = {};
          this.$refs.form.resetFields();
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
@import '@/style/layout-main.scss';
</style>