factory_web/src/views/ofm/mroom.vue

<template>
  <el-container>
    <el-header>
      <div class="left-panel-group">
        <el-button
          type="primary"
          icon="el-icon-plus"
          @click="handleAdd"
        ></el-button>
        </div>
      <div class="right-panel">
        <el-input
            v-model="query.search"
            placeholder="会议室名称"
            clearable
            @keyup.enter="handleQuery"
          ></el-input>
          <el-button
            type="primary"
            icon="el-icon-search"
            @click="handleQuery"
          ></el-button>
      </div>
    </el-header>
    <el-main class="nopadding">
      <scTable ref="table" :apiObj="apiObj" row-key="id">
        <el-table-column label="#" type="index"></el-table-column>
        <el-table-column
          label="会议室名称"
          prop="name"
          min-width="100"
        ></el-table-column>
        <el-table-column
          label="位置"
          prop="location"
          min-width="100"
        ></el-table-column>
        <el-table-column
          label="容纳人数"
          prop="capacity"
          min-width="120"
        >
        </el-table-column>
        <el-table-column label="操作" fixed="right" align="center" width="250">
          <template #default="scope">
            <el-button
              link
              size="small"
              type="primary"
              @click="mroomEidt(scope.row)"
              >编辑
            </el-button>
            <el-popconfirm
              title="确定删除吗？"
              @confirm="mroomDel(scope.row)"
            >
              <template #reference>
                <el-button
                  link
                  size="small"
                  type="danger"
                  >删除</el-button
                >
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </scTable>
    </el-main>
  </el-container>
  <el-dialog :title="titleMap[type] " v-model="limitedVisible" width="600px">
    <el-form
      :model="addForm"
      :rules="rules"
      ref="addForm"
      label-width="100px"
      label-position="left"
    > 
      <el-form-item label="会议室名称" prop="name">
        <el-input v-model="addForm.name" clearable></el-input>
      </el-form-item>
      <el-form-item label="地点" prop="location">
        <el-input v-model="addForm.location" clearable></el-input>
      </el-form-item>
      <el-form-item label="容纳人数" prop="capacity">
        <el-input v-model="addForm.capacity" clearable></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="handleCancel">取 消</el-button>
      <el-button
        v-if="type !== 'show'"
        type="primary"
        :loading="isSaving"
        @click="submitHandle()"
      >保 存</el-button>
    </template>
  </el-dialog>
</template>

<script>
export default {
  name: "mroom",
  data() {
    return {
      apiObj: this.$API.ofm.mroom.list,
      query: {},
      editId: null,
      isSaving: false,
      limitedVisible: false,
      type: "add",
      titleMap: {
        add: "新增",
        edit: "编辑",
        show: "查看",
      },
      addForm: {
        name: "",
        location: "",
        capacity: "",
      },
       rules: {
        name: [{ required: true, message: "请输入会议室名称", trigger: "blur" }],
        location: [{ required: true, message: "请输入地点", trigger: "blur" }],
        capacity: [{ required: true, message: "请输入容纳人数", trigger: "blur" }],
      },
    };
  },
  methods: {
    //添加工作流
    handleAdd() {
      this.type = "add";
      this.limitedVisible = true;
    },
    handleCancel() {
        this.limitedVisible = false;
    },

    submitHandle() {
      let that = this;
      that.$refs.addForm.validate((valid) => {
        if (valid) {
          that.isSaving = true;
          that.submit();
        }
      });
    },

    async submit() {
      let that = this,res = null;
      console.log('that.type',that.type);
      console.log('that.addForm',that.addForm);
      try {
        if (that.type === "add") {
          res = await that.$API.ofm.mroom.create.req(that.addForm);
        } else {
          res = await that.$API.ofm.mroom.update.req(that.addForm.id,that.addForm);
        }
        that.isSaving = false;
        that.limitedVisible = false;
        that.$refs.table.refresh();
      } catch (e) {
        that.isSaving = false;
      }
    },
    mroomEidt(row) {
      let that = this;
      that.type = "edit";
      that.editId = row.id;
      that.limitedVisible = true;
      that.addForm = Object.assign({}, row);
    },
    async mroomDel(row) {
      let that = this;
      var id = row.id;
      var res = await that.$API.ofm.mroom.delete.req(id);
      if (res.err_msg) {
        that.$message.error(res.err_msg);
      } else {
        that.$refs.table.refresh();
        that.$message.success("删除成功");
      }
    },
    //搜索
    handleQuery() {
      this.$refs.table.queryData(this.query);
    },
  },
}
</script>
<style scoped>

.left-panel-group {
  display: flex;
  align-items: center;
  gap: 6px;        /* 按钮之间的间隙，可以调小点 */
  margin-left: 0;  /* 靠左 */
}
</style>