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

<template>
  <div>
    <el-container>
      <!-- 左侧树形结构 -->
      <el-aside width="270px">
        <div class="JKWTree-tree" style="width: 100%;height: 746px">
          <h3>工单管理</h3>
          <el-tree :data="treeData" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
        </div>
      </el-aside>

      <!-- 右侧内容区域 -->
      <el-container>
        <el-main>
          <!-- 搜索框 -->
          <div class="gva-search-box">
            <el-form ref="elSearchFormRef" :inline="true" :model="searchInfo" class="demo-form-inline" :rules="searchRule" @keyup.enter="onSubmit">
              <!-- 左侧查询输入框 -->
              <el-form-item>
                <el-input v-model="searchInfo.keyword" placeholder="请输入工单编号或印品名称" clearable style="width: 200px;"></el-input>
              </el-form-item>
              <!-- 右侧查询和重置按钮 -->
              <el-form-item>
                <el-button type="primary" icon="search" @click="onSubmit">查询</el-button>
<!--                <el-button icon="refresh" @click="onReset">重置</el-button>-->
<!--                <el-button type="primary" icon="plus" @click="openDialog">新增</el-button>-->
<!--                <el-button type="primary" icon="Download" @click="exportToExcel" style="float: right;">导出到Excel</el-button>-->
<!--                <el-dialog v-model="dialogexportToExcel" title="导出到Excel" width="50%">-->

