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

<script>

export default {
  name: "Edit",
  props: {
    model: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
      ruleForm: {
        sluice: '',
        plan: '',
        sponsor: '',
        code: '',
        responsibility: '',
        programme: '',
        drawing: ''
      },
      rules: {
        sluice: [
          { required: true, message: "请输入闸门名称", trigger: "blur" },
        ],
        plan: [
          { required: true, message: "请输入计划名称", trigger: "blur" },
        ],
        sponsor: [
          { required: true, message: "请选择主管单位", trigger: "blur" },
        ],
        code: [
          { required: true, message: "请输入注册编码", trigger: "blur" },
        ],
        responsibility: [
          { required: true, message: "请选择三个责任人", trigger: "blur" },
        ],
      },
      fileList: []
    }
  },
  methods: {
    handlePreview(file) {
      console.log(file);
    },
    handleExceed(files, fileList) {
      this.$message.warning(`当前限制选择 5 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
    },
    beforeRemove(file, fileList) {
      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="24">
        <el-form-item label-width="120px" label="水闸名称" prop="sluice">
          <el-input style="width: 202px" v-model="ruleForm.sluice" placeholder="请输入水闸名称"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
      <el-form-item label-width="120px" label="计划名称" prop="plan">
        <el-input style="width: 202px" v-model="ruleForm.plan" placeholder="请输入计划名称"></el-input>
      </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label-width="120px" label="主管单位" prop="sponsor">
          <el-input style="width: 202px" v-model="ruleForm.sponsor"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label-width="120px" label="注册编码" prop="code">
          <el-input style="width: 202px" v-model="ruleForm.code" 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="programme">
          <el-upload
            class="upload-demo"
            action="https://jsonplaceholder.typicode.com/posts/"
            :on-preview="handlePreview"
            :before-remove="beforeRemove"
            multiple
            accept=".doc, .docx, .pdf, .png, .jpg"
            :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">只能上传doc/docx/pdf/png/JPG文件，且不能超过50m</div>
          </el-upload>
        </el-form-item>
      </el-col>
      <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>
  </div>
</template>

<style scoped lang="scss">

</style>