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

<template>
  <div>
    <layout>
      <layout-header>
        <div class="">
          <!--按钮部分-->
          <el-form ref="elSearchFormRef"  class="demo-form-inline" :rules="searchRule" >
            <el-form-item>
              <el-input v-model="searchInfo"  placeholder="搜索订单号" style="width: 180px;" @keyup.enter="handleSearch"></el-input>
              <el-button type="primary" icon="search" @click="onSubmit" 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="cp_gdprintonClick" class="bt" title="打印生产订单" >订单打印</el-button>
            </el-form-item>
          </el-form>

        </div>

      </layout-header>
      <layout>
        <!-- 左侧树形结构 -->
        <layout-sider :resize-directions="['right']" :width="190" style="margin-right: 10px;">
          <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' }"
                        :cell-style="{ padding: '0px' }" :header-row-style="{ height: '20px' }"
                        :header-cell-style="{ padding: '0px' }"
                        border
                        tooltip-effect="dark"
                        :data="tableData" row-key="ID"
                        @row-click="tableRowClick"
                        highlight-current-row="true"
                        :cell-class-name="tableDataCellClass"
                        @row-dblclick="updateCompanyFunc"
                        @selection-change="handleSelectionChange"
                        :show-overflow-tooltip="true">
                <el-table-column align="center" type="selection" width="30"/>
                <el-table-column align="left" sortable label="序号"      	prop="序号"  	width="80" />
                <el-table-column align="left" sortable label="订单号"     	prop="订单号" 	width="100" />
                <el-table-column align="left" sortable label="生产款号"   	prop="生产款号"  width="110" />
                <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="80"/>
                <el-table-column align="left" sortable label="箱唛要求"   	prop="箱唛要求" 	width="110" />
                <el-table-column align="left" sortable label="面料"       	prop="面料" 		width="110" />
                <el-table-column align="left" sortable label="要求"       	prop="要求" 		width="110" />
                <el-table-column align="left" sortable label="船样描述"    	prop="船样描述" 	width="110" />
                <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="110" />
                <el-table-column align="left" sortable label="单位"    		prop="单位" 		width="80" />
                <el-table-column align="left" sortable label="审核"    		prop="审核" 		width="80" />
                <el-table-column align="left" sortable label="审核日期"    	prop="审核日期" 	width="110" />
              </el-table>
              <!-- 分页 -->
              <div class="gva-pagination">
                <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="page"
                    :page-sizes="[10, 30, 50, 100]"
                    layout="total, sizes, prev, pager, next, jumper"
                    :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-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="55" />
                  <el-table-column align="left" sortable label="序号" prop="序号"  width="100"/>
                  <el-table-column align="left" sortable label="订单子编号" prop="订单子编号"  width="120"/>
                  <el-table-column align="left" sortable label="颜色名称" prop="颜色名称"  width="110"/>
                  <el-table-column align="left" sortable label="船样" prop="船样"  width="110"/>
                  <el-table-column align="left" sortable label="S" prop="S"  width="70"/> 
                  <el-table-column align="left" sortable label="M" prop="M"  width="70"/>
                  <el-table-column align="left" sortable label="L" prop="L"  width="70"/>
                  <el-table-column align="left" sortable label="XL" prop="XL"  width="70"/>
                  <el-table-column align="left" sortable label="XXL" prop="XXL"  width="80"/>
                  <el-table-column align="left" sortable label="制单总数" prop="制单总数"  width="110"/>
                  <el-table-column align="left" sortable label="建档用户" prop="建档用户"  width="110"/>
                  <el-table-column align="left" sortable label="建档时间" prop="建档时间"  width="110"/>
                  <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-column align="left" label="更新时间" prop="更新时间"  width="150"/>
                </el-table>
              </el-tab-pane>

              <el-tab-pane label="订单资料附件" @click="showTable('订单资料附件')" name="third">
                <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"
                          :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="handleSelectionChange">
                  <!-- <el-table-column type="selection" width="30" /> -->
                  <el-table-column align="left" label="序号" prop="序号"  width="70"/>
                  <el-table-column align="left" label="备注" prop="备注"  width="70"/>
                  <el-table-column align="left" label="文件类型" prop="文件类型"  width="90"/>
                  <el-table-column align="left" label="关联产品" prop="关联产品"  width="90"/>
                  <el-table-column align="left" label="建档用户" prop="建档用户"  width="90"/>
                  <el-table-column align="left" label="建档时间" prop="建档时间"  width="90"/>
                  <el-table-column align="left" label="更新时间" prop="更新时间"  width="90"/>
                  <el-table-column align="left" label="操作" prop="操作"  width="70" />
                </el-table>
              </el-tab-pane> 

			  <el-tab-pane label="技术附件" @click="showTable('技术附件')" name="fourth">
			  	<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"
					  :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="handleSelectionChange">
              <!-- <el-table-column type="selection" width="55" /> -->
                  <el-table-column align="left" label="序号" prop="序号"  width="70"/>
                  <el-table-column align="left" label="备注" prop="备注"  width="70"/>
                  <el-table-column align="left" label="文件类型" prop="文件类型"  width="90"/>
                  <el-table-column align="left" label="关联产品" prop="关联产品"  width="90"/>
                  <el-table-column align="left" label="建档用户" prop="建档用户"  width="90"/>
                  <el-table-column align="left" label="建档时间" prop="建档时间"  width="90"/>
                  <el-table-column align="left" label="更新时间" prop="更新时间"  width="90"/>
					<el-table-column fixed="right" label="操作" width="100">
						<!-- <template v-slot="{ row }">
						  <button @click="jsfj_del(row)">删除</button>
						</template> -->
					  </el-table-column>
			      </el-table>
			    </el-tab-pane>
            </el-tabs>
          <!-- 弹窗 -->
          <el-dialog v-model="dialogFormVisible" :before-close="edit_closeDialog" title="颜色资料修改"  destroy-on-close style="width: 40%; height: 45%;">
				<el-row :gutter="24">
					<el-col :span="10">
						<el-form-item label="订单子编号:" prop="deliveryDate" class="mab" label-width="120px" style="">
							<el-input v-model="edit_formData['订单子编号']" style="width: 100%;" id="订单子编号:" />
						</el-form-item>
					</el-col>
					<el-col :span="10">
						<el-form-item label="颜色名称:" prop="deliveryDate" class="mab" label-width="120px" style="">
							<el-input v-model="edit_formData['颜色名称']" style="width: 100%;" id="颜色名称" />
						</el-form-item>
					</el-col>
				</el-row>
				<el-row :gutter="24" >
					<el-col :span="10">
						<el-form-item label="船样:" prop="deliveryDate" class="mab" label-width="120px" style="">
							<el-input v-model="edit_formData['船样']" style="width: 100%;" id="船样" />
						</el-form-item>
					</el-col>
					<el-col :span="10">
						<el-form-item label="S:" prop="deliveryDate" class="mab" label-width="120px" style="">
							<el-input v-model="edit_formData['S']" style="width: 100%; height: 40px;" id="S" />
						</el-form-item>
					</el-col>
				</el-row>
				<el-row :gutter="24">
					<el-col :span="10">
						<el-form-item label="M:" prop="deliveryDate" class="mab" label-width="120px" style="">
							<el-input v-model="edit_formData['M']" style="width: 100%; height: 40px;" id="M" />
						</el-form-item>
					</el-col>
					<el-col :span="10">
						<el-form-item label="L:" prop="deliveryDate" class="mab" label-width="120px" style="">
							<el-input v-model="edit_formData['L']" style="width: 100%; height: 40px;" id="L" />
						</el-form-item>
					</el-col>
				</el-row>
				<el-row :gutter="24"  >
					<el-col :span="10">
						<el-form-item label="XL:" prop="deliveryDate" class="mab" label-width="120px" style="">
							<el-input v-model="edit_formData['XL']" style="width: 100%; height: 40px;" id="XL" />
						</el-form-item>
					</el-col>
          <el-col :span="10">
						<el-form-item label="XXL:" prop="deliveryDate" class="mab" label-width="120px" style="">
							<el-input v-model="edit_formData['XXL']" style="width: 100%; height: 40px;" id="XXL" />
						</el-form-item>
					</el-col>
				</el-row>
        <el-row :gutter="24"  >
					<el-col :span="10">
						<el-form-item label="制单总数:" prop="deliveryDate" class="mab" label-width="120px" style=" ">
							<el-input v-model="edit_formData['制单总数']" style="width: 100%; height: 40px;" id="制单总数" />
						</el-form-item>
					</el-col>
					<el-col :span="10">
						<el-form-item label="建档用户:" prop="deliveryDate" class="mab" label-width="120px" style=" ">
							<el-input v-model="edit_formData['建档用户']" style="width: 100%; height: 40px;" id="建档用户" />
						</el-form-item>
					</el-col>
				</el-row>
        <el-row :gutter="24" >
					<el-col :span="10">
						<el-form-item label="建档时间:" prop="deliveryDate" class="mab" label-width="120px" style="">
							<el-input v-model="edit_formData['建档时间']" style="width: 100%; height: 40px;" id="建档时间" />
						</el-form-item>
					</el-col>
					<el-col :span="10">
						<el-form-item label="更新时间:" prop="deliveryDate" class="mab" label-width="120px" style="">
							<el-input v-model="edit_formData['更新时间']" style="width: 100%; height: 40px;" id="更新时间" />
						</el-form-item>
					</el-col>
				</el-row>
				<template #footer>
					<div class="dialog-footer">
						<el-button @click="edit_closeDialog">取消</el-button>
						<el-button type="primary" @click="edit_Dialog">确认</el-button>
					</div>
				</template>
			</el-dialog>
			
			<!-- 新增工单资料 -->
            <el-dialog v-model="add_gddialogFormVisible" :before-close="add_gdcloseDialog"  style="width: 35%;margin: 50px auto" :title="'新增'" destroy-on-close>
              <el-row>
                <el-form :model="add_gdscgdformData" label-position="right" ref="elFormRef" :rules="rule" > 
                  <el-row :gutter="24" >
                    <el-form-item label="订单号:" prop="customerCode" class="mab" label-width="90" >
                      <el-input v-model="add_gdscgdformData['订单号']"  style="width: 150px;" id="订单号"  @keydown="add_gdzlent($event, '审核日期', '订单号', '订单编号')" />
                    </el-form-item>
                    <el-form-item label="订单编号:" prop="customerCode" class="mab" label-width="90">
                      <el-input v-model="add_gdscgdformData['订单编号']"  style="width: 150px;" id="订单编号"  @keydown="add_gdzlent($event, '订单号', '订单编号', '生产款号')" />
                    </el-form-item>
                  </el-row>
                  <el-row :gutter="24">
                    <el-form-item label="生产款号:" prop="customerCode" class="mab" label-width="90">
                      <el-input v-model="add_gdscgdformData['生产款号']" style="width: 150px;" id="生产款号"  @keydown="add_gdzlent($event, '订单编号', '生产款号', '款式')"/>
                    </el-form-item>
                    <el-form-item label="款式:" prop="customerCode" class="mab" label-width="90">
                      <el-input v-model="add_gdscgdformData['款式']" style="width: 150px;" id="款式"  @keydown="add_gdzlent($event, '生产款号', '款式', '客户')"/>
                    </el-form-item>
                  </el-row>
                  <el-row :gutter="24">
                    <el-form-item label="客户:" prop="customerCode" class="mab" label-width="90">
                      <el-input v-model="add_gdscgdformData['客户']" style="width: 150px;" id="客户"  @keydown="add_gdzlent($event, '款式', '客户', '落货日期')"/>
                    </el-form-item>
                    <el-form-item label="落货日期:" prop="deliveryDate" class="mab" label-width="90">
                      <el-date-picker v-model="add_gdscgdformData['落货日期']" type="date"  style="width: 150px;"  id="落货日期"  @keydown="add_gdzlent($event, '客户', '落货日期', '面料')"/>
                    </el-form-item>
                  </el-row>
                  <el-row :gutter="24">
                    <el-form-item label="面料:" prop="customerCode" class="mab" label-width="90">
                      <el-input v-model="add_gdscgdformData['面料']"  style="width: 150px;" id="面料"  @keydown="add_gdzlent($event, '落货日期', '面料', '要求')"/>
                      <el-form-item label="要求:" prop="customerCode" class="mab" label-width="90">
                      <el-input v-model="add_gdscgdformData['要求']" p style="width: 150px;" id="要求"  @keydown="add_gdzlent($event, '面料', '要求', '船样描述')"/>
                    </el-form-item>
                    </el-form-item>
                  </el-row>
                  <el-row :gutter="24">
                    <el-form-item label="船样描述:" prop="customerCode" class="mab" label-width="90">
                      <el-input v-model="add_gdscgdformData['船样描述']"  style="width: 150px;" id="船样描述"  @keydown="add_gdzlent($event, '要求', '船样描述', '船样合计')"/>
                    </el-form-item>
                    <el-form-item label="船样合计:" prop="customerCode" class="mab" label-width="90">
                      <el-input v-model="add_gdscgdformData['船样合计']"  style="width: 150px;" id="船样合计"  @keydown="add_gdzlent($event, '船样描述', '船样合计', '箱唛要求')"/>
                    </el-form-item>
                  </el-row>
                  <el-row :gutter="24">
                    <el-form-item label="箱唛要求:" prop="customerCode" class="mab" label-width="90">
                      <el-input v-model="add_gdscgdformData['箱唛要求']" style="width: 150px;" id="箱唛要求"  @keydown="add_gdzlent($event, '船样合计', '箱唛要求', '粘朴')"/>
                    </el-form-item>
                    <el-form-item label="粘朴:" prop="customerCode" class="mab" label-width="90">
                      <el-input v-model="add_gdscgdformData['粘朴']"  style="width: 150px;" id="粘朴"  @keydown="add_gdzlent($event, '箱唛要求', '粘朴', '订单数量')"/>
                    </el-form-item>
                  </el-row>
                  <el-row :gutter="24">
                    <el-form-item label="订单数量:" prop="customerCode" class="mab" label-width="90">
                      <el-input v-model="add_gdscgdformData['订单数量']"  style="width: 150px;" id="订单数量"  @keydown="add_gdzlent($event, '粘朴', '订单数量', '单位')"/>
                    </el-form-item>
                    <el-form-item label="单位:" prop="customerCode" class="mab" label-width="90">
                      <el-input v-model="add_gdscgdformData['单位']"  style="width: 150px;" id="单位"  @keydown="add_gdzlent($event, '订单数量', '单位', '制单人')"/>
                    </el-form-item>
                  </el-row>
                  <el-row :gutter="24">
                    <el-form-item label="制单人:" prop="customerCode" class="mab" label-width="90">
                      <el-input v-model="add_gdscgdformData['制单人']"  style="width: 150px;" id="制单人"  @keydown="add_gdzlent($event, '单位', '制单人', '制单日期')"/>
                    </el-form-item>
                    <el-form-item label="制单日期:" prop="deliveryDate" class="mab" label-width="90">
                      <el-date-picker v-model="add_gdscgdformData['制单日期']" type="date"  style="width: 150px;"  id="制单日期"  @keydown="add_gdzlent($event, '制单人', '制单日期', '审核人')"/>
                    </el-form-item>
                  </el-row>
                  <el-row :gutter="24">
                    <el-form-item label="审核人:" prop="customerCode" class="mab" label-width="90">
                      <el-input v-model="add_gdscgdformData['审核人']" style="width: 150px;" id="审核人"  @keydown="add_gdzlent($event, '制单日期', '审核人', '审核日期')"/>
                    </el-form-item>
                    <el-form-item label="审核日期:" prop="deliveryDate" class="mab" label-width="90">
                      <el-date-picker v-model="add_gdscgdformData['审核日期']" type="date"  style="width: 150px;"  id="审核日期"  @keydown="add_gdzlent($event, '审核人', '审核日期', '订单号')"/>
                    </el-form-item>
                  </el-row>
                </el-form>
              </el-row>
              <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="add_gdyjdialogFormVisible" :before-close="add_gdyjcloseDialog" style="width: 45%;" :title="'新增颜色资料'" destroy-on-close>
                <el-form label-width="100px" :model="add_yjzlformdata">
                  <div style="display: flex; gap: 0px;">
                    <h3 style="color:red;font-size: 24px;margin:-5px 0px 8px 12px;">订单号&nbsp;&nbsp;&nbsp;{{_ddhval}}</h3>
                  </div>
                  <div style="display: flex; gap: 0px;">
                    <el-form-item label="订单子编号:" class="mab" prop="keyOrder">
                      <el-input v-model="add_yjzlformdata.ddzbh" style="width: 150px;" id="订单子编号" @keydown="add_gdzlent($event, 'zds9', '订单子编号', '颜色')"/>
                    </el-form-item>
                    <el-form-item label="颜色:" class="mab" prop="keyOrder">
                      <el-input v-model="add_yjzlformdata.ys" style="width: 150px;" id="颜色" @keydown="add_gdzlent($event, '订单子编号', '颜色', '尺码规格')"/>
                    </el-form-item>
                  </div>
                  <div style="display: flex; gap: 0px;">
                    <el-form-item label="尺码规格:" prop="joinDate" >
                      <el-select v-model="add_yjzlformdata.cmgg" style="width: 150px;" id="尺码规格" @keydown="add_gdzlent($event, '颜色', '尺码规格', '是否船样')">
                        <el-option label="32~46"  @click="cmhandleSizeChange('尺码数')"></el-option>
                        <el-option label="S~XXL"  @click="cmhandleSizeChange('尺码')"></el-option>
                      </el-select>
                    </el-form-item>
                    <el-form-item label="是否船样:" prop="joinDate" >
                      <el-select v-model="add_yjzlformdata.sfcy" style="width: 150px;" id="是否船样" @keydown="add_gdzlent($event, '尺码规格', '是否船样', 'zds1')">
                        <el-option label="是" value="是"></el-option>
                        <el-option label="否" value="否"></el-option>
                      </el-select>
                    </el-form-item>
                  </div>
                  <div style="display: flex; gap: 0px;">
                    <el-form-item label="尺码:" class="mab" prop="keyOrder">
                      <el-input v-model="cmformdata.cm1" readonly style="width: 80px;"/>
                      <el-input v-model="cmformdata.cm2" readonly style="width: 80px;"/>
                      <el-input v-model="cmformdata.cm3" readonly style="width: 80px;"/>
                      <el-input v-model="cmformdata.cm4" readonly style="width: 80px;"/>
                      <el-input v-model="cmformdata.cm5" readonly style="width: 80px;"/>
                      <el-input v-model="cmformdata.cm6" readonly style="width: 80px;"/>
                      <el-input v-model="cmformdata.cm7" readonly style="width: 80px;"/>
                      <el-input v-model="cmformdata.cm8" readonly style="width: 80px;"/>
                      <el-input v-model="cmformdata.cm9" readonly style="width: 80px;"/>
                    </el-form-item>
                  </div>
                  <div style="display: flex; gap: 0px;">
                    <el-form-item label="制单数:" class="mab" prop="keyOrder">
                      <el-input v-model="zdsformdata.zds1" style="width: 80px;" id="zds1" @keydown="add_gdzlent($event, '是否船样', 'zds1', 'zds2')"/>
                      <el-input v-model="zdsformdata.zds2" style="width: 80px;" id="zds2" @keydown="add_gdzlent($event, 'zds1', 'zds2', 'zds3')"/>
                      <el-input v-model="zdsformdata.zds3" style="width: 80px;" id="zds3" @keydown="add_gdzlent($event, 'zds2', 'zds3', 'zds4')"/>
                      <el-input v-model="zdsformdata.zds4" style="width: 80px;" id="zds4" @keydown="add_gdzlent($event, 'zds3', 'zds4', 'zds5')"/>
                      <el-input v-model="zdsformdata.zds5" style="width: 80px;" id="zds5" @keydown="add_gdzlent($event, 'zds4', 'zds5', 'zds6')"/>
                      <el-input v-model="zdsformdata.zds6" style="width: 80px;" id="zds6" @keydown="add_gdzlent($event, 'zds5', 'zds6', 'zds7')"/>
                      <el-input v-model="zdsformdata.zds7" style="width: 80px;" id="zds7" @keydown="add_gdzlent($event, 'zds6', 'zds7', 'zds8')"/>
                      <el-input v-model="zdsformdata.zds8" style="width: 80px;" id="zds8" @keydown="add_gdzlent($event, 'zds7', 'zds8', 'zds9')"/>
                      <el-input v-model="zdsformdata.zds9" style="width: 80px;" id="zds9" @keydown="add_gdzlent($event, 'zds8', 'zds9', '订单子编号')"/>
                    </el-form-item>
                  </div>
                  <!-- 图片 --> 
                  <div style="display: flex; gap: 0px;">
                    <el-form-item label="上传图片:" prop="image" class="mab" label-width="100px">
                      <el-upload
  action="#"
  list-type="picture-card"
  :auto-upload="false">
    <i slot="default" class="el-icon-plus"></i>
    <div slot="file" slot-scope="{file}">
      <img
        class="el-upload-list__item-thumbnail"
        :src="file.url" alt=""
      >
      <span class="el-upload-list__item-actions">
        <span
          class="el-upload-list__item-preview"
          @click="handlePictureCardPreview(file)"
        >
          <i class="el-icon-zoom-in"></i>
        </span>
        <span
          v-if="!disabled"
          class="el-upload-list__item-delete"
          @click="handleDownload(file)"
        >
          <i class="el-icon-download"></i>
        </span>
        <span
          v-if="!disabled"
          class="el-upload-list__item-delete"
          @click="handleRemove(file)"
        >
          <i class="el-icon-delete"></i>
        </span>
      </span>
    </div>
