mes-sdai-admin-backend-ui/src/view/performance/QualityAssessment/cropdefective.vue

<template>
    <div>
      <!-- 左侧树形结构 -->
      <el-container>
        <layout-sider :resize-directions="['right']" :width="220" style="margin-right: 10px;" >
           <div class="JKWTree-tree" style="height: 70vh;">
             <h3>裁剪次片质量维护</h3>
             <el-tree :data="treeData" highlight-current @node-click="handleNodeClick"/>
           </div>
         </layout-sider>
      <el-container>
            
          <el-main>
            <!-- 按钮区域 -->
            <div class="gva-table-box">
              <el-form-item>
                <el-input v-model="positionvalue" @keydown="keydown_onSearch($event)" placeholder="输入工单编号或产品名称" style="width: 180px;" />
                <el-button type="primary" class="search" icon="search" @click="onSearch"></el-button>
                <el-button type="primary" class="bt" icon="plus" @click="onAdd">新增次品</el-button>
                <el-button type="primary" class="bt" icon="delete" @click="Del">删除</el-button>
                <div style="margin-left: auto;">
                  <el-button type="primary" :icon="Download" @click="exportExcel">导出到Excel</el-button>
                </div>
              </el-form-item>
              <!-- 数据展示 -->
              <el-table ref="multipleTable" style="width: 100%;height: 70vh;" tooltip-effect="dark" :data="tableData" row-key="ID"
                highlight-current-row="true"   border @selection-change="handleSelectionChange" 
                :row-style="{ height: '20px' }"  :header-cell-style="{ padding: '0px' }"
                :cell-style="{ padding: '0px' }" :header-row-style="{ height: '20px' }"
                :show-overflow-tooltip="true" @row-click="Click" @row-dblclick="doubleClick">
                <el-table-column type="selection" width="55" />
                <!-- 循环渲染列 -->
                  <el-table-column
                    v-for=" column in tableColumns "
                    :key="column.prop"
                    :prop="column.prop"
                    :label="column.label"
                    :width="column.width"
                    sortable
                    show-overflow-tooltip="true"/>
              </el-table>
              <!-- 分页 -->
              <div class="gva-pagination">
                <el-pagination layout="total, sizes, prev, pager, next, jumper" v-model:current-page="page"
                  v-model:page-size="limit"
                  :page-sizes="[10, 30, 50, 100]" :total="total" @current-change="handleCurrentChange"
                  @size-change="handleSizeChange" />
              </div>
            </div>
			
		<!-- 弹出框 -->
		  <el-dialog v-model="dialogFormVisible" :before-close="closeDialog" :title="type === 'create' ? '裁剪次片汇总报工页面' : '裁剪次片汇总报工修改'"
		    destroy-on-close style="width: 90%; height: 90%; margin-top: 3%;">
		    
		    <el-form :model="formData" label-position="right" ref="elFormRef":rules="rule" label-width="120px">
		      
		      <el-row :gutter="24" style="margin-bottom: 20px;" >
		        <!-- 日期选择框 -->
		        <el-col :span="8">
		          <el-form-item label="日期">
		            <el-date-picker v-model="DefectiveformData['Sys_rq']" id="日期" style="width: 100%;" type="date" />
		          </el-form-item>
		        </el-col>
		      </el-row>
		
		      <!-- 新增一行按钮 -->
		      <el-button type="primary" @click="addRow" style="margin-left: 20px; margin-bottom: 20px;">新增一行</el-button>
		
		      <el-row :gutter="24">
		        <el-col :span="19" style="margin-bottom: 15px;">
		          <!-- 表格头部 -->
		        <div style="display: flex; justify-content: space-between; margin-bottom: 10px;">
		          <span style="flex: 1;">订单编号|款号</span>
		          <span style="flex: 1;">面料分类|面料名称</span>
				  <span style="flex: 1;">颜色</span>
		          <span style="flex: 1;">款号|款式</span>
		          <span style="flex: 1;">次片数量</span>
				  <span style="flex: 1;">次片问题</span>
				  <span style="flex: 1;">备注</span>
		          <span style="flex: 1;">报工小组</span>
		        </div>
		        </el-col>
		        
		        <!-- 使用v-for渲染行 -->
		        <el-col v-for="(row, index) in rows" :key="index" :span="19" style="margin-bottom: 10px; overflow-x: auto;">
		          <div style="display: flex; justify-content: space-between; align-items: center;">
		            <el-input style="width: 220px;" placeholder="Enter回车" v-model="row.gdbh" @blur="getGxMcsubmit($event, index)" />
		            <el-input style="width: 140px;" v-model="row.khks" />
					<el-input style="width: 140px;"  v-model="row.color" />
					<el-input style="width: 140px;"  v-model="row.cpsl" />
					<el-input style="width: 140px;"  v-model="row.color" />
					<el-input style="width: 140px;" v-model="row.color" />
		            <el-input style="width: 140px;" v-model="row.bgxz" />
					<el-button type="primary" @click="removeRow(index)" style="font-size: 18px;">复制本条</el-button>
		            <el-button type="danger" @click="removeRow(index)" style="font-size: 18px;">移除</el-button>
		          </div>
		        </el-col>
		      </el-row>
		      
		    </el-form>
		
		    <template #footer>
		      <div class="dialog-footer" style="width: 100%;">
		        <el-button @click="closeDialog" style="width: 100px;height: 40px;">关 闭</el-button>
		        <el-button type="primary" @click="enterDialog"  style="width: 100px;height: 40px;">确 定</el-button>
		      </div>
		    </template>
		  </el-dialog>

  
          </el-main>
        </el-container>
      </el-container>
    </div>
  </template>
