mes-admin-backend-ui/src/view/v23financial/v23CostProcess.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="搜索工单编号" clearable style="width: 200px;margin: 5px"></el-input> -->
              <!-- <el-button type="primary" class="bt" icon="edit"  @click="oncreate">成本计算</el-button> -->
              <el-button type="primary" class="bt" icon="download" @click="ToExcel" >导出到Excel</el-button>
            </el-form-item>
          </el-form>

      

        </div>
      </layout-header>

      <layout>
        <!--    左侧树侧形结构-->
        <layout-sider :resize-directions="['right']" :width="190"  style="margin-right: 10px;height: 78vh">
          <div class="JKWTree-tree" style="height: 200px">
            <h3>V23工序成本独立核算</h3>
            <el-tree :data="treeData"  :props="defaultProps" @node-click="handleNodeClick" @node-expand="handleNodeExpand">
            </el-tree>
          </div>
        </layout-sider>

        <!-- 右侧区域 -->
        <layout-content >
        <el-main>
          <div class="gva-table-box">
            <!-- 表格数据 -->
            <el-table ref="multipleTable" style="width: 100%;height: 50vh" tooltip-effect="dark"
                      :row-style="{ height: '25px' }"  :header-cell-style="{ padding: '0px' }"
                      :cell-style="{ padding: '0px' }" :header-row-style="{ height: '20px' }"
                      :data="hztableData"  border row-key="ID"
                      size="small" id="tab2"

                      :cell-class-name="gxbgCellClass"
                      highlight-current-row="true" @row-dblclick="updateCompanyFunc"
                      @row-click="tableRowClick" :show-overflow-tooltip="true"
                      @selection-change="handleSelectionChange">
             <el-table-column  sortable align="center" label="车间名称" prop="车间名称"  width="120" />
             <el-table-column  sortable align="center" label="工单编号" prop="sczl_gdbh"  width="120" />
             <el-table-column   align="center" label="年月" prop="sys_ny"  width="100" />
             <el-table-column   align="center" label="印件号" prop="sczl_yjno"  width="90" />
             <el-table-column   align="center" label="印件名称" prop="印件名称"  width="300" />
             <el-table-column   align="center" label="工序号" prop="sczl_gxh"  width="90" />
             <el-table-column   align="center" label="工序名称" prop="工序名称"  width="110" />
             <el-table-column   align="center" label="设备编号" prop="sczl_jtbh"  width="110" />
             <el-table-column   align="center" label="卷张换算系数" prop="卷张换算系数"  width="110" />
             <el-table-column   align="center" label="占用机时" prop="占用机时"  width="110" />
             <el-table-column   align="center" label="班组车头产量" prop="班组车头产量"  width="120" />
             <el-table-column   align="center" label="墨数" prop="sczl_ms"  width="110" />
             <el-table-column   align="center" label="工序难度系数" prop="工序难度系数"  width="200" />
             <el-table-column   align="center" label="班组换算产量" prop="班组换算产量"  width="200" />
             <el-table-column   align="center" label="千件工价" prop="千件工价"  width="110" />
             <el-table-column   align="center" label="计件产量" prop="计件产量"  width="200" />
             <el-table-column   align="center" label="水电分摊因子" prop="水电分摊因子"  width="200" />
             <el-table-column   align="center" label="材料分摊因子" prop="材料分摊因子"  width="200" />
             <el-table-column   align="center" label="人工分摊因子" prop="人工分摊因子"  width="200" />
             <el-table-column   align="center" label="小时折旧额" prop="A_小时折旧额"  width="200" />
             <el-table-column   align="center" label="车间人工" prop="车间人工"  width="110" />
             <el-table-column   align="center" label="部门人工附加" prop="部门人工附加"  width="110" />
             <el-table-column   align="center" label="直接材料" prop="直接材料"  width="200" />
             <el-table-column   align="center" label="考核直接材料" prop="考核直接材料"  width="200" />
             <el-table-column   align="center" label="分摊材料" prop="分摊材料"  width="110" />
             <el-table-column   align="center" label="直接折旧" prop="直接折旧"  width="110" />
             <el-table-column   align="center" label="分摊折旧" prop="分摊折旧"  width="200" />
             <el-table-column   align="center" label="直接水电" prop="直接水电"  width="200" />
             <el-table-column   align="center" label="分摊水电" prop="分摊水电"  width="110" />
             <el-table-column   align="center" label="场地租金" prop="场地租金"  width="110" />
             <el-table-column   align="center" label="废气处理" prop="废气处理"  width="200" />
             <el-table-column   align="center" label="锅炉" prop="锅炉"  width="140" />
             <el-table-column   align="center" label="热水锅炉" prop="热水锅炉"  width="110" />
             <el-table-column   align="center" label="空压机" prop="空压机"  width="110" />
             <el-table-column   align="center" label="真空鼓风机" prop="真空鼓风机"  width="110" />
             <el-table-column   align="center" label="中央空调" prop="中央空调"  width="110" />
             <el-table-column   align="center" label="分摊其他" prop="分摊其他"  width="200" />
             <el-table-column   align="center" label="成本合计" prop="客户编号"  width="200" />
            </el-table>

            <!-- 分页 -->
            <div class="gva-pagination">
                <el-pagination
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :current-page="page"
                  :page-size="limit"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="total">
                </el-pagination>
              </div>

              <div class="formula-description">
          <div class="formula-title">计算公式说明：</div>
          <div class="formula-grid">
            <div class="formula-item">
              <span class="formula-label">水电分摊因子：</span>
              <span class="formula-content">工单机台生产工时</span>
            </div>
            <div class="formula-item">
              <span class="formula-label">材料分摊因子：</span>
              <span class="formula-content">色度数</span>
            </div>
            <div class="formula-item">
              <span class="formula-label">人工分摊因子：</span>
              <span class="formula-content">直接人工成本</span>
            </div>
            <div class="formula-item">
              <span class="formula-label">小时折旧额：</span>
              <span class="formula-content">机台小时折旧 × 水电分摊因子</span>
            </div>
            <div class="formula-item">
              <span class="formula-label">车间人工：</span>
              <span class="formula-content">车间人工成本 × (工单工序色度数 ÷ 车间总色度数)</span>
            </div>
            <div class="formula-item">
              <span class="formula-label">部门人工附加：</span>
              <span class="formula-content">部门人工 × (车间直接人工成本 ÷ 总直接人工成本) × (工单工序色度数 ÷ 车间总色度数)</span>
            </div>
            <div class="formula-item">
              <span class="formula-label">直接材料：</span>
              <span class="formula-content">ERP直接材料数量 × 单价</span>
            </div>
            <div class="formula-item">
              <span class="formula-label">分摊材料：</span>
              <span class="formula-content">ERP分摊材料数量 × 单价 × (工单工序色度数 ÷ 车间总色度数)</span>
            </div>
            <div class="formula-item">
              <span class="formula-label">直接水电：</span>
              <span class="formula-content">上报运行时长 × 电量单价</span>
            </div>
            <div class="formula-item full-width">
              <span class="formula-label">废气处理、锅炉、热水锅炉、空压机、空调、鼓风机：</span>
              <span class="formula-content">上报数量 × 单价 × (水电分摊因子 ÷ 总分摊因子)（锅炉和热水锅炉只算卷凹机组）</span>
            </div>
          </div>
        </div>

          </div>

          <el-dialog
    v-model="costlist"
    title="成本计算"
    width="500px"
    :close-on-click-modal="false"
  >
    <!-- 月份选择器 -->
    <div class="date-picker-container">
      <div class="date-picker-item">
        <span class="label">计算月份：</span>
        <el-date-picker
          v-model="costMonth"
          type="month"
          placeholder="选择创建月份"
          format="YYYY年MM月"
          value-format="YYYYMM"
        />
      </div>
    </div>

    <!-- 底部按钮 -->
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="costlist = false">取消</el-button>
        <el-button type="primary" @click="costhandleConfirm">确定</el-button>
      </span>
    </template>
  </el-dialog>
        </el-main>
      </layout-content>
      </layout>
    </layout>
  </div>
