优化

MrShi

2025-08-19 f2ac76666299407545fb733f0d21f6e8cfe538a3

 h5/pages/reporting_she/reporting_she.vue

@@ -2,240 +2,426 @@
   <view class="she">
      <u--form labelPosition="left" :model="model" :rules="rules" ref="uForm">
         <u-form-item label="员工姓名" labelWidth="120" prop="name" borderBottom required>
            <u--input v-model="model.name" border="none" placeholder="请输入员工姓名"></u--input>
            <u--input v-model="model.name" border="none" placeholder="请输入员工姓名" disabledColor="#ffffff" disabled></u--input>
         </u-form-item>
         <u-form-item label="部门" labelWidth="120" prop="name" borderBottom @click="show = true" required>
            <u--input v-model="model.name" border="none" placeholder="请选择部门" disabledColor="#ffffff"
         <u-form-item label="部门" labelWidth="120" prop="companyName" borderBottom required>
            <u--input v-model="model.companyName" border="none" placeholder="请选择部门" disabledColor="#ffffff"
               disabled></u--input>
            <!-- <u-icon slot="right" name="arrow-right"></u-icon> -->
         </u-form-item>
         <u-form-item label="上报时间" labelWidth="120" prop="submitDate" borderBottom required>
            <u--input v-model="model.submitDate" border="none" placeholder="请选择上报时间" disabledColor="#ffffff"
               disabled></u--input>
            <!-- <u-icon slot="right" name="arrow-right"></u-icon> -->
         </u-form-item>
         <u-form-item label="发生时间" labelWidth="120" prop="happenTime" borderBottom @click="openTime" required>
            <u--input v-model="model.happenTime" border="none" placeholder="请选择发生时间" disabledColor="#ffffff"
               disabled></u--input>
            <u-icon slot="right" name="arrow-right"></u-icon>
         </u-form-item>
         <u-form-item label="上报时间" labelWidth="120" prop="name" borderBottom @click="show1 = true" required>
            <u--input v-model="model.name" border="none" placeholder="请选择上报时间" disabledColor="#ffffff"
               disabled></u--input>
            <u-icon slot="right" name="arrow-right"></u-icon>
         </u-form-item>
         <u-form-item label="发生时间" labelWidth="120" prop="name" borderBottom @click="show1 = true" required>
            <u--input v-model="model.name" border="none" placeholder="请选择发生时间" disabledColor="#ffffff"
               disabled></u--input>
            <u-icon slot="right" name="arrow-right"></u-icon>
         </u-form-item>
         <u-form-item label="涉及人员" labelWidth="120" prop="name" borderBottom required>
         <u-form-item label="涉及人员" labelWidth="120" prop="memberTypeName" borderBottom required>
            <view style="display: flex; flex-direction: column; width: 100%;">
               <view
                  style="margin-bottom: 20rpx; display: flex; align-items: center; justify-content: space-between;" @click="show3 = true">
                  <u--input v-model="model.name" border="none" placeholder="请选择" disabledColor="#ffffff"
                  style="display: flex; align-items: center; justify-content: space-between;" @click="openSJ">
                  <u--input v-model="model.memberTypeName" border="none" placeholder="请选择人员类型" disabledColor="#ffffff"
                     disabled></u--input>
                  <u-icon name="arrow-right"></u-icon>
               </view>
               <view style="display: flex; align-items: center; justify-content: space-between;">
                  <u--input v-model="model.name" border="none" placeholder="请选择" disabledColor="#ffffff"
                     disabled></u--input>
                  <u-icon name="arrow-right"></u-icon>
               </view>
               <template v-if="model.memberTypeName">
                  <view style="display: flex; align-items: center; justify-content: space-between; margin-top: 30rpx;" @click="seleUser" v-if="model.memberType === 1">
                     <u--input v-model="model.memberNames" border="none" placeholder="请选择" disabledColor="#ffffff"
                        disabled></u--input>
                     <u-icon name="arrow-right"></u-icon>
                  </view>
                  <view style="display: flex; align-items: center; justify-content: space-between; margin-top: 30rpx;" v-if="model.memberType === 2">
                     <u--input v-model="model.memberNames" border="none" placeholder="请输入供应商名称"></u--input>
                  </view>
               </template>
            </view>
         </u-form-item>
         <u-form-item label="发生地点" labelWidth="120" prop="name" borderBottom @click="show2 = true" required>
            <u--input v-model="model.name" border="none" placeholder="请选择发生地点" disabledColor="#ffffff"
         <u-form-item label="发生地点" labelWidth="120" prop="localtionName" borderBottom @click="$refs.pengTree._show()" required>
            <u--input v-model="model.localtionName" border="none" placeholder="请选择发生地点" disabledColor="#ffffff"
               disabled></u--input>
            <u-icon slot="right" name="arrow-right"></u-icon>
         </u-form-item>
         <u-form-item label="具体位置" labelWidth="120" prop="name" borderBottom>
            <u--input v-model="model.name" border="none" placeholder="如选择其它区域请务必填写具体位置"></u--input>
         <u-form-item label="具体位置" labelWidth="120" prop="remark" borderBottom>
            <u--input v-model="model.remark" border="none" placeholder="如选择其它区域请务必填写具体位置"></u--input>
         </u-form-item>
         <u-form-item label="是否外部就医" labelWidth="120" prop="value" borderBottom required>
            <u-radio-group v-model="model.value" placement="row">
               <u-radio label="是" :name="0"></u-radio>
               <u-radio label="否" :name="1"></u-radio>
         <u-form-item label="是否外部就医" labelWidth="120" prop="outJiuyi" borderBottom required>
            <u-radio-group v-model="model.outJiuyi" placement="row" @change="model.isYiwushi = ''; model.isHurted = ''">
               <u-radio label="否" name="0"></u-radio>
               <u-radio label="是" name="1"></u-radio>
            </u-radio-group>
         </u-form-item>
         <u-form-item label="是否医务室" labelWidth="120" prop="name" borderBottom required>
            <u-radio-group v-model="model.value" placement="row">
               <u-radio label="是" :name="0"></u-radio>
               <u-radio label="否" :name="1"></u-radio>
         <u-form-item label="是否医务室" labelWidth="120" prop="isYiwushi" borderBottom required v-if="model.outJiuyi === '0'">
            <u-radio-group v-model="model.isYiwushi" placement="row" @change="model.isHurted = ''">
               <u-radio label="否" name="0"></u-radio>
               <u-radio label="是" name="1"></u-radio>
            </u-radio-group>
         </u-form-item>
         <u-form-item label="是否受伤" labelWidth="120" prop="name" borderBottom required>
            <u-radio-group v-model="model.value" placement="row">
               <u-radio label="是" :name="0"></u-radio>
               <u-radio label="否" :name="1"></u-radio>
         <u-form-item label="是否受伤" labelWidth="120" prop="isHurted" borderBottom required v-if="model.isYiwushi === '0'">
            <u-radio-group v-model="model.isHurted" placement="row">
               <u-radio label="否" name="0"></u-radio>
               <u-radio label="是" name="1"></u-radio>
            </u-radio-group>
         </u-form-item>
         <u-form-item label="伤害类型" labelWidth="120" prop="name" borderBottom required>
            <u--input v-model="model.name" border="none" placeholder="请选择伤害类型" disabledColor="#ffffff"
         <u-form-item label="伤害类型" labelWidth="120" prop="typeName" borderBottom @click="$refs.pengTree1._show()" required>
            <u--input v-model="model.typeName" border="none" placeholder="请选择伤害类型" disabledColor="#ffffff"
               disabled></u--input>
            <u-icon slot="right" name="arrow-right"></u-icon>
         </u-form-item>
         <u-form-item label="是否和工作相关" labelWidth="120" prop="name" borderBottom required>
            <u-radio-group v-model="model.value" placement="row">
               <u-radio label="是" :name="0"></u-radio>
               <u-radio label="否" :name="1"></u-radio>
         <u-form-item label="是否和工作相关" labelWidth="120" prop="workRelated" borderBottom required>
            <u-radio-group v-model="model.workRelated" placement="row">
               <u-radio label="否" name="0"></u-radio>
               <u-radio label="是" name="1"></u-radio>
            </u-radio-group>
         </u-form-item>
         <u-form-item label="事件说明" labelWidth="120" prop="name" labelPosition="top" borderBottom required>
            <u--textarea v-model="model.name" placeholder="请输入事件说明" style="margin-top: 15rpx;" maxlength="200" count></u--textarea>
         <u-form-item label="事件说明" labelWidth="120" prop="eventInfo" labelPosition="top" borderBottom required>
            <u--textarea v-model="model.eventInfo" placeholder="请输入事件说明" style="margin-top: 15rpx;" maxlength="200" count></u--textarea>
         </u-form-item>
         <u-form-item label="上传图片" labelWidth="120" prop="fileList" labelPosition="top" borderBottom>
            <u-upload :fileList="model.fileList" @afterRead="afterRead" @delete="deletePic" name="1" multiple
               :maxCount="10" style="margin-top: 15rpx;"></u-upload>
         <u-form-item label="上传图片" labelWidth="120" prop="multifileList" labelPosition="top" borderBottom>
            <UploadImage 
               :fileList="model.multifileList"
               folder="WORKORDER_FILE_PATH"
               @dele="deletePic"
               @getFileList="afterRead"
               style="margin-top: 15rpx;"
            />
         </u-form-item>
      </u--form>
      <u-button type="primary" text="提交" @click="submit" style="margin-top: 60rpx;"></u-button>
      <!-- 部门 -->
      <u-picker :show="show" :columns="columns" @confirm="confirm" @cancel="show = false"
         @change="changeHandler"></u-picker>
      <!-- 日期 -->
      <u-datetime-picker :show="show1" v-model="time" mode="datetime" @cancel="show1 = false"
      <u-datetime-picker :show="show1" v-model="time" mode="datetime" @cancel="closeTime"
         @confirm="selectTime"></u-datetime-picker>
      <!-- 发生地点 -->
      <u-picker :show="show2" :columns="address" @cancel="show2 = false" @confirm="selectAddr"></u-picker>
      <!-- 涉及人员 -->
      <u-picker :show="show3" :columns="userList" @cancel="show3 = false" @confirm="selectUser"></u-picker>
      <!-- 人员类型 -->
      <u-picker
         :show="show3"
         :columns="userList"
         @cancel="closeRY"
         @confirm="selectUser"
         @change="changeUser" />
      <!-- 提交成功 -->
      <u-modal :show="show4" showCancelButton confirmText="查看详情" cancelText="继续上报" @cancel="next" @confirm="toDesc">
         <view class="slot-content">
            <u-icon name="checkmark-circle-fill" color="#3875C5" size="70"></u-icon>
            <text>提交成功</text>
            <text>感谢您的反馈</text>
            <text>已收到您的上报，稍后会有相关同事和您联系</text>
         </view>
      </u-modal>
      <!-- 发生地点 -->
      <peng-tree
         ref="pengTree"
         :range="address"
         idKey="id"
         :selectParent="false"
         nameKey="name"
         :multiple="false"
         title="选择地点"
         @confirm="selectAddress"
         @cancel="$refs.pengTree._hide()">
      </peng-tree>
      <!-- 伤害类型 -->
      <peng-tree
         ref="pengTree1"
         :range="typeList"
         idKey="id"
         :selectParent="false"
         nameKey="name"
         :multiple="false"
         title="选择伤害类型"
         @confirm="selectType"
         @cancel="$refs.pengTree1._hide()">
      </peng-tree>
   </view>
