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>
// import degraDialog from "../wf/degraD3.vue";
export default {
  name: "index",
//   components: {
//     degraDialog
//   },
  data() {
    return {
      workflowName:"",
      workFlowId:'',
      apiObj: this.$API.ofm.mroom.list,
      selection: [],
      checkList: [],
      fileList: [],
      timeRange: [],
      lending_type: "",
      query: {},
      editId: null,
      isSaving: false,
      limitedVisible: false,
      limitedWatch: false,
      type: "add",
      titleMap: {
        add: "新增",
        edit: "编辑",
        show: "查看",
      },
      //表单数据
      addForm: {
        seal: [],
        seal_other: "",
        filename: "",
        contents: "",
        file_count: "",
        is_lending: "",
        contacts: "",
        lending_date: "",
        return_date: "",
        actual_return_date: "",
        reason: "",
      },
      //验证规则
    };
  },
  methods: {
    //添加工作流
    handleAdd() {
      this.type = "add";
      this.limitedVisible = true;
    },
    handleCancel() {
        this.limitedVisible = false;       // 关闭弹窗
        this.lending_type = "";    // 重置 lending_type
        // 如果需要，也可以重置整个表单：
        // this.addForm = { lending_type: "", ...其他字段... };
      },

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

    async submit() {
      let that = this;
      let res = null;
      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.editId,
            that.addForm
          );
        }
        that.isSaving = false;
        that.limitedVisible = false;
        that.$refs.table.refresh();
      } catch (e) {
        that.isSaving = false;
      }
    },
    fileUPSuccess(res) {
        let that = this;
        console.log('res',res);
        this.test_file = res.path;
    },
    mroomEidt(row) {
      this.type = "edit";
      this.editId = row.id;
      this.limitedVisible = true;
      this.addForm = Object.assign({}, row);
      }
    },
    async mroomDel(row) {
      var id = row.id;
      var res = await this.$API.ofm.mroom.delete.req(id);
      if (res.err_msg) {
        this.$message.error(res.err_msg);
      } else {
        this.$refs.table.refresh();
        this.$message.success("删除成功");
      }
    },

    //搜索
    handleQuery() {
      this.$refs.table.queryData(this.query);
    },
};
</script>
<style scoped>
.treeMain {
  height: 280px;
  overflow: auto;
  border: 1px solid #dcdfe6;
  margin-bottom: 10px;
}

::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.2);
  background-color: #fefefe;
  border-radius: 5px;
}

::-webkit-scrollbar-thumb {
  border-radius: 5px;
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
  background-color: #f5f5f5;
}
.node rect {
  stroke: #606266;
  fill: #fff;
}

.edgePath path {
  stroke: #606266;
  fill: #333;
  stroke-width: 1.5px;
}

g.conditions > rect {
  fill: #00ffd0;
  stroke: #000;
}

.el-icon-close {
  cursor: pointer;
}

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