real3d-portalsite/src/views/Idleland/components/handleModal.vue

<template>
  <div class="hanledialog">
    <el-dialog
      :title="`闲置土地${type == 'judge' ? '判定' : '处置'}`"
      width="40%"
      :visible.sync="dialogVisible"
      :before-close="close"
      :modal-append-to-body="false"
      :close-on-click-modal="false"
    >
      <div class="content">
        <div v-if="type == 'judge'">
          <el-form :model="ruleForm" ref="ruleForm" label-width="100px">
            <el-form-item label="认定结论:" prop="isIdle">
              <el-select v-model="ruleForm.isIdle" size="mini">
                <el-option
                  v-for="item in optionList"
                  :key="item.code"
                  :label="item.name"
                  :value="item.code"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="闲置原因:" prop="idleReason">
              <el-select v-model="ruleForm.idleReason" size="mini">
                <el-option
                  v-for="item in reasonList"
                  :key="item.code"
                  :label="item.name"
                  :value="item.name"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="闲置时间(天):" prop="idleTime">
              <el-input
                size="mini"
                :min="0"
                :step="1"
                v-model="ruleForm.idleTime"
                type="number"
              ></el-input>
              <!-- <el-date-picker
                size="mini"
                v-model="ruleForm.idleTime"
                type="date"
                value-format="yyyy/MM/dd"
                placeholder="选择日期"
              >
              </el-date-picker> -->
            </el-form-item>
            <el-form-item label="认定时间" prop="confirmTime">
              <el-date-picker
                size="mini"
                v-model="ruleForm.confirmTime"
                type="date"
                value-format="yyyy/MM/dd"
                placeholder="选择日期"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item label="认定依据" prop="confirmBasis">
              <el-input
                size="mini"
                v-model="ruleForm.confirmBasis"
                :rows="3"
                type="textarea"
              ></el-input>
            </el-form-item>
          </el-form>
        </div>
        <div v-else>
          <el-form :model="dealForm" ref="dealForm" label-width="100px">
            <el-form-item label="处置时间:" prop="disposalTime">
              <el-date-picker
                size="mini"
                v-model="dealForm.disposalTime"
                type="date"
                value-format="yyyy/MM/dd"
                placeholder="选择日期"
              >
              </el-date-picker>
              <div class="tip">
                说明:如果已处置完毕，请填写处置日期，不填写表示未处置完毕！
              </div>
            </el-form-item>
            <el-form-item label="处置方式:" prop="disposalMethod">
              <el-input
                size="mini"
                v-model="dealForm.disposalMethod"
                :rows="2"
                type="textarea"
              ></el-input>
            </el-form-item>
            <el-form-item label="处置情况:" prop="disposalInfo">
              <el-input
                size="mini"
                v-model="dealForm.disposalInfo"
                :rows="2"
                type="textarea"
              ></el-input>
            </el-form-item>
          </el-form>
        </div>
        <div class="fileDiv">
          <div class="block-title">
            请上传相关认定材料：
            <el-upload
              class="upload-demo"
              :on-change="handleChange"
              :auto-upload="false"
              :show-file-list="false"
              :file-list="fileList"
              :limit="1"
              accept=".pdf,.jpg, .png"
            >
              <el-button size="mini" type="primary">导入</el-button>
            </el-upload>
          </div>
          <el-table :data="tofileList" height="200" style="width: 100%">
            <el-table-column label="序号" width="70px">
              <template slot-scope="scope">{{ scope.$index + 1 }}</template>
            </el-table-column>
            <el-table-column
              show-overflow-tooltip="true"
              prop="fileName"
              label="文件名称"
            >
            </el-table-column>
            <el-table-column label="操作" width="150px">
              <template slot-scope="scope">
                <span class="usable" @click="del(index)"> 删除 </span>
                <span class="usable" @click="download(scope.row)">查看</span>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submit">保存</el-button>
        <el-button @click="close">关闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { Confirm, Disposal, fileUpload } from "@/api/Idleland.js";
import { reasonList } from "./config.js";
export default {
  components: {},
  props: {},
  data() {
    return {
      dialogVisible: false,
      type: "judge",
      formData: {},
      optionList: [
        { code: false, name: "不是闲置土地" },
        { code: true, name: "是闲置土地" },
      ],
      reasonList: reasonList,
      ruleForm: {
        landId: "",
        isIdle: true,
        idleReason: "",
        idleTime: "",
        confirmTime: "",
        confirmBasis: "",
        files: [],
      },
      dealForm: {
        landId: "",
        disposalTime: "",
        disposalMethod: "",
        disposalInfo: "",
        files: [],
      },
      fileList: [],
      tofileList: [],
    };
  },
  created() {},
  methods: {
    // 关闭弹窗
    close() {
      this.dialogVisible = false;
      this.$emit("close");
    },
    Init(rowdata, type) {
      // this.formData = rowdata;
      this.reset();
      this.ruleForm.landId = rowdata.id;
      this.dealForm.landId = rowdata.id;
      this.type = type;
      this.dialogVisible = true;
    },
    reset() {
      this.ruleForm = {
        landId: "",
        isIdle: true,
        idleReason: "",
        idleTime: "",
        confirmTime: "",
        confirmBasis: "",
        files: [],
      };
      this.dealForm = {
        landId: "",
        disposalTime: "",
        disposalMethod: "",
        disposalInfo: "",
        files: [],
      };
      this.tofileList = [];
    },
    handleChange(file, fileList) {
      // if (fileList.length > 0) {
      //   this.fileList = [fileList[fileList.length - 1]]; //这一步，是展示最后一次选择文件
      // }
      this.fileList = [];
      const formdata = new FormData();
      formdata.append("file", file.raw);
      formdata.append("name", file.name);
      fileUpload(formdata).then((res) => {
        if (res.code == 200) {
          this.tofileList.push({ fileName: file.name, fileUrl: res.data.url });
        }
      });
    },
    download(obj) {
      window.open(obj.fileUrl);
    },
    del(index) {
      MessageBox.confirm(
        "该操作将会删除此数据且不可恢复，您确定要删除吗？",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(() => {
          this.tofileList.splice(index, 1);
          // Delect({ bsm: item.bsm }).then((res) => {
          //   if (res.success) {
          this.$message.success("删除成功！");
          //   }
          // });
        })
        .catch(() => {});
    },
    async submit() {
      if (this.type == "judge") {
        this.ruleForm.files = this.tofileList;
        Confirm(this.ruleForm).then((res) => {
          if (res.success) {
            this.$message.success("判定成功！");
            this.close();
          }
        });
      } else {
        this.dealForm.files = this.tofileList;
        Disposal(this.dealForm).then((res) => {
          if (res.success) {
            this.$message.success("处置成功！");
            this.close();
          }
        });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.hanledialog {
  .content {
    height: 500px;
    overflow-y: auto;
    overflow-x: hidden;
    color: #fff;
    .tip {
      color: #f56c6c;
    }
    .fileDiv {
      width: 100%;
      padding-left: 20px;
      padding-top: 20px;
      position: relative;

      .upload-demo {
        position: absolute;
        top: 5px;
        right: 20px;
      }
    }
  }
}
</style>
<style lang="scss" >
.hanledialog {
  .el-form-item {
    margin-bottom: 10px !important;
  }
  .el-date-editor.el-input,
  .el-date-editor.el-input__inner {
    width: 100%;
  }
}
</style>