mes-zs-admin-backend-ui/src/view/yunyin/shengchanguanli/gongdanziliao.vue

<template>
  <div>
    <layout>
      <layout-header>
        <div class="">
          <!--按钮部分-->
          <el-form ref="elSearchFormRef"  class="demo-form-inline"  >
            <el-form-item>
              <el-input v-model="searchInfo"  placeholder="搜索订单编号" style="width: 180px;" @keyup.enter="onSubmit()"></el-input>
              <el-button type="primary" icon="search" @click="onSubmit" title="搜索"  ></el-button>
			  <el-button type="primary" icon="edit"   @click="cp_gdprintonClick" class="bt" title="打印生产订单" >订单打印</el-button>
              <el-button type="primary" class="bt" icon="edit"  @click="jsfjClick">附件上传</el-button> 
              <el-button type="primary" icon="edit"   @click="addgd_onclick"   class="bt"   title="新增工单资料">新增订单资料</el-button>
              <el-button type="primary" icon="edit"   @click="addgdyj_onclick"   class="bt" title="新增颜色资料">新增颜色资料</el-button>
              <el-button type="primary" icon="edit"   @click="addgdgy_onclick"   class="bt" title="新增工序资料" >新增工序资料</el-button>
              <el-button type="primary" icon="edit"   @click="del_ddzlClick" 	v-if="table_del=== true" :disabled="table_Selection === ''"  class="bt" title="删除订单资料"  >删除订单资料</el-button>
              <el-button type="primary" icon="edit"   @click="delgd_delclick" 	v-if="delall=== true" :disabled="ysSelection === '' && gySelection === ''"  class="bt"   >删除颜色工艺资料</el-button>
			</el-form-item>
          </el-form>
        </div> 
      </layout-header>
      <layout>

        <!-- 左侧树形结构 -->
        <layout-sider :resize-directions="['right']" :width="190" style="margin: 0px;">
          <div class="JKWTree-tree" style="height: 200px">
            <h3>客户编号</h3>
            <el-tree :data="treeData" class="treecolor" @node-click="handleNodeClick"></el-tree>
          </div>
        </layout-sider>

        <!-- 右侧内容区域 -->
        <layout-content >
          <el-main>
            <!-- 订单表格列表 -->
            <div class="gva-table-box">
              <el-table ref="multipleTable" style="width: 100%;height: 28vh"
                        :row-style="{ height: '20px' }" :header-cell-style="{ padding: '0px' }"
                        :cell-style="{ padding: '0px' }" :header-row-style="{ height: '20px' }"
                        border tooltip-effect="dark" :data="tableData" row-key="ID"
                        highlight-current-row="true"
                        :cell-class-name="tableDataCellClass"
						@row-click="tableRowClick" @row-dblclick="updateCompanyFunc"
                        @selection-change="ddzlSelectionChange" :show-overflow-tooltip="true">
                <el-table-column align="center" type="selection" width="30"/>
				<el-table-column align="center"  label="附件状态"     	prop="status" 	width="100" />
                <el-table-column align="left" sortable label="订单编号"     	prop="订单编号" 	width="105" />
				<el-table-column align="left" sortable label="客户"      	prop="客户编号" 		width="80" />
                <el-table-column align="left" sortable label="生产款号"   	prop="生产款号"  width="110" />
                <el-table-column align="left" sortable label="款式"       	prop="款式"   	width="100"/>
				<el-table-column align="left" sortable label="订单数量"    	prop="订单数量" 	width="105" />
				<el-table-column align="left" sortable label="落货日期"   	prop="落货日期" 	width="120" />
				<el-table-column align="left" sortable label="船样合计"    	prop="船样合计" 	width="105" />
				<el-table-column align="left" sortable label="船样描述"    	prop="船样描述" 	width="140" />
				<el-table-column align="left" sortable label="单位"    		prop="单位" 		width="80" />
                <el-table-column align="left" sortable label="面料"       	prop="面料" 		width="130" />
                <el-table-column align="left" sortable label="备注"       	prop="要求" 		width="130" />
                <el-table-column align="left" sortable label="粘衬"        	prop="粘衬"		width="80" />
				<el-table-column align="left" sortable label="箱唛要求"   	prop="箱唛要求" 	width="110" />
				<el-table-column align="left" sortable label="制单人"    	prop="Sys_id" 	width="160" />
				<el-table-column align="left" sortable label="制单日期"    	prop="Sys_rq" 	width="160" />
              </el-table>
              <!-- 分页 -->
				<div class="gva-pagination" style='height: 30px;margin-right: 10px;'>
                <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="page"
                    :page-sizes="[10, 30, 50, 100]"
                    layout="total"
                    :total="total">
                </el-pagination>
              </div>
            </div>

            <!-- 颜色资料列表、工艺资料列表、BOM资料列表  -->
            <el-tabs v-model="activeName" @tab-click="handleClick">
              <el-tab-pane label="颜色资料"  @click="showTable('颜色资料')"  name="first">
                <el-table ref="multipleTable"
                          :row-style="{ height: '20px' }"
                          :cell-style="{ padding: '0px' }" :header-row-style="{ height: '20px' }"
                          :header-cell-style="{ padding: '0px' }"
                          :show-overflow-tooltip="true"
                          highlight-current-row="true"
						  @row-click="ystableclick"
                          @row-dblclick="ysupdateCompanyFunc"
                          @selection-change="selectionChange($event, '颜色资料')"
                          style="width: 100%;height: 36vh" border show-summary
                          :summary-method="getSummaries" tooltip-effect="dark" :data="ystableData" row-key="ID" >
                  <el-table-column type="selection" width="30" />
                  <el-table-column align="left" sortable label="子订单编号" prop="子订单编号"  width="140"/>
				  <el-table-column align="left" sortable label="PO号	" prop="款号"  width="180"/>
				  <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="船样"  width="80"/>
				  <!-- 尺码列表 -->
                  <template v-for="item in sizeDatas">
                    <el-table-column align="left" sortable :label=item :prop=item  width="80"/> 
                  </template>
                  <el-table-column align="left" sortable label="制单总数" prop="zdtotal"  width="110"/>
                  <el-table-column align="left" sortable label="建档用户" prop="Sys_id"  width="160"/>
                  <el-table-column align="left" sortable label="建档时间" prop="Sys_rq"  width="160"/>
                  <el-table-column align="left" sortable label="更新时间" prop="更新时间"  width="110"/>
                </el-table>
              </el-tab-pane>

              <el-tab-pane label="工艺资料" @click="showTable('工艺资料')" name="second">
                <el-table ref="multipleTable"
                          :row-style="{ height: '20px' }"
                          :cell-style="{ padding: '0px' }" :header-row-style="{ height: '20px' }"
                          :header-cell-style="{ padding: '0px' }"
                          highlight-current-row="true"
                          :show-overflow-tooltip="true"
                          size="small"
                          :cell-class-name="gysatusCellClass"
                          @row-dblclick="gdgyupdateCompanyFunc"
                          @row-click="clickybupdate2"
                          :row-class-name="rowClassStyle2"
                          @selection-change="selectionChange($event, '工艺资料')"
                          style="width: 100%;height: 36vh" border tooltip-effect="dark" :data="gytableData" row-key="ID">
                  <el-table-column type="selection" width="30" />
                  <el-table-column align="left" label="完工状态" prop="完工状态"  width="75"/>
                  <el-table-column align="left" label="工序名称" prop="工序名称"  width="280"/>
                  <el-table-column align="left" label="计划产量" prop="计划产量"  width="80"/>
                  <el-table-column align="left" label="建档用户" prop="建档用户"  width="90"/>
                  <el-table-column align="left" label="建档日期" prop="建档日期"  width="150"/>
                </el-table>
              </el-tab-pane>

              <el-tab-pane label="订单资料附件" name="third">
                <el-table ref="multipleTable"
                          :row-style="{ height: '30px' }"
                          :cell-style="{ padding: '0px' }" :header-row-style="{ height: '30px' }"
                          :header-cell-style="{ padding: '0px' }"
                          :show-overflow-tooltip="true"
                          :cell-class-name="planUsageCellClass"
                          highlight-current-row="true"
                          @row-dblclick="gdbomupdateCompanyFunc"
                          style="width: 100%;height: 36vh" border tooltip-effect="dark" :data="ddtableData" row-key="ID"
						   @selection-change="fjSelectionChange">
                 <el-table-column align="left" label="关联编号" prop="关联编号"  width="115"/>
                 <el-table-column align="left" label="备注" 	prop="附件备注"  width="110"/>
                 <el-table-column align="left" label="文件类型" prop="附件类型"  width="100"/>
                 <el-table-column align="left" label="建档时间" prop="sys_rq"  width="160"/>
                 <el-table-column align="left" label="建档用户" prop="sys_id"  width="200"/>
                </el-table>
              </el-tab-pane> 
			  

			  <el-tab-pane label="技术附件" @click="showTable('技术附件')" name="fourth">
			  	<el-table ref="multipleTable"
					  :row-style="{ height: '30px' }"
					  :cell-style="{ padding: '0px' }" :header-row-style="{ height: '30px' }"
					  :header-cell-style="{ padding: '0px' }"
					  :show-overflow-tooltip="true"
					  :cell-class-name="planUsageCellClass"
					  highlight-current-row="true"
					  @row-dblclick="ExcelShow"
					  style="width: 100%;height: 36vh" border tooltip-effect="dark" :data="jstableData" row-key="ID" @selection-change="fjSelectionChange">
				  <el-table-column align="left" label="关联编号" prop="关联编号"  width="115"/>
				  <el-table-column align="left" label="备注" 	prop="附件备注"  width="110"/>
				  <el-table-column align="left" label="文件类型" prop="附件类型"  width="100"/>
				  <el-table-column align="left" label="建档时间" prop="sys_rq"  width="160"/>
				  <el-table-column align="left" label="建档用户" prop="sys_id"  width="200"/>
			      </el-table>
			    </el-tab-pane>
            </el-tabs>


         <!-- 修改颜色资料弹窗 -->
         <el-dialog v-model="dialogFormVisible" :before-close="edit_closeDialog" 
		 style="width: 80%; max-height: 80%; overflow-y: auto; margin-top: 4%;"
		 title="颜色资料修改" destroy-on-close >
             <el-row :gutter="20" class="form-row">
                 <el-col :span="10">
                     <div style="display: flex; gap: 0px;">
                         <h3 style="color:red;font-size: 24px;margin:-5px 0px 8px 12px;">订单编号&nbsp;&nbsp;&nbsp;{{_ddhval}}</h3>
                     </div>
                 </el-col>
                 <el-col :span="10">
                     <div style="display: flex; gap: 0px;">
                         <el-form-item label="订单子编号:" class="mab" prop="keyOrder" label-width='110'>
                             <el-input v-model="edit_formData['子订单编号']" disabled style="width: 250px;" id="订单子编号" />
                         </el-form-item>
                     </div>
                 </el-col>
             </el-row>
         
             <el-row :gutter="20">
                <el-col :span="10">
                     <div style="display: flex; gap: 0px;">
                         <el-form-item label="色系名称:" class="mab" prop="keyOrder" label-width='110'>
							<el-select
							v-model=" edit_formData['颜色']" style="width: 150px;" id="色系名称" 
							@keydown="add_gdzlent($event, '', '色系名称', '款号:')">
							<el-option 
							  v-for="color in getSuborderscolor.colorlist" 
							  :key="color.id" 
							  :label="color.colorname" 
							  :value="color.colorname"  
							  @click="xg_sxhandleSizeChange(color.colorname,color.colorcode)">
							</el-option>
							</el-select>
                         </el-form-item>
                     </div>
                 </el-col>
				 
                 <el-col :span="10">
                     <el-form-item label="PO号:" prop="deliveryDate" class="mab" label-width="110px" style="">
                         <el-input v-model="edit_formData['款号']" style="width: 250px;" id="生产款号" />
                     </el-form-item>
                 </el-col>
             </el-row>
         
             <el-row :gutter="20">
				 <el-col :span="8">
				   <el-form-item label="颜色备注:" prop="joinDate" label-width='110'>
				     <el-input v-model="edit_formData['颜色备注']" style="width: 250px;" id ='颜色备注' @keydown="add_gdzlent($event, '款号:', '颜色备注', '是否船样')"/>
				   </el-form-item>
				 </el-col>
                <el-col :span="10">
                     <div style="display: flex; gap: 0px;">
                        <el-form-item label="是否船样:" prop="joinDate" label-width='200'>
                             <el-select v-model="edit_formData['船样']" style="width: 150px;" id="是否船样" @keydown="add_gdzlent($event, '尺码规格', '是否船样', 'zds1')">
								 <el-option label="是" value="是" @click="edit_cyChange('是')"></el-option>
								 <el-option label="否" value="否" @click="edit_cyChange('否')"></el-option>
                             </el-select>
                         </el-form-item>
                     </div>
                 </el-col>
             </el-row>
         
             <el-row class="form-row">
                 <el-col :span="20">
                     <div style="display: flex; gap: 0px;">
                         <el-form-item label="尺码:" class="mab" prop="keyOrder" label-width='110'>
                             <el-input v-model="edit_cmformdata.cm1" readonly style="width: 80px;" />
                             <el-input v-model="edit_cmformdata.cm2" readonly style="width: 80px;" />
                             <el-input v-model="edit_cmformdata.cm3" readonly style="width: 80px;" />
                             <el-input v-model="edit_cmformdata.cm4" readonly style="width: 80px;" />
                             <el-input v-model="edit_cmformdata.cm5" readonly style="width: 80px;" />
                             <el-input v-model="edit_cmformdata.cm6" readonly style="width: 80px;" />
                             <el-input v-model="edit_cmformdata.cm7" readonly style="width: 80px;" />
                             <el-input v-model="edit_cmformdata.cm8" readonly style="width: 80px;" />
                             <el-input v-model="edit_cmformdata.cm9" readonly style="width: 80px;" />
							 <el-input v-model="edit_cmformdata.cm10" readonly style="width: 80px;" />
                         </el-form-item>
                     </div>
                 </el-col>
             </el-row>
         
             <el-row class="form-row">
                 <el-col :span="20">
                     <div style="display: flex; gap: 0px;">
                         <el-form-item label="制单数:" class="mab" prop="keyOrder" label-width='110'>
                             <el-input v-model="edit_zdsformdata.zds1" @input="updateTotal" style="width: 80px;" id="zds1" @keydown="add_gdzlent($event, '是否船样', 'zds1', 'zds2')" />
                             <el-input v-model="edit_zdsformdata.zds2" @input="updateTotal" style="width: 80px;" id="zds2" @keydown="add_gdzlent($event, 'zds1', 'zds2', 'zds3')" />
                             <el-input v-model="edit_zdsformdata.zds3" @input="updateTotal" style="width: 80px;" id="zds3" @keydown="add_gdzlent($event, 'zds2', 'zds3', 'zds4')" />
                             <el-input v-model="edit_zdsformdata.zds4" @input="updateTotal" style="width: 80px;" id="zds4" @keydown="add_gdzlent($event, 'zds3', 'zds4', 'zds5')" />
                             <el-input v-model="edit_zdsformdata.zds5" @input="updateTotal" style="width: 80px;" id="zds5" @keydown="add_gdzlent($event, 'zds4', 'zds5', 'zds6')" />
                             <el-input v-model="edit_zdsformdata.zds6" @input="updateTotal" style="width: 80px;" id="zds6" @keydown="add_gdzlent($event, 'zds5', 'zds6', 'zds7')" />
                             <el-input v-model="edit_zdsformdata.zds7" @input="updateTotal" style="width: 80px;" id="zds7" @keydown="add_gdzlent($event, 'zds6', 'zds7', 'zds8')" />
                             <el-input v-model="edit_zdsformdata.zds8" @input="updateTotal" style="width: 80px;" id="zds8" @keydown="add_gdzlent($event, 'zds7', 'zds8', 'zds9')" />
							 <el-input v-model="edit_zdsformdata.zds9" @input="updateTotal" style="width: 80px;" id="zds9" @keydown="add_gdzlent($event, 'zds8', 'zds9', '色系名称')" />
                             <el-input v-model="edit_zdsformdata.zds10" readonly style="width: 80px;" />
                         </el-form-item>
                     </div>
                 </el-col>
             </el-row>
             
             <template #footer>
                 <div class="dialog-footer" style="display: flex; justify-content: flex-end; margin-top: 20px;">
                     <el-button @click="ys_edit_closeDialog" style="margin-left: 10px;">取消</el-button>
                     <el-button type="primary" @click="ys_edit_Dialog" style="margin-left: 10px;">确认</el-button>
                 </div>
             </template>

         </el-dialog>
      
			
			<!-- 新增订单资料弹窗 -->
		<el-dialog v-model="add_gddialogFormVisible" :before-close="add_gdcloseDialog"
		          title="新增订单资料" width="70%" top="3%" destroy-on-close>
		  
		  <div style="display: flex; justify-content: space-between;">
		    <div style="flex: 2;">
		      <el-form :model="add_gdscgdformData">
		        <div style="display: flex;">
		          <div style="flex: 1; margin-right: 20px;">
		            <el-form-item label="订单编号" label-width="100px">
		              <el-input v-model="add_gdscgdformData.订单编号" disabled />
		            </el-form-item>
		            <el-form-item label="生产款号" label-width="100px">
		              <el-input
		                v-model="add_gdscgdformData['生产款号']" id="生产款号"
		                @keydown="add_gdzlent($event, '粘衬', '生产款号', '订单数量')" 
		              />
		            </el-form-item>
		            <el-form-item label="款式" label-width="100px">
		              <el-input
		                v-model="add_gdscgdformData['款式']" id="款式"
		                @keydown="add_gdzlent($event, '订单数量', '款式', '落货日期')"
		              />
		            </el-form-item>
		          </div>
		          <div style="flex: 1;">
		            <el-form-item label="客户编号" label-width="100px">
		              <el-input v-model="add_gdscgdformData.客户编号" disabled />
		            </el-form-item>
		            <el-form-item label="订单数量" label-width="100px">
		              <el-input v-model="add_gdscgdformData.订单数量" id="订单数量"
		               @keydown="add_gdzlent($event, '生产款号', '订单数量', '款式')" 
		              />
		            </el-form-item>
		            <el-form-item label="落货日期" label-width="100px">
		              <el-date-picker
		                v-model="add_gdscgdformData['落货日期']" id="落货日期"
		                type="date"
		                @keydown="add_gdzlent($event, '款式', '落货日期', '面料')"
		              />
		            </el-form-item>
		          </div>
		        </div>
		
		        <!-- 面料部分 -->
		        <el-form-item label="面料" label-width="100px">
		          <el-input
		            type="textarea"
		            v-model="add_gdscgdformData['面料']" id="面料"
		            rows="2"
		            resize="none"
		            @keydown="add_gdzlent($event, '落货日期', '面料', '箱唛要求')" 
		          />
		        </el-form-item>
		
		        <!-- 箱唛要求 -->
		        <el-form-item label="箱唛要求" label-width="100px">
		          <el-input
		            type="textarea"
		            v-model="add_gdscgdformData['箱唛要求']" id="箱唛要求"
		            @keydown="add_gdzlent($event, '面料', '箱唛要求', '备注')"
		            rows="2"
		            resize="none"
		          />
		        </el-form-item>
		
		        <!-- 备注 -->
		        <el-form-item label="备注" label-width="100px">
		          <el-input
		            type="textarea"
		            v-model="add_gdscgdformData['备注']" id="备注"
		            @keydown="add_gdzlent($event, '箱唛要求', '备注', '船样描述')"
		            rows="2"
		            resize="none"
		          />
		        </el-form-item>
		
		        <!-- 船样描述 -->
		        <el-form-item label="船样描述" label-width="100px">
		          <el-input
		            type="textarea"
		            v-model="add_gdscgdformData['船样描述']" id="船样描述"
		            rows="2"
		            resize="none"
		            @keydown="add_gdzlent($event, '备注', '船样描述', '船样合计')"
		          />
		        </el-form-item>
		      </el-form>
		    </div>
		
		    <!-- 右侧部分 -->
		    <div style="flex: 1; margin-left: 20px;">
		      <div style="display: flex; align-items: center;">
		        <el-upload
		          ref="uploadRef"
		          class="upload-demo"
		          :action="uploadUrl"
		          :http-request="customUpload"
		          :headers="uploadHeaders"
		          list-type="picture-card"
		          :on-preview="handlePreview"
		          :on-remove="handleRemove"
		          :before-upload="beforeUpload"
		          :on-success="handleSuccess"
		          :on-error="handleError"
		          :file-list="fileList"
		          :limit="1"
		          accept="image/jpeg,image/png"
		          style="margin-left: 20px;"
		        >
		          <i class="el-icon-plus"></i>
		        </el-upload>
		      </div>
			<h4 style="font-size: 18px; margin-left: 150px;">上传图片</h4>
		      <el-form>
		        <el-form-item label="制单人" label-width="120px">
		          <el-input v-model="add_gdscgdformData['Sys_id']" disabled />
		        </el-form-item>
		        <el-form-item label="制单日期" label-width="120px">
		          <el-date-picker
		            v-model="add_gdscgdformData['制单日期']"
		            disabled
		            type="date"
		          />
		        </el-form-item>
		      </el-form>
		    </div>
		  </div>
		
		  <!-- 底部部分 -->
		  <div style="display: flex; justify-content: space-between; margin-top: 10px;">
		    <el-form :model="add_gdscgdformData" style="flex: 1;">
		      <div style="display: flex;">
		        <div style="flex: 1; margin-right: 20px;">
		          <el-form-item label="船样合计" label-width="100px">
		            <el-input v-model="add_gdscgdformData['船样合计']" id="船样合计"
		              @keydown="add_gdzlent($event, '船样描述', '船样合计', '粘衬')"
		            />
		          </el-form-item>
		        </div>
		        <div style="flex: 1;">
		          <el-form-item label="粘衬" label-width="100px">
		            <el-input v-model="add_gdscgdformData['粘衬']" id="粘衬"
		              @keydown="add_gdzlent($event, '船样合计', '粘衬', '单位')"
		            />
		          </el-form-item>
		        </div>
		        <div style="flex: 1;">
		          <el-form-item label="单位" label-width="100px">
		            <el-input v-model="add_gdscgdformData['单位']" id="单位"
		              @keydown="add_gdzlent($event, '粘衬', '单位', '生产款号')"
		            />
		          </el-form-item>
		        </div>
		      </div>
		    </el-form>
		  </div>
		
		  <!-- 底部操作按钮 -->
		  <template #footer>
		    <div class="dialog-footer" style="text-align: right;">
		      <el-button @click="add_gdcloseDialog">取消</el-button>
		      <el-button type="primary" @click="add_gdenterDialog">确定</el-button>
		    </div>
		  </template>
		</el-dialog>
		
            
		<el-dialog
		  v-model="ddzl_dialogFormVisible"
		  :before-close="dd_closeDialog"
		  title="修改订单资料"
		  width="70%"
		  top="3%"
		  destroy-on-close
		>
		  <!-- 主布局，分为左右两部分 -->
		  <el-row>
		    <!-- 左侧部分，包括第一列和第二列 -->
		    <el-col :span="16">
		      <el-row>
		        <!-- 第一列 -->
		        <el-col :span="12">
		          <el-form :model="edit_ddformData">
		            <el-form-item label="订单编号" label-width="100px">
		              <el-input v-model="edit_ddformData['订单编号']" disabled />
		            </el-form-item>
		
		            <el-form-item label="生产款号" label-width="100px">
		              <el-input
		                v-model="edit_ddformData['生产款号']" id='生产款号'
		                @keydown="add_gdzlent($event, '单位', '生产款号', '订单数量')"
		              />
		            </el-form-item>
		
		            <el-form-item label="款式" label-width="100px">
		              <el-input
		                v-model="edit_ddformData['款式']"id='款式'
		                @keydown="add_gdzlent($event, '订单数量', '款式', '落货日期')"
		              />
		            </el-form-item>
		          </el-form>
		        </el-col>
		
		        <!-- 第二列 -->
		        <el-col :span="12">
		          <el-form>
		            <el-form-item label="客户编号" label-width="100px">
		              <el-input v-model="edit_ddformData['客户编号']" disabled />
		            </el-form-item>
					<el-form-item label="订单数量" label-width="100px">
					  <el-input v-model="edit_ddformData['订单数量']" id='订单数量'
		                @keydown="add_gdzlent($event, '生产款号', '订单数量', '款式')"
		              />
					</el-form-item>
		            <el-form-item label="落货日期" label-width="100px">
		              <el-date-picker
		                v-model="edit_ddformData['落货日期']"
		                type="date"id='落货日期'
		                 @keydown="add_gdzlent($event, '款式', '落货日期', '面料')"
		               />
		            </el-form-item>
		          </el-form>
		        </el-col>
		      </el-row>
		
		      <!-- 面料，独占两列宽度，继续在左侧布局 -->
		      <el-row>
		        <el-col :span="24">
		          <el-form-item label="面料" label-width="100px">
		            <el-input
		              type="textarea"
		              v-model="edit_ddformData['面料']"
		              rows="2"
		              resize="none" id='面料'
		                 @keydown="add_gdzlent($event, '落货日期', '面料', '箱唛要求')"
		               />
		          </el-form-item>
		        </el-col>
		      </el-row>
		
		      <!-- 其他表单项 -->
		      <el-row>
		        <el-col :span="24">
		          <el-form-item label="箱唛要求" label-width="100px">
		            <el-input
		              type="textarea" id='箱唛要求'
					  v-model="edit_ddformData['箱唛要求']"
		                 @keydown="add_gdzlent($event, '面料', '箱唛要求', '要求')"
		              rows="2"
		              resize="none"
		            />
		          </el-form-item>
		        </el-col>
		      </el-row>
		
		      <el-row>
		        <el-col :span="24">
		          <el-form-item label="备注" label-width="100px">
		            <el-input
		              type="textarea"
		              v-model="edit_ddformData['要求']" id='要求'
		                 @keydown="add_gdzlent($event, '箱唛要求', '要求', '船样描述')"
		              rows="2"
		              resize="none"
		            />
		          </el-form-item>
		        </el-col>
		      </el-row>
			  
			  <el-row>
			    <el-col :span="24">
			      <el-form-item label="船样描述" label-width="100px">
			        <el-input
			          type="textarea" id='船样描述'
		                 @keydown="add_gdzlent($event, '要求', '船样描述', '船样合计')"
			          v-model="edit_ddformData['船样描述']"
			          rows="2"
			          resize="none"
			        />
			      </el-form-item>
			    </el-col>
			  </el-row>
		    </el-col>
		
		    <!-- 右侧部分，第三列 -->
		    <el-col :span="8">
		      <el-form>
		      <div style="display: flex; align-items: center;">
		        <el-upload
		          ref="uploadRef"
		          class="upload-demo"
		          :action="uploadUrl"
		          :http-request="customUpload"
		          :headers="uploadHeaders"
		          list-type="picture-card"
		          :on-preview="handlePreview"
		          :on-remove="handleRemove"
		          :before-upload="beforeUpload"
		          :on-success="handleSuccess"
		          :on-error="handleError"
		          :file-list="fileList"
		          :limit="1"
		          accept="image/jpeg,image/png"
		          style="margin-left: 20px;"
		        >
		          <i class="el-icon-plus"></i>
		        </el-upload>
		      </div>
			<h4 style="font-size: 18px; margin-left: 150px;">上传图片</h4>
		
		        <!-- 独立的制单信息 -->
		        <el-form-item label="制单人" label-width="120px">
		          <el-input v-model="edit_ddformData['Sys_id']" disabled />
		        </el-form-item>
		
		        <el-form-item label="制单日期" label-width="120px">
		          <el-date-picker
		            v-model="edit_ddformData['Sys_rq']" id='制单日期'
		            disabled
		            type="date"
		          />
		        </el-form-item>
		      </el-form>
		    </el-col>
		  </el-row>
		
		  <!-- 底部其他表单项 -->

		<div style="display: flex; justify-content: space-between; margin-top: 10px;">
		  <el-form :model="edit_ddformData" style="flex: 1;">
		    <div style="display: flex;">
		      <div style="flex: 1; margin-right: 20px;">
		        <el-form-item label="船样合计" label-width="100px">
		          <el-input v-model="edit_ddformData['船样合计']" id="船样合计"
		            @keydown="add_gdzlent($event, '船样描述', '船样合计', '粘衬')"
		          />
		        </el-form-item>
		      </div>
		      <div style="flex: 1;">
		        <el-form-item label="粘衬" label-width="100px">
		          <el-input v-model="edit_ddformData['粘衬']" id="粘衬"
		            @keydown="add_gdzlent($event, '船样合计', '粘衬', '单位')"
		          />
		        </el-form-item>
		      </div>
		      <div style="flex: 1;">
		        <el-form-item label="单位" label-width="100px">
		          <el-input v-model="edit_ddformData['单位']" id="单位"
		            @keydown="add_gdzlent($event, '粘衬', '单位', '生产款号')"
		          />
		        </el-form-item>
		      </div>
		    </div>
		  </el-form>
		</div>
		  <!-- 底部操作按钮 -->
		  <template #footer>
		    <div class="dialog-footer" style="text-align: right;">
		      <el-button @click="dd_closeDialog">取消</el-button>
		      <el-button type="primary" @click="dd_edit_Dialog">确定</el-button>
		    </div>
		  </template>
		</el-dialog>
			
			
			<!-- 新增颜色资料弹窗 -->
         <el-dialog
            v-model="add_gdyjdialogFormVisible"
            :before-close="add_gdyjcloseDialog"
            style="width: 66%; max-height: 80%; overflow-y: auto; margin-top: 4%;"
            :title="'新增颜色资料'"
            destroy-on-close>
            <el-form label-width="100px" :model="add_yszlformdata">
              <el-row :gutter="24" class="form-row">
                <el-col :span="10">
                  <div style="display: flex; gap: 0px;">
                    <h3 style="color:red;font-size: 24px;margin:-5px 0px 8px 12px;" >订单编号&nbsp;&nbsp;&nbsp;{{_ddhval}}</h3>
                  </div>
                </el-col>
                <el-col :span="10">
                  <el-form-item label="订单子编号:" class="mab" prop="keyOrder" id ='订单子编号' label-width='110'>
                    <el-input v-model="add_yszlformdata.ddzbh" disabled style="width: 250px;" />
                  </el-form-item>
                </el-col>
              </el-row>
        
              <el-row :gutter="24" class="form-row">
                <el-col :span="10">
                  <el-form-item label="色系名称:" class="mab" prop="keyOrder" label-width='110'>
					  <el-select
						v-model="add_yszlformdata.sxmc" style="width: 150px;" id="色系名称" 
						@keydown="add_gdzlent($event, '', '色系名称', '款号:')">
						<el-option 
						  v-for="color in getSuborderscolor.colorlist" 
						  :key="color.id" 
						  :label="color.colorname" 
						  :value="color.colorname"  
						  @click="xz_sxhandleSizeChange(color.colorname,color.colorcode)">
						</el-option>
					  </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="10">
                  <el-form-item label="PO号:" class="mab" prop="keyOrder" label-width="110">
                    <el-input v-model="add_yszlformdata.kh" style="width: 250px;" id ='款号:' @keydown="add_gdzlent($event, '色系名称', '款号:', '颜色备注')"/>
                  </el-form-item>
                </el-col>
              </el-row>
        
              <el-row :gutter="24" class="form-row">
				  <el-col :span="8">
				    <el-form-item label="颜色备注:" prop="joinDate" label-width='110'>
				      <el-input v-model="add_yszlformdata.ysbz" style="width: 250px;" id ='颜色备注' @keydown="add_gdzlent($event, '款号:', '颜色备注', '是否船样')"/>
				    </el-form-item>
				  </el-col>
    
                <el-col :span="8">
                  <el-form-item label="是否船样:" prop="joinDate" label-width='200'>
                    <el-select v-model="add_yszlformdata.sfcy" style="width: 150px;" id ='是否船样'  @keydown="add_gdzlent($event, '颜色备注', '是否船样', 'cm1')">
                      <el-option label="是" value="是" @click="cyChange('是')"></el-option>
                      <el-option label="否" value="否" @click="cyChange('否')"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
        
              <el-row :gutter="24" class="form-row">
                <el-col :span="24">
                  <el-form-item label="尺码:" class="mab" prop="keyOrder" label-width='110'>
                    <el-input v-model="cmformdata.cm1"  style="width: 80px;" id ='cm1'  @keydown="add_gdzlent($event, '是否船样', 'cm1', 'cm2')"/>
                    <el-input v-model="cmformdata.cm2"  style="width: 80px;" id ='cm2'  @keydown="add_gdzlent($event, 'cm1', 'cm2', 'cm3')"/>
                    <el-input v-model="cmformdata.cm3"  style="width: 80px;" id ='cm3'  @keydown="add_gdzlent($event, 'cm2', 'cm3', 'cm4')"/>
                    <el-input v-model="cmformdata.cm4"  style="width: 80px;" id ='cm4'  @keydown="add_gdzlent($event, 'cm3', 'cm4', 'cm5')"/>
                    <el-input v-model="cmformdata.cm5"  style="width: 80px;" id ='cm5'  @keydown="add_gdzlent($event, 'cm4', 'cm5', 'cm6')"/>
                    <el-input v-model="cmformdata.cm6"  style="width: 80px;" id ='cm6'  @keydown="add_gdzlent($event, 'cm5', 'cm6', 'cm7')"/>
                    <el-input v-model="cmformdata.cm7"  style="width: 80px;" id ='cm7'  @keydown="add_gdzlent($event, 'cm6', 'cm7', 'cm8')"/>
                    <el-input v-model="cmformdata.cm8"  style="width: 80px;" id ='cm8'  @keydown="add_gdzlent($event, 'cm7', 'cm8', 'cm9')"/>
					<el-input v-model="cmformdata.cm9"  style="width: 80px;" id ='cm9'  @keydown="add_gdzlent($event, 'cm8', 'cm9', 'zds1')"/>
                    <el-input v-model="cmformdata.cm10"  style="width: 80px;"/>
                  </el-form-item>
                </el-col>
              </el-row>
        
              <el-row :gutter="24" class="form-row">
                <el-col :span="24">
                  <el-form-item label="制单数:" class="mab" prop="keyOrder" label-width='110'>
                    <el-input v-model="zdsformdata.zds1" @input="updateTotal" style="width: 80px;" id ='zds1'  @keydown="add_gdzlent($event, 'cm9', 'zds1', 'zds2')"/>
                    <el-input v-model="zdsformdata.zds2" @input="updateTotal" style="width: 80px;" id ='zds2'  @keydown="add_gdzlent($event, 'zds1', 'zds2', 'zds3')"/>
                    <el-input v-model="zdsformdata.zds3" @input="updateTotal" style="width: 80px;" id ='zds3'  @keydown="add_gdzlent($event, 'zds2', 'zds3', 'zds4')"/>
                    <el-input v-model="zdsformdata.zds4" @input="updateTotal" style="width: 80px;" id ='zds4'  @keydown="add_gdzlent($event, 'zds3', 'zds4', 'zds5')"/>
                    <el-input v-model="zdsformdata.zds5" @input="updateTotal" style="width: 80px;" id ='zds5'  @keydown="add_gdzlent($event, 'zds4', 'zds5', 'zds6')"/>
                    <el-input v-model="zdsformdata.zds6" @input="updateTotal" style="width: 80px;" id ='zds6'  @keydown="add_gdzlent($event, 'zds5', 'zds6', 'zds7')"/>
                    <el-input v-model="zdsformdata.zds7" @input="updateTotal" style="width: 80px;" id ='zds7'  @keydown="add_gdzlent($event, 'zds6', 'zds7', 'zds8')"/>
                    <el-input v-model="zdsformdata.zds8" @input="updateTotal" style="width: 80px;" id ='zds8'  @keydown="add_gdzlent($event, 'zds7', 'zds8', 'zds9')"/>
					<el-input v-model="zdsformdata.zds9" @input="updateTotal" style="width: 80px;" id ='zds9'  @keydown="add_gdzlent($event, 'zds8', 'zds9', '色系名称')"/>
                    <el-input v-model="zdsformdata.zds10" readonly style="width: 80px;" />
                  </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_dyjcloseDialog">取消</el-button>
                <el-button type="primary" @click="add_gdyjenterDialog">确定</el-button>
              </div>
            </template>
            
          </el-dialog>
            
        <!-- 新增工序资料-->
        <el-dialog v-model="visible" :before-close="()=> visible = false" style="width: 25%;margin: 10% auto" :title="'新增工序资料'" destroy-on-close>
    <el-form>
      <div>
        <div style="display: flex; gap: 0px;">
          <h3 style="color:red;font-size: 24px;margin:0px 0px 0px 15px;">订单号&nbsp;&nbsp;&nbsp;{{_ddhval}}</h3>
        </div>

        <div style="display: flex; gap: 0px;">
          <el-form-item label="仓库出库："  class="mab" prop="isBanciSelected" label-width="110">
        <el-checkbox v-model="form['仓库出库']"></el-checkbox>
          </el-form-item>
        </div>

        <div style="display: flex; gap: 0px;">
          <el-form-item label="裁切："  class="mab" prop="isBanciSelected" label-width="110">
          <el-checkbox v-model="form['裁切']"></el-checkbox>
          </el-form-item>
        </div>

        <div style="display: flex; gap: 0px;">
          <el-form-item label="车缝："  class="mab" prop="isBanciSelected" label-width="110">
          <el-checkbox v-model="form['车缝']"></el-checkbox>
          </el-form-item>
        </div>

        <div style="display: flex; gap: 0px;">
          <el-form-item label="后道收样："  class="mab" prop="isBanciSelected" label-width="110">
          <el-checkbox v-model="form['后道收样']"></el-checkbox>
          </el-form-item>
        </div>

        <div style="display: flex; gap: 0px;">
          <el-form-item label="大烫："  class="mab" prop="isBanciSelected" label-width="110">
          <el-checkbox v-model="form['大烫']"></el-checkbox>
          </el-form-item>
        </div>

        <div style="display: flex; gap: 0px;">
          <el-form-item label="总检："  class="mab" prop="isBanciSelected" label-width="110">
          <el-checkbox v-model="form['总检']"></el-checkbox>
          </el-form-item>
        </div>

        <div style="display: flex; gap: 0px;">
          <el-form-item label="包装："  class="mab" prop="isBanciSelected" label-width="110">
          <el-checkbox v-model="form['包装']"></el-checkbox>
          </el-form-item>
        </div>
      </div>
    </el-form>
    <template #footer>
      <div class="dialog-footer" style="text-align: right;top: auto;">
      <el-button @click="add_gxcloseDialog">取 消</el-button>
      <el-button type="primary"  @click="add_gxenterDialog">确 定</el-button>
      </div>
    </template>
        </el-dialog>

        <!-- 技术附件 -->
        <el-dialog v-model="jsfjdialogFormVisible" :before-close="jsfjcloseDialog" :title="产品技术附件资料" 
					style="margin-top: 40px" height="500px" width="700px" destroy-on-close>
			  <el-form :model="jsfjformdata" label-position="right" ref="elFormRef" :rules="rule" label-width="90px">
				<el-row :gutter="24">
					<el-col :span="10">
					 <div style="display: flex; gap: 0px;">
					   <h3 style="color:red;font-size: 24px;margin:-5px 0px 8px 12px;" >订单编号&nbsp;&nbsp;&nbsp;{{_ddhval}}</h3>
					 </div>
					</el-col>
				</el-row>
				<br />
				<el-row :gutter="24">  
				  <el-col :span="16">  
					<el-form-item label="附件备注:" prop="address" class="mab">  
					  <el-select v-model="jsfjformdata.附件备注" placeholder="请选择附件类型" id="附件备注">  
						<el-option label="订单附件" value="订单资料附件"></el-option>
						<el-option label="技术附件" value="技术附件"></el-option>
					  </el-select>  
					</el-form-item>  
				  </el-col>  
				</el-row> 
				<el-row :gutter="24">
					<el-col :span="8">
						<br>
						<p>附件文件类型必须是"XLSX"格式</p> 
					</el-col>
					<el-col :span="12">
						<br>
						<input style="font-size:16px;" type="file" @change="uploadExcel" >
					</el-col>
					<el-col :span="4">
						<br>
						<el-button @click="yulan">预览</el-button>
					</el-col>
				</el-row>
			  </el-form>
			  <template #footer>
				  <br>
				<div class="dialog-footer">
				  <el-button @click="jsfjcloseDialog">取 消</el-button>
				  <el-button type="primary"  @click="jsfjenterDialog">确 定</el-button>
				</div>
			  </template>
			</el-dialog>
		
			<!-- 技术附件预览弹窗 -->
			<el-dialog v-model="luckyexcelVisible" :before-close="luckyexcelCloseDialog" width="100%" top="0vh">
			  <div id="luckyexcel" style="width: 100%;height: 100vh;"></div>
			</el-dialog>

          </el-main>
        </layout-content>
      </layout>
    </layout>

    <PrintPage ref="printPageRef" />
		<!-- <div class="print-section">
		 <link href="https://cdn.jsdelivr.net/npm/vue-plugin-hiprint@1.0.0/dist/print-lock.css" rel="stylesheet" media="print">
		 <link href="https://unpkg.com/vue-plugin-hiprint@1.0.0/dist/print-lock.css" rel="stylesheet">
		</div> -->
		<div id="preview"></div>
  </div>
  
	
	
	
