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

<template>
  <div>
    <!-- 左侧树形结构 -->
    <el-container>
      <!-- <el-aside width="250px">
        <div class="JKWTree-tree">
          <h3>机台生产日报表维护</h3>
          <el-tree :data="treeData" :props="defaultProps" highlight-current="true"
            @node-click="handleNodeClick"></el-tree>
        </div>
      </el-aside> -->

       <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" 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="copy-document" @click="onCountByGdbh">切换显示方式</el-button>
              <el-button type="primary" class="bt" icon="delete" @click="onDel">删除</el-button>
              <div style="margin-left: auto;">
                <el-button type="primary" class="bt" icon="download" @click="exportExcel">导出到Excel</el-button>
              </div>
            </el-form-item>
            <!-- 数据展示 -->
            <el-table ref="multipleTable" style="width: 100%;" tooltip-effect="dark" :data="tableData" row-key="ID"
              highlight-current-row="true" border 
			  :row-style="{ height: '0px' }"
			  :header-row-style="{ height: '20px' }"
			  :header-cell-style="{ padding: '0px' }"
			  :show-overflow-tooltip="true" @row-click="Click"
			  @selection-change="handleSelectionChange" @row-dblclick="doubleClick">
              <!-- <el-table-column type="selection" width="55" /> -->
              <el-table-column fixed align="left" sortable label="工单编号" prop="sczl_gdbh" width="105"/>
              <el-table-column fixed align="left" sortable label="产品名称" prop="Gd_cpmc"  width="250"/>
              <el-table-column align="left" sortable label="印件及工序" prop="jyno_gxmc"  width="120"/>
              <el-table-column align="left" sortable label="生产日期" prop="sczl_rq"  width="120"/>
              <el-table-column align="left" sortable label="机台" prop="sczl_jtbh"  width="77"/>
              <el-table-column align="left" sortable label="班组" prop="sczl_bzdh"  width="77"/>
              <el-table-column align="left" sortable label="流程单" prop="sczl_num"  width="91"/>
              <el-table-column align="left" sortable label="车头产量" prop="sczl_cl"  width="120"/>
              <el-table-column align="left" sortable label="色度数" prop="sczl_ms" width="91" />
			  <el-table-column align="left" sortable label="制程废" prop="sczl_zcfp" width="91" />
			  <el-table-column align="left" sortable label="次品" prop="sczl_zccp"  width="77"/>
			  <el-table-column align="left" sortable label="来料异常" prop="incomingerror"  width="105"/>
			  <el-table-column align="left" sortable label="装版工时" prop="sczl_装版工时"  width="105"/>
			  <el-table-column align="left" sortable label="保养工时" prop="sczl_保养工时"  width="105"/>
			  <el-table-column align="left" sortable label="打样工时" prop="sczl_打样工时"  width="105"/>
			  <el-table-column align="left" sortable label="异常停机工时" prop="sczl_异常停机工时"  width="133"/>
			  <el-table-column align="left" sortable label="设备运行工时" prop="sczl_设备运行工时"  width="133"/>
			  <el-table-column align="left" sortable label="组员编号1" prop="sczl_bh1" width="113"/>
			  <el-table-column align="left" sortable label="组员姓名1" prop="name1"  width="113"/>
			  <el-table-column align="left" sortable label="组员编号2" prop="sczl_bh2"  width="113"/>
			  <el-table-column align="left" sortable label="组员姓名2" prop="name2" width="113" />
			  <el-table-column align="left" sortable label="组员编号3" prop="sczl_bh3"  width="113"/>
			  <el-table-column align="left" sortable label="组员姓名3" prop="name3" width="113"/>
			  <el-table-column align="left" sortable label="组员编号4" prop="sczl_bh4" width="113"/>
			  <el-table-column align="left" sortable label="组员姓名4" prop="name4"width="113" />
			  <el-table-column align="left" sortable label="组员编号5" prop="sczl_bh5" width="113"/>
			  <el-table-column align="left" sortable label="组员姓名5" prop="name5" width="113"/>
			  <el-table-column align="left" sortable label="组员编号6" prop="sczl_bh6"width="113" />
			  <el-table-column align="left" sortable label="组员姓名6" prop="name6" width="113"/> 
			  <el-table-column align="left" sortable label="拆片联拼系数" prop="拆片联拼系数" width="133"/>
			  <el-table-column align="left" sortable label="拆片条小盒系数" prop="拆片条小盒系数" width="147"/>
			  <el-table-column align="left" sortable label="工价系数" prop="sczl_工价系数" width="105"/>
			  <el-table-column align="left" sortable label="日定额" prop="日定额" width="91"/>
			  <el-table-column align="left" sortable label="千件工价" prop="千件工价" width="105"/>
			  <el-table-column align="left" sortable label="补产标准" prop="补产标准" width="105"/>
			  <el-table-column align="left" sortable label="创建用户" prop="sys_id" width="120"/>
              <el-table-column align="left" sortable label="创建时间" prop="sys_rq" width="160"/>
              <el-table-column align="left" sortable label="修改时间" prop="mod_rq" width="160"/>
              <el-table-column align="left" sortable label="UNIQID" prop="UniqId" width="100"/>
			  <!-- <el-table-column align="left" label="table_type"  prop="table_type" width="120"/> -->
			<tbody>
			  <tr v-for="row in filteredRows" :key="row.sczl_gdbh">
				<td>{{ row.sczl_gdbh }}</td>
				<td>{{ row.sczl_rq }}</td>
				<td>{{ row.sczl_bzdh }}</td>
				<td>{{ row.sczl_cl }}</td>
				<!-- 其他列 -->
			  </tr>
			</tbody>
            </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 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 width="1200px">
            <!-- <el-scrollbar height="500px"> -->
            <el-form :model="formData" label-position="right" ref="elFormRef"  label-width="120px"  :rules="rule">
			   <el-row :gutter="24">
			     <el-col :span="6">
			       <el-form-item label="工单编号:" prop="flatFeed" class="mab">
                    <el-input v-model="formData.sczl_gdbh" id="工单编号" @blur="getCPMCsubmit()" @keydown="ent1($event)"  :clearable="true" />
			       </el-form-item>
			     </el-col>
			     <el-col :span="18">
			       <el-form-item label="产品名称:" prop="perTenThousand" class="mab" label-width="150">
					 <el-input v-model="formData.Gd_cpmc" id="产品名称"   :clearable="true" />
			       </el-form-item>
			     </el-col>
				 
			   </el-row>
				<el-row :gutter="24">
					<el-col :span="6">
					  <el-form-item label="印件号:" prop="flatFeed" class="mab">
					  <el-input v-model="formData.sczl_yjno" id="印件号" @focus="yjnoHandleFocus()" @blur="getYJMCsubmit()" @keydown="ent1($event)" :clearable="true" />
					  </el-form-item>
					</el-col>
					<el-col :span="18">
					  <el-form-item label="印件名称:" prop="perTenThousand" class="mab" label-width="150">
					  <el-input v-model="formData.yj_yjmc" id="印件名称"   :clearable="true" />
					  </el-form-item>
					</el-col>
				</el-row>
				
            <el-row :gutter="24">
              <el-col :span="14">
                <el-form-item label="工序名称:" prop="flatFeed" class="mab">
                <el-input v-model="formData.sczl_gxmc" id="工序名称" @focus="gxmcHandleFocus()" @blur="getGXsubmit()" @keydown="ent1($event)" :clearable="true" style="width: 350px;"  />
                <el-input v-model="formData.sczl_gxh" id="工序号" :readonly=true :clearable="true" style="width: 50px; margin-left: 10px;" />
                </el-form-item>
              </el-col>
			  <el-col :span="10">
			    <el-form-item label="工艺名称:" prop="perTenThousand" class="mab">
			  	  <el-input v-model="formData.sczl_type" id="工艺名称" :readonly=true :clearable="true" style="width: 200px;" />
			    </el-form-item>
			  </el-col>
            </el-row>
			  
			  <el-row :gutter="24">
			    <el-col :span="6">
			      <el-form-item label="日期:" prop="flatFeed" class="mab">
			  		<el-input type="date" max="9999-12-31" v-model="formData.sczl_rq" id="日期" @focus="rqHandleFocus()" @keydown="ent1($event)" :clearable="true" style="width: 200px;" />		  				  
			      </el-form-item>
			    </el-col>
			    <el-col :span="8">
			      <el-form-item label="机器:" prop="flatFeed" class="mab">
			      <el-input v-model="formData.sczl_jtbh"  id="机器"  @keydown="ent1($event)" @blur="getJtbhsubmit()" :clearable="true" style="width: 100px;" />		  				  
			      </el-form-item>
			    </el-col>
				<el-col :span="10">
				  <el-form-item label="组别:" prop="flatFeed" class="mab">
				   <el-input v-model="formData.sczl_bzdh"  id="组别"  @keydown="ent1($event)" @blur="getBzsubmit()" :clearable="true" style="width: 200px;" />		  				  
				  </el-form-item>
				</el-col>
			  </el-row>
			  
			  <el-row :gutter="24">
			    <el-col :span="6">
			      <el-form-item label="墨色:" prop="flatFeed" class="mab">
				  <el-input v-model="formData.sczl_ms" id="墨色" @keydown="ent1($event)" :clearable="true" style="width: 200px;" />		  				  
			      </el-form-item>
			    </el-col>
			    <el-col :span="8">
			      <el-form-item label="加工联数:" prop="flatFeed" class="mab" >
			      <el-input v-model="formData.sczl_ls" id="加工联数"  @keydown="ent1($event)" :clearable="true" style="width: 100px; margin-right: 30px;" />		  				  
			      <el-input v-model="mult1" id="mult1"  @keydown="ent1($event)" @blur="mult()" style="width: 50px;" />X
			      <el-input v-model="mult2" id="mult2"  @keydown="ent1($event)" @blur="mult()" style="width: 60px;" />
				  </el-form-item>
			    </el-col>
				<el-col :span="5">
				  <el-form-item label="产量:" prop="flatFeed" class="mab">
				   <el-input v-model="formData.sczl_cl" id="产量"  @keydown="ent1($event)" :clearable="true" style="width: 200px;" />		  				  
				  </el-form-item>
				</el-col>
				<el-col :span="5">
				  <el-form-item label="制程废品:" prop="flatFeed" class="mab">
				  <el-input v-model="formData.sczl_zcfp" id="制程废品"  @keydown="ent1($event)" :clearable="true" style="width: 200px;" />		  				  
				  </el-form-item>
				</el-col>
			  </el-row>
			  
			  <el-row :gutter="24">
			    <el-col :span="6">
			      <el-form-item label="装版总工时:" prop="flatFeed" class="mab">
			      <el-input v-model="formData.sczl_装版总工时" id="装版总工时"  @keydown="ent1($event)" :clearable="true" style="width: 200px;" />		  				  
			      </el-form-item>
			    </el-col>
				<el-col :span="8">
				  <el-form-item label="装版补产工时:" prop="flatFeed" class="mab">
				   <el-input v-model="formData.sczl_装版工时" id="装版补产工时"  @keydown="ent1($event)" :clearable="true" style="width: 200px;" />		  				  
				  </el-form-item>
				</el-col>
				<el-col :span="5">
				  <el-form-item label="保养工时:" prop="flatFeed" class="mab">
					<el-input v-model="formData.sczl_保养工时" id="保养工时"  @keydown="ent1($event)" :clearable="true" style="width: 200px;" />		  				  
				  </el-form-item>
				</el-col>
				<el-col :span="5">
				  <el-form-item label="异常停机:" prop="flatFeed" class="mab">
				  <el-input v-model="formData.sczl_异常停机工时" id="异常停机"  @keydown="ent1($event)" :clearable="true" style="width: 200px;" />		  				  
				  </el-form-item>
				</el-col>
			  </el-row>
			   
			   <el-row :gutter="24">
			     
					<el-col :span="6">
					  <el-form-item label="打样总工时:" prop="flatFeed" class="mab">
					   <el-input v-model="formData.sczl_打样总工时" id="打样总工时"  @keydown="ent1($event)" :clearable="true"style="width: 200px;" />		  				  
					  </el-form-item>
					</el-col>
					<el-col :span="8">
					  <el-form-item label="打样补产工时:" prop="flatFeed" class="mab">
					  <el-input v-model="formData.sczl_打样工时" id="打样补产工时"  @keydown="ent1($event, '打样总工时', '打样补产工时', '通电时间')" :clearable="true" style="width: 200px;" />		  				  
					  </el-form-item>
					</el-col>
					<el-col :span="10">
					  <el-form-item label="通电时间:" prop="flatFeed" class="mab">
					   <el-input v-model="formData.sczl_设备运行工时"  id="通电时间"  @keydown="ent1($event, '打样补产工时', '通电时间', '拆片联拼系数')" :clearable="true" style="width: 200px;" />		  				  
					  </el-form-item>
					</el-col>
			   </el-row>
			   
			  <el-row :gutter="24" style="height:40px">
				<el-col :span="14" v-if="showFormItems">
				  <el-form-item label="拆片联拼系数:" prop="flatFeed" class="mab" label-width="417px">
				   <el-input v-model="formData.拆片联拼系数" id="拆片联拼系数"  @keydown="ent1($event, '通电时间', '拆片联拼系数', '拆片条小盒系数')" :clearable="true"  style="width: 200px;" />		  				  
				  </el-form-item>
				</el-col>
				<el-col :span="10" v-if="showFormItems">
				  <el-form-item label="拆片条小盒系数:" prop="flatFeed" class="mab">
				  <el-input v-model="formData.拆片条小盒系数" id="拆片条小盒系数"  @keydown="ent1($event, '拆片联拼系数', '拆片条小盒系数', '定额代号')" :clearable="true" style="width: 200px;" />		  				  
				  </el-form-item>
				</el-col>
			  </el-row>
			  
			  <el-row :gutter="24">
			    <el-col :span="14">
			      <el-form-item label="定额代号:" prop="flatFeed" class="mab" label-width="417px">
			       <el-input v-model="formData.sczl_dedh" id="定额代号"  @keydown="ent1($event, '拆片条小盒系数', '定额代号', '工价系数')" @blur="getDedhsubmit()" :clearable="true" style="width: 200px;" />		  				  
			      </el-form-item>
			    </el-col>
				<el-col :span="5">
				  <el-form-item label="工价系数:" v-if="showFormItems" prop="flatFeed" class="mab">
				   <el-input v-model="formData.sczl_工价系数" id="工价系数"  @keydown="ent1($event, '定额代号', '工价系数', '计产系数')" :clearable="true" style="width: 200px;" />		  				  
				  </el-form-item>
				</el-col>
				<el-col :span="5">
				  <el-form-item label="计产系数:" v-if="showFormItems" prop="flatFeed" class="mab">
				  <el-input v-model="formData.sczl_计产系数" id="计产系数"  @keydown="ent1($event, '工价系数', '计产系数', 'sczl_bh1')" :clearable="true" style="width: 200px;" />		  				  
				  </el-form-item>
				</el-col>
			  </el-row>
			  
              <el-row :gutter="22" style="margin-top: 10px;">
				<el-col :span="2"></el-col>
                <el-col :span="2"><span>员工姓名1</span></el-col>
                <el-col :span="2"><span>员工姓名2</span></el-col>
                <el-col :span="2"><span>员工姓名3</span></el-col>
                <el-col :span="2"><span>员工姓名4</span></el-col>
                <el-col :span="2"><span>员工姓名5</span></el-col>
				<el-col :span="2"><span>员工姓名6</span></el-col>
				<el-col :span="2"><span>员工姓名7</span></el-col>
				<el-col :span="2"><span>员工姓名8</span></el-col>
				<el-col :span="2"><span>员工姓名9</span></el-col>
				<el-col :span="2"><span><b>特殊组员</b></span></el-col>
              </el-row>

             <el-row :gutter="22" style="margin-top: 10px;">
				 <el-col :span="2"><span>班组成员</span></el-col>
                <el-col :span="2">
                  <el-input v-model="formData.sczl_bh1" id="sczl_bh1" @blur="GetYg($event, '1')" @keydown="getGxMcsubmit($event, '1')" />
                </el-col>
                <el-col :span="2">
                  <el-input v-model="formData.sczl_bh2" id="sczl_bh2" @blur="GetYg($event, '2')" @keydown="getGxMcsubmit($event, '2')"  />
                </el-col>
                <el-col :span="2">
                  <el-input v-model="formData.sczl_bh3" id="sczl_bh3" @blur="GetYg($event, '3')" @keydown="getGxMcsubmit($event, '3')"  />
                </el-col>
                <el-col :span="2">
                  <el-input v-model="formData.sczl_bh4" id="sczl_bh4" @blur="GetYg($event, '4')" @keydown="getGxMcsubmit($event, '4')"  />
                </el-col>
                <el-col :span="2">
                  <el-input v-model="formData.sczl_bh5" id="sczl_bh5" @blur="GetYg($event, '5')" @keydown="getGxMcsubmit($event, '5')"  />
                </el-col>
				<el-col :span="2">
				  <el-input v-model="formData.sczl_bh6" id="sczl_bh6" @blur="GetYg($event, '6')" @keydown="getGxMcsubmit($event, '6')"  />
				</el-col>
				<el-col :span="2">
				  <el-input v-model="formData.sczl_bh7" id="sczl_bh7" @blur="GetYg($event, '7')" @keydown="getGxMcsubmit($event, '7')"  />
				</el-col>
				<el-col :span="2">
				  <el-input v-model="formData.sczl_bh8" id="sczl_bh8" @blur="GetYg($event, '8')" @keydown="getGxMcsubmit($event, '8')"  />
				</el-col>
				<el-col :span="2">
				  <el-input v-model="formData.sczl_bh9" id="sczl_bh9" @blur="GetYg($event, '9')" @keydown="getGxMcsubmit($event, '9')"  />
				</el-col>
				<el-col :span="2">
				  <el-input v-model="formData.sczl_bh10" id="sczl_bh10" @blur="GetYg($event, '10')" @keydown="getGxMcsubmit($event, '10')"  />
				</el-col>
              </el-row>
            </el-form>
			
			
			<el-row :gutter="22" style="margin-top: 10px;">
				<el-col :span="2"></el-col>
			   <el-col :span="2">
			     <el-input v-model="formData.sczl_bh1_name" id="name1" :readonly=true />
			   </el-col>
			   <el-col :span="2">
			     <el-input v-model="formData.sczl_bh2_name" id="name2" :readonly=true />
			   </el-col>
			   <el-col :span="2">
			     <el-input v-model="formData.sczl_bh3_name" id="name3" :readonly=true />
			   </el-col>
			   <el-col :span="2">
			     <el-input v-model="formData.sczl_bh4_name" id="name4" :readonly=true />
			   </el-col>
			   <el-col :span="2">
			     <el-input v-model="formData.sczl_bh5_name" id="name5" :readonly=true />
			   </el-col>
				<el-col :span="2">
				  <el-input v-model="formData.sczl_bh6_name" id="name6" :readonly=true />
				</el-col>
				<el-col :span="2">
				  <el-input v-model="formData.sczl_bh7_name" id="name7" :readonly=true />
				</el-col>
				<el-col :span="2">
				  <el-input v-model="formData.sczl_bh8_name" id="name8" :readonly=true />
				</el-col>
				<el-col :span="2">
				  <el-input v-model="formData.sczl_bh9_name"  id="name9" :readonly=true />
				</el-col>
				<el-col :span="2">
				  <el-input v-model="formData.sczl_bh10_name"  id="name10" :readonly=true />
				</el-col>
			 </el-row>
			
			<el-row :gutter="22" style="margin-top: 10px;">
				 <el-col :span="2"></el-col>
			   <el-col :span="2">
			     <el-input v-model="formData.sczl_rate1" id="rate1" @keydown="rate($event, '1')" />
			   </el-col>
			   <el-col :span="2">
			     <el-input v-model="formData.sczl_rate2" id="rate2" @keydown="rate($event, '2')"  />
			   </el-col>
			   <el-col :span="2">
			     <el-input v-model="formData.sczl_rate3" id="rate3" @keydown="rate($event, '3')" />
			   </el-col>
			   <el-col :span="2">
			     <el-input v-model="formData.sczl_rate4" id="rate4" @keydown="rate($event, '4')" />
			   </el-col>
			   <el-col :span="2">
			     <el-input v-model="formData.sczl_rate5" id="rate5" @keydown="rate($event, '5')" />
			   </el-col>
				<el-col :span="2">
				  <el-input v-model="formData.sczl_rate6" id="rate6" @keydown="rate($event, '6')" />
				</el-col>
				<el-col :span="2">
				  <el-input v-model="formData.sczl_rate7" id="rate7" @keydown="rate($event, '7')" />
				</el-col>
				<el-col :span="2">
				  <el-input v-model="formData.sczl_rate8" id="rate8" @keydown="rate($event, '8')" />
				</el-col>
				<el-col :span="2">
				  <el-input v-model="formData.sczl_rate9" id="rate9" @keydown="rate($event, '9')" />
				</el-col>
				<el-col :span="2">
				  <el-input v-model="formData.sczl_rate10" id="rate10" @keydown="rate($event, '10')" />
				</el-col>
			 </el-row>
			 
            <template #footer>
              <div class="dialog-footer">
                <el-button @click="closeDialog">取 消</el-button>
                <el-button type="primary" @click="enterDialog">确 定</el-button>
              </div>
            </template>
          </el-dialog>

          <el-dialog
            v-model="GetDedhVisible"
            title="选择"
            destroy-on-close
            width="600px"
          			>		     
               <el-aside width="250px">
                 <div class="JKWTree-tree">		          
                   <el-tree :data="GetDedhtreeData" :props="defaultProps" highlight-current="true"
                     @node-click="GetDedhhandleNodeClick" @node-dblclick="handleNodeDoubleClick"></el-tree>
                 </div>
               </el-aside>		       
          </el-dialog>


          <el-dialog v-model="GXVisible" title="选择" destroy-on-close width="800px" >
            <el-table ref="tableRef" tooltip-effect="dark" :data="selectData" row-key="ID"
              highlight-current-row="true" border style="width:100%"
              @row-dblclick="SelectClick"
            >
              <el-table-column prop="sczl_gxmc" label="工序名称" width="750" />			        	 
            </el-table>
          </el-dialog>
		  
		  <el-dialog v-model="JtbhVisible" title="选择" destroy-on-close width="800px" >
		    <el-table tooltip-effect="dark" :data="selectDataJtbh" row-key="ID"
		      highlight-current-row="true" border style="width:100%"
		      @row-dblclick="SelectClickJtbh"
		    >
		      <el-table-column prop="jtbh" label="设备编号" width="150" />			        	 
		      <el-table-column prop="设备名称" label="设备名称" width="600" />			        	 
		    </el-table>
		  </el-dialog>
		  
		  <el-dialog v-model="BzVisible" title="选择" destroy-on-close width="200px" >
		    <el-table tooltip-effect="dark" :data="selectDataBz" row-key="ID"
		      highlight-current-row="true" border style="width:100%"
		      @row-dblclick="SelectClickBz"
		    >
		      <el-table-column prop="sczl_bzdh" label="班组" width="150" />			        	 
		    </el-table>
		  </el-dialog>

        </el-main>
      </el-container>
    </el-container>

  </div>
