spc/src/views/spc-basic/processFlow.vue

<!--
 * @Author: zwq
 * @Date: 2022-08-22 15:53:16
 * @LastEditors: zwq
 * @LastEditTime: 2022-09-01 15:45:42
 * @Description: 
-->
<template>
  <el-card shadow="never" class="aui-card--fill">
    <el-row :gutter="10">
      <el-col :span="10">
        <el-form
          style="background-color:#e6f7ff;padding:10px 20px"
          :inline="true"
          :model="dataForm"
          @keyup.enter.native="getDataList()"
        >
          <el-form-item>
            <el-input v-model="dataForm.paramKey" clearable placeholder="请输入关键字查询" />
          </el-form-item>
          <el-form-item>
            <el-button @click="getDataList()">
              <svg class="icon-svg"><use xlink:href="#icon-sousuo"></use></svg>
              查询
            </el-button>
          </el-form-item>
        </el-form>
        <el-table
          :data="dataList"
          height="650"
          highlight-current-row
          @current-change="handleCurrentChange"
          :header-cell-style="{
            background: '#eef1f6',
            color: '#606266',
            height: '56px',
          }"
          border
          v-loading="dataListLoading"
          style="width: 100%;"
        >
          <el-table-column
            fixed="left"
            type="index"
            header-align="center"
            align="center"
            label="序号"
            width="50"
          >
          </el-table-column>
          <el-table-column prop="name" label="名称" fixed="left"> </el-table-column>
          <el-table-column prop="code" label="编码" fixed="left"> </el-table-column>
        </el-table>
      </el-col>
      <el-col :span="14">
    <process-flow-graph
      ref="graphRef"
      @refreshDataList="getDataList"
    ></process-flow-graph>
      </el-col>
    </el-row>
  </el-card>
</template>

<script>
import processFlowGraph from './components/processFlow-graph'

export default {
  data() {
    return {
      dataListLoading: false,
      dataList: [],
      dataForm: {
        paramKey: "",
      },
      currentRow: "",
    };
  },
  components: {
    processFlowGraph,
  },
  activated() {
    this.getDataList();
  },
  methods: {
    getDataList() {
      this.dataListLoading = true;
      this.$http
        .get("/basic/product/page", {
          params: {
            page: 1,
            limit: 500,
            code: this.dataForm.paramKey,
            name: this.dataForm.paramKey,
          },
        })
        .then(({ data: res }) => {
          this.dataListLoading = false;
          if (res.code !== 0) {
            this.dataList = [];
            return this.$message.error(res.msg);
          }
          this.dataList = res.data.list;
        })
        .catch(() => {
          this.dataListLoading = false;
        });
    },
    handleCurrentChange(val) {
      console.log(val);
      this.currentRow = val;
    },
  },
};
</script>