ezhizao_yzbh_vue/src/views/business/entrust/statementAccount/ChoiceMonthDialog.vue

<template>
  <el-dialog title="设置当前工作月" v-model="formOpen" width="500px" append-to-body draggable @close="cancel">
    <el-form ref="dictRef" :model="form" label-width="100" size="small">
      <el-form-item label="对账工作月：">
        <el-date-picker v-model="dateRange" value-format="YYYY-MM-DD" type="monthrange"
          :disabled-date="disabledDateHandler" range-separator="-" format="YYYY年 第MM期" start-placeholder="开始日期"
          end-placeholder="结束日期" style="width: 240px;" @change="dateRangeChange" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" icon="Finished" size="small" @click="submitForm">确 定</el-button>
        <el-button icon="close" size="small" @click="cancel">取 消</el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script setup>
// 获取所有有委托的月份
import { getMonths } from "@/api/business/entrust/entrustOrder";
import { ref } from "vue";

const { proxy } = getCurrentInstance();

const props = defineProps({
  getList: {
    type: Function,
    default: () => { },
  },
  setCurrentMonth: {
    type: Function,
    default: () => { },
  },
});
const emit = defineEmits(["confirm"]);

const { getList } = toRefs(props);
const currentMonth = ref(proxy.moment().format("YYYY-MM-01"));
const entrustOrderId = ref(null)
const dateRange = ref([])

const formOpen = ref(false);
const form = ref({});
const months = ref([])

// function submitForm() {
//   if (currentMonth.value == null || currentMonth.value == "") {
//     proxy.$modal.msgError("请选择月份!");
//     return;
//   }
//   initCurrentMonth({
//     year: currentMonth.value.substring(0, 4),
//     month: currentMonth.value.substring(5, 7),
//   }).then((response) => {
//     proxy.$modal.msgSuccess("设置完成!");
//     formOpen.value = false;
//     setCurrentMonth(proxy.moment().format("YYYY-MM-01"));
//     cancel();
//     getList.value();
//   });
// }

function submitForm() {
  if (dateRange.value === null || dateRange.value.length === 0) {
    proxy.$modal.msgError('请选择对账月份')
    return
  }
  emit('confirm', dateRange.value)
  cancel()
}

function disabledDateHandler(date) {
  const d = proxy.moment(date, 'YYYY-MM-DD').format('YYYY-MM-DD')
  console.log(d)
  // debugger
  // 判断是否在months 中
  if (months.value.includes(d)) {
    return false
  } else {
    return true
  }
}

function dateRangeChange(arg) {
}

function cancel() {
  formOpen.value = false;
  reset();
}

function open(options) {
  formOpen.value = true
  entrustOrderId.value = options
  getMonths(entrustOrderId.value).then(res => {
    months.value = res.data
  })
}

function reset() {
  dateRange.value = []
}

// 暴露给父组件的方法
defineExpose({
  open,
});
</script>