Merge branch 'develop' of http://117.34.109.166:18448/r/vue_mdc_430

zenglf

2023-09-18 92ff846fb659c62037a32b1d8c15eae9df9d9b54

 src/views/eam/modules/specialtyMaintenanceStandard/MaintenanceStandardWorkInstructionModal.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,357 @@
<template>
  <a-modal
    :title="title"
    :width="850"
    :visible="visible"
    :maskClosable="false"
    :confirmLoading="confirmLoading"
    :okButtonProps="{ props: {disabled: disableSubmit} }"
    @ok="handleOk"
    @cancel="handleCancel"
    cancelText="关闭"
  >
    <a-spin :spinning="confirmLoading">
      <a-form :form="form">
        <a-row :gutter="24">
          <a-col :span="24">
            <a-form-item
              :labelCol="{span:4}"
              :wrapperCol="{span:18}"
              label="文档编码"
            >
              <a-input
                :disabled="disableSubmit"
                placeholder="请输入文档编码"
                v-decorator="['num', validatorRules.num ]"
              />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col :span="24">
            <a-form-item
              :labelCol="{span:4}"
              :wrapperCol="{span:18}"
              label="文件类型"
            >
              <j-dict-select-tag
                allow-clear
                placeholder="请选择文档类型"
                :triggerChange="true"
                dictCode="mom_eam_document_type,name,id, del_flag!='1'"
                v-decorator="['fileType', validatorRules.fileType ]"
              />
            </a-form-item>
          </a-col>
          <!-- <a-col :span="24">
            <a-form-item
              :labelCol="{span:3}"
              :wrapperCol="{span:21}"
              label="文件类型"
            >
              <a-radio-group
                v-for="(item,index) in fileTypes"
                :key="index"
                button-style="solid"
                v-decorator="['fileType', validatorRules.fileType ]"
                :disabled="disableSubmit"
              >
                <a-radio-button :value="item.value">
                  {{item.text}}
                </a-radio-button>
              </a-radio-group>
            </a-form-item>
          </a-col> -->
        </a-row>
        <a-row :gutter="24">
          <a-col :span="24">
            <a-form-item
              :labelCol="{span:4}"
              :wrapperCol="{span:18}"
              label="文件上传"
            >
              <a-upload-dragger
                name="file"
                :customRequest="customRequest"
                @change="handleChange"
                :file-list="fileList"
                :multiple="false"
              >
                <p class="ant-upload-drag-icon">
                  <a-icon type="inbox" />
                </p>
                <p class="ant-upload-text">
                  ç‚¹å‡»ä¸Šä¼ æˆ–拖拽文件至该区域进行上传
                </p>
                <p class="ant-upload-hint">
                  ä»…支持单文件上传
                </p>
              </a-upload-dragger>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col :span="24">
            <a-form-item
              :labelCol="{span:4}"
              :wrapperCol="{span:18}"
              label="文件名称"
            >
              <a-input
                :disabled="true "
                placeholder="请输入文件名称"
                v-decorator="['name', validatorRules.name ]"
              />
            </a-form-item>
          </a-col>
        </a-row>

        <a-row :gutter="24">
          <a-col :span="24">
            <a-form-item
              :labelCol="{span:4}"
              :wrapperCol="{span:18}"
              label="文件描述"
            >
              <a-textarea
                :disabled="disableSubmit"
                placeholder="请输入文件描述"
                allow-clear
                v-decorator="['description', validatorRules.description]"
              />
            </a-form-item>
          </a-col>
        </a-row>

      </a-form>
    </a-spin>
  </a-modal>
</template>
 
<script>
import { getAction, postAction, postFileAction } from '@/api/manage'
import Vue from 'vue'
import JInput from '@/components/jeecg/JInput'
import Tooltip from 'ant-design-vue/es/tooltip'
import JEllipsis from "@/components/jeecg/JEllipsis";
import { ajaxGetDictItems } from '@/api/api'
import { ACCESS_TOKEN, TENANT_ID } from "@/store/mutation-types"

