shuili-vue/src/views/sluice/runManage/dispatch/plan/components/edit.vue

<script>

import {
  getRunSzScheduling
} from "@/api/scheduling";
import {getToken} from "@/utils/auth";
import preview from "./preview.vue";
import {uploadFileData} from "@/api/system/upload";
export default {
  name: "Edit",
  props: {
    model: {
      type: Object,
      default: null
    }
  },
  components: {
    preview
  },
  data() {
    return {
      dialog: {
        title: '预览',
        dom: '',
        visible: false
      },
      preViewFile: '',
      file: null,
      fileList: [],
      headers: {
        shuili: "water " + getToken(),
      },
      ruleForm: {
        planName: '',
        engineeringManagementUnit: '',
        wagaCode: '',
        wagaName: '',
        docs: []
      },
      rules: {
        wagaName: [
          {required: true, message: "请输入闸门名称", trigger: "blur"},
        ],
        planName: [
          {required: true, message: "请输入计划名称", trigger: "blur"},
          {max: 50, message: "不能超过50个字符", trigger: "blur"},
        ],
        engineeringManagementUnit: [
          {required: true, message: "请选择主管单位", trigger: "blur"},
        ],
        code: [
          {required: true, message: "请输入注册编码", trigger: "blur"},
        ],
        docs: [
          {required: true, message: "请上传调度方案", trigger: "blur"},
        ]
      }
    }
  },
  async mounted() {
    if (this.model) {
      const data = await getRunSzScheduling(this.model.id)
      this.ruleForm.planName = data.data.planName
      this.ruleForm.engineeringManagementUnit = data.data.engineeringManagementUnit
      this.ruleForm.wagaCode = data.data.wagaCode
      this.ruleForm.wagaName = data.data.wagaName
      this.ruleForm.docs = data.data.docs
      this.fileList = data.data.docs
    } else {
      this.ruleForm.engineeringManagementUnit = this.$store.state.scheduling.wagaData.engineeringManagementUnit
      this.ruleForm.wagaCode = this.$store.state.scheduling.wagaData.wagaCode
      this.ruleForm.wagaName = this.$store.state.scheduling.wagaData.wagaName
    }
  },
  methods: {
    submitForm(callback) {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          callback({
            ...this.ruleForm
          })
        }
      })
    },
    handleUpload(e) {
      const {file} = e;
      let formData = new FormData();
      console.log(file)
      formData.append("file", file);
      uploadFileData(formData)
          .then((res) => {
            this.ruleForm.docs.push({
              name: res.fileName,
              url: res.url,
            })
            if (this.ruleForm.docs.length === 1) {
              this.ruleForm.planName = file.name.split('.')[0]
            }
            this.fileList = this.ruleForm.docs
          })
    },
    beforeUpload(file) {
      this.file = file
      const isLt2M = file.size / 1024 / 1024 < 50;
      if (!isLt2M) {
        this.file = false
        this.$message.error('上传头像图片大小不能超过 50m!');
        return false
      }
    },
    handleOpinionRemove(file) {
      let index = this.fileList.findIndex((item) => item.uid === file.uid);
      // 删除文件
      this.ruleForm.docs.splice(index, 1);
    },
    // 关闭dialog
    closeDialog() {
      this.dialog.visible = false
    },
    handlePreview(file) {
      this.dialog.visible = true
      this.preViewFile = file.url
    },
    handleExceed(files, fileList) {
      this.$message.warning(`当前限制选择 5 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
    },
    beforeRemove(file, fileList) {
      if (this.file) {
        return this.$confirm(`确定移除 ${file.name}？`);
      }
    }
  }
}
</script>

<template>
  <div style="display:flex; flex-direction: column">
    <div style="display: flex; margin-bottom: 16px">
      <div
          style="
            width: 5px;
            height: 16px;
            background-color: #31a08e;
            margin-right: 8px;
          "
      ></div>
      <span style="font-weight: 600">基础信息</span>
    </div>
    <el-form
        :model="ruleForm"
        :rules="rules"
        :disabled="!!model && model.eventType !== 'edit'"
        ref="ruleForm"
        label-width="100px"
    >
      <el-col :span="12">
        <el-form-item label-width="120px" label="水闸名称" prop="wagaName">
          <el-input disabled style="width: 202px" v-model="ruleForm.wagaName" placeholder="请输入水闸名称"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label-width="120px" label="主管单位" prop="engineeringManagementUnit">
          <el-input disabled style="width: 202px" v-model="ruleForm.engineeringManagementUnit"
                    placeholder="请输入主管单位"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label-width="120px" label="计划名称" prop="planName">
          <el-input
            style="width: 202px"
            v-model="ruleForm.planName"
            placeholder="请输入计划名称"
            maxlength="50"
            show-word-limit></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label-width="120px" label="注册编码" prop="wagaCode">
          <el-input disabled style="width: 202px" v-model="ruleForm.wagaCode" placeholder="请输入注册编码"></el-input>
        </el-form-item>
      </el-col>
      <!--      <el-col :span="12">-->
      <!--        <el-form-item label-width="120px" label="三个责任人" prop="responsibility">-->
      <!--          <el-input style="width: 202px" v-model="ruleForm.responsibility"></el-input>-->
      <!--        </el-form-item>-->
      <!--      </el-col>-->

      <el-col :span="24">
        <div style="display: flex; margin-bottom: 16px">
          <div
              style="
              width: 5px;
              height: 16px;
              background-color: #31a08e;
              margin-right: 8px;
            "
          ></div>
          <span style="font-weight: 600">详细信息</span>
        </div>
      </el-col>
      <el-col :span="12">
        <el-form-item label-width="120px" label="调度方案" prop="docs">
          <el-upload
              class="avatar-uploader"
              action="#"
              :http-request="handleUpload"
              :on-preview="handlePreview"
              :before-remove="beforeRemove"
              :before-upload="beforeUpload"
              :on-remove="handleOpinionRemove"
              multiple
              accept=".doc, .docx, .pdf, .png, .jpg"
              :limit="5"
              :on-exceed="handleExceed"
              :file-list="fileList">
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">只能上传doc/docx/pdf/png/jpg且不能超过50m</div>
          </el-upload>
        </el-form-item>
      </el-col>
      <div ref="word"></div>
      <!--      <el-col :span="12">-->
      <!--        <el-form-item label-width="120px" label="水闸建设图纸" prop="drawing">-->
      <!--          <el-upload-->
      <!--            class="upload-demo"-->
      <!--            action="https://jsonplaceholder.typicode.com/posts/"-->
      <!--            :on-preview="handlePreview"-->
      <!--            :before-remove="beforeRemove"-->
      <!--            accept=".pdf, .png, .jpg"-->
      <!--            multiple-->
      <!--            :limit="5"-->
      <!--            :on-exceed="handleExceed"-->
      <!--            :auto-upload="false"-->
      <!--            :file-list="fileList">-->
      <!--            <el-button size="small" type="primary">点击上传</el-button>-->
      <!--            <div slot="tip" class="el-upload__tip">只能上传pdf/png/JPG文件，且不能超过50m</div>-->
      <!--          </el-upload>-->
      <!--        </el-form-item>-->
      <!--      </el-col>-->
    </el-form>
    <el-dialog
        :title="dialog.title"
        @close="closeDialog"
        :visible.sync="dialog.visible"
        width="80%"
        append-to-body
    >
      <preview v-if="dialog.visible" :url="preViewFile"></preview>
    </el-dialog>
  </div>
</template>

<style scoped lang="scss">

</style>