</el-upload>
                    </el-form-item>
                  </div>
                </el-form>
                <template #footer>
                  <div class="dialog-footer" style="text-align: right;">
                    <el-button @click="add_dyjcloseDialog">取消</el-button>
                    <el-button   @click="add_gdyjenterDialog">确定</el-button>
                  </div>
                </template>
              </el-dialog>

              <el-dialog :visible.sync="dialogVisible">
  <img width="100%" :src="dialogImageUrl" alt="">
</el-dialog>
            
			<!-- 新增工序资料-->
			<el-dialog v-model="visible" :before-close="()=> visible = false" style="width: 20%;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=" 100">
            <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=" 100">
              <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=" 100">
              <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=" 100">
              <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=" 100">
              <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=" 100">
              <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=" 100">
              <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="800px" destroy-on-close>
			  <el-form :model="jsfjformdata" label-position="right" ref="elFormRef" :rules="rule" label-width="75px">
				<el-row :gutter="24">
					<el-col :span="6">
					  <el-form-item label="关联编号:" prop="address" class="mab">
						<el-input v-model="jsfjformdata.关联编号"  id="关联编号" />
					  </el-form-item>
					</el-col>
				</el-row>
				<el-row :gutter="24">
					<el-col :span="24">
					  <el-form-item label="附件备注:" prop="address" class="mab">
						<el-input v-model="jsfjformdata.附件备注"  id="附件备注" />
					  </el-form-item>
					</el-col>
				</el-row>
				<el-row :gutter="24">
					<el-col :span="6"></el-col>
					<el-col :span="12">
						<input style="font-size:16px;" type="file" @change="uploadExcel" >
					</el-col>
					<el-col :span="6">
						<el-button @click="yulan">预览</el-button>
					</el-col>
				</el-row>
			  </el-form>
			  <template #footer>
				<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: 90vh;"></div>
			</el-dialog>

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

    <PrintPage ref="printPageRef" />

  </div>
