ShutongInterconnectedChemicalCloudPlatform/src/components/DesignForm/public/form/childTable.vue

<!--
@ 作者: 秦东
@ 时间: 2023-07-14 08:51:25
@ 备注: 表单子表
-->
<script lang="ts" setup>
import FormItem from "./formItem.vue";
import { inject, computed } from "vue";
import Tooltips from "@/components/DesignForm/tooltip.vue";
import { constFormProps } from "@/api/DesignForm/utils";
import { jsonParseStringify } from "@/utils/DesignForm";
import LowcodeImagePage from "@/components/DesignForm/public/expand/lowcodeImage.vue";
import AssociatedForms from "@/widget/associatedforms/index.vue";
import UploadPageList from "@/components/DesignForm/public/expand/uploadPageList.vue";

import LokOrgCentent from "@/widget/org/cont.vue";
import { SCOPE } from "element-plus";

const props = withDefaults(
  defineProps<{
    data: any;
  }>(),
  {
    data: () => {
      return {};
    },
  }
);

const sunTableName = computed(() => {
  return props.data.item ? (props.data.item.label ? props.data.item.label : "") : "";
});

const formProps = inject(constFormProps, {}) as any;
const tableDataNew = computed(() => {
  // console.log("如果编辑页禁用时-----1---->",props.data.name)
  // console.log("如果编辑页禁用时-----2---->",formProps.value.model[props.data.name])
  // console.log("如果编辑页禁用时-----3---->",formProps.value.model)
  // console.log("如果编辑页禁用时-----4---->",formProps.value)
  return formProps.value.model[props.data.name];
});
const type = computed(() => {
  return formProps.value.type;
});
// 如果编辑页禁用时，则返回true
const editDisabled = computed(() => {
  return formProps.value.type === 2 && props.data.config?.editDisabled;
});
const addColumn = () => {
  // console.log("如果编辑页禁用时--------->", tableDataNew.value);
  const temp: any = {};
  if (props.data.list) {
    props.data.list.forEach((item: any) => {
      if (item.name) {
        temp[item.name] = item.control.modelValue;
      }
    });
    // console.log("如果编辑页禁用时-------temp:", temp);
    // console.log("如果编辑页禁用时-------jsonParseStringify:", jsonParseStringify(temp));
    tableDataNew.value.push(jsonParseStringify(temp));
  }
};
const getText = (text: any, val: any, name: any) => {
  // console.log("text===>", text);
  // console.log("name===>", name);
  // console.log("val===>", val);
  if (typeof text === "string") {
    return text;
  } else {
    return text && text.toString();
  }
};
const delColumn = (index: number) => {
  tableDataNew.value.splice(index, 1);
};
/**
@ 作者: 秦东
@ 时间: 2024-08-02 13:22:14
@ 功能: 时间戳转换对象
*/
const timeToAry = (timestamp: number) => {
  const date = new Date(timestamp);
  const year = date.getFullYear();
  const month = ("0" + (date.getMonth() + 1)).slice(-2);
  const day = ("0" + date.getDate()).slice(-2);
  const hours = ("0" + date.getHours()).slice(-2);
  const minutes = ("0" + date.getMinutes()).slice(-2);
  const seconds = ("0" + date.getSeconds()).slice(-2);
  return {
    year: year,
    month: month,
    day: day,
    hours: hours,
    minutes: minutes,
    seconds,
  };
};
/**
@ 作者: 秦东
@ 时间: 2024-08-02 13:02:49
@ 功能: 将时间戳转换成字符串
*/
const timeToString = (timeVal: any, types: int) => {
  let timeStr = "";
  if (Array.isArray(timeVal)) {
    if (timeVal.length >= 2) {
      let startTime = timeToAry(timeVal[0]);
      let endTime = timeToAry(timeVal[1]);
      switch (types) {
        case "year": //年
          timeStr = `${startTime.year} 至 ${endTime.year}`;
          break;
        case "month": //月
          timeStr = `${startTime.year}-${startTime.month} 至 ${endTime.year}-${endTime.month}`;
          break;
        case "datetime": //日期+时间
          timeStr = `${startTime.year}-${startTime.month}-${startTime.day} ${startTime.hours}:${startTime.minutes}:${startTime.seconds} 至 ${endTime.year}-${endTime.month}-${endTime.day} ${endTime.hours}:${endTime.minutes}:${endTime.seconds}`;
          break;
        case "week": //周
          let startWeek = getYearWeek(startTime);
          let endWeek = getYearWeek(endTime);
          timeStr = `${startWeek} 至 ${endWeek}`;
          break;
        case "timeCalss": //时间
          timeStr = `${startTime.hours}:${startTime.minutes}:${startTime.seconds} 至 ${endTime.hours}:${endTime.minutes}:${endTime.seconds}`;
          break;
        case "datetimerange":
          timeStr = `${startTime.year}-${startTime.month}-${startTime.day} ${startTime.hours}:${startTime.minutes}:${startTime.seconds} 至 ${endTime.year}-${endTime.month}-${endTime.day} ${endTime.hours}:${endTime.minutes}:${endTime.seconds}`;
          break;
        case "daterange":
          timeStr = `${startTime.year}-${startTime.month}-${startTime.day} 至 ${endTime.year}-${endTime.month}-${endTime.day}`;
          break;
        case "monthrange":
          timeStr = `${startTime.year}-${startTime.month} 至 ${endTime.year}-${endTime.month}`;
          break;
        default:
          timeStr = `${startTime.year}-${startTime.month}-${startTime.day} 至 ${endTime.year}-${endTime.month}-${endTime.day}`;
          break;
      }
    } else if (timeVal.length == 1) {
      let { year, month, day, hours, minutes, seconds } = timeToAry(timeVal[0]);
      switch (types) {
        case "year": //年
          timeStr = `${year}`;
          break;
        case "month": //月
          timeStr = `${year}-${month}`;
          break;
        case "datetime": //日期+时间
          timeStr = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
          break;
        case "week": //周
          timeStr = getYearWeek(timeVal);
          break;
        case "timeCalss": //时间
          timeStr = `${hours}:${minutes}:${seconds}`;
          break;
        default:
          timeStr = `${year}-${month}-${day}`;
          break;
      }
    } else {
      timeStr = "未知时间";
    }
  } else {
    let { year, month, day, hours, minutes, seconds } = timeToAry(timeVal);
    switch (types) {
      case "year": //年
        timeStr = `${year}`;
        break;
      case "month": //月
        timeStr = `${year}-${month}`;
        break;
      case "datetime": //日期+时间
        timeStr = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
        break;
      case "week": //周
        timeStr = getYearWeek(timeVal);
        break;
      case "timeCalss": //时间
        timeStr = `${hours}:${minutes}:${seconds}`;
        break;
      default:
        timeStr = `${year}-${month}-${day}`;
        break;
    }
  }

  return timeStr;
};
let associatedFormsIndexTablekey = 0;
/* const emits = defineEmits<{
	(e: 'asfValueChanged', val: any): void
	
}>() */
let emits = defineEmits(["optionsValue3GetTable", "asfValueChanged"]);

