模型页面和层级管理页面搭建
This commit is contained in:
BianLzhaoMin
parent
f374a73791
commit
917f14e5c0
|
|
@ -49,7 +49,7 @@
|
|||
|
||||
<el-table v-loading="loading" :data="deviceList" border>
|
||||
<el-table-column label="序号" align="center" type="index" />
|
||||
<el-table-column label="项目分类名称" align="center" />
|
||||
<el-table-column label="项目名称" align="center" />
|
||||
|
||||
<el-table-column label="操作" align="center" width="240">
|
||||
<template slot-scope="scope">
|
||||
|
|
|
|||
|
|
@ -0,0 +1,158 @@
|
|||
<template>
|
||||
<!-- 基础管理-层级-新增或编辑 -->
|
||||
<div>
|
||||
<el-form
|
||||
:model="addOrEditForm"
|
||||
:rules="addOrEditFormRules"
|
||||
ref="addOrEditFormRef"
|
||||
label-position="left"
|
||||
label-width="auto"
|
||||
>
|
||||
<el-form-item label="层级配置名称" prop="levelSettingName">
|
||||
<el-row>
|
||||
<el-col :span="20">
|
||||
<el-input v-model="addOrEditForm.levelSettingName" placeholder="请输入层级配置名称" />
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item
|
||||
:gutter="24"
|
||||
:key="index"
|
||||
required
|
||||
:label="`${item.level}级节点`"
|
||||
v-for="(item, index) in addOrEditForm.levelList"
|
||||
:prop="`levelList.${index}.levelName`"
|
||||
:rules="{
|
||||
required: true,
|
||||
trigger: 'blur',
|
||||
message: '请输入节点名称',
|
||||
}"
|
||||
>
|
||||
<el-row>
|
||||
<el-col :span="20">
|
||||
<el-input v-model="item.levelName" placeholder="请输入节点" />
|
||||
</el-col>
|
||||
|
||||
<el-col :span="4">
|
||||
<el-button
|
||||
size="mini"
|
||||
type="primary"
|
||||
icon="el-icon-plus"
|
||||
style="margin-left: 4px"
|
||||
@click="addNextLevel(item.level)"
|
||||
v-if="index === addOrEditForm.levelList.length - 1"
|
||||
/>
|
||||
<el-button
|
||||
size="mini"
|
||||
type="danger"
|
||||
icon="el-icon-delete"
|
||||
style="margin-left: 4px"
|
||||
@click="deleteCurrentLevel(index)"
|
||||
v-if="index !== 0 && index !== 1"
|
||||
/>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item>
|
||||
<el-button @click="cancel">取消</el-button>
|
||||
<el-button type="primary" @click="submitForm">确定</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'AddOrEditForm',
|
||||
|
||||
data() {
|
||||
const validateLevelName = (rule, value, callback) => {
|
||||
if (!value || value.trim() === '') {
|
||||
callback(new Error('请输入节点名称'))
|
||||
} else {
|
||||
callback()
|
||||
}
|
||||
}
|
||||
return {
|
||||
addOrEditForm: {
|
||||
levelSettingName: '',
|
||||
levelList: [
|
||||
{
|
||||
level: 1,
|
||||
levelName: '一级节点',
|
||||
},
|
||||
{
|
||||
level: 2,
|
||||
levelName: '二级节点',
|
||||
},
|
||||
],
|
||||
},
|
||||
addOrEditFormRules: {
|
||||
levelSettingName: [{ required: true, message: '请输入设备名称', trigger: 'blur' }],
|
||||
// 动态层级的校验规则
|
||||
levelList: {
|
||||
validator: (rule, value, callback) => {
|
||||
const invalidItems = value.filter((item) => !item.levelName || item.levelName.trim() === '')
|
||||
if (invalidItems.length > 0) {
|
||||
callback(new Error('所有层级节点名称不能为空'))
|
||||
} else {
|
||||
callback()
|
||||
}
|
||||
},
|
||||
trigger: 'blur',
|
||||
},
|
||||
},
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
cancel() {
|
||||
this.$emit('closeAddOrEditFormDialog')
|
||||
},
|
||||
submitForm() {
|
||||
// this.$emit('submitForm')
|
||||
|
||||
this.$refs.addOrEditFormRef.validate((valid) => {
|
||||
if (valid) {
|
||||
const hasEmptyLevel = this.addOrEditForm.levelList.some(
|
||||
(item) => !item.levelName || item.levelName.trim() === '',
|
||||
)
|
||||
|
||||
if (hasEmptyLevel) {
|
||||
this.$message.error('所有层级节点名称不能为空')
|
||||
return
|
||||
}
|
||||
// this.$emit('closeAddOrEditFormDialog')
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
})
|
||||
},
|
||||
resetForm() {
|
||||
this.$refs.addOrEditFormRef.resetFields()
|
||||
},
|
||||
|
||||
addNextLevel(index) {
|
||||
this.addOrEditForm.levelList.push({
|
||||
level: index + 1,
|
||||
levelName: '',
|
||||
})
|
||||
},
|
||||
|
||||
deleteCurrentLevel(index) {
|
||||
this.addOrEditForm.levelList.splice(index, 1)
|
||||
},
|
||||
|
||||
setFormData(data) {
|
||||
const { deviceName, deviceCode, remark, Keeper } = data
|
||||
this.addOrEditForm = {
|
||||
deviceName,
|
||||
deviceCode,
|
||||
remark,
|
||||
Keeper,
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,227 @@
|
|||
<template>
|
||||
<!-- 基础管理-层级 -->
|
||||
<div class="app-container">
|
||||
<el-form size="small" :inline="true" ref="queryForm" :model="queryParams">
|
||||
<el-form-item label="层级配置名称" prop="proName">
|
||||
<el-input
|
||||
clearable
|
||||
placeholder="请输入层级配置名称"
|
||||
v-model="queryParams.proName"
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<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">
|
||||
<el-button plain size="mini" type="primary" icon="el-icon-plus" @click="handleAddLevel">
|
||||
新增层级
|
||||
</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-table v-loading="loading" :data="deviceList" border>
|
||||
<el-table-column label="序号" align="center" type="index" />
|
||||
<el-table-column
|
||||
align="center"
|
||||
:key="item.prop"
|
||||
:label="item.label"
|
||||
:prop="item.prop"
|
||||
v-for="item in columnList"
|
||||
/>
|
||||
|
||||
<el-table-column label="操作" align="center" width="240">
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-edit"
|
||||
@click="handleEdit(scope.row)"
|
||||
v-hasPermi="['basic:device:edit']"
|
||||
>
|
||||
编辑
|
||||
</el-button>
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-delete"
|
||||
style="color: #f56c6c"
|
||||
@click="handleDelete(scope.row)"
|
||||
v-hasPermi="['basic:device:remove']"
|
||||
>
|
||||
删除
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<pagination
|
||||
v-show="total > 0"
|
||||
:total="total"
|
||||
:page.sync="queryParams.pageNum"
|
||||
:limit.sync="queryParams.pageSize"
|
||||
@pagination="getDeviceList"
|
||||
/>
|
||||
|
||||
<!-- 添加或修改层级对话框 -->
|
||||
<el-dialog width="40%" append-to-body :title="addOrEditFormTitle" :visible.sync="addOrEditFormVisible">
|
||||
<AddOrEditForm ref="addOrEditComponentRef" @closeAddOrEditFormDialog="closeAddOrEditFormDialog" />
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import AddOrEditForm from './addOrEditForm.vue'
|
||||
export default {
|
||||
name: 'DeviceManage',
|
||||
components: {
|
||||
AddOrEditForm,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
total: 0, // 总条数
|
||||
loading: false, // 加载中
|
||||
addOrEditFormTitle: '新增', // 新增或编辑对话框标题
|
||||
addOrEditFormVisible: false, // 新增或编辑对话框是否显示
|
||||
useOrReturnFormTitle: '领用', // 领用或归还对话框标题
|
||||
useOrReturnFormVisible: false, // 领用或归还对话框是否显示
|
||||
useRecordFormVisible: false, // 使用记录对话框是否显示
|
||||
// 设备列表
|
||||
deviceList: [
|
||||
{
|
||||
id: 1,
|
||||
deviceName: '设备1',
|
||||
deviceCode: '123456',
|
||||
Keeper: '张三',
|
||||
status: '正常',
|
||||
remark: '备注1',
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
deviceName: '设备2',
|
||||
deviceCode: '123456',
|
||||
Keeper: '李四',
|
||||
status: '异常',
|
||||
remark: '备注2',
|
||||
},
|
||||
],
|
||||
|
||||
// 列配置
|
||||
columnList: [
|
||||
{
|
||||
label: '设备名称',
|
||||
prop: 'deviceName',
|
||||
},
|
||||
{
|
||||
label: '设备编号',
|
||||
prop: 'deviceCode',
|
||||
},
|
||||
{
|
||||
label: '所属保管人',
|
||||
prop: 'Keeper',
|
||||
},
|
||||
{
|
||||
label: '设备状态',
|
||||
prop: 'status',
|
||||
},
|
||||
{
|
||||
label: '备注',
|
||||
prop: 'remark',
|
||||
},
|
||||
],
|
||||
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
proName: undefined,
|
||||
unit: undefined,
|
||||
chargePerson: undefined,
|
||||
},
|
||||
}
|
||||
},
|
||||
created() {
|
||||
// this.getDeviceList()
|
||||
},
|
||||
methods: {
|
||||
// 查询按钮
|
||||
handleQuery() {
|
||||
this.queryParams.pageNum = 1
|
||||
this.getDeviceList()
|
||||
},
|
||||
|
||||
// 重置按钮
|
||||
resetQuery() {
|
||||
this.resetForm('queryForm')
|
||||
this.handleQuery()
|
||||
},
|
||||
|
||||
// 新增按钮操作
|
||||
handleAddLevel() {
|
||||
this.addOrEditFormTitle = '新增'
|
||||
this.editForm = null
|
||||
this.addOrEditFormVisible = true
|
||||
},
|
||||
|
||||
// 获取设备列表
|
||||
getDeviceList() {
|
||||
this.loading = true
|
||||
listProject(this.queryParams).then((response) => {
|
||||
this.proList = response.rows
|
||||
this.total = response.total
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
|
||||
// 领用或归还按钮
|
||||
handleUseOrReturn(row) {
|
||||
console.log(row)
|
||||
this.useOrReturnFormTitle = row.status == '正常' ? '领用' : '归还'
|
||||
this.useOrReturnFormVisible = true
|
||||
},
|
||||
|
||||
// 查看记录按钮
|
||||
handleViewRecord(row) {
|
||||
console.log(row)
|
||||
this.useRecordFormVisible = true
|
||||
},
|
||||
|
||||
// 编辑按钮
|
||||
handleEdit(row) {
|
||||
this.addOrEditFormTitle = '编辑'
|
||||
this.addOrEditFormVisible = true
|
||||
const { deviceId, deviceName, deviceCode, remark, Keeper } = row
|
||||
const editForm = { deviceId, deviceName, deviceCode, remark, Keeper }
|
||||
this.$nextTick(() => {
|
||||
this.$refs.addOrEditComponentRef.setFormData(editForm)
|
||||
})
|
||||
},
|
||||
|
||||
/** 修改按钮操作 */
|
||||
handleUpdate(row) {
|
||||
this.addOrEditFormTitle = '编辑'
|
||||
this.addOrEditFormVisible = true
|
||||
},
|
||||
|
||||
// 删除按钮
|
||||
handleDelete(row) {},
|
||||
|
||||
// 关闭新增或编辑对话框
|
||||
closeAddOrEditFormDialog() {
|
||||
this.$refs.addOrEditComponentRef.resetForm()
|
||||
this.addOrEditFormVisible = false
|
||||
},
|
||||
|
||||
// 关闭领用或归还对话框
|
||||
closeUseOrReturnFormDialog() {
|
||||
this.$refs.useOrReturnFormComponentRef.resetForm()
|
||||
this.useOrReturnFormVisible = false
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
|
@ -2,31 +2,12 @@
|
|||
<!-- 基础管理-设备管理-新增或编辑 -->
|
||||
<div>
|
||||
<el-form :model="addOrEditForm" :rules="addOrEditFormRules" ref="addOrEditFormRef" label-width="100px">
|
||||
<el-form-item label="设备名称" prop="deviceName">
|
||||
<el-form-item label="上级节点" prop="deviceName">
|
||||
<el-input v-model="addOrEditForm.deviceName" placeholder="请输入设备名称" />
|
||||
</el-form-item>
|
||||
<el-form-item label="设备编码" prop="deviceCode">
|
||||
<el-form-item label="分类名称" prop="deviceCode">
|
||||
<el-input v-model="addOrEditForm.deviceCode" placeholder="请输入设备编码" />
|
||||
</el-form-item>
|
||||
<el-form-item label="设备保管人" prop="Keeper">
|
||||
<el-select
|
||||
clearable
|
||||
filterable
|
||||
style="width: 100%"
|
||||
v-model="addOrEditForm.Keeper"
|
||||
placeholder="请选择设备保管人"
|
||||
>
|
||||
<el-option v-for="item in KeeperList" :key="item.id" :label="item.name" :value="item.id" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="备注" prop="remark">
|
||||
<el-input
|
||||
type="textarea"
|
||||
v-model="addOrEditForm.remark"
|
||||
placeholder="请输入备注"
|
||||
:autosize="{ minRows: 2, maxRows: 6 }"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item>
|
||||
<el-button @click="cancel">取消</el-button>
|
||||
|
|
@ -45,8 +26,6 @@ export default {
|
|||
addOrEditForm: {
|
||||
deviceName: '',
|
||||
deviceCode: '',
|
||||
Keeper: '',
|
||||
remark: '',
|
||||
},
|
||||
addOrEditFormRules: {
|
||||
deviceName: [{ required: true, message: '请输入设备名称', trigger: 'blur' }],
|
||||
|
|
@ -86,12 +65,9 @@ export default {
|
|||
},
|
||||
|
||||
setFormData(data) {
|
||||
const { deviceName, deviceCode, remark, Keeper } = data
|
||||
const { deviceName } = data
|
||||
this.addOrEditForm = {
|
||||
deviceName,
|
||||
deviceCode,
|
||||
remark,
|
||||
Keeper,
|
||||
}
|
||||
},
|
||||
},
|
||||
|
|
|
|||
|
|
@ -32,7 +32,7 @@
|
|||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<el-row :gutter="10" class="mb8">
|
||||
<!-- <el-row :gutter="10" class="mb8">
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
plain
|
||||
|
|
@ -45,55 +45,52 @@
|
|||
新增
|
||||
</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-row> -->
|
||||
|
||||
<el-table v-loading="loading" :data="deviceList" border>
|
||||
<el-table
|
||||
border
|
||||
row-key="id"
|
||||
v-loading="loading"
|
||||
:data="deviceList"
|
||||
:tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
|
||||
>
|
||||
<el-table-column label="序号" align="center" type="index" />
|
||||
<el-table-column
|
||||
align="center"
|
||||
:key="item.prop"
|
||||
:label="item.label"
|
||||
:prop="item.prop"
|
||||
v-for="item in columnList"
|
||||
/>
|
||||
|
||||
<el-table-column prop="name" label="项目名称">
|
||||
<template slot-scope="{ row }">
|
||||
<span>
|
||||
{{ row.name }}
|
||||
</span>
|
||||
<el-tag style="margin-left: 10px" size="mini" type="primary">节点{{ row.level }}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="操作" align="center" width="240">
|
||||
<template slot-scope="scope">
|
||||
<template slot-scope="{ row }">
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
@click="handleUseOrReturn(scope.row)"
|
||||
v-hasPermi="['basic:device:use-or-return']"
|
||||
:style="scope.row.status == '正常' ? 'color: #02bc76' : 'color: #8b9800'"
|
||||
:icon="scope.row.status == '正常' ? 'el-icon-upload2' : 'el-icon-download'"
|
||||
icon="el-icon-plus"
|
||||
@click="handleAddChild(row)"
|
||||
v-if="row.totalLevel !== row.level"
|
||||
>
|
||||
{{ scope.row.status == '正常' ? '领用' : '归还' }}
|
||||
新增
|
||||
</el-button>
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-document"
|
||||
@click="handleViewRecord(scope.row)"
|
||||
v-hasPermi="['basic:device:record']"
|
||||
icon="el-icon-upload"
|
||||
v-if="row.totalLevel === row.level"
|
||||
@click="handleUploadModel(row)"
|
||||
>
|
||||
记录
|
||||
</el-button>
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-edit"
|
||||
@click="handleEdit(scope.row)"
|
||||
v-hasPermi="['basic:device:edit']"
|
||||
>
|
||||
编辑
|
||||
上传模型
|
||||
</el-button>
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-delete"
|
||||
style="color: #f56c6c"
|
||||
@click="handleDelete(scope.row)"
|
||||
v-hasPermi="['basic:device:remove']"
|
||||
@click="handleDelete(row)"
|
||||
>
|
||||
删除
|
||||
</el-button>
|
||||
|
|
@ -114,18 +111,13 @@
|
|||
<AddOrEditForm ref="addOrEditComponentRef" @closeAddOrEditFormDialog="closeAddOrEditFormDialog" />
|
||||
</el-dialog>
|
||||
|
||||
<!-- 领用或归还对话框 -->
|
||||
<el-dialog width="40%" append-to-body :title="useOrReturnFormTitle" :visible.sync="useOrReturnFormVisible">
|
||||
<!-- 模型上传对话框 -->
|
||||
<el-dialog width="50%" append-to-body :title="useOrReturnFormTitle" :visible.sync="useOrReturnFormVisible">
|
||||
<UseOrReturnForm
|
||||
ref="useOrReturnFormComponentRef"
|
||||
@closeUseOrReturnFormDialog="closeUseOrReturnFormDialog"
|
||||
/>
|
||||
</el-dialog>
|
||||
|
||||
<!-- 使用记录对话框 -->
|
||||
<el-dialog width="90%" append-to-body title="领用记录" :visible.sync="useRecordFormVisible">
|
||||
<UseRecordTable />
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -146,50 +138,141 @@ export default {
|
|||
loading: false, // 加载中
|
||||
addOrEditFormTitle: '新增', // 新增或编辑对话框标题
|
||||
addOrEditFormVisible: false, // 新增或编辑对话框是否显示
|
||||
useOrReturnFormTitle: '领用', // 领用或归还对话框标题
|
||||
useOrReturnFormTitle: '模型上传', // 领用或归还对话框标题
|
||||
useOrReturnFormVisible: false, // 领用或归还对话框是否显示
|
||||
useRecordFormVisible: false, // 使用记录对话框是否显示
|
||||
// 设备列表
|
||||
deviceList: [
|
||||
{
|
||||
id: 1,
|
||||
deviceName: '设备1',
|
||||
deviceCode: '123456',
|
||||
Keeper: '张三',
|
||||
status: '正常',
|
||||
remark: '备注1',
|
||||
id: 3,
|
||||
date: '2016-05-01',
|
||||
name: '*****项目1',
|
||||
level: 1,
|
||||
totalLevel: 2,
|
||||
children: [
|
||||
{
|
||||
id: 31,
|
||||
date: '2016-05-01',
|
||||
name: '椭圆',
|
||||
level: 2,
|
||||
totalLevel: 2,
|
||||
},
|
||||
{
|
||||
id: 32,
|
||||
date: '2016-05-01',
|
||||
name: '长方形',
|
||||
level: 2,
|
||||
totalLevel: 2,
|
||||
},
|
||||
{
|
||||
id: 33,
|
||||
date: '2016-05-01',
|
||||
name: '正方形',
|
||||
level: 2,
|
||||
totalLevel: 2,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
deviceName: '设备2',
|
||||
deviceCode: '123456',
|
||||
Keeper: '李四',
|
||||
status: '异常',
|
||||
remark: '备注2',
|
||||
},
|
||||
],
|
||||
|
||||
// 列配置
|
||||
columnList: [
|
||||
{
|
||||
label: '设备名称',
|
||||
prop: 'deviceName',
|
||||
id: 4,
|
||||
date: '2016-05-01',
|
||||
name: '*****项目2',
|
||||
level: 1,
|
||||
totalLevel: 2,
|
||||
children: [
|
||||
{
|
||||
id: 39,
|
||||
date: '2016-05-01',
|
||||
name: '椭圆',
|
||||
level: 2,
|
||||
totalLevel: 2,
|
||||
},
|
||||
{
|
||||
id: 40,
|
||||
date: '2016-05-01',
|
||||
name: '长方形',
|
||||
level: 2,
|
||||
totalLevel: 2,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: '设备编号',
|
||||
prop: 'deviceCode',
|
||||
},
|
||||
{
|
||||
label: '所属保管人',
|
||||
prop: 'Keeper',
|
||||
},
|
||||
{
|
||||
label: '设备状态',
|
||||
prop: 'status',
|
||||
},
|
||||
{
|
||||
label: '备注',
|
||||
prop: 'remark',
|
||||
id: 5,
|
||||
date: '2016-05-01',
|
||||
name: '*****项目3',
|
||||
level: 1,
|
||||
totalLevel: 3,
|
||||
children: [
|
||||
{
|
||||
id: 41,
|
||||
date: '2016-05-01',
|
||||
name: '*****工程1',
|
||||
level: 2,
|
||||
totalLevel: 3,
|
||||
children: [
|
||||
{
|
||||
id: 58,
|
||||
date: '2016-05-01',
|
||||
name: '椭圆',
|
||||
level: 3,
|
||||
totalLevel: 3,
|
||||
},
|
||||
{
|
||||
id: 59,
|
||||
date: '2016-05-01',
|
||||
name: '长方形',
|
||||
level: 3,
|
||||
totalLevel: 3,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 42,
|
||||
date: '2016-05-01',
|
||||
name: '*****工程2',
|
||||
level: 2,
|
||||
totalLevel: 3,
|
||||
children: [
|
||||
{
|
||||
id: 60,
|
||||
date: '2016-05-01',
|
||||
name: '椭圆',
|
||||
level: 3,
|
||||
totalLevel: 3,
|
||||
},
|
||||
{
|
||||
id: 61,
|
||||
date: '2016-05-01',
|
||||
name: '长方形',
|
||||
level: 3,
|
||||
totalLevel: 3,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 43,
|
||||
date: '2016-05-01',
|
||||
name: '*****工程3',
|
||||
level: 2,
|
||||
totalLevel: 3,
|
||||
children: [
|
||||
{
|
||||
id: 62,
|
||||
date: '2016-05-01',
|
||||
name: '椭圆',
|
||||
level: 3,
|
||||
totalLevel: 3,
|
||||
},
|
||||
{
|
||||
id: 63,
|
||||
date: '2016-05-01',
|
||||
name: '长方形',
|
||||
level: 3,
|
||||
totalLevel: 3,
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
|
||||
|
|
@ -226,6 +309,20 @@ export default {
|
|||
this.addOrEditFormVisible = true
|
||||
},
|
||||
|
||||
// 新增子节点
|
||||
handleAddChild(row) {
|
||||
console.log(row)
|
||||
const { id, name } = row
|
||||
this.addOrEditFormTitle = '新增'
|
||||
this.editForm = null
|
||||
this.addOrEditFormVisible = true
|
||||
|
||||
const editForm = { deviceName: name }
|
||||
this.$nextTick(() => {
|
||||
this.$refs.addOrEditComponentRef.setFormData(editForm)
|
||||
})
|
||||
},
|
||||
|
||||
// 获取设备列表
|
||||
getDeviceList() {
|
||||
this.loading = true
|
||||
|
|
@ -236,10 +333,8 @@ export default {
|
|||
})
|
||||
},
|
||||
|
||||
// 领用或归还按钮
|
||||
handleUseOrReturn(row) {
|
||||
console.log(row)
|
||||
this.useOrReturnFormTitle = row.status == '正常' ? '领用' : '归还'
|
||||
// 上传按钮
|
||||
handleUploadModel(row) {
|
||||
this.useOrReturnFormVisible = true
|
||||
},
|
||||
|
||||
|
|
@ -283,3 +378,28 @@ export default {
|
|||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
/* 修改树形表格的展开图标为 +/- */
|
||||
::v-deep .el-table .el-table__expand-icon {
|
||||
transform: rotate(0deg); /* 取消默认的旋转效果 */
|
||||
}
|
||||
|
||||
::v-deep .el-table .el-table__expand-icon .el-icon-arrow-right:before {
|
||||
content: '＋'; /* 更大的加号 */
|
||||
font-size: 16px; /* 调整大小 */
|
||||
font-weight: bold;
|
||||
border: 1px solid #409eff;
|
||||
color: #409eff;
|
||||
background-color: #f0f7ff;
|
||||
}
|
||||
|
||||
::v-deep .el-table .el-table__expand-icon--expanded .el-icon-arrow-right:before {
|
||||
content: '－'; /* 更大的减号 */
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
border: 1px solid #409eff;
|
||||
color: #409eff;
|
||||
background-color: #f0f7ff;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,22 +1,51 @@
|
|||
<template>
|
||||
<!-- 基础管理-设备管理-领用或归还 -->
|
||||
<div>
|
||||
<el-form :model="useOrReturnForm" :rules="useOrReturnFormRules" ref="useOrReturnFormRef" label-width="100px">
|
||||
<el-form-item label="领用人" prop="user">
|
||||
<el-input v-model="useOrReturnForm.user" placeholder="请输入领用人" />
|
||||
<el-form :model="useOrReturnForm" :rules="useOrReturnFormRules" ref="useOrReturnFormRef" label-width="120px">
|
||||
<el-form-item label="模型名称" prop="user">
|
||||
<el-input v-model="useOrReturnForm.user" placeholder="请输入模型名称" />
|
||||
</el-form-item>
|
||||
<el-form-item label="领用时间" prop="useTime">
|
||||
<el-date-picker
|
||||
type="date"
|
||||
style="width: 100%"
|
||||
placeholder="选择领用时间"
|
||||
value-format="yyyy-MM-dd"
|
||||
v-model="useOrReturnForm.useTime"
|
||||
<el-form-item label="模型上传类型" prop="user">
|
||||
<el-input v-model="useOrReturnForm.user" placeholder="请输入模型名称" />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="模型文件" prop="returnUser">
|
||||
<el-upload
|
||||
action="https://jsonplaceholder.typicode.com/posts/"
|
||||
:on-preview="handlePreview"
|
||||
:on-remove="handleRemove"
|
||||
:before-remove="beforeRemove"
|
||||
multiple
|
||||
:limit="3"
|
||||
:on-exceed="handleExceed"
|
||||
:file-list="fileList"
|
||||
>
|
||||
<div class="upload-demo">
|
||||
<el-button size="small" icon="el-icon-paperclip">上传模型</el-button>
|
||||
<div class="upload-demo-tip">仅支持上传dxf文件</div>
|
||||
</div>
|
||||
</el-upload>
|
||||
</el-form-item>
|
||||
<el-form-item label="模型版本" prop="returnUser">
|
||||
<el-input v-model="useOrReturnForm.user" placeholder="请输入模型版本" />
|
||||
</el-form-item>
|
||||
<el-form-item label="设计人员" prop="returnUser">
|
||||
<el-select v-model="useOrReturnForm.user" placeholder="请选择设计人员" style="width: 100%">
|
||||
<el-option label="张工" value="1" />
|
||||
<el-option label="李工" value="2" />
|
||||
<el-option label="王工" value="3" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="版本描述" prop="returnUser">
|
||||
<el-input
|
||||
maxlength="100"
|
||||
show-word-limit
|
||||
type="textarea"
|
||||
placeholder="请输入版本描述"
|
||||
v-model="useOrReturnForm.user"
|
||||
:autosize="{ minRows: 3, maxRows: 6 }"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="退还人" prop="returnUser">
|
||||
<el-input v-model="useOrReturnForm.returnUser" placeholder="请输入退还人" />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item>
|
||||
<el-button @click="cancel">取消</el-button>
|
||||
|
|
@ -42,6 +71,8 @@ export default {
|
|||
useTime: [{ required: true, message: '请选择领用时间', trigger: 'change' }],
|
||||
returnUser: [{ required: true, message: '请输入退还人', trigger: 'blur' }],
|
||||
},
|
||||
|
||||
fileList: [],
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
|
@ -64,6 +95,32 @@ export default {
|
|||
},
|
||||
|
||||
setFormData(data) {},
|
||||
|
||||
handlePreview(file) {
|
||||
console.log(file)
|
||||
},
|
||||
handleRemove(file) {
|
||||
console.log(file)
|
||||
},
|
||||
beforeRemove(file) {},
|
||||
handleExceed(files, fileList) {
|
||||
this.$message.warning(
|
||||
`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
|
||||
files.length + fileList.length
|
||||
} 个文件`,
|
||||
)
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.upload-demo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.upload-demo-tip {
|
||||
margin-left: 10px;
|
||||
color: #f56c6c;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue