fix:立行立改Uniapp小程序新建项目

quanyawei

2023-10-20 d8b41fff43a2cee6a8f714ffa807623b15803786

 pages/actionChange/newPage/index.vue

New file
@@ -0,0 +1,410 @@
<template>
   <view class="mianContent">
      <p class="title">基本信息</p>
      <u-form
         ref="uForm"
         label-width="65"
         :model="form"
         :rules="rules"
      >
         <u-form-item
            border-bottom
            label="责任主体:"
            prop="unitId"
            required
            @click="
               showCheckBox = true;
               hideKeyboard('unitList', 'unitId');
            "
         >
            <u--input
               v-model="form.unitId"
               border="none"
               disabled
               disabled-color="#ffffff"
               placeholder="请选择"
            />
            <u-icon slot="right" name="arrow-right" />
         </u-form-item>

         <u-form-item
            border-bottom
            label="污染分类:"
            prop="polluteType"
            required
            @click="
               showCheckBox = true;
               hideKeyboard('polluteList', 'polluteType');
            "
         >
            <u-input
               v-model="form.polluteType"
               border="none"
               disabled
               disabled-color="#ffffff"
               placeholder="请选择"
               type="select"
            />
            <u-icon slot="right" name="arrow-right" />
         </u-form-item>
         <u-form-item
            border="none"
            border-bottom
            label="整改类型:"
            prop="changeType"
            required
            @click="
               showCheckBox = true;
               hideKeyboard('changeEnum', 'changeType');
            "
         >
            <u-input
               v-model="form.changeType"
               border="none"
               disabled
               disabled-color="#ffffff"
               placeholder="请选择"
               type="select"
            />
            <u-icon slot="right" name="arrow-right" />
         </u-form-item>
         <u-form-item
            border-bottom
            label="限期天数:"
            placeholder="请输入"
            required
         >
            <u-input v-model="form.changeDay" border="none" type="number" />
         </u-form-item>
         <u-form-item
            border-bottom
            label="上报单位:"
            prop="escalationUnitId"
            required
            @click="
               showCheckBox = true;
               hideKeyboard('unitList', 'escalationUnitId');
            "
         >
            <u-input
               v-model="form.escalationUnitId"
               border="none"
               disabled
               disabled-color="#ffffff"
               placeholder="请选择"
               type="select"
            />
            <u-icon slot="right" name="arrow-right" />
         </u-form-item>
         <u-form-item
            border-bottom
            label="上报人:"
            prop="escalationName"
            required
         >
            <u-input
               v-model="form.escalationName"
               border="none"
               placeholder="请输入"
               type="text"
            />
         </u-form-item>
         <u-form-item
            border-bottom
            label="排查方式:"
            prop="investigationType"
            required
         >
            <u-radio-group v-model="form.investigationType" style="font-size: 13px;">
               <u-radio
                  :key="index"
                  v-for="(item, index) in Dic.investigationEnum"
                  :custom-style="{marginRight: '8px'}"
                  :label="item.name"
                  :name="item.value"
               />
            </u-radio-group>
         </u-form-item>
         <u-form-item
            border-bottom
            label="上报时间:"
            prop="escalationTime"
            required
            @click="showeEscalationTime = true"
         >
            <u-input
               v-model="form.escalationTime"
               border="none"
               disabled
               disabled-color="#ffffff"
               placeholder="请选择"
               type="select"
            />
            <u-icon slot="right" name="arrow-right" />
            <u-datetime-picker
               ref="datetimePicker"
               v-model="timeFormet"
               mode="date"
               :show="showeEscalationTime"
               @confirm="checkTime"
            />
         </u-form-item>
         <u-form-item
            border-bottom
            label="污染位置:"
            prop="pollutePosition"
            required
         >
            <u-input
               v-model="form.pollutePosition"
               border="none"
               placeholder="请输入"
               type="text"
            />
         </u-form-item>
         <u-form-item
            border-bottom
            label="问题描述:"
            prop="problemDescribe"
            required
         >
            <u--textarea v-model="form.problemDescribe" border="none" placeholder="请输入内容" />
         </u-form-item>
         <u-form-item border-bottom label="相关附件:">
            <view class="fileBox">
               <fileUpload :sys-code="sysCode" @handleFile="handleFile" />
            </view>
         </u-form-item>
      </u-form>
      <u-action-sheet
         v-if="actionOptionList.length > 0"
         :actions="actionOptionList"
         :show="showCheckBox"
         title="请选择"
         @close="showCheckBox = false"
         @select="selectBack"
      />
      <view class="bunts">
         <u-button shape="square" @click="close">关闭</u-button>
         <u-button shape="square" type="primary" @click="submit">提交</u-button>
      </view>
   </view>
</template>