</template>

<script setup>
import {
  getproductionCount,
  getproductionList,
  productionlocate,
  productionByGdbh,
  productionInfo,
  productionGdmc,
  productionYjmc,
  productionGx,
  productionDedh,
  productionedit,
  productiondel,
  getYg,
  productionadd,
  reportGetJtbh,
  dedhGetRate
} from '@/api/jixiaoguanli/jitairibaobiao'

// 全量引入格式化工具 请按需保留
import { getDictFunc, formatDate, formatBoolean, filterDict, ReturnArrImg, onDownloadFile } from '@/utils/format'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Search, Refresh, Download } from '@element-plus/icons-vue'
import { ref, reactive, nextTick, onMounted, onBeforeMount } from 'vue'
import { getPackingSideTable, getPackingTable } from '@/api/mes_api_gty/myapi'
import { Layout, LayoutContent, LayoutHeader, LayoutSider } from '@arco-design/web-vue'
defineOptions({
  name: '06-packingDocuments'
})
const GetDedhVisible = ref(false)
// 侧边栏数据请求
const treeData = reactive([]);
const getTabdata = async () => {
	//接口调用函数
	const response  = await getproductionCount();
	const transformedData = response.data.map(item => ({
		 label: `${item.date.replace(/-/g, '.')}【单据数: ${item.counts}张】`,
		 children: Object.keys(item.sys).map(sysItem => {
			const matchResult = sysItem.match(/\[(.*?)\]/);
			const sysLabel = matchResult ? matchResult[1] : "";
			return {
			  label: `${sysLabel}【记录数: ${item.sys[sysItem]}张】`,
			  params: {
			date: item.date.replace(/\./g, '-'),
			sys_id: sysItem,
			total: item.sys[sysItem],
			},
		   };
		 }),
   }));
   treeData.splice(0, treeData.length, ...transformedData);
   displayMod.value = 'date'
}

