|
|
@@ -3,71 +3,131 @@
|
|
|
<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-input v-model="searchInfo" placeholder="搜索工单编号" @keyup.enter="onSubmit" clearable style="width: 200px;margin: 5px"></el-input>
|
|
|
- <el-button type="primary" icon="search" @click="onSubmit" title="搜索" ></el-button>
|
|
|
- <el-button type="primary" class="bt" icon="download" @click="ToExcel" >导出到Excel</el-button>
|
|
|
+ <el-input v-model="searchInfo" placeholder="查询工单编号、成品名称" @keyup.enter="onSubmit" clearable style="width: 260px;margin: 5px"></el-input>
|
|
|
+ <el-button type="primary" icon="search" @click="onSubmit" title="查询">查询</el-button>
|
|
|
+ <el-button type="primary" class="bt" icon="download" title="导出当前表格显示的所有数据" @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">
|
|
|
+ <!--左侧树侧形结构-->
|
|
|
+ <layout-sider
|
|
|
+ class="cost-order-sider"
|
|
|
+ :resize-directions="['right']"
|
|
|
+ :width="300"
|
|
|
+ style="margin-right: 4px">
|
|
|
+ <div class="JKWTree-tree cost-order-tree">
|
|
|
<h3>V23工单成本独立核算</h3>
|
|
|
- <el-tree :data="treeData" :props="defaultProps" @node-click="handleNodeClick" @node-expand="handleNodeExpand">
|
|
|
- </el-tree>
|
|
|
+ <div v-if="dateTree.length" class="cost-side-dates">
|
|
|
+ <template v-for="(y, yi) in dateTree" :key="'y-' + yi + '-' + y.year">
|
|
|
+ <!-- 旧接口：仅扁平日期，无年/月标题 -->
|
|
|
+ <template v-if="isFlatDateOnlyGroup(y)">
|
|
|
+ <div
|
|
|
+ v-for="d in y.months[0].days"
|
|
|
+ :key="d"
|
|
|
+ class="cost-side-node cost-date-day"
|
|
|
+ :class="{ 'is-current': selectedDate === d }"
|
|
|
+ @click="selectDate(d)"
|
|
|
+ >
|
|
|
+ {{ d }}
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <template v-else>
|
|
|
+ <div
|
|
|
+ class="cost-date-fold-hd cost-date-year"
|
|
|
+ @click="toggleYearFold(yi)"
|
|
|
+ >
|
|
|
+ <span class="cost-date-caret" :class="{ 'is-open': isYearFoldOpen(yi) }" />
|
|
|
+ <span>{{ y.year }}</span>
|
|
|
+ </div>
|
|
|
+ <div v-show="isYearFoldOpen(yi)" class="cost-date-fold-body">
|
|
|
+ <template v-for="(m, mi) in y.months" :key="'m-' + yi + '-' + mi + '-' + m.month">
|
|
|
+ <div
|
|
|
+ class="cost-date-fold-hd cost-date-month"
|
|
|
+ :class="{ 'is-current': selectedMonthKey === monthFoldKey(yi, mi) && !selectedDate }"
|
|
|
+ @click="selectMonth(yi, mi, m)"
|
|
|
+ >
|
|
|
+ <span
|
|
|
+ class="cost-date-caret"
|
|
|
+ :class="{ 'is-open': isMonthFoldOpen(yi, mi) }"
|
|
|
+ @click.stop="toggleMonthFold(yi, mi)"
|
|
|
+ />
|
|
|
+ <span>{{ formatMonthYmDisplay(m.month) }}</span>
|
|
|
+ </div>
|
|
|
+ <div v-show="isMonthFoldOpen(yi, mi)" class="cost-date-fold-days">
|
|
|
+ <div
|
|
|
+ v-for="d in m.days"
|
|
|
+ :key="d"
|
|
|
+ class="cost-side-node cost-date-day"
|
|
|
+ :class="{ 'is-current': selectedDate === d }"
|
|
|
+ @click="selectDate(d)"
|
|
|
+ >
|
|
|
+ {{ d }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </template>
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ v-for="item in customerList"
|
|
|
+ :key="item.value"
|
|
|
+ class="cost-side-node"
|
|
|
+ :class="{ 'is-current': nodeclick && nodeclick.value === item.value }"
|
|
|
+ @click="handleCustomerClick(item)"
|
|
|
+ >
|
|
|
+ {{ item.label }}
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</layout-sider>
|
|
|
|
|
|
<!-- 右侧区域 -->
|
|
|
- <layout-content >
|
|
|
- <el-main>
|
|
|
+ <layout-content class="cost-order-main">
|
|
|
+ <el-main style="padding:0px;">
|
|
|
<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 align="center" label="成品代号" prop="成品代号" width="120" />
|
|
|
- <el-table-column align="center" label="成品名称" prop="成品名称" width="300" />
|
|
|
- <el-table-column align="center" label="直接材料" prop="直接材料" width="120" />
|
|
|
- <el-table-column align="center" label="分摊材料" prop="分摊材料" width="120" />
|
|
|
- <el-table-column align="center" label="考核直接材料" prop="考核直接材料" width="120" />
|
|
|
- <el-table-column sortable align="center" label="车间名称" prop="车间名称" width="120" />
|
|
|
- <el-table-column sortable align="center" label="车间人工" prop="车间人工" width="120" />
|
|
|
- <el-table-column align="center" label="部门人工附加" prop="部门人工附加" width="120" />
|
|
|
- <el-table-column align="center" label="直接折旧" prop="直接折旧" width="120" />
|
|
|
- <el-table-column align="center" label="分摊折旧" prop="分摊折旧" width="120" />
|
|
|
- <el-table-column align="center" label="直接水电" prop="直接水电" width="120" />
|
|
|
- <el-table-column align="center" label="分摊水电" prop="分摊水电" width="120" />
|
|
|
- <el-table-column align="center" label="场地租金" prop="场地租金" width="120" />
|
|
|
- <el-table-column align="center" label="废气处理" prop="废气处理" width="120" />
|
|
|
- <el-table-column align="center" label="锅炉" prop="锅炉" width="120" />
|
|
|
- <el-table-column align="center" label="空压机" prop="空压机" width="120" />
|
|
|
- <el-table-column align="center" label="真空鼓风机" prop="真空鼓风机" width="120" />
|
|
|
- <el-table-column align="center" label="中央空调" prop="中央空调" width="120" />
|
|
|
- <el-table-column align="center" label="分摊其他" prop="分摊其他" width="120" />
|
|
|
- <el-table-column align="center" label="成本合计" prop="成本合计" width="120" />
|
|
|
- <el-table-column align="center" label="录入人" prop="Sys_id" width="120" />
|
|
|
- <el-table-column align="center" label="录入时间" prop="Sys_rq" width="160" />
|
|
|
+ <el-table
|
|
|
+ ref="multipleTable" class="cost-order-table" style="width: 100%;height: 52vh" tooltip-effect="dark"
|
|
|
+ :row-style="{ height: '20px' }" :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="left" label="工单编号" prop="工单编号" width="110" />
|
|
|
+
|
|
|
+ <el-table-column align="left" label="成品代号" prop="成品代号" width="100" />
|
|
|
+ <el-table-column align="left" label="成品名称" prop="成品名称" width="330" />
|
|
|
+ <el-table-column align="left" label="直接材料" prop="直接材料" width="110" />
|
|
|
+ <el-table-column align="left" label="分摊材料" prop="分摊材料" width="110" />
|
|
|
+ <el-table-column align="left" label="考核直接材料" prop="考核直接材料" width="120" />
|
|
|
+ <el-table-column sortable align="left" label="车间名称" prop="车间名称" width="100" />
|
|
|
+ <el-table-column sortable align="left" label="车间人工" prop="车间人工" width="100" />
|
|
|
+ <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="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="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="Sys_id" width="80" />
|
|
|
+ <el-table-column align="left" label="录入时间" prop="Sys_rq" width="160" />
|
|
|
</el-table>
|
|
|
|
|
|
<!-- 分页 -->
|
|
|
@@ -80,84 +140,80 @@
|
|
|
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>
|
|
|
+
|
|
|
+ <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>
|
|
|
+ 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>
|
|
|
@@ -182,42 +238,173 @@ const userStore = useUserStore()
|
|
|
const _username = ref('')
|
|
|
_username.value = userStore.userInfo.userName + '/' + userStore.userInfo.nickName
|
|
|
|
|
|
-// =========== 获取左侧树侧形结构 ===========
|
|
|
-const treeData = ref([]);
|
|
|
-const defaultProps = {
|
|
|
- children: 'children',
|
|
|
- label: 'label'
|
|
|
+// =========== 左侧：上日期、下客户（单列，与原先树列表一致）===========
|
|
|
+/** 日期树：{ year, months: [{ month, days: string[] }] }[] */
|
|
|
+const dateTree = ref([]);
|
|
|
+const selectedDate = ref('');
|
|
|
+/** 选中月份（点月行查询）：与具体日互斥 */
|
|
|
+const selectedMonthKey = ref('');
|
|
|
+const selectedMonthStr = ref('');
|
|
|
+const customerList = ref([]);
|
|
|
+
|
|
|
+/** 年/月折叠：仅 true 为展开；未选中日期时全部收起，只展开含当前选中日的那条分支 */
|
|
|
+const dateFoldYearOpen = ref({});
|
|
|
+const dateFoldMonthOpen = ref({});
|
|
|
+
|
|
|
+const isFlatDateOnlyGroup = (y) =>
|
|
|
+ !y.year &&
|
|
|
+ Array.isArray(y.months) &&
|
|
|
+ y.months.length === 1 &&
|
|
|
+ !y.months[0].month;
|
|
|
+
|
|
|
+const monthFoldKey = (yi, mi) => `${yi}-${mi}`;
|
|
|
+const isYearFoldOpen = (yi) => dateFoldYearOpen.value[String(yi)] === true;
|
|
|
+const isMonthFoldOpen = (yi, mi) => dateFoldMonthOpen.value[monthFoldKey(yi, mi)] === true;
|
|
|
+
|
|
|
+const toggleYearFold = (yi) => {
|
|
|
+ const k = String(yi);
|
|
|
+ const cur = isYearFoldOpen(yi);
|
|
|
+ dateFoldYearOpen.value = { ...dateFoldYearOpen.value, [k]: !cur };
|
|
|
+};
|
|
|
+
|
|
|
+const toggleMonthFold = (yi, mi) => {
|
|
|
+ const k = monthFoldKey(yi, mi);
|
|
|
+ const cur = isMonthFoldOpen(yi, mi);
|
|
|
+ dateFoldMonthOpen.value = { ...dateFoldMonthOpen.value, [k]: !cur };
|
|
|
+};
|
|
|
+
|
|
|
+/** 按当前选中日展开路径；无选中则全部收起 */
|
|
|
+const applyFoldForSelectedDate = (dateStr) => {
|
|
|
+ const yMap = {};
|
|
|
+ const mMap = {};
|
|
|
+ const d = dateStr ? String(dateStr) : '';
|
|
|
+ dateTree.value.forEach((y, yi) => {
|
|
|
+ if (isFlatDateOnlyGroup(y)) return;
|
|
|
+ let yearHas = false;
|
|
|
+ y.months.forEach((m, mi) => {
|
|
|
+ const open = Boolean(d && m.days.includes(d));
|
|
|
+ mMap[monthFoldKey(yi, mi)] = open;
|
|
|
+ if (open) yearHas = true;
|
|
|
+ });
|
|
|
+ yMap[String(yi)] = yearHas;
|
|
|
+ });
|
|
|
+ dateFoldYearOpen.value = yMap;
|
|
|
+ dateFoldMonthOpen.value = mMap;
|
|
|
+};
|
|
|
+
|
|
|
+/** 仅展开选中的年、月（点月份查询时用） */
|
|
|
+const applyFoldForMonth = (yi, mi) => {
|
|
|
+ const yMap = {};
|
|
|
+ const mMap = {};
|
|
|
+ dateTree.value.forEach((y, yIdx) => {
|
|
|
+ if (isFlatDateOnlyGroup(y)) return;
|
|
|
+ yMap[String(yIdx)] = yIdx === yi;
|
|
|
+ y.months.forEach((_, mIdx) => {
|
|
|
+ mMap[monthFoldKey(yIdx, mIdx)] = yIdx === yi && mIdx === mi;
|
|
|
+ });
|
|
|
+ });
|
|
|
+ dateFoldYearOpen.value = yMap;
|
|
|
+ dateFoldMonthOpen.value = mMap;
|
|
|
+};
|
|
|
+
|
|
|
+/** 月行展示为 YYYYMM（与常见树列表一致），如 2026-04 → 202604 */
|
|
|
+const formatMonthYmDisplay = (monthStr) => {
|
|
|
+ if (!monthStr) return '';
|
|
|
+ const s = String(monthStr);
|
|
|
+ const m = s.match(/^(\d{4})-(\d{2})$/);
|
|
|
+ if (m) return `${m[1]}${m[2]}`;
|
|
|
+ return s;
|
|
|
+};
|
|
|
+
|
|
|
+/**
|
|
|
+ * 新接口 list: [{ year, children: [{ month, children: ["2026-04-07",...] }] }]
|
|
|
+ * 兼容旧接口 list: ["2026-04-05", ...]
|
|
|
+ */
|
|
|
+const normalizeDateListPayload = (raw) => {
|
|
|
+ const flatDays = [];
|
|
|
+ const tree = [];
|
|
|
+ if (!raw) return { tree, flatDays };
|
|
|
+ if (Array.isArray(raw) && raw.length > 0 && typeof raw[0] === 'string') {
|
|
|
+ raw.forEach((d) => {
|
|
|
+ if (d) flatDays.push(String(d));
|
|
|
+ });
|
|
|
+ if (flatDays.length) {
|
|
|
+ tree.push({ year: '', months: [{ month: '', days: [...flatDays] }] });
|
|
|
+ }
|
|
|
+ return { tree, flatDays };
|
|
|
+ }
|
|
|
+ if (!Array.isArray(raw)) return { tree, flatDays };
|
|
|
+ for (const yNode of raw) {
|
|
|
+ if (!yNode || typeof yNode !== 'object') continue;
|
|
|
+ const year = String(yNode.year ?? '');
|
|
|
+ const mList = Array.isArray(yNode.children) ? yNode.children : [];
|
|
|
+ const months = [];
|
|
|
+ for (const mNode of mList) {
|
|
|
+ if (!mNode || typeof mNode !== 'object') continue;
|
|
|
+ const month = String(mNode.month ?? '');
|
|
|
+ const dayArr = Array.isArray(mNode.children) ? mNode.children : [];
|
|
|
+ const days = dayArr.map((d) => String(d)).filter(Boolean);
|
|
|
+ days.forEach((d) => flatDays.push(d));
|
|
|
+ if (days.length) months.push({ month, days });
|
|
|
+ }
|
|
|
+ if (months.length) tree.push({ year, months });
|
|
|
+ }
|
|
|
+ return { tree, flatDays };
|
|
|
+};
|
|
|
+
|
|
|
+/** 本地当天 YYYY-MM-DD，与接口 list 中日期格式一致 */
|
|
|
+const formatTodayYMD = () => {
|
|
|
+ const d = new Date();
|
|
|
+ const y = d.getFullYear();
|
|
|
+ const m = String(d.getMonth() + 1).padStart(2, '0');
|
|
|
+ const day = String(d.getDate()).padStart(2, '0');
|
|
|
+ return `${y}-${m}-${day}`;
|
|
|
+};
|
|
|
+
|
|
|
+const parseCustomerRows = (rawList) => {
|
|
|
+ const rows = (rawList || []).map((item) => {
|
|
|
+ const [value, label] = String(item).split('-->');
|
|
|
+ return {
|
|
|
+ label: item,
|
|
|
+ value: value.trim(),
|
|
|
+ originalCode: value.trim(),
|
|
|
+ originalName: (label || '').trim(),
|
|
|
+ type: 'company'
|
|
|
+ };
|
|
|
+ }).sort((a, b) => {
|
|
|
+ const getSortKey = (code) => {
|
|
|
+ const firstChar = code.charAt(0);
|
|
|
+ if (/[0-9]/.test(firstChar)) return '1' + code;
|
|
|
+ if (firstChar === 'J') return '2' + code;
|
|
|
+ if (firstChar === 'Y') return '3' + code;
|
|
|
+ return '4' + code;
|
|
|
+ };
|
|
|
+ return getSortKey(a.value).localeCompare(getSortKey(b.value));
|
|
|
+ });
|
|
|
+ customerList.value = rows;
|
|
|
};
|
|
|
|
|
|
const getTreeData = async () => {
|
|
|
try {
|
|
|
- const res = await GetCompletionWorkOrderCostTab(); // 调用API接口
|
|
|
-
|
|
|
+ const res = await GetCompletionWorkOrderCostTab();
|
|
|
if (res.code === 0 && res.data) {
|
|
|
- // 直接将数据转换为树节点，保留完整格式
|
|
|
- treeData.value = res.data.map(item => {
|
|
|
- const [value, label] = item.split('-->');
|
|
|
- return {
|
|
|
- label: item, // 直接使用原始字符串 "1010-->广东中烟"
|
|
|
- value: value.trim(), // 编码部分作为value
|
|
|
- originalCode: value.trim(), // 保留编码
|
|
|
- originalName: label.trim(), // 保留名称
|
|
|
- // 可以添加其他属性
|
|
|
- type: 'company'
|
|
|
- };
|
|
|
- }).sort((a, b) => {
|
|
|
- // 按编码排序逻辑：数字开头 > J开头 > Y开头
|
|
|
- const getSortKey = (code) => {
|
|
|
- const firstChar = code.charAt(0);
|
|
|
- if (/[0-9]/.test(firstChar)) return '1' + code;
|
|
|
- if (firstChar === 'J') return '2' + code;
|
|
|
- if (firstChar === 'Y') return '3' + code;
|
|
|
- return '4' + code;
|
|
|
- };
|
|
|
- return getSortKey(a.value).localeCompare(getSortKey(b.value));
|
|
|
- });
|
|
|
-
|
|
|
- console.log('生成的树形数据:', treeData.value);
|
|
|
+ const payload = res.data;
|
|
|
+ const rawCustomers = Array.isArray(payload.data) ? payload.data : [];
|
|
|
+ const { tree, flatDays } = normalizeDateListPayload(payload.list);
|
|
|
+ dateTree.value = tree;
|
|
|
+ selectedDate.value = '';
|
|
|
+ parseCustomerRows(rawCustomers);
|
|
|
+ const todayStr = formatTodayYMD();
|
|
|
+ if (flatDays.includes(todayStr)) {
|
|
|
+ selectedDate.value = todayStr;
|
|
|
+ selectedMonthKey.value = '';
|
|
|
+ selectedMonthStr.value = '';
|
|
|
+ nodeclick.value = null;
|
|
|
+ page.value = 1;
|
|
|
+ await loadByDate(todayStr);
|
|
|
+ }
|
|
|
+ applyFoldForSelectedDate(selectedDate.value);
|
|
|
+ console.log('左侧日期树:', dateTree.value, '可选日:', flatDays, '客户数:', customerList.value.length);
|
|
|
} else {
|
|
|
console.error('获取数据失败:', res.msg);
|
|
|
}
|
|
|
@@ -301,33 +488,99 @@ getTreeData();
|
|
|
const total = ref(0)
|
|
|
const page = ref(1)
|
|
|
const limit = ref(50)
|
|
|
-const nodeclick = ref('')
|
|
|
+const nodeclick = ref(null)
|
|
|
const hztableData = ref([])
|
|
|
-const handleNodeClick = async (nodeData) => {
|
|
|
-console.log('点击节点:', nodeData);
|
|
|
-nodeclick.value = nodeData
|
|
|
-// 根据节点类型处理不同逻辑
|
|
|
-if (nodeData.value.split('-').length === 1) {
|
|
|
- // 点击了年月节点
|
|
|
- console.log('选择了:', nodeData.label);
|
|
|
- const res = await CompletionWorkOrderCostList({code:nodeData.label.split('-->')[0],page:page.value,limit:limit.value})
|
|
|
- console.log(res)
|
|
|
- if(res.code === 0){
|
|
|
- hztableData.value = res.data.list
|
|
|
- total.value = res.data.total
|
|
|
+
|
|
|
+const loadByDate = async (d) => {
|
|
|
+ const res = await CompletionWorkOrderCostList({
|
|
|
+ Sys_rq: d,
|
|
|
+ code: '',
|
|
|
+ page: page.value,
|
|
|
+ limit: limit.value
|
|
|
+ });
|
|
|
+ if (res.code === 0) {
|
|
|
+ hztableData.value = res.data.list;
|
|
|
+ total.value = res.data.total;
|
|
|
}
|
|
|
-}
|
|
|
+};
|
|
|
+
|
|
|
+/** 点月份：Sys_rq 传月份（如 2026-04），code 为空 */
|
|
|
+const loadByMonth = async (monthStr) => {
|
|
|
+ const res = await CompletionWorkOrderCostList({
|
|
|
+ Sys_rq: String(monthStr),
|
|
|
+ code: '',
|
|
|
+ page: page.value,
|
|
|
+ limit: limit.value
|
|
|
+ });
|
|
|
+ if (res.code === 0) {
|
|
|
+ hztableData.value = res.data.list;
|
|
|
+ total.value = res.data.total;
|
|
|
+ }
|
|
|
+};
|
|
|
+
|
|
|
+const loadByCustomer = async (nodeData) => {
|
|
|
+ if (nodeData.value.split('-').length !== 1) return;
|
|
|
+ const res = await CompletionWorkOrderCostList({
|
|
|
+ code: nodeData.label.split('-->')[0],
|
|
|
+ page: page.value,
|
|
|
+ limit: limit.value
|
|
|
+ });
|
|
|
+ if (res.code === 0) {
|
|
|
+ hztableData.value = res.data.list;
|
|
|
+ total.value = res.data.total;
|
|
|
+ }
|
|
|
+};
|
|
|
+
|
|
|
+const reloadTableByCurrentSelection = async () => {
|
|
|
+ if (nodeclick.value) {
|
|
|
+ await loadByCustomer(nodeclick.value);
|
|
|
+ } else if (selectedDate.value) {
|
|
|
+ await loadByDate(selectedDate.value);
|
|
|
+ } else if (selectedMonthStr.value) {
|
|
|
+ await loadByMonth(selectedMonthStr.value);
|
|
|
+ }
|
|
|
+};
|
|
|
+
|
|
|
+const selectDate = async (d) => {
|
|
|
+ selectedDate.value = d;
|
|
|
+ selectedMonthKey.value = '';
|
|
|
+ selectedMonthStr.value = '';
|
|
|
+ nodeclick.value = null;
|
|
|
+ page.value = 1;
|
|
|
+ applyFoldForSelectedDate(d);
|
|
|
+ await loadByDate(d);
|
|
|
+};
|
|
|
+
|
|
|
+const selectMonth = async (yi, mi, m) => {
|
|
|
+ selectedDate.value = '';
|
|
|
+ selectedMonthKey.value = monthFoldKey(yi, mi);
|
|
|
+ selectedMonthStr.value = m.month;
|
|
|
+ nodeclick.value = null;
|
|
|
+ page.value = 1;
|
|
|
+ applyFoldForMonth(yi, mi);
|
|
|
+ await loadByMonth(m.month);
|
|
|
+};
|
|
|
+
|
|
|
+const handleCustomerClick = async (nodeData) => {
|
|
|
+ console.log('点击客户:', nodeData);
|
|
|
+ selectedDate.value = '';
|
|
|
+ selectedMonthKey.value = '';
|
|
|
+ selectedMonthStr.value = '';
|
|
|
+ applyFoldForSelectedDate('');
|
|
|
+ nodeclick.value = nodeData;
|
|
|
+ page.value = 1;
|
|
|
+ await loadByCustomer(nodeData);
|
|
|
};
|
|
|
|
|
|
const handleSizeChange = (val) => {
|
|
|
-limit.value = val;
|
|
|
-handleNodeClick(nodeclick.value);
|
|
|
-}
|
|
|
+ limit.value = val;
|
|
|
+ reloadTableByCurrentSelection();
|
|
|
+};
|
|
|
|
|
|
const handleCurrentChange = (val) => {
|
|
|
-page.value = val;
|
|
|
-handleNodeClick(nodeclick.value);
|
|
|
-}
|
|
|
+ page.value = val;
|
|
|
+ reloadTableByCurrentSelection();
|
|
|
+};
|
|
|
|
|
|
|
|
|
const searchInfo = ref('')
|
|
|
@@ -413,7 +666,6 @@ costlist.value = true;
|
|
|
// }
|
|
|
// }
|
|
|
|
|
|
-
|
|
|
</script>
|
|
|
|
|
|
<style scoped>
|
|
|
@@ -421,7 +673,6 @@ costlist.value = true;
|
|
|
display: flex;
|
|
|
flex-wrap: wrap;
|
|
|
}
|
|
|
-
|
|
|
.form-column {
|
|
|
/*flex: 1;*/
|
|
|
margin-right: 15px; /* 调整列之间的间距 */
|
|
|
@@ -440,7 +691,6 @@ costlist.value = true;
|
|
|
font-weight: bold;
|
|
|
}
|
|
|
|
|
|
-
|
|
|
/* 媒体查询，根据需要调整断点 */
|
|
|
@media screen and (max-width: 768px) {
|
|
|
.form-column {
|
|
|
@@ -448,40 +698,129 @@ costlist.value = true;
|
|
|
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;
|
|
|
}
|
|
|
+/* 侧栏不随右侧主区被 flex 拉高，避免列表下方大块留白 */
|
|
|
+.cost-order-sider {
|
|
|
+ align-self: flex-start;
|
|
|
+ height: auto !important;
|
|
|
+ min-height: 0;
|
|
|
+}
|
|
|
+.cost-order-tree {
|
|
|
+ max-height: 78vh;
|
|
|
+ overflow-y: auto;
|
|
|
+ box-sizing: border-box;
|
|
|
+ margin-right: 0;
|
|
|
+}
|
|
|
+.cost-order-main {
|
|
|
+ padding-left: 4px;
|
|
|
+}
|
|
|
+.formula-description {
|
|
|
+ padding-left: 12px;
|
|
|
+ box-sizing: border-box;
|
|
|
+}
|
|
|
.JKWTree-tree h3 {
|
|
|
font-size: 15px;
|
|
|
font-weight: 700;
|
|
|
margin: 10px 0;
|
|
|
}
|
|
|
+.cost-side-dates {
|
|
|
+ margin-bottom: 6px;
|
|
|
+}
|
|
|
+.cost-date-fold-hd {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 8px;
|
|
|
+ cursor: pointer;
|
|
|
+ user-select: none;
|
|
|
+ border-radius: 2px;
|
|
|
+ padding: 2px 6px 2px 4px;
|
|
|
+ margin: 0 -4px;
|
|
|
+ color: #303133;
|
|
|
+ transition: background-color 0.15s ease;
|
|
|
+}
|
|
|
+.cost-date-fold-hd:hover {
|
|
|
+ background: #f0f2f5;
|
|
|
+ color: #303133;
|
|
|
+}
|
|
|
+/* 树形列表常见样式：收起 ▶ 朝右，展开旋转朝下 */
|
|
|
+.cost-date-caret {
|
|
|
+ display: inline-block;
|
|
|
+ width: 0;
|
|
|
+ height: 0;
|
|
|
+ border-top: 5px solid transparent;
|
|
|
+ border-bottom: 5px solid transparent;
|
|
|
+ border-left: 6px solid #909399;
|
|
|
+ flex-shrink: 0;
|
|
|
+ transition: transform 0.15s ease;
|
|
|
+ transform: rotate(0deg);
|
|
|
+ transform-origin: 40% 50%;
|
|
|
+}
|
|
|
+.cost-date-caret.is-open {
|
|
|
+ transform: rotate(90deg);
|
|
|
+}
|
|
|
+.cost-date-fold-hd:hover .cost-date-caret {
|
|
|
+ border-left-color: #606266;
|
|
|
+}
|
|
|
+.cost-date-fold-body {
|
|
|
+ padding-left: 4px;
|
|
|
+}
|
|
|
+.cost-date-fold-days {
|
|
|
+ padding-left: 14px;
|
|
|
+}
|
|
|
+.cost-date-year {
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 700;
|
|
|
+ color: #303133;
|
|
|
+ line-height: 28px;
|
|
|
+ padding: 4px 4px 2px;
|
|
|
+}
|
|
|
+.cost-date-month {
|
|
|
+ font-size: 13px;
|
|
|
+ font-weight: 600;
|
|
|
+ color: #606266;
|
|
|
+ line-height: 24px;
|
|
|
+ padding: 2px 4px 2px 8px;
|
|
|
+}
|
|
|
+.cost-date-fold-hd.cost-date-month.is-current {
|
|
|
+ color: red !important;
|
|
|
+ font-weight: 700;
|
|
|
+}
|
|
|
+.cost-date-fold-hd.cost-date-month.is-current .cost-date-caret {
|
|
|
+ border-left-color: #c45656;
|
|
|
+}
|
|
|
+.cost-date-day {
|
|
|
+ padding-left: 6px;
|
|
|
+}
|
|
|
+.cost-side-node {
|
|
|
+ font-size: 14px;
|
|
|
+ color: #606266;
|
|
|
+ line-height: 26px;
|
|
|
+ padding: 0 4px;
|
|
|
+ cursor: pointer;
|
|
|
+ word-break: break-all;
|
|
|
+}
|
|
|
+.cost-side-node.is-current {
|
|
|
+ color: red;
|
|
|
+ font-weight: 700;
|
|
|
+}
|
|
|
.JKWTree-content {
|
|
|
flex: 1;
|
|
|
}
|
|
|
-
|
|
|
-
|
|
|
+:deep(.el-table td .cell) {
|
|
|
+ line-height: 20px !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;
|