<script>
import fileUpload from '../components/fileUpload.vue'
export default {
   components: {
      fileUpload
   },
   data() {
      return {
         sysCode: '1010201', //
         showCheckBox: false,
         showeEscalationTime: false,
         actionOptionList: [],
         rules: {
            'unitId': {
               required: true,
               message: '请输入',
               trigger: ['blur', 'change']
            },
            'polluteType': {
               required: true,
               message: '请选择',
               trigger: ['blur', 'change']
            },
            'changeType': {
               required: true,
               message: '请选择',
               trigger: ['blur', 'change']
            },
            'changeDay': {
               required: true,
               message: '请选择',
               trigger: ['blur', 'change']
            },
            'escalationName': {
               required: true,
               message: '请选择',
               trigger: ['blur']
            },
            'escalationUnitId': {
               required: true,
               message: '请选择',
               trigger: ['blur', 'change']
            },
            'escalationTime': {
               required: true,
               message: '请选择',
               trigger: ['blur']
            }, 'problemDescribe': {
               required: true,
               message: '请输入',
               trigger: ['blur']
            }, 'pollutePosition': {
               required: true,
               message: '请输入',
               trigger: ['blur']
            },
         },
         currentKey: '',
         Dic: this.$storage.getJson('dict'),
         changeEnum: [],
         timeFormet: Number(new Date()),
         form: {
            unitId: '',
            polluteType: '',
            changeType: '',
            changeDay: '',
            escalationName: '',
            escalationUnitId: '',
            escalationTime: '',
            problemDescribe: '',
            pollutePosition: '',
         },
         sumbitForm: {
            unitId: '',
            polluteType: '',
            changeType: '',
            changeDay: '',
            escalationName: '',
            escalationUnitId: '',
            escalationTime: '',
            problemDescribe: '',
            pollutePosition: '',
         },
         unitList: [],
         polluteList: [],
         fileBaseList: [],
      }
   },
   onReady() {
      //onReady 为uni-app支持的生命周期之一
      this.$refs.uForm.setRules(this.rules)
   },
   onShow(){
      uni.hideTabBar()
   },
   created() {
      this.changeEnum = this.Dic.changeEnum
      this.getUnitList()
      this.getContaminateList()
   },
   methods: {
      handleFile(data){
         this.fileBaseList=data
      },
      close(){
         uni.reLaunch({
            url: '/pages/actionChange/agencyPage/index',
         })
      },
      hideKeyboard(data, key) {
         this.actionOptionList = []
         let list = this[data]

         this.currentKey = key
         list.forEach((item)=> {
            item.name = item.dataValue || item.name || item.unitName
            item.value = item.dataKey || item.value|| item.unitId
         })

         this.actionOptionList = list
      },
      selectBack(e) {
         this.form[this.currentKey] = e.name
         this.sumbitForm[this.currentKey] = e.value

      },
      checkTime(e) {
         this.showeEscalationTime = false
         let data = this.$utils.dateFormatter(e.value)
         this.form.escalationTime = data
         this.sumbitForm.escalationTime = data
      },
      submit() {
         this.$refs.uForm.validate().then(res=> {
            this.sumbitForm.problemDescribe=this.form.problemDescribe
            this.sumbitForm.pollutePosition=this.form.pollutePosition
            this.sumbitForm.changeDay=this.form.changeDay
            this.sumbitForm.escalationName=this.form.escalationName
            this.sumbitForm.fileBaseList=this.fileBaseList
            this.sumbitForm.state='10'
            console.log('this.sumbitForm', this.sumbitForm)
            this.$http.httpPost('/allocation/insert', {...this.sumbitForm}).then((res)=> {
               uni.$u.toast('提交成功')
               this.close()
            })
         }).catch(errors=> {
            uni.$u.toast('校验失败')
         })
      },
      // 获取责任单位list
      getUnitList() {
         this.$http.httpGet('/allocation/unit').then((res)=> {
            this.unitList = res.data
         })
      },
      getContaminateList() {
         this.$http.httpGet('/allocation/contaminate').then((res)=> {
            this.polluteList = res.data
         })
      },
   },
}
</script>

<style scoped lang="scss">
   uni-page-body {
      padding-top: 10px;
   }

   .mianContent {
      margin: 19.23rpx;
      border-radius: 5px;
      .title {
         padding: 9.62rpx;
         font-size: 16px;
         font-weight: 700;
         color: #101010;
         border-bottom: 1px solid #bbb;
      }

      /deep/.u-form-item {
         padding-left: 10px;
      }

      /deep/.u-form-item__body {
         padding: 5px 0px !important;
         font-size: 13px!important;
      }
      /deep/.u-form-item__body__left__content__label,/deep/.u-input__content__field-wrapper__field,/deep/.u-radio__text{
         font-size: 13px!important;
      }
   }
   .bunts {
      display: flex;
      margin-top: 20px;
      margin-bottom: 96.15rpx;
      padding-bottom: 20px;
      .u-button {
         width: 288.46rpx;
      }
   }
   .fileBox{
      display: -webkit-box;
      display: -webkit-flex;
      display: flex;
      position: relative;
      width: 100%;
      height: 100%;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -webkit-flex-direction: column;
      flex-direction: column;
      -webkit-box-pack: center;
      -webkit-justify-content: center;
      justify-content: center;
   }
</style>