export default {
  name: "UploadModel",
  components: {
    JInput,
    Tooltip,
    JEllipsis,
  },
  data() {
    return {
      title: "操作",
      visible: false,
      disableSubmit: false,
      model: {},
      labelCol: {
        xs: { span: 24 },
        sm: { span: 8 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
      confirmLoading: false,
      form: this.$form.createForm(this),
      headers: {},
      validatorRules: {
        num: {
          rules: [
            { required: true, message: '请输入编码！' },
            { min: 0, max: 150, message: '最长 30 ä¸ªå­—符', trigger: 'blur' },
          ]
        },
        fileType: {
          rules: [
            { required: true, message: '请输入选择类型！' },
          ]
        },
        name: {
          rules: [
            { required: true, message: '请输入名称！' },
          ]
        },
      },
      url: {
        add: "/eam/maintenanceStandardWorkInstruction/add",
        edit: "/eam/maintenanceStandardWorkInstruction/edit",
        listByBusIdAndBusType: "/system/sysUploadRela/listByBusIdAndBusType",
      },
      //用于展示文件
      fileList: [],
      fileObject: {},
      fileTypes: [],
      //用于判断附件的状态  add：新增页面的附件  edit：编辑页面的附件为被修改i   editUpdate：编辑页面的附件被修改
      isFileChange: false,
      uploadId: '',
      maintenanceStandardId: '',
    }
  },

  methods: {
    customRequest(val) {
      if (this.fileList.length == 0) {
        this.fileObject = val;
      }
    },

    handleChange(info) {
      //默认给附件状态，仅控制样式
      let file = info.file;
      //文件更改，标记更新
      if (this.model.id) {
        this.isFileChange = true;
      }
      //删除
      if (file.status == "removed") {
        this.fileList = [];
        this.fileObject.file = {};
        this.form.setFieldsValue({ name: '' });
        return false;
      }
      //单文件控制
      if (this.fileList.length > 0) {
        this.$message.warning("当前仅允许上传一个文件！");
        return false;
      }
      file.status = 'done';
      //页面展示上传文件
      this.fileList.push(file);
      this.form.setFieldsValue({ name: file.name });
    },

    add() {
      this.edit({})
    },

    edit(record) {
      let that = this;
      that.visible = true;
      that.isFileChange = false;
      that.model = Object.assign({}, record);
      that.fileList = [];
      that.form.resetFields();
      that.uploadId = ''
      if (record.isNoPhotoFlag) {
        //获取当前文件对应附件
        getAction(that.url.listByBusIdAndBusType, { busId: record.id, busType: 'maintenance_standard_work_instruction' }).then((res) => {
          if (res.success) {
            for (let i = 0; i < res.result.length; i++) {
              that.fileList.push({
                uid: res.result[i].upload.id,
                name: res.result[i].upload.name,
                status: "done",
              })
              that.$nextTick(() => {
                that.form.setFieldsValue({ name: res.result[i].upload.name });
              });
            }
          }
        })
      }
    },

    close() {
      this.$emit('close');
      this.visible = false;
    },

    handleOk() {
      const that = this;
      // è§¦å‘表单验证
      that.form.validateFields((err, values) => {
        if (JSON.stringify(that.fileObject.file) == '{}' && that.uploadId == '' && that.fileList.length == 0) {
          that.$message.warning("请上传文件");
          return false
        }
        if (!err) {
          that.confirmLoading = true;
          let httpurl = ''
          let method = ''
          if (!that.model.id) {
            httpurl += that.url.add;
            method = 'post';
          } else {
            httpurl += that.url.edit;
            method = 'put';
          }
          let formData = Object.assign(that.model, values);

          formData.type = "maintenance_standard_work_instruction";
          formData.uploadId = that.uploadId;
          // formData.fileType = "7";//文件类型  7：图片
          formData.maintenanceStandardId = this.maintenanceStandardId;
          var saveDate = new FormData();

          formData.isFileChange = that.isFileChange;

          saveDate.append("file", that.fileObject.file);
          saveDate.append('data', JSON.stringify(formData));

          postFileAction(httpurl, saveDate, this.headers).then((res) => {
            if (res.success) {
              that.$message.success(res.message);
              that.$emit('ok');
            } else {
              that.$message.warning(res.message);
            }
          }).finally(() => {
            that.confirmLoading = false;
            that.close();
          })
        }
      }).catch((e) => { })
    },

    handleCancel() {
      this.close();
    },
    initFileTypes() {
      ajaxGetDictItems("common_upload_type", null).then((res) => {
        if (res.success) {
          this.fileTypes = res.result;
        }
      })
    },

  },

  created() {
    this.initFileTypes();
    const token = Vue.ls.get(ACCESS_TOKEN);
    const tenantid = Vue.ls.get(TENANT_ID)
    this.headers = {
      'Content-Type': 'multipart/form-data',
      "X-Access-Token": token,
      'X-Access-Tenant': tenantid
    };
  },
}
</script>
<style scoped>
.ant-btn {
  padding: 0 10px;
  margin-left: 3px;
}

.ant-form-item-control {
  line-height: 0px;
}

/** ä¸»è¡¨å•è¡Œé—´è· */
.ant-form .ant-form-item {
  margin-bottom: 10px;
}

/** Tab页面行间距 */
.ant-tabs-content .ant-form-item {
  margin-bottom: 0px;
}
</style>