</template>
<script>
//点击按钮显示下方表格
export default {
  data() {
    return {
      currentTable: '', // 当前展示的表格
      activeName: 'first',
      // imageUrl: '', //新增颜色资料图片
      _ddhval:'',
    };
  },
  methods: {
    showTable(tableName) {
      this.currentTable = tableName;
    },
    showTableChange() {
      // 处理表格选中事件
    },
    // //新增颜色资料图片
    // handlePreview(file) {
    //   const reader = new FileReader();
    //   reader.onload = (e) => {
    //     this.imageUrl = e.target.result; // 将选择显示在页面上
    //   };
    //   reader.readAsDataURL(file); // 将文件读为Data URL
    //   return false; // 阻止文件的默认上传行为
    // },
    // 对列进行合算
    getSummaries(param) {
        const { columns, data } = param;
        const sums = [];
        columns.forEach((column, index) => {
          if (index === 0) {
            sums[index] = '合计';
            return;
          }
          const values = data.map(item => Number(item[column.property]));
          // 选择需要合算的列进行合算。

         if (column.property === 'S'||column.property === 'M'||column.property === 'L'||column.property === 'XL'||column.property === 'XXL'||column.property === '制单总数') {
            if (!values.every(value => isNaN(value))) {
                sums[index] = values.reduce((prev, curr) => {
                const value = Number(curr);
                if (!isNaN(value)) {
                    return prev + curr;
                }else {
                    return prev;
                }
              }, 0);
                sums[index] += '';
              } else {
                sums[index] = '---'
            }
         }
      });
        return sums;
    },
  }
};
</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 } from 'element-plus'
import { ref, reactive, computed, nextTick, watch } from 'vue'
import { useUserStore } from '@/pinia/modules/user'
import { DataList,WorkList, gdzl_MachineList,PrintCodeList,getProductYjList, getProductZzList,
  U8workOrder, ProcessDetailEdit, PrintedEdit, PrintJobOrder,WorkOrderAdd,PrintDetailAdd,
  WorkOrderEdit, ReferenceWorkOrder,getOrderProcessLeft,ClientList,ProductCodeList,
  editGyWaste, U8DataCorrection, AccountingParameterEdit,ProcessCopy,
  ProductInformation, TestCoefficient, capacityList,getOrderProcessRight,
  DataCorrection, U8Trial, ProcessFlow, AccountingParameter,setProductStatus,
  getProduct, getProductGy, ProductInformationEdit, workOrderListDetail, editProduct, getOrderProcessCount, StatusEdit,
  PrintDetailDel, ProcessDetailDel,WorkOrderDetailCope,getGdAnnexTable,WorkOrderData,WorkOrderDel,
  gdAnnexAdd,
  gdAnnexDel,
} from "@/api/yunyin/yunying";
import PrintPage from './components/print.vue'
import AddGongYi from './components/addGongYi.vue'
defineOptions({name: 'Company'})
const printPageRef = ref()
const userStore = useUserStore()
const _username = ref('')
_username.value = userStore.userInfo.userName + '/' + userStore.userInfo.nickName

