spfm-market-front/src/pages/main/workflowdef/Import.vue

<template>
    <el-dialog title="导入" @close="closeDialog" :close-on-click-modal="false" v-if="visible" :visible.sync="visible" append-to-body>
        <el-form style="margin-top:20px" :model="model" ref="form" @submit.native.prevent @keyup.enter.native="dataFormSubmit()" label-width="80px">
            <el-form-item label="模板文件" prop="file" verify :maxLength="255" label-width="100px" class="is-required exportFile">
                <el-input v-model="model.file" style="display:none;width:100%;height:100%"></el-input>
                <div class="btnUpfileBox">
                    <div class="filename">{{ this.model.file }}<span v-if="!this.model.file" style="color: rgb(204, 204, 204);">(请选择上传文件)</span></div>
                    <el-button type="primary" @click="uploadTrigger">点击上传<i class="el-icon-upload el-icon--right"></i></el-button>
                </div>
                <input type="file" @change="onDataFileSelect" style="display:none;width:100%;height:100%" ref="upFilesDataRef" />
            </el-form-item>
            <el-form-item label="模板名称" prop="name" verify :maxLength="255" label-width="100px" class="is-required">
                <el-input v-model="model.name"></el-input>
            </el-form-item>
            <el-form-item label="模板key" prop="key" verify :maxLength="255" label-width="100px" class="is-required">
                <el-input v-model="model.key"></el-input>
            </el-form-item>
            <el-form-item label="模型描述" prop="description" class="is-required" verify label-width="100px" :maxLength="200">
                <el-input type="textarea" v-model="model.description"></el-input>
            </el-form-item>
            <el-form-item label="模型分类" verify can-be-empty label-width="100px" :maxLength="200">
                <el-input  v-model="model.category"></el-input>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
            <el-button @click="visible = false">关闭</el-button>
        </span>
    </el-dialog>
</template>

<script>
export default {
    data() {
        return {
            formAction: 0, //0 add,//1,edit
            visible: false,
            title: '添加',
            disabled: false,
            btn: '提交',
            aproveVisible: false,
            model: {
                file: '',
                name: '',
                key: '',
                description: '',
                category: ''
            },
            filesData: '',
            filename: ''
        }
    },
    created() {},
    activated() {},
    methods: {
        init(id) {
            Object.assign(this.$data, this.$options.data.call(this))
            this.visible = true

            if (id) {
                let self = this
                var obj = {
                    url: this.$url.workflowdef.getById,
                    data: {
                        id: id
                    }
                }
                this.common.httpPost(obj, success)
                function success(data) {
                    self.model = data.data
                    self.model.description = self.model.desc
                }
            } else {
                this.model = {}
                self.formAction = 0

                // self.$nextTick(() => {
                //   self.$refs.form.resetFields();
                //   self.formAction = 0;
                // })
            }
        },
        uploadTrigger() {
            this.$refs.upFilesDataRef.click()
        },
        // 上传科研数据的事件
        onDataFileSelect(e) {
            // if (this.$refs.upFilesDataRef.value.indexOf('.txt') != -1) return this.$message('不支持.txt格式的文件 ')
            var f = e.target.files || e.dataTransfer.files
            if (!f.length) return
            this.filesData = f[0]
            console.log(this.filesData)

            // 上传进度
            var _this = this
            this.$refs.upFilesDataRef.onchange = function() {
                var fr = new FileReader()
                fr.readAsDataURL(this.files[0])
                var total = this.files[0].size
                fr.onprogress = function(ev) {
                    _this.percentage = parseInt((ev.loaded / total) * 100) + '%'
                    console.log(_this.percentage)
                    if (_this.percentage == '100%') {
                        _this.$set(_this.model, 'file', _this.filesData.name)
                    }
                }
            }
            this.$refs.upFilesDataRef.onchange()
        },
        closeDialog() {
            this.$refs.form.resetFields()
            this.filesData = ''
            this.$refs.upFilesDataRef.value = ''
        },
        dataFormSubmit() {
            let self = this
            self.$refs['form'].validate(async valid => {
                if (valid) {
                    var formdata = new FormData()
                    // form.append('name', this.model.name)
                    // form.append('key', this.model.name)
                    // form.append('description', this.model.name)
                    // form.append('category', this.model.name)
                    if (!this.model.file) return this.$message.error('请检查您的文件！')
                    formdata.append('file', this.filesData)
                    console.log(this.filesData)
                    delete this.model.file
                    var obj = {
                        url: this.$url.processinst.exportFile,
                        data: this.model
                    }
                    const  {data:res} = await this.common.postRequestHybid(obj, formdata)
                    console.log(res)
                    if(res.code!==1) return this.$message.error('导入失败！')
                    this.$emit('change')
                    // let model = self.model
                    // var obj = {
                    //     url: this.$url.workflowdef.add,
                    //     data: self.model
                    // }
                    // this.common.httpPost(obj, success)
                    // function success(data) {
                    //     self.$notify.success({
                    //         title: '',
                    //         message: '操作成功!'
                    //     })
                    //     self.$parent.editFormVisible = false
                    //     self.$parent.doSearch(1)
                    // }
                } else {
                    self.$notify.error({
                        title: '错误',
                        message: '系统输入验证失败！'
                    })
                    return false
                }
            })
        }
    }
}
</script>
<style>
.exportFile input {
    border: none !important;
    /* width: 75px;
    height: 25px;
    opacity: 0;
    filter: alpha(opacity=0);
    background-color: lawngreen; */
}
.btnUpfileBox {
    display: flex;
}
.btnUpfileBox .filename {
    width: 300px;
    margin-right: 10px;
}
.btnUpfileBox .btnUpfile {
    width: 100px;
    height: 100%;
    background-color: #409eff;
}
.btnUpfileBox span {
    display: inline-block;
    width: 100%;
    text-align: right;
}
</style>