提交

MrShi

2025-04-23 c8b32b8bca79a116cfab70eb8c389907b664c9ca

 h5/pages/riskReporting/riskReporting.vue

@@ -2,55 +2,52 @@
   <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="name" borderBottom @click="show1 = true" required>
            <u--input v-model="model.name" border="none" placeholder="请选择上报时间" disabledColor="#ffffff"
         <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="name" borderBottom @click="show1 = true" required>
            <u--input v-model="model.name" border="none" placeholder="请选择发现时间" disabledColor="#ffffff"
         <u-form-item label="发现时间" labelWidth="120" prop="happenTime" borderBottom @click="openF" 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="show2 = true" 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 @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" 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="riskInfo" labelPosition="top" borderBottom required>
            <u--textarea v-model="model.riskInfo" 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>
            <u-upload
            :fileList="model.multifileList"
            @afterRead="afterRead"
            @delete="deletePic"
            name="1"
            style="margin-top: 15rpx;" />
         </u-form-item>
         <u-form-item label="通知人" labelWidth="120" prop="name" borderBottom required>
            <u--input v-model="model.name" border="none" placeholder="请输入通知人"></u--input>
         <u-form-item label="通知人" labelWidth="120" prop="notifier" borderBottom required>
            <u--input v-model="model.notifier" border="none" placeholder="请输入通知人" disabledColor="#ffffff" disabled></u--input>
         </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="closeF"
         @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-modal :show="show4" showCancelButton confirmText="查看详情" cancelText="继续上报" @cancel="next" @confirm="toDesc">
         <view class="slot-content">
@@ -59,111 +56,219 @@
            <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 pengTree from '@/uni_modules/peng-tree/peng-tree/peng-tree.vue'
   export default {
      components: { pengTree },
      computed: {
         ...mapState(['userInfo'])
      },
      data() {
         return {
            id: null,
            model: {
               name: '',
               value: 0,
               fileList: []
               submitDate: uni.$u.timeFormat(new Date().getTime(), 'yyyy-mm-dd hh:MM:ss'),
               companyName: '',
               happenTime: '',
               localtionId: '',
               localtionName: '',
               typeId: '',
               typeName: '',
               riskInfo: '',
               notifier: '',
               multifileList: [],
               type: 3
            },
            rules: {
               name: [{
                  type: 'string',
                  required: true,
                  message: '请填写员工姓名',
                  message: '员工姓名不能为空',
                  trigger: ['blur', 'change']
               }]
               }],
               happenTime: [{
                  type: 'string',
                  required: true,
                  message: '发现时间不能为空',
                  trigger: ['blur', 'change']
               }],
               typeName: [{
                  type: 'string',
                  required: true,
                  message: '风险类型不能为空',
                  trigger: ['blur', 'change']
               }],
               localtionName: [{
                  type: 'string',
                  required: true,
                  message: '发生地点不能为空',
                  trigger: ['blur', 'change']
               }],
               riskInfo: [{
                  type: 'string',
                  required: true,
                  message: '风险描述不能为空',
                  trigger: ['blur', 'change']
               }],
               notifier: [{
                  type: 'string',
                  required: true,
                  message: '通知人不能为空',
                  trigger: ['blur', 'change']
               }],
            },
            show: false,
            show1: false,
            show2: false,
            show3: false,
            show4: true,
            columns: [
               ['中国', '美国'],
               ['深圳', '厦门', '上海', '拉萨']
            ],
            columnData: [
               ['深圳', '厦门', '上海', '拉萨'],
               ['得州', '华盛顿', '纽约', '阿拉斯加']
            ],
            address: [
               ['中国', '美国', '日本']
            ],
            userList: [
               ['供应商', '同事', '本人']
            ],
            time: ''
            show4: false,
            time: new Date().getTime(),
            typeList: [],
            address: []
         };
      },
      onLoad() {
         this.model.companyName = this.userInfo.companyName
         this.model.name = this.userInfo.name
         this.getLocation()
         this.getType()
         this.getNotifier()
      },
      methods: {
         openF() {
            this.stopScroll()
            this.show1 = true
         },
         closeF() {
            this.canScroll()
            this.show1 = false
         },
         // 获取通知人
         async getNotifier() {
            let res = await this.$u.api.managersList({ type: 0 })
            if (res.code === 200) {
               this.model.notifier = res.data.map(item => item.memberName).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()
         },
         // 跌绊滑伤害类型
         async getType() {
            let res = await this.$u.api.categoryTree({ categoryType: 1 })
            if (res.code === 200) {
               this.typeList = res.data
            }
         },
         // 跌绊滑发生地点
         async getLocation() {
            let res = await this.$u.api.categoryTree({ categoryType: 2 })
            if (res.code === 200) {
               this.address = res.data
            }
         },
         next() {
            this.model.name = ''
            this.model.submitDate = uni.$u.timeFormat(new Date().getTime(), 'yyyy-mm-dd hh:MM:ss')
            this.model.companyName = ''
            this.model.happenTime = ''
            this.model.localtionId = ''
            this.model.localtionName = ''
            this.model.typeId = ''
            this.model.typeName = ''
            this.model.riskInfo = ''
            this.model.notifier = ''
            this.model.multifileList = []
            this.model.type = 3
            this.canScroll()
            this.show4 = false
         },
         toDesc() {
            uni.navigateTo({
               url: '/pages/riskDetails/riskDetails'
               url: `/pages/riskDetails/riskDetails?id=${this.id}`
            })
            this.canScroll()
            this.show4 = false
         },
         // 删除图片
         deletePic(event) {
            this[`fileList${event.name}`].splice(event.index, 1);
            this.model.multifileList.forEach((item, index) => {
               if (item.imgaddr === event.file.imgaddr) {
                  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++;
            }
         },
         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);
                  },
               });
            var that = this
            uni.showLoading({ title: '上传中...', mask: true })
            uni.uploadFile({
               url: that.$baseUrl + '/web/public/upload',
               filePath: event.file.url,
               name: "file",
               formData: {
                  folder: "WORKORDER_FILE_PATH"
               },	
               success: (res) => {
                  uni.hideLoading();
                  let obj = JSON.parse(res.data)
                  if (obj.code === 200) {
                     obj.data.fileurl = obj.data.imgaddr
                     that.model.multifileList.push(obj.data)
                  }
               }
            });
         },
         // 提交
         submit() {
            this.$refs.uForm.validate().then(res => {
               uni.$u.toast('校验通过')
            var that = this
            that.$refs.uForm.validate().then(async () => {
               let res = await that.$u.api.workOrderCreate(that.model)
               if (res.code === 200) {
                  that.id = res.data
                  that.stopScroll()
                  that.show4 = true
               }
            }).catch(errors => {
               uni.$u.toast('校验失败')
					
            })
         },
         changeHandler(e) {
@@ -187,7 +292,8 @@
            this.show = false
         },
         selectTime(e) {
            console.log('confirm', e)
            this.model.happenTime = uni.$u.timeFormat(e.value, 'yyyy-mm-dd hh:MM:ss')
            this.canScroll()
            this.show1 = false
         },
         selectAddr(e) {