prizesetvue/src/views/pri/priList/components/add/index.vue

<script lang="ts">
// 声明额外的选项
export default {
  name: "Add"
};
</script>
<script setup lang="ts">
import { inject, onMounted, reactive, ref, Uploadfile, UploadImg, Editor, useRenderIcon, ElMessage, ElMessageBox, Upload, Close, http, getGroupUrl, RegularVerification, verification } from "@/utils/importUsed"
// 接口列表实例
let UrlList = reactive(null)
// 获取当前板块接口列表
onMounted(async () => {
  UrlList = await getGroupUrl(["prizeSet"]);
  projectIdQuery();

})
// 组件传参对象
const props = defineProps<{
  submit: Function;
  addVisible: {
    type: Boolean;
    default: false;
  };
  width: {
    type: Number;
    default: 50;
  };
  projectId: {
    type: Number;
    default: 0;
  },

}>();
// 表单数据
let UpdateForm = ref({
  projectId: props.projectId, //项目
  kind: "", //奖励分类
  prizeName: "", //奖励名称
  prizePercent: "", //奖励比例
  prizeAmount: "", //奖励固定金额
  conditionMode: "", //条件模式
  recursionFlag: "", //是否递归
  prizeContent: "", //奖励内容
  requestParamField: "", //入参字段
  prizeSourceField: "", //奖励金额来源数据


});
// 表单实例
const ruleFormRef = ref()

// 传参选项数据
// 项目选项数据
const projectIdOptionList = ref([]);
// 条件模式选项数据
const conditionModeOptionList = [
  { id: 'all', label: '全部满足' },
  { id: 'one', label: '一个满足' },
  { id: 'two', label: '两个满足' },
  { id: 'three', label: '三个满足' },
]
// 奖励内容选项数据
const prizeContentOptionList = [
  { id: 'cash', label: '现金' },
  { id: 'recyc', label: '循环资格' },
  { id: 'coupon', label: '机具券' },
  { id: 'reserve', label: '额度' },
]
// 奖励分类
const kindOptionList = [
  { id: 'pos', label: '机具奖励' },
  { id: 'order', label: '订单奖励' },
  { id: 'reserve', label: '额度返还' },
]

// 选项卡参数(默认值为列表某项的id)
const activeId = ref('1')
// 提交函数
const submit = async (formEl) => {
  // 表单校验拦截
  if (!formEl) return
  await formEl.validate(async (valid, fields) => {
    if (valid) {
      //表单校验成功回调
      console.log('submit!')


      // 需动态生成接口
      const { status, msg }: any = await http.Request({
        method: UrlList.prizeSet.priaddPriList.method,
        url: UrlList.prizeSet.priaddPriList.url,
        params: UpdateForm.value
      });
      if (status === 1) {
        //业务成功回调
        ElMessage({
          message: "新增成功",
          type: "success"
        });
        UpdateForm.value = {
          projectId: props.projectId, //项目
          kind: "", //奖励分类
          prizeName: "", //奖励名称
          prizePercent: "", //奖励比例
          prizeAmount: "", //奖励固定金额
          conditionMode: "", //条件模式
          recursionFlag: "", //是否递归
          prizeContent: "", //奖励内容
          requestParamField: "", //入参字段
          prizeSourceField: "", //奖励金额来源数据

        };
        // 关闭新增弹窗;
        closeVisible()
      } else {
        //业务失败回调
        ElMessageBox.alert(msg, "提示", {
          confirmButtonText: "关闭",
          type: "warning"
        });
      }
    } else {
      //表单校验失败回调
      ElMessage({
        message: "请输入完整信息",
        type: "error"
      });
    }
  })
};

//获取项目数据
const projectIdQuery = async () => {
  const { status, data }: any = await http.Request({ method: UrlList.prizeSet.prigetPriProjectDic.method, url: UrlList.prizeSet.prigetPriProjectDic.url, params: {} });
  if (status === 1) {
    projectIdOptionList.value = data.records;
  }
};



