模型页面和层级管理页面搭建

src/views/basic/class-org/index.vue

@@ -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">

src/views/basic/level-manage/addOrEditForm.vue

@@ -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>

src/views/basic/level-manage/index.vue

@@ -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>

src/views/basic/model-manage/addOrEditForm.vue

@@ -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,
             }
         },
     },

src/views/basic/model-manage/index.vue

@@ -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"
+            <el-table-column prop="name" label="项目名称">
-                :key="item.prop"
+                <template slot-scope="{ row }">
-                :label="item.label"
+                    <span>
-                :prop="item.prop"
+                        {{ row.name }}
-                v-for="item in columnList"
+                    </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)"
+                        icon="el-icon-plus"
-                        v-hasPermi="['basic:device:use-or-return']"
+                        @click="handleAddChild(row)"
-                        :style="scope.row.status == '正常' ? 'color: #02bc76' : 'color: #8b9800'"
+                        v-if="row.totalLevel !== row.level"
-                        :icon="scope.row.status == '正常' ? 'el-icon-upload2' : 'el-icon-download'"
                     >
-                        {{ scope.row.status == '正常' ? '领用' : '归还' }}
+                        新增
                     </el-button>
                     <el-button
                         size="mini"
                         type="text"
-                        icon="el-icon-document"
+                        icon="el-icon-upload"
-                        @click="handleViewRecord(scope.row)"
+                        v-if="row.totalLevel === row.level"
-                        v-hasPermi="['basic:device:record']"
+                        @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)"
+                        @click="handleDelete(row)"
-                        v-hasPermi="['basic:device:remove']"
                     >
                         删除
                     </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,
+                    id: 3,
-                    deviceName: '设备1',
+                    date: '2016-05-01',
-                    deviceCode: '123456',
+                    name: '*****项目1',
-                    Keeper: '张三',
+                    level: 1,
-                    status: '正常',
+                    totalLevel: 2,
-                    remark: '备注1',
+                    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,
+                    id: 4,
-                    deviceName: '设备2',
+                    date: '2016-05-01',
-                    deviceCode: '123456',
+                    name: '*****项目2',
-                    Keeper: '李四',
+                    level: 1,
-                    status: '异常',
+                    totalLevel: 2,
-                    remark: '备注2',
+                    children: [
-                },
+                        {
-            ],
+                            id: 39,
-
+                            date: '2016-05-01',
-            // 列配置
+                            name: '椭圆',
-            columnList: [
+                            level: 2,
-                {
+                            totalLevel: 2,
-                    label: '设备名称',
+                        },
-                    prop: 'deviceName',
+                        {
+                            id: 40,
+                            date: '2016-05-01',
+                            name: '长方形',
+                            level: 2,
+                            totalLevel: 2,
+                        },
+                    ],
                 },
                 {
-                    label: '设备编号',
+                    id: 5,
-                    prop: 'deviceCode',
+                    date: '2016-05-01',
-                },
+                    name: '*****项目3',
-                {
+                    level: 1,
-                    label: '所属保管人',
+                    totalLevel: 3,
-                    prop: 'Keeper',
+                    children: [
-                },
+                        {
-                {
+                            id: 41,
-                    label: '设备状态',
+                            date: '2016-05-01',
-                    prop: 'status',
+                            name: '*****工程1',
-                },
+                            level: 2,
-                {
+                            totalLevel: 3,
-                    label: '备注',
+                            children: [
-                    prop: 'remark',
+                                {
+                                    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) {
+        handleUploadModel(row) {
-            console.log(row)
-            this.useOrReturnFormTitle = row.status == '正常' ? '领用' : '归还'
             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>

src/views/basic/model-manage/useOrReturnForm.vue

@@ -1,22 +1,51 @@
 <template>
     <!-- 基础管理-设备管理-领用或归还 -->
     <div>
-        <el-form :model="useOrReturnForm" :rules="useOrReturnFormRules" ref="useOrReturnFormRef" label-width="100px">
+        <el-form :model="useOrReturnForm" :rules="useOrReturnFormRules" ref="useOrReturnFormRef" label-width="120px">
-            <el-form-item label="领用人" prop="user">
+            <el-form-item label="模型名称" prop="user">
-                <el-input v-model="useOrReturnForm.user" placeholder="请输入领用人" />
+                <el-input v-model="useOrReturnForm.user" placeholder="请输入模型名称" />
             </el-form-item>
-            <el-form-item label="领用时间" prop="useTime">
+            <el-form-item label="模型上传类型" prop="user">
-                <el-date-picker
+                <el-input v-model="useOrReturnForm.user" placeholder="请输入模型名称" />
-                    type="date"
+            </el-form-item>
-                    style="width: 100%"
+
-                    placeholder="选择领用时间"
+            <el-form-item label="模型文件" prop="returnUser">
-                    value-format="yyyy-MM-dd"
+                <el-upload
-                    v-model="useOrReturnForm.useTime"
+                    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>