// =========== 左侧树侧形结构 ===========
const treeData = ref({})
const tableData = reactive([])
const _Gd_khdh = ref(null)
const DataListdata = async () => {
  try {
    // const data = await Datalist();
    const data = 
    [{
      label : '客户编号',
      children : [
      {label : 'DC-1'},
      {label : 'DC-2'},
      {label : 'DC-3'},
      {label : 'DC-4'},
      {label : 'DC-5'},
      {label : 'DC-6'},
      {label : 'DC-7'},
      {label : 'DC-8'},
      {label : 'DC-9'},
      {label : 'DC-10'},
      {label : 'DC-11'},
      {label : 'DC-12'},
      {label : 'DC-13'},
      {label : 'DC-14'},
      {label : 'DC-15'}
    ]
    }];
    treeData.value = data
  } catch (error) {
    console.error(error);
  }
};
DataListdata();

//点击左侧树形获取编号
const handleNodeClick = async (node) => {
  // 取消所有节点的颜色
  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';
  }
  searchInfo.value = '';
  if (node.label === '客户编号') {
    // console.log('点击了客户编号')
  }else{
    _Gd_khdh.value = 'J0031';
    _WorkList_page();
  }
};


//调用工单资料接口
const _WorkList_page = async () => {
  console.log(_Gd_khdh.value)
  try {
    const WorkListdata = [
      {
        '序号':'1',
        '订单号':'2408001',
        '生产款号':'2401-1622款',
        '客户':'DC-7',
        '落货日期':'2024/7/20',
        '款式':'连衣裙',
        '箱唛要求':'折箱装修',
        '面料':'面布：乱麻复合布；拼布：AZ666雪纺…',
        '要求':'',
        '船样描述':'',
        '船样合计':'4',
        '粘衬':'',
        '订单数量':'174',
        '单位':'件',
        '审核':'裘志江',
        '审核日期':'2024/6/27'
      },
      {
        '序号':'2',
        '订单号':'2408002',
        '生产款号':'2403-1624款',
        '客户':'DC-7',
        '落货日期':'2024/7/20',
        '款式':'西服',
        '箱唛要求':'挂装出运',
        '面料':'面布：乱麻复合布；拼布：AZ666雪纺…',
        '要求':'',
        '船样描述':'',
        '船样合计':'5',
        '粘衬':'',
        '订单数量':'185',
        '单位':'件',
        '审核':'裘志江',
        '审核日期':'2024/6/27'
      },
      {
        '序号':'3',
        '订单号':'2408003',
        '生产款号':'2403-1625款',
        '客户':'DC-7',
        '落货日期':'2024/7/20',
        '款式':'裤子',
        '箱唛要求':'挂装出运',
        '面料':'面布：乱麻复合布；拼布：AZ666雪纺…',
        '要求':'',
        '船样描述':'',
        '船样合计':'5',
        '粘衬':'',
        '订单数量':'197',
        '单位':'件',
        '审核':'裘志江',
        '审核日期':'2024/6/27'
      },
  ];
	  console.log("上方表格数据")
    console.log(WorkListdata)
    tableData.splice(0,tableData.length,...WorkListdata);//表格数据
    // total.value =WorkListdata.data.total;//共多少条
  } catch (error) {
    console.error(error);
  }
};
//双击修改颜色资料
const dialogFormVisible = ref(false)
const edit_formData = ref({})
const ysupdateCompanyFunc = async (row) => {
	console.log(row)
	dialogFormVisible.value = true;
	Object.assign(edit_formData.value,row);
};
// 修改确认
const edit_Dialog = async (row) => {
	dialogFormVisible.value = false;
};
// 修改取消
const edit_closeDialog = async (row) => {
	dialogFormVisible.value = false;
};
// 分页
const page = ref(1)
const total = ref(0)
const pageSize = ref(50)
const handleCurrentChange = (val) => {
  page.value = val;
  _WorkList_page();
};

