factory_web/src/views/ofm/borrowfile.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.file_name"
                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="file_name"
          min-width="100"
        ></el-table-column>
        <el-table-column
          label="申请部门"
          prop="belong_dept_name"
          min-width="100"
        ></el-table-column>
        <el-table-column
          label="申请人"
          prop="create_by_name"
          min-width="100"
        ></el-table-column>
        <el-table-column
          label="申请人电话"
          prop="contacts"
          min-width="100"
        ></el-table-column>
        <el-table-column
          label="借阅时间"
          prop="borrow_date"
          min-width="100">
        </el-table-column>
        <el-table-column
          label="借阅数量"
          prop="count"
          min-width="100">
        </el-table-column>
        <el-table-column
          label="用途"
          prop="remark"
          min-width="120">
        </el-table-column>
        <el-table-column
          label="归还时间"
          prop="return_date"
          min-width="100"
        ></el-table-column>
        <el-table-column label="审批信息" width="200">
          <template #default="scope">
                                <el-tag :type="actStateEnum[scope.row.ticket_?.act_state]?.type">
                        {{ actStateEnum[scope.row.ticket_?.act_state]?.text }}
                    </el-tag>
            <el-tag type="info" effect="plain">{{ scope.row.ticket_?.state_.name }}</el-tag>

          </template>
        </el-table-column>
        <el-table-column label="操作" fixed="right" align="center" width="250">
          <template #default="scope">
            <el-button
              link
              size="small"
              type="primary"
              @click="borrowShow(scope.row)"
              v-auth="'fileborrow.update'"
              >详情
            </el-button>
            <el-popconfirm
              title="确定删除吗？"
              @confirm="borrowDel(scope.row)"
            >
              <template #reference>
                <el-button
                  link
                  size="small"
                  type="danger"
                  v-auth="'fileborrow.delete'"
                  >删除</el-button
                >
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </scTable>
    </el-main>
  </el-container>
  <el-drawer 
      title="档案管理" 
      v-model="limitedVisible" 
      :destroy-on-close="true"
      direction="rtl"
      size="70%">

  <div style="display: flex; height: calc(100% - 60px);"> 
    <div style="flex: 1; padding-right: 20px; overflow-y: auto;">
      <borrowlForm
        :mode="mode"
        :t_id="t_id"
        @success="()=>{handleQuery(); limitedVisible = false}"
        @closed="limitedVisible = false"
      />
      </div>
    </div>
  </el-drawer>
</template>
<script>

import borrowlForm from "./borrowfile_form.vue";
import { actStateEnum, interveneTypeEnum } from "@/utils/enum.js";
export default {
  components: { borrowlForm },
  name: "index",
  data() {
    return {
      actStateEnum, interveneTypeEnum,
      apiObj: this.$API.ofm.borrow.list,
      query: {},
      limitedVisible: false,
      mode: "show",
      t_id: null,
    };
  },
  methods: {
    handleAdd() {
      this.mode = "add";
      this.t_id = null;
      this.limitedVisible = true;
    },
    borrowShow(row) {
      this.mode = "show";
      this.t_id = row.id;
      this.limitedVisible = true;
    },
    async borrowDel(row) {
      var id = row.id;
      var res = await this.$API.ofm.borrow.delete.req(id);
      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>