mes-admin-backend-ui/src/view/performance/12-orderAccounting/index.vue

<template>
  <div>
    <layout>
      <layout-header>
        <div class="">
          <!--按钮部分-->
          <el-form
            ref="elSearchFormRef"
            inline
            class="demo-form-inline"
            @submit.native.prevent
          >
            <el-form-item>
              <el-input
                v-model="searchInfo"
                placeholder="搜索产品编号或产品名称"
                clearable
                style="width: 180px"
              />
              <el-button
                type="primary"
                icon="search"
                class="search"
                @click="handleSearch"
              />
              <el-button
                type="primary"
                icon="edit"
                class="bt"
                @click="
                  () => {
                    dialogDetail = true;
                  }
                "
              ><i class="el-icon-edit" />查改
              </el-button>
              <!--                <el-button type="primary" disabled icon="edit" @click="" style="margin-left: 10px">工艺方案复制</el-button>-->
              <el-button
                type="primary"
                icon="edit"
                class="bt"
                @click="
                  () => {
                    dialogGdcjstj = true;
                  }
                "
              >工单超节损统计
              </el-button>

              <el-button
                type="primary"
                icon="edit"
                class="bt"
                @click="
                  () => {
                    dialogKhsz = true;
                  }
                "
              >考核设置
              </el-button>

              <el-button
                type="primary"
                icon="edit"
                class="bt"
                @click="
                  () => {
                    dialogXzgdtl = true;
                  }
                "
              >修正工单投料
              </el-button>

              <el-button
                type="primary"
                icon="edit"
                class="bt"
                @click="
                  () => {
                    dialogGxclhc = true;
                  }
                "
              >工序产量核查
              </el-button>

              <el-button
                type="primary"
                icon="edit"
                class="bt"
                @click="
                  () => {
                    dialogGdzjfptj = true;
                  }
                "
              >工单质检废品统计
              </el-button>

              <el-button
                type="primary"
                icon="edit"
                class="bt"
                @click="
                  () => {
                    dialogHjfpfb = true;
                  }
                "
              >核检废品分布
              </el-button>

              <el-button
                type="primary"
                icon="edit"
                class="bt"
                @click="handleGddy"
              >工单打印
              </el-button>

              <el-button
                type="primary"
                icon="edit"
                class="bt"
                @click="
                  () => {
                    pd_lcdlist = true;
                    pd_lcdProductValue();
                  }
                "
              >流程单查询
              </el-button>

              <el-button
                type="primary"
                icon="edit"
                class="bt"
                @click="exportExcel"
              >导出Excel
              </el-button>
            </el-form-item>
          </el-form>

          <!-- 弹窗 -->
          <div>
            <!-- 查改 -->
            <Detail
              v-if="dialogDetail"
              :is-show="dialogDetail"
              :gdbh="gdbh"
              @destroy="
                () => {
                  dialogDetail = false;
                }
              "
            />

            <!-- 工单超节损统计 -->
            <el-dialog
              v-model="dialogGdcjstj"
              title="工单超节损统计"
              destroy-on-close
            >
              <Gdcjstj :gdbh="gdbh" />
            </el-dialog>

            <!-- 修正工单印件质量考核设置 -->
            <Khsz
              v-if="dialogKhsz"
              v-model="dialogKhsz"
              :gdbh="gdbh"
            />

            <!-- 修正工单投料 -->
            <Xzgdtl
              v-if="dialogXzgdtl"
              v-model="dialogXzgdtl"
              :date="date"
            />

            <!-- 工序产量核查 -->
            <Gxclhc
              v-if="dialogGxclhc"
              v-model="dialogGxclhc"
              :gdbh="gdbh"
            />

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

            <!-- 核检废品分布 -->
            <Hjfpfb
              v-if="dialogHjfpfb"
              v-model="dialogHjfpfb"
              :val="gdbh"
            />

            <!-- 工单打印 -->
            <PrintPage ref="printPageRef" />

            <!--流程单查询【弹窗】-->
            <el-dialog
              v-model="pd_lcdlist"
              title="工单工序生产进程"
              fullscreen
            >
              <div style="width: 100%; height: 100%">
                <el-button
                  type=""
                  @click="
                    () => {
                      pd_lcdlist = false;
                    }
                  "
                >退出</el-button>
              </div>
              <div
                style="
                  width: 100%;
                  height: 100%;
                  display: flex;
                  align-items: center;
                "
              >
                <el-form-item
                  label="工单编号"
                  style="margin-right: 20px; padding: 0"
                >
                  <el-input
                    v-model="pd_lcdformData['gdbh']"
                    @keyup.enter="pd_lcdProductValue"
                  />
                </el-form-item>
                <el-form-item
                  label=""
                  style="margin-right: 5px; padding: 0"
                >
                  <el-input
                    v-model="pd_lcdformData['code']"
                    disabled
                  />
                </el-form-item>
                <el-form-item
                  label=""
                  style="margin-right: 5px; padding: 0"
                >
                  <el-input
                    v-model="pd_lcdformData['name']"
                    disabled
                    style="width: 500px"
                  />
                </el-form-item>
              </div>
              <div style="width: 100%; height: 70vh; display: flex">
                <layout>
                  <layout-sider
                    :resize-directions="['right']"
                    :width="240"
                    style="margin-right: 10px; height: 70vh"
                  >
                    <div class="JKWTree-tree">
                      <el-tree
                        :data="pd_lcd_treeData"
                        default-expand-all
                        @node-click="pd_lcd_handleNodeClick"
                      />
                    </div>
                  </layout-sider>
                  <layout-main>
                    <!-- 这里放右侧的内容 -->
                    <el-space wrap>
                      <!-- 右侧内容 -->
                      <template v-for="item in processList.total_process">
                        <el-button
                          disabled
                          :type="
                            !processList.process.includes(item)
                              ? 'danger'
                              : 'info'
                          "
                          plain
                          style="width: 50px"
                        >{{ item }}</el-button>
                      </template>
                    </el-space>
                  </layout-main>
                </layout>
              </div>
            </el-dialog>
          </div>
        </div>
      </layout-header>

      <layout>
        <!--    左侧树侧形结构-->
        <layout-sider
          :resize-directions="['right']"
          :width="190"
          style="margin-right: 10px"
        >
          <div
            class="JKWTree-tree"
            style="height: 70vh"
          >
            <h3>工单超节损核算</h3>
            <el-tree
              :data="treeData"
              highlight-current
              @node-click="handleNodeClick"
            />
          </div>
        </layout-sider>

        <!--  右侧内容区域 -->
        <layout-content>
          <!-- 上方列表 -->
          <div class="gva-table-box">
            <el-table
              style="width: 100%; height: 30vh"
              :data="tableData1"
              row-key="ID"
              highlight-current-row
              border
              :row-class-name="rowClassName"
              :cell-class-name="cellClassName"
              :row-style="{ height: '20px' }"
              :cell-style="{ padding: '0px' }"
              :header-row-style="{ height: '20px' }"
              :header-cell-style="{ padding: '0px' }"
              @row-click="showOrderSuperLossGy"
              @current-change="
                (row, oldRow) => {
                  currentRow = row;
                }
              "
            >
              <el-table-column
                type="selection"
                width="55"
              />
              <!-- 使用 v-for 循环渲染每一列 -->
              <el-table-column
                v-for="column in tableCols1"
                :key="column.prop"
                :prop="column.prop"
                :label="column.label"
                :width="column.width"
                show-overflow-tooltip="true"
                sortable
              />
            </el-table>
          </div>

          <!-- 下方表格 -->
          <el-table
            style="width: 100%; height: 40vh"
            row-key="ID"
            highlight-current-row
            border
            :data="tableData2"
            :row-style="{ height: '20px' }"
            :cell-style="{ padding: '0px' }"
            :header-row-style="{ height: '20px' }"
            :header-cell-style="{ padding: '0px' }"
          >
            <el-table-column
              type="selection"
              width="55"
            />
            <!-- 使用 v-for 循环渲染每一列 -->
            <el-table-column
              v-for="column in tableCols2"
              :key="column.prop"
              :prop="column.prop"
              :label="column.label"
              :width="column.width"
              show-overflow-tooltip="true"
              sortable
            />
          </el-table>
        </layout-content>
      </layout>
    </layout>
  </div>
