mes-ai-admin-backend-ui/src/view/performance/09-workOrderVerification/index.vue

<template>
  <div>
    <el-container>
      <!-- 左侧树形结构 -->
      <el-scrollbar max-height="75vh">
        <el-aside>
          <div class="JKWTree-tree">
            <h3>工单核验单维护</h3>
            <el-tree
              :data="treeData"
              highlight-current
              @node-click="handleNodeClick"
            />
          </div>
        </el-aside>
      </el-scrollbar>

      <el-container>
        <el-main>
          <div class="gva-table-box">
            <!-- 按钮区域 -->
            <div class="gva-btn-list">
              <el-row :span="6">
                <el-input
                  v-model="searchInfo"
                  placeholder="输入工单编号"
                />
              </el-row>
              <el-button
                type="primary"
                :icon="Search"
                @click="handleSearch"
              >搜索
              </el-button>
              <el-button
                type="primary"
                :icon="Search"
                @click="dialogMrhjtj = true"
              >每日核检统计
              </el-button>

              <el-button
                type="primary"
                :icon="Search"
                @click="showGdzjfptj"
              >工单质检废品统计
              </el-button>

              <div style="margin-left: auto;">
                <el-button
                  type="primary"
                  :icon="Download"
                  @click="exportExcel"
                >导出到Excel</el-button>
              </div>
            </div>
            <!-- 数据展示 -->
            <el-table
              ref="table"
              style="width: 100%"
              :data="tableData"
              row-key="ID"
              highlight-current-row
              border
              show-overflow-tooltip
              :row-style="{ height: '20px' }"
              :cell-style="{ padding: '0px' }"
              :header-row-style="{ height: '20px' }"
              :header-cell-style="{ padding: '0px' }"
              @row-click="handleSelectChange"
              @row-dblclick="doubleClick"
            >
              <el-table-column
                type="selection"
                width="55"
              />
              <!-- 循环渲染表格列 -->
              <el-table-column
                v-for="column in tableColumns"
                :key="column.prop"
                :prop="column.prop"
                :label="column.label"
                :width="column.width"
              />

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

          <!-- 弹出框 -->
          <el-dialog
            v-model="dialogFormVisible"
            :before-close="closeDialog"
            :title="type === 'create' ? '添加' : '修改'"
            destroy-on-close
            width="70%"
            style="position: fixed; top: 35%; left: 50%; transform: translate(-50%, -50%);"
          >

            <el-form
              ref="elFormRef"
              :model="detailData"
              inline
              label-position="left"
              :rules="rule"
            >
              <el-form-item
                label="日期"
              >
                <el-date-picker
                  v-model="detailData.qczl_rq"
                  type="date"
                  style="width: 150px;"
                />
                <!--                <el-input
                  v-model="detailData.qczl_rq"
                  style="width: 120px;"
                />-->
              </el-form-item>
              <el-form-item
                label="工单编号"
              >
                <el-input
                  v-model="detailData.qczl_gdbh"
                  style="width: 100px;"
                  @keyup.enter="handleGdbhEnter"
                />
              </el-form-item>
              <el-form-item label="拼印主工单">
                <el-input
                  v-model="detailData.qczl_Pygd"
                  style="width: 100px;"
                />
              </el-form-item>
              <el-form-item
                label="产品名称"
              >
                <el-input
                  v-model="detailData.Gd_cpmc"
                  style="width: 400px;"
                  readonly
                />
              </el-form-item>
              <br>
              <el-form-item
                label="印件号"
              >
                <el-input
                  v-model="detailData.qczl_yjno"
                  style="width: 60px;"
                />
              </el-form-item>
              <el-form-item
                label="印件名称"
                style="margin-left: 47px"
              >
                <el-input
                  v-model="detailData.yj_yjmc"
                  style="width: 500px;"
                  readonly
                />
              </el-form-item>
              <el-form-item
                label="废品总数"
              >
                <el-input
                  v-model="detailData.qczl_fp"
                  style="width: 100px;"
                />
              </el-form-item>
              <br>

              <el-form-item
                label="工序"
              >
                <el-input
                  v-model="detailData.qczl_gxmc"
                  style="width: 200px;"
                />
              </el-form-item>
              <el-form-item
                label="工序号"
              >
                <el-input
                  v-model="detailData.qczl_gxh"
                  style="width: 100px;"
                  readonly
                />
              </el-form-item>
              <el-form-item
                label="总流程号"
              >
                <el-input
                  v-model="detailData.total_liucheng"
                  style="width: 100px;"
                  readonly
                />
              </el-form-item>

              <el-form-item
                label="流程单号"
              >
                <el-input
                  v-model="detailData.qczl_num"
                  style="width: 60px; margin-left: 5px;"
                />
                <el-input
                  v-model="detailData.qczl_NumDesc1"
                  style="width: 60px; margin-left: 5px;"
                />
                <el-input
                  v-model="detailData.qczl_NumDesc2"
                  style="width: 60px; margin-left: 5px;"
                />
                <el-input
                  v-model="detailData.qczl_NumDesc3"
                  style="width: 60px; margin-left: 5px;"
                />
                <el-input
                  v-model="detailData.qczl_NumDesc4"
                  style="width: 60px; margin-left: 5px;"
                />
                <el-input
                  v-model="detailData.qczl_NumDesc5"
                  style="width: 60px; margin-left: 5px;"
                />
                <el-input
                  v-model="detailData.qczl_NumDesc6"
                  style="width: 60px; margin-left: 5px;"
                />
                <el-input
                  v-model="detailData.qczl_NumDesc7"
                  style="width: 60px; margin-left: 5px;"
                />
                <el-input
                  v-model="detailData.qczl_NumDesc8"
                  style="width: 60px; margin-left: 5px;"
                />
              </el-form-item>

              <el-form-item
                label="备注"
              >
                <el-input
                  v-model="detailData.qczl_NumDesc"
                  style="width: 200px;"
                />
              </el-form-item>

              <el-scrollbar height="400px">
                <el-table
                  :data="detailData.table"
                  border
                  tooltip-effect="dark"
                  :row-style="{ height: '20px' }"
                  :cell-style="{ padding: '0px' }"
                  :header-row-style="{ height: '20px' }"
                  :header-cell-style="{ padding: '0px' }"
                >
                  <el-table-column
                    label="废品类别"
                    width="200"
                  >
                    <template #default="{ row, $index }">
                      <el-input
                        v-model="row.fp_lb"
                        @keyup.enter="handleFplbEnter($index, row)"
                      />
                    </template>
                  </el-table-column>

                  <el-table-column
                    label="数量"
                    width="100"
                  >
                    <template #default="{ row, $index }">
                      <el-input
                        v-model="row.fp_sl"
                        @keyup.enter="handleFpslEnter($index, row)"
                      />
                    </template>
                  </el-table-column>
                  <el-table-column
                    label="工序及责任机长"
                    width="500"
                  >
                    <template #default="{ row }">
                      <el-input
                        v-model="row.fp_gxmc"
                        readonly
                      />
                    </template>
                  </el-table-column>
                  <el-table-column
                    label=""
                    width="100"
                  >
                    <template #default="{ row }">
                      <el-input
                        v-model="row.fp_bz"
                        readonly
                      />
                    </template>
                  </el-table-column>
                  <el-table-column
                    label=""
                    width="100"
                  >
                    <template #default="{ row }">
                      <el-input
                        v-model="row.fp_bh"
                        readonly
                      />
                    </template>
                  </el-table-column>
                  <el-table-column
                    label=""
                    width="100"
                  >
                    <template #default="{ row }">
                      <el-input
                        v-model="row.fp_name"
                        readonly
                      />
                    </template>
                  </el-table-column>

                </el-table>

              </el-scrollbar>

            </el-form>

            <template #footer>
              <div class="dialog-footer">
                <el-button @click="closeDialog">取 消</el-button>
                <el-button
                  type="primary"
                  @click="enterDialog"
                >确 定
                </el-button>
              </div>
            </template>
          </el-dialog>

          <!-- 废品类别弹出选项框 -->
          <el-dialog
            v-model="dialogSelectVisible1"
            title="选择"
            destroy-on-close
            width="600px"
          >
            <el-tree
              :data="selecTreeData"
              :props="defaultProps"
              highlight-current
              @node-click="handleFplbClick"
            />
          </el-dialog>

          <!-- 弹出选项框 数量 -->
          <el-dialog
            v-model="dialogSelectVisible2"
            title="选择"
            destroy-on-close
            width="800px"
          >
            <el-table
              tooltip-effect="dark"
              :data="selectData"
              row-key="ID"
              highlight-current-row
              border
              style="width:100%"
              @row-dblclick="handleSelectClick"
            >
              <el-table-column
                v-for=" column in selectColumns "
                :key="column.prop"
                :prop="column.prop"
                :label="column.label"
                :width="column.width"
              />
            </el-table>
          </el-dialog>

          <!-- 废品日统计 -->
          <Meirihejiantongji
            v-if="dialogMrhjtj"
            v-model="dialogMrhjtj"
          />

          <!-- 工单质检废品统计 -->
          <Gongdanzhijianfeipintongji
            v-if="dialogGdzjfptj"
            v-model="dialogGdzjfptj"
            :val="value1"
          />

          <!-- 测试图表 -->
          <Shebeizhuangtai
            v-if="dialogSbyxgl"
            v-model="dialogSbyxgl"
            title="【01.30 08:30】【JY01#--海德堡对开八色平版胶印机(JY08-01)】【2311116-->钻石(荷花）盒包装纸】【01--胶印】"
          />

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

  </div>