</template>
<script>
//点击按钮显示下方表格
export default {
  data() {
    return {
      currentTable: '', // 当前展示的表格
      activeName: 'first',
      _ddhval:'',
	  add_gddialogFormVisible: true,

    };
  },
  methods: {
    
  }
};
</script>

<script setup>
// 全量引入格式化工具 请按需保留
import $script from 'scriptjs'
import $ from 'jquery';
import LuckyExcel from 'luckyexcel';
import { Layout, LayoutSider, LayoutContent } from '@arco-design/web-vue';
import { ElMessage, ElMessageBox,ElUpload, ElButton } from 'element-plus'
import { ref, reactive, computed, nextTick, watch,onMounted,onBeforeUnmount } from 'vue'
import axios from 'axios';
import * as XLSX from 'xlsx';
import jsPDF from 'jspdf';
import {Datalist,WorkOrderList,WorkOrderAdd,PrintListData,
printDetailAdd,PrintDetailDel,orderDataDel,getWorkOrder,
getSuborder,PrintDataEdit,WorkOrderEdit,gdAnnexAdd,upload,OrderAttachments,getPonumber} from '@/api/mes/job'
import PrintPage from './components/print.vue'
import AddGongYi from './components/addGongYi.vue'  
import { useUserStore } from '@/pinia/modules/user';

  
defineOptions({name: 'Company'})
//定义打印跳转页面
const printPageRef = ref()
//获取登录用户信息
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 uploadUrl = ref('http://mes-dacheng-api:8083/index.php/api/work_order/ImgUpload') 
// 上传的URL
const uploadUrl = ref('http://192.168.28.22:8082/api/work_order/ImgUpload');
const uploadHeaders = { 'Content-Type': 'multipart/form-data' };
const fileList = reactive([]);
const uploadRef = ref(null);

