geg-gas-web/src/components/common/discountList.vue

<template>
  <div style="width: 100%">
    <a-button type="primary" style="margin-bottom: 10px" @click="add" v-if="!disabled">新增行</a-button>
    <a-table :columns="columns" :data-source="dataList" :pagination="false">
      <template #headerCell="{ column }">
        <template v-if="column.dataIndex == 'discTypeCode'">
          <span><span class="redStyle">*</span>返优惠类型</span>
        </template>
        <template v-if="column.dataIndex == 'dateFrom'">
          <span><span class="redStyle">*</span>开始日期</span>
        </template>
        <template v-if="column.dataIndex == 'dateTo'">
          <span><span class="redStyle">*</span>结束日期</span>
        </template>
      </template>
      <template #bodyCell="{ column, record, index }">
        <template v-if="column.dataIndex === 'dateFrom'">
          <a-date-picker v-model:value="record.dateFrom" format="YYYY-MM-DD" :value-format="'YYYY-MM-DD'" :disabled="disabled" @change="dateFromTb(dayjs(record.dateFrom || null), index, record)"  style="width: 100%" />
        </template>
        <template v-if="column.dataIndex === 'dateTo'">
          <a-date-picker v-model:value="record.dateTo" format="YYYY-MM-DD" :value-format="'YYYY-MM-DD'" :disabled="disabled" @change="dateToTb(dayjs(record.dateTo || null), index, record)" style="width: 100%" />
        </template>
        <template v-if="column.dataIndex === 'discTypeCode'">
          <a-select v-model:value="record.discTypeCode" :disabled="disabled" style="width: 100%" allow-clear>
            <a-select-option v-for="item in optionSelect.discTypeCodeList" :key="item.code" :value="item.code">
              {{ item.name }}
            </a-select-option>
          </a-select>
        </template>
         <template v-if="column.dataIndex === 'discDesc'">
          <a-input v-model:value="record.discDesc" :disabled="disabled" style="width: 100%" />
        </template>
        <template v-if="column.dataIndex === 'note'">
          <a-input v-model:value="record.note" :disabled="disabled" style="width: 100%" />
        </template>
        <template v-if="column.dataIndex === 'operation'">
          <a v-if="!disabled" style="margin-right: 10px" @click="btnCheck(record, index)">删除</a>
        </template>
      </template>
    </a-table>
  </div>
</template>
<script lang="ts" setup>
  import { Card } from 'ant-design-vue';
  import { ref, watch} from 'vue';
  import { useRouter } from 'vue-router';
  import { useI18n } from '/@/hooks/web/useI18n';
  import { Modal } from 'ant-design-vue';
  import { useModal } from '/@/components/Modal';
  import { message } from 'ant-design-vue';
  import dayjs from 'dayjs';

  const router = useRouter();
  const numFormat = "###,###,###,###,###,###.000"
  const { t } = useI18n();
  const dataList = ref([])
  const columns= ref([
    { title: t('序号'), dataIndex: 'index', key: 'index',  customRender: (column) => `${column.index + 1}` ,width: 80},
    { title: t('返优惠类型'), dataIndex: 'discTypeCode',  width: 100},
    { title: t('开始日期'), dataIndex: 'dateFrom',  width:160},
    { title: t('结束日期'), dataIndex: 'dateTo',  width: 160},
    { title: t('优惠说明'), dataIndex: 'discDesc',  width: 130},
    { title: t('备注'), dataIndex: 'note',  width: 200},
    { title: t('操作'), dataIndex: 'operation', width: 80, fixed: 'right',align: 'center'},
  ]);
  const [register, { openModal:openModal}] = useModal();
  const props = defineProps({
    disabled: Boolean,
    list: Array,
    optionSelect: Object
  });
  const emit = defineEmits(['change']);

    const add = () => {
      dataList.value.push({
        dateFrom: null, dateTo: null, discTypeCode: null, discDesc: null, note: null
      })
    }
    const dateFromTb = (startValue, index, record) => {
      if (!startValue) return
      const endValue = dataList.value[index]?.dateTo;
      if (!startValue || !endValue) {
        return false
      }
      if (startValue.valueOf() > endValue.valueOf()) {
        message.warning('结束日期须大于等于开始日期')
        dataList.value[index].dateFrom = ''
        return
      }

    }

    const dateToTb = (endValue, index, record) => {
      if (!endValue) return
      const startValue = dataList.value[index]?.dateFrom;
      if (!endValue || !startValue) {
        return false
      }
      if (startValue.valueOf() > endValue.valueOf()) {
        message.warning('结束日期须大于等于开始日期')
        dataList.value.splice(index, 1, { ...dataList.value[index], dateTo: '' });
        return
      }

    }
  const btnCheck = (record, index) => {
    dataList.value.splice(index, 1)
  }
  const getDataList = () => {
    return dataList.value
  }
  watch(
      () => props.disabled,
      (val) => {
        if (val) {
          let idx2 = columns.value.findIndex(v =>v.dataIndex == 'operation')
          idx2>-1 && columns.value.splice(idx2, 1)
        }
      },
      {
        immediate: true,
        deep: true,
      }
    );
  watch(
    () => props.list,
    async (val) => {
      dataList.value = val || []
    },
    {
      immediate: true,
      deep: true,
    }
  );
  defineExpose({
    getDataList,
  });
</script>
<style lang="less" scoped>
  .redStyle {
    color: red;
  }
</style>