Skip to content

basic-uniapp-v3
basic-uniapp-v3
提交 f695d9ef 作者: 王定
操作

feat: 基本完成找人干活的新增发布功能

上级 7735899f
正在显示 包含 1141 行增加 和 2 行删除
src/api/model/linghuoyonggong.ts
......@@ -7,9 +7,64 @@ enum Api {
employmentDetails = '/employment/queryById', // 查看用工详情
employmentEdit = '/employment/app/edit', // 编辑用工
employmentRegister = '/employment/app/register', // 报名用工
queryConditions = '/sys/region/queryConditions', // 组合条件查询市——村
gitListByCodeDict = '/sys/dictItem/listByCode', // 查询字典
queryByCategoryAndCode = '/sys/labelCategory/queryByCategoryAndCode', // 查询字典
postLaborAdd = '/server/labor/add', // 新增
}
/**
* @param params 请求参数
* @description: 找人干活发布 新增
*/
export function postLaborAdd(params = {}) {
return otherHttp.post({
url: Api.postLaborAdd,
params,
})
}
/**
* @param params 查询指定分类和编码下的子类
* @description: 找人干活发布 获取人员技能
*/
export function queryByCategoryAndCode(params = {}) {
return otherHttp.get({
url: Api.queryByCategoryAndCode,
params,
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
},
})
}
/**
* @param params 请求参数
* @description: 找人干活发布 获取字典值
*/
export function gitListByCodeDict(params = {}) {
return otherHttp.get({
url: Api.gitListByCodeDict,
params,
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
},
})
}
/**
* @param params 请求参数
* @description: 找人干活发布 获取到村
*/
export function queryConditions(params = {}) {
return otherHttp.post({
url: Api.queryConditions,
params,
})
}
/**
* @param params 请求参数
* @description: 用工列表
*/
export function employmentList(params = {}) {
......
src/common/public.less
......@@ -47,3 +47,26 @@
.align-center{
align-items: center;
}
.yr_person_popup{
padding-top: 36rpx;
padding-left: 26rpx;
padding-right: 24rpx;
padding-bottom: 48rpx;
.popup_top{
display:flex;
justify-content: space-between;
.add_person_text{
color: #333333;
font-size: 28rpx;
}
.del_person_btn{
font-size: 28rpx;
color: #FF8063;
}
}
.popup_content{
}
}
src/pages.json
......@@ -414,6 +414,19 @@
}
},
{
"path": "pages/linghuoyonggong/publishEmployment",
"style": {
"navigationBarTitleText": "发布",
"enablePullDownRefresh": false,
"navigationBarBackgroundColor": "#5DB66F",
"navigationBarTextStyle": "white",
"backgroundColorBottom": "#F2F2F2",
"app-plus": {
"titleNView": {}
}
}
},
{
"path": "pages/linghuoyonggong/details",
"style": {
"navigationBarTitleText": "详情",
......
src/pages/linghuoyonggong/linghuoyonggong.vue
......@@ -226,7 +226,11 @@
}
// 发布用工
function handlePublish() {
Navigate.to('/pages/linghuoyonggong/form')
if(pageData.currentEmploymentId === 2){
Navigate.to('/pages/linghuoyonggong/publishEmployment')
}else{
Navigate.to('/pages/linghuoyonggong/form')
}
}
// 获取时间差
function getDaysDiff(date1: Date | number | string, date2: Date | number | string): number {
......@@ -251,6 +255,12 @@
return diffDays
}
function onSearch(res:any){
uni.showToast({
title: '搜索：' + res.value,
icon: 'none'
})
}
onReachBottom(() => {
console.log('触底了')
if (pageData.total <= pageData.employmentList.length) {
......@@ -273,7 +283,6 @@
<template>
<view class="codefun-flex-col page">
<!-- <fui-search-bar></fui-search-bar> -->
<view class="codefun-flex-col codefun-self-stretch">
<!-- <view class="codefun-mt-14 codefun-flex-row group_2 gap-2">
<view
......@@ -290,6 +299,9 @@
</view> -->
<view class="codefun-mt-14 codefun-flex-col group_3">
<view class="top-search-view">
<uni-search-bar radius="100" placeholder="请输入搜索内容" clearButton="auto" cancelButton="none" @confirm="onSearch" />
</view>
<view class="codefun-flex-row section_2">
<view
v-for="tab in pageData.employmentTabs"
......@@ -431,6 +443,10 @@
overflow-y: auto;
overflow-x: hidden;
height: calc(100vh - 88rpx);
.top-search-view{
height: 64rpx;
}
.section {
padding: 26rpx 28rpx 26rpx 36rpx;
background-color: #5db66f;
......@@ -520,7 +536,13 @@
.group_3 {
padding: 0 28rpx;
height: 685rpx;
.top-search-view{
.uni-searchbar{
padding: 0rpx !important;
}
}
.section_2 {
margin-top: 48rpx;
padding-bottom: 8rpx;
background-color: #ffffff66;
border-radius: 32rpx;
......
src/pages/linghuoyonggong/publishEmployment.vue 0 → 100644
<script setup lang="ts">
import { reactive, toRefs, ref } from 'vue'
import { onLoad, onShow } from '@dcloudio/uni-app'
import { useUserStore } from '@/store/modules/user'
import { useGlobSetting } from '/@/hooks/setting'
import * as LinghuoyonggongAPI from '@/api/model/linghuoyonggong'
import * as UserInfoAPI from '@/api/model/userInfo'
import { areaTree, getCodeByText, getTextByCode } from '@/utils/areaData'
import { useDictStore } from '@/store/modules/dict'
import { getDictData, getText } from '@/utils/dict/area'
const dictStore = useDictStore()
const userStore = useUserStore()
const globSetting = useGlobSetting()
onLoad((option) => {
// 获取数据详情
if (option.id) {
getDetails(option.id)
} else {
// 获取当前位置
getCurrentAddressInfo()
}
getProvince();
// 获取字典值
getDictVal();
})
onShow(() => {
// 数据字典赋值
initDict()
})
const skillPopupRef = ref(null);
let tempWorkersParam = reactive({
id:null,
laborId:null, //用工信息ID
name:"",// 工人姓名
mobile:"",// 手机号
gender:null,// 性别
genderZh:"",
birthday:"", // 出生日期
edu:null,// 学历
eduZh:"",
attr:"",// 人员属性
skill:"", // 人员技能
})
// 字典值
const DictData = reactive({
sexArr:[],// 性别
educationArr:[],// 学历
socialattributesArr:[],// 人员属性
dictValArr:[],// 过渡
dictType:"",
isSkillPopupShow:false,
skillValue:[],
skillOptionsVal:[]
})
const pageData = reactive({
province: [], //省数组
city: [], //市数组
district: [], //区数组
street: [], //街道数组
mulSelect: [], //四级联动显示数组，该数组的值为[[province],[city],[district],[street]]
provinceId: 0, //省的id
cityId: 0, //市的id
districtId: 0,//区的id
isActive:false,
address:'',
laborParam:{
id:null,
addr:"",
lon:29,
lat:110,
contactName:"",
contactMobile:"",
},
workersParam:[],
loading: false,
isPersonPopupShow:false,
datePickerShow:false,
attrPickerShow:false,
show: {
time1: false,
time2: false,
area: false,
urgentdegree: false,
type: false,
},
options: {
area: [],
urgentdegree: [],
type: [],
},
form: {
id: '',
name: '',
content: '',
workers: '',
price: '',
typeText: '',
type: null,
area: '',
areaText: '',
province: '',
city: '',
country: '',
address: '',
urgentdegreeText: '',
urgentdegree: null,
starttime: '',
estimatedendtime: '',
picture: null,
pictureObj: null,
longitude: '',
latitude: ''
},
position: [],
rules: [
{
name: 'type',
rule: ['required'],
msg: ['请选择用工类型'],
},{
name: 'name',
rule: ['required'],
msg: ['请输入标题'],
}, {
name: 'workers',
rule: ['required'],
msg: ['请输入工人数量'],
}, {
name: 'price',
rule: ['required'],
msg: ['请输入用工单价'],
}, {
name: 'starttime',
rule: ['required'],
msg: ['请选择开始时间'],
}, {
name: 'estimatedendtime',
rule: ['required'],
msg: ['请选择预计结束时间'],
}, {
name: 'content',
rule: ['required'],
msg: ['请输入工作内容'],
}, {
name: 'area',
rule: ['required'],
msg: ['请选择地区'],
}, {
name: 'address',
rule: ['required'],
msg: ['请输入详细地址'],
}, {
name: 'urgentdegree',
rule: ['required'],
msg: ['请选择紧急程度'],
}, {
name: 'picture',
rule: ['required'],
msg: ['请上传图片'],
},
],
})
// 获取字典值
function getDictVal(){
LinghuoyonggongAPI.gitListByCodeDict({ code : 'sex'}).then(res=>{
DictData.sexArr = res;
})
LinghuoyonggongAPI.gitListByCodeDict({ code : 'education'}).then(res=>{
DictData.educationArr = res;
})
LinghuoyonggongAPI.gitListByCodeDict({ code : 'socialattributes'}).then(res=>{
DictData.socialattributesArr = res;
})
queryByCategoryAndCode(2002,null);
}
function queryByCategoryAndCode(code,e){
LinghuoyonggongAPI.queryByCategoryAndCode({ category : 1,code : code}).then(res=>{
if(res.length){
let dataArr = [];
for(let i = 0; i < res.length; i++){
let obj = {text:"",value:""};
obj.text = res[i].name;
obj.value = res[i].code;
dataArr.push(obj);
}
console.log(dataArr);
if(!DictData.skillOptionsVal.length){
DictData.skillOptionsVal = dataArr;
}else{
skillPopupRef.value.setRequestData(dataArr, e.layer);
}
}else{
skillPopupRef.value.end();
}
})
}
// 选择技能完成
function selectCompleteSkill(e){
tempWorkersParam.skill = e.text.join('');
DictData.isSkillPopupShow = false;
}
// 技能值发生了改变
function changeSkill(e){
console.log(e)
let val = e.value;
queryByCategoryAndCode(val,e);
}
// 出生日期的选择
function attrChange(e) {
if(DictData.dictType == 'education'){
let educationArr = DictData.educationArr;
tempWorkersParam.eduZh = e.value;
for(let i = 0; i < educationArr.length; i++){
if(e.value == educationArr[i].itemText){
tempWorkersParam.edu = parseInt(educationArr[i].id);
break;
}
}
}
if(DictData.dictType == 'socialattributes'){
tempWorkersParam.attr = e.value;
}
pageData.attrPickerShow = false;
}
// 出生日期的选择
function dateBirthChange(e) {
tempWorkersParam.birthday = e.result;
pageData.datePickerShow = false;
}
// 添加人员
function addPersonData(){
let sexArr = DictData.sexArr;
for(let i = 0; i < sexArr.length; i++){
if(tempWorkersParam.genderZh == sexArr[i].itemText){
tempWorkersParam.gender = sexArr[i].id;
break;
}
}
pageData.workersParam.push(JSON.parse(JSON.stringify(tempWorkersParam)));
pageData.isPersonPopupShow = false;
}
// 选择出生日期
function onPickerTap(e) {
let dataVal = null,itemTextArr = [];
DictData.dictType = e;
if(DictData.dictType == 'education'){
dataVal = DictData.educationArr;
for(let i = 0; i < dataVal.length; i++){
itemTextArr.push(dataVal[i].itemText);
}
}
if(DictData.dictType == 'socialattributes'){
dataVal = DictData.socialattributesArr;
for(let i = 0; i < dataVal.length; i++){
itemTextArr.push(dataVal[i].itemText);
}
}
DictData.dictValArr = itemTextArr;
pageData.attrPickerShow = true
}
// 打开添加人员弹出框
function openAddPersonPopup(){
tempWorkersParam.id=null;
tempWorkersParam.laborId=null;
tempWorkersParam.name="";
tempWorkersParam.mobile="";
tempWorkersParam.gender="";
tempWorkersParam.genderZh="";
tempWorkersParam.birthday="";
tempWorkersParam.edu="";
tempWorkersParam.eduZh="";
tempWorkersParam.attr="";
tempWorkersParam.skill="";
pageData.isPersonPopupShow = true;
}
function colChange(e) {
switch (e.detail.column){
case 0://选择市
pageData.provinceId = pageData.mulSelect[0][e.detail.value].code;
// 获取对应的 区县
LinghuoyonggongAPI.queryConditions({ parentCode : pageData.provinceId}).then(res=>{
pageData.city = res;
pageData.mulSelect[1]= pageData.city;
// 获取对应的乡镇
LinghuoyonggongAPI.queryConditions({ parentCode : pageData.city[0].code}).then(res=>{
pageData.district = res;
pageData.mulSelect[2]= pageData.district;
// 获取对应的村
LinghuoyonggongAPI.queryConditions({ parentCode : pageData.district[0].code}).then(res=>{
pageData.street = res;
if(res.length){
pageData.mulSelect[3]= pageData.street;
}
})
})
})
break;
case 1://选择区县
pageData.cityId=pageData.mulSelect[1][e.detail.value].code;
// 获取对应的乡镇
LinghuoyonggongAPI.queryConditions({ parentCode :pageData.cityId}).then(res=>{
pageData.district = res;
pageData.mulSelect[2]=pageData.district;
// 获取对应的村
LinghuoyonggongAPI.queryConditions({ parentCode :pageData.district[0].code}).then(res=>{
if(res.length){
pageData.street = res;
pageData.mulSelect[3]=pageData.street;
}
})
})
break;
case 2://选择镇
pageData.districtId=pageData.mulSelect[2][e.detail.value].code;
LinghuoyonggongAPI.queryConditions({ parentCode :pageData.districtId}).then(res=>{
if(res.length){
pageData.street = res;
pageData.mulSelect[3]=pageData.street;
}
});
break;
default:
break;
}
}
function getProvince() {
LinghuoyonggongAPI.queryConditions({ parentCode : 43 }).then(res=>{
pageData.province = [];
pageData.province = res;
pageData.mulSelect.push(pageData.province);
let code = pageData.province[0].code;
LinghuoyonggongAPI.queryConditions({ parentCode : code}).then(res=>{
pageData.city = res;
pageData.mulSelect.push(pageData.city);
let code = pageData.city[0].code;
LinghuoyonggongAPI.queryConditions({ parentCode : code}).then(res=>{
pageData.district = res;
pageData.mulSelect.push(pageData.district);
let code = pageData.district[0].code;
LinghuoyonggongAPI.queryConditions({ parentCode : code}).then(res=>{
pageData.street = res;
if(res.length){
pageData.mulSelect.push(pageData.street);
}
})
})
})
})
}
function pickerChange(e) {
for(var i=0;i<e.detail.value.length;i++){
if(e.detail.value[i]===null){
e.detail.value[i]=0;
}
}
let s_province = pageData.mulSelect[0][e.detail.value[0]];
let s_city = pageData.mulSelect[1][e.detail.value[1]||0];
let s_district = pageData.mulSelect[2][e.detail.value[2]||0];
let s_street = null;
if(e.detail.value.length == 4){
s_street = pageData.mulSelect[3][e.detail.value[3]||0];
pageData.laborParam.addr=s_province.name+s_city.name+s_district.name+s_street.name;
}else{
pageData.laborParam.addr=s_province.name+s_city.name+s_district.name;
}
pageData.isActive=true;
}
/* ****************************************************** */
const { show, options, form } = toRefs(pageData);
async function initDict() {
pageData.options.area = await getDictData();
console.log("pageData.options.area =");
console.log(pageData.options.area);
pageData.options.urgentdegree = dictStore.getDictList.employment_urgent.map((item) => {
return {
value: item.value,
text: item.text,
}
})
pageData.options.type = dictStore.getDictList.employment_type.map((item) => {
return {
value: item.value,
text: item.text,
}
})
}
function getCurrentAddressInfo() {
if (!uni.getStorageSync('location'))
return
const { lon, lat } = uni.getStorageSync('location')
pageData.position = [lon, lat]
UserInfoAPI.location({
lon,
lat,
}).then((res) => {
pageData.form.province = res.province
pageData.form.city = res.city
pageData.form.country = res.country
pageData.form.areaText = `${res.province}/${res.city}/${res.country}`
pageData.form.area = `${getCodeByText(res.province)},${getCodeByText(res.city)},${getCodeByText(res.country)}`
})
}
function getDetails(id) {
pageData.loading = true
LinghuoyonggongAPI.employmentDetails({ id })
.then((res) => {
pageData.form = res
pageData.form.areaText = getText(pageData.form.area, '/')
pageData.form.urgentdegreeText = pageData.options.urgentdegree.find(
(item) => item.value == pageData.form.urgentdegree,
)?.text
pageData.form.typeText = pageData.options.type.find((item) => item.value == pageData.form.type)?.text
pageData.form.pictureObj = pageData.form.picture && parseUrlInfo(pageData.form.picture)
console.log(pageData.form)
})
.finally(() => {
pageData.loading = false
})
}
function parseUrlInfo(url) {
// 从URL中提取文件名
const pathParts = url.split('/')
const fileName = pathParts[pathParts.length - 1]
// 提取扩展名
const fileParts = fileName.split('.')
const extname = fileParts[fileParts.length - 1]
// 返回格式化的对象
return {
name: fileName,
extname,
url,
}
}
function handleChangeTime1(e) {
pageData.form.starttime = e.result
pageData.show.time1 = false
}
function handleChangeTime2(e) {
pageData.form.estimatedendtime = e.result
pageData.show.time2 = false
}
function handleChangetype(e) {
pageData.form.type = e.value
pageData.form.typeText = e.text
pageData.show.type = false
}
function handleChangeUrgentdegree(e) {
pageData.form.urgentdegree = e.value
pageData.form.urgentdegreeText = e.text
pageData.show.urgentdegree = false
}
function handleChangeAddress(e) {
pageData.form.areaText = e.text.join('/')
pageData.form.area = e.value.join(',')
pageData.show.area = false
}
const toastRef = ref()
const uploadRef = ref()
// 文件上传
function handleUpload(file) {
uni.uploadFile({
url: `${globSetting.apiUrl + globSetting.urlPrefix}/sys/common/upload`, // 直接使用上传接口URL
filePath: file.tempFiles[0].path,
name: 'file',
formData: {
biz: 'temp',
},
header: {
'X-Access-Token': userStore.getToken,
},
success: (res) => {
if (res.statusCode === 200) {
const data = JSON.parse(res.data)
if (data.code === 200 || data.code === 0) {
toastRef.value.show({
type: 'success',
text: '上传成功',
})
pageData.form.picture = data.message // 保存返回的图片信息
}
}
},
fail: (err) => {
toastRef.value.show({
type: 'error',
text: '上传失败',
})
uploadRef.value.clearFiles()
pageData.form.picture = null
},
})
}
// 文件删除
function handleDelete(file) {
uploadRef.value.clearFiles()
pageData.form.picture = null
}
const formRef = ref()
function submit() {
if (pageData.position.length == 0) {
toastRef.value.show({
type: 'error',
text: '无法获取位置',
})
return
}
pageData.form.longitude = pageData.position[0]
pageData.form.latitude = pageData.position[1]
formRef.value.validator(pageData.form, pageData.rules, true).then((res) => {
if (res.isPassed) {
LinghuoyonggongAPI.employmentAdd(pageData.form).then((res) => {
toastRef.value.show({
type: 'success',
text: '用工发布成功',
})
uni.switchTab({
url: '/pages/chanxiao/chanxiao',
})
})
}
})
}
// 发布灵活用工
function submitLaborAdd(){
let formData = {
laborParam:pageData.laborParam,
workersParam:pageData.workersParam
}
LinghuoyonggongAPI.postLaborAdd(formData).then((res) => {
toastRef.value.show({
type: 'success',
text: '发布成功',
})
uni.switchTab({
url: '/pages/chanxiao/chanxiao',
})
})
}
function getCurrentDate(){
const date = new Date()
const year = date.getFullYear()
const month = date.getMonth() + 1
const day = date.getDate()
return `${year}-${month}-${day}`
}
</script>
<template>
<view class="page">
<view class="bg_white formBox">
<view class="form_view">
<view class="yr-form">
<view class="yr-form-item">
<view class="yr-form-title"><text class="required-mark">*</text>村名称</view>
<picker class="yr-form-input" mode="multiSelector" :range="pageData.mulSelect" :range-key="'name'" @change="pickerChange" @columnchange="colChange">
<view class="yr-input-placeholder" v-if="!pageData.isActive">请选择</view>
<view v-else class="yr-input-style">{{pageData.laborParam.addr}}</view>
</picker>
</view>
<view class="yr-form-item">
<view class="yr-form-title"><text class="required-mark">*</text>联系人</view>
<input class="yr-form-input" v-model="pageData.laborParam.contactName" name="input" placeholder="请填写联系人姓名" />
</view>
<view class="yr-form-item border-bottom-none">
<view class="yr-form-title"><text class="required-mark">*</text>联系电话</view>
<input class="yr-form-input" v-model="pageData.laborParam.contactMobile" type="tel" :maxlength="11" placeholder="请填写联系电话" />
</view>
</view>
</view>
</view>
<!-- 待业人员 -->
<view class="bg_white formBox unemployed_person">
<view class="form_view">
<view class="yr-form">
<view class="yr-form-item border-bottom-none">
<view class="yr-form-title"><text class="required-mark">*</text>待业人员</view>
<view class="yr_add_btn" @click="openAddPersonPopup()">
<image class="add_person_icon" src="/static/images/linghuoyonggong/add_person.png" />
<view class="add_person_text">添加人员</view>
</view>
</view>
<view class="yr-person-item" v-for="(item,index) in pageData.workersParam" :key="index">
<view class="yr-person-info">
<view class="person_name_attr">{{item.name}}<text class="person_attr">{{item.attr}}</text></view>
<view class="person-info">54｜{{item.gender}}｜{{item.edu}}</view>
<view class="person-info text_overflow_ellipsis">技能：{{item.skill}}</view>
</view>
<view class="edit_person">
<image class="edit_person_icon" src="/static/images/linghuoyonggong/edit_person.png" />
</view>
</view>
<!-- <view class="yr-person-item">
<view class="yr-person-info">
<view class="person_name_attr">何德海<text class="person_attr">低保户</text></view>
<view class="person-info">54｜男｜高中以下</view>
<view class="person-info text_overflow_ellipsis">技能：采摘、养殖、粉刷、种植元素通常用于创建超链接。如果你想通过CSS选择器选</view>
</view>
<view class="edit_person">
<image class="edit_person_icon" src="/static/images/linghuoyonggong/edit_person.png" />
</view>
</view> -->
</view>
</view>
</view>
<view class="yr-submit-btn">
<view class="submit-btn-view">
<fui-button text="发布" bold radius="96rpx" @click="submitLaborAdd" height="80rpx"/>
</view>
</view>
</view>
<fui-date-picker :show="show.time1" type="3" @change="handleChangeTime1" :min-date="getCurrentDate()" @cancel="show.time1 = false" />
<fui-date-picker :show="show.time2" type="3" @change="handleChangeTime2" :min-date="getCurrentDate()" @cancel="show.time2 = false" />
<fui-picker :show="show.type" :layer="1" :linkage="true" :options="options.type" @change="handleChangetype" @cancel="show.type = false" />
<fui-picker :show="show.urgentdegree" :layer="1" :linkage="true" :options="options.urgentdegree" @change="handleChangeUrgentdegree" @cancel="show.urgentdegree = false"/>
<fui-picker :show="show.area" :options="options.area" :linkage="true" :layer="3" @change="handleChangeAddress" @cancel="show.area = false" />
<fui-toast ref="toastRef" />
<fui-loading isFixed v-if="pageData.loading" backgroundColor="rgba(0, 0, 0, 0.4)" />
<!-- 普通弹窗 -->
<fui-bottom-popup :show="pageData.isPersonPopupShow" @close="pageData.isPersonPopupShow = false">
<view class="fui-custom__wrap yr_person_popup">
<view class="popup_top">
<uni-icons type="left" size="24" color="#333333" @click="pageData.isPersonPopupShow = false"></uni-icons>
<view class="add_person_text">添加人员</view>
<view class="del_person_btn" @click="pageData.isPersonPopupShow = false">删除</view>
</view>
<view class="popup_content">
<fui-form error-position="1" ref="form" top="0" :model="tempWorkersParam" :show="false">
<fui-form-item label="姓名">
<fui-input :borderBottom="false" v-model="tempWorkersParam.name" :padding="[0]" placeholder="请输入姓名"></fui-input>
</fui-form-item>
<fui-form-item label="手机号">
<fui-input :borderBottom="false" v-model="tempWorkersParam.mobile" :padding="[0]" placeholder="请输入手机号"></fui-input>
</fui-form-item>
<fui-form-item label="性别">
<fui-radio-group v-model="tempWorkersParam.genderZh">
<fui-label inline v-for="item in DictData.sexArr" :key="item.id">
<fui-radio :value="item.itemValue"></fui-radio>
<fui-text :size="28" :text="item.itemText" :padding="['0','30rpx','0','16rpx']"></fui-text>
</fui-label>
</fui-radio-group>
</fui-form-item>
<fui-form-item label="出生日期" highlight @click="pageData.datePickerShow=true;">
<fui-input :borderBottom="false" v-model="tempWorkersParam.birthday" :padding="[0]" :disabled="true" placeholder="请选择出生日期"
backgroundColor="transparent"></fui-input>
</fui-form-item>
<fui-form-item label="学历" highlight @click="onPickerTap('education')">
<fui-input v-model="tempWorkersParam.eduZh" :borderBottom="false" :padding="[0]" placeholder="请选择学历" :disabled="true"
backgroundColor="transparent"></fui-input>
</fui-form-item>
<fui-form-item label="人员属性" highlight @click="onPickerTap('socialattributes')">
<fui-input v-model="tempWorkersParam.attr" :borderBottom="false" :padding="[0]" placeholder="请选择人员属性" :disabled="true"
backgroundColor="transparent"></fui-input>
</fui-form-item>
<fui-form-item label="人员技能" highlight @click="DictData.isSkillPopupShow = true">
<fui-input v-model="tempWorkersParam.skill" :borderBottom="false" :padding="[0]" placeholder="请选择人员技能" :disabled="true"
backgroundColor="transparent"></fui-input>
</fui-form-item>
</fui-form>
</view>
<fui-button text="保存" bold radius="96rpx" @click="addPersonData" height="80rpx"/>
</view>
</fui-bottom-popup>
<fui-date-picker :show="pageData.datePickerShow" :type="3" value="1900" valueEnd="" @change="dateBirthChange" @cancel="pageData.datePickerShow=false"></fui-date-picker>
<fui-picker :show="pageData.attrPickerShow" layer="1" :options="DictData.dictValArr" :linkage="false" @change="attrChange" @cancel="pageData.attrPickerShow = false"></fui-picker>
<!-- 人员技能 -->
<fui-bottom-popup :show="DictData.isSkillPopupShow">
<view class="fui-scroll__wrap">
<view class="fui-title">请选择技能</view>
<fui-cascader ref="skillPopupRef" :value="DictData.skillValue" stepLoading @change="changeSkill" @complete="selectCompleteSkill" :options="DictData.skillOptionsVal"></fui-cascader>
<view class="fui-icon__close" @tap.stop="DictData.isSkillPopupShow=false">
<fui-icon name="close" :size="48"></fui-icon>
</view>
</view>
</fui-bottom-popup>
</template>
<style lang="scss" scoped>
body {
background-color: #e6f5e8;
}
.page {
background-color: #e6f5e8;
width: 750rpx;
overflow-x: hidden;
.mt20 {
margin-top: 30rpx;
background: #fff;
padding: 20rpx;
border-radius: 10rpx;
}
.bg_white{
background-color: #FFFFFF;
}
.required-mark{
color:#FF5733;
font-size: 28rpx;
margin-right: 4rpx;
}
.text_overflow_ellipsis{
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.formBox {
width: 690rpx;
margin: 30rpx auto;
border-radius: 16rpx;
display: flex;
justify-content: center;
flex-wrap: wrap;
.form_view{
display: flex;
justify-content: center;
.yr-form{
width: 642rpx;
}
.border-bottom-none{
border-bottom: none !important;
}
.yr-form-item{
display: flex;
justify-content: space-between;
align-content: center;
padding-top: 36rpx;
padding-bottom: 36rpx;
border-bottom: 2rpx solid #EEEEEE;
.yr-form-title{
font-size: 28rpx;
color: #333333;
width: 132rpx;
}
.yr-form-input{
width: 480rpx;
}
.yr-input-placeholder {
font-size: 28rpx !important;
color: #999999 !important;
}
.yr-input-style{
font-size: 30rpx;
color:#181818;
}
}
}
.unemployed_person{
margin-top: 24rpx;
}
.yr_add_btn{
display: flex;
align-items: center;
.add_person_icon{
width: 32rpx;
height: 32rpx;
}
.add_person_text{
color: #5DB66F;
font-size: 28rpx;
margin-left: 20rpx;
}
}
.yr-person-item{
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 2rpx solid #EEEEEE;
margin-top: 28rpx;
.yr-person-info{
.person_name_attr{
font-size: 28rpx;
font-weight: 500;
color: #333333;
.person_attr{
font-size: 24rpx;
font-weight: 400;
color: #5DB66F;
margin-left: 12rpx;
}
}
.person-info{
font-size: 24rpx;
color: #999999;
vertical-align: middle;
margin-bottom: 24rpx;
margin-top: 24rpx;
width: 512rpx;
}
}
.edit_person{
width: 68rpx;
height: 88rpx;
display: flex;
justify-content: flex-end;
align-items: center;
}
.edit_person_icon{
width: 32rpx;
height: 28rpx;
}
}
.yr-person-item:last-child{
border-bottom: none;
}
}
.yr-submit-btn{
display: flex;
justify-content: center;
margin-top: 40rpx;
.submit-btn-view{
width: 690rpx;
}
}
.form-section {
// border-bottom: 1rpx solid #f5f5f5;
}
.form-item {
padding: 30rpx 0;
border-bottom: 1rpx solid #f5f5f5;
&:last-child {
border-bottom: none;
}
&.required .label::before {
content: '*';
color: #ff4d4f;
margin-right: 8rpx;
}
}
.form-row {
display: flex;
justify-content: space-between;
}
.half-width {
width: 48%;
}
.align-center {
align-items: center;
}
.label {
display: block;
font-size: 28rpx;
color: #333333;
font-weight: 500;
width: 180rpx;
}
.input {
width: 100%;
height: 80rpx;
background: #f8f9fa;
border-radius: 8rpx;
padding: 0 20rpx;
font-size: 28rpx;
color: #333333;
&::placeholder {
color: #999999;
}
}
.time-range {
display: flex;
align-items: center;
justify-content: space-between;
}
.time-input {
width: 45%;
border-radius: 8rpx;
display: flex;
align-items: center;
}
.time-text {
font-size: 28rpx;
color: #333333;
&.placeholder {
color: #999999;
}
}
.time-separator {
color: #666666;
font-size: 28rpx;
margin: 0 10rpx;
}
.upload-area {
margin-top: 10rpx;
}
.custom-uploader {
:deep(.uni-file-picker__container) {
border: 2rpx dashed #d9d9d9;
border-radius: 8rpx;
background: #f8f9fa;
}
}
.upload-placeholder {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 200rpx;
color: #999999;
}
.upload-icon {
font-size: 48rpx;
margin-bottom: 10rpx;
}
.upload-text {
font-size: 24rpx;
}
.submit-section {
background: transparent;
padding: 40rpx 0;
}
.submit-btn {
width: 100%;
height: 88rpx;
background: #ff9800;
border-radius: 44rpx;
color: #ffffff;
font-size: 32rpx;
font-weight: 500;
border: none;
&:active {
background: #e68900;
opacity: 0.9;
}
}
}
::v-deep .uni-input-placeholder {
font-size: 28rpx !important;
color: #999999 !important;
}
// 移除fui-form的默认样式
:deep(.fui-form) {
background: transparent;
}
:deep(.fui-form__item) {
background: transparent;
border: none;
margin-bottom: 0;
padding: 0;
}
.unit-slot {
padding: 0 16rpx;
color: #333;
font-size: 28rpx;
}
.fui-scroll__wrap {
padding-top: 30rpx;
position: relative;
}
.fui-title {
font-size: 30rpx;
font-weight: bold;
text-align: center;
padding-bottom: 24rpx;
}
.fui-icon__close {
position: absolute;
top: 24rpx;
right: 24rpx;
}
</style>
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论