devicesmgt/sgzb-ui/src/views/warehouseManage/machinery/parts/index.vue

655 lines
22 KiB
Vue
Raw Normal View History

2024-06-07 11:17:34 +08:00
<template>
<!-- 配件管理 -->
<div class="app-container" id="accessory">
<el-form
:model="queryParams"
ref="queryForm"
size="small"
:inline="true"
v-show="showSearch"
>
<el-form-item label="关键字" prop="paName">
<el-input
v-model="queryParams.paName"
placeholder="请输入关键字"
maxlength="50"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
2024-07-24 08:55:24 +08:00
<el-form-item label="框架年份" prop="year">
<el-date-picker
v-model="queryParams.year"
type="year"
value-format="yyyy"
placeholder="选择年">
</el-date-picker>
</el-form-item>
2024-06-07 11:17:34 +08:00
<el-form-item>
<el-button
type="primary"
icon="el-icon-search"
size="mini"
@click="handleQuery"
>查询</el-button
>
<el-button
icon="el-icon-refresh"
size="mini"
@click="resetQuery"
>重置</el-button
>
</el-form-item>
</el-form>
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
2024-07-24 08:55:24 +08:00
<el-button
type="primary"
plain
icon="el-icon-bottom"
size="mini"
v-hasPermi="['machinery:parts:add']"
2024-07-24 09:47:08 +08:00
@click="handleUploadExcel"
2024-07-24 08:55:24 +08:00
>导入</el-button
>
2024-06-07 11:17:34 +08:00
<el-button
type="primary"
plain
icon="el-icon-plus"
size="mini"
@click="handleAdd"
v-hasPermi="['machinery:parts:add']"
>新增</el-button
>
</el-col>
<el-col :span="1.5">
<el-button
type="info"
plain
icon="el-icon-sort"
size="mini"
@click="toggleExpandAll"
>展开/折叠</el-button
>
2024-07-24 08:55:24 +08:00
<el-button
type="info"
plain
icon="el-icon-top"
size="mini"
2024-07-25 15:56:07 +08:00
@click="downloadExcelTemplate"
2024-07-24 08:55:24 +08:00
>下载导入模板</el-button
>
2024-06-07 11:17:34 +08:00
</el-col>
<right-toolbar
:showSearch.sync="showSearch"
@queryTable="getList"
></right-toolbar>
</el-row>
<el-table
v-if="refreshTable"
v-loading="loading"
:data="deptList"
row-key="paId"
:default-expand-all="isExpandAll"
:tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
>
<el-table-column
prop="paName"
label="名称"
min-width="260"
></el-table-column>
<el-table-column
prop="unitId"
label="计量单位"
min-width="260"
></el-table-column>
<el-table-column
prop="buyPrice"
label="购置价格"
min-width="260"
></el-table-column>
<el-table-column
prop="num"
label="数量"
min-width="200"
></el-table-column>
<el-table-column
prop="remark"
label="备注信息"
min-width="200"
></el-table-column>
<!-- <el-table-column prop="status" label="状态" width="100">-->
<!-- <template slot-scope="scope">-->
<!-- <dict-tag :options="dict.type.sys_normal_disable" :value="scope.row.status"/>-->
<!-- </template>-->
<!-- </el-table-column>-->
<!-- <el-table-column label="创建时间" align="center" prop="createTime" width="200">-->
<!-- <template slot-scope="scope">-->
<!-- <span>{{ parseTime(scope.row.createTime) }}</span>-->
<!-- </template>-->
<!-- </el-table-column>-->
<el-table-column
label="操作"
align="center"
class-name="small-padding fixed-width"
width="160px"
>
<template slot-scope="scope">
<el-button
size="mini"
type="primary"
icon="el-icon-edit"
@click="handleUpdate(scope.row)"
v-hasPermi="['machinery:parts:edit']"
>修改</el-button
>
<!-- <el-button-->
<!-- size="mini"-->
<!-- type="text"-->
<!-- icon="el-icon-plus"-->
<!-- @click="handleAdd(scope.row)"-->
<!-- v-hasPermi="['system:dept:add']"-->
<!-- >新增</el-button>-->
<el-button
v-if="scope.row.parentId != 0"
size="mini"
type="danger"
icon="el-icon-delete"
@click="handleDelete(scope.row)"
v-hasPermi="['machinery:parts:del']"
>删除</el-button
>
</template>
</el-table-column>
</el-table>
<!-- 添加或修改部门对话框 -->
<el-dialog
:title="title"
:visible.sync="open"
width="600px"
append-to-body
:close-on-click-modal="false"
>
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
<el-row>
<el-col :span="24">
<el-form-item label="上级" prop="currentId">
<el-cascader
v-model="form.currentId"
:options="deptOptions"
:disabled="isEdit"
:props="{
expandTrigger: 'hover',
label: 'label',
value: 'id',
checkStrictly: true,
}"
@change="handleNodeClick"
>
</el-cascader>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="名称" prop="paName">
<el-input
v-model="form.paName"
placeholder="请输入名称"
maxlength="50"
/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="计量单位" prop="unitId">
<el-input
v-model="form.unitId"
placeholder="请输入计量单位"
maxlength="50"
/>
<!-- <el-input-number v-model="form.unitId" controls-position="right" :min="0" /> -->
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="购置价格" prop="buyPrice">
<el-input
v-model="form.buyPrice"
placeholder="请输入购置价格"
maxlength="20"
/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="数量" prop="num">
<el-input
v-model="form.num"
placeholder="请输入数量"
maxlength="20"
/>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="备注信息" prop="remark">
<el-input
v-model="form.remark"
placeholder="请输入备注"
maxlength="50"
/>
</el-form-item>
</el-col>
</el-row>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitForm"> </el-button>
<el-button @click="cancel"> </el-button>
</div>
</el-dialog>
2024-07-24 09:47:08 +08:00
<el-dialog
title="上传文件"
:visible.sync="openUpload"
width="400px"
append-to-body
:close-on-click-modal="false"
>
<el-upload
ref="excelUpload"
2024-07-24 18:50:46 +08:00
action="#"
:http-request="(file) => uploadExcel(file)"
2024-07-24 09:47:08 +08:00
accept=".xlsx, .xls"
:limit="1"
2024-07-24 18:50:46 +08:00
:file-list="fileList"
2024-07-25 15:56:07 +08:00
:on-remove="handleRemoveExcel"
:on-exceed="excelExceed"
2024-07-24 09:47:08 +08:00
>
<el-button size="small" type="primary">点击上传</el-button>
</el-upload>
<div style="
font-size: 12px;
color: #999999;
display: flex;
flex-direction: column;
margin: 20px 0;
"
>
<span>支持格式excel表格单个文件不能超过20MB</span>
<span>注意需要根据模版导入本年配件框架内容重复上传会覆盖本年框架内容</span>
</div>
<div style="
display: flex;
justify-content: right;
align-items: center;
margin-top: 20px
">
2024-07-24 18:50:46 +08:00
<el-button
type="primary"
style="margin-right: 6px;"
@click="confirmUpload"
>确定</el-button>
<el-button
@click="closeExcelDialog"
>取消</el-button>
2024-07-24 09:47:08 +08:00
</div>
</el-dialog>
2024-06-07 11:17:34 +08:00
</div>
</template>
<script>
import { apiGetPartTree } from '@/api/system/dept'
import {
listPartType,
addMaPartType,
getPartType,
updatePartTypeById,
delPartType,
} from '@/api/store/tools'
2024-07-25 15:56:07 +08:00
import { excelUpLoad, downloadExcel } from '@/api/system/upload'
2024-06-07 11:17:34 +08:00
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
// level 层级 +1
export default {
name: 'Accessory',
dicts: ['sys_normal_disable'],
components: { Treeselect },
data() {
return {
// 遮罩层
loading: true,
// 显示搜索条件
showSearch: true,
// 表格树数据
deptList: [],
// 部门树选项
deptOptions: [],
// 弹出层标题
title: '',
// 是否显示弹出层
open: false,
2024-07-24 09:47:08 +08:00
openUpload: false,
2024-06-07 11:17:34 +08:00
// 是否展开,默认全部展开
isExpandAll: true,
// 重新渲染表格状态
refreshTable: true,
// 查询参数
queryParams: {
paName: undefined,
2024-07-24 08:55:24 +08:00
year: undefined
2024-06-07 11:17:34 +08:00
},
// 表单参数
form: {},
// 表单校验
rules: {
parentId: [
{
required: true,
message: '上级部门不能为空',
trigger: 'blur',
},
],
paName: [
{
required: true,
message: '部门名称不能为空',
trigger: 'blur',
},
],
orderNum: [
{
required: true,
message: '显示排序不能为空',
trigger: 'blur',
},
],
email: [
{
type: 'email',
message: '请输入正确的邮箱地址',
trigger: ['blur', 'change'],
},
],
phone: [
{
pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
message: '请输入正确的手机号码',
trigger: 'blur',
},
],
},
isEdit: false,
2024-07-24 09:47:08 +08:00
// excel文件列表
2024-07-24 18:50:46 +08:00
fileList: [],
2024-07-25 15:56:07 +08:00
excelList: undefined
2024-06-07 11:17:34 +08:00
}
},
created() {
this.getList()
},
methods: {
2024-07-24 18:50:46 +08:00
/** 确认上传excel */
confirmUpload() {
2024-07-25 15:56:07 +08:00
if (this.excelList != undefined) {
let ifSize = this.excelList.file.size / 1024 / 1024 < 20;
if (!ifSize) {
this.$modal.msgError('上传文件大于20M请重新选择文件上传')
2024-07-24 18:50:46 +08:00
} else {
2024-07-25 15:56:07 +08:00
console.log(this.excelList)
excelUpLoad(this.excelList).then(res => {
console.log(res)
if (res.code == 200) {
this.$modal.msgSuccess(res.msg)
this.openUpload = false
this.reset()
this.getList()
} else {
this.$modal.msgError(res.msg)
}
}).catch(err => {
console.log(err)
})
2024-07-24 18:50:46 +08:00
}
2024-07-25 15:56:07 +08:00
} else {
this.$modal.msgError('请选择上传文件!')
}
},
/** 点击下载excel导入模板 */
downloadExcelTemplate() {
this.download(
'base/maPartType/downLoad',
{},
`配件模板.xlsx`,
)
2024-07-24 18:50:46 +08:00
},
2024-07-24 09:47:08 +08:00
/** 上传excel文件 */
2024-07-24 18:50:46 +08:00
uploadExcel(obj) {
this.excelList = obj
2024-07-24 09:47:08 +08:00
},
2024-07-25 15:56:07 +08:00
/** 移除excel文件 */
handleRemoveExcel() {
this.excelList = undefined
},
/** 上传的excel数超出限制 */
excelExceed(files, fileList) {
this.$modal.msgError('上传的excel文件数量超出限制')
},
2024-07-24 09:47:08 +08:00
/** 上传excel文件前 */
beforeExcelUpload(file) {
console.log(file)
},
/** 上传excel文件成功 */
excelSuccess() {
console.log('上传成功')
},
/** 上传excel文件失败 */
excelError() {
console.log('上传失败')
},
2024-07-24 18:50:46 +08:00
/** 关闭excel弹窗 */
closeExcelDialog() {
2024-07-25 17:00:13 +08:00
this.excelList = undefined
2024-07-24 18:50:46 +08:00
this.openUpload = false
},
2024-06-07 11:17:34 +08:00
/** 查询部门列表 */
getList() {
2024-07-24 08:55:24 +08:00
console.log(this.queryParams)
2024-06-07 11:17:34 +08:00
// this.loading = true;
listPartType(this.queryParams)
.then((response) => {
this.deptList = this.handleTree(response.data, 'paId')
this.loading = false
})
.catch((err) => {
console.log('err', err)
})
},
/** 转换部门数据结构 */
normalizer(node) {
if (node.children && !node.children.length) {
delete node.children
}
return {
id: node.paId,
label: node.paName,
children: node.children,
}
},
// 取消按钮
cancel() {
this.open = false
this.reset()
},
// 表单重置
reset() {
this.form = {
currentId: '',
level: undefined,
parentId: undefined,
paName: undefined,
orderNum: undefined,
leader: undefined,
phone: undefined,
email: undefined,
status: '0',
}
this.resetForm('form')
},
/** 搜索按钮操作 */
handleQuery() {
this.getList()
},
/** 重置按钮操作 */
resetQuery() {
this.resetForm('queryForm')
this.handleQuery()
},
/** 新增按钮操作 */
handleAdd() {
this.reset()
this.open = true
this.title = '添加'
this.isEdit = false
this.initApiGetPartTree()
},
2024-07-24 09:47:08 +08:00
/** 导入excel按钮操作 */
handleUploadExcel() {
this.reset()
this.openUpload = true
2024-07-24 18:50:46 +08:00
},
2024-06-07 11:17:34 +08:00
/** 展开/折叠操作 */
toggleExpandAll() {
this.refreshTable = false
this.isExpandAll = !this.isExpandAll
this.$nextTick(() => {
this.refreshTable = true
})
},
/** 修改按钮操作 */
handleUpdate(row) {
this.reset()
this.open = true
this.title = '修改部门'
this.isEdit = true
this.initGetPartType(row)
},
/** 提交按钮 */
submitForm() {
this.$refs['form'].validate((valid) => {
if (valid) {
if (this.form.paId != undefined) {
delete this.form.currentId
updatePartTypeById(this.form).then((response) => {
this.$modal.msgSuccess('修改成功')
this.open = false
this.getList()
})
} else {
addMaPartType(this.form).then((response) => {
this.$modal.msgSuccess('新增成功')
this.open = false
this.getList()
})
}
}
})
},
async initApiGetPartTree() {
try {
const res = await apiGetPartTree()
this.deptOptions = res.data
} catch (error) {}
},
handleNodeClick(ev) {
const res = this.searchTree(
this.deptOptions,
this.form.currentId && this.form.currentId.length > 0
? this.form.currentId.slice(-1)[0]
: {},
)
if (res) {
this.form.parentId = res.id
this.form.level = Number(res.level) + 1
}
},
/** 删除按钮操作 */
handleDelete(row) {
this.$modal
.confirm('是否确认删除名称为"' + row.paName + '"的数据项?')
.then(function () {
return delPartType(row.paId)
})
.then(() => {
this.getList()
this.$modal.msgSuccess('删除成功')
})
.catch(() => {})
},
searchTree(tree, id) {
let res = null
let state = false
function readTree(tree, id) {
if (state) return
for (let i = 0; i < tree.length; i++) {
if (tree[i].id == id) {
state = true
res = tree[i]
} else {
if (tree[i].children != null) {
readTree(tree[i].children, id)
}
}
}
}
readTree(tree, id)
return res
},
getAllParentArr(list, id, name, child) {
for (let i in list) {
if (list[i][name] == id) {
return [list[i]]
}
if (list[i][child]) {
let node = this.getAllParentArr(
list[i][child],
id,
name,
child,
)
if (!!node) {
return node.concat(list[i])
}
}
}
},
handleRowClick(ev) {
this.form.currentId = row.parentId
},
async initGetPartType(row) {
const currentItem = this.getAllParentArr(
this.deptList,
row.parentId,
'parentId',
'children',
)
this.form = JSON.parse(JSON.stringify(row))
this.form.currentId =
currentItem && currentItem.reverse().map((ele) => ele.paId)
this.initApiGetPartTree()
},
},
}
</script>
<style lang="scss" scoped>
::v-deep.el-table .fixed-width .el-button--mini {
width: 60px !important;
margin-bottom: 10px;
}
2024-07-24 08:55:24 +08:00
</style>