upgradeCenterHtml/src/views/upgrade/compt/revokeDialog.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="projectName" label="项目名称">
              <el-select v-model="formData.projectName" @change="projectChange">
                <el-option
                  v-for="item in projectOptions"
                  :key="item.code"
                  :label="item.label"
                  :value="item.label"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item prop="projectCode" label="项目代码">
              <el-input disabled v-model="formData.projectCode" />
            </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 { FormInstance } from "element-plus";

import { revokeUpgradeProject } from "@/api/upgrade";

let dialogVisible = ref(false);
let dialogTitle = ref("");
const formRef = ref<FormInstance>();
const emit = defineEmits(["dialogChange"]);
const formData = reactive({
  projectName: "ERP-APP",
  projectCode: "ERP-APP",
});

const projectOptions = [
  { label: "ERP-APP", code: "ERP-APP" },
  { label: "ERP-PRINTCONFIG", code: "ERP-PRINTCONFIG" },
];

function handleSubmit() {
  formRef.value.validate((valid: any) => {
    if (valid) {
      //增加
      const params = {
        projectCode: formData.projectCode,
      };
      revokeUpgradeProject(params).then((response) => {
        dialogVisible.value = false;
        if (response.httpCode == 200) {
          emit("dialogChange");
          ElMessage.success("操作成功");
        }
      });
    }
  });
}

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

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

function getItemData(item) {}

const projectChange = (val) => {
  const proj = projectOptions.find((v) => v.label === val);
  formData.projectCode = proj.code;
};

defineExpose({
  dialogVisible,
  dialogTitle,
  getItemData,
  resetForm,
});
</script>

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