fix:小程序详情修改

quanyawei

2023-11-10 0a24ffeb3eff074c8f11e9f94fdf2c2cb4929799

 pages/actionChange/newPage/index.vue

@@ -1,173 +1,59 @@
<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="
      <u-form ref="uForm" label-width="80" :model="form" :rules="rules" :labelStyle="labelStyle">
         <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" @cancel='showeEscalationTime=false' />
         </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="unitId" required @click="
               showCheckBox = true;
               hideKeyboard('unitList', 'unitId');
            "
         >
            <u--input
               v-model="form.unitId"
               border="none"
               disabled
               disabled-color="#ffffff"
               placeholder="请选择"
            />
            ">
            <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="
         <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-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-form-item border="none" border-bottom label="整改类型:" prop="changeType" required>
            <u-radio-group v-model="form.changeType" style="font-size: 13px;">
               <u-radio :key="index" v-for="(item, index) in changeEnum" :customStyle="{marginRight: '16px'}"
                  :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-form-item border-bottom label="限期天数:" placeholder="请输入" required :disabled='Number(form.changeType)===1'>
            <u-input v-model="form.changeDay" border="none" type="number" :disabled='Number(form.changeType)===1' />
         </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-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 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="problemDescribe"
            required
         >
         <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"
                  :customStyle="{marginRight: '16px'}" :label="item.name" :name="item.value" />
            </u-radio-group>
         </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="相关附件:">
@@ -176,185 +62,235 @@
            </view>
         </u-form-item>
      </u-form>
      <u-action-sheet
         v-if="actionOptionList.length > 0"
         :actions="actionOptionList"
         :show="showCheckBox"
         title="请选择"
         @close="showCheckBox = false"
         @select="selectBack"
      />
      <u-picker v-if="showCheckBox" :show="showCheckBox" keyName="label" :columns="actionOptionList"
         @cancel="showCheckBox = false" :default-selector="[0]" :immediateChange='true'
         @confirm="selectBack"></u-picker>
      <!--    <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 class="but butRight">
            <u-button shape="square" @click="close">关闭</u-button>
         </view>
         <view class="but butleft">
            <u-button shape="square" type="primary" @click="submit">提交</u-button>
         </view>
      </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
   import fileUpload from '../components/fileUpload.vue'
   export default {
      components: {
         fileUpload
      },
      close(){
         uni.reLaunch({
            url: '/pages/actionChange/agencyPage/index',
      data() {
         return {
            sysCode: '1010201', //
            showCheckBox: false,
            labelStyle: {
               fontSize: '30.77rpx'
            },
            showeEscalationTime: false,
            actionOptionList: [],
            rules: {
               'unitId': {
                  required: true,
                  message: '请输入',
                  trigger: ['blur', 'change']
               },
               'polluteType': {
                  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: [],
            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.getUnitList()
         this.getContaminateList()
      },
      onBackPress(e) {
         uni.navigateBack({
            delta: 1, //返回上上一级注意这里要设置为2
         })
         return false
      },
      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()
      methods: {
         handleFile(data) {
            this.fileBaseList = data
         },
         close() {
            uni.$emit('currIndex', {
               data: {
                  index: '0',
                  showTabBar: true
               }
            })
         }).catch(errors=> {
            uni.$u.toast('校验失败')
         })
            uni.navigateBack({
               delta: 1, //返回上上一级注意这里要设置为2
            })
         },
         hideKeyboard(data, key) {
            this.actionOptionList = []
            let list = this[data]
            this.currentKey = key
            list.forEach(item => {
               item.label = item.dataValue || item.name || item.unitName
               item.id = item.dataKey || item.value || item.unitId
            })
            console.log('list', list)
            this.$set(this.actionOptionList, 0, list)
         },
         selectBack(e) {
            console.log(e)
            this.form[this.currentKey] = e.value[0].label
            this.sumbitForm[this.currentKey] = e.value[0].id
            console.log('this.form.changeType', this.currentKey)
            if (Number(this.sumbitForm.changeType) !== 1) {
               this.sumbitForm.changeDay = '0'
               this.form.changeDay = '0'
            } else {
               this.sumbitForm.changeDay = ''
               this.form.changeDay = ''
            }
            this.showCheckBox = false
         },
         checkTime(e) {
            this.showeEscalationTime = false
            let data = this.$utils.dateFormatter(e.value)
            console.log('e.value', 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.investigationType = this.form.investigationType
               this.sumbitForm.fileBaseList = this.fileBaseList
               this.sumbitForm.changeType = this.form.changeType
               this.sumbitForm.state = '20'
               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('校验失败')
            })
         },
         setDefaultValue() {
            let time = new Date().getTime()
            let data = this.$utils.dateFormatter(time)
            this.form.escalationTime = data
            this.sumbitForm.escalationTime = data
            if (this.changeEnum.length > 0) {
               this.form.changeType = this.changeEnum[0].value
               this.sumbitForm.changeType = this.changeEnum[0].value
            }
            let userInfor = JSON.parse(uni.getStorageSync('userInfor') || '{}')
            if (userInfor.unitId && this.unitList.length > 0) {
               let data = this.unitList && this.unitList.find(a => Number(a.unitId) === Number(userInfor.unitId))
                  .unitName
               this.form.unitId = data
               this.sumbitForm.unitId = userInfor.unitId
               this.form.escalationUnitId = data
               this.sumbitForm.escalationUnitId = userInfor.unitId
            }
            this.form.escalationName = userInfor.userName || ''
            this.sumbitForm.escalationName = userInfor.userName || ''
            this.form.investigationType = 1
            this.sumbitForm.investigationType = 1
            console.log('this.sumbitForm', this.sumbitForm)
         },
         // 获取责任单位list
         getUnitList() {
            this.$http.httpGet('/allocation/unit').then(res => {
               this.unitList = res.data
               this.Dic = JSON.parse(uni.getStorageSync('dict') || '[]')
               this.changeEnum = this.Dic.changeEnum
               this.setDefaultValue()
            })
         },
         getContaminateList() {
            this.$http.httpGet('/allocation/contaminate').then(res => {
               this.polluteList = res.data
            })
         },
      },
      // 获取责任单位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;
@@ -363,6 +299,8 @@
   .mianContent {
      margin: 19.23rpx;
      border-radius: 5px;
      padding-bottom: 38.46rpx;

      .title {
         padding: 9.62rpx;
         font-size: 16px;
@@ -375,24 +313,38 @@
         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;
      }
      // /deep/.u-form-item__body {
      //    padding: 8px 0px !important;
      //    font-size: 15px !important;
      // }
      // /deep/.u-form-item__body__left__content__label,
      // /deep/.u-input__content__field-wrapper__field,
      // /deep/.u-radio__text {
      //    font-size: 15px !important;
      // }
   }

   .bunts {
      display: flex;
      margin-top: 20px;
      margin-bottom: 96.15rpx;
      padding-bottom: 20px;
      .u-button {
         width: 288.46rpx;
      padding: 0 20px;
      justify-content: center;

      .but {
         width: 50%;
      }

      .butRight {
         padding-right: 20px;
      }

      .butleft {
         padding-left: 20px;
      }
   }
   .fileBox{

   .fileBox {
      display: -webkit-box;
      display: -webkit-flex;
      display: flex;