<!--                </el-dialog>-->
              </el-form-item>
            </el-form>
          </div>

          <!-- 表格及操作按钮 -->
          <div class="gva-table-box">
            <!-- 表格 -->
            <el-table ref="multipleTable"
                      style="width: 100%;height: 580px"
                      border
                      tooltip-effect="dark"
                      :data="tableData"
                      row-key="ID"
                      @row-click="tableRowClick"
                      highlight-current-row="true"
                      @row-dblclick="updateCompanyFunc"
                      @selection-change="handleSelectionChange"
                      :show-overflow-tooltip="true">
              <el-table-column type="selection" width="55"/>
                <el-table-column align="left" label="工单编号" prop="工单编号"  width="100" />
                <el-table-column align="left" label="生产分类" prop="生产分类" width="100" />
                <el-table-column align="left" label="销售订单号" prop="销售订单号" width="290" />
                <el-table-column align="left" label="产品代号" prop="产品代号" width="100" />
                <el-table-column align="left" label="产品名称" prop="产品名称" width="670" />
                <el-table-column align="left" label="订单数量" prop="订单数量" width="120" />
                <el-table-column align="left" label="单位" prop="单位" />
                <el-table-column align="left" label="折合大箱" prop="折合大箱" width="90" />
                <el-table-column align="left" label="投料率" prop="投料率"  />
                <el-table-column align="left" label="平均合格率" prop="平均合格率" width="100" />
                <el-table-column align="left" label="开单日期" prop="开单日期" width="100" />
                <el-table-column align="left" label="交货日期" prop="交货日期" width="100" />
                <el-table-column align="left" label="工单类型" prop="工单类型" width="100" />
                <el-table-column align="left" label="工单状态" prop="工单状态" width="100" />
                <el-table-column align="left" label="当前生产工序" prop="当前生产工序" width="120" />
                <el-table-column align="left" label="产量提交时间" prop="产量提交时间" width="120" />
                <el-table-column align="left" label="建档用户" prop="建档用户" width="120" />
                <el-table-column align="left" label="建档时间" prop="建档时间" width="170" />
                <el-table-column align="left" label="更新时间" prop="更新时间" width="170" />
            </el-table>

            <!-- 分页 -->
            <div class="gva-pagination">
              <el-pagination layout="total, sizes, prev, pager, next, jumper" :current-page="page" :page-size="pageSize" :page-sizes="[5,10, 30, 50, 100]" :total="total" @current-change="handleCurrentChange" @size-change="handleSizeChange"/>
            </div>
          </div>


          <el-tabs v-model="activeName" type="card" @tab-click="handleClick">

            <el-tab-pane label="印件资料"  @click="showTable('印件资料')"  name="first">
              <el-table ref="multipleTable"
                        :show-overflow-tooltip="true"
                        highlight-current-row="true"
                        style="width: 100%;height: 400px" border tooltip-effect="dark" :data="yjtableData" row-key="ID" @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="55" />
                <el-table-column align="left" label="印件号" prop="印件号"  width="80"/>
                <el-table-column align="left" label="印件代号" prop="印件代号"  width="120"/>
                <el-table-column align="left" label="印件名称" prop="印件名称"  width="340"/>
                <el-table-column align="left" label="纸张代号" prop="纸张代号"  width="100"/>
                <el-table-column align="left" label="纸张名称" prop="纸张名称"  width="340"/>
                <el-table-column align="left" label="投料规格" prop="投料规格"  width="100"/>
                <el-table-column align="left" label="平张投料" prop="平张投料"  width="100"/>
                <el-table-column align="left" label="开料规格" prop="开料规格"  width="100"/>
                <el-table-column align="left" label="开数*联数" prop="开数*联数"  width="100"/>
                <el-table-column align="left" label="建档用户" prop="建档用户"  width="120"/>
                <el-table-column align="left" label="建档时间" prop="建档时间"  width="160"/>
                <el-table-column align="left" label="更新时间" prop="更新时间"  width="160"/>
              </el-table>
            </el-tab-pane>

            <el-tab-pane label="工艺资料" @click="showTable('工艺资料')" name="second">
              <el-table ref="multipleTable"
                        highlight-current-row="true"
                        :show-overflow-tooltip="true"
                        style="width: 100%;height: 400px" border tooltip-effect="dark" :data="gytableData" row-key="ID" @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="55" />
                <el-table-column align="left" label="重点工序" prop="重点工序"  width="100"/>
                <el-table-column align="left" label="印件-工序" prop="印件-工序"  width="100"/>
                <el-table-column align="left" label="备选工序" prop="备选工序"  width="100"/>
                <el-table-column align="left" label="工序名称" prop="工序名称"  width="340"/>
                <el-table-column align="left" label="计划产量" prop="计划产量"  width="100"/>
                <el-table-column align="left" label="基础损耗" prop="基础损耗"  width="100"/>
                <el-table-column align="left" label="报废定额" prop="报废定额"  width="100"/>
                <el-table-column align="left" label="允损比例" prop="允损比例"  width="100"/>
                <el-table-column align="left" label="难度系数" prop="难度系数"  width="100"/>
                <el-table-column align="left" label="损耗系数" prop="损耗系数"  width="100"/>
                <el-table-column align="left" label="人工检_次品板" prop="人工检_次品板"  width="160"/>
                <el-table-column align="left" label="人工检_废检" prop="人工检_废检"  width="160"/>
                <el-table-column align="left" label="机检_正品板" prop="机检_正品板"  width="160"/>
                <el-table-column align="left" label="机检_次品板" prop="机检_次品板"  width="160"/>
                <el-table-column align="left" label="机检_废检" prop="机检_废检"  width="100"/>
                <el-table-column align="left" label="开数*联数" prop="开数*联数"  width="100"/>
                <el-table-column align="left" label="备注" prop="备注"  width="450"/>
                <el-table-column align="left" label="印刷方式" prop="印刷方式"  width="100"/>
                <el-table-column align="left" label="版距" prop="版距"  width="100"/>
                <el-table-column align="left" label="建档用户" prop="建档用户"  width="160"/>
                <el-table-column align="left" label="建档日期" prop="建档日期"  width="160"/>
                <el-table-column align="left" label="更新时间" prop="更新时间"  width="160"/>
              </el-table>
            </el-tab-pane>

            <el-tab-pane label="BOM资料" @click="showTable('BOM资料')" name="third">
              <el-table ref="multipleTable"
                        highlight-current-row="true"
                        style="width: 100%;height: 400px" border tooltip-effect="dark" :data="bomtableData" row-key="ID" @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="55" />
                <el-table-column align="left" label="方案" prop="方案"  width="120"/>
                <el-table-column align="left" label="物料编号" prop="物料编号"  width="100"/>
                <el-table-column align="left" label="物料名称" prop="物料名称"  width="340"/>
                <el-table-column align="left" label="计划用量" prop="计划用量"  width="100"/>
                <el-table-column align="left" label="建档用户" prop="建档用户"  width="100"/>
                <el-table-column align="left" label="建档时间" prop="建档时间"  width="160"/>
                <el-table-column align="left" label="更新时间" prop="更新时间"  width="160"/>
                <el-table-column align="left" label="消耗定量" prop="消耗定量"  width="210"/>
              </el-table>
            </el-tab-pane>

          </el-tabs>

         <!-- 弹窗 -->
         <el-dialog v-model="dialogFormVisible" :before-close="closeDialog" style="width: 1000px;" :title="type==='create'?'添加工单资料':'修改工单资料'" destroy-on-close>
           <el-row>
             <el-form :model="formData" label-position="right" ref="elFormRef" :rules="rule" >
				<!-- 第一排 -->
                <el-row :gutter="20">
                  <el-col :span="6">
                    <el-form-item label="重点工单:" prop="keyOrder">
                      <el-input v-model="formData.keyOrder" :clearable="true" placeholder=""/>
                    </el-form-item>
                  </el-col>
                  <el-col :span="7">
                    <el-form-item label="开单日期" prop="orderDate">
                      <el-date-picker v-model="formData.orderDate" type="date" placeholder="选择日期" :clearable="true"  />
                    </el-form-item>
                  </el-col>
                  <el-col :span="5">
                    <el-form-item label="工单编号:" prop="orderNumber">
                      <el-input v-model="formData.orderNumber" :clearable="true" placeholder="" />
                    </el-form-item>
                  </el-col>
                  <el-col :span="5">
                    <el-form-item label="生产类型:" prop="productionType">
                      <el-input v-model="formData.productionType" :clearable="true" placeholder="" />
                    </el-form-item>
                  </el-col>
                </el-row>

				  <!-- 第二排 -->
				  <el-row :gutter="20">
					<el-col :span="6">
					  <el-form-item label="客户代号:" prop="customerCode">
						<el-input v-model="formData.customerCode" :clearable="true" placeholder=""  />
					  </el-form-item>
					</el-col>
					<el-col :span="14">
					  <el-form-item label="客户名称:" prop="customerName">
						<el-input v-model="formData.customerName" :clearable="true" placeholder=""  />
					  </el-form-item>
					</el-col>
				  </el-row>

				  <!-- 第三排 -->
				  <el-row :gutter="20">
					<el-col :span="6">
					  <el-form-item label="产品代码:" prop="productCode">
						<el-input v-model="formData.productCode" :clearable="true" placeholder=""/>
					  </el-form-item>
					</el-col>
					<el-col :span="14">
					  <el-form-item label="产品名称:" prop="productName">
						<el-input v-model="formData.productName" :clearable="true" placeholder="" />
					  </el-form-item>
					</el-col>
				  </el-row>

                  <!-- 第四排 -->
                  <el-row :gutter="20">
                    <el-col :span="6">
                      <el-form-item label="印件代码:" prop="customerCode">
                        <el-input v-model="formData.customerCode" :clearable="true" placeholder="" />
                      </el-form-item>
                    </el-col>
                    <el-col :span="14">
                      <el-form-item label="印件名称:" prop="customerName">
                        <el-input v-model="formData.customerName" :clearable="true" placeholder=""  />
                      </el-form-item>
                    </el-col>
                  </el-row>

                  <!-- 第五排 -->
				  <el-row :gutter="20">
				    <el-col :span="6">
				      <el-form-item label="订单数量:" prop="orderQuantity">
				        <el-input v-model="formData.orderQuantity" :clearable="true" placeholder="" style="width: 140px;" />
				      </el-form-item>
				    </el-col>
				    <el-col :span="6">
				      <el-form-item label="交货日期:" prop="deliveryDate">
				        <el-input v-model="formData.deliveryDate" :clearable="true" placeholder="" style="width: 140px;" />
				      </el-form-item>
				    </el-col>
				    <el-col :span="6">
				      <el-form-item label="投料率:" prop="feedRate">
				        <el-input v-model="formData.feedRate" :clearable="true" placeholder="" style="width: 140px;" />
				      </el-form-item>
				    </el-col>
				    <el-col :span="6">
				      <el-form-item label="平均合格率:" prop="passRate">
				        <el-input v-model="formData.passRate" :clearable="true" placeholder="" style="width: 140px;" />
				      </el-form-item>
				    </el-col>
				  </el-row>


              <!-- 第六排 -->
                  <el-row :gutter="20">
                    <el-col :span="6">
                      <el-form-item label="平张投料:" prop="flatFeed">
                        <el-input v-model="formData.flatFeed" :clearable="true" placeholder="" style="width: 140px;" />
                      </el-form-item>
                    </el-col>
                    <el-col :span="6">
                      <el-form-item label="万小张:" prop="perTenThousand">
                        <el-input v-model="formData.perTenThousand" :clearable="true" placeholder="" style="width: 140px;" />
                      </el-form-item>
                    </el-col>
                    <el-col :span="6">
                      <el-form-item label="投料大箱:" prop="feedBox">
                        <el-input v-model="formData.feedBox" :clearable="true" placeholder="" style="width: 140px;" />
                      </el-form-item>
                    </el-col>
                    <el-col :span="6">
                      <el-form-item label="库存大箱:" prop="stockBox">
                        <el-input v-model="formData.stockBox" :clearable="true" placeholder="" style="width: 140px;" />
                      </el-form-item>
                    </el-col>
                  </el-row>

                  <!-- 第七排 -->
                  <el-row :gutter="20">
                    <el-col :span="20">
                      <el-form-item label="销售订单号:" prop="salesOrder">
                        <el-input v-model="formData.salesOrder" :clearable="true" placeholder="" />
                      </el-form-item>
                    </el-col>
                  </el-row>

                  <!-- 第八排 -->
                  <el-row :gutter="20">
                    <el-col :span="20">
                      <el-form-item label="警语版面:" prop="warningLayout">
                        <el-input v-model="formData.warningLayout" :clearable="true" placeholder=""  />
                      </el-form-item>
                    </el-col>
                  </el-row>

                  <!-- 第九排 -->
                  <el-row :gutter="20">
                    <el-col :span="6">
                      <el-form-item label="版本号:" prop="versionNumber">
                        <el-input v-model="formData.versionNumber" :clearable="true" placeholder="" />
                      </el-form-item>
                    </el-col>
                    <el-col :span="14">
                      <el-form-item label="客户ERP编码:" prop="customerErpCode">
                        <el-input v-model="formData.customerErpCode" :clearable="true" placeholder=""  />
                      </el-form-item>
                    </el-col>
                  </el-row>

                  <!-- 第十排 -->
                  <el-row :gutter="20">
                    <el-col :span="8">
                      <el-form-item label="码源数量:" prop="codeSourceQuantity">
                        <el-input v-model="formData.codeSourceQuantity" :clearable="true" placeholder="" style="width: 170px;" />
                      </el-form-item>
                    </el-col>
                  </el-row>

                  <!-- 第十一排 -->
                  <el-row :gutter="20">
                    <el-col :span="20">
                      <el-form-item label="进程备注:" prop="processNote">
                        <el-input v-model="formData.processNote" :clearable="true" placeholder=""  />
                      </el-form-item>
                    </el-col>
                  </el-row>

                  <!-- 第十二排 -->
                 <el-row :gutter="20">
                   <el-col :span="20">
                     <el-form-item label="备注说明:" prop="remark">
                       <el-input type="textarea" v-model="formData.remark" :rows="4" :clearable="true" placeholder="请输入备注说明" style="width: 100%;" />
                     </el-form-item>
                   </el-col>
                 </el-row>

             </el-form>
           </el-row>

			 <!-- 添加 编辑页面 取消 确定 -->
			 <template #footer>
			   <div class="dialog-footer">
				 <el-button @click="closeDialog">取 消</el-button>
				 <el-button type="primary" @click="enterDialog">确 定</el-button>
			   </div>
			 </template>
		   </el-dialog>

        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script>