// 预览图片
const handlePreview = (file) => {
  console.log('预览文件:', file);
};

// 移除图片
const handleRemove = (file, fileList) => {
  console.log('移除文件:', file, '剩余文件:', fileList);
};

// 上传错误处理
const handleError = (err, file, fileList) => {
  console.error('上传失败:', err);
  ElMessage.error(`图片上传失败: ${err.message || '未知错误'}`);
};

// 上传前的检查与图片压缩
const beforeUpload = (file) => {
  const isJPGOrPNG = file.type === 'image/jpeg' || file.type === 'image/png';
  const isLt500K = file.size / 1024 < 500;
  if (!isJPGOrPNG) {
    ElMessage.error('上传图片只能是 JPG 或 PNG 格式!');
    return false;
  }
  if (!isLt500K) {
    ElMessage.error('上传图片大小不能超过 500KB!');
    return false;
  }

  // 图片格式和大小符合，压缩图片
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = () => {
      const img = new Image();
      img.src = reader.result;
      img.onload = () => {
        const canvas = document.createElement('canvas');
        const ctx = canvas.getContext('2d');
        const fixedWidth = 300;
        const fixedHeight = 300;
        canvas.width = fixedWidth;
        canvas.height = fixedHeight;
        ctx.drawImage(img, 0, 0, fixedWidth, fixedHeight);
        canvas.toBlob((blob) => {
          const compressedFile = new File([blob], file.name, { type: file.type });
          resolve(compressedFile);
        }, file.type);
      };
    };
    reader.onerror = (error) => {
      ElMessage.error('图片处理失败');
      reject(error);
    };
  });
};