getTabdata();
const mult1 = ref('0.00');
const mult2 = ref('0.000');

// 自动化生成的字典（可能为空）以及字段
const formData = ref({
		  sczl_gdbh: '',
          Gd_cpmc: '',
          sczl_yjno: '',
          yj_yjmc: '',
          sczl_gxmc: '',
          sczl_gxh: '',
          sczl_type: '',
          sczl_rq: '',
          sczl_jtbh: '',
          sczl_bzdh: '',
          sczl_ms: '',
          sczl_ls: '',
          sczl_cl: '0.0',
          sczl_zcfp: '0',
          sczl_装版总工时: '0.00',
          sczl_装版工时: '0.00',
          sczl_保养工时: '0.00',
          sczl_异常停机工时: '0.00',
          sczl_打样总工时: '',
          sczl_打样工时: '0.00',
          sczl_设备运行工时: '0.00',
          拆片联拼系数: '',
          拆片条小盒系数: '',
          sczl_dedh: '',
          sczl_工价系数: '',
          sczl_计产系数: '',
          sczl_bh1: '',
          sczl_bh2: '',
          sczl_bh3: '',
          sczl_bh4: '',
          sczl_bh5: '',
          sczl_bh6: '',
          sczl_bh7: '',
          sczl_bh8: '',
          sczl_bh9: '',
          sczl_bh10: '',
          sczl_rate1: '',
          sczl_rate2: '',
          sczl_rate3: '',
          sczl_rate4: '',
          sczl_rate5: '',
          sczl_rate6: '',
          sczl_rate7: '',
          sczl_rate8: '',
          sczl_rate9: '',
          sczl_rate10: '',
          sczl_bh1_name: '',
          sczl_bh2_name: '',
          sczl_bh3_name: '',
          sczl_bh4_name: '',
          sczl_bh5_name: '',
          sczl_bh6_name: '',
          sczl_bh7_name: '',
          sczl_bh8_name: '',
          sczl_bh9_name: '',
          sczl_bh10_name: '',
})
const initFormData = () => {
	formData.value = {
		  sczl_gdbh: '',
          Gd_cpmc: '',
          sczl_yjno: '',
          yj_yjmc: '',
          sczl_gxmc: '',
          sczl_gxh: '',
          sczl_type: '',
          sczl_rq: '',
          sczl_jtbh: '',
          sczl_bzdh: '',
          sczl_ms: '',
          sczl_ls: '',
          sczl_cl: '0.0',
          sczl_zcfp: '0',
          sczl_装版总工时: '0.00',
          sczl_装版工时: '0.00',
          sczl_保养工时: '0.00',
          sczl_异常停机工时: '0.00',
          sczl_打样总工时: '',
          sczl_打样工时: '0.00',
          sczl_设备运行工时: '0.00',
          拆片联拼系数: '',
          拆片条小盒系数: '',
          sczl_dedh: '',
          sczl_工价系数: '',
          sczl_计产系数: '',
          sczl_bh1: '',
          sczl_bh2: '',
          sczl_bh3: '',
          sczl_bh4: '',
          sczl_bh5: '',
          sczl_bh6: '',
          sczl_bh7: '',
          sczl_bh8: '',
          sczl_bh9: '',
          sczl_bh10: '',
          sczl_rate1: '',
          sczl_rate2: '',
          sczl_rate3: '',
          sczl_rate4: '',
          sczl_rate5: '',
          sczl_rate6: '',
          sczl_rate7: '',
          sczl_rate8: '',
          sczl_rate9: '',
          sczl_rate10: '',
          sczl_bh1_name: '',
          sczl_bh2_name: '',
          sczl_bh3_name: '',
          sczl_bh4_name: '',
          sczl_bh5_name: '',
          sczl_bh6_name: '',
          sczl_bh7_name: '',
          sczl_bh8_name: '',
          sczl_bh9_name: '',
          sczl_bh10_name: '',
	};
}
// 验证规则
const rule = reactive({
		   sczl_gdbh : [{
			   required: true,
			   message: '',
			   trigger: [],
		   }],
		   sczl_yjno : [{
			   required: true,
			   message: '',
			   trigger: [],
		   }],
		   sczl_gxmc: [{
			   required: true,
			   message: '',
			   trigger: [],
		   }],
		   sczl_gxh: [{
			   required: true,
			   message: '',
			   trigger: [],
		   }],
		   sczl_type: [{
		   				required: true,
		   				message: '',
		   				trigger: [],
		   }],
		   sczl_rq: [{
		   				required: true,
		   				message: '',
		   				trigger: [],
		   }],
		   sczl_bzdh: [{
		   				required: true,
		   				message: '',
		   				trigger: [],
		   }],
		   sczl_cl: [{
		   				required: true,
		   				message: '',
		   				trigger: [],
		   }],
		   sczl_dedh: [{
		   				required: true,
		   				message: '',
		   				trigger: [],
		   }],
		   
})

