hz-zhhq-web/src/views/auditFlow/index.vue

<template>
  <el-container class="container">
    <el-header class="filter-container">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <!-- <el-row> -->
        <div>
          <el-form-item label="关键字" class="form-flex">
            <el-input @input="e => formInline.keyWord = validForbid(e)" :value="formInline.keyWord" maxlength="20"
                      placeholder="请输入关键字"
            ></el-input>
          </el-form-item>
          <el-button type="primary" @click="onSubmit()">查询</el-button>
          <el-button type="primary" @click="onRest()">重置</el-button>
          <!--          <el-button type="primary" @click="edit({})">添加</el-button>-->
        </div>
        <!-- </el-row> -->
      </el-form>
    </el-header>
    <!-- max-height="500" -->
    <div class="table">
      <el-table :element-loading-text="loadingMsg" v-loading="loading" :data="tableData" stripe border
                style="width:100%"
      >
        <el-table-column fixed prop="num" label="序号" min-width="50" width="50" align="center">
          <template slot-scope="scope">{{
              page.sizePage * ((page.limit == 0 ? 1 : page.limit) - 1) + (scope.$index + 1)
            }}
          </template>
        </el-table-column>
        <el-table-column prop="real_name" label="流程名称" min-width="150" align="center">
          <template slot-scope="scope">
            <el-popover placement="top-start" title width="200" trigger="hover" :content="scope.row.NAME">
              <div class="maxsize" slot="reference">{{ scope.row.NAME }}</div>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column prop="dept_name_url" label="流程总数" min-width="50" align="center">
          <template slot-scope="scope">
            <el-popover placement="top-start" title width="50" trigger="hover" :content="(scope.row.NUM)">
              <div class="maxsize" slot="reference">{{ scope.row.NUM }}</div>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column prop="org_name" label="流程类型" min-width="200" align="center">
          <template slot-scope="scope">
            <el-popover placement="top-start" title width="200" trigger="hover" :content="(scope.row.TYPENAME)">
              <div class="maxsize" slot="reference">{{ scope.row.TYPENAME }}</div>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column label="操作" min-width="200" align="center">
          <template slot-scope="{row}">
            <el-button type="primary" size="mini" @click="edit(row)">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页 -->
    <div class="foot-total">
      <Paging @currentChanges="currentChanges" :pageNum="parseInt(page.limit)" :size="parseInt(page.sizePage)"
              :total="parseInt(page.total)"
      />
    </div>
    <el-dialog
      class="l-dialog"
      title="审批流配置"
      width="980px"
      :visible.sync="isflag"
      v-if="isflag"
      :destroy-on-close="true"
    >
      <EditFlow
        :style="{width: '980px',maxHeight: '65vh',overflow: 'auto'}"
        :row="row"
        v-on:cancel="closeDialog"
      />
    </el-dialog>

  </el-container>
</template>
<script>
import Paging from "@/views/Public/paging.vue";
import {getAuditFlowList} from "@/api/getdata";
import EditFlow from "@/views/auditFlow/editFlow.vue";

export default {
  data() {
    return {
      loading: false, //初始化loading
      isShowTree: false,
      loadingMsg: "",
      row: {},
      validation: false,
      food_name: "",
      formInline: {
        keyWord: "",
      },
      page: {
        limit: 0 /** 当前点击*/,
        sizePage: 10 /** 当前多少页*/,
        total: 0 /**总数 */
      },
      tableData: [
        {
          id: 1,
          name: "流程1",
          num: 10,
          type: "流程类型1"
        }
      ],
      isflag: false /**用于设置弹窗 */,
      num: 3
    };
  },
  components: {
    Paging,
    EditFlow
  },
  mounted() {
    this.getlist();
  },
  methods: {
    createLoad() {
      this.loading = true;
      this.loadingMsg = "加载中...";
    },
    clearLoad() {
      this.loading = false;
      this.loadingMsg = "";
    },
    // 分页
    currentChanges(val) {
      this.createLoad();
      this.page.limit = val;
      this.getlist();
    },

    getlist() {
      let Content = {
        pageSize: 10, //数量  必传
        pageIndex: this.page.limit == "0" ? 1 : this.page.limit, //页码  必传
        keyWord: this.formInline.keyWord,
      };
      getAuditFlowList(Content)
        .then(res => {
          console.log("res===>" + JSON.stringify(res));
          if (res.returnCode == "1") {
            this.clearLoad();
            this.tableData = res.returnData.data;
            this.page.total = res.returnData.total;
            this.page.limit = res.returnData.currentPage;
            this.tableData.id = res.returnData.data.id;
          } else {
            this.$message({
              message: res.returnMsg,
              type: "warning"
            });
            setTimeout(() => {
              this.clearLoad();
            }, 300);
          }
        })
        .catch(err => {
          setTimeout(() => {
            this.clearLoad();
          }, 300);
        });
    },
    onSubmit() {
      this.page.limit = 1;
      this.createLoad();
      this.getlist();
    },
    onRest() {
      this.formInline.keyWord = "";
      this.page.limit = 1;
      this.createLoad();
      this.getlist();
    },
    edit(data) {
      this.row = Object.assign({}, data);
      this.isflag = true;
    },
    closeDialog() {
      this.isflag = false;
      this.row = {};
      this.getlist();
    },
  }
};
</script>
<style>
.filter-container {
  width: 100%;
  height: auto !important;
  /* flex-basis: 120px; */
}


.table {
  /* width:  */
  background: #eeeeee;
  padding: 10px;
  margin: 10px;
}

</style>