//点击按钮显示下方表格
export default {
  data() {
    return {
      currentTable: '', // 当前展示的表格
      activeName: 'first',
      // 其他表格数据...
    };
  },
  methods: {
    showTable(tableName) {
      // console.log(tableName)
      // 根据点击的按钮设置当前展示的表格
      this.currentTable = tableName;
    },
    showTableChange() {
      // 处理表格选中事件
    },
    // 其他方法...
  }
};
</script>
<script setup>
// 全量引入格式化工具 请按需保留
import {createCompany, deleteCompany, deleteCompanyByIds, updateCompany, findCompany, getCompanyList} from '@/api/company'
import { getDictFunc, formatDate, formatBoolean, filterDict, ReturnArrImg, onDownloadFile } from '@/utils/format'
import { ElMessage, ElMessageBox } from 'element-plus'
import { ref, reactive } from 'vue'
import {DataList, WorkList, Craft, Printed,Bom} from "@/api/yunyin/yunying";
defineOptions({name: 'Company'})
// =========== 导出Excel表格 ===========
const exportToExcel = () => {
  console.log('点击了导出按钮')
  dialogexportToExcel.value = true;
}
// 导出Excel弹窗
const dialogexportToExcel = ref(false)
// =========== 左侧树侧形结构 ===========
const treeData = ref([]);
const defaultProps = {
  children: 'children',
  label: 'Gd_khmc'
};
const DataListdata = async () => {
  try {
    const data = await DataList();
    console.log(data)
    if (data.code === 0) {
      const dataArray = Object.values(data.data).map((item) => ({
        ...item,
        children: []
      }));
      treeData.value = dataArray;
    } else {
      console.error(data.msg);
    }
  } catch (error) {
    console.error(error);
  }
};
DataListdata();

