dySdDesignerVue_Admin/src/views/baseInfo/erpClientList/compt/childDialog.vue

<template>
  <div class="dialog">
    <el-dialog
      v-model="dialogVisible"
      :title="dialogTitle"
      width="480"
      @close="closeDialog()"
    >
      <el-form
        ref="formRef"
        :model="formData"
        :rules="rules"
        label-width="120px"
      >
        <el-row>
          <el-col :span="24">
            <el-form-item prop="clientName" label="客户名称">
              <el-input v-model="formData.clientName" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item prop="clientCode" label="客户编码">
              <el-input
                :disabled="formData.id > 0"
                v-model="formData.clientCode"
              />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item prop="md5ParamDigest" label="通讯密钥">
              <el-input v-model="formData.md5ParamDigest" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item prop="contactPhone" label="联系电话">
              <el-input v-model="formData.contactPhone" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item prop="contactPerson" label="联系人">
              <el-input v-model="formData.contactPerson" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item prop="clientAddress" label="地址">
              <el-input v-model="formData.clientAddress" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item prop="erpServerUrl" label="erp服务器连接地址">
              <el-input v-model="formData.erpServerUrl" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <template #footer>
        <div class="dialog-footer">
          <el-button v-throttle type="primary" @click="handleSubmit"
            >确 定
          </el-button>
          <el-button @click="closeDialog()">取 消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
<script setup lang="ts">
import { addClientInfo, getERPClient, updateClientInfo } from "@/api/baseInfo";
import type { FormInstance } from "element-plus";

let dialogVisible = ref(false);
let dialogTitle = ref("");
const formRef = ref<FormInstance>();
const emit = defineEmits(["dialogChange"]);
const formData = reactive({
  contactPerson: "",
  contactPhone: "",
  clientAddress: "",
  clientName: "",
  clientCode: "",
  md5ParamDigest: "",
  erpServerUrl: "",
  id: 0,
});
const rules = reactive({
  clientName: [{ required: true, message: "请输入客户名称", trigger: "blur" }],
});

function handleSubmit() {
  formRef.value.validate((valid: any) => {
    if (valid) {
      const itemId = formData.id;
      if (itemId) {
        //修改
        const postData = JSON.stringify(formData);
        const params = {
          erpClient: postData,
        };
        updateClientInfo(params).then((response) => {
          dialogVisible.value = false;
          if (response.httpCode == 200) {
            emit("dialogChange");
            ElMessage.success("操作成功");
          }
        });
      } else {
        //增加
        const postData = JSON.stringify(formData);
        const params = {
          erpClient: postData,
        };
        addClientInfo(params).then((response) => {
          dialogVisible.value = false;
          if (response.httpCode == 200) {
            emit("dialogChange");
            ElMessage.success("操作成功");
          }
        });
      }
    }
  });
}

function getItemData(item) {
  const data = {
    idClient: item,
  };
  getERPClient(data).then((response) => {
    if (response.httpCode == 200) {
      const data = response.data;
      Object.assign(formData, { ...data });
    }
  });
}

/**  重置表单 */
function resetForm() {
  formRef.value.resetFields();
  formData.id = "";
}

/**关闭弹窗 */
function closeDialog() {
  dialogVisible.value = false;
  formRef.value.resetFields();
  formData.id = undefined;
}

defineExpose({
  dialogVisible,
  dialogTitle,
  getItemData,
  resetForm,
});
</script>
<style scoped lang="scss"></style>