YNUtdPlatform/pages/workPlan/dayPlan/index.vue

<template>
  <view class="month-container">
    <u-navbar
      class="u-navbar"
      :title="monthPlanTitle"
      placeholder
      @leftClick="leftClick"
      leftIconColor="#fff"
      bgColor="#00337A"
      :titleStyle="{ color: '#FFF', fontSize: '32rpx' }"
    />

    <view class="month-content">
      <view class="btn-header" id="btnHeaderRef">
        <button
          :key="index"
          @tap="onTapCheck(index)"
          v-for="(item, index) in btnList"
          :class="{ active: index === activeIndex }"
        >
          {{ item.btn_title }}
        </button>
      </view>

      <!-- 内容区域 -->
      <view class="content-2" v-show="activeIndex === 1">
        <view class="pages-add" id="pagesAddRef">
          <view style="text-align: right; width: 30%">
            <image
              style="width: 50rpx; height: 50rpx; margin: 13rpx 20rpx 13rpx 0"
              src="../../../static/images/workPlan/delete.png"
              @tap="onReducePages"
            ></image>
          </view>
          <view class="num-content">
            <uni-pagination :show-icon="true" :total="pagesTotal" :pageSize="1" v-model="currentPage" />
            <!-- <scroll-view scroll-x="true" class="scroll-x" scroll-with-animation="true">
            <view v-for="item in pagesNum" :key="item" @tap="onChangePages(item)">{{ item }}</view>
          </scroll-view> -->
          </view>
          <view style="text-align: left; width: 30%">
            <image
              style="width: 50rpx; height: 50rpx; margin: 13rpx 0 13rpx 20rpx"
              src="../../../static/images/workPlan/add.png"
              @tap="onAddPages"
            ></image>
          </view>
        </view>
        <view>
          <uni-forms
            class="form-container"
            ref="form"
            :modelValue="formData"
            :rules="rules"
            label-position="top"
            label-width="200"
          >
            <uni-forms-item label="工程名称" require style="margin-bottom: 2rpx">
              <view class="time-container" @tap="onSelectProject">
                <view>请选择</view>
                <text>&gt;</text>
              </view>
            </uni-forms-item>
            <uni-forms-item label="选择时间" required style="margin-bottom: 2rpx">
              <view>
                <TimeSelect />
              </view>
            </uni-forms-item>
          </uni-forms>
        </view>

        <!-- <scroll-view :scroll-y="true" style="height: 340px">
         
        </scroll-view> -->

        <view style="background-color: #fff">
          <swiper circular :autoplay="false" :current="currentSwiper" style="height: 700rpx" @change="onSwiperChange">
            <swiper-item v-for="item in pagesTotal" :key="item">
              <scroll-view scroll-y="true" class="scroll-Y" style="height: 100%">
                <uni-forms
                  class="form-container"
                  ref="form"
                  :modelValue="formData"
                  :rules="rules"
                  label-position="top"
                  label-width="200"
                >
                  <uni-forms-item
                    v-for="(item, index) in dayPlanTitle === '基建日计划'
                      ? infrastructureFormLabel
                      : productionFormLabel"
                    :key="index"
                    :label="item.form_label"
                    name="name"
                    required
                  >
                    <uni-easyinput
                      v-if="item.items_type === 'ipt'"
                      type="text"
                      v-model="formData.name"
                      placeholder="请填写"
                    />
                    <uni-data-select
                      v-model="formData.nr"
                      :localdata="item.options"
                      v-if="item.items_type === 'sel'"
                    ></uni-data-select>
                  </uni-forms-item>
                </uni-forms>
              </scroll-view>
            </swiper-item>
          </swiper>

          <view class="submit-btn">
            <button>导入计划</button>
            <button @tap="onSaveSubmit">保存提交</button>
          </view>
        </view>
      </view>
    </view>

    <!-- 弹框 -->
    <uni-popup ref="popup" background-color="#fff">
      <view class="popup-content" v-if="popupType === 'center'">
        <view class="flex-style" style="justify-content: space-between">
          <text>选择工程</text>
          <text>X</text>
        </view>
        <view>2024-10-16</view>
        <view class="search">
          <view class="select">
            <uni-data-select v-model="value" @change="onProjectChange" :localdata="range"></uni-data-select>
          </view>
          <button>搜索</button>
        </view>
        <view class="project-content">暂无数据</view>
      </view>

      <view v-else class="popup-bottom-content">
        <view class="bottom-title">
          <text>请选择</text>
          <text>请选择</text>
          <uni-icons type="closeempty" size="20" @tap="onClosePopup"></uni-icons>
        </view>

        <view v-if="isType">
          <view class="select-item" v-for="item in isAUditingList" :key="item.title" @tap="onCheckAuditing(item.value)">
            {{ item.title }}
          </view>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
