python_93040206/ClientPlatform/src 2/pages/service/add.vue

<template>
  <el-dialog
    title="添加"
    :visible.sync="dialogVisible"
    width="70%"
    :before-close="handleClose"
  >
    <el-form ref="form" :model="form" label-width="80px">
      <el-form-item label="服务名称">
        <el-input v-model="form.name"></el-input>
      </el-form-item>
      <el-form-item label="数据来源">
        <el-select v-model="form.source" placeholder="请选择">
          <el-option label="SNP" value="DNA"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="dataset">
        <el-upload
          class="upload-demo"
          action="string"
          drag
          :http-request="UploadImage"
          :on-change="fileChange"
          :file-list="fileList"
          multiple
        >
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        </el-upload>
      </el-form-item>
      <el-form-item label="补充说明">
        <el-input type="textarea" v-model="form.desc"></el-input>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="submit">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { createOrder, createService, uploadFile } from "@/api";
import { mapState } from "vuex";

const UploadFileApi = () => {};
export default {
  name: "add",
  data() {
    return {
      title: "",
      dialogVisible: false,
      form: {
        name: "",
        isRunNow: false,
        source: "",
        runTime: "",
        delTime: "",
      },
      fileList: [],
      fileListID: [],
    };
  },
  computed: {
    ...mapState({
      userInfo: (state) => state.userInfo,
    }),
  },
  methods: {
    show() {
      this.dialogVisible = true;
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
    onBeforeUploadImage(file) {
      // console.log("file", file);
      return true;
      // const isIMAGE = file.type === "image/jpeg" || "image/jpg" || "image/png";
      // const isLt1M = file.size / 1024 / 1024 < 1;
      // if (!isIMAGE) {
      //   this.$message.error("上传文件只能是图片格式!");
      // }
      // if (!isLt1M) {
      //   this.$message.error("上传文件大小不能超过 1MB!");
      // }
      // return isIMAGE && isLt1M;
    },
    UploadImage(param) {
      const formData = new FormData();
      formData.append("file", param.file);
      uploadFile(formData)
        .then((response) => {
          console.log(104, response);
          console.log("上传图片成功");
          if (response.code === 200) {
            this.fileListID.push(response.data);
          }

          param.onSuccess(); // 上传成功的图片会显示绿色的对勾
          // 但是我们上传成功了图片， fileList 里面的值却没有改变，还好有on-change指令可以使用
        })
        .catch((response) => {
          console.log("图片上传失败");
          param.onError();
        });
    },
    fileChange(file) {
      console.log(114, file);
      // this.$refs.upload.clearFiles(); // 清除文件对象
      // this.logo = file.raw; // 取出上传文件的对象，在其它地方也可以使用
      // this.fileList = [{ name: file.name, url: file.url }]; // 重新手动赋值filstList， 免得自定义上传成功了, 而fileList并没有动态改变， 这样每次都是上传一个对象
    },
    async submit() {
      console.log(this.form);
      console.log(140, this.userInfo);
      const params = {
        ...this.form,
        user_id: this.userInfo.id,
        fileListID: this.fileListID,
      };
      const res = await createService(params);
      console.log(139, res);
      // this.dialogVisible = false
    },
  },
};
</script>
<style lang="less" scoped>
.page-box {
}
</style>