const elFormRef = ref()
const elSearchFormRef = ref()

// =========== 表格控制部分 ===========
const tableData = reactive([])
const detailData = reactive([])
const total = ref(0)
const page = ref(1)

const limit = ref(10)
const searchInfo = ref('')
const params = {
 type: '',
 date: '',
 sys_id: '',
 gdbh: '',
}

// 分页设置
const handleSizeChange = (val) => {
 switch (params.type) {
   case 'getTableData':
     getTableData()
     break
   case 'getLocateTable':
     GetLocate()
     break
   default:
     break
 }
}

// 页面跳转
const handleCurrentChange = (val) => {
  switch (params.type) {
    case 'getTableData':
      getTableData()
      break
    case 'getLocateTable':
      GetLocate()
      break
    default:
      break
  }
}

//定位
// const GetLocate = async () => {
//   const response = await productionlocate({
//     gdbh: params.gdbh,
//     page: page.value.toString(), limit: limit.value.toString(),
//   })
//   if (response.code === 0) {
// 	 console.log(response)
//     const processedData = response.data.rows.map(item => {
//       return {
//         ...item,
//         combinedProp: item.sczl_gdbh + '--'+item.yj_yjmc,
//         combinedProp2: item.sczl_yjgx + '-'+item.sczl_gxmc
//       };
//     });
// 	total.value = response.data.total
//     tableData.splice(0, tableData.length, ...processedData);
//   }
// }
const GetLocate = async () => {
	console.log(params.gdbh)
	console.log(page.value.toString())
	console.log(limit.value.toString())
  const response = await productionlocate({
    gdbh: params.gdbh,
    page: page.value.toString(), limit: limit.value.toString(),
  })
  console.log(response)
  if (response.code === 0) {
    const processedData = response.data.rows.map(item => {
      return {
        ...item,
        combinedProp: item.sczl_gdbh + '--'+item.yj_yjmc,
        combinedProp2: item.sczl_yjgx + '-'+item.sczl_gxmc
      };
    });
	total.value = parseInt(response.data.total)
	// limit.value=response.data.total
    tableData.splice(0, tableData.length, ...processedData);
  }
}
let positionvalue=ref()
//获取列表
const getTableData = async() => {
 const response = await getproductionList({date: params.date, sys_id: params.sys_id,
	  page: page.value.toString(), limit: limit.value.toString()});
   if (response.code === 0) {
     tableData.splice(0, tableData.length, ...response.data.rows);
	 console.log(tableData)
   }
 }

const handleNodeClick = (node,check) => {
  //存放当前节点的nodeId
 if (node.params) {
   params.date = node.params.date;
   params.sys_id = node.params.sys_id;
   params.type = 'getTableData'
   total.value = node.params.total;
   page.value = 1
   getTableData();
 }
}

//键盘 input框跳转
// const ent = (event,id1,id2,id3) => {
//   if (event.keyCode === 13 || event.keyCode === 40) { // Enter 或向下箭头
// 	if(id3!=''){
//       document.getElementById(id3).focus()
//     }
//   } else if (event.keyCode === 38) { // 向上箭头
//     if(id1!=''){
//       document.getElementById(id1).focus()
//     }
//   }else if (event.keyCode === 8) { // 删除箭头
//     if(id1!='' && document.getElementById(id2).value===''){
//       document.getElementById(id1).focus()
//     }
//   }else if (event.keyCode === 37) { // 向左箭头
//     if(id1!='' && document.getElementById(id2).selectionStart==0){
//       document.getElementById(id1).focus()
//     }
//   }else if (event.keyCode === 39) { // 向右箭头
//     if(id3!='' && document.getElementById(id2).selectionStart == document.getElementById(id2).value.length){
//       document.getElementById(id3).focus()
//     }
//   }
// }
const ent1 = (event) => {
  const inputs = document.getElementsByTagName('input');
  const currentIndex = Array.from(inputs).indexOf(event.target);
  
  if (event.keyCode === 13 || event.keyCode === 40) { // Enter 或向下箭头
    for (let i = currentIndex + 1; i < inputs.length; i++) {
      if (!inputs[i].readOnly) {
		  nextTick(()=>{
			  inputs[i].focus();
			  inputs[i].select();
		  })
        break;
      }
    }
  } else if (event.keyCode === 38) { // 向上箭头
    for (let i = currentIndex - 1; i >= 0; i--) {
      if (!inputs[i].readOnly) {
        nextTick(()=>{
        	inputs[i].focus();
			inputs[i].select();
        })
        break;
      }
    }
  } else if (event.keyCode === 8) { // 删除箭头
    if (event.target.selectionStart === 0) {
      for (let i = currentIndex - 1; i >= 0; i--) {
        if (!inputs[i].readOnly) {
          nextTick(()=>{
          	inputs[i].focus();
			inputs[i].setSelectionRange(0, 0);
          })
          break;
        }
      }
    }
  } else if (event.keyCode === 37) { // 向左箭头
    if (event.target.selectionStart === 0) {
      for (let i = currentIndex - 1; i >= 0; i--) {
        if (!inputs[i].readOnly) {
          nextTick(()=>{
          	inputs[i].focus();
			inputs[i].select();
          })
          break;
        }
      }
    }
  } else if (event.keyCode === 39) { // 向右箭头
    if (event.target.selectionStart === event.target.value.length) {
      for (let i = currentIndex + 1; i < inputs.length; i++) {
        if (!inputs[i].readOnly) {
          nextTick(()=>{
          	inputs[i].focus();
			inputs[i].select();
          })
          break;
        }
      }
    }
  }
}


