update 人员信息样式
This commit is contained in:
赵霄
@@ -1,23 +1,23 @@
|
||||
<!-- form表单中日历样式的组件-->
|
||||
<template>
|
||||
<div>
|
||||
<van-field
|
||||
readonly
|
||||
clickable
|
||||
name="calendar"
|
||||
:value="value"
|
||||
v-bind="$attrs"
|
||||
v-on="childListeners"
|
||||
@click="clickField"
|
||||
/>
|
||||
<van-calendar
|
||||
color="#3074F6"
|
||||
v-model="showCalendar"
|
||||
:min-date="minDate"
|
||||
:max-date="maxDate"
|
||||
@confirm="onConfirm"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<van-field
|
||||
readonly
|
||||
clickable
|
||||
name="calendar"
|
||||
:value="value"
|
||||
v-bind="$attrs"
|
||||
v-on="childListeners"
|
||||
@click="clickField"
|
||||
/>
|
||||
<van-calendar
|
||||
color="#3074F6"
|
||||
v-model="showCalendar"
|
||||
:min-date="minDate"
|
||||
:max-date="maxDate"
|
||||
@confirm="onConfirm"
|
||||
/>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
|
||||
@@ -0,0 +1,186 @@
|
||||
<!-- form表单中下拉框样式的组件-->
|
||||
<template>
|
||||
<div>
|
||||
<van-field
|
||||
readonly
|
||||
clickable
|
||||
name="picker"
|
||||
:value="showValue"
|
||||
v-bind="$attrs"
|
||||
v-on="childListeners"
|
||||
@click="showPickerFunc"
|
||||
/>
|
||||
<van-popup class="dict-checkbox-field-popup" v-model="showPicker" position="bottom">
|
||||
<div class="item-ope">
|
||||
<span class="van-picker__cancel" @click="onCancel">取消</span>
|
||||
<span class="van-picker__confirm" @click="onConfirm">确认</span>
|
||||
</div>
|
||||
<van-checkbox-group class="dict-checkbox-group" v-model="checkedArr" ref="checkboxGroup">
|
||||
<!-- <div :key="item[valueKey]">-->
|
||||
<van-checkbox
|
||||
v-for="(item) in columnData"
|
||||
:key="item[valueKey]"
|
||||
:name="item[valueKey]"
|
||||
shape="square"
|
||||
>
|
||||
{{item[showKey]}}
|
||||
</van-checkbox>
|
||||
<!-- </div>-->
|
||||
</van-checkbox-group>
|
||||
<!-- <van-picker-->
|
||||
<!-- show-toolbar-->
|
||||
<!-- :columns="columnData"-->
|
||||
<!-- @confirm="onConfirm"-->
|
||||
<!-- @cancel="showPicker = false"-->
|
||||
<!-- :value-key="showKey"-->
|
||||
<!-- />-->
|
||||
</van-popup>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {ajaxGetDictItems, getDictItemsFromCache} from '../../api/api'
|
||||
|
||||
export default {
|
||||
name: 'PickerDictCheckboxField',
|
||||
props: {
|
||||
value: {
|
||||
type: [String, Number, Object],
|
||||
required: false
|
||||
},
|
||||
dictCode: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: ''
|
||||
},
|
||||
// 默认是否有其他值
|
||||
valueKey: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: 'value'
|
||||
},
|
||||
// picker中显示的key值
|
||||
showKey: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: 'text'
|
||||
},
|
||||
readonly: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
showPicker: false,
|
||||
showValue: '',
|
||||
columnData: [],
|
||||
checkedArr: []
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
value: {
|
||||
immediate: true,
|
||||
handler: function () {
|
||||
this.initVal()
|
||||
}
|
||||
},
|
||||
dictCode:{
|
||||
immediate:true,
|
||||
handler() {
|
||||
this.initDictData()
|
||||
},
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
//透传给下级组件的事件，需要排除本组件使用的change事件
|
||||
childListeners() {
|
||||
// const vm = this
|
||||
let result = Object.assign({},
|
||||
this.$listeners,
|
||||
)
|
||||
delete result.change
|
||||
return result
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
showPickerFunc() {
|
||||
if(this.readonly) return
|
||||
this.initVal()
|
||||
this.showPicker = true
|
||||
},
|
||||
initVal() {
|
||||
if (this.value) {
|
||||
this.checkedArr = this.value.split(',')
|
||||
let showArr = []
|
||||
this.checkedArr.map(item => {
|
||||
let column = this.columnData.find(tt => (tt[this.valueKey] + '') === (item + ''))
|
||||
if(column) {
|
||||
showArr.push((column || {})[this.showKey])
|
||||
}
|
||||
this.showValue = showArr.join('，')
|
||||
})
|
||||
} else {
|
||||
this.showValue = ''
|
||||
this.checkedArr = []
|
||||
}
|
||||
},
|
||||
initDictData() {
|
||||
//优先从缓存中读取字典配置
|
||||
if(getDictItemsFromCache(this.dictCode)){
|
||||
this.columnData = getDictItemsFromCache(this.dictCode)
|
||||
return
|
||||
}
|
||||
//根据字典Code, 初始化字典数组
|
||||
ajaxGetDictItems(this.dictCode, null).then((res) => {
|
||||
if (res.success) {
|
||||
this.columnData = res.result
|
||||
}
|
||||
})
|
||||
},
|
||||
onConfirm() {
|
||||
if(this.checkedArr.length === 0) {
|
||||
this.$toast('请至少选择一条数据')
|
||||
return
|
||||
}
|
||||
this.showPicker = false
|
||||
this.$emit('change', this.checkedArr.join())
|
||||
},
|
||||
onCancel() {
|
||||
// this.checkedArr = []
|
||||
this.showPicker = false
|
||||
}
|
||||
},
|
||||
// created() {
|
||||
// this.initDictData()
|
||||
// },
|
||||
model: {
|
||||
prop: 'value',
|
||||
event: 'change'
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
/deep/.dict-checkbox-field-popup{
|
||||
height: 308px;
|
||||
font-size: 16px;
|
||||
.item-ope{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 44px;
|
||||
line-height: 44px;
|
||||
}
|
||||
.dict-checkbox-group{
|
||||
padding: @pad-base;
|
||||
height: calc(100% - 44px - 2 * @pad-base);
|
||||
overflow: auto;
|
||||
div + div{
|
||||
margin-top: @pad-base;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,140 @@
|
||||
<!-- form表单中下拉框样式的组件-->
|
||||
<template>
|
||||
<div>
|
||||
<van-field
|
||||
readonly
|
||||
clickable
|
||||
name="picker"
|
||||
:value="showValue"
|
||||
v-bind="$attrs"
|
||||
v-on="childListeners"
|
||||
@click="showPickerFunc"
|
||||
/>
|
||||
<van-popup v-model="showPicker" position="bottom">
|
||||
<van-picker
|
||||
show-toolbar
|
||||
:columns="columnData"
|
||||
@confirm="onConfirm"
|
||||
@cancel="showPicker = false"
|
||||
:value-key="showKey"
|
||||
/>
|
||||
</van-popup>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {ajaxGetDictItems, getDictItemsFromCache} from '../../api/api'
|
||||
|
||||
export default {
|
||||
name: 'PickerDictField',
|
||||
props: {
|
||||
value: {
|
||||
type: [String, Number, Object],
|
||||
required: false
|
||||
},
|
||||
dictCode: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: ''
|
||||
},
|
||||
// 默认是否有其他值
|
||||
valueKey: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: 'value'
|
||||
},
|
||||
// picker中显示的key值
|
||||
showKey: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: 'text'
|
||||
},
|
||||
readonly: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
showPicker: false,
|
||||
showValue: '',
|
||||
columnData: []
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
value: {
|
||||
immediate: true,
|
||||
handler: function () {
|
||||
this.initVal()
|
||||
}
|
||||
},
|
||||
dictCode:{
|
||||
immediate:true,
|
||||
handler() {
|
||||
this.initDictData()
|
||||
this.initVal()
|
||||
},
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
//透传给下级组件的事件，需要排除本组件使用的change事件
|
||||
childListeners() {
|
||||
// const vm = this
|
||||
let result = Object.assign({},
|
||||
this.$listeners,
|
||||
)
|
||||
delete result.change
|
||||
return result
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
showPickerFunc() {
|
||||
if(this.readonly) return
|
||||
this.showPicker = true
|
||||
},
|
||||
initVal() {
|
||||
// 防止数据字典的值是0
|
||||
if (this.value + '') {
|
||||
let item = this.columnData.find(tt => (tt[this.valueKey] + '') === (this.value + ''))
|
||||
this.showValue = (item || {})[this.showKey]
|
||||
} else {
|
||||
this.showValue = ''
|
||||
}
|
||||
},
|
||||
initDictData() {
|
||||
//优先从缓存中读取字典配置
|
||||
if(getDictItemsFromCache(this.dictCode)){
|
||||
this.columnData = getDictItemsFromCache(this.dictCode)
|
||||
return
|
||||
}
|
||||
//根据字典Code, 初始化字典数组
|
||||
ajaxGetDictItems(this.dictCode, null).then((res) => {
|
||||
if (res.success) {
|
||||
this.columnData = res.result
|
||||
}
|
||||
})
|
||||
},
|
||||
onConfirm(value) {
|
||||
this.showPicker = false
|
||||
if (!this.valueKey) {
|
||||
this.$emit('change', value)
|
||||
} else {
|
||||
this.showValue = value[this.showKey]
|
||||
this.$emit('change', value[this.valueKey])
|
||||
}
|
||||
}
|
||||
},
|
||||
// created() {
|
||||
// this.initDictData()
|
||||
// },
|
||||
model: {
|
||||
prop: 'value',
|
||||
event: 'change'
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -21,7 +21,7 @@
|
||||
<div class="process-container" v-show="activeTab === 'basic'">
|
||||
<slot name="process"></slot>
|
||||
</div>
|
||||
<!--人员信息，可以不用单独封组件了，放在这里就行-->
|
||||
<!--人员信息-->
|
||||
<div class="process-container" v-show="activeTab === 'person'">
|
||||
<van-steps direction="vertical">
|
||||
<van-step v-for="item in personnelInfoData" :key="item.id">
|
||||
@@ -97,6 +97,32 @@ export default {
|
||||
this.personnelInfoData = res.result
|
||||
}
|
||||
})
|
||||
},
|
||||
// 获取人员对象，无校验
|
||||
getDataObj () {
|
||||
const personnelObj = {}
|
||||
for (const item of this.personnelInfoData) {
|
||||
// 该属性还没有人就给他赋值
|
||||
if ((item.canChoose || item.sort === 1) && !personnelObj[item.variableName]) {
|
||||
personnelObj[item.variableName] = item.linkUserIds
|
||||
}
|
||||
}
|
||||
return personnelObj
|
||||
},
|
||||
// 有校验的获取人员对象
|
||||
getDataObjVerify () {
|
||||
let personnelObj = {}
|
||||
for (const item of this.personnelInfoData) {
|
||||
// 该属性还没有人就给他赋值
|
||||
if ((item.canChoose || item.sort === 1) && !personnelObj[item.variableName]) {
|
||||
personnelObj[item.variableName] = item.linkUserIds
|
||||
}
|
||||
}
|
||||
if (!Object.values(personnelObj).every(v => !!v)) {
|
||||
this.$message(this.$t('pleaseEnterPersonnelInfo'))
|
||||
personnelObj = false
|
||||
}
|
||||
return personnelObj
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -173,6 +199,9 @@ export default {
|
||||
margin: 0;
|
||||
padding: 0.26rem 0.21rem;
|
||||
color: #1D2129;
|
||||
font-size: 0.32rem;
|
||||
font-weight: 600;
|
||||
line-height: 0.38rem;
|
||||
}
|
||||
}
|
||||
.van-step__circle-container {
|
||||
|
||||
Reference in New Issue
Block a user