//点击左侧树形获取编号
const tableData = reactive([])
const handleNodeClick = async (node) => {
  //通过 Gd_khdh 客户单号 获取列表数据
  const Gd_khdh = node.Gd_khdh;
  try {
    const WorkListdata = await WorkList({ Gd_khdh:Gd_khdh});//接口调用函数
    tableData.splice(0,tableData.length,...WorkListdata.data);//表格数据
    total.value = tableData.length;//共多少条
  } catch (error) {
    console.error(error);
  }
};

//印件资料
const yjtableData = ref([])
//工艺资料
const gytableData = ref([])
//BOM资料
const bomtableData = ref([])
const tableRowClick = async (row) => {
  const Gd_gdbh = row.工单编号;
  // console.log(row);
  const yjres = await Printed({ Gd_gdbh:Gd_gdbh});
  const gyres = await Craft({ Gd_gdbh:Gd_gdbh });
  const bomres = await Bom({ Gd_gdbh:Gd_gdbh});
  yjtableData.value = yjres.data;
  gytableData.value = gyres.data;
  bomtableData.value = bomres.data;
  // yjtableData.splice(0,yjtableData.length,...yjres.data);//表格数据
  // gytableData.splice(0,gytableData.length,...gyres.data);//表格数据
  // bomtableData.splice(0,bomtableData.length,...bomres.data);//表格数据
  // console.log(yjres)
  // console.log(gyres)
  // console.log(bomres)
};