//追加字体颜色和不可输入
const setColorReadonly = (id) => {
	const newInput = document.getElementById(id)
	newInput.style.color = 'red';
	newInput.setAttribute('readonly', true);
}

//追加字体颜色和可输入
const unsetColorReadonly = (id) => {
	const newInput = document.getElementById(id)
	newInput.style.color = 'black';
	newInput.removeAttribute('readonly');
}


//工单编号回车事件
// const getCPMCsubmit = () => {
// 	if(formData.value.sczl_gdbh!=''){
// 		productionGdmc({gdbh:formData.value.sczl_gdbh}).then(response=>{
// 		  if (response.code === 0) {
// 			  formData.value.Gd_cpmc = response.data.Gd_cpmc
// 			  yjnoArr.value = response.data.yjno;
			  
// 			  document.getElementById('产品名称').style.color = 'red';
// 			}else{
// 				formData.value.sczl_gdbh = '';
// 				formData.value.Gd_cpmc = '';
// 				gxmc.value = '';
// 				document.getElementById('产品名称').style.color = 'black';
// 			}
// 		});
// 	}else{
// 		ElMessage({
// 		  type: 'error',
// 		  message: '请注意, 工单编号输入空置, 除非有特殊需要！'
// 		})
		
// 		gxmc.value = '';
// 		document.getElementById('产品名称').style.color = 'black';
// 	}
// }

//印件号数组
const yjnoArr = ref([0])
//印件号获得焦点事件
const yjnoHandleFocus = () =>{
	if(yjnoArr.value[0] == 0){
		formData.value.sczl_yjno = 1;
	}else{
		formData.value.sczl_yjno = yjnoArr.value[0];
	}
}

//印件号失去焦点事件
const getYJMCsubmit = () => {
 if(formData.value.sczl_gdbh!='' && formData.value.sczl_yjno!=''){
 	//获取印件名称
	productionYjmc({gdbh:formData.value.sczl_gdbh,yjno:formData.value.sczl_yjno}).then(response=>{
 	  if (response.code === 0) {
 		  formData.value.yj_yjmc = response.data.yj_yjmc
 		  gxmc.value = response.data.gxmc
		  formData.value.sczl_gxmc = gxmc.value.sczl_gxmc;
		  setColorReadonly('印件名称')
		  
 		}else{
 			ElMessage({
 			  type: 'error',
 			  message: '印件编号不存在, 将恢复默认值, 请仔细确认数据准确性！'
 			})
 			formData.value.sczl_yjno = yjnoArr.value[0];
 			formData.value.yj_yjmc = '';
			gxmc.value = '';
 		}
 	});
 }else{
 	ElMessage({
 	  type: 'error',
 	  message: '印件编号不存在, 将恢复默认值, 请仔细确认数据准确性！'
 	})
	formData.value.sczl_yjno = yjnoArr.value[0];
	formData.value.yj_yjmc = '';
	gxmc.value = '';
 }
}

//工序数组
const gxmc = ref('')
const showFormItems = ref(true)
const tableRef = ref()

//工序数组
const gxArr = ref({})
//工序名称获得焦点事件
const gxmcHandleFocus = () =>{
	if(gxmc.value != ''){
		formData.value.sczl_gxmc = gxmc.value.sczl_gxmc;
	}else{
		formData.value.sczl_gxmc = '';
	}
}

//工序失去焦点事件
const getGXsubmit = () => {
	setColorReadonly('工序号')
	setColorReadonly('工艺名称')
	//工序名称为空
	if(formData.value.sczl_gxmc==''){
		formData.value.sczl_gxh = 0;
		formData.value.sczl_type = '';
		formData.value.sczl_ls = 0;
		
		//设置字体和输入
		unsetColorReadonly('制程废品')
		unsetColorReadonly('装版总工时')
		unsetColorReadonly('装版补产工时')
		unsetColorReadonly('保养工时')
		unsetColorReadonly('异常停机')
		unsetColorReadonly('打样补产工时')
		unsetColorReadonly('通电时间')
	}else{
		//工序名称为印件默认值
		if(formData.value.sczl_gxmc == gxmc.value.sczl_gxmc){
			formData.value.sczl_gxh = gxmc.value.sczl_gxh;
			formData.value.sczl_type = gxmc.value.sczl_type;
			formData.value.sczl_ls = gxmc.value.sczl_ls;
			formData.value.sczl_jtbh = '';
			
			formData.value.sczl_zcfp = 0;
			formData.value.sczl_装版总工时 = 0;
			formData.value.sczl_装版工时 = 0;
			formData.value.sczl_保养工时 = 0;
			formData.value.sczl_异常停机工时 = 0;
			formData.value.sczl_打样工时 = 0;
			formData.value.sczl_设备运行工时 = 0;
			//设置字体和输入
			setColorReadonly('机器')
			setColorReadonly('制程废品')
			setColorReadonly('装版总工时')
			setColorReadonly('装版补产工时')
			setColorReadonly('保养工时')
			setColorReadonly('异常停机')
			setColorReadonly('打样总工时')
			setColorReadonly('打样补产工时')
			setColorReadonly('通电时间')
			
			//显示联拼
			showFormItems.value = true
		}else{
			//弹出选择
			productionGx({gdbh:formData.value.sczl_gdbh,yjno:formData.value.sczl_yjno}).then(response=>{
				if (response.code === 0) {
					  selectData.splice(0, selectData.length, ...response.data)
					  GXVisible.value=true
					 //  nextTick(()=>{
						//   console.log(tableRef)
						//   console.log(selectData)
						//   tableRef.value.setCurrentRow(selectData[0]);
						//       tableRef.value.focus();
						// });
				  }
			})
		}
	}
}

//工序选择JtbhVisible
const selectData = reactive([])
const GXVisible = ref(false)
const SelectClick = (row, column, event) => {
  const {sczl_gxmc } = row
  
  if(row.sczl_type=='拆片'){
  	  formData.value.sczl_type=row.sczl_type
  	  formData.value.sczl_gxmc=row.sczl_gxmc
  	  formData.value.sczl_gxh=row.sczl_gxh
  	  formData.value.sczl_ls = row.sczl_ls;
  	  formData.value.sczl_jtbh = '';
  	  
  	  formData.value.sczl_zcfp = 0;
  	  formData.value.sczl_装版总工时 = 0;
  	  formData.value.sczl_装版工时 = 0;
  	  formData.value.sczl_保养工时 = 0;
  	  formData.value.sczl_异常停机工时 = 0;
  	  formData.value.sczl_打样工时 = 0;
  	  formData.value.sczl_设备运行工时 = 0;
  	  //设置字体和输入
  	  setColorReadonly('机器')
  	  setColorReadonly('制程废品')
  	  setColorReadonly('装版总工时')
  	  setColorReadonly('装版补产工时')
  	  setColorReadonly('保养工时')
  	  setColorReadonly('异常停机')
  	  setColorReadonly('打样总工时')
  	  setColorReadonly('打样补产工时')
  	  setColorReadonly('通电时间')
	  
	  //显示联拼
	  showFormItems.value = true
  }else{
	  formData.value.sczl_type=row.sczl_type
	  formData.value.sczl_gxmc=row.sczl_gxmc
	  formData.value.sczl_gxh=row.sczl_gxh
	  formData.value.sczl_ls = row.sczl_ls;
	  formData.value.sczl_ms = 0;
	  
	  //设置字体和输入
	  unsetColorReadonly('机器')
	  unsetColorReadonly('制程废品')
	  unsetColorReadonly('装版总工时')
	  unsetColorReadonly('装版补产工时')
	  unsetColorReadonly('保养工时')
	  unsetColorReadonly('异常停机')
	  unsetColorReadonly('打样总工时')
	  unsetColorReadonly('打样补产工时')
	  unsetColorReadonly('通电时间')
	  
	  //隐藏联拼
	  showFormItems.value = false
  }
  
  GXVisible.value = false
}

const rqHandleFocus = () =>{
	if(formData.value.sczl_rq==''){
		formData.value.sczl_rq = new Date().toISOString().split('T')[0]
	}
}