</template>

<script setup>
import {
  createCompany,
  deleteCompany,
  deleteCompanyByIds,
  updateCompany,
  findCompany,
  getCompanyList
} from '@/api/company'

// 全量引入格式化工具 请按需保留
import { ElMessage } from 'element-plus'
import { Search, Refresh, Download } from '@element-plus/icons-vue'
import { ref, reactive } from 'vue'
import { getSide, getTable, getOneWorkOrder, getOrderInfo, getGxAndLeader, getWastInfo, updateData } from '@/api/mes_api_gty/workOrderVerification'
import Meirihejiantongji from './componets/meirihejiantongji.vue'
import Gongdanzhijianfeipintongji from './componets/gongdanzhijianfeipintongji.vue'
import Shebeizhuangtai from '@/view/performance/09-workOrderVerification/componets/shebeizhuangtai.vue'

defineOptions({
  name: '06PackingDocuments'
})

// 侧边栏数据请求
const treeData = reactive([])
const getSideData = async() => {
  const response = await getSide()
  if (response.code === 0) {
    const transformedData = response.data.map(item => ({
      label: `${item.date.replace(/-/g, '.')}【单据数: ${item.counts}张】`,
      children: item.sys.map(sysItem => ({
        label: `${sysItem.sys_id} 【记录数: ${sysItem.count}张】`,
        params: {
          date: item.date.replace(/\./g, '-'),
          sys_id: sysItem.sys_id,
        },
      })),
    }))
    treeData.splice(0, treeData.length, ...transformedData)
  }
}

