epmet-work-pc-chengyang/src/views/modules/plugins/change/resideathAdd.vue

<template>
  <div>
    <div class="dialog-h-content scroll-h m-edit">
      <el-form
        ref="ref_form"
        :inline="true"
        :model="dataForm"
        label-width="150px"
        :rules="dataRule"
        class="g-edit-form"
      >
        <template>
          <el-form-item class="f-top24" label="当前组织" style="display: block">
            {{ dataForm.gridName }}
          </el-form-item>
        </template>
        <template>
          <el-form-item label="姓名" style="display: block">
            {{ dataForm.name }}
          </el-form-item>
        </template>

        <el-form-item label="死亡日期" style="display: block" prop="deathDate">
          <el-date-picker
          :picker-options="startPickerOptions"
            v-model="dataForm.deathDate"
            class="u-edit-width-normal"
            type="date"
            value-format="yyyy-MM-dd HH:mm:ss"
            format="yyyy-MM-dd"
            placeholder="选择日期"
            :clearable="false"
          >
          </el-date-picker>
        </el-form-item>
        <div class="item-textarea">
          <el-form-item
            label="死亡原因"
            style="display: block"
            prop="deathReason"
          >
            <el-input
              type="textarea"
              resize="none"
              class="u-edit-width-normal"
              placeholder="请输入死亡原因"
              v-model="dataForm.deathReason"
            >
            </el-input>
          </el-form-item>
        </div>
        <!-- <el-form-item label="享受福利"
                      style="display: block"
                      prop="welfareFlag">
          <el-checkbox v-model="dataForm.welfareFlag">享受</el-checkbox>
        </el-form-item> -->
      </el-form>
    </div>
    <div class="m-edit-btn">
      <el-button size="small" class="" @click="handleCancle" plain>取 消</el-button>
      <el-button
        size="small"
        type="primary"
        :loading="btnDisable"
        @click="handleComfirm"
        >保 存</el-button
      >
    </div>
  </div>
</template>

<script>
import util from "@js/util.js";
import { Loading } from "element-ui"; // 引入Loading服务
import { requestPost, requestGet } from "@/js/dai/request";

let loading; // 加载动画
export default {
  data() {
    let startDisabledDate = (time) => {//这个关键属性我们一定要写在data的里面并且return的外面，这是动态改变区间的关键
      let nowData = Date.now()
      return time.getTime() > nowData
    }
    return {
      btnDisable: false,

      dataForm: {
        name: "",
        gridName: "",
        deathReason: "",
        deathDate: "",
      },

      startPickerOptions: {
        disabledDate: startDisabledDate
      },
    };
  },
  components: {},
  mounted() {},
  computed: {
    dataRule() {
      return {
        deathReason: [
          { required: true, message: "死亡原因不能为空", trigger: "blur" },
        ],
        deathDate: [
          { required: true, message: "死亡日期不能为空", trigger: "blur" },
        ],
      };
    },
  },
  methods: {
    async initForm(row) {
      this.customerId = localStorage.getItem("customerId");

      this.$refs.ref_form.resetFields();

      this.dataForm.idCard = row.idNum;
      this.dataForm.name = row.name;
      this.dataForm.gridName = row.gridName;
      this.dataForm.mobile = row.mobile;
      this.dataForm.gender = row.gender;
      this.dataForm.type = "1";
      this.dataForm.resiId = row.resiId;
    },

    async handleComfirm() {
      this.btnDisable = true;
      setTimeout(() => {
        this.btnDisable = false;
      }, 2000);
      this.$refs["ref_form"].validate((valid, messageObj) => {
        if (!valid) {
          // app.util.validateRule(messageObj)
          console.log("error submit!");
        } else {
          this.saveForm();
        }
      });
    },

    async saveForm() {
      const url = "/actual/base/residentDeathRecord/save";

      const { data, code, msg } = await requestPost(url, this.dataForm);

      if (code === 0) {
        this.$message.success("操作成功");
        this.handleCancle();
      } else {
        this.$message.error(msg);
      }
    },

    handleCancle() {
      this.resetData();
      this.$emit("dialogCancle");
    },

    resetData() {
      this.dataForm = {
        name: "",
        gridName: "",
        deathReason: "",
        deathDate: "",
      };
    },
    // 开启加载动画
    startLoading() {
      loading = Loading.service({
        lock: true, // 是否锁定
        text: "正在加载……", // 加载中需要显示的文字
        background: "rgba(0,0,0,.7)", // 背景颜色
      });
    },
    // 结束加载动画
    endLoading() {
      // clearTimeout(timer);
      if (loading) {
        loading.close();
      }
    },
  },
};
</script>
<style lang="scss" scoped>
@import "@/assets/scss/modules/management/edit-main.scss";
@import "@/assets/scss/modules/management/list-main.scss";

.resi-cell-col {
  width: 750px;
  display: flex;
  justify-content: flex-start;
}

.margin_left10 {
  margin-left: 10px;
}
</style>