//机台失去焦点事件
const getJtbhsubmit = () => {
	if(BzVisible.value){
		return false
	}
	//弹出选择
	reportGetJtbh({sczl_type:formData.value.sczl_type,key_word:''}).then(response=>{
		if (response.code === 0) {
			if(response.data.length!=0 && !response.data.some(item => item.jtbh === formData.value.sczl_jtbh)){
				selectDataJtbh.splice(0, selectDataJtbh.length, ...response.data)
				JtbhVisible.value=true
			}
			  
		}
	})
}

//机台选择
const selectDataJtbh = reactive([])
const JtbhVisible = ref(false)
const SelectClickJtbh = (row, column, event) => {
  const {jtbh,设备编号 } = row

	formData.value.sczl_jtbh=row.jtbh

  JtbhVisible.value = false
}

//班组失去焦点事件
const getBzsubmit = () => {
	//弹出选择
	const data = [{'sczl_bzdh':'A班'},{'sczl_bzdh':'B班'}]
	selectDataBz.splice(0, selectDataBz.length, ...data)
	if(!JtbhVisible.value){
		BzVisible.value=true
	}
	
			
}

//班组选择
const selectDataBz = reactive([])
const BzVisible = ref(false)
const SelectClickBz = (row, column, event) => {
  const {sczl_bzdh } = row

	formData.value.sczl_bzdh=row.sczl_bzdh

  BzVisible.value = false
}

//mult失去焦点事件
const mult = () => {
	formData.value.sczl_cl = parseFloat(mult1.value*mult2.value)
}


let GetDedhtreeData = reactive([]);
//定额代号回车事件
const getDedhsubmit = () => {
	//弹出选择
	let treeData = [];
	productionDedh({sczl_jtbh:formData.value.sczl_jtbh}).then(response=>{
		if (response.code === 0) {
			if(formData.value.sczl_jtbh==''){
				const data = [];
				data[0] = response.data;
				   
				   // 递归函数来构建树形结构
				   const buildTree = (node) => {
				     const treeNode = {
				       label: node.sys_bh + '【' + node.sys_mc+'】',
				       children: []
				     };
				   
				     // 如果存在子节点，递归地添加它们
				     if (node.bh_mc && Array.isArray(node.bh_mc)) {
				       node.bh_mc.forEach(childNode => {
				         treeNode.children.push(buildTree(childNode)); // 递归调用
				       });
				     }
				   
				     return treeNode;
				   };
				   
				   // 构建树形结构的根节点
				   const treeData = data.map(buildTree);
				   
				   GetDedhtreeData = treeData; // 假设这是外部可访问的变量
				   GetDedhVisible.value = true; // 假设这是一个响应式引用
				   console.log(GetDedhtreeData)
			}else{
				formData.value.sczl_dedh = response.data['sys_bh']
			}
			  
		}
	})
	
}

//定额代号树形结构单机
const GetDedhhandleNodeClick = (nodeData, node, component) => {
  //存放当前节点的nodeId
  //存放当前节点的nodeId
  if (!nodeData.children || nodeData.children.length === 0) {
          // 如果节点没有子节点，打印节点名称
		  formData.value.sczl_dedh=nodeData.label.split("【")[0]
		  dedhGetRate({dedh:nodeData.label.split("【")[0]}).then(response=>{
			  if (response.code === 0) {
				  //设置比例
				  formData.value.sczl_rate1 = response.data.sczl_rate1;
				  formData.value.sczl_rate2 = response.data.sczl_rate2;
				  formData.value.sczl_rate3 = response.data.sczl_rate3;
				  formData.value.sczl_rate4 = response.data.sczl_rate4;
				  formData.value.sczl_rate5 = response.data.sczl_rate5;
				  formData.value.sczl_rate6 = response.data.sczl_rate6;
				  formData.value.sczl_rate7 = response.data.sczl_rate7;
				  formData.value.sczl_rate8 = response.data.sczl_rate8;
				  formData.value.sczl_rate9 = response.data.sczl_rate9;
				  formData.value.sczl_rate10 = response.data.sczl_rate10;
				  }
			  })
		   GetDedhVisible.value = false
        }
}

//员工编号回车事件
const getGxMcsubmit = (event, inputName) => {
	// const sczl_bh = document.getElementById('sczl_bh'+inputName).value
	
	// if(sczl_bh.length==7){
	// 	getYg({sczl_bh:sczl_bh}).then(response=>{
	// 		  if (response.code === 0) {
	// 			  //设置比例
	// 			  formData.value['sczl_bh'+inputName+'_name'] = response.data.ygxm;
	// 			  //设置光标
	// 			  document.getElementById('rate'+inputName).focus()
	// 			  document.getElementById('rate'+inputName).select()
	// 			  return false
	// 		}
	// 	})
	// }
	if(event.target.value!=''){
		if (event.keyCode === 13 || event.keyCode === 40) { // Enter 或向下箭头
			  //设置光标
			  document.getElementById('rate'+inputName).focus()
			  document.getElementById('rate'+inputName).select()
		} else if (event.keyCode === 38) { // 向上箭头
			  if(inputName==1){
				  //设置光标
				  document.getElementById('定额代号').focus()
				  document.getElementById('定额代号').select()
			  }else if(inputName==10){
				  for(var i=9;i>=1;i--){
					  if(formData.value['sczl_bh'+i]!=''){
						document.getElementById('rate'+(parseInt(inputName)+1)).focus()
						document.getElementById('rate'+(parseInt(inputName)+1)).select()
						break;
					  }else{
						  if(i ==1){
							document.getElementById('sczl_bh1').focus()
							document.getElementById('sczl_bh1').select()
							break;
						  }
					  }
				  }
			  }else {
				document.getElementById('rate'+(parseInt(inputName)-1)).focus()
				document.getElementById('rate'+(parseInt(inputName)-1)).select()
			  }
		} else if (event.keyCode === 8) { // 删除箭头
			if (event.target.selectionStart === 0) {
				if(inputName==1){
					//设置光标
					document.getElementById('定额代号').focus()
					document.getElementById('定额代号').setSelectionRange(0, 0)
				}else if(inputName==10){
					  for(var i=9;i>=1;i--){
						  if(formData.value['sczl_bh'+i]!=''){
							document.getElementById('rate'+(parseInt(inputName)+1)).focus()
							document.getElementById('rate'+(parseInt(inputName)+1)).setSelectionRange(0, 0)
							break;
						  }else{
						  if(i ==1){
							document.getElementById('sczl_bh1').focus()
							document.getElementById('sczl_bh1').setSelectionRange(0,0)
							break;
						  }
					  }
					  }
				  }else {
					document.getElementById('rate'+(parseInt(inputName)-1)).focus()
					document.getElementById('rate'+(parseInt(inputName)-1)).setSelectionRange(0, 0)
				}
			}
		} else if (event.keyCode === 37) { // 向左箭头
		  if (event.target.selectionStart === 0) {
			  if(inputName==1){
				//设置光标
				document.getElementById('定额代号').focus()
				document.getElementById('定额代号').select()
			  }else if(inputName==10){
				  for(var i=9;i>=1;i--){
					  if(formData.value['sczl_bh'+i]!=''){
						document.getElementById('rate'+(parseInt(inputName)+1)).focus()
						document.getElementById('rate'+(parseInt(inputName)+1)).select()
						break;
					  }else{
						  if(i ==1){
							document.getElementById('sczl_bh1').focus()
							document.getElementById('sczl_bh1').select()
							break;
						  }
					  }
				  }
			  }else{
				document.getElementById('rate'+(parseInt(inputName)-1)).focus()
				document.getElementById('rate'+(parseInt(inputName)-1)).select()
			  }
		  }
		} else if (event.keyCode === 39) { // 向右箭头
		  if (event.target.selectionStart === event.target.value.length) {
			//设置光标
			document.getElementById('rate'+inputName).focus()
			document.getElementById('rate'+inputName).select()
		  }
		} 
	}else{
		if (event.keyCode === 13 || event.keyCode === 40) { // Enter 或向下箭头
			if(inputName==10){
				//设置光标
				document.getElementById('rate'+inputName).focus()
				document.getElementById('rate'+inputName).select()
			}else{
				//设置光标
				document.getElementById('sczl_bh10').focus()
				document.getElementById('sczl_bh10').select()
				}
		} else if (event.keyCode === 38) { // 向上箭头
			  if(inputName==1){
				  //设置光标
				  document.getElementById('定额代号').focus()
				  document.getElementById('定额代号').select()
			  }else if(inputName==10){
				for(var i=9;i>=1;i--){
				  if(formData.value['sczl_bh'+i]!=''){
					document.getElementById('sczl_bh'+(parseInt(inputName)+1)).focus()
					document.getElementById('sczl_bh'+(parseInt(inputName)+1)).select()
					break;
				  }else{
					  if(i ==1){
						document.getElementById('sczl_bh1').focus()
						document.getElementById('sczl_bh1').select()
						break;
					  }
				  }
				}
			  }else{
				document.getElementById('rate'+(parseInt(inputName)-1)).focus()
				document.getElementById('rate'+(parseInt(inputName)-1)).select()
			  }
		} else if (event.keyCode === 8) { // 删除箭头
			if (event.target.selectionStart === 0) {
				if(inputName==1){
					//设置光标
					document.getElementById('定额代号').focus()
					document.getElementById('定额代号').setSelectionRange(0, 0)
				}else if(inputName==10){
				  for(var i=9;i>=1;i--){
					  if(formData.value['sczl_bh'+i]!=''){
						document.getElementById('sczl_bh'+(parseInt(inputName)+1)).focus()
						document.getElementById('sczl_bh'+(parseInt(inputName)+1)).setSelectionRange(0, 0)
						break;
					  }else{
						  if(i ==1){
							document.getElementById('sczl_bh1').focus()
							document.getElementById('sczl_bh1').setSelectionRange(0,0)
							break;
						  }
					  }
				  }
				}else{
					document.getElementById('rate'+(parseInt(inputName)-1)).focus()
					document.getElementById('rate'+(parseInt(inputName)-1)).setSelectionRange(0, 0)
				}
			}
			
		} else if (event.keyCode === 37) { // 向左箭头
		  if (event.target.selectionStart === 0) {
			  if(inputName==1){
			  	//设置光标
			  	document.getElementById('定额代号').focus()
			  	document.getElementById('定额代号').select()
			  }else if(inputName==10){
			  for(var i=9;i>=1;i--){
				  if(formData.value['sczl_bh'+i]!=''){
					document.getElementById('sczl_bh'+(parseInt(inputName)+1)).focus()
					document.getElementById('sczl_bh'+(parseInt(inputName)+1)).select()
					break;
				  }else{
					  if(i ==1){
						document.getElementById('sczl_bh1').focus()
						document.getElementById('sczl_bh1').select()
						break;
					  }
				  }
			  }
		  }else{
			  	document.getElementById('rate'+(parseInt(inputName)-1)).focus()
			  	document.getElementById('rate'+(parseInt(inputName)-1)).select()
			  }
		  }
		} else if (event.keyCode === 39) { // 向右箭头
		  if (event.target.selectionStart === event.target.value.length) {
			  if(inputName==10){
				  //设置光标
				  document.getElementById('rate'+inputName).focus()
				  document.getElementById('rate'+inputName).select()
			  }else{
				  //设置光标
				  document.getElementById('sczl_bh10').focus()
				  document.getElementById('sczl_bh10').select()
			  }
		    
		  }
		}
	}

}