// 分页
const handleCurrentChange = (val) => {
  page.value = val;
  // console.log(page)
  DataListdata();
};

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

// 自动化生成的字典（可能为空）以及字段
const formData = ref({
        address: '',
        image: '',
        name: '',
        })

// 验证规则
const rule = reactive({
})

const searchRule = reactive({
  createdAt: [
    { validator: (rule, value, callback) => {
      if (searchInfo.value.startCreatedAt && !searchInfo.value.endCreatedAt) {
        callback(new Error('请填写结束日期'))
      } else if (!searchInfo.value.startCreatedAt && searchInfo.value.endCreatedAt) {
        callback(new Error('请填写开始日期'))
      } else if (searchInfo.value.startCreatedAt && searchInfo.value.endCreatedAt && (searchInfo.value.startCreatedAt.getTime() === searchInfo.value.endCreatedAt.getTime() || searchInfo.value.startCreatedAt.getTime() > searchInfo.value.endCreatedAt.getTime())) {
        callback(new Error('开始日期应当早于结束日期'))
      } else {
        callback()
      }
    }, trigger: 'change' }
  ],
})
const elFormRef = ref()
const elSearchFormRef = ref()

// =========== 表格控制部分 ===========
const page = ref(1)
const total = ref(0)
const pageSize = ref(10)
const searchInfo = ref({})