getSideData()

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

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

// =========== 表格控制部分 ===========
const tableColumns = [
  { label: '工单编号', prop: 'qczl_gdbh', width: '100' },
  { label: '印件号', prop: 'qczl_yjno', width: '100' },
  { label: '印件名称', prop: 'Gd_cpmc', width: '400' },
  { label: '日期', prop: 'qczl_rq', width: '100' },
  { label: '流程单号', prop: 'qczl_num', width: '100' },
  { label: '流程单备注', prop: 'qczl_NumDesc', width: '100' },
  { label: '总废品', prop: 'qczl_fp', width: '100' },
  { label: '废品1', prop: 'sl_lb1', width: '250' },
  { label: '废品2', prop: 'sl_lb2', width: '250' },
  { label: '废品3', prop: 'sl_lb3', width: '250' },
  { label: '废品4', prop: 'sl_lb4', width: '250' },
  { label: '废品5', prop: 'sl_lb5', width: '250' },
  { label: '废品6', prop: 'sl_lb6', width: '250' },
  { label: '废品7', prop: 'sl_lb7', width: '250' },
  { label: '废品8', prop: 'sl_lb8', width: '250' },
  { label: '废品9', prop: 'sl_lb9', width: '250' },
  { label: '废品10', prop: 'sl_lb10', width: '250' },
  { label: '废品11', prop: 'sl_lb11', width: '250' },
  { label: '废品12', prop: 'sl_lb12', width: '250' },
  { label: '废品13', prop: 'sl_lb13', width: '250' },
  { label: '废品14', prop: 'sl_lb14', width: '250' },
  { label: '废品15', prop: 'sl_lb15', width: '250' },
  { label: '废品16', prop: 'sl_lb16', width: '250' },
  { label: '废品17', prop: 'sl_lb17', width: '250' },
  { label: '创建用户', prop: 'sys_id', width: '200' }
]
const tableData = reactive([])