</template>

<script>
import service from '@/utils/request'
import { writeXLSX } from 'xlsx'
// 5.1流程单查询-工单工序生产进程菜单栏
export const getOrderProcessLeft = (params) => {
  return service({
    url: '/mes_server/work_order_verification/getOrderProcessLeft',
    method: 'get',
    params,
  })
}
// 5.2流程单查询-获取工单工序生产进程右侧
export const getOrderProcessRight = (params) => {
  return service({
    url: '/mes_server/work_order_verification/getOrderProcessRight',
    method: 'get',
    params,
  })
}
</script>
<script setup>
import {
  Layout,
  LayoutContent,
  LayoutHeader,
  LayoutSider,
} from '@arco-design/web-vue'
import { ref, watch } from 'vue'
import {
  getOrderSuperLossGy,
  getSide,
  getTable,
} from '@/api/mes_api_gty/orderAccounting'
import Gdcjstj from '@/view/performance/12-orderAccounting/componets/gdcjstj.vue'
import Khsz from '@/view/performance/12-orderAccounting/componets/khsz.vue'
import Xzgdtl from '@/view/performance/12-orderAccounting/componets/xzgdtl.vue'
import Gxclhc from '@/view/performance/12-orderAccounting/componets/gxclhc.vue'
import Gongdanzhijianfeipintongji from '@/view/performance/09-workOrderVerification/componets/gongdanzhijianfeipintongji.vue'
import Detail from '@/view/performance/12-orderAccounting/componets/detail.vue'
import Hjfpfb from './componets/hjfpfb.vue'
import PrintPage from '@/view/yunyin/shengchanguanli/components/print.vue'
import { reactive } from 'vue'
import { exportExcelFile } from '@/utils/excel'
import { useUserStore } from '@/pinia/modules/user'
const userStore = useUserStore()
const sys_id =
  '[' + userStore.userInfo.userName + '/' + userStore.userInfo.nickName + ']'

