YNUtdPlatform/pages/workPlan/networkPlanDetails/pro-index.vue

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

    <view>
      <view class="item-header">
        <text>{{ month }}</text>
        <text v-if="kjsAmount > 0">可接受风险:{{ kjsAmount }}</text>
        <text v-if="gfxAmount > 0">高风险:{{ gfxAmount }}</text>
        <text v-if="zfxAmount > 0">中风险:{{ zfxAmount }}</text>
        <text v-if="dfxAmount > 0">低风险:{{ dfxAmount }}</text>
        <text v-if="tfxAmount > 0">特高风险:{{ tfxAmount }}</text>
      </view>

      <view>
        <scroll-view scroll-x class="header-left">
          <text
            :class="{ 'active-form-page': activeFormPages === index }"
            v-for="(item, index) in monthDetailsList"
            :key="index"
            @tap="onChangeFormPages(index)"
          >
            {{ index + 1 }}
          </text>
        </scroll-view>
      </view>

      <swiper
        circular
        :autoplay="false"
        :current="activeFormPages"
        class="scroll-content"
        :style="{ height: navHeight + 'px' }"
        @change="onSwiperChangeForms"
      >
        <swiper-item v-for="(item, index) in monthDetailsList" :key="index" :style="{ height: navHeight + 'px' }">
          <scroll-view scroll-y="true" class="scroll-Y" :style="{ height: navHeight + 'px' }">
            <uni-forms class="form-container" label-position="top" label-width="200">
              <uni-forms-item
                v-for="(f, i) in infrastructureFormLabel"
                :key="i"
                :label="f.form_label"
                :name="f.name"
                :required="f.required"
              >
                <u--textarea
                  v-if="f.items_type === 'area'"
                  v-model="item[f.name]"
                  placeholder="请填写"
                  autoHeight
                  :disabled="roles != 24"
                ></u--textarea>
                <u--input
                  v-if="f.items_type === 'ipt'"
                  :type="f.isType ? f.isType : 'text'"
                  v-model="item[f.name]"
                  placeholder="请填写"
                  :disabled="roles != 24"
                />
                <uni-data-select
                  v-model="item[f.name]"
                  :localdata="f.options"
                  :disabled="roles != 24"
                  :clear="false"
                  v-if="f.items_type === 'sel'"
                ></uni-data-select>
                <uni-datetime-picker
                  :disabled="roles != 24"
                  v-model="item[f.name_date]"
                  v-if="f.items_type === 'date'"
                  :type="f.date_type"
                  @maskClick="maskClick"
                  @change="onChangeTimeSelect($event, index)"
                />
              </uni-forms-item>
            </uni-forms>
          </scroll-view>
        </swiper-item>
      </swiper>
    </view>

    <view class="revoke" v-show="roles == 24">
      <view @tap="showModalFun(item.id)" v-for="item in btnList" :key="item.id">
        <uni-icons :type="item.type" size="20" style="color: #00337a"></uni-icons>
        <text style="margin-top: 8rpx">{{ item.title }}</text>
      </view>
    </view>
  </view>
</template>