//获取员工信息
const GetYg = (event,inputName) => {
	if(formData.value['sczl_bh'+inputName]!=''){
		getYg({sczl_bh:event.target.value}).then(response=>{
			if (response.code === 0) {
				//设置比例
				formData.value['sczl_bh'+inputName+'_name'] = response.data.ygxm;
			}else{
				formData.value['sczl_bh'+inputName+'_name'] = '';
			}
		})
	}
  
}

//比例失去焦点
const rate = (event,inputName) => {
	if (event.keyCode === 13 || event.keyCode === 40) { // Enter 或向下箭头
		if(inputName==10){
			ElMessageBox.confirm('数据存盘?', '提示', {
			          confirmButtonText: '确定',
			          cancelButtonText: '取消',
			          type: 'warning'
			        }).then(() => {
						enterDialog()
					})
			
		}else{
			//设置光标
			document.getElementById('sczl_bh'+(parseInt(inputName)+1)).focus()
			document.getElementById('sczl_bh'+(parseInt(inputName)+1)).select()
		}
	} else if (event.keyCode === 38) { // 向上箭头
		document.getElementById('sczl_bh'+inputName).focus()
		document.getElementById('sczl_bh'+inputName).select()
	} else if (event.keyCode === 8) { // 删除箭头
		if (event.target.selectionStart === 0) {
			document.getElementById('sczl_bh'+inputName).focus()
			document.getElementById('sczl_bh'+inputName).setSelectionRange(0, 0)
		}
		
	} else if (event.keyCode === 37) { // 向左箭头
	  if (event.target.selectionStart === 0) {
			document.getElementById('sczl_bh'+inputName).focus()
			document.getElementById('sczl_bh'+inputName).select()
	  }
	} else if (event.keyCode === 39) { // 向右箭头
	  if (event.target.selectionStart === event.target.value.length) {
		  if(inputName==10){
			  //设置光标
		  }else{
			document.getElementById('sczl_bh'+inputName).focus()
			document.getElementById('sczl_bh'+inputName).select()
		  }
	    
	  }
	}
}

// 搜索
function onSearch() {
    params.gdbh = positionvalue.value
	params.type = 'getLocateTable'
	page.value = 1
	console.log('123')
	GetLocate()
}
const ADD=ref('0')
//新增
function onAdd() {
	ADD.value='新增'
	type.value = 'create'
	if(table_type=='db_sczl'){	 
		if(typeof(lastCellValue)=='number'){
			GetInfo(lastCellValue)
		}
		initFormData()
		dialogFormVisible.value = true
	}else{
		  // GetInfo(table.value)
		  console.log(['table_type'])
		  console.log('此数据无法新增')
	}  
	
	// Productionadd()
}
//新增
const Productionadd = async () => {
  const response = await productionadd();
  if (response.code === 0) {
  }
  getTableData()
}
//删除
function onDel() {
	Del()
}
//删除
const Del = async () => {
  const response = await productiondel({UniqId:lastCellValue});
  if (response.code === 0) {
	ElMessage({
	  type: 'success',
	  message: '删除成功',
	})
  }
  getTableData()
}
const displayMod = ref('')
// 按工单显示
function onCountByGdbh() {
	if (displayMod.value === 'date') {
	   displayMod.value = 'gd'	
	   CountByGdbh()
	} else {
	  getTabdata()
	}
	
}
//按工单显示
const CountByGdbh = async () => {
  const response = await productionByGdbh();

  if (response.code === 0) {
		
		// console.log(displayMod.value)
		treeData.splice(0, treeData.length);
		  // 遍历接口返回的数据
		  response.data.forEach(item => {
		    // 创建父节点
		    treeData[item.sczl_gdbh] = {
		      label: item.sczl_gdbh+'【'+item.yj_yjmc+'】',
		      children: [],
			  params:{
				date: item.sczl_gdbh,
				sys_id:'' ,
				total: '',
			  }
		    };
		
		    // 添加子节点
		    for (const key in item.sys) {
		      const childNode = {
		        name: key,
		        label: key+'  【记录数'+item.sys[key]+'张】',
				params:{
					date: item.sczl_gdbh,
					sys_id:key ,
					total: item.sys[key],
				}
		      };
		      treeData[item.sczl_gdbh].children.push(childNode);			  
		    }
		  });
		// console.log(treeData)
		// //   // 打印树形结构
		//   console.log(JSON.stringify(tree, null, 2));
		
		//   // 将父子关系转换为数组
		//   const transformedData = Object.values(tree);
		//   console.log(transformedData);
		//   treeData = transformedData;
  }
  // // 将父子关系转换为数组
  // const transformedData = Object.values(tree);
  // console.log(transformedData)
  // treeData = transformedData;

  // getTableData()
}
// ============== 表格控制部分结束 ===============

// 获取需要的字典 可能为空 按需保留
const setOptions = async () => {
}

// 获取需要的字典 可能为空 按需保留
setOptions()

// 多选数据
const multipleSelection = ref([])
// 多选
const handleSelectionChange = (val) => {
  // multipleSelection.value = val
  if(val.length>0){
  	// multipleSelection.value = val
  	const lenth=val.length
  	// ScrapFactor.gdbh=val[lenth-1].combinedProp.split('-')[0];
  	// const parts = val[lenth-1].combinedProp2.split('-')
  	// ScrapFactor.yjno=parts[0];
  	// ScrapFactor.gxh=parts[1];
  	// ScrapFactor.type=val[lenth-1].sczl_检验类别
  	// console.log(ScrapFactor)
  	lastCellValue=val[lenth-1].UniqId
  	// console.log(val)
  	val.splice(0, val.length);  // 清空 val 数组	
  	console.log(lastCellValue)
  }
}

// 批量删除控制标记
const deleteVisible = ref(false)

// 多选删除
const onDelete = async () => {
  const ids = []
  if (multipleSelection.value.length === 0) {
    ElMessage({
      type: 'warning',
      message: '请选择要删除的数据'
    })
    return
  }
  multipleSelection.value &&
    multipleSelection.value.map(item => {
      ids.push(item.ID)
    })
  const res = await deleteCompanyByIds({ ids })
  if (res.code === 0) {
    ElMessage({
      type: 'success',
      message: '删除成功'
    })
    if (tableData.value.length === ids.length && page.value > 1) {
      page.value--
    }
    deleteVisible.value = false
    getTableData()
  }
}

