update 人员信息样式

src/components/CalendarField.vue

@@ -1,23 +1,23 @@
 <!-- form表单中日历样式的组件-->
 <template>
-<div>
+  <div>
-  <van-field
+    <van-field
-    readonly
+      readonly
-    clickable
+      clickable
-    name="calendar"
+      name="calendar"
-    :value="value"
+      :value="value"
-    v-bind="$attrs"
+      v-bind="$attrs"
-    v-on="childListeners"
+      v-on="childListeners"
-    @click="clickField"
+      @click="clickField"
-  />
+    />
-  <van-calendar
+    <van-calendar
-    color="#3074F6"
+      color="#3074F6"
-    v-model="showCalendar"
+      v-model="showCalendar"
-    :min-date="minDate"
+      :min-date="minDate"
-    :max-date="maxDate"
+      :max-date="maxDate"
-    @confirm="onConfirm"
+      @confirm="onConfirm"
-  />
+    />
-</div>
+  </div>
 
 </template>
 

src/components/PickerDictCheckboxField.vue

@@ -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>

src/components/PickerDictField.vue

@@ -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>

src/components/ProcessCommonLayout.vue

@@ -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 {