// 修改页面容量 点击多少条/页
const handleSizeChange = (val) => {
  // page.value = 10;
  pageSize.value = val;
  _WorkList_page();
};

// =========== 新增 ===========
const add_gddialogFormVisible = ref(false)
// 获取当前日期
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 add_gdscgdformData = reactive({
  订单编号: '',
  生产款号: '',
  款式: '',
  客户: '',
  落货日期: '',
  箱唛要求: '',
  面料: '',
  要求: '',
  船样描述: '',
  船样合计: '',
  粘朴: '',
  订单数量: '',
  单位: '',
  制单人: '',
  制单日期: '',
  审核人: '',
  审核日期: '',
});
//清空对象的属性值
const gd_clearFormData = () => {
  Object.keys(add_gdscgdformData).forEach(key => {
    add_gdscgdformData[key] = '';
  });
};
//新增按钮
const addgd_onclick = () => {

  add_gddialogFormVisible.value = true
  add_gdscgdformData['订单号'] = '';
  add_gdscgdformData['落货日期'] = currentDate;
  add_gdscgdformData['制单日期'] = currentDate;
  add_gdscgdformData['审核日期'] = currentDate;
  }


//新增工单资料确定
const add_gdenterDialog = async ()=>{
	if(add_gdscgdformData['订单编号'] === '' ||  add_gdscgdformData['订单编号'] === undefined){
	  ElMessage({type: 'warning',message: '订单编号不能为空' })
	  return false;
	}
	console.log("新增工单资料确定")
	console.log(add_gdscgdformData)
	const formattedData = {
		ddbh: add_gdscgdformData['订单编号'],
		sckh: add_gdscgdformData['生产款号'],
		khmc: add_gdscgdformData['款式'],
		khdh: add_gdscgdformData['客户'],
		cpdh: add_gdscgdformData['落货日期'],
		cpmc: add_gdscgdformData['箱唛要求'],
		ddsl: add_gdscgdformData['面料'],
		tll: add_gdscgdformData['要求'],
		jhtl: add_gdscgdformData['船样描述'],
		sjtl: add_gdscgdformData['船样合计'],
		jldw: add_gdscgdformData['粘朴'],
		tldx: add_gdscgdformData['订单数量'],
		xsddh: add_gdscgdformData['单位'],
		jymb: add_gdscgdformData['制单人'],
		bbh: add_gdscgdformData['制单日期'],
		erp: add_gdscgdformData['审核人'],
		ymsl: add_gdscgdformData['审核日期']
	};
	console.log(formattedData)
	// const edit_gdformdata_list = await 新增工单接口(formattedData);
	// if (edit_gdformdata_list.code === 0) {
	// 	add_gddialogFormVisible.value = false;
	// 	ElMessage({type: 'success',message: '新增成功'})
	// } else {
	// 	ElMessage({ type: 'error',message: '新增失败'})
	// }
 
}
//新增工单资料取消
const add_gdcloseDialog = () => {
  add_gddialogFormVisible.value = false
}