</template>
<script setup>
// 全量引入格式化工具 请按需保留
import { Layout, LayoutSider, LayoutContent } from '@arco-design/web-vue';
import {ref, reactive} from 'vue'
import { useUserStore } from '@/pinia/modules/user'
import { exportExcelFile } from '@/utils/excel'
import {ElMessage} from "element-plus";
import * as XLSX from 'xlsx'
import FileSaver from 'file-saver'
import LuckyExcel from 'luckyexcel';
import {getSummaryTab,SummaryCostAccountingList,getProcessTab,ProcessCostAccountingList} from '@/api/jixiaoguanli/caiwubaobiao'

defineOptions({name: 'Company'})

const userStore = useUserStore()
const _username = ref('')
_username.value = userStore.userInfo.userName + '/' + userStore.userInfo.nickName

// =========== 获取左侧树侧形结构 ===========
const treeData = ref([]);
const defaultProps = {
children: 'children',
label: 'label'
};
const getTreeData = async () => {
  try {
    const res = await getProcessTab();
    
    if (res.code === 0 && res.data) {
      treeData.value = Object.entries(res.data).map(([yearMonth, workshops]) => {
        const year = yearMonth.substring(0, 4);
        const month = parseInt(yearMonth.substring(4), 10);
        
        return {
          label: `${year}年${month}月`,
          value: yearMonth,
          children: workshops.map(workshop => ({
            label: workshop,
            value: `${yearMonth}-${workshop}`,
            type: 'workshop'
          }))
        };
      }).sort((a, b) => b.value.localeCompare(a.value)); // 按年月倒序
      
      console.log('树形数据:', treeData.value);
    }
  } catch (error) {
    console.error('请求出错:', error);
  }
};
getTreeData();

