epmet-oper-gov/src/views/modules/communityService/dqfwzx/cpts/order.vue

<template>
  <div>
    <div>
      <el-form
        ref="ref_form"
        :inline="true"
        :model="dataForm"
        :rules="dataRule"
        :disabled="formType === 'detail'"
        class="form"
      >
        <el-form-item
          label="事项名称"
          prop="matterName"
          label-width="150px"
          style="display: block"
        >
          <el-input
            class="item_width_1"
            maxlength="50"
            show-word-limit
            v-model="info.matterName"
            disabled
          >
          </el-input>
        </el-form-item>

        <el-form-item
          label="预约日期"
          prop="appointmentDate"
          label-width="150px"
          style="display: block"
        >
          <el-date-picker
            v-model="dataForm.appointmentDate"
            placeholder="预约日期"
            value-format="yyyy-MM-dd"
            :picker-options="dateOptions"
          >
          </el-date-picker>
        </el-form-item>

        <el-form-item
          v-if="timeList.length > 0"
          label="预约时段"
          prop="timeId"
          label-width="150px"
          style="display: block"
        >
          <el-checkbox-group
            style="margin-left: auto; width: 600px"
            v-model="dataForm.timeId"
          >
            <el-checkbox
              :label="item.timeId"
              :key="item.timeId"
              :disabled="item.isAppointment"
              v-for="item in timeList"
              >{{ item.time }}</el-checkbox
            >
          </el-checkbox-group>
        </el-form-item>

        <el-form-item
          label="预约人"
          prop="appointmentName"
          label-width="150px"
          style="display: block"
        >
          <el-input
            class="item_width_1"
            maxlength="50"
            show-word-limit
            placeholder="请输入预约人"
            v-model="dataForm.appointmentName"
          >
          </el-input>
        </el-form-item>

        <el-form-item
          label="联系方式"
          prop="appointmentPhone"
          label-width="150px"
          style="display: block"
        >
          <el-input
            class="item_width_1"
            maxlength="50"
            show-word-limit
            placeholder="请输入联系方式"
            v-model="dataForm.appointmentPhone"
          >
          </el-input>
        </el-form-item>

        <el-form-item
          label="备注"
          prop="remark"
          label-width="150px"
          style="display: block"
        >
          <el-input
            class="item_width_1"
            type="textarea"
            maxlength="1000"
            show-word-limit
            :rows="3"
            placeholder="请输入备注，不超过1000字"
            v-model="dataForm.remark"
          ></el-input>
        </el-form-item>
      </el-form>
    </div>
    <div class="div_btn">
      <el-button @click="handleCancle">取 消</el-button>
      <el-button
        v-if="formType != 'detail'"
        type="primary"
        :disabled="btnDisable"
        @click="handleComfirm"
        >确 定</el-button
      >
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import { Loading } from "element-ui"; // 引入Loading服务
import { requestPost } from "@/js/dai/request";

var map;
var search;
var markers;
var infoWindowList;
let loading; // 加载动画

export default {
  data() {
    return {
      formType: "add", //表单操作类型 add新增，edit编辑，detail详情

      btnDisable: false,

      info: {
        matterName: "",
      },

      dateOptions: {
        disabledDate(time) {
          return (
            time.getTime() < Date.now() - 3600 * 24 * 1 * 1000 ||
            time.getTime() > Date.now() + 3600 * 24 * 6 * 1000
          );
        },
      },
      timeList: [],

      dataForm: {
        matterId: "",
        appointmentDate: "",
        timeId: [],
        appointmentName: "",
        appointmentPhone: "",
        remark: "",
      },
    };
  },
  components: {},
  computed: {
    dataRule() {
      return {
        appointmentName: [
          { required: true, message: "预约人不能为空", trigger: "blur" },
        ],
        appointmentPhone: [
          { required: true, message: "预约人电话不能为空", trigger: "blur" },
        ],
        appointmentDate: [
          { required: true, message: "预约日期不能为空", trigger: "blur" },
        ],
        timeId: [
          { required: true, message: "预约时段不能为空", trigger: "blur" },
        ],
      };
    },
  },
  props: {},
  watch: {
    "dataForm.appointmentDate": function () {
      this.getTimeList();
    },
  },

  async mounted() {},

  methods: {
    async initForm(type, row, index) {
      this.$refs.ref_form.resetFields();

      let item = row.matterList[index];
      if (item) {
        this.dataForm.matterId = item.matterId;
        this.info.matterName = item.matterName;
      }
    },

    async getTimeList() {
      let url = "/gov/org/icpartyservicecenter/appointmenttime";

      const {
        dataForm: { matterId, appointmentDate },
      } = this;
      if (!matterId || !appointmentDate) return;

      const { data, code, msg } = await requestPost(url, {
        matterId,
        date: appointmentDate,
      });

      if (code === 0) {
        this.timeList = data.timeDetail || [];
      } else {
      }
    },

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

    async submit() {
      let url = "";
      if (this.formType === "add") {
        url = "/gov/org/icpartyservicecenter/appointment";
        // url = "http://yapi.elinkservice.cn/mock/245/gov/org/neighborhood/neighborhoodadd"
      }

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

      if (code === 0) {
        this.$message({
          type: "success",
          message: "操作成功",
        });
        this.resetData();
        this.$emit("dialogOk");
        this.btnDisable = false;
      } else {
        this.btnDisable = false;
        this.$message.error(msg);
      }
    },

    handleCancle() {
      this.resetData();
      this.$emit("dialogCancle");
    },
    resetData() {
      this.dataForm = {
        matterId: "",
        appointmentDate: "",
        timeId: [],
        appointmentName: "",
        appointmentPhone: "",
        remark: "",
      };
      this.timeList = [];
    },
    // 开启加载动画
    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>
.item_width_1 {
  width: 500px;
}
.item_width_2 {
  width: 400px;
}
.item_width_3 {
  margin-left: 10px;
  width: 200px;
}
.item_width_4 {
  width: 200px;
}

.div_map {
  margin-top: 10px;
}

.div_btn {
  display: flex;
  justify-content: flex-end;
}
.el-tabs {
  margin: 0 20px;
}
.el-upload__tip {
  color: rgb(155, 155, 155);
  margin: 0;
}
.form {
  margin-top: 30px;
}
</style>

<style>
.el-dialog__body {
  padding: 0 10px 20px !important;
}
</style>