// 上传成功处理
const handleSuccess = (response, file, fileList) => {
  console.log('上传成功:', response, file, fileList);
  // ElMessage.success('图片上传成功');
};

// 自定义上传逻辑
const customUpload = async (options) => {
  try {
    const formData = new FormData();
    formData.append('image', options.file);

    const response = await axios.post(uploadUrl.value, formData, {
      headers: uploadHeaders,
      onUploadProgress: (progressEvent) => {
        options.onProgress({
          percent: Math.round((progressEvent.loaded * 100) / progressEvent.total),
        });
      },
    });

    if (response.data.code === 0) {
      options.onSuccess(response.data);
      ElMessage.success('图片上传成功');
      add_gdscgdformData.img = response.data.data.url;
	  edit_ddformData.img = response.data.data.url;
    } else {
      throw new Error(response.data.msg);
    }
  } catch (error) {
    console.error('上传失败:', error);
    options.onError(error);
    ElMessage.error(`上传失败: ${error.message}`);
  }
};

// =========== 左侧树侧形结构 =========== 
const treeData = ref([])
const tableData = ref([])
const _Gd_khdh = ref(null)
const defaultProps = {  
      children: 'children',  
      label: 'label'  
    };  
const Datalistdata = async () => {
  try {
    const Datalists = await Datalist();
  Datalists.data.forEach(id => {  
    treeData.value.push({  
      label: id,
    });  
  }); 
  } catch (error) {
    console.error(error);
  }
};
Datalistdata();

//点击左侧树形获取编号
const handleNodeClick = async (node) => {
	ystableData.splice(0, ystableData.length);
	gytableData.splice(0, gytableData.length);
	ddtableData.splice(0, ddtableData.length);
	jstableData.splice(0, jstableData.length);
	// 取消所有节点的颜色
	const allNodes = document.querySelectorAll('.treecolor .el-tree-node');
		allNodes.forEach(node => {
		node.querySelector('.el-tree-node__label').style.color = '';
	});
	// 获取点击的节点 给当前点击的节点改变颜色【红色】
	const clickedNodeId = node['$treeNodeId'];
	const clickedNode = document.querySelector(`.treecolor .el-tree-node[data-key="${clickedNodeId}"]`);
	if (clickedNode) {
		clickedNode.querySelector('.el-tree-node__label').style.color = 'red';
	}
	
	// console.log(node)
	ystableData.length = 0
	searchInfo.value = '';
	_Gd_khdh.value = node.label.split('【')[0];
	_WorkList_page();
};

//调用订单资料列表
const _WorkList_page = async () => {
	console.log("page",page.value)
	console.log("pageSize",pageSize.value)
  try {
	//通过客户编号获取
    const WorkListdata = await WorkOrderList({search:_Gd_khdh.value,page:1,limit:100});
    tableData.value = WorkListdata.data.data
    total.value = WorkListdata.data.total
  } catch (error) {
    console.error(error);
  }
};

//调用订单资料列表
const page_WorkList_page = async () => {
	console.log("page",page.value)
	console.log("pageSize",pageSize.value)
  try {
	//通过客户编号获取
    // const WorkListdata = await WorkOrderList({search:_Gd_khdh.value,page:page.value,limit:pageSize.value});
	const WorkListdata = await WorkOrderList({search:_Gd_khdh.value,page:page.value,limit:pageSize.value});
    tableData.value = WorkListdata.data.data
    total.value = WorkListdata.data.total
  } catch (error) {
    console.error(error);
  }
};

//============订单资料============
//订单资料修改
const ddzl_dialogFormVisible = ref(false)
const edit_ddformData = ref({})
// 双击订单表格
const updateCompanyFunc = async (row) => {
	ddzl_dialogFormVisible.value = true;
  Object.assign(edit_ddformData.value,row);

}

//订单资料修改确认
const dd_edit_Dialog = async () => {
	//日期转换
	let lhrq_formattedDeliveryDate = '';  
	if (edit_ddformData.value.落货日期) {  
		const date = new Date(edit_ddformData.value.落货日期);  
		lhrq_formattedDeliveryDate = `${date.getFullYear()}-${('0' + (date.getMonth() + 1)).slice(-2)}-${('0' + date.getDate()).slice(-2)}`;  
	}  
	let params = {};
	params.订单编号 = edit_ddformData.value.订单编号
	params.生产款号 = edit_ddformData.value.生产款号
	params.客户编号 = edit_ddformData.value.客户编号
	params.款式 = edit_ddformData.value.款式
	params.箱唛要求 = edit_ddformData.value.箱唛要求
	params.面料 = edit_ddformData.value.面料
	params.要求 = edit_ddformData.value.要求
	params.船样描述 = edit_ddformData.value.船样描述  
	params.船样合计 = edit_ddformData.value.船样合计
	params.粘衬 = edit_ddformData.value.粘衬
	params.订单数量 = edit_ddformData.value.订单数量
	params.单位 = edit_ddformData.value.单位
	params.接单日期 = edit_ddformData.value.接单日期
	params.落货日期 = lhrq_formattedDeliveryDate
	params.Sys_id = edit_ddformData.value.Sys_id
	params.id = edit_ddformData.value.Uniqid
	params.img = edit_ddformData.img
	console.log(params)
	// return;
	//订单资料修改接口
	const WorkOrderEdit_list = await WorkOrderEdit(params);
	if(WorkOrderEdit_list.code === 0){
		ddzl_dialogFormVisible.value = false;
		//修改成功调用接口更新表格数据
		_WorkList_page()
		ElMessage({type: 'success',message: '修改成功'})
	}else{
		ElMessage({type: 'error',message: '修改失败'})
	}
}

//订单资料修改取消
const dd_closeDialog = async () => {
  ddzl_dialogFormVisible.value = false;
}


