detection-business/pages/index/oldOrderProject.vue.vue

<template>
  <view class="content">
    <view style="width: 100%; height: 44px;"></view>
    <view class="top-heder">
      <view class="t-left" @click="getback()">
        <uni-icons type="left" size="18"></uni-icons>
      </view>
      <view class="t-title">
        <text>选择检测内容</text>
      </view>
      <view class="t-you"></view>
    </view>
    <view class="cont_box">

      <view class="title_">
        可选检测内容：
      </view>
      <view class="box_">
        <view class="box_button " :class="{ 'box_button_x' :isItemSelected(item)  }"
              v-for="item in inpectionProjects" @click="clickProject(item)">{{ item.projectName }}
        </view>
      </view>

      <view class="title_">
        已选检测内容：
      </view>
      <view style="margin-bottom: 15px;" v-for="(item,index) in selectProject" :key="index">
        <view class="steps_">
          <view class="index_">{{ index + 1 }}</view>
          <view style="font-size: 20px; font-weight: bold;">{{ item.projectName }}</view>
        </view>
        <view class="list-box">
          <view class="l-left" @click="selectUser(item,index)">
            <text style="color: red;font-weight: bold;text-align: center;">*</text>
            选择检测人员
            <text class="xixi">点击选择</text>
          </view>
          <view class="l-right">
            <input type="text" v-model="item.dealUserName" placeholder="请选择检测人员">
          </view>
        </view>
        <u-picker :show="item.show" :columns="columns" @confirm="confirms(item, $event)" @cancel="cancels(item)" :title="'选择'+item.projectName+'的检测人员'"
                  :key="index"
                  keyName="nickname"></u-picker>
        <view class="xb_" v-if="index != selectProject.length - 1 ">↓</view>
      </view>
    </view>


    <view class="dlanniu" @click="sureChoose()">
      <text>确定选择</text>
    </view>


  </view>
</template>

<script>
import request from '../../utils/request';

export default {
  data() {
    return {
      iconSize: 130,
      inpectionProjects: [],
      selectProject: [],
      show: false,
      columns: [],
      nickname: '',
    }
  },
  onShow() {
    this.getProjects()

  },
  onLoad(options) {
    if (options.selectProject) {
      this.selectProject = JSON.parse(options.selectProject)
    }
  },
  methods: {
    sureChoose() {
      if (this.selectProject.length == 0) {
        uni.showToast({
          title: '请选择项目！',
          icon: 'none'
        })
        return
      }
      let hasInvalidItem = false;
      this.selectProject.forEach(item => {
        if (item.dealUserId == undefined || item.dealUserName == '') {
          hasInvalidItem = true;
          return
        }
      })
      if (hasInvalidItem) {
        uni.showToast({
          title: '请选择补录人员！',
          icon: 'none'
        })
        return;
      }
      this.selectProject.map(item => {
        item.projectId = item.id
        // item.id = undefined
      })
      uni.$emit('selectProject', this.selectProject);
      this.getback()
    },
    isItemSelected(item) {
      return this.selectProject.findIndex(project => project.id === item.id) > -1;
    },
    getback() {
      uni.navigateBack()
    },
    confirms(item, e) {
      console.log('e', e)
      if (e.value[0] != undefined) {
        this.selectProject[e.value[0].index].dealUserId = e.value[0].id
        this.selectProject[e.value[0].index].dealUserName = e.value[0].nickname
      }
      item.show = false
      // this.show = false
      this.$forceUpdate();  // 强制更新组件
    },
    cancels(item) {
      console.log('关闭前 show:', item.show);  // 查看关闭前的 show 状态
      item.show = false;  // 设置为 false 以关闭 u-picker
      // this.show = false
      this.$nextTick(() => {
        console.log('关闭后 show:', item.show);  // 查看关闭后的 show 状态
        this.$forceUpdate();  // 强制更新组件
      });
    },

    selectUser(item, index) {
      this.columns = []
      // item.columns = []
      request({
        url: '/system/user/selectByRoleId',
        method: 'get',
        params: {
          roleId: item.roleId
        }
      }).then(res => {
        res.data.map(item => {
          item.index = index
        })
        this.columns.push(res.data)
        // item.columns.push(res.data)
      })
      item.show = true
      // this.show = true
      console.log('item', item)
    },
    async getProjects() {
      let res = await request({
        url: '/inspection/dl-inspection-project/page',
        method: 'get',
        params: {
          pageNo: 1,
          pageSize: 100
        }

      })
      this.inpectionProjects = res.data.records
    },
    clickProject(data) {
      let idx = this.selectProject.findIndex(project => project.id === data.id)
      if (idx > -1) {
        // 如果元素存在于数组中，则使用splice方法来删除它
        this.selectProject.splice(idx, 1);
      } else {
        this.selectProject.push(data)
        data.show = false
      }

    }
  }
}
</script>

<style scoped>
.steps_ {
  display: flex;
  align-items: center;

}

.cont_box {
  box-sizing: border-box;
  padding: 10px;
}

.title_ {
  font-weight: bold;
  margin-bottom: 5px;
}

.box_ {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}
.xixi {
  font-size: 12px;
  color: #0D2E8D;
  margin-left: 10px;
}

.box_button_x {
  border-radius: 6px;
  border: 1px solid #0D2E8D;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  box-sizing: border-box;
  padding: 10px 15px;
  margin-right: 15px;
  margin-bottom: 15px;
  background: #0D2E8D;
  color: #fff;
}

.list-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  padding: 15px 5px;
  border-bottom: 1px solid #EEEEEE;
}

.l-left {
  font-size: 16px;
  font-weight: 400;
  color: #333333;
}

.l-right {
  font-size: 16px;
  font-weight: 400;
  color: #999999;
  text-align: right;
}

.box_button {

  border-radius: 6px;
  border: 1px solid #999;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  box-sizing: border-box;
  padding: 10px 15px;
  margin-right: 15px;
  margin-bottom: 15px;
}

.dlanniu {
  width: 80%;
  height: 45px;
  background: linear-gradient(180deg, #3F61C0 0%, #0D2E8D 100%);
  border-radius: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 20px auto;
  color: white;
}

.t-you {
  height: 100%;
  width: 20%;
}

.content {
  box-sizing: border-box;
  width: 100%;
  height: calc(100vh);
  background: white;
}

.top-heder {
  width: 100%;
  height: 46px;
  background: white;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  padding: 5px 15px;
}

.t-title {
  font-size: 17px;
  font-weight: bold;
  color: #333333;
}

.t-left {
  width: 10%;
}

.index_ {
  width: 35px;
  height: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: bold;
  font-size: 18px;
  background: #0D2E8D;
  border-radius: 50%;
  margin-right: 10px;
}

.xb_ {
  width: 35px;
  height: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #0D2E8D;
  font-size: 22px;
  font-weight: bold;
}
</style>