// 弹窗
const dialogGdcjstj = ref(false)
const dialogDetail = ref(false)
const dialogKhsz = ref(false)
const dialogXzgdtl = ref(false)
const dialogGxclhc = ref(false)
const dialogGdzjfptj = ref(false)
const dialogHjfpfb = ref(false)

// 侧边栏数据
const treeData = ref([])
const getSideData = async() => {
  const res = await getSide()
  if (res.code === 0) {
    const { data } = res
    const transformedData = []

    for (const [key, value] of Object.entries(data)) {
      const [date, total] = key.split('-') // 提取日期和数量
      const transformedItem = {
        label: `${date}(工单数:${total})`,
        date: date,
        children: value.map((item) => ({
          label: `${item['客户编号']}【${item['客户名称']}】(工单数:${item.total})`,
          date: date,
          code: item?.['客户编号'],
        })),
      }
      transformedData.push(transformedItem)
    }
    treeData.value = transformedData
  }
}
getSideData()

// 表格数据
const tableCols1 = [
  { label: '超损工单', prop: 'csgd', width: '120' },
  { label: '工单编号', prop: 'Gd_gdbh', width: '120' },
  { label: '印件号', prop: 'jjcp_yjno', width: '100' },
  { label: '联数', prop: 'yj_ls', width: '80' },
  { label: '产品代号', prop: '成品编码', width: '150' },
  { label: '产品名称', prop: '成品名称', width: '250' },
  { label: '实际投料', prop: '实际投料', width: '120' },
  { label: '计量单位', prop: '计量单位', width: '120' },
  { label: '入仓日期', prop: 'warehousing_date', width: '120' },
  { label: '入仓数量', prop: 'warehousing_num', width: '120' },
  { label: '目标合格率', prop: 'target_rate', width: '120' },
  { label: '实际合格率', prop: 'real_rate', width: '120' },
  { label: '奖惩系数', prop: 'reward_rate', width: '120' },
  // { label: '奖罚金额合计', prop: '', width: '140' },
  { label: '废品合计', prop: '废品合计', width: '120' },
  { label: '工单无形损', prop: '工单无形损', width: '120' },
  { label: '材料废', prop: '材料废', width: '120' },
  { label: '零头处理', prop: '零头处理', width: '120' },
  { label: '处发废', prop: '外发废', width: '120' },
  { label: '外摊废', prop: '分摊废', width: '120' },
  { label: '工单计划损耗', prop: '工单计划损耗', width: '140' },
  { label: '工单制程废', prop: '', width: '120' },
  { label: '工单检验废', prop: '工单质检废', width: '120' },
  { label: '年月', prop: 'date', width: '120' },
]
const tableCols2 = [
  { label: '工单编号', prop: 'Gy0_gdbh', width: '120' },
  { label: '印件及工序', prop: 'Gy0_yjno', width: '120' },
  { label: '工序名称', prop: 'Gy0_gxmc', width: '200' },
  { label: '联数', prop: 'Gy0_ls', width: '80' },
  { label: '基础损耗', prop: 'Gy0_Rate0', width: '120' },
  { label: '损耗率', prop: 'Gy0_Rate1', width: '120' },
  { label: '损耗系数', prop: '损耗系数', width: '120' },
  { label: '计损色数', prop: 'Gy0_ms', width: '120' },
  { label: '计划产量', prop: 'Gy0_计划接货数', width: '120' },
  { label: '计划损耗', prop: 'Gy0_计划损耗', width: '120' },
  { label: '上报产量', prop: 'total_cl', width: '120' },
  { label: '制程废', prop: 'total_fp', width: '120' },
]
const tableData1 = ref([])
const tableData2 = ref([])
const currentRow = ref({})
const gdbh = ref('')
const date = ref('')
const searchInfo = ref('')

