lz_web_qwgl/src/views/backOfficeSystem/kaoQinGL/QingJiaXX/editAddForm.vue

<template>
  <!-- 勤务作息编辑新增 -->
  <div class="dialog" v-if="isShowDialog">
    <div class="head_box">
      <span class="title">{{ isAdd ? "新增" : "修改" }}</span>
      <div>
        <el-button
          type="primary"
          size="small"
          @click="onSave"
          :loading="buttonLoading"
          >保存</el-button
        >
        <el-button size="small" @click="closeDialog">关闭</el-button>
      </div>
    </div>
    <div class="form-content">
      <el-form
        ref="formRef"
        :label-width="140"
        :model="formData"
        :rules="rules"
        inline
      >
        <div class="content">
          <el-form-item
            v-if="isAdd"
            style="width: 48%"
            class="form-item"
            prop="dqwd"
            label="地球经度"
          >
            <el-input
              type="number"
              v-model="formData.dqwd"
              :disabled="isDetail"
              placeholder="请输入地球经度"
            ></el-input>
          </el-form-item>
          <el-form-item
            v-if="isAdd"
            style="width: 48%"
            class="form-item"
            prop="dqjd"
            label="地球纬度"
          >
            <el-input
              type="number"
              v-model="formData.dqjd"
              :disabled="isDetail"
              placeholder="请输入地球纬度"
            ></el-input>
          </el-form-item>
          <el-form-item
            style="width: 48%"
            class="form-item"
            prop="qzDd"
            label="签注地点"
          >
            <el-input
              v-model="formData.qzDd"
              :disabled="!isAdd"
              placeholder="请输入签注地点"
            ></el-input>
          </el-form-item>

          <el-form-item
            style="width: 48%"
            class="form-item"
            prop="qzSm"
            label="签注说明"
          >
            <el-input
              v-model="formData.qzSm"
              :disabled="isDetail"
              placeholder="请输入签注说明"
            ></el-input>
          </el-form-item>
          <el-form-item
            v-if="isDetail"
            style="width: 48%"
            class="form-item"
            prop="qzrSfzh"
            label="签注人身份证号"
          >
            <el-input
              v-model="formData.qzrSfzh"
              disabled
              placeholder="请输入"
            ></el-input>
          </el-form-item>
          <el-form-item
            v-if="isDetail"
            style="width: 48%"
            class="form-item"
            prop="qzrXm"
            label="签注人姓名"
          >
            <el-input
              v-model="formData.qzrXm"
              disabled
              placeholder="请输入"
            ></el-input>
          </el-form-item>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script setup>
import { serviceGet, servicePost } from "@/api/serviceApi.js";
import { reactive, ref, getCurrentInstance, defineEmits } from "vue";
import * as MOSTY from "@/components/MyComponents/index";
import * as rule from "@/utils/rules.js";
// import Department from "./department.vue";

const { proxy } = getCurrentInstance();
// const { D_BZ_SF} = proxy.$dict("D_BZ_SF");
const props = defineProps({
  // dic: Object
});

const emits = defineEmits(["updateList"]);
const loading = ref(false); // 加载
const formRef = ref(); // 表单验证
const formDataDefault = ref({});
const formData = ref({});

const isAdd = ref(false); // 是否是新增状态
const isShowDialog = ref(false); //弹窗
const dialogType = ref(0); // add 新增 edit编辑 detail详情
const isDetail = ref(false);
const rules = reactive({
  dqjd: [{ required: false, message: "请填写地球纬度", trigger: "blur" }],
  dqwd: [{ required: false, message: "请填写地球经度", trigger: "blur" }],

  qzDd: [{ required: true, message: "请输入签注地点", trigger: "blur" }],
  qzSm: [{ message: "请输入签注说明", trigger: "blur" }]

  // qzrSfzh: [{ required: true, message: "请输入签注人身份证号", trigger: "blur" }],
  // qzrXm: [{ required: true, message: "请输入签注人姓名", trigger: "blur" }]
});
/**部门id对照对象 */
let departmentIdObj = {};
const init = (type, row) => {
  isShowDialog.value = true; // 显示新增编辑dialog框
  isAdd.value = type == "add" ? true : false;
  dialogType.value = type;
  isDetail.value = type === "detail";
  // 是否有填充数据
  departmentIdObj = {};
  if (row) {

    let {
      id,
      dqjd,
      dqwd,
      qzDd,

      qzSm,
      qzrSfzh,
      qzrXm
    } = row;
    // 新增从本地取
    if (type == "add") {
      qzrSfzh = localStorage.getItem("idEntityCard"); // 身份证
      qzrXm = localStorage.getItem("USERNAME"); //姓名
    }
    formData.value = {
      id,
      dqwd,
      dqjd,
      qzDd,

      qzSm,
      qzrSfzh,
      qzrXm
    };
    // 新增
  } else {
  }
};

// 重置表单
const reserForm = () => {
  formData.value = JSON.parse(JSON.stringify(formDataDefault.value));
};
// 关闭弹窗
const closeDialog = () => {
  isShowDialog.value = false;
  loading.value = false;
  formData.value = JSON.parse(JSON.stringify(formDataDefault.value));
};
// 保存
const onSave = () => {
  formRef.value.validate((valid) => {
    if (!valid) return;
    loading.value = true;
    let params = { ...formData.value };
    params.qzrSfzh = localStorage.getItem("idEntityCard"); // 身份证
    params.qzrXm = localStorage.getItem("USERNAME"); // 姓名
    if (params.dqjd) params.dqjd = Number(params.dqjd);
    if (params.dqwd) params.dqwd = Number(params.dqwd);

    let url = isAdd.value ? "/tbQwglZxqz/save" : "/tbQwglZxqz/update";
    let text = isAdd.value ? "新增成功" : "编辑成功";
    servicePost(params, `/mosty-qwzx${url}`)
      .then((res) => {
        closeDialog();
        proxy.$message.success(text);
        emits("updateList", {});
      })
      .catch(() => {
        loading.value = false;
      });
  });
};
defineExpose({ init });
</script>

<style lang="scss" scoped>
@import "~@/assets/css/layout.scss";
@import "~@/assets/css/element-plus.scss";

.form-content {
  margin-top: 20px;
}
.bblxItem {
  line-height: 40px;
  min-height: 40px;
  //   display: flex;
  .btItem {
    width: 180px;
    padding: 7px 0;
    background: #e9e9e9;
    color: #000;
    margin-top: 1px;
    text-align: center;
  }
  .info {
    flex: 1;
    background: #f2f2f2;
    margin-top: 1px;
    padding: 10px;
    box-sizing: border-box;
  }
  .subBtn {
    padding-left: 100px;
    box-sizing: border-box;
  }
}
.content {
  padding: 10px 40px;
}
.dialog {
  &::v-deep .el-form--inline {
    padding: 0 !important;
  }
  &::v-deep .el-input__inner {
    border: 1px solid #d5d2d2;
  }

}
.dialog .el-form-item--default.form-item {
  width: calc(50% - 100px);
  margin-bottom: 10px;
}

.department-list {
  padding: 10px 20px;
}
.department-item {
  color: #000;
  margin-left: 20px;
  height: 35px;
  line-height: 35px;
}
</style>