机具类型管理增加树节点增删改查操作，选择高亮，新购增加线下采购单编号字段等需求完善
This commit is contained in:
BianLzhaoMin
parent
107134bb82
commit
d25638b07b
|
|
@ -614,4 +614,11 @@ export default {
|
|||
width: 60px !important;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
::v-deep
|
||||
.el-tree--highlight-current
|
||||
.el-tree-node.is-current
|
||||
> .el-tree-node__content {
|
||||
background-color: #8decf1;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -625,4 +625,10 @@ export default {
|
|||
width: 60px !important;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
::v-deep
|
||||
.el-tree--highlight-current
|
||||
.el-tree-node.is-current
|
||||
> .el-tree-node__content {
|
||||
background-color: #8decf1;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
<div class="app-container" id="toolsType">
|
||||
<el-row :gutter="20">
|
||||
<!--树数据-->
|
||||
<el-col :span="4" :xs="24">
|
||||
<el-col :span="5" :xs="24">
|
||||
<div class="head-container">
|
||||
<el-input
|
||||
v-model="typeName"
|
||||
|
|
@ -27,11 +27,58 @@
|
|||
default-expand-all
|
||||
highlight-current
|
||||
@node-click="handleNodeClick"
|
||||
/>
|
||||
>
|
||||
<span
|
||||
class="custom-tree-node"
|
||||
slot-scope="{ node, data }"
|
||||
@mousemove="onMousemove(data)"
|
||||
@mouseleave="onMouseleave()"
|
||||
>
|
||||
<span
|
||||
v-if="
|
||||
isMousemoveId === data.id &&
|
||||
node.label.length > 5
|
||||
"
|
||||
>{{ node.label.slice(0, 3) + '...' }}</span
|
||||
>
|
||||
<span v-else>{{ node.label }}</span>
|
||||
|
||||
<span
|
||||
class="btn-items"
|
||||
v-if="isMousemoveId === data.id"
|
||||
>
|
||||
<el-button
|
||||
type="text"
|
||||
size="mini"
|
||||
icon="el-icon-plus"
|
||||
@click.stop="() => appendTreeNode(data)"
|
||||
>
|
||||
</el-button>
|
||||
<el-button
|
||||
type="text"
|
||||
size="mini"
|
||||
icon="el-icon-edit-outline"
|
||||
style="color: #67c23a"
|
||||
v-if="data.id !== 0"
|
||||
@click.stop="() => editTreeNode(data)"
|
||||
>
|
||||
</el-button>
|
||||
<el-button
|
||||
type="text"
|
||||
size="mini"
|
||||
icon="el-icon-delete"
|
||||
style="color: #f56c6c"
|
||||
v-if="data.id !== 0"
|
||||
@click.stop="() => removeTreeNode(data)"
|
||||
>
|
||||
</el-button>
|
||||
</span>
|
||||
</span>
|
||||
</el-tree>
|
||||
</div>
|
||||
</el-col>
|
||||
<!--用户数据-->
|
||||
<el-col :span="20" :xs="24">
|
||||
<el-col :span="19" :xs="24">
|
||||
<el-form
|
||||
:model="queryParams"
|
||||
ref="queryForm"
|
||||
|
|
@ -68,7 +115,7 @@
|
|||
</el-form>
|
||||
|
||||
<el-row :gutter="10" class="mb8">
|
||||
<el-col :span="1.5">
|
||||
<!-- <el-col :span="1.5">
|
||||
<el-button
|
||||
type="primary"
|
||||
plain
|
||||
|
|
@ -78,7 +125,7 @@
|
|||
v-hasPermi="['machinery:type:add']"
|
||||
>新增</el-button
|
||||
>
|
||||
</el-col>
|
||||
</el-col> -->
|
||||
<!-- <el-col :span="1.5">
|
||||
<el-button
|
||||
type="warning"
|
||||
|
|
@ -265,13 +312,13 @@
|
|||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<!-- <pagination
|
||||
v-show="total>0"
|
||||
:total="total"
|
||||
:page.sync="queryParams.pageNum"
|
||||
:limit.sync="queryParams.pageSize"
|
||||
@pagination="getList"
|
||||
/>-->
|
||||
<pagination
|
||||
v-show="total > 0"
|
||||
:total="total"
|
||||
:page.sync="queryParams.pageNum"
|
||||
:limit.sync="queryParams.pageSize"
|
||||
@pagination="getList"
|
||||
/>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
|
|
@ -292,7 +339,7 @@
|
|||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="所属上级" prop="parentId">
|
||||
<treeselect
|
||||
<!-- <treeselect
|
||||
v-model="form.parentId"
|
||||
:options="treeOptions"
|
||||
:show-count="true"
|
||||
|
|
@ -301,7 +348,9 @@
|
|||
noResultsText="没有搜索结果"
|
||||
placeholder="请选择所属上级分类"
|
||||
@select="treeChange"
|
||||
/>
|
||||
/> -->
|
||||
|
||||
<el-input v-model="form.label" disabled />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
|
|
@ -581,6 +630,53 @@
|
|||
<el-button @click="cancelConfig">取 消</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
|
||||
<!-- 新增弹框 -->
|
||||
<el-dialog
|
||||
:title="addTitle"
|
||||
:visible.sync="addTitleVisible"
|
||||
width="50%"
|
||||
append-to-body
|
||||
:close-on-click-modal="false"
|
||||
>
|
||||
<el-form
|
||||
label-width="80px"
|
||||
:model="addFormParams"
|
||||
:rules="addFormParamsRules"
|
||||
ref="addFormParamsRef"
|
||||
>
|
||||
<el-row :gutter="24">
|
||||
<el-col :span="12" v-if="addTitle === '新增'">
|
||||
<el-form-item label="所属上级">
|
||||
<el-input
|
||||
style="width: 100%"
|
||||
disabled
|
||||
v-model="addFormParams.label"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="名称" prop="typeName">
|
||||
<el-input
|
||||
style="width: 100%"
|
||||
v-model="addFormParams.typeName"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-row style="text-align: right">
|
||||
<el-form-item>
|
||||
<el-button size="small" type="primary" @click="onSubmit"
|
||||
>确 定</el-button
|
||||
>
|
||||
<el-button size="small" @click="onCancel"
|
||||
>取 消</el-button
|
||||
>
|
||||
</el-form-item>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -664,9 +760,10 @@ export default {
|
|||
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
// pageNum: 1,
|
||||
// pageSize: 10,
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
typeName: undefined,
|
||||
level: 0,
|
||||
// phonenumber: undefined,
|
||||
// status: undefined,
|
||||
// typeId: undefined
|
||||
|
|
@ -763,6 +860,26 @@ export default {
|
|||
// {required: true, message: "开始日期不能为空", trigger: "blur"}
|
||||
// ],
|
||||
},
|
||||
|
||||
/* 新增弹框等数据源定义 */
|
||||
addTitleVisible: false,
|
||||
addTitle: '', // 新增弹框标题
|
||||
addFormParams: {
|
||||
label: '',
|
||||
typeName: '',
|
||||
companyId: 101,
|
||||
},
|
||||
|
||||
addFormParamsRules: {
|
||||
typeName: [
|
||||
{
|
||||
required: true,
|
||||
message: '名称不能为空',
|
||||
trigger: 'blur',
|
||||
},
|
||||
],
|
||||
},
|
||||
isMousemoveId: null,
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
|
|
@ -799,7 +916,14 @@ export default {
|
|||
/** 查询新增页面-上级类型下拉树结构 */
|
||||
getTreeData() {
|
||||
getMaTypeList().then((response) => {
|
||||
this.treeOptions = response.data
|
||||
this.treeOptions = [
|
||||
{
|
||||
label: '机具类型',
|
||||
id: 0,
|
||||
children: response.data,
|
||||
level: 0,
|
||||
},
|
||||
]
|
||||
})
|
||||
},
|
||||
/** 查询资产属性下拉 */
|
||||
|
|
@ -812,8 +936,8 @@ export default {
|
|||
getList() {
|
||||
this.loading = true
|
||||
getListByMaType(this.queryParams).then((response) => {
|
||||
this.typeList = response.data
|
||||
// this.total = response.total;
|
||||
this.typeList = response.data.rows
|
||||
this.total = response.data.total
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
|
|
@ -825,6 +949,7 @@ export default {
|
|||
// 节点单击事件 - 左侧树
|
||||
handleNodeClick(data) {
|
||||
this.queryParams.typeId = data.id
|
||||
this.queryParams.level = data.level
|
||||
this.handleQuery()
|
||||
},
|
||||
// 取消按钮
|
||||
|
|
@ -839,6 +964,7 @@ export default {
|
|||
photoName: '',
|
||||
documentUrl: '',
|
||||
documentName: '',
|
||||
parentId: '',
|
||||
}
|
||||
this.imageUrl = ''
|
||||
this.fileList = []
|
||||
|
|
@ -855,6 +981,9 @@ export default {
|
|||
this.dateRange = []
|
||||
this.resetForm('queryForm')
|
||||
this.queryParams.typeId = undefined
|
||||
this.queryParams.pageNum = 1
|
||||
this.queryParams.pageSize = 10
|
||||
this.queryParams.level = 0
|
||||
this.$refs.tree.setCurrentKey(null)
|
||||
this.handleQuery()
|
||||
},
|
||||
|
|
@ -893,6 +1022,11 @@ export default {
|
|||
}
|
||||
|
||||
this.imageUrl = this.form.photoUrl
|
||||
|
||||
console.log(row, '---')
|
||||
this.getParentName(this.treeOptions, row.parentId)
|
||||
// console.log(this.form, '表单数据--')
|
||||
|
||||
this.open = true
|
||||
this.title = '修改'
|
||||
})
|
||||
|
|
@ -930,8 +1064,9 @@ export default {
|
|||
return delMaType(typeIds)
|
||||
})
|
||||
.then(() => {
|
||||
this.getList()
|
||||
this.$modal.msgSuccess('删除成功')
|
||||
this.getList()
|
||||
this.getTreeData()
|
||||
})
|
||||
.catch(() => {})
|
||||
},
|
||||
|
|
@ -1050,6 +1185,102 @@ export default {
|
|||
|
||||
this.form.companyId = val.companyId
|
||||
},
|
||||
|
||||
/* 树节点增加 */
|
||||
appendTreeNode(data) {
|
||||
if (data.level === 3) {
|
||||
this.reset()
|
||||
Object.assign(this.form, data)
|
||||
this.form.parentId = data.id
|
||||
this.open = true
|
||||
this.title = '新增'
|
||||
} else {
|
||||
Object.assign(this.addFormParams, data)
|
||||
this.addFormParams.typeName = ''
|
||||
this.addTitle = '新增'
|
||||
this.addTitleVisible = true
|
||||
}
|
||||
},
|
||||
/* 树节点删除 */
|
||||
removeTreeNode(data) {
|
||||
// this.$message.success('删除--')
|
||||
console.log(data, '删除时的数据源--')
|
||||
this.$modal
|
||||
.confirm('是否确认删除数据项？')
|
||||
.then(function () {
|
||||
return delMaType(data.id)
|
||||
})
|
||||
.then(() => {
|
||||
this.$modal.msgSuccess('删除成功')
|
||||
this.getTreeData()
|
||||
})
|
||||
.catch(() => {})
|
||||
},
|
||||
/* 树节点修改 */
|
||||
editTreeNode(data) {
|
||||
console.log(data, '修改')
|
||||
Object.assign(this.addFormParams, data)
|
||||
this.addTitle = '修改'
|
||||
this.addFormParams.typeName = data.label
|
||||
this.addTitleVisible = true
|
||||
},
|
||||
/* 确定 */
|
||||
onSubmit() {
|
||||
const { id, typeName } = this.addFormParams
|
||||
const addParams = {
|
||||
parentId: id,
|
||||
typeName,
|
||||
}
|
||||
const editParams = {
|
||||
typeId: id,
|
||||
typeName,
|
||||
}
|
||||
|
||||
this.$refs['addFormParamsRef'].validate(async (valid) => {
|
||||
if (valid) {
|
||||
if (this.addTitle === '新增') {
|
||||
const res = await addMaType(addParams)
|
||||
if (res.code === 200) {
|
||||
this.$message.success('新增成功！')
|
||||
this.addTitleVisible = false
|
||||
this.getTreeData()
|
||||
}
|
||||
} else {
|
||||
const res = await updateMaType(editParams)
|
||||
if (res.code === 200) {
|
||||
this.$message.success('修改成功！')
|
||||
this.addTitleVisible = false
|
||||
this.getTreeData()
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
/* 取消 */
|
||||
onCancel() {
|
||||
this.addTitleVisible = false
|
||||
},
|
||||
getParentName(list, id) {
|
||||
try {
|
||||
list.forEach((e) => {
|
||||
if (e.id == id) {
|
||||
this.form.label = e.label
|
||||
throw new Error()
|
||||
} else {
|
||||
if (e.children && e.children.length > 0) {
|
||||
this.getParentName(e.children, id)
|
||||
}
|
||||
}
|
||||
})
|
||||
} catch (error) {}
|
||||
},
|
||||
|
||||
onMousemove(data) {
|
||||
this.isMousemoveId = data.id
|
||||
},
|
||||
onMouseleave() {
|
||||
this.isMousemoveId = null
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1058,4 +1289,43 @@ export default {
|
|||
width: 60px !important;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
::v-deep .btn-items .el-button + .el-button {
|
||||
margin-left: 6px;
|
||||
}
|
||||
.btn-items {
|
||||
margin-left: 4px;
|
||||
.el-button--text {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
::v-deep .el-tree .el-tree-node__expand-icon.expanded {
|
||||
-webkit-transform: rotate(0deg);
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
::v-deep .el-tree .el-icon-caret-right:before {
|
||||
content: '\e783';
|
||||
font-size: 16px;
|
||||
}
|
||||
::v-deep
|
||||
.el-tree
|
||||
.el-tree-node__expand-icon.expanded.el-icon-caret-right:before {
|
||||
content: '\e781';
|
||||
font-size: 16px;
|
||||
color: #1890ff;
|
||||
}
|
||||
|
||||
::v-deep .el-tree-node__content > .el-tree-node__expand-icon {
|
||||
color: #1890ff !important;
|
||||
}
|
||||
::v-deep .el-tree-node__expand-icon.is-leaf {
|
||||
color: transparent !important;
|
||||
}
|
||||
|
||||
::v-deep
|
||||
.el-tree--highlight-current
|
||||
.el-tree-node.is-current
|
||||
> .el-tree-node__content {
|
||||
background-color: #8decf1;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,29 +1,14 @@
|
|||
<template>
|
||||
<!-- 新增工机具 -->
|
||||
<div>
|
||||
<el-form
|
||||
:model="queryParams"
|
||||
ref="queryForm"
|
||||
size="small"
|
||||
:inline="true"
|
||||
label-width="100px"
|
||||
>
|
||||
<el-form-item label="规格型号" prop="equipmentId">
|
||||
<treeselect
|
||||
v-model="queryParams.equipmentId"
|
||||
default-expand-all
|
||||
:options="equipmentTypeList"
|
||||
placeholder="请选择规格型号"
|
||||
@select="select"
|
||||
:disable-branch-nodes="true"
|
||||
style="width: 240px"
|
||||
noChildrenText="没有数据了"
|
||||
noOptionsText="没有数据"
|
||||
noResultsText="没有搜索结果"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="出厂日期">
|
||||
<!-- <el-form -->
|
||||
<!-- :model="queryParams" -->
|
||||
<!-- ref="queryForm" -->
|
||||
<!-- size="small" -->
|
||||
<!-- :inline="true" -->
|
||||
<!-- label-width="100px" -->
|
||||
<!-- > -->
|
||||
<!-- <el-form-item label="出厂日期">
|
||||
<el-date-picker
|
||||
v-model="queryParams.productionTime"
|
||||
style="width: 240px"
|
||||
|
|
@ -49,16 +34,37 @@
|
|||
:value="item.supplierId"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-form-item> -->
|
||||
<!-- </el-form> -->
|
||||
<el-form
|
||||
:model="maForm"
|
||||
ref="maForm"
|
||||
:rules="rules"
|
||||
size="small"
|
||||
:inline="true"
|
||||
label-width="100px"
|
||||
label-width="120px"
|
||||
>
|
||||
<el-form-item label="线下采购单编号" prop="purchaseNumber">
|
||||
<el-input
|
||||
placeholder="请输入线下采购单编号"
|
||||
style="width: 240px"
|
||||
v-model="maForm.purchaseNumber"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="规格型号" prop="equipmentId">
|
||||
<treeselect
|
||||
v-model="queryParams.equipmentId"
|
||||
default-expand-all
|
||||
:options="equipmentTypeList"
|
||||
placeholder="请选择规格型号"
|
||||
@select="select"
|
||||
:disable-branch-nodes="true"
|
||||
style="width: 240px"
|
||||
noChildrenText="没有数据了"
|
||||
noOptionsText="没有数据"
|
||||
noResultsText="没有搜索结果"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="采购日期" prop="purchaseTime">
|
||||
<el-date-picker
|
||||
v-model="maForm.purchaseTime"
|
||||
|
|
@ -343,6 +349,7 @@ export default {
|
|||
arrivalTime: '',
|
||||
purchaser: '',
|
||||
remark: '',
|
||||
purchaseNumber: '',
|
||||
},
|
||||
// 表单参数
|
||||
form: {},
|
||||
|
|
@ -352,6 +359,13 @@ export default {
|
|||
},
|
||||
// 表单校验
|
||||
rules: {
|
||||
purchaseNumber: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入线下采购单编号',
|
||||
trigger: 'blur',
|
||||
},
|
||||
],
|
||||
purchaseTime: [
|
||||
{
|
||||
required: true,
|
||||
|
|
@ -503,6 +517,7 @@ export default {
|
|||
this.maForm.arrivalTime = response.data.arrivalTime
|
||||
this.maForm.purchaser = response.data.purchaser
|
||||
this.maForm.remark = response.data.remark
|
||||
this.maForm.purchaseNumber = response.data.purchaseNumber
|
||||
this.equipmentList = response.data.checkDetailsList
|
||||
// this.loading = false;
|
||||
})
|
||||
|
|
|
|||
|
|
@ -109,6 +109,12 @@
|
|||
indexContinuation(queryParams.pageNum, queryParams.pageSize)
|
||||
"
|
||||
/>
|
||||
<el-table-column
|
||||
align="center"
|
||||
label="线下采购单编号"
|
||||
prop="purchaseNumber"
|
||||
:show-overflow-tooltip="true"
|
||||
/>
|
||||
<el-table-column
|
||||
label="采购单号"
|
||||
align="center"
|
||||
|
|
|
|||
|
|
@ -42,7 +42,7 @@ module.exports = {
|
|||
// target: `https://test-cc.zhgkxt.com`,//线上环境-南网
|
||||
// target: `https://z.csgmall.com.cn`,
|
||||
|
||||
target: `http://192.168.2.1:39080`, //超
|
||||
target: `http://192.168.2.127:39080`, //超
|
||||
// target: `http://10.40.92.81:8080`, //韩/
|
||||
// target: `http://192.168.2.75:39080`, //旭/
|
||||
// target: `http://192.168.2.17:39080`, //帅
|
||||
|
|
|
|||
Loading…
Reference in New Issue