import TimeSelect from './components/time-select'
export default {
  components: {
    TimeSelect
  },
  data() {
    return {
      dayPlanTitle: '基建日计划',
      activeIndex: 0,
      pagesTotal: 1,
      currentPage: 0,
      popupType: '',
      scrollHeight: 500,
      formData: {},
      btnList: [
        { btn_title: '工作待办' },
        { btn_title: '发起提交' },
        { btn_title: '查看报表' },
        { btn_title: '查看数据' }
      ],
      rules: {
        name: {
          rules: [{ required: true, errorMessage: '请填写' }]
        },
        gk: {
          rules: [{ required: true, errorMessage: '请填写' }]
        },
        jd: {
          rules: [{ required: true, errorMessage: '请填写' }]
        },
        nr: {
          rules: [{ required: true, errorMessage: '请填写' }]
        },
        dj: {
          rules: [{ required: true, errorMessage: '请填写' }]
        }
      },
      infrastructureFormLabel: [
        { form_label: '分公司分管领导', items_type: 'ipt' },
        { form_label: '简要工程概况', items_type: 'ipt' },
        { form_label: '施工进度', items_type: 'ipt' },
        { form_label: '作业内容', items_type: 'ipt' },
        {
          form_label: '风险等级',
          items_type: 'sel',
          options: [
            { value: 0, text: '是否需要办理工作票' },
            { value: 1, text: '甲、乙供物资到货是否满足作业条件' },
            { value: 2, text: '施工机具是否满足作业条件' },
            { value: 2, text: '视频监控是否满足作业条件' },
            { value: 2, text: '投入监控设备数(台)' }
          ]
        },
        {
          form_label: '风险类别',
          items_type: 'ipt'
        },
        {
          form_label: '现场负责人',
          items_type: 'ipt'
        },
        {
          form_label: '全体人数',
          items_type: 'ipt'
        },
        {
          form_label: '公司职工人数',
          items_type: 'ipt'
        },
        {
          form_label: '分包人员人数',
          items_type: 'ipt'
        },
        { form_label: '投入车辆(辆)', items_type: 'ipt' },
        { form_label: '投入监控设备数(台)', items_type: 'ipt' },
        { form_label: 'SIP编号', items_type: 'ipt' },
        { form_label: '责任管控人', items_type: 'ipt' },
        { form_label: '中等以上风险作业管控人等', items_type: 'ipt' },
        { form_label: '风险管控层级', items_type: 'sel' }
      ],
      productionFormLabel: [
        { form_label: '作业内容', items_type: 'ipt' },

        {
          form_label: '风险等级',
          items_type: 'sel',
          options: [
            { value: 0, text: '检修' },
            { value: 1, text: '维护' }
          ]
        },
        { form_label: '作业类型', items_type: 'sel' },

        {
          form_label: '现场负责人',
          items_type: 'ipt'
        },
        { form_label: '现场负责人电话', items_type: 'ipt' },
        { form_label: '全体人数', items_type: 'ipt' },
        { form_label: '公司职工人数', items_type: 'ipt' },
        { form_label: '分包人员人数', items_type: 'ipt' },
        { form_label: '交通用车', items_type: 'ipt' },
        { form_label: '特种作业车辆', items_type: 'ipt' },
        { form_label: '监控设备数量(台)', items_type: 'ipt' },
        { form_label: 'SIP编号', items_type: 'ipt' },
        { form_label: '责任管控人', items_type: 'ipt' },
        { form_label: '风险类别', items_type: 'ipt' },
        {
          form_label: '管控层级',
          items_type: 'sel',
          options: [
            { value: 0, text: '项目部' },
            { value: 1, text: '分公司' },
            { value: 2, text: '公司职能部门' },
            { value: 2, text: '公司领导' },
            { value: 2, text: '运检站' },
            { value: 2, text: '各单位级' }
          ]
        },

        { form_label: '管控人/联系方式', items_type: 'ipt' },
        { form_label: '安全管控人', items_type: 'ipt' }
      ],
      currentSwiper: 0
    }
  },
  mounted() {
    // console.log('this.$refs.btnHeaderRef', this.$refs.btnHeaderRef, this.$refs.pagesAddRef)
    const query = uni.createSelectorQuery()
    query
      .select('#btnHeaderRef')
      .boundingClientRect(data => {
        this.scrollHeight += data.height
      })
      .exec()
    query
      .select('#pagesAddRef')
      .boundingClientRect(data => {
        this.scrollHeight += data.height
      })
      .exec()

    console.log('this.scrollHeight', this.scrollHeight)
  },
  methods: {
    leftClick() {
      uni.navigateBack()
    },
    onTapCheck(i) {
      this.activeIndex = i
    },
    onReducePages() {
      if (this.pagesTotal > 1) {
        this.pagesTotal -= 1
      }
    },
    onAddPages() {
      this.pagesTotal += 1
    },
    onSelectProject() {
      this.$refs.popup.open('center')
      this.popupType = 'center'
    },
    onClosePopup() {
      this.$refs.popup.close()
      if (this.isType) {
        this.isType = !this.isType
      }
    },
    onSwiperChange(e) {
      this.currentPage = e.detail.current + 1
    },
    onCheckAuditing(val) {
      console.log(val, '----')
    }
    // onChangePages(num) {
    //   if (num > 1) {
    //     console.log('居中')
    //   }
    // }
  },
  onLoad(options) {
    if (options.type == 1) {
      this.dayPlanTitle = '基建日计划'
    } else {
      this.dayPlanTitle = '生产日计划'
    }
  }
}
</script>

