纪念一下自己写的前端

第一次自己写前端，纪念一下

vue

<template>
  
  <div class="app-container">
  <!-- 条件查询 -->
  <el-form :inline="true" :model="queryParams" class="demo-form-inline">
      <el-form-item label="设备SN">
        <el-input v-model="queryParams.term_sn" placeholder="请输入设备SN"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="getList">查询</el-button>
        <el-button @click="resetQueryParams">重置</el-button>
      </el-form-item>
    </el-form>



    <el-button type="primary" @click="piliang">批量质检</el-button>


    <!-- 设备质检列表 -->
    <el-table ref="packageTable"  v-loading="loading" :data="packageList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="设备SN" align="center" prop="term_sn" />
      <el-table-column label="料品编号" align="center" prop="out_term_ship_bom_no" />
      <el-table-column label="料品名称" align="center" prop="out_term_ship_bom_name" />
      <el-table-column label="整机质检人" align="center" prop="devid_qi_cname" />
      <el-table-column label="整机质检时间" align="center" prop="devid_qi_time" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.devid_qi_time, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="整机质检状态" align="center" prop="devidqi_state" />
      <el-table-column label="设备状态" align="center" prop="prod_state" />
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button size="mini" type="text" icon="el-icon-view" @click="handleView(scope.row)">设备质检</el-button>
          <el-button size="mini" type="text" icon="el-icon-view" @click="MaInfomation(scope.row)">质检详情</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 数据为空提示 -->
    <div v-if="!loading && packageList.length === 0" class="no-data">
      <el-empty description="暂无数据" />
    </div>

    <!-- 分页组件 -->
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 质检详情对话框 -->
    <el-dialog :visible.sync="tanchu.MaInfomation" width="800px" title="质检详情" @close="handleDialogClose">
      <el-card class="box-card" shadow="never" style="border: none;">
        <div slot="header" class="clearfix">
          <span>基本信息</span>
        </div>
        <div>
          <el-row>
            <el-col :span="12">
              <strong>质检人:</strong> {{ zjzjInfo.devid_qi_cname }}
            </el-col>
            <el-col :span="12">
              <strong>质检时间:</strong> {{ parseTime(zjzjInfo.devid_qi_time, '{y}-{m}-{d} {h}:{i}:{s}') }}
            </el-col>
          </el-row>
        </div>
      </el-card>

      <el-card class="box-card" shadow="never" style="border: none;">
        <div slot="header" class="clearfix">
          <span>检验信息</span>
        </div>
        <div>
          <el-table :data="zjjyInfoA" border>
            <el-table-column label="编号" prop="code" />
            <el-table-column label="检验项目" prop="name" />
            <el-table-column label="检验要求" prop="inspect_ask" />
            <el-table-column label="检验结果">
              <template slot-scope="scope">
      <el-tag :type="scope.row.result">{{scope.row.result}}</el-tag>
    </template>
            </el-table-column>
          </el-table>
        </div>
      </el-card>

 <!-- 配置清单部分 -->
 <el-card class="box-card" shadow="never" style="border: none;">
        <div slot="header" class="clearfix">
          <span>配置清单</span>
        </div>
        <div>
          <el-table :data="SelectPj" border>
            <el-table-column label="料品编号" prop="out_order_bom_no" />
            <el-table-column label="料品名称" prop="out_order_bom_name" />
            <el-table-column label="型号" prop="model" />
            <el-table-column label="子组件SN" prop="sub_component_sn" />
            <el-table-column label="绑定用户" prop="bind_uid" />
            <el-table-column label="绑定时间" prop="bind_time">
              <template slot-scope="scope">
                <span>{{ parseTime(scope.row.bind_time, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-card>
<!-- 
      <div>
              <div class="blockblue"></div>
              附件信息
            </div>
            <el-table :data="zjfjInfo" style="margin-top: 20px;">
      <el-table-column prop="file_name" label="文件名" align="center"></el-table-column>
      <el-table-column prop="size" label="文件大小" align="center">
        <template v-slot="scope">
          {{ formatFileSize(scope.row.size) }}
        </template>
      </el-table-column>
      <el-table-column prop="tran_time" label="上传时间" align="center"></el-table-column>
      <el-table-column prop="tran_peo" label="上传人员" align="center"></el-table-column>
      <el-table-column label="操作" align="center">
        <template v-slot="scope">
          <el-button class="green-icon-button" type="text" icon="el-icon-download" @click="downloadFile(scope.row)">
          </el-button>
        </template>
      </el-table-column>
    </el-table>
            <div>
            </div> -->
<div>
  <el-table :data="zjfjInfo" style="margin-top: 20px;">
                <el-table-column prop="file_name" label="文件名" align="center"></el-table-column>
                <el-table-column prop="size" label="文件大小" align="center"> </el-table-column>
        
              
               
                <el-table-column prop="tran_time" label="上传时间" align="center"></el-table-column>
                <el-table-column prop="tran_peo" label="上传人员" align="center"></el-table-column>
                <el-table-column label="操作" align="center">
                  <template slot-scope="scope">
                    <el-button class="green-icon-button" type="text" icon="el-icon-download"
                      @click="downloadFile(scope.row)">
                    </el-button>
                  </template>
                </el-table-column>
      </el-table>

    </div>
    </el-dialog>


  



    <!-- 质检对话框 -->
    <el-dialog :visible.sync="tanchu.handleView" width="800px" title="设备质检" @close="handleDialogClose">
      <el-card class="box-card" shadow="never" style="border: none;">
        <div slot="header" class="clearfix">
          <span>基本信息</span>
        </div>
        <div>
          <el-row>
            <el-col :span="12">
              <strong>质检人:</strong> {{ user.devid_qi_cname }}
            </el-col>
            <el-col :span="12">
              <strong>质检时间:</strong> {{ user.devid_qi_time }}
            </el-col>
          </el-row>
        </div>
      </el-card>


      <!-- 检验信息部分 -->
      <el-card class="box-card" shadow="never" style="border: none;">
        <div slot="header" class="clearfix">
          <span>检验信息</span>
        </div>
        <div style="margin-top: 10px;margin-bottom: 10px;;height: 400px;overflow-y: auto;" class="table">
          <el-button type="primary" @click="setAllResultsToOk">一键质检</el-button>
              <el-table :data="inspectInfo" style="width: 750px;" height="400">
                <el-table-column prop="code" label="编号" width="50" align="center"></el-table-column>
                <el-table-column prop="name" label="检验项目" width="150" align="center"></el-table-column>
                <el-table-column prop="inspect_ask" label="检验要求" width="400"></el-table-column>
                <el-table-column label="检验结果" width="100" align="center">
                   <template slot-scope="scope">
                <el-select v-model="scope.row.result" placeholder="请选择">
                  <el-option v-for="item in resultOptions" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
              </template>
                </el-table-column>
              </el-table>
            </div>
        
      </el-card>

      <!-- 配置清单部分 -->
      <el-card class="box-card" shadow="never" style="border: none;">
        <div slot="header" class="clearfix">
          <span>配置清单</span>
        </div>
        <div>
          <el-table :data="configList" border>
            <el-table-column label="料品编号" prop="out_order_bom_no" />
            <el-table-column label="料品名称" prop="out_order_bom_name" />
            <el-table-column label="型号" prop="model" />
            <el-table-column label="子组件SN" prop="sub_component_sn" />
            <el-table-column label="绑定用户" prop="bind_uid" />
            <el-table-column label="绑定时间" prop="bind_time">
              <template slot-scope="scope">
                <span>{{ parseTime(scope.row.bind_time, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-card>

      <!-- 上传附件部分 -->
      <el-card class="box-card" shadow="never" style="border: none;">
        <h3 slot="header">上传附件</h3>
        <el-upload
          class="upload-demo"
          ref="uploadRef"
          action="http://localhost:8080/quality/PaOss/ImageUpload"
          :data="{ term_sn: term_snA }" 
          :on-success="handleUploadSuccess"
          :on-error="handleUploadError"
          :before-upload="beforeUpload"
          :limit="5"
        >
          <el-button size="small" type="primary">选取文件</el-button>
        </el-upload>
        <p class="upload-notice">
          请上传大小不超过 20MB 格式为 pdf、jpg、mp4 的文件。严禁上传包含色情、暴力、反动等相关违法信息的文件。
        </p>
      </el-card>
      <div slot="footer" class="dialog-footer">
        <el-button @click="handleDialogClose">取消</el-button>
        <el-button type="primary" @click="submitQuality">提交</el-button>
      </div>
    </el-dialog>





<!-- 批量质检 -->
    <el-dialog :visible.sync="tanchu.piliang" width="800px" title="批量质检" @close="handleDialogClose">
      <el-card class="box-card" shadow="never" style="border: none;">
        <div slot="header" class="clearfix">
          <span>基本信息</span>
        </div>
        <div>
          <el-row>
            <el-col :span="12">
              <strong>质检人:</strong> {{ user.devid_qi_cname }}
            </el-col>
            <el-col :span="12">
              <strong>质检时间:</strong> {{ user.devid_qi_time }}
            </el-col>
          </el-row>
        </div>
      </el-card>

      <el-card class="box-card" shadow="never" style="border: none;">
        <span>产品信息</span>

        <el-table v-loading="loading" :data="TermSnList" @selection-change="handleSelectionChange">
  <el-table-column type="selection" width="55" align="center" />
  <el-table-column label="设备SN" align="center" prop="term_sn" />
  <el-table-column label="料品编号" align="center" prop="out_term_ship_bom_no" />
  <el-table-column label="料品名称" align="center" prop="out_term_ship_bom_name" />
  <el-table-column label="整机质检人" align="center" prop="devid_qi_cname" />
  <el-table-column label="整机质检时间" align="center" prop="devid_qi_time" width="180">
    <template slot-scope="scope">
      <span>{{ parseTime(scope.row.devid_qi_time, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
    </template>
  </el-table-column>
  <el-table-column label="整机质检状态" align="center" prop="devidqi_state" />
</el-table>


   <!-- 数据为空提示 -->
   <div v-if="!loading && TermSnList.length === 0" class="no-data">
      <el-empty description="暂无数据" />
    </div>

      </el-card>
<!-- 
 检验信息部分 -->
 <el-card class="box-card" shadow="never" style="border: none;">
  <div slot="header" class="clearfix">
    <span>检验信息</span>
  </div>
  <div style="margin-top: 10px; margin-bottom: 10px; height: 400px; overflow-y: auto;" class="table">
    <el-button type="primary" @click="setAllResultsToOkA">一键质检</el-button>
    <el-table :data="inspectInfoA" style="width: 750px;" height="400">
      <el-table-column prop="code" label="编号" width="50" align="center"></el-table-column>
      <el-table-column prop="name" label="检验项目" width="150" align="center"></el-table-column>
      <el-table-column prop="inspect_ask" label="检验要求" width="400"></el-table-column>
      <el-table-column label="检验结果" width="100" align="center">
        <template slot-scope="scope">
          <el-select v-model="scope.row.result" placeholder="请选择">
            <el-option v-for="item in resultOptions" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </template>
      </el-table-column>
    </el-table>
  </div>
</el-card>

      
  <!-- 上传附件部分 -->
  <el-card class="box-card" shadow="never" style="border: none;">
        <h3 slot="header">上传附件</h3>
        <el-upload
          class="upload-demo"
          ref="uploadRef"
          action="http://localhost:8080/quality/PaOss/ImageUpload"
          :data="{ term_sn: term_snA }" 
          :on-success="handleUploadSuccess"
          :on-error="handleUploadError"
          :before-upload="beforeUpload"
          :limit="5"
        >
          <el-button size="small" type="primary">选取文件</el-button>
        </el-upload>
        <p class="upload-notice">
          请上传大小不超过 20MB 格式为 pdf、jpg、mp4 的文件。严禁上传包含色情、暴力、反动等相关违法信息的文件。
        </p>
      </el-card>
      <div slot="footer" class="dialog-footer">
        <el-button @click="handleDialogCloseA">取消</el-button>
        <el-button type="primary" @click="submitQualityA">提交</el-button>
      </div>

</el-dialog>



  </div>


</template>

<script>
import { listPackage, getInspect, getConfigList, getUser, insertQuality,serjyInfoA ,serzjfjInfo,serZhengji,updateTermSn,piliang,getTermSnList,updateInspectList} from "@/api/package/machine";
import { parseTime } from "@/utils/index";

export default {
  name: "HomePage",
  data() {
    return {
      tanchu: {
        handleView: false,
        MaInfomation: false,
        piliang:false,
      },
      loading: true,
      packageList: [],
      TermSnList:[],
      total: 0,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        termSn: null,
        devidqiState: null,
      },
      showDetailPage: false, // 控制质检对话框的显示
      selectedinfo: {}, // 当前选中的质检详情
      inspectInfo: [], // 存储检验信息
      configList: [], // 存储配置清单
      user: {}, // 当前操作人
      resultOptions: [
        { value: 'ok', label: 'OK' },
        { value: 'ng', label: 'NG' }, // 修改为 NG
      ],
      selectinspect:[],
      zjjyInfoA:[],
      SelectPj:[],
      zjfjInfo:[],
      zjzjInfo:[],
      term_snA: "", // 你的 term_sn 数据
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        term_sn: '',  // 用于查询的设备SN
      },
      loading: true,
      packageList: [],
      total: 0,
      TermSnList:[],
      term_snB: '0712-10', //给批量的
      inspectInfoA:[],
      term_sn_list:[],
    };
  },
  
  created() {
    this.getList();
    
  },
  methods: {
    getList() {
      this.loading = true;
      listPackage(this.queryParams)
        .then(response => {
          this.packageList = response.rows;
          this.total = response.total;
          this.loading = false;
        })
        .catch(error => {
          this.loading = false;
          console.error('获取设备质检列表时出错:', error);
        });
    },
    resetQueryParams() {
      this.queryParams = {
        pageNum: 1,
        pageSize: 10,
        term_sn: '',
      };
      this.getList();
    },



    downloadFile(row) {
      // 构造下载链接，假设文件对象中有一个 downloadUrl 属性存储下载链接
      const downloadUrl = row.path;
      console.log('111', downloadUrl)

 

// 如果下载链接存在
if (downloadUrl) {
        // 创建一个隐藏的 <a> 元素
        const link = document.createElement('a');
        link.style.display = 'none';
        link.href = downloadUrl;
        link.setAttribute('download', row.file_name); // 设置下载文件的名称

        // 将创建的 <a> 元素添加到 DOM 中
        document.body.appendChild(link);

        // 触发点击事件，执行下载操作
        link.click();

        // 下载完成后移除 <a> 元素
        document.body.removeChild(link);
      } else {
        // 处理下载链接不存在的情况，例如给出提示信息
        this.$message.error('文件下载链接不存在！');
      }
    },


    //质检详情
    MaInfomation(row) {
      this.selectedinfo = { ...row };
      this.tanchu.MaInfomation = true;
      serjyInfoA({ term_sn: row.term_sn }).then(response => {
        console.log('检验信息：', response)
        this.zjjyInfoA = response
      });

      getConfigList(row.term_sn)
        .then(response => {
          console.log('配置清单：', response);
          this.SelectPj = response;
        });
        
        serZhengji({ term_sn: row.term_sn }).then(response => {
        console.log('整机质检信息：', response)
        this.zjzjInfo = response[0]
        serzjfjInfo({ file_ids: response[0].dq_info_file_ids }).then(response => {
          console.log('整机附件信息：', response.data)
          this.zjfjInfo = response.data

        })
    
      })
  },
  updateTermSn(newTermSn) {
    this.term_sn = newTermSn;
  },

    handleView(row) {
      this.selectedItem = { ...row };

      console.log('Selected row:', row);
      this.tanchu.handleView = true;
      this.showDetailPage = true;
      this.currentDetail = row;
      getInspect(row.term_sn)
        .then(response => {
          this.inspectInfo = response;
          this.term_snA = this.selectedItem.term_sn; // 直接赋值为字符串
        })
        .catch(error => {
          console.error('获取检验信息时出错:', error);
        });

      getConfigList(row.term_sn)
        .then(response => {
          console.log('配置清单：', response);
          this.configList = response;
        })
        .catch(error => {
          console.error('获取配置清单时出错:', error);
        });

      getUser()
        .then(response => {
          this.user = response.data;
        })
        .catch(error => {
          console.error('获取当前操作人时出错:', error);
        });
    },
    handleDialogClose() {
      this.tanchu.handleView = false;
      this.tanchu.MaInfomation = false;
      this.selectedinfo = {};
      this.inspectInfo = [];
      this.inspectInfoA = [];
      this.configList = [];
      this.user = {};
    },


      async submitQualityA(){
        try {
        // const tableDataA = this.inspectInfo.map(item => ({
        //   code: item.code,
        //   name: item.name,
        //   inspect_ask: item.inspect_ask,
        //   result: item.result,
        // }));
  
     const termSnList = this.term_sn_list; // 获取 term_sn 列表
     console.log(termSnList,"aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa")
     const tableData = this.inspectInfoA.map(item => ({
          code: item.code,
          name: item.name,
          inspect_ask: item.inspect_ask,
          result: item.result,
        }));
        console.log(tableData,"aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa")
// 创建一个包含所有 Sub 对象的数组
const subList = termSnList.map(term_sn => ({
  inspect_list: tableData,
  devid_qi_cname: this.user.devid_qi_cname,
  devid_qi_time: this.user.devid_qi_time,
  devidqi_state: this.devidqi_state,
  term_sn: term_sn // 将 term_sn 绑定到每个 Sub 对象
}));
console.log(subList,"aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa")
// 发送批量提交的请求
await updateInspectList(subList); // 直接将 subList 传给后端

      } catch (error) {
        this.$message.error('质检信息提交失败');
        console.error(error,batchData);
      }
      },







    async submitQuality() {
      try {
        const tableData = this.inspectInfo.map(item => ({
          code: item.code,
          name: item.name,
          inspect_ask: item.inspect_ask,
          result: item.result,
        }));
        const packageIS = {
          inspect_list: tableData,
          term_sn: this.selectedItem.term_sn,
          devid_qi_cname: this.user.devid_qi_cname,
          devid_qi_time: this.user.devid_qi_time,
          devidqi_state: this.selectedItem.devidqi_state,
        };

        await insertQuality(packageIS);

        this.$message.success('质检信息提交成功');
        this.handleDialogClose();
      } catch (error) {
        this.$message.error('质检信息提交失败');
        console.error(error);
      }
    },
    setAllResultsToOk() {
      this.inspectInfo.forEach(item => {
        item.result = 'ok';
      });
    },
    setAllResultsToOkA() {
      this.inspectInfoA.forEach(item => {
        item.result = 'ok';
      });
    },
    piliang(){
      
// 获取表格中选中的行
const selectedRows = this.$refs.packageTable.selection; // 使用 ref 获取选中的行

// 从选中的行中提取 term_sn
const term_sn_list = selectedRows.map(row => row.term_sn);
this.term_sn_list = term_sn_list; // 设置 term_sn_list
  // 设置 term_sn_list 以便进行批量处理
  this.term_sn_list = term_sn_list;
   // 显示批量质检对话框
   this.tanchu.piliang = true;
      this.tanchu.piliang = true;
      getUser()
        .then(response => {
          this.user = response.data;
        })

        
        // 获取设备质检列表
    getTermSnList(this.term_sn_list.join(',')) // 将 term_sn_list 作为对象传递
      .then(response => {
        console.log('批量质检数据：', response); // 添加日志检查数据
        this.TermSnList = response;
        this.total = response.total;
        this.loading = false;
      })
      .catch(error => {
        this.loading = false;
        console.error('获取设备质检列表时出错:', error);
      });

      getInspect()
        .then(response => {
          this.inspectInfoA = response;
          console.log(inspectInfoA,aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa)
        })
        .catch(error => {
          console.error('获取检验信息时出错:', error);
        });

  },


  },
};
</script>

<style scoped>
.no-data {
  text-align: center;
  padding: 20px;
}
</style>

api:

import request from '@/utils/request';

// 查询设备-质检明细列表
export function listPackage(query) {
  return request({
    url: '/quality/machine/homepage',
    method: 'get',
    params: query
  });
}

// 查询质检里面的检验信息
export function getInspect(term_sn) {
  return request({
    url: '/quality/machine/Inspect',
    method: 'get',
    params: { term_sn: term_sn }
  });
}

// 查询配置清单
export function getConfigList(term_sn) {
  return request({
    url: '/quality/machine/configlist',
    method: 'get',
    params: { term_sn: term_sn }
  });
}

// 获取当前操作人姓名
export function getUser() {
  return request({
    url: '/quality/machine/selectUser',
    method: 'get'
  });
}
// 上传文件
export function uploadFile(data) {
  return request({
    url: '/quality/PaOss/ImageUpload',  // 确保这个路径是正确的
    method: 'post',
    data,
    headers: {
      'Content-Type': 'multipart/form-data'  // 确保使用正确的 Content-Type
    }
  });
}

// 查询附件信息！
export function serzjfjInfo(file_ids) {
  return request({
    url: '/quality/oss/ImageShow',
    method: 'get',
    params: file_ids
  })
}

// 插入质检信息
export function insertQuality(data) {
  return request({
    url: '/quality/machine/updateInspect',
    method: 'post',
    data
  })
}

// 查询整机检验质检！
export function serjyInfoA(term_sn) {
  return request({
    url: '/quality/machine/InspectA',
    method: 'get',
    params: term_sn
  })
}
// 查询整机质检！
export function serZhengji(term_sn) {
  return request({
    url: '/quality/machine/homepage/limit',
    method: 'get',
    params: term_sn
  })
}
export function listPackageA(query) {
  return request({
    url: '/quality/machine/homepage/limit',
    method: 'get',
    params: query
  });
}

export function getTermSnList(term_sn_list) {
  return request({
    url: '/quality/machine/byTermSn',
    method: 'get',
    params: {
      term_sn_list: term_sn_list // 直接传递逗号分隔的字符串
    }
  });
}


// 插入质检信息
export function updateInspectList(data) {
  return request({
    url: '/quality/machine/updateInspectList',
    method: 'post',
    data
  })
}