提交

MrShi

2025-04-23 c8b32b8bca79a116cfab70eb8c389907b664c9ca

 h5/pages/report_dca/report_dca.vue

@@ -1,78 +1,155 @@
<template>
   <view class="she">
      <u--form labelPosition="left" :model="model" :rules="rules" ref="uForm">
         <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 @click="openS" 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="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="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 @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="openG" 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="DCA类型" labelWidth="120" prop="name" borderBottom @click="jumpSelectType()" required>
            <u--input v-model="model.name" border="none" placeholder="请选择DCA类型" disabledColor="#ffffff"
         <u-form-item label="观察项" labelWidth="120" prop="dcaYesNum" borderBottom @click="jumpSelectType()" required>
            <view style="width: 100%; display: flex; align-items: center; justify-content: space-between;">
               <view style="font-size: 28rpx; color: rgba(32,110,238,1);">符合：{{model.dcaYesNum}} 不符合：{{model.dcaNoNum}}</view>
               <u-icon name="arrow-right"></u-icon>
            </view>
         </u-form-item>
         <u-form-item label="DCA图片" labelWidth="120" prop="multifileList" labelPosition="top" borderBottom>
            <u-upload
            :fileList="model.multifileList"
            @afterRead="afterRead"
            @delete="deletePic"
            multiple
            name="1"
            style="margin-top: 15rpx;" />
         </u-form-item>
         <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-icon slot="right" name="arrow-right"></u-icon>
         </u-form-item>
         <u-form-item label="DCA图片" 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>
         <u-form-item label="通知人" labelWidth="120" prop="name" borderBottom required>
            <u--input v-model="model.name" border="none" placeholder="请输入通知人"></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="closeS"
         @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-datetime-picker :show="show5" v-model="time1" mode="datetime" @cancel="closeF"
         @confirm="selectTime1"></u-datetime-picker>
      <!-- 确定弹窗 -->
      <u-modal :show="show4" showCancelButton title="提醒" @cancel="show4 = false" @confirm="submit">
      <u-modal :show="show4" showCancelButton title="提醒" @cancel="closeT" @confirm="report">
         <view class="slot-content">
            您本次共提交4项，<text>1项</text>符合，<text>3项</text>不符合，系统将会根据不符合项形成对应工单。
            您本次共提交{{total}}项，<text>{{model.dcaYesNum}}项</text>符合，<text>{{model.dcaNoNum}}项</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>
      <!-- 主题 -->
      <u-picker
         :show="show2"
         :columns="theme"
         keyName="name"
         @confirm="selectTheme"
         @cancel="closeG" />
      <!-- 提交成功 -->
      <u-modal :show="show6" showCancelButton confirmText="查看详情" cancelText="继续上报" @cancel="next" @confirm="toDesc">
         <view class="slot-content1">
            <u-icon name="checkmark-circle-fill" color="#3875C5" size="70"></u-icon>
            <text>提交成功</text>
            <text>感谢您的反馈</text>
         </view>
      </u-modal>
   </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: '',
               happenTime: '',
               companyName: '',
               localtionName: '',
               localtionId: '',
               typeId: '',
               typeName: '',
               notifier: '',
               dcaYesNum: 0,
               dcaNoNum: 0,
               dcaNoProblemDTOList: [],
               multifileList: [],
               type: 1
            },
            rules: {
               name: [{
               submitDate: [{
                  type: 'string',
                  required: true,
                  message: '请填写员工姓名',
                  message: '上报时间不能为空',
                  trigger: ['blur', 'change']
               }],
               happenTime: [{
                  type: 'string',
                  required: true,
                  message: '发现时间不能为空',
                  trigger: ['blur', 'change']
               }],
               companyName: [{
                  type: 'string',
                  required: true,
                  message: '部门/班组不能为空',
                  trigger: ['blur', 'change']
               }],
               localtionName: [{
                  type: 'string',
                  required: true,
                  message: '位置不能为空',
                  trigger: ['blur', 'change']
               }],
               typeName: [{
                  type: 'string',
                  required: true,
                  message: '观察主题不能为空',
                  trigger: ['blur', 'change']
               }],
               notifier: [{
                  type: 'string',
                  required: true,
                  message: '通知人不能为空',
                  trigger: ['blur', 'change']
               }]
            },
@@ -80,116 +157,207 @@
            show1: false,
            show2: false,
            show3: false,
            show4: true,
            columns: [
               ['中国', '美国'],
               ['深圳', '厦门', '上海', '拉萨']
            ],
            columnData: [
               ['深圳', '厦门', '上海', '拉萨'],
               ['得州', '华盛顿', '纽约', '阿拉斯加']
            ],
            address: [
               ['中国', '美国', '日本']
            ],
            userList: [
               ['供应商', '同事', '本人']
            ],
            time: ''
            show4: false,
            show5: false,
            show6: false,
            time: new Date().getTime(),
            time1: new Date().getTime(),
            address: [],
            theme: [],
            total: 0
         };
      },
      onLoad() {
         this.model.companyName = this.userInfo.companyName
         this.getNotifier()
         this.getLocation()
         this.getZhuti()
         // 接收数据
         uni.$on('update', (data) => {
            this.total = data.total
            this.model.dcaYesNum = data.dcaYesNum
            this.model.dcaNoNum = data.dcaNoNum
            this.model.dcaNoProblemDTOList = data.dcaNoProblemDTOList
         })
      },
      methods: {
         jumpSelectType() {
         openG() {
            this.stopScroll()
            this.show2 = true
         },
         closeG() {
            this.canScroll()
            this.show2 = false
         },
         next() {
            this.model.submitDate = ''
            this.model.happenTime = ''
            this.model.companyName = ''
            this.model.localtionName = ''
            this.model.localtionId = ''
            this.model.typeId = ''
            this.model.typeName = ''
            this.model.notifier = ''
            this.model.dcaYesNum = 0
            this.model.dcaNoNum = 0
            this.model.dcaNoProblemDTOList = []
            this.model.multifileList = []
            this.model.type = 1
            this.canScroll()
            this.show6 = false
         },
         toDesc() {
            this.canScroll()
            this.show6 = false
            uni.navigateTo({
               url: '/pages/type_dca/type_dca'
               url: `/pages/details_dca/details_dca?id=${this.id}`
            })
         },
         // 提交上报
         async report() {
            let res = await this.$u.api.workOrderCreate(this.model)
            if (res.code === 200) {
               this.show4 = false
               this.id = res.data
               this.show6 = true
            }
         },
         // dac位置
         async getLocation() {
            let res = await this.$u.api.categoryTree({ categoryType: 3 })
            if (res.code === 200) {
               this.address = res.data
            }
         },
         // dac主题
         async getZhuti() {
            let res = await this.$u.api.categoryList({ categoryType: 4, isRoot: 1 })
            if (res.code === 200) {
               this.theme = [res.data]
            }
         },
         // 选择主题
         selectTheme(e) {
            this.model.typeId = e.value[0].id
            this.model.typeName = e.value[0].name
            this.canScroll()
            this.show2 = false
         },
         // 选择位置
         selectAddress(e) {
            this.model.localtionId = e[0].id
            this.model.localtionName = e[0].name
            this.$refs.pengTree._hide()
         },
         // 获取通知人
         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(',')
            }
         },
         jumpSelectType() {
            if (!this.model.typeId) {
               uni.showToast({
                  title: '请先选择观察主题',
                  icon: 'none'
               })
               return
            }
            uni.navigateTo({
               url: `/pages/type_dca/type_dca?theme=${this.model.typeId}&themeName=${this.model.typeName}`
            })
         },
         // 删除图片
         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: this.$baseUrl + '/web/public/uploadBatch',
               files: event.file.map(e => {
                  return { name: 'files', uri: e.url }
               }),
               formData: {
                  folder: "WORKORDER_FILE_PATH",
               },
               success(res) {
                  uni.hideLoading();
                  let obj = JSON.parse(res.data)
                  if (obj.code === 200) {
                     console.log(obj.data)
                     obj.data.forEach(item => {
                        item.fileurl = item.imgaddr
                     })
                     that.model.multifileList = [...that.model.multifileList, ...obj.data]
                  }
               }
            })
            // uni.uploadFile({
            //    url: this.$baseUrl + '/web/public/upload',
            //    filePath: event.file.url,
            //    name: "file",
            //    formData: {
            //       folder: "WORKORDER_FILE_PATH"
            //    },	
            //    success: (res) => {
            //       let obj = JSON.parse(res.data)
            //       if (obj.code === 200) {
            //          obj.data.fileurl = obj.data.imgaddr
            //          this.model.multifileList.push(obj.data)
            //       }
            //    }
            // });
         },
         submit() {
            this.$refs.uForm.validate().then(res => {
               uni.$u.toast('校验通过')
               if (this.total === 0) return uni.showToast({
                  title: '请选择观察项',
                  icon: 'none'
               })
               this.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])
            }
         openF() {
            this.stopScroll()
            this.show5 = true
         },
         // 回调参数为包含columnIndex、value、values
         confirm(e) {
            console.log('confirm', e)
            this.show = false
         closeF() {
            this.canScroll()
            this.show5 = false
         },
         selectTime(e) {
            console.log('confirm', e)
         openS() {
            this.stopScroll()
            this.show1 = true
         },
         closeS() {
            this.canScroll()
            this.show1 = false
         },
         selectAddr(e) {
            console.log('confirm', e)
            this.show2 = false
         closeT() {
            this.canScroll()
            this.show4 = false
         },
         selectUser(e) {
            console.log('confirm', e)
            this.show3 = false
         // 上报时间
         selectTime(e) {
            this.model.submitDate = uni.$u.timeFormat(e.value, 'yyyy-mm-dd hh:MM:ss')
            this.canScroll()
            this.show1 = false
         },
         // 发现时间
         selectTime1(e) {
            this.model.happenTime = uni.$u.timeFormat(e.value, 'yyyy-mm-dd hh:MM:ss')
            this.canScroll()
            this.show5 = false
         }
      }
   }
@@ -208,5 +376,23 @@
            color: #206EEE;
         }
      }
      .slot-content1 {
         width: 100%;
         display: flex;
         flex-direction: column;
         align-items: center;
         text {
            &:nth-child(2) {
               color: rgba(16,16,16,1);
               font-size: 28rpx;
               margin-top: 24rpx;
            }
            &:nth-child(3) {
               color: rgba(190,190,190,1);
               font-size: 24rpx;
               margin-top: 34rpx;
            }
         }
      }
   }
</style>