// =========== 新增颜色资料 ===========
//默认弹窗关闭
const add_gdyjdialogFormVisible = ref(false)
const add_yjzlformdata = reactive({
  ddh: '',
  ddzbh: '',
  ys: '',
  cmgg: '',
  sfcy: '',
});
const cmformdata = reactive({
  cm1:'32',
  cm2:'34',
  cm3:'36',
  cm4:'38',
  cm5:'40',
  cm6:'42',
  cm7:'44',
  cm8:'46',
  cm9:'总计',
});
const zdsformdata = reactive({
  zds1:'',
  zds2:'',
  zds3:'',
  zds4:'',
  zds5:'',
  zds6:'',
  zds7:'',
  zds8:'',
  zds9:'',
});
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 = '总计';
	} else if (value === '尺码') {
	  cmformdata.cm1 = 'S';
	  cmformdata.cm2 = 'M';
	  cmformdata.cm3 = 'L';
	  cmformdata.cm4 = 'XL';
	  cmformdata.cm5 = 'XXL';
	  cmformdata.cm6 = '';
	  cmformdata.cm7 = '';
	  cmformdata.cm8 = '';
	  cmformdata.cm9 = '总计';
	}
};
//清空对象的属性值
const gdyj_clearFormData = () => {
  Object.keys(zdsformdata).forEach(key => {
    zdsformdata[key] = '';
  });
  add_yjzlformdata['ddh'] = _Gd_gdbh.value;
  add_yjzlformdata['ddzbh'] = '';
  add_yjzlformdata['ys'] = '';
  add_yjzlformdata['cmgg'] = '32~46';
  add_yjzlformdata['sfcy'] = '是';
};
//新增颜色资料按钮
const addgdyj_onclick = () => {
  if(_Gd_gdbh.value === '' || _Gd_gdbh.value === null){
    ElMessage({type: 'warning',message: '请选择具体的工单后，再操作此功能'})
    return false;
  }else{
    add_gdyjdialogFormVisible.value = true
    gdyj_clearFormData();
  }
}

const dialogImageUrl = ref('')
const dialogVisible = ref(false)
const disabled = ref(false)
const file =ref('')
 //新增颜色资料图片
 const handleRemove = (file) => {
  console.log(file);
}; 
const handlePictureCardPreview = (file) => {
  this.dialogImageUrl = file.url;
  this.dialogVisible = true;
}; 
const handleDownload = (file) => {
  console.log(file);
}; 
// const beforeUpload = (file) => {  
//       return false; // 阻止自动上传  
//     };  

    // return {  
    //   fileList, // 注意：这里并没有直接使用 fileList，因为 el-upload 组件有自己的 file-list 属性  
    //   handleFileChange,  
    //   beforeUpload,  
    // };  

// const handleSuccess = (response, file, fileList) => {  
//   // 假设服务器返回了图片的URL  
//   imageUrl.value = response.imageUrl; // 根据实际服务器响应调整  
//   // 可以在这里做其他处理，比如更新表单数据等  
// }  

//新增颜色资料确定
const add_gdyjenterDialog =  async  () => {
  console.log(previewFiles);
  // return false;
  // console.log(zdsformdata)
  const addyszltable = {
		订单子编号: add_yjzlformdata['ddzbh'],
		颜色: add_yjzlformdata['ys'],
		尺码规格: add_yjzlformdata['cmgg'],
		是否船样: add_yjzlformdata['sfcy'],
		尺码1: zdsformdata['zds1'],
    尺码2: zdsformdata['zds2'],
    尺码3: zdsformdata['zds3'],
    尺码4: zdsformdata['zds4'],
    尺码5: zdsformdata['zds5'],
    尺码6: zdsformdata['zds6'],
    尺码7: zdsformdata['zds7'],
    尺码8: zdsformdata['zds8'],
    合计: zdsformdata['zds9'],
    图片:previewFiles['value']['0']['name']
	};
  console.log(addyszltable)
}

//新增颜色资料取消
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)
  //1.2新增工序资接口
	// const add_gxformdata_list = await 新增工序资料(formattedData);
	// if (edit_gxformdata_list.code === 0) {
	// 	visible.value = false;
	// 	ElMessage({type: 'success',message: '新增成功'})
	// } else {
	// 	ElMessage({ type: 'error',message: '新增失败'})
	// }
}

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

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