const total = ref(0)
const page = ref(1)
const limit = ref(50)
const nodeclick = ref('')
const hztableData = ref([])
const handleNodeClick = async (nodeData) => {
console.log('点击节点:', nodeData);
nodeclick.value = nodeData
// 根据节点类型处理不同逻辑
if (nodeData.value.split('-').length === 1) {
  // 点击了年月节点
  console.log('选择了年月:', nodeData.label);
} else {
  // 点击了车间节点
  const [yearMonth, workshop] = nodeData.value.split('-');
  console.log(`选择了 ${yearMonth} 的 ${workshop}`);
  const res = await ProcessCostAccountingList({month:yearMonth,sist:workshop,page:page.value,limit:limit.value})
  console.log(res)
  if(res.code === 0){
      hztableData.value = res.data.list
      total.value = res.data.total
  }
}
};

const handleSizeChange = (val) => {
limit.value = val;
handleNodeClick(nodeclick.value);
}

const handleCurrentChange = (val) => {
page.value = val;
handleNodeClick(nodeclick.value);
}


//导出按钮
const ToExcel = async () => { 
try {
  const el = document.getElementById('tab2');
  //  使用table_to_sheet获取工作表对象
  const worksheet = XLSX.utils.table_to_sheet(el, { raw: true });
  //设置从C列开始为数字格式
  const range = XLSX.utils.decode_range(worksheet['!ref']);
  for (let col = 3; col <= range.e.c; col++) { // 从C列(索引2)开始
    for (let row = range.s.r + 1; row <= range.e.r; row++) { // 跳过表头行
      const cellAddress = XLSX.utils.encode_cell({ r: row, c: col });
      if (worksheet[cellAddress]) {
        // 尝试转换为数字
        const cellValue = worksheet[cellAddress].v;
        const numValue = Number(cellValue);
        
        if (!isNaN(numValue)) {
          worksheet[cellAddress].t = 'n'; // 数字类型
          worksheet[cellAddress].v = numValue; // 更新值
          // worksheet[cellAddress].z = '0.000'; // 数字格式
        }
      }
    }
  }
  
  // 创建并导出工作簿
  const workbook = XLSX.utils.book_new();
  XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1');
  XLSX.writeFile(workbook, '成本汇总.xlsx');
  
} catch (error) {
  console.error('导出失败:', error);
  ElMessage.error('导出数据失败，请重试');
}
};

const costlist = ref(false)
const costMonth = ref('')

const oncreate = () => {
costlist.value = true;
}

// const costhandleConfirm = async () => {
//   if (!costMonth.value) {
//     ElMessage.error('请选择计算月份');
//     return;
//   }
//   try {
//     const qtdtAdds = await ({
//       month: costMonth.value,
//       sys_id: userStore.userInfo.nickName
//     });
//     if (qtdtAdds.code === 0) {
//       costlist.value = false;
//       ElMessage({type: 'success',message: '计算成功'})
//     } else {
//       ElMessage({type: 'error',message: '计算失败'})
//     }
//   } catch (error) {
//     console.error(error);
//   }
// }


</script>

<style scoped>
.form-container {
  display: flex;
  flex-wrap: wrap;
}

.form-column {
  /*flex: 1;*/
  margin-right: 15px; /* 调整列之间的间距 */
}

/* 左侧输入框宽度调整 */
.form-column .el-form-item .el-input {
  width: 150px; /* 调整左侧输入框的宽度 */
}

:deep(.hui-plan-usage-lows  div) {
  color: #8c939d !important;
}
:deep(.lan-plan-usage-lows  div) {
  color: blue !important;
  font-weight: bold;
}


/* 媒体查询，根据需要调整断点 */
@media screen and (max-width: 768px) {
  .form-column {
    flex: 1 0 100%; /* 在小屏幕下变成单列布局 */
    margin-right: 0;
  }
}
/*:deep(.el-table td .cell) {*/
/*  line-height: 30px !important;*/
/*}*/
.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>
<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>