//=============颜色资料============
//颜色资料修改
const dialogFormVisible = ref(false)
//尺码
const edit_cmformdata = reactive({
  cm1:'',
  cm2:'',
  cm3:'',
  cm4:'',
  cm5:'',
  cm6:'',
  cm7:'',
  cm8:'',
  cm9:'',
  cm10:'总计',
});
//制单数
const edit_zdsformdata = reactive({
  zds1:'',
  zds2:'',
  zds3:'',
  zds4:'',
  zds5:'',
  zds6:'',
  zds7:'',
  zds8:'',
  zds9:'',
  zds10:'',
});
const Uniqid = ref('')//颜色资料Uniqid

//颜色资料表格双击
const ysupdateCompanyFunc = async (row) => {
	dialogFormVisible.value = true;
	edit_formData.value = { ...row };
	console.log(row)
	edit_formData['子订单编号'] = row['子订单编号']
	edit_formData['颜色备注'] = row['颜色备注']
	edit_formData['款号'] = row['款号']
	edit_formData['船样'] = row['船样']
	edit_formData['颜色'] = row['颜色']
	edit_colorcode.value =row['color_id']
	Uniqid.value = row['Uniqid']

	//获取色系名称列表
	const getSuborders = await getSuborder({order:_Gd_gdbh.value,cy:'否',colorname:edit_formData['颜色']});
	getSuborderscolor.colorlist = getSuborders.data.colorlist;
	
	let index = 1;  
	// 创建一个函数来构建尺码和数量的映射  
	function buildSizeQuantitiesMap(sizes, formData) {  
		const sizeQuantitiesMap = {};  
		sizes.forEach(size => {  
			// 使用逻辑或操作符确保所有尺码都有数量（默认为0，但如果有值则使用那个值）  
			const quantity = formData[size] || 0;  
			sizeQuantitiesMap[size] = quantity;  
		});  
		return sizeQuantitiesMap;  
	}  
	// 使用函数构建映射  
	let sizeQuantitiesMap = buildSizeQuantitiesMap(sizeDatas, edit_formData.value);  
	let edit_params = {};
	for (const [size, quantity] of Object.entries(sizeQuantitiesMap)) {  
		edit_params[`cm${index}`] = size;  
		edit_params[`cmsl${index++}`] = quantity;  
	}  
	for (let i = 1; i <= 9; i++) {
		edit_cmformdata[`cm${i}`] = edit_params[`cm${i}`] || '';
		edit_zdsformdata[`zds${i}`] = (edit_params[`cmsl${i}`] === 0 || edit_params[`cmsl${i}`] === null) ? '' : edit_params[`cmsl${i}`];
	}
	//计算尺码数量总数合计
    updateTotal()
};

//自动计算制单数总计
function updateTotal() {  
  // 直接指定要累加的属性名  
  const relevantKeys = ['zds1', 'zds2', 'zds3', 'zds4', 'zds5', 'zds6', 'zds7', 'zds8', 'zds9'];  
  const values = relevantKeys.map(key => parseInt(zdsformdata[key], 10) || 0); // 使用 || 0 来处理可能的 NaN 或 undefined/null  
  zdsformdata.zds10 = values.reduce((sum, value) => sum + value, 0);  
  const valuess = relevantKeys.map(key => parseInt(edit_zdsformdata[key], 10) || 0); // 使用 || 0 来处理可能的 NaN 或 undefined/null  
  edit_zdsformdata.zds10 = valuess.reduce((sum, value) => sum + value, 0);  
}  

//点击是否船样 改变子订单编号
const edit_cyChange = async (value) => {
  if (value === '是') {
		const getSuborders = await getSuborder({order:_Gd_gdbh.value,cy:'是',colorname:edit_formData['颜色']});
		edit_formData['子订单编号'] = getSuborders.data;
	}else if(value === '否'){
		const getSuborders = await getSuborder({order:_Gd_gdbh.value,cy:'否',colorname:edit_formData['颜色']});
		edit_formData['子订单编号'] = getSuborders.data.order;
  }
};

//修改颜色资料确认
const ys_edit_Dialog = async () => {
  // console.log(edit_formData)	
if (!edit_formData.value) return;

function buildSizeQuantitiesMap(sizes, formData) {  
    const sizeQuantitiesMap = {};  
    sizes.forEach(size => {  
      const quantity = formData[size] || 0; // 使用逻辑或操作符确保所有尺码的数量  
      sizeQuantitiesMap[size] = quantity;  
    });  
    return sizeQuantitiesMap;  
  }  
  
  // 使用函数构建映射  
  const sizeQuantitiesMap = buildSizeQuantitiesMap(sizeDatas, edit_formData.value);  

  let index = 1;  
  const params = {  
    订单编号: edit_formData.value.订单编号,  
    子订单编号: edit_formData.子订单编号,  
    款号: edit_formData.款号,  
	颜色备注: edit_formData.颜色备注,
    船样: edit_formData.船样 === '是' ? '1' : '0', // 转换船样字段  
    颜色: edit_formData.颜色,  
	color_id:edit_colorcode.value,
    zdtotal: edit_zdsformdata.zds10,  
    Sys_id: edit_formData.value.Sys_id,  
    id: Uniqid.value,  
  };  
  for (const [size, quantity] of Object.entries(sizeQuantitiesMap)) {  
    params[`cm${index}`] = size;  
     const cmslValue = +edit_zdsformdata[`zds${index}`]; // 获取对应的数量
     params[`cmsl${index++}`] = cmslValue === 0 ? "" : cmslValue; // 如果为0，赋值为空字符串 
  }  
  // console.log(params); return;
  const PrintDataEdit_list = await PrintDataEdit(params);
  if(PrintDataEdit_list.code === 0){
	  dialogFormVisible.value = false;
    ElMessage({type: 'success',message: '修改成功'})
	
	//数据列表显示
	const PrintListDatas = await PrintListData({order:_Gd_gdbh.value})
	const jsOrderAttachments = await OrderAttachments({order:_Gd_gdbh.value,desc:'技术附件'})
	const ddOrderAttachments = await OrderAttachments({order:_Gd_gdbh.value,desc:'订单资料附件'})
	
	//颜色资料
	if(PrintListDatas.data.列表.length === 0 ){
	  ystableData.length = 0
	}else{
	  sizeDatas.splice(0,PrintListDatas.data.型号.length,...PrintListDatas.data.型号);//型号数据
	  ystableData.splice(0,PrintListDatas.data.列表.length,...PrintListDatas.data.列表);//表格数据
	  // 使用 map 方法创建一个新数组，并转换船样字段  
	  const newData = PrintListDatas.data.列表.map(item => ({  
	      ...item,  
	      船样: item.船样 === 1 ? '是' : '否'  
	  }));  
	  // 将新数组赋值给 ystableData，这会触发视图更新，清空旧数据（可选，如果不需要保留旧数据的话）  
	  ystableData.length = 0;  
	  ystableData.push(...newData);
	}
    tableRowClick(params)
  }else{
    ElMessage({type: 'error',message: '修改失败'})
  }
};
//颜色资料修改取消
const ys_edit_closeDialog = async (row) => {
	dialogFormVisible.value = false;
};




// 分页
const page = ref(1)
const total = ref(0)
const pageSize = ref(10)
const handleCurrentChange = (val) => {
	console.log("handleCurrentChange",val)
  page.value = val;
  // page_WorkList_page();
};

// 修改页面容量 点击多少条/页
const handleSizeChange = (val) => {
  console.log("handleSizeChange",val)
  pageSize.value = val;
  // page_WorkList_page();
};

// =========== 新增订单资料 ===========
const add_gdscgdformData = reactive({
  订单编号: '',
  生产款号: '',
  款式: '',
  客户编号: '',
  落货日期: '',
  箱唛要求: '',
  面料: '',
  要求: '',
  船样描述: '',
  船样合计: '',
  粘衬: '',
  订单数量: '',
  单位: '件',
  Sys_id: '',
  制单日期: '',
  审核日期: '',
});

const add_gddialogFormVisible = ref(false)
//点击新增订单资料按钮
const addgd_onclick = async () => {
  console.log("用户信息", _username.value);
  // 判断客户代号是否为空
  if (!_Gd_khdh.value) {
    ElMessage({ type: 'warning', message: '请选择具体的订单后，再操作此功能' });
    return false;
  }
	add_gddialogFormVisible.value = true
	//获取订单编号接口
	const getWorkOrder_list = await getWorkOrder();
	add_gdscgdformData['订单编号'] = getWorkOrder_list.data;
	add_gdscgdformData['客户编号'] = _Gd_khdh.value
	add_gdscgdformData['Sys_id'] = _username.value 
	add_gdscgdformData['制单日期'] = currentDates
	add_gdscgdformData['生产款号'] = ''
	add_gdscgdformData['款式'] = ''
	add_gdscgdformData['落货日期'] = ''
	add_gdscgdformData['面料'] = ''
	add_gdscgdformData['要求'] = ''
	add_gdscgdformData['船样描述'] = ''
	add_gdscgdformData['船样合计'] = ''
	add_gdscgdformData['箱唛要求'] = ''
	add_gdscgdformData['粘衬'] = ''
	add_gdscgdformData['订单数量'] = ''
}

//新增工单资料确定
const add_gdenterDialog = async ()=>{
	// 定义需要校验的字段和对应的提示信息
	const fields = [
	  { key: '款式', message: '款式不能为空' },
	  { key: '订单编号', message: '网络异常, 请重新打开' },
	  { key: '客户编号', message: '网络异常, 请重新打开' },
	  { key: '落货日期', message: '落货日期不能为空' },
	  { key: '订单数量', message: '订单数量不能为空' }
	];
	// 遍历每个字段，进行非空或未定义校验
	for (const field of fields) {
	  if (!add_gdscgdformData[field.key]) {
	    ElMessage({ type: 'warning', message: field.message });
	    return false;
	  }
	}
	// 校验制单日期
	if (!add_gdscgdformData['制单日期']) {
	  ElMessage({ type: 'warning', message: '制单日期不能为空' });
	  return false;
	}
	
  //日期转换
  let lhrq_formattedDeliveryDate = '';  
  if (add_gdscgdformData['落货日期']) {  
    const date = new Date(add_gdscgdformData['落货日期']);  
    lhrq_formattedDeliveryDate = `${date.getFullYear()}-${('0' + (date.getMonth() + 1)).slice(-2)}-${('0' + date.getDate()).slice(-2)}`;  
  }  
  // let zdrq_formattedDeliveryDate = '';  
  // if (add_gdscgdformData['制单日期']) {  
  //   const date = new Date(add_gdscgdformData['制单日期']);  
  //   zdrq_formattedDeliveryDate = `${date.getFullYear()}-${('0' + (date.getMonth() + 1)).slice(-2)}-${('0' + date.getDate()).slice(-2)}`;  
  // }  
	const formattedData = {
		订单编号: add_gdscgdformData['订单编号'],
		生产款号: add_gdscgdformData['生产款号'],
		款式: add_gdscgdformData['款式'],
		客户编号: add_gdscgdformData['客户编号'],
		落货日期: lhrq_formattedDeliveryDate,
		箱唛要求: add_gdscgdformData['箱唛要求'],
		面料: add_gdscgdformData['面料'],
		要求: add_gdscgdformData['备注'],
		船样描述: add_gdscgdformData['船样描述'],
		船样合计: add_gdscgdformData['船样合计'],
		粘衬: add_gdscgdformData['粘衬'],
		订单数量: add_gdscgdformData['订单数量'],
		单位: add_gdscgdformData['单位'],
		Sys_id: _username.value,
		接单日期: currentDates,
		img: add_gdscgdformData.img,
	};
	console.log(formattedData)
	// return;
	const edit_gdformdata_list = await WorkOrderAdd(formattedData);
	if (edit_gdformdata_list.code === 0) {
		add_gddialogFormVisible.value = false;
		ElMessage({type: 'success',message: '新增成功'})
    const WorkListdata = await WorkOrderList({search:_Gd_khdh.value,page:1,limit:1});
		tableData.value=WorkListdata.data.data
	} else {
		ElMessage({ type: 'error',message: '新增失败'})
	}
 
}
//新增工单资料取消
const add_gdcloseDialog = () => {
  add_gddialogFormVisible.value = false
}


// =========== 新增颜色资料 ===========
//默认弹窗关闭
const add_gdyjdialogFormVisible = ref(false)
const add_yszlformdata = reactive({
  ddh: '',
  ddzbh: '',
  sxmc: '',
  cmgg: '',
  sfcy: '',
  ysbz: '',
});
const cmformdata = reactive({
  cm1:'32',
  cm2:'34',
  cm3:'36',
  cm4:'38',
  cm5:'40',
  cm6:'42',
  cm7:'44',
  cm8:'46',
  cm9:'48',
  cm10:'总计',
});
const zdsformdata = reactive({
  zds1:'',
  zds2:'',
  zds3:'',
  zds4:'',
  zds5:'',
  zds6:'',
  zds7:'',
  zds8:'',
  zds9:'',
  zds10:'',
});
//记录色系编号
const add_colorcode = ref('')