//点击表格行获取下方表格数据列表
// =========== 颜色资料、工艺资料、技术资料附件 ===========
//全局调用订单号编号
const _Gd_gdbh = ref('')
const _ddhval = ref('')
//颜色资料
const ystableData = reactive([])
//工艺资料
const gytableData = reactive([])
//订单资料表
const ddtableData = reactive([])
//技术附件
const jstableData = reactive([])
// 点击工单行按钮
const tableRowClick = async (row) => {
  console.log(row.订单号)
  _Gd_gdbh.value = row.订单号
  _ddhval.value = row.订单号
  if(row.订单号 === '2408001' ){
    ystableData.length = 0
    try {
    const ysData = [
      {
        '序号':'1',
        '订单子编号':'2408001-1',
        '颜色名称':'红色',
        '船样':'否',
        'S':'10',
        'M':'20',
        'L':'30', 
        'XL':'20',
        'XXL':'10',
        '制单总数':'90',
        '建档用户':'',
        '建档日期':'',
        '更新时间':'',
      },
      {
        '序号':'2',
        '订单子编号':'2408001-2',
        '颜色名称':'蓝色',
        '船样':'否',
        'S':'20',
        'M':'20',
        'L':'10',
        'XL':'20',
        'XXL':'10',
        '制单总数':'80',
        '建档用户':'',
        '建档日期':'',
        '更新时间':'',
      },
      {
        '序号':'3',
        '订单子编号':'2408001-船',
        '颜色名称':'黑色',
        '船样':'是',
        'S':'/',
        'M':'2',
        'L':'/',
        'XL':'2',
        'XXL':'/',
        '制单总数':'2',
        '建档用户':'',
        '建档日期':'',
        '更新时间':'',
      },
  ];
	//工艺资料表
    const gyData = [
      {
        '完工状态':'',
        '工序名称':'仓库出库',
        '计划产量':'/',
        '建档用户':'',
        '建档日期':'',
        '更新时间':'',
      },
      {
        '完工状态':'',
        '工序名称':'裁切',
        '计划产量':'按颜色显示总计数',
        '建档用户':'',
        '建档日期':'',
        '更新时间':'',
      },
      {
        '完工状态':'',
        '工序名称':'车缝',
        '计划产量':'按颜色显示总计数',
        '建档用户':'',
        '建档日期':'',
        '更新时间':'',
      },
      {
        '完工状态':'',
        '工序名称':'后道收样',
        '计划产量':'按颜色显示总计数',
        '建档用户':'',
        '建档日期':'',
        '更新时间':'',
      },
      {
        '完工状态':'',
        '工序名称':'大烫',
        '计划产量':'按颜色显示总计数',
        '建档用户':'',
        '建档日期':'',
        '更新时间':'',
      },
      {
        '完工状态':'',
        '工序名称':'总检',
        '计划产量':'按颜色显示总计数',
        '建档用户':'',
        '建档日期':'',
        '更新时间':'',
      },
      {
        '完工状态':'',
        '工序名称':'包装',
        '计划产量':'按颜色显示总计数',
        '建档用户':'',
        '建档日期':'',
        '更新时间':'',
      }
  ];
	//订单资料表
    const ddData = [
      
      {
        '序号':'1',
        '备注':'',
        '文件类型':'',
        '关联产品':'',
        '建档日期':'',
        '更新时间':'',
        '建档用户':'',
        '建档日期':'',
        '更新时间':'',
        '操作':'',
      },
      {
        '序号':'2',
        '备注':'',
        '文件类型':'',
        '关联产品':'',
        '建档日期':'',
        '更新时间':'',
        '建档用户':'',
        '建档日期':'',
        '更新时间':'',
        '操作':'',
      },
  ];

	//技术附件
    const jsData = [
		
      {
        '序号':'1',
        '备注':'',
        '文件类型':'',
        '关联产品':'',
        '建档日期':'',
        '更新时间':'',
        '建档用户':'',
        '建档日期':'',
        '更新时间':'',
        '操作':'',
      },
      {
        '序号':'2',
        '备注':'',
        '文件类型':'',
        '关联产品':'',
        '建档日期':'',
        '更新时间':'',
        '建档用户':'',
        '建档日期':'',
        '更新时间':'',
        '操作':'',
      },
  ];
	// console.log("下方表格数据")
  //   console.log(ysData)
  //   console.log(gyData)
  //   console.log(ddData)
  //   console.log(jsData)

    ystableData.splice(0,ysData.length,...ysData);//表格数据
    gytableData.splice(0,gyData.length,...gyData);//表格数据
    ddtableData.splice(0,ddData.length,...ddData);//表格数据
    jstableData.splice(0,jsData.length,...jsData);//表格数据
    // console.log(ystableData)
  } catch (error) {
    console.error(error);
  }
  }else if(row.订单号 === '2408002' ){
    ystableData.length = 0
    try {
    const ysData = [
      {
        '序号':'1',
        '订单子编号':'2408002-2',
        '颜色名称':'白色',
        '船样':'否',
        'S':'10',
        'M':'20',
        'L':'30',
        'XL':'20',
        'XXL':'10',
        '制单总数':'90',
        '建档用户':'',
        '建档日期':'',
        '更新时间':'',
      },
  ];
	//工艺资料表
    const gyData = [
      {
        '完工状态':'',
        '工序名称':'仓库出库',
        '计划产量':'/',
        '建档用户':'',
        '建档日期':'',
        '更新时间':'',
      },
      {
        '完工状态':'',
        '工序名称':'裁切',
        '计划产量':'按颜色显示总计数',
        '建档用户':'',
        '建档日期':'',
        '更新时间':'',
      },
      {
        '完工状态':'',
        '工序名称':'车缝',
        '计划产量':'按颜色显示总计数',
        '建档用户':'',
        '建档日期':'',
        '更新时间':'',
      },
      {
        '完工状态':'',
        '工序名称':'后道收样',
        '计划产量':'按颜色显示总计数',
        '建档用户':'',
        '建档日期':'',
        '更新时间':'',
      },
      {
        '完工状态':'',
        '工序名称':'大烫',
        '计划产量':'按颜色显示总计数',
        '建档用户':'',
        '建档日期':'',
        '更新时间':'',
      },
      {
        '完工状态':'',
        '工序名称':'总检',
        '计划产量':'按颜色显示总计数',
        '建档用户':'',
        '建档日期':'',
        '更新时间':'',
      },
      {
        '完工状态':'',
        '工序名称':'包装',
        '计划产量':'按颜色显示总计数',
        '建档用户':'',
        '建档日期':'',
        '更新时间':'',
      }
  ];
	//订单资料表
    const ddData = [
      
      {
        '序号':'1',
        '备注':'',
        '文件类型':'',
        '关联产品':'',
        '建档日期':'',
        '更新时间':'',
        '建档用户':'',
        '建档日期':'',
        '更新时间':'',
        '操作':'',
      },
      {
        '序号':'2',
        '备注':'',
        '文件类型':'',
        '关联产品':'',
        '建档日期':'',
        '更新时间':'',
        '建档用户':'',
        '建档日期':'',
        '更新时间':'',
        '操作':'',
      },
  ];
	//技术附件
    const jsData = [
		
      {
        '序号':'1',
        '备注':'',
        '文件类型':'',
        '关联产品':'',
        '建档日期':'',
        '更新时间':'',
        '建档用户':'',
        '建档日期':'',
        '更新时间':'',
        '操作':'',
      },
      {
        '序号':'2',
        '备注':'',
        '文件类型':'',
        '关联产品':'',
        '建档日期':'',
        '更新时间':'',
        '建档用户':'',
        '建档日期':'',
        '更新时间':'',
        '操作':'',
      },
  ];
	// console.log("下方表格数据")
  //   console.log(ysData)
  //   console.log(gyData)
  //   console.log(ddData)
  //   console.log(jsData)
	
    ystableData.splice(0,ysData.length,...ysData);//表格数据
    gytableData.splice(0,gyData.length,...gyData);//表格数据
    ddtableData.splice(0,ddData.length,...ddData);//表格数据
    jstableData.splice(0,jsData.length,...jsData);//表格数据
  } catch (error) {
    console.error(error);
  }
  }else if(row.订单号 === '2408003'){
    ystableData.length = 0
    try {
    const ysData = [
      {
        '序号':'1',
        '订单子编号':'2408003-3',
        '颜色名称':'黑色',
        '船样':'否',
        'S':'10',
        'M':'20',
        'L':'30',
        'XL':'20',
        'XXL':'10',
        '制单总数':'90',
        '建档用户':'',
        '建档日期':'',
        '更新时间':'',
      },

  ];
	//工艺资料表
    const gyData = [
      {
        '完工状态':'',
        '工序名称':'仓库出库',
        '计划产量':'/',
        '建档用户':'',
        '建档日期':'',
        '更新时间':'',
      },
      {
        '完工状态':'',
        '工序名称':'裁切',
        '计划产量':'按颜色显示总计数',
        '建档用户':'',
        '建档日期':'',
        '更新时间':'',
      },
      {
        '完工状态':'',
        '工序名称':'车缝',
        '计划产量':'按颜色显示总计数',
        '建档用户':'',
        '建档日期':'',
        '更新时间':'',
      },
      {
        '完工状态':'',
        '工序名称':'后道收样',
        '计划产量':'按颜色显示总计数',
        '建档用户':'',
        '建档日期':'',
        '更新时间':'',
      },
      {
        '完工状态':'',
        '工序名称':'大烫',
        '计划产量':'按颜色显示总计数',
        '建档用户':'',
        '建档日期':'',
        '更新时间':'',
      },
      {
        '完工状态':'',
        '工序名称':'总检',
        '计划产量':'按颜色显示总计数',
        '建档用户':'',
        '建档日期':'',
        '更新时间':'',
      },
      {
        '完工状态':'',
        '工序名称':'包装',
        '计划产量':'按颜色显示总计数',
        '建档用户':'',
        '建档日期':'',
        '更新时间':'',
      }
  ];
	//订单资料表
    const ddData = [
      
      {
        '序号':'1',
        '备注':'',
        '文件类型':'',
        '关联产品':'',
        '建档日期':'',
        '更新时间':'',
        '建档用户':'',
        '建档日期':'',
        '更新时间':'',
        '操作':'',
      },
      {
        '序号':'2',
        '备注':'',
        '文件类型':'',
        '关联产品':'',
        '建档日期':'',
        '更新时间':'',
        '建档用户':'',
        '建档日期':'',
        '更新时间':'',
        '操作':'',
      },
  ];
	//技术附件
    const jsData = [
		
      {
        '序号':'1',
        '备注':'',
        '文件类型':'',
        '关联产品':'',
        '建档日期':'',
        '更新时间':'',
        '建档用户':'',
        '建档日期':'',
        '更新时间':'',
        '操作':'',
      },
      {
        '序号':'2',
        '备注':'',
        '文件类型':'',
        '关联产品':'',
        '建档日期':'',
        '更新时间':'',
        '建档用户':'',
        '建档日期':'',
        '更新时间':'',
        '操作':'',
      },
  ];
	// console.log("下方表格数据")
  //   console.log(ysData)
  //   console.log(gyData)
  //   console.log(ddData)
  //   console.log(jsData)
	
    ystableData.splice(0,ysData.length,...ysData);//表格数据
    gytableData.splice(0,gyData.length,...gyData);//表格数据
    ddtableData.splice(0,ddData.length,...ddData);//表格数据
    jstableData.splice(0,jsData.length,...jsData);//表格数据
  } catch (error) {
    console.error(error);
  }
  }
  }
  
    


  // console.log(row.工单编号)
  // _Gd_gdbh.value = row.工单编号;
  // _Gd_cpdh.value = row.产品代号;
  // _Gd_cpmc.value = row.产品名称;
  // const workOrderListDetail_data = await workOrderListDetail({Gd_gdbh:_Gd_gdbh.value});
  // console.log(workOrderListDetail_data.data.processList)
  // ystableData.value = workOrderListDetail_data.data.printList;
  // gytableData.value = workOrderListDetail_data.data.processList;
  // bomtableData.value = workOrderListDetail_data.data.BOM;
  // jstableData.splice(0, jstableData.length, ...workOrderListDetail_data.data.jsData);
  // // jstableData.value = workOrderListDetail_data.data.jsData;
  // let tmp = yjtableData.value.map(item => item.印件号)
  // tmp = tmp.sort((a,b)=>b-a)
  // yjzuidahaoma.value = Number(tmp[0]) + 1





