900 lines
32 KiB
Vue
900 lines
32 KiB
Vue
<template>
|
||
<!-- 基础页面 -->
|
||
<div class="app-container">
|
||
<el-card v-show="showSearch" style="margin-bottom: 20px">
|
||
<el-form :model="queryParams" ref="queryForm" :rules="outFormRules" inline label-width="110px">
|
||
|
||
<el-form-item label="需求单位" prop="useUnit">
|
||
<el-input style="width: 200px" v-model="queryParams.useUnit" placeholder="请输入需求单位"
|
||
:disabled="queryParams.status=='0'" clearable
|
||
/>
|
||
</el-form-item>
|
||
|
||
<el-form-item label="使用项目" prop="proCode">
|
||
<el-select
|
||
clearable
|
||
:disabled="!routerParams.isEdit"
|
||
style="width: 200px"
|
||
placeholder="请选择使用项目"
|
||
v-model="queryParams.proCode"
|
||
@change="onChangeProCode"
|
||
>
|
||
<el-option
|
||
:key="item.proCode"
|
||
:label="item.proName"
|
||
:value="item.proCode"
|
||
v-for="item in useProjectList"
|
||
/>
|
||
</el-select>
|
||
</el-form-item>
|
||
|
||
<el-form-item label="项目类型" prop="proType">
|
||
<el-input style="width: 200px" disabled v-model="queryParams.proType"/>
|
||
</el-form-item>
|
||
<el-form-item label="电压等级" prop="voltageLevel">
|
||
<el-input style="width: 200px" disabled v-model="queryParams.voltageLevel"/>
|
||
</el-form-item>
|
||
<el-form-item label="项目所在省" prop="proProvince">
|
||
<el-input style="width: 200px" disabled v-model="queryParams.proProvince"/>
|
||
</el-form-item>
|
||
<el-form-item label="项目所在市" prop="proCity">
|
||
<el-input style="width: 200px" disabled v-model="queryParams.proCity"/>
|
||
</el-form-item>
|
||
<el-form-item label="项目所在区/县" prop="proCounty">
|
||
<el-input style="width: 200px" disabled v-model="queryParams.proCounty"/>
|
||
</el-form-item>
|
||
|
||
<el-form-item label="使用日期" prop="useTime">
|
||
<el-date-picker
|
||
:disabled="!routerParams.isEdit"
|
||
v-model="queryParams.useTime"
|
||
type="date"
|
||
format="yyyy-MM-dd"
|
||
value-format="yyyy-MM-dd"
|
||
placeholder="选择日期"
|
||
style="width: 200px"
|
||
@change="useTimeChange"
|
||
>
|
||
</el-date-picker>
|
||
</el-form-item>
|
||
|
||
</el-form>
|
||
|
||
</el-card>
|
||
|
||
<el-card>
|
||
<el-row :gutter="10" class="mb8" justify="end">
|
||
<el-col :span="4">
|
||
<span style="font-size: 20px; font-weight: 800">自用申请列表</span>
|
||
</el-col>
|
||
<el-col v-if="!routerParams.isView" :span="20" style="display: flex; justify-content: flex-end">
|
||
<el-button type="primary" @click="handleDialog">添加</el-button>
|
||
<el-button type="primary" @click="submit">确定申请</el-button>
|
||
</el-col>
|
||
</el-row>
|
||
|
||
<el-table
|
||
v-loading="isLoading"
|
||
:data="tableList"
|
||
highlight-current-row
|
||
border
|
||
stripe
|
||
:max-height="650"
|
||
style="width: 100%"
|
||
>
|
||
<el-table-column
|
||
type="index"
|
||
width="55"
|
||
label="序号"
|
||
align="center"
|
||
/>
|
||
<el-table-column label="分类" align="center" prop="devType" :show-overflow-tooltip="true">
|
||
<template slot-scope="scope">
|
||
<span v-if="scope.row.devType==1">{{ '装备' }}</span>
|
||
<span v-if="scope.row.devType==2">{{ '工具' }}</span>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="类目" align="center" prop="category" :show-overflow-tooltip="true"/>
|
||
<el-table-column label="名称" align="center" prop="typeName" :show-overflow-tooltip="true" width="120px"/>
|
||
<el-table-column label="规格型号" align="center" prop="typeModelName" :show-overflow-tooltip="true"/>
|
||
<el-table-column label="管理模式" align="center" prop="manageType" :show-overflow-tooltip="true">
|
||
<template slot-scope="scope">
|
||
<span v-if="scope.row.manageType==0">{{ '编码设备' }}</span>
|
||
<span v-if="scope.row.manageType==1">{{ '数量设备' }}</span>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="设备编码" align="center" prop="devCode" :show-overflow-tooltip="true" width="140px"/>
|
||
<el-table-column label="当前库存" align="center" prop="storageNum" :show-overflow-tooltip="true"/>
|
||
<el-table-column label="申请数量" align="center" prop="num" :show-overflow-tooltip="true"/>
|
||
<el-table-column label="使用到期日期" align="center" prop="useTime" width="160px">
|
||
<template slot-scope="scope">
|
||
<el-date-picker
|
||
:disabled="!routerParams.isEdit"
|
||
v-model="scope.row.useTime"
|
||
type="date"
|
||
format="yyyy-MM-dd"
|
||
style="width: 100%"
|
||
placeholder="选择日期"
|
||
>
|
||
</el-date-picker>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="操作" align="center" v-if="!routerParams.isView">
|
||
<template slot-scope="{ row }">
|
||
<el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(row)" style="color: red"
|
||
>删除
|
||
</el-button
|
||
>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
</el-card>
|
||
|
||
<!-- 添加申请 -->
|
||
<el-dialog title="添加申请" :visible.sync="openAdd" width="1200px" append-to-body>
|
||
<el-form :model="addQuery" ref="addQueryForm" label-width="70px" inline>
|
||
<el-form-item label="名称" prop="typeName">
|
||
<el-input v-model="addQuery.typeName" maxlength="20" placeholder="请输入名称"/>
|
||
</el-form-item>
|
||
<el-form-item label="规格型号" prop="typeModelName">
|
||
<el-input v-model="addQuery.typeModelName" maxlength="20" placeholder="请输入规格型号"/>
|
||
</el-form-item>
|
||
<el-form-item label="编码" prop="devCode">
|
||
<el-input v-model="addQuery.devCode" maxlength="20" placeholder="请输入编码"/>
|
||
</el-form-item>
|
||
|
||
<!-- 新增：分类选择下拉框（装备/工具） -->
|
||
<el-form-item label="分类" prop="devType">
|
||
<el-select
|
||
v-model="addQuery.devType"
|
||
placeholder="请选择分类"
|
||
clearable
|
||
|
||
>
|
||
<el-option label="装备" value="1"/>
|
||
<el-option label="工具" value="2"/>
|
||
</el-select>
|
||
</el-form-item>
|
||
|
||
<!-- <el-form-item label="装备分类" prop="categoryPath">-->
|
||
<!-- <el-cascader-->
|
||
<!-- v-model="addQuery.categoryPath"-->
|
||
<!-- :options="processedTreeData"-->
|
||
<!-- :props="cascaderProps"-->
|
||
<!-- placeholder="请选择装备分类（最多六级）"-->
|
||
<!-- clearable-->
|
||
<!-- style="width: 100%"-->
|
||
<!-- filterable-->
|
||
<!-- popper-class="six-level-cascader"-->
|
||
<!-- @change="handleCategoryChange"-->
|
||
<!-- />-->
|
||
<!-- </el-form-item>-->
|
||
|
||
<!-- <el-form-item label="工具分类" prop="toolCategoryPath">-->
|
||
<!-- <el-cascader-->
|
||
<!-- v-model="addQuery.toolCategoryPath"-->
|
||
<!-- :options="toolTreeData"-->
|
||
<!-- :props="toolCascaderProps"-->
|
||
<!-- placeholder="请选择工具分类"-->
|
||
<!-- clearable-->
|
||
<!-- style="width: 100%"-->
|
||
<!-- filterable-->
|
||
<!-- popper-class="six-level-cascader"-->
|
||
<!-- @change="handleToolCategoryChange"-->
|
||
<!-- />-->
|
||
<!-- </el-form-item>-->
|
||
|
||
<el-form-item style="margin-left: 980px">
|
||
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleAddQuery">查询</el-button>
|
||
<el-button icon="el-icon-refresh" size="mini" @click="resetAddQuery">重置</el-button>
|
||
</el-form-item>
|
||
</el-form>
|
||
|
||
<el-row :gutter="10" class="mb8" justify="end">
|
||
<el-col style="display: flex; justify-content: flex-end">
|
||
<el-button type="primary" @click="saveAdd">确定添加</el-button>
|
||
</el-col>
|
||
</el-row>
|
||
|
||
<el-table ref="addTable" :data="addList" height="500" @selection-change="handleSelectionChange">
|
||
<el-table-column type="selection" width="55" align="center" :selectable="selectable"/>
|
||
<el-table-column label="序号" align="center" width="80" type="index">
|
||
<template slot-scope="scope">
|
||
<span>{{
|
||
(addQuery.pageNum - 1) * 10 + scope.$index + 1
|
||
}}</span>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="分类" align="center" prop="devType" :show-overflow-tooltip="true">
|
||
<template slot-scope="scope">
|
||
<span v-if="scope.row.devType==1">{{ '装备' }}</span>
|
||
<span v-if="scope.row.devType==2">{{ '工具' }}</span>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="类目" align="center" prop="category" :show-overflow-tooltip="true"/>
|
||
<el-table-column label="名称" align="center" prop="typeName" :show-overflow-tooltip="true"/>
|
||
<el-table-column label="规格型号" align="center" prop="typeModelName" :show-overflow-tooltip="true"/>
|
||
<el-table-column label="管理模式" align="center" prop="manageType" :show-overflow-tooltip="true">
|
||
<template slot-scope="scope">
|
||
<span v-if="scope.row.manageType==0">{{ '编码设备' }}</span>
|
||
<span v-if="scope.row.manageType==1">{{ '数量设备' }}</span>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="设备编码" align="center" prop="devCode" :show-overflow-tooltip="true" width="140px"/>
|
||
<el-table-column label="当前库存" align="center" prop="storageNum" :show-overflow-tooltip="true"/>
|
||
<el-table-column label="申请数量" align="center" prop="num">
|
||
<template slot-scope="scope">
|
||
<span v-if="scope.row.manageType==0">{{ 1 }}</span>
|
||
<el-input-number v-if="scope.row.manageType==1" :disabled="isRowSelected(scope.row)" v-model="scope.row.num"
|
||
:min="0" :max="scope.row.storageNum" :default-value="0" style="width: 120px"
|
||
@change="applyNumChange(scope.row)"
|
||
/>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
|
||
<pagination
|
||
v-show="addTotal > 0"
|
||
:total="addTotal"
|
||
:page.sync="addQuery.pageNum"
|
||
:limit.sync="addQuery.pageSize"
|
||
@pagination="getApplyList"
|
||
/>
|
||
</el-dialog>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import { getListByApplyIdApi, deleteToolApi, updateToolApplyApi } from '@/api/toolsManage'
|
||
import { getApplyListApi, addApplyApi, getApplyDetailsApi, editApplyApi } from '@/api/business'
|
||
import {
|
||
getUseProjectListAPI,
|
||
getVoltageListAPI,
|
||
addProjectOutAPI
|
||
} from '@/api/EquipmentLedger/equ-out'
|
||
import { regionData } from 'element-china-area-data'
|
||
import { getEquipmentTreeAPI } from '@/api/EquipmentConfig/index.js'
|
||
import { getTreeSelectApi } from '@/api/toolsManage/index.js' // 替换为实际工具接口路径
|
||
|
||
export default {
|
||
name: 'AddEditApply',
|
||
data() {
|
||
return {
|
||
routerParams: {},
|
||
isLoading: false,
|
||
showSearch: true,
|
||
timeRange: [],
|
||
processedTreeData: [], // 装备分类树
|
||
toolTreeData: [], // 工具分类树
|
||
// 装备分类级联配置
|
||
cascaderProps: {
|
||
value: 'id',
|
||
label: 'name',
|
||
children: 'children',
|
||
checkStrictly: true,
|
||
expandTrigger: 'click'
|
||
},
|
||
// 工具分类级联配置（匹配返回字段：typeId/typeName）
|
||
toolCascaderProps: {
|
||
value: 'typeId',
|
||
label: 'typeName',
|
||
children: 'children',
|
||
checkStrictly: true,
|
||
expandTrigger: 'click'
|
||
},
|
||
queryParams: {
|
||
type: 2, // 出库
|
||
status: '0', // 变更状态
|
||
proCode: '', // 使用项目id
|
||
proName: '', // 使用项目名称
|
||
proType: '', // 项目类型
|
||
voltageLevel: '', // 电压等级
|
||
proProvince: '', // 项目所在省
|
||
proCity: '', // 项目所在市
|
||
proCounty: '', // 项目所在区/县
|
||
proLocation: '', // 详细地址
|
||
useUnit: '', // 需求单位
|
||
useTime: null,
|
||
pageNum: 1, // 页码
|
||
pageSize: 10 // 每页条数
|
||
},
|
||
useProjectList: [], // 使用项目下拉选
|
||
voltageList: [], // 电压等级下拉选
|
||
provinceList: [],
|
||
cityList: [],
|
||
countyList: [],
|
||
|
||
outFormRules: {
|
||
status: [{ required: true, message: '请选择变更状态', trigger: 'change' }],
|
||
proCode: [{ required: true, message: '请选择使用项目', trigger: 'change' }],
|
||
proType: [{ required: true, message: '请选择项目类型', trigger: 'change' }],
|
||
voltageLevel: [{ required: true, message: '请选择电压等级', trigger: 'change' }],
|
||
proProvince: [{ required: true, message: '请选择项目所在省', trigger: 'change' }],
|
||
proCity: [{ required: true, message: '请选择项目所在市', trigger: 'change' }],
|
||
proCounty: [{ required: true, message: '请选择项目所在区/县', trigger: 'change' }],
|
||
proLocation: [{ required: true, message: '请输入详细地址', trigger: 'blur' }],
|
||
useUnit: [{ required: true, message: '请输入需求单位', trigger: 'blur' }],
|
||
|
||
},
|
||
|
||
typeList: [
|
||
{ label: '数量管理', value: '1' },
|
||
{ label: '编码管理', value: '0' }
|
||
],
|
||
total: 0, // 总条数
|
||
tableList: [], // 表格数据
|
||
openAdd: false, // 添加申请弹窗开关
|
||
addQuery: { // 页面输入的查询参数
|
||
typeName: '', // 名称
|
||
typeModelName: '', // 规格型号
|
||
devCode: '', // 设备编码
|
||
devType: '', // 核心：分类选择（1=装备，2=工具）
|
||
categoryPath: '', // 装备分类路径（数组）
|
||
toolCategoryPath: '', // 工具分类路径（数组）
|
||
pageNum: 1, // 页码
|
||
pageSize: 10 // 每页条数
|
||
},
|
||
filterParams: { // 存储筛选条件（分页时保留）
|
||
typeName: '',
|
||
typeModelName: '',
|
||
devCode: '',
|
||
categoryEquipment: '', // 装备分类ID（字符串）
|
||
toolTypeId: '', // 工具分类ID（字符串）
|
||
devType: '' // 筛选类型（1=装备，2=工具）
|
||
},
|
||
addTotal: 0, // 添加申请列表总条数
|
||
addList: [], // 添加申请列表数据
|
||
addTempList: [], // 添加申请临时列表
|
||
ids: [], // 选中的id
|
||
single: false, // 单选标识
|
||
multiple: false // 多选标识
|
||
}
|
||
},
|
||
created() {
|
||
this.routerParams = this.$route.query
|
||
let title = '新增申请'
|
||
if (this.routerParams.isView) {
|
||
title = '查看申请'
|
||
} else if (this.routerParams.isEdit) {
|
||
title = '编辑申请'
|
||
}
|
||
this.queryParams.id = this.routerParams.id || ''
|
||
this.getUseProjectList()
|
||
// 如果是新增状态，默认填充当前部门名称
|
||
if (this.queryParams.status === '0') {
|
||
this.queryParams.useUnit = sessionStorage.getItem('deptName')
|
||
}
|
||
this.provinceList = regionData
|
||
const obj = Object.assign({}, this.$route, { title })
|
||
this.$tab.updatePage(obj)
|
||
this.getList()
|
||
this.getEquipmentTree() // 初始化加载装备分类树
|
||
this.getToolTree() // 初始化加载工具分类树
|
||
},
|
||
methods: {
|
||
// 获取使用项目的下拉选
|
||
async getUseProjectList() {
|
||
try {
|
||
const [resProject, resVoltage] = await Promise.all([
|
||
getUseProjectListAPI(),
|
||
getVoltageListAPI()
|
||
]);
|
||
this.useProjectList = resProject.data || []
|
||
this.voltageList = resVoltage.data || []
|
||
} catch (error) {
|
||
this.$message.error('获取项目或电压等级列表失败');
|
||
console.error(error);
|
||
}
|
||
},
|
||
|
||
// 选择使用项目
|
||
onChangeProCode(value) {
|
||
this.queryParams.proCode = value
|
||
const item = this.useProjectList.find((item) => item.proCode === value)
|
||
if (item) {
|
||
this.queryParams.proName = item.proName
|
||
const { proTypeName, voltage, city, county, province } = item
|
||
this.queryParams.proType = proTypeName
|
||
this.queryParams.voltageLevel = voltage + 'kV'
|
||
this.queryParams.proProvince = province
|
||
this.queryParams.proCity = city
|
||
this.queryParams.proCounty = county
|
||
}
|
||
},
|
||
|
||
// 选择省份
|
||
onChangeProvince(value) {
|
||
if (!value) {
|
||
this.cityList = []
|
||
return
|
||
}
|
||
this.cityList = this.provinceList.find((item) => item.label === value)?.children || []
|
||
},
|
||
|
||
// 选择城市
|
||
onChangeCity(value) {
|
||
if (!value) {
|
||
this.countyList = []
|
||
return
|
||
}
|
||
this.countyList = this.cityList.find((item) => item.label === value)?.children || []
|
||
},
|
||
|
||
// 获取列表数据
|
||
async getList(emit = {}) {
|
||
if (emit.id) {
|
||
this.queryParams.id = emit.id
|
||
this.$route.query.id = this.queryParams.id
|
||
}
|
||
this.isLoading = true
|
||
try {
|
||
const params = { ...this.queryParams }
|
||
const res = await getApplyDetailsApi(params)
|
||
this.tableList = res.data.devDetailsList || []
|
||
if (this.queryParams.id) {
|
||
// 编辑或查看时，回填表单数据
|
||
Object.assign(this.queryParams, res.data.devInfo || {})
|
||
// 确保useTime是Date对象，防止Element UI日期选择器显示异常
|
||
if (this.queryParams.useTime) {
|
||
this.queryParams.useTime = new Date(this.queryParams.useTime);
|
||
}
|
||
}
|
||
this.total = res.data.total || 0
|
||
} catch (error) {
|
||
this.tableList = []
|
||
this.total = 0
|
||
this.$message.error('获取申请详情失败')
|
||
} finally {
|
||
this.isLoading = false
|
||
}
|
||
},
|
||
|
||
// 删除列表项
|
||
handleDelete(row) {
|
||
this.$confirm('此操作将永久删除该申请项, 是否继续?', '提示', {
|
||
confirmButtonText: '确定',
|
||
cancelButtonText: '取消',
|
||
type: 'warning'
|
||
}).then(() => {
|
||
this.tableList = this.tableList.filter((item) => item.id !== row.id)
|
||
this.$message({
|
||
type: 'success',
|
||
message: '删除成功!'
|
||
})
|
||
}).catch(() => {
|
||
// 用户点击取消，不做操作
|
||
});
|
||
},
|
||
|
||
// 打开添加申请弹窗
|
||
handleDialog() {
|
||
this.addQuery.pageNum = 1;
|
||
this.resetAddQuery(); // 打开时重置查询条件和分页
|
||
this.openAdd = true
|
||
// 确保弹窗打开后表格能正确渲染
|
||
this.$nextTick(() => {
|
||
if (this.$refs.addTable) {
|
||
this.$refs.addTable.clearSelection();
|
||
}
|
||
});
|
||
},
|
||
|
||
/**
|
||
* 分页回调：获取添加申请列表数据（整合devType筛选）
|
||
* @param {Object} pagination - 分页参数 { pageNum, pageSize }
|
||
*/
|
||
getApplyList(pagination = {}) {
|
||
// 合并分页参数，优先使用分页组件传递的参数
|
||
const pageNum = pagination.pageNum || this.addQuery.pageNum;
|
||
const pageSize = pagination.pageSize || this.addQuery.pageSize;
|
||
|
||
// 更新组件内的分页状态
|
||
this.addQuery.pageNum = pageNum;
|
||
this.addQuery.pageSize = pageSize;
|
||
|
||
// 构造完整的查询参数（包含devType）
|
||
const queryParams = {
|
||
...this.filterParams,
|
||
pageNum,
|
||
pageSize
|
||
};
|
||
|
||
this.isLoading = true;
|
||
|
||
getApplyListApi(queryParams)
|
||
.then(response => {
|
||
if (response && response.data) {
|
||
this.addList = response.data.rows || [];
|
||
this.addTotal = response.data.total || 0;
|
||
|
||
// 初始化申请数量
|
||
this.addList.forEach(item => {
|
||
item.num = item.manageType === 0 ? 1 : 0;
|
||
});
|
||
} else {
|
||
this.addList = [];
|
||
this.addTotal = 0;
|
||
this.$message.warning('获取数据格式异常');
|
||
}
|
||
})
|
||
.catch(error => {
|
||
this.addList = [];
|
||
this.addTotal = 0;
|
||
this.$message.error(`获取设备列表失败：${error.message || '未知错误'}`);
|
||
console.error('分页查询失败：', error);
|
||
})
|
||
.finally(() => {
|
||
this.isLoading = false;
|
||
});
|
||
},
|
||
|
||
/**
|
||
* 添加申请查询（核心：处理devType筛选逻辑）
|
||
*/
|
||
handleAddQuery() {
|
||
this.addQuery.pageNum = 1; // 查询时重置页码为1
|
||
|
||
const queryParams = { ...this.addQuery };
|
||
|
||
// 1. 处理devType（直接使用选择的分类值：1=装备，2=工具）
|
||
const devType = queryParams.devType || '';
|
||
|
||
// 2. 处理装备分类（仅当选择装备时生效）
|
||
let categoryEquipment = '';
|
||
if (devType === '1' && queryParams.categoryPath && Array.isArray(queryParams.categoryPath) && queryParams.categoryPath.length > 0) {
|
||
categoryEquipment = String(queryParams.categoryPath[queryParams.categoryPath.length - 1]);
|
||
}
|
||
|
||
// 3. 处理工具分类（仅当选择工具时生效）
|
||
let toolTypeId = '';
|
||
if (devType === '2' && queryParams.toolCategoryPath && Array.isArray(queryParams.toolCategoryPath) && queryParams.toolCategoryPath.length > 0) {
|
||
toolTypeId = String(queryParams.toolCategoryPath[queryParams.toolCategoryPath.length - 1]);
|
||
}
|
||
|
||
// 保存筛选条件（包含devType）
|
||
this.filterParams = {
|
||
typeName: queryParams.typeName,
|
||
typeModelName: queryParams.typeModelName,
|
||
devCode: queryParams.devCode,
|
||
categoryEquipment,
|
||
toolTypeId,
|
||
devType // 关键：将devType传递给后端筛选
|
||
};
|
||
|
||
// 调用分页查询方法
|
||
this.getApplyList({
|
||
pageNum: this.addQuery.pageNum,
|
||
pageSize: this.addQuery.pageSize
|
||
});
|
||
},
|
||
|
||
/**
|
||
* 重置添加申请查询条件（包含devType）
|
||
*/
|
||
resetAddQuery() {
|
||
this.addQuery = {
|
||
typeName: '',
|
||
typeModelName: '',
|
||
devCode: '',
|
||
devType: '', // 重置分类选择
|
||
categoryPath: '',
|
||
toolCategoryPath: '',
|
||
pageNum: 1,
|
||
pageSize: 10
|
||
};
|
||
|
||
// 同步重置筛选参数
|
||
this.filterParams = {
|
||
typeName: '',
|
||
typeModelName: '',
|
||
devCode: '',
|
||
categoryEquipment: '',
|
||
toolTypeId: '',
|
||
devType: '' // 重置devType筛选
|
||
};
|
||
|
||
// 重置后触发一次查询
|
||
this.getApplyList({ pageNum: 1, pageSize: this.addQuery.pageSize });
|
||
},
|
||
|
||
// 返回上一页
|
||
handleBack() {
|
||
this.$router.go(-1)
|
||
},
|
||
|
||
// 使用日期变化（批量设置表格中的使用日期）
|
||
useTimeChange(val) {
|
||
this.tableList.forEach(item => {
|
||
item.useTime = val
|
||
})
|
||
},
|
||
|
||
// 选择项变化（表格勾选时触发，保留devType）
|
||
handleSelectionChange(selection) {
|
||
this.addTempList = []
|
||
this.ids = selection.map(item => item.id)
|
||
selection.forEach(item => {
|
||
this.addTempList.push({
|
||
id: item.id,
|
||
typeId: item.typeId,
|
||
devType: item.devType, // 关键：保留分类类型（1=装备，2=工具）
|
||
category: item.category,
|
||
typeName: item.typeName,
|
||
typeModelName: item.typeModelName,
|
||
manageType: item.manageType,
|
||
devCode: item.devCode,
|
||
storageNum: item.storageNum,
|
||
num: item.manageType == 0 ? 1 : item.num, // 编码设备默认1，数量设备取输入值
|
||
useTime: this.queryParams.useTime ? new Date(this.queryParams.useTime) : null // 默认为主表单的使用日期
|
||
})
|
||
})
|
||
this.single = selection.length !== 1
|
||
this.multiple = !selection.length
|
||
},
|
||
|
||
// 表格选择框是否可勾选（库存为0或已添加过的不可选）
|
||
selectable(row) {
|
||
// 库存为0或null不可选
|
||
if (!row.storageNum || row.storageNum <= 0) {
|
||
return false
|
||
}
|
||
// 已在主列表中的不可选
|
||
return !this.tableList.some(item => item.id === row.id && item.typeId === row.typeId)
|
||
},
|
||
|
||
// 检查行是否被选中
|
||
isRowSelected(row) {
|
||
return this.ids.includes(row.id)
|
||
},
|
||
|
||
// 申请数量变化（校验：不能大于库存）
|
||
applyNumChange(row) {
|
||
if (row.num > row.storageNum) {
|
||
this.$message({
|
||
type: 'error',
|
||
message: '申请数量不能大于当前库存'
|
||
})
|
||
row.num = row.storageNum // 超过库存时，自动设为最大库存
|
||
} else if (row.num < 0) {
|
||
row.num = 0; // 防止输入负数
|
||
}
|
||
},
|
||
|
||
// 确认添加（将勾选的数据添加到主表格）
|
||
saveAdd() {
|
||
if (!this.ids.length) {
|
||
this.$message({
|
||
type: 'error',
|
||
message: '请勾选要添加的数据'
|
||
})
|
||
return
|
||
}
|
||
|
||
// 检查是否有数量设备未填写数量
|
||
const invalidItem = this.addTempList.find(item => item.manageType === 1 && (item.num === 0 || !item.num));
|
||
if (invalidItem) {
|
||
this.$message.error('请为数量管理的设备填写申请数量。');
|
||
return;
|
||
}
|
||
|
||
this.addTempList.forEach(item => {
|
||
this.tableList.push(item) // 数据包含devType字段
|
||
})
|
||
// 清除勾选状态
|
||
this.ids = []
|
||
this.addTempList = []
|
||
if (this.$refs.addTable) {
|
||
this.$refs.addTable.clearSelection()
|
||
}
|
||
this.openAdd = false
|
||
},
|
||
|
||
// 提交申请（新增/编辑，devType随数据传递）
|
||
// 提交
|
||
async submit() {
|
||
this.$refs.queryForm.validate(async(valid) => {
|
||
if (valid) {
|
||
this.$confirm('是否确定提交申请?', '提示', {
|
||
confirmButtonText: '确定',
|
||
cancelButtonText: '取消',
|
||
type: 'warning'
|
||
}).then(async() => {
|
||
this.isLoading = true
|
||
try {
|
||
//新增
|
||
if (!this.routerParams.id) {
|
||
this.queryParams.type = 2
|
||
this.queryParams.leaseType = 0
|
||
const tempTableList = this.tableList.map(item => ({
|
||
...item,
|
||
category: null
|
||
}))
|
||
const params = {
|
||
devInfo: this.queryParams,
|
||
devDetailsList: tempTableList
|
||
}
|
||
const res = await addApplyApi(params)
|
||
if (res.code == 200) {
|
||
this.$message({
|
||
type: 'success',
|
||
message: '添加成功!'
|
||
})
|
||
this.$router.go(-1)
|
||
// this.$tab.closeOpenPage({ path: '/business/applyList' })
|
||
}
|
||
} else if (this.routerParams.id) {
|
||
// 修改
|
||
this.queryParams.type = 2
|
||
this.queryParams.leaseType = 0
|
||
const tempTableList = this.tableList.map(item => ({
|
||
...item,
|
||
category: null
|
||
}))
|
||
const params = {
|
||
devInfo: this.queryParams,
|
||
devDetailsList: tempTableList
|
||
}
|
||
const res = await editApplyApi(params)
|
||
if (res.code == 200) {
|
||
this.$message({
|
||
type: 'success',
|
||
message: '修改成功!'
|
||
})
|
||
this.$router.go(-1)
|
||
// this.$tab.closeOpenPage({ path: '/business/applyList' })
|
||
}
|
||
}
|
||
|
||
} catch (error) {
|
||
console.log('🚀 ~ error:', error)
|
||
} finally {
|
||
this.isLoading = false
|
||
}
|
||
})
|
||
}
|
||
})
|
||
},
|
||
|
||
// 处理分类树数据（适配六级分类）
|
||
processTreeData(data) {
|
||
return Array.isArray(data) ? data : data ? [data] : []
|
||
},
|
||
|
||
// 递归处理装备分类节点（限制六级，补充level字段）
|
||
processChildrenData(data, currentLevel = 1) {
|
||
if (currentLevel > 6) return []
|
||
return data.map(item => {
|
||
const nodeId = item.typeId ? Number(item.typeId) : item.id ? Number(item.id) : ''
|
||
const processedItem = {
|
||
id: nodeId,
|
||
name: item.typeName || item.name,
|
||
level: currentLevel,
|
||
parentId: item.parentId ? Number(item.parentId) : null,
|
||
...item
|
||
}
|
||
// 六级以下不再递归
|
||
if (item.children && item.children.length > 0 && currentLevel < 6) {
|
||
processedItem.children = this.processChildrenData(item.children, currentLevel + 1)
|
||
} else {
|
||
delete processedItem.children
|
||
}
|
||
return processedItem
|
||
})
|
||
},
|
||
|
||
// 获取装备分类树数据
|
||
async getEquipmentTree() {
|
||
try {
|
||
const res = await getEquipmentTreeAPI()
|
||
if (res.code === 200) {
|
||
const rawTreeData = this.processTreeData(res.data)
|
||
this.processedTreeData = this.processChildrenData(rawTreeData)
|
||
} else {
|
||
this.$message.error(res.msg || '获取装备分类失败')
|
||
}
|
||
} catch (error) {
|
||
this.$message.error('获取分类数据失败：' + (error.message || '未知错误'))
|
||
}
|
||
},
|
||
|
||
// 获取工具分类树数据（适配返回字段，限制最多6级）
|
||
async getToolTree() {
|
||
try {
|
||
const res = await getTreeSelectApi()
|
||
if (res.code === 200) {
|
||
let rawData = res.data || []
|
||
this.toolTreeData = this.processToolTreeData(rawData)
|
||
} else {
|
||
this.$message.error(res.msg || '获取工具分类失败')
|
||
}
|
||
} catch (error) {
|
||
this.$message.error('获取工具分类数据失败：' + (error.message || '未知错误'))
|
||
}
|
||
},
|
||
|
||
// 递归处理工具分类节点（限制六级）
|
||
processToolTreeData(data, currentLevel = 1) {
|
||
if (currentLevel > 6) return []
|
||
return data.map(item => {
|
||
const processedItem = { ...item }
|
||
// 六级以下递归处理子节点
|
||
if (item.children && item.children.length > 0 && currentLevel < 6) {
|
||
processedItem.children = this.processToolTreeData(item.children, currentLevel + 1)
|
||
} else {
|
||
delete processedItem.children // 超过六级移除子节点
|
||
}
|
||
return processedItem
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
/* 六级分类级联选择器样式 */
|
||
::v-deep .six-level-cascader .el-cascader-menu {
|
||
max-height: 300px;
|
||
overflow-y: auto;
|
||
}
|
||
|
||
::v-deep .six-level-cascader .el-cascader-menu__item {
|
||
position: relative;
|
||
transition: all 0.2s;
|
||
}
|
||
|
||
/* 各级分类缩进差异化 */
|
||
::v-deep .six-level-cascader .el-cascader-menu[data-level='1'] .el-cascader-menu__item {
|
||
padding-left: 20px;
|
||
font-weight: 500;
|
||
}
|
||
|
||
::v-deep .six-level-cascader .el-cascader-menu[data-level='2'] .el-cascader-menu__item {
|
||
padding-left: 35px;
|
||
font-weight: 400;
|
||
}
|
||
|
||
::v-deep .six-level-cascader .el-cascader-menu[data-level='3'] .el-cascader-menu__item {
|
||
padding-left: 50px;
|
||
font-size: 13px;
|
||
}
|
||
|
||
::v-deep .six-level-cascader .el-cascader-menu[data-level='4'] .el-cascader-menu__item {
|
||
padding-left: 65px;
|
||
font-size: 13px;
|
||
color: #666;
|
||
}
|
||
|
||
::v-deep .six-level-cascader .el-cascader-menu[data-level='5'] .el-cascader-menu__item {
|
||
padding-left: 80px;
|
||
font-size: 12px;
|
||
color: #888;
|
||
}
|
||
|
||
::v-deep .six-level-cascader .el-cascader-menu[data-level='6'] .el-cascader-menu__item {
|
||
padding-left: 95px;
|
||
font-size: 12px;
|
||
color: #999;
|
||
background-color: #f8f9fa;
|
||
}
|
||
|
||
/* 隐藏七级及以上分类 */
|
||
::v-deep .six-level-cascader .el-cascader-menu[data-level='7'] .el-cascader-menu__item {
|
||
display: none;
|
||
}
|
||
|
||
/* 滚动条样式优化 */
|
||
::v-deep .six-level-cascader .el-cascader-menu::-webkit-scrollbar {
|
||
width: 6px;
|
||
}
|
||
|
||
::v-deep .six-level-cascader .el-cascader-menu::-webkit-scrollbar-track {
|
||
background: #f1f1f1;
|
||
border-radius: 3px;
|
||
}
|
||
|
||
::v-deep .six-level-cascader .el-cascader-menu::-webkit-scrollbar-thumb {
|
||
background: #c1c1c1;
|
||
border-radius: 3px;
|
||
}
|
||
</style>
|