//选择色系名称获取子订单编号
const xz_sxhandleSizeChange =  async  (value,color_id) => {
	
		//获取子订单编号
		const getPonumberdata = await getSuborder({colorname:value,order:_ddhval.value,cy:add_yszlformdata.sfcy});
		console.log("获取子订单编号",getPonumberdata)
		add_yszlformdata.ddzbh = getPonumberdata.data.order ? getPonumberdata.data.order : getPonumberdata.data;
	
	
	console.log(value)
	console.log(color_id)
	
  if (value === '红色系') {
    add_yszlformdata.sxmc = value
	add_colorcode.value = color_id
  } else if(value === '黄色系'){
   add_yszlformdata.sxmc = value
   add_colorcode.value = color_id
  }else if(value === '蓝色系'){
  add_yszlformdata.sxmc = value
  add_colorcode.value = color_id
  }else if(value === '绿色系'){
   add_yszlformdata.sxmc = value
   add_colorcode.value = color_id
  }else if(value === '紫色系'){
   add_yszlformdata.sxmc = value
   add_colorcode.value = color_id
  }else if(value === '灰色系'){
 add_yszlformdata.sxmc = value
 add_colorcode.value = color_id
  }else if(value === '咖啡色系'){
  add_yszlformdata.sxmc = value
	add_colorcode.value = color_id
  }else if(value === '黑白色系'){
  add_yszlformdata.sxmc = value
	add_colorcode.value = color_id
  }else if(value === '经典色系'){
  add_yszlformdata.sxmc = value
	add_colorcode.value = color_id
  }
};

const edit_formData = reactive({
  '颜色': ''
});

//记录色系编号
const edit_colorcode = ref('')
const xg_sxhandleSizeChange =  async (value,color_id) => {
	
	const getPonumberdata = await getSuborder({colorname:value,order:_ddhval.value,cy:edit_formData['船样']});
	
	console.log(edit_formData.value)	
	if(edit_formData.value['颜色'] === edit_formData['颜色']){
		edit_formData['子订单编号'] = edit_formData.value['子订单编号']
	}else{
		edit_formData['子订单编号'] = getPonumberdata.data.order ? getPonumberdata.data.order : getPonumberdata.data;
	}
  if (value === '红色系') {
  edit_formData['颜色'] = value
	edit_colorcode.value = color_id
  } else if(value === '黄色系'){
  edit_formData['颜色'] = value
	edit_colorcode.value = color_id
  }else if(value === '蓝色系'){
  edit_formData['颜色'] = value
	edit_colorcode.value = color_id
  }else if(value === '绿色系'){
  edit_formData['颜色'] = value
	edit_colorcode.value = color_id
  }else if(value === '紫色系'){
  edit_formData['颜色'] = value
	edit_colorcode.value = color_id
  }else if(value === '灰色系'){
  edit_formData['颜色'] = value
	edit_colorcode.value = color_id
  }else if(value === '咖啡色系'){
  edit_formData['颜色'] = value
	edit_colorcode.value = color_id
  }else if(value === '黑白色系'){
  edit_formData['颜色'] = value
	edit_colorcode.value = color_id
  }else if(value === '经典色系'){
  edit_formData['颜色'] = value
  }
};

const cmhandleSizeChange = (value) => {
  // console.log(value)
  if (value === '尺码数') {
	  cmformdata.cm1 = '32';
	  cmformdata.cm2 = '34';
	  cmformdata.cm3 = '36';
	  cmformdata.cm4 = '38';
	  cmformdata.cm5 = '40';
	  cmformdata.cm6 = '42';
	  cmformdata.cm7 = '44';
	  cmformdata.cm8 = '46';
	  cmformdata.cm9 = '48';
	  cmformdata.cm10 = '总计';
	} else if (value === '尺码') {
	  cmformdata.cm1 = 'S';
	  cmformdata.cm2 = 'M';
	  cmformdata.cm3 = 'L';
	  cmformdata.cm4 = 'XL';
	  cmformdata.cm5 = 'XXL';
	  cmformdata.cm6 = '3XL';
	  cmformdata.cm7 = '4XL';
	  cmformdata.cm8 = '';
	  cmformdata.cm9 = '';
	  cmformdata.cm10 = '总计';
	}
};
//清空对象的属性值
const gdyj_clearFormData = () => {
  Object.keys(zdsformdata).forEach(key => {
    zdsformdata[key] = '';
  });

};



//点击是否船样 改变子订单编号
const cyChange = async (value) => {
  if (value === '是') {
		add_yszlformdata.ddzbh = _Gd_gdbh.value + '-99'
		const getSuborders = await getSuborder({order:_Gd_gdbh.value,cy:'是',colorname:add_yszlformdata['sxmc']});
		add_yszlformdata['ddzbh'] = getSuborders.data;
	}else if(value === '否'){
		const getSuborders = await getSuborder({order:_Gd_gdbh.value,cy:'否',colorname:add_yszlformdata['sxmc']});
		add_yszlformdata['ddzbh'] = getSuborders.data.order;
  }
};

const getSuborderscolor = reactive({
      colorlist: []
});
	
//新增颜色资料按钮
const addgdyj_onclick = async  () => {
  if(_Gd_gdbh.value === '' || _Gd_gdbh.value === null){
    ElMessage({type: 'warning',message: '请选择具体的工单后，再操作此功能'})
    return false;
  }else{
	add_gdyjdialogFormVisible.value = true
	add_yszlformdata['sxmc'] = '红色系';
    const getSuborders = await getSuborder({order:_Gd_gdbh.value,cy:'否',colorname:'红色系'});
	console.log(getSuborders)
	
	
	getSuborderscolor.colorlist = getSuborders.data.colorlist;
			
	add_yszlformdata['ddzbh'] = getSuborders.data.order;
	// 假设获取的数据是 getSuborders.data
	if (getSuborders.data.cm) {
	  // 判断并赋值
	  cmformdata.cm1 = getSuborders.data.cm.cm1 || '';
	  cmformdata.cm2 = getSuborders.data.cm.cm2 || '';
	  cmformdata.cm3 = getSuborders.data.cm.cm3 || '';
	  cmformdata.cm4 = getSuborders.data.cm.cm4 || '';
	  cmformdata.cm5 = getSuborders.data.cm.cm5 || '';
	  cmformdata.cm6 = getSuborders.data.cm.cm6 || '';
	  cmformdata.cm7 = getSuborders.data.cm.cm7 || '';
	  cmformdata.cm8 = getSuborders.data.cm.cm8 || '';
	  cmformdata.cm9 = getSuborders.data.cm.cm9 || '';
	  cmformdata.cm10 = '合计';
	}

    add_yszlformdata['ddh'] = _Gd_gdbh.value;
    add_yszlformdata['ys'] = '';
	add_yszlformdata['kh'] = '';
	// add_yszlformdata['sxmc'] = '';
    add_yszlformdata['cmgg'] = '32~46';
    add_yszlformdata['sfcy'] = '否';
    add_yszlformdata['kdy'] = _username.value;
    gdyj_clearFormData();
  }
}



const child_order = ref('')
//单机颜色资料表格
const ystableclick =  async  (row) => {
	console.log(row.子订单编号)
	child_order.value = row.子订单编号
}



//新增颜色资料确定
const add_gdyjenterDialog =  async  () => {
	//必填
	if(add_yszlformdata['kh'] === ''){
		ElMessage({type: 'warning',message: '款号不能为空'})
		return false;
	}
	if(add_yszlformdata['ysbz'] === ''){
		ElMessage({type: 'warning',message: '颜色备注不能为空'})
		return false;
	}
	if(add_yszlformdata['sxmc'] === ''){
		ElMessage({type: 'warning',message: '色系名称不能为空'})
		return false;
	}

	let cy = '';
	if(add_yszlformdata['sfcy'] === '是'){
		cy = '1'
	}else if(add_yszlformdata['sfcy'] === '否'){
		cy = '0'
	}
	
  const addyszltable = {
    订单编号: add_yszlformdata['ddh'],
	子订单编号: add_yszlformdata['ddzbh'],
	颜色: add_yszlformdata['sxmc'],
    款号: add_yszlformdata['kh'],
	颜色备注:add_yszlformdata.ysbz,
	船样: cy,
    Sys_id:add_yszlformdata['kdy'],
	color_id:add_colorcode.value,
	//尺码
    cm1: cmformdata['cm1'],
    cm2: cmformdata['cm2'],
    cm3: cmformdata['cm3'],
    cm4: cmformdata['cm4'],
    cm5: cmformdata['cm5'],
    cm6: cmformdata['cm6'],
    cm7: cmformdata['cm7'],
    cm8: cmformdata['cm8'],
	cm9: cmformdata['cm9'],
	//尺码数量
	cmsl1: zdsformdata['zds1'],
    cmsl2: zdsformdata['zds2'],
    cmsl3: zdsformdata['zds3'],
    cmsl4: zdsformdata['zds4'],
    cmsl5: zdsformdata['zds5'],
    cmsl6: zdsformdata['zds6'],
    cmsl7: zdsformdata['zds7'],
    cmsl8: zdsformdata['zds8'],
	cmsl9: zdsformdata['zds9'],
    zdtotal: zdsformdata['zds10'],
	};
	console.log(addyszltable)
	// return;
  const printDetailAdds = await printDetailAdd(addyszltable);
  if (printDetailAdds.code === 0) {
		add_gdyjdialogFormVisible.value = false;
		ElMessage({type: 'success',message: '新增成功'})
  }
  const PrintListDatas = await PrintListData({order:_Gd_gdbh.value})
	if(PrintListDatas.data.列表.length === 0){
		ystableData.length = 0
	}else{
		sizeDatas.splice(0,PrintListDatas.data.型号.length,...PrintListDatas.data.型号);
		ystableData.splice(0,PrintListDatas.data.列表.length,...PrintListDatas.data.列表);
	}
  
}  


  