// 行为控制标记（弹窗内部需要增还是改）
// const type = ref('')

// 更新行
const updateCompanyFunc = async (row) => {
  const res = await findCompany({ ID: row.ID })
  type.value = 'update'
  if (res.code === 0) {
    formData.value = res.data.recompany
    dialogFormVisible.value = true
  }
}

// 弹窗控制标记
const dialogFormVisible = ref(false)

// 打开弹窗
const openDialog = () => {
  type.value = 'create'
  dialogFormVisible.value = true
}

// 关闭弹窗
const closeDialog = () => {
  dialogFormVisible.value = false
}
// 弹窗确定
const enterDialog = async () => {
	//弹窗提示确认
	ElMessageBox.confirm('数据存盘?', '提示', {
	          confirmButtonText: '确定',
	          cancelButtonText: '取消',
	          type: 'warning'
	        }).then(() => {
				if(formData.value.sczl_gdbh==''){
					ElMessage({
						type: 'error',
						message: '请填写工单编号'
					});
					document.getElementById('工单编号').focus()
					document.getElementById('工单编号').select()
					return;
				}
				if(formData.value.sczl_yjno==''){
					ElMessage({
						type: 'error',
						message: '请填写印件号'
					});
					document.getElementById('印件号').focus()
					document.getElementById('印件号').select()
					return;
				}
				if(formData.value.sczl_gxmc==''){
					ElMessage({
						type: 'error',
						message: '请填写工序名称'
					});
					document.getElementById('工序名称').focus()
					document.getElementById('工序名称').select()
					return;
				}
				if(formData.value.sczl_rq==''){
					ElMessage({
						type: 'error',
						message: '请填写日期'
					});
					document.getElementById('日期').focus()
					document.getElementById('日期').select()
					return;
				}
				if(formData.value.sczl_bzdh==''){
					ElMessage({
						type: 'error',
						message: '请选择班组'
					});
					document.getElementById('组别').focus()
					document.getElementById('组别').select()
					return;
				}
				if(formData.value.sczl_cl==''){
					ElMessage({
						type: 'error',
						message: '请填写产量'
					});
					document.getElementById('产量').focus()
					document.getElementById('产量').select()
					return;
				}
				if(formData.value.sczl_dedh==''){
					ElMessage({
						type: 'error',
						message: '请选择定额代号'
					});
					document.getElementById('定额代号').focus()
					document.getElementById('定额代号').select()
					return;
				}
	          updateDetailData()
	        });
			
  // elFormRef.value?.validate(async (valid) => {
  //   if (!valid) return
	
  //   let res
  //   switch (type.value) {
  //     case 'create':
  //       res = await createCompany(formData.value)
  //       break
  //     case 'update':
  //       res = await updateCompany(formData.value)
  //       break
  //     default:
  //       res = await createCompany(formData.value)
  //       break
  //   }
  //   if (res.code === 0) {
  //     ElMessage({
  //       type: 'success',
  //       message: '创建/更改成功'
  //     })
  //     closeDialog()
  //     getTableData()
  //   }
	// updateDetailData()
  // })
  
}
// 更新数据
const updateDetailData = async() => {
  const restoredData = {
   UniqId: lastCellValue,
   sczl_gdbh: formData.value.sczl_gdbh,
   Gd_cpmc: formData.value.Gd_cpmc,
   sczl_yjno: formData.value.sczl_yjno,
   yj_yjmc: formData.value.yj_yjmc,
   sczl_gxmc: formData.value.sczl_gxmc,
   sczl_gxh: formData.value.sczl_gxh,
   sczl_type: formData.value.sczl_type,
   sczl_rq: formData.value.sczl_rq,
   sczl_jtbh: formData.value.sczl_jtbh,
   sczl_bzdh: formData.value.sczl_bzdh,
   sczl_ms: formData.value.sczl_ms,
   sczl_ls: formData.value.sczl_ls,
   sczl_cl: formData.value.sczl_cl,
   sczl_fp: formData.value.sczl_zcfp,
   sczl_装版总工时: formData.value.sczl_装版总工时,
   sczl_装版工时: formData.value.sczl_装版工时,
   sczl_保养工时: formData.value.sczl_保养工时,
   sczl_异常停机工时: formData.value.sczl_异常停机工时,
   sczl_打样总工时: formData.value.sczl_打样总工时,
   sczl_打样工时: formData.value.sczl_打样工时,
   sczl_设备运行工时: formData.value.sczl_设备运行工时,
   拆片联拼系数: formData.value.拆片联拼系数,
   拆片条小盒系数: formData.value.拆片条小盒系数,
   sczl_dedh: formData.value.sczl_dedh,
   sczl_工价系数: formData.value.sczl_工价系数,
   sczl_计产系数: formData.value.sczl_计产系数,
   sczl_bh1: formData.value.sczl_bh1,
   sczl_bh2: formData.value.sczl_bh2,
   sczl_bh3: formData.value.sczl_bh3,
   sczl_bh4: formData.value.sczl_bh4,
   sczl_bh5: formData.value.sczl_bh5,
   sczl_bh6: formData.value.sczl_bh6,
   sczl_bh7: formData.value.sczl_bh7,
   sczl_bh8: formData.value.sczl_bh8,
   sczl_bh9: formData.value.sczl_bh9,
   sczl_bh10: formData.value.sczl_bh10,
   sczl_rate1: formData.value.sczl_rate1,
   sczl_rate2: formData.value.sczl_rate2,
   sczl_rate3: formData.value.sczl_rate3,
   sczl_rate4: formData.value.sczl_rate4,
   sczl_rate5: formData.value.sczl_rate5,
   sczl_rate6: formData.value.sczl_rate6,
   sczl_rate7: formData.value.sczl_rate7,
   sczl_rate8: formData.value.sczl_rate8,
   sczl_rate9: formData.value.sczl_rate9,
   sczl_rate10: formData.value.sczl_rate10,
   sys_id:'[1002/郑小丽]',
  }
  // detailData.table.forEach((item, index, array) => {
  //   const num = index + 1
  //   restoredData[`sczl_gdbh${num}`] = item.sczl_gdbh
  //   restoredData[`sczl_yjGx${num}`] = item.sczl_yjGx
  //   restoredData[`sczl_gxmc${num}`] = item.sczl_gxmc
  //   // restoredData[`Gd_cpmc${num}`] = item.Gd_cpmc
  //   restoredData[`sczl_cl${num}`] = item.sczl_cl
  //   restoredData[`sczl_PgCl${num}`] = item.sczl_PgCl
  //   restoredData[`sczl_clAdd${num}`] = item.sczl_clAdd
  // })
  if(ADD.value=='新增'){
  	 // console.log('新增')
  	 const response = await productionadd(restoredData);
  	 // ADD.value='1'
  	 // console.log(ADD.value)
  	 ADD.value='0'
	 if(response.code==0){
		 ElMessage({
		   type: 'success',
		   message: '新增成功',
		 })
	 }
  	 dialogFormVisible.value = false
	 getTableData()
  }else{
  	  const response = await productionedit(restoredData);
	  if(response.code==0){
		 ElMessage({
		   type: 'success',
		   message: '更新成功',
		 })
	  }
	  dialogFormVisible.value = false
  	 // ADD.value='0'
  	 // console.log(ADD.value)
  }
  formData.value = []
 //   console.log(restoredData)
 //    console.log(lastCellValue)
 //    formData.value.UniqId=lastCellValue
 //    console.log(formData)
	// restoredData.UniqId='5'
  
  // console.log(FormData)
}
let table=ref(5);
let lastCellValue=ref()
let table_type=ref()
// 双击表格操作
const type = ref('')
function doubleClick(row, column, event) {
  type.value = 'update';
    lastCellValue= row['UniqId'];
  table.value=lastCellValue
  if(row['table_type']=='db_sczl'){
	  console.log(['table_type'])
  	 dialogFormVisible.value = true
  	 GetInfo(table.value)
  }else{
	  // GetInfo(table.value)
	  console.log(['table_type'])
	  console.log('此数据不展示详细信息')
  }  
}
// 单击表格操作
function Click(row, column, event) {
    lastCellValue= row['UniqId'];
	console.log(lastCellValue)
	table_type=row['table_type']
  // if(row['table_type']=='db_sczl'){
  // 	 dialogFormVisible.value = true
  // 	 GetInfo(table.value)
  // }else{
	 //  console.log('此数据不展示详细信息')
  // }  
}
//获取详细信息
const GetInfo = async (value) => {
  const response = await productionInfo({UniqId:value});
  if (response.code === 0) {
	  console.log(response)
	formData.value=response.data;
	console.log(formData)
  }
}

// 导出excel
function exportExcel() {
  console.log('导出到excel');
}

// 生命周期钩子
onMounted(async () => {
});
</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;
}
</style>