//=========查询========
const searchInfo = ref('')
//查询按钮
const onSubmit = () => {
  if(searchInfo.value === ''){
    ElMessage({type: 'warning',message: '请输入搜索的信息'})
    return false;
  }else{
    console.log(searchInfo.value)
    console.log("点击了搜索按钮");
  }
  // _cha_WorkList();
};
//回车查询
const handleSearch = (event) => {
  if(searchInfo.value === ''){
    ElMessage({type: 'warning',message: '请输入搜索的信息'})
    return false;
  }else{
    console.log("回车了");
  }

  // _cha_WorkList();
};
// 调用查询数据接口
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];
	// if(suffix!="xlsx"){
	// 	alert("Currently  only supports the import of xlsx files");
	// 	return;
	// }
	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){
				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.关联编号);

	   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)
		 }
	   })
	}
}

//技术资料excel展示
const ExcelShow = (row) =>{
	console.log("技术资料excel展示")
	console.log(row)
	if(!row.附件内容) return
	$.getScript('/luckysheet/plugins/js/plugin.js', () => {
		$script('/luckysheet/luckysheet.umd.js', () => {
					function 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' });
					}

					const blob = dataURLtoBlob(row.附件内容);
					luckyexcelVisible.value = true
					LuckyExcel.transformExcelToLucky(blob, function(exportJson, luckysheetfile){
						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'));

}

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;
}
.mab{
  margin-bottom: 5px;
}
/* 图片 */
.avatar-uploader {
  width: 500px;
  height: 300px;
  border: 1px dashed #d9d9d9;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  overflow: hidden; /* 防止图片溢出容器 */
}
.avatar {
  width: 50%;
  height: 100%;
  display: block;
  object-fit: contain;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
}
.upload-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
}
.upload-text {
  width: 50%;
  height: 50%;
  margin-top: 5px;
  color: #8c939d;
  font-size: 14px;
}
</style>