mes-ai-admin-backend-ui/src/view/performance/QualityAssessment/QuestionClassification.vue

<template>
    <div>
      <layout>
        <layout-header>
          <div class="gva-table-box" style="margin-left: 20px;width: 97%;">
            <el-form-item>
              <el-button type="primary" icon="plus"  @click="addonclick" >新增问题分类</el-button>
            </el-form-item>
          </div>
        </layout-header>
  
        <layout>
  
          <!-- 右侧区域 -->
          <layout-content >
          <el-main>
            <div class="gva-table-box">
              <!-- 表格数据 -->
              <el-table ref="multipleTable" style="width: 100%;height: 76vh" tooltip-effect="dark"
                        :row-style="{ height: '30px' }"  :header-cell-style="{ padding: '0px' }"
                        :cell-style="{ padding: '0px' }" :header-row-style="{ height: '20px' }"
                        :data="tableData"  border row-key="ID"
                        size="small"
                        highlight-current-row="true" @row-dblclick="updateCompanyFunc"
                        @row-click="tableRowClick" :show-overflow-tooltip="true"
                        @selection-change="handleSelectionChange">
               <el-table-column  sortable align="center" label="问题类型" prop="问题类型"  width="220" />
               <el-table-column  sortable align="center" label="归属" prop="classification"  width="130" />
                <el-table-column align="center" label="操作" width="100">
              <template #default="{ row, $index }">
                <el-button @click="record_deleteRow(row,$index)" type="danger" size="small" 
					 style="font-size: 16px;padding: 0px;width: 60px;background-color: red;">
				        删除
				  </el-button>
              </template>
              </el-table-column>
              </el-table>
  
              <!-- 分页 -->
              <div class="gva-pagination">
                <el-pagination layout="total" :current-page="page" :page-size="pageSize"
                 :total="total" @current-change="handleCurrentChange" @size-change="handleSizeChange" />
              </div>
            </div>
			
            <el-dialog v-model="add_QuestiondialogFormVisible" :before-close="add_QuestioncloseDialog"
            style="width: 40%; max-height: 80%; overflow-y: auto; margin-top: 4%;"
            :title="'新增问题信息'" destroy-on-close>
			
            <el-form label-width="100px" :model="add_Questionformdata">
              <el-row :gutter="24" class="form-row">
                <el-col :span="20">
                  <el-form-item label="问题类型" class="mab" prop="keyOrder" id ='MAC地址' label-width='110'>
                    <el-input v-model="add_Questionformdata.问题类型"/>
                  </el-form-item>
                </el-col>
                <el-col :span="20">
                  <el-form-item label="归属" class="mab" prop="keyOrder" id ='MAC地址' label-width='110'>
                  <el-radio-group v-model="add_Questionformdata.归属" >
                    <el-radio label="次片" border >次片</el-radio>
                    <el-radio label="返工" border >返工</el-radio>
                  </el-radio-group>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
        
            <template #footer>
              <div class="dialog-footer" style="display: flex; justify-content: flex-end; padding: 10px;">
                <el-button type="primary" @click="add_QuestioncloseDialog">取消</el-button>
                <el-button type="primary" @click="add_QuestionenterDialog">确定</el-button>
              </div>
            </template>
          </el-dialog>
		  
          </el-main>
        </layout-content>
        </layout>
      </layout>
  
    </div>
  </template>
  <script setup>
  // 全量引入格式化工具 请按需保留
  import { Layout, LayoutSider, LayoutContent } from '@arco-design/web-vue';
  import { getProblemCategories,deleteProblemCategory,addProblemCategory } from '@/api/mes/job'
  import {ref, reactive} from 'vue'
  import { useUserStore } from '@/pinia/modules/user'
  import {ElMessage,ElMessageBox} from "element-plus";
  defineOptions({name: 'Company'})
  //获取登录用户信息
    const userStore = useUserStore()
    const _username = ref('')
    _username.value = userStore.userInfo.userName + '/' + userStore.userInfo.nickName
  // =========== 获取表格数据 ===========
  const tableData = ref([])
  const _gettabledata = async () => {
    // 调用接口获取数据
    const res = await getProblemCategories()
    console.log(res)
    if (res.code === 0) {
      tableData.value = res.data.data;
    }
  }
  _gettabledata();

  const add_QuestiondialogFormVisible = ref(false)
  const add_Questionformdata = reactive({
  问题类型: '',
  归属: '',
});

  // 新增
  const addonclick = () => {
    add_QuestiondialogFormVisible.value = true;
  }

  const add_QuestionenterDialog =  async  () => {
	//必填
	if(add_Questionformdata['问题类型'] === ''||add_Questionformdata['归属'] === ''){
		ElMessage({type: 'warning',message: '请将信息填写完整'})
		return false;
	}

    const add_Questionparams = {
      问题类型: add_Questionformdata.问题类型,
      classification: add_Questionformdata.归属,
      sys_id: userStore.userInfo.nickName,
    }
    console.log(add_Questionparams)
	const res = await addProblemCategory(add_Questionparams)
	if (res.code === 0) {
		ElMessage.success('新增成功')
		add_QuestioncloseDialog()
		_gettabledata()
	}
}  

  //新增颜色资料取消
  const add_QuestioncloseDialog = () => {
    add_QuestiondialogFormVisible.value = false
}
  

  // 更改状态
  const Status_change = async (row, index) => {
    console.log(row.UniqId,index) 
    const newStatus = row.status === '1' ? '0' : '1';
    // 调用接口获取数据
    const res = await updateQuestionDeviceTypes({UniqId:row.UniqId,status:newStatus})
    if (res.code === 0) {
      ElMessage.success('更改状态成功')
      _gettabledata();
    }
  }

  const record_deleteRow = async (row, index) => {
    console.log(row.id);

    // 使用 ElMessageBox 提示确认删除
    ElMessageBox.confirm('确定删除此行数据吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
    }).then(async () => {
        // 确认删除，检查UNIQID是否为空
        if (row.id === '' || row.id === null || row.id === undefined) {
            // 删除当前行数据
            resbomtableData.value.splice(index, 1);
            ElMessage({
                type: 'success',
                message: '删除成功'
            });
        } else {
            // 调用接口删除
			        const Bomdel_del = await deleteProblemCategory({ id:row.id});
            if (Bomdel_del.code === 0) {
                ElMessage({
                    type: 'success',
                    message: '删除成功'
                });
            } else {
                ElMessage({
                    type: 'error',
                    message: '删除失败'
                });
            }
            _gettabledata();
        }
    }).catch(() => {
        // 取消删除
        ElMessage({
            type: 'info',
            message: '已取消删除'
        }); 
    });
}

  // 分页相关的响应式变量
  const page = ref(1)
  const total = ref(0)
  const pageSize = ref(10)
  // 分页
  const handleCurrentChange = (val) => {
    page.value = val;
    _getStaffList();
  };
  
  </script>
  
  <style scoped>
  .form-container {
    display: flex;
    flex-wrap: wrap;
  }
  .form-column {
    /*flex: 1;*/
    margin-right: 15px; /* 调整列之间的间距 */
  }
  /* 左侧输入框宽度调整 */
  .form-column .el-form-item .el-input {
    width: 150px; /* 调整左侧输入框的宽度 */
  }
  
  :deep(.hui-plan-usage-lows  div) {
    color: #8c939d !important;
  }
  :deep(.lan-plan-usage-lows  div) {
    color: blue !important;
    font-weight: bold;
  }
 
  /* 媒体查询，根据需要调整断点 */
  @media screen and (max-width: 768px) {
    .form-column {
      flex: 1 0 100%; /* 在小屏幕下变成单列布局 */
      margin-right: 0;
    }
  }
  /*:deep(.el-table td .cell) {*/
  /*  line-height: 30px !important;*/
  /*}*/
  .JKWTree-container {
    display: flex;
  }
  .JKWTree-tree {
    /*width: 300px;*/
    background-color: #fff;
    padding: 10px;
    margin-right: 20px;
  }
  .JKWTree-tree h3 {
    font-size: 15px;
    font-weight: 700;
    margin: 10px 0;
  }
  .JKWTree-content {
    flex: 1;
  }
  /* 图片上传 */
  .upload-box {
    width: 200px;
    height: 200px;
    border: 2px dashed #e2e2e2;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    cursor: pointer;
  }
  .uploaded-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .upload-icon {
    font-size: 40px;
    color: #c0c4cc;
  }
  .file-input {
    display: none;
  }
  .el-table .warning-row {
    background: oldlace;
  }
  
  /* 选中某行时的背景色 */
  :deep(.el-table__body tr.current-row) > td {
    background: #ff80ff !important;
  }
  </style>
  <style scoped>
  :deep(.el-table td .cell) {
    line-height: 20px !important;
  }
  :deep(.el-tabs__header){
    margin-bottom: 0;
  }
  .search{
    margin-left: 0px !important;
    margin-right: 10px !important;
  }
  .bt{
    margin-left: 2px !important;
    padding: 3px !important;
    font-size: 12px;
  }
  .el-tabs__header{
    margin: 0px !important;
  }
  .gva-table-box{
    padding: 0px !important;
  }
  .mab{
    margin-bottom: 5px;
  }
  </style>