watch(currentRow, (value, oldValue, onCleanup) => {
  gdbh.value = value?.['Gd_gdbh']
  date.value = value?.['date']
  pd_lcdformData['gdbh'] = value?.['Gd_gdbh']
})

// 显示上方表格
const handleNodeClick = async(node) => {
  console.log(node)
  if (!node.children) {
    const { date, code } = node
    const res = await getTable({ date, code, limit: 9999, page: 1 })
    tableData1.value = res.data.data.map((item) => ({
      ...item,
      csgd:
        parseFloat(item['target_rate']) - parseFloat(item['real_rate']) > 0
          ? '√'
          : '',
      date: date,
    }))
    console.log(res.data)
  } else {
    // console.log(node.date, node.code)
  }
}

// 显示下方表格
const showOrderSuperLossGy = async() => {
  const { Gd_gdbh: order } = currentRow.value
  const res = await getOrderSuperLossGy({ order })
  if (res.code === 0) {
    const { data } = res
    tableData2.value = data.map((item) => ({
      ...item,
      Gy0_yjno: `${item.Gy0_yjno}-${item.Gy0_gxh}`,
      Gy0_gxmc:
        item.Add_gxmc === ''
          ? item.Gy0_gxmc
          : `${item.Gy0_gxmc}〖${item.Add_gxmc}〗`,
    }))
  }
}
// 定位
const handleSearch = () => {
  if (searchInfo.value) {
    tableData1.value = tableData1.value.filter((item) => {
      return item['Gd_gdbh'] === searchInfo.value ?? item
    })
  }
}

/* const rowClassName = ({ row, rowIndex }) => {
  if (row['csgd'] === '√') {
    return 'yellow-row'
  }
  return ''
}*/

