qa-prevention-xgf-app/pages/eight_assignments/select_review_personnel.vue

<template>
  <view>
    <view class="content">
      <view class="card">
        <u-form labelPosition="left" :model="form" :rules="rules" ref="formRef" labelWidth="140px">
          <u-form-item v-for="(item, index) in list" :key="index" :label="item.name" :prop="item.key_name"
                       borderBottom :required="item.isRequired === '1'" @click="fnSelect(item)">
            <u-input v-model="form[item.key_name]" border="none" readonly/>
            <u-icon name="arrow-right"></u-icon>
          </u-form-item>
        </u-form>
        <view class="mt-10">
          <u-button type="primary" text="下一步" @click="$u.debounce(fnSubmit, 1000,true)"/>
        </view>
      </view>
    </view>
    <u-picker :show="picker.show" :columns="picker.columns" keyName="NAME"
              :key="picker.currentColumnKey" @confirm="fnPickerConfirm" @cancel="fnPickerCancel"/>
  </view>
</template>

<script>
import {getUserList} from "@/api";
import {setPersonnelForm} from "@/utils/submitHomeworkProcess";

export default {
  data() {
    return {
      taskId: '',
      CORP_ID: '',
      TYPE: '',
      list: [],
      form: {},
      rules: {},
      picker: {
        show: false,
        columnsAll: {},
        columns: [],
        currentColumnKey: '',
        currentName: '',
        currentId: '',
      }
    }
  },
  onLoad() {
    const eventChannel = this.getOpenerEventChannel();
    eventChannel.on('nextNodes', (data) => {
      this.list = data.nextNodes
      this.taskId = data.taskId
      this.CORP_ID = data.CORP_ID
      this.TYPE = data.TYPE
      this.fnInitFormAndRules()
    })
  },
  methods: {
    fnInitFormAndRules() {
      this.list.forEach((item) => {
        this.$set(this.form, item.key_name, '')
        this.$set(this.form, item.key_id, '')
        this.$set(this.rules, item.key_name, [{
          required: item.isRequired === '1',
          message: item.name + '不能为空',
          trigger: ['blur', 'change'],
        }])
      })
    },
    fnSelect({key_name, key_id, type, value}) {
      if (type === '1') {
        this.fnSelectDepartment(key_name, key_id, value)
        return
      }
      if (type === '0') {
        //   弹出选择人员
        this.fnSelectUser(key_name, key_id, value)
      }
    },
    fnSelectDepartment(key_name, key_id, value) {
      uni.navigateTo({
        url: `/pages/eight_assignments/select_department?CORP_ID=${this.CORP_ID}`,
        events: {
          confirm: (event) => {
            this.form[key_name] = event.DEPARTMENT_NAME
            this.form[key_id] = event.DEPARTMENT_ID
            this.form[value + '_USER_ID'] = ''
            this.form[value + '_USER_NAME'] = ''
            this.fnGetUserList(event, value)
          }
        },
      })
    },
    async fnGetUserList({DEPARTMENT_ID, TYPE}, value) {
      let resData = await getUserList({DEPARTMENT_ID, TYPE})
      for (let i = 0; i < resData.list.list.length; i++) {
        resData.list.list[i].NAME = resData.list.list[i].name || resData.list.list[i].NAME
        resData.list.list[i].USER_ID = resData.list.list[i].user_ID || resData.list.list[i].USER_ID
      }
      this.$set(this.picker.columnsAll, value, [resData.list.list])
    },
    fnSelectUser(key_name, key_id, value) {
      this.picker.currentName = key_name
      this.picker.currentId = key_id
      this.picker.currentColumnKey = value
      this.picker.columns = this.picker.columnsAll[this.picker.currentColumnKey]
      if (!this.picker.columnsAll[this.picker.currentColumnKey]) {
        uni.$u.toast('没有选择部门或当前部门没有人员')
        return
      }
      this.picker.show = true
    },
    fnPickerConfirm(event) {
      this.form[this.picker.currentId] = event.value[0].USER_ID
      this.form[this.picker.currentName] = event.value[0].NAME
      this.fnPickerCancel()
    },
    fnPickerCancel() {
      this.picker.show = false
    },
    async fnSubmit() {
      try {
        await this.$refs.formRef.validate()
        try {
          await setPersonnelForm({
            form: this.form,
            list: this.list,
            taskId: this.taskId,
            CORP_ID: this.CORP_ID,
            TYPE: this.TYPE
          })
        } catch {
        }
      } catch {
        uni.$u.toast('请补全必填项')
      }
    }
  },
}
</script>

<style scoped lang="scss">

</style>