hberp/hb_client/src/views/mtm/knowledgeBase.vue

<template>
    <div class="app-container">
      <el-card>
        <div>
          <el-button
            v-if="checkPermission(['equipment_create'])"
            type="primary"
            icon="el-icon-plus"
          >
            新增
          </el-button>
          <el-input
            v-model="listQuery.search"
            style="width: 300px"
            class="filter-item"
          />
          <el-button
            class="filter-item"
            type="primary"
            icon="el-icon-search"
          >
            刷新
          </el-button>
        </div>
      </el-card>
      <el-card shadow="false">
        <el-table
          v-loading="listLoading"
          :data="tableData.results"
          border
          fit
          stripe
          highlight-current-row
          height="100"
          v-el-height-adaptive-table="{bottomOffset: 42}"
        >
          <el-table-column label="序号" type="index" width="80"/>
          <el-table-column label="资料类别" prop="type" min-width="120">
          </el-table-column>
          <el-table-column label="资料编码" prop="code" min-width="120">
          </el-table-column>
          <el-table-column label="资料名称" prop="name" min-width="120" show-overflow-tooltip>
          </el-table-column>
          <el-table-column label="资料描述" prop="text" min-width="120" show-overflow-tooltip>
          </el-table-column>
          <el-table-column label="上传时间" prop="time" min-width="120">
          </el-table-column>
          <el-table-column label="上传人" prop="man" min-width="120">
          </el-table-column>
          <el-table-column label="资料状态" prop="status" min-width="120">
            <template slot-scope="scope">
                <el-tag type="success" effect="plain">通过</el-tag>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            label="操作"
            min-width="120px"
            fixed="right"
          >
            <template slot-scope="scope">
              <el-link type="primary">上传</el-link>
              <el-link type="primary">编辑</el-link>
              <el-link type="primary">下载</el-link>
            </template>
          </el-table-column>
        </el-table>
        <pagination
          v-show="tableData.count > 0"
          :total="tableData.count"
          :page.sync="listQuery.page"
          :limit.sync="listQuery.page_size"
          @pagination="getList"
        />
      </el-card>
    </div>
  </template>
  <script>
    import {getpEquipmentList} from "@/api/equipment";
    import {getUserList} from "@/api/user";
    import {getOrgList} from "@/api/org";
    import checkPermission from "@/utils/permission";
    import {genTree} from "@/utils";
    import Pagination from "@/components/Pagination"; // secondary package based on el-pagination
    const defaultequipment = {
      name: "",
      number: "",
    };
    export default {
      components: {Pagination},
      data() {
        return {
          equipment: defaultequipment,
          tableData: {
            count: 4,
            results:[
                {type:'作业指导',code:'20220001',name:'冷加工工序操作手册',text:'冷加工工序操作规范及注意事项',time:'2022-10-12 10:23',man:'admin',status:'通过'},
                {type:'图纸',code:'20220002',name:'产品B图纸',text:'长聘B的详情说明',time:'2022-9-10 10:23',man:'admin',status:'通过'},
                {type:'质量缺陷',code:'20210002',name:'外观缺陷指南',text:'加工注意事项',time:'2021-07-12 10:23',man:'admin',status:'通过'},
                {type:'故障维修',code:'20210001',name:'钢化炉故障维修指南',text:'钢化炉维修说明',time:'2021-10-12 10:23',man:'admin',status:'通过'},
             ],
          },
          listQuery: {
            page: 1,
            page_size: 20,
          },
          keeperOptions: [],
          depOptions: [],
          listLoading: true,
        };
      },
      computed: {},
      watch: {},
      created() {
        this.getList();
        this.getUserList();
        this.getOrgList();
      },
      methods: {
        checkPermission,
  
        //设备列表
        getList() {
          this.listLoading = true;
          this.listQuery.type = 1;
          getpEquipmentList(this.listQuery).then((response) => {
            if (response.data) {
              this.equipmentList = response.data;
            }
            this.listLoading = false;
          });
        },
  
        //组员列表
        getUserList() {
          getUserList({pageoff: true}).then((res) => {
            this.keeperOptions = genTree(res.data);
          });
        },
  
        //部门列表
        getOrgList() {
          getOrgList({pageoff: true}).then((res) => {
            this.depOptions = genTree(res.data);
          });
        },
  
        handleFilter() {
          this.listQuery.page = 1;
          this.getList();
        },
  
        resetFilter() {
          this.listQuery = {
            page: 1,
            page_size: 20,
          }
          this.getList();
        },
  
        handleCreate() {
          this.equipment = Object.assign({}, defaultequipment);
          this.dialogType = "new";
          this.dialogVisible = true;
          this.$nextTick(() => {
            this.$refs["Form"].clearValidate();
          });
        },
  
        handleEdit(scope) {
          this.equipment = Object.assign({}, scope.row); // copy obj
          this.dialogType = "edit";
          this.dialogVisible = true;
          this.$nextTick(() => {
            this.$refs["Form"].clearValidate();
          });
        },
  
        handleDelete(scope) {
          this.$confirm("确认删除?", "警告", {
            confirmButtonText: "确认",
            cancelButtonText: "取消",
            type: "error",
          })
            .then(async () => {
            //   
            })
            .catch((err) => {
              this.$message.error(err);
            });
        },
  
       
      },
    };
  </script>