function asfValueChanged(val: any) {
  //console.log("childTable-asfValueChanged",val)
  emits("asfValueChanged", val);
}

function optionsValue3Get1(data: any, fieldName: string) {
  fieldName = "childTable---" + props.data.name + "---" + fieldName;
  /* console.log("childTable---optionsValue3Get1")
	console.log(props.data.name) */
  emits("optionsValue3GetTable", data, fieldName);
}
</script>
<template>
  <div class="form-table form-table-add">
    <el-text class="mx-1" size="large">{{ sunTableName }}</el-text>
    <el-table v-bind="data.control" :class="[data.className]" :data="tableDataNew">
      <el-table-column
        v-for="(item, index) in data.list"
        :key="index"
        :prop="item.name"
        :label="item.item.label"
        :width="item.item.span"
      >
        <template #default="scope">
          <span v-if="item.type === 'index'">{{ scope.$index + 1 }}</span>
          <div v-if="type === 4 || editDisabled">
            <LokOrgCentent
              v-if="item.type == 'orgCentent'"
              :orgid="scope.row[item.name].toString()"
            />
            <div v-else-if="item.type == 'lowcodeImage'">
              <LowcodeImagePage :data="item" v-model="scope.row[item.name]" />
            </div>
            <div v-else-if="item.type == 'upload'">
              <UploadPageList
                :data="item"
                :img-list="scope.row[item.name]"
                :control="item.control"
              />
            </div>
            <div
              v-else-if="item.type == 'datePicker'"
              v-html="timeToString(scope.row[item.name], item.control.type)"
            ></div>
            <div v-else-if="item.type == 'associatedForms'">
              <AssociatedForms
                :data="item"
                v-model="scope.row[item.name]"
                :tablekey="associatedFormsIndexTablekey"
                :row-index="scope.$index"
              />
            </div>
            <div v-else>{{ getText(scope.row[item.name], scope.row, item.name) }}</div>
          </div>
          <div v-else>
            <form-item
              v-model="scope.row[item.name]"
              :tProp="`${data.name}.${scope.$index}.${item.name}`"
              :row-index="scope.$index"
              :data="item"
              @asf-value-changed="asfValueChanged"
              @optionsValue3Get1="optionsValue3Get1"
            />
          </div>
        </template>
        <template #header="scope" v-if="item.help">
          {{ scope.column.label }}
          <Tooltip :content="item.help" />
        </template>
      </el-table-column>
      <el-table-column
        prop="del"
        label="操作"
        v-if="[1, 2].includes(type as number) && data.config.delBtnText && !editDisabled"
      >
        <template #default="scope">
          <el-button link type="primary" @click="delColumn(scope.$index)">{{
            data.config.delBtnText
          }}</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div
      class="table-btn"
      v-if="[1, 2].includes(type as number) && data.config.addBtnText && !editDisabled"
    >
      <el-button size="small" @click="addColumn">{{ data.config.addBtnText }}</el-button>
    </div>
  </div>
</template>
<style lang="scss" scoped></style>