ShutongInterconnectedChemicalCloudPlatform/src/widget/videoupload/index.vue

<!--
@ 作者: 李文轩
@ 时间: 2024-01-02 13:49:57
@ 备注: 
-->
<template>
  <el-form-item
    v-bind="data.item"
    :prop="tProp || data.name"
    :class="config.className"
    :rules="itemRules as any"
    :label="getLabel(data.item as FormItem)"
  >
    <input v-model="value" type="hidden" />
    <VideoUploadPlay
      :data="props.data"
      :page-type="pageType"
      :val-info="value"
      @upDateInfo="updatecontent"
    ></VideoUploadPlay>
  </el-form-item>
</template>
<script lang="ts" setup>
import VideoUploadPlay from "./videoUploadPlay.vue";
import { constControlChange, constFormProps } from "@/api/DesignForm/utils";
import validate from "@/api/DesignForm/validate";
import { FormItem, FormList } from "@/api/DesignForm/types";
const props = withDefaults(
  defineProps<{
    data: FormList;
    pageType: number;
    tablekey: any;
    numrun?: number;
    modelValue?: any; // 子表和弹性布局时时有传
    tProp?: string; // 子表时的form-item的prop值，用于子表校验用
  }>(),
  {}
);
const emits = defineEmits<{
  (e: "update:modelValue", numVal: any): void;
}>();

const formProps = inject(constFormProps, {}) as any;
const type = computed(() => {
  return formProps.value.type;
});
const config = computed(() => {
  return props.data.config || {};
});

const changeEvent = inject(constControlChange, "") as any;

const value = computed({
  get() {
    if (props.tProp) {
      // 表格和弹性布局
      return props.modelValue;
    } else {
      return formProps.value.model[props.data.name];
    }
  },
  set(newVal: any) {
    if (props.tProp) {
      emits("update:modelValue", newVal);
    }
    updateModel(newVal);
  },
});

/**
@ 作者: 秦东
@ 时间: 2025-03-05 13:48:20
@ 功能: 更新数据
*/
const updatecontent = (val: any) => {
  value.value = val;
  props.data.control.videoMsg[0].url = val;
  console.log("更新数据-------->", val);
  console.log("更新数据----1---->", value.value);
  console.log("更新数据----2---->", props.data.control.videoMsg[0].url);
};

const updateModel = (val: any) => {
  let controlAttribute = "";
  if (props.data.control) {
    if (props.data.control.type) {
      controlAttribute = props.data.control.type;
    }
  }
  changeEvent &&
    changeEvent({
      key: props.data.name,
      value: val,
      data: props.data,
      tProp: props.tProp,
      type: props.data.type,
      attribute: controlAttribute,
    });
};

const getLabel = (ele: FormItem) => {
  const showColon = formProps.value.showColon ? "：" : "";
  if (ele) {
    return ele.showLabel ? "" : ele.label + showColon;
  } else {
    return "";
  }
};

// 返回当前item项的校验规则
const itemRules = computed(() => {
  let temp;
  const itemR: any = props.data.item?.rules || [];
  const customR = formatCustomRules();
  // 如果三个都没有设置，则返回undefined
  if (itemR?.length || customR?.length) {
    temp = [...customR, ...itemR];
  }
  return temp;
});
// 处理自定义校验规则，将customRules转换后追加到rules里
const formatCustomRules = () => {
  const rulesReg: any = {};
  validate &&
    validate.forEach((item) => {
      rulesReg[item.type] = item.regExp;
    });

  // 获取校验方法 父级使用provide方法注入
  const temp: any = [];
  props.data.customRules?.forEach((item: any) => {
    if (!item.message && item.type !== "methods") {
      return; // 方法时允许提示信息为空
    }
    let obj = {};
    if (item.type === "required") {
      obj = { required: true };
    } else if (item.type === "rules") {
      // 自定义表达式
      obj = { pattern: item.rules };
    } else if (item.type === "methods") {
      // 方法时
      const methods: any = item.methods;
      if (methods) {
        obj = { validator: inject(methods, {}) };
      }
    } else if (item.type) {
      obj = { pattern: rulesReg[item.type as string] };
    }
    // 这里判断下防某些条件下重复push的可能或存重复校验类型
    let message: any = { message: item.message };
    if (!item.message) {
      // 当使用validator校验时，如果存在message字段则不能使用 callback(new Error('x'));的提示
      message = {};
    }
    temp.push(
      Object.assign(
        {
          trigger: item.trigger || "blur",
        },
        obj,
        message
      )
    );
  });
  return temp;
};
</script>
<style lang="scss" scoped>
.imgbox {
  padding: 0 5px;
  max-width: 300px;
  max-height: 200px;
  width: 100%;
  height: 200px;
  .image-slot {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    background: var(--el-fill-color-light);
    color: var(--el-text-color-secondary);
    font-size: 30px;
  }
}
</style>