handleparam.vue 4.14 KB
<template>
  <div class="paramset-box">
    <el-dialog
      :title="curtype === 'export' ? '配置导出' : '配置导入'"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose"
    >
      <div class="setparams-box">
        <el-form
          label-width="80px"
          :model="paramform"
          v-show="curtype === 'upload'"
        >
          <el-form-item label="类型">
            <el-select v-model="paramform.fileType">
              <el-option
                v-for="type in types"
                :key="type.type_code"
                :value="type.type_code"
                :label="type.conf_name"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="名称">
            <el-input v-model="paramform.name"></el-input>
          </el-form-item>
          <el-form-item label="文件">
            <el-upload
              class="upload-demo"
              ref="paramsup"
              action=""
              :on-change="handlePreview"
              multiple
              :limit="1"
              :auto-upload="false"
              :on-success="sucessfile"
              :file-list="fileList"
            >
              <el-button size="small" slot="trigger" type="primary"
                >点击上传</el-button
              >
              <div slot="tip" class="el-upload__tip">只能上传tar.gz文件.</div>
            </el-upload>
          </el-form-item>
        </el-form>
        <el-form
          label-width="80px"
          :model="exportform"
          v-show="curtype === 'export'"
        >
          <el-form-item label="类型">
            <el-select v-model="paramform.fileType">
              <el-option
                v-for="type in types"
                :key="type.type_code"
                :value="type.type_code"
                :label="type.conf_name"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose()">取 消</el-button>
        <el-button type="primary" @click="uploadparams()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false,
      paramform: {
        fileType: ""
      },
      exportform: {},
      fileList: [],
      types: [],
      curtype: "",
      upfile: ""
    };
  },
  methods: {
    show(type) {
      this.curtype = type;
      this.dialogVisible = true;
      this.$store.commit("setocxstate", 1);
    },
    handlePreview(file, fileList) {
      if (this.uploadFile(file, "application/x-gzip")) {
        this.upfile = file;
        return false;
      } else {
        this.fileList = [];
        return false;
      }
    },
    uploadparams() {
      let render = new FileReader();
      let file_text = "";
      reader.readAsDataURL(this.upfile);
      reader.onloadend = () => {
        let dataURL = reader.result.split(";base64,");
        let file_ext = "";
        if (this.upfile.name.slice(-7) === ".tar.gz") {
          file_ext = ".tar.gz";
        } else if (this.upfile.name.slice(-3) === ".gz") {
          file_ext = ".gz";
        }
      };
      let obj = {
        command: "put /wsapi/v1/devconf_fx/conf_param",
        src_page: "",
        params: {
          type_code: this.paramform.fileType,
          subtask_id: this.subtask_id,
          conf_name: this.paramform.name,
          file_ext: file_ext,
          file_b64: dataURL[1],
          is_temp: 1
        }
      };
      this.globalWs.send(JSON.stringify(obj));
      console.log(this.upfile);
    },
    sucessfile() {},

    submitParamSet() {},
    handleClose(done) {
      (this.dialogVisible = false), this.$store.commit("setocxstate", 0);
    },
    getTypes() {
      let params = {
        offset: 0,
        limit: ""
      };
      this.$api.device.getConfParam(params).then(res => {
        this.types = res.list_data;
      });
    }
  },
  created() {
    this.getTypes();
  }
};
</script>

<style lang="stylus" scoped>
.setparams-box{
  width 400px
  margin 0 auto
}
.paramset-box{
  overflow hidden
}
</style>