<script>
import {
  submitPlanApi,
  deletePlanApi,
  revokePlanApi,
  getPlanDetailProApi, // 1
  getRiskLevelListApi,
  getControlLevelListApi,
  updateInfPlanContentProApi // 2
} from '../../../api/workPlan/networkPlan'
export default {
  data() {
    return {
      monthDetailsList: [],
      monthPlanTitle: '基建月计划',
      editDisabled: false,
      state: '',
      month: '',
      activeFormPages: 0,
      params: {
        proId: '',
        month: ''
      },
      roles: uni.getStorageSync('wkRole'),
      btnList: [
        { title: '修改', id: 1, type: 'compose' }
        // { title: '删除', id: 2, type: 'trash', isShow: ['1', '3'] },
        // { title: '撤回', id: 3, type: 'redo-filled', isShow: ['2', '4', '5', '6', '7', '8', '9'] },
        // { title: '提交', id: 4, type: 'upload', isShow: ['1', '3'] }
      ],
      infrastructureFormLabel: [
        { form_label: '涉网作业内容', items_type: 'area', name: 'zynr', required: true },
        {
          form_label: '风险等级',
          items_type: 'sel',
          name: 'fxdj',
          required: true,
          options: []
        },
        { form_label: '计划停电时间', items_type: 'date', date_type: 'daterange', name: 'tdsj', required: true },
        { form_label: '停电线路(设备)名称', items_type: 'area', name: 'tdsb', required: true },
        { form_label: '停电线路所属供电局', items_type: 'area', name: 'ssgdj', required: true },
        { form_label: '停电负责人及电话', items_type: 'ipt', name: 'fzr', required: true },
        { form_label: '备注', items_type: 'area', name: 'bz' }
      ],
      productionFormLabel: [
        { 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: '维护' }
          ]
        },
        { form_label: '计划开始时间', items_type: 'sel' },
        { form_label: '计划结束时间', items_type: 'sel' },
        {
          form_label: '是否停电',
          items_type: 'sel',
          options: [
            { value: 1, text: '是' },
            { value: 0, text: '否' }
          ]
        },
        { form_label: '停电设备（作业场所）', items_type: 'ipt' },
        { form_label: '作业监督人/联系电话', items_type: 'ipt' },
        { form_label: '作业负责人/联系电话', items_type: 'ipt' },
        {
          form_label: '管控级别',
          items_type: 'sel',
          options: []
        },
        {
          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: 'sel',
          options: [
            { value: 0, text: '过程管控' },
            { value: 1, text: '巡视管控' },
            { value: 2, text: '驻点管控' },
            { value: 2, text: '节点管控' }
          ]
        },
        {
          form_label: '施工方案',
          items_type: 'sel',
          options: [
            { value: 1, text: '是' },
            { value: 0, text: '否' }
          ]
        },
        {
          form_label: '作业指导书',
          items_type: 'sel',
          options: [
            { value: 0, text: '是' },
            { value: 1, text: '否' }
          ]
        },
        {
          form_label: '作业表单',
          items_type: 'sel',
          options: [
            { value: 0, text: '是' },
            { value: 1, text: '否' }
          ]
        },
        {
          form_label: '工作票',
          items_type: 'sel',
          options: [
            { value: 0, text: '是' },
            { value: 1, text: '否' }
          ]
        },
        { form_label: '备注', items_type: 'ipt' },
        { form_label: '计划数量', items_type: 'ipt' }
      ],
      kjsAmount: 0,
      dfxAmount: 0,
      zfxAmount: 0,
      gfxAmount: 0,
      tfxAmount: 0,
      navHeight: 0
    }
  },
  methods: {
    leftClick() {
      uni.navigateBack()
    },
    async getRiskLevelListData() {
      const res = await getRiskLevelListApi()

      try {
        this.infrastructureFormLabel.forEach(e => {
          if (e.form_label === '风险等级') {
            e.options = res.map(e => {
              return {
                value: e.id,
                text: e.name
              }
            })

            throw new Error()
          }
        })
      } catch (error) {}
    },
    async getControlLevelListData() {
      const res = await getControlLevelListApi()
      // console.log('管控层级', res)
      try {
        this.infrastructureFormLabel.forEach(e => {
          if (e.form_label === '管控级别') {
            e.options = res.map(e => {
              return {
                value: e.id,
                text: e.name
              }
            })

            throw new Error()
          }
        })
      } catch (error) {}
    },
    /* 获取详情 */
    async getPlanDetailData() {
      const res = await getPlanDetailProApi(this.params)
      console.log('详情数据res', res)

      this.monthDetailsList = res.obj

      // this.infrastructureFormLabel.forEach(e => {
      //   if (e.items_type == 'date') {
      //     this.$set(e, 'name_date', `${e.name}_new`)
      //   }
      // })

      this.monthDetailsList.forEach(e => {
        console.log(e, 'eeeee')
        const time = e.tdsj.split('~')
        this.$set(e, 'tdsj_new', [time[0], time[1]])

        console.log(time, 'timetimetime')
      })

      console.log(this.monthDetailsList, '  this.monthDetailsList.')

      if (this.monthDetailsList.length > 0) {
        this.kjsAmount = 0
        this.dfxAmount = 0
        this.zfxAmount = 0
        this.gfxAmount = 0
        this.tfxAmount = 0
        this.monthDetailsList.forEach(e => {
          this.kjsAmount = this.kjsAmount + e.kjsfx * 1
          this.dfxAmount = this.dfxAmount + e.dfx * 1
          this.zfxAmount = this.zfxAmount + e.zfx * 1
          this.gfxAmount = this.gfxAmount + e.gfx * 1
          this.tfxAmount = this.tfxAmount + e.tgfx * 1
        })
      }
    },
    showModalFun(type) {
      let tipTitle = ''
      let API = null
      switch (type) {
        case 1:
          tipTitle = '修改'
          API = updateInfPlanContentProApi
          break
        case 2:
          tipTitle = '删除'
          API = deletePlanApi
          break
        case 3:
          tipTitle = '撤销'
          API = revokePlanApi
          break
        case 4:
          tipTitle = '提交'
          API = submitPlanApi
          break
      }

      uni.showModal({
        title: '提示',
        content: `确定要${tipTitle}吗？`,
        showCancel: true,
        cancelText: '取消',
        confirmText: '确定',
        confirmColor: '#00337a',
        cancelColor: '#00337a',
        success: async res => {
          if (res.confirm) {
            const params = {
              id: JSON.stringify(this.monthDetailsList)
            }
            const result = await API(type === 1 ? params : this.params)

            if (result.res == 1) {
              uni.showToast({ title: `${tipTitle}成功！`, icon: 'none' })
              setTimeout(() => {
                uni.navigateBack({
                  delta: 1,
                  success() {
                    uni.$emit('update')
                  }
                })
              }, 500)
            } else {
              uni.showToast({ title: `${tipTitle}失败！`, icon: 'none' })
            }
          }
        }
      })
    },
    onChangeFormPages(index) {
      this.activeFormPages = index
    },
    onSwiperChangeForms(e) {
      this.activeFormPages = e.detail.current
    },
    onChangeTimeSelect(e, index) {
      console.log(e, index, '******')
      this.monthDetailsList[index].tdsj = `${e[0]}~${e[1]}`
    },
    maskClick() {}
  },

  onLoad(options) {
    this.state = options.state
    this.month = options.month
    this.params.proId = options.id
    this.params.month = options.month
    console.log('options.state', options.state, options.month)
    Promise.all([this.getRiskLevelListData(), this.getControlLevelListData()]).then(res => {
      // this.params.id = options.id
      this.getPlanDetailData()
    })
  },
  onReady() {
    let that = this
    uni.getSystemInfo({
      //调用uni-app接口获取屏幕高度
      success(res) {
        //成功回调函数
        that._data.pH = res.windowHeight
        let titleH = uni.createSelectorQuery().select('.scroll-content')
        let bottom = uni.createSelectorQuery().select('.revoke')
        bottom
          .boundingClientRect(res => {
            const bottomHeight = res.height

            titleH
              .boundingClientRect(data => {
                let pH = that._data.pH
                that._data.navHeight = pH - data.top - bottomHeight - 48
              })
              .exec()
          })
          .exec()
      }
    })
  }
}
</script>

<style lang="scss" scoped>
.item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10rpx 0;
  font-size: 22rpx;
  border-bottom: 1px solid #ccc;
}
::v-deep .uni-input-input:disabled {
  -webkit-text-fill-color: #333;
}

.revoke {
  width: 100%;
  padding: 12px 0;
  position: fixed;
  bottom: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #fff;

  view {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
}

.header-left {
  width: 100%;
  display: flex;
  justify-content: space-between;
  white-space: nowrap;

  text {
    width: 16.66%;
    padding: 12rpx 0;
    text-align: center;
    display: inline-block;
    color: #ccc;
  }
}

.active-form-page {
  border-bottom: 1px solid #003778;
  color: #003778 !important;
}
::v-deep .uni-forms-item__label {
  font-weight: bold;
  color: #000;
  font-size: 26rpx;
}
</style>