prizesetvue/src/views/pri/priPrizeObjectField/components/updatePriPrizeObjectField/index.vue

<script lang="ts">
// 声明额外的选项
export default {
  name: "Edit"
};
</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"]);
  objectTableIdQuery();

})
const props = defineProps<{
  editVisible: {
    type: Boolean;
    default: false;
  };
  width: {
    type: Number;
    default: 50;
  };
  formData: {
    id: any;
    type: any;
    default: {};
  };
}>();
// 表单数据
const UpdateForm: any = ref({
  id: null, //ID
  fieldName: "", //字段名称
  fieldEnName: "", //字段名
  fieldQueryKind: "", //匹配条件
  fieldQueryModel: "", //匹配方式
  fieldQueryValue: "", //匹配值
  fieldQueryValueType: "", //匹配值类型
  objectTableId: null, //对象表

});
// 匹配条件选项数据
const fieldQueryKindOptionList = [
  { id: "1", label: '模糊匹配' },
  { id: "2", label: '精确匹配' },
  { id: "4", label: '取反匹配' },
  { id: '5', label: '数组匹配' },
  { id: '6', label: '数组排除' },
  { id: "3", label: '范围匹配' },
]
// 匹配方式选项数据
const fieldQueryModelOptionList = [
  { id: 'request_param', label: '入参' },
  { id: 'start_list_field', label: '起始数据返回字段' },
  { id: 'loop_field', label: '循环递归字段' },
  { id: 'fixed_value', label: '固定值' },
  { id: 'db_field', label: '库内字段' },
]
// 匹配值类型选项数据
const fieldQueryValueTypeOptionList = [
  { id: 'text', label: '文本' },
  { id: 'number', label: '数字' },
  { id: 'date', label: '日期' },
  { id: 'datetime', label: '时间' },
]
// 对象表选项数据
const objectTableIdOptionList = ref([]);

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

// 选项卡参数(默认值为列表某项的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.priupdatePriPrizeObjectField.method,
        url: UrlList.prizeSet.priupdatePriPrizeObjectField.url,
        params: UpdateForm.value
      });
      if (status === 1) {
        //业务成功回调
        ElMessage({
          message: "修改成功",
          type: "success"
        });
        UpdateForm.value = {
          id: null, //ID
          fieldName: "", //字段名称
          fieldEnName: "", //字段名
          fieldQueryKind: "", //匹配条件
          fieldQueryModel: "", //匹配方式
          fieldQueryValue: "", //匹配值
          fieldQueryValueType: "", //匹配值类型
          objectTableId: null, //对象表

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

//获取对象表数据
const objectTableIdQuery = async () => {
  const { status, data }: any = await http.Request({ method: UrlList.prizeSet.prigetPriPrizeObjectTableDic.method, url: UrlList.prizeSet.prigetPriPrizeObjectTableDic.url, params: {} });
  if (status === 1) {
    objectTableIdOptionList.value = data.records;
  }
};



// 表单校验规则
const rules = reactive({

})
// 关闭弹窗回调函数
const closeFn: any = inject('closeEditUpdatePriPrizeObjectFieldVisible');
const openVisible = async () => {
  //通过ID获取表格数据
  const { status, data }: any = await http.Request({ method: UrlList.prizeSet.prigetPriPrizeObjectFieldQuery.method, url: UrlList.prizeSet.prigetPriPrizeObjectFieldQuery.url, params: { id: props.formData.id } });
  if (status === 1) {
    UpdateForm.value = data;

  }
};
// 关闭弹窗回调函数
const closeUpdatePriPrizeObjectFieldVisible = () => {
  UpdateForm.value = {
    id: null, //ID
    fieldName: "", //字段名称
    fieldEnName: "", //字段名
    fieldQueryKind: "", //匹配条件
    fieldQueryModel: "", //匹配方式
    fieldQueryValue: "", //匹配值
    fieldQueryValueType: "", //匹配值类型
    objectTableId: null, //对象表

  };
  closeFn();
};

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

<template lang="pug">
.main
  el-dialog(v-model='props.editVisible' draggable width="50%" :fullscreen="isFullscreen" title="修改" @close="closeUpdatePriPrizeObjectFieldVisible" @open="openVisible")
    el-form(:model='UpdateForm' label-position="right" ref="ruleFormRef" :rules="rules" label-width="100px")
      el-form-item(label='ID' prop="id")
        el-input-number(v-model='UpdateForm.id' :min="1" :max="1000"
          placeholder="请输入ID")
      el-form-item(label='字段名称' prop="fieldName")
        el-input(v-model='UpdateForm.fieldName' autocomplete='off'
          placeholder="请输入字段名称")
      el-form-item(label='字段名' prop="fieldEnName")
        el-input(v-model='UpdateForm.fieldEnName' autocomplete='off'
          placeholder="请输入字段名")
      el-form-item(label="匹配条件", prop="fieldQueryKind")
        el-select(
          v-model="UpdateForm.fieldQueryKind",
          placeholder="请选择匹配条件",
          clearable,
        )
          el-option(:label="item.label", :value="item.id" v-for="(item,index) in fieldQueryKindOptionList")
      el-form-item(label="匹配方式", prop="fieldQueryModel")
        el-select(
          v-model="UpdateForm.fieldQueryModel",
          placeholder="请选择匹配方式",
          clearable,
        )
          el-option(:label="item.label", :value="item.id" v-for="(item,index) in fieldQueryModelOptionList")
      el-form-item(label='匹配值' prop="fieldQueryValue")
        el-input(v-model='UpdateForm.fieldQueryValue' autocomplete='off'
          placeholder="请输入匹配值")
      el-form-item(label="匹配值类型", prop="fieldQueryValueType")
        el-select(
          v-model="UpdateForm.fieldQueryValueType",
          placeholder="请选择匹配值类型",
          clearable,
        )
          el-option(:label="item.label", :value="item.id" v-for="(item,index) in fieldQueryValueTypeOptionList")
      el-form-item(label="对象表", prop="objectTableId")
        el-select(
          v-model="UpdateForm.objectTableId",
          placeholder="请选择对象表",
          clearable,
        )
          el-option(:label="item.tableEnName", :value="item.id" v-for="(item,index) in objectTableIdOptionList")

    .flex.justify-end
      el-button(
        :icon="useRenderIcon(Close)",
        :loading="loading",
        @click="closeUpdatePriPrizeObjectFieldVisible()"
      ) 关闭
      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>