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

<template>
  <div class="h-full flex">
    <div class="p-5 w-80 pr-0">
      <div class="bg-white w-full h-full shadow-md rounded-md flex flex-col">
        <div class="flex-1 p-3 overflow-y-auto">
          <el-form :model="ruleForm">
            <el-form-item label="任务名称：" label-width="7em" prop="taskName">
              <el-input v-model="ruleForm.taskName" placeholder="请输入" />
            </el-form-item>
            <el-form-item label="客户名称：" label-width="7em" prop="customerName">
              <el-input v-model="ruleForm.customerName" placeholder="请输入" />
            </el-form-item>
            <el-form-item label="联系人电话：" label-width="7em" prop="tel">
              <el-input v-model="ruleForm.tel" placeholder="请输入" />
            </el-form-item>
            <el-form-item label="优先级" label-width="7em" prop="priority">
              <el-select v-model="ruleForm.priority" placeholder="请选择">
                <el-option label="全部" value="0" />
                <el-option label="高" value="1" />
                <el-option label="中" value="2" />
                <el-option label="低" value="3" />
              </el-select>
            </el-form-item>
            <el-form-item label="任务状态" label-width="7em" prop="status">
              <el-select v-model="ruleForm.status" placeholder="请选择">
                <el-option label="全部" value="0" />
                <el-option label="未开始" value="1" />
                <el-option label="进行中" value="2" />
                <el-option label="已完成" value="3" />
                <el-option label="超时" value="4" />
              </el-select>
            </el-form-item>
            <el-form-item label="开始日期" label-width="7em" prop="startDate">
              <el-date-picker v-model="ruleForm.startDate" type="date" placeholder="选择日期" value-format="YYYY-MM-DD" />
            </el-form-item>
            <el-form-item label="结束日期" label-width="7em" prop="endDate">
              <el-date-picker v-model="ruleForm.endDate" type="date" placeholder="选择日期" value-format="YYYY-MM-DD" />
            </el-form-item>

          </el-form>
        </div>
        <div class="w-full flex p-3 shadow-[0_-3px_5px_0px_rgba(0,0,0,0.2)]">
          <el-button size="large" class="w-full" @click="reset()">重置</el-Button>
          <el-button type="primary" size="large" class="w-full" @click="search()">搜索</el-Button>
        </div>
      </div>
    </div>
    <div class="flex-1 p-5">
      <div class="bg-white w-full h-full p-3 shadow-md rounded-md">222</div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { onBeforeMount, onMounted, ref } from 'vue';
import { useStore } from '@/store';
import { MDO } from './api';
const { getFunctionList } = useStore()
const config = ref<any>([])
const defaultForm = {
  taskName: '',
  customerName: '',
  tel: '',
  priority: '0',
  status: '0',
  startDate: '',
  endDate: '',
}
const ruleForm = ref<any>()
const reset = () => {
  ruleForm.value = defaultForm;
}
const search = () => {
  console.log("ruleForm", ruleForm.value);
}
onBeforeMount(() => {
  config.value = getFunctionList(MDO);
  ruleForm.value = defaultForm;
})
</script>

<style lang="scss" scoped></style>