const total = ref(0)
const page = ref(1)
const limit = ref(10)

const searchInfo = ref('')
const params = {
  date: '',
  sys_id: '',
  order: '',
  page: page.value.toString(),
  limit: limit.value.toString(),
}

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

const getTableData = async() => {
  const response = await getTable(params)
  if (response.code === 0) {
    total.value = response.data.total
    // Object.assign(tableData, response.data.rows)
    tableData.splice(0, tableData.length, ...response.data.rows)
  }
}

// 左侧树结构点击
const handleNodeClick = (node, check) => {
  if (node.params) {
    params.date = node.params.date
    params.sys_id = node.params.sys_id
    page.value = 1
    handleCurrentChange()
  }
}

// 搜索
function handleSearch() {
  params.sys_id = ''
  params.date = ''
  params.order = searchInfo.value
  page.value = 1
  handleCurrentChange()
}

// 分页
const handleSizeChange = () => {
  params.limit = limit.value.toString()
  getTableData()
}

// 页面跳转
const handleCurrentChange = () => {
  params.page = page.value.toString()
  getTableData()
}

// ============== 详情页面 ==============
const detailData = reactive({})
const selectData = reactive([])
const selectColumns = [
  { label: '', prop: 'sczl_gxmc', width: '600' },
  { label: '', prop: 'sczl_bzdh', width: '100' },
  { label: '', prop: 'name', width: '100' },
]
let selecTreeData = []

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

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

let selectIndex = 0

const getDetailData = async(id) => {
  try {
    const res = await getOneWorkOrder({ UniqId: id })
    if (res.code === 0) {
      const obj = res.data
      // 裁剪返回数据的前后空格
      for (const key in obj) {
        if (Object.prototype.hasOwnProperty.call(obj, key) && typeof obj[key] === 'string') {
          obj[key] = obj[key].trim()
        }
      }
      // 修改日期格式
      if (Object.prototype.hasOwnProperty.call(obj, 'qczl_rq') && typeof obj['qczl_rq'] === 'string') {
        obj['qczl_rq'] = obj['qczl_rq'].split(' ')[0]
      }

      Object.assign(detailData, obj)
      const table = []

      // 循环13行数据
      for (let i = 1; i <= 13; i++) {
        table.push({
          fp_lb: detailData[`fp_lb${i}`] || '',
          fp_sl: detailData[`fp_sl${i}`] || '',
          fp_gxmc: detailData[`fp_gxmc${i}`] || '',
          fp_bz: detailData[`fp_bz${i}`] || '',
          fp_bh: detailData[`fp_bh${i}`] || '',
          fp_name: detailData[`fp_name${i}`] || '',
        })
        // 从原对象中删除这些属性
        delete detailData[`fp_lb${i}`]
        delete detailData[`fp_sl${i}`]
        delete detailData[`fp_gxmc${i}`]
        delete detailData[`fp_bz${i}`]
        delete detailData[`fp_bh${i}`]
        delete detailData[`fp_name${i}`]
      }
      detailData.table = table
      try {
        const res = await getOrderInfo({ order: detailData.qczl_gdbh })
        if (res.code === 0) {
          detailData.Gd_cpmc = res.data.Gd_cpmc
          dialogFormVisible.value = true
        }
      } catch (e) {
        console.log(e)
      }
    }
  } catch (e) {
    console.log(e)
  }
}

// 工单编号回车
const handleGdbhEnter = async() => {
  const res = await getOrderInfo({ order: detailData.qczl_gdbh })
  if (res.code === 0) {
    const { Gd_cpmc, yj_Yjno, yj_yjmc } = res.data
    detailData.Gd_cpmc = Gd_cpmc
    detailData.qczl_yjno = yj_Yjno
    detailData.yj_yjmc = yj_yjmc
  }
}

