bonus
/
bonus-ui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

代码提交

This commit is contained in:
jiang 2025-09-25 19:20:00 +08:00
parent d6f7b78587
commit 36ac1a77ef
11 changed files with 1026 additions and 1308 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
src/api/EquipmentEntryApply/index.js
View File

@ -202,3 +202,29 @@ export const qualityDeleteByIdApi = (data = {}) => {
})
}
export const firstLevel = (data = {}) => {
return request({
url: '/material-mall/order/firstLevel',
method: 'GET',
params: data
})
}
export const secondAndThirdLevel = (data = {}) => {
return request({
url: '/material-mall/order/secondAndThirdLevel',
method: 'GET',
params: data
})
}
export const fourthToSixthLevel = (data = {}) => {
return request({
url: '/material-mall/order/fourthToSixthLevel',
method: 'GET',
params: data
})
}

121
src/components/FileUpload/index.vue
View File

@ -1,6 +1,6 @@
<template>
<div class="upload-file">
<z
<el-upload
multiple
:action="uploadFileUrl"
:before-upload="handleBeforeUpload"
@ -19,11 +19,11 @@
<!-- 上传提示 -->
<div class="el-upload__tip" slot="tip" v-if="showTip">
请上传
<template v-if="fileSize"> 大小不超过 <b style="color: #f56c6c">{{ fileSize }}MB</b> </template>
<template v-if="fileType"> 格式为 <b style="color: #f56c6c">{{ fileType.join("/") }}</b> </template>
<template v-if="fileSize"> 大小不超过 <b style="color: #f56c6c">{{ fileSize }}MB</b></template>
<template v-if="fileType"> 格式为 <b style="color: #f56c6c">{{ fileType.join('、') }}</b></template>
的文件
</div>
</z>
</el-upload>
<!-- 文件列表 -->
<transition-group class="upload-file-list el-upload-list el-upload-list--text" name="el-fade-in-linear" tag="ul">
@ -40,27 +40,27 @@
</template>
<script>
import { getToken } from "@/utils/auth";
import { getToken } from '@/utils/auth'
export default {
name: "FileUpload",
name: 'FileUpload',
props: {
// 值
value: [String, Object, Array],
// 数量限制
limit: {
type: Number,
default: 5,
default: 5
},
// 大小限制(MB)
fileSize: {
type: Number,
default: 5,
default: 5
},
// 文件类型, 例如['png', 'jpg', 'jpeg']
fileType: {
type: Array,
default: () => ["doc", "xls", "ppt", "txt", "pdf"],
default: () => ['doc', 'xls', 'ppt', 'txt', 'pdf']
},
// 是否显示提示
isShowTip: {
@ -72,31 +72,31 @@ export default {
return {
number: 0,
uploadList: [],
uploadFileUrl: process.env.VUE_APP_BASE_API + "/file/upload", // 上传文件服务器地址
uploadFileUrl: process.env.VUE_APP_BASE_API + '/file/upload', // 上传文件服务器地址
headers: {
Authorization: "Bearer " + getToken()
Authorization: 'Bearer ' + getToken()
},
fileList: [],
};
fileList: []
}
},
watch: {
value: {
handler(val) {
if (val) {
let temp = 1;
let temp = 1
// 首先将值转为数组
const list = Array.isArray(val) ? val : this.value.split(',');
const list = Array.isArray(val) ? val : this.value.split(',')
// 然后将数组转为对象数组
this.fileList = list.map(item => {
if (typeof item === "string") {
item = { name: item, url: item };
if (typeof item === 'string') {
item = { name: item, url: item }
}
item.uid = item.uid || new Date().getTime() + temp++;
return item;
});
item.uid = item.uid || new Date().getTime() + temp++
return item
})
} else {
this.fileList = [];
return [];
this.fileList = []
return []
}
},
deep: true,
@ -106,109 +106,112 @@ export default {
computed: {
// 是否显示提示
showTip() {
return this.isShowTip && (this.fileType || this.fileSize);
},
return this.isShowTip && (this.fileType || this.fileSize)
}
},
methods: {
// 上传前校检格式和大小
handleBeforeUpload(file) {
// 校检文件类型
if (this.fileType) {
const fileName = file.name.split('.');
const fileExt = fileName[fileName.length - 1];
const isTypeOk = this.fileType.indexOf(fileExt) >= 0;
const fileName = file.name.split('.')
const fileExt = fileName[fileName.length - 1]
const isTypeOk = this.fileType.indexOf(fileExt) >= 0
if (!isTypeOk) {
this.$modal.msgError(`文件格式不正确, 请上传${this.fileType.join("/")}格式文件!`);
return false;
this.$modal.msgError(`文件格式不正确, 请上传${this.fileType.join('/')}格式文件!`)
return false
}
}
// 校检文件大小
if (this.fileSize) {
const isLt = file.size / 1024 / 1024 < this.fileSize;
const isLt = file.size / 1024 / 1024 < this.fileSize
if (!isLt) {
this.$modal.msgError(`上传文件大小不能超过 ${this.fileSize} MB!`);
return false;
this.$modal.msgError(`上传文件大小不能超过 ${this.fileSize} MB!`)
return false
}
}
this.$modal.loading("正在上传文件，请稍候...");
this.number++;
return true;
this.$modal.loading('正在上传文件，请稍候...')
this.number++
return true
},
// 文件个数超出
handleExceed() {
this.$modal.msgError(`上传文件数量不能超过 ${this.limit} 个!`);
this.$modal.msgError(`上传文件数量不能超过 ${this.limit} 个!`)
},
// 上传失败
handleUploadError(err) {
this.$modal.msgError("上传文件失败，请重试");
this.$modal.msgError('上传文件失败，请重试')
this.$modal.closeLoading()
},
// 上传成功回调
handleUploadSuccess(res, file) {
if (res.code === 200) {
this.uploadList.push({ name: res.data.url, url: res.data.url });
this.uploadedSuccessfully();
this.uploadList.push({ name: res.data.url, url: res.data.url })
this.uploadedSuccessfully()
} else {
this.number--;
this.$modal.closeLoading();
this.$modal.msgError(res.msg);
this.$refs.fileUpload.handleRemove(file);
this.uploadedSuccessfully();
this.number--
this.$modal.closeLoading()
this.$modal.msgError(res.msg)
this.$refs.fileUpload.handleRemove(file)
this.uploadedSuccessfully()
}
},
// 删除文件
handleDelete(index) {
this.fileList.splice(index, 1);
this.$emit("input", this.listToString(this.fileList));
this.fileList.splice(index, 1)
this.$emit('input', this.listToString(this.fileList))
},
// 上传结束处理
uploadedSuccessfully() {
if (this.number > 0 && this.uploadList.length === this.number) {
this.fileList = this.fileList.concat(this.uploadList);
this.uploadList = [];
this.number = 0;
this.$emit("input", this.listToString(this.fileList));
this.$modal.closeLoading();
this.fileList = this.fileList.concat(this.uploadList)
this.uploadList = []
this.number = 0
this.$emit('input', this.listToString(this.fileList))
this.$modal.closeLoading()
}
},
// 获取文件名称
getFileName(name) {
// 如果是url那么取最后的名字 如果不是直接返回
if (name.lastIndexOf("/") > -1) {
return name.slice(name.lastIndexOf("/") + 1);
if (name.lastIndexOf('/') > -1) {
return name.slice(name.lastIndexOf('/') + 1)
} else {
return name;
return name
}
},
// 对象转成指定字符串分隔
listToString(list, separator) {
let strs = "";
separator = separator || ",";
let strs = ''
separator = separator || ','
for (let i in list) {
strs += list[i].url + separator;
strs += list[i].url + separator
}
return strs != '' ? strs.substr(0, strs.length - 1) : '';
return strs != '' ? strs.substr(0, strs.length - 1) : ''
}
}
};
}
</script>
<style scoped lang="scss">
.upload-file-uploader {
margin-bottom: 5px;
}
.upload-file-list .el-upload-list__item {
border: 1px solid #e4e7ed;
line-height: 2;
margin-bottom: 10px;
position: relative;
}
.upload-file-list .ele-upload-list__item-content {
display: flex;
justify-content: space-between;
align-items: center;
color: inherit;
}
.ele-upload-list__item-content-action .el-link {
margin-right: 10px;
}

2
src/components/ImageUpload/index.vue
View File

@ -24,7 +24,7 @@
<div class="el-upload__tip" slot="tip" v-if="showTip">
请上传
<template v-if="fileSize"> 大小不超过 <b style="color: #f56c6c">{{ fileSize }}MB</b> </template>
<template v-if="fileType"> 格式为 <b style="color: #f56c6c">{{ fileType.join("/") }}</b> </template>
<template v-if="fileType"> 格式为 <b style="color: #f56c6c">{{ fileType.join("、") }}</b> </template>
的文件
</div>

29
src/router/index.js
View File

@ -270,6 +270,35 @@ export const dynamicRoutes = [
}
]
},
{
path: '/equipment/equipment-input',
component: Layout,
hidden: true,
permissions: ['system:dict:list'],
children: [
{
path: 'index',
component: () => import('@/views/EquipmentEntryApply/equipmentInput/index'),
name: 'equipmentInput',
meta: { title: '装备录入', activeMenu: '/equipment/equipment-input' }
}
]
},
{
path: '/equipment/equipment-input',
component: Layout,
hidden: true,
permissions: ['system:dict:list'],
children: [
{
path: 'add',
component: () => import('@/views/EquipmentEntryApply/equipmentInput/add'),
name: 'equipmentInputAdd',
meta: { title: '新增装备', activeMenu: '/equipment/equipment-input' }
}
]
},
{
path: '/face/face-data',
component: Layout,

6
src/utils/drawMixin.js
View File

@ -36,9 +36,9 @@ export default {
// 调试模式 - start
if (DEBUG_MODE) {
// 调试模式，不缩放，居中显示
// appRef.style.transform = `translate(-25%, -45%) scale(0.9, 0.9)`
// appRef.style.overflow = 'visible'
// return
appRef.style.transform = `translate(-25%, -45%) scale(0.9, 0.9)`
appRef.style.overflow = 'visible'
return
}
// 调试模式 - end

543
src/views/EquipmentEntryApply/equipmentInput/add.vue Normal file
View File

@ -0,0 +1,543 @@
<template>
<!-- 弹窗内容区域 -->
<div class="app-container" style="height: calc(100vh - 84px);overflow-y:unset">
<div class="page-header">
<div>
<i class="el-icon-arrow-left goBack-btn" @click="goBack"
style="border-color: transparent;color: #00a288;background: transparent;padding-left: 0;padding-right: 0;"
>返回</i>
<span class="page-title">新增装备</span>
</div>
<div class="dialog-footer" style="float: right">
<el-button size="medium" @click="goBack">取消</el-button>
<el-button type="primary" size="medium" @click="handleSubmit">确认</el-button>
</div>
</div>
<el-form
label-width="110px"
ref="formRef"
style="padding: 12px;overflow-y: auto;height: calc(100vh - 180px);width: 100%"
label-position="right"
:model="form"
:rules="equipRules"
>
<div style="display:flex;padding-bottom: 5px">
<div style="width: 5px;background-color: #00a288;margin-right: 10px"></div>
基础信息
</div>
<el-row :gutter="24" style="padding-top: 10px">
<el-col :span="6">
<el-form-item label="专业" prop="major">
<el-select v-model="form.major" placeholder="请选择专业" @change="majorChange" style="width: 100%"
clearable
>
<el-option
v-for="item in majorList"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="工序" prop="process">
<el-cascader style="width: 100%" clearable
v-model="form.process"
placeholder="请选择工序"
:options="processList"
@change="processChange"
></el-cascader>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="装备类目" prop="category">
<el-cascader style="width: 100%" clearable
v-model="form.category"
:options="categoryList"
placeholder="请选择装备类目"
@change="categoryChange"
></el-cascader>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="装备名称" prop="deviceName">
<el-input
autocomplete="off"
maxlength="30"
placeholder="请输入装备名称"
v-model="form.deviceName"
clearable
/>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="24">
<el-col :span="6">
<el-form-item label="规格型号" prop="itemTypeModel">
<el-input
autocomplete="off"
maxlength="30"
v-model="form.itemTypeModel"
placeholder="请输入规格型号"
clearable
/>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="资产原值" prop="buyPrice">
<el-input
@input="handlePriceInput"
autocomplete="off"
maxlength="20"
v-model="form.buyPrice"
placeholder="请输入资产原值"
clearable
/>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="出厂日期" prop="productionDate">
<el-date-picker
v-model="form.productionDate"
placeholder="请选择出厂日期"
value-format="yyyy-MM-DD"
type="date"
style="width: 100%"
>
</el-date-picker>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="生产厂家" prop="brand">
<el-input
v-model="form.brand"
autocomplete="off"
placeholder="请输入生产厂家"
maxlength="20"
clearable
/>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="24">
<el-col :span="6">
<el-form-item label="装备原始编码" prop="identifyCode">
<el-input
clearable
maxlength="20"
placeholder="请输入装备原始编码"
v-model="form.identifyCode"
/>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="下次维保日期" prop="nextCheckTime">
<el-date-picker
v-model="form.nextCheckTime"
placeholder="请选择下次维保日期"
value-format="yyyy-MM-DD"
type="date"
style="width: 100%"
>
</el-date-picker>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="装备寿命" prop="lifespan">
<el-input
clearable
maxlength="20"
placeholder="请输入装备寿命"
v-model="form.lifespan"
/>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="管理模式" prop="deviceType">
<el-select
v-model="form.deviceType"
placeholder="请选择管理方式"
clearable
@change="deviceTypeChange"
style="width: 100%"
>
<el-option label="编码" :value="0"/>
<el-option label="数量" :value="1"/>
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="24">
<el-col :span="6">
<el-form-item label="装备数量" prop="deviceCount">
<el-input
v-model="form.deviceCount"
placeholder="请输入装备数量"
clearable
maxlength="10"
/>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="计数单位" prop="unitName">
<el-input
v-model="form.unitName"
placeholder="请输入计数单位"
clearable
maxlength="11"
/>
</el-form-item>
</el-col>
</el-row>
<div style="display:flex;padding-bottom: 10px">
<div style="width: 5px;background-color: #00a288;margin-right: 10px"></div>
特征属性
</div>
<el-row :gutter="24" style="padding-top: 10px">
<el-col :span="6">
<el-form-item label="专业特征" prop="specialtyFeature">
<el-input
autocomplete="off"
maxlength="30"
v-model="form.specialtyFeature"
clearable
/>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="工序特征" prop="processFeature">
<el-input
autocomplete="off"
maxlength="30"
v-model="form.processFeature"
clearable
/>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="类目特征" prop="categoryFeature">
<el-input
autocomplete="off"
maxlength="30"
v-model="form.categoryFeature"
clearable
/>
</el-form-item>
</el-col>
</el-row>
<div style="display:flex;padding-bottom: 10px">
<div style="width: 5px;background-color: #00a288;margin-right: 10px"></div>
装备图片
</div>
<el-row :gutter="24" style="padding-top: 10px">
<el-col>
<el-form-item label="展示图" prop="mainFileList">
<ImageUpload
v-model="form.mainFileList"
:value="form.mainFileList"
:limit="6"
@change="handleImageChange"
/>
</el-form-item>
</el-col>
</el-row>
<div style="display:flex;padding-bottom: 10px">
<div style="width: 5px;background-color: #00a288;margin-right: 10px"></div>
相关证书
</div>
<el-row :gutter="24" style="padding-top: 10px">
<el-col>
<el-form-item label="合格证" prop="certificateList">
<FileUpload
v-model="form.certificateList"
:value="form.certificateList"
:limit="3"
:fileSize="10"
:fileType="['doc','docx', 'ppt','pdf']"
@change="handleCertificateChange"
/>
</el-form-item>
<el-form-item label="检测证书" prop="inspectionList">
<FileUpload
v-model="form.inspectionList"
:value="form.inspectionList"
:limit="3"
:fileSize="10"
:fileType="['doc','docx', 'ppt','pdf']"
@change="handleInspectionChange"
/>
</el-form-item>
</el-col>
</el-row>
</el-form>
</div>
</template>
<script>
import {
equipmentAddApiNew,
getEquipmentAddIdApi,
firstLevel,
secondAndThirdLevel,
fourthToSixthLevel
} from '@/api/EquipmentEntryApply'
import ImageUpload from '@/components/ImageUpload'
import FileUpload from '@/components/ImageUpload'
export default {
name: 'EquipmentEntryEditDialog', // 明确组件名称
emits: ['update:isVisible', 'submit', 'getOrderId'], // 声明事件
data() {
return {
// 下拉列表数据
majorList: [],
processList: [],
categoryList: [],
form: {
major: '', // 专业
process: '', // 工序
category: '', // 类目
deviceName: '', // 装备名称
itemTypeModel: '', // 规格型号
buyPrice: '', // 资产原值
productionDate: '', // 出厂日期
brand: '', // 生产厂家
identifyCode: '', // 装备原始编码
nextCheckTime: '', // 下次维保日期
lifespan: '', // 装备寿命
deviceType: '', // 管理模式
deviceCount: 1, // 装备数量
unitName: '', // 计数单位
specialtyFeature: '', // 专业特征
processFeature: '', // 工序特征
categoryFeature: '', // 类目特征
deviceTypeList: [], // 装备类型列表
mainFileList: [], // 展示图
certificateList: [], // 合格证
inspectionList: [] // 检测证书
},
// 表单校验规则（所有字段均为必填）
equipRules: {
major: [
{ required: true, message: '请选择专业', trigger: 'change' }
],
process: [
{ required: true, message: '请选择工序', trigger: 'change' }
],
category: [
{ required: true, message: '请选择装备类目', trigger: 'change' }
],
deviceName: [
{ required: true, message: '请输入装备名称', trigger: 'blur' }
],
itemTypeModel: [
{ required: true, message: '请输入规格型号', trigger: 'blur' }
],
buyPrice: [
{ required: true, message: '请输入资产原值', trigger: 'blur' }
],
productionDate: [
{ required: true, message: '请选择出厂日期', trigger: 'change' }
],
brand: [
{ required: true, message: '请输入生产厂家', trigger: 'blur' }
],
identifyCode: [
{ required: true, message: '请输入装备原始编码', trigger: 'blur' }
],
nextCheckTime: [
{ required: true, message: '请选择下次维保日期', trigger: 'change' }
],
lifespan: [
{ required: true, message: '请输入装备寿命', trigger: 'blur' }
],
deviceType: [
{ required: true, message: '请选择管理方式', trigger: 'change' }
],
deviceCount: [
{ required: true, message: '请输入装备数量', trigger: 'blur' }
],
unitName: [
{ required: true, message: '请输入计数单位', trigger: 'blur' }
],
deviceTypeList: [
{ required: true, message: '请选择装备类型', trigger: 'change' }
],
certificateList: [
{ required: true, message: '请上传合格证', trigger: 'change' }
],
inspectionList: [
{ required: true, message: '请上传检测证书', trigger: 'change' }
]
}
}
},
created() {
this.firstLevel()
},
methods: {
/**
* 获取一级类型
*/
firstLevel() {
firstLevel().then(res => {
if (res.code === 200) {
this.majorList = res.data
}
})
},
majorChange(item) {
if (!item) {
this.processList = []
this.form.process = ''
} else {
secondAndThirdLevel({ firstLevelId: item }).then(res => {
if (res.code === 200) {
this.processList = this.convertToSubTree(res.data)
}
})
}
},
processChange(item) {
if (item.length === 0) {
this.categoryList = []
this.form.category = ''
} else {
fourthToSixthLevel({ thirdLevelId: item[item.length - 1] }).then(res => {
if (res.code === 200) {
this.categoryList = this.convertToSubTree(res.data)
}
})
}
},
categoryChange(item) {
},
// 返回上一页
goBack() {
this.$router.go(-1)
},
deviceTypeChange(val) {
if (val === 0) {
this.form.deviceCount = '1'
}
},
// 价格输入处理
handlePriceInput(v) {
this.form.buyPrice = v.replace(/[^\d.]/g, '')
},
// 处理图片上传变化
handleImageChange(files) {
this.form.mainFileList = files
this.$refs.formRef.validateField('mainFileList')
},
// 处理合格证上传变化
handleCertificateChange(files) {
this.form.certificateList = files
this.$refs.formRef.validateField('certificateList')
},
// 处理检测证书上传变化
handleInspectionChange(files) {
this.form.inspectionList = files
this.$refs.formRef.validateField('inspectionList')
},
/**
* 处理表单提交
*/
async handleSubmit() {
console.log(this.form)
this.$refs['formRef'].validate(async valid => {
if (valid) {
const result = await getEquipmentAddIdApi()
this.orderId = result.data.id
this.form.orderId = this.orderId
// 获取数组最后一个元素（最末级分类ID）
this.form.typeId = this.form.deviceTypeList[this.form.deviceTypeList.length - 1]
const res = await equipmentAddApiNew(this.form)
if (res.code === 200) {
this.goBack()
}
}
}
)
},
/**
* 转换类型数据为树形结构（适用于级联选择器）
*/
convertToSubTree(list) {
const map = {}
const tree = []
// 构建节点映射
list.forEach(item => {
map[item.value] = {
value: item.value.toString(),
label: item.label
}
})
// 构建树形关系
list.forEach(item => {
const current = map[item.value]
const parent = map[item.parentId]
if (parent) {
if (!parent.children) {
parent.children = []
}
parent.children.push(current)
} else {
tree.push(current)
}
})
return tree
}
}
}
</script>
<style lang="scss" scoped>
.page-header {
display: flex;
align-items: center;
margin-bottom: 20px;
padding-bottom: 15px;
font-size: 18px;
border-bottom: 1px solid #e6e6e6;
justify-content: space-between;
.page-title {
font-size: 18px;
font-weight: 600;
margin-left: 15px;
color: #303133;
}
}
.dialog-content {
padding: 10px 0;
min-height: 200px; // 确保有足够高度
}
.goBack-btn:hover {
cursor: pointer;
color: #33b5a0;
}
.dialog-footer {
display: flex;
justify-content: flex-end;
gap: 10px; // 按钮间距
}
</style>

8
src/views/EquipmentEntryApply/equipmentInput/edit.vue
View File

@ -238,11 +238,11 @@ export default {
orderId: ''
},// 表单校验规则（已移除文件相关校验）
equipRules: {
originaValue: [
{ required: true, message: '请输入原值', trigger: 'blur' }
major: [
{ required: true, message: '请选择专业', trigger: 'change' }
],
buyPrice: [
{ required: true, message: '请输入原值', trigger: 'blur' }
process: [
{ required: true, message: '请选择工序', trigger: 'change' }
],
itemTypeModel: [
{ required: true, message: '请输入规格型号', trigger: 'blur' }

1371
src/views/EquipmentEntryApply/equipmentInput/index.vue
View File

File diff suppressed because it is too large Load Diff

90
src/views/EquipmentEntryApply/index.vue
View File

@ -19,7 +19,7 @@
v-model="queryParams.status"
>
<el-option label="待审批" value="0"/>
<el-option label="已审批" value="2"/>
<el-option label="已审批" value="1"/>
</el-select>
</el-form-item>
</el-col>
@ -34,7 +34,7 @@
/>
</el-form-item>
</el-col>
<el-col :span="5" style="float:right;">
<el-col :span="4" style="float:right;">
<el-form-item>
<el-button class="primary-lease" type="primary" @click="getEquipmentApplyList">
查询
@ -61,27 +61,35 @@
<el-table-column prop="devCount" label="设备数量" align="center"/>
<el-table-column prop="status" align="center" label="审批状态">
<template slot-scope="{ row }">
<el-tag v-if="row.status == 0" size="small" type="info">待审批</el-tag>
<el-tag v-if="row.status == 1" size="small" type="warning">已审批</el-tag>
<el-tag v-if="row.status == 3" size="small" type="success">草稿</el-tag>
<el-tag v-if="row.status == 0" size="small" type="warning">审批中</el-tag>
<el-tag v-if="row.status == 1" size="small" type="success">已审批</el-tag>
<el-tag v-if="row.status == 3" size="small" type="info">草稿</el-tag>
</template>
</el-table-column>
<el-table-column label="操作" align="center">
<el-table-column prop="agree" label="已通过数量" align="center"/>
<el-table-column prop="reject" label="已驳回数量" align="center"/>
<el-table-column label="操作" align="center" min-width="100">
<template slot-scope="{ row }">
<el-button type="primary" size="small" @click="showEquipmentInput(row.id, true)">
查看
<el-button type="success" size="mini" @click="showEquipmentInput(row.id, true)">
<i class="el-icon-view"></i> 查看
</el-button>
<el-button
type="primary"
size="small"
size="mini"
@click="showEquipmentInput(row.id, false)"
v-if="row.status == '3'"
v-if="row.status === '3'"
>
编辑
<i class="el-icon-edit"></i> 编辑
</el-button>
<!-- <el-button type="primary" size="small" v-if="row.status == '0'" @click="deleteItem(row)">
删除
</el-button>-->
<el-button
type="danger"
size="mini"
@click="deleteItem(row)"
v-if="row.status === '3'"
>
<i class="el-icon-delete"></i> 删除
</el-button>
</template>
</el-table-column>
</el-table>
@ -95,19 +103,19 @@
/>
</el-form>
</template>
<EquipmentEntryDialog
:is-visible.sync="isVisible"
:order-id="orderId"
:is-add-visible="isAddVisible"
:is-approval-visible="true"
@submit="getEquipmentApplyList"
/>
<!-- <EquipmentEntryDialog
:is-visible.sync="isVisible"
:order-id="orderId"
:is-add-visible="isAddVisible"
:is-approval-visible="true"
@submit="getEquipmentApplyList"
/>-->
</div>
</template>
<script>
import { getEquipmentApplyListApi, equipmentDelApiNew } from '@/api/EquipmentEntryApply/index'
import EquipmentEntryDialog from '@/views/EquipmentEntryApply/equipmentInput/index1.vue'
import EquipmentEntryDialog from '@/views/EquipmentEntryApply/equipmentInput/index.vue'
export default {
components: {
@ -165,11 +173,23 @@ export default {
/**
* 显示装备录入/编辑/查看界面
*/
showEquipmentInput(orderId, isAddVisible) {
this.orderId = orderId
this.isVisible = true
this.isAddVisible = isAddVisible
/* showEquipmentInput(orderId, isAddVisible) {
this.orderId = orderId
this.isVisible = true
this.isAddVisible = isAddVisible
}, */
// 点击事件处理函数 - 实现页面跳转
showEquipmentInput(orderId, isAddVisible) {
this.$router.push({
name: 'equipmentInput', // 完整路径
params: { // 因为使用path，所以用query传递参数
orderId: orderId,
isAddVisible: isAddVisible,
isApprovalVisible: false
}
})
},
/**
@ -203,6 +223,24 @@ export default {
</script>
<style scoped lang="scss">
.view-btn {
color: #409eff;
font-size: 14px;
font-weight: bold;
}
.edit-btn {
color: #67c23a;
font-size: 12px;
font-weight: bold;
}
.delete-btn {
color: #f56c6c;
font-size: 16px;
font-weight: bold;
}
.app-container {
padding: 20px;
}

2
src/views/EquipmentEntryApproval/index.vue
View File

@ -95,7 +95,7 @@
<script>
import { getEquipmentApplyListApi, equipmentDelApiNew } from '@/api/EquipmentEntryApply/index'
import EquipmentEntryDialog from '@/views/EquipmentEntryApply/equipmentInput/index1.vue'
import EquipmentEntryDialog from '@/views/EquipmentEntryApply/equipmentInput/index.vue'
export default {
components: {

136
src/views/EquipmentLedger/index.vue
View File

@ -1,12 +1,15 @@
<template>
<div class="app-container">
<el-row :gutter="20" class="main-content">
<el-col :span="5">
<div class="card-container">
<div class="card-header">
<el-row :gutter="24" class="main-content" type="justify">
<el-col :span="collapsed ? 1: 5" class="tree-column">
<div class="card-container" v-if="!collapsed">
<div class="card-header" v-if="!collapsed">
<!-- 只有在未折叠状态显示标题 -->
<span class="card-title">装备分类</span>
</div>
<!-- 树组件，折叠时隐藏 -->
<el-tree
v-if="!collapsed"
:data="treeData"
:props="defaultProps"
:indent="6"
@ -15,11 +18,22 @@
class="tree-container"
:loading="treeLoading"
/>
</div>
<div style="position: relative;width:20px;height: calc(100vh - 130px);margin-left: 5px">
<!-- 右侧折叠/展开按钮 -->
<el-button
icon="el-icon-d-arrow-left"
size="mini"
@click="toggleCollapse"
class="collapse-btn"
:icon="collapsed ? 'el-icon-d-arrow-right' : 'el-icon-d-arrow-left'"
/>
</div>
</el-col>
<!-- 右侧列表和查询区域 -->
<el-col :span="19" style="height: calc(100vh - 130px);">
<el-col :span="collapsed ?23:19" style="height: calc(100vh - 130px);transition: all 0.3s ease;">
<div class="card-container">
<div class="card-header">
@ -218,21 +232,6 @@
@selection-change="handleSelectionChange"
:loading="tableLoading"
>
<el-table-column type="expand">
<template slot-scope="props">
<el-row :gutter="24" v-for="item in props.row.propertyVoList">
<el-col :span="8" v-show="item.propertyName && item.propertyValue"
style="font-size: 16px;padding: 10px;margin-left: 60px"
>
{{ item.propertyName }} : {{ item.propertyValue }}
</el-col>
</el-row>
</template>
</el-table-column>
<el-table-column
align="center"
show-overflow-tooltip
@ -324,6 +323,41 @@
/>
<el-table-column align="center" show-overflow-tooltip prop="brand" label="生产厂商" min-width="300"
/>
<!-- 动态生成特征项和特征值列 -->
<template v-for="item in tableColumns">
<el-table-column
:key="`item-${item}`"
align="center"
show-overflow-tooltip
:label="`特征项${item}`"
width="120"
>
<template slot-scope="{ row }">
<span
v-if="row.propertyVoList && row.propertyVoList.length > 0 && item - 1 < row.propertyVoList.length"
>
{{ row.propertyVoList[item - 1].propertyName || '-' }}
</span>
<span v-else> - </span>
</template>
</el-table-column>
<el-table-column
:key="`value-${item}`"
align="center"
show-overflow-tooltip
:label="`特征值${item}`"
width="120"
>
<template slot-scope="{ row }">
<span
v-if="row.propertyVoList && row.propertyVoList.length > 0 && item - 1 < row.propertyVoList.length"
>
{{ row.propertyVoList[item - 1].propertyValue || '-' }}
</span>
<span v-else> - </span>
</template>
</el-table-column>
</template>
<el-table-column align="center" fixed="right" min-width="200" label="操作">
<template slot-scope="scope">
<el-button type="text" size="mini" @click="onHandlePreview(scope.row)" class="view-btn">
@ -481,20 +515,6 @@
<el-input v-model="formData.brand" disabled/>
</el-form-item>
</el-col>
<!-- &lt;!&ndash; 特征项和特征值 &ndash;&gt;
<template v-for="(item, index) in formData.propertyVoList">
<el-col :span="12" :key="`feature-item-${index}`">
<el-form-item :label="`特征项${index + 1}`">
<el-input v-model="item.propertyName" disabled/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item :label="`特征值${index + 1}`">
<el-input v-model="item.propertyValue" disabled/>
</el-form-item>
</el-col>
</template>-->
</el-row>
</el-form>
<div slot="footer" class="dialog-footer">
@ -728,6 +748,7 @@ export default {
return {
total: 0,
tableHeight: 510,
collapsed: false,
// 查询参数
queryParams: {
deptName: undefined,
@ -817,6 +838,11 @@ export default {
}
},
methods: {
// 切换折叠状态
toggleCollapse() {
this.collapsed = !this.collapsed
// 可以在这里添加折叠/展开的动画效果或其他逻辑
},
/**
* 切换搜索区域展开/收起状态
*/
@ -1223,6 +1249,17 @@ export default {
overflow: hidden;
}
.card-container-btn {
/* 使用 clip-path 创建三角形形状 */
clip-path: polygon(0 0, 100% 50%, 0 100%);
width: 40px;
height: 70px;
background-color: red;
position: relative;
cursor: pointer;
transition: all 0.3s ease;
}
.card-header {
padding: 14px;
border-bottom: 1px solid #e4e7ed;
@ -1410,4 +1447,33 @@ export default {
margin-bottom: 0;
width: 50%;
}
.card-container {
position: relative; /* 新增：为按钮绝对定位提供参考 */
}
.collapse-btn {
/* 修改：将按钮定位在右侧中间 */
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
background: white;
color: #606266;
padding: 2px;
z-index: 10; /* 确保按钮在最上层 */
}
/* 优化按钮悬停效果 */
.collapse-btn:hover {
background: white;
color: #409eff;
}
/* 折叠状态的样式和过渡动画 */
.tree-column {
transition: all 0.3s ease;
display: flex;
flex-direction: row;
}
</style>