Your Name
2022-09-28 fe48637b8197e55cb2b454f79d29dab88bd5f7dd
src/views/specialWorkManage/workTicket/workApply/components/ground.vue
@@ -9,21 +9,30 @@
                  <el-select v-model="form.operatorUids" multiple>
                     <el-option
                        v-for="item in workerList"
                        :key="item.uid"
                        :label="item.username"
                        :value="item.uid"
                        :key="item.id"
                        :label="item.realname + '(' + item.username.toString().replace(/^(\d{3})\d{4}(\d{4})$/,'$1****$2') + ')'"
                        :value="item.id"
                     />
                  </el-select>
               </el-form-item>
            </el-col>
                <el-col :span="12">
                    <el-form-item label="作业内容" prop="workContent">
                        <el-input
                            v-model="form.workContent"
                            autosize
                            type="textarea"
                            placeholder="请输入作业内容"
                        />
                    </el-form-item>
                </el-col>
         </el-row>
         <el-row>
            <el-col :span="12">
               <el-form-item label="作业时间" prop="workTimeLine">
                  <el-date-picker
                        v-model="form.workTimeLine"
                        format="YYYY-MM-DD HH:mm"
                        value-format="YYYY-MM-DD HH:mm:00"
                        value-format="yyyy-MM-dd HH:mm:ss"
                        type="datetimerange"
                        range-separator="至"
                        start-placeholder="开始时间"
@@ -31,38 +40,27 @@
                  />
               </el-form-item>
            </el-col>
         </el-row>
         <el-row>
            <el-col :span="12">
               <el-form-item label="作业内容" prop="workContent">
                  <el-input
                        v-model="form.workContent"
                        autosize
                        type="textarea"
                        placeholder="请输入作业内容"
                  />
               </el-form-item>
            </el-col>
            <el-col :span="12">
               <el-form-item label="作业地址" prop="workLocation">
                  <el-input
                        v-model="form.workLocation"
                        autosize
                        type="textarea"
                        placeholder="请输入作业地址"
                  />
               </el-form-item>
            </el-col>
                <el-col :span="12">
                    <el-form-item label="作业地址" prop="workLocation">
                        <el-input
                            v-model="form.workLocation"
                            autosize
                            type="textarea"
                            placeholder="请输入作业地址"
                        />
                    </el-form-item>
                </el-col>
         </el-row>
         <el-row>
            <el-col :span="12">
               <el-form-item label="作业单位" prop="workDetail.operationDepId">
                  <el-select v-model="form.workDetail.operationDepId">
                     <el-option
                           v-for="item in csDepList"
                           :key="item.value"
                           :label="item.label"
                           :value="item.value"
                           v-for="item in departList"
                           :key="item.id"
                           :label="item.department"
                           :value="item.id"
                     />
                  </el-select>
               </el-form-item>
@@ -77,42 +75,88 @@
                  />
               </el-form-item>
            </el-col>
         </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="动土方式" prop="workDetail.gbMethod">
                            <el-input
                                v-model="form.workDetail.gbMethod"
                                autosize
                                type="textarea"
                                placeholder="请输入"
                            />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="危险辨识" prop="hazardIdentification">
                            <el-input
                                v-model="form.hazardIdentification"
                                autosize
                                type="textarea"
                                placeholder="请输入危险辨识"
                            />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="关联作业" prop="workDetail.otherSpecialWork">
                            <el-select v-model="form.workDetail.otherSpecialWork" multiple>
                                <el-option v-for="item in otherWorkList" :key="item.value" :label="item.label" :value="item.value" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
         <el-row>
            <el-col :span="12">
               <el-form-item label="动土方式" prop="workDetail.gbMethod">
                  <el-input
                        v-model="form.workDetail.gbMethod"
                        autosize
                        type="textarea"
                        placeholder="请输入"
                  />
               </el-form-item>
            </el-col>
            <el-col :span="12">
               <el-form-item label="关联作业" prop="workDetail.otherSpecialWork">
                  <el-select v-model="form.workDetail.otherSpecialWork" multiple>
                     <el-option v-for="item in otherWorkList" :key="item.value" :label="item.label" :value="item.value" />
                  </el-select>
               </el-form-item>
            </el-col>
         </el-row>
         <el-row>
            <el-col :span="24">
               <el-form-item label="图片上传" prop="workDetail.gbPath">
                  <el-upload accept="image/*" :on-exceed="showTip" :on-preview="handlePictureCardPreview" :limit='imgLimit' v-model:file-list="fileList" :http-request="upload" :action="uploadUrl" list-type="picture-card" :on-remove="handleRemove" :before-remove="beforeRemove" :before-upload="getUploadUrl">
                     <el-icon><Plus /></el-icon>
                     <template #tip>
                        <div class="el-upload__tip">上传jpg/png图片尺寸小于500KB,最多可上传5张</div>
                     </template>
                  </el-upload>
               </el-form-item>
            </el-col>
                <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                    <el-form-item label="隐患上报图" prop="img">
                        <el-upload
                            accept=".pdf,.jpg,.png"
                            :action="fileRoad"
                            class="upload-demo"
                            ref="upload"
                            :headers="header"
                            :data="uploadForm"
                            list-type="picture-card"
                            :file-list="fileList"
                            v-model="form.workDetail.gbPath"
                            :on-change="handleChangeFile"
                            :on-success="onFileSuccess"
                            :multiple="false"
                            :auto-upload="true">
                            <i slot="default" class="el-icon-plus"></i>
                            <div slot="file" slot-scope="{file}">
                                <img
                                    class="el-upload-list__item-thumbnail"
                                    :src="file.url" alt=""
                                >
                                <span class="el-upload-list__item-actions">
                                <span
                                    class="el-upload-list__item-preview"
                                    @click="handleFile(file)"
                                >
                                  <i class="el-icon-zoom-in"></i>
                                </span>
                                <span
                                    v-if="!disabled"
                                    class="el-upload-list__item-delete"
                                    @click="handleRemove(file,file.$index)"
                                >
                                  <i class="el-icon-delete"></i>
                                </span>
                              </span>
                            </div>
                        </el-upload>
                    </el-form-item>
                </el-col>
         </el-row>
         </div>
      </el-form>
      <div class="applyBtn">
         <el-button type="primary" size="large" plain @click="submitForm(ruleFormRef)">发起申请</el-button>
         <el-button type="primary" size="large" plain @click="submitForm()">发起申请</el-button>
      </div>
   </div>
   <el-dialog v-model="dialogVisible">
