manHourHousekeeper/fhKeeper/formulahousekeeper/customerBuler-crm/src/pages/tasks/ExportModal.vue

<template>
  <el-dialog v-model="props.visible" width="500px" :show-close="false" :close-on-click-modal="false" top="10vh"
    class="exportModal">
    <template #header="{ titleId, titleClass }">
      <div class="flex justify-between items-center border-b pb-3">
        <h4 :id="titleId" :class="titleClass">导出任务</h4>
        <div>
          <el-button type="primary" :loading="['2'].includes(props.saveLoading)" @click="submit()">
            导出
          </el-button>
          <el-button @click="closeVisible()">取消</el-button>
        </div>
      </div>
    </template>
    <div class="mt-5">
      <el-form ref="formRef" :model="form" label-width="6em" class="flex flex-wrap form">
        <el-form-item label="优先级:">
          <el-select v-model="form.priority" placeholder="请选择" clearable>
            <el-option v-for="item in PRIORITY " :key="item.value" :value="item.value" :label="item.label" />
          </el-select>
        </el-form-item>
        <el-form-item label="执行人:">
          <el-select v-model="form.executorId" placeholder="请选择" clearable multiple filterable>
            <el-option v-for="item in executorValueData" :key="item.id" :value="item.id" :label="item.name" />
          </el-select>
        </el-form-item>
        <el-form-item label="开始时间:" class="w50">
          <el-date-picker v-model="form.startDate" type="date" placeholder="选择日期" value-format="YYYY-MM-DD" />
        </el-form-item>
        <el-form-item label="截止时间:" class="w50">
          <el-date-picker v-model="form.endDate" type="date" placeholder="选择日期" value-format="YYYY-MM-DD" />
        </el-form-item>
      </el-form>
    </div>
  </el-dialog>
</template>

<script lang="ts" setup>
import { ref, watch } from 'vue';
import { defalutExportForm, PRIORITY, ALL_USERS } from './api';
import { post } from '@/utils/request';
import { Emits, Props } from './type';
import { dayjs } from 'element-plus';
const props = defineProps<Props>();
const emits = defineEmits<Emits>();

watch(() => props.visible, (val) => {
  if (val) {
    form.value = { ...defalutExportForm }
    post(ALL_USERS, {}).then(({ data }) => {
      executorValueData.value = data;
    })
  }
})

const formRef = ref();
const form = ref<any>({})
const executorValueData = ref<any>([])

function closeVisible() {
  emits("close")
}
function submit() {
  const { executorId, startDate, endDate, ...rest } = form.value;
  const data = {
    ...rest,
    startDate: startDate && dayjs(startDate).format('YYYY-MM-DD 00:00:00'),
    endDate: endDate && dayjs(endDate).format('YYYY-MM-DD 23:59:59'),
    executorId: executorId.join(','),
  }
  emits("submit", data)
}


</script>

<style lang="scss">
.el-form-item {
  width: 100%;
}

.form {
  .w50 {
    @apply w-1/2;
  }
}
</style>