const cellClassName = ({ row, column, rowIndex, columnIndex }) => {
  if ([7, 11, 13, 21].includes(columnIndex)) {
    return 'red-cell'
  }
  return ''
}

const printPageRef = ref()
function handleGddy() {
  printPageRef.value.open(gdbh.value)
}

const pd_lcdlist = ref(false)
const processList = ref([])

const pd_lcdformData = reactive({})
const pd_lcdProductValue = async() => {
  _getOrderProcessLeft_list()
}
const pd_lcd_treeData = ref([])
const _getOrderProcessLeft_list = async() => {
  const order = pd_lcdformData['gdbh']
  console.log(order)
  try {
    // 5.1流程单查询-工单工序生产进程菜单栏
    const getOrderProcessLeft_list = await getOrderProcessLeft({
      order: order,
    })
    console.log(getOrderProcessLeft_list)
    pd_lcdformData['code'] = getOrderProcessLeft_list.data.Gd_info['code']
    pd_lcdformData['name'] = getOrderProcessLeft_list.data.Gd_info['name']
    pd_lcd_treeData.value = [
      {
        label: order + '-' + getOrderProcessLeft_list.data.Gd_info['name'],
        // label: order + '-' + getOrderProcessLeft_list.data.Gd_info['code'] + '-' + getOrderProcessLeft_list.data.Gd_info['name'],
        value: undefined,
        children: [],
      },
    ]
    const newData = []
    for (const key in getOrderProcessLeft_list.data.Gy_info) {
      const temp = getOrderProcessLeft_list.data.Gy_info[key]
      const concatenatedValue = `${temp.Gy0_yjno}-${temp.Gy0_gxh} ---> ${temp.Gy0_gxmc}`
      newData.push({ label: concatenatedValue, value: temp.Gy0_gxh })
    }
    pd_lcd_treeData.value[0].children = newData
    // 5.2流程单查询-获取工单工序生产进程右侧【进入页面默认显示第一个】
    const getOrderProcessRight_list = await getOrderProcessRight({
      order: order,
      gxNo: newData[0].value,
    })
    processList.value = getOrderProcessRight_list.data
  } catch (error) {
    console.error(error)
  }
}

const pd_lcd_handleNodeClick = async(node) => {
  if (node.value === undefined) return
  const order = pd_lcdformData['gdbh']
  // //5.2流程单查询-获取工单工序生产进程右侧
  const getOrderProcessRight_list = await getOrderProcessRight({
    order: order,
    gxNo: node.value,
  })
  console.log(getOrderProcessRight_list)
  processList.value = getOrderProcessRight_list.data
}
// 导出excel
const exportExcel = () => {
  const labels = tableCols1.map((item) => item.label)
  const props = tableCols1.map((item) => item.prop)

  const data = tableData1.value.map((item) => {
    const row = {}
    props.forEach((prop, index) => {
      row[labels[index]] = item?.[prop]
    })
    return row
  })
  if (data[0]?.[labels[0]] === undefined) {
    return
  }
  exportExcelFile(data)
}
</script>

<style scoped>
:deep(.plan-usage-low div) {
  color: red !important;
}

.JKWTree-container {
  display: flex;
}

.JKWTree-tree {
  width: 100%;
  background-color: #fff;
  /*background-color: rgba(241, 224, 224, 0.99);*/
  padding: 10px;
  margin-right: 20px;
}

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

.JKWTree-content {
  flex: 1;
}

:deep(.el-table .yellow-row) {
  background: #ffff80;
}

:deep(.red-cell div) {
  color: #ff0000 !important;
}

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

:deep(.el-tabs__header) {
  margin-bottom: 0;
}

.search {
  margin-left: 0px !important;
  margin-right: 10px !important;
}

.bt {
  margin-left: 2px !important;
  padding: 3px !important;
  font-size: 12px;
}

.el-tabs__header {
  margin: 0px !important;
}

.gva-table-box {
  padding: 0px !important;
}

.mab {
  margin-bottom: 5px;
}
</style>