<template> 
 | 
  <ContentScrollView :paddingH="false"> 
 | 
    <nut-form :model-value="form" ref="formRef" :rules="rules"> 
 | 
      <nut-form-item label="头像:" class="bole-form-item" prop="avatarUrl"> 
 | 
        <Uploader v-model:file-list="form.avatarUrl" :maximum="1" class="bole-uploader"> </Uploader> 
 | 
      </nut-form-item> 
 | 
      <nut-form-item label="姓名:" class="bole-form-item" prop="name"> 
 | 
        <nut-input v-model="form.name" placeholder="请输入您的姓名"> </nut-input> 
 | 
      </nut-form-item> 
 | 
      <nut-form-item label="微信号:" class="bole-form-item" prop="name"> 
 | 
        <nut-input v-model="form.name" placeholder="请输入您的微信号"> </nut-input> 
 | 
      </nut-form-item> 
 | 
      <nut-form-item label="职位:" class="bole-form-item" prop="name"> 
 | 
        <nut-input v-model="form.name" placeholder="请输入您的职位"> </nut-input> 
 | 
      </nut-form-item> 
 | 
      <nut-form-item label="邮箱:" class="bole-form-item" prop="name"> 
 | 
        <nut-input v-model="form.name" placeholder="请输入您的邮箱"> </nut-input> 
 | 
      </nut-form-item> 
 | 
      <nut-form-item label="公司名:" class="bole-form-item" prop="name"> 
 | 
        <nut-input v-model="form.name" placeholder="请输入您的公司名"> </nut-input> 
 | 
      </nut-form-item> 
 | 
      <nut-form-item label="公司所在地" class="bole-form-item" prop="areaList" required> 
 | 
        <ChooseInputWithAreaPicker 
 | 
          :columns="areaTree" 
 | 
          v-model="form.areaList" 
 | 
          placeholder="请选择您公司的所在地" 
 | 
        ></ChooseInputWithAreaPicker> 
 | 
      </nut-form-item> 
 | 
      <nut-form-item label="公司简介:" class="bole-form-item alignTop" prop="name"> 
 | 
        <nut-textarea 
 | 
          placeholder="请输入公司简介" 
 | 
          placeholderClass="bole-input-text-placeholder" 
 | 
          autoSize 
 | 
          class="bole-input-textarea" 
 | 
          v-model="form.name" 
 | 
          :max-length="500" 
 | 
          show-word-limit 
 | 
        > 
 | 
        </nut-textarea> 
 | 
      </nut-form-item> 
 | 
    </nut-form> 
 | 
  </ContentScrollView> 
 | 
  <PageFooter> 
 | 
    <PageFooterBtn type="primary" plain @click="handleCancel">取消</PageFooterBtn> 
 | 
    <PageFooterBtn type="primary" @click="handleConfirm">确认</PageFooterBtn> 
 | 
  </PageFooter> 
 | 
</template> 
 | 
  
 | 
<script setup lang="ts"> 
 | 
import { useUser } from '@/hooks'; 
 | 
import { ChooseInputWithAreaPicker } from '@12333/components'; 
 | 
import { FormValidator, Message } from '@12333/utils'; 
 | 
import * as flexWorkerServices from '@12333/services/api/FlexWorker'; 
 | 
import { FormRules } from '@nutui/nutui-taro/dist/types/__VUE/form/types'; 
 | 
import Taro from '@tarojs/taro'; 
 | 
import { goBack } from '@/utils'; 
 | 
import { useAreaTree } from '@12333/hooks'; 
 | 
import { useQuery } from '@tanstack/vue-query'; 
 | 
import { AreaType } from '@12333/constants'; 
 | 
  
 | 
defineOptions({ 
 | 
  name: 'InnerPage', 
 | 
}); 
 | 
  
 | 
const { userDetail } = useUser(); 
 | 
const { areaTree } = useAreaTree({ 
 | 
  maxLayer: AreaType.City, 
 | 
}); 
 | 
const router = Taro.useRouter(); 
 | 
const taskId = router.params?.taskId ?? ''; 
 | 
  
 | 
const form = reactive({ 
 | 
  avatarUrl: [], 
 | 
  name: '', 
 | 
  areaList: [] as string[], 
 | 
}); 
 | 
  
 | 
const rules = reactive<FormRules>({ 
 | 
  name: [{ required: true, message: '请输入姓名' }], 
 | 
  
 | 
  areaList: [ 
 | 
    { required: true, message: '请选择公司所在地', validator: FormValidator.validatorArray }, 
 | 
  ], 
 | 
}); 
 | 
  
 | 
const { 
 | 
  isLoading, 
 | 
  isError, 
 | 
  data: detail, 
 | 
  refetch, 
 | 
} = useQuery({ 
 | 
  queryKey: ['flexWorkerServices/getFlexTaskDto', taskId], 
 | 
  queryFn: async () => { 
 | 
    return await flexWorkerServices.getFlexTaskDto( 
 | 
      { id: taskId }, 
 | 
      { 
 | 
        showLoading: false, 
 | 
      } 
 | 
    ); 
 | 
  }, 
 | 
  placeholderData: () => ({} as API.GetFlexTaskDtoOutput), 
 | 
  onSuccess(data) {}, 
 | 
}); 
 | 
  
 | 
const formRef = ref<any>(null); 
 | 
function handleConfirm() { 
 | 
  if (!formRef.value) return; 
 | 
  formRef.value.validate().then(({ valid, errors }: any) => { 
 | 
    if (valid) { 
 | 
      confirm(); 
 | 
    } 
 | 
  }); 
 | 
} 
 | 
  
 | 
async function confirm() { 
 | 
  try { 
 | 
    let params: {}; 
 | 
    let res = await flexWorkerServices.addEidtFlexTask(params); 
 | 
    if (res) { 
 | 
      Message.success('编辑成功', { 
 | 
        onClosed() { 
 | 
          goBack(); 
 | 
        }, 
 | 
      }); 
 | 
    } 
 | 
  } catch (error) {} 
 | 
} 
 | 
  
 | 
function handleCancel() { 
 | 
  Taro.navigateBack(); 
 | 
} 
 | 
</script> 
 | 
  
 | 
<style lang="scss"> 
 | 
@import '@/styles/common.scss'; 
 | 
  
 | 
.businessCardEdit-page-wrapper { 
 | 
  // 
 | 
} 
 | 
</style> 
 |