</template>

<script>
   import { mapState } from 'vuex'
   import UploadImage from '@/components/uploadImage/uploadImage.vue'
   import pengTree from '@/uni_modules/peng-tree/peng-tree/peng-tree.vue'
   export default {
      components: { pengTree, UploadImage },
      computed: {
         ...mapState(['userInfo'])
      },
      data() {
         return {
            model: {
               name: '',
               value: 0,
               fileList: []
               submitDate: uni.$u.timeFormat(new Date().getTime(), 'yyyy-mm-dd hh:MM'),
               companyName: '',
               happenTime: '',
               memberType: '',
               memberTypeName: '',
               memberNames: '',
               memberQwids: '',
               localtionId: '',
               localtionName: '',
               remark: '',
               outJiuyi: '',
               isYiwushi: '',
               isHurted: '',
               typeId: '',
               typeName: '',
               workRelated: '',
               eventInfo: '',
               multifileList: [],
               fileList: [],
               type: 0
            },
            rules: {
               name: [{
               happenTime: [{
                  type: 'string',
                  required: true,
                  message: '请填写员工姓名',
                  message: '发生时间不能为空',
                  trigger: ['blur', 'change']
               }]
               }],
               memberTypeNam: [{
                  type: 'string',
                  required: true,
                  message: '涉及人员不能为空',
                  trigger: ['blur', 'change']
               }],
               memberTypeName: [
                  {
                     validator: (rule, value, callback) => {
                        if (value === '本人') {
                           callback()
                        } else if ((value && value !== '本人') && this.model.memberNames) {
                           callback()
                        } else {
                           callback(new Error('不能为空'))
                        }
                     },
                     trigger: ['change','blur'],
                  }
               ],
               localtionName: [{
                  type: 'string',
                  required: true,
                  message: '发生地点不能为空',
                  trigger: ['blur', 'change']
               }],
               outJiuyi: [{
                  type: 'string',
                  required: true,
                  message: '是否外部就医不能为空',
                  trigger: ['blur', 'change']
               }],
               isYiwushi: [{
                  type: 'string',
                  required: true,
                  message: '是否医务室不能为空',
                  trigger: ['blur', 'change']
               }],
               isHurted: [{
                  type: 'string',
                  required: true,
                  message: '是否受伤不能为空',
                  trigger: ['blur', 'change']
               }],
               typeName: [{
                  type: 'string',
                  required: true,
                  message: '伤害类型不能为空',
                  trigger: ['blur', 'change']
               }],
               workRelated: [{
                  type: 'string',
                  required: true,
                  message: '是否和工作相关不能为空',
                  trigger: ['blur', 'change']
               }],
               eventInfo: [{
                  type: 'string',
                  required: true,
                  message: '事件说明不能为空',
                  trigger: ['blur', 'change']
               }],
            },
            show: false,
            show1: false,
            show2: false,
            show3: false,
            show4: true,
            columns: [
               ['中国', '美国'],
               ['深圳', '厦门', '上海', '拉萨']
            ],
            columnData: [
               ['深圳', '厦门', '上海', '拉萨'],
               ['得州', '华盛顿', '纽约', '阿拉斯加']
            ],
            address: [
               ['中国', '美国', '日本']
            ],
            show4: false,
            address: [],
            typeList: [],
            userList: [
               ['供应商', '同事', '本人']
               ['本人', '同事', '供应商']
            ],
            time: ''
            time: new Date().getTime(),
            id: null
         };
      },
      onLoad() {
         this.model.companyName = this.userInfo.companyName
         this.model.name = this.userInfo.name
         this.getLocation()
         this.getType()
      },
      methods: {
         selectImage() {
            var that = this
            that.$ww.chooseImage({
               count: 1,
               sizeType: ['original', 'compressed'],
               sourceType: ['album', 'camera'],
               success(res) {
                  let serverIds = that.getUploadImage(res.localIds)
                  console.log(serverIds)
               },
               fail(err) {
                  console.log(err)
               }
            })
         },
         // 获取服务器图片id
         getUploadImage(localIds) {
            var that = this
            let serverIds = []
            localIds.forEach(localId => {
               that.$ww.uploadImage({
                  localId,
                  success(res) {
                     console.log(res.serverId)
                     serverIds.push(res.serverId)
                  },
                  fail(err) {
                     console.log(err)
                  }
               })
            })
            return serverIds;
         },
         closeTime() {
            this.show1 = false
            this.canScroll()
         },
         openTime() {
            this.show1 = true
            this.stopScroll()
         },
         closeRY() {
            this.show3 = false
            this.canScroll()
         },
         openSJ() {
            this.show3 = true
            this.stopScroll()
         },
         seleUser() {
            var that = this
            that.$ww.selectEnterpriseContact({
               fromDepartmentId: -1,
               mode: 'multi',
               type: ['user'],
            }).then(res =>{
               console.log(res)
               if (res.errCode === 0) {
                  this.model.memberNames = res.result.userList.map(item => item.name).join(',')
                  this.model.memberQwids = res.result.userList.map(item => item.id).join(',')
               }
            })
         },
         // 选择伤害类型
         selectType(e) {
            this.model.typeId = e[0].id
            this.model.typeName = e[0].name
            this.$refs.pengTree._hide()
         },
         // 选择地点
         selectAddress(e) {
            this.model.localtionId = e[0].id
            this.model.localtionName = e[0].name
            this.$refs.pengTree._hide()
         },
         changeUser(e) {
            console.log(e)
         },
         // 获取发生地点树
         async getLocation() {
            let res = await this.$u.api.categoryTree({ categoryType: 5 })
            if (res.code === 200) {
               this.address = res.data
            }
         },
         // 获取伤害类型
         async getType() {
            let res = await this.$u.api.categoryTree({ categoryType: 0 })
            if (res.code === 200) {
               this.typeList = res.data
            }
         },
         next() {
            this.canScroll()
            this.show4 = false
         },
         next1() {
            this.model.name = ''
            this.model.submitDate = uni.$u.timeFormat(new Date().getTime(), 'yyyy-mm-dd hh:MM')
            this.model.companyName = ''
            this.model.happenTime = ''
            this.model.memberType = ''
            this.model.memberTypeName = ''
            this.model.memberNames = ''
            this.model.memberQwids = ''
            this.model.localtionId = ''
            this.model.localtionName = ''
            this.model.remark = ''
            this.model.outJiuyi = ''
            this.model.isYiwushi = ''
            this.model.isHurted = ''
            this.model.typeId = ''
            this.model.typeName = ''
            this.model.workRelated = ''
            this.model.eventInfo = ''
            this.model.multifileList = []
            this.model.fileList = []
            this.model.type = 0
         },
         toDesc() {
            uni.navigateTo({
               url: '/pages/details_she/details_she'
               url: `/pages/details_she/details_she?id=${this.id}`
            })
            this.canScroll()
            this.show4 = false
         },
         // 删除图片
         deletePic(event) {
            this[`fileList${event.name}`].splice(event.index, 1);
         deletePic(index) {
            this.model.multifileList.splice(index, 1)
         },
         // 新增图片
         async afterRead(event) {
            // 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
            let lists = [].concat(event.file);
            let fileListLen = this[`fileList${event.name}`].length;
            lists.map((item) => {
               this[`fileList${event.name}`].push({
                  ...item,
                  status: "uploading",
                  message: "上传中",
               });
            });
            for (let i = 0; i < lists.length; i++) {
               const result = await this.uploadFilePromise(lists[i].url);
               let item = this[`fileList${event.name}`][fileListLen];
               this[`fileList${event.name}`].splice(
                  fileListLen,
                  1,
                  Object.assign(item, {
                     status: "success",
                     message: "",
                     url: result,
                  })
               );
               fileListLen++;
            }
         async afterRead(arr) {
            this.model.multifileList = [...this.model.multifileList, ...arr]
         },
         uploadFilePromise(url) {
            return new Promise((resolve, reject) => {
               let a = uni.uploadFile({
                  url: "http://192.168.2.21:7001/upload", // 仅为示例，非真实的接口地址
                  filePath: url,
                  name: "file",
                  formData: {
                     user: "test",
                  },
                  success: (res) => {
                     setTimeout(() => {
                        resolve(res.data.data);
                     }, 1000);
                  },
               });
            });
         },
         // 提交
         submit() {
            this.$refs.uForm.validate().then(res => {
               uni.$u.toast('校验通过')
            var that = this
            that.$refs.uForm.validate().then(async () => {
               let form = JSON.parse(JSON.stringify(that.model))
               form.submitDate = form.submitDate + ':00'
               form.happenTime = form.happenTime + ':00'
               let res = await that.$u.api.workOrderCreate(form)
               if (res.code === 200) {
                  that.next1()
                  that.id = res.data
                  this.stopScroll()
                  that.show4 = true
               }
            }).catch(errors => {
               uni.$u.toast('校验失败')
					
            })
         },
         changeHandler(e) {
            const {
               columnIndex,
               value,
               values, // values为当前变化列的数组内容
               index,
               // 微信小程序无法将picker实例传出来，只能通过ref操作
               picker = this.$refs.uPicker
            } = e
            // 当第一列值发生变化时，变化第二列(后一列)对应的选项
            if (columnIndex === 0) {
               // picker为选择器this实例，变化第二列对应的选项
               picker.setColumnValues(1, this.columnData[index])
            }
         },
         // 回调参数为包含columnIndex、value、values
         confirm(e) {
            console.log('confirm', e)
            this.show = false
         },
         selectTime(e) {
            console.log('confirm', e)
            this.model.happenTime = uni.$u.timeFormat(e.value, 'yyyy-mm-dd hh:MM'),
            this.canScroll()
            this.show1 = false
         },
         selectAddr(e) {
            console.log('confirm', e)
            this.show2 = false
         },
         selectUser(e) {
            console.log('confirm', e)
            this.model.memberType = e.indexs[0]
            this.model.memberTypeName = e.value[0]
            this.model.memberNames = ''
            this.model.memberQwids = ''
            this.show3 = false
            this.canScroll()
         }
      }
   }