mes-sdai-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"
          >
            <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-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"
            />
          </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"
              />

            </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"
            />
          </el-table>
        </layout-content>
      </layout>
    </layout>
  </div>
</template>
<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'

// 弹窗
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 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: '90' },
  { label: '工单编号', prop: 'Gd_gdbh', width: '100' },
  { label: '印件号', prop: 'jjcp_yjno', width: '100' },
  { label: '联数', prop: 'yj_ls', width: '80' },
  { label: '产品代号', prop: '成品编码', width: '150' },
  { label: '产品名称', prop: '成品名称', width: '250' },
  { label: '实际投料', prop: '实际投料', width: '100' },
  { label: '计量单位', prop: '计量单位', width: '100' },
  { label: '入仓日期', prop: 'warehousing_date', width: '120' },
  { label: '入仓数量', prop: 'warehousing_num', width: '100' },
  { label: '目标合格率', prop: 'target_rate', width: '100' },
  { label: '实际合格率', prop: 'real_rate', width: '100' },
  { label: '奖惩系数', prop: 'reward_rate', width: '100' },
  { label: '奖罚金额合计', prop: '', width: '120' },
  { label: '废品合计', prop: '废品合计', width: '100' },
  { label: '工单无形损', prop: '工单无形损', width: '100' },
  { label: '材料废', prop: '材料废', width: '100' },
  { label: '零头处理', prop: '零头处理', width: '100' },
  { label: '处发废', prop: '外发废', width: '100' },
  { label: '外摊废', prop: '分摊废', width: '100' },
  { label: '工单计划损耗', prop: '工单计划损耗', width: '120' },
  { label: '工单制程废', prop: '', width: '100' },
  { label: '工单检验废', prop: '工单质检废', width: '100' },
  { label: '年月', prop: '', width: '100' },
]
const tableCols2 = [
  { label: '工单编号', prop: 'Gy0_gdbh', width: '100' },
  { label: '印件及工序', prop: 'Gy0_yjno', width: '100' },
  { label: '工序名称', prop: 'Gy0_gxmc', width: '200' },
  { label: '联数', prop: 'Gy0_ls', width: '80' },
  { label: '基础损耗', prop: 'Gy0_Rate0', width: '100' },
  { label: '损耗率', prop: 'Gy0_Rate1', width: '100' },
  { label: '损耗系数', prop: '损耗系数', width: '100' },
  { label: '计损色数', prop: 'Gy0_ms', width: '100' },
  { label: '计划产量', prop: 'Gy0_计划接货数', width: '100' },
  { label: '计划损耗', prop: 'Gy0_计划损耗', width: '100' },
  { label: '上报产量', prop: 'total_cl', width: '100' },
  { label: '制程废', prop: 'total_fp', width: '100' },
]
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?.['年月']
})

// 显示上方表格
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 ? '√' : '',
    }))
    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 ''
}
</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>