CodeBaseForm.vue 7.17 KB
<template>
  <a-spin :spinning="confirmLoading">
    <j-form-container :disabled="formDisabled">
      <a-form-model ref="form" :model="model" :rules="validatorRules" slot="detail">
        <a-row>
          <a-col :span="24">
            <a-form-model-item label="工单号" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="workCode">
              <a-input v-model="model.workCode" placeholder="请输入工单号"  ></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="程序名称" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="name">
              <a-input v-model="model.name" placeholder="请输入程序名称"  ></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="图号" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="drawno">
              <a-input v-model="model.drawno" placeholder="请输入图号"  ></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="备注" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="remark">
              <a-input v-model="model.remark" placeholder="请输入备注"  ></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="文件id" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="remark">
              <a-input v-model="model.fileId" placeholder=""  disabled="disabled"></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="文件名称" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="remark">
              <a-input v-model="model.fileName" placeholder="" disabled="disabled" ></a-input>
            </a-form-model-item>
          </a-col>

          <a-col :span="24">
            <a-form-model-item label="文件路径" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="remark">
              <a-input v-model="model.fileUrl" placeholder="" disabled="disabled" ></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-item
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              label="上传程序">
              <a-upload
                name="file"
                :multiple="false"
                :action="minioUploadAction"
                :headers="tokenHeader"
                :showUploadList="false"
                :beforeUpload="beforeUpload"
                @change="handleChange">
                <a-button>
                  <a-icon type="upload"/>
                  加工程序上传
                </a-button>
              </a-upload>
             
              
            </a-form-item>
          </a-col>
          
        </a-row>
      </a-form-model>
    </j-form-container>
  </a-spin>
</template>

<script>

  import { httpAction, getAction } from '@/api/manage'
  import {JeecgListMixin} from '@/mixins/JeecgListMixin'

  export default {
    name: 'CodeBaseForm',
    mixins: [JeecgListMixin],
    components: {
    },
    props: {
      //表单禁用
      disabled: {
        type: Boolean,
        default: false,
        required: false
      }
    },
    data () {
      return {
        model:{
          fileId: '',
          fileName: '',
          fileUrl: ''
         },
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 },
        },
        confirmLoading: false,
        validatorRules: {
          workCode: [{ required: true, message: '请输入工单号!' }],
          name: [{ required: true, message: '请输入名称!' }],
          drawno: [{ required: true, message: '请输入图号!' }]
        },
        url: {
          add: "/code_base/codeBase/add",
          list: "1",
          edit: "/code_base/codeBase/edit",
          queryById: "/code_base/codeBase/queryById",
          upload: "/sys/oss/file/upload", 
          delete: "/sys/oss/file/delete",
          minioUpload: "/sys/upload/uploadCodeBaseMinio"
        }
      }
    },
    computed: {
      formDisabled(){
        return this.disabled
      },
      minioUploadAction() {
        return window._CONFIG['domianURL'] + this.url.minioUpload;
      },
    },
    created () {
       //备份model原始值
      this.modelDefault = JSON.parse(JSON.stringify(this.model));
    },
    methods: {
      add () {
        this.edit(this.modelDefault);
      },
      edit (record) {
        this.model = Object.assign({}, record);
        this.visible = true;
      },
      fileUpload(type){
        
      },
      beforeUpload(file) {
        var fileType = file.type;
        if (fileType === 'image') {
          if (fileType.indexOf('image') < 0) {
            this.$message.warning('请上传图片');
            return false;
          }
        } else if (fileType === 'file') {
          if (fileType.indexOf('image') >= 0) {
            this.$message.warning('请上传文件');
            return false;
          }
        }
        return true
      },
      handleChange(info) { 
        if (info.file.status === 'done') {
          if (info.file.response.success) { 
            this.model.fileId = info.file.response.result.id;
            this.model.fileName = info.file.response.result.fileName;
            this.model.fileUrl = info.file.response.result.url;
            this.$message.success(`${info.file.name} 上传成功!`);
          } else {
            this.$message.error(`${info.file.response.message}`);
          }
        } else if (info.file.status === 'error') {
          this.$message.error(`${info.file.response.message}`);
        }
      },
      ossDelete(id) {
        var that = this;
        that.$confirm({
          title: "确认删除",
          content: "是否删除选中文件?",
          onOk: function () {
            that.handleDelete(id)
          }
        });
      },
      handlePreview(record) {
        if (record && record.url) {
          let url = window._CONFIG['onlinePreviewDomainURL'] + '?url=' + encodeURIComponent(record.url)
          window.open(url, '_blank')
        }
      },
      submitForm () {
        if(this.model.fileId === ''){
          this.$message.error("请先上传程序,再保存!!"); 
          return false;
        }
        const that = this;
        // 触发表单验证
        this.$refs.form.validate(valid => {
          if (valid) {
            that.confirmLoading = true;
            let httpurl = '';
            let method = '';
            if(!this.model.id){
              httpurl+=this.url.add;
              method = 'post';
            }else{
              httpurl+=this.url.edit;
               method = 'put';
            }
            httpAction(httpurl,this.model,method).then((res)=>{
              if(res.success){
                that.$message.success(res.message);
                that.$emit('ok');
              }else{
                that.$message.warning(res.message);
              }
            }).finally(() => {
              that.confirmLoading = false;
            })
          }
         
        })
      },
    }
  }
</script>