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="rdjl">
              <el-select v-model="ruleForm.rdjl" 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="xzyy">
              <el-input size="mini" v-model="ruleForm.xzyy"></el-input>
            </el-form-item>
            <el-form-item label="闲置时间:" prop="xzsj">
              <el-date-picker
                size="mini"
                v-model="ruleForm.xzsj"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="选择日期"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item label="认定时间" prop="rdsj">
              <el-date-picker
                size="mini"
                v-model="ruleForm.rdsj"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="选择日期"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item label="认定依据" prop="rdyj">
              <el-input
                size="mini"
                v-model="ruleForm.rdyj"
                :rows="3"
                type="textarea"
              ></el-input>
            </el-form-item>
          </el-form>
        </div>
        <div v-else>
          <el-form :model="ruleForm" ref="ruleForm" label-width="100px">
            <el-form-item label="是否完成处置:" prop="sfwc">
              <el-select v-model="ruleForm.sfwc" size="mini">
                <el-option
                  v-for="item in yesornoList"
                  :key="item.code"
                  :label="item.name"
                  :value="item.code"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="处置时间:" prop="czsj">
              <el-date-picker
                size="mini"
                v-model="ruleForm.czsj"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="选择日期"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item label="处置方式:" prop="czfs">
              <el-input
                size="mini"
                v-model="ruleForm.czfs"
                :rows="2"
                type="textarea"
              ></el-input>
            </el-form-item>
            <el-form-item label="处置情况:" prop="czqk">
              <el-input
                size="mini"
                v-model="ruleForm.czqk"
                :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=".zip"
            >
              <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="name"
              label="文件名称"
            >
            </el-table-column>
            <el-table-column label="操作" width="150px">
              <template :slot-scope="{ row }">
                <span class="usable" @click="del(row)"> 删除 </span>
                <span class="usable" @click="download(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 type="primary" @click="close">关闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  components: {},
  props: {},
  data() {
    return {
      dialogVisible: false,
      type: "judge",
      formData: {},
      optionList: [
        { code: 0, name: "不是闲置土地" },
        { code: 1, name: "是闲置土地" },
      ],
      yesornoList: [
        { code: 0, name: "是" },
        { code: 1, name: "否" },
      ],
      ruleForm: { rdjl: 0 },
      fileList: [],
      tofileList: [{}],
    };
  },
  created() {},
  methods: {
    // 关闭弹窗
    close() {
      this.dialogVisible = false;
      this.$emit("close");
    },
    Init(rowdata, type) {
      this.formData = rowdata;
      this.type = type;
      this.dialogVisible = true;
    },
    handleChange(file, fileList) {
      if (fileList.length > 0) {
        this.fileList = [fileList[fileList.length - 1]]; //这一步，是展示最后一次选择文件
      }
      const formdata = new FormData();
      formdata.append("file", file.raw);
      // ShapeUpload(formdata).then((res) => {
      //   if (res.success) {
      //   }
      // });
    },
    download(obj) {
      window.open(
        window.axiosURI +
          "/analyse/fzss/DownloadReport?filePath=" +
          `${obj.fxbg}`
      );
    },
    del(item) {
      MessageBox.confirm(
        "该操作将会删除此数据且不可恢复，您确定要删除吗？",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(() => {
          Delect({ bsm: item.bsm }).then((res) => {
            if (res.success) {
              this.$message.success("删除成功！");
              this.getFileList();
            }
          });
        })
        .catch(() => {});
    },

    getFileList() {},
    async submit() {
      this.close();
    },
  },
};
</script>

<style lang="scss" scoped>
.hanledialog {
  .content {
    height: 500px;
    overflow-y: auto;
    overflow-x: hidden;
    color: #fff;
    .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>