<style lang="scss" scoped>
.month-container {
  height: 100vh;

  .month-content {
    .btn-header {
      display: flex;
      width: 100%;
      button {
        flex: 1;
        height: 120rpx;
        color: #2c2b2b;
        font-size: 26rpx;
        line-height: 120rpx;
        text-align: center;
        border-radius: 0;
        background-color: #fff;
      }

      button::after {
        border: none;
      }
      .active {
        border-bottom: 2px solid #00337a;
      }
    }

    .content-2 {
      width: 100%;
      .pages-add {
        width: 100%;
        height: 76rpx;
        display: flex;
        align-items: center;
        background-color: #ccc;

        view {
          height: 76rpx;
        }

        .num-content {
          flex: 1;
          background-color: #fff;

          .scroll-x {
            width: 100%;
            white-space: nowrap;

            view {
              width: 50%;
              display: inline-block;
              height: 76rpx;
              text-align: center;
              line-height: 76rpx;
              color: #003778;
            }
          }
        }
      }

      .time-container {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 38rpx;
      }
      .form-container {
        padding: 10rpx 20rpx;
      }
      .submit-btn {
        margin: 15rpx 0;
      }
    }
  }

  // 弹框样式
  .popup-content {
    width: 90vw;
    padding: 20rpx;
    background-color: #eeeeee;

    .search {
      width: 100%;
      height: 70rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      background-color: #eeeeee;
      .select {
        height: 68rpx;
        width: 65%;
        margin: 0;
      }

      button {
        height: 68rpx;
        width: 30%;
        line-height: 68rpx;
        font-size: 32rpx;
        background-color: #003777;
        color: #fff;
        border-radius: 12rpx;
      }
    }

    .project-content {
      height: 460rpx;
      width: 97%;
      margin: 0 auto;
      background-color: #fff;
      text-align: center;
    }
  }
}
</style>