@@ -122,12 +166,21 @@
</template>
<script>
   export default {
   import Cookies from "_js-cookie@2.2.0@js-cookie";
    import {workApplyApi} from "../../../../../api/workApply";
    export default {
      name: 'groundForm',
      components: {},
      props:['workerList'],
      props:['workerList','departList'],
        data(){
            return{
                fileRoad:process.env.BASE_API + '/task/web/upload',
                uploadForm:{
                },
                header:{Authorization:''},
                fileList:[],
                disabled:false,
                form: {
                    operatorUids: [],
                    workType: 4,
@@ -145,7 +198,6 @@
                    expStartTime: '',
                    expEndTime: ''
                },
                fileList: [],
                imgLimit: 5,
                uploadUrl: '',
                dialogVisible: false,
@@ -211,9 +263,10 @@
                    }
                ],
                applyRules:{
                    operatorUids: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
                    operatorUids: [{ required: true, message: '该内容不能为空', trigger: 'change' }],
                    workType: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
                    workContent: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
                    hazardIdentification: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
                    workLocation: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
                    workTimeLine: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
                    "workDetail.operationDepId": [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
@@ -224,26 +277,41 @@
            }
        },
        methods:{
            async submitForm(formEl) {
                if (!formEl) return
                await formEl.validate(async (valid, fields) => {
            submitForm() {
                this.$refs["ruleFormRef"].validate(async (valid, fields) => {
                    if (valid) {
                        state.form.expStartTime = JSON.parse(JSON.stringify(state.form.workTimeLine))[0]
                        state.form.expEndTime = JSON.parse(JSON.stringify(state.form.workTimeLine))[1]
                        let { workTimeLine, ...data } = JSON.parse(JSON.stringify(state.form))
                        this.form.expStartTime = JSON.parse(JSON.stringify(this.form.workTimeLine))[0]
                        this.form.expEndTime = JSON.parse(JSON.stringify(this.form.workTimeLine))[1]
                        let { workTimeLine, ...data } = JSON.parse(JSON.stringify(this.form))
                        data.workDetail.otherSpecialWork = data.workDetail.otherSpecialWork.join(',')
                        data.workDetail.gbPath = data.workDetail.gbPath.join(',')
                        data.workDetail.gbPath = JSON.stringify(this.fileList.map(item => { return item.url.substring(process.env.IMG_API.length) }))
                        const res = await workApplyApi().postGroundApply(data)
                        if (res.data.code === '200') {
                            ElMessage({
                            this.$message({
                                type: 'success',
                                message: '提交成功!'
                            });
                            formEl.resetFields()
                            state.form.workDetail.gbPath = []
                            state.fileList = []
                            this.$refs["ruleFormRef"].clearValidate()
                            this.form = {
                                operatorUids: [],
                                workType: 2,
                                workLevel: 0,
                                workContent: '',
                                workLocation: '',
                                workDetail:{
                                    csDepId: null,
                                    csName: '',
                                    csOriginalName: '',
                                    otherSpecialWork: []
                                },
                                workTimeLine: [],
                                expStartTime: '',
                                hazardIdentification: '',
                                expEndTime: ''
                            }
                            this.fileList = []
                        } else {
                            ElMessage({
                            this.$message({
                                type: 'warning',
                                message: res.data.msg
                            });
@@ -252,7 +320,44 @@
                        console.log('error submit!', fields)
                    }
                })
            }
            },
            handleChangeFile(){
                this.header.Authorization = Cookies.get('token')
            },
            onFileSuccess(response){
                if(response.code === '200'){
                    this.fileList.push({url:process.env.IMG_API + response.result.path})
                    this.$notify({
                        type:'success',
                        duration:2000,
                        message:'上传成功',
                        title:'成功',
                    })
                }else{
                    this.$message({
                        message:res.data.message,
                        type:'warning'
                    })
                }
            },
            handleFile(file){
                this.dialogImageUrl = file.url;
                this.dialogVisible = true;
            },
            showImg(file){
                window.open(file, '_blank')
            },
            handleRemove(file,value){
                return this.$confirm(`确定移除 ${ file.uid }?`,'提示',{
                    confirmButtonText:'确定',
                    cancelButtonText:'取消',
                    type:'warning',
                }).then(()=> {
                    this.fileList.splice(value,1)
                })
            },
        },
   };
@@ -307,18 +412,6 @@
   }
</style>
<style>
   .avatar-uploader .el-upload {
      border: 1px dashed var(--el-border-color);
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
      transition: var(--el-transition-duration-fast);
   }
   .avatar-uploader .el-upload:hover {
      border-color: var(--el-color-primary);
   }
   .el-icon.avatar-uploader-icon {
      font-size: 28px;