FE-V2-PC/src/views/comprehensive/laboratoryManagement/classifiedGrading/subjectClass.vue

<template>
    <div class="subjectClass">
        <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
          <el-form-item label="关键字" prop="searchValue">
            <el-input
              v-model="queryParams.searchValue"
              placeholder="请输入关键字"
              clearable
              size="small"
            />
          </el-form-item>
          <el-form-item style="float: right">
            <el-col :span="1.5">
              <p class="add-button-one-120"
                 @click="handleAdd"
                 v-hasPermi="['laboratory:classtype:add']"
              ><i class="el-icon-plus"></i>新增</p>
            </el-col>
          </el-form-item>
          <el-form-item>
            <p class="inquire-button-one" @click="handleQuery">查询</p>
            <p class="reset-button-one" @click="resetQuery">重置</p>
          </el-form-item>
        </el-form>
        <el-table v-loading="loading" border :data="classtypeList" @selection-change="handleSelectionChange">
          <!--<el-table-column label="自增id" align="left" prop="id" v-if="false"/>-->
          <el-table-column :label="versionField() == 'xiBeiNongLinDaXue'?'房间类型':'实验室类型'" align="left" prop="moldName" />
          <!--<el-table-column label="备注" align="left" prop="remark" />-->
          <el-table-column label="创建人" align="left" prop="createBy" />
          <el-table-column label="创建时间" align="left" prop="createTime" />
          <el-table-column label="操作" align="left" class-name="small-padding fixed-width" width="160" v-if="tableButtonType">
            <template slot-scope="scope">
              <div class="table-button-box">
                <p class="table-button-null"></p>
                <p class="table-button-p"
                   v-hasPermiAnd="['laboratory:classtype:query','laboratory:classtype:edit']"
                   @click="handleUpdate(scope.row)"
                >修改</p>
                <p class="table-button-p"
                   v-hasPermi="['laboratory:classtype:remove']"
                   @click="handleDelete(scope.row)"
                >删除</p>
                <p class="table-button-null"></p>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <pagination
          v-show="total>0"
          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getList"
        />
        <!-- 添加或修改安全分级类型对话框 -->
        <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body
                   :close-on-click-modal="false">
          <el-form ref="form" :model="form" :rules="rules" label-width="110px">
            <el-form-item label="实验室类型" prop="moldName">
              <el-input v-model="form.moldName" maxlength="10" placeholder="请输入实验室类型名称" />
            </el-form-item>
            <!--<el-form-item label="备注" prop="remark">-->
            <!--<el-input v-model="form.remark" placeholder="请输入备注" />-->
            <!--</el-form-item>-->
          </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>
    </div>
</template>

<script>
  import { labMoldList, addLabMold, putLabMold, delLabMold } from "@/api/laboratory/subjectClass";
    export default {
      name: "subjectClass",
      data() {
        return {
          tableButtonType:this.hasPermiDom(['laboratory:classtype:query','laboratory:classtype:edit','laboratory:classtype:remove']),
          // 遮罩层
          loading: true,
          // 选中数组
          ids: [],
          // 非单个禁用
          single: true,
          // 非多个禁用
          multiple: true,
          // 显示搜索条件
          showSearch: true,
          // 总条数
          total: 0,
          // 安全分级类型表格数据
          classtypeList: [],
          // 弹出层标题
          title: "",
          // 是否显示弹出层
          open: false,
          // 查询参数
          queryParams: {
            pageNum: 1,
            pageSize:20,
            typeName: null,
            systemSetting: null,
            deptName: null,
            deptId: null,
            userId: null,
          },
          // 表单参数
          form: {},
          // 表单校验
          rules: {
            moldName: [
              { required: true, message: "请输入实验室类型名称", trigger: "blur" },
              { required: true, message: "请输入安全类别名称", validator: this.spaceJudgment, trigger: "blur" }
            ],
          }
        };
      },
      created() {
        this.getList();
      },
      methods: {
        /** 查询安全分级类型列表 */
        getList() {
          this.loading = true;
          labMoldList(this.queryParams).then( response => {
            this.classtypeList =  response.rows;
            this.total =  response.total;
            this.loading = false;
          });
        },
        // 取消按钮
        cancel() {
          this.open = false;
          this.reset();
        },
        // 表单重置
        reset() {
          this.form = {
            id: null,
            typeName: null,
            systemSetting: null,
            deptName: null,
            deptId: null,
            createTime: null,
            userId: null,
            createBy: null,
            updateTime: null,
            updateBy: null,
            remark: null
          };
          this.resetForm("form");
        },
        /** 搜索按钮操作 */
        handleQuery() {
          this.queryParams.pageNum = 1;
          this.getList();
        },
        /** 重置按钮操作 */
        resetQuery() {
          // this.resetForm("queryForm");
          this.$set(this,'queryParams',{
            pageNum: 1,
            pageSize:20,
            typeName:"",
            title: '',
          });
          this.handleQuery();
        },
        // 多选框选中数据
        handleSelectionChange(selection) {
          this.ids = selection.map(item => item.id)
          this.single = selection.length!==1
          this.multiple = !selection.length
        },
        /** 新增按钮操作 */
        handleAdd() {
          this.reset();
          this.title = "新增实验室类型";
          this.open = true;
        },
        /** 修改按钮操作 */
        handleUpdate(row) {
          let obj = {
            id:row.id,
            moldName:row.moldName
          };
          this.$set(this,'form',obj);
          this.title = "修改实验室类型";
          this.open = true;
        },
        /** 提交按钮 */
        submitForm() {
          this.$refs["form"].validate(valid => {
            if (valid) {
              if (this.form.id != null) {
                putLabMold(this.form).then( response => {
                  this.msgSuccess("修改成功");
                  this.open = false;
                  this.getList();
                });
              } else {
                addLabMold(this.form).then( response => {
                  this.msgSuccess("新增成功");
                  this.open = false;
                  this.getList();
                });
              }
            }
          });
        },
        /** 删除按钮操作 */
        handleDelete(row) {
          const ids = row.id || this.ids;
          this.$confirm('是否确认删除实验室类型名称为"' + row.moldName + '"的数据项?', "警告", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          }).then(() => {
            delLabMold(ids).then(response => {
              this.msgSuccess("操作成功");
              this.getList();
            });
          }).catch(() => {});
        },
        /** 导出按钮操作 */
        handleExport() {
          this.download('laboratory/classtype/export', {
            ...this.queryParams
          }, `laboratory_classtype.xlsx`)
        }
      }
    }
</script>

<style scoped lang="scss">
  .subjectClass{
    flex:1;
    display: flex!important;
    flex-direction: column;
    padding:20px!important;
    .button-box{
      display: flex;
      width:190px;
      margin:0 auto;
    }

  }
</style>