aiplat_vue/src/views/modules/visi/design-csvselect-config.vue

<template>
  <div class="ant-tabs-tabpane">
    <el-tabs default-active-key="1" @change="callback" visible.sync="visible">
      <el-tab-pane key="1" label="节点设置">
        <el-form :layout="formLayout">
          <el-form-item name="nodeName" label=" 节点名称">
            <el-input placeholder="请输入节点名称" v-model="nodeName" />
          </el-form-item>
          <!-- <el-form-item name="userstyle" label="使用方法">
            <el-descriptions >
              选择输入文件数据集预览数据，获取表头信息，通过设置新的行列范围创建新数据集
            </el-descriptions>
    
          </el-form-item> -->
          <el-form-item name="userstyle" label=" 使用方法">
            <el-input
              placeholder="选择输入文件数据集预览数据，获取表头信息，通过设置新的行列范围创建新数据集"
              :disabled="true"
              type="textarea"
              :autosize="{ minRows: 3 }"
            />
          </el-form-item>

          <!-- <el-form-item :wrapper-col="buttonItemLayout.wrapperCol">
            <el-button type="primary" @click="primary"> 保存 </el-button>
          </el-form-item> -->
        </el-form>
      </el-tab-pane>
      <el-tab-pane key="2" label="参数设置">
        <el-form :layout="formLayout">
          <el-form-item label="获取数据集">
            <el-select
              v-model="inputnodefilevalue"
              placeholder="请选择"
              @change="changeslect"
            >
              <el-option
                v-for="item in inputnodefilemap"
                :key="item.name"
                :label="item.name"
                :value="item"
              ></el-option>
            </el-select>
          </el-form-item>

          <el-form-item
            :wrapper-col="buttonItemLayout.wrapperCol"
            label-width="50%"
          >
            <el-button type="primary" @click="getCSVHeader">
              获取表头
            </el-button>
            <el-button type="primary" @click="previewfile"> 预览 </el-button>
          </el-form-item>
        </el-form>
        <!-- csv文件头信息 -->
        <el-table
          :data="allStringinfo"
          style="width: 100%"
          stripe empty-text=" "
          max-height="300"
        >
          <el-table-column type="index"></el-table-column>
          <el-table-column
            v-for="(item, index) in headerinfo"
            :key="index"
            :label="item"
          >
            <template slot-scope="scope">{{ scope.row[index] }}</template>
          </el-table-column>
        </el-table>
        <span
          >当前文件共有 {{ rownum == 0 ? 0 : rownum + 1 }} 行
          {{ colnum == 0 ? colnum : colnum + 1 }} 列数据</span
        >
        <el-divider></el-divider>
        <el-form>
          <el-form-item label="行">
            <el-input-number
              v-model="rowminnum"
              controls-position="right"
              :min="0"
              :max="rownum"
            ></el-input-number>
            <el-input-number
              v-model="rowmaxnum"
              controls-position="right"
              :min="0"
              :max="rownum"
            ></el-input-number>
          </el-form-item>
          <el-form-item label="列">
            <el-input-number
              v-model="colminnum"
              controls-position="right"
              :min="0"
              :max="colnum"
            ></el-input-number>
            <el-input-number
              v-model="colmaxnum"
              controls-position="right"
              :min="0"
              :max="colnum"
            ></el-input-number>
          </el-form-item>
          <el-button type="primary" @click="getnewfile">创建</el-button>
        </el-form>
      </el-tab-pane>
      <el-tab-pane key="3" label="新文件">
        <el-form :layout="formLayout">
          <el-form-item label="文件名">
            <el-input placeholder="请输入节点名称" v-model="newfilename" />
          </el-form-item>
          <el-form-item
            :wrapper-col="buttonItemLayout.wrapperCol"
            label-width="50%"
          >
            <el-button type="primary" @click="getnewCSVHeader">
              获取表头
            </el-button>
            <el-button type="primary" @click="previewnewfile"> 预览 </el-button>
          </el-form-item>
        </el-form>
        <!-- csv文件头信息 -->
        <el-table
          :data="newallStringinfo"
          style="width: 100%"
          stripe empty-text=" "
          max-height="300"
        >
        <el-table-column type="index"></el-table-column>
          <el-table-column
            v-for="(item, index) in newheaderinfo"
            :key="index"
            :label="item"
          >
            <template slot-scope="scope">{{ scope.row[index] }}</template>
          </el-table-column>
        </el-table>
        <span
          >当前文件共有 {{ newrownum == 0 ? 0 : newrownum + 1 }} 行
          {{ newcolnum == 0 ? 0 : newcolnum + 1 }} 列数据</span
        >
        <el-divider></el-divider>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