<script setup>
// 全量引入格式化工具 请按需保留
import { ElMessage, ElMessageBox, LAST_KEYS } from 'element-plus'
import { Search, Refresh, Download } from '@element-plus/icons-vue'
import { ref, reactive, nextTick, onMounted, onBeforeMount } from 'vue'
import { Layout, LayoutContent, LayoutHeader, LayoutSider } from '@arco-design/web-vue'
import { useUserStore } from '@/pinia/modules/user'
//获取登录用户信息
const userStore = useUserStore()
const _username = ref('')
_username.value = userStore.userInfo.userName + '/' + userStore.userInfo.nickName
console.log('获取用户名称',_username.value)
//全局获取当前日期
const today = new Date();
const year = today.getFullYear();
const month = String(today.getMonth() + 1).padStart(2, '0'); // 月份从 0 开始，需要补零
const day = String(today.getDate()).padStart(2, '0');
const hours = String(today.getHours()).padStart(2, '0');
const minutes = String(today.getMinutes()).padStart(2, '0');
const seconds = String(today.getSeconds()).padStart(2, '0');
const currentDate = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
const currentDates = `${year}-${month}-${day}`;

// 侧边栏数据请求
const treeData = reactive([]);
const getTabdata = async () => {
 
}
getTabdata();



/**
 * 新增次品
*/
const dialogFormVisible = ref(false);




const DefectiveformData = reactive({
  Sys_rq: '' ,
  bgxz: '裁剪01z组'
});
const rule = {}; // 表单验证规则（如果有）
const rows = reactive([
  { gdbh: '', yjGx: '', gxmc: '', cpmc: '' }, // 初始一行
]);

// 方法：新增一行
const addRow = () => {
  rows.push({ gdbh: '', yjGx: '', gxmc: '', cpmc: '' });
};

//新增按钮
const onAdd = async () => {
	dialogFormVisible.value = true
	DefectiveformData.Sys_rq = currentDates
}

// 键盘事件
const ent1 = (event, index) => {
  // 处理键盘事件
  console.log(event, index);
};

// 失去焦点事件
const getGxMcsubmit = async (row) => {
  // 处理失去焦点事件
  console.log('处理失去焦点', row);
};

// 关闭弹窗
const closeDialog = () => {
  dialogFormVisible.value = false;
};

// 提交确认
const enterDialog = () => {
  console.log('确认提交', formData, rows);
};

// 移除行
const removeRow = (index) => {
  rows.splice(index, 1);
};


</script>
  
  <style>
  .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;
  }
  
  /* 选中某行时的背景色*/
  .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;
  }
  /* tree组件背景高亮 */
  :deep(.el-tree-node:focus > .el-tree-node__content){
      background: #ff80ff !important;
  }

  /* 屏幕宽度小于 768px 时调整样式 */
  :deep(@media (max-width: 1280px)) {
    .el-dialog {
      width: 90vw;
      height: 90vh;
    }
  }

  </style>