// 表单校验规则
const rules = reactive({
  projectId: [
    { required: true, message: '请输入项目', trigger: 'blur' },
  ],
  prizeName: [
    { required: true, message: '请输入奖励名称', trigger: 'blur' },
  ],
  prizePercent: [
    { required: true, message: '请输入奖励比例', trigger: 'blur' },
  ],
  conditionMode: [
    { required: true, message: '请输入条件模式', trigger: 'blur' },
  ],

})
// 关闭弹窗回调函数
const closeFn: any = inject("closeAddVisible");
const closeVisible = () => {
  // 清空表单项;
  UpdateForm.value = {
    projectId: props.projectId, //项目
    kind: "", //奖励分类
    prizeName: "", //奖励名称
    prizePercent: "", //奖励比例
    prizeAmount: "", //奖励固定金额
    conditionMode: "", //条件模式
    recursionFlag: "", //是否递归
    prizeContent: "", //奖励内容
    requestParamField: "", //入参字段
    prizeSourceField: "", //奖励金额来源数据

  };
  closeFn();
};

// 弹窗是否全屏
const isFullscreen = ref(false)
</script>

<template lang="pug">
.main
  el-dialog(v-model='props.addVisible' width="50%" :fullscreen="isFullscreen" title="新增" draggable @close="closeVisible")
    el-form(:model='UpdateForm' label-position="right" ref="ruleFormRef" :rules="rules" label-width="100px")
      el-form-item(label="项目", prop="projectId")
        el-select(
          v-model="UpdateForm.projectId",
          placeholder="请选择项目",
          clearable,
        )
          el-option(:label="item.projectName", :value="item.id" v-for="(item,index) in projectIdOptionList")
      el-form-item(label="奖励分类", prop="kind")
        el-select(
          v-model="UpdateForm.kind",
          placeholder="请选择奖励分类",
          clearable,
        )
          el-option(:label="item.label", :value="item.id" v-for="(item,index) in kindOptionList")
      el-form-item(label='奖励名称' prop="prizeName")
        el-input(v-model='UpdateForm.prizeName' autocomplete='off'
          placeholder="请输入奖励名称")
      el-form-item(label='奖励比例' prop="prizePercent")
        el-input-number(v-model='UpdateForm.prizePercent' :min="0" :max="1000"
          placeholder="请输入奖励比例")
      el-form-item(label='奖励固定金额' prop="prizeAmount")
        el-input-number(v-model='UpdateForm.prizeAmount' :min="0" :max="1000"
          placeholder="请输入奖励固定金额")
      el-form-item(label="条件模式", prop="conditionMode")
        el-select(
          v-model="UpdateForm.conditionMode",
          placeholder="请选择条件模式",
          clearable,
        )
          el-option(:label="item.label", :value="item.id" v-for="(item,index) in conditionModeOptionList")
      el-form-item(label='是否递归' prop="recursionFlag")
        el-switch(v-model="UpdateForm.recursionFlag")
      el-form-item(label="奖励内容", prop="prizeContent")
        el-select(
          v-model="UpdateForm.prizeContent",
          placeholder="请选择奖励内容",
          clearable,
        )
          el-option(:label="item.label", :value="item.id" v-for="(item,index) in prizeContentOptionList")
      el-form-item(label='入参字段' prop="requestParamField")
        el-input(v-model='UpdateForm.requestParamField' autocomplete='off'
          placeholder="请输入入参字段")
      el-form-item(label='奖励金额来源数据' prop="prizeSourceField")
        el-input(v-model='UpdateForm.prizeSourceField' autocomplete='off'
          placeholder="请输入奖励金额来源数据")

    .flex.justify-end
      el-button(
        :icon="useRenderIcon(Close)",
        @click="closeVisible"
      ) 关闭
      el-button(
        type="primary",
        :icon="useRenderIcon(Upload)",
        @click="submit(ruleFormRef)"
      ) 确认提交
</template>

<style scoped lang="scss">
:deep(.el-dropdown-menu__item i) {
  margin: 0;
}

:deep(.el-form-item__label) {
  font-weight: 700;
}

:deep(.el-pagination) {
  flex-flow: wrap;
}

:deep(.is-draggable) {
  max-height: 80vh;
  overflow: auto;
}

:deep(.el-dialog__header) {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #fff;
}

.collapsedom {
  padding: 0 20px;
  background-color: #fff;
}

.ovh-x {
  height: 40vh;
  overflow-y: auto;
}

:deep(.el-descriptions__header) {
  margin: 16px 0 !important;
}

.el-select {
  width: 100%;
}
</style>