// import { Tabs } from "antd";
// import classNames from "classnames";
import { MessageBox } from "element-ui";
import { Message } from "element-ui";
import templs from "../alg/templs.vue";
export default {
  components: { templs },
  data() {
    return {
      visible: false,
      isMakenewfile: false,
      inputnodefilemap: [], //输入节点输入的文件
      inputnodefilevalue: [], //选中的文件信息
      // inputnodefilevalue 每一个值包含以下三个部分
      // bucketname: "visiarguartifact"
      // fileurl: "http://150.158.138.99:9006/visiarguartifact/argoworkflow/DY_1019.csv?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=minio%2F20220724%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20220724T102526Z&X-Amz-Expires=1000&X-Amz-SignedHeaders=host&X-Amz-Signature=e7d18bcc2b3e0352194cbeddf3b3c5e2696b09916d9cbb326f56ccd01c181718"
      // name: "DY_1019.csv"
      filename: null,
      cell: null,
      nodeName: "1",

      formLayout: "horizontal", //:layout="formLayout"
      form: this.$form.createForm(this, { name: "coordinated" }),
      rownum: 0,
      colnum: 0,
      headerinfo: null,
      allStringinfo: null,
      rowminnum: null,
      rowmaxnum: null,
      colminnum: null,
      colmaxnum: null,

      //包含所有文件
      allfilemap: [{}],

      //新文件
      tab3visi: false,
      newrownum: 0,
      newcolnum: 0,
      newheaderinfo: null,
      newallStringinfo: null,
      newfilename: null,
      newbucketname: null,
      newfileurl: null,
    };
  },
  created() {},
  mounted() {
    // this.init();
  },
  methods: {
    handleFormLayoutChange(e) {
      this.formLayout = e.target.value;
    },
    indexMethod(index) {
        return index ;
      },
    callback(key) {
      console.log(key);
    },
    init() {
      this.visible = true;
    },
    init1(celldata, cell) {
      this.visible = true;
      this.inputnodefilemap = celldata.inputnodefilemap;
      this.inputnodefilevalue = celldata.inputnodefilevalue;
      this.allfilemap = celldata.allfilemap;
      this.cell = cell;

      //新创建的文件初始化
      if (celldata.isMakenewfile) {
        //已经创建过
        this.tab3visi = true;
        this.newfilename =
          celldata.allfilemap[celldata.allfilemap.length - 1].name;
        this.newfileurl =
          celldata.allfilemap[celldata.allfilemap.length - 1].fileurl;
      }
    },
    primary() {
      // console.log("design-csvselectnode-config   primary");
      // this.cell.setData({ nodeName: this.nodeName });
      this.cell.setData({ allfilemap: this.allfilemap });

      this.cell.setData({ inputnodefilemap: this.inputnodefilemap });
      this.cell.setData({ inputnodefilevalue: this.inputnodefilevalue });

      // this.cell.setData({ outputsparameters: this.outputsparameters });
      //20210922   zhang    是否需要保存 获取到的源数据

      this.$emit("primaryCSVselectNodeclick", this.conditionForm,this.cell);
    },

    //新建边时，源节点为输入节点，节点内部获取输入节点对应的文件 name及url
    changeinputnodemap(celldata, cell, sallfilemap) {
      celldata.inputnodefilemap = sallfilemap;
      cell.setData({ inputnodefilemap: sallfilemap });
      this.inputnodefilemap = sallfilemap;
    },

    // 实现select选择框可下拉单选，也可输入赋值
    handleSearch(value) {
      this.handleChange(value);
    },
    handleChange(value) {
      this.value = value != null && value != "" ? value : [];
    },
    handleBlur(value) {
      this.value = value;
      if (this.list.indexOf(value) == -1) {
        this.list.push(value);
      }
    },

    // selectBlur(e) {
    //   // 意见类型
    //   if (e.target.value !== "") {
    //     this.value = e.target.value + "(其他)";
    //     this.$forceUpdate(); // 强制更新
    //   }
    // },

    selectBlur(e, row) {
      // this.inputContent = e.target.value ;
      // row.value = e.target.value;
    },
    selectClear() {
      this.value = "";
      this.$forceUpdate();
    },
    selectChange(val) {
      this.value = val;
      this.$forceUpdate();
    },
    cascadehandleChange(value) {},
    cascadeparahandleChange(value) {
      // console.log("多选参数");
      // console.log(value);

      // console.log(quotevalue)
      // 是否与上次的类型相同
      // let changeFlag = false;
      // let changeItem = null;
      // if (this.shareScopeEnd.length == 0) {
      //   this.quotevalue = val
      // } else {
      //   // 与原数组比对
      //   this.value.forEach((item) => {
      //     if (item[0] !== this.shareScopeEnd[0][0]) { // 一级标签不同
      //       changeFlag = true
      //       changeItem = item
      //     } else if (item[1] != this.shareScopeEnd[0][1]) { // 一级标签相同但是二级标签不同
      //       changeFlag = true
      //       changeItem = item
      //     } else if ((!item[2] && this.shareScopeEnd[0][2]) || (item[2] && !this.shareScopeEnd[0][2])) {
      //       changeFlag = true
      //       changeItem = item
      //     }
      //   })
      // }
      // if (changeFlag) {
      //   this.value = []
      //   this.value.push(changeItem)
      // }
      // this.shareScopeEnd = this.value
    },

    // 以下4个函数是文件上传功能的
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    handleExceed(files, fileList) {
      Message.warning(
        `当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
          files.length + fileList.length
        } 个文件`
      );
    },
    beforeRemove(file, fileList) {
      return MessageBox.confirm(`确定移除 ${file.name}？`);
    },

    //
    changeslect(item) {
      // console.log("输入文件数据集名称")
      // console.log(item)
      // concole.log(item.target)
    },
    //获取CSV文件表头信息
    getCSVHeader() {
      if (
        this.inputnodefilevalue == null ||
        this.inputnodefilevalue.name == null
      ) {
        Message.error("未选择文件");
      } else {
        // this.getWorkflowStatus();
        // console.log("获取CSV文件表头信息");
        this.$http({
          url: this.$http.adornUrl("/visi/visiworkflow/getCSVHeader"),
          method: "get",
          params: this.$http.adornParams({
            bucketname: this.inputnodefilevalue.bucketname,
            filename: this.inputnodefilevalue.name,
          }),
        })
          .then(({ data }) => {
            if (data && data.code === 0) {
              this.$nextTick(() => {
                this.rownum = Number(data.index) - 1;
                this.colnum = Number(data.col) - 1;
                this.headerinfo = data.headerinfo;
                this.allStringinfo = data.allstring;
              });
            }
          })
          .then(() => {
            // console.log("获取的表头信息");
            // console.log(this.headerinfo);
            // console.log(this.allStringinfo);
            // console.log(this.rownum);
            // console.log(this.colnum);
          });
      }
    },

    //预览  输入文件
    previewfile(paraname, valuefrom) {
      if (
        this.inputnodefilevalue == null ||
        this.inputnodefilevalue.name == null
      ) {
        Message.error("未选择文件");
      } else {
        // if (artifiletype == "csv") {
        // console.log("csv类型");
        let routeData = this.$router.resolve({
          path: "/visi-previewcsv",
          query: {
            csvurl: this.inputnodefilevalue.fileurl,
          },
        });
        window.open(routeData.href, "_blank");
        // } else {
        //   console.log("其他");
        //   window.open(this.inputnodefilevalue);
        // }
      }
    },
    //创建新文件
    getnewfile() {
      if (
        this.inputnodefilevalue == null ||
        this.inputnodefilevalue.name == null ||
        this.rowminnum == null ||
        this.rowmaxnum == null ||
        this.colminnum == null ||
        this.colmaxnum == null
      ) {
        Message.error("输入有误");
      } else {
        // this.getWorkflowStatus();
        // console.log("获取CSV文件表头信息");
        this.$http({
          url: this.$http.adornUrl("/visi/visiworkflow/getnewfile"),
          method: "get",
          params: this.$http.adornParams({
            bucketname: this.inputnodefilevalue.bucketname,
            filename: this.inputnodefilevalue.name,
            rowminnum: this.rowminnum,
            rowmaxnum: this.rowmaxnum,
            colminnum: this.colminnum,
            colmaxnum: this.colmaxnum,
          }),
        })
          .then(({ data }) => {
            if (data && data.code === 0) {
              this.$nextTick(() => {
                this.newfilename = data.newfilename;
                this.newfileurl = data.newfileurl;
                this.newbucketname = "visiarguartifact";

                var fileitem = {};
                fileitem["name"] = data.newfilename;
                fileitem["bucketname"] = "visiarguartifact";
                fileitem["fileurl"] = data.newfileurl;
                this.allfilemap.push(fileitem);
                // this.allfilemap.pop(0);
              });
            }
          })
          .then(() => {
            // console.log("获取的表头信息");
            // console.log(this.headerinfo);
            // console.log(this.allStringinfo);
            // console.log(this.rownum)
            // console.log(this.colnum)
            Message.success("创建新文件成功")
            this.primary();
          });
          
      }
    },

    //获取新创建的文件的CSV文件表头信息
    getnewCSVHeader() {
      if (this.newfilename == null) {
        Message.error("未创建新文件");
      } else {
        // this.getWorkflowStatus();
        console.log("获取CSV文件表头信息");
        this.$http({
          url: this.$http.adornUrl("/visi/visiworkflow/getCSVHeader"),
          method: "get",
          params: this.$http.adornParams({
            bucketname: this.newbucketname,
            filename: this.newfilename,
          }),
        })
          .then(({ data }) => {
            if (data && data.code === 0) {
              this.$nextTick(() => {
                this.newrownum = Number(data.index);
                this.newcolnum = Number(data.col);
                this.newheaderinfo = data.headerinfo;
                this.newallStringinfo = data.allstring;
              });
            }
          })
          .then(() => {});
      }
    },

    //预览  新创建的文件
    previewnewfile(paraname, valuefrom) {
      if (this.newfilename == null) {
        Message.error("未创建新文件");
      } else {
        // if (artifiletype == "csv") {
        // console.log("csv类型");
        let routeData = this.$router.resolve({
          path: "/visi-previewcsv",
          query: {
            csvurl: this.newfileurl,
          },
        });
        window.open(routeData.href, "_blank");
        // } else {
        //   console.log("其他");
        //   window.open(this.inputnodefilevalue);
        // }
      }
    },
  },
  computed: {
    formItemLayout() {
      const { formLayout } = this;
      return formLayout === "horizontal"
        ? {
            labelCol: { span: 4 },
            wrapperCol: { span: 14 },
          }
        : {};
    },
    buttonItemLayout() {
      const { formLayout } = this;
      return formLayout === "horizontal"
        ? {
            wrapperCol: { span: 14, offset: 4 },
          }
        : {};
    },
  },
};
</script>
<style>
.ant-tabs-tabpane {
  background: #fff;
  padding: 5px;
  width: 100%;
  height: 100%;
}
.ant-tabs-tab {
  flex: 1 1 50px;
  padding: 7px 16px;
  display: flex;
  justify-content: center;
  width: 100%;
  height: 100%;
}
.el-select .el-input {
  /* width: 130px; */
  width: 100%;
  /* width: 0px; */
}
.input-with-select .el-input-group__prepend {
  background-color: #fff;
}
.el-form-item.el-input {
  width: 150px;
}
.logList-item {
  padding: 8px 0;
  margin: 0;
  font: normal 13px/1.2 "Courier", sans-serif;
}
.log-box {
  /* min-height: 500px; */
  /* max-height: 800px; */
  height: 100%;
  padding: 10px;
  margin: 10px;
  background-color: #fff;
}
</style>