//新增颜色资料取消
const add_dyjcloseDialog = () => {
  add_gdyjdialogFormVisible.value = false
}
//键盘input框跳转
const add_gdzlent = async (event,id1,id2,id3,idx) => {
  if(event.keyCode === 40){
    if(id3!=''){
      document.getElementById(id3).focus()
    }
  }else if (event.keyCode === 13) { // 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 visible = ref(false)
const form = reactive({
  '仓库出库':true,
  '裁剪':true,
  '车缝':true,
  '手工':true,
  '大烫':true,
  '总检':true,
  '包装':true,
})

//新增工序资料按钮
const addgdgy_onclick = () => {
  if(_Gd_gdbh.value === '' || _Gd_gdbh.value === null){
    ElMessage({type: 'warning',message: '请选择具体的工单后，再操作此功能'})
    return false;
  }else{
    visible.value = true;
  }
}

//新增工序资料确定按钮
const add_gxenterDialog = () => {
	console.log(form)
	const formattedData = {
		ckck: form['仓库出库'],
		cq: form['裁剪'],
		cf: form['车缝'],
		hdsy: form['手工'],
		dt: form['大烫'],
		zj: form['总检'],
		bz: form['包装']
	};
	// true 选择 fasle 未选择
	for (let key in formattedData) {
	    if (formattedData[key] === true) {
	        formattedData[key] = 1;
	    } else if (formattedData[key] === false) {
	        formattedData[key] = 2;
	    }
	}
  	console.log(formattedData)
}

//新增工序资料取消按钮
const add_gxcloseDialog = () => {
    visible.value = false;
}

// =========== 订单打印 ===========
const cp_gdprintonClick = () => {
  if(_Gd_gdbh.value === '' || _Gd_gdbh.value === null){
    ElMessage({type: 'warning',message: '请选择具体的工单后，再操作此功能'})
    return false;
  }else{
	  console.log(_Gd_gdbh.value)
    if(ystableData.length >=1){
      printPageRef.value.open(_Gd_gdbh.value) 
    }else{
      ElMessage({type: 'warning',message: '请新增颜色资料，再操作此功能'})
      return false;
    }
  }
}


//点击表格行获取下方表格数据列表
// =========== 颜色资料、工艺资料、技术资料附件 ===========
//全局调用订单号编号
const _Gd_gdbh = ref('')
const _ddhval = ref('')
//颜色资料
const ystableData = reactive([])
//尺寸列表
const sizeDatas = reactive([])
//工艺资料
const gytableData = reactive([])
//订单资料表
const ddtableData = reactive([])
//技术附件
const jstableData = reactive([])

//点击订单资料行
const tableRowClick = async (row) => {
	//清空尺寸列表、颜色资料、工艺资料、订单资料附件、技术附件
	sizeDatas.length = 0
	ystableData.splice(0, ystableData.length);
	gytableData.splice(0, gytableData.length);
	ddtableData.splice(0, ddtableData.length);
	jstableData.splice(0, jstableData.length);
    _Gd_gdbh.value = row.订单编号
    _ddhval.value = row.订单编号
    try {
		//数据列表显示
        const PrintListDatas = await PrintListData({order:_Gd_gdbh.value})
        const jsOrderAttachments = await OrderAttachments({order:_Gd_gdbh.value,desc:'技术附件'})
        const ddOrderAttachments = await OrderAttachments({order:_Gd_gdbh.value,desc:'订单资料附件'})
		
		//颜色资料
        if(PrintListDatas.data.列表.length === 0 ){
          ystableData.length = 0
        }else{
          sizeDatas.splice(0,PrintListDatas.data.型号.length,...PrintListDatas.data.型号);//表格尺码投数据
          ystableData.splice(0,PrintListDatas.data.列表.length,...PrintListDatas.data.列表);//表格数据
          const newData = PrintListDatas.data.列表.map(item => ({  
              ...item,  
              船样: item.船样 === 1 ? '是' : '否'  
          }));  
          ystableData.length = 0;  
          ystableData.push(...newData);
        }
		//技术附件
		if(jsOrderAttachments.data === ''){
		  const WorkListdata = [];
		  jstableData.splice(0,jstableData.length,...WorkListdata);
		}
        if(jsOrderAttachments.code === 0 && ddOrderAttachments.code === 0){
          jstableData.splice(0,jsOrderAttachments.data.length,...jsOrderAttachments.data);
          ddtableData.splice(0,ddOrderAttachments.data.length,...ddOrderAttachments.data);
        }
      } catch (error) {
        console.error(error);
    }
}

//pdf
const showPdfModal = ref(false);
const pdfContainer = ref(null);

const closeModal = () => {
  showPdfModal.value = false;
};

const fetchAndConvertFile = async () => {
  try {
    // 从后端获取 Base64 编码的 XLSX 文件数据
    const responses = await OrderAttachments({order:_Gd_gdbh.value,desc:'技术附件'});
    const response= responses.data[0].附件内容
    const base64Data = response.match(/base64,(.*)$/)?.[1]; 

if (!base64Data) {
  throw new Error('Invalid Base64 data');
}

const binaryString = atob(base64Data);
const binaryLen = binaryString.length;
const bytes = new Uint8Array(binaryLen);

for (let i = 0; i < binaryLen; i++) {
  bytes[i] = binaryString.charCodeAt(i);
}

       // 解析 XLSX 文件
       const workbook = XLSX.read(bytes, { type: 'array' });
    const worksheet = workbook.Sheets[workbook.SheetNames[0]];
    console.log(121212,worksheet)
    const jsonData = XLSX.utils.sheet_to_json(worksheet);
	
	let base64 = XLSX.write(worksheet, { type: 'base64' });
	
    generatePdf(base64);
  } catch (error) {
    console.error('Error fetching and converting file:', error);
  }
};

const generatePdf = (data) => {
  

 //  let yPosition = 10;
 //  data.forEach((row) => {
	// const doc = new jsPDF();
 //    doc.text(10, yPosition, JSON.stringify(row));
 //    yPosition += 10;
 //  });

 //  const pdfBlob = doc.output('blob');

 //  previewPdf(pdfBlob);
 //  downloadPdf(pdfBlob);
 console/log('pdf data', data)
 const pdfDoc = new jsPDF()
 pdfDoc.text(data)
 pdfDoc.save(a4.pdf)
 
 
};

const previewPdf = (blob) => {
  const fileURL = URL.createObjectURL(blob);

  // 通过 ref 引用 pdfContainer 来在指定容器中显示 PDF
  const iframe = document.createElement('iframe');
  iframe.src = fileURL;
  iframe.width = '100%';
  iframe.height = '600px';

  if (pdfContainer.value) {
    pdfContainer.value.innerHTML = ''; // 清空之前的内容
    pdfContainer.value.appendChild(iframe);
  }
};

//表格复选框
const table_del = ref(true)//删除订单资料
const table_Selection = ref('')//存储选中Uniqid
const ddzlSelectionChange = (selection, type) => {
  const ids = selection.map(item => {
    return item.Uniqid
  })
  table_Selection.value = ids.join(',')
  console.log(table_Selection.value)
}

//删除按钮
const del_ddzlClick = async () => {
  console.log(table_Selection._value)
  let params = {};  
  params.Uniqid = table_Selection._value; 
  console.log(params)
  const res1 = await orderDataDel(params)
  res1.code === 0 && ElMessage.success('删除成功')
    const WorkListdata = await WorkOrderList({search:_Gd_khdh.value,page:"1",limit:"10"});
   tableData.value= WorkListdata.data.data
   ystableData.splice(0, ystableData.length);//颜色资料清空
   gytableData.splice(0, gytableData.length);//工艺资料情空
   ddtableData.splice(0, ddtableData.length);//订单资料附件清空
   jstableData.splice(0, jstableData.length);//技术附件清空
}


const delall = ref(true)
//颜色复选框
const ysSelection = ref('')
//工艺复选框
const gySelection = ref('')
// 颜色资料多选、工艺资料多选
const selectionChange = (selection, type) => {
  console.log(selection)
  const ids = selection.map(item => {
	  if(type === '颜色资料'){
		return type === '颜色资料' ? item.Uniqid: item.Uniqid
	  }
	  if(type === '工艺资料'){
	  return type === '工艺资料' ? item.Uniqid: item.Uniqid
	  } 
  })
  
  if (type === '颜色资料') {
    ysSelection.value = ids.join(',')
  }
  if (type === '工艺资料') {
    gySelection.value = ids.join(',')
  }
}

// ===========删除颜色资料、工艺资料 ===========
const delgd_delclick = async () => {
  if (ysSelection.value !== '') {
    try {
      const res1 = await PrintDetailDel({UniqId: ysSelection.value})
      res1.code === 0 && ElMessage.success('颜色资料删除成功')
    } catch(err) {
      ElMessage.error(err)
    }
  }
  if (gySelection.value !== ''){
    try {
      const res2 = await PrintDetailDel({UniqId: gySelection.value})
      if(res2.code === 0){
        ElMessage.success('工艺资料删除成功')
        const PrintListDatas = await PrintListData({order:_Gd_gdbh.value})
        sizeDatas.splice(0,PrintListDatas.data.型号.length,...PrintListDatas.data.型号);
        ystableData.splice(0,PrintListDatas.data.列表.length,...PrintListDatas.data.列表);
      }else{
        console.log('?')
      }
    } catch(err) {
      ElMessage.error(err)
    }
  } 
}

const fj_Selection = ref('')//存储选中Uniqid
const fjSelection = ref('')
const fjdelall = ref(true)
const fjSelectionChange = (selection, type) => {
	console.log(selection)
  const ids = selection.map(item => {
    return item.UniqId
  })
  fj_Selection.value = ids.join(',')
  console.log("附件复选框",fj_Selection.value)
}

// //删除附件按钮
const fj_delclick = async () => {
  console.log(fj_Selection._value)
  let params = {};  
  params.UniqId = fj_Selection._value; 
  console.log(params)
  // const res1 = await orderDataDel(params)
  res1.code === 0 && ElMessage.success('删除成功')
}


  //合计
  const getSummaries = (param) => {  
    const { columns, data } = param;  
    const sums = {};  
	//选择你希望合计的列
    const summableLabels = [...sizeDatas, "制单总数"];
    columns.forEach((column, index) => {  
        if (index === 1) {  
            sums[index] = '总数量合计';  
            return;  
        }  
  
        if (summableLabels.includes(column.label)) {  
            const values = data.map(item => Number(item[column.property]));  
  
            // 检查数组中是否所有值都是 NaN  
            if (!values.every(value => isNaN(value))) {  
                sums[index] = values.reduce((prev, curr) => {  
                    const value = Number(curr);  
                    if (!isNaN(value)) {  
                        return prev + value; 
                    }  
                    return prev;  
                }, 0);  
                // 如果需要，可以在这里添加单位  
                // sums[index] += ' 件';  
            } else {  
                 sums[index] = 'N/A';  
            }  
        }  
    });  
  
    return sums;  
};  




//=========查询========
const searchInfo = ref('')

//查询按钮
const onSubmit = async () => {
  if(searchInfo.value === ''){
    ElMessage({type: 'warning',message: '请输入搜索的订单编号'})
    return false;
  }else{
  const WorkListdata = await WorkOrderList({search:searchInfo.value,page:"1",limit:"1"});
   tableData.value= WorkListdata.data.data
   ystableData.splice(0, ystableData.length);//颜色资料清空
   gytableData.splice(0, gytableData.length);//工艺资料情空
   ddtableData.splice(0, ddtableData.length);//订单资料附件清空
   jstableData.splice(0, jstableData.length);//技术附件清空
  }
};


// 调用查询数据接口
const _cha_WorkList = async (node) => {
  if(searchInfo.value === ''){
    ElMessage({type: 'warning',message: '请输入搜索的信息'})
    return false;
  }
  const search = searchInfo.value;
  var regex = /^[a-zA-Z0-9]+$/;
  try {
    if (regex.test(search)) {
      // 符合条件，执行搜索操作
      console.log('搜索内容为纯数字加字母');
      // const WorkListdata = await WorkList({search:search,limit:100,page:1});//接口调用函数
      if(WorkListdata.data.total === 0){
        ElMessage({type: 'warning',message: '未搜索具体查询条件'})
      }
      tableData.splice(0,tableData.length,...WorkListdata.data.data);//表格数据
      total.value = WorkListdata.data.total;//共多少条
    } else {
      // 不符合条件，给出提示
      console.log('搜索内容包含非字母和数字的字符');
      // const WorkListdata = await WorkList({Gd_khdh:'',search:search,limit:100,page:1});//接口调用函数
      if(WorkListdata.data.total === 0){
        ElMessage({type: 'warning',message: '未搜索具体查询条件'})
      }
      tableData.splice(0,tableData.length,...WorkListdata.data.data);//表格数据
      total.value = WorkListdata.data.total;//共多少条
    }
  } catch (error) {
    console.error(error);
  }
};


//===============附件上传===============
//附件上传按钮
const jsfjClick = () => {
  if(_Gd_gdbh.value === '' || _Gd_gdbh.value === null){
	  ElMessage({type: 'warning',message: '请选择具体的工单后，再操作此功能'})
	}else{
		jsfjdialogFormVisible.value = true
		initJsfjformdata();
		jsfjformdata.value.关联编号 = _Gd_gdbh.value
	}
}
//技术附件弹窗
const jsfjdialogFormVisible = ref(false)
const jsfjformdata = ref({
	sys_id: _username.value,
	附件备注: '',
	附件内容: '',
	附件类型: '',
	关联编号: '',
});
//技术附件弹窗取消
const initJsfjformdata = () => {
  jsfjformdata.value = {
	sys_id: _username.value,
	附件备注: '',
	附件内容: '',
	附件类型: '',
	关联编号: '',
  }
}
//技术附件弹窗取消
const jsfjcloseDialog = () => {
  jsfjdialogFormVisible.value = false
}
const uploadExcel = (event) =>{
	const files = event.target.files;
	let suffixArr = name.split("."), suffix = suffixArr[suffixArr.length-1];
	jsfjformdata.value.附件内容 = files[0]
	jsfjformdata.value.附件类型 = 'XLSX'
}

//技术附件预览
const yulan = (event) =>{
	if(!jsfjformdata.value.附件内容) return
	$.getScript('/luckysheet/plugins/js/plugin.js', () => {
			$script('/luckysheet/luckysheet.umd.js', () => {
			luckyexcelVisible.value = true
			
			LuckyExcel.transformExcelToLucky(jsfjformdata.value.附件内容, function(exportJson, luckysheetfile){
				console.log('jsfjformdata.value.附件内容', jsfjformdata.value.附件内容)
				if(exportJson.sheets==null || exportJson.sheets.length==0){
					alert("Failed to read the content of the excel file, currently does not support xls files!");
					return;
				}
				if(luckyExcel) luckyExcel.destroy();
				luckysheet.create({
					container: 'luckyexcel', //容器的ID
					data: exportJson.sheets,
					title: exportJson.info.name, // 工作簿名称
					lang: "zh", // 设定表格语言 国际化设置，允许设置表格的语言，支持中文("zh")和英文("en")
					showtoolbar: false, // 是否显示工具栏
					showinfobar: false, // 是否显示顶部信息栏
					allowEdit: false, // 是否允许前台编辑
					enableAddRow: false, // 允许增加行
					enableAddCol: false, // 允许增加列
					userInfo: false, // 右上角的用户信息展示样式
					showRowBar: false, // 是否显示行号区域
					showColumnBar: false, // 是否显示列号区域
					sheetFormulaBar: false, // 是否显示公式栏
					enableAddBackTop: false,//返回头部按钮
				});
				luckyExcel = luckysheet;
			})
		})
		})
		$('head').append($('<link rel="stylesheet" type="text/css" />').attr('href', '/luckysheet/plugins/css/pluginsCss.css'));
		$('head').append($('<link rel="stylesheet" type="text/css" />').attr('href', '/luckysheet/plugins/plugins.css'));
		$('head').append($('<link rel="stylesheet" type="text/css" />').attr('href', '/luckysheet/css/luckysheet.css'));
		$('head').append($('<link rel="stylesheet" type="text/css" />').attr('href', '/luckysheet/assets/iconfont/iconfont.css'));

}



const jsfj_del = (row) =>{
	ElMessageBox.confirm('确定要删除吗?', '提示', {
	    confirmButtonText: '确定',
	    cancelButtonText: '取消',
	    type: 'warning'
	}).then(() => {
		gdAnnexDel({'UniqId':row.UniqId,'gdbh':_Gd_gdbh.value}).then(response => {
			 if(response.code==0){
				 ElMessage({
				   type: 'success',
				   message: '删除成功',
				 })

				 let row = {
					 '订单编号':_Gd_gdbh.value,
					//  '产品代号':_Gd_cpdh.value,
					//  '产品名称':_Gd_cpmc.value,
				 }
				 tableRowClick (row)
			  }
		   })
	})

}

//技术附件弹窗确定
const jsfjenterDialog = () => {
	if(jsfjformdata.value.附件备注==''){
		ElMessage({
			type: 'error',
			message: '请填写附件备注'
		});
		return;
	}
	if(jsfjformdata.value.附件内容==''){
		ElMessage({
			type: 'error',
			message: '请上传文件'
		});
		return;
	}
	if(jsfjformdata.value.关联编号==''){
		ElMessage({
			type: 'error',
			message: '请填写关联编号'
		});
		return;
	}
	let fr = new FileReader();
	fr.readAsDataURL(jsfjformdata.value.附件内容);
	fr.onload = function () {
	  const restoredData = new FormData();
	  restoredData.append('sys_id', jsfjformdata.value.sys_id);
	  restoredData.append('附件备注', jsfjformdata.value.附件备注);
	  restoredData.append('附件内容', fr.result);
	  restoredData.append('附件类型', jsfjformdata.value.附件类型);
	  restoredData.append('关联编号', jsfjformdata.value.关联编号);
       //将restoredDta数据新增到接口
	   gdAnnexAdd(restoredData).then(response => {
		 if(response.code==0){
			 ElMessage({
			   type: 'success',
			   message: '新增成功',
			 })
			 jsfjdialogFormVisible.value = false
			 let row = {
				 '订单编号':_Gd_gdbh.value,
				//  '产品代号':_Gd_cpdh.value,
				//  '产品名称':_Gd_cpmc.value,
			 }
			 tableRowClick (row)
		 }
	   })
	}
}


//订单资料附件 - 预览
const gdbomupdateCompanyFunc = (row) => {
    // 加载插件和样式
    const loadScriptsAndStyles = () => {
        // 加载插件脚本
        $.getScript('/luckysheet/plugins/js/plugin.js', () => {
            $script('/luckysheet/luckysheet.umd.js', () => {
                initializeLuckysheet(); // 加载完成后初始化 Luckysheet
            });
        });

        // 定义样式文件路径
        const styles = [
            '/luckysheet/plugins/css/pluginsCss.css',
            '/luckysheet/plugins/plugins.css',
            '/luckysheet/css/luckysheet.css',
            '/luckysheet/assets/iconfont/iconfont.css'
        ];

        // 添加样式文件到页面
        styles.forEach(style => {
            $('head').append($('<link rel="stylesheet" type="text/css" />').attr('href', style));
        });
    };

    // 初始化 Luckysheet
    const initializeLuckysheet = () => {
        const callback = (exportJson, luckysheetfile) => {
            if (!exportJson.sheets || exportJson.sheets.length === 0) {
                alert("无法读取Excel文件内容，目前不支持xls文件格式！");
                return;
            }
            if (luckyExcel) luckyExcel.destroy(); // 销毁之前的实例
            luckysheet.create({
                container: 'luckyexcel',
                data: exportJson.sheets,
                title: exportJson.info.name,
                lang: "zh",
                showtoolbar: false,
                showinfobar: false,
                allowEdit: false,
                enableAddRow: false,
                enableAddCol: false,
                userInfo: false,
                showRowBar: false,
                showColumnBar: false,
                sheetFormulaBar: false,
                enableAddBackTop: false,
            });
            luckyExcel = luckysheet; // 存储实例
        };

        if (row['url'] === null || row['url'] === '') {
            // 转换Base64数据为Blob对象
            const blob = dataURLtoBlob(row.附件内容);
            luckyexcelVisible.value = true; // 控制页面展示
            LuckyExcel.transformExcelToLucky(blob, callback);
        } else {
            // 文件路径处理
            const excelPath = `/${row.url.replace(/\\/g, "/")}`;
            const excelName = excelPath.split('/').pop();
            luckyexcelVisible.value = true;
            LuckyExcel.transformExcelToLuckyByUrl(excelPath, excelName, callback);
        }
    };

    // 将Data URL转换为Blob对象
    const dataURLtoBlob = (dataUrl) => {
        const byteString = atob(dataUrl.split(',')[1]);
        const ab = new ArrayBuffer(byteString.length);
        const ia = new Uint8Array(ab);

        for (let i = 0; i < byteString.length; i++) {
            ia[i] = byteString.charCodeAt(i);
        }

        return new Blob([ab], { type: 'application/octet-stream' });
    };

    loadScriptsAndStyles(); // 开始加载插件和样式
};
// const gdbomupdateCompanyFunc = (row) => {
//     // 加载插件和样式
//     const loadScriptsAndStyles = () => {
//         $.getScript('/luckysheet/plugins/js/plugin.js', () => {
//             $script('/luckysheet/luckysheet.umd.js', () => {
//                 initializeLuckysheet();
//             });
//         });

//         const styles = [
//             '/luckysheet/plugins/css/pluginsCss.css',
//             '/luckysheet/plugins/plugins.css',
//             '/luckysheet/css/luckysheet.css',
//             '/luckysheet/assets/iconfont/iconfont.css'
//         ];

//         styles.forEach(style => {
//             $('head').append($('<link rel="stylesheet" type="text/css" />').attr('href', style));
//         });
//     };

//     // 初始化 Luckysheet
//     const initializeLuckysheet = () => {
//         const callback = (exportJson, luckysheetfile) => {
//             if (!exportJson.sheets || exportJson.sheets.length === 0) {
//                 alert("Failed to read the content of the excel file, currently does not support xls files!");
//                 return;
//             }
//             if (luckyExcel) luckyExcel.destroy();
//             luckysheet.create({
//                 container: 'luckyexcel',
//                 data: exportJson.sheets,
//                 title: exportJson.info.name,
//                 lang: "zh",
//                 showtoolbar: false,
//                 showinfobar: false,
//                 allowEdit: false,
//                 enableAddRow: false,
//                 enableAddCol: false,
//                 userInfo: false,
//                 showRowBar: false,
//                 showColumnBar: false,
//                 sheetFormulaBar: false,
//                 enableAddBackTop: false,
//             });
//             luckyExcel = luckysheet;
//         };

//         if (row['url'] === null || row['url'] === '') {
//             const blob = dataURLtoBlob(row.附件内容);
//             luckyexcelVisible.value = true;
//             LuckyExcel.transformExcelToLucky(blob, callback);
//         } else {
//             const excelPath = `/${row.url.replace(/\\/g, "/")}`;
//             const excelName = excelPath.split('/').pop();
//             luckyexcelVisible.value = true;
//             LuckyExcel.transformExcelToLuckyByUrl(excelPath, excelName, callback);
//         }
//     };

//     // Data URL 转 Blob
//     const dataURLtoBlob = (dataUrl) => {
//         const byteString = atob(dataUrl.split(',')[1]);
//         const ab = new ArrayBuffer(byteString.length);
//         const ia = new Uint8Array(ab);

//         for (let i = 0; i < byteString.length; i++) {
//             ia[i] = byteString.charCodeAt(i);
//         }

//         return new Blob([ab], { type: 'application/octet-stream' });
//     };

//     loadScriptsAndStyles();
// };

//技术资料excel展示
const ExcelShow = (row) =>{
	// 加载插件和样式
	const loadScriptsAndStyles = () => {
	    $.getScript('/luckysheet/plugins/js/plugin.js', () => {
	        $script('/luckysheet/luckysheet.umd.js', () => {
	            initializeLuckysheet();
	        });
	    });
	
	    const styles = [
	        '/luckysheet/plugins/css/pluginsCss.css',
	        '/luckysheet/plugins/plugins.css',
	        '/luckysheet/css/luckysheet.css',
	        '/luckysheet/assets/iconfont/iconfont.css'
	    ];
	
	    styles.forEach(style => {
	        $('head').append($('<link rel="stylesheet" type="text/css" />').attr('href', style));
	    });
	};
	
	// 初始化 Luckysheet
	const initializeLuckysheet = () => {
	    const callback = (exportJson, luckysheetfile) => {
	        if (!exportJson.sheets || exportJson.sheets.length === 0) {
	            alert("Failed to read the content of the excel file, currently does not support xls files!");
	            return;
	        }
	        if (luckyExcel) luckyExcel.destroy();
	        luckysheet.create({
	            container: 'luckyexcel',
	            data: exportJson.sheets,
	            title: exportJson.info.name,
	            lang: "zh",
	            showtoolbar: false,
	            showinfobar: false,
	            allowEdit: false,
	            enableAddRow: false,
	            enableAddCol: false,
	            userInfo: false,
	            showRowBar: false,
	            showColumnBar: false,
	            sheetFormulaBar: false,
	            enableAddBackTop: false,
	        });
	        luckyExcel = luckysheet;
	    };
	
	    if (row['url'] === null || row['url'] === '') {
	        const blob = dataURLtoBlob(row.附件内容);
	        luckyexcelVisible.value = true;
	        LuckyExcel.transformExcelToLucky(blob, callback);
	    } else {
	        const excelPath = `/${row.url.replace(/\\/g, "/")}`;
	        const excelName = excelPath.split('/').pop();
	        luckyexcelVisible.value = true;
	        LuckyExcel.transformExcelToLuckyByUrl(excelPath, excelName, callback);
	    }
	};
	
	// Data URL 转 Blob
	const dataURLtoBlob = (dataUrl) => {
	    const byteString = atob(dataUrl.split(',')[1]);
	    const ab = new ArrayBuffer(byteString.length);
	    const ia = new Uint8Array(ab);
	
	    for (let i = 0; i < byteString.length; i++) {
	        ia[i] = byteString.charCodeAt(i);
	    }
	
	    return new Blob([ab], { type: 'application/octet-stream' });
	};
	
	loadScriptsAndStyles();
}


let luckyExcel = null
const luckyexcelVisible = ref(false)
const luckyexcelCloseDialog = () => {
  luckyexcelVisible.value = false
}



</script>
<style scoped>
/* 在样式表中使用媒体查询 */
@media (max-width: 768px) {
  /* 在小屏幕下的样式设置 */
  .dialog-footer {
    text-align: center;
  }
}
/*背景颜色*/
/*印件背景颜色变黄*/
:deep(.el-table__body .warning-row) {
  background: #FFFF80 !important;
}
/*修正工单核算参数背景*/
:deep(.el-table__body .background-plan-usage-low div div div) {
  background: #80FA80 !important;
}
/* 选中某行时的背景色 */
:deep(.el-table__body tr.current-row) > td {
  background: #ff80ff !important;
}
:deep(.statusy-plan-usage-low div) {
  color: #8c939d !important;
}
/* 在样式表中添加以下样式 */
.el-input__textarea {
  resize: none; /* 禁止调整大小 */
}
.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-textarea textarea {
  resize: none !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;
}
.el-pagination{
  margin-top: 0px !important;
}
/* .upload-demo .el-upload {  
  border: 1px dashed #d9d9d9;  
  border-radius: 6px;  
  cursor: pointer;  
  position: relative;  
  overflow: hidden;  
}  
.upload-demo .el-upload:hover {  
  border-color: #409EFF;  
}   */

.mab{
  margin-bottom: 5px;
}
::v-deep(.input_style .el-input__inner) {  
  font-size: 18px; 
}  
::v-deep(.el-form-item__label) {  
  font-size: 18px; 
}

::v-deep(.el-upload-list--picture-card) {  
	margin-left: 100px;
}

</style>