教师借用、仪器分类

ruoyi-ui/src/views/smartSchool/InstrumentDrugAdministration/instrumentClassification/index.vue

 <template>
-    <div>仪器分类</div>
+    <div>
+        <!-- 搜索条件 -->
+        <el-form
+            :model="queryForm"
+            ref="queryForm"
+            size="small"
+            :inline="true"
+            label-width="68px"
+        >
+            <el-form-item label="仪器名称">
+                <el-input
+                    v-model="queryForm.name"
+                    placeholder="请输入"
+                    clearable
+                ></el-input>
+            </el-form-item>
+            <el-form-item label="仪器分类">
+                <el-select
+                    v-model="queryForm.name"
+                    placeholder="请选择"
+                    clearable
+                >
+                    <el-option> </el-option>
+                </el-select>
+            </el-form-item>
+
+            <el-form-item>
+                <el-button
+                    type="primary"
+                    icon="el-icon-search"
+                    size="mini"
+                    @click="getList"
+                    >搜索</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
+                    type="primary"
+                    plain
+                    icon="el-icon-plus"
+                    size="mini"
+                    @click="handAdd()"
+                    v-hasPermi="['system:student:add']"
+                    >新增
+                </el-button>
+            </el-col>
+            <el-col :span="1.5">
+                <el-button
+                    type="success"
+                    plain
+                    icon="el-icon-edit"
+                    size="mini"
+                    :disabled="single"
+                    @click="handleUpdate"
+                    v-hasPermi="['system:student:edit']"
+                    >编辑
+                </el-button>
+            </el-col>
+            <el-col :span="1.5">
+                <el-button
+                    type="danger"
+                    size="mini"
+                    icon="el-icon-view"
+                    :disabled="single"
+                    @click="handleDelete"
+                    >删除
+                </el-button>
+            </el-col>
+        </el-row>
+
+        <!-- 表格 -->
+        <el-table
+            :data="tableData"
+            style="width: 100%"
+            row-key="name"
+            border
+            lazy
+            :load="load"
+            :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
+            v-model="selectedRows"
+            @selection-change="handleSelectionChange"
+        >
+            <el-table-column type="selection" width="55"></el-table-column>
+
+            <el-table-column
+                align="center"
+                type="index"
+                label="序号"
+                width="55"
+            />
+            <el-table-column prop="name" label="仪器名称" width="180" />
+            <el-table-column prop="name" label="排序" width="180" />
+            <el-table-column prop="name" label="是否为消耗品" />
+            <el-table-column prop="name" label="备注" />
+
+            <el-table-column align="center" fixed="right" label="操作">
+                <template slot-scope="scope">
+                    <el-button
+                        @click="handleUpdate(scope.row)"
+                        type="text"
+                        size="small"
+                        >编辑</el-button
+                    >
+
+                    <el-button
+                        @click="handleDelete(scope.row)"
+                        type="text"
+                        size="small"
+                        >删除</el-button
+                    >
+                </template>
+            </el-table-column>
+        </el-table>
+
+        <!-- 弹窗 -->
+        <el-dialog
+            :title="title"
+            :visible.sync="dialogTableVisible"
+            width="30%"
+            show-close
+        >
+            <el-form :model="form" ref="form" size="small" label-width="108px">
+                <el-row>
+                    <el-col :span="20">
+                        <el-form-item label="上级分类">
+                            <el-input
+                                v-model="form.name"
+                                placeholder="请输入"
+                                clearable
+                            ></el-input>
+                        </el-form-item>
+                    </el-col>
+                </el-row>
+                <el-row>
+                    <el-col :span="20">
+                        <el-form-item label="仪器名称">
+                            <el-input
+                                v-model="form.name"
+                                placeholder="请输入"
+                                clearable
+                            >
+                            </el-input>
+                        </el-form-item>
+                    </el-col>
+                </el-row>
+                <el-row>
+                    <el-col :span="20">
+                        <el-form-item label="排序">
+                            <el-input
+                                v-model="form.name"
+                                placeholder="请输入"
+                                clearable
+                            ></el-input>
+                        </el-form-item>
+                    </el-col>
+                </el-row>
+                <el-row>
+                    <el-col :span="20">
+                        <el-form-item label="是否为消耗品">
+                            <el-radio-group v-model="form.resource">
+                                <el-radio label="是"></el-radio>
+                                <el-radio label="否"></el-radio>
+                            </el-radio-group>
+                        </el-form-item>
+                    </el-col>
+                </el-row>
+                <el-row>
+                    <el-col :span="20">
+                        <el-form-item label="备注">
+                            <el-input
+                                v-model="form.name"
+                                placeholder="请输入"
+                                type="textarea"
+                                clearable
+                            ></el-input>
+                        </el-form-item>
+                    </el-col>
+                </el-row>
+            </el-form>
+
+            <div slot="footer">
+                <el-button type="primary" @click="submitparentForm"
+                    >确定</el-button
+                >
+                <el-button @click="cancel">取 消</el-button>
+            </div>
+        </el-dialog>
+
+        <!-- 分页 -->
+        <pagination
+            v-show="total > 0"
+            :total="total"
+            :page.sync="queryForm.pageNum"
+            :limit.sync="queryForm.pageSize"
+            @pagination="getList"
+        />
+    </div>
 </template>
 
 <script>
 export default {
-    name: 'instrumentClassification'
+    name: 'instrumentClassification',
+    data() {
+        return {
+            queryForm: {
+                pageNum: 1,
+                pageSize: 10,
+                name: ''
+            },
+            selectedRows: [], // 用于存储选择的行数据
+            //表格数据
+            tableData: [
+                {
+                    name: '1'
+                },
+                {
+                    name: '2222'
+                },
+                {
+                    name: '33',
+
+                    hasChildren: true
+                },
+                {
+                    name: '444'
+                }
+            ],
+            title: '',
+            // 弹窗
+            form: {},
+            // 总计
+            total: 0,
+            single: false, // 添加 single 属性并设置初始值
+            multiple: false,
+            dialogTableVisible: false
+        }
+    },
+    methods: {
+        // 搜索
+        getList() {},
+        // 重置
+        resetQuery() {},
+        //
+        load(tree, treeNode, resolve) {
+            setTimeout(() => {
+                resolve([
+                    {
+                        name: '5555'
+                    },
+                    {
+                        name: '666'
+                    }
+                ])
+            }, 1000)
+        },
+        // 新增
+        handAdd() {
+            this.dialogTableVisible = true
+            this.title = '仪器药品新增'
+        },
+        // 编辑
+        handleUpdate() {
+            this.dialogTableVisible = true
+            this.title = '仪器药品编辑'
+        },
+        // 删除
+        handleDelete() {},
+
+        // 确定
+        submitparentForm() {
+            this.dialogTableVisible = false
+        },
+        // 取消
+        cancel() {
+            this.dialogTableVisible = false
+        },
+        // 多选框选中数据
+        handleSelectionChange(selection) {
+            this.ids = selection.map((item) => item.id)
+            this.single = selection.length !== 1
+            this.multiple = !selection.length
+        }
+    }
 }
 </script>
 
 <style lang="scss" scoped>
+.el-form {
+    margin-top: 15px;
+    margin-left: 10px;
+}
+.el-table {
+    margin-left: 10px;
+}
 </style>
\ No newline at end of file