thridLargeScreen/src/views/healthManagement/components/TableSetItem.vue

<template>
  <div>
    <el-table :data="props.tableData" style="width: 100%">
      <el-table-column
        v-for="(item, index) in props.config"
        :key="index"
        :label="item?.label"
        :width="item?.width"
      >
        <template #default="{ row, $index }">
          <div v-if="item.prop == 'duration'" class="flex item-center">
            <!-- <el-select v-model="row.frequencyType" placeholder="">
              <el-option
                v-for="item in timeTypeList"
                :label="item.label"
                :value="item.value"
                :key="item.value"
              >
              </el-option>
            </el-select> -->
            <el-text>{{ timeTypeList[row.frequencyType]?.label }}</el-text>
            <el-input
              v-if="row.frequencyType !== 3"
              v-model="row.duration"
              clearable
              :placeholder="placeholderList[row.frequencyType]"
              class="ml-2"
              style="width: 200px"
            ></el-input>
          </div>
          <div v-else-if="item.prop == 'timePreview'">
            <span v-if="row.frequencyType == 2">
              <div v-for="(item, index) in getMonth(row.duration)" :key="index">
                {{ item }}
              </div>
            </span>
            <span v-else-if="row.frequencyType == 1 && row.duration">
              {{ previewTime(row.frequencyType, row.duration)?.label }} 每周
            </span>
            <span v-else-if="row.frequencyType == 3">{{ row.duration }}</span>
            <span v-else>{{
              previewTime(row.frequencyType, row.duration)?.label
            }}</span>
          </div>
          <!-- <div v-else-if="item.prop == 'frequency'">

          </div> -->
          <div v-else-if="item.prop == 'remark'">
            <el-input
              v-model="row.remark"
              placeholder="(选填)请输入备注信息"
            ></el-input>
          </div>
          <div v-else-if="item.prop == 'handle'">
            <el-button type="primary" link @click="handleRemove($index)"
              >移除</el-button
            >
          </div>
          <div v-else>
            {{ row[item.prop] }}
          </div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script lang="ts" setup>
import { previewTime } from "@/utils/index";
import moment from "moment";

const emits = defineEmits(["remove"]);
const props = defineProps({
  tableData: {
    type: Array,
    default: () => []
  },
  config: {
    type: Object,
    default: () => {}
  }
});
const timeTypeList = [
  {
    label: "每天",
    value: 0
  },
  {
    label: "每周",
    value: 1
  },
  {
    label: "每月",
    value: 2
  },
  {
    label: "指定时间",
    value: 3
  }
];
const placeholderList = {
  0: "请输入持续天数",
  1: "请输入持续周数",
  2: "请输入持续月数",
  3: "请输入固定天数"
};
const handleRemove = index => {
  console.log("删除的下标", index);
  emits("remove");
};
const getMonth = count => {
  console.log(count);

  if (!count) return [];
  let date = [];
  for (let i = 0; i < count; i++) {
    date.push(
      moment()
        .add(i + 1, "months")
        .format("YYYY-MM-DD")
    );
  }
  console.log("date", date);

  return date;
};
</script>