popUpFillIn.vue 5.01 KB
<template>
  <view>
    <u-popup :show="show" mode="bottom" @open="open" @close="close" :customStyle="{width:'100vw',borderRadius:'30rpx'}"
      round="15" safeAreaInsetBottom closeable>
      <u-form labelPosition="left" errorType="toast" :model="model" :rules="rules" ref="uForm">
        <view class="popCss">
          <view class="padding-lr">
            <view class="padding-top text-lg text-left">
              {{title}}
            </view>
            <!-- 点火维护 -->
            <u-form-item v-if="type==='dhwh'" required label="是否已点火" labelWidth="100">
              <view class="flex justify-between margin-tb w100">
                <u-radio-group activeColor="#EA5504" placement="row" v-model="radiovalueDHWH">
                  <u-radio class="margin-right" name="是">是</u-radio>
                  <u-radio name="否">否</u-radio>
                </u-radio-group>
              </view>
            </u-form-item>
            <!-- 工程维护 -->
            <u-form-item v-if="type==='gcwh'" required label="是否竣工" labelWidth="100">
              <view class="flex justify-between margin-tb w100">
                <u-radio-group activeColor="#EA5504" placement="row" v-model="radiovalueGCWH">
                  <u-radio class="margin-right" name="是">是</u-radio>
                  <u-radio name="否">否</u-radio>
                </u-radio-group>
              </view>
            </u-form-item>
            <view class="usuallyCard padding margin-bottom-sm">
              <view class="margin-tb text-lg">
                基本维护
              </view>
              <!-- 点火维护 -->
              <u-form-item v-if="type==='dhwh'" required label="点火时间" labelWidth="100" borderBottom>
                <u-input v-model="model.time" placeholder="请选择" disabled disabledColor="#fff" border="none"></u-input>
                <u-icon slot="right" name="calendar" size="20" @click="calendarShow = true"></u-icon>
              </u-form-item>
              <u-form-item v-if="type==='dhwh'" required label="未点火原因" labelWidth="100" borderBottom>
                <u-input v-model="model.reason" placeholder="请选择" disabled disabledColor="#fff" border="none"></u-input>
                <u-icon slot="right" name="arrow-down" size="20"></u-icon>
              </u-form-item>
              <!-- 工程维护 -->
              <u-form-item v-if="type==='gcwh'" required label="市场派单时间" labelWidth="100" borderBottom>
                <u-input v-model="model.time" placeholder="请选择" disabled disabledColor="#fff" border="none"></u-input>
                <u-icon slot="right" name="calendar" size="20" @click="calendarShow = true"></u-icon>
              </u-form-item>
              <u-form-item v-if="type==='gcwh'" required label="竣工时间" labelWidth="100" borderBottom>
                <u-input v-model="model.time" placeholder="请选择" disabled disabledColor="#fff" border="none"></u-input>
                <u-icon slot="right" name="calendar" size="20" @click="calendarShow = true"></u-icon>
              </u-form-item>
              <u-form-item v-if="type==='gcwh'" required label="未竣工原因" labelWidth="100" borderBottom>
                <u-input v-model="model.reason" placeholder="请选择" disabled disabledColor="#fff" border="none"></u-input>
                <u-icon slot="right" name="arrow-down" size="20"></u-icon>
              </u-form-item>
            </view>
          </view>
          <view class="flex justify-between bg-white padding-tb-xs padding-lr">
            <view class="w48" @click="close">
              <u-button :customStyle="{color:'#EA5504'}">取消</u-button>
            </view>
            <view class="w48" @click="confirm">
              <u-button color="#EA5504">确定</u-button>
            </view>
          </view>
        </view>
      </u-form>
    </u-popup>
    <u-calendar :show="calendarShow" @close="closeCalender" @confirm="confirmCalender"></u-calendar>
  </view>
</template>

<script>
  export default {
    name: "popUpComponent",
    props: {
      title: {
        type: String,
        default: ""
      },
      type: {
        type: String,
        default: ""
      },
    },
    data() {
      return {
        show: false,
        calendarShow: false,
        radiovalueDHWH: "",
        radiovalueGCWH:"",
        model: {
          time: ""
        },
        rules: {}
      };
    },
    methods: {
      open() {
        this.show = true;
      },
      close() {
        this.show = false;
      },
      confirm() {
        console.log(this.textarea);
        this.show = false;
        this.textarea = "";
      },
      confirmCalender(e) {
        console.log(e);
        this.model.time = e[0];
        this.calendarShow = false;
      },
      closeCalender() {
        this.calendarShow = false;
      },
    }
  }
</script>

<style lang="scss">
  .popCss {
    background: #F6F6F6;
    border-radius: 30rpx;
    // text-align: center;
  }

  .usuallyCard {
    border-radius: 15rpx;
  }

  /deep/.u-form-item__body {
    padding: 10px;
  }
</style>