qa-prevention-xgf-app/pages/eight_assignments/hot_work/select_operator.vue

<template>
  <view class="container">
    <view class="card">
      <view class="card">
        <u-form label-position="left" label-width="auto">
          <view class="mt-10 flex-end">
            <u-button custom-style="width: 100rpx;margin:0" type="primary" size="mini" text="添加" @click="fnAddHotWorkOperatorList()"/>
          </view>
          <view v-for="(item, index) in hotWorkOperatorList" :key="item.id" style="position: relative;border: 1px dashed #ccc;padding: 20rpx 20rpx 20rpx 40rpx;" class="mt-10">
            <u-form-item label="动火操作人部门" prop="DEPARTMENT_NAME" required @click="fnSelectDepartment(index)">
              <view class="select_content">
                <u-input v-model="item.DEPARTMENT_NAME || '请选择'" border="none" input-align="right" readonly />
                <u-icon name="arrow-right"></u-icon>
              </view>
            </u-form-item>
            <u-line/>
            <u-form-item label="动火操作人" prop="USER_NAME" required @click="fnSelectUser(index)">
              <view class="select_content">
                <u-input v-model="item.USER_NAME || '请选择'" border="none" input-align="right" readonly/>
                <u-icon name="arrow-right"></u-icon>
              </view>
            </u-form-item>
            <u-line/>
            <u-icon v-if="index !== 0" name="close-circle-fill" color="#ff2929" size="20" custom-style="position: absolute;right: -20rpx;top: -20rpx" @click="hotWorkOperatorList.splice(index, 1)"/>
          </view>
          <view class="mt-10 flex-between">
            <u-button type="primary" shape="circle" text="下一步" :throttle-time="1000" @click="fnSubmit()"/>
          </view>
        </u-form>
      </view>
    </view>
    <u-picker
        :key="picker.key"
        :show="picker.show"
        :columns="picker.columns"
        :default-index="picker.defaultIndex"
        key-name="NAME"
        @confirm="fnPickerConfirm"
        @cancel="fnPickerCancel"
    />
  </view>
</template>

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

export default {
  components: { setSubmitForm },
  data() {
    return {
      form: {},
      formItems: {},
      taskId: '',
      hotWorkOperatorList: [],
      picker: {
        show: false,
        columns: [],
        key: "",
        defaultIndex: [0]
      }
    }
  },
  mounted() {
    const eventChannel = this.getOpenerEventChannel();
    eventChannel.on('data', (data) => {
      console.log(data)
      this.form = data.form;
      this.formItems = data.formItems;
      this.taskId = data.taskId;
      this.hotWorkOperatorList = uni.$u.deepClone(data.form.hotWorkOperatorList);
      if (this.hotWorkOperatorList.length === 0) this.fnAddHotWorkOperatorList();
      else {
        for (let i = 0; i < this.hotWorkOperatorList.length; i++) {
          for (let i = 0; i < this.hotWorkOperatorList.length; i++) {
            fnGetUserList(this.hotWorkOperatorList.value[i], i);
          }
        }
      }
    })

  },
  methods: {
    fnAddHotWorkOperatorList() {
      this.hotWorkOperatorList.push({
        DEPARTMENT_NAME: "",
        DEPARTMENT_ID: "",
        USER_NAME: "",
        USER_ID: "",
        TYPE: "",
        id: uni.$u.guid(),
        columns: [],
      });
    },
    fnSelectDepartment(index) {
      uni.navigateTo({
        url: "/pages/eight_assignments/select_department",
        events: {
          confirm: (event) => {
            this.hotWorkOperatorList[index].DEPARTMENT_NAME = event.DEPARTMENT_NAME;
            this.hotWorkOperatorList[index].DEPARTMENT_ID = event.DEPARTMENT_ID;
            this.hotWorkOperatorList[index].USER_NAME = "";
            this.hotWorkOperatorList[index].USER_ID = "";
            this.hotWorkOperatorList[index].TYPE = event.TYPE;
            this.fnGetUserList(event, index);
          },
        },
      });
    },
    fnSelectUser(index) {
      this.picker.key = index;
      this.picker.columns = this.hotWorkOperatorList[index].columns;
      this.picker.defaultIndex = [0];
      if (this.picker.columns[0].length === 0) {
        uni.$u.toast("没有选择部门或当前部门没有人员");
        return;
      }
      for (let i = 0; i < this.picker.columns[0].length; i++) {
        if (
            this.picker.columns[0][i].USER_ID ===
            this.hotWorkOperatorList[index].USER_ID
        ) {
          this.picker.defaultIndex = [i];
          break;
        }
      }
      this.picker.show = true;
    },
    async fnSubmit() {
      for (let i = 0; i < this.hotWorkOperatorList.length; i++) {
        if (
            !this.hotWorkOperatorList[i].DEPARTMENT_ID ||
            !this.hotWorkOperatorList[i].USER_ID
        ) {
          uni.$u.toast("请完善动火操作人信息");
          return;
        }
      }
      await setSubmitForm({
        form: {...this.form, hotWorkOperatorList: this.hotWorkOperatorList},
        formItems: this.formItems,
        TYPE: "hotWork",
        EW_RU_TASK_ID: this.taskId,
      });
    },
    async fnGetUserList({DEPARTMENT_ID, TYPE}, index) {
      const 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.hotWorkOperatorList[index].columns = [resData.list.list];
    },
    fnPickerConfirm(event){
      this.hotWorkOperatorList[this.picker.key].USER_ID = event.value[0].USER_ID;
      this.hotWorkOperatorList[this.picker.key].USER_NAME = event.value[0].NAME;
      this.fnPickerCancel();
    },
    fnPickerCancel(){
      this.picker.show = false;
    }
  },

}


</script>

<style scoped lang="scss">
.select_content{
  display: flex;
  align-items: center;
}
</style>