ruoyi-web/src/views/enterprises/component/form.vue

<template>
  <el-dialog :title="title" v-model="show" width="600px" append-to-body>
    <el-form
      ref="enterprisesRef"
      :model="form"
      :rules="rules"
      label-width="auto"
    >
      <el-form-item label="名称" prop="enterprisesName">
        <el-input v-model="form.enterprisesName" placeholder="请输入企业名称" />
      </el-form-item>
      <el-form-item label="类型" prop="type">
        <el-select v-model="form.type" placeholder="请输入所属区域">
          <el-option
            v-for="dict in enterprise_type"
            :key="dict.value"
            :lable="dict.value"
            :value="dict.label"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="所属区域" prop="region">
        <el-select v-model="form.region" placeholder="请输入所属区域">
          <el-option
            v-for="dict in sys_region"
            :key="dict.value"
            :lable="dict.value"
            :value="dict.label"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="地址" prop="address">
        <el-input
          v-model="form.address"
          type="textarea"
          placeholder="请输入内容"
        />
      </el-form-item>
	    <el-form-item label="环保负责人" prop="contactName">
		    <el-input
				    v-model="form.contactName"
				    placeholder="请输入环保负责人"
		    />
	    </el-form-item>
	    <el-form-item label="负责人电话" prop="environmentalContactPhone">
		    <el-input
				    v-model="form.environmentalContactPhone"
				    placeholder="请输入负责人电话"
		    />
	    </el-form-item>
      <el-form-item label="注册号" prop="registrationNumber">
        <el-input
          v-model="form.registrationNumber"
          placeholder="请输入企业注册号"
        />
      </el-form-item>
      <el-form-item label="成立时间" prop="establishmentDate">
        <el-date-picker
          clearable
          v-model="form.establishmentDate"
          type="date"
          value-format="YYYY-MM-DD"
          placeholder="请选择企业成立时间"
          style="width: 100%"
        >
        </el-date-picker>
      </el-form-item>

    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import {
  addEnterprises,
  updateEnterprises,
  getEnterprises,
} from "@/api/system/enterprises/enterprises";
const { proxy } = getCurrentInstance();
const { enterprise_type, sys_region } = proxy.useDict(
  "enterprise_type",
  "sys_region",
);
const title = ref("");
const show = ref(false);
const emits = defineEmits(["success"]);
const data = reactive({
  form: {},
  rules: {
    type: [{ required: true, message: "企业类型", trigger: "change" }],
    region: [{ required: true, message: "企业所属区域", trigger: "blur" }],
    enterprisesName: [
      {
        required: true,
        message: "企业名称不能为空",
        trigger: "blur",
      },
    ],
    createTime: [
      {
        required: true,
        message: "创建时间不能为空",
        trigger: "blur",
      },
    ],
    updateTime: [
      {
        required: true,
        message: "更新时间不能为空",
        trigger: "blur",
      },
    ],
  },
});
const { form, rules } = toRefs(data);

/** 提交按钮 */
function submitForm() {
  proxy.$refs["enterprisesRef"].validate((valid) => {
    if (valid) {
      if (form.value.id != null) {
        updateEnterprises(form.value).then((response) => {
          proxy.$modal.msgSuccess("修改成功");
          emits("success");
          open.value = false;
        });
      } else {
        addEnterprises(form.value).then((response) => {
          proxy.$modal.msgSuccess("新增成功");
          emits("success");
          open.value = false;
        });
      }
    }
  });
}

function open(id) {
  reset();
  if (id) {
    title.value = "修改企业基本信息";
    getEnterprises(id).then((res) => {
      form.value = res.data;
    });
  } else {
    title.value = "新增企业基本信息";
  }
  show.value = true;
}
// 表单重置
function reset() {
  form.value = {
    id: null,
    departmentId: null,
    userId: null,
    type: null,
    region: null,
    enterprisesName: null,
    address: null,
    contactName: null,
    environmentalContactPhone: null,
    registrationNumber: null,
    introduction: null,
    establishmentDate: null,
    creator: null,
    createTime: null,
    updateTime: null,
    updater: null,
    deleted: null,
  };
  proxy.resetForm("enterprisesRef");
}

function cancel() {
  show.value = false;
}
defineExpose({ open });
</script>

<style scoped lang="scss"></style>