// 废品类别回车
const handleFplbEnter = async(index, row) => {
  let res
  try {
    res = await getWastInfo({ search: row.fp_lb })
    if (res.code !== 0) {
      return
    }
  } catch (e) {
    console.log(e)
    return
  }

  const obj = res.data
  const treeData = []
  for (const category in obj) {
    if (Object.prototype.hasOwnProperty.call(obj, category)) {
      const children = []

      for (const subCategory in obj[category]) {
        if (Object.prototype.hasOwnProperty.call(obj[category], subCategory)) {
          const subChildren = obj[category][subCategory].map(item => {
            return { label: item }
          })

          children.push({
            label: subCategory,
            children: subChildren
          })
        }
      }

      treeData.push({
        label: category,
        children: children
      })
    }
  }
  selecTreeData = treeData
  selectIndex = index
  dialogSelectVisible1.value = true
}

const handleFplbClick = (node, check) => {
  if (!node.children) {
    detailData.table[selectIndex].fp_lb = node.label
    dialogSelectVisible1.value = false
  }
}

// 废品数量回车
const handleFpslEnter = async(index, row) => {
  if (row.fp_sl === '0') {
    detailData.table[index].fp_gxmc = ''
    detailData.table[index].fp_bz = ''
    detailData.table[index].fp_bh = ''
    detailData.table[index].fp_name = ''
    return
  }

  const params = {
    type: row.fp_lb,
    order: detailData.qczl_gdbh,
  }
  let res
  try {
    res = await getGxAndLeader(params)
    if (res.code !== 0) {
      return
    }
  } catch (e) {
    console.log(e)
    return
  }
  selectIndex = index
  Object.assign(selectData, res.data)
  dialogSelectVisible2.value = true
}

// 双击表格操作
function doubleClick(row, column, event) {
  type.value = 'update'
  getDetailData(row.UniqId)
}

// 处理选择框回车操作
const handleSelectClick = (row, column, event) => {
  const { sczl_gxmc, sczl_bzdh, sczl_bh1, name } = row
  const index = selectIndex
  detailData.table[index].fp_gxmc = sczl_gxmc
  detailData.table[index].fp_bz = sczl_bzdh
  detailData.table[index].fp_bh = sczl_bh1
  detailData.table[index].fp_name = name
  dialogSelectVisible2.value = false
}

// 弹窗确定
const enterDialog = async() => {
  const restoredData = {
    UniqId: detailData.UniqId,
    qczl_gdbh: detailData.qczl_gdbh,
    qczl_yjno: detailData.qczl_yjno,
    qczl_gxh: detailData.qczl_gxh,
    qczl_gxmc: detailData.qczl_gxmc,
    qczl_rq: detailData.qczl_rq,
    qczl_fp: detailData.qczl_fp,
    qczl_num: detailData.qczl_num,
    qczl_NumDesc: detailData.qczl_NumDesc,
    qczl_NumDesc1: detailData.qczl_NumDesc1,
    qczl_NumDesc2: detailData.qczl_NumDesc2,
    qczl_NumDesc3: detailData.qczl_NumDesc3,
    qczl_NumDesc4: detailData.qczl_NumDesc4,
    qczl_NumDesc5: detailData.qczl_NumDesc5,
    qczl_NumDesc6: detailData.qczl_NumDesc6,
    qczl_NumDesc7: detailData.qczl_NumDesc7,
    qczl_NumDesc8: detailData.qczl_NumDesc8,
  }
  detailData.table.forEach((item, index) => {
    const num = index + 1
    restoredData[`fp_lb${num}`] = item.fp_lb
    restoredData[`fp_sl${num}`] = item.fp_sl
    restoredData[`fp_bh${num}`] = item.fp_bh
    restoredData[`fp_bz${num}`] = item.fp_bz
    restoredData[`fp_gxmc${num}`] = item.fp_gxmc
  })
  const res = await updateData(restoredData)
  if (res.code === 0) {
    ElMessage({
      type: 'success',
      message: res.msg,
    })
    dialogFormVisible.value = false
  }
}

// 多选
const handleSelectionChange = (val) => {
  multipleSelection.value = val
}

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

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

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

// 导出excel
function exportExcel() {
  console.log('导出到excel')
  dialogSbyxgl.value = true
}

const dialogMrhjtj = ref(false)
const dialogGdzjfptj = ref(false)
const dialogSbyxgl = ref(false)
const value1 = ref('')
const table = ref(null)
const currentRow = ref()

const showGdzjfptj = () => {
  value1.value = currentRow.value?.qczl_gdbh
  dialogGdzjfptj.value = true
}

const handleSelectChange = (row, column, event) => {
  currentRow.value = row
}

</script>

<style scoped>
.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;
}

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