// 重置
const onReset = () => {
  searchInfo.value = {}
  getTableData()
}

// 搜索
const onSubmit = () => {
  elSearchFormRef.value?.validate(async(valid) => {
    if (!valid) return
    page.value = 1
    pageSize.value = 10
    getTableData()
  })
}

// 查询
const getTableData = async() => {
  const table = await getCompanyList({ page: page.value, pageSize: pageSize.value, ...searchInfo.value })
  console.log(table)
  // if (table.code === 0) {
  //   tableData.value = table.data.lis t
  //   total.value = table.data.total
  //   page.value = table.data.page
  //   pageSize.value = table.data.pageSize
  // }
}
getTableData()

// ============== 表格控制部分结束 ===============
// 获取需要的字典 可能为空 按需保留
const setOptions = async () =>{}

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

// 多选数据
const multipleSelection = ref([])
// 多选
const handleSelectionChange = (val) => {
    multipleSelection.value = val
}

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

//编辑
const updateCompanyFunc = async(row) => {
  console.log(row);
	dialogFormVisible.value = true
}

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

// 查看详情控制标记
const detailShow = ref(false)

// 打开详情弹窗
const openDetailShow = () => {
  detailShow.value = true
}

// 打开详情
const getDetails = async (row) => {
   detailShow.value = true
}

// 关闭详情弹窗
const closeDetailShow = () => {
  detailShow.value = false
  formData.value = {
          address: '',
          image: '',
          name: '',
          }
}

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

// 关闭弹窗
const closeDialog = () => {
    dialogFormVisible.value = false
    formData.value = {
        address: '',
        image: '',
        name: '',
        }
}
// 弹窗确定
const enterDialog = async () => {
     elFormRef.value?.validate( async (valid) => {
             if (!valid) return
              let res
              switch (type.value) {
                case 'create':
                  res = await createCompany(formData.value)
                  break
                case 'update':
                  res = await updateCompany(formData.value)
                  break
                default:
                  res = await createCompany(formData.value)
                  break
              }
              if (res.code === 0) {
                ElMessage({
                  type: 'success',
                  message: '创建/更改成功'
                })
                closeDialog()
                getTableData()
              }
      })
}

</script>

<style>
.JKWTree-container {
  display: flex;
}

.JKWTree-tree {
  width: 300px;
  background-color: #fff;
  padding: 10px;
  margin-right: 20px;
}

.JKWTree-tree h3 {
  font-size: 15px;
  font-weight: 700;
  margin: 10px 0;
}

.JKWTree-content {
  flex: 1;
}

/* 选中某行时的背景色*/
.el-table__body tr.current-row>td {
  background: #ff80ff !important;
}
</style>